:root{--ink:#20163d;--purple:#54259a;--deep:#2e1260;--gold:#d3a51d;--line:#ddd6ed;--muted:#6b647b;--bg:#f4f2f8;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
.shell{max-width:1300px;margin:auto;padding:28px}
h1,h2,p{margin:0}
header{display:flex;align-items:center;gap:16px;padding:8px 0 22px;border-bottom:3px solid var(--purple);flex-wrap:wrap}
.brand-mark{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(37,19,73,.08)}
h1{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.04em;color:var(--deep)}
.eyebrow{margin-bottom:4px;color:var(--purple);font-size:10px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
.subtitle{color:var(--muted);font-size:12px;margin-top:3px;max-width:520px}
#pitcher-select{margin-left:auto;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font:800 13px inherit;background:#fff;color:var(--ink)}
body.portal-player-mode #pitcher-select{display:none}
.brand-link{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.brand-link:hover .brand-mark img{filter:brightness(1.08)}
.brand-mark img{width:60px;height:60px;object-fit:contain}
.panel{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 18px rgba(37,19,73,.06);padding:20px;margin-top:22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pitcher-head{display:flex;align-items:center;gap:12px}
.pitcher-head img{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#eee;border:2px solid var(--line)}
.pitcher-head h3{margin:0;font-size:19px;color:var(--deep);font-weight:900}
.pitcher-head p{margin:2px 0 0;color:var(--muted);font-size:12px}
.split-toggle,.mode-toggle{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#faf9fd}
.split-toggle button,.mode-toggle button{border:0;border-radius:7px;background:transparent;color:#564d68;padding:9px 14px;font:800 11px inherit;cursor:pointer}
.split-toggle button.active,.mode-toggle button.active{background:var(--deep);color:#fff}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 12px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid var(--line);font-weight:700}
tr.all-row td{font-weight:900;border-top:2px solid var(--line)}
.pitch-cell{display:flex;align-items:center;gap:8px}
.pitch-dot{width:9px;height:9px;border-radius:50%;flex:none}
.note{color:var(--muted);font-size:11px;margin-top:10px;line-height:1.4}
.heatmap-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:26px;margin-bottom:12px}
.heatmap-head h2{font-size:16px;color:var(--deep)}
#heatmap-img{width:100%;border:1px solid var(--line);border-radius:12px;display:block;min-height:120px;background:#fafafa}
.empty{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:760px){.shell{padding:16px}header{align-items:flex-start}#pitcher-select{margin-left:0;width:100%}.panel-head{flex-direction:column;align-items:flex-start}}