:root{
  --bg0:#070A12;
  --bg1:#0A0F1F;
  --card:#0E1630cc;
  --card2:#0E1630f0;
  --border:#223056;
  --text:#E9EEFF;
  --muted:#9CB0E6;
  --brand:#7C5CFF;
  --brand2:#2DD4BF;
  --good:#22C55E;
  --warn:#F59E0B;
  --bad:#EF4444;
  --shadow: 0 20px 55px rgba(0,0,0,.45);
  --radius:18px;
  --radius2:24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(1000px 700px at 80% 30%, rgba(45,212,191,.18), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}
.bg{
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 500px at 15% 85%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(700px 500px at 85% 80%, rgba(45,212,191,.12), transparent 60%);
  filter: blur(0px);
  opacity: .9;
}
.wrap{max-width:1200px; margin:0 auto; padding:0 18px;}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(10,15,31,.75), rgba(10,15,31,.35));
  border-bottom:1px solid rgba(34,48,86,.6);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{display:flex; align-items:center; gap:12px;}
.logo{
  width:42px; height:42px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800;
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(45,212,191,.85));
  box-shadow: var(--shadow);
}
.brand-title{font-weight:700; letter-spacing:.2px;}
.brand-sub{font-size:12px; color:var(--muted);}
.nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.nav-item{
  text-decoration:none;
  color:var(--muted);
  padding:8px 12px;
  border-radius:14px;
  border:1px solid transparent;
  transition: .15s ease;
  font-weight:600;
  font-size:14px;
}
.nav-item:hover{color:var(--text); border-color: rgba(34,48,86,.9); background: rgba(14,22,48,.35);}
.nav-item.active{color:var(--text); border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.12);}
.right{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.pill{
  padding:8px 12px;
  border:1px solid rgba(34,48,86,.8);
  background: rgba(14,22,48,.45);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
}
.main{padding:20px 0 28px;}
.h1{font-size:22px; font-weight:800; margin:0 0 6px;}
.sub{color:var(--muted); margin:0 0 18px; font-size:14px;}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
}
.card{
  background: var(--card);
  border: 1px solid rgba(34,48,86,.75);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .hd{
  padding:14px 16px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.card .title{
  font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; gap:10px;
}
.badge{
  font-size:12px;
  color:var(--muted);
  padding:5px 10px;
  border:1px solid rgba(34,48,86,.8);
  border-radius:999px;
  background: rgba(14,22,48,.5);
}
.badge-good{
  border-color: rgba(34,197,94,.40);
  background: rgba(34,197,94,.12);
  color: rgba(220,255,235,.95);
}
.badge-warn{
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.12);
  color: rgba(255,244,223,.95);
}
.card .bd{padding:0 16px 16px;}
.kpi-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px;}
.kpi{
  flex:1;
  min-width: 165px;
  background: rgba(14,22,48,.55);
  border:1px solid rgba(34,48,86,.75);
  border-radius: 16px;
  padding:12px;
}
.kpi .k{font-size:12px; color:var(--muted); font-weight:600;}
.kpi .v{font-size:20px; font-weight:800; margin-top:6px;}
.kpi .p{font-size:12px; color:var(--muted); margin-top:4px;}
.kpi.good .v{color:var(--good)}
.kpi.warn .v{color:var(--warn)}
.kpi.bad .v{color:var(--bad)}
.kpi.neutral .v{color:#A5B4FC}
.row{
  display:flex; gap:14px; align-items:stretch; flex-wrap:wrap;
}
.wide{grid-column: 1 / -1;}
.col4{grid-column: span 4;}
.col6{grid-column: span 6;}
.col8{grid-column: span 8;}
.col12{grid-column: span 12;}

/*--------------------------------------
  Quick country boxes (pinned CZ/ES/IT)
--------------------------------------*/
.quick-country .bd{ padding-top: 4px; }
.qc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.qc-total{ font-size:34px; font-weight:900; letter-spacing:.2px; }
.qc-sub{ font-size:12px; color: var(--muted); margin-top:4px; }
.qc-mini{ display:flex; gap:10px; margin-top:12px; }
.qc-mini .mini{
  flex:1;
  background: rgba(14,22,48,.55);
  border:1px solid rgba(34,48,86,.75);
  border-radius: 16px;
  padding:10px;
  text-align:left;
}
.qc-mini .mini .k{ font-size:11px; color: var(--muted); font-weight:800; letter-spacing:.06em; }
.qc-mini .mini .v{ font-size:16px; font-weight:900; margin-top:4px; }

@media (max-width: 980px){
  .qc-total{ font-size:28px; }
}


.featured-country .hd{ align-items:flex-start; }
.featured-country .spark.small{ width:140px; height:32px; opacity:.95; }
@media (max-width: 980px){
  .featured-country .spark.small{ width:120px; height:30px; }
}

.table{
  width:100%;
  border-collapse: collapse;
  font-size:13px;
}
.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid rgba(34,48,86,.65);
  vertical-align: top;
}
.table th{
  color:var(--muted);
  font-weight:700;
  text-transform: uppercase;
  font-size:11px;
  letter-spacing:.08em;
}
.table tr:hover td{background: rgba(124,92,255,.06);}
.a{color:#BBD6FF; text-decoration:none; font-weight:700;}
.a:hover{text-decoration:underline;}

/*--------------------------------------
  Table links (Lead / Tracking) – avoid default blue/underline
--------------------------------------*/
.table a, .table a:visited{
  color: rgba(226,235,255,.95);
  text-decoration: none;
}
.table a:hover{ text-decoration: underline; }

.lead-link{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(124,92,255,.12);
  border: 1px solid rgba(124,92,255,.22);
  font-weight: 800;
  letter-spacing: .2px;
}
.lead-link:hover{
  background: rgba(124,92,255,.18);
  text-decoration: none;
}

/* compact clickable chips (filters/quick links) */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  text-decoration:none;
  color: rgba(226,235,255,.95);
}
.chip:hover{ background:rgba(255,255,255,.10); text-decoration:none; }
.chip-warn{ border-color:rgba(245,158,11,.35); }
.chip-good{ border-color:rgba(34,197,94,.35); }

