/* =======================================================
   LEARNORA — Design System  ·  Logo-accurate palette
   Colors sourced from official logo-dr.png / logo-lg.png
   ======================================================= */

:root {
  /* ── Brand Palette ── */
  --navy:        #0D1B4B;   /* logo-dr background */
  --navy-2:      #162040;   /* sidebar gradient end */
  --navy-3:      #1A2C6B;   /* medium navy */
  --blue:        #1565C0;   /* gradient start for CTA */
  --cyan:        #29ABE2;   /* logo cyan accent */
  --cyan-2:      #63C5E8;   /* lighter cyan */
  --cyan-light:  rgba(41,171,226,0.12);

  /* ── Gradient Shorthands ── */
  --grad-brand:  linear-gradient(135deg, #1565C0 0%, #29ABE2 100%);
  --grad-dark:   linear-gradient(160deg, #0D1B4B 0%, #1A2C6B 100%);
  --grad-shimmer:linear-gradient(120deg,#1565C0 0%,#29ABE2 40%,#63C5E8 60%,#1565C0 100%);

  /* ── Neutral Palette ── */
  --white:       #FFFFFF;
  --surface:     #FFFFFF;   /* card / panel / input backgrounds */
  --bg:          #F4F7FF;   /* app background */
  --gray-50:     #F8FAFC;
  --gray-100:    #EEF2F7;
  --gray-200:    #DDE3EE;
  --gray-300:    #C4CEDF;
  --gray-400:    #8FA0BB;
  --gray-500:    #637087;
  --gray-600:    #465069;
  --gray-700:    #2E3A52;
  --gray-800:    #1B2540;
  --gray-900:    #0D1526;

  /* ── Status ── */
  --success:        #10B981;
  --success-light:  #D1FAE5;
  --warning:        #F59E0B;
  --warning-light:  #FEF3C7;
  --danger:         #EF4444;
  --danger-light:   #FEE2E2;
  --info:           #3B82F6;
  --info-light:     #DBEAFE;

  /* ── Layout ── */
  --sidebar-w:    272px;
  --header-h:     60px;

  /* ── Spacing / Radius ── */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius:     10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(13,27,75,0.06);
  --shadow-sm:  0 2px 6px rgba(13,27,75,0.08);
  --shadow:     0 4px 16px rgba(13,27,75,0.10);
  --shadow-md:  0 8px 28px rgba(13,27,75,0.13);
  --shadow-lg:  0 16px 48px rgba(13,27,75,0.18);
  --shadow-cyan:0 4px 20px rgba(41,171,226,0.30);

  /* ── Motion ── */
  --ease:       cubic-bezier(0.4,0,0.2,1);
  --ease-out:   cubic-bezier(0,0,0.2,1);
  --transition: all 0.2s var(--ease);
  --trans-slow: all 0.35s var(--ease);
}

/* ======================================================
   KEYFRAMES
   ====================================================== */
@keyframes nprogress {
  0%   { width:0%;   opacity:1; }
  80%  { width:85%;  opacity:1; }
  100% { width:100%; opacity:0; }
}
@keyframes appLoaderFade {
  0%   { opacity:1; }
  100% { opacity:0; pointer-events:none; }
}
@keyframes offlineBanner {
  from { transform:translateY(-100%); }
  to   { transform:translateY(0); }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-16px); }
  to   { opacity:1; transform:translateX(0);     }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.93); }
  to   { opacity:1; transform:scale(1);    }
}
@keyframes shimmerMove {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0);    }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes skeletonPulse {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
@keyframes progressFill {
  from { width:0; }
}
@keyframes notifPulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.15); }
}

/* ======================================================
   RESET & BASE
   ====================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:15px; }
body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--gray-800);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
input, textarea, select, button { font-family:inherit; }
button { cursor:pointer; }

/* Scrollbar */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--gray-400); }

/* ======================================================
   APP LAYOUT
   ====================================================== */
.app-layout { display:flex; min-height:100vh; }

/* ======================================================
   SIDEBAR
   ====================================================== */
.sidebar {
  width:var(--sidebar-w);
  background:var(--grad-dark);
  min-height:100vh;
  position:fixed;
  top:0; left:0; bottom:0;
  display:flex;
  flex-direction:column;
  z-index:900;
  transition:transform 0.3s var(--ease);
  overflow:hidden;
  box-shadow:4px 0 24px rgba(0,0,0,0.18);
}

/* Logo area */
.sidebar-brand {
  display:flex;
  align-items:center;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  text-decoration:none;
  flex-shrink:0;
}
.sidebar-logo-img {
  width:36px; height:36px;
  object-fit:cover;
  object-position:50% 35%;
  border-radius:9px;
  flex-shrink:0;
  display:block;
}

.sidebar-brand-text {
  font-size:1.1rem; font-weight:800; color:#fff;
  letter-spacing:-0.3px; margin-left:10px;
  overflow:hidden; white-space:nowrap;
  border-right:2px solid var(--cyan);
}
.sidebar-brand-text span { color:var(--cyan); }
.sidebar-brand-text.typed-done { border-right:none; }
.sidebar-brand-text.typed-blinking { border-right:2px solid var(--cyan); animation:caretBlink 0.5s step-end 8; }

@keyframes caretBlink {
  0%,100% { border-right-color:var(--cyan); }
  50%      { border-right-color:transparent; }
}

/* Nav */
.sidebar-nav {
  flex:1;
  padding:14px 10px;
  overflow-y:auto;
  overflow-x:hidden;
}
.sidebar-section { margin-bottom:6px; }
.sidebar-label {
  color:rgba(255,255,255,0.28);
  font-size:0.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1.8px;
  padding:8px 14px 5px;
  display:block;
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:var(--radius);
  color:rgba(255,255,255,0.55);
  font-size:0.875rem;
  font-weight:500;
  transition:background 0.18s, color 0.18s, transform 0.15s;
  cursor:pointer;
  position:relative;
  border:none;
  background:none;
  width:100%;
  text-align:left;
  text-decoration:none;
  overflow:hidden;
}
.nav-item::before {
  content:'';
  position:absolute;
  left:0; top:20%; bottom:20%;
  width:3px;
  background:var(--cyan);
  border-radius:0 3px 3px 0;
  transform:scaleY(0);
  transition:transform 0.2s var(--ease);
}
.nav-item:hover {
  background:rgba(255,255,255,0.07);
  color:rgba(255,255,255,0.92);
  transform:translateX(2px);
}
.nav-item.active {
  background:rgba(41,171,226,0.16);
  color:#fff;
  font-weight:600;
}
.nav-item.active::before { transform:scaleY(1); }
.nav-icon { width:20px; text-align:center; font-size:0.95rem; flex-shrink:0; }
.nav-badge {
  margin-left:auto;
  background:var(--danger);
  color:white;
  font-size:0.6rem;
  font-weight:700;
  padding:2px 6px;
  border-radius:100px;
  min-width:18px;
  text-align:center;
  animation:notifPulse 2s ease-in-out infinite;
}
.nav-badge.info { background:var(--cyan); animation:none; }

/* Sidebar user */
.sidebar-user {
  padding:14px 14px;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:background 0.18s;
}
.sidebar-user:hover { background:rgba(255,255,255,0.05); }
.user-avatar {
  width:36px; height:36px; min-width:36px; min-height:36px; border-radius:50%;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:0.8rem; font-weight:700; flex-shrink:0;
  position:relative;
  box-shadow:0 2px 8px rgba(41,171,226,0.3);
  overflow:hidden; /* prevent image from changing container size */
}
.user-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; flex-shrink:0; }
.online-dot {
  position:absolute; bottom:0; right:0;
  width:9px; height:9px; background:var(--success);
  border-radius:50%; border:1.5px solid var(--navy);
}
.user-info { flex:1; overflow:hidden; }
.user-name { color:white; font-size:0.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role { color:rgba(255,255,255,0.4); font-size:0.7rem; }
.user-settings { color:rgba(255,255,255,0.3); font-size:0.85rem; padding:4px; border-radius:4px; background:none; border:none; transition:var(--transition); }
.user-settings:hover { color:white; background:rgba(255,255,255,0.1); }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(2px);
  z-index:850;
  display:none;
  animation:fadeIn 0.2s;
}
.sidebar-overlay.active { display:block; }

/* ======================================================
   MAIN CONTENT
   ====================================================== */
.main-content {
  margin-left:var(--sidebar-w);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  width:calc(100% - var(--sidebar-w));
  max-width:calc(100vw - var(--sidebar-w));
  overflow-x:hidden;
  transition:margin-left 0.3s var(--ease), width 0.3s var(--ease);
}

/* ======================================================
   TOP HEADER
   ====================================================== */
.top-header {
  height:var(--header-h);
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  display:flex;
  align-items:center;
  padding:0 24px;
  gap:16px;
  position:sticky;
  top:0;
  z-index:800;
  box-shadow:var(--shadow-xs);
}
.header-menu-btn {
  display:none;
  background:none; border:none;
  color:var(--gray-600); font-size:1.1rem;
  padding:7px; border-radius:var(--radius);
  transition:var(--transition);
}
.header-menu-btn:hover { background:var(--gray-100); color:var(--navy); }

.header-search { flex:1; max-width:400px; position:relative; }
.header-search input {
  width:100%;
  background:var(--gray-100);
  border:1.5px solid transparent;
  border-radius:100px;
  padding:8px 16px 8px 38px;
  font-size:0.875rem;
  color:var(--gray-800);
  outline:none;
  transition:var(--transition);
}
.header-search input:focus {
  border-color:var(--cyan);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(41,171,226,0.12);
}
.header-search .search-icon {
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:0.85rem; pointer-events:none;
}

.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

/* ── Global Search Dropdown ─────────────────────────────────── */
.search-results-dropdown {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--surface); border:1px solid var(--gray-200);
  border-radius:14px; box-shadow:var(--shadow-lg);
  z-index:1200; overflow:hidden;
  animation:scaleIn 0.15s var(--ease-out);
  transform-origin:top center;
  max-height:420px; overflow-y:auto;
}
.search-group-label { font-size:.7rem; font-weight:700; color:var(--gray-400); text-transform:uppercase; letter-spacing:.07em; padding:10px 16px 4px; }
.search-result-item { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; transition:background .12s; }
.search-result-item:hover { background:var(--gray-50); }
.search-result-icon { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.search-result-title { font-size:.85rem; font-weight:600; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-result-sub { font-size:.73rem; color:var(--gray-400); }
.search-divider { height:1px; background:var(--gray-100); margin:4px 0; }

.xp-chip {
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,rgba(21,101,192,0.08),rgba(41,171,226,0.08));
  border:1.5px solid rgba(41,171,226,0.2);
  padding:6px 14px; border-radius:100px;
  font-size:0.78rem; font-weight:700; color:var(--blue);
  cursor:pointer; transition:var(--transition);
  white-space:nowrap;
}
.xp-chip:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(41,171,226,0.1); }
.xp-chip i { color:var(--warning); }

.header-btn {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  color:var(--gray-500); font-size:1rem;
  transition:var(--transition); position:relative;
}
.header-btn:hover { background:var(--gray-100); color:var(--navy); }
.notif-dot {
  position:absolute; top:6px; right:6px;
  width:8px; height:8px; background:var(--danger);
  border-radius:50%; border:1.5px solid white;
  display:none;
  animation:notifPulse 2s ease-in-out infinite;
}

/* Avatar (header) */
.user-avatar.avatar-sm { width:32px; height:32px; min-width:32px; min-height:32px; font-size:0.72rem; }
.user-avatar.avatar-md { width:42px; height:42px; min-width:42px; min-height:42px; font-size:0.9rem; }

/* ======================================================
   PAGE CONTENT  — with entrance animation
   ====================================================== */
.page-content {
  flex:1;
  padding:28px 26px;
  animation:fadeInUp 0.32s var(--ease-out) both;
}
.page-header { margin-bottom:24px; }
.page-title { font-size:1.45rem; font-weight:800; color:var(--navy); letter-spacing:-0.5px; }
.page-sub   { color:var(--gray-500); font-size:0.875rem; margin-top:3px; }

/* ======================================================
   CARDS
   ====================================================== */
.card {
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--gray-200);
  overflow:hidden;
  transition:box-shadow 0.22s, border-color 0.22s, transform 0.22s;
}
.card:hover { box-shadow:var(--shadow); }
.card-body   { padding:20px; }
.card-header {
  padding:16px 20px;
  border-bottom:1px solid var(--gray-100);
  display:flex; align-items:center; justify-content:space-between;
}
.card-title { font-size:0.95rem; font-weight:700; color:var(--navy); }
.mb-4 { margin-bottom:16px; }

