:root{--bg:oklch(1 0 0);--surface:oklch(.975 .003 160);--surface-strong:oklch(.95 .008 160);--ink:oklch(.22 .018 160);--muted:oklch(.49 .018 160);--primary:oklch(.40 .087 160);--primary-soft:oklch(.94 .025 160);--accent:oklch(.73 .15 75);--accent-soft:oklch(.96 .035 75);--danger:oklch(.55 .19 25);--danger-soft:oklch(.96 .025 25);--line:oklch(.90 .006 160);--white:oklch(1 0 0)}
*{box-sizing:border-box}html{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-width:320px;background:linear-gradient(180deg,var(--surface) 0,var(--white) 260px)}button{font:inherit}button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.shell{width:min(1240px,calc(100% - 40px));margin-inline:auto}.topbar{background:oklch(1 0 0 / .94);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;backdrop-filter:blur(10px)}.topbar-inner{min-height:77px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand,.top-actions,.connection{display:flex;align-items:center}.brand{gap:12px}.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--primary);color:var(--white);display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:-.07em}.eyebrow,.overline,.section-index{margin:0 0 4px;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.12em}.brand h1{margin:0;font-size:19px;letter-spacing:-.03em;line-height:1.2}.title-divider{color:var(--line);padding-inline:7px}.top-actions{gap:18px}.connection{gap:8px;color:var(--muted);font-size:13px;font-weight:650;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.connection.online .status-dot{background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}.connection.error .status-dot{background:var(--danger);box-shadow:0 0 0 4px var(--danger-soft)}.button{height:36px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;transition:background 150ms,border-color 150ms}.button:hover{background:var(--surface);border-color:var(--primary)}.button:disabled{opacity:.55;cursor:wait}main{padding-top:25px;padding-bottom:50px}.notice{padding:12px 15px;margin-bottom:18px;border:1px solid oklch(.84 .065 25);border-radius:9px;background:var(--danger-soft);color:var(--danger);font-size:13px;line-height:1.5}.intro-row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:16px}.intro-text,.last-sync{margin:0;color:var(--muted);font-size:13px;line-height:1.5}.last-sync{white-space:nowrap}.hero-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(310px,1fr);gap:16px}.panel{border:1px solid var(--line);border-radius:13px;background:var(--white);box-shadow:0 4px 10px oklch(.22 .018 160 / .04)}.prediction-card,.score-card{padding:22px 24px}.card-head{display:flex;align-items:start;justify-content:space-between;gap:12px}.card-head h2,.section-head h2{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.025em}.badge,.subtle-chip{border-radius:999px;padding:5px 10px;font-size:11px;font-weight:760;white-space:nowrap}.badge.pending{color:oklch(.43 .095 75);background:var(--accent-soft);border:1px solid oklch(.85 .07 75)}.subtle-chip{color:var(--muted);background:var(--surface)}.prediction-body{min-height:160px;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:18px 0}.prediction-body.flash{animation:flash 600ms ease-out}.room-spot{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.big-room{font-size:74px;line-height:1;font-weight:800;letter-spacing:-.07em;color:var(--primary);font-variant-numeric:tabular-nums}.room-unit{font-size:16px;font-weight:700}.prediction-facts{min-width:190px;display:grid;gap:11px}.prediction-facts>div{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:8px}.prediction-facts span{font-size:12px;color:var(--muted);white-space:nowrap}.prediction-facts strong{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap}.room-map-wrap{border-top:1px solid var(--line);padding-top:15px}.room-map-head,.goal-head{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;font-weight:700}.room-map-note{font-weight:400;color:var(--muted)}.room-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:11px}.room-cell{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:9px 3px;text-align:center;font-size:14px;font-weight:750;color:var(--muted);font-variant-numeric:tabular-nums}.room-cell.selected{background:var(--primary-soft);border-color:var(--primary);color:var(--primary);box-shadow:inset 0 -3px var(--primary)}.card-footnote,.score-footnote,.panel-note{color:var(--muted);font-size:11px;line-height:1.6}.card-footnote{margin:14px 0 0}.rate-block{padding:21px 0 15px;border-bottom:1px solid var(--line)}.rate-label{font-size:12px;color:var(--muted)}.rate-line{display:flex;align-items:baseline;gap:3px;color:var(--primary)}.rate-line strong{font-size:53px;line-height:1.14;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.rate-line span{font-size:22px;font-weight:750}.rate-block>span:last-child{color:var(--muted);font-size:11px}.score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px;padding:18px 0}.score-grid>div{display:grid;gap:3px}.score-grid span{font-size:12px;color:var(--muted)}.score-grid strong{font-size:20px;font-variant-numeric:tabular-nums}.danger-text{color:var(--danger)}.goal{padding-top:6px}.goal-head{color:var(--muted)}.goal-head strong{color:var(--ink);font-variant-numeric:tabular-nums}.progress-track{height:7px;background:var(--surface-strong);border-radius:100px;overflow:hidden;margin-top:9px}.progress-fill{height:100%;width:0;background:var(--primary);border-radius:100px;transition:width 180ms}.score-footnote{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0 0}.section-block{margin-top:31px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:14px}.section-head>p{margin:0;color:var(--muted);font-size:12px}.sequence-panel{padding:19px 21px}.sequence{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));gap:5px}.sequence-cell{height:23px;border-radius:4px;background:var(--surface-strong);border:1px solid var(--line)}.sequence-cell.win{background:var(--primary-soft);border-color:oklch(.82 .04 160)}.sequence-cell.loss{background:var(--danger);border-color:var(--danger)}.sequence-cell.missed{background:var(--white);border:1px dashed var(--muted)}.sequence-cell.empty{opacity:.5}.legend{display:flex;flex-wrap:wrap;gap:17px;margin-top:13px;color:var(--muted);font-size:11px}.legend span{display:flex;align-items:center;gap:6px}.legend-dot{width:10px;height:10px;border-radius:2px}.legend-dot.win{background:var(--primary-soft);border:1px solid var(--primary)}.legend-dot.loss{background:var(--danger)}.legend-dot.missed{border:1px dashed var(--muted)}.detail-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.85fr);gap:16px;margin-top:31px}.history-panel,.distribution-panel{padding:20px 22px}.small-note{font-size:11px;color:var(--muted);white-space:nowrap}.table-wrap{overflow-x:auto;margin-top:16px}table{width:100%;border-collapse:collapse;min-width:550px;font-size:12px}th{text-align:left;color:var(--muted);font-size:11px;font-weight:700;padding:9px 8px;border-bottom:1px solid var(--line)}td{padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}tr:last-child td{border-bottom:0}.empty{padding:24px 8px;text-align:center;color:var(--muted)}.result-pill{display:inline-block;min-width:49px;text-align:center;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:750}.result-pill.win{background:var(--primary-soft);color:var(--primary)}.result-pill.loss{background:var(--danger-soft);color:var(--danger)}.result-pill.missed{background:var(--surface);color:var(--muted)}.distribution{display:grid;gap:11px;margin-top:22px}.bar-row{display:grid;grid-template-columns:42px 1fr 23px;gap:9px;align-items:center;font-size:12px}.bar-row span{color:var(--muted)}.bar-row strong{text-align:right;font-variant-numeric:tabular-nums}.bar-track{height:7px;background:var(--surface-strong);border-radius:99px;overflow:hidden}.bar-fill{height:100%;width:0;background:var(--primary);border-radius:99px;transition:width 180ms}.panel-note{margin:20px 0 0}footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:17px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}footer code{font:inherit;color:var(--ink);font-variant-numeric:tabular-nums}.skeleton{color:var(--muted);animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.4}}@keyframes flash{0%{background:var(--primary-soft)}100%{background:transparent}}
.version-label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;white-space:nowrap}.version-label select{height:34px;border:1px solid var(--line);border-radius:8px;padding:0 7px;background:var(--white);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}.version-label select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:900px){.hero-grid,.detail-grid{grid-template-columns:minmax(0,1fr)}.history-panel{min-width:0}.room-grid{grid-template-columns:repeat(5,1fr)}.sequence{grid-template-columns:repeat(20,minmax(0,1fr))}.sequence-cell{height:20px}}
@media(max-width:600px){.shell{width:calc(100% - 24px)}.topbar-inner{min-height:66px}.brand-mark{width:32px;height:32px}.brand h1{font-size:16px}.eyebrow{font-size:9px}.top-actions{gap:7px}.connection{font-size:11px}.button{padding-inline:9px;font-size:11px}.intro-row,.section-head{align-items:start;display:block}.last-sync{margin-top:8px}.section-head>p{margin-top:6px}.prediction-card,.score-card,.history-panel,.distribution-panel{padding:17px}.prediction-body{gap:12px;min-height:145px}.big-room{font-size:60px}.room-unit{font-size:12px}.prediction-facts{min-width:0;gap:8px}.prediction-facts>div{display:grid;gap:2px}.prediction-facts span{font-size:10px}.prediction-facts strong{font-size:12px}.room-grid{gap:6px}.room-cell{padding:9px 2px}.sequence-panel{padding:15px}.sequence{gap:3px}.sequence-cell{height:17px}}
@media(max-width:420px){body{min-width:0}.topbar-inner{flex-wrap:wrap;gap:7px;padding-block:8px}.top-actions{width:100%;justify-content:space-between}.button{height:30px;white-space:nowrap}.version-label{font-size:11px}.version-label select{height:30px;padding-inline:4px}.brand h1{white-space:nowrap}.intro-text{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}