.duas-page{background:var(--cream);}

.duas-hero{max-width:1200px;margin:0 auto;padding:4rem 6vw 2rem;text-align:center;}
.duas-hero .eyebrow{font-size:.78rem;letter-spacing:.06em;font-weight:700;color:var(--gold-dark);}
.duas-hero h1{font-family:'Fraunces',serif;font-size:clamp(2rem,4vw,3rem);color:var(--night);margin:.5rem 0;}
.duas-hero h1 span{color:var(--gold-dark);}
.duas-hero p{font-size:1.05rem;color:var(--ink-soft);max-width:620px;margin:0 auto 1.4rem;}

.duas-progress-wrap{max-width:480px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.4rem;}
.duas-progress-wrap b{color:var(--night);font-family:'Fraunces',serif;}
.duas-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:.6rem;}
.duas-bar i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .4s;}

/* Top-level Learn / Practice tabs */
.duas-tabs{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0 .6rem;padding:0 20px;}
.duas-tabs button{border:2px solid var(--line);background:var(--paper);color:var(--night);font-weight:700;font-family:'Fraunces',serif;padding:.7rem 1.3rem;border-radius:999px;cursor:pointer;font-size:.95rem;transition:.15s;}
.duas-tabs button.active{background:var(--night);border-color:var(--night);color:var(--cream);}
.duas-tabs button:hover{transform:translateY(-2px);}

.dua-main-panel{max-width:1200px;margin:0 auto;padding:1.2rem 6vw 5rem;display:none;}
.dua-main-panel.active{display:block;}

/* Category tabs */
.duas-cat-tabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem;}
.duas-cat-tabs button{border:2px solid var(--line);background:var(--paper);color:var(--night);font-weight:700;padding:.55rem 1rem;border-radius:999px;cursor:pointer;font-size:.85rem;transition:.15s;}
.duas-cat-tabs button.active{background:var(--gold);border-color:var(--gold);color:#3A2600;}

/* Dua card grid */
.dua-panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem;}
.dua-card{position:relative;border-radius:var(--radius);padding:1.2rem .7rem .9rem;text-align:center;cursor:pointer;border:1px solid rgba(0,0,0,.05);transition:transform .15s ease;font-family:inherit;}
.dua-card:hover{transform:translateY(-4px);}
.dua-icon{display:block;width:56px;height:56px;margin:0 auto;}
.dua-icon svg{display:block;width:100%;height:100%;}
.dua-title{display:block;margin-top:.5rem;font-weight:700;color:var(--ink-soft);font-size:.82rem;}
.dua-check{position:absolute;top:.5rem;right:.6rem;font-size:1rem;opacity:0;transition:.15s;color:var(--green);}
.dua-card.learned .dua-check{opacity:1;}
.dua-card.learned{box-shadow:0 0 0 2px var(--green) inset;}

