/* A compact statistics panel; no backdrop animations or repainting effects. */
#stats-modal { padding: 12px; }
#stats-modal .stats-modal-card { --stats-ink:#f5f0f3; --stats-muted:#b6acb6; --stats-line:rgba(180,160,180,.18); width:min(100%,560px); max-height:calc(100dvh - 24px); padding:27px; border:1px solid var(--stats-line); border-radius:25px; background:#18161d; color:var(--stats-ink); text-align:left; }
#stats-modal .qr-modal-kicker { margin:0 48px 9px 0; color:var(--accent-soft,#f4b9d0); font-size:.6rem; letter-spacing:.15em; }
#stats-modal h2 { margin:0 45px 23px 0; font-size:clamp(1.65rem,5.8vw,2.15rem); line-height:1.15; text-align:left; }
#stats-modal .qr-modal-close { top:18px; right:18px; width:42px; height:42px; border:1px solid var(--stats-line); background:rgba(180,160,180,.08); color:var(--stats-ink); box-shadow:none; }
#stats-modal .stats-total-hero { display:grid; gap:8px; margin-bottom:23px; }
#stats-modal .stats-total-hero strong { color:var(--accent-soft,#ffc0d9); font-size:clamp(3.6rem,15vw,5.1rem); line-height:.95; letter-spacing:-.065em; font-weight:800; font-variant-numeric:tabular-nums; }
#stats-modal .stats-total-hero>span { color:var(--stats-muted); font-size:.73rem; }
#stats-modal .stats-activity { display:grid; grid-template-columns:1fr 1fr; gap:18px; padding:0 0 22px; border-bottom:1px solid var(--stats-line); }
#stats-modal .stats-activity>div { display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
#stats-modal .stats-activity>div+div { border-left:1px solid var(--stats-line); padding-left:23px; }
#stats-modal .stats-activity span { font-size:.66rem; color:var(--stats-muted); }
#stats-modal .stats-activity strong { font-size:1.4rem; line-height:1.2; font-variant-numeric:tabular-nums; }
#stats-modal .stats-online-label::before { content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#68d5b2; }
#stats-modal .stats-periods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:20px 0; padding:4px; border:1px solid var(--stats-line); border-radius:13px; background:rgba(0,0,0,.12); }
#stats-modal .stats-periods button { min-height:40px; min-width:0; padding:6px; border:0; border-radius:9px; background:transparent; color:var(--stats-muted); font:inherit; font-size:.73rem; font-weight:700; cursor:pointer; }
#stats-modal .stats-periods button[aria-pressed=true] { color:var(--stats-ink); background:rgba(190,160,180,.17); box-shadow:0 1px 3px #0002; }
#stats-modal .stats-periods button:disabled { cursor:default; opacity:.4; }
#stats-modal :is(button,summary,a):focus-visible { outline:2px solid var(--accent,#ff90bb); outline-offset:3px; }
#stats-modal .stats-range-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:11px; }
#stats-modal .stats-range-heading h3 { margin:0; color:var(--stats-ink); font-size:.73rem; font-weight:700; }
#stats-modal #stats-range-total { color:var(--stats-muted); font-size:.64rem; text-align:right; font-variant-numeric:tabular-nums; }
#stats-modal #stats-range-dates { margin:-4px 0 12px; color:var(--stats-muted); font-size:.62rem; }
#stats-modal .stats-country-list { gap:3px; }
#stats-modal .stats-country-item { grid-template-columns:20px 24px minmax(0,1fr) auto; gap:9px; min-height:39px; padding:7px 0 12px; border:0; border-radius:0; background:none; overflow:visible; }
#stats-modal .stats-country-rank { color:var(--stats-muted); opacity:.65; font-size:.59rem; font-weight:500; }
#stats-modal .stats-country-flag { display:flex; align-items:center; justify-content:center; width:24px; font-size:1rem; }
#stats-modal .stats-country-flag svg { display:block; width:24px; height:16px; border-radius:2px; overflow:hidden; }
#stats-modal .stats-country-name { color:var(--stats-ink); font-size:.73rem; font-weight:600; }
#stats-modal .stats-country-views { color:var(--stats-ink); font-size:.73rem; font-weight:700; }
#stats-modal .stats-country-bar { inset:auto 0 3px 62px; width:auto; height:3px; border-radius:3px; background:rgba(180,160,180,.09); z-index:0; }
#stats-modal .stats-country-bar::before { content:''; display:block; height:100%; width:var(--country-share); border-radius:inherit; background:var(--accent-soft,#eeb7d0); opacity:.55; }
#stats-modal .stats-secondary { display:grid; gap:10px; margin-top:17px; padding-top:15px; border-top:1px solid var(--stats-line); }
#stats-modal .stats-secondary>div { display:flex; justify-content:space-between; gap:15px; font-size:.65rem; color:var(--stats-muted); }
#stats-modal .stats-secondary strong { color:var(--stats-ink); font-weight:600; font-variant-numeric:tabular-nums; }
#stats-modal .stats-footnote { margin:10px 0 0; color:var(--stats-muted); opacity:.7; font-size:.56rem; line-height:1.5; }
#stats-modal .stats-history-details { margin-top:15px; border-top:1px solid var(--stats-line); border-bottom:1px solid var(--stats-line); }
#stats-modal summary { padding:15px 2px; min-height:44px; cursor:pointer; color:var(--stats-muted); font-size:.68rem; }
#stats-modal summary::marker { color:var(--accent-soft,#ffc0d9); }
#stats-modal .stats-month-history { display:block; max-height:180px; margin:0 0 12px; }
#stats-modal .stats-history-item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:9px 2px; border:0; border-radius:0; background:none; }
#stats-modal .stats-history-item span { font-size:.68rem; color:var(--stats-muted); }
#stats-modal .stats-history-item strong { margin:0; font-size:.78rem; color:var(--stats-ink); }
#stats-modal .stats-collab-link { display:inline-flex; align-items:center; min-height:44px; margin-top:7px; padding:5px 0; color:var(--accent-soft,#ffc0d9); font-size:.7rem; font-weight:700; text-decoration:none; }
#stats-modal .stats-collab-link:hover { text-decoration:underline; }
html[data-theme=light] #stats-modal .stats-modal-card { --stats-ink:#26202b; --stats-muted:#655c69; --stats-line:rgba(60,40,60,.14); background:#faf7fa; }
html[data-theme=light] #stats-modal :is(.stats-total-hero strong,.stats-collab-link,.qr-modal-kicker) { color:#914365; }
@media(max-width:480px) {
  #stats-modal { padding:8px; }
  #stats-modal .stats-modal-card { padding:22px 20px 12px; max-height:calc(100dvh - 16px); border-radius:22px; }
  #stats-modal h2 { margin-bottom:19px; }
  #stats-modal .stats-total-hero { margin-bottom:19px; }
  #stats-modal .stats-activity { padding-bottom:18px; }
  #stats-modal .stats-periods { margin:17px 0; }
  #stats-modal .stats-periods button { min-height:44px; }
  #stats-modal .stats-country-item { min-height:36px; }
}

#stats-modal .stats-secondary [hidden] { display:none!important; }
#stats-modal .stats-breakdown-total { padding-top:7px; border-top:1px solid var(--stats-line); }
#stats-modal .stats-vpn-breakdown { margin-top:12px; }
