/* ================================================================
   COURSELORD ACADEMY — Complete Design System v2
   All variables, all components, no external dependencies
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ───────────────────────────────────────────────── */
:root {
  /* Brand purple */
  --brand-50:#fdf6ff; --brand-100:#f5ebfa; --brand-200:#e8caf2;
  --brand-300:#d49fe3; --brand-400:#b96dd0; --brand-500:#9b4ab5;
  --brand-600:#692979; --brand-700:#4a1a56; --brand-800:#2e0f38; --brand-900:#1a0d24;
  /* Grays */
  --gray-50:#f9f9fb; --gray-100:#f1f0f5; --gray-200:#e2e0ea;
  --gray-300:#c8c4d6; --gray-400:#9e99b2; --gray-500:#6e6882;
  --gray-600:#4a455c; --gray-700:#2f2b3d; --gray-800:#1e1a2e; --gray-900:#120f20;
  /* Semantic */
  --success:#22c55e; --success-bg:#f0fdf4;
  --warning:#f59e0b; --warning-bg:#fffbeb;
  --danger:#ef4444;  --danger-bg:#fef2f2;
  --info:#3b82f6;    --info-bg:#eff6ff;
  /* Compat aliases — old var names still work */
  --dark-50:var(--gray-50); --dark-100:var(--gray-100); --dark-200:var(--gray-200);
  --dark-300:var(--gray-300); --dark-400:var(--gray-400); --dark-500:var(--gray-500);
  --dark-600:var(--gray-600); --dark-700:var(--gray-700); --dark-800:var(--gray-800);
  --dark-900:var(--gray-900);
  /* Fonts */
  --font-display:'Montserrat',sans-serif;
  --font-body:'Open Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  /* Radius */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-full:9999px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px;
  --radius-2xl:32px; --radius-full:9999px;
  /* Shadows */
  --shadow-sm:0 1px 3px rgba(26,13,36,.1);
  --shadow-md:0 4px 16px rgba(26,13,36,.13);
  --shadow-lg:0 10px 32px rgba(26,13,36,.18);
  --shadow-xl:0 20px 50px rgba(26,13,36,.22);
  --shadow-brand:0 4px 20px rgba(105,41,121,.35);
  --shadow-brand-lg:0 8px 32px rgba(105,41,121,.45);
  /* Transitions */
  --t:.15s ease; --tm:.25s ease;
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:#fff;color:var(--gray-800);
  line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-600);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--brand-500)}
button,input,select,textarea{font-family:var(--font-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--gray-900)}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}

/* ── Layout helpers ──────────────────────────────────────────── */
.container    {max-width:1200px;margin:0 auto;padding:0 1.5rem}
.container-sm {max-width:760px; margin:0 auto;padding:0 1.5rem}
.flex         {display:flex}
.flex-center  {display:flex;align-items:center;justify-content:center}
.flex-between {display:flex;align-items:center;justify-content:space-between}
.flex-col     {display:flex;flex-direction:column}
.items-center {align-items:center}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.gap-4{gap:2rem}
.hidden{display:none!important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--gray-400)}.text-brand{color:var(--brand-600)}
.text-sm{font-size:.875rem}.text-xs{font-size:.75rem}
.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fw-display{font-family:var(--font-display)}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.divider{border:none;border-top:1px solid var(--gray-100);margin:1.25rem 0}
.stars{color:#f59e0b}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.625rem 1.375rem;font-family:var(--font-display);font-size:.875rem;font-weight:600;
  border-radius:var(--r-md);border:none;cursor:pointer;transition:all var(--tm);
  white-space:nowrap;text-decoration:none;line-height:1.4;letter-spacing:.01em}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--brand-500);color:#fff;box-shadow:var(--shadow-brand-lg);transform:translateY(-1px)}
