:root{color-scheme:dark;--bg:#1d1b63;--card:#efdfbb;--tx:#f3e6c4;--mut:#c9bf9a;--bd:#c9b48a;--ac:#f5b21a;--acx:#1d1b4a;--ok:#86c43f;--red:#8a2a1a;--peach:#f0a45f;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html,body{margin:0}
body{background-color:var(--bg);background-image:radial-gradient(#f5b21a99 1.6px,transparent 2.2px);background-size:30px 30px;color:var(--tx);font:16px/1.45 "Rubik","Heebo","Segoe UI",Arial,sans-serif;padding-bottom:88px}
header,main,nav,#modal>div{filter:sepia(.28) saturate(.88) contrast(.96)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.7;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='2.2 0 0 0 -.55 2.2 0 0 0 -.55 2.2 0 0 0 -.55 0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:51;background:radial-gradient(ellipse at center,transparent 55%,#3a140055 100%),#ff9a4a14;mix-blend-mode:multiply}
header{background:#14124a;color:#f5b21a;padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:5px dashed #f5b21a}
header b{font-size:26px;font-weight:900;letter-spacing:1px;color:#f5b21a}header span{color:#f3e6c4;font-size:16px;font-weight:600}
header select{margin-inline-start:auto;max-width:44%;background:#2a2890;color:#f3e6c4;border-color:#f5b21a}
main{padding:12px;max-width:760px;margin:auto}
nav{position:fixed;bottom:0;inset-inline:0;background:#14124a;display:flex;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));gap:4px;z-index:5;border-top:3px solid #f5b21a}
nav button{flex:1;background:none;border:0;color:#d9cfa8;padding:10px 2px;font:inherit;font-size:13px;border-radius:12px}
nav button.on{background:#f5b21a;color:#1d1b4a;font-weight:800}
.card,#modal>div{--tx:#1d1b4a;--mut:#6a5d7a;--bd:#c9b48a;color:var(--tx)}
.card{background:var(--card);border:2px solid #14124a;border-radius:16px;padding:12px;margin:12px 0;box-shadow:4px 4px 0 #0c0a33}
.card:nth-of-type(4n+2){background:var(--peach)}.card:nth-of-type(4n+3){background:#f6ecd2}.card:nth-of-type(4n){background:#c9e08a}
.card h3{border-bottom:2px solid #1d1b4a22;padding-bottom:4px}
h2{margin:6px 0;font-size:21px;font-weight:900;color:#f5b21a}h3{margin:0 0 4px;font-size:17px;font-weight:800}
.mut{color:var(--mut);font-size:13px}main>.mut,main>div>.mut{color:#c9bf9a}
button.b,select,input,textarea{font:inherit;border-radius:12px;border:2px solid #14124a;padding:9px 12px;background:#faf1d8;color:#1d1b4a}
button.b{background:var(--ac);color:var(--acx);font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--red)}
button.b:active{transform:translateY(2px);box-shadow:none}
button.g{background:transparent;color:inherit;border:2px solid currentColor;box-shadow:none}
main>.row button.g{color:#f3e6c4}
button.ok{background:var(--ok);color:#102a08}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sp{justify-content:space-between}
.chip{display:inline-block;background:#faf1d8;border:2px solid #14124a;border-radius:99px;padding:1px 11px;margin:2px;font-size:14px;color:#1d1b4a}
.chip.in{background:var(--ok);color:#102a08}
.tag{display:inline-block;background:var(--red);color:#f6ecd2;border-radius:6px;padding:0 8px;font-size:12px;font-weight:700;margin-inline-end:4px}
.tag.c{background:#14124a}
.sh{border-top:2px dashed #1d1b4a44;padding:8px 0}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{padding:6px 4px;border-bottom:1px solid #1d1b4a33;text-align:start}
#modal{position:fixed;inset:0;background:#0a0830cc;display:none;align-items:center;justify-content:center;z-index:9;padding:16px}
#modal>div{background:var(--card);border:2px solid #14124a;border-radius:16px;padding:16px;width:100%;max-width:420px;max-height:85vh;overflow:auto}
label{display:block;margin:8px 0 2px;font-size:14px}input,select{width:100%}
#toast{position:fixed;top:12px;inset-inline:12px;background:var(--red);color:#fff;border-radius:12px;padding:10px;display:none;z-index:60}
#me{margin-inline-start:auto;display:flex;align-items:center;gap:8px;color:#f3e6c4}