:root {
      --bg: #05070b;
      --panel: #09101b;
      --panel2: #0d1625;
      --line: #2a354b;
      --text: #f4f7ff;
      --muted: #9db0ce;
      --accent: #53c6ff;
      --ok: #27c46e;
      --danger: #ef4d4d;
      --warn: #f0bf5a;
      --link: #8ec4ff;
      /* Softer highlight so reading stays comfortable. */
 --highlight: rgba(255, 241, 138, 0.12);
    }
    html { font-size: 19px; }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, sans-serif;
      background: radial-gradient(1400px 850px at 22% -12%, #1e365d 0%, var(--bg) 45%);
      color: var(--text);
      min-height: 100vh;
      overflow: auto;
      padding: 0;
    }
    .page {
      width: 100vw;
      min-height: 100vh;
      height: 100vh;
      margin: 0;
      border: 1px solid var(--line);
      border-radius: 0;
      background: linear-gradient(180deg, rgba(9,16,27,.98), rgba(7,12,20,.99));
      overflow: hidden;
      box-shadow: none;
      display: grid;
      grid-template-rows: auto 1fr;
    }
    .top {
      border-bottom: 1px solid var(--line);
      padding: 16px 20px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .brand {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .logo {
      width: 120px;
      height: 100px;
      border-radius: 6px;
      border: 1px solid #27334a;
      background: #0b1422;
      overflow: hidden;
      flex: 0 0 auto;
    }
    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .title {
      font-size: clamp(1.6rem, 3.4vw, 3.6rem);
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0 0 4px;
    }
    .subtitle {
      color: var(--muted);
      margin: 0;
      font-size: clamp(1.0rem, 1.4vw, 2.6rem);
    }
    .top-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }
    .menu-line {
      color: #d4e3ff;
      font-size: 1.15rem;
      letter-spacing: .03em;
      white-space: nowrap;
    }
    .close-btn {
      border: 1px solid #3a4b66;
      background: #111822;
      color: #fff;
      border-radius: 7px;
      padding: 8px 14px;
      cursor: pointer;
    }
    .close-btn:hover { filter: brightness(1.08); }
    .clock {
      color: #d4e3ff;
      font-size: 1.15rem;
      letter-spacing: .03em;
      white-space: nowrap;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-variant-numeric: tabular-nums;
    }
    .body {
      display: grid;
      grid-template-columns: clamp(250px, 30vw, 332px) minmax(0, 1fr);
      min-height: 0;
      height: 100%;
    }
    .left {
      border-right: 1px solid var(--line);
      padding: 14px 12px 12px;
      background: linear-gradient(180deg, #070e18, #060c14);
      min-height: 0;
      overflow: auto;
      /* Slightly smaller than main reading pane to reduce visual weight. */
      font-size: 0.9rem;
    }
    .card {
      border: 1px solid var(--line);
      border-radius: 10px;
      margin-bottom: 14px;
      overflow: hidden;
      background: #08111d;
    }
    /* Make Reading Material feel like a separate section from Select Scripture. */
    .scripture-card { margin-bottom: 34px; }
    .reading-card { margin-top: 0; }
    .left .card:last-child {
      margin-bottom: 0;
    }

    .doc-jump {
      display: grid;
      gap: 10px;
    }
    .doc-jump-row {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }
    .doc-jump-label {
      color: #d2deef;
      font-size: 0.95rem;
    }
    .doc-jump-select {
      width: 100%;
    }
    .doc-jump-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 6px;
    }
    .card h3 {
      margin: 0;
      font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
      background: #000;
      padding: 8px 10px;
      font-weight: 600;
    }
    .card .content {
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .small-help {
      color: #c3d4ee;
      font-size: clamp(0.88rem, 0.84rem + 0.25vw, 0.98rem);
      line-height: 1.35;
      margin-bottom: 2px;
    }
    label {
      font-size: clamp(0.86rem, 0.82rem + 0.2vw, 0.96rem);
      color: #d2deef;
    }
    input, select, textarea, button {
      font-family: inherit;
      font-size: 1rem;
      color: var(--text);
      border: 1px solid #36435f;
      background: #0a1220;
      border-radius: 8px;
      padding: 8px 10px;
      outline: none;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(83,198,255,.18);
    }
    .btn {
      cursor: pointer;
      background: #30465c;
      border-color: #3b5573;
      color: #fff;
      font-weight: 600;
    }
    .btn:hover { filter: brightness(1.1); }
    .btn-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .left .card .content > * {
      min-width: 0;
    }
    .left .card .content input,
    .left .card .content select,
    .left .card .content textarea,
    .left .card .content button {
      width: 100%;
      max-width: 100%;
    }
    .left .card .content select.listbox {
      padding: 10px 10px;
      background: #061025;
    }
    .left .card .content .reading-browser {
      margin-top: 10px;
    }
    .left .card .content .reading-toolbar {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .left .card .content .reading-toolbar button {
      width: auto;
    }
    .left .card .content .reading-tree {
      border: 1px solid #36435f;
      border-radius: 8px;
      background: #061025;
      overflow: auto;
      padding: 6px;
      flex: 1 1 auto;
      min-height: 0;
    }
    .left .card .content details.tree-folder {
      margin: 4px 0;
    }
    .left .card .content summary.tree-summary {
      list-style: none;
      cursor: pointer;
      user-select: none;
      padding: 8px 8px;
      border-radius: 6px;
      color: var(--text);
      font-weight: 600;
    }
    .left .card .content summary.tree-summary::-webkit-details-marker {
      display: none;
    }
    .left .card .content details.tree-folder > summary.tree-summary::before {
      content: "▸";
      display: inline-block;
      width: 1em;
      color: #8ec4ff;
      margin-right: 4px;
    }
    .left .card .content details.tree-folder[open] > summary.tree-summary::before {
      content: "▾";
    }
    .left .card .content details.tree-folder > summary.tree-summary:hover {
      background: rgba(83, 198, 255, .10);
    }
    .left .card .content .tree-children {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 4px 0 6px 14px;
    }
    .left .card .content .tree-leaf {
      width: 100%;
      text-align: left;
      background: transparent;
      border: 0;
      border-radius: 6px;
      padding: 8px 10px;
      cursor: pointer;
      color: var(--text);
      font-weight: 500;
    }
    .left .card .content .tree-leaf:hover {
      background: rgba(83, 198, 255, .12);
    }
    .left .card .content .tree-leaf.active {
      background: rgba(83, 198, 255, .20);
      outline: 1px solid rgba(83, 198, 255, .25);
    }
    .left .card .content .tree-loading {
      color: var(--muted);
      padding: 6px 8px;
      font-size: .92rem;
    }
    .left .card .content .reading-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0 8px;
      color: #d2deef;
      font-size: .95rem;
    }
    .left .card .content .reading-head button {
      width: auto;
    }
    .left .card .content .reading-path {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .left .card .content .reading-list {
      border: 1px solid #36435f;
      border-radius: 8px;
      background: #061025;
      max-height: 260px;
      overflow: auto;
      padding: 4px;
    }
    .left .card .content .reading-row {
      width: 100%;
      text-align: left;
      background: transparent;
      border: 0;
      border-radius: 6px;
      padding: 10px 10px;
      cursor: pointer;
      color: var(--text);
      font-weight: 500;
    }
    .left .card .content .reading-row:hover {
      background: rgba(83, 198, 255, .12);
    }
    .left .card .content .reading-row.active {
      background: rgba(83, 198, 255, .20);
      outline: 1px solid rgba(83, 198, 255, .25);
    }
    .left .card .content .calendar-row {
      display: grid;
      grid-template-columns: 1fr 90px;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }
    .left .card .content .calendar-row select,
    .left .card .content .calendar-row input {
      width: 100%;
      max-width: 100%;
    }
    .main {
      padding: 12px 12px 8px;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto auto auto;
      gap: 10px;
      min-height: 0;
      height: 100%;
      overflow: hidden;
    }
    .reader {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #050a13;
      overflow: auto;
      min-height: 0;
      padding: 14px 16px;
      line-height: 1.55;
      font-size: 1.16rem;
    }
    .reader .meta {
      color: #b9d2f7;
      font-size: .95rem;
      margin-bottom: 10px;
      border-bottom: 1px solid #1d2a40;
      padding-bottom: 8px;
    }
    .reader .sentence {
      display: inline;
      transition: background-color .12s ease;
    }
    .reader .sentence.current {
      background: var(--highlight);
      border-radius: 4px;
      padding: 0 2px;
      box-shadow: inset 0 0 0 1px rgba(255, 241, 138, 0.25);
    }
    .reader .reader-content {
      white-space: normal;
      overflow-wrap: anywhere;
      line-height: 1.55;
    }
    .reader a {
      color: var(--link);
      text-decoration: underline;
      cursor: pointer;
    }
    .reader .qa-log {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .reader .qa-entry {
      border-bottom: 1px solid #1d2a40;
      padding-bottom: 12px;
    }
    .reader .qa-entry:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }
    .reader .qa-entry .meta {
      border-bottom: 0;
      padding-bottom: 0;
      margin-bottom: 8px;
      cursor: pointer;
    }
    .reader .doc-view {
      margin-top: 14px;
    }
    .controls {
      border-top: 0;
      border-bottom: 0;
      padding: 8px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mini {
      border: 1px solid #3b5573;
      border-radius: 8px;
      background: #213045;
      color: #fff;
      padding: 6px 12px;
      font-size: .96rem;
      cursor: pointer;
    }
    .small-info {
      color: #cde0ff;
      font-size: .95rem;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .ctl-sym {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      padding: 0 2px;
      font-weight: 700;
      color: #dfe9ff;
      cursor: pointer;
      user-select: none;
      border-radius: 4px;
    }
    .ctl-sym:hover,
    .ctl-sym:focus {
      color: #ffffff;
      background: rgba(83, 198, 255, 0.14);
      outline: none;
    }
    .rate-text-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 6px;
    }
    #rateLabel { display: none; }
    .model-line {
      margin-top: 4px;
      text-align: center;
      color: #8dd18d;
      font-size: 1.02rem;
      line-height: 1.2;
    }
    .qbox {
      border-top: 0;
      padding-top: 8px;
      display: grid;
      gap: 8px;
    }
    .qbox textarea {
      min-height: 96px;
      resize: vertical;
      line-height: 1.45;
    }
    .actions {
      display: flex;
      justify-content: space-between;
      gap: 28px;
      align-items: center;
      flex-wrap: wrap;
    }
    .actions-controls {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      min-width: 0;
    }
    .actions > button {
      height: 40px;
      padding: 6px 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    /* Bottom action buttons: noticeable but not shouty. */
    .actions .toggle,
    .actions .btn {
      font-size: 0.92rem;
    }
    .actions .btn.primary {
      min-width: 240px;
      font-weight: 800;
      background: #2c3b4e;
      border-color: #415972;
    }
    .toggle {
      min-width: 0px;
      width: 140px;
      text-align: center;
      font-weight: 700;
      color: #fff;
      border-radius: 8px;
      border: 1px solid #3b5573;
      background: #213045;
      padding: 6px 14px;
      cursor: pointer;
    }
    .toggle.on {
      border-color: #566b82;
      background: #2b3f59;
    }
    .status {
      text-align: center;
      color: var(--muted);
      font-size: .95rem;
      min-height: 20px;
    }
    .status.ok { color: var(--ok); }
    .status.warn { color: var(--warn); }
    .status.err { color: var(--danger); }
    .footer-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 2px;
      min-height: 20px;
    }
    .footer-row .status { text-align: center; }

    .reader-onboarding {
      max-width: 980px;
      margin: 2px auto 0;
      border: 1px solid #1d2a40;
      border-radius: 10px;
      background: #07111f;
      padding: 14px 16px;
    }
    .reader-onboarding h3 {
      margin: 0 0 8px;
      font-size: 1.1rem;
    }
    .reader-onboarding p { margin: 8px 0; }
    .reader-onboarding ol { margin: 8px 0 0 22px; }
    .reader-onboarding .muted {
      color: var(--muted);
      font-size: .92rem;
    }
    .reader-onboarding-versions { margin-top: 10px; }
    .reader-onboarding .versions-list {
      margin-top: 4px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }
    .menu-panel {
      display: none;
      position: absolute;
      right: 20px;
      top: 90px;
      width: min(420px, 90vw);
      z-index: 30;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #09111c;
      box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
      padding: 12px;
    }
    .menu-panel.open { display: block; }
    .menu-panel h4 {
      margin: 0 0 8px;
      font-size: 1rem;
    }
    .menu-panel p {
      margin: 4px 0;
      color: #c7d8f3;
      font-size: .92rem;
      line-height: 1.35;
    }
    .menu-settings {
      display: grid;
      gap: 8px;
      margin: 0 0 10px;
    }
    .menu-settings input[type="text"],
    .menu-settings input[type="password"] {
      width: 100%;
    }
    .menu-check {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.92rem;
      color: #d7e5ff;
    }
    .menu-note {
      margin: 0;
      color: #b8cae8;
      font-size: 0.85rem;
      line-height: 1.3;
    }
    .popup-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 50;
    }
    .popup {
      position: absolute;
      /* Default to a more square, desktop-like popup shape. */
      width: min(78vw, 780px);
      height: min(78vh, 780px);
      min-width: 360px;
      min-height: 260px;
      max-height: 82vh;
      border: 1px solid #384a67;
      background: #0a1220;
      border-radius: 10px;
      box-shadow: 0 20px 45px rgba(0,0,0,.5);
      resize: both;
      overflow: auto;
      pointer-events: auto;
    }
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      background: #111a2a;
      border-bottom: 1px solid #2b3b56;
      cursor: move;
      user-select: none;
      position: sticky;
      top: 0;
      z-index: 2;
    }
    .popup-title {
      font-weight: 600;
      color: #d6e4ff;
      margin-right: 8px;
    }
    .popup-close {
      border: 1px solid #415574;
      background: #1a2537;
      color: #fff;
      border-radius: 7px;
      padding: 4px 10px;
      cursor: pointer;
    }
    .popup-tools {
      display: flex;
      gap: 8px;
      padding: 8px 10px;
      background: #0e1726;
      border-bottom: 1px solid #2b3b56;
      position: sticky;
      top: 41px;
      z-index: 2;
    }
    .popup-tool {
      border: 1px solid #415574;
      background: rgba(83,198,255,.10);
      color: #fff;
      border-radius: 10px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: .92rem;
    }
    .popup-tool:hover {
      background: rgba(83,198,255,.16);
    }
    .popup-body {
      padding: 12px;
      white-space: pre-wrap;
      line-height: 1.5;
      font-size: 1.04rem;
      overflow-wrap: anywhere;
    }
    .popup-body a { color: var(--link); text-decoration: underline; }
    .popup-comments {
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px solid #1d2a40;
      color: #b9d2f7;
      font-size: 0.98rem;
      line-height: 1.35;
    }
    .popup-comments a { color: var(--link); text-decoration: underline; }

    /* Advanced scripture picker popup */
    .popup.scripture-advanced-popup .popup-body {
      white-space: normal;
      font-size: 1rem;
    }
    .popup.scripture-advanced-popup {
      width: min(92vw, 640px);
      height: min(76vh, 560px);
      min-width: 320px;
      min-height: 320px;
    }
    .adv-note {
      color: #b8cae8;
      font-size: 0.95rem;
      line-height: 1.35;
      margin-bottom: 12px;
    }
    .adv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: end;
    }
    .adv-grid label {
      display: block;
      margin-bottom: 6px;
      color: #d2deef;
    }
    .adv-input,
    .adv-select {
      width: 100%;
    }
    .adv-ref {
      grid-column: 1 / -1;
    }
    .adv-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 14px;
      align-items: center;
    }
    .adv-actions button {
      width: auto;
    }
    @media (max-width: 620px) {
      .adv-grid { grid-template-columns: 1fr; }
    }

