/* plane.dtwin.ru — «Когда лететь, чтобы не застрять»
   Дизайн: спокойный тёмный картографический холст + светофор-градиент риска.
   Бренд Цифрового Двойника: акцент — оранжевый, вторичный — тил. */

:root{
  --bg:#0d1318; --bg2:#0a0f13;
  --panel:#151e26; --panel2:#1c2833; --line:#28353f;
  --ink:#eef3f6; --muted:#8fa1ac; --muted2:#5f7079;
  --accent:#E8A327;        /* DT orange */
  --accent-ink:#20140a;
  --teal:#67B5CC;          /* DT teal */
  --green:#70AD47; --yellow:#BFA83C; --orange:#E8A327; --red:#D6453A;   /* фирменные цвета ЦД */
  --land:#1a2731; --land-line:#2c3d49; --sea:#0d1318;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --r:16px;
  --font:'Panton','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:
    radial-gradient(1200px 600px at 78% -8%, #16222c 0%, rgba(22,34,44,0) 60%),
    radial-gradient(900px 500px at 5% 108%, #14202a 0%, rgba(20,32,42,0) 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header.top{padding:18px 0 6px}
.top-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand-badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px;background:var(--panel)}
.brand-badge b{color:var(--ink)}
.brand-badge .dot{width:22px;height:22px;border-radius:6px;background:
  linear-gradient(135deg,var(--accent),#c77f14);display:inline-block}
h1{font-size:clamp(26px,4.6vw,44px);line-height:1.04;margin:14px 0 6px;letter-spacing:-.02em}
h1 .hl{color:var(--accent)}
.sub{color:var(--muted);font-size:clamp(15px,2vw,18px);max-width:760px}
.sub b{color:var(--ink);font-weight:600}

/* ---------- national ribbon ---------- */
.ribbon-card{margin:18px 0 6px;background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.ribbon-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ribbon-head .lead{font-size:15px;color:var(--muted)}
.ribbon-head .lead b{color:var(--ink)}
.ribbon{display:grid;grid-template-columns:repeat(24,1fr);gap:3px}
.ribbon .cell{height:34px;border-radius:5px;position:relative;cursor:pointer;transition:transform .12s}
.ribbon .cell:hover{transform:translateY(-3px)}
.ribbon .cell.on{outline:2px solid #fff;outline-offset:1px}
.ribbon-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted2);margin-top:6px}

/* ---------- main grid ---------- */
.stage{display:grid;grid-template-columns:1fr 372px;gap:18px;margin:16px 0 8px;align-items:start}
@media(max-width:940px){.stage{grid-template-columns:1fr}}

.mapcard{background:linear-gradient(180deg,#101922,#0c141b);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:relative}
.map-toolbar{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;background:rgba(13,20,26,.6)}
.searchbox{position:relative;flex:1;min-width:180px}
.searchbox input{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit;outline:none}
.searchbox input:focus{border-color:var(--teal)}
.ac{position:absolute;z-index:30;left:0;right:0;top:44px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;max-height:230px;overflow:auto;box-shadow:var(--shadow);display:none}
.ac.show{display:block}
.ac div{padding:8px 12px;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;gap:10px}
.ac div:hover,.ac div.sel{background:#26323d}
.ac div span{color:var(--muted)}

.hour-ctl{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.hour-ctl .lbl{font-size:13px;color:var(--muted);white-space:nowrap}
.hour-ctl .val{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);min-width:52px;text-align:center}
.hour-ctl input[type=range]{flex:1;min-width:90px;accent-color:var(--accent)}
@media(max-width:560px){
  .map-toolbar{gap:10px}
  .searchbox,.hour-ctl{flex:1 1 100%}
  .mapwrap{aspect-ratio:3/4}
}
.btn-now{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;
  padding:7px 11px;font-size:12px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-now:hover{border-color:var(--teal)}
.btn-now.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}

.mapwrap{position:relative;width:100%;aspect-ratio:16/11;background:
  radial-gradient(700px 460px at 60% 34%,#12202b 0%,#0b1218 70%)}
#map{width:100%;height:100%;display:block}
.map-legend{position:absolute;left:14px;bottom:12px;background:rgba(11,18,24,.82);border:1px solid var(--line);
  border-radius:10px;padding:8px 11px;font-size:11px;color:var(--muted);backdrop-filter:blur(3px)}
.map-legend .bar{height:8px;width:150px;border-radius:5px;margin:5px 0 3px;
  background:linear-gradient(90deg,var(--green),var(--yellow),var(--orange),var(--red))}
.map-legend .ends{display:flex;justify-content:space-between}
.mascot-holder{position:absolute;right:12px;bottom:10px;width:120px;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.map-hint{position:absolute;left:0;right:0;top:44%;text-align:center;color:var(--muted2);font-size:14px;pointer-events:none}

/* ---------- airport card ---------- */
.side{display:flex;flex-direction:column;gap:14px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:16px}
.card.empty{color:var(--muted);text-align:center;padding:30px 18px}
.card.empty b{color:var(--ink)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-head .name{font-size:20px;font-weight:700;letter-spacing:-.01em}
.card-head .code{font-size:12px;color:var(--muted);margin-top:2px}
.iata-chip{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:4px 8px;
  font-size:12px;color:var(--teal);font-weight:700;letter-spacing:.05em}

.dialwrap{display:flex;gap:14px;align-items:center;margin:12px 0 4px}
.dial{width:172px;height:172px;flex:none}
.dial-side{flex:1;font-size:13px}
.dial-side .row{display:flex;align-items:center;gap:8px;margin:7px 0}
.dial-side .sw{width:12px;height:12px;border-radius:4px;flex:none}
.dial-side .row b{font-variant-numeric:tabular-nums}
.dial-side .cap{color:var(--muted);font-size:12px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 8px;text-align:center}
.stat .n{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .k{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.2}
.trend{font-size:12px;color:var(--muted);margin:2px 0 10px;display:flex;align-items:center;gap:7px}
.trend .spark{height:22px}

.cta{display:block;background:linear-gradient(135deg,var(--accent),#cf8b16);color:var(--accent-ink);
  border-radius:12px;padding:12px 14px;text-align:center;font-weight:700;font-size:15px;margin-top:4px}
.cta:hover{filter:brightness(1.06);text-decoration:none}
.cta small{display:block;font-weight:600;opacity:.82;font-size:11.5px;margin-top:2px}
.share{width:100%;margin-top:9px;background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:10px;font-size:13px;cursor:pointer;font-family:inherit;display:flex;
  align-items:center;justify-content:center;gap:8px}
.share:hover{border-color:var(--teal)}
.disclose{font-size:10.5px;color:var(--muted2);margin-top:8px;line-height:1.35}

/* ---------- manifest / footer ---------- */
.author{margin:20px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;box-shadow:var(--shadow)}
@media(max-width:620px){.author{grid-template-columns:1fr;justify-items:center;text-align:center}}
.author-photo{width:120px;height:120px;flex:none}
.author-photo img{width:120px;height:120px;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.author-photo svg{width:120px;height:120px;border-radius:16px;border:1px solid var(--line)}
.author-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:6px}
.author-text p{margin:0 0 9px;color:var(--muted);font-size:14.5px;line-height:1.55}
.author-text p b{color:var(--ink)}
.author-sign{font-size:14px;color:var(--ink);font-weight:600;margin-top:2px}

.manifest{margin:20px 0;background:
  linear-gradient(115deg,rgba(232,163,39,.10),rgba(103,181,204,.08)),var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;
  grid-template-columns:1fr auto;gap:18px;align-items:center}
@media(max-width:720px){.manifest{grid-template-columns:1fr}}
.manifest h3{margin:0 0 6px;font-size:20px}
.manifest p{margin:0;color:var(--muted);font-size:15px;max-width:640px}
.manifest .flow{color:var(--ink);font-weight:600}
.manifest-cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;border-radius:12px;padding:12px 18px;white-space:nowrap}
.manifest-cta:hover{filter:brightness(1.06);text-decoration:none}

footer{border-top:1px solid var(--line);margin-top:14px;padding:20px 0 44px;color:var(--muted2);font-size:12.5px}
footer .cols{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer .disc{max-width:680px;line-height:1.5}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:11px 16px;border-radius:12px;
  font-size:13px;box-shadow:var(--shadow);transition:all .25s;pointer-events:none;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* map elements */
.airport{cursor:pointer;transition:opacity .15s}
.airport circle.halo{opacity:0;transition:opacity .15s}
.airport.active circle.halo,.airport:hover circle.halo{opacity:.55}
.airport .lab{font-size:10px;fill:var(--ink);paint-order:stroke;stroke:#0b1218;stroke-width:3px;
  opacity:0;pointer-events:none;transition:opacity .15s;font-weight:600}
.airport.active .lab,.airport:hover .lab{opacity:1}
/* brand logo chip (dark logo text → light chip) */
.brand-logo{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:6px 13px;text-decoration:none}
.brand-logo:hover{text-decoration:none;filter:brightness(.97)}
.brand-logo img{height:24px;display:block}
.brand-logo span{font-size:11px;color:#5c5c5c;font-weight:600}

/* map zoom controls */
.map-zoom{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:20}
.map-zoom button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
  background:rgba(11,18,24,.82);color:var(--ink);font-size:18px;cursor:pointer;line-height:1;
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center}
.map-zoom button:hover{border-color:var(--teal);color:var(--teal)}

/* telegram button (author block) */
.tg-btn{display:inline-flex;align-items:center;gap:8px;margin-top:12px;background:var(--teal);
  color:#08222b;font-weight:700;font-size:14px;border-radius:11px;padding:10px 16px;text-decoration:none}
.tg-btn:hover{filter:brightness(1.07);text-decoration:none}
.tg-btn svg{flex:none}

/* collapsed per-airport infographic panel */
.apx{margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.apx>summary{list-style:none;cursor:pointer;padding:15px 18px;display:flex;justify-content:space-between;
  align-items:center;font-weight:700;font-size:16px;gap:10px}
.apx>summary::-webkit-details-marker{display:none}
.apx-toggle{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.apx[open] .apx-toggle{color:var(--teal)}
.apx-note{padding:0 18px 10px;color:var(--muted);font-size:12.5px}
.apx-note b{color:var(--ink)}
.apx-body{max-height:440px;overflow:auto;padding:0 10px 12px}
.apx-row{display:grid;grid-template-columns:160px 1fr 140px;gap:12px;align-items:center;width:100%;
  background:transparent;border:0;border-top:1px solid var(--line);padding:8px;cursor:pointer;
  color:var(--ink);font-family:inherit;text-align:left}
.apx-row:hover{background:var(--bg2)}
.apx-city{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apx-city i{color:var(--teal);font-style:normal;font-size:11px;font-weight:700}
.apx-strip{display:grid;grid-template-columns:repeat(24,1fr);gap:1px;height:15px}
.apx-strip span{border-radius:1px}
.apx-nums{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .apx-row{grid-template-columns:88px 1fr;grid-template-areas:"city strip" "nums nums";row-gap:4px}
  .apx-city{grid-area:city}.apx-strip{grid-area:strip}.apx-nums{grid-area:nums;text-align:left}}

.dial-sector{cursor:pointer;transition:filter .1s}
.dial-sector:hover{filter:brightness(1.15)}
.dial-flight{cursor:pointer}

.arc{fill:none;stroke-linecap:round}
.arc.pinned{stroke-dasharray:none}
.archead{stroke:none}

/* direction selector */
.dir{display:flex;align-items:center;gap:8px;margin:12px 0 4px}
.dir .from{font-weight:700;font-size:13px;white-space:nowrap}
.dir .arrow{color:var(--muted)}
.dir select{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:7px 9px;font-size:13px;font-family:inherit;outline:none}
.dir select:focus{border-color:var(--teal)}
.dir .clr{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:8px;
  padding:6px 8px;font-size:12px;cursor:pointer;font-family:inherit}
.dir .clr:hover{color:var(--ink)}

/* flight timeline */
.timeline{margin:4px 0 2px}
.timeline .tl-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.timeline .tl-head .lg{display:flex;gap:10px}
.timeline .tl-head .lg span{display:inline-flex;align-items:center;gap:3px}
.tl-svg{width:100%;display:block}
.tl-svg .axis{stroke:var(--line)}
.tl-svg .tick{fill:var(--muted2);font-size:9px}
.tl-svg .band{fill:rgba(232,163,39,.14)}
.tl-flight{cursor:pointer}
.tl-flight:hover{opacity:1}
.tl-empty{font-size:12px;color:var(--muted);padding:14px 4px;text-align:center}

/* ranked calm departures */
.ranked{margin:8px 0 2px}
.ranked .rk-h{font-size:12px;color:var(--muted);margin-bottom:6px}
.ranked .rk{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:6px;background:var(--bg2)}
.ranked .rk .tm{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px;min-width:44px}
.ranked .rk .fl{flex:1;font-size:12px;color:var(--muted)}
.ranked .rk .fl b{color:var(--ink);font-weight:600}
.ranked .rk .chip{width:11px;height:11px;border-radius:4px;flex:none}
.ranked .rk a{font-size:12px;font-weight:700;white-space:nowrap}

/* flight tooltip on map */
.fl-tip{position:absolute;z-index:40;pointer-events:none;background:rgba(10,16,21,.94);border:1px solid var(--line);
  border-radius:9px;padding:7px 10px;font-size:12px;color:var(--ink);box-shadow:var(--shadow);max-width:210px;
  transform:translate(-50%,-118%);opacity:0;transition:opacity .1s}
.fl-tip.show{opacity:1}
.fl-tip .r{color:var(--muted);font-size:11px;margin-top:2px}