/* SmartLearn AI v1.1 — Light mode default, Dark mode toggle */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

/* ========================================
   LIGHT MODE (DEFAULT)
======================================== */
:root {
  --sl-bg:         #f0f2f8;
  --sl-bg2:        #ffffff;
  --sl-bg3:        #e8eaf6;
  --sl-surface:    #ffffff;
  --sl-surface2:   #f5f6ff;
  --sl-border:     rgba(0,0,0,0.08);
  --sl-border2:    rgba(0,0,0,0.13);
  --sl-primary:    #5b52e8;
  --sl-primary-l:  #7b74ff;
  --sl-primary-d:  #4339c8;
  --sl-accent:     #00b896;
  --sl-accent-d:   #008f74;
  --sl-gold:       #d97706;
  --sl-danger:     #e53e3e;
  --sl-text:       #1a1d2e;
  --sl-text2:      #4a5068;
  --sl-text3:      #8890b0;
  --sl-white:      #ffffff;
  --sl-radius:     14px;
  --sl-radius-sm:  8px;
  --sl-shadow:     0 2px 12px rgba(0,0,0,0.08);
  --sl-shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --sl-sidebar-w:  240px;
  --sl-font:       'Plus Jakarta Sans', system-ui, sans-serif;

  /* Lesson content colours */
  --sl-purple:   #6c63ff;
  --sl-teal:     #0d9488;
  --sl-orange:   #ea580c;
  --sl-pink:     #db2777;
  --sl-blue:     #2563eb;
  --sl-green:    #16a34a;
  --sl-yellow:   #ca8a04;
  --sl-red:      #dc2626;
  --sl-indigo:   #4f46e5;
  --sl-rose:     #e11d48;
}

/* ========================================
   DARK MODE
======================================== */
#sla-app.sla-dark {
  --sl-bg:         #0d0f1a;
  --sl-bg2:        #13162a;
  --sl-bg3:        #1a1e35;
  --sl-surface:    #1e2340;
  --sl-surface2:   #242848;
  --sl-border:     rgba(255,255,255,0.08);
  --sl-border2:    rgba(255,255,255,0.14);
  --sl-primary:    #6c63ff;
  --sl-primary-l:  #8b84ff;
  --sl-primary-d:  #5248d4;
  --sl-accent:     #00d4aa;
  --sl-accent-d:   #00b08c;
  --sl-gold:       #fbbf24;
  --sl-danger:     #ff5252;
  --sl-text:       #e8eaf6;
  --sl-text2:      #9ca3c9;
  --sl-text3:      #6b7280;
  --sl-white:      #ffffff;
  --sl-shadow:     0 2px 16px rgba(0,0,0,0.4);
  --sl-shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
}

/* ========================================
   RESET
======================================== */
#sla-app, #sla-app *, #sla-app *::before, #sla-app *::after { box-sizing: border-box; }
#sla-app {
  font-family: var(--sl-font);
  color: var(--sl-text);
  font-size: 15px;
  line-height: 1.65;
  background: var(--sl-bg);
  width: 100%;
  position: relative;
  overflow-x: hidden;
  transition: background .25s, color .25s;
}
#sla-app p, #sla-app h1, #sla-app h2, #sla-app h3, #sla-app h4 { margin: 0; padding: 0; }

/* ========================================
   LOGIN / REGISTER GATE
======================================== */
.sla-login-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #eef0ff 0%, #f5f0ff 40%, #e8f8f3 100%);
  padding: 24px;
}
#sla-app.sla-dark .sla-login-gate {
  background: linear-gradient(135deg, #0d0f1a 0%, #1a0a2e 50%, #0a1a2e 100%);
}
.sla-login-card {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border2);
  border-radius: 24px;
  padding: 48px 40px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--sl-shadow-lg);
}
.sla-brand { text-align: center; margin-bottom: 32px; }
.sla-logo-icon { font-size: 52px; display: block; margin-bottom: 10px; }
.sla-brand h1 { font-size: 34px; font-weight: 800; color: var(--sl-text); letter-spacing: -1px; }
.sla-brand h1 span { color: var(--sl-primary); }
.sla-brand p { color: var(--sl-text2); margin-top: 8px; }

