/* ============================================================
   EDUNOVA GLOBAL STYLESHEET v3
   Learning-first LMS design system
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DESIGN TOKENS ── */
:root {
  --purple:       #534AB7;
  --purple-light: #EEEDFE;
  --purple-mid:   #7F77DD;
  --purple-dark:  #3C3489;
  --teal:         #1D9E75;
  --teal-light:   #E1F5EE;
  --teal-mid:     #5DCAA5;
  --amber:        #EF9F27;
  --amber-light:  #FAEEDA;
  --amber-dark:   #633806;
  --blue-light:   #E6F1FB;
  --blue:         #378ADD;
  --blue-dark:    #0C447C;
  --red:          #E24B4A;
  --red-light:    #FCEBEB;
  --red-dark:     #791F1F;
  --green-light:  #EAF3DE;
  --green:        #639922;
  --green-dark:   #27500A;
  --bg:           #F4F3FC;
  --bg-alt:       #FAFAF8;
  --text-dark:    #1a1a2e;
  --text-mid:     #555577;
  --text-light:   #9999BB;
  --border:       #D5D3F0;
  --border-light: #EBEBF5;
  --white:        #ffffff;
  --shadow-sm:    0 2px 8px rgba(83,74,183,0.07);
  --shadow-md:    0 4px 16px rgba(83,74,183,0.10);
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    18px;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-dark);
  min-height: 100vh;
  line-height: 1.5;
}

/* ── LAYOUT SHELL ── */
.app-shell      { min-height: 100vh; display: flex; flex-direction: column; }
.app-body       { display: grid; grid-template-columns: 220px 1fr; flex: 1; min-height: 0; }
.app-main       { padding: 28px; background: var(--bg); overflow-y: auto; }

