@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root { --blue:#970300; }
html, body { background:#fff; }

/* Right: filebrowser form as white panel */
#login{
  position:fixed !important; inset:0 !important;
  width:auto !important; background:#fff !important;
  display:flex !important; align-items:center; justify-content:center;
  padding:40px !important; padding-left:45% !important;
  box-sizing:border-box !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
}
#login form{
  position:fixed !important;
  top:50% !important; left:72.5% !important;
  transform:translate(-50%,-50%) !important;
  width:400px !important; max-width:88vw !important;
  margin:0 !important; padding:0 !important;
  background:#fff !important; border:none !important;
  box-shadow:none !important; border-radius:0 !important;
}
#login form > img, #login img { display:none !important; }

#login h1{
  color:#111827 !important; font-family:'Poppins',sans-serif !important;
  font-weight:800 !important; font-size:1.5rem !important;
  text-align:left !important; margin:0 0 4px 0 !important;
}
.etf-subtitle{ font-size:.88rem; color:#6B7280; margin-bottom:26px; font-family:'Inter',sans-serif; text-align:left; }

#login input[type="text"], #login input[type="password"]{
  width:100% !important; box-sizing:border-box !important;
  border:1px solid #E5E7EB !important; border-radius:10px !important;
  padding:12px 14px 12px 42px !important; margin-bottom:18px !important;
  font-size:.9rem !important; font-family:'Inter',sans-serif !important;
  color:#111827 !important; background-color:#fff !important;
  background-repeat:no-repeat !important; background-position:14px center !important;
  background-size:16px 16px !important; box-shadow:none !important;
}
#login input[type="text"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") !important; }
#login input[type="password"]{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") !important; }
#login input[type="text"]:focus, #login input[type="password"]:focus{
  outline:none !important; border-color:#970300 !important;
  box-shadow:0 0 0 3px rgba(151,3,0,0.1) !important;
}
#login input[type="submit"]{
  width:100% !important; padding:13px !important; margin-top:4px !important;
  border:none !important; border-radius:10px !important;
  background:#970300 !important; color:#fff !important;
  font-size:.95rem !important; font-weight:600 !important;
  font-family:'Inter',sans-serif !important; cursor:pointer !important;
}
#login input[type="submit"]:hover{ background:#7a0200 !important; }
#login .wrong{
  background:#FEF2F2 !important; color:#991B1B !important;
  border:1px solid #FECACA !important; border-radius:10px !important; margin-bottom:18px !important;
}

/* Left branding panel (injected by custom.js) */
.etf-brand-panel{
  position:fixed; top:0; bottom:0; left:0; width:45%;
  background:#111827; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:60px; box-sizing:border-box; font-family:'Inter',sans-serif;
}
.etf-brand-panel::before{ content:''; position:absolute; top:-20%; right:-20%; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(151,3,0,0.18) 0%, transparent 70%); }
.etf-brand-panel::after{ content:''; position:absolute; bottom:-15%; left:-10%; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(151,3,0,0.12) 0%, transparent 70%); }
.etf-bp-logo img{ height:46px; margin-bottom:44px; position:relative; z-index:1; }
.etf-bp-headline{ font-size:2rem; font-weight:800; line-height:1.2; margin-bottom:12px; font-family:'Poppins',sans-serif; position:relative; z-index:1; }
.etf-bp-headline span{ color:#EF4444; }
.etf-bp-tagline{ font-size:1rem; color:#9CA3AF; margin-bottom:40px; line-height:1.6; position:relative; z-index:1; max-width:420px; }
.etf-features{ position:relative; z-index:1; }
.etf-feature{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.etf-feature-icon{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; color:#9CA3AF; font-size:.9rem; flex-shrink:0; }
.etf-feature-text{ font-size:.88rem; color:#D1D5DB; font-weight:500; }
.etf-feature-desc{ font-size:.72rem; color:#6B7280; margin-top:2px; }
.etf-bp-footer{ position:relative; z-index:1; margin-top:48px; font-size:.72rem; color:#4B5563; }

@media (max-width:900px){
  .etf-brand-panel{ display:none; }
  #login form{ left:50% !important; }
}