/* Account pages share the workspace palette and explicit theme contract. */
:root, html[data-theme="light"] {
  color-scheme: light;
  --page: #f3f6fa;
  --surface: #ffffff;
  --surface-soft: #f4f7fb;
  --surface-hover: #edf3f8;
  --input: #fbfcfe;
  --text: #203449;
  --muted: #5b6e82;
  --brand: #135d70;
  --brand-hover: #104f5f;
  --brand-ink: #ffffff;
  --border: #d8e2ec;
  --input-border: #7c90a5;
  --focus: #16798c;
  --secondary: #e8eff6;
  --secondary-ink: #34536c;
  --accent: #875d12;
  --warning: #805c10;
  --warning-soft: #fff3d6;
  --danger: #ad334c;
  --success: #24704d;
  --shadow: 0 12px 40px #0b294412;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e1724;
  --surface: #172434;
  --surface-soft: #1c2d41;
  --surface-hover: #22364a;
  --input: #122031;
  --text: #e9f1f7;
  --muted: #b1c0cf;
  --brand: #73d0df;
  --brand-hover: #98e2ee;
  --brand-ink: #09232c;
  --border: #344b61;
  --input-border: #607c95;
  --focus: #83d7e7;
  --secondary: #253a50;
  --secondary-ink: #dceaf5;
  --accent: #ebc477;
  --warning: #f4d286;
  --warning-soft: #493915;
  --danger: #ffadbc;
  --success: #9ddcba;
  --shadow: 0 12px 40px #00000030;
}
:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--page);
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); }
[hidden] { display: none !important; }
/* A neutral accessible screen remains visible until identity confirms the account palette. */
#theme-loading { display: none; }
html[data-theme-ready="pending"] { background: #f3f6fa; color-scheme: light; }
html[data-theme-ready="pending"] body { visibility: hidden; }
html[data-theme-ready="pending"] #theme-loading { display: flex; visibility: visible; position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: #f3f6fa; color: #203449; }
#theme-loading p { max-width: 480px; }
#theme-loading a { color: #135d70; }
#theme-loading a:focus-visible { outline: 3px solid #16798c; outline-offset: 3px; }
main { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
aside {
  padding: 64px 12%;
  color: #ffffff;
  background: linear-gradient(150deg, #071829, #173e60);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand { font-size: 28px; letter-spacing: .12em; font-weight: 800; margin-bottom: 8px; }
.tag, .eyebrow { color: var(--accent); font-size: 12px; font-weight: 750; letter-spacing: .12em; }
.tag { color: #f0ca7e; font-size: 14px; }
h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.15; margin-top: 64px; letter-spacing: -.8px; }
aside p { line-height: 1.7; color: #e1e8f0; }
.note { margin-top: 56px; font-size: 14px; }
section { padding: 48px 24px; display: grid; place-items: center; min-width: 0; }
.panel { max-width: 480px; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 40px; box-shadow: var(--shadow); }
h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.5px; }
h3 { font-size: 18px; margin-top: 30px; }
#description { color: var(--muted); line-height: 1.6; }
label { display: block; font-size: 14px; font-weight: 600; margin-top: 20px; color: var(--muted); }
input, select, textarea { display: block; width: 100%; min-height: 46px; margin-top: 8px; border: 1px solid var(--input-border); border-radius: 8px; padding: 12px; font: inherit; font-weight: 400; color: var(--text); background: var(--input); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--surface-soft); border-color: var(--border); cursor: not-allowed; opacity: 1; }
input:read-only:not([type="checkbox"]), textarea:read-only { background: var(--surface-soft); }
button { border: 0; display: block; width: 100%; background: var(--brand); color: var(--brand-ink); border-radius: 8px; padding: 14px; font: inherit; font-weight: 650; margin-top: 24px; cursor: pointer; }
button:hover:not(:disabled) { background: var(--brand-hover); }
button:disabled { background: var(--surface-soft); color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); cursor: not-allowed; opacity: 1; }
button.secondary { background: var(--secondary); color: var(--secondary-ink); }
button.secondary:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
a { color: var(--brand); text-underline-offset: .18em; }
nav { display: flex; gap: 12px 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; }
#status { line-height: 1.6; overflow-wrap: anywhere; font-size: 14px; }
#status.error, .form-error { color: var(--danger); }
.success { color: var(--success); }
#profile { color: var(--text); overflow-wrap: anywhere; }
#secret { font-family: monospace; overflow-wrap: anywhere; background: var(--warning-soft); color: var(--warning); padding: 12px; border-radius: 8px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-control { display: flex; flex-direction: column; gap: 5px; margin: 0 0 20px; color: var(--muted); }
.theme-control-label { font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; }
.theme-select { min-height: 38px; margin: 0; padding: 7px 10px; font-size: 14px; max-width: 180px; }
.public-theme-control { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.theme-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
@media (max-width: 760px) {
  main { grid-template-columns: 1fr; }
  aside { padding: 32px; }
  aside h1 { font-size: 32px; margin-top: 28px; }
  .note { margin-top: 12px; }
  section { padding: 24px 16px; }
  .panel { padding: 28px; }
}
/* Account printouts remain light even when the account theme is dark. */
@media print {
  :root, html[data-theme] {
    color-scheme: light;
    --page: #ffffff; --surface: #ffffff; --surface-soft: #f4f7fb; --surface-hover: #edf3f8;
    --input: #ffffff; --text: #203449; --muted: #5b6e82; --brand: #135d70; --brand-hover: #104f5f;
    --brand-ink: #ffffff; --border: #d8e2ec; --input-border: #7c90a5; --focus: #16798c;
    --secondary: #e8eff6; --secondary-ink: #34536c; --accent: #875d12;
    --warning: #805c10; --warning-soft: #fff3d6; --danger: #ad334c; --success: #24704d; --shadow: none;
  }
  main { display: block; min-height: 0; }
  aside, nav, button, form, .theme-control, .theme-note { display: none !important; }
  section { display: block; padding: 0; }
  .panel { border: 0; border-radius: 0; max-width: none; padding: 0; box-shadow: none; }
  html[data-theme-ready="pending"] body { visibility: visible; }
  #theme-loading { display: none !important; }
}