/* =============================================================================
   ACADEMY DESIGN SYSTEM — academy.css — v2.0
   أكاديميّة آفاق — نظام التصميم
   Light / Dark · AR / EN · Glass-refined · Teal core + Gold accent
   المرجع: academy_styleguide.html (المعتمَد)
   ============================================================================= */

/* ---- 1. TOKENS — LIGHT (default) ---- */
:root {
  --acc:#0E7C7B; --acc-dk:#0A5F5E; --acc-lt:#E3F2F1; --acc-lt2:#C9E7E5; --acc-rgb:14,124,123;
  --gold:#D4A843; --gold-dk:#8A6D1F; --gold-lt:#F7EFD8; --gold-rgb:212,168,67;

  --bg:#FBFAF7; --bg2:#F3F1EB;
  --card:#FFFFFF; --card-2:#F6F4EF; --card-rgb:255,255,255;
  --glass:rgba(255,255,255,.72); --glass-bdr:rgba(255,255,255,.9);
  --tx1:#1C2321; --tx2:#5A625F; --tx3:#9AA09D;
  --bdr:#E7E3DA; --bdr-str:#D6D1C6;
  --ok:#1D9E75; --ok-lt:#E1F5EE; --ok-tx:#0F6E56;
  --warn:#BA7517; --warn-lt:#FAEEDA; --warn-tx:#854F0B;
  --err:#D64545; --err-lt:#FBEAEA; --err-tx:#A32D2D;
  --inp:#F6F4EF; --inp-bdr:#D6D1C6;
  --shd:0 1px 2px rgba(0,0,0,.03),0 4px 14px rgba(0,0,0,.05);
  --shd-lift:0 2px 6px rgba(0,0,0,.05),0 12px 34px rgba(0,0,0,.09);
  --glow:radial-gradient(ellipse at 70% -10%, rgba(var(--acc-rgb),.07), transparent 55%);
}

/* ---- 1b. TOKENS — DARK ---- */
[data-theme="dark"] {
  --acc:#3DBFAF; --acc-dk:#5FD4C4; --acc-lt:#1B3A36; --acc-lt2:#26534C; --acc-rgb:61,191,175;
  --gold:#E4C169; --gold-dk:#EFD595; --gold-lt:#33291480; --gold-rgb:228,193,105;

  --bg:#141D1A; --bg2:#0F1614;
  --card:#1D2A26; --card-2:#243430; --card-rgb:29,42,38;
  --glass:rgba(29,42,38,.68); --glass-bdr:rgba(120,150,142,.22);
  --tx1:#EDF2F0; --tx2:#AEBAB5; --tx3:#7A857F;
  --bdr:#324A43; --bdr-str:#456158;
  --ok:#45CF9C; --ok-lt:#173A30; --ok-tx:#63DDB1;
  --warn:#E4A957; --warn-lt:#352817; --warn-tx:#F0C480;
  --err:#EA7070; --err-lt:#3A1C1C; --err-tx:#F2A0A0;
  --inp:#243430; --inp-bdr:#456158;
  --shd:0 1px 2px rgba(0,0,0,.28),0 4px 16px rgba(0,0,0,.38);
  --shd-lift:0 2px 8px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.5);
  --glow:radial-gradient(ellipse at 70% -10%, rgba(var(--acc-rgb),.10), transparent 55%);
}