/* ======================================================
   BUTTONS
   ====================================================== */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 20px; border-radius:var(--radius);
  font-size:0.875rem; font-weight:600;
  border:none; cursor:pointer;
  transition:transform 0.15s, box-shadow 0.15s, background-position 0.4s;
  position:relative; overflow:hidden;
}
.btn:active { transform:scale(0.97) !important; }
.btn-sm  { padding:6px 14px; font-size:0.8rem; }
.btn-lg  { padding:12px 26px; font-size:1rem; }
.btn-primary {
  background:var(--grad-shimmer);
  background-size:200% auto;
  color:white;
  box-shadow:var(--shadow-cyan);
}
.btn-primary:hover {
  background-position:right center;
  box-shadow:0 6px 24px rgba(41,171,226,0.42);
  transform:translateY(-1px);
}
.btn-secondary { background:var(--gray-100); color:var(--gray-700); }
.btn-secondary:hover { background:var(--gray-200); }
.btn-outline {
  background:transparent;
  border:1.5px solid var(--gray-300);
  color:var(--gray-700);
}
.btn-outline:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(41,171,226,0.05); }
.btn-danger  { background:var(--danger);  color:white; }
.btn-danger:hover { background:#DC2626; transform:translateY(-1px); }
.btn-success { background:var(--success); color:white; }
.btn-ghost   { background:transparent; color:var(--gray-600); padding:6px 10px; }
.btn-ghost:hover { background:var(--gray-100); color:var(--navy); }
.btn-icon    { width:34px; height:34px; padding:0; justify-content:center; border-radius:var(--radius); }
.w-full      { width:100%; }

/* ======================================================
   BADGES / TAGS
   ====================================================== */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px; border-radius:100px;
  font-size:0.7rem; font-weight:700;
}
.badge-blue    { background:var(--info-light);    color:var(--info);    }
.badge-green   { background:var(--success-light); color:var(--success); }
.badge-yellow  { background:var(--warning-light); color:#B45309;        }
.badge-red     { background:var(--danger-light);  color:var(--danger);  }
.badge-gray    { background:var(--gray-100);      color:var(--gray-600);}
.badge-cyan    { background:rgba(41,171,226,0.12);color:var(--blue);   }
.badge-success { background:var(--success-light); color:var(--success); }
.badge-secondary { background:var(--gray-100);    color:var(--gray-500);}

/* Subject badges */
.subject-badge { font-size:0.7rem; font-weight:600; padding:3px 10px; border-radius:100px; }
.math, .sub-math         { background:#EDE9FE; color:#7C3AED; }
.physics, .sub-physics   { background:#DBEAFE; color:var(--blue); }
.chemistry,.sub-chem     { background:#FEF3C7; color:#B45309; }
.biology, .sub-bio       { background:#D1FAE5; color:#065F46; }
.english, .sub-english   { background:#E0F2FE; color:#0369A1; }
.history, .sub-history   { background:#FEF9C3; color:#A16207; }
.geography,.sub-geo      { background:#DCFCE7; color:#15803D; }
.sub-cs, .cs             { background:#F0FDF4; color:#166534; }
.sub-other               { background:var(--gray-100); color:var(--gray-600); }

/* ======================================================
   FORMS
   ====================================================== */
.form-group  { margin-bottom:18px; }
.form-label  { display:block; font-size:0.84rem; font-weight:600; color:var(--gray-700); margin-bottom:7px; }
.form-control {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--gray-300);
  border-radius:var(--radius);
  font-size:0.875rem; color:var(--gray-800);
  background:var(--surface); outline:none;
  transition:border-color 0.18s, box-shadow 0.18s;
}
.form-control:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(41,171,226,0.14);
}
.form-control::placeholder { color:var(--gray-400); }
.form-control.error { border-color:var(--danger); }
.form-error { color:var(--danger); font-size:0.78rem; margin-top:5px; padding:8px 12px; background:var(--danger-light); border-radius:var(--radius-sm); }
textarea.form-control { resize:vertical; min-height:100px; }
.form-input {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius);
  font-size: 0.875rem; color: var(--gray-800);
  background: var(--surface); outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
}
.form-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(41,171,226,0.14);
}
.form-input::placeholder { color: var(--gray-400); }
body.app-dark .form-input { color: var(--gray-800); }

select.form-control,
select.form-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z' fill='%238FA0BB'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
  line-height: 1.4;
  font-family: inherit;
}
select.form-control:hover,
select.form-input:hover {
  border-color: var(--gray-400);
}
select.form-control option,
select.form-input option {
  padding: 8px 12px;
  font-size: .875rem;
  background: var(--surface);
  color: var(--gray-800);
}
body.app-dark select.form-control,
body.app-dark select.form-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z' fill='%23637087'/%3E%3C/svg%3E");
}
body.app-dark select.form-control option,
body.app-dark select.form-input option {
  background: #0d2040;
  color: var(--gray-800);
}

/* ======================================================
   AVATAR
   ====================================================== */
.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; font-weight:700; color:white; flex-shrink:0;
  background:var(--grad-brand); overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-xs { width:24px; height:24px; font-size:0.6rem; }
.avatar-sm { width:32px; height:32px; min-width:32px; min-height:32px; font-size:0.72rem; overflow:hidden; }
.avatar-md { width:42px; height:42px; min-width:42px; min-height:42px; font-size:0.9rem; overflow:hidden; }
.avatar-lg { width:56px; height:56px; min-width:56px; min-height:56px; font-size:1.1rem; overflow:hidden; }
.avatar-xl { width:80px; height:80px; font-size:1.5rem; }
.avatar-2 { background:linear-gradient(135deg,#7C3AED,#4F46E5); }
.avatar-3 { background:linear-gradient(135deg,#059669,#0D9488); }
.avatar-4 { background:linear-gradient(135deg,#DB2777,#E11D48); }
.avatar-5 { background:linear-gradient(135deg,#D97706,#EF4444); }

/* ======================================================
   DASHBOARD
   ====================================================== */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:24px;
}
.stat-card {
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--gray-200);
  padding:20px;
  transition:var(--trans-slow);
  animation:fadeInUp 0.4s var(--ease-out) both;
}
.stat-card:nth-child(1){animation-delay:0.05s}
.stat-card:nth-child(2){animation-delay:0.10s}
.stat-card:nth-child(3){animation-delay:0.15s}
.stat-card:nth-child(4){animation-delay:0.20s}
.stat-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--gray-300); }
.stat-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  margin-bottom:14px;
}
.stat-value { font-size:1.8rem; font-weight:900; color:var(--navy); letter-spacing:-1px; }
.stat-label { font-size:0.78rem; color:var(--gray-500); margin-top:2px; }
.stat-info  { display:flex; flex-direction:column; }

/* XP Progress (inline in dashboard HTML) */
.xp-progress-card { grid-column:span 4; }
.xp-progress-bar { height:10px; background:rgba(255,255,255,0.2); border-radius:100px; overflow:hidden; margin:12px 0 6px; }
.xp-progress-fill {
  height:100%;
  background:linear-gradient(90deg,#63C5E8,#29ABE2);
  border-radius:100px;
  transition:width 1.2s var(--ease-out);
  animation:progressFill 1.2s var(--ease-out) both;
}
.xp-level { font-size:0.82rem; font-weight:700; background:rgba(255,255,255,0.18); padding:5px 12px; border-radius:100px; backdrop-filter:blur(4px); }
.xp-progress-header { display:flex; justify-content:space-between; align-items:center; }
.xp-progress-label  { display:flex; justify-content:space-between; font-size:0.75rem; color:rgba(255,255,255,0.6); }

/* Quick actions */
.quick-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
.qa-btn {
  background:var(--surface); border:1.5px solid var(--gray-200); border-radius:var(--radius-md);
  padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:0.82rem; font-weight:600; color:var(--gray-700);
  transition:var(--transition); cursor:pointer;
  animation:fadeInUp 0.4s var(--ease-out) both;
}
.qa-btn:nth-child(1){animation-delay:0.1s}
.qa-btn:nth-child(2){animation-delay:0.15s}
.qa-btn:nth-child(3){animation-delay:0.2s}
.qa-btn:nth-child(4){animation-delay:0.25s}
.qa-btn span { font-size:1.5rem; }
.qa-btn:hover { border-color:var(--cyan); color:var(--blue); box-shadow:var(--shadow); transform:translateY(-2px); }

/* Level / progress */
.level-card {
  background:var(--surface); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:20px;
  margin-bottom:24px;
}
.level-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.level-header h3 { font-size:1rem; font-weight:700; color:var(--navy); }
.level-badge { background:var(--grad-brand); color:white; padding:4px 12px; border-radius:100px; font-size:0.78rem; font-weight:700; }
.progress-bar  { height:8px; background:var(--gray-100); border-radius:100px; overflow:hidden; }
.progress-fill { height:100%; background:var(--grad-brand); border-radius:100px; transition:width 1s var(--ease-out); }
.progress-label { font-size:0.75rem; color:var(--gray-400); text-align:right; margin-top:6px; }

/* Section header */
.section-header { display:flex; justify-content:space-between; align-items:center; margin:24px 0 14px; }
.section-header h2 { font-size:1rem; font-weight:700; color:var(--navy); }
.section-header a { font-size:0.8rem; color:var(--cyan); font-weight:600; }

/* Leaderboard rows (in dashboard preview) */
.leaderboard-card { background:var(--surface); border:1px solid var(--gray-200); border-radius:var(--radius-md); overflow:hidden; }
.lb-row { display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--gray-100); transition:background 0.15s; }
.lb-row:last-child { border-bottom:none; }
.lb-row:hover { background:var(--gray-50); }
.lb-rank { font-size:1rem; width:28px; text-align:center; font-weight:800; color:var(--gray-400); }
.lb-rank.rank-1 { color:#F59E0B; }
.lb-rank.rank-2 { color:#94A3B8; }
.lb-rank.rank-3 { color:#CD7F32; }
.lb-info { flex:1; }
.lb-info span { font-size:0.875rem; font-weight:600; color:var(--navy); display:block; }
.lb-info small { font-size:0.72rem; color:var(--gray-400); }
.lb-xp { font-size:0.8rem; font-weight:700; color:var(--cyan); }

/* Leaderboard page full */
.leaderboard-item { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--gray-100); transition:background 0.15s; }
.leaderboard-item:last-child { border-bottom:none; }
.lb-pos { width:28px; text-align:center; font-size:0.88rem; font-weight:800; color:var(--gray-400); }
.lb-pos.gold   { color:#F59E0B; font-size:1.1rem; }
.lb-pos.silver { color:#94A3B8; font-size:1.1rem; }
.lb-pos.bronze { color:#CD7F32; font-size:1.1rem; }
.lb-user-name { flex:1; font-size:0.875rem; font-weight:600; color:var(--navy); }
.grade-pills   { display:flex; gap:6px; flex-wrap:wrap; }
.grade-pill {
  padding:5px 13px; border-radius:100px; border:1.5px solid var(--gray-300);
  font-size:0.78rem; font-weight:600; color:var(--gray-600);
  cursor:pointer; transition:var(--transition); background:var(--surface);
}
.grade-pill:hover, .grade-pill.active { background:var(--navy); color:white; border-color:var(--navy); }

/* ======================================================
   COMMUNITY — CREATE POST CARD
   ====================================================== */
.create-post-card {
  display:flex; align-items:center; gap:12px;
  background:var(--surface);
  border:1.5px solid var(--gray-200);
  border-radius:var(--radius-md);
  padding:12px 16px;
  cursor:pointer;
  transition:border-color 0.2s, box-shadow 0.2s;
  margin-bottom:12px;
}
.create-post-card:hover {
  border-color:var(--cyan);
  box-shadow:0 2px 14px rgba(41,171,226,0.13);
}
.create-post-input {
  flex:1; min-width:0;
  font-size:0.875rem; color:var(--gray-400);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; user-select:none;
}

/* ======================================================
   COMMUNITY — FILTER ROW
   ====================================================== */
.filter-row {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:6px; margin-bottom:14px;
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-md);
  padding:10px 14px;
}
.filter-btn {
  padding:6px 15px; border-radius:100px; border:none;
  background:transparent;
  font-size:0.78rem; font-weight:600; color:var(--gray-500);
  cursor:pointer; transition:all 0.18s; white-space:nowrap;
}
.filter-btn:hover { color:var(--navy); background:var(--gray-100); }
.filter-btn.active {
  background:var(--navy); color:#fff;
  box-shadow:0 2px 8px rgba(13,27,75,0.18);
}
.grade-select {
  margin-left:auto;
  appearance:none; -webkit-appearance:none;
  background-color:var(--gray-100);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M5.5 7L0 0h11z' fill='%238FA0BB'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  border:1.5px solid var(--gray-200);
  border-radius:100px;
  padding:6px 30px 6px 13px;
  font-size:0.78rem; font-weight:600; color:var(--gray-600);
  cursor:pointer; transition:border-color 0.18s, box-shadow 0.18s;
  min-width:108px;
}
.grade-select:focus {
  outline:none;
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(41,171,226,0.15);
}
#communityFeed { display:flex; flex-direction:column; gap:14px; }

/* ======================================================
   COMMUNITY — LEGACY feed-filters (kept for compat)
   ====================================================== */
.community-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:18px; flex-wrap:wrap;
}
.feed-filters {
  display:flex; gap:6px; flex-wrap:wrap;
  background:var(--gray-100); border-radius:100px;
  padding:4px; width:fit-content;
}

/* ======================================================
   POSTS / FEED
   ====================================================== */

/* Post type accent colours */
.post-card[data-type="notes"]      { --pt-color: #7c3aed; }
.post-card[data-type="question"]   { --pt-color: #0891b2; }
.post-card[data-type="resource"]   { --pt-color: #059669; }
.post-card[data-type="discussion"] { --pt-color: #d97706; }
.post-card[data-type="general"]    { --pt-color: var(--cyan); }

/* ======================================================
   COMMUNITY — POST CARDS
   ====================================================== */
.post-feed { display:flex; flex-direction:column; gap:14px; }
.post-card {
  background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200);
  border-left:4px solid var(--pt-color, var(--cyan));
  overflow:hidden;
  transition:box-shadow 0.2s, transform 0.2s, border-color 0.2s;
  animation:fadeInUp 0.32s var(--ease-out) both;
}
.post-card:hover {
  box-shadow:var(--shadow-md); transform:translateY(-2px);
  border-color:var(--pt-color, var(--cyan));
}
.post-header { display:flex; align-items:center; gap:12px; padding:14px 16px 10px; }
.post-author-info { flex:1; min-width:0; }
.post-author-name {
  font-size:0.875rem; font-weight:700; color:var(--navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.post-meta {
  font-size:0.7rem; color:var(--gray-400); margin-top:2px;
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.post-body { padding:0 16px 12px; cursor:pointer; }
.post-body h3 {
  font-size:0.95rem; font-weight:700; color:var(--gray-900);
  margin-bottom:5px; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break: break-word; overflow-wrap: break-word;
}
.post-body p {
  font-size:0.845rem; color:var(--gray-600); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  word-break: break-word; overflow-wrap: break-word;
}
.post-actions {
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:8px 12px; border-top:1px solid var(--gray-100);
  background:var(--gray-50);
}
.vote-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:var(--radius-sm);
  border:none; background:none;
  color:var(--gray-500); font-size:0.8rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.vote-btn:hover { background:var(--gray-200); color:var(--navy); }
.vote-btn.active { color:var(--cyan); background:rgba(41,171,226,0.08); }
.vote-btn.active.down { color:var(--danger); background:rgba(239,68,68,0.08); }
.comment-btn, .save-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 10px; border-radius:var(--radius-sm);
  border:none; background:none;
  color:var(--gray-500); font-size:0.8rem; font-weight:600;
  cursor:pointer; transition:var(--transition);
}
.comment-btn:hover { background:var(--gray-200); color:var(--navy); }
.save-btn.saved { color:var(--warning); }
.save-btn:hover { background:var(--gray-200); color:var(--warning); }

/* ======================================================
   LEARN — SUBJECTS GRID
   ====================================================== */
.learn-header { margin-bottom:24px; }
.learn-header h1 { font-size:1.5rem; font-weight:800; color:var(--navy); }
.learn-header p  { color:var(--gray-500); font-size:0.9rem; margin-top:3px; }

.subjects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.subject-card {
  background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200);
  overflow:hidden; cursor:pointer;
  transition:var(--trans-slow);
  animation:scaleIn 0.3s var(--ease-out) both;
  display:flex; flex-direction:column;
}
.subject-card:nth-child(1){animation-delay:0.04s}
.subject-card:nth-child(2){animation-delay:0.08s}
.subject-card:nth-child(3){animation-delay:0.12s}
.subject-card:nth-child(4){animation-delay:0.16s}
.subject-card:nth-child(5){animation-delay:0.20s}
.subject-card:nth-child(6){animation-delay:0.24s}
.subject-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }

/* Coloured top strip */
.subject-card-banner {
  height:6px; width:100%;
  background:var(--subj-color, var(--cyan));
}
.subject-card-body { padding:20px 18px 16px; flex:1; }
.subject-icon {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:12px;
  background:var(--subj-color-light, var(--cyan-light));
}
.subject-card h3 { font-size:0.95rem; font-weight:800; color:var(--navy); margin-bottom:4px; }
.subject-card p  { font-size:0.75rem; color:var(--gray-500); line-height:1.4; margin-bottom:12px; }
.subject-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
  border-top:1px solid var(--gray-100);
  background:var(--gray-50);
}
.subject-quiz-count {
  font-size:0.72rem; font-weight:600; color:var(--gray-500);
  display:flex; align-items:center; gap:4px;
}

/* ======================================================
   LEARN — QUIZ LIST
   ====================================================== */
.quiz-list-header {
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
}
.quiz-list-back {
  width:36px; height:36px; border-radius:50%;
  background:var(--gray-100); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); font-size:1rem; transition:var(--transition);
}
.quiz-list-back:hover { background:var(--gray-200); }
.quiz-list-title { font-size:1.2rem; font-weight:800; color:var(--navy); }

.quiz-list { display:flex; flex-direction:column; gap:10px; }
.quiz-card {
  background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200); border-left:4px solid var(--diff-color, var(--cyan));
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; transition:box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.quiz-card:hover { box-shadow:var(--shadow-md); transform:translateX(4px); border-color:var(--diff-color, var(--cyan)); }
.quiz-card[data-diff="easy"]   { --diff-color: var(--success); }
.quiz-card[data-diff="medium"] { --diff-color: var(--warning); }
.quiz-card[data-diff="hard"]   { --diff-color: var(--danger); }
.quiz-info { flex:1; }
.quiz-info h3 { font-size:0.95rem; font-weight:700; color:var(--navy); margin-bottom:6px; }
.quiz-meta {
  display:flex; align-items:center; gap:8px;
  font-size:0.75rem; color:var(--gray-400); flex-wrap:wrap;
}
.quiz-meta-pill {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--gray-100); border-radius:100px;
  padding:2px 8px; font-weight:600;
}
.quiz-xp-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--warning-light); color:#B45309;
  border-radius:100px; padding:2px 8px; font-weight:700;
  font-size:0.72rem;
}

/* ======================================================
   QUIZ INTERFACE
   ====================================================== */
.quiz-container { max-width:700px; margin:0 auto; }

.quiz-topbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.quiz-topbar-title {
  font-size:0.85rem; font-weight:700; color:var(--navy);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%;
}
.quiz-topbar-counter {
  font-size:0.82rem; font-weight:600; color:var(--gray-500);
  background:var(--gray-100); border-radius:100px; padding:3px 10px;
}
.quiz-progress-bar  { height:5px; background:var(--gray-200); border-radius:100px; overflow:hidden; margin-bottom:24px; }
.quiz-progress-fill { height:100%; background:var(--grad-brand); border-radius:100px; transition:width 0.5s var(--ease); }

.question-card {
  background:var(--surface); border:1px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:28px 30px;
  box-shadow:var(--shadow-xs);
}
.question-text {
  font-size:1.1rem; font-weight:700; color:var(--navy);
  margin-bottom:22px; line-height:1.5;
}
.options-grid { display:flex; flex-direction:column; gap:10px; }
.option-btn {
  width:100%; text-align:left;
  padding:14px 18px; border:2px solid var(--gray-200);
  border-radius:var(--radius-md); background:var(--surface);
  font-size:0.88rem; font-weight:500; color:var(--gray-700);
  cursor:pointer; transition:all 0.18s;
  display:flex; align-items:center; gap:12px; position:relative;
}
.option-btn:hover:not(:disabled) {
  border-color:var(--cyan); background:rgba(41,171,226,0.04);
  color:var(--navy); transform:translateX(3px);
}
.option-btn.selected { border-color:var(--cyan); background:rgba(41,171,226,0.07); color:var(--navy); }
.option-btn.correct  { border-color:var(--success); background:var(--success-light); color:#065F46; }
.option-btn.wrong    { border-color:var(--danger);  background:var(--danger-light);  color:#991B1B; }
.opt-letter {
  width:30px; height:30px; border-radius:8px;
  background:var(--gray-100); border:1.5px solid var(--gray-200);
  display:flex; align-items:center; justify-content:center;
  font-size:0.75rem; font-weight:800; flex-shrink:0; color:var(--gray-600);
  transition:all 0.18s;
}
.option-btn.selected .opt-letter { background:var(--cyan); color:white; border-color:var(--cyan); }
.option-btn.correct  .opt-letter { background:var(--success); color:white; border-color:var(--success); }
.option-btn.wrong    .opt-letter { background:var(--danger);  color:white; border-color:var(--danger); }

.quiz-nav { margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.quiz-nav .btn { align-self:flex-end; }
.answer-feedback {
  padding:12px 16px; border-radius:var(--radius); font-size:0.875rem; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.feedback-correct { background:var(--success-light); color:#065F46; border:1px solid var(--success); }
.feedback-wrong   { background:var(--danger-light);  color:#991B1B; border:1px solid var(--danger); }
.feedback-explanation { font-weight:400; opacity:0.85; display:block; margin-top:4px; }

/* ======================================================
   QUIZ RESULT
   ====================================================== */
.quiz-result {
  text-align:center; padding:48px 32px;
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--gray-200);
  animation:scaleIn 0.35s var(--ease-out);
}
.result-circle {
  width:130px; height:130px; border-radius:50%;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; box-shadow:var(--shadow-cyan);
  position:relative;
}
.result-circle::before {
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:var(--grad-brand); opacity:0.15; animation:notifPulse 2s infinite;
}
.result-score  { font-size:2.4rem; font-weight:900; color:white; letter-spacing:-1px; position:relative; }
.result-label  { font-size:1.25rem; font-weight:800; color:var(--navy); margin-bottom:6px; }
.result-sub    { font-size:0.85rem; color:var(--gray-500); margin-bottom:24px; }
.result-stats  {
  display:flex; gap:0; justify-content:center;
  border:1px solid var(--gray-200); border-radius:var(--radius-md);
  overflow:hidden; margin:0 auto 20px; max-width:360px;
}
.result-stats div {
  flex:1; text-align:center; padding:14px 10px;
  border-right:1px solid var(--gray-200);
}
.result-stats div:last-child { border-right:none; }
.result-stats span { display:block; font-size:1.2rem; font-weight:800; color:var(--navy); }
.result-stats small{ font-size:0.68rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; display:block; }
.result-actions { display:flex; gap:10px; justify-content:center; margin-top:20px; }
.xp-earned {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--warning-light); border:1px solid rgba(245,158,11,0.25);
  padding:10px 22px; border-radius:100px;
  font-size:1rem; font-weight:800; color:#B45309; margin:0 0 20px;
}

/* ======================================================
   NETWORK
   ====================================================== */
.people-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* ── Legacy person-card (kept for fallback) ── */
.person-card {
  background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200);
  padding:22px; text-align:center;
  transition:var(--trans-slow);
  animation:scaleIn 0.3s var(--ease-out) both;
  overflow:hidden;
}
.person-card:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.person-card .avatar { margin:0 auto 14px; }
.person-name  { font-size:0.9rem; font-weight:700; color:var(--navy); }
.person-bio   { font-size:0.78rem; color:var(--gray-500); margin:6px 0 14px; line-height:1.4; }
.person-xp    { font-size:0.78rem; font-weight:700; color:var(--cyan); margin-bottom:14px; }
.person-actions { display:flex; gap:8px; justify-content:center; }

/* ── Redesigned person card with banner ── */
.person-card.pc-redesign { padding:0; cursor:pointer; }
.pc-banner {
  height:80px; position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:30px;
}
.pc-badge {
  position:absolute; top:10px; left:10px;
  font-size:0.65rem; font-weight:700; letter-spacing:0.02em;
  padding:3px 9px; border-radius:100px;
  display:flex; align-items:center; gap:4px; text-transform:uppercase;
}
.pc-badge i { font-size:0.55rem; }
.pc-badge--connected { background:rgba(16,185,129,0.25); color:#d1fae5; border:1px solid rgba(16,185,129,0.4); }
.pc-badge--pending   { background:rgba(245,158,11,0.25); color:#fef3c7; border:1px solid rgba(245,158,11,0.4); }
.pc-badge--request   { background:rgba(99,102,241,0.3); color:#e0e7ff; border:1px solid rgba(99,102,241,0.5); }
.pc-avatar-wrap {
  position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
}
.pc-avatar {
  width:56px; height:56px; border-radius:50%;
  border:3px solid var(--surface);
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1rem; color:white;
  overflow:hidden; box-shadow:var(--shadow-md);
}
.pc-avatar img { width:100%; height:100%; object-fit:cover; }
.pc-body { padding:36px 16px 16px; text-align:center; }
.pc-name { font-size:0.95rem; font-weight:700; color:var(--navy); margin-bottom:4px; }
.pc-meta { font-size:0.73rem; color:var(--gray-500); margin-bottom:8px; }
.pc-bio  { font-size:0.76rem; color:var(--gray-500); line-height:1.4; margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-actions { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }

/* ── Network filter bar ── */
.net-filter-bar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:20px;
}
.net-search-wrap {
  position:relative; flex:1; min-width:200px; max-width:320px;
}
.net-search-icon {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--gray-400); font-size:0.8rem; pointer-events:none;
}
.net-search-input {
  width:100%; padding:9px 14px 9px 34px;
  border:1.5px solid var(--gray-200); border-radius:100px;
  font-size:0.85rem; outline:none; transition:var(--transition); background:var(--surface);
  color:var(--navy);
}
.net-search-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(41,171,226,0.12); }
.search-bar-wrap { margin-bottom:20px; }
.search-bar-wrap input {
  width:100%; max-width:400px; background:var(--surface);
  border:1.5px solid var(--gray-200); border-radius:100px;
  padding:10px 18px; font-size:0.875rem; outline:none; transition:var(--transition);
}
.search-bar-wrap input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(41,171,226,0.12); }

/* ======================================================
   MESSAGES
   ====================================================== */
.messages-layout {
  display:grid; grid-template-columns:300px 1fr; grid-template-rows:1fr; gap:0;
  background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200); overflow:hidden;
  height:calc(100vh - var(--header-h));
  min-height:500px;
}
.conversations-panel { border-right:1px solid var(--gray-100); display:flex; flex-direction:column; background:var(--surface); height:100%; }
.conv-header { padding:16px 16px 12px; display:flex; align-items:center; justify-content:space-between; }
.conv-header h2 { font-size:1.05rem; font-weight:800; color:var(--navy); }
.btn-new-chat {
  width:34px; height:34px; border-radius:50%;
  background:var(--cyan); color:white; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; transition:var(--transition);
  box-shadow:0 2px 8px rgba(41,171,226,0.3);
}
.btn-new-chat:hover { background:var(--cyan-dark,#1a9fcc); transform:scale(1.07); }
.conv-search-wrap {
  display:flex; align-items:center; gap:8px;
  margin:0 12px 10px; padding:8px 12px;
  background:var(--gray-50); border:1.5px solid var(--gray-200);
  border-radius:12px; transition:var(--transition);
}
.conv-search-wrap:focus-within { border-color:var(--cyan); background:var(--surface); box-shadow:0 0 0 3px rgba(41,171,226,0.1); }
.conv-search-icon { color:var(--gray-400); font-size:0.8rem; flex-shrink:0; }
.conv-search-input { flex:1; border:none; background:none; outline:none; font-size:0.85rem; color:var(--gray-700); font-family:inherit; }
.conv-search-input::placeholder { color:var(--gray-400); }
.conv-list { flex:1; overflow-y:auto; }
.conv-item {
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; cursor:pointer;
  transition:background 0.15s;
  border-left:3px solid transparent;
}
.conv-item:hover { background:var(--gray-50); }
.conv-item.active { background:rgba(41,171,226,0.07); border-left-color:var(--cyan); }
.conv-info { flex:1; overflow:hidden; }
.conv-name { display:block; font-size:0.875rem; font-weight:600; color:var(--gray-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-last { display:block; font-size:0.75rem; color:var(--gray-400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.conv-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.conv-time  { font-size:0.65rem; color:var(--gray-400); }
.conv-unread { background:var(--cyan); color:white; font-size:0.6rem; font-weight:700; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.chat-panel { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; height:100%; }
.chat-header { padding:14px 20px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; gap:12px; }
.chat-back-btn { display:none; }
.chat-user-info { flex:1; }
.chat-user-name { font-size:0.9rem; font-weight:700; color:var(--navy); }
.chat-user-status { font-size:0.72rem; color:var(--gray-400); }
.chat-messages { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:4px; min-height:0; scroll-behavior:smooth; }
/* Push messages to bottom when there are few; scrolls normally when there are many */
.chat-messages::before { content:''; flex:1; }
.chat-msg { display:flex; flex-direction:column; max-width:65%; }
.chat-msg.sent  { align-self:flex-end; align-items:flex-end; }
.chat-msg.received { align-self:flex-start; }
.chat-msg.received + .chat-msg.sent, .chat-msg.sent + .chat-msg.received { margin-top:8px; }
.msg-bubble {
  padding:10px 14px; border-radius:16px;
  font-size:0.875rem; line-height:1.5; word-break:break-word;
}
.chat-msg.received .msg-bubble { background:var(--gray-100); color:var(--gray-800); border-bottom-left-radius:4px; }
.chat-msg.sent .msg-bubble { background:var(--grad-brand); color:white; border-bottom-right-radius:4px; box-shadow:0 2px 8px rgba(41,171,226,0.25); }
.msg-time { font-size:0.6rem; color:var(--gray-400); margin-top:2px; }
.chat-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; color:var(--gray-300); text-align:center; padding:40px; gap:12px; }
.chat-empty span { font-size:3rem; }
.chat-input-area { border-top:1px solid var(--gray-100); display:flex; flex-direction:column; background:var(--surface); flex-shrink:0; }
.chat-input-wrap { flex:1; position:relative; }
.chat-input {
  width:100%; background:var(--gray-50); border:1.5px solid var(--gray-200);
  border-radius:22px; padding:10px 16px;
  font-size:0.875rem; color:var(--gray-800);
  resize:none; outline:none; max-height:120px; min-height:42px;
  line-height:1.4; transition:var(--transition); font-family:inherit;
}
.chat-input:focus { border-color:var(--cyan); background:var(--surface); }
.chat-send-btn {
  width:42px; height:42px; border-radius:50%;
  background:var(--grad-brand); color:white; border:none;
  font-size:0.9rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); flex-shrink:0;
  box-shadow:var(--shadow-cyan);
}
.chat-send-btn:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(41,171,226,0.4); }
.msg-file-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:10px;
  background:var(--gray-100); color:var(--navy);
  font-size:0.82rem; font-weight:500; text-decoration:none;
  transition:background 0.15s;
}
.msg-file-link:hover { background:var(--gray-200); }
.chat-msg.sent .msg-file-link { background:rgba(255,255,255,0.2); color:#fff; }
.chat-msg.sent .msg-file-link:hover { background:rgba(255,255,255,0.3); }
.msg-file-img { margin-top:2px; }

/* ======================================================
   PROFILE
   ====================================================== */
.profile-cover {
  height:180px; border-radius:var(--radius-md) var(--radius-md) 0 0;
  background:var(--grad-dark); position:relative; overflow:hidden;
}
.profile-cover::after {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2329ABE2' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.profile-cover-edit {
  position:absolute; bottom:12px; right:12px; z-index:1;
  background:rgba(0,0,0,0.5); backdrop-filter:blur(4px);
  color:white; padding:6px 14px; border-radius:8px;
  font-size:0.78rem; cursor:pointer; border:none;
  display:flex; align-items:center; gap:6px;
  transition:var(--transition);
}
.profile-cover-edit:hover { background:rgba(0,0,0,0.7); }
.profile-card { background:var(--surface); border-radius:var(--radius-md); border:1px solid var(--gray-200); overflow:hidden; }
.profile-info { padding:0 24px 24px; position:relative; }
.profile-avatar-wrap { margin-top:-44px; margin-bottom:14px; display:flex; justify-content:space-between; align-items:flex-end; }
.profile-avatar {
  width:82px; height:82px; border-radius:50%;
  border:4px solid var(--surface); background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:1.6rem; font-weight:700;
  box-shadow:var(--shadow-md); overflow:hidden;
}
.profile-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-name     { font-size:1.25rem; font-weight:800; color:var(--navy); }
.profile-headline { color:var(--gray-500); font-size:0.875rem; margin-top:4px; }
.profile-location { color:var(--gray-400); font-size:0.8rem; margin-top:6px; }
.profile-stats-row { display:flex; gap:24px; margin-top:18px; padding-top:16px; border-top:1px solid var(--gray-100); }
.profile-stat strong { font-size:1.1rem; font-weight:800; color:var(--navy); display:block; }
.profile-stat span   { font-size:0.7rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.5px; }

.profile-layout { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.profile-xp-bar { margin:10px 0; }

/* ======================================================
   ACHIEVEMENTS
   ====================================================== */
.achievements-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.achievement-card {
  background:var(--surface); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:20px; text-align:center;
  transition:var(--trans-slow);
  animation:fadeInUp 0.35s var(--ease-out) both;
}
.achievement-card:hover:not(.locked) { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.achievement-card.locked { opacity:0.55; filter:grayscale(0.4); }
.achievement-icon { font-size:1.4rem; margin-bottom:12px; display:flex; align-items:center; justify-content:center; }
.achievement-card h3 { font-size:0.9rem; font-weight:700; color:var(--navy); margin-bottom:4px; }
.achievement-card p  { font-size:0.75rem; color:var(--gray-400); margin-bottom:10px; line-height:1.4; }

/* ======================================================
   SETTINGS
   ====================================================== */
.settings-sections { max-width:640px; display:flex; flex-direction:column; gap:20px; }
.settings-card {
  background:var(--surface); border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:24px;
}
.settings-card h3 { font-size:0.95rem; font-weight:700; color:var(--navy); margin-bottom:18px; }
.settings-card.danger-zone h3 { color:var(--danger); }
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:0.875rem; color:var(--gray-700); cursor:pointer; }
.toggle-row:last-child { border-bottom:none; }

/* ======================================================
   TABS
   ====================================================== */
.tabs { display:flex; border-bottom:1px solid var(--gray-200); margin-bottom:20px; }
.tab-btn {
  padding:10px 18px; background:none; border:none;
  font-size:0.875rem; font-weight:600; color:var(--gray-500);
  cursor:pointer; position:relative; transition:color 0.18s, transform 0.15s;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-btn::after {
  content:''; position:absolute; bottom:0; left:50%; height:2px;
  background:var(--cyan); border-radius:2px;
  width:0; transform:translateX(-50%);
  transition:width 0.22s var(--ease);
}
.tab-btn:hover { color:var(--navy); }
.tab-btn:hover::after { width:50%; }
.tab-btn.active { color:var(--cyan); }
.tab-btn.active::after { width:70%; }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fadeIn 0.2s; }

/* ======================================================
   MODALS
   ====================================================== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(10,20,55,0.55);
  backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center;
  z-index:2000; padding:20px;
}
.modal {
  background:var(--surface); border-radius:var(--radius-xl);
  padding:0; max-width:560px; width:100%;
  box-shadow:var(--shadow-lg);
  overflow:hidden; max-height:90vh; overflow-y:auto;
}
.modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--gray-100);
}
.modal-title { font-size:1rem; font-weight:700; color:var(--navy); }
.modal-close {
  background:none; border:none; color:var(--gray-400);
  font-size:1.1rem; cursor:pointer; padding:5px; border-radius:var(--radius-sm);
  transition:var(--transition);
}
.modal-close:hover { background:var(--gray-100); color:var(--gray-700); }
.modal-body   { padding:24px; }
.modal-footer {
  display:flex; justify-content:flex-end; gap:10px;
  padding:16px 24px; border-top:1px solid var(--gray-100);
  background:var(--gray-50);
}

/* ======================================================
   AUTH PAGES
   ====================================================== */
.auth-wrapper {
  min-height:100vh;
  background:var(--grad-dark);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  position:relative; overflow:hidden;
}
/* Animated background mesh */
.auth-wrapper::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 20%, rgba(41,171,226,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(21,101,192,0.15) 0%, transparent 70%);
  pointer-events:none;
}
.auth-wrapper::after {
  content:'';
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%2329ABE2' fill-opacity='0.04'%3E%3Cpath d='M50 50c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10zM10 10c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10S10 15.5 10 10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.auth-theme-toggle {
  position:fixed; top:16px; right:16px; z-index:10;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.7);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s; font-size:0.9rem;
  backdrop-filter:blur(8px);
}
.auth-theme-toggle:hover { background:rgba(255,255,255,0.15); color:#fff; }
.auth-card {
  background:var(--surface);
  border-radius:var(--radius-xl);
  padding:40px 38px;
  width:100%; max-width:450px;
  box-shadow:0 24px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.06);
  position:relative; z-index:1;
  animation:scaleIn 0.35s var(--ease-out);
}
.auth-logo-img {
  height:52px;
  width:auto;
  display:block;
  margin:0 auto 28px;
}
/* Fallback if using the old icon-based logo */
.auth-logo {
  display:flex; align-items:center; gap:10px;
  justify-content:center; margin-bottom:28px;
  color:var(--navy); font-weight:800; font-size:1.4rem;
}
.logo-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--grad-brand);
  display:flex; align-items:center; justify-content:center; color:white; font-size:1.1rem;
}
.auth-title { font-size:1.5rem; font-weight:800; color:var(--navy); text-align:center; margin-bottom:6px; }
.auth-sub   { color:var(--gray-500); text-align:center; font-size:0.875rem; margin-bottom:28px; }
.auth-tabs  { display:flex; background:var(--gray-100); border-radius:var(--radius); padding:4px; margin-bottom:24px; }
.auth-tab   {
  flex:1; padding:8px; border-radius:8px; border:none;
  background:none; font-size:0.875rem; font-weight:600;
  color:var(--gray-500); cursor:pointer; transition:var(--transition);
}
.auth-tab.active { background:var(--surface); color:var(--navy); box-shadow:var(--shadow-sm); }
.auth-link  { color:var(--cyan); font-weight:600; }
.auth-link:hover { color:var(--blue); text-decoration:underline; }

/* Social login buttons */
.social-divider {
  display:flex; align-items:center; gap:12px;
  margin:20px 0 14px; color:var(--gray-400); font-size:0.8rem;
}
.social-divider::before,.social-divider::after {
  content:''; flex:1; height:1px; background:var(--gray-200);
}
.btn-social {
  width:100%; padding:11px 16px; border-radius:10px;
  border:1.5px solid var(--gray-200); background:var(--surface);
  color:var(--gray-700); font-size:0.875rem; font-weight:500;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:10px; transition:all 0.2s; font-family:inherit; margin-bottom:8px;
}
.btn-social:hover { background:var(--gray-50); border-color:var(--gray-300); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.btn-social svg { width:18px; height:18px; flex-shrink:0; }
.btn-telegram-social { background:#0088cc; color:#fff; border-color:#0088cc; }
.btn-telegram-social:hover { background:#0077b5; border-color:#0077b5; color:#fff; }

/* Password toggle */
.password-toggle { position:relative; }
.password-toggle input { padding-right:42px; }
.toggle-eye {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--gray-400); cursor:pointer; font-size:0.9rem;
  transition:color 0.15s;
}
.toggle-eye:hover { color:var(--navy); }

/* Subject/achievement cards used in profile right column */
.subject-card-sm {
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  background:var(--surface); border-radius:var(--radius); border:1px solid var(--gray-200);
  cursor:pointer; transition:var(--transition); margin-bottom:8px;
}
.subject-card-sm:hover { border-color:var(--cyan); box-shadow:var(--shadow-sm); }
.subject-card-sm .s-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.subject-card-sm h4 { font-size:0.88rem; font-weight:700; color:var(--navy); }
.subject-card-sm p  { font-size:0.72rem; color:var(--gray-400); }

/* ======================================================
   NOTIFICATIONS
   ====================================================== */
.notif-dropdown {
  position:absolute; top:calc(100% + 10px); right:0;
  width:360px; background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200); box-shadow:var(--shadow-lg);
  z-index:1000; overflow:hidden;
  animation:scaleIn 0.18s var(--ease-out);
  transform-origin:top right;
}
.notif-header { padding:14px 16px; border-bottom:1px solid var(--gray-100); display:flex; justify-content:space-between; align-items:center; }
.notif-header h4 { font-size:0.9rem; font-weight:700; color:var(--navy); }
.notif-list { max-height:380px; overflow-y:auto; }
.notif-item { display:flex; gap:12px; padding:12px 16px; transition:background 0.15s; cursor:pointer; border-bottom:1px solid var(--gray-50); }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:var(--gray-50); }
.notif-item.unread { background:rgba(41,171,226,0.04); }
.notif-icon { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; background:var(--gray-100); }
.notif-content p    { font-size:0.82rem; color:var(--gray-700); line-height:1.4; }
.notif-content span { font-size:0.7rem; color:var(--gray-400); margin-top:2px; display:block; }
.notif-footer { border-top:1px solid var(--gray-100); }

/* ======================================================
   USER DROPDOWN
   ====================================================== */
.dropdown-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border-radius:var(--radius-md);
  border:1px solid var(--gray-200); box-shadow:var(--shadow-md);
  min-width:180px; z-index:1000; overflow:hidden;
  animation:scaleIn 0.18s var(--ease-out);
  transform-origin:top right;
}
.dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; font-size:0.85rem; color:var(--gray-700);
  cursor:pointer; transition:background 0.12s;
  border:none; background:none; width:100%; text-align:left;
}
.dropdown-item:hover { background:var(--gray-50); color:var(--navy); }
.dropdown-item i { width:16px; text-align:center; color:var(--gray-400); }
.dropdown-divider { height:1px; background:var(--gray-100); margin:4px 0; }

/* ======================================================
   TOASTS
   ====================================================== */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:10px; }
.toast {
  background:var(--gray-900); color:white;
  padding:12px 18px; border-radius:var(--radius-md);
  font-size:0.875rem; font-weight:500;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--shadow-lg); min-width:240px; max-width:340px;
  animation:slideInRight 0.3s var(--ease-out);
  border-left:4px solid var(--cyan);
}
/* JS sets class="toast success|error|info" (space-separated classes) */
.toast.success { background:#064E3B; border-left-color:var(--success); }
.toast.error   { background:#7F1D1D; border-left-color:var(--danger); }
.toast.info    { background:#1E3A8A; border-left-color:var(--blue); }
.toast.show    { opacity:1; }

/* ======================================================
   EMPTY STATES
   ====================================================== */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; text-align:center; }
.empty-icon  { font-size:2.5rem; color:var(--gray-200); margin-bottom:16px; display:block; }
.empty-title { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
.empty-text  { font-size:0.875rem; color:var(--gray-400); max-width:280px; line-height:1.6; }

/* ======================================================
   TOP PROGRESS BAR (page navigation)
   ====================================================== */
#nprogress {
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:9999; pointer-events:none;
}
#nprogress.active {
  background:linear-gradient(90deg, var(--cyan), #a855f7);
  animation:nprogress 1.8s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ======================================================
   INITIAL APP LOADER
   ====================================================== */
#appLoader {
  position:fixed; inset:0; z-index:99999;
  background:var(--navy, #0D1B4B);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  transition:opacity 0.4s ease;
}
#appLoader.hiding { animation:appLoaderFade 0.4s ease forwards; }
#appLoader.hidden { display:none; }
.app-loader-logo {
  font-size:2rem; font-weight:900; color:#fff; letter-spacing:-0.5px;
  min-height:2.5rem; border-right:3px solid var(--cyan);
}
.app-loader-logo.typed-done { border-right:none; }
.app-loader-logo span { color:var(--cyan); }
.app-loader-bar {
  width:160px; height:3px; background:rgba(255,255,255,0.15);
  border-radius:100px; overflow:hidden;
}
.app-loader-bar-fill {
  height:100%; width:0%; border-radius:100px;
  background:linear-gradient(90deg, var(--cyan), #a855f7);
  animation:progressFill 1.2s ease forwards;
}

/* ======================================================
   OFFLINE BANNER
   ====================================================== */
#offlineBanner {
  position:fixed; top:0; left:0; right:0; z-index:9998;
  background:#1a1a2e; color:#fff;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; font-size:0.85rem; font-weight:500;
  animation:offlineBanner 0.3s ease;
  display:none;
}
#offlineBanner i { color:#f87171; }
#offlineBanner.show { display:flex; }

/* ======================================================
   ERROR CARD STATE
   ====================================================== */
.error-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px; gap:12px;
}
.error-card-icon {
  font-size:2.5rem; margin-bottom:4px; opacity:0.7;
}
.error-card-title {
  font-size:1rem; font-weight:700; color:var(--navy); margin:0;
}
.error-card-msg {
  font-size:0.85rem; color:var(--gray-400); max-width:280px; line-height:1.5; margin:0;
}
.error-card-retry {
  margin-top:8px;
}

/* ======================================================
   LOADING / SKELETON
   ====================================================== */
.skeleton {
  background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 50%,var(--gray-100) 75%);
  background-size:200% 100%;
  animation:skeletonPulse 1.4s infinite;
  border-radius:var(--radius-sm);
}
.spinner {
  width:38px; height:38px;
  border:3px solid var(--gray-200); border-top-color:var(--cyan);
  border-radius:50%;
  animation:spin 0.75s linear infinite;
  margin:40px auto;
}

/* ======================================================
   ACTIVITY
   ====================================================== */
.activity-list { display:flex; flex-direction:column; }
.activity-item { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--gray-100); }
.activity-item:last-child { border-bottom:none; }
.activity-icon { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; background:var(--gray-100); }
.activity-text { font-size:0.83rem; color:var(--gray-700); flex:1; line-height:1.4; }
.activity-time { font-size:0.7rem; color:var(--gray-400); margin-top:2px; display:block; }
.activity-xp   { font-size:0.78rem; font-weight:700; color:var(--cyan); white-space:nowrap; }

/* Comment items */
.comment-item  { display:flex; gap:10px; padding:14px 0; border-bottom:1px solid var(--gray-100); }
.comment-item:last-child { border-bottom:none; }
.comment-body  { flex:1; }
.comment-author{ font-size:0.82rem; font-weight:700; color:var(--navy); }
.comment-text  { font-size:0.82rem; color:var(--gray-700); line-height:1.5; margin-top:4px; }

/* Quiz timer */
.quiz-timer { display:flex; align-items:center; gap:6px; font-size:0.875rem; font-weight:700; color:var(--navy); }
.timer-circle { width:36px; height:36px; position:relative; }
.timer-circle svg { transform:rotate(-90deg); }
.timer-circle .timer-bg { fill:none; stroke:var(--gray-200); stroke-width:3; }
.timer-circle .timer-fg { fill:none; stroke:var(--cyan); stroke-width:3; stroke-dasharray:100; stroke-dashoffset:0; transition:stroke-dashoffset 1s linear; }
.timer-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:0.62rem; font-weight:700; color:var(--navy); }

/* Col layout */
.col-layout { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media(max-width:1024px){ .col-layout{grid-template-columns:1fr;} }

/* Page content: prevent horizontal overflow on all pages */
.page-content { overflow-x: hidden; min-width: 0; }
.col-layout > * { min-width: 0; overflow-x: hidden; }

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media(max-width:1200px) {
  .stats-grid      { grid-template-columns:repeat(2,1fr); }
  .quick-actions   { grid-template-columns:repeat(4,1fr); }
  .subjects-grid   { grid-template-columns:repeat(2,1fr); }
  .people-grid     { grid-template-columns:repeat(2,1fr); }
  .achievements-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:768px) {
  .sidebar { transform:translateX(-100%); z-index:1000; box-shadow:none; }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,0.3); }
  .main-content    { margin-left:0; width:100%; max-width:100vw; }
  .header-menu-btn { display:flex; }
  .page-content    { padding:16px; }
  .stats-grid      { grid-template-columns:1fr 1fr; }
  .quick-actions   { grid-template-columns:repeat(2,1fr); }
  .subjects-grid   { grid-template-columns:1fr; }
  .people-grid     { grid-template-columns:1fr; }
  .messages-layout {
    display:block;
    height:calc(100vh - var(--header-h));
    position:relative;
    overflow:hidden;
  }
  .conversations-panel { height:100%; max-height:none; }
  .chat-panel {
    display:none;
    position:absolute;
    inset:0;
    height:100%;
    background:var(--surface);
    z-index:2;
  }
  .messages-layout.chat-open .chat-panel { display:flex; }
  .messages-layout.chat-open .conversations-panel { display:none; }
  .chat-back-btn { display:flex !important; }
  .auth-card       { padding:28px 22px; }
  .notif-dropdown  { width:calc(100vw - 32px); right:-40px; }
  .toast-container { right:12px; left:12px; bottom:16px; }
  .toast           { min-width:0; max-width:none; }
  .profile-layout  { grid-template-columns:1fr; }
  .achievements-grid { grid-template-columns:repeat(2,1fr); }

  /* Community: filter row → horizontal scroll (prevents grade-select orphaning) */
  .filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 12px;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .grade-select { flex-shrink: 0; margin-left: 6px; }
}
/* ── Community sidebar: side-by-side on tablets ────── */
@media (min-width: 641px) and (max-width: 1024px) {
  #page-community .col-layout > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
}
/* ── Messaging: medium screens 769–1024px ──────────── */
@media(min-width:769px) and (max-width:1024px) {
  .messages-layout { grid-template-columns:260px 1fr; }
}
/* ── Messaging: large screens >1400px ──────────────── */
@media(min-width:1400px) {
  .messages-layout { grid-template-columns:340px 1fr; }
}

@media(max-width:480px) {
  .stats-grid    { grid-template-columns:1fr; }
  .quick-actions { grid-template-columns:repeat(2,1fr); }
  .achievements-grid { grid-template-columns:1fr 1fr; }
  .post-actions  { gap:2px; }
  /* Community: create-post card compact */
  .create-post-card { gap:8px; padding:10px 12px; }
  .create-post-input { font-size:0.78rem; }
  /* Community: action buttons compact */
  .vote-btn, .comment-btn, .save-btn { padding:5px 7px; font-size:0.75rem; }
  /* Messaging: tighter bubbles on small screens */
  .chat-msg { max-width:82%; }
  .chat-messages { padding:10px 12px; }
  .chat-header { padding:10px 14px; }
  .msg-input-row { padding:8px 12px; }
  /* Saved posts page */
  #page-saved .page-header { padding-bottom:12px; }
  /* Settings: narrower inputs */
  .settings-sections { max-width:100%; }
  /* Quiz page */
  .quiz-container { padding:0; }
}

/* ======================================================
   UTILITIES
   ====================================================== */
.flex { display:flex; } .flex-col { flex-direction:column; }
.items-center { align-items:center; } .items-start { align-items:flex-start; }
.justify-between { justify-content:space-between; } .justify-center { justify-content:center; }
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.ml-auto { margin-left:auto; }
.text-sm{font-size:0.8rem} .text-xs{font-size:0.7rem}
.font-bold{font-weight:700} .font-medium{font-weight:500}
.text-primary{color:var(--navy)} .text-muted{color:var(--gray-500)} .text-danger{color:var(--danger)}
.text-center{text-align:center}
.w-full{width:100%}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.overflow-hidden{overflow:hidden}
.rounded{border-radius:var(--radius)} .rounded-lg{border-radius:var(--radius-lg)}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ======================================================
   SUBJECT CARDS — fav star
   ====================================================== */
.subject-card { position:relative; }
.subject-card-inner { cursor:pointer; }
.fav-star-btn {
  position:absolute; top:10px; right:10px;
  background:none; border:none; cursor:pointer;
  font-size:1.2rem; line-height:1; color:var(--gray-300);
  transition:color 0.15s, transform 0.15s;
  z-index:1; padding:4px;
}
.fav-star-btn:hover  { color:var(--warning); transform:scale(1.2); }
.fav-star-btn.active { color:var(--warning); }

/* ======================================================
   PROFILE SUBJECTS SIDEBAR
   ====================================================== */
.profile-subj-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 4px; border-radius:var(--radius-sm);
  transition:background 0.15s; cursor:default;
}
.profile-subj-row:hover { background:var(--gray-50); }
.ps-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.ps-name { flex:1; font-size:0.875rem; font-weight:600; color:var(--gray-700); cursor:pointer; }
.ps-name:hover { color:var(--cyan); }
.ps-fav {
  background:none; border:none; cursor:pointer;
  font-size:1rem; color:var(--gray-300);
  transition:color 0.15s, transform 0.15s; padding:2px 6px;
}
.ps-fav:hover  { color:var(--warning); transform:scale(1.15); }
.ps-fav.active { color:var(--warning); }

/* ======================================================
   COVER PICKER
   ====================================================== */
.cover-theme-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
}
.cover-theme-btn {
  height:52px; border-radius:var(--radius); cursor:pointer;
  border:3px solid transparent; transition:transform 0.15s, border-color 0.15s;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
}
.cover-theme-btn:hover { transform:scale(1.06); }
.cover-theme-btn.selected { border-color:white; box-shadow:0 0 0 2px var(--cyan); }
.cover-theme-label {
  font-size:0.55rem; font-weight:700; color:rgba(255,255,255,0.85);
  text-shadow:0 1px 3px rgba(0,0,0,0.4); text-transform:uppercase; letter-spacing:0.5px;
}

/* ======================================================
   ABOUT TAB — Skills & Experiences
   ====================================================== */
.about-section {
  padding:14px 0; border-bottom:1px solid var(--gray-100);
}
.about-section-hd {
  font-size:0.8rem; font-weight:700; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:0.6px; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
.chips-wrap {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:2px;
}
.skill-chip {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(41,171,226,0.1); color:var(--cyan);
  border:1px solid rgba(41,171,226,0.25);
  border-radius:100px; padding:4px 12px;
  font-size:0.78rem; font-weight:600;
}
.skill-chip-sm { padding:2px 9px; font-size:0.72rem; }
.chip-remove {
  background:none; border:none; color:var(--cyan); cursor:pointer;
  font-size:0.9rem; padding:0; line-height:1; margin-left:2px; opacity:0.7;
}
.chip-remove:hover { opacity:1; }
.skill-add-row { display:flex; gap:8px; align-items:center; }
.exp-item {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:8px;
}
.exp-hd { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:4px; }
.exp-title { font-size:0.9rem; color:var(--navy); }
.exp-org { font-size:0.78rem; color:var(--cyan); font-weight:600; margin-left:8px; }
.exp-desc { font-size:0.82rem; color:var(--gray-600); margin:0; line-height:1.5; }
.exp-remove-btn {
  background:none; border:none; color:var(--gray-400);
  cursor:pointer; padding:2px 6px; border-radius:4px; transition:var(--transition); flex-shrink:0;
}
.exp-remove-btn:hover { background:var(--danger-light); color:var(--danger); }
.add-exp-form {
  margin-top:12px; background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius); padding:14px; display:flex; flex-direction:column; gap:8px;
}

/* ======================================================
   PROFILE QUIZZES TAB — History, Stats & Fav Subjects
   ====================================================== */
.fav-subject-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb, var(--chip-color, var(--cyan)) 12%, transparent);
  color:var(--chip-color, var(--cyan));
  border:1px solid color-mix(in srgb, var(--chip-color, var(--cyan)) 30%, transparent);
  border-radius:100px; padding:5px 14px;
  font-size:0.8rem; font-weight:600;
}
.fav-subj-icon { font-size:1rem; line-height:1; }

.quiz-stat-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:2px;
}
.quiz-stat-card {
  background:var(--gray-50); border:1px solid var(--gray-200);
  border-radius:var(--radius); padding:12px 10px; text-align:center;
}
.quiz-stat-val { font-size:1.4rem; font-weight:800; color:var(--navy); line-height:1.1; }
.quiz-stat-lbl { font-size:0.72rem; color:var(--gray-400); font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin-top:3px; }

.quiz-history-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--gray-100);
}
.quiz-history-item:last-child { border-bottom:none; }
.qhi-left { display:flex; align-items:center; gap:10px; min-width:0; }
.qhi-icon { font-size:1.4rem; flex-shrink:0; }
.qhi-info { min-width:0; }
.qhi-title { font-size:0.88rem; font-weight:700; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qhi-meta  { font-size:0.75rem; color:var(--gray-400); margin-top:2px; }
.qhi-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.qhi-score { font-size:0.95rem; font-weight:800; }
.qhi-badge { font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:100px; white-space:nowrap; }

/* Fav star button on subject cards */
.fav-star-btn {
  background:none; border:none; cursor:pointer; padding:6px; border-radius:50%;
  color:var(--gray-300); font-size:1rem; line-height:1; flex-shrink:0;
  transition:var(--transition); margin-left:auto;
}
.fav-star-btn:hover { color:var(--warning); background:rgba(245,158,11,0.1); }
.fav-star-btn.active { color:var(--warning); }

/* Sidebar fav subjects */
.fav-subj-sidebar-list { display:flex; flex-direction:column; gap:6px; }
.fav-subj-sidebar-item {
  display:flex; align-items:center; gap:10px;
  padding:6px 4px; border-radius:var(--radius);
}
.fav-subj-sidebar-icon {
  width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.fav-subj-sidebar-name { font-size:0.87rem; font-weight:600; color:var(--navy); }

/* ======================================================
   USER PROFILE MODAL (when viewing others)
   ====================================================== */
.up-cover { height:90px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--grad-dark); flex-shrink:0; }
.up-body  { padding:0 20px 14px; text-align:center; margin-top:-34px; }
.up-avatar { display:inline-flex; padding:3px; background:var(--surface); border-radius:50%; box-shadow:var(--shadow-sm); margin-bottom:8px; }
.up-name   { font-size:1.15rem; font-weight:800; color:var(--navy); margin-bottom:3px; }
.up-meta   { font-size:0.8rem; color:var(--gray-400); margin-bottom:6px; }
.up-bio    { font-size:0.85rem; color:var(--gray-600); max-width:300px; margin:6px auto 8px; line-height:1.5; }
.up-skills { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:8px; }
.up-stats  { display:flex; border-top:1px solid var(--gray-100); border-bottom:1px solid var(--gray-100); padding:10px 20px; gap:0; }
.up-stat   { flex:1; text-align:center; }
.up-stat strong { display:block; font-size:1rem; font-weight:800; color:var(--navy); }
.up-stat span   { font-size:0.68rem; color:var(--gray-400); text-transform:uppercase; letter-spacing:0.4px; }
.up-actions { display:flex; gap:10px; justify-content:center; padding:14px 20px; }

/* ======================================================
   PROFILE CONNECTIONS PREVIEW
   ====================================================== */
.conn-prev-item {
  display:flex; align-items:center; gap:10px; padding:7px 4px;
  cursor:pointer; border-radius:var(--radius-sm); transition:background 0.15s;
}
.conn-prev-item:hover { background:var(--gray-50); }
.conn-prev-name  { font-size:0.85rem; font-weight:600; color:var(--gray-800); }
.conn-prev-grade { font-size:0.72rem; color:var(--gray-400); margin-top:1px; }

/* ======================================================
   ACHIEVEMENT BADGES
   ====================================================== */
.badge-chips { display:flex; flex-wrap:wrap; gap:6px; }
.badge-chip  {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--warning-light); color:#92400e;
  border:1px solid rgba(245,158,11,0.2);
  border-radius:100px; padding:4px 12px;
  font-size:0.75rem; font-weight:600;
}

