:root{
  --bg:#0f1118; --panel:#181b25; --panel-2:#222634; --line:#2b3040;
  --ink:#eef1f7; --muted:#9aa3b8; --accent:#f0b429; --accent-ink:#2a1a02;
  --evo:#c06cff; --good:#5fd08a; --warn:#ffb454; --blue:#6ea8ff;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fa; --panel:#ffffff; --panel-2:#eef1f7; --line:#dde2ec;
    --ink:#161922; --muted:#59627a; --accent:#c98a00; --accent-ink:#fff;
    --warn:#b86200; --blue:#2f6fd0; color-scheme: light;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%}
.app{max-width:720px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) calc(env(safe-area-inset-right) + 16px)
          calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 16px)}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
h1{font-size:26px;margin:0;letter-spacing:-.02em}
.muted{color:var(--muted);margin:2px 0 0;font-size:14px}
.note{font-size:13px;margin:6px 2px 0}
.center{text-align:center}
.pill{background:var(--panel-2);color:var(--warn);border:1px solid var(--line);
  padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}

.seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:3px;gap:3px;margin-top:16px}
.seg button{flex:1;min-height:40px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font:600 14px/1.2 inherit;padding:6px 4px;cursor:pointer}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.seg.small{margin-top:10px}
.seg.small button{font-size:13px;min-height:36px}

.date{display:flex;align-items:center;gap:10px;margin-top:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 14px}
.date span{font-size:13px;color:var(--muted);font-weight:600}
.date select{flex:1;min-height:40px;border:0;background:transparent;color:var(--ink);
  font:600 15px inherit;padding:0 8px;appearance:none;-webkit-appearance:none;
  text-align:right;text-align-last:right}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat .v{font-size:21px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

.deck{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin-top:14px;
  overflow:hidden}
.deck-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.deck-head .t{font-weight:700;font-size:15px;line-height:1.25}
.deck-head .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.rating{text-align:right;flex-shrink:0}
.rating .n{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.rating .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.new{display:inline-block;background:var(--blue);color:#fff;font-size:10px;font-weight:800;
  padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:2px;letter-spacing:.04em}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 14px 6px}
.card{position:relative;text-align:center}
.card img{width:100%;aspect-ratio:302/363;object-fit:cover;border-radius:8px;display:block;
  background:var(--panel-2)}
.card .n{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.2;word-break:break-word}
.badge{position:absolute;font-weight:800;border:2px solid var(--panel)}
.badge.e{top:-4px;left:-4px;width:20px;height:20px;border-radius:50%;background:var(--evo);
  color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center}
.badge.evo,.badge.hero{top:-4px;right:-4px;font-size:8.5px;padding:2px 4px;border-radius:5px}
.badge.evo{background:var(--good);color:#06240f}
.badge.hero{background:var(--accent);color:#2a1a02}
.badge.lv{bottom:19px;right:1px;background:#b3421c;color:#fff;font-size:10px;
  padding:1px 5px;border-radius:5px;border-width:1px}

.deck-foot{padding:4px 14px 14px;font-size:13px;color:var(--muted)}
.deck-foot .warn{color:var(--warn);margin-top:4px}
.copy{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;
  border-radius:11px;background:var(--panel-2);color:var(--ink);font-weight:700;
  text-decoration:none;border:1px solid var(--line)}
.copy:active{opacity:.7}

footer{margin-top:26px;font-size:12px;text-align:center}