/* 40-bank-builder.css — the question-bank sheet builder on /generate (roadmap Plan 3).
 *
 * Three panes side by side, each scrolling on its own: ① subject + topic tree, ② filters +
 * questions, ③ question preview + the sheet. The pane grid fills the window down to its bottom
 * edge (bank.js measures it into --bank-panes-h; from 1024 px the title and the mode switch no
 * longer take a row above it), so the filter bar, the tree and Generate never scroll out of
 * reach; the site's feedback button floats over the sheet's footer, which steps aside for it.
 *
 * Page-scoped plain CSS (linked from index.html), so no Tailwind rebuild. Colours stay plain
 * rgba so scripts/build_light_theme.py writes the light block at the end of this file.
 *
 *   ≥1280 px   20rem | the rest, at least 26rem | 44% up to 56rem, at least 26rem (the preview is sized first)
 *   1024-1279  subject row over the list, preview + sheet on the right, topic tree a drawer
 *   <1024      one column; the preview and the sheet become sheets over the page
 *
 * After a build (`.preview-mode[data-job="bank"]`) only the sheet stays, as the navigator
 * for the built PDF in the left column. */

.bank-builder [hidden] { display: none !important; }

/* ── Mode switch and compact head ───────────────────────────────────────────────── */
.gen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.25rem; }
.gen-head-text { min-width: 0; }
.gen-head-title { font-size: 1.3rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: #fff; }
.gen-mode { display: inline-flex; gap: 0.15rem; padding: 0.2rem; border-radius: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(2, 6, 23, 0.55); }
.gen-mode-btn { min-height: 2.25rem; padding: 0 0.9rem; border: 0; border-radius: 0.6rem; background: transparent; color: rgb(148, 163, 184); font-size: 0.8rem; font-weight: 500; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.gen-mode-btn:hover { color: rgb(226, 232, 240); }
.gen-mode-btn[aria-pressed="true"] { background: rgba(34, 211, 238, 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.35); }
.gen-mode-btn:focus-visible { outline: 2px solid rgb(34, 211, 238); outline-offset: 2px; }

#generate-workspace[data-mode="describe"] .gen-head-text { display: none; }
/* From 1024 px the builder's title is in the header (07-header-preview-chrome.css) and its mode
   switch is in the subject pane (.bank-mode), so the row that carried both is gone — kept for a
   screen reader as the page's h1, never drawn. Below 1024 px it stays exactly as it was. */
@media (min-width: 1024px) {
  #generate-workspace[data-mode="pick"]:not(.preview-mode) .gen-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #generate-workspace[data-mode="pick"]:not(.preview-mode) .gen-head .gen-mode { display: none; }
  #generate-workspace[data-mode="pick"]:not(.preview-mode) .form-result-row { margin-top: 0 !important; }
}
.bank-mode { display: none; }
@media (min-width: 1024px) {
  .bank-mode { display: grid; grid-template-columns: 1fr 1fr; margin: 0.5rem 0.5rem 0; }
  .bank-mode .gen-mode-btn { min-width: 0; padding: 0 0.5rem; overflow: hidden; text-overflow: ellipsis; }
}
#generate-workspace[data-mode="describe"]:not(.preview-mode) .gen-head { justify-content: center; margin-top: 1.75rem; }
#generate-workspace.preview-mode .gen-head { display: none; }

/* What each mode shows. The hero must stay #gen-left-col's first child (06-landing.css). */
#generate-workspace[data-mode="pick"]:not(.preview-mode) #gen-left-col > .hero-collapse,
#generate-workspace[data-mode="pick"]:not(.preview-mode) #gen-describe { display: none; }
#generate-workspace[data-mode="describe"]:not(.preview-mode) #bank-panel,
#generate-workspace.preview-mode:not([data-job="bank"]) #bank-panel { display: none; }
#generate-workspace.preview-mode[data-job="bank"] #gen-describe,
#generate-workspace.preview-mode[data-job="bank"] #overview-panel { display: none !important; }

/* Pick mode takes the whole window, with the 1rem side gutter the pinned wordmark and account
   corner sit at (07-header-preview-chrome.css, 13-account.css), so the panes line up with the
   header's edges. A 100rem cap left 179px empty on each side of a 1920px window (2026-09-15). */
#site-main:has(#generate-workspace[data-mode="pick"]:not(.preview-mode)) { max-width: none; padding-top: 0.75rem; padding-right: 1rem; padding-bottom: 1.25rem; padding-left: 1rem; }
#generate-workspace[data-mode="pick"]:not(.preview-mode) { max-width: none; }
#generate-workspace[data-mode="pick"]:not(.preview-mode) .gen-left-col { max-width: none; }
#generate-workspace[data-mode="pick"]:not(.preview-mode) .form-result-row { margin-top: 0.75rem; }
.gen-describe { margin-top: 0.25rem; }

/* ── The pane grid ───────────────────────────────────────────────────────────────── */
.bank-builder { --bank-accent: var(--accent-rgb, 56, 189, 248); position: relative; }
.bank-panes {
  display: grid;
  /* The preview column grows first, to 44% of the row, so a question is drawn at about its printed
     size (1 pt to 1 px from about 1440 px wide). It stops at 56rem, where a page already draws
     larger than a PDF viewer's 100%; the list keeps at least 26rem and takes the rest. */
  grid-template-columns: 20rem minmax(26rem, 1fr) minmax(26rem, min(44%, 56rem));
  grid-template-areas: "nav list side";
  gap: 0.75rem;
  height: var(--bank-panes-h, calc(100dvh - 10.5rem));
  min-height: 34rem;
}
.bank-pane { min-width: 0; min-height: 0; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(8, 14, 30, 0.55); }
.bank-pane--nav { grid-area: nav; display: flex; flex-direction: column; }
.bank-pane--list { grid-area: list; position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.22) transparent; }
.bank-pane--side { grid-area: side; display: flex; flex-direction: column; gap: 0.75rem; border: 0; background: transparent; }
.bank-tree, .bank-preview-body, .bank-dock-list, .bank-subject-list { scrollbar-width: thin; scrollbar-color: rgba(56, 189, 248, 0.22) transparent; }

/* ── ① Subject switcher ─────────────────────────────────────────────────────────── */
.bank-subject { position: relative; padding: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bank-subject-btn { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 3.1rem; padding: 0.4rem 0.55rem; border-radius: 0.75rem; border: 1px solid rgba(var(--bank-accent), 0.3); background: linear-gradient(135deg, rgba(var(--bank-accent), 0.15) 0%, rgba(var(--bank-accent), 0.04) 70%); color: rgb(226, 232, 240); text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.bank-subject-btn:hover { border-color: rgba(var(--bank-accent), 0.55); box-shadow: 0 8px 24px -14px rgba(var(--bank-accent), 0.9); }
.bank-subject-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 0.55rem; background: rgba(var(--bank-accent), 0.18); color: rgb(var(--bank-accent)); }
.bank-subject-icon:empty::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: currentColor; opacity: 0.7; }
.bank-subject-icon svg { width: 1.1rem; height: 1.1rem; }
.bank-subject-text { flex: 1; min-width: 0; display: grid; gap: 0.05rem; }
.bank-subject-name { overflow-wrap: anywhere; font-size: 0.86rem; font-weight: 600; line-height: 1.25; color: #fff; }
.bank-subject-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; color: rgb(148, 163, 184); font-variant-numeric: tabular-nums; }
.bank-subject-meta:empty { display: none; }
.bank-subject-caret { flex: none; width: 1rem; height: 1rem; color: rgb(148, 163, 184); transition: transform 0.15s ease; }
.bank-subject-btn[aria-expanded="true"] .bank-subject-caret { transform: rotate(180deg); }
.bank-subject-pop { position: absolute; z-index: 78; top: calc(100% - 0.2rem); left: 0.5rem; width: min(23rem, calc(100vw - 2rem)); max-height: min(30rem, 72vh); display: flex; flex-direction: column; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgb(9, 14, 30); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6); overflow: hidden; }
.bank-subject-filter { margin: 0.5rem 0.5rem 0.25rem; min-height: 2.25rem; padding: 0.35rem 0.65rem; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(2, 6, 23, 0.7); color: rgb(226, 232, 240); font-size: 0.82rem; }
.bank-subject-filter::placeholder { color: rgb(100, 116, 139); }
.bank-subject-filter:focus { outline: none; border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15); }
.bank-subject-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.25rem 0.35rem 0.45rem; }
.bank-subject-group { padding: 0.55rem 0.5rem 0.2rem; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(100, 116, 139); }
.bank-subject-opt { display: flex; align-items: center; gap: 0.55rem; min-height: 2.3rem; padding: 0.3rem 0.5rem; border-radius: 0.55rem; color: rgb(203, 213, 225); font-size: 0.8rem; cursor: pointer; }
.bank-subject-opt svg { flex: none; width: 1rem; height: 1rem; color: rgb(var(--accent-rgb, 148, 163, 184)); }
.bank-subject-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-subject-opt-meta { flex: none; font-size: 0.66rem; color: rgb(100, 116, 139); font-variant-numeric: tabular-nums; }
.bank-subject-opt-sheet { flex: none; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: rgb(34, 211, 238); box-shadow: 0 0 8px rgba(34, 211, 238, 0.7); }
.bank-subject-opt.is-active { background: rgba(255, 255, 255, 0.07); color: #fff; }
.bank-subject-opt[aria-selected="true"] { background: rgba(var(--accent-rgb, 56, 189, 248), 0.16); color: #fff; }
.bank-subject-none { padding: 0.75rem; font-size: 0.78rem; color: rgb(148, 163, 184); }

/* ── ① Topic tree ───────────────────────────────────────────────────────────────── */
.bank-nav-sheet { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bank-nav-head { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.5rem 0.2rem 0.85rem; }
.bank-nav-title { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(148, 163, 184); }
.bank-nav-clear { margin-left: auto; min-height: 2rem; padding: 0 0.45rem; border: 0; border-radius: 0.45rem; background: none; color: rgb(125, 211, 252); font-size: 0.74rem; }
.bank-nav-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.bank-nav-head .bank-nav-close { display: none; margin-left: auto; }
.bank-nav-clear:not([hidden]) + .bank-nav-close { margin-left: 0; }
.bank-tree { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0.4rem 0.6rem; }
/* Topic titles are never cut: a long one wraps onto more lines (user request, 2026-09-15). The rest of
   the row lines up with the title's FIRST line. --tree-slot is the height of a one-line row, so a
   one-line row looks exactly as before and a longer title only grows downwards. */
.bank-trow { --tree-slot: 2.05rem; --tree-line: 1rem; --tree-check: 1.9rem; --tree-exp: 1.75rem; display: flex; align-items: flex-start; gap: 0.1rem; min-height: 2.15rem; border-radius: 0.55rem; border: 1px solid transparent; transition: background-color 0.12s ease, border-color 0.12s ease; }
.bank-trow:hover { background: rgba(255, 255, 255, 0.04); }
.bank-trow.is-on { border-color: rgba(var(--bank-accent), 0.3); background: linear-gradient(135deg, rgba(var(--bank-accent), 0.16) 0%, rgba(var(--bank-accent), 0.04) 70%); }
.bank-trow--all { margin-bottom: 0.2rem; }
.bank-tcheck { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tree-check); height: var(--tree-check); margin-top: max(0rem, (var(--tree-slot) - var(--tree-check)) / 2); padding: 0; border: 0; border-radius: 0.45rem; background: none; }
.bank-tbox { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 0.3rem; border: 1.5px solid rgba(148, 163, 184, 0.5); color: rgb(var(--bank-accent)); transition: background-color 0.12s ease, border-color 0.12s ease; }
.bank-tbox svg { width: 0.75rem; height: 0.75rem; }
.bank-tbox .bank-tick, .bank-tbox .bank-dash { opacity: 0; }
.bank-tcheck[aria-checked="true"] .bank-tbox, .bank-tcheck[aria-checked="mixed"] .bank-tbox { border-color: rgba(var(--bank-accent), 0.85); background: rgba(var(--bank-accent), 0.22); }
.bank-tcheck[aria-checked="true"] .bank-tbox .bank-tick, .bank-tcheck[aria-checked="mixed"] .bank-tbox .bank-dash { opacity: 1; }
.bank-tlabel { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.4rem; min-height: var(--tree-slot); padding: max(0rem, (var(--tree-slot) - var(--tree-line)) / 2) 0.35rem max(0rem, (var(--tree-slot) - var(--tree-line)) / 2) 0.15rem; border: 0; border-radius: 0.45rem; background: none; color: rgb(203, 213, 225); font-size: 0.8rem; line-height: 1.3; text-align: left; }
.bank-trow.is-on .bank-tlabel { color: #fff; }
.bank-tnum { flex: none; min-width: 1.35rem; color: rgb(100, 116, 139); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.bank-ttitle { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.bank-tcount { flex: none; padding: 0 0.38rem; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: rgba(148, 163, 184, 0.9); font-size: 0.66rem; font-variant-numeric: tabular-nums; }
.bank-trow.is-on .bank-tcount { background: rgba(var(--bank-accent), 0.22); color: #fff; }
.bank-trow.is-zero .bank-tlabel, .bank-trow.is-zero .bank-tcheck { opacity: 0.42; }
.bank-texp { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tree-exp); height: var(--tree-exp); margin-top: max(0rem, (var(--tree-slot) - var(--tree-exp)) / 2); padding: 0; border: 0; border-radius: 0.45rem; background: none; color: rgb(100, 116, 139); }
.bank-texp:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.bank-texp svg { width: 0.9rem; height: 0.9rem; transition: transform 0.15s ease; }
.bank-texp[aria-expanded="true"] svg { transform: rotate(90deg); }
.bank-texp-gap { flex: none; width: var(--tree-exp); }
.bank-tsubs { margin: 0.05rem 0 0.3rem 1.2rem; padding-left: 0.3rem; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.bank-tsubs .bank-trow { --tree-slot: 1.85rem; --tree-line: 0.95rem; min-height: 1.95rem; }
.bank-tsubs .bank-tlabel { font-size: 0.76rem; color: rgb(148, 163, 184); }
.bank-tsubs .bank-tnum { min-width: 2rem; }
.bank-tcheck:focus-visible, .bank-tlabel:focus-visible, .bank-texp:focus-visible, .bank-subject-btn:focus-visible, .bank-nav-clear:focus-visible { outline: 2px solid rgb(34, 211, 238); outline-offset: -2px; }
.bank-nav-empty { padding: 1rem 0.85rem; font-size: 0.78rem; line-height: 1.5; color: rgb(100, 116, 139); }

#generate-workspace[data-mode="describe"] .gen-head:not(:has(.gen-mode)) { display: none; }

/* ── ② Before a subject is chosen ───────────────────────────────────────────────── */
.bank-start { padding: 1.4rem 1.5rem 2rem; }
.bank-start-title { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.bank-start-sub { margin-top: 0.35rem; max-width: 46rem; font-size: 0.84rem; line-height: 1.55; color: rgb(148, 163, 184); }
.bank-start-level { margin-top: 1.3rem; }
.bank-start-level-label { margin-bottom: 0.45rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(100, 116, 139); }
.bank-start-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.5rem; }
.bank-chip { display: flex; align-items: center; gap: 0.6rem; min-height: 3.25rem; padding: 0.5rem 0.7rem; border-radius: 0.8rem; border: 1px solid rgba(var(--accent-rgb, 148, 163, 184), 0.22); background: linear-gradient(135deg, rgba(var(--accent-rgb, 148, 163, 184), 0.1) 0%, rgba(var(--accent-rgb, 148, 163, 184), 0.02) 70%); color: rgb(226, 232, 240); text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.bank-chip svg { flex: none; width: 1.35rem; height: 1.35rem; color: rgb(var(--accent-rgb, 148, 163, 184)); }
.bank-chip-name { flex: 1; min-width: 0; font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.bank-chip-meta { flex: none; font-size: 0.68rem; color: rgb(100, 116, 139); font-variant-numeric: tabular-nums; }
.bank-chip:hover { border-color: rgba(var(--accent-rgb, 148, 163, 184), 0.5); box-shadow: 0 8px 24px -14px rgba(var(--accent-rgb, 148, 163, 184), 0.9); }
.bank-chip:focus-visible { outline: 2px solid rgb(34, 211, 238); outline-offset: 2px; }

/* ── ② Toolbar ──────────────────────────────────────────────────────────────────── */
.bank-pane--list { container-type: inline-size; }
.bank-browse { display: flex; flex-direction: column; min-height: 100%; }
.bank-toolbar { position: sticky; top: 0; z-index: 20; display: grid; gap: 0.45rem; padding: 0.6rem 0.75rem 0.55rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 1rem 1rem 0 0; background: rgba(9, 14, 29, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bank-toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; }
.bank-tool { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0 0.7rem; border-radius: 0.65rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); color: rgb(203, 213, 225); font-size: 0.78rem; white-space: nowrap; }
.bank-tool svg { width: 0.95rem; height: 0.95rem; color: rgb(148, 163, 184); }
.bank-tool:hover, .bank-tool[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.bank-tool-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 999px; background: rgba(34, 211, 238, 0.2); color: rgb(165, 243, 252); font-size: 0.66rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bank-topics-btn { display: none; }
.bank-search { flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: 0.45rem; min-height: 2.25rem; padding: 0 0.65rem; border-radius: 0.65rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(2, 6, 23, 0.6); }
.bank-search svg { flex: none; width: 0.95rem; height: 0.95rem; color: rgb(100, 116, 139); }
.bank-search:focus-within { border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.15); }
.bank-search-input { flex: 1; min-width: 0; height: 2.1rem; border: 0; background: transparent; color: rgb(226, 232, 240); font-size: 0.82rem; outline: none; }
.bank-search-input::placeholder { color: rgb(100, 116, 139); }
.bank-seg { display: inline-flex; gap: 0.1rem; padding: 0.15rem; border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(2, 6, 23, 0.45); }
.bank-seg-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.95rem; padding: 0 0.6rem; border: 0; border-radius: 0.5rem; background: transparent; color: rgb(148, 163, 184); font-size: 0.76rem; white-space: nowrap; }
.bank-seg-btn:hover { color: rgb(226, 232, 240); }
.bank-seg-btn[aria-checked="true"] { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.bank-seg-btn:disabled { opacity: 0.4; cursor: default; }
.bank-seg-count { font-size: 0.66rem; color: rgb(100, 116, 139); font-variant-numeric: tabular-nums; }
.bank-filters { position: relative; }
.bank-active { flex: 1 1 8rem; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bank-active:empty { display: none; }   /* else its 8rem basis pushes Sort onto a row of its own in a narrow list */
.bank-chipf { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 1.8rem; padding: 0 0.2rem 0 0.55rem; border-radius: 999px; border: 1px solid rgba(34, 211, 238, 0.3); background: rgba(34, 211, 238, 0.08); color: rgb(207, 250, 254); font-size: 0.72rem; white-space: nowrap; }
.bank-chipf svg { width: 0.72rem; height: 0.72rem; color: rgb(148, 163, 184); }
.bank-chipf:hover { border-color: rgba(34, 211, 238, 0.6); }
.bank-chipf:hover svg { color: #fff; }
.bank-sort { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; font-size: 0.72rem; color: rgb(100, 116, 139); }
.bank-select { min-height: 2.1rem; padding: 0 0.5rem; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.1); background-color: rgb(8, 13, 28); color: rgb(226, 232, 240); font-size: 0.76rem; }
.bank-tool:focus-visible, .bank-seg-btn:focus-visible, .bank-chipf:focus-visible, .bank-select:focus-visible, .bank-toggle:focus-visible, .bank-link-btn:focus-visible, .bank-fpop-done:focus-visible { outline: 2px solid rgb(34, 211, 238); outline-offset: 1px; }

/* The filter popover (a bottom sheet on phones, below). */
.bank-filter-pop { position: absolute; z-index: 30; top: calc(100% + 0.4rem); left: 0; width: min(24rem, calc(100vw - 2rem)); max-height: min(36rem, 70vh); overflow-y: auto; display: grid; gap: 0.9rem; padding: 0.85rem 0.9rem 0.7rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgb(9, 14, 30); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6); }
.bank-fgroup { display: grid; gap: 0.4rem; }
.bank-flabel { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(148, 163, 184); }
.bank-marks-out { margin-left: auto; font-size: 0.74rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgb(226, 232, 240); font-variant-numeric: tabular-nums; }
.bank-toggles { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bank-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.1rem; padding: 0 0.6rem; border-radius: 0.55rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); color: rgb(203, 213, 225); font-size: 0.74rem; }
.bank-toggle:hover { border-color: rgba(255, 255, 255, 0.2); }
.bank-toggle[aria-pressed="true"] { border-color: rgba(34, 211, 238, 0.55); background: rgba(34, 211, 238, 0.12); color: #fff; }
.bank-toggle:disabled { opacity: 0.4; cursor: default; }
.bank-fnote { font-size: 0.7rem; line-height: 1.45; color: rgb(100, 116, 139); }
.bank-range { position: relative; height: 1.75rem; --lo: 0; --hi: 1; }
.bank-range::before { content: ""; position: absolute; left: 0.55rem; right: 0.55rem; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.bank-range-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 999px; background: rgb(34, 211, 238); left: calc(0.55rem + (100% - 1.1rem) * var(--lo)); right: calc(0.55rem + (100% - 1.1rem) * (1 - var(--hi))); }
.bank-range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.bank-range input[type="range"]::-webkit-slider-runnable-track { height: 1.75rem; background: transparent; }
.bank-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 1.1rem; height: 1.1rem; margin-top: 0.325rem; border-radius: 999px; border: 2px solid rgb(34, 211, 238); background: rgb(9, 14, 30); cursor: pointer; }
.bank-range input[type="range"]::-moz-range-track { background: transparent; }
.bank-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 0.8rem; height: 0.8rem; border-radius: 999px; border: 2px solid rgb(34, 211, 238); background: rgb(9, 14, 30); cursor: pointer; }
.bank-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.4); }
.bank-range input[type="range"]:disabled { opacity: 0.4; }
.bank-years { display: flex; align-items: center; gap: 0.4rem; color: rgb(100, 116, 139); }
.bank-years .bank-select { flex: 1; }
.bank-switch { display: flex; align-items: center; gap: 0.55rem; min-height: 2.1rem; font-size: 0.78rem; color: rgb(203, 213, 225); cursor: pointer; }
.bank-switch input { flex: none; width: 1rem; height: 1rem; accent-color: rgb(34, 211, 238); }
.bank-fpop-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.55rem; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.bank-link-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; padding: 0 0.45rem; border: 0; border-radius: 0.45rem; background: none; color: rgb(148, 163, 184); font-size: 0.76rem; white-space: nowrap; }
.bank-link-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.bank-link-btn svg { width: 0.9rem; height: 0.9rem; }
.bank-fpop-done { min-height: 2.1rem; padding: 0 0.95rem; border-radius: 0.6rem; border: 1px solid rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.14); color: #fff; font-size: 0.78rem; font-weight: 600; }

/* Difficulty dots: level n fills n of five, green to red. */
.bank-dots { display: inline-flex; gap: 2px; --lvl: 148, 163, 184; }
.bank-dots i { width: 5px; height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.22); }
.bank-dots[data-level="1"] { --lvl: 52, 211, 153; }
.bank-dots[data-level="2"] { --lvl: 163, 230, 53; }
.bank-dots[data-level="3"] { --lvl: 250, 204, 21; }
.bank-dots[data-level="4"] { --lvl: 251, 146, 60; }
.bank-dots[data-level="5"] { --lvl: 244, 63, 94; }
.bank-dots[data-level="1"] i:nth-child(-n+1), .bank-dots[data-level="2"] i:nth-child(-n+2),
.bank-dots[data-level="3"] i:nth-child(-n+3), .bank-dots[data-level="4"] i:nth-child(-n+4),
.bank-dots[data-level="5"] i { background: rgb(var(--lvl)); }

/* ── ② The question list ────────────────────────────────────────────────────────── */
.bank-list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; padding: 0.55rem 0.9rem 0.3rem; }
.bank-count { font-size: 0.74rem; color: rgb(148, 163, 184); font-variant-numeric: tabular-nums; }
.bank-search-hint { font-size: 0.7rem; color: rgb(252, 211, 77); }
.bank-add-all { margin-left: auto; min-height: 2rem; padding: 0 0.65rem; border-radius: 0.55rem; border: 1px dashed rgba(34, 211, 238, 0.4); background: transparent; color: rgb(165, 243, 252); font-size: 0.74rem; }
.bank-add-all:hover:not(:disabled) { border-style: solid; background: rgba(34, 211, 238, 0.08); }
.bank-add-all:disabled { opacity: 0.45; cursor: not-allowed; }
.bank-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 0 0.45rem 0.8rem; }
.bank-row { scroll-margin-top: 6.75rem; }
.bank-row { position: relative; display: flex; align-items: stretch; gap: 0.1rem; border-radius: 0.6rem; border: 1px solid transparent; }
.bank-row:hover { background: rgba(255, 255, 255, 0.035); }
.bank-row.is-picked { background: rgba(34, 211, 238, 0.055); }
.bank-row.is-current { border-color: rgba(var(--bank-accent), 0.55); background: rgba(var(--bank-accent), 0.09); }
.bank-add { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 0.2rem; padding: 0; border-radius: 0.55rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: rgb(148, 163, 184); transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.bank-add svg { width: 0.95rem; height: 0.95rem; }
.bank-add:hover { border-color: rgba(34, 211, 238, 0.55); color: rgb(165, 243, 252); }
.bank-add[aria-pressed="true"] { border-color: rgba(34, 211, 238, 0.7); background: rgba(34, 211, 238, 0.18); color: rgb(103, 232, 249); }
.bank-row-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.15rem 0.75rem; min-height: 2.75rem; padding: 0.35rem 0.5rem; border: 0; border-radius: 0.5rem; background: none; color: rgb(226, 232, 240); font-size: 0.8rem; text-align: left; cursor: pointer; }
.bank-row-ref { display: grid; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bank-row-paper { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; color: rgb(148, 163, 184); }
.bank-row-q { font-size: 0.78rem; font-weight: 600; color: rgb(226, 232, 240); }
.bank-row-head { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; color: rgb(203, 213, 225); }
.bank-row-head mark { padding: 0 0.1rem; border-radius: 0.2rem; background: rgba(250, 204, 21, 0.24); color: #fff; }
.bank-row-facts { display: flex; align-items: center; gap: 0.5rem; justify-self: end; white-space: nowrap; }
.bank-row-codes { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; font-size: 0.68rem; color: rgb(100, 116, 139); font-variant-numeric: tabular-nums; }
.bank-row-marks { min-width: 2.2rem; text-align: right; font-size: 0.76rem; font-weight: 600; color: rgb(226, 232, 240); font-variant-numeric: tabular-nums; }
.bank-row-marks small { margin-left: 0.1rem; font-size: 0.62rem; font-weight: 400; color: rgb(100, 116, 139); }
.bank-type { display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; padding: 0.08rem 0.35rem; border-radius: 0.35rem; background: rgba(45, 212, 191, 0.12); color: rgb(94, 234, 212); font-size: 0.64rem; }
.bank-type--mcq { background: rgba(129, 140, 248, 0.14); color: rgb(165, 180, 252); }
.bank-row-level { display: inline-flex; justify-content: center; min-width: 2.1rem; color: rgb(100, 116, 139); font-size: 0.72rem; }
.bank-row-flag { color: rgb(252, 211, 77); font-size: 0.72rem; }
.bank-row-main:focus-visible, .bank-add:focus-visible, .bank-add-all:focus-visible { outline: 2px solid rgb(34, 211, 238); outline-offset: -2px; }
.bank-sentinel { height: 1px; list-style: none; }
.bank-empty { padding: 2.5rem 1rem; list-style: none; text-align: center; font-size: 0.82rem; line-height: 1.6; color: rgb(148, 163, 184); }
.bank-skel { height: 2.75rem; margin: 1px 0; list-style: none; border-radius: 0.6rem; background: linear-gradient(90deg, rgba(255, 255, 255, 0.025) 25%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.025) 75%); background-size: 200% 100%; animation: bank-shimmer 1.3s ease-in-out infinite; }
@keyframes bank-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bank-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 1rem; padding: 0.8rem 0.95rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); font-size: 0.8rem; color: rgb(203, 213, 225); }
.bank-retry { min-height: 2.1rem; padding: 0 0.8rem; border-radius: 0.6rem; border: 1px solid rgba(34, 211, 238, 0.45); background: rgba(34, 211, 238, 0.12); color: #fff; font-size: 0.78rem; }

/* A narrow list pane: facts drop under the headline. */
@container (max-width: 38rem) {
  .bank-row-main { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .bank-row-facts { grid-column: 2; justify-self: start; gap: 0.45rem; }
  .bank-row-codes { max-width: 9rem; }
  .bank-row-marks { min-width: 0; text-align: left; }
}

/* ── ③ Question preview ─────────────────────────────────────────────────────────── */
.bank-preview { flex: 1 1 0; min-height: 13rem; display: flex; flex-direction: column; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(8, 14, 30, 0.55); }
.bank-preview-bar { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.3rem 0.35rem 0.3rem 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bank-preview-ref { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.bank-preview-nav { display: flex; align-items: center; gap: 0.1rem; }
.bank-preview-nav .bank-preview-close { display: none; }
/* The facts and the two actions share their lines: meta on the left, Open PDF · Add to sheet on the
   right, so the question below keeps the height a separate action bar used to take. */
.bank-preview-head { display: flex; align-items: flex-start; gap: 0.4rem 0.75rem; padding: 0.5rem 0.6rem 0 0.85rem; }
.bank-preview-head:not(:has(> :not([hidden]))) { display: none; }
.bank-preview-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.bank-tag { padding: 0.12rem 0.45rem; border-radius: 0.4rem; background: rgba(148, 163, 184, 0.1); color: rgb(148, 163, 184); font-size: 0.68rem; line-height: 1.3; white-space: nowrap; }
.bank-tag--written { background: rgba(45, 212, 191, 0.12); color: rgb(94, 234, 212); }
.bank-tag--ok { background: rgba(52, 211, 153, 0.12); color: rgb(110, 231, 183); }
.bank-tag--warn { background: rgba(245, 158, 11, 0.12); color: rgb(252, 211, 77); }
.bank-preview-topics { flex-basis: 100%; display: grid; gap: 0.1rem; margin-top: 0.15rem; font-size: 0.72rem; line-height: 1.4; color: rgb(148, 163, 184); }
.bank-preview-topic { display: block; overflow-wrap: anywhere; }
.bank-preview-code { color: rgb(var(--bank-accent)); font-variant-numeric: tabular-nums; }
.bank-preview-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; display: grid; align-content: start; justify-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem 0.75rem; }
.bank-preview-page { display: block; max-width: 100%; height: auto; border-radius: 0.35rem; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.bank-preview-empty, .bank-preview-note { align-self: center; padding: 2rem 1rem; text-align: center; font-size: 0.8rem; line-height: 1.5; color: rgb(100, 116, 139); }
/* A question takes a moment to fetch and draw. The pane used to go blank with one small grey
   line in it, which on a slow link reads as "this is broken" rather than "this is loading" —
   the picker's previews were reported as never loading at all. A moving spinner says which. */
.bank-preview-loading { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 2.5rem 1rem; color: rgb(100, 116, 139); }
.bank-preview-loading-text { font-size: 0.8rem; line-height: 1.5; }
.bank-preview-spinner { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid rgba(148, 163, 184, 0.25); border-top-color: rgba(34, 211, 238, 0.85); animation: bank-spin 0.7s linear infinite; }
@keyframes bank-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bank-preview-spinner { animation-duration: 2.4s; } }
.bank-preview-actions { flex: none; display: flex; align-items: center; gap: 0.35rem; }
.bank-preview-open { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.6rem; border-radius: 0.55rem; color: rgb(148, 163, 184); font-size: 0.76rem; text-decoration: none; }
.bank-preview-open:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.bank-preview-add { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0 0.95rem; border-radius: 0.6rem; border: 1px solid rgba(34, 211, 238, 0.5); background: rgba(34, 211, 238, 0.14); color: #fff; font-size: 0.8rem; font-weight: 600; }
.bank-preview-add svg { width: 0.95rem; height: 0.95rem; }
.bank-preview-add[aria-pressed="true"] { border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.12); color: rgb(167, 243, 208); }

/* ── ③ The sheet ────────────────────────────────────────────────────────────────── */
.bank-dock { flex: 0 1 auto; max-height: 58%; min-height: 10rem; display: flex; flex-direction: column; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(34, 211, 238, 0.18); background: linear-gradient(180deg, rgba(10, 18, 38, 0.85) 0%, rgba(8, 14, 30, 0.72) 100%); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6); }
.bank-dock.is-collapsed { min-height: 0; }
.bank-dock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; min-height: 2.75rem; padding: 0.3rem 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.bank-review-back { display: none; }
.bank-dock-toggle { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.55rem; min-height: 2.2rem; padding: 0 0.5rem; border: 0; border-radius: 0.55rem; background: none; color: rgb(226, 232, 240); text-align: left; }
.bank-dock-title { flex: none; font-size: 0.86rem; font-weight: 600; color: #fff; white-space: nowrap; }
.bank-dock-summary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: rgb(148, 163, 184); font-variant-numeric: tabular-nums; }
.bank-dock-caret { flex: none; align-self: center; margin-left: auto; width: 0.95rem; height: 0.95rem; color: rgb(100, 116, 139); transition: transform 0.15s ease; }
.bank-dock.is-collapsed .bank-dock-caret { transform: rotate(-90deg); }
.bank-dock-tools { display: flex; align-items: center; gap: 0.1rem; }
.bank-dock.is-collapsed .bank-dock-list, .bank-dock.is-collapsed .bank-dock-empty, .bank-dock.is-collapsed .bank-dock-coverage { display: none; }
.bank-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.5rem 0.55rem 0; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: 1px solid rgba(250, 204, 21, 0.28); background: rgba(250, 204, 21, 0.08); color: rgb(254, 240, 138); font-size: 0.76rem; line-height: 1.4; }
.bank-notice-text { flex: 1 1 11rem; min-width: 0; }
.bank-notice-btn { min-height: 1.95rem; padding: 0 0.6rem; border-radius: 0.5rem; border: 1px solid rgba(250, 204, 21, 0.4); background: rgba(250, 204, 21, 0.1); color: #fff; font-size: 0.74rem; white-space: nowrap; }
.bank-notice-btn:hover { background: rgba(250, 204, 21, 0.18); }
.bank-dock-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; margin: 0; padding: 0.35rem 0.4rem; list-style: none; }
.bank-item { min-width: 0; display: flex; align-items: center; gap: 0.1rem; min-height: 2.35rem; padding-right: 0.1rem; border-radius: 0.55rem; border: 1px solid transparent; background: rgba(255, 255, 255, 0.025); }
.bank-item:hover { background: rgba(255, 255, 255, 0.05); }
.bank-item.is-current { border-color: rgba(var(--bank-accent), 0.5); background: rgba(var(--bank-accent), 0.1); }
.bank-item.is-dragging { opacity: 0.45; }
.bank-item.is-drop-before { box-shadow: inset 0 2px 0 rgb(34, 211, 238); }
.bank-item.is-drop-after { box-shadow: inset 0 -2px 0 rgb(34, 211, 238); }
.bank-item-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 2rem; color: rgb(71, 85, 105); cursor: grab; }
.bank-item-grip svg { width: 0.8rem; height: 0.8rem; }
.bank-item-num { flex: none; min-width: 1.35rem; text-align: right; font-size: 0.7rem; color: rgb(100, 116, 139); font-variant-numeric: tabular-nums; }
.bank-item-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.45rem; min-height: 2.2rem; padding: 0.55rem 0.4rem; border: 0; border-radius: 0.45rem; background: none; color: rgb(226, 232, 240); font-size: 0.76rem; line-height: 1.2; text-align: left; cursor: pointer; }
.bank-item-ref { flex: none; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-item-head { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(148, 163, 184); }
.bank-item-main.is-unbuilt { cursor: default; opacity: 0.55; }
.bank-item-marks { flex: none; min-width: 1.4rem; text-align: right; font-size: 0.72rem; font-weight: 600; color: rgb(203, 213, 225); font-variant-numeric: tabular-nums; }
.bank-item .bank-icon-btn { width: 1.75rem; height: 1.75rem; }
.bank-item-up, .bank-item-down { display: none !important; }
.bank-item-remove { opacity: 0.5; }
.bank-item:hover .bank-item-remove, .bank-item-remove:focus-visible { opacity: 1; }
.bank-dock-empty { padding: 1.1rem 1rem; text-align: center; font-size: 0.78rem; line-height: 1.5; color: rgb(100, 116, 139); }
.bank-dock-coverage { padding: 0.35rem 0.85rem 0.1rem; font-size: 0.68rem; line-height: 1.45; color: rgb(100, 116, 139); font-variant-numeric: tabular-nums; }
/* --bank-fab-clear: how far the site's feedback button reaches into this footer (bank.js:measure),
   so Generate and the run status step left of it instead of sitting underneath. */
.bank-dock-foot { display: grid; gap: 0.45rem; padding: 0.55rem max(0.6rem, var(--bank-fab-clear, 0px)) 0.6rem 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(2, 6, 23, 0.35); }
.bank-run-slot { min-width: 0; display: grid; gap: 0.4rem; }
.bank-run-slot:empty, .bank-run-slot:not(:has(> :not(.hidden))) { display: none; }
.bank-dock-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.bank-dirty { margin-right: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: rgb(252, 211, 77); }
.bank-dirty::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; }
.bank-dirty.is-clean { color: rgb(110, 231, 183); }
.bank-view-built { min-height: 2.5rem; padding: 0 0.8rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: rgb(226, 232, 240); font-size: 0.8rem; }
.bank-view-built:hover { border-color: rgba(255, 255, 255, 0.28); }
.bank-generate { min-height: 2.5rem; }
.bank-generate:disabled { opacity: 0.5; cursor: not-allowed; }
.bank-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 0.5rem; background: transparent; color: rgb(148, 163, 184); }
.bank-icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: #fff; }
.bank-icon-btn:disabled { opacity: 0.3; cursor: default; }
.bank-icon-btn svg { width: 0.95rem; height: 0.95rem; }
.bank-icon-btn:focus-visible, .bank-item-main:focus-visible, .bank-dock-toggle:focus-visible, .bank-notice-btn:focus-visible, .bank-preview-add:focus-visible, .bank-preview-open:focus-visible, .bank-view-built:focus-visible { outline: 2px solid rgb(34, 211, 238); outline-offset: -2px; }
.bank-backdrop { display: none; }

