/* OwlCommander interface simulation.
   Heights and tokens mirror gpui-component/examples/dock:
   title 40 · toolbar 38 · path bar 30 · column header 26 · file row 24 · status 30. */

.app {
  --cols: 1fr 88px 132px 72px;
  --app-side-underline: #000;
  --app-shadow: 0 24px 70px rgba(16, 22, 30, 0.22), 0 2px 0 rgba(16, 22, 30, 0.05);
  min-width: 1080px;
  font: 13px/1.45 var(--app-font);
  color: var(--app-content-fg);
  background: var(--app-content-bg);
  border: 1px solid var(--app-border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  user-select: none;
}
.app[data-app-mode="dark"] { --app-side-underline: #1d4ed8; }
.app button { font: inherit; color: inherit; background: none; border: 0; cursor: default; padding: 0; }
.app svg { flex-shrink: 0; }
.app-frame { position: relative; display: flex; flex-direction: column; height: var(--app-h, 740px); background: var(--app-content-bg); }

/* ---------- title bar + workspace tabs ---------- */
.app-title { height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding-left: 6px; background: var(--app-toolbar); border-bottom: 1px solid var(--app-border); }
.app-tabs { display: flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
.app-tab {
  position: relative; height: 32px; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 11px; border-radius: 4px; min-width: 104px; max-width: 190px;
  color: var(--app-tab-idle); font-size: 12.5px; white-space: nowrap;
}
.app-tab .tab-label { overflow: hidden; text-overflow: ellipsis; }
.app-tab.is-active { background: var(--app-tab-active); color: var(--app-content-fg); box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.app-tab .tab-num { width: 15px; height: 15px; flex-shrink: 0; display: grid; place-items: center; background: var(--tint); color: #fff; font: 500 9.5px/1 var(--app-mono); font-style: normal; border-radius: 0; }
.app-tab.is-pinned { color: var(--app-content-fg); }
.app-tab.is-pinned svg { opacity: .85; }
.tab-close { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 3px; color: var(--app-muted); }
.tab-close:hover { background: var(--app-secondary-bg); }
.tab-rename { border-bottom: 1px solid var(--app-content-fg); }
.tab-rename .caret { display: inline-block; width: 1px; height: 13px; background: var(--app-content-fg); vertical-align: -2px; animation: caret 1s steps(1) infinite; }
.app-tab-add { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--app-content-fg); }
.app-tab-add:hover { background: var(--app-toolbar-hover); }
.app-title-drag { flex: 1; height: 40px; }
.app-title-actions { display: flex; align-items: center; gap: 2px; }
.title-btn { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--app-content-fg); }
.title-btn:hover { background: var(--app-toolbar-hover); }
.app-win-ctl { display: flex; align-items: stretch; margin-left: 6px; }
.app-win-ctl button { width: 42px; height: 40px; display: grid; place-items: center; font-size: 12px; color: var(--app-content-fg); }
.app-win-ctl button:hover { background: var(--app-toolbar-hover); }
.app-win-ctl .is-close:hover { background: #e81123; color: #fff; }

/* ---------- toolbar ---------- */
.app-toolbar { height: 38px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--app-toolbar); border-bottom: 1px solid var(--app-border); overflow: hidden; }
.tb { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--app-content-fg); }
.tb:hover { background: var(--app-toolbar-hover); }
.tb.is-on { background: var(--app-toolbar-hover); color: var(--app-selected); }
.tb.is-warn { color: var(--app-danger); }
.tb-sep { width: 1px; height: 20px; background: var(--app-border); margin: 0 5px; flex-shrink: 0; }
.tb-gap { flex: 1; }

/* ---------- body: dock + panes ---------- */
.app-body { flex: 1; min-height: 0; display: flex; }
.app-dock { width: 168px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--app-side-hover); border-right: 1px solid var(--app-border); }
.app-dock-tabs { height: 30px; display: flex; background: var(--app-side-track); border-bottom: 1px solid var(--app-border); }
.app-dock-tabs button { flex: 1; font-size: 12px; color: var(--app-muted); border-bottom: 2px solid transparent; }
.app-dock-tabs button.is-on { color: var(--app-content-fg); background: var(--app-side-active); border-bottom-color: var(--app-side-underline); }
.app-dock-body { flex: 1; overflow: auto; padding: 6px 6px 10px; }
.dock-group-label { font: 10px/1 var(--app-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); margin: 12px 8px 7px; }
.dock-item { width: 100%; height: 27px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 4px; font-size: 12.5px; color: var(--app-sidebar-fg); white-space: nowrap; overflow: hidden; }
.dock-item:hover { background: var(--app-side-active); }
.dock-item.is-active { background: var(--app-sidebar-sel); }
.dock-item.is-child { padding-left: 22px; font-size: 12px; color: var(--app-muted); }
/* Top-level Places/Apps rows: full-width tint + 3px leading color bar,
   edge to edge through the dock-body padding — same as the native dock. */
.dock-item.is-tinted { position: relative; border-radius: 0; margin: 0 -6px; width: calc(100% + 12px); padding: 0 8px 0 13px; background: color-mix(in srgb, var(--c) 8%, transparent); }
.dock-item.is-tinted::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.dock-item.is-tinted:hover { background: color-mix(in srgb, var(--c) 15%, transparent); }
.dock-item.is-tinted.is-active { background: color-mix(in srgb, var(--c) 24%, transparent); }
.dock-add { width: 100%; height: 27px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 4px; font-size: 12px; color: var(--app-muted); }
.dock-add:hover { background: var(--app-side-active); }
.dock-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 0; font-size: 12px; font-weight: 600; color: var(--app-content-fg); }
.dock-head-add { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; color: var(--app-muted); }
.dock-head-add:hover { background: var(--app-side-active); color: var(--app-content-fg); }
.dock-note { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-top: 1px solid var(--app-border); font-size: 10.5px; line-height: 1.4; color: var(--app-muted); }
.dock-note svg { color: var(--app-muted); }

