/* Spurzee sign-in, sign-up and password reset pages (templates/_auth_base.html). */
:root{
  --bg:#0b0d12;--panel:#131722;--panel2:#1a1f2c;--line:#262b38;--line2:#323848;--line3:#3d4456;
  --text:#e6e8ee;--text2:#c9ccd6;--muted:#8b90a0;--dim:#5d6272;
  --gold:#F5B942;--gold2:#ffcf6b;--link:#F5B942;--ink:#17130a;--down:#f0616d;--up:#26a69a;
  --alert-ink:#ffc2c7;--note-ink:#b6ebe5;--grid:rgba(255,255,255,.05);
  --hero:linear-gradient(180deg,#0f1219,#0b0d12);
  --r:12px;color-scheme:dark;
}
/* light theme: the same layout on paper-white surfaces, a deeper gold for text on white */
[data-theme="light"]{
  --bg:#f5f6fa;--panel:#ffffff;--panel2:#eef0f5;--line:#e3e6ee;--line2:#d3d8e2;--line3:#b9c0ce;
  --text:#131722;--text2:#343a48;--muted:#5d6272;--dim:#8a90a0;
  --link:#b7790d;--down:#d93848;--up:#14897d;
  --alert-ink:#8f1d29;--note-ink:#0d5e55;--grid:rgba(19,23,34,.06);
  --hero:linear-gradient(180deg,#ffffff,#f3f4f8);
  color-scheme:light;
}
/* the logo with white lettering on dark, dark lettering on light */
[data-theme="light"] .th-dark,:root:not([data-theme="light"]) .th-light{display:none!important}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font:15px/1.5 Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{filter:brightness(1.12)}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.au-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}

/* ---------- the brand panel ---------- */
.au-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:44px 56px;background:
    radial-gradient(900px 500px at 15% 0%,rgba(245,185,66,.10),transparent 60%),
    radial-gradient(700px 500px at 100% 100%,rgba(41,98,255,.10),transparent 60%),
    var(--hero);border-right:1px solid var(--line)}
.au-brand img{display:block;height:40px;width:auto}
.au-pitch{position:relative;z-index:2;max-width:460px;margin:auto 0}
.au-pitch h2{font-size:42px;line-height:1.12;letter-spacing:-.02em;margin:0 0 16px;font-weight:700}
.au-pitch p{color:var(--muted);font-size:16px;margin:0 0 26px}
.au-points{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.au-points li{display:flex;align-items:center;gap:12px;color:var(--text2)}
.au-points i{width:22px;height:22px;border-radius:7px;flex:none;background:rgba(245,185,66,.14);position:relative}
.au-points i:after{content:"";position:absolute;left:7px;top:5px;width:5px;height:9px;border:solid var(--gold);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.au-chart{position:absolute;left:0;right:0;bottom:64px;width:100%;height:36%;stroke:none;pointer-events:none}
.au-grid path{stroke:var(--grid);stroke-width:1}
.au-line{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:100;animation:au-draw 2.4s cubic-bezier(.4,0,.2,1) .2s both;
  filter:drop-shadow(0 0 6px rgba(245,185,66,.45))}
.au-area{opacity:0;animation:au-fade 1.2s ease 1.6s forwards}
.au-tip{fill:var(--gold);stroke:none;opacity:0;animation:au-fade .4s ease 2.5s forwards,au-pulse 2.4s ease-in-out 3s infinite;transform-box:fill-box;transform-origin:center}
@keyframes au-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes au-fade{to{opacity:1}}
@keyframes au-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.au-copy{position:relative;z-index:2;margin:0;color:var(--dim);font-size:12.5px}

/* ---------- the form side ---------- */
.au-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px}
.au-card{width:100%;max-width:420px}
.au-brand-sm{display:none;margin-bottom:28px}
.au-brand-sm img{display:block;height:34px;width:auto}
.au-card h1{font-size:28px;line-height:1.2;letter-spacing:-.015em;margin:0 0 8px;font-weight:700}
.au-lead{color:var(--muted);margin:0 0 26px}
.au-lead b{color:var(--text);font-weight:600}
.au-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(245,185,66,.12);color:var(--gold)}
.au-icon svg{width:24px;height:24px}
.au-icon-warn{background:rgba(240,97,109,.12);color:var(--down)}

.au-form{display:grid;gap:16px}
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.au-field{display:grid;gap:7px}
.au-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:var(--text2)}
.au-label em{font-style:normal;font-weight:500;color:var(--dim)}
.au-link{font-weight:500;font-size:13px}
.au-field input,.au-pw input{width:100%;height:46px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line2);
  background:var(--panel);color:var(--text);font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.au-field input:hover{border-color:var(--line3)}
.au-field input:focus,.au-pw input:focus,.au-code input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,185,66,.18)}
.au-pw{position:relative;display:block}
.au-pw input{padding-right:46px}
.au-eye{position:absolute;right:6px;top:6px;width:34px;height:34px;border:0;border-radius:9px;background:none;color:var(--muted);
  cursor:pointer;display:grid;place-items:center}
.au-eye:hover{color:var(--text);background:var(--panel2)}
.au-eye svg{width:18px;height:18px}
.au-eye.on{color:var(--link)}

