:root{
  --bg:#f3f6f9; --surface:#fff; --mint:#e1f1ee; --peach:#fdeadb; --sky:#e4ebfa;
  --text:#1f2a37; --muted:#5b6776; --line:#e2e8ee; --accent:#c65d10; --accent-soft:#f6a25f; --accent-ink:#fff;
  --ok:#17794c; --bad:#b3261e; --shadow:0 1px 2px rgba(31,42,55,.04),0 6px 20px rgba(31,42,55,.05);
  --f-head:"Trebuchet MS","Segoe UI",system-ui,sans-serif; --f-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --f-mono:ui-monospace,Menlo,Consolas,monospace;
  --r:18px; --r-sm:12px; --side:92px; --bar:64px;
}
[data-theme=dark]{--bg:#12171d;--surface:#1a2129;--mint:#1a2e2b;--peach:#352819;--sky:#1d2742;--text:#e8ecf1;--muted:#9ba7b4;--line:#2a333d;--accent:#f29a5b;--accent-soft:#f29a5b;--accent-ink:#1a1208;--ok:#5fd39a;--bad:#ff8a80;--shadow:0 1px 2px rgba(0,0,0,.3)}
[data-theme=sea]{--bg:#eef5f8;--mint:#d9eef0;--peach:#fde8dc;--sky:#dbeaf7;--text:#17303d;--muted:#506977;--line:#d9e5ec;--accent:#0a6f8f;--accent-soft:#5db7d1;--accent-ink:#fff}
[data-theme=forest]{--bg:#f2f5ee;--mint:#e0efd9;--peach:#f7ebd2;--sky:#e1ecea;--text:#1f2d22;--muted:#58675a;--line:#e0e7da;--accent:#2f7a3a;--accent-soft:#8cc58f;--accent-ink:#fff}
[data-theme=rose]{--bg:#faf3f5;--mint:#f6e1e8;--peach:#fde7dd;--sky:#ece4f6;--text:#33202a;--muted:#6d5560;--line:#efdfe5;--accent:#b4235f;--accent-soft:#e88ab0;--accent-ink:#fff}
[data-theme=dusk]{--bg:#15131f;--surface:#1e1b2c;--mint:#1f2a3a;--peach:#33232f;--sky:#2a2748;--text:#ebe8f5;--muted:#a29fb8;--line:#2d2a40;--accent:#a99bff;--accent-soft:#a99bff;--accent-ink:#14102b;--ok:#5fd39a;--bad:#ff8a80;--shadow:0 1px 2px rgba(0,0,0,.3)}
[data-theme=coal]{--bg:#0f0f10;--surface:#19191b;--mint:#1c2622;--peach:#2c2319;--sky:#1b2330;--text:#ececec;--muted:#a0a0a5;--line:#2a2a2d;--accent:#7fd18b;--accent-soft:#7fd18b;--accent-ink:#0b1a0d;--ok:#5fd39a;--bad:#ff8a80;--shadow:0 1px 2px rgba(0,0,0,.4)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--f-body);-webkit-text-size-adjust:100%}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--f-head);line-height:1.25;margin:0}
h1{font-size:1.75rem;margin-bottom:.4rem}h2{font-size:1.25rem;margin:2rem 0 .8rem}h3{font-size:1.05rem}
.boot{padding:2rem;text-align:center;color:var(--muted)}.muted{color:var(--muted)}.small{font-size:.9rem}
.shell{min-height:100vh;display:grid;grid-template-columns:var(--side) minmax(0,1fr)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:.35rem;padding:1.1rem .6rem;background:var(--surface);border-right:1px solid var(--line)}
.brand{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 1.2rem;border-radius:14px;background:var(--mint)}
.brand img{width:28px;height:28px;border-radius:8px}
.nav{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.65rem .2rem;border-radius:var(--r-sm);text-decoration:none;color:var(--muted);font-size:.78rem;line-height:1.2;border:0;background:none;font-family:inherit;cursor:pointer}
.nav:hover{background:var(--bg)}.nav.on{background:var(--mint);color:var(--text);font-weight:600}.nav.on svg{color:var(--accent)}
.badge{position:absolute;top:.3rem;right:1.2rem;min-width:1.2rem;height:1.2rem;padding:0 .3rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.72rem;display:grid;place-items:center;font-weight:700}
main{max-width:1100px;width:100%;margin:0 auto;padding:1.8rem clamp(1rem,4vw,3rem) 5rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.2rem}
.tile{display:flex;flex-direction:column;gap:.55rem;padding:1.3rem 1.3rem 1.2rem;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);text-decoration:none;color:inherit;min-height:150px;transition:transform .15s}
.tile:hover{transform:translateY(-2px)}
.tile .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--text)}
.tile:nth-child(3n+1) .ico{background:var(--mint)}.tile:nth-child(3n+2) .ico{background:var(--peach)}.tile:nth-child(3n) .ico{background:var(--sky)}
.tile p{margin:0;color:var(--muted);font-size:.92rem}
.card{background:var(--surface);border-radius:var(--r);padding:1.3rem 1.4rem;margin:1rem 0;box-shadow:var(--shadow)}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:.5rem 1.05rem;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
button:hover:not(:disabled),.btn:hover{border-color:var(--accent-soft)}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button:disabled{opacity:.55;cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note{display:flex;gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--line)}.note:last-child{border:0}
.note.new b{color:var(--accent)}
.code{font:700 1.6rem var(--f-mono);letter-spacing:.12em;background:var(--mint);padding:.5rem 1rem;border-radius:var(--r-sm);display:inline-block;margin:.5rem 0}
.themes{display:flex;flex-wrap:wrap;gap:.6rem}.themes button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}
.themes i{width:1.3rem;height:1.3rem;border-radius:50%;border:1px solid var(--line);display:block}
.err{color:var(--bad)}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--muted)}
@media (max-width:760px){
  .shell{grid-template-columns:1fr;padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
  .side{position:fixed;inset:auto 0 0 0;height:calc(var(--bar) + env(safe-area-inset-bottom));flex-direction:row;justify-content:space-around;padding:.3rem .5rem env(safe-area-inset-bottom);border-right:0;border-top:1px solid var(--line);z-index:5}
  .brand{display:none}.nav{flex:1;padding:.4rem .2rem}.badge{right:calc(50% - 1.6rem)}
  h1{font-size:1.45rem}
}
@media (prefers-reduced-motion:reduce){.tile{transition:none}.tile:hover{transform:none}}