/* TheFile.Ninja RS, web demo. Colours: gpui-component's default theme (shadcn
 * neutral) with the app's own palette (tfn-app/src/theme.rs); sizes measured on
 * screenshots of the real window at 100 % scale. */

:root {
  color-scheme: dark;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --display: Bahnschrift, "DIN Alternate", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Arial, sans-serif;
}

.tfn {
  /* dark (Default Dark) */
  --bg: #0a0a0a;
  --fg: #fafafa;
  --muted: #a3a3a3;
  --muted-bg: #262626;
  --border: #262626;
  --chrome: #171717;
  --titlebar: #151515;
  --popover: #0a0a0a;
  --popover-fg: #fafafa;
  --hover: rgb(38 38 38 / 0.6);
  --menu-hover: #262626;
  --button-hover: #212121;
  --input-border: #2f2f2f;
  --track: rgb(255 255 255 / 0.07);
  --scroll-thumb: rgb(82 82 82 / 0.9);
  --accent: hsl(211 80% 55%);
  --accent-h: 211;
  --accent-s: 80%;
  --accent-l: 55%;
  --cursor-bg: var(--accent);
  --cursor-inactive: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.25);
  --accent-14: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.14);
  --accent-15: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.15);
  --accent-60: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.6);
  --marked-fg: hsl(48 95% 62%);
  --marked-bg: hsl(48 90% 55% / 0.14);
  --folder: hsl(212 85% 66%);
  --image: hsl(9 75% 66%);
  --video: hsl(280 55% 70%);
  --audio: hsl(140 50% 60%);
  --archive: hsl(32 90% 60%);
  --code: hsl(190 60% 60%);
  --doc: hsl(225 60% 70%);
  --program: hsl(120 55% 58%);
  --drive: hsl(200 30% 70%);
  --network: hsl(170 45% 60%);
  --danger: #f87171;
  --ok: hsl(140 55% 58%);
  --warning: hsl(36 90% 60%);
  --selection: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.45);
  --shadow: 0 8px 24px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
  --editor-fg: #caccca;
  --line-no: #8f8f8f;
  --diff-add: #0c4619;
  --diff-del: #46190c;
  --syn-keyword: #c678dd;
  --syn-string: #98c379;
  --syn-comment: #7f848e;
  --syn-number: #d19a66;
  --syn-function: #61afef;
  --syn-type: #e5c07b;
  --syn-property: #e06c75;
  --syn-tag: #e06c75;
  --syn-attr: #d19a66;
  --syn-punct: #abb2bf;
  --syn-cyan: #56b6c2;
}

.tfn.light {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #737373;
  --muted-bg: #f5f5f5;
  --border: #e5e5e5;
  --chrome: #f8f8f8;
  --titlebar: #f3f3f3;
  --popover: #ffffff;
  --popover-fg: #0a0a0a;
  --hover: #f5f5f5;
  --menu-hover: #f5f5f5;
  --button-hover: #ebebeb;
  --input-border: #e5e5e5;
  --track: rgb(0 0 0 / 0.06);
  --scroll-thumb: rgb(163 163 163 / 0.9);
  --accent: hsl(211 85% 47%);
  --accent-h: 211;
  --accent-s: 85%;
  --accent-l: 47%;
  --cursor-inactive: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
  --marked-fg: hsl(4 80% 45%);
  --marked-bg: hsl(4 80% 50% / 0.1);
  --folder: hsl(212 85% 52%);
  --image: hsl(9 75% 50%);
  --video: hsl(280 55% 50%);
  --audio: hsl(140 50% 38%);
  --archive: hsl(32 90% 48%);
  --code: hsl(190 60% 36%);
  --doc: hsl(225 60% 50%);
  --program: hsl(120 55% 32%);
  --drive: hsl(200 30% 40%);
  --network: hsl(170 45% 38%);
  --danger: #ef4444;
  --ok: hsl(140 55% 36%);
  --warning: hsl(36 90% 45%);
  --selection: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.3);
  --shadow: 0 8px 24px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.08);
  --editor-fg: #383a42;
  --line-no: #929292;
  --diff-add: #dafbe1;
  --diff-del: #ffebe9;
  --syn-keyword: #a626a4;
  --syn-string: #50a14f;
  --syn-comment: #a0a1a7;
  --syn-number: #986801;
  --syn-function: #4078f2;
  --syn-type: #c18401;
  --syn-property: #e45649;
  --syn-tag: #e45649;
  --syn-attr: #986801;
  --syn-punct: #383a42;
  --syn-cyan: #0184bc;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--font); }
.tfn {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.4 var(--font);
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  outline: none;
  -webkit-font-smoothing: antialiased;
}
.tfn ::selection { background: var(--selection); }
.i { flex: none; display: block; }
.si { flex: none; display: block; }
.si.dim, .i.dim { opacity: 0.5; }
.muted { color: var(--muted); }
.trunc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.flex1 { flex: 1; min-width: 0; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- scrollbars */
.tfn .scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
.tfn .scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tfn .scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
.tfn .scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- title bar */
.titlebar {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  background: var(--titlebar);
  border-bottom: 1px solid var(--border);
  padding-left: 10px;
}
.menubar { display: flex; align-items: center; gap: 1px; height: 100%; }
.mb-item {
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  font-size: 14px;
  cursor: default;
}
.mb-item:hover, .mb-item.open { background: var(--button-hover); }
.tb-drag { flex: 1; height: 100%; }
.tb-btns { display: flex; align-items: center; gap: 4px; height: 100%; padding-right: 22px; }
.tb-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--fg);
  cursor: default;
}
.tb-btn:hover { background: var(--button-hover); }
.tb-btn.on { background: var(--button-hover); }
.win-btns { display: flex; height: 100%; }
.win-btn { width: 34px; height: 100%; display: grid; place-items: center; color: var(--fg); opacity: 0.9; }
.win-btn:hover { background: var(--button-hover); }
.win-btn.close:hover { background: #c42b1c; color: #fff; }

/* ---------------------------------------------------------------- toolbar row */
.toolbar {
  height: 34px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  overflow: hidden;
}
.tbw { display: flex; align-items: center; height: 26px; padding: 0 6px; border-radius: 4px; gap: 6px; white-space: nowrap; }
.tbw:hover { background: var(--hover); }
.drv { display: flex; align-items: center; gap: 5px; }
.drv b { font-weight: 700; font-size: 12px; }
.drv .dbar { width: 30px; height: 5px; border-radius: 2px; background: var(--track); overflow: hidden; }
.drv .dbar i { display: block; height: 100%; border-radius: 2px; }
.drv .free { color: var(--muted); }
.tb-hint { color: var(--muted); margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }

/* ---------------------------------------------------------------- main area */
.main { flex: 1; min-height: 0; display: flex; position: relative; }
.splitter { flex: none; width: 1px; background: var(--border); position: relative; z-index: 3; }
.splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; cursor: col-resize; }
.splitter.h { width: auto; height: 1px; }
.splitter.h::after { left: 0; right: 0; top: -3px; bottom: -3px; cursor: row-resize; }
.panes { flex: 1; min-width: 0; display: flex; }
.panes.stacked { flex-direction: column; }

