/* ---------- Token ---------- */
:root{
  --bg:#e4e9f0;--surface:#f3f6f9;--surface2:#eaeef3;--surface3:#dee4eb;--card:#ffffff;--border:#d5dce5;--border2:#bfc9d5;--grid:rgba(15,23,42,.06);
  --text:#0f172a;--muted:#64748b;--faint:#94a3b8;
  --accent:#2563eb;--accentt:#fff;--accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);
  --leg:#2563eb;--legt:#fff;--amber:#d98a04;--ambert:#1c1300;--red:#dc2626;--redt:#fff;--green:#15935a;--greent:#fff;--purple:#7c3aed;
  --hatch:rgba(100,116,139,.28);--sel:#0f172a;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 28px rgba(15,23,42,.12);--shadow-sm:0 1px 2px rgba(15,23,42,.08);
  --r:8px;--lblw:140px;--toph:58px
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0a0d12;--surface:#11161d;--surface2:#171d26;--surface3:#1e2632;--card:#18202a;--border:#232c38;--border2:#334052;--grid:rgba(255,255,255,.05);
  --text:#e7ecf3;--muted:#8d9aab;--faint:#5f6c7d;
  --accent:#4f8cff;--accentt:#fff;--leg:#4f8cff;--legt:#fff;--amber:#eab03a;--ambert:#1c1300;--red:#ef5a4c;--green:#34c17f;--purple:#a586f5;
  --hatch:rgba(148,163,184,.22);--sel:#fff;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);--shadow-sm:0 1px 2px rgba(0,0,0,.4)}}
:root[data-theme="dark"]{
  --bg:#0a0d12;--surface:#11161d;--surface2:#171d26;--surface3:#1e2632;--card:#18202a;--border:#232c38;--border2:#334052;--grid:rgba(255,255,255,.05);
  --text:#e7ecf3;--muted:#8d9aab;--faint:#5f6c7d;
  --accent:#4f8cff;--accentt:#fff;--leg:#4f8cff;--legt:#fff;--amber:#eab03a;--ambert:#1c1300;--red:#ef5a4c;--green:#34c17f;--purple:#a586f5;
  --hatch:rgba(148,163,184,.22);--sel:#fff;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);--shadow-sm:0 1px 2px rgba(0,0,0,.4)}

/* ---------- Dasar ---------- */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 "Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:5px 11px;cursor:pointer;min-height:34px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .12s,border-color .12s,color .12s}
button:hover{background:var(--surface2);border-color:var(--border2)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accentt);font-weight:600}
button.primary:hover{filter:brightness(1.07);background:var(--accent)}
button.ghost-btn{background:transparent;border-color:transparent;color:var(--muted)}
button.ghost-btn:hover{background:var(--surface2);color:var(--text)}
button:disabled{opacity:.45;cursor:default}
button svg{width:16px;height:16px;flex:none}
input,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:4px 9px;min-height:34px}
input:hover,select:hover{border-color:var(--border2)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.sp{flex:1}
.up{color:var(--red)}.down{color:var(--green)}
.bad{color:var(--red)}.warn{color:var(--amber)}

/* ---------- Header ---------- */
.top{display:flex;align-items:center;gap:14px;padding:0 14px;min-height:var(--toph);background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;min-width:0}
.logo{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:var(--accentt);flex:none}
.brand .bt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand b{font-size:15px;letter-spacing:-.01em}
.srcpill{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.srcpill .demo{color:var(--amber);font-weight:650}
.kpis{display:flex;flex:1;justify-content:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.kpis::-webkit-scrollbar{display:none}
.kgrp{display:flex;border:1px solid var(--border);border-radius:10px;background:var(--surface2);overflow:hidden}
.kpi{padding:5px 16px;white-space:nowrap;border-left:1px solid var(--border);min-width:92px}
.kpi:first-child{border-left:0}
.kpi .l{font-size:11.5px;color:var(--muted);font-weight:500}
.kpi .v{font-weight:700;font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;align-items:baseline;gap:5px}
.kpi .dl{font-size:12px;font-weight:600}
.kpi.bad .v{color:var(--red)}
.kpi.zero .v{color:var(--faint)}
.actions{display:flex;gap:6px;align-items:center}
.actions .div{width:1px;height:22px;background:var(--border);margin:0 2px}

/* ---------- Toolbar ---------- */
.bar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap}
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:9px;width:15px;height:15px;color:var(--faint);pointer-events:none}
.search input{padding-left:30px;width:210px;background:var(--surface2);border-color:transparent}
.search input:focus{background:var(--card);border-color:var(--border2)}
.btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#aocChips{gap:4px}
.chip{border-radius:999px;padding:3px 12px;min-height:32px;font-weight:550;background:var(--card);color:var(--muted)}
.chip:hover{color:var(--text)}
.chip.on{background:var(--text);border-color:var(--text);color:var(--surface)}
#bProb.on{background:color-mix(in srgb,var(--red) 12%,var(--surface));border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:2px;gap:2px}
.seg button{border:0;border-radius:6px;min-height:28px;padding:3px 11px;background:transparent;color:var(--muted);font-weight:550}
.seg button:hover{color:var(--text);background:transparent}
.seg button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}
.zoom{display:inline-flex;align-items:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:2px}
.zoom button{border:0;background:transparent;min-height:28px;width:30px;padding:0;font-size:16px;color:var(--muted)}
.zoom button:hover{color:var(--text);background:var(--surface)}
.zoom span{font-size:11px;color:var(--muted);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.lab{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}

/* ---------- Kanvas ---------- */
main{flex:1;display:flex;min-height:0}
#gantt{flex:1;overflow:auto;position:relative;background:var(--surface);overscroll-behavior:contain}
#canvas{position:relative}
.hdr{position:sticky;top:0;z-index:4;display:flex;height:34px;background:var(--surface);border-bottom:1px solid var(--border)}
.lbl{position:sticky;left:0;z-index:3;width:var(--lblw);flex:none;background:var(--surface);border-right:1px solid var(--border);padding:0 12px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;overflow:hidden;user-select:none;-webkit-user-select:none}
.lbl:hover{background:var(--surface2)}
.hdr .lbl{z-index:5;cursor:default;font-size:12px;color:var(--muted);line-height:1.2}
.hdr .lbl:hover{background:var(--surface)}
.hdr .lbl b{color:var(--text);font-weight:650}
.hdr .lbl span{font-size:11px}
.ticks{position:relative;flex:none}
.tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--border);font-size:12.5px;color:var(--muted);padding:8px 0 0 6px;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.row{display:flex;height:38px;border-bottom:1px solid var(--grid)}
.row.hov .trk{background-color:var(--accent-soft)}
.row.hov .lbl{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.trk{position:relative;flex:none}
.lbl .rg{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.lbl .st{font-size:12px;color:var(--muted);white-space:nowrap}
.lbl.isaog .rg{color:var(--red)}
.lbl.chg .rg::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--purple);margin-left:6px;vertical-align:middle}
.lbl.selac{box-shadow:inset 3px 0 0 var(--accent);background:var(--accent-soft)}
.grp{display:flex;height:32px;background:var(--surface2);border-bottom:1px solid var(--border)}
.grp .lbl{background:var(--surface2);font-size:13px;font-weight:650;cursor:default;width:auto;min-width:var(--lblw);white-space:nowrap;flex-direction:row;align-items:center;gap:7px;border-right:0}
.grp .lbl:hover{background:var(--surface2)}
.grp .lbl .muted{font-weight:600;background:var(--surface3);border-radius:999px;padding:0 8px;font-size:11.5px}

