/* Legacy token names kept as aliases onto design-system.css. The grid builder,
   preset dialog and field-order list further down this file were written
   against these, so aliasing lets the whole stylesheet pick up the refined
   palette without a find-and-replace across 900 lines. Prefer the --surface-*
   / --ink-* / --line-* names in anything new. */
:root {
  --bg: var(--surface-0);
  --panel: var(--surface-1);
  --panel-2: var(--surface-2);
  --border: var(--line);
  --text: var(--ink);
  --text-dim: var(--ink-2);
  --blue: var(--info);
  --red: var(--danger);
  --green: var(--ok);
}

/* ============================================================================
   Sticky top shell - app header + live preview
   ========================================================================= */

.app-top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-0);
  border-bottom: 1px solid var(--line-subtle);
}

.app-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 940px;
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-5);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.app-mark {
  flex-shrink: 0;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--r-md);
}

.app-header h1 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-links {
  display: flex;
  gap: var(--sp-1);
}

.app-links a {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.app-links a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* ============================================================================
   Panels
   ========================================================================= */

.panel {
  max-width: 940px;
  margin: var(--sp-5) auto;
  padding: var(--sp-5);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line-subtle);
}

.panel-head-title { min-width: 0; }

.panel-head h2,
.panel h2 {
  margin: 0 0 2px;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
}

.panel-head-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Related buttons read as one unit - seams collapse, outer corners round. */
.btn-cluster { display: inline-flex; }
.btn-cluster .btn { border-radius: 0; margin-left: -1px; }
.btn-cluster .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-cluster .btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btn-cluster .btn:only-child  { border-radius: var(--r-md); }
.btn-cluster .btn:hover:not(:disabled) { z-index: 1; }

.btn-icon { width: 30px; padding: 0; }
.btn-icon svg { width: 15px; height: 15px; }

.panel-status:empty { display: none; }
.panel-status { padding-top: var(--sp-2); }

/* ============================================================================
   Tabs
   ========================================================================= */

.tabs {
  display: flex;
  gap: var(--sp-1);
  margin: var(--sp-4) 0 var(--sp-2);
  border-bottom: 1px solid var(--line-subtle);
}

.tab {
  position: relative;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border: none;
  background: none;
  color: var(--ink-3);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
}

.tab:hover { color: var(--ink-2); }

.tab.is-active { color: var(--ink); }

.tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: -1px;
  height: 2px;
  border-radius: var(--r-full) var(--r-full) 0 0;
  background: var(--accent);
}

/* A control elsewhere revealed a row in this tab - see control-tabs.js. */
.tab.has-change::before {
  content: "";
  position: absolute;
  top: var(--sp-2);
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--info);
}

.tabpanel { display: none; }
.tabpanel.is-active { display: block; }

/* ============================================================================
   Settings rows

   One label gutter across the whole app, so every control starts on the same
   axis. Hints break to their own line and indent to that same axis rather than
   trailing off the end of the control.
   ========================================================================= */

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-subtle);
}

.tabpanel .row:last-child,
.panel > .row:last-child { border-bottom: none; }

/* .row's own `display: flex` outranks the UA default [hidden] rule (same
   specificity tier, but ours loads later) - without this override, a hidden
   row would stay visible despite the `hidden` attribute. */
.row[hidden] { display: none; }

.row-label {
  flex: 0 0 var(--label-col);
  width: var(--label-col);
  color: var(--ink-2);
  font-size: var(--fs-base);
  font-weight: 500;
}

.row > .hint {
  flex: 1 1 100%;
  margin-left: calc(var(--label-col) + var(--sp-3));
}

/* Wide controls (grid builder, field list) get the full width below the label
   instead of being squeezed into the remaining gutter. */
