:root {
  --bg: #ffffff; --bg-2: #f4f5f7; --bg-3: #e9ebef;
  --fg: #1a1d21; --fg-2: #5b6470; --border: #d8dce2;
  --accent: #2f6feb; --accent-fg: #fff; --danger: #d23b3b;
  --topbar-h: 48px; --radius: 8px;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #1e1e1e; --bg-2: #252526; --bg-3: #2d2d30;
  --fg: #e6e6e6; --fg-2: #9aa0a8; --border: #3a3a3d;
  --accent: #4c9aff; --accent-fg: #0b1220; --danger: #f06a6a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* must win over .drawer/.seg display rules */
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--fg); background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
#app { display: flex; flex-direction: column; height: 100dvh; }

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center; gap: 8px;
  height: var(--topbar-h); padding: 0 10px;
  border-bottom: 1px solid var(--border); background: var(--bg-2);
  padding-top: env(safe-area-inset-top);
}
.brand { font-weight: 600; white-space: nowrap; opacity: .9; }
#offlineBadge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: #b45309; color: #fff; border-radius: 10px; font: 600 11px system-ui, sans-serif; white-space: nowrap; }
#offlineBadge::before { content: '●'; font-size: 8px; }
.spacer { flex: 1; }
.file-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.file-name { max-width: 28vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); }
.type-select {
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 6px; font-size: 13px; max-width: 40vw;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--fg); cursor: pointer; font-size: 16px;
}
.icon-btn:hover { background: var(--bg-3); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.seg button {
  border: 0; background: var(--bg); color: var(--fg-2); cursor: pointer;
  padding: 6px 9px; font-size: 14px; min-width: 36px;
}
.seg button.active { background: var(--accent); color: var(--accent-fg); }

/* ⋯ overflow popover (phones). Holds the controls moved out of the bar. */
.more-menu { position: fixed; right: 6px; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 4px); z-index: 40;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.32);
  padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; width: min(280px, 92vw); }
.more-menu > .type-select { flex: 1 0 100%; max-width: none; }
.more-menu > .seg { flex: 1 0 100%; }
.more-menu > .seg button { flex: 1; }
.more-menu > .icon-btn { width: 42px; height: 42px; }

/* Export / Download-as menu — a vertical list of actions. */
.export-menu { flex-direction: column; flex-wrap: nowrap; gap: 4px; width: min(240px, 92vw); }
.export-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--fg); font-size: 14px; cursor: pointer; }
.export-item:hover { background: var(--bg); border-color: var(--border); }
.export-loading { padding: 9px 12px; color: var(--fg-2); font-size: 13px; }

.file-loading {
  position: fixed; left: 50%; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 14px);
  z-index: 120; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  max-width: min(420px, calc(100vw - 24px)); padding: 10px 14px;
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}
.file-loading .boot-spinner-ring { width: 22px; height: 22px; border-width: 3px; flex: 0 0 auto; }
.file-loading-copy { min-width: 0; display: grid; line-height: 1.25; }
.file-loading-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-loading-detail { color: var(--fg-2); font-size: 12px; }

/* ── Body layout: sidebar + main ── */
.body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.main-area { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }

/* ── Folder tree sidebar (aligned to the jdeworks code-editor theme) ── */
.filetree { flex: 0 0 260px; width: 260px; min-height: 0; display: flex; flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--border); }
.ft-head { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 8px 6px 8px 12px; border-bottom: 1px solid var(--border); }
.ft-root { flex: 1; font: 600 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-close { width: 26px; height: 26px; font-size: 18px; }
.ft-export, .ft-tree-action { width: 26px; height: 26px; font-size: 15px; }
.ft-export[hidden], .ft-tree-action[hidden] { display: none; }
/* Edited-file marker in the tree (folder edit-tracking): a * after the name. */
.ft-file.ft-edited .ft-name::after { content: " *"; color: var(--accent); font-weight: 700; }
/* Moved-file indicator in the tree (Feature E virtual folder reorg). */
.ft-file.ft-moved .ft-name { font-style: italic; color: var(--fg-2); }
.ft-file.ft-moved .ft-name::before { content: "→ "; color: var(--accent); font-style: normal; font-weight: 600; }
.ft-move-dest { max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--accent); font-size: 11px; flex: 0 1 auto; }
/* Session-history files (opened individually, not from a folder): dimmed + italic when not active. */
.ft-file.ft-session:not(.active) .ft-dot { opacity: 0.4; }
.ft-file.ft-session:not(.active) .ft-name { opacity: 0.65; font-style: italic; }
/* Drop-target highlight when dragging a file over a folder row. */
.ft-row.ft-drop-target { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; outline: 1px solid var(--accent); outline-offset: -1px; }
.ft-notice { padding: 7px 12px; font: 11px/1.4 system-ui, sans-serif; color: var(--fg-2);
  background: var(--bg-3); border-bottom: 1px solid var(--border); }