.app-panes { flex: 1; min-width: 0; display: flex; }
.app-pane-grid { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 1px; background: var(--app-split); }
.has-3panes .app-pane-grid { grid-template-columns: 0.9fr 0.9fr 1.15fr; }
.has-tri .app-pane-grid { grid-template-columns: 1.05fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.has-tri .app-pane-grid > .app-pane:first-child { grid-row: 1 / -1; }
.app-pane { min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: 30px 26px minmax(0, 1fr); background: var(--app-list-bg); position: relative; }

/* path bar */
.app-crumb { height: 30px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--app-crumb-bar); border-bottom: 1px solid var(--app-border); color: var(--app-crumb-text); overflow: hidden; }
.crumb-seg { padding: 3px 7px; border-radius: 3px; white-space: nowrap; font-size: 12.5px; }
.crumb-seg:hover { background: var(--app-crumb-hover); }
.crumb-seg.is-last { font-weight: 500; }
.crumb-sep { color: var(--app-muted); font-size: 11px; padding: 0 1px; }
.app-crumb.is-search { padding: 3px 8px; }
.crumb-search { display: flex; align-items: center; gap: 7px; width: 100%; height: 24px; padding: 0 8px; border: 1px solid var(--app-selected); border-radius: 3px; background: var(--app-content-bg); color: var(--app-content-fg); font-size: 12px; }
.crumb-input { color: var(--app-content-fg); }

