:root{
  --bg:#0d1117; --panel:#11161d; --panel2:#161c25; --line:#222c39;
  --txt:#e6edf3; --mut:#8b97a7; --acc:#4da3ff;
  --add:#ff5c5c; --cut:#3aa0ff; --bal:#8a93a3;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--txt)}
#app{display:flex;height:100vh;overflow:hidden}

/* sidebar */
#sidebar{width:380px;min-width:380px;height:100%;overflow-y:auto;background:var(--panel);border-right:1px solid var(--line);padding:20px 18px;display:flex;flex-direction:column;gap:18px}
#sidebar header h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px}
#sidebar header h1 span{color:var(--acc)}
.tag{margin:4px 0 0;color:var(--mut);font-size:13px}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .n{font-size:22px;font-weight:700}
.kpi .l{font-size:11px;color:var(--mut);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.kpi.add .n{color:var(--add)} .kpi.cut .n{color:var(--cut)}

.controls .seg{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{flex:1;background:transparent;border:0;color:var(--mut);padding:9px;font-size:13px;font-weight:600;cursor:pointer}
.seg button.active{background:var(--acc);color:#06121f}
.hint{font-size:12px;color:var(--mut);margin:8px 2px 0}
.mlabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:0 2px 5px}
.method{width:100%;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:2px}
.method:focus{outline:1px solid var(--acc)}
#method-hint{margin:6px 2px 12px;min-height:30px}

.detail{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px}
.detail.hidden{display:none}
.detail .rname{font-size:18px;font-weight:700}
.detail .rsign{font-size:12px;color:var(--mut);margin:2px 0 10px}
.detail .row{display:flex;justify-content:space-between;font-size:13px;padding:4px 0;border-top:1px solid var(--line)}
.detail .row b{font-weight:600}
.rec{margin-top:10px;padding:10px;border-radius:10px;font-size:13px;line-height:1.5}
.rec.add{background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.35)}
.rec.cut{background:rgba(58,160,255,.12);border:1px solid rgba(58,160,255,.35)}
.rec.maintain{background:rgba(138,147,163,.12);border:1px solid rgba(138,147,163,.3)}
.rec .big{font-size:15px;font-weight:700;display:block;margin-bottom:3px}
.brief{margin-top:10px;font-size:12.5px;color:#cdd6e0;line-height:1.6;border-top:1px dashed var(--line);padding-top:9px}
.brief .ai{color:var(--acc);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}

.lists h3{font-size:13px;margin:6px 0 6px;display:flex;align-items:center;gap:8px;color:var(--txt)}
.pill{font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700;text-transform:uppercase}
.pill.add{background:rgba(255,92,92,.18);color:var(--add)}
.pill.cut{background:rgba(58,160,255,.18);color:var(--cut)}
.routelist{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:5px}
.routelist li{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;cursor:pointer;transition:.12s}
.routelist li:hover{border-color:var(--acc)}
.routelist .rid{font-weight:700}
.routelist .sub{color:var(--mut);font-size:11px}
.routelist .delta{font-size:12px;font-weight:700}
.routelist .delta.add{color:var(--add)} .routelist .delta.cut{color:var(--cut)}

/* reality check (Abu Dhabi Link validation) */
.reality h3{font-size:13px;margin:2px 0 6px;display:flex;align-items:center;gap:8px}
.fitline{font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin:8px 0;line-height:1.5}
.fitline.good{border-color:rgba(245,196,81,.6);background:rgba(245,196,81,.1)}
.fitline b{color:var(--txt)}
.zrow{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:8px;font-size:12px;padding:4px 0}
.zn{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zbars{position:relative;height:14px;background:var(--panel2);border-radius:4px;overflow:hidden}
.zbars i{position:absolute;left:0;height:7px;border-radius:3px;display:block}
.zbars i.obs{top:0;background:#f5c451}
.zbars i.prd{bottom:0;background:var(--acc)}
.zv{font-variant-numeric:tabular-nums;color:var(--mut);font-size:11px}
.keys{font-size:11px;color:var(--mut);margin:2px 0 0;display:flex;gap:12px}
.keys i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
.keys .obs{background:#f5c451} .keys .prd{background:var(--acc)}
.zone-label{color:#f5c451;font-size:11px;font-weight:700;text-align:center;text-shadow:0 1px 3px #000,0 0 6px #000;line-height:1.2;pointer-events:none;white-space:nowrap}

footer{margin-top:auto;font-size:10.5px;color:var(--mut);line-height:1.5}

/* map */
#map{flex:1;height:100%;position:relative}
.leaflet-container{background:#0b0f14}

.panel-toggle{display:none}
.toast{display:none}

.legend{position:absolute;bottom:22px;right:18px;z-index:600;background:rgba(17,22,29,.92);border:1px solid var(--line);border-radius:10px;padding:10px 12px;width:220px}
.legend .ttl{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.legend .bar{height:8px;border-radius:5px;margin:7px 0 4px;background:linear-gradient(90deg,#3aa0ff,#8a93a3,#ff5c5c)}
.legend .ends{display:flex;justify-content:space-between;font-size:10px;color:var(--mut)}

.stop-dot{border-radius:50%}
.leaflet-popup-content-wrapper{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.leaflet-popup-tip{background:var(--panel2)}
.leaflet-popup-content{font-size:13px}
.leaflet-popup-content b{color:var(--acc)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  #app{flex-direction:column;height:100vh;height:100dvh}
  #map{order:-1;flex:none;width:100%;height:48vh;height:48dvh;transition:height .22s ease}
  #sidebar{width:100%;min-width:0;flex:1;border-right:0;border-top:1px solid var(--line);
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));gap:14px;
    -webkit-overflow-scrolling:touch}
  #sidebar header h1{font-size:20px}

  .legend{bottom:12px;right:12px;width:150px;padding:7px 9px}
  .legend .bar{height:6px}

  /* expand/collapse handle, bottom-left of the map (clears legend on the right) */
  .panel-toggle{display:inline-flex;align-items:center;gap:6px;position:absolute;
    left:10px;bottom:12px;z-index:700;background:var(--acc);color:#06121f;border:0;
    border-radius:20px;padding:9px 15px;font-size:13px;font-weight:700;cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.45)}

  /* recommendation toast over the map (smartphones only) */
  .toast{position:absolute;top:10px;left:52px;right:10px;z-index:680;
    flex-direction:column;gap:1px;background:rgba(17,22,29,.97);
    border:1px solid var(--line);border-left-width:4px;border-radius:10px;
    padding:8px 12px;box-shadow:0 6px 20px rgba(0,0,0,.55);cursor:pointer;
    animation:toastIn .18s ease}
  .toast.show{display:flex}
  .toast.add{border-left-color:var(--add)}
  .toast.cut{border-left-color:var(--cut)}
  .toast.maintain{border-left-color:var(--bal)}
  .toast .t-title{font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
  .toast .t-rec{font-size:14px;font-weight:700;line-height:1.25}
  .toast .t-hint{font-size:10px;color:var(--acc);margin-top:1px}
  @keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* collapsed = full-screen map (panel hidden); handle + toast bring it back */
  #app.panel-collapsed #map{height:100dvh}
  #app.panel-collapsed #sidebar{flex:none;height:0;padding:0;border:0;overflow:hidden}
}

@media (max-width:380px){
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi .n{font-size:19px}
}

/* larger touch targets on coarse pointers */
@media (pointer:coarse){
  .seg button{padding:12px}
  .method{padding:12px 10px}
  .routelist li{padding:11px 12px}
}