:root{--navy:#14213d;--blue:#2563eb;--blue-soft:#dbeafe;--gold:#f4b942;--ink:#172033;--muted:#687386;--line:#e2e8f0;--paper:#fff;--canvas:#f4f6f9;--afc:#ef4444;--nfc:#2563eb}
*{box-sizing:border-box}
html,body{height:auto;min-height:100%;margin:0;overflow-y:auto}
body{background:var(--canvas);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.container{display:grid;grid-template-columns:clamp(180px,15vw,240px) 1fr;gap:5px;height:auto;min-height:100vh;padding:5px}
.left-section{background:#eaeaea;border-radius:12px;border-right:1px solid #d0d0d0;padding:12px}
.left-section>img{display:block;margin:0 auto 8px;max-height:120px;object-fit:contain}
.nav-title{color:#555;font-size:.9rem;margin:12px 4px 6px;text-align:center;text-transform:uppercase}
.nav-list{list-style:none;margin:0;padding:0}
.nav-list a{border-radius:10px;color:#111;display:block;font-size:.75rem;padding:4px 10px;text-decoration:none}
.nav-list a:hover,.nav-list a:focus,.nav-list a.active{background:rgba(37,99,235,.1);color:#1d4ed8}
.nav-group+.nav-group{border-top:1px solid rgba(0,0,0,.08);margin-top:10px;padding-top:10px}
.right-section{background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.08);min-width:0;overflow:visible}
.page-header{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;margin:0 20px;padding:19px 0 13px}
.page-header h1{font-size:22px;margin:0}
.back-link{color:#2563eb;font-size:.76rem;font-weight:600;text-decoration:none}
.back-link:hover{text-decoration:underline}
.season-range{background:white;border-bottom:1px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:700;padding:12px clamp(24px,4vw,60px)}
.filters{align-items:end;background:white;border-bottom:1px solid var(--line);display:flex;gap:14px;padding:16px clamp(24px,4vw,60px)}
.filter{display:flex;flex-direction:column;gap:5px}
.filter label{color:var(--muted);font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.filter select{background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;color:var(--ink);font:inherit;font-size:.8rem;padding:8px 30px 8px 10px}
.filters button{background:#2563eb;border:0;border-radius:8px;color:#fff;cursor:pointer;font-size:.75rem;font-weight:700;padding:9px 15px}
.filters button:hover,.filters button:focus{background:#1d4ed8}
.content{padding:28px clamp(20px,3.2vw,46px) 50px}
.summary-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);margin-bottom:26px}
.summary-card{background:#f9fafb;border:1px solid var(--line);border-radius:9px;padding:15px 16px}
.summary-card span{color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.summary-card strong{display:block;font-size:1.8rem;letter-spacing:-.04em;margin:6px 0 2px}
.summary-card.conference-card strong{font-size:1.55rem;white-space:nowrap}
.summary-card small{color:var(--muted);font-size:.7rem}
.dashboard{display:grid;gap:18px;grid-template-columns:1.08fr .92fr}
.panel{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:20px}
.panel.wide{grid-column:1/-1}
.panel-heading{border-bottom:1px solid #f1f5f9;margin-bottom:18px;padding-bottom:10px}
.panel-heading h2{font-size:.9rem;margin:0}
.seed-chart{align-items:end;border-bottom:1px solid var(--line);display:grid;gap:12px;grid-template-columns:repeat(6,1fr);height:235px;padding:20px 8px 0}
.seed-col{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:end;position:relative}
.seed-col::after{background:#172033;border-radius:6px;color:#fff;content:attr(data-tooltip);font-size:.65rem;font-weight:600;left:50%;line-height:1.35;max-width:190px;opacity:0;padding:7px 9px;pointer-events:none;position:absolute;text-align:center;top:0;transform:translate(-50%,-5px);transition:opacity .12s ease,transform .12s ease;width:max-content;z-index:5}
.seed-col:hover::after,.seed-col:focus::after{opacity:1;transform:translate(-50%,0)}
.seed-col:focus{outline:none}
.seed-value{font-size:.72rem;font-weight:850;margin-bottom:5px}
.seed-bar{background:linear-gradient(#3b82f6,#1d4ed8);border-radius:7px 7px 0 0;min-height:8px;width:min(54px,80%)}
.seed-col:nth-child(n+4) .seed-bar{background:linear-gradient(#93c5fd,#60a5fa)}
.seed-label{color:var(--muted);font-size:.68rem;font-weight:750;padding-top:8px}
.legend{display:flex;gap:15px;margin-top:13px}.legend span{align-items:center;color:var(--muted);display:flex;font-size:.68rem;gap:5px}.dot{border-radius:50%;display:inline-block;height:8px;width:8px}.dot.afc{background:var(--afc)}.dot.nfc{background:var(--nfc)}
.era-row{align-items:center;display:grid;gap:10px;grid-template-columns:76px 1fr 52px;margin:16px 0}
.era-label{font-size:.7rem;font-weight:750}.stack{border-radius:7px;display:flex;height:30px;overflow:hidden}.stack span{align-items:center;color:white;display:flex;font-size:.63rem;font-weight:850;justify-content:center}.stack .afc{background:var(--afc)}.stack .nfc{background:var(--nfc)}.era-note{color:var(--muted);font-size:.63rem;text-align:right}
.heatmap{display:grid;gap:5px;overflow-x:auto}
.heatmap>div{align-items:center;border-radius:6px;display:flex;font-size:.66rem;justify-content:center;min-height:35px;padding:5px;text-align:center}
.heat-head{color:var(--muted);font-size:.6rem!important;font-weight:800;text-transform:uppercase}.division{justify-content:flex-start!important;font-weight:750}.heat-1{background:#eff6ff}.heat-2{background:#bfdbfe}.heat-3{background:#60a5fa;color:#082f75}.heat-4{background:#2563eb;color:#fff}.heat-0{background:#f8fafc;color:#b0bac8}
.profile-grid{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.profile-item h3{font-size:.76rem;margin:0 0 10px}.compare-line{align-items:center;display:grid;gap:8px;grid-template-columns:86px 1fr 40px;margin:8px 0}.compare-line span{color:var(--muted);font-size:.65rem}.track{background:#edf1f6;border-radius:999px;height:9px;overflow:hidden}.track i{background:var(--blue);border-radius:inherit;display:block;height:100%}.compare-line:nth-child(3) .track i{background:#aab5c4}.compare-line strong{font-size:.67rem;text-align:right}.profile-callout{align-items:center;background:#f8fafc;border-left:3px solid #94a3b8;display:flex;gap:14px;grid-column:1/-1;padding:13px 15px}.profile-callout strong{font-size:1.5rem}.profile-callout span{color:var(--muted);font-size:.7rem;line-height:1.45}
.prototype-note{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;color:#7c5b14;font-size:.72rem;line-height:1.5;margin-top:18px;padding:11px 14px}
@media(max-width:980px){.dashboard{grid-template-columns:1fr}.panel.wide{grid-column:auto}.summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.container{display:block;padding:0}.left-section{border-radius:0}.left-section>img{height:72px}.nav-group:not(:last-child){display:none}.right-section{border-radius:0}.page-header,.filters{align-items:flex-start;flex-direction:column;gap:10px}.summary-grid,.profile-grid{grid-template-columns:1fr}.heatmap{grid-template-columns:85px repeat(4,1fr)}.heatmap>div{font-size:.58rem}.seed-chart{gap:5px}.profile-callout{grid-column:auto}}