/* Al-Saeed Experience Layer V21 — visual system, motion and responsive polish */
:root{
  --v21-navy:#071f3d;
  --v21-navy-2:#102f55;
  --v21-orange:#f47b20;
  --v21-orange-2:#ffad61;
  --v21-teal:#0e8f8b;
  --v21-paper:#f5f8fc;
  --v21-glass:rgba(255,255,255,.76);
  --v21-line:rgba(15,47,84,.11);
  --v21-shadow:0 22px 60px -34px rgba(6,28,58,.42);
  --v21-shadow-hover:0 30px 78px -34px rgba(6,28,58,.52);
  --v21-ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
body{background:
  radial-gradient(circle at 9% 11%,rgba(244,123,32,.055),transparent 23rem),
  radial-gradient(circle at 91% 27%,rgba(14,143,139,.05),transparent 25rem),
  var(--paper,#f5f8fc)}
body::selection{background:rgba(244,123,32,.22);color:var(--v21-navy)}

/* accessibility and reading progress */
.v21-skip{position:fixed;top:10px;inset-inline-start:12px;z-index:10000;padding:10px 16px;border-radius:12px;background:#fff;color:var(--v21-navy);font-weight:800;box-shadow:var(--v21-shadow);transform:translateY(-160%);transition:.25s}
.v21-skip:focus{transform:translateY(0)}
.v21-progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:10002;background:rgba(255,255,255,.08);pointer-events:none}
.v21-progress>i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--v21-orange),var(--v21-orange-2),var(--v21-teal));box-shadow:0 0 18px rgba(244,123,32,.55);transition:width .12s linear}

/* ambient animated geometry */
.v21-ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.v21-ambient i{position:absolute;border-radius:999px;filter:blur(2px);opacity:.52;animation:v21Drift 16s ease-in-out infinite alternate}
.v21-ambient i:nth-child(1){width:340px;height:340px;top:12%;inset-inline-start:-220px;background:radial-gradient(circle,rgba(244,123,32,.16),transparent 68%)}
.v21-ambient i:nth-child(2){width:420px;height:420px;top:45%;inset-inline-end:-270px;background:radial-gradient(circle,rgba(14,143,139,.13),transparent 70%);animation-delay:-5s}
.v21-ambient i:nth-child(3){width:260px;height:260px;bottom:3%;inset-inline-start:18%;background:radial-gradient(circle,rgba(36,93,158,.1),transparent 70%);animation-delay:-9s}
@keyframes v21Drift{to{transform:translate3d(30px,-24px,0) scale(1.08)}}

/* premium glass navigation */
.hdr{background:rgba(7,31,61,.89)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);transition:height .32s var(--v21-ease),background .32s,box-shadow .32s}
.hdr.scrolled{background:rgba(7,31,61,.96)!important;box-shadow:0 14px 44px -22px rgba(0,0,0,.65)!important}
.nav a,.nav .nb{position:relative;border-radius:10px;transition:background .25s,color .25s,transform .25s}
.nav a:hover,.nav .nb:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.nav a::after,.nav .nb::after{content:"";position:absolute;height:2px;inset-inline:13px;bottom:5px;border-radius:9px;background:linear-gradient(90deg,var(--v21-orange),var(--v21-orange-2));transform:scaleX(0);transition:transform .28s var(--v21-ease)}
.nav a:hover::after,.nav .nb:hover::after,.nav a.on::after,.nav .nb.on::after{transform:scaleX(1)}

