/* Adapt Edu — Main Stylesheet */

:root {
  /* Backgrounds */
  --bg:       #f0f1f6;
  --bg2:      #e6e8ef;
  --bg3:      #ffffff;
  --surface:  #ffffff;
  --surface2: #eef0fb;
  --surface3: #f8f9ff;

  /* Borders */
  --border:   rgba(79,70,229,0.09);
  --border2:  rgba(79,70,229,0.18);

  /* Accent palette */
  --accent:   #4f46e5;
  --accent2:  #7c3aed;
  --accent3:  #a78bfa;
  --accent4:  #f59e0b;
  --success:  #10b981;
  --danger:   #ef4444;

  /* Text */
  --text:     #0f172a;
  --text2:    #334155;
  --text3:    #64748b;
  --text4:    #94a3b8;

  /* Glow */
  --glow:     rgba(79,70,229,0.13);
  --glow2:    rgba(124,58,237,0.11);

  /* Shape */
  --radius:    16px;
  --radius-sm:  8px;
  --radius-xs:  6px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow:    0 4px 16px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-accent: 0 8px 24px rgba(79,70,229,0.18);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent3); transition:background .15s; }


/* ── GLOBAL UTILITIES ──────────────────────────────────────────── */
.ease { transition-timing-function: cubic-bezier(.16,1,.3,1) !important; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.glass-dark {
  background: rgba(15,23,42,0.75);
  backdrop-filter: blur(20px) saturate(180%);
}

/* ── TOAST / SNACKBAR ───────────────────────────────────────────── */
.adapt-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  padding: 10px 20px;
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 9999;
  white-space: nowrap;
  animation: toastIn 0.3s cubic-bezier(.16,1,.3,1) both;
  pointer-events: none;
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(-50%) translateY(12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── SKELETON LOADER ────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg2) 25%, var(--surface2) 50%, var(--bg2) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── BADGE ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.badge-accent  { background:rgba(79,70,229,0.1);  color:var(--accent);  border:1px solid rgba(79,70,229,0.15); }
.badge-success { background:rgba(16,185,129,0.1); color:#10b981; border:1px solid rgba(16,185,129,0.15); }
.badge-warning { background:rgba(245,158,11,0.1); color:#f59e0b; border:1px solid rgba(245,158,11,0.15); }
.badge-danger  { background:rgba(239,68,68,0.1);  color:#ef4444; border:1px solid rgba(239,68,68,0.15); }

/* ── DIVIDER ────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
  border: none;
}

/* ── EMPTY STATE ────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--text3);
}
.empty-state .icon { font-size: 36px; margin-bottom: 12px; }
.empty-state .title { font-family:'Syne',sans-serif; font-size:16px; font-weight:700; color:var(--text2); margin-bottom:6px; }
.empty-state .desc { font-size:13px; line-height:1.6; }

/* ══════════════════════════════════════
   LANDING + LOGIN
══════════════════════════════════════ */
#landing-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  padding: clamp(16px, 3vw, 32px) 0 48px;
}

.landing-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(79,70,229,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(124,58,237,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 50% 90%, rgba(167,139,250,0.09) 0%, transparent 50%);
}

.landing-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

.landing-wrap {
  width: min(1060px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 2;
  padding: clamp(14px, 2vw, 22px) 0 clamp(22px, 3vw, 34px);
}

.landing-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.landing-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  justify-content: center;
}
.landing-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.landing-hero {
  padding: clamp(6px, 1.6vw, 12px) 0 4px;
  max-width: 820px;
}
.landing-kicker {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(79,70,229,0.1);
  border: 1px solid rgba(79,70,229,0.24);
  margin-bottom: 16px;
}
.landing-hero h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.12;
  letter-spacing: -1.5px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--text) 30%, var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.landing-hero h1 span {
  -webkit-text-fill-color: var(--accent);
}
.landing-hero h1 span { color: var(--accent); }
.landing-hero p {
  color: var(--text2);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 22px;
}
.landing-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.landing-trust {
  font-size: 13px;
  color: var(--text3);
  margin-bottom: 24px;
}
.btn-ghost {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent2); color: var(--accent2); }

.landing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
}
.landing-stat {
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.landing-stat-num {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.landing-stat-label {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text3);
}

.landing-preview {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(79,70,229,0.08);
}
.landing-preview h3 {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  margin-bottom: 12px;
}
.landing-preview p {
  color: var(--text2);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.preview-item {
  display: block;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text2);
}
.community-note {
  margin-top: 2px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.community-pill {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text2);
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.14);
}

/* ── Interactive tour preview ── */
.tour-preview {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 0 4px;
  scroll-margin-top: 20px;
}
.tour-preview--flash {
  animation: tourPulse 1.1s ease;
}
@keyframes tourPulse {
  0% { box-shadow: 0 0 0 0 rgba(79,70,229,0.35); }
  100% { box-shadow: 0 0 0 12px rgba(79,70,229,0); }
}
.tour-preview-header {
  text-align: center;
  margin-bottom: 18px;
}
.tour-preview-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.tour-preview-header p {
  color: var(--text2);
  font-size: 15px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0 auto;
}
.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.tour-tab {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tour-tab:hover {
  border-color: rgba(79,70,229,0.35);
  color: var(--text);
}
.tour-tab.active {
  background: rgba(79,70,229,0.12);
  border-color: rgba(79,70,229,0.35);
  color: var(--accent);
  font-weight: 600;
}
.tour-browser {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(79,70,229,0.12);
}
.tour-browser-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #eef2ff, #e5e7eb);
  border-bottom: 1px solid var(--border);
}
.tour-dots { display: flex; gap: 6px; }
.tour-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
}
.tour-dots span:nth-child(1) { background: #fca5a5; }
.tour-dots span:nth-child(2) { background: #fcd34d; }
.tour-dots span:nth-child(3) { background: #86efac; }
.tour-url {
  flex: 1;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text3);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  text-align: left;
}
.tour-panel-wrap {
  position: relative;
  min-height: 220px;
  background: var(--bg);
}
.tour-panel {
  display: none;
  padding: 16px;
  animation: fadeIn 0.25s ease;
}
.tour-panel.active { display: block; }
.tour-mini-title {
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}
.tour-mini-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface2);
  margin-bottom: 8px;
  overflow: hidden;
}
.tour-mini-bar-fill {
  height: 100%;
  width: 72%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}
