/* styles-components-1.css — part 1 of 3 of the former styles-components.css, split in Phase 0.3 with every rule unchanged. Link the parts consecutively, 1 then 2 then 3: the cascade depends on it. */
/**
 * styles-components.css
 * Component styles: toggles, bionic, customize panel, preview, compare, footer, toast, theme, light mode
 */

    /* ============================================================
       Email gate (first-visit trial start). Sits above everything.
       ============================================================ */
    .email-gate-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      z-index: 99999;
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .email-gate-overlay.visible { opacity: 1; }
    .email-gate-card {
      background: #141414;
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-radius: 12px;
      padding: 1.75rem 1.5rem 1.5rem;
      max-width: 440px;
      width: 100%;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
      color: #e5e5e5;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }
    body.light-mode .email-gate-card {
      background: #ffffff;
      color: #1a1a1a;
      border-color: rgba(34, 197, 94, 0.4);
    }
    .email-gate-title {
      margin: 0 0 0.5rem;
      font-size: 1.35rem;
      font-weight: 700;
      color: #4ade80;
    }
    body.light-mode .email-gate-title { color: #16a34a; }
    .email-gate-subtitle {
      margin: 0 0 1.25rem;
      font-size: 0.92rem;
      line-height: 1.5;
      color: #a3a3a3;
    }
    body.light-mode .email-gate-subtitle { color: #525252; }
    .email-gate-form { margin: 0; }
    .email-gate-label {
      display: block;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #a3a3a3;
      margin-bottom: 0.4rem;
    }
    body.light-mode .email-gate-label { color: #525252; }
    .email-gate-input {
      width: 100%;
      padding: 0.7rem 0.85rem;
      font-size: 0.95rem;
      background: #0a0a0a;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      outline: none;
      transition: border-color 0.15s ease;
      font-family: inherit;
    }
    body.light-mode .email-gate-input {
      background: #f5f5f5;
      color: #1a1a1a;
      border-color: rgba(0, 0, 0, 0.15);
    }
    .email-gate-input:focus { border-color: #4ade80; }
    .email-gate-error {
      min-height: 1.1rem;
      margin: 0.45rem 0 0;
      font-size: 0.82rem;
      color: #f87171;
    }
    .email-gate-submit {
      width: 100%;
      margin-top: 0.85rem;
      padding: 0.8rem 1rem;
      font-size: 0.95rem;
      font-weight: 600;
      background: #22c55e;
      color: #052e16;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease;
    }
    .email-gate-submit:hover:not(:disabled) { background: #16a34a; }
    .email-gate-submit:disabled { opacity: 0.7; cursor: wait; }
    .email-gate-fineprint {
      margin: 1.1rem 0 0;
      font-size: 0.74rem;
      line-height: 1.55;
      color: #737373;
    }
    .email-gate-fineprint a { color: #4ade80; text-decoration: underline; }
    body.light-mode .email-gate-fineprint a { color: #16a34a; }
    .email-gate-license {
      margin: 0.6rem 0 0;
      font-size: 0.8rem;
      color: #a3a3a3;
    }
    .email-gate-license a {
      color: #4ade80;
      text-decoration: underline;
      cursor: pointer;
    }
    body.light-mode .email-gate-license { color: #525252; }
    body.light-mode .email-gate-license a { color: #16a34a; }

    /* Toggles bar - compact inline row. Hidden until a document has been
       shifted (toggled by core-formatting.js adding/removing "visible") —
       self-contained here rather than relying on being a direct child of
       .input-panel, since it now nests inside #inputToolbarBody. */
    .output-toggles-bar {
      display: none;
      align-items: center;
      gap: 0.3rem;
      flex-wrap: wrap;
      padding: 0.25rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .output-toggles-bar.visible { display: flex; }
    .output-toggles-bar .compare-section,
    .output-toggles-bar .dark-output-section,
    .output-toggles-bar .dyslexic-section,
    .output-toggles-bar .bionic-section {
      background: none;
      border: none;
      border-radius: 0;
      padding: 0;
    }
    .output-toggles-bar .compare-header,
    .output-toggles-bar .dark-output-header,
    .output-toggles-bar .dyslexic-header,
    .output-toggles-bar .bionic-header {
      gap: 0.25rem;
      margin-bottom: 0;
    }
    .output-toggles-bar .compare-title,
    .output-toggles-bar .dark-output-title,
    .output-toggles-bar .dyslexic-title,
    .output-toggles-bar .bionic-title {
      font-size: 0.6rem;
    }

    /* Import & Setup / Format & Export collapse toggles (desktop only).
       These are plain buttons, NOT wrappers — #uploadBlock/#readingStatsSection/
       #actionStatsRow/#outputTogglesBar and #outputHeader/#bionicSliderContainer/
       #alignCustomizeRow stay direct children of .input-panel exactly as
       before these toggles existed, so the split-mode flex row lays them out
       identically when expanded. Collapsing force-hides those specific ids
       via ".input-panel.import-collapsed"/".format-collapsed" (styles-core.css)
       instead. On mobile these pieces are shown individually by the Import/
       Display/Format/Export bottom-sheet tabs (mobile-nav.css targets their
       ids directly with !important), so the toggles are hidden there and the
       collapsed state is ignored. */
    .input-toolbar-toggle,
    .output-toolbar-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      margin: 0;
      padding: 0.1rem 0.1rem 0.5rem;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
    }
    .input-toolbar-toggle { color: #a78bfa; }
    .input-toolbar-toggle:hover { color: #c4b5fd; }
    .output-toolbar-toggle { color: #4ade80; }
    .output-toolbar-toggle:hover { color: #86efac; }
    .input-toolbar-toggle-chevron,
    .output-toolbar-toggle-chevron {
      display: inline-block;
      transition: transform 0.15s ease;
    }
    .input-panel.import-collapsed .input-toolbar-toggle-chevron,
    .input-panel.format-collapsed .output-toolbar-toggle-chevron {
      transform: rotate(-90deg);
    }
    main.split .input-panel > .input-toolbar-toggle,
    main.split .input-panel > .output-toolbar-toggle {
      flex: 1 1 100%;
    }

    body.light-mode .input-toolbar-toggle { color: #7c3aed; }
    body.light-mode .input-toolbar-toggle:hover { color: #6d28d9; }
    body.light-mode .output-toolbar-toggle { color: #16a34a; }
    body.light-mode .output-toolbar-toggle:hover { color: #15803d; }

    /* Hidden until a document has been shifted (toggled by core-formatting.js
       adding/removing "visible"). */
    .output-header { display: none; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
    .output-header.visible { display: flex; }
    .output-title { font-size: 0.7rem; color: #4ade80; letter-spacing: 0.12em; display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }
    .pulse-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 10px rgba(34, 197, 94, 0.7); animation: pulse 2s infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

    .output-actions { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; }

    .export-btn {
      padding: 0.35rem 0.55rem;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      font-family: inherit;
      transition: all 0.15s ease;
    }

    .export-btn:hover { transform: translateY(-1px); }
    .export-btn.copy { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: #a3a3a3; }
    .export-btn.copy:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .export-btn.html { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
    .export-btn.pdf { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
    .export-btn.docx { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
    .export-btn.epub { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
    /* TTS Panel: voice picker + speed slider + Listen + Stop, sits between zoom controls and canvas */
    .tts-panel {
      margin: 0 auto 0.5rem;
      max-width: 720px;
      padding: 1rem 1.2rem 1.3rem;
      background: rgba(6, 182, 212, 0.06);
      border: 1px solid rgba(6, 182, 212, 0.18);
      border-radius: 14px;
    }

    /* Desktop collapse/expand toggle. Hidden by JS default state via the
       "collapsed" class on .tts-panel; mobile hides this entirely and always
       shows the body, since the bottom-sheet tab already acts as the drop-down. */
    .tts-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      margin: 0;
      padding: 0.1rem 0.1rem 0.75rem;
      font-family: inherit;
      font-size: 1.05rem;
      font-weight: 700;
      color: #22d3ee;
      cursor: pointer;
    }
    .tts-toggle:hover { color: #67e8f9; }
    .tts-toggle-chevron {
      display: inline-block;
      font-size: 1.1rem;
      transition: transform 0.15s ease;
    }
    .tts-panel.collapsed .tts-toggle { padding-bottom: 0.1rem; }
    .tts-panel.collapsed .tts-toggle-chevron { transform: rotate(-90deg); }
    .tts-panel.collapsed .tts-body { display: none; }

    body.light-mode .tts-toggle { color: #0891b2; }
    body.light-mode .tts-toggle:hover { color: #0e7490; }

    .tts-progress {
      font-size: 0.72rem;
      color: #67e8f9;
      margin-bottom: 0.4rem;
      padding: 0.3rem 0.5rem;
      background: rgba(6, 182, 212, 0.1);
      border-radius: 4px;
    }

    .tts-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.9rem 0.8rem;
    }

    .tts-control {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .tts-engine-control,
    .tts-voice-control { flex: 1.6 1 150px; min-width: 130px; }
    /* Speed is pushed onto its own full-width row after Engine/Voice/
       Read-along/Colour (all order:0, in DOM order); the action buttons
       below are order:2 so they always end up after Speed regardless of
       where they wrap. */
    .tts-speed-control { order: 1; flex: 1 1 100%; max-width: 100%; min-width: 0; position: relative; padding-bottom: 1.1rem; }

    .tts-label {
      font-size: 0.68rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #a3a3a3;
    }

    .tts-speed-control .tts-label { display: flex; align-items: center; gap: 0.4rem; }
    #ttsSpeedLabel {
      background: rgba(6, 182, 212, 0.18);
      color: #67e8f9;
      border-radius: 999px;
      padding: 0.15rem 0.55rem;
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: none;
      letter-spacing: normal;
    }
    .tts-speed-control::before,
    .tts-speed-control::after {
      position: absolute;
      bottom: 0;
      font-size: 0.68rem;
      color: #a3a3a3;
    }
    .tts-speed-control::before { content: '0.5x'; left: 0; }
    .tts-speed-control::after { content: '2.0x'; right: 0; }

    .tts-voice {
      padding: 0.75rem 1.9rem 0.75rem 0.9rem;
      background-color: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      color: #fff;
      font-size: 0.88rem;
      font-family: inherit;
      cursor: pointer;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.7rem center;
      appearance: none;
      -webkit-appearance: none;
    }

    .tts-voice:focus {
      outline: none;
      border-color: rgba(6, 182, 212, 0.5);
    }

    /* Dropdown options must be readable regardless of OS dropdown rendering.
       Native option lists usually draw on a light system background, so we
       force black text on white to keep voice names legible. */
    .tts-voice option {
      color: #1a1a1a;
      background: #ffffff;
    }
    .tts-voice optgroup {
      color: #555555;
      background: #f3f4f6;
      font-weight: 700;
    }

    .tts-speed {
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(90deg, #7c3aed 0%, #06b6d4 100%);
      accent-color: #06b6d4;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      margin-top: 0.5rem;
    }
    .tts-speed::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #22d3ee;
      border: 3px solid #0a0e14;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }
    .tts-speed::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #22d3ee;
      border: 3px solid #0a0e14;
      box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    }

    /* Circular icon badge in front of each action button's label */
    .tts-btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      margin-right: 0.55em;
      font-size: 0.85em;
      flex-shrink: 0;
    }

    .tts-listen, .tts-stop, .tts-record, .tts-record-full, .tts-record-selection {
      order: 2;
      padding: 0 1.1rem;
      height: 48px;
      border-radius: 14px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      border: none;
      transition: all 0.15s ease;
      white-space: nowrap;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    .tts-listen, .tts-stop, .tts-record { flex: 1 1 0; min-width: 130px; }

    .tts-listen {
      background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
      color: #fff;
    }
    .tts-listen .tts-btn-icon { background: rgba(0,0,0,0.25); }
    .tts-listen:hover:not(:disabled) { transform: translateY(-1px); }
    .tts-listen:disabled { opacity: 0.6; cursor: wait; transform: none; }

    .tts-stop {
      background: rgba(239, 68, 68, 0.12);
      border: 1px solid rgba(239, 68, 68, 0.4);
      color: #f87171;
    }
    .tts-stop .tts-btn-icon { background: rgba(239, 68, 68, 0.2); }
    .tts-stop:hover:not(:disabled) {
      background: rgba(239, 68, 68, 0.22);
      color: #fca5a5;
    }
    .tts-stop:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .tts-record {
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.4);
      color: #4ade80;
    }
    .tts-record .tts-btn-icon { background: rgba(34, 197, 94, 0.2); }
    .tts-record:hover:not(:disabled) { background: rgba(34, 197, 94, 0.22); }
    .tts-record:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }

    .tts-record-full {
      background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
      color: #fff;
    }
    .tts-record-full .tts-btn-icon { background: rgba(0,0,0,0.25); }
    .tts-record-full:hover:not(:disabled) { transform: translateY(-1px); }
    .tts-record-full:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }

    .tts-record-selection {
      background: rgba(245, 158, 11, 0.12);
      border: 1px solid rgba(245, 158, 11, 0.4);
      color: #fbbf24;
    }
    .tts-record-selection .tts-btn-icon { background: rgba(245, 158, 11, 0.2); }
    .tts-record-selection:hover:not(:disabled) { background: rgba(245, 158, 11, 0.22); }
    .tts-record-selection:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }

    /* Forces a fresh flex line before Save Full Doc, so it always pairs with
       Save Selection on one shared full-width row instead of Save Selection
       wrapping onto its own line by itself. Desktop (flex-wrap) only — the
       mobile grid layout below already gives each button its own full row. */
    .tts-actions-break { order: 2; flex-basis: 100%; width: 0; height: 0; margin: 0; padding: 0; }
    .tts-record-full,
    .tts-record-selection {
      flex: 1 1 0;
      min-width: 0;
      text-align: center;
    }

    /* Read-along (karaoke) highlight controls. The highlights themselves are
       styled by a JS-injected <style> (see tts-highlight.js) so the reader can
       switch colour live. Hidden by tts.js where the API is unsupported. */
    .tts-highlight-control { flex: 1 1 140px; min-width: 130px; }
    .tts-color-control { flex: 1 1 140px; min-width: 130px; }
    .tts-highlight { width: 100%; }

    /* Compare Mode Toggle */
    .compare-section {
      background: rgba(6, 182, 212, 0.08);
      border: 1px solid rgba(6, 182, 212, 0.2);
      border-radius: 6px;
      padding: 0.5rem 0.65rem;
    }
    .compare-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .compare-title {
      font-size: 0.7rem;
      color: #22d3ee;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    /* Dark Mode Output Toggle */
    .dark-output-section {
      background: rgba(139, 92, 246, 0.08);
      border: 1px solid rgba(139, 92, 246, 0.2);
      border-radius: 6px;
      padding: 0.5rem 0.65rem;
    }
    .dark-output-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dark-output-title {
      font-size: 0.7rem;
      color: #a78bfa;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    /* OpenDyslexic Toggle */
    .dyslexic-section {
      background: rgba(236, 72, 153, 0.08);
      border: 1px solid rgba(236, 72, 153, 0.2);
      border-radius: 6px;
      padding: 0.5rem 0.65rem;
    }
    .dyslexic-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dyslexic-title {
      font-size: 0.7rem;
      color: #f472b6;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    /* Bionic Section */
    .bionic-section {
      background: rgba(168, 85, 247, 0.08);
      border: 1px solid rgba(168, 85, 247, 0.2);
      border-radius: 6px;
      padding: 0.5rem 0.65rem;
    }

    .bionic-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;
    }

    .bionic-title {
      font-size: 0.7rem;
      color: #d8b4fe;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .toggle-btn {
      padding: 0.3rem 0.55rem;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      color: #a3a3a3;
      font-size: 0.65rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      font-family: inherit;
      /* Only the three properties that actually change. `all` also animated
         width and padding, so every relayout of the panel made the switches
         slide into place instead of snapping. */
      transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    }

    .toggle-btn.active { background: rgba(168, 85, 247, 0.25); border-color: rgba(168, 85, 247, 0.5); color: #c084fc; }
    .toggle-btn.active-cyan { background: rgba(6, 182, 212, 0.25); border-color: rgba(6, 182, 212, 0.5); color: #22d3ee; }
    .toggle-btn.active-purple { background: rgba(139, 92, 246, 0.25); border-color: rgba(139, 92, 246, 0.5); color: #a78bfa; }
    .toggle-btn.active-pink { background: rgba(236, 72, 153, 0.25); border-color: rgba(236, 72, 153, 0.5); color: #f472b6; }

    /* flex: none — the switch is a flex item inside .toggle-btn, and without it
       a cramped row shrank the 28px track while the knob still slid to its
       fixed 16px, so "on" looked half-finished. */
    .toggle-switch { width: 28px; height: 14px; flex: none; background: #404040; border-radius: 100px; position: relative; transition: background-color 0.12s ease; }
    /* .active belongs to Bionic, whose pill, title and slider are all purple —
       it was sharing Compare's cyan track, so switching Bionic on lit up in
       the wrong colour and read as the wrong control responding. */
    .toggle-btn.active .toggle-switch { background: #a855f7; }
    .toggle-btn.active-cyan .toggle-switch { background: #06b6d4; }
    .toggle-btn.active-purple .toggle-switch { background: #8b5cf6; }
    .toggle-btn.active-pink .toggle-switch { background: #ec4899; }
    .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background: #fff; border-radius: 50%; transition: left 0.12s ease; }
    .toggle-btn.active .toggle-switch::after,
    .toggle-btn.active-cyan .toggle-switch::after,
    .toggle-btn.active-purple .toggle-switch::after,
    .toggle-btn.active-pink .toggle-switch::after { left: 16px; }

    /* Compare mode: the zoom buttons act on the single-document preview, which
       is not on screen — but everything else in this bar (Clear, Copy, AI Tools,
       Undo, Redo, Highlights, Hide Panel, Fullscreen) still applies, so only the
       zoom cluster is hidden. Hiding the whole bar took the app's toolbar away. */
    body.compare-active #zoomControls .zoom-btn[onclick^="zoom"],
    body.compare-active #zoomControls #zoomLevel { display: none; }

    /* A control that cannot affect what is currently on screen. Still clickable
       — it decides what you come back to — just visibly not the active lever. */
    .toggle-btn.not-applicable,
    .bionic-slider-container.not-applicable { opacity: 0.55; }

    /* Bionic reading bolds the opening letters of each word. That weight used to
       be an inline style on every single one of them; this rule does the same
       job for the whole document at once. !important so it still wins against
       the inline font-weight docx-preview puts on surrounding spans, exactly as
       the inline style did. */
    strong.bionic-bold { font-weight: 700 !important; }

    .bionic-slider-container {
      display: none;
      flex-direction: row;
      align-items: center;
      gap: 0.4rem;
      background: rgba(168, 85, 247, 0.06);
      border: 1px solid rgba(168, 85, 247, 0.15);
      border-radius: 5px;
      padding: 0.25rem 0.5rem;
      max-width: 400px;
    }

    .bionic-slider-container.visible { display: flex; }

    .bionic-slider-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .bionic-slider {
      width: 150px;
      -webkit-appearance: none;
      appearance: none;
      height: 4px;
      background: rgba(168, 85, 247, 0.2);
      border-radius: 3px;
      outline: none;
    }

    .bionic-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      background: #a855f7;
      border-radius: 50%;
      cursor: pointer;
    }

    .bionic-value {
      font-size: 0.7rem;
      color: #c084fc;
      font-weight: 600;
      min-width: 30px;
    }

    .bionic-labels {
      display: none;
    }

    .bionic-preview {
      margin-top: 0;
      padding: 0.2rem 0.4rem;
      background: rgba(0,0,0,0.3);
      border-radius: 4px;
      font-size: 0.75rem;
      color: #e5e5e5;
      line-height: 1.6;
    }

    /* Text Alignment + Customize Row */
    .align-customize-row {
      display: none;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    /* Focus tools (reading ruler + overlay) now live in this row, beside the
       Customize button. Nudge them to vertically centre against the controls. */
    .align-customize-row > .focus-tools-bar.visible {
      align-self: center;
      padding: 0;
    }
    .align-customize-row.visible {
      display: flex;
    }
    .align-customize-row .customize-panel {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 420px;
    }

    /* Text Alignment Buttons */
    .text-align-group {
      display: flex;
      gap: 2px;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      padding: 4px;
      flex-shrink: 0;
      align-self: stretch;
      align-items: center;
    }
    .align-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 28px;
      border: none;
      border-radius: 4px;
      background: transparent;
      color: #a3a3a3;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .align-btn:hover {
      background: rgba(255,255,255,0.1);
      color: #e5e5e5;
    }
    .align-btn.active {
      background: rgba(34, 197, 94, 0.2);
      color: #4ade80;
    }

    /* Light mode alignment buttons */
    body.light-mode .text-align-group {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.12);
    }
    body.light-mode .align-btn {
      color: #888;
    }
    body.light-mode .align-btn:hover {
      background: rgba(0,0,0,0.06);
      color: #555;
    }
    body.light-mode .align-btn.active {
      background: rgba(34, 197, 94, 0.15);
      color: #16a34a;
    }

    /* Selection Formatting Group (Font, Size, Color for highlighted text) */
    .text-format-group {
      display: flex;
      gap: 3px;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px;
      padding: 4px;
      flex-shrink: 0;
      align-items: center;
    }
    .format-select {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      color: #d4d4d4;
      font-size: 0.65rem;
      padding: 3px 4px;
      cursor: pointer;
      outline: none;
      height: 28px;
    }
    .format-select:hover {
      background: rgba(255,255,255,0.12);
    }
    .format-select:focus {
      border-color: rgba(34, 197, 94, 0.4);
    }
    .format-select option,
    .format-select optgroup {
      background: #1a1a1a;
      color: #d4d4d4;
    }
    .format-font {
      width: 95px;
    }
    .format-size {
      width: 55px;
    }
    .format-color-input {
      width: 28px;
      height: 28px;
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 4px;
      cursor: pointer;
      background: transparent;
      padding: 2px;
    }
    .format-color-input::-webkit-color-swatch-wrapper {
      padding: 1px;
    }
    .format-color-input::-webkit-color-swatch {
      border: none;
      border-radius: 2px;
    }

    /* Light mode formatting group */
    body.light-mode .text-format-group {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.12);
    }
    body.light-mode .format-select {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.15);
      color: #555;
    }
    body.light-mode .format-select:hover {
      background: rgba(0,0,0,0.08);
    }
    body.light-mode .format-select:focus {
      border-color: rgba(34, 197, 94, 0.4);
    }
    body.light-mode .format-select option,
    body.light-mode .format-select optgroup {
      background: #fff;
      color: #333;
    }
    body.light-mode .format-color-input {
      border-color: rgba(0,0,0,0.2);
    }

    /* Customize Panel */
    .customize-panel {
      position: relative;
      background: rgba(0,0,0,0.3);
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-radius: 6px;
      padding: 0.6rem;
    }

    .customize-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      padding: 0.35rem;
      border-radius: 5px;
      transition: background 0.2s ease;
    }

    .customize-header:hover { background: rgba(34, 197, 94, 0.1); }
    .customize-header.open { margin-bottom: 0.75rem; }

    .customize-title {
      font-size: 0.72rem;
      color: #4ade80;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.3rem;
    }

    .customize-toggle {
      color: #4ade80;
      font-size: 0.7rem;
      transition: transform 0.2s ease;
    }

    .customize-header.open .customize-toggle { transform: rotate(180deg); }

    .customize-content {
      display: none;
      flex-direction: column;
      gap: 0.5rem;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 50;
      min-width: 520px;
      background: rgba(20, 20, 20, 0.97);
      border: 1px solid rgba(34, 197, 94, 0.3);
      border-radius: 6px;
      padding: 0.6rem;
      margin-top: 2px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }

    .customize-content.open { display: flex; }

    /* Sheet header inside the customize dropdown is mobile-only.
       Mobile media query below promotes it to display: flex. */
    .customize-sheet-header { display: none; }

    .control-group {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0.4rem;
    }

    @media (max-width: 600px) {
      .control-group { grid-template-columns: 1fr; }
    }

    .control-item {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .control-label {
      font-size: 0.6rem;
      color: #a3a3a3;
      letter-spacing: 0.05em;
    }

    .control-row {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .size-input {
      width: 50px;
      padding: 0.25rem 0.35rem;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 3px;
      color: #e5e5e5;
      font-size: 0.7rem;
      font-family: inherit;
      text-align: center;
    }

    .size-input:focus {
      outline: none;
      border-color: rgba(34, 197, 94, 0.4);
    }

    .size-unit {
      font-size: 0.6rem;
      color: #666;
    }

    .color-input {
      width: 28px;
      height: 22px;
      padding: 0;
      border: 2px solid rgba(255,255,255,0.15);
      border-radius: 3px;
      cursor: pointer;
      background: transparent;
    }

    .color-input::-webkit-color-swatch-wrapper { padding: 1px; }
    .color-input::-webkit-color-swatch { border-radius: 2px; border: none; }

    .color-hex {
      width: 60px;
      padding: 0.25rem 0.35rem;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 3px;
      color: #e5e5e5;
      font-size: 0.65rem;
      font-family: inherit;
    }

    .color-hex:focus {
      outline: none;
      border-color: rgba(34, 197, 94, 0.4);
    }

    .spacing-select {
      padding: 0.25rem 0.5rem;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 3px;
      color: #e5e5e5;
      font-size: 0.7rem;
      font-family: inherit;
      cursor: pointer;
      min-width: 65px;
    }

    .spacing-select:focus {
      outline: none;
      border-color: rgba(34, 197, 94, 0.4);
    }

    .spacing-select option {
      background: #1a1a1a;
      color: #e5e5e5;
    }

    /* Font select styles moved to css/font-picker.css */

    /* ============================================
       GOOGLE PLAY BADGE — coming soon (Android app not yet published)
       ============================================ */
    .play-badge-footer { display: flex; justify-content: center; margin-bottom: 0.85rem; }
    .play-badge-soon { position: relative; display: inline-flex; align-self: center; cursor: default; line-height: 0; }
    .play-badge-soon img { height: 54px; width: auto; display: block; opacity: 0.6; }
    .play-badge-tag {
      position: absolute; top: -9px; right: -9px;
      background: #fb923c; color: #1a1a1a;
      font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
      padding: 2px 7px; border-radius: 999px; line-height: 1.3; white-space: nowrap;
      box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    }

    /* ============================================
       CANVAS VIEW — Hide Panel (focus mode) + Fullscreen
       ============================================ */

    /* Hide Panel: collapse everything above the canvas so the page reads
       full width. The floating "Show Controls" button restores it. */
    body.controls-hidden header,
    body.controls-hidden .app-breadcrumb,
    body.controls-hidden .mnav-tabbar,
    body.controls-hidden .mnav-backdrop,
    body.controls-hidden .mnav-export-btn,
    body.controls-hidden .input-panel,
    body.controls-hidden .app-footer,
    body.controls-hidden #outputHeader,
    body.controls-hidden #readingStatsSection,
    body.controls-hidden #outputTogglesBar,
    body.controls-hidden #bionicSliderContainer,
    body.controls-hidden #focusToolsBar,
    body.controls-hidden #alignCustomizeRow,
    body.controls-hidden #ttsPanel,
    body.controls-hidden #zoomControls {
      display: none !important;
    }

    body.controls-hidden main { min-height: 100vh; }
    body.controls-hidden .output-panel { padding: 0.4rem 1rem; }
    body.controls-hidden .preview-wrapper { max-height: calc(100vh - 1.5rem); }

    /* Floating restore button — only visible while panels are hidden.
       Offset by the safe-area inset so it clears the status bar (time,
       signal, battery) on notch/punch-hole devices in mobile browsers. */
    .canvas-restore-btn {
      display: none;
      position: fixed;
      top: 4rem; /* plain fallback for browsers that reject env()/calc() */
      top: calc(env(safe-area-inset-top, 0px) + 3.25rem);
      right: 12px;
      z-index: 99999;
      align-items: center;
      gap: 0.3rem;
      padding: 0.5rem 0.85rem;
      background: rgba(34, 197, 94, 0.92);
      color: #04140a;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 999px;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(0,0,0,0.45);
      transition: transform 0.15s ease, background 0.15s ease;
    }
    .canvas-restore-btn:hover {
      background: rgba(34, 197, 94, 1);
      transform: translateY(-1px);
    }
    body.controls-hidden .canvas-restore-btn { display: inline-flex; }