:root{
  color-scheme:light;
  --paper:#fff;--canvas:#F3F3F7;--dot:#DADAE3;--ink:#15151C;--ink-2:#4A4A58;--ink-3:#8A8A99;--line:#E6E6EE;--wash:#F6F6F9;
  --coral:#FF6655;--sky:#46CDF9;--mint:#00DC87;--violet:#9A52FF;
  --coral-ink:#D63C2A;--sky-ink:#0A7DB0;--mint-ink:#00855A;--violet-ink:#7A34E6;
  --coral-wash:#FFEEEB;--sky-wash:#E7F8FE;--mint-wash:#E1FAEF;--violet-wash:#F3EBFF;
  --amber:#F4B000;
  --e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.76,0,.24,1);--e-back:cubic-bezier(.34,1.56,.64,1);
  --display:"Bricolage Grotesque","Inter",ui-sans-serif,system-ui,sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --hand:"Just Me Again Down Here","Segoe Print",cursive;
  --r:16px;--shadow:0 1px 2px rgba(21,21,28,.05),0 12px 32px -14px rgba(21,21,28,.18);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2.5px solid var(--sky-ink);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono)}
.tag{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-2)}
.hand{font-family:var(--hand);font-size:26px;line-height:1;color:var(--coral-ink)}
[hidden]{display:none!important}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 16px;background:var(--paper);border-right:1px solid var(--line);z-index:5}
.brand{display:flex;align-items:center;gap:11px;padding:4px 10px 18px}
.brand b{display:block;font:700 19px/1 var(--display);letter-spacing:-.03em}
.brand span{display:block;margin-top:4px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink-2);font-weight:500;position:relative;transition:background .2s,color .2s}
.nav svg{width:20px;height:20px;flex:none}
.nav:hover{background:var(--wash);color:var(--ink)}
.nav.on{background:var(--ink);color:#fff}
.nav .count{margin-left:auto;font:600 11px/1 var(--mono);padding:4px 7px;border-radius:999px;background:var(--coral);color:#fff}
.nav-sep{margin:14px 12px 6px}
.side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--wash);text-decoration:none}
.side .me div b{display:block;font-size:14px;line-height:1.2}
.side .me div span{display:block;font-size:12px;color:var(--ink-3)}
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:16px;padding:16px 32px;background:rgba(243,243,247,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top h1{font-size:26px}
.top .crumb{display:block;margin-bottom:4px}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.xp{text-decoration:none;color:inherit;display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow)}
.xp .lvl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font:700 13px/1 var(--display)}
.xp .bar{width:110px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.xp .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--coral),var(--violet));border-radius:3px;transition:width .8s var(--e-out)}
.xp>div{display:flex;flex-direction:column;gap:3px;min-width:110px}
.xp small{display:block;font:500 11px/1.2 var(--mono);color:var(--ink-3)}
.xp b{font:600 13px/1 var(--sans)}
.view{overflow-x:clip;padding:8px 32px 64px;animation:viewIn .5s var(--e-out) both}
@keyframes viewIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.burger{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:270px;transform:translateX(-102%);transition:transform .35s var(--e-out);box-shadow:var(--shadow)}
  .side.open{transform:none}
  .burger{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:var(--paper);box-shadow:var(--shadow);cursor:pointer}
  .top{padding:12px 16px}.view{padding:8px 16px 48px}.xp .bar,.xp small{display:none}
}

