:root{
  /* MAIN QURAN VERSE FONT OPTIONS
     SYSTEM = original GUI/reference appearance
     NASKH  = GUI-V1 Noto Naskh appearance

     Switch only --arabic-verse-font below.
  */
  --arabic-font-system:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --arabic-font-naskh:"Noto Naskh Arabic","Traditional Arabic",serif;

  --arabic-verse-font:var(--arabic-font-naskh);

  --accent:#59eee7;
  --accent2:#2ab7c1;
  --ocean:#061719;
  --ocean-deep:#041315;
  --surface:rgba(8,34,36,.76);
  --surface-strong:rgba(8,34,36,.92);
  --surface-soft:rgba(10,45,47,.48);
  --line:rgba(89,238,231,.26);
  --line-soft:rgba(89,238,231,.12);
  --text:#f1fbfb;
  --muted:#91adad;
  --shadow:rgba(0,0,0,.32);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% -10%,rgba(28,85,88,.20),transparent 42%),
    linear-gradient(180deg,#06191b 0%,#041416 62%,#031214 100%);
  overflow-x:hidden;
  transition:background .55s ease;
}
body[data-scene="scenic"]{
  background:
    linear-gradient(rgba(1,18,23,.58),rgba(1,18,23,.70)),
    url("assets/scenic-bg.png") center/cover fixed no-repeat;
}
#ambientCanvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.7
}

body[data-view="result"] #ambientCanvas{
  opacity:.78;
}

