*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#040d1a;
  --bg2:#071525;
  --bg3:#0a1f38;
  --blue:#0ea5e9;
  --blue2:#38bdf8;
  --cyan:#06b6d4;
  --gold:#f59e0b;
  --gold2:#fbbf24;
  --white:#e8f4fd;
  --gray:#64a0c8;
  --border:rgba(14,165,233,0.2);
  --card:rgba(7,21,37,0.8);
  --r:14px;
}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--bg);color:var(--white);overflow-x:hidden;min-height:100vh;max-width:100vw}

/* ---- CANVAS BG ---- */
#bgCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ---- LAYOUT ---- */
.page{position:relative;z-index:1;display:none;min-height:100vh}
.page.active{display:block}

/* ---- NAV ---- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:999;
  height:70px;display:flex;align-items:center;justify-content:space-between;
  padding:0 2%;
  background:rgba(4,13,26,0.97);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  gap:12px;
}
/* Right zone: logo + nav links */
.nav-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
/* Center zone: search */
.nav-center-search{flex:1;display:flex;justify-content:center;align-items:center;max-width:320px;margin:0 8px}
/* Left zone: buttons + social */
.nav-left-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}

.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;flex-shrink:0;margin-left:12px}
.logo-atom{width:44px;height:44px;position:relative;flex-shrink:0}
.logo-atom svg{width:100%;height:100%}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text span:first-child{font-size:18px;font-weight:900;color:var(--blue2);letter-spacing:1px}
.logo-text span:last-child{font-size:10px;color:var(--gold);font-weight:600;letter-spacing:2px}

/* Nav center links (kept for backward compat) */
.nav-center{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;padding:0 20px}
.nav-link{
  background:none;border:none;color:rgba(232,244,253,0.75);
  padding:8px 14px;border-radius:8px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:13.5px;font-weight:600;
  transition:all .2s;white-space:nowrap;position:relative;
}
.nav-link:hover{color:var(--white);background:rgba(14,165,233,0.1)}
.nav-link.active-link{color:var(--blue2);background:rgba(14,165,233,0.12)}
.nav-link::after{
  content:'';position:absolute;bottom:-1px;left:50%;right:50%;
  height:2px;background:var(--blue2);border-radius:2px;
  transition:all .25s;
}
.nav-link:hover::after,.nav-link.active-link::after{left:20%;right:20%}

/* Nav right actions (legacy, now split into nav-right / nav-center-search / nav-left-actions) */
.nav-actions{display:contents}
.nav-btn{
  background:none;border:1px solid var(--border);color:var(--white);
  padding:8px 18px;border-radius:30px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:13.5px;font-weight:600;
  transition:all .25s;white-space:nowrap;
}
.nav-btn:hover{background:rgba(14,165,233,0.15);border-color:var(--blue);color:var(--blue2)}
.nav-btn.primary{background:linear-gradient(135deg,var(--blue),var(--cyan));border:none;color:#fff}
.nav-btn.primary:hover{opacity:.9;transform:translateY(-1px)}
.nav-btn.gold-btn{background:linear-gradient(135deg,var(--gold),var(--gold2));border:none;color:#000;font-weight:900}
.nav-btn.gold-btn:hover{opacity:.9;transform:translateY(-1px)}

/* Search */
.nav-search{
  display:flex;align-items:center;gap:8px;
  background:rgba(14,165,233,0.07);
  border:1px solid var(--border);border-radius:30px;
  padding:7px 16px;transition:.2s;width:100%;
}
.nav-search:focus-within{border-color:var(--blue);background:rgba(14,165,233,0.12)}
.nav-search input{
  background:none;border:none;outline:none;color:var(--white);
  font-family:'Cairo',sans-serif;font-size:13.5px;flex:1;min-width:80px;
}
.nav-search input::placeholder{color:var(--gray)}
.nav-search button{background:none;border:none;cursor:pointer;color:var(--blue);font-size:16px;padding:0}

/* Notification dot */
.nav-dot{
  position:absolute;top:2px;left:2px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);border:1.5px solid var(--bg);
}

/* Mobile hamburger */
.nav-hamburger{
  display:none;background:none;border:1px solid var(--border);color:var(--white);
  width:40px;height:40px;border-radius:10px;cursor:pointer;
  align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
}

/* Mobile menu */
.nav-mobile-menu{
  display:none;position:fixed;top:70px;right:0;left:0;
  background:rgba(4,13,26,0.99);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);padding:16px;
  flex-direction:column;gap:4px;z-index:998;
  max-height:calc(100vh - 70px);overflow-y:auto;
}
.nav-mobile-menu.open{display:flex}
.nav-mobile-link{
  background:none;border:none;color:var(--gray);width:100%;text-align:right;
  padding:14px 18px;border-radius:10px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:15px;font-weight:600;
  transition:.2s;display:flex;align-items:center;gap:10px;
}
.nav-mobile-link:hover{background:rgba(14,165,233,0.1);color:var(--white)}
.nav-mobile-divider{height:1px;background:var(--border);margin:8px 0}

/* ---- HERO (Enhanced) ---- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:100px 5% 60px;text-align:center;position:relative;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  transition:background-image 0.4s;
  overflow:hidden;
}
/* Deep space gradient base */
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(14,165,233,0.18) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 60%,rgba(6,182,212,0.10) 0%,transparent 65%),
    radial-gradient(ellipse 50% 50% at 20% 80%,rgba(245,158,11,0.07) 0%,transparent 60%),
    linear-gradient(180deg,rgba(4,13,26,0.6) 0%,rgba(4,13,26,0.35) 40%,rgba(4,13,26,0.75) 100%);
  pointer-events:none;
}
/* Grid lines */
.hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(14,165,233,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,165,233,0.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 50%,black 0%,transparent 80%);
}
.hero-bg-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(4,13,26,0.65) 0%,rgba(4,13,26,0.40) 50%,rgba(4,13,26,0.88) 100%);
  pointer-events:none;z-index:0;
}
/* Floating physics particles */
.hero-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hp{position:absolute;border-radius:50%;animation:hpFloat linear infinite;opacity:0}
@keyframes hpFloat{
  0%{transform:translateY(100vh) rotate(0deg);opacity:0}
  5%{opacity:.6}
  90%{opacity:.3}
  100%{transform:translateY(-20vh) rotate(720deg);opacity:0}
}
/* Orbit ring decoration */
.hero-orbit{
  position:absolute;width:700px;height:700px;border-radius:50%;
  border:1px solid rgba(14,165,233,0.08);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:orbitSpin 40s linear infinite;pointer-events:none;z-index:0;
}
.hero-orbit::before{
  content:'';position:absolute;width:10px;height:10px;border-radius:50%;
  background:var(--blue2);top:-5px;left:50%;margin-left:-5px;
  box-shadow:0 0 20px var(--blue2),0 0 40px var(--blue2);
}
.hero-orbit-2{
  width:500px;height:500px;border-color:rgba(6,182,212,0.06);
  animation-duration:28s;animation-direction:reverse;
}
.hero-orbit-3{
  width:900px;height:900px;border-color:rgba(245,158,11,0.05);
  animation-duration:55s;
}
@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.hero>*:not(.hero-bg-overlay):not(.hero-particles):not(.hero-orbit):not(.hero-orbit-2):not(.hero-orbit-3){position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.30);
  color:var(--gold2);padding:6px 20px;border-radius:30px;
  font-size:12px;font-weight:700;margin-bottom:24px;letter-spacing:1px;
  animation:fadeDown .8s ease;
  box-shadow:0 0 30px rgba(245,158,11,0.12),inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
}
.hero h1{
  font-size:clamp(26px,4vw,52px);font-weight:900;line-height:1.35;letter-spacing:-0.5px;
  margin-bottom:24px;animation:fadeDown .9s ease .1s both;
  text-shadow:0 2px 40px rgba(14,165,233,0.2);
}
.hero h1 .hl{
  background:linear-gradient(90deg,#38bdf8,#06b6d4,#38bdf8);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 3s linear infinite;
}
@keyframes shimmer{to{background-position:200% center}}
.hero p{
  font-size:15px;color:rgba(148,180,210,0.9);max-width:560px;line-height:2.1;
  margin:0 auto 44px;animation:fadeDown 1s ease .2s both;
}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;animation:fadeDown 1s ease .3s both}
.btn-main{
  padding:14px 36px;border-radius:40px;font-family:'Cairo',sans-serif;
  font-size:15px;font-weight:700;cursor:pointer;transition:all .3s;border:none;
  position:relative;overflow:hidden;
}
.btn-main::after{
  content:'';position:absolute;inset:0;border-radius:40px;
  background:linear-gradient(rgba(255,255,255,0.12),transparent);
  opacity:0;transition:.2s;
}
.btn-main:hover::after{opacity:1}
.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;
  box-shadow:0 4px 24px rgba(14,165,233,0.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(14,165,233,0.5)}
.btn-outline{background:rgba(14,165,233,0.08);border:1.5px solid rgba(14,165,233,0.5);color:var(--blue2);backdrop-filter:blur(8px)}
.btn-outline:hover{background:rgba(14,165,233,0.18);transform:translateY(-3px);border-color:var(--blue2)}

