:root {
  --bg:#0f172a;--card:#1e293b;--blue:#0f6fff;--lightblue:#38bdf8;--red:#dc2626;
  --text:#e5e7eb;--muted:#94a3b8;--yellow:#facc15;--repeat-blue:#3b82f6;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);font-family:Tajawal,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);text-align:center;padding-bottom:calc(240px + env(safe-area-inset-bottom))}
.topbar{padding:.9rem .5rem .2rem;background:rgba(15,23,42,.7);backdrop-filter:blur(7px);position:sticky;top:0;z-index:20}
.title-box{display:inline-block;background:rgba(248,250,252,.04);padding:.4rem 1.1rem .65rem;border-radius:18px;border:1px solid rgba(148,163,184,.15)}
.main-title{margin:0;font-size:28px;color:#fff;font-weight:800}
.sub-title{margin:.15rem 0 .25rem;line-height:1.25}.name-red{color:var(--red);font-weight:700;font-size:1.05rem}
.phone-white{color:#fff!important;font-weight:700;direction:ltr;text-shadow:0 0 6px rgba(255,255,255,.35)}
.unit-title{margin:.1rem 0;color:var(--red);font-weight:700}.hint{margin:.1rem 0;color:var(--muted)}
.controls{display:flex;flex-direction:column;align-items:center;gap:.7rem;margin:1rem auto}
.controls .row{display:grid;grid-template-columns:repeat(2,180px);grid-auto-rows:50px;gap:.8rem}
.btn-test,.score-pill,.btn-random,.btn-repeat{width:180px;height:50px;border-radius:999px;font-weight:800;font-size:16px;border:none;cursor:pointer;transition:transform .15s,opacity .15s,box-shadow .15s;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.btn-test{background:#f97316;color:#fff}.score-pill{background:#16a34a;color:#fff}.btn-random{background:var(--yellow);color:#1f2937}.btn-repeat{background:var(--repeat-blue);color:#fff}
.words-wrap{max-width:620px;margin:0 auto;padding:0 .6rem 3.5rem;position:relative}
.words-wrap::after{content:"";display:block;height:260px}
.word{background:var(--card);border-radius:16px;margin:.6rem auto;padding:.75rem .6rem 1.05rem;box-shadow:0 6px 18px rgba(0,0,0,.12);border:1px solid rgba(148,163,184,.08)}
.word .en{display:flex;gap:.55rem;justify-content:center;align-items:center;flex-direction:row-reverse}
.word .num{color:var(--lightblue);font-weight:800;font-size:1.1rem}
.word .en-text{font-weight:800;font-size:1.85rem;color:#bfdbfe;text-shadow:0 1px 0 rgba(0,0,0,.2);transition:transform .12s,filter .12s}
.word .en-text.speaking{transform:scale(1.03);filter:drop-shadow(0 0 10px rgba(56,189,248,.55))}
.word .ar{font-size:1.04rem;margin-top:.45rem;color:#e2e8f0;font-weight:600}
.bottom-nav{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:rgba(15,23,42,.55);display:flex;gap:1rem;align-items:center;padding:.5rem 1.3rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);backdrop-filter:blur(8px);border:1px solid rgba(148,163,184,.15)}
.nav-btn{background:var(--blue);color:#fff;border:none;padding:.4rem .85rem;border-radius:999px;font-weight:700}
.page-info{font-weight:700;color:#e2e8f0;min-width:80px;display:inline-block}
.hidden{display:none!important}