/* ── After a build: the sheet is the navigator for the built PDF ────────────────── */
.generate-workspace.preview-mode[data-job="bank"] { --left-col-width: 24rem; }
#generate-workspace.preview-mode[data-job="bank"] .bank-panes { display: block; height: auto; min-height: 0; }
#generate-workspace.preview-mode[data-job="bank"] .bank-pane--nav,
#generate-workspace.preview-mode[data-job="bank"] .bank-pane--list,
#generate-workspace.preview-mode[data-job="bank"] .bank-preview { display: none; }
#generate-workspace.preview-mode[data-job="bank"] .bank-dock { position: static; min-height: 0; max-height: calc(100dvh - var(--preview-sticky-top) - 12rem); margin-bottom: 0.75rem; }
#generate-workspace.preview-mode[data-job="bank"] .bank-review-back { display: inline-flex; flex-basis: 100%; }
#generate-workspace.preview-mode[data-job="bank"] .bank-item-main:not(.is-unbuilt):hover .bank-item-ref { color: rgb(165, 243, 252); }

/* ── 1024-1279 px: subject over the list, the topic tree as a drawer ────────────── */
@media (max-width: 1279px) {
  .bank-panes { grid-template-columns: minmax(26rem, 1fr) minmax(22rem, 44%); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "nav side" "list side"; }
  .bank-pane--nav { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; border: 0; background: transparent; }
  .bank-mode { flex: none; margin: 0; }                 /* beside the subject button, not above it */
  .bank-subject { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; }
  .bank-topics-btn { display: inline-flex; }
  .bank-nav-sheet { position: fixed; z-index: 72; top: var(--preview-sticky-top); bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)); left: 0; width: min(24rem, 88vw); border-radius: 0 1rem 1rem 0; border-right: 1px solid rgba(255, 255, 255, 0.1); background: rgb(8, 13, 28); box-shadow: 24px 0 48px -12px rgba(0, 0, 0, 0.6); transform: translateX(-104%); visibility: hidden; transition: transform 0.22s ease, visibility 0s linear 0.22s; }
  .bank-builder.is-nav-open .bank-nav-sheet { transform: none; visibility: visible; transition: transform 0.22s ease; }
  .bank-nav-head .bank-nav-close { display: inline-flex; }
  .bank-builder.is-nav-open .bank-backdrop, .bank-builder.is-preview-open .bank-backdrop,
  .bank-builder.is-dock-open .bank-backdrop, .bank-builder.is-filters-open .bank-backdrop { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(2, 6, 23, 0.6); }
}

