:root {
  --sw: 310px;
  --r:  7px;
  --f:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --tr: 0.18s ease;
}

[data-theme="dark"] {
  --bg:          #0e1116;
  --sb:          #13181f;
  --panel:       #1a2030;
  --panel2:      #1e2535;
  --border:      #252d3d;
  --text:        #dde3ed;
  --muted:       #6b7a96;
  --val:         #6eb5ff;
  --accent:      #4d9fff;
  --ok:          #4caf7d;
  --bad:         #e05c5c;
  --warn:        #e09b3d;
  --pri:         #2563eb;
  --pri-h:       #3b7cf7;
  --sec:         #252d3d;
  --sec-h:       #2e3850;
  --dan:         #7a1f1f;
  --dan-h:       #962828;
  --trail:       #4d9fff;
  --ring-bg:     rgba(255,255,255,.06);
  --ring-fill:   #4d9fff;
  --shadow:      rgba(0,0,0,.5);
}

[data-theme="light"] {
  --bg:          #f2f4f8;
  --sb:          #ffffff;
  --panel:       #f8f9fb;
  --panel2:      #eef1f6;
  --border:      #dde1eb;
  --text:        #1e2535;
  --muted:       #6b7a96;
  --val:         #1d5bbf;
  --accent:      #1d5bbf;
  --ok:          #1d7a4a;
  --bad:         #bf2020;
  --warn:        #985a00;
  --pri:         #1d5bbf;
  --pri-h:       #1a50a8;
  --sec:         #e4e8f0;
  --sec-h:       #d5dae6;
  --dan:         #bf2020;
  --dan-h:       #a81c1c;
  --trail:       #1d5bbf;
  --ring-bg:     rgba(0,0,0,.07);
  --ring-fill:   #1d5bbf;
  --shadow:      rgba(0,0,0,.12);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; font-family:var(--f); font-size:13px;
             color:var(--text); background:var(--bg); transition:background var(--tr),color var(--tr); }

#app { display:grid; grid-template-columns:var(--sw) 1fr; height:100vh; width:100vw; }

#sidebar {
  display:flex; flex-direction:column;
  background:var(--sb); border-right:1px solid var(--border);
  height:100vh; overflow:hidden;
  transition:background var(--tr), border-color var(--tr);
}

#logo-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px 10px; border-bottom:1px solid var(--border);
  flex-shrink:0; gap:10px;
}
#logo-left { display:flex; align-items:center; gap:10px; min-width:0; }
#doge-logo {
  width:42px; height:42px; border-radius:50%;
  object-fit:cover; object-position:center top;
  border:2px solid var(--border); flex-shrink:0;
}
#logo-words { display:flex; flex-direction:column; gap:1px; min-width:0; }
#logo-name  { font-size:16px; font-weight:800; color:var(--text); letter-spacing:-.3px; }
#logo-ver   { font-size:14px; color:var(--muted); letter-spacing:.2px; }
#theme-btn  {
  background:transparent; border:1px solid var(--border); border-radius:50%;
  width:30px; height:30px; cursor:pointer; color:var(--muted); font-size:14px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:all var(--tr);
}
#theme-btn:hover { background:var(--sec); color:var(--text); }

#tab-bar {
  display:flex; padding:6px 10px 0; gap:2px;
  border-bottom:1px solid var(--border); flex-shrink:0;
  overflow-x:auto; scrollbar-width:none;
}
#tab-bar::-webkit-scrollbar { display:none; }
.tab {
  background:transparent; border:none; border-bottom:2px solid transparent;
  padding:5px 8px 7px; font-size:18px; cursor:pointer;
  color:var(--muted); border-radius:var(--r) var(--r) 0 0;
  transition:all var(--tr); flex-shrink:0;
}
.tab:hover  { color:var(--text); background:var(--sec); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

#panels { flex:1; overflow-y:auto; overflow-x:hidden; padding:14px; scrollbar-width:thin; }
#panels::-webkit-scrollbar { width:3px; }
#panels::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.panel { display:none; flex-direction:column; gap:0; }
.panel.active { display:flex; }

.section-label {
  font-size:10px; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
  display:flex; align-items:center; gap:7px;
}
.badge {
  font-size:9px; background:var(--pri); color:#fff; padding:1px 5px;
  border-radius:20px; letter-spacing:.2px; text-transform:none; font-weight:700;
}
.help-text { font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:8px; }

.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; }
.stat {
  background:var(--panel); padding:7px 9px;
  display:flex; flex-direction:column; gap:2px;
}
.stat:first-child  { border-radius:var(--r) 0 0 0; }
.stat:nth-child(2) { border-radius:0 var(--r) 0 0; }
.stat:nth-last-child(2) { border-radius:0 0 0 var(--r); }
.stat:last-child   { border-radius:0 0 var(--r) 0; }
.stat.full { grid-column:1/-1; border-radius:0 0 var(--r) var(--r); }
.stat-lbl  { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.stat-val  { font-size:14px; font-weight:700; color:var(--val); font-variant-numeric:tabular-nums; }
.stat-val.climb   { color:var(--ok); }
.stat-val.descend { color:var(--bad); }
.stat-val.level   { color:var(--muted); }

.adi-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
#adi {
  border-radius:50%; border:2px solid var(--border); background:#000;
  max-width:160px; height:auto; width:100%;
}
.adi-readout { display:flex; gap:16px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }

