/* Turbaza — дизайн-система унаследована из armparser (static/style.css) */
:root{
  --font:'Satoshi',system-ui,-apple-system,sans-serif;

  --surface-50:#f5f7ff; --surface-100:#eef1fb; --surface-200:#e2e7f5; --surface-300:#cdd4ea;
  --ink-900:#141729; --ink-800:#1e2240; --ink-700:#353a54; --ink-600:#4e5370;
  --ink-500:#6b7194; --ink-400:#8b90b0; --ink-300:#b0b4cc;
  --white:#FFFFFF;

  --accent-gradient:linear-gradient(135deg,#2563eb 0%,#7c3aed 50%,#a855f7 100%);
  --violet-700:#6d28d9; --violet-600:#7c3aed; --violet-500:#8b5cf6;
  --violet-100:#ede9fe; --violet-50:#f5f3ff; --blue-600:#2563eb;
  --bg-page:var(--surface-50);

  --shadow-md:0 4px 12px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.04);

  --radius-md:12px; --radius-lg:18px; --radius-xl:24px;
  --ease:cubic-bezier(.4,0,.2,1); --dur:180ms;

  --glass-bg:rgba(255,255,255,.72);
  --hairline:var(--surface-200);
}
html[data-theme="dark"]{
  --surface-50:#0f1218; --surface-100:#171d27; --surface-200:#262d3a; --surface-300:#38414f;
  --ink-900:#e7ecf3; --ink-800:#d6dde7; --ink-700:#bec7d3; --ink-600:#9ba6b5;
  --ink-500:#7e8898; --ink-400:#616c7b; --ink-300:#454e5b;
  --white:#171d27;
  --violet-50:rgba(139,92,246,.16); --violet-100:rgba(139,92,246,.26);
  --bg-page:#0b0e13;
  --shadow-md:0 4px 12px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --shadow-lg:0 10px 28px rgba(0,0,0,.6),0 3px 10px rgba(0,0,0,.45);
  --glass-bg:rgba(23,29,39,.78);
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);color:var(--ink-900);background:var(--bg-page);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}

#map{position:fixed;inset:0;background:var(--bg-page)}

.atm-marker{
  width:9px;height:9px;border-radius:50%;
  background:var(--ink-400);border:1.5px solid #fff;
  transform:translate(-50%,-50%);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.atm-vtb{width:13px;height:13px;background:#2563eb}

.zoomctl{
  position:fixed;right:16px;bottom:24px;z-index:1000;
  display:flex;flex-direction:column;border-radius:999px;overflow:hidden;
}
.zoom-btn{
  border:none;background:transparent;color:var(--ink-700);cursor:pointer;
  font-family:var(--font);font-size:1.2rem;font-weight:700;
  width:42px;height:42px;line-height:1;
  transition:background var(--dur) var(--ease);
}
.zoom-btn:hover{background:var(--violet-50)}

.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-lg);
}

.topbar{
  position:fixed;top:16px;left:16px;z-index:1000;
  display:flex;align-items:center;gap:12px;
  padding:10px 18px;border-radius:999px;
}
.wordmark{
  font-weight:900;font-size:1.25rem;letter-spacing:-.03em;
  background:var(--accent-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar-sub{font-size:.8rem;color:var(--ink-500);font-weight:500}
.icon-btn{
  border:none;background:transparent;color:var(--ink-600);cursor:pointer;
  font-size:1.05rem;line-height:1;padding:6px;border-radius:999px;
  transition:background var(--dur) var(--ease);
}
.icon-btn:hover{background:var(--violet-50)}

.panel{
  position:fixed;top:80px;left:16px;z-index:1000;width:264px;
  border-radius:var(--radius-xl);padding:18px;
  display:flex;flex-direction:column;gap:16px;
  max-height:calc(100vh - 100px);overflow-y:auto;
}
.panel-label{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-400);margin-bottom:8px;
  display:flex;justify-content:space-between;
}
.pill-group{display:flex;flex-wrap:wrap;gap:6px}
.pill{
  font-family:var(--font);font-size:.8rem;font-weight:600;letter-spacing:-.01em;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hairline);background:var(--white);color:var(--ink-600);
  transition:all var(--dur) var(--ease);
}
.pill:hover{border-color:var(--violet-500);background:var(--violet-50)}
.pill.active{background:var(--accent-gradient);border-color:transparent;color:#fff}

input[type=range]{width:100%;accent-color:var(--violet-600)}

.check{
  display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;
  color:var(--ink-700);padding:4px 0;cursor:pointer;
}
.check input{accent-color:var(--violet-600)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-vtb{background:#2563eb}
.dot-other{background:var(--ink-400)}

.legend-bar{
  height:10px;border-radius:999px;
  background:linear-gradient(90deg,rgba(37,99,235,.15),#2563eb,#7c3aed,#a855f7);
}
.legend-labels{
  display:flex;justify-content:space-between;
  font-size:.7rem;color:var(--ink-500);margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.stat{font-size:.75rem;color:var(--ink-500);margin-top:10px;line-height:1.5}

.hex-tip{
  position:fixed;z-index:1100;pointer-events:none;
  border-radius:var(--radius-md);padding:10px 14px;
  font-size:.8rem;line-height:1.5;color:var(--ink-800);
  box-shadow:var(--shadow-md);
}
.hex-tip b{font-weight:800;font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .panel{width:calc(100vw - 32px)}
}