/* =====================================================================
   RL ANALIZA — FAZA 2 / PRODUCT UI SYSTEM
   Premium analytics workspace inspired by the supplied DataCoach mockup.
   ===================================================================== */
:root{
  --p2-bg:#050a0f;
  --p2-panel:#0a121a;
  --p2-panel-2:#0d1821;
  --p2-panel-3:#101d27;
  --p2-line:rgba(185,205,220,.11);
  --p2-line-strong:rgba(223,181,101,.27);
  --p2-text:#edf2f5;
  --p2-muted:#7d8b96;
  --p2-dim:#53616c;
  --p2-gold:#e1b66c;
  --p2-gold-2:#f3cf8b;
  --p2-blue:#79a9cf;
  --p2-green:#4fd0aa;
  --p2-red:#e78383;
  --p2-shadow:0 24px 80px rgba(0,0,0,.28);
  --p2-radius:14px;
}

/* App shell refinement */
body.phase2-ready{background:radial-gradient(900px 520px at 76% -5%,rgba(103,146,186,.12),transparent 62%),linear-gradient(180deg,#04080c,#071018 48%,#050a0e);}
.redesigned-app .topbar{height:70px;min-height:70px;background:rgba(4,10,15,.92);border-bottom-color:rgba(192,210,224,.10);}
.redesigned-app .topbar-left{gap:16px;}
.redesigned-app .brand-lockup{min-width:218px;}
.redesigned-app .brand-copy h1{font-size:17px;letter-spacing:-.02em;}
.redesigned-app .brand-copy #heroTagline{font-size:8px;}
.redesigned-app .global-search{height:40px;width:min(410px,36vw);border-radius:9px;background:#09131c;}
.redesigned-app .topbar-right{gap:10px;}

/* Language / utility controls */
.phase2-language{position:relative;}
.phase2-language-btn{height:34px;min-width:42px;padding:0 9px;border:1px solid var(--p2-line);border-radius:9px;background:#09131b;color:#c4cdd3;font:700 9px Inter,sans-serif;cursor:pointer;}
.phase2-language-btn:hover{border-color:var(--p2-line-strong);color:#f2dfba;}
.phase2-language-menu{display:none;position:absolute;right:0;top:41px;width:132px;padding:5px;background:#09131b;border:1px solid var(--p2-line-strong);border-radius:11px;box-shadow:var(--p2-shadow);z-index:400;}
.phase2-language.open .phase2-language-menu{display:block;}
.phase2-language-menu button{width:100%;border:0;background:transparent;color:#8997a2;text-align:left;padding:8px 9px;border-radius:7px;font:600 10px Inter,sans-serif;cursor:pointer;}
.phase2-language-menu button:hover,.phase2-language-menu button.active{background:rgba(225,182,108,.10);color:#efd39d;}

/* Mockup-style hero */
.redesigned-app .dashboard-hero{min-height:390px;margin:18px 26px 14px;padding:46px 42px;border-radius:20px;background:radial-gradient(480px 320px at 78% 54%,rgba(204,162,85,.15),transparent 70%),radial-gradient(420px 280px at 91% 5%,rgba(91,143,185,.16),transparent 65%),linear-gradient(105deg,#0b151e 0%,#071018 54%,#0b161e 100%);}
.redesigned-app .dashboard-hero::before{opacity:.30;}
.redesigned-app .dashboard-hero::after{border-color:rgba(225,182,108,.25);}
.redesigned-app .dashboard-hero-copy{width:min(52%,610px);}
.redesigned-app .dashboard-hero .eyebrow{color:#d7ae63;font-size:9px;letter-spacing:.18em;font-weight:700;}
.redesigned-app .dashboard-hero h2{font-size:clamp(42px,4.2vw,62px);letter-spacing:-.055em;}
.redesigned-app .dashboard-hero h2 span{color:#e9ba68;}
.redesigned-app .dashboard-hero p{font-size:12px;line-height:1.7;color:#a1adb6;max-width:520px;}
.redesigned-app .hero-primary{background:linear-gradient(180deg,#f0c978,#dcae58);box-shadow:0 10px 30px rgba(218,171,84,.16);}
.redesigned-app .hero-secondary{background:rgba(7,15,21,.62);border-color:rgba(225,182,108,.45);}

.phase2-hero-player{position:absolute;z-index:3;right:19%;bottom:-18px;width:min(300px,27vw);height:350px;object-fit:contain;object-position:center bottom;filter:grayscale(.18) contrast(1.08) brightness(.72) drop-shadow(0 24px 35px rgba(0,0,0,.55));mix-blend-mode:screen;opacity:.78;mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 100%);}
.phase2-hero-player::after{content:"";position:absolute;inset:0;}
.phase2-hero-ring{position:absolute;right:7%;top:12%;width:410px;height:410px;border:1px solid rgba(225,182,108,.20);border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 0 34px rgba(225,182,108,.018),0 0 0 68px rgba(225,182,108,.012);}
.phase2-hero-ring.r2{right:0;top:21%;width:530px;height:330px;transform:rotate(-24deg);border-color:rgba(121,169,207,.12);}

/* Context header: player/team/detail pages */
.phase2-context{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin:0 26px 14px;padding:15px 17px;border:1px solid var(--p2-line);border-radius:14px;background:linear-gradient(100deg,rgba(12,22,30,.94),rgba(8,15,21,.90));box-shadow:inset 0 1px 0 rgba(255,255,255,.025);}
.phase2-context-main{display:flex;align-items:center;gap:13px;min-width:0;}
.phase2-context-avatar{width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid rgba(225,182,108,.30);background:#0a141c;}
.phase2-context-avatar.team{object-fit:contain;padding:5px;}
.phase2-context-copy{min-width:0;}
.phase2-context-kicker{font-size:8px;letter-spacing:.16em;color:#657580;text-transform:uppercase;margin-bottom:4px;}
.phase2-context-title{font:700 20px/1.05 'Space Grotesk',sans-serif;color:#edf2f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phase2-context-sub{font-size:9px;color:#74838e;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.phase2-context-metrics{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.phase2-mini-stat{min-width:74px;padding:8px 10px;border:1px solid var(--p2-line);border-radius:9px;background:#09131b;}
.phase2-mini-stat span{display:block;color:#62717c;font-size:7px;text-transform:uppercase;letter-spacing:.08em;}
.phase2-mini-stat strong{display:block;color:#e8eef1;font:700 14px 'JetBrains Mono',monospace;margin-top:3px;}

/* KPI strip */
.redesigned-app .executive-kpis{gap:10px;}
.redesigned-app .exec-kpi{background:linear-gradient(180deg,rgba(13,23,31,.95),rgba(8,15,21,.95));border-color:var(--p2-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 15px 35px rgba(0,0,0,.08);}
.redesigned-app .exec-kpi:hover{border-color:rgba(225,182,108,.18);transform:translateY(-1px);transition:.2s ease;}
.redesigned-app .kpi-label{color:#62717c;letter-spacing:.12em;}
.redesigned-app .kpi-value{font-family:'JetBrains Mono',monospace;letter-spacing:-.04em;}

/* Sidebar / navigation */
.redesigned-app .sidebar{background:linear-gradient(180deg,#060c12,#050a0f);border-right-color:var(--p2-line);}
.redesigned-app .nav-section{margin-bottom:13px;}
.redesigned-app .nav-section-title{font-size:7px;letter-spacing:.19em;color:#465560;}
.redesigned-app .tabbtn{height:36px;border-radius:8px;color:#75848f;font-size:10px;}
.redesigned-app .tabbtn .nav-icon{font-size:12px;}
.redesigned-app .tabbtn.active{background:linear-gradient(90deg,rgba(225,182,108,.19),rgba(225,182,108,.055));box-shadow:inset 3px 0 0 var(--p2-gold),inset 0 1px 0 rgba(255,255,255,.025);color:#f1e4ca;border-color:rgba(225,182,108,.11);}
.redesigned-app .sidebar-upgrade{background:linear-gradient(145deg,rgba(225,182,108,.09),rgba(8,15,21,.58));}

/* Main content header / tab system */
.phase2-pagebar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:4px 0 13px;}
.phase2-pagebar-left{min-width:0;}
.phase2-page-eyebrow{display:block;color:#c99f55;font:700 8px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px;}
.phase2-page-title{margin:0;color:#edf2f5;font:700 28px/1 'Space Grotesk',sans-serif;letter-spacing:-.04em;}
.phase2-page-sub{margin:6px 0 0;color:#6f7e89;font-size:9px;line-height:1.45;}
.phase2-page-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end;}
.phase2-action{height:31px;padding:0 10px;border:1px solid var(--p2-line);border-radius:8px;background:#0a141c;color:#9eabb4;font:700 9px Inter,sans-serif;cursor:pointer;}
.phase2-action.primary{background:linear-gradient(180deg,#eac377,#d6a956);border-color:transparent;color:#17130d;}
.phase2-action:hover{border-color:rgba(225,182,108,.30);color:#ead7ad;}
.phase2-action.primary:hover{color:#17130d;}

/* Cards / grids */
.redesigned-app .card{border-color:var(--p2-line);background:linear-gradient(180deg,rgba(12,22,30,.96),rgba(7,14,20,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 48px rgba(0,0,0,.09);}
.redesigned-app .card h2{font-size:14px;}
.redesigned-app .card h2 small{font-size:8px;}
.redesigned-app .chart-box,.redesigned-app .table-wrap{background:#071119;border-color:rgba(185,205,220,.08);}
.redesigned-app .table-wrap{border-radius:10px;}
.redesigned-app th{background:#09131b;color:#63727d;padding:11px 10px;font-size:7px;}
.redesigned-app td{color:#aab7bf;padding:10px;font-size:9px;}
.redesigned-app tbody tr:hover{background:rgba(121,169,207,.035);}

/* HUD system */
.redesigned-app .hud-row{gap:8px;}
.redesigned-app .hud-card,.phase2-hud{background:linear-gradient(180deg,#09131b,#071018)!important;}
.phase2-hud .hud-label{font-size:7px;color:#61707a;text-transform:uppercase;letter-spacing:.12em;}
.phase2-hud .hud-value{font:700 22px 'JetBrains Mono',monospace;color:#edf2f5;}
.phase2-hud .hud-delta{font-size:8px;color:var(--p2-green);}

/* Filters */
.redesigned-app .filter-dock{background:rgba(7,14,20,.84);border-color:var(--p2-line);}
.redesigned-app .filters{gap:9px;}
.redesigned-app .chip,.redesigned-app .reset-btn,.redesigned-app .ai-btn{border-radius:8px;}
.redesigned-app .chip.active{box-shadow:inset 0 0 0 1px rgba(225,182,108,.12),0 0 18px rgba(225,182,108,.05);}

/* All interactive controls */
.redesigned-app select,.redesigned-app input[type=date],.redesigned-app input[type=text],.redesigned-app input[type=search]{font-family:Inter,sans-serif;}
.redesigned-app button{font-family:Inter,sans-serif;}
.redesigned-app button:focus-visible,.redesigned-app input:focus-visible,.redesigned-app select:focus-visible{outline:2px solid rgba(225,182,108,.45);outline-offset:2px;}

/* AI Coach — new Phase 2 workspace */
.phase2-ai-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:12px;}
.phase2-ai-hero{position:relative;min-height:220px;padding:24px;border-radius:14px;overflow:hidden;background:radial-gradient(400px 220px at 80% 20%,rgba(225,182,108,.15),transparent 68%),linear-gradient(135deg,#0c1821,#071017);border:1px solid rgba(225,182,108,.16);}
.phase2-ai-hero::after{content:'✦';position:absolute;right:34px;top:20px;font-size:110px;color:rgba(225,182,108,.055);transform:rotate(12deg);}
.phase2-ai-kicker{font-size:8px;letter-spacing:.17em;color:#d5a95d;font-weight:700;}
.phase2-ai-title{font:700 30px/1 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:9px 0 9px;color:#edf2f5;max-width:560px;}
.phase2-ai-copy{font-size:10px;line-height:1.65;color:#82919c;max-width:590px;}
.phase2-ai-actions{display:flex;gap:7px;margin-top:17px;flex-wrap:wrap;}
.phase2-ai-insights{display:grid;gap:8px;margin-top:12px;}
.phase2-insight{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--p2-line);border-radius:10px;background:#09131b;}
.phase2-insight-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:rgba(225,182,108,.10);color:#e5bd73;}
.phase2-insight strong{font-size:10px;color:#dce3e7;}
.phase2-insight p{margin:3px 0 0;font-size:8px;line-height:1.45;color:#697985;}
.phase2-insight-score{font:700 12px 'JetBrains Mono',monospace;color:#59d1ad;}
.phase2-coach-list{display:grid;gap:8px;}
.phase2-coach-card{padding:13px;border:1px solid var(--p2-line);border-radius:10px;background:#09131b;}
.phase2-coach-card .coach-head{display:flex;justify-content:space-between;gap:10px;align-items:center;}
.phase2-coach-card .coach-head strong{font-size:10px;color:#e3e9ec;}
.phase2-coach-card .coach-head span{font-size:7px;color:#65747e;}
.phase2-coach-card p{margin:7px 0 0;font-size:9px;line-height:1.55;color:#82909a;}

/* Tabs / sub-tabs */
.redesigned-app .overview-subnav{background:#081119;border-color:var(--p2-line);}
.redesigned-app .ov-subtab-btn{font-size:8px;}
.redesigned-app .ov-subtab-btn.active{background:rgba(225,182,108,.11);color:#e6c57f;}

/* Modal polish */
.redesigned-app + .modal-backdrop,.modal-backdrop{background:rgba(2,6,9,.76);}
.redesigned-app .modal,.modal{border-radius:16px;}

/* Mobile */
@media(max-width:980px){
  .phase2-context{margin-left:15px;margin-right:15px;}
  .phase2-pagebar{align-items:flex-start;flex-direction:column;}
  .phase2-page-actions{justify-content:flex-start;}
  .phase2-ai-grid{grid-template-columns:1fr;}
  .phase2-hero-player{right:4%;width:270px;opacity:.56;}
  .phase2-hero-ring{right:-10%;}
}
@media(max-width:700px){
  .redesigned-app .topbar{height:auto;min-height:62px;}
  .phase2-language-btn{min-width:38px;height:32px;}
  .phase2-context{margin-left:10px;margin-right:10px;padding:12px;grid-template-columns:1fr;}
  .phase2-context-metrics{justify-content:flex-start;}
  .phase2-page-title{font-size:23px;}
  .phase2-ai-title{font-size:25px;}
  .phase2-hero-player{right:-3%;width:230px;height:290px;bottom:-6px;opacity:.42;}
  .phase2-hero-ring{right:-30%;top:30%;width:420px;height:300px;}
  .phase2-ai-hero{padding:18px;}
}
@media(max-width:460px){
  .phase2-mini-stat{min-width:68px;}
  .phase2-mini-stat strong{font-size:12px;}
  .phase2-context-title{font-size:17px;}
  .phase2-insight{grid-template-columns:28px 1fr;}
  .phase2-insight-score{grid-column:2;}
}

/* =====================================================================
   FAZA 2+ PIXEL POLISH — typography, collision prevention & responsive shell
   Goal: preserve the DataCoach visual language while making every surface
   readable and collision-safe from desktop down to compact mobile widths.
   ===================================================================== */
.redesigned-app,
.redesigned-app *{box-sizing:border-box;}
.redesigned-app{font-size:13px;}

/* Header: use flexible zones instead of fixed widths so controls never sit
   on top of one another when the viewport gets narrower. */
.redesigned-app .topbar{
  min-height:70px;
  height:70px;
  padding:0 clamp(14px,2vw,26px);
  gap:16px;
  overflow:visible;
}
.redesigned-app .topbar-left{
  flex:1 1 auto;
  min-width:0;
  gap:14px;
}
.redesigned-app .brand-lockup{
  flex:0 1 auto;
  min-width:190px;
  max-width:245px;
}
.redesigned-app .brand-copy{min-width:0;}
.redesigned-app .brand-copy h1{font-size:18px;}
.redesigned-app .brand-copy #heroTagline{font-size:9px;max-width:220px;}
.redesigned-app .global-search{
  flex:1 1 410px;
  width:auto;
  min-width:220px;
  max-width:410px;
}
.redesigned-app .topbar-right{
  flex:0 0 auto;
  min-width:0;
  gap:9px;
}
.redesigned-app .topbar-scoreline{min-width:0;}
.phase2-language{flex:0 0 auto;z-index:500;}
.phase2-language-btn{font-size:10px;}
.redesigned-app .icon-btn{flex:0 0 auto;}
.redesigned-app .topbar-user{min-width:31px;}
.redesigned-app .user-copy strong{font-size:12px;}
.redesigned-app .user-copy span{font-size:9px;}

/* Readability baseline — replace the previous 7–9px UI text with a usable
   10–12px scale while keeping metadata visually subordinate. */
.redesigned-app .eyebrow{font-size:10px;}
.redesigned-app .hero-features{font-size:11px;}
.redesigned-app .hero-primary,
.redesigned-app .hero-secondary{font-size:12px;}
.redesigned-app .kpi-label{font-size:10px;}
.redesigned-app .kpi-meta{font-size:10px;}
.redesigned-app .tabbtn{font-size:12px;}
.redesigned-app .tabbtn .nav-icon{font-size:14px;}
.redesigned-app .nav-section-title{font-size:9px;}
.redesigned-app .sidebar-brand strong{font-size:13px;}
.redesigned-app .sidebar-brand span{font-size:9px;}
.redesigned-app .sidebar-upgrade strong{font-size:10px;}
.redesigned-app .sidebar-upgrade p{font-size:9px;}
.redesigned-app .sidebar-upgrade button{font-size:10px;}
.redesigned-app .sidebar-admin-link{font-size:10px;}
.redesigned-app .card h2{font-size:16px;}
.redesigned-app .card h2 small{font-size:10px;}
.redesigned-app th{font-size:9px;}
.redesigned-app td{font-size:11px;}
.redesigned-app .metric-select{font-size:11px;}
.redesigned-app .ov-subtab-btn{font-size:10px;}
.redesigned-app .phase2-page-eyebrow{font-size:9px;}
.redesigned-app .phase2-page-sub{font-size:11px;}
.redesigned-app .phase2-action{font-size:11px;}
.redesigned-app .phase2-context-kicker{font-size:9px;}
.redesigned-app .phase2-context-sub{font-size:10px;}
.redesigned-app .phase2-mini-stat span{font-size:8px;}
.redesigned-app .phase2-insight strong{font-size:11px;}
.redesigned-app .phase2-insight p{font-size:9px;}
.redesigned-app .phase2-coach-card .coach-head strong{font-size:11px;}
.redesigned-app .phase2-coach-card .coach-head span{font-size:8px;}
.redesigned-app .phase2-coach-card p{font-size:10px;}
.redesigned-app .phase2-ai-copy{font-size:11px;}

/* Never allow long labels, actions or table content to force a card outside
   its grid track. */
.redesigned-app .phase2-pagebar-left,
.redesigned-app .phase2-context-copy,
.redesigned-app .phase2-context-main,
.redesigned-app .phase2-ai-hero,
.redesigned-app .phase2-coach-card,
.redesigned-app .card,
.redesigned-app .table-wrap,
.redesigned-app .chart-box{min-width:0;}
.redesigned-app .phase2-page-actions{max-width:100%;}
.redesigned-app .phase2-action{white-space:nowrap;}
.redesigned-app table{min-width:620px;}
.redesigned-app .table-wrap{-webkit-overflow-scrolling:touch;}

/* Filter controls get enough height for the larger type and remain inside
   their own row. */
.redesigned-app .filters{align-items:flex-end;}
.redesigned-app .field-lbl{font-size:10px;}
.redesigned-app .filters input,
.redesigned-app .filters select{font-size:11px;min-height:36px;}
.redesigned-app .chip,
.redesigned-app .ai-btn,
.redesigned-app .reset-btn{font-size:11px;min-height:36px;}

/* Header collision breakpoints. */
@media (max-width:1180px){
  .redesigned-app .topbar-scoreline{display:none;}
  .redesigned-app .global-search{max-width:none;}
}
@media (max-width:1080px){
  .redesigned-app .brand-lockup{min-width:180px;max-width:220px;}
  .redesigned-app .brand-copy h1{font-size:17px;}
  .redesigned-app .brand-copy #heroTagline{font-size:8px;}
  .redesigned-app .global-search{min-width:190px;}
  .redesigned-app .topbar-user .user-copy{display:none;}
  .redesigned-app .topbar-user{min-width:31px;}
}

/* Tablet: stack context metrics and page actions before they can collide. */
@media (max-width:980px){
  .redesigned-app .topbar{gap:10px;}
  .redesigned-app .topbar-left{gap:10px;}
  .redesigned-app .global-search{min-width:180px;height:40px;}
  .phase2-context{grid-template-columns:minmax(0,1fr);align-items:start;}
  .phase2-context-metrics{justify-content:flex-start;}
  .phase2-pagebar{align-items:flex-start;}
  .phase2-page-actions{width:100%;}
  .phase2-page-actions .phase2-action{flex:0 0 auto;}
}

/* Mobile: larger touch targets and legible text.
   The header becomes a two-row flex-wrap stack (brand row, then the
   MOD/TIM/PERIOD/DATA context row) instead of using a fixed height with
   the context row pulled out via position:absolute. A fixed height forced
   downstream sections (dashboard-hero, the sidebar drawer) to guess the
   real rendered height with magic-number margins, which is what caused
   the context pills to overlap the hero section below them. Letting the
   header grow to fit its own content removes the guesswork entirely. */
@media (max-width:700px){
  .redesigned-app .topbar{
    height:auto;
    min-height:64px;
    padding:10px;
    gap:8px;
    flex-wrap:wrap;
    row-gap:10px;
  }
  .redesigned-app .topbar-left{gap:8px;}
  .redesigned-app .brand-lockup{min-width:0;max-width:none;gap:8px;}
  .redesigned-app .brand-mark-wrap{width:32px;height:32px;}
  .redesigned-app .brand-logo-img{width:30px;height:30px;}
  .redesigned-app .brand-copy h1{font-size:16px;}
  .redesigned-app .brand-copy #heroTagline{font-size:8px;max-width:150px;letter-spacing:.05em;}
  .redesigned-app .global-search{display:none;}
  .redesigned-app .topbar-right{gap:7px;}
  .redesigned-app .icon-btn{width:36px;height:36px;}
  .redesigned-app .mobile-menu-btn{width:36px;height:36px;}
  .phase2-language-btn{height:36px;min-width:42px;font-size:11px;}

  .redesigned-app .dashboard-hero{margin:10px 10px 12px;padding:25px 18px;}
  .redesigned-app .dashboard-hero .eyebrow{font-size:10px;}
  .redesigned-app .dashboard-hero h2{font-size:clamp(38px,10vw,46px);}
  .redesigned-app .dashboard-hero p{font-size:13px;line-height:1.55;}
  .redesigned-app .hero-features{font-size:11px;line-height:1.35;}
  .redesigned-app .hero-primary,
  .redesigned-app .hero-secondary{min-height:42px;height:42px;padding:0 17px;font-size:12px;}

  .redesigned-app .executive-kpis{gap:8px;}
  .redesigned-app .exec-kpi{padding:14px 12px;min-height:96px;}
  .redesigned-app .kpi-label{font-size:10px;}
  .redesigned-app .kpi-value{font-size:26px;}
  .redesigned-app .kpi-meta{font-size:10px;}

  .redesigned-app .main-content{padding-left:10px;padding-right:10px;}
  .redesigned-app .card{padding:15px;}
  .redesigned-app .card h2{font-size:15px;}
  .redesigned-app .phase2-page-title{font-size:26px;line-height:1.05;}
  .redesigned-app .phase2-page-sub{font-size:11px;}
  .redesigned-app .phase2-page-actions{gap:8px;}
  .redesigned-app .phase2-action{height:38px;min-height:38px;padding:0 13px;font-size:11px;}

  .phase2-context{padding:13px;margin-left:10px;margin-right:10px;}
  .phase2-context-main{gap:11px;}
  .phase2-context-avatar{width:50px;height:50px;}
  .phase2-context-title{font-size:19px;}
  .phase2-context-sub{font-size:11px;}
  .phase2-mini-stat{min-width:82px;padding:9px 10px;}
  .phase2-mini-stat span{font-size:8px;}
  .phase2-mini-stat strong{font-size:14px;}

  .redesigned-app .hud-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .phase2-hud .hud-label{font-size:8px;}
  .phase2-hud .hud-value{font-size:22px;}
  .phase2-hud .hud-delta{font-size:9px;}

  .redesigned-app th{font-size:9px;padding:11px 9px;}
  .redesigned-app td{font-size:11px;padding:10px 9px;}
  .redesigned-app .overview-subnav{gap:4px;padding:4px;}
  .redesigned-app .ov-subtab-btn{padding:9px 11px;font-size:11px;}

  .phase2-ai-title{font-size:28px;}
  .phase2-ai-copy{font-size:11px;}
  .phase2-ai-actions .phase2-action{height:40px;}
  .phase2-insight{grid-template-columns:30px minmax(0,1fr) auto;gap:9px;}
  .phase2-insight p{font-size:10px;}
}

/* Compact phones: keep the header clean and prevent hero floating cards from
   occupying the same vertical band. */
@media (max-width:460px){
  .redesigned-app .topbar{height:auto;min-height:62px;padding:9px;row-gap:9px;}
  .redesigned-app .brand-copy h1{font-size:15px;}
  .redesigned-app .brand-copy #heroTagline{display:none;}
  .redesigned-app .topbar-right{gap:5px;}
  .redesigned-app .icon-btn{width:34px;height:34px;}
  .redesigned-app .mobile-menu-btn{width:34px;height:34px;}
  .phase2-language-btn{height:34px;min-width:40px;padding:0 8px;}

  .redesigned-app .dashboard-hero{min-height:500px;padding:23px 16px;}
  .redesigned-app .dashboard-hero h2{font-size:38px;}
  .redesigned-app .dashboard-hero p{font-size:12px;max-width:100%;}
  .redesigned-app .hero-features{gap:8px 12px;}
  .redesigned-app .hero-features span{white-space:normal;max-width:145px;}
  .redesigned-app .hero-features span:nth-child(n+3){display:flex;}
  .redesigned-app .hero-actions{position:relative;z-index:8;}
  .redesigned-app .hero-primary,.redesigned-app .hero-secondary{flex:1 1 145px;}

  /* Explicit vertical slots: no hero-card overlap on 360–460px phones. */
  .redesigned-app .hero-card-performance{right:8px;top:54%;max-width:145px;}
  .redesigned-app .hero-card-match{left:8px;right:auto;bottom:86px;max-width:150px;}
  .redesigned-app .hero-card-form{right:8px;bottom:12px;max-width:145px;}
  .redesigned-app .hero-center-badge{right:31%;top:49%;transform:translate(50%,-50%) scale(.82);}

  .redesigned-app .executive-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .redesigned-app .exec-kpi{min-height:92px;}
  .redesigned-app .kpi-value{font-size:24px;}
  .redesigned-app .hud-row{grid-template-columns:1fr;}
  .phase2-context-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
  .phase2-mini-stat{min-width:0;}
  .phase2-page-title{font-size:24px;}
  .phase2-page-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
  .phase2-page-actions .phase2-action{width:100%;}
  .redesigned-app .card{padding:13px;}
  .redesigned-app .card h2{font-size:14px;}
  .redesigned-app .filters .group{width:100%;}
  .redesigned-app .filter-dock .filters{padding:12px;}
}

/* =====================================================================
   PHASE 2+ / PIXEL POLISH — unified charts, bars, HUDs & responsive shell
   Visual target: supplied DataCoach mockup — dark navy glass, warm gold
   accents, restrained teal signal, clear hierarchy and generous spacing.
   ===================================================================== */
:root{
  --p2-chart-bg:#071119;
  --p2-chart-grid:rgba(190,210,225,.075);
  --p2-chart-axis:#71818d;
  --p2-teal:#45cbb0;
  --p2-gold-soft:rgba(225,182,108,.22);
}

/* ---------- Header: never let flex items fight for the same space ---------- */
.redesigned-app .topbar-left,
.redesigned-app .topbar-right,
.redesigned-app .topbar-scoreline,
.redesigned-app .topbar-user,
.redesigned-app .brand-lockup,
.redesigned-app .global-search{min-width:0;}
.redesigned-app .brand-lockup{overflow:hidden;}
.redesigned-app .brand-copy{overflow:hidden;}
.redesigned-app .brand-copy h1,
.redesigned-app .brand-copy #heroTagline{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.redesigned-app .global-search{flex:1 1 auto;}
.redesigned-app .topbar-right{white-space:nowrap;}
.redesigned-app .topbar-scoreline{flex:0 1 auto;}
.redesigned-app .topbar-user{flex:0 0 auto;}
.phase2-language-menu{z-index:1000;}

/* ---------- Page bars / context headers ---------- */
.redesigned-app .phase2-pagebar{padding-bottom:2px;}
.redesigned-app .phase2-page-actions{align-items:center;}
.redesigned-app .phase2-context{box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 14px 35px rgba(0,0,0,.10);}
.redesigned-app .phase2-context-metrics{max-width:100%;}
.redesigned-app .phase2-mini-stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.025);}

/* ---------- Mockup-style chart surfaces ---------- */
.redesigned-app .chart-box{
  position:relative;
  min-height:280px;
  padding:15px 15px 12px;
  border:1px solid rgba(185,205,220,.095);
  border-radius:12px;
  background:
    radial-gradient(300px 140px at 92% 0%,rgba(225,182,108,.045),transparent 70%),
    linear-gradient(180deg,#09151e 0%,#071119 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022),0 12px 30px rgba(0,0,0,.08);
  overflow:hidden;
}
.redesigned-app .chart-box::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,182,108,.18),transparent);
  pointer-events:none;
}
.redesigned-app .chart-box canvas{z-index:1;}
.redesigned-app .grid.chart-pair-grid{gap:12px;}

/* ---------- Every horizontal performance bar follows one visual language ---------- */
.redesigned-app .bar-track,
.redesigned-app .meter-track,
.redesigned-app .chem-combo-card .bar-track,
.redesigned-app .beff-row .bar-track,
.redesigned-app .metric-summary-row .bar-track{
  background:linear-gradient(180deg,#111d26,#0b141b);
  border:1px solid rgba(185,205,220,.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.redesigned-app .bar-fill,
.redesigned-app .meter-fill,
.redesigned-app .chem-combo-card .bar-fill,
.redesigned-app .beff-row .bar-fill,
.redesigned-app .metric-summary-row .bar-fill{
  min-width:2px;
  box-shadow:0 0 12px rgba(225,182,108,.14),inset 0 1px 0 rgba(255,255,255,.16);
}
.redesigned-app .metric-summary-row{min-height:34px;}
.redesigned-app .metric-summary-row .bar-track{height:9px;}
.redesigned-app .beff-row .bar-track{height:9px;}

/* ---------- KPI / HUD cards: same surface, same signal treatment ---------- */
.redesigned-app .exec-kpi,
.redesigned-app .hud-card,
.redesigned-app .hud-gauge-card,
.redesigned-app .phase2-hud{
  position:relative;
  overflow:hidden;
}
.redesigned-app .exec-kpi::before,
.redesigned-app .hud-card::before,
.redesigned-app .hud-gauge-card::before,
.redesigned-app .phase2-hud::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,182,108,.28),transparent);
  pointer-events:none;
}
.redesigned-app .hud-gauge-card{border-color:rgba(185,205,220,.10);background:linear-gradient(180deg,#0a151e,#071119);}
.redesigned-app .hud-ring-wrap{filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));}
.redesigned-app .hud-ring-track{stroke:#17232d;}
.redesigned-app .hud-gauge-name{color:#dbe3e8;}
.redesigned-app .hud-gauge-sub{color:#74848f;}
.redesigned-app .hud-compass-legend span{font-size:10px;}

/* ---------- Tables: dense like the mockup, but readable ---------- */
.redesigned-app .table-wrap{background:linear-gradient(180deg,#07131c,#061018);box-shadow:inset 0 1px 0 rgba(255,255,255,.018);}
.redesigned-app table{border-collapse:separate;border-spacing:0;}
.redesigned-app th{font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(185,205,220,.09);}
.redesigned-app td{border-bottom:1px solid rgba(185,205,220,.055);}
.redesigned-app tbody tr:last-child td{border-bottom:0;}
.redesigned-app tbody tr:hover td{background:rgba(225,182,108,.028);}

/* ---------- Tabs / filters ---------- */
.redesigned-app .overview-subnav{border:1px solid rgba(185,205,220,.08);background:#071119;border-radius:10px;padding:4px;}
.redesigned-app .ov-subtab-btn{min-height:36px;border-radius:7px;}
.redesigned-app .filter-dock{box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 12px 30px rgba(0,0,0,.07);}
.redesigned-app .filters input,
.redesigned-app .filters select{background:#09151e;border-color:rgba(185,205,220,.11);color:#d7e0e5;}
.redesigned-app .filters input::placeholder{color:#596a76;}

/* ---------- Modals ---------- */
.redesigned-app + .modal-backdrop,
.modal-backdrop{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.redesigned-app .modal,
.modal{
  background:linear-gradient(180deg,#0b1720,#071018);
  border:1px solid rgba(225,182,108,.18);
  box-shadow:0 30px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.025);
}
.redesigned-app .modal h3,.modal h3{color:#edf2f5;}

/* ---------- Responsive chart/HUD sizing ---------- */
@media (max-width:980px){
  .redesigned-app .chart-box{min-height:260px;}
  .redesigned-app .grid.chart-pair-grid{grid-template-columns:1fr;}
  .redesigned-app .phase2-context-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
  .redesigned-app .chart-box{min-height:245px;padding:12px 10px 10px;}
  .redesigned-app .grid.chart-pair-grid{gap:10px;}
  .redesigned-app .metric-summary-row{grid-template-columns:18px 9px minmax(72px,.7fr) minmax(80px,1fr) 50px 76px;}
  .redesigned-app .metric-summary-row .pname{flex-basis:auto;}
  .redesigned-app .phase2-context-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .redesigned-app .hud-gauge-card{padding:13px 10px 11px;}
  .redesigned-app .hud-ring-wrap{width:100px;height:100px;}
}
@media (max-width:460px){
  .redesigned-app .topbar-left{flex:1 1 auto;min-width:0;}
  .redesigned-app .topbar-right{flex:0 0 auto;}
  .redesigned-app .brand-lockup{max-width:155px;}
  .redesigned-app .chart-box{min-height:230px;padding:10px 8px 8px;}
  .redesigned-app .phase2-context-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .redesigned-app .phase2-mini-stat{padding:8px 9px;}
  .redesigned-app .phase2-page-actions{grid-template-columns:1fr 1fr;}
}


/* =====================================================================
   FINAL MOCKUP POLISH — HUD / CHART / HEADER SYSTEM
   ===================================================================== */
:root{
  --mockup-navy:#07131d;
  --mockup-navy-2:#0a1823;
  --mockup-gold:#e7b965;
  --mockup-gold-soft:rgba(231,185,101,.16);
  --mockup-teal:#26b7a0;
  --mockup-line:rgba(153,183,204,.13);
}

/* Header: one stable row, no collisions */
.topbar{grid-template-columns:auto minmax(220px,1fr) auto;}
.topbar-left{flex:1 1 auto;min-width:0;gap:18px;}
.topbar-right{flex:0 1 auto;min-width:0;gap:12px;}
.brand-lockup{flex:0 0 auto;min-width:188px;}
.global-search{flex:1 1 360px;width:auto;min-width:180px;max-width:420px;}
.topbar-scoreline{min-width:0;flex:0 1 auto;gap:14px;}
.topbar-user{flex:0 0 auto;min-width:116px;}

/* Mockup-style hero with player visual isolated to the right */
.redesigned-app .dashboard-hero{isolation:isolate;}
.dashboard-hero-visual{z-index:2;}
.dashboard-hero-copy{z-index:8;}
.hero-player-frame{position:absolute;right:22%;top:-12px;width:430px;height:420px;overflow:hidden;z-index:2;pointer-events:none;opacity:.94;filter:saturate(.82) contrast(1.04);}
.hero-player-image{position:absolute;right:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;mix-blend-mode:screen;opacity:.68;filter:brightness(.62) contrast(1.16) saturate(.72);}
.hero-player-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#08121a 0%,rgba(8,18,26,.64) 17%,rgba(8,18,26,.05) 52%,rgba(8,18,26,.18) 100%),linear-gradient(0deg,rgba(5,11,16,.92) 0%,transparent 32%,rgba(5,11,16,.18) 100%);}
.hero-player-edge{position:absolute;inset:8px 8px 0 auto;width:70%;border-left:1px solid rgba(231,185,101,.14);transform:skewX(-18deg);opacity:.65;}
.hero-center-badge{z-index:6;right:32%;top:42%;}
.hero-card-performance{z-index:9;right:8%;top:15%;}
.hero-card-form{z-index:9;right:4%;bottom:12%;}
.hero-card-match{z-index:9;right:30%;bottom:8%;}
.hero-avatar-stack{z-index:8;right:42%;bottom:9%;}

/* Straight-line radar / hexagon: never rounded */
.radar-wrap canvas{filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));}

/* Small player cards / mini graph labels sit vertically centered */
.prec-card .name,.power-rank-name,.pname,.rotation-rank-name,.hud-gauge-name,.demo-duel-name{display:flex;align-items:center;justify-content:center;min-height:24px;text-align:center;line-height:1.15;}
.prec-card .name{margin-bottom:5px;}

/* SaaS icon language — clean line icons, no mixed emoji */
.nav-icon,.search-result>span,.hero-features i{font-family:Inter,sans-serif;font-style:normal;}
.nav-icon{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;color:#7e8d99;}
.nav-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tabbtn.active .nav-icon{color:var(--mockup-gold);}
.hero-features i{width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(231,185,101,.32);border-radius:6px;font-size:10px;}

/* Mockup chart language: squared/clean bars, thin axes, restrained glow */
.chart-box,.chart-box canvas{border-radius:0;}
.redesigned-app .chart-box{background:#07131d;border:1px solid var(--mockup-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);}
.redesigned-app .bar-track,.redesigned-app .boost-track{height:7px;border-radius:2px;background:#14232e;border:1px solid rgba(151,181,202,.08);}
.redesigned-app .bar-fill{border-radius:1px;box-shadow:0 0 9px rgba(38,183,160,.10);}
.rotation-rank-track{height:11px;border-radius:2px;background:#13212b;border:1px solid rgba(151,181,202,.08);}
.rotation-rank-fill{border-radius:1px;box-shadow:none;}
.rotation-rank-avgline{width:1px;background:rgba(231,185,101,.65);}
.demo-duel-track{height:18px;}
.demo-duel-half{height:7px;}
.demo-duel-bar{border-radius:1px;box-shadow:none;}
.demo-duel-center{height:18px;width:1px;background:rgba(231,185,101,.42);}

/* Chart cards and HUDs echo the mockup: dark panels, gold/teal signal */
.hud-card,.hud-gauge-card,.analysis-section{background:#07131d!important;border-color:var(--mockup-line)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02);}
.hud-gauge-card{border-radius:10px;}
.hud-gauge-name{font-size:12px;letter-spacing:.02em;}

/* Larger readable type on small screens; never let text collapse into the HUD */
.card h2{font-size:16px;}
.card h2 small{font-size:10px;}
.exec-kpi .kpi-label{font-size:10px;}
.exec-kpi .kpi-value{font-size:28px;}

@media (max-width:1180px){
  .topbar{padding:0 18px;gap:12px;}
  .topbar-left{gap:12px;}
  .brand-lockup{min-width:165px;}
  .global-search{max-width:330px;}
  .topbar-scoreline{display:none;}
  .hero-player-frame{right:16%;width:390px;height:400px;}
  .hero-center-badge{right:29%;}
  .hero-card-match{right:27%;}
}
@media (max-width:900px){
  .global-search{display:none;}
  .topbar-user .user-copy{display:none;}
  .brand-lockup{min-width:0;}
  .hero-player-frame{right:-5%;top:20px;width:370px;height:390px;opacity:.64;}
  .hero-card-performance{right:4%;top:45%;}
  .hero-card-form{right:4%;bottom:9%;}
  .hero-card-match{left:4%;right:auto;bottom:8%;}
  .hero-center-badge{right:34%;top:47%;}
}
@media (max-width:600px){
  .topbar{min-height:64px;padding:0 11px;}
  .brand-copy h1{font-size:15px;}
  .brand-copy #heroTagline{font-size:8px;max-width:145px;}
  .icon-btn{width:36px;height:36px;}
  .dashboard-hero{overflow:hidden;}
  .hero-player-frame{right:-18%;top:70px;width:330px;height:350px;opacity:.42;}
  .hero-center-badge{width:82px;height:82px;right:28%;top:49%;}
  .hero-center-badge span{font-size:20px;}
  .hero-floating-card{min-width:132px;padding:11px 12px;}
  .hero-floating-card strong{font-size:20px;}
  .hero-card-performance{right:3%;top:49%;}
  .hero-card-form{right:3%;bottom:5%;}
  .hero-card-match{left:3%;bottom:5%;min-width:145px;}
  .hero-avatar-stack{display:none;}
  .exec-kpi .kpi-label{font-size:9px;}
  .exec-kpi .kpi-value{font-size:25px;}
  .card h2{font-size:14px;}
  .card h2 small{font-size:9px;}
}

/* ---------- FINAL HERO / DASHBOARD CONTEXT POLISH ---------- */
.redesigned-app .dashboard-hero{
  min-height:430px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(620px 390px at 78% 48%,rgba(210,174,109,.10),transparent 66%),
    radial-gradient(480px 320px at 94% 0%,rgba(86,133,171,.12),transparent 66%),
    linear-gradient(104deg,#071018 0%,#07131c 49%,#08131b 100%);
}
.redesigned-app .dashboard-hero::after{
  width:62%;height:170%;right:-10%;top:-36%;
  border-radius:50%;border-color:rgba(225,182,108,.18);
  box-shadow:0 0 0 28px rgba(225,182,108,.014),0 0 0 56px rgba(121,169,207,.012);
}
.redesigned-app .dashboard-hero-visual{inset:0;z-index:2;overflow:hidden;pointer-events:none;}
.redesigned-app .hero-player-frame{
  right:15%;top:-20px;width:min(560px,47%);height:calc(100% + 20px);
  z-index:2;opacity:.94;overflow:hidden;
  border-left:1px solid rgba(225,182,108,.10);
  background:linear-gradient(90deg,rgba(6,15,22,.98),rgba(7,14,20,.25) 30%,transparent 100%);
}
.redesigned-app .hero-player-image{
  width:100%;height:100%;
  object-fit:cover;object-position:50% 14%;
  mix-blend-mode:screen;opacity:.60;
  filter:brightness(.52) contrast(1.14) saturate(.62);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 78%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 18%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 20%,#000 78%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 18%,#000 100%);
}
.redesigned-app .hero-player-vignette{
  background:
    linear-gradient(90deg,#071018 0%,rgba(7,16,24,.72) 12%,rgba(7,16,24,.18) 46%,rgba(7,16,24,.05) 72%,rgba(7,16,24,.44) 100%),
    linear-gradient(0deg,rgba(5,11,16,.96) 0%,transparent 27%,rgba(5,11,16,.16) 100%);
}
.redesigned-app .hero-player-edge{right:4%;width:58%;border-left-color:rgba(225,182,108,.12);}
.redesigned-app .hero-center-badge{
  right:30%;top:43%;width:104px;height:104px;z-index:7;
  background:radial-gradient(circle at 35% 28%,#243746,#09121a 72%);
}
.redesigned-app .hero-floating-card{
  z-index:9;min-width:166px;padding:14px 15px;border-radius:10px;
  background:linear-gradient(180deg,rgba(8,17,25,.94),rgba(6,13,19,.94));
  border:1px solid rgba(185,205,220,.13);
  box-shadow:0 22px 55px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.025);
}
.redesigned-app .hero-card-performance{right:5.5%;top:14%;}
.redesigned-app .hero-card-form{right:3.2%;bottom:12%;}
.redesigned-app .hero-card-match{right:30%;bottom:8%;min-width:188px;}
.redesigned-app .hero-avatar-stack{display:none;}
.redesigned-app .phase2-hero-player{display:none!important;}

/* Dashboard context is a scope header, not a player card. Player identity appears only on player-specific pages. */
.redesigned-app #phase2Context{
  margin:0 26px 12px;padding:13px 16px;
  grid-template-columns:minmax(0,1fr) auto;
  border-radius:10px;
  background:linear-gradient(105deg,#0a151e,#08121a);
}
.redesigned-app #phase2Context .phase2-context-avatar{
  width:42px;height:42px;border-radius:9px;object-fit:contain;padding:5px;
  border-color:rgba(225,182,108,.22);
}
.redesigned-app #phase2Context .phase2-context-title{font-size:18px;}
.redesigned-app #phase2Context .phase2-context-sub{font-size:10px;}
.redesigned-app #phase2Context .phase2-mini-stat{min-width:78px;padding:7px 9px;border-radius:7px;}
.redesigned-app #phase2Context .phase2-mini-stat span{font-size:7px;}
.redesigned-app #phase2Context .phase2-mini-stat strong{font-size:13px;}

@media (max-width:980px){
  .redesigned-app .hero-player-frame{right:6%;width:52%;height:100%;}
  .redesigned-app .hero-card-performance{right:3%;top:13%;}
  .redesigned-app .hero-card-form{right:2%;bottom:10%;}
  .redesigned-app .hero-card-match{right:28%;bottom:7%;}
}
@media (max-width:700px){
  .redesigned-app .dashboard-hero{min-height:510px;}
  .redesigned-app .hero-player-frame{right:-12%;top:96px;width:72%;height:410px;opacity:.62;}
  .redesigned-app .hero-center-badge{right:30%;top:55%;transform:translate(50%,-50%) scale(.78);}
  .redesigned-app .hero-card-performance{right:8px;top:54%;}
  .redesigned-app .hero-card-match{left:8px;right:auto;bottom:76px;}
  .redesigned-app .hero-card-form{right:8px;bottom:12px;}
  .redesigned-app #phase2Context{margin:0 10px 10px;grid-template-columns:1fr;gap:10px;}
  .redesigned-app #phase2Context .phase2-context-metrics{justify-content:flex-start;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:460px){
  .redesigned-app .dashboard-hero{min-height:525px;}
  .redesigned-app .hero-player-frame{right:-20%;width:88%;height:390px;top:108px;opacity:.48;}
  .redesigned-app .hero-card-performance{top:57%;max-width:145px;min-width:0;}
  .redesigned-app .hero-card-match{bottom:80px;min-width:145px;}
  .redesigned-app .hero-card-form{bottom:10px;min-width:145px;}
  .redesigned-app #phase2Context .phase2-context-metrics{grid-template-columns:repeat(3,minmax(0,1fr));}
  .redesigned-app #phase2Context .phase2-mini-stat{min-width:0;}
}

/* FINAL MOCKUP HERO BACKGROUND — supplied DataCoach reference visual */
.redesigned-app .dashboard-hero-visual{
  background-image:url('images/datacoach-hero-mockup.png');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 100%;
}
/* The supplied mockup already contains the athlete + floating data cards, so do not render a second copy over it. */
.redesigned-app .hero-player-frame,
.redesigned-app .hero-center-badge,
.redesigned-app .hero-card-performance,
.redesigned-app .hero-card-form,
.redesigned-app .hero-card-match,
.redesigned-app .hero-avatar-stack,
.redesigned-app .hero-orbit,
.redesigned-app .hero-glow{
  display:none !important;
}
.redesigned-app .dashboard-hero-visual::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,16,24,0) 0%,rgba(7,16,24,0) 42%,rgba(7,16,24,.08) 58%,rgba(7,16,24,.16) 100%);
  pointer-events:none;
}
@media (max-width:900px){
  .redesigned-app .dashboard-hero-visual{background-size:auto 92%;background-position:108% center;opacity:.92;}
}
@media (max-width:620px){
  .redesigned-app .dashboard-hero-visual{background-size:auto 78%;background-position:125% 56%;opacity:.56;}
}

/* ===== LIVE MOCKUP HERO — FULL-WIDTH SCENE + DATA-DRIVEN HUD ===== */
.redesigned-app .dashboard-hero{
  min-height:520px;
  background:#071018 url('images/datacoach-hero-scene.png') center center/cover no-repeat;
  position:relative;
}
.redesigned-app .dashboard-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,13,20,.96) 0%,rgba(5,13,20,.90) 20%,rgba(5,13,20,.56) 43%,rgba(5,13,20,.10) 67%,rgba(5,13,20,.22) 100%),
    linear-gradient(0deg,rgba(4,10,15,.88) 0%,transparent 30%,rgba(4,10,15,.12) 100%);
}
.redesigned-app .dashboard-hero::after{z-index:1;pointer-events:none;}
.redesigned-app .dashboard-hero-copy{position:relative;z-index:8;max-width:620px;}
.redesigned-app .dashboard-hero-visual{position:absolute;inset:0;z-index:6;pointer-events:none;background:none!important;overflow:hidden;}
.redesigned-app .dashboard-hero-visual::before{content:"";display:none;}
.redesigned-app .hero-live-card{
  position:absolute;z-index:12;pointer-events:none;
  border:1px solid rgba(126,171,198,.22);
  background:linear-gradient(180deg,rgba(7,19,29,.91),rgba(4,13,20,.88));
  box-shadow:0 22px 55px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#edf4f7;border-radius:10px;
}
.redesigned-app .hero-card-performance{left:52%;right:auto;top:22%;width:330px;padding:16px 17px;}
.redesigned-app .hero-card-form{right:3.8%;left:auto;top:13%;width:330px;padding:16px 17px;}
.redesigned-app .hero-card-match{right:2.6%;left:auto;top:52%;width:310px;padding:16px 17px;}
.redesigned-app .hero-card-intelligence{left:56%;right:auto;bottom:7%;width:390px;padding:15px 17px;}
.hero-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
.hero-card-head small{font:600 10px/1.2 Inter,sans-serif;letter-spacing:.13em;color:#b9c7cf;}
.live-dot,.model-tag{font:700 8px/1 Inter,sans-serif;letter-spacing:.1em;padding:5px 7px;border:1px solid rgba(21,215,176,.25);border-radius:999px;color:#19d9b2;background:rgba(21,215,176,.07);}
.model-tag{color:#e7bd6a;border-color:rgba(231,189,106,.24);background:rgba(231,189,106,.06);}
.perf-main{display:grid;grid-template-columns:116px 1fr;gap:17px;align-items:center;}
.hero-ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(#efbf63 0 78%,rgba(239,191,99,.12) 78% 100%);}
.hero-ring::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#08151f;border:1px solid rgba(255,255,255,.05);}
.hero-ring span,.hero-ring em{position:relative;z-index:1;display:block;text-align:center;}
.hero-ring span{font:700 27px/1 Space Grotesk,sans-serif;color:#f3f6f7;}
.hero-ring em{font:500 9px/1.4 Inter,sans-serif;color:#8d9ba4;font-style:normal;margin-top:4px;}
.perf-lines>div,.intel-lines>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px solid rgba(135,169,190,.11);font:500 11px/1.2 Inter,sans-serif;}
.perf-lines>div:last-child,.intel-lines>div:last-child{border-bottom:0;}
.perf-lines span,.intel-lines span{color:#9baab4;}.perf-lines b,.intel-lines b{color:#1ad8b2;font-weight:700;}
.hero-live-value{font:700 22px/1 Space Grotesk,sans-serif;color:#18d9b1;}
.hero-card-sub{font:500 9px/1.3 Inter,sans-serif;color:#81919a;display:block;margin-bottom:5px;}
.hero-trend-chart{display:block;width:100%;height:70px;overflow:visible;}
.prediction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px;}
.prediction-grid div{text-align:left;}.prediction-grid span{display:block;font:500 8px/1 Inter,sans-serif;color:#8f9da6;letter-spacing:.08em;margin-bottom:5px;}.prediction-grid b{font:700 19px/1 Space Grotesk,sans-serif;color:#eef4f5;}
.prediction-grid div:first-child b{color:#efbf63;}.prediction-grid div:last-child b{color:#1bd8b2;}
.prediction-bar{height:8px;display:grid;grid-template-columns:48fr 23fr 29fr;gap:3px;margin-top:12px;border-radius:999px;overflow:hidden;background:#10202c;}
.prediction-bar i{display:block;height:100%;}.prediction-bar i:nth-child(1){background:#efbf63;}.prediction-bar i:nth-child(2){background:#17d2ae;}.prediction-bar i:nth-child(3){background:#294255;}
.intel-grid{display:grid;grid-template-columns:165px 1fr;gap:18px;align-items:center;}
.mini-pitch{height:92px;border:1px solid rgba(27,215,179,.35);background:linear-gradient(135deg,rgba(10,92,79,.42),rgba(6,30,38,.85));position:relative;overflow:hidden;}
.mini-pitch::before,.mini-pitch::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(108,214,196,.22);}.mini-pitch::before{left:50%;}.mini-pitch::after{left:17%;box-shadow:108px 0 0 rgba(108,214,196,.22);}
.mini-pitch span{position:absolute;width:13px;height:13px;border-radius:50%;background:#efbf63;box-shadow:0 0 16px rgba(239,191,99,.7);transform:translate(-50%,-50%);}
#intelDotA{left:58%;top:46%;}.mini-pitch #intelDotB{left:39%;top:58%;background:#16d9b2;}.mini-pitch #intelDotC{left:72%;top:28%;background:#f1f4f5;box-shadow:0 0 12px rgba(241,244,245,.45);}
@media (max-width:1100px){
  .redesigned-app .dashboard-hero{min-height:550px;}
  .redesigned-app .hero-card-performance{left:48%;right:auto;top:19%;width:300px;}
  .redesigned-app .hero-card-form{right:2%;left:auto;top:10%;width:300px;}
  .redesigned-app .hero-card-match{right:2%;left:auto;top:51%;width:285px;}
  .redesigned-app .hero-card-intelligence{left:50%;right:auto;bottom:5%;width:360px;}
}
@media (max-width:760px){
  .redesigned-app .dashboard-hero{min-height:700px;background-position:68% center;}
  .redesigned-app .dashboard-hero::before{background:linear-gradient(180deg,rgba(5,13,20,.94) 0%,rgba(5,13,20,.72) 38%,rgba(5,13,20,.30) 66%,rgba(5,13,20,.82) 100%);}
  .redesigned-app .dashboard-hero-copy{max-width:100%;}
  .redesigned-app .hero-card-performance{left:12px;right:auto;top:56%;width:calc(50% - 18px);}
  .redesigned-app .hero-card-form{right:12px;top:56%;width:calc(50% - 18px);}
  .redesigned-app .hero-card-match{left:12px;right:auto;top:auto;bottom:92px;width:calc(50% - 18px);}
  .redesigned-app .hero-card-intelligence{right:12px;left:auto;bottom:92px;width:calc(50% - 18px);}
  .perf-main{grid-template-columns:76px 1fr;gap:10px;}.hero-ring{width:72px;height:72px;}.hero-ring::before{inset:6px;}.hero-ring span{font-size:20px;}.perf-lines>div,.intel-lines>div{font-size:9px;padding:4px 0;}
  .hero-card-head small{font-size:8px;}.hero-live-value{font-size:17px;}.intel-grid{grid-template-columns:1fr;gap:8px;}.mini-pitch{height:54px;}
}
@media (max-width:480px){
  .redesigned-app .dashboard-hero{min-height:780px;}
  .redesigned-app .hero-card-performance,.redesigned-app .hero-card-form,.redesigned-app .hero-card-match,.redesigned-app .hero-card-intelligence{left:10px;right:10px;width:auto;}
  .redesigned-app .hero-card-performance{top:54%;}.redesigned-app .hero-card-form{top:auto;bottom:220px;}.redesigned-app .hero-card-match{bottom:105px;}.redesigned-app .hero-card-intelligence{bottom:10px;}
}
.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{display:block!important;}
/* Hide the pre-rendered card artwork inside the background image; live DOM HUDs sit above it. */
.redesigned-app .dashboard-hero-visual::after{
  content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
background:
  linear-gradient(
    90deg,
    rgba(5, 13, 20, .92) 0%,
    rgba(5, 13, 20, .82) 28%,
    rgba(5, 13, 20, .55) 48%,
    rgba(5, 13, 20, .18) 68%,
    transparent 100%
  ),
  linear-gradient(
    180deg,
    rgba(5, 13, 20, .35) 0%,
    transparent 35%,
    transparent 65%,
    rgba(5, 13, 20, .45) 100%
  );
}
.redesigned-app .hero-live-card{z-index:14;}

/* HERO / FINAL NON-OVERLAP GRID
   Four live HUD cards occupy four dedicated visual zones.  The background player
   remains visible between them; cards never share the same horizontal lane. */
@media (min-width:761px){
  .redesigned-app .dashboard-hero-visual{isolation:isolate;}
  .redesigned-app .hero-card-performance{left:51%;right:auto;top:20%;width:320px;}
  .redesigned-app .hero-card-form{right:3%;left:auto;top:10%;width:315px;}
  .redesigned-app .hero-card-match{right:3%;left:auto;top:54%;width:295px;}
  .redesigned-app .hero-card-intelligence{left:54%;right:auto;bottom:6%;width:370px;}
}
@media (min-width:761px) and (max-width:1100px){
  .redesigned-app .hero-card-performance{left:46%;top:18%;width:280px;}
  .redesigned-app .hero-card-form{right:2%;top:9%;width:280px;}
  .redesigned-app .hero-card-match{right:2%;top:53%;width:270px;}
  .redesigned-app .hero-card-intelligence{left:48%;bottom:5%;width:320px;}
}

/* =====================================================================
   FINAL UX PASS — SaaS iconography, readable top metrics, sharp analytics
   ===================================================================== */
.redesigned-app .topbar-scoreline .score-item .num{font-size:18px;line-height:1.05;font-weight:700;letter-spacing:-.02em;}
.redesigned-app .topbar-scoreline .score-item .lbl{font-size:10px;letter-spacing:.055em;color:#82909a;}
.redesigned-app .topbar-scoreline{gap:20px;}
.redesigned-app .icon-btn{display:grid;place-items:center;padding:0;}

/* Clean line-icon language — replaces mixed unicode glyphs/emoji in the SaaS UI. */
.redesigned-app .saas-icon{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.redesigned-app .tabbtn .nav-icon{width:20px;height:20px;display:grid;place-items:center;font-size:0;color:#71818d;}
.redesigned-app .tabbtn .nav-icon .saas-icon{width:16px;height:16px;}
.redesigned-app .tabbtn.active .nav-icon{color:var(--p2-gold);}
.redesigned-app .hero-features i{width:24px;height:24px;display:inline-grid;place-items:center;border:1px solid rgba(225,182,108,.22);border-radius:7px;color:var(--p2-gold);font-style:normal;}
.redesigned-app .hero-features i .saas-icon{width:13px;height:13px;}
.redesigned-app .hero-primary span,.redesigned-app .hero-secondary span,.redesigned-app .ai-btn span{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;}
.redesigned-app .hero-primary .saas-icon{width:15px;height:15px;}
.redesigned-app .hero-secondary .saas-icon,.redesigned-app .ai-btn .saas-icon{width:14px;height:14px;}
.redesigned-app .saas-heading-icon{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:7px;vertical-align:-6px;border:1px solid rgba(225,182,108,.18);border-radius:7px;background:rgba(225,182,108,.055);color:var(--p2-gold);}
.redesigned-app .saas-heading-svg{width:14px;height:14px;}
.redesigned-app .saas-inline-icon{display:inline-flex;vertical-align:-2px;align-items:center;justify-content:center;margin:0 2px;line-height:1;color:var(--p2-gold);}
.redesigned-app .saas-inline-icon .saas-icon{width:14px;height:14px;}

/* Hero cards explicitly state the active player/team scope. */
.redesigned-app .hero-card-head>div:first-child{display:grid;gap:3px;min-width:0;}
.redesigned-app .hero-card-context{display:block;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7f909b;font:500 10px/1.2 Inter,sans-serif;letter-spacing:.01em;}
.redesigned-app .hero-card-head small{font-size:10px;}

/* Charts/bars: no visual softness, stronger contrast and the same DataCoach
   chart language across Boost, Movement, Positioning and Demolition. */
.redesigned-app #tab-boost .chart-box,
.redesigned-app #tab-movement .chart-box,
.redesigned-app #tab-positioning .chart-box,
.redesigned-app #tab-demos .chart-box{
  min-height:300px;
  background:
    radial-gradient(320px 150px at 90% 0%,rgba(225,182,108,.055),transparent 70%),
    linear-gradient(180deg,#09151e 0%,#071119 100%);
  border-color:rgba(185,205,220,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 26px rgba(0,0,0,.12);
}
.redesigned-app #tab-boost .chart-box canvas,
.redesigned-app #tab-movement .chart-box canvas,
.redesigned-app #tab-positioning .chart-box canvas,
.redesigned-app #tab-demos .chart-box canvas{
  display:block!important;
  opacity:1!important;
  filter:none!important;
  image-rendering:auto;
}
.redesigned-app #tab-boost .bar-track,
.redesigned-app #tab-movement .bar-track,
.redesigned-app #tab-positioning .bar-track,
.redesigned-app #tab-demos .demo-duel-half,
.redesigned-app #tab-demos .demo-duel-track{
  opacity:1;
  filter:none;
}
.redesigned-app #tab-positioning .rotation-rank-fill,
.redesigned-app #tab-demos .demo-duel-bar,
.redesigned-app #tab-boost .bar-fill,
.redesigned-app #tab-movement .bar-fill{
  filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.redesigned-app #tab-positioning .rotation-rank-fill{box-shadow:none;}
.redesigned-app .chart-box{contain:layout paint;}

/* Chart typography follows the mockup: clear labels, restrained metadata. */
.redesigned-app #tab-boost .chart-box canvas,
.redesigned-app #tab-movement .chart-box canvas,
.redesigned-app #tab-positioning .chart-box canvas,
.redesigned-app #tab-demos .chart-box canvas{font-synthesis:none;}

@media (max-width:1180px){
  .redesigned-app .topbar-scoreline{display:flex;}
  .redesigned-app .topbar-scoreline .score-item:nth-child(n+4){display:none;}
  .redesigned-app .topbar-scoreline{gap:13px;}
  .redesigned-app .topbar-scoreline .score-item .num{font-size:16px;}
  .redesigned-app .topbar-scoreline .score-item .lbl{font-size:9px;}
}
@media (max-width:980px){
  .redesigned-app .topbar-scoreline{display:none;}
}
@media (max-width:700px){
  .redesigned-app #tab-boost .chart-box,
  .redesigned-app #tab-movement .chart-box,
  .redesigned-app #tab-positioning .chart-box,
  .redesigned-app #tab-demos .chart-box{min-height:260px;}
}

/* ================================================================
   STEP 5 — Analytics readability + premium achievement surfaces
   ================================================================ */
.redesigned-app .trend-chart-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 285px;
  gap:18px;
  align-items:stretch;
  margin-top:4px;
}
.redesigned-app .trend-chart-stage{
  position:relative;
  min-width:0;
  height:270px;
  padding:12px 12px 8px;
  border:1px solid rgba(185,205,220,.095);
  border-radius:12px;
  background:linear-gradient(180deg,#09151e 0%,#071119 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
  overflow:hidden;
}
.redesigned-app .trend-chart-stage::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(225,182,108,.22),transparent);
}
.redesigned-app #trendChart{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
}
.redesigned-app .trend-chart-layout .metric-summary{
  margin:0;
  min-width:0;
  padding:12px;
  border:1px solid rgba(185,205,220,.095);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(10,22,30,.92),rgba(7,17,24,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.022);
  overflow:auto;
}
.redesigned-app .trend-chart-layout .metric-summary-row{min-height:38px;}
.redesigned-app .trend-chart-layout .metric-summary-row .bar-track{height:8px;}

/* Achievement / Hall of Shame: real glass cards, no loose text or tiny badge strips. */
.redesigned-app #milestoneGrid,
.redesigned-app #shameGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}
.redesigned-app #milestoneGrid .achievement-block,
.redesigned-app #shameGrid .achievement-block{
  margin:0;
  padding:14px;
  border:1px solid rgba(185,205,220,.10);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(15,28,38,.84),rgba(7,17,24,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028),0 12px 28px rgba(0,0,0,.16);
  min-width:0;
  overflow:hidden;
}
.redesigned-app #milestoneGrid .achievement-block:hover,
.redesigned-app #shameGrid .achievement-block:hover{
  border-color:rgba(229,185,104,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 32px rgba(0,0,0,.22),0 0 24px rgba(229,185,104,.045);
}
.redesigned-app .achievement-block-head{min-width:0;margin-bottom:12px;align-items:center;}
.redesigned-app .achievement-block-head .name{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.redesigned-app .achievement-block-head .count{margin-left:auto;white-space:nowrap;padding:4px 8px;border:1px solid rgba(185,205,220,.08);border-radius:999px;background:rgba(255,255,255,.025);font-size:10px;}
.redesigned-app .badge-shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:9px;}
.redesigned-app .badge-chip,
.redesigned-app .shame-chip{
  width:auto;min-width:0;min-height:92px;padding:11px 8px 9px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  text-align:center;
  background:linear-gradient(145deg,rgba(19,34,45,.88),rgba(9,19,27,.92));
  border:1px solid rgba(185,205,220,.095);
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.redesigned-app .badge-chip:hover,
.redesigned-app .shame-chip:hover{transform:translateY(-2px);border-color:rgba(229,185,104,.34);}
.redesigned-app .badge-chip .b-emoji,
.redesigned-app .shame-chip .b-emoji{
  width:34px;height:34px;display:grid;place-items:center;
  border:1px solid rgba(229,185,104,.20);border-radius:10px;
  background:linear-gradient(145deg,rgba(229,185,104,.10),rgba(255,255,255,.025));
  color:#E5B968;
  flex:0 0 auto;
}
.redesigned-app .saas-badge-icon{width:18px;height:18px;}
.redesigned-app .badge-chip .b-name,
.redesigned-app .shame-chip .b-name{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;overflow-wrap:anywhere;word-break:break-word;
  font-size:10px;line-height:1.25;color:#AAB8C1;margin:0;max-width:100%;
}
.redesigned-app #shameGrid .shame-chip .b-emoji{color:#D98B8B;border-color:rgba(217,139,139,.22);background:linear-gradient(145deg,rgba(217,139,139,.09),rgba(255,255,255,.02));}
.redesigned-app .badge-modal-icon{width:68px;height:68px;margin:0 auto 8px;display:grid;place-items:center;border:1px solid rgba(229,185,104,.25);border-radius:18px;background:linear-gradient(145deg,rgba(229,185,104,.10),rgba(255,255,255,.025));color:#E5B968;box-shadow:0 10px 28px rgba(0,0,0,.25);}
.redesigned-app .badge-modal-icon .saas-badge-icon{width:32px;height:32px;}
.redesigned-app .award-card .emoji{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(229,185,104,.20);border-radius:11px;background:rgba(229,185,104,.06);color:#E5B968;}
.redesigned-app .award-card .emoji .saas-badge-icon{width:20px;height:20px;}

/* Replace leftover icon-only glyph buttons with the same glass treatment. */
.redesigned-app .chip,
.redesigned-app button.chip{line-height:1.15;}
.redesigned-app .saas-inline-icon{width:17px;height:17px;display:inline-grid;place-items:center;vertical-align:-3px;color:#E5B968;}
.redesigned-app .saas-inline-icon .saas-icon{width:14px;height:14px;}

@media(max-width:980px){
  .redesigned-app .trend-chart-layout{grid-template-columns:1fr;}
  .redesigned-app .trend-chart-stage{height:250px;}
}
@media(max-width:620px){
  .redesigned-app #milestoneGrid,.redesigned-app #shameGrid{grid-template-columns:1fr;}
  .redesigned-app .badge-shelf{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* STEP 6 */
.redesigned-app .trend-chart-layout{grid-template-columns:minmax(0,1fr) 330px;gap:14px;}
.redesigned-app .trend-chart-stage{height:300px;}
.redesigned-app .trend-chart-layout .metric-summary{overflow:hidden;}
.redesigned-app .metric-summary-row{display:grid;grid-template-columns:9px minmax(90px,1fr) minmax(90px,1.15fr) 58px 76px;align-items:center;gap:9px;}
.redesigned-app .metric-summary-head{display:flex;justify-content:flex-end;align-items:center;gap:9px;}
.redesigned-app .metric-summary-head .total{width:58px;text-align:right;}
.redesigned-app .metric-summary-head .avg{width:76px;text-align:right;}
.redesigned-app .metric-summary-row .rank,.redesigned-app .metric-summary-head .rank{display:none!important;}
.redesigned-app .metric-summary-row .pname{min-width:0;flex:initial;width:auto;}
.redesigned-app .metric-summary-row .bar-track{width:auto;min-width:0;}
.redesigned-app .metric-summary-row .total,.redesigned-app .metric-summary-row .avg{width:auto;}
.redesigned-app .app-body-grid{min-height:0;}
.redesigned-app .main-content{padding-bottom:28px;}
.redesigned-app .scoped-ai-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 18px;align-items:center;margin:14px 0;padding:16px 18px;border:1px solid rgba(225,182,108,.16);border-radius:14px;background:linear-gradient(145deg,rgba(225,182,108,.075),rgba(8,17,24,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 34px rgba(0,0,0,.14);}
.redesigned-app .scoped-ai-kicker{display:block;font:700 8px Inter,sans-serif;letter-spacing:.16em;color:#d7ae63;margin-bottom:4px;}
.redesigned-app .scoped-ai-copy h3{margin:0;font:700 15px/1.2 'Space Grotesk',sans-serif;color:#edf2f4;}
.redesigned-app .scoped-ai-copy p{margin:5px 0 0;color:#7f909b;font-size:10px;line-height:1.5;}
.redesigned-app .scoped-ai-btn{height:36px;padding:0 14px;border:1px solid rgba(225,182,108,.25);border-radius:9px;background:linear-gradient(180deg,rgba(225,182,108,.18),rgba(225,182,108,.07));color:#f0d18f;font:700 10px Inter,sans-serif;cursor:pointer;white-space:nowrap;}
.redesigned-app .scoped-ai-btn:disabled{opacity:.65;cursor:wait;}
.redesigned-app .scoped-ai-icon{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:5px;border-radius:7px;background:rgba(225,182,108,.10);vertical-align:-6px;}
.redesigned-app .scoped-ai-result{grid-column:1/-1;min-height:42px;padding:11px 13px;border:1px solid rgba(185,205,220,.07);border-radius:10px;background:rgba(4,10,15,.38);color:#c5d0d7;font-size:11px;line-height:1.65;}
.redesigned-app .scoped-ai-empty{color:#64747f;}
@media(max-width:980px){.redesigned-app .trend-chart-layout{grid-template-columns:1fr;}.redesigned-app .trend-chart-stage{height:285px;}.redesigned-app .scoped-ai-card{grid-template-columns:1fr;}.redesigned-app .scoped-ai-btn{justify-self:start;}}
@media(max-width:620px){.redesigned-app .metric-summary-row{grid-template-columns:9px minmax(75px,1fr) minmax(70px,1fr) 48px 62px;gap:6px;}.redesigned-app .metric-summary-head{gap:6px;}.redesigned-app .metric-summary-head .total{width:48px;}.redesigned-app .metric-summary-head .avg{width:62px;}.redesigned-app .trend-chart-stage{height:260px;}}

.redesigned-app .scoped-ai-signals{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.redesigned-app .scoped-ai-signals span{padding:4px 8px;border-radius:999px;border:1px solid rgba(225,182,108,.14);background:rgba(225,182,108,.05);color:#9daab2;font-size:9px}


/* STEP 7 — dashboard team scope + premium trend summary */
.redesigned-app .phase2-context-title-wrap{display:flex;align-items:center;gap:10px;min-width:0;}
.redesigned-app .dashboard-team-select{height:30px;max-width:190px;padding:0 28px 0 10px;border:1px solid rgba(225,182,108,.20);border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:#e8edf0;font:600 10px Inter,sans-serif;outline:none;}
.redesigned-app .dashboard-team-select:focus{border-color:rgba(225,182,108,.45);box-shadow:0 0 0 3px rgba(225,182,108,.07);}
.redesigned-app .trend-chart-layout{grid-template-columns:minmax(0,1fr) 380px;gap:16px;}
.redesigned-app .trend-chart-stage{height:312px;padding:14px 14px 9px;border-radius:14px;background:radial-gradient(circle at 78% 20%,rgba(24,198,174,.055),transparent 32%),linear-gradient(180deg,#09151e 0%,#071119 100%);}
.redesigned-app .trend-chart-layout .metric-summary{position:relative;overflow:hidden;padding:15px 14px;border-radius:14px;background:linear-gradient(155deg,rgba(18,31,41,.96),rgba(7,16,23,.96));border-color:rgba(225,182,108,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 35px rgba(0,0,0,.16);}
.redesigned-app .trend-chart-layout .metric-summary:before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(225,182,108,.38),transparent);}
.redesigned-app .metric-summary-head{display:flex;justify-content:flex-end;gap:8px;align-items:center;padding:2px 0 10px;border-bottom:1px solid rgba(255,255,255,.055);font-size:8px;letter-spacing:.08em;}
.redesigned-app .metric-summary-head .total,.redesigned-app .metric-summary-head .avg{width:52px;font-size:8px;text-align:right;}
.redesigned-app .metric-summary-head .avg{width:66px;}
.redesigned-app .metric-summary-row{grid-template-columns:8px minmax(82px,1fr) minmax(72px,1.2fr) 52px 66px;gap:8px;min-height:44px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.035);}
.redesigned-app .metric-summary-row:last-child{border-bottom:0;}
.redesigned-app .metric-summary-row .dot{width:8px;height:8px;box-shadow:0 0 10px currentColor;}
.redesigned-app .metric-summary-row .pname{font-size:11px;font-weight:700;}
.redesigned-app .metric-summary-row .bar-track{height:7px;border-radius:999px;background:rgba(255,255,255,.055);box-shadow:inset 0 1px 2px rgba(0,0,0,.25);}
.redesigned-app .metric-summary-row .bar-fill{border-radius:999px;box-shadow:0 0 12px currentColor;}
.redesigned-app .metric-summary-row .total{font-size:13px;font-weight:800;color:#edf2f4;}
.redesigned-app .metric-summary-row .avg{font-size:9px;color:#80909b;}
.redesigned-app .metric-summary-row:hover{background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(225,182,108,.035),rgba(255,255,255,.01));}
@media(max-width:980px){.redesigned-app .trend-chart-layout{grid-template-columns:1fr;}.redesigned-app .trend-chart-stage{height:285px;}.redesigned-app .dashboard-team-select{max-width:150px;}}
@media(max-width:620px){.redesigned-app .phase2-context-title-wrap{align-items:flex-start;flex-direction:column;gap:7px;}.redesigned-app .metric-summary-row{grid-template-columns:8px minmax(72px,1fr) minmax(55px,1fr) 46px 56px;gap:6px;}.redesigned-app .metric-summary-head{gap:6px;}.redesigned-app .metric-summary-head .total{width:46px;}.redesigned-app .metric-summary-head .avg{width:56px;}.redesigned-app .trend-chart-stage{height:260px;}}


/* STEP 8 — richer dashboard team context */
.redesigned-app #phase2Context{grid-template-columns:minmax(0,1fr) auto;min-height:112px;padding:16px 18px;background:radial-gradient(circle at 15% 10%,rgba(225,182,108,.055),transparent 34%),linear-gradient(120deg,rgba(13,24,33,.98),rgba(7,14,20,.97));}
.redesigned-app #phase2Context .phase2-context-main{align-items:flex-start;}
.redesigned-app #phase2Context .phase2-context-copy{padding-top:1px;}
.redesigned-app #phase2Context .phase2-context-sub{max-width:720px;}
.redesigned-app .phase2-team-detail{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.055);}
.redesigned-app .team-detail-form{display:flex;align-items:center;gap:8px;}
.redesigned-app .team-detail-label{font-size:7px;letter-spacing:.14em;color:#5f707b;font-weight:700;}
.redesigned-app .team-form-dots{display:flex;gap:5px;}
.redesigned-app .team-form-dot{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font:800 8px 'JetBrains Mono',monospace;border:1px solid rgba(255,255,255,.08);}
.redesigned-app .team-form-dot.win{color:#7be0bf;background:rgba(79,208,170,.10);border-color:rgba(79,208,170,.20);}
.redesigned-app .team-form-dot.loss{color:#ef9a9a;background:rgba(231,131,131,.08);border-color:rgba(231,131,131,.16);}
.redesigned-app .team-form-empty{font-size:9px;color:#64747f;}
.redesigned-app .team-detail-mini{display:flex;flex-direction:column;gap:2px;min-width:74px;}
.redesigned-app .team-detail-mini span{font-size:7px;text-transform:uppercase;letter-spacing:.09em;color:#586a76;}
.redesigned-app .team-detail-mini strong{font:700 10px 'JetBrains Mono',monospace;color:#dfe7eb;white-space:nowrap;}
.redesigned-app .team-detail-mini strong.positive{color:#72d6b5;}
.redesigned-app .team-detail-empty{font-size:9px;color:#657681;}
.redesigned-app #phase2Context .phase2-context-metrics{align-self:center;}
@media(max-width:980px){.redesigned-app #phase2Context{grid-template-columns:1fr;}.redesigned-app #phase2Context .phase2-context-metrics{align-self:start;}.redesigned-app .phase2-team-detail{gap:11px;}}
@media(max-width:620px){.redesigned-app .phase2-team-detail{display:grid;grid-template-columns:1fr 1fr;}.redesigned-app .team-detail-form{grid-column:1/-1;}.redesigned-app #phase2Context{min-height:0;}}

/* Mobile fix: the four floating hero HUD cards (Performance/Form/Match/
   Intelligence) are aria-hidden="true" decoration. Their absolute
   positions (set above, per breakpoint) assume the desktop two-column
   layout where dashboard-hero-copy only takes ~60% width. On mobile the
   copy goes full-width (see redesign.css), so the forced
   `display:block!important` a few rules up makes all four cards float
   directly on top of the headline/paragraph text. Since they're purely
   decorative, the safest fix is to hide them below the point where the
   copy goes full-width, and let the hero box size itself to its actual
   (much shorter) content instead of the tall min-height that existed
   only to make room for the cards. */
@media (max-width:760px){
  .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{display:none!important;}
  .redesigned-app .dashboard-hero{min-height:0!important;}
}