/* =====================================================================
   RL ANALYSIS — DATA COACH VISUAL / UX REDESIGN
   Frontend-only layer. Existing PHP, DB, API and analytics JS stay intact.
   ===================================================================== */
:root{
  --bg:#060a0e;
  --bg-deep:#04070a;
  --surface:#0b1218;
  --surface-2:#101923;
  --surface-3:#14202b;
  --surface-glass:rgba(9,16,23,.78);
  --border:rgba(170,196,220,.12);
  --border-strong:rgba(200,169,107,.28);
  --hairline-strong:rgba(231,225,213,.18);
  --text:#eef2f4;
  --text-muted:#8795a3;
  --blue:#8fb7d8;
  --blue-bright:#b7d8ef;
  --gold:#d2ae6d;
  --gold-bright:#f1c87e;
  --green:#58d7ad;
  --green-soft:rgba(88,215,173,.13);
  --loss:#e58b8b;
  --boost-track:#17222c;
  --radius:14px;
  --radius-lg:20px;
  --sidebar:246px;
  --ease-premium:cubic-bezier(.16,1,.3,1);
}

html{background:var(--bg-deep);}
body{
  background:
    radial-gradient(1000px 580px at 82% -10%, rgba(108,151,191,.13), transparent 58%),
    radial-gradient(760px 500px at 7% 35%, rgba(207,163,82,.065), transparent 58%),
    linear-gradient(180deg,#05090d 0%,#071017 46%,#050a0e 100%);
  color:var(--text);
  overflow-x:hidden;
}
body::before{opacity:.018;}

/* The old shell is retained for compatibility, but visually becomes the app root. */
.wrap.redesigned-app{
  max-width:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:var(--sidebar) minmax(0,1fr);
  min-height:100vh;
  align-items:stretch;
}
.app-main-column{
  min-width:0;
  display:flex;
  flex-direction:column;
  background:transparent;
}
.topbar{
  position:sticky;top:0;z-index:120;
  min-height:68px;padding:0 26px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(5,11,16,.88);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:20px;min-width:0;}
.topbar-right{margin-left:auto;}
.brand-lockup{display:flex;align-items:center;gap:10px;min-width:205px;}
.brand-mark-wrap{width:34px;height:34px;position:relative;display:grid;place-items:center;flex:0 0 auto;}
.brand-logo-img{width:32px;height:32px;object-fit:contain;border-radius:9px;filter:drop-shadow(0 0 12px rgba(210,174,109,.16));}
.brand-mark-fallback{display:none;position:absolute;inset:0;border:1px solid var(--border-strong);border-radius:10px;place-items:center;color:var(--gold);font-weight:800;font-size:12px;}
.brand-copy h1{font-size:16px;line-height:1;margin:0;font-weight:700;letter-spacing:.01em;}
.brand-copy h1 .accent-word{background:linear-gradient(90deg,var(--blue-bright),var(--gold-bright));-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand-copy #heroTagline{display:block;margin-top:4px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#73808c;white-space:nowrap;max-width:210px;overflow:hidden;text-overflow:ellipsis;}
.global-search{width:min(380px,34vw);height:38px;display:flex;align-items:center;gap:9px;padding:0 11px;border:1px solid var(--border);border-radius:10px;background:rgba(11,19,27,.82);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);position:relative;}
.global-search:focus-within{border-color:rgba(143,183,216,.35);box-shadow:0 0 0 3px rgba(143,183,216,.06);}
.search-icon{font-size:20px;line-height:1;color:#8e9aa5;transform:rotate(-20deg);}
.global-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:500 12px Inter,sans-serif;}
.global-search input::placeholder{color:#66737f;}
.global-search kbd{font:500 9px JetBrains Mono,monospace;color:#687682;border:1px solid var(--border);background:#0b131b;border-radius:5px;padding:3px 5px;white-space:nowrap;}
.search-results{position:absolute;left:0;right:0;top:44px;background:#0b141c;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);display:none;overflow:hidden;z-index:300;}
.search-results.open{display:block;}
.search-result{display:flex;align-items:center;gap:10px;padding:10px 12px;color:#dbe3e9;font-size:12px;cursor:pointer;}
.search-result:hover{background:rgba(143,183,216,.08);}
.search-result small{margin-left:auto;color:#66737f;}
.icon-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;background:#0b131b;color:#b8c4cc;cursor:pointer;}
.topbar-scoreline{display:flex;align-items:center;gap:17px;min-width:300px;}
.topbar-scoreline .score-item{text-align:left;display:grid;gap:2px;}
.topbar-scoreline .score-item .num{font-size:15px;line-height:1;color:#eef2f4;background:none;-webkit-text-fill-color:initial;}
.topbar-scoreline .score-item .lbl{font-size:8px;letter-spacing:.08em;color:#6d7b87;white-space:nowrap;}
.topbar-user{display:flex;align-items:center;gap:9px;min-width:128px;}
.user-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#3a4a57,#17232e);border:1px solid rgba(210,174,109,.35);font-size:11px;font-weight:700;color:#f4e7cf;}
.user-copy{display:grid;line-height:1.05;gap:3px;}
.user-copy strong{font-size:11px;color:#e9edf0;}
.user-copy span{font-size:8px;color:#697783;}
.user-chevron{margin-left:auto;color:#6e7b85;font-size:15px;}
.mobile-menu-btn{display:none;width:36px;height:36px;border:1px solid var(--border);background:#0b131b;color:#d9e0e5;border-radius:10px;cursor:pointer;}

.dashboard-hero{
  position:relative;min-height:372px;margin:18px 26px 16px;padding:44px 42px;
  border:1px solid rgba(170,196,220,.14);border-radius:22px;overflow:hidden;
  background:
    radial-gradient(600px 300px at 72% 50%,rgba(202,167,94,.12),transparent 65%),
    radial-gradient(420px 260px at 88% 12%,rgba(115,163,205,.15),transparent 62%),
    linear-gradient(115deg,rgba(11,20,28,.98) 0%,rgba(7,14,20,.92) 52%,rgba(10,18,25,.82) 100%);
  box-shadow:0 30px 90px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035);
}
.dashboard-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 72% 35%,rgba(255,255,255,.85) 0 1px,transparent 1.5px),radial-gradient(circle at 80% 67%,rgba(255,255,255,.5) 0 1px,transparent 1.5px),radial-gradient(circle at 61% 78%,rgba(255,255,255,.4) 0 1px,transparent 1.5px);background-size:130px 130px,180px 180px,230px 230px;opacity:.25;}
.dashboard-hero::after{content:"";position:absolute;width:70%;height:180%;right:-20%;top:-45%;border:1px solid rgba(210,174,109,.23);border-radius:50%;transform:rotate(-21deg);box-shadow:0 0 0 32px rgba(210,174,109,.015),0 0 0 64px rgba(210,174,109,.012);pointer-events:none;}
.dashboard-hero-copy{position:relative;z-index:4;width:min(54%,620px);}
.eyebrow{display:block;color:var(--gold);font:700 9px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-bottom:13px;}
.dashboard-hero h2{margin:0;font:700 clamp(38px,4vw,60px)/.97 'Space Grotesk',sans-serif;letter-spacing:-.045em;color:#edf1f3;}
.dashboard-hero h2 span{color:var(--gold-bright);}
.dashboard-hero p{max-width:560px;margin:18px 0 23px;color:#9eabb5;font-size:13px;line-height:1.65;}
.hero-actions{display:flex;gap:10px;align-items:center;}
.hero-primary,.hero-secondary{height:40px;border-radius:999px;padding:0 20px;font:700 11px Inter,sans-serif;cursor:pointer;transition:transform .22s var(--ease-premium),box-shadow .22s var(--ease-premium);}
.hero-primary,.hero-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;}
.hero-primary{border:0;background:linear-gradient(90deg,#f1c779,#c99f58);color:#111;box-shadow:0 12px 30px rgba(210,174,109,.18);}
.hero-secondary{border:1px solid rgba(210,174,109,.45);background:rgba(9,15,21,.62);color:#e6e9eb;}
.hero-primary:hover,.hero-secondary:hover{transform:translateY(-2px);}
.hero-features{display:flex;gap:19px;flex-wrap:wrap;margin-top:28px;color:#7e8b96;font-size:9px;}
.hero-features span{display:flex;align-items:center;gap:6px;white-space:nowrap;}
.hero-features i{font-style:normal;color:var(--gold);font-size:12px;}
.dashboard-hero-visual{position:absolute;inset:0;z-index:2;overflow:hidden;}
.hero-glow{position:absolute;width:330px;height:330px;right:17%;top:10px;border-radius:50%;background:radial-gradient(circle,rgba(210,174,109,.15),rgba(104,146,184,.04) 45%,transparent 70%);filter:blur(2px);}
.hero-center-badge{position:absolute;right:28%;top:38%;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;align-content:center;background:radial-gradient(circle at 35% 30%,#233443,#0a1118 70%);border:1px solid rgba(210,174,109,.42);box-shadow:0 0 50px rgba(210,174,109,.12),inset 0 0 25px rgba(143,183,216,.05);transform:translate(50%,-50%);}
.hero-center-badge::before{content:"";position:absolute;inset:-9px;border:1px dashed rgba(143,183,216,.26);border-radius:50%;animation:heroSpin 18s linear infinite;}
.hero-center-badge span{font:800 27px 'Space Grotesk',sans-serif;color:#e9edf0;letter-spacing:.08em;}
.hero-center-badge small{font:700 7px Inter,sans-serif;color:var(--gold);letter-spacing:.19em;margin-top:-7px;}
.hero-orbit{position:absolute;border:1px solid rgba(143,183,216,.13);border-radius:50%;right:12%;top:7%;transform:rotate(-17deg);}
.orbit-a{width:440px;height:270px;}.orbit-b{width:560px;height:330px;right:4%;top:0;border-color:rgba(210,174,109,.1);}.orbit-c{width:680px;height:410px;right:-5%;top:-12%;border-color:rgba(143,183,216,.07);}
@keyframes heroSpin{to{transform:rotate(360deg)}}
.hero-floating-card{position:absolute;z-index:5;min-width:142px;padding:13px 14px;background:rgba(7,14,20,.86);border:1px solid rgba(143,183,216,.15);border-radius:12px;box-shadow:none;backdrop-filter:blur(12px);}
.hero-floating-card small{display:block;color:#6f7d88;font:700 7px Inter,sans-serif;letter-spacing:.11em;}
.hero-floating-card strong{display:block;color:#eef1f3;font:700 23px 'Space Grotesk',sans-serif;margin-top:5px;}
.hero-floating-card span{display:block;color:#71808b;font-size:8px;margin-top:2px;}
.hero-card-performance{right:6%;top:10%;}.hero-card-performance strong{color:var(--gold-bright);}.hero-card-form{right:4%;top:42%;}.hero-card-form strong{color:var(--green);}.hero-card-intelligence{right:6%;bottom:8%;}
.mini-ring{width:42px;height:42px;border-radius:50%;position:absolute;right:11px;top:27px;border:4px solid rgba(210,174,109,.16);border-top-color:var(--gold);border-right-color:var(--gold);transform:rotate(-35deg);}
.mini-bars{height:25px;display:flex;gap:3px;align-items:end;margin-top:7px;}.mini-bars i{display:block;width:8px;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,#5dd8b0,#1e6956);}.mini-bars i:nth-child(1){height:9px}.mini-bars i:nth-child(2){height:14px}.mini-bars i:nth-child(3){height:11px}.mini-bars i:nth-child(4){height:18px}.mini-bars i:nth-child(5){height:15px}.mini-bars i:nth-child(6){height:23px}
.hero-avatar-stack{position:absolute;right:39%;bottom:13%;display:flex;}.hero-avatar-stack img{width:35px;height:35px;border-radius:50%;object-fit:cover;border:2px solid #0a1118;margin-left:-8px;box-shadow:0 4px 18px rgba(0,0,0,.35);}

.executive-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 26px 16px;}
.exec-scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 26px 8px;font:600 10px Inter,sans-serif;letter-spacing:.08em;color:#8c99a3;}
.exec-scope .es-lbl{font-weight:700;font-size:8px;letter-spacing:.14em;color:#6f7d88;}
.exec-scope .es-item{color:#c9d2d9;}
.exec-scope .es-sep{color:#3a4854;}
@media(max-width:980px){.exec-scope{margin:0 15px 8px}}
@media(max-width:560px){.exec-scope{margin:0 10px 8px}}
.exec-kpi{position:relative;min-height:102px;padding:18px 18px;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,rgba(15,25,34,.95),rgba(9,16,23,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden;}
.exec-kpi::after{content:"";position:absolute;right:-30px;top:-40px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(210,174,109,.09),transparent 65%);}
.kpi-label{font:700 8px Inter,sans-serif;letter-spacing:.14em;color:#6f7d88;}.kpi-value{font:700 30px/1.05 'Space Grotesk',sans-serif;margin:11px 0 5px;color:#f0f2f3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.kpi-meta{font-size:9px;color:#6d7b86;line-height:1.35;}.kpi-meta.positive{color:var(--green);}.kpi-meta.negative{color:var(--loss,#e85d5d);}.kpi-meta.warn{color:#d4a84b;}
#kpiForm,#kpiPerf,#kpiClutch,#kpiPriority{font-size:22px;letter-spacing:-0.02em;}
.kpi-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:7px;min-height:14px;font-size:9px;color:#8896a1;line-height:1.3;}
.kpi-sub .kpi-sub-txt{color:#8896a1;}
.kpi-spark{display:inline-flex;gap:3px;align-items:center;margin-right:4px;}
.kpi-spark i{display:block;width:9px;height:9px;border-radius:2px;background:#e85d5d;opacity:.9;}
.kpi-spark i.w{background:var(--green,#4ade80);}
.kpi-chip{display:inline-block;padding:1px 6px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#a9b5bf;font-size:9px;white-space:nowrap;}

.filter-dock{margin:0 26px 14px;border:1px solid var(--border);border-radius:14px;background:rgba(8,15,22,.76);overflow:hidden;}
.filter-dock-head{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;border-bottom:1px solid rgba(170,196,220,.07);}.filter-dock-head .eyebrow{display:inline-block;margin:0 9px 0 0;font-size:7px;}.filter-dock-head strong{font-size:10px;color:#cbd3d8;}.filter-collapse-btn{border:1px solid var(--border);background:#0c151d;color:#aeb9c1;border-radius:8px;padding:6px 9px;font-size:9px;cursor:pointer;}
.filters{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0;padding:12px 15px;background:transparent;border:0;border-radius:0;backdrop-filter:none;}
.filters::before{display:none;}.filters .group{gap:7px;}.filters label.field-lbl{font-size:8px;letter-spacing:.11em;color:#687680;}.filters input[type=date]{height:31px;padding:5px 8px;border-radius:7px;background:#0b151d;border:1px solid var(--border);font-size:10px;}.date-arrow{color:#53626d;font-size:11px;}.chip{height:31px;padding:0 11px;border-radius:8px;background:#0b151d;border:1px solid var(--border);font-size:10px;color:#85939e;}.chip:hover{border-color:rgba(143,183,216,.26);color:#cdd5da;}.chip.mode-chip.active{background:rgba(210,174,109,.12);border-color:rgba(210,174,109,.35);color:#e9c87e;box-shadow:none;}
.player-filter-group #playerChips{display:flex;gap:5px;flex-wrap:wrap;}.player-filter-group .chip{height:28px;padding:0 9px;}.ai-btn{height:32px;margin-left:auto;padding:0 15px;border-radius:8px;background:linear-gradient(90deg,#d6b06c,#b98b43);border:0;color:#111;font-size:10px;box-shadow:0 8px 22px rgba(210,174,109,.14);}.ai-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(210,174,109,.22);}.reset-btn{height:32px;margin-left:0;padding:0 11px;border:1px solid var(--border);background:#0b151d;color:#778691;border-radius:8px;font-size:10px;}
.player-records{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 26px 16px;}.prec-card{min-width:0;margin:0;background:rgba(11,18,25,.9);border:1px solid var(--border);border-left:2px solid var(--border);border-radius:12px;padding:11px 13px;}.prec-card .name{font-size:11px;margin-bottom:7px;}.prec-card .wl{font-size:11px}.prec-card .pct{font-size:9px}.prec-card .matches{font-size:8px;letter-spacing:.08em;margin-top:5px;}

.app-body-grid{display:contents;} /* legacy — layout now on .wrap */
.sidebar{position:sticky;top:0;height:100vh;max-height:100vh;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(6,12,17,.98),rgba(5,10,14,.98));border-right:1px solid var(--border);z-index:120;overflow:hidden;grid-row:1 / -1;}
.sidebar-brand{display:flex;align-items:center;gap:10px;padding:18px 17px 15px;border-bottom:1px solid rgba(170,196,220,.07);}.sidebar-logo-wrap{position:relative;width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;}.sidebar-logo-wrap img{width:30px;height:30px;object-fit:contain;border-radius:8px;}.sidebar-logo-fallback{display:none;position:absolute;color:var(--gold);font-weight:800;font-size:10px;}.sidebar-brand strong{display:block;font-size:12px;color:#eef1f2;}.sidebar-brand span{display:block;font-size:8px;color:#677681;margin-top:3px;letter-spacing:.04em;}.nav-scroll{padding:12px 10px;overflow:auto;scrollbar-width:thin;}.nav-section{margin-bottom:16px;}.nav-section-title{display:block;padding:0 9px 7px;color:#4f5e69;font:700 7px Inter,sans-serif;letter-spacing:.17em;}.tabbar{display:none!important;}
.tabbtn{width:100%;display:flex;align-items:center;gap:10px;height:35px;margin:2px 0;padding:0 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:#7f8d98;font:600 10px Inter,sans-serif;cursor:pointer;text-align:left;transition:all .18s var(--ease-premium);}.tabbtn .nav-icon{width:19px;color:#6c7c88;text-align:center;font-size:13px;flex:0 0 auto;}.tabbtn:hover{background:rgba(143,183,216,.055);color:#cdd5da;}.tabbtn:hover .nav-icon{color:#aebfcd;}.tabbtn.active{background:linear-gradient(90deg,rgba(210,174,109,.18),rgba(210,174,109,.06));color:#f0e4cf;border-color:rgba(210,174,109,.12);box-shadow:inset 3px 0 0 var(--gold);}.tabbtn.active .nav-icon{color:var(--gold-bright);}
.sidebar-bottom{margin-top:auto;padding:10px;border-top:1px solid rgba(170,196,220,.07);}.sidebar-upgrade{padding:12px;border:1px solid rgba(210,174,109,.13);border-radius:11px;background:linear-gradient(145deg,rgba(210,174,109,.08),rgba(11,18,25,.55));}.upgrade-orb{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:rgba(210,174,109,.12);color:var(--gold);font-size:11px;margin-bottom:7px;}.sidebar-upgrade strong{display:block;font-size:9px;color:#dfe4e7;}.sidebar-upgrade p{font-size:8px;line-height:1.5;color:#677681;margin:5px 0 9px;}.sidebar-upgrade button{width:100%;height:28px;border:0;border-radius:7px;background:#e1b96e;color:#14120e;font:700 9px Inter,sans-serif;cursor:pointer;}.sidebar-admin-link{display:flex;align-items:center;gap:7px;margin-top:7px;padding:8px 9px;color:#6f7d88;font-size:9px;text-decoration:none;border-radius:8px;}.sidebar-admin-link span:last-child{margin-left:auto;}.sidebar-admin-link:hover{background:#0b151d;color:#b9c3c9;}
.main-content{min-width:0;padding:0 26px 70px;background:linear-gradient(180deg,rgba(5,11,16,.32),rgba(5,10,14,.05));}.mobile-page-heading{display:none;}

#content{min-width:0;}.tabpanel{animation:pageIn .38s var(--ease-premium);}.tabpanel:not(.active){display:none;}@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card{position:relative;background:linear-gradient(180deg,rgba(13,22,30,.94),rgba(9,16,23,.94));border:1px solid var(--border);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);padding:17px;overflow:hidden;}.card::after{display:none;}.card h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px;color:#dfe5e8;font:700 15px 'Space Grotesk',sans-serif;}.card h2 small{font:500 9px Inter,sans-serif;color:#697783;letter-spacing:.02em;}.grid{gap:12px;}.grid-summary{gap:12px;}.insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:stretch;}.insights-grid>.card{display:flex;flex-direction:column;height:100%;}.insights-grid>.card>div[id]{flex:1;}.metric-select{background:#0a141c;border:1px solid var(--border);color:#bfc9cf;border-radius:8px;padding:7px 10px;font-size:10px;}.overview-subnav{display:flex;gap:6px;margin:0 0 12px;padding:4px;background:#0a131b;border:1px solid var(--border);border-radius:10px;width:max-content;}.ov-subtab-btn{border:0;background:transparent;color:#6f7d88;padding:7px 11px;border-radius:7px;font-size:9px;}.ov-subtab-btn.active{background:rgba(210,174,109,.13);color:#e8c57e;}
.grid-summary .card{min-height:230px;}.power-rank-card{background:linear-gradient(135deg,rgba(18,29,39,.96),rgba(10,17,24,.96));}.week-summary-card{background:linear-gradient(135deg,rgba(12,22,29,.96),rgba(9,16,23,.96));}
.chart-box{background:#081119;border:1px solid rgba(170,196,220,.08);border-radius:10px;padding:10px;}.hud-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px;}.hud-card{background:#0a141c!important;border-color:var(--border)!important;}.table-wrap{border:1px solid rgba(170,196,220,.08);border-radius:10px;overflow:auto;background:#081119;}table{border-collapse:collapse;width:100%;font-size:10px;}th{background:#0b151d;color:#687782;text-transform:uppercase;letter-spacing:.08em;font-size:8px;font-weight:700;padding:10px 9px;border-bottom:1px solid var(--border);white-space:nowrap;}td{padding:9px;border-bottom:1px solid rgba(170,196,220,.055);color:#aab6be;}tbody tr:hover{background:rgba(143,183,216,.035);}

/* Keep the star map prominent instead of replacing it with a generic chart. */
.starmap-card{background:radial-gradient(800px 450px at 50% 40%,rgba(83,126,163,.09),transparent 68%),#070e14;}.starmap-wrap{border-radius:12px;border:1px solid rgba(143,183,216,.12);background:radial-gradient(circle at 50% 50%,rgba(210,174,109,.045),transparent 35%),#04090d;overflow:hidden;}

.modal-backdrop,.lootbox-overlay,.vsintro-overlay,.wrapped-overlay{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}.modal{background:linear-gradient(180deg,#0c151e,#081017);border-color:rgba(210,174,109,.2);box-shadow:0 30px 100px rgba(0,0,0,.55);}
.rl-toast{border:1px solid rgba(210,174,109,.25)!important;background:#0c151d!important;color:#e9d29f!important;}

/* Existing chart HUDs / bars: unify their surfaces without changing data. */
.bar-track,.boost-track{background:#111d26!important;}.bar-fill{box-shadow:0 0 12px rgba(143,183,216,.08);}.metric-summary{border-top-color:rgba(170,196,220,.08);}.analysis-section{background:#0a141c;border-color:var(--border);}

/* Make legacy decorative/game effects quieter so the analytics remains the hero. */
#particles-canvas{opacity:.30!important;}.form-marquee{opacity:.62;}.sfx-toggle-btn{display:none;}

@media (max-width:1200px){
  :root{--sidebar:218px}.topbar-scoreline{min-width:0;gap:11px}.global-search{width:300px}.dashboard-hero{padding:36px 32px}.dashboard-hero-copy{width:60%}.hero-card-performance{right:5%}.hero-card-match{right:27%}.player-records{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  .topbar{padding:0 15px}.mobile-menu-btn{display:block}.brand-lockup{min-width:auto}.global-search{width:280px}.topbar-scoreline{display:none}.topbar-user .user-copy{display:none}.dashboard-hero{margin:12px 15px;padding:30px 25px;min-height:410px}.dashboard-hero-copy{width:70%}.dashboard-hero-visual{opacity:.78}.executive-kpis{margin:0 15px 12px}.filter-dock,.player-records{margin-left:15px;margin-right:15px}.app-body-grid{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;top:0;width:246px;height:100vh;transition:left .25s var(--ease-premium);box-shadow:30px 0 70px rgba(0,0,0,.4)}.sidebar.open{left:0}.main-content{padding:0 15px 60px}.mobile-page-heading{display:block;padding:17px 0 7px}.mobile-page-heading .eyebrow{margin:0 0 3px;font-size:7px}.mobile-page-heading h2{margin:0;font-size:20px}.filter-dock .filters{max-height:500px;overflow:auto}.filter-dock.collapsed .filters{display:none}.ai-btn{margin-left:0}.player-filter-group{width:100%;}.hero-card-performance{right:3%;top:17%;}.hero-card-form{right:2%;bottom:11%;}.hero-card-match{right:28%;bottom:5%;}.hero-center-badge{right:38%;}
}
@media (max-width:700px){
  .topbar{min-height:62px}.brand-copy #heroTagline{max-width:130px}.global-search{display:none}.dashboard-hero{min-height:455px;margin:10px 10px 12px;padding:25px 19px;border-radius:17px}.dashboard-hero-copy{width:100%}.dashboard-hero h2{font-size:38px}.dashboard-hero p{font-size:11px;max-width:330px}.hero-features{gap:9px 13px}.dashboard-hero-visual{opacity:.5}.hero-card-performance{right:3%;top:51%;}.hero-card-form{right:5%;bottom:6%;}.hero-card-match{left:4%;right:auto;bottom:7%;}.hero-center-badge{right:33%;top:49%;}.hero-orbit{right:-20%;top:27%;}.orbit-a{width:350px;height:230px}.orbit-b{width:440px;height:270px}.orbit-c{width:530px;height:320px}.executive-kpis{grid-template-columns:repeat(2,1fr);margin:0 10px 10px}.exec-kpi{min-height:88px;padding:13px}.kpi-value{font-size:25px}.filter-dock,.player-records{margin-left:10px;margin-right:10px}.filter-dock-head{padding:10px}.filters{padding:10px}.filters .group{width:100%}.date-group{display:grid!important;grid-template-columns:auto 1fr auto 1fr;align-items:center}.date-group input{width:100%}.ai-btn,.reset-btn{width:100%;}.player-records{grid-template-columns:1fr 1fr;}.main-content{padding:0 10px 50px}.card{padding:13px;border-radius:12px}.card h2{font-size:13px}.hud-row{grid-template-columns:1fr 1fr}.grid-summary{grid-template-columns:1fr!important}.overview-subnav{width:100%;overflow:auto}.ov-subtab-btn{flex:1;white-space:nowrap}.hero-actions{flex-wrap:wrap}.hero-primary,.hero-secondary{height:38px}.sidebar{top:0;height:100vh}
}
@media (max-width:460px){.brand-copy h1{font-size:14px}.brand-copy #heroTagline{font-size:7px}.topbar{padding:0 10px}.topbar-right{gap:7px}.user-chevron{display:none}.dashboard-hero h2{font-size:34px}.hero-features span:nth-child(n+3){display:none}.player-records{grid-template-columns:1fr}.executive-kpis{gap:7px}.exec-kpi{min-height:82px}.kpi-value{font-size:23px}.hud-row{grid-template-columns:1fr}.dashboard-hero{min-height:430px}.hero-card-performance{top:54%;}.hero-card-form{bottom:4%;}.hero-card-match{bottom:4%;min-width:150px}.hero-center-badge{width:88px;height:88px}.hero-center-badge span{font-size:22px}}

/* ================================================================
   MOCKUP-LEVEL ANALYTICS CHARTS
   Clean vertical bars and charts matching the DataCoach reference.
   ================================================================ */
.chart-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:14px;}
.chart-pair-grid>.card{min-height:300px;}
.chart-box{position:relative;height:238px;padding:12px 12px 8px;background:linear-gradient(180deg,rgba(5,13,19,.92),rgba(6,14,20,.72));border:1px solid rgba(126,168,201,.10);border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.018);}
.chart-box canvas{display:block!important;width:100%!important;height:100%!important;image-rendering:auto;}
.card h2 small{white-space:normal;}
@media(max-width:900px){.chart-pair-grid{grid-template-columns:1fr}.chart-pair-grid>.card{min-height:285px}.chart-box{height:225px}}

/* ================================================================
   STEP 4 — PREMIUM ANALYTICS / GLASS UX POLISH
   ================================================================ */
.topbar-scoreline .score-item .num{font-size:17px;line-height:1.05;}
.topbar-scoreline .score-item .lbl{font-size:9px;}

/* Filteri is intentionally removed from the desktop header; the filter dock stays open. */
.filter-dock-head{min-height:42px;}
.filter-dock-head #filterCollapseBtn{display:none!important;}

/* Player/date pills: true vertical centering, tighter SaaS glass treatment. */
.match-player-pill,.player-date-pill,.date-player-pill{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;min-height:26px;}

/* Premium icon surfaces: crisp SVG, glass ring, no emoji visual language. */
.saas-icon,.saas-heading-svg{width:18px;height:18px;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 8px rgba(0,0,0,.22));}
.saas-inline-icon{width:22px;height:22px;display:inline-grid;place-items:center;vertical-align:-6px;margin:0 3px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.18);color:#d7b66f;}
.saas-inline-icon .saas-icon{width:13px;height:13px;stroke-width:1.75;}
.nav-icon{display:inline-flex!important;align-items:center;justify-content:center;width:24px!important;height:24px;border:1px solid rgba(255,255,255,.055);border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
.tabbtn.active .nav-icon{background:linear-gradient(145deg,rgba(210,174,109,.18),rgba(210,174,109,.045));border-color:rgba(210,174,109,.18);}
.hero-features i{display:inline-grid!important;place-items:center;width:23px;height:23px;border:1px solid rgba(210,174,109,.18);border-radius:8px;background:linear-gradient(145deg,rgba(210,174,109,.13),rgba(255,255,255,.025));font-style:normal;color:#e2c27e;}
.hero-features i .saas-icon{width:13px;height:13px;}

/* Mockup-style Performance Trend canvas: larger, sharper and visually richer. */
#trendChart,#demoTrendChart{display:block;width:100%!important;}
#trendChart + .metric-summary{margin-top:4px;}
.chart-box:has(#demoTrendChart){height:275px;}

/* Hero match intelligence: turn the ambiguous dot-map into a labeled tactical mini-pitch. */
.hero-card-intelligence{min-width:238px;}
.intel-grid{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center;}
.mini-pitch{position:relative;height:108px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:linear-gradient(90deg,rgba(210,174,109,.055),rgba(24,198,174,.055));overflow:hidden;box-shadow:inset 0 0 28px rgba(0,0,0,.24);}
.mini-pitch:before{content:"";position:absolute;inset:9px;border:1px solid rgba(184,211,230,.16);border-radius:8px;}
.mini-pitch:after{content:"";position:absolute;left:50%;top:9px;bottom:9px;width:1px;background:rgba(184,211,230,.12);box-shadow:-32px 0 0 rgba(184,211,230,.04),32px 0 0 rgba(184,211,230,.04);}
.mini-pitch span{position:absolute;width:9px;height:9px;border-radius:50%;z-index:2;box-shadow:0 0 0 4px rgba(255,255,255,.035),0 0 14px currentColor;}
.mini-pitch span:after{content:"";position:absolute;left:13px;top:-3px;font:600 7px Inter,sans-serif;white-space:nowrap;color:#80909c;letter-spacing:.04em;}
#intelDotA{background:#e5b968;color:#e5b968;}
#intelDotA:after{content:"BALL";}
#intelDotB{background:#18c6ae;color:#18c6ae;}
#intelDotB:after{content:"TEAM";}
#intelDotC{background:#7ea8c9;color:#7ea8c9;}
#intelDotC:after{content:"OPP";}
.intel-lines{display:grid;gap:6px;}
.intel-lines:before{content:"MATCH SAMPLE · ACTIVE DATASET";font:700 7px Inter,sans-serif;color:#596a76;letter-spacing:.12em;margin-bottom:1px;}
.intel-lines div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.055);}
.intel-lines span{font-size:8px;color:#758590;}
.intel-lines b{font:600 9px 'JetBrains Mono',monospace;color:#dfe7eb;}
.hero-card-intelligence .hero-card-head small{font-size:8px;letter-spacing:.08em;}

/* Team chemistry: use the same glass-card hierarchy as analytics. */
#tab-chemistry>.card{background:linear-gradient(180deg,rgba(13,22,30,.96),rgba(8,15,22,.96));}
#tab-chemistry .chem-combo-grid{gap:14px;}
#tab-chemistry .chem-combo-card{position:relative;min-height:132px;padding:15px 16px;background:linear-gradient(145deg,rgba(18,29,39,.92),rgba(8,15,22,.94));border:1px solid rgba(143,183,216,.12);border-left:2px solid rgba(210,174,109,.5)!important;border-radius:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.16);}
#tab-chemistry .chem-combo-card:hover{transform:translateY(-2px);border-color:rgba(210,174,109,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 36px rgba(0,0,0,.23);}
#tab-chemistry .chem-combo-card .name{display:flex;align-items:center;gap:6px;min-height:24px;font:700 13px 'Space Grotesk',sans-serif;}
#tab-chemistry .chem-combo-card .row{align-items:center;margin-top:9px;}
#tab-chemistry .chem-combo-card .wl{font:600 12px 'JetBrains Mono',monospace;}
#tab-chemistry .chem-combo-card .pct{font:700 14px 'JetBrains Mono',monospace;color:#e4c27b;}
#tab-chemistry .chem-combo-card .bar-track{height:7px!important;margin-top:12px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.035);border-radius:99px!important;}
#tab-chemistry .chem-combo-card .bar-fill{height:100%;border-radius:99px!important;box-shadow:0 0 16px rgba(210,174,109,.13);}
#tab-chemistry .chem-combo-card .matches{margin-top:10px;font-size:9px;color:#71818d;letter-spacing:.06em;text-transform:none;}
#tab-chemistry .subtle-note{margin-top:16px;padding:10px 12px;border:1px solid rgba(143,183,216,.08);border-radius:9px;background:rgba(255,255,255,.018);font-size:10px;line-height:1.5;color:#71818d;}
#tab-chemistry #chemPageInfo{font-size:10px!important;}

/* Prediction context: make the subject explicit. */
.prediction-context{display:block;margin-top:3px;font:500 8px Inter,sans-serif;color:#72818c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.prediction-subject{display:inline-flex;align-items:center;gap:5px;margin:4px 0 8px;padding:4px 7px;border:1px solid rgba(210,174,109,.14);border-radius:7px;background:rgba(210,174,109,.045);font-size:8px;color:#bfc8ce;}
.prediction-subject .saas-icon{width:11px;height:11px;color:#e5b968;}

@media(max-width:900px){.chart-box:has(#demoTrendChart){height:245px}.intel-grid{grid-template-columns:1fr}.mini-pitch{height:96px}.hero-card-intelligence{min-width:0;}}

/* Tactical mini-pitch labels */
.mini-pitch .pitch-label{position:absolute;z-index:3;font:700 6px Inter,sans-serif;letter-spacing:.09em;color:#657783;opacity:.9;}
.mini-pitch .pitch-label-left{left:13px;bottom:10px;}
.mini-pitch .pitch-label-center{left:50%;bottom:10px;transform:translateX(-50%);color:#a88b52;}
.mini-pitch .pitch-label-right{right:13px;bottom:10px;}

/* Vertically centered player/date controls throughout compact match UI. */
.chip,.pill,.team-chip,.pt-style-badge,.pt-team-pill,.wchip,.badge-chip,.shame-chip,.rc-type-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1.1;}
.team-chip img,.team-chip-noLogo{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;}
.race-date-badge{display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;}

/* ================================================================
   DASHBOARD INTELLIGENCE GRID — mockup-aligned SaaS cards
   ================================================================ */
.dashboard-intelligence-grid,
.dashboard-lower-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:12px;margin-top:12px;}
.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.dashboard-card-head h2{margin:0!important;display:block!important;}
.dashboard-card-head h2 small{display:block;margin-top:4px;font-size:11px!important;line-height:1.4;}
.dashboard-card-kicker{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(229,185,104,.18);background:rgba(229,185,104,.06);color:#d8b56c;font-size:8px;font-weight:800;letter-spacing:.12em;white-space:nowrap;}
.dashboard-card-kicker.ai{border-color:rgba(24,198,174,.2);background:rgba(24,198,174,.06);color:#66d8c6;}
.top-performers-card,.quick-insights-card,.form-card,.next-focus-card{min-height:218px;}
.top-performers-body{display:flex;flex-direction:column;gap:7px;}
.top-performer-row{display:grid;grid-template-columns:34px minmax(0,1fr) 82px 58px;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(180,205,225,.07);background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.006));border-radius:11px;transition:.2s ease;}
.top-performer-row:hover{transform:translateY(-1px);border-color:rgba(229,185,104,.18);background:rgba(229,185,104,.035);}
.top-performer-avatar{width:30px;height:30px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0d1821;display:flex;align-items:center;justify-content:center;color:#9aa9b4;font-size:10px;font-weight:800;}
.top-performer-avatar img{width:100%;height:100%;object-fit:cover;}
.top-performer-main{min-width:0;}.top-performer-name{font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.top-performer-sub{margin-top:2px;color:#71808b;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.top-performer-bar{height:6px;border-radius:999px;background:rgba(150,175,195,.08);overflow:hidden;}.top-performer-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#e5b968,#18c6ae);}
.top-performer-score{text-align:right;font:700 15px 'JetBrains Mono',monospace;color:#e8edf1;}.top-performer-trend{text-align:right;font:700 12px 'JetBrains Mono',monospace;color:#62d5b9;}
.quick-insights-body{display:grid;gap:8px;}
.quick-insight-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:9px 10px;border:1px solid rgba(180,205,225,.07);border-radius:11px;background:rgba(255,255,255,.012);}
.quick-insight-icon{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(229,185,104,.16);background:rgba(229,185,104,.055);color:#e5b968;font-size:13px;}
.quick-insight-item.positive .quick-insight-icon{color:#55d5ba;border-color:rgba(24,198,174,.18);background:rgba(24,198,174,.055);}.quick-insight-item.negative .quick-insight-icon{color:#e58d88;border-color:rgba(229,141,136,.18);background:rgba(229,141,136,.055);}
.quick-insight-title{font-size:13px;font-weight:750;color:#dfe7eb;}.quick-insight-text{font-size:12px;color:#778792;line-height:1.5;margin-top:2px;}
.quick-insight-value{font:700 12px 'JetBrains Mono',monospace;color:#b9c8d0;margin-left:4px;}
.next-focus-card{background:linear-gradient(135deg,rgba(17,28,37,.96),rgba(9,17,24,.96));}.next-focus-content{height:calc(100% - 48px);display:flex;flex-direction:column;justify-content:center;gap:12px;}.next-focus-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#6f7f8a;}.next-focus-title{font:700 26px 'Space Grotesk',sans-serif;color:#edf1f3;}.next-focus-copy{max-width:460px;font-size:13px;line-height:1.6;color:#83939e;}.next-focus-metric{display:flex;align-items:center;gap:12px;}.next-focus-number{font:700 24px 'JetBrains Mono',monospace;color:#e5b968;}.next-focus-bar{flex:1;height:7px;background:rgba(150,175,195,.08);border-radius:999px;overflow:hidden;}.next-focus-bar i{display:block;height:100%;background:linear-gradient(90deg,#e5b968,#18c6ae);border-radius:999px;}
.form-card #formaList{padding-top:2px;}.form-card .form-row{padding:8px 0;border-bottom:1px solid rgba(180,205,225,.06);margin-bottom:0;}.form-card .form-row:last-child{border-bottom:0;}

/* Hero team selector + momentum card */
.hero-team-head{align-items:center!important;}.hero-team-select{max-width:132px;height:28px;padding:0 24px 0 9px;border:1px solid rgba(180,205,225,.12);border-radius:8px;background:rgba(6,14,21,.76);color:#d8e1e7;font:600 9px Inter,sans-serif;outline:none;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}.hero-team-select:focus{border-color:rgba(229,185,104,.35);box-shadow:0 0 0 3px rgba(229,185,104,.06);}.hero-team-momentum-line{display:flex;align-items:baseline;gap:10px;margin-top:3px;}.hero-momentum-delta{font:700 9px 'JetBrains Mono',monospace;color:#58d4b9;}.hero-team-mini-stats{display:flex;justify-content:space-between;gap:8px;margin-top:6px;color:#667782;font-size:7px;text-transform:uppercase;letter-spacing:.06em;}.hero-team-mini-stats b{color:#b9c7cf;font:700 8px 'JetBrains Mono',monospace;margin-right:3px;}

@media(max-width:900px){.dashboard-intelligence-grid,.dashboard-lower-grid{grid-template-columns:1fr;}.top-performers-card,.quick-insights-card,.form-card,.next-focus-card{min-height:0;}.hero-team-select{max-width:118px;}.top-performer-row{grid-template-columns:32px minmax(0,1fr) 70px 52px;}}
@media(max-width:620px){.top-performer-row{grid-template-columns:30px minmax(0,1fr) 56px;}.top-performer-trend{display:none;}.hero-team-select{max-width:105px;font-size:8px;}.hero-team-mini-stats{font-size:6px;}.hero-team-mini-stats b{font-size:7px;}}

/* =====================================================================
   FRONTEND POLISH PASS — CONTEXT BAR + RESPONSIVE SYSTEM
   Final override layer: keeps the existing analytics intact while making
   desktop/tablet/mobile composition predictable and touch-friendly.
   ===================================================================== */
.topbar-context{
  display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;
  flex:1 1 auto;max-width:620px;margin:0 4px;
  overflow:hidden;
}
.context-live,.context-pill{
  height:30px;display:inline-flex;align-items:center;gap:7px;min-width:0;
  border:1px solid rgba(143,183,216,.10);border-radius:9px;
  background:linear-gradient(180deg,rgba(18,30,40,.74),rgba(8,15,22,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  white-space:nowrap;
}
.context-live{padding:0 9px;color:#788894;font:800 7px Inter,sans-serif;letter-spacing:.13em;flex:0 0 auto;}
.context-live i{width:6px;height:6px;border-radius:50%;background:#58d7ad;box-shadow:0 0 10px rgba(88,215,173,.55);}
.context-pill{padding:0 9px;gap:6px;overflow:hidden;}
.context-pill b{font:800 7px Inter,sans-serif;color:#62727e;letter-spacing:.09em;flex:0 0 auto;}
.context-pill strong{font:700 9px Inter,sans-serif;color:#d7e0e6;overflow:hidden;text-overflow:ellipsis;max-width:145px;}
.context-sync strong{color:#63d5bc;}

/* Consistent glass hierarchy — no black elliptical drop shadows */
.redesigned-app .card,
.redesigned-app .exec-kpi,
.redesigned-app .filter-dock,
.redesigned-app .hero-live-card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.redesigned-app .dashboard-intelligence-grid>.card,
.redesigned-app .dashboard-lower-grid>.card,
.redesigned-app .trend-chart-layout{
  min-width:0;overflow:hidden;
}
.redesigned-app .trend-chart-stage{min-width:0;overflow:hidden;}
.redesigned-app .trend-chart-stage canvas{display:block;width:100%!important;max-width:100%;}

/* Desktop: context sits between search and live score without stealing width. */
@media (min-width:1181px){
  .topbar-left{flex:0 1 620px;min-width:0;}
  .global-search{flex:0 1 380px;}
  .topbar-scoreline{min-width:250px;}
}

/* Tablet: make the context bar compact instead of letting the header wrap. */
@media (max-width:1180px){
  .topbar{gap:12px;padding:0 18px;}
  .brand-lockup{min-width:170px;}
  .global-search{width:min(320px,34vw);}
  .topbar-context{max-width:420px;}
  .context-pill:nth-of-type(4){display:none;}
  .topbar-scoreline{min-width:220px;gap:11px;}
}

/* Mobile composition: the desktop shell becomes an app-like stack. */
@media (max-width:700px){
  .topbar{min-height:58px;height:auto;flex-wrap:wrap;padding:0 12px;gap:8px;}
  .topbar-left{width:100%;flex:0 0 100%;gap:9px;min-width:0;}
  .mobile-menu-btn{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;}
  .brand-lockup{min-width:0;gap:7px;flex:0 0 auto;}
  .brand-mark-wrap,.brand-logo-img{width:30px;height:30px;}
  .brand-copy h1{font-size:14px;}
  .brand-copy #heroTagline{font-size:7px;max-width:105px;}
  .global-search{height:40px;flex:1;width:auto;min-width:0;padding:0 10px;}
  .global-search kbd{display:none;}
  .global-search input{font-size:11px;}
  .topbar-context{position:static;flex:0 0 100%;width:100%;max-width:none;margin:2px 0 0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;}
  .topbar-context::-webkit-scrollbar{display:none;}
  .context-live,.context-pill{height:30px;flex:0 0 auto;}
  .context-pill:nth-of-type(4){display:inline-flex;}
  .context-pill strong{max-width:120px;}
  .topbar-right{display:none;}
  .dashboard-hero{margin:14px 12px 12px;padding:30px 20px 18px;min-height:520px;border-radius:18px;}
  .dashboard-hero-copy{width:100%;z-index:8;}
  .dashboard-hero h2{font-size:clamp(32px,10vw,44px);line-height:.98;}
  .dashboard-hero p{font-size:12px;line-height:1.55;margin:14px 0 17px;max-width:100%;}
  .hero-actions{flex-wrap:wrap;}
  .hero-primary,.hero-secondary{min-height:44px;height:44px;padding:0 17px;}
  .hero-features{gap:9px 14px;margin-top:18px;font-size:8px;max-width:90%;}
  .hero-features span:nth-child(n+3){display:none;}
  .dashboard-hero-visual{position:absolute;inset:auto 12px 12px;height:220px;overflow:visible;}
  .dashboard-hero-visual .hero-card-performance,
  .dashboard-hero-visual .hero-card-form,
  .dashboard-hero-visual .hero-card-match,
  .dashboard-hero-visual .hero-card-intelligence{position:absolute;min-width:0;max-width:none;}
  .dashboard-hero-visual .hero-card-performance{left:0;right:0;top:auto;bottom:0;transform:none;}
  .dashboard-hero-visual .hero-card-form,
  .dashboard-hero-visual .hero-card-match,
  .dashboard-hero-visual .hero-card-intelligence{display:none;}
  .dashboard-hero-visual .hero-card-performance{padding:12px;}
  .dashboard-hero-visual .hero-card-performance .perf-main{grid-template-columns:78px 1fr;gap:10px;}
  .dashboard-hero-visual .hero-card-performance .hero-ring{width:68px;height:68px;}
  .dashboard-hero-visual .hero-card-performance .hero-ring span{font-size:19px;}

  .executive-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 12px;}
  .exec-kpi{min-height:88px;padding:13px 12px;border-radius:14px;}
  .kpi-label{font-size:8px;}
  .kpi-value{font-size:25px;}
  .kpi-meta{font-size:8px;}

  .filter-dock{margin:10px 12px;border-radius:14px;}
  .filter-dock-head{padding:12px 14px;}
  .filters{padding:12px;gap:10px;}
  .date-group{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;}
  .date-group input{min-width:0;width:100%;}
  .group{min-width:0;}
  .mode-chip,.chip,.reset-btn,.ai-btn{min-height:44px;}
  .mode-chip{padding:0 11px;}

  .wrap.redesigned-app{grid-template-columns:1fr!important;}.app-main-column{grid-column:1;}
  .sidebar{position:fixed!important;left:0;top:0;bottom:0;width:min(82vw,300px);z-index:250;transform:translateX(-105%);transition:transform .25s var(--ease-premium);box-shadow:30px 0 70px rgba(0,0,0,.4);}
  .sidebar.open{transform:translateX(0);}
  .main-content{min-width:0!important;width:100%;padding:0 12px 24px!important;}
  .main-content .content-inner{min-width:0!important;}
  .tabpanel,.ov-subpanel{min-width:0;}

  .dashboard-intelligence-grid,.dashboard-lower-grid{grid-template-columns:1fr!important;gap:10px;margin-top:10px;}
  .dashboard-intelligence-grid>.card,.dashboard-lower-grid>.card{width:100%;min-width:0;}
  .top-performers-card,.quick-insights-card,.form-card,.next-focus-card{min-height:0;}
  .dashboard-card-head{gap:8px;margin-bottom:11px;}
  .dashboard-card-head h2{font-size:15px!important;}
  .dashboard-card-head h2 small{font-size:8px!important;}
  .dashboard-card-kicker{height:24px;font-size:7px;padding:0 7px;}
  .top-performer-row{grid-template-columns:32px minmax(0,1fr) 58px!important;gap:8px;padding:9px;min-height:52px;}
  .top-performer-trend{display:none!important;}
  .top-performer-score{font-size:12px;}
  .quick-insight-item{grid-template-columns:32px minmax(0,1fr);padding:10px;min-height:54px;}
  .quick-insight-icon{width:32px;height:32px;}

  .trend-chart-layout{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  .trend-chart-stage{height:270px!important;min-height:270px!important;width:100%!important;}
  .metric-summary{width:100%;min-width:0;max-height:none;overflow:visible;}
  .metric-summary-row,.metric-summary-head{grid-template-columns:8px minmax(72px,1fr) minmax(54px,1fr) 48px 58px!important;gap:5px!important;}
  .metric-summary-row{min-height:42px;}

  .form-card #formaList{overflow-x:auto;}
  .next-focus-content{min-height:180px;}

  /* Every chart/card must respect the viewport; no horizontal bleed. */
  .chart-pair-grid,.grid,.grid-2,.grid-3,.grid-4,.stats-grid,.cards-grid,.insights-grid{grid-template-columns:minmax(0,1fr)!important;min-width:0;}
  .card{min-width:0;max-width:100%;}
  canvas{max-width:100%!important;}
  .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-wrap table{min-width:640px;}

  /* Touch-friendly controls across the application. */
  .tabbtn,.icon-btn,.hero-primary,.hero-secondary,.mobile-menu-btn,.reset-btn,.ai-btn,.team-chip,.chip,.mode-chip,.chem-mode-chip,.race-play-btn,.race-speed-btn,.metric-select,.hero-team-select{min-height:44px;}
  .tabbtn{display:flex;align-items:center;}

  /* Kill legacy fixed heights that caused card drift on small screens. */
  .dashboard-hero,.hero-live-card,.card,.exec-kpi,.hud-card,.team-header-card{height:auto;}
}

@media (max-width:460px){
  .topbar{padding:0 9px;}
  .brand-copy #heroTagline{display:none;}
  .brand-copy h1{font-size:13px;}
  .global-search input{font-size:10px;}
  .global-search{padding:0 8px;}
  .topbar-context{gap:6px;}
  .context-live{display:none;}
  .context-pill{height:28px;padding:0 8px;}
  .context-pill b{font-size:6px;}
  .context-pill strong{font-size:8px;max-width:92px;}
  .dashboard-hero{margin-left:9px;margin-right:9px;padding-left:16px;padding-right:16px;min-height:500px;}
  .executive-kpis{margin-left:9px;margin-right:9px;}
  .filter-dock,.main-content{margin-left:9px;margin-right:9px;}
  .main-content{padding-left:0!important;padding-right:0!important;}
  .trend-chart-stage{height:240px!important;min-height:240px!important;}
  .metric-summary-row,.metric-summary-head{grid-template-columns:7px minmax(60px,1fr) minmax(48px,1fr) 42px 50px!important;}
  .top-performer-row{grid-template-columns:30px minmax(0,1fr) 52px!important;}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.hero-primary,.hero-secondary,.top-performer-row{transition:none!important;}
}

/* ===== Language switcher (SR / EN cards) ===== */
.phase2-language{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:4px;
}
.phase2-lang-card{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.65);
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .15s;
  font-family:inherit;
  line-height:1.15;
}
.phase2-lang-card:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}
.phase2-lang-card.active{
  background:linear-gradient(135deg,rgba(61,169,252,.25), rgba(99,102,241,.22));
  border-color:rgba(61,169,252,.55);
  color:#fff;
  box-shadow:0 0 0 1px rgba(61,169,252,.2);
}
.phase2-lang-code{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
}
.phase2-lang-name{
  font-size:9px;
  font-weight:500;
  opacity:.75;
  letter-spacing:.02em;
}
.phase2-lang-card.active .phase2-lang-name{ opacity:1; }
@media (max-width:720px){
  .phase2-lang-name{ display:none; }
  .phase2-lang-card{ min-width:40px; padding:6px 8px; }
}

/* ===== Player trading cards — protect from global canvas rules ===== */
#tab-cards .card-grid,
.card-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  justify-items: center;
  align-items: start;
  padding: 8px 0 24px;
}
#tab-cards .rlcard-wrap,
.rlcard-wrap{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:12px;
  width: min(100%, 300px);
}
#tab-cards .rlcard-wrap canvas,
.rlcard-wrap canvas.rlcard-canvas,
.rlcard-wrap canvas{
  display:block !important;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  aspect-ratio: 600 / 840;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  background: #0e1620;
}
#tab-cards .btn-row,
.rlcard-wrap .btn-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
#tab-cards .rlcard-save,
#tab-cards .rlcard-share,
.rlcard-save, .rlcard-share{
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font: 600 12px Inter, sans-serif;
  cursor: pointer;
  border: 1px solid rgba(143,183,216,.14);
}
#tab-cards .rlcard-save,
.rlcard-save{
  background: rgba(12,20,30,.9);
  color: #c5d0da;
}
#tab-cards .rlcard-share,
.rlcard-share{
  background: linear-gradient(180deg, rgba(124,58,237,.35), rgba(124,58,237,.18));
  border-color: rgba(167,139,250,.35);
  color: #efe8ff;
}

/* ===== CRITICAL: hero selects must receive clicks (phase2 sets pointer-events:none) ===== */
.redesigned-app .hero-live-card.hero-card-performance,
.redesigned-app .hero-live-card.hero-card-form,
.redesigned-app .hero-live-card.hero-card-match,
.redesigned-app .hero-live-card.hero-card-intelligence{
  pointer-events:auto !important;
}
.hero-team-select,
.hero-player-select{
  pointer-events:auto !important;
  position:relative;
  z-index:30;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:30px;
  padding:0 28px 0 10px;
  border:1px solid rgba(180,205,225,.16);
  border-radius:9px;
  background-color:rgba(6,14,21,.92);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2398aab8' d='M2.2 4.2L6 8l3.8-3.8.9.9L6 9.8 1.3 5.1z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:11px;
  color:#e8eef3;
  font:600 11px/1 Inter,system-ui,sans-serif;
  outline:none;
  cursor:pointer;
}
.hero-team-select:hover,
.hero-player-select:hover{
  border-color:rgba(229,185,104,.28);
}
.hero-team-select:focus,
.hero-player-select:focus{
  border-color:rgba(229,185,104,.45);
  box-shadow:0 0 0 3px rgba(229,185,104,.1);
}
.hero-player-head > div,
.hero-team-head > div{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}


/* ===== Full-height sidebar shell ===== */
.wrap.redesigned-app > .sidebar{
  position:sticky;
  top:0;
  height:100vh;
  max-height:100dvh;
  align-self:start;
}
.wrap.redesigned-app > .app-main-column{
  min-width:0;
  width:100%;
}
.wrap.redesigned-app .topbar{
  position:sticky;
  top:0;
  z-index:100;
}
.wrap.redesigned-app .dashboard-hero{
  margin-left:18px;
  margin-right:18px;
}
.wrap.redesigned-app .executive-kpis{
  margin-left:18px;
  margin-right:18px;
}
.wrap.redesigned-app .filter-dock,
.wrap.redesigned-app .player-records{
  margin-left:18px;
  margin-right:18px;
}

@media (max-width:980px){
  .wrap.redesigned-app{
    display:block !important;
  }
  .wrap.redesigned-app > .sidebar{
    position:fixed !important;
    left:0; top:0; bottom:0;
    width:min(82vw,300px);
    height:100vh !important;
    max-height:100dvh !important;
    z-index:250;
    transform:translateX(-105%);
    transition:transform .25s cubic-bezier(.22,.61,.36,1);
    box-shadow:30px 0 70px rgba(0,0,0,.4);
  }
  .wrap.redesigned-app > .sidebar.open{
    transform:translateX(0);
  }
  .wrap.redesigned-app > .app-main-column{
    width:100%;
  }
  .wrap.redesigned-app .dashboard-hero,
  .wrap.redesigned-app .executive-kpis,
  .wrap.redesigned-app .filter-dock,
  .wrap.redesigned-app .player-records{
    margin-left:10px;
    margin-right:10px;
  }
}


/* Topbar without brand lockup — logo lives only in sidebar */
.wrap.redesigned-app .topbar-left .brand-lockup,
.wrap.redesigned-app .topbar-left .hero-title,
.wrap.redesigned-app .topbar .brand-lockup{display:none!important;}
.wrap.redesigned-app .topbar-left{
  gap:12px;
  min-width:0;
  flex:1 1 auto;
}
.wrap.redesigned-app .global-search{
  flex:1 1 auto;
  width:min(420px, 100%);
  max-width:480px;
}
@media (max-width:700px){
  .wrap.redesigned-app .global-search{display:none;}
}

/* ================================================================
   UNIFIED CARD PATTERN + INSTANT ANALYTICS + UX
   ================================================================ */

/* Single card pattern: padding, border, title size — index / analytics / admin */
.card,
.tabpanel > .card,
.ov-subpanel .card,
.ia-card {
  padding: 16px 18px;
  border: 1px solid rgba(143, 183, 216, 0.12);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(13, 22, 30, 0.96), rgba(8, 15, 22, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.16);
}
.card > h2,
.card .dashboard-card-head h2 {
  font: 700 15px 'Space Grotesk', sans-serif;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
  color: #e8eef2;
}
.card > h2 small,
.card .dashboard-card-head h2 small {
  display: block;
  margin-top: 4px;
  font: 500 11px Inter, sans-serif;
  color: #71818d;
  letter-spacing: 0.02em;
}

/* Hide dead-end promo boxes */
.sidebar-upgrade { display: none !important; }

/* Density toggle — compact match tables */
body.density-compact #matchesTable td,
body.density-compact #matchesTable th,
body.density-compact .table-wrap table td,
body.density-compact .table-wrap table th {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: 11px !important;
}
body.density-compact #matchesTable tr,
body.density-compact .table-wrap table tr {
  line-height: 1.25;
}
body.density-compact .table-wrap {
  --row-gap: 0;
}
#densityToggleBtn[aria-pressed="true"] {
  border-color: rgba(210, 174, 109, 0.45);
  color: #e2c27e;
  background: rgba(210, 174, 109, 0.12);
}

/* Mobile: sticky filter dock + horizontal scroll tabs */
@media (max-width: 900px) {
  .filter-dock {
    position: sticky;
    top: 56px;
    z-index: 90;
    background: rgba(8, 14, 20, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(143, 183, 216, 0.1);
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .tabbar,
  #tabbar,
  .overview-subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 4px;
  }
  .tabbar::-webkit-scrollbar,
  #tabbar::-webkit-scrollbar,
  .overview-subnav::-webkit-scrollbar {
    display: none;
  }
  .tabbar .tabbtn,
  #tabbar button,
  .overview-subnav .ov-subtab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ---------- Instant analytics block ---------- */
.ia-card .dashboard-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ia-player-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.ia-player-name {
  font: 700 16px 'Space Grotesk', sans-serif;
  color: #f0f4f7;
}
.ia-badge {
  font: 600 9px JetBrains Mono, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(210, 174, 109, 0.35);
  color: #e2c27e;
  background: rgba(210, 174, 109, 0.08);
}
.ia-section {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ia-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ia-section h3 {
  margin: 0 0 10px;
  font: 600 12px Inter, sans-serif;
  color: #9aabba;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ia-grid {
  display: grid;
  gap: 10px;
}
.ia-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ia-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .ia-grid-2, .ia-grid-3 { grid-template-columns: 1fr; }
}
.ia-stat {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.ia-stat-label {
  display: block;
  font-size: 10px;
  color: #71818d;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ia-stat-value {
  display: block;
  font: 700 22px 'JetBrains Mono', monospace;
  color: #e8eef2;
}
.ia-stat small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #7a8b98;
}
.ia-plist { display: flex; flex-direction: column; gap: 8px; }
.ia-plist-row {
  display: grid;
  grid-template-columns: 100px 1fr 52px 48px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.ia-plist-name { color: #c5d0d8; font-weight: 600; }
.ia-plist-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.ia-plist-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.ia-plist-pct { font: 700 12px 'JetBrains Mono', monospace; text-align: right; }
.ia-plist-n { color: #71818d; text-align: right; font-size: 11px; }
.ia-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.ia-time-cell {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.ia-time-cell.is-weak {
  border-color: rgba(240, 113, 120, 0.35);
  background: rgba(240, 113, 120, 0.06);
}
.ia-time-label {
  display: block;
  font-size: 10px;
  color: #71818d;
  margin-bottom: 4px;
}
.ia-time-cell b {
  font: 700 18px 'JetBrains Mono', monospace;
}
.ia-time-cell small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #7a8b98;
}
.ia-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: #8a9ba8;
  line-height: 1.45;
}
.ia-boost-wrap { display: flex; flex-direction: column; gap: 14px; }
.ia-boost-score { display: flex; align-items: center; gap: 16px; }
.ia-boost-ring {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(8, 15, 22, 0.95) 58%, transparent 59%),
    conic-gradient(#e2c27e calc(var(--ia-score, 0) * 1%), rgba(255, 255, 255, 0.08) 0);
  border: 1px solid rgba(210, 174, 109, 0.25);
}
.ia-boost-ring span {
  font: 700 18px 'JetBrains Mono', monospace;
  color: #f0e6d0;
}
.ia-boost-ring small {
  display: block;
  text-align: center;
  font-size: 10px;
  color: #a8946a;
  margin-top: -2px;
}
.ia-boost-meta strong {
  display: block;
  font-size: 13px;
  color: #e8eef2;
  margin-bottom: 4px;
}
.ia-boost-meta p {
  margin: 0;
  font-size: 11px;
  color: #7a8b98;
  line-height: 1.4;
}
.ia-boost-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ia-boost-parts div {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  min-width: 88px;
}
.ia-boost-parts span {
  display: block;
  font-size: 9px;
  color: #71818d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ia-boost-parts b {
  font: 700 14px 'JetBrains Mono', monospace;
  color: #dfe6eb;
}

/* ---------- Onboarding ---------- */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 12, 0.55);
  backdrop-filter: blur(4px);
}
.onboarding-overlay.is-open { display: flex; }
.onboarding-card {
  width: min(420px, 100%);
  padding: 22px 22px 18px;
  border-radius: 16px;
  border: 1px solid rgba(210, 174, 109, 0.28);
  background: linear-gradient(165deg, rgba(18, 28, 38, 0.98), rgba(8, 14, 20, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  animation: onboardIn 0.35s ease;
}
@keyframes onboardIn {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.onboarding-skip {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #6f7d88;
  font-size: 11px;
  cursor: pointer;
}
.onboarding-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.onboarding-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: block;
}
.onboarding-dots i.active {
  background: #e2c27e;
  box-shadow: 0 0 10px rgba(226, 194, 126, 0.4);
}
.onboarding-card h2 {
  margin: 0 0 8px;
  font: 700 17px 'Space Grotesk', sans-serif;
  color: #f0f4f7;
}
.onboarding-card p {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: #9aabba;
}
.onboarding-next {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #e2c27e, #c9a45a);
  color: #14120e;
  font: 700 12px Inter, sans-serif;
  cursor: pointer;
}
.onboarding-next:hover { filter: brightness(1.05); }

/* Instant analytics — under profile, player select */
.ia-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ia-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ia-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ia-select-label {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #71818d;
}
.ia-player-select {
  min-width: 160px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(143, 183, 216, 0.18);
  background: rgba(11, 19, 27, 0.92);
  color: #e8eef2;
  font: 600 12px Inter, sans-serif;
  cursor: pointer;
}
.ia-player-select:focus {
  outline: none;
  border-color: rgba(210, 174, 109, 0.45);
  box-shadow: 0 0 0 2px rgba(210, 174, 109, 0.12);
}
.ia-mode-hint {
  margin: 0 0 12px;
  font-size: 11px;
  color: #7a8b98;
}
@media (max-width: 640px) {
  .ia-head-row { flex-direction: column; }
  .ia-player-select { width: 100%; min-width: 0; }
}

/* Profile + Instant analytics — equal columns, matched height */
.profile-ia-split {
  padding: 16px 18px !important;
}
.profile-ia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  align-items: stretch;
}
.profile-ia-radar,
.profile-ia-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}
.profile-ia-radar h2,
.profile-ia-panel h2 {
  margin: 0 0 10px;
  font: 700 15px 'Space Grotesk', sans-serif;
  color: #e8eef2;
}
.profile-ia-radar h2 small,
.profile-ia-panel h2 small {
  display: block;
  margin-top: 4px;
  font: 500 11px Inter, sans-serif;
  color: #71818d;
}
.profile-ia-panel {
  padding: 0 0 0 18px;
  border-left: 1px solid rgba(143, 183, 216, 0.12);
}
/* Radar + legend: fixed size so Chart.js can measure the canvas */
.profile-ia-split .profile-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px) !important;
  gap: 12px 14px !important;
  align-items: center !important;
  flex: 0 0 auto;
}
.profile-ia-split .radar-wrap {
  width: 100% !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  margin: 0 !important;
  position: relative !important;
  display: block !important;
  overflow: visible !important;
}
.profile-ia-split .radar-wrap canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
.profile-ia-split .radar-legend {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.profile-ia-split .radar-legend-head {
  margin-bottom: 0 !important;
}
.profile-ia-split .radar-legend-row {
  padding: 6px 8px !important;
  font-size: 12px !important;
}
@media (max-width: 700px) {
  .profile-ia-split .profile-layout {
    grid-template-columns: 1fr !important;
  }
  .profile-ia-split .radar-wrap {
    height: 260px !important;
    min-height: 260px !important;
  }
}
.profile-radar-fill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 183, 216, 0.1);
  min-height: 0;
}
.profile-ia-panel .ia-head-row {
  margin-bottom: 8px;
  flex-shrink: 0;
}
.profile-ia-panel #instantAnalyticsRoot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.profile-ia-panel .ia-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ia-title-with-avatar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ia-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(210, 174, 109, 0.35);
  box-shadow: 0 0 0 3px rgba(210, 174, 109, 0.08), 0 6px 16px rgba(0, 0, 0, 0.25);
  background: #0d1821;
  display: grid;
  place-items: center;
}
.ia-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ia-avatar span {
  font: 700 16px 'Space Grotesk', sans-serif;
  color: #f4e7cf;
}
@media (max-width: 1100px) {
  .profile-ia-grid {
    grid-template-columns: 1fr;
  }
  .profile-ia-panel {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(143, 183, 216, 0.1);
    padding-top: 16px;
  }
  .profile-ia-split .radar-wrap {
    height: 280px !important;
  }
}

/* ---- Under-radar fill (content) ---- */
.prf-fill-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.prf-fill-head strong {
  display: block;
  font: 700 13px 'Space Grotesk', sans-serif;
}
.prf-fill-head small {
  font-size: 10px;
  color: #71818d;
}
.prf-fill-win {
  margin-left: auto;
  text-align: right;
}
.prf-fill-win b {
  display: block;
  font: 700 16px 'JetBrains Mono', monospace;
}
.prf-fill-win span {
  font-size: 10px;
  color: #71818d;
}
.prf-fill-bars { display: flex; flex-direction: column; gap: 6px; }
.prf-fill-row {
  display: grid;
  grid-template-columns: 88px 1fr 42px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.prf-fill-label { color: #9aabba; }
.prf-fill-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.prf-fill-track i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.prf-fill-val {
  text-align: right;
  color: #c5d0d8;
  font-size: 11px;
}
.prf-fill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.prf-tag {
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9aabba;
}
.prf-tag.is-good {
  border-color: rgba(61, 214, 140, 0.35);
  color: #3dd68c;
  background: rgba(61, 214, 140, 0.08);
}
.prf-tag.is-weak {
  border-color: rgba(240, 113, 120, 0.3);
  color: #f0a0a4;
  background: rgba(240, 113, 120, 0.06);
}

/* ---- Clutch + PIS redesign ---- */
.gi-card { margin-top: 20px; }
.gi-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.gi-card-head h2 {
  margin: 0;
  font: 700 15px 'Space Grotesk', sans-serif;
  color: #e8eef2;
}
.gi-card-head h2 small {
  display: block;
  margin-top: 4px;
  font: 500 11px Inter, sans-serif;
  color: #71818d;
}
.gi-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0d1821;
}
.gi-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gi-avatar-fallback {
  font: 700 12px 'Space Grotesk', sans-serif;
  color: #f4e7cf;
}
.gi-clutch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.gi-clutch-card {
  padding: 14px 14px 12px;
  border-radius: 13px;
  border: 1px solid rgba(143, 183, 216, 0.12);
  border-left: 2px solid var(--gi-accent, #e2c27e);
  background: linear-gradient(145deg, rgba(18, 29, 39, 0.92), rgba(8, 15, 22, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 28px rgba(0, 0, 0, 0.16);
}
.gi-clutch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.gi-clutch-id {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gi-clutch-id strong {
  font: 700 13px 'Space Grotesk', sans-serif;
  color: #e8eef2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gi-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at center, rgba(8, 15, 22, 0.96) 56%, transparent 57%),
    conic-gradient(var(--gi-col, #e2c27e) calc(var(--gi-pct, 0) * 1%), rgba(255, 255, 255, 0.08) 0);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.gi-ring span {
  font: 700 12px 'JetBrains Mono', monospace;
  color: #f0f4f7;
}
.gi-metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.gi-metric {
  padding: 8px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.gi-metric span {
  display: block;
  font-size: 9px;
  color: #71818d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.gi-metric b {
  display: block;
  font: 700 14px 'JetBrains Mono', monospace;
  color: #e8eef2;
}
.gi-metric b.is-good { color: #3dd68c; }
.gi-metric b.is-bad { color: #f07178; }
.gi-metric small {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  color: #667682;
}
.gi-footnote {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #71818d;
}
.gi-pis-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gi-pis-row {
  display: grid;
  grid-template-columns: 28px 32px 100px 1fr 56px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(143, 183, 216, 0.1);
  background: linear-gradient(145deg, rgba(18, 29, 39, 0.75), rgba(8, 15, 22, 0.85));
}
.gi-pis-rank {
  font-size: 12px;
  color: #667682;
}
.gi-pis-name {
  font: 700 13px 'Space Grotesk', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gi-pis-bar-wrap { min-width: 0; }
.gi-pis-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 6px;
}
.gi-pis-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.gi-pis-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 10px;
  color: #7a8b98;
}
.gi-pis-meta b {
  color: #c5d0d8;
  font-family: 'JetBrains Mono', monospace;
}
.gi-pis-score {
  text-align: right;
}
.gi-pis-score b {
  display: block;
  font: 700 16px 'JetBrains Mono', monospace;
  color: #e2c27e;
}
.gi-pis-score small {
  font-size: 9px;
  color: #71818d;
  letter-spacing: 0.06em;
}
@media (max-width: 720px) {
  .gi-pis-row {
    grid-template-columns: 24px 28px 1fr 48px;
    grid-template-rows: auto auto;
  }
  .gi-pis-name { grid-column: 3; }
  .gi-pis-bar-wrap { grid-column: 1 / -1; }
  .gi-metric-row { grid-template-columns: 1fr; }
}

/* Full-width clutch + denser profile fill */
.gi-card-full {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.gi-clutch-grid {
  display: grid !important;
  grid-template-columns: repeat(var(--gi-cols, 4), minmax(0, 1fr)) !important;
  width: 100%;
  gap: 12px;
}
.gi-clutch-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .gi-clutch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .gi-clutch-grid {
    grid-template-columns: 1fr !important;
  }
}

.prf-form-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.prf-form-label {
  font-size: 10px;
  color: #71818d;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.prf-form-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.prf-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.prf-dot.is-w { background: #3dd68c; box-shadow: 0 0 8px rgba(61, 214, 140, 0.35); }
.prf-dot.is-l { background: #f07178; box-shadow: 0 0 8px rgba(240, 113, 120, 0.25); }
.prf-form-score {
  font-size: 11px;
  color: #c5d0d8;
}
.prf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.prf-kpi {
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid rgba(143, 183, 216, 0.1);
  background: linear-gradient(145deg, rgba(18, 29, 39, 0.7), rgba(8, 15, 22, 0.85));
}
.prf-kpi span {
  display: block;
  font-size: 9px;
  color: #71818d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.prf-kpi b {
  display: block;
  font: 700 15px 'JetBrains Mono', monospace;
  color: #e8eef2;
}
.prf-kpi small {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: #667682;
}

/* Stretch fill content to match right column height */
.profile-radar-fill .prf-fill-tags {
  margin-top: auto;
  padding-top: 12px;
}
.profile-radar-fill .prf-kpi-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.profile-radar-fill .prf-kpi:last-child:nth-child(odd) {
  grid-column: span 1;
}
@media (max-width: 1200px) {
  .profile-radar-fill .prf-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.profile-ia-split .prf-fill-row {
  grid-template-columns: 72px 1fr 40px;
  gap: 6px;
}
.profile-ia-split .prf-fill-bars {
  gap: 5px;
}

/* Kill legacy team context strip (duplicate of Teams tab) */
#phase2Context,
.phase2-context {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Tighter page header + content on dashboard */
.phase2-pagebar {
  margin: 0 0 10px !important;
  gap: 10px !important;
}
.phase2-page-title {
  margin: 0 0 2px !important;
}
.phase2-page-sub {
  margin: 0 !important;
  max-width: 52ch;
}
.overview-subnav {
  margin-bottom: 12px !important;
}
.main-content {
  padding-top: 4px;
}
/* Summary cards: pull up, less dead air under pagebar */
#ovsub-summary {
  margin-top: 0;
}
#ovsub-summary .dashboard-lower-grid,
#ovsub-summary .grid {
  margin-top: 0;
}
.top-performers-card,
.quick-insights-card {
  min-height: 0;
}

/* Pagebar: fill gap between title and refresh with live chips */
.phase2-pagebar {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.1fr) minmax(0, 2fr) auto !important;
  align-items: center !important;
  gap: 14px 18px !important;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(143, 183, 216, 0.1);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(12, 22, 30, 0.92), rgba(8, 15, 21, 0.88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.phase2-pagebar-left {
  min-width: 0;
}
.phase2-pagebar-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-end;
  min-width: 0;
}
.phase2-pb-chip {
  flex: 1 1 88px;
  min-width: 84px;
  max-width: 140px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(143, 183, 216, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.phase2-pb-chip span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #71818d;
  margin-bottom: 3px;
}
.phase2-pb-chip strong {
  display: block;
  font: 700 13px 'JetBrains Mono', monospace;
  color: #e8eef2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phase2-page-actions {
  justify-self: end;
}
@media (max-width: 900px) {
  .phase2-pagebar {
    grid-template-columns: 1fr auto !important;
  }
  .phase2-pagebar-stats {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .phase2-pb-chip {
    max-width: none;
  }
}

/* Phase 1: boost KPIs + positioning pressure */
.boost-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.boost-kpi-card {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(143, 183, 216, 0.12);
  background: linear-gradient(145deg, rgba(18, 29, 39, 0.75), rgba(8, 15, 22, 0.9));
}
.boost-kpi-name {
  font: 700 13px 'Space Grotesk', sans-serif;
  margin-bottom: 8px;
}
.boost-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.boost-kpi-grid span {
  display: block;
  font-size: 9px;
  color: #71818d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.boost-kpi-grid b {
  font-size: 13px;
  color: #e8eef2;
}
.pos-pressure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.pos-pressure-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(143, 183, 216, 0.12);
  background: linear-gradient(145deg, rgba(18, 29, 39, 0.75), rgba(8, 15, 22, 0.9));
}
.pos-pressure-name {
  font: 700 14px 'Space Grotesk', sans-serif;
  margin-bottom: 10px;
}
.pos-pressure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.pos-pressure-grid div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.pos-pressure-grid span {
  display: block;
  font-size: 9px;
  color: #71818d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.pos-pressure-grid b {
  font-size: 14px;
  color: #e8eef2;
}

/* Phase 2: chart mode toggles */
.chart-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.chart-head-row h2 {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.chart-mode-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(143, 183, 216, 0.18);
  background: rgba(8, 15, 22, 0.85);
  padding: 3px;
  gap: 2px;
}
.chart-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #8a9bab;
  font: 700 11px 'JetBrains Mono', monospace;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.chart-mode-btn:hover {
  color: #d5e0e8;
}
.chart-mode-btn.is-active {
  background: linear-gradient(135deg, rgba(210, 174, 109, 0.28), rgba(61, 169, 252, 0.18));
  color: #f4e7cf;
  box-shadow: 0 0 0 1px rgba(210, 174, 109, 0.25);
}


/* ===== Hero cards: no black ellipse shadows, 3-card layout, team logo + inline prediction ===== */
.dashboard-hero-visual .hero-live-card,
.hero-live-card{
  box-shadow:none !important;
  filter:none !important;
}
.hero-live-card::before,
.hero-live-card::after,
.dashboard-hero-visual .hero-live-card::before,
.dashboard-hero-visual .hero-live-card::after{
  display:none !important;
  content:none !important;
  box-shadow:none !important;
}

.dashboard-hero-visual .hero-card-performance{
  right:4%; top:6%; left:auto; bottom:auto;
  width:min(320px,42%); min-width:240px;
}
.dashboard-hero-visual .hero-card-form{
  right:4%; top:34%; left:auto; bottom:auto;
  width:min(340px,44%); min-width:250px;
}
.dashboard-hero-visual .hero-card-intelligence{
  right:4%; bottom:6%; top:auto; left:auto;
  width:min(320px,42%); min-width:240px;
}
.hero-card-match{display:none !important;}

.hero-team-head{
  display:flex !important;
  align-items:center;
  gap:10px;
}
.hero-team-logo-wrap{
  width:36px; height:90px; flex:0 0 36px;
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(210,174,109,.28);
  background:rgba(8,15,22,.9);
  display:grid; place-items:center;
}
.hero-team-logo-wrap[hidden]{display:none !important;}
.hero-team-logo{
  width:100%; height:100%; object-fit:contain; display:block;
}
.hero-team-logo-fallback{
  font:700 12px 'Space Grotesk',sans-serif;
  color:#e2c27e; letter-spacing:.04em;
}

.hero-inline-prediction{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(143,183,216,.1);
}
.hero-pred-label{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
  font:700 8px Inter,sans-serif; letter-spacing:.12em; color:#6f7d88;
  text-transform:uppercase;
}
.hero-inline-prediction .prediction-grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:8px;
}
.hero-inline-prediction .prediction-grid-3 > div{
  text-align:center;
  padding:6px 4px;
  border-radius:8px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
}
.hero-inline-prediction .prediction-grid-3 span{
  display:block;
  font:700 7px Inter,sans-serif;
  letter-spacing:.08em;
  color:#6f7d88;
  margin-bottom:3px;
}
.hero-inline-prediction .prediction-grid-3 b{
  font:700 14px 'JetBrains Mono',monospace;
  color:#e8eef2;
}
.hero-inline-prediction .prediction-bar-3{
  display:grid;
  height:6px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.hero-inline-prediction .prediction-bar-3 i{
  display:block; height:100%; min-width:0;
}
#heroWinBar{background:linear-gradient(90deg,#3dd68c,#2bb87a);}
#heroOtBar{background:linear-gradient(90deg,#e2c27e,#c9a45a);}
#heroLossBar{background:linear-gradient(90deg,#e58b8b,#c45c5c);}

.dashboard-hero-visual .live-dot{display:none !important;}

@media (max-width:980px){
  .dashboard-hero-visual .hero-card-form,
  .dashboard-hero-visual .hero-card-intelligence{display:none;}
}
@media (max-width:700px){
  .dashboard-hero-visual .hero-card-performance{
    left:0; right:0; top:auto; bottom:0; width:auto; min-width:0;
  }
}

/* ── Display tune (brightness / contrast / sat / temp) ── */
html {
  filter:
    brightness(var(--rl-brightness, 1))
    contrast(var(--rl-contrast, 1))
    saturate(var(--rl-saturate, 1))
    sepia(var(--rl-sepia, 0))
    hue-rotate(var(--rl-hue, 0deg));
}
.topbar-right { position: relative; }
.display-control-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 280px;
  max-height: min(78vh, 560px);
  overflow: auto;
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: #0d1520;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  color: #d5dee6;
}
.display-control-panel[hidden] { display: none !important; }
.dcp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: .02em;
}
.dcp-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.35;
  color: #8a97a4;
  text-wrap: auto;
}
.dcp-close {
  width: 28px; height: 28px;
  border: 0; border-radius: 8px;
  background: transparent; color: #9aa8b5;
  cursor: pointer; font-size: 14px;
}
.dcp-close:hover { background: rgba(255,255,255,.06); color: #fff; }
.dcp-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.dcp-preset {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: #111a24;
  color: #b8c4cc;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.dcp-preset:hover { background: #16202c; color: #fff; }
.dcp-preset.active {
  border-color: rgba(21,217,176,.45);
  color: #15d9b0;
  background: rgba(21,217,176,.08);
}
.dcp-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
  margin: 8px 0;
  font-size: 12px;
  color: #a7b4bf;
}
.dcp-row span { grid-column: 1; }
.dcp-row em {
  grid-column: 2;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: #e8eef3;
  font-weight: 600;
  font-size: 11px;
}
.dcp-row input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: #15d9b0;
  cursor: pointer;
}
.dcp-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 8px;
  font-size: 12px;
  color: #a7b4bf;
  cursor: pointer;
}
.dcp-check input { margin-top: 2px; accent-color: #15d9b0; }
.dcp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.dcp-reset, .dcp-export {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.1));
  background: #111a24;
  color: #c5d0d9;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.dcp-reset:hover, .dcp-export:hover { background: #16202c; color: #fff; }
.dcp-status {
  margin: 8px 0 0;
  font-size: 11px;
  color: #15d9b0;
  text-align: center;
}
#displayToggleBtn.is-open {
  border-color: rgba(21,217,176,.45);
  color: #15d9b0;
}
#sfxToggleTop.is-muted {
  opacity: .55;
}

/* Text clarity boost — muted labels closer to main text */
body.dcp-text-boost {
  --text-muted: #b6c0ca;
}
body.dcp-text-boost .phase2-page-sub,
body.dcp-text-boost .kpi-meta,
body.dcp-text-boost .admin-stat-sub {
  opacity: 1;
}
body.dcp-night .dashboard-hero {
  opacity: .98;
}

/* Match type / format pills in Mečevi table */
.match-type-pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  border:1px solid transparent;
  white-space:nowrap;
}
.match-type-pill.mt-ranked{ background:rgba(61,169,252,.14); color:#7ec8ff; border-color:rgba(61,169,252,.28); }
.match-type-pill.mt-unranked{ background:rgba(167,139,250,.12); color:#c4b5fd; border-color:rgba(167,139,250,.25); }
.match-type-pill.mt-private{ background:rgba(251,191,36,.12); color:#fbbf24; border-color:rgba(251,191,36,.28); }
.match-type-pill.mt-exhibition{ background:rgba(148,163,184,.12); color:#94a3b8; border-color:rgba(148,163,184,.25); }
.match-type-pill.mt-unknown{ background:rgba(255,255,255,.05); color:#9aa4ba; border-color:rgba(255,255,255,.08); }
.match-format-cell{ font-weight:600; color:#c5d0d9; }