: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 var(--line);
  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:flex;justify-content:space-between;gap:20px;align-items:center;
  padding:15px 20px;margin-bottom:13px
}
.heard-copy{min-width:0;flex:1}
.heard-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end
}
.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
}
.heard-arabic{font-family:var(--arabic-verse-font);font-size:20px;margin-top:7px;text-align:left}
.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}
.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%);padding:30px;position:relative}
.context-dialog h3{font-size:24px;margin:9px 0 14px}.context-dialog p{line-height:1.75;color:#d9e9e8}
.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:13px 11px}.heard-arabic{font-size:17px}.status-chip{font-size:9px;padding:4px 8px}.heard-actions{gap:7px}.heard-search-again{font-size:9px;padding:4px 8px;min-height:28px}
  .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}
  .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 !important;
  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{
  opacity:1 !important;
  animation:eqSquareRipple 1.8s ease-out 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;
  }
}