@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root{
  --edu-canvas:#f3f2ef;
  --edu-surface:#ffffff;
  --edu-web-navy:#0B1426;
  --edu-web-navy-hover:#152238;
  --edu-web-navy-soft:#1A2942;
  --brand:#0B1426;
  --brand-2:#152238;
  --brand-dark:#070D18;
  --brand-soft:rgba(11,20,38,.08);
  --ink:rgba(0,0,0,.9);
  --ink-secondary:rgba(0,0,0,.6);
  --muted:rgba(0,0,0,.6);
  --soft:#f3f2ef;
  --soft-2:#ebebeb;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.15);
  --card:#ffffff;
  --success:#16a34a;
  --warning:#d97706;
  --shadow:0 0 0 1px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.05);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  font-family:'Tajawal',Tahoma,Arial,sans-serif;
  direction:rtl;
  color:var(--ink);
  background:#fff;
}

html[dir="ltr"] body,
body.edu-lang-en{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  direction:ltr;
}

.edu-lang-switch{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  padding:8px 14px 0;
  max-width:540px;
  margin:0 auto;
}

.edu-lang-switch-btn{
  min-width:40px;
  height:34px;
  padding:0 12px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(11,20,38,.06);
}

.edu-lang-switch-btn.is-active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:transparent;
}

.edu-lang-cards{
  display:grid;
  gap:12px;
}

.edu-lang-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:22px;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.edu-lang-card.is-active{
  border-color:#C7C7C7;
  box-shadow:0 16px 40px rgba(11,20,38,.12);
}

.edu-lang-card-code{
  width:44px;
  height:44px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft-2);
  color:var(--brand);
  font-weight:900;
  font-size:16px;
}

.edu-lang-card em{
  display:block;
  font-style:normal;
  font-size:11px;
  color:var(--brand);
  font-weight:800;
  margin-top:4px;
}

.edu-lang-active-label{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  margin:0 0 14px;
}

[dir="ltr"] .edu-app{
  direction:ltr;
}

[dir="ltr"] .edu-section-head{
  flex-direction:row;
}

[dir="ltr"] .checkout-back{
  transform:scaleX(-1);
}

[dir="ltr"] .edu-hero-chip--1{
  left:auto;
  right:-18px;
}

[dir="ltr"] .edu-hero-chip--2{
  right:auto;
  left:-22px;
}

[dir="ltr"] .fade-right{
  right:auto;
  left:0;
  background:linear-gradient(270deg, transparent, #F3F2EF 80%);
}

[dir="ltr"] .fade-left{
  left:auto;
  right:0;
  background:linear-gradient(90deg, transparent, #F3F2EF 80%);
}

body{
  padding-bottom:calc(108px + env(safe-area-inset-bottom, 0px));
  background:#fff;
}

/* Flat page canvas — no grey/lavender gradient layers */
.inst-portal-app,
.edu-student-mode .inst-portal-app,
.edu-student-mode .edu-app.inst-portal-app,
.instructor-public-app,
.edu-trainer-mode,
.edu-trainer-mode .edu-app,
.edu-company-mode .edu-app,
.edu-page-live,
.edu-page-discuss{
  background:#fff;
}

.edu-app{
  width:100%;
  max-width:540px;
  margin:0 auto;
  padding:16px 14px 34px;
}

.edu-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.edu-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.edu-avatar{
  width:52px;
  height:52px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:23px;
  font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 14px 30px rgba(11,20,38,.22);
}

.edu-user small{
  display:block;
  color:var(--muted);
  font-weight:700;
  margin-bottom:3px;
}

.edu-user strong{
  display:block;
  font-size:18px;
  font-weight:900;
}

.edu-icon-btn{
  width:46px;
  height:46px;
  border:0;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:var(--brand);
  box-shadow:var(--shadow);
  text-decoration:none;
  font-size:20px;
}

.edu-hero{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  padding:24px;
  color:#fff;
  background:
    radial-gradient(circle at 18% 8%,rgba(255,255,255,.25),transparent 26%),
    linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 48%,var(--brand-2) 100%);
  box-shadow:0 26px 66px rgba(11,20,38,.26);
  margin-bottom:18px;
}

.edu-hero::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  left:-70px;
  top:-70px;
}

.edu-hero-content{
  position:relative;
  z-index:2;
}

.edu-hero span{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}

.edu-hero h1{
  margin:0;
  font-size:25px;
  line-height:1.35;
  font-weight:900;
}

.edu-hero p{
  margin:10px 0 18px;
  color:rgba(255,255,255,.86);
  line-height:1.8;
  font-size:14px;
  font-weight:600;
}

.edu-hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.edu-hero-actions--single{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.edu-hero-link{
  color:rgba(255,255,255,.92);
  font-weight:800;
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:3px;
}

.edu-hero--home{
  margin-bottom:14px;
}

.edu-hero--premium{
  padding:0;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(139,53,255,.35), transparent 38%),
    linear-gradient(145deg, #2a0f4d 0%, var(--brand) 42%, #152238 100%);
  box-shadow:
    0 28px 70px rgba(53,16,100,.32),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.edu-hero--premium::after{
  width:220px;
  height:220px;
  left:auto;
  right:-90px;
  top:-100px;
  background:rgba(255,255,255,.08);
}

.edu-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
}

.edu-hero-glow--a{
  width:140px;
  height:140px;
  top:-30px;
  left:20%;
  background:rgba(255,255,255,.18);
}

.edu-hero-glow--b{
  width:100px;
  height:100px;
  bottom:10px;
  right:28%;
  background:rgba(167,139,250,.45);
}

.edu-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  padding:22px 20px 20px;
}

.edu-hero-badge{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.92);
  font-size:11px;
  font-weight:800;
  margin-bottom:12px;
  backdrop-filter:blur(8px);
}

.edu-hero-title{
  margin:0 0 10px;
  line-height:1.25;
  font-weight:900;
}

.edu-hero-greeting{
  display:block;
  font-size:15px;
  font-weight:700;
  color:rgba(255,255,255,.78);
  margin-bottom:2px;
}

.edu-hero-name{
  display:block;
  font-style:normal;
  font-size:26px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.3px;
  text-shadow:0 8px 24px rgba(0,0,0,.15);
}

.edu-hero-lead{
  margin:0 0 16px;
  color:rgba(255,255,255,.88);
  line-height:1.75;
  font-size:13px;
  font-weight:600;
  max-width:28ch;
}

.edu-hero-visual{
  position:relative;
  width:108px;
  height:108px;
  flex-shrink:0;
}

.edu-hero-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.28);
  animation:eduHeroSpin 18s linear infinite;
}

.edu-hero-avatar{
  position:absolute;
  inset:14px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.08));
  border:2px solid rgba(255,255,255,.35);
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}

.edu-hero-chip{
  position:absolute;
  font-size:9px;
  font-weight:900;
  padding:5px 8px;
  border-radius:999px;
  white-space:nowrap;
  background:rgba(255,255,255,.95);
  color:var(--brand);
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.edu-hero-chip--1{
  top:-4px;
  left:-18px;
}

.edu-hero-chip--2{
  bottom:2px;
  right:-22px;
}

/* —— Home page buttons —— */
.edu-home-app .edu-hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:100%;
  max-width:100%;
  margin-top:4px;
}

.edu-home-app .edu-hero-actions .edu-btn{
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  gap:8px;
  letter-spacing:0;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.edu-home-app .edu-hero-actions .edu-btn i{
  font-size:14px;
  opacity:.92;
}

.edu-home-app .edu-hero-actions .edu-btn.primary{
  background:#fff;
  color:var(--brand);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.edu-home-app .edu-hero-actions .edu-btn.secondary{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.edu-home-app .edu-hero-actions .edu-btn:active{
  transform:scale(.98);
}

.edu-home-app .edu-section-head a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(11,20,38,.08);
  font-size:12px;
  font-weight:800;
  color:var(--brand);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.edu-home-app .edu-section-head a::after{
  content:'\f053';
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-size:10px;
  opacity:.75;
}

html[dir="ltr"] .edu-home-app .edu-section-head a::after{
  content:'\f054';
}

.edu-home-app .edu-section-head a:active{
  transform:scale(.98);
  border-color:#d8c2ff;
}

.edu-home-app .edu-admin-home-link{
  border-radius:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:transform .15s ease, background .15s ease;
}

.edu-home-app .edu-admin-home-link:active{
  transform:scale(.98);
  background:rgba(255,255,255,.22);
}

.edu-home-app .edu-admin-home-link span{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:15px;
  background:rgba(255,255,255,.16);
}

@media(max-width:380px){
  .edu-home-app .edu-hero-actions{
    grid-template-columns:1fr;
  }
  .edu-home-app .edu-hero-actions .edu-btn{
    width:100%;
  }
}

@keyframes eduHeroSpin{
  to{ transform:rotate(360deg); }
}

.edu-trust-stats:not(:has(.edu-trust-stats__grid)){
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:0 0 18px;
}

.edu-trust-stats:not(:has(.edu-trust-stats__grid)) .edu-trust-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px 12px 12px;
  text-align:center;
  box-shadow:0 12px 28px rgba(11,20,38,.07);
  min-height:92px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.edu-trust-stat-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:14px;
  background:var(--soft-2);
  color:var(--brand);
  font-size:16px;
  font-weight:900;
  margin-bottom:2px;
}

.edu-trust-stats:not(:has(.edu-trust-stats__grid)) .edu-trust-stat strong{
  display:block;
  font-size:17px;
  font-weight:900;
  color:var(--brand);
  line-height:1.2;
}

.edu-trust-stats:not(:has(.edu-trust-stats__grid)) .edu-trust-stat > span:last-child{
  display:block;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  line-height:1.35;
}

.edu-trust-stat--accent .edu-trust-stat-icon{
  background:#F3F2EF;
}

.edu-trust-stat--price .edu-trust-stat-icon{
  background:#fef3c7;
  color:#b45309;
}

.edu-trust-stat--price strong{
  color:#b45309;
}

.edu-search--home{
  margin:0 0 16px;
}

.edu-home-block{
  margin-bottom:6px;
}

.edu-section-sub{
  margin:4px 0 0;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.edu-home-carousel-section{
  margin-bottom:8px;
}

.edu-course-carousel{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:2px 2px 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.edu-course-carousel::-webkit-scrollbar{
  height:6px;
}

.edu-course-tile{
  flex:0 0 220px;
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}

.edu-course-tile-cover{
  position:relative;
  height:118px;
  background:linear-gradient(135deg,var(--soft-2),#fff);
  display:flex;
  align-items:center;
  justify-content:center;
}

.edu-course-tile-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.edu-course-tile-icon{
  font-size:36px;
  font-weight:900;
  color:var(--brand);
}

.edu-course-tile-badge{
  position:absolute;
  top:10px;
  right:10px;
  font-style:normal;
  font-size:10px;
  font-weight:900;
  padding:5px 9px;
  border-radius:999px;
  background:#fff;
  color:var(--brand);
  box-shadow:0 6px 16px rgba(11,20,38,.12);
}

.edu-course-tile-badge--new{background:#fef3c7;color:#b45309}
.edu-course-tile-badge--progress,
.edu-course-tile-badge--follow{background:#F3F2EF;color:var(--brand)}
.edu-course-tile-badge--complete{background:#dcfce7;color:#15803d}

.edu-course-tile-body{
  padding:14px 14px 16px;
}

.edu-course-tile-body small{
  display:block;
  color:var(--brand);
  font-weight:800;
  font-size:11px;
  margin-bottom:5px;
}

.edu-course-tile-body strong{
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.4;
  margin-bottom:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.edu-course-tile-body p{
  margin:0 0 8px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

.edu-progress--tile{
  margin-top:2px;
}

/* ===== Suggested courses marquee ===== */
.edu-course-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:2px 0 16px;
  margin:4px 0 10px;
  direction:ltr;
}

.courses-marquee-track{
  display:flex;
  align-items:stretch;
  gap:12px;
  width:max-content;
  animation:eduMarquee 38s linear infinite;
}

.edu-course-marquee:hover .courses-marquee-track{
  animation-play-state:paused;
}

.edu-course-tile--marquee{
  flex:0 0 210px;
  display:flex;
  flex-direction:row;
  min-height:88px;
  scroll-snap-align:unset;
  overflow:hidden;
}

/* Marquee v3 — بطاقات عمودية */
.edu-course-marquee--v3 .courses-marquee-track--cards{
  gap:14px;
  padding-bottom:10px;
}

.edu-course-marquee--v3 .edu-course-tile--card{
  flex:0 0 168px;
  flex-direction:column;
  min-height:0;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(11, 20, 38, 0.1);
  scroll-snap-align:start;
  transition:transform .18s ease, box-shadow .18s ease;
}

.edu-course-marquee--v3 .edu-course-tile--card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(11, 20, 38, 0.16);
}

.edu-course-tile-cover--card{
  width:100%;
  height:104px;
  min-height:104px;
  flex:none;
  position:relative;
}

.edu-course-tile-cover__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(53,16,100,.45) 100%);
  pointer-events:none;
}

.edu-course-tile-body--card{
  padding:10px 12px 12px;
  gap:4px;
}

.edu-course-tile-body--card small{
  color:var(--brand);
  font-weight:800;
  font-size:10px;
}

.edu-course-tile-body--card strong{
  font-size:13px;
  line-height:1.35;
  min-height:2.6em;
}

.edu-course-tile-body--card p{
  margin:0;
  font-size:10px;
  color:var(--muted);
}

.edu-course-tile-body--card p i{
  margin-inline-end:4px;
  color:var(--brand);
}

.edu-course-tile-price{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:4px;
}

.edu-course-tile-price del{
  color:#9ca3af;
  font-size:10px;
  text-decoration:line-through;
}

.edu-course-tile-price em{
  font-style:normal;
  font-size:12px;
  font-weight:900;
  color:var(--brand-dark, #070D18);
}

.edu-course-tile-price em.is-free{
  color:#15803d;
  font-size:11px;
}

.edu-course-marquee--v3 .edu-discount-badge--course{
  top:8px;
  inset-inline-start:8px;
  font-size:10px;
  padding:5px 9px;
}

.edu-course-tile-cover--sm{
  width:88px;
  height:auto;
  min-height:88px;
  flex:0 0 88px;
  border-radius:0;
}

.edu-course-tile-body--sm{
  flex:1;
  padding:12px 12px 12px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.edu-course-tile-body--sm strong{
  font-size:13px;
  -webkit-line-clamp:2;
}

.edu-course-tile-body--sm p{
  margin:0;
  font-size:11px;
}

/* ===== Course cards with cover image ===== */
.edu-courses-grid-media{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  padding-bottom:8px;
  overflow:visible;
}

.edu-course-card-media{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(11, 20, 38, 0.1);
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  height:100%;
}

.edu-course-card-media:hover,
.edu-course-card-media:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(11, 20, 38, 0.16);
  border-color:#d8b4fe;
}

.edu-course-card-media-cover{
  position:relative;
  height:132px;
  background:linear-gradient(145deg, var(--soft-2) 0%, #fff 100%);
  overflow:hidden;
}

.edu-course-card-media-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.35s ease;
}

.edu-course-card-media:hover .edu-course-card-media-cover img{
  transform:scale(1.04);
}

.edu-course-card-media__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 35%, rgba(53, 16, 100, 0.55) 100%);
  pointer-events:none;
}

.edu-course-card-media-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:12px 12px 14px;
  gap:6px;
}

.edu-course-card-media__cat{
  display:inline-flex;
  align-self:flex-start;
  max-width:100%;
  padding:4px 9px;
  border-radius:999px;
  background:var(--soft);
  color:var(--brand);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
}

.edu-course-card-media__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:14px;
  font-weight:900;
  line-height:1.4;
  color:var(--ink);
  margin:0;
  min-height:2.8em;
}

.edu-course-card-media__foot{
  margin-top:auto;
  padding-top:4px;
}

.edu-course-card-media__meta{
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  line-height:1.45;
}

.edu-course-card-media__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  min-height:34px;
  padding:0 10px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 6px 16px rgba(11, 20, 38, 0.22);
}

.edu-course-card-media--v3 .edu-course-card-media-cover{
  height:148px;
}

.edu-course-card-media--v3.edu-course-card-media--featured{
  border-color:#C7C7C7;
  box-shadow:0 12px 32px rgba(11, 20, 38, 0.14);
}

.edu-course-card-media--v3.edu-course-card-media--sale{
  border-color:#fcd34d;
}

.edu-course-card-media__featured{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  z-index:3;
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  color:#f59e0b;
  font-size:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.edu-course-card-media__stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
}

.edu-course-card-media__stats span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.edu-course-card-media__stats i{
  color:var(--brand);
  font-size:9px;
}

.edu-course-card-media__price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.edu-course-card-media__price-old{
  color:#9ca3af;
  font-size:11px;
  font-weight:700;
  text-decoration:line-through;
}

.edu-course-card-media__price{
  font-size:13px;
  font-weight:900;
  color:var(--brand-dark, #070D18);
}

.edu-course-card-media__price--free{
  color:#15803d;
  font-size:12px;
}

.edu-course-card-media--v3 .edu-discount-badge--course{
  top:10px;
  inset-inline-start:10px;
  z-index:4;
}

.edu-progress--card{
  margin-top:8px;
  height:6px;
  border-radius:999px;
  background:#F3F2EF;
  overflow:hidden;
}

.edu-progress--card b{
  display:block;
  height:100%;
  width:var(--progress, 0%);
  border-radius:inherit;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
}

/* legacy selectors */
.edu-course-card-media-body small{
  color:var(--brand);
  font-weight:800;
  font-size:10px;
}

.edu-course-card-media-body strong{
  display:block;
  font-size:14px;
  font-weight:900;
  margin:0;
  line-height:1.4;
}

.edu-course-card-media-body p{
  margin:0 0 8px;
  color:var(--muted);
  font-size:11px;
}

/* ===== Subscription & checkout ===== */
.edu-subscription-app .plans-grid--pro,
.edu-packages-app .plans-grid--pro{
  display:grid;
  gap:14px;
}

.plan-card--pro{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:18px;
  box-shadow:var(--shadow);
}

.plan-card--pro.featured{
  border-color:#C7C7C7;
  box-shadow:0 20px 50px rgba(11,20,38,.14);
}

.plan-features{
  margin:12px 0 16px;
  padding:0;
  list-style:none;
}

.plan-features li{
  padding:6px 0;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px dashed #f0e8ff;
}

.plan-features li::before{
  content:"✓ ";
  color:var(--brand);
  font-weight:900;
}

/* ===== Checkout page (premium) ===== */
.edu-checkout-app{
  padding-bottom:150px;
}

.checkout-topbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:4px 2px;
}

.checkout-topbar > div{
  flex:1;
}

.checkout-topbar strong{
  display:block;
  font-size:17px;
  font-weight:900;
}

.checkout-topbar small{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

.checkout-back{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:var(--brand);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(11,20,38,.08);
  font-size:18px;
  font-weight:900;
}

.checkout-secure{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft-2);
  font-size:18px;
}

.checkout-order-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(11,20,38,.10);
  margin-bottom:14px;
}

.checkout-order-visual{
  position:relative;
  height:140px;
  background:linear-gradient(135deg,#2a0f4d,var(--brand),#152238);
}

.checkout-order-cover{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
}

.checkout-order-cover--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
}

.checkout-order-cover--placeholder span{
  font-size:48px;
  color:rgba(255,255,255,.9);
}

.checkout-order-type{
  position:absolute;
  top:12px;
  right:12px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--brand);
  font-size:11px;
  font-weight:900;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.checkout-order-body{
  padding:18px 18px 16px;
}

.checkout-order-body h1{
  margin:0 0 8px;
  font-size:21px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:-.2px;
}

.checkout-order-sub{
  margin:0;
  font-size:13px;
  color:var(--muted);
  font-weight:600;
  line-height:1.6;
}

.checkout-meta-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.checkout-meta-chips span{
  padding:5px 10px;
  border-radius:999px;
  background:var(--soft-2);
  color:var(--brand);
  font-size:11px;
  font-weight:800;
}

.checkout-cert-banner{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:14px;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,#fffbeb,#fff7ed);
  border:1px solid #fde68a;
}

.checkout-cert-banner-icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#b45309;
  font-size:20px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(180,83,9,.12);
}

.checkout-cert-banner strong{
  display:block;
  color:#92400e;
  font-size:13px;
  margin-bottom:4px;
}

.checkout-cert-banner p{
  margin:0;
  font-size:12px;
  color:#a16207;
  line-height:1.55;
  font-weight:600;
}

.checkout-price-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px 18px;
  margin-bottom:12px;
  box-shadow:0 12px 30px rgba(11,20,38,.07);
}

.checkout-price-panel-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.checkout-price-panel-row > span{
  font-size:14px;
  font-weight:800;
  color:var(--muted);
}

.checkout-price-amount{
  text-align:left;
  direction:ltr;
}

.checkout-price-amount strong{
  display:block;
  font-size:28px;
  font-weight:900;
  color:var(--brand);
  line-height:1.1;
  letter-spacing:-.5px;
}

