/* ── MyPy Tutor — Premium Design System v2 ── */
/* CSS custom properties for consistent theming */
:root {
  --bg-base:       #080c14;
  --bg-surface:    #0e1422;
  --bg-card:       #111827;
  --bg-elevated:   #1a2235;
  --bg-hover:      #1e2940;
  --border:        rgba(255,255,255,0.07);
  --border-focus:  rgba(66,153,225,0.6);
  --accent:        #3b82f6;
  --accent-hover:  #2563eb;
  --accent-glow:   rgba(59,130,246,0.25);
  --accent-2:      #8b5cf6;
  --accent-3:      #06b6d4;
  --success:       #10b981;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --text-primary:  #f1f5f9;
  --text-secondary:#94a3b8;
  --text-muted:    #475569;
  --radius-sm:     8px;
  --radius:        12px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.4);
  --shadow:        0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.6);
  --transition:    0.18s cubic-bezier(0.4,0,0.2,1);
  --font:          "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg-base);
  color:var(--text-primary);
  height:100%;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ── Google Fonts — Inter ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Scrollbar ── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}

/* ── Header ── */
header{
  width:100%;
  background:rgba(8,12,20,0.95);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;gap:10px;flex-shrink:0;z-index:100;
}
.header-left{display:flex;align-items:center;gap:10px;min-width:0}
#menu-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  border-radius:var(--radius-sm);width:38px;height:38px;font-size:1.1rem;
  cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
#menu-btn:hover{border-color:var(--accent);color:var(--accent)}
.logo{
  font-size:1.05rem;font-weight:800;letter-spacing:-0.02em;
  background:linear-gradient(135deg,#60a5fa,#a78bfa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;white-space:nowrap;
}
.header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;overflow:hidden}
#level-select{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:6px 8px;font-size:0.8rem;cursor:pointer;
  outline:none;height:36px;font-family:var(--font);transition:var(--transition);
}
#level-select:focus{border-color:var(--border-focus)}
#clear-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  border-radius:var(--radius-sm);padding:0 10px;font-size:0.8rem;cursor:pointer;
  height:36px;white-space:nowrap;transition:var(--transition);
}
#clear-btn:hover{border-color:var(--danger);color:var(--danger)}

/* ── XP Bar ── */
#xp-bar-wrap{
  width:100%;padding:5px 16px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  background:var(--bg-base);border-bottom:1px solid var(--border);
}
#xp-label{font-size:0.7rem;color:var(--text-muted);white-space:nowrap;min-width:90px;font-weight:500}
#xp-bar-bg{flex:1;height:3px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden}
#xp-bar-fill{
  height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width 0.8s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 8px var(--accent-glow);
}
#badge-row{font-size:0.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}

/* ── App body ── */
#app-body{flex:1;display:flex;overflow:hidden;position:relative}

/* ── Sidebar ── */
#sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);z-index:200;
}
#sidebar-overlay.open{display:block}
#sidebar{
  position:fixed;top:0;left:0;bottom:0;
  width:265px;max-width:82vw;
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;padding:16px 12px;
  gap:14px;z-index:300;
  transform:translateX(-100%);
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
#sidebar.open{transform:translateX(0)}
.sidebar-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.sidebar-header .logo{font-size:1rem}
#sidebar-close{
  background:transparent;border:none;color:var(--text-muted);
  font-size:1.2rem;cursor:pointer;padding:4px;border-radius:6px;
  transition:var(--transition);
}
#sidebar-close:hover{color:var(--text-primary);background:var(--bg-hover)}
.sidebar-section h4{
  font-size:0.65rem;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--text-muted);margin-bottom:8px;font-weight:600;
}
.sidebar-btn{
  display:flex;align-items:center;gap:9px;width:100%;
  background:transparent;border:1px solid transparent;color:var(--text-secondary);
  border-radius:var(--radius-sm);padding:9px 12px;font-size:0.84rem;
  cursor:pointer;text-align:left;transition:var(--transition);margin-bottom:3px;
  min-height:44px;font-family:var(--font);
}
.sidebar-btn:hover,.sidebar-btn:active{
  background:var(--bg-elevated);border-color:var(--border-focus);
  color:var(--text-primary);
}
.gap-tag{
  display:inline-block;
  background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.3);
  color:#fca5a5;border-radius:6px;padding:4px 10px;
  font-size:0.78rem;margin:2px;cursor:pointer;transition:var(--transition);
}
.gap-tag:hover{background:rgba(239,68,68,0.2)}

/* ── Panels ── */
#panels{flex:1;display:flex;flex-direction:column;overflow:hidden}
.panel{display:none;flex-direction:column;height:100%;overflow:hidden}
.panel.active{display:flex}

/* ── Chat container ── */
#chat-container{
  flex:1;overflow-y:auto;padding:14px 16px;
  display:flex;flex-direction:column;gap:14px;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
}
.welcome{
  text-align:center;padding:40px 20px 24px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.welcome-logo{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,rgba(59,130,246,0.2),rgba(139,92,246,0.2));
  border:1px solid rgba(59,130,246,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;margin-bottom:4px;
  box-shadow:0 0 30px rgba(59,130,246,0.15);
}
.welcome h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);letter-spacing:-0.02em}
.welcome p{font-size:0.87rem;line-height:1.7;color:var(--text-secondary);max-width:420px}