.tour-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.tour-mini-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  color: var(--text2);
}
.tour-mini-card strong { display: block; color: var(--text); margin-bottom: 4px; font-size: 12px; }
.tour-mini-list { margin: 0; padding-left: 18px; color: var(--text2); font-size: 12px; line-height: 1.5; }
.tour-mini-list li { margin-bottom: 4px; }
.tour-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text3);
  margin: 16px 0 12px;
}
.tour-preview .btn-primary { width: 100%; max-width: 320px; display: flex; margin: 0 auto; }
@media (max-width: 560px) {
  .tour-mini-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .landing-hero h1 { font-size: 40px; }
}

@media (max-width: 1280px) {
  .topbar { padding: 0 24px; }
  .search-bar { width: 220px; }
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: 64px 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 0 20px; }
  .topbar-title { font-size: 16px; }
  .search-bar { width: 200px; }
  .tasks-layout,
  .portfolio-header,
  .pit-layout {
    grid-template-columns: 1fr;
  }
  .companies-grid,
  .friends-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Collapse icon rail to just 48px on mobile */
  .shell { grid-template-columns: 48px 1fr; }
  .icon-rail { padding: 12px 0; gap: 2px; }
  .rail-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
  .rail-logo { width: 34px; height: 34px; font-size: 16px; margin-bottom: 12px; }
  .rail-avatar { width: 32px; height: 32px; font-size: 12px; }

  /* Topbar compact */
  .topbar { padding: 0 10px; gap: 6px; height: 52px; }
  .topbar-title { font-size: 14px; }
  .topbar-action { width: 30px; height: 30px; font-size: 14px; }
  .topbar-logout { padding: 5px 10px; font-size: 11px; }

  /* Page content full width */
  .page { padding: 12px; }
  .hero-banner { padding: 18px; border-radius: 14px; }
  .hero-banner h1 { font-size: 22px; }
  .hero-stats { gap: 12px; }
  .hero-stat-num { font-size: 18px; }

  /* Course cards single column */
  .courses-grid { grid-template-columns: 1fr; gap: 14px; }
  .updates-grid { grid-template-columns: 1fr; gap: 12px; }
  .ai-modes-grid { grid-template-columns: 1fr; }
  .micro-cards { grid-template-columns: 1fr 1fr; }

  /* User menu opens upward with better positioning */
  /* user-menu-dropdown uses fixed positioning, no override needed */
}

@media (max-width: 400px) {
  /* Very small phones */
  .shell { grid-template-columns: 44px 1fr; }
  .rail-icon { width: 36px; height: 36px; font-size: 16px; }
  .topbar-title { display: none; }
  .micro-cards { grid-template-columns: 1fr; }
}

/* iPad landscape and similar tablets */
@media (min-width: 900px) and (max-width: 1200px) and (orientation: landscape) {
  .landing-wrap { width: min(940px, 94vw); }
  .landing-hero { max-width: 760px; }
  .landing-hero h1 { font-size: 38px; }
  .landing-hero p { font-size: 16px; line-height: 1.6; }
  .landing-topbar { gap: 12px; }
  .topbar { height: 56px; }
  .page { padding: 16px; }
  .hero-banner { padding: 22px 24px; }
  .ai-learn-hero { padding: 22px 24px; }
}

/* 1366x768 and other short-height laptops */
@media (min-width: 1200px) and (max-height: 820px) {
  .landing-wrap { padding: 10px 0 16px; gap: 16px; }
  .landing-hero h1 { font-size: 42px; margin-bottom: 10px; }
  .landing-hero p { margin-bottom: 14px; }
  .landing-trust { margin-bottom: 14px; }
  .landing-stat { padding: 10px; }
  .landing-stat-num { font-size: 20px; }
  .topbar { height: 54px; }
  .page { padding-top: 18px; padding-bottom: 18px; }
  .section-header { margin-bottom: 16px; }
  .hero-banner { padding: 22px 24px; margin-bottom: 20px; }
}

@media (max-width: 820px) {
  .page { padding: 18px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .search-bar { display: none; }
  .hero-stats { gap: 18px; flex-wrap: wrap; }
  .hero-banner { padding: 24px; }
  .transparency-banner { flex-direction: column; align-items: flex-start; }
  .ai-learn-hero { flex-direction: column; align-items: flex-start; }
  .pit-main { max-height: none; }
  .section-header { align-items: flex-start; flex-direction: column; gap: 10px; }
  .topbar-action:nth-last-child(2) { display: none; }
}

@media (max-width: 560px) {
  .landing-wrap { width: 94vw; padding: 14px 0 24px; }
  .landing-topbar { flex-wrap: wrap; max-width: 100%; }
  .landing-hero p { max-width: none; }
  .login-card { padding: 28px 20px; border-radius: 18px; }
  .topbar-action { width: 32px; height: 32px; border-radius: 8px; }
  .icon-rail { padding: 14px 0; }
  .hero-banner h1 { font-size: 28px; }
  .course-thumb { height: 120px; font-size: 40px; }
}

@media (min-width: 1600px) {
  .landing-wrap { width: min(980px, 88vw); }
  .page { max-width: 1200px; }
}

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(17,24,39,0.55);
  backdrop-filter: blur(6px);
  padding: 20px;
  overflow-y: auto;
}
.login-modal.open { display: flex; }

.login-card {
  position: relative; z-index:2;
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(79,70,229,0.08);
  animation: slideUp 0.4s cubic-bezier(.16,1,.3,1) both;
  margin: auto;
}

@keyframes slideUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}

.login-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 36px;
}
.login-logo-mark {
  width:44px; height:44px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.login-logo-text {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
}
.login-logo-text span { color: var(--accent); }

.login-card h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.login-card p {
  color: var(--text2);
  font-size: 15px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}
.field input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12), 0 1px 4px rgba(79,70,229,0.10);
  background: #fff;
}
.field input::placeholder { color: var(--text3); }

.login-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #ffffff;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.2s, transform 0.15s;
  margin-top: 8px;
}
.login-btn:hover { opacity:0.9; transform: translateY(-1px); }
.login-btn:active { transform:translateY(0); }

.login-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text3);
}
.login-footer a { color: var(--accent2); text-decoration: none; }

.login-modes {
  display: flex; gap: 8px;
  margin-bottom: 28px;
}
.mode-pill {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.mode-pill.active {
  background: var(--surface2);
  border-color: var(--accent2);
  color: var(--accent2);
}

.login-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
}
.login-close:hover { color: var(--text); border-color: var(--accent2); }

/* ══════════════════════════════════════
   APP SHELL
══════════════════════════════════════ */
#app { display:none; height:100vh; overflow:hidden; }

