:root {
      --paper: #f7e6bd;
      --paper-2: #d5a95c;
      --ink: #2a1c10;
      --muted: #7b5d32;
      --line: rgba(72, 45, 20, .16);
      --accent: #a96f22;
      --accent-2: #f4c66f;
      --surface: rgba(255, 239, 198, .42);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-top: env(safe-area-inset-top, 0px);
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

    html, body {
      margin: 0;
      width: 100%;
      min-height: 100%;
      background: var(--paper);
      color: var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow: hidden;
    }

    body.dark {
      --paper: #191714;
      --paper-2: #24211c;
      --ink: #f2dec0;
      --muted: #a99475;
      --line: rgba(255,255,255,.09);
      --accent: #e0a04f;
      --accent-2: #f6c978;
      --surface: rgba(255,255,255,.06);
    }

    body.clean {
      --paper: #fff9ed;
      --paper-2: #f3dfb7;
      --ink: #2d2115;
      --muted: #816744;
      --line: rgba(95, 67, 32, .14);
      --accent: #b7822f;
      --accent-2: #f3c76b;
      --surface: rgba(179, 130, 47, .08);
    }

    .app {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      display: grid;
      grid-template-rows: auto 1fr;
      background:
        linear-gradient(90deg, rgba(0,0,0,.035), transparent 8%, transparent 92%, rgba(0,0,0,.035)),
        var(--paper);
      position: relative;
      overflow: hidden;
    }

    .appbar {
      padding: calc(10px + var(--safe-top)) 16px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--paper) 92%, transparent);
      backdrop-filter: blur(16px);
      position: relative;
      z-index: 10;
    }

    .icon-btn {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink);
      display: grid;
      place-items: center;
      font-size: 18px;
      cursor: pointer;
    }

    button {
      border: 0;
      font: inherit;
      cursor: pointer;
    }

    .titlebar {
      min-width: 0;
      text-align: center;
    }

    .book-title-small {
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: var(--ink);
    }

    .chapter-small {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    .reader {
      position: relative;
      overflow: hidden;
      min-height: 0;
      perspective: 1200px;
      transform-style: preserve-3d;
    }

    .page {
      height: 100%;
      overflow-y: auto;
      padding: 28px 26px calc(116px + var(--safe-bottom));
      scrollbar-width: none;
      scroll-behavior: smooth;
      max-width: 760px;
      margin: 0 auto;
      width: 100%;
    }

    .page::-webkit-scrollbar { display: none; }

    /* Soft reading transition: calm fade + tiny slide, no page-flip. */
    .page.soft-out-next { animation: softOutNext .16s ease both; }
    .page.soft-in-next { animation: softInNext .24s ease both; }
    .page.soft-out-prev { animation: softOutPrev .16s ease both; }
    .page.soft-in-prev { animation: softInPrev .24s ease both; }

    @keyframes softOutNext {
      from { opacity: 1; transform: translateX(0); filter: blur(0); }
      to { opacity: 0; transform: translateX(-8px); filter: blur(.4px); }
    }

    @keyframes softInNext {
      from { opacity: 0; transform: translateX(8px); filter: blur(.4px); }
      to { opacity: 1; transform: translateX(0); filter: blur(0); }
    }

    @keyframes softOutPrev {
      from { opacity: 1; transform: translateX(0); filter: blur(0); }
      to { opacity: 0; transform: translateX(8px); filter: blur(.4px); }
    }

    @keyframes softInPrev {
      from { opacity: 0; transform: translateX(-8px); filter: blur(.4px); }
      to { opacity: 1; transform: translateX(0); filter: blur(0); }
    }


    .cover {
      min-height: calc(100vh - 67px);
      min-height: calc(100dvh - 67px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 38px 28px calc(128px + var(--safe-bottom));
      background:
        radial-gradient(circle at 50% 24%, rgba(255,255,255,.18), transparent 13rem),
        linear-gradient(155deg, #5f2a16, #23120c 62%, #130906);
      color: #fff0d4;
      position: relative;
      overflow: hidden;
      border-radius: 0;
      margin: -28px -26px calc(-116px - var(--safe-bottom));
    }


    .cover.image-cover {
      background: #2a180d;
      padding: 0;
      margin: -28px -26px calc(-116px - var(--safe-bottom));
      align-items: center;
      justify-content: center;
    }

    .cover.image-cover::before,
    .cover.image-cover::after {
      display: none;
    }



    .rain-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
      mix-blend-mode: screen;
    }

    .rain-layer::before,
    .rain-layer::after {
      content: "";
      position: absolute;
      inset: -120% 0 0 0;
      background-repeat: repeat;
      transform: skewX(-12deg);
      animation: rainFall 0.72s linear infinite;
      opacity: .42;
    }

    .rain-layer::before {
      background-image: repeating-linear-gradient(
        100deg,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) 18px,
        rgba(255,242,190,.58) 19px,
        rgba(255,255,255,0) 22px
      );
      background-size: 92px 72px;
    }

    .rain-layer::after {
      animation-duration: 1.08s;
      opacity: .28;
      background-image: repeating-linear-gradient(
        100deg,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) 26px,
        rgba(255,255,255,.48) 27px,
        rgba(255,255,255,0) 30px
      );
      background-size: 132px 96px;
    }

    .rain-mist {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 42%;
      z-index: 3;
      pointer-events: none;
      background: linear-gradient(180deg, transparent, rgba(255,236,184,.14), rgba(255,255,255,.08));
      animation: mistMove 4.8s ease-in-out infinite alternate;
    }

    .cover-shimmer {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background: radial-gradient(circle at 72% 38%, rgba(255,223,141,.22), transparent 11rem);
      opacity: .45;
      animation: coverGlow 3.8s ease-in-out infinite alternate;
    }

    @keyframes rainFall {
      from { transform: translate3d(0, -18%, 0) skewX(-12deg); }
      to { transform: translate3d(-6%, 58%, 0) skewX(-12deg); }
    }

    @keyframes mistMove {
      from { opacity: .28; transform: translateY(8px); }
      to { opacity: .5; transform: translateY(0); }
    }

    @keyframes coverGlow {
      from { opacity: .28; }
      to { opacity: .55; }
    }



    .cover-rain-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .rain-layer { display: none; }

    .rain-mist {
      z-index: 4;
      height: 48%;
      background:
        radial-gradient(ellipse at 50% 70%, rgba(255, 220, 140, .18), transparent 48%),
        linear-gradient(180deg, transparent, rgba(225, 188, 105, .12), rgba(255,255,255,.075));
      animation: mistMove 5.8s ease-in-out infinite alternate;
    }

    .cover-shimmer {
      z-index: 5;
      background:
        radial-gradient(circle at 70% 39%, rgba(255,231,154,.22), transparent 8rem),
        linear-gradient(180deg, rgba(255,206,108,.04), transparent 40%, rgba(255,230,171,.07));
      opacity: .42;
      animation: coverGlow 4.8s ease-in-out infinite alternate;
    }

    .cover-img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      min-height: calc(100vh - 67px);
      min-height: calc(100dvh - 67px);
      object-fit: cover;
      object-position: center center;
      display: block;
      background: #2a180d;
    }

    .cover::before {
      content: "";
      position: absolute;
      inset: 22px;
      border: 1px solid rgba(239, 179, 89, .55);
      border-radius: 26px;
      pointer-events: none;
    }

    .cover::after {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(239, 179, 89, .12);
      right: -105px;
      bottom: -95px;
    }

    .cover-kicker {
      position: relative;
      z-index: 1;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #efb359;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 22px;
    }

    .cover h1 {
      position: relative;
      z-index: 1;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(46px, 12vw, 74px);
      line-height: .94;
      letter-spacing: -.065em;
      margin: 0;
    }

    .cover-line {
      position: relative;
      z-index: 1;
      width: 128px;
      height: 1px;
      background: linear-gradient(90deg, transparent, #efb359, transparent);
      margin: 30px auto;
    }

    .cover p {
      position: relative;
      z-index: 1;
      margin: 0 auto;
      max-width: 330px;
      line-height: 1.7;
      color: rgba(255,240,212,.78);
      font-size: 15px;
      font-family: ui-sans-serif, system-ui, sans-serif;
    }

    .author {
      position: relative;
      z-index: 1;
      margin-top: 52px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: #efb359;
      font-size: 12px;
      font-weight: 900;
    }

    .tap-hint {
      position: absolute;
      z-index: 6;
      left: 50%;
      bottom: calc(92px + var(--safe-bottom));
      transform: translateX(-50%);
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.14);
      font-size: 12px;
      color: rgba(255,240,212,.86);
      white-space: nowrap;
    }

    .chapter-label {
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 900;
      color: var(--accent);
      margin-bottom: 14px;
    }

    .page h2 {
      margin: 0 0 20px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--heading-size, 34px);
      line-height: 1.05;
      letter-spacing: -.05em;
      color: var(--ink);
    }

    .page p {
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--font-size, 18px);
      line-height: 1.82;
      color: var(--ink);
      margin: 0 0 18px;
    }

    .page .dropcap::first-letter {
      float: left;
      font-size: calc(var(--font-size, 18px) * 3.8);
      line-height: .78;
      padding: 11px 9px 0 0;
      color: var(--accent);
      font-weight: bold;
    }

    .quote {
      margin: 24px 0;
      padding: 18px;
      border-left: 4px solid var(--accent);
      border-radius: 0 18px 18px 0;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      font-family: Georgia, "Times New Roman", serif;
      font-size: var(--font-size, 18px);
      line-height: 1.75;
      color: var(--ink);
      font-style: italic;
    }

    .task-box {
      margin: 22px 0;
      padding: 18px;
      border-radius: 20px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
      border: 1px solid var(--line);
    }

    .task-box strong {
      display: block;
      font-size: 13px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 8px;
    }

    .task-box p { margin-bottom: 0; }

    .bottom {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 10px 16px calc(16px + var(--safe-bottom));
      background: linear-gradient(180deg, transparent, var(--paper) 24%, var(--paper));
      z-index: 8;
    }

    .bottom-inner {
      max-width: 760px;
      margin: 0 auto;
    }

    .progress-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .bar {
      flex: 1;
      height: 7px;
      border-radius: 999px;
      background: var(--line);
      overflow: hidden;
    }

    .bar span {
      display: block;
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transition: width .25s ease;
    }

    .navrow {
      display: grid;
      grid-template-columns: 48px 1fr 48px;
      gap: 10px;
      align-items: center;
    }

    .primary-nav {
      height: 50px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: linear-gradient(135deg, #c49037, #5b3514);
      color: #fff6df;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 28%, transparent);
    }

    .primary-nav:disabled, .icon-btn:disabled { opacity: .38; cursor: not-allowed; }



    .page-turn {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 58%;
      z-index: 18;
      pointer-events: none;
      opacity: 0;
      display: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.18), rgba(0,0,0,.10) 42%, rgba(255,255,255,.30)),
        linear-gradient(180deg, color-mix(in srgb, var(--paper) 96%, #fff), color-mix(in srgb, var(--paper-2) 88%, #fff));
      box-shadow: 0 18px 42px rgba(43, 28, 12, .26);
      transform-style: preserve-3d;
      backface-visibility: hidden;
      overflow: hidden;
    }

    .page-turn::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent),
        repeating-linear-gradient(180deg, rgba(70,45,20,.035) 0 1px, transparent 1px 28px);
      opacity: .55;
    }

    .page-turn::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 24px;
      background: linear-gradient(90deg, rgba(0,0,0,.22), transparent);
      opacity: .35;
    }

    .page-turn.turn-next {
      display: block;
      right: 0;
      transform-origin: left center;
      border-radius: 18px 0 0 18px;
      animation: pageOpenNext .62s cubic-bezier(.2,.72,.18,1) both;
    }

    .page-turn.turn-next::after { left: 0; }

    .page-turn.turn-prev {
      display: block;
      left: 0;
      transform-origin: right center;
      border-radius: 0 18px 18px 0;
      animation: pageOpenPrev .62s cubic-bezier(.2,.72,.18,1) both;
    }

    .page-turn.turn-prev::after {
      right: 0;
      transform: scaleX(-1);
    }

    .page.turning-content-next {
      animation: contentSettleNext .62s cubic-bezier(.2,.72,.18,1) both;
    }

    .page.turning-content-prev {
      animation: contentSettlePrev .62s cubic-bezier(.2,.72,.18,1) both;
    }

    @keyframes pageOpenNext {
      0% { opacity: 0; transform: rotateY(0deg) translateX(0); filter: brightness(1); }
      8% { opacity: 1; }
      48% { opacity: 1; transform: rotateY(-72deg) translateX(-6px); filter: brightness(.92); }
      100% { opacity: 0; transform: rotateY(-156deg) translateX(-42px); filter: brightness(.8); }
    }

    @keyframes pageOpenPrev {
      0% { opacity: 0; transform: rotateY(0deg) translateX(0); filter: brightness(1); }
      8% { opacity: 1; }
      48% { opacity: 1; transform: rotateY(72deg) translateX(6px); filter: brightness(.92); }
      100% { opacity: 0; transform: rotateY(156deg) translateX(42px); filter: brightness(.8); }
    }

    @keyframes contentSettleNext {
      0% { transform: translateX(0); filter: brightness(1); }
      46% { transform: translateX(-8px); filter: brightness(.96); }
      100% { transform: translateX(0); filter: brightness(1); }
    }

    @keyframes contentSettlePrev {
      0% { transform: translateX(0); filter: brightness(1); }
      46% { transform: translateX(8px); filter: brightness(.96); }
      100% { transform: translateX(0); filter: brightness(1); }
    }

    .flip-next { animation: flipNext .28s ease; }
    .flip-prev { animation: flipPrev .28s ease; }

    @keyframes flipNext {
      0% { transform: translateX(0) rotateY(0); opacity: 1; filter: brightness(1); }
      50% { transform: translateX(-16px) rotateY(-10deg); opacity: .72; filter: brightness(.94); }
      100% { transform: translateX(0) rotateY(0); opacity: 1; filter: brightness(1); }
    }

    @keyframes flipPrev {
      0% { transform: translateX(0) rotateY(0); opacity: 1; filter: brightness(1); }
      50% { transform: translateX(16px) rotateY(10deg); opacity: .72; filter: brightness(.94); }
      100% { transform: translateX(0) rotateY(0); opacity: 1; filter: brightness(1); }
    }



    /* Realistic mobile page-turn: current page becomes a sheet that folds away,
       revealing the next page underneath. */
    .page-next-preview,
    .flip-sheet {
      position: absolute;
      inset: 0;
      max-width: 760px;
      width: 100%;
      margin: 0 auto;
      background:
        linear-gradient(90deg, rgba(0,0,0,.035), transparent 8%, transparent 92%, rgba(0,0,0,.035)),
        var(--paper);
      padding: 28px 26px calc(116px + var(--safe-bottom));
      overflow: hidden;
      scrollbar-width: none;
    }

    .page-next-preview {
      z-index: 1;
      opacity: 0;
      transform: scale(.992);
      filter: brightness(.96);
      pointer-events: none;
    }

    .page-next-preview.show-preview {
      opacity: 1;
      animation: nextPageSoftIn 1.05s cubic-bezier(.22,.61,.15,1) both;
    }

    .reader.page-animating .page#page {
      opacity: 0;
    }

    .flip-sheet {
      z-index: 7;
      display: none;
      pointer-events: none;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      will-change: transform, opacity, filter;
      transform: translateZ(0);
      box-shadow: 0 16px 38px rgba(43, 28, 12, .24);
    }

    .flip-sheet::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.18), transparent 26%, rgba(0,0,0,.22) 82%, rgba(0,0,0,.38)),
        radial-gradient(circle at 100% 50%, rgba(255,255,255,.38), transparent 18rem);
      opacity: 0;
    }

    .flip-sheet::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 42px;
      z-index: 5;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent, rgba(0,0,0,.22)),
        radial-gradient(ellipse at right center, rgba(255,255,255,.42), transparent 68%);
      opacity: .55;
    }

    .flip-sheet.flip-to-next {
      display: block;
      transform-origin: left center;
      animation: realPageNext 1.05s cubic-bezier(.22,.61,.15,1) both;
    }

    .flip-sheet.flip-to-next::before {
      animation: paperShadeNext 1.05s cubic-bezier(.22,.61,.15,1) both;
    }

    .flip-sheet.flip-to-prev {
      display: block;
      transform-origin: right center;
      animation: realPagePrev 1.05s cubic-bezier(.22,.61,.15,1) both;
    }

    .flip-sheet.flip-to-prev::before {
      animation: paperShadePrev 1.05s cubic-bezier(.22,.61,.15,1) both;
    }

    .flip-sheet.flip-to-prev::after {
      left: 0;
      right: auto;
      transform: scaleX(-1);
    }

    @keyframes realPageNext {
      0%   { opacity: 1; transform: perspective(1400px) rotateY(0deg) translateX(0) scaleX(1); filter: brightness(1); }
      16%  { opacity: 1; transform: perspective(1400px) rotateY(-10deg) translateX(-2px) scaleX(.995); filter: brightness(1); }
      38%  { opacity: 1; transform: perspective(1400px) rotateY(-42deg) translateX(-10px) scaleX(.985); filter: brightness(.97); }
      64%  { opacity: .96; transform: perspective(1400px) rotateY(-78deg) translateX(-26px) scaleX(.96); filter: brightness(.92); }
      84%  { opacity: .55; transform: perspective(1400px) rotateY(-104deg) translateX(-46px) scaleX(.92); filter: brightness(.88); }
      100% { opacity: 0; transform: perspective(1400px) rotateY(-118deg) translateX(-62px) scaleX(.88); filter: brightness(.84); }
    }

    @keyframes realPagePrev {
      0%   { opacity: 1; transform: perspective(1400px) rotateY(0deg) translateX(0) scaleX(1); filter: brightness(1); }
      16%  { opacity: 1; transform: perspective(1400px) rotateY(10deg) translateX(2px) scaleX(.995); filter: brightness(1); }
      38%  { opacity: 1; transform: perspective(1400px) rotateY(42deg) translateX(10px) scaleX(.985); filter: brightness(.97); }
      64%  { opacity: .96; transform: perspective(1400px) rotateY(78deg) translateX(26px) scaleX(.96); filter: brightness(.92); }
      84%  { opacity: .55; transform: perspective(1400px) rotateY(104deg) translateX(46px) scaleX(.92); filter: brightness(.88); }
      100% { opacity: 0; transform: perspective(1400px) rotateY(118deg) translateX(62px) scaleX(.88); filter: brightness(.84); }
    }

    @keyframes nextPageSoftIn {
      0% { opacity: .72; transform: scale(.992); filter: brightness(.94); }
      52% { opacity: .88; transform: scale(.996); filter: brightness(.97); }
      100% { opacity: 1; transform: scale(1); filter: brightness(1); }
    }

    @keyframes paperShadeNext {
      0% { opacity: .04; }
      28% { opacity: .18; }
      58% { opacity: .48; }
      82% { opacity: .34; }
      100% { opacity: .06; }
    }

    @keyframes paperShadePrev {
      0% { opacity: .04; transform: scaleX(-1); }
      28% { opacity: .18; transform: scaleX(-1); }
      58% { opacity: .48; transform: scaleX(-1); }
      82% { opacity: .34; transform: scaleX(-1); }
      100% { opacity: .06; transform: scaleX(-1); }
    }

    .page-turn { display: none !important; }

    /* Disable previous page-flip layers */
    .page-next-preview,
    .flip-sheet {
      display: none !important;
    }

    .sheet {
      position: absolute;
      inset: auto 0 0;
      max-height: 78%;
      background: var(--paper);
      border-radius: 28px 28px 0 0;
      border-top: 1px solid var(--line);
      box-shadow: 0 -20px 50px rgba(0,0,0,.25);
      z-index: 30;
      transform: translateY(110%);
      transition: transform .25s ease;
      padding: 12px 18px calc(24px + var(--safe-bottom));
      overflow: auto;
    }

    .sheet.open { transform: translateY(0); }

    .sheet-content {
      max-width: 760px;
      margin: 0 auto;
    }

    .handle {
      width: 44px;
      height: 5px;
      background: var(--line);
      border-radius: 999px;
      margin: 0 auto 16px;
    }

    .sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }

    .sheet h3 {
      margin: 0;
      font-size: 20px;
      color: var(--ink);
      letter-spacing: -.03em;
    }

    .toc { display: grid; gap: 9px; }

    .toc button {
      width: 100%;
      padding: 14px;
      border-radius: 17px;
      text-align: left;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink);
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      font-weight: 850;
    }

    .toc small { color: var(--muted); font-weight: 800; }

    .settings { display: grid; gap: 16px; }

    .setting-card {
      padding: 15px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: var(--surface);
    }

    .setting-card label {
      display: block;
      font-weight: 900;
      color: var(--ink);
      margin-bottom: 10px;
    }

    .theme-row, .font-row { display: flex; gap: 8px; flex-wrap: wrap; }

    .chip {
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink);
      font-weight: 850;
    }

    .note {
      width: 100%;
      min-height: 150px;
      resize: vertical;
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink);
      border-radius: 18px;
      padding: 14px;
      outline: none;
      font: 15px/1.6 ui-sans-serif, system-ui, sans-serif;
    }

    .toast {
      position: absolute;
      left: 50%;
      bottom: calc(94px + var(--safe-bottom));
      transform: translateX(-50%) translateY(20px);
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      padding: 11px 14px;
      border-radius: 999px;
      background: rgba(20, 16, 13, .86);
      color: #fff6e8;
      font-size: 12px;
      font-weight: 800;
      transition: .22s ease;
      box-shadow: 0 12px 28px rgba(0,0,0,.25);
      white-space: nowrap;
    }

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

    @media (min-width: 800px) {
      html, body {
        background:
          radial-gradient(circle at 50% 0%, rgba(244,198,111,.16), transparent 28rem),
          linear-gradient(155deg, #3a2413, #1c110a 58%, #090604);
      }

      .app {
        max-width: none;
        width: 100vw;
        margin: 0;
        box-shadow: none;
        background:
          radial-gradient(circle at 50% 0%, rgba(244,198,111,.08), transparent 24rem),
          var(--paper);
      }

      .appbar {
        padding: 16px 34px 15px;
      }

      .book-title-small {
        font-size: 15px;
      }

      .chapter-small {
        font-size: 12px;
      }

      .reader {
        background:
          linear-gradient(90deg, rgba(0,0,0,.04), transparent 16%, transparent 84%, rgba(0,0,0,.04)),
          var(--paper);
      }

      .page {
        max-width: 860px;
        padding: 48px 72px 142px;
      }

      .page.cover-page {
        max-width: none;
        padding: 0;
      }

      .page.cover-page .cover.image-cover {
        margin: 0;
        min-height: calc(100vh - 74px);
        min-height: calc(100dvh - 74px);
        width: 100%;
        background:
          radial-gradient(circle at 50% 35%, rgba(244,198,111,.16), transparent 24rem),
          linear-gradient(155deg, #3a2413, #1c110a 62%, #090604);
      }

      .page.cover-page .cover-img {
        width: 100%;
        height: calc(100vh - 74px);
        height: calc(100dvh - 74px);
        min-height: 0;
        object-fit: contain;
        object-position: center center;
        background: transparent;
        filter: drop-shadow(0 24px 52px rgba(0,0,0,.36));
      }

      .bottom {
        padding-left: 34px;
        padding-right: 34px;
      }

      .bottom-inner {
        max-width: 860px;
      }

      .sheet-content {
        max-width: 760px;
      }
    }

    @media (max-width: 799px) {
      .page.cover-page .cover-img {
        object-fit: cover;
        object-position: center center;
      }
    }
  

    .access-gate {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 50% 18%, rgba(244,198,111,.20), transparent 18rem),
        linear-gradient(155deg, #3a2413, #160d08 62%, #070504);
      color: #fff3d6;
    }

    .access-gate.hidden {
      display: none;
    }

    .access-card {
      width: min(380px, 100%);
      padding: 30px 24px 24px;
      border-radius: 28px;
      background: rgba(255, 239, 198, .08);
      border: 1px solid rgba(244, 198, 111, .28);
      box-shadow: 0 28px 80px rgba(0,0,0,.38);
      backdrop-filter: blur(18px);
      text-align: center;
    }

    .access-mark {
      width: 62px;
      height: 62px;
      margin: 0 auto 18px;
      display: grid;
      place-items: center;
      border-radius: 21px;
      background: linear-gradient(135deg, #c49037, #5b3514);
      color: #fff6df;
      font-size: 28px;
      box-shadow: 0 14px 34px rgba(196,144,55,.24);
    }

    .access-card h1 {
      margin: 0 0 8px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 30px;
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .access-card p {
      margin: 0 0 20px;
      color: rgba(255,243,214,.72);
      line-height: 1.6;
      font-size: 14px;
    }

    .access-input {
      width: 100%;
      height: 54px;
      border: 1px solid rgba(244,198,111,.34);
      border-radius: 18px;
      background: rgba(255,255,255,.10);
      color: #fff8e8;
      outline: none;
      text-align: center;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: .18em;
      margin-bottom: 12px;
    }

    .access-input::placeholder {
      color: rgba(255,243,214,.38);
      letter-spacing: .08em;
      font-size: 15px;
      font-weight: 700;
    }

    .access-button {
      width: 100%;
      height: 52px;
      border-radius: 18px;
      border: 0;
      background: linear-gradient(135deg, #c49037, #5b3514);
      color: #fff6df;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(196,144,55,.20);
    }

    .access-error {
      min-height: 20px;
      margin-top: 12px;
      color: #ffd08a;
      font-size: 13px;
      font-weight: 800;
    }

    .access-hint {
      margin-top: 14px;
      color: rgba(255,243,214,.48);
      font-size: 12px;
    }

    body.locked .app {
      filter: blur(12px);
      pointer-events: none;
      user-select: none;
    }

  

    /* Extra responsive polish: mobile app + desktop reading desk */
    @media (min-width: 900px) {
      .appbar {
        max-width: 1180px;
        width: calc(100% - 48px);
        margin: 18px auto 0;
        border: 1px solid rgba(95, 67, 32, .14);
        border-radius: 22px;
        box-shadow: 0 14px 42px rgba(43, 28, 12, .12);
      }

      .reader {
        width: min(1180px, calc(100% - 48px));
        margin: 18px auto 0;
        border-radius: 30px 30px 0 0;
        border: 1px solid rgba(95, 67, 32, .12);
        border-bottom: 0;
        box-shadow: 0 24px 70px rgba(43, 28, 12, .16);
        background:
          radial-gradient(circle at 50% 0%, rgba(244,198,111,.10), transparent 28rem),
          linear-gradient(90deg, rgba(0,0,0,.035), transparent 14%, transparent 86%, rgba(0,0,0,.035)),
          var(--paper);
      }

      .page:not(.cover-page) {
        max-width: 900px;
        padding: 58px 86px 156px;
        background:
          linear-gradient(90deg, rgba(0,0,0,.025), transparent 9%, transparent 91%, rgba(0,0,0,.025)),
          var(--paper);
      }

      .page:not(.cover-page) h2 {
        max-width: 760px;
      }

      .page:not(.cover-page) p,
      .page:not(.cover-page) .quote,
      .page:not(.cover-page) .task-box {
        max-width: 760px;
      }

      .bottom {
        background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--paper) 92%, transparent) 22%, var(--paper));
      }

      .navrow {
        grid-template-columns: 54px minmax(260px, 420px) 54px;
        justify-content: center;
      }

      .icon-btn {
        width: 44px;
        height: 44px;
      }

      .navrow .icon-btn {
        width: 54px;
        height: 50px;
        border-radius: 18px;
      }

      .primary-nav {
        height: 50px;
      }
    }

    @media (min-width: 1200px) {
      .page:not(.cover-page) {
        max-width: 980px;
        padding-left: 110px;
        padding-right: 110px;
      }

      .page p {
        line-height: 1.9;
      }
    }

    @media (max-width: 520px) {
      .appbar {
        padding-left: 14px;
        padding-right: 14px;
      }

      .page {
        padding-left: 22px;
        padding-right: 22px;
      }

      .page h2 {
        font-size: calc(var(--heading-size, 34px) * .94);
      }

      .bottom {
        padding-left: 14px;
        padding-right: 14px;
      }
    }