:root { color-scheme: light dark; --fg: #1d1d1f; --bg: #f6f6f7; --card: #fff; --accent: #2f5bea; --muted: #5f6368; }
@media (prefers-color-scheme: dark) { :root { --fg: #ececf1; --bg: #121214; --card: #1c1c20; --accent: #7b9cff; --muted: #a0a3ab; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 16px; }
.card { width: 100%; max-width: 420px; background: var(--card); border-radius: 12px; padding: 28px; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
p { color: var(--muted); }
button { font: inherit; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; }
button[value="deny"] { background: transparent; color: var(--accent); }
button:disabled { opacity: .6; cursor: progress; }
.scopes { padding-left: 20px; }
code { font-size: .9em; }
#status { min-height: 1.5em; }
h2 { font-size: 1.05rem; margin: 20px 0 8px; }
label { display: block; margin: 12px 0 4px; }
input, textarea { font: inherit; width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--muted); background: var(--card); color: var(--fg); }
ul, ol { padding-left: 20px; }
li { margin: 6px 0; }
li button { margin-left: 8px; padding: 4px 10px; }
.note { font-size: .9em; }
.code { font: 600 1.8rem/1.2 ui-monospace, monospace; letter-spacing: .2em; color: var(--fg); }

/* ============================================================
   Split pages (sign in, sign up, recover, recovery, devices, guardian): the same design as the Vilko web's auth
   screens (src/styles/auth.css + auth-stage.css): the form on the left under a top bar with the footer, the dark
   panel with the brand and the steps on the right. Opt in with `<body class="split">`; the consent page and the
   unlock page keep the plain card above. Static CSS only (CSP: style-src 'self', no inline styles), no images and
   no fonts: the panel is gradients and text, the type is the system's.
   ============================================================ */
body.split {
  --sp-bg: #F6F3EC; --sp-elev: #FBF9F3; --sp-sunken: #EFECE3; --sp-fg: #0B0B0E; --sp-muted: #5B5B68; --sp-subtle: #6E6E79;
  --sp-inverse: #FBF9F3; --sp-border: #D8D6CF; --sp-strong: #B5B5BC; --sp-subtle-line: #EDEAE1; --sp-danger: oklch(56% .19 25);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  display: block; place-items: normal; padding: 0; min-height: 0; background: var(--sp-bg); color: var(--sp-fg);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) {
  body.split {
    --sp-bg: #0D0D10; --sp-elev: #141418; --sp-sunken: #09090B; --sp-fg: #ECEAE3; --sp-muted: #A8A8B0; --sp-subtle: #8A8A93;
    --sp-inverse: #0B0B0E; --sp-border: #242428; --sp-strong: #34343A; --sp-subtle-line: #1C1C20; --sp-danger: oklch(70% .17 25);
  }
}
body.split [hidden] { display: none !important; }
.auth-shell {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  background: var(--sp-bg); color: var(--sp-fg); font-size: 15px;
}
.auth-top, .auth-stage, .auth-bottom { grid-column: 1; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 28px; }
.auth-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--sp-fg); }
.auth-brand svg { display: block; }
.auth-brand svg rect { fill: var(--sp-fg); }
.auth-brand svg path { fill: var(--sp-bg); }
.auth-stage { display: flex; align-items: center; justify-content: center; padding: 16px 28px 40px; min-width: 0; }
.auth-card { width: 100%; max-width: 440px; min-width: 0; background: none; border-radius: 0; box-shadow: none; padding: 0; }
.auth-card[data-wide] { max-width: 520px; }
.auth-bottom { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; padding: 18px 16px; font-size: 12px; color: var(--sp-subtle); }
.auth-bottom span { display: inline-flex; align-items: center; gap: 6px; }
.auth-bottom svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Split view: the window is as tall as the screen and the FORM half scrolls by itself when its content is taller, so the
   panel stays where it is and the top bar and footer stay in view (the card centres while it fits and is never clipped). */
@media (min-width: 901px) {
  .auth-shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .auth-stage { min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; }
  .auth-stage > .auth-card { margin-block: auto; }
}

/* ---------- Type and fields (scoped to the split pages) ---------- */
.auth-shell h1 { font-size: 34px; line-height: 1.12; letter-spacing: -.025em; font-weight: 700; margin: 0 0 10px; text-align: center; text-wrap: balance; }
.auth-shell h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 26px 0 8px; }
.auth-shell p { color: var(--sp-muted); margin: 0 0 14px; line-height: 1.5; text-wrap: pretty; }
.auth-card > h1 + p, .auth-card > h1 + section > p:first-child { font-size: 15px; }
.auth-card > h1 + p { text-align: center; font-size: 16px; margin-bottom: 26px; }
.auth-shell a { color: var(--sp-fg); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.auth-shell a:hover { color: var(--sp-muted); }
.auth-shell label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--sp-fg); }
.auth-shell label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.auth-shell input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--sp-fg); flex: none; }
.auth-shell input:not([type="checkbox"]), .auth-shell textarea {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--sp-strong); border-radius: 12px;
  background: var(--sp-elev); color: var(--sp-fg); font: inherit; font-size: 15px;
}
.auth-shell textarea { height: auto; min-height: 44px; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.auth-shell input:not([type="checkbox"]):focus, .auth-shell textarea:focus { outline: none; border-color: var(--sp-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sp-fg) 10%, transparent); }
.auth-shell input::placeholder, .auth-shell textarea::placeholder { color: var(--sp-subtle); }
.auth-shell button {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 12px 0 0; padding: 8px 18px;
  border: 1px solid var(--sp-fg); border-radius: 12px; background: var(--sp-fg); color: var(--sp-inverse);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer;
}
.auth-shell button:hover:not(:disabled) { opacity: .88; }
.auth-shell button[value="deny"] { background: var(--sp-elev); color: var(--sp-fg); border-color: var(--sp-strong); }
.auth-shell button[value="deny"]:hover:not(:disabled) { opacity: 1; border-color: var(--sp-fg); }
.auth-shell button:disabled { opacity: .55; cursor: progress; }
.auth-shell button:focus-visible, .auth-shell a:focus-visible { outline: 2px solid var(--sp-fg); outline-offset: 2px; }
.auth-shell ul, .auth-shell ol { padding-left: 20px; margin: 8px 0 14px; }
.auth-shell li { margin: 8px 0; color: var(--sp-fg); overflow-wrap: anywhere; }
.auth-shell li button { display: inline-flex; width: auto; min-height: 36px; margin: 0 0 0 8px; padding: 4px 12px; font-size: 14px; }
.auth-shell ul#codes, .auth-shell ul#passkeys, .auth-shell ul#requests, .auth-shell ul#invitations, .auth-shell ul#staged,
.auth-shell ul#guardians, .auth-shell ul#statements { list-style: none; padding: 0; }
.auth-shell ul > li { padding: 12px 14px; border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-elev); margin: 8px 0; }
.auth-shell .note { font-size: 13px; color: var(--sp-subtle); }
.auth-shell .code, .auth-shell strong[data-testid="recover-code-value"] { font: 600 1.8rem/1.2 var(--font-mono); letter-spacing: .2em; color: var(--sp-fg); }
.auth-shell code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.auth-shell #status { min-height: 1.5em; margin-top: 16px; text-align: center; font-size: 14px; }
.auth-shell #kit-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 14px; list-style-position: inside;
  border: 1px solid var(--sp-border); border-radius: 12px; background: var(--sp-elev); }
