/* CAP 뷰어 — Capstone-like chrome around a white workbook page */
:root {
  --chrome: #eceef1;
  --chrome-2: #dfe2e7;
  --chrome-3: #f6f7f9;
  --chrome-border: #c3c8d0;
  --chrome-text: #1f2329;
  --muted: #646b75;
  --workspace: #b8bdc5;
  --accent: #1f5fd1;
  --accent-contrast: #ffffff;
  --accent-soft: #dfe9fb;
  --danger: #b42318;
  --danger-soft: #fdecea;
  --shadow: 0 1px 3px rgba(16, 24, 40, .18), 0 6px 18px rgba(16, 24, 40, .10);
  --controls-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --chrome: #24272c;
    --chrome-2: #1b1d21;
    --chrome-3: #2c3036;
    --chrome-border: #3a3f47;
    --chrome-text: #e6e8eb;
    --muted: #9aa0a8;
    --workspace: #121417;
    --accent: #7ea3ff;
    --accent-contrast: #0b1020;
    --accent-soft: #233154;
    --danger: #ff8a80;
    --danger-soft: #3a1d1b;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--workspace);
  color: var(--chrome-text);
  font: 15px/1.45 system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body.has-controls { padding-bottom: calc(var(--controls-h) + env(safe-area-inset-bottom)); }
body.no-scroll { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; vertical-align: middle; }

/* ---------- title bar ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: linear-gradient(var(--chrome-3), var(--chrome));
  border-bottom: 1px solid var(--chrome-border);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.brand img { flex: none; border-radius: 7px; }
.brand-text { min-width: 0; }
.brand h1 { margin: 0; font-size: 15.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--chrome-border);
  background: var(--chrome-3);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.btn.ghost { background: transparent; }
.btn.big { min-height: 50px; padding: 0 22px; font-size: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link-btn { background: none; border: 0; padding: 6px 2px; color: var(--accent); font-weight: 600; cursor: pointer; }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.icon-btn:hover { background: var(--chrome-2); }

/* ---------- page tabs (Capstone workbook tabs) ---------- */
.page-tabs {
  position: sticky;
  top: calc(55px + env(safe-area-inset-top));
  z-index: 29;
  display: flex;
  gap: 2px;
  padding: 6px max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  overflow-x: auto;
  background: var(--chrome-2);
  border-bottom: 1px solid var(--chrome-border);
  scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs [role="tab"] {
  flex: none;
  max-width: 220px;
  padding: 7px 14px 8px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.page-tabs [role="tab"][aria-selected="true"] {
  background: #fff;
  color: #1f2329;
  border-color: var(--chrome-border);
  box-shadow: inset 0 3px 0 var(--accent);
  margin-bottom: -1px;
}

/* ---------- welcome / loading ---------- */
main { min-height: 50vh; }
.welcome {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}
.drop-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 28px 18px 22px;
  background: var(--chrome-3);
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.drop-icon { width: 84px; height: 84px; border-radius: 19px; box-shadow: 0 8px 20px rgba(23, 57, 168, .28); }
.drop-card h2 { margin: 2px 0 0; font-size: 19px; }
.drop-card p { margin: 0; color: var(--muted); max-width: 32em; }
.drop-card .btn.big { margin-top: 8px; }
.privacy { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px !important; }
.tips { background: var(--chrome-3); border: 1px solid var(--chrome-border); border-radius: 12px; padding: 14px 16px; }
.tips h3 { margin: 0 0 6px; font-size: 15px; }
.tips ul { margin: 0; padding-left: 18px; color: var(--muted); }
.tips li { margin: 4px 0; }
.tips b { color: var(--chrome-text); }
.error-box { background: var(--danger-soft); color: var(--danger); border-radius: 10px; padding: 12px 14px; font-weight: 500; overflow-wrap: anywhere; }

.loading { display: grid; justify-items: center; gap: 12px; padding: 80px 0; }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--chrome-border); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { width: min(320px, 80%); height: 6px; border-radius: 3px; background: var(--chrome-2); overflow: hidden; }
#progress-bar { height: 100%; width: 0; background: var(--accent); transition: width .15s; }

/* ---------- workbook page ---------- */
.page-host { padding: 12px max(6px, env(safe-area-inset-right)) 16px max(6px, env(safe-area-inset-left)); }
.page-host.mode-layout { overflow-x: auto; }

/* The page is always "paper": light colours, like Capstone, even in dark mode. */
.paper, .disp.expanded {
  --chart-bg: #ffffff;
  --chart-grid: #e4e7ec;
  --chart-axis: #8c939e;
  --chart-text: #2b3038;
  --chart-sel: rgba(31, 95, 209, .12);
  --chart-sel-edge: rgba(31, 95, 209, .6);
  color: #000;
  background: #fff;
  color-scheme: light;
}
.paper-frame { position: relative; margin: 0 auto; box-shadow: var(--shadow); background: #fff; }
.mode-layout .paper { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.mode-reflow .paper {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 10px 20px;
  border-radius: 4px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-empty { color: #6b7280; text-align: center; padding: 40px 0; }

/* displays */
.disp { display: flex; flex-direction: column; min-width: 0; background: #fff; }
.mode-layout .disp { position: absolute; overflow: hidden; }
.mode-layout .disp-text, .mode-layout .disp-image { background: transparent; }
.disp.framed { border: 1px solid #b7bdc6; }
.disp-title {
  margin: 0;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: #1f2329;
  flex: none;
}
.disp-body { position: relative; flex: 1; min-height: 0; min-width: 0; }
.mode-layout .disp-text .disp-body, .mode-layout .disp-entry .disp-body { overflow: auto; padding: 4px; }
.mode-reflow .disp-entry .disp-body { padding: 8px 10px; }

/* rich text from Capstone (Qt) */
.rt { color: #000; line-height: 1.3; overflow-wrap: anywhere; }
.rt p, .rt li { white-space: pre-wrap; margin: 0; }
.rt ul, .rt ol { margin: 0; padding-left: 1.6em; }
.rt table { border-collapse: collapse; }
.rt td, .rt th { vertical-align: top; overflow-wrap: normal; word-break: keep-all; }
.rt .rt-bordered td, .rt .rt-bordered th { border: 1px solid #8c939e; padding: 2px 4px; }
.rt img { max-width: 100%; height: auto; }
.rt a { color: #1f5fd1; }
.mode-layout .rt { line-height: 1.2; } /* close to Qt's default line spacing */
.mode-reflow .rt { line-height: 1.45; }
.mode-reflow .rt table { display: block; max-width: 100%; overflow-x: auto; }

.disp-entry { background: #fff; }
.disp-entry.framed { border-color: #9aa3b0; }
.disp-entry .disp-title { background: #eef1f5; border-bottom: 1px solid #c9ced6; font-size: 13px; }
.entry-empty { margin: 0; color: #8c939e; font-style: italic; }

/* image */
.img-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.disp-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mode-reflow .disp-img { height: auto; max-height: 75vh; }
.missing { color: #8c939e; text-align: center; padding: 20px 0; margin: 0; }

/* display toolbar (graph / table) */
.gtools {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 3px 3px;
  flex: none;
  overflow-x: auto;
  background: #f0f2f5;
  border: 1px solid #d3d8df;
  border-bottom: 0;
  color: #2b3038;
  scrollbar-width: none;
}
.gtools::-webkit-scrollbar { display: none; }
.mode-reflow .gtools, .disp.expanded .gtools { flex-wrap: wrap; }
.mode-reflow .tb-spacer { flex: 0 0 0; }
.tb {
  flex: none;
  display: inline-flex; align-items: center; gap: 3px;
  min-width: 30px; height: 34px; padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #2b3038;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
}
.tb:hover { background: #e2e6ec; }
.tb[aria-pressed="true"] { background: #dbe6fb; border-color: #8fb0ea; color: #1f5fd1; }
.tb-fit { position: relative; padding-right: 2px; }
.tb-select {
  border: 0; background: transparent; font-size: 13px; font-weight: 600; color: #2b3038;
  padding: 0; max-width: 52px; cursor: pointer;
}
.tb-spacer { flex: 1; }

.gplot { position: relative; flex: 1; min-height: 0; border: 1px solid #d3d8df; background: #fff; }
.gplot canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.mode-reflow .disp-graph .gplot { height: clamp(260px, 56vh, 480px); flex: none; }
.mode-layout .disp-graph .disp-body { display: flex; flex-direction: column; }
.axis-sel {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}
.axis-y { left: 12px; top: 50%; width: 220px; max-width: 70%; height: 26px; transform: translate(-50%, -50%) rotate(-90deg); }
.axis-x { left: 50%; bottom: 0; width: 60%; height: 22px; transform: translateX(-50%); }
.gcoord {
  position: absolute; left: 56px; top: 6px;
  max-width: calc(100% - 70px);
  padding: 4px 8px;
  border: 1px solid #9aa3b0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .94);
  font-size: 12.5px;
  line-height: 1.35;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.gcoord .dot { margin-right: 5px; }

.gstats { display: grid; gap: 6px; padding: 8px 0 0; color: #1f2329; font-size: 13px; }
.mode-layout .gstats {
  position: absolute; right: 8px; bottom: 34px; z-index: 3;
  max-width: 55%; max-height: 60%; overflow: auto; padding: 0;
}
.disp.expanded .gstats { position: static; max-width: none; max-height: 34vh; overflow: auto; padding: 8px; }
.gstats-scope { font-size: 12.5px; color: #4b5260; }
.fitbox { border: 2px solid var(--c); background: rgba(255, 255, 255, .96); border-radius: 4px; padding: 6px 9px; }
.fitbox-h { font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.fit-eq { font-variant-numeric: tabular-nums; line-height: 1.45; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px 10px; margin: 0 0 4px; }
.stat-grid dt { font-size: 11px; color: #646b75; }
.stat-grid dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.gstats .muted { color: #646b75; }

/* expanded graph (full screen) */
.disp.expanded {
  position: fixed !important;
  inset: 0;
  z-index: 80;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  flex-direction: column;
}
.disp.expanded .disp-body { flex: 1; display: flex; }
.disp.expanded .gplot { flex: 1; height: auto !important; }

/* tables (Capstone grid look) */
.tscroll { overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; border: 1px solid #c9ced6; }
.mode-layout .disp-table .tscroll { position: absolute; inset: 0; }
.mode-reflow .disp-table .tscroll { max-height: 60vh; }
.tscroll.big { max-height: 60vh; }
.cs-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; font-variant-numeric: tabular-nums; color: #111; }
.cs-table th, .cs-table td { padding: 5px 9px; text-align: right; white-space: nowrap; border-right: 1px solid #d9dde3; border-bottom: 1px solid #e3e6eb; }
.cs-table thead th { position: sticky; background: #eceff3; font-weight: 700; font-size: 12.5px; text-align: center; color: #1f2329; z-index: 1; }
.cs-table thead tr:first-child th { top: 0; }
.cs-table thead tr.meas-row th { top: 31px; border-bottom: 1px solid #b7bdc6; white-space: normal; min-width: 84px; vertical-align: bottom; }
.cs-table thead tr:only-child th { top: 0; border-bottom: 1px solid #b7bdc6; }
.cs-table .idx { width: 1%; min-width: 34px; color: #7a818c; background: #f4f5f7; text-align: center; font-weight: 500; }
.cs-table thead .idx { background: #eceff3; }
.cs-table td.name { text-align: left; }
.cs-table td.name .dot { margin-right: 6px; }
.cs-table tr.blank td { height: 26px; }
.run-row th { height: 31px; padding: 0 6px; }
.run-sel { border: 0; background: transparent; font-weight: 700; font-size: 12.5px; max-width: 120px; color: #1f2329; cursor: pointer; }
.run-row .dot { margin-right: 4px; }
.more-btn { display: block; width: 100%; padding: 10px; border: 0; border-top: 1px solid #e3e6eb; background: #f7f8fa; color: #1f5fd1; font-weight: 600; cursor: pointer; }

/* digits */
.disp-digits .disp-body { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; color: #111; }
.dig-value { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dig-unit { font-size: .45em; font-weight: 600; margin-left: .3em; color: #3b4250; }
.dig-label { font-size: 13px; color: #3b4250; margin-top: 4px; }
.dig-run { font-size: 12px; color: #7a818c; }
.mode-layout .disp-digits .disp-body { container-type: size; overflow: hidden; padding: 2px 6px; }
.mode-layout .dig-value { font-size: min(44px, 38cqh, 14cqw); }
.mode-layout .dig-label { font-size: min(13px, 11cqh); margin-top: 0; }
.mode-layout .dig-run { font-size: min(12px, 10cqh); }

.other-box { display: flex; gap: 10px; align-items: center; padding: 14px; color: #3b4250; font-size: 13.5px; height: 100%; }

/* ---------- bottom controls (like Capstone's control bar) ---------- */
.controls {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--controls-h) + env(safe-area-inset-bottom));
  padding: 4px max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  background: linear-gradient(var(--chrome), var(--chrome-2));
  border-top: 1px solid var(--chrome-border);
}
.ctl {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 72px; height: 50px; padding: 0 6px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 600;
}
.ctl:hover { background: var(--chrome-3); border-color: var(--chrome-border); }
.pager { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.pg {
  display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--chrome-border); border-radius: 50%;
  background: var(--chrome-3); cursor: pointer;
}
.pg:disabled { opacity: .35; cursor: default; }
.pg-label { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.2; }
.pg-label b { font-size: 13px; }
.pg-label span { font-size: 11.5px; color: var(--muted); max-width: 36vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.zoom-ctl {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--controls-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 35;
  display: flex;
  border: 1px solid var(--chrome-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--chrome-3);
  box-shadow: var(--shadow);
}
.zoom-ctl button { min-width: 42px; height: 38px; border: 0; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.zoom-ctl button + button { border-left: 1px solid var(--chrome-border); }

/* ---------- drawer (data summary) & sheets ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .4);
}
.drawer, .sheet {
  width: min(680px, 100%);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--chrome-3);
  color: var(--chrome-text);
  border-radius: 16px 16px 0 0;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  animation: up .18s ease-out;
}
.drawer { height: 88vh; }
@keyframes up { from { transform: translateY(24px); opacity: .6; } }
@media (min-width: 1000px) {
  .drawer-backdrop:not(.sheet-mode) { justify-content: flex-start; align-items: stretch; }
  .drawer { width: 460px; height: 100%; max-height: none; border-radius: 0; animation: left .18s ease-out; padding-top: 14px; }
  @keyframes left { from { transform: translateX(-24px); opacity: .6; } }
  .sheet-mode { align-items: center; }
  .sheet { border-radius: 14px; max-height: 80vh; }
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.drawer-head h2 { margin: 0; font-size: 18px; }
.sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--chrome-border); margin: 2px auto 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 10px 0; background: var(--chrome-2); border-radius: 10px; }
.seg [role="tab"] { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.seg [role="tab"][aria-selected="true"] { background: var(--chrome-3); color: var(--chrome-text); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.info-section { background: var(--chrome); border: 1px solid var(--chrome-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.info-section h3 { margin: 0 0 8px; font-size: 14.5px; }
.info-section dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14px; }
.info-section dt { color: var(--muted); }
.info-section dd { margin: 0; overflow-wrap: anywhere; }
.info-section ul { margin: 0; padding-left: 18px; font-size: 14px; }
.info-section .tscroll { border-radius: 6px; }
.meas-group { border-top: 1px solid var(--chrome-border); padding: 6px 0; font-size: 14px; }
.meas-group:first-of-type { border-top: 0; }
.meas-group summary { cursor: pointer; }
.meas-group ul { list-style: none; padding: 4px 0 0 8px; }
.meas-group li { padding: 2px 0; }
.meas-group .dot { margin-right: 6px; }
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; }
.warn { color: var(--danger); }

.field {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 12px 7px;
  background: var(--chrome); border: 1px solid var(--chrome-border); border-radius: 10px;
}
.field > span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.field select { border: 0; padding: 0; background: transparent; font-weight: 600; font-size: 15px; }
.row-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--chrome-border); border-radius: 999px;
  background: var(--chrome); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.hint { margin: 8px 2px; font-size: 12.5px; color: var(--muted); }
.empty-note { color: var(--muted); padding: 8px 2px; list-style: none; }

#runs-search { margin-top: 10px; width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--chrome-border); border-radius: 10px; background: var(--chrome); }
.sheet-actions { display: flex; justify-content: space-between; margin: 4px 0; }
.run-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.run-item label { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--chrome-border); cursor: pointer; }
.run-item input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.run-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.run-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-meta { font-size: 12.5px; color: var(--muted); }

/* ---------- PDF export ---------- */
.pdf-sheet { max-height: 92vh; overflow-y: auto; }
.opt-group { border: 1px solid var(--chrome-border); border-radius: 10px; margin: 0 0 10px; padding: 6px 12px 8px; }
.opt-group legend { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.opt input { width: 19px; height: 19px; accent-color: var(--accent); flex: none; }
.opt small { color: var(--muted); }
.btn.wide { width: 100%; margin-top: 4px; }
.pdf-progress, .pdf-done { display: grid; justify-items: center; gap: 12px; padding: 24px 0 12px; text-align: center; }
.pdf-done > svg { color: #1a9c3e; }
.pdf-done p { margin: 0; }
.row-btns.center { justify-content: center; }
#pdf-bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#pdf-btn span { font-size: 13.5px; }

/* off-screen stage where pages are laid out at full size for capture */
.export-stage { position: fixed; left: 0; top: 0; opacity: 0; pointer-events: none; z-index: -1; padding: 0; }
.export-stage .paper { position: relative !important; transform: none !important; }
.export .gtools, .export .axis-sel, .export .gcoord, .export .more-btn { display: none !important; }
.export .tscroll, .export .disp-body { overflow: hidden !important; }

/* ---------- image viewer ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  background: rgba(10, 12, 15, .94);
  color: #fff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.lightbox .icon-btn.light { position: absolute; top: calc(8px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); color: #fff; background: rgba(255,255,255,.12); z-index: 1; }
.lightbox-scroll { flex: 1; overflow: auto; display: grid; place-items: center; padding: 56px 8px 8px; touch-action: pan-x pan-y pinch-zoom; }
.lightbox-scroll img { max-width: 100%; max-height: 100%; background: #fff; }
.lightbox p { margin: 0; padding: 10px 16px 14px; text-align: center; font-size: 14px; }

/* ---------- misc ---------- */
.drop-overlay {
  position: fixed; inset: 12px; z-index: 95;
  display: grid; place-items: center;
  border: 3px dashed var(--accent); border-radius: 20px;
  background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
  color: var(--accent); font-size: 22px; font-weight: 700;
  pointer-events: none;
}
.toast {
  position: fixed; left: 50%;
  bottom: calc(var(--controls-h) + 16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 99;
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: 10px;
  background: #111827; color: #fff;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}