.row-stack { align-items: flex-start; }
.row-stack > .field { flex: 1 1 100%; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.field > .hint { margin-left: 0; }

.inline-row { flex-wrap: wrap; }

/* ---- Sized inputs (replaces the inline style="max-width:70px" sprinkle) --- */
.input-num  { width: 72px; text-align: center; font-variant-numeric: tabular-nums; }
.input-sm   { width: 96px; }
.input-md   { width: 150px; }
.input-grow { flex: 1 1 260px; min-width: 0; }

/* ---- Sliders ------------------------------------------------------------- */
.slider { width: 160px; }

.slider-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.slider-label {
  width: 44px;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.slider-value {
  min-width: 52px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* ---- Checkbox rows ------------------------------------------------------- */
.row label,
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--ink);
  font-size: var(--fs-base);
  cursor: pointer;
}

/* Theme picker has 11 options - let it wrap instead of overflowing. */
.segmented-wrap { max-width: 100%; }

#split-dates-row { flex-direction: column; align-items: flex-start; }

.pf-tf {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
}
.pf-tf select { max-width: 130px; }

.split-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.split-date-row .split-num {
  flex-shrink: 0;
  width: 48px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.split-date-row .split-to {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Grid layout builder ---- */
#grid-builder-row { flex-direction: column; align-items: flex-start; }
.grid-builder { width: 100%; }

.grid-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.grid-toolbar .grid-toolbar-sep { margin-left: 14px; }
.grid-toolbar button {
  padding: 3px 10px;
  font-weight: 700;
  line-height: 1;
}
.grid-toolbar input { width: 52px; padding: 3px 4px; font-size: 12px; text-align: center; }
.grid-toolbar b { min-width: 16px; text-align: center; color: var(--text); }

.grid-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  min-height: 20px;
}
.grid-palette-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  cursor: grab;
  user-select: none;
  transition: border-color 0.15s, transform 0.15s;
}
.grid-palette-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.grid-palette-item.dragging { opacity: 0.4; }
.gp-palette-preview {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}
.gp-palette-caption {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Row-based builder: each layout row is one .grid-b-row (its own column count). */
.grid-b-rows { display: flex; flex-direction: column; gap: 10px; }
.grid-b-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.grid-b-row > .grid-row-h { width: 44px; flex-shrink: 0; align-self: center; padding: 3px 4px; font-size: 11px; text-align: center; }
.grid-b-cols { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.grid-b-colwrap { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.slider-value-container { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.slider-value-container .slider { width: 100%; }
.slider-value-label { font-size: 10px; color: var(--ink-3); font-weight: 500; }
.grid-b-colwrap .grid-col-w { width: 100%; box-sizing: border-box; padding: 3px 4px; font-size: 11px; text-align: center; }
/* Row-height slider isn't tied to any preview box width, so it gets real
   travel distance on its own terms: 52px (thumb alone is 16-22px of that)
   left almost no room to drag precisely. */
.grid-b-row > .slider-value-container { width: 130px; flex-shrink: 0; }

/* Number readout beside each grid slider - manual entry, plus an explicit
   up/down stepper (below) rather than relying on the browser's native
   spinner, which Chrome/Edge often don't render at all at this width. */
.slider-num-wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 3px;
}

.slider-num-wrap input[type="number"] {
  width: 30px;
  height: 20px;
  padding: 0 0 0 3px;
  border-radius: var(--r-sm);
  font-size: 10px;
  text-align: right;
  -moz-appearance: textfield;
}

/* Native spinner is unreliable at this width - .num-stepper below replaces it
   with a control that's always visible. */
.slider-num-wrap input[type="number"]::-webkit-inner-spin-button,
.slider-num-wrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Explicit up/down buttons - the "up and down buttons" the native spinner
   couldn't reliably provide. Stacked so the pair takes the same height as the
   number field beside it. */
.num-stepper {
  display: inline-flex;
  flex-direction: column;
  width: 12px;
  height: 20px;
}

.num-step {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 7px;
  line-height: 1;
  cursor: pointer;
}

.num-step[data-dir="up"] { border-radius: var(--r-sm) var(--r-sm) 0 0; border-bottom: none; }
.num-step[data-dir="down"] { border-radius: 0 0 var(--r-sm) var(--r-sm); }

.num-step:hover { background: var(--surface-3); color: var(--ink); }
.num-step:active { background: var(--accent); color: var(--accent-ink); }

.slider-num-wrap .slider-unit {
  display: flex;
  align-items: center;
  color: var(--ink-3);
  font-size: 10px;
}

/* Canvas size (px, up to 4 digits) needs more room than the grid builder's
   percentage fields (max 3 digits) share this component with. */
.slider-row .slider-num-wrap input[type="number"] {
  width: 48px;
  height: 24px;
  font-size: 12px;
}
.slider-row .num-stepper { height: 24px; }
.slider-row .slider-unit { font-size: 12px; }
.col-total { padding: 4px 0; text-align: center; }
.grid-b-rowctl { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.grid-b-rowctl button { padding: 3px 6px; font-size: 11px; white-space: nowrap; }

.grid-cell-slot {
  border: 1px dashed var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-color, transparent);
  transition: border-color 0.15s, background 0.15s;
}
.grid-cell-slot.empty { border-style: dashed; }
.grid-cell-slot:not(.empty) { border-style: solid; }
.grid-cell-slot.drag-over { border-color: var(--accent); background: rgba(255,255,255,0.1); }
.grid-slot-empty {
  font-size: 11px;
  color: var(--text-dim);
  opacity: 0.6;
  pointer-events: none;
}

.grid-placed {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: grab;
}
.grid-placed.dragging { opacity: 0.4; }
.grid-placed.editing { outline: 2px solid var(--accent); outline-offset: -2px; }
.gp-preview-wrap {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-color, var(--text));
}
.grid-placed-controls {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}
.grid-placed:hover .grid-placed-controls,
.grid-placed.editing .grid-placed-controls {
  opacity: 1;
}
.grid-clear, .grid-edit {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  padding: 0;
  line-height: 1;
  border-radius: 50%;
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.grid-add-btn {
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  border: 1px dashed var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  align-self: center;
}

/* ---- gp-*: mini WYSIWYG preview markup (see gridPreviewMarkup/
   fieldPreviewMarkup in control.js), styled to echo winloss.css's real field
   look using the theme colors set as inline CSS vars on .grid-b-rows. ---- */
.gp-text {
  font-size: 12px;
  color: var(--text-color, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gp-strong { font-weight: 700; }
.gp-dim { opacity: 0.65; }
.gp-accent { color: var(--accent); font-weight: 600; }
.gp-score { display: flex; align-items: center; gap: 8px; }
.gp-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 8px;
}
.gp-box.gp-win { background: color-mix(in srgb, var(--win-color) 15%, transparent); }
.gp-box.gp-loss { background: color-mix(in srgb, var(--loss-color) 15%, transparent); }
.gp-val { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gp-box.gp-win .gp-val { color: var(--win-color); }
.gp-box.gp-loss .gp-val { color: var(--loss-color); }
.gp-sep { font-size: 13px; opacity: 0.4; color: var(--text-color, var(--text)); }
.gp-announcement {
  width: 100%;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-color, var(--text));
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
}
.gp-media {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
}
.gp-media-placeholder {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
}
.gp-recent { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; overflow: hidden; }
.gp-recent-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.5;
  color: var(--text-color, var(--text));
}
.gp-recent-row { display: flex; gap: 4px; overflow: hidden; }
.gp-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-color, var(--text));
}
.gp-chip.gp-win { background: color-mix(in srgb, var(--win-color) 18%, transparent); }
.gp-chip.gp-loss { background: color-mix(in srgb, var(--loss-color) 18%, transparent); }
.gp-instance-scale {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.grid-ed-size-row { gap: 8px; }
.grid-ed-size-row input[type="range"] { flex: 1; min-width: 100px; }
.grid-ed-scale-value { min-width: 34px; text-align: right; color: var(--text); font-weight: 600; }

/* ---- Per-instance editor (announcement / media) ---- */
.grid-editor-wrap { width: 100%; margin-top: 10px; }
.grid-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel-2);
  max-width: 420px;
}
.grid-editor-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
.grid-editor-close { padding: 3px 10px; font-size: 12px; }
.grid-ed-text {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 8px;
}
.grid-ed-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.grid-ed-row input[type="text"] { flex: 1; min-width: 120px; }
.grid-ed-align, .grid-ed-kind, .grid-ed-fit, .grid-ed-url-apply, .grid-ed-test {
  padding: 3px 9px;
  font-size: 12px;
  text-transform: capitalize;
}
.grid-ed-align.sel, .grid-ed-kind.sel, .grid-ed-fit.sel {
  background: var(--accent);
  color: #10121a;
  border-color: var(--accent);
}
.grid-ed-upload {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.grid-ed-status { font-size: 11px; }
.grid-ed-preview {
  margin-top: 4px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  min-height: 60px;
  max-height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1017;
  color: #e8ecf4;
}
.grid-ed-preview .grid-media { max-width: 100%; max-height: 180px; width: auto; height: auto; }
.grid-ed-preview .grid-announcement { color: #e8ecf4; }

.row-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 90px;
}

/* Form-control and button base now live in design-system.css. What stays here
   is only what that file can't know about: the Windows <option> fix, a bare
   <button> fallback for the buttons the grid builder and field list generate,
   and aliases mapping the old .control-btn / .save-btn / .cancel-btn names onto
   the new .btn variants so JS-generated markup keeps its styling. */

/* Chrome/Edge on Windows render an OPEN dropdown's option list with the OS
   default (white) background while still inheriting our light text - unreadable
   until an option is highlighted. Setting both on <option> fixes it; the closed
   <select> box is unaffected. */
select option {
  background: var(--surface-2);
  color: var(--ink);
}

/* Fallback for buttons rendered by control.js without a .btn class. */
button {
  font-family: inherit;
  cursor: pointer;
}

/* ---- Legacy class aliases ------------------------------------------------
   .control-btn / .save-btn / .cancel-btn / .danger-btn are emitted by
   control.js template strings. Rather than touch a 2,500-line file, map them
   onto the design-system button so old and new markup render identically. */
.control-btn,
.save-btn,
.cancel-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.control-btn:hover:not(:disabled),
.cancel-btn:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.save-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.save-btn:hover:not(:disabled) {
  background: #ffd633;
  border-color: #ffd633;
}

.control-btn:disabled,
.save-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.danger-btn {
  background: transparent;
  color: var(--danger);
}

.danger-btn:hover:not(:disabled) {
  background: var(--danger-dim);
  border-color: var(--danger);
}

#preset-edit-actions {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-subtle);
}

#preset-edit-actions[hidden] { display: none; }

.preset-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.preset-dialog[hidden] {
  display: none;
}

.preset-dialog-content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
}