/* ======================================================
   IMPROVED CARDS (global polish)
   ====================================================== */
.card {
  box-shadow:var(--shadow-xs);
  transition:box-shadow 0.2s;
}
.card-header {
  padding:16px 20px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.card-title {
  font-size:0.9rem; font-weight:700; color:var(--navy);
}
.card-body { padding:16px 20px; }
.mb-4 { margin-bottom:16px; }

/* Stat card icon improved */
.stat-icon {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; flex-shrink:0;
}

/* ======================================================
   PAGE HEADER polish
   ====================================================== */
.page-header h1 { font-size:1.5rem; font-weight:800; }
.page-header p  { color:var(--gray-500); font-size:0.9rem; margin-top:3px; }

/* ======================================================
   QUIZ HISTORY ITEMS
   ====================================================== */
.qh-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--gray-100);
  transition:background 0.15s;
}
.qh-item:last-child { border-bottom:none; }
.qh-icon { width:40px; height:40px; border-radius:10px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.qh-info { flex:1; }
.qh-title { font-weight:600; font-size:0.9rem; color:var(--navy); }
.qh-sub   { font-size:0.75rem; color:var(--gray-400); margin-top:2px; }
.qh-score { font-size:0.72rem; margin-top:4px; }
.qh-bar   { height:4px; border-radius:2px; background:var(--gray-100); margin-top:5px; width:100px; }
.qh-bar-fill { height:100%; border-radius:2px; background:var(--grad-brand); }
.qh-xp    { font-weight:700; color:var(--cyan); font-size:0.85rem; text-align:right; }
.qh-time  { font-size:0.7rem; color:var(--gray-400); margin-top:2px; }

/* ======================================================
   ONBOARDING TOUR
   ====================================================== */
.tour-card {
  background:var(--surface); border-radius:20px;
  width:100%; max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,0.22);
  overflow:hidden;
  animation:scaleIn 0.35s var(--ease-out) both;
}
.tour-close-row {
  display:flex; justify-content:flex-end; padding:12px 16px 0;
}
.tour-skip-btn {
  font-size:0.78rem; color:var(--gray-400); background:none; border:none;
  cursor:pointer; padding:4px 8px; border-radius:6px; transition:var(--transition);
}
.tour-skip-btn:hover { color:var(--navy); background:var(--gray-100); }
.tour-graphic { display:flex; justify-content:center; padding:8px 0 20px; }
.tour-icon-wrap {
  width:110px; height:110px; border-radius:30px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
}
.tour-icon { font-size:3rem; }
.tour-content { padding:0 28px 24px; text-align:center; }
.tour-step-label { font-size:0.72rem; font-weight:700; color:var(--cyan); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.tour-title { font-size:1.25rem; font-weight:800; color:var(--navy); margin-bottom:10px; }
.tour-desc  { font-size:0.875rem; color:var(--gray-500); line-height:1.6; }
.tour-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px 24px;
  border-top:1px solid var(--gray-100);
}
.tour-dots { display:flex; gap:6px; align-items:center; }
.tour-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gray-200); transition:var(--transition);
}
.tour-dot.active { background:var(--cyan); transform:scale(1.25); }
.tour-next-btn { min-width:130px; }

/* ── Theme Toggle Button ──────────────────────────────────── */
.theme-toggle {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-size:0.95rem; color:var(--gray-500);
  transition:background 0.15s, color 0.15s;
}
.theme-toggle:hover { background:var(--gray-100); color:var(--navy); }

/* Prevent white html background flash on dark-mode loader fade */
html.app-dark-pre {
  background: #0b1829;
  color-scheme: dark;
}
/* Dark mode: loader background matches the dark app background for a seamless fade */
html.app-dark-pre #appLoader { background: #0b1829; }

/* ── Dark Mode: CSS Variable Overrides ────────────────────── */
body.app-dark {
  /* Base surface & background */
  --bg:       #0b1829;
  --surface:  #0d2040;

  /* Gray scale (all var(--gray-*) uses auto-adapt) */
  --gray-50:  rgba(255,255,255,0.02);
  --gray-100: rgba(255,255,255,0.05);
  --gray-200: rgba(255,255,255,0.09);
  --gray-300: rgba(255,255,255,0.14);
  --gray-400: rgba(200,215,255,0.4);
  --gray-500: rgba(200,215,255,0.5);
  --gray-600: rgba(200,215,255,0.65);
  --gray-700: rgba(200,215,255,0.75);
  --gray-800: #dce6ff;
  --gray-900: #f0f4ff;

  /* Status light variants in dark mode */
  --success-light: rgba(16,185,129,0.15);
  --warning-light: rgba(245,158,11,0.15);
  --danger-light:  rgba(239,68,68,0.15);
  --info-light:    rgba(59,130,246,0.15);

  /* Base text & background */
  background: var(--bg);
  color: var(--gray-700);
}

/* Dark: headings and stat values that hardcode var(--navy) */
body.app-dark h1,
body.app-dark h2,
body.app-dark h3,
body.app-dark h4,
body.app-dark .stat-value,
body.app-dark .profile-name,
body.app-dark .section-title,
body.app-dark .post-title,
body.app-dark .quiz-title,
body.app-dark .subject-name,
body.app-dark .modal-title,
body.app-dark .leaderboard-name,
body.app-dark .conv-name,
body.app-dark .tour-title { color: var(--gray-900); }

/* Dark: top header */
body.app-dark .top-header {
  background: rgba(13,32,64,0.92);
  border-bottom-color: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
}

/* Dark: dropdown menus & notification panel */
body.app-dark .notif-dropdown,
body.app-dark .dropdown-menu { background: #0e2448; border-color: rgba(255,255,255,0.09); }

/* Dark: modals */
body.app-dark .modal-overlay { background: rgba(0,0,0,0.7); }
body.app-dark .modal { background: #0d2040; }
body.app-dark .modal-header { border-bottom-color: rgba(255,255,255,0.08); }
body.app-dark .modal-footer { border-top-color: rgba(255,255,255,0.08); border-top: 1px solid rgba(255,255,255,0.08); background: transparent; }

/* Dark: chat input area */
body.app-dark .chat-input-area { background: #0d2040; border-top-color: rgba(255,255,255,0.07); }

/* Dark: sidebar (already dark-navy, minor tweak) */
body.app-dark .sidebar { background: linear-gradient(160deg, #08112a 0%, #0d1e3e 100%); }

/* Dark: form controls */
body.app-dark .form-control,
body.app-dark .chat-input,
body.app-dark .conv-search { color: var(--gray-800); }

/* Dark: error card text */
body.app-dark .error-card-title,
body.app-dark .error-card-msg { color: var(--gray-700); }

/* Dark: theme-toggle icon brightens */
body.app-dark .theme-toggle { color: var(--gray-500); }
body.app-dark .theme-toggle:hover { background: rgba(255,255,255,0.06); color: var(--gray-800); }

/* Dark: community filter row & grade select */
body.app-dark .filter-row { border-color: rgba(255,255,255,0.07); }
body.app-dark .filter-btn:hover { background:rgba(255,255,255,0.06); color:var(--gray-800); }
body.app-dark .filter-btn.active { background:var(--cyan); color:#fff; box-shadow:0 2px 8px rgba(41,171,226,0.25); }
body.app-dark .grade-select {
  background-color:rgba(255,255,255,0.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M5.5 7L0 0h11z' fill='%23dce6ff'/%3E%3C/svg%3E");
  border-color:rgba(255,255,255,0.09);
  color:var(--gray-700);
}
body.app-dark .grade-select option { background:#0d2040; color:var(--gray-800); }

/* Dark: create-post card */
body.app-dark .create-post-card { border-color:rgba(255,255,255,0.07); }
body.app-dark .create-post-input { color:rgba(200,215,255,0.3); }

/* Dark: post card text visibility */
body.app-dark .post-author-name { color:var(--gray-800); }
body.app-dark .post-body h3 { color:var(--gray-900); }
body.app-dark .post-body p   { color:var(--gray-600); }
body.app-dark .post-actions  { background:rgba(255,255,255,0.02); border-top-color:rgba(255,255,255,0.06); }

/* Dark: subject badge visibility */
body.app-dark .subject-badge { opacity:0.88; }

/* Dark: auth wrapper */
body.app-dark .auth-wrapper { background:var(--bg); }
body.app-dark .auth-card {
  background:#0d2040;
  border-color:rgba(255,255,255,0.08);
}
body.app-dark .auth-title { color:var(--gray-900); }
body.app-dark .auth-sub   { color:var(--gray-600); }
body.app-dark .btn-google-social { background:#1e2d40; border-color:rgba(255,255,255,0.12); color:var(--gray-800); }
body.app-dark .btn-google-social:hover { background:#253650; border-color:rgba(255,255,255,0.2); }
body.app-dark .social-divider { color:var(--gray-600); }
body.app-dark .social-divider::before,
body.app-dark .social-divider::after { background:rgba(255,255,255,0.1); }
body.app-dark .auth-tab   { color:var(--gray-500); }
body.app-dark .auth-tab.active { color:var(--cyan); border-color:var(--cyan); }
body.app-dark .form-label { color:var(--gray-700); }
body.app-dark .auth-theme-toggle { color:var(--gray-500); background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.08); }
body.app-dark .auth-theme-toggle:hover { color:var(--gray-800); background:rgba(255,255,255,0.08); }

/* Dark: misc text fixes */
body.app-dark .page-title  { color:var(--gray-900); }
body.app-dark .page-sub    { color:var(--gray-600); }
body.app-dark .card-title  { color:var(--gray-800); }
body.app-dark .stat-label  { color:var(--gray-500); }
body.app-dark .nav-item-label { color:rgba(200,215,255,0.7); }
body.app-dark .nav-item.active .nav-item-label { color:#fff; }
body.app-dark .leaderboard-rank { color:var(--gray-700); }
body.app-dark .leaderboard-xp  { color:var(--gray-600); }

/* Dark: profile page stat values */
body.app-dark .profile-stat strong { color:var(--gray-900); }
body.app-dark .profile-stat span   { color:var(--gray-500); }
body.app-dark .profile-headline    { color:var(--gray-600); }
body.app-dark .profile-location    { color:var(--gray-500); }
body.app-dark .profile-stats-row   { border-top-color:rgba(255,255,255,0.07); }

/* Dark: user profile modal (up-*) */
body.app-dark .up-name        { color:var(--gray-900); }
body.app-dark .up-meta        { color:var(--gray-500); }
body.app-dark .up-bio         { color:var(--gray-600); }
body.app-dark .up-stat strong { color:var(--gray-900); }
body.app-dark .up-stat span   { color:var(--gray-500); }
body.app-dark .up-stats       { border-top-color:rgba(255,255,255,0.07); border-bottom-color:rgba(255,255,255,0.07); }
body.app-dark .up-avatar      { background:rgba(255,255,255,0.06); }

/* Dark: quiz option correct/wrong text (hardcoded colors invisible on dark) */
body.app-dark .option-btn.correct { color:var(--success); }
body.app-dark .option-btn.wrong   { color:var(--danger); }

/* Dark: network person card avatar ring */
body.app-dark .pc-avatar { border-color:var(--surface); }

/* ── Dark: override --navy so inline color:var(--navy) is readable ── */
body.app-dark {
  --navy: #dce6ff;          /* was dark blue; now near-white on dark bg  */
  --cyan-light: rgba(41,171,226,0.12);
}

/* ── Dark: teacher / learn hub inline-bg panels ──────────── */
/* #fafbfc and #f8fafc used as row backgrounds in JS cards */
body.app-dark [style*="background:#fafbfc"],
body.app-dark [style*="background: #fafbfc"] { background: rgba(255,255,255,0.05) !important; }
body.app-dark [style*="background:#f8fafc"],
body.app-dark [style*="background: #f8fafc"] { background: rgba(255,255,255,0.05) !important; }
body.app-dark [style*="background:#fff"],
body.app-dark [style*="background: #fff"]    { background: var(--surface) !important; }
body.app-dark [style*="background:white"],
body.app-dark [style*="background: white"]   { background: var(--surface) !important; }
body.app-dark [style*="background:#fafafa"]  { background: rgba(255,255,255,0.04) !important; }

/* ── Dark: form controls in teacher modals ─────────────────── */
body.app-dark .form-control {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: var(--gray-800);
}
body.app-dark .form-control::placeholder { color: rgba(200,215,255,0.3); }
body.app-dark select.form-control option  { background: #0d2040; color: var(--gray-800); }

/* ── Dark: modal body text that uses hardcoded colors ─────── */
body.app-dark .modal-body p,
body.app-dark .modal-body span,
body.app-dark .modal-body label,
body.app-dark .modal-body div { color: inherit; }

/* ── Dark: teacher training module cards ────────────────────── */
body.app-dark #page-training .card,
body.app-dark #page-teacher .card,
body.app-dark #page-learn  .card  { background: var(--surface); }

/* ── Dark: pill labels in teacher/learn pages ──────────────── */
body.app-dark [style*="background:var(--cyan-light)"] { background: rgba(41,171,226,0.15) !important; }
body.app-dark [style*="background:rgba(255,255,255,.2)"] { background: rgba(255,255,255,0.12) !important; }
body.app-dark [style*="background:#f0fdf4"]  { background: rgba(16,185,129,0.15) !important; }
body.app-dark [style*="background:#f0f9ff"]  { background: rgba(41,171,226,0.12) !important; }
body.app-dark [style*="background:#fef3c7"]  { background: rgba(245,158,11,0.15) !important; }
body.app-dark [style*="background:#fef2f2"]  { background: rgba(239,68,68,0.12)  !important; }
body.app-dark [style*="background:var(--grad-brand)"] { /* gradient banners keep their gradient */ }

/* ── Dark: gradient progress bar, session card top banner ──── */
body.app-dark [style*="background:var(--grad-brand)"] { opacity: 0.92; }

/* ── Dark: attendance warning box (yellow) keep readable ─────── */
body.app-dark [style*="background:#fef3c7"] { background: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.4) !important; }
body.app-dark [style*="color:#92400e"]      { color: #fbbf24 !important; }
body.app-dark [style*="color:#d97706"]      { color: #fbbf24 !important; }

/* ── Dark: pre-reg session summary box ─────────────────────── */
body.app-dark [style*="background:var(--gray-100)"] { background: rgba(255,255,255,0.06) !important; }

/* ── Dark: inline color:var(--navy) → make readable ────────── */
body.app-dark [style*="color:var(--navy)"] { color: var(--gray-900) !important; }
body.app-dark [style*="color: var(--navy)"] { color: var(--gray-900) !important; }

/* ── Dark: game modal & solo practice result inline bg colors ─ */
/* Top-result highlight in game leaderboard */
body.app-dark [style*="background:#eef2ff"] { background: rgba(79,70,229,0.2) !important; border-color: rgba(99,102,241,0.35) !important; }
/* Solo practice & quiz result correct/wrong review rows */
body.app-dark [style*="background:#dcfce7"] { background: rgba(16,185,129,0.15) !important; }
body.app-dark [style*="background:#fee2e2"] { background: rgba(239,68,68,0.12) !important; }
/* Live standings medal chip backgrounds */
body.app-dark [style*="background:#f59e0b20"] { background: rgba(245,158,11,0.15) !important; }
body.app-dark [style*="background:#e5e7eb"]   { background: rgba(255,255,255,0.08) !important; }
body.app-dark [style*="background:#b4530920"] { background: rgba(180,83,9,0.15) !important; }
/* Solo practice question card surface */
body.app-dark [style*="background:var(--surface)"] { background: var(--surface) !important; }

/* ── Dark: border-colors used in step pills ─────────────────── */
body.app-dark [style*="border:1.5px solid var(--gray-200)"] { border-color: rgba(255,255,255,0.1) !important; }
body.app-dark [style*="border:1.5px dashed var(--gray-200)"] { border-color: rgba(255,255,255,0.1) !important; }
body.app-dark [style*="border:1px solid var(--gray-100)"]   { border-color: rgba(255,255,255,0.08) !important; }

/* =======================================================
   LEARNORA — Enhanced Animations & Visual Improvements v2
   ======================================================= */

/* ── New Keyframes ─────────────────────────────────────── */
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-10px); }
}
@keyframes floatSlow {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%     { transform:translateY(-8px) rotate(2deg); }
  66%     { transform:translateY(-4px) rotate(-1deg); }
}
@keyframes wiggle {
  0%,100% { transform:rotate(0deg); }
  15%     { transform:rotate(-12deg); }
  30%     { transform:rotate(12deg); }
  45%     { transform:rotate(-8deg); }
  60%     { transform:rotate(8deg); }
  75%     { transform:rotate(-4deg); }
  90%     { transform:rotate(4deg); }
}
@keyframes popIn {
  0%   { transform:scale(0.7) translateY(8px); opacity:0; }
  70%  { transform:scale(1.06) translateY(-2px); opacity:1; }
  100% { transform:scale(1) translateY(0); opacity:1; }
}
@keyframes heartbeat {
  0%,100% { transform:scale(1); }
  14%     { transform:scale(1.18); }
  28%     { transform:scale(1); }
  42%     { transform:scale(1.12); }
  70%     { transform:scale(1); }
}
@keyframes pulseGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(41,171,226,0); }
  50%     { box-shadow:0 0 0 9px rgba(41,171,226,0.22); }
}
@keyframes textShimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}
@keyframes countUp {
  from { transform:translateY(6px); opacity:0; }
  to   { transform:translateY(0);   opacity:1; }
}
@keyframes ripple {
  0%   { transform:scale(0);   opacity:0.5; }
  100% { transform:scale(2.5); opacity:0; }
}
@keyframes badgePop {
  0%   { transform:scale(0.5) rotate(-12deg); opacity:0; }
  65%  { transform:scale(1.1) rotate(3deg); opacity:1; }
  100% { transform:scale(1)   rotate(0deg); opacity:1; }
}
@keyframes slideUpFade {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes glowPulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.6; }
}
@keyframes iconBounce {
  0%,100% { transform:translateY(0) scale(1); }
  40%     { transform:translateY(-5px) scale(1.15); }
  70%     { transform:translateY(-2px) scale(1.05); }
}
@keyframes shimmerSlide {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes rotateSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes gradientShift {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:100% 50%; }
}
@keyframes subtleBob {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-3px); }
}

/* ── Shimmer Text — for page titles ───────────────────── */
.shimmer-text {
  background:var(--grad-shimmer);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:textShimmer 3s linear infinite;
}

/* ── Page-level entrance animation ───────────────────── */
.page-section {
  animation:slideUpFade 0.38s var(--ease-out) both;
}

/* ── Sidebar enhancements ─────────────────────────────── */
.nav-icon i {
  transition:transform 0.25s var(--ease), color 0.2s;
  display:inline-block;
}
.nav-item:hover .nav-icon i {
  transform:translateX(3px) scale(1.15);
}
.nav-item.active .nav-icon i {
  animation:subtleBob 2s ease-in-out infinite;
}
.sidebar-user-block {
  position:relative;
}
.sidebar-user-block::after {
  content:'';
  position:absolute;
  bottom:0; left:16px; right:16px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(41,171,226,0.3),transparent);
}
/* Sidebar avatar subtle glow ring */
#sidebarAvatar {
  transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
#sidebarAvatar:hover {
  box-shadow:0 0 0 3px rgba(41,171,226,0.35);
  transform:scale(1.06);
}

/* ── Nav badge bounce ─────────────────────────────────── */
.nav-badge {
  transition:transform 0.2s var(--ease);
}
.nav-badge:not([style*="none"]) {
  animation:badgePop 0.4s var(--ease-out) both;
}

/* ── Notification dot wiggle ──────────────────────────── */
#notifDot {
  animation:wiggle 3.5s ease-in-out 2s infinite;
}

/* ── Stat cards ─────────────────────────────────────────  */
.stat-card {
  position:relative;
  overflow:hidden;
}
.stat-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(41,171,226,0) 40%,rgba(41,171,226,0.06) 50%,rgba(41,171,226,0) 60%);
  background-size:200% 100%;
  opacity:0;
  transition:opacity 0.3s;
}
.stat-card:hover::before {
  opacity:1;
  animation:shimmerSlide 0.8s linear;
}
.stat-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
}
.stat-icon {
  transition:transform 0.3s var(--ease);
}
.stat-card:hover .stat-icon {
  animation:iconBounce 0.5s var(--ease-out);
}
/* Stat value pop-in on page load */
.stat-value {
  animation:countUp 0.45s var(--ease-out) both;
}

/* ── Quick-action buttons ─────────────────────────────── */
.qa-btn {
  position:relative;
  overflow:hidden;
}
.qa-btn::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at center, rgba(41,171,226,0.18) 0%, transparent 70%);
  opacity:0;
  transform:scale(0.5);
  transition:opacity 0.25s, transform 0.25s;
}
.qa-btn:hover::after {
  opacity:1;
  transform:scale(1);
}
.qa-btn:hover .qa-icon {
  animation:iconBounce 0.45s var(--ease-out);
}
.qa-btn:active {
  transform:scale(0.96);
}

/* ── Subject cards ────────────────────────────────────── */
.subject-card {
  position:relative;
  overflow:hidden;
}
.subject-card::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.12) 50%,transparent 70%);
  background-size:200% 100%;
  opacity:0;
  transition:opacity 0.3s;
  pointer-events:none;
}
.subject-card:hover::after {
  opacity:1;
  animation:shimmerSlide 0.7s linear;
}
.subject-card:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(13,27,75,0.18);
}
.subject-icon {
  transition:transform 0.35s var(--ease), box-shadow 0.35s;
}
.subject-card:hover .subject-icon {
  transform:scale(1.2) rotate(6deg);
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}
.fav-star-btn {
  transition:transform 0.25s var(--ease), color 0.2s;
}
.fav-star-btn:hover {
  transform:scale(1.3) rotate(15deg);
}
.fav-star-btn.active {
  animation:heartbeat 0.6s var(--ease-out);
}

/* ── Quiz cards ───────────────────────────────────────── */
.quiz-card {
  position:relative;
  overflow:hidden;
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.quiz-card::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--grad-brand);
  transition:width 0.3s var(--ease);
}
.quiz-card:hover::before {
  width:6px;
}
.quiz-card:hover {
  transform:translateX(5px);
  box-shadow:var(--shadow-md);
}
.quiz-card .fas {
  transition:transform 0.3s var(--ease);
}
.quiz-card:hover .fas {
  transform:rotate(15deg) scale(1.1);
}

/* ── Post cards ───────────────────────────────────────── */
.post-card {
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.post-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
/* Vote buttons pop */
.vote-btn {
  position:relative;
  overflow:hidden;
  transition:transform 0.2s var(--ease), color 0.2s, background 0.2s;
}
.vote-btn:hover {
  transform:scale(1.12);
}
.vote-btn.active {
  animation:popIn 0.3s var(--ease-out);
}
.vote-btn .fas {
  transition:transform 0.2s var(--ease);
}
.vote-btn:hover .fas {
  transform:scale(1.2);
}
/* Save button heart pulse */
.save-btn {
  transition:transform 0.25s var(--ease), color 0.2s;
}
.save-btn:hover { transform:scale(1.15); }
.save-btn.saved {
  animation:heartbeat 0.55s var(--ease-out);
  color:var(--danger) !important;
}

/* ── Person / Network cards ───────────────────────────── */
.person-card.pc-redesign {
  position:relative;
  overflow:hidden;
  transition:transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.person-card.pc-redesign:hover {
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(13,27,75,0.16);
}
.person-card.pc-redesign::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);
  background-size:200% 100%;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s;
}
.person-card.pc-redesign:hover::before {
  opacity:1;
  animation:shimmerSlide 0.75s linear;
}
/* Avatar ring glow on hover */
.pc-avatar {
  transition:box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.person-card.pc-redesign:hover .pc-avatar {
  box-shadow:0 0 0 3px var(--cyan), 0 4px 12px rgba(41,171,226,0.35);
  transform:scale(1.08);
}

/* ── Connect / action buttons ─────────────────────────── */
.btn-connect, .btn-primary, .btn-brand {
  position:relative;
  overflow:hidden;
  transition:transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.btn-connect::after,
.btn-primary::after,
.btn-brand::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.35);
  transform:translate(-50%,-50%) scale(0);
  transition:transform 0.5s, opacity 0.5s;
  opacity:0;
}
.btn-connect:active::after,
.btn-primary:active::after,
.btn-brand:active::after {
  transform:translate(-50%,-50%) scale(8);
  opacity:0;
  transition:0s;
}
.btn-connect:hover,
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-cyan);
}
.btn-connect:active,
.btn-primary:active {
  transform:translateY(0) scale(0.97);
}

/* ── General button icon ──────────────────────────────── */
.btn .fas, .btn .far, .btn .fab {
  transition:transform 0.2s var(--ease);
}
.btn:hover .fas,
.btn:hover .far {
  transform:scale(1.15);
}

/* ── Leaderboard rows ─────────────────────────────────── */
.leaderboard-item {
  transition:transform 0.22s var(--ease), box-shadow 0.22s, background 0.2s;
  animation:slideUpFade 0.38s var(--ease-out) both;
}
.leaderboard-item:nth-child(1) { animation-delay:0.03s; }
.leaderboard-item:nth-child(2) { animation-delay:0.07s; }
.leaderboard-item:nth-child(3) { animation-delay:0.11s; }
.leaderboard-item:nth-child(4) { animation-delay:0.15s; }
.leaderboard-item:nth-child(5) { animation-delay:0.19s; }
.leaderboard-item:nth-child(n+6) { animation-delay:0.22s; }
.leaderboard-item:hover {
  transform:translateX(5px);
  box-shadow:var(--shadow-sm);
  background:var(--gray-50);
}
/* Medal icons pulse */
.leaderboard-rank {
  transition:transform 0.2s;
}
.leaderboard-item:hover .leaderboard-rank {
  animation:iconBounce 0.4s var(--ease-out);
}

/* ── Achievement cards ────────────────────────────────── */
.achievement-card {
  transition:transform 0.28s var(--ease), box-shadow 0.28s;
  animation:popIn 0.4s var(--ease-out) both;
}
.achievement-card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:var(--shadow-md);
}
.achievement-card .ach-icon {
  transition:transform 0.3s var(--ease);
}
.achievement-card:hover .ach-icon {
  animation:wiggle 0.6s ease-in-out;
}
.achievement-card.earned {
  position:relative;
}
.achievement-card.earned::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(16,185,129,0.06) 0%,transparent 60%);
  pointer-events:none;
}

/* ── Empty states ─────────────────────────────────────── */
.empty-icon {
  display:inline-block;
  animation:floatSlow 4s ease-in-out infinite;
}
.empty-state {
  animation:slideUpFade 0.4s var(--ease-out) both;
}

/* ── Input focus glow ─────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  outline:none;
  box-shadow:0 0 0 3px rgba(41,171,226,0.18), var(--shadow-xs);
  border-color:var(--cyan) !important;
  transition:box-shadow 0.2s, border-color 0.2s;
}

/* ── Auth card entrance ───────────────────────────────── */
.auth-card {
  animation:popIn 0.45s var(--ease-out) both;
}
.auth-tab {
  transition:color 0.2s, border-color 0.2s, transform 0.15s;
}
.auth-tab:hover {
  transform:translateY(-1px);
}
.auth-form label {
  transition:color 0.2s;
}
.auth-form input:focus ~ label,
.auth-form input:not(:placeholder-shown) ~ label {
  color:var(--cyan);
}

/* ── Sidebar section labels ─────────────────────────── */
.sidebar-label {
  position:relative;
  display:block;
}

/* ── Gradient page section headers ─────────────────── */
.page-title {
  position:relative;
  display:inline-block;
}
.page-title::after {
  content:'';
  position:absolute;
  left:0; bottom:-3px;
  width:40px; height:3px;
  background:var(--grad-brand);
  border-radius:2px;
  transition:width 0.4s var(--ease);
}
.page-title:hover::after {
  width:100%;
}

/* ── Feed post stagger ────────────────────────────── */
.post-card {
  animation:slideUpFade 0.36s var(--ease-out) both;
}
.post-card:nth-child(1)  { animation-delay:0.02s; }
.post-card:nth-child(2)  { animation-delay:0.06s; }
.post-card:nth-child(3)  { animation-delay:0.10s; }
.post-card:nth-child(4)  { animation-delay:0.14s; }
.post-card:nth-child(5)  { animation-delay:0.18s; }
.post-card:nth-child(n+6){ animation-delay:0.22s; }

/* ── Subject card stagger ─────────────────────────── */
.subject-card {
  animation:popIn 0.4s var(--ease-out) both;
}
.subject-card:nth-child(1)  { animation-delay:0.03s; }
.subject-card:nth-child(2)  { animation-delay:0.07s; }
.subject-card:nth-child(3)  { animation-delay:0.11s; }
.subject-card:nth-child(4)  { animation-delay:0.15s; }
.subject-card:nth-child(5)  { animation-delay:0.19s; }
.subject-card:nth-child(6)  { animation-delay:0.23s; }
.subject-card:nth-child(n+7){ animation-delay:0.27s; }

/* ── Person card stagger ──────────────────────────── */
.person-card.pc-redesign {
  animation:slideUpFade 0.38s var(--ease-out) both;
}
.person-card.pc-redesign:nth-child(1) { animation-delay:0.03s; }
.person-card.pc-redesign:nth-child(2) { animation-delay:0.07s; }
.person-card.pc-redesign:nth-child(3) { animation-delay:0.11s; }
.person-card.pc-redesign:nth-child(4) { animation-delay:0.15s; }
.person-card.pc-redesign:nth-child(5) { animation-delay:0.19s; }
.person-card.pc-redesign:nth-child(6) { animation-delay:0.23s; }
.person-card.pc-redesign:nth-child(n+7){ animation-delay:0.27s; }

/* ── Achievement stagger ──────────────────────────── */
.achievement-card:nth-child(1)  { animation-delay:0.04s; }
.achievement-card:nth-child(2)  { animation-delay:0.09s; }
.achievement-card:nth-child(3)  { animation-delay:0.14s; }
.achievement-card:nth-child(4)  { animation-delay:0.19s; }
.achievement-card:nth-child(5)  { animation-delay:0.24s; }
.achievement-card:nth-child(n+6){ animation-delay:0.29s; }

/* ── Toast improved entrance ─────────────────────── */
.toast {
  animation:slideInRight 0.3s var(--ease-out), popIn 0.3s var(--ease-out);
  transition:opacity 0.3s, transform 0.3s;
}

/* ── Conversation list stagger ───────────────────── */
.conv-item {
  animation:slideUpFade 0.3s var(--ease-out) both;
  transition:background 0.2s, transform 0.2s;
}
.conv-item:hover {
  transform:translateX(4px);
}

/* ── Message bubble entrance ─────────────────────── */
.msg-bubble {
  animation:slideUpFade 0.25s var(--ease-out) both;
}

/* ── Grade pills hover ───────────────────────────── */
.grade-pill {
  transition:transform 0.18s var(--ease), box-shadow 0.18s, background 0.2s, color 0.2s;
}
.grade-pill:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.grade-pill.active {
  animation:popIn 0.3s var(--ease-out);
}

/* ── Filter button polish ────────────────────────── */
.filter-btn {
  transition:transform 0.18s var(--ease), box-shadow 0.18s, background 0.2s, color 0.2s;
}
.filter-btn:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.filter-btn.active {
  animation:popIn 0.28s var(--ease-out);
}

/* ── XP bar animated fill ────────────────────────── */
.xp-bar-fill, .level-bar-fill, .prog-fill {
  transition:width 0.8s var(--ease-out);
}

/* ── Profile cover hover — darken via overlay (no filter to avoid cursor flicker) ── */
.profile-cover::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:rgba(0,0,0,0); transition:background 0.25s;
  pointer-events:none;
}
.profile-cover:hover::before { background:rgba(0,0,0,0.15); }

/* ── Settings section cards ──────────────────────── */
.settings-section {
  transition:box-shadow 0.25s var(--ease), transform 0.25s;
}
.settings-section:hover {
  box-shadow:var(--shadow-md);
}

