/* ==========================================================================
   Academy public CSS — single source of truth.
   --------------------------------------------------------------------------
   • RTL-first (Persian). Honors the site theme via the semantic tokens that
     the theme engine emits on body[data-theme-scope="site"].
   • Every color goes through a semantic variable. We never hard-code a
     palette so any of the 8 site themes (light or dark) keeps the academy
     legible and on-brand.
   • All selectors are scoped to .academy-body / .academy-* so this file
     cannot leak into the store, the main site, or the main admin panel.
   ========================================================================== */

/* ------------------------------ Base shell ------------------------------ */
.academy-body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--background);
  color:var(--text-primary);
  font-family:var(--academy-font,'Vazirmatn'),system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.85;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
.academy-body *,.academy-body *::before,.academy-body *::after{box-sizing:border-box}
.academy-body a{color:inherit;text-decoration:none}
.academy-body img{max-width:100%;display:block}
.academy-body button,.academy-body input,.academy-body select,.academy-body textarea{
  font:inherit;color:inherit;
}
.academy-body :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:6px;
}
.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;
  background:var(--primary);color:var(--text-on-primary);
  padding:10px 16px;border-radius:0 0 10px 10px;z-index:200;font-weight:700;
}
.skip-link:focus{inset-inline-start:12px}

/* ------------------------------ Top bar ------------------------------ */
.academy-topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle);
}
.academy-topbar-inner{
  width:min(1320px,100%);
  min-height:72px;
  margin:0 auto;
  padding:14px clamp(16px,3vw,36px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.academy-brand{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.academy-brand-logo,.academy-brand-mark{
  flex:0 0 46px;width:46px;height:46px;border-radius:14px;object-fit:cover;
}
.academy-brand-mark{
  display:grid;place-items:center;font-size:22px;
  background:linear-gradient(135deg,var(--primary-container),var(--surface));
  border:1px solid var(--border-subtle);
}
.academy-brand-text{display:flex;flex-direction:column;line-height:1.45;min-width:0}
.academy-brand-text b{font-size:clamp(14px,1.4vw,17px);font-weight:800;letter-spacing:-.025em;overflow-wrap:anywhere}
.academy-brand-text small{font-size:11.5px;color:var(--text-muted);font-weight:600}
.academy-topbar-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.academy-topbar-nav > a{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:9px 14px;border-radius:11px;
  font-size:13.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;
  border:1px solid transparent;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.academy-topbar-nav > a:hover{
  border-color:var(--border-subtle);background:var(--surface);color:var(--text-primary);transform:translateY(-1px);
}
.academy-user-chip{
  border-color:color-mix(in srgb,var(--primary) 42%,var(--border-subtle))!important;
  background:color-mix(in srgb,var(--primary) 9%,var(--surface));
  color:var(--text-primary)!important;font-weight:750;
}
.academy-logout{color:var(--danger)!important;font-weight:700}

/* ------------------------------ Layout ------------------------------ */
.academy-main{
  flex:1;width:min(1320px,100% - 40px);margin:0 auto;
  padding:clamp(24px,3.4vw,46px) 0 80px;
}
.academy-footer{
  margin-top:auto;border-top:1px solid var(--border-subtle);
  background:var(--surface-container-low);
}
.academy-footer-inner{
  width:min(1320px,100%);margin:0 auto;
  padding:36px clamp(16px,3vw,40px);
  display:grid;grid-template-columns:1.4fr 1fr;gap:28px;
}
.academy-footer-brand b{font-size:16px;font-weight:800}
.academy-footer-brand p{margin:10px 0 0;color:var(--text-secondary);font-size:13.5px;max-width:440px;line-height:1.9}
.academy-footer-links{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--text-secondary)}
.academy-footer-links a,.academy-footer-links span{overflow-wrap:anywhere}
.academy-footer-links a:hover{color:var(--primary)}
.academy-footer-note{
  grid-column:1/-1;padding-top:18px;border-top:1px solid var(--border-subtle);
  color:var(--text-muted);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
}

/* ------------------------------ Hero ------------------------------ */
.academy-hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
  align-items:center;gap:clamp(28px,4vw,64px);
  padding:clamp(28px,4.5vw,56px) clamp(22px,3.6vw,48px);
  margin-bottom:30px;
  border:1px solid var(--border-subtle);border-radius:clamp(22px,2.4vw,28px);
  background:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--primary) 17%,transparent),transparent 45%),
    linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--primary) 5%));
  box-shadow:0 18px 55px color-mix(in srgb,var(--shadow-color) 28%,transparent);
}
.academy-hero::after{
  content:'';position:absolute;z-index:-1;left:5%;top:2%;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--primary) 16%,transparent),transparent 60%);
  pointer-events:none;
}
.academy-hero-copy{position:relative;z-index:2;min-width:0}
.academy-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--primary-container);color:var(--on-primary-container,var(--text-primary));
  border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border-subtle));
  font-size:12.5px;font-weight:800;letter-spacing:.01em;
}
.academy-hero h1{
  margin:18px 0 14px;max-width:880px;
  font-size:clamp(28px,4.4vw,52px);line-height:1.42;letter-spacing:-.035em;
  font-weight:900;text-wrap:balance;overflow-wrap:anywhere;
}
.academy-hero h1 span{color:var(--primary)}
.academy-hero p{
  margin:0;max-width:680px;
  font-size:clamp(13.5px,1.45vw,16.5px);line-height:2;color:var(--text-secondary);
}
.academy-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.academy-hero-trust{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:22px;
  color:var(--text-secondary);font-size:12px;font-weight:700;
}
.academy-hero-trust i{height:4px;width:4px;border-radius:50%;background:var(--border-strong);margin:0 5px}
.academy-hero-trust .trust-icon{
  display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--success-container);color:var(--on-success-container,var(--text-primary));font-size:12px;
}
.academy-hero-art{position:relative;min-height:300px;display:grid;place-items:center;isolation:isolate}
.academy-art-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border-subtle));border-radius:50%;transform:rotate(-22deg)}
.orbit-one{width:300px;height:260px}
.orbit-two{width:240px;height:330px;transform:rotate(28deg)}
.academy-art-main{
  position:relative;z-index:1;width:min(280px,75%);min-height:240px;padding:28px;
  border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border-subtle));border-radius:26px;
  background:color-mix(in srgb,var(--surface) 88%,var(--primary) 12%);
  box-shadow:0 24px 55px color-mix(in srgb,var(--shadow-color) 30%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transform:rotate(-3deg);
}
.academy-art-cap{
  display:grid;place-items:center;width:104px;height:104px;border-radius:30px;
  background:var(--primary-container);font-size:58px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 20%,transparent);
}
.academy-art-lines{width:100%;display:grid;gap:9px}
.academy-art-lines b{height:8px;border-radius:99px;background:var(--border-subtle)}
.academy-art-lines b:first-child{width:84%;background:color-mix(in srgb,var(--primary) 55%,var(--border-subtle))}
.academy-art-lines b:last-child{width:58%}
.academy-art-label{font-size:10px;letter-spacing:.18em;color:var(--text-muted);font-weight:800}
.academy-art-float{
  position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 15px;
  border:1px solid var(--border-subtle);border-radius:15px;
  background:var(--surface-elevated,var(--surface));
  box-shadow:0 12px 30px color-mix(in srgb,var(--shadow-color) 25%,transparent);
  color:var(--text-primary);
}
.academy-art-float > span{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--primary-container);color:var(--on-primary-container,var(--text-primary));font-size:20px;
}
.academy-art-float div{display:flex;flex-direction:column;line-height:1.55}
.academy-art-float b{font-size:12px;font-weight:800}
.academy-art-float small{font-size:10px;color:var(--text-muted)}
.float-top{top:20px;inset-inline-end:-3px}
.float-bottom{bottom:20px;inset-inline-start:-4px}