/* ── Messages ── */
.message{display:flex;flex-direction:column;max-width:88%}
.message.user{align-self:flex-end;align-items:flex-end}
.message.assistant{align-self:flex-start;align-items:flex-start}
.message .label{
  font-size:0.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.08em;margin-bottom:4px;color:var(--text-muted);
}
.message.user .label{color:#60a5fa}
.message.assistant .label{color:#34d399}
.bubble{
  padding:11px 15px;border-radius:16px;
  line-height:1.7;font-size:0.92rem;word-break:break-word;
  font-family:var(--font);
}
.message.user .bubble{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;border-bottom-right-radius:4px;
  box-shadow:0 2px 12px rgba(37,99,235,0.35);
}
.message.assistant .bubble{
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-primary);border-bottom-left-radius:4px;
  box-shadow:var(--shadow-sm);
}
.message.error .bubble{
  background:rgba(239,68,68,0.08);
  border:1px solid rgba(239,68,68,0.25);color:#fca5a5;
}
.bubble h1,.bubble h2,.bubble h3,.bubble h4{margin:12px 0 6px;color:#93c5fd}
.bubble h1{font-size:1.1rem}.bubble h2{font-size:1rem}.bubble h3{font-size:0.95rem}
.bubble p{margin:6px 0}
.bubble ul,.bubble ol{margin:6px 0 6px 18px}
.bubble li{margin:4px 0}
.bubble strong{color:#fde68a;font-weight:600}
.bubble em{color:#c4b5fd}
.bubble code:not(pre code){
  background:rgba(255,255,255,0.08);color:#fdba74;
  padding:2px 6px;border-radius:5px;
  font-family:"Fira Code",Consolas,monospace;font-size:0.85em;
  border:1px solid rgba(255,255,255,0.08);
}
.bubble pre{margin:10px 0;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,0.07);}
.bubble pre code{
  font-family:"Fira Code",Consolas,monospace;font-size:0.82em;
  display:block;padding:14px 16px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;background:#0d1117;
}
.bubble blockquote{
  border-left:3px solid var(--accent);padding-left:12px;
  color:var(--text-secondary);margin:8px 0;
  background:rgba(59,130,246,0.05);border-radius:0 6px 6px 0;padding:8px 12px;
}
.bubble hr{border:none;border-top:1px solid var(--border);margin:10px 0}
.code-wrapper{position:relative;margin:10px 0}
.copy-btn{
  position:absolute;top:8px;right:8px;
  background:rgba(255,255,255,0.08);color:var(--text-secondary);
  border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-size:0.7rem;cursor:pointer;
  transition:var(--transition);z-index:1;
  opacity:1;font-family:var(--font);
}
@media(hover:hover){.copy-btn{opacity:0}.code-wrapper:hover .copy-btn{opacity:1}}
.copy-btn:hover{background:rgba(255,255,255,0.15);color:var(--text-primary)}
.copy-btn.copied{background:rgba(16,185,129,0.2);color:#6ee7b7;border-color:rgba(16,185,129,0.3)}

/* ── Intent badges ── */
.intent-badge{
  display:inline-block;font-size:0.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  padding:3px 9px;border-radius:999px;margin-bottom:5px;
}
.intent-concept  {background:rgba(59,130,246,0.15);color:#93c5fd;border:1px solid rgba(59,130,246,0.25)}
.intent-debug    {background:rgba(239,68,68,0.12);color:#fca5a5;border:1px solid rgba(239,68,68,0.25)}
.intent-codegen  {background:rgba(16,185,129,0.12);color:#6ee7b7;border:1px solid rgba(16,185,129,0.25)}
.intent-exercise {background:rgba(139,92,246,0.15);color:#c4b5fd;border:1px solid rgba(139,92,246,0.25)}
.intent-ambiguous{background:rgba(255,255,255,0.06);color:var(--text-secondary);border:1px solid var(--border)}
.intent-quiz     {background:rgba(245,158,11,0.12);color:#fcd34d;border:1px solid rgba(245,158,11,0.25)}
.intent-course   {background:rgba(6,182,212,0.12);color:#67e8f9;border:1px solid rgba(6,182,212,0.25)}
.xp-toast{
  display:inline-block;background:rgba(16,185,129,0.15);color:#6ee7b7;
  border:1px solid rgba(16,185,129,0.3);
  border-radius:999px;padding:2px 10px;font-size:0.68rem;font-weight:700;margin-top:5px;
}
.loading-dots{
  display:flex;gap:5px;padding:12px 15px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:16px;border-bottom-left-radius:4px;
  width:fit-content;box-shadow:var(--shadow-sm);
}
.loading-dots span{
  width:7px;height:7px;background:var(--text-muted);
  border-radius:50%;animation:bounce 1.2s infinite ease-in-out;
}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes bounce{0%,80%,100%{transform:scale(0.65);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ── Input area ── */
#input-area{
  width:100%;padding:10px 14px 12px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
  background:rgba(8,12,20,0.97);
  backdrop-filter:blur(12px);
}
#editor-toggle{display:flex;align-items:center;gap:8px}
#editor-toggle label{font-size:0.76rem;color:var(--text-muted);cursor:pointer;user-select:none}
#code-editor-toggle{
  appearance:none;width:34px;height:18px;
  background:var(--bg-elevated);border-radius:999px;
  cursor:pointer;position:relative;transition:background 0.2s;flex-shrink:0;
  border:1px solid var(--border);
}
#code-editor-toggle:checked{background:var(--accent);border-color:var(--accent)}
#code-editor-toggle::after{
  content:'';position:absolute;top:2px;left:2px;
  width:12px;height:12px;background:#fff;
  border-radius:50%;transition:left 0.2s;
}
#code-editor-toggle:checked::after{left:18px}
#code-editor-panel{display:none;flex-direction:column;gap:6px}
#code-editor-panel.visible{display:flex}
#code-editor-panel label{font-size:0.76rem;color:var(--text-muted)}
#code-input{
  background:#0d1117;border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text-primary);font-family:"Fira Code",Consolas,monospace;
  font-size:0.85rem;padding:10px 13px;resize:vertical;
  min-height:90px;max-height:220px;outline:none;
  tab-size:4;transition:border-color var(--transition);
  -webkit-text-size-adjust:100%;
}
#code-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
#code-input::placeholder{color:var(--text-muted)}
#message-row{display:flex;gap:8px;align-items:flex-end}
#message-input{
  flex:1;background:var(--bg-elevated);
  border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text-primary);font-size:1rem;
  padding:11px 15px;resize:none;min-height:46px;max-height:150px;
  line-height:1.55;outline:none;transition:border-color var(--transition);
  font-family:var(--font);-webkit-text-size-adjust:100%;
}
#message-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
#message-input::placeholder{color:var(--text-muted)}
#send-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border:none;border-radius:var(--radius);
  padding:0 20px;font-size:0.92rem;font-weight:700;
  cursor:pointer;transition:var(--transition);
  white-space:nowrap;min-width:68px;height:46px;flex-shrink:0;
  box-shadow:0 4px 14px rgba(59,130,246,0.35);font-family:var(--font);
}
#send-btn:hover:not(:disabled){
  box-shadow:0 6px 20px rgba(59,130,246,0.5);
  transform:translateY(-1px);
}
#send-btn:active:not(:disabled){transform:translateY(0)}
#send-btn:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}

/* ── Bottom nav (mobile) ── */
#bottom-nav{
  display:none;width:100%;
  background:rgba(8,12,20,0.98);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);flex-shrink:0;
  padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav-inner{display:flex;justify-content:space-around;padding:4px 0}
.bnav-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;border:none;color:var(--text-muted);
  font-size:0.58rem;cursor:pointer;padding:7px 10px;
  border-radius:var(--radius-sm);min-width:50px;
  transition:color var(--transition);font-family:var(--font);font-weight:500;
  letter-spacing:0.03em;
}
.bnav-btn .bnav-icon{font-size:1.35rem;line-height:1}
.bnav-btn.active{color:var(--accent)}
.bnav-btn:active{opacity:0.7}

/* ── Desktop nav tabs ── */
#desktop-nav{display:flex;gap:4px;align-items:center}
.nav-tab{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  border-radius:var(--radius-sm);padding:5px 13px;font-size:0.79rem;cursor:pointer;
  transition:var(--transition);white-space:nowrap;height:34px;
  font-family:var(--font);font-weight:500;
}
.nav-tab:hover{border-color:var(--border-focus);color:var(--accent)}
.nav-tab.active{
  background:rgba(59,130,246,0.12);border-color:var(--border-focus);
  color:#93c5fd;font-weight:600;
}

/* ── Scrollable panels ── */
#courses-panel,#quiz-panel,#progress-panel,#pricing-panel,#certificates-panel{
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px;
  display:none;flex-direction:column;gap:16px;
}
#courses-panel.active,#quiz-panel.active,
#progress-panel.active,#pricing-panel.active,
#certificates-panel.active{display:flex}
#courses-panel h3,#quiz-panel h3{
  color:var(--text-primary);font-size:0.97rem;font-weight:700;
}

