* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #14161a;
  --panel: #1c1f26;
  --panel2: #23272f;
  --border: #333842;
  --text: #d8dce3;
  --muted: #8b93a1;
  --accent: #e8a13c;
  --accent2: #6cb8e0;
  --danger: #d0654f;
}

body { background: var(--bg); color: var(--text); font: 14px/1.45 'Segoe UI', system-ui, sans-serif; }

#root { display: flex; height: 100vh; }

.sidebar {
  width: 300px; flex-shrink: 0; background: var(--panel);
  border-right: 1px solid var(--border); padding: 14px;
  display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
}
.sidebar h1 { font-size: 17px; color: var(--accent); }
.sidebar h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 4px; }

.model-list { display: flex; flex-direction: column; gap: 4px; }
.model-item {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 13px; word-break: break-all;
}
.model-item:hover { background: var(--panel2); }
.model-item.selected { border-color: var(--accent); background: var(--panel2); }
.model-item .src { color: var(--muted); font-size: 11px; }
.model-item.loaded { border-color: var(--accent2); }
.model-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.model-del {
  padding: 0 5px; font-size: 12px; border: none; background: transparent;
  flex-shrink: 0; opacity: .55; display: inline-flex; align-items: center;
}
.model-item:hover .model-del { opacity: 1; }
.model-del:disabled { opacity: .2; }
/* red = deletes the FILES from disk; blue = only forgets a registered entry */
.model-trash { color: var(--danger); }
.model-trash:hover:not(:disabled) { color: #ff7a6b; border-color: transparent; }
.model-unreg { color: var(--accent2); }
.model-unreg:hover:not(:disabled) { color: #9fd4f2; border-color: transparent; }

.row { display: flex; gap: 6px; align-items: center; }
.row label { color: var(--muted); font-size: 12px; width: 58px; flex-shrink: 0; }
select, input[type="text"], input[type="number"], textarea {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 5px; padding: 5px 7px; font: inherit; width: 100%;
}
textarea { resize: vertical; }

button {
  background: var(--panel2); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: #14161a; border-color: var(--accent); font-weight: 600; }
button.danger { border-color: var(--danger); color: var(--danger); }

.gpu { margin-bottom: 8px; }
.gpu .name { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.gpu .bar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.gpu .fill { height: 100%; background: var(--accent2); transition: width .5s; }
.dl-bar { height: 5px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.dl-fill { height: 100%; background: var(--accent); transition: width .4s; }

/* flex-shrink 0: as a flex item of the (full) sidebar it used to get squeezed
   to min-height, and the download progress bar overflowed onto "Browse" */
.status-line { font-size: 12px; color: var(--muted); min-height: 16px; word-break: break-word; flex-shrink: 0; }
.status-line .ok { color: var(--accent2); }
.status-line .err { color: var(--danger); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.messages { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 780px; padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
.msg.user { background: var(--panel2); align-self: flex-end; }
.msg.assistant { background: var(--panel); border: 1px solid var(--border); align-self: flex-start; }
.msg .msgmeta { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* markdown rendering inside assistant bubbles (the bubble keeps pre-wrap for
   plain text; .md content manages its own whitespace) */
.msg .md { white-space: normal; }
.msg .md > :first-child { margin-top: 0; }
.msg .md > :last-child { margin-bottom: 0; }
.msg .md p, .msg .md ul, .msg .md ol, .msg .md pre, .msg .md blockquote,
.msg .md h1, .msg .md h2, .msg .md h3, .msg .md h4, .msg .md table { margin: 6px 0; }
.msg .md h1, .msg .md h2 { font-size: 15px; }
.msg .md h3, .msg .md h4 { font-size: 13.5px; }
.msg .md ul, .msg .md ol { padding-left: 20px; }
.msg .md code {
  background: var(--panel2); padding: 1px 4px; border-radius: 4px;
  font-size: 12px; font-family: Consolas, 'Fira Code', monospace;
}
.msg .md pre {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; overflow-x: auto;
}
.msg .md pre code { background: none; padding: 0; }
.msg .md table { border-collapse: collapse; }
.msg .md th, .msg .md td { border: 1px solid var(--border); padding: 3px 8px; font-size: 12.5px; }
.msg .md blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--muted); }
.msg .md a { color: var(--accent2); }

/* inline edit of an assistant reply */
.msg-edit textarea { width: 100%; min-width: 420px; resize: vertical; }
.msg-edit-actions { display: flex; gap: 8px; margin-top: 6px; }

.composer { border-top: 1px solid var(--border); padding: 12px 22px; display: flex; flex-direction: column; gap: 8px; }
.composer .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.composer .controls label { font-size: 12px; color: var(--muted); }
.composer .controls input { width: 64px; }
.composer .inputrow { display: flex; gap: 8px; }
.composer .inputrow textarea { flex: 1; min-height: 44px; max-height: 160px; }

.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; padding: 5px 0; font-size: 12px; border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; }
.tabs button.tab-on { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }

.exp-tag {
  font-size: 9px; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 6px; padding: 0 5px; vertical-align: middle; letter-spacing: .05em;
}
/* export greyed out when the "per-layer steering" mode doesn't produce a faithful checkpoint */
.exp-grid { display: flex; flex-direction: column; gap: 7px; transition: opacity .18s; }
.exp-grid-off { opacity: .4; pointer-events: none; }
.exp-disabled-note { color: var(--danger); }

.diff-btn { padding: 0 6px; font-size: 11px; margin-left: 6px; }
.diff-table { border-collapse: collapse; font-size: 11px; }
.diff-table th { color: var(--muted); font-weight: 400; padding: 2px 4px; max-width: 60px; overflow: hidden; }
.diff-table td { padding: 1px 4px; border: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
.diff-lay { color: var(--muted); }
.diff-same { opacity: .45; }
.diff-diff { outline: 1px solid var(--accent); }
.diff-a { color: var(--accent2); }
.diff-b { color: var(--accent); }
.lv-ablate { cursor: pointer; }
.lv-ablate:hover { color: var(--danger); }

.reg-list { display: flex; flex-direction: column; gap: 3px; }
.reg-item {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px;
}
.reg-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-item button { padding: 2px 8px; font-size: 12px; flex-shrink: 0; }
.preset-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.preset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-model { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reg-item2 {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
}
.reg-item2.reg-warn { border-color: var(--danger); }
.reg-item2 .reg-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.reg-item2 button { padding: 3px 9px; font-size: 12px; flex-shrink: 0; align-self: center; }
.reg-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 0 5px;
  border-radius: 7px; background: var(--panel2); color: var(--muted); font-weight: 600;
}
.reg-tag.hub { background: rgba(108,184,224,.18); color: var(--accent2); }
.reg-tag.base { background: rgba(140,220,160,.16); color: #7fce8f; }
.reg-reason { color: var(--danger) !important; white-space: normal; }

.linkbtn {
  background: none; border: none; padding: 0; color: var(--accent2);
  font-size: 11px; cursor: pointer; text-decoration: underline;
}
.linkbtn:hover { color: var(--accent); }
.linkbtn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.browser { border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
.browser-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.browser-path .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.browser-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.browser-row {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  padding: 2px 4px; border-radius: 4px; font-size: 12px;
}
.browser-row:hover { background: var(--panel2); }
.browser-row.is-model { color: var(--accent); }
.browser-name { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.browser-row button { padding: 1px 8px; font-size: 11px; flex-shrink: 0; }

.fit-adv { border-left: 2px solid var(--border); padding-left: 8px; display: flex; flex-direction: column; gap: 6px; }

.conv-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.conv-item { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 12px; }
.conv-item:hover { background: var(--panel2); }
.conv-item.selected { border-color: var(--accent2); }
.conv-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.conv-del { padding: 0 5px; font-size: 10px; border: none; color: var(--muted); }
.conv-del:hover { color: var(--danger); }
.conv-snippet { color: var(--muted); font-size: 11px; margin-top: 2px; }

.conv-header {
  display: flex; gap: 8px; align-items: center; padding: 8px 22px;
  border-bottom: 1px solid var(--border); background: var(--panel);
}
.conv-title-input { flex: 1; font-weight: 600; }
.conv-tags-input { width: 220px; }
.conv-header a { color: var(--accent2); font-size: 12px; text-decoration: none; border: 1px solid var(--border); border-radius: 5px; padding: 4px 9px; }
.conv-header a:hover { border-color: var(--accent2); }

.tree-panel {
  border-bottom: 1px solid var(--border); background: var(--panel);
  padding: 8px 14px; max-height: 220px; overflow-y: auto; font-size: 12px;
}
.tree-node { display: flex; gap: 7px; align-items: baseline; padding: 2px 4px; cursor: pointer; border-radius: 4px; white-space: nowrap; overflow: hidden; }
.tree-node:hover { background: var(--panel2); }
.tree-node.on-path { background: rgba(108,184,224,.10); }
.tn-role { width: 14px; text-align: center; border-radius: 3px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.tn-role.user { color: var(--accent); }
.tn-role.assistant { color: var(--accent2); }
.tn-role.system { color: var(--muted); }
.tn-text { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tn-frames { color: var(--accent); }
.tree-hint { color: var(--muted); font-size: 11px; margin-top: 5px; }
.fork-note { color: var(--accent); font-size: 12px; }

.msg.has-frames { cursor: pointer; }
.msg.msg-selected { outline: 1px solid var(--accent2); }

.lensview {
  border-top: 1px solid var(--border); background: var(--panel);
  max-height: 46vh; overflow-y: auto; padding: 6px 12px; flex-shrink: 0;
}
/* drag handle above the lens view: sets its height manually */
.v-resizer {
  height: 6px; cursor: ns-resize; flex-shrink: 0;
  background: linear-gradient(var(--border), transparent);
}
.v-resizer:hover { background: var(--accent2); opacity: .5; }
.lv-controls { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); padding: 4px 0 8px; flex-wrap: wrap; }
.lv-controls input[type="text"] { padding: 3px 6px; font-size: 12px; }
.lv-controls button { padding: 3px 10px; font-size: 12px; }
.lv-sep { width: 1px; height: 16px; background: var(--border); }
.lv-pin { background: rgba(232,161,60,.15); color: var(--accent); border: 1px solid var(--accent); border-radius: 9px; padding: 1px 8px; cursor: pointer; font-size: 12px; }
/* single scroll container (H + V): the bars stay at the edges so they're always
   visible, even when the grid overflows in height. The label column is pinned to
   the left (sticky) and scrolls vertically with the grid. */
.lv-gridwrap { display: flex; align-items: flex-start; overflow: auto; max-height: 34vh; }
.lv-labels { position: sticky; left: 0; z-index: 2; background: var(--panel); flex-shrink: 0; }
.lv-scroll { flex-shrink: 0; }
.lv-laylabel-hot { fill: var(--accent2); font-weight: 700; }
.lv-filter-badge { color: var(--accent2); font-size: 11px; white-space: nowrap; }
.lv-filter-badge.err { color: var(--danger); }
.lv-filter-clear { cursor: pointer; }
.lv-filter-clear:hover { color: var(--danger); }
.lv-agg { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; padding: 6px 2px; }
.lv-agg-word { cursor: pointer; }
.lv-agg-word:hover { color: var(--accent2); }
.lv-agg-word.lv-agg-pinned { color: var(--accent); text-decoration: underline; }
.lv-agg-word sup { font-size: 9px; color: var(--muted); }
.lv-agg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 2px 2px 6px; }
.lv-agg-bar input[type="number"], .lv-agg-bar input[type="text"] { padding: 3px 6px; font-size: 12px; }
.lv-hidden-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 2px 8px; }
.lv-hidden-chip {
  font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; cursor: pointer; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-hidden-chip:hover { border-color: var(--accent2); color: var(--accent2); }
.lv-view-on { border-color: var(--accent) !important; color: var(--accent); }
.lv-pinadd { position: relative; display: inline-flex; }
.lv-pinadd input { padding: 3px 6px; font-size: 12px; }
.lv-pinadd-cands {
  position: absolute; top: 100%; left: 0; margin-top: 3px; z-index: 12;
  display: flex; gap: 3px; flex-wrap: wrap; max-width: 240px;
  background: #0f1114; border: 1px solid var(--border); border-radius: 6px;
  padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.lv-pinadd-cands button { padding: 2px 7px; font-size: 12px; }
.lv-layerrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px 6px; }
.lv-layerrow .layerpicker { flex: 1; min-width: 0; }
.lv-lensbadge {
  font-size: 11px; color: var(--accent2); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 8px; max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.lv-svg { display: block; }
.lv-toklabel { fill: var(--muted); font-size: 10px; text-anchor: start; }
.lv-laylabel { fill: var(--muted); font-size: 10px; text-anchor: end; }
.lv-word { fill: var(--text); font-size: 11px; }
.lv-rank { fill: var(--muted); font-size: 7.5px; }
.lv-cell { cursor: pointer; }
.lv-cell:hover rect { stroke: var(--accent2); }
.lv-tip {
  position: fixed; z-index: 10; background: #0f1114; border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; font-size: 12px; pointer-events: none;
  max-width: 260px; box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.lv-tip-head { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.lv-trans { color: var(--accent2); font-size: 11px; font-style: italic; }
.lv-tip-row { display: flex; justify-content: space-between; gap: 14px; }
.lv-tip-row span:last-child { color: var(--muted); }
.lv-tip-trans { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 5px; }
.lv-tip-trans .lv-tip-head { margin-bottom: 3px; }
.lv-pins { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
.lv-pinblock { margin-bottom: 12px; overflow-x: auto; }
/* graph on top, heatmap below — never side by side (svgs are inline by default) */
.lv-pinblock svg { display: block; }
.lv-pinname { font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.lv-pinsub { color: inherit; }
.lv-copybtn {
  padding: 0 5px; font-size: 12px; margin: 0 2px; line-height: 1.4;
  border: 1px solid var(--border); border-radius: 4px; color: var(--muted);
  background: var(--panel2); cursor: pointer; vertical-align: baseline;
}
.lv-copybtn:hover { color: var(--accent2); border-color: var(--accent2); }
.lv-pinhov { color: var(--accent2); font-weight: 600; }
.lv-grid { stroke: rgba(255,255,255,.06); }
.lv-axis { fill: var(--muted); font-size: 9px; text-anchor: end; }
.lv-axis-hot { fill: var(--accent2); font-weight: 700; }
.lv-laylegend { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
.lv-laychip {
  font-size: 10px; padding: 0 5px; border: 1px solid; border-radius: 8px;
  cursor: pointer; user-select: none; line-height: 1.5;
}
.lv-laychip.dim { opacity: .3; }

.lens-live {
  border-top: 1px solid var(--border); background: var(--panel);
  padding: 8px 22px; max-height: 240px; overflow-y: auto;
}
.lens-head { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.phase { padding: 1px 8px; border-radius: 8px; font-weight: 600; }
.phase.reading { background: rgba(232, 161, 60, .18); color: var(--accent); }
.phase.thinking { background: rgba(108, 184, 224, .18); color: var(--accent2); }
.lens-rows { display: flex; flex-direction: column; gap: 2px; }
.lens-row { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.lens-row .lnum { color: var(--muted); font-size: 11px; width: 34px; flex-shrink: 0; }
.lword { font-size: 13px; }
.lword sup { font-size: 9px; color: var(--muted); }

.sys { padding: 8px 22px; border-bottom: 1px solid var(--border); background: var(--panel); }
.sys summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.sys textarea { margin-top: 6px; min-height: 40px; }

/* ---- Token editor ---- */
.editor {
  width: 400px; flex-shrink: 0; background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.ed-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  color: var(--accent); font-weight: 600;
}
.ed-close { padding: 2px 9px; }
.ed-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 16px; }
.ed-section { display: flex; flex-direction: column; gap: 7px; }
.ed-section h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600;
}
.editor .src { color: var(--muted); font-size: 11px; }
.ed-flash { animation: ed-flash 1.5s ease-out; border-radius: 8px; }
@keyframes ed-flash {
  0% { background: rgba(232,161,60,.25); box-shadow: 0 0 0 2px var(--accent); }
  100% { background: transparent; box-shadow: none; }
}
.ed-toggle-on { border-color: var(--accent) !important; color: var(--accent); }

/* Mode toggle: steering (exploration) ↔ read projection (exportable).
   Sliding thumb, two halves tiling the track (4px insets, seam at the center). */
.mode-toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 4px; isolation: isolate; user-select: none;
}
.mt-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: 7px;
  transition: transform .24s cubic-bezier(.34,1.2,.44,1), background .2s, box-shadow .2s;
}
.mt-steer .mt-thumb {
  transform: translateX(0);
  background: linear-gradient(135deg, rgba(108,184,224,.92), rgba(108,184,224,.6));
  box-shadow: 0 2px 12px rgba(108,184,224,.4);
}
.mt-read .mt-thumb {
  transform: translateX(100%);
  background: linear-gradient(135deg, rgba(126,201,126,.94), rgba(126,201,126,.62));
  box-shadow: 0 2px 12px rgba(126,201,126,.4);
}
.mt-opt {
  position: relative; z-index: 1; background: none; border: none; border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 6px 8px; cursor: pointer; color: var(--muted);
  transition: color .18s; text-align: center; line-height: 1.15;
}
.mt-opt:hover:not(.mt-on) { color: var(--text); }
.mt-opt svg { opacity: .92; margin-bottom: 1px; }
.mt-lab { font-size: 12px; font-weight: 600; }
.mt-sub { font-size: 9.5px; letter-spacing: .02em; opacity: .82; }
.mt-on { color: #14161a; }
.mt-on .mt-sub { opacity: .74; }

.ed-rule { border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; }
.ed-rule-off { opacity: .5; }
.ed-rule-toggle {
  padding: 0 5px; font-size: 12px; border: none; background: transparent;
  color: var(--accent2); flex-shrink: 0; line-height: 1;
}
.ed-rule-off .ed-rule-toggle { color: var(--muted); }
.ed-rule-toggle:hover { color: var(--accent); border-color: transparent; }
.ed-rule-main { display: flex; align-items: center; gap: 6px; }
.ed-rule-tok {
  font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 96px;
}
.ed-rule-factor { width: 62px !important; flex-shrink: 0; padding: 3px 5px !important; font-size: 12px !important; }
.ed-rule-del { padding: 1px 7px; font-size: 11px; border: none; color: var(--muted); flex-shrink: 0; }
.ed-rule-del:hover { color: var(--danger); }
.ed-rule-layers { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }

.rulebar {
  display: flex; gap: 1px; cursor: pointer; flex-shrink: 1;
  min-width: 42px; max-width: 118px; overflow: hidden;
  padding: 3px 2px; border-radius: 4px; align-items: center;
}
.rulebar:hover { background: var(--panel2); }
.rb-seg { width: 2px; min-width: 1px; height: 12px; background: var(--panel2); border-radius: 1px; }
.rb-seg.on { background: var(--accent); }

.layerpicker { display: flex; flex-direction: column; gap: 5px; }
.lp-cells { display: flex; flex-wrap: wrap; gap: 3px; }
.lp-cell {
  min-width: 22px; text-align: center; font-size: 11px; padding: 2px 3px;
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
  color: var(--muted); user-select: none;
}
.lp-cell:hover { border-color: var(--accent2); }
.lp-cell.on { background: rgba(232,161,60,.2); border-color: var(--accent); color: var(--accent); }
.lp-cell.lp-approx { border-style: dashed; opacity: .75; }
.lp-quick { display: flex; gap: 5px; }
.lp-quick button { padding: 2px 9px; font-size: 11px; }

.ed-cands { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; }
.ed-cands button { padding: 2px 8px; font-size: 12px; }
.ed-cands .ed-cand-on { border-color: var(--accent); color: var(--accent); background: rgba(232,161,60,.12); }

.ed-group { border: 1px solid var(--accent2); border-radius: 8px; padding: 9px; }
.ed-group h3 { color: var(--accent2); }