:root{
  --navy:#072349; --navy2:#0b3769; --gold:#e5ab32; --teal:#178e8e;
  --green:#31995c; --red:#cf4045; --purple:#7453b2; --ink:#1c2a3a;
  --muted:#627186; --paper:#ffffff; --bg:#edf3f8; --line:#d8e3ed;
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;font-family:Arial,"Noto Sans Arabic",sans-serif;background:linear-gradient(135deg,#f8fbfe,#e9f1f7);color:var(--ink)}
body.rtl{direction:rtl;font-family:"Noto Sans Arabic",Arial,sans-serif}
button,input{font:inherit}
.app{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.topbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:1rem;align-items:center;padding:.7rem 1rem;background:var(--navy);color:white;box-shadow:0 4px 20px rgba(7,35,73,.24);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.badge{width:54px;height:54px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:900;display:grid;place-items:center;border:4px solid white;box-shadow:0 0 0 3px var(--gold);flex:0 0 auto}
.brand-copy{min-width:0}
.brand-copy strong{display:block;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-copy span{display:block;font-size:.78rem;color:#d9e7f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.langs{display:flex;gap:.35rem}
.langs button,.icon-btn{border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.1);color:white;border-radius:999px;padding:.5rem .75rem;cursor:pointer}
.langs button.active{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:800}
.progress-wrap{min-width:180px}
.progress-meta{display:flex;justify-content:space-between;font-size:.75rem;margin-bottom:.25rem;color:#e9f2fb}
.progress{height:10px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--gold);width:0;transition:width .25s ease}
.stage{width:min(1480px,96vw);margin:1rem auto;padding-bottom:1rem}
.slide-card{background:white;border-radius:28px;box-shadow:0 18px 55px rgba(30,58,87,.16);overflow:hidden;border:1px solid #e1e9f0}
.section-strip{height:10px;background:var(--gold)}
.slide-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:1.1rem;padding:1.2rem}
body.rtl .slide-grid{grid-template-columns:minmax(420px,.95fr) minmax(0,1.05fr)}
.content{padding:.2rem .2rem .2rem .5rem;display:flex;flex-direction:column;min-width:0}
body.rtl .content{padding:.2rem .5rem .2rem .2rem}
.kicker{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:800;margin-bottom:.35rem}
body.rtl .kicker{letter-spacing:0;text-transform:none}
h1{font-size:clamp(1.8rem,3.2vw,3rem);line-height:1.1;margin:.1rem 0 .75rem;color:var(--navy);text-wrap:balance}
.body{font-size:1.05rem;line-height:1.55;color:#32465b;margin:0 0 .8rem}
.bullets{display:grid;gap:.55rem;margin:.15rem 0 .8rem;padding:0;list-style:none}
.bullets li{display:grid;grid-template-columns:34px 1fr;gap:.55rem;align-items:start;line-height:1.42;font-size:1rem;background:#f7fafc;border:1px solid #e0e9f1;border-radius:15px;padding:.58rem .65rem}
body.rtl .bullets li{grid-template-columns:1fr 34px}
.bullets .tick{width:26px;height:26px;border-radius:50%;background:var(--teal);color:white;display:grid;place-items:center;font-weight:900}
body.rtl .bullets .tick{grid-column:2}
.callout{margin-top:auto;background:linear-gradient(90deg,var(--navy),var(--navy2));color:white;border-left:8px solid var(--gold);border-radius:14px;padding:.75rem .9rem;font-weight:800;line-height:1.35}
body.rtl .callout{border-left:0;border-right:8px solid var(--gold)}
.visual{min-width:0;background:#eef4f8;border-radius:22px;overflow:hidden;align-self:stretch;display:grid;place-items:center;border:1px solid #dce6ee;min-height:455px}
.visual img{width:100%;height:100%;object-fit:cover;display:block}
.audio-panel{display:grid;grid-template-columns:auto 1fr auto;gap:.65rem;align-items:center;padding:.85rem 1.2rem;border-top:1px solid var(--line);background:#fbfdff}
.audio-panel audio{width:100%;height:42px}
.audio-label{display:flex;align-items:center;gap:.45rem;font-weight:800;color:var(--navy)}
.audio-label img{width:34px;height:34px}
.transcript-btn,.quiz-btn,.nav-btn,.menu-btn{border:0;border-radius:13px;padding:.62rem .85rem;cursor:pointer;font-weight:800}
.transcript-btn{background:#e8f1f7;color:var(--navy)}
.transcript{display:none;padding:0 1.2rem 1rem;background:#fbfdff;color:#405369;line-height:1.55;border-top:1px dashed var(--line)}
.transcript.show{display:block}
.bottom-nav{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;width:min(1480px,96vw);margin:0 auto 1rem}
.nav-btn{background:var(--navy);color:white;min-width:130px}
.nav-btn:disabled{opacity:.35;cursor:not-allowed}
.center-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.menu-btn{background:white;color:var(--navy);border:1px solid var(--line)}
.quiz-btn{background:var(--gold);color:var(--navy)}
.menu-panel{position:fixed;inset:0;background:rgba(5,24,47,.72);display:none;z-index:50;padding:3vh 3vw;overflow:auto}
.menu-panel.open{display:block}
.menu-box{max-width:1200px;margin:auto;background:white;border-radius:24px;padding:1rem;box-shadow:0 25px 70px rgba(0,0,0,.3)}
.menu-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:1rem}
.menu-tile{border:1px solid var(--line);border-radius:14px;background:#f7fafc;padding:.7rem;cursor:pointer;text-align:start;min-height:105px}
.menu-tile strong{display:block;color:var(--teal);margin-bottom:.3rem}
.menu-tile.current{outline:3px solid var(--gold);background:#fff9e8}
.modal{position:fixed;inset:0;background:rgba(5,24,47,.76);display:none;z-index:60;padding:2vh 2vw;overflow:auto}
.modal.open{display:block}
.modal-box{max-width:1000px;margin:auto;background:white;border-radius:24px;padding:1.2rem;box-shadow:0 25px 70px rgba(0,0,0,.35)}
.quiz-head{display:flex;justify-content:space-between;align-items:start;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.question{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:18px;background:#fbfdff}
.question h3{margin:0 0 .7rem;color:var(--navy);font-size:1.05rem;line-height:1.4}
.option{display:flex;gap:.6rem;align-items:flex-start;padding:.45rem .55rem;border-radius:10px}
.option:hover{background:#eef5fa}
.option input{margin-top:.3rem;transform:scale(1.2)}
.quiz-actions{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.submit-btn,.close-btn{border:0;border-radius:13px;padding:.7rem 1rem;font-weight:800;cursor:pointer}
.submit-btn{background:var(--green);color:white}
.close-btn{background:#e7edf3;color:var(--navy)}
.result{padding:1rem;border-radius:16px;background:#eef6f1;display:none;margin-top:1rem;line-height:1.5}
.result.fail{background:#fff0f1}
.no-audio{color:var(--muted);font-style:italic}
@media(max-width:980px){
  .topbar{grid-template-columns:1fr auto}.progress-wrap{grid-column:1/-1}
  .slide-grid,body.rtl .slide-grid{grid-template-columns:1fr}
  .visual{min-height:300px;order:-1}
  body.rtl .visual{order:-1}
  .audio-panel{grid-template-columns:1fr}.audio-label{justify-content:center}.transcript-btn{justify-self:center}
}
@media(max-width:620px){
  html{font-size:16px}.topbar{padding:.6rem}.badge{width:46px;height:46px}.brand-copy span{display:none}
  .stage{width:100%;margin:.5rem auto}.slide-card{border-radius:0}.slide-grid{padding:.8rem}
  h1{font-size:1.8rem}.visual{min-height:240px}.bottom-nav{width:96vw;grid-template-columns:1fr 1fr}
  .center-actions{grid-column:1/-1;grid-row:1}.nav-btn{min-width:0}
}