/* Paragon theme: charcoal + Paragon yellow (--gold) */
:root{color-scheme:dark;--bg:#121316;--pan:rgba(25,26,30,.96);--hov:rgba(255,255,255,.06);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);--txt:#ededf0;--mut:#9a9aa5;--gold:#fce300;--goldbg:rgba(252,227,0,.13);--sel:rgba(255,255,255,.08);--ink:#17181b;--focus:rgba(255,255,255,.38);--r:12px;--shadow:0 10px 30px rgba(0,0,0,.42),0 1px 0 rgba(255,255,255,.04) inset}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
::selection{background:rgba(255,255,255,.24)}
::placeholder{color:var(--mut);opacity:1}
/* number inputs (stepper added by js/ui.js) */
input[type=number]{-moz-appearance:textfield;appearance:textfield;height:26px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--txt);font:inherit;font-size:12px;outline:none}
input[type=number]:focus{border-color:var(--focus)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.num{display:inline-flex;align-items:stretch;height:26px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);overflow:hidden;transition:border-color .12s}
.num:hover{border-color:rgba(255,255,255,.18)}
.num:focus-within{border-color:var(--focus)}
.num input[type=number]{flex:1;border-radius:0;min-width:0;width:100%;height:100%;padding:0 6px 0 8px;border:0;background:none;outline:none;color:var(--txt);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}
.num-st{display:flex;flex-direction:column;flex:none;border-left:1px solid var(--line)}
.num-st button{flex:1;height:auto;width:18px;min-width:0;padding:0;border:0;border-radius:0;background:none;color:var(--mut);justify-content:center}
.num-st button:hover{background:var(--hov);color:var(--txt)}
.num-st button+button{border-top:1px solid var(--line)}
/* range sliders */
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid #1e1e22;box-shadow:0 0 0 1px var(--gold)}
input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid #1e1e22;box-shadow:0 0 0 1px var(--gold)}
input[type=range]::-moz-range-progress{background:var(--gold);height:4px;border-radius:2px}
/* radios */
input[type=radio]{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin:0;border:1.5px solid var(--mut);border-radius:50%;display:inline-grid;place-content:center;cursor:pointer;flex:none}
input[type=radio]:hover{border-color:var(--txt)}
input[type=radio]:checked{border-color:var(--gold)}
input[type=radio]:checked::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}
/* tooltip + toast (js/ui.js) */
#tip{position:fixed;z-index:3000;max-width:260px;background:#0d0d0f;border:1px solid var(--line);color:var(--txt);padding:4px 9px;border-radius:6px;font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transition:opacity .12s}
#tip.on{opacity:1}
#toast{position:fixed;z-index:3000;left:50%;bottom:64px;transform:translate(-50%,10px);max-width:min(560px,calc(100% - 40px));background:#1d1e23;border:1px solid var(--line2);border-left:3px solid var(--gold);color:var(--txt);padding:10px 14px;border-radius:10px;font-size:12.5px;line-height:1.45;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
#toast.on{opacity:1;transform:translate(-50%,0)}
html,body{height:100%;margin:0;font:13px/1.45 Inter,"Segoe UI",system-ui,sans-serif;color:var(--txt);background:var(--bg);-webkit-font-smoothing:antialiased}
.page{display:none;height:100%;flex-direction:column;position:relative}
.page.on{display:flex}
button,label.btn{height:30px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.04);font:inherit;font-weight:500;cursor:pointer;color:var(--txt);display:inline-flex;align-items:center;gap:6px}
button:hover,label.btn:hover{background:var(--hov)}
button.pri{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:650}
button.pri:hover{background:#fff05a;border-color:#fff05a}
button:focus-visible,label.btn:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;background:#18191d;border-bottom:1px solid var(--line)}
.bar-brand{display:flex;align-items:center;gap:9px;margin-left:8px;padding-left:14px;border-left:1px solid var(--line);font-size:12.5px;color:var(--mut);min-width:0}
.bar-brand svg{flex:none}.bar-brand b{color:var(--txt);font-weight:650;font-size:13px}
.bar .sp{flex:1}.grp{display:flex;gap:6px}.sep{width:1px;height:20px;background:var(--line);margin:0 4px}
#map{position:absolute;inset:0;background:#1a1a1d}
/* drawing crosshair - hides the cursor and inverts whatever is under it */
#map.draw.xh,#map.draw.xh *{cursor:none!important}
/* Satellite capture prompt */
#shotPrompt{display:none;top:14px;left:50%;transform:translateX(-50%);z-index:1100;align-items:center;gap:9px;padding:6px 13px 6px 11px;max-width:calc(100% - 40px);white-space:nowrap;font-size:11.5px;line-height:1.55;color:var(--txt);border-radius:10px}
#shotPrompt.on{display:flex}
#shotPrompt .sp-ic{display:flex;flex:none;color:var(--gold)}
#shotPrompt .sp-ic svg{width:15px;height:15px}
#shotPrompt kbd{font:600 10.5px Inter,"Segoe UI",sans-serif;color:var(--txt);background:rgba(255,255,255,.08);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px}
#xhair{position:fixed;left:0;top:0;width:25px;height:25px;margin:-12px 0 0 -12px;z-index:4000;pointer-events:none;mix-blend-mode:difference;display:none}
#xhair.on{display:block}
#xhair::before,#xhair::after{content:'';position:absolute;background:#d4d4d4}
#xhair::before{left:11.5px;top:0;width:2px;height:25px}
#xhair::after{top:11.5px;left:0;height:2px;width:25px}
.float{position:absolute;z-index:900;background:var(--pan);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
/* brand header / plan menu button */
#projBtn{top:14px;left:14px;width:300px;height:44px;padding:0 10px 0 8px;gap:9px;justify-content:flex-start;text-align:left;color:var(--txt)}
#projBtn:hover{background:#202126;border-color:var(--line2)}
#projBtn.on{border-color:var(--focus)}
.brand-mark{display:flex;flex:none;filter:drop-shadow(0 2px 6px rgba(252,227,0,.18))}
.brand-mark svg{width:26px;height:26px}
.brand-mark{position:relative}
#cloudDot{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;border:2px solid #1d1e22;display:none;z-index:1}
#cloudDot.cd-saved{display:block;background:#d4d4d8}#cloudDot.cd-dirty{display:block;background:#1d1e22;box-shadow:inset 0 0 0 1.5px #9a9aa5}
#cloudDot.cd-saving{display:block;background:#9a9aa5;animation:cdpulse 1s ease-in-out infinite alternate}#cloudDot.cd-warn{display:block;background:#f59e0b}
@keyframes cdpulse{from{opacity:.35}to{opacity:1}}
#projMenu .pm-h{display:flex;flex-direction:column;gap:2px}
#cloudStat{font-size:11px;font-weight:500;color:var(--mut)}#cloudStat:empty{display:none}#cloudStat.cs-warn{color:#fbbf24}
#projMenu button:disabled{opacity:.4;pointer-events:none}
.cl-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto;margin:0 -6px}
.cl-row{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:4px 8px;border:0;border-radius:7px;background:none;color:var(--txt);font:inherit;font-size:12.5px;text-align:left;justify-content:flex-start}
button.cl-row{cursor:pointer}button.cl-row:hover,div.cl-row:hover{background:var(--hov)}
.cl-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-s{flex:none;font-size:11px;color:var(--mut)}
.cl-btn{flex:none;height:26px;padding:0 10px;font-size:11.5px}
.cl-now{flex:none;width:62px;text-align:center;font-size:11px;color:var(--mut)}
.brand-txt{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;align-self:stretch;line-height:1.2}
.brand-txt b{font-size:13px;font-weight:650;letter-spacing:.1px}
#planLine{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#planLine.unset{color:var(--gold);opacity:.85}
.brand-chev{flex:none;color:var(--mut)}
#search{width:210px;height:34px;display:flex;align-items:center;gap:7px;padding:0 10px;color:var(--mut);background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:8px;font-size:12px}
#search:focus-within{border-color:var(--focus);background:rgba(255,255,255,.07)}
#search #si{display:flex;flex:none}
#search input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--txt);outline:none;height:100%}
#search input::placeholder{color:var(--mut)}
/* toolbars (labels are hover tips) */
#tb{top:14px;left:50%;transform:translateX(-50%);padding:4px;display:flex;gap:1px;align-items:center}
#tb hr{width:1px;height:20px;border:0;background:var(--line);margin:0 5px}
#tb button{position:relative;height:34px;min-width:36px;padding:0 7px;border:0;border-radius:8px;background:none;color:var(--mut);justify-content:center}
#tb button.sm{min-width:34px;height:34px}
#tb button.dd{min-width:16px;width:16px;padding:0;margin-left:-2px;opacity:.7}
#tb button.dd:hover{opacity:1}
#tb button:hover{background:var(--hov);color:var(--txt)}
#tb button.on{background:var(--goldbg);color:var(--gold)}
#tb button.on:not([data-t=coord]):not([data-t=offset])::after{content:'';position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--c);border:1.5px solid #1d1e22}
#tb button::before{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#0d0d0f;border:1px solid var(--line);color:var(--txt);padding:5px 10px;border-radius:7px;font-size:12px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s .25s;z-index:2}
#tb button:hover::before{opacity:1}#tb button.on::before{display:none}
#tb button:disabled{opacity:.35;pointer-events:none}
#tb button#cap{min-width:40px;margin-left:4px;background:var(--gold);color:var(--ink);border-radius:8px}
#tb button#cap:hover{background:#fff05a;color:var(--ink)}
#tb2{top:62px;left:50%;transform:translateX(-50%);padding:4px;display:flex;gap:2px;align-items:center}
#tb2 hr{width:1px;height:20px;border:0;background:var(--line);margin:0 4px}
#tb2 button{position:relative;height:32px;min-width:34px;padding:0 8px;gap:3px;border:0;border-radius:7px;background:none;color:var(--mut);justify-content:center;font-weight:600}
#tb2 button:hover{background:var(--hov);color:var(--txt)}
#tb2 button.on{background:var(--goldbg);color:var(--gold)}
#tb2 button::before{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#0d0d0f;border:1px solid var(--line);color:var(--txt);padding:4px 9px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:2}
#tb2 button:hover::before{opacity:1}
#coordPanel{display:none;flex-direction:column;gap:8px;width:280px;padding:12px;z-index:910}
.cp-title{font-weight:600;font-size:12px}
.cp-sub{font-size:11.5px;color:var(--mut);margin-top:-4px}
.cp-row{display:flex;gap:10px;align-items:center}
.cp-row.wrap{flex-wrap:wrap}
.cp-field{flex:1;min-width:0}
.cp-lbl{display:block;font-size:11px;color:var(--mut);margin-bottom:3px}
.cp-radio{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.cp-row input[type=text]{width:100%;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--txt);font:inherit;font-size:12px}
.cp-actions{justify-content:flex-end;padding-top:2px}
#props{display:none;top:68px;right:14px;width:236px;flex-direction:column}
.pp-h{display:flex;align-items:center;gap:8px;padding:9px 8px 9px 12px;border-bottom:1px solid var(--line);font-weight:600;font-size:12px}
.pp-h .ki{display:flex;flex:none}
.pp-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-x{height:22px;width:22px;min-width:0;padding:0;border:0;background:none;color:var(--mut);justify-content:center;border-radius:5px}
.pp-x:hover{background:var(--hov);color:var(--txt)}
.pp-b{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px}
.pp-b:empty{display:none}
.pp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--mut)}
.pp-row .num{width:84px}
.pp-dd{position:relative;flex:1;min-width:0;max-width:160px}
.pp-full .pp-dd{max-width:none}
.pp-ddb{width:100%;height:28px;padding:0 8px;gap:8px;justify-content:flex-start;font-size:12px}
.pp-ddb span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-ddb svg{flex:none;opacity:.6}
.pp-dd i{width:11px;height:11px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.pp-ddm{position:absolute;right:0;top:calc(100% + 4px);width:200px;padding:4px;z-index:5;background:#1e1e22;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.pp-dd i.sig{display:flex;justify-content:center;background:none;box-shadow:none}
.pp-ddm[hidden]{display:none}
.pp-ddm button{display:flex;width:100%;height:30px;border:0;background:none;border-radius:6px;padding:0 8px;gap:9px;justify-content:flex-start;font-size:12px;color:var(--txt)}
.pp-ddm button:hover{background:var(--hov)}
.pp-ddm button.on{background:var(--sel)}
.pp-ddm button svg{margin-left:auto;color:var(--txt)}
.pp-seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pp-seg button{height:26px;min-width:0;padding:0 9px;border:0;border-radius:0;background:none;color:var(--mut);font-size:12px;justify-content:center}
.pp-seg button+button{border-left:1px solid var(--line)}
.pp-seg button:hover{background:var(--hov);color:var(--txt)}
.pp-seg button.on{background:var(--goldbg);color:var(--gold)}
.pp-op{display:flex;align-items:center;gap:8px;width:130px}
.pp-op input{flex:1;min-width:0}
.pp-op b{width:34px;text-align:right;font-weight:500;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.pp-col{display:flex;flex-direction:column;gap:8px}
.pp-cp{display:flex;align-items:center;gap:5px}
.pp-cur{height:26px;width:34px;min-width:0;padding:0;border:1px solid var(--line);border-radius:6px;box-shadow:inset 0 0 0 2px #1e1e22}
.pp-cur:hover{border-color:rgba(255,255,255,.35)}
.pp-cur.on{border-color:var(--focus)}
.cpk{display:flex;flex-direction:column;gap:10px;padding:2px 0}
.cpk[hidden]{display:none}
.cpk-sv{position:relative;height:120px;border-radius:7px;cursor:crosshair;touch-action:none;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cpk-hue{position:relative;height:10px;border-radius:5px;cursor:pointer;touch-action:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cpk-sv i,.cpk-hue i{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.4);transform:translate(-50%,-50%);pointer-events:none}
.cpk-hue i{top:50%}
.pp-hex{width:70px;height:26px;padding:0 7px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--txt);font:inherit;font-size:12px;font-variant-numeric:tabular-nums;text-transform:uppercase}
.pp-hex:focus{outline:none;border-color:var(--focus)}
.pp-drop{height:26px;width:28px;min-width:0;padding:0;justify-content:center;color:var(--mut)}
.pp-drop:hover{color:var(--txt)}
.pp-drop.on{background:var(--goldbg);border-color:var(--gold);color:var(--gold)}
.pp-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.pp-sw button{height:22px;min-width:0;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:5px}
.pp-sw button:hover{border-color:rgba(255,255,255,.6)}
.pp-sw button.on{outline:2px solid #fff;outline-offset:1px}
#p1.picking #ll .row{cursor:crosshair}
#bm{top:14px;right:14px;display:flex;gap:2px;padding:4px}
#bm button{height:34px;border:0;border-radius:8px;font-size:12px;padding:0 12px;background:none;color:var(--mut)}
#bm button:hover{background:var(--hov);color:var(--txt)}#bm button.on{background:var(--goldbg);color:var(--gold)}
#layers{top:68px;left:14px;width:300px;max-height:calc(100% - 140px);display:flex;flex-direction:column;overflow:hidden}
.lh{display:flex;justify-content:space-between;align-items:center;padding:11px 12px 10px 14px;font-weight:600;font-size:11px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;user-select:none;border-bottom:1px solid var(--line)}
#cnt:not(:empty){display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--txt);font-size:10.5px;letter-spacing:0}
.lh span{color:var(--mut);font-weight:500}
.lh>span:first-child{color:var(--txt);font-weight:600}
.lh>span:first-child span{color:var(--mut);font-weight:500}
.lh-btns{display:flex;gap:2px;margin:-4px -4px -4px 0}
.lhb{height:28px;width:28px;min-width:0;padding:0;border:0;background:none;color:var(--mut);justify-content:center;border-radius:5px}
.lhb:hover{background:var(--hov);color:var(--txt)}
#lsearch{display:flex;align-items:center;gap:7px;margin:8px 8px 3px;padding:0 6px 0 9px;height:30px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--mut)}
#lsearch:focus-within{border-color:var(--focus)}
#lsearch span{display:flex}
#lsearch input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:var(--txt);font:inherit;font-size:12px}
#lsearch input::placeholder{color:var(--mut)}
#lqx{display:flex;width:20px;height:20px;min-width:0;padding:0;border:0;background:none;color:var(--mut);justify-content:center;border-radius:4px}
#lqx:hover{background:var(--hov);color:var(--txt)}#lqx[hidden]{display:none}
#layers.min #lsearch{display:none}
#ll{overflow:auto;padding:5px}
#layers.min #ll,#layers.min .lh{border-bottom:0}#layers.min #ll{display:none}
.row{display:flex;align-items:center;gap:8px;padding:3px 4px 3px 6px;border-radius:7px;cursor:pointer}
.row:hover{background:var(--hov)}.row.sel{background:var(--sel)}.row.off .nm{opacity:.4;text-decoration:line-through}
.row.folder .nm{font-weight:600}
.row.sgroup .gchev{display:flex;flex:none;margin:0 -4px 0 -2px;opacity:.7;transition:transform .12s}
.row.sgroup.closed .gchev{transform:rotate(-90deg)}
.row.sgroup .nm{font-weight:600}
.group-body{padding-left:16px}
.row.folder .fchev{transition:transform .12s}
.row.folder.closed .fchev{transform:rotate(-90deg)}
.folder-body{padding-left:18px;padding-right:10px} /* rows in a folder sit in on both sides, so their buttons step in from the folder's */
.row .ki{display:flex;flex:none;align-self:center;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,currentColor 15%,transparent)}
.row.folder .ki{width:auto;height:auto;background:none}
.row .info{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.row .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:12.5px}
.row small{flex:0 1 auto;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut);font-size:11px;font-variant-numeric:tabular-nums}
.row button.ic{height:24px;width:24px;padding:0;border:0;background:none;color:var(--mut);justify-content:center;border-radius:6px;opacity:0}
.row:hover button.ic,.row.sel button.ic,.row.off button.ic{opacity:1}
.row button.ic:hover{background:var(--hov);color:var(--txt)}
.row button.ic.act{opacity:1;color:var(--txt);background:var(--hov)}
.row button.ic[data-a="m"],.row button.ic[data-a="v"]{flex:none;opacity:.5} /* always there, brighter on hover */
.row button.ic[data-a="v"]{margin-left:-6px}
.row:hover button.ic[data-a],.row.sel button.ic[data-a],.row.off button.ic[data-a="v"]{opacity:1}
.row .nm{cursor:text}
.rmenu{position:fixed;z-index:2500;min-width:180px;padding:4px;background:#1e1e22;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.rmenu button{display:flex;align-items:center;width:100%;height:30px;border:0;background:none;border-radius:6px;padding:0 9px;gap:9px;justify-content:flex-start;font-size:12px;color:var(--txt);white-space:nowrap}
.rmenu button svg{color:var(--mut);flex:none}
.rmenu button:hover{background:var(--hov)}.rmenu button:hover svg{color:var(--txt)}
.rmenu button.danger,.rmenu button.danger svg{color:#f87171}
.rmenu button.on{background:var(--sel)}.rmenu button.on svg{color:var(--txt)}
.rmenu kbd{margin-left:auto;padding-left:14px;font:500 11px Inter,"Segoe UI",sans-serif;color:var(--mut)}
.rmenu .rm-h{padding:6px 9px 4px;font-size:11px;font-weight:600;color:var(--mut)}
.rmenu button:disabled{opacity:.4;pointer-events:none}
.row button.ic.lk{opacity:1;flex:none;color:var(--mut)}
.rmenu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.nm-edit{width:100%;font:inherit;font-weight:500;font-size:13px;color:var(--txt);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);border-radius:4px;padding:1px 5px;margin:-1px -5px;outline:none}
.row.dragging{opacity:.35}
.row.drop-above{box-shadow:inset 0 2px 0 var(--focus)}.row.drop-below{box-shadow:inset 0 -2px 0 var(--focus)}
.row.folder.drop-target{background:var(--sel);outline:1.5px dashed var(--focus);outline-offset:-2px}
#ll.drop-target{background:rgba(255,255,255,.03)}
.empty{padding:8px 10px 12px;color:var(--mut);font-size:12px}
.hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:900;pointer-events:none;background:var(--pan);border:1px solid var(--line);color:var(--txt);padding:8px 16px;border-radius:999px;font-size:12px;box-shadow:var(--shadow);max-width:60%;text-align:center}
#hint{transition:opacity .6s}
#hint.faded{opacity:0}
#p1.clean-mode #projBtn,#p1.clean-mode #bm,#p1.clean-mode #tb,#p1.clean-mode #layers,#p1.clean-mode .hint,#p1.clean-mode #msg,#p1.clean-mode #coordPanel,#p1.clean-mode #props,#p1.clean-mode #projMenu{display:none!important}
#showToolsBtn{display:none;position:absolute;right:14px;bottom:14px;z-index:950;height:34px;width:34px;padding:0;justify-content:center;opacity:.45}
#showToolsBtn:hover{opacity:1}
#p1.clean-mode #showToolsBtn{display:flex}
#msg{display:none;position:absolute;z-index:1000;left:50%;transform:translateX(-50%);top:68px;width:min(540px,calc(100% - 120px));background:#1d1e23;border:1px solid var(--line2);border-left:3px solid var(--gold);color:var(--txt);padding:10px 14px;border-radius:10px;font-size:12.5px;box-shadow:var(--shadow)}
.map-handle{position:absolute;transform-origin:0 0;line-height:0;cursor:pointer;touch-action:none}
.multi-anchor{position:absolute;width:0;height:0;transform-origin:0 0;pointer-events:none}
.multi-anchor .multi-ring{position:absolute}
.multi-ring{position:absolute;transform-origin:0 0;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.75);pointer-events:none}
.sel-box{position:fixed;display:none;z-index:1500;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.08);pointer-events:none}
/* first-time guide */
.guide-cover{position:fixed;inset:0;z-index:3500}
.guide-spot{position:fixed;z-index:3501;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,0,0,.5);pointer-events:none;transition:all .2s}
.guide-spot.none{left:50%!important;top:50%!important;width:0!important;height:0!important}
.guide-tip{position:fixed;z-index:3502;width:300px;padding:14px 14px 12px;background:#1b1c20;border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);transition:left .2s,top .2s}
.gt-h{font-weight:650;font-size:13.5px;margin-bottom:5px}
.gt-t{font-size:12.5px;line-height:1.5;color:var(--mut)}
.gt-f{display:flex;align-items:center;gap:6px;margin-top:12px}
.gt-n{flex:1;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.gt-f button{height:28px;padding:0 11px;font-size:12px}
.gt-f .gt-skip{border:0;background:none;color:var(--mut)}
.close-halo{position:absolute;transform-origin:0 0;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:0 0 0 1.5px rgba(255,255,255,.85),0 1px 6px rgba(0,0,0,.35);pointer-events:none;z-index:99}
.measure-tag{position:absolute;z-index:5000;transform-origin:0 0;font:700 13px/1.25 Arial,sans-serif;white-space:nowrap;pointer-events:none;text-shadow:0 0 3px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.8)}
.note-dot{position:absolute;transform-origin:0 0;border-radius:50%;pointer-events:none}
.note-box{position:absolute;z-index:5000;transform-origin:0 0;background:#fff;color:#111;border:1.5px solid #111;border-radius:3px;padding:2px 4px;font:600 8px/1.25 Arial,sans-serif;white-space:pre;cursor:move;user-select:none}
.note-box .nt{outline:none;min-width:12px;user-select:text}
.note-box .nt:focus{cursor:text}
.mb-attr{display:none;margin:0 0 2px 5px;padding:2px 6px;font:11px Roboto,Arial,sans-serif;color:#333;background:rgba(255,255,255,.7)}
#stagewrap{flex:1;min-height:0;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:28px 24px 70px;background:var(--bg)}
#stage{position:relative;display:inline-block;box-shadow:0 10px 36px rgba(0,0,0,.6);background:#fff;line-height:0;border-radius:3px}
#bg{max-width:calc(100vw - 48px);max-height:calc(100vh - 170px);display:block;border-radius:3px}
#bg:not([src]),#bg[src=""]{display:none}
#bgPlaceholder{display:none;width:560px;height:340px;align-items:center;justify-content:center;text-align:center;padding:30px;line-height:1.6;color:var(--mut);font-size:13px;background:#1a1a1d;border:2px dashed var(--line);border-radius:6px}
#bg:not([src])+#bgPlaceholder,#bg[src=""]+#bgPlaceholder{display:flex}
/* plan page boxes */
.item{position:absolute;line-height:1.25;cursor:move;touch-action:none}
.item [contenteditable]:focus{cursor:text}
.txt .t{display:block;background:rgba(255,255,255,.9);color:#111;padding:4px 8px;font:bold 22px Arial,sans-serif;white-space:pre;outline:none;min-width:40px;border-radius:4px}
/* advance warning sign (sized in em so A-/A+ scale it) */
.sign .t{display:block;background:#ffd100;color:#000;font:17px/1.3 "Transport Heavy",Arial,sans-serif;text-align:center;white-space:pre;padding:.25em .9em;border:.3em solid #000;border-radius:.55em;outline:none}
.specials{background:rgba(255,255,255,.9);color:#111;padding:6px 10px 8px;border-radius:4px;font:14px/1.25 Arial,sans-serif;min-width:200px}
.specials .sp-h{font-weight:bold;margin-bottom:4px}
.sp-row{display:flex;align-items:flex-start;gap:8px;margin-top:4px}
.sp-row i{width:12px;height:12px;border-radius:50%;flex:none;margin-top:2.5px}
.sp-row .st{outline:none;white-space:pre;min-width:40px}
.logo-inner{resize:both;overflow:hidden;width:230px;height:70px}
.logo-inner img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.logo.empty .logo-inner{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.85);color:#555;font:13px Arial;text-align:center;line-height:1.3;border-radius:6px}

/* plan menu */
#projMenu{display:none;width:300px;padding:6px;z-index:920}
#projMenu .pm-h{padding:7px 9px 8px;font-size:12px;font-weight:600;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#projMenu button{display:flex;width:100%;height:32px;border:0;background:none;border-radius:6px;padding:0 9px;justify-content:flex-start;font-size:12px}
#projMenu button:hover{background:var(--hov)}
#projMenu hr{border:0;height:1px;background:var(--line);margin:4px 2px}
#projMenu kbd,.md-keys kbd{margin-left:auto;font:500 11px Inter,"Segoe UI",sans-serif;color:var(--mut);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
/* modal dialogs */
.modal-ov{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.modal{width:380px;max-width:calc(100% - 32px);background:#1b1c20;border:1px solid var(--line2);border-top:3px solid var(--gold);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.6);overflow:hidden}
.modal.wide{width:440px}
.modal-h{padding:14px 16px 0;font-weight:650;font-size:14px}
.modal-b{padding:12px 16px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px 14px;border-top:1px solid var(--line)}
button.danger{color:#f87171}
.md-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.md-f{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--mut)}
.md-f.full{grid-column:1 / -1}
.md-f input{width:100%;min-width:0;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--txt);font:inherit;font-size:13px;outline:none}
.md-f input:focus{border-color:var(--focus)}
.md-note{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--mut)}
.md-keys{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-items:center;font-size:12.5px}
.md-keys kbd{margin:0;justify-self:start}

/* speed badge under the selected works area */
.speed-badge{position:absolute;transform-origin:0 0;z-index:5000;white-space:nowrap;pointer-events:none;background:rgba(23,24,28,.94);color:var(--txt);border:1px solid rgba(252,227,0,.6);border-radius:999px;padding:4px 11px;font:600 12px/1.3 Inter,"Segoe UI",sans-serif;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.speed-badge.assumed{border-color:#f59e0b;color:#fcd34d}
.speed-badge.none{border-color:var(--line);color:var(--mut);font-weight:500}

/* narrow windows: keep the toolbar clear of the brand panel */
@media (max-width:1240px){#search{width:140px}}
@media (max-width:1180px){#tb{left:328px;transform:none}}

/* properties panel: section heading + button row */
.pp-sec{margin-top:4px;padding-top:10px;border-top:1px solid var(--line);font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}
.pp-btns{display:flex;gap:6px}
.pp-note{font-size:11px;line-height:1.45;color:var(--mut)}
.pp-taper b{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums}
.tp-ck{display:flex}.tp-ck.ok{color:#22c55e}.tp-ck.short{color:#f97316}
.tp-need{margin-top:-4px;font-size:11px;color:#f97316;text-align:right}
.pp-btns button{flex:1;height:30px;padding:0 8px;justify-content:center;font-size:12px}

/* bus stops + toggle */
.bus-stop{position:absolute;transform-origin:0 0;width:20px;height:20px;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));z-index:4}
.bus-stop svg{display:block}
.bm-sep{width:1px;align-self:stretch;margin:4px 3px;background:var(--line)}
#stopsBtn{padding:0;width:34px;min-width:34px;justify-content:center}
#stopsBtn svg{flex:none;width:22px;height:22px}
#stopsBtn:not(.on) svg{filter:grayscale(1);opacity:.55}