:root {
  --bg:#191919; --bg-elevated:#202020; --surface:#252525; --surface-hover:#2f2f2f;
  --text:#ebebeb; --text-secondary:#9b9a97; --text-tertiary:#6f6e6b;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --accent:#4dab9a; --accent-soft:rgba(77,171,154,.12); --accent2:#529cca;
  --accent2-soft:rgba(82,156,202,.12); --warn:#e9b949; --warn-soft:rgba(233,185,73,.12);
  --danger:#eb5757; --danger-soft:rgba(235,87,87,.12);
  --radius:8px; --radius-sm:6px; --radius-lg:12px;
  --shadow:0 1px 2px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.04);
  --sidebar-w:248px; --header-h:56px; --map-bg:#161616;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:Inter,system-ui,-apple-system,sans-serif; background:var(--bg);
  color:var(--text); line-height:1.55; font-size:14px; -webkit-font-smoothing:antialiased;
}
.app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; background:var(--bg-elevated);
  border-right:1px solid var(--border); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:16px 12px;
}
.brand { display:flex; align-items:center; gap:10px; padding:8px 10px 20px; font-weight:700; letter-spacing:-.02em; }
.brand-mark {
  width:28px; height:28px; border-radius:7px; background:linear-gradient(135deg,#4dab9a,#529cca);
  display:grid; place-items:center; color:#fff; font-size:12px; font-weight:800;
}
.sidebar-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); padding:0 10px 8px; }
.nav-item {
  width:100%; display:flex; align-items:center; gap:10px; padding:8px 10px;
  border:none; background:transparent; color:var(--text-secondary); border-radius:var(--radius-sm);
  cursor:pointer; font:inherit; text-align:left;
}
.nav-item:hover { background:var(--surface); color:var(--text); }
.nav-item.active { background:var(--surface); color:var(--text); box-shadow:inset 2px 0 0 var(--accent); }
.sidebar-foot { margin-top:auto; padding:12px 10px 4px; font-size:12px; color:var(--text-tertiary); border-top:1px solid var(--border); }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:20; min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 24px; padding-left:max(24px, env(safe-area-inset-left,0px));
  padding-right:max(24px, env(safe-area-inset-right,0px));
  background:rgba(25,25,25,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-left { display:flex; align-items:center; gap:10px; min-width:0; }
.topbar-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-toggle {
  display:none; width:40px; height:40px; padding:10px 8px; border:0; border-radius:var(--radius-sm);
  background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:5px;
}
.nav-toggle span { display:block; height:2px; width:18px; background:var(--text); border-radius:2px; }
.nav-backdrop { display:none; }
body.nav-open { overflow:hidden; }
.nav-item, .btn, .btn-ghost, .nav-toggle { touch-action:manipulation; }
.topbar-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.meta-pill, .btn-ghost, .btn {
  font:inherit; font-size:12px; font-weight:500; padding:6px 10px; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-secondary); cursor:pointer;
}
.btn { border-radius:var(--radius-sm); background:var(--accent); color:#10221e; border-color:transparent; }
.btn:hover { filter:brightness(1.05); }
.btn-ghost:hover { color:var(--text); }
.content { padding:28px; max-width:1280px; width:100%; }
.view { display:none; animation:fadeIn .2s ease; }
.view.active { display:block; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.page-hero { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.page-hero h1 { margin:0 0 6px; font-size:1.75rem; letter-spacing:-.03em; }
.page-hero .sub { margin:0; color:var(--text-secondary); }
.callout {
  font-size:13px; color:var(--text-secondary); background:var(--accent2-soft);
  border:1px solid rgba(82,156,202,.22); border-radius:var(--radius); padding:12px 14px; margin-top:14px;
}
.callout.info { background:var(--accent-soft); border-color:rgba(77,171,154,.22); }
.callout.warn { background:var(--warn-soft); border-color:rgba(233,185,73,.25); }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.stat-card .l { font-size:12px; color:var(--text-tertiary); margin-bottom:6px; }
.stat-card .v { font-size:1.6rem; font-weight:700; letter-spacing:-.03em; }
.stat-card .s { font-size:12px; color:var(--text-secondary); margin-top:4px; }
.block { margin:28px 0 16px; }
.block-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.block-title { margin:0; font-size:13px; font-weight:600; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.panel-head { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; }
.panel-head h2 { margin:0; font-size:14px; }
.panel-body { padding:16px 18px; }
.panel-body.flush { padding:0; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th,.data-table td { padding:10px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
.data-table th { color:var(--text-tertiary); font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
.data-table tbody tr:hover { background:var(--surface-hover); }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.hint { color:var(--text-tertiary); }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.live-dot.on { background:#4dab9a; box-shadow:0 0 0 4px rgba(77,171,154,.18); }
.live-dot.off { background:var(--text-tertiary); }
.badge { font-size:11px; font-weight:500; padding:3px 8px; border-radius:999px; display:inline-block; }
.badge.ok { background:var(--accent-soft); color:var(--accent); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.danger { background:var(--danger-soft); color:var(--danger); }
.search-input, select.input {
  width:100%; padding:10px 12px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--text); font:inherit;
}
.search-input:focus, select.input:focus { outline:none; border-color:rgba(82,156,202,.45); }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar .search-input { max-width:280px; }
.toolbar select.input { width:auto; min-width:160px; }
.scroll { max-height:480px; overflow:auto; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { min-width:480px; }
.panel .data-table { min-width:0; }
@media (min-width:721px) {
  .data-table { min-width:0; }
}
.map { height:420px; background:var(--map-bg); width:100%; }
.map-live { height:460px; min-height:460px; }
.map-card { position:relative; }
.map-stage { position:relative; }
.map-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-secondary); padding:8px 14px 12px; }
.map-legend i { display:inline-block; width:8px; height:8px; border-radius:99px; margin-right:6px; }
.map-empty {
  position:absolute; left:10px; right:10px; bottom:10px; z-index:500;
  background:rgba(25,25,25,.82); border:1px solid var(--border); border-radius:var(--radius);
  padding:8px 12px; pointer-events:none;
}
.live-row { cursor:pointer; }
.live-row:hover td { background:var(--surface-hover); }
.ip-same { color:var(--accent); }
.ip-diff { color:var(--warn); }
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow); }
.login-card h1 { margin:0 0 8px; font-size:1.4rem; }
.login-card label { display:block; font-size:12px; color:var(--text-tertiary); margin:14px 0 6px; }
.err { color:var(--danger); font-size:13px; margin-top:10px; min-height:1.2em; }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:10px 0; font-size:12px; color:var(--text-secondary); }
.pager button { font:inherit; }
.map-country { height:360px; }
.drawer { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:80; display:grid; justify-items:end; }
.drawer[hidden], .modal[hidden] { display:none !important; }
.drawer-card {
  width:min(560px,100%); height:100%; background:var(--bg-elevated);
  border-left:1px solid var(--border); overflow:auto;
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:90; display:grid; place-items:center; padding:20px; }
.leaflet-container { background:var(--map-bg) !important; font-family:inherit; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background:var(--surface) !important; color:var(--text) !important; }
.chrome-filter.is-off { display:none !important; }
.sk {
  display:block; height:10px; border-radius:6px;
  background:linear-gradient(90deg, #2a2a2a 0%, #353535 45%, #2a2a2a 90%);
  background-size:220% 100%; animation:skShine 1.1s ease-in-out infinite;
}
.sk-lg { height:22px; width:42%; margin-top:10px; }
.sk-sm { width:58%; margin-top:8px; }
.sk-line { width:72%; }
.sk-card { pointer-events:none; }
.sk-row td { border-color:transparent; }
.sk-map {
  position:absolute; inset:0; z-index:400; pointer-events:none;
  background:linear-gradient(90deg, rgba(22,22,22,.55) 0%, rgba(42,42,42,.4) 45%, rgba(22,22,22,.55) 90%);
  background-size:220% 100%; animation:skShine 1.2s ease-in-out infinite;
}
.sk-map[hidden] { display:none !important; }
@keyframes skShine { 0% { background-position:100% 0 } 100% { background-position:-20% 0 } }
@media(max-width:1024px) { .grid4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:860px) {
  .nav-toggle { display:flex; }
  .nav-backdrop {
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:110;
  }
  .nav-backdrop[hidden] { display:none !important; }
  .sidebar {
    position:fixed; left:0; top:0; bottom:0; z-index:120;
    width:min(280px, 86vw); height:100%;
    transform:translateX(-110%); transition:transform .2s ease;
    padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px));
    overflow:auto; box-shadow:none;
  }
  body.nav-open .sidebar { transform:none; box-shadow:8px 0 32px rgba(0,0,0,.4); }
  .brand, .sidebar-label, .sidebar-foot { display:flex; }
  .sidebar-label { padding-top:14px; }
  .nav-item { min-height:44px; }
  .topbar { padding:0 12px; padding-left:max(8px, env(safe-area-inset-left,0px)); padding-right:max(12px, env(safe-area-inset-right,0px)); }
  .topbar-meta { gap:6px; }
  .topbar-meta .input, .topbar-meta .btn-ghost { font-size:12px; padding:6px 8px; }
  .chrome-filter.is-off { display:none !important; }
  .content { padding:16px 14px calc(20px + env(safe-area-inset-bottom,0px)); }
  .grid4, .grid3 { grid-template-columns:repeat(2,1fr); }
  .grid2 { grid-template-columns:1fr; }
  #liveKpis, #overviewExtra, #secKpis { grid-template-columns:1fr 1fr; }
  .page-hero { margin-bottom:14px; padding-bottom:12px; }
  .page-hero h1 { display:none; }
  .stat-card { padding:12px; }
  .stat-card .v { font-size:1.35rem; }
  .map, .map-live, .map-country { height:42vw; min-height:220px; max-height:280px; }
  .drawer-card { width:100%; }
  .hide-phone { display:none !important; }
  .search-input, select.input, .login-card input { font-size:16px; }
  .toolbar .search-input { max-width:none; }
  .toolbar select.input { min-width:0; flex:1; }
  .curio-kpis { display:none; }
  .login-wrap { padding:20px 16px; }
  .login-card { padding:22px 18px; }
}
@media(max-width:420px) {
  .topbar-meta .chrome-filter { display:none !important; }
}