/* ── Cards (generic) ── */
.progress-card,.course-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px;
  transition:var(--transition);
}
.progress-card:hover,.course-card:hover{border-color:rgba(59,130,246,0.3)}
.progress-card h3{
  color:var(--text-primary);font-size:0.93rem;margin-bottom:12px;font-weight:700;
}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-box{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;
  transition:var(--transition);
}
.stat-box:hover{border-color:rgba(59,130,246,0.3)}
.stat-box .val{font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:-0.03em}
.stat-box .key{font-size:0.68rem;color:var(--text-muted);margin-top:2px;font-weight:500;text-transform:uppercase;letter-spacing:0.06em}
.topic-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--border);
  font-size:0.84rem;flex-wrap:wrap;gap:5px;
}
.topic-row:last-child{border-bottom:none}
.weak-dot{width:8px;height:8px;background:var(--danger);border-radius:50%;flex-shrink:0}
.ok-dot  {width:8px;height:8px;background:var(--success);border-radius:50%;flex-shrink:0}
.badge-chip{
  display:inline-block;
  background:rgba(139,92,246,0.12);border:1px solid rgba(139,92,246,0.25);
  border-radius:999px;padding:3px 10px;font-size:0.74rem;margin:3px;
  color:#c4b5fd;font-weight:500;
}

