/* Force Authentic Urdu Nastaliq Fonts */
        #tfcLibraryRoot, #tfcLibraryRoot *,
        #tfcModalBackdrop, #tfcModalBackdrop *,
        #tfcGatewayBackdrop, #tfcGatewayBackdrop *,
        #tfcFlipbookBackdrop, #tfcFlipbookBackdrop * {
          font-family: 'Amr Nastaleeq', 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Amiri', serif !important;
          box-sizing: border-box !important;
        }

        /* Full-Width Library Wall (No Box, No Horizontal Scrollbar) */
        #tfcLibraryRoot {
          width: 100% !important;
          max-width: 1280px !important;
          margin: 20px auto 50px auto !important;
          background: #140703 !important;
          color: #f7f1e6 !important;
          border-radius: 12px !important;
          box-shadow: 0 25px 60px rgba(0,0,0,0.95) !important;
          overflow: visible !important;
          position: relative !important;
          clear: both !important;
        }

        /* 1. TOP CONTROLS & FILTER ROW (IMAGE 1) */
        #tfcLibraryRoot .tfc-top-controls {
          background: linear-gradient(180deg, #1b0a04 0%, #110502 100%) !important;
          border-bottom: 1px solid rgba(139, 69, 19, 0.4) !important;
          padding: 16px 24px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          flex-wrap: wrap !important;
          gap: 16px !important;
          border-radius: 12px 12px 0 0 !important;
        }

        #tfcLibraryRoot .tfc-filter-indicator {
          font-size: 15px !important;
          color: #d1c4b2 !important;
          cursor: pointer !important;
          user-select: none !important;
        }
        #tfcLibraryRoot .tfc-filter-indicator:hover {
          color: #ffd875 !important;
        }
        /* v14.3.8 (P0): the indicator's control is a real <button> now */
        #tfcLibraryRoot .tfc-filter-indicator button {
          background: none !important;
          border: 0 !important;
          margin: 0 !important;
          padding: 8px 6px !important;
          color: inherit !important;
          font: inherit !important;
          cursor: pointer !important;
        }

        #tfcLibraryRoot .tfc-filter-pills {
          display: flex !important;
          align-items: center !important;
          gap: 22px !important;
          flex-wrap: wrap !important;
        }

        #tfcLibraryRoot .tfc-pill {
          /* v14.3.8 (P0): the pills are real <button>s now — reset the
             browser's button chrome so they keep looking like text pills */
          background: none !important;
          border: 0 !important;
          margin: 0 !important;
          padding: 4px 10px !important;
          font-family: inherit !important;
          color: #d5c8b7 !important;
          font-size: 15.5px !important;
          cursor: pointer !important;
          position: relative !important;
          transition: all 0.2s ease !important;
        }
        #tfcLibraryRoot .tfc-pill:hover,
        #tfcLibraryRoot .tfc-pill.active {
          color: #ffd875 !important;
          font-weight: 700 !important;
          text-shadow: 0 0 10px rgba(255, 216, 117, 0.45) !important;
        }
        #tfcLibraryRoot .tfc-pill.active::after {
          content: '' !important;
          position: absolute !important;
          bottom: -8px !important;
          left: 15% !important;
          right: 15% !important;
          height: 3px !important;
          background: #ffd875 !important;
          box-shadow: 0 0 8px #ffd875 !important;
          border-radius: 2px !important;
        }
        /* v14.3.8 (P0): the pill stays visually slim, but its tap target
           grows to the 44px every platform's guidelines ask for */
        #tfcLibraryRoot .tfc-pill::before {
          content: '' !important;
          position: absolute !important;
          left: -6px !important;
          right: -6px !important;
          top: 50% !important;
          height: 44px !important;
          transform: translateY(-50%) !important;
        }
        #tfcLibraryRoot .tfc-pill:focus-visible,
        #tfcLibraryRoot .tfc-more-cats:focus-visible,
        #tfcLibraryRoot .tfc-filter-indicator button:focus-visible {
          outline: 2px solid #ffd875 !important;
          outline-offset: 3px !important;
          border-radius: 4px !important;
        }
        /* "more categories" is a phone-only affordance — the whole pill row
           fits on a desktop, so it stays hidden there */
        #tfcLibraryRoot .tfc-more-cats {
          display: none !important;
          color: #ffdf9e !important;
          font-size: 13px !important;
          /* v14.3.8 (P0): a bordered control gets a real 44px target */
          padding: 14px 16px !important;
          margin: 0 !important;
          font-family: inherit !important;
          border-radius: 999px !important;
          border: 1px solid rgba(255, 216, 117, 0.3) !important;
          background: rgba(255, 216, 117, 0.07) !important;
          cursor: pointer !important;
          white-space: nowrap !important;
          flex: 0 0 auto !important;
        }

        /* v14.8.2: THE PHONE FILTER MENU IS A REAL ☰ -------------------------
           The old phone treatment was a sideways-scrolling ribbon of pills with
           the long tail hidden behind a big round "مزید زمرے" bubble. On an
           actual phone that read as a clipped one-line ribbon next to a
           floating round blob. Phones now get the control every reader already
           knows: three bars that open a plain vertical list of the categories.
           Desktop is untouched — it still shows every pill in the wrapped row,
           so the ☰ wrap stays hidden above 768px. */
        #tfcLibraryRoot .tfc-cat-menu-wrap { display: none !important; }
        #tfcLibraryRoot .tfc-cat-menu-btn {
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          width: 44px !important;
          height: 44px !important;
          padding: 0 !important;
          margin: 0 !important;
          flex: 0 0 auto !important;
          background: rgba(255, 216, 117, 0.07) !important;
          border: 1px solid rgba(255, 216, 117, 0.3) !important;
          border-radius: 10px !important;
          cursor: pointer !important;
          transition: border-color 0.2s ease, background 0.2s ease !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-btn:hover,
        #tfcLibraryRoot .tfc-cat-menu-btn[aria-expanded="true"] {
          background: rgba(255, 216, 117, 0.14) !important;
          border-color: rgba(255, 216, 117, 0.6) !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-btn:focus-visible {
          outline: 2px solid #ffd875 !important;
          outline-offset: 3px !important;
        }
        /* the three bars are drawn, not typed — a glyph would inherit the
           Nastaliq font and render as something else entirely */
        #tfcLibraryRoot .tfc-cat-menu-bars {
          display: inline-flex !important;
          flex-direction: column !important;
          justify-content: space-between !important;
          width: 20px !important;
          height: 14px !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-bars i {
          display: block !important;
          width: 100% !important;
          height: 2px !important;
          background: #ffdf9e !important;
          border-radius: 2px !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-panel {
          display: none !important;
          position: absolute !important;
          top: calc(100% + 10px) !important;
          /* the ☰ rides the leading edge of the RTL control row, so the panel
             must grow inward from there — anchoring it right used to push it
             off the screen */
          left: 0 !important;
          right: auto !important;
          min-width: 230px !important;
          max-width: min(88vw, 340px) !important;
          max-height: min(60vh, 420px) !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch !important;
          padding: 8px !important;
          background: #1b0a04 !important;
          border: 1px solid rgba(255, 216, 117, 0.35) !important;
          border-radius: 12px !important;
          box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85) !important;
          z-index: 60 !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-wrap.is-open .tfc-cat-menu-panel { display: grid !important; }
        #tfcLibraryRoot .tfc-cat-menu-item {
          display: block !important;
          width: 100% !important;
          min-height: 44px !important;
          margin: 0 !important;
          padding: 12px !important;
          background: none !important;
          border: 0 !important;
          border-radius: 8px !important;
          font-family: inherit !important;
          font-size: 14.5px !important;
          color: #d5c8b7 !important;
          text-align: right !important;
          cursor: pointer !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-item:hover {
          background: rgba(255, 216, 117, 0.08) !important;
          color: #ffd875 !important;
        }
        #tfcLibraryRoot .tfc-cat-menu-item.active {
          background: rgba(255, 216, 117, 0.12) !important;
          color: #ffd875 !important;
          font-weight: 700 !important;
        }

        /* phones: the pill ribbon and its "more" bubble are replaced by ☰ */
        @media (max-width: 768px) {
          #tfcLibraryRoot .tfc-top-controls { padding: 12px !important; gap: 10px !important; }
          /* v14.8.2: the sideways pill ribbon is gone on phones. The ☰ menu
             already carries every category, so the ribbon would only be a
             second, clipped copy of the same choice — and the round "مزید
             زمرے" bubble that went with it read as a floating blob. */
          #tfcLibraryRoot .tfc-filter-pills { display: none !important; }
          #tfcLibraryRoot .tfc-cat-menu-wrap { display: block !important; position: relative !important; }
          #tfcLibraryRoot .tfc-filter-pills::-webkit-scrollbar { display: none !important; height: 0 !important; }
          #tfcLibraryRoot .tfc-pill {
            flex: 0 0 auto !important;
            display: inline-flex !important;
            align-items: center !important;
            font-size: 13.5px !important;
            /* v14.3.8 (P0): 14px of vertical padding puts the tap target at 44px,
               which the sideways-scrolling row would otherwise clip */
            padding: 14px 8px !important;
            scroll-snap-align: start !important;
          }
          #tfcLibraryRoot .tfc-pill.tfc-pill-extra { display: none !important; }
          /* whichever filter is live must never be tucked away... */
          #tfcLibraryRoot .tfc-pill.active {
            display: inline-flex !important;
            align-items: center !important;
          }
          /* ...and expanding the row reveals the rest */
          #tfcLibraryRoot .tfc-filter-pills.tfc-cats-expanded .tfc-pill.tfc-pill-extra {
            display: inline-flex !important;
            align-items: center !important;
          }
          #tfcLibraryRoot .tfc-more-cats { display: inline-flex !important; align-items: center !important; }
        }

        #tfcLibraryRoot .tfc-search-box {
          background: rgba(22, 9, 4, 0.95) !important;
          border: 1px solid rgba(160, 82, 45, 0.6) !important;
          border-radius: 9999px !important;
          padding: 7px 20px 7px 38px !important;
          color: #f5ebe1 !important;
          font-size: 13.5px !important;
          width: 210px !important;
          /* v14.3.8 (P0): 44px minimum touch target */
          min-height: 44px !important;
          outline: none !important;
          box-shadow: inset 0 2px 4px rgba(0,0,0,0.7) !important;
        }
        #tfcLibraryRoot .tfc-search-box:focus {
          border-color: #ffd875 !important;
          box-shadow: 0 0 12px rgba(255, 216, 117, 0.4) !important;
        }
        #tfcLibraryRoot .tfc-sort-wrap {
          display: inline-flex !important;
          align-items: center !important;
          gap: 7px !important;
          white-space: nowrap !important;
        }
        #tfcLibraryRoot .tfc-sort-label {
          color: #9c8a72 !important;
          font-size: 12.5px !important;
        }
        #tfcLibraryRoot .tfc-sort-select {
          background: rgba(22, 9, 4, 0.95) !important;
          color: #ffdf9e !important;
          border: 1px solid rgba(160, 82, 45, 0.6) !important;
          border-radius: 999px !important;
          padding: 6px 12px !important;
          font-size: 13.5px !important;
          /* v14.3.8 (P0): 44px minimum touch target */
          min-height: 44px !important;
          font-family: inherit !important;
          cursor: pointer !important;
          outline: none !important;
        }
        #tfcLibraryRoot .tfc-sort-select:focus { border-color: #ffd875 !important; }
        #tfcLibraryRoot .tfc-sort-select option { background: #1a0d06 !important; color: #f5ebe1 !important; }