.track-link{ display:inline-block; width:100%; }
.track-link:hover{ text-decoration: none; }
.small{font-size:12px; color:var(--muted);}

/*--------------------------------------
  Checkbox chip (Country filters)
--------------------------------------*/
.cb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(34,48,86,.85);
  background: rgba(14,22,48,.55);
  color: rgba(226,235,255,.92);
  font-weight: 700;
}
.cb input{ width:16px; height:16px; }

.analytics-filters{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  align-items:end;
}
.analytics-countries{
  grid-column: 1 / -1;
}
.country-picks{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:8px;
  padding:12px;
  border:1px solid rgba(34,48,86,.75);
  border-radius:16px;
  background: rgba(14,22,48,.35);
  max-height:220px;
  overflow:auto;
}
.country-pick{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 12px;
  border:1px solid rgba(34,48,86,.75);
  border-radius:14px;
  background: rgba(14,22,48,.6);
  color: rgba(233,238,255,.95);
  cursor:pointer;
  transition: .15s ease;
}
.country-pick:hover{
  border-color: rgba(124,92,255,.45);
  background: rgba(124,92,255,.08);
}
.country-pick.active{
  border-color: rgba(124,92,255,.55);
  background: rgba(124,92,255,.14);
}
.country-pick input{
  margin:0;
  width:16px;
  height:16px;
  accent-color: var(--brand);
  flex:0 0 auto;
}
.country-pick span{
  display:block;
  font-size:14px;
  line-height:1.25;
}
.country-pick small{
  color: var(--muted);
  font-size:12px;
}
.analytics-help{
  margin-top:6px;
  font-size:12px;
}

@media (max-width: 760px){
  .country-picks{
    grid-template-columns: 1fr;
    max-height:260px;
  }
}