/* Stats bar */
.hero-stats{
  display:flex;gap:0;justify-content:center;margin-top:56px;
  flex-wrap:wrap;animation:fadeDown 1s ease .4s both;
  background:rgba(7,21,37,0.6);backdrop-filter:blur(20px);
  border:1px solid rgba(14,165,233,0.15);border-radius:20px;
  padding:6px;max-width:680px;margin-left:auto;margin-right:auto;
}
.stat{
  text-align:center;padding:18px 32px;position:relative;flex:1;min-width:120px;
}
.stat:not(:last-child)::after{
  content:'';position:absolute;left:0;top:20%;height:60%;width:1px;
  background:rgba(14,165,233,0.2);
}
.stat-num{
  font-size:26px;font-weight:900;
  background:linear-gradient(135deg,var(--blue2),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:-0.5px;line-height:1;margin-bottom:4px;
}
.stat-lbl{font-size:11px;color:var(--gray);letter-spacing:0.5px;font-weight:600}

/* ---- SECTIONS ---- */
.section-title{
  text-align:center;margin-bottom:50px;
}
.section-title h2{font-size:clamp(20px,3vw,30px);font-weight:800;margin-bottom:8px;letter-spacing:-0.2px}
.section-title h2 span{color:var(--blue2)}
.section-title p{color:var(--gray);font-size:15px}
.section-divider{
  width:60px;height:3px;margin:14px auto 0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:3px;
}

/* ---- SERVICES SLIDER (Revolution Style) ---- */
.main-cards-section{padding:90px 0 100px;overflow:hidden;position:relative}
.main-cards-section .section-title{padding:0 5%;margin-bottom:60px}

/* Slider wrapper */
.services-slider-wrap{position:relative;width:100%;overflow:hidden}
.services-slider-track{
  display:flex;gap:28px;
  padding:20px 5% 30px;
  transition:transform .7s cubic-bezier(.25,.46,.45,.94);
  will-change:transform;
  cursor:grab;user-select:none;
}
.services-slider-track:active{cursor:grabbing}

/* Individual service card */
.main-card{
  background:rgba(7,21,37,0.75);
  border:1px solid rgba(14,165,233,0.15);
  border-radius:24px;
  padding:0;
  cursor:pointer;
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
  position:relative;overflow:hidden;
  text-align:center;
  backdrop-filter:blur(16px);
  flex:0 0 300px;
  min-height:380px;
  display:flex;flex-direction:column;
}
/* Shimmer border on hover */
.main-card::before{
  content:'';position:absolute;inset:-1px;border-radius:25px;
  background:linear-gradient(135deg,transparent 20%,rgba(14,165,233,0.5) 50%,transparent 80%);
  opacity:0;transition:.4s;z-index:0;
  background-size:200%;
}
.main-card:hover::before{opacity:1;animation:borderShimmer 1.5s linear infinite}
@keyframes borderShimmer{to{background-position:-200%}}
/* Glow top edge */
.main-card-inner{
  position:relative;z-index:1;
  padding:40px 28px 32px;
  display:flex;flex-direction:column;align-items:center;
  height:100%;
  background:rgba(7,21,37,0.85);
  border-radius:24px;
  flex:1;
}

.main-card:hover{
  transform:translateY(-10px) scale(1.02);
  border-color:transparent;
  box-shadow:
    0 30px 80px rgba(14,165,233,0.2),
    0 0 0 1px rgba(14,165,233,0.3),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Card color themes */
.main-card.theme-blue .main-card-inner{
  background:linear-gradient(160deg,rgba(14,52,100,0.6) 0%,rgba(7,21,37,0.9) 60%);
}
.main-card.theme-gold .main-card-inner{
  background:linear-gradient(160deg,rgba(80,45,5,0.6) 0%,rgba(7,21,37,0.9) 60%);
}
.main-card.theme-cyan .main-card-inner{
  background:linear-gradient(160deg,rgba(5,50,62,0.6) 0%,rgba(7,21,37,0.9) 60%);
}
.main-card.theme-green .main-card-inner{
  background:linear-gradient(160deg,rgba(5,48,30,0.6) 0%,rgba(7,21,37,0.9) 60%);
}
.main-card.theme-purple .main-card-inner{
  background:linear-gradient(160deg,rgba(50,15,80,0.6) 0%,rgba(7,21,37,0.9) 60%);
}

/* Icon wrapper - glowing circle */
.card-icon{
  width:90px;height:90px;border-radius:26px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  transition:all .4s;
}
.card-icon svg{width:40px;height:40px;transition:.4s}
.main-card:hover .card-icon{transform:scale(1.12) rotate(-5deg)}

.card-icon.blue{
  background:linear-gradient(135deg,rgba(14,100,200,0.25),rgba(14,165,233,0.12));
  border:1px solid rgba(14,165,233,0.35);
  box-shadow:0 8px 32px rgba(14,165,233,0.2),inset 0 1px 0 rgba(255,255,255,0.08);
}
.main-card.theme-blue:hover .card-icon.blue{
  box-shadow:0 12px 48px rgba(14,165,233,0.5),0 0 60px rgba(14,165,233,0.15);
}
.card-icon.gold{
  background:linear-gradient(135deg,rgba(180,80,0,0.25),rgba(245,158,11,0.12));
  border:1px solid rgba(245,158,11,0.35);
  box-shadow:0 8px 32px rgba(245,158,11,0.2),inset 0 1px 0 rgba(255,255,255,0.08);
}
.main-card.theme-gold:hover .card-icon.gold{
  box-shadow:0 12px 48px rgba(245,158,11,0.5),0 0 60px rgba(245,158,11,0.15);
}
.card-icon.cyan{
  background:linear-gradient(135deg,rgba(5,80,100,0.25),rgba(6,182,212,0.12));
  border:1px solid rgba(6,182,212,0.35);
  box-shadow:0 8px 32px rgba(6,182,212,0.2),inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-icon.green{
  background:linear-gradient(135deg,rgba(15,80,40,0.25),rgba(34,197,94,0.12));
  border:1px solid rgba(34,197,94,0.35);
  box-shadow:0 8px 32px rgba(34,197,94,0.2),inset 0 1px 0 rgba(255,255,255,0.08);
}
.card-icon.purple{
  background:linear-gradient(135deg,rgba(80,15,120,0.25),rgba(168,85,247,0.12));
  border:1px solid rgba(168,85,247,0.35);
  box-shadow:0 8px 32px rgba(168,85,247,0.2),inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Card content */
.main-card h3{
  font-size:17px;font-weight:800;margin-bottom:10px;color:var(--white);
  letter-spacing:-0.2px;
}
.main-card p{color:rgba(148,180,210,0.85);font-size:13px;line-height:1.85;flex:1}
.card-arrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blue2);font-size:12px;font-weight:700;margin-top:22px;
  padding:8px 20px;border-radius:30px;
  background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.2);
  transition:all .3s;
}
.main-card:hover .card-arrow{
  background:rgba(14,165,233,0.15);border-color:var(--blue2);
  transform:translateX(-4px);
}
.main-card.theme-gold:hover .card-arrow{color:var(--gold2);border-color:rgba(245,158,11,0.4);background:rgba(245,158,11,0.08)}
.main-card.theme-cyan:hover .card-arrow{color:#22d3ee;border-color:rgba(6,182,212,0.4);background:rgba(6,182,212,0.08)}
.main-card.theme-green:hover .card-arrow{color:#4ade80;border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.08)}
.main-card.theme-purple:hover .card-arrow{color:#c084fc;border-color:rgba(168,85,247,0.4);background:rgba(168,85,247,0.08)}

/* Slider controls */
.slider-controls{
  display:flex;align-items:center;justify-content:center;
  gap:20px;margin-top:44px;padding:0 5%;
}
.slider-btn{
  width:46px;height:46px;border-radius:50%;
  background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.25);
  color:var(--blue2);cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;font-family:'Cairo',sans-serif;
  flex-shrink:0;
}
.slider-btn:hover{background:rgba(14,165,233,0.2);border-color:var(--blue);transform:scale(1.1)}
.slider-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
.slider-dots{display:flex;gap:8px;align-items:center}
.sdot{
  width:8px;height:8px;border-radius:4px;
  background:rgba(14,165,233,0.25);border:none;cursor:pointer;
  transition:all .35s;padding:0;
}
.sdot.active{width:28px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
/* Auto-progress ring on active dot */
.sdot.active{position:relative}

/* Progress bar */
.slider-progress{
  width:160px;height:2px;background:rgba(14,165,233,0.12);
  border-radius:2px;overflow:hidden;position:relative;
}
.slider-progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  border-radius:2px;
  transition:width linear;
}

/* ---- COURSES PAGE ---- */
.courses-header{
  background:linear-gradient(180deg,rgba(14,165,233,0.12),transparent);
  padding:110px 5% 50px;text-align:center;
}
.courses-header h1{font-size:clamp(28px,4vw,44px);font-weight:900;margin-bottom:12px}
.courses-header p{color:var(--gray);font-size:16px}
.courses-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:24px;padding:40px 5% 80px;max-width:1300px;margin:0 auto;
}
.course-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;overflow:hidden;cursor:pointer;
  transition:all .3s;backdrop-filter:blur(10px);
}
.course-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 16px 40px rgba(14,165,233,0.15)}
.course-thumb{
  height:220px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;font-size:52px;cursor:pointer;
}
.course-thumb.t1{background:linear-gradient(135deg,#0f3a6e,#1a6bdc)}
.course-thumb.t2{background:linear-gradient(135deg,#1a3a1a,#16a34a)}
.course-thumb.t3{background:linear-gradient(135deg,#3a1a0f,#c2410c)}
.course-thumb.t4{background:linear-gradient(135deg,#1a0f3a,#7c3aed)}

/* Hover overlay on thumbnail */
.thumb-hover-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,13,26,.92) 0%,rgba(4,13,26,.3) 60%,transparent 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding-bottom:16px;gap:5px;
  opacity:0;transition:opacity .3s ease;
}
.course-card:hover .thumb-hover-overlay{opacity:1}
.thumb-hover-label{
  display:flex;align-items:center;gap:7px;
  color:#fff;font-family:'Cairo',sans-serif;font-size:13px;font-weight:800;
  background:rgba(14,165,233,0.92);backdrop-filter:blur(8px);
  padding:7px 18px;border-radius:30px;
  border:1px solid rgba(56,189,248,0.5);
  box-shadow:0 4px 18px rgba(14,165,233,0.45);
  transform:translateY(6px);transition:transform .3s ease;
}
.course-card:hover .thumb-hover-label{transform:translateY(0)}
.thumb-hover-sub{
  font-size:10px;color:rgba(255,255,255,.65);
  font-family:'Cairo',sans-serif;font-weight:600;letter-spacing:.3px;
  transform:translateY(6px);transition:transform .3s ease .04s;
}
.course-card:hover .thumb-hover-sub{transform:translateY(0)}
.course-badge{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);
  color:#fff;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.2);
}
.course-body{padding:22px}
.course-level{
  font-size:11px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;
}
.course-title{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.4}
.course-meta{display:flex;gap:16px;margin-top:14px}
.meta-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gray)}
.course-btn{
  width:100%;margin-top:16px;padding:10px;border-radius:10px;
  background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.3);
  color:var(--blue2);font-family:'Cairo',sans-serif;font-size:14px;
  font-weight:700;cursor:pointer;transition:all .25s;
}
.course-btn:hover{background:var(--blue);color:#fff}
.course-btn-enrolled{
  background:rgba(34,197,94,0.15);
  border-color:rgba(34,197,94,0.4);
  color:#4ade80;
}
.course-btn-enrolled:hover{background:#16a34a;border-color:#16a34a;color:#fff}

/* ---- COMING SOON PAGE ---- */
.coming-soon{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:100px 5% 60px;text-align:center;
}
.coming-icon{
  width:120px;height:120px;border-radius:30px;margin:0 auto 30px;
  background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);
  display:flex;align-items:center;justify-content:center;font-size:50px;
}
.coming-soon h1{font-size:clamp(32px,5vw,54px);font-weight:900;margin-bottom:16px}
.coming-soon h1 span{color:var(--gold2)}
.coming-soon p{color:var(--gray);font-size:16px;max-width:500px;margin:0 auto 30px}

/* ---- AUTH MODAL ---- */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  z-index:9000;display:none;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
}
.overlay.show{display:flex}
.modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:24px;width:100%;max-width:500px;
  padding:36px;position:relative;animation:popIn .3s ease;
  margin:auto;
}
.modal-close{
  position:absolute;top:16px;left:16px;
  background:none;border:none;color:var(--gray);cursor:pointer;font-size:22px;
}
.modal h2{font-size:24px;font-weight:900;margin-bottom:6px}
.modal p.sub{color:var(--gray);font-size:14px;margin-bottom:28px}
.tabs{display:flex;gap:8px;margin-bottom:28px;background:rgba(14,165,233,0.06);border-radius:12px;padding:4px}
.tab{
  flex:1;padding:10px;border-radius:8px;border:none;background:none;
  font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;
  color:var(--gray);cursor:pointer;transition:.2s;
}
.tab.active{background:var(--blue);color:#fff}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--gray);margin-bottom:6px}
.form-group input,.form-group select{
  width:100%;padding:12px 16px;border-radius:10px;
  background:rgba(14,165,233,0.06);border:1px solid var(--border);
  color:var(--white);font-family:'Cairo',sans-serif;font-size:15px;outline:none;
  transition:.2s;
}
.form-group input:focus,.form-group select:focus{border-color:var(--blue)}
.form-group select option{background:var(--bg2)}
.form-submit{
  width:100%;padding:14px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;font-family:'Cairo',sans-serif;font-size:16px;font-weight:700;
  cursor:pointer;transition:.25s;margin-top:6px;
}
.form-submit:hover{opacity:.9;transform:translateY(-1px)}

/* ---- COURSE VIEWER (Student) ---- */
/* ═══ إصلاح: خلفية صلبة لصفحة الدرس كي لا تَنفُذ نجوم الواجهة الرئيسية خلف المحتوى ═══
   الـ canvas#bgCanvas ثابت بـ z-index:0، و .page بـ z-index:1.
   نضيف خلفية صلبة على حاوية الدرس الرئيسية لتغطية الكانفس بصرياً. */
.course-viewer{
  display:flex;min-height:100vh;padding-top:70px;
  background: var(--bg);
  position: relative; z-index: 1;
}
/* احتياطاً: إخفاء الكانفس مباشرةً عبر :has() في المتصفحات الحديثة */
body:has(#page-course-viewer.active) #bgCanvas{ display:none; }
body:has(#page-course-viewer.active) .cv-main{ padding-bottom:120px; }
.cv-sidebar{
  width:300px;background:var(--bg2);border-left:1px solid var(--border);
  position:fixed;top:70px;right:0;bottom:0;overflow:hidden;z-index:100;
  display:flex;flex-direction:column;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.cv-sidebar.cv-collapsed{transform:translateX(300px)}
.cv-sidebar-header{
  padding:20px;border-bottom:1px solid var(--border);
  background:rgba(14,165,233,0.06);
  flex-shrink:0;
}
.cv-sidebar-header h3{font-size:15px;font-weight:700;margin-bottom:4px}
.cv-sidebar-header p{font-size:12px;color:var(--gray)}
.cv-lesson-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;scrollbar-width:thin;scrollbar-color:rgba(14,165,233,0.3) transparent}
.cv-lesson-list::-webkit-scrollbar{width:4px}
.cv-lesson-list::-webkit-scrollbar-track{background:transparent}
.cv-lesson-list::-webkit-scrollbar-thumb{background:rgba(14,165,233,0.3);border-radius:4px}
.cv-lesson-item{
  display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;
  border-right:3px solid transparent;transition:.2s;
  border-bottom:1px solid rgba(14,165,233,0.06);
  min-height:56px;
  background:var(--bg2);
}
.cv-lesson-item:hover{background:rgba(14,165,233,0.06)}
.cv-lesson-item.active{background:rgba(14,165,233,0.1);border-right-color:var(--blue);color:var(--blue2)}
.cv-lesson-item.completed .cv-li-num{background:rgba(34,197,94,0.2);color:#4ade80;border-color:rgba(34,197,94,0.4)}
/* ---- DRIP SYSTEM: Locked Lessons ---- */
.cv-lesson-item.locked{opacity:0.6;cursor:not-allowed;background:rgba(100,116,139,0.05)}
.cv-lesson-item.locked:hover{background:rgba(100,116,139,0.08);transform:none}
.cv-lesson-item.locked .cv-li-num{background:rgba(100,116,139,0.15);color:#64748b;border-color:rgba(100,116,139,0.3)}
.cv-lesson-item.locked .cv-li-title{color:#64748b}
.cv-lesson-item.locked .cv-li-dur{color:#475569}
/* Group/Parent lessons */
.cv-lesson-item.cv-group-item{border-right-color:rgba(99,102,241,0.5);background:rgba(99,102,241,0.04)}
.cv-lesson-item.cv-group-item:hover{background:rgba(99,102,241,0.08)}
.cv-group-children{padding-right:12px;border-right:2px solid rgba(99,102,241,0.2)}
.cv-lock-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:#f59e0b;background:rgba(245,158,11,0.12);padding:2px 8px;border-radius:10px;margin-top:4px}
.cv-lesson-item .cv-quiz-status{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:2px 8px;border-radius:10px;margin-top:4px}
.cv-quiz-status.passed{background:rgba(34,197,94,0.12);color:#4ade80}
.cv-quiz-status.failed{background:rgba(239,68,68,0.12);color:#f87171}
.cv-quiz-status.pending{background:rgba(245,158,11,0.12);color:#f59e0b}
/* Lesson Quiz Section */
.lesson-quiz-section{background:rgba(245,158,11,0.06);border:1px solid rgba(245,158,11,0.2);border-radius:16px;padding:24px;margin-top:24px}
.lesson-quiz-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.lesson-quiz-header h3{font-size:16px;font-weight:700;color:#fbbf24}
.lesson-quiz-info{font-size:13px;color:var(--gray);margin-bottom:16px}
.lesson-quiz-requirement{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(14,165,233,0.08);border-radius:10px;font-size:13px;color:var(--blue2);margin-bottom:16px}
.lesson-quiz-btn{padding:14px 28px;border-radius:12px;border:none;font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;gap:8px}
.lesson-quiz-btn.start{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#000}
.lesson-quiz-btn.retry{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3);color:#f87171}
.lesson-quiz-btn.passed{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3);color:#4ade80;cursor:default}
.lesson-quiz-result{padding:16px;border-radius:12px;text-align:center;margin-top:12px}
.lesson-quiz-result.success{background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2)}
.lesson-quiz-result.fail{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.2)}
.cv-li-num{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:rgba(14,165,233,0.1);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.cv-li-info{flex:1;min-width:0;overflow:hidden}
.cv-li-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;width:100%}
.cv-li-dur{font-size:11px;color:var(--gray);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-main{margin-right:300px;flex:1;padding:30px 4%;transition:margin-right .3s cubic-bezier(.4,0,.2,1)}
.cv-main.cv-collapsed{margin-right:0}
.cv-toggle-btn{
  position:fixed;top:50%;transform:translateY(-50%);
  right:300px;transition:right .3s cubic-bezier(.4,0,.2,1);
  z-index:101;width:20px;height:56px;
  background:var(--bg2);border:1px solid var(--border);border-right:none;
  border-radius:8px 0 0 8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:var(--gray);font-size:11px;padding:0;
}
.cv-toggle-btn:hover{background:rgba(14,165,233,0.1);color:var(--blue2)}
.cv-toggle-btn.cv-collapsed{right:0}
/* ═══ إصلاح: مساحة أوسع للقراءة عند الدروس متعددة الكتل ═══ */
.cv-main.is-blocks-active{padding:24px 2%}
@media(max-width:900px){
  .cv-main.is-blocks-active{padding:20px 3%}
}
.cv-back-btn{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;
  background:none;border:1px solid var(--border);color:var(--gray);
  padding:8px 18px;border-radius:30px;cursor:pointer;font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:600;transition:.2s;
}
.cv-back-btn:hover{border-color:var(--blue);color:var(--blue2)}
.cv-video-wrap{
  width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;
  margin-bottom:24px;border:1px solid var(--border);position:relative;
}
.cv-video-wrap iframe{width:100%;height:100%;border:none}
/* ═══ إصلاح: توسيع إطار الدروس متعددة الكتل (blocks/builder/page)
   الإطار الافتراضي ثابت 16:9 فيكون ضيقاً لعرض عدّة كتل متتابعة.
   هذه الفئة تُضاف ديناميكياً من JavaScript عند هذه الأنواع فقط،
   فتزيل نسبة العرض إلى الارتفاع وتمنح ارتفاعاً مناسباً قابلاً للنموّ. */
.cv-video-wrap.is-pdf{
  aspect-ratio:auto;
  height:82vh;
  min-height:500px;
  overflow:hidden;
  background:#d0d0d0;
}
.cv-video-wrap.is-blocks{
  aspect-ratio:auto;
  height:auto;min-height:82vh;
  background:transparent;
  border:1px solid rgba(168,85,247,0.22);
  border-radius:18px;
  /* ═══ إصلاح: السماح للإطار بالتمدد مع المحتوى بدل قصّه ═══
     الافتراضي على .cv-video-wrap هو overflow:hidden (مناسب للفيديو
     ذي النسبة 16/9). لكن للـ blocks الإطار قد يحوي عدة كتل وصوراً،
     فالـ hidden كان يُخفي ما يخرج عنه. نعيده visible ونترك تمرير
     الصفحة الطبيعي يتولّى المحتوى الطويل. */
  overflow:visible;
}
.cv-video-wrap.is-blocks > div{
  max-height:none;
  /* مهم: ألغِ overflow-y:auto الموضوع inline من JS ليصبح المحتوى
     جزءاً من تمرير الصفحة العادي وليس صندوقاً معزولاً. */
  overflow:visible !important;
  height:auto !important;
}
.cv-no-video{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:rgba(14,165,233,0.04);color:var(--gray);
}
.cv-lesson-info{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:24px;margin-bottom:24px;backdrop-filter:blur(10px);
}
.cv-lesson-info h2{font-size:20px;font-weight:700;margin-bottom:10px}
.cv-lesson-info p{color:var(--gray);font-size:14px;line-height:1.8}
.cv-tabs{display:flex;gap:4px;background:rgba(14,165,233,0.06);border-radius:12px;padding:4px;margin-bottom:24px}
.cv-tab{flex:1;padding:10px;border-radius:8px;border:none;background:none;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;color:var(--gray);cursor:pointer;transition:.2s}
.cv-tab.active{background:var(--blue);color:#fff}
.cv-section{display:none}
.cv-section.active{display:block}

/* Exam taking */
.exam-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px;backdrop-filter:blur(10px);cursor:pointer;transition:.3s}
.exam-card:hover{border-color:var(--blue);transform:translateX(-3px)}
.exam-card h4{font-size:16px;font-weight:700;margin-bottom:6px}
.exam-card p{color:var(--gray);font-size:13px}
.exam-take-wrap{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:30px;backdrop-filter:blur(10px)}
.exam-q-num{font-size:12px;color:var(--blue2);font-weight:700;margin-bottom:8px}
.exam-q-text{font-size:17px;font-weight:700;margin-bottom:20px;line-height:1.6}
.exam-options{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.exam-opt{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-radius:12px;border:1px solid var(--border);cursor:pointer;transition:.2s;
  font-size:14px;font-weight:600;
}
.exam-opt:hover{border-color:var(--blue);background:rgba(14,165,233,0.06)}
.exam-opt.selected{border-color:var(--blue);background:rgba(14,165,233,0.12);color:var(--blue2)}
.exam-opt.correct{border-color:#4ade80;background:rgba(34,197,94,0.12);color:#4ade80}
.exam-opt.wrong{border-color:#f87171;background:rgba(239,68,68,0.12);color:#f87171}
.exam-opt-letter{width:28px;height:28px;border-radius:50%;background:rgba(14,165,233,0.12);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0}
.exam-result-box{text-align:center;padding:40px 20px;background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.2);border-radius:16px}
.exam-result-score{font-size:64px;font-weight:900;color:#4ade80;margin-bottom:10px}

/* ---- WHATSAPP NAV BTN ---- */
.wa-nav-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c7e);border:none;color:#fff;
  cursor:pointer;text-decoration:none;transition:all .25s;flex-shrink:0;
}
.wa-nav-btn:hover{opacity:.9;transform:scale(1.1);box-shadow:0 6px 20px rgba(37,211,102,.4)}

/* ---- YOUTUBE NAV BTN ---- */
.yt-nav-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,#ff0000,#cc0000);border:none;color:#fff;
  cursor:pointer;text-decoration:none;transition:all .25s;flex-shrink:0;
}
.yt-nav-btn:hover{opacity:.9;transform:scale(1.1);box-shadow:0 6px 20px rgba(255,0,0,.4)}

/* ---- CONTENT MANAGER (Teacher) ---- */
.cm-tabs{display:flex;gap:6px;background:rgba(14,165,233,0.06);border-radius:12px;padding:4px;margin-bottom:28px}
.cm-tab{flex:1;padding:11px;border-radius:8px;border:none;background:none;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;color:var(--gray);cursor:pointer;transition:.2s;text-align:center}
.cm-tab.active{background:var(--blue);color:#fff}
.cm-section{display:none}
.cm-section.active{display:block}
.lesson-item-row{
  display:flex;align-items:center;gap:14px;padding:14px 18px;
  background:rgba(14,165,233,0.04);border:1px solid var(--border);border-radius:12px;
  margin-bottom:8px;transition:.2s;
}
.lesson-item-row:hover{border-color:var(--blue);background:rgba(14,165,233,0.08)}
.lesson-order-badge{width:30px;height:30px;border-radius:50%;background:rgba(14,165,233,0.15);border:1px solid rgba(14,165,233,0.3);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--blue2);flex-shrink:0}
.lesson-item-info{flex:1;min-width:0}
.lesson-item-title{font-size:13px;font-weight:700;margin-bottom:3px}
.lesson-item-meta{font-size:11px;color:var(--gray)}

/* ---- UNITS (Masterstudying-style) ---- */
.unit-block{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;margin-bottom:20px;overflow:hidden;
  backdrop-filter:blur(10px);transition:.3s;
}
.unit-block:hover{border-color:var(--blue)}
.unit-header{
  display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;
  background:rgba(14,165,233,0.06);border-bottom:1px solid var(--border);
  transition:.2s;
}
.unit-header:hover{background:rgba(14,165,233,0.1)}
.unit-color-dot{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
}
.unit-chevron{font-size:14px;color:var(--blue2);transition:transform .3s;margin-right:auto}
.unit-block.open .unit-chevron{transform:rotate(90deg)}
.unit-title{font-size:16px;font-weight:800;flex:1}
.unit-lesson-count{font-size:12px;color:var(--blue2);background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.25);padding:3px 10px;border-radius:20px;font-weight:700;flex-shrink:0}
.unit-body{display:none;padding:20px 22px}
.unit-block.open .unit-body{display:block}
.unit-actions{display:flex;gap:8px;flex-shrink:0}

/* add lesson btn inside unit */
.add-lesson-in-unit{
  width:100%;padding:10px;border-radius:10px;
  background:rgba(34,197,94,0.08);border:1px dashed rgba(34,197,94,0.4);
  color:#4ade80;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  cursor:pointer;transition:.2s;margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;
}
.add-lesson-in-unit:hover{background:rgba(34,197,94,0.16)}

/* add lesson modal overlay */
.add-lesson-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);
  z-index:9600;display:none;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
}
.add-lesson-overlay.show{display:flex}
.add-lesson-modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:24px;width:100%;max-width:640px;
  padding:36px;position:relative;animation:popIn .3s ease;margin:auto;
}

/* CV sidebar unit headers */
/* ═══ إصلاح: جعل عناوين الوحدات قابلة للنقر (Accordion) ═══ */
.cv-unit-header{
  padding:14px 20px;font-size:12px;font-weight:800;letter-spacing:0.5px;
  color:var(--blue2);background:var(--bg2);border-bottom:1px solid var(--border);
  border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;
  cursor:pointer;user-select:none;transition:background .2s;
}
.cv-unit-header:hover{background:rgba(14,165,233,0.08)}
.cv-unit-header.expanded{background:rgba(14,165,233,0.06);color:var(--blue)}
.cv-unit-progress{font-size:10px;color:var(--gray);margin-right:auto}
.cv-unit-chevron{font-size:11px;transition:transform .25s ease;display:inline-block;color:var(--gray)}
.cv-unit-header.expanded .cv-unit-chevron{transform:rotate(-90deg);color:var(--blue2)}
.cv-unit-lessons{overflow:hidden;max-height:0;transition:max-height .3s ease}
.cv-unit-lessons.expanded{max-height:none}
/* ===== EXAM QUESTION RICH EDITOR ===== */
.q-builder{background:rgba(14,165,233,0.04);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:16px}
.q-builder-header{font-size:13px;font-weight:700;color:var(--blue2);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.q-rich-editor{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:10px;min-height:80px;color:var(--white)}
.q-rich-editor .ql-toolbar{background:rgba(14,165,233,0.08)!important;border-color:var(--border)!important;border-radius:10px 10px 0 0!important;flex-wrap:wrap}
.q-rich-editor .ql-container{background:rgba(14,165,233,0.03)!important;border-color:var(--border)!important;border-radius:0 0 10px 10px!important;min-height:60px}
.q-rich-editor .ql-editor{color:var(--white)!important;font-family:'Cairo',sans-serif!important;font-size:14px!important;line-height:1.8!important;direction:rtl!important}
.q-rich-editor .ql-editor.ql-blank::before{color:var(--gray)!important;font-style:normal!important;font-family:'Cairo',sans-serif!important}
.q-rich-editor .ql-stroke{stroke:var(--gray)!important}
.q-rich-editor .ql-fill{fill:var(--gray)!important}
.q-rich-editor .ql-toolbar button:hover .ql-stroke,.q-rich-editor .ql-toolbar button.ql-active .ql-stroke{stroke:var(--blue2)!important}
.q-rich-editor .ql-picker-label{color:var(--gray)!important}
.q-rich-editor .ql-picker-options{background:var(--bg2)!important;border-color:var(--border)!important;z-index:9999!important}
.q-rich-editor .ql-picker-item{color:var(--gray)!important}
/* Math button - تم نقل التنسيق إلى .ql-math::before أسفل */
/* .ql-math::after removed to prevent duplicate sigma */
/* Image preview in question */
.q-img-preview{max-width:100%;max-height:160px;border-radius:10px;margin-top:8px;border:1px solid var(--border)}
/* Math render in exam */
.exam-q-text mjx-container{color:var(--white)}
.add-q-btn{background:rgba(14,165,233,0.1);border:1px dashed rgba(14,165,233,0.4);color:var(--blue2);padding:10px;border-radius:10px;width:100%;cursor:pointer;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;transition:.2s;margin-top:6px}
.add-q-btn:hover{background:rgba(14,165,233,0.18)}
.exam-list-item{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-bottom:10px}

/* ---- MISC ---- */
.course-promo-img{
  width:100%;height:220px;object-fit:cover;border-radius:12px;
  border:1px solid var(--border);margin-bottom:10px;
}
.course-price-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,rgba(245,158,11,0.18),rgba(251,191,36,0.12));
  border:1px solid rgba(245,158,11,0.45);
  color:var(--gold2);padding:6px 14px;border-radius:20px;
  font-size:15px;font-weight:900;margin-top:10px;
  width:fit-content;
}

/* ---- COURSE PREVIEW MODAL ---- */
.preview-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);
  z-index:9700;display:none;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
}
.preview-overlay.show{display:flex}
.preview-modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:24px;width:100%;max-width:700px;
  padding:36px;position:relative;animation:popIn .3s ease;margin:auto;
}
.preview-unit-block{
  background:rgba(14,165,233,0.04);border:1px solid var(--border);
  border-radius:14px;margin-bottom:14px;overflow:hidden;
}
.preview-unit-hdr{
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:rgba(14,165,233,0.08);border-bottom:1px solid var(--border);
}
.preview-unit-hdr h4{font-size:15px;font-weight:800;flex:1;margin:0}
.preview-unit-hdr span{font-size:11px;color:var(--blue2);background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.25);padding:2px 10px;border-radius:20px;font-weight:700}
.preview-lesson-row{
  display:flex;align-items:center;gap:10px;padding:11px 18px;
  border-top:1px solid rgba(14,165,233,0.06);font-size:13px;
}
.preview-lesson-num{width:24px;height:24px;border-radius:50%;background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--blue2);flex-shrink:0}

/* ---- DOWNLOAD CENTER MANAGEMENT (teacher) ---- */
.dc-file-row{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;
}
.dc-file-row:hover{border-color:var(--blue)}
.dc-toggle{
  position:relative;width:44px;height:24px;flex-shrink:0;
}
.dc-toggle input{opacity:0;width:0;height:0}
.dc-slider{
  position:absolute;inset:0;border-radius:24px;cursor:pointer;
  background:rgba(100,160,200,0.3);transition:.3s;
}
.dc-slider:before{
  content:'';position:absolute;width:18px;height:18px;
  left:3px;top:3px;border-radius:50%;background:#fff;transition:.3s;
}
.dc-toggle input:checked + .dc-slider{background:var(--blue)}
.dc-toggle input:checked + .dc-slider:before{transform:translateX(20px)}
.course-promo-placeholder{
  width:100%;height:220px;border-radius:12px;
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  border:2px dashed var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--gray);gap:8px;cursor:pointer;transition:.3s;
}
.course-promo-placeholder:hover{border-color:var(--blue);color:var(--blue2)}
.edit-course-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);
  z-index:9500;display:none;align-items:center;justify-content:center;padding:20px;
}
.edit-course-overlay.show{display:flex}
.edit-course-modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:24px;width:100%;max-width:580px;
  padding:36px;position:relative;animation:popIn .3s ease;
  max-height:90vh;overflow-y:auto;
}