/* ------------------------------ Buttons ------------------------------ */
.academy-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 20px;border-radius:13px;
  border:1px solid transparent;font-size:14px;font-weight:800;letter-spacing:-.01em;
  cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
  white-space:normal;text-align:center;line-height:1.5;
}
.academy-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}
.academy-btn-primary{
  background:var(--primary);border-color:var(--primary);color:var(--text-on-primary);
  box-shadow:0 8px 22px color-mix(in srgb,var(--primary) 22%,transparent);
}
.academy-btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--primary) 28%,transparent)}
.academy-btn-ghost{background:var(--surface);color:var(--text-primary);border-color:var(--border-subtle)}
.academy-btn-ghost:hover{border-color:var(--primary);background:var(--hover-overlay);transform:translateY(-1px)}
.academy-btn-danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border-subtle))}
.academy-btn-danger:hover{background:var(--danger-container);color:var(--on-danger-container,var(--text-primary))}
.academy-btn-sm{min-height:36px;padding:7px 13px;font-size:12.5px;border-radius:11px}

/* ------------------------------ Toolbar (search + filter) ------------------------------ */
.academy-toolbar{
  display:grid;
  grid-template-columns:minmax(220px,1.4fr) minmax(0,2fr) minmax(150px,.7fr);
  gap:16px;align-items:center;
  padding:clamp(12px,1.6vw,18px);
  margin:0 0 18px;
  border:1px solid var(--border-subtle);border-radius:18px;
  background:var(--surface);
  box-shadow:0 10px 30px color-mix(in srgb,var(--shadow-color) 18%,transparent);
  scroll-margin-top:90px;
}
.academy-search{
  display:flex;align-items:center;gap:10px;min-width:0;
  background:var(--input-background);border:1px solid var(--input-border);border-radius:12px;padding:4px 14px;
}
.academy-search span{color:var(--text-muted);font-size:16px;flex:0 0 auto}
.academy-search input{
  flex:1;min-width:0;border:0;background:transparent;padding:11px 0;outline:none;font-size:14px;color:var(--text-primary);
}
.academy-search input::placeholder{color:var(--input-placeholder,var(--text-muted));opacity:1}
.academy-search:focus-within{border-color:var(--input-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
.academy-filters{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.academy-chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:40px;padding:8px 14px;border-radius:12px;
  border:1px solid var(--border-subtle);background:var(--surface-container-low);
  color:var(--text-secondary);font-size:12.5px;font-weight:750;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.academy-chip:hover{border-color:var(--primary);color:var(--text-primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}
.academy-chip.is-active{background:var(--primary);color:var(--text-on-primary);border-color:var(--primary)}
.academy-select{
  background:var(--input-background);border:1px solid var(--input-border);border-radius:12px;
  padding:10px 14px;font-size:13.5px;font-weight:650;min-height:44px;cursor:pointer;color:var(--text-primary);width:100%;
}
.academy-select:focus{outline:none;border-color:var(--input-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}

.academy-toolbar-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:0 0 22px;color:var(--text-muted);font-size:13px;font-weight:700;
}
.academy-toolbar-meta b{color:var(--text-primary);font-weight:800}
.academy-demo-note{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;
  background:var(--info-container);color:var(--on-info-container,var(--text-primary));
  font-size:11.5px;font-weight:800;border:1px solid color-mix(in srgb,var(--info) 35%,var(--border-subtle));
}

/* ------------------------------ Course grid ------------------------------ */
.academy-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);align-items:stretch;
}
.academy-course-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border:1px solid var(--border-subtle);border-radius:20px;background:var(--surface);
  box-shadow:0 8px 26px color-mix(in srgb,var(--shadow-color) 18%,transparent);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.academy-course-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--primary) 45%,var(--border-subtle));
  box-shadow:0 20px 44px color-mix(in srgb,var(--shadow-color) 28%,transparent);
}
.academy-course-cover{
  position:relative;aspect-ratio:16/9;min-height:0;overflow:hidden;
  background:radial-gradient(circle at 25% 20%,color-mix(in srgb,var(--primary) 22%,transparent),transparent 44%),
             var(--surface-container-high);
}
.academy-course-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.academy-course-card:hover .academy-course-cover img{transform:scale(1.04)}
.academy-cover-fallback{
  position:absolute;inset:0;display:grid;place-items:center;font-size:54px;color:var(--primary);
}
.academy-cover-cat{
  position:absolute;top:12px;inset-inline-start:12px;
  padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--background) 72%,transparent);
  backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--border-subtle) 70%,transparent);
  font-size:11.5px;font-weight:800;color:var(--text-primary);
}
.academy-cover-free{
  position:absolute;top:12px;inset-inline-end:12px;
  padding:5px 12px;border-radius:999px;
  background:var(--success-container);color:var(--on-success-container,var(--text-primary));
  font-size:11.5px;font-weight:800;border:1px solid color-mix(in srgb,var(--success) 30%,transparent);
}
.academy-cover-demo{
  position:absolute;bottom:12px;inset-inline-end:12px;
  padding:4px 10px;border-radius:999px;
  background:color-mix(in srgb,var(--background) 80%,transparent);
  backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--border-subtle) 70%,transparent);
  font-size:10.5px;font-weight:800;color:var(--text-muted);letter-spacing:.04em;
}
.academy-course-body{display:flex;flex:1;flex-direction:column;gap:12px;padding:clamp(15px,1.8vw,20px)}
.academy-course-body h3{margin:0;font-size:16.5px;font-weight:850;line-height:1.6;letter-spacing:-.02em;overflow-wrap:anywhere;text-wrap:pretty}
.academy-course-body h3 a:hover{color:var(--primary)}
.academy-course-desc{
  margin:0;color:var(--text-secondary);font-size:13px;line-height:1.9;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em;
  overflow-wrap:anywhere;
}
.academy-course-meta{display:flex;flex-wrap:wrap;gap:6px 12px;color:var(--text-muted);font-size:12px;font-weight:650;line-height:1.8}
.academy-course-meta span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.academy-course-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:14px;border-top:1px dashed var(--border-subtle);
}
.academy-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:16px;font-weight:900;overflow-wrap:anywhere}
.academy-price .now{color:var(--text-primary)}
.academy-price .was{text-decoration:line-through;color:var(--text-muted);font-size:12px;font-weight:500}
.academy-price .free{color:var(--success);font-size:14.5px;font-weight:800}
.acp-pill{
  display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;
  font-size:11px;font-weight:800;border:1px solid var(--border-subtle);
  background:var(--surface-container-high);color:var(--text-secondary);white-space:nowrap;
}
.acp-pill-on{background:var(--success-container);color:var(--on-success-container,var(--text-primary));border-color:transparent}