.checkout-price-amount small{
  display:block;
  text-align:left;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  margin-top:2px;
}

.checkout-coupon-applied{
  margin:10px 0 0;
  padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

.checkout-coupon-applied b{
  color:var(--brand);
}

.checkout-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:16px;
}

.checkout-feature{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 8px;
  text-align:center;
  box-shadow:0 8px 20px rgba(11,20,38,.05);
}

.checkout-feature-icon{
  display:block;
  font-size:20px;
  margin-bottom:6px;
}

.checkout-feature strong{
  display:block;
  font-size:11px;
  font-weight:900;
  color:var(--ink);
}

.checkout-feature small{
  display:block;
  font-size:10px;
  color:var(--muted);
  font-weight:700;
  margin-top:2px;
}

.checkout-sticky-pay{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:78px;
  width:min(100% - 28px,512px);
  z-index:40;
  padding:12px 14px 10px;
  border-radius:24px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(234,223,255,.95);
  box-shadow:0 -8px 40px rgba(11,20,38,.14), 0 20px 50px rgba(29,10,55,.12);
  backdrop-filter:blur(12px);
}

.checkout-pay-form{
  margin:0;
}

.checkout-pay-btn{
  width:100%;
  min-height:56px;
  border:0;
  border-radius:18px;
  padding:10px 16px;
  cursor:pointer;
  font-family:inherit;
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 50%,var(--brand-2) 100%);
  color:#fff;
  box-shadow:0 16px 36px rgba(11,20,38,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.checkout-pay-btn span{
  font-size:16px;
  font-weight:900;
}

.checkout-pay-btn em{
  font-style:normal;
  font-size:11px;
  font-weight:700;
  opacity:.88;
}

.checkout-pay-btn:active{
  transform:scale(.98);
}

.checkout-cancel-link{
  display:block;
  text-align:center;
  margin-top:10px;
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  text-decoration:none;
}

.checkout-cancel-link:hover{
  color:var(--brand);
}

.checkout-state{
  text-align:center;
  padding:24px 0;
}

@media(max-width:380px){
  .checkout-features{
    grid-template-columns:1fr;
  }
  .checkout-feature{
    display:flex;
    align-items:center;
    gap:10px;
    text-align:right;
  }
  .checkout-feature-icon{
    margin:0;
  }
}

.edu-hero--compact{
  margin-bottom:12px;
  padding:18px 20px;
}

.edu-hero--success{
  background:linear-gradient(135deg,#14532d,#16a34a,#22c55e);
}

.edu-hero--fail{
  background:linear-gradient(135deg,#7f1d1d,#dc2626,#ef4444);
}

.payment-ref{
  font-size:12px;
  opacity:.9;
}

.edu-packages-duo{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

.edu-package-choice{
  display:block;
  text-decoration:none;
  color:inherit;
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.edu-package-choice--pro{
  border-color:#fde68a;
  background:linear-gradient(180deg,#fffbeb,#fff);
}

.edu-package-choice-icon{
  font-size:24px;
  display:block;
  margin-bottom:8px;
}

.edu-package-choice strong{
  display:block;
  font-size:18px;
  margin-bottom:6px;
}

.edu-package-choice p{
  margin:0 0 8px;
  font-size:13px;
  color:var(--muted);
}

.edu-package-choice em{
  font-style:normal;
  font-weight:900;
  color:var(--brand);
  font-size:13px;
}

.edu-notice--warn{
  background:#fffbeb;
  border-color:#fde68a;
  color:#92400e;
}

/* ===== Professional programs ===== */
.pro-programs-grid{
  display:grid;
  gap:16px;
}

.pro-program-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.pro-program-cover{
  position:relative;
  height:150px;
}

.pro-program-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pro-program-cover--intro .pro-program-intro-play,
.pro-program-mini--intro .pro-program-intro-play{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:1.6rem;
  background:rgba(0,0,0,.28);
  pointer-events:none;
  transition:background .2s ease;
}

.pro-program-cover--intro:hover .pro-program-intro-play,
.pro-program-mini--intro:hover .pro-program-intro-play{
  background:rgba(0,0,0,.42);
}

.pro-program-mini-cover{
  position:relative;
  display:block;
  width:100%;
  height:100px;
  overflow:hidden;
}

.pro-program-mini-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pro-program-intro-play--mini{
  font-size:1.25rem;
}

.pro-program-external-badge{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  background:#fff;
  color:#b45309;
  font-size:10px;
  font-weight:900;
  padding:5px 9px;
  border-radius:999px;
  z-index:2;
}

.pro-program-body{
  padding:16px;
}

.pro-program-issuer{
  color:var(--brand);
  font-weight:900;
  font-size:12px;
}

.pro-program-body h2{
  margin:8px 0;
  font-size:18px;
}

.pro-program-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:10px 0;
  font-size:12px;
  font-weight:800;
}

.pro-program-price{
  color:var(--brand);
}

.pro-program-separate-tag{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  background:#fef3c7;
  color:#92400e;
  font-size:0.72rem;
  font-weight:800;
}

.edu-hero-note--pro-fee{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  font-size:0.82rem;
  line-height:1.5;
}

.edu-courses-pro-banner{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  padding:16px 18px;
  border-radius:20px;
  text-decoration:none;
  color:#070D18;
  background:linear-gradient(135deg,#F3F2EF,#fff);
  border:2px solid #E8E8E8;
  box-shadow:0 10px 28px rgba(11,20,38,.1);
}

.edu-courses-pro-banner__icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,#0B1426,#152238);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.4rem;
  flex-shrink:0;
}

.edu-courses-pro-banner strong{
  display:block;
  font-size:1rem;
  margin-bottom:4px;
}

.edu-courses-pro-banner p{
  margin:0 0 6px;
  font-size:0.84rem;
  color:#6b5b7b;
  line-height:1.45;
}

.edu-courses-pro-banner em{
  font-size:0.75rem;
  font-weight:800;
  color:#0B1426;
  font-style:normal;
}

.edu-courses-pro-banner__arrow{
  font-size:1.2rem;
  font-weight:900;
  color:#0B1426;
}

.pro-program-cert-note{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:12px;
}

.pro-program-enrolled{
  display:block;
  text-align:center;
}

.pro-program-mini{
  flex:0 0 240px;
  position:relative;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.pro-program-mini img{
  height:100px;
  width:100%;
  object-fit:cover;
}

.pro-program-mini > div{
  padding:12px;
}

.pro-program-mini small{
  color:var(--brand);
  font-weight:800;
  font-size:10px;
}

.pro-program-mini strong{
  display:block;
  font-size:14px;
  margin:4px 0;
}

.pro-program-mini em{
  font-style:normal;
  font-weight:900;
  color:var(--ink);
  font-size:13px;
}

.pro-program-mini-badge{
  position:absolute;
  top:8px;
  left:8px;
  background:#fef3c7;
  color:#b45309;
  font-size:9px;
  font-weight:900;
  padding:4px 7px;
  border-radius:999px;
}

.edu-home-programs{
  margin:10px 0 14px;
}

/* ===== Professional programs marquee (home) ===== */
.edu-programs-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:2px 0 16px;
  margin:8px 0 12px;
  direction:ltr;
}

.programs-marquee-track{
  display:flex;
  align-items:stretch;
  gap:12px;
  width:max-content;
  animation:eduMarquee 40s linear infinite;
}

.edu-programs-marquee:hover .programs-marquee-track{
  animation-play-state:paused;
}

.edu-programs-marquee .pro-program-mini{
  flex:0 0 228px;
  scroll-snap-align:unset;
}

@media(max-width:420px){
  .edu-hero-inner{
    grid-template-columns:1fr;
    padding-bottom:8px;
  }
  .edu-hero-visual{
    margin:4px auto 0;
  }
  .edu-hero-name{
    font-size:23px;
  }
  .edu-course-tile--marquee{
    flex-basis:196px;
  }
}

@media (prefers-reduced-motion: reduce){
  .marquee-track,
  .accreditation-track,
  .courses-marquee-track,
  .programs-marquee-track{
    animation:none;
  }
  .edu-hero-ring{
    animation:none;
  }
  .edu-category-marquee .marquee-track,
  .edu-accreditation-marquee .accreditation-track,
  .edu-course-marquee .courses-marquee-track,
  .edu-programs-marquee .programs-marquee-track{
    flex-wrap:wrap;
    width:100%;
    justify-content:center;
  }
}

/* Base .edu-btn — see edu_buttons.css for unified platform styles */

.edu-search{
  position:relative;
  margin:18px 0;
}

.edu-search input{
  width:100%;
  height:58px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:0 48px 0 18px;
  font-family:inherit;
  font-size:15px;
  background:#fff;
  box-shadow:var(--shadow);
  outline:none;
}

.edu-search span{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  color:var(--brand);
  font-size:20px;
}

.edu-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:22px 2px 12px;
}

.edu-section-head h2{
  margin:0;
  font-size:21px;
  font-weight:900;
}

.edu-section-head a,
.edu-section-head small{
  color:var(--brand);
  font-weight:900;
  text-decoration:none;
  background:var(--soft-2);
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
}

.edu-horizontal{
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
}

.edu-horizontal::-webkit-scrollbar{display:none}

.edu-category{
  min-width:108px;
  min-height:108px;
  scroll-snap-align:start;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:15px;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.edu-category span{
  width:44px;
  height:44px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft-2);
  font-size:23px;
}

.edu-category strong{
  font-size:15px;
  font-weight:900;
}

.edu-course-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:17px;
  margin-bottom:13px;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:var(--ink);
  display:block;
}

.course-row{
  display:flex;
  gap:13px;
  align-items:center;
}

.course-icon{
  width:58px;
  height:58px;
  border-radius:22px;
  background:var(--soft-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  flex:0 0 58px;
}

.course-info{
  flex:1;
  min-width:0;
}

.course-info small{
  display:block;
  color:var(--brand);
  font-weight:800;
  margin-bottom:4px;
}

.course-info strong{
  display:block;
  font-size:17px;
  font-weight:900;
  line-height:1.4;
}

.course-info p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
}

.edu-progress{
  height:9px;
  background:#f0e8fb;
  border-radius:999px;
  overflow:hidden;
  margin-top:14px;
}

.edu-progress b{
  display:block;
  height:100%;
  width:var(--progress,40%);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:999px;
}

.edu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px;
}

.edu-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:17px;
  min-height:128px;
  box-shadow:var(--shadow);
  text-decoration:none;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.edu-card .icon{
  width:48px;
  height:48px;
  border-radius:18px;
  background:var(--soft-2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}

.edu-card strong{
  font-size:16px;
  font-weight:900;
}

.edu-card small{
  color:var(--muted);
  line-height:1.6;
  font-weight:600;
}

.edu-list-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  margin:10px 0;
  box-shadow:var(--shadow);
}

.edu-list-card h3{
  margin:0 0 7px;
  font-size:17px;
}

.edu-list-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.edu-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:18px;
  box-shadow:var(--shadow);
}

.edu-form label{
  display:block;
  font-weight:900;
  margin:0 0 7px;
}

.edu-input{
  width:100%;
  min-height:54px;
  border:1px solid var(--line);
  border-radius:17px;
  padding:0 14px;
  font-family:inherit;
  background:#fff;
  margin-bottom:13px;
  outline:none;
}

textarea.edu-input{
  min-height:120px;
  padding-top:14px;
}

.edu-bottom-nav{
  position:fixed;
  left:50%;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  width:min(540px,calc(100% - 20px));
  min-height:78px;
  height:auto;
  padding:12px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:flex-end;
  gap:2px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(0,0,0,0.08,.9);
  border-radius:26px;
  overflow:visible;
  box-shadow:
    0 16px 40px rgba(11,20,38,.11),
    0 2px 8px rgba(11,20,38,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  z-index:10000;
}

.edu-bottom-nav--cols-6{
  grid-template-columns:repeat(6,1fr);
  width:min(640px,calc(100% - 12px));
  padding-inline:4px;
}

.edu-bottom-nav--cols-6 a b{
  font-size:9px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.edu-bottom-nav a{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-height:54px;
  padding:4px 2px 2px;
  border-radius:18px;
  color:#666666;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  transition:color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.edu-bottom-nav a b{
  font-size:10px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
  color:inherit;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.edu-bottom-nav span{
  font-size:18px;
  line-height:1;
}

.edu-bottom-nav .edu-nav-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:14px;
  font-size:17px;
  line-height:1;
  color:#666666;
  background:transparent;
  filter:none;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.edu-bottom-nav .edu-nav-icon-svg,
.edu-bottom-nav .edu-nav-icon svg{
  display:block;
  width:21px;
  height:21px;
  flex:0 0 auto;
}

.edu-bottom-nav .edu-nav-icon i{
  display:block;
  line-height:1;
  font-family:'Font Awesome 6 Free';
  font-weight:900;
  font-style:normal;
}

.edu-bottom-nav a.active:not(.is-featured){
  color:var(--brand);
  background:transparent;
}

.edu-bottom-nav a.active:not(.is-featured) .edu-nav-icon{
  color:var(--brand);
  background:transparent;
  box-shadow:none;
}

.edu-bottom-nav a.active:not(.is-featured) b{
  color:var(--brand);
  font-weight:800;
}

.edu-bottom-nav a:not(.active):not(.is-featured):hover .edu-nav-icon{
  color:#152238;
  background:rgba(26,41,66,.07);
  transform:translateY(-1px);
}

.edu-bottom-nav a.is-featured{
  position:relative;
  z-index:3;
  align-self:flex-end;
  margin-top:-16px;
  padding-bottom:0;
  gap:6px;
}

.edu-bottom-nav a.is-featured .edu-nav-icon{
  width:50px;
  height:50px;
  border-radius:50%;
  background:linear-gradient(145deg,#0B1426 0%,#152238 55%,#152238 100%);
  color:#fff !important;
  box-shadow:
    0 12px 28px rgba(11,20,38,.34),
    0 0 0 4px rgba(255,255,255,.98);
}

.edu-bottom-nav a.is-featured.active .edu-nav-icon{
  background:linear-gradient(145deg,#070D18 0%,#152238 55%,#152238 100%);
  box-shadow:
    0 14px 30px rgba(49,46,129,.38),
    0 0 0 4px rgba(255,255,255,.98),
    0 0 0 6px rgba(26,41,66,.18);
}

.edu-bottom-nav a.is-featured b{
  font-weight:800;
  color:#0B1426;
  font-size:10px;
  margin-top:1px;
}

.edu-bottom-nav a.is-featured.active b{
  color:#070D18;
}

.edu-notice{
  background:#fff8e8;
  border:1px solid #ffe4a4;
  color:#5d4212;
  border-radius:22px;
  padding:14px;
  line-height:1.8;
  font-weight:600;
  margin-top:14px;
}

@media(max-width:410px){
  .edu-app{padding:14px 12px 30px}
  .edu-hero{border-radius:30px;padding:22px}
  .edu-hero h1{font-size:22px}
  .edu-hero-actions{grid-template-columns:1fr}
  .edu-grid{grid-template-columns:1fr}
  .edu-bottom-nav a{font-size:10px}
}


/* ===== 2026 PREMIUM ICON SYSTEM ===== */

.edu-avatar,
.hero-badge,
.edu-category span,
.course-icon,
.edu-card .icon,
.edu-icon-btn{
  position:relative;
  overflow:hidden;
}

.edu-avatar::before,
.hero-badge::before,
.edu-category span::before,
.course-icon::before,
.edu-card .icon::before,
.edu-icon-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.35), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
}

.edu-category span,
.course-icon,
.edu-card .icon{
  background:
    linear-gradient(145deg,#ffffff 0%,#f4ebff 100%);
  border:1px solid rgba(11,20,38,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 24px rgba(11,20,38,.10);
}

.edu-category:hover span,
.edu-card:hover .icon,
.edu-course-card:hover .course-icon{
  transform:translateY(-2px) scale(1.03);
  transition:.2s ease;
}

.edu-card,
.edu-course-card,
.edu-category{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.edu-card:hover,
.edu-course-card:hover,
.edu-category:hover{
  transform:translateY(-4px);
  box-shadow:
    0 24px 48px rgba(11,20,38,.12),
    0 2px 8px rgba(0,0,0,.03);
  border-color:#d8c2ff;
}

.edu-bottom-nav span{
  font-size:18px;
  line-height:1;
}

.edu-hero{
  border:1px solid rgba(255,255,255,.08);
}

/* .edu-btn variants — edu_buttons.css */

.edu-search input{
  border:1px solid rgba(11,20,38,.08);
  box-shadow:
    0 16px 35px rgba(11,20,38,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.edu-list-card,
.edu-form{
  background:
    linear-gradient(180deg,#ffffff 0%,#fcfaff 100%);
}

.edu-card strong,
.course-info strong,
.edu-category strong{
  letter-spacing:-.2px;
}



/* ===== Animated Categories Marquee ===== */
.edu-category-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:4px 0 10px;
  margin:2px 0 8px;
  direction:ltr;
  touch-action:pan-y;
}

.marquee-track{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  animation:eduMarquee 28s linear infinite;
  will-change:transform;
  touch-action:pan-x;
}

.edu-category-marquee:hover .marquee-track,
.edu-category-marquee:active .marquee-track{
  animation-play-state:paused;
}

.marquee-category-pill{
  direction:rtl;
  flex:0 0 auto;
  min-width:138px;
  height:72px;
  padding:12px 14px;
  border-radius:24px;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
  background: linear-gradient(180deg,#ffffff 0%,#F3F2EF 100%);
  border:1px solid #E8E8E8;
  box-shadow:
    0 14px 34px rgba(11,20,38,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.marquee-category-pill span{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:linear-gradient(145deg,#ffffff 0%,#F3F2EF 100%);
  border:1px solid rgba(11,20,38,.09);
  box-shadow:0 10px 22px rgba(11,20,38,.09);
  font-size:20px;
  font-weight:900;
}

.marquee-category-pill strong{
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
}

.marquee-fade{
  display:none;
  position:absolute;
  top:0;
  bottom:0;
  width:52px;
  z-index:2;
  pointer-events:none;
}

.fade-right{
  display:none;
  right:0;
  background:linear-gradient(90deg, transparent, #F3F2EF 80%);
}

.fade-left{
  display:none;
  left:0;
  background:linear-gradient(270deg, transparent, #F3F2EF 80%);
}

@keyframes eduMarquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media(max-width:420px){
  .marquee-track{
    animation-duration:22s;
  }
  .marquee-category-pill{
    min-width:126px;
    height:68px;
    border-radius:22px;
  }
}

/* ===== Accreditation logos marquee ===== */
.edu-accreditation-marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:2px 0 14px;
  margin:8px 0 4px;
  direction:ltr;
}

.edu-accreditation-marquee__head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

.edu-accreditation-marquee__glyph{
  flex-shrink:0;
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:1.1rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 20px rgba(11,20,38,.2);
}

.edu-accreditation-marquee__hint{
  margin:6px 0 0;
  font-size:.74rem;
  line-height:1.5;
  color:var(--muted);
}

.edu-section-head--compact{
  margin-bottom:6px;
}

.accreditation-track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  animation:eduMarquee 34s linear infinite;
}

.edu-accreditation-marquee:hover .accreditation-track{
  animation-play-state:paused;
}

.accreditation-logo-pill{
  flex:0 0 auto;
  min-width:120px;
  height:56px;
  padding:8px 16px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(234,223,255,.95);
  box-shadow:0 8px 22px rgba(11,20,38,.07);
}

.accreditation-logo-pill img{
  max-height:36px;
  max-width:110px;
  width:auto;
  object-fit:contain;
}

.accreditation-logo-text{
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--brand);
  white-space:nowrap;
}

.accreditation-logo-text--autodesk{color:#0696d7}
.accreditation-logo-text--adobe{color:#ff0000}
.accreditation-logo-text--aws{color:#ff9900}
.accreditation-logo-text--microsoft{color:#0078d4}
.accreditation-logo-text--google{color:#4285f4}

/* ===== Trainers strip (home) ===== */
.edu-trainers-section{
  margin:6px 0 10px;
}

.edu-trainers-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:4px 2px 10px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

.edu-trainers-scroll::-webkit-scrollbar{
  height:6px;
}

.edu-trainer-card{
  flex:0 0 168px;
  scroll-snap-align:start;
  text-decoration:none;
  color:inherit;
}

.edu-trainer-avatar{
  width:68px;
  height:68px;
  margin:0 auto 10px;
  border-radius:20px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand),var(--brand-2));
  color:#fff;
  font-weight:900;
  font-size:18px;
  overflow:hidden;
}

.edu-trainer-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.edu-trainer-card strong{
  display:block;
  font-size:14px;
  font-weight:900;
  margin-bottom:4px;
}

.edu-trainer-card small{
  display:block;
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}

/* ===== Admin-only home strip ===== */
.edu-admin-home-strip--compact{
  margin-top:10px;
  padding:12px;
}

.edu-admin-home-strip--compact .edu-section-head{
  margin-bottom:10px;
}

.edu-admin-home-strip--compact .edu-admin-home-link{
  min-height:64px;
  font-size:11px;
}

.edu-admin-home-strip{
  margin:14px 0 8px;
  padding:14px;
  border-radius:22px;
  background:linear-gradient(135deg,#2a1148 0%,#0B1426 55%,#152238 100%);
  color:#fff;
  box-shadow:0 16px 36px rgba(11,20,38,.22);
}

.edu-admin-home-strip .edu-section-head h2,
.edu-admin-home-strip .edu-section-head small{
  color:#fff;
}

.edu-admin-home-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.edu-admin-home-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:72px;
  padding:10px 8px;
  border-radius:16px;
  text-decoration:none;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.edu-admin-home-link span{
  font-size:20px;
}

.edu-empty-card{
  background:#fff;
  border:1px dashed var(--brand-muted);
  border-radius:22px;
  padding:22px 18px;
  text-align:center;
  margin-bottom:12px;
}

.edu-empty-card strong{
  display:block;
  color:var(--ink);
  margin-bottom:6px;
}

.edu-empty-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

@media(max-width:520px){
  .edu-admin-home-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* ===== Course Learning System ===== */
.course-learning-page{
  padding-top:8px;
}

.course-player-card--pro{
  background:#fff;
  border:1px solid rgba(234,223,255,.95);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(11,20,38,.10);
  margin-bottom:18px;
}

.course-player-card__status{
  padding:14px 16px 0;
}

.course-player-card__pill{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 14px;
  border-radius:16px;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
}

.course-player-card__pill--ok{
  background:linear-gradient(135deg,#ecfdf5,#d1fae5);
  color:#065f46;
  border:1px solid rgba(16,185,129,.22);
}

.course-player-card__pill--ok i{
  color:#10b981;
}

.course-player-card__pill--preview{
  background:linear-gradient(135deg,#fff7ed,#ffedd5);
  color:#9a3412;
  border:1px solid rgba(251,146,60,.25);
}

.course-player-card__pill a{
  color:inherit;
  font-weight:900;
  text-decoration:underline;
}

.video-frame{
  position:relative;
  aspect-ratio:16/9;
  margin:14px 16px 0;
  border-radius:20px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.18), transparent 22%),
    linear-gradient(135deg,#21103d 0%, #0B1426 55%, #1A2942 100%);
  overflow:hidden;
}

.video-frame--cinema,
.video-frame--youtube,
.video-frame--media{
  background:#050508;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 24px 60px rgba(11,20,38,.18);
}

.edu-video-shell{
  margin:14px 16px 0;
}

.video-frame--pro.video-frame--screen{
  margin:0;
  border-radius:20px 20px 0 0;
}

.video-frame--idle::before,
.video-frame--idle::after,
.video-frame--cinema::before,
.video-frame--cinema::after,
.video-frame--youtube::before,
.video-frame--youtube::after,
.video-frame--media::before,
.video-frame--media::after{
  display:none;
}

.video-frame__stage{
  position:absolute;
  inset:0;
  z-index:3;
}

/* YouTube lesson player — professional */
.edu-yt-player{
  position:absolute;
  inset:0;
  z-index:3;
  background:#0a0a0f;
  overflow:hidden;
}

.edu-yt-player__screen{
  position:absolute;
  inset:0;
}

.edu-yt-player__iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:none;
  background:#0a0a0f;
  pointer-events:none;
}

.edu-yt-player--playing .edu-yt-player__iframe{
  display:block;
}

.edu-yt-player__poster{
  position:absolute;
  inset:0;
  z-index:1;
  background:#111 center/cover no-repeat;
  transform:scale(1.02);
}

.edu-yt-player__vignette{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 28%,transparent 62%,rgba(0,0,0,.55) 100%),
    radial-gradient(circle at center,transparent 40%,rgba(0,0,0,.25) 100%);
}

.edu-yt-player__play{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:0;
}

.edu-yt-player__play-ring{
  position:absolute;
  width:92px;
  height:92px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  animation:edu-yt-pulse 2s ease-out infinite;
}

.edu-yt-player__play-icon{
  position:relative;
  z-index:1;
  width:76px;
  height:76px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0B1426 0%,#1A2942 100%);
  box-shadow:0 18px 44px rgba(11,20,38,.45);
  font-size:22px;
  padding-inline-start:4px;
}

.edu-yt-player__play-text{
  position:relative;
  z-index:1;
  font-size:13px;
  font-weight:800;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}

.edu-yt-player__play[hidden],
.edu-yt-player--playing .edu-yt-player__play{
  display:none;
}

.edu-yt-player__loader{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.5);
}

.edu-yt-player__loader::after{
  content:"";
  width:44px;
  height:44px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.2);
  border-top-color:#fff;
  animation:edu-yt-spin .75s linear infinite;
}

.edu-yt-player__loader[hidden]{
  display:none;
}

.edu-yt-player__bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:7;
  display:none;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(10,6,18,.88) 40%,rgba(10,6,18,.96) 100%);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.06);
}

.edu-yt-player--playing .edu-yt-player__bar{
  display:flex;
}

.edu-yt-player__toggle{
  width:40px;
  height:40px;
  border:0;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:14px;
  cursor:pointer;
  flex-shrink:0;
  display:grid;
  place-items:center;
}

.edu-yt-player__icon-play{
  display:none;
}

.edu-yt-player--paused .edu-yt-player__icon-pause{
  display:none;
}

.edu-yt-player--paused .edu-yt-player__icon-play{
  display:block;
}

.edu-yt-player__info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.edu-yt-player__title{
  display:block;
  font-size:13px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.edu-yt-player__label{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.62);
}

.edu-yt-player__duration{
  flex-shrink:0;
  font-size:11px;
  font-weight:800;
  color:rgba(255,255,255,.75);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
}

@keyframes edu-yt-pulse{
  0%{ transform:scale(.92); opacity:.85; }
  70%{ transform:scale(1.08); opacity:0; }
  100%{ transform:scale(1.08); opacity:0; }
}

@keyframes edu-yt-spin{
  to{ transform:rotate(360deg); }
}

.course-meta--pro{
  padding:18px 20px 22px;
}

.course-meta__head h1{
  margin:10px 0 0;
  font-size:clamp(20px,4.5vw,24px);
  line-height:1.35;
  font-weight:900;
}

.course-meta__tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.course-live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(135deg,#0B1426,#152238);
  color:#fff;
  font-size:11px;
  font-weight:800;
}

.course-live-badge i{
  font-size:7px;
  animation:edu-live-blink 1.4s ease-in-out infinite;
}

@keyframes edu-live-blink{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.course-meta__desc{
  margin:12px 0 16px;
  color:var(--muted);
  line-height:1.75;
  font-weight:600;
  font-size:14px;
}

.course-stats-row--pro div{
  border-radius:16px;
  padding:10px 8px;
}

.course-progress--pro{
  position:relative;
  margin-top:4px;
}

.course-progress--pro span{
  position:absolute;
  inset-inline-end:0;
  top:-22px;
  font-size:11px;
  font-weight:800;
  color:var(--brand);
}

.course-current-lesson{
  margin:6px 0 0;
  font-weight:700;
  color:var(--muted);
  font-size:13px;
}

@media(max-width:520px){
  .course-player-card--pro{
    border-radius:22px;
  }

  .video-frame{
    margin:12px 12px 0;
    border-radius:16px;
  }

  .course-meta--pro{
    padding:16px;
  }

  .edu-yt-player__title{
    font-size:12px;
  }
}

/* Screen capture / screenshot deterrence */
.course-learning-page--protected .video-frame,
.course-learning-page--protected .edu-yt-player,
.course-learning-page--protected .video-frame__player{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.course-learning-page--shielded .video-frame{
  filter:blur(26px) brightness(.25);
}


.video-frame__play{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:0;
}

.video-frame__play:disabled{
  opacity:.7;
  cursor:wait;
}

.video-frame--media .video-frame__play{
  display:none;
}

.edu-protected-iframe,
.edu-protected-video{
  pointer-events:auto;
}

.video-frame__stage--shielded{
  overflow:hidden;
  background:#000;
}

.video-frame--protected.video-frame--media{
  background:#000;
}

.edu-lesson-embed{
  background:#000;
}

.video-frame__viewport{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transform-origin:center center;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}

.video-frame__viewport > *{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.video-frame__player{
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  border:0;
  background:#000;
  object-fit:contain;
}

/* ===== Video screen (داخل المربع فقط) ===== */
.edu-video-player{
  isolation:isolate;
}

/* ضباب خفيف لإخفاء علامة واتساب — متدرج */
.edu-video-player__fog{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  overflow:hidden;
}

.edu-video-player__fog-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:clamp(52px, 18%, 88px);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(255,255,255,.08) 18%,
      rgba(255,255,255,.42) 100%
    ),
    linear-gradient(
      90deg,
      rgba(252,250,255,.78) 0%,
      rgba(236,232,245,.52) 12%,
      rgba(180,176,195,.32) 28%,
      rgba(90,86,108,.28) 50%,
      rgba(180,176,195,.32) 72%,
      rgba(236,232,245,.52) 88%,
      rgba(252,250,255,.78) 100%
    );
  backdrop-filter:blur(11px) saturate(1.05);
  -webkit-backdrop-filter:blur(11px) saturate(1.05);
  mask-image:linear-gradient(180deg, transparent 0%, #000 42%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 42%);
}

.edu-video-player__fog-corner{
  position:absolute;
  left:0;
  bottom:0;
  width:min(46%, 220px);
  height:clamp(48px, 16%, 76px);
  background:
    linear-gradient(
      128deg,
      rgba(255,255,255,.94) 0%,
      rgba(250,246,255,.82) 38%,
      rgba(245,240,255,.45) 68%,
      transparent 100%
    );
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:0 14px 0 0;
}

.edu-video-player__overlay-play{
  position:absolute;
  inset:0;
  z-index:8;
  margin:auto;
  width:80px;
  height:80px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:56px;
  line-height:1;
  cursor:pointer;
  transition:opacity .2s ease, transform .2s ease;
  -webkit-tap-highlight-color:transparent;
}

.edu-video-player__overlay-play i{
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));
}

.edu-video-player.is-playing .edu-video-player__overlay-play{
  opacity:0;
  pointer-events:none;
}

.edu-video-player .edu-yt-player__play{
  display:none !important;
}

/* ===== Toolbar خارج مربع الفيديو ===== */
.edu-video-toolbar{
  padding:14px 16px 16px;
  background:linear-gradient(180deg,#F3F2EF 0%,#fff 100%);
  border:1px solid #D8DEE8;
  border-top:0;
  border-radius:0 0 20px 20px;
  box-shadow:0 12px 32px rgba(11,20,38,.08);
}

.edu-video-toolbar__progress{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.edu-video-toolbar__track{
  flex:1;
  height:8px;
  border-radius:999px;
  background:#D8DEE8;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}

.edu-video-toolbar__buffer{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:#d8b4fe;
  border-radius:inherit;
}

.edu-video-toolbar__fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:linear-gradient(90deg,#0B1426,#1A2942);
  border-radius:inherit;
  transition:width .12s linear;
}

.edu-video-toolbar__time{
  flex-shrink:0;
  min-width:76px;
  font-size:12px;
  font-weight:800;
  color:#0B1426;
  text-align:end;
}

.edu-video-toolbar__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.edu-vtool{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:46px;
  padding:0 14px;
  border:1px solid #D8DEE8;
  border-radius:12px;
  background:#fff;
  color:#0B1426;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(11,20,38,.08);
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.edu-vtool i{
  font-size:22px;
  width:26px;
  text-align:center;
  flex-shrink:0;
  line-height:1;
}

.edu-vtool:hover{
  background:#F3F2EF;
  border-color:#d8b4fe;
}

.edu-vtool:active{
  transform:scale(.97);
}

.edu-vtool--primary{
  background:linear-gradient(135deg,#0B1426,#152238);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 24px rgba(11,20,38,.28);
}

.edu-vtool--primary:hover{
  background:linear-gradient(135deg,#6b21b6,#152238);
}

.edu-vtool--danger{
  background:#fef2f2;
  border-color:#fecaca;
  color:#b91c1c;
}

.edu-vtool--danger:hover{
  background:#fee2e2;
}

.edu-vtool__icon-pause,
.edu-vtool__text-pause{
  display:none !important;
}

.edu-video-shell.is-playing .edu-vtool__icon-play,
.edu-video-shell.is-playing .edu-vtool__text-play{
  display:none !important;
}

.edu-video-shell.is-playing .edu-vtool__icon-pause,
.edu-video-shell.is-playing .edu-vtool__text-pause{
  display:inline !important;
}

.edu-vtool.is-active{
  background:linear-gradient(135deg,#0B1426,#1A2942);
  border-color:transparent;
  color:#fff;
}

.edu-vtool.is-active .edu-vtool__text{
  color:#fff;
}

.edu-vtool:disabled{
  opacity:.4;
  cursor:not-allowed;
  pointer-events:none;
}

.edu-video-toolbar__zoom{
  margin-inline-start:auto;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#0B1426;
  background:#F3F2EF;
  border:1px solid #D8DEE8;
}

.edu-video-toolbar__zoom:not([hidden]){
  display:inline-flex;
  align-items:center;
}

.video-frame__viewport--dragging{
  transition:none;
}

.video-frame__mobile-tools{
  display:none;
}

@media (max-width:768px), (hover:none) and (pointer:coarse){
  .edu-video-toolbar--cinema{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:100002 !important;
    border-radius:18px 18px 0 0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .edu-vtool{
    min-height:44px;
    padding:0 12px;
    font-size:12px;
  }

  .edu-vtool i{
    font-size:20px;
    width:22px;
  }

  .edu-video-toolbar__zoom{
    margin-inline-start:0;
    width:100%;
    justify-content:center;
  }

  .video-frame--mobile-fullscreen{
    position:fixed !important;
    inset:0 !important;
    z-index:99990 !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    margin:0 !important;
    border-radius:0 !important;
    aspect-ratio:auto !important;
    background:#000 !important;
  }

  .video-frame--mobile-fullscreen .video-frame__stage{
    position:absolute;
    inset:0;
  }

  .video-frame--landscape.video-frame--mobile-fullscreen{
    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    width:100dvh !important;
    height:100vw !important;
    max-height:100vw !important;
    transform:translate(-50%, -50%) rotate(90deg);
    transform-origin:center center;
  }

  html.edu-video-fs-active,
  body.edu-video-fs-active{
    overflow:hidden !important;
    overscroll-behavior:none;
    touch-action:none;
  }

  .course-learning-page--video-fs > :not(.course-player-card){
    visibility:hidden;
  }

  .course-learning-page--video-fs .course-player-card{
    margin:0;
    border-radius:0;
    box-shadow:none;
    background:transparent;
  }

  .course-learning-page--video-fs .course-player-card__status,
  .course-learning-page--video-fs .course-meta--pro{
    display:none;
  }

  .course-learning-page--video-fs .video-frame{
    margin:0;
    border-radius:0;
  }

}

@media(max-width:520px){
  .edu-video-shell{
    margin:12px 12px 0;
  }

  .edu-video-toolbar{
    padding:12px;
  }

  .edu-video-toolbar__actions{
    gap:6px;
  }

  .edu-vtool{
    flex:1 1 calc(50% - 6px);
    justify-content:center;
    min-width:0;
    padding:0 10px;
  }

  .edu-vtool--primary{
    flex:1 1 100%;
  }

  .edu-video-player__overlay-play{
    width:68px;
    height:68px;
    font-size:48px;
  }
}

.video-empty-note{
  max-width:min(92%, 320px);
  text-align:center;
  font-size:12px;
  font-weight:600;
  line-height:1.55;
  opacity:.92;
}

.video-external-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:4px;
  padding:12px 20px;
  border-radius:999px;
  background:#fff;
  color:var(--brand);
  font-weight:900;
  font-size:14px;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.video-external-btn:hover{
  transform:translateY(-1px);
}

.video-frame--external .course-play-label{
  font-size:42px;
}

.course-current-lesson{
  margin:0 0 8px;
  font-weight:800;
  color:var(--brand);
  font-size:14px;
}

.video-frame::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
}

.video-frame::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  left:-55px;
  top:-55px;
}

.video-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  gap:12px;
  z-index:2;
}

.play-btn{
  width:74px;
  height:74px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:var(--brand);
  font-size:28px;
  box-shadow:0 18px 42px rgba(0,0,0,.22);
  cursor:pointer;
}

.video-overlay span{
  font-weight:900;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:8px 14px;
  backdrop-filter:blur(10px);
}

.course-meta{
  padding:20px;
}

.course-badge{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:var(--soft-2);
  color:var(--brand);
  font-weight:900;
  font-size:12px;
  margin-bottom:10px;
}

.course-meta h1{
  margin:0;
  font-size:23px;
  line-height:1.4;
  font-weight:900;
}

.course-meta p{
  margin:9px 0 16px;
  color:var(--muted);
  line-height:1.8;
  font-weight:600;
}

.course-stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}

.course-stats-row div{
  text-align:center;
  background:linear-gradient(180deg,#fff,#faf7ff);
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px 8px;
}

.course-stats-row strong{
  display:block;
  color:var(--brand);
  font-size:18px;
  font-weight:900;
}

.course-stats-row small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-weight:700;
}

.course-tabs{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  gap:8px;
  overflow:auto;
  padding:10px 0 12px;
  background:linear-gradient(180deg,#F3F2EF 70%,rgba(251,248,255,.75));
  backdrop-filter:blur(10px);
}

.course-tabs::-webkit-scrollbar{
  display:none;
}

.course-tabs button{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:11px 17px;
  font-family:inherit;
  font-weight:900;
  box-shadow:0 10px 24px rgba(11,20,38,.06);
  cursor:pointer;
}

.course-tabs button.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:transparent;
}

.tab-panel{
  display:none;
  animation:fadeUp .22s ease both;
}

.tab-panel.active{
  display:block;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.lesson-item{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:13px;
  margin-bottom:10px;
  box-shadow:0 14px 34px rgba(11,20,38,.06);
}

.lesson-item.current{
  border-color:#d5bfff;
  background:linear-gradient(180deg,#fff,#faf6ff);
}

.lesson-item.done{
  opacity:.82;
}

.lesson-item--exam{
  border-color:#D8DEE8;
  background:linear-gradient(180deg,#fff,#fdf8ff);
}

.lesson-item--exam .lesson-status{
  background:rgba(11,20,38,.1);
}

.lesson-status{
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft-2);
  color:var(--brand);
  font-weight:900;
  flex:0 0 42px;
}

.lesson-item.done .lesson-status{
  background:rgba(22,163,74,.12);
  color:var(--success);
}

.lesson-content{
  flex:1;
  min-width:0;
}

.lesson-content strong{
  display:block;
  font-size:15px;
  font-weight:900;
  line-height:1.5;
}

.lesson-content small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-weight:700;
}

.lesson-action{
  border:0;
  background:var(--soft-2);
  color:var(--brand);
  border-radius:14px;
  padding:10px 12px;
  font-family:inherit;
  font-weight:900;
}

.complete-lesson-btn{
  width:100%;
  height:58px;
  border:0;
  border-radius:21px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  font-family:inherit;
  font-size:16px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(11,20,38,.20);
  margin:8px 0 18px;
}

.complete-lesson-btn--locked,
.complete-lesson-btn:disabled,
.complete-lesson-btn[aria-disabled="true"]:not(.is-done){
  background:linear-gradient(135deg,#cbd5e1,#94a3b8);
  box-shadow:none;
  cursor:not-allowed;
  opacity:.92;
}

.complete-lesson-btn.is-done:disabled{
  background:linear-gradient(135deg,#16a34a,#22c55e);
  opacity:1;
  cursor:default;
}

.course-watch-hint{
  margin:-8px 0 18px;
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  line-height:1.6;
}

.course-attach-block{
  margin-bottom:6px;
}

.course-attach-block .edu-section-head{
  margin-bottom:12px;
}

.lesson-item--attach{
  text-decoration:none;
  color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.lesson-item--attach:hover{
  border-color:#d5bfff;
  box-shadow:0 16px 36px rgba(11,20,38,.1);
  transform:translateY(-1px);
}

.lesson-item--attach .lesson-status{
  font-size:17px;
}

.lesson-attach-go{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--soft-2);
  color:var(--brand);
  font-size:14px;
}

.lesson-item--attach:hover .lesson-attach-go{
  background:linear-gradient(135deg,#0B1426,#152238);
  color:#fff;
}

.course-attach-empty{
  margin:0 0 12px;
  padding:16px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  line-height:1.65;
  text-align:center;
  box-shadow:0 10px 28px rgba(11,20,38,.05);
}

.course-exam-cta{
  margin:0 0 16px;
  padding:18px 16px;
  border-radius:22px;
  background:linear-gradient(135deg,#F3F2EF 0%,#fff 55%,#F3F2EF 100%);
  border:1px solid rgba(196,181,253,.55);
  box-shadow:0 14px 36px rgba(11,20,38,.08);
}

.course-exam-cta__icon{
  font-size:28px;
  line-height:1;
  margin-bottom:8px;
}

.course-exam-cta__badge{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--brand);
  margin-bottom:6px;
}

.course-exam-cta__body h2{
  margin:0 0 6px;
  font-size:18px;
  font-weight:900;
  color:var(--brand-dark);
}

.course-exam-cta__body p{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.65;
  font-weight:600;
  color:var(--muted);
}

.course-exam-cta__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.course-exam-cta__meta span{
  font-size:11px;
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(11,20,38,.08);
  color:var(--brand-dark);
}

.course-exam-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.course-exam-cta__actions .edu-btn{
  flex:1 1 140px;
}

.assignment-box .edu-btn{
  width:100%;
  margin-top:12px;
}

.upload-drop{
  min-height:124px;
  border:1.5px dashed #d8c2ff;
  background:#F3F2EF;
  border-radius:24px;
  margin:14px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--brand);
  text-align:center;
}

.upload-drop span{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:0 10px 22px rgba(11,20,38,.08);
  font-weight:900;
}

.upload-drop strong{
  font-weight:900;
}

.upload-drop small{
  color:var(--muted);
  font-weight:700;
}

.file-row{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
  margin-bottom:10px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 12px 28px rgba(11,20,38,.06);
}

.file-row span{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft-2);
  color:var(--brand);
  font-weight:900;
  font-size:13px;
}

.file-row strong{
  flex:1;
  font-weight:900;
}

.file-row small{
  color:var(--brand);
  font-weight:900;
}

@media(max-width:410px){
  .course-meta h1{
    font-size:20px;
  }
  .lesson-action{
    display:none;
  }
}


/* ===== Notifications + Profile System ===== */
.edu-icon-btn.has-badge{
  position:relative;
}
.edu-icon-btn.has-badge em,
.nav-badge{
  position:absolute;
  min-width:18px;
  height:18px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-size:11px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(239,68,68,.25);
}
.edu-icon-btn.has-badge em{
  top:-4px;
  left:-4px;
}
.edu-bottom-nav a .nav-badge{
  top:2px;
  right:calc(50% - 22px);
  left:auto;
  transform:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  min-width:18px;
  padding:0;
  font-size:10px;
  line-height:1;
  border-radius:50%;
  background:#22c55e;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(34,197,94,.35);
}

.notification-hero{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.25),transparent 26%),
    linear-gradient(135deg,#070D18 0%,#0B1426 48%,#1A2942 100%);
}

.notification-filter{
  display:flex;
  gap:9px;
  overflow:auto;
  padding:2px 0 12px;
}
.notification-filter::-webkit-scrollbar{display:none}
.notification-filter button{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:999px;
  padding:10px 15px;
  font-family:inherit;
  font-weight:900;
  box-shadow:0 10px 24px rgba(11,20,38,.06);
}
.notification-filter button.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:transparent;
}

.notification-item{
  display:flex;
  gap:13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:25px;
  padding:15px;
  margin-bottom:11px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
  position:relative;
}
.notification-item.unread{
  border-color:#d6bfff;
  background:linear-gradient(180deg,#fff,#F3F2EF);
}
.notification-item.unread::after{
  content:"";
  position:absolute;
  top:17px;
  left:17px;
  width:9px;
  height:9px;
  background:#ef4444;
  border-radius:50%;
}
.notification-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 48px;
  background:linear-gradient(145deg,#fff,#f1e8ff);
  color:var(--brand);
  border:1px solid rgba(11,20,38,.09);
  box-shadow:0 10px 22px rgba(11,20,38,.08);
  font-weight:900;
  font-size:20px;
}
.notification-content{
  flex:1;
  min-width:0;
}
.notification-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.notification-title-row strong{
  font-weight:900;
  font-size:16px;
}
.notification-title-row small{
  color:var(--brand);
  font-weight:800;
  white-space:nowrap;
}
.notification-content p{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.7;
  font-weight:600;
}

/* —— صفحات إشعارات الأدوار (موحّدة) —— */
.app-notif-hero-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}
.app-notif-hero-actions.edu-hero-actions--single{
  grid-template-columns:1fr;
}
.app-notif-page .student-hero .edu-btn,
.app-notif-page .trainer-hero .edu-btn,
.app-notif-page .parent-hero .edu-btn,
.app-notif-page .child-hero .edu-btn{
  min-height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  padding:10px 14px;
  font-weight:800;
  text-decoration:none;
}
.app-notif-home-btn svg{flex-shrink:0;opacity:.95}
.app-notif-panel{padding:16px 14px 10px}
.app-notif-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.app-notif-panel__head h2{margin:0;font-size:15px;font-weight:900}
.app-notif-unread-pill{
  font-size:11px;
  font-weight:800;
  padding:5px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#F3F2EF,#F3F2EF);
  color:var(--brand);
  border:1px solid #E0E0E0;
  white-space:nowrap;
}
.app-notif-list{display:flex;flex-direction:column;gap:8px}
.app-notif-item{
  display:flex;
  align-items:stretch;
  gap:8px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.app-notif-item.is-unread{
  border-color:#C7C7C7;
  background:linear-gradient(180deg,#F3F2EF 0%,#fff 100%);
  box-shadow:0 8px 22px rgba(11,20,38,.08);
}
.app-notif-item__main{
  flex:1;
  min-width:0;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 10px 12px 12px;
  text-decoration:none;
  color:inherit;
}
.app-notif-item__main:active{opacity:.92}
.app-notif-item__icon{
  width:44px;
  height:44px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#F3F2EF,#F3F2EF);
  font-size:20px;
  line-height:1;
}
.app-notif-item.is-unread .app-notif-item__icon{
  background:linear-gradient(145deg,#F3F2EF,#E0E0E0);
  box-shadow:inset 0 0 0 1px rgba(11,20,38,.12);
}
.app-notif-item__content{flex:1;min-width:0}
.app-notif-item__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.app-notif-item__title{font-size:14px;line-height:1.35;font-weight:800}
.app-notif-item__time{
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap;
}
.app-notif-item__body{
  margin:0;
  font-size:12px;
  line-height:1.55;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.app-notif-item__read{
  align-self:center;
  flex-shrink:0;
  margin-inline-end:8px;
  padding:8px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  color:var(--brand);
  background:#fff;
  border:1px solid #E0E0E0;
  box-shadow:0 4px 12px rgba(11,20,38,.08);
}
.app-notif-item__read:active{transform:scale(.96);background:#F3F2EF}
.app-notif-empty{text-align:center;padding:28px 12px;color:var(--muted)}
.app-notif-empty__icon{display:block;font-size:32px;margin-bottom:8px;opacity:.85}
.app-notif-empty p{margin:0;font-size:14px}
.edu-parent-mode .app-notif-item.is-unread{
  border-color:#cbd5e1;
  background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);
  box-shadow:0 8px 22px rgba(13,27,62,.08);
}
.edu-parent-mode .app-notif-item.is-unread .app-notif-item__icon{
  background:linear-gradient(145deg,#f1f5f9,#cbd5e1);
}
.edu-parent-mode .app-notif-unread-pill{
  background:linear-gradient(135deg,#f1f5f9,#f8fafc);
  color:#0B1426;
  border-color:#cbd5e1;
}
.edu-parent-mode .app-notif-item__read{color:#0B1426;border-color:#cbd5e1}
.edu-child-mode .app-notif-item.is-unread{
  border-color:#fde68a;
  background:linear-gradient(180deg,#fffbeb 0%,#fff 100%);
  box-shadow:0 8px 22px rgba(245,158,11,.1);
}
.edu-child-mode .app-notif-item.is-unread .app-notif-item__icon{
  background:linear-gradient(145deg,#fef3c7,#fde68a);
}
.edu-child-mode .app-notif-unread-pill{
  background:linear-gradient(135deg,#fef3c7,#fffbeb);
  color:#b45309;
  border-color:#fde68a;
}

.profile-card{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow:0 24px 60px rgba(11,20,38,.12);
  margin-bottom:18px;
}
.profile-cover{
  position:relative;
  height:120px;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.25),transparent 26%),
    linear-gradient(135deg,#070D18,#0B1426 50%,#1A2942);
  background-size:cover;
  background-position:center;
}
.profile-cover--image{
  background-color:#070D18;
}
.profile-cover__edit{
  position:absolute;
  top:12px;
  left:12px;
  width:38px;
  height:38px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:rgba(15,10,30,.45);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.edu-profile-photos{
  display:grid;
  gap:22px;
}
.edu-profile-photos__block h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
}
.edu-cover-preview{
  height:132px;
  border-radius:22px;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.92);
  font-weight:800;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.22),transparent 26%),
    linear-gradient(135deg,#070D18,#0B1426 50%,#1A2942);
  background-size:cover;
  background-position:center;
  border:1px solid var(--line);
  overflow:hidden;
}
.edu-cover-preview.has-image{
  color:transparent;
}
.edu-cover-preview span{
  padding:0 16px;
  text-align:center;
  font-size:14px;
}
.profile-main{
  text-align:center;
  margin-top:-48px;
  padding:0 18px 18px;
}
.profile-avatar{
  width:96px;
  height:96px;
  border-radius:32px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  font-weight:900;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border:5px solid #fff;
  box-shadow:0 18px 38px rgba(11,20,38,.22);
}
.profile-main h1{
  margin:0;
  font-size:24px;
  font-weight:900;
}
.profile-main p{
  margin:7px 0 0;
  color:var(--muted);
  font-weight:700;
}
.profile-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:0 16px 18px;
}
.profile-stats div{
  text-align:center;
  background:#F3F2EF;
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px 8px;
}
.profile-stats strong{
  display:block;
  color:var(--brand);
  font-size:20px;
  font-weight:900;
}
.profile-stats small{
  display:block;
  color:var(--muted);
  margin-top:2px;
  font-weight:700;
}

/* Profile card v2 — polished account header */
.profile-card--v2{
  border-radius:24px;
  box-shadow:0 16px 40px rgba(11,20,38,.08);
  border-color:#D8DEE8;
}
.profile-cover--v2{
  height:128px;
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.22), transparent 38%),
    linear-gradient(135deg,#0B1426 0%,#0B1426 48%,#152238 100%);
  background-size:cover;
  background-position:center top;
}
.profile-cover--v2 .profile-cover__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,10,30,.08) 0%, rgba(53,16,100,.55) 62%, rgba(255,255,255,.98) 100%);
  pointer-events:none;
}
.profile-card--has-cover .profile-cover--v2 .profile-cover__shade{
  background:linear-gradient(180deg, rgba(15,10,30,.12) 0%, rgba(53,16,100,.62) 55%, rgba(255,255,255,.98) 100%);
}
.profile-card--v2 .profile-cover__edit{
  top:auto;
  bottom:14px;
  left:auto;
  right:auto;
  inset-inline-end:14px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--brand);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 20px rgba(53,16,100,.18);
  z-index:2;
}
.profile-body{
  padding:0 16px 16px;
  margin-top:-52px;
  position:relative;
  z-index:1;
}
.profile-hero-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  padding-bottom:14px;
}
.profile-avatar-shell{
  padding:4px;
  border-radius:50%;
  background:linear-gradient(145deg,#fff,#f3ecff);
  box-shadow:0 14px 32px rgba(11,20,38,.16);
}
.profile-card--v2 .profile-avatar{
  width:92px;
  height:92px;
  margin:0;
  border-radius:50%;
  border:3px solid #fff;
  box-shadow:none;
  overflow:hidden;
}
.profile-card--v2 .profile-avatar--image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-identity{
  width:100%;
  max-width:360px;
}
.profile-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}
.profile-name-row h1{
  margin:0;
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.2px;
  color:var(--ink);
}
.profile-meta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:12px;
}
.profile-meta-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:999px;
  background:#F3F2EF;
  border:1px solid #D8DEE8;
  color:var(--brand);
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}
.profile-meta-pill--plan{
  background:#fff;
  color:var(--muted);
  border-color:var(--line);
}
.profile-trusted-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 6px 16px rgba(37,99,235,.22);
  white-space:nowrap;
}
.profile-trusted-badge i{
  font-size:11px;
}
.profile-trust-track{
  margin:0 auto;
  max-width:340px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,#F3F2EF,#fff);
  border:1px solid #D8DEE8;
  text-align:start;
}
.profile-trust-track__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:800;
  color:var(--brand);
}
.profile-trust-track__head i{
  margin-inline-end:4px;
  opacity:.85;
}
.profile-trust-track__head strong{
  font-size:13px;
  color:var(--ink);
}
.profile-trust-track__bar{
  height:8px;
  border-radius:999px;
  background:#F3F2EF;
  overflow:hidden;
}
.profile-trust-track__bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#3b82f6);
  transition:width .35s ease;
}
.profile-trust-track__hint{
  margin:8px 0 0;
  font-size:11px;
  font-weight:700;
  line-height:1.45;
  color:var(--muted);
}
.profile-trusted-benefit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0 auto;
  padding:8px 12px;
  border-radius:999px;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1e40af;
  font-size:11px;
  font-weight:800;
}
.profile-stats--v2{
  display:flex;
  gap:0;
  padding:0;
  margin:0;
  background:#faf7ff;
  border:1px solid #D8DEE8;
  border-radius:18px;
  overflow:hidden;
}
.profile-stats--v2 .profile-stat{
  flex:1;
  text-align:center;
  background:transparent;
  border:none;
  border-radius:0;
  padding:14px 6px 12px;
  position:relative;
}
.profile-stats--v2 .profile-stat + .profile-stat::before{
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:18%;
  height:64%;
  width:1px;
  background:#D8DEE8;
}
.profile-stats--v2 .profile-stat i{
  display:block;
  margin:0 auto 6px;
  font-size:14px;
  color:#1A2942;
}
.profile-stats--v2 .profile-stat strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  color:var(--brand);
}
.profile-stats--v2 .profile-stat small{
  display:block;
  margin-top:3px;
  font-size:10px;
  color:var(--muted);
}

.profile-menu{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-bottom:8px;
}
.profile-menu-group-title{
  margin:0 16px 10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.profile-menu-group--session .profile-menu-group-title{
  color:#b42318;
}
.settings-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 16px;
}
.settings-list a{
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:14px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 14px 34px rgba(11,20,38,.06);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.settings-list a:active{
  transform:scale(.99);
}
.settings-list a.is-danger{
  border-color:#fecaca;
  background:#fffafa;
}
.settings-list a.is-danger span{
  background:#fee2e2;
  color:#b42318;
}
.settings-list a.is-danger .edu-app-icon--menu{
  background:#fee2e2;
  color:#b42318;
}
.settings-list a.is-danger strong{
  color:#b42318;
}
.settings-list span{
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1e8ff;
  color:var(--brand);
  font-weight:900;
}
.settings-list .edu-app-icon--menu{
  flex-shrink:0;
  width:46px;
  height:46px;
  border-radius:17px;
  background:#f1e8ff;
  color:#0B1426;
}
.settings-list a.is-danger .edu-app-icon--menu{
  background:#fee2e2;
  color:#b42318;
}
.settings-list-text{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.settings-list strong{
  font-weight:900;
  font-size:15px;
  line-height:1.25;
}
.settings-list small{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  line-height:1.35;
}
.achievement-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.achievement-grid div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow:0 14px 34px rgba(11,20,38,.06);
}
.achievement-grid span{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}
.achievement-grid .edu-app-icon{
  box-shadow:0 8px 18px rgba(11,20,38,.08);
}
.achievement-grid strong{
  display:block;
  font-weight:900;
}
.achievement-grid small{
  display:block;
  color:var(--muted);
  margin-top:5px;
  line-height:1.6;
}


/* ===== Quiz + Certificate System ===== */
.hidden{display:none!important}

.quiz-header-card{
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.25),transparent 28%),
    linear-gradient(135deg,#070D18,#0B1426 48%,#1A2942);
  color:#fff;
  border-radius:34px;
  padding:22px;
  box-shadow:0 26px 66px rgba(11,20,38,.25);
  margin-bottom:16px;
}

.quiz-top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.quiz-top-row span{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:900;
  margin-bottom:10px;
}

.quiz-top-row h1{
  margin:0;
  font-size:24px;
  font-weight:900;
  line-height:1.35;
}

.quiz-top-row p{
  margin:9px 0 0;
  color:rgba(255,255,255,.86);
  line-height:1.8;
}

.quiz-timer{
  min-width:78px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  font-weight:900;
  font-size:18px;
}

.quiz-progress-line{
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  overflow:hidden;
  margin-top:18px;
}

.quiz-progress-line b{
  display:block;
  height:100%;
  background:#fff;
  border-radius:999px;
  transition:.25s ease;
}

.quiz-meta-row{
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.86);
  margin-top:9px;
  font-weight:800;
}

.quiz-question{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:20px;
  box-shadow:0 18px 45px rgba(11,20,38,.09);
  animation:fadeUp .22s ease both;
}

.quiz-question.active{
  display:block;
}

.question-count{
  display:inline-flex;
  color:var(--brand);
  background:var(--soft-2);
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  margin-bottom:12px;
}

.quiz-question h2{
  margin:0 0 16px;
  font-size:21px;
  line-height:1.5;
  font-weight:900;
}

.quiz-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.quiz-option{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 24px rgba(11,20,38,.04);
  cursor:pointer;
  font-weight:800;
}

.quiz-option input{
  width:20px;
  height:20px;
  accent-color:var(--brand);
}

.quiz-option:has(input:checked){
  border-color:#c9adff;
  background:#F3F2EF;
}

.quiz-explain{
  display:none;
  color:var(--muted);
  background:#F3F2EF;
  border:1px solid var(--line);
  padding:12px;
  border-radius:18px;
  line-height:1.8;
  margin:14px 0 0;
}

.quiz-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

.quiz-actions .edu-btn{
  width:100%;
}

.quiz-result{
  display:none;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:34px;
  padding:28px 20px;
  box-shadow:0 24px 60px rgba(11,20,38,.12);
  margin-top:16px;
}

.quiz-result.show{
  display:block;
}

.result-icon{
  width:90px;
  height:90px;
  margin:0 auto 16px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  font-size:42px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(22,163,74,.2);
}

.result-icon.fail{
  background:linear-gradient(135deg,#dc2626,#f97316);
  box-shadow:0 18px 40px rgba(220,38,38,.2);
}

.quiz-result h2{
  margin:0 0 8px;
  font-size:24px;
  font-weight:900;
}

.quiz-result p{
  margin:0;
  color:var(--muted);
  line-height:1.8;
}

.result-score{
  margin:18px auto;
  width:140px;
  height:140px;
  border-radius:44px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#F3F2EF;
  border:1px solid var(--line);
}

.result-score strong{
  color:var(--brand);
  font-size:34px;
  font-weight:900;
}

.result-score small{
  color:var(--muted);
  font-weight:800;
}

.result-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.certificate-card{
  background:#fff;
  border:1px solid #e7d9ff;
  border-radius:34px;
  padding:24px;
  box-shadow:0 26px 70px rgba(11,20,38,.14);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.certificate-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid #dbc6ff;
  border-radius:26px;
  pointer-events:none;
}

.cert-top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--brand);
  font-weight:900;
  font-size:12px;
}

.cert-seal{
  width:92px;
  height:92px;
  border-radius:50%;
  margin:22px auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  font-size:27px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(11,20,38,.22);
}

.certificate-card h1{
  margin:0;
  font-size:30px;
  color:var(--brand);
  font-weight:900;
}

.certificate-card h2{
  margin:10px 0;
  font-size:28px;
  font-weight:900;
}

.certificate-card h3{
  margin:10px 0 20px;
  font-size:20px;
  line-height:1.5;
}

.certificate-card p{
  margin:8px 0;
  color:var(--muted);
  font-weight:700;
}

.cert-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:24px;
  text-align:right;
}

.cert-footer small{
  display:block;
  color:var(--muted);
  font-weight:800;
}

.cert-footer strong{
  display:block;
  color:var(--ink);
  font-weight:900;
  margin-top:4px;
}

.qr-box{
  width:72px;
  height:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(90deg,#111 10%,transparent 10% 20%,#111 20% 30%,transparent 30% 40%,#111 40% 50%,transparent 50% 60%,#111 60% 70%,transparent 70% 80%,#111 80%),
    #fff;
  border:1px solid var(--line);
  color:#fff;
  font-size:0;
}

.certificate-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}

@media print{
  body{background:#fff;padding:0}
  .edu-bottom-nav,.certificate-actions{display:none!important}
  .edu-app{max-width:100%;padding:0}
  .certificate-card{box-shadow:none;border:2px solid #0B1426;border-radius:0;min-height:90vh}
}

@media(max-width:410px){
  .quiz-top-row{flex-direction:column}
  .quiz-timer{width:100%}
  .result-actions,.certificate-actions{grid-template-columns:1fr}
}


/* ===== Premium A4 Certificate Design ===== */
.certificate-screen{
  width:100%;
  min-height:100vh;
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(11,20,38,.12), transparent 35%),
    linear-gradient(180deg,#ffffff 0%,#F3F2EF 100%);
  font-family:'Tajawal',Tahoma,Arial,sans-serif;
  color:#121826;
}

.certificate-toolbar{
  width:min(100%,1120px);
  margin:0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:#fff;
  border:1px solid #D8DEE8;
  border-radius:22px;
  padding:12px 14px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
}

.certificate-toolbar div{
  flex:1;
  text-align:center;
}

.certificate-toolbar strong{
  display:block;
  font-weight:900;
  color:#24123a;
}

.certificate-toolbar small{
  display:block;
  color:#7b708a;
  font-weight:700;
  margin-top:3px;
}

.certificate-toolbar button,
.toolbar-link{
  min-height:44px;
  border-radius:15px;
  border:0;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#0B1426,#1A2942);
  color:#fff;
  text-decoration:none;
  font-family:inherit;
  font-weight:900;
  cursor:pointer;
}

.toolbar-link{
  background:#f3ecff;
  color:#0B1426;
}

.premium-certificate-a4{
  width:1122px;
  min-height:793px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:245px 1fr;
  background:
    radial-gradient(circle at 75% 18%, rgba(11,20,38,.055), transparent 28%),
    linear-gradient(135deg,#fffdf8 0%,#ffffff 54%,#fbf7ff 100%);
  border-radius:18px;
  box-shadow:
    0 36px 90px rgba(21,12,42,.18),
    0 0 0 1px rgba(11,20,38,.08);
}

.cert-bg-pattern{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(11,20,38,.025) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 92% 88%, rgba(11,20,38,.06), transparent 18%);
  pointer-events:none;
}

.cert-gold-frame{
  position:absolute;
  inset:22px;
  border:2px solid #b88a3b;
  pointer-events:none;
  z-index:3;
}

.cert-gold-frame::before,
.cert-gold-frame::after{
  content:"";
  position:absolute;
  width:82px;
  height:82px;
  border:2px solid #b88a3b;
}

.cert-gold-frame::before{
  top:-12px;
  right:-12px;
  border-left:0;
  border-bottom:0;
}

.cert-gold-frame::after{
  bottom:-12px;
  left:-12px;
  border-right:0;
  border-top:0;
}

.cert-side-ribbon{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg,#230f3d 0%,#3a1268 48%,#0B1426 100%);
  color:#fff;
  padding:52px 26px 38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  border-left:5px solid #b88a3b;
}

.cert-side-ribbon::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:70px solid transparent;
  border-right:70px solid transparent;
  border-top:70px solid #0B1426;
}

.ribbon-logo{
  text-align:center;
}

.ribbon-emblem{
  width:96px;
  height:96px;
  border-radius:30px;
  margin:0 auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  font-size:27px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px rgba(0,0,0,.18);
}

.ribbon-logo h2{
  margin:0;
  font-size:46px;
  letter-spacing:3px;
  font-family:Georgia,serif;
}

.ribbon-logo p{
  margin:8px 0 0;
  letter-spacing:4px;
  font-size:13px;
  line-height:1.8;
  color:rgba(255,255,255,.82);
}

.ribbon-medal{
  width:150px;
  height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle,#2c1648 0 49%, transparent 50%),
    repeating-conic-gradient(from 0deg,#d6a84f 0 10deg,#b8842d 10deg 20deg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
  color:#fff;
}

.ribbon-medal span{
  color:#f4d38a;
  font-size:26px;
}

.ribbon-medal strong{
  margin-top:6px;
  font-size:14px;
  letter-spacing:1px;
}

.ribbon-medal small{
  color:#f4d38a;
  font-size:10px;
  font-weight:800;
}

.ribbon-verify{
  text-align:center;
  position:relative;
  z-index:4;
}

.qr-sim{
  width:94px;
  height:94px;
  margin:0 auto 12px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  padding:8px;
  background:#fff;
  border-radius:12px;
}

.qr-sim i{
  display:block;
  background:#24123a;
  border-radius:3px;
}

.ribbon-verify strong{
  display:block;
  font-size:12px;
  letter-spacing:1px;
}

.ribbon-verify small{
  display:block;
  color:rgba(255,255,255,.75);
  margin-top:5px;
  font-size:10px;
  word-break:break-word;
}

.cert-main-content{
  position:relative;
  z-index:2;
  padding:58px 62px 44px;
  text-align:center;
}

.cert-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  color:#24123a;
  margin-bottom:32px;
}

.cert-header div{
  text-align:left;
}

.cert-header div:first-child{
  text-align:right;
}

.cert-header small{
  display:block;
  color:#666666;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
}

.cert-header strong{
  display:block;
  margin-top:5px;
  color:#24123a;
  font-weight:900;
  font-size:14px;
}

.cert-title-block span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#b88a3b;
  font-weight:900;
  letter-spacing:3px;
  font-size:18px;
  margin-bottom:2px;
}

.cert-title-block h1{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  font-size:70px;
  line-height:1;
  color:#24123a;
  letter-spacing:5px;
  font-weight:500;
}

.cert-title-block h3{
  margin:8px 0 0;
  color:#b88a3b;
  letter-spacing:8px;
  font-size:24px;
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500;
}

.cert-recipient{
  max-width:690px;
  margin:34px auto 0;
}

.cert-recipient p{
  margin:10px 0;
  color:#5f566d;
  font-size:16px;
  font-weight:700;
}

.cert-recipient h2{
  margin:12px 0;
  font-family:Georgia,'Times New Roman',serif;
  color:#24123a;
  font-size:54px;
  font-weight:500;
  border-bottom:2px solid #d2a04f;
  display:inline-block;
  padding:0 32px 10px;
}

.cert-recipient h4{
  margin:14px 0 8px;
  color:#0B1426;
  font-size:30px;
  line-height:1.35;
  font-weight:900;
}

.cert-description{
  max-width:590px;
  margin:12px auto 0 !important;
  line-height:1.8;
  font-size:14px !important;
}

.cert-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:34px auto 32px;
  max-width:650px;
}

.cert-metrics div{
  border:1px solid #D8DEE8;
  border-radius:18px;
  padding:14px 10px;
  background:rgba(255,255,255,.72);
}

.cert-metrics span{
  display:block;
  color:#b88a3b;
  font-size:25px;
  margin-bottom:6px;
  font-weight:900;
}

.cert-metrics small{
  display:block;
  color:#666666;
  font-weight:900;
  font-size:12px;
}

.cert-metrics strong{
  display:block;
  margin-top:4px;
  color:#24123a;
  font-weight:900;
  font-size:17px;
}

.cert-signatures{
  display:grid;
  grid-template-columns:1fr 140px 1fr;
  gap:28px;
  align-items:end;
  margin-top:28px;
}

.signature{
  text-align:center;
}

.signature span{
  display:block;
  height:44px;
  border-bottom:2px solid #24123a;
  margin-bottom:8px;
  position:relative;
}

.signature span::before{
  content:"Signature";
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%) rotate(-8deg);
  font-family:Georgia,serif;
  font-size:25px;
  color:#24123a;
  opacity:.85;
}

.signature strong{
  display:block;
  color:#24123a;
  font-weight:900;
  font-size:13px;
}

.signature small{
  display:block;
  color:#666666;
  font-weight:700;
  font-size:11px;
  margin-top:4px;
}

.center-seal{
  width:120px;
  height:120px;
  border-radius:50%;
  margin:0 auto;
  border:4px double #b88a3b;
  color:#b88a3b;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fffaf0;
}

.center-seal b{
  font-size:28px;
  font-weight:900;
}

.center-seal small{
  font-weight:900;
  font-size:12px;
  margin-top:4px;
}

.cert-footer-note{
  margin-top:20px;
  color:#666666;
  font-size:12px;
  font-weight:700;
  line-height:1.6;
}

.cert-footer-note p{
  margin:0 0 8px;
}

.cert-footer-note a{
  color:#0B1426;
  font-weight:900;
  text-decoration:none;
}

.certificate-actions{
  width:min(100%,1120px);
  margin:16px auto 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media(max-width:1180px){
  .premium-certificate-a4{
    width:100%;
    min-height:auto;
    grid-template-columns:1fr;
  }

  .cert-side-ribbon{
    display:none;
  }

  .cert-main-content{
    padding:42px 24px;
  }

  .cert-title-block h1{
    font-size:44px;
    letter-spacing:2px;
  }

  .cert-title-block h3{
    font-size:18px;
    letter-spacing:4px;
  }

  .cert-recipient h2{
    font-size:36px;
  }

  .cert-recipient h4{
    font-size:23px;
  }

  .cert-metrics,
  .cert-signatures{
    grid-template-columns:1fr;
  }

  .center-seal{
    order:-1;
  }

  .certificate-actions{
    grid-template-columns:1fr;
  }
}

@page{
  size:A4 landscape;
  margin:0;
}

@media print{
  html,body{
    width:297mm;
    height:210mm;
    margin:0 !important;
    padding:0 !important;
    background:#fff !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }

  body{
    padding-bottom:0 !important;
  }

  .no-print,
  .edu-lang-switch,
  .edu-bottom-nav,
  .certificate-toolbar,
  .certificate-actions{
    display:none !important;
  }

  .certificate-screen{
    width:297mm !important;
    height:210mm !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
    overflow:hidden !important;
  }

  .premium-certificate-a4{
    width:297mm !important;
    height:210mm !important;
    min-height:210mm !important;
    margin:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    grid-template-columns:64mm 1fr !important;
  }

  .cert-side-ribbon{
    display:flex !important;
    padding:13mm 7mm 9mm !important;
    border-left:1.4mm solid #b88a3b !important;
  }

  .cert-main-content{
    padding:12mm 16mm 9mm !important;
  }

  .cert-title-block h1{
    font-size:48pt !important;
  }

  .cert-title-block h3{
    font-size:18pt !important;
  }

  .cert-recipient{
    margin-top:10mm !important;
  }

  .cert-recipient h2{
    font-size:34pt !important;
  }

  .cert-recipient h4{
    font-size:22pt !important;
  }

  .cert-metrics{
    margin:8mm auto 7mm !important;
  }

  .cert-signatures{
    margin-top:6mm !important;
  }

  .cert-footer-note{
    margin-top:5mm !important;
  }
}


/* ===== Real Auth System UI ===== */
.auth-body{
  padding-bottom:0!important;
  min-height:100vh;
  background:
    radial-gradient(circle at top right, rgba(139,53,255,.18), transparent 35%),
    linear-gradient(180deg,#ffffff 0%,#F3F2EF 100%);
}

.auth-app-screen{
  width:100%;
  max-width:520px;
  min-height:100vh;
  margin:0 auto;
  padding:20px 16px 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}

.auth-brand-panel{
  position:relative;
  overflow:hidden;
  text-align:center;
  color:#fff;
  border-radius:34px;
  padding:28px 22px;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.25),transparent 27%),
    linear-gradient(135deg,#070D18 0%,#0B1426 50%,#1A2942 100%);
  box-shadow:0 24px 60px rgba(11,20,38,.24);
}

.auth-brand-panel::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  background:rgba(255,255,255,.11);
  left:-60px;
  top:-60px;
}

.auth-logo{
  width:84px;
  height:84px;
  margin:0 auto 14px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
  color:#fff;
  font-size:28px;
  font-weight:900;
  position:relative;
  z-index:2;
}

.auth-logo.small{
  background:linear-gradient(135deg,#0B1426,#1A2942);
  width:76px;
  height:76px;
}

.auth-brand-panel span{
  position:relative;
  z-index:2;
  display:inline-flex;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  padding:7px 14px;
  border-radius:999px;
  font-weight:900;
  color:#fff;
}

.auth-brand-panel h1{
  position:relative;
  z-index:2;
  margin:12px 0 8px;
  font-size:28px;
  font-weight:900;
}

.auth-brand-panel p{
  position:relative;
  z-index:2;
  margin:0;
  color:rgba(255,255,255,.88);
  line-height:1.8;
  font-weight:600;
}

.auth-card-modern{
  background:#fff;
  border:1px solid #D8DEE8;
  border-radius:32px;
  padding:20px;
  box-shadow:0 24px 60px rgba(11,20,38,.12);
}

.single-auth-card{
  text-align:center;
}

.auth-desc{
  color:#666666;
  line-height:1.8;
}

.auth-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  background:#f5efff;
  border:1px solid #D8DEE8;
  border-radius:22px;
  padding:6px;
  margin-bottom:16px;
}

.auth-switch a{
  min-height:48px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#24123a;
  text-decoration:none;
  font-weight:900;
}

.auth-switch a.active{
  background:linear-gradient(135deg,#0B1426,#1A2942);
  color:#fff;
  box-shadow:0 12px 28px rgba(11,20,38,.18);
}

.role-select-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:16px;
}

.role-select-grid a{
  display:block;
  text-decoration:none;
  color:#24123a;
  border:1px solid #D8DEE8;
  border-radius:20px;
  padding:13px 15px;
  background:#fff;
}

.role-select-grid a.active{
  border-color:#cbb2ff;
  background:#F3F2EF;
  box-shadow:0 10px 24px rgba(11,20,38,.06);
}

.role-select-grid strong{
  display:block;
  font-weight:900;
}

.role-select-grid small{
  display:block;
  color:#666666;
  margin-top:4px;
  line-height:1.6;
  font-weight:600;
}

.auth-form-modern label{
  display:block;
  font-weight:900;
  color:#24123a;
  margin:0 0 8px;
}

.auth-form-modern input:not([type="checkbox"]){
  width:100%;
  height:56px;
  border:1px solid #D8DEE8;
  border-radius:18px;
  padding:0 15px;
  margin-bottom:14px;
  font-family:inherit;
  outline:none;
  background:#fff;
}

.auth-form-modern input:focus{
  border-color:#0B1426;
  box-shadow:0 0 0 4px rgba(11,20,38,.08);
}

.remember-line{
  display:flex!important;
  align-items:center;
  gap:8px;
  color:#666666!important;
  font-weight:700!important;
  margin:2px 0 14px!important;
}

.remember-line input{
  accent-color:#0B1426;
}

.auth-submit-btn{
  width:100%;
  height:58px;
  border:0;
  border-radius:20px;
  background:linear-gradient(135deg,#0B1426,#1A2942);
  color:#fff;
  font-family:inherit;
  font-size:17px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(11,20,38,.20);
  cursor:pointer;
}

.auth-alert{
  border-radius:18px;
  padding:12px 14px;
  margin-bottom:14px;
  line-height:1.7;
  font-weight:800;
}

.auth-alert.error{
  background:#fff1f2;
  border:1px solid #fecdd3;
  color:#9f1239;
}

.auth-alert.success{
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  color:#166534;
}

.auth-footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:14px;
}

.auth-footer-links a{
  color:#0B1426;
  text-decoration:none;
  font-weight:900;
}

.demo-login-box{
  margin-top:16px;
  background:#F3F2EF;
  border:1px dashed #d8c2ff;
  border-radius:20px;
  padding:13px;
  text-align:center;
}

.demo-login-box strong{
  color:#0B1426;
  font-weight:900;
}

.demo-login-box p{
  margin:6px 0 0;
  color:#666666;
  line-height:1.7;
  font-weight:700;
}

@media(min-width:780px){
  .auth-app-screen{
    max-width:980px;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    align-items:center;
  }
  .auth-brand-panel{
    min-height:620px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
}


/* ===== Trainer Course Builder ===== */
.builder-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:16px 0;
}

.builder-stats div{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px 8px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
}

.builder-stats strong{
  display:block;
  color:var(--brand);
  font-size:23px;
  font-weight:900;
}

.builder-stats small{
  color:var(--muted);
  font-weight:800;
}

.builder-form .edu-btn,
.course-builder-edit .edu-form .edu-btn{
  width:100%;
}

.builder-course-card{
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:25px;
  padding:15px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:0 14px 34px rgba(11,20,38,.065);
  margin-bottom:11px;
}

.builder-course-icon{
  width:52px;
  height:52px;
  border-radius:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#fff,#f1e8ff);
  color:var(--brand);
  font-size:24px;
  font-weight:900;
  border:1px solid rgba(11,20,38,.08);
}

.builder-course-card div:nth-child(2){
  flex:1;
}

.builder-course-card strong{
  display:block;
  font-weight:900;
  font-size:16px;
}

.builder-course-card small{
  display:block;
  color:var(--muted);
  font-weight:700;
  margin-top:4px;
}

.builder-course-card span{
  color:var(--brand);
  font-weight:900;
}

.builder-tabs{
  margin-top:8px;
}

.edu-form select.edu-input{
  padding:0 14px;
  appearance:none;
  background:#fff;
}

.course-builder-edit .tab-panel{
  padding-top:4px;
}


/* ===== Subscription + Enrollment System ===== */
.subscription-status-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:18px;
  box-shadow:0 18px 45px rgba(11,20,38,.09);
  margin-bottom:18px;
}

.subscription-status-card span{
  color:var(--brand);
  font-weight:900;
  font-size:13px;
}

.subscription-status-card h2{
  margin:6px 0;
  font-size:22px;
  font-weight:900;
}

.subscription-status-card p{
  margin:0;
  color:var(--muted);
  font-weight:700;
}

.subscription-ring{
  width:76px;
  height:76px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  font-size:34px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(11,20,38,.20);
}

.plans-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.plan-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:20px;
  box-shadow:0 20px 50px rgba(11,20,38,.09);
}

.plan-card.featured{
  border-color:#cbb2ff;
  background:linear-gradient(180deg,#fff,#F3F2EF);
}

.plan-ribbon{
  position:absolute;
  top:16px;
  left:16px;
  background:linear-gradient(135deg,#b88a3b,#f4d38a);
  color:#24123a;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:900;
}

.plan-head span{
  color:var(--brand);
  background:var(--soft-2);
  display:inline-flex;
  border-radius:999px;
  padding:7px 12px;
  font-weight:900;
  font-size:12px;
}

.plan-head h3{
  margin:12px 0 8px;
  font-size:24px;
  font-weight:900;
}

.plan-price{
  display:flex;
  align-items:end;
  gap:7px;
}

.plan-price strong{
  color:var(--brand);
  font-size:34px;
  font-weight:900;
}

.plan-price small{
  color:var(--muted);
  font-weight:900;
  margin-bottom:7px;
}

.plan-card ul{
  margin:16px 0;
  padding:0;
  list-style:none;
}

.plan-card li{
  position:relative;
  padding:8px 28px 8px 0;
  color:var(--ink);
  font-weight:700;
}

.plan-card li::before{
  content:"✓";
  position:absolute;
  right:0;
  top:7px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ecfdf5;
  color:#16a34a;
  font-size:12px;
  font-weight:900;
}

.plan-form .edu-btn{
  width:100%;
}

.access-card{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:32px;
  padding:28px 20px;
  box-shadow:0 24px 60px rgba(11,20,38,.12);
}

.access-icon{
  width:92px;
  height:92px;
  margin:0 auto 18px;
  border-radius:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  font-size:42px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(11,20,38,.22);
}

.access-card h2{
  margin:0 0 8px;
  font-size:25px;
  font-weight:900;
}

.access-card p{
  margin:0 0 18px;
  color:var(--muted);
  line-height:1.8;
  font-weight:700;
}

.access-card__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.access-card--purchase{
  border-color:#D8DEE8;
  background:linear-gradient(135deg,#F3F2EF 0%,#fff 70%);
}
.access-card .edu-btn{
  width:100%;
}

.edu-course-card.is-locked{
  opacity:.82;
}

.edu-course-card.is-locked .course-icon{
  filter:grayscale(.2);
}

.edu-course-card.is-open{
  border-color:#cbb2ff;
}


/* ===== Media Upload + Learning Progress ===== */
.media-upload-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:18px;
  box-shadow:0 20px 50px rgba(11,20,38,.09);
}

.drop-zone{
  min-height:170px;
  border:2px dashed #d8c2ff;
  border-radius:26px;
  background:
    radial-gradient(circle at top right, rgba(139,53,255,.08), transparent 38%),
    linear-gradient(180deg,#fff,#F3F2EF);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
  cursor:pointer;
  padding:18px;
  margin-bottom:14px;
}

.drop-zone input{
  display:none;
}

.drop-zone span{
  width:64px;
  height:64px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  font-size:32px;
  font-weight:900;
  box-shadow:0 18px 40px rgba(11,20,38,.18);
}

.drop-zone strong{
  font-size:17px;
  font-weight:900;
}

.drop-zone small{
  color:var(--muted);
  font-weight:700;
}

.upload-progress{
  height:10px;
  background:#f0e8fb;
  border-radius:999px;
  overflow:hidden;
  margin:12px 0;
}

.upload-progress b{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:999px;
  transition:.25s ease;
}

.media-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.media-file-card{
  display:flex;
  gap:13px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:25px;
  padding:14px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
}

.media-thumb{
  width:62px;
  height:62px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 62px;
  color:var(--brand);
  background:linear-gradient(145deg,#fff,#f1e8ff);
  border:1px solid rgba(11,20,38,.08);
  font-weight:900;
}

.media-thumb.video{
  color:#fff;
  background:linear-gradient(135deg,#070D18,#1A2942);
}

.media-thumb.document{
  color:#b45309;
  background:#fff7ed;
}

.media-info{
  flex:1;
  min-width:0;
}

.media-info strong{
  display:block;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.media-info small{
  display:block;
  color:var(--muted);
  font-weight:700;
  margin:4px 0 8px;
}

.media-info input{
  width:100%;
  height:36px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0 10px;
  font-family:inherit;
  color:var(--brand);
  background:#F3F2EF;
}

.builder-inline-help{
  margin:4px 0 12px;
}

.builder-inline-help a{
  display:block;
  text-decoration:none;
  color:var(--brand);
  font-weight:900;
  background:#f3ecff;
  border-radius:16px;
  padding:12px;
  text-align:center;
}

.continue-learning-strip{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
  margin-bottom:12px;
}

.continue-learning-strip strong{
  color:var(--brand);
  font-weight:900;
}

.continue-learning-strip span{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
}

.lesson-item.saving{
  opacity:.7;
}

.lesson-item.just-completed{
  border-color:#bbf7d0;
  background:#f0fdf4;
}


/* ===== PWA Installable App Experience ===== */
.pwa-install-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:18px;
  background:
    radial-gradient(circle at top right, rgba(139,53,255,.10), transparent 35%),
    linear-gradient(180deg,#ffffff 0%,#F3F2EF 100%);
  border:1px solid var(--line);
  border-radius:26px;
  padding:16px;
  box-shadow:0 18px 45px rgba(11,20,38,.085);
}

.pwa-install-card span{
  color:var(--brand);
  font-size:12px;
  font-weight:900;
}

.pwa-install-card strong{
  display:block;
  font-weight:900;
  font-size:16px;
  margin-top:3px;
}

.pwa-install-card small{
  display:block;
  color:var(--muted);
  margin-top:4px;
  font-weight:700;
  line-height:1.6;
}

.pwa-install-card button{
  min-width:116px;
  min-height:46px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;
  font-family:inherit;
  font-weight:900;
  box-shadow:0 14px 30px rgba(11,20,38,.18);
}

.pwa-install-card button[hidden]{
  display:none;
}

@media(display-mode: standalone){
  .pwa-install-card{
    display:none!important;
  }
}


/* ===== Security + Analytics Dashboard ===== */
.analytics-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}

.analytics-grid div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:26px;
  padding:17px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
}

.analytics-grid span{
  width:46px;
  height:46px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1e8ff;
  color:var(--brand);
  font-weight:900;
  margin-bottom:12px;
}

.analytics-grid strong{
  display:block;
  color:var(--brand);
  font-size:26px;
  font-weight:900;
}

.analytics-grid small{
  color:var(--muted);
  font-weight:800;
}

.analytics-bars{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
}

.analytics-bar-row{
  margin-bottom:14px;
}

.analytics-bar-row:last-child{
  margin-bottom:0;
}

.analytics-bar-row div{
  display:flex;
  justify-content:space-between;
  margin-bottom:7px;
  font-weight:900;
}

.analytics-bar-row span{
  color:var(--brand);
}

.analytics-bar-row b{
  display:block;
  height:10px;
  width:100%;
  border-radius:999px;
  background:#f0e8fb;
  overflow:hidden;
  position:relative;
}

.analytics-bar-row b::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:999px;
}


/* ===== Global Platform Features Upgrade ===== */
.global-feature-grid .edu-card .icon,
.badge-grid span,
.path-icon,
.market-icon{
  background:linear-gradient(145deg,#fff,#f1e8ff);
  color:var(--brand);
  border:1px solid rgba(11,20,38,.08);
  box-shadow:0 12px 28px rgba(11,20,38,.08);
}

.path-card{
  display:flex;
  gap:15px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:18px;
  box-shadow:0 20px 50px rgba(11,20,38,.09);
  margin-bottom:14px;
}

.path-icon{
  width:70px;
  height:70px;
  border-radius:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  font-weight:900;
  flex:0 0 70px;
}

.path-content span{
  color:var(--brand);
  font-weight:900;
  font-size:12px;
}

.path-content h2{
  margin:6px 0;
  font-size:21px;
  font-weight:900;
}

.path-content p{
  color:var(--muted);
  line-height:1.7;
  font-weight:700;
  margin:0 0 12px;
}

.path-steps{
  height:10px;
  background:#f0e8fb;
  border-radius:999px;
  overflow:hidden;
  margin:12px 0;
}

.path-steps b{
  display:block;
  height:100%;
  width:var(--w);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-radius:999px;
}

.gamification-hero,
.wallet-card{
  text-align:center;
  color:#fff;
  border-radius:34px;
  padding:28px 22px;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(135deg,#070D18,#0B1426 50%,#1A2942);
  box-shadow:0 26px 66px rgba(11,20,38,.25);
}

.level-circle{
  width:120px;
  height:120px;
  border-radius:40px;
  margin:0 auto 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
}

.level-circle strong{
  font-size:42px;
  font-weight:900;
}

.level-circle small{
  color:rgba(255,255,255,.78);
  font-weight:900;
}

.gamification-hero h1,
.wallet-card h1{
  margin:0 0 8px;
  font-weight:900;
}

.gamification-hero p,
.wallet-card p{
  color:rgba(255,255,255,.86);
  line-height:1.8;
  margin:0;
}

.gamification-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:16px 0;
}

.gamification-stats div,
.badge-grid div{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px 10px;
  box-shadow:0 16px 40px rgba(11,20,38,.08);
}

.gamification-stats strong{
  display:block;
  color:var(--brand);
  font-size:24px;
  font-weight:900;
}

.gamification-stats small{
  color:var(--muted);
  font-weight:800;
}

.badge-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.badge-grid span{
  width:52px;
  height:52px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
  font-weight:900;
}

.exam-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0;
}

.exam-meta span{
  background:#f1e8ff;
  color:var(--brand);
  border-radius:999px;
  padding:7px 11px;
  font-weight:900;
  font-size:12px;
}

.market-card,
.job-card{
  display:flex;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
  margin-bottom:12px;
}

.market-icon{
  width:58px;
  height:58px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 58px;
  font-size:24px;
  font-weight:900;
}

.market-card span,
.job-card span{
  color:var(--brand);
  font-weight:900;
  font-size:12px;
}

.market-card h3,
.job-card h3{
  margin:5px 0;
  font-size:18px;
  font-weight:900;
}

.market-card p,
.job-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-weight:700;
}

.ai-chat-form textarea{
  min-height:150px;
}

.ai-answer{
  display:flex;
  gap:13px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #d8c2ff;
  border-radius:26px;
  padding:16px;
  margin-top:14px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
}

.ai-answer span{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  font-weight:900;
}

.ai-answer p{
  margin:0;
  color:var(--ink);
  line-height:1.9;
  font-weight:700;
}

.quick-ai-prompts{
  display:flex;
  gap:8px;
  overflow:auto;
  margin-top:12px;
}

.quick-ai-prompts a{
  flex:0 0 auto;
  background:#f1e8ff;
  color:var(--brand);
  text-decoration:none;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:12px;
}

.wallet-card span{
  display:inline-flex;
  background:rgba(255,255,255,.14);
  border-radius:999px;
  padding:7px 12px;
  font-weight:900;
  margin-bottom:10px;
}

.job-card{
  display:block;
}

.job-card small{
  display:block;
  color:var(--muted);
  margin:8px 0 12px;
  font-weight:800;
}


/* ===== Commercial Suite Upgrade ===== */
.commercial-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:16px 0;
}
.commercial-stats div{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px 8px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
}
.commercial-stats strong{
  display:block;
  color:var(--brand);
  font-size:22px;
  font-weight:900;
}
.commercial-stats small{
  color:var(--muted);
  font-weight:800;
  font-size:11px;
}

.live-class-card:not(.live-session-card),
.integration-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:17px;
  margin-bottom:12px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
}

.live-class-card:not(.live-session-card) span,
.integration-card span{
  color:var(--brand);
  background:#f1e8ff;
  border-radius:999px;
  padding:7px 11px;
  font-weight:900;
  font-size:12px;
  display:inline-flex;
}

.live-class-card:not(.live-session-card) h3,
.integration-card h3{
  margin:12px 0 6px;
  font-size:20px;
  font-weight:900;
}

.live-class-card:not(.live-session-card) p,
.integration-card p{
  color:var(--muted);
  line-height:1.7;
  font-weight:700;
  word-break:break-word;
}

.integration-card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}

.integration-card div{
  min-width:0;
}

.integration-card b{
  min-width:54px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1e8ff;
  color:var(--brand);
  font-weight:900;
}

@media(max-width:420px){
  .commercial-stats{
    grid-template-columns:1fr 1fr;
  }
}


/* ===== Phase 2 Real Integrations ===== */
.phase2-settings-form label{
  margin-top:10px;
}

.phase2-settings-form input[type="password"]{
  letter-spacing:2px;
}

.ai-answer{
  display:flex;
  gap:13px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #d8c2ff;
  border-radius:26px;
  padding:16px;
  margin-top:14px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
}

.ai-answer span{
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  font-weight:900;
}

.ai-answer p{
  margin:0;
  line-height:1.9;
  font-weight:700;
  color:var(--ink);
}


/* ===== Stage 3 Enterprise SaaS Security ===== */
.tenant-card{
  display:flex;
  gap:14px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:16px;
  box-shadow:0 18px 45px rgba(11,20,38,.08);
  margin-bottom:12px;
}
.tenant-logo{
  width:64px;
  height:64px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,var(--tenant-color, var(--brand)), var(--brand-2));
  font-weight:900;
}
.tenant-card span{
  color:var(--brand);
  font-weight:900;
  font-size:12px;
}
.tenant-card h3{
  margin:5px 0;
  font-size:19px;
  font-weight:900;
}
.tenant-card p{
  margin:0;
  color:var(--muted);
  font-weight:700;
}
.commercial-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:16px 0;
}
.commercial-stats div{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px 8px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
}
.commercial-stats strong{
  display:block;
  color:var(--brand);
  font-size:22px;
  font-weight:900;
}
.commercial-stats small{
  color:var(--muted);
  font-weight:800;
  font-size:11px;
}
.analytics-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.analytics-grid div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:16px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
}
.analytics-grid span{
  color:var(--brand);
  font-weight:900;
}
.analytics-grid strong{
  display:block;
  font-size:24px;
  color:var(--brand);
  font-weight:900;
}
.analytics-bar-row{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:12px;
  margin-bottom:10px;
}
.analytics-bar-row div{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}
.analytics-bar-row b{
  display:block;
  height:9px;
  background:#f1e8ff;
  border-radius:999px;
  position:relative;
  overflow:hidden;
}
.analytics-bar-row b:after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:var(--w);
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
}
@media(max-width:430px){
  .commercial-stats{grid-template-columns:1fr 1fr}
}


