:root{
  --bg:#0b1220; --panel:#101a2e; --card:#16223c; --line:#24344f;
  --txt:#e5ecf6; --dim:#8ea2bd; --faint:#5a6e8a;
  --flight:#a78bfa; --transit:#38bdf8; --walk:#34d399; --layover:#8ea2bd;
  --process:#fb7185; --activity:#fbbf24; --rest:#64748b; --acc:#60a5fa;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  display:flex;flex-direction:column}
#wrap{display:flex;flex-direction:column;height:100vh;min-height:560px}

/* ---------- header ---------- */
#topbar{flex:0 0 auto;display:flex;align-items:baseline;gap:14px;padding:8px 16px;
  border-bottom:1px solid var(--line);background:var(--panel)}
#trip-title{font-size:18px;font-weight:700;letter-spacing:.2px}
#trip-sub{color:var(--dim);font-size:12px}

/* ---------- map ---------- */
#map-wrap{position:relative;flex:1 1 auto;min-height:180px}
#map{position:absolute;inset:0;background:#0d1526}
#map .leaflet-control-attribution{background:rgba(10,16,30,.55);color:var(--faint);font-size:9px;opacity:.85;padding:0 5px;border-radius:6px 0 0 0}
#map .leaflet-control-attribution a{color:var(--dim)}
/* Тёмная тема карты: только pane тёмного слоя затемняется фильтром
   (светлый OSM/спутник/топо остаются как есть; маркеры не затронуты) */
#map .leaflet-darkTiles-pane{filter:invert(1) hue-rotate(185deg) brightness(.92) contrast(.92) saturate(.5)}
/* Переключатель подложек в тёмной теме */
#map .leaflet-control-layers{background:rgba(13,21,38,.9);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  box-shadow:0 4px 14px rgba(0,0,0,.35);font-size:12px;padding:2px 4px;backdrop-filter:blur(4px)}
#map .leaflet-control-layers label{color:var(--txt)}
#map .leaflet-control-layers input{margin-right:5px;accent-color:var(--acc)}
#map .leaflet-control-layers-separator{border-top:1px solid var(--line)}
#map .leaflet-control-layers a.leaflet-control-layers-toggle{color:var(--txt)}
/* Свёрнутая кнопка слоёв: своя иконка-слоёв вместо стандартного спрайта */
#map .leaflet-control-layers-toggle{width:34px;height:34px;background-image:none;display:flex;align-items:center;
  justify-content:center;background-color:rgba(13,21,38,.9)!important;border-radius:10px;font-size:17px}
#map .leaflet-control-layers-toggle::before{content:"🗺️"}
#day-floating{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:600;
  background:rgba(10,16,30,.82);border:1px solid var(--line);border-radius:20px;
  padding:5px 14px;font-size:13px;color:var(--txt);backdrop-filter:blur(4px);
  pointer-events:none;white-space:nowrap}
#map-legend{position:absolute;right:10px;bottom:22px;z-index:600;background:rgba(10,16,30,.86);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px;color:var(--txt)}
#map-legend .lg-row{display:flex;align-items:center;gap:6px;margin:2px 0}
#map-legend .lg-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}

/* ---------- bottom panel ---------- */
#panel{flex:0 0 330px;display:flex;border-top:1px solid var(--line);background:var(--panel);
  position:relative;min-height:300px}

/* day switcher */
#daynav{flex:0 0 132px;border-right:1px solid var(--line);padding:10px 8px;overflow-y:auto}
#daynav-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--faint);margin:2px 4px 8px}
.daybtn{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;
  border-radius:9px;color:var(--txt);padding:7px 9px;margin-bottom:6px;cursor:pointer}
.daybtn:hover{background:var(--card)}
.daybtn.active{background:var(--card);border-color:var(--acc)}
.daybtn .db-date{font-size:12px;font-weight:700}
.daybtn .db-week{font-size:10px;color:var(--dim)}
.daybtn .db-t{font-size:11px;color:var(--dim);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* timeline */
#timeline{flex:1 1 auto;position:relative;display:flex;flex-direction:column;padding:8px 14px 6px;min-width:0}
#tl-head{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#tl-daytitle{font-size:14px;font-weight:700;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tl-head button{background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:7px;
  width:26px;height:26px;cursor:pointer;font-size:16px;line-height:1}