/* ------------------------------ Empty / alerts ------------------------------ */
.academy-empty{
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:48px 24px;text-align:center;border:1px dashed var(--border-subtle);border-radius:18px;
  background:linear-gradient(145deg,var(--surface-container-low),var(--surface));
  color:var(--text-secondary);
}
.academy-empty .icon{
  display:grid;place-items:center;width:58px;height:58px;border-radius:18px;
  background:var(--primary-container);color:var(--on-primary-container,var(--text-primary));font-size:27px;margin:0 0 8px;
}
.academy-empty b{display:block;font-size:16px;color:var(--text-primary);font-weight:800}
.academy-alert{
  padding:14px 18px;border-radius:13px;border:1px solid var(--border-subtle);
  background:var(--surface);font-size:13.5px;font-weight:650;margin-bottom:18px;
}
.academy-alert-error{border-color:color-mix(in srgb,var(--danger) 45%,var(--border-subtle));background:var(--danger-container);color:var(--on-danger-container,var(--text-primary))}
.academy-alert-success{border-color:color-mix(in srgb,var(--success) 45%,var(--border-subtle));background:var(--success-container);color:var(--on-success-container,var(--text-primary))}
.academy-alert-warning{border-color:color-mix(in srgb,var(--warning) 45%,var(--border-subtle));background:var(--warning-container);color:var(--on-warning-container,var(--text-primary))}

/* ------------------------------ Course detail page ------------------------------ */
.academy-course-head{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:26px}
.academy-course-cover-main{
  flex:0 1 430px;min-width:280px;border-radius:20px;overflow:hidden;
  border:1px solid var(--border-subtle);aspect-ratio:16/9;background:var(--surface-container-high);position:relative;
}
.academy-course-cover-main img{width:100%;height:100%;object-fit:cover}
.academy-course-cover-main .academy-cover-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:64px;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--primary) 22%,var(--surface-container-high)),var(--surface-container-high) 70%)}
.academy-course-info{flex:1 1 380px;min-width:300px}
.academy-course-info h1{margin:14px 0 10px;font-size:clamp(24px,3.4vw,36px);line-height:1.3;font-weight:900;letter-spacing:-.03em}
.academy-course-info .desc{color:var(--text-secondary);font-size:14.5px;margin:0 0 18px;white-space:pre-line;line-height:1.95}
.academy-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:6px}
.academy-meta-item{padding:12px 14px;border:1px solid var(--border-subtle);border-radius:13px;background:var(--surface-container)}
.academy-meta-item small{display:block;color:var(--text-muted);font-size:11.5px;font-weight:700;margin-bottom:3px}
.academy-meta-item b{font-size:13.5px;font-weight:750;overflow-wrap:anywhere}
.academy-course-columns{display:grid;grid-template-columns:1.65fr 1fr;gap:24px;align-items:start}
.academy-section{border:1px solid var(--border-subtle);border-radius:18px;background:var(--surface);padding:22px;margin-bottom:22px}
.academy-section > h2{margin:0 0 14px;font-size:17px;font-weight:800;display:flex;align-items:center;gap:10px}
.academy-section > h2::before{content:'';width:4px;height:20px;border-radius:4px;background:var(--primary)}

/* Syllabus */
.academy-syllabus{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.academy-syllabus li{display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px solid var(--border-subtle);border-radius:13px;background:var(--surface-container)}
.academy-syllabus .num{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:var(--primary-container);color:var(--on-primary-container,var(--text-primary));font-size:13px;font-weight:800}
.academy-syllabus .body{flex:1;min-width:0}
.academy-syllabus .body b{display:block;font-size:13.5px;font-weight:750;overflow-wrap:anywhere}
.academy-syllabus .body small{color:var(--text-muted);font-size:11.5px;font-weight:650}
.academy-syllabus .locked{color:var(--text-muted);font-size:16px}
.academy-syllabus li.is-free{border-color:color-mix(in srgb,var(--success) 40%,var(--border-subtle))}
.academy-syllabus .free-tag{padding:3px 10px;border-radius:999px;background:var(--success-container);color:var(--on-success-container,var(--text-primary));font-size:10.5px;font-weight:800}

/* Purchase card */
.academy-buy-card{position:sticky;top:88px;border:1px solid var(--border-subtle);border-radius:18px;background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:14px}
.academy-buy-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.academy-buy-price .now{font-size:26px;font-weight:900;color:var(--text-primary);letter-spacing:-.02em}
.academy-buy-price .was{font-size:15px;color:var(--text-muted);text-decoration:line-through}
.academy-buy-price .off{padding:3px 10px;border-radius:999px;background:var(--success-container);color:var(--on-success-container,var(--text-primary));font-size:11px;font-weight:800}
.academy-buy-note{color:var(--text-muted);font-size:12.5px;line-height:1.9;border-top:1px dashed var(--border-subtle);padding-top:12px}
.academy-buy-card .academy-btn{width:100%}

/* ------------------------------ Forms (public) ------------------------------ */
.academy-form{display:flex;flex-direction:column;gap:16px}
.academy-field{display:flex;flex-direction:column;gap:7px}
.academy-field > span{font-size:12.5px;font-weight:750;color:var(--text-secondary)}
.academy-field input,.academy-field textarea,.academy-field select{
  width:100%;background:var(--input-background);border:1px solid var(--input-border);border-radius:12px;
  padding:12px 14px;font-size:14px;outline:none;color:var(--text-primary);transition:border-color .16s ease,box-shadow .16s ease;
}
.academy-field input:focus,.academy-field textarea:focus,.academy-field select:focus{
  border-color:var(--input-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent);
}
.academy-field small{color:var(--text-muted);font-size:11.5px}
.academy-check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:650;color:var(--text-secondary);cursor:pointer}
.academy-check input{width:18px;height:18px;accent-color:var(--primary)}