/* ── Quiz ── */
#quiz-topic-select{
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius);
  padding:10px 13px;font-size:0.9rem;outline:none;
  width:100%;height:46px;font-family:var(--font);
  transition:var(--transition);
}
#quiz-topic-select:focus{border-color:var(--border-focus)}
#start-quiz-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border:none;border-radius:var(--radius);
  padding:0 24px;font-size:0.92rem;font-weight:700;cursor:pointer;
  height:46px;transition:var(--transition);font-family:var(--font);
  box-shadow:0 4px 14px var(--accent-glow);
}
#start-quiz-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-glow)}
#quiz-question-box{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px;
  display:none;flex-direction:column;gap:12px;
}
#quiz-question-box.visible{display:flex}
#quiz-q-text{font-size:0.95rem;line-height:1.65;color:var(--text-primary);font-weight:500}
.quiz-option{
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius);
  padding:13px 16px;font-size:0.88rem;cursor:pointer;
  transition:var(--transition);text-align:left;width:100%;
  min-height:48px;font-family:var(--font);
}
.quiz-option:hover:not(:disabled){
  border-color:var(--border-focus);background:var(--bg-hover);
  transform:translateX(2px);
}
.quiz-option:active:not(:disabled){transform:translateX(0)}
.quiz-option.correct{
  border-color:rgba(16,185,129,0.5);background:rgba(16,185,129,0.1);
  color:#6ee7b7;
}
.quiz-option.wrong{
  border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.08);
  color:#fca5a5;
}
#quiz-result-box{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px;
  display:none;font-size:0.88rem;line-height:1.7;
}
#quiz-result-box.visible{display:block}
#next-quiz-btn{
  background:rgba(16,185,129,0.15);color:#6ee7b7;
  border:1px solid rgba(16,185,129,0.3);border-radius:var(--radius);
  padding:0 20px;font-size:0.88rem;font-weight:700;cursor:pointer;
  display:none;height:46px;transition:var(--transition);font-family:var(--font);
}
#next-quiz-btn:hover{background:rgba(16,185,129,0.25)}
#next-quiz-btn.visible{display:inline-flex;align-items:center}

/* ── Courses ── */
.course-card{
  display:flex;justify-content:space-between;
  align-items:flex-start;gap:14px;flex-wrap:wrap;
}
.course-card .course-info{flex:1;min-width:0}
.course-card .course-info h4{
  font-size:0.92rem;color:var(--text-primary);margin-bottom:5px;font-weight:600;
}
.course-card .course-info p{font-size:0.78rem;color:var(--text-secondary);line-height:1.5}
.course-card .course-meta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex-shrink:0}
.level-pill{
  font-size:0.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.07em;padding:3px 9px;border-radius:999px;
}
.level-beginner    {background:rgba(16,185,129,0.15);color:#6ee7b7;border:1px solid rgba(16,185,129,0.25)}
.level-intermediate{background:rgba(245,158,11,0.15);color:#fcd34d;border:1px solid rgba(245,158,11,0.25)}
.level-advanced    {background:rgba(239,68,68,0.12);color:#fca5a5;border:1px solid rgba(239,68,68,0.25)}
.enrol-btn{
  background:rgba(59,130,246,0.12);color:#93c5fd;
  border:1px solid rgba(59,130,246,0.3);border-radius:var(--radius-sm);
  padding:8px 16px;font-size:0.82rem;font-weight:600;cursor:pointer;
  transition:var(--transition);white-space:nowrap;min-height:36px;font-family:var(--font);
}
.enrol-btn:hover{background:rgba(59,130,246,0.22);transform:translateY(-1px)}
#active-course-bar{
  background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);
  border-radius:var(--radius);padding:13px 16px;
  display:none;gap:12px;align-items:center;flex-wrap:wrap;
}
#active-course-bar.visible{display:flex}
#active-course-bar .course-title{flex:1;font-size:0.87rem;color:#93c5fd;min-width:0;font-weight:600}
#active-course-bar .step-info{font-size:0.75rem;color:var(--text-muted)}
#continue-course-btn{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border:none;border-radius:var(--radius-sm);
  padding:8px 16px;font-size:0.82rem;font-weight:700;cursor:pointer;
  min-height:36px;font-family:var(--font);transition:var(--transition);
  box-shadow:0 3px 10px var(--accent-glow);
}
#continue-course-btn:hover{transform:translateY(-1px)}