/* ── TOP NAV ── */
.top-nav        { background: var(--purple); padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.top-nav-brand  { display: flex; align-items: center; gap: 10px; }
.top-nav-logo   { width: 34px; height: 34px; background: var(--purple-mid); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; }
.top-nav-title  { color: white; font-size: 18px; font-weight: 600; }
.top-nav-sub    { color: #AFA9EC; font-size: 11px; margin-top: 1px; }
.top-nav-right  { display: flex; align-items: center; gap: 14px; }
.nav-avatar     { width: 32px; height: 32px; background: var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: white; flex-shrink: 0; }
.nav-username   { color: white; font-size: 13px; }
.nav-logout     { color: #AFA9EC; font-size: 12px; cursor: pointer; background: none; border: none; display: flex; align-items: center; gap: 4px; padding: 0; }
.nav-logout:hover { color: white; }

/* ── SIDEBAR ── */
.sidebar        { background: white; border-right: 1px solid var(--border); padding: 20px 0; overflow-y: auto; }
.sb-section     { margin-bottom: 4px; }
.sb-label       { font-size: 10px; font-weight: 600; color: var(--text-light); letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 20px 4px; display: block; }
.sb-link        { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13px; color: var(--text-mid); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; border-left: 3px solid transparent; transition: all 0.12s; white-space: nowrap; }
.sb-link i      { font-size: 17px; flex-shrink: 0; }
.sb-link:hover  { background: var(--purple-light); color: var(--purple); }
.sb-link.active { background: var(--purple-light); color: var(--purple); border-left: 3px solid var(--purple); font-weight: 500; }
.sb-badge       { margin-left: auto; font-size: 10px; background: var(--purple-light); color: var(--purple); padding: 1px 7px; border-radius: 99px; }
.sb-divider     { height: 1px; background: var(--border-light); margin: 8px 20px; }

/* ── FOOTER ── */
.footer         { background: var(--purple-dark); padding: 10px 28px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.footer-text    { color: #AFA9EC; font-size: 11px; }

/* ── PAGE HEADER ── */
.page-hdr       { margin-bottom: 24px; }
.page-title     { font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.page-sub       { font-size: 13px; color: var(--text-mid); }

/* ── SECTION HEADERS ── */
.section-hdr    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title  { font-size: 15px; font-weight: 600; color: var(--text-dark); }
.section-link   { font-size: 12px; color: var(--purple); text-decoration: none; }

/* ── STATS ROW ── */
.stats-row      { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card      { background: white; border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat-icon      { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 10px; }
.stat-value     { font-size: 26px; font-weight: 700; color: var(--text-dark); margin-bottom: 2px; line-height: 1; }
.stat-label     { font-size: 12px; color: var(--text-mid); }

/* ── CARDS ── */
.card           { background: white; border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.card-header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-title     { font-size: 14px; font-weight: 600; color: var(--text-dark); }

/* ── SUBJECT PROGRESS BANNER ── */
.subject-banner { background: var(--purple); border-radius: var(--radius-xl); padding: 22px 28px; margin-bottom: 24px; display: flex; align-items: center; gap: 20px; color: white; }
.sb-icon        { width: 52px; height: 52px; background: rgba(255,255,255,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.sb-info        { flex: 1; min-width: 0; }
.sb-title       { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.sb-desc        { font-size: 12px; color: #AFA9EC; margin-bottom: 8px; }
.sb-bar         { height: 6px; background: rgba(255,255,255,0.2); border-radius: 99px; overflow: hidden; }
.sb-bar-fill    { height: 100%; background: #9FE1CB; border-radius: 99px; transition: width 0.6s ease; }
.sb-stat        { text-align: right; white-space: nowrap; }
.sb-stat-num    { font-size: 28px; font-weight: 700; line-height: 1; }
.sb-stat-lbl    { font-size: 11px; color: #AFA9EC; }

/* ── CURRICULUM TABS ── */
.curr-tabs      { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.curr-tab       { padding: 7px 18px; border-radius: 99px; border: 1.5px solid var(--border); background: white; font-size: 12px; font-weight: 500; color: var(--text-mid); cursor: pointer; transition: all 0.12s; }
.curr-tab:hover { border-color: var(--purple); color: var(--purple); }
.curr-tab.active { background: var(--purple); color: white; border-color: var(--purple); }

/* ── CHAPTER ACCORDION ── */
.chapter-list   { display: flex; flex-direction: column; gap: 10px; }
.chapter-card   { background: white; border-radius: var(--radius-lg); border: 1.5px solid var(--border); overflow: hidden; transition: border-color 0.15s; }
.chapter-card:hover:not(.ch-locked) { border-color: var(--purple); }
.chapter-card.ch-complete { border-color: var(--teal); }
.chapter-card.ch-locked   { opacity: 0.65; }

.chapter-hdr    { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
.ch-locked .chapter-hdr  { cursor: not-allowed; }
.ch-badge       { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.ch-badge-active   { background: var(--purple); color: white; }
.ch-badge-done     { background: var(--teal); color: white; }
.ch-badge-locked   { background: var(--border); color: var(--text-light); }
.ch-info        { flex: 1; min-width: 0; }
.ch-title       { font-size: 15px; font-weight: 600; color: var(--text-dark); margin-bottom: 3px; }
.ch-meta        { display: flex; gap: 12px; font-size: 11px; color: var(--text-light); flex-wrap: wrap; }
.ch-meta span   { display: flex; align-items: center; gap: 3px; }
.ch-right       { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ch-pct         { font-size: 13px; font-weight: 600; color: var(--purple); min-width: 36px; text-align: right; }
.ch-pct.done    { color: var(--teal); }
.ch-bar         { width: 72px; height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; }
.ch-bar-fill    { height: 100%; background: var(--purple); border-radius: 99px; transition: width 0.4s ease; }
.ch-bar-fill.done { background: var(--teal); }
.ch-arrow       { font-size: 17px; color: var(--text-light); transition: transform 0.2s; }
.ch-arrow.open  { transform: rotate(180deg); }

.ch-lock-msg    { padding: 8px 20px; background: var(--amber-light); border-top: 1px solid var(--amber); font-size: 12px; color: var(--amber-dark); display: flex; align-items: center; gap: 6px; }
.chapter-panel  { display: none; border-top: 1px solid var(--border); background: var(--bg-alt); }
.chapter-panel.open { display: block; }

/* ── SUBTOPIC CARD ── */
.subtopic-card  { border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 10px 14px; background: white; transition: border-color 0.12s; }
.subtopic-card:hover:not(.sub-locked) { border-color: var(--teal); }
.subtopic-card.sub-done   { border-color: var(--teal); }
.subtopic-card.sub-locked { opacity: 0.6; }
.sub-hdr        { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.sub-locked .sub-hdr { cursor: not-allowed; }
.sub-num        { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.sub-num-active { background: var(--teal); color: white; }
.sub-num-done   { background: var(--teal); color: white; }
.sub-num-locked { background: var(--border); color: var(--text-light); }
.sub-info       { flex: 1; }
.sub-title      { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 2px; }
.sub-meta       { font-size: 11px; color: var(--text-light); display: flex; gap: 10px; }
.sub-status     { font-size: 10px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.status-done    { background: var(--teal-light); color: #085041; }
.status-prog    { background: var(--purple-light); color: var(--purple-dark); }
.status-lock    { background: var(--amber-light); color: var(--amber-dark); }
.sub-arrow      { font-size: 15px; color: var(--text-light); transition: transform 0.2s; margin-left: 4px; }
.sub-arrow.open { transform: rotate(180deg); }
.sub-body       { display: none; border-top: 1px solid var(--border-light); }
.sub-body.open  { display: block; }

/* ── CONTENT STEPS (Khan Academy style) ── */
.step-list      { }
.step-item      { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: background 0.1s; }
.step-item:last-child { border-bottom: none; }
.step-item:hover:not(.step-locked) { background: var(--purple-light); }
.step-item.step-done  { background: var(--teal-light); }
.step-item.step-done:hover { background: #c5ecdf; }
.step-item.step-locked { cursor: not-allowed; opacity: 0.65; }

.step-icon      { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.si-video       { background: var(--purple-light); color: var(--purple); }
.si-written     { background: var(--teal-light); color: #085041; }
.si-worked      { background: var(--blue-light); color: var(--blue-dark); }
.si-pdf         { background: var(--amber-light); color: var(--amber-dark); }
.si-slides      { background: #FBEAF0; color: #72243E; }
.si-tips        { background: var(--green-light); color: var(--green-dark); }
.si-mcq         { background: var(--teal-light); color: #085041; }
.si-short       { background: var(--purple-light); color: var(--purple-dark); }
.si-struct      { background: var(--blue-light); color: var(--blue-dark); }
.si-done        { background: var(--teal-light); color: var(--teal); }
.si-locked      { background: var(--bg); color: var(--text-light); }

.step-info      { flex: 1; min-width: 0; }
.step-title     { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.step-meta      { font-size: 11px; color: var(--text-mid); margin-top: 2px; }
.step-locked .step-title { color: var(--text-light); }
.step-hint      { font-size: 10px; color: var(--amber-dark); display: flex; align-items: center; gap: 3px; margin-top: 2px; }

.step-right     { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.step-score     { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.sc-pass        { background: var(--teal-light); color: #085041; }
.sc-fail        { background: var(--red-light); color: var(--red-dark); }
.step-check     { color: var(--teal); font-size: 15px; }

/* ── STEP SECTION DIVIDERS ── */
.step-section   { padding: 6px 16px 2px; background: var(--bg-alt); border-bottom: 1px solid var(--border-light); }
.step-sec-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); }

/* ── EOC TEST CARD ── */
.eoc-card       { margin: 10px 14px 14px; background: var(--amber-light); border: 1.5px solid var(--amber); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
.eoc-icon       { width: 40px; height: 40px; background: rgba(239,159,39,0.2); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #854F0B; flex-shrink: 0; }
.eoc-info       { flex: 1; }
.eoc-title      { font-size: 13px; font-weight: 700; color: var(--amber-dark); margin-bottom: 2px; }
.eoc-meta       { font-size: 11px; color: #854F0B; }
.eoc-locked-msg { font-size: 11px; color: #854F0B; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.eoc-btn        { padding: 8px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.eoc-btn-active { background: var(--amber); color: white; }
.eoc-btn-active:hover { background: #BA7517; }
.eoc-btn-locked { background: var(--border); color: var(--text-light); cursor: not-allowed; }

/* ── BUTTONS ── */
.btn            { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; white-space: nowrap; text-decoration: none; }
.btn-sm         { padding: 5px 12px; font-size: 12px; }
.btn-xs         { padding: 3px 9px; font-size: 11px; border-radius: 5px; }
.btn-primary    { background: var(--purple); color: white; }
.btn-primary:hover { background: var(--purple-dark); }
.btn-teal       { background: var(--teal); color: white; }
.btn-teal:hover { background: #0F6E56; }
.btn-secondary  { background: transparent; color: var(--purple); border: 1.5px solid var(--purple); }
.btn-secondary:hover { background: var(--purple-light); }
.btn-ghost      { background: transparent; color: var(--text-mid); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--purple-light); color: var(--purple); border-color: var(--purple); }
.btn-danger     { background: var(--red-light); color: var(--red-dark); border: 1px solid var(--red); }
.btn-danger:hover { background: var(--red); color: white; }
.btn-amber      { background: var(--amber); color: white; }
.btn-amber:hover { background: #BA7517; }
.btn-watch      { background: var(--purple); color: white; }
.btn-watch:hover { background: var(--purple-dark); }
.btn-rewatch    { background: var(--purple-light); color: var(--purple); }
.btn-start      { background: var(--teal); color: white; }
.btn-start:hover { background: #0F6E56; }
.btn-retake     { background: var(--teal-light); color: #085041; }
.btn-locked-sm  { background: var(--border); color: var(--text-light); cursor: not-allowed; }
.btn i          { font-size: 14px; }
.btn-sm i       { font-size: 13px; }
.btn-xs i       { font-size: 11px; }

/* ── TYPE BADGES / PILLS ── */
.pill           { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 500; white-space: nowrap; }
.pill-video     { background: var(--purple-light); color: var(--purple-dark); }
.pill-written   { background: var(--teal-light); color: #085041; }
.pill-worked    { background: var(--blue-light); color: var(--blue-dark); }
.pill-pdf       { background: var(--amber-light); color: var(--amber-dark); }
.pill-slides    { background: #FBEAF0; color: #72243E; }
.pill-tips      { background: var(--green-light); color: var(--green-dark); }
.pill-mcq       { background: var(--teal-light); color: #085041; }
.pill-short     { background: var(--purple-light); color: var(--purple-dark); }
.pill-struct    { background: var(--blue-light); color: var(--blue-dark); }
.pill-eoc       { background: var(--amber-light); color: var(--amber-dark); }
.pill-success   { background: var(--teal-light); color: #085041; }
.pill-warn      { background: var(--amber-light); color: var(--amber-dark); }
.pill-danger    { background: var(--red-light); color: var(--red-dark); }

/* ── FORM ELEMENTS ── */
.form-group     { margin-bottom: 16px; }
.form-label     { display: block; font-size: 12px; font-weight: 500; color: var(--text-mid); margin-bottom: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-dark); background: white; font-family: inherit;
  transition: border-color 0.15s; outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--purple); }
.form-textarea  { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-hint      { font-size: 11px; color: var(--text-light); margin-top: 4px; }

/* ── MODAL ── */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal-backdrop.open { display: flex; }
.modal          { background: white; border-radius: var(--radius-xl); width: 100%; max-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.modal-hdr      { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.modal-title    { font-size: 17px; font-weight: 700; color: var(--text-dark); }
.modal-close    { background: var(--bg); border: none; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; color: var(--text-mid); }
.modal-close:hover { background: var(--border); }
.modal-body     { padding: 20px 24px; }
.modal-footer   { padding: 0 24px 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* ── CONTENT TYPE SELECTOR ── */
.content-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ct-option      { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 12px 10px; text-align: center; cursor: pointer; transition: all 0.12s; }
.ct-option:hover { border-color: var(--purple); background: var(--purple-light); }
.ct-option.selected { border-color: var(--purple); background: var(--purple-light); }
.ct-option-icon { font-size: 20px; margin-bottom: 5px; }
.ct-option-name { font-size: 11px; font-weight: 500; color: var(--text-dark); }

/* ── ALERTS ── */
.alert          { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; display: none; }
.alert.show     { display: block; }
.alert-error    { background: var(--red-light); color: var(--red-dark); border: 1px solid var(--red); }
.alert-success  { background: var(--teal-light); color: #085041; border: 1px solid var(--teal-mid); }
.alert-info     { background: var(--purple-light); color: var(--purple-dark); border: 1px solid var(--purple-mid); }
.alert-warn     { background: var(--amber-light); color: var(--amber-dark); border: 1px solid var(--amber); }

/* ── EMPTY STATE ── */
.empty-state    { text-align: center; padding: 48px 20px; color: var(--text-light); }
.empty-state i  { font-size: 44px; display: block; margin-bottom: 12px; }
.empty-state p  { font-size: 14px; line-height: 1.6; }

/* ── TRIAL BANNER ── */
.trial-banner   { background: var(--teal-light); border: 1px solid var(--teal-mid); border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 13px; color: #085041; }

/* ── VIDEO PLAYER MODAL ── */
.player-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.player-backdrop.open { display: flex; }
.player-box     { background: #1a1a2e; border-radius: 16px; width: 100%; max-width: 900px; overflow: hidden; }
.player-hdr     { display: flex; align-items: center; padding: 14px 20px; background: #0d0d1a; gap: 10px; }
.player-title   { color: white; font-size: 14px; font-weight: 600; flex: 1; }
.player-watched { font-size: 11px; background: var(--teal); color: white; padding: 2px 10px; border-radius: 99px; display: none; }
.player-watched.show { display: inline-block; }
.player-close   { background: rgba(255,255,255,0.1); border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.player-close:hover { background: rgba(255,255,255,0.25); }
.player-video   { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.player-video iframe { width: 100%; height: 100%; border: none; display: block; }
.player-ftr     { padding: 12px 20px; background: #0d0d1a; display: flex; align-items: center; justify-content: space-between; }
.player-hint    { font-size: 12px; color: #AFA9EC; }
.mark-watched-btn { padding: 7px 16px; border-radius: 8px; border: none; background: var(--teal); color: white; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.mark-watched-btn:hover { background: #0F6E56; }
.mark-watched-btn.done { background: rgba(255,255,255,0.1); color: #9FE1CB; cursor: default; }

/* ── ADMIN THEME ── */
.admin-sidebar  { background: #1a1a2e; padding: 20px 0; }
.admin-sb-label { font-size: 10px; font-weight: 600; color: #555577; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 20px 4px; display: block; }
.admin-sb-link  { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 13px; color: #9999BB; text-decoration: none; border: none; background: none; width: 100%; text-align: left; cursor: pointer; border-left: 3px solid transparent; transition: all 0.12s; }
.admin-sb-link:hover  { background: rgba(83,74,183,0.2); color: white; }
.admin-sb-link.active { background: rgba(83,74,183,0.3); color: white; border-left: 3px solid var(--purple-mid); }
.admin-sb-link i { font-size: 17px; }
.admin-badge    { background: var(--red); color: white; font-size: 10px; padding: 1px 7px; border-radius: 99px; margin-left: auto; }
.top-nav.admin  { background: var(--purple-dark); }

/* ── MOBILE HAMBURGER ── */
.hamburger-btn  { display: none; background: none; border: none; cursor: pointer; padding: 4px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.hamburger-btn span { display: block; width: 22px; height: 2px; background: white; border-radius: 2px; transition: all 0.3s; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; }
.sidebar-overlay.open { display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hamburger-btn { display: flex; }
  .app-body      { grid-template-columns: 1fr; }
  .sidebar, .admin-sidebar {
    display: block !important; position: fixed; top: 0; left: 0;
    width: 260px; height: 100vh; z-index: 999;
    transform: translateX(-100%); transition: transform 0.3s ease;
    overflow-y: auto; box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  .sidebar.mobile-open, .admin-sidebar.mobile-open { transform: translateX(0); }
  .app-main    { padding: 16px !important; }
  .stats-row   { grid-template-columns: repeat(2, 1fr) !important; }
  .subject-banner { flex-direction: column; align-items: flex-start; }
  .sb-stat     { text-align: left; }
  .content-type-grid { grid-template-columns: repeat(2, 1fr); }
  .ch-bar      { display: none; }
  .top-nav     { padding: 10px 14px !important; }
}
@media (max-width: 400px) {
  .nav-username { display: none; }
  .stats-row    { grid-template-columns: 1fr; }
}

/* ── CONTENT ITEMS (videos, lessons, worked examples etc) ── */
.content-item { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; background:white; border:1px solid var(--border); cursor:pointer; transition:border-color .15s, box-shadow .15s; margin-bottom:6px; text-decoration:none; }
.content-item:hover { border-color:var(--purple); box-shadow:0 2px 8px rgba(83,74,183,.08); }
.content-item.ci-done { border-color:#9FE1CB; background:#F0FDF8; }
.ci-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.ci-body { flex:1; min-width:0; }
.ci-title { font-size:13px; font-weight:600; color:var(--text-dark); line-height:1.4; }
.ci-meta { font-size:11px; color:var(--text-light); margin-top:2px; }
.ci-right { flex-shrink:0; display:flex; align-items:center; }
.ci-btn { font-size:11px; font-weight:600; padding:5px 12px; border-radius:6px; background:var(--purple); color:white; border:none; cursor:pointer; white-space:nowrap; }
.ci-btn:hover { opacity:.85; }