:root{--pb-card-radius: 18px;--pb-card-pad: 16px;--pb-card-margin: 12px;--pb-bottom-nav-h: 64px;--pb-app-header-h: 56px;--pb-font-te: 'Noto Sans Telugu', system-ui, sans-serif;--pb-font-en: 'Inter', system-ui, sans-serif;--pb-line-height: 1.75;--pb-verse-size: 18px;--pb-app-bg: #121826;--pb-card-bg: #1c2538;--pb-meta: #8a9bb8;--pb-tab-active: #e8c07d;} .pb-index{background: var(--pb-app-bg);} .pb-index #main{padding: 0 0 calc(var(--pb-bottom-nav-h) + 16px);max-width: 100%;} .desktop-only{display: none !important;} @media (max-width: 768px){header.site-header, footer.site-footer{display: none !important;} #sidebar{top: 0 !important;} .chapter-progress{top: 0 !important;} .pb-read #main{display: flex;flex-direction: column;padding-bottom: calc(var(--pb-bottom-nav-h) + 16px);} .pb-read .page-head{order: 1;padding: 8px 20px 0;} .pb-read .song-detail{order: 2;padding: 0 20px 16px;} .pb-read .chapters{order: 3;padding: 0 20px 12px;} .pb-read .chapter-nav-row{order: 4;padding: 0 20px 16px;} .pb-read .xref-placeholder{order: 5;display: none;} .pb-read .page-actions{order: 6;display: none;} .pb-read .page-head .breadcrumb, .pb-read .page-head h1, .pb-read .page-head .rule-double{display: none;} .pb-read .page-head .cat-en-line{margin: 0 0 8px;font-size: .875rem;font-weight: 600;color: var(--gold);} .pb-read .chapters .chap-grid, .pb-read .chapter-nav-row{display: none !important;} .pb-read .chapters.is-expanded .chap-grid{display: flex !important;flex-wrap: wrap;gap: 8px;} .pb-read .chapters.is-expanded ~ .chapter-nav-row{display: flex !important;} .pb-read .chapters .section-label{cursor: pointer;user-select: none;margin-bottom: 0;} .pb-read .chapters:not(.is-expanded) .section-label::before{content: '▸ ';} .pb-read .chapters.is-expanded .section-label::before{content: '▾ ';}} .app-shell{max-width: 100%;margin: 0 auto;min-height: 100vh;min-height: 100svh;background: var(--pb-app-bg);} .app-header{position: sticky;top: 0;z-index: 50;display: flex;align-items: center;gap: 8px;height: var(--pb-app-header-h);padding: 0 12px 0 8px;background: var(--uecf-ink);border-bottom: 1px solid rgba(255,255,255,.08);} .app-back{display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;color: #fff;flex-shrink: 0;} .app-title{flex: 1;margin: 0;font-family: var(--pb-font-te);font-size: 1.125rem;font-weight: 600;color: #fff;line-height: 1.2;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .app-icon-btn{display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background: none;border: none;color: #9FB8D4;cursor: pointer;flex-shrink: 0;padding: 0;} .app-search{display: flex;align-items: center;gap: 10px;margin: 12px 16px;padding: 0 14px;min-height: 48px;background: var(--pb-card-bg);border: 1px solid rgba(255,255,255,.12);border-radius: 12px;} .app-search svg{flex-shrink: 0;color: var(--pb-meta);} .app-search #searchInput{flex: 1;background: none;border: none;outline: none;color: #fff;font-family: var(--pb-font-te);font-size: .9375rem;min-width: 0;} .app-search #searchInput::placeholder{color: var(--pb-meta);font-family: var(--pb-font-en);} .app-search .search-clear{display: none;background: none;border: none;color: var(--pb-meta);font-size: 1.25rem;line-height: 1;cursor: pointer;padding: 4px;width: 32px;height: 32px;align-items: center;justify-content: center;} .app-search .search-clear.show{display: flex;} .testament-tabs{display: flex;gap: 8px;padding: 0 16px 12px;overflow-x: auto;-webkit-overflow-scrolling: touch;scroll-snap-type: x mandatory;} .tab-btn{flex: 1 0 auto;scroll-snap-align: start;min-height: 40px;padding: 8px 14px;border: 1px solid rgba(255,255,255,.15);border-radius: 10px;background: transparent;color: #fff;font-family: var(--pb-font-te);font-size: .8125rem;font-weight: 600;cursor: pointer;white-space: nowrap;transition: background .15s ease, color .15s ease, border-color .15s ease;} .tab-btn.is-active{background: var(--pb-tab-active);border-color: var(--pb-tab-active);color: var(--uecf-ink);} .continue-chip{display: flex;flex-direction: column;gap: 2px;margin: 0 16px 12px;padding: 12px 14px;background: var(--pb-card-bg);border: 1px solid rgba(232,192,125,.35);border-radius: 12px;text-decoration: none;color: inherit;} .continue-chip-label{font-family: var(--pb-font-en);font-size: .625rem;letter-spacing: .12em;text-transform: uppercase;color: var(--pb-tab-active);font-weight: 700;} .continue-chip-title{font-family: var(--pb-font-te);font-size: .9375rem;color: #fff;font-weight: 600;} .list-section-label{margin: 0 16px 8px;font-family: var(--pb-font-en);font-size: .6875rem;letter-spacing: .14em;text-transform: uppercase;color: var(--pb-meta);font-weight: 700;} .pb-index .search-status{margin: 0 16px 10px;font-family: var(--pb-font-en);font-size: .75rem;color: var(--pb-meta);} .pb-index .no-results{display: none;margin: 16px;padding: 20px;text-align: center;border: 1px dashed rgba(255,255,255,.15);border-radius: 12px;color: var(--pb-meta);font-family: var(--pb-font-en);font-size: .875rem;} .pb-index .no-results.show{display: block;} .book-list{display: flex;flex-direction: column;gap: 10px;padding: 0 16px;} .book-row-item{display: flex;align-items: stretch;gap: 0;background: var(--pb-card-bg);border: 1px solid rgba(255,255,255,.08);border-radius: 14px;overflow: hidden;min-height: 72px;} .book-row-item[hidden]{display: none;} .book-row{flex: 1;display: flex;align-items: center;gap: 14px;padding: 14px 12px 14px 14px;text-decoration: none;color: inherit;min-width: 0;} .book-row-badge{flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;background: rgba(201,164,92,.22);border: 1px solid rgba(201,164,92,.45);border-radius: 10px;font-family: var(--pb-font-en);font-size: .8125rem;font-weight: 700;color: var(--pb-tab-active);} .book-row-content{flex: 1;min-width: 0;} .book-row-te{display: block;font-family: var(--pb-font-te);font-size: 1rem;font-weight: 600;color: #fff;line-height: 1.35;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .book-row-meta{display: block;margin-top: 3px;font-family: var(--pb-font-en);font-size: .75rem;color: var(--pb-meta);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .book-row-star{flex-shrink: 0;align-self: center;display: flex;align-items: center;justify-content: center;width: 48px;height: 48px;margin-right: 4px;background: none;border: none;cursor: pointer;color: var(--pb-meta);padding: 0;transition: color .15s ease, transform .12s ease;} .book-row-star .star-filled{display: none;} .book-row-star.is-favorite{color: var(--pb-tab-active);} .book-row-star.is-favorite .star-outline{display: none;} .book-row-star.is-favorite .star-filled{display: block;} .app-menu{position: fixed;inset: 0;z-index: 120;background: rgba(0,0,0,.5);display: flex;align-items: flex-end;} .app-menu[hidden]{display: none;} .app-menu-sheet{width: 100%;background: var(--paper-2);border-radius: 16px 16px 0 0;padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0));border-top: 3px solid var(--gold-line);} .app-menu-item{display: flex;align-items: center;justify-content: space-between;width: 100%;padding: 14px 4px;border: none;background: none;font: inherit;font-family: var(--pb-font-en);font-size: 1rem;color: var(--ink);text-decoration: none;cursor: pointer;border-bottom: 1px solid var(--rule);text-align: left;} .app-menu-close{width: 100%;margin-top: 12px;min-height: 48px;border: 1px solid var(--rule);border-radius: 10px;background: var(--paper-3);font: inherit;font-family: var(--pb-font-en);font-weight: 600;color: var(--ink);cursor: pointer;} .app-menu-icons .icon-moon{display: none;} html[data-theme="light"] .app-menu-icons .icon-sun{display: none;} html[data-theme="light"] .app-menu-icons .icon-moon{display: block;} @media (min-width: 769px){.desktop-only{display: block !important;} .app-shell{max-width: 480px;box-shadow: 0 0 40px rgba(0,0,0,.35);} .pb-index .bottom-nav{max-width: 480px;left: 50%;transform: translateX(-50%);border-radius: 16px 16px 0 0;}} html[data-line-spacing="relaxed"]{--pb-line-height: 2;} html[data-line-spacing="compact"]{--pb-line-height: 1.55;} .quick-strip{margin-bottom: 28px;} .quick-card{display: block;background: var(--paper-2);border: 1px solid var(--rule);border-radius: var(--pb-card-radius);padding: 18px 20px;margin-bottom: 12px;box-shadow: 0 8px 24px var(--shadow);text-decoration: none;color: inherit;transition: transform .15s ease, border-color .15s ease;} @media (hover:hover) and (pointer:fine){.quick-card:hover{transform: translateY(-2px);border-color: var(--gold-line);text-decoration: none;}} .quick-card-label{font-family: var(--pb-font-en);font-size: .6875rem;letter-spacing: .14em;text-transform: uppercase;color: var(--gold);font-weight: 700;margin: 0 0 6px;} .quick-card-title{font-family: var(--pb-font-te);font-size: 1.125rem;color: var(--ink-strong);margin: 0 0 4px;line-height: 1.35;} .quick-card-sub{font-family: var(--pb-font-en);font-size: .8125rem;color: var(--ink-faint);margin: 0;} .fav-grid{display: flex;gap: 10px;overflow-x: auto;padding-bottom: 8px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;} .fav-chip{flex: 0 0 auto;scroll-snap-align: start;min-width: 140px;background: var(--paper-2);border: 1px solid var(--rule);border-radius: 14px;padding: 12px 14px;text-decoration: none;color: inherit;} .fav-chip-te{font-family: var(--pb-font-te);font-size: .9375rem;font-weight: 600;display: block;margin-bottom: 2px;} .fav-chip-en{font-family: var(--pb-font-en);font-size: .75rem;color: var(--ink-faint);} .chapter-progress{position: fixed;top: var(--uecf-header-h);left: 0;right: 0;height: 3px;background: var(--rule);z-index: 45;pointer-events: none;} .chapter-progress span{display: block;height: 100%;width: 0;background: var(--gold-line);transition: width .12s linear;} .parallel-verses{display: flex;flex-direction: column;gap: var(--pb-card-margin);padding-bottom: calc(var(--pb-bottom-nav-h) + 24px);} .pv-card{background: var(--paper-2);border: 1px solid var(--rule);border-radius: var(--pb-card-radius);padding: var(--pb-card-pad);box-shadow: 0 4px 16px var(--shadow);scroll-margin-top: calc(var(--uecf-header-h) + var(--uecf-subbar-h, 76px) + 16px);transition: border-color .2s ease, box-shadow .2s ease;cursor: pointer;} .pv-card.is-selected{border-color: var(--gold-line);box-shadow: 0 0 0 2px var(--gold-soft);} .pv-card.is-highlight{animation: pv-flash 2s ease;} @keyframes pv-flash{0%,100%{background: var(--paper-2);} 15%{background: color-mix(in srgb, var(--gold-line) 18%, var(--paper-2));}} .pv-num{font-family: var(--pb-font-en);font-size: .875rem;font-weight: 700;color: var(--gold);margin-bottom: 8px;line-height: 1;} .pv-divider{height: 1px;background: linear-gradient(90deg, var(--gold-line), transparent);margin-bottom: 12px;opacity: .6;} .pv-lang-label{font-family: var(--pb-font-en);font-size: .625rem;letter-spacing: .12em;text-transform: uppercase;color: var(--ink-faint);font-weight: 700;display: block;margin-bottom: 6px;} .pv-text-te{font-family: var(--pb-font-te);font-size: var(--pb-verse-size);line-height: var(--pb-line-height);color: var(--ink-strong);margin: 0 0 14px;} .pv-text-en{font-family: var(--pb-font-en);font-size: calc(var(--pb-verse-size) * .94);line-height: var(--pb-line-height);color: var(--ink-soft);margin: 0;} .pv-text-en .person{font-variant: small-caps;} .pv-sep{height: 1px;background: var(--rule);margin: 0 0 12px;} .verse-sheet{position: fixed;bottom: var(--pb-bottom-nav-h);left: 50%;transform: translateX(-50%);display: flex;gap: 8px;flex-wrap: wrap;justify-content: center;background: var(--paper-2);border: 1px solid var(--rule);border-radius: 999px;padding: 10px 16px;box-shadow: 0 8px 32px var(--shadow);z-index: 80;max-width: calc(100% - 24px);} .verse-sheet[hidden]{display: none;} .verse-sheet button{font: inherit;font-family: var(--pb-font-en);font-size: .8125rem;font-weight: 600;background: var(--paper-3);border: 1px solid var(--rule);border-radius: 999px;padding: 10px 16px;min-height: 44px;min-width: 44px;cursor: pointer;color: var(--ink);} .bottom-nav{position: fixed;bottom: 0;left: 0;right: 0;height: var(--pb-bottom-nav-h);background: var(--uecf-ink);border-top: 1px solid rgba(228,198,133,.25);display: flex;align-items: stretch;justify-content: space-around;z-index: 90;padding-bottom: env(safe-area-inset-bottom, 0);box-shadow: 0 -4px 20px rgba(0,0,0,.25);} .bottom-nav-item{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 3px;background: none;border: none;color: #9FB8D4;font-family: var(--pb-font-en);font-size: .625rem;font-weight: 600;letter-spacing: .04em;text-decoration: none;cursor: pointer;min-height: 48px;min-width: 48px;padding: 6px 4px;transition: color .15s ease;} .bottom-nav-item.is-active, .bottom-nav-item[aria-current="page"]{color: var(--uecf-gold-soft);} .bottom-nav-item svg{width: 22px;height: 22px;} .bottom-nav-item span{line-height: 1;} body.has-bottom-nav #main{padding-bottom: calc(var(--pb-bottom-nav-h) + 20px);} .settings-panel{position: fixed;inset: 0;z-index: 200;display: flex;align-items: flex-end;background: rgba(0,0,0,.45);} .settings-panel[hidden]{display: none;} .settings-sheet{width: 100%;max-height: 70vh;overflow-y: auto;background: var(--paper-2);border-radius: 20px 20px 0 0;padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0));border-top: 3px solid var(--gold-line);} .settings-sheet h2{font-family: var(--pb-font-en);font-size: 1rem;margin: 0 0 16px;color: var(--ink-strong);} .settings-row{display: flex;align-items: center;justify-content: space-between;padding: 12px 0;border-bottom: 1px solid var(--rule);font-family: var(--pb-font-en);font-size: .9375rem;} .settings-row button{font: inherit;background: var(--paper-3);border: 1px solid var(--rule);border-radius: 8px;padding: 8px 14px;min-height: 44px;cursor: pointer;color: var(--ink);} .xref-placeholder{margin: 24px 0;padding: 16px;border: 1px dashed var(--rule);border-radius: var(--pb-card-radius);text-align: center;font-family: var(--pb-font-en);font-size: .8125rem;color: var(--ink-faint);font-style: italic;} .search-overlay{position: fixed;inset: 0;z-index: 150;background: var(--paper);display: flex;flex-direction: column;} .search-overlay[hidden]{display: none;} .search-overlay-head{display: flex;gap: 10px;align-items: center;padding: 12px 16px;border-bottom: 1px solid var(--rule);background: var(--paper-2);position: sticky;top: 0;} .search-overlay-head input{flex: 1;font: inherit;font-family: var(--pb-font-en);font-size: 1rem;background: var(--paper-3);border: 1px solid var(--rule);border-radius: 10px;padding: 12px 14px;color: var(--ink);min-height: 48px;} .search-overlay-results{flex: 1;overflow-y: auto;} .search-hit{display: block;width: 100%;text-align: left;background: none;border: none;border-bottom: 1px solid var(--rule);padding: 14px 16px;cursor: pointer;font-family: var(--pb-font-en);color: var(--ink);} .search-hit strong{color: var(--gold);display: block;margin-bottom: 4px;} .search-hit-te{font-family: var(--pb-font-te);font-size: .875rem;color: var(--ink-soft);} .book-card{border-radius: var(--pb-card-radius);padding: 18px 20px;} .page-head h1{font-family: var(--pb-font-te);font-size: clamp(1.875rem, 4.4vw, 2.75rem);color: var(--gold);margin: 0 0 8px;line-height: 1.25;} .cat-en-line{font-family: var(--pb-font-en);font-size: .8125rem;color: var(--ink-faint);margin-bottom: 22px;} .chapters{max-width: 1080px;margin: 0 auto;padding: 0 40px 34px;scroll-margin-top: calc(var(--uecf-header-h) + var(--uecf-subbar-h, 76px) + 12px);} .chap-grid{display: flex;flex-wrap: wrap;gap: 8px;} .chap-chip{min-width: 44px;min-height: 44px;padding: 10px 12px;border-radius: 10px;background: var(--paper-2);border: 1px solid var(--rule);font-family: var(--pb-font-en);font-size: .8125rem;font-weight: 600;color: var(--ink);text-align: center;cursor: pointer;transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;} @media (hover: hover) and (pointer: fine){.chap-chip:hover{transform: translateY(-2px);box-shadow: 0 10px 22px var(--shadow);border-color: var(--gold-line);color: var(--gold);}} .chap-chip.is-current{background: var(--gold-line);border-color: var(--gold-line);color: var(--uecf-ink);cursor: default;} .chapter-nav-row{max-width: 1080px;margin: 0 auto;padding: 0 40px 30px;display: flex;justify-content: space-between;align-items: center;gap: 16px;font-family: var(--pb-font-en);font-size: .8125rem;} .nv{display: flex;align-items: center;gap: 8px;color: var(--gold);font-weight: 600;padding: 12px 16px;border: 1px solid var(--rule);border-radius: 10px;background: var(--paper-2);min-height: 48px;cursor: pointer;font: inherit;transition: border-color .15s ease, transform .15s ease;} .nv:hover{border-color: var(--gold-line);transform: translateY(-1px);} .nv.is-disabled{visibility: hidden;pointer-events: none;} .song-detail{max-width: 1080px;margin: 0 auto;padding: 0 40px 40px;} .sd-card{background: transparent;border: none;border-radius: 0;padding: 0;box-shadow: none;} .search-results{position: absolute;left: 0;right: 0;top: 100%;background: var(--paper);color: var(--ink);border-radius: 0 0 8px 8px;box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);max-height: 60vh;overflow-y: auto;display: none;z-index: 60;border: 1px solid var(--rule);border-top: none;} .search-results.open{display: block;} .sr-item{display: flex;align-items: baseline;gap: 10px;padding: 12px 14px;border-bottom: 1px solid var(--rule);cursor: pointer;font-size: .875rem;width: 100%;text-align: left;background: none;border-left: none;border-right: none;border-top: none;color: inherit;font-family: inherit;min-height: 44px;} .sr-item:last-child{border-bottom: none;} .sr-item:hover, .sr-item:focus-visible{background: var(--paper-2);} .sr-num{font-family: var(--pb-font-en);font-weight: 700;font-size: .71875rem;color: var(--gold);flex-shrink: 0;min-width: 26px;} .sr-title{flex: 1;font-family: var(--pb-font-te);text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .sr-empty{padding: 16px 14px;font-family: var(--pb-font-en);font-size: .8125rem;color: var(--ink-faint);} .loading-verses{text-align: center;padding: 48px 20px;color: var(--ink-faint);font-family: var(--pb-font-en);font-style: italic;} @media (max-width: 880px){.chapters, .chapter-nav-row, .song-detail{padding-left: 20px;padding-right: 20px;}} @media (min-width: 768px){.parallel-verses{display: grid;grid-template-columns: 1fr 1fr;gap: var(--pb-card-margin);align-items: start;} .pv-card{margin: 0;} .bottom-nav{max-width: 480px;left: 50%;transform: translateX(-50%);border-radius: 16px 16px 0 0;}} @media (max-width: 767px){.parallel-verses{display: flex;flex-direction: column;}} @media (prefers-reduced-motion: reduce){.pv-card.is-highlight{animation: none;background: var(--paper-3);}} @media print{.bottom-nav, .verse-sheet, .chapter-progress, .settings-panel, .search-overlay{display: none !important;} .pv-card{break-inside: avoid;box-shadow: none;}}