.site-header{
  position:fixed;z-index:20;top:0;left:0;right:0;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:15px 24px;
}
.brand{font-size:20px;font-weight:700;letter-spacing:-.045em;color:var(--accent)}
.brand span{color:var(--text)}
.tagline{margin-top:5px;font-size:9px;letter-spacing:2.2px;color:#8eaaaa}
.header-actions{display:flex;gap:8px;align-items:center}
.utility-pill,.icon-button,.back-button{
  border:1px solid rgba(118,255,240,.68);
  color:var(--text);background:rgba(7,31,33,.76);
  border-radius:22px;min-height:38px;padding:7px 13px;cursor:pointer;
  backdrop-filter:blur(12px)
}
.icon-button{width:38px;padding:0}
main{min-height:100vh}
.view{transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.home-view{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:90px 18px 55px;
  text-align:center;
}
.hero-copy{transform:translateY(-30px)}
.eyebrow{
  font-size:10px;letter-spacing:3.4px;font-weight:700;color:var(--accent)
}
.hero-copy h1{
  margin:34px 0 18px;
  font-size:clamp(54px,6vw,84px);
  line-height:.93;font-weight:400;letter-spacing:-.055em
}
.hero-copy h1 span{color:#8da7a7;font-weight:300}
.hero-copy p{margin:0;color:#91aaaa;font-size:15px}
.listen-button{
  position:relative;width:300px;height:300px;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;margin-top:-10px
}
.echo-ring{
  position:absolute;border:1px solid rgba(89,238,231,.10);border-radius:50%;
  pointer-events:none
}
.r1{width:96px;height:96px}.r2{width:128px;height:128px}.r3{width:166px;height:166px}
.r4{width:206px;height:206px}.r5{width:246px;height:246px}
.logo-core{
  position:relative;z-index:4;width:76px;height:76px;color:var(--accent);
  filter:drop-shadow(0 0 17px rgba(89,238,231,.42));
  display:grid;place-items:center;
  transition:transform .4s ease,opacity .35s ease,filter .35s ease;
  animation:idleBreath 3.4s ease-in-out infinite
}
.eq-logo-svg{width:100%;height:100%;display:block;object-fit:contain}
.particle-field{display:none}
.logo-particle{
  position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 9px rgba(89,238,231,.9);
  opacity:0;transform:translate(-50%,-50%);
}
.listen-status{margin-top:-18px;color:#9eb4b4;font-size:13px}
.try-line{margin-top:18px;color:#4f6969;font-size:12px}
.preview-link{
  border:0;background:transparent;color:#516868;font-size:14px;margin-top:32px;cursor:pointer
}
.identified-toast{
  position:fixed;left:50%;top:54%;transform:translate(-50%,-50%) scale(.95);
  z-index:30;padding:11px 17px;border:1px solid var(--line);
  background:rgba(7,31,33,.94);border-radius:28px;color:#dcffff;
  opacity:0;pointer-events:none;transition:.35s ease;backdrop-filter:blur(14px)
}
.identified-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.identified-toast .check{color:var(--accent);margin-right:7px}
body.is-listening .echo-ring{animation:ringBreathe 1.5s ease-in-out infinite}
body.is-listening .r2{animation-delay:.12s} body.is-listening .r3{animation-delay:.24s}
body.is-listening .r4{animation-delay:.36s} body.is-listening .r5{animation-delay:.48s}
@keyframes ringBreathe{50%{transform:scale(1.08);border-color:rgba(89,238,231,.24)}}
@keyframes ringTravel{0%{transform:scale(.8);opacity:.12}60%{opacity:.42}100%{transform:scale(1.18);opacity:.05}}
@keyframes logoFloat{to{transform:translateY(-4px);filter:drop-shadow(0 0 28px rgba(89,238,231,.7))}}
@keyframes idleBreath{0%,100%{transform:scale(1);filter:drop-shadow(0 0 17px rgba(89,238,231,.42))}50%{transform:scale(1.035);filter:drop-shadow(0 0 23px rgba(89,238,231,.55))}}

.result-view{display:none;padding:88px 18px 38px}
body[data-view="result"] .home-view{display:none}
body[data-view="result"] .result-view{display:block}
.result-shell{width:min(1120px,calc(100% - 10px));margin:0 auto}
.glass{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  backdrop-filter:blur(14px);box-shadow:0 14px 42px var(--shadow)
}
.heard-strip{
  display:grid;grid-template-columns:minmax(0,1fr);gap:8px;
  padding:10px 16px;margin-bottom:9px
}
.heard-summary-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.heard-identity{display:flex;align-items:center;gap:9px;min-width:0}
.heard-copy{min-width:0;width:100%}
.heard-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:0
}
.heard-search-again{
  border:1px solid var(--line);
  color:#bfe9e5;
  background:rgba(7,31,33,.62);
  border-radius:18px;
  min-height:30px;
  padding:5px 11px;
  cursor:pointer;
  font-size:11px;
  white-space:nowrap
}
.heard-search-again:hover{
  border-color:var(--accent);
  color:white
}
.share-feedback{
  flex-basis:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;
  color:var(--theme-muted);font-size:11px;min-width:0
}
.share-link{
  min-width:0;max-width:min(100%,340px);padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-soft);color:inherit;font:inherit
}
.share-link:focus-visible,.heard-search-again:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}
.heard-arabic{font-family:var(--arabic-verse-font);font-size:16px;margin:0;text-align:left;direction:rtl;overflow-wrap:anywhere}
.status-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:5px 11px;border:1px solid rgba(89,238,231,.38);
  border-radius:18px;color:#9ef6ef;background:rgba(89,238,231,.07);font-size:11px;white-space:nowrap
}
.verse-card{padding:26px 30px 22px}
.verse-head{display:flex;justify-content:space-between;align-items:center;gap:20px}
.surah-lockup{display:flex;align-items:center;gap:14px}
.surah-number{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:rgba(89,238,231,.08);border:1px solid var(--line);font-size:17px;font-weight:700;color:#a8fff7
}
.surah-lockup h2{margin:2px 0 3px;font-size:24px}
.meta{color:#91aaaa;font-size:12px}
.verse-ref{text-align:right;display:grid;gap:8px;justify-items:end}
.verse-ref strong{font-size:26px}
.divider{height:1px;background:var(--line-soft);margin:18px 0 21px}
.main-arabic{
  direction:rtl;text-align:center;
  font-family:var(--arabic-verse-font);
  font-size:clamp(37px,4.1vw,58px);line-height:1.85;font-weight:400;
  max-width:990px;margin:0 auto 12px
}
.translation{text-align:center;line-height:1.55;margin:5px auto;max-width:790px}
.english{font-size:15px}.urdu{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic","Segoe UI",serif;font-size:15px}
.language-switch{display:flex;justify-content:center;align-items:center}
.hero-switch{margin:14px 0 8px}
.lang{
  border:1px solid var(--line);background:transparent;color:#b6cccc;
  padding:7px 18px;min-width:72px;cursor:pointer
}
.lang:first-child{border-radius:20px 0 0 20px}.lang:last-child{border-radius:0 20px 20px 0}
.lang.active{color:white;background:rgba(89,238,231,.10);border-color:var(--accent)}
.verse-player{display:flex;justify-content:center;align-items:center;gap:16px;margin:9px 0 5px}
.nav-circle,.play-circle{
  border:1px solid var(--line);border-radius:50%;color:white;background:rgba(8,37,39,.72);cursor:pointer
}
.nav-circle{width:38px;height:38px}.play-circle{width:54px;height:54px;border-color:var(--accent);font-size:20px;box-shadow:0 0 20px rgba(89,238,231,.12)}
.qari-credit{text-align:center;color:#77bcb7;font-size:11px}
.secondary-actions{display:flex;justify-content:center;gap:42px;margin-top:12px}
.secondary-actions button{border:0;background:transparent;color:#dcecec;font-size:12px;cursor:pointer}
.secondary-actions span{display:block;margin-bottom:4px;color:#a8d4d0}
.stack-panel{margin-top:13px;padding:18px 20px}
.panel-title{font-size:16px;font-weight:700}.panel-title span{color:#bcecea}
.word-panel{padding-bottom:17px}
.word-scroll{
  display:flex;gap:9px;margin-top:13px;overflow-x:auto;scrollbar-width:thin;
  justify-content:center
}
.word-scroll.is-overflowing{justify-content:flex-start}
.word-card{
  min-width:112px;min-height:105px;border:1px solid var(--line);border-radius:13px;
  background:rgba(8,40,42,.42);color:white;padding:10px 9px;cursor:pointer
}
.word-card b{display:block;font-family:var(--arabic-verse-font);font-size:26px;line-height:1.3}
.word-card small{display:block;color:#a8c3c1;margin-top:4px}
.word-card span{display:block;margin-top:7px;font-size:12px}

/* Desktop Word-by-Word focus */
@media (hover:hover) and (pointer:fine){
  .word-scroll{
    padding:18px;
    margin-left:-18px;
    margin-right:-18px;
  }

  .word-card{
    position:relative;
    transform:scale(1);
    transform-origin:center;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease;
  }

  .word-card:hover{
    transform:scale(1.3);
    z-index:20;
    border-color:var(--accent);
    box-shadow:0 10px 30px var(--theme-glow-soft);
  }
}
.context-panel{position:relative}
.context-panel p{margin:13px 0 0;line-height:1.65;color:#d8e7e7;max-width:1000px}
.panel-icon{
  position:absolute;right:16px;top:14px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:rgba(5,29,31,.64);color:white;cursor:pointer
}
.panel-title-row{display:flex;justify-content:space-between;gap:18px;align-items:center}
.panel-title-row>span{color:#9fb9b8;font-size:12px}
.occurrence-list{margin-top:9px}
.occurrence-row{
  width:100%;display:grid;grid-template-columns:30px 1fr 75px 1.4fr 18px;gap:8px;
  align-items:center;text-align:left;padding:10px 0;border:0;border-top:1px solid var(--line-soft);
  background:transparent;color:white;cursor:pointer
}
.occurrence-row span:nth-child(4){text-align:right;font-family:"Noto Naskh Arabic","Traditional Arabic",serif;font-size:16px}
.occ-num{width:26px;height:26px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#a9e8e4}
.view-more{display:block;margin:10px 0 0 auto;border:0;background:transparent;color:var(--accent);cursor:pointer}
.result-footer{
  display:flex;justify-content:space-between;align-items:center;margin-top:15px;
  color:#79c9c5;font-size:9px;letter-spacing:2.2px
}
.context-modal{
  position:fixed;inset:0;display:none;place-items:center;background:rgba(0,8,10,.58);
  z-index:50;padding:18px
}
.context-modal.open{display:grid}
.context-dialog{
  width:min(720px,100%);
  block-size:min(720px,calc(100dvh - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  padding:30px;
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
.context-modal-header{flex:0 0 auto;padding-right:42px}
.context-dialog h3{font-size:24px;margin:9px 0 14px}
.context-modal-content{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  padding:2px 12px 2px 0;
}
.context-modal-content p{line-height:1.75;color:#d9e9e8;margin:0}
.context-text-size-controls{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.context-text-size-controls button{
  min-width:44px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.context-text-size-controls button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.context-text-size-controls button:focus-visible,.context-modal-content:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.context-panel[data-context-text-size="default"] p{font-size:inherit!important;line-height:1.65!important}
.context-modal[data-context-text-size="default"] .context-modal-content{font-size:inherit!important;line-height:1.75!important}
.context-panel[data-context-text-size="large"] p,.context-modal[data-context-text-size="large"] .context-modal-content{font-size:17px!important;line-height:1.7!important}
.context-panel[data-context-text-size="larger"] p,.context-modal[data-context-text-size="larger"] .context-modal-content{font-size:20px!important;line-height:1.75!important}
.modal-close{
  position:absolute;right:14px;top:12px;border:1px solid var(--line);border-radius:50%;
  width:36px;height:36px;background:transparent;color:white;font-size:22px;cursor:pointer
}

@media(max-width:900px){
  .result-shell{width:min(820px,calc(100% - 4px))}
  .verse-card{padding:23px 23px 20px}
  .main-arabic{font-size:clamp(35px,6vw,49px)}
  .context-panel p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .occurrence-row{grid-template-columns:28px 1fr 62px 1.15fr 14px}
}
@media(max-width:650px){
  .site-header{padding:9px 11px}.brand{font-size:17px}.tagline{font-size:8px;letter-spacing:1.8px}
  .utility-pill,.icon-button{min-height:34px}.icon-button{width:34px}
  .home-view{padding-top:68px}
  .hero-copy{transform:translateY(-15px)}
  .hero-copy h1{font-size:54px;margin-top:24px}
  .listen-button{width:255px;height:255px}.r5{width:220px;height:220px}.r4{width:185px;height:185px}
  .result-view{padding:67px 6px 20px}
  .result-shell{width:100%}
  .heard-strip{padding:10px 11px;gap:9px}.heard-summary-row{align-items:flex-start;flex-wrap:wrap;gap:8px}.heard-identity{gap:7px;flex-wrap:wrap}.heard-actions{gap:7px;margin-left:auto}.heard-copy{width:100%}.heard-arabic{font-size:15px}.status-chip{font-size:9px;padding:4px 8px}.heard-search-again{font-size:9px;padding:4px 8px;min-height:28px}.share-feedback{justify-content:flex-start;font-size:10px}.share-link{width:100%;max-width:none}
  .verse-card{padding:17px 12px}
  .verse-head{align-items:flex-start}.surah-number{width:42px;height:42px}.surah-lockup{gap:10px}
  .surah-lockup h2{font-size:20px}.verse-ref strong{font-size:22px}
  .main-arabic{font-size:31px;line-height:1.8}
  .translation{font-size:13px}
  .secondary-actions{gap:20px}
  .stack-panel{padding:15px 14px}
  .word-scroll{justify-content:flex-start}
  .word-card{min-width:95px;min-height:96px}
  .context-panel p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .context-modal{padding:10px}
  .context-dialog{
    width:100%;
    block-size:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding:22px 18px;
  }
  .context-modal-content{padding-right:8px}
  .context-text-size-controls{gap:6px}
  .context-text-size-controls button{padding:8px 10px}
  .occurrence-row{grid-template-columns:28px 1fr 52px 1.1fr 12px;font-size:11px}
  .desktop-extra{display:none}
  .result-footer{font-size:7px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #ambientCanvas{display:none}
}

/* ---------------------------------------------------------
   GUI-V1 SETTINGS PANEL
   --------------------------------------------------------- */

.settings-panel{
  position:fixed;
  z-index:60;
  top:68px;
  right:24px;
  width:min(340px,calc(100vw - 28px));
  padding:17px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}

.settings-panel.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

.settings-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  font-weight:700;
  margin-bottom:15px;
}

.settings-title button{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  font-size:19px;
}

.setting-row{
  display:grid;
  gap:8px;
  padding:11px 0;
  border-top:1px solid var(--line-soft);
}

.setting-row > span{
  color:#9ab4b3;
  font-size:11px;
  letter-spacing:.06em;
}

.setting-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.setting-options button{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(8,40,42,.42);
  color:var(--text);
  padding:7px 11px;
  cursor:pointer;
  font-size:11px;
}

.setting-options button.active{
  border-color:var(--accent);
  background:rgba(89,238,231,.10);
  color:white;
}

/* Light presentation */
body[data-appearance="light"]{
  --text:#172c2d;
  --surface:rgba(242,250,249,.88);
  --line:rgba(22,100,98,.28);
  --line-soft:rgba(22,100,98,.15);
  --shadow:rgba(25,68,67,.12);
  color:var(--text);
}

body[data-appearance="light"][data-scene="ocean"]{
  background:#e8f3f2;
}

body[data-appearance="light"] .utility-pill,
body[data-appearance="light"] .icon-button,
body[data-appearance="light"] .back-button,
body[data-appearance="light"] .heard-search-again,
body[data-appearance="light"] .setting-options button{
  background:rgba(248,253,252,.82);
  color:#173637;
}

body[data-appearance="light"] .setting-options button.active{
  color:#092425;
}

@media(max-width:650px){
  .settings-panel{
    top:56px;
    right:10px;
  }
}


/* =========================================================
   GUI-V1 LIGHT MODE + GLOBAL ARABIC FONT CORRECTIONS
   ========================================================= */


/* ---------------------------------------------------------
   Arabic font setting applies consistently to Quranic text
   --------------------------------------------------------- */

.main-arabic,
.heard-arabic,
.word-arabic,
.word-card .arabic,
.try-arabic {
  font-family:var(--arabic-verse-font) !important;
}


/* ---------------------------------------------------------
   LIGHT MODE — restore visual hierarchy and contrast
   --------------------------------------------------------- */

/* Main EchoQuran mark / central listening mark */
body[data-appearance="light"] .q-mark,
body[data-appearance="light"] .logo-mark,
body[data-appearance="light"] .listen-logo {
  filter:brightness(0) saturate(100%);
}


/* Listening ripples need substantially more contrast */
body[data-appearance="light"] .ripple {
  border-color:rgba(15,95,96,.20) !important;
}


/* Ambient particles */
body[data-appearance="light"] .logo-particle {
  background:rgba(16,108,108,.34) !important;
  box-shadow:0 0 8px rgba(25,155,151,.20) !important;
}


/* Header branding */
body[data-appearance="light"] .brand,
body[data-appearance="light"] .brand-name,
body[data-appearance="light"] .brand-wordmark {
  color:#102e30 !important;
}


/* Keep the Echo accent visible where applicable */
body[data-appearance="light"] .brand-accent {
  color:#16aaa6 !important;
}


/* Supporting copy */
body[data-appearance="light"] .hero-subtitle,
body[data-appearance="light"] .listen-status,
body[data-appearance="light"] .try-line {
  color:#587879;
}


/* Stronger glass definition in light mode */
body[data-appearance="light"] .glass,
body[data-appearance="light"] .settings-panel {
  background:rgba(244,252,251,.94);
  border-color:rgba(28,105,103,.24);
  box-shadow:0 18px 50px rgba(31,79,78,.13);
}


/* Settings labels need slightly more contrast */
body[data-appearance="light"] .setting-row > span {
  color:#668b8b;
}



/* =========================================================
   GUI-V1 LIGHT THEME V2
   Purpose-built light presentation
   ========================================================= */


/* ---------------------------------------------------------
   BRAND
   Echo stays accent cyan, Quran becomes dark
   --------------------------------------------------------- */

body[data-appearance="light"] .brand{
  color:#24cfc9 !important;
}

body[data-appearance="light"] .brand span{
  color:#123234 !important;
}

body[data-appearance="light"] .tagline{
  color:#688c8d !important;
}


/* ---------------------------------------------------------
   HERO TYPOGRAPHY
   Restore the impact of the dark version
   --------------------------------------------------------- */

body[data-appearance="light"] .hero-copy h1{
  color:#123234 !important;
  font-weight:500 !important;
}

body[data-appearance="light"] .hero-copy h1 span{
  color:#6f9697 !important;
  font-weight:400 !important;
}

body[data-appearance="light"] .hero-copy p{
  color:#628687 !important;
}

body[data-appearance="light"] .eyebrow{
  color:#20c9c5 !important;
}


/* ---------------------------------------------------------
   CENTRAL LISTENING MARK
   Reuse same SVG, recolored for light mode
   --------------------------------------------------------- */

body[data-appearance="light"] .eq-logo-svg{
  filter:
    brightness(0)
    saturate(100%)
    invert(17%)
    sepia(18%)
    saturate(1062%)
    hue-rotate(132deg)
    brightness(90%)
    contrast(92%);
}


/* stronger teal glow around logo */
body[data-appearance="light"] .logo-core{
  filter:
    drop-shadow(0 0 12px rgba(34,199,193,.30))
    drop-shadow(0 0 26px rgba(34,199,193,.15));
}


/* ---------------------------------------------------------
   RIPPLES
   --------------------------------------------------------- */

body[data-appearance="light"] .echo-ring{
  border-color:rgba(35,151,149,.25) !important;
}

body[data-appearance="light"].is-listening .echo-ring{
  animation:ringBreatheLight 1.5s ease-in-out infinite;
}

@keyframes ringBreatheLight{
  50%{
    transform:scale(1.08);
    border-color:rgba(28,184,180,.48);
  }
}


/* ---------------------------------------------------------
   LISTENING / HOME SUPPORT TEXT
   --------------------------------------------------------- */

body[data-appearance="light"] .listen-status{
  color:#426d6e !important;
}

body[data-appearance="light"] .try-line{
  color:#476d6e !important;
}

body[data-appearance="light"] .preview-link{
  color:#385f60 !important;
}


/* ---------------------------------------------------------
   RESULT PAGE — GENERAL
   --------------------------------------------------------- */

body[data-appearance="light"] .glass,
body[data-appearance="light"] .verse-card,
body[data-appearance="light"] .stack-panel{
  background:rgba(249,253,252,.88);
  border-color:rgba(32,113,111,.20);
}


/* ---------------------------------------------------------
   WHAT WE HEARD
   --------------------------------------------------------- */

body[data-appearance="light"] .heard-arabic{
  color:#17393a !important;
}

body[data-appearance="light"] .heard-search-again{
  color:#244e4f !important;
  background:rgba(247,252,251,.92);
  border-color:rgba(31,112,110,.24);
}

body[data-appearance="light"] .heard-search-again:hover{
  color:#102e30 !important;
  border-color:#20bebb;
}


/* ---------------------------------------------------------
   SURAH / VERSE
   --------------------------------------------------------- */

body[data-appearance="light"] .surah-lockup h2{
  color:#143536 !important;
}

body[data-appearance="light"] .surah-number{
  color:#147f7d !important;
  background:rgba(28,183,178,.07);
  border-color:rgba(28,133,130,.26);
}

body[data-appearance="light"] .meta{
  color:#648788 !important;
}

body[data-appearance="light"] .verse-ref strong{
  color:#173738 !important;
}

body[data-appearance="light"] .main-arabic{
  color:#102d2e !important;
  font-weight:500;
}

body[data-appearance="light"] .translation{
  color:#33595a !important;
}


/* ---------------------------------------------------------
   LANGUAGE SWITCH
   --------------------------------------------------------- */

body[data-appearance="light"] .lang{
  color:#426b6c !important;
  border-color:rgba(31,112,110,.24);
}

body[data-appearance="light"] .lang.active{
  color:#123536 !important;
  background:rgba(31,195,190,.11);
  border-color:#20c3be;
}


/* ---------------------------------------------------------
   PLAYER
   --------------------------------------------------------- */

body[data-appearance="light"] .nav-circle,
body[data-appearance="light"] .play-circle{
  color:#173738 !important;
  background:rgba(248,253,252,.96);
  border-color:rgba(30,112,110,.28);
}

body[data-appearance="light"] .play-circle{
  border-color:#25c6c1;
  box-shadow:0 0 20px rgba(32,183,178,.14);
}

body[data-appearance="light"] .qari-credit{
  color:#4c7778 !important;
}

body[data-appearance="light"] .secondary-actions button{
  color:#31595a !important;
}

body[data-appearance="light"] .secondary-actions span{
  color:#4c8180 !important;
}


/* ---------------------------------------------------------
   PANEL TITLES
   --------------------------------------------------------- */

body[data-appearance="light"] .panel-title{
  color:#173738 !important;
}

body[data-appearance="light"] .panel-title span{
  color:#517d7d !important;
}

body[data-appearance="light"] .panel-title-row > span{
  color:#648888 !important;
}


/* ---------------------------------------------------------
   WORD BY WORD
   --------------------------------------------------------- */

body[data-appearance="light"] .word-card{
  background:rgba(235,246,245,.92);
  color:#173738 !important;
  border-color:rgba(28,112,110,.22);
}

body[data-appearance="light"] .word-card b{
  color:#173738 !important;
}

body[data-appearance="light"] .word-card small{
  color:#557c7d !important;
}

body[data-appearance="light"] .word-card span{
  color:#365e5f !important;
}


/* ---------------------------------------------------------
   CONTEXT
   --------------------------------------------------------- */

body[data-appearance="light"] .context-panel p{
  color:#355c5d !important;
}

body[data-appearance="light"] .panel-icon{
  color:#244e4f !important;
  background:rgba(248,253,252,.95);
  border-color:rgba(30,112,110,.24);
}


/* ---------------------------------------------------------
   OCCURRENCES
   --------------------------------------------------------- */

body[data-appearance="light"] .occurrence-row{
  color:#244647 !important;
  border-top-color:rgba(31,105,103,.14);
}

body[data-appearance="light"] .occurrence-row:hover{
  background:rgba(30,183,178,.045);
}

body[data-appearance="light"] .occurrence-row span:nth-child(4){
  color:#173738 !important;
}

body[data-appearance="light"] .occ-num{
  color:#207f7d !important;
  border-color:rgba(28,120,117,.27);
}

body[data-appearance="light"] .view-more{
  color:#159d99 !important;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

body[data-appearance="light"] .result-footer{
  color:#3f8481 !important;
}


/* ---------------------------------------------------------
   SETTINGS
   --------------------------------------------------------- */

body[data-appearance="light"] .settings-panel{
  background:rgba(247,252,251,.97);
}

body[data-appearance="light"] .settings-title{
  color:#153536;
}

body[data-appearance="light"] .setting-row > span{
  color:#648989 !important;
}

body[data-appearance="light"] .setting-options button{
  color:#315758 !important;
  background:rgba(250,254,253,.96);
  border-color:rgba(31,112,110,.25);
}

body[data-appearance="light"] .setting-options button.active{
  color:#123334 !important;
  background:rgba(31,195,190,.10);
  border-color:#20c5c0;
}



/* =========================================================
   LIGHT THEME V2 — FINAL CONTRAST POLISH
   ========================================================= */


/* Status chips: stronger teal used by View More */
body[data-appearance="light"] .status-chip{
  color:#159d99 !important;
  border-color:rgba(21,157,153,.38) !important;
  background:rgba(21,157,153,.055) !important;
}


/* Page 1 light-mode ripples:
   reduce current visual strength by approximately 15% */
body[data-appearance="light"][data-view="home"] .echo-ring{
  border-color:rgba(35,151,149,.21) !important;
}


/* Listening state retains enough feedback while also softer */
body[data-appearance="light"][data-view="home"].is-listening .echo-ring{
  animation:ringBreatheLightSoft 1.5s ease-in-out infinite;
}

@keyframes ringBreatheLightSoft{
  50%{
    transform:scale(1.08);
    border-color:rgba(28,184,180,.41);
  }
}



/* =========================================================
   LIGHT THEME — CONTEXT MODAL CONTRAST FIX
   ========================================================= */

body[data-appearance="light"] .context-modal{
  background:rgba(18,45,46,.38);
}

body[data-appearance="light"] .context-dialog{
  background:rgba(248,252,251,.98);
  color:#173738;
  border-color:rgba(31,112,110,.22);
}

body[data-appearance="light"] .context-dialog h3{
  color:#173738 !important;
}

body[data-appearance="light"] .context-dialog p{
  color:#355c5d !important;
}

body[data-appearance="light"] .context-dialog strong,
body[data-appearance="light"] .context-dialog b{
  color:#173738 !important;
}

body[data-appearance="light"] .context-dialog [dir="rtl"]{
  color:#173738 !important;
}

body[data-appearance="light"] .context-dialog .eyebrow{
  color:#159d99 !important;
}

body[data-appearance="light"] .modal-close{
  color:#31595a !important;
  background:rgba(248,253,252,.96);
  border-color:rgba(31,112,110,.25);
}



/* =========================================================
   GUI-V1.1 — LANGUAGE TOGGLE GEOMETRY + FIRST-CLASS PANELS
   ========================================================= */

/* The selected language may change visual emphasis, never geometry. */
.hero-switch{
  width:min(220px,100%);
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.hero-switch .lang{
  width:100%;
  min-width:0;
  height:44px;
  min-height:44px;
  padding:0 14px;
  margin:0;
  display:grid;
  place-items:center;
  line-height:1;
  box-sizing:border-box;
  white-space:nowrap;
  border-width:1px;
  font-size:13px;
}
.hero-switch .lang[data-lang="ur"]{
  font-family:"Noto Naskh Arabic","Traditional Arabic","Segoe UI",serif;
  font-size:14px;
  direction:rtl;
}
.hero-switch .lang.active{
  transform:none;
  box-shadow:none;
}

.panel-kicker{
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:400;
}
.panel-action{
  border:1px solid var(--line);
  border-radius:18px;
  min-height:34px;
  padding:6px 12px;
  background:rgba(8,40,42,.42);
  color:#dcecec;
  cursor:pointer;
  white-space:nowrap;
}
.panel-action:hover{
  border-color:var(--accent);
  color:white;
}
.panel-copy{
  margin-top:13px;
  line-height:1.65;
  color:#d8e7e7;
}
.muted-copy{
  color:#a9c0bf;
}
.listen-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
}
.listen-option{
  min-height:68px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(8,40,42,.42);
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  cursor:pointer;
}
.listen-option:hover{
  border-color:var(--accent);
  background:rgba(89,238,231,.07);
}
.listen-option:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.listen-option-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#b8fff9;
  border:1px solid var(--line);
  background:rgba(89,238,231,.06);
}
.listen-option > span:last-child{
  display:grid;
  gap:3px;
}
.listen-option strong{
  font-size:12px;
}
.listen-option small{
  color:var(--muted);
  font-size:10px;
}

body[data-appearance="light"] .panel-kicker,
body[data-appearance="light"] .muted-copy,
body[data-appearance="light"] .listen-option small{
  color:#5f8282 !important;
}
body[data-appearance="light"] .panel-action,
body[data-appearance="light"] .listen-option{
  background:rgba(245,251,250,.92);
  color:#244647;
  border-color:rgba(31,112,110,.22);
}
body[data-appearance="light"] .listen-option-icon{
  color:#167f7c;
  background:rgba(31,195,190,.08);
  border-color:rgba(31,112,110,.22);
}

@media(max-width:650px){
  .hero-switch{
    width:min(210px,72vw);
  }
  .hero-switch .lang{
    height:42px;
    min-height:42px;
    padding:0 10px;
  }
  .listen-options{
    grid-template-columns:repeat(3,1fr);
    gap:8px;
  }
  .listen-option{
    min-height:78px;
    padding:9px 6px;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:6px;
  }
  .listen-option small{
    display:none;
  }
  .panel-title-row{
    align-items:flex-start;
  }
}


/* =========================================================
   GUI interaction polish — 2026-09-13
   ========================================================= */

/* Recording should be unmistakable.
   Second click removes is-listening and restores the normal logo. */
body.is-listening .eq-logo-svg{
  filter:
    brightness(0)
    saturate(100%)
    invert(62%)
    sepia(68%)
    saturate(2100%)
    hue-rotate(315deg)
    brightness(108%)
    contrast(98%)
    drop-shadow(0 0 17px rgba(255,111,105,.75));
}

body.is-listening .logo-core{
  filter:
    drop-shadow(0 0 18px rgba(255,111,105,.55))
    drop-shadow(0 0 36px rgba(255,111,105,.24));
}

/* Audio playback feedback */
.listen-option{
  transition:
    border-color .2s ease,
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.listen-option.is-playing{
  border-color:var(--accent) !important;
  background:rgba(89,238,231,.10) !important;
  box-shadow:0 0 22px rgba(89,238,231,.10);
}

.listen-option.is-playing .listen-option-icon{
  background:var(--accent);
  border-color:var(--accent);
  color:#041416;
  box-shadow:0 0 16px rgba(89,238,231,.28);
}

.play-circle.is-playing{
  background:rgba(89,238,231,.12);
  box-shadow:0 0 26px rgba(89,238,231,.25);
}


/* ---------------------------------------------------------
   Accent choices
   Ocean is the original/default EchoQuran identity.
   --------------------------------------------------------- */

body[data-accent="red"]{
  --accent:#f26970;
  --accent2:#d7505a;
  --line:rgba(242,105,112,.30);
  --line-soft:rgba(242,105,112,.13);
}

body[data-accent="orange"]{
  --accent:#f29b5a;
  --accent2:#d77734;
  --line:rgba(242,155,90,.30);
  --line-soft:rgba(242,155,90,.13);
}

body[data-accent="gold"]{
  --accent:#e3bd57;
  --accent2:#b99436;
  --line:rgba(227,189,87,.30);
  --line-soft:rgba(227,189,87,.13);
}

body[data-accent="green"]{
  --accent:#51bd91;
  --accent2:#389872;
  --line:rgba(81,189,145,.30);
  --line-soft:rgba(81,189,145,.13);
}

body[data-accent="indigo"]{
  --accent:#7786ed;
  --accent2:#5968c7;
  --line:rgba(119,134,237,.30);
  --line-soft:rgba(119,134,237,.13);
}

body[data-accent="violet"]{
  --accent:#af76e8;
  --accent2:#8854bc;
  --line:rgba(175,118,232,.30);
  --line-soft:rgba(175,118,232,.13);
}

.accent-options button{
  min-width:62px;
}



/* =========================================================
   ECHOQURAN 3-THEME SYSTEM
   Ocean / Gold / Violet
   2026-09-13
   ========================================================= */


/* ---------------------------------------------------------
   Shared theme variables
   --------------------------------------------------------- */

:root,
body[data-accent="ocean"],
body:not([data-accent]),
body[data-accent=""] {

  --accent:#59eee7;
  --accent2:#2ab7c1;

  --theme-bg-top:#082226;
  --theme-bg-mid:#051719;
  --theme-bg-bottom:#031214;

  --theme-radial:rgba(53,145,145,.23);

  --surface:rgba(8,34,36,.76);
  --surface-strong:rgba(8,34,36,.92);
  --surface-soft:rgba(10,45,47,.48);

  --line:rgba(89,238,231,.26);
  --line-soft:rgba(89,238,231,.12);

  --theme-glow:rgba(89,238,231,.42);
  --theme-glow-soft:rgba(89,238,231,.18);

  --particle-rgb:89,238,231;

  --theme-muted:#91adad;
  --theme-footer:#79c9c5;
}


body[data-accent="gold"] {

  --accent:#e3bd57;
  --accent2:#b79231;

  --theme-bg-top:#292411;
  --theme-bg-mid:#18170d;
  --theme-bg-bottom:#100f09;

  --theme-radial:rgba(185,151,55,.24);

  --surface:rgba(42,37,15,.72);
  --surface-strong:rgba(37,31,12,.91);
  --surface-soft:rgba(61,51,18,.46);

  --line:rgba(227,189,87,.29);
  --line-soft:rgba(227,189,87,.13);

  --theme-glow:rgba(227,189,87,.40);
  --theme-glow-soft:rgba(227,189,87,.17);

  --particle-rgb:227,189,87;

  --theme-muted:#b7ad8d;
  --theme-footer:#c9ae61;
}


body[data-accent="violet"] {

  --accent:#af76e8;
  --accent2:#8052b5;

  --theme-bg-top:#21152d;
  --theme-bg-mid:#130d1d;
  --theme-bg-bottom:#0b0910;

  --theme-radial:rgba(151,93,199,.25);

  --surface:rgba(35,21,47,.74);
  --surface-strong:rgba(30,17,42,.92);
  --surface-soft:rgba(54,31,71,.46);

  --line:rgba(175,118,232,.30);
  --line-soft:rgba(175,118,232,.13);

  --theme-glow:rgba(175,118,232,.42);
  --theme-glow-soft:rgba(175,118,232,.18);

  --particle-rgb:175,118,232;

  --theme-muted:#ae9abf;
  --theme-footer:#b58bd9;
}


/* ---------------------------------------------------------
   Whole-page atmosphere
   --------------------------------------------------------- */

body[data-scene="ocean"] {
  background:
    radial-gradient(
      circle at 50% -10%,
      var(--theme-radial),
      transparent 43%
    ),
    linear-gradient(
      180deg,
      var(--theme-bg-top) 0%,
      var(--theme-bg-mid) 61%,
      var(--theme-bg-bottom) 100%
    ) !important;

  transition:
    background .55s ease,
    color .35s ease;
}


/* ---------------------------------------------------------
   Theme-responsive glass
   --------------------------------------------------------- */

.glass,
.verse-card,
.stack-panel,
.settings-panel {
  background:var(--surface) !important;
  border-color:var(--line) !important;
}

.settings-panel {
  background:var(--surface-strong) !important;
}


/* ---------------------------------------------------------
   Theme-responsive header + controls
   --------------------------------------------------------- */

.brand {
  color:var(--accent) !important;
}

.eyebrow,
.view-more,
.check {
  color:var(--accent) !important;
}

.utility-pill,
.icon-button,
.back-button,
.heard-search-again,
.setting-options button {
  border-color:var(--line);
}

.setting-options button.active {
  border-color:var(--accent) !important;
  background:color-mix(
    in srgb,
    var(--accent) 12%,
    transparent
  ) !important;
}


/* ---------------------------------------------------------
   Logo / rings
   --------------------------------------------------------- */

.logo-core {
  filter:
    drop-shadow(
      0 0 17px
      var(--theme-glow)
    );
}

body:not(.is-listening) .logo-core {
  animation:themeIdleBreath 3.4s ease-in-out infinite;
}

@keyframes themeIdleBreath {
  0%,100% {
    transform:scale(1);
    filter:
      drop-shadow(
        0 0 17px
        var(--theme-glow)
      );
  }

  50% {
    transform:scale(1.035);
    filter:
      drop-shadow(
        0 0 25px
        var(--theme-glow)
      );
  }
}

.echo-ring {
  border-color:var(--line-soft) !important;
}

body.is-listening .echo-ring {
  animation:ringBreatheTheme 1.5s ease-in-out infinite;
}

@keyframes ringBreatheTheme {
  50% {
    transform:scale(1.08);
    border-color:var(--line) !important;
  }
}


/* Keep recording state warm/red regardless of selected theme. */
body.is-listening .logo-core {
  filter:
    drop-shadow(0 0 18px rgba(255,111,105,.55))
    drop-shadow(0 0 36px rgba(255,111,105,.24)) !important;
}


/* ---------------------------------------------------------
   Theme-responsive cards and active playback
   --------------------------------------------------------- */

.surah-number,
.status-chip,
.word-card,
.listen-option,
.occ-num,
.nav-circle,
.play-circle {
  border-color:var(--line);
}

.surah-number {
  color:var(--accent);
  background:var(--surface-soft);
}

.status-chip {
  color:var(--accent);
  background:color-mix(
    in srgb,
    var(--accent) 7%,
    transparent
  );
}

.word-card {
  background:var(--surface-soft);
}

.listen-option.is-playing,
.play-circle.is-playing {
  border-color:var(--accent) !important;
  background:color-mix(
    in srgb,
    var(--accent) 11%,
    transparent
  ) !important;
  box-shadow:
    0 0 24px
    var(--theme-glow-soft) !important;
}

.listen-option.is-playing .listen-option-icon {
  background:var(--accent) !important;
  border-color:var(--accent) !important;
}


/* ---------------------------------------------------------
   Theme-responsive muted atmosphere
   --------------------------------------------------------- */

.listen-status,
.hero-copy p,
.try-line,
.meta,
.qari-credit {
  color:var(--theme-muted);
}

.result-footer,
.home-footer {
  color:var(--theme-footer);
}


/* ---------------------------------------------------------
   PAGE 1 footer/contact
   --------------------------------------------------------- */

.home-footer {
  position:absolute;
  left:50%;
  bottom:19px;
  transform:translateX(-50%);

  width:min(720px,calc(100% - 40px));

  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;

  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;

  opacity:.66;
}

.home-footer span::after {
  content:"·";
  margin-left:12px;
}

.home-footer a,
.result-footer a {
  color:inherit;
  text-decoration:none;
  transition:
    color .2s ease,
    opacity .2s ease;
}

.home-footer a:hover,
.result-footer a:hover {
  color:var(--accent);
  opacity:1;
}


/* ---------------------------------------------------------
   Result footer/contact
   --------------------------------------------------------- */

.result-footer {
  border-top:1px solid var(--line-soft);
  padding-top:14px;
}

.result-footer a {
  letter-spacing:.08em;
  text-transform:none;
}


/* ---------------------------------------------------------
   Example phrase
   --------------------------------------------------------- */

.try-line {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:5px 8px;
}

.try-arabic {
  font-family:var(--arabic-verse-font);
  font-size:14px;
  color:color-mix(
    in srgb,
    var(--text) 50%,
    var(--accent)
  );
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px) {

  .home-footer {
    bottom:13px;
    flex-direction:column;
    gap:4px;
    letter-spacing:.10em;
  }

  .home-footer span::after {
    display:none;
  }

  .result-footer {
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }

  .try-line {
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
  }

  .try-arabic {
    font-size:13px;
    line-height:1.8;
  }
}


/* ---------------------------------------------------------
   LIGHT MODE THEME COMPATIBILITY
   Keep existing light-mode architecture, but allow selected
   theme accent to remain visible.
   --------------------------------------------------------- */

body[data-appearance="light"] .brand,
body[data-appearance="light"] .eyebrow,
body[data-appearance="light"] .view-more,
body[data-appearance="light"] .status-chip,
body[data-appearance="light"] .result-footer,
body[data-appearance="light"] .home-footer {
  color:var(--accent) !important;
}

body[data-appearance="light"] .echo-ring {
  border-color:
    color-mix(
      in srgb,
      var(--accent) 27%,
      transparent
    ) !important;
}


/* =========================================================
   Footer placement refinement — 2026-09-13
   ========================================================= */

/* PAGE 1
   Keep the footer visually anchored near the bottom,
   centered and away from browser/device edges.
*/
.home-footer{
  left:50% !important;
  right:auto !important;
  bottom:calc(28px + env(safe-area-inset-bottom)) !important;

  transform:translateX(-50%) !important;

  width:calc(100% - 48px) !important;
  max-width:720px;

  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:12px !important;

  text-align:center !important;

  margin:0 !important;
}


/* PAGE 2
   Proper closing footer after Tafsir.
*/
.result-footer{
  width:100%;

  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:18px !important;

  text-align:center !important;

  margin-top:44px !important;
  padding:
    18px
    20px
    calc(30px + env(safe-area-inset-bottom))
    !important;

  border-top:1px solid var(--line-soft);
}


/* subtle separator between phrase and email */
.result-footer span::after{
  content:"·";
  margin-left:18px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  /* On the home screen keep contact at the bottom of
     the viewport rather than directly under the Try line. */
  .home-footer{
    position:absolute !important;

    bottom:calc(
      26px + env(safe-area-inset-bottom)
    ) !important;

    width:calc(100% - 36px) !important;

    flex-direction:column !important;
    gap:5px !important;

    font-size:9px !important;
    line-height:1.45;
    letter-spacing:.13em;

    text-align:center !important;
  }

  .home-footer span::after{
    display:none !important;
  }


  /* Result page footer should feel like a true ending,
     not something stuck to the bottom-left corner. */
  .result-footer{
    flex-direction:column !important;

    justify-content:center !important;
    align-items:center !important;

    gap:7px !important;

    margin-top:38px !important;

    padding:
      20px
      20px
      calc(34px + env(safe-area-inset-bottom))
      !important;

    text-align:center !important;
  }

  .result-footer span,
  .result-footer a{
    width:100%;
    text-align:center !important;
  }

  .result-footer span::after{
    display:none !important;
  }
}


/* =========================================================
   Mobile home footer refinement — 2026-09-13
   Desktop remains unchanged.
   ========================================================= */

@media(max-width:650px){

  .home-footer{
    bottom:calc(
      10px + env(safe-area-inset-bottom)
    ) !important;

    gap:3px !important;

    font-size:8px !important;
    letter-spacing:.12em !important;

    opacity:.52 !important;
  }

}



/* =========================================================
   EchoQuran Page 1 interaction states
   IDLE -> RECORDING -> PROCESSING
   ========================================================= */


/* ---------------------------------------------------------
   BASE / IDLE

   No ripples.
   Logo breathes slowly.
   --------------------------------------------------------- */

.echo-ring{
  border-radius:11% !important;
  opacity:0;
  animation:none !important;
}

body[data-view="home"]:not(.is-listening):not(.is-processing)
.logo-core{
  animation:eqIdleBreath 3.4s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   RECORDING

   Logo stops breathing.
   Existing warm recording colour remains.
   Rounded-square ripples propagate outward.
   --------------------------------------------------------- */

body.is-listening .logo-core{
  animation:none !important;
  transform:scale(1) !important;
}

body.is-listening .echo-ring{
  animation:eqSquareRipple 1.8s linear infinite !important;

  border-color:
    rgba(255,111,105,.30) !important;
}


/* Stagger the existing five squares */
body.is-listening .r1{
  animation-delay:0s !important;
}

body.is-listening .r2{
  animation-delay:.18s !important;
}

body.is-listening .r3{
  animation-delay:.36s !important;
}

body.is-listening .r4{
  animation-delay:.54s !important;
}

body.is-listening .r5{
  animation-delay:.72s !important;
}


/* ---------------------------------------------------------
   PROCESSING

   No ripples.
   Logo returns to selected theme colour.
   Faster breathing communicates active work.
   --------------------------------------------------------- */

body.is-processing .echo-ring{
  opacity:0 !important;
  animation:none !important;
}

body.is-processing .logo-core{
  animation:eqProcessingBreath .82s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes eqIdleBreath{
  0%,
  100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.045);
  }
}


@keyframes eqProcessingBreath{
  0%,
  100%{
    transform:scale(1);
    filter:
      drop-shadow(
        0 0 15px
        var(--theme-glow)
      );
  }

  50%{
    transform:scale(1.09);
    filter:
      drop-shadow(
        0 0 29px
        var(--theme-glow)
      );
  }
}


/*
   Each existing square grows slightly and fades.
   Because the five elements are already different sizes,
   the stagger produces the echo/propagation effect.
*/
@keyframes eqSquareRipple{
  0%{
    transform:scale(.82);
    opacity:0;
  }

  18%{
    opacity:.58;
  }

  70%{
    opacity:.22;
  }

  100%{
    transform:scale(1.18);
    opacity:0;
  }
}


/* ---------------------------------------------------------
   RED RECORDING LOGO
   Preserve our current warm-recording signal.
   --------------------------------------------------------- */

body.is-listening .eq-logo-svg{
  filter:
    brightness(0)
    saturate(100%)
    invert(62%)
    sepia(68%)
    saturate(2100%)
    hue-rotate(315deg)
    brightness(108%)
    contrast(98%)
    drop-shadow(
      0 0 17px
      rgba(255,111,105,.75)
    ) !important;
}


/* Processing explicitly returns logo to theme colour.
   Existing theme/filter rules remain authoritative. */
body.is-processing .eq-logo-svg{
  opacity:1;
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .logo-core,
  body.is-processing .logo-core{
    animation:none !important;
  }

  body.is-listening .echo-ring{
    animation:none !important;
    opacity:.22 !important;
  }
}


/* =========================================================
   VoiceToAyah — IDLE RECORD BUTTON AFFORDANCE
   Makes the central Q feel interactive without turning it
   into a conventional microphone / red record button.
   ========================================================= */

/* Soft interactive aura behind the Q */
body[data-view="home"]:not(.is-listening):not(.is-processing) .logo-core{
  position:relative;
  z-index:1;
  filter:
    drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 34%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 18%, transparent));
}

/* Diffuse glow behind the mark */
body[data-view="home"]:not(.is-listening):not(.is-processing) .logo-core::before{
  content:"";
  position:absolute;
  inset:50%;
  width:118px;
  height:118px;
  transform:translate(-50%,-50%) scale(.92);
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 10%, transparent) 36%,
      transparent 72%
    );
  filter:blur(10px);
  opacity:.82;
  pointer-events:none;
  z-index:-1;
  animation:eqIdleAura 3.4s ease-in-out infinite;
}

/* Make the whole interaction area clearly clickable */
body[data-view="home"] .listen-button{
  cursor:pointer;
}

/* Desktop invitation response */
@media (hover:hover) and (pointer:fine){
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:hover .logo-core{
    transform:scale(1.045);
    filter:
      drop-shadow(0 0 13px color-mix(in srgb, var(--accent) 48%, transparent))
      drop-shadow(0 0 34px color-mix(in srgb, var(--accent) 26%, transparent));
  }

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:hover .logo-core::before{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08);
  }
}

/* Tie the CTA visually to the central Q */
body[data-view="home"]:not(.is-listening):not(.is-processing) .listen-status{
  margin-top:-54px !important;
  color:var(--accent) !important;
  font-size:10px !important;
  font-weight:600;
  letter-spacing:2.1px;
  text-transform:uppercase;
}

/* Keep active/processing states free to use their own styling */
body.is-listening .logo-core::before,
body.is-processing .logo-core::before{
  display:none !important;
}

@keyframes eqIdleAura{
  0%,100%{
    opacity:.62;
    transform:translate(-50%,-50%) scale(.86);
  }
  50%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.06);
  }
}

@media(max-width:650px){
  body[data-view="home"]:not(.is-listening):not(.is-processing) .listen-status{
    margin-top:-46px !important;
    font-size:9px !important;
    letter-spacing:1.8px;
  }

  body[data-view="home"]:not(.is-listening):not(.is-processing) .logo-core::before{
    width:104px;
    height:104px;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-view="home"]:not(.is-listening):not(.is-processing) .logo-core::before{
    animation:none !important;
  }
}

/* VoiceToAyah — stronger desktop hover affordance */
@media (hover:hover) and (pointer:fine){

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button .logo-core::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:92px;
    height:92px;
    transform:translate(-50%,-50%) scale(.86);
    border:1px solid color-mix(in srgb, var(--accent) 0%, transparent);
    border-radius:18px;
    opacity:0;
    pointer-events:none;
    transition:
      opacity .28s ease,
      transform .35s cubic-bezier(.2,.8,.2,1),
      border-color .28s ease,
      box-shadow .35s ease;
  }

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:hover .logo-core::after{
    opacity:.72;
    transform:translate(-50%,-50%) scale(1);
    border-color:color-mix(in srgb, var(--accent) 42%, transparent);
    box-shadow:
      0 0 18px color-mix(in srgb, var(--accent) 12%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--accent) 5%, transparent);
  }

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:hover + .listen-status{
    color:#7ffff8 !important;
    text-shadow:0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
  }
}

/* =========================================================
   VoiceToAyah — PROCESSING QURAN FACTS
   ========================================================= */

.quran-fact-loader{
  display:none;
  width:min(430px,88vw);
  margin:-38px auto 0;
  text-align:center;
  pointer-events:none;
}

body.is-processing .quran-fact-loader.is-visible{
  display:block;
}

body.is-processing .try-line{
  opacity:0 !important;
  visibility:hidden;
}

body.is-processing .listen-status{
  margin-top:-50px !important;
  color:#8eaaaa !important;
  font-size:9px !important;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
}

.fact-kicker{
  margin-top:19px;
  margin-bottom:10px;
  color:var(--accent);
  font-size:8px;
  font-weight:700;
  letter-spacing:2.7px;
}

.quran-fact-text{
  min-height:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:2px;
  transition:opacity .38s ease, transform .38s ease;
}

.fact-chunk{
  display:block;
  opacity:0;
  transform:translateY(9px);
  color:rgba(230,245,244,.84);
  font-size:14px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.01em;
  transition:
    opacity .58s ease,
    transform .65s cubic-bezier(.2,.8,.2,1);
}

.fact-chunk.is-shown{
  opacity:1;
  transform:translateY(0);
}

.quran-fact-text.is-resetting{
  opacity:0;
  transform:translateY(-5px);
}

@media(max-width:650px){
  .quran-fact-loader{
    width:min(340px,90vw);
    margin:-32px auto 0;
  }

  body.is-processing .listen-status{
    margin-top:-43px !important;
    font-size:8px !important;
    letter-spacing:1.7px;
  }

  .fact-kicker{
    margin-top:16px;
    font-size:7px;
    letter-spacing:2.3px;
  }

  .fact-chunk{
    font-size:13px;
  }
}

@media(prefers-reduced-motion:reduce){
  .fact-chunk{
    transition:none !important;
    transform:none !important;
  }

  .quran-fact-text{
    transition:none !important;
  }
}

/* VoiceToAyah — processing loader spacing refinement */

body.is-processing .listen-status{
  margin-top:-34px !important;
  position:relative;
  z-index:2;
}

body.is-processing .quran-fact-loader{
  margin:14px auto 0 !important;
}

body.is-processing .fact-kicker{
  margin:0 0 13px !important;
}

@media(max-width:650px){

  body.is-processing .listen-status{
    margin-top:-30px !important;
  }

  body.is-processing .quran-fact-loader{
    margin:14px auto 0 !important;
  }

  body.is-processing .fact-kicker{
    margin:0 0 12px !important;
  }
}

/* VoiceToAyah — desktop processing fact refinement */
@media(min-width:651px){

  body.is-processing .listen-status{
    margin-top:-26px !important;
    font-size:10px !important;
    letter-spacing:2.2px;
  }

  body.is-processing .quran-fact-loader{
    margin:18px auto 0 !important;
    width:min(520px,72vw);
  }

  body.is-processing .fact-kicker{
    font-size:9px !important;
    letter-spacing:2.8px;
    margin-bottom:14px !important;
  }

  body.is-processing .fact-chunk{
    font-size:17px !important;
    line-height:1.5;
  }

  body.is-processing .quran-fact-text{
    min-height:88px;
    gap:3px;
  }
}

/* =========================================================
   VoiceToAyah — ACCESSIBLE TEXT SIZE
   Default = original approved typography.
   Large ≈ +15%
   Extra Large ≈ +30%
   ========================================================= */

.text-size-options{
  flex-wrap:wrap;
}

.text-size-options button{
  white-space:nowrap;
}

/* =========================================================
   LARGE
   ========================================================= */

/* What We Heard */
body[data-text-size="large"] .heard-arabic{
  font-size:23px;
}

/* Main Quran verse */
body[data-text-size="large"] .main-arabic{
  font-size:clamp(43px,4.7vw,67px);
}

/* Translation */
body[data-text-size="large"] .translation,
body[data-text-size="large"] .english,
body[data-text-size="large"] .urdu{
  font-size:17px;
  line-height:1.65;
}

/* Word by Word */
body[data-text-size="large"] .word-card b{
  font-size:30px;
}

body[data-text-size="large"] .word-card small{
  font-size:13px;
}

body[data-text-size="large"] .word-card span{
  font-size:14px;
  line-height:1.45;
}

/* Context / Tafsir */
#tafsirContent[dir="rtl"]{text-align:right;unicode-bidi:plaintext}
body[data-text-size="large"] .context-panel p,
body[data-text-size="large"] .context-dialog p,
body[data-text-size="large"] #tafsirContent{
  font-size:17px;
  line-height:1.7;
}

/* Multiple occurrences */
body[data-text-size="large"] .occurrence-row{
  font-size:13px;
}

body[data-text-size="large"] .occurrence-row span:nth-child(4){
  font-size:18px;
}

/* Section headings */
body[data-text-size="large"] .panel-title{
  font-size:18px;
}

/* Listen text */
body[data-text-size="large"] .listen-option strong{
  font-size:15px;
}

body[data-text-size="large"] .listen-option small{
  font-size:13px;
}

/* Processing facts */
body[data-text-size="large"] .fact-chunk{
  font-size:16px !important;
}


/* =========================================================
   EXTRA LARGE
   ========================================================= */

/* What We Heard */
body[data-text-size="xlarge"] .heard-arabic{
  font-size:26px;
}

/* Main Quran verse */
body[data-text-size="xlarge"] .main-arabic{
  font-size:clamp(48px,5.3vw,75px);
}

/* Translation */
body[data-text-size="xlarge"] .translation,
body[data-text-size="xlarge"] .english,
body[data-text-size="xlarge"] .urdu{
  font-size:20px;
  line-height:1.72;
}

/* Word by Word */
body[data-text-size="xlarge"] .word-card b{
  font-size:34px;
}

body[data-text-size="xlarge"] .word-card small{
  font-size:14px;
}

body[data-text-size="xlarge"] .word-card span{
  font-size:16px;
  line-height:1.5;
}

/* Context / Tafsir */
body[data-text-size="xlarge"] .context-panel p,
body[data-text-size="xlarge"] .context-dialog p,
body[data-text-size="xlarge"] #tafsirContent{
  font-size:20px;
  line-height:1.75;
}

/* Multiple occurrences */
body[data-text-size="xlarge"] .occurrence-row{
  font-size:15px;
}

body[data-text-size="xlarge"] .occurrence-row span:nth-child(4){
  font-size:21px;
}

/* Section headings */
body[data-text-size="xlarge"] .panel-title{
  font-size:20px;
}

/* Listen text */
body[data-text-size="xlarge"] .listen-option strong{
  font-size:17px;
}

body[data-text-size="xlarge"] .listen-option small{
  font-size:15px;
}

/* Processing facts */
body[data-text-size="xlarge"] .fact-chunk{
  font-size:18px !important;
}


/* =========================================================
   FLEXIBLE CONTENT HEIGHTS
   ========================================================= */

body[data-text-size="large"] .word-card,
body[data-text-size="xlarge"] .word-card{
  min-height:auto;
  height:auto;
}

body[data-text-size="large"] .occurrence-row,
body[data-text-size="xlarge"] .occurrence-row{
  min-height:auto;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  body[data-text-size="large"] .main-arabic{
    font-size:clamp(40px,6.9vw,56px);
  }

  body[data-text-size="xlarge"] .main-arabic{
    font-size:clamp(45px,7.8vw,64px);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

  /* Original mobile = 17px */
  body[data-text-size="large"] .heard-arabic{
    font-size:20px;
    line-height:1.7;
  }

  body[data-text-size="xlarge"] .heard-arabic{
    font-size:22px;
    line-height:1.75;
  }

  /* Original mobile = 31px */
  body[data-text-size="large"] .main-arabic{
    font-size:36px;
    line-height:1.85;
  }

  body[data-text-size="xlarge"] .main-arabic{
    font-size:40px;
    line-height:1.9;
  }

  /* Original mobile translation = 13px */
  body[data-text-size="large"] .translation,
  body[data-text-size="large"] .english,
  body[data-text-size="large"] .urdu{
    font-size:15px;
  }

  body[data-text-size="xlarge"] .translation,
  body[data-text-size="xlarge"] .english,
  body[data-text-size="xlarge"] .urdu{
    font-size:17px;
  }

  body[data-text-size="large"] .word-card{
    min-width:108px;
    padding:11px 10px;
  }

  body[data-text-size="xlarge"] .word-card{
    min-width:120px;
    padding:12px 11px;
  }

  body[data-text-size="large"] .word-card b{
    font-size:29px;
  }

  body[data-text-size="xlarge"] .word-card b{
    font-size:33px;
  }

  body[data-text-size="large"] .word-card span{
    font-size:13px;
  }

  body[data-text-size="xlarge"] .word-card span{
    font-size:15px;
  }

  body[data-text-size="large"] .context-panel p,
  body[data-text-size="large"] #tafsirContent{
    font-size:15px;
  }

  body[data-text-size="xlarge"] .context-panel p,
  body[data-text-size="xlarge"] #tafsirContent{
    font-size:17px;
  }

  body[data-text-size="large"] .occurrence-row{
    font-size:12px;
  }

  body[data-text-size="xlarge"] .occurrence-row{
    font-size:13px;
  }

  body[data-text-size="large"] .fact-chunk{
    font-size:15px !important;
  }

  body[data-text-size="xlarge"] .fact-chunk{
    font-size:17px !important;
  }

  .text-size-options{
    gap:5px;
  }

  .text-size-options button{
    padding-left:8px;
    padding-right:8px;
  }
}

/* =========================================================
   VoiceToAyah — Crystal Edge Prototype
   Edge treatment only; original panel surface preserved
   ========================================================= */

.word-panel{
  position:relative;
}

/* Refractive / polished glass rim */
.word-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;

  background:
    linear-gradient(
      145deg,
      rgba(235,255,253,.70) 0%,
      rgba(170,255,247,.30) 7%,
      rgba(70,220,210,.08) 24%,
      rgba(70,220,210,.05) 68%,
      rgba(225,255,252,.34) 92%,
      rgba(255,255,255,.58) 100%
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;

  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;

  opacity:.72;
}

/* Tiny internal glass catch-light */
.word-panel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 1px 0 0 rgba(255,255,255,.035);
}


/* =========================================================
   VoiceToAyah — Crystal Glass Controls
   Large panels remain unchanged.
   ========================================================= */

.surah-number,
.nav-circle,
.play-circle,
.word-card,
.listen-option,
.listen-option-icon{
  position:relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,.022) 28%,
      rgba(255,255,255,.006) 58%,
      rgba(0,0,0,.025) 100%
    ),
    color-mix(
      in srgb,
      var(--surface-soft) 88%,
      transparent
    );

  border-color:
    color-mix(
      in srgb,
      var(--accent) 36%,
      rgba(255,255,255,.20)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 5px 18px rgba(0,0,0,.11),
    0 0 12px var(--theme-glow-soft);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* ---------------------------------------------------------
   Stronger crystal rim for interactive controls
   --------------------------------------------------------- */

.nav-circle,
.play-circle,
.word-card,
.listen-option{
  overflow:hidden;
}

.nav-circle::before,
.play-circle::before,
.word-card::before,
.listen-option::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.32) 0%,
      rgba(180,255,249,.12) 12%,
      transparent 34%,
      transparent 74%,
      rgba(180,255,249,.08) 92%,
      rgba(255,255,255,.18) 100%
    );

  opacity:.78;
}


/* ---------------------------------------------------------
   Surah number — slightly more jewel-like
   --------------------------------------------------------- */

.surah-number{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 6px 20px rgba(0,0,0,.12),
    0 0 16px var(--theme-glow-soft);
}


/* ---------------------------------------------------------
   Word cards
   Preserve existing 130% desktop hover
   --------------------------------------------------------- */

@media (hover:hover) and (pointer:fine){
  .word-card:hover{
    border-color:
      color-mix(
        in srgb,
        var(--accent) 75%,
        white 18%
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 1px 0 0 rgba(255,255,255,.10),
      0 10px 30px var(--theme-glow-soft),
      0 0 18px var(--theme-glow-soft);
  }
}


/* ---------------------------------------------------------
   Previous / Play / Next
   Central play button receives slightly stronger glass
   --------------------------------------------------------- */

.play-circle{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 1px 0 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 7px 22px rgba(0,0,0,.14),
    0 0 18px var(--theme-glow-soft);
}


/* ---------------------------------------------------------
   Listen cards
   --------------------------------------------------------- */

.listen-option{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 5px 16px rgba(0,0,0,.09);
}

.listen-option-icon{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.06),
    0 0 14px var(--theme-glow-soft);
}


/* =========================================================
   VoiceToAyah — Crystal Controls Refinement
   ========================================================= */


/* ---------------------------------------------------------
   Settings + Context search controls
   --------------------------------------------------------- */

.icon-button,
.panel-icon{
  position:relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,.022) 30%,
      rgba(255,255,255,.006) 60%,
      rgba(0,0,0,.025) 100%
    ),
    color-mix(
      in srgb,
      var(--surface-soft) 88%,
      transparent
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--accent) 38%,
      rgba(255,255,255,.20)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 5px 18px rgba(0,0,0,.10),
    0 0 14px var(--theme-glow-soft);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* ---------------------------------------------------------
   Fix enlarged Word-by-Word glow clipping

   Extra breathing room exists inside the scroll viewport,
   so the 130% hover and its shadow are not hard-cropped.
   --------------------------------------------------------- */

@media (hover:hover) and (pointer:fine){

  .word-scroll{
    padding-top:34px;
    padding-bottom:34px;
    margin-top:-3px;
    margin-bottom:-16px;
  }

  .word-card{
    overflow:visible;
  }

}


/* Restore Context magnifier positioning after glass treatment */
.panel-icon{
  position:absolute !important;
  right:16px !important;
  top:14px !important;
}


/*
   Quran Foundation's documented Unicode rendering for Mushaf 3 / IndoPak.
   These are runtime CDN assets, not bundled font files.  Regular IndoPak
   words use the IndoPak Nastaleeq face; QF documents UthmanicHafs for the
   char_type_name="end" verse-marker records.
*/
@font-face{
  font-family:"VoiceToAyah IndoPak";
  src:url("https://verses.quran.foundation/fonts/quran/hafs/nastaleeq/indopak/indopak-nastaleeq-waqf-lazim-v4.2.1.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"VoiceToAyah UthmanicHafs";
  src:url("https://verses.quran.foundation/fonts/quran/hafs/uthmanic_hafs/UthmanicHafs1Ver18.woff2") format("woff2");
  font-display:swap;
}

/* Quran reader overlay: quiet page surface; glass remains limited to controls. */
.reader-open-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:9px;
  min-height:30px;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#effffc;
  background:linear-gradient(135deg,rgba(76,238,224,.26),color-mix(in srgb,var(--surface) 72%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 20px var(--theme-glow-soft);
  font:600 10px/1 system-ui,sans-serif;
  letter-spacing:.04em;
  cursor:pointer;
}
.reader-open-button:not(:disabled):hover,
.reader-open-button:not(:disabled):focus-visible{
  border-color:#b8fff7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 8px 24px rgba(1,218,200,.25);
  transform:translateY(-1px);
}
.reader-open-row{
  display:flex;
  justify-content:center;
  margin:clamp(14px,2vw,22px) 0 4px;
}
.reader-open-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.quran-reader-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,8,10,.78);
}
.quran-reader-modal.open{display:flex}
body.reader-open{overflow:hidden}
.quran-reader-dialog{
  width:min(960px,100%);
  height:min(920px,calc(100dvh - 32px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#071416;
  box-shadow:0 24px 70px rgba(0,0,0,.48);
}
.quran-reader-header,.quran-reader-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border-color:var(--line-soft);
}
.quran-reader-header{border-bottom:1px solid var(--line-soft)}
.quran-reader-header h3{margin:3px 0 0;font-size:20px;font-weight:600}
.reader-header-actions{display:flex;align-items:center;gap:10px}
.reader-appearance-toggle{
  display:inline-flex;
  padding:3px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}
.reader-appearance-button{
  min-height:28px;
  border:0;
  border-radius:999px;
  padding:5px 10px;
  color:var(--theme-muted);
  background:transparent;
  font:600 11px/1 system-ui,sans-serif;
  cursor:pointer;
}
.reader-appearance-button[aria-pressed="true"]{color:#061516;background:var(--accent)}
.reader-audio-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.reader-audio-mode{display:flex;align-items:center;gap:4px;padding:3px 4px;border:1px solid var(--line-soft);border-radius:9px}
.reader-audio-label{padding:0 2px;color:var(--muted);font:700 10px/1 system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.reader-audio-button{min-height:32px;padding:5px 8px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.06);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.reader-audio-primary{min-width:78px}
.reader-audio-button:not(:disabled):hover,.reader-audio-button:not(:disabled):focus-visible{border-color:rgba(159,255,246,.78);background:rgba(40,153,150,.2)}
.reader-audio-button:disabled{opacity:.45;cursor:not-allowed}
.quran-reader-footer{border-top:1px solid var(--line-soft)}
.reader-control{
  min-height:36px;
  padding:7px 12px;
  border:1px solid rgba(99,239,227,.38);
  border-radius:11px;
  color:var(--text);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(33,121,121,.12));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px var(--theme-glow-soft);
  cursor:pointer;
}
.reader-control:not(:disabled):hover,
.reader-control:not(:disabled):focus-visible{
  border-color:rgba(159,255,246,.78);
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(40,153,150,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 6px 18px rgba(0,224,205,.14);
}
.reader-control:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.reader-close{font-size:24px;line-height:1;padding:2px 11px}
.quran-reader-status{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  min-height:0;
  padding:24px;
  color:var(--theme-muted);
  font-size:13px;
  text-align:center;
  background:linear-gradient(180deg,rgba(3,19,21,.90),rgba(5,28,29,.94));
  pointer-events:none;
}
.quran-reader-status::before{
  content:"";
  width:24px;
  height:24px;
  border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:reader-loading-spin .8s linear infinite;
}
.quran-reader-status[hidden]{display:none}
.quran-reader-surface{
  position:relative;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:clamp(24px,4vw,48px) clamp(24px,5vw,64px);
  touch-action:pan-y;
  background:linear-gradient(180deg,rgba(3,19,21,.96),rgba(5,28,29,.98));
}
.quran-reader-lines{
  width:min(760px,100%);
  margin:0 auto;
  color:#f0f5e9;
  font-family:"VoiceToAyah IndoPak",var(--arabic-verse-font);
  font-size:clamp(24px,3.15vw,40px);
  line-height:1.92;
  text-align:right;
}
.quran-reader-surface.reader-loading-navigation .quran-reader-status,
.quran-reader-surface.reader-loading-failure-navigation .quran-reader-status,
.quran-reader-surface.reader-status-compact .quran-reader-status{
  position:sticky;
  inset:auto;
  top:14px;
  display:flex;
  align-items:center;
  width:max-content;
  max-width:calc(100% - 28px);
  margin:14px 14px 0 auto;
  padding:8px 11px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(3,19,21,.88);
  box-shadow:0 6px 20px rgba(0,0,0,.24);
}
.quran-reader-surface.reader-loading-navigation .quran-reader-status::before,
.quran-reader-surface.reader-loading-failure-navigation .quran-reader-status::before{
  width:13px;
  height:13px;
  flex:none;
}
.quran-reader-surface.reader-loading-failure-initial .quran-reader-status::before,
.quran-reader-surface.reader-loading-failure-navigation .quran-reader-status::before,
.quran-reader-surface.reader-status-compact .quran-reader-status::before{
  width:0;
  height:0;
  border:0;
  animation:none;
}
@keyframes reader-loading-spin{to{transform:rotate(360deg)}}
.quran-reader-line{min-height:1.92em;white-space:normal;overflow-wrap:anywhere}
.quran-reader-word{display:inline-block;margin-inline-start:.18em}
.quran-reader-end{
  color:var(--accent);
  font-family:"VoiceToAyah UthmanicHafs","Traditional Arabic",serif;
  font-size:.88em;
  margin-inline-start:.30em;
}
.quran-reader-surah-transition{
  width:100%;
  margin:clamp(18px,3vh,32px) 0 clamp(8px,1.5vh,16px);
  color:var(--accent);
  direction:ltr;
  font:700 10px/1.2 system-ui,sans-serif;
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
}
.quran-reader-page{color:var(--theme-muted);font-size:12px;letter-spacing:.04em}
.quran-reader-surface.reader-page-exit-next,
.quran-reader-surface.reader-page-enter-next,
.quran-reader-surface.reader-page-exit-previous,
.quran-reader-surface.reader-page-enter-previous{will-change:transform,opacity}
.quran-reader-surface.reader-page-exit-next{animation:reader-page-exit-next 170ms ease-in both}
.quran-reader-surface.reader-page-exit-previous{animation:reader-page-exit-previous 170ms ease-in both}
.quran-reader-surface.reader-page-enter-next{animation:reader-page-enter-next 210ms ease-out both}
.quran-reader-surface.reader-page-enter-previous{animation:reader-page-enter-previous 210ms ease-out both}
@keyframes reader-page-exit-next{to{opacity:.32;transform:perspective(1200px) translateX(-18px) translateY(-2px) rotateY(1.1deg) scale(.992)}}
@keyframes reader-page-exit-previous{to{opacity:.32;transform:perspective(1200px) translateX(18px) translateY(-2px) rotateY(-1.1deg) scale(.992)}}
@keyframes reader-page-enter-next{from{opacity:.32;transform:translateX(14px) translateY(2px) scale(.994)}to{opacity:1;transform:none}}
@keyframes reader-page-enter-previous{from{opacity:.32;transform:translateX(-14px) translateY(2px) scale(.994)}to{opacity:1;transform:none}}

/* Reader-only appearance; these values never change the application theme. */
.quran-reader-dialog[data-reader-appearance="paper"]{
  border-color:#d7c69f;
  background:#f4eddd;
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  color:#20271f;
}
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-header,
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-footer{border-color:#d7c69f}
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-surface{
  background:linear-gradient(180deg,#f7f5ed,#ece9de);
}
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-lines{color:#18231c}
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-page,
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-status{color:#5b624d}
.quran-reader-dialog[data-reader-appearance="paper"] .reader-control,
.quran-reader-dialog[data-reader-appearance="paper"] .reader-appearance-toggle{
  border-color:#c9b889;
  color:#384331;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(234,238,228,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 3px 10px rgba(71,80,63,.10);
}
.quran-reader-dialog[data-reader-appearance="paper"] .reader-audio-button{border-color:#c9b889;background:rgba(255,255,255,.5);color:#59614e}
.quran-reader-dialog[data-reader-appearance="paper"] .reader-appearance-button{color:#59614e}
.quran-reader-dialog[data-reader-appearance="paper"] .reader-appearance-button[aria-pressed="true"]{color:#12332f;background:#8bd8cf}

/* Desktop centers a deliberate reading sheet; compact heights retain vertical reading. */
@media(min-width:651px){
  .quran-reader-modal{padding:12px}
  .quran-reader-dialog{height:calc(100dvh - 24px);max-height:940px}
  .quran-reader-surface{
    padding:clamp(18px,3vh,34px) clamp(22px,4vw,58px);
  }
  .quran-reader-lines{
    font-size:clamp(20px,2.75vh,30px);
    line-height:1.78;
  }
  .quran-reader-line{min-height:1.78em}
}

@media(max-width:650px){
  .quran-reader-modal{padding:0}
  .quran-reader-dialog{width:100%;height:100dvh;border-radius:0;border-inline:0}
  .quran-reader-header,.quran-reader-footer{padding:13px 20px}
  .quran-reader-surface{padding:28px 22px 38px}
  .quran-reader-lines{font-size:clamp(22px,7vw,31px);line-height:2.05}
  .reader-open-button{font-size:9px;padding:5px 8px}
  .reader-header-actions{gap:7px}
  .reader-appearance-button{padding-inline:8px}
}

@media(prefers-reduced-motion:reduce){
  .quran-reader-modal,.quran-reader-dialog{transition:none}
  .quran-reader-status::before{animation:none}
}

/* ============================================================
   VoiceToAyah Quran Reader — post-deployment visual refinement
   2026-09-15
   CSS only. No reader behavior/navigation changes.
   ============================================================ */

/* Surah boundary: restrained Mushaf-like divider. */
.quran-reader-surah-transition{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:clamp(24px,3.5vh,38px) 0 clamp(14px,2vh,22px);
  color:var(--accent);
  direction:ltr;
  font:600 11px/1 system-ui,sans-serif;
  letter-spacing:.08em;
  text-align:center;
  text-transform:none;
}

.quran-reader-surah-transition::before,
.quran-reader-surah-transition::after{
  content:"";
  width:clamp(34px,7vw,74px);
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--accent) 52%,transparent)
  );
}

.quran-reader-surah-transition::after{
  transform:scaleX(-1);
}

/* Guarantee breathing room after the final Quran line. */
.quran-reader-lines{
  padding-bottom:clamp(34px,5vh,58px);
}

/* Desktop: let the Quran occupy more of the available sheet. */
@media(min-width:651px){
  .quran-reader-surface{
    padding-inline:clamp(20px,3vw,42px);
  }

  .quran-reader-lines{
    width:min(820px,100%);
    font-size:clamp(22px,2.9vh,32px);
    line-height:1.82;
  }

  .quran-reader-line{
    min-height:1.82em;
  }
}

/* Mobile keeps its established 22px side safety. */
@media(max-width:650px){
  .quran-reader-lines{
    padding-bottom:56px;
  }
}

/* Paper mode keeps the divider quiet rather than neon. */
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-surah-transition{
  color:#4e8179;
}

.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-surah-transition::before,
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-surah-transition::after{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(78,129,121,.38)
  );
}


/* ============================================================
   VoiceToAyah Quran Reader — Refinement 2
   Surah metadata + centered lines + reader text-size controls
   ============================================================ */

.quran-reader-line{
  text-align:center;
  direction:rtl;
}

.quran-reader-surah-transition{
  flex-wrap:wrap;
  direction:ltr;
}

.quran-reader-surah-number{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  width:100%;
  font:600 11px/1 system-ui,sans-serif;
  letter-spacing:.08em;
}

.quran-reader-surah-number::before,
.quran-reader-surah-number::after{
  content:"";
  width:clamp(34px,7vw,74px);
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb,var(--accent) 52%,transparent)
  );
}

.quran-reader-surah-number::after{
  transform:scaleX(-1);
}

.quran-reader-surah-transition::before,
.quran-reader-surah-transition::after{
  display:none;
}

.quran-reader-surah-name{
  display:block;
  width:100%;
  margin-top:1px;
  color:var(--text);
  font:600 14px/1.3 system-ui,sans-serif;
  letter-spacing:.01em;
  text-align:center;
}

.reader-size-toggle{
  display:inline-flex;
  padding:3px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}

.reader-size-button{
  min-height:28px;
  padding:4px 9px;
  border:0;
  border-radius:999px;
  color:var(--theme-muted);
  background:transparent;
  font:600 11px/1 system-ui,sans-serif;
  cursor:pointer;
}

.reader-size-button[aria-pressed="true"]{
  color:#061516;
  background:var(--accent);
}

@media(min-width:651px){
  .quran-reader-dialog[data-reader-size="default"] .quran-reader-lines{
    font-size:clamp(22px,2.9vh,32px);
  }

  .quran-reader-dialog[data-reader-size="large"] .quran-reader-lines{
    font-size:clamp(25px,3.25vh,36px);
  }

  .quran-reader-dialog[data-reader-size="larger"] .quran-reader-lines{
    font-size:clamp(28px,3.65vh,40px);
  }
}

@media(max-width:650px){
  .quran-reader-header{
    align-items:flex-start;
  }

  .reader-header-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .reader-size-button{
    font-size:0;
    min-width:31px;
    padding-inline:7px;
  }

  .reader-size-button::after{
    font-size:11px;
  }

  #readerSizeDefault::after{content:"A";}
  #readerSizeLarge::after{content:"A+";}
  #readerSizeLarger::after{content:"A++";}

  .quran-reader-dialog[data-reader-size="default"] .quran-reader-lines{
    font-size:clamp(22px,7vw,31px);
  }

  .quran-reader-dialog[data-reader-size="large"] .quran-reader-lines{
    font-size:clamp(25px,7.8vw,35px);
  }

  .quran-reader-dialog[data-reader-size="larger"] .quran-reader-lines{
    font-size:clamp(28px,8.7vw,39px);
  }
}

@media(max-width:650px){
  .reader-header-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .reader-audio-controls{order:3;width:100%;justify-content:flex-end}
  .reader-audio-mode{gap:3px}
  .reader-audio-label{font-size:9px}
  .reader-audio-button{padding:4px 7px;font-size:11px}
}

.quran-reader-dialog[data-reader-appearance="paper"] .reader-size-toggle{
  border-color:#c9b889;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,.72),
    rgba(234,238,228,.58)
  );
}

.quran-reader-dialog[data-reader-appearance="paper"] .reader-size-button{
  color:#59614e;
}

.quran-reader-dialog[data-reader-appearance="paper"] .reader-size-button[aria-pressed="true"]{
  color:#12332f;
  background:#8bd8cf;
}

.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-surah-name{
  color:#29372e;
}


/* ============================================================
   VoiceToAyah Quran Reader — Refinement 3
   Stable viewport + permanently accessible page navigation
   ============================================================ */

.quran-reader-dialog{
  max-height:calc(100dvh - 24px);
  min-height:0;
}

.quran-reader-header,
.quran-reader-footer{
  flex-shrink:0;
  position:relative;
  z-index:3;
  background:#071416;
}

.quran-reader-surface{
  min-height:0;
  overscroll-behavior:contain;
}

.quran-reader-footer{
  min-height:62px;
}

.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-header,
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-footer{
  background:#f4eddd;
}

@media(min-width:651px){
  .quran-reader-dialog{
    height:min(940px,calc(100dvh - 24px));
  }
}

@media(max-width:650px){
  .quran-reader-dialog{
    height:100dvh;
    max-height:100dvh;
  }

  .quran-reader-footer{
    min-height:58px;
  }
}


/* ============================================================
   VoiceToAyah Quran Reader — Surah Reader prototype
   One Surah per reading surface; physical pages are internal.
   ============================================================ */

.quran-reader-surah-reader-heading{
  margin-top:6px;
  margin-bottom:clamp(20px,3vh,34px);
}

.quran-reader-footer .reader-control{
  min-width:132px;
}

@media(max-width:650px){
  .quran-reader-footer .reader-control{
    min-width:0;
    padding-inline:9px;
    font-size:11px;
  }
}

/* ============================================================
   VoiceToAyah Surah Reader V1.2
   Keep Reader chrome fixed; only Quran surface scrolls.
   ============================================================ */

.quran-reader-dialog{
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
}

.quran-reader-header,
.quran-reader-footer{
  min-width:0;
  position:relative;
  z-index:5;
}

.quran-reader-surface{
  min-width:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior-y:contain;
}

.quran-reader-lines{
  min-height:0;
}

.quran-reader-footer{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:62px;
  margin:0;
  position:relative;
  inset:auto;
}

@media(max-width:650px){
  .quran-reader-footer{
    min-height:58px;
  }
}


/* ============================================================
   VoiceToAyah Surah Reader V1.3
   Hard grid containment: header/footer can never be displaced
   by Quran content length.
   ============================================================ */

.quran-reader-dialog{
  min-height:0;
  grid-template-rows:max-content minmax(0,1fr) max-content;
}

.quran-reader-header{
  grid-row:1;
}

.quran-reader-surface{
  grid-row:2;
  min-height:0;
  max-height:100%;
  overflow:auto hidden;
  contain:size layout;
}

.quran-reader-footer{
  grid-row:3;
  min-height:62px;
  max-height:72px;
  overflow:hidden;
  align-self:stretch;
}

@media(max-width:650px){
  .quran-reader-footer{
    min-height:58px;
    max-height:68px;
  }
}


/* ============================================================
   VoiceToAyah Surah Reader V1.3a
   Restore native vertical scrolling while retaining pinned chrome.
   ============================================================ */

.quran-reader-surface{
  min-height:0;
  max-height:none;
  overflow-y:auto;
  overflow-x:hidden;
  contain:none;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}


/* ============================================================
   VoiceToAyah Surah Reader — Paper-mode accent refinement
   Scoped strictly to the Quran Reader.
   ============================================================ */

.quran-reader-dialog[data-reader-appearance="paper"]{
  --accent:#168f8a;
}

.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-end,
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-surah-transition,
.quran-reader-dialog[data-reader-appearance="paper"] .quran-reader-page{
  color:#168f8a;
}

.quran-reader-dialog[data-reader-appearance="paper"] .reader-appearance-button[aria-pressed="true"],
.quran-reader-dialog[data-reader-appearance="paper"] .reader-size-button[aria-pressed="true"]{
  color:#f7f5ed;
  background:#168f8a;
}


/* Home Surah browser: a bounded surface above the unchanged recording view. */
.browse-surahs-trigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  min-height:34px;
  padding:7px 15px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,transparent);
  border-radius:999px;
  color:#d9fffb;
  background:rgba(8,39,40,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  font:600 12px/1.1 system-ui,sans-serif;
  letter-spacing:.03em;
  cursor:pointer;
}
.browse-surahs-trigger:hover,
.browse-surahs-trigger:focus-visible{
  border-color:var(--accent);
  background:rgba(20,76,75,.72);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 23%,transparent);
}
.surah-browser-modal{
  position:fixed;
  inset:0;
  z-index:118;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(0,8,10,.78);
}
.surah-browser-modal.open{display:flex}
body.surah-browser-open{overflow:hidden}
.surah-browser-dialog{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  width:min(680px,100%);
  height:min(720px,calc(100dvh - 36px));
  min-height:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:22px;
  background:#071416;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.surah-browser-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
}
.surah-browser-header h2{margin:3px 0 0;font-size:20px;font-weight:600}
.surah-browser-close,
.surah-browser-retry{
  border:1px solid rgba(99,239,227,.38);
  color:#d9fffb;
  background:rgba(255,255,255,.07);
  cursor:pointer;
}
.surah-browser-close{
  min-width:36px;
  min-height:36px;
  border-radius:50%;
  font-size:24px;
  line-height:1;
}
.surah-browser-retry{
  min-height:34px;
  padding:7px 15px;
  border-radius:999px;
  font:600 12px/1 system-ui,sans-serif;
}
.surah-browser-close:focus-visible,
.surah-browser-retry:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);
  outline-offset:2px;
}
.surah-browser-status{
  padding:11px 20px;
  color:var(--theme-muted);
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  text-align:center;
}
.surah-browser-failure{
  padding:30px 22px;
  text-align:center;
}
.surah-browser-failure p{margin:0 0 14px;color:var(--theme-muted)}
.surah-browser-list{
  min-height:0;
  margin:0;
  padding:8px 12px 20px;
  overflow-y:auto;
  overflow-x:hidden;
  list-style:none;
  scrollbar-gutter:stable;
}
.surah-browser-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:12px 10px;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
}
.surah-browser-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);
  border-radius:50%;
  color:var(--accent);
  font:600 12px/1 system-ui,sans-serif;
}
.surah-browser-names{display:grid;min-width:0;gap:2px}
.surah-browser-arabic{
  overflow:hidden;
  color:#f0f5e9;
  font-family:"VoiceToAyah IndoPak",var(--arabic-font),serif;
  font-size:23px;
  line-height:1.25;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.surah-browser-english{
  overflow:hidden;
  color:var(--theme-muted);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.surah-browser-count{
  color:var(--theme-muted);
  font-size:11px;
  text-align:right;
  white-space:nowrap;
}
@media(max-width:650px){
  .surah-browser-modal{padding:0}
  .surah-browser-dialog{width:100%;height:100dvh;border-radius:0;border-inline:0}
  .surah-browser-header{padding:14px 18px}
  .surah-browser-list{padding-inline:10px}
  .surah-browser-row{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding-inline:6px}
  .surah-browser-arabic{font-size:21px}
  .surah-browser-count{font-size:10px}
}

/* =========================================================
   VoiceToAyah — FINAL RECORDING ECHO
   Three square echoes only.
   Relative strength: 100% / 65% / 35%.
   Each continuously dissipates to zero while expanding.
   ========================================================= */

body.is-listening .r1{
  --ripple-opacity:1;
}

body.is-listening .r2{
  --ripple-opacity:.65;
}

body.is-listening .r3{
  --ripple-opacity:.35;
}

body.is-listening .r4,
body.is-listening .r5{
  display:none !important;
}

@keyframes eqSquareRipple{
  0%{
    transform:scale(.82);
    opacity:var(--ripple-opacity,1);
  }

  25%{
    opacity:calc(var(--ripple-opacity,1) * .75);
  }

  50%{
    opacity:calc(var(--ripple-opacity,1) * .50);
  }

  75%{
    opacity:calc(var(--ripple-opacity,1) * .25);
  }

  100%{
    transform:scale(1.18);
    opacity:0;
  }
}

/* Android v1.1 circular VoiceToAyah logo refresh */

.listen-button .logo-core {
  width: 94px;
  height: 94px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listen-button .eq-logo-static,
.listen-button .eq-logo-animated {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.listen-button .eq-logo-static {
  opacity: 1;
  visibility: visible;
}

.listen-button .eq-logo-animated {
  opacity: 0;
  visibility: hidden;
}

/* Idle: static mark gently breathes. */
body:not(.is-listening):not(.is-processing) .listen-button .logo-core {
  animation: v2aLogoBreathe 3.2s ease-in-out infinite;
}

/* Recording + processing use the animated WebP. */
body.is-listening .listen-button .eq-logo-static,
body.is-processing .listen-button .eq-logo-static {
  opacity: 0;
  visibility: hidden;
}

body.is-listening .listen-button .eq-logo-animated,
body.is-processing .listen-button .eq-logo-animated {
  opacity: 1;
  visibility: visible;
}

/* Do not add CSS breathing on top of the animated asset. */
body.is-listening .listen-button .logo-core,
body.is-processing .listen-button .logo-core {
  animation: none;
  transform: scale(1);
}

/*
 * Circular echo waves.
 * Existing five ring elements are reused.
 * Hidden while idle and while processing.
 */
.listen-button .echo-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 118px;
  margin: 0;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.68);
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.84);
  animation: none !important;
}

/* Ripples belong only to active microphone recording. */
body.is-listening .listen-button .echo-ring {
  animation: v2aCircularEcho 2.5s ease-out infinite !important;
}

body.is-listening .listen-button .echo-ring.r1 { animation-delay: 0s !important; }
body.is-listening .listen-button .echo-ring.r2 { animation-delay: .5s !important; }
body.is-listening .listen-button .echo-ring.r3 { animation-delay: 1s !important; }
body.is-listening .listen-button .echo-ring.r4 { animation-delay: 1.5s !important; }
body.is-listening .listen-button .echo-ring.r5 { animation-delay: 2s !important; }

/* Processing: animated logo remains active, recording echoes stop. */
body.is-processing .listen-button .echo-ring {
  opacity: 0 !important;
  animation: none !important;
}

@keyframes v2aLogoBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.055);
  }
}

