:root{
  color-scheme:dark;
  --bg:#eeeae2;
  --panel:#eeeae2;
  --panel2:#e5e0d7;
  --line:rgba(17,17,17,.14);
  --text:#111;
  --muted:#77736c;
  --accent:#111;
  --accent2:#111;
  --danger:#8b2d2d;
  --radius:20px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 18% 8%,rgba(17,17,17,.035),transparent 32%),
    radial-gradient(circle at 82% 18%,rgba(17,17,17,.025),transparent 28%),
    var(--bg);
  color:var(--text);
}
button,select,input{font:inherit}
.learn-shell{
  width:min(760px,100%);
  margin:auto;
  padding:24px 16px 48px;
}
.learn-header{
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:18px;
}
.back-link{
  color:var(--accent);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  white-space:nowrap;
}
.eyebrow{
  margin:0 0 4px;
  color:var(--accent2);
  font-size:.82rem;
}
h1,h2,p{margin-top:0}
h1{font-size:clamp(1.65rem,5vw,2.25rem);margin-bottom:8px}
.intro{color:var(--muted);line-height:1.7;margin-bottom:0}
.learning-panel,.ayah-view{
  background:linear-gradient(180deg,#f3efe7,#e9e4db);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
}
.panel-title,.ayah-view-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.panel-title>div,.ayah-view-head>div{display:flex;align-items:center;gap:10px}
.panel-title h2,.ayah-view-head h2{margin:0;font-size:1.15rem}
.step-mark{
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(100,210,255,.14);
  border:1px solid rgba(100,210,255,.4);
  color:var(--accent);
  font-weight:800;
}
.engine-state,.cycle-badge{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  color:var(--muted);
  font-size:.82rem;
}
.control-stack{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field>span,.range-box legend{font-weight:750}
select{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f7f3eb;
  color:var(--text);
  padding:13px 12px;
  min-height:48px;
  outline:none;
}
select:focus{border-color:var(--accent)}
select:disabled{opacity:.5}
.range-box{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin:0;
}
.range-box legend{padding:0 6px}
.range-box legend small{color:var(--muted);font-weight:500}
.range-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.hint{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.6;
  margin:10px 0 0;
}
.check-row{
  display:flex;
  gap:11px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
}
.check-row input{
  width:20px;height:20px;
  margin-top:2px;
  accent-color:#4ed0ff;
}
.check-row span{display:grid;gap:3px}
.check-row small{color:var(--muted)}
.session-summary{
  margin:16px 0 12px;
  border:1px dashed #355274;
  border-radius:14px;
  padding:12px;
  color:#111;
  line-height:1.65;
  background:rgba(255,255,255,.28);
}
.play-btn{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:16px;
  background:#111;
  color:#eeeae2;
  font-weight:900;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
}
.play-btn:disabled{opacity:.42;cursor:not-allowed}
.ayah-view{margin-top:16px}
.ayah-text{
  font-family:"Amiri Quran","Amiri",serif;
  font-size:clamp(1.55rem,6vw,2.2rem);
  line-height:2.05;
  text-align:center;
  padding:18px 10px;
}
.playback-status{
  color:var(--muted);
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:12px;
}
footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color:#7f93aa;
  font-size:.78rem;
  margin-top:20px;
}
.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  width:min(92vw,520px);
  background:#111;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  text-align:center;
  z-index:100;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.hidden{display:none!important}
@media(max-width:560px){
  .learn-shell{padding:14px 10px 34px}
  .learn-header{display:grid}
  .back-link{width:max-content}
  .learning-panel,.ayah-view{padding:14px;border-radius:17px}
  .range-grid{grid-template-columns:1fr 1fr}
}


/* AFAQ QURAN — LOCAL UTHMANI FONT */
@font-face {
  font-family: "KFGQPC Hafs Smart";
  src: url("./assets/fonts/HafsSmart_08.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

.ayah-text{
  font-family:"KFGQPC Hafs Smart",serif;
  font-synthesis:none;
  line-height:2.15;
  word-spacing:0;
  letter-spacing:0;
  text-rendering:optimizeLegibility;
}

/* ===== AFAQ FINAL LEARN LAYOUT ===== */
:root{
  --afaq-black:#080808;
  --afaq-paper:#eeeae2;
  --afaq-paper2:#e5e0d7;
  --afaq-ink:#111;
  --afaq-muted:#77736c;
  --afaq-line:rgba(17,17,17,.14);
  --afaq-header-h:62px;
}

body{
  padding-top:var(--afaq-header-h);
  background:var(--afaq-paper);
  color:var(--afaq-ink);
}

/* AFAQ inherited top banner */
.afaq-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--afaq-header-h);
  z-index:100;
  display:flex;
  align-items:center;
  background:rgba(8,8,8,.95);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.afaq-nav{
  width:min(1440px,94%);
  margin:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  direction:ltr;
}
.afaq-nav-side{
  display:flex;
  align-items:center;
}
.afaq-nav-right{justify-content:flex-start}
.afaq-nav-left{justify-content:flex-end}
.afaq-back,
.afaq-account{
  color:#aaa;
  font-size:11px;
  letter-spacing:.08em;
  text-decoration:none;
  transition:.2s ease;
}
.afaq-back:hover,
.afaq-account:hover{color:#fff}

.afaq-logo{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  direction:ltr;
  color:#fff;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.afaq-logo-dot{
  position:relative;
  display:inline-block;
  width:.22em;
  text-align:center;
  margin:0 .015em;
  color:var(--afaq-paper);
}
.afaq-logo-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:58%;
  width:.34em;
  height:.34em;
  border:1px solid rgba(238,234,226,.7);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  opacity:0;
  animation:afaqBrandPulse 4.6s ease-out infinite;
  pointer-events:none;
}
.logo-char{
  display:inline-block;
  transform-origin:50% 55%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  animation:afaqBrandSlowSignature 9.8s cubic-bezier(.16,.84,.24,1) infinite both;
  animation-delay:calc(var(--i) * 280ms);
}
@keyframes afaqBrandPulse{
  0%,72%,100%{transform:translate(-50%,-50%) scale(.25);opacity:0}
  76%{opacity:.65}
  88%{transform:translate(-50%,-50%) scale(2.6);opacity:0}
}
@keyframes afaqBrandSlowSignature{
  0%{opacity:.18;transform:perspective(600px) rotateY(-88deg) scale(.94)}
  10%{opacity:.72}
  22%{opacity:1;transform:perspective(600px) rotateY(8deg) scale(1.015)}
  28.5%,78%{opacity:1;transform:perspective(600px) rotateY(0) scale(1)}
  88%{opacity:.82}
  100%{opacity:.18;transform:perspective(600px) rotateY(88deg) scale(.94)}
}

/* Main spacing */
.learn-shell{
  width:min(760px,100%);
  margin:auto;
  padding:18px 14px 38px;
}
.learn-intro{
  margin-bottom:10px;
}
.learn-intro h1{
  margin-bottom:4px;
  font-size:clamp(1.45rem,4.5vw,1.9rem);
}
.learn-intro p:last-child{
  margin:0;
  color:var(--afaq-muted);
  font-size:.9rem;
}

/* Quran box: visually first and tighter */
.ayah-view{
  margin-top:8px;
  padding:14px;
  background:#f7f3eb;
  border:1px solid var(--afaq-line);
  box-shadow:none;
}
.ayah-view-head{
  margin-bottom:6px;
}
.ayah-view-head h2{
  color:#111;
}
.ayah-text{
  color:#050505;
  font-weight:400;
  font-size:clamp(1.8rem,7vw,2.55rem);
  line-height:2.25;
  padding:12px 6px 14px;
  text-shadow:0 0 .01px #000;
}
.playback-status{
  color:#5b5852;
  border-top:1px solid var(--afaq-line);
  padding-top:9px;
}

/* Play + auto next share one row */
.primary-actions{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:10px;
  margin-top:10px;
  align-items:stretch;
}
.play-btn{
  min-height:52px;
  width:100%;
  margin:0;
  border-radius:14px;
  background:#111;
  color:#eeeae2;
}
.auto-next-inline{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border:1px solid var(--afaq-line);
  border-radius:14px;
  background:#f7f3eb;
  cursor:pointer;
}
.auto-next-inline input{
  width:20px;
  height:20px;
  margin:0;
  accent-color:#111;
  flex:0 0 auto;
}
.auto-next-inline span{
  display:grid;
  gap:1px;
  min-width:0;
}
.auto-next-inline strong{
  font-size:.9rem;
  color:#111;
}
.auto-next-inline small{
  color:var(--afaq-muted);
  font-size:.72rem;
  line-height:1.35;
}

/* Summary directly under play controls */
.session-summary{
  margin:8px 0 10px;
  padding:10px 12px;
  min-height:auto;
  border:1px solid var(--afaq-line);
  border-radius:12px;
  background:#e9e4db;
  color:#111;
  font-size:.84rem;
  line-height:1.55;
}

/* Compact session settings at bottom */
.compact-panel{
  padding:13px;
  border-radius:15px;
  box-shadow:none;
  background:#eeeae2;
}
.compact-panel .panel-title{
  margin-bottom:10px;
}
.compact-panel .panel-title h2{
  font-size:1rem;
}
.compact-controls{
  gap:10px;
}
.compact-controls .field{
  gap:5px;
}
.compact-controls .field>span,
.compact-controls .range-box legend{
  font-size:.84rem;
}
.compact-controls select{
  min-height:42px;
  padding:9px 10px;
  border-radius:11px;
  background:#f7f3eb;
  color:#111;
}
.compact-controls .range-box{
  padding:10px;
  border-radius:12px;
}
.compact-controls .hint{
  margin-top:7px;
  font-size:.76rem;
}
.repeat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

footer{
  color:#77736c;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--afaq-line);
}

/* Ensure inherited Quran font stays local and dark */
@font-face{
  font-family:"KFGQPC Hafs Smart";
  src:url("./assets/fonts/HafsSmart_08.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:block;
}
.ayah-text{
  font-family:"KFGQPC Hafs Smart",serif;
  font-synthesis:none;
}

@media(max-width:560px){
  .afaq-nav{width:94%}
  .afaq-logo{font-size:18px}
  .afaq-back,.afaq-account{font-size:9px;letter-spacing:.04em}
  .learn-shell{padding:12px 10px 28px}
  .learn-intro{margin-bottom:7px}
  .primary-actions{
    grid-template-columns:minmax(105px,.72fr) minmax(0,1.28fr);
    gap:8px;
  }
  .play-btn{min-height:50px;font-size:.95rem}
  .auto-next-inline{min-height:50px;padding:7px 9px}
  .auto-next-inline strong{font-size:.82rem}
  .auto-next-inline small{font-size:.68rem}
  .repeat-grid{grid-template-columns:1fr 1fr}
}

@media(prefers-reduced-motion:reduce){
  .logo-char,.afaq-logo-dot::after{
    animation:none!important;
  }
}


/* ===== AFAQ FINAL VISUAL TOUCH — UI ONLY ===== */
.learn-intro{
  margin:0 0 8px;
  min-height:0;
  text-align:center;
}
.learn-intro h1{
  margin:0;
  padding:2px 0 3px;
  text-align:center;
  font-family:"Reem Kufi Fun","Segoe UI",Arial,sans-serif;
  font-size:clamp(1.35rem,4.2vw,1.72rem);
  font-weight:600;
  line-height:1.38;
  letter-spacing:0;
  color:#111;
}

/* Uthmani Quran: darker and slightly larger without disturbing harakat */
.ayah-text{
  color:#000;
  font-size:clamp(1.9rem,7.2vw,2.65rem);
  font-weight:400;
  line-height:2.25;
  -webkit-text-stroke:.06px #000;
  text-shadow:none;
}

@media(max-width:560px){
  .learn-intro{
    margin-bottom:6px;
  }
  .learn-intro h1{
    font-size:clamp(1.3rem,5.4vw,1.58rem);
    padding:1px 0 2px;
  }
  .ayah-text{
    font-size:clamp(1.95rem,7.8vw,2.5rem);
  }
}

/* ===== LOCAL AFAQ KUFI — Reem Kufi Fun ===== */
@font-face{
  font-family:"Reem Kufi Fun";
  src:url("./assets/fonts/reem-kufi-fun/ReemKufiFun-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Reem Kufi Fun";
  src:url("./assets/fonts/reem-kufi-fun/ReemKufiFun-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Reem Kufi Fun";
  src:url("./assets/fonts/reem-kufi-fun/ReemKufiFun-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
.learn-intro h1{
  font-family:"Reem Kufi Fun","Segoe UI",Arial,sans-serif;
  font-weight:600;
}

/* Quran width test — keep original size/thickness */
.ayah-text{
  transform:scaleX(1.04);
  transform-origin:center;
}

/* ===== AFAQ HEADER FINAL POSITIONING ===== */
.afaq-nav-right{
  grid-column:3;
  grid-row:1;
  justify-content:flex-end;
}
.afaq-nav-left{
  grid-column:1;
  grid-row:1;
  justify-content:flex-start;
}
.afaq-brand-center{
  grid-column:2;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:max-content;
}

/* AFAQ_HEADER_MINI_WORLD_CLOCK_FINAL */
.afaq-header-clock{
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  direction:ltr;
  color:#fff;
  white-space:nowrap;
  font-family:"Segoe UI",Arial,sans-serif;
  pointer-events:auto
}

.afaq-header-clock-time{
  color:#fff;
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums
}

.afaq-clock-zone-wrap{
  position:relative
}

.afaq-clock-zone-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  cursor:pointer
}

.afaq-clock-zone-btn:hover{
  color:#fff
}

.afaq-clock-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:190px;
  max-height:260px;
  overflow-y:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(8,8,8,.96);
  box-shadow:0 14px 40px rgba(0,0,0,.34);
  display:none;
  z-index:400
}

.afaq-clock-menu.open{
  display:block
}

.afaq-clock-country{
  width:100%;
  border:0;
  border-radius:8px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  color:#ddd;
  font-family:inherit;
  font-size:11px;
  cursor:pointer;
  text-align:start
}

.afaq-clock-country:hover{
  background:rgba(255,255,255,.08);
  color:#fff
}

.afaq-clock-country b{
  color:#fff;
  font-size:9px;
  letter-spacing:.08em
}

@media(max-width:520px){
  .afaq-header-clock{
    bottom:5px;
    gap:4px
  }

  .afaq-header-clock-time{
    font-size:9px
  }

  .afaq-clock-zone-btn{
    font-size:7px
  }

  .afaq-clock-menu{
    width:180px
  }
}