/*--------------------------------------
  Lead completeness panels
--------------------------------------*/
.panel{
  border:1px solid rgba(34,48,86,.55);
  background: rgba(10,16,36,.35);
  border-radius: 16px;
  padding: 12px 14px;
}
.panel-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.panel-t{ font-weight: 900; letter-spacing:.3px; }
.miss{ margin: 0; padding-left: 18px; }
.miss li{ margin: 6px 0; color: rgba(226,235,255,.92); }
.ok-row{ display:flex; align-items:center; gap:10px; padding: 6px 0; }
.controls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding: 0 16px 16px;
}
.input, .select, .btn{
  border-radius: 14px;
  border:1px solid rgba(34,48,86,.85);
  background: rgba(14,22,48,.55);
  color:var(--text);
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.input{min-width:220px;}
.btn{cursor:pointer; font-weight:800;}
.btn.primary{
  border-color: rgba(124,92,255,.7);
  background: linear-gradient(135deg, rgba(124,92,255,.35), rgba(45,212,191,.18));
}
.btn.danger{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.10);
}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.footer{
  border-top:1px solid rgba(34,48,86,.6);
  background: rgba(10,15,31,.35);
  backdrop-filter: blur(14px);
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0;}
.muted{color:var(--muted); font-size:12px;}
.toggle{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; user-select:none;}
.toggle input{display:none;}
.toggle-ui{
  width:44px; height:26px; border-radius:999px;
  border:1px solid rgba(34,48,86,.9);
  background: rgba(14,22,48,.6);
  position:relative;
}
.toggle-ui:after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:999px;
  background: rgba(156,176,230,.95);
  transition: .2s ease;
}
.toggle input:checked + .toggle-ui{
  border-color: rgba(45,212,191,.7);
  background: rgba(45,212,191,.18);
}
.toggle input:checked + .toggle-ui:after{
  left:21px;
  background: rgba(45,212,191,.95);
}
.toggle-label{font-weight:700;}
.toast{
  position:fixed; right:18px; bottom:18px;
  background: rgba(14,22,48,.92);
  border:1px solid rgba(34,48,86,.9);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  max-width: 420px;
  display:none;
  z-index: 99;
}
.toast.show{display:block;}
.toast .t{font-weight:800;}
.toast .m{color:var(--muted); margin-top:4px; font-size:13px;}
@media (max-width:900px){
  .col4,.col6,.col8{grid-column: span 12;}
  .nav{display:none;}
}

/* -----------------------------------------------------
   Compat classes (older templates)
------------------------------------------------------*/
.grid-2{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; align-items:start;}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr;} }