/* ============================================================
           — REAL LIBRARY WALL v14
           Display-shelf architecture: books stand ON real wooden
           shelves, front covers facing the reader — the way libraries
           show their display rows. Each standing book is a physical
           object: visible spine edge, page block, head-cap, leather
           grain, cast shadow, natural lean.
           ============================================================ */

        /* --- Room wall behind the bookcase --- */
        #tfcLibraryRoot .tfc-bookcase-wall {
          background:
            radial-gradient(ellipse 120% 55% at 50% -8%, rgba(255, 200, 120, 0.10) 0%, transparent 62%),
            radial-gradient(circle at 50% 28%, #2a1207 0%, #170903 55%, #0d0401 100%) !important;
          padding: 42px 24px 10px 24px !important;
          min-height: 480px !important;
          /* v14.3.8 (P0): hover tooltips sit wider than a phone viewport —
             clip them instead of letting the page scroll sideways */
          overflow-x: clip !important;
        }
        #tfcLibraryRoot { overflow-x: clip !important; }

        /* --- One shelf cabinet (a real piece of furniture, centered) --- */
        #tfcLibraryRoot .tfc-shelf-row {
          position: relative !important;
          max-width: 920px !important;
          margin: 0 auto 56px auto !important;
          padding: 0 24px !important;
          opacity: 0;
          transform: translateY(28px) !important;
          transition: opacity 0.9s cubic-bezier(0.32, 0.72, 0, 1), transform 0.9s cubic-bezier(0.32, 0.72, 0, 1) !important;
          will-change: transform, opacity;
        }
        #tfcLibraryRoot .tfc-shelf-row.tfc-in-view {
          opacity: 1;
          transform: translateY(0) !important;
        }
        /* Mahogany side pillars of the cabinet */
        #tfcLibraryRoot .tfc-shelf-row::before,
        #tfcLibraryRoot .tfc-shelf-row::after {
          content: '' !important;
          position: absolute !important;
          top: 34px !important;
          bottom: 0 !important;
          width: 22px !important;
          z-index: 8 !important;
          background: linear-gradient(90deg, #4e2009 0%, #7c3a14 30%, #5a2509 65%, #2e1204 100%) !important;
          border-radius: 3px !important;
          box-shadow: 0 6px 14px rgba(0,0,0,0.75), inset 0 1px 1px rgba(255,190,130,0.3) !important;
        }
        #tfcLibraryRoot .tfc-shelf-row::before { right: -4px !important; }
        #tfcLibraryRoot .tfc-shelf-row::after { left: -4px !important; }

        #tfcLibraryRoot .tfc-shelf-header {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 0 26px 10px 26px !important;
          margin-bottom: 12px !important;
        }
        #tfcLibraryRoot .tfc-shelf-title {
          font-size: 16px !important;
          font-weight: 700 !important;
          /* v14.3.8 (P0): the shelf title is a real <h2> now */
          margin: 0 !important;
          line-height: 1.35 !important;
          color: #fce293 !important;
          text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
        }
        #tfcLibraryRoot .tfc-shelf-subtitle {
          font-size: 11.5px !important;
          color: #a89a86 !important;
        }
        /* v14.2 — numbering + live counts so the user is never lost */
        #tfcLibraryRoot .tfc-collection-summary {
          max-width: 920px !important;
          margin: 0 auto 26px auto !important;
          text-align: center !important;
          color: #e5d5b5 !important;
          font-size: 14.5px !important;
          background: rgba(48, 22, 10, 0.55) !important;
          border: 1px solid rgba(255, 216, 117, 0.22) !important;
          border-radius: 999px !important;
          padding: 10px 22px !important;
        }
        #tfcLibraryRoot .tfc-collection-summary b { color: #ffd875 !important; font-size: 16px !important; }
        #tfcLibraryRoot .tfc-more-wrap { text-align: center !important; padding: 6px 0 30px 0 !important; }
        #tfcLibraryRoot .tfc-more-btn {
          background: linear-gradient(135deg, #f7d57f 0%, #d4af37 100%) !important;
          color: #241100 !important;
          font-weight: 700 !important;
          font-size: 14px !important;
          border: none !important;
          border-radius: 999px !important;
          padding: 12px 34px !important;
          cursor: pointer !important;
          box-shadow: 0 6px 18px rgba(212, 175, 55, 0.35) !important;
        }
        #tfcLibraryRoot .tfc-more-btn:hover { filter: brightness(1.08) !important; }
        #tfcLibraryRoot .tfc-more-info { display: block !important; margin-top: 8px !important; font-size: 11.5px !important; color: #a89a86 !important; }
        #tfcLibraryRoot .tfc-shelf-end { text-align: center !important; color: #86efac !important; font-size: 13px !important; padding: 8px 0 34px 0 !important; }

        /* --- The shelf cavity: books stand on the plank --- */
        #tfcLibraryRoot .tfc-shelf-books {
          display: flex !important;
          flex-wrap: nowrap !important;
          justify-content: flex-start !important;
          align-items: flex-end !important;
          gap: 0 14px !important;
          padding: 16px 8px 0 8px !important;
          overflow: visible !important;
        }

        /* ============================================================
           THE STANDING BOOK — front cover out, standing on the shelf.
           Sizes arrive via CSS vars (--w/--h/--sl) set per book inline.
           --sl = shelf lean (rotates the whole book slightly).
           ============================================================ */
        #tfcLibraryRoot .tfc-book-spine {
          position: relative !important;
          height: var(--h, 190px) !important;
          width: var(--w, 132px) !important;
          flex: 0 0 auto !important;
          cursor: pointer !important;
          transform-origin: bottom center !important;
          transform: rotate(var(--sl, 0deg)) !important;
          margin-bottom: -1px !important;
          outline: none !important;
          transition:
            transform 0.6s cubic-bezier(0.32, 0.72, 0, 1),
            filter 0.6s cubic-bezier(0.32, 0.72, 0, 1) !important;
          z-index: 10 !important;
          /* cast shadow onto the plank and neighbouring books */
          filter: drop-shadow(-6px 8px 8px rgba(0,0,0,0.65)) !important;
        }

        /* The physical book body */
        #tfcLibraryRoot .tfc-book-body {
          position: absolute !important;
          inset: 0 !important;
          border-radius: 3px 7px 7px 3px !important;
          overflow: hidden !important;
          background: var(--g, linear-gradient(160deg, #5c2418 0%, #3a120a 60%, #200a04 100%)) !important;
          box-shadow:
            inset 0 2px 2px rgba(255, 230, 170, 0.35),
            inset -2px 0 3px rgba(0,0,0,0.55),
            inset 2px 0 3px rgba(0,0,0,0.45) !important;
        }

        /* Page block peeking at the right edge (the fore-edge) */
        #tfcLibraryRoot .tfc-book-pages {
          position: absolute !important;
          top: 5px !important;
          bottom: 5px !important;
          left: 3px !important;
          width: 5px !important;
          border-radius: 2px 0 0 2px !important;
          background: repeating-linear-gradient(90deg,
            #f7eeda 0px, #f7eeda 1px,
            #cbbfa4 1px, #cbbfa4 2px) !important;
          box-shadow: inset -2px 0 3px rgba(0,0,0,0.35) !important;
          z-index: 3 !important;
        }
        /* RTL library: page block peeks on the right side instead */
        [dir="rtl"] #tfcLibraryRoot .tfc-book-pages {
          left: auto !important;
          right: 3px !important;
          border-radius: 0 2px 2px 0 !important;
        }

        /* REAL COVER IMAGE — the ebook's own first page, filling the board */
        #tfcLibraryRoot .tfc-cover-real {
          position: absolute !important;
          inset: 3px !important;
          width: calc(100% - 6px) !important;
          height: calc(100% - 6px) !important;
          object-fit: contain !important;
          object-position: center center !important;
          border-radius: 2px 5px 5px 2px !important;
          opacity: 0 !important;
          transform: scale(1.03) !important;
          transition: opacity 0.7s cubic-bezier(0.32, 0.72, 0, 1), transform 0.7s cubic-bezier(0.32, 0.72, 0, 1) !important;
          z-index: 5 !important;
          background: #241105 !important;
        }
        #tfcLibraryRoot .tfc-book-spine.has-real .tfc-cover-real {
          opacity: 1 !important;
          transform: scale(1) !important;
        }
        /* ink-groove down the hinge where the cover meets the spine */
        #tfcLibraryRoot .tfc-book-hinge {
          position: absolute !important;
          top: 2px !important;
          bottom: 2px !important;
          right: 9px !important;
          width: 3px !important;
          background: linear-gradient(90deg,
            transparent 0%, rgba(0,0,0,0.55) 45%,
            rgba(255,235,190,0.18) 70%, transparent 100%) !important;
          z-index: 6 !important;
          pointer-events: none !important;
        }
        /* glass sheen across the cover */
        #tfcLibraryRoot .tfc-cover-sheen {
          position: absolute !important;
          inset: 0 !important;
          background: linear-gradient(115deg,
            rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 22%,
            transparent 45%, rgba(0,0,0,0.16) 78%, rgba(0,0,0,0.30) 100%) !important;
          z-index: 7 !important;
          pointer-events: none !important;
          border-radius: inherit !important;
        }
        /* hide the leather title block once a real cover is showing */
        #tfcLibraryRoot .tfc-book-spine.has-real .tfc-cover-title,
        #tfcLibraryRoot .tfc-book-spine.has-real .tfc-cover-author,
        #tfcLibraryRoot .tfc-book-spine.has-real .tfc-cover-ornament {
          opacity: 0 !important;
        }
        #tfcLibraryRoot .tfc-book-spine.has-real .tfc-cover-content {
          pointer-events: none !important;
        }
        /* soften the grain layer over real scans */
        #tfcLibraryRoot .tfc-book-spine.has-real .tfc-book-body::before {
          opacity: 0.4 !important;
        }

        /* Leather grain overlay */
        #tfcLibraryRoot .tfc-book-body::before {
          content: '' !important;
          position: absolute !important;
          inset: 0 !important;
          background:
            repeating-linear-gradient(115deg,
              rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 2px,
              transparent 2px, transparent 6px),
            radial-gradient(ellipse 130% 90% at 30% 0%, rgba(255,235,190,0.14) 0%, transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 30%, rgba(0,0,0,0.35) 100%) !important;
          pointer-events: none !important;
          z-index: 1 !important;
        }

        /* Gilt frame around the cover (classic Urdu binding) */
        #tfcLibraryRoot .tfc-cover-frame {
          position: absolute !important;
          inset: 6px 7px !important;
          border: 1px solid rgba(255, 216, 117, 0.55) !important;
          border-radius: 3px !important;
          box-shadow:
            inset 0 0 0 1px rgba(0,0,0,0.35),
            0 0 0 1px rgba(0,0,0,0.3) !important;
          pointer-events: none !important;
          z-index: 4 !important;
        }

        /* --- Cover content sits above the grain --- */
        #tfcLibraryRoot .tfc-cover-content {
          position: absolute !important;
          inset: 0 !important;
          z-index: 2 !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: space-between !important;
          padding: 12px 9px 8px 9px !important;
          text-align: center !important;
        }
        #tfcLibraryRoot .tfc-cover-title {
          font-size: 13px !important;
          font-weight: 700 !important;
          line-height: 1.55 !important;
          color: #ffdf9e !important;
          text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
          display: -webkit-box !important;
          -webkit-line-clamp: 3 !important;
          -webkit-box-orient: vertical !important;
          overflow: hidden !important;
          max-height: 62% !important;
          max-width: 100% !important;
        }
        #tfcLibraryRoot .tfc-cover-author {
          font-size: 9.5px !important;
          color: rgba(255, 226, 147, 0.85) !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          max-width: 100% !important;
          padding-bottom: 2px !important;
        }
        #tfcLibraryRoot .tfc-cover-ornament {
          font-size: 12px !important;
          color: #ffd875 !important;
          text-shadow: 0 0 6px rgba(255, 216, 117, 0.7) !important;
          line-height: 1 !important;
        }

        /* Cream-bound books get dark ink text */
        #tfcLibraryRoot .tfc-book-spine.tfc-cream .tfc-cover-title {
          color: #4a2a10 !important;
          text-shadow: 0 1px 1px rgba(255,255,255,0.45) !important;
        }
        #tfcLibraryRoot .tfc-book-spine.tfc-cream .tfc-cover-author {
          color: rgba(74, 42, 16, 0.9) !important;
        }
        #tfcLibraryRoot .tfc-book-spine.tfc-cream .tfc-cover-frame {
          border-color: rgba(120, 84, 30, 0.65) !important;
        }

        /* Gold foil accession dot at the cover foot */
        #tfcLibraryRoot .tfc-spine-dot {
          position: absolute !important;
          bottom: 7px !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          width: 5px !important;
          height: 5px !important;
          border-radius: 50% !important;
          background: radial-gradient(circle at 35% 30%, #ffe9ad 0%, #d4af37 60%, #8a6a14 100%) !important;
          box-shadow: 0 0 3px rgba(255, 216, 117, 0.6) !important;
          z-index: 5 !important;
          opacity: 0.9 !important;
        }

        /* ============================================================
           NATURAL DISORDER — the signature of a lived-in library
           ============================================================ */

        /* A leaning book rests against its neighbour (via --sl var);
           on hover it straightens as it is pulled out of the row. */

        /* Flat pile: books lying horizontally at the end of the row */
        #tfcLibraryRoot .tfc-flat-stack {
          display: flex !important;
          flex-direction: column !important;
          justify-content: flex-end !important;
          align-self: flex-end !important;
          flex: 0 0 auto !important;
          margin-bottom: -1px !important;
          margin-right: 4px !important;
          margin-left: 8px !important;
          z-index: 30 !important;
          pointer-events: none !important;
        }
        #tfcLibraryRoot .tfc-flat-book {
          position: relative !important;
          height: 26px !important;
          width: var(--fw, 150px) !important;
          border-radius: 2px !important;
          box-shadow:
            0 3px 6px rgba(0,0,0,0.6),
            inset 0 2px 3px rgba(255,235,190,0.25),
            inset 0 -3px 5px rgba(0,0,0,0.5) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 0 26px 0 10px !important;
          pointer-events: auto !important;
          cursor: pointer !important;
          transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1) !important;
        }
        /* Fore-edge page block on the fore (right in RTL) side */
        #tfcLibraryRoot .tfc-flat-book::before {
          content: '' !important;
          position: absolute !important;
          top: 3px !important;
          bottom: 3px !important;
          right: 3px !important;
          width: 6px !important;
          border-radius: 1px !important;
          background: repeating-linear-gradient(90deg,
            #f5ecd8 0px, #f5ecd8 1px,
            #cbbfa4 1px, #cbbfa4 2px) !important;
          opacity: 0.9 !important;
        }
        #tfcLibraryRoot .tfc-flat-book .tfc-flat-title {
          font-size: 10px !important;
          color: #ffdf9e !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          max-width: 100% !important;
          text-shadow: 0 1px 2px rgba(0,0,0,0.85) !important;
          position: relative !important;
          z-index: 2 !important;
        }
        #tfcLibraryRoot .tfc-flat-book.tfc-cream .tfc-flat-title {
          color: #4a2a10 !important;
        }

        /* Brass bookend closing the row */
        #tfcLibraryRoot .tfc-bookend {
          flex: 0 0 20px !important;
          height: 96px !important;
          align-self: flex-end !important;
          background: linear-gradient(90deg, #6b4a12 0%, #a37a2a 35%, #7a5a1a 70%, #4a340c 100%) !important;
          border-radius: 2px 2px 0 0 !important;
          box-shadow:
            -4px 5px 9px rgba(0,0,0,0.7),
            inset 1px 1px 2px rgba(255,235,190,0.45),
            inset -2px -2px 4px rgba(0,0,0,0.5) !important;
          position: relative !important;
          margin-bottom: -1px !important;
          margin-right: 2px !important;
        }
        #tfcLibraryRoot .tfc-bookend::before {
          content: '' !important;
          position: absolute !important;
          top: 8px !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          width: 8px !important;
          height: 8px !important;
          border-radius: 50% !important;
          background: radial-gradient(circle at 35% 30%, #ffe9ad 0%, #d4af37 55%, #7a5a14 100%) !important;
          box-shadow: 0 0 4px rgba(255,216,117,0.5) !important;
        }

        /* Brass museum plate screwed to the plank */
        #tfcLibraryRoot .tfc-shelf-plate {
          position: absolute !important;
          bottom: 12px !important;
          left: 34px !important;
          z-index: 40 !important;
          padding: 2px 9px 3px 9px !important;
          background: linear-gradient(180deg, #e8c96a 0%, #b8922e 55%, #8a6a1a 100%) !important;
          border-radius: 2px !important;
          font-size: 9.5px !important;
          font-weight: 700 !important;
          color: #2b1c04 !important;
          letter-spacing: 0.4px !important;
          box-shadow:
            0 2px 4px rgba(0,0,0,0.65),
            inset 0 1px 1px rgba(255,250,220,0.8),
            inset 0 -1px 1px rgba(60,40,5,0.6) !important;
        }
        #tfcLibraryRoot .tfc-shelf-plate::before,
        #tfcLibraryRoot .tfc-shelf-plate::after {
          content: '' !important;
          position: absolute !important;
          top: 50% !important;
          width: 2.5px !important;
          height: 2.5px !important;
          border-radius: 50% !important;
          transform: translateY(-50%) !important;
          background: radial-gradient(circle at 35% 30%, #fff3cf 0%, #6b4a10 80%) !important;
        }
        #tfcLibraryRoot .tfc-shelf-plate::before { right: -5px !important; }
        #tfcLibraryRoot .tfc-shelf-plate::after { left: -5px !important; }

        /* ============================================================
           THE MAHOGANY PLANK — thick, bevelled, warm
           ============================================================ */
        #tfcLibraryRoot .tfc-wood-plank {
          height: 22px !important;
          margin: 0 -22px !important;
          background:
            repeating-linear-gradient(90deg,
              rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px,
              transparent 1px, transparent 7px),
            linear-gradient(180deg,
              #8a4420 0%,
              #6b3014 18%,
              #4e1f0a 55%,
              #2e1104 88%,
              #1c0902 100%) !important;
          border-top: 2px solid rgba(214, 130, 66, 0.75) !important;
          border-bottom: 2px solid #0d0300 !important;
          border-radius: 2px !important;
          box-shadow:
            0 7px 14px rgba(0, 0, 0, 0.85),
            inset 0 1px 1px rgba(255, 190, 130, 0.35) !important;
          position: relative !important;
          z-index: 5 !important;
        }

        #tfcLibraryRoot .tfc-wood-shadow {
          height: 26px !important;
          margin: 0 -22px !important;
          background: linear-gradient(180deg,
            rgba(0,0,0,0.9) 0%,
            rgba(0,0,0,0.35) 55%,
            transparent 100%) !important;
        }

        /* ============================================================
           INTERACTION — the book is physically pulled out of the row:
           rises straight up out of the shelf, cover catches light
           ============================================================ */
        #tfcLibraryRoot .tfc-book-spine:hover,
        #tfcLibraryRoot .tfc-book-spine:focus-visible {
          transform: rotate(0deg) translateY(-24px) !important;
          z-index: 60 !important;
          filter: drop-shadow(0 22px 18px rgba(0,0,0,0.7)) brightness(1.12) !important;
        }
        #tfcLibraryRoot .tfc-flat-book:hover {
          transform: translateY(-6px) !important;
        }

        /* Tooltip floating above the pulled book */
        #tfcLibraryRoot .tfc-spine-tip {
          position: absolute !important;
          bottom: calc(100% + 10px) !important;
          right: 50% !important;
          transform: translateX(50%) translateY(6px) !important;
          background: rgba(16, 6, 2, 0.95) !important;
          border: 1px solid rgba(255, 216, 117, 0.55) !important;
          color: #ffdf9e !important;
          font-size: 11px !important;
          line-height: 1.6 !important;
          padding: 6px 10px !important;
          border-radius: 6px !important;
          white-space: normal !important;
          width: max-content !important;
          max-width: min(240px, 76vw) !important;
          text-align: center !important;
          opacity: 0 !important;
          pointer-events: none !important;
          transition: opacity 0.4s cubic-bezier(0.32, 0.72, 0, 1), transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
          z-index: 80 !important;
          box-shadow: 0 8px 20px rgba(0,0,0,0.8) !important;
        }
        #tfcLibraryRoot .tfc-book-spine:hover .tfc-spine-tip,
        #tfcLibraryRoot .tfc-book-spine:focus-visible .tfc-spine-tip {
          opacity: 1 !important;
          transform: translateX(50%) translateY(0) !important;
        }

        /* Featured-book spotlight (kept from approved mockup) */
        #tfcLibraryRoot .tfc-book-spine.glowing .tfc-book-body {
          box-shadow:
            0 0 26px rgba(255, 191, 0, 0.55),
            inset 0 2px 2px rgba(255, 230, 170, 0.35),
            inset -2px 0 3px rgba(0,0,0,0.55),
            inset 2px 0 3px rgba(0,0,0,0.45) !important;
        }
        #tfcLibraryRoot .tfc-book-spine.glowing .tfc-spine-dot {
          width: 7px !important;
          height: 7px !important;
          box-shadow: 0 0 8px rgba(255, 216, 117, 0.95) !important;
        }

        /* Empty-shelf message */
        #tfcLibraryRoot .tfc-empty-wall {
          text-align: center !important;
          padding: 70px 20px !important;
          color: #d1c4b2 !important;
          font-size: 17px !important;
        }

        /* ============================================================
           MOBILE — smaller cover-out books, shelves still single-line
           ============================================================ */
        @media (max-width: 768px) {
          #tfcLibraryRoot .tfc-bookcase-wall {
            padding: 28px 12px 8px 12px !important;
          }
          #tfcLibraryRoot .tfc-shelf-row {
            padding: 0 14px !important;
            margin-bottom: 42px !important;
          }
          #tfcLibraryRoot .tfc-shelf-row::before,
          #tfcLibraryRoot .tfc-shelf-row::after {
            width: 14px !important;
          }
          #tfcLibraryRoot .tfc-shelf-books {
            gap: 0 8px !important;
            padding: 12px 4px 0 4px !important;
          }
          /* v14.8.1 (mobile): the row capacity is computed from the real
             cabinet width (tfcRowCapacity in tafacur.js) and tfcFitRow then
             scales the row to fit it exactly. A phone row now holds only the
             books that genuinely fit (2-4 rather than a forced 7), so these
             two declarations just let the fitted --w/--h win on phones: each
             spine is as large as its row allows, and the cover art is drawn
             uncropped instead of being squashed to 38-84px and cropped. */
          #tfcLibraryRoot .tfc-book-spine {
            width: var(--w, 96px) !important;
            height: var(--h, 150px) !important;
            --sl: 0deg !important;
          }
          #tfcLibraryRoot .tfc-cover-title { font-size: 10px !important; -webkit-line-clamp: 2 !important; }
          #tfcLibraryRoot .tfc-cover-author { display: none !important; }
          #tfcLibraryRoot .tfc-cover-ornament { font-size: 9px !important; }
          #tfcLibraryRoot .tfc-cover-frame { inset: 4px 5px !important; }
          #tfcLibraryRoot .tfc-book-pages { width: 3px !important; top: 4px !important; bottom: 4px !important; }
          /* v14.8.1 (mobile): a phone row now holds only the books that fit, so
             there is room to honour the cover's own aspect ratio — stay with
             contain (the base rule) and never crop the scan. */
          #tfcLibraryRoot .tfc-cover-real { inset: 2px !important; width: calc(100% - 4px) !important; height: calc(100% - 4px) !important; object-fit: contain !important; }
          #tfcLibraryRoot .tfc-book-hinge { right: 6px !important; width: 2px !important; }
          #tfcLibraryRoot .tfc-flat-book {
            width: 96px !important;
            height: 18px !important;
          }
          #tfcLibraryRoot .tfc-flat-book .tfc-flat-title { font-size: 8px !important; }
          #tfcLibraryRoot .tfc-bookend {
            flex-basis: 14px !important;
            height: 66px !important;
            margin-right: 2px !important;
          }
          #tfcLibraryRoot .tfc-shelf-plate {
            left: 20px !important;
            bottom: 8px !important;
            font-size: 8.5px !important;
          }
          #tfcLibraryRoot .tfc-shelf-title { font-size: 13px !important; padding-right: 4px !important; }
          #tfcLibraryRoot .tfc-wood-plank {
            margin: 0 -14px !important;
            height: 16px !important;
          }
          #tfcLibraryRoot .tfc-wood-shadow {
            margin: 0 -14px !important;
            height: 18px !important;
          }
        }

        /* */

        /* 4. MODAL OVERLAY (IMAGE 2) */
        #tfcModalBackdrop {
          display: none !important;
          position: fixed !important;
          top: 0; left: 0; right: 0; bottom: 0 !important;
          background: rgba(8, 3, 1, 0.92) !important;
          backdrop-filter: blur(8px) !important;
          z-index: 999999 !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 20px !important;
        }
        #tfcModalBackdrop.active {
          display: flex !important;
        }

        #tfcModalCard {
          background: radial-gradient(circle at 50% 50%, #1e0d06 0%, #0d0502 100%) !important;
          border: 1px solid rgba(212, 175, 55, 0.5) !important;
          border-radius: 16px !important;
          max-width: 950px !important;
          width: 100% !important;
          box-shadow: 0 25px 80px rgba(0,0,0,0.98), 0 0 25px rgba(212, 175, 55, 0.25) !important;
          position: relative !important;
          overflow: hidden !important;
          padding: 30px !important;
          max-height: 90vh !important;
          overflow-y: auto !important;
        }

        #tfcModalCloseBtn {
          position: absolute !important;
          top: 14px !important;
          left: 16px !important;
          background: rgba(255, 255, 255, 0.1) !important;
          border: none !important;
          color: #f5ebe1 !important;
          font-size: 18px !important;
          width: 34px !important;
          height: 34px !important;
          border-radius: 50% !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          z-index: 20 !important;
        }
        #tfcModalCloseBtn:hover {
          background: rgba(220, 38, 38, 0.8) !important;
        }

        #tfcModalGrid {
          display: flex !important;
          flex-direction: row !important;
          gap: 28px !important;
          align-items: center !important;
        }
        @media (max-width: 768px) {
          #tfcModalGrid {
            flex-direction: column !important;
          }
        }

        /* RIGHT SIDE IN RTL: 3D OPEN BOOK SPREAD (IMAGE 2) */
        #tfcOpenDesk {
          flex: 1 1 50% !important;
          background: radial-gradient(circle at 50% 50%, #2b130a 0%, #150803 100%) !important;
          border: 3px solid #4a2110 !important;
          border-radius: 12px !important;
          padding: 24px 16px !important;
          box-shadow: inset 0 0 25px rgba(0,0,0,0.9), 0 10px 25px rgba(0,0,0,0.8) !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }

        #tfcOpenSpread {
          display: flex !important;
          width: 100% !important;
          max-width: 360px !important;
          height: 235px !important;
          background: #fbf6ec !important;
          border-radius: 4px !important;
          box-shadow: 
            0 15px 35px rgba(0,0,0,0.95),
            -4px 0 12px rgba(0,0,0,0.4),
            4px 0 12px rgba(0,0,0,0.4) !important;
          position: relative !important;
          overflow: hidden !important;
        }

        #tfcOpenSpread::after {
          content: '' !important;
          position: absolute !important;
          top: 0; bottom: 0; left: 50% !important;
          width: 16px !important;
          transform: translateX(-50%) !important;
          background: linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.22) 100%) !important;
          z-index: 5 !important;
        }

        #tfcPageRight, #tfcPageLeft {
          flex: 1 !important;
          padding: 16px 12px !important;
          color: #291807 !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          text-align: center !important;
          position: relative !important;
        }

        #tfcPageOrnamentRight, #tfcPageOrnamentLeft {
          border: 1px solid rgba(184, 134, 11, 0.45) !important;
          height: 100% !important;
          padding: 8px 6px !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
          align-items: center !important;
          border-radius: 3px !important;
        }

        /* LEFT SIDE IN RTL: DETAILS & CLOUD BUTTONS (IMAGE 2) */
        #tfcDetailsPane {
          flex: 1 1 50% !important;
          text-align: right !important;
          display: flex !important;
          flex-direction: column !important;
          justify-content: center !important;
        }

        #tfcModalBookTitle {
          font-size: 26px !important;
          font-weight: 700 !important;
          color: #fce293 !important;
          margin: 0 0 8px 0 !important;
        }

        #tfcModalBookMeta {
          font-size: 13.5px !important;
          color: #d1c4b2 !important;
          margin-bottom: 12px !important;
        }

        #tfcModalBookDesc {
          font-size: 13.5px !important;
          color: #e5ded5 !important;
          line-height: 1.8 !important;
          margin: 0 0 16px 0 !important;
        }

        /* BUTTON 1: GOLD FLIPBOOK (IMAGE 2) */
        #tfcBtnGold {
          background: linear-gradient(135deg, #d4af37 0%, #b8860b 50%, #996515 100%) !important;
          color: #170903 !important;
          font-weight: 700 !important;
          font-size: 15px !important;
          padding: 13px 20px !important;
          border-radius: 10px !important;
          border: none !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          width: 100% !important;
          box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
          margin-bottom: 12px !important;
          transition: all 0.25s ease !important;
        }
        #tfcBtnGold:hover {
          background: linear-gradient(135deg, #f7d57f 0%, #d4af37 100%) !important;
          transform: translateY(-1px) !important;
        }

        #tfcDividerText {
          font-size: 12.5px !important;
          color: #a8a29e !important;
          text-align: center !important;
          margin-bottom: 10px !important;
        }

        /* BUTTON 2: PRIMARY HIGH-SPEED CLOUD CDN (VIBRANT BLUE) */
        #tfcBtnBlue {
          background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
          color: #ffffff !important;
          font-weight: 600 !important;
          font-size: 14.5px !important;
          padding: 12px 20px !important;
          border-radius: 10px !important;
          text-decoration: none !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          width: 100% !important;
          margin-bottom: 10px !important;
          border: none !important;
          cursor: pointer !important;
          box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
          transition: all 0.2s ease !important;
        }
        #tfcBtnBlue:hover {
          background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
          transform: translateY(-1px) !important;
        }

        /* BUTTON 3: CLOUD MIRROR SERVER (VIBRANT ORANGE) */
        #tfcBtnOrange {
          background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
          color: #ffffff !important;
          font-weight: 600 !important;
          font-size: 14.5px !important;
          padding: 12px 20px !important;
          border-radius: 10px !important;
          text-decoration: none !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 10px !important;
          width: 100% !important;
          margin-bottom: 12px !important;
          border: none !important;
          cursor: pointer !important;
          box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4) !important;
          transition: all 0.2s ease !important;
        }
        #tfcBtnOrange:hover {
          background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
          transform: translateY(-1px) !important;
        }

        /* INTERACTIVE 5-STAR RATING */
        .tfc-rating-wrapper {
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          gap: 8px !important;
          margin: 6px 0 !important;
        }
        .tfc-stars-interactive {
          display: inline-flex !important;
          direction: ltr !important;
          cursor: pointer !important;
        }
        .tfc-stars-interactive span,
        .tfc-stars-interactive button {
          font-size: 20px !important;
          color: #fbbf24 !important;
          padding: 0 2px !important;
          transition: transform 0.15s ease !important;
          /* v14.3.8 (P0): the stars are real buttons — drop the button chrome */
          background: none !important;
          border: 0 !important;
          margin: 0 !important;
          font-family: inherit !important;
          line-height: 1 !important;
          cursor: pointer !important;
        }
        .tfc-stars-interactive span:hover,
        .tfc-stars-interactive button:hover {
          transform: scale(1.3) !important;
        }
        .tfc-stars-interactive button:focus-visible {
          outline: 2px solid #ffd875 !important;
          outline-offset: 2px !important;
          border-radius: 4px !important;
        }

        /* SOCIAL SHARE BAR */
        .tfc-share-bar {
          display: flex !important;
          justify-content: center !important;
          gap: 8px !important;
          flex-wrap: wrap !important;
          margin-top: 10px !important;
          padding-top: 10px !important;
          border-top: 1px dashed rgba(212, 175, 55, 0.25) !important;
        }
        .tfc-share-btn {
          background: rgba(255, 255, 255, 0.08) !important;
          border: 1px solid rgba(255, 255, 255, 0.15) !important;
          color: #e5ded5 !important;
          padding: 5px 12px !important;
          border-radius: 6px !important;
          font-size: 12px !important;
          cursor: pointer !important;
          transition: all 0.2s ease !important;
          display: inline-flex !important;
          align-items: center !important;
          gap: 5px !important;
        }
        .tfc-share-btn:hover {
          background: rgba(255, 216, 117, 0.2) !important;
          color: #ffd875 !important;
          border-color: #ffd875 !important;
        }

        /* 5. 5-SECOND COUNTDOWN GATEWAY */
        #tfcGatewayBackdrop {
          display: none !important;
          position: fixed !important;
          top: 0; left: 0; right: 0; bottom: 0 !important;
          background: rgba(5, 2, 1, 0.94) !important;
          backdrop-filter: blur(10px) !important;
          z-index: 1000000 !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 16px !important;
        }
        #tfcGatewayBackdrop.active {
          display: flex !important;
        }

        .tfc-gateway-card {
          background: radial-gradient(circle at 50% 30%, #291207 0%, #100602 100%) !important;
          border: 1px solid rgba(212, 175, 55, 0.6) !important;
          border-radius: 18px !important;
          max-width: 580px !important;
          width: 100% !important;
          padding: 26px !important;
          text-align: center !important;
          position: relative !important;
          box-shadow: 0 25px 90px rgba(0,0,0,0.99), 0 0 35px rgba(212, 175, 55, 0.25) !important;
        }

        .tfc-gateway-close {
          position: absolute !important;
          top: 14px !important;
          left: 16px !important;
          background: rgba(255, 255, 255, 0.1) !important;
          border: none !important;
          color: #f5ebe1 !important;
          font-size: 16px !important;
          width: 32px !important;
          height: 32px !important;
          border-radius: 50% !important;
          cursor: pointer !important;
        }

        .tfc-timer-circle-wrap {
          position: relative !important;
          width: 100px !important;
          height: 100px !important;
          margin: 15px auto !important;
        }
        .tfc-timer-svg {
          transform: rotate(-90deg) !important;
          width: 100px !important;
          height: 100px !important;
        }
        .tfc-timer-bg {
          fill: none !important;
          stroke: rgba(255, 255, 255, 0.1) !important;
          stroke-width: 7 !important;
        }
        .tfc-timer-bar {
          fill: none !important;
          stroke: #ffd875 !important;
          stroke-width: 7 !important;
          stroke-linecap: round !important;
          stroke-dasharray: 276 !important;
          stroke-dashoffset: 0 !important;
          transition: stroke-dashoffset 1s linear !important;
        }
        .tfc-timer-number {
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important;
          font-size: 32px !important;
          font-weight: 700 !important;
          color: #ffd875 !important;
        }

        #tfcDirectDownloadBtn {
          display: none;
          background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
          color: #ffffff !important;
          padding: 12px 24px !important;
          border-radius: 10px !important;
          text-decoration: none !important;
          font-weight: 700 !important;
          font-size: 15px !important;
          box-shadow: 0 4px 15px rgba(16, 185, 129, 0.45) !important;
        }

        /* 6. SUPER-FAST ONLINE READER MODAL (DUAL MODE: FAST STREAM & 3D FLIPBOOK) */
        #tfcFlipbookBackdrop {
          display: none !important;
          position: fixed !important;
          top: 0; left: 0; right: 0; bottom: 0 !important;
          background: rgba(5, 2, 1, 0.96) !important;
          backdrop-filter: blur(10px) !important;
          z-index: 1000000 !important;
          align-items: center !important;
          justify-content: center !important;
          padding: 12px !important;
        }
        #tfcFlipbookBackdrop.active {
          display: flex !important;
        }

        .tfc-flipbook-card {
          background: #110502 !important;
          border: 1px solid rgba(212, 175, 55, 0.6) !important;
          border-radius: 14px !important;
          width: 96% !important;
          max-width: 1100px !important;
          height: 92vh !important;
          display: flex !important;
          flex-direction: column !important;
          overflow: hidden !important;
          box-shadow: 0 25px 90px rgba(0,0,0,0.99) !important;
        }

        .tfc-flipbook-header {
          background: #1e0d06 !important;
          border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
          padding: 10px 18px !important;
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          flex-wrap: wrap !important;
          gap: 10px !important;
        }

        .tfc-reader-mode-btn {
          background: rgba(255, 255, 255, 0.1) !important;
          border: 1px solid rgba(212, 175, 55, 0.4) !important;
          color: #d1c4b2 !important;
          padding: 4px 12px !important;
          border-radius: 6px !important;
          font-size: 13px !important;
          cursor: pointer !important;
        }
        .tfc-reader-mode-btn.active {
          background: #ffd875 !important;
          color: #1a0802 !important;
          font-weight: 700 !important;
        }

        .tfc-flipbook-body {
          flex: 1 !important;
          position: relative !important;
          background: #000000 !important;
        }

        .tfc-flipbook-body iframe,
        .tfc-flipbook-body embed {
          width: 100% !important;
          height: 100% !important;
          border: none !important;
        }
        /* ============================================================
           READING ROOM v14 — online reader redesign
           A warm leather-and-ink desk: toolbar like a reading stand,
           iframe book in a double-bezel frame, RTL-first.
           ============================================================ */
        #tfcFlipbookBackdrop {
          background:
            radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255, 200, 120, 0.08) 0%, transparent 60%),
            rgba(8, 3, 1, 0.93) !important;
          backdrop-filter: blur(14px) !important;
          padding: 18px !important;
        }
        .tfc-flipbook-card {
          background:
            radial-gradient(ellipse 100% 70% at 50% -10%, #2a1207 0%, #150803 55%, #0d0401 100%) !important;
          border: 1px solid rgba(255, 216, 117, 0.28) !important;
          border-radius: 22px !important;
          max-width: 1240px !important;
          height: 94vh !important;
          box-shadow: 0 40px 90px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 235, 190, 0.12) !important;
          overflow: hidden !important;
        }
        .tfc-flipbook-header {
          background: linear-gradient(180deg, rgba(60, 28, 12, 0.9) 0%, rgba(32, 14, 6, 0.95) 100%) !important;
          border-bottom: 1px solid rgba(255, 216, 117, 0.22) !important;
          padding: 12px 18px !important;
          gap: 12px !important;
        }
        #tfcFlipbookTitle {
          color: #fce293 !important;
          font-size: 16px !important;
          font-weight: 700 !important;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
          white-space: nowrap !important;
          overflow: hidden !important;
          text-overflow: ellipsis !important;
          max-width: 44vw !important;
        }
        .tfc-reader-mode-btn {
          background: rgba(255, 240, 210, 0.06) !important;
          border: 1px solid rgba(255, 216, 117, 0.30) !important;
          color: #e5d5b5 !important;
          padding: 6px 14px !important;
          border-radius: 999px !important;
          font-size: 12.5px !important;
          cursor: pointer !important;
          transition: all 0.45s cubic-bezier(0.32, 0.72, 0, 1) !important;
          white-space: nowrap !important;
        }
        .tfc-reader-mode-btn:hover {
          background: rgba(255, 216, 117, 0.14) !important;
          color: #ffdf9e !important;
        }
        .tfc-reader-mode-btn.active {
          background: linear-gradient(135deg, #f7d57f 0%, #d4af37 100%) !important;
          color: #241100 !important;
          font-weight: 700 !important;
          box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35) !important;
        }
        .tfc-flipbook-body {
          margin: 14px 16px 16px 16px !important;
          border-radius: 14px !important;
          overflow: hidden !important;
          border: 1px solid rgba(255, 216, 117, 0.20) !important;
          box-shadow:
            0 18px 45px rgba(0, 0, 0, 0.8),
            inset 0 1px 0 rgba(255, 240, 210, 0.10) !important;
          background: #1a0b04 !important;
        }
        .tfc-flipbook-body iframe {
          width: 100% !important;
          height: 100% !important;
          border: none !important;
          background: #f5efe2 !important;
        }
        .tfc-reader-note {
          display: none !important;
          position: absolute !important;
          inset: 0 !important;
          z-index: 5 !important;
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
          color: #d9c8a5 !important;
          font-size: 14px !important;
          line-height: 2.1 !important;
          padding: 30px !important;
          background: radial-gradient(ellipse at 50% 40%, #241105 0%, #120602 100%) !important;
        }
        .tfc-reader-note.show { display: flex !important; }
        /* v14.2 in-house RTL flipbook (real page images, Urdu direction) */
        #tfcBookViewport {
          display: none;
          position: absolute !important;
          inset: 0 !important;
          overflow: hidden !important;
          background: radial-gradient(ellipse at 50% 30%, #22120a 0%, #0d0502 100%) !important;
          perspective: 2400px;
        }
        #tfcBookViewport.tfc-book-active { display: block !important; }
        #tfcBookViewport .tfc-leaf {
          position: absolute;
          top: 6%; bottom: 12%;
          width: 43%;
          display: flex; align-items: center; justify-content: center;
          backface-visibility: hidden;
        }
        #tfcBookViewport .tfc-leaf img {
          max-width: 100%; max-height: 100%;
          box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 216, 117, 0.14);
          border-radius: 3px;
          background: #f5efe2;
        }
        #tfcBookViewport .tfc-leaf.tfc-anim-next {
          animation: tfcPageTurnNext 0.62s cubic-bezier(0.32, 0.72, 0, 1);
        }
        #tfcBookViewport .tfc-leaf.tfc-anim-prev {
          animation: tfcPageTurnPrev 0.62s cubic-bezier(0.32, 0.72, 0, 1);
        }
        @keyframes tfcPageTurnNext {
          from { transform: rotateY(0deg); opacity: 0.35; }
          to   { transform: rotateY(0deg); opacity: 1; }
        }
        @keyframes tfcPageTurnPrev {
          from { transform: rotateY(0deg); opacity: 0.35; }
          to   { transform: rotateY(0deg); opacity: 1; }
        }
        #tfcFlipNavPrev, #tfcFlipNavNext {
          position: absolute;
          bottom: 3.2%;
          z-index: 6;
          background: rgba(48, 22, 10, 0.92);
          color: #ffdf9e;
          border: 1px solid rgba(255, 216, 117, 0.35);
          padding: 7px 16px;
          border-radius: 999px;
          font-size: 12.5px;
          cursor: pointer;
          display: none;
        }
        #tfcFlipNavPrev:hover, #tfcFlipNavNext:hover { background: rgba(90, 40, 15, 0.95); }
        #tfcFlipNavPrev { right: 3%; }   /* Urdu book: "previous" sits on the right */
        #tfcFlipNavNext { left: 3%; }
        #tfcBookPagePos {
          position: absolute;
          bottom: 3.6%;
          left: 50%; transform: translateX(-50%);
          z-index: 6;
          color: #d9c8a5;
          font-size: 12px;
          background: rgba(26, 11, 4, 0.85);
          border: 1px solid rgba(255, 216, 117, 0.22);
          padding: 5px 14px;
          border-radius: 999px;
          display: none;
          white-space: nowrap;
        }
        #tfcReaderGestureHint {
          position: absolute;
          bottom: 9%;
          left: 50%; transform: translateX(-50%);
          z-index: 6;
          color: #b6a68a;
          font-size: 11px;
          background: rgba(26, 11, 4, 0.6);
          border: 1px solid rgba(255, 216, 117, 0.16);
          padding: 4px 12px;
          border-radius: 999px;
          display: none;
          white-space: nowrap;
          pointer-events: none;
        }
        @media (max-width: 768px) {
          .tfc-flipbook-card { border-radius: 16px !important; height: 96vh !important; }
          .tfc-flipbook-body { margin: 10px 8px 8px 8px !important; }
          #tfcFlipbookTitle { max-width: 100vw !important; font-size: 13px !important; }
          .tfc-reader-mode-btn { padding: 5px 10px !important; font-size: 11px !important; }
          #tfcBookViewport .tfc-leaf { width: 86%; top: 4%; bottom: 14%; }
          #tfcFlipNavPrev { right: 2.5%; bottom: 2.2%; }
          #tfcFlipNavNext { left: 2.5%; bottom: 2.2%; }
          #tfcBookPagePos { bottom: 2.4%; font-size: 11px; }
          #tfcReaderGestureHint { bottom: 8.4%; font-size: 10px; }
        }


        /* Toast notifications */
        #tfcToast {
          position: fixed !important;
          bottom: 24px !important;
          left: 50% !important;
          transform: translateX(-50%) !important;
          background: #10b981 !important;
          color: #ffffff !important;
          padding: 8px 18px !important;
          border-radius: 8px !important;
          font-size: 14px !important;
          font-weight: bold !important;
          z-index: 10000001 !important;
          box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
          display: none;
        }
      /* v14.3.8 (P0): the shelf has a lot of motion — spine pulls, sheen sweeps,
         leaf turns. Give users who asked their OS to calm motion an instant,
         still version of the same interface. */
      @media (prefers-reduced-motion: reduce) {
        #tfcLibraryRoot *,
        #tfcLibraryRoot *::before,
        #tfcLibraryRoot *::after {
          transition-duration: 0.01ms !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
        }
      }

      /* ============================================================
         <<TFC_VIEW_MODE_CSS>> v14.3.9 — the same results, read two ways
         Standing the books in a wooden cabinet is a lovely way to BROWSE.
         It is a poor way to LOOK SOMETHING UP: a searcher needs to scan
         titles, authors and years as text, not hover seven spines in turn.
         Switching layouts only re-packs the identical result set.
         ============================================================ */
      #tfcLibraryRoot .tfc-view-wrap {
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        white-space: nowrap !important;
      }
      #tfcLibraryRoot .tfc-view-label { color: #9c8a72 !important; font-size: 12.5px !important; }
      #tfcLibraryRoot .tfc-view-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 3px !important;
        border: 1px solid rgba(160, 82, 45, 0.6) !important;
        border-radius: 999px !important;
        background: rgba(22, 9, 4, 0.95) !important;
      }
      #tfcLibraryRoot .tfc-view-btn {
        background: none !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 9px 15px !important;
        min-height: 38px !important;
        font-family: inherit !important;
        font-size: 13px !important;
        color: #b9a88f !important;
        border-radius: 999px !important;
        cursor: pointer !important;
        position: relative !important;
        transition: background 0.2s ease, color 0.2s ease !important;
      }
      /* v14.3.9: the chip stays slim, but its tap target grows to the 44px
         every platform's guidelines ask for — the same trick the pills use */
      #tfcLibraryRoot .tfc-view-btn::before {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        height: 44px !important;
        transform: translateY(-50%) !important;
      }
      #tfcLibraryRoot .tfc-view-btn:hover { color: #ffdf9e !important; }
      #tfcLibraryRoot .tfc-view-btn.active {
        background: rgba(255, 216, 117, 0.16) !important;
        color: #ffd875 !important;
        font-weight: 700 !important;
      }
      #tfcLibraryRoot .tfc-view-btn:focus-visible {
        outline: 2px solid #ffd875 !important;
        outline-offset: 2px !important;
      }

      /* --- list layout: a flat reading surface, not a cabinet --- */
      #tfcLibraryRoot .tfc-bookcase-wall.tfc-list-mode {
        background: linear-gradient(180deg, #1c0a04 0%, #100402 100%) !important;
        padding: 26px 24px 34px 24px !important;
      }
      #tfcLibraryRoot .tfc-list-heading {
        max-width: 920px !important;
        margin: 0 auto 16px auto !important;
        text-align: center !important;
        color: #ffdf9e !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.6 !important;
      }
      #tfcLibraryRoot .tfc-list-rows {
        max-width: 920px !important;
        margin: 0 auto 22px auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
      }
      #tfcLibraryRoot .tfc-list-row {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        min-height: 44px !important;
        padding: 9px 12px !important;
        text-align: right !important;
        background: rgba(48, 22, 10, 0.5) !important;
        border: 1px solid rgba(255, 216, 117, 0.16) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        transition: background 0.18s ease, border-color 0.18s ease !important;
      }
      #tfcLibraryRoot .tfc-list-row:hover {
        background: rgba(90, 40, 15, 0.6) !important;
        border-color: rgba(255, 216, 117, 0.5) !important;
      }
      #tfcLibraryRoot .tfc-list-row:focus-visible {
        outline: 2px solid #ffd875 !important;
        outline-offset: 2px !important;
        background: rgba(90, 40, 15, 0.6) !important;
      }
      #tfcLibraryRoot .tfc-list-cover {
        position: relative !important;
        flex: 0 0 auto !important;
        width: 46px !important;
        height: 64px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        background: linear-gradient(160deg, #5a2a0e, #2a1206) !important;
        border: 1px solid rgba(255, 216, 117, 0.22) !important;
      }
      #tfcLibraryRoot .tfc-list-cover-fallback {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffd875 !important;
        font-size: 18px !important;
        opacity: 0.45 !important;
      }
      #tfcLibraryRoot .tfc-list-cover img {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
      }
      #tfcLibraryRoot .tfc-list-meta { flex: 1 1 auto !important; min-width: 0 !important; }
      #tfcLibraryRoot .tfc-list-title {
        margin: 0 !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        color: #f6ecd9 !important;
        line-height: 1.75 !important;
        /* a long Urdu title gets two lines, never a taller row */
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
      }
      #tfcLibraryRoot .tfc-list-author {
        font-size: 12.5px !important;
        color: #c8b79c !important;
        line-height: 1.8 !important;
        margin-top: 2px !important;
      }
      #tfcLibraryRoot .tfc-list-facts {
        margin-top: 5px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 11.5px !important;
        color: #a8997f !important;
      }
      #tfcLibraryRoot .tfc-list-year {
        border: 1px solid rgba(255, 216, 117, 0.22) !important;
        border-radius: 999px !important;
        padding: 1px 9px !important;
      }
      /* --- v14.4 phonetic search (roman keys → Urdu terms) --- */
      #tfcLibraryRoot .tfc-search-hint {
        font-size: 10px !important;
        color: #8d7f6b !important;
        margin-top: 4px !important;
        text-align: center !important;
        line-height: 1.95 !important;
      }
      #tfcLibraryRoot .tfc-phon-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 7px !important;
      }
      #tfcLibraryRoot .tfc-phon-btn {
        background: none !important;
        border: 1px solid rgba(255, 216, 117, 0.3) !important;
        border-radius: 999px !important;
        margin: 0 !important;
        padding: 5px 12px !important;
        font-family: inherit !important;
        font-size: 12px !important;
        color: #ffdf9e !important;
        cursor: pointer !important;
        position: relative !important;
        white-space: nowrap !important;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
      }
      /* the chip stays slim; its tap target is 44px, like every other control */
      #tfcLibraryRoot .tfc-phon-btn::before {
        content: '' !important;
        position: absolute !important;
        left: -4px !important;
        right: -4px !important;
        top: 50% !important;
        height: 44px !important;
        transform: translateY(-50%) !important;
      }
      #tfcLibraryRoot .tfc-phon-btn:hover { background: rgba(255, 216, 117, 0.1) !important; }
      #tfcLibraryRoot .tfc-phon-btn.active {
        background: rgba(255, 216, 117, 0.18) !important;
        border-color: #ffd875 !important;
        color: #ffd875 !important;
        font-weight: 700 !important;
      }
      #tfcLibraryRoot .tfc-phon-btn:focus-visible {
        outline: 2px solid #ffd875 !important;
        outline-offset: 3px !important;
      }
      /* the suggested spellings sit in the line under the box */
      #tfcLibraryRoot .tfc-phon-label {
        color: #9c8a72 !important;
        font-size: 11.5px !important;
      }
      #tfcLibraryRoot .tfc-phon-preview {
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
      }
      #tfcLibraryRoot .tfc-phon-chip {
        background: rgba(255, 216, 117, 0.08) !important;
        border: 1px dashed rgba(255, 216, 117, 0.45) !important;
        border-radius: 999px !important;
        margin: 0 !important;
        padding: 6px 14px !important;
        min-height: 36px !important;
        font-family: inherit !important;
        font-size: 12.5px !important;
        color: #ffe9b8 !important;
        cursor: pointer !important;
      }
      #tfcLibraryRoot .tfc-phon-chip:hover { background: rgba(255, 216, 117, 0.18) !important; }
      /* a spelling the catalog itself uses — a fact, not a guess */
      #tfcLibraryRoot .tfc-phon-hit {
        border: 1px solid rgba(255, 216, 117, 0.75) !important;
        background: rgba(255, 216, 117, 0.13) !important;
        color: #ffd875 !important;
        font-weight: 700 !important;
      }
      #tfcLibraryRoot .tfc-phon-chip:focus-visible {
        outline: 2px solid #ffd875 !important;
        outline-offset: 2px !important;
      }
      @media (max-width: 640px) {
        #tfcLibraryRoot .tfc-view-label { display: none !important; }
        #tfcLibraryRoot .tfc-list-row { padding: 9px 10px !important; gap: 10px !important; }
        #tfcLibraryRoot .tfc-list-cover { width: 38px !important; height: 54px !important; }
        #tfcLibraryRoot .tfc-list-title { font-size: 13.5px !important; }
      }