@font-face{font-family:'KFGQPC HAFS';src:url(../assets/fonts/kfgqpc-hafs.woff2) format('woff2');font-display:swap;}

  :root{
    --bg-deep:#0a1310;
    --bg-1:#101c16;
    --bg-2:#16261e;
    --bg-3:#1d3026;
    --green-soft:#7fb89a;
    --green-bright:#a8dab9;
    --gold:#d6ae6b;
    --gold-bright:#f2ce85;
    --warm-alert:#d99a5b;
    --text-1:#ecf2ec;
    --text-2:#93a89a;
    --text-3:#5d7064;
    --border-soft: rgba(214,174,107,0.16);
    --border-green: rgba(127,184,154,0.22);
    --shadow-green: 0 10px 30px -10px rgba(127,184,154,0.25);
    --shadow-gold: 0 10px 30px -8px rgba(214,174,107,0.35);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
    --font-ar:'Amiri', serif;
    --font-quran:'KFGQPC HAFS','Amiri Quran','Amiri', serif;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg-deep);
    color: var(--text-1);
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  button{ font-family: inherit; cursor:pointer; }

  #bg-ambient{ position: fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  #bg-ambient::before, #bg-ambient::after{ content:''; position:absolute; border-radius:50%; filter: blur(60px); }
  #bg-ambient::before{
    width:420px; height:420px; left:-120px; top:-100px;
    background: radial-gradient(circle, rgba(127,184,154,0.16), transparent 70%);
    animation: drift1 22s ease-in-out infinite alternate;
  }
  #bg-ambient::after{
    width:480px; height:480px; right:-160px; bottom:-140px;
    background: radial-gradient(circle, rgba(214,174,107,0.14), transparent 70%);
    animation: drift2 26s ease-in-out infinite alternate;
  }
  @keyframes drift1{ from{ transform:translate(0,0); } to{ transform:translate(40px,30px); } }
  @keyframes drift2{ from{ transform:translate(0,0); } to{ transform:translate(-30px,-40px); } }
  @media (prefers-reduced-motion: reduce){ #bg-ambient::before, #bg-ambient::after{ animation:none; } }

  #confetti{ position:fixed; inset:0; z-index:50; pointer-events:none; }

  .praise{
    position:fixed; top:16%; left:50%; transform: translate(-50%,-10px) scale(0.9);
    z-index:60; pointer-events:none; opacity:0;
    font-family: var(--font-body); font-weight:800; font-size: clamp(20px,5.5vw,28px);
    color: var(--gold-bright); text-shadow: 0 0 18px rgba(242,206,133,0.5);
    transition: opacity .25s ease, transform .25s ease;
    text-align:center; white-space:nowrap;
  }
  .praise.is-gentle{ color: var(--green-bright); text-shadow: 0 0 14px rgba(168,218,185,0.4); }
  .praise.show{ opacity:1; transform: translate(-50%,0) scale(1); }

  #app{ position:relative; z-index:1; max-width:480px; margin:0 auto; padding: 18px 16px 48px; min-height:100vh; }

  .topbar{ display:flex; align-items:center; justify-content:space-between; padding: 4px 2px 18px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand-mark{
    width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    font-family: var(--font-ar); font-weight:700; font-size:20px; color: var(--bg-deep);
    background: linear-gradient(135deg, var(--gold-bright), var(--green-soft));
    box-shadow: var(--shadow-gold); padding-bottom:3px;
  }
  .brand-name{ font-family: var(--font-body); font-weight:800; font-size:19px; letter-spacing:0.2px; }
  .brand-sub{ font-size:11px; color: var(--text-2); margin-top:-2px; }

  .streak-chip{
    display:flex; align-items:center; gap:5px;
    background: var(--bg-2); border:1px solid var(--border-soft);
    padding: 6px 12px; border-radius: 999px;
  }
  .streak-icon{ color: var(--gold-bright); font-size:13px; }
  .ico{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .ico-fill{ fill:currentColor; stroke:none; }
  .ico-lg{ width:1.5em; height:1.5em; }
  .praise-ico{ width:1.05em; height:1.05em; vertical-align:-0.13em; margin-right:7px; filter: drop-shadow(0 0 7px currentColor); }
  .greet-ico{ vertical-align:-0.18em; margin-right:6px; }
  .summary-ico{ display:flex; justify-content:center; margin:0 0 8px; }
  .summary-ico svg{ width:36px; height:36px; filter: drop-shadow(0 0 13px rgba(242,206,133,0.4)); }
  .streak-num{ font-family: var(--font-body); font-weight:800; font-size:15px; color: var(--gold-bright); }
  .streak-label{ font-size:12px; color: var(--text-2); }

  .loading{ text-align:center; padding: 80px 20px; color: var(--text-2); font-size:15px; }

  /* ---- HOME ---- */
  .hero{ text-align:center; padding: 6px 0 20px; }
  .hero-eyebrow{ margin:0 0 14px; font-size:13px; color: var(--text-2); }
  .streak-hero{ display:flex; align-items:center; justify-content:center; gap:8px; }
  .streak-hero-icon{ font-size:22px; color: var(--gold-bright); filter: drop-shadow(0 0 10px rgba(242,206,133,0.5)); }
  .streak-hero-num{
    font-family: var(--font-body); font-weight:800; font-size: clamp(48px,16vw,64px);
    color: var(--gold-bright); text-shadow: 0 0 30px rgba(242,206,133,0.35); line-height:1;
  }
  .streak-hero-label{ margin:6px 0 0; font-size:13px; color: var(--text-2); }

  .card{
    background: var(--bg-1); border:1px solid var(--border-soft);
    border-radius: var(--radius-lg); padding: 18px; margin-bottom:14px;
  }

  .stats-row{ display:flex; justify-content:space-between; gap:8px; margin-bottom:14px; }
  .stats-item{ flex:1; text-align:center; }
  .stats-num{ display:block; font-family: var(--font-body); font-weight:800; font-size: clamp(20px,6vw,26px); color: var(--green-bright); }
  .stats-item:nth-child(2) .stats-num{ color: var(--warm-alert); }
  .stats-item:nth-child(3) .stats-num{ color: var(--gold-bright); }
  .stats-label{ display:block; font-size:11px; color: var(--text-2); margin-top:2px; }

  .progress-track{ height:9px; border-radius:999px; background: var(--bg-3); overflow:hidden; }
  .progress-fill{ height:100%; border-radius:999px; background: linear-gradient(90deg, var(--green-soft), var(--gold)); transition: width .5s ease; }
  .progress-caption{ margin:9px 0 0; font-size:12.5px; color: var(--text-2); text-align:center; }

  .focus-banner{
    width:100%; display:flex; align-items:center; gap:12px; text-align:left;
    background: linear-gradient(135deg, rgba(217,154,91,0.16), rgba(217,154,91,0.06));
    border:1px solid rgba(217,154,91,0.35); border-radius: var(--radius-md);
    padding: 13px 14px; margin-bottom:14px; color: var(--text-1);
  }
  .focus-banner--new{
    background: linear-gradient(135deg, rgba(127,184,154,0.16), rgba(127,184,154,0.05));
    border-color: var(--border-green);
  }
  .focus-banner-icon{ font-size:20px; flex-shrink:0; }
  .focus-banner-text{ flex:1; font-size:13.5px; line-height:1.35; color: var(--text-2); }
  .focus-banner-text strong{ color: var(--warm-alert); }
  .focus-banner--new .focus-banner-text strong{ color: var(--green-bright); }
  .focus-banner-arrow{ color: var(--warm-alert); font-size:16px; }
  .focus-banner--new .focus-banner-arrow{ color: var(--green-bright); }

  .mode-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:14px; }
  .mode-card{
    border-radius: var(--radius-md); padding: 18px 12px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    border:1px solid var(--border-soft); background: var(--bg-1); transition: transform .15s ease;
  }
  .mode-card:active{ transform: scale(0.97); }
  .mode-card--green{ background: linear-gradient(160deg, rgba(127,184,154,0.16), var(--bg-1) 60%); border-color: var(--border-green); box-shadow: var(--shadow-green); }
  .mode-card--gold{ background: linear-gradient(160deg, rgba(214,174,107,0.18), var(--bg-1) 60%); border-color: var(--border-soft); box-shadow: var(--shadow-gold); }
  .mode-icon{ font-size:26px; color:#ffffff; }
  .mode-title{ font-family: var(--font-body); font-weight:800; font-size:16px; margin-top:2px; color: var(--green-bright); }
  .mode-desc{ font-size:11.5px; color: var(--text-2); line-height:1.3; }

  /* ---- MAP ---- */
  .map-title{ font-family: var(--font-body); font-weight:800; font-size:17px; margin:0 0 2px; }
  .map-sub{ font-size:12px; color: var(--text-2); margin:0 0 14px; }

  .surah-strip{ display:flex; gap:8px; overflow-x:auto; padding: 2px 2px 10px; margin: 0 -4px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .surah-strip::-webkit-scrollbar{ display:none; }
  .surah-chip{
    flex-shrink:0; min-width:78px; text-align:left; padding:9px 11px; border-radius:12px;
    background: var(--bg-2); border:1px solid var(--border-soft); color: var(--text-2);
    display:flex; flex-direction:column; gap:5px; transition: transform .12s ease;
  }
  .surah-chip:active{ transform: scale(0.96); }
  .surah-chip.is-active{ background: linear-gradient(160deg, rgba(214,174,107,0.2), var(--bg-2)); border-color: var(--gold); box-shadow: var(--shadow-gold); }
  .surah-chip-no{ font-size:10px; color: var(--text-3); font-weight:700; }
  .surah-chip.is-active .surah-chip-no{ color: var(--gold); }
  .surah-chip-name{ font-size:12.5px; font-weight:700; color: var(--text-1); white-space:nowrap; }
  .surah-chip-bar{ height:4px; border-radius:999px; background: var(--bg-3); overflow:hidden; }
  .surah-chip-bar > i{ display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--green-soft), var(--gold-bright)); }

  .surah-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin: 6px 0 4px; }
  .surah-head-name{ font-family: var(--font-ar); font-size:30px; color: var(--gold-bright); line-height:1.1; }
  .surah-head-meta{ text-align:right; }
  .surah-head-translit{ font-size:14px; font-weight:700; color: var(--text-1); }
  .surah-head-arti{ font-size:11.5px; color: var(--text-2); }

  .ayat-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin: 12px 0 4px; }
  .ayat-cell{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:9px; font-size: clamp(11px,3.2vw,13px); font-weight:700;
    border:1px solid transparent; padding:0; color: var(--text-2);
  }
  .ayat-cell--new{ background: var(--bg-2); color: var(--text-3); border-color: var(--border-soft); }
  .ayat-cell--learning{ background: rgba(127,184,154,0.18); color: var(--green-bright); border-color: rgba(127,184,154,0.35); }
  .ayat-cell--review{ background: rgba(217,154,91,0.2); color: var(--warm-alert); border-color: rgba(217,154,91,0.45); }
  .ayat-cell--mastered{ background: rgba(214,174,107,0.22); color: var(--gold-bright); border-color: rgba(214,174,107,0.5); box-shadow: 0 0 8px rgba(242,206,133,0.25); }
  .ayat-cell:active{ transform: scale(0.92); }

  .surah-train-btn{
    width:100%; margin-top:12px; padding:13px; border-radius: var(--radius-md); border:1px solid var(--border-green);
    background: linear-gradient(135deg, rgba(127,184,154,0.22), var(--bg-1)); color: var(--green-bright);
    font-weight:700; font-size:14px;
  }

  /* view toggle: mushaf / angka */
  .map-toggle{ display:flex; gap:6px; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:12px; padding:4px; margin:14px 0 0; }
  .map-toggle button{ flex:1; padding:9px; border:none; background:transparent; color:var(--text-2); font-weight:700; font-size:12.5px; border-radius:9px; transition: background .15s, color .15s; }
  .map-toggle button.is-active{ background:linear-gradient(135deg, rgba(214,174,107,0.25), var(--bg-3)); color:var(--gold-bright); }

  /* mushaf reading panel */
  .mushaf-page{
    margin-top:12px; max-height:360px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background: radial-gradient(120% 90% at 50% 0%, rgba(214,174,107,0.07), var(--bg-2) 62%);
    border:1px solid var(--border-soft); border-radius: var(--radius-md);
    padding:18px 16px 18px; position:relative; touch-action: pan-y;
  }
  .mushaf-page::-webkit-scrollbar{ width:4px; }
  .mushaf-page::-webkit-scrollbar-thumb{ background:var(--bg-3); border-radius:4px; }
  .mushaf-bism{ font-family:var(--font-quran); direction:rtl; text-align:center; font-size:clamp(18px,5.2vw,23px); color:var(--green-bright); margin:0 0 14px; padding-bottom:13px; border-bottom:1px solid var(--border-soft); }
  .mushaf-body{ font-family:var(--font-quran); direction:rtl; text-align:justify; line-height:2.55; font-size:clamp(20px,6vw,27px); }
  .mushaf-ayah{ cursor:pointer; border-radius:6px; padding:0 1px; transition: color .25s ease, background .15s ease; }
  .mushaf-ayah--new{ color:var(--text-2); }
  .mushaf-ayah--learning{ color:var(--green-bright); }
  .mushaf-ayah--review{ color:var(--warm-alert); }
  .mushaf-ayah--mastered{ color:var(--gold-bright); text-shadow:0 0 14px rgba(242,206,133,0.35); }
  .mushaf-ayah:active{ background: rgba(214,174,107,0.16); }
  .ayah-end{ font-family:var(--font-ar); font-size:0.82em; color:var(--gold); padding:0 2px; }
  .mushaf-hint{ text-align:center; font-size:11px; color:var(--text-3); margin-top:14px; line-height:1.5; }

  .map-legend{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
  .legend-item{ display:flex; align-items:center; gap:5px; font-size:10.5px; color: var(--text-2); }
  .legend-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .legend-dot--new{ background: var(--bg-3); }
  .legend-dot--learning{ background: var(--green-soft); }
  .legend-dot--review{ background: var(--warm-alert); }
  .legend-dot--mastered{ background: var(--gold-bright); }

  .reset-link{
    display:block; text-align:center; margin: 18px auto 0; background:none; border:none;
    color: var(--text-3); font-size:11.5px; text-decoration:underline; text-underline-offset:2px;
  }

  .credit{ text-align:center; font-size:10.5px; color: var(--text-3); margin-top:14px; line-height:1.5; }

  /* ---- PRACTICE ---- */
  .practice-top{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
  .exit-btn{ background: var(--bg-2); border:1px solid var(--border-soft); color: var(--text-2); width:34px; height:34px; border-radius:10px; font-size:15px; flex-shrink:0; }
  .practice-progress{ flex:1; font-size:12.5px; color: var(--text-2); }
  .streak-chip-mini{ font-size:12px; color: var(--gold-bright); white-space:nowrap; }
  .practice-bar{ height:6px; border-radius:999px; background: var(--bg-2); overflow:hidden; margin-bottom:22px; }
  .practice-bar-fill{ height:100%; background: linear-gradient(90deg, var(--green-soft), var(--gold)); transition: width .4s ease; }

  .q-ref{ text-align:center; font-size:12.5px; color: var(--text-2); margin-bottom:14px; }
  .q-ref b{ color: var(--green-bright); font-weight:700; }

  /* flashcard */
  .flash-wrap{ padding: 4px 0 4px; }
  .flashcard{ width:100%; min-height:280px; perspective:1400px; background:none; border:none; padding:0; display:block; }
  .flashcard-inner{ position:relative; width:100%; min-height:280px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,.2,.2,1); }
  .flashcard.is-flipped .flashcard-inner{ transform: rotateY(180deg); }
  .flashcard-face{
    position:absolute; inset:0; border-radius: var(--radius-lg); backface-visibility:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    border:1px solid var(--border-soft); padding: 24px 20px;
  }
  .flashcard-face--front{ background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); box-shadow: var(--shadow-green); }
  .flashcard-face--back{ background: linear-gradient(160deg, rgba(214,174,107,0.16), var(--bg-1)); transform: rotateY(180deg); box-shadow: var(--shadow-gold); }
  .flash-cue-label{ font-size:12px; color: var(--text-2); }
  .flash-cue{ font-size: clamp(17px,5vw,21px); line-height:1.5; color: var(--text-1); text-align:center; font-weight:500; }
  .flash-hint{ font-size:12px; color: var(--text-3); margin-top:2px; }
  .flash-ar{ font-family: var(--font-quran); direction:rtl; font-size: clamp(28px,8.5vw,42px); line-height:1.9; color: var(--gold-bright); text-shadow: 0 0 22px rgba(242,206,133,0.3); text-align:center; }
  .flash-translit{ font-size:12.5px; color: var(--text-2); font-style:italic; text-align:center; line-height:1.5; }

  .flash-actions{ display:flex; gap:10px; margin-top:18px; }
  .flash-actions.is-hidden{ visibility:hidden; opacity:0; }
  .flash-btn{ flex:1; border-radius: var(--radius-md); padding:14px 8px; font-size:14px; font-weight:700; border:1px solid var(--border-soft); background: var(--bg-1); color: var(--text-1); }
  .flash-btn--know{ background: linear-gradient(135deg, rgba(127,184,154,0.25), var(--bg-1)); border-color: var(--border-green); color: var(--green-bright); }
  .flash-btn--retry{ color: var(--text-2); }

  /* quiz */
  .quiz-wrap{ padding: 2px 0 4px; }
  .quiz-prompt-label{ text-align:center; font-size:13px; color: var(--text-2); margin-bottom:14px; }
  .quiz-prompt{
    background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); border:1px solid var(--border-soft);
    border-radius: var(--radius-md); padding: 20px 18px; margin-bottom:8px; box-shadow: var(--shadow-green);
  }
  .quiz-prompt-ar{ font-family: var(--font-quran); direction:rtl; text-align:center; font-size: clamp(24px,7vw,34px); line-height:1.95; color: var(--text-1); }
  .quiz-ask{ text-align:center; font-size:13px; color: var(--gold-bright); margin: 14px 0 14px; font-weight:600; }
  .quiz-options{ display:flex; flex-direction:column; gap:10px; }
  .quiz-opt{
    width:100%; text-align:right; padding: 16px 16px; border-radius: var(--radius-md);
    background: var(--bg-1); border:1px solid var(--border-soft); color: var(--text-1);
    transition: transform .12s ease; line-height:1.6;
  }
  .quiz-opt--ar{ font-family: var(--font-quran); direction:rtl; font-size: clamp(19px,5.4vw,25px); }
  .quiz-opt--id{ font-family: var(--font-body); direction:ltr; text-align:left; font-size: 14.5px; }
  .quiz-opt:active{ transform: scale(0.98); }
  .quiz-opt.is-correct{ background: rgba(127,184,154,0.22); border-color: var(--green-soft); color: var(--green-bright); }
  .quiz-opt.is-wrong{ background: rgba(217,154,91,0.2); border-color: var(--warm-alert); color: var(--warm-alert); animation: shake .35s ease; }
  .quiz-opt.is-disabled{ opacity:0.4; }
  @keyframes shake{ 0%,100%{ transform: translateX(0); } 25%{ transform: translateX(-5px); } 75%{ transform: translateX(5px); } }

  .next-btn{
    width:100%; margin-top:18px; padding:15px; border-radius: var(--radius-md); border:none;
    font-family: var(--font-body); font-weight:800; font-size:15px; color: var(--bg-deep);
    background: linear-gradient(135deg, var(--gold-bright), var(--green-soft)); box-shadow: var(--shadow-gold);
  }

  /* ---- AYAT DETAIL ---- */
  .detail-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .detail-back{ background:var(--bg-2); border:1px solid var(--border-soft); color:var(--text-1); width:36px; height:36px; border-radius:11px; font-size:18px; flex-shrink:0; }
  .detail-ref{ flex:1; min-width:0; }
  .detail-ref-name{ font-weight:800; font-size:16px; }
  .detail-ref-sub{ font-size:12px; color:var(--text-2); }
  .detail-status{ font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
  .detail-status--new{ background:var(--bg-2); color:var(--text-3); border:1px solid var(--border-soft); }
  .detail-status--learning{ background:rgba(127,184,154,0.18); color:var(--green-bright); border:1px solid rgba(127,184,154,0.35); }
  .detail-status--review{ background:rgba(217,154,91,0.2); color:var(--warm-alert); border:1px solid rgba(217,154,91,0.45); }
  .detail-status--mastered{ background:rgba(214,174,107,0.22); color:var(--gold-bright); border:1px solid rgba(214,174,107,0.5); }
  .detail-ar{
    font-family:var(--font-quran); direction:rtl; text-align:center; font-size:clamp(28px,9vw,42px); line-height:2.15;
    color:var(--gold-bright); background:linear-gradient(160deg, rgba(214,174,107,0.12), var(--bg-1));
    border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:22px 18px; box-shadow:var(--shadow-gold); margin-bottom:16px;
  }
  .detail-block{ margin-bottom:16px; }
  .detail-label{ font-size:11px; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; }
  .detail-translit{ font-style:italic; color:var(--green-bright); font-size:15px; line-height:1.7; }
  .detail-translit.is-loading{ color:var(--text-3); font-style:normal; font-size:12.5px; }
  .detail-arti{ font-size:15px; line-height:1.65; color:var(--text-1); }
  .detail-card{ background:var(--bg-1); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:16px; }
  .detail-tafsir{ font-size:14px; line-height:1.85; color:var(--text-2); white-space:pre-wrap; }
  .detail-tafsir-src{ font-size:11px; color:var(--text-3); margin-top:10px; padding-top:10px; border-top:1px solid var(--border-soft); }
  .tafsir-toggle{ margin:0 0 12px; }
  .taflevel-toggle{ margin:-4px 0 12px; }
  .tafsir-toggle button{ font-size:11.5px; line-height:1.3; padding:8px 6px; }
  .detail-train{
    width:100%; margin-top:6px; padding:16px; border-radius:var(--radius-md); border:none;
    font-family:var(--font-body); font-weight:800; font-size:15px; color:var(--bg-deep);
    background:linear-gradient(135deg, var(--gold-bright), var(--green-soft)); box-shadow:var(--shadow-gold);
  }

  /* ---- SUMMARY ---- */
  .summary-card{ text-align:center; padding: 30px 10px 10px; }
  .summary-ring{
    width:140px; height:140px; border-radius:50%; margin: 0 auto 22px; position:relative;
    background: conic-gradient(var(--gold-bright) calc(var(--pct) * 1%), var(--bg-2) 0);
    display:flex; align-items:center; justify-content:center;
  }
  .summary-ring::before{ content:''; position:absolute; inset:9px; border-radius:50%; background: var(--bg-deep); }
  .summary-pct{ position:relative; z-index:1; font-family: var(--font-body); font-weight:800; font-size:28px; color: var(--gold-bright); }
  .summary-msg{ font-family: var(--font-body); font-weight:800; font-size: clamp(19px,5.5vw,23px); margin:0 0 6px; }
  .summary-detail{ color: var(--text-2); font-size:14px; margin: 0 0 28px; }
  .summary-actions{ display:flex; gap:10px; }
  .btn{ flex:1; padding:14px; border-radius: var(--radius-md); font-weight:700; font-size:14px; border:1px solid var(--border-soft); }
  .btn--ghost{ background: transparent; color: var(--text-2); }
  .btn--solid{ background: linear-gradient(135deg, var(--gold-bright), var(--green-soft)); color: var(--bg-deep); border:none; box-shadow: var(--shadow-gold); }

  @media (min-width: 520px){ #app{ padding-top: 28px; } }
  .asbab-section{ margin:14px 0 10px; padding:12px 14px; border-left:3px solid var(--gold); background:rgba(214,174,107,.07); border-radius:0 8px 8px 0; }
  .asbab-title{ font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--gold); text-transform:uppercase; margin-bottom:6px; }
  .asbab-body{ font-size:13.5px; line-height:1.68; color:var(--text-2,#9ba8b4); }
  .asbab-body em{ font-style:italic; color:var(--text-1,#c8d0d8); }
  .surah-check-toggle-all{ display:block; margin:12px 0 10px auto; background:var(--bg-2); border:1px solid var(--border-soft); color:var(--gold-bright); font-size:12px; font-weight:700; padding:7px 13px; border-radius:9px; }
  .surah-check-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin-bottom:16px; }
  .surah-check-chip{ display:flex; align-items:center; gap:7px; padding:10px 11px; border-radius:11px; background:var(--bg-2); border:1px solid var(--border-soft); text-align:left; }
  .surah-check-chip.is-checked{ background: linear-gradient(160deg, rgba(214,174,107,0.18), var(--bg-2)); border-color: var(--gold); }
  .surah-check-box{ width:16px; height:16px; flex-shrink:0; border-radius:5px; border:1.5px solid var(--border-soft); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); }
  .surah-check-chip.is-checked .surah-check-box{ border-color:var(--gold); }
  .surah-check-box .ico{ width:13px; height:13px; }
  .surah-check-no{ font-size:10px; color:var(--text-3); font-weight:700; flex-shrink:0; }
  .surah-check-name{ font-size:12.5px; font-weight:700; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }