:root{
  --navy-900:#122A43;--navy-700:#1C3A5E;--navy-600:#234a76;--navy-500:#2F5A8C;
  --gold-600:#A9833F;--gold-500:#C9A45E;--gold-400:#D8B978;--gold-300:#E7D2A4;
  --paper:#F6F5F2;--paper-2:#FBFAF8;--line:#E3E1DA;
  --ink-900:#14202D;--ink-700:#33414f;--ink-500:#5d6975;--ink-400:#8a939c;
  --fd:'Fraunces',Georgia,serif;--fu:'Inter',system-ui,sans-serif;--fm:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fu);background:var(--paper);color:var(--ink-900);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--navy-600);text-decoration:none}
h1,h2,h3{font-family:var(--fd);font-weight:500;color:var(--navy-700);letter-spacing:-.01em;line-height:1.12}
.muted{color:var(--ink-500)}.small{font-size:12.5px}.mono{font-family:var(--fm)}.center{text-align:center}.nowrap{white-space:nowrap}
.eyebrow{font-family:var(--fm);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-600)}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:66px;background:rgba(246,245,242,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tb-brand img{height:34px;display:block}
.tb-nav{display:flex;align-items:center;gap:22px}
.tb-nav a{font-size:14px;font-weight:500;color:var(--ink-700)}
.tb-nav a:hover{color:var(--navy-700)}
.tb-user{font-family:var(--fm);font-size:12.5px;color:var(--gold-600)}
.tb-out{color:var(--navy-700)!important;font-weight:600}

.wrap{max-width:1080px;margin:0 auto;padding:38px 24px 60px}
.appfoot{text-align:center;padding:30px;color:var(--ink-400);font-size:12.5px;border-top:1px solid var(--line)}

/* welcome */
.welcome{margin-bottom:34px}
.welcome h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:10px 0 8px}

/* cards */
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:28px;margin-bottom:22px}
.card--narrow{max-width:440px;margin:48px auto;text-align:start}
.card h1{font-size:1.7rem;margin-bottom:6px}
.card h2{font-size:1.3rem;margin-bottom:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--fu);font-weight:600;font-size:14px;
  padding:12px 22px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:.2s}
.btn--gold{background:var(--gold-500);color:var(--navy-900)}.btn--gold:hover{background:var(--gold-400)}
.btn--ghost{background:transparent;color:var(--navy-700);border-color:var(--line)}.btn--ghost:hover{border-color:var(--navy-500)}
.btn--sm{padding:8px 16px;font-size:13px}