/* ── Pricing panel ── */
.pricing-header{text-align:center;padding:4px 0 8px}
.pricing-header h2{font-size:1.3rem;font-weight:800;letter-spacing:-0.03em;color:var(--text-primary)}
.pricing-header p{font-size:0.84rem;color:var(--text-secondary);margin-top:5px}
.pricing-grid{display:grid;grid-template-columns:1fr;gap:14px}
.tier-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:22px 18px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;transition:var(--transition);
}
.tier-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tier-1{border-top:3px solid var(--accent)}
.tier-2{border-top:3px solid var(--accent-2)}
.tier-3{border-top:3px solid var(--warning)}
.tier-badge{
  display:inline-block;font-size:0.62rem;font-weight:800;text-transform:uppercase;
  letter-spacing:0.12em;padding:3px 10px;border-radius:999px;width:fit-content;
}
.tier-1 .tier-badge{background:rgba(59,130,246,0.15);color:#93c5fd;border:1px solid rgba(59,130,246,0.3)}
.tier-2 .tier-badge{background:rgba(139,92,246,0.15);color:#c4b5fd;border:1px solid rgba(139,92,246,0.3)}
.tier-3 .tier-badge{background:rgba(245,158,11,0.15);color:#fcd34d;border:1px solid rgba(245,158,11,0.3)}
.popular-pill{
  position:absolute;top:-12px;right:14px;
  background:linear-gradient(135deg,var(--accent-2),#6d28d9);color:#fff;
  font-size:0.62rem;font-weight:800;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;letter-spacing:0.08em;
  box-shadow:0 4px 12px rgba(139,92,246,0.4);
}
.tier-name{font-size:1.1rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
.tier-price{
  display:flex;align-items:baseline;gap:5px;
  font-size:2rem;font-weight:900;color:var(--text-primary);line-height:1;letter-spacing:-0.04em;
}
.tier-price .currency{font-size:1.1rem;font-weight:600;color:var(--text-secondary)}
.tier-price .period{font-size:0.76rem;font-weight:400;color:var(--text-muted)}
.tier-desc{font-size:0.8rem;color:var(--text-secondary);line-height:1.55}
.tier-features{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1}
.tier-features li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:0.83rem;color:var(--text-secondary);line-height:1.4;
}
.tier-features li .feat-icon{flex-shrink:0;font-size:0.88rem;margin-top:1px}
.tier-cta{
  width:100%;padding:13px;border-radius:var(--radius);
  font-size:0.9rem;font-weight:700;cursor:pointer;border:none;
  letter-spacing:0.02em;min-height:46px;transition:var(--transition);
  font-family:var(--font);
}
.tier-1 .tier-cta{
  background:linear-gradient(135deg,#1d4ed8,var(--accent));color:#fff;
  box-shadow:0 4px 14px rgba(59,130,246,0.35);
}
.tier-2 .tier-cta{
  background:linear-gradient(135deg,#6d28d9,var(--accent-2));color:#fff;
  box-shadow:0 4px 14px rgba(139,92,246,0.35);
}
.tier-3 .tier-cta{
  background:linear-gradient(135deg,#b45309,var(--warning));color:#fff;
  box-shadow:0 4px 14px rgba(245,158,11,0.35);
}
.tier-cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.tier-cta:active{transform:translateY(0)}
.tier-cta.coming-soon{
  background:var(--bg-elevated);color:var(--text-muted);
  cursor:default;border:1px solid var(--border);box-shadow:none;
}
.tier-note{text-align:center;font-size:0.7rem;color:var(--text-muted)}
.free-banner{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:13px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.free-banner .free-text{font-size:0.84rem;color:var(--text-secondary)}
.free-banner .free-text strong{color:var(--success)}
.free-banner .free-pill{
  background:rgba(16,185,129,0.12);color:#6ee7b7;
  font-size:0.72rem;font-weight:700;padding:4px 12px;border-radius:999px;
  border:1px solid rgba(16,185,129,0.3);
}

/* ── Certificates panel ── */
#certificates-panel h3{color:var(--text-primary);font-size:0.97rem;font-weight:700}
.cert-level-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.cert-card{
  border-radius:var(--radius-xl);padding:22px 18px;
  display:flex;flex-direction:column;gap:13px;
  position:relative;border:1px solid var(--border);
  transition:var(--transition);
}
.cert-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cert-basic   {background:linear-gradient(140deg,rgba(29,78,216,0.15),var(--bg-card));border-color:rgba(59,130,246,0.3)}
.cert-advanced{background:linear-gradient(140deg,rgba(109,40,217,0.15),var(--bg-card));border-color:rgba(139,92,246,0.3)}
.cert-executive{background:linear-gradient(140deg,rgba(180,83,9,0.15),var(--bg-card));border-color:rgba(245,158,11,0.3)}
.cert-level-badge{
  display:inline-block;font-size:0.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.12em;
  padding:3px 12px;border-radius:999px;width:fit-content;
}
.cert-basic .cert-level-badge    {background:rgba(59,130,246,0.15);color:#93c5fd;border:1px solid rgba(59,130,246,0.3)}
.cert-advanced .cert-level-badge {background:rgba(139,92,246,0.15);color:#c4b5fd;border:1px solid rgba(139,92,246,0.3)}
.cert-executive .cert-level-badge{background:rgba(245,158,11,0.15);color:#fcd34d;border:1px solid rgba(245,158,11,0.3)}
.cert-card-title{font-size:1.05rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
.cert-card-body{font-size:0.8rem;color:var(--text-secondary);line-height:1.55;flex:1}
.cert-requirements{list-style:none;display:flex;flex-direction:column;gap:6px}
.cert-requirements li{
  font-size:0.78rem;color:var(--text-secondary);
  display:flex;gap:7px;align-items:flex-start;
}
.cert-requirements li::before{content:"✓";color:var(--success);flex-shrink:0;font-weight:700}
.cert-preview-btn{
  background:transparent;border:1px solid currentColor;
  border-radius:var(--radius);padding:10px 16px;font-size:0.84rem;
  font-weight:700;cursor:pointer;transition:var(--transition);
  min-height:42px;width:100%;font-family:var(--font);
}
.cert-basic     .cert-preview-btn{color:#93c5fd}
.cert-advanced  .cert-preview-btn{color:#c4b5fd}
.cert-executive .cert-preview-btn{color:#fcd34d}
.cert-preview-btn:hover{opacity:0.8;transform:translateY(-1px)}
.cert-name-input{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius-sm);padding:10px 13px;font-size:0.88rem;
  outline:none;width:100%;font-family:var(--font);height:44px;
  transition:var(--transition);
}
.cert-name-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
.cert-info-box{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px;
  font-size:0.82rem;color:var(--text-secondary);line-height:1.65;
}
.cert-info-box strong{color:var(--text-primary)}

/* ── Feedback button (hidden) + modal ── */
#feedback-fab{display:none !important}
#feedback-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);z-index:1000;
  align-items:center;justify-content:center;padding:18px;
}
#feedback-modal-overlay.open{display:flex}
#feedback-modal{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:30px 26px;width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:15px;
  position:relative;max-height:92vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:modalIn 0.22s ease;
}
@keyframes modalIn{from{opacity:0;transform:scale(0.96)}to{opacity:1;transform:scale(1)}}
#feedback-modal h3{color:var(--text-primary);font-size:1.05rem;font-weight:700}
#feedback-modal-close{
  position:absolute;top:16px;right:18px;
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-muted);font-size:1rem;cursor:pointer;
  border-radius:var(--radius-sm);width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
#feedback-modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.fb-label{font-size:0.76rem;color:var(--text-muted);margin-bottom:4px;font-weight:500}
.star-row{display:flex;gap:7px}
.star-btn{
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-muted);font-size:1.5rem;cursor:pointer;
  border-radius:var(--radius-sm);padding:5px 9px;transition:var(--transition);
}
.star-btn.active{background:rgba(245,158,11,0.15);color:#fcd34d;border-color:rgba(245,158,11,0.35)}
.star-btn:hover{background:var(--bg-hover);color:#fde68a}
.fb-textarea{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius);padding:11px 14px;font-size:0.88rem;
  resize:vertical;min-height:80px;max-height:160px;
  outline:none;font-family:var(--font);width:100%;transition:var(--transition);
}
.fb-textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
.fb-textarea::placeholder{color:var(--text-muted)}
.fb-checkbox-row{display:flex;align-items:center;gap:9px;font-size:0.84rem;color:var(--text-secondary)}
.fb-submit-btn{
  width:100%;background:linear-gradient(135deg,var(--accent-2),#6d28d9);
  color:#fff;border:none;border-radius:var(--radius);
  padding:13px;font-size:0.93rem;font-weight:700;cursor:pointer;
  transition:var(--transition);min-height:48px;font-family:var(--font);
  box-shadow:0 4px 14px rgba(139,92,246,0.35);
}
.fb-submit-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.fb-submit-btn:disabled{opacity:0.45;cursor:default;box-shadow:none}
.fb-success{
  background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);
  color:#6ee7b7;border-radius:var(--radius);padding:11px 15px;
  font-size:0.84rem;text-align:center;display:none;
}
.fb-success.visible{display:block}
.fb-error-msg{color:#fca5a5;font-size:0.82rem;display:none;text-align:center}
.fb-error-msg.visible{display:block}

/* ── Auth button & user chip ── */
#auth-btn{
  display:flex;align-items:center;gap:8px;
  background:#fff;color:#0f172a;
  border:none;border-radius:var(--radius-sm);
  padding:0 14px;height:38px;font-size:0.83rem;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:var(--transition);flex-shrink:0;font-family:var(--font);
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
#auth-btn:hover{box-shadow:0 4px 16px rgba(0,0,0,0.4);transform:translateY(-1px)}
#auth-btn svg{flex-shrink:0}

#user-chip{
  display:none;align-items:center;gap:8px;
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:999px;padding:3px 12px 3px 4px;
  cursor:pointer;transition:var(--transition);
  flex-shrink:0;position:relative;
}
#user-chip:hover{border-color:rgba(59,130,246,0.5)}
#user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--bg-hover)}
#user-avatar-fallback{
  display:none;width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;font-size:0.72rem;font-weight:800;
  align-items:center;justify-content:center;flex-shrink:0;
}
#user-name{font-size:0.78rem;color:var(--text-primary);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#user-chip::after{content:'▾';font-size:0.6rem;color:var(--text-muted);margin-left:2px}

#user-dropdown{
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);min-width:240px;padding:6px;
  z-index:500;box-shadow:var(--shadow-lg);
  animation:dropIn 0.15s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
#user-dropdown.open{display:block}
.dropdown-profile{padding:13px 14px 11px;border-bottom:1px solid var(--border);margin-bottom:5px}
.dropdown-profile .dp-name{font-size:0.9rem;font-weight:700;color:var(--text-primary)}
.dropdown-profile .dp-email{font-size:0.72rem;color:var(--text-muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-profile .dp-tier{
  display:inline-block;margin-top:7px;font-size:0.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.08em;padding:2px 9px;
  border-radius:999px;background:var(--bg-elevated);color:var(--text-muted);
}
.dropdown-profile .dp-tier.tier1{background:rgba(59,130,246,0.15);color:#93c5fd}
.dropdown-profile .dp-tier.tier2{background:rgba(139,92,246,0.15);color:#c4b5fd}
.dropdown-profile .dp-tier.tier3{background:rgba(245,158,11,0.15);color:#fcd34d}
.dropdown-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-radius:var(--radius-sm);font-size:0.84rem;
  color:var(--text-secondary);cursor:pointer;transition:var(--transition);
  border:none;background:transparent;width:100%;text-align:left;
  font-family:var(--font);
}
.dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.dropdown-divider{border:none;border-top:1px solid var(--border);margin:5px 0}
.dropdown-item.danger{color:#fca5a5}
.dropdown-item.danger:hover{background:rgba(239,68,68,0.1)}
#chpw-form{display:none;padding:11px 13px;border-top:1px solid var(--border);margin-top:3px}
#chpw-form input{
  width:100%;background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius-sm);
  padding:8px 11px;font-size:0.8rem;margin-bottom:7px;outline:none;
  font-family:var(--font);transition:var(--transition);
}
#chpw-form input:focus{border-color:var(--border-focus)}
#chpw-form .chpw-btn{
  width:100%;background:linear-gradient(135deg,var(--accent),#1d4ed8);
  color:#fff;border:none;border-radius:var(--radius-sm);
  padding:9px;font-size:0.82rem;font-weight:700;cursor:pointer;
  font-family:var(--font);transition:var(--transition);
}
#chpw-form .chpw-btn:hover{filter:brightness(1.1)}
#chpw-msg{font-size:0.74rem;margin-bottom:7px;display:none}

/* ── Auth modal ── */
.auth-tabs{
  display:flex;gap:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);margin-bottom:5px;background:var(--bg-elevated);
}
.auth-tab-btn{
  flex:1;background:transparent;border:none;color:var(--text-muted);
  padding:10px;font-size:0.84rem;font-weight:600;cursor:pointer;
  transition:var(--transition);font-family:var(--font);
}
.auth-tab-btn.active{background:rgba(59,130,246,0.15);color:#93c5fd}
.auth-tab-btn:first-child{border-right:1px solid var(--border)}
.auth-form{display:flex;flex-direction:column;gap:10px;width:100%}
.auth-form input{
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius);
  padding:11px 14px;font-size:0.92rem;
  outline:none;width:100%;font-family:var(--font);height:46px;
  transition:var(--transition);-webkit-text-size-adjust:100%;
}
.auth-form input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
.auth-form input::placeholder{color:var(--text-muted)}
.auth-submit-btn{
  width:100%;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;border:none;border-radius:var(--radius);
  padding:13px;font-size:0.93rem;font-weight:700;cursor:pointer;min-height:48px;
  transition:var(--transition);font-family:var(--font);
  box-shadow:0 4px 16px var(--accent-glow);
}
.auth-submit-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.auth-submit-btn:disabled{opacity:0.45;cursor:default;box-shadow:none}
.auth-success{
  background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.3);
  color:#6ee7b7;border-radius:var(--radius);padding:11px 15px;
  font-size:0.83rem;line-height:1.55;display:none;text-align:center;
}
.auth-success.visible{display:block}
.auth-divider{
  display:flex;align-items:center;gap:8px;
  color:var(--text-muted);font-size:0.76rem;
}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
#auth-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.8);backdrop-filter:blur(10px);z-index:1000;
  align-items:center;justify-content:center;padding:20px;
}
#auth-modal-overlay.open{display:flex}
#auth-modal{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:34px 28px;width:100%;max-width:390px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  position:relative;box-shadow:var(--shadow-lg);
  animation:modalIn 0.22s ease;
}
#auth-modal-close{
  position:absolute;top:14px;right:16px;
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-muted);font-size:1rem;cursor:pointer;
  border-radius:var(--radius-sm);width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);
}
#auth-modal-close:hover{color:var(--text-primary);background:var(--bg-hover)}
.auth-modal-logo{
  font-size:0;width:56px;height:56px;border-radius:16px;overflow:hidden;
  box-shadow:0 0 24px rgba(59,130,246,0.3);border:1px solid rgba(59,130,246,0.2);
}
.auth-modal-logo img{width:100%;height:100%;object-fit:cover}
.auth-modal-title{font-size:1.15rem;font-weight:800;color:var(--text-primary);text-align:center;letter-spacing:-0.02em}
.auth-modal-sub{font-size:0.82rem;color:var(--text-secondary);text-align:center;line-height:1.55}
#google-signin-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:#fff;color:#0f172a;text-decoration:none;
  border-radius:var(--radius);padding:13px 20px;font-size:0.93rem;font-weight:700;
  transition:var(--transition);min-height:50px;font-family:var(--font);
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
}
#google-signin-btn:hover{box-shadow:0 6px 20px rgba(0,0,0,0.4);transform:translateY(-1px)}
#github-signin-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;background:#24292e;color:#fff;text-decoration:none;
  border-radius:var(--radius);padding:13px 20px;font-size:0.93rem;font-weight:700;
  transition:var(--transition);min-height:50px;font-family:var(--font);
  box-shadow:0 2px 12px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.08);
}
#github-signin-btn:hover{box-shadow:0 6px 20px rgba(0,0,0,0.5);transform:translateY(-1px)}
.auth-modal-note{font-size:0.72rem;color:var(--text-muted);text-align:center;line-height:1.55}
#auth-modal-error{font-size:0.82rem;color:#fca5a5;text-align:center;display:none}

/* ── Forgot password / reset form ── */
#auth-forgot-form,#auth-reset-form{display:none}
#auth-forgot-form.visible,#auth-reset-form.visible{display:flex}

/* ── Survey modal ── */
#survey-modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);
  z-index:1000;align-items:center;justify-content:center;padding:18px;
}
#survey-modal-overlay.open{display:flex}
#survey-modal{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:28px 24px;width:100%;max-width:400px;
  display:flex;flex-direction:column;gap:15px;position:relative;
  box-shadow:var(--shadow-lg);animation:modalIn 0.22s ease;
}