.auth-shell #kit-words li { margin: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: var(--sp-sunken); font: 13px var(--font-mono); }
.auth-shell #signin, .auth-shell #create, .auth-shell p#signin { text-align: center; font-size: 14px; margin-top: 24px; }
.auth-shell p#create { text-align: center; font-size: 14px; margin-top: 24px; }
.auth-shell #identity-navigation { margin: 0 0 22px; font-size: 13px; color: var(--sp-subtle); text-align: center; }
.auth-shell #identity-navigation a { font-weight: 500; }
.auth-shell #identity-navigation button { display: inline; width: auto; min-height: 0; margin: 0 0 0 4px; padding: 0; border: 0; background: none; color: var(--sp-muted);
  font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.auth-shell #identity-navigation [role="status"] { margin-left: 8px; color: var(--sp-danger); }

/* ---------- The dark panel: the brand and the steps ---------- */
.auth-aside {
  grid-column: 2; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; padding: 32px 48px 0; color: #f3f1ec; pointer-events: none; user-select: none;
  background: linear-gradient(to top, oklch(68% .13 235) 0%, oklch(58% .12 245 / .7) 22%, oklch(45% .09 250 / .3) 45%, transparent 68%), #0e0e0d;
}
.auth-aside::before { content: attr(data-label); flex: none; font: 12px/16px var(--font-mono, ui-monospace, monospace); letter-spacing: .08em; color: #b5b2aa; }
.auth-aside .st-copy { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin-top: clamp(32px, 9vh, 96px); }
.auth-aside .st-tag { margin: 0; font: 400 clamp(28px, 2.8vw, 38px)/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.015em; color: #f3f1ec; text-wrap: balance; }
.auth-aside .st-tag em { font-style: italic; font-weight: 300; color: #b5b2aa; }
.auth-aside .st-sub { margin: 0; max-width: 48ch; font-size: 16px; line-height: 24px; color: #b5b2aa; }
.auth-aside .st-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: st; }
.auth-aside .st-steps li {
  counter-increment: st; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: center; margin: 0; padding: 12px 14px;
  color: #e7e4dc; font-size: 15px; line-height: 1.35; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
}
.auth-aside .st-steps li::before {
  content: counter(st); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); color: oklch(86% .09 228); font: 600 13px var(--font-mono, ui-monospace, monospace);
}

/* ---------- Under 900px: the form first, the panel one slim strip under the top bar ---------- */
@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .auth-shell h1 { font-size: 28px; }
  .auth-stage { padding: 24px 20px 32px; align-items: flex-start; }
  .auth-aside {
    grid-column: 1; grid-row: 2; position: static; display: block; height: auto; margin: 0 16px; padding: 16px 18px; border-radius: 14px;
    background: linear-gradient(to top, oklch(58% .12 245 / .35) 0%, transparent 60%), #0e0e0d;
  }
  .auth-aside > .st-copy { display: none; }
  .auth-aside::before, .auth-aside::after { display: inline; font: 21px/1.2 Georgia, "Times New Roman", serif; letter-spacing: -.02em; }
  .auth-aside::before { content: attr(data-tag) " "; color: #f3f1ec; }
  .auth-aside::after { content: attr(data-em); font-style: italic; font-weight: 300; color: #b5b2aa; }
}
@media (max-width: 520px) {
  .auth-shell h1 { font-size: 26px; }
  .auth-top { padding: 16px; }
  .auth-stage { padding: 20px 16px 32px; }
  .auth-shell #kit-words { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-shell .code, .auth-shell strong[data-testid="recover-code-value"] { font-size: 1.5rem; letter-spacing: .12em; }
}