.ft-notice[hidden] { display: none; }
.ft-loading { display: grid; gap: 6px; }
.ft-loading-label { color: var(--fg); font-weight: 600; }
.ft-loading-detail { font-size: 11px; color: var(--fg-2); }
.ft-loading-bar { --p: 0; height: 4px; border-radius: 999px; overflow: hidden; background: var(--border); position: relative; }
.ft-loading-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--accent); border-radius: inherit; transition: width .18s ease; }
.ft-loading-bar.indeterminate::before { width: 42%; animation: ft-load-slide 1.05s ease-in-out infinite; }
@keyframes ft-load-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(250%); } }
.ft-search { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ft-search[hidden] { display: none; }
.ft-search input { flex: 1; min-width: 0; font: 12px system-ui, sans-serif; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); }
.ft-search input:focus { outline: none; border-color: var(--accent); }
.ft-search-count { font: 11px system-ui, sans-serif; color: var(--fg-2); white-space: nowrap; }
.ft-body { flex: 1; overflow: auto; padding: 4px 0 14px; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ft-row { display: flex; align-items: center; gap: 7px; padding: 1px 10px 1px 8px; cursor: pointer;
  white-space: nowrap; user-select: none; }
.ft-row:hover { background: var(--bg-3); }
.ft-arrow { display: inline-block; width: 1em; color: var(--fg-2); font-size: 10px; flex: 0 0 auto; }
.ft-folder .ft-name { color: var(--fg); }
.ft-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.ft-icon { font-size: 11px; line-height: 1; flex: 0 0 auto; user-select: none; }
.ft-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.ft-size { margin-left: auto; padding-left: 10px; color: var(--fg-2); font-size: 11px; flex: 0 0 auto; }
.ft-file.active { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 2px 0 0 var(--accent); }
.ft-file:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ft-name.ft-ticker { text-overflow: clip; }   /* no ellipsis while the marquee scrolls */
.collapsed > .ft-children { display: none; }
/* Draggable sidebar resizer (desktop). Hidden via [hidden] when the tree is closed. */
.ft-resize { flex: 0 0 5px; align-self: stretch; cursor: col-resize; background: var(--border);
  position: relative; touch-action: none; }
.ft-resize:hover, .ft-resize:active { background: var(--accent); }
.ft-resize::before { content: ""; position: absolute; inset: 0 -4px; }   /* wider grab area */

/* ── Git repository browser ── */
.repo-badge { margin: 6px 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-3); color: var(--fg); cursor: pointer; font-size: 12.5px; text-align: left; }
.repo-badge:hover { border-color: var(--accent); color: var(--accent); }
.repo-panel { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.repo-view { display: flex; flex-direction: column; height: 100%; }
.repo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.repo-title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.repo-icon { color: var(--accent); }
.repo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-branch { background: var(--bg-3); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.repo-cols { flex: 1; min-height: 0; display: flex; }
.repo-list { flex: 1 1 55%; min-width: 0; overflow: auto; border-right: 1px solid var(--border); }
.repo-detail { flex: 1 1 45%; min-width: 0; overflow: auto; padding: 14px 16px; }
.repo-commit { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.repo-commit:hover { background: var(--bg-2); }
.repo-commit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.repo-commit.active { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.rc-id { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }
.rc-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-who { color: var(--fg-2); font-size: 11.5px; white-space: nowrap; }
.repo-note, .repo-hint { color: var(--fg-2); font-size: 12px; padding: 10px 14px; }
.repo-load-more { display: block; width: 100%; padding: 10px 14px; background: none; border: 0; border-top: 1px solid var(--border); color: var(--accent); font-size: 12px; cursor: pointer; text-align: center; }
.repo-load-more:hover { background: var(--bg-2); }
.repo-load-more:disabled { color: var(--fg-2); cursor: default; }
.rc-sha { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); word-break: break-all; margin-bottom: 10px; }
.rc-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 12px; font-size: 13px; }
.rc-meta dt { color: var(--fg-2); }
.rc-meta dd { margin: 0; word-break: break-word; }
.rc-date { color: var(--fg-2); font-size: 11.5px; }
.rc-message { white-space: pre-wrap; word-break: break-word; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.rc-files h3 { margin: 14px 0 8px; font-size: 13px; }
.rc-file-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rc-file-list li { display: flex; gap: 8px; align-items: baseline; padding: 6px 9px; border-top: 1px solid var(--border); font-size: 12px; }
.rc-file-list li:first-child { border-top: 0; }
.rc-status { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); min-width: 16px; }
.rc-path { word-break: break-all; }
.rc-path-link { appearance: none; border: 0; background: none; color: var(--accent); padding: 0; font: inherit; text-align: left; cursor: pointer; }
.rc-path-link:hover { text-decoration: underline; }
.rc-delta { margin-left: auto; white-space: nowrap; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.rc-add { color: var(--ok); }
.rc-del { color: var(--danger); }
@media (max-width: 760px) { .repo-cols { flex-direction: column; } .repo-list { border-right: 0; border-bottom: 1px solid var(--border); flex-basis: auto; } }

/* ── Intake ── */
.intake { flex: 1; display: grid; place-items: center; min-height: 0; overflow: auto; padding: 20px;
  padding-left: max(20px, env(safe-area-inset-left, 20px));
  padding-right: max(20px, env(safe-area-inset-right, 20px)); }
.dz-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dropzone {
  width: min(640px, 100%); text-align: center; padding: 40px 24px;
  border: 2px dashed var(--border); border-radius: 16px; background: var(--bg-2);
  transition: border-color .15s, background .15s;
}
.dropzone.drag-over { border-color: var(--accent); background: var(--bg-3); }
/* Whole-page drop affordance: while a file is dragged anywhere over the empty/intake
   screen, the page shows it accepts the drop (not just the middle dropzone). Added/removed
   in intake.js; only active when the intake screen is shown (a file open opts out). */
body.fv-dragging .dropzone { border-color: var(--accent); background: var(--bg-3); }
body.fv-dragging .intake::after {
  content: ''; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  border: 3px dashed var(--accent); border-radius: 12px; margin: 8px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.dz-icon { font-size: 44px; opacity: .5; }
.dropzone h1 { font-size: 20px; margin: 12px 0 4px; }
.muted { color: var(--fg-2); }
.dz-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-3); color: var(--fg); font-weight: 500;
}
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
/* ── Media: waveform panel (Feature D) ── */
.media-wv-wrap { margin: 0 12px 12px; }
.media-wv-toggle { background: none; border: 1px solid var(--border); color: var(--fg-2); border-radius: 6px;
  padding: 3px 10px; font-size: 11px; cursor: pointer; }
.media-wv-toggle:hover { background: var(--bg-3); color: var(--fg); }
.media-wv-panel { margin-top: 6px; border-radius: 8px; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--border); }
.media-wv-canvas { display: block; width: 100%; }
/* Per-track gain slider (mixer) in the playlist track list. */
.media-gain-slider { flex: 0 0 60px; height: 14px; cursor: pointer; accent-color: var(--accent);
  vertical-align: middle; }

/* ── Workspace ── */
.workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tabbar { display: none; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.tabbar button {
  flex: 1; border: 0; background: transparent; color: var(--fg-2);
  padding: 10px; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tabbar button.active { color: var(--fg); border-bottom-color: var(--accent); }
.panes { flex: 1; display: flex; min-height: 0; }
.pane { flex: 1; min-width: 0; min-height: 0; overflow: hidden; position: relative; }
.raw-pane { border-right: 0; }   /* the split divider provides separation in split view */
/* Draggable split divider (desktop split view). Hidden via [hidden] otherwise. */
.split-divider { flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: var(--border);
  position: relative; touch-action: none; }
.split-divider:hover, .split-divider:active { background: var(--accent); }
.split-divider::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 26px; border-radius: 2px; background: var(--bg); opacity: .6; }
.split-divider::before { content: ""; position: absolute; inset: 0 -5px; }   /* wider grab area */
.editor-host { position: absolute; inset: 0; }
.editor-status { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; z-index: 6;
  display: flex; align-items: center; gap: 7px; padding: 0 8px; background: var(--bg-2);
  border-top: 1px solid var(--border); color: var(--fg-2); font-size: 11px; }
.editor-status label { font-weight: 600; }
.editor-status select { min-width: 0; max-width: 180px; height: 22px; padding: 1px 5px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); font-size: 11px; }
.editor-indent-status { margin-left: auto; white-space: nowrap; }
.editor-indent-status[data-temporary="1"] { color: var(--accent); }
.raw-pane.has-editor-status .editor-host { bottom: 28px; }
/* Two-file compare bar: an overlay strip at the top of the raw pane; the editor insets below it. */
.compare-bar { position: absolute; top: 0; left: 0; right: 0; height: 30px; z-index: 5;
  display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--bg-2);
  border-bottom: 1px solid var(--border); font-size: 12px; }