/* column header + list */
.app-cols { height: 26px; flex-shrink: 0; display: grid; grid-template-columns: var(--cols); align-items: center; padding: 0 10px; background: var(--app-list-header); border-bottom: 1px solid var(--app-border); color: var(--app-list-header-fg); font-size: 11.5px; }
.col-size, .col-time, .col-kind { text-align: left; }
.app-list { min-height: 0; overflow: hidden; background: var(--app-list-bg); }
.row { display: grid; grid-template-columns: var(--cols); align-items: center; height: 24px; padding: 0 10px; font-size: 12.5px; color: var(--app-content-fg); }
.row.is-even { background: var(--app-list-even); }
.row:hover { background: var(--app-list-hover); }
.row.is-sel { background: var(--app-list-sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-list-sel-line) 60%, transparent); }
.row.is-up { color: var(--app-muted); }
.cell-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-size, .cell-time, .cell-kind { color: var(--app-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.is-sel .cell-size, .row.is-sel .cell-time, .row.is-sel .cell-kind { color: var(--app-content-fg); opacity: .78; }
.gh-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--app-muted); flex-shrink: 0; }
.list-empty-hint { padding: 14px; font-size: 11.5px; color: var(--app-muted); }
.list-blank { height: 100%; }

/* file glyphs drawn in CSS (Windows-style silhouettes) */
.row-ico { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.ico-folder::before { content: ""; position: absolute; left: 1px; top: 2px; width: 7px; height: 3px; background: #eab34a; border-radius: 1.5px 1.5px 0 0; }
.ico-folder i { position: absolute; left: 1px; right: 1px; top: 4px; bottom: 2px; background: #efbd58; border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.ico-file i { position: absolute; left: 2px; right: 2px; top: 1px; bottom: 1px; background: #fff; border: 1px solid #c6ccd4; border-radius: 2px; }
.ico-file::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 5px; background: var(--k, #8a939e); border-radius: 1px; opacity: .9; }
.ico-file[data-kind="md"] { --k: #3f7fbf; }
.ico-file[data-kind="json"] { --k: #c9a227; }
.ico-file[data-kind="toml"] { --k: #3f8f6b; }
.ico-file[data-kind="rs"] { --k: #d0784a; }
.ico-file[data-kind="lock"] { --k: #8a939e; }
.ico-file[data-kind="png"] { --k: #8f6fc4; }
.ico-file[data-kind="css"] { --k: #3f7fbf; }
.ico-file[data-kind="sketch"] { --k: #e08a4a; }
.ico-up { width: 16px; }
.ico-up::before { content: "↑"; font-size: 13px; color: var(--app-muted); }
.app[data-app-mode="dark"] .ico-file i { background: #2b3138; border-color: #3d454e; }

/* preview rail */
.app-preview { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--app-split); background: var(--app-preview-pane); }
.preview-head { height: 30px; display: flex; align-items: center; padding: 0 12px; font: 10px/1 var(--app-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--app-muted); border-bottom: 1px solid var(--app-border); }
.preview-body { flex: 1; overflow: auto; padding: 12px; }
.prev-text { margin: 0; font: 11.5px/1.6 var(--app-mono); white-space: pre-wrap; background: var(--app-list-even); border: 1px solid var(--app-border); border-radius: 4px; padding: 11px; color: var(--app-content-fg); }
.prev-meta { margin: 12px 0 0; display: grid; gap: 7px; }
.prev-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; }
.prev-meta dt { color: var(--app-muted); }
.prev-meta dd { margin: 0; font-family: var(--app-mono); }
.prev-img-frame { border: 1px dashed var(--app-input-border); border-radius: 6px; height: 180px; display: grid; place-items: center; gap: 8px; color: var(--app-muted); font-size: 12px; }
.prev-img-frame svg { opacity: .5; }
.pdf-page { aspect-ratio: 4 / 3; border: 1px solid var(--app-border); border-radius: 3px; background: #fff; color: #1c1c1c; display: grid; place-items: center; align-content: center; gap: 6px; padding: 16px; text-align: center; }
.pdf-page b { font-size: 20px; letter-spacing: .04em; }
.pdf-page span { font-size: 12px; color: #555; }
.pdf-page em { font-style: normal; font-size: 10.5px; color: #888; }
.prev-disk { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.prev-disk .scan-donut { width: 120px; height: 120px; }
.prev-disk .scan-donut::before { inset: 15px; }
.prev-disk .scan-donut b { font-size: 15px; }
.prev-disk .scan-tree { width: 100%; }

/* ---------- status bar ---------- */
.app-status { height: 30px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: var(--app-statusbar); border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: 11.5px; overflow: hidden; }
.status-btn { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px; color: var(--app-muted); position: relative; flex-shrink: 0; }
.status-btn:hover { background: var(--app-secondary-bg); color: var(--app-content-fg); }
.status-btn .task-count { position: absolute; top: -1px; right: -2px; font: 9px/1 var(--app-mono); color: var(--app-selected); }
.status-drives { display: flex; align-items: center; gap: 16px; min-width: 0; overflow: hidden; }
.status-drive { display: flex; align-items: center; gap: 6px; position: relative; padding-bottom: 4px; white-space: nowrap; }
.drive-text { display: flex; align-items: baseline; gap: 6px; line-height: 1.15; }
.drive-text b { font: 10.5px/1.2 var(--app-mono); color: var(--app-content-fg); font-weight: 500; }
.drive-text em { font: 9.5px/1.2 var(--app-mono); font-style: normal; color: var(--app-muted); }
.drive-bar { position: absolute; left: 20px; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, var(--app-muted) 35%, transparent); border-radius: 1px; overflow: hidden; }
.drive-bar i { display: block; height: 100%; background: var(--app-content-fg); }
.status-flex { flex: 1; }
.status-stat { margin-left: auto; white-space: nowrap; }
.status-stat b { font-family: var(--app-mono); font-weight: 500; color: var(--app-content-fg); }
.status-mode { color: var(--app-selected); white-space: nowrap; }

/* ---------- overlay layer ---------- */
.app-overlay-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.app-overlay-layer > * { pointer-events: auto; }
.ov-backdrop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .53); }
.ov-backdrop.is-dark { background: rgba(0, 0, 0, .6); }
.ov-backdrop.is-soft { background: rgba(0, 0, 0, .45); align-items: flex-start; }
.panel { background: var(--app-content-bg); border: 1px solid var(--app-border); border-radius: 12px; padding: 16px; max-height: 88%; overflow: auto; box-shadow: var(--app-shadow); }
.panel-title { font-size: 13px; margin-bottom: 13px; }
.app kbd, .panel kbd { font: 11px var(--app-mono); background: var(--app-secondary-bg); border: 1px solid var(--app-border); border-radius: 3px; padding: 3px 7px; color: var(--app-content-fg); }

.help-panel { width: min(520px, 92%); border-color: #38bdf8; }
.help-grid { display: grid; gap: 7px; margin-bottom: 15px; }
.help-row { display: grid; grid-template-columns: 224px 1fr; gap: 14px; align-items: center; font-size: 12.5px; }
.help-row span { color: var(--app-muted); }

.quicklook-panel { width: min(560px, 92%); border-color: #f59e0b; }
.ql-path { font: 11px var(--app-mono); color: var(--app-muted); margin-bottom: 10px; word-break: break-all; }
.ql-body { margin: 0; font: 11.5px/1.6 var(--app-mono); white-space: pre-wrap; color: var(--app-content-fg); }

.whichkey-wrap { position: absolute; left: 0; right: 0; bottom: 44px; display: flex; justify-content: center; }
.whichkey-panel { max-width: 720px; border-color: #38bdf8; padding: 13px 15px; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--app-border); border-radius: 4px; padding: 4px 9px; font-size: 12px; color: var(--app-muted); }
.wk-chip b { font: 12px var(--app-mono); color: var(--app-selected); }

.spotter-panel { width: min(520px, 92%); margin-top: 74px; border-color: #38bdf8; }
.spotter-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--app-input-border); border-radius: 4px; padding: 8px 10px; margin: 11px 0; font-size: 12.5px; color: var(--app-content-fg); }
.spotter-input svg { color: var(--app-muted); }
.spotter-input .caret { width: 1px; height: 14px; background: var(--app-content-fg); animation: caret 1s steps(1) infinite; }
.spotter-list { display: grid; gap: 3px; max-height: 300px; overflow: auto; margin-bottom: 12px; }
.spotter-row { padding: 6px 9px; border-radius: 4px; font-size: 12.5px; }
.spotter-row.is-sel { background: var(--app-list-sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-list-sel-line) 55%, transparent); }

/* popovers (tasks / trash) */
.popover { position: absolute; right: 8px; bottom: 36px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--app-content-bg); border: 1px solid var(--app-border); box-shadow: var(--app-shadow); overflow: auto; }
.tasks-popover { width: 400px; max-height: 320px; }
.trash-popover { width: 480px; max-height: 360px; }
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.popover-head b { font-size: 13px; font-weight: 500; }
.popover-actions { display: flex; gap: 6px; }
.trash-sub { font: 11px var(--app-mono); color: var(--app-muted); border-top: 1px solid var(--app-border); padding-top: 8px; }
.trash-row { display: flex; align-items: center; gap: 8px; border: 1px solid var(--app-border); border-radius: 6px; padding: 8px 10px; }
.trash-meta { flex: 1; min-width: 0; display: grid; gap: 3px; }
.trash-meta b { font-size: 12.5px; font-weight: 500; }
.trash-meta em { font-style: normal; font-size: 10.5px; color: var(--app-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row { display: grid; gap: 7px; }
.task-top { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: baseline; }
.task-kind { font: 10px var(--app-mono); color: var(--app-muted); border: 1px solid var(--app-border); border-radius: 3px; padding: 2px 6px; }
.task-top b { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-top em { font-style: normal; font-size: 10.5px; color: var(--app-muted); font-family: var(--app-mono); }
.task-bar { height: 4px; border-radius: 2px; background: var(--app-secondary-bg); overflow: hidden; }
.task-bar i { display: block; height: 100%; background: var(--app-selected); }
.task-bar i.is-done { background: var(--app-success); }

/* menus */
.menu { position: absolute; min-width: 208px; padding: 4px; background: var(--app-menu-bg); border: 1px solid var(--app-border); border-radius: 6px; box-shadow: var(--app-shadow); color: var(--app-menu-fg); font-size: 12.5px; z-index: 30; }
.menu-item { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 4px; }
.menu-item:hover, .menu-item.is-hl { background: var(--app-menu-hover); }
.menu-item.is-hl { outline: 1px solid var(--app-selected); }
.menu-item svg { color: var(--app-muted); }
.menu-item em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--app-muted); }
.menu-item.is-sub em { font-size: 15px; }
.menu-item.is-danger { color: var(--app-danger); }
.menu-sep { height: 1px; background: var(--app-border); margin: 4px 6px; }
.ctx-menu { left: 96px; top: 224px; }
.layout-menu { left: 806px; top: 80px; }
.tab-menu { left: 222px; top: 36px; }
.palette-menu { left: 372px; top: 44px; padding: 6px; }
.palette-grid { display: flex; gap: 6px; }
.palette-col { display: flex; flex-direction: column; gap: 4px; }
.palette-cell { width: 14px; height: 14px; border-radius: 3px; background: var(--c); border: 1px solid rgba(0,0,0,.28); }
.palette-cell:hover { opacity: .82; }

/* dialogs */
.dialog { width: min(420px, 92%); background: var(--app-content-bg); border: 1px solid var(--app-border); border-radius: 12px; padding: 18px; box-shadow: var(--app-shadow); }
.dialog.is-wide { width: min(560px, 94%); }
.dialog-title { font-size: 13.5px; margin-bottom: 9px; }
.dialog p { margin: 0 0 10px; font-size: 12.5px; }
.dialog-list { margin: 0 0 14px; padding-left: 18px; font: 11.5px var(--app-mono); color: var(--app-muted); }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-btn { height: 28px; padding: 0 12px; border: 1px solid var(--app-input-border); border-radius: 3px; background: var(--app-secondary-bg); color: var(--app-content-fg); font-size: 12px; }
.app-btn:hover { border-color: var(--app-muted); }
.app-btn.is-primary { background: var(--app-primary-bg); color: var(--app-primary-fg); border-color: var(--app-primary-bg); }
.app-btn.is-danger { color: #fff; background: var(--app-danger); border-color: var(--app-danger); }
.app-btn.is-ghost { background: transparent; border-color: transparent; color: var(--app-muted); }
.app-btn.is-ghost:hover { background: var(--app-menu-hover); color: var(--app-content-fg); }
.app-btn.is-ghost.is-danger { color: var(--app-danger); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.chip { border: 1px solid var(--app-border); border-radius: 4px; padding: 5px 9px; font-size: 11.5px; color: var(--app-muted); }
.chip.is-on { border-color: var(--app-selected); color: var(--app-selected); }
.preview-table { border: 1px solid var(--app-border); border-radius: 4px; max-height: 240px; overflow: auto; margin-bottom: 14px; }
.pt-head, .pt-row { display: grid; grid-template-columns: 240px 1fr; gap: 10px; padding: 6px 10px; font: 11.5px var(--app-mono); }
.pt-head { background: var(--app-secondary-bg); color: var(--app-content-fg); }
.pt-row { border-top: 1px solid var(--app-border); color: var(--app-muted); }
.pt-row span:last-child { color: var(--app-content-fg); }
.bulk-input { min-height: 92px; border: 1px solid #38bdf8; border-radius: 3px; padding: 10px; font: 12px/1.7 var(--app-mono); white-space: pre-wrap; margin-bottom: 14px; }
.bulk-input .caret { display: inline-block; width: 1px; height: 13px; background: var(--app-content-fg); animation: caret 1s steps(1) infinite; }

/* ---------- floating windows ---------- */
.float-win { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: flex; flex-direction: column; background: var(--app-content-bg); border: 1px solid var(--app-border); border-radius: 6px; box-shadow: var(--app-shadow); overflow: hidden; }
.settings-win { width: min(900px, 94%); height: min(600px, 88%); }
.remote-win { width: min(780px, 94%); height: min(640px, 90%); }
.scan-win { width: min(820px, 94%); height: min(560px, 88%); }
.float-title { height: 36px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; background: var(--app-titlebar); border-bottom: 1px solid var(--app-border); }
.float-title > span:first-child { font-size: 12.5px; }
.float-sub { flex: 1; font-size: 11px; color: var(--app-muted); }
.float-close { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 4px; color: var(--app-muted); }
.float-close:hover { background: var(--app-toolbar-hover); color: var(--app-content-fg); }

.settings-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 160px 1fr; }
.settings-nav { padding: 16px 8px; border-right: 1px solid var(--app-border); background: var(--app-side-hover); display: flex; flex-direction: column; gap: 2px; }
.set-nav-btn { height: 32px; padding: 0 12px; border-radius: 4px; text-align: left; font-size: 12.5px; color: var(--app-muted); }
.set-nav-btn:hover { background: var(--app-side-active); color: var(--app-content-fg); }
.set-nav-btn.is-on { background: var(--app-sidebar-sel); color: var(--app-content-fg); }
.settings-content { padding: 18px 24px 24px; overflow: auto; }
.settings-content h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; }
.settings-content h4.set-sub { margin-top: 22px; }
.set-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-note { margin: 0 0 16px; font-size: 11.5px; color: var(--app-muted); line-height: 1.7; }
.set-note code { font: 11px var(--app-mono); background: var(--app-secondary-bg); padding: 1px 5px; border-radius: 3px; }
.set-field { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--app-border); }
.set-field > label { width: 120px; flex-shrink: 0; font-size: 12.5px; }
.link-btn { color: var(--app-selected); font-size: 12px; }
.link-btn:hover { text-decoration: underline; }
.stepper { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.stepper button { width: 24px; height: 24px; border: 1px solid var(--app-border); border-radius: 4px; display: grid; place-items: center; }
.stepper span { font-family: var(--app-mono); }
.stepper em { font-style: normal; font-size: 11px; color: var(--app-muted); }
.switch { width: 34px; height: 18px; border-radius: 9px; background: var(--app-secondary-bg); border: 1px solid var(--app-border); position: relative; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--app-muted); transition: left .15s; }
.switch.is-on { background: var(--app-success); border-color: var(--app-success); }
.switch.is-on::after { left: 18px; background: #fff; }
.switch.is-mini { width: 28px; height: 15px; }
.switch.is-mini::after { width: 10px; height: 10px; }
.switch.is-mini.is-on::after { left: 15px; }
.select { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 180px; height: 28px; padding: 0 10px; border: 1px solid var(--app-input-border); border-radius: 3px; background: var(--app-content-bg); font-size: 12px; }
.select i { font-style: normal; color: var(--app-muted); }
.select.is-disabled { opacity: .45; }
.check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--app-muted); }
.check i { width: 13px; height: 13px; border: 1px solid var(--app-border); border-radius: 3px; }
.theme-list { border: 1px solid var(--app-border); border-radius: 4px; overflow: hidden; }
.theme-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; font-size: 12.5px; }
.theme-item + .theme-item { border-top: 1px solid var(--app-border); }
.theme-item.is-on { background: var(--app-list-sel); }
.set-inline { display: flex; gap: 22px; margin-top: 14px; }
.seg { display: flex; }
.seg button { height: 28px; padding: 0 14px; border: 1px solid var(--app-input-border); font-size: 12px; }
.seg button + button { border-left: 0; }
.seg button.is-on { background: var(--app-selected); border-color: var(--app-selected); color: #fff; }
.dep-list { display: grid; gap: 10px; }
.dep { display: grid; grid-template-columns: 10px 260px 1fr; gap: 10px; align-items: center; font-size: 12px; }
.dep i { width: 9px; height: 9px; border-radius: 50%; }
.dep-ok { background: var(--app-success); }
.dep-warn { background: var(--app-warning); }
.dep em { font-style: normal; color: var(--app-muted); }
.menu-table { border: 1px solid var(--app-border); border-radius: 4px; overflow: hidden; font-size: 12px; }
.mt-head, .mt-row { display: grid; grid-template-columns: 70px 150px 110px 1fr 110px; gap: 12px; align-items: center; padding: 8px 12px; }
.mt-head { background: var(--app-secondary-bg); color: var(--app-muted); font-size: 11px; }
.mt-row + .mt-row { border-top: 1px solid var(--app-border); }
.mt-cat { color: var(--app-selected); font-size: 11.5px; }
.mt-name { display: flex; align-items: center; gap: 8px; }
.mt-name svg { color: var(--app-muted); }
.mt-scope, .mt-desc { color: var(--app-muted); }
.mt-ops { display: flex; align-items: center; gap: 10px; color: var(--app-muted); }
.mt-ops i { font-style: normal; }
.mt-divider { color: var(--app-border); }
.keymap-list { display: grid; gap: 0; }
.km-row { display: grid; grid-template-columns: 200px 24px 1fr 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--app-border); font-size: 12.5px; }
.km-row kbd { justify-self: start; }
.km-arrow { color: var(--app-muted); }
.km-row em { font-style: normal; font-family: var(--app-mono); font-size: 11px; color: var(--app-muted); }
.about-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.about-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--app-border); border-radius: 8px; color: var(--app-content-fg); }
.about-head h4 { margin: 0; font-size: 15px; }
.about-head p { margin: 3px 0 0; font-size: 11.5px; color: var(--app-muted); }
.dep-table { border: 1px solid var(--app-border); border-radius: 4px; overflow: hidden; margin-bottom: 14px; }
.dt-head, .dt-row { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 12px; padding: 8px 12px; font-size: 12px; }
.dt-head { background: var(--app-secondary-bg); color: var(--app-muted); font-size: 11px; }
.dt-row + .dt-row { border-top: 1px solid var(--app-border); }
.dt-row .mono { font-family: var(--app-mono); font-size: 11.5px; color: var(--app-muted); }

/* remote window */
.remote-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px; gap: 10px; overflow: auto; }
.remote-form { display: grid; grid-template-columns: 44px 1fr 44px 90px; gap: 8px 10px; align-items: center; font-size: 12.5px; }
.remote-form label { color: var(--app-muted); }
.remote-form input { height: 28px; border: 1px solid var(--app-input-border); border-radius: 3px; background: var(--app-content-bg); color: var(--app-content-fg); padding: 0 9px; font: 12px var(--app-mono); min-width: 0; }
.remote-form .w-lg { min-width: 180px; }
.remote-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-block: 1px solid var(--app-border); }
.remote-batch { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.remote-batch label { color: var(--app-muted); }
.remote-batch input { flex: 1; height: 28px; border: 1px solid var(--app-input-border); border-radius: 3px; background: var(--app-content-bg); color: var(--app-content-fg); padding: 0 9px; font: 12px var(--app-mono); }
.remote-body-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 130px 1fr; border: 1px solid var(--app-border); border-radius: 4px; overflow: hidden; }
.remote-bookmarks { border-right: 1px solid var(--app-border); background: var(--app-side-hover); }
.rs-label { padding: 8px 10px; font: 10px var(--app-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--app-muted); }
.remote-list { display: flex; flex-direction: column; min-width: 0; }
.remote-footer { font-size: 11.5px; color: var(--app-muted); }

/* scan window */
.scan-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 240px; gap: 20px; padding: 20px; }
.scan-tree { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.scan-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; font-size: 12.5px; position: relative; padding-left: 0; }
.scan-row .scan-bar { position: absolute; left: 0; top: 1px; bottom: 1px; width: var(--w); background: color-mix(in srgb, var(--app-selected) 16%, transparent); border-radius: 3px; z-index: -1; }
.scan-row b { font-weight: 500; }
.scan-row em { font-style: normal; font-family: var(--app-mono); font-size: 11px; color: var(--app-muted); }
.scan-row.is-l1 { font-size: 14px; padding: 7px 8px; }
.scan-row.is-l2 { padding: 5px 8px 5px 22px; }
.scan-row.is-l3 { padding: 5px 8px 5px 40px; color: var(--app-muted); }
.scan-side { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.scan-donut { width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(var(--app-selected) 0 var(--p), var(--app-secondary-bg) var(--p) 100%); display: grid; place-items: center; align-content: center; position: relative; }
.scan-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--app-content-bg); }
.scan-donut b { position: relative; font: 18px var(--app-mono); }
.scan-donut em { position: relative; font-style: normal; font-size: 10.5px; color: var(--app-muted); }
.scan-legend { display: grid; gap: 9px; font-size: 11.5px; color: var(--app-muted); width: 100%; }
.scan-legend span { display: flex; align-items: center; gap: 8px; }
.scan-legend i { width: 9px; height: 9px; border-radius: 2px; }

/* chooser banner */
.chooser-banner { position: absolute; left: 0; right: 0; top: 78px; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #fef3c7; border-bottom: 1px solid #f59e0b; color: #92400e; font-size: 12px; }

@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Scene mounts scroll horizontally below the native 1080px design width. */
[data-scene], [data-stage-app] { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { animation: none !important; transition: none !important; }
}