.bible-hero {
      height: 62vh;
      min-height: 420px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: var(--primary);
      margin-top: 64px;
    }
    .bible-hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #0a0a0b 0%, #1e1c1c 50%, #111010 100%);
      z-index: 0;
    }
    .bible-hero-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle at 20% 40%, rgba(255,255,255,0.025) 0%, transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(255,255,255,0.02) 0%, transparent 50%);
      z-index: 1;
    }
    .bible-hero-bg::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 1px;
      background: rgba(255,255,255,0.08);
    }
    .bible-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 0 2rem;
      max-width: 700px;
      width: 100%;
    }
    @keyframes fadeInUp {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .bible-hero-eyebrow {
      font-size: .68rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.4);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 1.1rem;
      opacity: 0;
      animation: fadeInUp .8s ease-out .3s forwards;
    }
    .bible-hero-eyebrow::before,
    .bible-hero-eyebrow::after {
      content: '';
      display: block;
      width: 22px;
      height: 1px;
      background: rgba(255,255,255,.22);
    }
    .bible-hero-title {
      font-size: clamp(2rem, 5vw, 3.4rem);
      font-weight: 800;
      color: #ffffff;
      line-height: 1.12;
      margin-bottom: 1.1rem;
      letter-spacing: -.02em;
      opacity: 0;
      animation: fadeInUp .8s ease-out .5s forwards;
    }
    .bible-hero-divider {
      width: 36px;
      height: 1px;
      background: rgba(255,255,255,.25);
      margin: 0 auto 1.2rem;
      opacity: 0;
      animation: fadeInUp .8s ease-out .65s forwards;
    }
    .bible-hero-desc {
      font-size: 1rem;
      color: rgba(255,255,255,.56);
      line-height: 1.8;
      font-weight: 300;
      max-width: 500px;
      margin: 0 auto;
      opacity: 0;
      animation: fadeInUp .8s ease-out .8s forwards;
    }

    /* ══ BREADCRUMB ══ */
    .breadcrumb-bar { background:var(--section1); border-bottom:1px solid var(--border); padding:.7rem 0; }
    .breadcrumb-inner { max-width:90%; margin:0 auto; display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--text-secondary); }
    .breadcrumb-inner a { color:var(--text-secondary); text-decoration:none; transition:.18s; }
    .breadcrumb-inner a:hover { color:var(--text-primary); }
    .breadcrumb-sep { opacity:.4; font-size:.7rem; }
    .breadcrumb-current { color:var(--text-primary); font-weight:500; }

    /* ══ NAV RAPIDE ══ */
    .bible-index { background:var(--section2); border-bottom:1px solid var(--border); position:sticky; top:62px; z-index:900; transition:background .3s; }
    .bible-index-inner { max-width:90%; margin:0 auto; display:flex; overflow-x:auto; scrollbar-width:none; }
    .bible-index-inner::-webkit-scrollbar { display:none; }
    .bible-index-link {
      display:flex; align-items:center; gap:.45rem;
      padding:.9rem 1.4rem;
      font-size:.82rem; font-weight:500;
      color:var(--text-secondary);
      text-decoration:none;
      border:none; border-bottom:2px solid transparent;
      background:none;
      white-space:nowrap; cursor:pointer; transition:.2s; flex-shrink:0;
      font-family:'Roboto',sans-serif;
    }
    .bible-index-link i { font-size:.8rem; opacity:.7; }
    .bible-index-link:hover { color:var(--text-primary); border-bottom-color:rgba(0,0,0,.15); }
    .bible-index-link.active { color:var(--text-primary); border-bottom-color:var(--primary); }
    body.dark-mode .bible-index-link.active { border-bottom-color:#fff; }


    .bible-main { max-width:90%; margin:0 auto; padding:4rem 0 5rem; }
    .bible-section { padding:4rem 0; border-bottom:1px solid var(--border); }
    .bible-section:last-child { border-bottom:none; }

    .bible-section-eyebrow {
      font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
      color:var(--text-secondary); display:flex; align-items:center; gap:8px; margin-bottom:.6rem;
    }
    .bible-section-eyebrow::before { content:''; display:block; width:14px; height:1px; background:currentColor; opacity:.5; }
    .bible-section-title { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; color:var(--sectiontitlecolor); letter-spacing:-.02em; margin-bottom:1.8rem; }



    .vdj-toast {
      position:fixed; bottom:24px; left:50%;
      transform:translateX(-50%) translateY(70px);
      background:#fff; color:#111;
      font-family:'Lato',sans-serif; font-size:.82rem; font-weight:700;
      padding:10px 24px; border-radius:30px;
      box-shadow:0 8px 32px rgba(0,0,0,0.25);
      transition:transform .4s cubic-bezier(.34,1.56,.64,1);
      z-index:9999; pointer-events:none; white-space:nowrap;
    }
    .vdj-toast.show { transform:translateX(-50%) translateY(0); }

    .vdj-wrap { width:100%; max-width:100%; margin:0 auto; }

    .vdj-compact {
      width:100%; border-radius:18px; overflow:hidden; position:relative;
      display:flex; align-items:stretch; min-height:600px;
      box-shadow:0 12px 40px rgba(0,0,0,0.32);
      cursor:pointer; user-select:none; transition:transform .2s, box-shadow .2s;
    }
    .vdj-compact:hover { transform:translateY(-3px); box-shadow:0 20px 56px rgba(0,0,0,0.42); }
    .vdj-compact:active { transform:translateY(0); }

    .vdj-compact-bg {
      position:absolute; inset:0; z-index:0;
      background-size:cover; background-position:center;
      transition:opacity .5s ease;
      filter:blur(2px);
      transform:scale(1.1);
    }
    .vdj-compact-bg::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(110deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.45) 100%);
    }


    .vdj-compact-content {
      position:relative; z-index:2; width:100%;
      display:flex; flex-direction:column; justify-content:space-between;
      padding:22px 24px 20px;
    }
    .vdj-compact-top {
      display:flex; align-items:center; justify-content:space-between; margin-bottom:16px;
    }
    .vdj-badge {
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,.14); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.2); border-radius:20px;
      padding:5px 12px; font-size:.65rem; font-weight:700;
      letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.92);
      font-family:'Lato',sans-serif;
    }
    .vdj-badge .dot {
      width:6px; height:6px; border-radius:50%; background:#ffd475;
      animation:vdjPulse 2s infinite;
    }
    @keyframes vdjPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.45);opacity:.65} }


    .vdj-compact-toggle {
      display:flex; background:rgba(255,255,255,.11); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.17); border-radius:20px; overflow:hidden;
    }
    .vdj-compact-toggle button {
      background:none; border:none; padding:4px 10px;
      font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      color:rgba(255,255,255,.5); cursor:pointer; transition:all .22s;
      font-family:'Lato',sans-serif;
    }
    .vdj-compact-toggle button.active { background:rgba(255,255,255,.22); color:#fff; border-radius:16px; }

    .vdj-compact-verse {
      font-family:'Playfair Display',Georgia,serif;
      font-size:clamp(1.25rem,3.2vw,1.65rem); font-style:italic; font-weight:700;
      line-height:1.65; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.8);
      margin-bottom:14px;
      opacity:0; transform:translateY(10px);
      animation:vdjRise .8s cubic-bezier(.25,.46,.45,.94) .3s forwards;
    }
    @keyframes vdjRise { to{opacity:1;transform:translateY(0)} }

    .vdj-compact-bottom {
      display:flex; align-items:center; justify-content:space-between; margin-top:4px;
    }
    .vdj-compact-meta { display:flex; flex-direction:column; gap:2px; }
    .vdj-compact-ref {
      font-family:'Lato',sans-serif; font-size:.88rem; font-weight:700;
      letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.9);
    }
    .vdj-compact-date {
      font-size:.72rem; color:rgba(255,255,255,.5); font-family:'Lato',sans-serif;
      text-transform:capitalize;
    }
    .vdj-compact-actions { display:flex; gap:7px; align-items:center; }
    .vdj-btn {
      width:36px; height:36px; border-radius:50%;
      border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12);
      backdrop-filter:blur(10px); color:rgba(255,255,255,.85);
      cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-size:.9rem; transition:all .2s;
    }
    .vdj-btn:hover { background:rgba(255,255,255,.28); transform:scale(1.1); }
    .vdj-btn:active { transform:scale(.93); }
    .vdj-btn.share { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.28); }
    .vdj-btn-story {
      display:flex; align-items:center; gap:6px;
      padding:6px 14px; border-radius:20px;
      border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.18);
      backdrop-filter:blur(10px); color:#fff;
      font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      font-family:'Lato',sans-serif; cursor:pointer; transition:all .2s;
    }
    .vdj-btn-story:hover { background:rgba(255,255,255,.32); }


    .vdj-compact-loading {
      position:absolute; inset:0; z-index:10;
      display:flex; align-items:center; justify-content:center; gap:10px;
      background:rgba(0,0,0,.42); backdrop-filter:blur(4px); border-radius:18px;
    }
    .vdj-loading-icon { font-size:1.6rem; animation:vdjBreathe 1.8s ease-in-out infinite; color:#fff; }
    @keyframes vdjBreathe { 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.12);opacity:1} }
    .vdj-loading-txt { font-family:'Lato',sans-serif; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }


    .vdj-story-overlay {
      position:fixed; inset:0; z-index:10000;
      background:#000;
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity .3s ease;
    }
    .vdj-story-overlay.open { opacity:1; pointer-events:all; }

    .vdj-story-card {
      width:min(400px, 100vw);
      height:100dvh;
      position:relative; overflow:hidden;
      display:flex; flex-direction:column;
    }

   .vdj-story-bg {
      position:absolute; inset:0; z-index:0;
      background-size:cover; background-position:center;
      transition:opacity .5s ease;
      filter:blur(2px);
      transform:scale(1.1);
    }
    .vdj-story-bg::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.65) 68%, rgba(0,0,0,.95) 100%);
    }


    .vdj-particles { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
    .vdj-particle {
      position:absolute; border-radius:50%; background:rgba(255,255,255,.35);
      animation:vdjFloat var(--dur,8s) var(--delay,0s) infinite ease-in-out;
    }
    @keyframes vdjFloat {
      0%{transform:translateY(0) scale(1);opacity:0}
      10%{opacity:1} 90%{opacity:.5}
      100%{transform:translateY(-110vh) scale(.3);opacity:0}
    }


    .vdj-story-ornament {
      position:absolute; inset:0; z-index:1;
      display:flex; align-items:center; justify-content:center;
      pointer-events:none; opacity:.04;
    }
    .vdj-story-ornament svg { width:65%; height:auto; }

    .vdj-progress {
      position:absolute; top:14px; left:14px; right:14px;
      z-index:4; display:flex; gap:4px;
    }
    .vdj-progress-bar { height:2.5px; flex:1; background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; }
    .vdj-progress-fill {
      height:100%; background:rgba(255,255,255,.88); border-radius:2px;
      transform:scaleX(0); transform-origin:left;
    }
    .vdj-progress-fill.done { transform:scaleX(1); }


    .vdj-story-close {
      position:absolute; top:10px; right:16px; z-index:5;
      width:36px; height:36px;
      background-color: transparent;
      color: white;
      border: none;

      display:flex; align-items:center; justify-content:center;
      font-size:1.1rem; cursor:pointer; transition:all .2s;
    }
    .vdj-story-close:hover { background:rgba(0,0,0,.65); }


    .vdj-story-content {
      position:relative; z-index:3; height:100%;
      display:flex; flex-direction:column; padding:26px 26px 36px;
    }
    .vdj-story-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-top:32px; margin-bottom:auto;
    }
    .vdj-story-toggle {
      display:flex; background:rgba(255,255,255,.11); backdrop-filter:blur(10px);
      border:1px solid rgba(255,255,255,.17); border-radius:20px; overflow:hidden;
    }
    .vdj-story-toggle button {
      background:none; border:none; padding:5px 11px;
      font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
      color:rgba(255,255,255,.5); cursor:pointer; transition:all .22s;
      font-family:'Lato',sans-serif;
    }
    .vdj-story-toggle button.active { background:rgba(255,255,255,.2); color:rgba(255,255,255,.96); border-radius:16px; }

    .vdj-story-middle {
      flex:1; display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      text-align:center; gap:16px; padding:12px 0;
    }
    .vdj-guillemet {
      font-family:'Playfair Display',Georgia,serif; font-size:4.5rem;
      line-height:.6; color:rgba(255,255,255,.18);
      opacity:0; transform:scale(.7);
      animation:vdjPop .6s cubic-bezier(.34,1.56,.64,1) .3s forwards;
    }
    @keyframes vdjPop { to{opacity:1;transform:scale(1)} }
    .vdj-story-text {
      font-family:'Playfair Display',Georgia,serif;
      font-size:clamp(1.45rem,5.5vw,2rem); font-style:italic; font-weight:700;
      line-height:1.7; color:#fff; text-shadow:0 3px 28px rgba(0,0,0,.8);
      opacity:0; transform:translateY(18px);
      animation:vdjRise .9s cubic-bezier(.25,.46,.45,.94) .5s forwards;
    }
    .vdj-story-shimmer {
      width:46px; height:1.5px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
      background-size:200% 100%;
      animation:vdjShimmer 2.5s ease-in-out 1s infinite, vdjRise .9s ease .7s both;
    }
    @keyframes vdjShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
    .vdj-story-ref {
      font-family:'Lato',sans-serif; font-size:.95rem; font-weight:700;
      letter-spacing:.19em; text-transform:uppercase; color:rgba(255,255,255,.88);
      opacity:0; animation:vdjRise .7s ease .9s forwards;
    }
    .vdj-story-footer {
      display:flex; align-items:center; justify-content:space-between;
    }
    .vdj-date { font-size:.68rem; font-weight:400; letter-spacing:.07em; color:rgba(255,255,255,.4); text-transform:capitalize; font-family:'Lato',sans-serif; }
    .vdj-actions { display:flex; gap:9px; }

    @media (max-width:480px) { .vdj-wrap { width:100%; } }


    .verse-btn {
      padding:.6rem 1.2rem; border:1px solid var(--border);
      background:var(--section2); color:var(--text-primary);
      border-radius:8px; font-size:.85rem; cursor:pointer; transition:all .2s;
      display:flex; align-items:center; gap:.5rem;
    }
    .verse-btn:hover { background:var(--section1); border-color:var(--primary); transform:translateY(-2px); }


    .reader-container {
      background: var(--section2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 3rem;
    }
    .reader-header {
      padding: 1.5rem;
      background: var(--section1);
      border-bottom: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      align-items: center;
    }
    .reader-select {
      flex: 1;
      min-width: 200px;
      padding: 0.8rem 1rem;
      border: 1px solid var(--border);
      background: var(--section2);
      color: var(--text-primary);
      border-radius: 8px;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    .reader-select:hover {
      border-color: var(--primary);
    }
    .reader-content {
      padding: 2rem;
      max-height: 600px;
      overflow-y: auto;
    }
    .chapter-title {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 2rem;
      text-align: center;
    }
    .verse-item {
      margin-bottom: 1rem;
      line-height: 1.8;
      color: var(--text-primary);
      padding: 0.5rem;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .verse-item:hover {
      background: var(--section1);
    }
    .verse-number {
      display: inline-block;
      font-weight: 700;
      color: var(--text-secondary);
      margin-right: 0.5rem;
      font-size: 0.85rem;
      vertical-align: super;
    }

    .testament-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--border);
    }
    .testament-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.7rem;
    }
    .testament-count {
      font-size: 0.9rem;
      color: var(--text-secondary);
      background: var(--section1);
      padding: 0.4rem 1rem;
      border-radius: 20px;
    }
    .books-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.2rem;
      margin-bottom: 3rem;
    }
    .book-card {
      background: var(--section2);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s;
    }
    .book-card:hover {
      border-color: var(--primary);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }
    .book-icon {
      font-size: 2rem;
      color: var(--text-secondary);
    }
    .book-name {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--text-primary);
    }
    .book-chapters {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }


    .loading {
      text-align: center;
      padding: 3rem;
      color: var(--text-secondary);
    }
    .loading i {
      font-size: 3rem;
      animation: spin 1s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .error {
      background: #fee;
      color: #c33;
      padding: 1rem;
      border-radius: 8px;
      margin: 1rem 0;
    }


    .search-box {
      display: flex;
      gap: 0.8rem;
      margin-bottom: 2rem;
    }
    .search-input {
      flex: 1;
      padding: 1rem 1.5rem;
      border: 1px solid var(--border);
      background: var(--section2);
      color: var(--text-primary);
      border-radius: 10px;
      font-size: 0.95rem;
    }
    .search-btn {
      padding: 1rem 2rem;
      background-color: #272626;
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .search-btn:hover {
      background: #333;
      transform: translateY(-2px);
    }

    @media (max-width: 600px) {
      .search-box {
        flex-direction: column;
        gap: 0.6rem;
      }
      .search-input {
        width: 100%;
        padding: 0.85rem 1rem;
        font-size: 1rem;
        border-radius: 10px;
        box-sizing: border-box;
      }
      .search-btn {
        width: 100%;
        padding: 0.85rem 1rem;
        font-size: 1rem;
        border-radius: 10px;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 0.4rem;
      }
    }
    .search-results {
      display: grid;
      gap: 1rem;
    }
    .result-item {
      background: var(--section2);
      border: 1px solid var(--border);
      padding: 1.2rem;
      border-radius: 10px;
      transition: all 0.2s;
      cursor: pointer;
    }
    .result-item:hover {
      border-color: var(--primary);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .result-ref {
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 0.5rem;
    }
    .result-text {
      color: var(--text-primary);
      line-height: 1.7;
    }



    .book-card-main {
      display:flex; align-items:center; gap:1rem; padding:1.2rem 1.4rem; cursor:pointer; user-select:none;
    }
    .book-info { flex:1; }
    .book-chevron { font-size:1.2rem; color:var(--text-secondary); transition:transform .25s ease; flex-shrink:0; }
    .book-chapters-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(42px,1fr));
      gap:.4rem; padding:.8rem 1rem 1rem; border-top:1px solid var(--border); background:var(--section1);
    }
    .chapter-btn {
      padding:.45rem; border:1px solid var(--border); background:var(--section2); color:var(--text-primary);
      border-radius:6px; font-size:.85rem; font-weight:500; cursor:pointer; transition:all .15s; text-align:center;
    }
    .chapter-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
 
    .chapter-view-header {
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
      padding:1.2rem 0; border-bottom:1px solid var(--border); margin-bottom:2.5rem;
      position:sticky; top:62px; background:var(--section2); z-index:10;
    }
    .back-btn {
      display:flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
      border:1px solid var(--border); background:var(--section2); color:var(--text-primary);
      border-radius:8px; font-size:.9rem; cursor:pointer; transition:all .2s;
    }
    .back-btn:hover { border-color:var(--primary); }
    .chapter-nav { display:flex; align-items:center; gap:1rem; }
    .chapter-nav-title { font-size:1rem; font-weight:700; color:var(--text-primary); }
    .chapter-nav-btn {
      width:36px; height:36px; border:1px solid var(--border); background:var(--section2); color:var(--text-primary);
      border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center;
      font-size:1.2rem; transition:all .2s;
    }
    .chapter-nav-btn:hover:not(:disabled) { border-color:var(--primary); }
    .chapter-nav-btn:disabled { opacity:.3; cursor:not-allowed; }
    .chapter-view-content { max-width:720px; margin:0 auto; }
    .verses-list { display:flex; flex-direction:column; gap:.2rem; }
    .verse-item { display:flex; gap:.8rem; padding:.6rem .8rem; border-radius:6px; line-height:1.9; transition:background .15s; color:var(--text-primary); }
    .verse-item:hover { background:var(--section1); }
    .verse-number { font-size:.72rem; font-weight:700; color:var(--text-secondary); min-width:22px; padding-top:.35rem; flex-shrink:0; }
    .verse-text-content { color:var(--text-primary); font-size:1rem; }

    .hidden { display: none !important; }

    @media (max-width: 768px) {
      .bible-main { padding: 2rem 0 3rem; }
      .verse-card { padding: 1.5rem; }
      .verse-text { font-size: 1.1rem; }
      .books-grid { grid-template-columns: 1fr; }
      .reader-header { flex-direction: column; }
      .resume-card { flex-direction: row; padding: 1.2rem; gap: 1rem; }
      .resume-icon { width: 44px; height: 44px; font-size: 1.2rem; }
    }

    .resume-card {
      display: flex; align-items: center; gap: 1.4rem;
      background: linear-gradient(135deg, var(--section1) 0%, var(--section2) 100%);
      border: 1px solid var(--border); border-radius: 16px;
      padding: 1.6rem 2rem; cursor: pointer; transition: all .25s;
      text-decoration: none; color: inherit;
    }
    .resume-card:hover { border-color: var(--text-primary); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
    .resume-icon {
      width: 52px; height: 52px; border-radius: 12px;
      background: var(--text-primary); color: var(--color1);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; flex-shrink: 0;
    }
    .resume-info { flex: 1; }
    .resume-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: .3rem; }
    .resume-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: .2rem; }
    .resume-sub { font-size: .85rem; color: var(--text-secondary); }
    .resume-arrow { font-size: 1.4rem; color: var(--text-secondary); flex-shrink: 0; }
    #resumeSection { display: none; }


    .annotations-grid {
      display: grid; gap: 1rem;
    }
    .annotation-item {
      display: flex; align-items: flex-start; gap: 1rem;
      background: var(--section2); border: 1px solid var(--border);
      border-radius: 12px; padding: 1.2rem 1.4rem;
  color: var(--sectiontitlecolor);
      cursor: pointer; transition: all .2s;
    }
    .annotation-item:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
    .annotation-badge {
      width: 36px; height: 36px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; flex-shrink: 0;
    }
    .annotation-badge.fav   { background: rgba(249,168,37,.15); color: #f9a825; }
    .annotation-badge.hl    { background: rgba(255,235,59,.35); color: #b8970a; }
    .annotation-badge.ul    { background: rgba(33,150,243,.15); color: #1e88e5; }
    .annotation-content { flex: 1; }
    .annotation-ref { font-size: .75rem; font-weight: 700; color: var(--text-secondary); letter-spacing: .05em; text-transform: uppercase; margin-bottom: .3rem; }
    .annotation-text { font-size: .9rem; color: var(--text-primary); line-height: 1.6;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .annotation-type-tag {
      font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
      padding: .2rem .6rem; border-radius: 10PX; margin-bottom: .4rem; display: inline-block;
    }
    .tag-fav { background: rgba(249,168,37,.18); color: #c8840a; }
    .tag-hl  { background: rgba(255,220,0,.22);  color: #9a7a00; }
    .tag-ul  { background: rgba(33,150,243,.18); color: #1565c0; }
    body.dark-mode .tag-fav { color: #f9c842; background: rgba(249,168,37,.22); }
    body.dark-mode .tag-hl  { color: #ffe066; background: rgba(255,220,0,.18); }
    body.dark-mode .tag-ul  { color: #64b5f6; background: rgba(33,150,243,.22); }

    .annotations-tabs {
      display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
    }
    .ann-tab {
      padding: .45rem 1rem; border: 1px solid var(--border); background: var(--section2);
      color: var(--text-secondary); border-radius: 10px; font-size: .82rem; font-weight: 500;
      cursor: pointer; transition: all .18s; display: flex; align-items: center; gap: .4rem;
    }
    .ann-tab:hover { border-color: var(--primary); color: var(--text-primary); }
    .ann-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
    body.dark-mode .ann-tab.active { background: #fff; border-color: #fff; color: #111; }
    .ann-tab .ann-tab-count {
      background: rgba(255,255,255,.25); border-radius: 10PX;
      padding: 0 .4rem; font-size: .72rem; font-weight: 700;
    }
    .ann-tab:not(.active) .ann-tab-count { background: var(--section1); color: var(--text-secondary); }

    .annotations-empty {
      text-align: center; padding: 3rem 1rem; color: var(--text-secondary); font-size: .9rem; line-height: 1.8;
    }
    .annotations-empty i { font-size: 2.5rem; display: block; margin-bottom: 1rem; opacity: .3; }
    #favAnnotationsSection { display: none; }

    .annotations-preview-footer {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border);
    }
    .annotations-preview-count {
      font-size: .82rem; color: var(--text-secondary);
    }
    .btn-open-panel {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .6rem 1.4rem; border: 1px solid var(--border);
      background: var(--section2); color: var(--text-primary);
      border-radius: 10px; font-size: .85rem; font-weight: 600;
      cursor: pointer; transition: all .2s;
    }
    .btn-open-panel:hover {
      border-color: var(--primary); background: var(--section1);
      transform: translateY(-1px);
    }
    body.dark-mode .btn-open-panel:hover { border-color: #fff; }


    .ann-panel-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 2000;
      opacity: 0; pointer-events: none;
      transition: opacity .35s ease;
    }
    .ann-panel-backdrop.open { opacity: 1; pointer-events: all; }

    .ann-panel {
      position: fixed; left: 0; right: 0; bottom: 0;
      height: 92dvh;
      background: var(--section2);
      border-radius: 20px 20px 0 0;
      z-index: 2001;
      display: flex; flex-direction: column;
      transform: translateY(100%);
      transition: transform .4s cubic-bezier(.32,0,.15,1);
      box-shadow: 0 -8px 40px rgba(0,0,0,.18);
      overflow: hidden;
    }
    .ann-panel.open { transform: translateY(0); }


    .ann-panel-handle {
      width: 40px; height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: 12px auto 0;
      flex-shrink: 0;
      cursor: grab;
    }


    .ann-panel-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.4rem 0;
      flex-shrink: 0;
    }
    .ann-panel-title {
      font-size: 1.15rem; font-weight: 800;
      color: var(--text-primary); letter-spacing: -.02em;
    }
    .ann-panel-close {
      width: 40px; height: 40px; 
 background-color: transparent;
 border: none;
 color: var(--color1);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all .18s;
    }



    .ann-panel-tabs {
      display: flex; gap: .5rem; padding: 1rem 1.4rem .6rem;
      overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
    }
    .ann-panel-tabs::-webkit-scrollbar { display: none; }
    .ann-panel-tab {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .45rem 1rem; border-radius: 12px;
      border: 1px solid var(--border); background: var(--section1);
      color: var(--text-secondary); font-size: .82rem; font-weight: 500;
      cursor: pointer; white-space: nowrap; transition: all .18s; flex-shrink: 0;
    }
    .ann-panel-tab:hover { border-color: var(--primary); color: var(--text-primary); }
    .ann-panel-tab.active {
      background: var(--primary); border-color: var(--primary); color: #fff;
    }
    body.dark-mode .ann-panel-tab.active { background: #fff; border-color: #fff; color: #111; }
    .ann-panel-tab .tab-pill {
      font-size: .72rem; font-weight: 700; padding: 0 .4rem;
      border-radius: 10px; background: rgba(255,255,255,.22);
    }
    .ann-panel-tab:not(.active) .tab-pill { background: var(--section2); color: var(--text-secondary); }


    .ann-panel-body {
      flex: 1; overflow-y: auto; padding: .4rem 1.4rem 2rem;
      overscroll-behavior: contain;
    }
    .ann-panel-body .annotations-grid { gap: .8rem; }
    .ann-panel-body .annotation-item { border-radius: 10px; }
    .ann-panel-empty {
      text-align: center; padding: 4rem 1rem; color: var(--text-secondary); font-size: .9rem; line-height: 1.9;
    }
    .ann-panel-empty i { font-size: 2.5rem; display: block; margin-bottom: 1rem; opacity: .3; }

    @media (min-width: 768px) {
      .ann-panel { max-width: 560px; left: 50%; transform: translateX(-50%) translateY(100%); right: auto; border-radius: 20px 20px 0 0; }
      .ann-panel.open { transform: translateX(-50%) translateY(0); }
    }