/* ---- 2. BASE ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%}
body{
  font-family:'Tajawal',sans-serif; background:var(--bg); color:var(--tx1);
  line-height:1.75; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
  transition:background .4s,color .4s;
}
[dir="ltr"] body{font-family:'Inter',sans-serif;}
body::before{content:'';position:fixed;inset:0;background:var(--glow);pointer-events:none;z-index:0;transition:background .4s}
h1,h2,h3,h4{font-weight:700;line-height:1.3;color:var(--tx1)}
h1{font-size:30px;font-weight:800}h2{font-size:22px}h3{font-size:18px}h4{font-size:15px}
p{color:var(--tx2)}a{color:var(--acc);text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bdr-str);border-radius:9px}

/* ---- 3. GLASS NAV ---- */
.acd-nav{
  position:sticky;top:0;z-index:100;height:64px;
  background:var(--glass); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--bdr); display:flex;align-items:center;padding:0 28px;gap:22px;
}
.acd-nav-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--tx1)}
.acd-nav-brand .mark{width:32px;height:32px;border-radius:9px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
[data-theme="dark"] .acd-nav-brand .mark{color:#0E1513}
.acd-nav-links{display:flex;gap:4px;margin-inline-start:10px}
.acd-nav-links a{padding:8px 14px;border-radius:8px;color:var(--tx2);font-weight:500;font-size:14px;transition:all .25s}
.acd-nav-links a:hover{background:var(--card-2);color:var(--tx1)}
.acd-nav-links a.active{background:var(--acc-lt);color:var(--acc-dk)}
.acd-nav-spacer{flex:1}
.icon-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--bdr-str);background:transparent;color:var(--tx1);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:19px;transition:all .25s}
.icon-btn:hover{background:var(--card-2)}

/* ---- 4. WRAP ---- */
.acd-wrap{max-width:none;margin:0 auto;padding:32px 40px 90px;position:relative;z-index:1;width:100%;flex:1}
.reading-wrap{max-width:768px;margin:0 auto;padding:32px 28px 90px;position:relative;z-index:1}

/* ---- 5. BUTTONS ---- */
.btn{font-family:inherit;font-size:14px;font-weight:500;padding:10px 20px;border-radius:8px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .25s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--acc);color:#fff}
[data-theme="dark"] .btn-primary{color:#0E1513}
.btn-primary:hover{background:var(--acc-dk)}
.btn-ghost{background:transparent;color:var(--tx1);border-color:var(--bdr-str)}
.btn-ghost:hover{background:var(--card-2)}
.btn-gold{background:var(--gold);color:#fff}
[data-theme="dark"] .btn-gold{color:#0E1513}
.btn-gold:hover{background:var(--gold-dk)}
.btn-sm{padding:6px 14px;font-size:13px}.btn-lg{padding:13px 28px;font-size:15px}

/* ---- 6. CARDS (glass-lifted) ---- */
.card{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:24px;box-shadow:var(--shd)}
.card-glass{
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--glass-bdr); border-radius:12px; padding:24px; box-shadow:var(--shd-lift);
}
.card-flat{background:var(--card-2);border:none;border-radius:12px;padding:20px}
.card-hover{transition:transform .25s,box-shadow .25s,border-color .25s;cursor:pointer}
.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shd-lift)}

/* ---- 7. FIELDS ---- */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--tx2);margin-bottom:7px}
.inp{width:100%;font-family:inherit;font-size:14px;padding:11px 14px;border-radius:8px;background:var(--inp);border:1px solid var(--inp-bdr);color:var(--tx1);transition:all .25s}
.inp:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.14);background:var(--card)}
.inp::placeholder{color:var(--tx3)}
textarea.inp{resize:vertical;min-height:90px}

/* ---- 8. BADGES ---- */
.bdg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px}
.bdg-acc{background:var(--acc-lt);color:var(--acc-dk)}
.bdg-gold{background:var(--gold-lt);color:var(--gold-dk)}
.bdg-ok{background:var(--ok-lt);color:var(--ok-tx)}
.bdg-warn{background:var(--warn-lt);color:var(--warn-tx)}
.bdg-err{background:var(--err-lt);color:var(--err-tx)}
.bdg-mut{background:var(--card-2);color:var(--tx2)}

/* ---- 9. PROGRESS ---- */
.prog{height:8px;background:var(--acc-lt);border-radius:999px;overflow:hidden}
.prog>i{display:block;height:100%;background:var(--acc);border-radius:999px;transition:width .5s}
.prog-gold>i{background:var(--gold)}

