:root{
  --emerald:#0e6b4f; --emerald-dark:#0b3d2c; --gold:#d4af37; --gold-soft:#f3e5b8;
  --bg:#f7f4ec; --card:#ffffff; --text:#1d2a24; --muted:#5c6f66; --danger:#c0392b;
  --radius:18px; --shadow:0 6px 24px rgba(11,61,44,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;line-height:1.7}
h1,h2{font-family:"Amiri","Cairo",serif}
.hero{background:linear-gradient(160deg,var(--emerald-dark),var(--emerald));
  color:#fff;text-align:center;padding:2.5rem 1rem 2rem;border-bottom:6px solid var(--gold)}
.hero-inner{max-width:820px;margin:0 auto}
.logo{font-size:3rem}
.hero h1{font-size:2.8rem;margin:.2rem 0;color:var(--gold-soft)}
.tagline{font-size:1.1rem;opacity:.95;margin:.4rem auto;max-width:640px}
.verse{font-family:"Amiri",serif;font-size:1.35rem;color:var(--gold)}
.big-choices{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0}
.choice-btn{font-family:inherit;font-size:1.25rem;font-weight:800;padding:.9rem 1.8rem;border-radius:999px;
  border:2px solid var(--gold);cursor:pointer;transition:transform .15s,box-shadow .15s}
.choice-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.choice-btn.gold{background:var(--gold);color:#231a00}
.choice-btn.outline{background:transparent;color:#fff}
.stats{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  border-radius:14px;padding:.5rem 1.2rem;min-width:110px}
.stat span{display:block;font-size:1.5rem;font-weight:900;color:var(--gold-soft)}
.stat small{opacity:.9}
main{max-width:920px;margin:0 auto;padding:1rem}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:1.4rem;margin:1.2rem 0;border-top:4px solid var(--emerald)}
.card h2{margin-top:0;color:var(--emerald-dark)}
.steps{padding-inline-start:1.2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
label{display:flex;flex-direction:column;gap:.3rem;font-weight:700}
input,select{font-family:inherit;font-size:1rem;padding:.6rem .7rem;border:1.5px solid #cbd8d1;
  border-radius:10px;background:#fbfcfa;color:var(--text);width:100%}
input:focus,select:focus{outline:2px solid var(--emerald);border-color:var(--emerald)}
.duration-box{margin-top:1.2rem}
.duration-box .label{font-weight:800;margin-bottom:.4rem}
.dur-row{display:flex;gap:.5rem;flex-wrap:wrap}
.dur-btn{font-family:inherit;font-weight:700;padding:.5rem 1rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--emerald);background:#fff;color:var(--emerald-dark)}
.dur-btn.selected{background:var(--emerald);color:#fff}
.recorder{text-align:center;margin-top:1.4rem;background:#f0f7f3;border-radius:14px;padding:1.2rem}
.timer{font-size:2.6rem;font-weight:900;color:var(--emerald-dark);font-variant-numeric:tabular-nums}
.level-wrap{height:12px;background:#dbe7df;border-radius:999px;overflow:hidden;max-width:420px;margin:.6rem auto}
#levelFill{height:100%;width:0%;background:linear-gradient(90deg,var(--emerald),var(--gold));transition:width .08s}
.rec-status{color:var(--muted)}
.rec-error{color:var(--danger);font-weight:700}
.rec-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.8rem}
.btn{font-family:inherit;font-size:1rem;font-weight:800;padding:.65rem 1.3rem;border-radius:999px;
  border:2px solid var(--emerald);background:#fff;color:var(--emerald-dark);cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--emerald);color:#fff}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.gold-btn{background:var(--gold);border-color:var(--gold);color:#231a00}
.preview{margin-top:1rem}
.preview audio{width:100%;max-width:460px}
.note{background:var(--gold-soft);border-radius:10px;padding:.7rem 1rem;font-size:.95rem}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.filters input,.filters select{flex:1;min-width:170px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.rec-card{border:1.5px solid #dce6df;border-radius:14px;padding:1rem;background:#fbfcfa}
.rec-card h3{margin:.1rem 0;font-size:1.15rem;color:var(--emerald-dark)}
.rec-meta{color:var(--muted);font-size:.92rem;margin:.2rem 0 .6rem}
.rec-card audio{width:100%}
.reactions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.react-btn{font-family:inherit;border:1.5px solid #d8e2db;background:#fff;border-radius:999px;
  padding:.3rem .8rem;cursor:pointer;font-size:.95rem}
.react-btn.active{background:var(--gold-soft);border-color:var(--gold)}
.stars{display:flex;gap:.15rem;margin-top:.6rem;direction:ltr;justify-content:flex-end}
.star{font-size:1.45rem;background:none;border:none;cursor:pointer;color:#c9d4cd;padding:0}
.star.on{color:var(--gold)}
.rating-info{font-size:.9rem;color:var(--muted)}
.leaderboard{display:grid;gap:.7rem}
.leader-item{display:flex;gap:.8rem;align-items:center;background:#f0f7f3;border:1.5px solid var(--gold);
  border-radius:12px;padding:.7rem 1rem;font-weight:700}
.leader-rank{font-size:1.5rem}
.empty{color:var(--muted);background:#f6f8f6;border:1.5px dashed #c4d2c9;border-radius:12px;padding:1rem;text-align:center}
.prize{background:linear-gradient(160deg,#fffbe9,#fff);border-top-color:var(--gold)}
.contact-number{font-weight:800;color:var(--emerald-dark);font-size:1.1rem}
.whatsapp-btn{background:#25d366;border-color:#25d366;color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:.5rem}
.whatsapp-btn:hover{background:#1eb856;border-color:#1eb856}
.whatsapp-btn svg{width:1.25em;height:1.25em;fill:currentColor;flex:none}
.whatsapp-float{position:fixed;bottom:1rem;inset-inline-start:1rem;z-index:40;
  width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);text-decoration:none;
  transition:transform .15s}
.whatsapp-float:hover{transform:translateY(-2px)}
.whatsapp-float svg{width:30px;height:30px;fill:currentColor}
footer{text-align:center;color:var(--muted);padding:1.5rem 1rem 2.5rem}
.toast{position:fixed;bottom:1.2rem;inset-inline:0;margin:0 auto;width:fit-content;max-width:92vw;
  background:var(--emerald-dark);color:#fff;padding:.7rem 1.4rem;border-radius:999px;box-shadow:var(--shadow);
  font-weight:700;z-index:50;text-align:center}
.manage-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
.manage-btn{font-family:inherit;font-size:.9rem;font-weight:700;padding:.3rem .85rem;border-radius:999px;
  cursor:pointer;border:1.5px solid var(--emerald);background:#fff;color:var(--emerald-dark)}
.manage-btn:hover{background:#f0f7f3}
.manage-btn.danger{border-color:var(--danger);color:var(--danger)}
.manage-btn.danger:hover{background:#fdf0ee}
.admin-link{background:none;border:none;font-family:inherit;font-size:.92rem;color:var(--muted);
  cursor:pointer;text-decoration:underline;padding:.2rem .4rem}
.admin-link:hover{color:var(--emerald-dark)}
.modal-overlay{position:fixed;inset:0;background:rgba(11,61,44,.55);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-overlay[hidden]{display:none}
.modal-box{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  border-top:4px solid var(--gold);padding:1.4rem;width:100%;max-width:560px;
  max-height:90vh;overflow:auto;text-align:start}
.modal-box h3{margin:.1rem 0 .4rem;color:var(--emerald-dark);font-size:1.25rem}
@media (max-width:560px){
  .hero h1{font-size:2.1rem}
  .choice-btn{font-size:1.08rem;padding:.8rem 1.2rem;width:100%}
  .timer{font-size:2.1rem}
  .card{padding:1.1rem}
}