/* Shared look for the sign-in and users pages (the main app carries its own copy of these tokens). */
:root{
  --bg:#FAF4F3; --surface:#FFFFFF; --surface-2:#F5E8E6; --ink:#2A1416; --muted:#7B5D60; --line:#ECD9D6;
  --red:#D21F2A; --red-deep:#9F121B; --red-soft:#FCE2E3; --on-red:#FFFFFF; --ok:#17865A; --ok-soft:#DDF3E8; --warn:#B86E00; --warn-soft:#FDEFD6;
  --shadow:0 1px 2px rgba(70,10,15,.06),0 10px 28px -14px rgba(70,10,15,.32);
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#150A0B; --surface:#211113; --surface-2:#2C171A; --ink:#F7E9E8; --muted:#C2A3A5; --line:#3C2326;
  --red:#F23A43; --red-deep:#C11C25; --red-soft:#3E1519; --ok:#3CC283; --ok-soft:#14301F; --warn:#F0AA3C; --warn-soft:#352612;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -14px rgba(0,0,0,.7); color-scheme:dark}}
*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{margin:0;font-family:var(--f-body);font-size:15px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.05;text-wrap:balance}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;transition:border-color .2s,box-shadow .2s}
.inp:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 16%,transparent)}
.field{display:grid;gap:6px}
.field>label,.lbl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.btn{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.primary:hover{background:var(--red-deep)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.55;pointer-events:none}
:focus-visible{outline:3px solid color-mix(in srgb,var(--red) 55%,transparent);outline-offset:2px}
.err{background:var(--red-soft);color:var(--red);border-radius:10px;padding:10px 12px;font-weight:600;font-size:14px;animation:shake .35s}
.okmsg{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:10px 12px;font-weight:600;font-size:14px}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{transform-origin:50% 4px;animation:swing 3.2s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}