.wind-row { display:flex; align-items:center; gap:10px; }
#wind-rose { flex-shrink:0; }

.row-check {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:5px 0; font-size:12px; color:var(--text); user-select:none;
}
.row-check input[type="checkbox"] { width:14px; height:14px; accent-color:var(--accent); flex-shrink:0; }

.slider-row { display:flex; align-items:center; gap:8px; }
.slider-row input[type="range"] { flex:1; accent-color:var(--accent); }
.slider-val { min-width:44px; text-align:right; font-size:12px; color:var(--val); font-weight:600; font-variant-numeric:tabular-nums; }

.text-input {
  width:100%; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); padding:7px 10px; font-size:13px;
  outline:none; transition:border-color var(--tr);
}
.text-input:focus { border-color:var(--accent); }

.btn-pair { display:flex; gap:6px; }
button.btn {
  cursor:pointer; border:none; border-radius:var(--r); padding:7px 14px;
  font-size:14px; font-weight:600; transition:background var(--tr);
}
.btn-pri { background:var(--pri); color:#fff; flex:1; }
.btn-sec { background:var(--sec); color:var(--text); width:100%; }
.btn-dan { background:var(--dan); color:#fff; flex:1; }
.btn-pri:hover { background:var(--pri-h); }
.btn-sec:hover { background:var(--sec-h); }
.btn-dan:hover { background:var(--dan-h); }

.msg-line { font-size:11px; color:var(--muted); min-height:15px; margin-top:5px; }
.msg-line.ok  { color:var(--ok); }
.msg-line.err { color:var(--bad); }

.route-banner {
  background:var(--pri); color:#fff; border-radius:var(--r);
  text-align:center; padding:9px; font-size:15px; font-weight:800;
  letter-spacing:.5px; margin:10px 0 8px;
}
.flight-stats { display:flex; flex-direction:column; gap:0; }
.fs-row {
  display:flex; justify-content:space-between; padding:5px 8px;
  font-size:12px; background:var(--panel);
  border-bottom:1px solid var(--border);
}
.fs-row:first-child  { border-radius:var(--r) var(--r) 0 0; }
.fs-row:last-child   { border-radius:0 0 var(--r) var(--r); border-bottom:none; }
.fs-row span:last-child { font-weight:600; color:var(--val); }
.rte-string-wrap { margin-top:8px; }
.rte-label { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); margin-bottom:4px; }
.rte-string {
  font-size:11px; background:var(--panel); padding:8px; border-radius:var(--r);
  word-break:break-all; line-height:1.6; color:var(--text); font-family:monospace;
}

.nav-note {
  margin-top:12px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); padding:10px; font-size:11px; line-height:1.6; color:var(--muted);
}
.nav-note strong { color:var(--text); }

.tod-calc { display:flex; flex-direction:column; gap:6px; }

#vprofile { background:var(--panel); margin-top:4px; }

.alarm-idle    { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r);
                 background:var(--panel); color:var(--muted); font-size:12px; font-weight:600;
                 border:1px solid var(--border); margin-top:8px; }
.alarm-armed   { background:rgba(37,99,235,.15); color:var(--accent); border-color:var(--accent); }
.alarm-firing  { background:rgba(224,92,92,.18); color:var(--bad);    border-color:var(--bad);
                 animation:pulse .6s ease infinite alternate; }
@keyframes pulse { from{opacity:.7} to{opacity:1} }

#countdown-box  { display:flex; justify-content:center; margin:10px 0 4px; }
.ring-wrap      { position:relative; }
#countdown-box svg { transform:rotate(-90deg); display:block; }
.ring-bg  { fill:none; stroke:var(--ring-bg);   stroke-width:8; }
.ring-fg  { fill:none; stroke:var(--ring-fill); stroke-width:8; stroke-linecap:round;
            stroke-dasharray:326.7; stroke-dashoffset:0; transition:stroke-dashoffset .5s ease, stroke .3s; }
.ring-fg.urgent   { stroke:var(--warn); }
.ring-fg.critical { stroke:var(--bad);  }
.ring-inner { position:absolute; inset:0; display:flex; flex-direction:column;
              align-items:center; justify-content:center; }