/* ── Trending tag hover ──────────────────────────── */
#trendingTags > div {
  transition:transform 0.2s var(--ease), background 0.2s;
  border-radius:var(--radius-sm);
  padding:6px 8px;
  margin-bottom:4px !important;
}
#trendingTags > div:hover {
  background:var(--cyan-light);
  transform:translateX(4px);
}

/* ── Loading skeleton pulse ──────────────────────── */
.skeleton {
  animation:skeletonPulse 1.6s ease-in-out infinite;
}
/* Same shimmer effect in dark mode (light-on-dark version) */
body.app-dark .skeleton {
  background: linear-gradient(90deg, #1a2e50 25%, #243d68 50%, #1a2e50 75%);
  background-size: 200% 100%;
}

/* ── Modal entrance/exit (class-triggered so replays on each open) ── */
.modal-overlay.anim-open {
  animation:fadeIn 0.2s var(--ease-out) both;
}
.modal-overlay.anim-open > * {
  animation:popIn 0.3s var(--ease-out) both;
}
.modal-overlay.anim-close {
  animation:fadeIn 0.18s var(--ease-out) reverse both;
}

/* ── Header avatar hover ─────────────────────────── */
#headerAvatar, #headerMenu .user-avatar {
  transition:transform 0.25s var(--ease), box-shadow 0.25s;
}
#headerAvatar:hover, #headerMenu .user-avatar:hover {
  transform:scale(1.1);
  box-shadow:0 0 0 3px rgba(41,171,226,0.3);
}

/* ── Notification bell wiggle on new notif ───────── */
#notifBtn {
  transition:transform 0.2s var(--ease);
}
#notifBtn:hover {
  transform:scale(1.1);
}
#notifBtn:hover i {
  animation:wiggle 0.5s ease-in-out;
}

/* ── Score circle in quiz result ─────────────────── */
.result-circle {
  animation:popIn 0.5s var(--ease-out) both;
}

/* ── Subject badge hover ─────────────────────────── */
.subject-badge {
  transition:transform 0.15s var(--ease), box-shadow 0.15s;
}
.subject-badge:hover {
  transform:scale(1.06);
  box-shadow:var(--shadow-xs);
}

/* ── Connection card action buttons ─────────────── */
.conn-card .btn, .req-card .btn {
  transition:transform 0.2s var(--ease), box-shadow 0.2s;
}
.conn-card .btn:hover, .req-card .btn:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

/* ── Sidebar user XP text subtle animation ───────── */
#sidebarXP {
  transition:opacity 0.3s;
  font-size:0.78rem;
}

/* ── Post type icon pulse ───────────────────────── */
.post-type-icon {
  transition:transform 0.2s var(--ease);
}
.post-card:hover .post-type-icon {
  animation:iconBounce 0.4s var(--ease-out);
}

/* ── Profile stats hover ─────────────────────────── */
.profile-stat {
  transition:transform 0.2s var(--ease);
}
.profile-stat:hover {
  transform:translateY(-2px);
}
.profile-stat strong {
  display:block;
  animation:countUp 0.5s var(--ease-out) both;
}

/* ── Tab hover lift ──────────────────────────────── */
.tab-btn:hover { transform:translateY(-1px); }

/* ── Send button hover ───────────────────────────── */
#chatSendBtn, [onclick*="sendMessage"] {
  transition:transform 0.2s var(--ease), box-shadow 0.2s;
}
#chatSendBtn:hover, [onclick*="sendMessage"]:hover {
  transform:scale(1.08) rotate(5deg);
  box-shadow:var(--shadow-cyan);
}

/* ── Trending section pulse ──────────────────────── */
.trending-section .fa-fire {
  animation:glowPulse 2s ease-in-out infinite;
  color:#f97316;
}

/* ── Dark mode additions ─────────────────────────── */
body.app-dark .stat-card:hover { box-shadow:0 16px 40px rgba(0,0,0,0.35); }
body.app-dark .person-card.pc-redesign:hover { box-shadow:0 18px 40px rgba(0,0,0,0.4); }
body.app-dark .subject-card:hover { box-shadow:0 20px 40px rgba(0,0,0,0.4); }
body.app-dark .leaderboard-item:hover { background:rgba(255,255,255,0.04); }
body.app-dark #trendingTags > div:hover { background:rgba(41,171,226,0.12); }
body.app-dark input:focus, body.app-dark textarea:focus, body.app-dark select:focus {
  box-shadow:0 0 0 3px rgba(41,171,226,0.22), var(--shadow-xs);
}

/* ── Dark mode: navy text elements ──────────────── */
body.app-dark .lb-user-name,
body.app-dark .lb-info span,
body.app-dark .pc-name,
body.app-dark .person-name,
body.app-dark .chat-user-name,
body.app-dark .quiz-list-title,
body.app-dark .quiz-topbar-title,
body.app-dark .question-text,
body.app-dark .result-label,
body.app-dark .result-stats span,
body.app-dark .empty-title,
body.app-dark .comment-author,
body.app-dark .quiz-timer,
body.app-dark .timer-text,
body.app-dark .exp-title,
body.app-dark .qh-title,
body.app-dark .text-primary,
body.app-dark .conv-search { color: var(--gray-800); }

body.app-dark .quiz-list-back { background: var(--gray-100); color: var(--gray-800); }
body.app-dark .quiz-list-back:hover { background: var(--gray-200); }

body.app-dark .option-btn {
  background: var(--surface);
  border-color: var(--gray-200);
  color: var(--gray-800);
}
body.app-dark .option-btn:hover,
body.app-dark .option-btn.selected { border-color: var(--cyan); color: var(--gray-900); }

body.app-dark .tab-btn:hover { color: var(--gray-800); }

body.app-dark .header-menu-btn:hover,
body.app-dark .header-btn:hover,
body.app-dark .btn-ghost:hover,
body.app-dark .vote-btn:hover,
body.app-dark .comment-btn:hover,
body.app-dark .toggle-eye:hover,
body.app-dark .dropdown-item:hover { color: var(--gray-900); }

body.app-dark .notif-header h4 { color: var(--gray-800); }

body.app-dark .settings-card h3 { color: var(--gray-800); }
body.app-dark .settings-card.danger-zone h3 { color: var(--danger); }

body.app-dark .subject-card h3,
body.app-dark .subject-card-sm h4 { color: var(--gray-800); }

body.app-dark .learn-header h1,
body.app-dark .quiz-list-title,
body.app-dark .level-header h3,
body.app-dark .section-header h2 { color: var(--gray-900); }

body.app-dark .profile-name,
body.app-dark .profile-stat strong { color: var(--gray-900); }

/* Dark: secondary meta text in cards — ensure readable against dark surface */
body.app-dark .pc-meta,
body.app-dark .pc-bio { color: var(--gray-600); }

/* Dark: grade pill active state — navy bg invisible on dark, use cyan instead */
body.app-dark .grade-pill:hover,
body.app-dark .grade-pill.active {
  background: var(--cyan);
  border-color: var(--cyan);
  color: #fff;
}

/* Dark: conv header, chat header */
body.app-dark .conv-header h2 { color: var(--gray-900); }

/* Dark: quiz-info cards on learn page */
body.app-dark .quiz-info h3 { color: var(--gray-800); }

/* Dark: user-profile modal bg */
body.app-dark #userProfileModal .modal,
body.app-dark #viewPostModal .modal { background: #0d2040; }

/* ── Reduced-motion: respect user preference ─────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ======================================================
   COMPREHENSIVE RESPONSIVE — all screen sizes
   ====================================================== */

/* ── Global helpers ──────────────────────────────────── */
img, video, iframe { max-width: 100%; }
* { box-sizing: border-box; }

/* ── Learn hub container ─────────────────────────────── */
.lh-container {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
.lh-container > * {
  max-width: 100%;
  box-sizing: border-box;
}
#learnSessionsGrid { min-width: 0; width: 100%; overflow-x: hidden; }
#learnSessionsInnerGrid, #learnCoursesGrid { min-width: 0; width: 100%; }
/* Ensure grid items can shrink below content size */
#learnSessionsInnerGrid > *, #learnCoursesGrid > * { min-width: 0; overflow: hidden; }
/* Session discover cards: text and flex handling */
#learnSessionsInnerGrid .card { min-width: 0; word-break: break-word; }
#learnSessionsInnerGrid .card > div { min-width: 0; }

/* ── Learn hub header row ────────────────────────────── */
.lh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* ── Filter pills: horizontal scroll on small screens ── */
#learnFilterPills {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
#learnFilterPills::-webkit-scrollbar { display: none; }

/* ── Learn page tab bar ───────────────────────────────── */
#page-learn .lh-tabs-wrap {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#page-learn .lh-tabs-wrap::-webkit-scrollbar { display: none; }
#page-learn .lh-tabs-wrap button {
  flex: 0 1 auto;
  text-align: center;
  white-space: nowrap;
  min-width: 0;
}

/* ── Session form grid: responsive ──────────────────── */
.session-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ── Course session rows ─────────────────────────────── */
.course-session-row {
  display: block;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
}

/* ── Modal improvements ──────────────────────────────── */
.modal-overlay {
  padding: 16px;
}
.modal {
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
}
.modal-body {
  overflow-y: auto;
  flex: 1;
}
.modal-header, .modal-footer {
  flex-shrink: 0;
}

/* ── 900px: mid-range tablets ───────────────────────── */
@media (max-width: 900px) {
  .session-form-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 768px: tablets ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Session/course discovery grids — single column on tablets/phones */
  #learnSessionsGrid [style*="grid-template-columns"],
  #learnSessionsInnerGrid,
  #learnCoursesGrid {
    grid-template-columns: 1fr !important;
  }

  /* Filter pills: horizontal scroll, no overflow */
  #learnFilterPills {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabs: shrink to fit on narrow screens */
  #page-learn .lh-tabs-wrap button {
    flex: 1 1 0;
    min-width: 0;
    font-size: .78rem !important;
    padding: 6px 8px !important;
  }
  #page-learn .lh-tabs-wrap .lh-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Learn header: keep row layout, button stays right via margin-left:auto */
  .lh-header {
    align-items: flex-start;
    gap: 10px;
  }

  /* Teacher hub header */
  .teacher-hub-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  /* Hero CTA buttons stacking */
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 280px; justify-content: center; }

  /* Landing nav — hide desktop links */
  .nav-links-desktop { display: none; }
}

/* ── 640px: large phones ─────────────────────────────── */
@media (max-width: 640px) {
  /* Session form grid → single column */
  .session-form-grid { grid-template-columns: 1fr !important; }

  /* Course session rows: inner date/duration grid → stacked on small screens */
  .course-session-row [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Modal: full-width on small screens */
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-bottom: 0; }
  .modal-overlay { padding: 0; align-items: flex-end; }

  /* Auth card */
  .auth-card { padding: 24px 18px; }

  /* Page content padding */
  .page-content { padding: 12px; }

  /* Inline form grids in JS-rendered HTML */
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 560px: medium phones — Discover grid to single column ── */
@media (max-width: 560px) {
  #learnSessionsGrid [style*="grid-template-columns"],
  #learnSessionsInnerGrid,
  #learnCoursesGrid {
    grid-template-columns: 1fr !important;
  }

  /* Course card: compact on phone */
  .course-discovery-card { padding: 0; border-radius: 14px; }
  .course-card-body { padding: 12px 14px; gap: 8px; }
  .course-card-footer { padding: 8px 14px; border-radius: 0 0 14px 14px; }

  /* Session card inner rows: wrap on narrow screens */
  #learnSessionsInnerGrid .card [style*="justify-content:space-between"] { flex-wrap: wrap; }
  #learnSessionsInnerGrid .card [style*="display:flex"][style*="gap:8px"] { flex-wrap: wrap; }

  /* Search bar: reduce font */
  #lhSearchInput { font-size: .82rem !important; }

  /* Filter pills: tighter gaps */
  #learnFilterPills { gap: 5px !important; }
  #learnFilterPills button { padding: 4px 10px !important; font-size: .74rem !important; }
}

/* ── 480px: small phones ─────────────────────────────── */
@media (max-width: 480px) {
  /* Header */
  .header { padding: 0 12px; gap: 8px; }
  .header-left { gap: 8px; }

  /* Session/course cards: full width on small phones */
  #learnSessionsGrid [style*="grid-template-columns"],
  #learnCoursesGrid {
    grid-template-columns: 1fr !important;
  }

  /* Tabs: smaller padding/font */
  #page-learn button[id^="lhTab"] { padding: 6px 10px !important; font-size: .78rem !important; }

  /* Learn header: action button full-width */
  .lh-header .btn { width: 100%; margin-left: 0 !important; justify-content: center; }

  /* Learn search bar: full width */
  #lhSearchBar { flex-wrap: wrap; }

  /* XP chip in header: hide label on tiny screens */
  .xp-chip span { display: none; }

  /* Teacher hub: stack create button */
  #page-teacher > div > div:first-child { flex-direction: column; align-items: flex-start !important; }

  /* Modal footer buttons: stack */
  .modal-footer { flex-direction: column; gap: 8px; }
  .modal-footer .btn { width: 100%; }

  /* Grid utilities: force single col on mobile */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* Auth card */
  .auth-card { padding: 22px 16px; max-width: 100%; }
  .auth-wrapper { padding: 16px 12px; }

  /* Notification dropdown: full width */
  .notif-dropdown { width: calc(100vw - 24px); right: -20px; }
}

/* ── 360px: very small phones ───────────────────────── */
@media (max-width: 360px) {
  .header-xp { display: none; }
  .page-content { padding: 10px 8px; }
  .auth-card { padding: 18px 14px; }
  /* Learn tabs: ultra-compact */
  #page-learn button[id^="lhTab"] { padding: 5px 7px !important; font-size: .72rem !important; }
  /* Filter row: tighter */
  .filter-row { padding: 6px 10px; }
}

/* ── Dark mode: course cards ─────────────────────────── */
body.app-dark .course-session-row {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* ── Course discovery card ───────────────────────────── */
/* ── Course discovery card — clean minimal design ───── */
.course-discovery-card {
  background: var(--surface);
  border-radius: 20px;
  border: 1.5px solid var(--gray-100);
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-break: break-word;
}
.course-discovery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(21,101,192,0.10);
  border-color: var(--cyan);
}
/* coloured top accent bar */
.course-card-accent {
  height: 4px;
  background: linear-gradient(90deg, #1565C0, #29ABE2);
  width: 100%;
  flex-shrink: 0;
}
.course-card-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.course-card-body > * { min-width: 0; }
.course-card-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 0 0 20px 20px;
}
.course-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #7c3aed, #1565C0);
  color: white; font-size: .65rem; font-weight: 700; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 20px;
}
.course-subject-pill {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
}

body.app-dark .course-discovery-card {
  border-color: rgba(255,255,255,0.07);
}
body.app-dark .course-discovery-card:hover {
  border-color: var(--cyan);
}
body.app-dark .course-card-footer {
  background: rgba(255,255,255,0.03);
  border-top-color: rgba(255,255,255,0.07);
}

/* ── Dark mode: contrast improvements ─────────────────────── */
/* Improve inactive filter button contrast */
body.app-dark .filter-btn { color: var(--gray-600); }

/* Improve inactive grade-pill contrast */
body.app-dark .grade-pill { color: var(--gray-600); border-color: rgba(255,255,255,0.14); }

/* Improve btn-ghost contrast in dark mode (learn hub filter pills etc.) */
body.app-dark .btn-ghost { color: var(--gray-700); border-color: rgba(255,255,255,0.14); }
body.app-dark .btn-ghost:hover { color: var(--gray-900); background: rgba(255,255,255,0.08); }

/* Post meta text contrast */
body.app-dark .post-meta { color: var(--gray-600); }
body.app-dark .post-meta span { color: var(--gray-500); }

/* Conv items in dark mode */
body.app-dark .conv-last { color: var(--gray-600); }
body.app-dark .conv-time { color: var(--gray-500); }
body.app-dark .conv-item:hover { background: rgba(255,255,255,0.04); }
body.app-dark .conv-item.active { background: rgba(41,171,226,0.12); }

/* Chat message contrast */
body.app-dark .msg-bubble { color: var(--gray-900); }
body.app-dark .chat-msg.received .msg-bubble { background: rgba(255,255,255,0.07); color: var(--gray-800); }
body.app-dark .msg-time { color: var(--gray-500); }

/* Stat labels contrast */
body.app-dark .stat-label  { color: var(--gray-600); }
body.app-dark .profile-location { color: var(--gray-600); }
body.app-dark .profile-headline { color: var(--gray-700); }

/* Post menu dark mode */
body.app-dark [id^="post-menu-"] {
  background: var(--surface);
  border-color: rgba(255,255,255,0.12);
}
body.app-dark [id^="post-menu-"] button { color: var(--gray-800); }

/* Empty state contrast */
body.app-dark .empty-state p { color: var(--gray-600); }
body.app-dark .empty-title { color: var(--gray-800) !important; }
body.app-dark .empty-text  { color: var(--gray-600) !important; }

/* ─────────────────────────────────────────────────────────────
   QUIZZES PAGE
   ───────────────────────────────────────────────────────────── */

/* Section titles */
.quiz-section-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.quiz-section-title i { color: var(--primary); }

/* Subject list */
.quiz-subjects-section { margin-bottom: 32px; }
.quiz-subjects-list { display: flex; flex-direction: column; gap: 8px; }

.quiz-subject-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.quiz-subject-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.quiz-subject-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.quiz-subject-name { font-size: .95rem; font-weight: 700; color: var(--navy); }
.quiz-subject-count { font-size: .8rem; color: var(--gray-500); }

/* Quiz cards grid */
.quiz-featured-section { margin-bottom: 32px; }
.quiz-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.quiz-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.1); transform: translateY(-2px); }

.quiz-card-header {
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-card-icon { font-size: 1.4rem; }
.quiz-card-subject { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.quiz-card-body { padding: 0 18px 16px; }
.quiz-card-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.quiz-card-desc  { font-size: .82rem; color: var(--gray-500); margin: 0 0 12px; line-height: 1.5; }

.quiz-card-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: .78rem; color: var(--gray-500);
  align-items: center;
}
.quiz-card-meta span { display: flex; align-items: center; gap: 4px; }
.quiz-diff-badge { font-weight: 600; }

/* ── Quiz Runner ── */
.quiz-runner {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quiz-runner-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.quiz-timer {
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light, #ede9fe);
  padding: 5px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.quiz-progress-bar {
  height: 5px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 28px;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--grad-brand, linear-gradient(90deg,var(--primary),var(--cyan)));
  border-radius: 3px;
  transition: width .4s ease;
}

.quiz-question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 28px 20px;
}

.quiz-question-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.6;
  margin: 0 0 24px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
  width: 100%;
}
.quiz-option:hover { border-color: var(--primary); background: #f5f3ff; }
.quiz-option.selected { border-color: var(--primary); background: #ede9fe; }

.quiz-option-label {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.quiz-option.selected .quiz-option-label { background: var(--primary); color: #fff; }
.quiz-option-text { font-size: .93rem; color: var(--navy); line-height: 1.4; }

.quiz-runner-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 0;
}

/* ── Quiz Results ── */
.quiz-result {
  max-width: 680px;
  margin: 0 auto;
}

.quiz-result-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  margin-bottom: 24px;
}
.quiz-result-icon { font-size: 3rem; margin-bottom: 8px; }
.quiz-result-label { font-size: 1.4rem; font-weight: 800; margin: 0 0 12px; }
.quiz-result-score {
  font-size: 4rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 16px;
}
.quiz-result-score span { font-size: 2rem; color: var(--gray-400); }

.quiz-result-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  font-size: .88rem;
  color: var(--gray-500);
}
.quiz-result-stat { display: flex; align-items: center; gap: 6px; }

/* ── Review section ── */
.quiz-review-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
}
.quiz-review-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.quiz-review-row:last-child { border-bottom: none; }
.quiz-review-q {
  display: flex;
  gap: 10px;
  font-size: .9rem;
  color: var(--navy);
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.5;
}
.quiz-review-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gray-100);
  font-size: .72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.quiz-review-ans {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .82rem;
  padding-left: 32px;
}
.quiz-review-row.correct .quiz-review-num { background: #dcfce7; color: #16a34a; }
.quiz-review-row.wrong  .quiz-review-num { background: #fee2e2; color: #dc2626; }

/* Dark mode quiz */
body.app-dark .quiz-subject-card,
body.app-dark .quiz-card,
body.app-dark .quiz-question-card,
body.app-dark .quiz-result-hero,
body.app-dark .quiz-review-section { background: var(--surface); border-color: rgba(255,255,255,.1); }
body.app-dark .quiz-subject-name,
body.app-dark .quiz-card-title,
body.app-dark .quiz-question-text,
body.app-dark .quiz-result-score,
body.app-dark .quiz-review-q,
body.app-dark .quiz-section-title { color: var(--gray-900); }
body.app-dark .quiz-option { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
body.app-dark .quiz-option:hover { background: rgba(99,102,241,.15); border-color: var(--primary); }
body.app-dark .quiz-option.selected { background: rgba(99,102,241,.2); border-color: var(--primary); }
body.app-dark .quiz-option-text { color: var(--gray-800); }
body.app-dark .quiz-option-label { background: rgba(255,255,255,.1); color: var(--gray-800); }
body.app-dark .quiz-progress-bar { background: rgba(255,255,255,.08); }
body.app-dark .quiz-timer { background: rgba(99,102,241,.2); }
body.app-dark .quiz-review-row { border-bottom-color: rgba(255,255,255,.07); }

@media (max-width: 640px) {
  .quiz-cards-grid { grid-template-columns: 1fr; }
  .quiz-question-card { padding: 20px 16px; }
  .quiz-result-hero { padding: 24px 16px; }
  .quiz-result-score { font-size: 3rem; }
  .quiz-review-section { padding: 16px; }
}

/* ════════════════════════════════════════════════════════════════
   Courses Page — Redesigned Layout
   ════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ──────────────────────────────────────────────── */
.courses-page-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── Hero banner ───────────────────────────────────────────────── */
.courses-hero {
  background: var(--grad-brand);
  padding: 28px 24px 24px;
  flex-shrink: 0;
}
.courses-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.courses-hero-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.18);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  flex-shrink: 0;
}
.courses-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.1;
}
.courses-hero-sub {
  font-size: .84rem;
  color: rgba(255,255,255,.75);
  margin: 0;
}

