/* public/chepi.css — Chepi 2.0 night brand. One token set shared by every page (docs/m1-design.md section 8).
   Sizes and colours are classes, never style= attributes: the CSP has no 'unsafe-inline'. */
:root{
  color-scheme:dark;
  --bg:#0e0c2c; --paper:#1c1952; --paper-2:#24215a; --line:#3a3578;
  --ink:#f1efff; --mute:#aaa6d4;
  --vio:#9c85ff; --vio2:#5b2ee6; --spark:#5ec8f2; --good:#7be0a8; --bad:#ff9bb3;
  --fd:"Sora",system-ui,sans-serif; --fb:"Figtree",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.85,.2,1); --gutter:clamp(18px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 var(--fb);-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--fd);font-weight:650;letter-spacing:-.03em;line-height:1.05;margin:0}
a{color:var(--vio)}
a:hover{color:var(--ink)}
.kicker{text-transform:uppercase;letter-spacing:.28em;font-size:13px;font-weight:600;color:var(--spark)}
.mark{overflow:visible;display:block}           /* sizes are classes, never style= (CSP) */
.mark-28{width:28px;height:28px} .mark-72{width:72px;height:72px}
.m-arc{fill:none;stroke:var(--vio);stroke-width:13;stroke-linecap:round}
.m-eye{fill:var(--ink)} .m-spark{fill:var(--spark)}
.bar{position:sticky;top:0;display:flex;align-items:center;gap:10px;padding:10px var(--gutter);
     background:rgba(14,12,44,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .brand{display:flex;align-items:center;gap:8px;font:650 22px var(--fd);letter-spacing:-.02em}
.bar .kicker{margin-left:4px}
.bar .who{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:var(--mute);text-decoration:none;
          min-width:0;text-align:right;overflow-wrap:anywhere}
.bar .who:hover{color:var(--ink)}
.bar .who:active{color:var(--vio)}
main{max-width:46ch;margin:0 auto;padding:64px var(--gutter)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;
     border:1.5px solid var(--line);background:transparent;color:var(--ink);font:600 15px var(--fb);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--vio)} .btn:active{background:rgba(156,133,255,.2)}
.btn.pri{border:0;background:var(--vio);color:#0e0c2c}
.btn.pri:hover{color:#0e0c2c;filter:brightness(1.08)} .btn.pri:active{filter:brightness(.82)}
:focus-visible{outline:2px solid var(--spark);outline-offset:3px;border-radius:8px}
.card{max-width:420px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px 26px;display:grid;gap:14px}
.card h1{font-size:26px} .card input{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit}
.card .btn{min-height:46px}
.card .brand{display:flex;align-items:center;gap:8px}
.card p{margin:0}
.card .sub{color:var(--mute)}
.card form{display:grid;gap:14px}
.card label{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--mute)}
.card input{width:100%}
.card input:focus-visible{outline-offset:1px;border-color:var(--spark)}
.note{font-size:13px;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--paper-2)}
.note.bad{border-color:var(--bad);color:var(--bad)}
.empty{display:grid;place-items:center;gap:10px;text-align:center;padding:40px 20px;border:1.5px dashed var(--line);border-radius:20px;color:var(--mute)}
.empty h1{color:var(--ink);font-size:22px} .empty p{margin:0;max-width:46ch} .mute{color:var(--mute);font-size:13px}
.closed{display:grid;justify-items:center;gap:14px;text-align:center;padding-top:96px}
.closed h1{font-size:32px} .closed p{margin:0;color:var(--mute)}
@media (max-width:600px){:root{--gutter:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}