/* ------------------------------ Tables (orders) ------------------------------ */
.academy-table-wrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:16px;background:var(--surface)}
.academy-table{width:100%;border-collapse:collapse;min-width:640px}
.academy-table th{padding:13px 16px;background:var(--surface-container);color:var(--text-secondary);font-size:12px;font-weight:800;text-align:start;white-space:nowrap;border-bottom:1px solid var(--border-subtle)}
.academy-table td{padding:13px 16px;font-size:13px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;overflow-wrap:anywhere}
.academy-table tbody tr:last-child td{border-bottom:0}
.academy-table tbody tr:hover td{background:var(--hover-overlay)}
.academy-table a{color:var(--primary);font-weight:700}
.academy-num{direction:ltr;unicode-bidi:embed;text-align:start;font-family:var(--academy-font,'Vazirmatn'),monospace;font-weight:700}

/* Status badges */
.academy-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap;border:1px solid transparent}
.academy-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.academy-badge-pending{background:var(--warning-container);color:var(--on-warning-container)}
.academy-badge-paid{background:var(--success-container);color:var(--on-success-container)}
.academy-badge-processing{background:var(--info-container);color:var(--on-info-container)}
.academy-badge-completed{background:var(--primary-container);color:var(--on-primary-container,var(--text-primary))}
.academy-badge-cancelled{background:var(--surface-container-high);color:var(--text-muted)}
.academy-badge-refunded{background:var(--danger-container);color:var(--on-danger-container)}

/* ------------------------------ Order flow ------------------------------ */
.academy-checkout-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.academy-summary{border:1px solid var(--border-subtle);border-radius:18px;background:var(--surface);overflow:hidden}
.academy-summary-row{display:flex;justify-content:space-between;gap:14px;padding:15px 20px;font-size:13.5px;border-bottom:1px solid var(--border-subtle);overflow-wrap:anywhere}
.academy-summary-row:last-child{border-bottom:0}
.academy-summary-row.total{background:var(--primary-container);color:var(--on-primary-container,var(--text-primary));font-weight:800;font-size:15px}
.academy-summary-row span:first-child{opacity:.85}
.academy-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.academy-timeline li{position:relative;padding:0 0 22px 0;padding-inline-start:26px;display:flex;flex-direction:column;gap:3px}
.academy-timeline li::before{content:'';position:absolute;inset-inline-start:5px;top:16px;bottom:-4px;width:2px;background:var(--border-subtle)}
.academy-timeline li:last-child::before{display:none}
.academy-timeline .dot{position:absolute;inset-inline-start:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--surface-container-highest);border:3px solid var(--border)}
.academy-timeline li.is-current .dot{background:var(--primary);border-color:color-mix(in srgb,var(--primary) 40%,var(--background))}
.academy-timeline .when{font-size:11.5px;color:var(--text-muted);font-weight:650}
.academy-timeline .what{font-size:13px;font-weight:750}
.academy-timeline .who{font-size:11.5px;color:var(--text-muted)}

/* ------------------------------ Closed page ------------------------------ */
.academy-closed{display:grid;place-items:center;padding:8vh 16px}
.academy-closed-card{max-width:520px;text-align:center;padding:44px 32px;border:1px solid var(--border-subtle);border-radius:24px;background:var(--surface);box-shadow:0 16px 45px color-mix(in srgb,var(--shadow-color) 22%,transparent)}
.academy-closed-icon{font-size:44px;margin-bottom:14px}
.academy-closed-card h1{margin:0 0 10px;font-size:21px}
.academy-closed-card p{color:var(--text-secondary);font-size:14px;margin:0 0 22px}

/* ------------------------------ Pagination ------------------------------ */
.academy-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.academy-pagination a,.academy-pagination span{
  min-width:40px;height:40px;display:grid;place-items:center;padding:0 12px;border-radius:11px;
  border:1px solid var(--border-subtle);font-size:13px;font-weight:750;color:var(--text-secondary);
}
.academy-pagination a:hover{border-color:var(--primary);color:var(--text-primary)}
.academy-pagination .is-current{background:var(--primary);color:var(--text-on-primary);border-color:var(--primary)}

/* ------------------------------ Responsive ------------------------------ */
@media(max-width:1080px){
  .academy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academy-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .academy-toolbar .academy-select{grid-column:1/-1;width:100%}
}
@media(max-width:860px){
  .academy-hero{grid-template-columns:1fr;padding:32px 22px}
  .academy-hero-art{min-height:260px;max-width:480px;width:100%;margin:0 auto}
  .academy-course-columns{grid-template-columns:1fr}
  .academy-checkout-grid{grid-template-columns:1fr}
  .academy-buy-card{position:static}
}
@media(max-width:680px){
  .academy-topbar-inner{flex-direction:column;align-items:stretch;gap:12px;padding:12px 16px;min-height:auto}
  .academy-topbar-nav{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding:2px 0 6px;scrollbar-width:thin}
  .academy-topbar-nav > a{flex:0 0 auto;padding:8px 12px;font-size:12.5px}
  .academy-main{width:calc(100% - 24px);padding:18px 0 56px}
  .academy-hero{padding:26px 18px;border-radius:22px;margin-bottom:22px}
  .academy-hero h1{font-size:clamp(26px,7.5vw,34px);line-height:1.45}
  .academy-hero p{font-size:13px;line-height:2}
  .academy-hero-cta{gap:9px}
  .academy-hero-cta .academy-btn{flex:1 1 140px}
  .academy-toolbar{grid-template-columns:1fr;gap:10px;padding:12px;border-radius:16px}
  .academy-filters{gap:6px}
  .academy-chip{padding:7px 11px;font-size:12px}
  .academy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .academy-course-card{border-radius:16px}
  .academy-course-cover{aspect-ratio:4/3}
  .academy-course-body{padding:13px;gap:9px}
  .academy-course-body h3{font-size:14px;line-height:1.6}
  .academy-course-desc{font-size:12px;-webkit-line-clamp:2}
  .academy-course-meta{font-size:11px;gap:4px 8px}
  .academy-course-foot{align-items:stretch;flex-direction:column;gap:10px;padding-top:11px}
  .academy-course-foot .academy-btn{width:100%}
  .academy-price{font-size:14px}
  .academy-footer-inner{grid-template-columns:1fr;align-items:flex-start;gap:18px;padding:24px 18px}
}
@media(max-width:420px){
  .academy-grid{grid-template-columns:1fr}
  .academy-course-cover{aspect-ratio:16/9}
  .academy-course-foot{align-items:center;flex-direction:row}
  .academy-course-foot .academy-btn{width:auto;flex:1}
  .academy-hero-cta .academy-btn{flex-basis:100%}
  .academy-table{min-width:520px}
}
@media(max-width:360px){
  .academy-main{width:calc(100% - 16px)}
  .academy-hero{padding:22px 14px}
}
@media(prefers-reduced-motion:reduce){
  .academy-body *,.academy-body *::before,.academy-body *::after{
    transition:none!important;animation:none!important;scroll-behavior:auto!important;
  }
}