/* ═══ Course Wizard (إضافة الدورة على خطوات) ═══ */
.course-wizard-modal{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:24px;width:100%;max-width:720px;
  padding:30px 32px;position:relative;animation:popIn .3s ease;
  max-height:92vh;overflow-y:auto;
}
.wz-progress{
  display:flex;align-items:center;justify-content:space-between;
  margin:20px 0 26px;padding:0 8px;gap:4px;
}
.wz-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;cursor:default}
.wz-step-circle{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;
  background:rgba(100,116,139,0.15);border:2px solid var(--border);
  color:var(--gray);transition:.25s;
}
.wz-step.active .wz-step-circle{
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-color:var(--blue);color:#fff;
  box-shadow:0 0 0 4px rgba(14,165,233,0.15);
}
.wz-step.done .wz-step-circle{
  background:rgba(34,197,94,0.18);border-color:#22c55e;color:#4ade80;
}
.wz-step-label{font-size:11px;color:var(--gray);font-weight:700;text-align:center;max-width:90px;line-height:1.3}
.wz-step.active .wz-step-label{color:var(--blue2)}
.wz-step.done .wz-step-label{color:#4ade80}
.wz-step-line{
  flex:1;height:2px;background:var(--border);
  margin:0 4px;align-self:center;margin-top:-18px;transition:.25s;
}
.wz-step-line.done{background:linear-gradient(90deg,#22c55e,var(--blue))}
.wz-panel{display:none;animation:fadeIn .25s ease}
.wz-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes cvEnterBottom{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cvEnterLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes cvEnterRight{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.wz-info-box{
  padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.6;
  margin:8px 0 16px;display:flex;gap:10px;align-items:flex-start;
}
.wz-info-box.paid{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.3);color:#fbbf24}
.wz-info-box.free{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3);color:#4ade80}
.wz-footer{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap;
}
.wz-btn{
  padding:11px 22px;border-radius:10px;border:1px solid var(--border);
  background:rgba(14,165,233,0.08);color:var(--white);font-family:Cairo,sans-serif;
  font-size:14px;font-weight:700;cursor:pointer;transition:.2s;
}
.wz-btn:hover{background:rgba(14,165,233,0.16)}
.wz-btn.primary{
  background:linear-gradient(135deg,var(--blue),var(--cyan));border-color:transparent;color:#fff;
}
.wz-btn.primary:hover{filter:brightness(1.1)}
.wz-btn.success{
  background:linear-gradient(135deg,#10b981,#059669);border-color:transparent;color:#fff;
}
.wz-btn.ghost{background:transparent;color:var(--gray);border-color:var(--border)}
.wz-btn:disabled{opacity:0.5;cursor:not-allowed}
.wz-review-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 12px;border-bottom:1px dashed var(--border);font-size:13px;
}
.wz-review-row:last-child{border-bottom:none}
.wz-review-row .label{color:var(--gray);font-weight:600;flex:0 0 auto}
.wz-review-row .value{color:var(--white);font-weight:700;text-align:left;direction:ltr;word-break:break-word}

.about-page{padding:110px 5% 80px}
.about-hero{
  text-align:center;margin-bottom:60px;
}
.about-hero h1{font-size:clamp(28px,4vw,44px);font-weight:900;margin-bottom:14px}
.about-hero p{color:var(--gray);font-size:16px;max-width:650px;margin:0 auto}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1100px;margin:0 auto 60px}
.about-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:30px;text-align:center;backdrop-filter:blur(10px);
}
.about-card .icon{font-size:36px;margin-bottom:16px}
.about-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.about-card p{color:var(--gray);font-size:14px;line-height:1.7}
.teacher-profile{
  max-width:700px;margin:0 auto;
  background:var(--card);border:1px solid var(--border);
  border-radius:24px;padding:40px;text-align:center;
  backdrop-filter:blur(10px);
}
.teacher-avatar{
  width:100px;height:100px;border-radius:50%;margin:0 auto 20px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;font-size:40px;
  border:3px solid rgba(14,165,233,0.4);
}
.teacher-profile h2{font-size:26px;font-weight:900;margin-bottom:6px}
.teacher-profile .role{color:var(--blue2);font-size:14px;font-weight:600;margin-bottom:16px}
.teacher-profile p{color:var(--gray);line-height:1.8;font-size:15px}

/* ---- MEDIA LIBRARY ---- */
.media-page{padding:110px 5% 80px}
.media-header{text-align:center;margin-bottom:40px}
.media-header h1{font-size:clamp(26px,4vw,40px);font-weight:900;margin-bottom:10px}
.media-filters{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;
}
.filter-btn{
  padding:8px 20px;border-radius:30px;border:1px solid var(--border);
  background:none;color:var(--gray);font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:600;cursor:pointer;transition:.2s;
}
.filter-btn.active,.filter-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.media-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;max-width:1200px;margin:0 auto;
}
.media-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;padding:20px;transition:.3s;
  display:flex;flex-direction:column;gap:12px;backdrop-filter:blur(10px);
}
.media-card:hover{border-color:var(--blue);transform:translateY(-3px)}
.media-icon{
  width:50px;height:50px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.media-icon.pdf{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.3)}
.media-icon.video{background:rgba(14,165,233,0.15);border:1px solid rgba(14,165,233,0.3)}
.media-icon.img{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.3)}
.media-icon.html{background:rgba(168,85,247,0.15);border:1px solid rgba(168,85,247,0.3)}
.media-card h4{font-size:15px;font-weight:700;flex:1}
.media-meta{font-size:12px;color:var(--gray)}
.media-down{
  padding:8px 16px;border-radius:8px;border:1px solid var(--border);
  background:none;color:var(--blue2);font-family:'Cairo',sans-serif;
  font-size:13px;font-weight:600;cursor:pointer;transition:.2s;width:100%;
}
.media-down:hover{background:var(--blue);border-color:var(--blue);color:#fff}

/* ═══ مركز التحميل — قائمة احترافية (v3) ═══ */
.dl-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:1px solid rgba(100,160,200,0.15);background:rgba(7,21,37,0.6);backdrop-filter:blur(10px)}
.dl-row{display:flex;align-items:center;gap:12px;padding:13px 18px;cursor:pointer;transition:background .2s;border-bottom:1px solid rgba(100,160,200,0.08);position:relative;user-select:none}
.dl-row:last-of-type{border-bottom:none}
.dl-row:hover{background:rgba(14,165,233,0.07)}
.dl-row.dl-active{background:rgba(14,165,233,0.1);border-bottom-color:rgba(14,165,233,0.18)}
.dl-row-icon{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.dl-row-icon svg{width:20px;height:20px}
.dl-row-name{flex:1;font-size:15px;font-weight:700;color:var(--white);line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-row-type{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.dl-row-edit{background:none;border:none;cursor:pointer;color:#64a0c8;padding:5px;border-radius:8px;transition:all .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:0.7}
.dl-row-edit:hover{background:rgba(245,158,11,0.12);color:#f59e0b;opacity:1}
.dl-row-edit svg{width:15px;height:15px}
.dl-row-chevron{color:#64a0c8;flex-shrink:0;transition:transform .3s;display:flex;align-items:center}
.dl-row-chevron svg{width:16px;height:16px}
.dl-row.dl-active .dl-row-chevron{transform:rotate(90deg)}
.dl-panel{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:0;border-bottom:1px solid rgba(100,160,200,0.08);background:rgba(4,13,26,0.88)}
.dl-panel.dl-panel-open{max-height:640px;opacity:1}
.dl-panel-inner{padding:20px 22px 24px;display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.dl-panel-preview{border-radius:12px;overflow:hidden;background:rgba(7,21,37,0.9);border:1px solid rgba(100,160,200,0.12);display:flex;align-items:center;justify-content:center;min-height:160px;width:200px;flex-shrink:0}
@media(max-width:640px){.dl-panel-preview{width:100%}}
.dl-panel-preview canvas{max-width:100%;height:auto;max-height:220px;border-radius:8px;display:block;background:#fff}
.dl-panel-info{flex:1;min-width:200px;display:flex;flex-direction:column;gap:12px}
.dl-panel-title{font-size:16px;font-weight:900;color:var(--white);line-height:1.5}
.dl-panel-chips{display:flex;flex-wrap:wrap;gap:8px}
.dl-rename-form{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.dl-rename-input{flex:1;min-width:0;background:rgba(14,165,233,0.07);border:1px solid rgba(14,165,233,0.35);border-radius:8px;color:var(--white);font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;padding:5px 12px;outline:none}
.dl-rename-input:focus{border-color:var(--blue);background:rgba(14,165,233,0.12)}
.dl-rename-ok{background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.4);border-radius:8px;color:#4ade80;padding:5px 12px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700}
.dl-rename-cancel{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:8px;color:#f87171;padding:5px 10px;cursor:pointer;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700}
.dl-icon-wrap{
  width:62px;height:62px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.dl-icon-wrap.pdf{background:linear-gradient(135deg,rgba(220,38,38,0.18),rgba(185,28,28,0.08));border:1px solid rgba(220,38,38,0.35)}
.dl-icon-wrap.video{background:linear-gradient(135deg,rgba(14,165,233,0.2),rgba(2,132,199,0.08));border:1px solid rgba(14,165,233,0.35)}
.dl-icon-wrap.img{background:linear-gradient(135deg,rgba(34,197,94,0.2),rgba(22,163,74,0.08));border:1px solid rgba(34,197,94,0.35)}
.dl-icon-wrap.html{background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(147,51,234,0.08));border:1px solid rgba(168,85,247,0.35)}
.dl-icon-wrap.doc{background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(37,99,235,0.08));border:1px solid rgba(59,130,246,0.35)}
.dl-icon-wrap.sheet{background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(5,150,105,0.08));border:1px solid rgba(16,185,129,0.35)}
.dl-icon-wrap.ppt{background:linear-gradient(135deg,rgba(249,115,22,0.2),rgba(234,88,12,0.08));border:1px solid rgba(249,115,22,0.35)}
.dl-icon-wrap.audio{background:linear-gradient(135deg,rgba(236,72,153,0.2),rgba(219,39,119,0.08));border:1px solid rgba(236,72,153,0.35)}
.dl-icon-wrap.archive{background:linear-gradient(135deg,rgba(245,158,11,0.2),rgba(217,119,6,0.08));border:1px solid rgba(245,158,11,0.35)}
.dl-icon-wrap.file{background:linear-gradient(135deg,rgba(148,163,184,0.18),rgba(100,116,139,0.08));border:1px solid rgba(148,163,184,0.35)}
.dl-icon-wrap svg{width:34px;height:34px}
.dl-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;
  background:rgba(100,160,200,0.08);border:1px solid rgba(100,160,200,0.18);
  color:#94a3b8;white-space:nowrap;
}
.dl-chip.type-pdf{background:rgba(220,38,38,0.1);border-color:rgba(220,38,38,0.25);color:#fca5a5}
.dl-chip.type-video{background:rgba(14,165,233,0.1);border-color:rgba(14,165,233,0.25);color:#7dd3fc}
.dl-chip.type-img{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.25);color:#86efac}
.dl-chip.type-html{background:rgba(168,85,247,0.1);border-color:rgba(168,85,247,0.25);color:#c4b5fd}
.dl-chip.downloads{background:rgba(14,165,233,0.08);border-color:rgba(14,165,233,0.2);color:var(--blue2)}
.dl-btn{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:14px 18px;border-radius:14px;
  background:linear-gradient(135deg,#0ea5e9 0%,#0284c7 55%,#0369a1 100%);
  border:1px solid rgba(14,165,233,0.55);
  color:#fff;
  font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);width:100%;
  position:relative;overflow:hidden;
  box-shadow:0 4px 14px rgba(14,165,233,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  letter-spacing:0.2px;
}
.dl-btn::before{
  content:"";position:absolute;top:0;left:-75%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);
  transform:skewX(-20deg);transition:left .55s cubic-bezier(.4,0,.2,1);
}
.dl-btn:hover{
  background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 55%,#0284c7 100%);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(14,165,233,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.dl-btn:hover::before{left:125%}
.dl-btn:active{transform:translateY(0);box-shadow:0 4px 14px rgba(14,165,233,0.25)}
.dl-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;background:rgba(100,116,139,0.25);border-color:rgba(100,116,139,0.35);color:#94a3b8}
.dl-btn svg{width:22px;height:22px;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(0,0,0,0.2))}

/* ═══ منطقة معاينة الصفحة الأولى للملف ═══ */
.dl-preview{
  position:relative;
  width:100%;height:220px;
  border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,rgba(14,28,54,0.6),rgba(8,18,38,0.9));
  border:1px solid rgba(100,160,200,0.12);
  display:flex;align-items:center;justify-content:center;
  margin-top:4px;
}
.dl-preview canvas{
  width:auto;max-width:100%;
  height:100%;max-height:220px;
  display:block;border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
  background:#fff;
  image-rendering:-webkit-optimize-contrast; /* تحسين حدّة المعاينة في Safari/Chrome */
}
.dl-preview-loading,
.dl-preview-empty{
  color:#64748b;font-size:12px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.dl-preview-empty svg{width:48px;height:48px;opacity:0.5}
.dl-preview-loading::before{
  content:"";width:28px;height:28px;border-radius:50%;
  border:2.5px solid rgba(100,160,200,0.2);
  border-top-color:#38bdf8;animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.upload-area{
  border:2px dashed var(--border);border-radius:16px;padding:40px;
  text-align:center;margin-bottom:30px;cursor:pointer;transition:.3s;
  background:rgba(14,165,233,0.03);
}
.upload-area:hover{border-color:var(--blue);background:rgba(14,165,233,0.08)}
.upload-area input{display:none}
/* ═══ إضافة: حالة "يجري سحب ملف فوق المنطقة" ═══ */
.upload-area.dragover{
  border-color:#22c55e;background:rgba(34,197,94,0.12);
  transform:scale(1.01);box-shadow:0 0 0 3px rgba(34,197,94,0.15);
}
.upload-area.dragover *{pointer-events:none}

/* ---- STUDENT PROFILE PAGE ---- */
.student-page{padding:90px 5% 80px;max-width:1100px;margin:0 auto}
.student-header{
  display:flex;align-items:center;gap:28px;
  background:var(--card);border:1px solid var(--border);
  border-radius:24px;padding:32px;margin-bottom:32px;
  backdrop-filter:blur(10px);flex-wrap:wrap;
}
.student-avatar-wrap{position:relative;flex-shrink:0}
.student-avatar{
  width:100px;height:100px;border-radius:50%;object-fit:cover;
  border:3px solid var(--blue);background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;font-size:40px;overflow:hidden;
}
.student-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-edit-btn{
  position:absolute;bottom:2px;left:2px;
  width:28px;height:28px;border-radius:50%;border:2px solid var(--bg2);
  background:var(--blue);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.student-info{flex:1}
.student-info h2{font-size:24px;font-weight:900;margin-bottom:4px}
.student-info .course-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.3);
  color:var(--blue2);padding:4px 14px;border-radius:20px;
  font-size:13px;font-weight:600;margin-bottom:10px;
}
.student-info .join-date{color:var(--gray);font-size:13px}
.student-logout-btn{
  background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);
  color:#f87171;padding:10px 20px;border-radius:12px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;transition:.2s;
}
.student-logout-btn:hover{background:rgba(239,68,68,0.22)}
.student-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;
  background:rgba(14,165,233,0.06);border-radius:16px;padding:6px;
}
.stab{
  flex:1;min-width:120px;padding:11px 8px;border-radius:10px;border:none;
  background:none;font-family:'Cairo',sans-serif;font-size:14px;font-weight:700;
  color:var(--gray);cursor:pointer;transition:.2s;text-align:center;
}
.stab.active{background:var(--blue);color:#fff;box-shadow:0 4px 15px rgba(14,165,233,0.3)}
.student-tab-content{display:none}
.student-tab-content.active{display:block}
.student-course-card{
  display:flex;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:24px;margin-bottom:16px;
  backdrop-filter:blur(10px);transition:.3s;
}
.student-course-card:hover{border-color:var(--blue);transform:translateX(-4px)}
.scc-icon{
  width:60px;height:60px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;font-size:26px;
}
.scc-info{flex:1}
.scc-title{font-size:17px;font-weight:700;margin-bottom:4px}
.scc-meta{font-size:13px;color:var(--gray)}
.scc-badge{
  background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.3);
  color:#4ade80;padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;
}
.empty-state{
  text-align:center;padding:50px 20px;
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;color:var(--gray);
}
.empty-state .eicon{font-size:48px;margin-bottom:14px}
.empty-state h4{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--white)}
.student-settings-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:30px;backdrop-filter:blur(10px);margin-bottom:24px;
}
.student-settings-box h3{font-size:17px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px}

/* ---- DASHBOARD ---- */
.dashboard{display:flex;min-height:100vh;padding-top:70px}
.sidebar{
  width:260px;background:var(--bg2);border-left:1px solid var(--border);
  padding:30px 0;position:fixed;top:70px;right:0;bottom:0;
  overflow-y:auto;transition:transform .3s ease;z-index:100;
}
.sidebar-menu{list-style:none}
.sidebar-menu li{}
.sidebar-menu a{
  display:flex;align-items:center;gap:12px;
  padding:13px 24px;color:var(--gray);text-decoration:none;
  font-size:14px;font-weight:600;transition:.2s;cursor:pointer;
}
.sidebar-menu a:hover,.sidebar-menu a.active{
  color:var(--blue2);background:rgba(14,165,233,0.08);
  border-right:3px solid var(--blue);
}
.sidebar-menu a span.ico{font-size:18px;width:22px;text-align:center}
.sidebar-section{
  font-size:11px;color:var(--gray);font-weight:700;letter-spacing:1.5px;
  padding:18px 24px 6px;opacity:.6;
}
.dash-content{
  margin-right:260px;flex:1;padding:40px 5%;
  transition:margin-right .3s ease;
}
.dash-sidebar-toggle{
  position:fixed;top:84px;right:260px;z-index:300;
  width:22px;height:52px;
  background:var(--bg2);border:1px solid var(--border);border-right:none;
  border-radius:8px 0 0 8px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--blue2);font-size:20px;font-weight:900;
  padding:0;line-height:1;
  transition:right .3s ease, border-radius .3s ease, background .2s;
}
.dash-sidebar-toggle:hover{background:rgba(14,165,233,0.15);color:var(--blue);}
.dashboard.sb-collapsed .sidebar{transform:translateX(100%);}
.dashboard.sb-collapsed .dash-content{margin-right:0;}
.dashboard.sb-collapsed .dash-sidebar-toggle{
  right:0;border-radius:0 8px 8px 0;
  border-right:1px solid var(--border);border-left:none;
}
.dash-topbar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:32px;
}
.dash-title{font-size:24px;font-weight:900}
.dash-user{display:flex;align-items:center;gap:10px}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin-bottom:32px}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:22px;backdrop-filter:blur(10px);
}
.stat-card .label{font-size:12px;color:var(--gray);font-weight:600;margin-bottom:8px}
.stat-card .value{font-size:28px;font-weight:900;color:var(--blue2)}
.stat-card .icon{font-size:22px;margin-bottom:12px}
.dash-section{margin-bottom:40px}
.dash-section h3{font-size:18px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.table-wrap{
  background:var(--card);border:1px solid var(--border);
  border-radius:16px;overflow:hidden;backdrop-filter:blur(10px);
}
table{width:100%;border-collapse:collapse}
th{
  background:rgba(14,165,233,0.08);padding:14px 18px;
  font-size:12px;font-weight:700;color:var(--gray);text-align:right;
}
td{padding:14px 18px;font-size:14px;border-top:1px solid var(--border)}
tr:hover td{background:rgba(14,165,233,0.04)}
.badge{
  padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700;
}
.badge.active{background:rgba(34,197,94,0.15);color:#4ade80}
.badge.pending{background:rgba(245,158,11,0.15);color:var(--gold2)}
.badge.expired{background:rgba(239,68,68,0.15);color:#f87171}

/* Code Generator */
.code-gen-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:20px;padding:32px;backdrop-filter:blur(10px);
}
.code-gen-box h3{font-size:18px;font-weight:700;margin-bottom:20px}
.code-form{display:grid;gap:14px}
.code-form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gen-result{
  margin-top:20px;padding:20px;border-radius:12px;
  background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3);
  display:none;
}
.gen-result.show{display:block}
.codes-list{list-style:none;display:grid;gap:8px;margin-top:12px}
.code-item{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,0.3);border-radius:8px;padding:10px 14px;
  font-family:monospace;font-size:14px;letter-spacing:2px;
}
.copy-btn{
  background:none;border:1px solid var(--border);color:var(--gray);
  padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px;
  transition:.2s;font-family:'Cairo',sans-serif;
}
.copy-btn:hover{border-color:var(--blue);color:var(--blue2)}

/* ---- SEARCH ---- */
.search-page{padding:110px 5% 80px}
.search-bar-big{
  max-width:700px;margin:0 auto 40px;
  display:flex;gap:0;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:50px;
  overflow:hidden;backdrop-filter:blur(10px);
}
.search-bar-big input{
  flex:1;background:none;border:none;outline:none;
  padding:16px 24px;color:var(--white);font-family:'Cairo',sans-serif;font-size:16px;
}
.search-bar-big button{
  background:var(--blue);border:none;color:#fff;padding:14px 28px;
  font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;cursor:pointer;
  border-radius:0 50px 50px 0;transition:.2s;
}
.search-bar-big button:hover{background:var(--blue2)}
.search-results{max-width:800px;margin:0 auto}
.result-item{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:20px;margin-bottom:14px;cursor:pointer;transition:.2s;
  backdrop-filter:blur(10px);
}
.result-item:hover{border-color:var(--blue);transform:translateX(-3px)}
.result-item h4{font-size:16px;font-weight:700;margin-bottom:6px}
.result-item p{color:var(--gray);font-size:13px}
.result-type{
  font-size:11px;font-weight:700;color:var(--blue2);margin-bottom:6px;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orbit{from{transform:rotate(0) translateX(28px) rotate(0)}to{transform:rotate(360deg) translateX(28px) rotate(-360deg)}}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---- FOOTER ---- */
footer{
  background:var(--bg2);border-top:1px solid var(--border);
  padding:50px 5% 30px;text-align:center;position:relative;z-index:1;
}
footer .footer-logo{font-size:22px;font-weight:900;color:var(--blue2);margin-bottom:12px}
footer p{color:var(--gray);font-size:13px;margin-bottom:20px}
footer .footer-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
footer .footer-links a{color:var(--gray);text-decoration:none;font-size:13px;transition:.2s;cursor:pointer;-webkit-tap-highlight-color:transparent}
/* iPad touch fix */
a[onclick],button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sidebar-menu a{-webkit-tap-highlight-color:transparent}
footer .footer-links a:hover{color:var(--blue2)}
footer .copyright{font-size:12px;color:rgba(100,160,200,0.5)}

/* ---- PURCHASE PAGE ---- */
.purchase-page{padding:110px 5% 80px;min-height:100vh}
.purchase-hero{text-align:center;margin-bottom:50px}
.purchase-hero h1{font-size:clamp(28px,4vw,44px);font-weight:900;margin-bottom:12px}
.purchase-hero h1 span{color:var(--gold2)}
.purchase-hero p{color:var(--gray);font-size:16px;max-width:600px;margin:0 auto}
.purchase-container{max-width:560px;margin:0 auto}
.purchase-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:24px;padding:40px;backdrop-filter:blur(10px);
  position:relative;overflow:hidden;
}
.purchase-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--blue));
}
.purchase-step{
  display:flex;align-items:center;gap:14px;
  background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);
  border-radius:14px;padding:16px 20px;margin-bottom:28px;
}
.purchase-step .step-icon{font-size:28px;flex-shrink:0}
.purchase-step .step-text{font-size:13px;color:var(--gray);line-height:1.7}
.purchase-step .step-text strong{color:var(--gold2);display:block;font-size:14px;margin-bottom:2px}
.code-input-wrap{position:relative}
.code-input-wrap input{
  width:100%;padding:16px 20px;border-radius:14px;
  background:rgba(14,165,233,0.06);border:2px solid var(--border);
  color:var(--white);font-family:monospace;font-size:20px;
  letter-spacing:3px;text-align:center;outline:none;transition:.2s;
  text-transform:uppercase;
}
.code-input-wrap input:focus{border-color:var(--gold);background:rgba(245,158,11,0.06)}
.code-input-wrap input::placeholder{font-family:'Cairo',sans-serif;font-size:14px;letter-spacing:0;color:var(--gray)}
.code-validate-btn{
  width:100%;padding:15px;border-radius:14px;border:none;margin-top:14px;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:#000;font-family:'Cairo',sans-serif;font-size:16px;font-weight:900;
  cursor:pointer;transition:all .25s;
}
.code-validate-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(245,158,11,0.35)}
.code-validate-btn:active{transform:translateY(0)}
.code-result{
  margin-top:18px;padding:16px 20px;border-radius:12px;
  font-size:14px;font-weight:700;display:none;text-align:center;line-height:1.7;
}
.code-result.success{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.35);color:#4ade80}
.code-result.error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#f87171}
.purchase-student-form{display:none;margin-top:24px}
.purchase-course-badge{
  display:flex;align-items:center;gap:12px;
  background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.3);
  border-radius:12px;padding:14px 18px;margin-bottom:24px;
}
.purchase-course-badge .badge-icon{font-size:26px}
.purchase-course-badge .badge-info{font-size:13px;color:var(--gray)}
.purchase-course-badge .badge-info strong{color:#4ade80;font-size:15px;display:block}
.how-to-buy{
  background:rgba(14,165,233,0.06);border:1px solid var(--border);
  border-radius:20px;padding:28px;margin-top:30px;
}
.how-to-buy h3{font-size:16px;font-weight:700;margin-bottom:18px;color:var(--blue2)}
.how-steps{display:grid;gap:14px}
.how-step{display:flex;align-items:flex-start;gap:14px}
.how-step .num{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#fff;
}
.how-step .txt{font-size:13px;color:var(--gray);padding-top:4px;line-height:1.7}

/* ===== RESPONSIVE — MOBILE ===== */
@media(max-width:900px){
  .nav-center{display:none}
  .nav-hamburger{display:flex !important}
  .nav-search input{width:100px}
}

@media(max-width:768px){
  /* NAV — على الهاتف: فقط الشعار + زر تسجيل الدخول + الهامبرغر */
  nav{padding:0 12px;height:58px}
  .nav-center-search{display:none !important}
  .nav-btn.gold-btn{display:none !important}
  .nav-link{display:none !important}
  .nav-socials-left{display:none !important}
  .nav-sep{display:none !important}
  #navStudentBtn{display:none !important}
  /* تصغير زر تسجيل الدخول */
  #navLoginBtn{padding:7px 12px !important;font-size:12px !important;border-radius:20px !important}
  /* تصغير الشعار */
  .logo-atom{width:32px;height:32px}
  .logo-text span:first-child{font-size:14px}
  .logo-text span:last-child{display:none}
  .nav-hamburger{display:flex !important}

  /* HERO */
  .hero{padding:75px 16px 45px}
  .hero h1{font-size:clamp(22px,6vw,30px);line-height:1.4}
  .hero p{font-size:13px;line-height:1.85;max-width:100%;padding:0 4px}
  .hero-badge{font-size:11px;padding:4px 12px}
  .hero-btns{flex-direction:column;align-items:center;gap:10px}
  .btn-main{width:100%;max-width:280px;padding:12px 20px;font-size:14px}
  .hero-stats{gap:18px;margin-top:28px}
  .stat-num{font-size:19px}
  .stat-lbl{font-size:11px}

  /* SECTIONS */
  .main-cards-section{padding:40px 0}
  .main-cards-section .section-title{padding:0 16px}
  .services-slider-track{padding:16px 16px 24px;gap:16px}
  .main-card{flex:0 0 270px;min-height:340px}
  .main-card-inner{padding:28px 20px 24px}
  .card-icon{width:72px;height:72px;border-radius:20px}
  .section-title h2{font-size:19px}

  /* COURSES */
  .courses-header{padding:76px 16px 30px}
  .courses-grid{padding:20px 16px 50px;grid-template-columns:1fr}

  /* FORMS / MODALS */
  .modal{padding:22px 16px;border-radius:16px}

  /* STUDENT PAGE */
  .student-page{padding:68px 16px 50px}
  .student-header{padding:18px;gap:14px;flex-direction:column;align-items:flex-start}
  .student-avatar{width:68px;height:68px;font-size:26px}
  .student-info h2{font-size:17px}
  .student-tabs{gap:4px}
  .stab{min-width:75px;font-size:12px;padding:8px 4px}

  /* PURCHASE */
  .purchase-section{padding:76px 16px 50px}

  /* FOOTER */
  .pro-footer{padding:36px 16px 0}
  .pro-footer-grid{grid-template-columns:1fr;gap:24px}

  /* DASHBOARD */
  .sidebar{width:100%;position:static;border:none;border-bottom:1px solid var(--border)}
  .dash-content{margin-right:0;padding:20px 14px}
  .dashboard{flex-direction:column}
  .code-form .row{grid-template-columns:1fr}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  th,td{padding:9px 8px;font-size:12px}

  /* FIX OVERFLOW */
  body,html{overflow-x:hidden;max-width:100%}
  .page{overflow-x:hidden}
}

/* ---- LESSON PAGE CONTENT (rich text) ---- */
.lesson-page-content{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:32px;font-size:15px;color:var(--white);line-height:2;
  max-height:65vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(14,165,233,0.3) transparent;
}
.lesson-page-content::-webkit-scrollbar{width:5px}
.lesson-page-content::-webkit-scrollbar-thumb{background:rgba(14,165,233,0.3);border-radius:4px}
.lesson-page-content h1,.lesson-page-content h2,.lesson-page-content h3{color:var(--blue2);margin:20px 0 10px;font-weight:800}
.lesson-page-content p{margin-bottom:14px}
.lesson-page-content ul,.lesson-page-content ol{margin:10px 0 14px 0;padding-right:22px}
.lesson-page-content li{margin-bottom:8px}
.lesson-page-content strong{color:var(--white);font-weight:700}
.lesson-page-content em{color:var(--gold2)}
.lesson-page-content blockquote{border-right:4px solid var(--blue);padding:12px 18px;background:rgba(14,165,233,0.06);border-radius:0 10px 10px 0;color:var(--gray);font-style:italic;margin:16px 0}
/* ═══ إصلاح: احترام أبعاد الصورة التي يحدّدها المستخدم في المحرر (inline width)
   كان الكود يفرض max-height + width:auto + height:auto + object-fit:contain
   فيتجاهل style="width:Xpx" الذي يضعه نظام تغيير الحجم ويعرض كل الصور بحجم
   ثابت لا يخضع لتحكم المستخدم. الآن: نحافظ على max-width:100% فقط لمنع
   تجاوز حدود الإطار، ونترك الارتفاع تلقائياً ليتبع نسبة العرض. */
.lesson-page-content img{
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 12px auto;
  display: block;
}
/* نفس القاعدة للصور داخل كتل الدرس (نص منسّق ضمن blocks v2) */
.lb-block img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 10px auto;
  display: block;
}
.lesson-page-content a{color:var(--blue2);text-decoration:underline}