@keyframes v2aCircularEcho {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }
  14% {
    opacity: 0.62;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.is-listening):not(.is-processing) .listen-button .logo-core,
  body.is-listening .listen-button .echo-ring {
    animation: none !important;
  }

  body.is-listening .listen-button .echo-ring {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(1.35);
  }
}


/* Android v1.1 interactive logo glow */

/* Idle: inviting but restrained. */
body:not(.is-listening):not(.is-processing)
.listen-button .eq-logo-static {
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.26))
    drop-shadow(0 0 15px rgba(94, 235, 225, 0.18));
}

/* Listening: visibly brighter while microphone is active. */
body.is-listening
.listen-button .eq-logo-animated {
  filter:
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.48))
    drop-shadow(0 0 22px rgba(94, 235, 225, 0.40))
    drop-shadow(0 0 34px rgba(94, 235, 225, 0.18));
}

/* Processing: return to the quieter glow. */
body.is-processing
.listen-button .eq-logo-animated {
  filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.26))
    drop-shadow(0 0 15px rgba(94, 235, 225, 0.18));
}

@media (prefers-reduced-motion: reduce) {
  body.is-listening
  .listen-button .eq-logo-animated {
    filter:
      drop-shadow(0 0 9px rgba(255, 255, 255, 0.42))
      drop-shadow(0 0 20px rgba(94, 235, 225, 0.34));
  }
}