/* Tab switcher for login/register */
.sla-auth-tabs { display: flex; margin-bottom: 24px; border-radius: 10px; background: var(--sl-bg3); padding: 4px; }
.sla-auth-tab {
  flex: 1; padding: 10px; text-align: center; border-radius: 7px; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--sl-text2); border: none; background: none;
  font-family: var(--sl-font); transition: all .2s;
}
.sla-auth-tab.active { background: var(--sl-primary); color: #fff; }
.sla-auth-panel { display: none; }
.sla-auth-panel.active { display: block; }
.sla-auth-form { display: flex; flex-direction: column; gap: 14px; }
.sla-auth-form .sla-form-group { display: flex; flex-direction: column; gap: 5px; }
.sla-auth-form label { font-size: 12px; font-weight: 700; color: var(--sl-text2); text-transform: uppercase; letter-spacing: .5px; }
.sla-divider { text-align: center; color: var(--sl-text3); font-size: 12px; margin: 4px 0; position: relative; }
.sla-divider::before { content:''; position: absolute; left: 0; top: 50%; width: 40%; height: 1px; background: var(--sl-border); }
.sla-divider::after  { content:''; position: absolute; right: 0; top: 50%; width: 40%; height: 1px; background: var(--sl-border); }
.sla-login-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  border-top: 1px solid var(--sl-border); padding-top: 20px; margin-top: 20px;
}
.sla-feat { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--sl-text2); }
.sla-feat span { font-size: 17px; }

/* ========================================
   BUTTONS
======================================== */
.sla-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 11px 22px;
  border-radius: var(--sl-radius-sm);
  font-family: var(--sl-font); font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: all .2s;
  text-decoration: none; white-space: nowrap; line-height: 1.4;
}
.sla-btn:hover { transform: translateY(-1px); }
.sla-btn-primary { background: var(--sl-primary); color: #fff; }
.sla-btn-primary:hover { background: var(--sl-primary-l); box-shadow: 0 4px 18px rgba(108,99,255,.35); }
.sla-btn-accent { background: var(--sl-accent); color: #fff; }
.sla-btn-accent:hover { background: var(--sl-accent-d); }
.sla-btn-outline { background: transparent; color: var(--sl-primary); border: 1.5px solid var(--sl-primary); }
.sla-btn-outline:hover { background: rgba(108,99,255,.08); }
.sla-btn-ghost { background: transparent; color: var(--sl-text2); border: 1px solid var(--sl-border2); }
.sla-btn-ghost:hover { background: var(--sl-surface2); color: var(--sl-text); }
.sla-btn-danger { background: rgba(220,38,38,.1); color: var(--sl-danger); border: 1px solid rgba(220,38,38,.25); }
.sla-btn-danger:hover { background: rgba(220,38,38,.2); }
.sla-btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 6px; }
.sla-btn-lg { padding: 14px 28px; font-size: 16px; border-radius: 10px; }
.sla-btn-full { width: 100%; }
.sla-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* ========================================
   ONBOARD
======================================== */
.sla-onboard {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--sl-bg); padding: 24px;
}
.sla-onboard-card {
  background: var(--sl-surface); border: 1px solid var(--sl-border2);
  border-radius: 24px; padding: 40px; max-width: 600px; width: 100%;
  box-shadow: var(--sl-shadow-lg);
}
.sla-onboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sla-step-num { background: var(--sl-primary); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.sla-brand-sm { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--sl-text); font-size: 14px; }
.sla-onboard-card > h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; color: var(--sl-text); }
.sla-onboard-card > p { color: var(--sl-text2); margin-bottom: 24px; }
.req { color: var(--sl-danger); }

/* ========================================
   FORMS
======================================== */
.sla-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.sla-form-group { display: flex; flex-direction: column; gap: 5px; }
.sla-form-group label { font-size: 12px; font-weight: 700; color: var(--sl-text2); text-transform: uppercase; letter-spacing: .4px; }
#sla-app input[type="text"],
#sla-app input[type="number"],
#sla-app input[type="password"],
#sla-app input[type="email"],
#sla-app select,
#sla-app textarea {
  background: var(--sl-bg);
  border: 1.5px solid var(--sl-border2);
  border-radius: var(--sl-radius-sm);
  padding: 10px 13px;
  color: var(--sl-text);
  font-family: var(--sl-font);
  font-size: 14px;
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
  display: block;
}
#sla-app input:focus, #sla-app select:focus, #sla-app textarea:focus {
  border-color: var(--sl-primary);
  background: var(--sl-surface);
}
#sla-app select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}
.sla-select-full { width: 100%; }

/* ========================================
   APP SHELL
======================================== */
.sla-app-shell { display: flex; width: 100%; min-height: 100vh; align-items: stretch; }

