@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=EB+Garamond:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --canvas:#FFFFFF;
  --ink:#1D2019;
  --accent:#7FDDC7; /* pale mint — the cutting mat's own print colour, used on the green panel */
  --accent-ink:#123D2C; /* dark green text sitting on the mint fill */
  --accent-hover:#66C7AF;
  --accent-strong:#1E8A6E; /* deeper teal — same accent family, used wherever it needs to read on white */
  --mat-green:#1D5940; /* the cutting-mat surface — now the control panel's own material */
  --panel-ink:#EAF6F0; /* light text sitting directly on the green panel */
  --panel-ink-muted:#8FC9B4;
  --panel-line:#3E7A60;
  --line:#DCE0DA; /* neutral divider for white surfaces (canvas-area, schedule, floating cards) */
  --panel:#F6F7F3; /* light neutral tint for white-surface chrome (subtotal rows, inactive floor tabs) */
  --shadow-sm: 0 1px 3px rgba(29,32,25,0.08), 0 1px 2px rgba(29,32,25,0.06);
  --shadow-md: 0 4px 14px rgba(29,32,25,0.12);
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--canvas); color:var(--ink); font-family:'DM Sans', sans-serif; }
.wrap{ display:grid; grid-template-columns:328px 1fr; min-height:100vh; }
.panel{
  background-color:var(--mat-green);
  background-image:
    linear-gradient(to right, #7FDDC71A 1px, transparent 1px),
    linear-gradient(to bottom, #7FDDC71A 1px, transparent 1px);
  background-size:10px 10px;
  color:var(--panel-ink);
  box-shadow:2px 0 8px rgba(29,32,25,0.15); display:flex; flex-direction:column; overflow-y:auto; max-height:100vh;
}
.place-sticky{ position:sticky; top:0; z-index:20; background:var(--mat-green); padding:24px 24px 16px; border-bottom:1px solid var(--panel-line); display:flex; flex-direction:column; gap:8px; }
.panel-scroll{ padding:16px 24px 32px; display:flex; flex-direction:column; gap:16px; }
h1{ font-weight:700; font-size:16px; margin:0; }
.eyebrow-row{ display:flex; align-items:center; justify-content:space-between; }
.help-btn{
  width:22px; height:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; padding:0;
  background:transparent; border:1px solid rgba(127,221,199,0.45); color:var(--accent); border-radius:50%; cursor:pointer;
}
.help-btn:hover{ background:rgba(127,221,199,0.15); border-color:var(--accent); }
.eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin:0; }
.mono-num{ font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; }
section{ border-top:1px solid var(--panel-line); padding-top:16px; display:flex; flex-direction:column; gap:8px; }
section h2{ font-size:11px; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:0.05em; margin:0; color:var(--panel-ink-muted); }
.section-sub{ font-weight:400; text-transform:none; letter-spacing:0; }
label, .field-label{ font-size:12px; display:flex; flex-direction:column; gap:4px; }
input[type="text"], input[type="number"], select{
  font-family:'DM Sans', sans-serif; font-size:12px; border:1px solid var(--line);
  background:#fff; padding:8px; border-radius:4px; color:var(--ink); width:100%;
}
input[type="range"]{ width:100%; }
input[type="color"]{ width:28px; height:24px; border:1px solid var(--line); border-radius:4px; padding:0; cursor:pointer; }
button{
  font-family:'DM Sans', sans-serif; font-weight:700; font-size:11px; letter-spacing:0.02em;
  border:1px solid var(--line); background:#fff; color:var(--ink); padding:8px 12px; border-radius:4px; cursor:pointer;
}
button:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }
button.primary{ background:var(--accent); color:var(--accent-ink); border:none; box-shadow:0 2px 10px rgba(15,26,20,0.18); display:inline-flex; align-items:center; justify-content:center; gap:7px; }
button.primary svg{ width:14px; height:14px; flex-shrink:0; }
button.primary:hover{ background:var(--accent-hover); color:var(--accent-ink); }
button.armed{ background:var(--ink); color:#fff; border:none; }
button.small{ padding:4px 8px; font-size:10px; }
button.small svg{ width:11px; height:11px; }
button:disabled{ opacity:0.4; cursor:not-allowed; }
.place-btn{ width:100%; padding:12px; font-size:12px; }
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; }
.btn-row button{ flex:1; }
.selpanel{ display:none; flex-direction:column; gap:8px; }
.selpanel.show{ display:flex; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.row-flex{ display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; font-size:12px; }
.row-flex input[type="text"]{ flex:1; padding:6px 8px; }
.danger-row{ margin-top:8px; padding-top:16px; border-top:1px solid var(--panel-line); }
.danger-row button{ width:100%; }

/* buttons sitting directly on the green panel: blend into the mat, outlined rather than filled */
.panel button:not(.primary):not(.icon-btn):not(.danger-btn), .panel label.btn-file{
  background:rgba(255,255,255,0.10);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 10px rgba(15,26,20,0.18);
  color:var(--panel-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.panel button:not(.primary):not(.icon-btn):not(.danger-btn):hover, .panel label.btn-file:hover{
  background:rgba(255,255,255,0.18);
  border-color:var(--accent);
  color:var(--accent);
}
.panel button:not(.primary):not(.icon-btn):not(.danger-btn).armed{
  background:var(--accent-ink); color:var(--panel-ink); border-color:var(--accent);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.panel button svg{ width:14px; height:14px; flex-shrink:0; }

/* foldable sections */
.fold{ border-top:1px solid var(--panel-line); padding-top:16px; }
.fold summary{ list-style:none; cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--panel-ink-muted); display:flex; align-items:center; justify-content:space-between; }
.fold summary::-webkit-details-marker{ display:none; }
.fold summary::after{ content:'+'; font-family:'DM Sans', sans-serif; font-size:14px; color:var(--accent); }
.fold[open] summary::after{ content:'–'; }
.fold-body{ display:flex; flex-direction:column; gap:12px; padding-top:16px; }

/* chip rows for categories / layers — stay as pale tags on the mat */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:16px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-sm); font-size:11px; font-weight:500; cursor:pointer; color:var(--ink); }
.chip:hover{ border-color:var(--accent-strong); }
.chip.active{ border-color:var(--accent-strong); color:var(--accent-strong); }
.chip-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.chip-editor{ display:none; flex-direction:column; gap:8px; padding:12px; background:#fff; border-radius:6px; box-shadow:var(--shadow-sm); color:var(--ink); }
/* this white card sits inside .panel, whose base text colour is the pale mint meant for the green mat — override it here, same reasoning as .sidebar-popover */
.chip-editor button:not(.primary):not(.icon-btn):not(.danger-btn){
  background:#fff; color:var(--ink); border:1px solid var(--line);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}
.chip-editor button:not(.primary):not(.icon-btn):not(.danger-btn):hover{
  background:#fff; border-color:var(--accent-strong); color:var(--accent-strong);
}

/* swatch-prefixed dropdown replacing a plain <select> where a colour needs to show inline */
.swatch-select{ position:relative; }
.swatch-select-trigger{
  font-family:'DM Sans', sans-serif; font-weight:400; letter-spacing:0; font-size:12px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:8px; border-radius:4px; width:100%;
  display:flex; align-items:center; gap:8px; cursor:pointer; text-align:left;
}
.swatch-select-trigger:hover{ background:#fff; border-color:var(--accent-strong); color:var(--ink); }
/* higher specificity than .panel's glass-button rule (targets by id, not class) so this plain-field look always wins regardless of which surface it sits on */
#selCategoryTrigger{ background:#fff; color:var(--ink); border:1px solid var(--line); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
#selCategoryTrigger:hover{ background:#fff; color:var(--ink); border-color:var(--accent-strong); }
.swatch-select-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.swatch-select-chevron{ width:12px; height:12px; flex-shrink:0; color:#8a8371; }
.swatch-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.swatch-select-menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30;
  background:#fff; border-radius:6px; box-shadow:var(--shadow-sm); max-height:220px; overflow-y:auto; padding:4px;
}
.swatch-select-menu.show{ display:block; }
.swatch-select-option{ display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:4px; cursor:pointer; font-size:12px; color:var(--ink); }
.swatch-select-option:hover{ background:var(--panel); }
.swatch-select-option.active{ background:var(--panel); font-weight:700; }

.canvas-area{ padding:28px; display:flex; flex-direction:column; gap:0; position:relative; }
.canvas-toolbar{ display:flex; align-items:center; gap:12px; }
.floor-tabs{ display:flex; gap:4px; align-items:center; flex-wrap:nowrap; overflow-x:auto; flex:1; min-width:0; scrollbar-width:thin; }
.floor-tabs::-webkit-scrollbar{ height:6px; }
.floor-tabs::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.floor-tab{ padding:8px 16px; border:1px solid var(--line); border-bottom:none; border-radius:6px 6px 0 0; background:var(--panel); font-family:'IBM Plex Mono', monospace; font-size:11px; cursor:pointer; color:#6b6353; flex-shrink:0; }
.floor-tab.active{ background:#fff; border-color:var(--accent-strong); color:var(--accent-strong); font-weight:500; }
.floor-tab span{ margin-left:8px; opacity:0.5; }
.floor-tab span:hover{ opacity:1; color:var(--accent-strong); }
.floor-tab-add{ padding:8px 12px; border:1px dashed var(--line); border-radius:6px; background:none; cursor:pointer; font-size:13px; line-height:1; color:#6b6353; margin-bottom:2px; flex-shrink:0; }
.floor-tab.dragging{ opacity:0.35; }
.floor-tab-ghost{ position:fixed; pointer-events:none; z-index:50; transform:translate(-50%, -140%); box-shadow:0 4px 16px rgba(15,26,20,0.3); }
.floor-tab.drop-before{ box-shadow:inset 2px 0 0 var(--accent-strong); }
.floor-tab.drop-after{ box-shadow:inset -2px 0 0 var(--accent-strong); }
.diagram-frame{ border-radius:4px; background:#fff; box-shadow:var(--shadow-sm); aspect-ratio:10/7; width:100%; overflow:hidden; position:relative; margin-top:16px; }
#svg{ width:100%; height:100%; display:block; touch-action:none; }
.bubble-label{ font-weight:700; font-size:12px; fill:var(--ink); pointer-events:none; }
.bubble-sub{ font-family:'IBM Plex Mono', monospace; font-size:9px; fill:var(--ink); opacity:0.7; pointer-events:none; }
.hint{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--panel-ink-muted); margin:0; }
.readout{ font-size:11px; color:var(--panel-ink-muted); }
table{ border-collapse:collapse; width:100%; font-size:12px; }
table th, table td{ border-bottom:1px solid var(--line); padding:8px; text-align:left; }
table th{ font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:#6b6353; }
tr.subtotal td{ font-weight:700; background:var(--panel); }
tr.grand td{ font-weight:700; border-top:2px solid var(--ink); }
.schedule-wrap{ display:none; background:#fff; border-radius:4px; box-shadow:var(--shadow-sm); padding:16px; margin-top:16px; }
.schedule-wrap.show{ display:block; }
.schedule-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.legend-panel{ position:absolute; background:#fff; border-radius:6px; box-shadow:var(--shadow-md); min-width:180px; max-height:70%; overflow-y:auto; display:none; z-index:10; }
.legend-panel.show{ display:block; }
.legend-head{ font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:#6b6353; background:var(--panel); padding:8px 10px; cursor:grab; user-select:none; border-radius:6px 6px 0 0; }
.legend-head:active{ cursor:grabbing; }
.legend-row{ display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:11px; }
.legend-swatch{ width:10px; height:10px; border-radius:2px; flex-shrink:0; }
.legend-code{ font-family:'IBM Plex Mono', monospace; font-weight:500; }

/* selected-bubble header + icon buttons — white "tag" style regardless of panel bg */
.selpanel-head{ display:flex; align-items:center; justify-content:space-between; }
.selpanel-head h2{ margin:0; }
.icon-btn{ width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:4px; cursor:pointer; color:var(--ink); position:relative; flex-shrink:0; }
.icon-btn:hover{ border-color:var(--accent-strong); color:var(--accent-strong); }
.icon-btn.active{ border-color:var(--accent-strong); color:var(--accent-strong); background:#E3F3EE; }
.tt::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; font-size:10px; padding:4px 7px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.12s; z-index:5; }
.tt:hover::after{ opacity:1; }
.danger-btn{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 12px; border:1px solid #F0C1C1; color:#A32D2D; background:#fff; border-radius:4px; font-family:'DM Sans', sans-serif; font-weight:700; font-size:11px; cursor:pointer; }
.danger-btn:hover{ background:#FCEBEB; }
.chip-icon{ display:inline-flex; color:#6b6353; }
.icon-btn svg, .danger-btn svg, .chip-icon svg{ width:14px; height:14px; flex-shrink:0; }
.input-lock-row{ display:flex; gap:6px; align-items:center; }
.input-lock-row input{ flex:1; min-width:0; }

/* PDF page picker */
.pdf-pages{ display:flex; gap:6px; flex-wrap:wrap; }
.pdf-page-thumb{ border:1px solid var(--line); border-radius:3px; cursor:pointer; }
.pdf-page-thumb.active{ border-color:var(--accent-strong); box-shadow:0 0 0 1px var(--accent-strong); }

/* inline scale-entry panel */
.dim-input{ position:absolute; display:none; flex-direction:column; gap:8px; background:#fff; border-radius:6px; box-shadow:var(--shadow-md); padding:10px; z-index:15; min-width:170px; }
.dim-axis-toggle{ display:flex; gap:4px; }
.dim-axis-toggle button{ flex:1; padding:5px 6px; font-size:10px; }
.dim-axis-toggle button.active{ background:var(--ink); color:#fff; border:none; }

#shapeConfirmBtn, #bubbleShapeConfirmBtn{ position:absolute; bottom:16px; right:16px; z-index:12; }

/* precision-click magnifier loupe — follows the cursor while a scale/shape tool is armed */
.magnifier{ position:absolute; width:150px; height:150px; border-radius:50%; overflow:hidden; border:2px solid #fff; box-shadow:0 4px 16px rgba(15,26,20,0.35), 0 0 0 1px rgba(29,32,25,0.12); display:none; pointer-events:none; z-index:20; background:#fff; }
.magnifier.show{ display:block; }
.magnifier svg{ width:100%; height:100%; display:block; }

/* camera pan/zoom pill — sits in the canvas toolbar row alongside the floor tabs, not over the plan itself */
.view-controls{
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:20px; flex-shrink:0;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.view-controls input[type="range"]{ width:80px; margin:0; }
.zoom-pct-wrap{ display:flex; align-items:center; gap:2px; font-size:11px; color:var(--ink); flex-shrink:0; }
.zoom-pct-wrap input[type="number"]{ width:34px; box-sizing:content-box; padding:2px 4px; text-align:right; font-size:11px; border:1px solid var(--line); border-radius:3px; -moz-appearance:textfield; }
.zoom-pct-wrap input[type="number"]::-webkit-outer-spin-button,
.zoom-pct-wrap input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#svg.pan-armed{ cursor:grab; }
#svg.pan-armed:active{ cursor:grabbing; }

/* icon toggle (line style, dimension axis) */
.icon-toggle{ display:flex; border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.icon-toggle button{ flex:1; padding:7px 10px; font-size:10.5px; font-weight:700; white-space:nowrap; border:none; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-toggle button + button{ border-left:1px solid var(--line); }
.icon-toggle button.active{ background:var(--ink); color:#fff; }
.icon-toggle button svg{ width:16px; height:16px; }

/* floor tabs: inline rename + arm-to-delete */
.floor-tab input{ font-family:'IBM Plex Mono', monospace; font-size:11px; border:none; background:transparent; color:var(--ink); width:90px; padding:0; }
.floor-tab span.confirm-del{ color:#A32D2D; opacity:1; font-weight:700; }

/* status row: Plan & Scale chip + small settings triggers, always visible in the sticky header */
.status-row{ display:flex; gap:6px; margin-top:4px; }
.status-chip{
  flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,0.10); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,0.22); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 10px rgba(15,26,20,0.18);
  color:var(--panel-ink); border-radius:6px; padding:8px 10px; font-family:'DM Sans', sans-serif; cursor:pointer;
}
.status-chip:hover{ border-color:var(--accent); }
.status-chip .l{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:11px; }
.status-chip .l svg{ width:14px; height:14px; }
.status-chip .r{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--panel-ink-muted); white-space:nowrap; }
.gear-btn{
  width:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10); -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,0.22); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 10px rgba(15,26,20,0.18);
  color:var(--panel-ink); border-radius:6px; cursor:pointer;
}
.gear-btn:hover{ border-color:var(--accent); color:var(--accent); }
.gear-btn svg{ width:15px; height:15px; }

/* sidebar popovers: fixed-positioned, mint-tinted paper — not white, so they don't jar against the mat */
.sidebar-popover{
  position:fixed; display:none; flex-direction:column; gap:10px;
  background:#F0F7F3; border-radius:8px; box-shadow:0 10px 32px rgba(15,26,20,0.35);
  padding:14px; z-index:30; width:280px; max-height:80vh; overflow-y:auto;
}
.sidebar-popover.show{ display:flex; }
.sidebar-popover{ color:var(--ink); }
.sidebar-popover label{ color:var(--ink); }
.sidebar-popover .hint{ color:#7C8B82; }
.sidebar-popover .readout{ color:#7C8B82; }
/* buttons inside the (already light) popover get a normal solid style, not the green-mat glass treatment */
.sidebar-popover button:not(.primary):not(.icon-btn):not(.danger-btn), .sidebar-popover label.btn-file{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
}
.sidebar-popover button:not(.primary):not(.icon-btn):not(.danger-btn):hover, .sidebar-popover label.btn-file:hover{
  background:#fff; border-color:var(--accent-strong); color:var(--accent-strong);
}
.sidebar-popover button:not(.primary):not(.icon-btn):not(.danger-btn).armed{
  background:var(--ink); color:#fff; border-color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* icon-toggle buttons (Line style, Units, ...) keep their own active/inactive contrast wherever they sit — panel or popover — not the plain-button resets above */
.panel .icon-toggle button:not(.primary):not(.icon-btn):not(.danger-btn),
.sidebar-popover .icon-toggle button:not(.primary):not(.icon-btn):not(.danger-btn){
  background:#fff; color:var(--ink); border:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
}
.panel .icon-toggle button:not(.primary):not(.icon-btn):not(.danger-btn).active,
.sidebar-popover .icon-toggle button:not(.primary):not(.icon-btn):not(.danger-btn).active{
  background:var(--ink); color:#fff;
}
.popover-head{ display:flex; justify-content:space-between; align-items:center; font-family:'Archivo','DM Sans',sans-serif; font-weight:700; font-size:12px; color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--line); }
.popover-close{ width:22px; height:22px; padding:0; border:none; background:none; color:#7C8B82; font-size:12px; box-shadow:none; }
.popover-close:hover{ color:var(--accent-strong); border:none; }

/* selected-bubble: Size cluster */
.size-card{ border:1px solid var(--panel-line); border-radius:6px; padding:10px; display:flex; flex-direction:column; gap:8px; background:rgba(255,255,255,0.04); }
.mono-label{ font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; margin:0; color:var(--panel-ink-muted); }

/* file input: hide native control, style the label instead */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.btn-file-row{ display:flex; flex-direction:column; gap:6px; }
.btn-file{ display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; cursor:pointer; white-space:nowrap; }

/* range sliders: cross-browser reset, filled progress segment */
input[type="range"]{
  -webkit-appearance:none; appearance:none; height:4px; border-radius:2px; background:transparent; margin:6px 0;
  background-image:linear-gradient(to right, var(--accent-strong) var(--fill,50%), var(--line) var(--fill,50%));
}
input[type="range"]::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background:transparent; }
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; margin-top:-5px;
  background:var(--accent-strong); border:2px solid #fff; box-shadow:0 1px 3px rgba(15,26,20,0.35); cursor:pointer;
}
input[type="range"]::-moz-range-track{ height:4px; border-radius:2px; background:var(--line); }
input[type="range"]::-moz-range-progress{ height:4px; border-radius:2px; background:var(--accent-strong); }
input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--accent-strong); border:2px solid #fff; box-shadow:0 1px 3px rgba(15,26,20,0.35); cursor:pointer;
}

/* Tips and shortcuts popover */
.tip-save{ font-size:11px; line-height:1.45; background:#FFFFFF; border-left:3px solid var(--accent-strong); border-radius:4px; padding:8px 10px; margin:0; color:var(--ink); }
.tips-head{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-strong); margin:4px 0 6px; }
.tips dl{ display:grid; grid-template-columns:86px 1fr; gap:6px 8px; margin:0 0 6px; }
.tips dt{ font-family:'IBM Plex Mono', monospace; font-size:10px; font-weight:500; color:var(--ink); padding-top:1px; }
.tips dd{ margin:0; font-size:11px; line-height:1.4; color:#4A5A51; }
.tips-link{ font-size:11px; font-weight:700; color:var(--accent-strong); text-decoration:none; align-self:flex-start; }
.tips-link:hover{ text-decoration:underline; }