/* ============================================================
   Al Saeed LMS — V18 Premium Interface
   Non-destructive visual layer. Keeps V17 business logic intact.
   ============================================================ */
:root{
  --v18-navy:#071a33;
  --v18-navy-2:#0d2d55;
  --v18-navy-3:#154774;
  --v18-orange:#f47a20;
  --v18-orange-2:#ffad55;
  --v18-ink:#14243a;
  --v18-muted:#64748b;
  --v18-bg:#f4f7fb;
  --v18-card:rgba(255,255,255,.94);
  --v18-line:rgba(11,37,70,.10);
  --v18-shadow:0 22px 60px -34px rgba(7,26,51,.42);
  --v18-shadow-lg:0 36px 90px -40px rgba(7,26,51,.56);
  --v18-ease:cubic-bezier(.2,.72,.2,1);
}
html{background:var(--v18-bg)}
body{background:radial-gradient(900px 520px at 96% -8%,rgba(244,122,32,.07),transparent 70%),radial-gradient(820px 460px at -8% 34%,rgba(21,71,116,.055),transparent 72%),var(--v18-bg)}
.card,.pk,.cr,.course-vcard,.course-media-card,.sec-c,.vmv-c,.acad-c,.cons-c,.lib-c,.stat,.out-c,.mode-r,.chap-c{border-color:var(--v18-line)!important;box-shadow:var(--v18-shadow)!important}
.card,.pk,.cr,.course-vcard,.course-media-card,.sec-c,.vmv-c,.acad-c,.cons-c,.lib-c{background:linear-gradient(150deg,rgba(255,255,255,.99),rgba(250,252,255,.96))!important}
.pk,.cr,.course-vcard,.course-media-card,.acad-c,.cons-c,.lib-c{transition:transform .26s var(--v18-ease),box-shadow .26s ease,border-color .26s ease!important}
.pk:hover,.cr:hover,.course-vcard:hover,.course-media-card:hover,.acad-c:hover,.cons-c:hover,.lib-c:hover{transform:translateY(-7px)!important;box-shadow:var(--v18-shadow-lg)!important;border-color:rgba(244,122,32,.24)!important}
.hdr{background:linear-gradient(90deg,rgba(7,26,51,.965),rgba(13,45,85,.94))!important;border-bottom:1px solid rgba(255,255,255,.09)!important;box-shadow:0 12px 44px -30px rgba(0,0,0,.88)!important;backdrop-filter:blur(22px) saturate(1.35)!important;-webkit-backdrop-filter:blur(22px) saturate(1.35)!important}
.hdr-in{max-width:1420px!important}.nav a,.nav .nb{border:1px solid transparent!important}.nav a:hover,.nav .nb:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.07)!important}.nav a.on,.nav .nb.on{background:rgba(255,255,255,.105)!important}
.hero{background:linear-gradient(145deg,var(--v18-navy),#0b294e 58%,#123c69)!important;min-height:min(91vh,830px)!important;isolation:isolate}
.hero-mesh{background:radial-gradient(ellipse 62% 58% at 79% 13%,rgba(244,122,32,.38),transparent 65%),radial-gradient(ellipse 54% 68% at 5% 90%,rgba(25,91,150,.42),transparent 69%),linear-gradient(140deg,rgba(7,26,51,.985),rgba(12,44,82,.87) 56%,rgba(15,50,92,.97))!important}
.hero h1,.hero-copy-v8 h1{font-size:clamp(2.35rem,4.55vw,4.35rem)!important;line-height:1.08!important;letter-spacing:-2px!important;text-wrap:balance}
.hero h1 em,.hero-copy-v8 h1 em{background:linear-gradient(100deg,#ffd5aa,var(--v18-orange-2));-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hero-p,.hero-copy-v8 p{color:#c6d4e6!important;max-width:680px!important}
.hero-media-v8,.rm{background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important;border-color:rgba(255,255,255,.17)!important;box-shadow:0 38px 100px -44px rgba(0,0,0,.86)!important;backdrop-filter:blur(16px)!important}
.btn.p,.btn.primary{background:linear-gradient(135deg,var(--v18-orange),#e7650d)!important;box-shadow:0 16px 34px -18px rgba(244,122,32,.82)!important}.btn.p:hover,.btn.primary:hover{transform:translateY(-2px)!important;filter:saturate(1.05)}.btn.n{background:linear-gradient(135deg,var(--v18-navy),var(--v18-navy-2))!important}
.wrap{max-width:1420px!important}.sec{padding-block:96px!important}.sec-h{margin-bottom:44px!important}.sec-h h2{font-size:clamp(1.85rem,3vw,2.65rem)!important;letter-spacing:-.9px!important}.eyebrow{background:#fff5ea!important;border:1px solid #ffe0c2!important;border-radius:999px!important;padding:6px 12px!important;letter-spacing:1.25px!important}
.course-vcard,.pk{border-radius:22px!important;overflow:hidden!important;position:relative}.course-vcard::before,.pk::before{content:"";position:absolute;z-index:3;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--v18-orange),#ffba75 46%,transparent 92%);opacity:.85}.course-cover{overflow:hidden;background:linear-gradient(145deg,#0b2b53,#143e6c)!important}.course-cover img,.pk img{transition:transform .5s var(--v18-ease),filter .35s ease!important}.course-vcard:hover .course-cover img,.pk:hover img{transform:scale(1.045);filter:saturate(1.04) contrast(1.02)}
.course-hero-v8,.learn-hero,.pg-hero{background:radial-gradient(560px 240px at 90% 0%,rgba(244,122,32,.28),transparent 72%),linear-gradient(137deg,var(--v18-navy),#113d6b)!important}.course-media-card{border-radius:24px!important;overflow:hidden}.course-tabs-v8,.tabs{background:rgba(255,255,255,.90)!important;border:1px solid var(--v18-line)!important;border-radius:16px!important;padding:5px!important;box-shadow:0 14px 42px -34px rgba(7,26,51,.56)!important;backdrop-filter:blur(14px)!important}.course-tabs-v8 button,.tabs button{border-radius:10px!important;margin:0!important;border-bottom:0!important}.course-tabs-v8 button.on,.tabs button.on{background:var(--v18-navy)!important;color:#fff!important;box-shadow:0 10px 24px -17px rgba(7,26,51,.9)!important}
.learn-hero{border-radius:0 0 36px 36px!important;box-shadow:0 28px 78px -48px rgba(7,26,51,.86)!important}.stat{border-radius:18px!important;background:rgba(255,255,255,.95)!important}.video-box{border-radius:23px!important;overflow:hidden!important;background:#050f1e!important;box-shadow:0 28px 62px -34px rgba(0,0,0,.72)!important}.wk,.lesson,.exam-card{border-radius:15px!important;transition:transform .2s ease,box-shadow .2s ease!important}.wk:hover,.lesson:hover,.exam-card:hover{transform:translateY(-3px);box-shadow:var(--v18-shadow)!important}
.filters,.card.pad,.side{border-color:var(--v18-line)!important;box-shadow:var(--v18-shadow)!important}.filters{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(15px)!important;border-radius:18px!important}input,select,textarea{transition:border-color .18s ease,box-shadow .18s ease!important}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(244,122,32,.11)!important}.tbl-w{border-radius:16px!important;overflow:auto!important}table.t th{background:linear-gradient(90deg,var(--v18-navy),var(--v18-navy-2))!important}
.ftr{background:linear-gradient(145deg,#06162c,#0a2444 68%,#0d315b)!important;border-top:1px solid rgba(255,255,255,.08)!important}.wa,.chat-l{box-shadow:0 17px 46px -17px rgba(7,26,51,.58)!important}.chat-w{border:1px solid var(--v18-line)!important;box-shadow:0 30px 92px -26px rgba(7,26,51,.58)!important}
#v18-page-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:9999;pointer-events:none;background:transparent}#v18-page-progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--v18-orange),#ffc078);box-shadow:0 0 14px rgba(244,122,32,.55);transition:width .08s linear}.v18-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s var(--v18-ease)}.v18-reveal.v18-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.v18-reveal{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:1020px){.sec{padding-block:74px!important}.hero{min-height:auto!important}}
@media(max-width:760px){.sec{padding-block:56px!important}.wrap{padding-inline:16px!important}.hero{padding-block:52px 66px!important}.hero h1,.hero-copy-v8 h1{font-size:clamp(1.95rem,9vw,2.75rem)!important;letter-spacing:-1.2px!important}.pk:hover,.cr:hover,.course-vcard:hover,.course-media-card:hover,.acad-c:hover,.cons-c:hover,.lib-c:hover{transform:none!important}.course-tabs-v8,.tabs{overflow-x:auto!important;white-space:nowrap!important}}