/* Memory popup: keep actions visible (no scrolling required). */
.popup.memory-popup {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .popup.memory-popup .popup-body {
      flex: 1;
      overflow: hidden;
      padding: 0;
      white-space: normal;
    }
    .memory-manager {
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 12px;
    }
    .memory-tabs {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    .memory-tab {
      border: 1px solid #415574;
      background: #111822;
      color: #fff;
      border-radius: 10px;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 0.95rem;
    }
    .memory-tab.active {
      border-color: rgba(83,198,255,.55);
      background: rgba(83,198,255,.14);
    }
    .memory-main {
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: clamp(220px, 32%, 320px) minmax(0, 1fr);
      gap: 12px;
    }
    .memory-left,
    .memory-right {
      min-height: 0;
      border: 1px solid #2f4260;
      border-radius: 10px;
      background: #08111d;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .memory-label {
      font-size: 0.95rem;
      color: #d6e4ff;
    }
    .memory-list {
      width: 100%;
      flex: 1;
      min-height: 0;
      border: 1px solid #2f4260;
      border-radius: 8px;
      padding: 6px 8px;
      background: #0d1727;
      color: #f4f7ff;
      font-size: 0.98rem;
    }
    .memory-left-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .memory-row {
      display: grid;
      gap: 6px;
    }
    .memory-row label {
      font-size: 0.92rem;
      color: #d6e4ff;
    }
    .memory-row input,
    .memory-row textarea {
      width: 100%;
      border: 1px solid #2f4260;
      border-radius: 8px;
      padding: 8px 10px;
      background: #0d1727;
      color: #f4f7ff;
      font-size: 0.98rem;
    }
    .memory-editor-row {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .memory-editor-row textarea {
      flex: 1;
      min-height: 180px;
      resize: vertical;
      line-height: 1.4;
      font-family: "Segoe UI", Tahoma, sans-serif;
    }
    .memory-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .memory-actions .mini {
      white-space: nowrap;
    }
    .mini.danger {
      border-color: #784545;
      background: #402323;
    }
    .mini.danger:hover {
      background: #542d2d;
    }
    .memory-status {
      font-size: 0.92rem;
      color: #c4d4ee;
      min-height: 20px;
    }
    .memory-status.ok { color: #7be495; }
    .memory-status.warn { color: #ffd166; }
.memory-status.err { color: #ff7070; }

/* Library popup: full-height browsing so nothing feels "missing" on smaller screens. */
.popup.library-popup {
  width: min(980px, 96vw);
  height: min(760px, 90vh);
}
.popup.library-popup .popup-body {
  padding: 12px;
}
.library-manager {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.library-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.library-search {
  flex: 1;
  min-width: 240px;
  padding: 10px 10px;
  background: #061025;
  border: 1px solid #36435f;
  border-radius: 8px;
  color: var(--text);
}
.library-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.library-browser {
  flex: 1;
  min-height: 0;
  border: 1px solid #36435f;
  border-radius: 8px;
  background: #061025;
  overflow: auto;
  padding: 6px;
}
.library-heading {
  margin: 8px 6px 4px;
  font-size: .92rem;
  color: var(--muted);
  font-weight: 700;
}
.library-status {
  color: var(--muted);
  font-size: .92rem;
}

/* Reuse the same tree look inside the library popup (not scoped to the left pane). */
.library-browser details.tree-folder {
  margin: 4px 0;
}
.library-browser summary.tree-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 8px 8px;
  border-radius: 6px;
  color: var(--text);
  font-weight: 600;
}
.library-browser summary.tree-summary::-webkit-details-marker {
  display: none;
}
.library-browser details.tree-folder > summary.tree-summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: #8ec4ff;
  margin-right: 4px;
}
.library-browser details.tree-folder[open] > summary.tree-summary::before {
  content: "▾";
}
.library-browser details.tree-folder > summary.tree-summary:hover {
  background: rgba(83, 198, 255, .10);
}
.library-browser .tree-children {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 6px 14px;
}
.library-browser .tree-leaf {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
}
.library-browser .tree-leaf:hover {
  background: rgba(83, 198, 255, .12);
}
.library-browser .tree-loading {
  color: var(--muted);
  padding: 6px 8px;
  font-size: .92rem;
}
    @media (min-width: 768px) and (max-width: 1024px) {
      .body {
        grid-template-columns: clamp(235px, 31vw, 300px) minmax(0, 1fr);
      }
      .small-info {
        font-size: 0.9rem;
        gap: 8px;
      }
      .actions { gap: 18px; }
      .actions .btn.primary { min-width: 220px; }
      .toggle { width: 120px; }
    }
    @media (max-width: 767px) {
      .body { grid-template-columns: 1fr; }
      .left {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        max-height: 50vh;
        overflow: auto;
      }
      .actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }
      .actions .btn.primary {
        width: 100%;
        min-width: 0;
      }
      .actions-controls {
        width: 100%;
        justify-content: space-between;
      }
      .actions-controls .toggle {
        width: auto;
        flex: 1 1 0;
      }
      .top-right { align-items: flex-start; }
      .main {
        grid-template-rows: minmax(280px, 1fr) auto auto auto;
      }
      .reader {
        min-height: 280px;
      }
      .reader-onboarding {
        max-width: none;
        padding: 12px 12px;
      }
    }
    @media (max-height: 860px) {
      .top { padding: 10px 14px; }
      .logo { width: 56px; height: 56px; }
      .title { margin-bottom: 2px; }
      .subtitle { font-size: .98rem; }
      .main { padding: 8px; gap: 8px; }
      .reader { padding: 10px 12px; }
      .qbox textarea { min-height: 74px; }
    }