:root{
  --bg:#07070b;--text:#f3f4f6;--muted:#9ca3af;--card:#12121a;--line:#23232f;
  --accent:#4ade80;--accent-ink:#04130a;--warn:#facc15;--bad:#f87171;--orange:#fb923c;
  --won-bg:#0f1f15;--won-line:#166534;--lost-bg:#1f1010;--lost-line:#7f1d1d;
  --header:rgba(7,7,11,.9);--glow:#14532d;
}
:root[data-theme="light"]{
  --bg:#f6f7f9;--text:#111827;--muted:#4b5563;--card:#ffffff;--line:#d9dde3;
  --accent:#15803d;--accent-ink:#ffffff;--warn:#a16207;--bad:#b91c1c;--orange:#c2410c;
  --won-bg:#ecfdf3;--won-line:#86efac;--lost-bg:#fef2f2;--lost-line:#fca5a5;
  --header:rgba(246,247,249,.92);--glow:#dcfce7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.5;
  background-image:radial-gradient(circle at 50% -10%,var(--glow) 0,transparent 50%);background-repeat:no-repeat}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:6px;z-index:100;font-weight:700}
.skip:focus{left:8px}
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:90;pointer-events:none}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hwrap{max-width:760px;margin:auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{font-weight:800;font-size:18px;color:var(--text);text-decoration:none;white-space:nowrap}
.brand:hover{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;padding:6px 10px;border-radius:8px;transition:background .15s,color .15s}
.nav a:hover{background:var(--line);color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);background:var(--line)}
.hright{margin-left:auto;display:flex;align-items:center;gap:8px}
.iconbtn{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:8px;width:38px;height:38px;font-size:18px;cursor:pointer;line-height:1;transition:background .15s,border-color .15s}
.iconbtn:hover{background:var(--line);border-color:var(--muted)}
.menubtn{display:none}
.mobilemenu{border-top:1px solid var(--line);padding:8px 16px 12px;max-width:760px;margin:auto}
.mobilemenu[hidden]{display:none}
.mobilemenu a{display:block;padding:12px 8px;color:var(--text);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
.mobilemenu a:last-child{border-bottom:0}
.mobilemenu a:hover{color:var(--accent)}
@media (max-width:640px){
  .nav{display:none}
  .menubtn{display:inline-block}
}

/* layout */
.wrap{max-width:600px;margin:auto;padding:20px 16px}
.doc{max-width:680px;margin:auto;padding:24px 16px 8px}
.doc h1{font-size:28px;margin:8px 0 4px}
.doc h2{font-size:19px;margin:28px 0 6px}
.doc p,.doc li{color:var(--text);font-size:15px}
.doc .updated{color:var(--muted);font-size:13px}
.hero{text-align:center;padding:14px 0 6px}
.hero h1{margin:6px 0;font-size:28px;line-height:1.2}
.sub{color:var(--muted);font-size:15px;max-width:460px;margin:6px auto 0}

/* buttons */
.btn{display:inline-block;white-space:nowrap;background:var(--accent);color:var(--accent-ink);font-weight:800;padding:9px 14px;border-radius:8px;text-decoration:none;font-size:14px;border:0;cursor:pointer;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--line)}
.vipbadge{color:var(--warn);font-weight:800;font-size:14px}

.banner{background:var(--card);border:1px solid var(--warn);border-radius:12px;padding:12px;margin:14px 0;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.stats{display:flex;gap:10px;margin:18px 0 6px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.num{font-size:26px;font-weight:800}
.lbl{font-size:12px;color:var(--muted)}
.g{color:var(--accent)}.r{color:var(--bad)}.y{color:var(--warn)}
.note{font-size:12px;color:var(--muted);text-align:center;margin:4px 0 0}

/* pick cards */
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:14px;margin:12px 0;animation:up .35s ease both;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-2px)}
.card.good{border-left-color:var(--warn)}
.card.weak{border-left-color:var(--orange)}
.card.won{border-color:var(--won-line);background:var(--won-bg)}
.card.lost{border-color:var(--lost-line);background:var(--lost-bg)}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.match{font-weight:600}
.pill{padding:3px 8px;border-radius:6px;font-size:12px;font-weight:800;white-space:nowrap;color:var(--accent-ink);background:var(--accent)}
.pill.good{background:var(--warn)}.pill.weak{background:var(--orange)}
.pick{margin:10px 0 8px;font-size:18px;font-weight:800;color:var(--accent)}
.pick.lock{color:var(--muted);font-size:16px}
.bar2{height:6px;background:var(--line);border-radius:6px;overflow:hidden}
.fill{height:100%;background:var(--accent)}
.meta{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--muted)}
.posted{margin-top:6px;font-size:12px;color:var(--muted)}
.sec{margin:24px 0 4px;font-size:13px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.more{display:block;text-align:center;margin:14px 0;font-weight:600}
.empty{text-align:center;color:var(--muted);padding:24px 0}

/* footer */
.foot{max-width:680px;margin:32px auto 0;padding:20px 16px 90px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:12px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;margin-bottom:12px}
.foot a{color:var(--text);text-decoration:none;font-size:13px;font-weight:600}
.foot a:hover{color:var(--accent);text-decoration:underline}
.age{display:inline-block;border:1px solid var(--muted);border-radius:6px;padding:1px 6px;font-weight:800;margin-right:6px}

/* 404 */
.nf{text-align:center;padding:56px 16px}
.nf .code{font-size:72px;font-weight:800;color:var(--accent);line-height:1}
.nf p{color:var(--muted);max-width:420px;margin:12px auto 20px}
.nf .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* back to top and cookie banner */
#toTop{position:fixed;right:16px;bottom:16px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;background:var(--card)}
#toTop.show{opacity:1;pointer-events:auto}
#cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;max-width:560px;margin:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 8px 30px rgba(0,0,0,.35)}
#cookie[hidden]{display:none}
#cookie p{margin:0 0 10px;font-size:14px}
#cookie .row{display:flex;gap:8px;flex-wrap:wrap}
body.has-cookie #toTop{bottom:150px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
     }
.vipbadge{white-space:nowrap}
@media (max-width:640px){
  .hwrap{gap:8px;padding:8px 12px}
  .hright{gap:6px}
  .hright .btn{padding:7px 10px;font-size:13px}
}
.vipline{background:var(--card);border:1px solid var(--warn);border-radius:12px;padding:10px 12px;font-size:14px;margin:10px 0}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin:14px 0;white-space:pre-wrap;word-break:break-word;line-height:1.7}
.top>div:last-child{white-space:nowrap}