/* ── Tab bar ───────────────────────────────────────────────────── */
.courses-tabs-wrap {
  background: var(--surface);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}
.courses-tabs {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  padding: 0 4px;
}
.courses-tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  border: none;
  background: transparent;
  font-size: .84rem;
  font-weight: 600;
  color: var(--gray-400);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.courses-tab-btn:hover { color: var(--navy); }
.courses-tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.courses-tab-btn i { font-size: .9rem; }

/* ── Tab body ──────────────────────────────────────────────────── */
.courses-tab-body {
  flex: 1;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 16px 32px;
  box-sizing: border-box;
}

/* ── Search row ────────────────────────────────────────────────── */
.courses-search-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

/* ── Filter pills (horizontal scroll) ─────────────────────────── */
.courses-filter-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 18px;
  flex-wrap: nowrap;
}
.courses-filter-scroll::-webkit-scrollbar { display: none; }
.courses-filter-pill {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: var(--surface);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.courses-filter-pill:hover { border-color: var(--cyan); color: var(--cyan); }
.courses-filter-pill.active { background: var(--cyan); border-color: var(--cyan); color: #fff; }

/* ── Discover grid ─────────────────────────────────────────────── */
.courses-discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* ── Enrolled list ─────────────────────────────────────────────── */
.courses-enrolled-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Dark mode ─────────────────────────────────────────────────── */
body.app-dark .courses-hero { /* gradient stays */ }
body.app-dark .courses-tabs-wrap { background: var(--surface); border-color: rgba(255,255,255,.08); }
body.app-dark .courses-filter-pill { background: var(--surface); border-color: rgba(255,255,255,.1); color: var(--gray-400); }
body.app-dark .courses-filter-pill.active { background: var(--cyan); border-color: var(--cyan); color: #fff; }

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .courses-hero { padding: 20px 16px 18px; }
  .courses-hero-icon { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 10px; }
  .courses-hero-title { font-size: 1.2rem; }
  .courses-hero-sub { font-size: .78rem; }
  .courses-tab-btn { padding: 11px 14px; font-size: .8rem; }
  .courses-tab-body { padding: 14px 12px 24px; }
  .courses-discover-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 360px) {
  .courses-tab-btn span { display: none; }
  .courses-tab-btn i { font-size: 1rem; }
  .courses-tab-btn { padding: 11px 16px; }
}

/* ── Session Detail full-page (mirrors course detail) ─────────── */
#page-learn.page-session-detail-active {
  padding: 0;
  overflow: hidden;
}
#page-learn.page-session-detail-active .cd-modal-body {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ── Discover grid card ───────────────────────────────────────── */
.course-page-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.course-page-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.cpcard-header {
  background: var(--grad-brand);
  padding: 16px;
  flex-shrink: 0;
}
.cpcard-subject {
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}
.cpcard-sessions { font-size: .72rem; color: rgba(255,255,255,.8); }
.cpcard-title    { font-size: .97rem; font-weight: 700; color: #fff; line-height: 1.35; margin-top: 2px; }

.cpcard-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cpcard-desc {
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cpcard-teacher {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--gray-500);
  cursor: pointer;
}
.cpcard-teacher:hover span { color: var(--cyan); }
.cpcard-rating { margin-left: auto !important; font-size: .72rem; color: #f59e0b; font-weight: 700; }
.cpcard-meta   { display: flex; justify-content: space-between; font-size: .75rem; color: var(--gray-400); }
.cpcard-footer { margin-top: auto; padding-top: 4px; }

.cpcard-enrolled { font-size: .78rem; color: var(--success, #16a34a); font-weight: 600; }
.cpcard-full     { font-size: .75rem; color: var(--gray-400); }
.cpcard-enroll   {
  display: block;
  text-align: center;
  background: var(--grad-brand);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius);
}

/* ── Enrolled course card ─────────────────────────────────────── */
.enrolled-course-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: box-shadow .2s;
}
.enrolled-course-card:hover { box-shadow: var(--shadow); }

.course-progress-track {
  background: var(--gray-100);
  border-radius: 20px;
  height: 6px;
  overflow: hidden;
}
.course-progress-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: 20px;
  transition: width .4s ease;
  min-width: 3px;
}

/* ── Dark mode ────────────────────────────────────────────────── */
body.app-dark .course-page-card,
body.app-dark .enrolled-course-card { background: var(--surface); border-color: rgba(255,255,255,.08); }
body.app-dark .course-progress-track { background: rgba(255,255,255,.1); }
body.app-dark .cpcard-desc,
body.app-dark .cpcard-teacher { color: var(--gray-400); }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cpcard-header  { padding: 14px; }
  .cpcard-body    { padding: 12px 14px; }
}

/* ════════════════════════════════════════════════════════════════
   Course Detail Page — full page inside page-courses
   ════════════════════════════════════════════════════════════════ */

/* Courses page: remove page-content padding so hero banner fills edge-to-edge */
#page-courses:not(.page-course-detail-active) {
  padding: 0 !important;
}

/* When course detail is active, remove page padding and use flex layout */
#page-courses.page-course-detail-active {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}

#page-courses.page-course-detail-active .cd-modal-body {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.cd-modal {
  max-width: 720px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.cd-modal-header {
  background: var(--grad-brand);
  padding: 0;
  border-bottom: none;
  position: relative;
  flex-shrink: 0;
}

.cd-title-bar {
  padding: 20px 20px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cd-subject-badge {
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.cd-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}

/* ── Course detail back button ── */
.cd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.15);
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  margin: 12px 16px;
  transition: background .15s, color .15s;
}
.cd-back-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.cd-back-btn i { font-size: .85rem; }

.cd-meta-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.cd-teacher-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  flex: 1;
  cursor: pointer;
  transition: background .15s;
}
.cd-teacher-card:hover { background: rgba(255,255,255,.08); }

.cd-teacher-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.4);
  flex-shrink: 0;
}

.cd-teacher-name { font-weight: 700; font-size: .9rem; color: #fff; }
.cd-teacher-sub  { font-size: .75rem; color: rgba(255,255,255,.7); }

.cd-action-box {
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  min-width: 180px;
  border-left: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
}

.cd-enroll-btn   { background: #fff !important; color: var(--primary) !important; border-color: #fff !important; width: 100%; }
.cd-unenroll-btn { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.3) !important; font-size: .78rem !important; padding: 4px 12px !important; }

/* ── Tab nav ──────────────────────────────────────────────────── */
.cd-tab-nav {
  display: flex;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--gray-100);
  overflow-x: auto;
  flex-shrink: 0;
}
.cd-tab-btn {
  padding: 10px 18px;
  border: none;
  background: transparent;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-400);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.cd-tab-btn:hover { color: var(--navy); }
.cd-tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }

/* ── Scrollable body ──────────────────────────────────────────── */
.cd-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ── Overview stat cards ──────────────────────────────────────── */
.cd-stat-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
}
.cd-stat-num { font-size: 1.3rem; font-weight: 800; color: var(--navy); line-height: 1; }
.cd-stat-lbl { font-size: .72rem; color: var(--gray-400); margin-top: 3px; }

/* ── Sessions tab ─────────────────────────────────────────────── */
.cd-session-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
}
.cd-session-live { border-color: #22c55e; background: #f0fdf4; }
.cd-session-absent { border-color: #fca5a5; background: #fff5f5; }
body.app-dark .cd-session-absent { border-color: #f87171; background: rgba(239,68,68,.08); }
.cd-sess-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .72rem; color: #fff;
  flex-shrink: 0;
}

/* ── Resources tab ────────────────────────────────────────────── */
.cd-resource-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  margin-bottom: 8px;
}
.cd-add-resource {
  background: var(--cyan-light, #e0f7fa);
  border: 1.5px dashed var(--cyan);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

/* ── Discussion tab ───────────────────────────────────────────── */
.cd-disc-compose {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 4px;
}
.cd-discussion-post {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: 10px;
}
.cd-pinned { border-color: #fbbf24; background: #fffbeb; }
.cd-disc-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* ── Dark mode overrides ──────────────────────────────────────── */
body.app-dark .cd-stat-card,
body.app-dark .cd-session-row,
body.app-dark .cd-resource-row,
body.app-dark .cd-discussion-post { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.app-dark .cd-session-live { background: rgba(34,197,94,.08); border-color: #22c55e; }
body.app-dark .cd-pinned { background: rgba(251,191,36,.08); border-color: #fbbf24; }
body.app-dark .cd-tab-nav { background: var(--surface); border-color: rgba(255,255,255,.08); }
body.app-dark .cd-disc-compose { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.app-dark .cd-add-resource { background: rgba(0,188,212,.08); }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cd-title     { font-size: 1rem; margin-right: 40px; }
  .cd-meta-row  { flex-direction: column; }
  .cd-action-box { min-width: auto; border-left: none; border-top: 1px solid rgba(255,255,255,.12); align-items: stretch; }
  .cd-tab-btn   { padding: 8px 12px; font-size: .78rem; }
  .cd-modal-body { padding: 14px; }
}

/* ======================================================
   COMMUNITY — Comments max-height (prevent infinite growth)
   ====================================================== */
#commentsList {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
#commentsList::-webkit-scrollbar { width: 4px; }
#commentsList::-webkit-scrollbar-track { background: transparent; }
#commentsList::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 4px; }

/* ======================================================
   GLOBAL RESPONSIVE IMPROVEMENTS
   ====================================================== */

/* ── Tablet: 769px – 1024px ─────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-content { padding: 16px 20px; }
  /* Course grid: 2 columns on tablet */
  #learnCoursesGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Teacher hub cards */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  /* Modals */
  .modal { margin: 12px; }
}

/* ── Phone: ≤ 768px ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Course/session grids: 1 column on phones */
  #learnCoursesGrid,
  #learnSessionsInnerGrid {
    grid-template-columns: 1fr !important;
  }
  /* Page headers wrap nicely */
  .lh-header { flex-wrap: wrap; gap: 10px; }
  /* Help queue cards: stack action buttons */
  .help-card-actions { flex-direction: column; width: 100%; }
  /* Modals: full-width on small screens */
  .modal { width: calc(100vw - 24px); max-width: 100% !important; margin: 12px; }
  /* Course detail page: full height on mobile too */
  #page-courses.page-course-detail-active {
    height: calc(100vh - var(--header-h));
  }
  /* Course detail tab nav: scroll horizontally */
  .cd-tab-nav { overflow-x: auto; flex-wrap: nowrap; gap: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cd-tab-nav::-webkit-scrollbar { display: none; }
  .cd-tab-btn { white-space: nowrap; flex-shrink: 0; }
  /* Teacher hub sessions table: compact */
  .teacher-sessions-row { flex-direction: column; gap: 6px; }
  /* Community: post body less padding */
  .post-body { padding: 0 12px 10px; }
  /* Grid helpers override */
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  /* Jitsi modal header: compact */
  #jitsiModal > div:first-child { padding: 8px 12px; gap: 8px; }
  #jitsiSessionTitle { display: none; }
  /* Session form: single column */
  .session-form-grid { grid-template-columns: 1fr !important; }
}

/* ── Small phone: ≤ 480px ───────────────────────────── */
@media (max-width: 480px) {
  .page-content { padding: 12px; }
  /* Course card: compact padding */
  .course-card-body { padding: 12px 14px; gap: 8px; }
  .course-card-footer { padding: 8px 14px; }
  /* Help queue: full-width buttons */
  #page-helpqueue .btn { width: 100%; justify-content: center; }
  #page-helpqueue .card > div > div:last-child { width: 100%; }
  /* Teacher hub: hide enrolled count on tiny screens */
  .tc-enrolled-count { display: none; }
  /* Stats: single col, compact */
  .stats-grid { grid-template-columns: 1fr 1fr; }
  /* Toast: full width */
  .toast-container { left: 8px; right: 8px; }
  /* Quick actions: 2 col always */
  .quick-actions { grid-template-columns: 1fr 1fr; }
}

/* ── Large screens: ≥ 1400px ────────────────────────── */
@media (min-width: 1400px) {
  #learnCoursesGrid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  }
  .page-content { padding: 24px 32px; }
}

/* Course discovery card: responsive mobile tweak */
@media (max-width: 600px) {
  .course-discovery-card { border-radius: 14px; }
  .course-card-footer { border-radius: 0 0 14px 14px; }
}
/* ================================================================
   PERFORMANCE & UX IMPROVEMENTS — v25
   ================================================================ */

/* Smooth page transitions */
.page-content {
  animation: pageSlideIn .18s var(--ease) both;
}
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Better button press feel */
.btn:active { transform: scale(.97); }
.quiz-option:active { transform: scale(.98); }
.quiz-subject-card:active { transform: scale(.98); }

/* Smooth skeleton loading shimmer */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Scroll performance */
.modal-body, .cd-modal-body, .page-content {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Tap highlight removal for cleaner mobile UX */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* Quiz subject cards — better hover effect */
.quiz-subject-card {
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  cursor: pointer;
}
.quiz-subject-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Quiz cards — snappier hover */
.quiz-card {
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ================================================================
   QUIZ SYSTEM v2 — TABS, COMMUNITY QUIZZES, GAME LOBBY
   ================================================================ */

/* ── Quiz main tab bar ── */
.quiz-main-tabs {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quiz-main-tabs::-webkit-scrollbar { display: none; }

.quiz-main-tab {
  flex: 1;
  min-width: 120px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.quiz-main-tab:hover { color: var(--navy); background: var(--gray-50); }
.quiz-main-tab.active {
  background: var(--grad-brand);
  color: #fff;
  box-shadow: 0 2px 10px rgba(21,101,192,.25);
}
.quiz-main-tab .tab-badge {
  background: rgba(255,255,255,.25);
  color: inherit;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  min-width: 20px;
  text-align: center;
}
.quiz-main-tab:not(.active) .tab-badge {
  background: var(--gray-200);
  color: var(--gray-600);
}

/* ── Create quiz button ── */
.quiz-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--grad-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
  box-shadow: 0 3px 12px rgba(21,101,192,.3);
}
.quiz-create-btn:hover { opacity: .9; transform: translateY(-1px); }

/* ── Community quiz card ── */
.community-quiz-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  display: flex;
  flex-direction: column;
}
.community-quiz-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.community-quiz-card .cq-header {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--gray-100);
}
.community-quiz-card .cq-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.community-quiz-card .cq-author {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-500);
}
.community-quiz-card .cq-body {
  padding: 12px 16px;
  flex: 1;
}
.community-quiz-card .cq-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.3;
}
.community-quiz-card .cq-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--gray-400);
}
.community-quiz-card .cq-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  gap: 8px;
}

/* ── Create Quiz Modal ── */
.create-quiz-step {
  animation: fadeInUp .2s var(--ease);
}
.cq-question-builder {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.cq-question-builder .q-num {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cq-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cq-option-label {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-600);
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cq-option-label.correct-answer {
  background: var(--success);
  color: #fff;
}
.cq-remove-q {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--gray-300);
  cursor: pointer;
  font-size: .9rem;
  padding: 4px;
  border-radius: var(--radius-xs);
  transition: color .15s, background .15s;
}
.cq-remove-q:hover { color: var(--danger); background: var(--danger-light); }

/* ── Game Host Lobby ── */
.game-lobby {
  max-width: 700px;
  margin: 0 auto;
  animation: fadeInUp .25s var(--ease);
}
.game-lobby-hero {
  background: var(--grad-brand);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.game-lobby-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.08) 0%, transparent 60%);
}
.game-pin {
  font-size: 3.2rem;
  font-weight: 900;
  letter-spacing: 6px;
  font-family: 'Inter', monospace;
  margin: 12px 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.game-pin-label {
  font-size: .82rem;
  font-weight: 600;
  opacity: .8;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.game-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.game-mode-card {
  background: var(--surface);
  border: 2px solid var(--gray-100);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .15s var(--ease);
  user-select: none;
}
.game-mode-card:hover {
  border-color: var(--cyan);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cyan);
}
.game-mode-card.selected {
  border-color: var(--cyan);
  background: var(--cyan-light);
  box-shadow: var(--shadow-cyan);
}
.game-mode-icon {
  font-size: 2.2rem;
  margin-bottom: 10px;
  display: block;
}
.game-mode-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
}
.game-mode-desc {
  font-size: .72rem;
  color: var(--gray-400);
  line-height: 1.4;
}

/* ── Game Player List ── */
.game-players-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 60px;
  padding: 14px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
  margin-top: 14px;
}
.game-player-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 30px;
  padding: 5px 12px 5px 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  animation: scaleIn .2s var(--ease);
}
.game-player-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.game-player-count {
  font-size: .75rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: 8px;
}

/* ── Join Game via PIN ── */
.join-game-box {
  max-width: 400px;
  margin: 40px auto;
  text-align: center;
}
.join-game-box .pin-input {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 8px;
  text-align: center;
  width: 100%;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
  background: var(--surface);
  color: var(--navy);
  outline: none;
  transition: border-color .2s;
  text-transform: uppercase;
}
.join-game-box .pin-input:focus { border-color: var(--cyan); }
.join-game-box .pin-input::placeholder { color: var(--gray-300); letter-spacing: 4px; font-size: 1.4rem; }

