/* RENAME / GAUGE / IMPORT / RUN-EDIT / ADD-FIXTURES */
#rnOv,#gaugeOv,#importOv,#runEditOv,#addFxOv{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:250}
#rnOv.show,#gaugeOv.show,#importOv.show,#runEditOv.show,#fxOv.show,#apiOv.show,#addFxOv.show{display:flex !important}
#addFxBox{background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:18px 20px;width:320px}
#addFxBox h3{font-size:13px}
#addFxBox .afxLbl{display:block;font-size:10px;color:var(--sub);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px;font-family:var(--font)}
#addFxBox select.mfi{width:100%}
#rnBox{background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:18px 20px;width:300px}
#rnBox h3,#gaugeBox h3,#importBox h3,#runEditBox h3{font-size:13px;margin-bottom:10px}
#rnIn{width:100%;padding:6px 9px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);color:var(--text);font-size:12px;outline:none;margin-bottom:10px}
#rnIn:focus{border-color:var(--gold-dim)}
#gaugeBox{background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:18px 20px;width:340px}
.gopts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.gopt{padding:8px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);cursor:pointer;text-align:center;transition:all .12s}
.gopt:hover{border-color:var(--bg)}
.gopt.sel{border-color:var(--gold);background:var(--gold-faint)}
.gopt .gawg{font-family:var(--font);font-size:14px;color:var(--gold);font-weight:600}
.gopt .ginfo{font-size:10px;color:var(--sub);margin-top:2px}

#runEditBox{background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:20px;width:380px}

#importBox{background:var(--surf);border:1px solid var(--bg);border-radius:var(--r);padding:20px;width:400px}
.import-zone{border:2px dashed var(--b2);border-radius:var(--rs);padding:24px;text-align:center;cursor:pointer;transition:all .12s;margin-bottom:10px}
.import-zone:hover,.import-zone.over{border-color:var(--gold-dim);background:var(--gold-faint)}
#importFile{display:none}

/* FX MODAL */
#fxOv{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px)}
#fxBox{background:var(--surf);border:1px solid var(--bg);border-radius:14px;padding:22px;width:450px;max-width:93vw;max-height:88vh;overflow-y:auto}
#fxBox h2{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.fxpreview{background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);padding:10px;margin:10px 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center}
.fxpreview .pv{font-family:var(--font);font-size:14px;color:var(--gold);font-weight:600}
.fxpreview .pl{font-size:10px;color:var(--sub);margin-top:2px}

/* Inline group adder (sleek replacement for prompt) */
#grpAddInline{display:none;padding:8px 9px;border:1px dashed var(--gold-dim);border-radius:var(--rs);background:var(--gold-faint);margin:0;text-align:left}
#grpAddInline.show{display:flex;gap:5px;align-items:center}
#grpAddInline input{flex:1;padding:4px 8px;background:var(--panel);border:1px solid var(--b1);border-radius:var(--rs);color:var(--text);font-size:11px;outline:none}
#grpAddInline input:focus{border-color:var(--gold)}

.empty{text-align:center;padding:28px 14px;color:var(--dim);font-size:11px;line-height:1.8}
.eico{font-size:22px;opacity:.25;margin-bottom:8px}

/* fixture place hint — V11.1: cover Google's overlay children too, so hovering a
   polyline/fixture during placement can't flip the cursor to hand/pointer */
.placingMode #map,.placingMode #map *{cursor:crosshair !important}
.moveMode #map{cursor:move !important}
.labelMode #map{cursor:text !important}

/* V10.3 — Active-group emphasis is on the BORDER + outline, not the background, so the
   group's color keeps showing through. (Old rules overrode .grow background with a flat
   gold tint and the user lost the group color.) */
