:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", "Noto Sans", system-ui, sans-serif;
  --sds-bg: #141414;
  --sds-panel: #181818;
  --sds-panel-soft: #202020;
  --sds-border: #2a2a2a;
  --sds-border-strong: #3a3a3a;
  --sds-text: #e7e7e7;
  --sds-text-soft: #9b9b9b;
  --sds-text-strong: #f5f5f5;
  --sds-accent: #5b7cfa;
  --sds-button: #425cc5;
  --sds-accent-hover: #6c89ff;
  --sds-danger: #df6565;
  --sds-danger-soft: rgba(223, 101, 101, .13);
  --sds-focus-border: #7794ff;
  --sds-focus-ring: 0 0 0 2px rgba(91, 124, 250, .3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-width: 20rem; min-height: 100%; }
body { margin: 0; background: var(--sds-bg); color: var(--sds-text); line-height: 1.4; }
button, input { font: inherit; color: inherit; }

.auth-shell { min-height: 100vh; background: var(--sds-panel); }
.product-header { display: flex; min-height: 4rem; align-items: center; border-bottom: 1px solid var(--sds-border); padding: .6rem clamp(1.25rem, 3vw, 2.75rem); }
.brand-lockup { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; }
.brand-logo { width: auto; height: 2.375rem; filter: invert(1); }
.brand-copy { display: grid; min-width: 0; gap: .05rem; }
.brand-kicker { color: var(--sds-text-soft); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-copy p { margin: 0; color: var(--sds-text); font-size: clamp(.98rem, 2vw, 1.1rem); line-height: 1.2; }

.auth-main { display: grid; justify-items: center; padding: 1.5rem 1.25rem 2.5rem; }
.auth-form { display: grid; width: 100%; max-width: 31.25rem; gap: 1rem; }
.panel-heading { display: grid; gap: .3rem; }
.destination { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .15rem; color: var(--sds-text-soft); font-size: .74rem; }
.destination strong { color: var(--sds-text); font-weight: 600; }
h1, h2 { margin: 0; color: var(--sds-text-strong); letter-spacing: 0; }
h1 { font-size: clamp(1.45rem, 3.5vw, 1.7rem); line-height: 1.15; }
h2 { margin-top: .25rem; font-size: 1.05rem; line-height: 1.3; }
.description, .help, #enrollment p, .signed-in-name { color: var(--sds-text-soft); }
.description { max-width: 29rem; margin: 0; font-size: .88rem; line-height: 1.45; }

form { display: grid; gap: .68rem; }
.field { display: grid; gap: .35rem; }
label { color: var(--sds-text); font-size: .82rem; font-weight: 500; }
input { width: 100%; min-height: 2.75rem; border: 1px solid var(--sds-border); border-radius: .4375rem; padding: .55rem .75rem; background: #1c1c1c; color: var(--sds-text-strong); font-size: .92rem; }
input:hover { border-color: var(--sds-border-strong); }
input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: none; border-color: var(--sds-focus-border); box-shadow: var(--sds-focus-ring); }

button, .primary-link { display: inline-flex; width: 100%; min-height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--sds-button); border-radius: .4375rem; padding: .55rem .85rem; background: var(--sds-button); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
button:hover, .primary-link:hover { border-color: #4a65d4; background: #4a65d4; }
button:active, .primary-link:active { background: #384fae; }
button:disabled { cursor: wait; opacity: .58; }
.secondary { margin-top: .55rem; border-color: var(--sds-border-strong); background: transparent; color: var(--sds-text); }
.secondary:hover { border-color: var(--sds-border-strong); background: var(--sds-panel-soft); }

.status { border: 1px solid rgba(223, 101, 101, .35); border-radius: .5rem; padding: .7rem .75rem; background: var(--sds-danger-soft); color: #f1a0a0; font-size: .86rem; }
.loading { display: inline-flex; align-items: center; gap: .65rem; color: var(--sds-text-soft); font-size: .88rem; }
.spinner { width: 1rem; height: 1rem; border: 2px solid rgba(155, 155, 155, .35); border-top-color: var(--sds-accent); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#enrollment { display: grid; gap: .65rem; }
#enrollment p, .help { margin: 0; font-size: .8rem; line-height: 1.45; }
.qr { display: block; width: min(11rem, 100%); height: auto; margin: .25rem auto; border: .6rem solid #fff; border-radius: .5rem; background: #fff; }
details { margin-bottom: .15rem; font-size: .86rem; }
summary { width: fit-content; min-height: 2.75rem; align-content: center; color: var(--sds-accent); font-weight: 600; cursor: pointer; }
.secret { display: block; overflow-wrap: anywhere; border: 1px solid var(--sds-border); border-radius: .4375rem; padding: .65rem; background: var(--sds-panel-soft); color: var(--sds-text-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; letter-spacing: .06em; }
.primary-link { margin-top: .3rem; }
.signed-in-name { margin: .35rem 0 .65rem; font-size: .88rem; }

.trust-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; border-top: 1px solid var(--sds-border); padding-top: .9rem; color: var(--sds-text-soft); }
.trust-note p { margin: 0; font-size: .78rem; line-height: 1.45; }

@media (max-width: 48.75rem) {
  .product-header { padding-inline: 1rem; }
  .brand-logo { height: 2.25rem; }
  .auth-main { padding: 1.5rem 1rem 2.25rem; }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --sds-bg: #f8f8f8;
    --sds-panel: #fff;
    --sds-panel-soft: #f4f4f4;
    --sds-border: #e3e3e3;
    --sds-border-strong: #c8c8c8;
    --sds-text: #333;
    --sds-text-soft: #707070;
    --sds-text-strong: #1f1f1f;
    --sds-accent: #3f63dd;
    --sds-accent-hover: #3155cd;
    --sds-focus-border: #3f63dd;
    --sds-focus-ring: 0 0 0 2px rgba(63, 99, 221, .22);
    --sds-danger-soft: rgba(220, 38, 38, .08);
  }
  .brand-logo { filter: none; }
  input { background: #fff; }
  .status { border-color: rgba(220, 38, 38, .25); color: #b42318; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .brand-logo { filter: none; }
  button, .primary-link, input, .status { border: 1px solid ButtonText; }
  .spinner { border-color: GrayText; border-top-color: Highlight; }
}

.remember-label { display: flex; align-items: center; gap: 10px; }
.remember-label input[type=checkbox] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--sds-accent); }
#device-name:disabled { opacity: .5; }