/* ========================================
   SIDEBAR
======================================== */
.sla-sidebar {
  width: var(--sl-sidebar-w);
  min-width: var(--sl-sidebar-w);
  flex-shrink: 0;
  background: var(--sl-surface);
  border-right: 1px solid var(--sl-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform .3s ease, background .25s;
  box-shadow: var(--sl-shadow);
}
.sla-sidebar-header {
  display: flex; align-items: center; gap: 10px;
  padding: 17px 15px; border-bottom: 1px solid var(--sl-border); flex-shrink: 0;
}
.sla-logo-text { font-weight: 800; font-size: 15px; color: var(--sl-text); flex: 1; min-width: 0; }
.sla-logo-text strong { color: var(--sl-primary); }
.sla-sidebar-close { display: none; background: none; border: none; color: var(--sl-text2); font-size: 18px; cursor: pointer; padding: 4px; flex-shrink: 0; }
.sla-student-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--sl-border); flex-shrink: 0; min-width: 0;
}
.sla-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-primary), var(--sl-accent));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0;
}
.sla-student-chip strong { display: block; font-size: 13px; color: var(--sl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sla-student-chip small { font-size: 11px; color: var(--sl-text3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sla-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.sla-nav-item {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px;
  border-radius: var(--sl-radius-sm); background: none; border: none; cursor: pointer;
  color: var(--sl-text2); font-size: 14px; font-weight: 500; font-family: var(--sl-font);
  transition: all .15s; text-align: left; width: 100%; white-space: nowrap;
}
.sla-nav-item:hover { background: var(--sl-bg3); color: var(--sl-text); }
.sla-nav-item.active { background: rgba(91,82,232,.12); color: var(--sl-primary); font-weight: 700; }
#sla-app.sla-dark .sla-nav-item.active { background: rgba(108,99,255,.18); }
.nav-icon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.sla-credit-badge {
  margin: 0 10px 14px; padding: 11px 13px;
  background: var(--sl-bg3); border-radius: var(--sl-radius); border: 1px solid var(--sl-border2);
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.credit-label { font-size: 11px; color: var(--sl-text3); flex: 1; }
.credit-value { font-size: 14px; font-weight: 700; color: var(--sl-accent); white-space: nowrap; }
.sla-mini-btn { background: var(--sl-primary); color: #fff; border: none; cursor: pointer; padding: 4px 9px; border-radius: 5px; font-size: 11px; font-weight: 600; font-family: var(--sl-font); white-space: nowrap; }

/* ========================================
   MAIN AREA
======================================== */
.sla-main { flex: 1; min-width: 0; background: var(--sl-bg); display: flex; flex-direction: column; transition: background .25s; }

/* ========================================
   TOPBAR
======================================== */
.sla-topbar {
  display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 60px;
  background: var(--sl-surface); border-bottom: 1px solid var(--sl-border);
  position: sticky; top: 0; z-index: 50; flex-shrink: 0;
  box-shadow: var(--sl-shadow); transition: background .25s;
}
.sla-menu-toggle { display: none; background: none; border: none; color: var(--sl-text); font-size: 22px; cursor: pointer; padding: 4px; flex-shrink: 0; }
.sla-topbar-title { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sl-text); }
.sla-topbar-right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.sla-credit-pill { background: var(--sl-bg3); border: 1px solid var(--sl-border2); border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--sl-accent); white-space: nowrap; }
.sla-admin-badge { background: rgba(217,119,6,.1); color: var(--sl-gold); border: 1px solid rgba(217,119,6,.25); padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* Theme toggle button */
.sla-theme-toggle {
  background: var(--sl-bg3); border: 1px solid var(--sl-border2); color: var(--sl-text2);
  border-radius: 20px; padding: 5px 12px; cursor: pointer; font-size: 14px;
  font-family: var(--sl-font); font-weight: 600; transition: all .2s; white-space: nowrap;
}
.sla-theme-toggle:hover { background: var(--sl-primary); color: #fff; border-color: var(--sl-primary); }

/* ========================================
   VIEWS
======================================== */
.sla-view { display: none; padding: 24px; width: 100%; animation: slaFadeIn .2s; }
.sla-view.active { display: block; }
@keyframes slaFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.sla-view-header { margin-bottom: 20px; }
.sla-view-header h2 { font-size: 22px; font-weight: 800; color: var(--sl-text); }

/* ========================================
   DASHBOARD
======================================== */
.sla-welcome-banner {
  background: linear-gradient(135deg, var(--sl-primary) 0%, #7c3aed 60%, #0d9488 100%);
  border-radius: 16px; padding: 24px 28px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 4px 20px rgba(91,82,232,.25);
}
.sla-welcome-text h2 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 5px; }
.sla-welcome-text p { color: rgba(255,255,255,.85); font-size: 13px; }
.sla-quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sla-dashboard-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.sla-widget-stat {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius);
  padding: 18px; display: flex; align-items: center; gap: 13px; min-width: 0;
  box-shadow: var(--sl-shadow); transition: transform .2s, box-shadow .2s;
}
.sla-widget-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.stat-icon { font-size: 28px; flex-shrink: 0; }
.stat-num { font-size: 22px; font-weight: 800; color: var(--sl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-label { font-size: 11px; color: var(--sl-text3); }
.sla-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ========================================
   WIDGETS
======================================== */
.sla-widget {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius);
  padding: 20px; min-width: 0; box-shadow: var(--sl-shadow); transition: background .25s;
}
.sla-widget h3 { font-size: 15px; font-weight: 700; color: var(--sl-text); margin-bottom: 14px; }
.sla-widget-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sla-widget-hdr h3 { margin-bottom: 0; }
.sla-rates-list { display: flex; flex-direction: column; gap: 8px; }
.sla-rate-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; background: var(--sl-bg3); border-radius: var(--sl-radius-sm); font-size: 13px;
}
.sla-rate-item strong { color: var(--sl-accent); }

/* ========================================
   MATERIALS
======================================== */
.sla-upload-zone {
  border: 2px dashed var(--sl-border2); border-radius: 16px; padding: 38px 22px; text-align: center;
  background: var(--sl-surface); cursor: pointer; transition: all .2s; margin-bottom: 18px;
}
.sla-upload-zone:hover, .sla-upload-zone.dragging { border-color: var(--sl-primary); background: rgba(91,82,232,.05); }
.upload-icon { font-size: 42px; margin-bottom: 10px; }
.sla-upload-zone h3 { font-size: 16px; font-weight: 700; margin-bottom: 7px; color: var(--sl-text); }
.sla-upload-zone p { color: var(--sl-text2); font-size: 13px; margin-bottom: 16px; }
.sla-upload-form { background: var(--sl-surface); border: 1px solid var(--sl-border2); border-radius: 16px; padding: 20px; margin-bottom: 18px; }
.sla-upload-preview { background: var(--sl-bg3); border-radius: var(--sl-radius-sm); padding: 9px 13px; font-size: 13px; color: var(--sl-text2); margin-bottom: 13px; word-break: break-all; }
.sla-progress-wrap { margin-top: 13px; }
.sla-progress-bar { height: 5px; background: var(--sl-bg3); border-radius: 3px; overflow: hidden; margin-bottom: 7px; }
.sla-progress-fill { height: 100%; background: linear-gradient(90deg,var(--sl-primary),var(--sl-accent)); border-radius: 3px; width: 0%; transition: width .3s; animation: slaPulse 1.5s infinite; }
@keyframes slaPulse { 0%,100%{opacity:1} 50%{opacity:.6} }
.sla-materials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 14px; }
.sla-material-card { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: var(--sl-radius); padding: 17px; transition: all .2s; min-width: 0; box-shadow: var(--sl-shadow); }
.sla-material-card:hover { border-color: var(--sl-primary); transform: translateY(-2px); }
.mat-type-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; background: rgba(91,82,232,.1); color: var(--sl-primary); letter-spacing: .5px; }
.mat-title { font-size: 14px; font-weight: 700; color: var(--sl-text); margin: 8px 0 4px; word-break: break-word; }
.mat-course { font-size: 12px; color: var(--sl-text3); margin-bottom: 4px; }
.mat-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 12px; margin-bottom: 9px; }
.mat-status.ready      { background: rgba(0,184,150,.12); color: var(--sl-accent); }
.mat-status.pending,
.mat-status.processing { background: rgba(217,119,6,.12); color: var(--sl-gold); }
.mat-status.failed     { background: rgba(220,38,38,.1);  color: var(--sl-danger); }
.mat-summary { font-size: 12px; color: var(--sl-text2); margin: 5px 0 9px; line-height: 1.5; }
.mat-actions { display: flex; gap: 7px; flex-wrap: wrap; }

/* ========================================
   SESSIONS
======================================== */
.sla-book-panel { background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 16px; padding: 22px; margin-bottom: 18px; box-shadow: var(--sl-shadow); }
.sla-book-panel h3 { font-size: 16px; font-weight: 700; color: var(--sl-text); margin-bottom: 16px; }
.sla-duration-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; }
.sla-duration-opt {
  background: var(--sl-bg3); border: 2px solid var(--sl-border); border-radius: 12px;
  padding: 14px 8px; text-align: center; cursor: pointer; transition: all .2s;
}
.sla-duration-opt:hover { border-color: var(--sl-primary); }
.sla-duration-opt.selected { border-color: var(--sl-primary); background: rgba(91,82,232,.08); }
.dur-time  { font-size: 14px; font-weight: 800; color: var(--sl-text); }
.dur-label { font-size: 10px; color: var(--sl-text3); margin: 3px 0; }
.dur-price { font-size: 13px; font-weight: 700; color: var(--sl-accent); }
.sla-sessions-history h3 { font-size: 16px; font-weight: 700; color: var(--sl-text); margin-bottom: 13px; }
.sla-session-item {
  background: var(--sl-surface); border: 1px solid var(--sl-border); border-radius: 12px;
  padding: 13px; margin-bottom: 9px; display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: all .2s; min-width: 0; box-shadow: var(--sl-shadow);
}
.sla-session-item:hover { border-color: var(--sl-primary); transform: translateX(2px); }
.sess-icon { font-size: 24px; flex-shrink: 0; }
.sess-body { flex: 1; min-width: 0; }
.sess-title { font-weight: 700; font-size: 13px; color: var(--sl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-meta { font-size: 11px; color: var(--sl-text3); margin-top: 2px; }
.sla-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; text-transform: capitalize; flex-shrink: 0; white-space: nowrap; }
.sla-badge-completed { background: rgba(0,184,150,.12); color: var(--sl-accent); }
.sla-badge-active     { background: rgba(91,82,232,.12); color: var(--sl-primary); }
.sla-badge-scheduled  { background: rgba(217,119,6,.12); color: var(--sl-gold); }
.sla-badge-cancelled  { background: rgba(220,38,38,.1);  color: var(--sl-danger); }

/* ========================================
   LESSON PANEL
======================================== */
#sla-lesson-panel { display: flex; flex-direction: column; width: 100%; min-height: calc(100vh - 60px); }
.sla-lesson-header {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  background: var(--sl-surface); border-bottom: 1px solid var(--sl-border);
  flex-shrink: 0; flex-wrap: wrap; row-gap: 8px; box-shadow: var(--sl-shadow); transition: background .25s;
}
.sla-lesson-meta { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
#lesson-title-display { font-weight: 700; color: var(--sl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; flex: 1; min-width: 0; }
.sla-timer { font-family: 'Fira Code', monospace; font-size: 14px; color: var(--sl-accent); background: var(--sl-bg3); padding: 4px 10px; border-radius: 6px; flex-shrink: 0; }
.sla-lesson-actions { display: flex; gap: 8px; flex-shrink: 0; }
.sla-lesson-body { flex: 1; overflow-y: auto; background: var(--sl-bg); transition: background .25s; }

/* ========================================
   LESSON CONTENT — THE STAR OF THE SHOW
======================================== */
.sla-lesson-content {
  padding: 32px 28px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  font-size: 15px;
  line-height: 1.9;
  color: var(--sl-text);
}

/* Professor's lesson wrapper */
.sl-lesson { width: 100%; }

/* Standard headings */
.sla-lesson-content h1 { font-size: 26px; font-weight: 800; color: var(--sl-primary); margin: 28px 0 12px; }
.sla-lesson-content h2 { font-size: 20px; font-weight: 800; color: var(--sl-text); margin: 24px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--sl-border); }
.sla-lesson-content h3 { font-size: 16px; font-weight: 700; color: var(--sl-primary); margin: 18px 0 8px; }
.sla-lesson-content p { margin-bottom: 12px; }
.sla-lesson-content ul, .sla-lesson-content ol { padding-left: 22px; margin-bottom: 14px; }
.sla-lesson-content li { margin-bottom: 5px; }
.sla-lesson-content strong { color: var(--sl-text); font-weight: 700; }

/* ---- Sections ---- */
.sl-section { margin: 0 0 28px; }
.sl-intro { background: linear-gradient(135deg, rgba(91,82,232,.07) 0%, rgba(0,184,150,.06) 100%); border-radius: 16px; padding: 24px 28px; border-left: 5px solid var(--sl-primary); }
.sl-intro p { font-size: 16px; line-height: 1.9; }
.sl-topic { background: var(--sl-surface); border-radius: 14px; padding: 22px 26px; border-left: 5px solid var(--sl-primary); box-shadow: var(--sl-shadow); margin-bottom: 22px; }
.sl-topic h2 { border: none; margin: 0 0 12px; font-size: 19px; color: var(--sl-text); }

/* ---- Callout boxes ---- */
.sl-callout { border-radius: 12px; padding: 14px 18px; margin: 16px 0; font-size: 14px; line-height: 1.7; }
.sl-callout-tip     { background: rgba(13,148,136,.08);  border-left: 4px solid #0d9488; color: var(--sl-text); }
.sl-callout-joke    { background: rgba(234,88,12,.08);   border-left: 4px solid #ea580c; color: var(--sl-text); }
.sl-callout-exam    { background: rgba(220,38,38,.08);   border-left: 4px solid #dc2626; color: var(--sl-text); }
.sl-callout-story   { background: rgba(79,70,229,.08);   border-left: 4px solid #4f46e5; color: var(--sl-text); }
.sl-callout-remember{ background: rgba(202,138,4,.09);   border-left: 4px solid #ca8a04; color: var(--sl-text); }
#sla-app.sla-dark .sl-callout-tip     { background: rgba(13,148,136,.15); }
#sla-app.sla-dark .sl-callout-joke    { background: rgba(234,88,12,.15);  }
#sla-app.sla-dark .sl-callout-exam    { background: rgba(220,38,38,.15);  }
#sla-app.sla-dark .sl-callout-story   { background: rgba(79,70,229,.15);  }
#sla-app.sla-dark .sl-callout-remember{ background: rgba(202,138,4,.15);  }

/* ---- Analogy box ---- */
.sl-analogy { background: linear-gradient(135deg, rgba(234,88,12,.07) 0%, rgba(202,138,4,.07) 100%); border-radius: 12px; padding: 16px 20px; margin: 16px 0; border: 1px solid rgba(234,88,12,.2); font-size: 14px; }

/* ---- Key point ---- */
.sl-key-point { background: rgba(91,82,232,.08); border-radius: 10px; padding: 12px 18px; margin: 14px 0; font-weight: 700; color: var(--sl-primary); font-size: 14px; border: 1px solid rgba(91,82,232,.2); }
#sla-app.sla-dark .sl-key-point { background: rgba(108,99,255,.18); }

/* ---- Inline colour spans ---- */
.sl-highlight { background: rgba(202,138,4,.18); padding: 1px 4px; border-radius: 3px; font-weight: 600; }
.sl-term      { color: var(--sl-primary); font-weight: 700; font-style: italic; }
.sl-accent1   { color: var(--sl-purple);  font-weight: 600; }
.sl-accent2   { color: var(--sl-teal);    font-weight: 600; }
.sl-accent3   { color: var(--sl-orange);  font-weight: 600; }
.sl-number    { color: var(--sl-pink);    font-weight: 800; font-family: 'Fira Code', monospace; font-size: 105%; }

/* ---- Table ---- */
.sl-table { width: 100%; border-collapse: collapse; margin: 18px 0; border-radius: 12px; overflow: hidden; box-shadow: var(--sl-shadow); font-size: 13px; }
.sl-table thead tr { background: var(--sl-primary); color: #fff; }
.sl-table thead th { padding: 12px 14px; text-align: left; font-weight: 700; }
.sl-table tbody tr:nth-child(even) { background: rgba(91,82,232,.04); }
#sla-app.sla-dark .sl-table tbody tr:nth-child(even) { background: rgba(108,99,255,.08); }
.sl-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--sl-border); color: var(--sl-text); }

/* ---- Quiz box ---- */
.sl-quiz-box { background: var(--sl-surface); border: 2px solid var(--sl-primary); border-radius: 16px; padding: 22px; margin: 28px 0; }
.sl-quiz-box h3 { font-size: 18px; font-weight: 800; color: var(--sl-primary); margin-bottom: 16px; }
.sl-quiz-item { margin-bottom: 20px; }
.sl-quiz-item p { font-weight: 700; color: var(--sl-text); margin-bottom: 8px; }
.sl-quiz-options { display: flex; flex-direction: column; gap: 6px; }
.sl-quiz-opt { background: var(--sl-bg3); border: 1.5px solid var(--sl-border2); border-radius: 8px; padding: 9px 13px; font-size: 13px; color: var(--sl-text); cursor: pointer; text-align: left; font-family: var(--sl-font); transition: all .15s; width: 100%; }
.sl-quiz-opt:hover { border-color: var(--sl-primary); background: rgba(91,82,232,.07); }
.sl-quiz-opt.selected { border-color: var(--sl-primary); background: rgba(91,82,232,.1); }
.sl-quiz-opt.correct  { border-color: var(--sl-accent); background: rgba(0,184,150,.1); }
.sl-quiz-opt.wrong    { border-color: var(--sl-danger); background: rgba(220,38,38,.08); }

/* ---- Summary box ---- */
.sl-summary-box { background: linear-gradient(135deg, rgba(91,82,232,.06) 0%, rgba(0,184,150,.06) 100%); border: 1px solid var(--sl-primary); border-radius: 16px; padding: 22px 26px; margin-top: 28px; }
.sl-summary-box h3 { font-size: 18px; font-weight: 800; color: var(--sl-primary); margin-bottom: 12px; }
.sl-summary-box ul  { padding-left: 20px; }
.sl-summary-box li  { margin-bottom: 6px; font-size: 14px; }

/* ---- Raw markdown fallback ---- */
.sla-lesson-content code { font-family: 'Fira Code', monospace; background: var(--sl-bg3); padding: 2px 5px; border-radius: 4px; font-size: 13px; }
.sla-lesson-content blockquote { border-left: 3px solid var(--sl-primary); padding-left: 14px; color: var(--sl-text2); margin: 13px 0; }
.sla-lesson-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; gap: 16px; text-align: center; }
.sla-spinner { width: 42px; height: 42px; border: 3px solid var(--sl-border2); border-top-color: var(--sl-primary); border-radius: 50%; animation: slaSpin .8s linear infinite; }
@keyframes slaSpin { to { transform: rotate(360deg); } }

/* ========================================
   CHAT DRAWER
======================================== */
.sla-chat-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 380px; max-width: 100vw;
  background: var(--sl-surface); border-left: 1px solid var(--sl-border2);
  z-index: 300; transform: translateX(100%); transition: transform .3s;
  display: flex; flex-direction: column; box-shadow: var(--sl-shadow-lg);
}
.sla-chat-drawer.open { transform: translateX(0); }
.sla-chat-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px; border-bottom: 1px solid var(--sl-border); font-weight: 700; color: var(--sl-text); flex-shrink: 0; }
.sla-chat-header button { background: none; border: none; color: var(--sl-text2); font-size: 18px; cursor: pointer; }
.sla-chat-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.chat-bubble { max-width: 90%; }
.chat-bubble.user { align-self: flex-end; }
.chat-bubble.assistant { align-self: flex-start; }
.chat-bubble-inner { padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.6; }
.chat-bubble.user .chat-bubble-inner { background: var(--sl-primary); color: #fff; border-radius: 14px 14px 4px 14px; }
.chat-bubble.assistant .chat-bubble-inner { background: var(--sl-bg3); color: var(--sl-text); border-radius: 4px 14px 14px 14px; border: 1px solid var(--sl-border); }
.sla-chat-input-row { padding: 11px 13px; border-top: 1px solid var(--sl-border); display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; }
.sla-chat-input-row textarea { flex: 1; resize: none; border-radius: 10px; min-height: 42px; max-height: 110px; }

/* ========================================
   QUIZ PANEL (full-screen)
======================================== */
.sla-quiz-panel { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 18px; }
#quiz-content { background: var(--sl-surface); border: 1px solid var(--sl-border2); border-radius: 20px; padding: 26px; max-width: 580px; width: 100%; max-height: 88vh; overflow-y: auto; }
.sla-quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.sla-quiz-header h3 { font-size: 17px; font-weight: 800; color: var(--sl-text); margin: 0; }
.sla-quiz-header button { background: none; border: none; color: var(--sl-text2); font-size: 14px; cursor: pointer; }
.quiz-q { margin-bottom: 22px; }
.quiz-q p { font-weight: 600; color: var(--sl-text); margin-bottom: 11px; }
.quiz-options { display: flex; flex-direction: column; gap: 7px; }
.quiz-opt { padding: 10px 13px; border-radius: var(--sl-radius-sm); background: var(--sl-bg3); border: 1.5px solid var(--sl-border); cursor: pointer; font-size: 13px; color: var(--sl-text); transition: all .15s; text-align: left; width: 100%; font-family: var(--sl-font); }
.quiz-opt:hover   { border-color: var(--sl-primary); background: rgba(91,82,232,.07); }
.quiz-opt.selected{ border-color: var(--sl-primary); background: rgba(91,82,232,.1);  }
.quiz-opt.correct { border-color: var(--sl-accent);  background: rgba(0,184,150,.1);  }
.quiz-opt.wrong   { border-color: var(--sl-danger);  background: rgba(220,38,38,.08); }

/* ========================================
   CREDITS & BILLING
======================================== */
.sla-topup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sla-balance-display { background: var(--sl-bg3); border-radius: 12px; padding: 22px; text-align: center; margin-bottom: 18px; }
#topup-balance-big { font-size: 40px; font-weight: 800; color: var(--sl-accent); font-family: 'Fira Code',monospace; display: block; }
.sla-topup-amounts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.sla-topup-btn {
  background: var(--sl-bg3); border: 2px solid var(--sl-border); border-radius: 12px;
  padding: 15px 8px; cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; font-family: var(--sl-font);
}
.sla-topup-btn:hover { border-color: var(--sl-primary); background: rgba(91,82,232,.06); }
.sla-topup-btn.selected { border-color: var(--sl-accent); background: rgba(0,184,150,.08); }
.sla-topup-btn strong { font-size: 19px; font-weight: 800; color: var(--sl-text); font-family: 'Fira Code',monospace; }
.sla-topup-btn span { font-size: 11px; color: var(--sl-text3); }
.sla-tx-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--sl-border); font-size: 13px; gap: 8px; }
.sla-tx-item:last-child { border-bottom: none; }
.tx-type { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tx-desc { color: var(--sl-text3); font-size: 11px; }
.tx-amount { font-weight: 700; flex-shrink: 0; }
.tx-amount.positive { color: var(--sl-accent); }
.tx-amount.negative { color: var(--sl-danger); }

/* ========================================
   PROFILE
======================================== */
.sla-avatar-big {
  width: 70px; height: 70px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sl-primary), var(--sl-accent));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 26px; color: #fff; margin: 0 auto 20px;
}

/* ========================================
   MISC
======================================== */
.sla-msg { margin-top: 10px; font-size: 13px; padding: 9px 13px; border-radius: var(--sl-radius-sm); display: none; }
.sla-msg.success { background: rgba(0,184,150,.12); color: var(--sl-accent); display: block; border: 1px solid rgba(0,184,150,.25); }
.sla-msg.error   { background: rgba(220,38,38,.08); color: var(--sl-danger); display: block; border: 1px solid rgba(220,38,38,.2); }
.sla-empty { text-align: center; color: var(--sl-text3); padding: 26px 14px; font-size: 13px; }
.sla-loading-txt { text-align: center; color: var(--sl-text2); padding: 18px; }
.sla-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 190; }
.sla-overlay.show { display: block; }