.preset-dialog-content h3 {
  margin: 0 0 16px;
  font-size: 16px;
}

.preset-dialog-content input {
  width: 100%;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  margin-bottom: 16px;
  font-family: inherit;
}

.preset-dialog-content input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.preset-dialog-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.preset-dialog-buttons button {
  flex: 1;
}

#preset-list-container {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.preset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--panel-2);
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, border-left 0.2s;
}

.preset-item:hover {
  background: var(--panel);
}

.preset-item-actions {
  display: flex;
  gap: 4px;
}

.preset-item-btn {
  padding: 4px 8px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.2s;
}

.preset-item-btn:hover {
  background: #2563eb;
}

.preset-item-btn[data-action="edit"] {
  background: #9333ea;
}

.preset-item-btn[data-action="edit"]:hover {
  background: #7e22ce;
}

.preset-item-btn.delete,
.preset-item-btn[data-action="delete"] {
  background: var(--red);
}

.preset-item-btn.delete:hover,
.preset-item-btn[data-action="delete"]:hover {
  background: #dc2626;
}

/* Slider visuals come from design-system.css (input[type="range"]); .slider
   only carries width, since it's applied to sliders of several sizes. */

#global-scale-value,
#global-width-value,
#global-height-value,
#preview-size-value {
  min-width: 52px;
  text-align: right;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   Live preview

   Sits inside .app-top, which is the sticky element - so the preview rides
   along at the top of the viewport without needing position:fixed or a
   hand-tuned body padding to compensate for the space it would otherwise
   take out of flow. Collapsing it just changes the sticky block's height.
   ========================================================================= */