.hue-gold{background:#FBF0DC;}
.hue-blue{background:#E4EEF5;}
.hue-purple{background:#EAE5F5;}
.hue-peach{background:#FBE7DA;}
.hue-green{background:#E4F0E7;}
.hue-pink{background:#F7E3E8;}

/* Dua detail modal */
.dua-modal{position:fixed;inset:0;background:rgba(31,58,92,.55);display:none;place-items:center;z-index:60;padding:18px;}
.dua-modal.show{display:grid;}
.dua-modal-box{background:var(--paper);border-radius:var(--radius);max-width:520px;width:100%;padding:2rem 1.8rem;position:relative;max-height:92vh;overflow:auto;}
.dua-modal-box .close{position:absolute;right:1rem;top:.9rem;border:0;background:var(--cream);border-radius:50%;width:36px;height:36px;font-size:1.3rem;cursor:pointer;color:var(--ink-soft);}
.dua-modal-head{text-align:center;margin-bottom:.4rem;}
.dua-modal-icon{display:block;width:88px;height:88px;margin:0 auto;}
.dua-modal-icon svg{display:block;width:100%;height:100%;}
.dua-quiz-icon{width:88px;height:88px;margin:0 auto;}
.dua-quiz-icon svg{display:block;width:100%;height:100%;}
.dua-modal-head h2{font-family:'Fraunces',serif;color:var(--night);margin:.4rem 0 0;}

.dua-arabic-wrap{background:var(--cream);border-radius:var(--radius-sm);padding:1.2rem;margin:1rem 0 .7rem;text-align:center;direction:rtl;}
.dua-arabic{font-family:'Fraunces',serif;font-size:1.9rem;color:var(--night);line-height:1.9;margin:0;transition:.2s;border-radius:10px;}
.dua-arabic.du-playing{background:#FFE993;box-shadow:0 0 0 3px #F5C518;color:#3A2600;}

.dua-translit{text-align:center;color:var(--gold-dark);font-weight:700;margin:0 0 1rem;}
.dua-meaning-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:.8rem;}
.dua-meaning-box b{color:var(--night);}
.dua-meaning-box p{color:var(--ink-soft);margin:.4rem 0 0;line-height:1.6;}
.dua-note{color:var(--ink-soft);font-size:.9rem;background:#FBF0DC;border-radius:var(--radius-sm);padding:.7rem 1rem;}

.dua-modal-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 .4rem;}
.dua-modal-actions button{border:0;border-radius:999px;padding:.65rem 1.2rem;font-weight:700;cursor:pointer;font-family:inherit;font-size:.9rem;}
.btn-play{background:var(--night);color:var(--cream);}
.btn-learned{background:var(--green);color:#fff;}
.btn-learned.done{background:#CFE4D6;color:#2F5B3E;}
.dua-audio-credit{text-align:center;color:var(--ink-soft);font-size:.78rem;margin-top:.4rem;}

/* Celebration */
.dua-burst{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);z-index:200;pointer-events:none;font-size:2.4rem;display:flex;gap:.6rem;}
.dua-burst span{animation:duaPop 1.2s ease-out forwards;}
.dua-burst span:nth-child(2){animation-delay:.08s;}
.dua-burst span:nth-child(3){animation-delay:.16s;}
@keyframes duaPop{
  0%{opacity:0;transform:translateY(10px) scale(.6);}
  30%{opacity:1;transform:translateY(-10px) scale(1.15);}
  100%{opacity:0;transform:translateY(-50px) scale(.9);}
}

.dua-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--night);color:var(--cream);padding:.8rem 1.3rem;border-radius:999px;z-index:100;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.2);display:none;}

/* Practice quiz (reuses quiz-wrap/quiz-options/quiz-feedback naming from qaida.css-style conventions) */
.quiz-wrap{max-width:600px;margin:1.2rem auto 0;}
.quiz-topline{display:flex;justify-content:space-between;font-weight:700;color:var(--night);margin-bottom:.8rem;}
.quiz-options{display:grid;gap:.7rem;}
.quiz-options button{border:2px solid var(--line);background:var(--paper);border-radius:var(--radius-sm);padding:.8rem 1rem;font-weight:700;color:var(--night);cursor:pointer;font-size:.95rem;text-align:left;}
.quiz-options button.correct{background:#E4F0E7;border-color:var(--green);}
.quiz-options button.incorrect{background:#F7E3E1;border-color:var(--peach);}
.quiz-feedback{min-height:1.6rem;font-weight:700;margin-top:1rem;text-align:center;}
.qcelebrate{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;font-size:1.1rem;line-height:1.8;margin-bottom:1rem;}
.play-all-btn{margin:1rem 0 0;background:var(--purple);color:#fff;border:0;border-radius:999px;padding:.6rem 1.2rem;font-weight:700;cursor:pointer;font-size:.9rem;}
.play-all-btn:hover{transform:translateY(-2px);}

@media(max-width:640px){
  .dua-panel-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
  .dua-arabic{font-size:1.5rem;}
  .quiz-prompt{font-size:2.6rem;}
}