.grp.active .gin{color:#fff;font-weight:700;text-shadow:0 0 6px rgba(0,0,0,.5)}

/* Selected layer row stays highlighted */
.lr.selected,.mr.selected{background:rgba(74,142,217,.18) !important;outline:1px solid rgba(74,142,217,.55)}

/* Segment row hover sync */
.srow.hovered,.lr.hovered,.mr.hovered{background:rgba(255,255,255,.10) !important;outline:1px solid rgba(255,255,255,.3)}

/* Bigger color palette to fit more swatches */
#cpop{width:184px}
/* V10.3 — Single right-side control stack: gear / + / − / 3D / compass-rotate.
   Replaces the split layout from V10.2. Everything is our own buttons so Google's
   bundled controls can't fight us for positioning. Compass rotates with map heading. */
#mapZoom{position:absolute;bottom:80px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:50;pointer-events:auto}
#mapZoom button,#mapZoom .mzBtn{width:40px;height:40px;border:none;background:#fff;color:#5e5e5e;font-size:18px;font-weight:600;cursor:pointer;line-height:1;padding:0;font-family:'Roboto',Arial,sans-serif;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;transition:color .12s}
#mapZoom button:hover,#mapZoom .mzBtn:hover{color:#000}
#mapZoom button:active,#mapZoom .mzBtn:active{background:#e8e8e8}
#mapZoom button svg,#mapZoom .mzBtn svg{width:20px;height:20px;display:block;transition:transform .2s ease}
#mapZoom .mzBtn.on{color:#1a73e8}
/* Compass needle inherits map heading via a transform set from JS. */
#mzCompass svg{will-change:transform}
/* Separator (subtle) between stack groups */
#mapZoom .mzSep{height:8px}
/* V11 — active highlight now also targets the plain <button> controls in the stack.
   Previously scoped to .mzBtn only, so the 3D "on" glow never actually appeared. */
#mapZoom button.on,#mapZoom .mzBtn.on{color:#1a73e8;box-shadow:0 0 0 2px rgba(26,115,232,.55),0 1px 4px rgba(0,0,0,.3)}
/* V11 — brief "checking for 45° imagery…" pulse right after the 3D button is pressed. */
#b3D.pending{color:#1a73e8;animation:b3dpulse 1s ease-in-out infinite}
@keyframes b3dpulse{0%,100%{box-shadow:0 1px 4px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 3px rgba(26,115,232,.45),0 1px 4px rgba(0,0,0,.3)}}
/* V11 — honest disabled state for rotate / tilt / compass when 3D isn't active (or 45°
   imagery isn't available here). Clearly non-interactive instead of a silent no-op. */
#mapZoom button.disabled,#mapZoom .mzBtn.disabled{color:#c6c6c6;cursor:not-allowed;opacity:.6;box-shadow:0 1px 3px rgba(0,0,0,.16)}
#mapZoom button.disabled:hover,#mapZoom .mzBtn.disabled:hover{color:#c6c6c6}
#mapZoom button.disabled:active,#mapZoom .mzBtn.disabled:active{background:#fff}

/* V11 — transient, non-blocking toast messages (e.g. "45° 3D isn't available here"). */
#toastWrap{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(20,23,27,.95);color:#f4f1e9;border:1px solid var(--b1);border-left:3px solid var(--gold);padding:9px 15px;border-radius:7px;font-family:var(--font);font-size:12.5px;line-height:1.35;box-shadow:0 6px 22px rgba(0,0,0,.45);max-width:min(86vw,430px);opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease}
.toast.show{opacity:1;transform:translateY(0)}
.toast.warn{border-left-color:var(--red)}
.toast.ok{border-left-color:var(--green)}

/* V11 — persistent "save failed" warning pill in the header (data-loss guard). */
.savewarn{display:none;align-items:center;gap:6px;font-family:var(--font);font-size:10px;font-weight:600;color:#fff;background:var(--red);border:1px solid rgba(255,255,255,.28);padding:3px 9px;border-radius:4px;cursor:pointer;white-space:nowrap;animation:savewarnpulse 1.7s ease-in-out infinite}
.savewarn.show{display:inline-flex}
@keyframes savewarnpulse{0%,100%{box-shadow:0 0 0 0 rgba(217,83,63,.55)}50%{box-shadow:0 0 0 5px rgba(217,83,63,0)}}

/* V10.1 — While Shift is held, neutralise interactive controls inside the layers panel so
   the user can swipe across multiple rows to box-select without accidentally focusing an
   input or hitting a delete/eye/edit icon. */
body.shiftHeld #lwrap input,
body.shiftHeld #lwrap button,
body.shiftHeld #lwrap .lic,
body.shiftHeld #lwrap .del,
body.shiftHeld #lwrap .vis,
body.shiftHeld #lwrap .cdt,
body.shiftHeld #lwrap .gdot,
body.shiftHeld #lwrap .chev,
body.shiftHeld #lwrap .sfx,
body.shiftHeld #lwrap .opaRow{pointer-events:none !important}
body.shiftHeld #lwrap .lr,
body.shiftHeld #lwrap .mr,
body.shiftHeld #lwrap .fxr,
body.shiftHeld #lwrap .srow,
body.shiftHeld #lwrap .grow{user-select:none;cursor:cell}

/* V10.1 — White, Google-style settings popup for pan/zoom speed (anchored to gear button) */
#panZoomPop{position:absolute;background:#fff;color:#3c4043;border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.25);padding:14px 16px;z-index:120;display:none;width:240px;font-family:Roboto,Arial,sans-serif}
#panZoomPop.show{display:block}
#panZoomPop h4{font-size:13px;font-weight:600;margin:0 0 12px;color:#202124;letter-spacing:0}
#panZoomPop .pzRow{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#panZoomPop .pzLbl{flex:1;font-size:12px;color:#3c4043;font-weight:500}
#panZoomPop .pzVal{font-family:var(--font);font-size:12px;color:#1a73e8;font-weight:700;min-width:14px;text-align:right}
#panZoomPop input[type=range]{flex:0 0 100px;accent-color:#1a73e8;margin:0}
#panZoomPop .pzKeys{margin-top:10px;padding-top:10px;border-top:1px solid #e8eaed;font-size:11px;color:#5f6368;line-height:1.6}
#panZoomPop .pzKeys kbd{display:inline-block;background:#f1f3f4;border:1px solid #dadce0;border-radius:3px;padding:1px 5px;font-size:10px;font-family:Roboto Mono,monospace;color:#3c4043;margin:0 1px}

/* Help legend overlay */
#helpBtn{position:absolute;bottom:10px;left:10px;width:32px;height:32px;border-radius:50%;background:rgba(20,24,28,.92);border:1px solid var(--bg);color:var(--gold);font-weight:700;font-size:15px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}
#helpBtn:hover{background:var(--gold);color:#0D0F11}
#helpOv{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px)}
#helpOv.show{display:flex}
#helpBox{background:var(--surf);border:1px solid var(--bg);border-radius:14px;padding:26px 26px 20px;width:640px;max-width:94vw;max-height:88vh;overflow-y:auto;color:var(--text)}
#helpBox h2{font-size:19px;font-weight:600;margin-bottom:4px;color:var(--gold);letter-spacing:.01em;display:flex;align-items:center;gap:8px}
#helpBox h2 svg{stroke:var(--gold)}
#helpBox .helpIntro{font-size:11.5px;color:var(--sub);margin-bottom:20px;line-height:1.55}
/* CARD = each major section. Strong visual break: panel background, padding, rounded. */
#helpBox .helpCard{background:var(--panel);border:1px solid var(--b1);border-radius:10px;padding:14px 16px 12px;margin-bottom:14px}
#helpBox .helpCard:last-of-type{margin-bottom:0}
#helpBox .helpCardHd{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:12.5px;font-weight:600;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--b1);letter-spacing:.02em}
#helpBox .helpCardHd svg{stroke:var(--gold);flex-shrink:0}
#helpBox .helpCardHd .helpHdIcon{width:22px;height:22px;border-radius:5px;background:var(--gold-faint);border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0}
#helpBox .helpCardHd .helpHdIcon svg{stroke:var(--gold);width:13px;height:13px}
#helpBox .helpRow{display:flex;gap:10px;padding:7px 0;font-size:12px;line-height:1.5;align-items:flex-start}
#helpBox .helpRow + .helpRow{border-top:1px solid var(--b0)}
#helpBox .helpRow .helpRowIcn{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold);margin-top:1px}
#helpBox .helpRow .helpRowIcn svg{stroke:currentColor;width:14px;height:14px}
#helpBox .helpRow b{color:var(--text);font-weight:600;min-width:88px;max-width:88px;flex-shrink:0;display:inline-block}
#helpBox .helpRow span.htxt{flex:1;color:var(--sub)}
#helpBox .helpNote{font-size:11px;color:var(--sub);line-height:1.55;margin:0;padding:10px 14px;background:var(--panel2);border-left:3px solid var(--gold);border-radius:0 6px 6px 0}
#helpBox .helpFooter{margin-top:18px;padding-top:14px;border-top:1px solid var(--b1);display:flex;gap:10px;align-items:center;justify-content:flex-end}
#helpBox p{font-size:11px;color:var(--sub);line-height:1.6;margin-bottom:10px}

/* Marker size slider in popup */
.sizeRow{display:flex;align-items:center;gap:8px;padding:6px 9px;font-size:11px;color:var(--sub)}
.sizeRow input[type=range]{flex:1;height:3px;accent-color:var(--gold)}
.sizeRow .szVal{font-family:var(--font);color:var(--gold);min-width:32px;text-align:right;font-size:10px}

/* Marquee select box */
#marquee{position:absolute;border:1.5px dashed var(--gold);background:rgba(201,168,76,.10);pointer-events:none;z-index:50;display:none}
/* Lasso freehand overlay (SVG fills the map area) */
#lasso{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:50;display:none}
#lasso path{fill:rgba(201,168,76,.18);stroke:#C9A84C;stroke-width:2;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;fill-rule:evenodd}
/* Lasso mode: override cursor on the entire map surface (including overlays) */
#map.lassoMode,#map.lassoMode *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><ellipse cx='18.5' cy='11' rx='11' ry='7' stroke='%23000' stroke-width='2.6' fill='none'/><circle cx='9.6' cy='16.8' r='3.2' stroke='%23000' stroke-width='2.6' fill='none'/><path d='M7.8 19.5 L4.6 24.8' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/><ellipse cx='18.5' cy='11' rx='11' ry='7' stroke='%23fff' stroke-width='1.2' fill='none'/><circle cx='9.6' cy='16.8' r='3.2' stroke='%23fff' stroke-width='1.2' fill='none'/><path d='M7.8 19.5 L4.6 24.8' stroke='%23fff' stroke-width='1.2' fill='none' stroke-linecap='round'/></svg>") 5 25,crosshair !important}

/* Make text in info areas brighter / white */
.gtag{color:#FFE082 !important;background:rgba(201,168,76,.15);font-weight:600}
.lft{color:#ECE8DE !important;font-weight:600}
.sft{color:#ECE8DE !important;font-weight:600;font-size:10px}
.sfx{color:#FFE082 !important;font-weight:600}
/* V1.14.0 — segment fixture chips: dashed invite when empty, soft pill when filled */
#lwrap .sfx{border-radius:9px;padding:1px 7px;font-size:9.5px;border:1px solid transparent;cursor:pointer}
#lwrap .sfx-empty{color:var(--sub) !important;font-weight:500;border:1px dashed var(--b2)}
#lwrap .sfx-empty:hover{color:var(--gold) !important;border-color:var(--gold-dim)}
#lwrap .sfx-full{background:rgba(255,224,130,.08);border-color:rgba(255,224,130,.22)}
#lwrap .srow .sft{font-variant-numeric:tabular-nums}
.lampmax{color:#FFE082 !important}

/* Label tool */
/* V1.16.0-beta.24 — flex-center the text so a TINY label's text sits in the MIDDLE of the
   min-height:24px box instead of hugging the top (grips are position:absolute → out of flow). */
/* V1.16.0-beta.34 — the label is pinned at the pane origin (left/top:0) and positioned with the
   `translate` CSS property in draw() (compositor, no per-frame layout reflow) instead of left/top.
   left/top reflowed the whole doc every frame, which under a heavy map starved the update and made
   the label lag/jitter vs the (compositor-driven) tiles + markers. */
.mapLabel{position:absolute;left:0;top:0;background:rgba(13,15,17,.6);color:#fff;padding:5px 11px;border-radius:4px;font-size:13px;cursor:move;border:2px solid transparent;user-select:none;pointer-events:auto;z-index:25;white-space:nowrap;min-width:36px;min-height:24px;box-sizing:border-box;text-align:center;display:flex;align-items:center;justify-content:center}
.mapLabel .lblTxt{display:inline-block;min-width:12px;min-height:1em;position:relative} /* V1.15 — an empty label keeps a visible, clickable box (it collapsed smaller than the cursor) */
/* V1.16.0-beta.25 — keep TRUE bold but stop the box/transform-outline resizing when Bold is
   toggled: a hidden ::after always lays out the text at weight 700, reserving that width so the
   visible (bold or not) text fits inside it. data-txt (set in JS) carries the current text. */
.mapLabel .lblTxt::after{content:attr(data-txt);font:inherit;font-weight:700;display:block;height:0;overflow:hidden;visibility:hidden;white-space:inherit;pointer-events:none}
.mapLabel:hover{border-color:var(--gold)}
/* V1.14.0 — while editing: no white selection ring, no UA focus outline — the only
   highlight is the blue text selection itself */
.mapLabel.editing{background:rgba(13,15,17,.95);border-color:transparent;cursor:text;outline:none;caret-color:#4A8ED9}
.mapLabel.editing .lblTxt{outline:none} /* V1.16.0 — the contenteditable SPAN drew the browser's white focus ring while typing */
.mapLabel.editing.selected{border-color:transparent !important;box-shadow:none !important;outline:none !important}
.mapLabel.editing::selection,.mapLabel.editing *::selection{background:rgba(74,142,217,.85);color:#fff}
/* V1.16.0 — selection no longer paints the border WHITE (it hid every border-color
   change you made while selected). Selected = transform box: dashed outline offset
   OUTSIDE the label (its own border stays visible) + the resize/rotate grips. */
/* V1.16.0-beta.30 — the label box scales with the map (2^(z-zref)), but its "chrome" — the
   selection outline, the resize/rotate handles and the solid border — must NOT balloon with it.
   draw() sets --igk = 1/scale on the element; multiplying the chrome's sizes/offsets by --igk
   counter-scales them so they render at a roughly constant on-screen size at any zoom. */
.mapLabel.selected{outline:dashed rgba(255,255,255,.8);outline-width:calc(1.5px*var(--igk,1));outline-offset:calc(3px*var(--igk,1))}
.mapLabel.selected [class^="lblGrip"]{display:block}
/* V1.12 — label grips (Edit mode): four corners scale, both sides set wrap width */
.mapLabel [class^="lblGrip"]{display:none;position:absolute;width:9px;height:9px;background:#fff;border:1.5px solid #0d0f11;border-radius:2px;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.5);transform:scale(var(--igk,1))}
.mapLabel .lblGripNW{left:-5px;top:-5px;cursor:nwse-resize}
.mapLabel .lblGripNE{right:-5px;top:-5px;cursor:nesw-resize}
.mapLabel .lblGripSW{left:-5px;bottom:-5px;cursor:nesw-resize}
.mapLabel .lblGripSE{right:-5px;bottom:-5px;cursor:nwse-resize}
.mapLabel .lblGripL{left:-5px;top:50%;transform:translateY(-50%) scale(var(--igk,1));cursor:ew-resize}
.mapLabel .lblGripR{right:-5px;top:50%;transform:translateY(-50%) scale(var(--igk,1));cursor:ew-resize}
/* V1.16.0 — rotate handle: blue circle above the label, with a thin stem */
.mapLabel .lblGripRot{left:50%;top:calc(-24px*var(--igk,1));transform:translateX(-50%) scale(var(--igk,1));width:13px;height:13px;border-radius:50%;background:#4A8ED9;border:1.5px solid #fff;cursor:grab}
.mapLabel .lblGripRot::after{content:'';position:absolute;left:50%;top:12px;width:1.5px;height:9px;background:rgba(255,255,255,.7);transform:translateX(-50%)}
body.moveMode .mapLabel [class^="lblGrip"]{display:block}

/* Run-card body uses click area in power calc */
.runCardHead{cursor:pointer}
.runCardHead:hover{background:rgba(255,255,255,.03)}
.rcTotals{font-size:11px !important}
.rcTotals b{font-size:12px}

/* Larger fixture card layout for image */
.fxCard{padding:10px 12px}
.fxCardHd{padding-top:2px}
.pcSecHd{padding-top:6px}

/* Add padding above + New Fixture button */
.pcSecHd .pcAdd{margin-top:4px}
.fxImgWrap:hover .fxImgRm{display:flex !important}
.pcSecHd .pcBtns{display:flex;gap:5px}
.pcSecHd .pcBtns button{background:transparent;color:var(--sub);border:1px solid var(--b1);padding:4px 9px;border-radius:4px;font-size:10px;cursor:pointer}
.pcSecHd .pcBtns button:hover{color:var(--gold);border-color:var(--gold-dim)}

/* segment label mode toggle (visible markers/segment labels) */
.segLabel{font-family:var(--font);font-size:10px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px rgba(0,0,0,.7);font-weight:600}
/* ── LAYERS PANEL ── (V11.1: #lwrap/.grp defined once in the LAYERS block above) */
.grow{display:flex;align-items:center;gap:6px;padding:7px 9px;background:rgba(255,255,255,.02);font-size:12px}
.grow .chev{cursor:pointer;color:var(--sub);transition:transform .15s;display:inline-flex}
.grow .vis{cursor:pointer;color:var(--sub);display:inline-flex}
.grow .vis:hover{color:var(--gold)}
.grow .gdot{width:11px;height:11px;border-radius:50%;cursor:pointer;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}
.grow .gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text);cursor:default;padding:2px 0}
/* V1.14.0 — group ☰ menu button: neutral hover (gold), unlike the red delete hover */
.grow .del.gmenu{color:var(--sub);border:1px solid var(--b1);border-radius:4px;padding:2px;background:var(--panel)} /* V1.15.1 — reads as a button */
.grow .del.gmenu:hover{color:var(--gold);background:rgba(201,168,76,.14)}
.grow .gin{flex:1;background:transparent;border:none;color:var(--text);font:600 12px var(--font);outline:none;padding:2px 4px;border-radius:3px}
.grow .gin:hover{background:rgba(255,255,255,.04)}
.grow .gin:focus{background:rgba(201,168,76,.08)}
.grow .gct{font-family:var(--font);font-size:10px;color:var(--dim);padding:2px 5px;background:rgba(255,255,255,.04);border-radius:3px}
.grow .del{cursor:pointer;color:var(--dim);display:inline-flex;padding:2px;border-radius:3px}
.grow .del:hover{color:var(--danger);background:rgba(217,83,63,.1)}
.gbod{padding:4px 8px 6px}
.empty{font-size:11px;color:var(--dim);padding:8px;text-align:center;font-style:italic}

.lr,.mr{display:flex;align-items:center;gap:3px;padding:5px 6px;border-radius:5px;margin-bottom:2px;background:rgba(255,255,255,.015);transition:background .12s;font-size:11px;cursor:default}
.lr .vis,.mr .vis,.grow .vis{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.lr:hover,.mr:hover{background:rgba(255,255,255,.05)}
.lr.selected,.mr.selected{background:rgba(201,168,76,.15);outline:1px solid rgba(201,168,76,.45)}
/* V1.16.0-beta.13 — no source-row dim during a reorder drag. The native drag ghost
   already shows the row you're moving; the .dragging opacity dim was redundant AND it
   was the leftover that lingered on the OLD slot at release (the row that shifts up into
   that slot then looked like it "held the dim"). The gold insertion line shows the target;
   the dropped row's cpDropSettle gives the landing feedback. */
.lr.dropOver,.mr.dropOver{background:rgba(201,168,76,.25)}
.lr .hdl,.mr .hdl{cursor:grab;color:var(--dim);display:inline-flex;padding:0 2px}
.lr .hdl:hover,.mr .hdl:hover{color:var(--gold)}
/* V1.15 — marker/label row dropdowns */
.rowSub{padding:2px 8px 5px 30px;font-size:10px;color:var(--sub);cursor:pointer;user-select:none}
.rowSub:hover{color:var(--text)}
.lblStyleRow{display:flex;align-items:center;gap:7px;padding:3px 8px 6px 30px;flex-wrap:wrap}
/* V1.16.0 — bigger, readable style buttons (were 20px / 11px) */
.lsb{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--b1);border-radius:5px;font-size:13px;font-weight:700;cursor:pointer;color:var(--sub);background:var(--panel);transition:all .1s}
/* V1.16.0 — labeled color BUTTONS replace the three indistinguishable 9px dots */
.lcb{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--b1);border-radius:5px;font-size:10.5px;cursor:pointer;color:var(--text);background:var(--panel);transition:all .1s;user-select:none}
.lcb:hover{border-color:var(--gold-dim)}
.lcb i{width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.25);display:inline-block;flex-shrink:0}
/* V1.16.0 — "no color" swatch: white circle with a red cross-out */
.cpsw.cpnone{background:#fff !important;position:relative;overflow:hidden}
.cpsw.cpnone::after{content:'';position:absolute;left:-15%;top:calc(50% - 1px);width:130%;height:2px;background:#d9534f;transform:rotate(-45deg)}
.lsb:hover{border-color:var(--bgh)}
.lsb.on{border-color:var(--gold);color:var(--gold);background:var(--gold-faint)}
.lsb.i{font-style:italic}
.lsb.u{text-decoration:underline}
/* V1.15 — while a row/group drag is live, rows sliding under the pointer (auto-scroll,
   insert-line shifts) must not flash their hover styles / gold handles */
body.rowDragging .lr .hdl,body.rowDragging .mr .hdl{color:var(--dim) !important}
/* V1.16.0-beta.17 — after a DROP, keep grips at their normal dim until the pointer really
   moves, so the native stuck :hover can't leave a grip lit at the spot you dragged from.
   Grips are dim by default → this is invisible; and unlike the drag mask it does NOT touch
   row backgrounds, so hovering a row never darkens it (that was beta.16's fix — keep it). */
body.postDrop .lr .hdl,body.postDrop .mr .hdl{color:var(--dim) !important}
/* V1.16.0-beta.15 — was `background:transparent`, which is DARKER than a normal row's base
   tint (rgba(255,255,255,.015)). After a native drag the grabbed row keeps a stuck :hover
   (Chromium doesn't re-evaluate hover until the next real pointer move), so that transparent
   override made the source row look DARK "at the place I dragged from" until I moved. Match
   the normal base tint instead → a suppressed-hover row is indistinguishable from its peers. */
body.rowDragging .lr:hover,body.rowDragging .mr:hover{background:rgba(255,255,255,.015)}
/* V1.16.0-beta.13 — source drag-dim removed (see note above); groups no longer dim either. */
/* V1.16.0-beta.12 — "landed" settle: the row you just dropped briefly dims and eases back
   to full opacity AT ITS NEW POSITION, so the drop feedback follows the item you moved
   instead of lingering on the old slot (now occupied by the row that shifted up). */
.lr.dropSettle,.mr.dropSettle,.grp.dropSettle > .grow{animation:cpDropSettle .6s ease-out}
@keyframes cpDropSettle{0%{opacity:.28}25%{opacity:.32}60%{opacity:.6}100%{opacity:1}}
.lr .vis,.mr .vis{cursor:pointer;color:var(--sub);display:inline-flex}
.lr .vis:hover,.mr .vis:hover{color:var(--gold)}
.lr .chev{cursor:pointer;color:var(--sub);transition:transform .15s;display:inline-flex}
.cdt{width:9px;height:9px;border-radius:50%;cursor:pointer;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}
.lin{flex:1;background:transparent;border:none;color:var(--text);font:500 11px var(--ui);outline:none;padding:2px 4px;border-radius:3px;min-width:0}
input.lin:focus{background:rgba(201,168,76,.10);box-shadow:inset 0 0 0 1px var(--gold-dim)}
/* V1.14.0 — names are plain text until an explicit rename (dblclick / right-click) */
span.lintxt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
span.lintxt.dimtxt{color:var(--dim);font-style:italic}
/* V1.16.0-beta.36 — feeder-cable titles get a purple outline in the group panel so a feeder
   run reads at a glance (matches the FEEDER badge + the feeder cable color #a06bff). */
span.lintxt.feederTitle{border:1px solid #a06bff;color:#c498ff;background:rgba(160,107,255,.10);padding:1px 5px;flex:0 1 auto;margin-right:auto}
.gtag{font-family:var(--font);font-size:9px;color:var(--gold);padding:1px 5px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);border-radius:3px;white-space:nowrap}
.lft{font-family:var(--font);font-size:10px;color:var(--sub);white-space:nowrap}
.lic{cursor:pointer;color:var(--sub);padding:2px 4px;border-radius:3px;display:inline-flex;font-size:11px}
.lic:hover{color:var(--gold);background:rgba(201,168,76,.08)}
.lr .del,.mr .del{cursor:pointer;color:var(--dim);padding:2px;border-radius:3px;display:inline-flex}
.lr .del:hover,.mr .del:hover{color:var(--danger);background:rgba(217,83,63,.1)}
.micn{cursor:pointer;font-size:13px;line-height:1;width:18px;text-align:center}

/* V11.3.7 — project browser keyboard highlight */
#projGrid .projCard.kbSel{outline:2px solid var(--gold);outline-offset:2px}
/* V1.16.0-beta.9 — hover highlight on project cards */
#projGrid .projCard{transition:border-color .12s ease,box-shadow .12s ease,transform .12s ease}
#projGrid .projCard:hover{border-color:var(--gold)!important;box-shadow:0 6px 20px rgba(0,0,0,.45);transform:translateY(-2px)}
/* V11.3.7 — collapsible Segments section + tighter segment rows */
/* V1.14.0 — Segments header reads as a compact control: quiet bordered row, whole
   row (chevron + text + count) toggles the dropdown */
.segHdr{display:flex;align-items:center;gap:6px;margin:3px 8px 2px 16px;padding:4px 8px;font-size:10px;color:var(--sub);cursor:pointer;user-select:none;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.03);border:1px solid var(--b0);border-radius:4px}
.segHdr:hover{color:var(--gold);border-color:var(--gold-dim);background:rgba(201,168,76,.06)}
.segHdr .chev{width:13px;height:13px;display:inline-flex;transition:transform .15s}
.segHdr .chev.open{transform:rotate(90deg)}
.segHdr .segCount{background:var(--panel3);border:1px solid var(--b1);border-radius:8px;padding:0 6px;font-family:var(--font);font-size:9px;color:var(--gold);line-height:14px}
#lwrap .srow{padding-top:3px;padding-bottom:3px}
#lwrap .srow .sin{font-size:11px;padding:2px 4px}
#lwrap .segGrp{margin:2px 8px 2px 16px} /* V1.15 — same insets as .segHdr: the Segments button and its dropdown now share one width */
.opaRow{display:flex;align-items:center;gap:8px;padding:5px 14px 5px 22px;font-size:10px;color:var(--sub)}
.opaRow>span:first-child{min-width:52px}
.opaRow .opaVal{min-width:34px;text-align:right;font-family:var(--font);color:var(--gold);font-size:9.5px}
/* V11.3.4 — polished slider: soft track, ringed thumb with hover growth */
/* V1.16.0-beta.41 — these inputs also carry class="runOpa", whose legacy CONTAINER rule
   (04-layers-panel.css) leaked `padding:5px 9px 5px 32px` + a top border onto the input —
   insetting the thumb's travel so it never reached the track ends (a 32px gap on the left,
   9px on the right). Force padding/border/margin to 0 so the thumb runs edge to edge. */
.opaRow input[type="range"]{flex:1;min-width:60px;height:4px;padding:0;margin:0;border:0;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,var(--bord),var(--bord));border-radius:3px;outline:none;transition:background .15s}
.opaRow input[type="range"]:hover{background:rgba(255,255,255,.18)}
.opaRow input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--gold);border:2px solid #0d0f11;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 1px 4px rgba(0,0,0,.5);border-radius:50%;cursor:pointer;transition:transform .12s}
.opaRow input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
.opaRow input[type="range"]::-moz-range-thumb{width:11px;height:11px;background:var(--gold);border:2px solid #0d0f11;border-radius:50%;cursor:pointer}
.opaRow input[type="range"]::-moz-range-track{height:4px;background:var(--bord);border-radius:3px}
.opaVal{font-family:var(--font);color:var(--gold);min-width:36px;text-align:right;flex-shrink:0}

/* Sidebar segment rows — uniform two-line layout that fits the 320px sidebar */
.segGrp{margin:5px 0;background:rgba(255,255,255,.025);border:1px solid var(--b1);border-left:2px solid var(--gold-dim);border-radius:4px;overflow:hidden}
.segGrp:hover{border-color:rgba(201,168,76,.35)}
.segGrp+.segGrp{margin-top:6px}
.segFxList{padding:3px 8px 5px 28px;background:rgba(0,0,0,.18);border-top:1px dashed rgba(255,255,255,.06)}
.segFxRow{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:10px;color:var(--sub);border-bottom:1px dotted rgba(255,255,255,.04)}
.segFxRow:last-child{border-bottom:none}
.srow{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:6px;padding:6px 8px 6px 12px;font-size:11px;min-width:0}
.srow .sin{grid-column:1;min-width:0;font-weight:600}
.srow .lic{grid-column:2;width:16px;text-align:center;flex-shrink:0}
.srow .sft{grid-column:3;font-family:var(--font);min-width:38px;text-align:right;flex-shrink:0;font-size:10px;color:var(--sub)}
.srow .del{grid-column:4;width:14px;text-align:center;flex-shrink:0}
.srow .sfx{grid-column:1 / -1;font-family:var(--font);font-size:10px;text-align:right;white-space:nowrap;padding:2px 6px;border-radius:3px;cursor:pointer;justify-self:end;margin-top:2px}
.srow .sfx-empty{border:1px dashed var(--gold-dim);color:var(--gold);background:transparent}
.srow .sfx-full{background:rgba(201,168,76,.15);color:#FFE082}
.srow:hover{background:rgba(255,255,255,.05)}
.srow .sin{flex:1 1 100px;min-width:80px}
.sin{flex:1;background:transparent;border:none;color:var(--text);font:500 10px var(--ui);outline:none;padding:1px 3px;border-radius:2px;min-width:0}
.sin:hover{background:rgba(255,255,255,.05)}
.sin:focus{background:rgba(201,168,76,.08)}
.sft{font-family:var(--font);font-size:9px;color:var(--dim);white-space:nowrap}
.sfx{font-family:var(--font);font-size:9px;color:var(--gold);white-space:nowrap;padding:1px 4px;background:rgba(201,168,76,.08);border-radius:2px}
.rsum{padding:6px 10px 4px 22px;font-size:13px;color:var(--sub)} /* V1.15 — lives above the sliders now; the dashed divider went with the bottom slot */
.rsumFeeder{padding:0 10px 5px 22px;font-size:10px;color:var(--sub);display:flex;align-items:center;gap:6px;cursor:pointer}
/* V1.15 — run total repeated at the FOOT of the segments dropdown (matches .segHdr insets) */
.segTotal{margin:2px 8px 6px 16px;padding:5px 8px;font-size:10px;font-family:var(--font);color:#FFE082;background:rgba(255,255,255,.02);border:1px solid var(--b0);border-radius:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.segTotal .segTotalFeeder{cursor:pointer;margin-left:auto}
.rsum b{color:var(--gold);font-family:var(--font);font-size:15px}

#addGrpRow{padding:6px 14px 12px;text-align:center}
/* V1.13.4 — sleeker, uniform Add Group: solid row-style button matching the group rows */
.agbtn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--panel);border:1px solid var(--bord);color:var(--sub);padding:8px 12px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.2px;cursor:pointer;width:100%;transition:all .15s}
.agbtn:hover{border-color:var(--gold-dim);color:var(--gold);background:var(--gold-faint)}

/* Drag insertion indicator: single floating gold line shown above .lr/.mr/.grp containers */
#dropLine{position:absolute;left:0;right:0;height:2px;background:var(--gold);pointer-events:none;z-index:120;display:none;border-radius:1px;box-shadow:0 0 6px rgba(201,168,76,.6)}
.lr.dropOver,.mr.dropOver,.grp.dropOver{background:transparent !important;outline:none !important}

/* When marquee/multi-select is active prevent layer-row text selection */
body.multiSelecting,body.multiSelecting *{user-select:none !important;-webkit-user-select:none !important}

/* When Cmd/Ctrl is held, disable interactive children inside layer rows so clicks go to row selection */
body.cmdHeld .lr *,body.cmdHeld .mr *{pointer-events:none !important}
body.cmdHeld .lr,body.cmdHeld .mr{cursor:default !important} /* V1.14.0 — was 'cell' (read as a crosshair) */
body.cmdHeld .lr:hover,body.cmdHeld .mr:hover{background:rgba(74,142,217,.18) !important;outline:1px dashed rgba(74,142,217,.55)}

/* ── COLOR & ICON POPUPS ── */
#cpop{position:fixed;display:none;flex-wrap:wrap;width:230px;padding:10px;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:9999;gap:6px;justify-content:center}
.cpsw{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:transform .12s}
.cpsw:hover{transform:scale(1.15);border-color:var(--gold)}
#ipop{position:fixed;display:none;grid-template-columns:repeat(6,32px);gap:4px;padding:8px;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rs);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:9999;width:232px;justify-content:center;box-sizing:border-box} /* V1.15 — same 6×32 grid as the Marker button menu (old 24px cells clipped emoji) */
.ipi{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:var(--rs);border:1px solid var(--b1);background:var(--panel);font-size:16px;line-height:1;transition:all .1s}
.ipi:hover{border-color:var(--bgh)}
/* V1.15.1 — the ➕ / 🖼️ ACTION cells read differently from plain icons */
.iopt-act{border-style:dashed !important;border-color:var(--gold-dim) !important;background:var(--gold-faint) !important}
.iopt-act:hover{border-color:var(--gold) !important}
.ig.igact{border:1px dashed var(--gold-dim);border-radius:4px;background:var(--gold-faint)}
.ipi:hover{background:rgba(201,168,76,.18)}
.cdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle;border:1px solid rgba(255,255,255,.45)}
.cpsw,.csw,.dc,.cp{border:2px solid rgba(255,255,255,.25) !important}
.cpsw:hover,.csw:hover,.dc:hover,.cp:hover{border-color:#fff !important}
/* V1.12 — the SELECTED swatch outshines hover: white core ring + gold glow + scale */
.cpsw.on,.csw.on,.dc.sel,.cp.sel{border-color:#fff !important;box-shadow:0 0 0 2px var(--gold),0 0 10px rgba(201,168,76,.75) !important;transform:scale(1.18)}
/* V1.12 — "Locate in Group" pulse on the revealed sidebar row */
@keyframes revealPulse{0%{box-shadow:0 0 0 0 rgba(201,168,76,0);background:rgba(201,168,76,0)}20%{box-shadow:0 0 0 3px rgba(201,168,76,.65);background:rgba(201,168,76,.30)}60%{box-shadow:0 0 0 2px rgba(201,168,76,.30);background:rgba(201,168,76,.10)}100%{box-shadow:0 0 0 0 rgba(201,168,76,0);background:transparent}}
#lwrap .revealPulse{animation:revealPulse .95s ease-out 2;border-radius:6px}

/* ── CONTEXT MENU ── */
#ctx{position:fixed;display:none;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rs);box-shadow:0 12px 32px rgba(0,0,0,.6);z-index:10000;min-width:210px;padding:5px;font-size:12px}
.cx-it{padding:7px 11px;cursor:pointer;border-radius:4px;color:var(--text);transition:background .1s;position:relative;display:flex;align-items:center}
.cx-it:hover{background:rgba(201,168,76,.18)}
.cx-it.cx-title{cursor:default !important;background:transparent !important;border-bottom:1px solid var(--bord);margin-bottom:3px}
.cx-it.cx-title:hover{background:transparent !important}
.cx-it.danger{color:var(--danger)}
.cx-it.danger:hover{background:rgba(217,83,63,.15)}
/* V11.1 — section headers + kind badges + title subtitle for the unified run menu */
.cx-hdr{padding:7px 11px 3px;font-size:9px;color:var(--gold-dim);font-family:var(--font);letter-spacing:.14em;text-transform:uppercase;user-select:none}
.cx-badge{margin-left:auto;flex-shrink:0;font-family:var(--font);font-size:8.5px;letter-spacing:.1em;padding:2px 6px;border-radius:3px;background:rgba(201,168,76,.16);color:var(--gold);border:1px solid rgba(201,168,76,.3)}
.cx-badge.feeder{background:rgba(160,107,255,.14);color:#b895f5;border-color:rgba(160,107,255,.35)}
.cx-titleSub{font-size:10px;color:var(--sub);font-family:var(--font)}
.cx-it.has-sub::after{content:'›';margin-left:auto;color:var(--sub);font-size:14px;font-weight:600}
/* V11.1 — submenu opens via JS hover-intent (.open) with a :hover fallback, and the
   old 2px dead gap is bridged with overlapping padding so a slow diagonal move from
   the parent row onto the submenu can no longer make it vanish mid-travel. */
.cx-it.has-sub:hover .cx-sub,.cx-it.has-sub.open .cx-sub{display:block}
/* V11.3 — wider + nowrap so long rows ("Edit (Scale / Rotate / Move)", "Add Fixtures
   to Run…") fit on one line instead of wrapping mid-word */
/* V1.16.0-beta.59 — submenu sits FLUSH against the parent (no dead gap) so a diagonal move onto
   it can't fall through a 2px void; the JS hover-intent handles crossing sibling rows. */
.cx-sub{display:none;position:absolute;left:100%;top:-4px;padding:5px;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rs);box-shadow:0 12px 32px rgba(0,0,0,.6);min-width:200px;max-height:300px;overflow-y:auto;background-clip:padding-box}
.cx-sub .cx-it{white-space:nowrap}
/* V10.2 — when the parent ctx menu was opened near the right edge, the submenu flips
   to the left so it isn't cut off. JS sets .flipL on the hovered .cx-it. */
.cx-it.flipL .cx-sub{left:auto;right:100%}
.cx-it.flipUp .cx-sub{top:auto;bottom:0}
.cx-sep{height:1px;background:var(--bord);margin:4px 6px}
/* ── POWER CALCULATOR ── */
#ledPanel,#fxLibPanel{padding:0 14px;overflow:auto}
.pcSec{margin-bottom:14px}
.pcSecHd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bord)}
.pcSecHd h3{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin:0}
.pcAdd{background:var(--gold);color:var(--dark);border:none;padding:5px 11px;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer}
.pcAdd:hover{background:#d8b85c}
.pcHint{font-size:10px;color:var(--dim);font-style:italic}
.pcEmpty{padding:14px;text-align:center;font-size:11px;color:var(--dim);font-style:italic;background:var(--panel);border:1px dashed var(--bord);border-radius:var(--rs)}

.fxGrid{display:grid;grid-template-columns:1fr;gap:7px}
.fxCard{background:var(--panel);border:1px solid var(--bord);border-radius:6px;padding:8px 10px;transition:border-color .12s}
.fxCard:hover{border-color:var(--gold-dim)}
.fxCardHd{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.fxIcon{color:var(--gold);display:inline-flex}
.fxNameIn{flex:1;background:transparent;border:none;color:var(--text);font:600 12px var(--ui);outline:none;padding:2px 4px;border-radius:3px}
.fxNameIn:hover{background:rgba(255,255,255,.04)}
/* V1.14.0 — fixture library overhaul: compact two-line specs + placed badge */
.fxSpecs{font-size:10px;color:var(--sub);font-family:var(--font);line-height:1.5}
.fxSpecs b{color:var(--text)}
.fxSpecs2{display:flex;align-items:center;gap:8px;font-size:10px;font-family:var(--font)}
.fxAmps{color:#FFE082;font-weight:700}
.fxPlaced{margin-left:auto;padding:1px 7px;border-radius:8px;border:1px solid var(--b1);color:var(--dim);font-size:9px}
.fxPlaced.on{color:#FFE082;border-color:rgba(255,224,130,.3);background:rgba(255,224,130,.07)}
/* V1.14.0 — uniform toolbar buttons in the library / calculator headers */
.pcBtns{display:flex;align-items:center;gap:6px}
.pcBtns button{background:var(--panel);border:1px solid var(--bord);color:var(--sub);padding:5px 10px;border-radius:4px;font-size:10.5px;font-weight:600;cursor:pointer;transition:all .12s}
.pcBtns button:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--gold-faint)}
.pcBtns button.pcAdd{background:var(--gold);border-color:var(--gold);color:#0d0f11}
.pcBtns button.pcAdd:hover{background:#d8b85c;color:#0d0f11}
.pcSum{font-family:var(--font);font-size:10px;color:var(--sub);white-space:nowrap}
.pcSum b{color:var(--gold)}
/* V1.14.0 — calculator segment rows: quiet bordered blocks, tabular numbers */
.runSegRow{padding:6px 8px;background:rgba(255,255,255,.02);border:1px solid var(--b0);border-radius:4px;margin-bottom:5px}
.runSegRow .rsName{background:transparent;border:none;color:var(--text);outline:none;padding:1px 3px;border-radius:3px}
.runSegRow .rsName:focus{background:rgba(201,168,76,.10);box-shadow:inset 0 0 0 1px var(--gold-dim)}
.runSegRow .rsLen,.runSegRow .rsAmp,.rsFxA{font-variant-numeric:tabular-nums}
.runSegRow .rsAmp{color:var(--gold);font-weight:600}
.runSegRow .rsAmp.over{color:var(--danger)}
.rsX:hover{color:var(--danger) !important}
.fxNameIn:focus{background:rgba(201,168,76,.08)}
.fxEdit,.fxDel{cursor:pointer;color:var(--sub);padding:3px;border-radius:3px;display:inline-flex}
.fxEdit:hover{color:var(--gold);background:rgba(201,168,76,.08)}
.fxDel:hover{color:var(--danger);background:rgba(217,83,63,.1)}
.fxStats{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--sub);font-family:var(--font)}
.fxAmpTag{margin-left:auto;color:var(--gold);font-weight:600}

.runCard{background:var(--panel);border:1px solid var(--bord);border-radius:var(--rs);margin-bottom:8px;overflow:hidden}
.runCard.over{border-color:var(--danger);box-shadow:0 0 0 1px rgba(217,83,63,.4)}
.runCard.pcSelected{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,168,76,.4)}
.runCard.pcDragOver{border-top:3px solid var(--gold)}
.runCardHead{display:flex;align-items:center;gap:7px;padding:10px 14px}
.rcName{flex:1;font-size:12px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin,.gin,.rsName{overflow:hidden;text-overflow:ellipsis}
.rcTotals{font-family:var(--font);font-size:10px;color:var(--sub)}
.rcTotals b{color:var(--gold)}
.rcEdit{cursor:pointer;color:var(--sub);padding:3px;border-radius:3px;display:inline-flex}
.rcEdit:hover{color:var(--gold);background:rgba(201,168,76,.08)}
.rcBar{position:relative;height:5px;background:rgba(255,255,255,.05);margin:0 10px 6px;border-radius:3px;overflow:hidden}
.rcBarFill{height:100%;background:linear-gradient(90deg,var(--gold) 0%,#d8b85c 100%);transition:width .25s}
.rcBarFill.over{background:linear-gradient(90deg,var(--danger) 0%,#ff8a5b 100%)}
.rcBarLbl{position:absolute;right:0;top:7px;font-size:9px;color:var(--dim);font-family:var(--font)}
.runCardBody{padding:6px 10px 10px;border-top:1px solid var(--bord);background:rgba(255,255,255,.015)}
.runSegRow{margin:6px 0;padding:8px 10px;background:rgba(255,255,255,.025);border:1px solid var(--bord);border-radius:5px;overflow:hidden}
.runSegRow .rsName{font-size:12px;font-weight:600;color:var(--text)}
.runSegRow .rsLen{font-family:var(--font);font-size:11px;color:var(--sub)}
.runSegRow .rsAmp{font-family:var(--font);font-size:11px;font-weight:600}
.rsHd{display:flex;align-items:center;gap:6px}
.rsName{flex:1;background:transparent;border:none;color:var(--text);font:500 11px var(--ui);outline:none;padding:2px 4px;border-radius:3px}
.rsName:hover{background:rgba(255,255,255,.05)}
.rsName:focus{background:rgba(201,168,76,.08)}
.rsLen{font-family:var(--font);font-size:10px;color:var(--dim)}
.rsAmp{font-family:var(--font);font-size:10px;color:var(--gold);padding:1px 5px;background:rgba(201,168,76,.1);border-radius:3px}
.rsAmp.over{color:var(--danger);background:rgba(217,83,63,.1)}
.rsAdd{background:transparent;border:1px dashed var(--bord);color:var(--sub);padding:3px 9px;border-radius:3px;font-size:9px;cursor:pointer;white-space:nowrap;flex-shrink:0;height:22px}
.rsAdd:hover{border-color:var(--gold);color:var(--gold)}
.runSegRow{min-height:36px}
.runSegRow .rsHd{align-items:center}
.runSegRow .rsHd .rsLen{min-width:54px;text-align:right;flex-shrink:0}
.runSegRow .rsHd .rsAmp{min-width:62px;text-align:right;flex-shrink:0}
.runSegRow .rsHd .rsAdd{min-width:90px;text-align:center}
.rsFxList{margin-top:6px;padding-left:10px;border-left:1px solid var(--bord)}
.rsFxItem{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:10px;color:var(--sub)}
.bulbic{color:var(--gold);display:inline-flex}
.rsFxA{margin-left:auto;color:var(--gold);font-family:var(--font)}
.rsX{cursor:pointer;color:var(--dim);padding:0 4px;border-radius:2px;font-size:13px;line-height:1}
.rsX:hover{color:var(--danger);background:rgba(217,83,63,.1)}

.gaugeTbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--bord);border-radius:var(--rs);overflow:hidden;font-size:11px}
.gaugeTbl th,.gaugeTbl td{padding:6px 9px;text-align:left;border-bottom:1px solid var(--bord)}
.gaugeTbl th{background:rgba(201,168,76,.08);color:var(--gold);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.gaugeTbl td{color:var(--sub);font-family:var(--font)}
.gaugeTbl tr:last-child td{border-bottom:none}
/* swatches in dialog */
.csw{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.1);transition:transform .12s}
.csw:hover{transform:scale(1.18)}
.csw.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,76,.3)}
.ig{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;font-size:15px;background:rgba(255,255,255,.04);line-height:1;text-align:center;flex-shrink:0;vertical-align:middle}
.igrid{display:grid !important;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:6px 12px 6px 6px;width:100%}
.ig:hover{background:rgba(201,168,76,.18)}