/* ---------- atoms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,background .2s,border-color .2s}
.btn:hover{border-color:var(--ink-3)}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.primary:hover{background:#2b2b36}
.btn.danger{color:var(--coral-ink);border-color:#F6C9C2}
.btn.sm{padding:7px 12px;font-size:13px}
.btn.icon{padding:8px;border-radius:10px}
.btn[disabled]{opacity:.45;pointer-events:none}
.card{background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.grid{display:grid;gap:18px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spacer{flex:1}
.av{--s:36px;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:inline-grid;place-items:center;overflow:hidden;background:var(--avc,var(--ink));color:#fff;font:700 calc(var(--s)*.38)/1 var(--display);box-shadow:0 0 0 2px #fff;object-fit:cover}
img.av{background:var(--wash)}
.avs{display:inline-flex}.avs .av+.av{margin-left:-10px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--wash);font-size:12.5px;font-weight:600;white-space:nowrap;max-width:100%}
.chip .av{--s:22px;box-shadow:none}
.chip .dot{width:22px;height:22px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;flex:none}
.chip .dot svg{width:13px;height:13px}
.chip.plain{padding:5px 10px}
.when{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#FFF6DC;color:#7A5A00;font:500 12px/1 var(--mono)}
.when svg{width:13px;height:13px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font:600 12px/1 var(--sans);background:var(--wash);color:var(--ink-2)}
.pill.req{background:var(--coral-wash);color:var(--coral-ink)}
.pill.opt{background:var(--sky-wash);color:var(--sky-ink)}
.pill.done{background:var(--mint-wash);color:var(--mint-ink)}
.pill.old{background:#FFF6DC;color:#7A5A00}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.field input,.field select,.field textarea,.inp{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-weight:400;font-size:14px}
.field textarea,textarea.inp{resize:vertical;min-height:70px;line-height:1.45}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{outline:none;border-color:var(--sky-ink);box-shadow:0 0 0 3px var(--sky-wash)}
.field small{font-weight:400;color:var(--ink-3)}
.empty{padding:40px;text-align:center;color:var(--ink-3)}
.ring{--p:0;--c:var(--mint);width:var(--s,54px);height:var(--s,54px);border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;flex:none;transition:--p .8s}
.ring::before{content:"";grid-area:1/1;width:calc(100% - 10px);height:calc(100% - 10px);border-radius:50%;background:#fff}
.ring b{grid-area:1/1;position:relative;font:600 12px/1 var(--mono)}
@property --p{syntax:'<number>';inherits:true;initial-value:0}

/* ---------- logo ---------- */
.logo{position:relative;width:var(--s,34px);height:var(--s,34px);flex:none}
.logo i{position:absolute;width:50%;height:50%}
.logo .l1{left:0;top:0;background:var(--coral)}
.logo .l2{right:0;top:0;background:var(--sky)}
.logo .l2::after{content:"";position:absolute;left:50.5%;top:48.6%;width:74.6%;height:74.6%;transform:translate(-50%,-50%);border-radius:50%;background:#fff}
.logo .l3{left:0;bottom:0;background:var(--mint);border-radius:0 0 0 100%}
.logo .l4{right:0;bottom:0;background:var(--violet);border-radius:0 0 100% 0}
.logo.anim i{animation:pcIn .9s var(--e-back) both}
.logo.anim .l2{animation-delay:.1s}.logo.anim .l4{animation-delay:.2s}.logo.anim .l3{animation-delay:.3s}
@keyframes pcIn{from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(.3) rotate(-20deg)}to{opacity:1;transform:none}}
.logo .l1{--fx:-60%;--fy:-60%}.logo .l2{--fx:60%;--fy:-60%}.logo .l3{--fx:-60%;--fy:60%}.logo .l4{--fx:60%;--fy:60%}

/* ---------- toasts & modal ---------- */
#toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:100}
.toast{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:var(--ink);color:#fff;font-weight:500;box-shadow:var(--shadow);animation:toastIn .45s var(--e-back) both;max-width:380px}
.toast.err{background:var(--coral-ink)}
.toast svg{width:18px;height:18px;flex:none}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
.modal-bg{position:fixed;inset:0;z-index:90;background:rgba(21,21,28,.35);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;animation:fadeIn .25s both}
.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;padding:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.4);animation:modalIn .45s var(--e-back) both;display:flex;flex-direction:column;gap:16px}
.modal h3{font-size:26px}
@keyframes fadeIn{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--canvas) radial-gradient(circle,var(--dot) 1px,transparent 1.4px) 0 0/22px 22px;position:relative;overflow:hidden}
.login form{position:relative;z-index:2;width:min(420px,100%);background:#fff;border-radius:24px;padding:36px 32px;box-shadow:0 40px 90px -30px rgba(21,21,28,.3);display:flex;flex-direction:column;gap:18px;animation:modalIn .7s var(--e-back) .2s both}
.login h1{font-size:40px}
.login .err{color:var(--coral-ink);font-size:14px;font-weight:500}
.floaty{position:absolute;opacity:.9;animation:floaty 9s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translate(0,0) rotate(0)}to{transform:translate(30px,-40px) rotate(25deg)}}