#tl-head button:hover{border-color:var(--acc)}
#tl-head button:disabled{opacity:.35;cursor:default}
#tl-canvas{position:relative;flex:1 1 auto;margin-top:6px;overflow:hidden}

#tl-axisline{position:absolute;left:0;right:0;bottom:26px;height:0;border-top:1px solid var(--line);z-index:1}
#tl-axisline-hours{position:absolute;left:0;right:0;top:6px}
#tl-hours{position:absolute;inset:0;z-index:0;pointer-events:none}
#tl-hours .tl-hgrid{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(36,52,79,.55)}
#tl-hours .tl-htick{position:absolute;color:var(--faint);font-size:9.5px;transform:translateX(-50%);white-space:nowrap}

#tl-lane-moves,#tl-lane-stops{position:absolute;left:0;right:0;z-index:2}
#tl-lane-moves{top:0;height:30px}
#tl-lane-stops{top:34px;height:34px}

.tl-item{position:absolute;cursor:pointer;user-select:none;transition:filter .12s, transform .12s}
.tl-item:hover{filter:brightness(1.25)}
.tl-item.hl{outline:2px solid #fff;outline-offset:1px;z-index:5}

.tl-bar{top:6px;height:20px;border-radius:10px;min-width:8px;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px currentColor;
  display:flex;align-items:center;overflow:hidden}
.tl-bar .tl-bar-in{height:100%;border-radius:10px}
.tl-bar .tl-txt{position:absolute;left:100%;margin-left:6px;white-space:nowrap;font-size:10.5px;color:var(--txt);
  display:flex;align-items:center;gap:5px;top:0;bottom:0}
.tl-bar .tl-txt.right{left:auto;right:calc(100% + 6px);margin-left:0}
.tl-bar .tl-txt .t{color:var(--dim)}
.tl-tag{position:absolute;white-space:nowrap;font-size:10.5px;color:var(--dim)}
.tl-dot{position:absolute;top:10px;width:12px;height:12px;border-radius:50%;transform:translate(-50%,0);
  border:2px solid var(--bg);z-index:3}
.tl-dot .tl-dtime{position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:10px;
  color:var(--txt);background:rgba(11,18,32,.7);padding:1px 5px;border-radius:6px;white-space:nowrap;
  border:1px solid var(--line)}

#tl-chips{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:5px;padding-top:4px;overflow-y:auto;max-height:64px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:2px 9px;font-size:11px;cursor:pointer;color:var(--txt)}
.chip:hover{border-color:var(--acc)}
.chip .ct{color:var(--faint);font-size:10px}
.chip .cdot{width:7px;height:7px;border-radius:50%;display:inline-block}

/* popup */
#tl-popup{position:absolute;right:0;left:0;top:4px;z-index:50;margin:0 auto;max-width:430px;
  background:var(--card);border:1px solid var(--acc);border-radius:12px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);padding:12px 14px;max-height:calc(100% - 8px);overflow:auto}
#tl-popup.hidden{display:none}
#tl-popup-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--dim);
  font-size:18px;cursor:pointer;line-height:1}
#tl-popup-close:hover{color:var(--txt)}
.p-title{font-size:14.5px;font-weight:700;padding-right:24px;margin-bottom:2px}
.p-loc{color:var(--dim);font-size:12px;margin-bottom:8px}
.p-row{display:flex;gap:8px;margin:3px 0;font-size:12.5px;align-items:baseline}
.p-row .ico{flex:0 0 20px;text-align:center}
.p-row .vl{font-weight:600;white-space:pre}
.p-row .vs{color:var(--dim)}
.p-notes{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;color:var(--dim)}
.p-notes li{margin:2px 0}
.p-time{display:inline-block;background:rgba(255,255,255,.05);border-radius:6px;padding:0 6px;font-weight:700;
  font-variant-numeric:tabular-nums}
.badge{display:inline-block;font-size:10.5px;border-radius:20px;padding:1px 8px;margin-left:8px;vertical-align:1px}
.hint{color:var(--faint);font-size:11px;font-style:italic}

@media (max-width:760px){
  #daynav{flex-basis:104px}
  #tl-lane-stops{top:30px}
  #map-legend{display:none}
}