/* forms */
.frm{display:flex;flex-direction:column;gap:14px}
.frm label{font-size:12.5px;font-weight:600;color:var(--ink-700);margin-bottom:5px;display:block}
.frm input,.frm select,.frm textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--fu);font-size:14px;color:var(--ink-900);background:#fff}
.frm textarea{font-family:var(--fm);font-size:13px;line-height:1.5;resize:vertical}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,164,94,.18)}
.frm .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frm.inline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.frm.inline select{width:auto;min-width:200px}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-700)}
.chk input{width:auto}
.frm__msg{font-size:13px;padding:10px 12px;border-radius:9px;display:none}
.frm__msg.err{display:block;background:rgba(192,57,43,.1);color:#9d2f24;border:1px solid rgba(192,57,43,.25)}
.frm__msg.ok{display:block;background:rgba(31,122,82,.12);color:#1f7a52;border:1px solid rgba(31,122,82,.3)}

/* catalog cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.ccard{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
.ccard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(18,42,67,.4)}
.ccard__top{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.ccard__top.open{background:linear-gradient(135deg,var(--navy-700),var(--navy-500))}
.ccard__top.locked{background:linear-gradient(135deg,#5d6975,#8a939c)}
.ccard__top .lock{font-size:18px}
.ccard__body{padding:18px}
.ccard__body .cat{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600)}
.ccard__body h3{font-size:1.15rem;margin:6px 0 8px}
.ccard__body p{font-size:13.5px;color:var(--ink-500);min-height:42px}
.ccard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.ccard__foot .mono{font-size:12px;color:var(--ink-400)}
.need{font-size:12px;color:var(--ink-400);font-style:italic}

/* tags */
.tag{font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;font-weight:600}
.tag--free{background:rgba(31,122,82,.15);color:#1f7a52}
.tag--paid{background:rgba(169,131,63,.18);color:var(--gold-600)}
.tag--subscription{background:rgba(47,90,140,.15);color:var(--navy-600)}

/* course view */
.back{display:inline-block;margin-bottom:16px;font-size:13.5px;color:var(--ink-500)}
.course-head{margin-bottom:26px}
.course-head h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:10px 0 8px}
.lessons{display:flex;flex-direction:column;gap:20px}
.lesson{background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:26px}
.lesson h2{font-size:1.3rem;margin-bottom:14px;display:flex;align-items:baseline;gap:12px}
.lnum{font-family:var(--fm);font-size:13px;color:var(--gold-500)}
.lesson-body{font-size:15px;color:var(--ink-700)}
.lesson-body p{margin-bottom:12px}.lesson-body ul,.lesson-body ol{margin:0 0 12px 20px}
.video{position:relative;padding-top:56.25%;margin-bottom:16px;border-radius:12px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%}
.badge-ok,.badge-no{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:26px;margin:0 auto 14px}
.badge-ok{background:rgba(31,122,82,.15);color:#1f7a52}
.badge-no{background:rgba(192,57,43,.12);color:#9d2f24}

/* admin */
.flash{background:rgba(31,122,82,.12);color:#1f7a52;border:1px solid rgba(31,122,82,.3);padding:11px 16px;border-radius:10px;margin-bottom:20px;font-size:14px}
.admin-tabs{display:flex;gap:8px;margin-bottom:24px}
.admin-tabs a{padding:9px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-700);border:1.5px solid var(--line)}
.admin-tabs a.on{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:start;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;background:#fff}
.mini{font-size:12px;font-weight:600;padding:6px 11px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--navy-700);cursor:pointer}
.mini:hover{border-color:var(--navy-500)}
.mini.danger{color:#9d2f24;border-color:rgba(192,57,43,.3)}
.lesson-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.lesson-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px}
code{font-family:var(--fm);background:rgba(47,90,140,.1);padding:2px 6px;border-radius:5px;font-size:.9em}

/* uploads + progress + viewer (added) */
.flash--err{background:rgba(192,57,43,.1);color:#9d2f24;border-color:rgba(192,57,43,.3)}
.content-src{border:1px dashed var(--line);border-radius:12px;padding:14px 16px;margin:4px 0}
.content-src legend{font-size:12px;color:var(--ink-500);padding:0 8px}
.content-src input[type=file]{width:100%;font-size:13px;padding:8px 0}
.prog{margin-top:14px;height:10px;background:var(--line);border-radius:999px;position:relative;overflow:visible}
.prog__bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-500),var(--gold-400));border-radius:999px;transition:width .15s}
.prog__pct{position:absolute;inset-inline-end:0;top:-20px;font-family:var(--fm);font-size:11px;color:var(--ink-500)}
.viewer{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;height:78vh}
.viewer iframe{width:100%;height:100%;border:0}
.viewer--img{height:auto;padding:12px;text-align:center}
.viewer--img img{max-width:100%;border-radius:8px}
.auth-links{margin-top:14px;font-size:13px;text-align:center;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.auth-links a{color:var(--navy-700);font-weight:600}

/* completion (added) */
.complete-bar{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.complete-bar .done{font-size:14px;font-weight:600;color:#1f7a52}

/* catalog search + category chips (added) */
.catbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.catbar input[type=search]{flex:1;min-width:200px;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--fu);font-size:14px;background:#fff}
.catbar input[type=search]:focus{outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(201,164,94,.18)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.chip{font-size:13px;font-weight:500;color:var(--ink-700);padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;transition:.18s}
.chip:hover{border-color:var(--navy-500)}
.chip.on{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

/* language toggle + rtl helpers (added) */
.tb-lang{font-family:var(--fm);font-size:12px;letter-spacing:.04em;color:var(--ink-500)!important;border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.tb-lang:hover{border-color:var(--navy-500);color:var(--navy-700)!important}
html[dir="rtl"] .tb-lang{font-family:'Tajawal',sans-serif}
html[dir="rtl"] .prog__pct{inset-inline-end:0}
html[dir="rtl"] .modal__close{inset-inline-end:auto;inset-inline-start:16px}

/* danger zone + legal pages (added) */
.btn--danger{background:#c0392b;color:#fff}
.btn--danger:hover{background:#a93226}
.card.danger{border-color:rgba(192,57,43,.35)}
.card.danger h2{color:#9d2f24}
.appfoot a{color:var(--ink-500)}
.legal{max-width:760px;margin:0 auto}
.legal h3{font-size:1.05rem;margin:18px 0 6px}
.legal p{color:var(--ink-700);margin-bottom:10px}

/* SCORM player (added) */
.scorm-wrap{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.scorm-frame{width:100%;height:72vh;min-height:460px;border:0;display:block;background:#fff}

/* LMS curriculum (added) */
.lms{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start;margin-top:8px}
.lms__side{background:var(--paper-2,#fff);border:1px solid var(--line);border-radius:14px;padding:16px;position:sticky;top:84px}
.lms__prog{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-500);margin-bottom:8px}
.lms__prog strong{color:var(--navy-700);font-family:var(--fm,monospace)}
.lms__bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:14px}
.lms__bar i{display:block;height:100%;background:var(--gold-500,#C9A45E);transition:width .4s}
.lms__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lms__list li a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--ink-800,#33414f);font-size:14px}
.lms__list li a:hover{background:rgba(18,42,67,.05)}
.lms__list li.on a{background:rgba(201,164,94,.16);color:var(--navy-800)}
.lms__list li.done .lms__n{background:var(--gold-500,#C9A45E);color:#122A43;border-color:transparent}
.lms__n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:12px;font-family:var(--fm,monospace)}
.lms__lt{line-height:1.3}
.lms__main{min-width:0}
.lms__h{margin:0 0 14px}
.lms-text{line-height:1.7}
.lms-text h1,.lms-text h2,.lms-text h3{color:var(--navy-700)}
html[dir="rtl"] .lms__prog strong,html[dir="rtl"] .lms__n{font-family:'Tajawal',sans-serif}
@media(max-width:760px){.lms{grid-template-columns:1fr}.lms__side{position:static}}