/* ============================================================
   v45 — in-site video player + private learn page
   ============================================================ */

/* HTML5 <video> wrapper — keeps the player responsive and themed. */
.academy-body .academy-video-wrap{
  position:relative;width:100%;max-width:100%;margin:0 0 14px;
  background:var(--surface-container-low,#0A1926);
  border:1px solid var(--border-subtle,var(--border));
  border-radius:var(--radius-lg,16px);overflow:hidden;
  aspect-ratio:16/9;
}
.academy-body .academy-video-wrap video{
  display:block;width:100%;height:100%;background:#000;
}
.academy-body .academy-intro-video{margin-bottom:24px}
.academy-body .academy-intro-video h2{margin:0 0 12px;font-size:18px;font-weight:800}

/* Per-session video row inside the syllabus list. */
.academy-body .academy-session-video{
  list-style:none;padding:0 0 14px 44px;margin:0 0 6px;
  border-bottom:1px solid var(--border-subtle,var(--border));
}
.academy-body .academy-session-video .academy-video-wrap{margin:0 0 4px}
.academy-body .academy-session-video.is-empty{padding:6px 0 14px 44px}
.academy-body .academy-session-video.has-external{padding:8px 0 14px 44px}

/* Public course syllabus row tweaks (lock + free + open). */
.academy-body .academy-syllabus li.is-locked{opacity:.78}
.academy-body .academy-syllabus li.is-open .body b{color:var(--text-primary)}
.academy-body .academy-syllabus li .locked{
  color:var(--warning,var(--text-muted));font-size:18px;font-weight:700;
}

/* ---------- Private learn.php page ---------- */

.academy-body .academy-learn-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:24px;
  align-items:start;margin:0 0 28px;padding-bottom:24px;
  border-bottom:1px solid var(--border-subtle,var(--border));
}
.academy-body .academy-learn-cover img,
.academy-body .academy-learn-cover .academy-cover-fallback{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;
  background:linear-gradient(135deg,var(--surface-container,#142A3B),var(--surface-container-high,#193142));
  display:flex;align-items:center;justify-content:center;font-size:48px;
}
.academy-body .academy-learn-info h1{margin:6px 0 8px;font-size:clamp(20px,3vw,28px);font-weight:800;line-height:1.3}
.academy-body .academy-learn-info .desc{margin:0;color:var(--text-secondary);font-size:13.5px;line-height:1.7}
.academy-body .academy-learn-meta{
  display:flex;gap:14px;flex-wrap:wrap;margin:14px 0;
  font-size:13px;color:var(--text-secondary);
}
.academy-body .academy-learn-meta b{color:var(--text-primary)}
.academy-body .academy-learn-actions{display:flex;gap:10px;flex-wrap:wrap}

.academy-body .academy-learn-sessions h2{margin:0 0 14px;font-size:18px;font-weight:800}
.academy-body .academy-learn-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.academy-body .academy-learn-session{
  border:1px solid var(--border-subtle,var(--border));
  border-radius:14px;padding:18px;background:var(--surface-container,#142A3B);
}
.academy-body .academy-learn-session.is-locked{opacity:.85;background:var(--surface-container-low,#0A1926)}
.academy-body .academy-learn-session-head{
  display:flex;align-items:flex-start;gap:14px;margin-bottom:12px;
}
.academy-body .academy-learn-session-head .num{
  flex:0 0 32px;height:32px;display:grid;place-items:center;
  background:var(--primary);color:var(--text-on-primary,#fff);
  border-radius:50%;font-weight:800;font-size:13px;
}
.academy-body .academy-learn-session-meta{flex:1;min-width:0}
.academy-body .academy-learn-session-meta b{display:block;font-size:15px;font-weight:700;color:var(--text-primary)}
.academy-body .academy-learn-session-meta small{display:inline-block;margin-inline-end:10px;color:var(--text-muted);font-size:12px}
.academy-body .academy-learn-session-meta .free-tag{color:var(--success)}
.academy-body .academy-learn-session-meta .locked-tag{color:var(--warning)}

.academy-body .academy-learn-locked{
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  padding:18px;background:var(--surface-container-high,#193142);border-radius:10px;
  color:var(--text-secondary);font-size:13.5px;line-height:1.7;
}
.academy-body .academy-learn-locked span[aria-hidden="true"]{font-size:24px}

.academy-body .academy-learn-footer{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;padding-top:18px;
  border-top:1px solid var(--border-subtle,var(--border));
}

/* Responsive — stack the head card on narrow viewports. */
@media (max-width: 720px){
  .academy-body .academy-learn-head{grid-template-columns:1fr;gap:14px}
  .academy-body .academy-learn-cover{order:2}
}

/* ============================================================
   v46 — collapsible in-site video player
   ============================================================ */

/* Each syllabus session is now a flex row: num + body + play button. */
.academy-body .academy-syllabus-item{
  list-style:none;padding:0;margin:0 0 8px;
  border:1px solid var(--border-subtle,var(--border));
  border-radius:14px;overflow:hidden;
  background:var(--surface-container,#142A3B);
}
.academy-body .academy-syllabus-item.is-locked{opacity:.78}
.academy-body .academy-syllabus-item.is-free{border-inline-start:3px solid var(--success,var(--primary))}
.academy-body .academy-syllabus-head{
  display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:60px;
}
.academy-body .academy-syllabus-head .num{
  flex:0 0 32px;height:32px;display:grid;place-items:center;
  background:var(--primary-container,#142A3B);color:var(--on-primary-container,#fff);
  border-radius:8px;font-weight:800;font-size:12.5px;
}
.academy-body .academy-syllabus-head .body{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.academy-body .academy-syllabus-head .body b{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.academy-body .academy-syllabus-head .body small{font-size:11.5px;color:var(--text-muted)}
.academy-body .academy-syllabus-head .body .free-tag{color:var(--success,var(--primary))}
.academy-body .academy-syllabus-head .body .dl-link{margin-inline-start:auto}

/* Play toggle button. */
.academy-body .academy-video-toggle{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border:0;border-radius:10px;cursor:pointer;
  background:var(--primary,#76B7FF);color:var(--text-on-primary,#0b0e14);
  font:inherit;font-weight:700;font-size:13px;line-height:1;
  transition:transform .15s,background .15s;
}
.academy-body .academy-video-toggle:hover{background:var(--primary-hover,var(--primary));transform:translateY(-1px)}
.academy-body .academy-video-toggle .play-icon{font-size:14px;line-height:1}
.academy-body .academy-video-toggle.is-open{
  background:var(--surface-container-high,#193142);
  color:var(--text-secondary);
  border:1px solid var(--border-subtle,var(--border));
}
.academy-body .academy-syllabus-head .locked{
  flex:0 0 auto;font-size:18px;color:var(--warning,var(--text-muted));
  padding:0 8px;
}

/* Slot — placed below the head, hidden by default. */
.academy-body .academy-video-slot{
  padding:0 14px 14px;border-top:1px solid var(--border-subtle,var(--border));
}
.academy-body .academy-video-slot[hidden]{display:none;padding:0}
.academy-body .academy-video-slot .academy-video-wrap{
  margin:14px 0 0;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.academy-body .academy-video-slot .academy-video-wrap video{
  border-radius:12px;
}

/* On the learn page, the head already has a similar structure — make the
   toggle align to the inline-end. */
.academy-body .academy-learn-session-head .academy-video-toggle{
  margin-inline-start:auto;
}

/* Mobile tweaks. */
@media (max-width:540px){
  .academy-body .academy-syllabus-head{flex-wrap:wrap;gap:8px}
  .academy-body .academy-syllabus-head .body{order:1;width:100%}
  .academy-body .academy-syllabus-head .academy-video-toggle{order:2;margin-inline-start:auto}
  .academy-body .academy-syllabus-head .locked{order:2;margin-inline-start:auto}
}

/* ============================================================
   v48 — Premium centered academy (mirrors the storefront)
   ============================================================

   The user reported the academy layout was "tilted to the left" (به چپ
   متمایل شده). The root cause is that .academy-main uses
   `width:min(1320px,100% - 40px)` with `margin:0 auto` — which is
   centered horizontally — but the academy-hero's grid puts the copy on
   the inline-start side and the art on the inline-end, so on wide
   screens the visual weight sits on the right (in RTL: on the left).
   The user expects the same centered, breathing-room look as the new
   storefront.

   This section mirrors the v47 storefront refresh:
   - Wider container (1320 → 1400).
   - Centered top bar that stays sticky.
   - Centered hero with a subtle gold accent line at the bottom.
   - Centered toolbar (search + filters + sort) with active chips
     using the primary color.
   - 3-col course grid with max-width 1400; 2-col on tablets; 1-col
     on phones.
   - Course cards with bigger padding, smoother hover lift, image
     zoom on hover.
   - Empty state with a friendlier icon.
*/

/* Wider container — same as storefront. */
.academy-body .academy-main{
  width:min(1400px,calc(100% - 32px));
  padding:clamp(20px,3vw,40px) 0 80px;
}

/* Center the top bar's brand and nav — same as shop-top. */
.academy-body .academy-topbar{
  position:sticky;
  top:14px;
  z-index:50;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-subtle);
  border-radius:22px;
  margin:14px auto;
  max-width:1400px;
  box-shadow:0 10px 32px color-mix(in srgb,var(--text-primary) 4%,transparent);
  /* The original .academy-topbar has border-bottom — override with a
     full border to give the rounded "pill" feel like the shop-top. */
}
.academy-body .academy-topbar-inner{
  width:min(1400px,100%);
  min-height:64px;
  margin:0 auto;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.academy-body .academy-topbar-inner > *{
  flex:0 0 auto;
}
.academy-body .academy-topbar-nav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

/* Hero — centered, dramatic, with a gold accent line at the bottom. */
.academy-body .academy-hero{
  text-align:center;
  margin:14px auto 28px;
  max-width:1400px;
  padding:clamp(36px,5vw,68px) clamp(22px,4vw,52px);
  border:1px solid var(--border-subtle);
  border-radius:30px;
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb,var(--primary) 18%,transparent), transparent 60%),
    linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 92%,var(--primary) 4%));
  box-shadow:0 20px 58px color-mix(in srgb,var(--text-primary) 5%,transparent);
  position:relative;
  overflow:hidden;
  /* Override the original grid layout — copy + art stacked OR centered
     side-by-side with equal column sizes. */
  grid-template-columns:minmax(0,1fr);
  gap:0;
}
.academy-body .academy-hero::after{
  content:"";
  position:absolute;
  bottom:0;
  inset-inline:50%;
  width:160px;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  transform:translateX(-50%);
  border-radius:3px;
  opacity:.7;
  /* Override the original positioning — was top:2% left:5%. */
  top:auto;
  z-index:0;
  pointer-events:none;
}
.academy-body .academy-hero-copy{
  position:relative;
  z-index:2;
  text-align:center;
  margin:0 auto;
  max-width:760px;
}
.academy-body .academy-kicker{
  display:inline-flex;
  margin:0 auto;
  padding:7px 14px;
  border-radius:999px;
  background:color-mix(in srgb,var(--primary) 8%,var(--surface));
  color:var(--text-primary);
  border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border-subtle));
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.01em;
}
.academy-body .academy-hero h1{
  margin:14px auto 8px;
  max-width:760px;
  font-size:clamp(30px,4.5vw,52px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.04em;
}
.academy-body .academy-hero p{
  margin:0 auto;
  max-width:680px;
  color:var(--text-secondary);
  font-size:clamp(13.5px,1.45vw,16.5px);
  line-height:1.95;
}
.academy-body .academy-hero-cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px auto 0;
  justify-content:center;
}
.academy-body .academy-hero-trust{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:22px auto 0;
  justify-content:center;
  color:var(--text-secondary);
  font-size:12px;
  font-weight:700;
}
/* Hide the decorative art on wide screens too — keep the hero text-centered. */
.academy-body .academy-hero-art{
  display:none;
}

/* Toolbar — centered, sticky-able, with nicer filter chips. */
.academy-body .academy-toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:18px 20px;
  margin:0 auto 24px;
  max-width:1400px;
  border:1px solid var(--border-subtle);
  border-radius:22px;
  background:var(--surface);
  box-shadow:0 10px 32px color-mix(in srgb,var(--text-primary) 4%,transparent);
}
.academy-body .academy-search{
  flex:1 1 280px;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--background);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  padding:10px 14px;
}
.academy-body .academy-search input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:none;
  color:var(--text-primary);
  font:inherit;
  font-size:14px;
}
.academy-body .academy-search input:focus{
  outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);
  outline-offset:2px;
  border-radius:6px;
}
.academy-body .academy-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.academy-body .academy-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--border-subtle);
  border-radius:999px;
  background:var(--background);
  font:inherit;
  font-size:13px;
  font-weight:750;
  color:var(--text-secondary);
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
}
.academy-body .academy-chip:hover{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 6%,var(--background));
  color:var(--text-primary);
  transform:translateY(-1px);
}
.academy-body .academy-chip.is-active{
  border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 14%,var(--surface));
  color:var(--text-on-primary,var(--text-primary));
  font-weight:800;
}
.academy-body .academy-select{
  min-height:40px;
  padding:8px 14px;
  border:1px solid var(--border-subtle);
  border-radius:14px;
  background:var(--background);
  color:var(--text-primary);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  outline:none;
}
.academy-body .academy-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent);
}

