/* LAYERS — V11.1: single canonical #lwrap/.grp rules (duplicates further down removed).
   Small top padding so the first group clears the filter row. */
#lwrap{flex:1;overflow:auto;scrollbar-gutter:stable;padding:4px 14px 8px;max-height:calc(100vh - 320px)}
#lwrap::-webkit-scrollbar{width:3px}
#lwrap::-webkit-scrollbar-thumb{background:var(--b2);border-radius:2px}
#lwrap::-webkit-scrollbar-track{background:transparent}

.grp{margin-bottom:6px;border:1px solid var(--bord);border-radius:var(--rs);background:var(--panel);overflow:hidden;position:relative}
.grp.dragover{border-color:var(--gold)}
/* V10.3 — Group color is the *whole box*, not a gradient. The header row stays a touch
   more saturated; the body gets a slightly fainter tint so items inside read as part of
   the same color "family". Active group ADDS a gold ring but keeps the color. */
.grp{--gcolor:var(--gold)}
.grp .grow{background:color-mix(in srgb,var(--gcolor) 22%,var(--panel))}
.grp .gbod{background:color-mix(in srgb,var(--gcolor) 6%,var(--panel2))}
.grp .gbod>.lr,.grp .gbod>.mr,.grp .gbod>.segGrp{background:color-mix(in srgb,var(--gcolor) 10%,rgba(255,255,255,.015))}
/* V11.1 — inset ring instead of outset shadow: the old glow was clipped by #lwrap's
   scroll overflow (top group) and by parent .grp{overflow:hidden} (subgroups). */
.grp.active{box-shadow:inset 0 0 0 2px var(--gold);border-color:var(--gold)}
.grp.active .grow{background:color-mix(in srgb,var(--gcolor) 32%,var(--panel))}
/* V10.3 — Subgroups: nested in DOM, distinct via a thicker left color bar and a slight
   indent of the gbod. Header row gets the parent color even after nesting. */
.grp .gbod>.grp{margin:6px 0 4px 0;border-radius:var(--rs);border-left-width:4px}
.grp .gbod>.grp>.grow{padding-left:10px}
.grp.collapsed>.gbod{display:none}
/* Drag-hover indicator on group containers (drop-INTO target) */
.grp.dropTarget>.grow{outline:2px dashed var(--gold);outline-offset:-2px;background:color-mix(in srgb,var(--gold) 28%,var(--panel))}
.grph{display:flex;align-items:center;gap:5px;padding:7px 9px;background:var(--panel);cursor:pointer;user-select:none}
.grpchev{flex-shrink:0;color:#fff;transition:transform .15s;width:14px;height:14px;display:flex;align-items:center;justify-content:center}
.grpchev.open{transform:rotate(90deg)}
.grpname{flex:1;background:transparent;border:none;color:var(--text);font-size:12px;font-weight:500;outline:none;cursor:pointer;min-width:0;font-family:var(--ui)}
.grpname:focus{background:rgba(255,255,255,.05);border-radius:3px;padding:1px 4px;cursor:text}
.grpcnt{font-family:var(--font);font-size:10px;color:var(--sub);white-space:nowrap;flex-shrink:0}
.grpbody{background:var(--panel2);display:none}
.grpbody.open{display:block}
.grpfoot{padding:5px 8px;border-top:1px solid var(--b1);background:var(--panel2);display:flex;gap:5px;flex-wrap:wrap}

/* + Group button outside groups */
#addGrpRow{padding:7px 8px}
/* V1.13.4 — inherits the uniform .agbtn row style (solid, full-width); size tweak only */
#addGrpRow .agbtn{font-size:10px;padding:7px 12px}

.lrow{display:flex;align-items:center;gap:5px;padding:5px 9px;border-top:1px solid var(--b0);transition:background .1s}
.lrow:hover{background:rgba(255,255,255,.025)}
.lrow.adraw{background:rgba(201,168,76,.07)}
.lrow.selrow{background:rgba(74,142,217,.10)}
.drag-h{cursor:grab;flex-shrink:0;color:var(--dim);display:flex;align-items:center}
.drag-h:hover{color:var(--sub)}
.ib{background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;display:flex;align-items:center;color:var(--sub);transition:color .12s}
.ib:hover{color:var(--text)}
.ib.del:hover{color:var(--red)}

/* Layer color dots — locked square */
.lcolor{width:11px;height:11px;min-width:11px;min-height:11px;max-width:11px;max-height:11px;border-radius:50%;flex-shrink:0;flex-grow:0;cursor:pointer;border:1px solid rgba(255,255,255,.25);display:inline-block;aspect-ratio:1/1;box-sizing:border-box;padding:0}
.lcolor:hover{transform:scale(1.4)}
.licon{font-size:13px;flex-shrink:0;cursor:pointer;line-height:1}
.lname{flex:1;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0}
.lname:hover{color:var(--gold)}
.lname.editing{background:rgba(255,255,255,.05);border-radius:3px;padding:1px 4px;cursor:text;outline:none}
.ldist{font-family:var(--font);font-size:10px;color:var(--gold);white-space:nowrap;flex-shrink:0}
.lchev{background:none;border:none;cursor:pointer;flex-shrink:0;color:#fff;display:flex;align-items:center;width:16px;height:16px;justify-content:center;transition:transform .15s}
.lchev.open{transform:rotate(90deg)}
.lgauge{font-family:var(--font);font-size:9px;color:var(--blue);white-space:nowrap;flex-shrink:0;cursor:pointer;padding:1px 4px;border-radius:3px;border:1px solid transparent}
.lgauge:hover{color:var(--text);border-color:var(--b1)}
.lampmax{font-family:var(--font);font-size:9px;color:var(--gold);white-space:nowrap;flex-shrink:0;opacity:.85}

/* Expanded run details */
.runDetails{padding:6px 9px 8px 32px;background:var(--panel2);border-top:1px solid var(--b0)}
.segItem{display:flex;align-items:center;gap:6px;padding:5px 0;border-top:1px dashed var(--b0);font-size:10px;color:#D0CCC2}
.segItem:first-child{border-top:none}
.segItem .segName{flex:1;font-family:var(--ui);font-size:10px;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;cursor:text;background:transparent;border:none;outline:none;padding:1px 2px;border-radius:2px}
.segItem .segName:focus{background:rgba(255,255,255,.04)}
.segItem .segMeta{font-family:var(--font);font-size:9px;color:var(--sub);white-space:nowrap}
.segItem .segLoad{font-family:var(--font);font-size:9px;color:var(--gold);white-space:nowrap}
.segItem .segCount{font-family:var(--font);font-size:9px;color:var(--blue);white-space:nowrap}
.segItem .segAdd{background:none;border:1px solid var(--b1);color:var(--sub);font-size:10px;padding:1px 6px;border-radius:3px;cursor:pointer;flex-shrink:0}
.segItem .segAdd:hover{border-color:var(--bgh);color:var(--gold)}

/* Per-run highlight opacity slider */
.runOpa{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 32px;background:var(--panel2);border-top:1px solid var(--b0);font-size:10px;color:var(--sub)}
.runOpa input[type=range]{flex:1;accent-color:var(--gold);height:3px}
.runOpa .opaval{font-family:var(--font);min-width:32px;text-align:right;color:var(--gold)}