/* ── Upgrade modal ── */
#upgrade-modal{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:30px 26px;width:100%;max-width:400px;
  display:flex;flex-direction:column;gap:18px;position:relative;
  box-shadow:var(--shadow-lg);animation:modalIn 0.22s ease;text-align:center;
}
#upgrade-modal h3{font-size:1.1rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
#upgrade-modal p{font-size:0.88rem;color:var(--text-secondary);line-height:1.6}

/* ── Topic select ── */
#topic-select,#topic-select-mobile{
  background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);
  border-radius:var(--radius);padding:8px 10px;font-size:0.82rem;
  cursor:pointer;outline:none;height:38px;font-family:var(--font);
  transition:var(--transition);
}
#topic-select:focus,#topic-select-mobile:focus{border-color:var(--border-focus)}

/* ── Toast notifications ── */
#toast-container{
  position:fixed;bottom:80px;left:50%;transform:translateX(-50%);
  z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;
  pointer-events:none;
}
.toast{
  background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius-lg);
  padding:10px 20px;font-size:0.85rem;font-weight:600;
  box-shadow:var(--shadow-lg);
  animation:toastIn 0.2s ease;backdrop-filter:blur(10px);
}
.toast.success{background:rgba(16,185,129,0.15);border-color:rgba(16,185,129,0.3);color:#6ee7b7}
.toast.error{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.3);color:#fca5a5}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive: mobile ── */
@media(max-width:639px){
  #desktop-nav{display:none}
  #topic-select{display:none}
  #bottom-nav{display:block}
  .message{max-width:95%}
  #badge-row{display:none}
  .pricing-grid{grid-template-columns:1fr}
  #auth-modal{padding:28px 18px}
  #chat-container{padding:12px}
  .cert-level-cards{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
}

/* ── Responsive: tablet+ ── */
@media(min-width:640px){
  #bottom-nav{display:none}
  #desktop-nav{display:flex}
  #menu-btn{display:none}
  #sidebar-overlay{display:none !important}
  #sidebar{
    position:relative;transform:none !important;
    width:225px;flex-shrink:0;border-right:1px solid var(--border);
    padding:14px 10px;z-index:auto;
  }
  #sidebar-close,.sidebar-header{display:none}
  #app-body{flex-direction:row}
  .pricing-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  #chat-container{padding:18px 22px}
}

/* ── Large desktop ── */
@media(min-width:1024px){
  header,#xp-bar-wrap,#app-body{
    max-width:1140px;align-self:center;width:100%;
  }
  body{align-items:center}
}