/* Web v1.1 Page-1 logo polish — Web only */
.listen-button .logo-core {
  width: 108px;
  height: 108px;
}

/* Slightly stronger idle invitation glow. */
body:not(.is-listening):not(.is-processing)
.listen-button .eq-logo-static {
  filter:
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 20px rgba(94, 235, 225, 0.26))
    drop-shadow(0 0 30px rgba(94, 235, 225, 0.10));
}

/* Web v1.1 — circular hover affordance for round VoiceToAyah control */
@media (hover:hover) and (pointer:fine) {
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button .logo-core::after {
    border-radius: 50%;
  }
}

/* Web v1.1 — stable Page-1 interaction anchor */
body[data-view="home"] .listen-button {
  transform: translateY(-32px);
}

/* Keep the CTA visually attached to the newly anchored control. */
body[data-view="home"] .listen-status {
  transform: translateY(-32px);
}

/* Web v1.1 — keep recording control visually anchored across state reflow */

/* Recording: compensate for measured 16.5px upward flex re-centering. */
body[data-view="home"].is-listening .listen-button {
  transform: translateY(-15.5px);
}

body[data-view="home"].is-listening .listen-status {
  transform: translateY(-15.5px);
}

/* Processing: compensate for measured 61.5px upward flex re-centering. */
body[data-view="home"].is-processing .listen-button {
  transform: translateY(29.5px);
}