/* hero: more depth, visual confidence and controlled motion */
.hero.v8{isolation:isolate;overflow:hidden;background:
  radial-gradient(circle at 80% 18%,rgba(244,123,32,.28),transparent 28rem),
  radial-gradient(circle at 10% 84%,rgba(14,143,139,.2),transparent 28rem),
  linear-gradient(135deg,#06182f 0%,#0b2a4f 58%,#12375e 100%)!important}
.hero.v8::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.035) 50%,transparent 58%);background-size:250% 100%;animation:v21Sheen 10s linear infinite;pointer-events:none;z-index:1}
@keyframes v21Sheen{to{background-position:-250% 0}}
.hero-copy-v8{animation:v21HeroIn .85s var(--v21-ease) both}
.hero-copy-v8 h1{text-wrap:balance;text-shadow:0 14px 36px rgba(0,0,0,.18)}
.hero-copy-v8 h1 em{background:linear-gradient(110deg,#ffb66f,#f47b20 58%,#ffd1a8);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.hero-chips span{box-shadow:inset 0 1px rgba(255,255,255,.1);transition:.25s var(--v21-ease)}
.hero-chips span:hover{transform:translateY(-3px);background:rgba(255,255,255,.13);border-color:rgba(255,173,97,.4)}
.hero-media-v8{transform:perspective(1100px) rotateY(-1.7deg);transition:transform .7s var(--v21-ease),box-shadow .7s var(--v21-ease);animation:v21HeroMedia .95s .12s var(--v21-ease) both}
[dir=ltr] .hero-media-v8{transform:perspective(1100px) rotateY(1.7deg)}
.hero-media-v8:hover{transform:perspective(1100px) rotateY(0) translateY(-5px);box-shadow:0 44px 110px -32px rgba(0,0,0,.72)}
.hero-media-v8 .video-device{animation:v21Float 6.5s ease-in-out infinite}
.v21-float-stat{position:absolute;z-index:7;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(7,26,52,.75);backdrop-filter:blur(12px);box-shadow:0 18px 45px rgba(0,0,0,.26);color:#fff;animation:v21Float 5.2s ease-in-out infinite}
.v21-float-stat.one{top:88px;inset-inline-start:7px}.v21-float-stat.two{bottom:105px;inset-inline-end:7px;animation-delay:-2.3s}
.v21-float-stat i{width:35px;height:35px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,var(--v21-orange),var(--v21-orange-2));font-style:normal}
.v21-float-stat b{display:block;font-size:.8rem}.v21-float-stat small{display:block;color:#b9c9dd;font-size:.62rem}
@keyframes v21HeroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes v21HeroMedia{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1}}
@keyframes v21Float{50%{transform:translateY(-9px)}}

/* stronger visual hierarchy */
.sec-h h2,.pg-hero h1,.dash-hd h1{letter-spacing:-.45px;text-wrap:balance}
.sec-h .eyebrow,.eyebrow{display:inline-flex;align-items:center;gap:7px}
.sec-h .eyebrow::before,.eyebrow::before{content:"";width:20px;height:2px;border-radius:5px;background:linear-gradient(90deg,var(--v21-orange),var(--v21-orange-2))}
.pg-hero,.dash-hd{position:relative;overflow:hidden;isolation:isolate}
.pg-hero::after,.dash-hd::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;inset-inline-end:-120px;top:-210px;background:radial-gradient(circle,rgba(255,255,255,.13),transparent 67%);z-index:-1}

/* cards with subtle light tracking */
.card,.course-vcard,.mode-c,.sec-c,.course-about-card,.course-side-buy,.apanel,.akpi{border-color:var(--v21-line)!important;box-shadow:var(--v21-shadow)!important;transition:transform .34s var(--v21-ease),box-shadow .34s var(--v21-ease),border-color .34s,background .34s;position:relative}
.card:hover,.course-vcard:hover,.mode-c:hover,.sec-c:hover{transform:translateY(-7px);box-shadow:var(--v21-shadow-hover)!important;border-color:rgba(244,123,32,.32)!important}
.card::before,.course-vcard::before,.mode-c::before,.sec-c::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 30%);opacity:0;pointer-events:none;transition:opacity .28s;z-index:1}
.card:hover::before,.course-vcard:hover::before,.mode-c:hover::before,.sec-c:hover::before{opacity:1}
.course-vcard{overflow:hidden}
.course-cover{isolation:isolate;transition:transform .55s var(--v21-ease),filter .55s}
.course-vcard:hover .course-cover{transform:scale(1.025);filter:saturate(1.08)}
.course-cover::before{content:"";position:absolute;inset:-50%;z-index:2;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);transform:translateX(-60%) rotate(8deg);transition:transform .8s var(--v21-ease);pointer-events:none}
.course-vcard:hover .course-cover::before{transform:translateX(60%) rotate(8deg)}
.course-vbody{position:relative;z-index:3;background:#fff}
.cr-ic,.sec-c .ic,.mode-c .ic{filter:drop-shadow(0 10px 15px rgba(6,30,60,.12));transition:transform .35s var(--v21-ease)}
.card:hover .cr-ic,.sec-c:hover .ic,.mode-c:hover .ic{transform:translateY(-4px) rotate(-3deg) scale(1.06)}

/* buttons and controls */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .24s var(--v21-ease),box-shadow .24s,filter .24s!important}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.28) 48%,transparent 72%);transform:translateX(-130%);transition:transform .55s var(--v21-ease)}
.btn:hover::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px)}
.btn.p:hover{box-shadow:0 15px 30px -14px rgba(244,123,32,.75)}
input,select,textarea{transition:border-color .22s,box-shadow .22s,background .22s!important}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px rgba(244,123,32,.11)!important}