/* ---------------------------------------------------------------- folder tree */
.tree { flex: none; display: flex; flex-direction: column; background: var(--chrome); min-width: 0; }
.tree-head { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 4px 6px 2px 6px; }
.tree-head .tb-btn { width: 20px; height: 20px; border-radius: 4px; color: var(--fg); flex: none; }
.tree-head .tb-btn.on { background: var(--button-hover); color: var(--accent); }
.tree-body { flex: 1; min-height: 0; padding-bottom: 8px; }
/* the search box (Find folders and files) and its answer in the tree's place */
.tree-find { flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--muted); cursor: text; }
.tree-find:focus-within { border-color: var(--accent); }
.tree-find input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: transparent; color: var(--fg); font: inherit; font-size: 12px; }
.tree-find input::placeholder { color: var(--muted); }
.tree-find .tf-busy, .tree-find .tf-x { display: none; flex: none; }
.tree-find.busy .tf-busy { display: grid; }
.tree-find.has:not(.busy) .tf-x { display: grid; cursor: pointer; }
.tree-find .tf-x:hover { color: var(--fg); }
.tf-head { height: 40px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 16px 4px 8px; font-size: 11px; color: var(--muted); }
.tf-head b { font-weight: 600; }
.tf-hit { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 8px; cursor: pointer; }
.tf-hit:hover { background: var(--hover); }
.tf-hit.sel { background: var(--cursor-inactive); }
.tree.focus .tf-hit.sel { background: var(--accent); color: #fff; }
.tf-ico { color: var(--folder); display: grid; flex: none; }
.tree.focus .tf-hit.sel .tf-ico, .tree.focus .tf-hit.sel .tf-file, .tree.focus .tf-hit.sel .tf-place { color: #fff; }
.tf-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tf-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; line-height: 18px; }
.tf-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-file { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.tf-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-place { margin-right: 8px; font-size: 11px; line-height: 15px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; direction: rtl; text-align: left; }
.tf-empty { padding: 8px 12px; font-size: 11px; color: var(--muted); }
.tn {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  white-space: nowrap;
  cursor: default;
}
.tn:hover { background: var(--hover); }
.tn.sel { background: var(--cursor-inactive); }
.tree.focus .tn.sel { background: var(--accent); color: #fff; }
.tn .chev { width: 14px; display: grid; place-items: center; color: var(--muted); flex: none; }
.tn .chev .i { width: 12px; height: 12px; }
.tn .ico { color: var(--folder); }
.tn .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tn.section .lbl { color: var(--muted); font-size: 12px; }
.tn .usage { width: 40px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; flex: none; }
.tn .usage i { display: block; height: 100%; border-radius: 2px; }
.tn .branch { font-size: 11px; color: var(--muted); }
.tn .dot { width: 6px; height: 6px; border-radius: 3px; flex: none; }
.tn.drop { background: var(--accent-15); outline: 1px solid var(--accent); outline-offset: -1px; }

/* ---------------------------------------------------------------- pane */
.pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow: hidden; }
.pane.faded > * { opacity: 0.7; }
.pane.faded > .popup-layer { opacity: 1; }
.tabs {
  height: 32px;
  flex: none;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 3px 4px;
  background: var(--chrome);
  border-top: 2px solid var(--chrome);
  overflow: hidden;
}
.pane.active .tabs { border-top-color: var(--accent); }
.tab {
  min-width: 72px;
  max-width: 210px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tab:hover { background: var(--hover); }
.tab.on { background: var(--bg); border-color: var(--border); color: var(--fg); font-weight: 600; }
.tab .ti { color: var(--muted); }
.tab.on .ti { color: var(--accent); }
.tab .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tab .tx { border-radius: 3px; visibility: hidden; display: grid; place-items: center; width: 14px; height: 14px; }
.tab.on .tx, .tab:hover .tx { visibility: visible; }
.tab .tx:hover { background: var(--hover); }
.tab.dragging { opacity: 0.4; }
.tab.drop-before { box-shadow: -2px 0 0 var(--accent); }
.tab.drop-after { box-shadow: 2px 0 0 var(--accent); }
.tab-new { width: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--fg); margin: 2px 0; }
.tab-new:hover { background: var(--hover); }

.nav {
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
}
.nb {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--fg);
  flex: none;
}
.nb:hover { background: var(--button-hover); }
.nb.off { color: var(--muted); opacity: 0.5; pointer-events: none; }
.nb.spin .i { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.crumbs {
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: 0 4px 0 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 0 0 4px;
  overflow: hidden;
  cursor: text;
}
.crumb { display: flex; align-items: center; height: 22px; padding: 0 6px; border-radius: 4px; white-space: nowrap; cursor: default; flex: none; }
.crumb:hover { background: var(--hover); }
.crumb.root { color: var(--accent); }
.crumb.last { font-weight: 600; }
.crumb-sep { width: 16px; height: 22px; display: grid; place-items: center; border-radius: 4px; color: var(--muted); flex: none; cursor: default; }
.crumb-sep:hover, .crumb-sep.open { background: var(--hover); color: var(--fg); }
.crumb-sep .i { width: 12px; height: 12px; }
.crumb-more { padding: 0 4px; justify-content: center; }
.crumb.drop { background: var(--accent-15); outline: 1px solid var(--accent); }
.crumb-fill { flex: 1; align-self: stretch; }
.branch-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  margin: 0 2px;
  white-space: nowrap;
  flex: none;
  cursor: default;
}
.branch-chip .i { width: 12px; height: 12px; }
.addr-wrap { flex: 1; min-width: 0; position: relative; display: flex; margin: 0 4px 0 4px; }
.addr-ghost { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 13px; color: var(--muted); opacity: 0.75; pointer-events: none; white-space: pre; }
.addr {
  flex: 1;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  outline: none;
  padding: 0 7px;
  font-size: 13px;
}
.crumbs.query { gap: 6px; padding: 0 8px; font-family: var(--mono); font-size: 12.5px; }
.viewbtn {
  height: 24px;
  min-width: 24px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  color: var(--fg);
  flex: none;
  font-size: 12px;
}
.viewbtn:hover, .viewbtn.open { background: var(--button-hover); }
.viewbtn .vt { color: var(--muted); }
.viewbtn .vdot { width: 5px; height: 5px; border-radius: 3px; background: var(--accent); }

/* bars above the list (rename, new folder, git, confirm...) */
.bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.bar input[type="text"] {
  flex: 1;
  min-width: 80px;
  height: 26px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--bg);
  padding: 0 7px;
  outline: none;
  font-size: 13px;
}
/* Multi-rename (Ctrl+M): the bar (pane/rename.rs: rows of fields and small buttons on a tint of the accent) */
.bar[data-bar="mrename"] { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 8px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); font-size: 13px; }
.rn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.rn-row[hidden], .rn-counter[hidden] { display: none !important; }
.bar input.rn-in, .rn-pf { flex: none; min-width: 0; height: 24px; border: 1px solid var(--input-border); border-radius: 6px; background: color-mix(in srgb, var(--fg) 4%, transparent); padding: 0 8px; font-size: 13px; color: var(--fg); outline: none; }
.bar input.rn-in:focus, .rn-pf:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bar input.rn-in::placeholder, .rn-pf input::placeholder { color: var(--muted); }
.bar input.rn-desc { flex: 1; width: auto; }
.rn-pf { display: inline-flex; align-items: center; gap: 5px; cursor: text; }
.rn-pf span { font-size: 12px; white-space: nowrap; }
.bar .rn-pf input { flex: 1; min-width: 0; width: auto; height: 22px; border: 0; background: none; padding: 0; outline: none; box-shadow: none; font-size: 13px; color: var(--fg); }
.rn-title { white-space: nowrap; font-weight: 600; }
.rn-lbl { font-size: 12px; }
.rn-gap { width: 16px; flex: none; }
.rn-b { height: 22px; padding: 0 6px; border: 0; border-radius: 5px; background: none; color: var(--fg); font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.rn-b:hover { background: var(--button-hover); }
.rn-b.on { background: var(--muted-bg); }
.rn-b.only { width: 22px; padding: 0; justify-content: center; }
.rn-b .rn-caret { opacity: 0.75; }
.bar .rn-ok { height: 20px; padding: 0 6px; font-size: 13px; border-radius: 5px; }
.bar .rn-ask { height: 22px; padding: 0 10px; font-size: 13px; }
.rn-counter { display: inline-flex; gap: 8px; align-items: center; }
.rn-status, .rn-line { display: flex; gap: 6px; align-items: center; padding-left: 24px; min-width: 0; font-size: 12px; }
.rn-line > .i { flex: none; }
.rn-bad { color: var(--danger); }
.rn-warn { color: var(--warning); }
.rn-asking { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.rn-asking .spinning { animation: spin 0.8s linear infinite; }
.nw { white-space: nowrap; flex: none; }
/* Marks by pattern and with AI (pane/meta.rs: icon, title, field, button on a tint of the accent; ai_mark.rs: the lines under it) */
.bar[data-bar="mark"] { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 8px; background: color-mix(in srgb, var(--accent) 10%, var(--bg)); font-size: 13px; }
.mb-row { flex-wrap: nowrap; }
.mb-row > .i { flex: none; }
.mb-title { flex: none; max-width: 200px; white-space: nowrap; }
.bar input.mb-q { flex: 1; width: auto; min-width: 120px; }
.bar .mb-ok { height: 24px; padding: 0 10px; font-size: 13px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.mb-line { padding-left: 24px; align-items: flex-start; }
.mb-line > .i { margin-top: 2px; }
.mb-res { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.mb-res .rn-b { height: 20px; font-size: 12px; gap: 4px; }
.mb-res .mb-count { font-weight: 500; }
.mb-wrap { flex: 1; min-width: 0; white-space: normal; }
.mb-codeline { align-items: flex-start; }
.mb-code { flex: 1; min-width: 0; max-height: 180px; overflow: auto; margin: 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: 3px; font: 12px/1.45 var(--mono, Consolas, monospace); white-space: pre-wrap; background: color-mix(in srgb, var(--bg) 60%, transparent); color: var(--fg); }
/* the new names in the rows: the new one bold in the accent (red when it cannot be used), the old one faded after it */
.rn-new, .row.marked .nm.rn-new { font-weight: 600; color: var(--accent); }
.rn-new.bad, .row.marked .nm.rn-new.bad, .list.focus .row.cur .rn-new.bad { color: var(--danger) !important; }
.rn-old { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.list.focus .row.cur .rn-old { color: #fff; }
.tile .tl.rn-tile, .tile.marked .tl.rn-tile { color: var(--accent); }
.tile .tl.rn-tile.bad, .tile.marked .tl.rn-tile.bad { color: var(--danger); }
.btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  white-space: nowrap;
  font-size: 12px;
}
.btn:hover { background: var(--button-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* the list */
.list { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; outline: none; }
.hdr {
  height: 26px;
  flex: none;
  display: flex;
  padding: 0 4px;
  background: var(--chrome);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.hc {
  height: 100%;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  overflow: hidden;
  flex: none;
}
.hc:hover { background: var(--hover); }
.hc.sortable { cursor: pointer; }
.hc.right { justify-content: flex-end; }
.hc.name { flex: 1 1 auto; min-width: 120px; }
.hc.name.fixed { flex: 0 1 auto; }
.hc .sorti { color: var(--accent); }
.hc .rsz { position: absolute; top: 0; bottom: 0; right: -3px; width: 7px; cursor: col-resize; z-index: 2; }
.hc.drop-l { box-shadow: inset 2px 0 0 var(--accent); }
.hc.drop-r { box-shadow: inset -2px 0 0 var(--accent); }
.rows { flex: 1; min-height: 0; position: relative; }
.row {
  height: var(--row-h, 24px);
  display: flex;
  align-items: center;
  padding: 0 4px;
  white-space: nowrap;
}
.row:hover { background: var(--hover); }
.row.stripe { background: var(--stripe, transparent); }
.row.marked { background: var(--marked-bg); }
.row.cur { background: var(--cursor-inactive); }
.list.focus .row.cur { background: var(--accent); color: #fff; }
.list.focus .row.cur .c, .list.focus .row.cur .nm, .list.focus .row.cur .i { color: #fff !important; }
.row.cut .nm, .row.cut .si { opacity: 0.45; }
.row.drop { background: var(--accent-15) !important; outline: 1px solid var(--accent); outline-offset: -1px; }
.c { padding: 0 4px; overflow: hidden; flex: none; min-width: 0; color: var(--muted); }
.c.fg { color: var(--fg); }
.c.right { text-align: right; }
.c.txt { white-space: nowrap; text-overflow: ellipsis; }
.c.name { flex: 1 1 auto; min-width: 120px; display: flex; align-items: center; gap: 6px; color: var(--fg); }
.c.name.fixed { flex: 0 1 auto; }
.nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row.dim .nm { opacity: 0.65; }
.row.marked .nm { color: var(--marked-fg); font-weight: 600; }
.list.focus .row.cur.marked .nm { color: #fff; }
.c.link { color: var(--accent); cursor: pointer; }
.c.link:hover { text-decoration: underline; }
.prow { color: var(--fg); }
.prow .i { color: var(--folder); }
.grow { background: var(--muted-bg); font-weight: 600; gap: 8px; padding-left: 8px; }
.grow .gc { font-size: 12px; font-weight: 400; color: var(--muted); }
.list.focus .row.cur.grow .gc { color: #fff; }
/* size bar (cells.rs bar) */
.sbar { position: relative; height: calc(var(--row-h, 24px) - 8px); min-height: 10px; border-radius: 3px; background: var(--track); overflow: hidden; }
.sbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.sbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding: 0 4px; font-size: 12px; color: var(--fg); }
.list.focus .row.cur .sbar span { color: #fff; }
.chip { display: inline-flex; align-items: center; padding: 0 4px; border-radius: 3px; font-size: 12px; line-height: 17px; color: var(--fg); }
.list.focus .row.cur .chip { color: var(--fg); }
.swatch { height: calc(var(--row-h, 24px) - 10px); border-radius: 3px; }
.tagchip { display: inline-flex; align-items: center; height: 16px; line-height: 16px; padding: 0 5px; border-radius: 3px; font-size: 12px; flex: none; cursor: pointer; }
.tags-inline { display: flex; gap: 4px; min-width: 0; overflow: hidden; flex-shrink: 100; }
.gitcell { font-weight: 600; }
.empty-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); text-align: center; padding: 20px; pointer-events: none; }
.empty-msg .i { width: 24px; height: 24px; }
.rename-input { flex: 1; min-width: 60px; height: 20px; border: 1px solid var(--accent); border-radius: 3px; background: var(--bg); color: var(--fg); padding: 0 4px; outline: none; font-size: 13px; }

/* status bar */
.status {
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: var(--chrome);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}
.pane.active .status { border-top-color: var(--accent-60); }
.st { padding: 0 4px; border-radius: 3px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.st:hover { background: var(--hover); }
.st.off { text-decoration: line-through; }
.st.chipped { background: var(--accent-15); color: var(--fg); }
.st.marks { color: var(--marked-fg); font-weight: 600; cursor: default; }
.st.marks:hover { background: none; }
.vol { display: flex; align-items: center; gap: 4px; }
.vol .vb { width: 60px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.vol .vb i { display: block; height: 100%; border-radius: 3px; }
.st-msg { max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
.st-msg.err { color: var(--danger); }

/* icon view */
.grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 14px; padding: 12px 18px; }
.tile {
  width: var(--tile-w, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  text-align: center;
}
.tile:hover { background: var(--hover); }
.tile.cur { background: var(--cursor-inactive); }
.list.focus .tile.cur { background: var(--accent); color: #fff; }
.tile.marked { border-color: var(--marked-fg); }
.tile.marked .tl { color: var(--marked-fg); font-weight: 600; }
.tile .tv { width: var(--icon-px, 64px); height: var(--icon-px, 64px); display: grid; place-items: center; position: relative; }
.tile .tv .si, .tile .tv svg.big { width: 100%; height: 100%; }
.tile .tv img, .tile .tv canvas { max-width: 100%; max-height: 100%; border-radius: 3px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.tile .tl { font-size: 12px; line-height: 16px; max-height: 32px; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile.dim .tv, .tile.dim .tl { opacity: 0.6; }

/* columns (Miller) view */
.miller { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; }
.mcol { width: 240px; flex: none; border-right: 1px solid var(--border); overflow-y: auto; padding: 0; }
.mcol .row { gap: 6px; }
.mcol .row .nm { flex: 1; }
.mcol .row .chevr { color: var(--muted); }
.mcol .row.path { background: var(--accent); color: #fff; }
.mcol .row.path .i, .mcol .row.path .chevr { color: #fff; }
.mcol .row.path.trail { background: var(--cursor-inactive); color: var(--fg); }
.mcol .row.path.trail .chevr { color: var(--muted); }
.mcol .mempty { padding: 12px; color: var(--muted); font-size: 12px; }

/* space view (treemap) */
.space { position: absolute; inset: 0; overflow: hidden; }
.sp-cell { position: absolute; overflow: hidden; border: 1px solid rgb(0 0 0 / 0.55); font-size: 11px; line-height: 14px; color: #fff; padding: 1px 3px; }
.sp-cell.dir { border-color: var(--bg); }
.sp-cell .sl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.sp-cell .ss { opacity: 0.75; white-space: nowrap; }
.sp-cell.cur { box-shadow: inset 0 0 0 2px var(--accent); z-index: 2; }
.list.focus .sp-cell.cur { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--accent); }
.sp-cell:hover { filter: brightness(1.15); }

/* showcase */
.shelves { padding: 6px 10px 20px; }
.shelf { position: relative; margin-bottom: 18px; }
.shelf-row { display: flex; align-items: flex-end; gap: 16px; padding: 8px 8px 0; min-height: 40px; }
.ledge { height: 6px; margin: 0 0 0 0; background: linear-gradient(var(--muted-bg), rgb(0 0 0 / 0)); border-radius: 2px; }
.labels { display: flex; gap: 16px; padding: 10px 8px 0; }
.cover { position: relative; flex: none; border-radius: 2px; outline-offset: 2px; }
.cover canvas { display: block; }
.cover.cur { outline: 2px solid var(--accent); transform: translateY(-6px); }
.cover.marked { box-shadow: 0 0 0 2px var(--marked-fg), 0 0 14px var(--marked-fg); }
.cover.parent { border: 1px dashed var(--border); display: grid; place-items: center; color: var(--muted); }
.lbl-cell { flex: none; text-align: center; font-size: 13px; overflow: hidden; }
.lbl-cell .t1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-cell .t2 { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbl-cell.cur .t1 { font-weight: 600; }

/* ---------------------------------------------------------------- preview */
.preview { flex: none; display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.pv-head { flex: none; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); background: var(--chrome); }
.pv-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; }
.pv-title .i { color: var(--folder); }
.pv-sub { font-size: 12px; color: var(--muted); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-modes { display: flex; gap: 2px; margin-top: 6px; font-size: 12px; }
.pv-mode { padding: 1px 6px; border-radius: 4px; cursor: pointer; }
.pv-mode:hover { background: var(--hover); }
.pv-mode.on { background: var(--muted-bg); }
.pv-mode.sep { margin-left: 18px; }
.pv-body { flex: 1; min-height: 0; position: relative; }
.pv-foot { height: 24px; flex: none; display: flex; align-items: center; padding: 0 8px; font-size: 12px; color: var(--muted); background: var(--chrome); border-top: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.pv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); }
.pv-empty .i { width: 20px; height: 20px; }
.pv-folder { padding: 14px 12px; }
.pv-big { font-size: 24px; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.pv-big small { font-size: 12px; color: var(--muted); font-weight: 400; }
.pv-line { color: var(--muted); font-size: 12px; margin-top: 10px; }
.pv-h { font-size: 12px; font-weight: 600; color: var(--muted); margin: 18px 0 8px; }
.pv-bar { margin-bottom: 9px; font-size: 12px; }
.pv-bar .lab { display: flex; justify-content: space-between; margin-bottom: 4px; }
.pv-bar .lab span:last-child { color: var(--muted); }
.pv-bar .tr { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.pv-bar .tr i { display: block; height: 100%; border-radius: 2px; }
.pv-drive .bigbar { height: 10px; border-radius: 5px; background: var(--track); overflow: hidden; margin-top: 12px; }
.pv-drive .bigbar i { display: block; height: 100%; border-radius: 5px; }
.code { font: 12.5px/18px var(--mono); padding: 4px 0; white-space: pre; tab-size: 4; color: var(--editor-fg); user-select: text; -webkit-user-select: text; min-width: max-content; }
.code .ln { display: inline-block; width: 30px; padding-right: 10px; text-align: right; color: var(--line-no); user-select: none; }
.code .l { display: block; padding-left: 4px; }
.code.wrap { white-space: pre-wrap; min-width: 0; }
.hex { font: 12px/18px var(--mono); padding: 4px 6px; white-space: pre; color: var(--editor-fg); }
.hex .off { color: var(--accent); }
.diff .l.add { background: var(--diff-add); }
.diff .l.del { background: var(--diff-del); }
.diff .l.hunk { color: var(--accent); }
.diff .ln2 { display: inline-block; width: 34px; text-align: right; color: var(--line-no); padding-right: 6px; }
.diff .mk { display: inline-block; width: 16px; text-align: center; }
.diff .l.add .mk { color: var(--ok); }
.diff .l.del .mk { color: var(--danger); }
.md { padding: 6px 14px 20px; font-size: 13.5px; line-height: 1.55; user-select: text; -webkit-user-select: text; }
.md h1 { font-size: 22px; margin: 10px 0 8px; font-weight: 700; }
.md h2 { font-size: 17px; margin: 18px 0 6px; font-weight: 600; }
.md h3 { font-size: 15px; margin: 14px 0 6px; }
.md p { margin: 6px 0; }
.md ul, .md ol { margin: 6px 0; padding-left: 22px; }
.md li { margin: 3px 0; }
.md li.task { list-style: none; margin-left: -20px; display: flex; gap: 8px; align-items: center; }
.md li.task .box { width: 15px; height: 15px; border: 1px solid var(--muted); border-radius: 3px; display: grid; place-items: center; flex: none; }
.md li.task.done .box { background: #fff; border-color: #fff; color: #000; }
.light .md li.task.done .box { background: var(--fg); color: #fff; border-color: var(--fg); }
.md li.task.done { color: var(--muted); }
.md code { font-family: var(--mono); font-size: 11.5px; background: var(--muted-bg); padding: 1px 5px; border-radius: 3px; }
.md pre { background: var(--chrome); padding: 8px 10px; border-radius: 6px; font: 12px/1.5 var(--mono); overflow: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.md td, .md th { border: 1px solid var(--border); padding: 3px 10px; }
.md th { background: var(--chrome); }
.md a { color: var(--accent); }
.pv-info { flex: none; border-top: 1px solid var(--border); padding: 10px 12px; display: grid; grid-template-columns: 118px 1fr; row-gap: 5px; font-size: 12px; }
.pv-info .k { color: var(--muted); }
.pv-img { position: absolute; inset: 0; display: flex; flex-direction: column; }
.pv-img .pic { flex: 1; min-height: 0; display: grid; place-items: center; padding: 10px; }
.pv-img .pic canvas, .pv-img .pic img { max-width: 100%; max-height: 100%; box-shadow: 0 2px 10px rgb(0 0 0 / 0.5); }
.doc-page { background: #fff; color: #222; margin: 14px auto; width: 82%; aspect-ratio: 1 / 1.414; box-shadow: 0 2px 12px rgb(0 0 0 / 0.5); padding: 7% 8%; font: 7px/1.5 Georgia, serif; overflow: hidden; }
.doc-page h1 { font: 700 13px/1.2 var(--font); margin: 0 0 8px; color: #111; }
.doc-page h2 { font: 600 9px/1.2 var(--font); margin: 10px 0 4px; color: var(--accent); }
.doc-page p { margin: 0 0 5px; color: #444; }
.doc-page .bar { display: block; height: 5px; background: #e6e6e6; border: 0; margin: 4px 0; padding: 0; }
.doc-page table { width: 100%; border-collapse: collapse; font: 7px var(--font); }
.doc-page td { border-bottom: 1px solid #ddd; padding: 2px; }

/* ---------------------------------------------------------------- menus */
.menu {
  position: fixed;
  z-index: 1000;
  min-width: 180px;
  background: var(--popover);
  color: var(--popover-fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  font-size: 13.5px;
  outline: none;
}
.mi {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border-radius: 5px;
  white-space: nowrap;
  cursor: default;
}
.mi.sel { background: var(--menu-hover); }
.mi.dis { opacity: 0.45; }
.mi .mck { width: 16px; display: grid; place-items: center; flex: none; }
.mi .mic { width: 16px; display: grid; place-items: center; flex: none; color: var(--fg); }
.mi .ml { flex: 1; }
.mi .mk { color: var(--muted); font-size: 12px; margin-left: 24px; }
.mi .ma { color: var(--muted); margin-left: 12px; }
.mi .ma .i { width: 14px; height: 14px; }
.menu.compact { font-size: 13px; min-width: 220px; max-width: 460px; max-height: 440px; overflow-y: auto; border-radius: 6px; }
.menu.compact .mi { height: 24px; border-radius: 4px; }
.mi.current { font-weight: 600; background: var(--accent-14); }
.msep { height: 1px; background: var(--border); margin: 4px -4px; }
.mlabel { height: 26px; display: flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 13px; }
.quick { display: flex; gap: 4px; padding: 2px 0 2px; }
.qb { flex: 1; min-width: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 5px; border-radius: 4px; font-size: 12px; cursor: default; }
.qb:hover { background: var(--menu-hover); }
.qb.dis { opacity: 0.35; pointer-events: none; }

/* ---------------------------------------------------------------- popovers, palette, tips */
.tip {
  position: fixed;
  z-index: 2000;
  pointer-events: none;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  box-shadow: var(--shadow);
  max-width: 420px;
  white-space: pre-line;
}
.tip .kbd { margin-left: 8px; color: var(--muted); }
.infotip { padding: 8px 10px; font-size: 12px; white-space: normal; }
.infotip .it-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.infotip .it-grid { display: grid; grid-template-columns: 80px auto; row-gap: 4px; column-gap: 8px; }
.infotip .k { color: var(--muted); }
.palette {
  position: fixed;
  z-index: 1500;
  width: 632px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  font-size: 15px;
}
.palette input { width: 100%; height: 26px; border: 2px solid var(--accent); border-radius: 6px; background: var(--bg); outline: none; padding: 0 8px; font-size: 14px; }
.pal-list { max-height: 420px; overflow: auto; margin-top: 4px; }
.pal-item { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 34px; border-radius: 5px; white-space: nowrap; }
.pal-item.sel { background: var(--accent); color: #fff; }
.pal-item .pm { font-size: 12px; color: var(--muted); }
.pal-item.sel .pm { color: rgb(255 255 255 / 0.8); }
.pal-item .pk { margin-left: auto; font-size: 12px; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; line-height: 18px; color: var(--muted); }
.pal-item.sel .pk { color: #fff; border-color: rgb(255 255 255 / 0.7); }
.pal-item.dis { opacity: 0.45; }
.toast-host { position: fixed; z-index: 1800; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: var(--popover); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 8px 12px; font-size: 13px; display: flex; gap: 10px; align-items: center; pointer-events: auto; max-width: 640px; }
.toast .i { color: var(--accent); }
.toast a { color: var(--accent); cursor: pointer; text-decoration: none; font-weight: 600; }

/* ops strip under the panes */
.ops { flex: none; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: var(--chrome); border-top: 1px solid var(--border); font-size: 12px; }
.ops .op-t { flex: none; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ops .prog { flex: none; width: 140px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.ops .prog i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ops .op-d { flex: none; white-space: nowrap; }
.ops .op-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-q, .ops-c { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 30px; font-size: 12px; background: color-mix(in srgb, var(--warning) 12%, var(--chrome)); }
.ops-c { background: color-mix(in srgb, var(--warning) 6%, var(--chrome)); padding-top: 2px; padding-bottom: 2px; }
.ops-q .op-qt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-c .op-cn { flex: none; width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ops-c > span:not(.flex1) { flex: none; white-space: nowrap; }
.xb { flex: none; height: 20px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--border); background: transparent; color: inherit; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; white-space: nowrap; cursor: default; }
.xb.only { width: 20px; padding: 0; justify-content: center; }
.xb:hover { background: var(--button-hover); }
.xb.ghost { border-color: transparent; }
.xb.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.xb.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }

/* view panel (Alt+0) */
.vpanel {
  position: absolute;
  z-index: 40;
  top: 70px;
  right: 6px;
  width: 440px;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 10px 12px 12px;
  font-size: 13px;
}
.vp-title { display: flex; align-items: center; font-weight: 600; margin-bottom: 8px; }
.vp-modes { display: flex; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.vp-mode { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }
.vp-mode:hover { background: var(--hover); }
.vp-mode.on { background: var(--accent); color: #fff; }
.vp-grid { display: grid; grid-template-columns: 92px 1fr 110px 20px; align-items: center; row-gap: 14px; column-gap: 6px; }
.vp-grid .k { color: var(--muted); }
.vp-grid .o { color: var(--muted); font-size: 12px; }
.vp-grid .o.changed { color: var(--accent); }
.vp-select { height: 22px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--bg); padding: 0 4px; font-size: 12.5px; }
.vp-note { color: var(--muted); font-size: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); line-height: 1.6; }
.vp-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.linkish { color: var(--accent); cursor: pointer; font-size: 12px; }

/* ---------------------------------------------------------------- search panel */
.searchpanel { flex: none; border-top: 1px solid var(--border); background: var(--bg); padding: 8px 8px 8px; font-size: 13px; }
.sp-top { display: flex; align-items: center; gap: 6px; }
.sp-mode { display: flex; align-items: center; gap: 4px; color: var(--accent); padding: 0 8px; height: 26px; border-radius: 6px; }
.sp-q { flex: 1; height: 26px; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); outline: none; padding: 0 8px; font-size: 13.5px; }
.sp-eql { font: 12px var(--mono); color: var(--muted); margin: 6px 0 8px; display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; overflow: hidden; }
.sp-boxes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sp-box { border: 1px solid var(--border); border-radius: 6px; padding: 8px; display: grid; grid-template-columns: 70px 1fr; row-gap: 6px; align-items: center; font-size: 12.5px; }
.sp-box .k { color: var(--muted); }
.sp-box input[type="text"], .sp-box select { height: 22px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--bg); padding: 0 6px; outline: none; font-size: 12.5px; min-width: 0; }
.sp-box label { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; }
.tfn input[type="checkbox"] { accent-color: var(--accent); }

/* ---------------------------------------------------------------- terminal */
.term { flex: none; display: flex; flex-direction: column; border-top: 1px solid var(--border); background: var(--bg); min-height: 80px; }
.term-head { height: 28px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--chrome); font-size: 12px; }
.term-head .ok { color: var(--ok); }
.term-body { flex: 1; min-height: 0; padding: 4px 8px; font: 12.5px/18px var(--mono); white-space: pre-wrap; word-break: break-all; color: var(--editor-fg); outline: none; cursor: text; user-select: text; -webkit-user-select: text; }
.term-body .cursor { background: var(--accent); color: var(--bg); }
.term-body .dir { color: #61afef; }
.term-body .err { color: #e06c75; }
.term-body .ok { color: #98c379; }
.term-body .dim { color: var(--muted); }
.term-in { display: inline; }
/* The header's buttons (terminal.rs header: xsmall ghost buttons, selected ones filled) and the assistant's card (terminal/ai.rs). */
.term { position: relative; }
.term-head { height: 26px; gap: 4px; border-top: 1px solid var(--border); }
.term-head .tb { width: auto; min-width: 22px; height: 20px; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; border-radius: 5px; font-size: 12px; }
.term-head .tb.on { background: var(--muted-bg); color: var(--fg); }
.term-head .t-shell { padding: 0 5px; }
.term-head .t-exit { flex: none; font-size: 12px; }
.term-head .t-status { min-width: 0; font-size: 12px; }
.term-body .t-cmd:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.term-body .t-cmd { position: relative; }
.term-body .t-mark { position: absolute; left: -7px; top: 7px; width: 5px; height: 5px; border-radius: 50%; }
.term-ai { position: absolute; left: 16px; right: 16px; bottom: 8px; max-height: 94%; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--chrome); box-shadow: 0 4px 14px rgba(0,0,0,.28); font-size: 12px; z-index: 3; }
.tai-head { display: flex; align-items: center; gap: 4px; }
.tai-head input { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--input-bg, var(--bg)); color: var(--fg); font: inherit; font-size: 13.5px; outline: none; }
.tai-head input:focus { border-color: var(--accent); }
.tai-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tai-shell { flex: none; padding: 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--fg); }
.tai-cwd { max-width: 260px; flex: none; }
.term-ai .xb.on { background: var(--muted-bg); border-color: transparent; }
.term-ai .xb.off { opacity: .5; pointer-events: none; }
.tai-asking { display: flex; align-items: center; gap: 8px; }
.tai-cmd { padding: 4px 8px; border: 1px solid; border-radius: 3px; background: var(--bg); color: var(--fg); font: 13px/19px var(--mono); white-space: pre-wrap; word-break: break-word; user-select: text; -webkit-user-select: text; }
.tai-risk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tai-risk i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tai-why { color: var(--fg); user-select: text; -webkit-user-select: text; }
.tai-part { display: flex; gap: 8px; align-items: flex-start; }
.tai-pt { flex: none; max-width: 260px; font-family: var(--mono); color: var(--accent); }
.tai-problem { display: flex; gap: 4px; align-items: center; color: var(--warning); }
.tai-alts, .tai-btns { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* fn pick's bar above the list (pane/pick.rs): the accent at 14 %. */
.bar[data-bar="pick"] { padding: 0; background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.pick-bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; min-width: 0; }
.pick-bar b { flex: 0 1 auto; min-width: 0; font-weight: 600; }
.pick-hint { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------- function-key bar */
.fnbar { flex: none; display: flex; gap: 1px; height: 26px; background: var(--border); border-top: 1px solid var(--border); }
.fk { flex: 1; display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--chrome); font-size: 12px; white-space: nowrap; overflow: hidden; }
.fk b { color: var(--accent); font-weight: 600; }
.fk:hover { background: var(--button-hover); }

/* ---------------------------------------------------------------- floating windows (viewer, dialogs) */
.fwin { position: fixed; z-index: 900; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.fwin-head { height: 34px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 0 0 12px; background: var(--titlebar); border-bottom: 1px solid var(--border); font-size: 13px; }
.fwin-head .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwin-tools { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--border); background: var(--chrome); font-size: 12px; }
.fwin-body { flex: 1; min-height: 0; }
.fwin-foot { height: 24px; flex: none; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: var(--muted); background: var(--chrome); border-top: 1px solid var(--border); }
.modal-veil { position: fixed; inset: 0; z-index: 890; background: rgb(0 0 0 / 0.35); }

/* keys table (Help › Keyboard shortcuts) */
.keys-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.keys-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.keys-table td.k { white-space: nowrap; }
.kbd-chip { display: inline-block; border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; line-height: 18px; font-size: 12px; margin-right: 4px; background: var(--chrome); }

/* drag ghost */
.dragchip { position: fixed; z-index: 3000; pointer-events: none; background: var(--popover); border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; }

/* The page around the app (header, start card, captions, the tour's pointer and keys): css/shell.css,
 * in the web site's design. */
.cloud-b { flex: none; display: inline-flex; align-items: center; }
.cbar { display: grid; gap: 6px; width: 100%; }
.cbar-r { display: flex; gap: 8px; align-items: center; }
.cbar-r input[type=text], .cbar-r input[type=password] { height: 26px; }

/* Magic Wormhole's strip (wormhole.rs) */
.worm .wh-code { flex: none; font: 700 15px var(--mono); color: #fff; background: var(--accent); border-radius: 4px; padding: 0 6px; line-height: 20px; }
.worm .wh-prog { width: 120px; }
.xb.on { background: var(--button-hover); }
.wh-qr { display: flex; gap: 14px; align-items: center; padding: 8px 12px 10px 30px; background: var(--chrome); font-size: 12px; max-width: 760px; }
.wh-qr canvas { flex: none; border-radius: 4px; }
.wh-words { display: flex; gap: 2px; }

/* the Backups window (backups/window.rs): a sidebar of pages, groups down the page */
.bk-win { flex: 1; min-height: 0; display: flex; }
.bk-side { flex: none; width: 220px; border-right: 1px solid var(--border); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; background: var(--chrome); }
.bk-nav { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; cursor: default; font-size: 13px; }
.bk-nav:hover { background: var(--button-hover); }
.bk-nav.on { background: var(--button-hover); font-weight: 600; }
.bk-body { flex: 1; min-width: 0; padding: 16px 22px 22px; font-size: 13px; line-height: 1.55; overflow: auto; }
.bk-body h2 { margin: 0 0 12px; font-size: 18px; }
.bk-body h3 { margin: 22px 0 8px; font-size: 14px; }
.bk-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.bk-card .bk-main { flex: 1; min-width: 0; }
.bk-btns { display: flex; gap: 6px; }
.bk-row { display: flex; gap: 8px; align-items: center; min-height: 28px; }
.bk-group { padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.bk-group h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.bk-run { display: flex; gap: 12px; align-items: center; height: 28px; font-size: 12.5px; }
.bk-run .bk-t { font-variant-numeric: tabular-nums; width: 120px; }
.bk-text p { margin: 0 0 8px; color: var(--muted); max-width: 70ch; }
.bk-vers { display: flex; gap: 4px; flex-wrap: wrap; }
.bar .bk-lbl { white-space: nowrap; }

/* covers fetched online (js/covers.js): the bars above the list, a cover arriving on its shelf */
.bar .cov-wrap { white-space: normal; line-height: 1.4; }
.cov-cards { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; padding: 2px 0 4px; }
.cov-card { flex: none; width: 115px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 11px; line-height: 1.3; }
.cov-card:hover { border-color: var(--accent); }
.cov-card.none { opacity: 0.55; cursor: default; }
.cov-card.none:hover { border-color: var(--border); }
.cov-pic { height: 96px; display: grid; place-items: center; }
.cov-pic img { max-width: 100%; max-height: 96px; object-fit: contain; display: block; }
.cov-t { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cov-s { opacity: 0.85; }
.cv-art { animation: cv-in 700ms ease-out both; }
@keyframes cv-in { from { opacity: 0; transform: scale(1.08); filter: brightness(1.9); } to { opacity: 1; transform: none; filter: none; } }

/* the Action Studio (js/studio.js; tfn-app/src/studio): a window of its own in the app, floating here */
.studio { position: fixed; z-index: 880; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; font-size: 13px; outline: none; }
.studio[hidden] { display: none; }
.studio .flex1 { flex: 1; }
.studio .muted { color: var(--muted); }
.studio .small { font-size: 12px; }
.studio .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.studio .mono { font-family: var(--mono); }
.st-probe { position: absolute; visibility: hidden; font-family: var(--mono); font-size: 13px; white-space: pre; }
.st-title { height: 34px; flex: none; display: flex; align-items: center; gap: 8px; padding-left: 12px; background: var(--titlebar); border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; }
.st-title b { font-size: 15px; font-weight: 600; }
.st-title .st-sub { font-size: 12px; }
.st-chip0 { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 5px; background: var(--chrome); font-size: 12px; }
.st-chip0 i, .st-chip i, .st-dot, .st-tab i { display: inline-block; flex: none; border-radius: 50%; }
.st-chip0 i { width: 7px; height: 7px; }
.st-drag { flex: 1; align-self: stretch; }
.st-tb { height: 26px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--fg); font: inherit; font-size: 13px; display: inline-flex; align-items: center; }
.st-tb:hover, .st-tb.on { background: var(--button-hover); }
.st-tb.only { width: 30px; padding: 0; justify-content: center; }
.st-title .win-btn { height: 34px; }
.st-main { flex: 1; min-height: 0; display: flex; }
.st-split { flex: none; background: var(--border); }
.st-split.v { width: 1px; cursor: col-resize; position: relative; }
.st-split.v::after { content: ""; position: absolute; inset: 0 -3px; }
.st-split.h { height: 1px; cursor: row-resize; position: relative; }
.st-split.h::after { content: ""; position: absolute; inset: -3px 0; }
.st-split[hidden], .st-right[hidden] { display: none; }

/* the library */
.st-lib { flex: none; display: flex; flex-direction: column; background: var(--chrome); min-width: 0; }
.st-lib-head { display: flex; justify-content: space-between; padding: 10px 12px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.st-lib-head .n { font-weight: 400; }
.st-lib-filter { padding: 6px 8px 4px; }
.st-lib-filter input, .st-ask input, .st-bfilter, .rf-top input, .st-repl input { width: 100%; height: 24px; border: 1px solid var(--input-border); border-radius: 5px; background: var(--bg); color: var(--fg); padding: 0 8px; font: inherit; font-size: 13px; outline: none; }
.st-lib-filter input:focus, .st-ask input:focus, .st-bfilter:focus, .rf-top input:focus, .st-repl input:focus, .as-input:focus { border-color: var(--accent); }
.st-ask { margin: 2px 8px 6px; padding: 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.st-ask .t { font-size: 12.5px; }
.st-ask .err { font-size: 12px; color: var(--danger); }
.st-ask .b { display: flex; justify-content: flex-end; gap: 4px; }
.st-ask .btn, .st-ask .btn.ghost { height: 22px; padding: 0 8px; font-size: 12px; }
.st-lib-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 4px 6px; }
.st-grp { display: flex; align-items: center; gap: 4px; padding: 10px 8px 4px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.st-grp .t { flex: 1; }
.st-plus { width: 20px; height: 20px; border: 0; border-radius: 4px; background: transparent; color: var(--fg); display: grid; place-items: center; padding: 0; }
.st-plus:hover { background: var(--button-hover); }
.st-none { padding: 0 12px 6px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.st-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.st-row:hover { background: var(--hover); }
.st-row.sel { background: var(--cursor-inactive); }
.st-dot { width: 8px; height: 8px; }
.st-rw { flex: 1; min-width: 0; }
.st-rn { display: flex; gap: 4px; min-width: 0; }
.st-rn .nm { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-rs { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.st-mod { color: var(--accent); font-size: 10px; line-height: 18px; }
.st-badge { flex: none; padding: 0 5px; border-radius: 3px; background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; }
.st-lib-foot { flex: none; padding: 8px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.6; }

/* the middle */
.st-center { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-tabs { height: 32px; flex: none; display: flex; background: var(--chrome); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.st-tabs[hidden], .st-head[hidden] { display: none; }
.st-tab { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 12px; border-right: 1px solid var(--border); color: var(--muted); cursor: pointer; }
.st-tab i { width: 7px; height: 7px; }
.st-tab .nm { font-family: var(--mono); font-size: 13px; }
.st-tab.on { background: var(--bg); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.st-tab .x { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 4px; color: var(--muted); }
.st-tab .x:hover { background: var(--button-hover); color: var(--fg); }
.st-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 3px 12px; border-bottom: 1px solid var(--border); min-height: 29px; }
.st-crumbs { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; white-space: nowrap; }
.st-crumbs .last { color: var(--fg); font-weight: 600; }
.st-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--c); border-radius: 999px; color: var(--c); font-size: 12px; line-height: 18px; white-space: nowrap; }
.st-chip i { width: 6px; height: 6px; background: var(--c); }
.st-seg { display: flex; }
.st-b { height: 22px; padding: 0 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--fg); font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
.st-b:hover { background: var(--button-hover); }
.st-b.on { background: var(--muted-bg); }
.st-b.only { width: 22px; padding: 0; justify-content: center; }
.st-b.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.st-b.primary:hover { filter: brightness(1.08); }
.st-b.outline { border-color: var(--input-border); }
.st-b.danger { border-color: var(--danger); color: var(--danger); }
.st-b.danger:hover { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.st-b:disabled { opacity: 0.45; pointer-events: none; }
.st-bars:empty { display: none; }
.st-bar { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 12.5px; background: color-mix(in srgb, var(--c) 12%, transparent); }
.st-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.st-extra { flex: 1; min-height: 0; overflow: auto; }
.st-extra[hidden], .st-ed[hidden] { display: none; }

/* the editor: the highlighted text under a transparent text box */
.st-ed { flex: 1; min-height: 0; display: flex; font-family: var(--mono); font-size: 13px; line-height: 20px; }
.st-gut { flex: none; width: 52px; overflow: hidden; color: var(--line-no); text-align: right; user-select: none; }
.st-gut-in { padding: 6px 14px 0 0; }
.st-gut-in .cur { color: var(--fg); }
.st-scroll { flex: 1; min-width: 0; overflow: auto; position: relative; }
.st-layer { position: relative; min-width: 100%; }
.st-hl, .st-ta { position: absolute; inset: 0; margin: 0; padding: 6px 12px 6px 4px; font: inherit; line-height: inherit; white-space: pre; tab-size: 4; letter-spacing: 0; }
.st-hl { color: var(--editor-fg); pointer-events: none; overflow: visible; }
.st-ta { width: 100%; height: 100%; border: 0; outline: 0; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: var(--fg); }
.st-ta::selection { background: var(--selection); color: transparent; }
.st-fills { position: absolute; inset: 0; pointer-events: none; }
.st-fill { position: absolute; left: 0; right: 0; height: 20px; background: color-mix(in srgb, var(--danger) 14%, transparent); }
.k-keyword { color: var(--syn-keyword); }
.k-constant, .k-number, .k-attribute { color: var(--syn-number); }
.k-function { color: var(--syn-function); }
.k-builtin, .k-operator, .k-escape { color: var(--syn-cyan); }
.k-namespace { color: var(--syn-type); }
.k-property, .k-self { color: var(--syn-property); }
.k-string { color: var(--syn-string); }
.k-comment { color: var(--syn-comment); font-style: italic; }
.k-invalid { color: var(--syn-property); text-decoration: wavy underline var(--syn-property); }
.pb-error { text-decoration: wavy underline var(--danger); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.pb-warning { text-decoration: wavy underline var(--warning); text-decoration-skip-ink: none; text-underline-offset: 3px; }
.pb-hint { text-decoration: dotted underline var(--muted); text-underline-offset: 3px; }
.st-hover { position: absolute; z-index: 20; max-width: 520px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--popover); box-shadow: var(--shadow); font-family: var(--mono); font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; pointer-events: none; }
.st-hover[hidden], .st-comp[hidden] { display: none; }
.st-hover .hv-fix { margin-top: 6px; }
.st-hover .hv-sig { color: var(--syn-function); margin-bottom: 4px; }
.st-comp { position: absolute; z-index: 21; width: 420px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--popover); box-shadow: var(--shadow); padding: 3px; font-size: 12.5px; }
.st-comp .cp { display: flex; gap: 10px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; cursor: pointer; }
.st-comp .cp.sel { background: var(--accent); color: #fff; }
.st-comp .cl { font-family: var(--mono); }
.st-comp .cd { color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.st-comp .cp.sel .cd { color: rgb(255 255 255 / 0.8); }

/* the welcome and the overview */
.st-welcome { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.st-welcome .h { font-size: 18px; font-weight: 600; }
.st-welcome .s { color: var(--muted); }
.st-welcome .s.small { font-size: 12px; }
.st-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 720px; }
.st-card { width: 220px; height: 112px; padding: 12px; display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.st-card:hover { background: var(--hover); }
.st-card b { font-weight: 600; font-size: 15px; }
.st-card .a { flex: 1; font-size: 12px; color: var(--muted); }
.st-card .p { font-size: 12px; color: var(--accent); }
.st-ov { padding: 16px; display: flex; flex-direction: column; gap: 16px; font-family: var(--font); line-height: 1.5; }
.ov-head { display: flex; flex-direction: column; gap: 4px; }
.ov-title { font-size: 18px; font-weight: 600; }
.ov-t { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.ov-l { display: flex; gap: 8px; padding: 2px 0; }
.ov-l span:first-child { color: var(--accent); }
.ov-fn { display: flex; gap: 8px; padding: 1px 0; cursor: pointer; }
.ov-fn:hover { background: var(--hover); }
.ov-fn .f { font-family: var(--mono); color: var(--code); }

/* below: console, running, problems */
.st-bottom { flex: none; display: flex; flex-direction: column; min-height: 0; }
.st-bbar { flex: none; display: flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 12px; min-width: 0; overflow: hidden; }
.st-btab { flex: none; white-space: nowrap; height: 22px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; }
.st-btab.on { background: var(--muted-bg); }
.st-lv { flex: none; white-space: nowrap; height: 20px; padding: 0 6px; border: 0; border-radius: 4px; background: var(--muted-bg); font: inherit; font-size: 12px; color: var(--fg); }
.st-lv.lv-warn { color: var(--warning); }
.st-lv.lv-error { color: var(--danger); }
.st-lv.lv-app { color: var(--muted); }
.st-lv.off { opacity: 0.4; }
.st-bfilter { width: 170px; flex: 0 1 170px; min-width: 60px; height: 22px; font-size: 12px; }
.st-blist { flex: 1; min-height: 0; overflow: auto; padding: 4px 0; }
.st-blist .cl { display: flex; gap: 10px; align-items: baseline; padding: 1px 8px; font-size: 12.5px; line-height: 20px; }
.st-blist .cl[data-open] { cursor: pointer; }
.st-blist .cl[data-open]:hover { background: var(--hover); }
.cl .ct { flex: none; width: 92px; color: var(--muted); font-size: 12px; }
.cl .cv { flex: none; width: 34px; font-weight: 600; }
.cl.lv-app .cv { font-weight: 400; color: var(--muted); }
.cl.lv-warn .cv, .cl.lv-warn .cx { color: var(--warning); }
.cl.lv-error .cv, .cl.lv-error .cx { color: var(--danger); }
.cl .cs { flex: none; width: 150px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl .cx { flex: 1; min-width: 0; font-family: var(--mono); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.cl .cn { flex: none; color: var(--muted); font-size: 12px; }
.st-ask-ai { flex: none; width: 20px; height: 18px; border: 0; border-radius: 4px; background: transparent; color: var(--accent); display: grid; place-items: center; padding: 0; }
.st-ask-ai:hover { background: var(--button-hover); }
.st-empty { padding: 8px 10px; font-size: 12px; color: var(--muted); }
.st-run { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 12.5px; }
.st-prob { display: flex; align-items: center; gap: 8px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.st-prob:hover { background: var(--hover); }
.st-prob .pl { color: var(--accent); flex: none; }
.st-prob .px { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-repl { flex: none; padding: 4px 8px 6px; }
.st-repl input { height: 22px; font-size: 12px; }

/* the right: assistant and reference */
.st-right { flex: none; display: flex; flex-direction: column; min-width: 0; }
.st-rtabs { flex: none; display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.st-rtab { height: 22px; padding: 0 6px; border: 0; border-radius: 4px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.st-rtab.on { background: var(--muted-bg); }
.st-rbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.st-actx { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.as-turns { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 12px; }
.as-intro { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.as-turn { display: flex; flex-direction: column; gap: 8px; }
.as-user { display: flex; justify-content: flex-end; }
.as-user div { max-width: 320px; padding: 4px 8px; border-radius: 6px; background: var(--chrome); white-space: pre-wrap; }
.as-reply { line-height: 1.55; }
.as-reply p { margin: 0 0 6px; }
.as-reply code { font-family: var(--mono); font-size: 12px; background: var(--muted-bg); border-radius: 3px; padding: 0 3px; }
.as-ol { margin: 0 0 6px; padding-left: 20px; }
.as-err { display: flex; gap: 8px; color: var(--danger); }
.as-all { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.as-hunk { border: 1px solid var(--c); border-radius: 6px; overflow: hidden; flex: none; }
.as-hh { display: flex; align-items: center; gap: 8px; padding: 3px 8px; background: var(--chrome); font-size: 12px; }
.as-diff { padding: 4px 0; font-family: var(--mono); font-size: 12px; line-height: 18px; }
.as-diff .df { display: flex; padding: 0 8px; white-space: pre; overflow: hidden; }
.as-diff .sg { flex: none; width: 12px; }
.as-diff .same { color: var(--muted); }
.as-diff .del { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.as-diff .del .sg { color: var(--danger); }
.as-diff .add { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.as-diff .add .sg { color: var(--ok); }
.as-verdict { display: flex; gap: 5px; align-items: center; font-size: 12px; }
.as-model { font-size: 12px; }
.as-think { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.as-foot { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-top: 1px solid var(--border); }
.st-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.st-chips .st-b { border-color: var(--input-border); }
.as-input { width: 100%; min-height: 44px; max-height: 160px; resize: vertical; border: 1px solid var(--input-border); border-radius: 5px; background: var(--bg); color: var(--fg); padding: 5px 8px; font: inherit; font-size: 13px; outline: none; }
.as-send { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.as-send span { flex: 1; }
.rf-top { flex: none; display: flex; gap: 4px; padding: 4px 8px; }
.rf-top .st-b { flex: none; }
.rf-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 8px; }
.rf-mod, .rf-e { padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.rf-mod.row { display: flex; gap: 8px; align-items: baseline; }
.rf-mod:hover, .rf-e:hover { background: var(--hover); }
.rf-e.sel { background: var(--cursor-inactive); }
.rf-m { font-family: var(--mono); color: var(--code); font-size: 13.5px; margin-right: 8px; }
.rf-m.off, .rf-s.off { color: var(--muted); }
.rf-ty { font-family: var(--mono); color: var(--warning); }
.rf-n { font-size: 12px; color: var(--muted); }
.rf-a { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-a code { font-family: var(--mono); }
.rf-s { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-sel { margin: 4px 0; padding: 8px; border: 1px solid var(--accent); border-radius: 6px; font-size: 12.5px; line-height: 1.5; }
.rf-sh { display: flex; gap: 4px; align-items: center; }
.rf-code { margin: 6px 0; padding: 6px 8px; border-radius: 4px; background: var(--chrome); font-family: var(--mono); font-size: 12px; white-space: pre-wrap; color: var(--syn-function); }
.rf-sel p { margin: 0 0 4px; }
.rf-whole { font-size: 13px; line-height: 1.55; }
.rf-whole pre { background: var(--chrome); padding: 8px; border-radius: 4px; overflow-x: auto; font-size: 12px; }
.st-status { height: 24px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-top: 1px solid var(--border); background: var(--chrome); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.st-status .st-dot { width: 6px; height: 6px; margin-right: 4px; }

/* the cards a script asks with, over the main window (script_prompt.rs: the palette's look) */
.sp-card { position: fixed; z-index: 1400; width: 560px; max-width: calc(100vw - 32px); background: var(--popover); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sp-card.flash { animation: sp-flash 0.7s ease-out; }
@keyframes sp-flash { 0% { box-shadow: 0 0 0 3px var(--accent), var(--shadow); } 100% { box-shadow: var(--shadow); } }
.sp-head { display: flex; align-items: baseline; gap: 10px; }
.sp-head b { flex: 1; font-size: 15px; font-weight: 600; }
.sp-from { font-size: 12px; color: var(--muted); }
.sp-text { white-space: pre-wrap; line-height: 1.6; word-break: break-word; }
.sp-text.mono { font-family: var(--mono); font-size: 13.5px; }
.sp-note { font-size: 12px; color: var(--muted); word-break: break-all; }
.sp-btns { display: flex; justify-content: flex-end; gap: 6px; }
.sp-btns.left { justify-content: flex-start; }
.sp-btns .btn { height: 26px; }
.sp-input { height: 28px; border: 2px solid var(--accent); border-radius: 6px; background: var(--bg); color: var(--fg); padding: 0 8px; font: inherit; font-size: 14px; outline: none; }
.sp-list { max-height: 300px; overflow-y: auto; }
.sp-item { padding: 4px 8px; border-radius: 5px; cursor: pointer; white-space: pre; }
.sp-item.mono { font-family: var(--mono); font-size: 13px; }
.sp-item.sel { background: var(--accent); color: #fff; }

/* Tag with AI (tag_ai.rs): Pick (the field, the tags with a header, what goes where) and Review (the bar, the items with their chips). */
.fwin.tagai .tai-win { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 13px; }
.ta-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ta-body > input { flex: none; height: 26px; padding: 0 8px; border: 1px solid var(--input-border, var(--border)); border-radius: 5px; background: var(--bg); color: var(--fg); font: inherit; font-size: 12px; outline: none; }
.ta-body > input:focus { border-color: var(--accent); }
.ta-list { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.ta-lhead { flex: none; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-bottom: 1px solid var(--border); background: var(--chrome); font-size: 12px; }
.ta-tri, .ta-rtri { flex: none; display: inline-flex; cursor: pointer; }
.ta-rtri { width: 16px; }
.ta-rows { flex: 1; min-height: 0; overflow-y: auto; }
.ta-tag { height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
.ta-tag:hover { background: var(--hover-bg, var(--button-hover)); }
.ta-check { width: 14px; height: 14px; flex: none; display: grid; place-items: center; border: 1px solid var(--input-border, var(--border)); border-radius: 3px; }
.ta-check.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ta-n { flex: none; font-size: 12px; }
.ta-note { flex: none; font-size: 12px; line-height: 1.45; }
.ta-foot { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid var(--border); background: var(--chrome); }
.ta-foot .btn { display: inline-flex; align-items: center; gap: 5px; }
.ta-bar { flex: none; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--chrome); font-size: 12px; }
.ta-status { font-size: 13px; }
.ta-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--border); flex: none; }
.ta-from { width: 36px; text-align: center; font-size: 13px; flex: none; }
.ta-bar .xb.off, .ta-lhead .xb.off { opacity: .45; pointer-events: none; }
.ta-prog { flex: none; height: 3px; background: var(--border); }
.ta-prog i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.ta-warn { flex: none; padding: 4px 12px; font-size: 13px; background: color-mix(in srgb, var(--danger) 12%, transparent); border-bottom: 1px solid var(--border); }
.ta-review { flex: 1; min-height: 0; overflow-y: auto; }
.ta-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.ta-rh { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ta-name { flex: none; max-width: 60%; font-size: 13px; }
.ta-folder { font-size: 12px; }
.ta-chips { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 46px; min-height: 4px; font-size: 12px; }
.ta-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ta-chip.off { opacity: .45; }
.ta-pct { opacity: .8; }
.ta-more { padding: 0 5px; line-height: 16px; font-size: 12px; cursor: pointer; }
.ta-more:hover { color: var(--fg); }