body[data-view="home"].is-processing .listen-status {
  transform: translateY(29.5px);
}

/* Web v1.1 — preserve logo visual continuity from recording to processing */
body.is-processing .listen-button .eq-logo-animated {
  filter:
    drop-shadow(0 0 9px rgba(255, 255, 255, 0.48))
    drop-shadow(0 0 22px rgba(94, 235, 225, 0.40))
    drop-shadow(0 0 34px rgba(94, 235, 225, 0.18));
}

/* Web v1.1 — processing text remains in normal flow below anchored logo */
body[data-view="home"].is-processing .listen-status {
  transform: none;
}
\n\n/* =========================================================\n   VoiceToAyah Web 1.11 — Page 1 physical record control\n   Presentation only. Existing recording/search hooks remain intact.\n   ========================================================= */\nbody[data-view="home"] .home-view{\n  justify-content:flex-start;\n  padding-top:clamp(82px,12vh,126px);\n}\nbody[data-view="home"] .hero-copy{\n  margin-bottom:clamp(18px,3vh,30px);\n}\nbody[data-view="home"] .hero-copy .eyebrow{font-size:8px;letter-spacing:2.2px;opacity:.62}\nbody[data-view="home"] .hero-copy h1{font-size:clamp(26px,4vw,42px);line-height:1.02;margin:.25em 0 .3em}\nbody[data-view="home"] .hero-copy p{font-size:12px;opacity:.68}\n\nbody[data-view="home"] .listen-status{\n  order:initial;\n  transform:none !important;\n  margin:0 0 18px !important;\n  min-height:34px;\n  font-size:clamp(16px,2.2vw,23px) !important;\n  line-height:1.15;\n  font-weight:800 !important;\n  letter-spacing:2.8px !important;\n  text-transform:uppercase;\n  color:rgba(229,247,244,.82) !important;\n  text-shadow:0 0 18px rgba(255,255,255,.08);\n}\n\nbody[data-view="home"] .listen-button{\n  position:relative;\n  width:clamp(154px,18vw,178px);\n  height:clamp(154px,18vw,178px);\n  min-width:154px;\n  min-height:154px;\n  border-radius:50%;\n  border:1px solid rgba(255,255,255,.22);\n  transform:none !important;\n  overflow:visible;\n  cursor:pointer;\n  background:\n    radial-gradient(circle at 35% 25%,rgba(255,255,255,.25),transparent 27%),\n    linear-gradient(145deg,#38c987 0%,#159f65 52%,#087747 100%);\n  box-shadow:\n    inset 0 3px 4px rgba(255,255,255,.22),\n    inset 0 -9px 13px rgba(0,45,27,.42),\n    0 8px 0 #075b38,\n    0 14px 20px rgba(0,0,0,.38),\n    0 0 34px rgba(42,210,139,.16);\n  transition:transform .1s ease,box-shadow .1s ease,background .18s ease,filter .18s ease;\n}\nbody[data-view="home"] .listen-button:active{\n  transform:translateY(5px) !important;\n  box-shadow:inset 0 3px 5px rgba(255,255,255,.17),inset 0 -5px 9px rgba(0,45,27,.42),0 3px 0 #075b38,0 7px 12px rgba(0,0,0,.34);\n}\nbody[data-view="home"] .listen-button .echo-ring,\nbody[data-view="home"] .listen-button .particle-field{opacity:.20}\nbody[data-view="home"] .listen-button .logo-core{\n  position:absolute;left:50%;top:43%;transform:translate(-50%,-50%) !important;\n  width:72px !important;height:72px !important;filter:drop-shadow(0 2px 5px rgba(0,0,0,.26));\n}\nbody[data-view="home"] .listen-button .logo-core::before,\nbody[data-view="home"] .listen-button .logo-core::after{display:none !important}\n.vta-button-copy{\n  position:absolute;left:12%;right:12%;bottom:24px;z-index:6;\n  font:800 13px/1.05 Inter,Segoe UI,Arial,sans-serif;letter-spacing:1.25px;color:#fff;\n  text-shadow:0 2px 3px rgba(0,0,0,.35);pointer-events:none;\n}\n.vta-button-copy-recording{display:none}\n\nbody[data-view="home"].is-listening .listen-status{\n  color:#ff7777 !important;font-size:clamp(21px,2.8vw,30px) !important;\n  text-shadow:0 0 20px rgba(255,80,80,.36);\n  animation:vtaStatusPulse 1.15s ease-in-out infinite;\n}\nbody[data-view="home"].is-listening .listen-button{\n  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.24),transparent 27%),linear-gradient(145deg,#ff5e62 0%,#d92f3c 55%,#9d1725 100%);\n  box-shadow:inset 0 3px 4px rgba(255,255,255,.20),inset 0 -9px 13px rgba(72,0,8,.44),0 8px 0 #74121d,0 14px 20px rgba(0,0,0,.40),0 0 40px rgba(255,68,78,.18);\n}\nbody[data-view="home"].is-listening .vta-button-copy-idle{display:none}\nbody[data-view="home"].is-listening .vta-button-copy-recording{display:block;font-size:16px}\n\nbody[data-view="home"].is-processing .listen-status{\n  margin:0 0 18px !important;\n  font-size:clamp(21px,2.8vw,30px) !important;font-weight:800 !important;letter-spacing:3px !important;\n  color:#79f2e8 !important;text-shadow:0 0 22px rgba(89,238,231,.28);\n  animation:vtaSearching 1.2s ease-in-out infinite;\n}\nbody[data-view="home"].is-processing .listen-button{\n  pointer-events:none;cursor:default;filter:saturate(.35) brightness(.70);\n  background:linear-gradient(145deg,#486361,#293f3e);\n  box-shadow:inset 0 2px 4px rgba(255,255,255,.10),inset 0 -7px 12px rgba(0,0,0,.30),0 5px 0 #182827,0 10px 18px rgba(0,0,0,.30);\n}\nbody[data-view="home"].is-processing .vta-button-copy{display:none}\nbody[data-view="home"].is-processing .listen-button .eq-logo-animated{opacity:1}\n\nbody[data-view="home"] .quran-fact-loader{margin:26px auto 0}\nbody[data-view="home"] .try-line{margin-top:26px}\nbody[data-view="home"] .identified-toast{\n  font-size:clamp(18px,2.5vw,27px);font-weight:800;letter-spacing:2px;text-transform:uppercase;\n}\n@keyframes vtaStatusPulse{50%{opacity:.62}}\n@keyframes vtaSearching{50%{opacity:.55;text-shadow:0 0 32px rgba(89,238,231,.5)}}\n@media(hover:hover) and (pointer:fine){\n body[data-view="home"]:not(.is-listening):not(.is-processing) .listen-button:hover{filter:brightness(1.08);transform:translateY(-2px) !important}\n}\n@media(max-width:650px){\n body[data-view="home"] .home-view{padding-top:74px}\n body[data-view="home"] .hero-copy{margin-bottom:16px}\n body[data-view="home"] .listen-status{margin-bottom:15px !important}\n body[data-view="home"] .listen-button{width:150px;height:150px;min-width:150px;min-height:150px}\n .vta-button-copy{bottom:21px;font-size:12px}\n body[data-view="home"] .listen-button .logo-core{width:64px !important;height:64px !important}\n body[data-view="home"] .try-line{margin-top:22px}\n}\n@media(prefers-reduced-motion:reduce){\n body[data-view="home"].is-listening .listen-status,body[data-view="home"].is-processing .listen-status{animation:none !important}\n}\n
/* =========================================================
   WEB 1.11 PHYSICAL CONTROL
   Page 1 presentation only.
   Existing listenButton / is-listening / is-processing hooks
   are preserved.
   ========================================================= */

body[data-view="home"] .hero-copy{
  margin-bottom:4px;
}

body[data-view="home"] .hero-copy .eyebrow{
  font-size:8px;
  letter-spacing:2.2px;
  opacity:.62;
}

body[data-view="home"] .hero-copy h1{
  font-size:clamp(27px,3.2vw,42px);
  line-height:1.02;
  margin-top:8px;
  margin-bottom:8px;
}

body[data-view="home"] .hero-copy p{
  font-size:12px;
  opacity:.58;
}


/* ---------- PHYSICAL BUTTON ---------- */

body[data-view="home"] .listen-button{
  position:relative;

  width:clamp(164px,18vw,190px);
  height:clamp(164px,18vw,190px);
  min-width:164px;
  min-height:164px;

  margin:22px auto 0 !important;
  padding:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  border:
    3px solid rgba(255,255,255,.18) !important;

  background:
    radial-gradient(
      circle at 38% 28%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 22%,
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #36d58e 0%,
      #16aa6c 52%,
      #087447 100%
    ) !important;

  box-shadow:
    0 11px 0 #064c34,
    0 15px 20px rgba(0,0,0,.48),
    0 25px 48px rgba(0,0,0,.30),
    inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -8px 14px rgba(0,0,0,.20),
    0 0 34px rgba(35,210,139,.16);

  transform:none !important;

  cursor:pointer;

  overflow:visible;

  transition:
    transform .10s ease,
    box-shadow .10s ease,
    background .18s ease,
    border-color .18s ease,
    filter .18s ease;
}


/* Outer mechanical rim */

body[data-view="home"] .listen-button::before{
  content:"";
  position:absolute;
  inset:-9px;
  border-radius:50%;
  z-index:-1;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.025) 35%,
      rgba(0,0,0,.32)
    );

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.15),
    0 3px 8px rgba(0,0,0,.30);
}


