:root{
  --bg:#0f1720; --card:#182432; --card2:#1f2f40; --line:#2b3d52;
  --text:#e8eef5; --muted:#9fb1c4; --accent:#3ea6ff; --good:#37d67a; --warn:#ffb020;
  --bar:#37506b; --barhi:#37d67a; --radius:14px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;padding:24px 16px 60px}
.wrap{max-width:820px;margin:0 auto}
h1{font-size:1.55rem;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 22px;font-size:.95rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:5px}
input,select{width:100%;background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:.98rem;font-family:var(--font)}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.chip{background:var(--card2);border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:.85rem;cursor:pointer;color:var(--text)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#04121f;font-weight:600}
button.go{margin-top:16px;background:var(--accent);color:#04121f;border:none;border-radius:10px;padding:12px 20px;font-size:1rem;font-weight:700;cursor:pointer;width:100%}
button.go:hover{filter:brightness(1.07)}
.result{display:none}
.headline{font-size:1.05rem;color:var(--muted);margin:0 0 4px}
.big{font-size:2.1rem;font-weight:800;color:var(--good);margin:0}
.win{font-size:1.15rem;margin:8px 0 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
@media(max-width:560px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat .k{font-size:.78rem;color:var(--muted)} .stat .v{font-size:1.25rem;font-weight:700;margin-top:3px}
.save .v{color:var(--good)}
.chartwrap{margin-top:6px;overflow-x:auto}
svg{display:block}
.note{color:var(--muted);font-size:.8rem;margin-top:10px}
.src{font-size:.78rem;margin-top:4px}
.src.live{color:var(--good)} .src.sample{color:var(--warn)}
.legend{display:flex;gap:16px;font-size:.78rem;color:var(--muted);margin:8px 0 0}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}
article h2{font-size:1.2rem;margin:22px 0 8px}
article p{color:#cdd8e5;font-size:.95rem;margin:0 0 12px}
article ul{color:#cdd8e5;font-size:.95rem;margin:0 0 12px;padding-left:20px}
article li{margin-bottom:5px}
details{border-top:1px solid var(--line);padding:12px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:1rem;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";color:var(--accent);margin-right:8px;font-weight:700}
details[open] summary::before{content:"－"}
details p{margin:10px 0 2px}
.related a{display:inline-block;margin:0 10px 8px 0;padding:7px 13px;background:var(--card2);border:1px solid var(--line);border-radius:9px;color:var(--text);text-decoration:none;font-size:.9rem}
.related a:hover{border-color:var(--accent)}
nav.top{font-size:.85rem;margin-bottom:14px}
nav.top a{color:var(--muted);text-decoration:none} nav.top a:hover{color:var(--accent)}
footer{color:var(--muted);font-size:.78rem;text-align:center;margin-top:30px;line-height:1.7}
a{color:var(--accent)}
.cta{display:inline-block;margin-top:6px;background:var(--accent);color:#04121f;font-weight:700;text-decoration:none;padding:10px 16px;border-radius:10px}