/* question bank inside the main admin center */
.question-admin-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:22px 0 16px;padding:24px 26px;border-radius:22px;background:linear-gradient(135deg,#0b2749,#143f6d);color:#fff;box-shadow:var(--v21-shadow)}
.question-admin-head h2{margin:3px 0 5px;font-size:1.45rem}.question-admin-head p{margin:0;color:#cbd9e9}.question-admin-head .eyebrow{color:#ffb36e}
.question-admin-tools{display:grid!important;grid-template-columns:minmax(240px,1.25fr) minmax(230px,1.3fr) minmax(150px,.65fr) auto;align-items:end;gap:12px;margin-bottom:16px!important}
.question-admin-tools .f{margin:0}.question-admin-tools .btn{min-height:44px}
.question-admin-table td{vertical-align:middle}.question-admin-table td:nth-child(2){min-width:360px;max-width:650px}.question-admin-table td:nth-child(2)>b{display:block;line-height:1.65}.question-admin-table .muted{font-size:.76rem;line-height:1.5;margin-top:4px}
.question-row-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:235px}.question-row-actions .danger{color:#b42318;border-color:#f3b7b1}
.question-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.question-editor-grid>section{padding:15px;border:1px solid var(--v21-line);border-radius:16px;background:#f8fafc}.question-editor-grid textarea{resize:vertical;line-height:1.65}

/* route and scroll reveal */
#app{transition:opacity .22s,transform .22s}
#app.v21-switching{opacity:.25;transform:translateY(7px)}
.v21-reveal{opacity:0!important;transform:translateY(24px) scale(.985)!important}
.v21-reveal.v21-in{opacity:1!important;transform:none!important;transition:opacity .72s var(--v21-ease),transform .72s var(--v21-ease)}
.v21-stagger>*{transition-delay:calc(var(--v21-i,0) * 55ms)!important}

/* footer and floating contact */
.ftr{position:relative;overflow:hidden;background:
  radial-gradient(circle at 86% 20%,rgba(244,123,32,.12),transparent 20rem),
  linear-gradient(145deg,#06172d,#0b2a4e)!important}
.ftr::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.wa{box-shadow:0 18px 46px -16px rgba(22,163,74,.65)!important;animation:v21Pulse 3.4s ease-in-out infinite}
@keyframes v21Pulse{50%{box-shadow:0 18px 54px -10px rgba(22,163,74,.8)}}

/* responsive refinement */
@media(max-width:900px){
  .hero-media-v8{transform:none!important}
  .v21-float-stat{display:none}
  .course-side-buy{position:static!important}
  .pg-hero{padding-block:42px!important}
  .question-admin-tools{grid-template-columns:1fr 1fr}.question-admin-table{overflow:auto}.question-admin-head{align-items:flex-start}.question-editor-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hero.v8{min-height:auto!important;padding-bottom:58px!important}
  .hero-copy-v8 h1{font-size:clamp(2.1rem,11vw,3.1rem)!important}
  .hero-media-v8{min-height:420px!important;padding:10px!important;border-radius:24px!important}
  .hero-chips{display:grid;grid-template-columns:1fr 1fr}
  .hero-chips span{justify-content:center;text-align:center;padding:7px}
  .card:hover,.course-vcard:hover,.mode-c:hover,.sec-c:hover{transform:none}
  .ftr-g{gap:28px!important}
  .question-admin-head{display:grid;padding:20px}.question-admin-head .btn{width:100%}.question-admin-tools{grid-template-columns:1fr}.question-admin-stats{grid-template-columns:1fr 1fr!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .v21-reveal{opacity:1!important;transform:none!important}
}