:root {
      color-scheme: light;
      --chrome: rgba(244,235,216,.84);
      --chrome-strong: rgba(250,244,231,.94);
      --line: rgba(92,70,41,.18);
      --soft-line: rgba(92,70,41,.10);
      --reader-wash: radial-gradient(circle at top left, rgba(177,123,56,.14), transparent 34%), #d8c6a8;
    }
    html.dark {
      color-scheme: dark;
      --chrome: rgba(15,23,42,.78);
      --chrome-strong: rgba(15,23,42,.94);
      --line: rgba(148,163,184,.18);
      --soft-line: rgba(148,163,184,.10);
      --reader-wash: radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 32%), #020617;
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 12% -10%, rgba(177,123,56,.16), transparent 34%),
        radial-gradient(circle at 88% -8%, rgba(120,84,45,.10), transparent 30%),
        #efe3cc;
    }
    html:not(.dark) body { color: #2d2418; }
    html.dark body { background: radial-gradient(circle at 18% -10%, rgba(56,189,248,.12), transparent 34%), #020617; }

    header, body > section:first-of-type, footer, aside {
      background: var(--chrome);
      border-color: var(--line) !important;
      backdrop-filter: blur(16px);
    }
    header { box-shadow: 0 14px 35px rgba(92,70,41,.10); }
    html.dark header { box-shadow: 0 14px 35px rgba(0,0,0,.32); }
    html:not(.dark) header,
    html:not(.dark) body > section:first-of-type,
    html:not(.dark) footer,
    html:not(.dark) aside { color: #2d2418; }
    html:not(.dark) .text-slate-500,
    html:not(.dark) .text-slate-400 { color: #6b5a42 !important; }
    html:not(.dark) .border-slate-200,
    html:not(.dark) .border-slate-700 { border-color: rgba(92,70,41,.18) !important; }

    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
    .dark ::-webkit-scrollbar-thumb { background: #475569; background-clip: content-box; }

    .btn-tool {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      min-height: 2.15rem;
      padding: .42rem .72rem;
      border-radius: .72rem;
      border: 1px solid var(--soft-line);
      background: rgba(244,235,216,.86);
      color: #3f3325;
      font-weight: 600;
      transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
    }
    html.dark .btn-tool { background: rgba(30,41,59,.82); color: #e2e8f0; }
    .btn-tool:not(:disabled):hover {
      transform: translateY(-1px);
      border-color: rgba(138,90,34,.35);
      color: #7c4a14;
      background: rgba(239,225,196,.95);
    }
    html.dark .btn-tool:not(:disabled):hover { background: rgba(15,23,42,.98); color: #38bdf8; }
    .btn-tool:disabled { opacity: .42; cursor: not-allowed; transform: none; }

    .toc-link {
      display: block;
      padding: .48rem .6rem;
      border-radius: .7rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #5f4d35;
      transition: background .14s ease, color .14s ease, transform .14s ease;
    }
    html.dark .toc-link { color: #cbd5e1; }
    .toc-link:hover { background: rgba(138,90,34,.10); color: #7c4a14; transform: translateX(2px); }
    html.dark .toc-link:hover { background: rgba(56,189,248,.10); color: #7dd3fc; }

    .reader-area {
      background: var(--reader-wash) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 18px 0 40px rgba(15,23,42,.03);
    }
    .reader-area:focus-visible { outline: 2px solid #0ea5e9; outline-offset: -2px; }

    html:fullscreen header,
    html:fullscreen body > section:first-of-type,
    html:fullscreen footer,
    html:fullscreen aside {
      display: none !important;
    }

    html:fullscreen body > section.flex-1,
    html:fullscreen #readerPane {
      width: 100vw;
      height: 100vh;
    }

    #dropzone {
      box-shadow: inset 0 0 0 1px rgba(255,248,232,.45), 0 24px 70px rgba(92,70,41,.14);
      backdrop-filter: blur(10px);
    }
    html:not(.dark) #dropzone {
      background: rgba(244,235,216,.70) !important;
      color: #6b5a42 !important;
    }
    html.dark #dropzone {
      background: rgba(15,23,42,.55) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 24px 70px rgba(0,0,0,.35);
    }

    #textView {
      margin: 1.25rem auto;
      height: calc(100% - 2.5rem);
      border-radius: 1.25rem;
      border: 1px solid var(--soft-line);
      background: rgba(216,198,168,.92);
      box-shadow: 0 24px 70px rgba(92,70,41,.14);
      color: #2d2418;
      line-height: 1.75;
    }
    html.dark #textView { background: rgba(15,23,42,.68); color: #e2e8f0; box-shadow: 0 24px 70px rgba(0,0,0,.36); }
    #textView.prose { white-space: normal; }
    #textView.prose p { margin: 0 0 1.2em; line-height: 1.85; }
    #textView.prose h2, #textView.prose h3 { font-weight: 800; margin-top: 1.5em; margin-bottom: .5em; letter-spacing: -.025em; }
    #textView.prose h2 { font-size: 1.5em; }

    #pdfView {
      background: linear-gradient(180deg, rgba(216,198,168,.96), rgba(198,178,140,.86)) !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
    }
    html.dark #pdfView { background: linear-gradient(180deg, #020617, #0f172a) !important; }
    #pdfCanvasWrap {
      min-width: max-content;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
    #pdfCanvas { box-shadow: 0 30px 80px rgba(15,23,42,.25); }
    #pdfCanvas.pdf-inverted { filter: invert(1) hue-rotate(180deg); }
    #comicView img { box-shadow: 0 30px 80px rgba(15,23,42,.25); }

    html:not(.dark) select,
    html:not(.dark) input[type="range"] {
      background-color: rgba(244,235,216,.90) !important;
      border-color: rgba(92,70,41,.18) !important;
      color: #2d2418 !important;
    }
    html:not(.dark) .bg-slate-100\/90,
    html:not(.dark) .dark\:bg-slate-800\/90 {
      background-color: rgba(244,235,216,.88) !important;
    }
    #epubMount { background: transparent; }
    select, input[type="range"], button, label { -webkit-tap-highlight-color: transparent; }

/* --- Mobile / Touch Fullscreen Controls --- */
.touch-fullscreen-controls {
  display: none;
  position: fixed;
  left: 50%;
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  gap: 0.45rem;
  padding: 0.35rem;
  border: 1px solid var(--soft-line);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.touch-fullscreen-btn {
  min-width: 2.75rem;
  min-height: 2.5rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(248, 250, 252, 0.12);
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 800;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.touch-fullscreen-btn:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.touch-fullscreen-exit {
  padding-inline: 0.95rem;
}

@media (pointer: coarse) {
  #fullscreenBtn {
    display: inline-flex !important;
  }

  html:fullscreen #touchFullscreenControls {
    display: flex;
  }
}