/* ── Live Game View ── */
.live-game-question {
  background: var(--grad-brand);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
.live-game-question .lq-num {
  font-size: .75rem;
  font-weight: 600;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.live-game-question .lq-text {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.live-game-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.live-game-opt {
  border: none;
  border-radius: var(--radius-md);
  padding: 20px 16px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  line-height: 1.3;
}
.live-game-opt:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.live-game-opt:active { transform: scale(.98); }
.live-game-opt[data-choice="a"] { background: #e74c3c; color: #fff; }
.live-game-opt[data-choice="b"] { background: #3498db; color: #fff; }
.live-game-opt[data-choice="c"] { background: #2ecc71; color: #fff; }
.live-game-opt[data-choice="d"] { background: #f39c12; color: #fff; }
.live-game-opt .opt-icon { font-size: 1.4rem; flex-shrink: 0; }

/* ── Game timer bar ── */
.game-timer-bar {
  height: 8px;
  background: var(--gray-100);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}
.game-timer-fill {
  height: 100%;
  background: var(--grad-brand);
  border-radius: 4px;
  transition: width 1s linear;
}
.game-timer-fill.urgent { background: linear-gradient(90deg, #ef4444, #f97316); }

/* ── Leaderboard in game ── */
.game-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 10px 14px;
  transition: all .2s;
}
.game-lb-row.me { border-color: var(--cyan); background: var(--cyan-light); }
.game-lb-rank { font-size: 1.1rem; font-weight: 900; color: var(--gray-300); width: 28px; text-align: center; flex-shrink: 0; }
.game-lb-rank.top1 { color: #f59e0b; }
.game-lb-rank.top2 { color: var(--gray-400); }
.game-lb-rank.top3 { color: #cd7c3c; }
.game-lb-score { margin-left: auto; font-weight: 800; color: var(--navy); font-size: .95rem; }

/* ── Live game header ── */
.live-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.live-game-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--navy);
}
.live-game-players {
  font-size: .8rem;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 5px 12px;
  border-radius: 20px;
}

/* ── Live blip animation (already referenced above) ── */
@keyframes liveBlip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* ── Game results screen ── */
.game-results-screen {
  text-align: center;
  animation: fadeInUp .3s var(--ease);
}
.game-results-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin: 24px 0;
}
.podium-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.podium-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid;
}
.podium-step:nth-child(1) .podium-avatar { border-color: #f59e0b; }
.podium-step:nth-child(2) .podium-avatar { border-color: var(--gray-400); }
.podium-step:nth-child(3) .podium-avatar { border-color: #cd7c3c; }
.podium-bar {
  width: 64px;
  background: var(--grad-brand);
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
}
.podium-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
  text-align: center;
  max-width: 72px;
  word-break: break-word;
}

/* Dark mode adaptations */
body.app-dark .quiz-main-tabs { background: var(--surface); border-color: rgba(255,255,255,.08); }
body.app-dark .quiz-main-tab:hover { background: rgba(255,255,255,.05); }
body.app-dark .community-quiz-card { background: var(--surface); border-color: rgba(255,255,255,.08); }
body.app-dark .community-quiz-card .cq-header { border-color: rgba(255,255,255,.06); }
body.app-dark .community-quiz-card .cq-footer { border-color: rgba(255,255,255,.06); }
body.app-dark .game-mode-card { background: var(--surface); border-color: rgba(255,255,255,.1); }
body.app-dark .game-mode-card.selected { background: rgba(41,171,226,.15); }
body.app-dark .game-players-list { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); }
body.app-dark .game-player-chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
body.app-dark .game-lb-row { background: var(--surface); border-color: rgba(255,255,255,.08); }
body.app-dark .live-game-players { background: rgba(255,255,255,.08); }
body.app-dark .cq-question-builder { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.app-dark .join-game-box .pin-input { background: var(--surface); border-color: rgba(255,255,255,.15); color: #fff; }
/* Dark: game lobby modal body surface */
body.app-dark #gameLobbyModal .modal { background: #0d2040; }
/* Dark: solo practice quiz runner card */
body.app-dark .quiz-runner .btn-ghost { color: var(--gray-800); border-color: rgba(255,255,255,.12); }

/* Mobile tweaks for game */
@media (max-width: 600px) {
  .game-mode-grid { grid-template-columns: 1fr 1fr; }
  .live-game-options { grid-template-columns: 1fr 1fr; }
  .live-game-opt { padding: 14px 10px; font-size: .82rem; }
  .game-pin { font-size: 2.4rem; letter-spacing: 4px; }
  .game-lobby-hero { padding: 22px 16px; }
}

/* ── Community Quiz Cards ── */
.cq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.cq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.cq-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
  transform: translateY(-2px);
}

.cq-card-top {
  padding: 18px 18px 14px;
  flex: 1;
}

.cq-card-title {
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.35;
}

.cq-card-desc {
  font-size: .82rem;
  color: var(--gray-500);
  margin: 0 0 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cq-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .76rem;
  color: var(--gray-400);
  align-items: center;
  margin-bottom: 6px;
}
.cq-card-meta i { color: var(--gray-300); }

.cq-card-author {
  font-size: .76rem;
  color: var(--gray-400);
  margin-top: 6px;
}

.cq-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--gray-50, #f9fafb);
  flex-wrap: wrap;
}

.cq-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.cq-btn:hover { opacity: .88; transform: translateY(-1px); }
.cq-btn:active { transform: scale(.97); }

.cq-btn-solo {
  background: var(--gray-100);
  color: var(--navy);
  flex: 1;
}
.cq-btn-host {
  background: var(--primary, #4f46e5);
  color: #fff;
  flex: 1;
}
.cq-btn-edit {
  background: var(--gray-100);
  color: var(--navy);
  padding: 7px 11px;
}
.cq-btn-delete {
  background: #fee2e2;
  color: #dc2626;
  padding: 7px 11px;
}
.cq-btn-delete:hover { background: #fecaca; }

body.app-dark .cq-card {
  background: var(--surface);
  border-color: var(--border);
}
/* cq-card-actions: --gray-800 is near-white in dark mode, use explicit dark bg */
body.app-dark .cq-card-actions { background: rgba(255,255,255,0.04) !important; border-top-color: rgba(255,255,255,0.06); }
body.app-dark .cq-btn-solo,
body.app-dark .cq-btn-edit { background: rgba(255,255,255,0.08); color: var(--gray-900); }
body.app-dark .cq-card-title { color: var(--gray-900); }

@media (max-width: 600px) {
  .cq-grid { grid-template-columns: 1fr; }
  .cq-btn-solo, .cq-btn-host { flex: unset; }
}

/* ================================================================
   MOBILE RESPONSIVENESS v2 — Comprehensive fixes
   ================================================================ */

/* ── Learn page discover tab: match courses page responsiveness ── */
#learnFilterPills {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
}
#learnFilterPills::-webkit-scrollbar { display: none; }
#learnFilterPills button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Session/course grids in learn: auto-fill responsive */
#learnSessionsInnerGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
#learnCoursesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ── Course detail session rows: responsive on mobile ─────────── */
.cd-session-row {
  flex-wrap: nowrap;
}
@media (max-width: 480px) {
  .cd-session-row { flex-wrap: wrap; }
  .cd-session-row > div:last-child { width: 100%; flex-direction: row; align-items: center; }
}

/* ── Page-level padding adjustments ───────────────────────────── */
@media (max-width: 768px) {
  .page-content { padding: 14px; }

  /* Learn hub tabs: smaller text to fit 4 tabs */
  .lh-tabs-wrap button { font-size: .78rem !important; padding: 6px 10px !important; }

  /* Course detail back button text: hide "to X" on very small screens */
  .cd-back-btn span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Session/course discovery grids: 1 col on phone */
  #learnSessionsInnerGrid,
  #learnCoursesGrid {
    grid-template-columns: 1fr !important;
  }

  /* Enrolled course card: better mobile layout */
  .enrolled-course-card { padding: 14px; }

  /* Stats grid on teacher hub: 2 col */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Community posts: reduce padding */
  .post-card .post-body { padding: 0 12px 10px; }

  /* Leaderboard: hide rank number text on tiny */
  .leaderboard-rank { min-width: 28px; }
}

@media (max-width: 640px) {
  /* Filter scroll: tighter gaps */
  #learnFilterPills { gap: 6px !important; }
  #learnFilterPills button { padding: 4px 10px !important; font-size: .75rem !important; }

  /* Learn page section headers: wrap nicely */
  #learnSessionsGrid > div > div:first-child { flex-wrap: wrap; gap: 6px; }

  /* Course detail: reduce header padding */
  .cd-title-bar { padding: 14px 14px 0; }
  .cd-meta-row { margin-top: 10px; }
  .cd-teacher-card { padding: 10px 14px; }
  .cd-action-box { padding: 8px 14px; }
  .cd-modal-body { padding: 14px; }

  /* Help queue buttons */
  .help-card-actions { flex-direction: column; }
  .help-card-actions .btn { width: 100%; justify-content: center; }

  /* Teacher hub: session rows compact */
  .teacher-session-row { flex-direction: column; align-items: flex-start !important; gap: 8px; }

  /* Dashboard quick actions: 2 col always */
  .quick-actions { grid-template-columns: 1fr 1fr !important; }

  /* Quizzes: full width cards */
  .quiz-card-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .page-content { padding: 10px; }

  /* Header icons: tighter */
  .header { padding: 0 10px; gap: 6px; }

  /* Course page: single col */
  .courses-discover-grid { grid-template-columns: 1fr !important; }

  /* Modals: full-screen sheet */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    max-height: 92vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Session detail tabs: smaller */
  #sessionDetailTabNav .cd-tab-btn { padding: 8px 10px; font-size: .76rem; }

  /* Back button: hide label on very small screens */
  .cd-back-btn span { display: none; }
  .cd-back-btn { padding: 6px 10px; gap: 0; }

  /* Learn hub header button: full width */
  .lh-header > .btn { width: 100% !important; justify-content: center; margin-left: 0 !important; }

  /* Discussion/resource forms: single col */
  #cdAddResourceForm .grid-2,
  #sdAddResourceForm [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Stats numbers: slightly smaller on tiny screens */
  .cd-stat-num { font-size: 1.1rem; }

  /* Enrolled course card progress dots: compact */
  .enrolled-course-card [style*="width:22px"] { width: 18px !important; height: 18px !important; }
}

@media (max-width: 360px) {
  .page-content { padding: 8px 6px; }
  .courses-tab-btn span { display: none; }
  .courses-tab-btn i { font-size: 1rem; }
  .lh-tabs-wrap button { font-size: .72rem !important; padding: 5px 7px !important; }
  .header-search { display: none; }
}

/* ── Landscape phone fix ───────────────────────────────────────── */
@media (max-height: 500px) and (max-width: 900px) {
  .cd-modal-header { max-height: 120px; overflow-y: auto; }
}

/* ── Learn page: full-height when session detail is active ─────── */
#page-learn.page-session-detail-active {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
}
@media (max-width: 768px) {
  #page-learn.page-session-detail-active {
    height: calc(100vh - var(--header-h));
  }
}

/* ================================================================
   RESPONSIVE FIXES — learn page tabs, quiz page, card grids
   ================================================================ */

/* ── Learn page: hide tab text on narrow screens, icons only ─── */
@media (max-width: 480px) {
  .lh-tab-label { display: none; }
  #page-learn .lh-tabs-wrap button {
    padding: 8px 6px !important;
    min-width: 0;
    flex: 1;
  }
}

/* ── Quiz page: compact tab bar on narrow screens ─────────────── */
@media (max-width: 480px) {
  .quiz-main-tab {
    min-width: 80px !important;
    padding: 8px 10px !important;
    font-size: .78rem !important;
    gap: 4px !important;
  }
}

/* ── Quiz page: header buttons stack on very small screens ─────── */
@media (max-width: 400px) {
  #page-quizzes .page-header > div:last-child {
    flex-direction: column;
    width: 100%;
  }
  #page-quizzes .quiz-create-btn,
  #page-quizzes .btn-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* ── Learn page: session/course grids — ensure single col at 640px ── */
@media (max-width: 640px) {
  #learnSessionsInnerGrid,
  #learnCoursesGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Quiz cards grid: ensure single col from 640px ── */
@media (max-width: 640px) {
  .quiz-cards-grid { grid-template-columns: 1fr !important; }
}

/* ── Prevent any page content from causing horizontal page scroll ── */
#page-learn,
#page-quizzes {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Session discovery card: prevent long text overflow ── */
.session-discovery-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Learn page filter pills: ensure proper horizontal scroll ─── */
#learnFilterPills {
  width: 100%;
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   POMODORO TIMER
   ══════════════════════════════════════════════════════════════ */

.pomo-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
  max-width: 960px;
}

/* ── Main Timer Column ── */
.pomo-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Mode tabs */
.pomo-tabs {
  display: flex;
  gap: 6px;
  background: var(--gray-100);
  padding: 5px;
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.pomo-tab {
  border: none;
  background: transparent;
  padding: 9px 18px;
  border-radius: 16px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-400);
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pomo-tab:hover { color: var(--navy); background: var(--gray-200); }
.pomo-tab.active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
body.app-dark .pomo-tab.active { color: var(--gray-900); }

/* ── Tomato Timer ── */
.pomo-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.pomo-tomato {
  position: relative;
  width: clamp(220px, 40vw, 300px);
  height: clamp(240px, 44vw, 330px);
  transition: transform 0.3s var(--ease);
}
.pomo-tomato:hover { transform: scale(1.02); }

.pomo-tomato-svg {
  width: 100%;
  height: 100%;
}

/* Tomato base (outline/background) */
.pomo-tomato-base {
  fill: rgba(239, 68, 68, 0.12);
  stroke: rgba(239, 68, 68, 0.25);
  stroke-width: 1.5;
  transition: fill 0.4s, stroke 0.4s;
}

/* Fill (animated level) */
.pomo-tomato-fill {
  fill: #ef4444;
  transition: fill 0.4s;
}

/* Break mode colors */
[data-mode="shortBreak"] .pomo-tomato-base {
  fill: rgba(16, 185, 129, 0.12);
  stroke: rgba(16, 185, 129, 0.25);
}
[data-mode="shortBreak"] .pomo-tomato-fill { fill: #10b981; }

[data-mode="longBreak"] .pomo-tomato-base {
  fill: rgba(59, 130, 246, 0.12);
  stroke: rgba(59, 130, 246, 0.25);
}
[data-mode="longBreak"] .pomo-tomato-fill { fill: #3b82f6; }

/* Breathing animation when running */
@keyframes pomoBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
.pomo-breathing {
  animation: pomoBreathe 3s ease-in-out infinite;
}

/* Timer text centered over the tomato */
.pomo-timer-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -38%);
  text-align: center;
  pointer-events: none;
}
.pomo-time {
  display: block;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.app-dark .pomo-time { color: var(--gray-900); }

.pomo-mode-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-400);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Session dots (4 per cycle) */
.pomo-dots {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.pomo-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gray-200);
  transition: var(--transition);
}
.pomo-dot.filled {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

/* ── Controls ── */
.pomo-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}
.pomo-btn {
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 24px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  font-family: inherit;
}
.pomo-btn-primary {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
  padding: 14px 32px;
  font-size: .95rem;
}
.pomo-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.45);
}
.pomo-btn-primary.pomo-btn-active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
}
.pomo-btn-primary.pomo-btn-active:hover {
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45);
}
.pomo-btn-secondary {
  background: var(--gray-100);
  color: var(--gray-500);
}
.pomo-btn-secondary:hover {
  background: var(--gray-200);
  color: var(--navy);
}
body.app-dark .pomo-btn-secondary:hover { color: var(--gray-900); }

.pomo-shortcuts-hint {
  font-size: .75rem;
  color: var(--gray-400);
  text-align: center;
}
.pomo-shortcuts-hint kbd {
  display: inline-block;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: .7rem;
  font-family: inherit;
  font-weight: 600;
  color: var(--gray-500);
}

/* ── Sidebar Cards ── */
.pomo-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pomo-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}
.pomo-card-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pomo-card-title i { color: var(--cyan); font-size: .9rem; }
body.app-dark .pomo-card-title { color: var(--gray-900); }

/* Stats grid */
.pomo-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}
.pomo-stat {
  background: var(--gray-50);
  border-radius: var(--radius);
  padding: 12px 6px;
}
.pomo-stat-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
}
body.app-dark .pomo-stat-value { color: var(--gray-900); }
.pomo-stat-label {
  display: block;
  font-size: .7rem;
  color: var(--gray-400);
  margin-top: 2px;
  font-weight: 500;
}

/* How it works steps */
.pomo-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pomo-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pomo-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cyan-light);
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pomo-step strong {
  display: block;
  font-size: .82rem;
  color: var(--navy);
  margin-bottom: 1px;
}
body.app-dark .pomo-step strong { color: var(--gray-900); }
.pomo-step p {
  margin: 0;
  font-size: .76rem;
  color: var(--gray-400);
  line-height: 1.4;
}

/* Settings */
.pomo-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pomo-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pomo-setting span {
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-500);
}
.pomo-setting select {
  padding: 7px 34px 7px 12px;
  border-radius: var(--radius);
  border: 1.5px solid var(--gray-200);
  background-color: var(--gray-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z' fill='%238FA0BB'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  appearance: none; -webkit-appearance: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  min-width: 90px;
}
.pomo-setting select:hover { border-color: var(--gray-400); }
.pomo-setting select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(41,171,226,0.12);
}
body.app-dark .pomo-setting select {
  background-color: var(--gray-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z' fill='%23637087'/%3E%3C/svg%3E");
  border-color: var(--gray-200);
  color: var(--gray-900);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .pomo-layout {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  .pomo-sidebar {
    order: 2;
  }
}
@media (max-width: 480px) {
  .pomo-tabs { flex-direction: column; gap: 4px; width: 100%; }
  .pomo-tab { justify-content: center; }
  .pomo-controls { gap: 8px; }
  .pomo-btn { padding: 10px 16px; font-size: .82rem; }
  .pomo-btn-primary { padding: 12px 22px; }
  .pomo-stats-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   FLASHCARDS
   ══════════════════════════════════════════════════════════════ */

/* ── Deck Grid ── */
.fc-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.fc-deck-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s;
  position: relative;
}
.fc-deck-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
  opacity: 0;
  transition: opacity .2s;
}
.fc-deck-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--cyan-2);
}
.fc-deck-card:hover::before { opacity: 1; }

.fc-deck-header {
  padding: 14px 18px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fc-deck-icon { font-size: 1.3rem; flex-shrink: 0; }
.fc-deck-subject {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gray-500);
}
.fc-badge-official {
  font-size: .68rem;
  font-weight: 700;
  background: linear-gradient(135deg, #1565C0, #29ABE2);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
}
.fc-badge-vis {
  font-size: .75rem;
  color: var(--gray-400);
  margin-left: auto;
}

.fc-deck-body { padding: 0 18px 16px; }
.fc-deck-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.4;
}
body.app-dark .fc-deck-title { color: var(--gray-900); }
.fc-deck-desc {
  font-size: .82rem;
  color: var(--gray-500);
  margin: 0 0 10px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fc-deck-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .78rem;
  color: var(--gray-400);
  align-items: center;
}
.fc-deck-meta i { margin-right: 3px; }

/* ── Detail View ── */
.fc-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.fc-progress-bar-wrap {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-100);
}
.fc-progress-labels {
  display: flex;
  gap: 16px;
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.fc-progress-track {
  height: 8px;
  background: var(--gray-100);
  border-radius: 4px;
  display: flex;
  overflow: hidden;
}
.fc-progress-seg {
  height: 100%;
  transition: width .4s var(--ease);
}

/* Card list in detail view */
.fc-cards-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fc-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.fc-card-row:hover {
  border-color: var(--cyan-2);
  background: rgba(41,171,226,0.03);
  box-shadow: var(--shadow-xs);
}
.fc-card-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gray-100);
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gray-500);
}
.fc-card-content { flex: 1; min-width: 0; display: flex; gap: 16px; }
.fc-card-front {
  flex: 1;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
}
body.app-dark .fc-card-front { color: var(--gray-900); }
.fc-card-back {
  flex: 1;
  font-size: .85rem;
  color: var(--gray-500);
}
.fc-card-conf {
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Study Mode ── */
.fc-study-runner {
  max-width: 600px;
  margin: 0 auto;
}
.fc-study-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 4px;
}

/* Flip card */
.fc-flip-container {
  perspective: 1000px;
  cursor: pointer;
  margin: 28px 0 24px;
}
.fc-flip-card {
  position: relative;
  width: 100%;
  min-height: 260px;
  transition: transform 0.5s var(--ease);
  transform-style: preserve-3d;
}
.fc-flip-card.flipped { transform: rotateY(180deg); }

.fc-flip-front,
.fc-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow);
}
.fc-flip-front {
  background: var(--surface);
  border: 2px solid var(--gray-200);
  background-image: radial-gradient(circle at 20% 80%, rgba(41,171,226,0.04) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(79,70,229,0.04) 0%, transparent 50%);
}
.fc-flip-back {
  background: linear-gradient(135deg, #0D1B4B 0%, #1565C0 50%, #29ABE2 100%);
  color: white;
  transform: rotateY(180deg);
  border: none;
  box-shadow: 0 8px 32px rgba(13,27,75,0.25);
}

.fc-flip-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0.6;
}
.fc-flip-text {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  max-width: 100%;
  word-break: break-word;
}
.fc-flip-front .fc-flip-text { color: var(--navy); }
body.app-dark .fc-flip-front .fc-flip-text { color: var(--gray-900); }
.fc-flip-hint {
  margin-top: 20px;
  font-size: .78rem;
  color: var(--gray-400);
}

/* Rating buttons */
.fc-study-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.fc-rate-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s var(--ease);
  font-family: inherit;
  color: var(--gray-500);
}
.fc-rate-btn i { font-size: 1.1rem; }
.fc-rate-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.fc-rate-learning {
  border-color: rgba(245,158,11,0.3);
  color: #b45309;
}
.fc-rate-learning:hover {
  border-color: #f59e0b;
  color: #b45309;
  background: #fef3c7;
  box-shadow: 0 4px 20px rgba(245,158,11,0.2);
}
.fc-rate-known {
  border-color: rgba(16,185,129,0.3);
  color: #047857;
}
.fc-rate-known:hover {
  border-color: #10b981;
  color: #047857;
  background: #d1fae5;
  box-shadow: 0 4px 20px rgba(16,185,129,0.2);
}
.fc-rate-flip {
  border-color: rgba(41,171,226,0.3);
  color: var(--blue);
  padding: 16px 48px;
}
.fc-rate-flip:hover {
  border-color: var(--cyan);
  color: var(--blue);
  background: rgba(41,171,226,0.08);
  box-shadow: 0 4px 20px rgba(41,171,226,0.15);
}

/* ── Create/Edit Card Rows ── */
.fc-card-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-100);
  transition: var(--transition);
}
.fc-card-input-row:hover { border-color: var(--gray-200); }
.fc-card-input-row:focus-within { border-color: var(--cyan); background: var(--surface); }
.fc-card-input-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cyan-light);
  font-size: .72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--cyan);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .fc-deck-grid { grid-template-columns: 1fr; }
  .fc-card-content { flex-direction: column; gap: 4px; }
  .fc-detail-header { flex-direction: column; }
  .fc-flip-card { min-height: 220px; }
  .fc-study-actions { flex-direction: column; }
  .fc-rate-btn { justify-content: center; }
  .fc-card-input-row { flex-wrap: wrap; }
  .fc-card-input-row .form-input { min-width: 0; }
  .fc-progress-labels { flex-wrap: wrap; gap: 8px; }
}