#preview-section {
  border-top: 1px solid var(--line-subtle);
  background: var(--surface-1);
}

.preview-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 940px;
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-5);
}

.preview-bar .eyebrow { flex: 1 1 auto; }

.preview-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.preview-controls .slider { width: 110px; }

#preview-body {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-3);
}

#preview-body[hidden] { display: none; }

#preview-container {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #000;
  /* Capped relative to the viewport so the preview can never grow tall enough
     to push the settings it is previewing off screen. */
  max-height: 42vh;
}

#widget-preview {
  display: block;
  width: 100%;
  height: 42vh;
  max-height: 340px;
  border: none;
  background: #000;
}

.feedback.dirty { color: var(--accent); }

.hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* .hint-inline predates the shared .hint - same role, kept so JS-generated
   markup still renders. New markup should use .hint. */
.hint-inline {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.hint a { color: var(--accent); }

.feedback {
  font-size: var(--fs-sm);
  margin-top: var(--sp-2);
}

.feedback:empty { margin-top: 0; }
.feedback.ok { color: var(--ok); }
.feedback.error { color: var(--danger); }

#overlay-key-input { max-width: 160px; }
#api-key-input { min-width: 0; }

/* .btn-group is the JS hook; .segmented supplies the visuals. Any group still
   carrying only .btn-group falls back to a plain wrapping flex row. */
.btn-group:not(.segmented) {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

.btn-group:not(.segmented) button.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

#open-overlay-link {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}

#open-overlay-link:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

#open-overlay-link:hover { background: rgba(255,255,255,0.06); }

/* ---- Widget Fields editor: toggle + reorder + line-break-after, one row per
   field in FIELD_DEFS (public/fields.js) - mirrors the overlay's own gear-icon
   panel so both stay in sync. ---- */

.field-order-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.field-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-top: 2px solid transparent;
  cursor: grab;
}

.field-order-item.dragging {
  opacity: 0.4;
}

.field-order-item.drag-over {
  border-top-color: var(--accent);
}

.field-order-grip {
  flex-shrink: 0;
  opacity: 0.45;
  font-size: 13px;
  line-height: 1;
}

.field-order-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.field-order-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.field-order-controls button {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.field-order-break {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  cursor: pointer;
  opacity: 0.85;
}

.field-order-break[hidden] { display: none; }