:root{--ink:#111827;--muted:#64748b;--line:#e2e8f0;--rose:#e11d48;--violet:#7c3aed;--teal:#14b8a6;--sun:#fbbf24;}
*{box-sizing:border-box}
html{min-height:100%;overflow-x:hidden;background:#f8fafc}
body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 4% 8%,rgba(244,63,94,.16),transparent 28%),radial-gradient(circle at 92% 30%,rgba(20,184,166,.13),transparent 25%),linear-gradient(145deg,#fff,#f8fafc 55%,#f5f3ff);color:var(--ink);font-family:"Poppins",system-ui,sans-serif}
a{color:inherit;text-decoration:none}.ambient{position:fixed;z-index:0;border-radius:50%;filter:blur(75px);pointer-events:none}.ambient-one{width:330px;height:330px;left:-140px;top:38%;background:rgba(225,29,72,.13)}.ambient-two{width:380px;height:380px;right:-170px;bottom:-90px;background:rgba(124,58,237,.12)}
.dashboard-nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;width:min(1180px,calc(100% - 40px));margin:auto;padding:26px 0}.brand{display:flex;align-items:center;gap:11px;font-family:"Syne",sans-serif;font-size:1.05rem}.brand span{width:39px;height:39px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#fb7185,var(--rose));color:#fff;box-shadow:0 12px 25px -12px rgba(225,29,72,.8);font-size:.82rem}.back-link{display:flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.78);font-size:.76rem;font-weight:700;box-shadow:0 12px 28px -23px #0f172a;transition:.2s}.back-link:hover{transform:translateY(-2px);border-color:#fda4af;color:var(--rose)}
.dashboard-shell{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:auto;padding:52px 0 44px}.dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:46px}.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border-radius:999px;background:rgba(225,29,72,.08);color:var(--rose);font-size:.67rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 0 5px rgba(225,29,72,.1)}.dashboard-hero h1{margin:18px 0 12px;font:800 clamp(3.4rem,8vw,6.8rem)/.82 "Syne",sans-serif;letter-spacing:-.065em}.dashboard-hero h1 em{color:var(--rose);font-style:normal}.dashboard-hero p{max-width:680px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.75}.live-card{flex:none;display:flex;align-items:center;gap:15px;padding:17px 20px;border:1px solid rgba(124,58,237,.16);border-radius:20px;background:rgba(255,255,255,.75);box-shadow:0 25px 55px -35px rgba(76,29,149,.5);backdrop-filter:blur(12px)}.live-orbit{position:relative;width:45px;height:45px;border:1px solid rgba(124,58,237,.25);border-radius:50%;animation:orbit 5s linear infinite}.live-orbit:before{content:"";position:absolute;inset:7px;border:1px dashed rgba(20,184,166,.35);border-radius:50%}.live-orbit i{position:absolute;width:8px;height:8px;left:50%;top:-4px;border-radius:50%;background:var(--violet);box-shadow:0 0 12px rgba(124,58,237,.8)}.live-card small{display:block;color:#94a3b8;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.live-card strong{display:flex;align-items:center;gap:7px;margin-top:4px;font-size:.78rem}.live-card strong i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 9px #22c55e}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}.metric-card{position:relative;min-height:190px;display:flex;flex-direction:column;padding:25px;border:1px solid rgba(226,232,240,.9);border-radius:26px;background:rgba(255,255,255,.82);box-shadow:0 25px 55px -42px rgba(15,23,42,.55);overflow:hidden}.metric-card:after{content:"";position:absolute;width:120px;height:120px;right:-50px;bottom:-55px;border:18px solid rgba(124,58,237,.06);border-radius:50%}.metric-primary{background:linear-gradient(145deg,#111827,#312e81);border-color:transparent;color:#fff}.metric-primary:after{border-color:rgba(255,255,255,.07)}.metric-icon{width:37px;height:37px;flex:none;display:grid;place-items:center;margin-bottom:18px;border-radius:12px;background:#f1f5f9;color:var(--violet);font-size:1.2rem;font-weight:800}.metric-primary .metric-icon{background:rgba(255,255,255,.1);color:#67e8f9}.metric-card>span{display:block;color:#64748b;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.metric-primary>span{color:rgba(255,255,255,.6)}.metric-value{position:relative;z-index:1;display:block;margin:5px 0 8px;font:800 3.4rem/.9 "Syne",sans-serif;letter-spacing:-.05em}.metric-card small{position:relative;z-index:1;margin-top:auto;color:#94a3b8;font-size:.61rem}.metric-primary small{color:rgba(255,255,255,.48)}
.analytics-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:18px}.chart-card,.privacy-card{border:1px solid rgba(226,232,240,.9);border-radius:28px;background:rgba(255,255,255,.84);box-shadow:0 25px 60px -45px rgba(15,23,42,.55);backdrop-filter:blur(10px)}.chart-card{padding:27px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-head span,.privacy-kicker{color:var(--rose);font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.section-head h2,.privacy-card h2{margin:5px 0 0;font:800 1.25rem/1.2 "Syne",sans-serif}.section-head button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:#fff;color:#64748b;cursor:pointer;transition:.2s}.section-head button:hover{border-color:#c4b5fd;color:var(--violet);transform:rotate(18deg)}.section-head button:disabled{opacity:.5;cursor:wait}.section-head svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chart{height:245px;display:grid;grid-template-columns:repeat(7,1fr);align-items:end;gap:12px;margin-top:25px;padding:16px 8px 2px;border-bottom:1px solid var(--line);background:linear-gradient(rgba(124,58,237,.045) 1px,transparent 1px);background-size:100% 25%}.bar-item{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}.bar-value{font-size:.62rem;font-weight:800;color:#64748b}.bar-track{position:relative;width:min(38px,65%);height:var(--height);min-height:5px;border-radius:11px 11px 4px 4px;background:linear-gradient(to top,var(--violet),#fb7185);box-shadow:0 10px 20px -12px rgba(124,58,237,.8);animation:bar-in .55s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}.bar-label{color:#94a3b8;font-size:.58rem;font-weight:700;white-space:nowrap}.status{margin:14px 0 0;color:#94a3b8;font-size:.59rem}.status.is-error{color:#be123c}
.privacy-card{padding:27px;background:radial-gradient(circle at 100% 0,rgba(20,184,166,.16),transparent 38%),linear-gradient(150deg,#0f172a,#1e293b);color:#fff}.shield{width:48px;height:48px;display:grid;place-items:center;margin-bottom:22px;border-radius:16px;background:rgba(45,212,191,.12);color:#5eead4}.shield svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.privacy-kicker{color:#5eead4}.privacy-card h2{font-size:1.45rem}.privacy-card p{margin:16px 0;color:rgba(255,255,255,.62);font-size:.72rem;line-height:1.7}.privacy-card ul{display:grid;gap:9px;margin:22px 0 0;padding:0;list-style:none}.privacy-card li{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.78);font-size:.68rem;font-weight:600}.privacy-card li i{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(45,212,191,.13);color:#5eead4;font-style:normal;font-size:.63rem}
.country-section{margin-top:18px}.country-card{padding:27px;border:1px solid rgba(226,232,240,.9);border-radius:28px;background:radial-gradient(circle at 96% 6%,rgba(34,211,238,.12),transparent 28%),rgba(255,255,255,.86);box-shadow:0 25px 60px -45px rgba(15,23,42,.55);backdrop-filter:blur(10px)}.country-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}.country-head>div:first-child{min-width:0}.country-head>div:first-child>span{color:var(--rose);font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.country-head h2{margin:5px 0 0;font:800 1.25rem/1.2 "Poppins",system-ui,sans-serif;letter-spacing:-.035em}.country-head p{max-width:720px;margin:9px 0 0;color:#64748b;font-size:.67rem;line-height:1.6}.country-summary{min-width:128px;display:flex;flex-direction:column;align-items:flex-end;padding:12px 15px;border:1px solid rgba(124,58,237,.14);border-radius:16px;background:rgba(255,255,255,.78)}.country-summary strong{color:var(--violet);font-size:1.65rem;line-height:1;font-variant-numeric:tabular-nums}.country-summary span{margin-top:5px;color:#94a3b8;font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.country-chart{display:grid;gap:11px;margin-top:24px}.country-row{display:grid;grid-template-columns:42px minmax(150px,.8fr) minmax(180px,2fr) 78px;align-items:center;gap:13px;padding:11px 13px;border:1px solid rgba(226,232,240,.88);border-radius:17px;background:rgba(248,250,252,.78)}.country-flag{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#fff;font-size:1.12rem;box-shadow:0 9px 18px -15px #0f172a}.country-label{min-width:0;display:flex;flex-direction:column}.country-label strong{overflow:hidden;color:#1e293b;font-size:.73rem;text-overflow:ellipsis;white-space:nowrap}.country-label small{margin-top:3px;color:#94a3b8;font-size:.56rem}.country-meter{height:9px;overflow:hidden;border-radius:999px;background:#ede9fe}.country-meter i{display:block;width:var(--country-width);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),#fb7185);box-shadow:0 0 14px rgba(124,58,237,.28);animation:country-in .6s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}.country-value{display:flex;align-items:baseline;justify-content:flex-end;gap:6px}.country-value strong{font-size:.86rem;font-variant-numeric:tabular-nums}.country-value span{color:#94a3b8;font-size:.57rem;font-weight:700}.country-status{margin:15px 2px 0;color:#94a3b8;font-size:.59rem}.country-empty{padding:26px;border:1px dashed #cbd5e1;border-radius:17px;color:#64748b;font-size:.7rem;text-align:center}
.dashboard-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:20px;width:min(1180px,calc(100% - 40px));margin:auto;padding:24px 0 36px;border-top:1px solid var(--line);color:#94a3b8;font-size:.63rem}
@keyframes orbit{to{transform:rotate(360deg)}}@keyframes bar-in{from{transform:scaleY(0);opacity:.3}to{transform:scaleY(1);opacity:1}}@keyframes country-in{from{transform:scaleX(0);opacity:.3}to{transform:scaleX(1);opacity:1}}
@media(max-width:760px){.dashboard-nav,.dashboard-shell,.dashboard-footer{width:min(100% - 26px,1180px)}.dashboard-nav{padding-top:17px}.brand strong{display:none}.back-link{font-size:.67rem}.dashboard-shell{padding-top:32px}.dashboard-hero{align-items:flex-start;flex-direction:column;margin-bottom:30px}.dashboard-hero>div:first-child{min-width:0;max-width:100%}.dashboard-hero h1{font-size:clamp(2.7rem,10.5vw,5.2rem)}.dashboard-hero p{font-size:.8rem}.live-card{align-self:stretch}.metrics{grid-template-columns:1fr}.metric-card{min-height:170px}.analytics-grid{grid-template-columns:1fr}.chart-card{padding:20px 14px}.chart{gap:5px;height:220px}.bar-track{width:min(30px,74%)}.bar-label{font-size:.51rem}.dashboard-footer{flex-direction:column;gap:6px}}

/* Responsive layout normalization: keep display type proportional instead of stretched. */
.dashboard-shell{padding:clamp(28px,4vw,52px) 0 44px}
.dashboard-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(28px,5vw,72px)}
.dashboard-hero>div:first-child{min-width:0}
.dashboard-hero h1{max-width:900px;font-family:"Poppins",system-ui,sans-serif;font-size:clamp(3.4rem,6.8vw,5.9rem);font-weight:800;line-height:.89;letter-spacing:-.07em}
.dashboard-hero p{max-width:760px}
.metric-value{font-family:"Poppins",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.section-head h2,.privacy-card h2{font-family:"Poppins",system-ui,sans-serif;letter-spacing:-.035em}

@media(max-width:1000px){
  .dashboard-nav,.dashboard-shell,.dashboard-footer{width:min(100% - 32px,1180px)}
  .dashboard-hero{grid-template-columns:1fr;align-items:start;gap:24px;margin-bottom:34px}
  .dashboard-hero h1{max-width:760px;font-size:clamp(3.3rem,8.8vw,5rem)}
  .live-card{justify-self:start}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric-primary{grid-column:1/-1}
  .analytics-grid{grid-template-columns:1fr}
}

@media(max-width:640px){
  .dashboard-nav,.dashboard-shell,.dashboard-footer{width:min(100% - 26px,1180px)}
  .dashboard-shell{padding:30px 0 38px}
  .dashboard-hero{display:grid;gap:22px;margin-bottom:30px}
  .dashboard-hero h1{font-size:clamp(2.8rem,13vw,4rem);line-height:.92;letter-spacing:-.065em}
  .dashboard-hero p{font-size:.79rem;line-height:1.68}
  .live-card{width:100%;align-self:auto;justify-self:stretch}
  .metrics{grid-template-columns:1fr}
  .metric-primary{grid-column:auto}
  .metric-card{min-height:158px;padding:22px}
  .metric-icon{margin-bottom:13px}
  .metric-value{font-size:2.9rem}
  .chart-card{padding:21px 14px}
  .chart{height:210px;gap:5px}
  .privacy-card{padding:24px}
  .country-card{padding:22px 14px}
  .country-head{align-items:stretch;flex-direction:column;gap:15px;padding:0 8px}
  .country-summary{min-width:0;align-items:flex-start}
  .country-row{grid-template-columns:38px minmax(0,1fr) 68px;gap:10px;padding:10px}
  .country-flag{grid-column:1;grid-row:1/3}
  .country-label{grid-column:2;grid-row:1}
  .country-value{grid-column:3;grid-row:1}
  .country-meter{grid-column:2/4;grid-row:2}
}

@media(max-width:420px){
  .dashboard-hero h1{font-size:clamp(2.55rem,12.6vw,3.35rem)}
  .back-link{padding:9px 12px}
  .section-head h2{font-size:1.1rem}
  .bar-label{font-size:0}
  .bar-label:after{content:attr(data-compact);color:#94a3b8;font-size:.51rem}
}

@media(min-width:1001px) and (max-height:760px){
  .dashboard-nav{padding:16px 0}
  .dashboard-shell{padding:22px 0 36px}
  .dashboard-hero{gap:42px;margin-bottom:28px}
  .dashboard-hero h1{margin:12px 0 9px;font-size:clamp(3.25rem,6vw,4.8rem);line-height:.9}
  .dashboard-hero p{font-size:.82rem;line-height:1.6}
  .live-card{padding:14px 17px}
  .metrics{margin-bottom:16px}
  .metric-card{min-height:164px;padding:21px}
  .metric-icon{margin-bottom:12px}
  .metric-value{font-size:2.75rem}
  .metric-card small{font-size:.58rem}
}
@media(prefers-reduced-motion:reduce){.live-orbit,.bar-track,.country-meter i{animation:none}.back-link,.section-head button{transition:none}}