/* ═══════════════════════════════════════════════════════════════════════════
   auth.css — the server auth cluster (templates/auth/*), Rizen v4++.
   Approved target: docs/mockups/ugly-fix-auth-signin.html (Ugliest-10 #1).

   This is the "one tiny static auth.css" that Phase-2 comment in the old
   auth/_base.html promised: it replaces the LAST live cdn.tailwindcss.com
   runtime on the site. Self-contained, CSP-safe, no external fetches.

   TOKENS — the locked Rizen v4+ values, BRIDGED onto the shared --theme-*
   contract (the data_page.html pattern): every surface/ink/accent name reads
   var(--theme-*, <v4 fallback>) so a color theme repaints these pages
   wherever the theme vars are injected, while the standalone (pre-login)
   render carries the canonical Rizen dark/light look.

   Rule preserved from the mockup: THE DATA GLOWS; THE CHROME NEVER DOES.
   On an auth page the data is the user's input + the brand mark — inputs
   glow on focus, the chrome stays quiet.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:dark;
  --vividness:1.15;
  /* surfaces + ink (dark canonical) */
  --bg-0:var(--theme-bg-0,#07080b); --bg-1:var(--theme-bg-1,#0c0e14);
  --bg-2:var(--theme-bg-2,#12151f); --bg-3:var(--theme-bg-3,#151925);
  --bg-4:var(--theme-bg-4,#1b2130);
  --line:var(--theme-line,rgba(255,255,255,.10));
  --line-strong:var(--theme-line-strong,rgba(255,255,255,.15));
  --t0:var(--theme-text-0,#e6ebf5); --t1:var(--theme-text-1,#c3cadb);
  --t2:var(--theme-text-2,#8b93a7); --t3:var(--theme-text-3,#565d6e);
  /* accent family — v4 oklch vividness curve as the fallback */
  --accent:var(--theme-accent,oklch(from #33c6e6 l calc(c * var(--vividness)) h));
  --gold:var(--theme-gold,oklch(from #e0b23a l calc(c * var(--vividness)) h));
  --pos:var(--theme-pos,oklch(from #37c46a l calc(c * var(--vividness)) h));
  --neg:var(--theme-neg,oklch(from #e8504e l calc(c * var(--vividness)) h));
  --warn:var(--theme-warn,oklch(from #e0a93f l calc(c * var(--vividness)) h));
  /* derived tints via color-mix so a theme override re-tints the whole page */
  --accent-soft:color-mix(in oklab,var(--accent) 14%,transparent);
  --accent-line:color-mix(in oklab,var(--accent) 42%,transparent);
  --accent-glow:color-mix(in oklab,var(--accent) 30%,transparent);
  --gold-soft:color-mix(in oklab,var(--gold) 30%,transparent);
  --pos-soft:color-mix(in oklab,var(--pos) 14%,transparent);
  --neg-soft:color-mix(in oklab,var(--neg) 14%,transparent);
  --warn-soft:color-mix(in oklab,var(--warn) 14%,transparent);
  --overlay:rgba(255,255,255,.06); --ring:#71717a;
  --action-primary:color-mix(in oklab,var(--accent) 20%,var(--bg-4));
  --action-primary-fg:var(--t0);
  --glow-strength:.65;
  --glow-led:0 0 calc(9px * var(--glow-strength));
  --glow-mark:0 0 calc(8px * var(--glow-strength));
  --glow-soft:0 0 calc(5px * var(--glow-strength));
  --motion-fast:120ms; --motion-slide:220ms; --ease-out:cubic-bezier(.2,.9,.25,1);
  --r-card:3px; --r-md:2px; --r-sm:2px; --r-chip:1px; --r-toggle:2px;
  --font:"Geist","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --focus:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent);
  --hi:inset 0 1px 0 rgba(255,255,255,.03);
  --pop:0 6px 18px rgba(0,0,0,.55);
  --tr:var(--motion-fast) var(--ease-out);
  --frame-skin:linear-gradient(160deg,rgba(224,178,58,.42),rgba(224,178,58,.12) 30%,rgba(230,235,245,.10) 62%,rgba(224,178,58,.30));
  --frame-fill:linear-gradient(180deg,var(--bg-1) 0%,color-mix(in oklab,var(--bg-1) 55%,var(--bg-0)) 100%);
  --card-shadow:drop-shadow(0 14px 22px rgba(0,0,0,.4));
}
@media (prefers-color-scheme: light){
  :root{ color-scheme:light;
    --bg-0:var(--theme-bg-0,#f4f5f8); --bg-1:var(--theme-bg-1,#ffffff);
    --bg-2:var(--theme-bg-2,#eef0f4); --bg-3:var(--theme-bg-3,#e7eaf0);
    --bg-4:var(--theme-bg-4,#dde1ea);
    --line:var(--theme-line,rgba(0,0,0,.10));
    --line-strong:var(--theme-line-strong,rgba(0,0,0,.16));
    --t0:var(--theme-text-0,#111521); --t1:var(--theme-text-1,#33394a);
    --t2:var(--theme-text-2,#5c6474); --t3:var(--theme-text-3,#8b93a7);
    --overlay:rgba(0,0,0,.06);
    --hi:inset 0 1px 0 rgba(255,255,255,.6); --glow-strength:.45;
    --pop:0 6px 18px rgba(20,30,55,.16);
    --frame-skin:linear-gradient(160deg,rgba(154,116,17,.55),rgba(154,116,17,.18) 30%,rgba(17,21,33,.16) 62%,rgba(154,116,17,.40));
    --frame-fill:linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%);
    --card-shadow:drop-shadow(0 14px 22px rgba(20,30,55,.16)); }
}
/* explicit theme override wins over the OS preference in both directions */
:root[data-theme="light"]{ color-scheme:light;
  --bg-0:var(--theme-bg-0,#f4f5f8); --bg-1:var(--theme-bg-1,#ffffff);
  --bg-2:var(--theme-bg-2,#eef0f4); --bg-3:var(--theme-bg-3,#e7eaf0);
  --bg-4:var(--theme-bg-4,#dde1ea);
  --line:var(--theme-line,rgba(0,0,0,.10));
  --line-strong:var(--theme-line-strong,rgba(0,0,0,.16));
  --t0:var(--theme-text-0,#111521); --t1:var(--theme-text-1,#33394a);
  --t2:var(--theme-text-2,#5c6474); --t3:var(--theme-text-3,#8b93a7);
  --overlay:rgba(0,0,0,.06);
  --hi:inset 0 1px 0 rgba(255,255,255,.6); --glow-strength:.45;
  --pop:0 6px 18px rgba(20,30,55,.16);
  --frame-skin:linear-gradient(160deg,rgba(154,116,17,.55),rgba(154,116,17,.18) 30%,rgba(17,21,33,.16) 62%,rgba(154,116,17,.40));
  --frame-fill:linear-gradient(180deg,#ffffff 0%,#f7f8fb 100%);
  --card-shadow:drop-shadow(0 14px 22px rgba(20,30,55,.16)); }
:root[data-theme="dark"]{ color-scheme:dark;
  --bg-0:var(--theme-bg-0,#07080b); --bg-1:var(--theme-bg-1,#0c0e14);
  --bg-2:var(--theme-bg-2,#12151f); --bg-3:var(--theme-bg-3,#151925);
  --bg-4:var(--theme-bg-4,#1b2130);
  --line:var(--theme-line,rgba(255,255,255,.10));
  --line-strong:var(--theme-line-strong,rgba(255,255,255,.15));
  --t0:var(--theme-text-0,#e6ebf5); --t1:var(--theme-text-1,#c3cadb);
  --t2:var(--theme-text-2,#8b93a7); --t3:var(--theme-text-3,#565d6e);
  --overlay:rgba(255,255,255,.06);
  --hi:inset 0 1px 0 rgba(255,255,255,.03); --glow-strength:.65;
  --pop:0 6px 18px rgba(0,0,0,.55);
  --frame-skin:linear-gradient(160deg,rgba(224,178,58,.42),rgba(224,178,58,.12) 30%,rgba(230,235,245,.10) 62%,rgba(224,178,58,.30));
  --frame-fill:linear-gradient(180deg,var(--bg-1) 0%,color-mix(in oklab,var(--bg-1) 55%,var(--bg-0)) 100%);
  --card-shadow:drop-shadow(0 14px 22px rgba(0,0,0,.4)); }

/* ── ground ── */
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
[hidden]{display:none!important}
body{min-height:100vh;
  background:radial-gradient(1200px 560px at 50% -10%,var(--bg-1) 0%,var(--bg-0) 60%) fixed,var(--bg-0);
  color:var(--t0);font:13px/1.42 var(--font);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;display:flex;flex-direction:column;
  padding:34px clamp(12px,3vw,40px) 40px;position:relative}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cap{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
::selection{background:var(--accent-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--t3);border-radius:999px;border:2px solid transparent;background-clip:padding-box}
button{font:inherit;color:inherit}
:is(button,[tabindex],input,select,textarea,a):focus-visible{outline:none;box-shadow:var(--focus)}

/* the horizon — a faint gamma-level line motif grounds the card in the
   product's world without shouting. Chrome, so it must NOT glow. */
.horizon{position:fixed;left:0;right:0;top:66vh;height:1px;background:var(--line);pointer-events:none;z-index:0}
.horizon::before{content:"";position:absolute;left:12%;right:56%;top:0;height:1px;
  background:color-mix(in oklab,var(--gold) 45%,transparent)}
.hlab{position:fixed;left:12%;top:calc(66vh + 5px);font:700 7px var(--mono);letter-spacing:.14em;
  color:color-mix(in oklab,var(--gold) 70%,var(--t3));text-transform:uppercase;pointer-events:none;z-index:0}

/* status chip — fixed top-right of the stage */
.statuschip{position:fixed;top:12px;right:14px;z-index:2}
.stchip{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:var(--r-chip);
  font:700 7.5px var(--font);letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--line);
  white-space:nowrap;color:var(--t3);background:var(--overlay)}
.stchip i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.stchip.live{color:var(--pos);background:var(--pos-soft);border-color:color-mix(in oklab,var(--pos) 35%,transparent)}
.stchip.live i{box-shadow:var(--glow-led) var(--pos)}

/* ── the auth card ── */
.authwrap{position:relative;z-index:1;margin:auto;width:100%;
  display:flex;flex-direction:column;align-items:center}
.authcard{width:min(var(--card-w,380px),100%)}
.fw2{filter:var(--card-shadow)}

/* the notched frame — v4 signature: 14px chamfer TL+BR, gold hairline skin */
.frame{position:relative;background:var(--frame-skin);min-width:0;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.frame::before{content:"";position:absolute;inset:1px;background:var(--frame-fill);
  clip-path:polygon(13.4px 0,100% 0,100% calc(100% - 13.4px),calc(100% - 13.4px) 100%,0 100%,0 13.4px)}
.fr-in{position:relative;margin:1px;min-width:0;display:flex;flex-direction:column;height:calc(100% - 2px);
  clip-path:polygon(13.4px 0,100% 0,100% calc(100% - 13.4px),calc(100% - 13.4px) 100%,0 100%,0 13.4px)}
.fr-h{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--bg-2) 46%,transparent);min-height:22px;min-width:0}
.fr-h::after{content:"";position:absolute;left:12px;bottom:-1px;width:34px;height:2px;
  background:var(--sp,var(--accent));opacity:.9;transition:width var(--motion-slide) var(--ease-out)}
.frame:hover .fr-h::after{width:54px}
.fr-h .fx{font:700 9px var(--mono);color:var(--gold);letter-spacing:.08em;flex:none}
.fr-h h3{font:800 10px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--t0);
  white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fr-h .lead{flex:1 1 12px;min-width:12px;border-bottom:1px dotted color-mix(in oklab,var(--gold) 34%,transparent);transform:translateY(-3px)}
.fr-h .code{font:600 8.5px var(--mono);color:var(--t3);letter-spacing:.06em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.fr-b{padding:12px 14px 13px;min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:11px}
.fr-b form{display:flex;flex-direction:column;gap:11px;min-width:0}

/* brand row — the wordmark IS the greeting (no emoji, no favicon-as-logo) */
.brandrow{display:flex;align-items:center;gap:9px;padding:2px 0 0}
.brandrow .sig{width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid var(--accent-line);
  border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent);font:800 14px var(--mono);
  text-shadow:var(--glow-soft) var(--accent);text-decoration:none}
.brandrow .bw{display:flex;flex-direction:column;gap:1px;min-width:0}
.brandrow .bn{font:800 13px var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--t0)}
.brandrow .bt{font:600 8.5px var(--mono);color:var(--t3);letter-spacing:.05em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── SgField grammar ── */
.f-group{display:flex;flex-direction:column;gap:5px;min-width:0}
.f-label{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--t3);
  display:flex;gap:6px;align-items:center}
.f-label .aux{margin-left:auto;font-weight:600;letter-spacing:.04em;text-transform:none;font-size:9px;color:var(--t3)}
.f-label .aux a{color:var(--accent);text-decoration:none}
.f-label .aux a:hover{text-decoration:underline}
.f-help{font-size:10px;color:var(--t3)}
.f-err{font-size:10px;color:var(--neg);display:flex;gap:5px;align-items:center}
.input{background:var(--bg-0);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:7px 10px;
  color:var(--t0);font:600 11.5px var(--font);min-width:0;width:100%;
  transition:border-color var(--tr),box-shadow var(--tr),background-color var(--tr)}
.input::placeholder{color:var(--t3);font-weight:500}
.input:hover{border-color:color-mix(in oklab,var(--line-strong) 60%,var(--t3))}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.input.err{border-color:var(--neg);box-shadow:0 0 0 3px var(--neg-soft)}
.input.mono{font-family:var(--mono)}
.iwrap{position:relative;display:flex;align-items:center;min-width:0}
.iwrap .fstat{position:absolute;right:9px;display:inline-flex;align-items:center;gap:6px}
.fstat .okk{color:var(--pos);text-shadow:var(--glow-soft) var(--pos);font-size:11px;font-style:normal}
.fstat .reveal{background:none;border:0;cursor:pointer;color:var(--t3);font:700 8px var(--font);
  letter-spacing:.08em;text-transform:uppercase;padding:2px 3px}
.fstat .reveal:hover{color:var(--accent)}
.iwrap.hasstat .input{padding-right:58px}
.capchip{display:inline-flex;align-items:center;gap:4px;height:15px;padding:0 6px;border-radius:var(--r-chip);
  font:700 7px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);
  border:1px solid color-mix(in oklab,var(--warn) 40%,transparent);background:var(--warn-soft);white-space:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}

/* clickwrap / checkbox — a REAL <input type=checkbox> drives the styled box,
   so `required`, form posts and keyboard focus all keep working (never a
   bare native box, never a fake one either) */
.ck{position:relative;display:inline-flex;align-items:flex-start;gap:8px;font:600 10.5px var(--font);
  color:var(--t1);cursor:pointer;user-select:none;min-width:0;line-height:1.45}
.ck input{position:absolute;left:0;top:1px;width:15px;height:15px;margin:0;opacity:0;cursor:pointer}
.ck .box{width:15px;height:15px;flex:none;border:1px solid var(--line-strong);border-radius:var(--r-toggle);
  background:var(--bg-0);display:inline-flex;align-items:center;justify-content:center;color:transparent;
  font-size:10px;margin-top:1px;transition:background-color var(--tr),border-color var(--tr),box-shadow var(--tr)}
.ck:hover .box{border-color:var(--accent-line)}
.ck input:checked ~ .box{background:var(--action-primary);border-color:var(--accent-line);color:var(--accent);
  box-shadow:var(--glow-soft) var(--accent)}
.ck input:focus-visible ~ .box{box-shadow:var(--focus)}
.ck .ckl{min-width:0}
.ck .ckl a{color:var(--accent);text-decoration:none}
.ck .ckl a:hover{text-decoration:underline}

/* ── buttons ── */
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 13px;
  border:1px solid var(--line-strong);border-radius:var(--r-toggle);background:transparent;color:var(--t1);
  font:700 9.5px var(--font);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:color var(--tr),border-color var(--tr),background-color var(--tr),box-shadow var(--tr)}
.btn2:hover{color:var(--t0);border-color:color-mix(in oklab,var(--line-strong) 55%,var(--t3));background:var(--overlay)}
.btn2.pri{background:var(--action-primary);border-color:var(--accent-line);color:var(--action-primary-fg)}
.btn2.pri:hover{box-shadow:var(--glow-mark) var(--accent)}
.btn2.neg{border-color:color-mix(in oklab,var(--neg) 40%,transparent);color:var(--neg)}
.btn2.neg:hover{background:var(--neg-soft);color:var(--neg)}
.btn2.block{width:100%;height:30px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)}
.btn2 .kbd2{font:700 8px var(--mono);color:color-mix(in oklab,currentColor 70%,transparent);
  border:1px solid color-mix(in oklab,currentColor 32%,transparent);border-radius:2px;padding:0 4px;line-height:1.5}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font:700 10.5px var(--font);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.linkbtn.danger{color:var(--neg)}

/* ── divider + oauth ── */
.orsep{display:flex;align-items:center;gap:9px;font:700 7.5px var(--font);letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3)}
.orsep::before,.orsep::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.oauthgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.oauthgrid.one{grid-template-columns:1fr}
.oauth{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:27px;
  border:1px solid var(--line-strong);border-radius:var(--r-toggle);background:var(--bg-0);color:var(--t1);
  font:700 9px var(--font);letter-spacing:.05em;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:border-color var(--tr),background-color var(--tr),color var(--tr)}
.oauth:hover{background:var(--overlay);color:var(--t0);border-color:color-mix(in oklab,var(--line-strong) 55%,var(--t3))}
.oauth svg{width:12px;height:12px;flex:none}
.smallprint{text-align:center;font-size:9.5px;line-height:1.5;color:var(--t3)}
.smallprint a{color:var(--accent);text-decoration:none}
.smallprint a:hover{text-decoration:underline}

/* card footer */
.cardfoot{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:11px;
  border-top:1px solid var(--line);font-size:10.5px;color:var(--t2);flex-wrap:wrap}
.cardfoot a{color:var(--accent);font-weight:700;text-decoration:none}
.cardfoot a:hover{text-decoration:underline}

/* readline banners — the gold-bar grammar tuned to neg / pos */
.errline{display:flex;gap:9px;align-items:baseline;padding:8px 11px;background:var(--neg-soft);
  border-left:2px solid var(--neg);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:10.5px;line-height:1.5;color:var(--t1)}
.errline .mk{font:700 8.5px var(--mono);color:var(--neg);letter-spacing:.12em;flex:none;transform:translateY(-1px)}
.errline b{color:var(--t0)}
.okline{display:flex;gap:9px;align-items:baseline;padding:8px 11px;background:var(--pos-soft);
  border-left:2px solid var(--pos);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:10.5px;line-height:1.5;color:var(--t1)}
.okline .mk{font:700 8.5px var(--mono);color:var(--pos);letter-spacing:.12em;flex:none;transform:translateY(-1px)}
.okline b{color:var(--t0)}

/* password strength meter — the DATA of a signup form; it may glow */
.pwm{display:flex;flex-direction:column;gap:4px}
.pwm .track{display:flex;gap:3px;height:3px}
.pwm .track i{flex:1 1 0;border-radius:1px;background:var(--overlay)}
.pwm .track i.on{background:var(--pw,var(--accent));box-shadow:var(--glow-soft) var(--pw,var(--accent))}
.pwm .plab{display:flex;justify-content:space-between;font:600 8.5px var(--mono);color:var(--t3)}
.pwm .plab b{color:var(--pw,var(--accent));font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:8px}

/* 2FA six-cell entry — progressive enhancement over the REAL <input name=code>.
   JS overlays the (transparent) input on the cells and mirrors its value; with
   JS off the input renders as a normal field and the form still posts. */
.otpwrap{position:relative;min-width:0}
.otpwrap.otp-live .otp-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:2;cursor:text}
.otp{display:flex;gap:7px;justify-content:center}
.otp .cell{width:38px;height:44px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--bg-0);
  display:grid;place-items:center;font:700 18px var(--mono);color:var(--t0);
  transition:border-color var(--tr),box-shadow var(--tr)}
.otp .cell.fill{border-color:color-mix(in oklab,var(--accent) 45%,transparent)}
.otp .cell.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.otp .cell.cur .caret{width:1.5px;height:18px;background:var(--accent);box-shadow:var(--glow-soft) var(--accent)}
.otp .gap{width:7px;display:grid;place-items:center;color:var(--t3);font:700 12px var(--mono)}
.otpmeta{display:flex;align-items:center;justify-content:center;gap:10px;font:600 9px var(--mono);color:var(--t3);flex-wrap:wrap}
.otpmeta b{color:var(--t1)}

/* stage footer — legal + © under the card */
.stagefoot{margin-top:14px;text-align:center;font:600 8.5px var(--mono);color:var(--t3);
  display:flex;flex-direction:column;gap:4px;align-items:center}
.stagefoot a{color:var(--t2);text-decoration:none}
.stagefoot a:hover{color:var(--accent)}

/* ── /me — the wide account card ── */
.sec{border:1px solid var(--line);border-radius:var(--r-card);
  background:color-mix(in oklab,var(--bg-2) 46%,transparent);
  padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.sec-h{display:flex;align-items:center;gap:8px}
.sec-h::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
.sec.danger{border-color:color-mix(in oklab,var(--neg) 35%,transparent);
  background:color-mix(in oklab,var(--neg) 6%,transparent)}
.sec.danger .sec-h .cap{color:var(--neg)}
.me-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.me-head .who{flex:1 1 auto;min-width:0}
.me-head h2{font:800 16px var(--font);letter-spacing:-.01em;color:var(--t0)}
.me-head .sub{font-size:11px;color:var(--t2)}
.avatar{width:56px;height:56px;flex:none;border-radius:var(--r-card);display:grid;place-items:center;
  font:800 24px var(--font);color:#fff;border:1px solid var(--line-strong)}
.inlineform{display:inline-flex}
.msg{font-size:10px;color:var(--t3)}
.actrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tblwrap{overflow-x:auto;min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:11px}
.tbl th{text-align:left;padding:2px 10px 6px 0;font:700 9px var(--font);letter-spacing:.13em;
  text-transform:uppercase;color:var(--t3);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:6px 10px 6px 0;border-bottom:1px solid var(--line);color:var(--t1);vertical-align:middle}
.tbl td .prov{font-family:var(--mono);color:var(--accent);font-size:10.5px}
.tbl td.dim{color:var(--t3)}
.credrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-width:0}
.credrow .input{width:auto;flex:0 1 auto}
.credrow .grow{flex:1 1 160px}
.emojigrid{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:var(--bg-0)}
.emoji-btn{width:30px;height:30px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;
  font-size:16px;cursor:pointer;display:inline-grid;place-items:center;
  transition:background-color var(--tr),border-color var(--tr),box-shadow var(--tr)}
.emoji-btn:hover{background:var(--overlay)}
.emoji-btn.sel{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:var(--glow-soft) var(--accent)}
.emoji-btn.none{font-size:11px;color:var(--t3)}
.ckrow{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--t1)}
.ckrow code{font-family:var(--mono);font-size:10px;color:var(--t2)}
input[type="checkbox"].plain{accent-color:var(--accent);width:14px;height:14px;flex:none}
/* native <select> popup: the <option> list is drawn by the browser and
   inherits NOTHING from the closed control — give it an OPAQUE surface
   (theme tokens first, this sheet's own palette as fallback) so it is never
   white-on-white. Same bridge pattern as data_page.html. */
select,select option,select optgroup{
  background-color:var(--theme-bg-2,var(--bg-2));
  color:var(--theme-text-0,var(--t0))}

/* ── motion — entrances only when the OS allows them ── */
@keyframes v4Rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes v4Breathe{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes caretBlink{0%,55%{opacity:1}56%,100%{opacity:0}}
@media (prefers-reduced-motion: no-preference){
  .authcard{animation:v4Rise .5s var(--ease-out) .05s backwards}
  .stchip.live i{animation:v4Breathe 2.6s ease-in-out infinite}
  .otp .cell.cur .caret{animation:caretBlink 1.1s steps(1) infinite}
}