/* Remove the old giant decorative ring field from the physical
   face. The branded Q remains. */

body[data-view="home"] .listen-button > .echo-ring{
  opacity:0 !important;
}


/* ---------- LOGO INSIDE BUTTON ---------- */

body[data-view="home"] .listen-button .logo-core{
  position:relative;
  width:76px !important;
  height:76px !important;
  margin:0 0 12px !important;

  transform:none !important;
  filter:none !important;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:3;
}

body[data-view="home"] .listen-button .logo-core::before,
body[data-view="home"] .listen-button .logo-core::after{
  display:none !important;
}

body[data-view="home"] .listen-button .eq-logo-svg,
body[data-view="home"] .listen-button .eq-logo-animated{
  max-width:100%;
  max-height:100%;
}


/* ---------- BUTTON WORDING ---------- */

.vta-button-copy{
  position:relative;
  z-index:4;

  min-height:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#ffffff;

  font-size:12px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:1.7px;

  text-align:center;

  text-shadow:
    0 1px 2px rgba(0,0,0,.38);

  pointer-events:none;
}

.vta-button-copy-recording{
  display:none;
}


/* ---------- DESKTOP HOVER ---------- */

@media (hover:hover) and (pointer:fine){

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:hover{

    filter:brightness(1.07);

    transform:translateY(-2px) !important;

    box-shadow:
      0 13px 0 #064c34,
      0 18px 24px rgba(0,0,0,.48),
      0 28px 52px rgba(0,0,0,.31),
      inset 0 2px 2px rgba(255,255,255,.30),
      inset 0 -8px 14px rgba(0,0,0,.18),
      0 0 42px rgba(35,210,139,.25);
  }
}


/* ---------- ACTUAL PRESS ---------- */

body[data-view="home"] .listen-button:active{
  transform:translateY(8px) !important;

  box-shadow:
    0 3px 0 #064c34,
    0 6px 11px rgba(0,0,0,.42),
    inset 0 3px 8px rgba(0,0,0,.18) !important;
}


/* =========================================================
   RECORDING
   ========================================================= */

body[data-view="home"].is-listening .listen-button{

  background:
    radial-gradient(
      circle at 38% 28%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.05) 22%,
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #ff6666 0%,
      #df333d 52%,
      #981c27 100%
    ) !important;

  border-color:rgba(255,255,255,.20) !important;

  box-shadow:
    0 11px 0 #68131c,
    0 15px 20px rgba(0,0,0,.48),
    0 25px 48px rgba(0,0,0,.30),
    inset 0 2px 2px rgba(255,255,255,.28),
    inset 0 -8px 14px rgba(0,0,0,.20),
    0 0 38px rgba(255,63,75,.24);

  transform:none !important;
}

body[data-view="home"].is-listening
.vta-button-copy-idle{
  display:none;
}

body[data-view="home"].is-listening
.vta-button-copy-recording{
  display:inline;
  font-size:15px;
  letter-spacing:2.3px;
}


/* Keep the branded symbol white/red-lit inside recording button */

body[data-view="home"].is-listening
.listen-button .logo-core{
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.18))
    !important;
}


/* =========================================================
   STATUS — deliberately much louder than old GUI
   ========================================================= */

body[data-view="home"] .listen-status{
  margin:31px auto 0 !important;

  min-height:34px;

  color:rgba(220,242,239,.70) !important;

  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.2;

  letter-spacing:2.4px !important;
  text-transform:uppercase;

  text-align:center;

  transform:none !important;

  transition:
    color .2s ease,
    font-size .2s ease,
    text-shadow .2s ease,
    opacity .2s ease;
}


/* RECORDING is a major state, not helper text */

body[data-view="home"].is-listening .listen-status{

  margin-top:32px !important;

  color:#ff6972 !important;

  font-size:clamp(20px,2.3vw,27px) !important;
  font-weight:850 !important;

  letter-spacing:3.2px !important;

  text-shadow:
    0 0 18px rgba(255,67,80,.38);

  animation:vtaRecordingStatusPulse 1.35s ease-in-out infinite;
}

@keyframes vtaRecordingStatusPulse{
  0%,100%{
    opacity:.72;
  }
  50%{
    opacity:1;
  }
}


/* =========================================================
   SEARCHING
   ========================================================= */

body[data-view="home"].is-processing .listen-button{

  cursor:default;

  background:
    radial-gradient(
      circle at 38% 28%,
      rgba(255,255,255,.09),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      #263c3d,
      #17292b 56%,
      #0c181a
    ) !important;

  border-color:rgba(123,190,187,.14) !important;

  box-shadow:
    0 7px 0 #081113,
    0 12px 18px rgba(0,0,0,.38),
    inset 0 2px 2px rgba(255,255,255,.08),
    inset 0 -7px 12px rgba(0,0,0,.24);

  transform:none !important;

  pointer-events:none;
}

body[data-view="home"].is-processing
.vta-button-copy{
  opacity:0;
}

body[data-view="home"].is-processing
.listen-button .logo-core{
  margin-bottom:0 !important;

  filter:
    drop-shadow(0 0 10px rgba(94,235,225,.28))
    !important;
}

body[data-view="home"].is-processing .listen-status{

  margin-top:30px !important;

  color:#72f1e9 !important;

  font-size:clamp(20px,2.3vw,27px) !important;
  font-weight:850 !important;

  letter-spacing:3.2px !important;

  text-shadow:
    0 0 18px rgba(94,235,225,.26);

  animation:vtaSearchingPulse 1.15s ease-in-out infinite;
}

@keyframes vtaSearchingPulse{
  0%,100%{
    opacity:.58;
  }
  50%{
    opacity:1;
  }
}


/* Existing Quran facts remain available, but subordinate */

body[data-view="home"].is-processing .quran-fact-loader{
  margin:14px auto 0 !important;
}


/* =========================================================
   SUPPORTING CONTENT
   ========================================================= */

body[data-view="home"] .try-line{
  margin-top:24px;
  opacity:.52;
}

body[data-view="home"] .browse-surahs-trigger{
  margin-top:12px;
}


/* =========================================================
   MOBILE / CAPACITOR FRIENDLY
   ========================================================= */

@media(max-width:650px){

  body[data-view="home"] .hero-copy h1{
    font-size:28px;
  }

  body[data-view="home"] .hero-copy p{
    font-size:11px;
  }

  body[data-view="home"] .listen-button{
    width:154px;
    height:154px;
    min-width:154px;
    min-height:154px;

    margin-top:20px !important;

    box-shadow:
      0 9px 0 #064c34,
      0 13px 18px rgba(0,0,0,.46),
      0 22px 40px rgba(0,0,0,.28),
      inset 0 2px 2px rgba(255,255,255,.26),
      inset 0 -7px 12px rgba(0,0,0,.18);
  }

  body[data-view="home"].is-listening .listen-button{
    box-shadow:
      0 9px 0 #68131c,
      0 13px 18px rgba(0,0,0,.46),
      0 22px 40px rgba(0,0,0,.28),
      inset 0 2px 2px rgba(255,255,255,.26),
      inset 0 -7px 12px rgba(0,0,0,.18);
  }

  body[data-view="home"] .listen-button .logo-core{
    width:65px !important;
    height:65px !important;
    margin-bottom:10px !important;
  }

  .vta-button-copy{
    font-size:10px;
    letter-spacing:1.45px;
  }

  body[data-view="home"].is-listening
  .vta-button-copy-recording{
    font-size:13px;
  }

  body[data-view="home"] .listen-status{
    margin-top:27px !important;
  }

  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{
    margin-top:28px !important;
    font-size:20px !important;
    letter-spacing:2.5px !important;
  }
}


/* Accessibility: retain clear keyboard focus */

body[data-view="home"] .listen-button:focus-visible{
  outline:3px solid rgba(112,245,234,.92);
  outline-offset:13px;
}


/* Reduced-motion users still receive state/color changes */

@media(prefers-reduced-motion:reduce){

  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{
    animation:none !important;
    opacity:1 !important;
  }

  body[data-view="home"] .listen-button{
    transition:none !important;
  }
}

/* ================= END WEB 1.11 PHYSICAL CONTROL ================= */
/* =========================================================
   WEB 1.11 FIXED CONTROL GEOMETRY
   Prevent state text from moving the physical recite control.
   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   PAGE-1 COPY
   Give the heading/subtitle their own clean territory.
   --------------------------------------------------------- */

body[data-view="home"] .hero-copy{
  margin-bottom:0 !important;
}

body[data-view="home"] .hero-copy h1{
  margin-bottom:8px !important;
}

body[data-view="home"] .hero-copy p{
  margin-top:0 !important;
  margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   STATUS SLOT

   IMPORTANT:
   This element occupies the SAME amount of vertical space
   in every state.

   READY TO RECITE
   RECORDING...
   SEARCHING...
   errors / success

   can therefore change without moving the button.
   --------------------------------------------------------- */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing) .listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  position:relative !important;

  width:100% !important;
  max-width:420px !important;

  height:58px !important;
  min-height:58px !important;

  margin:12px auto 0 !important;
  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  transform:none !important;

  text-align:center !important;

  /* Never allow status typography to alter geometry. */
  line-height:1.1 !important;
}