.compare-bar[hidden] { display: none; }
.compare-bar.drag-over { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
/* Attention flash when the compare drop target appears (outline + bg only — no border, no layout shift). */
@keyframes compareBarFlash {
  0%, 100% { background: var(--bg-2); outline-color: transparent; }
  25%, 60% { background: color-mix(in srgb, var(--accent) 22%, var(--bg-2)); outline-color: var(--accent); }
}
.compare-bar.flash { outline: 2px solid transparent; outline-offset: -2px; animation: compareBarFlash 1.05s ease-in-out 2; }
.reduce-motion .compare-bar.flash { animation: none; }
.compare-label { flex: 1; min-width: 0; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-pick, .compare-stop { background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.compare-pick:hover, .compare-stop:hover { border-color: var(--accent); }
.raw-pane.comparing .editor-host { top: 30px; }
/* In-memory edit disclaimer banner — stacks below compare-bar when both are open. */
.edit-disclaimer { position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px;
  background: var(--bg-2); border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--fg-2); }
.edit-disclaimer[hidden] { display: none; }
.raw-pane.has-disclaimer .editor-host { top: 28px; }
.raw-pane.comparing .edit-disclaimer { top: 30px; }
.raw-pane.comparing.has-disclaimer .editor-host { top: 58px; }
.edit-disclaimer-msg strong { color: var(--fg); }
.edit-disclaimer-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.edit-disclaimer-never { background: none; border: none; color: var(--fg-2); font-size: 11px;
  cursor: pointer; padding: 2px 4px; text-decoration: underline; white-space: nowrap; }
.edit-disclaimer-never:hover { color: var(--fg); }
.edit-disclaimer-close { background: none; border: none; color: var(--fg-2); font-size: 13px;
  cursor: pointer; padding: 2px 5px; line-height: 1; border-radius: 3px; }
.edit-disclaimer-close:hover { background: var(--bg-3, var(--border)); color: var(--fg); }
/* Autosave restore banner — stacks below edit-disclaimer when both are open */
.autosave-banner { position: absolute; top: 0; left: 0; right: 0; height: 28px; z-index: 4;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: #fff8e1; border-bottom: 1px solid #ffc107; font-size: 11.5px; color: #5d4037; }
.autosave-banner[hidden] { display: none; }
[data-theme="dark"] .autosave-banner { background: #2d2200; border-color: #ffc107; color: #ffe082; }
.autosave-icon { font-size: 14px; }
.autosave-age { flex: 1; }
.autosave-banner button { padding: 2px 10px; border-radius: 4px; border: 1px solid currentColor;
  background: transparent; cursor: pointer; font-size: 11px; color: inherit; }
.autosave-restore { font-weight: 600; }
.raw-pane.has-autosave .editor-host { top: 28px; }
.raw-pane.has-disclaimer .autosave-banner { top: 28px; }
.raw-pane.has-disclaimer.has-autosave .editor-host { top: 56px; }
.raw-pane.comparing .autosave-banner { top: 30px; }
.raw-pane.comparing.has-autosave .editor-host { top: 58px; }
.raw-pane.comparing.has-disclaimer .autosave-banner { top: 58px; }
.raw-pane.comparing.has-disclaimer.has-autosave .editor-host { top: 86px; }
/* Word count / document stats bar — thin status strip between toolbar area and editor */
.word-count-bar { position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 4;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 12px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg-2); }
.word-count-bar[hidden] { display: none; }
.raw-pane.has-wordcount .editor-host { top: 24px; }
.raw-pane.has-disclaimer .word-count-bar { top: 28px; }
.raw-pane.has-autosave .word-count-bar { top: 28px; }
.raw-pane.has-disclaimer.has-autosave .word-count-bar { top: 56px; }
.raw-pane.comparing .word-count-bar { top: 30px; }
.raw-pane.comparing.has-disclaimer .word-count-bar { top: 58px; }
.raw-pane.comparing.has-autosave .word-count-bar { top: 58px; }
.raw-pane.comparing.has-disclaimer.has-autosave .word-count-bar { top: 86px; }
.raw-pane.has-disclaimer.has-wordcount .editor-host { top: 52px; }
.raw-pane.has-autosave.has-wordcount .editor-host { top: 52px; }
.raw-pane.has-disclaimer.has-autosave.has-wordcount .editor-host { top: 80px; }
.raw-pane.comparing.has-wordcount .editor-host { top: 54px; }
.raw-pane.comparing.has-disclaimer.has-wordcount .editor-host { top: 82px; }
.raw-pane.comparing.has-autosave.has-wordcount .editor-host { top: 82px; }
.raw-pane.comparing.has-disclaimer.has-autosave.has-wordcount .editor-host { top: 110px; }
/* Word count bar shifts below tools bar when tools are visible */
.raw-pane.has-tools .word-count-bar { top: 34px; }
.raw-pane.has-tools.has-wordcount .editor-host { top: 58px; }
.raw-pane.comparing.has-tools .word-count-bar { top: 64px; }
.raw-pane.comparing.has-tools.has-wordcount .editor-host { top: 88px; }
.raw-pane.has-disclaimer.has-tools .word-count-bar { top: 62px; }
.raw-pane.has-disclaimer.has-tools.has-wordcount .editor-host { top: 86px; }
.raw-pane.has-autosave.has-tools .word-count-bar { top: 62px; }
.raw-pane.has-autosave.has-tools.has-wordcount .editor-host { top: 86px; }
.raw-pane.has-disclaimer.has-autosave.has-tools .word-count-bar { top: 90px; }
.raw-pane.has-disclaimer.has-autosave.has-tools.has-wordcount .editor-host { top: 114px; }
.raw-pane.comparing.has-disclaimer.has-tools .word-count-bar { top: 92px; }
.raw-pane.comparing.has-disclaimer.has-tools.has-wordcount .editor-host { top: 116px; }
.raw-pane.comparing.has-autosave.has-tools .word-count-bar { top: 92px; }
.raw-pane.comparing.has-autosave.has-tools.has-wordcount .editor-host { top: 116px; }
.raw-pane.comparing.has-disclaimer.has-autosave.has-tools .word-count-bar { top: 120px; }
.raw-pane.comparing.has-disclaimer.has-autosave.has-tools.has-wordcount .editor-host { top: 144px; }

/* Markdown toolbar — horizontal button strip */
.md-tools-bar { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 6;
  display: flex; align-items: center; gap: 2px; padding: 2px 8px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  /* On narrow widths the buttons must NOT wrap to a second row — the bar is a fixed 34px and
     wrapped buttons would spill below its background ("hanging in the air") over the editor.
     Keep one row and let the extra buttons scroll horizontally instead. */
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.md-tools-bar[hidden] { display: none; }
.binary-tools-bar label { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 11px; color: var(--fg-2); }
.binary-tools-bar input { width: 88px; min-width: 0; height: 25px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--fg); font: 11px/1 ui-monospace, monospace; }
.binary-tools-bar input[type="search"] { width: 112px; }
.binary-tools-status { margin-left: auto; min-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-2); font: 10px/1 ui-monospace, monospace; }
.binary-inspector-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(680px, calc(100vh - 28px)); padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg); box-shadow: 0 16px 50px rgb(0 0 0 / .28); }
.binary-inspector-dialog::backdrop { background: rgb(0 0 0 / .42); }
.binary-inspector-dialog header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.binary-inspector-dialog h2 { margin: 0; font-size: 16px; }
.binary-inspector-dialog header button { border: 0; background: transparent; color: var(--fg-2); cursor: pointer; font-size: 16px; }
.binary-summary { margin: 14px; color: var(--fg-2); }
.binary-histogram { display: block; width: calc(100% - 28px); height: 180px; margin: 0 14px 16px; border: 1px solid var(--border); background: var(--bg-2); }
.binary-inspector-dialog table { width: calc(100% - 28px); margin: 0 14px 16px; border-collapse: collapse; font-size: 12px; }
.binary-inspector-dialog caption { padding: 6px 0; text-align: left; font-weight: 600; }
.binary-inspector-dialog th, .binary-inspector-dialog td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.binary-strings { margin: 0 14px 16px; padding-left: 34px; font-size: 12px; }
.binary-strings li { padding: 4px 0; overflow-wrap: anywhere; }
.binary-strings code { display: inline-block; width: 92px; color: var(--fg-2); }
.md-btn { padding: 3px 7px; border: none; background: transparent; border-radius: 4px;
  cursor: pointer; font-size: 13px; color: var(--fg, #24292f); font-family: inherit;
  line-height: 1.4; white-space: nowrap; }
.md-btn:hover { background: var(--bg-3, #e8eaed); }
.md-btn-italic { font-style: italic; }
.md-sep { display: inline-block; width: 1px; height: 18px; background: var(--border, #e0e0e0); margin: 0 4px; flex-shrink: 0; }
/* Inline line/char count on the text-utilities row (right-aligned, no extra stacked bar). */
.tu-count { margin-left: auto; font-size: 12px; color: var(--fg-2, #888); white-space: nowrap; padding-left: 10px; }
.tu-count[hidden] { display: none; }
/* Trim-mode split button + its dropdown (whitespace vs. whitespace + blank lines). */
.tu-mode-btn { font-size: 12px; color: var(--fg-2, #888); }
.tu-mode-menu { position: fixed; z-index: 10001; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 4px; min-width: 220px; }
.tu-mode-item { display: block; width: 100%; text-align: left; padding: 6px 10px; border: none;
  background: transparent; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13px; color: var(--fg, #24292f); }
.tu-mode-item:hover { background: var(--bg-3, #e8eaed); }
.tu-mode-item.active { font-weight: 600; color: var(--accent, #0969da); }
/* Heading-level picker opened from the markdown toolbar "H" button. */
.md-heading-menu { position: fixed; z-index: 10001; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 4px; min-width: 160px; }
.md-heading-item { display: block; width: 100%; text-align: left; padding: 5px 10px; border: none;
  background: transparent; border-radius: 6px; cursor: pointer; font-family: inherit; color: var(--fg, #24292f); line-height: 1.3; }
.md-heading-item:hover { background: var(--bg-3, #e8eaed); }
.md-heading-1 { font-size: 19px; font-weight: 700; }
.md-heading-2 { font-size: 17px; font-weight: 700; }
.md-heading-3 { font-size: 15px; font-weight: 600; }
.md-heading-4 { font-size: 14px; font-weight: 600; }
.md-heading-5, .md-heading-6 { font-size: 13px; font-weight: 600; }
.md-heading-normal { font-size: 13px; color: var(--fg-2, #888); border-top: 1px solid var(--border, #e0e0e0); margin-top: 2px; padding-top: 7px; }
/* Table grid picker */
.md-table-picker { position: fixed; z-index: 10001; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--bg-2); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.md-table-picker-label { font-size: 11px; color: var(--fg-2); text-align: center; margin-bottom: 6px; }
.md-table-picker-grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 3px; }
.md-table-picker-cell { width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); cursor: pointer; }
.md-table-picker-cell.active { background: var(--accent, #0969da); border-color: var(--accent, #0969da); opacity: 0.7; }
.md-table-picker-cell:hover { border-color: var(--accent, #0969da); }
/* WYSIWYG toggle button (markdown) */
#wysiwygBtn { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
#wysiwygBtn.active { background: var(--accent, #0969da); color: #fff; border-radius: 4px; }
/* HTML Visual toggle button */
#htmlVisualBtn { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
#htmlVisualBtn.active { background: var(--accent, #0969da); color: #fff; border-radius: 4px; }
/* JSON toolbar validation indicator */
.json-valid-indicator { font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.json-valid { color: #1a7f37; background: #dafbe1; }
.json-invalid { color: #cf222e; background: #ffebe9; }
[data-theme="dark"] .json-valid { color: #3fb950; background: #1b2a1e; }
[data-theme="dark"] .json-invalid { color: #ff7b72; background: #2d0000; }
/* HTML WYSIWYG toolbar — same geometry as .md-tools-bar */
.html-toolbar { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 6;
  display: flex; align-items: center; gap: 2px; padding: 2px 8px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.html-toolbar[hidden] { display: none; }
.ht-btn { padding: 3px 7px; border: none; background: transparent; border-radius: 4px;
  cursor: pointer; font-size: 13px; color: var(--fg, #24292f); font-family: inherit;
  line-height: 1.4; white-space: nowrap; }
.ht-btn:hover { background: var(--bg-3, #e8eaed); }
.ht-italic { font-style: italic; }
.ht-underline { text-decoration: underline; }
.ht-sep { display: inline-block; width: 1px; height: 18px; background: var(--border, #e0e0e0); margin: 0 4px; flex-shrink: 0; }
/* HTML WYSIWYG editing area — reuses editor-host positioning so has-tools offsets apply */
.html-wysiwyg-host { overflow-y: auto; padding: 16px 20px; outline: none; font-family: inherit;
  font-size: 14px; line-height: 1.6; background: var(--bg); color: var(--fg); }
.html-wysiwyg-host:focus { outline: none; }
[data-theme="dark"] .html-wysiwyg-host { background: #1e1e1e; color: #e6e6e6; }
/* Reuse the same top-offset rules (.has-tools) for HTML toolbar — no extra selectors needed
   because .html-toolbar shares the same 34px height as .md-tools-bar. */
.raw-pane.comparing .html-toolbar { top: 30px; }
.raw-pane.has-disclaimer .html-toolbar { top: 28px; }
.raw-pane.comparing.has-disclaimer .html-toolbar { top: 58px; }
.raw-pane.has-autosave .html-toolbar { top: 28px; }
.raw-pane.has-disclaimer.has-autosave .html-toolbar { top: 56px; }
.raw-pane.comparing.has-autosave .html-toolbar { top: 58px; }
.raw-pane.comparing.has-disclaimer.has-autosave .html-toolbar { top: 86px; }
/* EasyMDE container overrides to fit the app layout */
.EasyMDEContainer { height: 100%; display: flex; flex-direction: column; }
.EasyMDEContainer .CodeMirror {
  flex: 1; height: calc(100vh - 120px);
  font-family: ui-monospace, monospace;
  font-size: 14px;
  border: none;
  border-radius: 0;
}
[data-theme="dark"] .EasyMDEContainer .CodeMirror {
  background: #1e1e1e;
  color: #e6e6e6;
}
[data-theme="dark"] .EasyMDEContainer .CodeMirror-cursor { border-left-color: #e6e6e6; }
/* Context menu (table sort, right-click) */
.md-context-menu { position: fixed; z-index: 10000; min-width: 180px; padding: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2);
  box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.md-context-menu button { display: block; width: 100%; text-align: left;
  border: 0; border-radius: 6px; background: transparent; color: var(--fg); padding: 7px 9px;
  cursor: pointer; font-size: 13px; }
.md-context-menu button:hover { background: var(--bg-3); }
.md-context-title { padding: 4px 9px 6px; color: var(--fg-2); font-size: 12px; }
.raw-pane.has-tools .editor-host { top: 34px; }
.raw-pane.comparing.has-tools .editor-host { top: 64px; }
.raw-pane.has-disclaimer.has-tools .editor-host { top: 62px; }
.raw-pane.comparing.has-disclaimer.has-tools .editor-host { top: 92px; }
.raw-pane.has-autosave.has-tools .editor-host { top: 62px; }
.raw-pane.has-disclaimer.has-autosave.has-tools .editor-host { top: 90px; }
.raw-pane.comparing.has-autosave.has-tools .editor-host { top: 92px; }
.raw-pane.comparing.has-disclaimer.has-autosave.has-tools .editor-host { top: 120px; }
.raw-pane.comparing .md-tools-bar { top: 30px; }
.raw-pane.has-disclaimer .md-tools-bar { top: 28px; }
.raw-pane.comparing.has-disclaimer .md-tools-bar { top: 58px; }
.raw-pane.has-autosave .md-tools-bar { top: 28px; }
.raw-pane.has-disclaimer.has-autosave .md-tools-bar { top: 56px; }
.raw-pane.comparing.has-autosave .md-tools-bar { top: 58px; }
.raw-pane.comparing.has-disclaimer.has-autosave .md-tools-bar { top: 86px; }
/* Text-utils toolbar — second toolbar row (below any type-specific toolbar).
   Uses has-textutils class so it can co-exist with has-tools without conflicting.
   These rules come after the .md-tools-bar rules so they win the cascade. */
/* Position of .text-utils-bar: 34px lower than the default md-tools-bar position when
   has-tools is also active (type-specific toolbar occupies the first row). */
.raw-pane.has-tools .text-utils-bar { top: 34px; }
.raw-pane.has-tools.comparing .text-utils-bar { top: 64px; }
.raw-pane.has-tools.has-disclaimer .text-utils-bar { top: 62px; }
.raw-pane.has-tools.has-autosave .text-utils-bar { top: 62px; }
.raw-pane.has-tools.comparing.has-disclaimer .text-utils-bar { top: 92px; }
.raw-pane.has-tools.has-disclaimer.has-autosave .text-utils-bar { top: 90px; }
.raw-pane.has-tools.comparing.has-autosave .text-utils-bar { top: 92px; }
.raw-pane.has-tools.comparing.has-disclaimer.has-autosave .text-utils-bar { top: 120px; }
/* Editor host offset when has-textutils is active (textutils bar alone) */
.raw-pane.has-textutils .editor-host { top: 34px; }
.raw-pane.has-textutils.comparing .editor-host { top: 64px; }
.raw-pane.has-textutils.has-disclaimer .editor-host { top: 62px; }
.raw-pane.has-textutils.has-autosave .editor-host { top: 62px; }
.raw-pane.has-textutils.comparing.has-disclaimer .editor-host { top: 92px; }
.raw-pane.has-textutils.has-disclaimer.has-autosave .editor-host { top: 90px; }
.raw-pane.has-textutils.comparing.has-autosave .editor-host { top: 92px; }
.raw-pane.has-textutils.comparing.has-disclaimer.has-autosave .editor-host { top: 120px; }
/* When both has-tools and has-textutils are active — editor shifted by 68px total */
.raw-pane.has-tools.has-textutils .editor-host { top: 68px; }
.raw-pane.has-tools.has-textutils.comparing .editor-host { top: 98px; }
.raw-pane.has-tools.has-textutils.has-disclaimer .editor-host { top: 96px; }
.raw-pane.has-tools.has-textutils.has-autosave .editor-host { top: 96px; }
.raw-pane.has-tools.has-textutils.comparing.has-disclaimer .editor-host { top: 126px; }
.raw-pane.has-tools.has-textutils.has-disclaimer.has-autosave .editor-host { top: 124px; }
.raw-pane.has-tools.has-textutils.comparing.has-autosave .editor-host { top: 126px; }
.raw-pane.has-tools.has-textutils.comparing.has-disclaimer.has-autosave .editor-host { top: 154px; }
/* Word count bar: shift below textutils bar when active */
.raw-pane.has-textutils .word-count-bar { top: 34px; }
.raw-pane.has-textutils.has-disclaimer .word-count-bar { top: 62px; }
.raw-pane.has-textutils.has-autosave .word-count-bar { top: 62px; }
.raw-pane.has-textutils.comparing .word-count-bar { top: 64px; }
.raw-pane.has-textutils.has-wordcount .editor-host { top: 58px; }
.raw-pane.has-textutils.has-disclaimer.has-wordcount .editor-host { top: 86px; }
.raw-pane.has-textutils.has-autosave.has-wordcount .editor-host { top: 86px; }
.raw-pane.has-textutils.comparing.has-wordcount .editor-host { top: 88px; }
.raw-pane.has-tools.has-textutils .word-count-bar { top: 68px; }
.raw-pane.has-tools.has-textutils.has-disclaimer .word-count-bar { top: 96px; }
.raw-pane.has-tools.has-textutils.has-autosave .word-count-bar { top: 96px; }
.raw-pane.has-tools.has-textutils.comparing .word-count-bar { top: 98px; }
.raw-pane.has-tools.has-textutils.has-wordcount .editor-host { top: 92px; }
.raw-pane.has-tools.has-textutils.has-disclaimer.has-wordcount .editor-host { top: 120px; }
.raw-pane.has-tools.has-textutils.has-autosave.has-wordcount .editor-host { top: 120px; }
.raw-pane.has-tools.has-textutils.comparing.has-wordcount .editor-host { top: 122px; }
#compareBtn.active { color: var(--accent); }
.preview-host { position: absolute; inset: 0; overflow: auto; background: var(--bg); }
/* display:block kills the inline-iframe baseline gap that otherwise pushes content a few px
   past 100% and gives .preview-host a spurious scrollbar (e.g. on the image viewer). */
.fv-preview-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }

/* Preview render chrome (known-file/pdf/font/reading/diff component styles) lives in
   preview-chrome.css — linked after this file in index.html. */

/* View-mode states (desktop) */
.panes[data-mode="raw"] .preview-pane { display: none; }
.panes[data-mode="raw"] .raw-pane { border-right: 0; }
.panes[data-mode="preview"] .raw-pane { display: none; }

/* ── Drawers ── */
.drawer {
  position: fixed; top: 0; right: 0; height: 100dvh; width: min(380px, 90vw);
  background: var(--bg-2); border-left: 1px solid var(--border); z-index: 30;
  display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.18);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { font-size: 15px; margin: 0; }
.drawer-head-actions { display: flex; align-items: center; gap: 4px; }
.settings-dock-btn[aria-pressed="true"] { color: var(--accent); background: var(--bg-3); }
.drawer-body { padding: 12px 14px; overflow: auto; }
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; }

@media (min-width: 761px) {
  #app { --settings-dock-width: clamp(300px, 30vw, 380px); }
  #app.settings-docked.settings-open .body { width: calc(100% - var(--settings-dock-width)); align-self: flex-start; }
  #app.settings-docked #settingsDrawer { top: var(--topbar-h); height: calc(100dvh - var(--topbar-h));
    width: var(--settings-dock-width); z-index: 15; box-shadow: none; }
}

/* Settings groups */
.set-group { margin-bottom: 16px; }
.set-group > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 7px 0; }
.set-info { min-width: 0; flex: 1; }
.set-row label { color: var(--fg); cursor: pointer; }
.set-hint { color: var(--fg-2); font-size: 11px; line-height: 1.4; margin-top: 2px; }
.set-row input, .set-row select { flex: 0 0 auto; align-self: center; }
.set-row input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.set-row input[type="number"], .set-row select {
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; max-width: 130px;
}
.set-row textarea {
  background: var(--bg-3); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; font-size: 12px; flex: 1 1 auto;
}
.set-row--block { flex-direction: column; align-items: stretch; }
.set-row--block textarea { width: 100%; box-sizing: border-box; }
/* Heavy opt-in package: eager-download status + reload-to-apply button under the toggle row. */
.heavy-dl { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 6px; padding: 7px 10px; background: var(--bg-2, rgba(127,127,127,.08)); border: 1px solid var(--border); border-radius: 6px; min-width: 0; }
.heavy-dl-status { flex: 1 1 170px; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: var(--fg-2); }
.heavy-dl-status.done { color: #15803d; font-weight: 600; }
.heavy-dl-status.error { color: #b91c1c; }
.heavy-dl-reload { flex: 0 0 auto; margin-left: auto; max-width: 100%; white-space: normal; }
.heavy-dl-reload:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 480px) { .heavy-dl-reload { flex-basis: 100%; margin-left: 0; } }
.set-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.btn.small { padding: 6px 10px; font-size: 12px; }
.meta-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.meta-row .k { color: var(--fg-2); }
.meta-row .v { text-align: right; word-break: break-word; }
.meta-section { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); }
.meta-section > summary { cursor: pointer; padding: 8px 10px; font-weight: 600; font-size: 13px; }
.meta-section-body { padding: 0 10px 4px; }
.meta-section-body .meta-row:last-child { border-bottom: 0; }
.meta-info-btn {
  background: none;
  border: 1px solid var(--border, #ddd);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  color: var(--fg-muted, #888);
  margin-top: 6px;
}
.meta-info-btn:hover { color: var(--fg, #111); border-color: var(--fg-muted, #888); }
.type-info-dialog {
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  padding: 0;
  max-width: min(640px, 94vw);
  width: 100%;
  background: var(--bg, #fff);
  color: var(--fg, #111);
  font: 14px/1.5 system-ui, sans-serif;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.type-info-dialog::backdrop { background: rgba(0,0,0,.35); }
.type-info-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, #ddd);
}
.type-info-dialog-header h2 { margin: 0; font-size: 18px; }
.type-info-dialog-close {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--fg-muted, #888); padding: 2px 6px; border-radius: 4px;
}
.type-info-dialog-close:hover { color: var(--fg, #111); }
.type-info-dialog-body { padding: 16px 20px 20px; }
.type-info-dialog-body p { margin: 0 0 12px; }
.type-info-dialog-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.type-info-dialog-links a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border: 1px solid var(--border, #ddd); border-radius: 4px;
  text-decoration: none; color: var(--accent, #2563eb); font-size: 13px;
}
.type-info-dialog-links a:hover { background: var(--hover-bg, #f5f5f5); }
/* Type-documentation modal: wider than the About card and scrollable (readme docs are long). */
.th-dialog { max-width: min(760px, 94vw); }
.th-dialog-body { max-height: 78vh; overflow: auto; }
.type-info-used-for { margin-top: 12px; }
.type-info-used-for h3 { font-size: 13px; font-weight: 600; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-muted, #888); }
.type-info-used-card {
  border: 1px solid var(--border, #ddd); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px;
}
.type-info-used-card strong { display: block; margin-bottom: 2px; }
.type-info-used-card p { margin: 0 0 4px; color: var(--fg-muted, #888); font-size: 13px; }
.type-info-used-card a { font-size: 13px; color: var(--accent, #2563eb); }

/* Offline-cache status pill */
.offline-status { position: relative; display: inline-flex; flex: 0 1 auto; align-items: center; gap: 8px;
  min-width: 0; max-width: min(220px, 32vw); height: 32px; overflow: hidden; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border); border-radius: 18px; padding: 5px 10px;
  font-size: 12px; color: var(--fg-2); cursor: pointer; }
.offline-status:hover { background: var(--bg-3); }
.offline-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Workspace topbars are dense: keep the persistent state/control to one icon there. Its full
   accessible name and current-state title remain available, and phones expose the full label in ⋯. */
#app:has(#intake[hidden]) .topbar > .offline-status {
  flex: 0 0 34px; width: 34px; max-width: 34px; justify-content: center; gap: 0; padding-inline: 0; font-size: 0;
}
#app:has(#intake[hidden]) .topbar > .offline-status > * { font-size: 12px; }
.more-menu > .offline-status {
  flex: 1 0 100%; width: 100%; max-width: none; min-height: 42px; height: auto; overflow: visible;
  justify-content: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; white-space: normal; font-size: 12px;
}
.more-menu > .offline-status > * { font-size: inherit; }
/* Floating status controls must not peek through or cover modal/drawer content. */
#app:has(#scrim:not([hidden])) .offline-status,
#app:has(#scrim:not([hidden])) .construction-badge,
body:has(.cache-modal-backdrop) .offline-status,
body:has(.cache-modal-backdrop) .construction-badge { visibility: hidden; }
/* Side-by-side: two files rendered next to each other in a full-screen overlay. */
.sbs-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.sbs-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.sbs-title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.sbs-close { background: var(--bg); border: 1px solid var(--border); color: var(--fg); border-radius: 8px; padding: 4px 12px; cursor: pointer; }
/* Shared two-file mode bar — one radio-style switch governing both panes. */
.sbs-mode { flex: 1; display: flex; justify-content: center; gap: 4px; min-width: 0; }
.sbs-mode-btn { background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; padding: 3px 12px; font-size: 12px; cursor: pointer; line-height: 1.4; }
.sbs-mode-btn:hover:not(:disabled) { border-color: var(--accent, #2563eb); }
.sbs-mode-btn.active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.sbs-mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.sbs-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
/* Text diff mode: one full-width Monaco diff replaces the two panes. */
.sbs-diff { flex: 1; position: relative; min-height: 0; }
.sbs-diff .editor-host, .sbs-diff > div { position: absolute; inset: 0; }
.sbs-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }
.sbs-pane:last-child { border-right: 0; }
.sbs-name { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; color: var(--fg-2);
  border-bottom: 1px solid var(--border); background: var(--bg-2); }
.sbs-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbs-ctrls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sbs-toggle, .sbs-dl { background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; padding: 2px 8px; font-size: 11px; cursor: pointer; line-height: 1.4; }
.sbs-toggle.active { background: var(--accent, #2563eb); border-color: var(--accent, #2563eb); color: #fff; }
.sbs-host { flex: 1; position: relative; overflow: hidden; min-height: 0; background: var(--bg); }
.sbs-source, .sbs-preview { position: absolute; inset: 0; overflow: auto; }
.sbs-source { overflow: hidden; }
.sbs-host iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sbs-note { padding: 16px; color: var(--fg-2); font-size: 13px; }
/* Per-pane formatting toolbar (markdown actions or text utilities), bound to the pane's own editor. */
.sbs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 12px;
  border-bottom: 1px solid var(--border); background: var(--bg-2); }
.sbs-tool { background: var(--bg); border: 1px solid var(--border); color: var(--fg);
  border-radius: 6px; padding: 2px 7px; font-size: 11px; cursor: pointer; line-height: 1.4; }
.sbs-tool:hover { border-color: var(--accent, #2563eb); }
.sbs-tool-mode { font-weight: 600; }
@media (max-width: 760px) { .sbs-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .sbs-pane { border-right: 0; border-bottom: 1px solid var(--border); } }
/* Missing-aware Merge mode (env/ini): grouped key comparison + transfer-to-combined controls. */
.sbs-merge { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.kv-merge-root { max-width: 1100px; margin: 0 auto; padding: 14px 18px 40px; font: 13px/1.5 system-ui, sans-serif; color: var(--fg); }
.kv-merge-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kv-merge-head-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kv-merge-title { font-weight: 600; font-size: 15px; }
.kv-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.kv-merge-actions { display: flex; gap: 8px; }
.kv-merge-summary { margin: 8px 0 14px; color: var(--fg-2); font-size: 12px; }
.kv-btn { background: var(--bg); border: 1px solid var(--border); color: var(--fg); border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; line-height: 1.4; }
.kv-btn:hover:not(:disabled) { border-color: var(--accent); }
.kv-btn:disabled { opacity: .45; cursor: not-allowed; }
.kv-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.kv-btn-sm { padding: 2px 8px; font-size: 11px; }
.kv-btn-on { background: rgba(31,157,85,.15); border-color: #1f9d55; color: #1f9d55; }
.kv-group { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.kv-group-head { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.kv-group-name { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kv-rows { display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr auto auto; gap: 10px; align-items: center; padding: 5px 12px; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: 0; }
.kv-row-only-right { background: rgba(31,157,85,.06); }
.kv-row-conflict { background: rgba(199,119,0,.07); }
.kv-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.kv-dup { color: var(--danger); font-size: 11px; }
.kv-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; color: var(--fg); }
.kv-val.masked { color: var(--fg-2); font-style: italic; }
.kv-val.kv-absent { color: var(--fg-2); opacity: .5; }
.kv-val.kv-empty { color: var(--fg-2); font-style: italic; }
.kv-pill { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.kv-pill.kv-eq { color: var(--fg-2); border-color: var(--border); }
.kv-pill.kv-right { color: #1f9d55; background: rgba(31,157,85,.13); }
.kv-pill.kv-conflict { color: #c77700; background: rgba(199,119,0,.14); }
.kv-pill.kv-left { color: #7a68d8; background: rgba(122,104,216,.14); }
.kv-ctl { display: flex; justify-content: flex-end; }
.kv-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.kv-seg-btn { background: var(--bg); border: 0; border-right: 1px solid var(--border); color: var(--fg-2); padding: 2px 8px; font-size: 11px; cursor: pointer; }
.kv-seg-btn:last-child { border-right: 0; }
.kv-seg-btn.active { background: var(--accent); color: var(--accent-fg); }
.kv-kept { color: var(--fg-2); font-size: 11px; }
@media (max-width: 700px) { .kv-row { grid-template-columns: 1fr 1fr; } }
/* Cache-download modal: pick offline bundles with sizes. */
.cache-modal-open { overflow: hidden; }
.cache-modal-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.cache-modal { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 14px;
  width: min(520px, 100%); max-height: min(88vh, calc(100dvh - 32px)); min-height: 0;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.4); }
.cm-head { display: flex; flex: 0 0 auto; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cm-head h2 { font-size: 16px; margin: 0; flex: 1; }
.cm-close { background: var(--bg-2); border: 1px solid var(--border); color: var(--fg); border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.cm-intro { flex: 0 0 auto; padding: 12px 16px 4px; margin: 0; font-size: 12px; color: var(--fg-2); }
.cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cm-all, .cm-none, .cm-preset { font-size: 12px; padding: 3px 8px; background: var(--btn-bg, var(--bg-2)); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--fg); }
.cm-all:hover, .cm-none:hover, .cm-preset:hover { background: var(--hover); }
.cm-preset[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cm-grand-total { margin-left: auto; font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.cm-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cm-group { border-bottom: 1px solid var(--border); }
.cm-group:last-child { border-bottom: 0; }
.cm-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px;
  border: 0; background: transparent; color: var(--fg); text-align: left; cursor: pointer; user-select: none; }
.cm-group-head:hover { background: var(--hover); }
.cm-toggle { font-size: 12px; color: var(--fg-2); width: 14px; flex-shrink: 0; }
.cm-group-label { font-size: 12px; font-weight: 600; color: var(--fg); }
.cm-group-meta { margin-left: auto; min-width: 0; font-size: 11px; color: var(--fg-2); text-align: right; }
.cm-group-body { padding: 0 16px; }
.cm-group-body.cm-collapsed { display: none; }
.cm-list { overflow: auto; padding: 6px 16px; }
.cm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.cm-row:last-child { border-bottom: 0; }
.cm-label { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.cm-req { color: var(--fg-2); font-size: 11px; }
.cm-heavy { flex: 0 0 auto; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #e8590c22; color: #e8590c; }
.cm-size { font: 12px ui-monospace, monospace; color: var(--fg-2); min-width: 56px; text-align: right; }
.cm-foot { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--bg); }
.cm-total { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.cm-clear { background: transparent; border: 1px solid var(--border); color: var(--fg-2); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.cm-clear:hover { color: var(--danger, #d1242f); border-color: color-mix(in srgb, var(--danger, #d1242f) 45%, transparent); }
.cm-save { background: var(--accent); color: var(--accent-fg); border: 0; border-radius: 8px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
.cache-modal button:focus-visible, .cache-modal input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, white); outline-offset: 2px; }
.offline-status.checking, .offline-status.preparing { color: var(--fg-2); }
.offline-status.partial { color: #2ea043; border-color: #2ea04366; }
.offline-status.error { color: var(--danger, #d1242f); border-color: color-mix(in srgb, var(--danger, #d1242f) 45%, transparent); }
.offline-status.idle { color: var(--fg-2); }
.offline-status.ready { color: #2ea043; border-color: #2ea04366; }
.offline-status.update { color: #d29922; border-color: #d2992266; }
.offline-status.update .off-check { color: #d29922; }
.off-check { color: #2ea043; font-weight: 700; }
.off-ring { width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%;
  display: inline-block; opacity: 0.65; }
.off-spin { width: 12px; height: 12px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: off-spin .7s linear infinite; }
@keyframes off-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .cache-modal-backdrop { padding: 10px; }
  .cache-modal { max-height: calc(100dvh - 20px); }
  .cm-toolbar { gap: 6px; padding-inline: 12px; }
  .cm-grand-total { flex: 1 0 100%; margin-left: 0; text-align: right; }
  .cm-group-head, .cm-group-body { padding-inline: 12px; }
  .cm-row { gap: 7px; }
  .cm-size { min-width: 50px; }
}

/* iOS-only "Add to Home Screen for background audio" hint (opt-in, dismissible). */
.ios-hint { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 460px;
  margin: 0 auto; background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.ios-hint-body { padding: 14px 16px; font-size: 13px; color: var(--fg-2); line-height: 1.5; }
.ios-hint-body strong { color: var(--fg); display: block; margin-bottom: 4px; }
.ios-hint-body p { margin: 6px 0 10px; }
.ios-hint-body b { color: var(--fg); }
.ios-share { font-style: normal; }
.ios-hint-actions { display: flex; gap: 8px; justify-content: flex-end; }
.ios-hint-actions button { font-size: 13px; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg); }
.ios-hint-never { color: var(--fg-2); }

/* Graceful offline-miss note (renderer not cached while offline) */
.offline-miss { padding: 28px 22px; max-width: 460px; margin: 0 auto; text-align: center; color: var(--fg-2); }
.offline-miss .om-icon { font-size: 34px; margin-bottom: 6px; }
.offline-miss p { margin: 8px 0; line-height: 1.5; }
.offline-miss strong { color: var(--fg); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 10px;
  z-index: 50; max-width: 90vw; box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* "New version — reload?" banner (a deploy bumped the SW version; offline.js surfaces it). */
.update-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: var(--accent); color: var(--accent-fg); padding: 9px 12px 9px 16px; border-radius: 10px;
  z-index: 60; max-width: 92vw; box-shadow: 0 6px 20px rgba(0,0,0,.3); font-size: 14px;
}
.update-banner .ub-msg { line-height: 1.3; }
.update-banner .ub-reload {
  background: var(--accent-fg); color: var(--accent); border: 0; border-radius: 7px;
  padding: 5px 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.update-banner .ub-reload:hover { opacity: .92; }
.update-banner .ub-dismiss {
  background: transparent; color: var(--accent-fg); border: 0; cursor: pointer; font-size: 15px;
  line-height: 1; padding: 4px 6px; opacity: .85;
}
.update-banner .ub-dismiss:hover { opacity: 1; }

/* ── Mobile: tabs instead of split ── */
@media (max-width: 760px) {
  .brand { display: none; }                   /* reclaim topbar space on phones */
  /* Phones keep only the essentials in the bar (tree, file name, open, fullscreen, ⋯);
     the rest moves into the ⋯ popover (app.js layoutTopbar), so nothing overflows. */
  .topbar { gap: 4px; }
  .icon-btn { width: 40px; height: 40px; }    /* fat-finger targets */
  .file-id { flex: 1 1 auto; min-width: 0; }
  .file-name { max-width: none; flex: 1 1 auto; min-width: 0; }
  /* Sidebar becomes a left overlay drawer on phones. */
  .filetree { position: fixed; left: 0; top: calc(var(--topbar-h) + env(safe-area-inset-top)); bottom: 0;
    z-index: 25; width: 82vw; max-width: 320px; box-shadow: 6px 0 24px rgba(0,0,0,.3); }
  .viewmode { display: none !important; }     /* mobile uses the tab bar */
  .tabbar { display: flex; }
  .panes { display: block; position: relative; }
  .pane { position: absolute; inset: 0; }
  .panes[data-tab="raw"] .preview-pane { display: none; }
  .panes[data-tab="preview"] .raw-pane { display: none; }
  .raw-pane { border-right: 0; }
  .settings-dock-btn { display: none; }
}

/* ── Layered image viewer (ORA / PSD / XCF / KRA) ── */
.layered-wrap { display: flex; height: 100%; overflow: hidden; }
.layered-canvas-col { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.layered-toolbar { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--bg-2); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.layered-zoom-btn { font-size: 11px; padding: 2px 7px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 4px; color: var(--fg); cursor: pointer; line-height: 1.6; }
.layered-zoom-btn:hover { background: var(--bg); }
.layered-zoom-label { font-size: 11px; color: var(--fg-2); margin-left: 4px; font-variant-numeric: tabular-nums; min-width: 3.5ch; }
.layered-canvas-wrap { flex: 1 1 auto; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: repeating-conic-gradient(#444 0% 25%, #333 0% 50%) 0 0 / 16px 16px; }
.layered-canvas { display: block; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
.layered-panel { flex: 0 0 220px; min-width: 180px; max-width: 280px; border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.layered-panel-head { padding: 6px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); border-bottom: 1px solid var(--border); }
.layered-panel-actions { display: flex; align-items: center; justify-content: space-between; }
.layered-list { flex: 1 1 auto; overflow-y: auto; }
.layered-layer { display: flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 12px; color: var(--fg); min-height: 28px; }
.layered-layer:hover { background: var(--bg-3); }
.layered-group { font-weight: 600; color: var(--fg-2); }
.layered-eye { background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; line-height: 1; flex-shrink: 0; }
.layered-eye-off { opacity: 0.35; }
.layered-arrow { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: 11px; flex-shrink: 0; color: var(--fg-2); }
.layered-thumb { width: 32px; height: 32px; flex-shrink: 0; border-radius: 2px; background: repeating-conic-gradient(#555 0% 25%, #444 0% 50%) 0 0 / 8px 8px; }
.layered-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.layered-opacity { width: 52px; flex-shrink: 0; }
.layered-error { padding: 24px; color: var(--fg); }

/* ── ICO / CUR icon viewer ── */
.ico-wrap { padding: 16px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; overflow: auto; background: var(--bg); }
.ico-type-tag { font-size: 11px; color: var(--fg2); text-transform: uppercase; letter-spacing: .06em; align-self: flex-start; }
.ico-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.ico-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ico-canvas { display: block; background: repeating-conic-gradient(#444 0% 25%, #333 0% 50%) 0 0 / 8px 8px; border: 1px solid var(--border); }
.ico-label { font-size: 11px; color: var(--fg2); font-family: monospace; }

/* Reduce motion (Advanced setting): kill every transition + animation app-wide. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* editable badges on example buttons */
.ex-badge { font-size: 10px; margin-left: 5px; opacity: 0.7; pointer-events: none; }
.ex-badge-edit { color: #22c55e; }
.ex-badge-view { color: #94a3b8; }
.ex-badge-sourced { color: #3b82f6; }
.ex-badge-partial { color: #f59e0b; }

/* filter bar */
.ex-filter-bar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ex-filter-chip { padding: 2px 10px; border: 1px solid var(--border, #d1d5db); border-radius: 12px; background: transparent; color: var(--text-muted, #6b7280); font-size: 12px; cursor: pointer; transition: background 0.15s; }
.ex-filter-chip.active { background: var(--accent, #3b82f6); color: #fff; border-color: var(--accent, #3b82f6); }
.ex-filter-chip:hover:not(.active) { background: var(--hover, #f3f4f6); }

/* preview-only badge in topbar */
#previewOnlyBadge { display: inline-flex; align-items: center; padding: 1px 6px; background: var(--bg-muted, #f3f4f6); color: var(--text-muted, #6b7280); border-radius: 8px; font-size: 10px; font-weight: 500; white-space: nowrap; }

/* ── Inline CSV/TSV table editor ── */
/* #tableEditorHost shares the .editor-host class so all banner-offset rules apply automatically */
#tableEditorHost { overflow: hidden; }
.te-wrapper { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.te-toolbar { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border, #e0e0e0); background: var(--bg-2, #f6f8fa); flex-shrink: 0; }
.te-btn { padding: 3px 10px; border: 1px solid var(--border, #e0e0e0); border-radius: 4px; background: var(--bg, #fff); color: var(--fg, #24292f); cursor: pointer; font-size: 12px; }
.te-btn:hover { background: var(--bg-3, #e8eaed); }
.te-scroll { flex: 1; overflow: auto; }
.te-table { border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.te-idx { background: var(--bg-2, #f6f8fa); color: var(--fg-2, #888); padding: 3px 8px; font-size: 11px; text-align: right; min-width: 32px; user-select: none; border: 1px solid var(--border, #e0e0e0); cursor: context-menu; position: sticky; left: 0; z-index: 1; }
.te-cell { border: 1px solid var(--border, #e0e0e0); padding: 3px 8px; min-width: 80px; max-width: 300px; outline: none; overflow: hidden; text-overflow: ellipsis; }
.te-cell:focus { outline: 2px solid var(--accent, #0969da); outline-offset: -2px; background: var(--bg, #fff); }
.te-header { background: var(--bg-2, #f6f8fa); font-weight: 600; }
[data-theme="dark"] .te-cell:focus { background: #0d1117; }

/* ── Inline password prompt (ZIP / PDF unlock) ── */
.pw-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 200px; gap: 10px; padding: 32px; text-align: center; }
.pw-icon { font-size: 40px; }
.pw-title { font-size: 16px; font-weight: 600; color: var(--fg, #24292f); }
.pw-sub { font-size: 13px; color: var(--fg-2, #888); max-width: 320px; }
.pw-hint { font-size: 12px; color: var(--fg-2, #888); font-style: italic; }
.pw-error { font-size: 12px; color: #cf222e; padding: 4px 10px; background: #fff0f0; border-radius: 4px; border: 1px solid #ffb3b3; }
[data-theme="dark"] .pw-error { background: #2d0000; border-color: #8b0000; color: #ff8080; }
.pw-field { width: 100%; max-width: 280px; }
.pw-input { width: 100%; padding: 7px 12px; border: 1px solid var(--border, #e0e0e0); border-radius: 6px; font-size: 14px; background: var(--bg, #fff); color: var(--fg, #24292f); box-sizing: border-box; }
.pw-input:focus { outline: 2px solid var(--accent, #0969da); outline-offset: -1px; }
.pw-actions { display: flex; gap: 8px; }
.pw-btn-primary { padding: 7px 20px; background: var(--accent, #0969da); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.pw-btn-primary:hover { background: var(--accent, #0969da); filter: brightness(0.9); }
.pw-btn-secondary { padding: 7px 16px; background: transparent; border: 1px solid var(--border, #e0e0e0); border-radius: 6px; cursor: pointer; font-size: 13px; color: var(--fg-2, #888); }
.pw-btn-secondary:hover { background: var(--bg-3, #f0f0f0); }
.pw-btn-primary:disabled, .pw-btn-secondary:disabled { opacity: .5; cursor: default; filter: none; }
.zip-unlock { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100%; gap: 10px; padding: 28px 18px; text-align: center; overflow: auto; box-sizing: border-box; }
.zip-guess { width: min(520px, 100%); border: 1px solid var(--border, #e0e0e0); border-radius: 6px; padding: 8px 10px; text-align: left; background: var(--bg, #fff); box-sizing: border-box; }
.zip-guess summary { cursor: pointer; font: 600 13px system-ui, sans-serif; color: var(--fg, #24292f); }
.zip-candidates { width: 100%; min-height: 96px; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border, #e0e0e0); border-radius: 6px; resize: vertical; background: var(--bg, #fff); color: var(--fg, #24292f); box-sizing: border-box; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.zip-guess-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--fg-2, #888); font: 12px system-ui, sans-serif; }
.zip-set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 8px; color: var(--fg, #24292f); font: 12px system-ui, sans-serif; }
.zip-len { width: 58px; margin-left: 4px; padding: 4px 6px; border: 1px solid var(--border, #e0e0e0); border-radius: 4px; background: var(--bg, #fff); color: var(--fg, #24292f); }
.zip-estimate, .zip-guess-status { color: var(--fg-2, #888); font: 12px system-ui, sans-serif; }
.zip-estimate { margin-top: 8px; }
.zip-guess-status { width: min(520px, 100%); text-align: left; }
.zip-progress-wrap { width: min(520px, 100%); display: flex; align-items: center; gap: 10px; text-align: left; }
.zip-spinner { width: 16px; height: 16px; border: 2px solid var(--border, #e0e0e0); border-top-color: var(--accent, #0969da); border-radius: 50%; animation: zip-spin .8s linear infinite; flex: 0 0 auto; }
.zip-progress-meta { flex: 1; color: var(--fg-2, #888); font: 12px system-ui, sans-serif; }
.zip-progress { width: 100%; height: 8px; display: block; margin-bottom: 4px; accent-color: var(--accent, #0969da); }
@keyframes zip-spin { to { transform: rotate(360deg); } }

/* ── Inline .env form editor ── */
/* #envFormHost shares the .editor-host class so all banner-offset rules apply automatically */
#envFormHost { overflow: hidden; }
.env-form { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.env-toolbar { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border, #e0e0e0); background: var(--bg-2, #f6f8fa); flex-shrink: 0; }
.env-btn { padding: 3px 12px; border: 1px solid var(--border, #e0e0e0); border-radius: 4px; background: var(--bg, #fff); color: var(--fg, #24292f); cursor: pointer; font-size: 12px; }
.env-btn:hover:not(:disabled) { background: var(--bg-3, #e8eaed); }
.env-btn:disabled { opacity: .45; cursor: default; }
.env-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.env-row { display: flex; align-items: center; gap: 4px; padding: 2px 10px; min-height: 32px; }
.env-blank { height: 12px; min-height: 0; }
.env-comment-row { background: var(--bg-2, #f6f8fa); color: var(--fg-2, #888); font-style: italic; font-size: 12px; }
.env-comment-text { flex: 1; background: transparent; border: none; outline: none; color: var(--fg-2, #888); font-size: 12px; font-style: italic; font-family: inherit; }
.env-var-row:hover { background: var(--bg-2, #f6f8fa); }
.env-toggle { padding: 1px 6px; border: 1px solid var(--border, #e0e0e0); border-radius: 3px; background: transparent; color: var(--fg-2, #888); cursor: pointer; font-size: 11px; flex-shrink: 0; }
.env-key { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--accent, #0969da); border: none; background: transparent; outline: none; min-width: 100px; max-width: 200px; flex-shrink: 0; }
.env-eq { color: var(--fg-2, #888); padding: 0 2px; flex-shrink: 0; }
.env-val { font-family: ui-monospace, monospace; font-size: 13px; flex: 1; border: none; background: transparent; outline: none; color: var(--fg, #24292f); min-width: 0; }
.env-key:focus, .env-val:focus { background: var(--bg, #fff); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0969da) 25%, transparent); }
.env-eye, .env-del { background: transparent; border: none; cursor: pointer; color: var(--fg-2, #888); padding: 2px 4px; flex-shrink: 0; font-size: 13px; }
.env-del:hover { color: #cf222e; }
.env-drag { cursor: grab; color: var(--fg-2, #888); flex-shrink: 0; font-size: 13px; line-height: 1; user-select: none; padding: 0 2px; opacity: .5; }
.env-row:hover .env-drag { opacity: 1; }
.env-drag:active { cursor: grabbing; }
.env-check { flex-shrink: 0; margin: 0 2px; cursor: pointer; }
.env-selected { background: color-mix(in srgb, var(--accent, #0969da) 12%, transparent); border-radius: 3px; }
.env-row.env-dragging { opacity: .4; }
.env-row.env-dragover { box-shadow: inset 0 2px 0 var(--accent, #0969da); }

/* ── Inline INI/conf form editor ── */
/* #iniFormHost shares the .editor-host class so all banner-offset rules apply automatically */
#iniFormHost { overflow: hidden; }
.ini-form { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ini-body { flex: 1; overflow-y: auto; padding: 6px 0; }
.ini-footer { padding: 6px 10px; border-top: 1px solid var(--border, #e0e0e0); background: var(--bg-2, #f6f8fa); flex-shrink: 0; }
.ini-section { margin-bottom: 2px; }
.ini-section-header { display: flex; align-items: center; gap: 6px; padding: 4px 10px; cursor: pointer; user-select: none; background: var(--bg-2, #f6f8fa); border-bottom: 1px solid var(--border, #e0e0e0); min-height: 30px; }
.ini-section-header:hover { background: var(--bg-3, #e8eaed); }
.ini-arrow { font-size: 10px; color: var(--fg-2, #888); flex-shrink: 0; width: 10px; }
.ini-section-title { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--accent, #0969da); flex: 1; }
.ini-header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ini-section-name { font-family: ui-monospace, monospace; font-size: 12px; border: 1px solid var(--border, #e0e0e0); border-radius: 3px; background: var(--bg, #fff); color: var(--fg, #24292f); padding: 1px 6px; outline: none; min-width: 80px; }
.ini-section-name:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0969da) 25%, transparent); }
.ini-del-section { background: transparent; border: none; cursor: pointer; color: var(--fg-2, #888); padding: 2px 4px; font-size: 13px; line-height: 1; }
.ini-del-section:hover { color: #cf222e; }
.ini-pairs { padding: 2px 0; }
.ini-collapsed .ini-pairs { display: none; }
.ini-row { display: flex; align-items: center; gap: 4px; padding: 2px 10px 2px 26px; min-height: 30px; }
.ini-row:hover { background: var(--bg-2, #f6f8fa); }
.ini-key { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--accent, #0969da); border: none; background: transparent; outline: none; min-width: 100px; max-width: 220px; flex-shrink: 0; }
.ini-eq { color: var(--fg-2, #888); padding: 0 2px; flex-shrink: 0; }
.ini-val { font-family: ui-monospace, monospace; font-size: 13px; flex: 1; border: none; background: transparent; outline: none; color: var(--fg, #24292f); min-width: 0; }
.ini-key:focus, .ini-val:focus { background: var(--bg, #fff); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0969da) 25%, transparent); }
.ini-del { background: transparent; border: none; cursor: pointer; color: var(--fg-2, #888); padding: 2px 4px; flex-shrink: 0; font-size: 13px; }
.ini-del:hover { color: #cf222e; }
.ini-add-row { display: block; margin: 2px 10px 2px 26px; padding: 2px 10px; border: 1px dashed var(--border, #e0e0e0); border-radius: 4px; background: transparent; color: var(--fg-2, #888); cursor: pointer; font-size: 12px; }
.ini-add-row:hover { background: var(--bg-3, #e8eaed); color: var(--fg, #24292f); }
.ini-add-section { padding: 3px 12px; border: 1px solid var(--border, #e0e0e0); border-radius: 4px; background: var(--bg, #fff); color: var(--fg, #24292f); cursor: pointer; font-size: 12px; }
.ini-add-section:hover { background: var(--bg-3, #e8eaed); }

/* ── Inline TOML form editor ── */
/* #tomlFormHost shares .editor-host so banner-offset rules apply automatically */
#tomlFormHost { overflow: hidden; }
.toml-form { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
/* .toml-section, .toml-row reuse .ini-section / .ini-row styles */
.toml-key { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 600; color: var(--accent, #0969da); min-width: 100px; max-width: 220px; flex-shrink: 0; }
.toml-num { font-family: ui-monospace, monospace; font-size: 13px; flex: 1; border: none; background: transparent; outline: none; color: var(--fg, #24292f); min-width: 0; max-width: 160px; }
.toml-num:focus { background: var(--bg, #fff); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0969da) 25%, transparent); }
.toml-str, .toml-arr { font-family: ui-monospace, monospace; font-size: 13px; flex: 1; border: none; background: transparent; outline: none; color: var(--fg, #24292f); min-width: 0; }
.toml-str:focus, .toml-arr:focus { background: var(--bg, #fff); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0969da) 25%, transparent); }
.toml-arr-note { font-size: 11px; color: var(--fg-2, #888); margin-left: 4px; flex-shrink: 0; white-space: nowrap; }
.toml-bool-label { display: inline-flex; align-items: center; gap: 4px; flex: 1; cursor: pointer; }
.toml-bool { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent, #0969da); }
.toml-textarea { font-family: ui-monospace, monospace; font-size: 12px; flex: 1; border: 1px solid var(--border, #e0e0e0); border-radius: 3px; background: var(--bg, #fff); color: var(--fg, #24292f); padding: 4px 6px; resize: vertical; outline: none; min-width: 0; }
.toml-textarea:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #0969da) 25%, transparent); }
.toml-row-multiline { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.toml-readonly { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fg-2, #888); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.toml-readonly-badge { font-size: 10px; color: var(--fg-2, #888); background: var(--bg-3, #e8eaed); border-radius: 3px; padding: 1px 5px; margin-left: 6px; flex-shrink: 0; white-space: nowrap; }

/* ── Archive entry delete panel (sidebar, repack-on-export) ── */
.arc-del-panel { border-top: 1px solid var(--border, #e0e0e0); flex-shrink: 0; background: var(--bg-2, #f6f8fa); }
.arc-del-toggle { width: 100%; text-align: left; padding: 6px 10px; border: none; background: transparent; color: var(--fg-2, #888); cursor: pointer; font-size: 12px; }
.arc-del-toggle:hover { background: var(--bg-3, #e8eaed); color: var(--fg, #24292f); }
.arc-del-list { max-height: 180px; overflow-y: auto; padding: 4px 0; }
.arc-del-row { display: flex; align-items: center; gap: 6px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.arc-del-row:hover { background: var(--bg-3, #e8eaed); }
.arc-del-cb { flex-shrink: 0; cursor: pointer; }
.arc-del-name { font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg, #24292f); }
.arc-del-marked .arc-del-name { text-decoration: line-through; color: var(--fg-2, #888); }

/* ── Release status badge ── */
.construction-badge {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(42px, calc(env(safe-area-inset-bottom) + 30px));
  /* Decorative status stays below the scrim/drawers/modals so it never obscures controls or
     long disclosure text while an overlay is open. */
  z-index: 19;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #0969da) 45%, var(--border, #e0e0e0));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #fff) 92%, var(--accent, #0969da));
  color: var(--fg, #24292f);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  user-select: none;
  cursor: help;
  pointer-events: none;   /* decorative marker — never intercept clicks on content beneath it (e.g. bottom-right controls like the GIF "Split frames" button) */
}
/* Keep the beta marker on the landing screen, where it communicates status without covering a
   renderer, pagination control, or media tab. The working viewer exposes status through About. */
#app:has(#workspace:not([hidden])) .construction-badge { visibility: hidden; }
.construction-badge::after {
  content: attr(data-hover);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: min(260px, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--fg, #24292f);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .12s, transform .12s;
}
.construction-badge:hover::after,
.construction-badge:focus::after {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cold-open boot spinner ── shown by boot.js when a file is opened before the heavy app
   finishes loading. Mirrored in index.html's critical CSS so it can paint before app.css swaps in. */
.boot-spinner { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--fg-2); font-size: 14px; }
.boot-spinner-ring { width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--bg-3); border-top-color: var(--accent); animation: boot-spin .8s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
.reduce-motion .boot-spinner-ring { animation: none; }

/* App-wide idle screensaver (docs/core/global-screensaver.js). Full-viewport retro
   terminal overlay; fades in, any input dismisses it. */
.fv-ss-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center;
  justify-content: center; background: #000; cursor: pointer; opacity: 0;
  transition: opacity 1s ease; }
.fv-ss-overlay.fv-ss-on { opacity: 1; }
.fv-ss-pre { margin: 0; font: 16px/1.35 ui-monospace, "DejaVu Sans Mono", "Courier New", monospace;
  color: #5f6; text-shadow: 0 0 6px rgba(85,255,100,.5); white-space: pre; }
.reduce-motion .fv-ss-overlay { transition: none; }