/* ── Below 1024 px: one column; preview and sheet slide over the page ───────────── */
@media (max-width: 1023px) {
  .bank-preview-head { flex-wrap: wrap; }
  .bank-preview-actions { margin-left: auto; }
  #site-main:has(#generate-workspace[data-mode="pick"]:not(.preview-mode)) { padding-top: 0.5rem; }
  .gen-head-title { font-size: 1.1rem; }
  .bank-builder { padding-bottom: 7.5rem; }
  #generate-workspace.preview-mode .bank-builder { padding-bottom: 0; }
  .bank-panes { display: block; height: auto; min-height: 0; }
  .bank-pane { border: 0; border-radius: 0; background: transparent; }
  .bank-pane--nav { margin-bottom: 0.6rem; }
  .bank-pane--list { overflow: visible; }
  /* The sticky bar is its own stacking layer, so it rises above the sheet bar while its filter
     sheet is open; otherwise the bar would cover the sheet's Reset and Done buttons. */
  .bank-builder.is-filters-open .bank-toolbar { z-index: 77; }
  .bank-toolbar { top: var(--preview-sticky-top); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.9rem; background: rgb(9, 14, 29); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bank-start { padding: 0.9rem 0.1rem 1.5rem; }
  .bank-list-head { padding: 0.6rem 0.2rem 0.3rem; }
  .bank-list { padding: 0 0 0.8rem; }
  .bank-add { width: 2.75rem; height: 2.75rem; }
  .bank-row-main { min-height: 3.25rem; }
  .bank-trow, .bank-tsubs .bank-trow { --tree-slot: 2.75rem; --tree-check: 2.75rem; --tree-exp: 2.75rem; }
  .bank-tool, .bank-search, .bank-select, .bank-toggle, .bank-link-btn, .bank-fpop-done, .bank-add-all, .bank-nav-clear { min-height: 2.75rem; }
  .bank-seg-btn { min-height: 2.6rem; }
  .bank-chipf { min-height: 2.5rem; padding-left: 0.7rem; }
  .bank-chipf svg { width: 0.9rem; height: 0.9rem; }
  .bank-sort { margin-left: 0; }
  .bank-filter-pop { position: fixed; z-index: 76; top: auto; left: 0; right: 0; bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100dvh - var(--preview-sticky-top) - var(--tabbar-h, 0px) - 0.75rem); border-radius: 1rem 1rem 0 0; }
  .bank-pane--side { display: block; }
  .bank-preview { position: fixed; z-index: 76; top: calc(var(--preview-sticky-top) + 0.25rem); left: 0; right: 0; bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px)); min-height: 0; border-radius: 1rem 1rem 0 0; border-color: rgba(255, 255, 255, 0.1); background: rgb(8, 13, 28); box-shadow: 0 -24px 48px -12px rgba(0, 0, 0, 0.6); transform: translateY(104%); visibility: hidden; transition: transform 0.24s ease, visibility 0s linear 0.24s; }
  .bank-builder.is-preview-open .bank-preview { transform: none; visibility: visible; transition: transform 0.24s ease; }
  .bank-preview-nav .bank-preview-close { display: inline-flex; }
  .bank-preview-add, .bank-preview-open { min-height: 2.75rem; }
  .bank-preview-nav .bank-icon-btn { width: 2.75rem; height: 2.75rem; }
  .bank-dock { position: fixed; z-index: 57; left: 0.5rem; right: 0.5rem; bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 0.5rem); min-height: 0; max-height: calc(100dvh - var(--tabbar-h, 0px) - 5rem); border-color: rgba(34, 211, 238, 0.3); background: rgb(9, 15, 32); box-shadow: 0 -12px 32px -8px rgba(0, 0, 0, 0.65); }
  .bank-builder.is-dock-open .bank-dock { z-index: 76; }
  .bank-builder:not(.is-dock-open) .bank-dock-list, .bank-builder:not(.is-dock-open) .bank-dock-empty,
  .bank-builder:not(.is-dock-open) .bank-dock-coverage, .bank-builder:not(.is-dock-open) .bank-dock-tools { display: none; }
  .bank-dock-caret { transform: rotate(180deg); }
  .bank-builder.is-dock-open .bank-dock-caret { transform: none; }
  .bank-dock-head { min-height: 3rem; }
  .bank-dock-toggle { min-height: 2.75rem; }
  .bank-item { min-height: 2.9rem; }
  .bank-item-grip { display: none; }
  .bank-item-up, .bank-item-down { display: inline-flex !important; }
  .bank-item .bank-icon-btn { width: 2.75rem; height: 2.75rem; }
  /* Closed, the sheet is one bar: its title and count beside the Build button. A notice keeps the
     column layout so its text has room. */
  .bank-builder:not(.is-dock-open) .bank-dock:not(:has(> .bank-notice:not([hidden]))) { flex-direction: row; align-items: center; }
  .bank-builder:not(.is-dock-open) .bank-dock-head { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
  .bank-builder:not(.is-dock-open) .bank-dock-foot { flex: none; border-top: 0; background: none; padding: 0.35rem 0.45rem 0.35rem 0; }
  .bank-builder:not(.is-dock-open) .bank-dirty, .bank-builder:not(.is-dock-open) .bank-view-built { display: none !important; }
  /* The site's feedback button floats above the sheet bar, and steps aside while a sheet is open. */
  body:has(#generate-workspace[data-mode="pick"]:not(.preview-mode)) .feedback-launcher { bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 5.25rem); }
  body:has(.bank-builder.is-dock-open) .feedback-launcher, body:has(.bank-builder.is-preview-open) .feedback-launcher,
  body:has(.bank-builder.is-filters-open) .feedback-launcher, body:has(.bank-builder.is-nav-open) .feedback-launcher { display: none; }
  .bank-item-remove { opacity: 1; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock { position: static; flex-direction: column; max-height: 24rem; margin: 0 0 0.5rem; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock-head { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock-foot { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 0.55rem 0.6rem 0.6rem; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dirty { display: inline-flex !important; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock:not(.is-collapsed) .bank-dock-list { display: grid; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock-tools { display: flex; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock-caret { transform: none; }
  #generate-workspace.preview-mode[data-job="bank"] .bank-dock.is-collapsed .bank-dock-caret { transform: rotate(-90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bank-nav-sheet, .bank-preview, .bank-subject-caret, .bank-dock-caret, .bank-texp svg, .bank-add,
  .bank-chip, .bank-trow, .bank-subject-btn, .gen-mode-btn, .bank-tbox { transition: none !important; }
  .bank-skel { animation: none; }
}

/* ▼▼ LIGHT THEME — GENERATED by scripts/build_light_theme.py from the rules above. Do not edit by hand: run the builder. Hand tuning goes in 36-theme-light.css. ▼▼ */
html[data-theme="light"] .gen-head-title{color:rgb(51 63 82)}
html[data-theme="light"] .gen-mode{border-color:rgb(15 23 42/0.112);background-color:rgb(250 251 252/0.55)}
html[data-theme="light"] .gen-mode-btn{color:rgb(61 75 94)}
html[data-theme="light"] .gen-mode-btn:hover{color:rgb(44 63 88)}
html[data-theme="light"] .gen-mode-btn[aria-pressed="true"]{color:rgb(51 63 82);box-shadow:inset 0px 0px 0px 1px rgb(14 158 180/0.55)}
html[data-theme="light"] .bank-pane{border-color:rgb(15 23 42/0.098);background-color:rgb(248 248 251/0.55)}
html[data-theme="light"] .bank-subject{border-bottom-color:rgb(15 23 42/0.084)}
html[data-theme="light"] .bank-subject-btn{color:rgb(44 63 88)}
html[data-theme="light"] .bank-subject-btn:hover{box-shadow:0px 8px 24px -14px rgb(15 23 42/0.14)}
html[data-theme="light"] .bank-subject-icon{color:color-mix(in srgb,rgb(var(--bank-accent)) 44%,#0f172a)}
html[data-theme="light"] .bank-subject-name{color:rgb(51 63 82)}
html[data-theme="light"] .bank-subject-meta{color:rgb(61 75 94)}
html[data-theme="light"] .bank-subject-caret{color:rgb(61 75 94)}
html[data-theme="light"] .bank-subject-pop{border-color:rgb(15 23 42/0.14);background-color:rgb(247 248 251);box-shadow:0px 24px 48px -12px rgb(15 23 42/0.192)}
html[data-theme="light"] .bank-subject-filter{border-color:rgb(15 23 42/0.14);background-color:rgb(250 251 252/0.7);color:rgb(44 63 88)}
html[data-theme="light"] .bank-subject-filter::placeholder{color:rgb(87 101 122)}
html[data-theme="light"] .bank-subject-filter:focus{box-shadow:0px 0px 0px 2px rgb(14 158 180/0.255)}
html[data-theme="light"] .bank-subject-group{color:rgb(87 101 122)}
html[data-theme="light"] .bank-subject-opt{color:rgb(48 65 85)}
html[data-theme="light"] .bank-subject-opt svg{color:color-mix(in srgb,rgb(var(--accent-rgb, 148, 163, 184)) 44%,#0f172a)}
html[data-theme="light"] .bank-subject-opt-meta{color:rgb(87 101 122)}
html[data-theme="light"] .bank-subject-opt-sheet{box-shadow:none}
html[data-theme="light"] .bank-subject-opt.is-active{background-color:rgb(15 23 42/0.07);color:rgb(51 63 82)}
html[data-theme="light"] .bank-subject-opt[aria-selected="true"]{color:rgb(51 63 82)}
html[data-theme="light"] .bank-subject-none{color:rgb(61 75 94)}
html[data-theme="light"] .bank-nav-title{color:rgb(61 75 94)}
html[data-theme="light"] .bank-nav-clear{color:rgb(0 90 133)}
html[data-theme="light"] .bank-nav-clear:hover{color:rgb(51 63 82);background-color:rgb(15 23 42/0.05)}
html[data-theme="light"] .bank-trow:hover{background-color:rgb(15 23 42/0.04)}
html[data-theme="light"] .bank-tbox{color:color-mix(in srgb,rgb(var(--bank-accent)) 44%,#0f172a)}
html[data-theme="light"] .bank-tlabel{color:rgb(48 65 85)}
html[data-theme="light"] .bank-trow.is-on .bank-tlabel{color:rgb(51 63 82)}
html[data-theme="light"] .bank-tnum{color:rgb(87 101 122)}
html[data-theme="light"] .bank-tcount{background-color:rgb(15 23 42/0.07);color:rgb(61 75 94/0.9)}
html[data-theme="light"] .bank-trow.is-on .bank-tcount{color:rgb(51 63 82)}
html[data-theme="light"] .bank-texp{color:rgb(87 101 122)}
html[data-theme="light"] .bank-texp:hover{color:rgb(51 63 82);background-color:rgb(15 23 42/0.06)}
html[data-theme="light"] .bank-tsubs{border-left-color:rgb(15 23 42/0.098)}
html[data-theme="light"] .bank-tsubs .bank-tlabel{color:rgb(61 75 94)}
html[data-theme="light"] .bank-nav-empty{color:rgb(87 101 122)}
html[data-theme="light"] .bank-start-title{color:rgb(51 63 82)}
html[data-theme="light"] .bank-start-sub{color:rgb(61 75 94)}
html[data-theme="light"] .bank-start-level-label{color:rgb(87 101 122)}
html[data-theme="light"] .bank-chip{color:rgb(44 63 88)}
html[data-theme="light"] .bank-chip svg{color:color-mix(in srgb,rgb(var(--accent-rgb, 148, 163, 184)) 44%,#0f172a)}
html[data-theme="light"] .bank-chip-meta{color:rgb(87 101 122)}
html[data-theme="light"] .bank-chip:hover{box-shadow:0px 8px 24px -14px rgb(15 23 42/0.14)}
html[data-theme="light"] .bank-toolbar{border-bottom-color:rgb(15 23 42/0.084);background-color:rgb(248 248 251/0.95)}
html[data-theme="light"] .bank-tool{border-color:rgb(15 23 42/0.14);background-color:rgb(15 23 42/0.03);color:rgb(48 65 85)}
html[data-theme="light"] .bank-tool svg{color:rgb(61 75 94)}
html[data-theme="light"] .bank-tool:hover,html[data-theme="light"] .bank-tool[aria-expanded="true"]{border-color:rgb(15 23 42/0.18);color:rgb(51 63 82)}
html[data-theme="light"] .bank-tool-badge{color:rgb(1 111 124)}
html[data-theme="light"] .bank-search{border-color:rgb(15 23 42/0.14);background-color:rgb(250 251 252/0.6)}
html[data-theme="light"] .bank-search svg{color:rgb(87 101 122)}
html[data-theme="light"] .bank-search:focus-within{box-shadow:0px 0px 0px 2px rgb(14 158 180/0.255)}
html[data-theme="light"] .bank-search-input{color:rgb(44 63 88)}
html[data-theme="light"] .bank-search-input::placeholder{color:rgb(87 101 122)}
html[data-theme="light"] .bank-seg{border-color:rgb(15 23 42/0.112);background-color:rgb(250 251 252/0.45)}
html[data-theme="light"] .bank-seg-btn{color:rgb(61 75 94)}
html[data-theme="light"] .bank-seg-btn:hover{color:rgb(44 63 88)}
html[data-theme="light"] .bank-seg-btn[aria-checked="true"]{background-color:rgb(15 23 42/0.08);color:rgb(51 63 82);box-shadow:inset 0px 0px 0px 1px rgb(15 23 42/0.16)}
html[data-theme="light"] .bank-seg-count{color:rgb(87 101 122)}
html[data-theme="light"] .bank-chipf{color:rgb(0 107 117)}
html[data-theme="light"] .bank-chipf svg{color:rgb(61 75 94)}
html[data-theme="light"] .bank-chipf:hover svg{color:rgb(51 63 82)}
html[data-theme="light"] .bank-sort{color:rgb(87 101 122)}
html[data-theme="light"] .bank-select{border-color:rgb(15 23 42/0.14);background-color:rgb(248 249 251);color:rgb(44 63 88)}
html[data-theme="light"] .bank-filter-pop{border-color:rgb(15 23 42/0.14);background-color:rgb(247 248 251);box-shadow:0px 24px 48px -12px rgb(15 23 42/0.192)}
html[data-theme="light"] .bank-flabel{color:rgb(61 75 94)}
html[data-theme="light"] .bank-marks-out{color:rgb(44 63 88)}
html[data-theme="light"] .bank-toggle{border-color:rgb(15 23 42/0.14);background-color:rgb(15 23 42/0.03);color:rgb(48 65 85)}
html[data-theme="light"] .bank-toggle:hover{border-color:rgb(15 23 42/0.18)}
html[data-theme="light"] .bank-toggle[aria-pressed="true"]{color:rgb(51 63 82)}
html[data-theme="light"] .bank-fnote{color:rgb(87 101 122)}
html[data-theme="light"] .bank-range::before{background-color:rgb(15 23 42/0.1)}
html[data-theme="light"] .bank-range input[type="range"]::-webkit-slider-thumb{background-color:rgb(247 248 251)}
html[data-theme="light"] .bank-range input[type="range"]::-moz-range-thumb{background-color:rgb(247 248 251)}
html[data-theme="light"] .bank-range input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0px 0px 0px 3px rgb(14 158 180/0.55)}
html[data-theme="light"] .bank-years{color:rgb(87 101 122)}
html[data-theme="light"] .bank-switch{color:rgb(48 65 85)}
html[data-theme="light"] .bank-fpop-foot{border-top-color:rgb(15 23 42/0.098)}
html[data-theme="light"] .bank-link-btn{color:rgb(61 75 94)}
html[data-theme="light"] .bank-link-btn:hover{color:rgb(51 63 82);background-color:rgb(15 23 42/0.05)}
html[data-theme="light"] .bank-fpop-done{color:rgb(51 63 82)}
html[data-theme="light"] .bank-count{color:rgb(61 75 94)}
html[data-theme="light"] .bank-search-hint{color:rgb(126 96 0)}
html[data-theme="light"] .bank-add-all{color:rgb(1 111 124)}
html[data-theme="light"] .bank-row:hover{background-color:rgb(15 23 42/0.035)}
html[data-theme="light"] .bank-add{border-color:rgb(15 23 42/0.168);background-color:rgb(15 23 42/0.03);color:rgb(61 75 94)}
html[data-theme="light"] .bank-add:hover{color:rgb(1 111 124)}
html[data-theme="light"] .bank-add[aria-pressed="true"]{color:rgb(2 111 126)}
html[data-theme="light"] .bank-row-main{color:rgb(44 63 88)}
html[data-theme="light"] .bank-row-paper{color:rgb(61 75 94)}
html[data-theme="light"] .bank-row-q{color:rgb(44 63 88)}
html[data-theme="light"] .bank-row-head{color:rgb(48 65 85)}
html[data-theme="light"] .bank-row-head mark{color:rgb(51 63 82)}
html[data-theme="light"] .bank-row-codes{color:rgb(87 101 122)}
html[data-theme="light"] .bank-row-marks{color:rgb(44 63 88)}
html[data-theme="light"] .bank-row-marks small{color:rgb(87 101 122)}
html[data-theme="light"] .bank-type{color:rgb(12 114 98)}
html[data-theme="light"] .bank-type--mcq{color:rgb(1 24 131)}
html[data-theme="light"] .bank-row-level{color:rgb(87 101 122)}
html[data-theme="light"] .bank-row-flag{color:rgb(126 96 0)}
html[data-theme="light"] .bank-empty{color:rgb(61 75 94)}
html[data-theme="light"] .bank-skel{background-image:linear-gradient(90deg, rgb(15 23 42/0.025) 25%, rgb(15 23 42/0.07) 50%, rgb(15 23 42/0.025) 75%)}
html[data-theme="light"] .bank-status{border-color:rgb(15 23 42/0.112);background-color:rgb(15 23 42/0.03);color:rgb(48 65 85)}
html[data-theme="light"] .bank-retry{color:rgb(51 63 82)}
html[data-theme="light"] .bank-preview{border-color:rgb(15 23 42/0.098);background-color:rgb(248 248 251/0.55)}
html[data-theme="light"] .bank-preview-bar{border-bottom-color:rgb(15 23 42/0.084)}
html[data-theme="light"] .bank-preview-ref{color:rgb(51 63 82)}
html[data-theme="light"] .bank-tag{color:rgb(61 75 94)}
html[data-theme="light"] .bank-tag--written{color:rgb(12 114 98)}
html[data-theme="light"] .bank-tag--ok{color:rgb(16 111 73)}
html[data-theme="light"] .bank-tag--warn{color:rgb(126 96 0)}
html[data-theme="light"] .bank-preview-topics{color:rgb(61 75 94)}
html[data-theme="light"] .bank-preview-code{color:color-mix(in srgb,rgb(var(--bank-accent)) 44%,#0f172a)}
html[data-theme="light"] .bank-preview-page{box-shadow:0px 1px rgb(15 23 42/0.112)}
html[data-theme="light"] .bank-preview-empty,html[data-theme="light"] .bank-preview-note{color:rgb(87 101 122)}
html[data-theme="light"] .bank-preview-loading{color:rgb(87 101 122)}
html[data-theme="light"] .bank-preview-open{color:rgb(61 75 94)}
html[data-theme="light"] .bank-preview-open:hover{color:rgb(51 63 82);background-color:rgb(15 23 42/0.05)}
html[data-theme="light"] .bank-preview-add{color:rgb(51 63 82)}
html[data-theme="light"] .bank-preview-add[aria-pressed="true"]{color:rgb(13 112 66)}
html[data-theme="light"] .bank-dock{background-image:linear-gradient(180deg, rgb(246 247 250/0.85) 0%, rgb(248 248 251/0.72) 100%);box-shadow:0px 18px 40px -20px rgb(15 23 42/0.192)}
html[data-theme="light"] .bank-dock-head{border-bottom-color:rgb(15 23 42/0.084)}
html[data-theme="light"] .bank-dock-toggle{color:rgb(44 63 88)}
html[data-theme="light"] .bank-dock-title{color:rgb(51 63 82)}
html[data-theme="light"] .bank-dock-summary{color:rgb(61 75 94)}
html[data-theme="light"] .bank-dock-caret{color:rgb(87 101 122)}
html[data-theme="light"] .bank-notice{color:rgb(110 96 0)}
html[data-theme="light"] .bank-notice-btn{color:rgb(51 63 82)}
html[data-theme="light"] .bank-item{background-color:rgb(15 23 42/0.025)}
html[data-theme="light"] .bank-item:hover{background-color:rgb(15 23 42/0.05)}
html[data-theme="light"] .bank-item.is-drop-before{box-shadow:inset 0px 2px rgb(15 23 42/0.2)}
html[data-theme="light"] .bank-item.is-drop-after{box-shadow:inset 0px -2px rgb(15 23 42/0.2)}
html[data-theme="light"] .bank-item-num{color:rgb(87 101 122)}
html[data-theme="light"] .bank-item-main{color:rgb(44 63 88)}
html[data-theme="light"] .bank-item-head{color:rgb(61 75 94)}
html[data-theme="light"] .bank-item-marks{color:rgb(48 65 85)}
html[data-theme="light"] .bank-dock-empty{color:rgb(87 101 122)}
html[data-theme="light"] .bank-dock-coverage{color:rgb(87 101 122)}
html[data-theme="light"] .bank-dock-foot{border-top-color:rgb(15 23 42/0.084);background-color:rgb(250 251 252/0.35)}
html[data-theme="light"] .bank-dirty{color:rgb(126 96 0)}
html[data-theme="light"] .bank-dirty.is-clean{color:rgb(16 111 73)}
html[data-theme="light"] .bank-view-built{border-color:rgb(15 23 42/0.18);background-color:rgb(15 23 42/0.04);color:rgb(44 63 88)}
html[data-theme="light"] .bank-view-built:hover{border-color:rgb(15 23 42/0.18)}
html[data-theme="light"] .bank-icon-btn{color:rgb(61 75 94)}
html[data-theme="light"] .bank-icon-btn:hover:not(:disabled){background-color:rgb(15 23 42/0.06);color:rgb(51 63 82)}
html[data-theme="light"] #generate-workspace.preview-mode[data-job="bank"] .bank-item-main:not(.is-unbuilt):hover .bank-item-ref{color:rgb(1 111 124)}
@media (max-width: 1279px){html[data-theme="light"] .bank-nav-sheet{border-right-color:rgb(15 23 42/0.14);background-color:rgb(248 249 251);box-shadow:24px 0px 48px -12px rgb(15 23 42/0.192)}html[data-theme="light"] .bank-builder.is-nav-open .bank-backdrop,html[data-theme="light"] .bank-builder.is-preview-open .bank-backdrop,html[data-theme="light"] .bank-builder.is-dock-open .bank-backdrop,html[data-theme="light"] .bank-builder.is-filters-open .bank-backdrop{background-color:rgb(250 251 252/0.6)}}
@media (max-width: 1023px){html[data-theme="light"] .bank-toolbar{border-color:rgb(15 23 42/0.112);background-color:rgb(248 248 251)}html[data-theme="light"] .bank-preview{border-color:rgb(15 23 42/0.14);background-color:rgb(248 249 251);box-shadow:0px -24px 48px -12px rgb(15 23 42/0.192)}html[data-theme="light"] .bank-dock{background-color:rgb(247 248 251);box-shadow:0px -12px 32px -8px rgb(15 23 42/0.2)}html[data-theme="light"] #generate-workspace.preview-mode[data-job="bank"] .bank-dock-head{border-bottom-color:rgb(15 23 42/0.084)}html[data-theme="light"] #generate-workspace.preview-mode[data-job="bank"] .bank-dock-foot{border-top-color:rgb(15 23 42/0.084)}}
/* ▲▲ LIGHT THEME END ▲▲ */