.ring-time  { font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text); }
.ring-sub   { font-size:10px; color:var(--muted); letter-spacing:.4px; }

.tod-time-row   { display:flex; align-items:center; gap:6px; margin-top:10px; }
.tod-time-field { display:flex; align-items:center; gap:4px; flex:1; }
.tod-time-field input[type="number"] {
  width:100%; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); color:var(--text); padding:6px 8px; font-size:18px;
  font-weight:700; text-align:center; outline:none;
  -moz-appearance:textfield; transition:border-color var(--tr);
}
.tod-time-field input::-webkit-inner-spin-button,
.tod-time-field input::-webkit-outer-spin-button { -webkit-appearance:none; }
.tod-time-field input:focus { border-color:var(--accent); }
.tod-time-field span { font-size:12px; color:var(--muted); }
.tod-colon { font-size:22px; font-weight:700; color:var(--muted); }

.sound-opts { display:flex; gap:12px; }
.sound-opt  { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:12px; }
.sound-opt input { accent-color:var(--accent); }

.port-row { display:flex; gap:8px; align-items:center; margin-top:6px; }
.port-input { flex:1; }
.about-block {
  background:var(--panel); border-radius:var(--r); padding:10px 12px;
  font-size:14px; line-height:1.3; margin-top:6px;
}
.about-block a { color:var(--accent); text-decoration:none; }
.about-block a:hover { text-decoration:underline; }

#status-bar {
  display:flex; align-items:center; gap:6px; padding:8px 14px;
  border-top:1px solid var(--border); font-size:14px; color:var(--muted);
  flex-shrink:0;
}
.dot       { font-size:9px; }
.dot-ok    { color:var(--ok); }
.dot-bad   { color:var(--bad); }
#last-upd  { margin-left:auto; }

#map { width:100%; height:100vh; z-index:0; }

[data-theme="dark"] .leaflet-tile {
  filter:brightness(.7) invert(1) contrast(1.1) hue-rotate(200deg) saturate(.4) brightness(.9);
}
.leaflet-popup-content-wrapper {
  background:var(--sb)!important; color:var(--text)!important;
  border:1px solid var(--border)!important;
  box-shadow:0 4px 16px var(--shadow)!important; font-size:12px!important;
}
.leaflet-popup-tip { background:var(--sb)!important; }

.tod-pill {
  background:#e09b3d; color:#000; font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:20px; white-space:nowrap;
  border:1.5px solid #b07a2a; pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.wp-tag {
  background:rgba(0,0,0,.75); color:#fff; font-size:10px; font-weight:600;
  padding:1px 5px; border-radius:3px; white-space:nowrap; pointer-events:none;
  letter-spacing:.2px;
}
.nav-tag {
  font-size:9px; font-weight:700; padding:2px 5px; border-radius:3px;
  white-space:nowrap; pointer-events:none; letter-spacing:.2px;
}
.nav-vor  { background:#1d5bbf; color:#fff; }
.nav-ndb  { background:#7a1f1f; color:#fff; }
.nav-fix  { background:rgba(0,0,0,.6); color:#ccc; }

#alarm-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(224,92,92,.15); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  animation:bg-pulse .5s ease infinite alternate;
}
#alarm-overlay[hidden] { display:none; }
@keyframes bg-pulse { from{background:rgba(224,92,92,.1)} to{background:rgba(224,92,92,.28)} }
.alarm-card {
  background:var(--sb); border:2px solid var(--bad); border-radius:14px;
  padding:40px 52px; text-align:center;
  box-shadow:0 24px 60px rgba(224,92,92,.35);
  animation:card-pop .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes card-pop { from{transform:scale(.75);opacity:0} to{transform:scale(1);opacity:1} }
.alarm-plane { font-size:52px; margin-bottom:10px; }
.alarm-card h2 { font-size:26px; font-weight:900; color:var(--bad); letter-spacing:1px; }
.alarm-card p  { font-size:14px; color:var(--muted); margin-top:6px; }

.lan-box {
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
  font-size:12px; line-height:1.7; color:var(--muted);
  margin-top:8px;
}
.lan-box p { margin:0; }
.lan-box code {
  background:var(--panel2); border:1px solid var(--border);
  border-radius:3px; padding:1px 5px; font-size:11px; color:var(--text);
}
.lan-url {
  background:var(--panel2); border:1px solid var(--accent);
  border-radius:var(--r); padding:8px 12px; margin-top:6px;
  font-family:monospace; font-size:13px; font-weight:700;
  color:var(--accent); word-break:break-all; text-align:center;
}

@media (max-width:600px) {
  #app { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  #sidebar { height:auto; max-height:48vh; border-right:none; border-bottom:1px solid var(--border); }
}
/* Делаем карту абсолютно серой */
    .leaflet-tile-container img, 
    .leaflet-layer img {
        filter: grayscale(100%) !important;
    }