/* Quill editor inside lesson modal */
#alPageQuillEditor .ql-toolbar{background:rgba(14,165,233,0.08)!important;border-color:var(--border)!important;border-radius:10px 10px 0 0!important}
#alPageQuillEditor .ql-container{background:rgba(14,165,233,0.03)!important;border-color:var(--border)!important;border-radius:0 0 10px 10px!important;min-height:220px}
#alPageQuillEditor .ql-editor{color:var(--white)!important;font-family:'Cairo',sans-serif!important;font-size:14px!important;line-height:1.85!important;min-height:220px!important}
#alPageQuillEditor .ql-editor.ql-blank::before{color:var(--gray)!important;font-style:normal!important;font-family:'Cairo',sans-serif!important}
#alPageQuillEditor .ql-toolbar .ql-stroke{stroke:var(--gray)!important}
#alPageQuillEditor .ql-toolbar .ql-fill{fill:var(--gray)!important}
#alPageQuillEditor .ql-toolbar button:hover .ql-stroke,
#alPageQuillEditor .ql-toolbar button.ql-active .ql-stroke{stroke:var(--blue2)!important}
#alPageQuillEditor .ql-toolbar button:hover .ql-fill,
#alPageQuillEditor .ql-toolbar button.ql-active .ql-fill{fill:var(--blue2)!important}
#alPageQuillEditor .ql-toolbar .ql-picker-label{color:var(--gray)!important}
#alPageQuillEditor .ql-picker-options{background:var(--bg2)!important;border-color:var(--border)!important;z-index:99999!important}
#alPageQuillEditor .ql-picker-item{color:var(--gray)!important}
/* Prevent Quill tooltip from bleeding outside hidden parent */
/* ─── Quill Tooltip (link input) fix for dark theme ─── */
.ql-snow .ql-tooltip{background:#0d2137!important;border:1px solid rgba(14,165,233,0.35)!important;border-radius:10px!important;box-shadow:0 8px 32px rgba(0,0,0,0.5)!important;color:var(--white)!important;padding:10px 16px!important;z-index:99999!important}
.ql-snow .ql-tooltip input[type=text]{background:rgba(14,165,233,0.08)!important;border:1px solid rgba(14,165,233,0.3)!important;border-radius:6px!important;color:#e8f4fd!important;font-family:Cairo,sans-serif!important;font-size:13px!important;padding:6px 10px!important;outline:none!important;min-width:200px}
.ql-snow .ql-tooltip input[type=text]::placeholder{color:#64a0c8!important}
.ql-snow .ql-tooltip a.ql-action,.ql-snow .ql-tooltip a.ql-remove{color:var(--blue2)!important;font-family:Cairo,sans-serif!important;font-size:13px!important;margin-right:8px!important}
.ql-snow .ql-tooltip a.ql-action::after{content:"حفظ"!important}
.ql-snow .ql-tooltip a.ql-remove::before{content:"إزالة"!important}
.ql-snow .ql-tooltip::before{color:var(--gray)!important;font-family:Cairo,sans-serif!important}
/* Quill editor — محرر المقالات */
#articleQuillEditor .ql-toolbar{background:rgba(14,165,233,0.08)!important;border-color:var(--border)!important;border-radius:10px 10px 0 0!important}
#articleQuillEditor .ql-container{background:rgba(14,165,233,0.03)!important;border-color:var(--border)!important;border-radius:0 0 10px 10px!important;min-height:300px}
#articleQuillEditor .ql-editor{color:var(--white)!important;font-family:'Cairo',sans-serif!important;font-size:14px!important;line-height:1.85!important;min-height:300px!important}
#articleQuillEditor .ql-toolbar .ql-stroke{stroke:var(--gray)!important}
#articleQuillEditor .ql-toolbar .ql-fill{fill:var(--gray)!important}
#articleQuillEditor .ql-toolbar button:hover .ql-stroke,
#articleQuillEditor .ql-toolbar button.ql-active .ql-stroke{stroke:var(--blue2)!important}
#articleQuillEditor .ql-toolbar button:hover .ql-fill,
#articleQuillEditor .ql-toolbar button.ql-active .ql-fill{fill:var(--blue2)!important}
#articleQuillEditor .ql-toolbar .ql-picker-label{color:var(--gray)!important}
#articleQuillEditor .ql-toolbar .ql-picker-label .ql-stroke{stroke:var(--gray)!important}
#articleQuillEditor .ql-picker-options{background:var(--bg2)!important;border-color:var(--border)!important;z-index:99999!important}
#articleQuillEditor .ql-picker-item{color:var(--gray)!important}
/* ─── Lesson Block Builder — viewer CSS ─── */
.lb-block{background:rgba(10,20,40,0.5);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:18px 20px;overflow:hidden;}
.lb-title{font-size:15px;font-weight:700;color:var(--white);margin-bottom:12px;font-family:'Cairo',sans-serif;}
.lb-vl-item:hover{border-color:rgba(14,165,233,0.4)!important;background:rgba(14,165,233,0.1)!important;}
.add-lesson-modal{overflow:visible!important}

/* ═══════════════════════════════════════════════════════════════ */
/* نظام الكتل المتعددة v2.0 — CSS */
/* ═══════════════════════════════════════════════════════════════ */
.blk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.blk-overlay.show {
  opacity: 1;
  visibility: visible;
}
.blk-modal {
  background: linear-gradient(145deg, #1a1f35 0%, #0d1321 100%);
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 20px;
  width: 95%;
  max-width: 820px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  position: relative;
  box-shadow: 0 25px 80px rgba(0,0,0,0.6);
}
.blk-modal::-webkit-scrollbar { width: 8px; }
.blk-modal::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.blk-modal::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.4); border-radius: 4px; }
.blk-close {
  position: absolute;
  top: 16px;
  left: 16px;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 22px;
  transition: color 0.2s;
}
.blk-close:hover { color: #f87171; }
.blk-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
}
.blk-subtitle {
  color: #a855f7;
  font-size: 13px;
  margin-bottom: 24px;
}
.blk-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.blk-form-group {
  margin-bottom: 16px;
}
.blk-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 8px;
}
.blk-form-group input,
.blk-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(14,165,233,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.blk-form-group input:focus,
.blk-form-group textarea:focus {
  border-color: rgba(168,85,247,0.5);
}
.blk-container-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}
.blk-container-label > span {
  font-size: 15px;
  font-weight: 800;
  color: #c084fc;
}
.blk-add-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.blk-add-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.blk-add-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.blk-add-btn.video { background: rgba(14,165,233,0.15); border: 1px solid rgba(14,165,233,0.4); color: #38bdf8; }
.blk-add-btn.videolist { background: rgba(14,165,233,0.1); border: 1px solid rgba(14,165,233,0.3); color: #38bdf8; }
.blk-add-btn.pdf { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35); color: #f87171; }
.blk-add-btn.html { background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.35); color: #4ade80; }
.blk-add-btn.text { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); color: #fbbf24; }
.blk-add-btn.divider { background: rgba(100,116,139,0.12); border: 1px solid rgba(100,116,139,0.35); color: #94a3b8; }
.blk-blocks-container {
  min-height: 80px;
  margin-bottom: 16px;
}
.blk-empty {
  text-align: center;
  padding: 30px;
  border: 2px dashed rgba(168,85,247,0.3);
  border-radius: 12px;
  color: #94a3b8;
}
.blk-block {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.blk-block-video { border-right: 3px solid #38bdf8; }
.blk-block-videolist { border-right: 3px solid #0ea5e9; }
.blk-block-pdf { border-right: 3px solid #f87171; }
.blk-block-html { border-right: 3px solid #4ade80; }
.blk-block-text { border-right: 3px solid #fbbf24; }
.blk-block-divider { border-right: 3px solid #64748b; }
.blk-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.blk-block-title {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
}
.blk-block-actions {
  display: flex;
  gap: 6px;
}
.blk-block-actions button {
  background: rgba(255,255,255,0.05);
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: background 0.2s;
}
.blk-block-actions button:hover { background: rgba(255,255,255,0.1); }
.blk-block-actions .blk-btn-delete:hover { background: rgba(239,68,68,0.3); }
.blk-block-body {
  padding: 14px;
}
.blk-field {
  margin-bottom: 12px;
}
.blk-field:last-child { margin-bottom: 0; }
.blk-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
}
.blk-field input,
.blk-field select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(14,165,233,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  outline: none;
}
.blk-field small {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}
.blk-file-options {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.blk-btn-upload {
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(168,85,247,0.15);
  border: 1px solid rgba(168,85,247,0.4);
  color: #c084fc;
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.blk-or {
  color: #64748b;
  font-size: 12px;
}
.blk-select-lib {
  flex: 1;
  min-width: 150px;
}
/* ═══ إصلاح: أسماء الملفات في قائمة المكتبة المنسدلة (الكتل المتعددة) ═══
   بدون هذه القاعدة المتصفح يرث لون النص الأبيض من .blk-field select
   لكن يستخدم خلفية النظام البيضاء للـ <option> => نص أبيض على أبيض = مخفي */
.blk-field select option,
.blk-select-lib option {
  background: #0f172a;
  color: #e8f4fd;
}
.blk-file-preview {
  margin-top: 8px;
}
.blk-uploading { color: #fbbf24; font-size: 13px; }
.blk-file-success { color: #4ade80; font-size: 13px; }
.blk-file-success a { color: #22d3ee; }
.blk-file-error { color: #f87171; font-size: 13px; }
.blk-videolist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.blk-videolist-item {
  display: grid;
  grid-template-columns: 1fr 2fr 36px;
  gap: 8px;
  align-items: center;
}
.blk-vlist-title,
.blk-vlist-url {
  padding: 8px 12px !important;
  font-size: 12px !important;
}
.blk-vlist-remove {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
  border-radius: 6px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 14px;
}
.blk-btn-add-video {
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(14,165,233,0.1);
  border: 1px solid rgba(14,165,233,0.3);
  color: #38bdf8;
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-start;
}
.blk-quill-editor {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  min-height: 150px;
}
.blk-quill-editor .ql-toolbar {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px 8px 0 0;
}
.blk-quill-editor .ql-container {
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px;
  min-height: 120px;
}
.blk-quill-editor .ql-editor {
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 14px;
  line-height: 1.8;
}
.blk-quill-editor .ql-editor.ql-blank::before {
  color: #64748b;
  font-style: normal;
}
/* ═══ Enhanced Physics Editor ═══ */
.phys-editor-wrap { position:relative; border-radius:12px; overflow:visible; }
.phys-editor-wrap .ql-toolbar {
  background:rgba(14,165,233,0.07) !important;
  border:1px solid rgba(14,165,233,0.2) !important;
  border-radius:10px 10px 0 0 !important;
  flex-wrap:wrap; padding:6px 8px !important;
}
.phys-editor-wrap .ql-container {
  background:rgba(4,13,26,0.6) !important;
  border:1px solid rgba(14,165,233,0.2) !important;
  border-top:none !important;
  border-radius:0 0 10px 10px !important;
  min-height:180px;
}
.phys-editor-wrap .ql-editor {
  color:#e8f4fd; font-family:'Cairo',sans-serif;
  font-size:14px; line-height:1.9; direction:rtl; min-height:160px;
}
.phys-editor-wrap .ql-editor.ql-blank::before { color:#3a6a8a; font-style:normal; }
.phys-editor-wrap .ql-toolbar .ql-stroke { stroke:rgba(232,244,253,0.7) !important; }
.phys-editor-wrap .ql-toolbar .ql-fill   { fill:rgba(232,244,253,0.7)   !important; }
.phys-editor-wrap .ql-toolbar button:hover .ql-stroke,
.phys-editor-wrap .ql-toolbar button.ql-active .ql-stroke { stroke:#38bdf8 !important; }
.phys-editor-wrap .ql-toolbar button:hover .ql-fill,
.phys-editor-wrap .ql-toolbar button.ql-active .ql-fill   { fill:#38bdf8 !important; }
.phys-editor-wrap .ql-toolbar .ql-picker-label { color:rgba(232,244,253,0.7) !important; }
.phys-editor-wrap .ql-toolbar .ql-picker-options { background:#071525; border:1px solid rgba(14,165,233,0.2); border-radius:8px; }
.phys-editor-wrap .ql-toolbar .ql-picker-item { color:#e8f4fd; }
.phys-editor-wrap .ql-editor img { max-width:100%; border-radius:8px; margin:6px 0; cursor:pointer; }
.ql-align-center { text-align:center !important; }
.ql-align-left   { text-align:left !important; }
.ql-align-right  { text-align:right !important; }
.ql-align-justify{ text-align:justify !important; }
.ql-align-center img,.ql-align-center iframe{ display:block; margin:0 auto; }
.ql-align-right  img,.ql-align-right  iframe{ display:block; margin-right:0; margin-left:auto; }
.ql-align-left   img,.ql-align-left   iframe{ display:block; margin-left:0;  margin-right:auto; }
.ql-math::before { content:'∑'; font-weight:900; font-size:15px; color:rgba(232,244,253,0.7); }
.ql-insertImage::before { content:'🖼'; font-size:13px; }
/* ═══ إصلاح: ترقيم/تنقيط قوائم Quill في RTL — كي لا تتداخل الأرقام مع النص ═══ */
.phys-editor-wrap .ql-editor,
.blk-quill-editor .ql-editor,
.q-rich-editor .ql-editor,
#alPageQuillEditor .ql-editor,
#elPageQuillEditor .ql-editor,
#articleQuillEditor .ql-editor { direction: rtl !important; text-align: right !important; }
.phys-editor-wrap .ql-editor ol,
.phys-editor-wrap .ql-editor ul,
.blk-quill-editor .ql-editor ol,
.blk-quill-editor .ql-editor ul,
.q-rich-editor .ql-editor ol,
.q-rich-editor .ql-editor ul,
#alPageQuillEditor .ql-editor ol,
#alPageQuillEditor .ql-editor ul,
#elPageQuillEditor .ql-editor ol,
#elPageQuillEditor .ql-editor ul,
#articleQuillEditor .ql-editor ol,
#articleQuillEditor .ql-editor ul {
  padding-left: 0 !important;
  padding-right: 1.5em !important;
}
.phys-editor-wrap .ql-editor li,
.blk-quill-editor .ql-editor li,
.q-rich-editor .ql-editor li,
#alPageQuillEditor .ql-editor li,
#elPageQuillEditor .ql-editor li,
#articleQuillEditor .ql-editor li {
  padding-left: 0 !important;
  padding-right: 1.5em !important;
}
.phys-editor-wrap .ql-editor li::before,
.blk-quill-editor .ql-editor li::before,
.q-rich-editor .ql-editor li::before,
#alPageQuillEditor .ql-editor li::before,
#elPageQuillEditor .ql-editor li::before,
#articleQuillEditor .ql-editor li::before {
  margin-left: 0.3em !important;
  margin-right: -1.5em !important;
  text-align: left !important;
}
/* نفس التصحيح يُطبَّق في عرض الطالب على محتوى الدروس */
.lesson-page-content[dir="rtl"] ol,
.lesson-page-content[dir="rtl"] ul,
.lesson-page-content ol,
.lesson-page-content ul {
  padding-left: 0;
  padding-right: 1.8em;
}
.lesson-page-content li::marker { unicode-bidi: plaintext; }
/* Math / Image popup overlay */
.phys-popup-overlay {
  position:fixed; inset:0; z-index:99999;
  background:rgba(4,13,26,0.85); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.phys-popup-box {
  background:#071525; border:1px solid rgba(14,165,233,0.3);
  border-radius:16px; padding:28px 32px; width:480px; max-width:95vw;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.phys-popup-box h3 { font-size:17px; font-weight:800; margin-bottom:16px; color:var(--white); }
.phys-popup-input {
  width:100%; padding:11px 14px; border-radius:9px;
  background:rgba(14,165,233,0.06); border:1px solid rgba(14,165,233,0.25);
  color:#e8f4fd; font-family:'Cairo',sans-serif; font-size:14px;
  outline:none; margin-bottom:8px;
}
.phys-popup-preview {
  min-height:44px; padding:10px 14px; border-radius:9px;
  background:rgba(168,85,247,0.07); border:1px solid rgba(168,85,247,0.2);
  margin-bottom:14px; font-size:16px; text-align:center; color:#e8f4fd;
  overflow-x:auto;
}
.phys-popup-actions { display:flex; gap:10px; }
.phys-popup-btn { flex:1; padding:11px; border-radius:10px; border:none; font-family:'Cairo',sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
.phys-popup-btn.primary { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; }
.phys-popup-btn.secondary { background:rgba(100,116,139,0.15); border:1px solid rgba(100,116,139,0.3); color:var(--gray); }
/* quiz question editor */
.quiz-q-editor .ql-toolbar { border-radius:7px 7px 0 0 !important; padding:4px 6px !important; }
.quiz-q-editor .ql-container { border-radius:0 0 7px 7px !important; min-height:70px; }
.quiz-q-editor .ql-editor { font-size:13px; min-height:60px; direction:rtl; color:#e8f4fd; font-family:'Cairo',sans-serif; }

.blk-divider-preview {
  text-align: center;
  padding: 10px;
}
  border: none;
  border-top: 2px solid rgba(255,255,255,0.1);
  margin: 0 0 8px 0;
}
.blk-divider-preview small {
  color: #64748b;
  font-size: 11px;
}
.blk-msg {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}
.blk-msg-error { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.blk-msg-success { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
.blk-msg-loading { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.blk-submit {
  width: 100%;
  padding: 14px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  border: none;
  color: #fff;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s ease;
}
.blk-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(168,85,247,0.4);
}
@media (max-width: 640px) {
  .blk-row { grid-template-columns: 1fr; }
  .blk-add-buttons { justify-content: center; }
  .blk-file-options { flex-direction: column; align-items: stretch; }
  .blk-videolist-item { grid-template-columns: 1fr; }
  .blk-vlist-remove { width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════ */

/* ---- FLIP BOOK PDF VIEWER ---- */
.flipbook-wrapper{
  width:100%;height:100%;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#0d1b2e,#0a1628);position:relative;
}
.flipbook-topbar{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(14,165,233,0.08);border-bottom:1px solid rgba(14,165,233,0.2);
  flex-shrink:0;flex-wrap:wrap;
}
.flipbook-title{font-size:13px;font-weight:700;color:var(--blue2);flex:1}
.flipbook-nav-btn{
  background:rgba(14,165,233,0.15);border:1px solid rgba(14,165,233,0.3);
  color:var(--white);padding:6px 14px;border-radius:8px;cursor:pointer;
  font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  transition:.2s;display:flex;align-items:center;gap:5px;
}
.flipbook-nav-btn:hover{background:rgba(14,165,233,0.3);border-color:var(--blue)}
.flipbook-nav-btn:disabled{opacity:.35;cursor:default}
.flipbook-page-info{font-size:13px;color:var(--gray);font-weight:600;white-space:nowrap}
.flipbook-stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:20px;perspective:1800px;overflow:hidden;position:relative;
}
.flipbook-book{
  position:relative;display:flex;
  box-shadow:0 30px 80px rgba(0,0,0,0.7);
  border-radius:4px 0 0 4px;
}
.flipbook-page-left,.flipbook-page-right{
  position:relative;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transform-style:preserve-3d;
}
.flipbook-page-left{
  border-radius:4px 0 0 4px;
  border-right:2px solid rgba(0,0,0,0.15);
  box-shadow:-5px 0 20px rgba(0,0,0,0.3);
}
.flipbook-page-right{
  border-radius:0 4px 4px 0;
  box-shadow:5px 0 20px rgba(0,0,0,0.3);
}
.flipbook-page-left canvas,
.flipbook-page-right canvas{
  width:100%;height:100%;object-fit:contain;display:block;
}
/* Flip animation */
@keyframes flipLeft{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(-180deg)}
}
@keyframes flipRight{
  0%{transform:rotateY(0deg)}
  100%{transform:rotateY(180deg)}
}
.page-flipping-out-left{
  animation:flipLeft .55s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:left center;
  backface-visibility:hidden;
}
.page-flipping-in-right{
  animation:flipRight .55s cubic-bezier(.4,0,.2,1) forwards;
  transform-origin:right center;
  backface-visibility:hidden;
}
.flipbook-no-pdf{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:14px;color:var(--gray);text-align:center;padding:30px;
}
.flipbook-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(7,21,37,0.95);z-index:5;flex-direction:column;gap:12px;
}
.flipbook-spinner{
  width:44px;height:44px;border:3px solid rgba(14,165,233,0.2);
  border-top-color:var(--blue);border-radius:50%;
  animation:spin 0.8s linear infinite;
}
.flipbook-open-btn{
  margin-right:auto;background:rgba(14,165,233,0.15);border:1px solid rgba(14,165,233,0.3);
  color:var(--blue2);padding:5px 14px;border-radius:20px;font-size:12px;font-weight:700;
  text-decoration:none;cursor:pointer;transition:.2s;font-family:'Cairo',sans-serif;
}
.flipbook-open-btn:hover{background:rgba(14,165,233,0.3)}

/* ---- SMALL NAV SOCIAL ICONS ---- */
.nav-socials-left{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-right:auto}
.nav-soc{
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#fff;text-decoration:none;transition:all .2s;flex-shrink:0;cursor:pointer;
}
.nav-soc svg{pointer-events:none;display:block}
.nav-soc-wa{background:linear-gradient(135deg,#25d366,#128c7e)}
.nav-soc-yt{background:linear-gradient(135deg,#ff0000,#cc0000)}
.nav-soc-fb{background:linear-gradient(135deg,#1877f2,#0d5cb8)}
/* ═══ إضافة: لون إنستغرام ═══ */
.nav-soc-ig{background:linear-gradient(135deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}
.nav-soc:hover{transform:translateY(-2px);opacity:.9}
.nav-sep{width:1px;height:22px;background:var(--border);flex-shrink:0}

/* ---- PROFESSIONAL FOOTER ---- */
.pro-footer{background:var(--bg2);border-top:1px solid var(--border);padding:55px 5% 0;position:relative;z-index:1}
.pro-footer-grid{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px;
  max-width:1200px;margin:0 auto;padding-bottom:48px;
}
@media(max-width:900px){.pro-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.pro-footer-grid{grid-template-columns:1fr}}
.pf-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pf-brand-name{font-size:20px;font-weight:900;color:var(--blue2)}
.pf-brand-sub{font-size:10px;color:var(--gold);font-weight:700;letter-spacing:2px}
.pf-brand-desc{color:var(--gray);font-size:13px;line-height:1.85;max-width:280px;margin-bottom:20px}
.pf-socials{display:flex;gap:9px}
.pf-soc{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--border);
  background:rgba(14,165,233,0.07);display:flex;align-items:center;justify-content:center;
  color:var(--gray);transition:.2s;text-decoration:none;
}
.pf-soc:hover{border-color:var(--blue);background:rgba(14,165,233,0.18);color:var(--blue2);transform:translateY(-2px)}
.pf-soc svg{pointer-events:none}
.pf-col h4{
  font-size:12px;font-weight:800;color:var(--white);letter-spacing:.8px;
  text-transform:uppercase;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.pf-col h4 span{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.pf-col a,.pf-col button{
  display:block;color:var(--gray);font-size:13px;font-weight:500;
  padding:5px 0;text-decoration:none;background:none;border:none;
  font-family:'Cairo',sans-serif;cursor:pointer;text-align:right;
  transition:.2s;width:100%;
}
.pf-col a:hover,.pf-col button:hover{color:var(--blue2);padding-right:7px}
.pf-contact-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid rgba(14,165,233,0.07)}
.pf-contact-row:last-of-type{border:none}
.pf-ci{width:34px;height:34px;border-radius:9px;flex-shrink:0;background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.2);display:flex;align-items:center;justify-content:center;font-size:16px}
.pf-ct{color:var(--gray);font-size:12px;line-height:1.6;flex:1}
.pf-ct strong{color:var(--white);display:block;font-size:13px;margin-bottom:2px}
.pf-wa-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;padding:11px;border-radius:11px;
  background:rgba(37,211,102,0.12);border:1px solid rgba(37,211,102,0.3);
  color:#4ade80;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;
  text-decoration:none;transition:.2s;
}
.pf-wa-btn:hover{background:rgba(37,211,102,0.22)}
.pf-wa-btn svg{pointer-events:none;flex-shrink:0}
.pro-footer-bottom{
  border-top:1px solid var(--border);padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;max-width:1200px;margin:0 auto;
}
.pfb-left{font-size:12px;color:rgba(100,160,200,0.5);display:flex;align-items:center;gap:7px}
.pfb-right{display:flex;gap:18px}
.pfb-right a{font-size:12px;color:rgba(100,160,200,0.5);text-decoration:none;cursor:pointer;transition:.2s}
.pfb-right a:hover{color:var(--blue2)}

/* ══════════════════════════════════════════════════════
   فيزو — مساعد الذكاء الاصطناعي العائم
══════════════════════════════════════════════════════ */
#aiFloatBtn{
  position:fixed;bottom:28px;left:28px;z-index:8500;
  display:none;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;
}
#aiFloatBtn.ai-visible{display:flex}
.ai-char-outer{
  position:relative;width:70px;height:70px;
}
.ai-char-circle{
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(145deg,#6d28d9,#0ea5e9);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 30px rgba(109,40,217,.55),0 0 0 3px rgba(109,40,217,.18);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
  position:relative;overflow:hidden;
}
#aiFloatBtn:hover .ai-char-circle{
  transform:scale(1.1) rotate(-4deg);
  box-shadow:0 10px 40px rgba(109,40,217,.7),0 0 0 4px rgba(14,165,233,.3);
}
.ai-ring{
  position:absolute;inset:-7px;border-radius:50%;
  border:2px solid rgba(109,40,217,.5);
  animation:aiRing 2.2s ease-in-out infinite;
  pointer-events:none;
}
.ai-ring2{
  position:absolute;inset:-14px;border-radius:50%;
  border:2px solid rgba(14,165,233,.25);
  animation:aiRing 2.2s ease-in-out infinite .6s;
  pointer-events:none;
}
@keyframes aiRing{
  0%,100%{opacity:.9;transform:scale(1)}
  60%{opacity:0;transform:scale(1.35)}
}
.ai-badge{
  font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,#7c3aed,#0ea5e9);
  padding:4px 13px;border-radius:30px;
  box-shadow:0 3px 14px rgba(109,40,217,.4);
  white-space:nowrap;letter-spacing:.3px;
  animation:aiBadgePop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes aiBadgePop{from{opacity:0;transform:translateY(6px) scale(.8)}to{opacity:1;transform:none}}
#aiFloatBtn .ai-notif{
  position:absolute;top:2px;right:2px;
  width:14px;height:14px;background:#ef4444;border-radius:50%;
  border:2px solid #040d1a;display:none;
}
#aiFloatBtn.ai-has-notif .ai-notif{display:block}

/* ── نافذة المحادثة ── */
#aiChatWin{
  position:fixed;bottom:115px;left:28px;
  width:360px;max-height:520px;
  z-index:8500;
  background:rgba(4,13,26,.97);
  backdrop-filter:blur(22px);
  border:1px solid rgba(109,40,217,.35);
  border-radius:22px;
  display:flex;flex-direction:column;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(109,40,217,.1);
  transform:translateY(18px) scale(.95);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1),opacity .22s;
  overflow:hidden;
}
#aiChatWin.ai-open{
  transform:translateY(0) scale(1);opacity:1;pointer-events:all;
}
.ai-win-header{
  display:flex;align-items:center;gap:11px;
  padding:14px 16px 12px;
  background:linear-gradient(135deg,rgba(109,40,217,.22),rgba(14,165,233,.12));
  border-bottom:1px solid rgba(109,40,217,.2);
  flex-shrink:0;
}
.ai-win-avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(145deg,#6d28d9,#0ea5e9);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 3px 12px rgba(109,40,217,.4);
}
.ai-win-info{flex:1;min-width:0}
.ai-win-name{font-size:14px;font-weight:800;color:#e8f4fd;font-family:'Cairo',sans-serif}
.ai-win-sub{font-size:11px;color:#7c3aed;font-family:'Cairo',sans-serif;font-weight:600}
.ai-win-ctx{
  font-size:10.5px;color:rgba(100,160,200,.7);font-family:'Cairo',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;
}
.ai-win-close{
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.07);border:none;
  color:rgba(232,244,253,.6);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:.18s;flex-shrink:0;
}
.ai-win-close:hover{background:rgba(239,68,68,.18);color:#f87171}

/* ── منطقة الرسائل ── */
#aiMessages{
  flex:1;overflow-y:auto;padding:14px 14px 6px;
  scrollbar-width:thin;scrollbar-color:rgba(109,40,217,.3) transparent;
  display:flex;flex-direction:column;gap:10px;
}
#aiMessages::-webkit-scrollbar{width:4px}
#aiMessages::-webkit-scrollbar-thumb{background:rgba(109,40,217,.3);border-radius:4px}
.ai-msg{display:flex;align-items:flex-end;gap:8px;animation:aiMsgIn .28s ease both}
@keyframes aiMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-msg.ai-user{flex-direction:row-reverse}
.ai-msg-bubble{
  max-width:80%;padding:10px 14px;border-radius:16px;
  font-family:'Cairo',sans-serif;font-size:13.5px;line-height:1.75;
  word-break:break-word;
}
.ai-msg.ai-bot .ai-msg-bubble{
  background:rgba(109,40,217,.15);border:1px solid rgba(109,40,217,.25);
  color:#e8f4fd;border-bottom-right-radius:4px;
}
.ai-msg.ai-user .ai-msg-bubble{
  background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(6,182,212,.14));
  border:1px solid rgba(14,165,233,.3);
  color:#e8f4fd;border-bottom-left-radius:4px;
}
.ai-msg-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.ai-bot .ai-msg-av{background:linear-gradient(145deg,#6d28d9,#0ea5e9)}
.ai-user .ai-msg-av{background:rgba(14,165,233,.2);font-size:12px}

/* مؤشر الكتابة */
.ai-typing{display:flex;align-items:center;gap:4px;padding:10px 14px}
.ai-typing span{
  width:7px;height:7px;border-radius:50%;background:#7c3aed;
  animation:aiDot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ── مدخل النص ── */
.ai-input-row{
  display:flex;align-items:flex-end;gap:8px;
  padding:10px 12px 13px;
  border-top:1px solid rgba(109,40,217,.18);
  flex-shrink:0;
}
#aiInput{
  flex:1;background:rgba(109,40,217,.09);
  border:1px solid rgba(109,40,217,.25);
  border-radius:14px;padding:10px 14px;
  color:#e8f4fd;font-family:'Cairo',sans-serif;font-size:13.5px;
  resize:none;outline:none;min-height:42px;max-height:110px;
  scrollbar-width:none;
  transition:border-color .2s;
  line-height:1.55;
}
#aiInput:focus{border-color:rgba(109,40,217,.6)}
#aiInput::placeholder{color:rgba(100,160,200,.45)}
#aiSendBtn{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(135deg,#7c3aed,#0ea5e9);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 14px rgba(109,40,217,.4);
  transition:transform .18s,opacity .18s;
}
#aiSendBtn:hover{transform:scale(1.08)}
#aiSendBtn:disabled{opacity:.4;cursor:default;transform:none}
#aiSendBtn svg{pointer-events:none}

/* رسالة الترحيب */
.ai-welcome{
  text-align:center;padding:18px 10px 6px;
  font-family:'Cairo',sans-serif;font-size:13px;color:rgba(100,160,200,.7);
  line-height:1.7;
}
.ai-welcome strong{color:#a78bfa;font-size:14px}

/* ── زر رفع الصورة ── */
#aiImgBtn{
  width:42px;height:42px;border-radius:13px;flex-shrink:0;
  background:rgba(109,40,217,.15);border:1px solid rgba(109,40,217,.3);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.18s;color:rgba(167,139,250,.9);
}
#aiImgBtn:hover{background:rgba(109,40,217,.3);border-color:rgba(109,40,217,.55)}
#aiImgBtn svg{pointer-events:none}

/* ── شريط معاينة الصورة المختارة ── */
#aiImgPreviewBar{
  display:none;padding:8px 12px;gap:8px;align-items:center;
  border-top:1px solid rgba(109,40,217,.15);
  background:rgba(109,40,217,.06);flex-shrink:0;
}
#aiImgPreviewBar.ai-has-img{display:flex}
.ai-img-thumb{
  width:52px;height:52px;object-fit:cover;
  border-radius:9px;border:1px solid rgba(109,40,217,.3);flex-shrink:0;
}
.ai-img-remove-btn{
  width:22px;height:22px;border-radius:50%;
  background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.3);
  color:#f87171;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:.15s;
}
.ai-img-remove-btn:hover{background:rgba(239,68,68,.4)}
.ai-img-preview-label{
  font-family:'Cairo',sans-serif;font-size:12px;
  color:rgba(167,139,250,.8);flex:1;
}

/* ── صورة داخل فقاعة الرسالة ── */
.ai-msg-img{
  max-width:190px;max-height:190px;border-radius:10px;
  display:block;margin-bottom:5px;cursor:zoom-in;
  border:1px solid rgba(109,40,217,.25);
  transition:.15s;
}
.ai-msg-img:hover{opacity:.9}

/* ── تبديل مصدر الإجابة ── */
.ai-src-toggle{
  display:flex;gap:5px;padding:7px 12px 0;flex-shrink:0;
}
.ai-src-btn{
  flex:1;padding:6px 4px;border-radius:9px;
  border:1px solid rgba(109,40,217,.2);background:transparent;
  font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:700;
  color:rgba(167,139,250,.45);cursor:pointer;transition:.18s;
  white-space:nowrap;
}
.ai-src-btn.active{
  background:rgba(109,40,217,.22);
  border-color:rgba(167,139,250,.45);
  color:#c4b5fd;
}
.ai-src-btn:hover:not(.active){color:rgba(167,139,250,.75);border-color:rgba(109,40,217,.38)}
/* صف الإيجاز / الإسهاب — لون مميّز */
.ai-detail-btn{
  flex:1;padding:6px 4px;border-radius:9px;
  border:1px solid rgba(14,165,233,.2);background:transparent;
  font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:700;
  color:rgba(56,189,248,.4);cursor:pointer;transition:.18s;
  white-space:nowrap;
}
.ai-detail-btn.active{
  background:rgba(14,165,233,.18);
  border-color:rgba(56,189,248,.45);
  color:#7dd3fc;
}
.ai-detail-btn:hover:not(.active){color:rgba(56,189,248,.75);border-color:rgba(14,165,233,.38)}
/* رسالة خارج ساعات العمل */
.ai-hours-banner{
  display:none;padding:10px 14px;
  background:rgba(245,158,11,.09);
  border-bottom:1px solid rgba(245,158,11,.2);
  font-family:'Cairo',sans-serif;font-size:12px;
  color:rgba(251,191,36,.85);text-align:center;line-height:1.6;
  flex-shrink:0;
}
.ai-hours-banner.visible{display:block}

/* موبايل */
@media(max-width:480px){
  #aiChatWin{width:calc(100vw - 24px);left:12px;bottom:105px}
  #aiFloatBtn{left:16px;bottom:20px}
}

/* ══════════════════════════════════════════
   Scientific Calculator (fx-991 style) — Enhanced
══════════════════════════════════════════ */
.nav-calc-btn{background:none;border:none;color:rgba(232,244,253,0.75);cursor:pointer;font-size:19px;padding:5px 7px;border-radius:9px;transition:.2s;display:flex;align-items:center;justify-content:center;line-height:1}
.nav-calc-btn:hover{background:rgba(14,165,233,0.12);color:var(--blue2)}
#sciCalcBox{
  display:none;position:fixed;top:70px;right:16px;z-index:9999;
  background:linear-gradient(160deg,#0d2040 0%,#060e1c 100%);
  border:1px solid rgba(14,165,233,0.28);border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,0.8),0 0 0 1px rgba(255,255,255,0.04),inset 0 1px 0 rgba(255,255,255,0.07);
  width:420px;max-width:97vw;
  font-family:'Tajawal',sans-serif;user-select:none;overflow:hidden;
}
#sciCalcBox.sci-open{display:block}
.sci-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;
  background:linear-gradient(90deg,rgba(14,165,233,0.09),rgba(6,182,212,0.05));
  border-bottom:1px solid rgba(14,165,233,0.12);
  cursor:grab;
}
.sci-hdr:active{cursor:grabbing}
.sci-hdr.dragging{cursor:grabbing}
.sci-model{font-size:13px;font-weight:900;color:rgba(56,189,248,0.85);letter-spacing:1px;font-family:'Tajawal',sans-serif}
.sci-hdr-r{display:flex;align-items:center;gap:7px}
.sci-hdr-close{background:none;border:none;color:rgba(148,180,210,0.5);cursor:pointer;font-size:18px;padding:0 3px;line-height:1;transition:.2s}
.sci-hdr-close:hover{color:#fca5a5}
/* Tabs */
.sci-tabs{display:flex;border-bottom:1px solid rgba(14,165,233,0.15)}
.sci-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:rgba(148,196,230,0.55);padding:7px 4px;font-family:'Tajawal',sans-serif;font-size:13px;cursor:pointer;transition:.2s}
.sci-tab:hover{color:#7dd3fc}
.sci-tab.sci-tab-on{color:#38bdf8;border-bottom-color:#0ea5e9;font-weight:700}
/* Display */
.sci-display{background:#020d18;padding:10px 14px 7px;border-bottom:1px solid rgba(14,165,233,0.08)}
.sci-d-expr{
  font-size:14px;color:rgba(148,196,230,0.7);
  text-align:right;direction:ltr;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-height:20px;margin-bottom:3px;letter-spacing:.3px;
}
.sci-d-result{
  font-size:32px;font-weight:700;color:#f0f9ff;
  text-align:right;direction:ltr;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.5px;min-height:40px;line-height:1.2;
}
.sci-d-frac{text-align:right;direction:ltr;min-height:22px;color:rgba(148,196,230,0.8);font-size:14px;padding-top:2px}
.sci-frac-wrap{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1}
.sci-frac-n,.sci-frac-d{padding:0 4px;line-height:1.3;font-size:13px}
.sci-frac-b{width:100%;height:1px;background:rgba(148,196,230,0.7);margin:1px 0}
/* Display mode buttons */
.sci-d-modes{display:flex;gap:4px;margin-top:5px}
.sci-dm-btn{background:rgba(14,165,233,0.06);border:1px solid rgba(14,165,233,0.2);border-radius:5px;color:rgba(148,196,230,0.6);font-family:'Cairo',sans-serif;font-size:10px;padding:2px 8px;cursor:pointer;transition:.15s}
.sci-dm-btn:hover{color:#7dd3fc;border-color:rgba(14,165,233,0.4)}
.sci-dm-btn.sci-dm-on{background:rgba(14,165,233,0.22);color:#38bdf8;border-color:rgba(14,165,233,0.55);font-weight:700}
.sci-ind{font-size:8.5px;font-weight:800;letter-spacing:.8px;opacity:0;transition:opacity .2s}
.sci-ind.on{opacity:1}
.sci-ind-deg{color:#4ade80;opacity:1}
.sci-ind-shift{color:#fbbf24}
.sci-ind-mem{color:#c084fc}
/* Button area */
.sci-btns{padding:8px;display:flex;flex-direction:column;gap:5px;direction:ltr}
.sci-row{display:flex;gap:5px}
/* Numpad grid (last 4 rows) — allows = to span 2 rows */
.sci-numpad{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,38px);gap:5px;padding:0 8px 8px;direction:ltr}
.sci-btn{
  flex:1;min-height:37px;
  background:rgba(14,165,233,0.05);border:1px solid rgba(14,165,233,0.13);
  border-radius:8px;color:#93c5e8;
  font-family:'Tajawal',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:background .1s,transform .08s,border-color .1s;
  line-height:1.2;padding:3px 2px;
}
.sci-btn:hover{background:rgba(14,165,233,0.15);color:#e0f2fe;border-color:rgba(14,165,233,0.3)}
.sci-btn:active{transform:scale(.9)}
.sci-sub{font-size:8px;color:#fb923c;opacity:.55;line-height:1;margin-bottom:1px;transition:opacity .2s}
.sci-shift-active .sci-sub{opacity:1;color:#fde68a}
.sci-btn.n{background:rgba(20,42,78,0.8);color:#ffffff;border-color:rgba(255,255,255,0.11);font-size:19px;font-weight:700}
.sci-btn.n:hover{background:rgba(30,58,100,0.9);border-color:rgba(255,255,255,0.22)}
.sci-btn.o{background:rgba(14,165,233,0.12);color:#38bdf8;border-color:rgba(14,165,233,0.35);font-size:19px;font-weight:800}
.sci-btn.o:hover{background:rgba(14,165,233,0.24);color:#7dd3fc;border-color:rgba(14,165,233,0.55)}
.sci-btn.eq{background:linear-gradient(145deg,#0ea5e9,#0284c7);color:#fff;border:none;font-size:20px;font-weight:900;box-shadow:0 4px 16px rgba(14,165,233,0.4);grid-row:span 2;min-height:unset}
.sci-btn.eq:hover{background:linear-gradient(145deg,#38bdf8,#0ea5e9);box-shadow:0 6px 22px rgba(14,165,233,0.55)}
.sci-btn.eq:active{transform:scale(.92);box-shadow:none}
.sci-btn.ac{background:rgba(239,68,68,0.1);color:#fca5a5;border-color:rgba(239,68,68,0.3);font-weight:700}
.sci-btn.ac:hover{background:rgba(239,68,68,0.22);color:#fecaca}
.sci-btn.del{background:rgba(251,146,60,0.09);color:#fb923c;border-color:rgba(251,146,60,0.28)}
.sci-btn.del:hover{background:rgba(251,146,60,0.2);color:#fed7aa}
.sci-btn.shift{background:rgba(251,191,36,0.09);color:#fbbf24;border-color:rgba(251,191,36,0.28);font-weight:800;font-size:12px}
.sci-btn.shift.sci-sh-on{background:rgba(251,191,36,0.28);color:#fef08a;border-color:rgba(251,191,36,0.65);box-shadow:0 0 12px rgba(251,191,36,0.25)}
.sci-btn.mem{color:#c084fc;border-color:rgba(192,132,252,0.22)}
.sci-btn.mem:hover{background:rgba(192,132,252,0.1);color:#d8b4fe}
.sci-btn.con{color:#4ade80;border-color:rgba(74,222,128,0.22)}
.sci-btn.con:hover{background:rgba(74,222,128,0.09);color:#86efac}
.sci-btn.ang{font-size:12px;font-weight:800;color:#4ade80;border-color:rgba(74,222,128,0.3)}
.sci-btn.ang:hover{background:rgba(74,222,128,0.1)}
.sci-btn.w2{flex:2}
/* Conv panel */
.sci-cat-strip{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-bottom:1px solid rgba(14,165,233,0.12)}
.sci-cat-btn{background:rgba(14,165,233,0.06);border:1px solid rgba(14,165,233,0.2);border-radius:6px;color:rgba(148,196,230,0.65);font-family:'Tajawal',sans-serif;font-size:12px;padding:4px 9px;cursor:pointer;transition:.15s}
.sci-cat-btn:hover{color:#7dd3fc}
.sci-cat-btn.sci-cat-on{background:rgba(14,165,233,0.22);color:#38bdf8;border-color:rgba(14,165,233,0.55);font-weight:700}
.sci-conv-body{padding:10px 12px}
.sci-sel{background:#020d18;border:1px solid rgba(14,165,233,0.28);border-radius:7px;color:#93c5e8;padding:6px 8px;font-family:'Tajawal',sans-serif;font-size:13px;cursor:pointer;width:100%;outline:none}
.sci-inp{background:#020d18;border:1px solid rgba(14,165,233,0.28);border-radius:7px;color:#e0f2fe;padding:7px 10px;font-family:'Tajawal',sans-serif;font-size:16px;width:100%;box-sizing:border-box;text-align:right;outline:none;user-select:text;-webkit-user-select:text}
.sci-conv-result{text-align:center;font-size:21px;font-weight:700;color:#38bdf8;padding:9px;background:rgba(14,165,233,0.07);border-radius:8px;min-height:42px;direction:ltr;margin-top:6px;word-break:break-all}
/* Laws panel */
.sci-laws-body{max-height:440px;overflow-y:auto;padding:4px 10px 10px}
.sci-law-cat{font-size:12px;font-weight:800;color:#38bdf8;letter-spacing:.5px;margin:12px 0 5px;border-bottom:1px solid rgba(14,165,233,0.25);padding-bottom:4px;font-family:'Tajawal',sans-serif}
.sci-law-item{margin-bottom:6px;background:rgba(14,165,233,0.04);border-radius:9px;padding:7px 10px;border:1px solid rgba(14,165,233,0.1);transition:background .15s}
.sci-law-item:hover{background:rgba(14,165,233,0.09)}
.sci-law-name{font-size:11px;color:rgba(148,196,230,0.6);margin-bottom:4px;font-family:'Tajawal',sans-serif}
.sci-law-formula{font-size:15px;font-weight:600;color:#e0f2fe;text-align:center;padding:4px 0;overflow-x:auto}
.sci-law-desc{font-size:10px;color:rgba(148,196,230,0.55);margin-top:3px;text-align:center;font-family:'Tajawal',sans-serif}