html,body{height:100%}
  body{background:radial-gradient(1200px 600px at 10% -10%, rgba(201,119,43,.18), transparent 60%),
                   radial-gradient(900px 500px at 110% 10%, rgba(255,210,150,.18), transparent 60%),
                   linear-gradient(180deg,#fbf6ec,#f3e7c8); min-height:100vh;}
  .dark body{background:radial-gradient(1200px 600px at 10% -10%, rgba(201,119,43,.28), transparent 60%),
                       radial-gradient(900px 500px at 110% 10%, rgba(124,77,255,.12), transparent 60%),
                       linear-gradient(180deg,#0c0b15,#1b1a2b);}

  /* Candle flame */
  .candle{width:14px;height:14px;border-radius:9999px;
    background:radial-gradient(circle at 50% 30%, #fff2c2, #ffb347 50%, #c9772b 80%);
    box-shadow:0 0 24px 6px rgba(255,180,80,.7);
    animation: flicker 2.4s infinite ease-in-out;}
  @keyframes flicker{0%,100%{transform:scale(1) translateY(0);opacity:1}45%{transform:scale(.93) translateY(-1px);opacity:.85}70%{transform:scale(1.04);opacity:.95}}

  /* Premium animations */
  @keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes scaleIn{ from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
  @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
  .anim-fadeUp{animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
  .anim-fadeIn{animation:fadeIn .8s ease both}
  .anim-scaleIn{animation:scaleIn .5s cubic-bezier(.2,.7,.2,1) both}
  .stagger > *{animation:fadeUp .6s cubic-bezier(.2,.7,.2,1) both}
  .stagger > *:nth-child(1){animation-delay:.05s}
  .stagger > *:nth-child(2){animation-delay:.12s}
  .stagger > *:nth-child(3){animation-delay:.19s}
  .stagger > *:nth-child(4){animation-delay:.26s}
  .stagger > *:nth-child(5){animation-delay:.33s}

  /* Cards */
  .card{background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,240,.62));
        border:1px solid rgba(170,120,60,.18); border-radius:18px;
        box-shadow:0 10px 40px -20px rgba(60,30,10,.35), inset 0 1px 0 rgba(255,255,255,.7);
        backdrop-filter: blur(8px);}
  .dark .card{background:linear-gradient(180deg, rgba(40,36,55,.78), rgba(26,24,40,.7));
              border:1px solid rgba(255,255,255,.08);
              box-shadow:0 10px 40px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);}

  /* Tabs */
  .pill{padding:.4rem .85rem;border-radius:9999px;font-size:.78rem;font-weight:500;letter-spacing:.02em;
        border:1px solid rgba(170,120,60,.25);background:rgba(255,255,255,.6);
        transition:all .2s ease;cursor:pointer;white-space:nowrap}
  .pill:hover{transform:translateY(-1px);box-shadow:0 6px 18px -10px rgba(201,119,43,.6)}
  .pill.active{background:linear-gradient(135deg,#c9772b,#a85d1d);color:#fff;border-color:transparent;box-shadow:0 8px 24px -10px rgba(201,119,43,.7)}
  .dark .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#f5ecd7}

  /* Verse */
  .verse{transition:background .25s ease, transform .2s ease;border-radius:8px;padding:.2rem .35rem;cursor:pointer}
  .verse:hover{background:rgba(201,119,43,.08)}
  .verse-num{font-family:'Fraunces',serif;font-weight:600;color:#a85d1d;font-size:.72rem;vertical-align:super;margin-right:.25rem;letter-spacing:.05em}
  .dark .verse-num{color:#e08a3c}
  .verse.hl-yellow{background:linear-gradient(120deg,rgba(255,222,120,.55),rgba(255,222,120,.25))}
  .verse.hl-rose{background:linear-gradient(120deg,rgba(243,198,198,.6),rgba(243,198,198,.25))}
  .verse.hl-sage{background:linear-gradient(120deg,rgba(174,210,160,.55),rgba(174,210,160,.2))}

  /* Scripture page (book look) */
  .scripture-page{font-family:'Cormorant Garamond',serif;font-size:1.18rem;line-height:1.95;
    column-gap:2.2rem;color:#2a221b}
  .dark .scripture-page{color:#f0e3c8}
  .scripture-page p{margin:0 0 .6rem 0}
  .scripture-page::before{content:'';display:block;height:2px;width:60px;margin:0 auto 1.2rem;
    background:linear-gradient(90deg,transparent,#c9772b,transparent)}

  /* Custom scrollbar */
  .scroll-hide::-webkit-scrollbar{width:6px;height:6px}
  .scroll-hide::-webkit-scrollbar-thumb{background:rgba(168,93,29,.3);border-radius:9999px}
  .scroll-hide::-webkit-scrollbar-track{background:transparent}

  /* Cursor presence */
  .cursor-dot{position:fixed;width:10px;height:10px;border-radius:9999px;pointer-events:none;z-index:50;transform:translate(-50%,-50%);transition:transform .1s linear;box-shadow:0 0 0 2px #fff}
  .cursor-label{position:fixed;font-size:11px;padding:2px 8px;border-radius:9999px;color:#fff;pointer-events:none;z-index:50;transform:translate(8px,8px);font-weight:500}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .95rem;border-radius:12px;
       font-weight:500;font-size:.85rem;transition:all .2s ease;border:1px solid rgba(170,120,60,.22);
       background:rgba(255,255,255,.7)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -12px rgba(60,30,10,.4)}
  .btn-primary{background:linear-gradient(135deg,#c9772b,#a85d1d);color:#fff;border-color:transparent}
  .btn-primary:hover{box-shadow:0 12px 28px -10px rgba(201,119,43,.6)}
  .dark .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);color:#f5ecd7}

  /* Tool button */
  .tool{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;
        transition:all .15s ease;cursor:pointer;color:#5a3a1a}
  .tool:hover{background:rgba(201,119,43,.12)}
  .tool.active{background:linear-gradient(135deg,#c9772b,#a85d1d);color:#fff;box-shadow:0 6px 16px -6px rgba(201,119,43,.6)}
  .dark .tool{color:#f0d9a8}
  .dark .tool:hover{background:rgba(255,255,255,.08)}

  /* Canvas wrapper — overflow:visible so canvas always matches full content height */
  .canvas-stage{position:relative;border-radius:14px;overflow:visible}
  #scriptureContent{position:relative;z-index:1;min-height:60vh;pointer-events:auto;visibility:visible;opacity:1}
  #scriptureContent .loading-text{font-family:'Cormorant Garamond',serif;font-style:italic;color:#7a4214}
  #scriptureContent .load-error{font-family:'Cormorant Garamond',serif;color:#7a4214}
  #annoCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;pointer-events:none;background:transparent;z-index:2}
  #textLayer{position:absolute;inset:0;pointer-events:none;z-index:3}
  .anno-text{position:absolute;min-width:80px;outline:1.5px dashed rgba(201,119,43,.7);
             border-radius:6px;padding:4px 8px;background:rgba(255,255,200,.6);
             font-family:'Caveat',cursive;font-size:22px;color:#3a2a14;cursor:move}
  .anno-text:focus{outline:2px solid #c9772b;background:rgba(255,255,220,.85)}

  /* Modal */
  .modal-backdrop{position:fixed;inset:0;background:rgba(20,12,4,.55);backdrop-filter:blur(6px);z-index:60;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
  .modal{max-width:780px;width:92vw;max-height:86vh;overflow:auto;border-radius:22px;padding:1.5rem;animation:scaleIn .25s cubic-bezier(.2,.7,.2,1)}

  /* Chapter grid */
  .chip{display:flex;align-items:center;justify-content:center;height:38px;border-radius:10px;
        font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease;
        background:rgba(255,255,255,.5);border:1px solid rgba(170,120,60,.18);color:#5a3a1a}
  .chip:hover{background:rgba(201,119,43,.15);transform:translateY(-1px)}
  .chip.active{background:linear-gradient(135deg,#c9772b,#a85d1d);color:#fff;border-color:transparent}
  .dark .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);color:#f0d9a8}

  /* Loading shimmer */
  .shimmer{background:linear-gradient(90deg, rgba(201,119,43,.08), rgba(201,119,43,.18), rgba(201,119,43,.08));
           background-size:800px 100%;animation:shimmer 1.4s linear infinite;border-radius:8px;height:1rem}

  /* Divider ornament */
  .ornament{display:flex;align-items:center;gap:1rem;color:#a85d1d;opacity:.6}
  .ornament::before,.ornament::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#a85d1d,transparent)}

  /* Tooltip */
  [data-tip]{position:relative}
  [data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
    background:#1b1a2b;color:#f5ecd7;font-size:11px;padding:4px 8px;border-radius:6px;white-space:nowrap;z-index:40;font-family:Inter,sans-serif;font-weight:500}

  /* ===== Collapsible panels + dynamic grid ===== */
  #appGrid{display:grid;grid-template-columns:320px minmax(0,1fr) 320px;gap:1.25rem;transition:grid-template-columns .35s cubic-bezier(.2,.7,.2,1)}
  #appGrid.hide-left{grid-template-columns:0 minmax(0,1fr) 320px}
  #appGrid.hide-right{grid-template-columns:320px minmax(0,1fr) 0}
  #appGrid.hide-left.hide-right{grid-template-columns:0 minmax(0,1fr) 0}
  #appGrid > aside{transition:opacity .25s ease, transform .35s ease, max-width .35s ease}
  #appGrid.hide-left  > .panel-left,
  #appGrid.hide-right > .panel-right{opacity:0;max-width:0;overflow:hidden;pointer-events:none;transform:scale(.96)}
  @media (max-width: 1023px){
    #appGrid{grid-template-columns:1fr !important}
    #appGrid > aside{max-width:none !important;opacity:1 !important;transform:none !important;pointer-events:auto !important;overflow:visible !important}
  }
  .panel-toggle{position:fixed;top:50%;transform:translateY(-50%);z-index:35;width:24px;height:56px;
    display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(201,119,43,.85);
    color:#fff;font-size:14px;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.3);transition:all .2s ease;border:none}
  .panel-toggle:hover{background:#a85d1d}
  .panel-toggle.left{left:0;border-radius:0 8px 8px 0}
  .panel-toggle.right{right:0;border-radius:8px 0 0 8px}

  /* ===== Theme palettes ===== */
  body.theme-parchment{}
  body.theme-stained-glass{background:radial-gradient(900px 500px at 20% 0%, rgba(72,40,180,.18), transparent 60%),radial-gradient(800px 500px at 100% 20%, rgba(220,60,120,.16), transparent 60%),linear-gradient(180deg,#f7f1ff,#ffe8f0) !important}
  body.theme-stained-glass .candle{background:radial-gradient(circle at 50% 30%, #fff2c2, #ff7ab0 50%, #6e2a8a 80%)}
  body.theme-sage{background:radial-gradient(900px 500px at 10% 0%, rgba(60,140,90,.16), transparent 60%),linear-gradient(180deg,#f3f7ee,#e0eedf) !important}
  body.theme-midnight{background:radial-gradient(900px 500px at 10% 0%, rgba(120,80,255,.18), transparent 60%),linear-gradient(180deg,#0c0b15,#1b1a2b) !important;color:#f0e3c8}
  body.theme-midnight .card{background:linear-gradient(180deg, rgba(40,36,55,.78), rgba(26,24,40,.7));border:1px solid rgba(255,255,255,.08);color:#f0e3c8}
  body.theme-rose{background:radial-gradient(900px 500px at 100% 0%, rgba(220,90,140,.18), transparent 60%),linear-gradient(180deg,#fff5f7,#ffe1ea) !important}
  body.theme-ocean{background:radial-gradient(900px 500px at 0% 0%, rgba(40,120,200,.18), transparent 60%),linear-gradient(180deg,#eef6ff,#d4e8ff) !important}

  /* ===== Reading banner ===== */
  .reading-banner{display:flex;align-items:center;gap:.75rem;padding:.55rem 1rem;border-radius:14px;
    background:linear-gradient(90deg,rgba(201,119,43,.18),rgba(243,198,198,.18));
    border:1px solid rgba(201,119,43,.25);font-family:'Cormorant Garamond',serif;font-size:.95rem;flex-wrap:wrap}
  .reading-banner .pill-time{font-family:Inter,sans-serif;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;
    padding:.25rem .6rem;border-radius:9999px;font-weight:600}
  .reading-banner .pill-time.morning{background:linear-gradient(135deg,#f4c45a,#e08a3c);color:#3a2406}
  .reading-banner .pill-time.evening{background:linear-gradient(135deg,#5b4b9e,#2a224a);color:#fff}
  .reading-banner .ref{font-weight:600;font-size:1.05rem}
  .reading-banner .btn-link{font-family:Inter,sans-serif;font-size:.7rem;color:#a85d1d;cursor:pointer;text-decoration:underline;background:none;border:none}
  .reading-banner[data-hidden="1"]{display:none !important}

  /* ===== Session segmented switch ===== */
  .sess-switch{display:inline-flex;background:rgba(255,255,255,.55);border:1px solid rgba(170,120,60,.25);border-radius:9999px;padding:3px}
  .dark .sess-switch{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
  .sess-switch button{padding:.35rem .9rem;border-radius:9999px;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;cursor:pointer;color:#7a4214;transition:all .2s ease}
  .sess-switch button.active.morning{background:linear-gradient(135deg,#f4c45a,#e08a3c);color:#3a2406;box-shadow:0 4px 14px -4px rgba(224,138,60,.6)}
  .sess-switch button.active.evening{background:linear-gradient(135deg,#5b4b9e,#2a224a);color:#fff;box-shadow:0 4px 14px -4px rgba(91,75,158,.6)}

  /* ===== Symbol icons in notes/sidebar ===== */
  .sym{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;
    font-size:14px;border:1px solid transparent;cursor:pointer;transition:all .15s ease;background:rgba(255,255,255,.55)}
  .sym:hover{transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(0,0,0,.2)}
  .sym.active{box-shadow:inset 0 0 0 2px #c9772b}
  .sym.note{background:#fff7d6;color:#a87b13}
  .sym.mark{background:#ffe1cc;color:#b65a14}
  .sym.voice{background:#e0f0ff;color:#1d5f9c}
  .sym.doubt{background:#fde2e7;color:#b9325b}
  .sym.prayer{background:#e8e1ff;color:#5b3aa8}
  .sym.link{background:#dcefe2;color:#2f7a4a}
  .sym.attach{background:#f0e7da;color:#7a4214}

  /* Note item with symbol */
  .note-item{position:relative;padding-left:42px}
  .note-item .note-sym{position:absolute;left:8px;top:10px}

  /* Palette picker swatches */
  .swatch{width:22px;height:22px;border-radius:9999px;cursor:pointer;border:2px solid rgba(255,255,255,.7);
    box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .15s ease}
  .swatch:hover{transform:scale(1.15)}
  .swatch.active{outline:2px solid #c9772b;outline-offset:2px}

  /* Zoom controls */
  .scripture-page{transform-origin:top left;transition:font-size .2s ease}

  /* Members chip mini */
  .reading-member{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .55rem;border-radius:9999px;background:rgba(255,255,255,.55);border:1px solid rgba(170,120,60,.2);font-size:.7rem}
  .reading-member .dot{width:8px;height:8px;border-radius:9999px}

  /* Reading banner inline selects */
  .reading-banner select{font-family:Inter,sans-serif;font-size:.7rem;padding:.2rem .45rem;border-radius:8px;
    background:rgba(255,255,255,.7);border:1px solid rgba(170,120,60,.25);color:#3a2406;cursor:pointer;max-width:140px}
  .dark .reading-banner select{background:rgba(255,255,255,.08);color:#f5ecd7;border-color:rgba(255,255,255,.12)}
  .reading-banner select.reading-ch{max-width:72px}

  /* ===== Sticky Note ===== */
  .sticky-fab{position:fixed;right:22px;bottom:22px;z-index:60;width:52px;height:52px;border-radius:9999px;
    background:linear-gradient(135deg,#fff2a8,#ffd86b);color:#5a3a06;font-size:22px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 14px 30px -8px rgba(201,140,30,.55),inset 0 1px 0 rgba(255,255,255,.7);cursor:pointer;
    transition:transform .2s ease}
  .sticky-fab:hover{transform:translateY(-3px) rotate(-4deg)}
  .sticky-modal{position:fixed;inset:0;background:rgba(20,15,5,.45);backdrop-filter:blur(6px);z-index:70;display:flex;align-items:center;justify-content:center;padding:1rem}
  .sticky-modal.hidden{display:none}
  .sticky-paper{width:min(420px,100%);background:linear-gradient(180deg,#fff7c9,#ffe98a);color:#3a2406;
    border-radius:14px;padding:1.25rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.7);
    transform:rotate(-1.2deg);font-family:'Caveat',cursive}
  .sticky-paper h4{font-family:'Fraunces',serif;font-weight:600;font-size:1.2rem;margin-bottom:.25rem}
  .sticky-paper .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.6rem 0;font-family:Inter,sans-serif;font-size:.72rem}
  .sticky-paper .meta-grid input{background:rgba(255,255,255,.5);border:1px solid rgba(160,110,30,.25);border-radius:6px;padding:.3rem .5rem;color:#3a2406;font-family:Inter,sans-serif}
  .sticky-paper textarea{width:100%;min-height:120px;background:transparent;border:none;outline:none;resize:none;
    font-family:'Caveat',cursive;font-size:1.25rem;line-height:1.4;color:#3a2406}
  .sticky-paper .row{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.6rem}
  .sticky-paper .row button{font-family:Inter,sans-serif;font-size:.75rem;padding:.4rem .9rem;border-radius:9999px;cursor:pointer;border:1px solid rgba(120,80,20,.25);background:rgba(255,255,255,.5)}
  .sticky-paper .row button.primary{background:linear-gradient(135deg,#c9772b,#a85d1d);color:#fff;border-color:transparent}

  /* ===== v10: Sticky tool palette docked below header ===== */
  .tool-palette-sticky{position:sticky;top:var(--hdr-h,180px);z-index:28;backdrop-filter:blur(10px);
    background:rgba(251,246,236,.95);box-shadow:0 8px 22px -10px rgba(60,30,10,.4);border-radius:.75rem}
  .dark .tool-palette-sticky,body.theme-midnight .tool-palette-sticky{background:rgba(27,26,43,.95)}

  /* ===== v7: Two-column scripture split ===== */
  .scripture-page.two-col{column-count:2;column-gap:2.4rem;
    column-rule:1px solid rgba(168,93,29,.25)}
  .scripture-page.two-col .verse{break-inside:avoid}

  /* ===== v7: Text-selection highlight wrapper ===== */
  .sel-hl{border-radius:3px;padding:1px 2px;cursor:pointer;transition:filter .15s ease;position:relative}
  .sel-hl:hover{filter:brightness(.95)}
  .sel-hl[data-c="yellow"]{background:linear-gradient(120deg,rgba(255,222,120,.7),rgba(255,222,120,.4))}
  .sel-hl[data-c="green"]{background:linear-gradient(120deg,rgba(174,222,160,.7),rgba(174,222,160,.4))}
  .sel-hl[data-c="pink"]{background:linear-gradient(120deg,rgba(255,180,200,.7),rgba(255,180,200,.4))}
  .sel-hl[data-c="blue"]{background:linear-gradient(120deg,rgba(170,210,255,.7),rgba(170,210,255,.4))}
  .sel-hl[data-c="orange"]{background:linear-gradient(120deg,rgba(255,190,130,.7),rgba(255,190,130,.4))}

  /* Highlight color popover */
  .hl-popover{position:fixed;z-index:80;display:flex;gap:6px;background:#1b1a2b;padding:7px 9px;
    border-radius:9999px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);animation:fadeIn .15s ease both}
  .hl-popover button{width:22px;height:22px;border-radius:9999px;cursor:pointer;border:2px solid rgba(255,255,255,.7);
    transition:transform .15s ease}
  .hl-popover button:hover{transform:scale(1.15)}
  .hl-popover .hl-clear{background:#fff;color:#333;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}

  /* ===== v7: Note close (X) button on sticky/regular notes ===== */
  .note-item .note-x{position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:9999px;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#7a4214;
    background:rgba(255,255,255,.6);border:1px solid rgba(168,93,29,.25);cursor:pointer;opacity:.55;
    transition:all .15s ease}
  .note-item .note-x:hover{opacity:1;background:#c9526a;color:#fff;border-color:transparent}
  .dark .note-item .note-x{background:rgba(255,255,255,.08);color:#f0d9a8;border-color:rgba(255,255,255,.12)}

  /* ===== v7: Uploaded doc preview on canvas ===== */
  .uploaded-doc{font-family:'Cormorant Garamond',serif;font-size:1.05rem;line-height:1.85;color:#2a221b;white-space:pre-wrap}
  .dark .uploaded-doc{color:#f0e3c8}
  .uploaded-doc h3{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;margin-bottom:.5rem;color:#a85d1d}
  .upload-pending{padding:1rem;border-radius:12px;background:rgba(255,255,255,.6);border:1px dashed rgba(168,93,29,.4);margin-top:.5rem}
  .dark .upload-pending{background:rgba(255,255,255,.05)}

  /* ===== User profile chip in header ===== */
  .dark #_userChip{
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.12) !important;
    color:#f5ecd7 !important;
  }
  .dark #_signOutBtn{
    background:rgba(255,255,255,.1) !important;
    color:#f0d9a8 !important;
  }
  #_authLoading .candle{
    animation:flicker 2.4s infinite ease-in-out;
  }

/* =====================================================================
 *  PAGINATED DOCUMENT VIEWER — styles
 * ===================================================================== */

/* ── Navigation bar ── */
.doc-nav-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 14px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(201,119,43,.14), rgba(255,222,150,.10));
  border: 1px solid rgba(201,119,43,.28);
  backdrop-filter: blur(8px);
  font-family: Inter, sans-serif;
  font-size: .8rem;
  position: sticky;
  top: var(--hdr-h, 180px);
  z-index: 27;
}
.dark .doc-nav-bar {
  background: linear-gradient(90deg, rgba(201,119,43,.18), rgba(40,36,55,.6));
  border-color: rgba(201,119,43,.22);
}

.doc-nav-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: 1.1rem !important;
}
.doc-nav-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}
.doc-nav-close {
  margin-left: auto;
  background: rgba(201,80,80,.12) !important;
  color: #b93232 !important;
}
.dark .doc-nav-close { color: #f08080 !important; }

.doc-nav-pages {
  display: flex;
  align-items: center;
  gap: 5px;
}
.doc-nav-label {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}
.doc-page-input {
  width: 52px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(170,120,60,.35);
  background: rgba(255,255,255,.8);
  color: #3a2406;
  font-size: .82rem;
  font-family: Inter, sans-serif;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}
.doc-page-input::-webkit-inner-spin-button,
.doc-page-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.dark .doc-page-input {
  background: rgba(255,255,255,.1);
  color: #f5ecd7;
  border-color: rgba(255,255,255,.18);
}
.doc-nav-of { font-size: .78rem; opacity: .8; }
.doc-nav-of strong { font-weight: 700; color: #a85d1d; }
.dark .doc-nav-of strong { color: #e08a3c; }

.doc-nav-sep {
  width: 1px;
  height: 22px;
  background: rgba(170,120,60,.28);
  border-radius: 9999px;
  margin: 0 2px;
}
.dark .doc-nav-sep { background: rgba(255,255,255,.12); }

.doc-nav-name {
  font-size: .7rem;
  opacity: .65;
  font-style: italic;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', serif;
}

/* ── Page wrapper ── */
.doc-page-wrap {
  padding: 2.5rem 3rem;
  min-height: 60vh;
  position: relative;
  animation: fadeIn .25s ease both;
}
@media (max-width: 640px) {
  .doc-page-wrap { padding: 1.2rem 1rem; }
}

/* ── Text document page body ── */
.doc-page-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.13rem;
  line-height: 1.9;
  color: #2a221b;
  white-space: pre-wrap;
}
.dark .doc-page-body { color: #f0e3c8; }
.doc-page-body p {
  margin: 0 0 .7rem 0;
}
.doc-heading {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: #a85d1d;
  margin: 0 0 .6rem 0;
  line-height: 1.2;
}
.dark .doc-heading { color: #e08a3c; }
.doc-subheading {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7a4214;
  margin: .8rem 0 .35rem 0;
}
.dark .doc-subheading { color: #c9a35a; }

/* ── PDF canvas page ── */
.doc-pdf-canvas {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 32px -12px rgba(60,30,10,.3);
  display: block;
}
.doc-pdf-loading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  opacity: .6;
  text-align: center;
  padding: 4rem 0;
  font-size: 1.1rem;
}
.doc-error {
  color: #b93232;
  font-size: .9rem;
  font-family: Inter, sans-serif;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(185,50,50,.08);
}