.shell {
  display: grid;
  grid-template-columns: 72px 240px 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
}

/* ICON RAIL */
.icon-rail {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  gap: 4px;
  z-index: 10;
}
.rail-logo {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 20px;
  cursor: pointer;
}
.rail-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text3);
  position: relative;
  border: 1px solid transparent;
}
.rail-icon:hover { background: var(--surface); color: var(--text2); }
.rail-icon.active {
  background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(124,58,237,0.08));
  color: var(--accent);
  border-color: rgba(79,70,229,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.rail-badge {
  position: absolute; top:6px; right:6px;
  width:8px; height:8px;
  background: var(--accent3);
  border-radius: 50%;
  border: 2px solid var(--bg2);
}
.rail-spacer { flex:1; }
.rail-avatar {
  width:38px; height:38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: 2px solid var(--surface2);
}

/* SIDEBAR */
.sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-header {
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.sidebar-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
}
.sidebar-sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 3px;
}
.sidebar-body { flex:1; overflow-y:auto; padding: 12px 0; }
.sidebar-section {
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--text3);
  text-transform: uppercase;
  margin-top: 12px;
}
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 8px;
  margin: 0 6px;
  font-size: 14px;
  color: var(--text2);
}
.sidebar-item:hover { background: var(--surface); color: var(--text); }
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(79,70,229,0.1), transparent);
  color: var(--accent);
  font-weight: 500;
}
.sidebar-item .si-icon { font-size:16px; }
.sidebar-item .si-badge {
  margin-left:auto;
  background: var(--accent3);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
}
.sidebar-item .si-new {
  margin-left:auto;
  background: rgba(79,70,229,0.15);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
}

/* MAIN CONTENT */
.main {
  overflow-y: auto;
  background: var(--bg);
  position: relative;
}

/* TOP BAR */
.topbar {
  position: sticky; top:0; z-index: 5;
  background: rgba(240,241,246,0.88);
  backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 60px;
  display: flex; align-items: center; gap: 16px;
}
.topbar-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  flex:1;
  color: var(--text);
}
.search-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  width: 260px;
  font-size: 14px;
  color: var(--text2);
  cursor: text;
  transition: border-color 0.2s;
}
.search-bar:hover { border-color: var(--border2); }
.topbar-action {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s;
}
.topbar-action:hover { background: var(--surface2); }

/* PAGE CONTENT AREAS */
.page { display:none; padding: clamp(18px, 2.2vw, 32px); max-width: 1280px; margin: 0 auto; width: 100%; }
.page.active { display: block; animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0);   }
}
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.97); }
  to   { opacity:1; transform:scale(1);    }
}

