/* Load — Run Web Apps on iPad (PWA)
   Copyright (c) 2026 LBond. All Rights Reserved.

   Unauthorized reproduction, modification, distribution, or
   commercial use is strictly prohibited. See LICENSE at the
   repository root for the full terms. */

/* ------------- Dyslexia-friendly fonts (bundled locally) ------------- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-400.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/atkinson-700.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/opendyslexic-400.woff2") format("woff2");
}
@font-face {
  font-family: "OpenDyslexic";
  font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/opendyslexic-700.woff2") format("woff2");
}

:root {
  /* Dyslexia-friendly defaults. Larger base size, generous line and
     letter spacing, high-contrast neutrals, violet accent. Applied
     everywhere unless overridden. */
  --bg-0: #14142a;
  --bg-1: #1a1a2e;
  --bg-2: #222238;
  --bg-3: #2d2d55;
  --border: #2a2a42;
  --ink-hi: #f5f5f8;    /* brighter than the old #e8e8ee for legibility */
  --ink-mid: #c8c8dc;
  --ink-low: #8a8aa6;
  --accent: #7c7cff;
  --accent-hi: #9c9cff;
  --good: #4aa04a;
  --danger: #cc3f55;
}

* { box-sizing: border-box; }

/* No more 1.5s fade-out splash — the Home screen IS the splash now. */

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: var(--bg-0); color: var(--ink-hi);
  /* Atkinson Hyperlegible is the default — designed by the Braille
     Institute specifically for low-vision and dyslexia users.
     OpenDyslexic is available too and can be switched on in settings.
     System fonts as the ultimate fallback. */
  font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;                  /* larger baseline than iOS 14-16px */
  line-height: 1.75;                /* generous leading */
  letter-spacing: 0.015em;          /* slight tracking helps crowding */
  word-spacing: 0.1em;               /* separates words clearly */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
body.dyslexic-font {
  /* Toggle available in settings to swap to OpenDyslexic across the
     entire UI. Not the default because some users prefer Atkinson. */
  font-family: "OpenDyslexic", "Atkinson Hyperlegible", -apple-system, sans-serif;
}
button { font-family: inherit; cursor: pointer; font-size: inherit; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Italic is hard to read with dyslexia — avoid by default. Bold for emphasis. */
em, i { font-style: normal; font-weight: 700; color: var(--ink-hi); }

h1, h2, h3, h4 { line-height: 1.3; letter-spacing: 0.01em; }

/* Explicit minimum tap targets — all interactive elements >= 48px. */
button, .tap, [role="button"] { min-height: 48px; }

/* ------------- Screens ------------- */
.screen {
  position: fixed; inset: 0; display: none;
  background: #14142a;
  overflow: auto;
}
.screen.on { display: block; }

/* No background watermark — the screens stay solid dark per user preference. */

/* ------------- Home screen (Attain-style: splash + two buttons) ------------- */
#home-screen {
  display: block;
  overflow-y: auto;
  background: linear-gradient(160deg, #0f0f2e 0%, #1a1a3e 40%, #2a1a3e 100%);
  color: #f0f0ff;
  min-height: 100vh;
}
#home-body {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 40px;
  text-align: center;
}

/* Shared top navigation bar — shown on every main screen so the user
   can always get home or back to the library. */
.app-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(20, 20, 42, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  /* Allow horizontal scroll when icons overflow on iPad portrait
     so every tool stays reachable. Right-edge fade hints at scroll. */
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 92%, rgba(0,0,0,0.35) 100%);
          mask-image: linear-gradient(to right, #000 92%, rgba(0,0,0,0.35) 100%);
}
.app-topbar::-webkit-scrollbar { display: none; }
.app-topbar > * { flex-shrink: 0; }
.app-topbar .spacer { flex: 1; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px;
  background: transparent; color: var(--ink-mid); border: none;
  font-size: 15px; font-weight: 600;
  min-height: 44px;
}
.nav-btn .nav-icon { font-size: 18px; }
.nav-btn .nav-label { font-size: 14px; }
.nav-btn:active { background: var(--bg-3); }
.nav-btn.active {
  background: var(--bg-3); color: var(--ink-hi);
}
.nav-btn.icon-only {
  padding: 10px 10px; min-width: 44px;
  font-size: 17px;
}
/* On narrower iPads, hide the text labels so the icons still fit */
@media (max-width: 820px) {
  .nav-btn .nav-label { display: none; }
  .nav-btn { padding: 10px 10px; gap: 0; }
}

/* Splash image — Attain pattern: 100% of content width up to 600px,
   centered, natural aspect ratio. Nothing cropped. */
.splash-img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.home-hero-fallback {
  display: none; text-align: center; color: #f0f0ff;
  padding: 60px 30px; max-width: 500px; margin: 40px auto 0;
}

/* Big gradient action buttons underneath the splash, like Attain's
   "Upload a Book" / "Next Page" pair. */
.home-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 24px 16px;
  width: 100%;
}
.big-action {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff; border: none;
  padding: 18px 36px; border-radius: 12px;
  font-size: 17px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
  letter-spacing: 0.3px;
}
.big-action:active { transform: scale(0.97); }
.big-action.secondary {
  background: linear-gradient(135deg, #059669, #0891b2);
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.25);
}
.big-action.pwa-solid {
  background: linear-gradient(135deg, #8b1f99, #4a1866);
  box-shadow: 0 4px 16px rgba(139, 31, 153, 0.3);
}
.big-action.create {
  background: linear-gradient(135deg, #d9551a, #8f3710);
  box-shadow: 0 4px 16px rgba(217, 85, 26, 0.3);
}

/* ------------- Create screen ------------- */
#create-screen {
  display: none;
  background: linear-gradient(160deg, #0f0f2e 0%, #1a1a3e 40%, #2a1a3e 100%);
  color: #f0f0ff;
  overflow-y: auto;
}
#create-screen.on { display: block; }
.create-body {
  max-width: 760px; margin: 0 auto;
  padding: 24px 20px 40px;
  display: flex; flex-direction: column; gap: 8px;
}
.create-intro {
  font-size: 15px; line-height: 1.7; color: var(--ink-mid);
  padding: 12px 16px;
  background: rgba(124, 124, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin: 0 0 20px;
}
.create-label {
  display: block; margin: 16px 0 6px;
  font-size: 13px; color: var(--ink-mid);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.create-hint {
  font-size: 13px; color: var(--ink-low); line-height: 1.6;
  margin: 0 0 8px;
}
.create-hint code {
  background: var(--bg-3); padding: 1px 6px; border-radius: 4px;
  font-size: 12px; color: var(--accent-hi);
}
.create-templates { margin-bottom: 8px; }

/* ACR Reader template feature toggles */
.acr-template-options {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; margin: 8px 0 16px;
}
.acr-template-options .tpl-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; font-size: 15px; color: var(--ink-hi);
  cursor: pointer;
}
.acr-template-options input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent);
}
#create-user-templates:empty { display: none !important; }
#create-user-templates .seg-btn .remove-tpl {
  margin-left: 8px; opacity: 0.6; padding: 2px 6px;
  border-radius: 4px; background: rgba(204,63,85,0.20);
  color: #ff8a8a; border: none; font-size: 12px;
}
.create-title-input {
  width: 100%; padding: 14px 16px;
  background: var(--bg-2); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  font-size: 18px; font-weight: 700;
  font-family: inherit; letter-spacing: inherit;
  -webkit-appearance: none;
}
.create-title-input:focus { outline: none; border-color: var(--accent); }
.create-body-input {
  width: 100%; min-height: 300px;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  padding: 14px 16px;
  font-size: 16px; line-height: 1.75;
  font-family: inherit; letter-spacing: inherit;
  resize: vertical; -webkit-appearance: none;
}
.create-body-input:focus { outline: none; border-color: var(--accent); }
.create-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px;
  justify-content: flex-end;
}
.create-actions button { min-height: 48px; padding: 12px 20px; }
.big-action .ba-icon { font-size: 22px; line-height: 1; }
.big-action .ba-text { }