/* ---- 10. JOURNEY LINE — التوقيع البصريّ ---- */
.journey{display:flex;gap:8px}
.journey-stage{flex:1;text-align:center}
.journey-stage .bar{height:6px;border-radius:999px;margin-bottom:9px;background:var(--bdr);position:relative;overflow:hidden}
.journey-stage .bar>i{position:absolute;inset:0;background:var(--acc)}
.journey-stage.done .bar{background:var(--acc)}
.journey-stage.locked .bar{background:var(--card-2);border:1px solid var(--bdr)}
.journey-stage .name{font-size:13px;font-weight:500;color:var(--tx1);margin:0}
.journey-stage.locked .name{color:var(--tx3)}
.journey-stage .sub{font-size:11px;color:var(--tx3);margin:2px 0 0}
.journey-stage.active .sub{color:var(--acc)}

/* ---- 11. UNIT CARD ---- */
.unit{background:var(--card);border:1px solid var(--bdr);border-radius:12px;padding:18px 20px;transition:all .25s}
.unit-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.unit-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.unit-icon.acc{background:var(--acc-lt);color:var(--acc)}
.unit-icon.fill{background:var(--acc);color:#fff}
[data-theme="dark"] .unit-icon.fill{color:#0E1513}
.unit-icon.mut{background:var(--card-2);color:var(--tx3)}
.unit-title{font-weight:700;font-size:15px;margin:0}
.unit-foot{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.unit.current{border:2px solid var(--acc)}
.unit.locked{opacity:.55}
.unit.card-hover:hover{transform:translateY(-3px);box-shadow:var(--shd-lift);border-color:var(--acc-lt2)}

/* ---- 12. STEPS (مراحل الوحدة الخمس) ---- */
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:500;background:var(--card-2);color:var(--tx2);border:1px solid transparent}
.step.done{background:var(--acc-lt);color:var(--acc-dk)}
.step.now{background:var(--acc);color:#fff}
[data-theme="dark"] .step.now{color:#0E1513}
.step .n{width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;font-size:11px}
[data-theme="dark"] .step .n{background:rgba(255,255,255,.12)}
.step.now .n{background:rgba(255,255,255,.25)}
[data-theme="dark"] .step.now .n{background:rgba(0,0,0,.18)}

/* ---- 13. METRIC ---- */
.metric{background:var(--card-2);border-radius:12px;padding:18px 20px}
.metric .lbl{font-size:13px;color:var(--tx2);margin:0 0 6px}
.metric .val{font-size:26px;font-weight:800;color:var(--tx1);margin:0;line-height:1}
.metric .val.acc{color:var(--acc)}.metric .val.gold{color:var(--gold-dk)}

/* ---- 14. TABLE ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:right;font-weight:500;font-size:12px;color:var(--tx2);padding:10px 14px;border-bottom:1px solid var(--bdr)}
[dir="ltr"] .tbl th{text-align:left}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--bdr);color:var(--tx1)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--card-2)}

/* ---- 15. ALERTS ---- */
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:8px;font-size:14px;align-items:flex-start}
.alert i.ico{font-size:20px;flex-shrink:0;margin-top:1px}
.alert-acc{background:var(--acc-lt);color:var(--acc-dk)}
.alert-ok{background:var(--ok-lt);color:var(--ok-tx)}
.alert-warn{background:var(--warn-lt);color:var(--warn-tx)}
.alert-err{background:var(--err-lt);color:var(--err-tx)}

/* ---- 16. CERTIFICATE — لحظة الفخر (مهيب معاصر) ---- */
/* .cert: البطاقة المدمجة (شهاداتي/التحقّق). .cert-doc: الوثيقة الكاملة (صفحة العرض). */
.cert{
  background:
    radial-gradient(ellipse at 50% -20%, rgba(var(--gold-rgb,212,168,67),.08), transparent 60%),
    var(--card);
  border:1.5px solid var(--gold);border-radius:16px;padding:30px 28px;text-align:center;position:relative;overflow:hidden;
}
.cert::before{content:'';position:absolute;inset:7px;border:1px solid var(--gold-lt);border-radius:11px;pointer-events:none}
/* الخاتم: قرص ذهبيّ بحلقة مزدوجة وهالة */
.cert .seal{
  width:66px;height:66px;border-radius:50%;margin:0 auto 16px;position:relative;
  background:radial-gradient(circle at 35% 30%, var(--gold-lt), var(--card));
  border:2px solid var(--gold);color:var(--gold-dk);
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 0 0 4px var(--card),0 0 0 5px var(--gold-lt);
}
.cert .ttl{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.2px}
.cert .name{font-size:16px;color:var(--gold-dk);font-weight:700;margin:8px 0}

/* ---- 16b. CERTIFICATE DOCUMENT — الوثيقة الكاملة ---- */
.cert-doc{
  --cd-gold:var(--gold);
  position:relative;max-width:720px;margin:0 auto;text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb,212,168,67),.10), transparent 55%),
    var(--card);
  border:2px solid var(--cd-gold);border-radius:18px;
  padding:52px 44px 44px;overflow:hidden;
  box-shadow:var(--shd-lift);
}
/* إطار داخليّ دقيق */
.cert-doc::before{
  content:'';position:absolute;inset:11px;border:1px solid var(--gold-lt);
  border-radius:12px;pointer-events:none;
}
/* علامة مائيّة خلفيّة */
.cert-doc .cd-watermark{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:340px;line-height:1;color:var(--cd-gold);opacity:.035;
  pointer-events:none;user-select:none;z-index:0;
}
/* زوايا زخرفيّة */
.cert-doc .cd-corner{position:absolute;width:26px;height:26px;border:2px solid var(--cd-gold);opacity:.5;z-index:1;pointer-events:none}
.cert-doc .cd-corner.tl{top:18px;inset-inline-start:18px;border-inline-end:0;border-bottom:0;border-radius:6px 0 0 0}
.cert-doc .cd-corner.tr{top:18px;inset-inline-end:18px;border-inline-start:0;border-bottom:0;border-radius:0 6px 0 0}
.cert-doc .cd-corner.bl{bottom:18px;inset-inline-start:18px;border-inline-end:0;border-top:0;border-radius:0 0 0 6px}
.cert-doc .cd-corner.br{bottom:18px;inset-inline-end:18px;border-inline-start:0;border-top:0;border-radius:0 0 6px 0}
[dir="ltr"] .cert-doc .cd-corner.tl{border:2px solid var(--cd-gold);border-inline-start:0;border-bottom:0}
/* محتوى فوق الخلفيّة */
.cert-doc > *:not(.cd-watermark):not(.cd-corner){position:relative;z-index:2}
/* الخاتم الكبير بالشعاعات */
.cert-doc .cd-seal{
  width:92px;height:92px;border-radius:50%;margin:0 auto 20px;position:relative;
  background:radial-gradient(circle at 38% 32%, var(--gold-lt), var(--card) 75%);
  border:2.5px solid var(--cd-gold);color:var(--gold-dk);
  display:flex;align-items:center;justify-content:center;font-size:42px;
  box-shadow:0 0 0 5px var(--card),0 0 0 6px var(--gold-lt),0 6px 18px rgba(0,0,0,.08);
}
.cert-doc .cd-seal::after{
  content:'';position:absolute;inset:-11px;border-radius:50%;
  border:1px dashed var(--cd-gold);opacity:.4;
}
.cert-doc .cd-brand{font-size:12px;letter-spacing:3px;color:var(--gold-dk);font-weight:800;margin:0 0 4px;text-transform:uppercase}
.cert-doc .cd-kicker{font-size:13px;color:var(--tx2);margin:14px 0 2px}
.cert-doc .cd-title{font-size:23px;font-weight:800;margin:0 0 6px;letter-spacing:-.3px;line-height:1.35}
.cert-doc .cd-name{
  font-size:28px;font-weight:800;color:var(--gold-dk);margin:10px 0 4px;
  padding-bottom:12px;display:inline-block;
  border-bottom:2px solid var(--gold-lt);
}
.cert-doc .cd-body{font-size:14.5px;line-height:1.85;max-width:540px;margin:14px auto 0;color:var(--tx2)}
.cert-doc .cd-meta{
  display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:30px;
  padding-top:22px;border-top:1px solid var(--bdr);font-size:13px;color:var(--tx2);
}
.cert-doc .cd-meta strong{color:var(--tx1);direction:ltr;display:inline-block}
.cert-doc .cd-verify{font-size:12px;color:var(--tx3);margin:18px 0 0;word-break:break-all}
/* شارة النوع أعلى الوثيقة */
.cert-doc .cd-ribbon{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  padding:5px 16px;border-radius:999px;margin-bottom:6px;
  background:var(--gold-lt);color:var(--gold-dk);border:1px solid var(--cd-gold);
}
/* تمييز شهادة آفاق: إطار أعرض ووهج أدفأ */
.cert-doc.cd-master{border-width:3px;padding-top:56px}
.cert-doc.cd-master .cd-seal{width:104px;height:104px;font-size:48px}
.cert-doc.cd-master .cd-title{font-size:26px}