/* Toolbar meta — centered, smaller. */
.academy-body .academy-toolbar-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin:0 auto 18px;
  max-width:1400px;
  color:var(--text-secondary);
  font-size:13px;
  text-align:center;
}
.academy-body .academy-toolbar-meta b{
  color:var(--text-primary);
  font-weight:800;
}
.academy-body .academy-demo-note{
  color:var(--text-muted);
  font-size:12px;
}

/* Course grid — centered, max-width, more breathing room. */
.academy-body .academy-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
  max-width:1400px;
  margin:0 auto;
}

/* Course card — more premium feel, mirroring the product card. */
.academy-body .academy-course-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border-subtle);
  background:var(--surface);
  box-shadow:0 8px 28px color-mix(in srgb,var(--text-primary) 4%,transparent);
  border-radius:22px;
  overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  position:relative;
}
.academy-body .academy-course-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--primary) 45%,var(--border-subtle));
  box-shadow:0 22px 48px color-mix(in srgb,var(--text-primary) 10%,transparent);
}
.academy-body .academy-course-cover{
  position:relative;
  aspect-ratio:16/9;
  background:radial-gradient(circle at 30% 20%, color-mix(in srgb,var(--primary) 8%,transparent), transparent 50%), color-mix(in srgb,var(--surface) 86%,var(--primary) 4%);
  border-bottom:1px solid var(--border-subtle);
  overflow:hidden;
}
.academy-body .academy-course-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.academy-body .academy-course-card:hover .academy-course-cover img{
  transform:scale(1.05);
}
.academy-body .academy-cover-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-size:48px;
  color:color-mix(in srgb,var(--primary) 25%,var(--text-muted));
}
.academy-body .academy-cover-cat,
.academy-body .academy-cover-free,
.academy-body .academy-cover-demo{
  position:absolute;
  top:14px;
  border-radius:999px;
  padding:6px 12px;
  font-size:11.5px;
  font-weight:850;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:2;
}
.academy-body .academy-cover-cat{
  inset-inline-start:14px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
}
.academy-body .academy-cover-free{
  inset-inline-end:14px;
  background:color-mix(in srgb,var(--success) 22%,var(--surface));
  color:var(--on-success-container,var(--text-primary));
  border:1px solid color-mix(in srgb,var(--success) 40%,transparent);
}
.academy-body .academy-cover-demo{
  inset-inline-end:14px;
  top:48px;
  background:color-mix(in srgb,var(--warning) 22%,var(--surface));
  color:var(--on-warning-container,var(--text-primary));
  border:1px solid color-mix(in srgb,var(--warning) 40%,transparent);
}
.academy-body .academy-course-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:20px;
  gap:10px;
}
.academy-body .academy-course-body h3{
  margin:0;
  font-size:17.5px;
  font-weight:850;
  line-height:1.5;
  letter-spacing:-.025em;
  color:var(--text-primary);
}
.academy-body .academy-course-body h3 a{
  color:inherit;
  text-decoration:none;
}
.academy-body .academy-course-body h3 a:hover{
  color:var(--primary);
}
.academy-body .academy-course-desc{
  margin:0;
  font-size:13px;
  line-height:1.85;
  color:var(--text-secondary);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.academy-body .academy-course-meta{
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--text-muted);
}
.academy-body .academy-course-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:8px;
}
.academy-body .academy-price{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.academy-body .academy-price .now{
  font-size:18px;
  font-weight:900;
  color:var(--text-primary);
  letter-spacing:-.02em;
}
.academy-body .academy-price .was{
  font-size:13px;
  color:var(--text-muted);
  text-decoration:line-through;
}
.academy-body .academy-price .free{
  font-size:18px;
  font-weight:900;
  color:var(--success);
}

/* Empty state — friendlier. */
.academy-body .academy-empty{
  margin:24px auto;
  max-width:540px;
  padding:52px 28px;
  border:1px dashed var(--border-subtle);
  border-radius:26px;
  background:var(--surface);
  text-align:center;
  box-shadow:0 10px 32px color-mix(in srgb,var(--text-primary) 4%,transparent);
}
.academy-body .academy-empty .icon{
  font-size:46px;
  color:var(--text-muted);
  display:block;
  margin-bottom:14px;
  opacity:.7;
}
.academy-body .academy-empty b{
  display:block;
  margin-bottom:6px;
  color:var(--text-primary);
  font-size:15px;
  font-weight:800;
}
.academy-body .academy-empty{
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.85;
}

/* Responsive — keep 2-col on tablets, drop to 1-col only on phones. */
@media (max-width:1100px){
  .academy-body .academy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
}
@media (max-width:700px){
  .academy-body .academy-main{width:calc(100% - 24px)}
  .academy-body .academy-topbar{
    margin:10px auto;
    border-radius:18px;
  }
  .academy-body .academy-topbar-inner{
    padding:13px 14px;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .academy-body .academy-topbar-nav{
    justify-content:space-between;
    gap:6px;
  }
  .academy-body .academy-topbar-nav > a{
    flex:1 1 0;
    min-width:0;
    text-align:center;
    padding:9px 8px;
    font-size:12px;
  }
  .academy-body .academy-hero{
    padding:30px 20px;
    border-radius:22px;
    margin-bottom:18px;
  }
  .academy-body .academy-hero h1{font-size:clamp(28px,8vw,34px);line-height:1.3}
  .academy-body .academy-hero p{font-size:13.5px}
  .academy-body .academy-toolbar{
    padding:14px;
    border-radius:18px;
    flex-direction:column;
    align-items:stretch;
  }
  .academy-body .academy-search{flex:1 1 100%}
  .academy-body .academy-filters{justify-content:flex-start;gap:8px}
  .academy-body .academy-chip{font-size:12px;padding:7px 11px}
  .academy-body .academy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .academy-body .academy-course-card{border-radius:16px}
  .academy-body .academy-course-cover{aspect-ratio:16/10}
  .academy-body .academy-course-body{padding:14px}
  .academy-body .academy-course-body h3{font-size:14.5px}
  .academy-body .academy-course-desc{font-size:12px;line-height:1.7}
  .academy-body .academy-course-foot{padding-top:8px}
  .academy-body .academy-price .now,
  .academy-body .academy-price .free{font-size:16px}
}
@media (max-width:420px){
  .academy-body .academy-grid{grid-template-columns:1fr}
}

/* Reduced motion — disable all hover animations. */
@media (prefers-reduced-motion:reduce){
  .academy-body *,
  .academy-body *::before,
  .academy-body *::after{
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
  .academy-body .academy-course-card:hover{transform:none}
  .academy-body .academy-course-card:hover .academy-course-cover img{transform:none}
}

/* ============================================================
   v51 — mobile: move academy topbar to bottom
   ============================================================ */

@media (max-width:700px){
  .academy-body .academy-topbar{
    position:fixed!important;
    top:auto!important;
    bottom:14px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:calc(100% - 24px)!important;
    max-width:520px!important;
    border-radius:18px!important;
    z-index:100!important;
    margin:0!important;
  }
  /* Add bottom padding so content isn't hidden behind the fixed bar. */
  .academy-body .academy-main{
    padding-bottom:100px!important;
  }
  .academy-body .academy-topbar-inner{
    padding:12px 14px!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:6px!important;
  }
  .academy-body .academy-topbar-nav{
    gap:4px!important;
  }
  .academy-body .academy-topbar-nav > a{
    flex:1 1 0!important;
    min-width:0!important;
    font-size:11.5px!important;
    padding:7px 6px!important;
    gap:3px!important;
    text-align:center!important;
  }
  .academy-body .academy-topbar-brand .academy-brand-text small{
    display:none!important;
  }
}

/* ============================================================
   v52 — Invisible Center Container (universal centering)
   ============================================================

   The user reported visible "2 lines" (left and right gaps of ~200px)
   and the academy not being centered between them. The root cause:
   multiple CSS versions (v36/v37/v48/v51) each set different widths and
   paddings on .academy-main, .academy-topbar-inner, .academy-footer-inner,
   .academy-hero, .academy-toolbar, .academy-grid — some at 1320px,
   some at 1400px, some with `100% - 40px`, some with `100% - 32px`,
   some with no horizontal padding at all. The cascade produced
   inconsistent centering — each section aligned to a slightly different
   axis.

   This section overrides ALL previous width/margin/padding rules with
   a single unified centering model:

     --academy-container-width: 1400px  (the max content width)
     --academy-container-padding: clamp(16px, 5vw, 48px)

   Every top-level section (.academy-topbar-inner, .academy-main,
   .academy-footer-inner, .academy-hero, .academy-toolbar,
   .academy-toolbar-meta, .academy-grid, .academy-empty,
   .academy-section, .academy-learn-head, .academy-learn-sessions,
   .academy-learn-footer) gets:

     max-width: var(--academy-container-width)
     margin-inline: auto
     padding-inline: var(--academy-container-padding)

   This guarantees every section sits on the SAME vertical center axis,
   with EQUAL left/right spacing, regardless of which older rule tried
   to set a different width. The `!important` flag defeats all the
   competing rules from v36/v37/v48/v51.
*/

.academy-body{
  --academy-container-width:1400px;
  --academy-container-padding:clamp(16px,5vw,48px);
}

/* Top bar inner — the nav strip. */
.academy-body .academy-topbar-inner{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:var(--academy-container-padding)!important;
}

/* Main content wrapper. */
.academy-body .academy-main{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:var(--academy-container-padding)!important;
  padding-block:clamp(24px,3.4vw,46px) 80px!important;
}

/* Footer inner. */
.academy-body .academy-footer-inner{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:var(--academy-container-padding)!important;
}

/* Hero — full-width inside the main, with its own inner padding. */
.academy-body .academy-hero{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:var(--academy-container-padding)!important;
}

/* Toolbar (search + filters + sort). */
.academy-body .academy-toolbar{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:clamp(18px,3vw,32px)!important;
}

/* Toolbar meta (result count line). */
.academy-body .academy-toolbar-meta{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:var(--academy-container-padding)!important;
}

/* Course grid. */
.academy-body .academy-grid{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}

/* Empty state. */
.academy-body .academy-empty{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
}

/* Section blocks (syllabus, about, etc. on course page). */
.academy-body .academy-section{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
}

/* Learn page — head + sessions + footer. */
.academy-body .academy-learn-head{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
}
.academy-body .academy-learn-sessions{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
}
.academy-body .academy-learn-footer{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
}

/* Closed page card. */
.academy-body .academy-closed{
  width:auto!important;
  max-width:var(--academy-container-width)!important;
  margin-inline:auto!important;
  padding-inline:var(--academy-container-padding)!important;
}

/* Mobile: reduce the container padding so content uses more of the
   viewport, but keep it centered. */
@media (max-width:700px){
  .academy-body{
    --academy-container-padding:clamp(12px,4vw,20px);
  }
  .academy-body .academy-main{
    padding-block:18px 100px!important;
  }
  /* On mobile the topbar is a floating bottom bar — let it use full width. */
  .academy-body .academy-topbar-inner{
    max-width:calc(100% - 24px)!important;
    padding-inline:14px!important;
  }
}