:root {
  --bg: #07090f;
  --bg-soft: #0d1320;
  --card: #101a2d;
  --line: #1d2840;
  --line-soft: #263a62;
  --text: #eaf1ff;
  --muted: #9fb0cc;
  --accent: #4da3ff;
  --accent2: #7c5cff;
  --ok: #32d1a0;
  --danger: #ff6b7a;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}
*{margin:0;padding:0;box-sizing:border-box}
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 92% -10%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(850px 500px at -12% 18%, rgba(77,163,255,.20), transparent 60%),
    var(--bg);
}
.hidden{display:none!important}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-container{width:min(420px,100%);text-align:center;padding:34px 28px;background: linear-gradient(180deg, rgba(16,26,45,.72), rgba(13,19,32,.88));border:1px solid var(--line);border-radius:22px;box-shadow: var(--shadow)}
.login-title{font-size:32px;font-weight:700;letter-spacing:-.02em}
.login-subtitle{font-size:14px;color:var(--muted);margin:10px 0 24px}
.login-container input{width:100%;padding:13px 14px;font-size:15px;border:1px solid var(--line-soft);border-radius:12px;outline:none;background:#0a1220;color:var(--text);text-align:center}
.login-container input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,163,255,.18)}
.login-container button{width:100%;padding:13px;margin-top:14px;font-size:14px;font-weight:700;color:#fff;border:none;border-radius:12px;cursor:pointer;background: linear-gradient(135deg,var(--accent),var(--accent2))}
.error-msg{margin-top:12px;font-size:13px;color:var(--danger);min-height:18px}
.dashboard{max-width:1400px;margin:0 auto;padding:28px}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.header-left{display:flex;align-items:center;gap:12px}
.back-link{font-size:13px;color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.header h1{font-size:24px;font-weight:700}
.header-right{display:flex;align-items:center;gap:10px}
#last-updated{font-size:12px;color:var(--muted)}
.header button{padding:9px 12px;font-size:12px;font-weight:600;border:1px solid var(--line-soft);border-radius:10px;background:#0d1728;color:var(--text);cursor:pointer}
#logout-btn{border-color:#5a2632;background:#24111a;color:#ffb8c0}
.stats-overview{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px}
.stat-card{display:flex;align-items:center;gap:14px;padding:20px;background:linear-gradient(180deg, rgba(16,26,45,.66), rgba(13,19,32,.86));border:1px solid var(--line);border-radius:16px}
.stat-icon{font-size:28px}
.stat-value{font-size:32px;font-weight:700}
.stat-label{font-size:13px;color:var(--muted)}
.map-section,.charts-row,.bottom-row{display:grid;gap:16px;margin-bottom:18px}
.map-section{grid-template-columns:2fr 1fr}
.charts-row,.bottom-row{grid-template-columns:1.5fr 1fr}
.map-card,.countries-list,.chart-card,.list-card,.metric-section{background:linear-gradient(180deg, rgba(16,26,45,.66), rgba(13,19,32,.86));border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.map-card h3,.countries-list h3,.chart-card h3,.list-card h3,.metric-section h3{font-size:14px;color:#cfe0ff;margin-bottom:12px;font-weight:600}
#world-map{width:100%;height:300px;border-radius:12px;overflow:hidden;position:relative;background:#0a1220;border:1px solid var(--line-soft)}
.map-marker{position:absolute;width:12px;height:12px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px rgba(77,163,255,.65);animation:pulse 2s infinite}
.map-marker:hover{transform:scale(1.35);z-index:10}
.map-marker .tooltip{position:absolute;bottom:115%;left:50%;transform:translateX(-50%);background:#0b0f18;color:var(--text);padding:6px 10px;border-radius:8px;border:1px solid var(--line-soft);font-size:12px;white-space:nowrap;display:none}
.map-marker:hover .tooltip{display:block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
#countries-list-content{max-height:300px;overflow-y:auto}
.country-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.country-name{display:flex;align-items:center;gap:10px}.country-visits{font-weight:700}
.table-header{display:grid;grid-template-columns:2fr 1.2fr .8fr 1fr;gap:10px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.visits-list{max-height:320px;overflow-y:auto}
.visit-row{display:grid;grid-template-columns:2fr 1.2fr .8fr 1fr;gap:10px;padding:12px;border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
.visit-row:hover{background:rgba(255,255,255,.02)}
.visit-row .location,.visit-row .time{color:var(--muted);font-size:12px}
.visit-row .device{padding:3px 8px;border:1px solid var(--line-soft);border-radius:999px;font-size:11px;text-align:center;color:#c5d8ff;background:#0b1425}
.metrics-card{display:flex;flex-direction:column;gap:16px}
canvas{max-width:100%}

/* Guardrails: prevent Chart.js canvas height runaway */
.chart-card{min-height:300px;overflow:hidden}
.chart-card canvas,
.metric-section canvas,
#trend-chart,#pages-chart,#device-chart,#browser-chart{
  display:block;
  width:100%!important;
  height:260px!important;
  max-height:260px!important;
}

@media (max-width:768px){
  .chart-card canvas,
  .metric-section canvas,
  #trend-chart,#pages-chart,#device-chart,#browser-chart{
    height:220px!important;
    max-height:220px!important;
  }
}

@media (max-width:1024px){.charts-row,.bottom-row,.map-section{grid-template-columns:1fr}}
@media (max-width:768px){.dashboard{padding:16px}.stats-overview{grid-template-columns:1fr}.header{flex-direction:column;align-items:flex-start}.table-header,.visit-row{grid-template-columns:1fr 1fr}.table-header span:nth-child(2),.table-header span:nth-child(3),.visit-row .location,.visit-row .device{display:none}}