/* Idle status */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:var(--accent) !important;

  font-size:11px !important;
  font-weight:750 !important;

  letter-spacing:2.5px !important;
}


/* Recording status:
   visually loud, geometrically identical. */

body[data-view="home"].is-listening
.listen-status{

  color:#ff6972 !important;

  font-size:clamp(20px,2.3vw,27px) !important;
  font-weight:850 !important;

  letter-spacing:3.2px !important;

  margin:12px auto 0 !important;

  text-shadow:
    0 0 18px rgba(255,67,80,.38);
}


/* Searching status:
   same slot, same geometry. */

body[data-view="home"].is-processing
.listen-status{

  color:#72f1e9 !important;

  font-size:clamp(20px,2.3vw,27px) !important;
  font-weight:850 !important;

  letter-spacing:3.2px !important;

  margin:12px auto 0 !important;

  text-shadow:
    0 0 18px rgba(94,235,225,.26);
}


/* ---------------------------------------------------------
   PHYSICAL CONTROL ANCHOR

   The button gets exactly the same layout margin regardless
   of idle / recording / processing state.
   --------------------------------------------------------- */

body[data-view="home"] .listen-button,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button,
body[data-view="home"].is-listening
.listen-button,
body[data-view="home"].is-processing
.listen-button{

  margin:0 auto !important;

  /* Neutral resting position is identical in every state. */
  transform:translateY(0) !important;
}


/* Physical movement occurs ONLY while actually pressing it.
   This does not alter document layout. */

body[data-view="home"] .listen-button:active,
body[data-view="home"].is-listening .listen-button:active{

  transform:translateY(6px) !important;
}


/* Hover may rise visually, but again does not affect layout. */

@media (hover:hover) and (pointer:fine){

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:hover{

    transform:translateY(-2px) !important;
  }
}


/* ---------------------------------------------------------
   RECORDING

   Explicitly ensure the red state retains the exact same
   physical dimensions as idle.
   --------------------------------------------------------- */

body[data-view="home"].is-listening .listen-button{

  width:clamp(164px,18vw,190px) !important;
  height:clamp(164px,18vw,190px) !important;

  min-width:164px !important;
  min-height:164px !important;

  max-width:none !important;
  max-height:none !important;
}


/* ---------------------------------------------------------
   PROCESSING

   Processing may change the visual face, but not the
   control's position or footprint.
   --------------------------------------------------------- */

body[data-view="home"].is-processing .listen-button{

  width:clamp(164px,18vw,190px) !important;
  height:clamp(164px,18vw,190px) !important;

  min-width:164px !important;
  min-height:164px !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 auto !important;
}


/* Quran fact text must not pull the control around. */

body[data-view="home"] .quran-fact-loader,
body[data-view="home"].is-processing .quran-fact-loader{

  margin-top:18px !important;
}


/* ---------------------------------------------------------
   MOBILE

   Same principle, just smaller fixed geometry.
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    height:54px !important;
    min-height:54px !important;

    margin:10px auto 0 !important;
  }


  body[data-view="home"] .listen-button,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button,
  body[data-view="home"].is-listening .listen-button,
  body[data-view="home"].is-processing .listen-button{

    width:154px !important;
    height:154px !important;

    min-width:154px !important;
    min-height:154px !important;

    margin:0 auto !important;
  }


  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    font-size:20px !important;
    letter-spacing:2.5px !important;
  }
}


/* ============== END WEB 1.11 FIXED CONTROL GEOMETRY ============== */
/* =========================================================
   WEB 1.11 DEEP PHYSICAL PRESS
   Makes the button cap visibly sink into its housing.
   ========================================================= */

/* IDLE GREEN — PRESSED */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button:active{

  transform:translateY(10px) scale(.985) !important;

  filter:brightness(.91) !important;

  box-shadow:
    0 1px 0 #043c29,
    0 3px 7px rgba(0,0,0,.42),

    inset 0 7px 13px rgba(0,0,0,.34),
    inset 0 -2px 5px rgba(255,255,255,.10),
    inset 5px 0 10px rgba(0,0,0,.10),
    inset -5px 0 10px rgba(0,0,0,.10),

    0 0 20px rgba(35,210,139,.12)

    !important;
}


/* RECORDING RED — PRESSED */

body[data-view="home"].is-listening
.listen-button:active{

  transform:translateY(10px) scale(.985) !important;

  filter:brightness(.90) !important;

  box-shadow:
    0 1px 0 #4d0d14,
    0 3px 7px rgba(0,0,0,.44),

    inset 0 7px 13px rgba(0,0,0,.36),
    inset 0 -2px 5px rgba(255,255,255,.09),
    inset 5px 0 10px rgba(0,0,0,.11),
    inset -5px 0 10px rgba(0,0,0,.11),

    0 0 20px rgba(255,63,75,.13)

    !important;
}


/* The outer housing itself stays planted while the cap moves. */

body[data-view="home"] .listen-button::before{
  transition:
    box-shadow .10s ease,
    opacity .10s ease;
}


/* Faster mechanical movement rather than a soft UI animation. */

body[data-view="home"] .listen-button{

  transition:
    transform .075s cubic-bezier(.2,.8,.3,1),
    box-shadow .075s cubic-bezier(.2,.8,.3,1),
    filter .075s ease,
    background .18s ease,
    border-color .18s ease

    !important;
}


/* Touch devices get the same physical travel. */

@media(max-width:650px){

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-button:active,

  body[data-view="home"].is-listening
  .listen-button:active{

    transform:translateY(9px) scale(.985) !important;
  }
}


/* ================ END WEB 1.11 DEEP PHYSICAL PRESS ================ */
/* =========================================================
   WEB 1.11 LATCHED RECORDING BUTTON

   Idle      = raised
   MouseDown = travels inward
   Recording = remains mechanically depressed
   Processing releases the physical recording latch.

   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   RECORDING = PERSISTENT DEPRESSED POSITION
   --------------------------------------------------------- */

body[data-view="home"].is-listening .listen-button{

  transform:translateY(10px) scale(.985) !important;

  filter:brightness(.90) !important;

  box-shadow:
    0 1px 0 #4d0d14,
    0 3px 7px rgba(0,0,0,.44),

    inset 0 7px 13px rgba(0,0,0,.36),
    inset 0 -2px 5px rgba(255,255,255,.09),
    inset 5px 0 10px rgba(0,0,0,.11),
    inset -5px 0 10px rgba(0,0,0,.11),

    0 0 20px rgba(255,63,75,.13)

    !important;
}


/* ---------------------------------------------------------
   PRESSING STOP

   Because recording is ALREADY depressed, don't push the
   cap another 10px. Give it only a tiny additional movement.
   --------------------------------------------------------- */

body[data-view="home"].is-listening .listen-button:active{

  transform:translateY(12px) scale(.978) !important;

  filter:brightness(.84) !important;

  box-shadow:
    0 0 0 #4d0d14,
    0 2px 4px rgba(0,0,0,.40),

    inset 0 9px 15px rgba(0,0,0,.42),
    inset 0 -1px 4px rgba(255,255,255,.07),
    inset 5px 0 11px rgba(0,0,0,.13),
    inset -5px 0 11px rgba(0,0,0,.13)

    !important;
}


/* ---------------------------------------------------------
   PROCESSING

   Explicitly return from the latched recording travel.
   The processing face remains non-actionable.
   --------------------------------------------------------- */

body[data-view="home"].is-processing .listen-button{

  transform:translateY(0) scale(1) !important;
  filter:none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"].is-listening .listen-button{

    transform:translateY(9px) scale(.985) !important;
  }

  body[data-view="home"].is-listening .listen-button:active{

    transform:translateY(11px) scale(.978) !important;
  }

  body[data-view="home"].is-processing .listen-button{

    transform:translateY(0) scale(1) !important;
  }
}


/* ============ END WEB 1.11 LATCHED RECORDING BUTTON ============ */
/* =========================================================
   WEB 1.11 MIC CONTROL ARCHITECTURE

   Brand      -> heading
   Instruction/status -> fixed status slot
   Mic        -> primary physical recording control
   STOP       -> secondary recording action inside control

   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   BRAND / HEADING SEGMENT
   --------------------------------------------------------- */

body[data-view="home"] .hero-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 auto !important;
  padding:0 !important;

  text-align:center !important;
}


body[data-view="home"] .vta-hero-mark{
  display:block;

  width:52px;
  height:52px;

  margin:0 auto 13px;

  object-fit:contain;

  opacity:.94;

  filter:
    drop-shadow(0 0 10px rgba(91,232,221,.12));
}


body[data-view="home"] .hero-copy h1{
  margin:0 !important;

  font-size:clamp(30px,3.3vw,44px) !important;
  line-height:.98 !important;

  font-weight:400 !important;
}


body[data-view="home"] .hero-copy h1 span{
  opacity:.58;
}


/* Old eyebrow is no longer part of the hierarchy. */

body[data-view="home"] .hero-copy .eyebrow{
  display:none !important;
}


/* ---------------------------------------------------------
   INSTRUCTION / LIVE STATUS SLOT

   Same geometry for:
   Recite a verse...
   RECORDING...
   SEARCHING...
   errors

   Therefore the physical control never moves.
   --------------------------------------------------------- */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  width:100% !important;
  max-width:440px !important;

  height:62px !important;
  min-height:62px !important;

  margin:8px auto 0 !important;
  padding:0 12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  transform:none !important;

  text-align:center !important;
  line-height:1.25 !important;
}


/* Idle instruction is human-readable, not HUD typography. */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:rgba(213,234,231,.72) !important;

  font-size:13px !important;
  font-weight:450 !important;

  letter-spacing:.15px !important;
  text-transform:none !important;

  text-shadow:none !important;
}


/* Recording replaces the instruction in exactly the same slot. */

body[data-view="home"].is-listening .listen-status{

  color:#ff747c !important;

  font-size:clamp(19px,2vw,25px) !important;
  font-weight:850 !important;

  letter-spacing:3px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 18px rgba(255,67,80,.35);
}


/* Searching uses that same slot. */

body[data-view="home"].is-processing .listen-status{

  color:#72f1e9 !important;

  font-size:clamp(19px,2vw,25px) !important;
  font-weight:850 !important;

  letter-spacing:3px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 18px rgba(94,235,225,.25);
}


/* ---------------------------------------------------------
   REMOVE OLD LOGO PRESENTATION INSIDE BUTTON
   --------------------------------------------------------- */

body[data-view="home"] .listen-button .logo-core,
body[data-view="home"] .listen-button .eq-logo-svg,
body[data-view="home"] .listen-button .eq-logo-animated,
body[data-view="home"] .listen-button .vta-button-copy{
  display:none !important;
}


/* ---------------------------------------------------------
   MIC SYMBOL
   --------------------------------------------------------- */

body[data-view="home"] .vta-mic-symbol{

  position:relative;
  z-index:5;

  width:72px;
  height:72px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:rgba(255,255,255,.96);

  pointer-events:none;

  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.20))
    drop-shadow(0 0 8px rgba(255,255,255,.08));

  transition:
    transform .12s ease,
    opacity .18s ease,
    filter .18s ease;
}


body[data-view="home"] .vta-mic-symbol svg{
  display:block;

  width:100%;
  height:100%;

  overflow:visible;
}


/* ---------------------------------------------------------
   STOP

   Invisible while idle.
   Appears underneath mic only while recording.
   --------------------------------------------------------- */

body[data-view="home"] .vta-mic-stop{

  position:absolute;

  left:50%;
  top:calc(50% + 45px);

  transform:translateX(-50%);

  z-index:6;

  display:block;

  opacity:0;

  color:#fff;

  font-size:11px;
  font-weight:850;

  line-height:1;

  letter-spacing:2.2px;

  text-shadow:
    0 1px 2px rgba(0,0,0,.42);

  pointer-events:none;

  transition:opacity .15s ease;
}


body[data-view="home"].is-listening .vta-mic-stop{
  opacity:.95;
}


/* Give STOP a little space by lifting mic very slightly
   within the button. The BUTTON itself does not move. */

body[data-view="home"].is-listening .vta-mic-symbol{
  transform:translateY(-8px);
}


/* ---------------------------------------------------------
   BUTTON POSITION

   Same layout position in all states.
   --------------------------------------------------------- */

body[data-view="home"] .listen-button,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button,
body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button{

  margin:0 auto !important;
}


/* ---------------------------------------------------------
   RECORDING LATCH

   Preserve our approved mechanical behaviour:
   red recording button stays physically depressed.
   --------------------------------------------------------- */

body[data-view="home"].is-listening .listen-button{

  transform:translateY(10px) scale(.985) !important;

  filter:brightness(.90) !important;

  box-shadow:
    0 1px 0 #4d0d14,
    0 3px 7px rgba(0,0,0,.44),

    inset 0 7px 13px rgba(0,0,0,.36),
    inset 0 -2px 5px rgba(255,255,255,.09),
    inset 5px 0 10px rgba(0,0,0,.11),
    inset -5px 0 10px rgba(0,0,0,.11),

    0 0 20px rgba(255,63,75,.13)

    !important;
}


/* STOP press = tiny additional mechanical travel. */

body[data-view="home"].is-listening .listen-button:active{

  transform:translateY(12px) scale(.978) !important;
}


/* ---------------------------------------------------------
   PROCESSING

   Button is no longer an available action.
   Mic remains recognizable but subdued.
   --------------------------------------------------------- */

body[data-view="home"].is-processing .listen-button{

  transform:translateY(0) scale(1) !important;

  filter:none !important;

  pointer-events:none !important;
}


body[data-view="home"].is-processing .vta-mic-symbol{

  opacity:.38;

  transform:scale(.92);

  filter:none;
}


body[data-view="home"].is-processing .vta-mic-stop{
  opacity:0;
}


/* ---------------------------------------------------------
   TRY LINE

   Remains attached to the recording-control segment.
   --------------------------------------------------------- */

body[data-view="home"] .try-line{

  margin-top:28px !important;

  opacity:.58;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"] .vta-hero-mark{
    width:44px;
    height:44px;

    margin-bottom:10px;
  }


  body[data-view="home"] .hero-copy h1{
    font-size:30px !important;
  }


  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    height:58px !important;
    min-height:58px !important;

    margin-top:6px !important;
  }


  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status{

    font-size:12px !important;
  }


  body[data-view="home"] .vta-mic-symbol{
    width:64px;
    height:64px;
  }


  body[data-view="home"] .vta-mic-stop{
    top:calc(50% + 40px);

    font-size:10px;
  }


  body[data-view="home"].is-listening .vta-mic-symbol{
    transform:translateY(-7px);
  }


  body[data-view="home"].is-listening .listen-button{
    transform:translateY(9px) scale(.985) !important;
  }


  body[data-view="home"].is-listening .listen-button:active{
    transform:translateY(11px) scale(.978) !important;
  }
}


/* ============ END WEB 1.11 MIC CONTROL ARCHITECTURE ============ */
/* =========================================================
   WEB 1.11 CLEAN SEGMENT PASS

   HERO:
     Find the Quran
     by voice.

   CONTROL:
     physical microphone button
     instruction / recording / searching / result status

   NAV:
     READ & LISTEN QURAN

   FOOTER:
     logo
     VoiceToAyah
     contact
     privacy

   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   HERO — NO LOGO
   --------------------------------------------------------- */

body[data-view="home"] .vta-hero-mark{
  display:none !important;
}

body[data-view="home"] .hero-copy{
  margin:0 auto !important;
  padding:0 !important;
}

body[data-view="home"] .hero-copy h1{
  margin:0 !important;
}


/* ---------------------------------------------------------
   IMPORTANT:
   STATUS NOW VISUALLY BELONGS BELOW THE BUTTON.

   HTML order remains untouched, preserving application logic.
   We reposition presentation only.
   --------------------------------------------------------- */

body[data-view="home"] .home-view{
  position:relative;
}


/* Create space below the button for the permanent status slot. */

body[data-view="home"] .listen-button{
  margin-bottom:58px !important;
}


/* Move status from its DOM position above the button
   into the reserved visual slot beneath it. */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  position:absolute !important;

  left:50% !important;

  /*
    This top value positions the status in the space formerly
    occupied by the Try line. Button geometry itself remains
    independent.
  */

  top:calc(50% + 178px) !important;

  transform:translateX(-50%) !important;

  width:min(440px,90vw) !important;

  height:46px !important;
  min-height:46px !important;

  margin:0 !important;
  padding:0 12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  text-align:center !important;

  z-index:8;
}


/* Idle instruction */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:rgba(215,235,232,.72) !important;

  font-size:13px !important;
  font-weight:450 !important;

  letter-spacing:.1px !important;
  text-transform:none !important;

  text-shadow:none !important;
}


/* Recording */

body[data-view="home"].is-listening .listen-status{

  color:#ff747c !important;

  font-size:18px !important;
  font-weight:850 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 15px rgba(255,70,82,.30);
}


/* Searching */

body[data-view="home"].is-processing .listen-status{

  color:#72f1e9 !important;

  font-size:18px !important;
  font-weight:850 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 15px rgba(90,235,224,.24);
}


/* ---------------------------------------------------------
   REMOVE TRY COMPLETELY
   --------------------------------------------------------- */

body[data-view="home"] .try-line{
  display:none !important;
}


/* ---------------------------------------------------------
   REMOVE CYAN OUTER RING

   Keep physical housing/shadow.
   Remove the decorative neon/cyan outline.
   --------------------------------------------------------- */

body[data-view="home"] .listen-button::before{

  border-color:transparent !important;

  box-shadow:none !important;

  opacity:0 !important;
}


/* Kill any old ring glow that survives through state CSS. */

body[data-view="home"] .listen-button{
  outline:none !important;
}


/* ---------------------------------------------------------
   READ & LISTEN QURAN

   Inspired by current Android control:
   larger glass surface, clearer navigation hierarchy.
   --------------------------------------------------------- */

body[data-view="home"] #browseSurahs{

  position:relative;

  min-width:202px !important;
  height:52px !important;

  margin:10px auto 0 !important;
  padding:0 25px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(84,224,216,.48) !important;
  border-radius:28px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.095),
      rgba(255,255,255,.035)
    ) !important;

  color:rgba(240,251,250,.94) !important;

  font-size:13px !important;
  font-weight:700 !important;

  letter-spacing:.15px !important;

  text-transform:none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 7px 22px rgba(0,0,0,.18),
    0 0 18px rgba(57,215,205,.055)

    !important;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  transition:
    transform .12s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}