/* ===== Web Production SaaS Suite ===== */
.commercial-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:16px 0;
}
.commercial-stats div{
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:14px 8px;
  box-shadow:0 14px 34px rgba(11,20,38,.065);
}
.commercial-stats strong{
  display:block;
  color:var(--brand);
  font-size:22px;
  font-weight:900;
}
.commercial-stats small{
  color:var(--muted);
  font-weight:800;
  font-size:11px;
}
@media(max-width:430px){
  .commercial-stats{grid-template-columns:1fr 1fr}
}

/* ===== Account settings ===== */
.edu-account-settings .edu-settings-tabs{
  display:flex;
  gap:8px;
  margin:0 16px 16px;
  padding:4px;
  background:var(--soft);
  border-radius:16px;
  border:1px solid var(--line);
}
.edu-settings-tabs a{
  flex:1;
  text-align:center;
  padding:10px 8px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
}
.edu-settings-tabs a.active{
  background:#fff;
  color:var(--brand);
  box-shadow:0 6px 18px rgba(11,20,38,.1);
}
.edu-settings-panel{
  margin:0 16px 20px;
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
}
.edu-settings-panel h2{
  margin:0 0 6px;
  font-size:18px;
  color:var(--brand-dark);
}
.edu-settings-hint,
.edu-settings-note{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.edu-form--settings label{
  display:block;
  margin:12px 0 6px;
  font-weight:800;
  font-size:13px;
}
.edu-form--settings .edu-btn{
  width:100%;
  margin-top:16px;
}
.edu-form--inline{
  margin-top:12px;
}
.edu-input--file{
  padding:10px;
  background:var(--soft);
}
.edu-avatar-preview{
  width:96px;
  height:96px;
  margin:0 auto 16px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(11,20,38,.2);
}
.edu-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.edu-avatar-preview span{
  color:#fff;
  font-weight:900;
  font-size:28px;
}
.edu-settings-back{
  text-align:center;
  margin:8px 16px 24px;
}
.profile-avatar--image{
  padding:0;
  overflow:hidden;
}
.profile-avatar--image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.edu-notice--preview{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  background:linear-gradient(135deg,#F3F2EF,#fff);
  border-color:#d8c4ff;
}
.edu-notice--preview a{
  font-weight:800;
  color:var(--brand);
}
.edu-notice--ok{
  background:#f0fdf4;
  border-color:#bbf7d0;
  color:#166534;
}
.course-free-badge{
  display:inline-block;
  margin:6px 0;
  padding:4px 10px;
  border-radius:999px;
  background:#ecfdf5;
  color:#047857;
  font-size:12px;
  font-weight:800;
}
.lesson-item.locked{
  opacity:.85;
  background:#fafafa;
}
.lesson-item{
  text-decoration:none;
  color:inherit;
}
.course-next-steps{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:16px;
}
.access-card--preview{
  border-color:#C7C7C7;
  background:linear-gradient(180deg,#F3F2EF,#fff);
}
.edu-course-preview-tag{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  z-index:2;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(255, 255, 255, 0.95);
  color:#15803d;
  font-size:9px;
  font-weight:800;
  font-style:normal;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);
  border:1px solid rgba(22, 163, 74, 0.25);
}

.edu-course-preview-tag--preview{
  color:#15803d;
  border-color:rgba(22, 163, 74, 0.25);
}

.edu-course-preview-tag--new{
  color:var(--brand);
  border-color:rgba(11, 20, 38, 0.28);
}

.edu-course-preview-tag--progress{
  color:#1d4ed8;
  border-color:rgba(37, 99, 235, 0.28);
}

.edu-course-preview-tag--complete{
  color:#0f766e;
  border-color:rgba(15, 118, 110, 0.28);
}
.edu-course-card-media-cover{
  position:relative;
}

.edu-courses-app .edu-section-head h2{
  font-size:18px;
  font-weight:900;
  color:var(--brand-dark);
}

@media (max-width: 400px) {
  .edu-courses-grid-media{
    grid-template-columns:1fr;
    gap:14px;
  }

  .edu-course-card-media-cover{
    height:148px;
  }

  .edu-course-card-media__title{
    font-size:15px;
    min-height:auto;
  }
}

/* Phase 2–3 mobile features */
.profile-menu-group-title{ margin:0 0 8px; padding:0 16px; font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.assignment-card small,.path-card small,.review-item small{ color:var(--muted); font-weight:700; }
.assignment-meta,.path-meta{ font-size:13px; color:var(--muted); margin:8px 0; }
.skills-stats-grid .edu-card{ text-align:center; }
.skill-badge-card{ display:flex; gap:12px; align-items:flex-start; }
.skill-badge-icon{ font-size:28px; line-height:1; }
.rating-summary{ text-align:center; }
.course-rating-line{ margin:0 16px 8px; font-weight:800; color:var(--brand); }
.course-community-links{ display:flex; flex-direction:column; gap:8px; margin:0 16px 12px; }
.course-community-links .edu-btn{ width:100%; justify-content:center; }
.notification-item{ display:flex; gap:12px; text-decoration:none; color:inherit; margin:0 16px 10px; padding:14px; border-radius:16px; border:1px solid var(--border); background:#fff; }
.notification-item.unread{ border-color:#C7C7C7; background:linear-gradient(180deg,#F3F2EF,#fff); }
.ai-answer{ margin:16px; padding:16px; border-radius:16px; background:#F3F2EF; border:1px solid #D8DEE8; }
.ai-answer span{ display:inline-block; margin-bottom:8px; font-weight:900; color:var(--brand); }
.quick-ai-prompts{ display:flex; flex-wrap:wrap; gap:8px; margin:16px; }
.quick-ai-prompts a{ padding:8px 12px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:13px; font-weight:700; text-decoration:none; color:var(--text); }
.discuss-post small{ display:block; margin:4px 0 8px; color:var(--muted); }
.cert-linkedin-btn{ background:#0a66c2 !important; color:#fff !important; border-color:#0a66c2 !important; }
.path-summary{ margin-bottom:12px; }
a.notification-item:active{ opacity:.92; }

/* Learning paths — enhanced */
.edu-hero--paths{
  background:linear-gradient(145deg,#0B1426 0%,#152238 45%,#152238 100%);
  color:#fff;
  margin:0 0 8px;
  border-radius:0 0 28px 28px;
}
.edu-hero--paths .edu-hero-content p,
.edu-hero--paths .edu-hero-kicker,
.edu-hero--paths .paths-hero-stats{ color:rgba(255,255,255,.92); }
.edu-hero-kicker{
  display:inline-block;
  margin-bottom:8px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  font-size:12px;
  font-weight:800;
}
.paths-hero-stats{
  display:flex;
  gap:16px;
  margin-top:12px;
  font-size:13px;
  font-weight:700;
}
.paths-grid{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:8px 16px 24px;
}
.path-card-pro{
  display:block;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 8px 24px rgba(11,20,38,.08);
  text-decoration:none;
  color:inherit;
}
.path-card-pro__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.path-card-pro__icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#F3F2EF,#F3F2EF);
  font-size:22px;
}
.path-card-pro__ring{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:conic-gradient(var(--brand) calc(var(--pct) * 1%), #e9e5f5 0);
  font-size:11px;
  font-weight:900;
  color:var(--brand);
}
.path-card-pro__ring span{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.path-card-pro__level{
  display:inline-block;
  margin-bottom:6px;
  padding:3px 8px;
  border-radius:6px;
  background:#F3F2EF;
  color:var(--brand);
  font-size:11px;
  font-weight:800;
}
.path-card-pro h3{ margin:0 0 6px; font-size:18px; }
.path-card-pro p{ margin:0 0 10px; font-size:14px; color:var(--muted); line-height:1.5; }
.path-card-pro__meta{
  display:flex;
  gap:12px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
}
.path-card-pro__bar{ margin-bottom:10px; }
.path-card-pro__cta{
  font-size:13px;
  font-weight:800;
  color:var(--brand);
}
.path-back-link{
  display:inline-block;
  margin-bottom:10px;
  color:rgba(255,255,255,.9);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.path-detail-summary{
  display:flex;
  gap:16px;
  align-items:center;
  margin:16px;
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--border);
}
.path-detail-ring{
  flex-shrink:0;
  width:72px;
  height:72px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:conic-gradient(var(--brand) calc(var(--pct) * 1%), #E8E8E8 0);
  font-weight:900;
  color:var(--brand);
}
.path-detail-ring span{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
}
.path-detail-summary__text{ flex:1; min-width:0; }
.path-detail-summary__text p{ margin:4px 0 8px; font-size:13px; color:var(--muted); }
.path-course-timeline{
  list-style:none;
  margin:0 16px 24px;
  padding:0;
}
.path-course-step{
  display:flex;
  gap:12px;
  margin-bottom:14px;
}
.path-course-step__num{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#F3F2EF;
  color:var(--brand);
  font-weight:900;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.path-course-step.is-done .path-course-step__num{
  background:#dcfce7;
  color:#166534;
}
.path-course-step__body{
  flex:1;
  padding:14px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
}
.path-course-step__body strong{ display:block; margin-bottom:4px; }
.path-course-step__body small{ color:var(--muted); font-weight:700; }

/* Assignments — enhanced + secure upload */
.edu-page-assignments .assign-stats-row,
.edu-page-alert{ margin:0 16px 12px; }
.assign-stats-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.assign-stat{
  padding:14px;
  border-radius:16px;
  text-align:center;
  border:1px solid var(--border);
}
.assign-stat strong{ display:block; font-size:24px; }
.assign-stat small{ font-size:12px; font-weight:700; color:var(--muted); }
.assign-stat--pending{ background:#fffbeb; border-color:#fde68a; }
.assign-stat--done{ background:#f0fdf4; border-color:#bbf7d0; }
.assignment-card-pro{
  margin:0 16px 14px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.assignment-card-pro.is-pending{ border-inline-start:4px solid #f59e0b; }
.assignment-card-pro.is-done{ border-inline-start:4px solid #22c55e; }
.assignment-card-pro__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:10px;
}
.assignment-course-tag{
  display:block;
  font-size:11px;
  font-weight:800;
  color:var(--brand);
  margin-bottom:4px;
}
.assignment-card-pro h3{ margin:0; font-size:17px; }
.assignment-status-chip{
  flex-shrink:0;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  background:#F3F2EF;
  color:var(--brand);
}
.assignment-card-pro.is-done .assignment-status-chip{
  background:#dcfce7;
  color:#166534;
}
.assignment-card-pro__desc{
  font-size:14px;
  color:var(--muted);
  line-height:1.55;
  margin:0 0 10px;
}
.assignment-card-pro__meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:14px;
}
.assignment-form-pro__label{
  display:block;
  margin:12px 0 6px;
  font-size:13px;
  font-weight:800;
}
.assignment-file-drop{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:20px 16px;
  border:2px dashed #C7C7C7;
  border-radius:16px;
  background:#F3F2EF;
  cursor:pointer;
  text-align:center;
}
.assignment-file-drop input[type=file]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
}
.assignment-file-drop__icon{ font-size:28px; }
.assignment-file-drop__title{ font-weight:800; font-size:14px; }
.assignment-file-drop small{ color:var(--muted); font-size:12px; line-height:1.4; }
.assignment-submit-btn{ width:100%; margin-top:14px; }
.assignment-submitted-box{
  padding:14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px solid var(--border);
}
.assignment-submitted-box blockquote{
  margin:10px 0;
  padding:10px;
  border-radius:10px;
  background:#fff;
  font-size:14px;
}
.assignment-file-preview{
  display:block;
  margin-top:10px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
}
.assignment-file-preview img{
  width:100%;
  max-height:200px;
  object-fit:cover;
  display:block;
}
.assignment-file-btn{ margin-top:10px; display:inline-flex; }
.edu-empty-card--soft{
  margin:16px;
  padding:24px;
  border-radius:18px;
  background:#fafafa;
  text-align:center;
}
.edu-page-support .support-help-card{
  margin:0 16px 16px;
}

/* —— صفحة الشهادات (طالب) —— */
.edu-page-certs.student-page-app{
  padding:calc(52px + env(safe-area-inset-top, 0px)) 14px calc(100px + env(safe-area-inset-bottom, 0px));
}

.edu-page-certs .cert-hero-rule{
  font-size:13px;
  opacity:.92;
  margin:8px 0 0;
  line-height:1.55;
}

.edu-page-certs .cert-verify-panel{
  margin:0 0 18px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(165deg, #fff 0%, #f8f4ff 100%);
  border:1px solid rgba(11, 20, 38, 0.14);
  box-shadow:0 14px 36px rgba(11, 20, 38, 0.1);
}

.edu-page-certs .cert-verify-panel__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.edu-page-certs .cert-verify-panel__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  background:linear-gradient(135deg, #0B1426, #1A2942);
  color:#fff;
  box-shadow:0 8px 20px rgba(11, 20, 38, 0.28);
  flex-shrink:0;
}

.edu-page-certs .cert-verify-panel__head h2{
  margin:0 0 2px;
  font-size:17px;
  font-weight:900;
  color:#2a1447;
}

.edu-page-certs .cert-verify-panel__head p{
  margin:0;
  font-size:13px;
  color:#666666;
  font-weight:700;
}

.edu-page-certs .cert-verify-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.edu-page-certs .cert-field-label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#5b4d6a;
  margin:4px 0 0;
}

.edu-page-certs .cert-field-input{
  margin-bottom:0;
  min-height:50px;
  border-color:rgba(11, 20, 38, 0.16);
}

.edu-page-certs .cert-verify-submit{
  margin-top:6px;
  width:100%;
  min-height:52px;
  border:0;
  border-radius:16px;
  background:linear-gradient(135deg, #0B1426, #152238);
  color:#fff;
  box-shadow:0 12px 28px rgba(11, 20, 38, 0.28);
}

.edu-page-certs .cert-block{
  margin-bottom:8px;
}

.edu-page-certs .cert-section-head{
  margin:6px 2px 10px;
}

.edu-page-certs .cert-section-head h2{
  font-size:18px;
  color:#2a1447;
}

.edu-page-certs .cert-card-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.edu-page-certs .cert-issued-card,
.edu-page-certs .cert-ready-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:18px;
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}

.edu-page-certs .cert-issued-card{
  background:#fff;
  border:1px solid rgba(11, 20, 38, 0.12);
  box-shadow:0 8px 22px rgba(11, 20, 38, 0.08);
}

.edu-page-certs .cert-issued-card__icon{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:20px;
  background:#f3ecff;
  flex-shrink:0;
}

.edu-page-certs .cert-issued-card__body{
  flex:1;
  min-width:0;
}

.edu-page-certs .cert-issued-card__body strong,
.edu-page-certs .cert-ready-card__body strong{
  display:block;
  font-size:16px;
  font-weight:900;
  color:#2a1447;
  margin-bottom:3px;
}

.edu-page-certs .cert-issued-card__body small,
.edu-page-certs .cert-ready-card__body small{
  display:block;
  font-size:12px;
  color:#666666;
  font-weight:700;
}

.edu-page-certs .cert-issued-card__arrow{
  font-size:22px;
  font-weight:900;
  color:#1A2942;
  line-height:1;
}

.edu-page-certs .cert-ready-card{
  background:linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 55%, #F3F2EF 100%);
  border:1.5px solid rgba(34, 197, 94, 0.35);
  box-shadow:0 10px 26px rgba(34, 197, 94, 0.12);
}

.edu-page-certs .cert-ready-card__badge{
  flex-shrink:0;
  min-width:52px;
  padding:8px 10px;
  border-radius:12px;
  text-align:center;
  font-size:14px;
  font-weight:900;
  color:#166534;
  background:#dcfce7;
  border:1px solid #86efac;
}

.edu-page-certs .cert-ready-card__body{
  flex:1;
  min-width:0;
}

.edu-page-certs .cert-ready-card__cta{
  flex-shrink:0;
  padding:10px 14px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, #0B1426, #152238);
  box-shadow:0 6px 16px rgba(11, 20, 38, 0.25);
  white-space:nowrap;
}

.edu-page-certs .cert-progress-card{
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(11, 20, 38, 0.1);
  box-shadow:0 8px 22px rgba(11, 20, 38, 0.07);
  text-align:start;
}

.edu-page-certs .cert-progress-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.edu-page-certs .cert-progress-card__head strong{
  font-size:16px;
  font-weight:900;
  color:#2a1447;
}

.edu-page-certs .cert-progress-card__pct{
  flex-shrink:0;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#0B1426;
  background:#f3ecff;
  border:1px solid #D8DEE8;
}

.edu-page-certs .cert-progress-card__msg{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.6;
  color:#5b4d6a;
  font-weight:600;
}

.edu-page-certs .cert-progress-card__bar-wrap{
  margin-bottom:12px;
}

.edu-page-certs .cert-progress-bar{
  height:10px;
  background:#f3ecff;
  border-radius:999px;
  overflow:hidden;
  margin-bottom:6px;
}

.edu-page-certs .cert-progress-bar span{
  display:block;
  height:100%;
  min-width:2px;
  background:linear-gradient(90deg, #0B1426, #1A2942);
  border-radius:999px;
  transition:width .25s ease;
}

.edu-page-certs .cert-progress-card__goal{
  display:block;
  font-size:11px;
  color:#9ca3af;
  font-weight:700;
  line-height:1.4;
}

.edu-page-certs .cert-btn-continue,
.edu-page-certs .cert-btn-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:14px;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
  font-family:inherit;
  border:0;
  cursor:pointer;
  background:linear-gradient(135deg, #0B1426, #152238);
  color:#fff;
  box-shadow:0 8px 20px rgba(11, 20, 38, 0.22);
}

.edu-page-certs .cert-empty-state{
  margin-top:8px;
  padding:22px 18px;
  border-radius:18px;
  text-align:center;
  background:#fff;
  border:1px dashed rgba(11, 20, 38, 0.2);
}

.edu-page-certs .cert-empty-state p{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.6;
  color:#5b4d6a;
  font-weight:600;
}

.edu-page-certs .cert-issued-card:active,
.edu-page-certs .cert-ready-card:active{
  transform:scale(.985);
}

@media (hover:hover){
  .edu-page-certs .cert-issued-card:hover,
  .edu-page-certs .cert-ready-card:hover{
    box-shadow:0 12px 28px rgba(11, 20, 38, 0.14);
  }
  .edu-page-certs .cert-btn-continue:hover,
  .edu-page-certs .cert-verify-submit:hover{
    filter:brightness(1.05);
  }
}
.support-help-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:center;
}
.support-help-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.edu-page-live .edu-page-alert{ margin:0 16px 12px; }

/* ——— Live classes (student app) ——— */
.edu-page-live{
  padding-bottom:96px;
  background:#fff;
}

.live-hero{
  position:relative;
  overflow:hidden;
  margin:0 0 0;
  padding:28px 20px 24px;
  border-radius:0 0 32px 32px;
  color:#fff;
  background:linear-gradient(145deg,#070D18 0%,#070D18 38%,#152238 72%,#152238 100%);
  box-shadow:0 22px 50px rgba(11,20,38,.28);
}
.live-hero__mesh{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.18),transparent 42%),
    radial-gradient(circle at 10% 90%,rgba(167,139,250,.35),transparent 48%);
  pointer-events:none;
}
.live-hero__content{
  position:relative;
  z-index:1;
  max-width:520px;
  margin:0 auto;
  text-align:center;
}
.live-hero__brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:6px 14px 6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
}
.live-hero__icon{
  display:flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,255,255,.16);
  color:#fff;
}
.live-hero__icon .live-ui-icon{ width:16px; height:16px; }
.live-hero__kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.live-hero h1{
  margin:0 0 8px;
  font-size:clamp(26px,6vw,34px);
  font-weight:900;
  line-height:1.15;
}
.live-hero__sub{
  margin:0 auto;
  max-width:34ch;
  color:rgba(255,255,255,.88);
  font-size:14px;
  line-height:1.65;
  font-weight:700;
}
.live-hero__pulse-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  font-size:13px;
  font-weight:900;
}

.live-pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#C7C7C7;
  box-shadow:0 0 0 0 rgba(167,139,250,.65);
  animation:livePulse 1.8s ease infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(167,139,250,.55); }
  70%{ box-shadow:0 0 0 10px rgba(167,139,250,0); }
  100%{ box-shadow:0 0 0 0 rgba(167,139,250,0); }
}

.live-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:-18px 16px 16px;
  position:relative;
  z-index:2;
}
.live-stat{
  padding:14px 10px;
  border-radius:18px;
  text-align:center;
  background:#fff;
  border:1px solid rgba(11,20,38,.12);
  box-shadow:0 12px 30px rgba(11,20,38,.08);
}
.live-stat strong{
  display:block;
  font-size:22px;
  font-weight:900;
  line-height:1.1;
  color:#1f2937;
}
.live-stat small{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
}
.live-stat--now{
  border-color:rgba(11,20,38,.22);
  background:linear-gradient(180deg,#fff,#F3F2EF);
}
.live-stat--now strong{ color:#152238; }
.live-stat--scheduled strong{ color:#152238; }
.live-stat--recordings strong{ color:#152238; }

.live-panel{
  margin:0 16px 18px;
}
.live-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.live-panel__head h2{
  margin:0;
  font-size:17px;
  font-weight:900;
  color:#1f2937;
}
.live-panel__count{
  min-width:28px;
  height:28px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#F3F2EF;
  color:#152238;
  font-size:12px;
  font-weight:900;
}

.live-session-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.live-session-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(11,20,38,.1);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(11,20,38,.07);
}
.live-session-card__cover{
  width:100%;
  max-height:180px;
  overflow:hidden;
  background:#0B1426;
}
.live-session-card__cover img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.live-session-card__row{
  display:flex;
  flex:1;
  min-width:0;
}
.live-session-card__rail{
  width:5px;
  flex:0 0 5px;
  background:linear-gradient(180deg,#1A2942,#152238);
}
.live-session-card--live{
  border-color:rgba(11,20,38,.35);
  box-shadow:0 16px 40px rgba(11,20,38,.16);
}
.live-session-card--live .live-session-card__rail{
  background:linear-gradient(180deg,#C7C7C7,#152238);
}
.live-session-card--locked{
  opacity:.92;
}
.live-session-card__body{
  flex:1;
  min-width:0;
  padding:16px 16px 14px;
}
.live-session-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.live-session-card__provider{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}
.live-session-card__provider-icon{
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,#F3F2EF,#F3F2EF);
  color:#152238;
}
.live-session-card__provider-icon .live-ui-icon{ width:16px; height:16px; }

.live-session-card__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  white-space:nowrap;
  background:#F3F2EF;
  color:#152238;
}
.live-session-card__chip.is-live{
  background:#F3F2EF;
  color:#152238;
}
.live-session-card__chip.is-scheduled{
  background:#F3F2EF;
  color:#152238;
}
.live-session-card__chip.is-ended{
  background:#F3F2EF;
  color:#7c6b99;
}

.live-session-card__title{
  margin:0 0 6px;
  font-size:17px;
  font-weight:900;
  line-height:1.35;
  color:#111827;
}
.live-session-card__desc{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.65;
  font-weight:700;
  color:var(--muted);
}

.live-session-card__meta{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.live-session-card__meta li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  color:#4b5563;
}
.live-session-card__meta li span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-ui-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:#152238;
}
.live-ui-icon--sm{
  width:16px;
  height:16px;
  flex-basis:16px;
}

.live-session-card__foot{
  padding-top:4px;
  border-top:1px dashed rgba(11,20,38,.14);
}
.live-session-card__form{
  margin:10px 0 0;
}
.live-session-card__cta{
  width:100%;
  justify-content:center;
  margin-top:10px;
  min-height:46px;
  border-radius:14px;
  font-weight:900;
}
.edu-page-live .live-session-card__cta.edu-btn.primary{
  background:linear-gradient(135deg,#152238,#152238);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 24px rgba(11,20,38,.22);
}
.live-session-card--live .live-session-card__cta.edu-btn.primary{
  box-shadow:0 10px 24px rgba(11,20,38,.32);
}
.live-session-card__hint{
  margin:8px 0 0;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  line-height:1.5;
}

.live-recording-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.live-recording-card{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  gap:4px 12px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(11,20,38,.05);
}
.live-recording-card__play{
  grid-row:1 / span 2;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:linear-gradient(135deg,#F3F2EF,#E0E0E0);
  color:#152238;
}
.live-recording-card__tag{
  display:inline-block;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#152238;
}
.live-recording-card h3{
  margin:0;
  font-size:15px;
  font-weight:900;
  grid-column:2;
}
.live-recording-card p{
  margin:0;
  grid-column:2;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.live-recording-card__btn{
  grid-column:1 / -1;
  width:100%;
  justify-content:center;
  margin-top:8px;
  min-height:42px;
  border-radius:12px;
}

.live-empty{
  text-align:center;
  padding:28px 20px;
}
.live-empty--inline{
  background:#fff;
  border:1px dashed rgba(11,20,38,.22);
  border-radius:20px;
}
.live-empty__icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg,#F3F2EF,#F3F2EF);
  color:#152238;
}
.live-empty__icon .live-ui-icon{ width:26px; height:26px; }
.live-empty strong{
  display:block;
  margin-bottom:6px;
  font-size:16px;
}
.live-empty p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}
.live-empty__cta{
  display:inline-flex;
  min-width:160px;
  justify-content:center;
}

.live-trainer-form-wrap{background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;margin:0 16px 18px;box-shadow:0 14px 34px rgba(11,20,38,.06)}
.live-trainer-form-wrap h2{margin:0 0 12px;font-size:18px}
.edu-page-live-trainer .live-section{margin:0 16px 18px}
.edu-page-live-trainer .live-section__title{font-size:17px;font-weight:900;margin:0 0 12px}
.student-quick-card--live{
  border-color:#E0E0E0;
  background:linear-gradient(180deg,#fff,#F3F2EF);
}

@media (min-width:640px){
  .live-stats{ max-width:520px; margin-left:auto; margin-right:auto; }
  .live-panel{ max-width:560px; margin-left:auto; margin-right:auto; }
  .live-empty.edu-empty-card{ max-width:480px; margin:20px auto; }
}

/* ——— Live room (embedded Jitsi) ——— */
body:has(.edu-page-live-room){
  overflow:hidden;
  background:#1e1033;
}
body:has(.edu-page-live-room) .edu-lang-switch{
  display:none;
}
.edu-page-live-room{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  min-height:100svh;
  padding:0;
  margin:0;
  background:#120824;
}
.live-room-bar{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0)) 14px 10px;
  background:linear-gradient(135deg,#070D18 0%,#152238 52%,#152238 100%);
  color:#fff;
  box-shadow:0 10px 28px rgba(11,20,38,.38);
  flex-shrink:0;
  z-index:4;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.live-room-bar__back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  color:#fff;
  flex-shrink:0;
  transition:background .2s ease;
}
.live-room-bar__back:hover{ background:rgba(255,255,255,.2); }
.live-room-bar__back svg{ width:22px; height:22px; }
.live-room-bar__info{ min-width:0; flex:1; }
.live-room-bar__top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:2px;
}
.live-room-bar__info h1{
  margin:2px 0;
  font-size:17px;
  font-weight:900;
  color:#fff;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.live-room-bar__info p{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.84);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.live-room-bar__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  font-size:11px;
  font-weight:800;
  color:#fff;
}
.live-room-bar__chip.is-live{ background:rgba(255,255,255,.22); }
.live-room-bar__host{
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.78);
}
.live-room-perm{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background:#070D18;
  color:#F3F2EF;
  font-size:12px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-shrink:0;
}
.live-room-perm svg{ width:18px; height:18px; flex-shrink:0; color:#C7C7C7; }
.live-room-perm.is-hidden{ display:none; }
.live-room-stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  background:#0f0820;
}
.live-jitsi-mount{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.live-jitsi-mount iframe{
  width:100% !important;
  height:100% !important;
  border:0;
}
.live-room-loading{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
  background:radial-gradient(circle at 50% 20%,#070D18 0%,#120824 58%,#0a0414 100%);
  color:#fff;
  transition:opacity .35s ease, visibility .35s ease;
}
.live-room-loading.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.live-room-loading.is-error strong{ color:#fca5a5; }
.live-room-loading__ring{
  width:54px;
  height:54px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#C7C7C7;
  animation:liveRoomSpin .85s linear infinite;
}
@keyframes liveRoomSpin{ to{ transform:rotate(360deg); } }
.live-room-loading strong{
  font-size:16px;
  font-weight:900;
  color:#fff;
}
.live-room-loading p{
  margin:0;
  max-width:280px;
  font-size:13px;
  color:rgba(255,255,255,.72);
  line-height:1.5;
}
.live-room-foot{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,#070D18,#120824);
  border-top:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
  z-index:4;
}
.live-room-foot__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  border:1px solid transparent;
}
.live-room-foot__btn svg{ width:18px; height:18px; }
.live-room-foot__btn--leave{
  flex:1;
  background:linear-gradient(135deg,#152238,#152238);
  box-shadow:0 8px 20px rgba(11,20,38,.28);
}
.live-room-foot__btn--ext{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.14);
  color:#F3F2EF;
  white-space:nowrap;
}
.live-room-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#0f0820;
}
.live-room-fallback{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:32px 24px;
  text-align:center;
  color:#fff;
}
.live-room-fallback__icon{
  width:72px;
  height:72px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  color:#E0E0E0;
}
.live-room-fallback__icon svg{ width:36px; height:36px; }
.live-room-fallback h2{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:#fff;
}
.live-room-fallback p{
  margin:0;
  max-width:320px;
  color:rgba(255,255,255,.78);
  line-height:1.6;
}
.live-room-fallback .edu-btn.primary{
  background:linear-gradient(135deg,#152238,#152238);
  border-color:transparent;
  color:#fff;
}
.live-room-fallback .edu-btn.secondary{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  color:#fff;
}
.live-room-fallback__btn{ min-width:200px; }

/* ——— Discussions (course / lesson / live) ——— */
.edu-page-discuss{ padding-bottom:96px; background:#fff; }
.discuss-page-hero{
  display:flex; gap:14px; align-items:flex-start;
  margin:12px 16px 0; padding:18px;
  border-radius:22px;
  background:linear-gradient(135deg,#070D18,#152238);
  color:#fff; box-shadow:0 12px 28px rgba(91,33,182,.24);
}
.discuss-page-hero__back{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff;
}
.discuss-page-hero__back svg{ width:20px; height:20px; }
.discuss-page-hero__badge{
  display:inline-block; font-size:11px; font-weight:800;
  padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.16); margin-bottom:6px;
}
.discuss-page-hero h1{ margin:0 0 4px; font-size:20px; font-weight:900; color:#fff; }
.discuss-page-hero p{ margin:0; font-size:13px; color:rgba(255,255,255,.86); }
.discuss-tabs{
  display:flex; gap:8px; padding:14px 16px 0; overflow:auto;
}
.discuss-tabs__btn{
  flex-shrink:0; min-height:40px; padding:0 16px; border-radius:999px;
  background:#fff; border:1px solid #D8DEE8; color:#152238;
  font-weight:800; font-size:13px; text-decoration:none;
}
.discuss-tabs__btn.is-active{
  background:linear-gradient(135deg,#152238,#152238); border-color:transparent; color:#fff;
}
.discuss-panel{
  margin:14px 16px 0; padding:16px;
  background:#fff; border:1px solid #F3F2EF; border-radius:22px;
  box-shadow:0 8px 24px rgba(91,33,182,.08);
}
.discuss-panel--compact{ margin:16px 0 0; border-radius:18px; }
.course-learning-page .discuss-panel{ margin:18px 16px 0; }
.discuss-panel__head{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px;
}
.discuss-panel__head h2{ margin:0 0 4px; font-size:17px; font-weight:900; color:#1e1033; }
.discuss-panel__head p{ margin:0; font-size:12px; color:#6b7280; }
.discuss-panel__count{
  min-width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background:#F3F2EF; color:#152238; font-weight:900; font-size:13px;
}
.discuss-compose{ display:grid; gap:10px; margin-bottom:16px; }
.discuss-compose__input{
  width:100%; border:1px solid #E0E0E0; border-radius:16px; padding:12px 14px;
  font:inherit; resize:vertical; min-height:72px; background:#F3F2EF;
}
.discuss-compose__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  justify-self:stretch;
  background:linear-gradient(135deg,#152238,#152238) !important;
  color:#fff !important;
  font-weight:900;
  font-size:15px;
  box-shadow:0 10px 24px rgba(11,20,38,.24);
  cursor:pointer;
}
.discuss-compose__btn:hover{ filter:brightness(1.05); }
.discuss-compose__btn:active{ transform:translateY(1px); }
.discuss-login-hint{
  margin:0 0 14px; padding:12px 14px; border-radius:14px;
  background:#F3F2EF; color:#152238; font-weight:700; font-size:13px;
}
.discuss-feed{ display:grid; gap:12px; }
.discuss-post{
  padding:14px; border-radius:16px; background:#F3F2EF; border:1px solid #F3F2EF;
}
.discuss-post__head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.discuss-post__avatar{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#152238,#152238); color:#fff; font-weight:900;
}
.discuss-post__head strong{ display:block; font-size:14px; color:#1e1033; }
.discuss-post__head small{ color:#6b7280; font-size:11px; }
.discuss-post__text{ margin:0; color:#374151; line-height:1.65; font-size:14px; }
.discuss-replies{
  margin-top:10px; padding-top:10px; border-top:1px dashed #E0E0E0;
  display:grid; gap:8px;
}
.discuss-reply{
  padding:10px 12px; border-radius:12px; background:#fff; border:1px solid #F3F2EF;
}
.discuss-reply strong{ font-size:13px; color:#070D18; margin-inline-end:8px; }
.discuss-reply small{ font-size:11px; color:#9ca3af; }
.discuss-reply p{ margin:6px 0 0; font-size:13px; color:#4b5563; line-height:1.55; }
.discuss-reply-form{
  display:flex; gap:8px; margin-top:10px;
}
.discuss-reply-form__input{
  flex:1; min-height:40px; border:1px solid #E0E0E0; border-radius:12px;
  padding:0 12px; font:inherit; background:#fff;
}
.discuss-reply-form__btn{
  min-height:40px; padding:0 14px; border:0; border-radius:12px;
  background:#F3F2EF; color:#152238; font-weight:800; font-size:12px;
}
.discuss-empty{
  padding:24px 16px; text-align:center; border-radius:16px; background:#F3F2EF; color:#6b7280;
}
.live-room-foot__btn--chat{
  flex:0 0 auto; min-width:110px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:#fff;
}
.live-room-foot__badge{
  min-width:20px; height:20px; border-radius:999px; padding:0 6px;
  display:inline-grid; place-items:center; background:#fff; color:#152238;
  font-style:normal; font-size:11px; font-weight:900;
}
.live-discuss-fab{
  position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom,0));
  width:56px; height:56px; border:0; border-radius:18px;
  background:linear-gradient(135deg,#152238,#152238); color:#fff;
  box-shadow:0 12px 28px rgba(11,20,38,.35); z-index:5;
}
.live-discuss-fab svg{ width:24px; height:24px; }
.live-discuss-fab em{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; border-radius:999px;
  background:#fff; color:#152238; font-style:normal; font-size:11px; font-weight:900;
  display:grid; place-items:center; padding:0 5px;
}
.live-discuss-sheet{
  position:fixed; inset:0; z-index:30; pointer-events:none; visibility:hidden;
}
.live-discuss-sheet.is-open{ pointer-events:auto; visibility:visible; }
.live-discuss-sheet__backdrop{
  position:absolute; inset:0; background:rgba(10,4,20,.55); opacity:0; transition:opacity .25s ease;
}
.live-discuss-sheet.is-open .live-discuss-sheet__backdrop{ opacity:1; }
.live-discuss-sheet__panel{
  position:absolute; left:0; right:0; bottom:0; max-height:72vh;
  transform:translateY(100%); transition:transform .28s ease;
  background:#fff; border-radius:22px 22px 0 0; overflow:auto;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.live-discuss-sheet.is-open .live-discuss-sheet__panel{ transform:translateY(0); }
.live-discuss-sheet__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid #F3F2EF; background:#F3F2EF;
  position:sticky; top:0; z-index:1;
}
.live-discuss-sheet__head h2{ margin:0; font-size:16px; font-weight:900; color:#1e1033; }
.live-discuss-sheet__close{
  width:36px; height:36px; border:0; border-radius:12px; background:#F3F2EF; color:#152238; font-size:22px; line-height:1;
}
.live-discuss-sheet .discuss-panel{ margin:0; border:0; border-radius:0; box-shadow:none; }

/* ——— Discussion v2 ——— */
.discuss-filters{ display:flex; gap:8px; margin-bottom:12px; overflow:auto; }
.discuss-filters__btn{
  flex-shrink:0; min-height:36px; padding:0 14px; border-radius:999px;
  border:1px solid #E0E0E0; background:#fff; color:#152238; font-weight:800; font-size:12px; cursor:pointer;
}
.discuss-filters__btn.is-active{ background:#152238; color:#fff; border-color:#152238; }
.discuss-toast{
  margin-bottom:10px; padding:10px 12px; border-radius:12px;
  background:#ecfdf5; color:#047857; font-weight:700; font-size:13px;
}
.discuss-post--pinned{ border-color:#C7C7C7; box-shadow:0 0 0 1px rgba(11,20,38,.12); }
.discuss-post--answered{ background:#f5fffb; }
.discuss-post__title-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.discuss-badge{
  display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:999px;
  font-size:10px; font-weight:900;
}
.discuss-badge--trainer{ background:#F3F2EF; color:#152238; }
.discuss-badge--pin{ background:#fef3c7; color:#92400e; }
.discuss-badge--ok{ background:#dcfce7; color:#166534; }
.discuss-post__actions{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}
.discuss-action{
  min-height:34px; padding:0 12px; border-radius:999px; border:1px solid #D8DEE8;
  background:#fff; color:#152238; font-weight:800; font-size:12px; cursor:pointer;
}
.discuss-action--like.is-active{ background:#fce7f3; border-color:#f9a8d4; color:#be185d; }
.discuss-action--danger{ color:#b91c1c; border-color:#fecaca; }
.discuss-reply__head{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px; }
.discuss-compose__tools{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.discuss-compose__category{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:0 10px; border-radius:12px;
  border:1px solid #e5e7eb; background:#fff;
  font-size:12px; font-weight:800; color:#374151;
}
.discuss-compose__category select{
  border:0; background:transparent; color:#0B1426;
  font-size:12px; font-weight:800; cursor:pointer;
  max-width:140px;
}
.discuss-upload-btn,.discuss-mention-btn{
  display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:0 12px; border-radius:12px;
  border:1px dashed #C7C7C7; background:#F3F2EF; color:#152238;
  font-weight:800; font-size:12px; cursor:pointer;
}
.discuss-upload-name{ font-size:11px; color:#6b7280; }
.discuss-attachment{
  display:block; margin:10px 0; border-radius:14px; overflow:hidden;
  border:1px solid #F3F2EF; max-width:320px;
}
.discuss-attachment img{ display:block; width:100%; height:auto; }
.discuss-attachment--sm{ max-width:180px; }
.discuss-mention{
  display:inline-block; padding:0 6px; border-radius:8px;
  background:#F3F2EF; color:#152238; font-weight:900;
}
.discuss-badge--best{ background:#fef9c3; color:#854d0e; }
.discuss-reply--best{ border-color:#fde68a; background:#fffbeb; }
.discuss-action--best{ border-color:#fde68a; color:#92400e; }

/* App icon system */
.edu-app-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:14px;
  background:linear-gradient(145deg,#F3F2EF,#F3F2EF);
  color:#0B1426;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.edu-app-icon--sm{ width:34px; height:34px; border-radius:12px; }
.edu-app-icon--md{ width:42px; height:42px; border-radius:14px; }
.edu-app-icon--lg{ width:52px; height:52px; border-radius:16px; }
.edu-app-icon--sm .edu-app-icon-svg{ width:16px; height:16px; }
.edu-app-icon--md .edu-app-icon-svg{ width:20px; height:20px; }
.edu-app-icon--lg .edu-app-icon-svg{ width:24px; height:24px; }
.edu-app-icon--brand{ background:linear-gradient(145deg,#F3F2EF,#F3F2EF); color:#0B1426; }
.edu-app-icon--live{ background:linear-gradient(145deg,#F3F2EF,#E0E0E0); color:#152238; }
.edu-app-icon--success{ background:linear-gradient(145deg,#ecfdf5,#d1fae5); color:#047857; }
.edu-app-icon--warn{ background:linear-gradient(145deg,#fffbeb,#fef3c7); color:#b45309; }
.edu-app-icon--sky{ background:linear-gradient(145deg,#eff6ff,#dbeafe); color:#1d4ed8; }
.edu-app-icon--rose{ background:linear-gradient(145deg,#fff1f2,#ffe4e6); color:#be123c; }
.edu-app-icon--muted{ background:linear-gradient(145deg,#f9fafb,#f3f4f6); color:#4b5563; }
.edu-app-icon--menu{ background:#F3F2EF; color:#0B1426; }
.edu-app-icon-svg,.edu-inline-icon-svg{
  display:block;
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
}
.edu-inline-icon-svg{ width:15px; height:15px; flex-shrink:0; }

/* Community hub */
.edu-page-community{
  padding-bottom:24px;
}
.community-hero{
  position:relative;
  margin:0 0 18px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(11,20,38,.14);
  background:
    radial-gradient(circle at 85% 12%, rgba(167,139,250,.22), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(52,211,153,.12), transparent 38%),
    linear-gradient(155deg,#F3F2EF 0%,#fff 48%,#f8fafc 100%);
  box-shadow:0 18px 44px rgba(11,20,38,.1);
}
.community-hero__glow{
  position:absolute;
  inset:auto -20% -40% -20%;
  height:120px;
  background:radial-gradient(ellipse at center, rgba(11,20,38,.12), transparent 70%);
  pointer-events:none;
}
.community-hero__inner{
  position:relative;
  padding:20px 16px 16px;
}
.community-hero__brand{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:16px;
}
.community-hero__copy{ flex:1; min-width:0; }
.community-hero__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid #D8DEE8;
  color:#152238;
  font-size:11px;
  font-weight:900;
  letter-spacing:.01em;
  margin-bottom:8px;
}
.community-hero h1{
  margin:0 0 6px;
  font-size:24px;
  font-weight:900;
  line-height:1.15;
  color:#111827;
}
.community-hero p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#6b7280;
}
.community-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.community-stat{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 10px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(229,231,235,.95);
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.community-stat__data strong{
  display:block;
  font-size:20px;
  font-weight:900;
  line-height:1;
  color:#111827;
}
.community-stat__data span{
  display:block;
  margin-top:4px;
  font-size:10px;
  line-height:1.35;
  color:#6b7280;
  font-weight:700;
}
.community-stat--open .community-stat__data strong{ color:#b45309; }
.community-stat--answered .community-stat__data strong{ color:#047857; }
.community-stat--total .community-stat__data strong{ color:#0B1426; }
.community-hero__actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.community-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:44px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.community-action:active{ transform:scale(.98); }
.community-action--primary{
  background:linear-gradient(135deg,#0B1426,#152238);
  border-color:transparent;
  color:#fff;
  box-shadow:0 10px 24px rgba(11,20,38,.22);
}
.community-action--primary .edu-inline-icon-svg{ stroke:#fff; }
.community-filters{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 16px;
  margin-bottom:4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.community-filters::-webkit-scrollbar{ display:none; }
.community-filters__btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.community-filters__btn.is-active{
  background:#fff;
  border-color:#0B1426;
  color:#0B1426;
  box-shadow:none;
}
.community-filters__btn.is-active .edu-inline-icon-svg{ stroke:#0B1426; }
.community-section{ margin-bottom:22px; }
.community-section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  padding:0 2px;
}
.community-section__title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.community-section__title h2{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:#111827;
}
.community-section__head small{
  font-size:12px;
  font-weight:800;
  color:#9ca3af;
  background:#f3f4f6;
  padding:4px 10px;
  border-radius:999px;
}
.community-feed{ display:flex; flex-direction:column; gap:12px; }
.community-card--v2{
  display:block;
  padding:16px;
  border-radius:20px;
  background:#fff;
  border:1px solid #e8edf5;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.community-card--v2.community-card--open{
  border-color:#D8DEE8;
  background:linear-gradient(180deg,#fff 0%,#fdfbff 100%);
}
.community-card--v2.community-card--answered{
  border-color:#bbf7d0;
  background:linear-gradient(180deg,#fff 0%,#fafffe 100%);
}
.community-card--v2.community-card--pinned{
  box-shadow:0 12px 32px rgba(11,20,38,.1);
}
.community-card--v2:active{ transform:scale(.992); }
.community-card__header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:start;
  margin-bottom:12px;
}
.community-card__avatar{
  width:44px;
  height:44px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#F3F2EF,#E0E0E0);
  color:#0B1426;
  font-size:16px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.community-card__head-main{ min-width:0; }
.community-card__head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.community-card__head-row--sub{
  margin-top:5px;
  justify-content:flex-start;
  flex-wrap:wrap;
}
.community-card__author{
  font-size:14px;
  font-weight:900;
  color:#111827;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.community-card__time{
  flex-shrink:0;
  font-size:11px;
  font-weight:700;
  color:#9ca3af;
}
.community-card__scope{
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#152238;
}
.community-card__type-icon .edu-app-icon--sm{
  width:36px;
  height:36px;
  border-radius:12px;
}
.community-card__tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  background:#fef3c7;
  color:#92400e;
}
.community-card__tag .edu-inline-icon-svg{ width:12px; height:12px; }
.community-card__tag--ok{ background:#dcfce7; color:#166534; }
.community-card__excerpt{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.65;
  color:#374151;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.community-card__footer{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:12px;
  border-top:1px solid #f1f5f9;
}
.community-card__chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:55%;
  padding:6px 10px;
  border-radius:999px;
  background:#F3F2EF;
  color:#0B1426;
  font-size:11px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.community-card__chip .edu-inline-icon-svg{
  width:13px;
  height:13px;
  flex-shrink:0;
  stroke:#0B1426;
}
.community-card__metrics{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-start:auto;
}
.community-card__metric{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:800;
  color:#9ca3af;
}
.community-card__metric .edu-inline-icon-svg{ width:13px; height:13px; }
.community-card__go{
  display:flex;
  align-items:center;
  color:#C7C7C7;
  flex-shrink:0;
}
.community-card__go .edu-inline-icon-svg{ width:18px; height:18px; }
html[dir="rtl"] .community-card__go .edu-inline-icon-svg,
html[dir="rtl"] .community-course-card__go .edu-inline-icon-svg,
html[dir="rtl"] .community-opp-card__cta .edu-inline-icon-svg{
  transform:scaleX(-1);
}
.community-section__link{
  font-size:12px;
  font-weight:800;
  color:#0B1426;
  text-decoration:none;
}
.community-filters__btn--opp.is-active{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  box-shadow:0 8px 22px rgba(37,99,235,.24);
}
.community-filters__count{
  font-style:normal;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  font-size:10px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.community-filters__btn:not(.is-active) .community-filters__count{
  background:#eff6ff;
  color:#1d4ed8;
}
.community-stats--opp{
  grid-template-columns:1fr;
  max-width:220px;
}
.community-stat--opp .community-stat__data strong{ color:#1d4ed8; }
.community-opp-feed{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.community-opp-card{
  display:block;
  padding:16px;
  border-radius:20px;
  background:#fff;
  border:1px solid #dbeafe;
  box-shadow:0 8px 24px rgba(37,99,235,.06);
  text-decoration:none;
  color:inherit;
}
.community-opp-card--scholarship{
  border-color:#bbf7d0;
  box-shadow:0 8px 24px rgba(5,150,105,.06);
}
.community-opp-card--pinned{
  box-shadow:0 12px 30px rgba(37,99,235,.12);
}
.community-opp-card:active{ transform:scale(.992); }
.community-opp-card__top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.community-opp-card__type{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:900;
  color:#1d4ed8;
}
.community-opp-card--scholarship .community-opp-card__type{ color:#047857; }
.community-opp-card__type .edu-app-icon--sm{
  width:30px;
  height:30px;
  border-radius:10px;
}
.community-opp-card__pin{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  background:#fef3c7;
  color:#92400e;
  font-size:10px;
  font-weight:900;
}
.community-opp-card__time{
  margin-inline-start:auto;
  font-size:11px;
  font-weight:700;
  color:#9ca3af;
}
.community-opp-card__title{
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  line-height:1.4;
  color:#111827;
}
.community-opp-card__summary{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.65;
  color:#4b5563;
}
.community-opp-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}
.community-opp-card__meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:700;
  color:#6b7280;
}
.community-opp-card__meta .edu-inline-icon-svg{ width:13px; height:13px; }
.community-opp-card__cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900;
  color:#0B1426;
}
.community-opp-card--scholarship .community-opp-card__cta{ color:#047857; }
.community-opp-feed--compact .community-opp-card{ padding:14px; }
.community-opp-detail{
  padding:0 0 24px;
}
.community-opp-detail__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-bottom:14px;
  font-size:13px;
  font-weight:800;
  color:#0B1426;
  text-decoration:none;
}
.community-opp-detail__hero{
  padding:18px 16px;
  border-radius:22px;
  background:linear-gradient(155deg,#eff6ff 0%,#fff 55%,#f8fafc 100%);
  border:1px solid #dbeafe;
  margin-bottom:14px;
}
.community-opp-detail__type{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:900;
  color:#1d4ed8;
}
.community-opp-detail__hero h1{
  margin:0 0 8px;
  font-size:22px;
  font-weight:900;
  line-height:1.25;
  color:#111827;
}
.community-opp-detail__summary{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:#4b5563;
}
.community-opp-detail__facts{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}
.community-opp-detail__facts > div{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid #eef2f7;
}
.community-opp-detail__facts > div > span:first-child{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#F3F2EF;
  color:#0B1426;
}
.community-opp-detail__facts small{
  display:block;
  font-size:10px;
  color:#9ca3af;
  font-weight:700;
}
.community-opp-detail__facts strong{
  display:block;
  font-size:14px;
  color:#111827;
}
.community-opp-detail__body{
  padding:16px;
  border-radius:20px;
  background:#fff;
  border:1px solid #eef2f7;
  margin-bottom:14px;
}
.community-opp-detail__body h2{
  margin:0 0 10px;
  font-size:15px;
  font-weight:900;
}
.community-opp-detail__content{
  font-size:14px;
  line-height:1.75;
  color:#374151;
}
.community-opp-detail__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.community-courses{ display:flex; flex-direction:column; gap:10px; }
.community-course-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:#fff;
  border:1px solid #eef2f7;
  text-decoration:none;
  color:inherit;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.community-course-card:active{ transform:scale(.99); }
.community-course-card__body{ flex:1; min-width:0; }
.community-course-card__body strong{
  display:block;
  font-size:14px;
  font-weight:900;
  color:#111827;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.community-course-card__body small{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#6b7280;
}
.community-course-card__body em{
  font-style:normal;
  color:#152238;
  font-weight:800;
}
.community-course-card__go{
  display:flex;
  align-items:center;
  color:#C7C7C7;
}
.community-empty{
  padding:32px 18px;
  text-align:center;
  border-radius:22px;
  background:linear-gradient(180deg,#fafafa,#fff);
  border:1px dashed #e5e7eb;
}
.community-empty__icon{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.community-empty strong{
  display:block;
  margin:0 0 8px;
  font-size:16px;
  font-weight:900;
  color:#111827;
}
.community-empty p{
  margin:0 0 16px;
  font-size:13px;
  line-height:1.65;
  color:#6b7280;
}
.community-empty .community-action{ width:100%; max-width:280px; margin:0 auto; }
@media (min-width:640px){
  .community-hero__inner{ padding:24px 20px 18px; }
  .community-stats{ max-width:560px; }
  .community-hero__actions{ max-width:560px; }
  .community-feed,.community-courses{ max-width:640px; }
}