:root { --surface-soft: #f5f6f8; --muted: #666b7c; --border: #e0e3eb; }
:root[data-theme="dark"] { --surface-soft: #1c1c24; --muted: #b2b2c5; --border: #454552; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 24px 5vw; border-bottom: 1px solid var(--border); gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 1.2rem; font-weight: 600; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #5755d9; color: white; }
.theme-control { display: flex; align-items: center; gap: 12px; font-size: .7rem; }
.theme-control .form-select { width: auto; }
main { flex: 1; width: min(1080px, 100%); margin: 0 auto; padding: 64px 32px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .6rem; font-weight: 600; color: var(--muted); margin-bottom: 20px; }
h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); line-height: 1.2; letter-spacing: -.04em; font-weight: 600; margin-bottom: 24px; }
h2 { font-size: 1.5rem; font-weight: 600; }
#welcome:focus { outline: none; box-shadow: none; }
p { line-height: 1.6; }
.lead { color: var(--muted); max-width: 380px; margin-bottom: 38px; }
.intro-details { display: flex; gap: 18px; margin: 24px 0; }
.intro-details > span { color: #807fe7; font-size: .65rem; padding-top: 3px; }
.intro-details h2 { font-size: .8rem; margin: 0 0 5px; }
.intro-details p, .intro-note { color: var(--muted); font-size: .7rem; margin: 0; }
.intro-note { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 36px; }
.access-card { border-radius: 14px; border-color: var(--border); box-shadow: 0 12px 50px #00000008; }
.access-card .card-body { padding: 36px; }
.muted { color: var(--muted); font-size: .75rem; }
form { margin-top: 28px; }
.form-group { margin-bottom: 20px; }
.form-label { font-size: .7rem; font-weight: 500; }
.form-input { height: 42px; border-radius: 5px; }
.password-field { display: flex; }
.password-field input { border-radius: 5px 0 0 5px; min-width: 0; }
.password-field .btn { height: 42px; border-radius: 0 5px 5px 0; }
#submit, #logout { height: 44px; border-radius: 5px; margin-top: 26px; }
#submit .icon { margin-left: 12px; }
.account-help { font-size: .65rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 20px; margin-top: 28px; margin-bottom: 0; }
.toast { font-size: .7rem; margin: 16px 0; }
dl { font-size: .8rem; margin: 24px 0; overflow-wrap: anywhere; }
dd { margin: 4px 0 16px; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 20px 5vw; border-top: 1px solid var(--border); color: var(--muted); font-size: .6rem; }
@media (max-width: 760px) { main { grid-template-columns: 1fr; gap: 32px; padding: 32px 20px; max-width: 520px; } .intro-details, .intro-note { display: none; } .lead { margin-bottom: 0; } .access-card .card-body { padding: 24px; } .theme-control label { display: none; } footer { flex-direction: column; gap: 6px; } }

.btn.btn-primary { color: #fff; }
.form-input:invalid:not(:focus) { border-color: var(--border); }

/* Keep dark fields readable in focus, validation and browser autofill states. */
:root[data-theme="dark"] .form-input,
:root[data-theme="dark"] .form-input:focus,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .form-select:focus {
  background-color: #1c1c24 !important;
  color: #f4f4f8 !important;
  -webkit-text-fill-color: #f4f4f8 !important;
  caret-color: #f4f4f8 !important;
  color-scheme: dark;
}
:root[data-theme="dark"] .form-input::placeholder {
  color: #b2b2c5 !important;
  -webkit-text-fill-color: #b2b2c5 !important;
  opacity: 1;
}
:root[data-theme="dark"] .form-input:-webkit-autofill,
:root[data-theme="dark"] .form-input:-webkit-autofill:hover,
:root[data-theme="dark"] .form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f4f8 !important;
  -webkit-box-shadow: 0 0 0 1000px #1c1c24 inset !important;
  caret-color: #f4f4f8 !important;
}
:root[data-theme="dark"] .form-input:autofill {
  box-shadow: 0 0 0 1000px #1c1c24 inset !important;
  -webkit-text-fill-color: #f4f4f8 !important;
}