.au-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:2px}
.au-meter i{height:4px;border-radius:4px;background:var(--line2);transition:background .2s}
.au-meter[data-s="1"] i:nth-child(-n+1){background:var(--down)}
.au-meter[data-s="2"] i:nth-child(-n+2){background:#f0a35e}
.au-meter[data-s="3"] i:nth-child(-n+3){background:var(--gold)}
.au-meter[data-s="4"] i{background:var(--up)}
.au-hint{font-size:12.5px;color:var(--dim)}

.au-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text2);cursor:pointer;user-select:none}
.au-check input[type=checkbox]{appearance:none;width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid var(--line2);
  background:var(--panel);display:grid;place-items:center;cursor:pointer}
.au-check input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.au-check input[type=checkbox]:checked:after{content:"";width:4px;height:8px;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}

.au-btn{height:48px;border:0;border-radius:var(--r);cursor:pointer;font:600 15px/1 inherit;font-family:inherit;color:var(--ink);
  background:linear-gradient(180deg,var(--gold2),var(--gold));box-shadow:0 8px 24px rgba(245,185,66,.18),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s,filter .15s,opacity .15s}
.au-btn:hover{filter:brightness(1.05)}
.au-btn:active{transform:translateY(1px)}
.au-btn[disabled]{opacity:.65;cursor:progress}

.au-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:0 0 18px;border-radius:var(--r);
  background:rgba(240,97,109,.10);border:1px solid rgba(240,97,109,.28);color:var(--alert-ink);font-size:14px}
.au-alert svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--down)}
.au-note{padding:12px 14px;margin:0 0 18px;border-radius:var(--r);background:rgba(38,166,154,.10);
  border:1px solid rgba(38,166,154,.3);color:var(--note-ink);font-size:14px}

.au-code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.au-code input{height:56px;width:100%;text-align:center;font:600 22px/1 inherit;font-family:inherit;color:var(--text);
  border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);outline:none;transition:border-color .15s,box-shadow .15s}
.au-code input.filled{border-color:var(--line3)}
.au-resend{margin:20px 0 4px;color:var(--muted);font-size:14px}
.au-resend button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--link);cursor:pointer}
.au-resend button[disabled]{color:var(--dim);cursor:default}
.au-resend span{color:var(--dim)}
.au-small{margin:0;color:var(--dim);font-size:12.5px}
.au-switch{margin:26px 0 0;color:var(--muted);font-size:14px}
.au-switch a{font-weight:600}
.au-safe{display:flex;align-items:center;gap:8px;max-width:420px;width:100%;margin:36px 0 0;color:var(--dim);font-size:12.5px}
.au-safe svg{width:16px;height:16px;flex:none;color:var(--up)}

/* the username field: "@" prefix, live check, suggestions */
.au-at{position:relative;display:block}
.au-at i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--dim);font-weight:600}
.au-at input{width:100%;height:46px;padding:0 14px 0 32px;border-radius:var(--r);border:1px solid var(--line2);background:var(--panel);color:var(--text);
  font:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.au-at input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,185,66,.18)}
.au-hint.ok{color:var(--up)}.au-hint.bad{color:var(--down)}
.au-chips{display:flex;flex-wrap:wrap;gap:6px}
.au-chips:empty{display:none}
.au-chips button{height:30px;padding:0 12px;border-radius:20px;border:1px solid var(--line2);background:var(--panel);color:var(--text2);
  font:inherit;font-size:13px;cursor:pointer}
.au-chips button:hover{border-color:var(--gold);color:var(--link)}

/* light / dark switch, top right */
.au-theme{position:fixed;top:18px;right:18px;z-index:5;width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);
  background:var(--panel);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:color .15s,border-color .15s}
.au-theme:hover{color:var(--text);border-color:var(--line3)}
.au-theme svg{width:18px;height:18px}
[data-theme="light"] .au-theme .i-sun,:root:not([data-theme="light"]) .au-theme .i-moon{display:none}
[data-theme="light"] .au-icon{background:rgba(245,185,66,.18);color:#b7790d}
[data-theme="light"] .au-points i{background:rgba(245,185,66,.2)}
[data-theme="light"] .au-points i:after{border-color:#b7790d}
[data-theme="light"] .au-line{filter:none}
[data-theme="light"] .au-btn{box-shadow:0 8px 20px rgba(214,150,30,.22),inset 0 1px 0 rgba(255,255,255,.5)}
[data-theme="light"] .au-field input,[data-theme="light"] .au-pw input,[data-theme="light"] .au-code input{box-shadow:0 1px 2px rgba(19,23,34,.04)}

/* the bot trap: never shown */
.au-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

@media (max-width:900px){
  .au-wrap{grid-template-columns:1fr}
  .au-hero{display:none}
  .au-brand-sm{display:block}
  .au-panel{justify-content:flex-start;padding:32px 20px 28px}
}
@media (max-width:400px){
  .au-row{grid-template-columns:1fr}
  .au-code{gap:6px}
  .au-code input{height:50px;font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .au-line,.au-area,.au-tip{animation:none;opacity:1;stroke-dashoffset:0}
}
/* two-step sign-in (login_verify.html) */
.au-more{margin:18px 0 6px;border-top:1px solid var(--line);padding-top:14px}
.au-more summary{cursor:pointer;color:var(--muted);font-size:13.5px;list-style:none}
.au-more summary::-webkit-details-marker{display:none}
.au-more summary:hover{color:var(--text)}
.au-more[open] summary{margin-bottom:12px;color:var(--text);font-weight:600}
.au-btn.ghost{background:none;color:var(--text);border:1px solid var(--line2);box-shadow:none}
.au-btn.ghost:hover{background:var(--panel2)}
.au-small+.au-small{margin-top:8px}