.card-h{padding:14px 16px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.card-title{font-weight:800; letter-spacing:.2px; display:flex; align-items:center; gap:10px;}
.table-wrap{padding:0 16px 16px; overflow:auto;}
.right{text-align:right;}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.btn-sm{padding:8px 10px; font-size:13px; border-radius:12px;}
.btn-ghost{background:transparent; border-color: rgba(34,48,86,.7);}
.t-top{font-weight:800;}
.t-sub{font-size:12px;}

/* -----------------------------------------------------
   Enterprise dashboard blocks
------------------------------------------------------*/
.countries-wrap{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
@media (max-width:1100px){ .countries-wrap{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:900px){ .countries-wrap{grid-template-columns:1fr;} }

.country-card{
  background: linear-gradient(135deg, rgba(14,22,48,.75), rgba(14,22,48,.45));
  border:1px solid rgba(34,48,86,.75);
  border-radius: 22px;
  padding:16px;
  box-shadow: var(--shadow);
  display:flex;
  gap:14px;
  align-items:stretch;
}
.countries-wrap .country-card{flex-direction:column;}
.countries-wrap .country-left,.countries-wrap .country-right{min-width:0;}
.countries-wrap .total-big{font-size:30px;}
.country-left{flex: 1; min-width: 220px; display:flex; flex-direction:column; gap:10px;}
.country-name{font-size:20px; font-weight:900; margin:0;}
.country-code{color:var(--muted); font-size:12px; letter-spacing:.12em;}
.country-actions{display:flex; gap:10px; align-items:center; margin-top:auto;}

.country-right{flex: 1; min-width: 260px; display:flex; flex-direction:column; gap:10px;}
.total-big{font-size:34px; font-weight:900; line-height:1.05;}
.total-sub{color:var(--muted); font-size:12px; margin-top:2px;}

.segbar{height:10px; border-radius:999px; overflow:hidden; display:flex; border:1px solid rgba(34,48,86,.75); background: rgba(10,15,31,.35);}
.seg{height:100%;}
.seg.good{background: rgba(34,197,94,.85)}
.seg.warn{background: rgba(245,158,11,.90)}
.seg.bad{background: rgba(239,68,68,.88)}
.seg.neutral{background: rgba(124,92,255,.70)}

.mini-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;}
.mini{padding:10px 10px; border:1px solid rgba(34,48,86,.75); border-radius:16px; background: rgba(14,22,48,.45);}
.mini .k{color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em;}
.mini .v{font-weight:900; font-size:16px; margin-top:6px;}
.mini .p{color:var(--muted); font-size:12px; margin-top:4px;}

.chart-row{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.spark{
  width:220px; height:48px;
  border:1px solid rgba(34,48,86,.75);
  border-radius: 14px;
  background: rgba(14,22,48,.35);
}


.p-ok{box-shadow:0 0 0 1px rgba(34,197,94,.28) inset}
.p-warn{box-shadow:0 0 0 1px rgba(245,158,11,.28) inset}
.p-bad{box-shadow:0 0 0 1px rgba(244,63,94,.28) inset}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:12px;line-height:18px}
.b-ok{box-shadow:0 0 0 1px rgba(34,197,94,.25) inset}
.b-warn{box-shadow:0 0 0 1px rgba(245,158,11,.25) inset}
.b-bad{box-shadow:0 0 0 1px rgba(244,63,94,.25) inset}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace}
.small{font-size:12px}


.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media (max-width: 980px){.grid-2{grid-template-columns:1fr;}}

/* ---- Send (Excel-like grid) ---- */
.xl-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(10,16,36,.45);
}
.xl-grid{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 1200px;
}
.xl-grid thead th{
  position:sticky;
  top:0;
  z-index:2;
  background: rgba(12,18,42,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.78);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.xl-grid td{
  border-bottom:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.04);
}
.xl-grid td:last-child{border-right:0;}
.xl-grid tbody tr:last-child td{border-bottom:0;}
.xl-cell{
  width:100%;
  padding:10px 10px;
  background: transparent;
  border:0;
  outline: none;
  color: rgba(255,255,255,.92);
  font: inherit;
}
.xl-cell:focus{
  box-shadow: 0 0 0 2px rgba(124,92,255,.50) inset;
  border-radius: 10px;
}

.log-line{padding:6px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px;}
.log-line.ok{color:rgba(34,197,94,.95)}
.log-line.warn{color:rgba(245,158,11,.95)}
.log-line.err{color:rgba(244,63,94,.95)}


/* --- additions v2 --- */
.card-h{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px}
.card-title{font-weight:700; font-size:16px}
.h1{font-size:22px; font-weight:800; letter-spacing:-0.02em}
.small{font-size:12px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media(max-width:1100px){.grid-3{grid-template-columns:1fr}}
.kv{display:grid; grid-template-columns:110px 1fr; gap:8px 12px}
.kv .k{color:rgba(255,255,255,.65); font-size:12px}
.kv .v{font-weight:600}
.sep{height:1px; background:rgba(255,255,255,.08); margin:12px 0}
.badge-final{background:rgba(34,197,94,.18) !important; border-color:rgba(34,197,94,.35) !important}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.14)}
.btn-ghost:hover{border-color:rgba(255,255,255,.28)}
.table-wrap{overflow:auto}
.right{text-align:right}
.t-top{font-weight:700}
.t-sub{font-size:12px; margin-top:2px}

.badge-ok{background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35)}
.badge-bad{background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.35)}
.badge-warn{background:rgba(234,179,8,.18); border-color:rgba(234,179,8,.35)}
pre.code{background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12); padding:10px; border-radius:12px; overflow:auto}