#sla-app ::-webkit-scrollbar { width: 5px; height: 5px; }
#sla-app ::-webkit-scrollbar-track { background: transparent; }
#sla-app ::-webkit-scrollbar-thumb { background: var(--sl-border2); border-radius: 3px; }

/* ========================================
   RESPONSIVE
======================================== */
@media (min-width:1025px)  { .sla-dashboard-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width:1280px)  { :root { --sl-sidebar-w: 215px; } }
@media (max-width:1024px)  {
  .sla-dashboard-grid { grid-template-columns:1fr 1fr; }
  .sla-two-col        { grid-template-columns:1fr; }
  .sla-duration-grid  { grid-template-columns:1fr 1fr; }
  .sla-topup-grid     { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --sl-sidebar-w: 250px; }
  .sla-sidebar {
    position: fixed !important; left: 0; top: 0; height: 100vh;
    transform: translateX(-100%); z-index: 200; box-shadow: var(--sl-shadow-lg);
  }
  .sla-sidebar.open { transform: translateX(0); }
  .sla-sidebar-close { display: block; }
  .sla-main { width: 100%; min-width: 0; }
  .sla-menu-toggle { display: block; }
  .sla-view { padding: 14px; }
  .sla-topbar { padding: 0 12px; }
  .sla-form-grid     { grid-template-columns:1fr; }
  .sla-dashboard-grid{ grid-template-columns:1fr 1fr; }
  .sla-two-col       { grid-template-columns:1fr; }
  .sla-duration-grid { grid-template-columns:1fr 1fr; }
  .sla-topup-amounts { grid-template-columns:1fr 1fr; }
  .sla-welcome-banner{ flex-direction:column; }
  .sla-chat-drawer   { width:100%; border-left:none; border-top:1px solid var(--sl-border2); top:auto; }
  .sla-lesson-content{ padding:16px 13px; }
  .sla-login-card    { padding:28px 20px; }
  .sla-onboard-card  { padding:24px 16px; }
}
@media (max-width:480px) {
  .sla-dashboard-grid { grid-template-columns:1fr 1fr; }
  .sla-login-features { grid-template-columns:1fr; }
  .sla-theme-toggle span { display:none; }
}
@media (max-width:360px) {
  .sla-dashboard-grid { grid-template-columns:1fr; }
  .sla-topup-amounts  { grid-template-columns:1fr; }
}