:root{--bg:#071018;--sidebar:#060c12;--panel:#0d1b25;--panel2:#10232e;--line:#1d3947;--text:#f4f7fb;--muted:#88a2b0;--cyan:#24c8ff;--teal:#2dd4bf;--green:#4ade80;--purple:#9b7cff;--pink:#ec7cc7;--amber:#f5bd4f;--red:#ff6b6b;--shadow:0 18px 48px rgba(0,0,0,.24);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 84% 4%,rgba(36,200,255,.09),transparent 25%),radial-gradient(circle at 12% 93%,rgba(155,124,255,.07),transparent 27%),linear-gradient(180deg,#061018,#08131c 56%,#071018);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-size:14px}body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(36,200,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(36,200,255,.023) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}button,select{font:inherit}.app{display:grid;grid-template-columns:258px minmax(0,1fr);min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:258px;background:radial-gradient(circle at 30% 0%,rgba(36,200,255,.08),transparent 23%),linear-gradient(180deg,#050c12,#071119);border-right:1px solid rgba(255,255,255,.07);padding:22px 15px;overflow:auto;z-index:30;box-shadow:14px 0 42px rgba(0,0,0,.15)}.brand{display:flex;align-items:center;gap:12px;padding:5px 8px 24px;margin-bottom:6px;position:relative}.brand:after{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:1px;background:linear-gradient(90deg,var(--cyan),var(--purple),transparent)}.mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#26d2ff,#5378ff 52%,#8d67f7);display:grid;place-items:center;font-weight:900;font-size:16px;letter-spacing:-.08em;box-shadow:0 10px 30px rgba(36,200,255,.2),inset 0 1px 0 rgba(255,255,255,.3)}.brand-title{font-size:15px;font-weight:800;letter-spacing:.02em}.brand-sub{font-size:10px;color:var(--muted);margin-top:4px}.brand{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}.brand-logo{display:block;width:150px;max-width:100%;height:auto;object-fit:contain}.brand-copy{display:flex;flex-direction:column;gap:4px}.nav-group{margin:14px 10px 7px;color:#58717e;font-size:9px;letter-spacing:.16em;text-transform:uppercase;font-weight:800}.nav{display:grid;gap:5px}.nav button{appearance:none;border:1px solid transparent;width:100%;text-align:left;color:#b5c6ce;background:transparent;border-radius:12px;padding:10px 11px;display:flex;gap:10px;align-items:center;cursor:pointer;transition:.18s}.nav button:hover{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.05);color:#fff}.nav button.active{background:linear-gradient(90deg,rgba(36,200,255,.14),rgba(155,124,255,.09));border-color:rgba(36,200,255,.16);color:white}.nav button.active:after{content:"";margin-left:auto;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.ico{width:29px;height:29px;border-radius:9px;background:#10232e;display:grid;place-items:center;font-size:13px;flex:0 0 auto}.side-note{margin-top:24px;border-top:1px solid #172d39;padding:14px 9px;color:#647e8a;font-size:10px;line-height:1.55}.content{grid-column:2;min-width:0}.topbar{position:sticky;top:0;z-index:20;padding:13px 23px;background:rgba(6,16,24,.92);backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 10px 34px rgba(0,0,0,.15)}.top-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.top-title{margin-right:auto}.top-title b{font-size:14px}.top-title span{display:block;font-size:10px;color:var(--muted);margin-top:3px}.filter{min-width:125px;background:linear-gradient(180deg,#10232e,#0b1b24);border:1px solid #24414e;border-radius:11px;padding:8px 10px}.filter label{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:#71909e;display:block;margin-bottom:3px}.filter select{width:100%;border:0;outline:0;background:transparent;color:#fff;appearance:none}.filter option{background:#10232e}.reset,.theme{border:1px solid #294653;background:#0f2029;color:#dce8ed;border-radius:11px;padding:9px 12px;cursor:pointer}.status{display:flex;align-items:center;gap:7px;border:1px solid rgba(74,222,128,.25);background:rgba(25,72,48,.35);border-radius:999px;padding:8px 10px;font-size:10px;color:#b8f1d0}.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(74,222,128,.09)}.main{padding:28px 25px 48px;max-width:1800px;margin:auto}.page{display:none;animation:fade .2s ease}.page.active{display:block}@keyframes fade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}.page-head{position:relative;overflow:hidden;padding:23px 24px;margin-bottom:17px;border:1px solid rgba(255,255,255,.075);border-radius:22px;background:radial-gradient(circle at 84% 22%,rgba(36,200,255,.09),transparent 28%),radial-gradient(circle at 66% -20%,rgba(155,124,255,.09),transparent 32%),linear-gradient(180deg,rgba(14,30,41,.97),rgba(9,22,30,.97));box-shadow:var(--shadow);display:flex;gap:18px;justify-content:space-between;align-items:flex-start}.page-head:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--teal),var(--purple),transparent 78%)}.page-head h1{font-size:30px;line-height:1.1;margin:0 0 7px;letter-spacing:-.045em}.page-head p{margin:0;color:var(--muted);max-width:920px;line-height:1.55;font-size:11px}.ordinal{font-size:48px;font-weight:800;color:rgba(255,255,255,.05);line-height:.9}.badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}.badge{padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);font-size:9px;color:#b9ccd4}.badge.focus{border-color:rgba(36,200,255,.25);background:rgba(36,200,255,.08);color:#bdefff}.context{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(13,29,39,.96),rgba(8,21,28,.96));border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:10px;margin-bottom:14px}.context .label{font-size:9px;color:#6f8d9a;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin:0 5px}.chip{border:1px solid #294653;background:#112530;color:#d6e2e7;border-radius:9px;padding:6px 9px;font-size:10px;cursor:pointer}.chip.active{background:linear-gradient(135deg,rgba(36,200,255,.17),rgba(155,124,255,.12));border-color:rgba(36,200,255,.29);color:white}.grid{display:grid;gap:13px;margin-bottom:13px}.kpis{grid-template-columns:repeat(8,minmax(0,1fr))}.kpis6{grid-template-columns:repeat(6,minmax(0,1fr))}.kpis4{grid-template-columns:repeat(4,minmax(0,1fr))}.two{grid-template-columns:1.45fr 1fr}.twoeq{grid-template-columns:1fr 1fr}.three{grid-template-columns:1.25fr 1fr 1fr}.panel{position:relative;overflow:hidden;background:radial-gradient(circle at 100% 0%,rgba(36,200,255,.035),transparent 29%),linear-gradient(180deg,rgba(14,30,40,.97),rgba(8,21,28,.98));border:1px solid rgba(255,255,255,.075);border-radius:19px;padding:16px;box-shadow:0 18px 46px rgba(0,0,0,.18);min-width:0}.panel:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.17),transparent)}.panel h3{margin:0 0 4px;font-size:15px}.sub{color:var(--muted);font-size:10px;margin-bottom:13px;line-height:1.45}.kpi{background:linear-gradient(180deg,#102731,#0b1c24);border:1px solid #233f4b;border-radius:15px;padding:13px;min-height:112px;position:relative;overflow:hidden}.kpi.featured{border-color:rgba(36,200,255,.38);box-shadow:inset 0 0 0 1px rgba(36,200,255,.08),0 12px 32px rgba(36,200,255,.05)}.kpi:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-40px;top:-42px;background:radial-gradient(circle,rgba(36,200,255,.12),transparent 67%)}.kpi .label{font-size:9px;text-transform:uppercase;letter-spacing:.085em;color:#73909d;font-weight:800;line-height:1.35}.kpi .value{font-size:24px;font-weight:800;letter-spacing:-.04em;margin:8px 0 4px}.delta{font-size:9px;color:#8ba1aa}.up{color:#75e3a4}.down{color:#ff8b86}.accent{color:#86eaff}.legend{display:flex;gap:13px;flex-wrap:wrap;color:#9fb3bc;font-size:9px;margin:5px 0 10px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.chart{height:240px}.chart.short{height:190px}svg.full{width:100%;height:100%;overflow:visible}.gridline{stroke:#203945;stroke-width:1;stroke-dasharray:4 5}.axis{stroke:#30505d}.axislabel{fill:#6f8995;font-size:9px}.line1{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round}.line2{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round}.line3{fill:none;stroke:var(--purple);stroke-width:3;stroke-linecap:round}.bar-list{display:grid;gap:11px}.bar-row{display:grid;grid-template-columns:150px 1fr 55px;gap:10px;align-items:center}.bar-row .name{font-size:10px;color:#c5d4da;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track{height:8px;border-radius:99px;background:#17303a;overflow:hidden}.fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--teal))}.fill.purple{background:linear-gradient(90deg,var(--purple),var(--pink))}.fill.green{background:linear-gradient(90deg,var(--green),var(--teal))}.fill.amber{background:linear-gradient(90deg,var(--amber),#ff8c5a)}.num{text-align:right;font-size:9px;color:#a8bbc3}.table-wrap{overflow:auto;border:1px solid #203b47;border-radius:12px}table{border-collapse:collapse;width:100%;min-width:760px;background:#0b1d25}th,td{padding:10px 11px;border-bottom:1px solid #19313b;text-align:left;white-space:nowrap}th{background:#102631;color:#698895;font-size:8px;text-transform:uppercase;letter-spacing:.08em;position:sticky;top:0}td{font-size:10px;color:#c3d2d8}td strong{color:#fff}.good{color:#76e0a2}.bad{color:#ff8c87}.funnel{display:flex;align-items:center;gap:7px;overflow:auto;padding:5px 0}.fstep{min-width:118px;padding:13px 11px;border-radius:12px;background:#112832;border:1px solid #284653;text-align:center}.fstep strong{font-size:19px;display:block}.fstep span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:#7d98a4;margin-top:4px}.arr{color:#4e6a76}.branch{display:grid;gap:10px}.branch-start{display:flex;justify-content:center}.branch-box{padding:12px 14px;background:#112731;border:1px solid #284652;border-radius:12px;text-align:center;min-width:150px}.branch-box strong{font-size:19px;display:block}.branch-box span{font-size:8px;color:#7f98a4;text-transform:uppercase}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.branch-col{background:#0b1d25;border:1px solid #203c48;border-radius:14px;padding:11px}.branch-title{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;margin-bottom:8px}.bsteps{display:grid;gap:7px}.bstep{display:grid;grid-template-columns:1fr auto;gap:10px;background:#102530;border:1px solid #213d49;border-radius:9px;padding:8px 9px;font-size:9px}.drop{font-size:8px;color:#ff9b95;margin-top:-4px;padding-left:4px}.donut-wrap{display:flex;gap:20px;align-items:center;justify-content:center;height:210px}.donut{width:145px;height:145px;border-radius:50%;position:relative;background:conic-gradient(var(--cyan) 0 48%,var(--purple) 48% 72%,var(--green) 72% 89%,var(--amber) 89% 100%)}.donut:after{content:"";position:absolute;inset:29px;border-radius:50%;background:#0d1f28;border:1px solid #274550}.donut-center{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center}.donut-center strong{font-size:22px}.donut-center span{display:block;font-size:8px;color:#718d98;text-transform:uppercase}.legend-list{display:grid;gap:8px;min-width:155px}.legend-item{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;font-size:9px;color:#a8bbc3}.sw{width:8px;height:8px;border-radius:50%}.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.country{background:#0c2029;border:1px solid #23414d;border-radius:15px;padding:15px}.country h4{margin:0 0 11px;font-size:14px}.country-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat{background:#0a1a21;border:1px solid #1d3742;border-radius:10px;padding:9px}.stat span{display:block;font-size:8px;text-transform:uppercase;color:#6f8b97}.stat strong{display:block;font-size:16px;margin-top:4px}.callout{border:1px solid rgba(45,212,191,.23);background:rgba(18,65,59,.3);border-radius:13px;padding:12px 14px;font-size:10px;color:#bcebe3;line-height:1.55}.callout.warn{border-color:rgba(245,189,79,.28);background:rgba(78,58,18,.28);color:#ecd79d}.health{display:grid;grid-template-columns:190px 1fr 68px;gap:11px;align-items:center;padding:10px 0;border-bottom:1px solid #19333d}.health:last-child{border-bottom:0}.health b{font-size:10px}.health span{font-size:9px;color:#8299a3;text-align:right}.progress{height:8px;background:#17313b;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--teal))}.foot{color:#627e89;font-size:9px;text-align:right;margin-top:20px}.def{position:fixed;right:18px;bottom:18px;width:min(390px,calc(100vw - 28px));z-index:60;background:#0b1d25;border:1px solid #2d4c59;border-radius:16px;box-shadow:0 22px 60px rgba(0,0,0,.36);overflow:hidden}.def summary{list-style:none;display:flex;align-items:center;gap:9px;padding:11px 12px;background:#102631;cursor:pointer}.def summary::-webkit-details-marker{display:none}.def-icon{width:28px;height:28px;border-radius:9px;background:linear-gradient(145deg,rgba(36,200,255,.22),rgba(155,124,255,.18));display:grid;place-items:center;font-weight:800}.def-copy strong{font-size:10px;display:block}.def-copy span{font-size:8px;color:#78929d}.chev{margin-left:auto}.def:not([open]){width:auto;min-width:195px}.def-body{padding:12px;max-height:48vh;overflow:auto}.def-list{display:grid;gap:10px}.def-item b{font-size:10px}.def-item p{font-size:9px;color:#91a7b0;line-height:1.45;margin:2px 0 0}
.light{--bg:#eef4f8;--sidebar:#f7fafc;--panel:#fff;--panel2:#fff;--line:#d8e4ea;--text:#12212b;--muted:#647b88;--shadow:0 14px 32px rgba(27,60,75,.10);background:#edf4f7;color:var(--text)}body.light:before{opacity:.35}.light .sidebar{background:#f7fafc;border-right-color:#d8e5eb}.light .topbar{background:rgba(247,250,252,.94);border-bottom-color:#d9e5ea}.light .filter,.light .reset,.light .theme,.light .panel,.light .kpi,.light .context,.light .branch-col,.light .branch-box,.light .bstep,.light .country,.light .stat,.light .table-wrap table,.light .def{color:#12212b;background:#fff;border-color:#d7e4e9}.light th{background:#eef4f7}.light td{color:#314852}.light .panel h3,.light .kpi .value,.light td strong,.light .country h4{color:#12212b}.light .nav button{color:#536b77}.light .nav button.active{color:#10212a;background:linear-gradient(90deg,rgba(36,200,255,.13),rgba(155,124,255,.08))}.light .page-head{background:linear-gradient(180deg,#fff,#f7fbfc);border-color:#d7e5ea}.light .chip{background:#f1f6f8;color:#3d5661;border-color:#d4e1e7}.light .def summary{background:#eef5f8}.light .donut:after{background:#fff}.light .track,.light .progress{background:#e4edf1}
@media(max-width:1350px){.kpis{grid-template-columns:repeat(4,1fr)}.kpis6{grid-template-columns:repeat(3,1fr)}}@media(max-width:1100px){.app{grid-template-columns:78px 1fr}.sidebar{width:78px;padding:18px 8px}.brand-title,.brand-sub,.nav-group,.nav button span,.side-note{display:none}.brand{padding:4px 8px 18px}.nav button{justify-content:center}.content{grid-column:2}.two,.twoeq,.three{grid-template-columns:1fr}.kpis4,.kpis6{grid-template-columns:repeat(2,1fr)}}@media(max-width:720px){.app{display:block}.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;height:68px;display:flex;align-items:center;padding:7px;border-right:0;border-top:1px solid #24404b;overflow:auto}.brand,.nav-group,.side-note{display:none}.nav{display:flex;gap:5px}.nav button{width:43px;flex:0 0 43px;padding:7px}.content{padding-bottom:70px}.topbar{padding:9px 10px}.top-title{width:100%}.filter{min-width:115px;flex:1}.main{padding:16px 10px 32px}.page-head{display:block;padding:18px}.ordinal{display:none}.kpis,.kpis6,.kpis4{grid-template-columns:repeat(2,1fr)}.split,.compare{grid-template-columns:1fr}.bar-row{grid-template-columns:105px 1fr 45px}.def{right:8px;bottom:78px}}

/* =====================================================================
   V4 PREMIUM VISUAL SYSTEM
   Manrope-first, MX blue default, refined enterprise SaaS presentation
   ===================================================================== */
:root{
  --accent:#2f8cff;
  --accent-2:#16c7d9;
  --accent-3:#7468ff;
  --cyan:#2f8cff;
  --teal:#16c7d9;
  --purple:#7468ff;
  --pink:#b76cff;
  --accent-soft:rgba(47,140,255,.13);
  --accent-glow:rgba(47,140,255,.22);
  --surface-0:#071018;
  --surface-1:#0a151e;
  --surface-2:#0d1b25;
  --surface-3:#10232e;
  --ink:#f6f9fc;
  --ink-2:#d8e3e9;
}
body{
  font-family:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  letter-spacing:-.005em;
  background:
    radial-gradient(circle at 82% -4%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 26%),
    radial-gradient(circle at 13% 96%,color-mix(in srgb,var(--accent-3) 10%,transparent),transparent 27%),
    linear-gradient(180deg,#061019 0%,#08131c 52%,#071018 100%)!important;
}
body:before{
  opacity:.72;
  background-image:
    linear-gradient(color-mix(in srgb,var(--accent) 3.2%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 3.2%,transparent) 1px,transparent 1px)!important;
  background-size:34px 34px!important;
}
.app{grid-template-columns:248px minmax(0,1fr)!important}
.sidebar{
  width:248px!important;
  padding:20px 14px!important;
  background:
    radial-gradient(circle at 22% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 24%),
    linear-gradient(180deg,#050c13 0%,#071018 100%)!important;
  border-right:1px solid rgba(255,255,255,.065)!important;
  box-shadow:18px 0 56px rgba(0,0,0,.16)!important;
}
.content{grid-column:2!important}
.brand{gap:11px!important;padding:5px 7px 24px!important}
.brand:after{
  background:linear-gradient(90deg,var(--accent),var(--accent-2),transparent 82%)!important;
  opacity:.9;
}
.mark{
  width:42px!important;height:42px!important;border-radius:12px!important;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 92%,white 8%),var(--accent) 52%,var(--accent-3))!important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.32)!important;
}
.brand-title{font-size:14px!important;font-weight:800!important;letter-spacing:-.02em!important}
.brand-sub{font-size:9px!important;letter-spacing:.02em!important;color:#78909c!important}
.nav-group{margin:18px 9px 7px!important;color:#59717d!important;font-size:8px!important;letter-spacing:.17em!important}
.nav{gap:4px!important}
.nav button{
  min-height:47px;
  border-radius:12px!important;
  padding:8px 9px!important;
  color:#aebfc8!important;
  font-size:11px;
  font-weight:650;
  transition:transform .17s ease,border-color .17s ease,background .17s ease,color .17s ease!important;
}
.nav button:hover{
  transform:translateX(2px);
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.055)!important;
}
.nav button.active{
  color:#fff!important;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent-3) 8%,transparent))!important;
  border-color:color-mix(in srgb,var(--accent) 26%,transparent)!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--accent) 80%,white 10%);
}
.nav button.active:after{background:var(--accent)!important;box-shadow:0 0 15px var(--accent)!important}
.ico{
  width:30px!important;height:30px!important;border-radius:9px!important;
  background:linear-gradient(180deg,#112630,#0c1d26)!important;
  border:1px solid rgba(255,255,255,.045);
  color:#c4d1d7;
}
.nav button.active .ico{
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 23%,#10232e),color-mix(in srgb,var(--accent-3) 13%,#0c1d26))!important;
  border-color:color-mix(in srgb,var(--accent) 20%,transparent);
}
.side-note{
  margin-top:25px!important;
  padding:15px 9px 4px!important;
  border-top-color:rgba(255,255,255,.06)!important;
  color:#637b87!important;
  font-size:9px!important;
  line-height:1.65!important;
}
.topbar{
  padding:11px 22px!important;
  background:rgba(5,14,22,.89)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.16)!important;
}
.top-row{gap:8px!important}
.top-title b{font-size:14px!important;font-weight:800!important;letter-spacing:-.025em}
.top-title span{font-size:9px!important;color:#758e9a!important}
.filter{
  min-width:118px!important;
  padding:7px 9px!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,rgba(18,38,49,.9),rgba(10,25,34,.92))!important;
  border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.filter:focus-within{border-color:color-mix(in srgb,var(--accent) 44%,transparent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)!important}
.filter label{font-size:7px!important;letter-spacing:.12em!important;color:#708a96!important}
.filter select{font-size:10px!important;font-weight:650}
.theme-enhanced{
  min-height:42px!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  padding:6px 10px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:linear-gradient(180deg,rgba(18,38,49,.90),rgba(10,25,34,.92))!important;
}
.theme-icon{
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.035));
  color:color-mix(in srgb,var(--accent) 78%,white 22%);
  font-size:12px
}
.theme-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.theme-copy b{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:#748c97}
.theme-copy small{font-size:9px;color:#d5e0e5;margin-top:3px;font-weight:700}
.reset{
  min-height:42px!important;padding:8px 11px!important;
  border-color:rgba(255,255,255,.075)!important;
  background:linear-gradient(180deg,rgba(18,38,49,.88),rgba(10,25,34,.9))!important;
  color:#adbec6!important;font-size:9px!important;font-weight:700;
}
.status{
  min-height:42px!important;
  padding:6px 10px!important;
  background:linear-gradient(180deg,rgba(21,65,46,.64),rgba(13,43,32,.66))!important;
  border-color:rgba(74,222,128,.20)!important;
  line-height:1.05!important;
}
.status span{display:flex;flex-direction:column;align-items:flex-start}
.status b{font-size:9px;color:#c5f0d6}
.status small{font-size:7px;color:#76a78a;margin-top:3px}
.main{padding:30px 27px 56px!important;max-width:1820px!important}
.page-head{
  min-height:174px;
  padding:28px 29px!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 88% 16%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 28%),
    radial-gradient(circle at 69% -22%,color-mix(in srgb,var(--accent-3) 10%,transparent),transparent 34%),
    linear-gradient(145deg,rgba(16,34,45,.98),rgba(8,21,29,.98))!important;
  border-color:rgba(255,255,255,.078)!important;
  box-shadow:0 24px 66px rgba(0,0,0,.21),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.page-head:before{
  height:3px!important;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3),transparent 78%)!important;
}
.page-head:after{
  content:"";position:absolute;width:300px;height:300px;border-radius:50%;
  right:-80px;bottom:-190px;
  border:1px solid color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:0 0 0 34px color-mix(in srgb,var(--accent) 2.4%,transparent),0 0 0 72px color-mix(in srgb,var(--accent-3) 1.8%,transparent);
  pointer-events:none;
}
.page-head h1{
  font-size:35px!important;font-weight:800!important;letter-spacing:-.055em!important;line-height:1.05!important;
  max-width:1000px;
}
.page-head p{font-size:11px!important;line-height:1.72!important;color:#8ba1ab!important;max-width:930px!important}
.ordinal{
  position:absolute;right:30px;bottom:0;
  font-size:88px!important;font-weight:800!important;letter-spacing:-.08em;
  color:rgba(255,255,255,.027)!important;
  z-index:0;
}
.badges{position:relative;z-index:1;margin-top:17px!important;gap:6px!important}
.badge{
  padding:6px 9px!important;font-size:8px!important;font-weight:700;
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.075)!important;
  color:#a9bbc4!important
}
.badge.focus{
  background:color-mix(in srgb,var(--accent) 9%,transparent)!important;
  border-color:color-mix(in srgb,var(--accent) 27%,transparent)!important;
  color:color-mix(in srgb,var(--accent) 48%,white 52%)!important
}
.context{
  padding:9px 10px!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(12,28,37,.94),rgba(8,20,27,.95))!important;
  border-color:rgba(255,255,255,.065)!important;
}
.context .label{font-size:8px!important;color:#657e89!important}
.chip{
  padding:6px 10px!important;border-radius:9px!important;font-size:9px!important;font-weight:650!important;
  background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.065)!important;color:#b5c4ca!important
}
.chip:hover{border-color:color-mix(in srgb,var(--accent) 24%,transparent)!important}
.chip.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--accent-3) 9%,transparent))!important;
  border-color:color-mix(in srgb,var(--accent) 27%,transparent)!important;color:#fff!important
}
.grid{gap:14px!important;margin-bottom:14px!important}
.kpi{
  min-height:126px!important;padding:16px 15px!important;border-radius:17px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 42%),
    linear-gradient(180deg,rgba(16,37,48,.98),rgba(8,22,29,.99))!important;
  border:1px solid rgba(255,255,255,.072)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.02)!important;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease!important
}
.kpi:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--accent),transparent 76%);opacity:.5
}
.kpi:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.11)!important;box-shadow:0 20px 42px rgba(0,0,0,.17)!important}
.kpi.featured{
  border-color:color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.06))!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 46%),
    radial-gradient(circle at 0% 100%,color-mix(in srgb,var(--accent-3) 7%,transparent),transparent 44%),
    linear-gradient(180deg,rgba(18,40,52,.99),rgba(8,24,32,.99))!important;
  box-shadow:0 18px 42px color-mix(in srgb,var(--accent) 5%,transparent),inset 0 1px 0 rgba(255,255,255,.035)!important
}
.kpi .label{font-size:8px!important;color:#718a96!important;letter-spacing:.105em!important}
.kpi .value{font-size:27px!important;font-weight:800!important;letter-spacing:-.055em!important;margin:10px 0 5px!important}
.delta{font-size:9px!important;color:#7f96a1!important}
.accent{color:color-mix(in srgb,var(--accent) 70%,white 30%)!important}
.panel{
  padding:19px!important;border-radius:20px!important;
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 4.5%,transparent),transparent 30%),
    linear-gradient(180deg,rgba(14,30,40,.985),rgba(8,21,28,.99))!important;
  border-color:rgba(255,255,255,.07)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:border-color .17s ease,transform .17s ease!important
}
.panel:hover{border-color:rgba(255,255,255,.095)!important}
.panel h3{font-size:15px!important;font-weight:800!important;letter-spacing:-.025em!important}
.sub{font-size:9px!important;line-height:1.6!important;color:#7e97a2!important}
.legend{font-size:8px!important;color:#8da3ad!important}
.table-wrap{border-color:rgba(255,255,255,.065)!important;border-radius:13px!important;background:#091a22!important}
table{background:#091a22!important}
th{
  background:#0f252f!important;
  color:#69828e!important;
  font-size:7px!important;letter-spacing:.11em!important;
  padding:10px 12px!important
}
td{
  padding:11px 12px!important;
  border-bottom-color:rgba(255,255,255,.052)!important;
  font-size:9px!important;color:#b9c9d0!important
}
tbody tr{transition:background .14s ease}
tbody tr:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%)}
td strong{color:#eef4f7!important}
.track{background:#162f39!important}
.fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))!important}
.fill.purple{background:linear-gradient(90deg,var(--accent-3),var(--pink))!important}
.fstep,.branch-box,.branch-col,.bstep,.country,.stat{
  border-color:rgba(255,255,255,.068)!important;
  background:linear-gradient(180deg,rgba(15,34,44,.96),rgba(8,22,29,.98))!important;
}
.fstep strong,.branch-box strong{font-size:20px!important;letter-spacing:-.045em}
.fstep span,.branch-box span{font-size:7px!important;letter-spacing:.095em!important}
.callout{
  border-color:color-mix(in srgb,var(--accent-2) 23%,transparent)!important;
  background:color-mix(in srgb,var(--accent-2) 6%,#0c1c24)!important;
  color:#b7d8d7!important;
  border-radius:14px!important;padding:13px 15px!important;font-size:9px!important
}
.callout.warn{
  background:rgba(79,58,17,.25)!important;border-color:rgba(245,189,79,.24)!important;color:#e3cc90!important
}
.def{
  border-color:rgba(255,255,255,.09)!important;
  background:rgba(8,21,28,.96)!important;
  backdrop-filter:blur(18px);
  box-shadow:0 28px 72px rgba(0,0,0,.34)!important
}
.def summary{background:linear-gradient(180deg,rgba(16,38,49,.97),rgba(10,26,34,.98))!important}
.def-icon{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 23%,transparent),color-mix(in srgb,var(--accent-3) 18%,transparent))!important}
.foot{font-size:8px!important;color:#58717c!important;margin-top:25px!important}


/* Landing-page family reporting: inspired by the original Data Studio composition charts */
.mix-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.mix-panel{min-height:270px}
.mix-visual{display:grid;grid-template-columns:172px minmax(0,1fr);gap:22px;align-items:center;min-height:205px}
.family-donut{width:164px;height:164px;border-radius:50%;position:relative;margin:auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.14)}
.family-donut:after{content:"";position:absolute;inset:34px;border-radius:50%;background:linear-gradient(180deg,#0d2029,#091820);border:1px solid rgba(255,255,255,.075);box-shadow:inset 0 6px 18px rgba(0,0,0,.18)}
.family-donut-center{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;pointer-events:none}
.family-donut-center strong{font-size:24px;line-height:1;letter-spacing:-.05em}
.family-donut-center span{display:block;margin-top:5px;font-size:7px;text-transform:uppercase;letter-spacing:.11em;color:#78919c}
.family-legend{display:grid;gap:8px}
.family-legend .legend-item{grid-template-columns:9px minmax(0,1fr) auto;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.045)}
.family-legend .legend-item:last-child{border-bottom:0}
.family-legend .legend-item span{font-size:9px;color:#b7c7ce}
.family-legend .legend-item b{font-size:9px;color:#eef5f8}
.family-key{width:9px;height:9px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.taxonomy-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}
.taxonomy-stat{padding:13px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(16,39,50,.95),rgba(9,24,32,.98));border:1px solid rgba(255,255,255,.07)}
.taxonomy-stat span{display:block;font-size:7px;text-transform:uppercase;letter-spacing:.1em;color:#728b97;font-weight:800}
.taxonomy-stat strong{display:block;font-size:21px;letter-spacing:-.045em;margin-top:5px}
.taxonomy-stat small{display:block;color:#78909b;font-size:8px;margin-top:3px}
.family-pill{display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);color:#bcdcff;font-size:8px;font-weight:750}
.panel-kicker{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;color:#72909c;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.panel-kicker:before{content:"";width:17px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@media(max-width:1180px){.mix-grid{grid-template-columns:1fr}.taxonomy-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.mix-visual{grid-template-columns:1fr}.family-donut{width:150px;height:150px}.taxonomy-summary{grid-template-columns:1fr 1fr}}
body.light .family-donut:after{background:#fff;border-color:#dce6eb;box-shadow:inset 0 5px 15px rgba(44,67,83,.05)}
body.light .family-legend .legend-item{border-bottom-color:#e8eef1}
body.light .family-legend .legend-item span,body.light .family-legend .legend-item b{color:#36515e}
body.light .taxonomy-stat{background:#fff;border-color:#dce6eb}
body.light .taxonomy-stat strong{color:#142735}
body.light .family-pill{color:#245d8d}

/* Light mode */
body.light{
  --bg:#f3f6f9;--panel:#ffffff;--panel2:#f8fafc;--line:#dce5eb;--text:#142735;--muted:#657d8b;
  background:
    radial-gradient(circle at 84% -5%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%),
    linear-gradient(180deg,#f5f8fa,#eef3f6 100%)!important;
  color:#142735!important;
}
body.light:before{opacity:.22!important}
body.light .sidebar{
  background:
    radial-gradient(circle at 25% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 24%),
    linear-gradient(180deg,#ffffff,#f7fafc)!important;
  border-right-color:#dfe7ec!important;
  box-shadow:15px 0 45px rgba(36,60,78,.06)!important
}
body.light .brand-title,body.light .page-head h1,body.light .panel h3,body.light .kpi .value,body.light td strong,body.light .country h4{color:#142735!important}
body.light .brand-sub,body.light .top-title span,body.light .page-head p,body.light .sub,body.light .delta{color:#718795!important}
body.light .nav button{color:#526a77!important}
body.light .nav button:hover{background:#f1f6f9!important;color:#17303d!important}
body.light .nav button.active{
  color:#132b37!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 11%,white),color-mix(in srgb,var(--accent-3) 5%,white))!important;
  border-color:color-mix(in srgb,var(--accent) 20%,#dce6eb)!important
}
body.light .ico,body.light .nav button.active .ico{background:#f0f5f8!important;border-color:#dce6eb!important;color:#3c5866!important}
body.light .topbar{
  background:rgba(250,252,253,.91)!important;
  border-bottom-color:#dfe7ec!important;
  box-shadow:0 10px 30px rgba(44,67,83,.05)!important
}
body.light .filter,body.light .theme-enhanced,body.light .reset{
  background:linear-gradient(180deg,#fff,#f7fafc)!important;
  border-color:#dbe5ea!important;
  color:#203a47!important
}
body.light .filter select{color:#203a47!important}
body.light .theme-copy small{color:#203a47!important}
body.light .page-head{
  background:
    radial-gradient(circle at 86% 12%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 30%),
    linear-gradient(145deg,#ffffff,#f7fafc)!important;
  border-color:#dce6eb!important;
  box-shadow:0 18px 48px rgba(44,67,83,.08),inset 0 1px 0 #fff!important
}
body.light .ordinal{color:rgba(18,45,60,.045)!important}
body.light .context{
  background:#ffffff!important;border-color:#dfe7eb!important;
  box-shadow:0 8px 24px rgba(44,67,83,.035)
}
body.light .chip{background:#f4f7f9!important;border-color:#dce5e9!important;color:#4a6471!important}
body.light .chip.active{
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,white),color-mix(in srgb,var(--accent-3) 6%,white))!important;
  border-color:color-mix(in srgb,var(--accent) 22%,#dce6eb)!important;color:#17313e!important
}
body.light .kpi,body.light .panel,body.light .fstep,body.light .branch-box,body.light .branch-col,body.light .bstep,body.light .country,body.light .stat{
  background:#ffffff!important;border-color:#dde6eb!important;
  box-shadow:0 12px 32px rgba(45,68,84,.06),inset 0 1px 0 #fff!important
}
body.light .kpi.featured{
  background:
    radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 48%),
    #fff!important;
  border-color:color-mix(in srgb,var(--accent) 20%,#dce6eb)!important
}
body.light .table-wrap,body.light table{background:#fff!important;border-color:#dce6eb!important}
body.light th{background:#f2f6f8!important;color:#69808c!important}
body.light td{color:#405a67!important;border-bottom-color:#e7edf0!important}
body.light tbody tr:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 5%,white),#fff)}
body.light .track,body.light .progress{background:#e8eff2!important}
body.light .callout{background:color-mix(in srgb,var(--accent-2) 5%,white)!important;color:#466b6c!important}
body.light .def{background:rgba(255,255,255,.97)!important;border-color:#dbe5ea!important;box-shadow:0 24px 65px rgba(38,59,74,.15)!important}
body.light .def summary{background:#f4f8fa!important}
body.light .def-item p{color:#687f8b!important}
body.light .status{background:#f2fbf6!important;border-color:#cdebd9!important}
body.light .status b{color:#28764c!important}
body.light .status small{color:#619077!important}

@media(max-width:1450px){
  .status small{display:none}
  .status{padding-right:9px!important}
  .filter{min-width:108px!important}
}
@media(max-width:1180px){
  .app{grid-template-columns:78px minmax(0,1fr)!important}
  .sidebar{width:78px!important;padding:17px 9px!important}
  .brand-title,.brand-sub,.nav-group,.nav button span:not(.ico),.side-note{display:none!important}
  .brand{padding:4px 8px 17px!important}
  .nav button{justify-content:center!important;padding:8px!important}
  .content{grid-column:2!important}
  .kpis{grid-template-columns:repeat(4,1fr)!important}
  .kpis6{grid-template-columns:repeat(3,1fr)!important}
  .two,.twoeq,.three{grid-template-columns:1fr!important}
}
@media(max-width:820px){
  .top-title{width:100%;margin-bottom:3px}
  .theme-enhanced{order:20}
  .reset{order:21}
  .status{order:22}
}
@media(max-width:720px){
  .app{display:block!important}
  .sidebar{top:auto!important;bottom:0!important;left:0!important;right:0!important;width:auto!important;height:70px!important;display:flex!important;align-items:center!important;padding:8px!important;overflow:auto!important;border-top:1px solid rgba(255,255,255,.08)!important;border-right:0!important}
  body.light .sidebar{border-top-color:#dce6eb!important}
  .brand,.nav-group,.side-note{display:none!important}
  .nav{display:flex!important;gap:5px!important}
  .nav button{width:44px!important;min-height:44px!important;flex:0 0 44px!important}
  .content{padding-bottom:72px}
  .main{padding:17px 11px 36px!important}
  .topbar{padding:10px 11px!important}
  .filter{flex:1;min-width:120px!important}
  .status{display:none!important}
  .page-head{min-height:auto;padding:22px 19px!important}
  .page-head h1{font-size:29px!important}
  .ordinal{font-size:62px!important;right:17px}
  .kpis,.kpis6,.kpis4{grid-template-columns:repeat(2,1fr)!important}
  .panel{padding:16px!important}
}


/* V3 reporting refinements */
.outcome-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.outcome-card{border:1px solid rgba(255,255,255,.075);border-radius:16px;padding:15px;background:linear-gradient(180deg,rgba(16,36,46,.95),rgba(8,22,29,.98));min-height:190px}
.outcome-card.primary{border-color:color-mix(in srgb,var(--accent) 24%,transparent);background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 45%),linear-gradient(180deg,rgba(16,36,46,.97),rgba(8,22,29,.99))}
.outcome-card h4{margin:0 0 4px;font-size:13px;letter-spacing:-.02em}
.outcome-card p{margin:0 0 12px;color:var(--muted);font-size:9px;line-height:1.5}
.signal-list{display:grid;gap:8px}
.signal-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:9px 10px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(255,255,255,.025)}
.signal-row span{font-size:9px;color:#aebfc8}.signal-row b{font-size:15px;letter-spacing:-.03em}
.signal-row small{display:block;color:#6f8995;font-size:8px;margin-top:2px}
.panel.priority{border-color:color-mix(in srgb,var(--accent) 19%,transparent)}
.panel.priority:after{content:"Search Console + GA4";position:absolute;right:14px;top:14px;padding:5px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);font-size:7px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fc9ff}
body.light .outcome-card{background:#fff;border-color:#dde6eb}body.light .outcome-card.primary{background:#fff;border-color:color-mix(in srgb,var(--accent) 20%,#dce6eb)}body.light .signal-row{background:#f7fafc;border-color:#e0e8ec}body.light .signal-row span{color:#536b77}
@media(max-width:900px){.outcome-split{grid-template-columns:1fr}}



/* No-data presentation: keeps the supplied v4 layout while making the
   collection state unmistakable and accessible. */
.no-data-mode [data-no-data],.no-data-mode [data-no-data-card]{cursor:help}
.no-data-mode [data-no-data]{color:#89a2ae!important}
.no-data-mode .status.pending{border-color:rgba(245,189,79,.28)!important;background:rgba(78,58,18,.28)!important}
.no-data-mode .status.pending .dot{background:var(--amber)!important;box-shadow:0 0 0 4px rgba(245,189,79,.09)!important}
.no-data-mode .status.pending b{color:#f3dfa8!important}
.no-data-mode .status.pending small{color:#b9a777!important}
.validation-snapshot{margin-bottom:14px!important;border-color:rgba(74,222,128,.24)!important;background:radial-gradient(circle at 100% 0%,rgba(74,222,128,.08),transparent 32%),linear-gradient(180deg,rgba(14,35,40,.98),rgba(8,23,29,.99))!important}
.validation-head{display:flex;gap:14px;justify-content:space-between;align-items:flex-start}.validation-head .sub{margin-bottom:12px}.validation-tag{white-space:nowrap;border:1px solid rgba(74,222,128,.25);background:rgba(25,72,48,.32);color:#b8f1d0;border-radius:999px;padding:6px 9px;font-size:8px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.validation-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.validation-metric{padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025)}.validation-metric span,.validation-metric small{display:block}.validation-metric span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#78939f}.validation-metric strong{display:block;margin:5px 0 2px;font-size:19px}.validation-metric small{font-size:8px;color:#8199a4}.validation-note{margin-top:10px;color:#a8c2cb;font-size:9px;line-height:1.5}
.release-configuration{margin-bottom:13px}.status.live{border-color:rgba(74,222,128,.3)!important;background:rgba(25,72,48,.38)!important}.status.live small{color:#9bd8b3!important}
body.light .validation-snapshot{background:#fff!important;border-color:#cfe6d7!important}body.light .validation-metric{background:#f7faf8;border-color:#dfeae2}body.light .validation-note{color:#526b5c}
@media(max-width:1200px){.validation-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.validation-grid{grid-template-columns:repeat(2,1fr)}.validation-head{display:block}.validation-tag{display:inline-block;margin-bottom:10px}}


/* =====================================================================
   V5 READABILITY PASS
   Larger typography, stronger hierarchy and lower information density.
   ===================================================================== */
@media(min-width:1181px){
  .app{grid-template-columns:276px minmax(0,1fr)!important}
  .sidebar{width:276px!important;padding:24px 17px!important}
  .content{grid-column:2!important}
}
body{font-size:15px!important}
.brand-title{font-size:16px!important}
.brand-sub{font-size:11px!important}
.nav-group{font-size:9px!important;margin-top:20px!important}
.nav button{font-size:12.5px!important;min-height:53px!important;padding:10px 11px!important}
.ico{width:34px!important;height:34px!important;font-size:15px!important}
.side-note{font-size:10.5px!important;line-height:1.7!important}

.topbar{padding:14px 26px!important}
.top-row{gap:10px!important}
.top-title b{font-size:16px!important}
.top-title span{font-size:10.5px!important;margin-top:4px!important}
.filter{min-width:138px!important;padding:9px 11px!important}
.filter label{font-size:8.5px!important;margin-bottom:4px!important}
.filter select{font-size:11.5px!important}
.theme-enhanced,.reset,.status{min-height:48px!important}
.theme-copy b{font-size:8.5px!important}
.theme-copy small{font-size:10.5px!important}
.status b{font-size:10.5px!important}.status small{font-size:8.5px!important}

.main{padding:38px 34px 70px!important;max-width:1760px!important}
.page-head{min-height:198px!important;padding:35px 36px!important;margin-bottom:22px!important;border-radius:26px!important}
.page-head h1{font-size:42px!important;line-height:1.03!important}
.page-head p{font-size:13.5px!important;line-height:1.75!important;max-width:980px!important;margin-top:10px!important}
.ordinal{font-size:104px!important;right:34px!important}
.badges{margin-top:20px!important;gap:8px!important}
.badge{font-size:10px!important;padding:8px 11px!important}

.context{padding:12px 13px!important;margin-bottom:18px!important;gap:9px!important}
.context .label{font-size:9.5px!important}
.chip{font-size:11px!important;padding:8px 12px!important}
.grid{gap:18px!important;margin-bottom:18px!important}
.kpis6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.kpis4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.two{grid-template-columns:1.35fr 1fr!important;gap:18px!important}
.twoeq,.three{gap:18px!important}

.kpi{min-height:154px!important;padding:21px 20px!important;border-radius:19px!important}
.kpi .label{font-size:10.5px!important;line-height:1.45!important}
.kpi .value{font-size:35px!important;margin:14px 0 7px!important}
.delta{font-size:11px!important;line-height:1.45!important}

.panel{padding:24px!important;border-radius:22px!important}
.panel h3{font-size:18px!important;margin-bottom:6px!important}
.sub{font-size:12px!important;line-height:1.65!important;margin-bottom:17px!important}
.panel-kicker{font-size:9px!important;margin-bottom:10px!important}
.legend{font-size:10px!important;gap:16px!important;margin-bottom:14px!important}
.chart{height:310px!important}.chart.short{height:245px!important}
.axislabel{font-size:10.5px!important}

.table-wrap{border-radius:15px!important}
th{font-size:9.5px!important;padding:13px 15px!important}
td{font-size:11.5px!important;padding:14px 15px!important;line-height:1.4!important}
.bar-list{gap:14px!important}.bar-row{grid-template-columns:180px 1fr 66px!important;gap:13px!important}
.bar-row .name{font-size:11.5px!important}.track{height:10px!important}.num{font-size:10.5px!important}

.outcome-split{gap:16px!important}.outcome-card{padding:19px!important;min-height:218px!important;border-radius:18px!important}
.outcome-card h4{font-size:15px!important}.outcome-card p{font-size:11px!important;line-height:1.55!important}
.signal-list{gap:10px!important}.signal-row{padding:11px 12px!important;border-radius:12px!important}
.signal-row span{font-size:11px!important}.signal-row b{font-size:19px!important}.signal-row small{font-size:9.5px!important;margin-top:3px!important}

.validation-snapshot{margin-bottom:18px!important;padding:24px!important}
.validation-head .sub{font-size:11.5px!important}.validation-tag{font-size:9px!important;padding:7px 10px!important}
.validation-grid{gap:12px!important}.validation-metric{padding:15px!important;border-radius:14px!important}
.validation-metric span{font-size:9px!important}.validation-metric strong{font-size:24px!important;margin:7px 0 4px!important}.validation-metric small{font-size:9.5px!important}
.validation-note{font-size:11px!important;line-height:1.55!important;margin-top:13px!important}

.mix-grid{gap:18px!important;margin-bottom:18px!important}.mix-panel{min-height:310px!important}
.mix-visual{grid-template-columns:190px minmax(0,1fr)!important;gap:28px!important;min-height:240px!important}
.family-donut{width:178px!important;height:178px!important}.family-donut-center strong{font-size:28px!important}.family-donut-center span{font-size:9px!important}
.family-legend{gap:10px!important}.family-legend .legend-item span,.family-legend .legend-item b{font-size:10.5px!important}
.taxonomy-summary{gap:12px!important;margin-bottom:17px!important}.taxonomy-stat{padding:16px!important}.taxonomy-stat span{font-size:8.5px!important}.taxonomy-stat strong{font-size:25px!important}.taxonomy-stat small{font-size:9.5px!important}

.funnel{gap:10px!important}.fstep{min-width:145px!important;padding:16px 13px!important}.fstep strong,.branch-box strong{font-size:24px!important}.fstep span,.branch-box span{font-size:9px!important}
.branch-box{padding:15px 17px!important}.branch-col{padding:14px!important}.branch-title{font-size:12px!important}.bstep{font-size:11px!important;padding:10px 11px!important}.drop{font-size:9.5px!important}
.country{padding:19px!important}.country h4{font-size:16px!important}.stat{padding:12px!important}.stat span{font-size:9px!important}.stat strong{font-size:20px!important}
.callout{font-size:11.5px!important;line-height:1.65!important;padding:16px 18px!important}
.health{grid-template-columns:230px 1fr 90px!important;gap:14px!important;padding:13px 0!important}.health b{font-size:11.5px!important}.health span{font-size:10.5px!important}.progress{height:10px!important}
.def{width:min(470px,calc(100vw - 30px))!important}.def-copy strong{font-size:11.5px!important}.def-copy span{font-size:9.5px!important}.def-item b{font-size:11.5px!important}.def-item p{font-size:10.5px!important;line-height:1.55!important}
.foot{font-size:9.5px!important}

@media(max-width:1500px){
  .kpis6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .page-head h1{font-size:38px!important}
}
@media(max-width:1180px){
  .main{padding:30px 24px 58px!important}
  .kpis6,.kpis4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .two,.twoeq,.three{grid-template-columns:1fr!important}
  .page-head{min-height:180px!important;padding:30px!important}
  .page-head h1{font-size:36px!important}
}
@media(max-width:720px){
  .main{padding:18px 12px 42px!important}
  .page-head{padding:24px 20px!important;margin-bottom:16px!important}
  .page-head h1{font-size:32px!important}
  .page-head p{font-size:12px!important}
  .kpis,.kpis6,.kpis4{grid-template-columns:1fr!important}
  .kpi{min-height:140px!important}
  .panel{padding:18px!important}
  .bar-row{grid-template-columns:120px 1fr 52px!important}
  .validation-grid{grid-template-columns:1fr 1fr!important}
  .mix-visual{grid-template-columns:1fr!important}
  .health{grid-template-columns:1fr!important}.health span{text-align:left!important}
}



/* ================================================================
   30-DAY HISTORICAL BASELINE
   Sample GA4-standard metrics are intentionally labelled SAMPLE.
   They demonstrate how pre-launch traffic history fits alongside
   newly launched commercial event tracking without implying that
   the new events existed historically.
   ================================================================ */
html,body,button,select,table,input{font-family:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
.historic-snapshot{margin-bottom:18px!important;padding:0!important;overflow:hidden!important;border-color:color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.07))!important}
.historic-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding:23px 24px 18px;background:radial-gradient(circle at 90% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 35%),linear-gradient(180deg,rgba(15,35,46,.98),rgba(9,24,32,.99));border-bottom:1px solid rgba(255,255,255,.065)}
.historic-top h3{font-size:20px!important;margin:0 0 7px!important}.historic-top .sub{margin:0!important;max-width:880px!important}
.historic-period{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:max-content}.historic-period b{font-size:12px}.historic-period span{font-size:9px;color:#7e98a4}
.sample-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(245,189,79,.09);border:1px solid rgba(245,189,79,.22);color:#f2d48c;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.sample-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(245,189,79,.08)}
.historic-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-bottom:1px solid rgba(255,255,255,.06)}
.historic-kpi{padding:18px 20px;border-right:1px solid rgba(255,255,255,.055);min-width:0}.historic-kpi:last-child{border-right:0}.historic-kpi span{display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:.1em;color:#718b97;font-weight:800}.historic-kpi strong{display:block;font-size:27px;letter-spacing:-.05em;margin:7px 0 3px;color:#f3f7fa}.historic-kpi small{font-size:9px;color:#7f98a3}.historic-kpi small.good{color:#78dca1!important}
.historic-body{display:grid;grid-template-columns:1.2fr .8fr;gap:0}.historic-cell{padding:22px 24px}.historic-cell:first-child{border-right:1px solid rgba(255,255,255,.055)}
.historic-cell h4{font-size:14px;margin:0 0 4px}.historic-cell .sub{margin-bottom:14px!important}
.historic-bars{display:grid;gap:11px}.historic-bar{display:grid;grid-template-columns:130px 1fr 58px;gap:12px;align-items:center}.historic-bar span{font-size:10.5px;color:#b8c8cf}.historic-bar b{font-size:10px;text-align:right;color:#dce8ec}.historic-track{height:9px;background:#142d37;border-radius:99px;overflow:hidden}.historic-track i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.historic-table{width:100%;min-width:0!important}.historic-table td,.historic-table th{padding:9px 10px!important}.historic-note{padding:13px 24px;background:rgba(245,189,79,.055);border-top:1px solid rgba(245,189,79,.12);color:#b7a87f;font-size:9.5px;line-height:1.55}.historic-note strong{color:#ead89d}
.kpi.sample-data{border-color:rgba(245,189,79,.20)!important}.kpi.sample-data:before{background:linear-gradient(180deg,var(--amber),transparent 76%)!important}.kpi.sample-data .delta{color:#cdbb85!important}.sample-mini{display:inline-block;margin-left:6px;padding:3px 5px;border-radius:999px;border:1px solid rgba(245,189,79,.2);background:rgba(245,189,79,.07);color:#e9cd85;font-size:7px;letter-spacing:.08em;vertical-align:1px}
.tracking-start{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:5 5;opacity:.9}.tracking-label{fill:#cdbb85;font-size:9px;font-weight:700}
body.light .historic-top{background:linear-gradient(180deg,#fff,#f7fafc)}body.light .historic-kpi strong{color:#17303d}body.light .historic-top,body.light .historic-kpis,body.light .historic-cell:first-child{border-color:#e2e9ed}body.light .historic-track{background:#e7eef1}body.light .historic-note{background:#fffaf0;color:#806f46}
@media(max-width:1250px){.historic-kpis{grid-template-columns:repeat(3,1fr)}.historic-kpi:nth-child(3){border-right:0}.historic-kpi:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.055)}.historic-body{grid-template-columns:1fr}.historic-cell:first-child{border-right:0;border-bottom:1px solid rgba(255,255,255,.055)}}
@media(max-width:720px){.historic-top{display:block}.historic-period{align-items:flex-start;margin-top:14px}.historic-kpis{grid-template-columns:1fr 1fr}.historic-kpi:nth-child(3){border-right:1px solid rgba(255,255,255,.055)}.historic-kpi:nth-child(even){border-right:0}.historic-kpi{border-bottom:1px solid rgba(255,255,255,.055)}.historic-bar{grid-template-columns:100px 1fr 46px}.historic-cell{padding:18px}}