*{box-sizing:border-box}

:root{
  color-scheme:dark;
  --bg:#06172a;
  --panel:#0b223a;
  --panel2:#0d2945;
  --line:rgba(185,203,216,.22);
  --text:#f5f1e8;
  --muted:#afc0cc;
  --cyan:#23d7de;
  --gold:#d2b46b;
}

html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 50% -15%,rgba(27,102,130,.32),transparent 42%),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif
}

body{
  padding-bottom:max(28px,env(safe-area-inset-bottom))
}

button,select,input{font:inherit}

.topbar{
  min-height:72px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:rgba(5,22,40,.92);
  backdrop-filter:blur(14px)
}

.back{
  justify-self:start;
  color:var(--text);
  text-decoration:none;
  padding:9px 12px;
  border:1px solid rgba(210,180,107,.38);
  border-radius:12px;
  background:rgba(210,180,107,.08);
  font-weight:700
}

.title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center
}

.title>span{
  color:var(--gold);
  font-size:1.55rem
}

.title h1{
  margin:0;
  font-size:1.15rem
}

.title p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:.72rem
}

.shell{
  width:min(100% - 22px,760px);
  margin:0 auto;
  padding:18px 0 28px
}

.selection-card,
.options-card,
.now-playing{
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(10,34,58,.82);
  box-shadow:0 18px 45px rgba(0,0,0,.18)
}

.selection-card,
.options-card{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:14px
}

.field{
  display:grid;
  gap:7px
}

.field label{
  color:var(--muted);
  font-size:.77rem;
  font-weight:700
}

.field select{
  width:100%;
  min-height:48px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#092038;
  color:var(--text);
  outline:none
}

.field select:focus{
  border-color:var(--cyan)
}

.now-playing{
  margin:14px 0;
  padding:26px 18px 20px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0,rgba(35,215,222,.12),transparent 45%),
    rgba(10,34,58,.9)
}

.quran-mark{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  font-size:2.8rem;
  line-height:1
}

#reciterName{
  color:var(--cyan);
  font-size:.78rem
}

#surahName{
  margin:7px 0 4px;
  font-size:clamp(1.7rem,7vw,2.5rem)
}

#ayahLabel{
  margin:0;
  color:var(--muted);
  font-size:.85rem
}

.main-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:25px 0 21px
}

.main-controls button{
  width:52px;
  height:52px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:1.2rem;
  cursor:pointer
}

.main-controls .play{
  width:70px;
  height:70px;
  border-color:rgba(35,215,222,.55);
  background:var(--cyan);
  color:#041522;
  font-size:1.6rem;
  box-shadow:0 0 30px rgba(35,215,222,.15)
}

.progress-row{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:9px;
  direction:ltr;
  color:var(--muted);
  font-size:.68rem
}

#progress{
  width:100%;
  accent-color:var(--cyan)
}

.options-card{
  margin-top:14px
}

.status{
  min-height:22px;
  margin:12px 0 0;
  text-align:center;
  color:var(--cyan);
  font-size:.76rem
}

.rights-note{
  margin:8px 4px 0;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  color:var(--muted);
  text-align:center;
  font-size:.69rem;
  line-height:1.7
}

@media(max-width:600px){
  .topbar{
    grid-template-columns:auto 1fr auto
  }

  .back{
    font-size:.75rem;
    padding:8px 9px
  }

  .title h1{
    font-size:1rem
  }

  .title p{
    font-size:.62rem
  }

  .shell{
    width:min(100% - 14px,760px);
    padding-top:10px
  }

  .selection-card,
  .options-card{
    grid-template-columns:1fr;
    gap:10px;
    padding:11px
  }

  .now-playing{
    margin:10px 0;
    border-radius:17px;
    padding:22px 12px 17px
  }

  .main-controls{
    gap:15px
  }
}


/* full-surah listening */
.options-card{
  grid-template-columns:1fr;
}


/* AFAQ_LISTEN_SMART_STOP */
.listen-options{
  display:grid;
  gap:0;
}
.listen-option-row{
  padding:16px 0;
}
.listen-option-row + .listen-option-row{
  border-top:1px solid rgba(55,43,31,.16);
}
.option-title{
  display:block;
  margin-bottom:10px;
  font-weight:700;
}
.listen-check{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  line-height:1.7;
}
.listen-check input{
  width:20px;
  height:20px;
  accent-color:#866438;
  flex:0 0 auto;
}
.stop-timer-controls{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  background:rgba(134,100,56,.08);
  text-align:center;
}
.stop-timer-controls input[type="range"]{
  width:100%;
  accent-color:#866438;
  cursor:pointer;
}
.stop-timer-controls strong{
  display:block;
  margin-top:9px;
  font-size:1rem;
  color:#211c17;
}