.btn-secondary{background:var(--brand-100);color:var(--brand-700);border:1px solid var(--brand-200)}
.btn-secondary:hover{background:var(--brand-200);color:var(--brand-700)}
.btn-outline{background:transparent;color:var(--brand-600);border:1.5px solid var(--brand-600)}
.btn-outline:hover{background:var(--brand-600);color:#fff}
.btn-ghost{background:transparent;color:var(--gray-600);border:1px solid var(--gray-200)}
.btn-ghost:hover{background:var(--gray-50);color:var(--gray-800);border-color:var(--gray-300)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626;color:#fff}
.btn-success{background:var(--success);color:#fff}.btn-success:hover{background:#16a34a;color:#fff}
.btn-white{background:#fff;color:var(--brand-700);font-weight:700}
.btn-white:hover{background:var(--brand-100);color:var(--brand-700)}
.btn-dark{background:var(--brand-900);color:#fff}
.btn-dark:hover{background:var(--brand-800);color:#fff}
.btn-sm{padding:.375rem .875rem;font-size:.8rem}
.btn-lg{padding:.875rem 2rem;font-size:1rem;border-radius:var(--r-lg)}
.btn-xl{padding:1.0625rem 2.5rem;font-size:1.0625rem;border-radius:var(--r-lg)}
.btn-full{width:100%}

/* ── Forms ───────────────────────────────────────────────────── */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.82rem;font-weight:600;color:var(--gray-700);
  margin-bottom:.4rem;font-family:var(--font-display)}
.req{color:var(--danger);margin-left:2px}
.form-control{width:100%;padding:.625rem .875rem;background:#fff;
  border:1.5px solid var(--gray-200);border-radius:var(--r-md);color:var(--gray-800);
  font-size:.9rem;outline:none;transition:border-color var(--t),box-shadow var(--t)}
.form-control:focus{border-color:var(--brand-600);box-shadow:0 0 0 3px rgba(105,41,121,.12)}
.form-control::placeholder{color:var(--gray-300)}
.form-control.is-invalid{border-color:var(--danger)}
.form-control:disabled{background:var(--gray-50);cursor:not-allowed;color:var(--gray-400)}
textarea.form-control{resize:vertical;min-height:90px}
select.form-control{cursor:pointer}
.form-hint{font-size:.75rem;color:var(--gray-400);margin-top:.3rem}
.form-error{font-size:.78rem;color:var(--danger);margin-top:.3rem;font-weight:500}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ── Cards ───────────────────────────────────────────────────── */
.card{background:#fff;border-radius:var(--r-xl);border:1px solid var(--gray-200);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.card-hover{transition:all var(--tm)}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--brand-200)}
.card-body{padding:1.5rem}
.card-header{padding:1.125rem 1.5rem;border-bottom:1px solid var(--gray-100);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.card-title{font-size:.95rem;font-weight:700;color:var(--gray-900);
  font-family:var(--font-display)}
.card-footer{padding:1rem 1.5rem;border-top:1px solid var(--gray-100);background:var(--gray-50)}

/* ── Badges ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;
  border-radius:var(--r-full);font-size:.72rem;font-weight:700;font-family:var(--font-display)}
.badge-brand  {background:var(--brand-100);color:var(--brand-700)}
.badge-success{background:#dcfce7;color:#166534}
.badge-warning{background:#fef9c3;color:#854d0e}
.badge-danger {background:#fee2e2;color:#991b1b}
.badge-info   {background:#dbeafe;color:#1e40af}
.badge-neutral{background:var(--gray-100);color:var(--gray-600)}
.badge-free   {background:#d1fae5;color:#065f46}
.badge-new    {background:#fce7f3;color:#9d174d}

/* ── Alerts ──────────────────────────────────────────────────── */
.alert{padding:.875rem 1.125rem;border-radius:var(--r-md);font-size:.875rem;
  display:flex;align-items:flex-start;gap:.625rem;border-left:4px solid;margin-bottom:1rem}
.alert-success{background:var(--success-bg);border-color:var(--success);color:#14532d}
.alert-error  {background:var(--danger-bg); border-color:var(--danger); color:#7f1d1d}
.alert-warning{background:var(--warning-bg);border-color:var(--warning);color:#78350f}
.alert-info   {background:var(--info-bg);   border-color:var(--info);   color:#1e3a8a}

/* ── Progress ────────────────────────────────────────────────── */
.progress{height:6px;background:var(--gray-100);border-radius:var(--r-full);overflow:hidden}
.progress-bar{height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand-600),var(--brand-500));transition:width .6s ease}
.progress-lg{height:10px}
.progress-sm{height:4px}

/* ── Avatar ──────────────────────────────────────────────────── */
.avatar{width:36px;height:36px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:.8rem;font-weight:700;color:#fff;
  flex-shrink:0;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-xs{width:26px;height:26px;font-size:.6rem}
.avatar-sm{width:32px;height:32px;font-size:.72rem}
.avatar-md{width:44px;height:44px;font-size:.95rem}
.avatar-lg{width:60px;height:60px;font-size:1.2rem}
.avatar-xl{width:84px;height:84px;font-size:1.6rem}

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.875rem}
.table th{padding:.75rem 1rem;background:var(--gray-50);font-family:var(--font-display);
  font-size:.72rem;font-weight:700;color:var(--gray-500);text-transform:uppercase;
  letter-spacing:.06em;border-bottom:1.5px solid var(--gray-100);text-align:left;white-space:nowrap}
.table td{padding:.875rem 1rem;border-bottom:1px solid var(--gray-100);
  color:var(--gray-700);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover{background:var(--gray-50)}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
.page-item{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-md);font-size:.875rem;font-weight:600;border:1px solid var(--gray-200);
  color:var(--gray-600);cursor:pointer;transition:all var(--t);text-decoration:none;
  font-family:var(--font-display)}
.page-item:hover{border-color:var(--brand-600);color:var(--brand-600);background:var(--brand-50)}
.page-item.active{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
.page-item.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--gray-100);overflow-x:auto;margin-bottom:1.5rem;gap:0}
.tab{padding:.75rem 1.25rem;font-family:var(--font-display);font-size:.875rem;font-weight:600;
  color:var(--gray-400);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-2px;
  white-space:nowrap;transition:all var(--t);text-decoration:none;
  display:flex;align-items:center;gap:.4rem}
.tab:hover{color:var(--brand-600)}
.tab.active{color:var(--brand-600);border-bottom-color:var(--brand-600)}

/* ── Stats ───────────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.25rem;margin-bottom:2rem}
.stat-card{background:#fff;border-radius:var(--r-xl);padding:1.375rem;
  border:1px solid var(--gray-100);display:flex;align-items:flex-start;gap:.875rem}
.stat-icon{width:46px;height:46px;border-radius:var(--r-lg);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem}
.stat-icon.brand{background:var(--brand-100)}
.stat-icon.green{background:#dcfce7}
.stat-icon.amber{background:#fef9c3}
.stat-icon.blue {background:#dbeafe}
.stat-icon.rose {background:#fce7f3}
.stat-val{font-family:var(--font-display);font-size:1.625rem;font-weight:800;
  color:var(--gray-900);line-height:1;margin-bottom:.2rem}
.stat-lbl{font-size:.8rem;color:var(--gray-400);font-weight:500}

/* ── Course Card ─────────────────────────────────────────────── */
.course-card{background:#fff;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--gray-200);transition:all var(--tm);
  display:flex;flex-direction:column;text-decoration:none;color:inherit}
.course-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--brand-200)}
.course-thumb{aspect-ratio:16/9;overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--brand-800),var(--brand-600));
  display:flex;align-items:center;justify-content:center;font-size:3.5rem}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.course-card:hover .course-thumb img{transform:scale(1.05)}
.course-thumb-badge{position:absolute;top:.75rem;left:.75rem}
.course-body{padding:1.125rem;flex:1;display:flex;flex-direction:column}
.course-cat{font-size:.7rem;font-weight:700;color:var(--brand-600);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.375rem;font-family:var(--font-display)}
.course-title{font-size:.95rem;font-weight:700;color:var(--gray-900);
  line-height:1.35;margin-bottom:.5rem;font-family:var(--font-display);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.course-instructor{font-size:.78rem;color:var(--gray-400);margin-bottom:.75rem}
.course-meta{display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:auto;padding-top:.75rem;border-top:1px solid var(--gray-100)}
.course-price{font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:var(--brand-700)}
.course-price.free{color:var(--success)}

/* ── Section headings ────────────────────────────────────────── */
.section-eyebrow{display:inline-block;font-family:var(--font-display);font-size:.72rem;
  font-weight:700;color:var(--brand-600);text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem}
.section-title{font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.25rem);
  font-weight:800;letter-spacing:-.5px;color:var(--gray-900)}
.section-sub{color:var(--gray-400);font-size:1rem;line-height:1.75;margin-top:.5rem}

/* ── Hero highlight text ─────────────────────────────────────── */
.hl,.highlight{background:linear-gradient(135deg,var(--brand-400),var(--brand-300));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Feature card ────────────────────────────────────────────── */
.feature-card{padding:1.5rem;border-radius:var(--r-xl);border:1px solid var(--gray-200);
  background:#fff;transition:all .25s}
.feature-card:hover{border-color:var(--brand-200);transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* ── Category card ───────────────────────────────────────────── */
.category-card{background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:var(--r-xl);padding:1.5rem;text-align:center;transition:all .25s;
  text-decoration:none;color:inherit;display:block}
.category-card:hover{background:#fff;border-color:var(--brand-300);
  transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* ── Settings panel (profile pages) ─────────────────────────── */
.settings-panel{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}

/* ═══════════════════════════════════════════════════
   STOREFRONT NAV  (dark bg → light logo)
═══════════════════════════════════════════════════ */
.sf-nav{background:var(--brand-900);border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;z-index:50;height:70px;display:flex;align-items:center}
.sf-nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.sf-logo{display:flex;align-items:center}
.sf-logo img{height:38px;width:auto}
.sf-links{display:flex;gap:.25rem;align-items:center}
.sf-link{padding:.5rem .875rem;border-radius:var(--r-md);color:var(--gray-300);
  font-size:.875rem;font-weight:500;transition:all var(--t);text-decoration:none}
.sf-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.sf-link.active{color:var(--brand-300)}
.sf-cta{display:flex;align-items:center;gap:.625rem}
.btn-nav-ghost{background:transparent;color:var(--gray-200);
  border:1px solid rgba(255,255,255,.2);padding:.5rem 1.125rem;border-radius:var(--r-md);
  font-size:.875rem;font-weight:500;cursor:pointer;font-family:var(--font-display);transition:all var(--t)}
.btn-nav-ghost:hover{background:rgba(255,255,255,.1);color:#fff}

/* Cart icon in nav */
.cart-link{display:flex;align-items:center;gap:.375rem;position:relative}
.cart-link svg{opacity:.8}
.cart-badge{position:absolute;top:-6px;right:-6px;background:var(--brand-500);color:#fff;
  font-size:.65rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.cart-icon-link{position:relative;display:flex;align-items:center;padding:.5rem;
  color:var(--gray-300);transition:all var(--t);border-radius:var(--r-md)}
.cart-icon-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.cart-badge-nav{position:absolute;top:-2px;right:-2px;background:var(--brand-500);color:#fff;
  font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ── Hero ────────────────────────────────────────────────────── */
.hero{background:var(--brand-900);color:#fff;position:relative;overflow:hidden;padding:5rem 0 4.5rem}
.hero-mesh{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-mesh::before{content:'';position:absolute;top:-30%;right:-10%;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(105,41,121,.4) 0%,transparent 65%)}
.hero-mesh::after{content:'';position:absolute;bottom:-30%;left:-15%;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(155,74,181,.2) 0%,transparent 70%)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(105,41,121,.25);border:1px solid rgba(155,74,181,.35);
  border-radius:var(--r-full);padding:.325rem .875rem;font-size:.78rem;font-weight:600;
  color:var(--brand-300);font-family:var(--font-display);margin-bottom:1.5rem;letter-spacing:.04em}
.hero-dot{width:7px;height:7px;background:var(--success);border-radius:50%;
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-family:var(--font-display);font-size:clamp(2.25rem,5vw,3.75rem);
  font-weight:900;line-height:1.08;letter-spacing:-1.5px;color:#fff;margin-bottom:1.25rem}
.hero-sub{font-size:1.05rem;color:var(--gray-300);line-height:1.75;max-width:520px;
  margin-bottom:2rem;font-weight:300}
.hero-actions{display:flex;gap:.875rem;flex-wrap:wrap}
.hero-stats{display:flex;gap:2.5rem;margin-top:3rem;padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.hero-stat-num{font-family:var(--font-display);font-size:1.75rem;font-weight:800;color:#fff;line-height:1}
.hero-stat-lbl{font-size:.78rem;color:var(--gray-400);margin-top:.25rem}

/* ═══════════════════════════════════════════════════
   AUTH LAYOUT  (dark panel → light logo | white panel → dark logo)
═══════════════════════════════════════════════════ */
.auth-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-panel-dark{background:var(--brand-900);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:3rem}
.auth-panel-dark::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 50%,rgba(105,41,121,.55) 0%,transparent 65%)}
.auth-visual{position:relative;z-index:1}
.auth-visual-logo{margin-bottom:2.5rem}
.auth-visual-logo img{height:42px;width:auto}
.auth-visual-title{font-family:var(--font-display);font-size:1.875rem;font-weight:800;
  color:#fff;margin-bottom:.75rem;line-height:1.15}
.auth-visual-sub{color:var(--gray-300);font-size:.9rem;line-height:1.65}
.auth-visual-badges{display:flex;gap:.625rem;margin-top:2rem;flex-wrap:wrap}
.auth-visual-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:.45rem .875rem;font-size:.78rem;color:#fff;
  font-family:var(--font-display);font-weight:600}
.auth-form-side{background:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:3rem 3.5rem;overflow-y:auto}
.auth-form-logo{margin-bottom:2rem}
.auth-form-logo img{height:36px;width:auto}
.auth-form-title{font-family:var(--font-display);font-size:1.625rem;font-weight:800;
  color:var(--gray-900);margin-bottom:.375rem}
.auth-form-sub{color:var(--gray-400);font-size:.875rem;margin-bottom:2rem;line-height:1.55}

/* ═══════════════════════════════════════════════════
   DASHBOARD SIDEBAR LAYOUT  (dark sidebar → light logo)
═══════════════════════════════════════════════════ */
.dash-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{background:var(--brand-900);border-right:1px solid rgba(255,255,255,.07);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}
.sidebar-head{padding:1.375rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07)}
.sidebar-head img{height:32px;width:auto}
.sidebar-nav{padding:.625rem 0;flex:1}
.sidebar-section-label{padding:.625rem 1.25rem .375rem;font-size:.62rem;font-weight:700;
  color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-display)}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.25rem;
  color:rgba(255,255,255,.55);font-size:.875rem;font-weight:500;
  transition:all var(--t);cursor:pointer;text-decoration:none;
  border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.nav-item.active{background:linear-gradient(90deg,rgba(105,41,121,.35),transparent);
  color:var(--brand-300);border-left-color:var(--brand-500)}
.nav-icon{width:18px;text-align:center;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--brand-600);color:#fff;
  border-radius:var(--r-full);padding:.1rem .45rem;font-size:.62rem;font-weight:700}
.sidebar-foot{padding:1rem 1.25rem;border-top:1px solid rgba(255,255,255,.07)}
.sidebar-user{display:flex;align-items:center;gap:.75rem;padding:.375rem 0}
.u-name{font-size:.83rem;font-weight:600;color:rgba(255,255,255,.8);
  font-family:var(--font-display);line-height:1.2}
.u-role{font-size:.7rem;color:rgba(255,255,255,.35)}
.nav-logout{color:rgba(239,68,68,.7)!important}
.nav-logout:hover{color:#ef4444!important;background:rgba(239,68,68,.08)!important}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar{background:#fff;border-bottom:1px solid var(--gray-100);padding:0 1.75rem;
  height:62px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:10}
.topbar-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--gray-900)}
.topbar-right{display:flex;align-items:center;gap:.625rem}
.icon-btn{width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--gray-200);
  background:transparent;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--t);color:var(--gray-500);position:relative;font-size:1rem}
.icon-btn:hover{background:var(--brand-50);border-color:var(--brand-300);color:var(--brand-600)}
.notif-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;
  border-radius:50%;background:var(--danger);border:2px solid #fff}

/* ── Main content area ───────────────────────────────────────── */
.main-wrap{background:var(--gray-50);min-height:100vh;overflow:hidden}
.page-head{padding:1.75rem 1.75rem .5rem;
  display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.page-title{font-size:1.5rem;font-weight:800;color:var(--gray-900);font-family:var(--font-display)}
.page-sub{color:var(--gray-400);font-size:.875rem;margin-top:.2rem}
.page-body{padding:1.25rem 1.75rem 2rem}

/* ═══════════════════════════════════════════════════
   COURSE BUILDER
═══════════════════════════════════════════════════ */
.builder-layout{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}
.section-block{background:#fff;border:1.5px solid var(--gray-200);border-radius:var(--r-xl);
  overflow:hidden;margin-bottom:1rem;transition:border-color var(--t)}
.section-block:hover{border-color:var(--brand-300)}
.section-head{padding:.875rem 1.25rem;background:var(--gray-50);border-bottom:1px solid var(--gray-200);
  display:flex;align-items:center;gap:.75rem;cursor:pointer;user-select:none}
.section-head:hover{background:var(--brand-50)}
.section-title-text{font-family:var(--font-display);font-size:.875rem;font-weight:700;
  color:var(--gray-800);flex:1}
.section-count{font-size:.72rem;color:var(--gray-400)}
.section-chevron{color:var(--gray-400);transition:transform var(--t);font-size:.75rem;flex-shrink:0}
.section-block.collapsed .section-chevron{transform:rotate(-90deg)}
.section-body{}
.lesson-row{display:flex;align-items:center;gap:.75rem;padding:.625rem 1.25rem;
  border-bottom:1px solid var(--gray-100);transition:background var(--t)}
.lesson-row:last-child{border-bottom:none}
.lesson-row:hover{background:var(--gray-50)}
.lesson-type-icon{width:28px;height:28px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.lesson-type-video{background:#fce7f3}
.lesson-type-text{background:#eff6ff}
.lesson-type-pdf{background:#fef9c3}
.lesson-type-quiz{background:#dcfce7}
.lesson-title{font-size:.875rem;color:var(--gray-700);flex:1;font-weight:500}
.lesson-duration{font-size:.72rem;color:var(--gray-400);font-family:var(--font-mono)}
.lesson-preview-badge{font-size:.65rem;font-weight:700;color:var(--success);
  background:#dcfce7;padding:.1rem .45rem;border-radius:var(--r-full)}
.add-section-bar{border:2px dashed var(--gray-200);border-radius:var(--r-xl);
  padding:1.5rem;text-align:center;cursor:pointer;transition:all var(--t);
  color:var(--gray-400);font-family:var(--font-display);font-size:.875rem;font-weight:600}
.add-section-bar:hover{border-color:var(--brand-400);color:var(--brand-600);background:var(--brand-50)}

/* ═══════════════════════════════════════════════════
   LEARN / PLAYER LAYOUT
═══════════════════════════════════════════════════ */
.learn-wrap{display:grid;grid-template-columns:1fr 320px;min-height:100vh;background:var(--gray-900)}
.learn-main{display:flex;flex-direction:column;min-height:100vh}
.learn-topbar{background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07);
  height:54px;display:flex;align-items:center;padding:0 1.25rem;gap:1rem;
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
.back-btn{color:rgba(255,255,255,.5);font-size:.82rem;text-decoration:none;
  display:flex;align-items:center;gap:.375rem;font-family:var(--font-display);
  font-weight:500;transition:color var(--t);white-space:nowrap}
.back-btn:hover{color:#fff}
.course-name{flex:1;font-family:var(--font-display);font-size:.875rem;font-weight:600;
  color:#fff;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learn-progress-wrap{display:flex;align-items:center;gap:.625rem;flex-shrink:0}
.learn-progress-track{width:100px;height:4px;background:rgba(255,255,255,.15);
  border-radius:var(--r-full);overflow:hidden}
.learn-progress-fill{height:100%;background:var(--brand-500);border-radius:var(--r-full);transition:width .5s}
.learn-progress-pct{font-size:.72rem;font-weight:700;color:var(--brand-400);
  font-family:var(--font-mono);white-space:nowrap}
.learn-content{flex:1;padding:1.5rem}

/* Curriculum sidebar */
.curriculum-sidebar{background:var(--brand-900);border-left:1px solid rgba(255,255,255,.07);
  height:100vh;overflow-y:auto;position:sticky;top:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.curriculum-sidebar::-webkit-scrollbar{width:4px}
.curriculum-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:2px}
.curriculum-head{padding:.875rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between}
.curriculum-head-title{font-family:var(--font-display);font-size:.8rem;font-weight:700;
  color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em}
.c-section{border-bottom:1px solid rgba(255,255,255,.05)}
.c-section-head{padding:.75rem 1.25rem;display:flex;align-items:center;gap:.625rem;
  cursor:pointer;transition:background var(--t);user-select:none}
.c-section-head:hover{background:rgba(255,255,255,.04)}
.c-section-title{font-size:.82rem;font-weight:600;color:rgba(255,255,255,.65);
  font-family:var(--font-display);flex:1;line-height:1.3}
.c-section-meta{font-size:.7rem;color:rgba(255,255,255,.3)}
.c-chevron{color:rgba(255,255,255,.3);font-size:.7rem;transition:transform .2s;flex-shrink:0}
.c-lesson{display:flex;align-items:center;gap:.625rem;
  padding:.5rem 1.25rem .5rem 1.75rem;cursor:pointer;transition:all var(--t);text-decoration:none}
.c-lesson:hover{background:rgba(255,255,255,.04)}
.c-lesson.active{background:rgba(105,41,121,.3);border-left:3px solid var(--brand-500)}
.c-lesson-check{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:.55rem;
  flex-shrink:0;transition:all var(--t)}
.c-lesson-check.done{background:var(--success);border-color:var(--success);color:#fff}
.c-lesson-title{font-size:.8rem;color:rgba(255,255,255,.5);flex:1;line-height:1.35}
.c-lesson.active .c-lesson-title{color:var(--brand-300);font-weight:600}
.c-lesson-dur{font-size:.68rem;color:rgba(255,255,255,.25);font-family:var(--font-mono)}

/* Video player */
.video-wrap{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.video-wrap video,.video-wrap iframe{width:100%;display:block;min-height:480px;max-height:600px}
.video-watermark{position:absolute;bottom:12px;right:12px;font-size:.6rem;
  color:rgba(255,255,255,.15);font-family:var(--font-mono);pointer-events:none;user-select:none}

/* Lesson text content */
.lesson-text-content{color:rgba(255,255,255,.8);line-height:1.85;font-size:.95rem}
.lesson-text-content h2{font-family:var(--font-display);color:#fff;font-size:1.3rem;margin:1.5rem 0 .75rem}
.lesson-text-content h3{font-family:var(--font-display);color:#fff;font-size:1.1rem;margin:1.25rem 0 .5rem}
.lesson-text-content p{margin-bottom:1rem}
.lesson-text-content ul,.lesson-text-content ol{padding-left:1.5rem;margin-bottom:1rem}
.lesson-text-content li{margin-bottom:.375rem}
.lesson-text-content code{background:rgba(255,255,255,.1);padding:.15rem .4rem;
  border-radius:4px;font-family:var(--font-mono);font-size:.85em}
.lesson-text-content pre{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);padding:1rem;overflow-x:auto;margin-bottom:1rem}

/* Quiz */
.quiz-box{background:var(--brand-800);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-xl);padding:1.5rem}
.quiz-q-text{font-weight:600;color:#fff;font-size:.95rem;margin-bottom:.875rem;line-height:1.5}
.quiz-option{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);cursor:pointer;transition:all var(--t);margin-bottom:.4rem}
.quiz-option:hover{background:rgba(105,41,121,.2);border-color:var(--brand-500)}
.quiz-option input[type=radio]{accent-color:var(--brand-500)}
.quiz-option span{font-size:.875rem;color:rgba(255,255,255,.75)}

/* ═══════════════════════════════════════════════════
   MODALS
═══════════════════════════════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(15,6,24,.75);
  backdrop-filter:blur(4px);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:1rem;
  opacity:0;pointer-events:none;transition:opacity var(--tm)}
.overlay.open{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:var(--r-xl);width:100%;max-width:520px;
  max-height:92vh;overflow-y:auto;
  transform:translateY(20px) scale(.97);transition:transform var(--tm);box-shadow:var(--shadow-xl)}
.overlay.open .modal{transform:translateY(0) scale(1)}
.modal-head{padding:1.375rem 1.75rem;border-bottom:1px solid var(--gray-100);
  display:flex;justify-content:space-between;align-items:center}
.modal-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--gray-900)}
.modal-body{padding:1.75rem}
.modal-foot{padding:1rem 1.75rem;border-top:1px solid var(--gray-100);
  display:flex;justify-content:flex-end;gap:.625rem;background:var(--gray-50)}
.close-btn{width:30px;height:30px;border-radius:var(--r-md);border:1px solid var(--gray-200);
  background:transparent;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--gray-400);font-size:.9rem;transition:all var(--t)}
.close-btn:hover{background:var(--gray-100);color:var(--gray-700)}

/* ── Toast ───────────────────────────────────────────────────── */
.toast-stack{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;
  display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--brand-900);color:#fff;border-radius:var(--r-lg);
  padding:.875rem 1.25rem;min-width:280px;max-width:360px;box-shadow:var(--shadow-xl);
  display:flex;align-items:center;gap:.75rem;font-size:.875rem;pointer-events:all;
  animation:slideInR .3s ease;border-left:4px solid var(--brand-500)}
.toast.success{border-left-color:var(--success)}
.toast.error  {border-left-color:var(--danger)}
.toast.warning{border-left-color:var(--warning)}
.toast.info   {border-left-color:var(--info)}
@keyframes slideInR{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOutR{from{transform:translateX(0);opacity:1}to{transform:translateX(110%);opacity:0}}
.toast.out{animation:slideOutR .25s ease forwards}

/* ── Empty state ─────────────────────────────────────────────── */
.empty{text-align:center;padding:3.5rem 2rem;color:var(--gray-400)}
.empty-icon{font-size:3rem;margin-bottom:.875rem;opacity:.6}
.empty h3{font-family:var(--font-display);font-size:1rem;font-weight:700;
  color:var(--gray-600);margin-bottom:.375rem}
.empty p{font-size:.875rem;max-width:280px;margin:0 auto .875rem}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:1024px){
  .dash-layout{grid-template-columns:220px 1fr}
  .learn-wrap{grid-template-columns:1fr}
  .curriculum-sidebar{height:auto;position:relative}
  .auth-layout{grid-template-columns:1fr}
  .auth-panel-dark{display:none}
  .builder-layout{grid-template-columns:1fr}
  .settings-panel{grid-template-columns:1fr}
}
@media(max-width:768px){
  .dash-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap;gap:1.5rem}
  .sf-links{display:none}
  .page-body,.page-head{padding-left:1.25rem;padding-right:1.25rem}
  .topbar{padding:0 1.25rem}
  .stats-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .auth-form-side{padding:2rem 1.5rem}
}

/* Extra vars used in views */
:root {
  --gold:#f59e0b; --gold-dim:#fbbf24; --rose:#f43f5e;
  --bg-base:#fff; --bg-surface:var(--gray-50); --bg-raised:#fff;
  --bg-overlay:rgba(15,6,24,.75);
  --border:var(--gray-200); --border-strong:var(--gray-300);
  --nav-height:70px;
  --t:.15s ease; --tm:.25s ease;
}

/* Thumbnail upload */
.thumbnail-upload-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--t);
  background: var(--gray-50);
}
.thumbnail-upload-area:hover, .thumbnail-upload-area.drag-over {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
.thumbnail-preview {
  position: relative;
  display: inline-block;
}
.thumbnail-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: var(--r-lg);
  object-fit: cover;
}
.thumbnail-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.thumbnail-placeholder {
  pointer-events: none;
}

/* Drag-drop sortable */
.sortable-ghost {
  opacity: 0.4;
  background: var(--brand-50) !important;
}
.section-block.sortable-ghost {
  background: var(--brand-100) !important;
  border: 2px dashed var(--brand-400);
}

/* ═══════════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE
   All breakpoints cascade upward from mobile
═══════════════════════════════════════════════════ */

/* ── Hamburger toggle (storefront) ──────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 60;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gray-300);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ── Mobile drawer (storefront) ─────────────────── */
.mobile-drawer {
  display: none;
  position: fixed;
  top: 70px; left: 0; right: 0; bottom: 0;
  background: var(--brand-900);
  z-index: 55;
  padding: 1.5rem;
  flex-direction: column;
  gap: 0.375rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-drawer.open {
  transform: translateX(0);
}
.mobile-drawer .sf-link {
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-md);
  color: var(--gray-300);
  text-decoration: none;
  display: block;
  transition: all var(--t);
}
.mobile-drawer .sf-link:hover,
.mobile-drawer .sf-link.active {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.mobile-drawer .mobile-cta {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ── Mobile breadcrumbs ─────────────────────────── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--gray-400);
  margin-bottom: 0.75rem;
}
.breadcrumbs a {
  color: var(--brand-600);
  text-decoration: none;
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs .sep {
  color: var(--gray-300);
}

/* ── Curriculum overlay (mobile drawer) ── */
.curriculum-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
}
.curriculum-overlay.open { display: block; }

/* ── Course detail sidebar grid (overrides inline style) ── */
.course-detail-grid { display: grid; grid-template-columns: 1fr 360px; gap: 3rem; align-items: start; }
.course-detail-grid .course-sidebar { position: sticky; top: 90px; }

/* ── Two-col hero section (home page) ── */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

/* ── What you'll learn grid ── */
.learn-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; }

/* ── Base: everything stacks on <576px ──────────── */
@media (max-width: 575px) {
  .mobile-drawer { top: 60px; }
  .container { padding: 0 1rem; }
  .container-sm { padding: 0 1rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .settings-panel { grid-template-columns: 1fr; }
  .builder-layout { grid-template-columns: 1fr; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero-title { font-size: 1.75rem !important; letter-spacing: -0.5px; }
  .hero-sub { font-size: 0.9rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-stats { gap: 1.25rem; }
  .hero-stat-num { font-size: 1.25rem; }
  .sf-nav { height: 60px; }
  .sf-links { display: none; }
  .sf-cta .btn-nav-ghost { display: none; }
  .sf-cta .btn-primary { display: none; }
  .hamburger { display: flex; }
  .mobile-drawer { display: flex; }
  .section-title { font-size: 1.35rem; }
  .section-sub { font-size: 0.88rem; }
  .page-head { padding: 1.25rem 1rem 0.25rem; flex-direction: column; }
  .page-title { font-size: 1.2rem; }
  .page-body { padding: 0.75rem 1rem 1.5rem; }
  .topbar { padding: 0 1rem; height: 54px; }
  .topbar-title { font-size: 0.9rem; }
  .card-body { padding: 1rem; }
  .card-header { padding: 0.875rem 1rem; }
  .auth-form-side { padding: 1.75rem 1.25rem; }
  .auth-panel-dark { display: none; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-form-title { font-size: 1.25rem; }
  .modal { max-width: 100%; margin: 0.5rem; max-height: 96vh; border-radius: var(--r-lg); }
  .modal-body { padding: 1.25rem; }
  .modal-head { padding: 1rem 1.25rem; }
  .modal-foot { padding: 0.75rem 1.25rem; }
  .overlay { padding: 0.5rem; align-items: flex-end; }
  .overlay.open .modal { transform: translateY(0); }
  .tabs { gap: 0; overflow-x: auto; }
  .tab { padding: 0.625rem 0.875rem; font-size: 0.8rem; }
  .course-title { font-size: 0.88rem; }
  .table th, .table td { padding: 0.5rem 0.625rem; font-size: 0.78rem; }
  .pagination { gap: 0.2rem; }
  .page-item { min-width: 32px; height: 32px; font-size: 0.78rem; }
  .stat-card { padding: 1rem; }
  .stat-val { font-size: 1.25rem; }
  .learn-content { padding: 1rem; }
  .learn-topbar { height: 48px; padding: 0 0.75rem; gap: 0.5rem; }
  .course-name { font-size: 0.78rem; }
  .learn-progress-track { width: 60px; }
  .learn-progress-pct.learn-pct-text { display: none; }
  .learn-wrap { grid-template-columns: 1fr; }
  .curriculum-sidebar { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 360px; z-index: 100; flex-direction: column; height: 100vh; overflow-y: auto; box-shadow: -4px 0 32px rgba(0,0,0,0.5); transform: translateX(100%); transition: transform 0.3s ease; }
  .curriculum-sidebar.mobile-open { display: flex; transform: translateX(0); }
  #curriculumToggle { display: flex !important; }
  #curriculumClose { display: flex !important; }
  .curriculum-overlay.open { display: block; }
  .toast-stack { bottom: 0.75rem; right: 0.75rem; left: 0.75rem; }
  .toast { min-width: unset; max-width: unset; width: 100%; }
  .video-wrap video, .video-wrap iframe { min-height: 220px; max-height: 280px; }
  .lesson-text-content { font-size: 0.9rem; }
  .lesson-text-content h2 { font-size: 1.15rem; }
  .lesson-text-content h3 { font-size: 1rem; }
  .quiz-box { padding: 1rem; }
  .quiz-option { padding: 0.625rem 0.75rem; }
  .empty { padding: 2rem 1rem; }
  .sf-logo img { height: 30px; }
  footer { padding: 2rem 0 !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .section-block .lesson-row { padding: 0.5rem 0.75rem; }
  .section-head { padding: 0.625rem 0.75rem; }
  .add-section-bar { padding: 1rem; font-size: 0.8rem; }
  .lesson-type-icon { width: 24px; height: 24px; font-size: 0.7rem; }
  .lesson-title { font-size: 0.8rem; }
  .dash-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .curriculum-head { padding: 0.625rem 0.875rem; }
  .c-section-head { padding: 0.625rem 0.875rem; }
  .c-lesson { padding: 0.4rem 0.875rem 0.4rem 1.25rem; }
  .course-thumb { aspect-ratio: 16/9; font-size: 2.5rem; }
  .course-body { padding: 0.875rem; }
  .course-price { font-size: 0.92rem; }
  .categories-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
  .category-card { padding: 1rem; }
  .feature-card { padding: 1.125rem; }
  .section-eyebrow { font-size: 0.65rem; }
  .btn-lg { padding: 0.75rem 1.5rem; font-size: 0.9rem; }
  .btn-xl { padding: 0.875rem 1.75rem; font-size: 0.95rem; }
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
  .learn-grid-2 { grid-template-columns: 1fr; }
  .course-detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .course-detail-grid .course-sidebar { position: relative; top: auto; }
}

/* ── Tablet (768px – 1023px) ────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-2, .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .hero-title { font-size: clamp(1.75rem, 4vw, 2.75rem); }
  .hero-stats { gap: 1.75rem; }
  .settings-panel { grid-template-columns: 1fr; }
  .sf-links { display: flex; gap: 0.125rem; }
  .sf-link { padding: 0.375rem 0.625rem; font-size: 0.8rem; }
  .hamburger { display: none !important; }
  .mobile-drawer { display: none !important; }
  .dash-layout { grid-template-columns: 220px 1fr; }
  .sidebar { display: flex; }
  .learn-wrap { grid-template-columns: 1fr 280px; }
  .curriculum-sidebar { height: 100vh; position: sticky; display: flex; flex-direction: column; }
  #curriculumToggle { display: none !important; }
  #curriculumClose { display: none !important; }
  .curriculum-overlay { display: none !important; }
  .page-body { padding: 1rem 1.25rem 1.5rem; }
  .page-head { padding: 1.25rem 1.25rem 0.25rem; }
  .auth-form-side { padding: 2rem 2rem; }
  .modal { max-width: 480px; }
  .builder-layout { grid-template-columns: 1fr 300px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr 1fr !important; gap: 2rem !important; }
  .video-wrap video, .video-wrap iframe { min-height: 360px; max-height: 450px; }
  .course-detail-grid { gap: 2rem; }
  .course-detail-grid .course-sidebar { position: relative; top: auto; }
  .hero-split { gap: 2.5rem; }
}

/* ── Small tablet / large phone (576px – 767px) ── */
@media (min-width: 576px) and (max-width: 767px) {
  .learn-wrap { grid-template-columns: 1fr; }
  .curriculum-sidebar { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 85vw; max-width: 360px; z-index: 100; flex-direction: column; height: 100vh; overflow-y: auto; box-shadow: -4px 0 32px rgba(0,0,0,0.5); transform: translateX(100%); transition: transform 0.3s ease; }
  .curriculum-sidebar.mobile-open { display: flex; transform: translateX(0); }
  #curriculumToggle { display: flex !important; }
  #curriculumClose { display: flex !important; }
  .curriculum-overlay.open { display: block; }
  .learn-progress-pct.learn-pct-text { display: none; }
  .hamburger { display: none !important; }
  .mobile-drawer { display: none !important; }
}

/* ── Desktop (1024px+) — existing styles work ──── */
@media (min-width: 1024px) {
  .hamburger { display: none !important; }
  .mobile-drawer { display: none !important; }
  .sf-links { display: flex; }
  .sidebar { display: flex; }
}