.splash-title {
  margin: 0; font-size: 56px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hi) 50%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Unregistered trademark mark — small superscript so it doesn't
   compete visually with the brand name. Visible enough for legal
   notice; quiet enough for reading comfort. */
.tm-mark {
  font-size: 0.32em; font-weight: 400; letter-spacing: 0;
  vertical-align: super; margin-left: 2px;
  color: var(--ink-mid); -webkit-text-fill-color: currentColor;
}
.splash-tag { margin: 10px 0 0; font-size: 16px; color: var(--ink-mid); letter-spacing: 2px; text-transform: uppercase; }
.splash-arrow { font-size: 64px; line-height: 1; color: var(--accent); margin-bottom: 14px; }

.home-actions {
  padding: 32px 24px 16px;
  max-width: 820px; margin: 0 auto;
  text-align: center;
}
.home-heading {
  margin: 0 0 24px; font-size: 22px;
  color: var(--ink-hi); line-height: 1.4;
  font-weight: 600;
}
.home-btn-row {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .home-btn-row { grid-template-columns: 1fr 1fr; }
}
.big-btn {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 16px;
  background: var(--bg-2); color: var(--ink-hi);
  border: 2px solid var(--border);
  font-size: 17px; text-align: left;
  min-height: 80px;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.big-btn:active { transform: scale(0.98); }
.big-btn:hover, .big-btn:focus-visible { border-color: var(--accent); }
.big-btn.primary {
  background: linear-gradient(135deg, var(--accent), #5a5ae0);
  color: var(--bg-0);
  border-color: transparent;
}
.big-btn.pwa-btn {
  background: linear-gradient(135deg, #4a2466, #2a1244);
  color: #fff;
  border-color: #5a2e7a;
}
.big-btn-icon { font-size: 36px; line-height: 1; flex-shrink: 0; }
.big-btn-text { display: flex; flex-direction: column; gap: 4px; }
.big-btn-label { font-size: 18px; font-weight: 700; letter-spacing: 0.3px; }
.big-btn-sub { font-size: 14px; opacity: 0.85; font-weight: 400; }

/* Type boxes — colored file-type filter cards */
.home-types, .home-recent, .home-workspace {
  padding: 8px 24px 32px; max-width: 820px; margin: 0 auto;
}
.home-workspace { padding-bottom: 16px; }
.home-ws-row {
  display: grid; gap: 12px;
  /* Always 2x2 on iPad — feels balanced, no awkward single column. */
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 820px) {
  /* Wider desktops can fit all four side-by-side. */
  .home-ws-row { grid-template-columns: repeat(4, 1fr); }
}
.home-ws-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink-hi);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 84px;
}
.home-ws-tile:active { transform: scale(0.97); }
.home-ws-tile:hover { border-color: var(--accent); }
.home-ws-icon { font-size: 22px; }
.home-ws-label { font-size: 14px; font-weight: 700; color: var(--ink-hi); }
.home-ws-dir { font-size: 12px; color: var(--ink-mid); line-height: 1.4; }
.home-section-title {
  font-size: 14px; color: var(--ink-mid);
  text-transform: uppercase; letter-spacing: 2px;
  margin: 24px 0 14px; font-weight: 700;
}
.type-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.type-card {
  background: var(--bg-2);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px 16px;
  color: var(--ink-hi);
  display: flex; flex-direction: column; gap: 6px;
  position: relative; min-height: 140px;
  text-align: left;
}
.type-card:active { transform: scale(0.97); }
.type-icon { font-size: 32px; margin-bottom: 4px; }
.type-label { font-size: 17px; font-weight: 700; }
.type-sub { font-size: 12px; color: var(--ink-mid); line-height: 1.4; }
.type-count {
  position: absolute; top: 14px; right: 16px;
  background: rgba(255,255,255,0.12);
  color: var(--ink-hi);
  padding: 3px 10px; border-radius: 10px;
  font-size: 13px; font-weight: 700; min-width: 28px; text-align: center;
}
.type-html { background: linear-gradient(135deg, #3a2a6e, #1f1742); border-color: #4a3a88; }
.type-zip { background: linear-gradient(135deg, #4a2466, #2a1244); border-color: #5a2e7a; }
.type-pdf { background: linear-gradient(135deg, #6e2e2a, #3a1a18); border-color: #883a36; }
.type-epub { background: linear-gradient(135deg, #1f5a48, #0e3024); border-color: #2e7a60; }
.type-manuscript { background: linear-gradient(135deg, #2a4a8c, #142654); border-color: #3a5fae; }
.type-media { background: linear-gradient(135deg, #c2410c, #6b1f07); border-color: #d9551a; }
.type-video-edit { background: linear-gradient(135deg, #6e2e8a, #3a1844); border-color: #883aae; }
.type-workspace { background: linear-gradient(135deg, #0c5e6e, #07343c); border-color: #1a8aa6; }

.home-recent-row {
  display: flex; overflow-x: auto; gap: 12px; padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}
.home-recent-row .mini-tile {
  flex: 0 0 auto; width: 160px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink-hi); text-align: left;
}
.mini-tile-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.mini-tile-meta { font-size: 11px; color: var(--ink-mid); margin-top: auto; }

.link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); }
.link:hover { color: var(--accent-hi); border-color: var(--accent-hi); }

/* ------------- Settings side panel ------------- */
.side-panel {
  position: fixed; right: -420px; top: 0; bottom: 0;
  width: min(420px, 90vw);
  background: var(--bg-1); border-left: 1px solid var(--border);
  z-index: 110; padding: 20px 22px;
  overflow-y: auto;
  transition: right 0.25s ease;
  padding-top: max(20px, env(safe-area-inset-top));
}
.side-panel.on { right: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.panel-head h3 { margin: 0; font-size: 18px; color: var(--accent); flex: 1; }
.panel-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.panel-section:last-of-type { border-bottom: none; }
.panel-section h4 { margin: 0 0 6px; font-size: 15px; color: var(--ink-hi); }
.panel-hint { margin: 0 0 12px; font-size: 13px; color: var(--ink-mid); line-height: 1.5; }
.seg-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-btns.wrap { flex-wrap: wrap; }
.seg-btn {
  flex: 1 0 auto; min-width: 80px;
  padding: 12px 14px; background: var(--bg-2); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  font-size: 14px; font-weight: 600; min-height: 44px;
}
.seg-btn:active { transform: scale(0.97); }
.seg-btn.active { background: var(--accent); color: var(--bg-0); border-color: var(--accent); }
.seg-btn.full { width: 100%; flex: unset; }
.panel-footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-low); text-align: center; }

/* ------------- Themes — body classes applied from settings ------------- */
body.theme-cream  { background: #f4eadc; color: #3a2e1e; }
body.theme-sepia  { background: #f0dab7; color: #4a361c; }
body.theme-blue   { background: #d4e8f8; color: #1a3a52; }
body.theme-contrast { background: #000; color: #ffec00; }
body.theme-cream .screen, body.theme-sepia .screen,
body.theme-blue .screen { background: inherit; color: inherit; }
body.theme-contrast .screen { background: #000; color: #ffec00; }
body.theme-contrast a, body.theme-contrast .link { color: #00ffff; }

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  transition: none !important;
  animation-duration: 0.001ms !important;
}

/* ------------- Editor screen (HTML source editor) ------------- */
.editor-screen { display: none; flex-direction: column; }
.editor-screen.on { display: flex; }
.editor-title {
  flex: 1; font-size: 14px; color: var(--ink-hi); text-align: center;
  padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.editor-body {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  min-height: 0;
}
.editor-hint {
  background: rgba(124, 124, 255, 0.10);
  border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 6px;
  font-size: 14px; color: var(--ink-mid); line-height: 1.6;
  margin: 0;
}
#editor-textarea {
  flex: 1; min-height: 0;
  width: 100%;
  background: #0e0e22; color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  padding: 16px;
  font-family: "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;
  font-size: 16px; line-height: 1.8;
  letter-spacing: 0.03em;
  resize: none;
  -webkit-appearance: none;
  tab-size: 2;
}
#editor-textarea:focus { outline: none; border-color: var(--accent); }
/* Theme variants for the editor (toggled via data-editor-theme buttons) */
#editor-textarea.editor-theme-cream { background: #f5efe3; color: #2a2218; border-color: #d9ceb8; }
#editor-textarea.editor-theme-high  { background: #000; color: #ffec00; border-color: #444; }

/* Copilot-style inline suggestion strip for the editor */
.editor-suggest {
  display: none; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
}
.editor-suggest.on { display: flex; flex-wrap: wrap; }
.editor-suggest .suggest-main {
  flex: 1; min-width: 200px;
  text-align: left; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(124,124,255,0.18), rgba(64,64,180,0.12));
  color: var(--ink-hi);
  border: 1px dashed var(--accent); border-radius: 8px;
  font-family: "SFMono-Regular", Menlo, monospace; font-size: 13.5px;
  line-height: 1.5; min-height: 44px;
  white-space: pre-wrap; word-break: break-word;
  cursor: pointer;
}
.editor-suggest .suggest-main:empty::before {
  content: 'Keep typing — suggestions appear here.';
  font-family: inherit; font-style: italic; opacity: 0.6;
}
.editor-suggest .suggest-main .ghost {
  color: var(--accent); opacity: 0.9;
}
.editor-suggest .suggest-main .kbd {
  float: right; font-size: 11px; opacity: 0.7;
  background: var(--bg-0); padding: 2px 6px; border-radius: 4px;
  font-family: inherit; margin-left: 8px;
}
.editor-suggest .suggest-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.editor-suggest .suggest-chip {
  background: var(--bg-0); color: var(--ink-hi);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 12px; font-size: 12.5px;
  font-family: "SFMono-Regular", Menlo, monospace;
  min-height: 36px; cursor: pointer;
}
.editor-suggest .suggest-chip:active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ------------- Library search bar ------------- */
.search-bar {
  display: none;
  align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.search-bar.on { display: flex; }
.search-bar input[type=search] {
  flex: 1; padding: 12px 14px;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  font-size: 16px; -webkit-appearance: none;
  font-family: inherit; letter-spacing: inherit;
}
.search-bar input[type=search]:focus { outline: none; border-color: var(--accent); }

/* ------------- TTS drawer (read aloud controls in viewer) ------------- */
.tts-drawer {
  position: fixed; bottom: -280px; left: 0; right: 0;
  background: var(--bg-1); border-top: 1px solid var(--border);
  padding: 16px 18px max(18px, env(safe-area-inset-bottom));
  z-index: 70; transition: bottom 0.25s ease;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
}
.tts-drawer.on { bottom: 0; }
.tts-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.tts-row:last-child { margin-bottom: 0; }
.tts-label {
  font-size: 14px; color: var(--ink-mid); min-width: 60px; font-weight: 600;
}
.tts-btn {
  background: var(--bg-3); color: var(--ink-hi); border: none;
  padding: 12px 18px; border-radius: 10px; font-size: 15px; font-weight: 600;
  min-height: 48px;
}
.tts-btn.primary { background: var(--accent); color: var(--bg-0); }
.tts-btn:active { transform: scale(0.97); }
.tts-select {
  flex: 1; padding: 10px 12px;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 8px;
  font-size: 15px; font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.tts-status {
  font-size: 13px; color: var(--ink-mid);
  text-align: center; margin-top: 6px;
}

/* ------------- Developer Console drawer ------------- */
.console-drawer {
  position: fixed; bottom: -440px; left: 0; right: 0;
  max-height: 60vh; height: 440px;
  background: var(--bg-1); border-top: 2px solid var(--accent);
  z-index: 75; display: flex; flex-direction: column;
  transition: bottom 0.25s ease;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.5);
}
.console-drawer.on { bottom: 0; }
.console-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.console-head h3 {
  flex: 1; margin: 0; font-size: 14px; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.5px;
}
.console-log {
  flex: 1; overflow-y: auto;
  padding: 8px 14px;
  font-family: "SFMono-Regular", Menlo, "DejaVu Sans Mono", monospace;
  font-size: 14px; line-height: 1.6;
  letter-spacing: 0.02em;
  background: #0e0e22;
}
.console-log:empty::before {
  content: "No output yet. Logs and errors from your app will appear here.";
  color: var(--ink-low); font-family: inherit;
}
.console-entry {
  padding: 6px 10px; margin-bottom: 4px;
  border-radius: 6px; word-break: break-word;
  white-space: pre-wrap;
}
.console-entry.log   { background: rgba(124, 124, 255, 0.08); color: var(--ink-hi); border-left: 3px solid var(--accent); }
.console-entry.info  { background: rgba(8, 145, 178, 0.10); color: var(--ink-hi); border-left: 3px solid #0891b2; }
.console-entry.warn  { background: rgba(224, 160, 64, 0.12); color: #f0d090; border-left: 3px solid #e0a040; }
.console-entry.error { background: rgba(204, 63, 85, 0.15); color: #ffb0b8; border-left: 3px solid var(--danger); }
.console-entry .tag {
  font-size: 11px; opacity: 0.7; text-transform: uppercase;
  letter-spacing: 1px; margin-right: 8px; font-weight: 700;
}
.console-input-row {
  display: flex; gap: 8px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.console-input-row input {
  flex: 1; padding: 10px 12px;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 8px;
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: 14px; -webkit-appearance: none;
}
.console-input-row input:focus { outline: none; border-color: var(--accent); }
.console-input-row button { min-height: 44px; padding: 8px 16px; }

/* Scan / Log tab switcher inside the console drawer. Default: Scan on,
   Log hidden. Switching toggles the .on class on each panel. */
.console-scan, .console-logview {
  flex: 1; overflow-y: auto; display: none;
}
.console-scan.on, .console-logview.on { display: flex; flex-direction: column; }
.console-scan {
  padding: 14px 16px max(14px, env(safe-area-inset-bottom));
  gap: 12px;
}
.scan-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.scan-row .primary-btn, .scan-row .seg-btn {
  min-height: 44px; padding: 10px 14px;
}
.scan-hint {
  font-size: 15px; line-height: 1.6; color: var(--ink-mid);
  margin: 0; padding: 12px 14px;
  background: rgba(124, 124, 255, 0.08);
  border-left: 3px solid var(--accent); border-radius: 6px;
}
.scan-report {
  display: flex; flex-direction: column; gap: 10px;
}
.scan-item {
  padding: 12px 14px; border-radius: 8px;
  background: var(--bg-0); border: 1px solid var(--border);
  line-height: 1.6;
}
.scan-item.ok    { border-left: 4px solid #2bb673; }
.scan-item.warn  { border-left: 4px solid #e0a040; background: rgba(224, 160, 64, 0.06); }
.scan-item.error { border-left: 4px solid var(--danger); background: rgba(204, 63, 85, 0.08); }
.scan-item.info  { border-left: 4px solid #0891b2; }
.scan-item.ai-fix-card { border-left: 4px solid var(--accent); background: rgba(140, 120, 255, 0.08); }
/* Action buttons embedded inside scan-item details (Google Fonts
   embed, AI rewrite, etc.). Kept chunky enough to tap on iPad. */
.scan-action {
  margin-top: 8px; padding: 10px 14px;
  background: transparent; color: var(--ink-hi);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
}
.scan-action:active { transform: scale(0.98); background: var(--bg-2); }
.scan-action.scan-action-primary {
  background: var(--accent); color: var(--bg-0); border-color: var(--accent);
}
.scan-action-note {
  display: block; font-size: 12px; color: var(--ink-mid); margin-top: 4px;
}
.scan-item .label {
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.scan-item .detail {
  font-size: 14px; color: var(--ink-mid);
}
.scan-item .detail code {
  background: var(--bg-1); padding: 2px 6px; border-radius: 4px;
  font-size: 13px;
}
.scan-summary {
  padding: 14px 16px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(124,124,255,0.14), rgba(64,64,180,0.08));
  border: 1px solid var(--accent);
  font-size: 15px; line-height: 1.7;
}
.scan-summary strong { color: var(--accent); }
.console-head .seg-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.import-error-body {
  padding: 14px 16px; border-radius: 8px;
  background: rgba(204, 63, 85, 0.10);
  border-left: 4px solid var(--danger);
  font-size: 15px; line-height: 1.7; color: var(--ink-hi);
  margin: 6px 0 20px;
}
.patch-preview-box {
  max-width: 820px; max-height: 86vh; overflow-y: auto;
}
.patch-preview-list {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 60vh; overflow-y: auto;
  padding: 4px;
}
.patch-row {
  padding: 12px 14px; border-radius: 8px;
  background: var(--bg-0); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
}
.patch-label { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.patch-detail {
  font-size: 13px; color: var(--ink-mid); line-height: 1.5;
  margin-bottom: 8px;
}
.patch-diff {
  display: flex; flex-direction: column; gap: 6px;
  font-family: "SFMono-Regular", Menlo, monospace; font-size: 12px;
}
.patch-diff .diff-before, .patch-diff .diff-after {
  padding: 8px 10px; border-radius: 6px;
  white-space: pre-wrap; word-break: break-word;
  overflow-x: auto;
}
.patch-diff .diff-before {
  background: rgba(204, 63, 85, 0.10);
  border-left: 3px solid var(--danger);
}
.patch-diff .diff-after {
  background: rgba(43, 182, 115, 0.10);
  border-left: 3px solid #2bb673;
}
.patch-diff span {
  display: inline-block; font-size: 10px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  margin-bottom: 4px; font-weight: 700;
}
.patch-diff .diff-before span { background: var(--danger); color: #fff; }
.patch-diff .diff-after span  { background: #2bb673; color: #fff; }
.patch-diff-none {
  font-size: 13px; color: var(--ink-mid); font-style: italic;
}

/* ------------- Notes drawer ------------- */
.notes-drawer {
  position: fixed; top: 0; bottom: 0; right: -520px;
  width: min(520px, 92vw);
  background: var(--bg-1); border-left: 1px solid var(--border);
  z-index: 120; padding: 18px 20px;
  display: flex; flex-direction: column;
  transition: right 0.25s ease;
  padding-top: max(18px, env(safe-area-inset-top));
}
.notes-drawer.on { right: 0; }
.notes-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.notes-head h3 { margin: 0; color: var(--accent); font-size: 18px; }
.notes-app-name { flex: 1; font-size: 14px; color: var(--ink-mid); }
.notes-drawer textarea {
  flex: 1; width: 100%;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  padding: 14px;
  font-size: 16px; line-height: 1.7;
  font-family: inherit; letter-spacing: inherit;
  resize: none; -webkit-appearance: none;
  min-height: 200px;
}
.notes-drawer textarea:focus { outline: none; border-color: var(--accent); }
.notes-actions {
  margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end;
}

/* Bookmarks list inside the drawer */
.bookmarks-list { display: flex; flex-direction: column; gap: 10px; }
.bookmark-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 12px 14px; border-radius: 10px;
}
.bookmark-row .bm-label {
  flex: 1; font-size: 15px; color: var(--ink-hi);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookmark-row .bm-time {
  font-size: 12px; color: var(--ink-mid);
}
.bookmark-row button {
  background: var(--bg-3); color: var(--ink-hi); border: none;
  padding: 8px 12px; border-radius: 6px; font-size: 13px; min-height: 38px;
}
.bookmark-row button.danger { color: #ff8a8a; }
.aid-metric {
  flex: 1; color: var(--ink-hi); font-weight: 700; font-size: 15px;
}
.per-theme-btn.active { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ------------- Folders list (in settings panel) ------------- */
.folder-list { display: flex; flex-direction: column; gap: 8px; }
.folder-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 10px 12px; border-radius: 10px;
}
.folder-row .f-color {
  width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
}
.folder-row .f-name {
  flex: 1; color: var(--ink-hi); font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.folder-row .f-count {
  font-size: 12px; color: var(--ink-mid);
  padding: 2px 8px; background: var(--bg-3); border-radius: 8px;
}
.folder-row button {
  background: none; color: var(--ink-mid); border: none;
  font-size: 15px; padding: 6px 8px; min-height: 38px; min-width: 38px;
}
.folder-row button.danger { color: #ff8a8a; }

/* ------------- Library filter chips ------------- */
.library-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg-0);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.chip {
  background: var(--bg-2); color: var(--ink-mid);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  min-height: 36px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip:active { transform: scale(0.95); }
.chip.active {
  background: var(--accent); color: var(--bg-0);
  border-color: var(--accent);
}
.chip .chip-count {
  font-size: 11px; opacity: 0.8; padding: 1px 6px;
  background: rgba(0, 0, 0, 0.2); border-radius: 10px;
}
.chip.active .chip-count {
  background: rgba(255, 255, 255, 0.2);
}

/* ------------- Notes screen ------------- */
.title-inline { font-size: 16px; color: var(--ink-hi); font-weight: 700; letter-spacing: 0.5px; }
.notes-screen-body { padding: 20px 24px 60px; max-width: 900px; margin: 0 auto; }
.notes-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 10px;
}
.note-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
  min-height: 120px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.note-card:active { transform: scale(0.98); }
.note-card .nc-badge {
  display: inline-block; font-size: 11px;
  padding: 3px 8px; border-radius: 8px;
  background: var(--bg-3); color: var(--ink-mid);
  letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700;
  align-self: flex-start;
}
.note-card .nc-badge.linked { background: rgba(124, 124, 255, 0.2); color: var(--accent-hi); }
.note-card .nc-title {
  font-size: 16px; font-weight: 700; color: var(--ink-hi);
  line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.note-card .nc-preview {
  font-size: 13px; color: var(--ink-mid); line-height: 1.5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.note-card .nc-meta { font-size: 11px; color: var(--ink-low); margin-top: auto; }

/* ------------- Note editor (full-screen) ------------- */
.note-editor { display: none; flex-direction: column; }
.note-editor.on { display: flex; }
.note-editor-body {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  padding: 14px 18px max(18px, env(safe-area-inset-bottom));
  min-height: 0; max-width: 900px; width: 100%; margin: 0 auto;
}
.note-title-input {
  width: 100%; padding: 14px 18px;
  background: var(--bg-2); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  font-size: 20px; font-weight: 700;
  font-family: inherit; letter-spacing: inherit;
  -webkit-appearance: none;
}
.note-title-input:focus { outline: none; border-color: var(--accent); }
#note-editor-body-text {
  flex: 1; min-height: 0;
  width: 100%;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  padding: 16px;
  font-size: 17px; line-height: 1.75;
  font-family: inherit; letter-spacing: inherit;
  resize: none; -webkit-appearance: none;
}
#note-editor-body-text:focus { outline: none; border-color: var(--accent); }

/* ------------- Help modal ------------- */
.help-modal .help-box {
  max-width: 680px; max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.help-content {
  overflow-y: auto; padding: 4px 2px 10px;
  flex: 1;
}
.help-replay-tour {
  display: flex; align-items: center; gap: 14px;
  width: 100%; background: linear-gradient(135deg,#fbbf24,#f97316);
  color: #1a1a26; border: none; border-radius: 14px;
  padding: 14px 16px; cursor: pointer; font-family: inherit;
  text-align: left; margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(251,191,36,.25);
  transition: transform .12s, box-shadow .12s;
}
.help-replay-tour:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(251,191,36,.35); }
.help-replay-tour:active { transform: scale(.98); }
.help-replay-tour .hrt-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.help-replay-tour .hrt-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.help-replay-tour .hrt-text strong { font-size: 16px; font-weight: 800; }
.help-replay-tour .hrt-text .hrt-sub { font-size: 13px; opacity: .85; line-height: 1.3; }
.help-replay-tour .hrt-arrow { font-size: 22px; font-weight: 700; flex-shrink: 0; }
.help-content details {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.help-content details[open] { background: var(--bg-2); }
.help-content summary {
  cursor: pointer; font-weight: 700; font-size: 15px;
  padding: 8px 0; color: var(--ink-hi); list-style: none;
  outline: none;
}
.help-content summary::-webkit-details-marker { display: none; }
.help-content summary::before { content: '+ '; color: var(--accent); font-weight: 700; }
.help-content details[open] summary::before { content: '− '; }
.help-content p, .help-content ul, .help-content ol {
  margin: 10px 0; line-height: 1.7; color: var(--ink-hi);
  padding-left: 20px;
}
.help-content p { padding-left: 0; }
.help-content li { margin-bottom: 6px; }
.help-content code {
  background: var(--bg-3); padding: 1px 6px; border-radius: 4px;
  font-size: 0.9em; color: var(--accent-hi);
}
.help-content strong { color: var(--ink-hi); }

/* Home resume card — appears above the two main buttons when there's
   an app with a saved reading position. Green gradient so it's clearly
   distinct from "Import" (purple) and "Library" (teal). */
.big-action.resume {
  background: linear-gradient(135deg, #059669, #16a34a);
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
  margin: 0 16px;
  align-self: stretch;
  max-width: 500px;
  width: calc(100% - 32px);
  justify-content: center;
}

/* ------------- Import screen (Get Started destination) ------------- */
#import-screen {
  display: none;
  background: linear-gradient(160deg, #0f0f2e 0%, #1a1a3e 40%, #2a1a3e 100%);
  color: #f0f0ff;
  overflow-y: auto;
}
#import-screen.on { display: block; }
.import-body {
  max-width: 960px; margin: 0 auto; padding: 40px 24px 60px;
  text-align: center;
}
.import-heading {
  margin: 0 0 8px; font-size: 28px; font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.import-sub {
  margin: 0 0 36px; color: var(--ink-mid); font-size: 16px;
  line-height: 1.7; max-width: 560px; margin-left: auto; margin-right: auto;
}
/* Side-by-side cards — 4 columns on wide iPad landscape, 2 on
   portrait / narrow viewports, 1 on tiny. */
.import-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 30px;
}
.import-grid .type-card {
  min-height: 180px;
  align-items: center; justify-content: center;
  text-align: center;
}
.import-grid .type-card .type-icon { font-size: 44px; }
.import-grid .type-card .type-label { font-size: 20px; }
.import-grid .type-card .type-sub { font-size: 13px; max-width: 220px; }
.import-hint {
  font-size: 14px; color: var(--ink-mid); line-height: 1.7;
  padding: 14px 18px;
  background: rgba(124, 124, 255, 0.10);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  margin: 14px 0 0;
  text-align: left;
}
.import-hint.kindle {
  background: rgba(204, 63, 85, 0.10);
  border-left-color: #cc3f55;
}
.import-hint strong { color: var(--ink-hi); }

/* ------- Workflow banner (IMPORT -> PREVIEW -> DIAGNOSE -> FIX -> EXPORT)
   Sits above the import grid. Each chip is tappable and routes into
   the matching Workspace section. Scrolls horizontally on narrow
   widths so the full 5-step pipeline stays readable on iPad portrait. */
.workflow-banner {
  background: rgba(124, 124, 255, 0.08);
  border: 1px solid rgba(124, 124, 255, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 18px;
}
.workflow-banner .wf-title {
  color: var(--ink-hi);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.workflow-banner .wf-steps {
  display: flex; align-items: stretch; gap: 6px;
  flex-wrap: nowrap; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.workflow-banner .wf-step {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(20, 20, 42, 0.6);
  border: 1px solid #2a2a42;
  border-radius: 10px;
  color: var(--ink-hi);
  cursor: pointer;
  text-align: left;
  min-width: 140px;
  font-family: inherit;
}
.workflow-banner .wf-step:active { transform: scale(0.97); }
.workflow-banner .wf-step .wf-num {
  display: inline-flex; width: 22px; height: 22px;
  border-radius: 11px; background: var(--accent); color: #14142a;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.workflow-banner .wf-step .wf-label {
  font-weight: 700; font-size: 14px; margin-top: 2px;
}
.workflow-banner .wf-step .wf-sub {
  font-size: 11px; color: var(--ink-mid); line-height: 1.4;
}
.workflow-banner .wf-arrow {
  align-self: center; color: var(--ink-mid); font-size: 18px;
}

/* ===== VN-style media picker modal ===== */
.media-picker-modal .media-picker-box {
  max-width: 980px; width: 100%;
  max-height: 92vh; height: 92vh;
  padding: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #0a0a14;
  border: 1px solid #1c1c2c;
}
.mp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #15152a;
}
.mp-iconbtn {
  background: transparent; border: none; color: #fff;
  width: 38px; height: 38px;
  border-radius: 10px;
  font-size: 22px;
  cursor: pointer;
}
.mp-iconbtn:active { background: rgba(255,255,255,0.08); }
.mp-tabs {
  display: flex; justify-content: center; gap: 32px;
  padding: 14px 0 8px;
  border-bottom: 1px solid #15152a;
}
.mp-tab {
  background: transparent; border: none;
  color: #a3a3b8; font-size: 16px; font-weight: 700;
  padding: 6px 0;
  cursor: pointer;
  position: relative;
  font-family: inherit;
}
.mp-tab.on { color: #fff; }
.mp-tab.on::after {
  content: ''; position: absolute;
  left: 8px; right: 8px; bottom: -8px;
  height: 3px; background: var(--accent, #4ea0ff);
  border-radius: 2px;
}
.mp-subtabs {
  display: flex; gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid #15152a;
  overflow-x: auto;
}
.mp-sub {
  background: transparent; border: none;
  color: #a3a3b8; font-size: 14px; font-weight: 600;
  padding: 4px 2px;
  cursor: pointer; flex-shrink: 0;
  font-family: inherit;
  border-bottom: 2px solid transparent;
}
.mp-sub.on { color: #fff; border-bottom-color: var(--accent, #4ea0ff); }
.mp-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 12px;
}
.mp-grid {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.mp-tile {
  position: relative;
  aspect-ratio: 9/16;
  background: #14142a;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 0;
}
.mp-tile.on { border-color: var(--accent, #4ea0ff); }
.mp-tile img, .mp-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.mp-tile .mp-duration {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
}
.mp-tile .mp-pick {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 2px solid #fff;
}
.mp-tile.on .mp-pick {
  background: var(--accent, #4ea0ff);
}
.mp-tile.on .mp-pick::before {
  content: '✓'; color: #fff;
  font-size: 13px; font-weight: 800;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.mp-empty {
  text-align: center; color: var(--ink-mid); padding: 60px 20px;
  font-size: 14px;
}
.mp-source-row {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 0 0 14px;
}
.mp-source-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
  color: var(--ink-hi); text-align: left;
  cursor: pointer; font-family: inherit;
}
.mp-source-card:active { transform: scale(0.97); }
.mp-source-card strong { display: block; font-size: 15px; margin-bottom: 4px; }
.mp-source-card span { color: var(--ink-mid); font-size: 12px; }
.mp-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #15152a;
}
.mp-count { color: var(--ink-mid); font-size: 13px; }
.mp-confirm {
  background: var(--accent, #4ea0ff);
  color: #fff; border: none;
  width: 56px; height: 44px;
  border-radius: 10px;
  font-size: 22px; font-weight: 700;
  cursor: pointer;
}
.mp-confirm:disabled { opacity: 0.45; cursor: not-allowed; }

.mp-stocks-form { display: flex; flex-direction: column; gap: 10px; padding: 4px; }
.mp-stocks-form input[type="url"] {
  width: 100%; padding: 12px 14px;
  background: var(--bg-2); color: var(--ink-hi);
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; font-family: inherit;
}
.mp-stocks-form .hint { color: var(--ink-mid); font-size: 12px; line-height: 1.6; }
.mp-stocks-form .hint a { color: var(--accent, #4ea0ff); }

/* ------- Workspace hub modal (VN-style project workspace) ------- */
.workspace-hub .workspace-box {
  max-width: 720px; max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding: 22px 22px 26px;
}
.workspace-hub .ws-close {
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: none;
  color: var(--ink-mid); font-size: 28px; line-height: 1;
  cursor: pointer; padding: 4px 10px;
}
.workspace-hub .ws-close:hover { color: var(--ink-hi); }
.workspace-hub .ws-intro {
  margin: 0 0 14px; color: var(--ink-mid); font-size: 14px; line-height: 1.6;
}
.workspace-hub .ws-section { margin: 14px 0; }
.workspace-hub .ws-section h4 {
  margin: 0 0 8px; color: var(--ink-hi);
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
}
.workspace-hub .ws-tiles {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.workspace-hub .ws-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: #1a1a2e;
  border: 1px solid #2a2a42;
  border-radius: 10px;
  color: var(--ink-hi);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 86px;
}
.workspace-hub .ws-tile:active { transform: scale(0.97); }
.workspace-hub .ws-tile:hover { border-color: var(--accent); }
.workspace-hub .ws-tile .ws-icon { font-size: 22px; }
.workspace-hub .ws-tile .ws-label { font-size: 14px; font-weight: 700; }
.workspace-hub .ws-tile .ws-dir {
  font-size: 12px; color: var(--ink-mid); line-height: 1.5;
}
.workspace-hub .ws-foot-hint {
  margin: 18px 0 0; font-size: 12px; color: var(--ink-mid);
  padding-top: 12px; border-top: 1px solid #2a2a42;
}

/* ------- File Tree modal ------- */
.filetree-modal .filetree-box {
  max-width: 720px; max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding: 22px 22px 26px;
}
.filetree-modal .ft-close {
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: none;
  color: var(--ink-mid); font-size: 28px; line-height: 1;
  cursor: pointer; padding: 4px 10px;
}
.filetree-modal .ft-close:hover { color: var(--ink-hi); }
.filetree-modal .ft-intro {
  margin: 0 0 12px; color: var(--ink-mid); font-size: 13px; line-height: 1.6;
}
.filetree-modal .ft-summary {
  margin: 8px 0; color: var(--ink-mid);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.filetree-modal .ft-list {
  background: #14142a; border: 1px solid #2a2a42; border-radius: 8px;
  padding: 6px 0; max-height: 50vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.filetree-modal .ft-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink-hi);
  border-bottom: 1px solid #2a2a42;
}
.filetree-modal .ft-row:last-child { border-bottom: none; }
.filetree-modal .ft-icon { flex-shrink: 0; font-size: 14px; }
.filetree-modal .ft-path { flex: 1; word-break: break-all; }
.filetree-modal .ft-size { flex-shrink: 0; color: var(--ink-mid); font-size: 11px; }
.filetree-modal .ft-badges { flex-shrink: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.filetree-modal .ft-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.filetree-modal .ft-missing {
  background: rgba(193, 74, 74, 0.10);
  border: 1px solid #c14a4a;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 12px;
  color: var(--ink-hi);
}
.filetree-modal .ft-missing ul {
  margin: 6px 0 0; padding-left: 20px;
  font-family: SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--ink-mid);
}
.filetree-modal .ft-fix-hint {
  margin: 8px 0 0; font-size: 12px; color: var(--ink-mid);
}
.filetree-modal .ft-empty {
  color: var(--ink-mid); font-size: 14px; line-height: 1.6;
  padding: 20px; text-align: center;
}

/* ------------- Load AI chat panel ------------- */
.helper-panel {
  position: fixed; right: -440px; top: 0; bottom: 0;
  width: min(440px, 92vw);
  background: var(--bg-1); border-left: 1px solid var(--border);
  z-index: 130; display: flex; flex-direction: column;
  padding-top: max(0px, env(safe-area-inset-top));
  transition: right 0.25s ease;
  box-shadow: -12px 0 40px rgba(0,0,0,0.4);
}
.helper-panel.on { right: 0; }
.helper-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.helper-head h3 {
  flex: 1; margin: 0; font-size: 17px; color: var(--accent);
  letter-spacing: 0.5px;
}
.helper-icon { font-size: 22px; margin-right: 4px; }

.helper-intro {
  padding: 16px 18px;
  color: var(--ink-mid); font-size: 14px; line-height: 1.7;
  border-bottom: 1px solid var(--border);
  flex-shrink: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.helper-intro p { margin: 0 0 10px; }
.helper-intro ul { margin: 0; padding-left: 18px; }
.helper-intro li { margin-bottom: 4px; color: var(--ink-hi); }
.helper-intro em { font-style: normal; color: var(--accent-hi); }

.helper-messages {
  flex: 1; overflow-y: auto;
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.helper-messages:empty { display: none; }
.helper-msg {
  max-width: 92%;
  padding: 12px 14px; border-radius: 14px;
  line-height: 1.65; font-size: 15px;
  word-wrap: break-word;
}
.helper-msg.user {
  align-self: flex-end;
  background: var(--accent); color: var(--bg-0);
  border-bottom-right-radius: 4px;
  font-weight: 600;
}
.helper-msg.assistant {
  align-self: flex-start;
  background: var(--bg-2); color: var(--ink-hi);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.helper-msg p { margin: 0 0 8px; }
.helper-msg p:last-child { margin-bottom: 0; }
.helper-msg strong { color: var(--accent-hi); }
.helper-msg code {
  background: var(--bg-0); padding: 1px 6px; border-radius: 4px;
  font-size: 0.9em; color: var(--accent-hi);
}
.helper-action {
  margin-top: 10px; padding: 10px 14px;
  background: var(--accent); color: var(--bg-0);
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
}
.helper-action:active { transform: scale(0.98); }
/* Copy button is a quieter secondary action so it doesn't compete
   with primary "Open X" actions — translucent chip, tight padding. */
.helper-action.helper-copy {
  margin-left: 6px;
  background: transparent; color: var(--ink-mid);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 500;
  padding: 6px 10px; min-height: 32px;
}
.helper-action.helper-copy:active { background: var(--bg-2); }
/* Apply-to-editor is a stronger affordance than Copy — it actually
   writes to a file — so it gets a filled accent style. */
.helper-action.helper-apply {
  margin-left: 6px;
  background: var(--accent); color: var(--bg-0);
  border: 1px solid var(--accent);
  font-size: 13px; font-weight: 600;
  padding: 8px 12px; min-height: 36px;
}
.helper-action.helper-apply:active { filter: brightness(0.92); }

.helper-quick {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  max-height: 140px; overflow-y: auto;
  flex-shrink: 0;
}
.helper-chip {
  background: var(--bg-2); color: var(--ink-hi);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-size: 13px;
  min-height: 36px; white-space: nowrap;
}
.helper-chip:active { background: var(--bg-3); transform: scale(0.97); }
.helper-quick.hidden { display: none; }

.helper-input-row {
  display: flex; gap: 8px;
  padding: 10px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
}
.helper-input-row input {
  flex: 1; padding: 12px 14px;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 10px;
  /* 16px minimum — anything smaller and iOS Safari auto-zooms the
     viewport on focus and doesn't unzoom when the keyboard closes. */
  font-size: 16px; -webkit-appearance: none;
  font-family: inherit;
}
.helper-input-row input:focus { outline: none; border-color: var(--accent); }
.helper-input-row button { min-width: 52px; padding: 12px; font-size: 20px; }

/* AI provider cards in Settings (multi-provider chain) */
.ai-provider {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
  margin: 8px 0;
}
.ai-prov-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; cursor: pointer; margin-bottom: 4px;
}
.ai-prov-head input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent);
}
.ai-prov-head strong { color: var(--ink-hi); }
.ai-prov-badge {
  margin-left: auto; font-size: 11px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(124,124,255,0.18); color: var(--accent-hi);
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ai-prov-desc {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-mid); margin: 4px 0 6px;
}
.ai-prov-desc code {
  background: var(--bg-0); padding: 1px 5px; border-radius: 4px;
  font-size: 12px;
}
.ai-prov-key {
  width: 100%; padding: 10px 12px;
  background: var(--bg-0); color: var(--ink-hi);
  border: 2px solid var(--border); border-radius: 8px;
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: 13px; -webkit-appearance: none;
  margin: 6px 0;
}
.ai-prov-key:focus { outline: none; border-color: var(--accent); }
.ai-provider a.link {
  color: var(--accent-hi); text-decoration: underline;
}
.ai-prov-status {
  font-size: 12px; margin: 0;
  padding: 4px 8px; border-radius: 4px;
  background: var(--bg-0); color: var(--ink-mid);
  display: inline-block;
}
.ai-prov-status.ok    { color: #2bb673; }
.ai-prov-status.warn  { color: #e0a040; }
.ai-prov-status.error { color: var(--danger); }
.ai-prov-status.busy  { color: var(--accent); }

/* Per-message provider badge in the Load AI chat */
.helper-msg .prov-badge {
  display: inline-block;
  margin-top: 8px; padding: 3px 8px;
  font-size: 11px; letter-spacing: 0.5px;
  background: var(--bg-0); color: var(--ink-mid);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.helper-msg .prov-badge.cloud    { color: var(--accent-hi); border-color: var(--accent); }
.helper-msg .prov-badge.fallback { color: #e0a040; border-color: #e0a040; }
.helper-msg .prov-badge.local    { color: #2bb673; border-color: #2bb673; }
.helper-msg .prov-badge.offline  { color: var(--ink-low); }
.helper-thinking {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  font-size: 14px; color: var(--ink-mid); font-style: italic;
}
.helper-thinking .dots::after {
  content: '…'; display: inline-block;
  animation: thinking-dots 1.4s infinite steps(4, end);
}
@keyframes thinking-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

.helper-msg .code-block {
  background: var(--bg-0); color: var(--ink-hi);
  padding: 10px 12px; border-radius: 8px;
  font-family: "SFMono-Regular", Menlo, monospace;
  font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  border-left: 3px solid var(--accent);
  margin: 8px 0;
  overflow-x: auto;
}

/* Key-value table used by Load AI /analyze output */
.helper-kv {
  width: 100%; border-collapse: collapse; margin: 8px 0;
  font-size: 14px; line-height: 1.6;
}
.helper-kv td {
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.helper-kv td:first-child {
  color: var(--ink-mid); font-weight: 600; width: 40%;
}
.helper-kv td:last-child { color: var(--ink-hi); word-break: break-word; }

/* ------------- Install-as-app banner ------------- */
.install-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 14px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(124,124,255,0.15), rgba(37,99,235,0.12));
  border: 1px solid var(--accent);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(124,124,255,0.15);
}
.install-banner .ib-left {
  flex: 1;
  display: flex; gap: 12px; align-items: center;
  color: var(--ink-hi);
  line-height: 1.5;
}
.install-banner .ib-icon {
  font-size: 32px; line-height: 1;
  color: var(--accent);
}
.install-banner strong {
  display: block;
  font-size: 15px;
  color: var(--ink-hi);
  margin-bottom: 2px;
}
.install-banner .ib-sub {
  display: block;
  font-size: 13px;
  color: var(--ink-mid);
}
.install-btn {
  background: var(--accent); color: var(--bg-0);
  border: none; padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 700; min-height: 40px;
  white-space: nowrap;
}
.install-btn:active { background: var(--accent-hi); }

.install-status {
  display: inline-block;
  background: var(--bg-2);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-mid);
  margin: 8px 0 0;
}
.install-status.installed {
  background: rgba(74, 160, 74, 0.15);
  color: var(--good);
  border: 1px solid var(--good);
}
.install-status.not-installed {
  background: rgba(124, 124, 255, 0.12);
  color: var(--accent-hi);
  border: 1px solid var(--accent);
}

.install-modal-box { max-width: 520px; }
.install-steps { margin: 16px 0; }

.panel-hint-list {
  margin: 6px 0 8px;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.7;
}
.panel-hint-list li { margin-bottom: 4px; }

/* ------------- Toast notifications ------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(80px);
  background: var(--accent);
  color: var(--bg-0);
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 32px rgba(124, 124, 255, 0.4);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  max-width: 90vw;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.on {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.error {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 8px 32px rgba(204, 63, 85, 0.4);
}

.home-copyright {
  margin: 32px auto 0;
  padding: 20px;
  font-size: 12px;
  color: #8a8ac0;
  text-align: center;
  line-height: 1.7;
  max-width: 500px;
}

/* ------------- Library ------------- */
.topbar {
  position: sticky; top: 0; background: var(--bg-0); z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  padding-top: max(14px, env(safe-area-inset-top));
}
.topbar h2 {
  margin: 0; font-size: 18px; color: var(--accent);
  letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
}
.spacer { flex: 1; }

.primary-btn {
  background: var(--accent); color: var(--bg-0); border: none;
  padding: 12px 20px; border-radius: 10px; font-size: 16px; font-weight: 700;
  min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.5px;
}
.primary-btn:active { background: #5a5ae0; }
.primary-btn .icon { font-size: 20px; line-height: 1; }

.secondary-btn {
  background: #2d2d55; color: #fff; border: none;
  padding: 10px 18px; border-radius: 8px; font-size: 15px; min-height: 44px;
}
.secondary-btn:active { background: #3a3a72; }

.danger-btn {
  background: #cc3f55; color: #fff; border: none;
  padding: 10px 18px; border-radius: 8px; font-size: 15px; font-weight: 700; min-height: 44px;
}
.danger-btn:active { background: #e05066; }

.icon-btn {
  background: #2d2d55; color: #fff; border: none;
  width: 44px; height: 44px; border-radius: 8px; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:active { background: #3a3a72; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px; text-align: left;
  color: var(--ink-mid);
  max-width: 640px; margin: 0 auto;
}
.empty-icon { font-size: 72px; margin-bottom: 20px; opacity: 0.8; align-self: center; }
.empty-state h3 {
  margin: 0 0 16px; color: var(--ink-hi);
  font-size: 22px; font-weight: 700; letter-spacing: 0.5px;
  align-self: center;
}
.empty-state p {
  margin: 10px 0; line-height: 1.8;
  max-width: 600px; width: 100%;
  font-size: 16px; color: var(--ink-hi);
}
.empty-state .hint {
  font-size: 15px; color: var(--ink-mid); margin-top: 16px;
  padding: 14px 18px;
  background: rgba(124, 124, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  line-height: 1.7;
}
.empty-state code {
  background: var(--bg-2); padding: 2px 8px; border-radius: 4px;
  font-size: 0.95em; color: var(--accent-hi);
  font-family: "SFMono-Regular", Menlo, monospace;
}
.empty-state strong { color: var(--ink-hi); font-weight: 700; }

.grid {
  display: grid; gap: 16px; padding: 16px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.grid:empty { display: none; }

.tile {
  background: linear-gradient(135deg, var(--bg-3), var(--bg-1));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  min-height: 180px;
  display: flex; flex-direction: column; gap: 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.tile:active { transform: scale(0.97); }
.tile:focus-visible { border-color: var(--accent); }
.tile .tile-icon {
  font-size: 44px; color: var(--accent); align-self: center; margin: 10px 0 14px;
}
.tile .tile-name {
  font-weight: 700; color: var(--ink-hi); font-size: 17px;
  line-height: 1.4; overflow-wrap: anywhere;
  letter-spacing: 0.01em;
}
.tile .tile-meta {
  font-size: 13px; color: var(--ink-mid);
  margin-top: auto; line-height: 1.5;
}
.tile-menu-btn {
  position: absolute; top: 8px; right: 8px;
  background: rgba(20,20,42,0.85); color: #ffffff; border: 1px solid rgba(124,124,255,0.35);
  width: 36px; height: 36px; border-radius: 18px;
  font-size: 20px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.tile-menu-btn:active { background: var(--accent); color: #fff; border-color: var(--accent); }

.context-menu {
  position: fixed;
  background: #222238; border: 1px solid #3a3a5a; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5); z-index: 2000;
  min-width: 220px; max-width: 320px;
  max-height: calc(100vh - 24px);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.context-menu button {
  display: block; width: 100%; padding: 10px 14px; background: none; color: #e8e8ee;
  border: none; text-align: left; font-size: 14px; min-height: 40px;
}
.context-menu button:active { background: #3a3a5a; }
.context-menu button.danger {
  color: #ff8a8a;
  font-weight: 700;
}
.context-menu .menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ------------- Viewer ------------- */
.viewer-topbar {
  transition: transform 0.2s ease;
  /* Buttons keep landing on the viewer topbar -- TTS, bookmarks, save-as-template,
     layout, notes, share, AI, console, reload, Aa, hide. Make it horizontally
     scrollable so nothing falls off-screen on smaller iPads or split view. */
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.viewer-topbar::-webkit-scrollbar { display: none; }   /* Safari / Chrome */
.viewer-topbar > .icon-btn { flex-shrink: 0; }         /* don't squish buttons */
.viewer-topbar.hidden { transform: translateY(-100%); }
.viewer-topbar .title {
  flex: 1 1 auto; font-size: 13px; color: #a8a8c4; text-align: center;
  padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 80px;
}

#viewer-screen { display: none; flex-direction: column; }
#viewer-screen.on { display: flex; }

#viewer-frame {
  flex: 1; width: 100%; border: 0; background: #fff; min-height: 0;
}

.floating-show {
  display: none;
  position: fixed; top: max(12px, env(safe-area-inset-top)); left: 12px; z-index: 6;
  background: rgba(45,45,85,0.85); color: #fff; border: none;
  width: 44px; height: 44px; border-radius: 22px;
  font-size: 20px; backdrop-filter: blur(10px);
}
.floating-show.on { display: flex; align-items: center; justify-content: center; }

/* ------------- Aids panel ------------- */
.aids-panel {
  position: fixed; right: -360px; top: 0; bottom: 0; width: 340px;
  background: #16162a; border-left: 1px solid #2a2a42; z-index: 100;
  transition: right 0.25s ease; padding: 16px; overflow-y: auto;
  padding-top: max(16px, env(safe-area-inset-top));
}
.aids-panel.on { right: 0; }
.aids-head { display: flex; align-items: center; margin-bottom: 16px; }
.aids-head h3 { margin: 0; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #7c7cff; flex: 1; }
.aid-row { padding: 12px 0; border-bottom: 1px solid #242442; }
.aid-row:last-child { border-bottom: none; }
.aid-label { display: block; font-size: 12px; color: #a8a8c4; margin-bottom: 8px; letter-spacing: 0.5px; }
.aid-buttons { display: flex; gap: 8px; }
.aid-buttons.wrap { flex-wrap: wrap; }
.aid-btn {
  background: #2d2d55; color: #fff; border: none;
  padding: 10px 14px; border-radius: 6px; font-size: 13px; min-height: 40px; flex: 1;
}
.aid-btn:active { background: #3a3a72; }
.aid-btn.active { background: #7c7cff; color: #14142a; font-weight: 700; }

.scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; display: none;
}
.scrim.on { display: block; }

/* Focus line: parent-level overlay hovers over iframe */
#focus-line {
  position: fixed; left: 0; right: 0; height: 40px;
  background: rgba(124,124,255,0.08);
  border-top: 2px solid rgba(124,124,255,0.35);
  border-bottom: 2px solid rgba(124,124,255,0.35);
  pointer-events: none; z-index: 50; display: none;
  top: 50%; transform: translateY(-50%);
}
#focus-line.on { display: block; }

/* ------------- Import progress ------------- */
.import-progress {
  position: fixed; inset: 0; background: rgba(20, 20, 42, 0.85);
  display: none; align-items: center; justify-content: center; flex-direction: column;
  z-index: 250; color: #fff; gap: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.import-progress.on { display: flex; }
.import-progress .spinner {
  width: 48px; height: 48px; border: 4px solid #2d2d55;
  border-top-color: #7c7cff; border-radius: 50%;
  animation: spin 1s linear infinite;
}
.import-progress .msg {
  font-size: 15px; color: #e8e8ee; max-width: 320px; text-align: center; padding: 0 20px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------- Modal ------------- */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal.on { display: flex; }
.modal-box {
  background: #222238; border-radius: 12px; padding: 24px;
  max-width: 360px; width: 100%; border: 1px solid #2a2a42;
}
.modal-box h3 { margin: 0 0 10px; color: #fff; }
.modal-box p { margin: 0 0 20px; color: #a8a8c4; }
.modal-box input[type=text] {
  width: 100%; padding: 12px; border: 1px solid #3a3a5a; background: #1a1a2e;
  color: #fff; font-size: 15px; border-radius: 8px; margin-bottom: 20px;
  -webkit-appearance: none;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.modal-box .steps {
  list-style: none; counter-reset: step;
  margin: 0 0 16px; padding: 0;
}
.modal-box .steps li {
  counter-increment: step;
  position: relative;
  padding: 10px 12px 10px 44px;
  background: #1a1a2e;
  border: 1px solid #2a2a42;
  border-radius: 8px;
  margin-bottom: 8px;
  color: #e8e8ee;
  font-size: 14px; line-height: 1.5;
}
.modal-box .steps li::before {
  content: counter(step);
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 12px;
  background: #7c7cff; color: #14142a;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.modal-box .steps .emoji { font-size: 18px; vertical-align: middle; }
.modal-box .hint { font-size: 12px; color: #8a8aa6; margin-bottom: 20px; }