/* ---- 17. READING (محتوى المتعلّم) ---- */
.read-eyebrow{display:flex;align-items:center;gap:8px;color:var(--acc);font-weight:500;font-size:14px;margin-bottom:10px}
.read-title{font-size:32px;font-weight:800;margin:0 0 6px}
.read-sub{font-size:16px;color:var(--tx2);margin:0 0 26px}
.read-body{font-size:17px;line-height:2;color:var(--tx1)}
.read-body p{color:var(--tx1);margin:0 0 20px}
.read-h{font-size:20px;font-weight:700;margin:32px 0 12px}
.pull{border-inline-start:3px solid var(--gold);background:var(--gold-lt);padding:16px 20px;border-radius:0 10px 10px 0;margin:26px 0;font-size:17px;color:var(--tx1);font-weight:500}
[dir="ltr"] .pull{border-radius:10px 0 0 10px}
.reflect{background:var(--acc-lt);border-radius:12px;padding:20px 22px;margin:26px 0}
.reflect .rh{display:flex;align-items:center;gap:8px;color:var(--acc-dk);font-weight:700;font-size:15px;margin-bottom:8px}
.reflect p{color:var(--acc-dk);margin:0;font-size:15px}

/* ---- 18. SECTION HELPERS ---- */
.sg-sec{margin-bottom:44px}
.sg-h{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--bdr)}
.sg-h .num{font-size:13px;font-weight:700;color:var(--acc);background:var(--acc-lt);padding:2px 9px;border-radius:8px}
.sg-grid{display:grid;gap:16px}
.sg-g2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.sg-g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sg-g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sg-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sg-label{font-size:12px;color:var(--tx3);margin-bottom:8px;font-weight:500}

/* ---- 19. TABS ---- */
.tab-row{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.tab{padding:9px 18px;border-radius:999px;font-size:14px;font-weight:500;background:var(--card-2);color:var(--tx2);border:1px solid transparent;cursor:pointer;transition:all .25s;font-family:inherit}
.tab.on{background:var(--acc);color:#fff}
[data-theme="dark"] .tab.on{color:#0E1513}

/* ---- 20. FOOTER ---- */
.acd-footer{
  border-top:1px solid var(--bdr);padding:18px 28px;text-align:center;
  font-size:13px;color:var(--tx3);position:relative;z-index:1;
}

/* ---- 21. RESPONSIVE ---- */
@media (max-width: 720px){
  .acd-nav{padding:0 16px;gap:12px}
  .acd-nav-links{display:none}
  .acd-wrap{padding:24px 16px 70px}
  h1{font-size:24px}
  .read-title{font-size:26px}
}