/* ── Page panel scroll fix ── */
#courses-panel,#quiz-panel,#progress-panel,
#pricing-panel,#certificates-panel{display:none;flex-direction:column}
#courses-panel.active{display:flex}
#quiz-panel.active{display:flex}
#progress-panel.active{display:flex}
#pricing-panel.active{display:flex}
#certificates-panel.active{display:flex}

/* ── Profile panel ── */
.prof-label{
  display:block;font-size:0.74rem;color:var(--text-muted);
  margin-bottom:5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
}
.prof-input{
  width:100%;background:var(--bg-elevated);border:1px solid var(--border);
  color:var(--text-primary);border-radius:var(--radius);
  padding:10px 13px;font-size:0.9rem;outline:none;
  font-family:var(--font);transition:var(--transition);
}
.prof-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px var(--accent-glow)}
.prof-input::placeholder{color:var(--text-muted)}
textarea.prof-input{resize:vertical;min-height:72px;line-height:1.55}
#profile-panel{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ── Premium background — subtle animated grid ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%,rgba(59,130,246,0.12),transparent),
    radial-gradient(ellipse 60% 40% at 90% 80%,rgba(139,92,246,0.08),transparent),
    radial-gradient(ellipse 50% 60% at 10% 90%,rgba(6,182,212,0.06),transparent);
  background-color: var(--bg-base);
  pointer-events: none;
}

/* Subtle dot-grid overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* ── Mobile UX improvements ── */
/* Larger text in chat bubbles on small screens */
@media(max-width:480px){
  .bubble { font-size: 0.95rem; padding: 12px 14px; }
  #send-btn { min-width: 56px; padding: 0 14px; }
  .nav-tab { padding: 5px 9px; font-size: 0.75rem; }
  .tier-price { font-size: 1.7rem; }
  .auth-modal-title { font-size: 1rem; }
  #auth-modal { padding: 26px 18px; }
}

/* Prevent double-tap zoom on buttons */
button, a { touch-action: manipulation; }

/* Smooth scroll on all scrollable containers */
* { scroll-behavior: smooth; }

/* Better tap highlight */
button:active, a:active { opacity: 0.75; }