/* Gantt */
.leg{position:absolute;top:7px;height:24px;border-radius:6px;background:var(--leg);color:var(--legt);font-size:12.5px;line-height:24px;padding:0 5px;white-space:nowrap;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-variant-numeric:tabular-nums;font-weight:550}
.leg.d15{background:var(--amber);color:var(--ambert)}
.leg.d60{background:var(--red);color:var(--redt)}
.leg.cx{background:transparent;border:1px dashed var(--muted);color:var(--muted);text-decoration:line-through;line-height:18px}
.leg.hard{outline:2px solid var(--red);outline-offset:1px}
.leg.moved{background-image:linear-gradient(90deg,var(--purple) 0 4px,transparent 4px);padding-left:8px}
.leg.rt{border-top:3px dotted var(--purple)}
.leg.crew::after{content:"";position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:50%;background:#f5d000;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.leg.trail{outline:2px dashed var(--green);outline-offset:1px}
.leg.sel{outline:2px solid var(--sel);outline-offset:1px;z-index:1}
.ghost{position:absolute;bottom:2px;height:3px;background:var(--muted);opacity:.5;border-radius:2px}
.mx{position:absolute;top:4px;bottom:4px;background:repeating-linear-gradient(45deg,var(--hatch) 0 4px,transparent 4px 8px);border:1px solid var(--hatch);border-radius:5px;font-size:10px;color:var(--muted);padding-left:5px;line-height:22px;overflow:hidden;white-space:nowrap}
.aog{position:absolute;top:4px;bottom:4px;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--red) 28%,transparent) 0 4px,transparent 4px 8px);border:1px solid color-mix(in srgb,var(--red) 70%,transparent);border-radius:5px;font-size:10.5px;color:var(--red);font-weight:700;padding-left:6px;line-height:22px;overflow:hidden;white-space:nowrap}

/* Patron (rotation board) */
.row.prow{height:64px}
.prow .aog,.prow .mx{line-height:normal;padding-top:3px}
.pst{position:absolute;top:6px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13.5px;line-height:1.15;overflow:hidden;white-space:nowrap}
.pst b{font-weight:700;letter-spacing:.02em}
.pst span{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.pst.bad b{color:var(--red)}
.pst.bad span{color:var(--red)}
.pst.long{top:10px;height:44px;border:1px dashed color-mix(in srgb,var(--green) 60%,transparent);border-radius:7px;background:color-mix(in srgb,var(--green) 8%,transparent);clip-path:inset(0 4px)}
.pst.long span{color:var(--green);font-weight:700;font-size:12px}
.pst.ron b{color:var(--muted)}
.pspare{position:absolute;top:19px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:650;color:var(--muted);border:1px solid var(--hatch);background:repeating-linear-gradient(45deg,var(--hatch) 0 4px,transparent 4px 8px)}
.ptrk .ghost{bottom:1px;height:2px}
.pleg{position:absolute;top:6px;height:52px;z-index:1;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--border);border-left:3px solid var(--leg);border-radius:6px;background:var(--card);box-shadow:var(--shadow-sm);padding:2px 8px;font-size:12.5px;line-height:15.5px;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;transition:box-shadow .12s,transform .12s}
.pleg:hover{box-shadow:var(--shadow);border-color:var(--border2)}
.pleg .pf{display:flex;align-items:center;gap:4px}
.pleg .pf b{font-size:14.5px;font-weight:750}
.pleg .pt{color:var(--muted)}
.pleg .pe{font-weight:650}
.pleg .pd{margin-left:auto;font-weight:750;font-size:12px;padding:0 6px;border-radius:5px;background:var(--surface3);line-height:17px}
.ptag{font-size:10.5px;font-weight:600;background:var(--surface3);color:var(--muted);border-radius:3px;padding:0 4px}
.pleg.d1{border-left-color:var(--amber)}
.pleg.d15{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,var(--card))}
.pleg.d15 .pd{background:var(--amber);color:var(--ambert)}
.pleg.d15 .pe{color:color-mix(in srgb,var(--amber) 75%,var(--text))}
.pleg.d60{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 11%,var(--card))}
.pleg.d60 .pd{background:var(--red);color:var(--redt)}
.pleg.d60 .pe{color:var(--red)}
.pleg.cx{top:auto;bottom:2px;height:18px;line-height:13px;z-index:0;border-style:dashed;border-left-width:1px;color:var(--muted);background:transparent;box-shadow:none}
.pleg.cx .pf b{text-decoration:line-through;font-size:11.5px}
.pleg.hard{outline:2px solid var(--red);outline-offset:1px}
.pleg.moved{box-shadow:inset 0 3px 0 var(--purple),var(--shadow-sm)}
.pleg.rt .pt{text-decoration:underline dotted var(--purple)}
.pleg.crew::after{content:"";position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:50%;background:#f5d000;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.pleg.trail{outline:2px dashed var(--green);outline-offset:1px}
.pleg.sel{outline:2px solid var(--sel);outline-offset:1px;z-index:2;box-shadow:var(--shadow)}
body.dragging,body.dragging *{cursor:grabbing!important}

/* ---------- Panel ---------- */
#panel{width:410px;flex:none;border-left:1px solid var(--border);background:var(--surface);overflow:auto;padding:16px 16px 40px}
body.nopanel #panel{display:none}
.ph{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.big{font-size:24px;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.xbtn{display:none;min-height:32px;padding:2px 10px}
.sec{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.ph+.sec{border-top:0;padding-top:0}
.sec h4{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650;display:flex;align-items:center;gap:6px}
.sec h4 .cnt{background:var(--surface3);color:var(--text);border-radius:999px;padding:0 8px;font-size:12px;letter-spacing:0}
.sec h4 .cnt.bad{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.stat{background:var(--surface2);border-radius:var(--r);padding:8px 10px}
.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--muted)}
.tg{display:grid;grid-template-columns:auto 1fr 1fr;gap:5px 12px;font-variant-numeric:tabular-nums;background:var(--surface2);border-radius:var(--r);padding:10px 12px}
.tg .h{color:var(--muted);font-size:11px}
.iss{padding:8px 11px;border-radius:8px;margin:5px 0;font-size:13px;border-left:3px solid transparent}
.iss.h{background:color-mix(in srgb,var(--red) 10%,transparent);border-left-color:var(--red)}
.iss.s{background:color-mix(in srgb,var(--amber) 13%,transparent);border-left-color:var(--amber)}
.btns input[type=number]{width:76px}
.sg{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--card)}
.sg.best{border-color:color-mix(in srgb,var(--green) 60%,transparent);box-shadow:inset 3px 0 0 var(--green)}
.sg .m{margin:4px 0;font-variant-numeric:tabular-nums}
.sg .w{font-size:11.5px;color:var(--muted)}
.sg .w.h{color:var(--red)}
.tag{font-size:10.5px;background:var(--surface3);border-radius:4px;padding:1px 6px;margin-left:4px;font-weight:550}
.list{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card)}
.list .it{padding:10px 12px;border-bottom:1px solid var(--grid);cursor:pointer;font-variant-numeric:tabular-nums}
.list .it:last-child{border-bottom:0}
.list .it:hover{background:var(--surface2)}
.empty{padding:14px;border:1px dashed var(--border2);border-radius:var(--r);color:var(--muted);text-align:center;font-size:12px}
.how{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.how li{margin:4px 0}
details.tips summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:550;list-style:none;display:flex;align-items:center;gap:6px}
details.tips summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:14px}
details.tips[open] summary::before{transform:rotate(90deg)}
details.tips summary::-webkit-details-marker{display:none}
.chain{font-size:11.5px;color:var(--muted);margin:2px 0 4px}
.chain b{color:var(--text)}
.crewbox{border-left:3px solid var(--border);padding-left:9px;margin:8px 0}
.legend{display:flex;gap:8px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:14px;height:9px;border-radius:2px;vertical-align:middle;margin-right:4px}
.lnk{color:var(--accent);cursor:pointer}
.lnk:hover{text-decoration:underline}
.cta{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--amber) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);margin-top:12px;font-size:12px}
.cta div{flex:1}

