:root {
  --paper: #f7f3ec;
  --paper-deep: #eee7dc;
  --card: #fffdf8;
  --ink: #1e2a23;
  --muted: #7a8179;
  --muted-dark: #566159;
  --line: #e9e3d8;
  --line-strong: #ddd5c7;
  --accent: #d9674b;
  --accent-deep: #bb5038;
  --sage: #8eaa92;
  --sage-deep: #456453;
  --gold: #d9ab54;
  --shadow: 0 18px 50px rgba(40, 45, 35, .08);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 12px;
  --arabic-size: 2.35rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app-shell { min-height: 100vh; }
.site-header { height: 78px; padding: 0 clamp(20px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(221, 213, 199, .7); background: rgba(247, 243, 236, .9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand-lockup, .footer-brand { display: flex; align-items: center; gap: 10px; letter-spacing: -.02em; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fffaf3; background: var(--ink); font-family: "Noto Naskh Arabic", serif; font-size: 1.55rem; line-height: 1; padding-bottom: 4px; box-shadow: 0 4px 12px rgba(30, 42, 35, .14); }
.brand-mark.small { width: 28px; height: 28px; border-radius: 9px; font-size: 1.2rem; }
.brand-name, .footer-brand { font-size: 1.06rem; font-weight: 500; }
.brand-name strong, .footer-brand strong { font-weight: 700; color: var(--accent-deep); }
.top-nav { display: flex; gap: 36px; margin-left: 120px; }
.nav-link { color: var(--muted-dark); font-size: .84rem; font-weight: 600; padding: 29px 2px 25px; border-bottom: 2px solid transparent; }
.nav-link.active, .nav-link:hover { color: var(--ink); border-color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .language-switcher, .header-cta, .secondary-button, .view-button { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); transition: .2s ease; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; }
.icon-button:hover, .secondary-button:hover, .view-button:hover { background: var(--paper-deep); border-color: #cfc5b4; transform: translateY(-1px); }
.icon-button.subtle { border-color: transparent; background: transparent; color: var(--muted-dark); font-size: 1.25rem; }
.language-switcher { display: flex; gap: 6px; align-items: center; border: 0; background: transparent; color: var(--muted-dark); font-size: .74rem; font-weight: 700; padding: 10px; }
.globe { font-size: 1.05rem; color: var(--sage-deep); }
.chevron { font-size: 1rem; margin-left: 3px; }
.header-cta { padding: 10px 18px; border-radius: 999px; font-size: .76rem; font-weight: 700; }
.header-cta:hover { background: var(--ink); color: white; border-color: var(--ink); }
.mobile-menu-toggle, .mobile-nav { display: none; }

.surah-hero { padding: 42px clamp(20px, 7vw, 112px) 0; background: linear-gradient(180deg, #fbf8f2 0%, var(--paper) 100%); overflow: hidden; }
.hero-breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; letter-spacing: .02em; margin-bottom: 38px; }
.hero-breadcrumb a { color: var(--accent-deep); font-weight: 700; }
.hero-grid { max-width: 1330px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: center; gap: 48px; }
.chapter-chip { display: flex; align-items: center; gap: 9px; color: var(--accent-deep); letter-spacing: .13em; font-size: .66rem; font-weight: 800; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.chip-divider { width: 1px; height: 13px; background: #d9cbbc; }
.hero-copy h1 { margin: 14px 0 4px; color: var(--ink); font: 600 clamp(3rem, 6vw, 5.45rem)/.98 "Fraunces", Georgia, serif; letter-spacing: -.065em; }
.arabic-title { margin: 0; color: var(--sage-deep); font: 500 1.9rem/1.2 "Noto Naskh Arabic", serif; }
.hero-description { max-width: 600px; margin: 22px 0 21px; color: var(--muted-dark); font-size: .92rem; line-height: 1.7; }
.hero-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .73rem; }
.hero-meta strong { color: var(--ink); font-size: .85rem; }
.meta-separator { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.hero-orbit { height: 300px; position: relative; display: grid; place-items: center; }
.orbit-ring { position: absolute; width: 240px; height: 240px; border: 1px solid rgba(142, 170, 146, .55); border-radius: 50%; transform: rotate(-28deg) skewX(-11deg); }
.ring-two { width: 180px; height: 280px; border-color: rgba(217, 171, 84, .42); transform: rotate(46deg) skewY(-8deg); }
.ring-three { width: 290px; height: 140px; border-color: rgba(217, 103, 75, .35); transform: rotate(22deg) skewX(16deg); }
.orbit-core { width: 112px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; color: var(--card); background: var(--ink); box-shadow: 0 14px 30px rgba(30, 42, 35, .2); }
.orbit-core span { font: 600 2.35rem/1 "Fraunces", Georgia, serif; }
.orbit-core small { margin-top: 5px; color: #b3c7b6; font: 1.15rem/1 "Noto Naskh Arabic", serif; }
.orbit-star { position: absolute; color: var(--gold); font-size: 1.15rem; }
.star-a { top: 28px; right: 23px; }.star-b { left: 35px; bottom: 24px; color: var(--accent); }.star-c { top: 68px; left: 28px; color: var(--sage-deep); font-size: 2rem; }
.hero-toolbar { max-width: 1330px; margin: 40px auto 0; min-height: 90px; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line-strong); }
.toolbar-group { display: flex; align-items: center; gap: 9px; }
.primary-button, .secondary-button { border: 0; border-radius: 999px; padding: 13px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: .76rem; font-weight: 700; transition: .2s ease; }
.primary-button { color: #fffaf6; background: var(--accent); box-shadow: 0 8px 16px rgba(217, 103, 75, .2); }
.primary-button:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 18px rgba(217, 103, 75, .28); }
.secondary-button { border: 1px solid var(--line-strong); color: var(--ink); background: rgba(255, 253, 248, .75); }
.play-icon { font-size: .62rem; }.info-icon { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .65rem; font-family: Georgia, serif; }
.view-controls { gap: 4px; }.toolbar-label { margin-right: 8px; color: var(--muted); font-size: .69rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.view-button { border-radius: 8px; border-color: transparent; padding: 8px 10px; color: var(--muted); background: transparent; font-size: .69rem; font-weight: 600; }
.view-button.active { color: var(--ink); background: var(--card); border-color: var(--line); box-shadow: 0 2px 8px rgba(40, 45, 35, .06); }

.search-panel { max-width: 1330px; margin: 0 auto; padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow); }
.search-panel label { display: block; margin-bottom: 9px; color: var(--muted-dark); font-size: .73rem; font-weight: 700; }.search-field { display: flex; align-items: center; gap: 9px; padding: 0 12px; height: 42px; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--muted); }.search-field input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .82rem; }.search-field button { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; }.search-panel p { margin: 9px 0 0; color: var(--muted); font-size: .68rem; }

.reading-layout { max-width: 1330px; margin: 0 auto; padding: 50px clamp(20px, 4vw, 48px) 145px; display: grid; grid-template-columns: 205px minmax(0, 700px) 240px; gap: 42px; align-items: start; }
.left-rail, .right-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 104px; }
.rail-card, .insight-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255, 253, 248, .78); }
.rail-card { padding: 16px; }.rail-card-heading { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .11em; }.mini-icon { border: 0; background: transparent; color: var(--accent); font-size: 1.2rem; padding: 0; }.index-title { display: flex; align-items: center; gap: 10px; margin-top: 20px; }.index-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #fff; font: 500 1rem "Fraunces", Georgia, serif; }.index-title strong, .index-title small { display: block; }.index-title strong { font-size: .77rem; }.index-title small { margin-top: 3px; color: var(--muted); font-size: .65rem; }.progress-line { height: 4px; margin-top: 20px; border-radius: 99px; background: #e9e2d7; overflow: hidden; }.progress-line span { display: block; width: 2%; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s ease; }.progress-copy { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: .61rem; }.keyboard-hint { padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; color: #a19d94; font-size: .55rem; letter-spacing: 0; }.jump-select-wrap { position: relative; margin-top: 13px; }.jump-select-wrap select { width: 100%; appearance: none; padding: 10px 30px 10px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); outline: none; background: var(--paper); font-size: .72rem; font-weight: 600; }.jump-select-wrap > span { position: absolute; right: 10px; top: 8px; pointer-events: none; color: var(--muted); }.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 17px; }.chapter-nav button { min-width: 0; padding: 9px 4px; border: 0; border-radius: 8px; color: var(--muted-dark); background: transparent; text-align: left; }.chapter-nav button:last-child { text-align: right; }.chapter-nav button:hover { background: var(--paper-deep); }.chapter-nav small, .chapter-nav strong { display: block; }.chapter-nav small { margin-bottom: 3px; color: var(--muted); font-size: .59rem; }.chapter-nav strong { color: var(--ink); font-size: .65rem; }.chapter-nav span { color: var(--accent); font-weight: 700; }.rail-quote { padding: 14px 16px; border-left: 2px solid var(--gold); }.quote-mark { color: var(--gold); font: 2rem/0.6 Georgia, serif; }.rail-quote p { margin: 9px 0; color: var(--muted-dark); font: 500 .82rem/1.45 "Fraunces", Georgia, serif; }.quote-source { color: var(--muted); font-size: .62rem; }

.reading-column { min-width: 0; }.reading-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 28px; padding-bottom: 17px; border-bottom: 1px solid var(--line-strong); }.eyebrow { color: var(--accent-deep); font-size: .61rem; font-weight: 800; letter-spacing: .14em; }.reading-heading h2 { max-width: 500px; margin: 9px 0 0; font: 500 1.18rem/1.35 "Fraunces", Georgia, serif; letter-spacing: -.02em; }.reading-heading-actions { display: flex; gap: 5px; }.reading-heading-actions .icon-button { width: 32px; height: 32px; border-radius: 8px; color: var(--muted); font-size: .68rem; }.verses { display: flex; flex-direction: column; gap: 3px; }.verse { position: relative; padding: 21px 0 25px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; transition: background .25s ease, box-shadow .25s ease; }.verse::before { content: ""; width: 3px; height: 0; position: absolute; top: 21px; left: -18px; border-radius: 3px; background: var(--accent); transition: height .25s ease; }.verse.active { padding-left: 14px; margin-left: -14px; }.verse.active::before { height: calc(100% - 46px); }.verse-topline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }.verse-number { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--paper-deep); color: var(--muted-dark); font-size: .68rem; font-weight: 700; }.verse.active .verse-number { color: #fff; background: var(--accent); }.verse-actions { display: flex; gap: 2px; opacity: 0; transform: translateX(4px); transition: .2s ease; }.verse:hover .verse-actions, .verse.active .verse-actions { opacity: 1; transform: none; }.verse-action { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: .84rem; }.verse-action:hover { color: var(--accent-deep); background: var(--paper-deep); }.verse-arabic { margin: 0; color: var(--ink); font: 500 var(--arabic-size)/1.95 "Noto Naskh Arabic", serif; text-align: right; }.verse-translation { max-width: 625px; margin: 13px 0 0; color: var(--muted-dark); font: 500 1rem/1.7 "Fraunces", Georgia, serif; letter-spacing: -.01em; }.verse[data-mode="arabic"] .verse-translation, .verse.hidden-translation .verse-translation { display: none; }.verse[data-mode="translation"] .verse-arabic { display: none; }.verse[data-mode="translation"] { padding-top: 16px; }.end-note { display: flex; align-items: center; justify-content: center; gap: 13px; margin: 39px 0 0; color: var(--muted); font-size: .68rem; }.end-note p { margin: 0; }.end-symbol { color: var(--gold); font-size: 1rem; }.loading-state { min-height: 240px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .8rem; }.loading-spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }

.right-rail { gap: 13px; }.insight-card { padding: 17px; box-shadow: 0 9px 25px rgba(40, 45, 35, .03); }.accent-card { background: var(--sage-deep); border-color: var(--sage-deep); color: #f6f4ed; }.insight-card-header { display: flex; justify-content: space-between; align-items: center; }.accent-card .eyebrow { color: #b7d0bb; }.insight-icon { color: var(--gold); font-size: 1.2rem; }.insight-card h3 { margin: 17px 0 8px; font: 500 1.18rem/1.15 "Fraunces", Georgia, serif; letter-spacing: -.02em; }.insight-card p { margin: 0; color: var(--muted-dark); font-size: .72rem; line-height: 1.65; }.accent-card p { color: #d3e0d1; }.text-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 20px; padding: 0; border: 0; color: var(--accent); background: transparent; text-align: left; font-size: .67rem; font-weight: 800; }.accent-card .text-button { color: #f5c684; }.text-button span { font-size: .9rem; }.compact-card h3 { margin-top: 12px; font-size: .98rem; }.audio-row { width: 100%; display: flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; text-align: left; }.side-play-icon { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; color: #fff; background: var(--accent); font-size: .55rem; }.audio-row strong, .audio-row small { display: block; }.audio-row strong { color: var(--ink); font-size: .67rem; }.audio-row small { margin-top: 2px; color: var(--muted); font-size: .57rem; }.audio-wave { display: flex; align-items: center; gap: 2px; margin-left: auto; height: 20px; }.audio-wave i { width: 2px; height: 8px; border-radius: 2px; background: var(--sage); }.audio-wave i:nth-child(2) { height: 14px; }.audio-wave i:nth-child(3) { height: 10px; }.audio-wave i:nth-child(4) { height: 17px; }.audio-row.playing .audio-wave i { animation: wave .8s ease-in-out infinite alternate; }.audio-row.playing .audio-wave i:nth-child(2) { animation-delay: -.2s; }.audio-row.playing .audio-wave i:nth-child(3) { animation-delay: -.4s; }.audio-row.playing .audio-wave i:nth-child(4) { animation-delay: -.1s; }@keyframes wave { from { transform: scaleY(.55); } to { transform: scaleY(1.2); } }.data-card dl { margin: 14px 0 0; }.data-card dl div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }.data-card dt { color: var(--muted); font-size: .61rem; }.data-card dd { margin: 0; color: var(--ink); font-size: .64rem; font-weight: 700; }

.player { width: min(1160px, calc(100% - 40px)); min-height: 74px; position: fixed; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; grid-template-columns: 1.15fr 1.5fr 1fr; align-items: center; gap: 24px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; color: #eef5ed; background: rgba(30, 42, 35, .96); box-shadow: 0 18px 45px rgba(30, 42, 35, .28); backdrop-filter: blur(20px); transition: opacity .25s ease, transform .25s ease; }.player.closed { opacity: 0; pointer-events: none; transform: translate(-50%, 22px); }.player-current { display: flex; align-items: center; gap: 10px; min-width: 0; }.player-sura-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: none; border: 1px solid rgba(245, 198, 132, .45); border-radius: 10px; color: #f5c684; font: 500 .82rem "Fraunces", Georgia, serif; }.player-current span, .player-current strong { display: block; }.player-current span { margin-bottom: 4px; color: #a5baaa; font-size: .57rem; font-weight: 800; letter-spacing: .1em; }.player-current strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 600; }.player-center { display: grid; grid-template-columns: 25px 35px 25px 1fr auto; align-items: center; gap: 8px; }.player-main { width: 35px; height: 35px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--ink); background: #f5eee2; font-size: .65rem; }.player-skip, .player-action { border: 0; background: transparent; color: #a6baaa; font-size: 1rem; }.player-skip:hover, .player-action:hover { color: #fff; }.player-progress { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .18); }.player-progress span { display: block; width: 0; height: 100%; background: #f5c684; transition: width .3s linear; }.player-time { color: #a6baaa; font-size: .59rem; white-space: nowrap; }.player-actions { display: flex; justify-content: flex-end; gap: 12px; }.player-action { font-size: .9rem; }.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px clamp(20px, 7vw, 112px) 100px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; }.site-footer p { margin: 0; }.footer-links { display: flex; gap: 18px; }.footer-links a:hover { color: var(--accent-deep); }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(27, 35, 28, .46); backdrop-filter: blur(5px); }.modal-backdrop[hidden], .search-panel[hidden], .mobile-nav[hidden] { display: none; }.info-modal { width: min(510px, 100%); position: relative; padding: 33px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 24px; background: var(--card); box-shadow: 0 28px 80px rgba(27, 35, 28, .28); }.modal-close { position: absolute; top: 16px; right: 16px; width: 31px; height: 31px; border: 0; border-radius: 50%; color: var(--muted); background: var(--paper-deep); font-size: 1.1rem; }.info-modal h2 { margin: 12px 0 0; font: 500 2.6rem/.95 "Fraunces", Georgia, serif; letter-spacing: -.06em; }.modal-arabic { margin: 8px 0 17px; color: var(--sage-deep); font: 1.55rem "Noto Naskh Arabic", serif; }.info-modal > p:not(.modal-arabic) { color: var(--muted-dark); font-size: .84rem; line-height: 1.75; }.modal-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }.modal-facts div { padding: 12px; border-radius: 10px; background: var(--paper); }.modal-facts span, .modal-facts strong { display: block; }.modal-facts span { color: var(--muted); font-size: .6rem; }.modal-facts strong { margin-top: 5px; font-size: .76rem; }.full-button { width: 100%; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 108px; max-width: calc(100% - 40px); padding: 11px 15px; border-radius: 10px; color: white; background: var(--ink); font-size: .72rem; box-shadow: var(--shadow); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .25s ease; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 1120px) { .reading-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; padding-left: 30px; padding-right: 30px; }.right-rail { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); position: static; }.right-rail .insight-card { height: 100%; }.hero-toolbar { padding-left: 0; padding-right: 0; }.top-nav { margin-left: 40px; } }
@media (max-width: 760px) { :root { --arabic-size: 1.95rem; }.site-header { height: 66px; }.top-nav, .language-switcher, .header-cta { display: none; }.mobile-menu-toggle { display: grid; }.mobile-nav { position: sticky; z-index: 19; top: 66px; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 9px 18px; border-bottom: 1px solid var(--line); background: var(--paper); }.mobile-nav:not([hidden]) { display: grid; }.mobile-nav a { padding: 9px 4px; color: var(--muted-dark); border-radius: 8px; text-align: center; font-size: .66rem; font-weight: 700; }.mobile-nav a:hover { background: var(--paper-deep); }.surah-hero { padding: 28px 20px 0; }.hero-breadcrumb { margin-bottom: 30px; }.hero-grid { display: block; }.hero-copy h1 { font-size: clamp(2.85rem, 13vw, 4.3rem); }.hero-description { font-size: .83rem; }.hero-orbit { height: 170px; margin-top: 8px; transform: scale(.72); transform-origin: center; }.hero-toolbar { display: block; padding: 18px 0; margin-top: 20px; }.toolbar-group:first-child { margin-bottom: 17px; }.toolbar-group:first-child .primary-button, .toolbar-group:first-child .secondary-button { flex: 1; }.view-controls { justify-content: space-between; }.toolbar-label { display: none; }.view-button { flex: 1; padding: 8px 5px; font-size: .62rem; }.search-panel { margin: 0 20px; }.reading-layout { display: block; padding: 32px 20px 140px; }.left-rail { display: grid; grid-template-columns: 1fr 1fr; position: static; margin-bottom: 34px; }.rail-quote { display: none; }.reading-heading { margin-bottom: 20px; }.reading-heading h2 { font-size: 1.03rem; }.verse { padding: 17px 0 20px; }.verse-actions { opacity: 1; transform: none; }.verse::before { left: -9px; }.verse.active { padding-left: 9px; margin-left: -9px; }.verse-translation { font-size: .92rem; }.right-rail { display: flex; margin-top: 40px; }.player { width: calc(100% - 20px); grid-template-columns: 1fr auto; gap: 10px; bottom: 10px; padding: 10px 12px; }.player-current { grid-column: 1 / -1; }.player-center { grid-template-columns: 24px 32px 24px 1fr; }.player-time { display: none; }.player-actions { display: none; }.site-footer { display: block; padding: 24px 20px 100px; }.site-footer p { margin: 13px 0; }.info-modal { padding: 28px 22px; }.info-modal h2 { font-size: 2.2rem; } }
@media (max-width: 430px) { .hero-meta { flex-wrap: wrap; row-gap: 8px; }.meta-separator { display: none; }.left-rail { display: block; }.jump-card { margin-top: 10px; }.chapter-nav { margin-top: 10px; }.view-controls { gap: 2px; }.verse-topline { margin-bottom: 10px; }.verse-action { width: 25px; }.verse-arabic { line-height: 1.8; }.modal-facts { gap: 5px; }.modal-facts div { padding: 10px 7px; } }