/* ── SECTION HEADERS ── */
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
}
.section-header h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.5px;
}
.section-header p {
  font-size: 14px;
  color: var(--text2);
  margin-top: 4px;
}
.see-all {
  font-size: 13px;
  color: var(--accent2);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.see-all:hover { border-color: var(--accent2); }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.card:hover {
  border-color: var(--border2);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* ══════════════════════════════════════
   HOME PAGE
══════════════════════════════════════ */
.hero-banner {
  background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(124,58,237,0.1));
  border: 1px solid rgba(79,70,229,0.2);
  border-radius: 20px;
  padding: 36px 40px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.hero-banner::before {
  content: '';
  position: absolute; right: -60px; top: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(79,70,229,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(79,70,229,0.1);
  border: 1px solid rgba(79,70,229,0.2);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 16px;
}
.hero-banner h1 {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.hero-banner h1 span {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-banner p {
  font-size: 15px;
  color: var(--text2);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 24px;
}
.hero-stats {
  display: flex; gap: 32px;
}
.hero-stat-num {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--text);
}
.hero-stat-label {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

.updates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.update-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.update-card:hover { border-color: var(--border2); transform: translateY(-3px); box-shadow: var(--shadow); }
.update-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tag-new    { background: rgba(79,70,229,0.08);  color: var(--accent);  border: 1px solid rgba(79,70,229,0.15); }
.tag-company { background: rgba(124,58,237,0.08); color: var(--accent2); border: 1px solid rgba(124,58,237,0.15); }
.tag-feature { background: rgba(167,139,250,0.10); color: var(--accent3); border: 1px solid rgba(167,139,250,0.18); }
.tag-coming { background: rgba(251,146,60,0.12); color: var(--accent4); }
.update-card h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.3;
}
.update-card p { font-size: 13px; color: var(--text2); line-height: 1.6; }
.update-date { font-size: 12px; color: var(--text3); margin-top: 16px; }

.transparency-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
}
.tb-icon {
  width: 48px; height: 48px;
  background: rgba(79,70,229,0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.tb-content h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.tb-content p { font-size: 13px; color: var(--text2); line-height: 1.6; }

/* ══════════════════════════════════════
   LEARNING CATALOG
══════════════════════════════════════ */
.catalog-filters {
  display: flex; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex; align-items: center; gap: 6px;
}
.filter-chip:hover { border-color: var(--border2); color: var(--text); }
.filter-chip.active {
  background: rgba(79,70,229,0.1);
  border-color: rgba(79,70,229,0.28);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79,70,229,0.12);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.course-card:hover { border-color: var(--border2); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(79,70,229,0.15), 0 4px 12px rgba(0,0,0,0.08); }
.course-thumb {
  height: 140px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
}
.course-thumb-1 { background: linear-gradient(135deg, #1a2744, #1a3a2a); }
.course-thumb-2 { background: linear-gradient(135deg, #2a1a44, #1a1a44); }
.course-thumb-3 { background: linear-gradient(135deg, #44241a, #441a1a); }
.course-thumb-4 { background: linear-gradient(135deg, #1a3a3a, #1a2a44); }
.course-thumb-5 { background: linear-gradient(135deg, #3a2a1a, #2a1a44); }
.course-thumb-6 { background: linear-gradient(135deg, #1a441a, #1a2a44); }
.course-thumb-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
}
.course-body { padding: 20px; }
.course-body h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  line-height: 1.3;
}
.course-body p { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 16px; }
.course-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.course-tag {
  padding: 3px 9px;
  background: var(--surface2);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text2);
  font-family: 'JetBrains Mono', monospace;
}
.course-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.course-rating { display: flex; align-items: center; gap: 4px; color: #fbbf24; }
.enroll-btn {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(79,70,229,0.1);
  border: 1px solid rgba(79,70,229,0.2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.enroll-btn:hover { background: rgba(79,70,229,0.2); }

.learning-styles-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.ls-badge {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.ls-sync { background: rgba(79,70,229,0.08); color: var(--accent); border: 1px solid rgba(79,70,229,0.15); }
.ls-async { background: rgba(129,140,248,0.08); color: var(--accent2); border: 1px solid rgba(129,140,248,0.15); }
.ls-ai { background: rgba(251,146,60,0.08); color: var(--accent4); border: 1px solid rgba(251,146,60,0.15); }
.ls-game { background: rgba(244,114,182,0.08); color: var(--accent3); border: 1px solid rgba(244,114,182,0.15); }
.ls-micro { background: rgba(79,70,229,0.08); color: var(--accent); border: 1px solid rgba(79,70,229,0.15); }
.ls-vr { background: rgba(129,140,248,0.08); color: var(--accent2); border: 1px solid rgba(129,140,248,0.15); }
.ls-blend { background: rgba(251,146,60,0.08); color: var(--accent4); border: 1px solid rgba(251,146,60,0.15); }
.ls-mooc { background: rgba(244,114,182,0.08); color: var(--accent3); border: 1px solid rgba(244,114,182,0.15); }

/* ══════════════════════════════════════
   TASKS PAGE
══════════════════════════════════════ */
.tasks-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.stat-card-num {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card-label { font-size: 13px; color: var(--text2); }
.stat-accent  { background: linear-gradient(135deg,var(--accent),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-accent2 { background: linear-gradient(135deg,var(--accent2),var(--accent3)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-accent3 { color: var(--accent3); }
.stat-accent4 { color: var(--accent4); }

.tasks-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.kanban-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.kanban-col-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.kanban-col-title {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.kanban-count {
  width:20px; height:20px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.kc-todo { background: rgba(129,140,248,0.15); color: var(--accent2); }
.kc-progress { background: rgba(251,146,60,0.15); color: var(--accent4); }
.kc-done { background: rgba(79,70,229,0.15); color: var(--accent); }

.kanban-task {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: grab;
  transition: border-color 0.15s;
}
.kanban-task:hover { border-color: var(--border2); }
.kanban-task-title { font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.kanban-task-meta { display: flex; align-items: center; gap: 6px; }
.task-due { font-size: 11px; color: var(--text3); margin-left: auto; }
.task-priority {
  padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 600;
}
.pri-high { background: rgba(244,114,182,0.1); color: var(--accent3); }
.pri-med { background: rgba(251,146,60,0.1); color: var(--accent4); }
.pri-low { background: rgba(79,70,229,0.1); color: var(--accent); }
.add-task-btn {
  width: 100%; padding: 8px;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  background: transparent;
  color: var(--text3);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
}
.add-task-btn:hover { border-color: var(--accent2); color: var(--accent2); }

.achievements-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.achievements-panel h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 16px;
}
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.badge-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}
.badge-item:hover { border-color: var(--border2); }
.badge-icon { font-size: 28px; margin-bottom: 8px; }
.badge-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.badge-desc { font-size: 11px; color: var(--text3); }
.badge-item.locked { opacity: 0.4; filter: grayscale(1); }

.notif-list { margin-top: 16px; }
.notif-item {
  display: flex; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px;
}
.nd-accent { background: var(--accent); }
.nd-accent2 { background: var(--accent2); }
.nd-accent3 { background: var(--accent3); }
.notif-text { font-size: 13px; line-height: 1.5; }
.notif-time { font-size: 11px; color: var(--text3); margin-top:3px; }

/* ══════════════════════════════════════
   LEARNING PORTFOLIO
══════════════════════════════════════ */
.portfolio-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  margin-bottom: 28px;
}
.portfolio-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.portfolio-summary h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 20px;
}
.chart-container {
  display: flex; align-items: center; gap: 28px;
}
.pie-chart {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) 0deg 252deg,
    var(--accent2) 252deg 316deg,
    var(--accent3) 316deg 331deg,
    var(--surface2) 331deg 360deg
  );
  position: relative;
  flex-shrink: 0;
}
.pie-center {
  position: absolute; inset: 20px;
  background: var(--surface);
  border-radius: 50%;
  display: flex; flex-direction:column; align-items:center; justify-content:center;
}
.pie-pct {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.pie-label { font-size: 10px; color: var(--text3); }
.chart-legend { flex:1; }
.legend-item {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.legend-label { font-size: 13px; color: var(--text2); flex:1; }
.legend-val { font-size: 13px; font-weight: 600; }

.certs-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.certs-panel h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 16px;
}
.cert-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.cert-item:hover { border-color: var(--border2); }
.cert-icon {
  width:40px; height:40px; border-radius:10px;
  display: flex; align-items:center; justify-content:center;
  font-size: 20px;
  flex-shrink: 0;
}
.ci-gold { background: rgba(251,191,36,0.12); }
.ci-silver { background: rgba(148,163,184,0.12); }
.ci-bronze { background: rgba(180,83,9,0.12); }
.cert-name { font-size: 14px; font-weight: 500; }
.cert-date { font-size: 12px; color: var(--text3); margin-top: 2px; }
.cert-status {
  margin-left: auto; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 6px;
}
.cs-done { background: rgba(79,70,229,0.1); color: var(--accent); }
.cs-prog { background: rgba(251,146,60,0.1); color: var(--accent4); }

.portfolio-courses {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.portfolio-courses h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}
.portfolio-course-row {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.portfolio-course-row:last-child { border-bottom: none; }
.pcr-icon { font-size: 24px; }
.pcr-info { flex:1; }
.pcr-name { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.progress-bar-wrap {
  height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent3));
  background-size: 200% 100%;
  transition: width 0.9s cubic-bezier(.16,1,.3,1);
  animation: progressShimmer 3s linear infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.pcr-pct { font-size: 13px; color: var(--text2); font-weight: 500; min-width:36px; text-align:right; }

/* ══════════════════════════════════════
   NETWORK PAGE
══════════════════════════════════════ */
.network-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 28px;
}
.net-tab {
  padding: 8px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text2);
  border: none; background: transparent;
  font-family: 'DM Sans', sans-serif;
}
.net-tab.active { background: var(--surface2); color: var(--text); }

.post-composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}
.post-composer-top {
  display: flex; gap: 14px; margin-bottom: 14px;
}
.composer-avatar {
  width: 38px; height:38px; border-radius:50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  display: flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}
.composer-input {
  flex:1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  resize: none;
  line-height: 1.5;
  transition: border-color 0.2s;
}
.composer-input:focus { border-color: var(--accent2); }
.composer-actions {
  display: flex; align-items: center; gap: 10px;
}
.composer-action-btn {
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
  display: flex; align-items:center; gap: 6px;
}
.composer-action-btn:hover { border-color: var(--border2); color: var(--text); }
.post-btn {
  margin-left: auto;
  padding: 7px 18px;
  border-radius: 8px;
  background: var(--accent2);
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: opacity 0.15s;
}
.post-btn:hover { opacity: 0.85; }

.feed-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  transition: border-color 0.15s;
}
.feed-post:hover { border-color: var(--border2); }
.post-author {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.author-avatar {
  width:42px; height:42px; border-radius:50%;
  display: flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 15px;
  flex-shrink:0;
}
.av1 { background: linear-gradient(135deg, #4f46e5, #7c3aed); color:#ffffff; }
.av2 { background: linear-gradient(135deg, #818cf8, #a78bfa); color:white; }
.av3 { background: linear-gradient(135deg, #f472b6, #fb7185); color:white; }
.av4 { background: linear-gradient(135deg, #fb923c, #fbbf24); color:white; }
.author-name { font-weight: 600; font-size: 14px; }
.author-title { font-size: 12px; color: var(--text3); margin-top: 1px; }
.post-time { margin-left:auto; font-size: 12px; color: var(--text3); }
.post-content { font-size: 14px; line-height: 1.7; color: var(--text2); margin-bottom: 16px; }
.post-content strong { color: var(--text); }
.post-actions {
  display: flex; gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.post-action {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  color: var(--text3);
  cursor: pointer;
  transition: color 0.15s;
}
.post-action:hover { color: var(--accent2); }

/* ══════════════════════════════════════
   COMPANIES PAGE
══════════════════════════════════════ */
.company-search {
  display: flex; gap: 12px; margin-bottom: 28px;
}
.co-search-input {
  flex:1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.co-search-input:focus { border-color: var(--accent); }
.register-btn {
  padding: 12px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Syne', sans-serif;
  transition: opacity 0.15s;
}
.register-btn:hover { opacity: 0.85; }

.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.company-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.company-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.company-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.company-logo {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items:center; justify-content:center;
  font-size: 24px;
  flex-shrink: 0;
}
.cl1 { background: rgba(79,70,229,0.1); }
.cl2 { background: rgba(129,140,248,0.1); }
.cl3 { background: rgba(244,114,182,0.1); }
.cl4 { background: rgba(251,146,60,0.1); }
.company-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 17px; }
.company-type { font-size: 12px; color: var(--text3); margin-top: 2px; }
.company-verified {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 12px;
  color: var(--accent);
  background: rgba(79,70,229,0.08);
  padding: 4px 10px;
  border-radius: 6px;
}
.company-desc { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 16px; }
.company-stats { display: flex; gap: 20px; }
.co-stat { text-align: center; }
.co-stat-num { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 18px; }
.co-stat-label { font-size: 11px; color: var(--text3); }
.star-rating { display: flex; gap: 3px; color: #fbbf24; font-size: 14px; margin-top: 10px; }

/* ══════════════════════════════════════
   CONVERSATION PIT
══════════════════════════════════════ */
.pit-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
}
.pit-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pit-sidebar-header {
  padding: 16px 18px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 15px;
}
.pit-room {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.pit-room:hover { background: var(--surface2); }
.pit-room.active { background: rgba(129,140,248,0.1); color: var(--accent2); }
.pit-room-icon { font-size: 18px; }
.pit-room-count { margin-left:auto; font-size: 11px; color: var(--text3); }

.pit-main {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  max-height: 680px;
}
.pit-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.pit-header-title {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.pit-header-sub { font-size: 12px; color: var(--text3); }
.online-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; margin-left:auto; }
.online-count { font-size: 12px; color: var(--text3); }

.pit-feed { flex:1; overflow-y:auto; padding: 20px; }
.pit-post {
  display: flex; gap: 12px;
  margin-bottom: 20px;
  animation: fadeIn 0.3s ease;
}
.pit-avatar {
  width:36px; height:36px; border-radius:50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.pit-bubble {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-top-left-radius: 4px;
  padding: 12px 16px;
  flex:1;
}
.pit-author { font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.pit-text { font-size: 13px; color: var(--text2); line-height: 1.6; }
.pit-reactions { display: flex; gap: 6px; margin-top: 8px; }
.pit-react {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid var(--border);
}
.pit-react:hover { background: var(--surface); }

.pit-composer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px;
}
.pit-input {
  flex:1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.pit-input:focus { border-color: var(--accent2); }
.pit-send {
  width:40px; height:40px;
  border-radius: 10px;
  background: var(--accent2);
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: opacity 0.15s;
  display: flex; align-items:center; justify-content:center;
}
.pit-send:hover { opacity:0.85; }

/* ══════════════════════════════════════
   AI LEARN PAGE
══════════════════════════════════════ */
.ai-learn-hero {
  background: linear-gradient(135deg, rgba(251,146,60,0.08), rgba(129,140,248,0.08));
  border: 1px solid rgba(251,146,60,0.15);
  border-radius: 20px;
  padding: 32px 36px;
  margin-bottom: 28px;
  display: flex; align-items: center; gap: 32px;
}
.ai-hero-icon {
  font-size: 56px;
  flex-shrink: 0;
}
.ai-hero-text h2 {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}
.ai-hero-text p { font-size: 14px; color: var(--text2); line-height: 1.7; max-width: 500px; }
.ai-start-btn {
  margin-left: auto;
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent4), #fbbf24);
  border: none;
  color: #ffffff;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.ai-start-btn:hover { opacity:0.85; }

.ai-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.ai-mode-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s;
}
.ai-mode-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.ai-mode-icon { font-size: 32px; margin-bottom: 14px; }
.ai-mode-name {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
}
.ai-mode-desc { font-size: 13px; color: var(--text2); line-height: 1.6; }
.ai-mode-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 12px;
  background: rgba(251,146,60,0.1);
  color: var(--accent4);
}

.micro-session {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.micro-session h3 {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 6px;
}
.micro-session p { font-size: 13px; color: var(--text2); margin-bottom: 24px; }
.micro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.micro-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.micro-card:hover { border-color: var(--accent4); transform: translateY(-2px); }
.mc-icon { font-size: 28px; margin-bottom: 10px; }
.mc-title { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.mc-duration {
  font-size: 11px;
  color: var(--text3);
  font-family: 'JetBrains Mono', monospace;
}
.mc-bar {
  height: 3px;
  background: var(--surface2);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}
.mc-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent4), #fbbf24);
  border-radius: 2px;
}

/* ══════════════════════════════════════
   FRIENDS / MESSAGES (simplified)
══════════════════════════════════════ */
.friends-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.friends-card, .msg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fc-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.fc-title {
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.fc-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(79,70,229,0.1);
  border: 1px solid rgba(79,70,229,0.2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.friend-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.friend-row:hover { background: var(--surface2); }
.friend-row:last-child { border-bottom: none; }
.fr-avatar {
  width:40px; height:40px; border-radius:50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 15px; font-weight: 700;
  flex-shrink: 0;
  position: relative;
}
.fr-online {
  position: absolute; bottom:1px; right:1px;
  width:10px; height:10px; border-radius:50%;
  background: #22c55e;
  border: 2px solid var(--surface);
}
.fr-name { font-size: 14px; font-weight: 500; }
.fr-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.fr-action {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
}

.msg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.msg-row:hover { background: var(--surface2); }
.msg-row.unread { background: rgba(129,140,248,0.04); }
.msg-preview { flex:1; overflow: hidden; }
.msg-name { font-size: 14px; font-weight: 500; }
.msg-text { font-size: 12px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.msg-time { font-size: 11px; color: var(--text3); flex-shrink:0; }
.msg-unread-dot { width:8px; height:8px; border-radius:50%; background: var(--accent2); flex-shrink:0; }

/* ══════════════════════════════════════
   RESPONSIVE + UTILITIES
══════════════════════════════════════ */
.btn-primary {
  padding: 11px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s var(--ease);
  box-shadow: 0 2px 8px rgba(79,70,229,0.25);
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(79,70,229,0.35);
}
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(79,70,229,0.2); }

.divider { height:1px; background: var(--border); margin: 24px 0; }
.mono { font-family: 'JetBrains Mono', monospace; }

.tooltip {
  position: absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index:100;
}
.rail-icon { position:relative; }
.rail-icon:hover .tooltip { opacity:1; }

/* ══════════════════════════════════════
   MOBILE RESPONSIVE — Full mobile support
══════════════════════════════════════ */

/* Login card — smaller padding on mobile */
@media (max-width: 480px) {
  .login-card {
    padding: 28px 20px !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .login-modal {
    padding: 12px !important;
    align-items: flex-start !important;
  }
  .login-logo-text { font-size: 18px !important; }
  .login-card h1 { font-size: 22px !important; }
  .login-modes { gap: 6px !important; }
  .mode-pill { font-size: 11px !important; padding: 6px !important; }
}

/* ── APP SHELL on mobile ── */
@media (max-width: 768px) {
  /* Core app sizing on mobile */
  #app { height: 100dvh; }

  /* Hero */
  .hero-banner { padding: 20px 18px !important; border-radius: 14px !important; margin-bottom: 20px !important; }
  .hero-banner h1 { font-size: 22px !important; }
  .hero-stats { gap: 16px !important; flex-wrap: wrap !important; }
  .hero-stat-num { font-size: 20px !important; }

  /* Grid overrides */
  .updates-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .courses-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .ai-modes-grid { grid-template-columns: 1fr !important; }
  .micro-cards { grid-template-columns: 1fr 1fr !important; }
  .tasks-top { grid-template-columns: 1fr 1fr !important; }
  .kanban-board { grid-template-columns: 1fr !important; }
  .portfolio-header { grid-template-columns: 1fr !important; }
  .friends-layout { grid-template-columns: 1fr !important; }
  .companies-grid { grid-template-columns: 1fr !important; }
  .pit-layout { grid-template-columns: 1fr !important; }
  .pit-sidebar { display: none; }
  .tasks-layout { grid-template-columns: 1fr !important; }
  .chart-container { flex-direction: column !important; }

  /* Course viewer on mobile */
  #course-viewer-modal { flex-direction: column !important; }
  #course-viewer-modal > div:nth-child(2) > div:first-child {
    width: 100% !important;
    max-height: 160px;
    overflow-y: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* Login */
  .login-card { width: 100% !important; padding: 28px 18px !important; border-radius: 16px !important; }

  /* Other */
  .transparency-banner { flex-direction: column !important; gap: 12px !important; }
  .network-tabs { width: 100% !important; }
  .composer-actions { flex-wrap: wrap !important; }
  .catalog-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 8px !important;
  }
  .catalog-filters::-webkit-scrollbar { height: 0; }
  .filter-chip { flex-shrink: 0 !important; }
}

/* ── Landing page mobile ── */
@media (max-width: 480px) {
  .landing-hero h1 { font-size: 28px !important; }
  .landing-stats { grid-template-columns: 1fr 1fr !important; }
  .preview-list { grid-template-columns: 1fr !important; }
  .landing-actions { flex-direction: column !important; }
  .landing-actions .btn-ghost,
  .landing-actions .btn-primary { width: 100% !important; justify-content: center; }
  .tour-mini-grid { grid-template-columns: 1fr !important; }
}

/* ── Desktop: hide mobile nav ── */
@media (min-width: 769px) {
  .mobile-nav { display: none !important; }
}

/* Safe area for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(56px + env(safe-area-inset-bottom));
  }
  .main { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

@keyframes shimmer{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}
#segment-body h3{font-family:Syne,sans-serif;font-size:17px;font-weight:700;margin:20px 0 10px;color:var(--accent)}
#segment-body p{margin-bottom:16px}
#segment-body ul,#segment-body ol{padding-left:22px;margin-bottom:16px}
#segment-body li{margin-bottom:6px}
#segment-body table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:13px}
#segment-body th{background:var(--surface2);padding:8px 10px;text-align:left;font-weight:600;border:1px solid var(--border)}
#segment-body td{padding:8px 10px;border:1px solid var(--border);vertical-align:top}
#segment-body blockquote{background:rgba(79,70,229,0.06);border-left:3px solid var(--accent);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0;font-style:italic}
#segment-body strong{color:var(--text);font-weight:600}
#viewer-content-body{flex:1;overflow-y:auto;padding:32px}
@media(max-width:768px){#viewer-content-body{padding:20px 16px}}

/* ── Media upload in composers ──────────────────────────────────── */
.media-upload-btn {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; gap: 4px;
  font-family: 'DM Sans', sans-serif;
}
.media-upload-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.media-preview-wrap {
  position: relative;
  display: inline-block;
  margin: 8px 0 4px;
}
.media-preview-img {
  max-height: 200px;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}
.media-preview-video {
  max-height: 200px;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
}
.media-preview-remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.media-upload-progress {
  font-size: 12px;
  color: var(--text3);
  margin-top: 4px;
}
.post-media-img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 10px;
  margin-top: 10px;
  display: block;
  cursor: pointer;
}
.post-media-video {
  max-width: 100%;
  max-height: 400px;
  border-radius: 10px;
  margin-top: 10px;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE UX IMPROVEMENTS
══════════════════════════════════════════════════════════════ */

/* Touch-friendly tap targets */
@media (max-width: 768px) {
  .rail-icon, .mobile-nav-btn, .btn-primary, .enroll-btn, .filter-chip {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger cards on mobile */
  .course-card { margin-bottom: 4px; }
  .course-thumb { height: 120px; }

  /* Better modal sizing */
  .login-card { padding: 32px 20px; width: 92vw; }

  /* Full-width buttons in modals */
  #edit-profile-modal .btn-primary,
  #review-modal button {
    width: 100%;
  }

  /* Pit sidebar hidden on mobile */
  .pit-layout { grid-template-columns: 1fr; }
  .pit-sidebar { display: none; }

  /* Portfolio header stacks on mobile */
  .portfolio-header { grid-template-columns: 1fr; }

  /* Tasks layout stacks */
  .tasks-layout { grid-template-columns: 1fr; }

  /* Kanban scrolls horizontally */
  .kanban-board {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-col {
    min-width: 260px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  /* Hero banner compact */
  .hero-banner { padding: 20px; }
  .hero-banner h1 { font-size: 22px; }
  .hero-stats { gap: 16px; }
  .hero-stat-num { font-size: 20px; }

  /* Network feed full width */
  .friends-layout { grid-template-columns: 1fr; }

  /* Companies grid */
  .companies-grid { grid-template-columns: 1fr; }

  /* Topbar on mobile */
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-title { font-size: 15px; }

  /* Pages padding */
  .page { padding: 12px; }

  /* Update cards */
  .updates-grid { grid-template-columns: 1fr; }

  /* AI modes grid */
  .ai-modes-grid { grid-template-columns: 1fr; }

  /* Micro cards */
  .micro-cards { grid-template-columns: repeat(2, 1fr); }

  /* Table scrolls */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Swipe gesture hint on mobile course viewer */
@media (max-width: 768px) {
  .course-viewer-nav {
    position: fixed;
    bottom: 80px;
    left: 0; right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
    z-index: 100;
  }
  .course-viewer-nav button { pointer-events: all; }
}

/* Smooth swipe animation for bottom nav */
.mobile-nav-btn {
  transition: transform 0.1s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-nav-btn:active { transform: scale(0.92); }

/* Pull to refresh hint */
@media (max-width: 768px) {
  .main::before {
    content: '';
    display: block;
    height: 0;
  }
}

/* Better focus states on mobile */
@media (max-width: 768px) {
  input:focus, textarea:focus, select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.15) !important;
  }
}

/* Search modal full screen on mobile */
@media (max-width: 600px) {
  #search-modal > div {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* Completion screen full screen on mobile */
@media (max-width: 600px) {
  #course-completion-screen > div {
    width: 96vw !important;
    padding: 32px 20px !important;
  }
}

/* Bottom sheet style modals on mobile */
@media (max-width: 600px) {
  #edit-profile-modal > div,
  #review-modal > div {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    animation: slideUpSheet 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
  }
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Leaderboard table scrolls on mobile */
@media (max-width: 600px) {
  #lb-table > div { grid-template-columns: 36px 1fr 70px; }
  #lb-table > div > div:nth-child(4),
  #lb-table > div > div:nth-child(5) { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   VISUAL POLISH PASS
══════════════════════════════════════════════════════════════ */

/* Smooth page transitions */

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Better card hover shadows */
.course-card:hover,
.update-card:hover,
.company-card:hover,
.ai-mode-card:hover {
  box-shadow: 0 12px 32px rgba(79,70,229,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

/* Notification bell animation */
.notif-bell-anim {
  animation: bellRing 0.5s ease;
}
@keyframes bellRing {
  0%,100% { transform: rotate(0); }
  20%  { transform: rotate(-20deg); }
  40%  { transform: rotate(20deg); }
  60%  { transform: rotate(-10deg); }
  80%  { transform: rotate(10deg); }
}

/* Active rail icon pulse */
.rail-icon.active::after {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

/* Better toast styling */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: toastIn 0.3s cubic-bezier(0.16,1,0.3,1);
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast-success { background: linear-gradient(135deg, #059669, #10b981); }
.toast-error   { background: linear-gradient(135deg, #dc2626, #ef4444); }
.toast-info    { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.toast-warn    { background: linear-gradient(135deg, #d97706, #f59e0b); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* Improved empty states */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text3);
}
.empty-state-icon { font-size: 52px; margin-bottom: 16px; opacity: 0.6; }
.empty-state h3 { font-family: Syne,sans-serif; font-weight: 700; font-size: 18px; color: var(--text2); margin-bottom: 8px; }
.empty-state p { font-size: 14px; line-height: 1.6; max-width: 320px; margin: 0 auto 20px; }

/* Badge/chip animations */
.hero-badge, .update-tag, .course-thumb-badge {
  transition: all 0.15s;
}

/* Smooth progress bars */
.progress-bar-fill, .tour-mini-bar-fill, .mc-fill {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Input focus glow */
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
  outline: none;
}

/* Table row hover */
tr:hover td { background: var(--surface2) !important; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent3); }

/* Better mobile bottom nav */
.mobile-nav {
  box-shadow: 0 -1px 0 var(--border), 0 -8px 20px rgba(0,0,0,0.06);
}

/* Pill-style plan badges */
.plan-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.plan-free     { background: rgba(16,185,129,0.1); color: #10b981; }
.plan-basic    { background: rgba(79,70,229,0.1);  color: var(--accent); }
.plan-pro      { background: rgba(124,58,237,0.1); color: var(--accent2); }
.plan-premium  { background: rgba(167,139,250,0.1);color: var(--accent3); }
.plan-trial    { background: rgba(245,158,11,0.1); color: var(--accent4); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
.rail-badge { animation: pulse 2s infinite; }

/* ══════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — Clean, readable, trustworthy on small screens
   Breakpoints: 480px (phones), 380px (small phones)
══════════════════════════════════════════════════════════════ */

/* ── 1. Landing page — first impression ─────────────────────── */
@media (max-width: 480px) {

  /* Reduce hero h1 significantly — was clamp(32px…) = 32px on small screens */
  .landing-hero h1 {
    font-size: 24px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.5px !important;
    background: none !important;
    -webkit-text-fill-color: var(--text) !important;
    color: var(--text) !important;
  }
  .landing-hero h1 span {
    color: var(--accent) !important;
    -webkit-text-fill-color: var(--accent) !important;
  }

  /* Hero paragraph: tighter, readable line length */
  .landing-hero p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  /* Kicker pill: tighter */
  .landing-kicker {
    font-size: 11px !important;
    padding: 4px 10px !important;
    max-width: 90vw;
    white-space: normal;
    text-align: center;
  }

  /* CTA buttons: stack vertically, full width */
  .landing-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .landing-actions .btn-primary,
  .landing-actions .btn-ghost {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 14px !important;
  }

  /* Trust line: smaller, centered */
  .landing-trust {
    font-size: 12px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
  }

  /* Stats: 2×2 grid on mobile (not 4 across) */
  .landing-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .landing-stat {
    padding: 12px 10px !important;
  }
  .landing-stat-num {
    font-size: 20px !important;
  }
  .landing-stat-label {
    font-size: 10px !important;
  }

  /* Tour preview: hide browser chrome on tiny screens */
  .tour-browser-chrome .tour-url {
    font-size: 9px !important;
    padding: 3px 6px !important;
  }

  /* Tour tabs: horizontal scroll, no wrap */
  .tour-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tour-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
  }

  /* Preview list: single column */
  .preview-list {
    grid-template-columns: 1fr !important;
  }
  .preview-item {
    font-size: 13px !important;
    padding: 12px !important;
  }

  /* Community pills: tighter */
  .community-pill {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* ── 2. App layout ─────────────────────────────────────────── */

  /* Hero banner: tighter, cleaner */
  .hero-banner {
    padding: 18px !important;
    margin-bottom: 20px !important;
    border-radius: 14px !important;
  }
  .hero-banner h1 {
    font-size: 20px !important;
    line-height: 1.28 !important;
    letter-spacing: -0.4px !important;
    margin-bottom: 10px !important;
  }
  .hero-banner p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
  }
  .hero-badge {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  .hero-stats {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
  .hero-stat-num {
    font-size: 20px !important;
  }
  .hero-stat-label {
    font-size: 11px !important;
  }

  /* Section headers: better mobile sizing */
  .section-header h2 {
    font-size: 18px !important;
    letter-spacing: -0.3px !important;
  }
  .section-header p {
    font-size: 12px !important;
  }

  /* Update cards: constrain text */
  .update-card {
    padding: 16px !important;
  }
  .update-card h3 {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .update-card p {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }
  .update-date {
    font-size: 11px !important;
  }
  .update-tag {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }

  /* Topbar: tighter */
  .topbar {
    padding: 0 10px !important;
    height: 50px !important;
  }
  .topbar-title {
    font-size: 14px !important;
  }

  /* Course cards */
  .course-card {
    border-radius: 12px !important;
  }
  .course-thumb {
    height: 110px !important;
  }
  .course-body {
    padding: 14px !important;
  }
  .course-body h3 {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
  }
  .course-body p {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  .course-meta {
    font-size: 11px !important;
    gap: 8px !important;
  }

  /* Catalog filters: scroll horizontally */
  .catalog-filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 6px !important;
  }
  .catalog-filters::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
  }

  /* Page padding */
  .page {
    padding: 12px !important;
  }

  /* Updates grid: single column on tiny screens */
  .updates-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Transparency banner */
  .transparency-banner {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .tb-content h3 { font-size: 14px !important; }
  .tb-content p  { font-size: 12px !important; }

  /* Mobile nav labels */
  .nav-label { font-size: 9px !important; }
  .nav-icon  { font-size: 18px !important; }
  .mobile-nav { height: 60px !important; }

  /* Feed posts */
  .feed-post { padding: 16px !important; }
  .author-name { font-size: 13px !important; }
  .author-title { font-size: 11px !important; }
  .post-content { font-size: 13px !important; }

  /* Companies */
  .company-card { padding: 16px !important; }
  .company-name { font-size: 15px !important; }
  .company-desc { font-size: 12px !important; }

  /* Login modal */
  .login-card {
    padding: 28px 18px !important;
    border-radius: 18px !important;
  }
  .login-card h1 { font-size: 22px !important; }
  .login-card p  { font-size: 13px !important; margin-bottom: 20px !important; }

  /* Pit chat */
  .pit-text { font-size: 13px !important; }
  .pit-author { font-size: 11px !important; }

  /* Tasks */
  .stat-card { padding: 14px !important; }
  .stat-card-num { font-size: 24px !important; }
  .kanban-task-title { font-size: 12px !important; }
}

/* ── Very small phones (375px and under, e.g. iPhone SE) ─────── */
@media (max-width: 375px) {
  .landing-hero h1 { font-size: 22px !important; }
  .hero-banner h1  { font-size: 18px !important; }
  .section-header h2 { font-size: 16px !important; }
  .mobile-nav {
    gap: 0 !important;
  }
  .mobile-nav-btn {
    min-width: 0 !important;
    flex: 1 !important;
  }
  .landing-actions .btn-primary,
  .landing-actions .btn-ghost {
    font-size: 13px !important;
    padding: 12px 16px !important;
  }
}

/* ── Anti-scam design polish ─────────────────────────────────── */
/* Remove gradient text effect on mobile (looks cheap/template-y) */
@media (max-width: 480px) {
  /* Hero h1 accent text: solid color, no gradient */
  .landing-hero h1 span,
  .hero-banner h1 span {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  /* Ensure no content overflows creating weird cut-offs */
  .landing-wrap,
  .landing-preview,
  .tour-preview {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* Cards: always full-width with consistent border radius */
  .card,
  .update-card,
  .course-card,
  .company-card,
  .cert-item,
  .ai-mode-card {
    border-radius: 12px !important;
  }

  /* Buttons: minimum 44px tap target */
  .btn-primary,
  .btn-ghost,
  .enroll-btn,
  .fc-btn {
    min-height: 40px !important;
  }

  /* Readable line length: never let text span full screen width on small screens */
  .landing-hero p,
  .hero-banner p,
  .tb-content p,
  .update-card p,
  .company-desc,
  .post-content,
  .ai-mode-desc {
    max-width: 100% !important;
    hyphens: auto !important;
  }
}