@media(hover:hover) and (pointer:fine){

  body[data-view="home"] #browseSurahs:hover{

    transform:translateY(-1px);

    border-color:rgba(91,236,226,.72) !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.125),
        rgba(255,255,255,.048)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.11),
      0 9px 26px rgba(0,0,0,.20),
      0 0 22px rgba(57,215,205,.09)

      !important;
  }
}


body[data-view="home"] #browseSurahs:active{
  transform:translateY(2px);
}


/* ---------------------------------------------------------
   FOOTER IDENTITY SEGMENT
   --------------------------------------------------------- */

body[data-view="home"] .home-footer{

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;

  text-align:center !important;
}


body[data-view="home"] .vta-footer-mark{

  display:block;

  width:48px;
  height:48px;

  margin:0 auto 12px;

  object-fit:contain;

  opacity:.68;

  filter:
    drop-shadow(0 0 10px rgba(84,224,216,.08));
}


/* Existing footer typography stays restrained so the logo
   creates a subtle identity block rather than another CTA. */

body[data-view="home"] .home-footer,
body[data-view="home"] .home-footer a{

  letter-spacing:1.15px;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"] .listen-button{
    margin-bottom:54px !important;
  }


  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    top:calc(50% + 158px) !important;

    height:42px !important;
    min-height:42px !important;
  }


  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status{

    font-size:12px !important;
  }


  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    font-size:16px !important;
    letter-spacing:2.2px !important;
  }


  body[data-view="home"] #browseSurahs{

    min-width:200px !important;
    height:50px !important;

    margin-top:8px !important;

    font-size:13px !important;
  }


  body[data-view="home"] .vta-footer-mark{

    width:43px;
    height:43px;

    margin-bottom:10px;
  }
}


/* =============== END WEB 1.11 CLEAN SEGMENT PASS =============== */
/* =========================================================
   WEB 1.11 FINAL PAGE1 HIERARCHY

   Heading
      ↓
   Physical microphone
      ↓
   Fixed status / instruction slot
      ↓
   READ & LISTEN QURAN
      ↓
   Footer identity

   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   CONTROL GROUP

   Reserve a predictable area underneath the physical button.
   Status occupies the first part; secondary navigation follows.
   --------------------------------------------------------- */

body[data-view="home"] .listen-button,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button,
body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button{

  margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   STATUS SLOT

   Previous pass positioned this absolutely underneath the
   complete control stack. Bring it directly below the mic.

   Because it remains absolute, changing its text cannot
   alter the physical button coordinates.
   --------------------------------------------------------- */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  position:absolute !important;

  left:50% !important;
  top:calc(50% + 132px) !important;

  transform:translateX(-50%) !important;

  width:min(460px,90vw) !important;

  height:48px !important;
  min-height:48px !important;

  margin:0 !important;
  padding:0 12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  text-align:center !important;

  z-index:8;
}


/* Idle instruction */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:rgba(215,235,232,.72) !important;

  font-size:13px !important;
  font-weight:450 !important;

  line-height:1.25 !important;

  letter-spacing:.1px !important;
  text-transform:none !important;

  text-shadow:none !important;
}


/* Recording */

body[data-view="home"].is-listening .listen-status{

  color:#ff747c !important;

  font-size:18px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;
}


/* Searching */

body[data-view="home"].is-processing .listen-status{

  color:#72f1e9 !important;

  font-size:18px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;
}


/* ---------------------------------------------------------
   READ & LISTEN QURAN

   Move navigation below the permanent status slot.
   --------------------------------------------------------- */

body[data-view="home"] #browseSurahs{

  margin:58px auto 0 !important;

  min-width:202px !important;
  height:52px !important;

  padding:0 25px !important;

  border-radius:28px !important;
}


/* Give status + navigation the feeling of one secondary
   segment without visually attaching navigation to the mic. */

body[data-view="home"] #browseSurahs::before{
  content:none !important;
}


/* ---------------------------------------------------------
   FOOTER

   Make logo + identity/contact/privacy read as one compact
   signature rather than separated objects.
   --------------------------------------------------------- */

body[data-view="home"] .home-footer{

  gap:0 !important;

  padding-bottom:18px !important;
}


body[data-view="home"] .vta-footer-mark{

  width:45px !important;
  height:45px !important;

  margin:0 auto 7px !important;

  opacity:.72 !important;
}


/* Reduce excessive spacing inherited by individual footer
   children while preserving existing content and links. */

body[data-view="home"] .home-footer > *:not(.vta-footer-mark){

  margin-top:2px !important;
  margin-bottom:2px !important;
}


/* Keep footer links understated but readable. */

body[data-view="home"] .home-footer,
body[data-view="home"] .home-footer a{

  line-height:1.45 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    top:calc(50% + 119px) !important;

    width:min(360px,88vw) !important;

    height:44px !important;
    min-height:44px !important;
  }


  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status{

    font-size:12px !important;
  }


  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    font-size:16px !important;
    letter-spacing:2.2px !important;
  }


  body[data-view="home"] #browseSurahs{

    margin-top:52px !important;

    min-width:200px !important;
    height:50px !important;
  }


  body[data-view="home"] .vta-footer-mark{

    width:40px !important;
    height:40px !important;

    margin-bottom:6px !important;
  }


  body[data-view="home"] .home-footer{

    padding-bottom:12px !important;
  }
}


/* ============== END WEB 1.11 FINAL PAGE1 HIERARCHY ============== */
/* =========================================================
   WEB 1.11 STATUS NAV SPACING FIX

   Mic
    ↓
   Status
    ↓
   READ & LISTEN QURAN

   Corrects overlap only. No control/state logic changes.
   ========================================================= */


/* Give the control group enough physical room below the mic
   for BOTH status and secondary navigation. */

body[data-view="home"] .listen-button,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button,
body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button{

  margin-bottom:0 !important;
}


/* STATUS:
   place clearly below the physical button */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  top:calc(50% + 151px) !important;

  height:34px !important;
  min-height:34px !important;

  width:min(460px,90vw) !important;

  margin:0 !important;
  padding:0 10px !important;

  transform:translateX(-50%) !important;
}


/* Navigation comes AFTER the status slot.
   This creates the missing breathing room. */

body[data-view="home"] #browseSurahs{

  margin:88px auto 0 !important;

  min-width:202px !important;
  height:52px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    top:calc(50% + 137px) !important;

    height:32px !important;
    min-height:32px !important;

    width:min(360px,88vw) !important;
  }


  body[data-view="home"] #browseSurahs{

    margin:80px auto 0 !important;

    min-width:200px !important;
    height:50px !important;
  }
}


/* ============ END WEB 1.11 STATUS NAV SPACING FIX ============ */
/* =========================================================
   WEB 1.11 FLOW STATUS STACK

   Remove absolute positioning from status.
   Status + secondary navigation now share normal document
   flow, preventing overlap across viewport sizes.

   Presentation only.
   ========================================================= */


/* ---------------------------------------------------------
   STATUS — NORMAL FLOW
   --------------------------------------------------------- */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  position:relative !important;

  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;

  transform:none !important;

  width:min(460px,90vw) !important;

  height:40px !important;
  min-height:40px !important;

  margin:18px auto 0 !important;
  padding:0 10px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  text-align:center !important;

  z-index:auto !important;
}


/* ---------------------------------------------------------
   IDLE INSTRUCTION
   --------------------------------------------------------- */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:rgba(215,235,232,.72) !important;

  font-size:13px !important;
  font-weight:450 !important;

  line-height:1.25 !important;

  letter-spacing:.1px !important;
  text-transform:none !important;

  text-shadow:none !important;
}


/* ---------------------------------------------------------
   RECORDING
   --------------------------------------------------------- */

body[data-view="home"].is-listening .listen-status{

  color:#ff747c !important;

  font-size:18px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 15px rgba(255,70,82,.30);
}


/* ---------------------------------------------------------
   PROCESSING
   --------------------------------------------------------- */

body[data-view="home"].is-processing .listen-status{

  color:#72f1e9 !important;

  font-size:18px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 15px rgba(90,235,224,.24);
}


/* ---------------------------------------------------------
   READ & LISTEN QURAN

   It now simply follows the status in normal flow.
   --------------------------------------------------------- */

body[data-view="home"] #browseSurahs{

  margin:10px auto 0 !important;

  min-width:202px !important;
  height:52px !important;
}


/* ---------------------------------------------------------
   BUTTON

   No layout compensation is required anymore.
   --------------------------------------------------------- */

body[data-view="home"] .listen-button,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button,
body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button{

  margin-bottom:0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    position:relative !important;

    left:auto !important;
    top:auto !important;

    transform:none !important;

    width:min(360px,88vw) !important;

    height:38px !important;
    min-height:38px !important;

    margin:16px auto 0 !important;
  }


  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status{

    font-size:12px !important;
  }


  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    font-size:16px !important;
    letter-spacing:2.2px !important;
  }


  body[data-view="home"] #browseSurahs{

    margin:9px auto 0 !important;

    min-width:200px !important;
    height:50px !important;
  }
}


/* ================= END WEB 1.11 FLOW STATUS STACK ================= */
/* =========================================================
   WEB 1.11 STATUS DOM ORDER

   HTML is now genuinely:

       heading
       listenButton
       listenStatus
       READ & LISTEN QURAN

   No absolute-position workaround required.
   ========================================================= */


/* BUTTON */

body[data-view="home"] .listen-button,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-button,
body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button{

  margin-bottom:0 !important;
}


/* STATUS — genuinely follows button */

body[data-view="home"] .listen-status,
body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status,
body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status{

  position:relative !important;

  left:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;

  transform:none !important;

  width:min(460px,90vw) !important;

  height:38px !important;
  min-height:38px !important;

  margin:16px auto 0 !important;
  padding:0 10px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  box-sizing:border-box !important;

  text-align:center !important;

  z-index:auto !important;
}


/* IDLE */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:rgba(215,235,232,.72) !important;

  font-size:13px !important;
  font-weight:450 !important;

  line-height:1.25 !important;

  letter-spacing:.1px !important;
  text-transform:none !important;

  text-shadow:none !important;
}


/* RECORDING */

body[data-view="home"].is-listening .listen-status{

  color:#ff747c !important;

  font-size:18px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 15px rgba(255,70,82,.30);
}


/* SEARCHING */

body[data-view="home"].is-processing .listen-status{

  color:#72f1e9 !important;

  font-size:18px !important;
  font-weight:850 !important;

  line-height:1 !important;

  letter-spacing:2.6px !important;
  text-transform:uppercase !important;

  text-shadow:
    0 0 15px rgba(90,235,224,.24);
}


/* READ & LISTEN genuinely follows status */

body[data-view="home"] #browseSurahs{

  margin:8px auto 0 !important;

  min-width:202px !important;
  height:52px !important;
}


/* MOBILE */

@media(max-width:650px){

  body[data-view="home"] .listen-status,
  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status,
  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    position:relative !important;

    left:auto !important;
    top:auto !important;

    transform:none !important;

    width:min(360px,88vw) !important;

    height:36px !important;
    min-height:36px !important;

    margin:14px auto 0 !important;
  }


  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status{

    font-size:12px !important;
  }


  body[data-view="home"].is-listening .listen-status,
  body[data-view="home"].is-processing .listen-status{

    font-size:16px !important;
    letter-spacing:2.2px !important;
  }


  body[data-view="home"] #browseSurahs{

    margin:7px auto 0 !important;

    min-width:200px !important;
    height:50px !important;
  }
}


/* ================= END WEB 1.11 STATUS DOM ORDER ================= */
/* =========================================================
   WEB 1.11 PAGE1 FINAL POLISH

   Typography + footer signature only.
   Does NOT alter microphone geometry or application logic.
   ========================================================= */


/* ---------------------------------------------------------
   IDLE INSTRUCTION

   Slightly clearer than previous pass while remaining
   subordinate to the microphone.
   --------------------------------------------------------- */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  color:rgba(222,239,237,.82) !important;

  font-size:13.5px !important;
  font-weight:480 !important;

  letter-spacing:.12px !important;

  text-shadow:
    0 0 12px rgba(85,220,210,.06) !important;
}


/* ---------------------------------------------------------
   FAILURE / RETRY

   JS places the failure wording in the same status element.
   Keep it clearly readable without competing with RECORDING.
   --------------------------------------------------------- */

body[data-view="home"]:not(.is-listening):not(.is-processing)
.listen-status{

  transition:
    color .18s ease,
    text-shadow .18s ease,
    opacity .18s ease !important;
}


/* ---------------------------------------------------------
   READ & LISTEN QURAN

   Keep existing glass construction.
   Refine typography only.
   --------------------------------------------------------- */

body[data-view="home"] #browseSurahs{

  font-size:13px !important;
  font-weight:650 !important;

  letter-spacing:.45px !important;
  text-transform:none !important;

  color:rgba(239,249,248,.94) !important;

  text-shadow:
    0 1px 8px rgba(0,0,0,.24) !important;
}


body[data-view="home"] #browseSurahs:hover{

  color:#ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 20px rgba(59,224,214,.10) !important;
}


/* ---------------------------------------------------------
   PAGE 1 FOOTER

   Treat logo + three links as one compact signature.
   --------------------------------------------------------- */

body[data-view="home"] .home-footer{

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;

  gap:4px !important;

  padding-bottom:18px !important;
}


/* ---------------------------------------------------------
   FOOTER LOGO

   Restore the atmospheric VoiceToAyah glow HERE rather than
   on the microphone control.

   The mic remains functional; footer owns brand atmosphere.
   --------------------------------------------------------- */

body[data-view="home"] .home-footer .vta-footer-mark{

  width:48px !important;
  height:48px !important;

  margin:0 auto 8px !important;

  opacity:.92 !important;

  filter:
    brightness(1.32)
    contrast(1.08)
    drop-shadow(0 0 5px rgba(106,241,232,.36))
    drop-shadow(0 0 15px rgba(55,218,208,.20)) !important;

  transition:
    opacity .25s ease,
    filter .25s ease !important;
}


/* Very subtle halo behind the logo */

body[data-view="home"] .home-footer .vta-footer-mark{
  position:relative !important;
  z-index:1 !important;
}


/* Footer links */

body[data-view="home"] .home-footer a{

  margin:0 !important;

  color:rgba(93,206,200,.72) !important;

  font-size:9px !important;
  font-weight:500 !important;

  line-height:1.45 !important;

  letter-spacing:1px !important;
  text-transform:uppercase !important;

  text-decoration:none !important;

  transition:
    color .18s ease,
    text-shadow .18s ease !important;
}


body[data-view="home"] .home-footer a:hover{

  color:rgba(126,238,231,.96) !important;

  text-shadow:
    0 0 10px rgba(79,225,215,.18) !important;
}


/* Privacy belongs to the same footer identity group */

body[data-view="home"] .home-footer .vta-footer-privacy{

  margin-top:0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:650px){

  body[data-view="home"]:not(.is-listening):not(.is-processing)
  .listen-status{

    font-size:12.5px !important;
  }


  body[data-view="home"] #browseSurahs{

    font-size:12.5px !important;
    letter-spacing:.35px !important;
  }


  body[data-view="home"] .home-footer .vta-footer-mark{

    width:44px !important;
    height:44px !important;

    margin-bottom:6px !important;
  }


  body[data-view="home"] .home-footer{

    gap:3px !important;
    padding-bottom:12px !important;
  }


  body[data-view="home"] .home-footer a{

    font-size:8.5px !important;
    letter-spacing:.85px !important;
  }
}

/* =========================================================
   WEB 1.11 IDLE BUTTON COLOR TEST — OCEAN METALLIC
   ========================================================= */

body[data-view="home"]:not(.is-listening):not(.is-processing) .listen-button {
  background:
    radial-gradient(
      ellipse at 32% 20%,
      rgba(142,255,218,.78) 0%,
      rgba(67,222,173,.38) 17%,
      transparent 39%
    ),
    radial-gradient(
      circle at 50% 58%,
      #24bd91 0%,
      #119879 48%,
      #076454 78%,
      #043f39 100%
    ) !important;
}

/* =========================================================
   WEB 1.11 MATERIAL FINISH + FOOTER LOGO GLOW
   ========================================================= */


/* RECORDING — metallic red equivalent of ocean-green idle */

body[data-view="home"].is-listening .listen-button {
  background:
    radial-gradient(
      ellipse at 32% 20%,
      rgba(255,190,190,.72) 0%,
      rgba(255,104,111,.34) 17%,
      transparent 39%
    ),
    radial-gradient(
      circle at 50% 58%,
      #df4650 0%,
      #c92f3c 48%,
      #92222e 78%,
      #641923 100%
    ) !important;
}


/* FOOTER LOGO — make the mark itself clearer */

body[data-view="home"] .home-footer .vta-footer-mark {
  opacity:1 !important;

  filter:
    brightness(1.55)
    contrast(1.12)
    drop-shadow(0 0 4px rgba(121,255,246,.60))
    drop-shadow(0 0 12px rgba(67,229,219,.42))
    drop-shadow(0 0 26px rgba(35,196,187,.24)) !important;
}

/* ---------------------------------------------------------
   PAGE 1 FOOTER — remove legacy inline separator
   --------------------------------------------------------- */

body[data-view="home"] .home-footer span::after {
  content:none !important;
  display:none !important;
}

/* ================= END WEB 1.11 PAGE1 FINAL POLISH ================= */

/* =========================================================
   WEB 1.11 — STATUS / READ BUTTON SEPARATION
   ========================================================= */

/* =========================================================
   WEB 1.11 ? RESULT FOOTER LOGO CONTAINMENT
   Prevent shared VoiceToAyah footer mark from inheriting
   intrinsic SVG dimensions on Page 2.
   ========================================================= */

body[data-view="result"] .result-footer .vta-footer-mark {
  display:block !important;
  width:44px !important;
  height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
  flex:0 0 44px !important;
  object-fit:contain !important;
  margin:0 !important;
  opacity:.82 !important;
  filter:
    brightness(1.35)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(67,229,219,.28)) !important;
}


/* =========================================================
   WEB 1.11 — PROCESSING PRESENTATION CLEANUP
   Old Quran fact loader is intentionally suppressed.
   Voice search/inference behavior is unchanged.
   ========================================================= */

body[data-view="home"] .quran-fact-loader {
  display:none !important;
}

/* Keep the new 1.11 record control anchored consistently
   through recording and processing states. */
body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button {
  transform:translateY(-32px) !important;
}

body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status {
  transform:translateY(-32px) !important;
}


/* =========================================================
   WEB 1.11 — FINAL STATE POSITION STABILIZATION
   With the legacy processing fact removed, no positional
   compensation is required. Keep control/status in normal flow.
   ========================================================= */

body[data-view="home"].is-listening .listen-button,
body[data-view="home"].is-processing .listen-button {
  transform:none !important;
}

body[data-view="home"].is-listening .listen-status,
body[data-view="home"].is-processing .listen-status {
  transform:none !important;
}