/**
 * styles-components.css
 * Component styles: toggles, bionic, customize panel, preview, compare, footer, toast, theme, light mode
 */

    /* Toggles bar - compact inline row */
    .output-toggles-bar {
      display: flex;
      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 .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;
    }

    .output-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
    .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%); }

    /* 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;
      transition: all 0.15s 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; }

    .toggle-switch { width: 28px; height: 14px; background: #404040; border-radius: 100px; position: relative; transition: all 0.15s ease; }
    .toggle-btn.active .toggle-switch,
    .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.15s 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; }

    .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;
      gap: 0.5rem;
    }
    .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; }

    .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 */

    /* Preview Wrapper - scrollable area for A4 document */
    .preview-wrapper {
      overflow: auto;
      flex: 1;
      max-height: calc(100vh - 280px);
      background: rgba(0,0,0,0.15);
      border-radius: 8px;
      padding: 1rem;
    }

    /* Preview Container - A4 Size (210mm x 297mm) */
    .preview-container {
      background: #fff;
      border-radius: 2px;
      padding: 25mm 20mm;
      width: 210mm;
      min-height: 297mm;
      margin: 0 auto;
      box-shadow: 0 4px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,0,0,0.08);
      transform-origin: top center;
      transition: transform 0.2s ease;
    }

    .preview-container.dark-mode {
      background: #1a1a1a;
    }

    /* Editable A4 content */
    #outputContent {
      cursor: text;
      min-height: 100px;
    }
    #outputContent:focus {
      outline: 2px solid rgba(34, 197, 94, 0.3);
      outline-offset: 4px;
      border-radius: 2px;
    }
    #outputContent:empty::before {
      content: 'Your formatted text will appear here...';
      color: #a3a3a3;
      font-style: italic;
    }

    /* When docx-preview is active, adjust preview container */
    .preview-container.docx-active {
      padding: 8px !important;
      background: #e8e8e8 !important;
    }

    /* docx-preview wrapper — neutral background so white pages stand out */
    #outputContent .docx-preview-wrapper {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      min-height: auto !important;
      background: transparent !important;
      background-color: transparent !important;
    }
    /* Each rendered page = white card with shadow, clear page separation */
    #outputContent .docx-preview-wrapper > section.docx {
      max-width: 100% !important;
      min-height: auto !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
      margin-bottom: 16px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      background: #ffffff !important;
      background-color: #ffffff !important;
      border-radius: 3px;
      border: 1px solid #d0d0d0 !important;
      overflow: hidden !important;
    }
    /* Remove margin on last page */
    #outputContent .docx-preview-wrapper > section.docx:last-child {
      margin-bottom: 0 !important;
    }
    /* Force page breaks to actually create separate visual pages */
    #outputContent .docx-preview-wrapper > section.docx + section.docx {
      page-break-before: always;
    }

    /* Page break indicator between docx-preview pages */
    .page-break-indicator {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 4px 0;
      user-select: none;
    }
    .page-break-indicator::before,
    .page-break-indicator::after {
      content: '';
      flex: 1;
      height: 1px;
      border-top: 1px dashed #999;
    }
    .page-break-indicator span {
      font-size: 0.6rem;
      color: #888;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
    }

    /* Page break divider for template-formatted content */
    .page-break-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 1.5rem 0;
      padding: 0.5rem 0;
      user-select: none;
      page-break-before: always;
    }
    .page-break-divider::before,
    .page-break-divider::after {
      content: '';
      flex: 1;
      height: 0;
      border-top: 2px dashed #ccc;
    }
    .page-break-divider span {
      font-size: 0.65rem;
      color: #999;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      white-space: nowrap;
      font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
      padding: 0.15rem 0.6rem;
      background: rgba(0,0,0,0.03);
      border-radius: 3px;
    }
    /* Dark mode page break styling */
    .dark-mode .page-break-divider::before,
    .dark-mode .page-break-divider::after {
      border-top-color: #555;
    }
    .dark-mode .page-break-divider span {
      color: #777;
      background: rgba(255,255,255,0.05);
    }

    /* TOC dot leaders: tab-stop spans in TOC entries get dotted fill */
    #outputContent .docx-preview-wrapper .docx-tab-stop {
      display: inline-block;
      min-width: 2em;
    }
    /* Right-aligned tab stops in TOC */
    #outputContent .docx-preview-wrapper p .docx-tab-stop[style*="right"] {
      flex-grow: 1;
    }

    /* Compare Mode Container */
    .compare-container {
      display: none;
      gap: 1rem;
    }
    .compare-container.visible {
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-height: calc(100vh - 240px);
      overflow: auto;
    }
    @media (max-width: 800px) {
      .compare-container.visible { grid-template-columns: 1fr; }
    }
    .compare-pane {
      border-radius: 8px;
      padding: 1.5rem;
      min-height: 200px;
      overflow: auto;
    }
    .compare-pane.original {
      background: #f5f5f5;
      border: 2px solid #e5e5e5;
    }
    .compare-pane.bionic {
      background: #fff;
      border: 2px solid #22c55e;
    }
    .compare-pane.dark-mode {
      background: #1a1a1a;
      color: #e5e5e5;
    }
    .compare-pane.dark-mode.original {
      border-color: #404040;
    }
    .compare-label {
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
    .compare-pane.dark-mode .compare-label {
      border-bottom-color: rgba(255,255,255,0.1);
    }
    .compare-label.original-label { color: #737373; }
    .compare-label.bionic-label { color: #16a34a; }

    .output-stats { font-size: 0.8rem; color: #737373; text-align: right; }

    /* Footer */
    .app-footer {
      background: rgba(12, 12, 12, 0.95);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1.5rem 2rem;
      text-align: center;
      margin-top: auto;
    }
    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
    }
    .footer-content p {
      margin: 0.3rem 0;
      font-size: 0.85rem;
      color: #737373;
    }
    .footer-content a {
      color: #00ff00;
      text-decoration: none;
    }
    .footer-content a:hover {
      text-decoration: underline;
    }

    /* Toast */
    .toast {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      background: #1a1a1a;
      border: 1px solid rgba(34, 197, 94, 0.4);
      padding: 1rem 1.5rem;
      border-radius: 8px;
      color: #4ade80;
      font-size: 0.9rem;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 3000;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }

    .toast.visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .toast.error {
      border-color: rgba(239, 68, 68, 0.4);
      color: #f87171;
    }

    /* Theme Toggle Switch */
    .theme-toggle-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-right: 1rem;
    }
    .theme-toggle-label {
      font-size: 0.75rem;
      color: #a3a3a3;
      font-weight: 500;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }
    .theme-toggle-track {
      width: 44px;
      height: 24px;
      background: #404040;
      border-radius: 100px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s ease;
      flex-shrink: 0;
    }
    .theme-toggle-track.light {
      background: #22c55e;
    }
    .theme-toggle-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      background: #fff;
      border-radius: 50%;
      transition: left 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .theme-toggle-track.light .theme-toggle-thumb {
      left: 23px;
    }

    /* Light Mode Overrides */
    body.light-mode {
      background: linear-gradient(160deg, #f5f5f5 0%, #e8e8e8 40%, #f0f0f0 100%);
      color: #1a1a1a;
    }
    body.light-mode::before {
      background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    }
    body.light-mode header {
      background: rgba(255,255,255,0.92);
      border-bottom-color: rgba(0,0,0,0.08);
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    body.light-mode .header-center-subtitle { color: #555 !important; }
    body.light-mode .theme-toggle-label { color: #555; }
    body.light-mode .usage-badge {
      background: rgba(34, 197, 94, 0.12);
      color: #16a34a;
      border-color: rgba(34, 197, 94, 0.3);
    }
    body.light-mode .help-dropdown-trigger {
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.25);
      color: #16a34a;
    }
    body.light-mode .help-dropdown-trigger:hover {
      background: rgba(34, 197, 94, 0.15);
    }
    body.light-mode .help-dropdown-menu {
      background: #ffffff;
      border-color: rgba(34, 197, 94, 0.3);
      box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    }
    body.light-mode .help-dropdown-item {
      border-bottom-color: rgba(0,0,0,0.06);
    }
    body.light-mode .help-dropdown-item:hover {
      background: rgba(34, 197, 94, 0.08);
    }
    body.light-mode .help-title { color: #1a1a1a; }
    body.light-mode .help-desc { color: #666; }
    body.light-mode .modal-content {
      background: #ffffff;
      border-color: rgba(34, 197, 94, 0.25);
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
    body.light-mode .modal-header {
      border-bottom-color: rgba(0,0,0,0.1);
    }
    body.light-mode .modal-close { color: #888; }
    body.light-mode .modal-close:hover { color: #333; }
    body.light-mode .modal-body { color: #444; }
    body.light-mode .modal-overlay {
      background: rgba(0,0,0,0.4);
    }
    body.light-mode .section-label { color: #444; }
    body.light-mode .dropdown-trigger {
      background: rgba(255,255,255,0.7);
      border-color: rgba(0,0,0,0.12);
      color: #1a1a1a;
    }
    body.light-mode .dropdown-trigger:hover {
      border-color: rgba(34, 197, 94, 0.4);
    }
    body.light-mode .dropdown-trigger.open {
      border-color: rgba(34, 197, 94, 0.5);
    }
    body.light-mode .dropdown-selected .style-desc { color: #777; }
    body.light-mode .dropdown-arrow { color: #777; }
    body.light-mode .dropdown-menu {
      background: #ffffff;
      border-color: rgba(34, 197, 94, 0.35);
      box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }
    body.light-mode .dropdown-item {
      border-bottom-color: rgba(0,0,0,0.05);
    }
    body.light-mode .dropdown-item:hover {
      background: rgba(34, 197, 94, 0.06);
    }
    body.light-mode .dropdown-item .style-name { color: #1a1a1a; }
    body.light-mode .dropdown-item .style-desc { color: #777; }
    body.light-mode .upload-area {
      border-color: rgba(0,0,0,0.15);
      background: rgba(255,255,255,0.5);
    }
    body.light-mode .upload-area:hover {
      border-color: rgba(34, 197, 94, 0.4);
      background: rgba(34, 197, 94, 0.04);
    }
    body.light-mode .upload-text { color: #444; }
    body.light-mode .upload-hint { color: #777; }
    body.light-mode .format-badge {
      background: rgba(0,0,0,0.06);
      color: #555;
    }
    body.light-mode #inputText {
      background: rgba(255,255,255,0.8);
      border-color: rgba(0,0,0,0.12);
      color: #1a1a1a;
    }
    body.light-mode #inputText:focus {
      border-color: rgba(34, 197, 94, 0.5);
      box-shadow: 0 0 20px rgba(34, 197, 94, 0.08);
    }
    body.light-mode #inputText::placeholder { color: #aaa; }
    body.light-mode .input-stats { color: #777; }
    body.light-mode .small-text-btn {
      border-color: rgba(0,0,0,0.12);
      color: #666;
    }
    body.light-mode .small-text-btn:hover {
      border-color: rgba(0,0,0,0.25);
      color: #333;
    }
    body.light-mode .textarea-header .section-label { color: #444; }
    body.light-mode .output-panel {
      background: rgba(0,0,0,0.01);
    }
    body.light-mode main.split .input-panel {
      border-bottom-color: rgba(0,0,0,0.08);
    }
    body.light-mode .export-btn.copy {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.12);
      color: #666;
    }
    body.light-mode .export-btn.copy:hover {
      background: rgba(0,0,0,0.08);
      color: #333;
    }
    body.light-mode .toggle-btn {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.12);
      color: #666;
    }
    body.light-mode .toggle-switch { background: #ccc; }
    body.light-mode .bionic-section {
      background: rgba(168, 85, 247, 0.06);
      border-color: rgba(168, 85, 247, 0.15);
    }
    body.light-mode .bionic-preview {
      background: rgba(0,0,0,0.04);
      color: #333;
    }
    body.light-mode .compare-section {
      background: rgba(6, 182, 212, 0.06);
      border-color: rgba(6, 182, 212, 0.15);
    }
    body.light-mode .dark-output-section {
      background: rgba(139, 92, 246, 0.06);
      border-color: rgba(139, 92, 246, 0.15);
    }
    body.light-mode .dyslexic-section {
      background: rgba(236, 72, 153, 0.06);
      border-color: rgba(236, 72, 153, 0.15);
    }
    body.light-mode .customize-panel {
      background: rgba(0,0,0,0.03);
      border-color: rgba(34, 197, 94, 0.2);
    }
    body.light-mode .customize-header:hover {
      background: rgba(34, 197, 94, 0.06);
    }
    body.light-mode .control-label { color: #666; }
    body.light-mode .size-input,
    body.light-mode .color-hex,
    body.light-mode .spacing-select {
      background: rgba(255,255,255,0.8);
      border-color: rgba(0,0,0,0.12);
      color: #1a1a1a;
    }
    body.light-mode .spacing-select option {
      background: #fff;
      color: #1a1a1a;
    }
    body.light-mode .color-input {
      border-color: rgba(0,0,0,0.15);
    }
    body.light-mode .size-unit { color: #999; }
    body.light-mode .bionic-labels { color: #999; }
    body.light-mode .recent-files-section {
      background: rgba(59, 130, 246, 0.06);
      border-color: rgba(59, 130, 246, 0.15);
    }
    body.light-mode .recent-file-item {
      background: rgba(59, 130, 246, 0.08);
      border-color: rgba(59, 130, 246, 0.2);
      color: #2563eb;
    }
    body.light-mode .recent-file-item:hover {
      background: rgba(59, 130, 246, 0.15);
    }
    body.light-mode .reading-stats-section {
      background: rgba(245, 158, 11, 0.06);
      border-color: rgba(245, 158, 11, 0.15);
    }
    body.light-mode .file-info-bar {
      background: rgba(34, 197, 94, 0.06);
      border-color: rgba(34, 197, 94, 0.2);
    }
    body.light-mode .app-footer {
      background: rgba(255,255,255,0.92);
      border-top-color: rgba(0,0,0,0.08);
    }
    body.light-mode .footer-content p { color: #888; }
    body.light-mode .footer-content a { color: #16a34a; }
    body.light-mode .toast {
      background: #ffffff;
      border-color: rgba(34, 197, 94, 0.35);
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    body.light-mode .toast.error {
      border-color: rgba(239, 68, 68, 0.35);
    }
    body.light-mode .output-stats { color: #999; }

    /* Light mode - zoom controls */
    body.light-mode .zoom-btn {
      background: rgba(0,0,0,0.06);
      border-color: rgba(0,0,0,0.15);
      color: #333;
    }
    body.light-mode .zoom-btn:hover {
      background: rgba(0,0,0,0.12);
      border-color: rgba(0,0,0,0.25);
    }
    body.light-mode .zoom-level { color: #555; }

    /* Light mode - reading stats */
    body.light-mode .stat-value { color: #b45309; }
    body.light-mode .stat-label { color: #555; }
    body.light-mode .stat-highlight { background: rgba(168, 85, 247, 0.1); }
    body.light-mode .stat-highlight .stat-value { color: #7c3aed; }

    /* Light mode - toggle buttons */
    body.light-mode .toggle-btn { color: #444; }
    body.light-mode .toggle-name { color: #444; }
    body.light-mode .toggle-state { color: #666; }

    /* Light mode - recent files */
    body.light-mode .recent-files-clear { color: #555; }
    body.light-mode .recent-files-clear:hover { color: #dc2626; }

    /* Light mode - file info */
    body.light-mode .file-info-details { color: #16a34a; }
    body.light-mode .file-remove { color: #dc2626; }

    /* Light mode - output header */
    body.light-mode .output-header-title { color: #16a34a; }
    body.light-mode .export-btn.clear {
      background: rgba(0,0,0,0.04);
      border-color: rgba(0,0,0,0.12);
      color: #666;
    }
    body.light-mode .export-btn.clear:hover {
      background: rgba(0,0,0,0.08);
      color: #333;
    }

    /* Light mode - customize panel */
    body.light-mode .customize-title { color: #16a34a; }
    body.light-mode .customize-toggle { color: #16a34a; }

    /* Light mode - bionic slider */
    body.light-mode .bionic-slider-container { color: #444; }
    body.light-mode .bionic-value { color: #555; }

    /* Light mode - customize dropdown overlay */
    body.light-mode .customize-content {
      background: rgba(255, 255, 255, 0.97);
      border-color: rgba(34, 197, 94, 0.25);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

    /* ============================================
       MOBILE RESPONSIVE — Components
       ============================================ */

    /* Tablets */
    @media (max-width: 900px) {
      .compare-container.visible {
        grid-template-columns: 1fr;
      }
    }

    /* Mobile phones */
    @media (max-width: 768px) {
      .output-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
      }
      .output-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.3rem;
      }
      .export-btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
        font-size: 0.62rem;
        padding: 0.35rem 0.4rem;
      }
      .output-toggles-bar {
        flex-direction: column;
        gap: 0.25rem;
      }
      .output-toggles-bar > div {
        width: 100%;
      }
      .output-toggles-bar .compare-header,
      .output-toggles-bar .dark-output-header,
      .output-toggles-bar .dyslexic-header,
      .output-toggles-bar .bionic-header {
        justify-content: space-between;
      }
      .bionic-slider-container {
        max-width: 100%;
        flex-direction: column;
        gap: 0.3rem;
      }
      .bionic-slider {
        width: 100%;
      }
      .align-customize-row.visible {
        flex-direction: column;
      }
      .text-align-group {
        align-self: flex-start;
      }
      .text-format-group {
        align-self: flex-start;
        flex-wrap: wrap;
      }
      .format-font {
        width: 80px;
      }
      .customize-panel {
        padding: 0.4rem;
      }
      .customize-content {
        min-width: 0;
        left: 0;
        right: 0;
        max-width: 95vw;
      }
      .control-group {
        grid-template-columns: 1fr;
      }
      .compare-pane {
        padding: 1rem;
      }
      .theme-toggle-wrapper {
        margin-right: 0.3rem;
      }
      .theme-toggle-label {
        font-size: 0.65rem;
      }
      .app-footer {
        padding: 1rem;
      }
      .footer-content p {
        font-size: 0.75rem;
      }
    }

    /* Small mobile phones */
    @media (max-width: 480px) {
      .output-actions {
        gap: 0.2rem;
      }
      .export-btn {
        font-size: 0.58rem;
        padding: 0.3rem 0.3rem;
        gap: 0.15rem;
      }
      .toggle-btn {
        font-size: 0.6rem;
        padding: 0.25rem 0.4rem;
      }
      .customize-title {
        font-size: 0.65rem;
      }
      .bionic-preview {
        font-size: 0.7rem;
      }
      .toast {
        left: 0.5rem;
        right: 0.5rem;
        transform: translateX(0) translateY(100px);
        width: auto;
        text-align: center;
        font-size: 0.8rem;
        padding: 0.75rem 1rem;
      }
      .toast.visible {
        transform: translateX(0) translateY(0);
      }
    }