:root{--bg:#1e1e2e;--surface:#313244;--text:#cdd6f4;--subtext:#a6adc8;--muted:#6c7086;--accent:#cba6f7;--green:#a6e3a1;--yellow:#f9e2af;--blue:#89b4fa;--red:#f38ba8;--teal:#94e2d5;--peach:#fab387}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:"Microsoft YaHei","PingFang SC",sans-serif;line-height:1.6}
.container{max-width:820px;margin:0 auto;padding:24px 20px 60px}
h1{text-align:center;color:var(--accent);font-size:1.8em;margin-bottom:4px}
.subtitle{text-align:center;color:var(--muted);font-size:.85em;margin-bottom:24px}
.input-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.input-row label{font-size:.95em;font-weight:bold}
.input-row input[type="number"]{width:80px;padding:8px 10px;border:1px solid var(--muted);border-radius:6px;background:var(--surface);color:var(--text);font-size:1em;text-align:center}
.input-row input:focus{outline:none;border-color:var(--accent)}
.input-row span{color:var(--subtext);font-size:.9em}
.hint{color:var(--muted)!important;font-size:.8em!important}
.btn-calc{padding:8px 20px;border:none;border-radius:6px;background:var(--accent);color:var(--bg);font-size:.95em;font-weight:bold;cursor:pointer}
.btn-calc:hover{opacity:.85}
.quick-btns{margin-left:auto;display:flex;gap:4px}
.quick-btns button{padding:4px 10px;border:none;border-radius:4px;background:var(--surface);color:var(--text);font-size:.75em;cursor:pointer}
.quick-btns button:hover{background:var(--accent);color:var(--bg)}
hr{border:none;border-top:1px solid var(--surface);margin:16px 0}
.card{background:var(--surface);border-radius:10px;padding:18px 20px;margin-bottom:14px}
.card.highlight{border:1px solid var(--accent)}
.card h2{font-size:1.05em;color:var(--blue);margin-bottom:12px}
.spinner{width:36px;height:36px;border:3px solid var(--surface);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.info-line{font-size:.95em;margin-bottom:4px;font-weight:bold}
.info-detail{font-size:.82em;color:var(--subtext)}
.summary-item{font-size:.95em;font-weight:bold;padding:4px 0}
.player-row{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:8px}
.player-stat{font-size:1.2em;font-weight:bold}
.player-detail{font-size:.82em;color:var(--subtext);margin-top:6px}
.bar-green{color:#6ecf6e}.bar-high{color:var(--green)}.bar-mid{color:var(--yellow)}.bar-low{color:var(--peach)}.bar-red{color:var(--red)}.bar-zero{color:var(--muted)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9em}
th{color:var(--blue);font-weight:bold;padding:8px 6px;text-align:center;border-bottom:1px solid var(--muted)}
td{padding:7px 6px;text-align:center;border-bottom:1px solid rgba(108,112,134,.2)}
tr:hover td{background:rgba(203,166,247,.06)}
.prob-100{color:#6ecf6e;font-weight:bold}.prob-high{color:var(--green);font-weight:bold}.prob-mid{color:var(--yellow)}.prob-zero{color:var(--muted)}
#chart-canvas{display:block;margin:0 auto}
#notes-content p{font-size:.82em;color:var(--subtext);margin-bottom:3px}
@media(max-width:600px){.container{padding:12px 10px}h1{font-size:1.4em}.input-row{gap:4px}.quick-btns{margin-left:0;margin-top:8px}.player-row{gap:12px}.player-stat{font-size:1em}}