*{box-sizing:border-box;margin:0;padding:0}

/* Portal always reads from data-mode on html tag */
body{
  font-family:system-ui,sans-serif;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:20px;
}

/* ── LIGHT MODE (default) ── */
.portal-card{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:12px;padding:32px;
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}
.logo-name{font-size:15px;font-weight:700;color:#0f172a}
.logo-sub{font-size:12px;color:#64748b}
.field label{display:block;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.field input{width:100%;padding:11px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:7px;font-size:14px;color:#0f172a;outline:none;transition:border-color .2s}
.field input:focus{border-color:#1d4ed8}
.field input::placeholder{color:#94a3b8}
.btn-sign-in{width:100%;background:#1d4ed8;color:#fff;border:none;border-radius:7px;padding:13px;font-size:15px;font-weight:700;cursor:pointer}
.btn-sign-in:hover{opacity:.9}
.version-line{text-align:center;font-size:11px;color:#94a3b8;margin-bottom:16px}
.disclaimer{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px;display:flex;gap:10px}
.disclaimer-icon{font-size:16px;flex-shrink:0}
.disclaimer-text{font-size:11px;color:#64748b;line-height:1.65}
.disclaimer-text strong{color:#475569;display:block;margin-bottom:5px;font-size:12px}

/* ── DARK MODE ── */
[data-mode="dark"] .portal-card{
  background:rgba(10,18,35,0.96);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
[data-mode="dark"] .logo-name{color:#f1f5f9}
[data-mode="dark"] .logo-sub{color:#94a3b8}
[data-mode="dark"] .field label{color:#94a3b8}
[data-mode="dark"] .field input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:#f1f5f9}
[data-mode="dark"] .field input::placeholder{color:rgba(255,255,255,.22)}
[data-mode="dark"] .version-line{color:#94a3b8}
[data-mode="dark"] .disclaimer{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
[data-mode="dark"] .disclaimer-text{color:#94a3b8}
[data-mode="dark"] .disclaimer-text strong{color:#cbd5e1}
[data-mode="dark"] .alert-error{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.35);color:#fca5a5}

/* Alert (light mode) */
.alert-error{background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;padding:10px 14px;border-radius:6px;font-size:13px;margin-bottom:16px}

/* Logo mark — accent colour */
.logo-mark{width:44px;height:44px;background:#1d4ed8;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:800;flex-shrink:0}

.portal-wrap{width:100%;max-width:440px}
.portal-logo{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.login-form{display:flex;flex-direction:column;gap:14px;margin-bottom:16px}

/* Hero — always dark regardless of mode */
.portal-hero{
  position:relative;border-radius:12px;overflow:hidden;
  margin-bottom:20px;min-height:180px;
  background-color:#0d1b3e !important;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}
.hero-img{width:100%;height:200px;object-fit:cover;display:block}
.hero-placeholder{text-align:center;color:rgba(255,255,255,.4);padding:32px;background-color:#0d1b3e;width:100%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.6),rgba(0,0,0,.2));display:flex;align-items:center;justify-content:center}
.hero-brand{text-align:center;color:#fff}
.hero-star{font-size:18px;font-weight:800;color:#d4af37;display:block;margin-bottom:4px}
.hero-title{font-size:12px;color:rgba(255,255,255,.8);letter-spacing:1px;text-transform:uppercase}