/* ---------- Overlay ---------- */
#dragGhost{position:fixed;z-index:50;pointer-events:none;background:var(--leg);color:#fff;border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600;box-shadow:var(--shadow);display:none}
#dragTip{position:fixed;z-index:51;pointer-events:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:12px;box-shadow:var(--shadow);display:none;max-width:330px}
#dragTip .r{margin:2px 0;font-variant-numeric:tabular-nums}
#dropMenu{position:fixed;z-index:52;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;display:none;width:310px}
#dropMenu button{display:block;width:100%;text-align:left;border:0;white-space:normal;padding:8px 10px}
#dropMenu button span{display:block;font-size:11.5px;color:var(--muted)}
#dropMenu .hd{padding:4px 10px 6px;font-size:11.5px;color:var(--muted)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:var(--text);color:var(--bg);padding:9px 16px;border-radius:10px;z-index:60;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;max-width:90vw;font-weight:550;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;background:rgba(10,14,20,.5);backdrop-filter:blur(2px);z-index:40;display:flex;align-items:center;justify-content:center;padding:16px}
.modal.hidden{display:none}
.mbox{background:var(--card);border-radius:14px;box-shadow:var(--shadow);width:min(860px,100%);max-height:92vh;overflow:auto;padding:18px 20px}
.mbox h3{margin:0 0 6px;font-size:17px;letter-spacing:-.01em}
.mfoot{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 12px;margin:8px 0}
.mgrid label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted)}
.mgrid label.req span::after{content:" *";color:var(--red)}
.prev{overflow:auto;max-height:200px;border:1px solid var(--border);border-radius:var(--r);margin-top:6px}
table.t{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
table.t th,table.t td{padding:6px 9px;border-bottom:1px solid var(--grid);text-align:left;white-space:nowrap}
table.t th{color:var(--muted);font-weight:600;background:var(--surface2);position:sticky;top:0}
.box{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-top:10px}

/* ---------- Tablet / layar kecil ---------- */
@media (max-width:1180px){
  .kpi{min-width:0;padding:4px 10px;flex:none}
  .kpi.opt{display:none}
  .actions .lbtx{display:none}
  .search input{width:112px}
  .zoom span{display:none}
  .bar{gap:5px;padding:8px 10px}
  .chip{padding:3px 8px}
  .seg button{padding:3px 7px}
  .zoom span{min-width:38px}
}
@media (max-width:900px){
  :root{--lblw:96px}
  .top{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .kpis{order:3;flex-basis:100%;justify-content:flex-start}
  .kpi.opt{display:block}
  .kgrp{flex:none}
  .kpi{flex:none;padding:4px 10px}
  .srcpill{display:none}
  .search{flex:1}.search input{width:100%}
  #panel{position:fixed;left:0;right:0;bottom:0;width:auto;max-height:64vh;border-left:0;border-top:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .22s;z-index:20;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  #panel::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--border2);margin:-6px auto 10px}
  #panel.open{transform:none}
  body.nopanel #panel{display:block}
  .xbtn{display:inline-flex}
}
@media (pointer:coarse){button,input,select{min-height:38px}.chip{min-height:36px}.seg button,.zoom button{min-height:32px}}

/* ---------- PWA ---------- */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
#updBar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:61;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:8px 10px 8px 14px;display:flex;gap:10px;align-items:center}
#updBar[hidden],#offBadge[hidden],#bInstall[hidden]{display:none}
#offBadge{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:61;background:var(--amber);color:var(--ambert);border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:650}
@media (display-mode:standalone){.top{padding-top:4px}}
/* Geser urutan baris */
.lbl{padding-left:22px}
.grip{position:absolute;left:0;top:0;bottom:0;width:20px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:13px;cursor:grab;touch-action:none;opacity:.55;transition:opacity .12s,color .12s}
.row:hover .grip,.grip:hover{opacity:1;color:var(--accent)}
.row .lbl{touch-action:pan-x pan-y;-webkit-touch-callout:none}
.grp .lbl{padding-left:12px}
.row.rowdrag .lbl,.row.rowdrag .trk{background-color:var(--accent-soft)}
.row.rowdrag{opacity:.6}
#rowLine{position:fixed;z-index:49;height:3px;border-radius:2px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);pointer-events:none;display:none}
#bOrd[hidden]{display:none}
@media (pointer:coarse){.grip{opacity:.9;width:24px}.lbl{padding-left:26px}}
/* Estimasi manual */
.est{display:grid;grid-template-columns:1fr 1fr 82px 70px;gap:6px}
.est label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.est input{width:100%;min-width:0;padding:4px 6px}
#bAog.on,#bMx.on{background:color-mix(in srgb,var(--red) 12%,var(--surface));border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
#bAog svg,#bMx svg{width:14px;height:14px}
/* ---------- Komponen panel ringkas ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12.5px;padding:2px 9px;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--surface3);color:var(--text)}
.pill.lg{font-size:15px;padding:4px 12px}
.pill.green{background:var(--green);color:var(--greent)}.pill.amber{background:var(--amber);color:var(--ambert)}.pill.red{background:var(--red);color:var(--redt)}.pill.gray{background:var(--surface3);color:var(--muted)}
.pill.soft.green{background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.pill.soft.amber{background:color-mix(in srgb,var(--amber) 18%,transparent);color:color-mix(in srgb,var(--amber) 70%,var(--text))}
.pill.soft.red{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.pill.soft.purple,.pill.purple{background:color-mix(in srgb,var(--purple) 14%,transparent);color:var(--purple)}
.pill.soft.gray{font-weight:600}
.route{font-size:17px;font-weight:700;margin:2px 0;letter-spacing:.02em}.route span{color:var(--faint);margin:0 4px}
.timebox{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:16px;background:var(--surface2);border-radius:12px;padding:14px}
.tb{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
.tb:last-child{text-align:right;align-items:flex-end}
.tb>span:first-child{font-size:12px}
.tb b{font-size:28px;font-weight:750;letter-spacing:-.02em;line-height:1.1}
.tb s{font-size:13px}
.arw{display:flex;justify-content:center}
.cause{margin-top:8px;font-size:13px;color:var(--muted);padding-left:2px}
.cause::before{content:"Sebab · ";font-weight:650;color:var(--text)}
.facts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.facts label{display:inline-flex;align-items:center;gap:6px;font-weight:650}
.facts input{width:76px}
.facts button{min-height:32px}
.list .it{display:flex;align-items:center;justify-content:space-between;gap:10px}
.itm{display:flex;flex-direction:column;min-width:0}
.itm b{font-size:14px}.itm .muted{font-size:12.5px}
.itb{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.stat.alert{background:color-mix(in srgb,var(--red) 12%,var(--surface2))}.stat.alert .v{color:var(--red)}
.stat.ok .v{color:var(--green)}
.empty{font-size:14px;font-weight:600;color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 6%,transparent)}
.cta{font-size:14px}
.log{display:flex;flex-direction:column;gap:5px;font-size:13px}
.log span{margin-right:8px;font-variant-numeric:tabular-nums}
.help{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.help div{background:var(--surface2);border-radius:var(--r);padding:8px 10px;display:flex;flex-direction:column}
.help span{font-size:12.5px;color:var(--muted)}
details.tips summary{font-size:13.5px}
.crew{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--grid)}
.crew:last-child{border-bottom:0}
.rk{flex:none;min-width:46px;text-align:center;font-size:11.5px;font-weight:750;padding:3px 6px;border-radius:6px;background:var(--surface3)}
.crew.bad .rk{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.crew .chain{font-size:12.5px;margin-top:2px}
.ci{font-size:12.5px;color:var(--red);margin-top:3px}
.sg{position:relative;padding:12px 14px}
.rec{position:absolute;top:-9px;right:12px;background:var(--green);color:var(--greent);font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px}
.sgh{display:flex;align-items:center;gap:8px;font-size:16px}
.mets{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin-top:10px}
.mets div{background:var(--surface2);border-radius:var(--r);padding:6px 8px;display:flex;flex-direction:column}
.mets span{font-size:11.5px;color:var(--muted)}
.mets b{font-size:15px;font-variant-numeric:tabular-nums}
.sg .w{font-size:12.5px;margin-top:4px}
.aogbox{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--red) 10%,transparent);border-left:4px solid var(--red);margin-bottom:10px}
.aogbox b{color:var(--red);font-size:15px}
.aogbox span{font-size:13px;color:var(--muted)}
.aogbox.rts{background:color-mix(in srgb,var(--green) 10%,transparent);border-left-color:var(--green)}.aogbox.rts b{color:var(--green)}
.aogbox.mnt{background:var(--surface2);border-left-color:var(--muted)}.aogbox.mnt b{color:var(--text)}
.row2{display:flex;gap:8px;align-items:flex-end}
.row2 label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);flex:1}
.row2 input{width:100%}
.row2>input{flex:1}
.est label{font-size:12px}
.est input{min-height:36px}
.ph .muted{font-size:13px}
.lab{font-size:13px}
@media (max-width:1560px){.bar .lbtx{display:none}}
.kpi{flex:none}
@media (max-width:1500px){.kpi.opt{display:none}}
@media (max-width:1180px){.bar,.bar button,.bar select,.bar input{font-size:13px}.bar .chip{padding:3px 7px}.search input{width:100px}.seg button{padding:3px 6px}}
/* ---------- Kandidat pengganti ---------- */
.row.cand .trk{background-color:color-mix(in srgb,var(--accent) 8%,transparent)}
.row.cand .lbl{box-shadow:inset 4px 0 0 var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.row.csrc .lbl{box-shadow:inset 4px 0 0 var(--red)}
.lbl.cand .st{display:none}
.cbadge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:750;white-space:nowrap;margin-top:2px;color:var(--accent)}
.cbadge i{font-style:normal;font-weight:750;padding:0 5px;border-radius:4px;font-size:11px}
.cbadge i.g{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.cbadge i.a{background:color-mix(in srgb,var(--amber) 22%,transparent);color:color-mix(in srgb,var(--amber) 70%,var(--text))}
.cbadge i.r{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.cbadge.src{color:var(--red)}
.cstd{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed color-mix(in srgb,var(--red) 70%,transparent);z-index:3;pointer-events:none}
.cready{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--accent);z-index:3;pointer-events:none}
.cready::before{content:"";position:absolute;top:50%;left:-6px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pill.k-GT,.pill.k-LND,.pill.k-PRE,.pill.k-STBY,.pill.k-RON{background:var(--accent-soft);color:var(--accent)}
.list .it.on{background:var(--accent-soft)}
.empty.none{color:var(--muted);border-color:var(--border2);background:transparent;font-weight:500}
#cmpBar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:12px;background:var(--text);color:var(--bg);border-radius:12px;padding:8px 8px 8px 16px;box-shadow:var(--shadow);font-size:14px;white-space:nowrap}
#cmpBar[hidden]{display:none}

/* ---------- Palet warna (pilih di menu Tampilan) ---------- */
:root[data-pal="tenang"]{--bg:#dcddd8;--surface:#e9e9e5;--surface2:#e1e1dc;--surface3:#d5d6d0;--card:#f6f6f3;--border:#cdcec7;--border2:#b5b6ae;--grid:rgba(40,40,30,.055);--text:#26272a;--muted:#62646a;--faint:#96989c;--accent:#3f6ea8;--accentt:#ffffff;--leg:#9a9da3;--legt:#ffffff;--amber:#c9861a;--ambert:#1d1405;--red:#c4443b;--redt:#ffffff;--green:#3f8a57;--greent:#ffffff;--purple:#7c5aa6;--hatch:rgba(98,100,106,.2);--sel:#26272a}
@media (prefers-color-scheme:dark){:root[data-pal="tenang"]:not([data-theme="light"]){--bg:#151617;--surface:#1c1d1f;--surface2:#232426;--surface3:#2b2c2f;--card:#26272a;--border:#323336;--border2:#46474c;--grid:rgba(255,255,255,.04);--text:#e3e2de;--muted:#a2a29f;--faint:#6d6e6e;--accent:#82a8d8;--accentt:#10151c;--leg:#6c6f76;--legt:#ffffff;--amber:#dda03c;--ambert:#1d1405;--red:#de665c;--redt:#ffffff;--green:#6db984;--greent:#0f1a12;--purple:#b09ad6;--hatch:rgba(162,162,159,.16);--sel:#f2f1ed}}
:root[data-pal="tenang"][data-theme="dark"]{--bg:#151617;--surface:#1c1d1f;--surface2:#232426;--surface3:#2b2c2f;--card:#26272a;--border:#323336;--border2:#46474c;--grid:rgba(255,255,255,.04);--text:#e3e2de;--muted:#a2a29f;--faint:#6d6e6e;--accent:#82a8d8;--accentt:#10151c;--leg:#6c6f76;--legt:#ffffff;--amber:#dda03c;--ambert:#1d1405;--red:#de665c;--redt:#ffffff;--green:#6db984;--greent:#0f1a12;--purple:#b09ad6;--hatch:rgba(162,162,159,.16);--sel:#f2f1ed}
:root[data-pal="laut"]{--bg:#d9e1e9;--surface:#e8eef4;--surface2:#dfe7ee;--surface3:#d2dce5;--card:#f9fbfd;--border:#c9d4de;--border2:#afbdca;--grid:rgba(30,60,90,.055);--text:#1c2733;--muted:#556476;--faint:#8a97a5;--accent:#2f6db5;--accentt:#ffffff;--leg:#8fabcf;--legt:#ffffff;--amber:#cd8920;--ambert:#1c1405;--red:#c94a45;--redt:#ffffff;--green:#33876a;--greent:#ffffff;--purple:#7b5fb5;--hatch:rgba(85,100,118,.2);--sel:#1c2733}
@media (prefers-color-scheme:dark){:root[data-pal="laut"]:not([data-theme="light"]){--bg:#0f151c;--surface:#151d26;--surface2:#1b242e;--surface3:#222d39;--card:#1d2733;--border:#283442;--border2:#384859;--grid:rgba(200,220,255,.045);--text:#e1e8f0;--muted:#97a7b9;--faint:#617183;--accent:#6aa5e8;--accentt:#0b1420;--leg:#4f6d92;--legt:#ffffff;--amber:#e2a745;--ambert:#1c1405;--red:#e26c65;--redt:#ffffff;--green:#5bbf94;--greent:#0b1a14;--purple:#ab94e1;--hatch:rgba(151,167,185,.16);--sel:#f0f5fa}}
:root[data-pal="laut"][data-theme="dark"]{--bg:#0f151c;--surface:#151d26;--surface2:#1b242e;--surface3:#222d39;--card:#1d2733;--border:#283442;--border2:#384859;--grid:rgba(200,220,255,.045);--text:#e1e8f0;--muted:#97a7b9;--faint:#617183;--accent:#6aa5e8;--accentt:#0b1420;--leg:#4f6d92;--legt:#ffffff;--amber:#e2a745;--ambert:#1c1405;--red:#e26c65;--redt:#ffffff;--green:#5bbf94;--greent:#0b1a14;--purple:#ab94e1;--hatch:rgba(151,167,185,.16);--sel:#f0f5fa}
:root[data-pal="kertas"]{--bg:#e4dfd4;--surface:#f0ece3;--surface2:#e9e3d8;--surface3:#ddd6c8;--card:#fbf9f4;--border:#d5cdbe;--border2:#bfb4a1;--grid:rgba(60,50,30,.06);--text:#2b2925;--muted:#69645a;--faint:#9b9589;--accent:#2e6a8a;--accentt:#ffffff;--leg:#a49d90;--legt:#ffffff;--amber:#c68217;--ambert:#1c1405;--red:#bd463c;--redt:#ffffff;--green:#4a8952;--greent:#ffffff;--purple:#82599e;--hatch:rgba(105,100,90,.22);--sel:#2b2925}
@media (prefers-color-scheme:dark){:root[data-pal="kertas"]:not([data-theme="light"]){--bg:#181715;--surface:#1f1e1b;--surface2:#272522;--surface3:#2f2d29;--card:#2b2925;--border:#383631;--border2:#4d4a43;--grid:rgba(255,245,225,.04);--text:#eae5db;--muted:#a9a395;--faint:#747063;--accent:#86b5cc;--accentt:#10161a;--leg:#77726b;--legt:#ffffff;--amber:#e0a548;--ambert:#1c1405;--red:#de6f5e;--redt:#ffffff;--green:#7bb97e;--greent:#10180f;--purple:#b899cf;--hatch:rgba(169,163,149,.16);--sel:#f5f1e8}}
:root[data-pal="kertas"][data-theme="dark"]{--bg:#181715;--surface:#1f1e1b;--surface2:#272522;--surface3:#2f2d29;--card:#2b2925;--border:#383631;--border2:#4d4a43;--grid:rgba(255,245,225,.04);--text:#eae5db;--muted:#a9a395;--faint:#747063;--accent:#86b5cc;--accentt:#10161a;--leg:#77726b;--legt:#ffffff;--amber:#e0a548;--ambert:#1c1405;--red:#de6f5e;--redt:#ffffff;--green:#7bb97e;--greent:#10180f;--purple:#b899cf;--hatch:rgba(169,163,149,.16);--sel:#f5f1e8}
:root[data-pal="kontras"]{--bg:#e6e6e6;--surface:#f5f5f5;--surface2:#ebebeb;--surface3:#dedede;--card:#ffffff;--border:#b5b5b5;--border2:#858585;--grid:rgba(0,0,0,.09);--text:#000000;--muted:#2e2e2e;--faint:#616161;--accent:#0050d0;--accentt:#ffffff;--leg:#0050d0;--legt:#ffffff;--amber:#f0a000;--ambert:#000000;--red:#d10000;--redt:#ffffff;--green:#007a33;--greent:#ffffff;--purple:#7a00c8;--hatch:rgba(0,0,0,.3);--sel:#000000}
@media (prefers-color-scheme:dark){:root[data-pal="kontras"]:not([data-theme="light"]){--bg:#000000;--surface:#000000;--surface2:#111111;--surface3:#1e1e1e;--card:#141414;--border:#3b3b3b;--border2:#666666;--grid:rgba(255,255,255,.1);--text:#ffffff;--muted:#d2d2d2;--faint:#9a9a9a;--accent:#3da5ff;--accentt:#00111f;--leg:#1f8fff;--legt:#ffffff;--amber:#ffc400;--ambert:#000000;--red:#ff3b3b;--redt:#ffffff;--green:#2ee66b;--greent:#002910;--purple:#c47dff;--hatch:rgba(255,255,255,.3);--sel:#ffffff}}
:root[data-pal="kontras"][data-theme="dark"]{--bg:#000000;--surface:#000000;--surface2:#111111;--surface3:#1e1e1e;--card:#141414;--border:#3b3b3b;--border2:#666666;--grid:rgba(255,255,255,.1);--text:#ffffff;--muted:#d2d2d2;--faint:#9a9a9a;--accent:#3da5ff;--accentt:#00111f;--leg:#1f8fff;--legt:#ffffff;--amber:#ffc400;--ambert:#000000;--red:#ff3b3b;--redt:#ffffff;--green:#2ee66b;--greent:#002910;--purple:#c47dff;--hatch:rgba(255,255,255,.3);--sel:#ffffff}
#palMenu{position:fixed;z-index:55;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:12px}
#palMenu[hidden]{display:none}
#palMenu h5{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#palMenu .seg{width:100%;margin-bottom:14px}#palMenu .seg button{flex:1}
.palopt{display:flex;align-items:center;gap:10px;width:100%;justify-content:flex-start;text-align:left;padding:8px 10px;margin-bottom:6px;border-radius:10px;min-height:48px}
.palopt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.palopt .nm{display:flex;flex-direction:column;flex:1;line-height:1.25}.palopt .nm span{font-size:12px;color:var(--muted)}
.sw{display:flex;border-radius:7px;overflow:hidden;border:1px solid var(--border);flex:none}
.sw i{display:block;width:13px;height:26px}
/* ---------- Kenyamanan visual: tenang secara default, mencolok saat abnormal ---------- */
.pleg{border:0;border-left:4px solid var(--leg);border-radius:8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 75%,transparent)}
.pleg:hover{box-shadow:0 0 0 1px var(--border2),var(--shadow-sm)}
.pleg .pf b{font-weight:700}
.pleg .pt{color:var(--muted)}
.pleg.d15{box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 35%,transparent)}
.pleg.d60{box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 35%,transparent)}
.pleg.moved{box-shadow:inset 0 3px 0 var(--purple),0 0 0 1px color-mix(in srgb,var(--border) 75%,transparent)}
.pleg.cx{box-shadow:none}
.pst b{font-weight:600;color:color-mix(in srgb,var(--text) 82%,var(--muted))}
.pst span{color:var(--faint)}
.pst.long{border:0;background:color-mix(in srgb,var(--green) 10%,transparent);border-radius:10px}
.tick{border-left-color:color-mix(in srgb,var(--border) 60%,transparent)}
.row{border-bottom-color:var(--grid)}
.ghost{opacity:.3}
.mx{background:repeating-linear-gradient(45deg,var(--hatch) 0 3px,transparent 3px 9px);border-color:color-mix(in srgb,var(--hatch) 70%,transparent)}
.aog{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--red) 18%,transparent) 0 3px,transparent 3px 9px);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.lbl,.hdr .lbl{border-right-color:color-mix(in srgb,var(--border) 70%,transparent)}
/* ---------- Limitasi pesawat ---------- */
.lim{font-style:normal;display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:0 5px;border-radius:4px;background:var(--surface3);color:var(--muted);margin-left:4px;line-height:16px;white-space:nowrap}
.lim.bad{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.lim.warn{background:color-mix(in srgb,var(--amber) 20%,transparent);color:color-mix(in srgb,var(--amber) 70%,var(--text))}
.plim{font-size:10.5px;font-weight:750;color:var(--redt);background:var(--red);border-radius:4px;padding:0 5px;line-height:16px;white-space:nowrap}
.limrow{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:var(--surface2);margin-bottom:6px}
.limrow.bad{background:color-mix(in srgb,var(--red) 10%,transparent)}
.limrow.warn{background:color-mix(in srgb,var(--amber) 12%,transparent)}
.lic{min-width:42px;text-align:center;font-weight:750;font-size:14px}
.limt{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.clims{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.clims i{font-style:normal;font-size:11.5px;font-weight:700;padding:0 6px;border-radius:4px}
.clims i.bad{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.clims i.warn{background:color-mix(in srgb,var(--amber) 18%,transparent);color:color-mix(in srgb,var(--amber) 70%,var(--text))}
#dragTip .r.bad{color:var(--red);font-weight:650}#dragTip .r.warn{color:color-mix(in srgb,var(--amber) 75%,var(--text))}
#bLim.on{background:color-mix(in srgb,var(--red) 12%,var(--surface));border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
.fltwrap{position:relative}
#fltMenu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;display:flex;flex-direction:column;gap:6px;min-width:230px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
#fltMenu[hidden]{display:none}
#fltMenu .chip{justify-content:flex-start;border-radius:8px}
#bFlt svg{width:15px;height:15px}
.fcnt{background:var(--accent);color:var(--accentt);border-radius:999px;padding:0 6px;font-size:11px;margin-left:2px}
#bFlt.on{border-color:var(--accent);color:var(--text)}
/* ---------- Kartu sesuai skala waktu: isi menyesuaikan lebar ---------- */
.pleg.s{padding:2px 6px;font-size:11.5px;line-height:14px}
.pleg.s .pf b{font-size:13px}
.pleg.s .pd{font-size:10.5px;padding:0 4px}
.pleg.s .plim{display:none}
.pleg.xs{padding:2px 4px;justify-content:center}
.pleg.xs .pt,.pleg.xs .pe,.pleg.xs .plim,.pleg.xs .ptag{display:none}
.pleg.xs .pf{flex-direction:column;align-items:flex-start;gap:0}
.pleg.xs .pf b{font-size:12px}
.pleg.xs .pd{margin:0;font-size:10px;padding:0 3px;line-height:14px}
.pst.tight b,.pst.tight span{display:none}
.pst.nogt:not(.long) span{display:none}
/* ---------- Penggaris ganda UTC + CGK (WIB) ---------- */
.hdr.r2{height:48px}
.hdr.r2 .lbl{gap:1px}
.hdr.r2 .lbl b{font-size:12px}
.hdr.r2 .lbl span{font-size:10.5px;line-height:1.25}
.hdr.r2 .tick{padding:4px 0 0 6px;display:flex;flex-direction:column;line-height:1.3}
.hdr.r2 .tu,.hdr.r2 .tw,.hdr.r2 .ru,.hdr.r2 .rw{color:var(--faint);font-weight:500}
.hdr.r2.on-u .tu,.hdr.r2.on-u .ru,.hdr.r2.on-w .tw,.hdr.r2.on-w .rw{color:var(--text);font-weight:700}
.hdr.r2 .tw{font-size:12.5px}.hdr.r2 .tu{font-size:11.5px}
/* ---------- Zona kanvas berbeda warna: penggaris, kolom reg, latar patron, kartu ---------- */
:root{--z-hdr:color-mix(in srgb,var(--accent) 16%,var(--surface3));--z-grp:color-mix(in srgb,var(--accent) 9%,var(--surface2));--z-lbl:color-mix(in srgb,var(--surface) 65%,var(--card));--z-trk:color-mix(in srgb,var(--bg) 75%,var(--surface));--z-card:var(--card)}
:root[data-pal="tenang"]{--z-hdr:#cdd4dd;--z-grp:#d9dee4;--z-lbl:#efede8;--z-trk:#d8d9d4;--z-card:#fcfcfa}
@media (prefers-color-scheme:dark){:root[data-pal="tenang"]:not([data-theme="light"]){--z-hdr:#262c34;--z-grp:#1f242b;--z-lbl:#202123;--z-trk:#141516;--z-card:#2b2c2f}}
:root[data-pal="tenang"][data-theme="dark"]{--z-hdr:#262c34;--z-grp:#1f242b;--z-lbl:#202123;--z-trk:#141516;--z-card:#2b2c2f}
#gantt{background:var(--z-trk)}
.hdr,.hdr .lbl,.hdr .lbl:hover{background:var(--z-hdr)}
.hdr{border-bottom-color:var(--border2)}
.hdr .tick{border-left-color:color-mix(in srgb,var(--text) 14%,transparent)}
.grp,.grp .lbl,.grp .lbl:hover{background:var(--z-grp)}
.row .lbl{background:var(--z-lbl)}
.row .lbl:hover{background:color-mix(in srgb,var(--accent) 8%,var(--z-lbl))}
.row .lbl.selac{background:color-mix(in srgb,var(--accent) 14%,var(--z-lbl))}
.row.hov .lbl,.row.rowdrag .lbl{background:color-mix(in srgb,var(--accent) 12%,var(--z-lbl))}
.row.cand .lbl{background:color-mix(in srgb,var(--accent) 10%,var(--z-lbl))}
.pleg{background:var(--z-card)}
.pleg.d15{background:color-mix(in srgb,var(--amber) 13%,var(--z-card))}
.pleg.d60{background:color-mix(in srgb,var(--red) 11%,var(--z-card))}
/* ---------- Pilih banyak flight ---------- */
#multiBar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:31;display:flex;align-items:center;gap:12px;background:var(--accent);color:var(--accentt);border-radius:12px;padding:8px 8px 8px 16px;box-shadow:var(--shadow);font-size:14px;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden}
#multiBar[hidden]{display:none}
#multiBar button{background:var(--card);color:var(--text);border-color:transparent}
.pleg.msel,.leg.msel{outline:2px solid var(--accent);outline-offset:1px;z-index:2;background:color-mix(in srgb,var(--accent) 14%,var(--z-card,var(--card)))}
.pleg.msel::before{content:"\2713";position:absolute;right:4px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--accent);color:var(--accentt);font-size:10px;font-weight:800;line-height:15px;text-align:center}
/* ---------- Stop AC & flight yatim ---------- */
.stopbar{position:absolute;top:2px;bottom:2px;z-index:0;border-radius:6px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--red) 16%,transparent) 0 5px,transparent 5px 11px);border:1px solid color-mix(in srgb,var(--red) 55%,transparent);border-left:4px solid var(--red);font-size:11px;color:var(--red);padding:2px 6px;white-space:nowrap;overflow:hidden;line-height:14px}
.stopbar b{font-weight:800}
.prow .stopbar{display:flex;align-items:flex-end;padding-bottom:3px}
.pleg.orph,.leg.orph{border:1.5px dashed var(--red);border-left:4px solid var(--red);background:color-mix(in srgb,var(--red) 7%,var(--z-card,var(--card)));box-shadow:none;top:4px}
.prow .pleg.orph{top:3px;height:40px;line-height:14px}
.otag{font-size:10px;font-weight:800;letter-spacing:.03em;color:var(--redt);background:var(--red);border-radius:3px;padding:0 4px;line-height:15px}
.pleg.xs .otag{display:none}
.pleg.orph.msel{outline:2px solid var(--accent)}
.aogbox.stop{border-left-color:var(--red)}
.orphl{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,var(--red) 8%,transparent);font-size:13px}
.orphl b{color:var(--red)}.orphl span{color:var(--muted)}
.stopsec>summary{list-style:none;cursor:pointer}.stopsec>summary::-webkit-details-marker{display:none}
.stopsec>summary::after{content:"+ buka";font-size:12px;color:var(--muted);float:right;margin-top:-22px}
.stopsec[open]>summary::after{content:"tutup"}
button.danger{background:var(--red);color:var(--redt);border-color:transparent;font-weight:650}
button.danger:hover{filter:brightness(1.06)}
.stopsec select{width:100%;margin-top:4px}
body:has(#multiBar:not([hidden])) #toast,body:has(#cmpBar:not([hidden])) #toast{bottom:84px}
.pst.orphst{z-index:1}.pst.orphst b{color:color-mix(in srgb,var(--red) 75%,var(--text))}.pst.orphst span{color:color-mix(in srgb,var(--red) 55%,var(--muted))}
/* ---------- Recovery: tab panel, kartu opsi, paket, pratinjau ---------- */
.tabs{display:flex;gap:2px;margin:12px 0 2px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px}
.tabs button{flex:1;border:0;background:transparent;color:var(--muted);font-weight:650;border-radius:7px;min-height:34px;display:flex;align-items:center;justify-content:center;gap:6px}
.tabs button:hover{color:var(--text);background:transparent}
.tabs button.on{background:var(--card);color:var(--text);box-shadow:var(--shadow-sm)}
.opt{position:relative;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--card);transition:border-color .12s,box-shadow .12s}
.opt.best{border-color:color-mix(in srgb,var(--green) 60%,transparent);box-shadow:inset 3px 0 0 var(--green)}
.opt.pv{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.opt.pkg{background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.opt .oh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.opt .oh b{font-size:16px}
.opt .ol{font-size:13.5px;margin-top:3px}
.opt .w{font-size:12.5px;color:var(--muted);margin-top:4px}
.opt .btns{margin-top:10px;align-items:center}
.opt .rec{position:static;margin-left:auto}
.pickl{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted);margin-left:auto;cursor:pointer}
.steps{margin:8px 0 0;padding-left:20px;font-size:13.5px;display:grid;gap:4px}
.cmpt{overflow-x:auto;margin:6px 0 10px;border:1px solid var(--border);border-radius:10px}
.cmpt table{margin:0}.cmpt th:first-child{text-align:left;color:var(--muted);font-weight:550;white-space:nowrap}.cmpt td,.cmpt thead th{text-align:center}
.pill.k-FERRY{background:color-mix(in srgb,var(--purple) 16%,transparent);color:var(--purple)}
.it.flat{cursor:default}
.recinfo .row2{margin-top:8px;align-items:end}
.retbox{display:flex;align-items:center;gap:10px;justify-content:space-between;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--card)}
.retbox.good{border-color:color-mix(in srgb,var(--green) 55%,transparent)}
.retbox div{display:flex;flex-direction:column}.retbox span{font-size:12.5px;color:var(--muted)}
.swtag{font-size:11px;font-weight:800;color:var(--redt);background:var(--red);border-radius:3px;padding:0 4px;line-height:15px}
.pleg.xs .swtag{display:none}
.pleg.ferry,.leg.ferry{border-style:dashed;background:color-mix(in srgb,var(--purple) 12%,var(--card));color:var(--text)}
.pleg.pvm,.leg.pvm{outline:2px solid var(--accent);outline-offset:1px}
body.previewing #gantt{box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 55%,transparent)}
#pvBar{position:fixed;left:50%;top:calc(118px + env(safe-area-inset-top));transform:translateX(-50%);z-index:30;background:var(--accent);color:var(--accentt,#fff);border-radius:999px;padding:6px 16px;box-shadow:var(--shadow);font-size:13.5px;white-space:nowrap;pointer-events:none}
#pvBar[hidden]{display:none}
.recinfo .row2 label.lab{flex-direction:row;align-items:center;flex:0 0 auto;font-size:13px;min-height:38px}
.recinfo .row2 label.lab input{width:auto;min-height:0}

/* ---------- KPI bisa diklik, legenda kanvas, tag kartu ---------- */
.kpi.kf{cursor:pointer;transition:background .12s}
.kpi.kf:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.kpi.on{background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent)}
.mtag{font-size:12px;font-weight:800;color:var(--purple);line-height:15px}
.pleg.xs .mtag{display:none}
main{position:relative}
#legend{position:absolute;left:12px;bottom:12px;z-index:25;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm);font-size:12.5px;max-width:min(560px,calc(100% - 24px))}
#legend summary{cursor:pointer;padding:6px 12px;font-weight:650;color:var(--muted);list-style:none}
#legend summary::-webkit-details-marker{display:none}
#legend[open] summary{border-bottom:1px solid var(--border)}
#legend .legend{margin:0;padding:10px 12px;align-items:center}
#legend .legend span{display:inline-flex;align-items:center;gap:5px}
#legend .legend i{margin:0;width:16px;height:11px;border-radius:3px;border:1px solid var(--border2)}
.lg-ok{background:var(--z-card,var(--card))}.lg-a{background:color-mix(in srgb,var(--amber) 35%,var(--card));border-left:3px solid var(--amber)!important}
.lg-r{background:color-mix(in srgb,var(--red) 28%,var(--card));border-left:3px solid var(--red)!important}
.lg-o{border:1.5px dashed var(--red)!important;background:transparent}.lg-m{box-shadow:inset 0 3px 0 var(--purple)}
.lg-f{border:1px dashed var(--purple)!important;background:color-mix(in srgb,var(--purple) 12%,var(--card))}
.lg-x{border-style:dashed!important;background:transparent}.lg-h{outline:2px solid var(--red);border:0!important}
.lg-c{background:#f5d000!important;border-radius:50%!important;width:10px!important;height:10px!important;border:0!important}
.lg-g{border:1px dashed var(--green)!important;background:color-mix(in srgb,var(--green) 10%,transparent)}
@media (max-width:900px){#legend{display:none}}
#bKf[hidden]{display:none}