styles.css

:root {
  /* warm indigo/plum dark base - cozy, not clinical slate */
  --bg: #1a1726;
  --panel: #221d33;
  --panel-2: #2a2440;
  --line: #372f52;
  --fg: #ece8f5;
  --dim: #9b90bd;
  /* arcade accent set */
  --accent: #ff7ac6;       /* hot magenta-pink - the primary pop */
  --accent-2: #57e2e5;     /* bright cyan */
  --grape: #b48cff;        /* soft purple */
  --sun: #ffd45e;          /* sunny yellow */
  --err: #ff6b8a;
  --warn: #ffce54;
  --ok: #6ce7a8;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --radius: 9px;
}

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 14px/1.5 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  background-image: radial-gradient(1200px 600px at 85% -10%, rgba(255,122,198,0.06), transparent 60%),
                    radial-gradient(900px 500px at 0% 110%, rgba(87,226,229,0.05), transparent 60%);
}

.ide { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--line);
}
.logo {
  font-weight: 800; letter-spacing: 0.3px; font-size: 17px;
  background: linear-gradient(92deg, var(--accent), var(--grape) 55%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo .dim { color: var(--dim); font-weight: 600; -webkit-text-fill-color: var(--dim); }
.status { font-size: 12px; font-weight: 700; color: var(--ok); }
.status.err { color: var(--err); }
.build-msg { font: 12px/1 var(--mono); color: var(--dim); margin-left: auto; }
.build-msg .err { color: var(--err); }

.play {
  font: 800 13px/1 system-ui, sans-serif; color: #2a0b1e;
  background: linear-gradient(180deg, #ffa3d6, var(--accent));
  border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer;
  box-shadow: 0 3px 0 #c94d92, 0 5px 14px rgba(255,122,198,0.35);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.play:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 4px 0 #c94d92, 0 7px 18px rgba(255,122,198,0.45); }
.play:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #c94d92, 0 2px 8px rgba(255,122,198,0.35); }
.play:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

.tb-btn {
  font: 700 12px system-ui, sans-serif; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.tb-btn:hover:not(:disabled) { background: #352c52; border-color: var(--grape); color: #fff; }
.tb-btn:disabled { opacity: 0.4; cursor: default; }

/* body = sidebar + panes */
.body { flex: 1; display: flex; min-height: 0; }

/* sidebar (project explorer) */
.sidebar {
  width: 180px; flex: 0 0 180px; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line); overflow: auto;
}
.side-section { border-bottom: 1px solid var(--line); }
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--grape);
}
.side-actions { display: flex; gap: 5px; }
.side-actions button {
  width: 22px; height: 22px; line-height: 1; padding: 0; color: var(--fg); font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.side-actions button:hover { border-color: var(--accent-2); color: #fff; }
.side-list { list-style: none; margin: 0; padding: 2px 6px 10px; }
.side-list li { display: flex; align-items: stretch; border-radius: 8px; margin: 1px 0; }
.side-list li.active { background: linear-gradient(90deg, rgba(255,122,198,0.18), rgba(180,140,255,0.10)); box-shadow: inset 3px 0 0 var(--accent); }
.side-list li.empty { padding: 4px 8px; color: var(--dim); font-size: 12px; }
.side-item {
  flex: 1; text-align: left; padding: 6px 10px; color: var(--fg); background: none;
  border: 0; cursor: pointer; font: 600 13px system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis;
  display: flex; flex-direction: column; gap: 1px; min-width: 0; border-radius: 8px;
}
.side-item:hover { background: rgba(180,140,255,0.10); }
.side-item.example { color: var(--accent-2); }
.side-blurb { font: 11px var(--mono); color: var(--dim); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-del {
  width: 24px; color: var(--dim); background: none; border: 0; cursor: pointer; font-size: 16px;
}
.side-del:hover { color: var(--err); }

/* editor spans the left; emulator top-right, problems bottom-right. The right
   column is sized for the emulator (the 256 canvas + its chrome, ~304 gives the
   canvas a little breathing room above the 256 minimum) - NOT for the RAM hex
   dump. The RAM view is a secondary panel and scrolls horizontally on its own
   (.ram overflow:auto + .ram-row nowrap) when its 16-byte rows exceed the
   column, so the always-visible emulator no longer wastes ~200px of editor
   width sizing for it. */
.panes {
  flex: 1; display: grid; min-height: 0; min-width: 0;
  /* minmax(0, 1fr) - NOT plain 1fr - so the editor column can shrink below its
     content (a zoomed sprite canvas) and scroll inside itself instead of pushing
     the whole page wide. */
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-rows: minmax(330px, auto) minmax(0, 1fr);
}
/* draggable column boundary. The sidebar one is an inline flex child (4px
   gutter); the emulator one is absolutely positioned on the emu-pane's left edge
   (that column is a grid cell, no room for a flex gutter). Both widen their hit
   area slightly and glow on hover. */
.col-resizer {
  flex: 0 0 4px; width: 4px; align-self: stretch; cursor: col-resize;
  background: var(--line); z-index: 5;
}
.col-resizer:hover, .col-resizer:active { background: var(--accent-2); }
.emu-resizer {
  position: absolute; top: 0; bottom: 0; left: -2px; width: 6px; flex: none;
  background: transparent;
}
.emu-resizer:hover, .emu-resizer:active { background: var(--accent-2); }

.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); }
.editor-pane { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.emu-pane { grid-column: 2; grid-row: 1; border-right: none; position: relative; }
.output-pane { grid-column: 2; grid-row: 2; border-right: none; border-top: 1px solid var(--line); }
.pane-title {
  padding: 7px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--grape); background: var(--panel); border-bottom: 1px solid var(--line);
}

/* editor */
.editor { flex: 1; display: flex; min-height: 0; background: #0f1117; overflow: hidden; }
.gutter {
  width: 44px; padding: 8px 0; overflow: hidden; text-align: right;
  color: var(--dim); font: 13px/1.55 var(--mono); user-select: none; background: #0d0f14;
}
.gline { padding-right: 6px; white-space: nowrap; }
.gline .lnum { margin-left: 4px; }
.gline.error { color: var(--err); }
.gline.warning { color: var(--warn); }
/* Monaco fills the editor pane */
.monaco { flex: 1; min-height: 0; height: 100%; width: 100%; }
.editor-loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--dim); font: 13px var(--mono); }

/* output */
.output-pane { overflow: hidden; }
.problems { list-style: none; margin: 0; padding: 6px 0; overflow: auto; font: 12px/1.5 var(--mono); flex: 1; min-height: 0; }
.problems li { padding: 2px 12px; }
.problems li.ok { color: var(--ok); }
.problems li.error { color: var(--err); }
.problems li.warning { color: var(--warn); }
.problems .loc { color: var(--dim); margin-right: 8px; }

/* center-pane tabs */
.pane-tabs { display: flex; gap: 2px; background: var(--panel); border-bottom: 1px solid var(--line); padding: 0 6px; }
.pane-tabs .tab {
  font: 12px var(--mono); color: var(--dim); background: none; border: 0;
  border-bottom: 2px solid transparent; padding: 7px 12px; cursor: pointer;
}
.pane-tabs .tab:hover { color: var(--fg); }
.pane-tabs .tab.sel { color: #fff; border-bottom-color: var(--accent); }
.pane-tabs .tab.add { color: var(--accent-2); font-weight: 700; }
.pane-tabs .tab.cheat-tab { margin-left: auto; color: var(--sun); }

/* cheatsheet reference (rendered markdown) */
.cheat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--dim); font: 12px var(--mono); }

/* project settings (project.json editor) */
.settings { flex: 1; min-height: 0; overflow: auto; padding: 24px 28px; background: #0f1117; }
.settings-inner { max-width: 560px; }
.settings h2 { font-size: 18px; color: #fff; margin: 0 0 4px; }
.settings-sub { color: var(--dim); font: 12px/1.5 system-ui, sans-serif; margin: 0 0 22px; }
.settings-sub code, .settings-hint code { font: 11px var(--mono); color: var(--accent-2); }
.settings-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.settings-label { font: 700 12px system-ui, sans-serif; color: var(--grape); }
.settings-field input[type="text"] {
  background: #12151c; color: var(--fg); border: 1px solid var(--line);
  border-radius: 7px; padding: 8px 10px; font: 13px var(--mono); max-width: 360px;
}
.settings-field input[type="text"]:focus { outline: none; border-color: var(--accent-2); }
.settings-hint { font: 11px/1.45 system-ui, sans-serif; color: var(--dim); }
.settings-toggle { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, #14171f, #10131a); }
.settings-toggle input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; }
.settings-toggle > span { display: flex; flex-direction: column; gap: 4px; }
.settings-toggle b { color: #eef1f6; font-size: 13px; }
/* doc switcher: cheatsheet + the PICO-8 porter docs in one pane */
.cheatsheet-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cheat-tabs {
  display: flex; gap: 4px; padding: 6px 10px 0; flex: none;
  border-bottom: 1px solid var(--line); background: #0e1016;
}
.cheat-doctab {
  appearance: none; border: 0; cursor: pointer;
  padding: 7px 13px; border-radius: 8px 8px 0 0;
  font: 600 12px var(--mono); color: var(--dim); background: transparent;
}
.cheat-doctab:hover { color: var(--fg); }
.cheat-doctab.active {
  color: var(--sun); background: #171a26;
  box-shadow: inset 0 -2px 0 var(--sun);
}
.cheatsheet {
  flex: 1; min-height: 0; overflow: auto; padding: 24px 30px 60px;
  color: var(--fg); font: 14px/1.65 system-ui, sans-serif;
  /* a subtle two-tone wash instead of flat charcoal */
  background:
    radial-gradient(1100px 500px at 100% -10%, rgba(180,140,255,0.08), transparent 60%),
    radial-gradient(900px 500px at -10% 8%, rgba(87,226,229,0.06), transparent 55%),
    #0e1016;
}
.markdown { max-width: 860px; }

/* title: big, gradient, with a lede paragraph that pops */
.markdown h1 {
  font-size: 26px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #ffa3d6, #b48cff 45%, #57e2e5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.markdown h1 + p { color: #eef1f6; font-size: 15px; }
.markdown h1 + p strong { color: var(--accent-2); }

/* section headings: an accent bar on the left, clear rhythm */
.markdown h2 {
  font-size: 16px; font-weight: 700; margin: 34px 0 12px; padding: 3px 0 3px 12px;
  color: #fff; border-left: 3px solid var(--grape);
  border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.markdown h3 { font-size: 13px; font-weight: 700; margin: 20px 0 6px; color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.04em; }
.markdown p, .markdown li { color: #cbd2de; }
.markdown strong { color: #eef1f6; }
.markdown a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(87,226,229,0.35); }
.markdown a:hover { border-bottom-color: var(--accent-2); }

/* inline code: a subtle chip; keywords read as "code" not "noise" */
.markdown code { font: 12.5px var(--mono); background: rgba(255,212,94,0.10); color: var(--sun); padding: 1.5px 6px; border-radius: 5px; border: 1px solid rgba(255,212,94,0.16); }
/* code blocks: card with a soft top accent, monospace body */
.markdown pre {
  position: relative; background: #12151d; border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 15px; margin: 12px 0; overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.markdown pre::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 10px 10px 0 0; background: linear-gradient(90deg, var(--grape), var(--accent-2)); opacity: 0.6; }
.markdown pre code { background: none; border: 0; color: #b8c6d8; padding: 0; font-size: 12.5px; line-height: 1.55; }

/* tables: zebra rows, accent header, rounded frame */
.markdown table { border-collapse: separate; border-spacing: 0; margin: 14px 0; width: 100%; display: block; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.markdown th, .markdown td { border-bottom: 1px solid var(--line); padding: 7px 12px; text-align: left; font-size: 13px; }
.markdown tr:last-child td { border-bottom: 0; }
.markdown th { background: linear-gradient(180deg, #1c2030, #171a26); color: var(--grape); font-weight: 700; position: sticky; top: 0; }
.markdown tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.markdown td code { white-space: nowrap; }
.markdown hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }

/* callouts (blockquotes): a tinted card with a bar, not just dim grey */
.markdown blockquote {
  border-left: 3px solid var(--accent-2); margin: 14px 0; padding: 10px 14px;
  color: #cdd4e0; background: rgba(87,226,229,0.06); border-radius: 0 8px 8px 0;
}
.markdown blockquote p { margin: 4px 0; }
.markdown ul, .markdown ol { padding-left: 22px; }
.markdown li { margin: 3px 0; }
.markdown li::marker { color: var(--grape); }

/* --- inline-SVG diagrams (replace the ASCII art) --- */
.cheat-figure {
  margin: 14px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #14171f, #10131a);
}
.cheat-svg { width: 100%; max-width: 480px; height: auto; display: block; }
/* the "machine at a glance" spec table */
.cheat-spec { border-collapse: separate; border-spacing: 0; margin: 14px 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cheat-spec th { width: 92px; background: linear-gradient(180deg, #1c2030, #171a26); color: var(--accent-2); font: 700 12px var(--mono); text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cheat-spec td { color: #d6dae2; font: 13px var(--mono); padding: 6px 12px; border-bottom: 1px solid var(--line); }
.cheat-spec tr:last-child th, .cheat-spec tr:last-child td { border-bottom: 0; }
.cheat-spec tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* sprite editor */
.sprite-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #0f1117; }
.sprite-toolbar {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.sprite-toolbar .tool, .music-toolbar .tool, .frame-toolbar .tool {
  font: 700 12px system-ui, sans-serif; color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.sprite-toolbar .tool:hover, .music-toolbar .tool:hover, .frame-toolbar .tool:hover { border-color: var(--grape); }
.sprite-toolbar .tool.sel { background: linear-gradient(180deg, #ffa3d6, var(--accent)); color: #2a0b1e; border-color: var(--accent); }
.sprite-toolbar .tool.import, .music-toolbar .tool.import { color: var(--accent-2); border-color: var(--accent-2); }
/* icon tool buttons: square-ish, the Tabler glyph centered */
.sprite-toolbar .tool.icon {
  padding: 5px; width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 7px;
}
.sprite-toolbar .tool.icon .ti { font-size: 17px; line-height: 1; }
.sprite-toolbar .tool.icon:disabled { opacity: 0.35; cursor: default; border-color: var(--line); }
.sprite-toolbar .tool.icon.sel { background: linear-gradient(180deg, #ffa3d6, var(--accent)); color: #2a0b1e; border-color: var(--accent); }
.sprite-toolbar .import-msg, .music-toolbar .import-msg, .frame-toolbar .import-msg { font: 11px var(--mono); color: var(--ok); }
.sprite-toolbar .tb-gap { width: 6px; }
.sprite-toolbar .tb-sep, .music-usebar .tb-sep, .music-toolbar .tb-sep, .frame-toolbar .tb-sep { flex: 1; }
.sprite-toolbar .zoom { display: flex; align-items: center; gap: 6px; font: 12px var(--mono); color: var(--dim); }
.sprite-body { flex: 1; display: flex; min-height: 0; min-width: 0; overflow: hidden; }
/* the canvas region scrolls on its own (both axes) when zoomed past the pane;
   the palette stays pinned beside it at a fixed width. */
.sprite-canvas-wrap { flex: 1 1 auto; min-width: 0; padding: 16px; overflow: auto; }
/* the sheet canvas + the guide overlay share one stacking box so the quadrant
   borders / cell grid sit exactly on top of the pixels regardless of zoom. */
.sprite-canvas-stack { position: relative; }
.sprite-canvas {
  image-rendering: pixelated; cursor: crosshair;
  border: 1px solid var(--line); background: #000; display: block;
}
.sprite-overlay {
  position: absolute; left: 0; top: 0; pointer-events: none;
  image-rendering: pixelated;
}
.sprite-readout { margin-top: 8px; font: 11px var(--mono); color: var(--accent-2); }
.sprite-readout .dim { color: var(--dim); }
.sprite-toolbar .quad-sel select {
  font: 11px var(--mono); background: #1a1d29; color: var(--fg);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 4px;
}
.sprite-toolbar .grid-toggle { display: flex; align-items: center; gap: 4px; font: 11px var(--mono); color: var(--dim); }

/* palette picker */
.palette { flex: 0 0 224px; width: 224px; padding: 12px; border-left: 1px solid var(--line); overflow: auto; }
.pal-label { font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.5px; color: var(--dim); margin: 4px 0 4px; }
.pal-row.p8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; margin-bottom: 8px; max-width: 200px; }
.pal-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; max-width: 200px; }
.swatch {
  aspect-ratio: 1 / 1; border: 1px solid rgba(0,0,0,0.35); border-radius: 2px; padding: 0;
  cursor: pointer; min-width: 10px;
}
.pal-row.p8 .swatch { border-radius: 3px; }
.swatch.sel { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
.swatch.transparent {
  background:
    linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%) 0 0/8px 8px,
    linear-gradient(45deg, #444 25%, #222 25%, #222 75%, #444 75%) 4px 4px/8px 8px, #222;
}
.pal-current { margin-top: 10px; font: 11px var(--mono); color: var(--fg); }

/* frame-table editor */
.frame-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0f1117; }
.frame-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.fe-hint { font: 12px var(--mono); color: var(--dim); }
.frame-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
/* the canvas area scrolls on its own so zooming grows/scrolls it WITHOUT moving
   the frame list beside it. */
.frame-canvas-scroll { flex: 1 1 auto; min-width: 0; overflow: auto; }
.frame-canvas-wrap { position: relative; flex: 0 0 auto; margin: 16px; }
.frame-canvas { image-rendering: pixelated; border: 1px solid var(--line); background: #000; display: block; }
.frame-overlay { position: absolute; inset: 0; cursor: crosshair; }
.frame-rect { fill: rgba(94,200,255,0.10); stroke: var(--accent); stroke-width: 0.5; }
.frame-rect.sel { fill: rgba(94,200,255,0.22); stroke: #fff; stroke-width: 0.7; }
.frame-rect.carving { fill: rgba(87,217,119,0.18); stroke: var(--ok); stroke-dasharray: 2 1; }
.frame-num { fill: #fff; font: 5px var(--mono); paint-order: stroke; stroke: #000; stroke-width: 0.6; }
.frame-anchor { fill: var(--warn); stroke: #000; stroke-width: 0.4; }

.frame-side { flex: 0 0 260px; width: 260px; border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: auto; }
.frame-list-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font: 11px var(--mono); color: var(--dim); text-transform: uppercase; }
.fe-play { font: 700 12px system-ui, sans-serif; color: #2a0b1e; background: linear-gradient(180deg, #ffa3d6, var(--accent)); border: 0; border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.fe-play:disabled { opacity: 0.4; cursor: default; }
.frame-preview { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); min-height: 88px; }
.frame-preview-canvas { image-rendering: pixelated; border: 1px solid var(--line); background: #101319; }
.frame-preview .fps { display: flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--dim); }
.fe-empty { color: var(--dim); font: 12px var(--mono); padding: 4px 0; }
.frame-list { list-style: none; margin: 0; padding: 4px 0; }
.frame-list li { display: flex; align-items: center; gap: 8px; padding: 4px 12px; cursor: pointer; font: 12px var(--mono); }
.frame-list li:hover { background: #232936; }
.frame-list li.sel { background: #2a3140; }
.fl-num { color: var(--accent); width: 18px; }
.fl-dims { flex: 1; color: var(--fg); }
.fl-actions { display: flex; gap: 2px; }
.fl-actions button { width: 20px; color: var(--dim); background: none; border: 0; cursor: pointer; }
.fl-actions button:hover { color: var(--fg); }
.frame-fields { padding: 10px 12px; border-top: 1px solid var(--line); }
.ff-title { font: 11px var(--mono); color: var(--dim); text-transform: uppercase; margin-bottom: 6px; }
.ff-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 12px var(--mono); }
.ff-row span { width: 32px; color: var(--dim); }
.ff-row input { width: 70px; background: #12151c; color: var(--fg); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; font: 12px var(--mono); }
.ff-center { margin-top: 6px; font: 11px system-ui, sans-serif; color: var(--fg); background: #262b36; border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; cursor: pointer; }

/* flash button + modal */
.tb-btn.flash { color: var(--sun); border-color: var(--sun); }
.tb-btn.flash:hover:not(:disabled) { background: rgba(255,212,94,0.12); }
.flash-modal { position: fixed; inset: 0; background: rgba(10,8,18,0.72); display: flex; align-items: center; justify-content: center; z-index: 100; }
.flash-box { width: 460px; max-width: 90vw; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.flash-title { font: 800 15px system-ui, sans-serif; color: var(--sun); margin-bottom: 12px; }
.flash-bar { height: 10px; background: #12151c; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.flash-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--sun)); transition: width 0.2s; }
.flash-status { font: 12px var(--mono); color: var(--fg); margin-bottom: 8px; }
.flash-status .err { color: var(--err); }
.flash-log { font: 11px/1.5 var(--mono); color: var(--dim); max-height: 160px; overflow: auto; background: #12151c; border-radius: 8px; padding: 8px 10px; margin-bottom: 12px; }
.flash-box .tb-btn { width: 100%; }

/* debugger: RAM viewer */
.pane-tabs.bottom { border-top: 0; }
.ram-empty { padding: 16px 12px; color: var(--dim); font: 12px var(--mono); }
.ram { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: auto; padding: 6px 8px; }
.ram-nav { display: flex; align-items: center; gap: 8px; padding: 4px 4px 8px; }
.ram-nav button { width: 24px; color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.ram-nav button:disabled { opacity: 0.4; cursor: default; }
.ram-addr { font: 700 12px var(--mono); color: var(--accent-2); }
.ram-size { margin-left: auto; font: 11px var(--mono); color: var(--dim); }
.ram-grid { font: 11px/1.5 var(--mono); }
.ram-row { display: flex; gap: 10px; white-space: nowrap; }
.ram-rowaddr { color: var(--grape); }
.ram-hex { color: var(--fg); }
.ram-byte { display: inline-block; width: 18px; text-align: center; cursor: pointer; border-radius: 3px; }
.ram-byte:hover { background: rgba(180,140,255,0.2); }
.ram-byte.zero { color: #4b4368; }
.ram-byte.dim { color: #33304a; cursor: default; }
.ram-edit { width: 18px; padding: 0; text-align: center; background: var(--accent); color: #1a1726; border: 0; border-radius: 3px; font: 700 11px var(--mono); }
.ram-ascii { color: var(--dim); }
.ram-ascii .dim { color: #33304a; }

/* music tracker */
.music-pane-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0f1117; }
/* song selector: one tab per .gtm2 song in the project + add/delete */
.song-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 5px; border-bottom: 1px solid var(--line); background: #12141c; flex-wrap: wrap; }
.song-tab {
  font: 11px var(--mono); color: var(--dim); background: #1a1d29;
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; cursor: pointer;
}
.song-tab:hover { border-color: var(--grape); color: var(--fg); }
.song-tab.sel { background: linear-gradient(180deg, #b48cff, var(--grape)); color: #160b2a; border-color: var(--grape); }
.song-add, .song-del {
  font: 12px var(--mono); background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; cursor: pointer;
}
.song-add:hover { color: var(--ok); border-color: var(--ok); }
.song-del { margin-left: 4px; }
.song-del:hover { color: var(--accent); border-color: var(--accent); }
.music-usebar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.music-usehint { font: 11px var(--mono); color: var(--dim); }
.music-usehint code { color: var(--accent-2); }
/* Only the note ROWS scroll: the toolbar, piano bar, and channel headers stay
   pinned so a long (up to 256-step) song scrolls under fixed controls. */
.music-editor { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden; }
.music-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }

/* piano note picker - two stacked full-width rows: info/controls, then keys */
.music-piano-bar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.mpb-info { display: flex; align-items: center; gap: 16px; width: 100%; flex-wrap: wrap; }
.mpb-label { font: 12px var(--mono); color: var(--dim); white-space: nowrap; }
.mpb-label b { color: var(--sun); }
.mpb-kbd { font: 11px var(--mono); color: var(--grape); margin-left: auto; white-space: nowrap; }
.mpb-vel { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); color: var(--dim); white-space: nowrap; }
.mpb-vel input[type="range"] { width: 120px; }
.mpb-vel input[type="range"]:disabled { opacity: 0.4; }
.mpb-vel b { color: var(--sun); min-width: 18px; }
.piano { width: 100%; }
.piano-keys { position: relative; display: flex; height: 76px; width: 100%; user-select: none; }
.pk-white {
  flex: 1; min-width: 0; margin: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, #f4f0fb, #d9d2ea); border: 1px solid #2a2440;
  border-radius: 0 0 4px 4px; display: flex; align-items: flex-end; justify-content: center;
}
.pk-white + .pk-white { border-left: 0; }
.pk-white:hover { background: linear-gradient(180deg, #fff, #e9e3f6); }
.pk-white.kbd { box-shadow: inset 0 -3px 0 rgba(180,140,255,0.55); }
.pk-white.sel { background: linear-gradient(180deg, #ffd0ec, var(--accent)); }
.pk-white.sel.kbd { box-shadow: inset 0 -3px 0 rgba(180,140,255,0.9); }
.pk-white .pk-label { font: 8px var(--mono); color: #6b6486; padding-bottom: 3px; pointer-events: none; }
.pk-white.sel .pk-label { color: #2a0b1e; font-weight: 700; }
.pk-black {
  position: absolute; top: 0; width: calc((100% / var(--n-white)) * 0.64); height: 62%;
  margin-left: 0; transform: translateX(-50%);
  background: linear-gradient(180deg, #3a3450, #17141f); border: 1px solid #000;
  border-radius: 0 0 3px 3px; cursor: pointer; z-index: 2;
}
.pk-black:hover { background: linear-gradient(180deg, #4a4468, #221d33); }
.pk-black.sel { background: linear-gradient(180deg, var(--accent), #8a2f68); }
.m-play { font: 800 13px system-ui, sans-serif; color: #2a0b1e; background: linear-gradient(180deg, #ffa3d6, var(--accent)); border: 0; border-radius: 999px; padding: 7px 16px; cursor: pointer; }
.m-play.on { background: linear-gradient(180deg, #8ff0f2, var(--accent-2)); color: #06121a; }
.m-field { display: flex; align-items: center; gap: 6px; font: 12px system-ui, sans-serif; color: var(--dim); }
.m-field input, .m-field select { background: #12151c; color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font: 12px var(--mono); }
.m-field input { width: 56px; }
.m-rate { font: 11px var(--mono); color: var(--grape); white-space: nowrap; }

/* channel headers stay pinned above the scrolling rows. A stable scrollbar
   gutter on BOTH keeps the same content width so the columns stay aligned once
   the grid shows a scrollbar. */
.music-heads { flex: 0 0 auto; display: flex; gap: 4px; padding: 6px 12px 0; scrollbar-gutter: stable; overflow-y: hidden; }
.mh-step { width: 34px; }
.mh-chan { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-bottom: 2px solid; border-radius: 6px 6px 0 0; background: var(--panel-2); }
.mh-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.mh-chan select { flex: 1; min-width: 0; background: #12151c; color: var(--fg); border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; font: 11px var(--mono); }

.music-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding: 4px 12px 8px; }
.mg-row { display: flex; gap: 4px; align-items: stretch; }
.mg-row.beat { margin-top: 2px; }
.mg-row.playhead { background: rgba(255,122,198,0.14); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,122,198,0.35); }
.mg-step { width: 34px; display: flex; align-items: center; justify-content: center; color: var(--dim); font: 11px var(--mono); }
.mg-row.beat .mg-step { color: var(--grape); font-weight: 700; }
.mg-cell {
  flex: 1; min-width: 0; padding: 5px 4px; margin: 1px 0; cursor: pointer;
  background: #171a24; color: var(--dim); border: 1px solid var(--line); border-radius: 6px;
  font: 700 12px var(--mono); text-align: center;
}
.mg-cell:hover { border-color: var(--grape); }
.mg-cell.on { border-color: transparent; }
.mg-cell.cursor { outline: 2px solid var(--sun); outline-offset: -2px; z-index: 1; }
.music-hint { flex: 0 0 auto; padding: 8px 12px 14px; color: var(--dim); font: 11px var(--mono); border-top: 1px solid var(--line); }

/* emulator */
.emu { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #0b0d12; }
/* emulator titlebar: label + an icon-only fullscreen button */
.emu-titlebar { display: flex; align-items: center; justify-content: space-between; }
.emu-fs {
  background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 2px;
  font-size: 15px; line-height: 1; border-radius: 5px;
}
.emu-fs:hover { color: var(--accent-2); }

/* instant, themed tooltip (the native title attr is slow + unstyled). Put
   data-tip on any element with class .tip. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; top: 100%; right: 0; margin-top: 6px;
  white-space: nowrap; z-index: 200; pointer-events: none;
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; font: 11px/1.2 system-ui, sans-serif; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(-2px); transition: opacity 0.08s ease, transform 0.08s ease;
}
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: translateY(0); }

.emu-screen {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 0; padding: 12px; overflow: hidden; outline: none; cursor: pointer;
}
/* when fullscreened, the screen is the whole viewport: center the canvas and let
   it grow to the largest square that fits, still crisp (pixelated). */
.emu-screen:fullscreen { padding: 0; background: #000; }
/* the game is square (128x128); in fullscreen make it the largest square that
   fits the viewport, still crisp. Override the pane's min/max sizing explicitly. */
.emu-screen:fullscreen .emu-canvas {
  width: min(100vw, 100vh) !important;
  height: min(100vw, 100vh) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important;
}
.emu-screen:-webkit-full-screen .emu-canvas {
  width: min(100vw, 100vh); height: min(100vw, 100vh);
  min-width: 0; min-height: 0; max-width: none;
}
/* when the emulator holds the keyboard, show a glowing frame so it's obvious
   which pane owns input (editor vs game) */
.emu-screen.focused { box-shadow: inset 0 0 0 2px var(--accent-2); cursor: default; }
.emu-clickhint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font: 700 11px system-ui, sans-serif; color: #06121a; background: var(--accent-2);
  padding: 3px 10px; border-radius: 999px; pointer-events: none; opacity: 0.9;
}
.emu-canvas {
  /* native 128x128 upscaled with crisp square pixels. At least 256 (2x integer)
     tall/wide; grows to fill the pane but never below 256 so it's comfortably
     visible. */
  image-rendering: pixelated;
  width: auto; height: auto; aspect-ratio: 1 / 1;
  min-width: 256px; min-height: 256px;
  max-width: 100%;
  object-fit: contain; background: #000; display: block;
}
.emu-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; font: 12px/1.4 var(--mono); color: var(--dim);
  background: rgba(11,13,18,0.72);
}
.emu-overlay.error { color: var(--err); }
.emu-overlay .err { color: var(--err); }
/* building: opaque cover (hides the previous game) + spinner. Column layout so
   the "building" line and the byte/timing message stack. */
.emu-overlay.building { flex-direction: column; gap: 10px; color: var(--accent-2); background: rgba(11,13,18,0.92); }
.emu-overlay.building .emu-buildmsg { font-size: 11px; color: var(--dim); }
.emu-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid rgba(87,226,229,0.25); border-top-color: var(--accent-2);
  animation: emu-spin 0.8s linear infinite;
}
@keyframes emu-spin { to { transform: rotate(360deg); } }
.emu-controls {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-top: 1px solid var(--line); background: var(--panel);
}
/* icon transport buttons (stop/resume, restart) */
.emu-controls .emu-btn {
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 7px; padding: 0; cursor: pointer;
}
.emu-controls .emu-btn .ti { font-size: 17px; line-height: 1; }
.emu-controls .emu-btn:hover:not(:disabled) { border-color: var(--accent-2); color: #fff; }
.emu-controls .emu-btn:disabled { opacity: 0.4; cursor: default; }
.emu-hint { font: 11px var(--mono); color: var(--dim); margin-left: 4px; }

/* New Project dialog: Blank + cloneable examples with 128x128 thumbnails */
.side-new {
  display: block; width: calc(100% - 16px); margin: 2px 8px 8px;
  padding: 7px 10px; font: 700 12px system-ui, sans-serif; color: #1a1726;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: 0; border-radius: 9px; cursor: pointer;
}
.side-new:hover { filter: brightness(1.1); }
.newproj-box {
  width: 720px; max-width: 94vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden;
}
.newproj-head {
  display: flex; align-items: baseline; gap: 10px; padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line);
}
.newproj-title { font: 800 16px system-ui, sans-serif; color: var(--accent); }
.newproj-sub { font: 12px system-ui, sans-serif; color: var(--dim); }
.newproj-close {
  margin-left: auto; width: 26px; height: 26px; line-height: 1; padding: 0;
  color: var(--fg); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; font-size: 15px;
}
.newproj-close:hover { border-color: var(--accent-2); color: #fff; }
.newproj-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; padding: 14px 20px 20px; overflow-y: auto;
}
.newproj-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; background: #12151c; border: 1px solid var(--line);
  border-radius: 12px;
}
.newproj-card:hover { border-color: var(--accent-2); }
.newproj-thumb {
  width: 128px; height: 128px; border-radius: 8px;
  image-rendering: pixelated; background: #0a0c10;
}
.newproj-thumb.blank {
  display: flex; align-items: center; justify-content: center;
  font: 300 56px system-ui, sans-serif; color: var(--grape);
  border: 1px dashed var(--line);
}
.newproj-name { font: 700 13px system-ui, sans-serif; color: var(--fg); }
.newproj-blurb {
  font: 11px/1.4 system-ui, sans-serif; color: var(--dim); text-align: center;
  flex: 1;   /* soak up the height difference so every Clone button lines up */
}
.newproj-clone {
  margin-top: auto;
  width: 100%; padding: 6px 0; font: 700 12px system-ui, sans-serif; color: #1a1726;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: 0; border-radius: 8px; cursor: pointer;
}
.newproj-clone:hover { filter: brightness(1.1); }

/* blank editor area until a project is picked */
.no-project {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; color: var(--dim);
  font: 13px system-ui, sans-serif;
}
.no-project .side-new { width: auto; padding: 8px 22px; }

/* delete-project confirm */
.confirm-box {
  width: 360px; max-width: 90vw; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.confirm-title { font: 800 15px system-ui, sans-serif; color: var(--err); margin-bottom: 8px; }
.confirm-text { font: 13px/1.5 system-ui, sans-serif; color: var(--fg); margin: 0 0 16px; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.confirm-actions button {
  padding: 7px 18px; font: 700 12px system-ui, sans-serif;
  border-radius: 8px; cursor: pointer;
}
.confirm-cancel { color: var(--fg); background: var(--panel-2); border: 1px solid var(--line); }
.confirm-cancel:hover { border-color: var(--accent-2); }
.confirm-danger { color: #fff; background: #b83a4e; border: 0; }
.confirm-danger:hover { filter: brightness(1.15); }

/* .gtg quadrant picker (import/export) */
.quadpick-box {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden;
}
.quadpick-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 20px 20px;
}
.quadpick-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px; background: #12151c; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.quadpick-card:hover { border-color: var(--accent-2); }
.quadpick-card canvas { width: 128px; height: 128px; image-rendering: pixelated; border-radius: 6px; }
.quadpick-name { font: 700 12px var(--mono); color: var(--fg); }
.quadpick-pos { font: 11px system-ui, sans-serif; color: var(--dim); }

/* gamepad mapper */
.emu-btn.attn { border-color: var(--sun); color: var(--sun); animation: gpm-pulse 1.2s ease-in-out infinite; }
@keyframes gpm-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.gpm-box {
  width: 380px; max-width: 92vw; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.gpm-body { padding: 16px 20px; }
.gpm-prompt { font: 16px system-ui, sans-serif; color: var(--fg); margin-bottom: 6px; }
.gpm-prompt b { color: var(--accent); }
.gpm-progress { float: right; color: var(--dim); font-size: 12px; }
.gpm-hint { color: var(--sun); font-size: 12px; margin-bottom: 10px; }
.gpm-map { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 12px 0; }
.gpm-bind {
  display: flex; justify-content: space-between; font: 12px var(--mono);
  color: var(--dim); padding: 3px 6px; border-radius: 5px;
}
.gpm-bind.cur { background: rgba(180,140,255,0.14); color: var(--fg); }
.gpm-bind.set { color: var(--fg); }
.gpm-src { color: var(--accent-2); }
.gpm-actions { display: flex; gap: 10px; margin-top: 8px; }
.gpm-actions button { padding: 7px 16px; font: 700 12px system-ui, sans-serif; border-radius: 8px; cursor: pointer; }
.gpm-raw { border-top: 1px solid var(--line); padding: 10px 20px; background: #12151c; }
.gpm-raw-row { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.gpm-raw-btn {
  width: 20px; height: 18px; display: inline-flex; align-items: center;
  justify-content: center; font: 10px var(--mono); color: #4b4368;
  background: #1a1a22; border-radius: 3px;
}
.gpm-raw-btn.on { background: #b83a4e; color: #fff; }
.gpm-raw-axes { display: flex; flex-wrap: wrap; gap: 8px; font: 10px var(--mono); color: var(--dim); }

/* import: merge into current project vs new project */
.merge-box {
  width: 460px; max-width: 92vw; max-height: 86vh; display: flex; flex-direction: column;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden;
}
.merge-body { padding: 14px 20px 18px; overflow-y: auto; }
.merge-sub { font: 13px/1.5 system-ui, sans-serif; color: var(--dim); margin: 0 0 12px; }
.merge-list { list-style: none; margin: 0 0 12px; padding: 0; }
.merge-list li { border-radius: 8px; padding: 2px 6px; }
.merge-list li.on { background: rgba(180,140,255,0.08); }
.merge-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 0; }
.merge-file { font: 12px var(--mono); color: var(--fg); }
.merge-nice { font: 11px system-ui, sans-serif; color: var(--dim); }
.merge-tag { margin-left: auto; font: 700 10px system-ui, sans-serif; padding: 2px 7px; border-radius: 999px; }
.merge-tag.new { color: var(--accent-2); background: rgba(120,200,255,0.12); }
.merge-tag.replace { color: var(--sun); background: rgba(255,212,94,0.14); }
.merge-warn {
  font: 12px/1.5 system-ui, sans-serif; color: var(--sun);
  background: rgba(255,212,94,0.08); border: 1px solid rgba(255,212,94,0.3);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 14px;
}
.merge-actions { display: flex; gap: 10px; justify-content: flex-end; }
.merge-actions button { padding: 7px 16px; font: 700 12px system-ui, sans-serif; border-radius: 8px; cursor: pointer; }
.merge-actions .confirm-danger:disabled { opacity: 0.4; cursor: default; }
.merge-all {
  margin-left: 8px; font: 600 11px system-ui, sans-serif; color: var(--accent-2);
  background: none; border: 0; cursor: pointer; padding: 0; text-decoration: underline;
}
.merge-all:hover { color: var(--fg); }