/* =====================
   Charts (inline SVG)
   ===================== */
svg.chart{ width:100%; height:200px; display:block; }
.chart-grid .grid-line{ stroke: rgba(148,163,184,.18); stroke-width:1; }
.chart-grid .y-label{ fill: rgba(148,163,184,.8); font-size:11px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.chart-x .x-label{ fill: rgba(148,163,184,.7); font-size:10px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.series-line{ stroke-width:2.2; }
.series-area{ opacity:.12; }

.series-created{ stroke: rgba(124,92,255,.95); }
.series-confirmed{ stroke: rgba(45,212,191,.95); }
.series-delivered{ stroke: rgba(34,197,94,.95); }
.series-returned{ stroke: rgba(245,158,11,.95); }
.series-rejected{ stroke: rgba(239,68,68,.95); }

.series-area.series-created{ fill: rgba(124,92,255,.95); }

.chart-tip .tip-line{ stroke: rgba(124,92,255,.35); stroke-width:1; }
.chart-tip .tip-box{
  fill: rgba(15,23,42,.98);
  stroke: rgba(255,255,255,.22);
  stroke-width: 1;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}
.chart-tip .tip-text{ fill: rgba(233,241,255,.96); }
.chart-tip .tip-text{ fill: rgba(226,232,240,.95); font-size:12px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.chart-tip .tip-title{ font-weight:700; }

.legend{ display:flex; gap:10px; flex-wrap:wrap; }
.legend .lg{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid rgba(148,163,184,.18); border-radius:999px; background:rgba(2,6,23,.25); }
.legend .dot{ width:10px; height:10px; border-radius:999px; }
.legend .t{ font-size:12px; color: rgba(226,232,240,.9); }
.legend .d-created{ background: rgba(124,92,255,.95); }
.legend .d-confirmed{ background: rgba(45,212,191,.95); }
.legend .d-delivered{ background: rgba(34,197,94,.95); }
.legend .d-returned{ background: rgba(245,158,11,.95); }
.legend .d-rejected{ background: rgba(239,68,68,.95); }


/* Raw API details viewer */
.raw-box{border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; background:rgba(0,0,0,.15)}
.raw-row{display:grid; grid-template-columns: 220px 1fr; gap:12px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.06)}
.raw-row:last-child{border-bottom:none}
.raw-k{opacity:.7; font-size:12px}
.raw-v{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size:12px; overflow-wrap:anywhere}
.raw-d{border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:8px; background:rgba(255,255,255,.03)}
.raw-s{cursor:pointer; font-weight:600}

/* ===== Sync pill + Auto refresh toggle (header) ===== */
.topbar-right{display:flex; align-items:center; gap:14px;}
.sync-pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.sync-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(45,212,191,.95);
  box-shadow: 0 0 0 4px rgba(45,212,191,.12);
}
.sync-paused{
  display:none;
  font-size:13px;
  opacity:.9;
}
.sync-text{color:rgba(255,255,255,.92); font-weight:700; letter-spacing:.2px;}
.sync-meta{color:rgba(255,255,255,.55); font-size:12px; font-weight:600; padding-left:6px;}

body.autorefresh-off .sync-dot{
  background: rgba(156,176,230,.85);
  box-shadow: 0 0 0 4px rgba(156,176,230,.10);
}
body.autorefresh-off .sync-paused{display:inline-block;}
body.autorefresh-off .toggle-label{opacity:.55;}
body.autorefresh-off .sync-pill{opacity:.85;}

body.sync-stale .sync-dot{
  background: rgba(251,191,36,.95);
  box-shadow: 0 0 0 4px rgba(251,191,36,.14);
}

/* Hover enlarge sparkline (mini trend graph on hover) */
.country-card .sparkline{transition: transform .15s ease;}
.country-card:hover .sparkline{transform: scale(1.18);}

@media (max-width:520px){
  .topbar-right{gap:10px;}
  .sync-pill{padding:8px 12px; gap:8px;}
  .toggle-label{display:none;}
}