/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --accent: #0770E3;
  --accent-hover: #0558b0;
  --accent-subtle: rgba(7,112,227,0.10);

  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e6ed;
  --border-subtle: #edf0f4;

  --text: #111827;
  --text-2: #4b5563;
  --text-3: #9ca3af;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  --topbar-h: 60px;
  --sidebar-w: 320px;

  --green: #059669;
  --green-subtle: rgba(5,150,105,.12);
  --red: #DC2626;
  --red-subtle: rgba(220,38,38,.10);
  --amber: #D97706;
  --amber-subtle: rgba(217,119,6,.12);
  --purple: #7C3AED;

  --transition: 180ms ease;

  /* ── Liquid-glass system ── */
  --spring: cubic-bezier(.34, 1.4, .5, 1);
  --glass-bg: rgba(255,255,255,0.66);
  --glass-bg-2: rgba(255,255,255,0.50);
  --glass-border: rgba(255,255,255,0.6);
  --glass-hi: rgba(255,255,255,0.9);     /* top-edge highlight */
  --glass-blur: 18px;
  --glow: rgba(7,112,227,.30);
  --card-accent: var(--accent);
  /* mesh background hues (light) */
  --mesh-1: rgba(7,112,227,.10);
  --mesh-2: rgba(124,58,237,.10);
  --mesh-3: rgba(8,145,178,.10);
}

body.dark {
  --bg: #07080e;
  --surface: #141826;
  --surface-2: #1c2133;
  --border: #2a3045;
  --border-subtle: #20263a;

  --text: #f1f3f9;
  --text-2: #9ba3b8;
  --text-3: #5b6480;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow: 0 4px 16px rgba(0,0,0,.35);
  --shadow-md: 0 10px 34px rgba(0,0,0,.55);

  /* ── Liquid-glass (dark = the hero) ── */
  --glass-bg: rgba(22,27,42,0.55);
  --glass-bg-2: rgba(28,34,52,0.45);
  --glass-border: rgba(255,255,255,0.10);
  --glass-hi: rgba(255,255,255,0.14);
  --glass-blur: 22px;
  --glow: rgba(125,165,255,.28);
  --mesh-1: rgba(56,120,255,.22);
  --mesh-2: rgba(150,70,255,.18);
  --mesh-3: rgba(0,190,200,.16);
}

/* ── Font Size Scaling ──────────────────────────────────────────── */
html.font-size-small  { font-size: 12px; }
html.font-size-medium { font-size: 14px; }
html.font-size-large  { font-size: 16px; }

/* ── View Density ───────────────────────────────────────────────── */
:root {
  --density-pad: 16px;
  --density-gap: 12px;
  --density-lh: 1.6;
  --card-pad: 16px;
}
html.density-compact  { --density-pad: 10px; --density-gap: 8px;  --density-lh: 1.45; --card-pad: 10px; }
html.density-spacious { --density-pad: 22px; --density-gap: 18px; --density-lh: 1.75; --card-pad: 22px; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: var(--density-lh);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: var(--accent); text-decoration: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ── Topbar ────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), border-color var(--transition);
}

.topbar-left { flex: 0 0 auto; }

.logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; color: var(--text);
}
.logo-text { letter-spacing: -.3px; }

.topbar-nav {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; overflow: visible;
}

.nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 9px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 10px; font-weight: 500;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap; flex-shrink: 0;
}
.nav-btn svg { width: 16px; height: 16px; }
.nav-btn:hover { color: var(--accent); background: var(--accent-subtle); }
.nav-btn.active { color: var(--accent); background: var(--accent-subtle); }

.topbar-right {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
}

.current-date {
  font-size: 13px; font-weight: 500; color: var(--text-2);
  white-space: nowrap;
}

.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: background var(--transition), color var(--transition);
}
.theme-toggle:hover { background: var(--surface-2); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
body.light .icon-moon { display: none; }
body.dark .icon-sun { display: none; }

/* ── Main & Pages ──────────────────────────────────────────────── */
#app {
  margin-top: var(--topbar-h);
  padding: 24px 24px 40px;
  max-width: 1280px;
  margin-left: auto; margin-right: auto;
}

.page { display: none; }
.page.active { display: block; }

.page-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-header .page-title { flex: 1; }
.page-title {
  font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--text);
}

.back-btn {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-2); font-size: 13px; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius-xs);
  transition: background var(--transition), color var(--transition);
}
.back-btn:hover { background: var(--surface-2); color: var(--accent); }

.section-title {
  font-size: 16px; font-weight: 600; color: var(--text);
  margin-bottom: 14px;
}

/* ── Home Layout ───────────────────────────────────────────────── */
.home-layout {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-w);
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .home-layout { grid-template-columns: 1fr; }
  .sidebar { grid-row: 1; }
  .courses-section { grid-row: 2; }
}

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

.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
  position: relative; overflow: hidden;
}
.course-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.course-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-accent, var(--accent));
  opacity: .8;
}

.course-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: 12px;
}
.course-card-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.4; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.course-grade-badge {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--surface);
  background: var(--card-accent, var(--accent));
  border-radius: 6px; padding: 2px 8px;
  letter-spacing: 0.02em; line-height: 1.5;
  white-space: nowrap;
}
.course-card-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.course-meta-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  padding: 3px 9px; border-radius: 20px;
  background: var(--surface-2); color: var(--text-2);
  white-space: nowrap;
}
.course-meta-pill.pending {
  background: var(--accent-subtle); color: var(--accent);
}
.course-meta-pill.due-soon {
  background: var(--amber-subtle); color: var(--amber);
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.sidebar {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: calc(var(--topbar-h) + 24px);
}

.sidebar-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  max-height: 320px; overflow-y: auto;
}

.sidebar-title {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .6px;
  margin-bottom: 12px;
}

/* ── Agenda / Upcoming list items ──────────────────────────────── */
.agenda-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.agenda-item:last-child { border-bottom: none; }

.agenda-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 5px;
}
.agenda-dot.today { background: var(--red); }
.agenda-dot.tomorrow { background: var(--amber); }

.agenda-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  line-height: 1.4;
}
.agenda-course {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
}
.agenda-when {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--red); white-space: nowrap; padding-left: 8px;
}

.upcoming-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}
.upcoming-item:last-child { border-bottom: none; }
.upcoming-title { flex: 1; font-weight: 500; color: var(--text); }
.upcoming-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); white-space: nowrap;
}
.upcoming-badge.urgent { background: var(--red-subtle); color: var(--red); }
.upcoming-badge.warn { background: var(--amber-subtle); color: var(--amber); }

/* ── Empty / Skeleton states ───────────────────────────────────── */
.empty-state {
  color: var(--text-3); font-size: 13px; text-align: center; padding: 16px 0;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card {
  height: 120px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.tab-bar {
  display: flex; gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.tab-btn {
  padding: 8px 16px; font-size: 14px; font-weight: 500;
  color: var(--text-2); border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover { color: var(--accent); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Assignments tab ───────────────────────────────────────────── */
.assignment-list { display: flex; flex-direction: column; gap: 8px; }

.assignment-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}
.assignment-item:hover { border-color: var(--accent); }

.assign-status-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.assign-status-dot.submitted, .assign-status-dot.graded { background: var(--green); }
.assign-status-dot.missing { background: var(--red); }
.assign-status-dot.upcoming, .assign-status-dot.todo { background: var(--accent); }

.assign-title {
  flex: 1; font-size: 14px; font-weight: 500; color: var(--text);
}
.assign-title a { color: inherit; }
.assign-title a:hover { color: var(--accent); }

.assign-meta {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; font-size: 12px;
}
.assign-pts {
  color: var(--text-3); font-weight: 500;
}
.assign-due {
  font-weight: 500; padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.assign-due.past { background: var(--surface-2); color: var(--text-3); }
.assign-due.today { background: var(--red-subtle); color: var(--red); }
.assign-due.soon { background: var(--amber-subtle); color: var(--amber); }
.assign-due.future { background: var(--surface-2); color: var(--text-2); }

.assign-status-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .4px;
}
.assign-status-tag.submitted, .assign-status-tag.graded {
  background: var(--green-subtle); color: var(--green);
}
.assign-status-tag.missing { background: var(--red-subtle); color: var(--red); }
.assign-status-tag.upcoming, .assign-status-tag.todo {
  background: var(--accent-subtle); color: var(--accent);
}

/* ── Announcements tab ─────────────────────────────────────────── */
.announcement-list { display: flex; flex-direction: column; gap: 10px; }

.announcement-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.announcement-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer;
}
.announcement-header:hover { background: var(--surface-2); }
.announcement-title {
  font-size: 14px; font-weight: 500; color: var(--text); flex: 1;
}
.announcement-date { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.announcement-chevron {
  flex-shrink: 0; color: var(--text-3);
  transition: transform var(--transition);
}
.announcement-item.open .announcement-chevron { transform: rotate(180deg); }
.announcement-body {
  display: none; padding: 0 16px 14px;
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  border-top: 1px solid var(--border-subtle);
}
.announcement-item.open .announcement-body { display: block; }

/* ── Syllabus tab ──────────────────────────────────────────────── */

/* Outer wrapper — gives max readable width and spacing */
.syl-wrap {
  max-width: 780px;
  display: flex; flex-direction: column; gap: 0;
  font-size: 14px; color: var(--text); line-height: 1.75;
}

/* ── Meta card (preamble: course code, instructor, schedule) ─── */
.syl-meta {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 28px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.syl-meta-row {
  font-size: 13px; color: var(--text-2);
}
.syl-meta-title {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.syl-meta-schedule {
  font-size: 13px; color: var(--accent); font-weight: 500;
}
.syl-meta-contact {
  font-size: 13px; color: var(--text-2);
}
.syl-meta-inforow {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.syl-meta-chip {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 2px 10px;
  font-size: 12px; color: var(--text-2);
}

/* ── Section headings ────────────────────────────────────────── */
.syl-h3 {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.syl-h3:first-child { margin-top: 4px; }

.syl-h4 {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin: 18px 0 6px;
}

/* ── Body text ───────────────────────────────────────────────── */
.syl-p {
  margin: 0 0 10px;
  color: var(--text-2);
  max-width: 72ch;
}
.syl-p:last-child { margin-bottom: 0; }

/* ── Bullet lists ────────────────────────────────────────────── */
.syl-list {
  margin: 0 0 12px 0;
  padding-left: 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.syl-list li {
  color: var(--text-2);
  padding-left: 4px;
}

/* ── Grade scale ─────────────────────────────────────────────── */
.syl-grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px;
  margin: 0 0 12px;
}
.syl-grade-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* ── Schedule blocks ─────────────────────────────────────────── */
.syl-schedule-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.syl-schedule-row {
  font-size: 13px; color: var(--text-2);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.syl-schedule-row:last-child { border-bottom: none; }

/* ── Fallback (pages) notice ─────────────────────────────────── */
.syl-fallback-notice {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px; color: var(--text-3);
  margin-bottom: 24px;
}
.syl-fallback .syl-section { margin-bottom: 28px; }
.syl-fallback .syl-h3 { margin-top: 0; }
.syl-fallback .syl-p { white-space: pre-wrap; word-break: break-word; }

/* ── Files tab ─────────────────────────────────────────────────── */
.files-list { display: flex; flex-direction: column; gap: 8px; }
.file-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.file-icon {
  width: 32px; height: 32px; border-radius: var(--radius-xs);
  background: var(--accent-subtle); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.file-name { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }
.file-size { font-size: 12px; color: var(--text-3); }

/* ── Todos page ────────────────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
}
.filter-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border);
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.course-filter-bar {
  display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
}

.todo-list { display: flex; flex-direction: column; gap: 8px; }

.todo-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), opacity var(--transition);
}
.todo-item.done { opacity: .55; }
.todo-item:hover { border-color: var(--accent); }

.todo-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition);
}
.todo-check:hover { border-color: var(--accent); background: var(--accent-subtle); }
.todo-item.done .todo-check {
  background: var(--green); border-color: var(--green);
}
.todo-check-icon { display: none; }
.todo-item.done .todo-check-icon { display: block; }

.todo-body { flex: 1; min-width: 0; }
.todo-title {
  font-size: 14px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.todo-item.done .todo-title { text-decoration: line-through; color: var(--text-3); }
.todo-course {
  font-size: 11px; color: var(--text-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.todo-meta {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

.priority-dot {
  width: 8px; height: 8px; border-radius: 50;
}
.priority-dot.high { background: var(--red); }
.priority-dot.medium { background: var(--amber); }
.priority-dot.low { background: var(--green); }

.todo-due {
  font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}
.todo-due.today { background: var(--red-subtle); color: var(--red); }
.todo-due.soon { background: var(--amber-subtle); color: var(--amber); }
.todo-due.future { background: var(--surface-2); color: var(--text-2); }
.todo-due.past { background: var(--red-subtle); color: var(--red); }
.todo-due.none { display: none; }

/* ── Todo sections ─────────────────────────────────────────────── */
.todo-section { margin-bottom: 4px; }

.todo-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 6px;
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.6px;
  user-select: none;
}
.active-section .todo-section-header    { color: var(--text-2); }
.late-section .todo-section-header      { color: var(--red); }
.completed-section .todo-section-header { color: var(--text-3); }

.completed-section {
  margin-top: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.todo-section-items  { display: flex; flex-direction: column; gap: 6px; }

.late-section .todo-item { border-left: 3px solid var(--red); }

.todo-complete-btn {
  font-size: 11px; font-weight: 500;
  color: var(--text-3);
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.todo-complete-btn:hover { color: var(--green); border-color: var(--green); }

/* ── Todo status chips ─────────────────────────────────────────── */
.todo-status-chip {
  font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 10px;
  white-space: nowrap;
}
.todo-status-chip.graded    { background: var(--green-subtle);  color: var(--green); }
.todo-status-chip.submitted { background: var(--accent-subtle); color: var(--accent); }
.todo-status-chip.missing   { background: var(--red-subtle);    color: var(--red); }
.todo-status-chip.late      { background: var(--amber-subtle);  color: var(--amber); }

/* ── Calendar ──────────────────────────────────────────────────── */
.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 820px) {
  .calendar-layout { grid-template-columns: 1fr; }
}

.calendar-grid-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cal-weekdays span {
  text-align: center; padding: 8px 0;
  font-size: 11px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .5px;
}

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}

.cal-day {
  min-height: 72px; padding: 6px 8px;
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background var(--transition);
  position: relative;
}
.cal-day:hover { background: var(--surface-2); }
.cal-day.selected { background: var(--accent-subtle); }
.cal-day.other-month .cal-day-num { color: var(--text-3); }
.cal-day.today .cal-day-num {
  background: var(--accent); color: #fff;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

.cal-day-num {
  font-size: 13px; font-weight: 500; color: var(--text);
  margin-bottom: 4px; line-height: 1;
}

.cal-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.cal-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.cal-dot.past { background: var(--text-3); }
.cal-dot.submitted, .cal-dot.graded { background: var(--green); }
.cal-dot.missing { background: var(--red); }

.cal-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  min-height: 200px;
  position: sticky; top: calc(var(--topbar-h) + 24px);
}
.cal-panel-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.cal-event {
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: flex-start; gap: 8px;
}
.cal-event:last-child { border-bottom: none; }
.cal-event-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0; margin-top: 4px;
}
.cal-event { transition: background 0.1s; border-radius: 4px; padding-left: 4px; margin-left: -4px; }
.cal-event:hover { background: var(--surface-2); }
.cal-event-title { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; }
.cal-event-course { font-size: 11px; color: var(--text-3); }

/* ── Calendar Popup ─────────────────────────────────────────────── */
.cal-popup {
  display: none;
  position: fixed; z-index: 9999;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 14px 16px 12px;
  flex-direction: column; gap: 6px;
}
.cal-popup.open { display: flex; }
.cal-popup-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 13px; padding: 2px 4px;
  line-height: 1;
}
.cal-popup-close:hover { color: var(--text); }
.cal-popup-title { font-size: 14px; font-weight: 600; color: var(--text); padding-right: 20px; }
.cal-popup-course { font-size: 12px; color: var(--accent); font-weight: 500; }
.cal-popup-meta { font-size: 12px; color: var(--text-2); }
.cal-popup-desc {
  font-size: 12px; color: var(--text-2); line-height: 1.5;
  max-height: 80px; overflow: hidden;
  border-top: 1px solid var(--border-subtle); padding-top: 6px; margin-top: 2px;
}
.cal-popup-nav {
  margin-top: 4px; align-self: flex-start;
  background: var(--accent); color: #fff;
  border: none; border-radius: 6px;
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: opacity 0.15s;
}
.cal-popup-nav:hover { opacity: 0.85; }

/* ── Synced Data Panel ──────────────────────────────────────────── */
.synced-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.22);
  z-index: 8000;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.synced-overlay.open { opacity: 1; pointer-events: all; }

.synced-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--bg);
  box-shadow: -6px 0 32px rgba(0,0,0,.14);
  z-index: 8001;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.synced-panel.open { transform: translateX(0); }

.synced-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.synced-panel-title { font-size: 16px; font-weight: 700; color: var(--text); }
.synced-panel-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 18px; line-height: 1;
  padding: 4px 6px; border-radius: 4px;
  transition: background .15s, color .15s;
}
.synced-panel-close:hover { background: var(--surface-2); color: var(--text); }

.synced-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0; }
.synced-loading { padding: 32px; text-align: center; color: var(--text-3); font-size: 14px; }

.synced-panel-footer {
  flex-shrink: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* Course sections */
.sp-course {
  margin: 0 14px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--course-color, var(--accent));
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  overflow: hidden;
}
.sp-course-header { padding: 11px 14px 10px; }
.sp-course-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }

/* Module rows */
.sp-module { border-top: 1px solid var(--border-subtle); }
.sp-module-trigger {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 8px 14px;
  background: none; border: none; text-align: left; cursor: default;
  transition: background .1s;
}
.sp-module:has(.sp-module-chevron) .sp-module-trigger { cursor: pointer; }
.sp-module-trigger:hover { background: var(--surface-2); }

.sp-status-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.sp-status-dot.green  { background: var(--green); }
.sp-status-dot.yellow { background: var(--amber); }
.sp-status-dot.red    { background: var(--red); }

.sp-module-label { font-size: 12px; font-weight: 500; color: var(--text-2); flex: 1; }
.sp-module-meta  { font-size: 11px; color: var(--text-3); }
.sp-module-ts    { font-size: 10px; color: var(--text-3); margin-left: 4px; }
.sp-module-chevron {
  font-size: 9px; color: var(--text-3); flex-shrink: 0;
  transition: transform .2s ease;
}
.sp-module.open .sp-module-chevron { transform: rotate(90deg); }

.sp-module-content {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease-out;
}

/* File list */
.sp-file-list { padding: 2px 12px 8px 28px; }
.sp-file-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 2px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background .1s; border-radius: 3px;
}
.sp-file-item:last-child { border-bottom: none; }
.sp-file-item:hover .sp-file-name { color: var(--accent); }
.sp-file-ext {
  font-size: 9px; font-weight: 700;
  background: var(--text-3); color: #fff;
  border-radius: 3px; padding: 1px 4px; flex-shrink: 0;
}
.sp-file-name {
  flex: 1; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .1s;
}
.sp-file-size { font-size: 10px; color: var(--text-3); flex-shrink: 0; }
.sp-file-dl   { font-size: 10px; color: var(--green); flex-shrink: 0; font-weight: 600; }

/* Footer */
.sp-totals {
  display: flex; gap: 20px; margin-bottom: 14px;
}
.sp-total-item { font-size: 12px; color: var(--text-2); }
.sp-total-num  { display: block; font-size: 22px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.sp-sync-all   { width: 100%; justify-content: center; }

/* ── Settings ──────────────────────────────────────────────────── */
.settings-sections { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }

.settings-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.settings-block-title {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .6px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 14px; font-weight: 500; color: var(--text); }
.setting-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }

.toggle-group { display: flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 8px; }
.toggle-opt {
  padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
  color: var(--text-2); transition: all var(--transition);
}
.toggle-opt.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.accent-swatch-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.accent-swatches { display: grid; grid-template-columns: repeat(7, 26px); gap: 8px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid transparent;
  transition: transform var(--transition), border-color var(--transition);
}
.swatch:hover { transform: scale(1.15); }
.swatch.active { border-color: var(--text); }
.accent-row-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); align-self: flex-start; margin-top: 2px;
}

.sync-log {
  margin: 0 20px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px; color: var(--text-2);
  white-space: pre-wrap; max-height: 240px; overflow-y: auto;
  line-height: 1.5;
}

.settings-course-list { padding: 4px 0; }
.settings-course-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-course-item:last-child { border-bottom: none; }
.settings-course-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.settings-course-name { font-size: 14px; font-weight: 500; color: var(--text); flex: 1; }
.settings-course-meta { font-size: 12px; color: var(--text-3); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  transition: all var(--transition); cursor: pointer; border: none;
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.icon-btn {
  width: 36px; height: 36px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--surface-2); color: var(--accent); }

/* ── Modal ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn 120ms ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%; max-width: 480px;
  animation: slideUp 150ms ease;
}
@keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 600; }
.modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 8px;
}

.form-label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
}
.form-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition);
  width: 100%;
}
.form-input:focus { outline: none; border-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.required { color: var(--red); }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Utilities ─────────────────────────────────────────────────── */
.text-muted { color: var(--text-3); }
.mt-2 { margin-top: 8px; }

/* ── Assignment item — clickable ───────────────────────────────── */
.assignment-item { cursor: pointer; }

/* ── Detail Modal ──────────────────────────────────────────────── */
.modal-lg { max-width: 880px; }

/* Long runs of short term-paragraphs (e.g. exam study lists) flow into
   multiple columns so they use horizontal space instead of one-per-line. */
.detail-cols {
  columns: 200px auto;
  column-gap: 36px;
  margin: 6px 0 14px;
}
.detail-cols p { margin: 0 0 7px; break-inside: avoid; }

.detail-modal-body {
  padding: 0 0 20px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: 72vh; overflow-y: auto;
}

.detail-hero {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.detail-title {
  font-size: 17px; font-weight: 700; line-height: 1.35;
  color: var(--text);
}
.detail-course-name {
  font-size: 13px; color: var(--accent); font-weight: 600;
}
.detail-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.detail-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}
.detail-chip.due-today { background: var(--red-subtle); color: var(--red); border-color: transparent; }
.detail-chip.due-soon  { background: var(--amber-subtle); color: var(--amber); border-color: transparent; }
.detail-chip.due-past  { background: var(--red-subtle); color: var(--red); border-color: transparent; opacity:.8; }
.detail-chip.due-future { background: var(--surface-2); color: var(--text-3); }
.detail-chip.pts       { background: var(--accent-subtle); color: var(--accent); border-color: transparent; }
.detail-chip.status-done    { background: var(--green-subtle); color: var(--green); border-color: transparent; }
.detail-chip.status-past    { background: var(--red-subtle); color: var(--red); border-color: transparent; }
.detail-chip.status-pending { background: var(--surface-2); color: var(--text-3); }
.detail-chip.priority-high   { background: var(--red-subtle); color: var(--red); border-color: transparent; }
.detail-chip.priority-medium { background: var(--amber-subtle); color: var(--amber); border-color: transparent; }
.detail-chip.priority-low    { background: var(--surface-2); color: var(--text-3); }
.detail-chip.urgency-high { background: var(--red-subtle); color: var(--red); border-color: transparent; }
.detail-chip.urgency-mid  { background: var(--amber-subtle); color: var(--amber); border-color: transparent; }
.detail-chip.urgency-low  { background: var(--green-subtle); color: var(--green); border-color: transparent; }
.detail-chip.grade        { background: var(--green-subtle); color: var(--green); border-color: transparent; font-weight: 700; }

/* ── Urgency badge (todo list) ──────────────────────────────────── */
.urgency-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; font-size: 10px; font-weight: 700;
}
.urgency-badge.high { background: var(--red-subtle); color: var(--red); }
.urgency-badge.mid  { background: var(--amber-subtle); color: var(--amber); }
.urgency-badge.low  { background: var(--green-subtle); color: var(--green); }

.detail-section-title {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 8px;
}
.detail-desc-text {
  font-size: 13px; color: var(--text-2); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 12px 14px;
  max-height: 240px; overflow-y: auto;
}
.detail-modal-body > div:not(.detail-hero) {
  padding-left: 20px; padding-right: 20px;
}
.detail-notes {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  background: var(--amber-subtle); border-radius: var(--radius-xs);
  padding: 10px 12px;
}
.detail-footer {
  display: flex; justify-content: flex-end; padding-top: 2px;
}

/* ── Assignment links in chat ───────────────────────────────────── */
.chat-assignment-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  border-radius: 3px;
  transition: opacity var(--transition);
}
.chat-assignment-link:hover { opacity: 0.75; }

@keyframes todoGlow {
  0%   { background: var(--accent-subtle); box-shadow: 0 0 0 3px var(--accent-subtle); }
  60%  { background: var(--accent-subtle); box-shadow: 0 0 0 6px transparent; }
  100% { background: transparent; box-shadow: none; }
}
.todo-highlight {
  animation: todoGlow 1.8s ease forwards;
  border-radius: var(--radius-sm);
}

/* ── Writing Tool Cards (DOMINIK empty state) ─────────────────── */
.writing-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%; max-width: 760px;
}

.writing-tool-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.writing-tool-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.wtc-icon  { font-size: 22px; line-height: 1; }
.wtc-title { font-size: 14px; font-weight: 600; color: var(--text); }
.wtc-desc  { font-size: 12px; color: var(--text-2); line-height: 1.4; flex: 1; }

.wtc-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition);
}
.wtc-select:focus { outline: none; border-color: var(--accent); }

.wtc-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  resize: vertical;
  min-height: 72px;
  transition: border-color var(--transition);
}
.wtc-textarea:focus { outline: none; border-color: var(--accent); }
.wtc-textarea::placeholder { color: var(--text-3); }

.wtc-btn {
  margin-top: 2px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  width: 100%;
  justify-content: center;
}

@media (max-width: 680px) {
  .writing-tools { grid-template-columns: 1fr; }
}

/* ── Counselor page ────────────────────────────────────────────── */
#page-counselor {
  display: none; flex-direction: column;
  height: calc(100vh - var(--topbar-h) - 48px);
  padding: 0;           /* conv-layout handles its own spacing */
}
#page-counselor.active { display: flex; }

/* ── Conversation layout (sidebar + main) ──────────────────────── */
.conv-layout {
  flex: 1; min-height: 0;
  display: flex; flex-direction: row;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.conv-sidebar {
  width: 256px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transition: width 220ms ease, opacity 220ms ease;
}
.conv-sidebar.collapsed {
  width: 0; opacity: 0; border-right: none; pointer-events: none;
}

.conv-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.conv-sidebar-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
}
.conv-sidebar-actions {
  display: flex; align-items: center; gap: 2px;
}
.conv-new-btn {
  color: var(--accent);
}
.conv-new-btn:hover { background: var(--accent-subtle); }

.conv-filter-btn {
  color: var(--text-3);
}
.conv-filter-btn:hover { background: var(--accent-subtle); color: var(--accent); }
.conv-filter-btn.active {
  color: var(--accent);
  background: var(--accent-subtle);
}
.conv-filter-btn.active svg {
  fill: var(--accent);
}

.conv-list {
  flex: 1; overflow-y: auto;
  padding: 6px 0;
}
.conv-list-empty {
  font-size: 12px; color: var(--text-3); padding: 16px 14px;
}

.conv-item {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  padding: 9px 10px 9px 14px;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--transition);
}
.conv-item:hover { background: var(--surface); }
.conv-item.active {
  background: var(--accent-subtle);
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}
.conv-item.active .conv-item-name { color: var(--accent); font-weight: 600; }

.conv-item-info { flex: 1; min-width: 0; }
.conv-item-name {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text; border-radius: 3px; padding: 1px 3px; margin: -1px -3px;
  transition: background var(--transition);
}
.conv-item-name:hover { background: var(--surface-2); }
.conv-item-time {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
}

.conv-menu-btn {
  opacity: 0; flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 4px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition), background var(--transition);
}
.conv-item:hover .conv-menu-btn,
.conv-item.active .conv-menu-btn { opacity: 1; }
.conv-menu-btn:hover { background: var(--border); color: var(--text); }

/* ── Star / pin button ───────────────────────────────────────────── */
.conv-star-btn {
  opacity: 0; flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 4px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.conv-item:hover .conv-star-btn,
.conv-item.active .conv-star-btn { opacity: 1; }
.conv-star-btn:hover { background: var(--border); color: var(--amber); }
.conv-star-btn.pinned {
  opacity: 1;
  color: var(--amber);
}
.conv-star-btn.pinned:hover { background: var(--border); }

/* ── Pinned section label & divider ─────────────────────────────── */
.conv-section-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3);
  padding: 8px 14px 4px;
  user-select: none;
}
.conv-section-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 10px 4px;
}

/* Rename input */
.conv-rename-input {
  width: 100%; font-size: 13px; font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 4px; padding: 2px 6px;
  color: var(--text); outline: none;
}

/* ── Conv context menu ───────────────────────────────────────────── */
.conv-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  width: 176px;
  overflow: hidden;
  animation: fadeIn 100ms ease;
}
.conv-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 14px;
  font-size: 13px; color: var(--text);
  background: none; border: none; cursor: pointer;
  transition: background var(--transition);
}
.conv-menu-item:hover { background: var(--surface-2); }
.conv-menu-item.danger { color: var(--red); }
.conv-menu-item.danger:hover { background: rgba(220, 38, 38, .07); }

/* ── Inline confirm popover ──────────────────────────────────────── */
.conv-confirm {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 12px 14px;
  width: 220px;
  animation: fadeIn 100ms ease;
}
.conv-confirm-msg {
  font-size: 13px; color: var(--text); line-height: 1.45; margin-bottom: 10px;
}
.conv-confirm-btns {
  display: flex; justify-content: flex-end; gap: 6px;
}
.conv-confirm-btns .btn { font-size: 12px; padding: 5px 12px; }
.btn-danger {
  background: var(--red); color: #fff; border-color: var(--red);
}
.btn-danger:hover { filter: brightness(1.1); }

/* ── Conv main area ─────────────────────────────────────────────── */
.conv-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  overflow: hidden;
}

.conv-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 44px;
}
.conv-sidebar-toggle {
  color: var(--text-3); flex-shrink: 0;
}
.conv-sidebar-toggle:hover { color: var(--accent); }
.conv-active-title {
  font-size: 13px; font-weight: 500; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}

/* ── Mobile / narrow ────────────────────────────────────────────── */
@media (max-width: 680px) {
  #page-counselor { height: calc(100vh - var(--topbar-h) - 32px); }

  .conv-sidebar {
    position: absolute; z-index: 50;
    top: 0; left: 0; bottom: 0;
    height: 100%;
    box-shadow: var(--shadow-md);
  }
  .conv-sidebar.collapsed { width: 0; box-shadow: none; }
  .conv-layout { position: relative; }
}

.chat-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}

/* ── Smart greeting ─────────────────────────────────────────── */
.chat-suggestions {
  flex: 1; display: flex; flex-direction: column;
  align-items: center;
  padding: 20px 24px 28px;
  gap: 18px;
  overflow-y: auto;
}
.chat-greeting {
  width: 100%; max-width: 460px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat-greeting-headline {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.chat-greeting-clear { font-size: 14px; color: var(--text-2); }
.chat-greeting-stats { display: flex; flex-direction: column; gap: 5px; }
.chat-greeting-stat {
  font-size: 13px; color: var(--text-2); line-height: 1.4;
}
.chat-greeting-stat.urgent { color: var(--red); }
.chat-greeting-stat.warn   { color: var(--amber); }
.chat-stat-num {
  font-size: 22px; font-weight: 700; color: var(--accent);
  margin-right: 4px; vertical-align: baseline;
}
.chat-greeting-week-label {
  font-size: 12px; font-weight: 600; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 4px;
}
.chat-greeting-week-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.chat-greeting-week-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; gap: 8px;
}
.cgw-title { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgw-due { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.chat-greeting-empty { font-size: 13px; color: var(--text-3); }
.suggestion-chips {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.suggestion-chip {
  padding: 8px 16px; border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all var(--transition);
}
.suggestion-chip:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-subtle);
}

.chat-bubble {
  display: flex; max-width: 78%;
}
.chat-bubble.user { align-self: flex-end; }
.chat-bubble.assistant { align-self: flex-start; }

.chat-text {
  padding: 11px 15px; font-size: 14px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}
.chat-bubble.user .chat-text {
  background: var(--accent); color: #fff;
  border-radius: 18px 18px 4px 18px;
}
.chat-bubble.assistant .chat-text {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
}

.chat-typing {
  display: flex; align-items: center; gap: 5px; padding: 4px 0;
}
.chat-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3); animation: typingBounce 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .18s; }
.chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .6; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.dominik-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 16px 0;
  min-height: 0;
}
.dominik-actions:empty { padding: 0; }
.action-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.action-chip:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

.chat-cached-badge {
  font-size: 10px; font-weight: 500;
  color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px;
  margin-left: 6px; vertical-align: middle;
  letter-spacing: 0.03em;
}

.chat-input-area {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-input {
  flex: 1; resize: none; min-height: 40px; max-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--surface); color: var(--text);
  font-size: 14px; line-height: 1.5; font-family: inherit;
  transition: border-color var(--transition);
}
.chat-input:focus { outline: none; border-color: var(--accent); }
.chat-send { flex-shrink: 0; }
.chat-mic-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chat-mic-btn:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
.chat-mic-btn.recording {
  background: var(--red); border-color: var(--red); color: #fff;
  animation: mic-pulse 1.2s ease-in-out infinite;
}

/* ── Chat input wrapper + dropdown ──────────────────────────── */
.chat-input-wrapper { flex-shrink: 0; }

.chat-dropdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 210px; overflow-y: auto;
}
.chat-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer;
  transition: background 0.1s;
}
.chat-dropdown-item:hover,
.chat-dropdown-item.active { background: var(--surface-2); }
.cdd-icon { font-size: 14px; flex-shrink: 0; }
.cdd-label { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdd-sub { font-size: 11px; color: var(--text-3); flex-shrink: 0; }

/* ── Typing / thinking indicator ───────────────────────────── */
.chat-thinking {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-3); font-style: italic;
}
.chat-thinking-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  animation: thinkPulse 1.2s ease-in-out infinite;
}
@keyframes thinkPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ── Inline assignment cards ────────────────────────────────── */
.chat-assign-card {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px 2px 6px;
  cursor: pointer; vertical-align: middle;
  transition: border-color 0.15s, background 0.15s;
  max-width: 300px;
}
.chat-assign-card:hover { border-color: var(--accent); background: var(--accent-subtle); }
.cac-title { font-size: 12px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.cac-course { font-size: 10px; color: var(--accent); font-weight: 500; }
.cac-due { font-size: 10px; color: var(--text-3); }
.cac-urgency {
  font-size: 10px; font-weight: 700; border-radius: 3px;
  padding: 0 3px; color: #fff;
}
.cac-urgency.high { background: var(--red); }
.cac-urgency.mid  { background: var(--amber); }
.cac-urgency.low  { background: var(--green); }

/* ── Follow-up chips ────────────────────────────────────────── */
.chat-followup-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0 4px 4px;
  max-width: 78%;
}
.followup-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px; color: var(--text-2); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.followup-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }

/* ── Resources Tab ─────────────────────────────────────────────── */
.resources-wrap { display: flex; flex-direction: column; gap: 0; padding: 0 0 32px; }

.res-section {
  border-bottom: 1px solid var(--border);
}
.res-section:last-child { border-bottom: none; }

.res-section-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 14px 0; background: none; border: none; cursor: pointer;
  color: var(--text); text-align: left;
}
.res-section-title { font-size: 14px; font-weight: 600; flex: 1; }
.res-section-count { font-size: 12px; color: var(--text-3); }
.res-chevron { flex-shrink: 0; color: var(--text-3); transition: transform var(--transition); }
.res-section.open .res-chevron { transform: rotate(180deg); }

.res-section-body { display: none; padding-bottom: 12px; }
.res-section.open .res-section-body { display: block; }

.res-module-group { margin-bottom: 16px; }
.res-module-name {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); padding: 4px 0 8px; border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 4px;
}

.res-file-list { display: flex; flex-direction: column; }
.res-file-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px; border-radius: var(--radius-xs);
  transition: background var(--transition);
  flex-wrap: wrap;
}
.res-file-row:hover { background: var(--surface-2); }
.res-page-row { flex-wrap: wrap; }

.res-icon {
  flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  width: 36px; height: 24px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-3);
}
.res-icon--pdf  { background: #fee2e2; color: #dc2626; }
.res-icon--doc  { background: #dbeafe; color: #2563eb; }
.res-icon--ppt  { background: #ffedd5; color: #ea580c; }
.res-icon--xls  { background: #dcfce7; color: #16a34a; }
.res-icon--img  { background: #faf5ff; color: #7c3aed; }
.res-icon--txt  { background: var(--surface-2); color: var(--text-3); }
.res-icon--page { background: var(--accent-subtle); color: var(--accent); }

.res-file-name {
  flex: 1; font-size: 13px; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.res-file-size { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.res-file-link {
  flex-shrink: 0; font-size: 11px; color: var(--accent); text-decoration: none;
  padding: 2px 6px; border: 1px solid var(--accent); border-radius: 4px;
  transition: all var(--transition);
}
.res-file-link:hover { background: var(--accent-subtle); }

.res-preview-btn {
  flex-shrink: 0; font-size: 11px; color: var(--text-2); background: none;
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px;
  cursor: pointer; transition: all var(--transition);
}
.res-preview-btn:hover { border-color: var(--accent); color: var(--accent); }

.res-page-preview {
  width: 100%; margin-top: 8px; padding: 12px;
  background: var(--surface-2); border-radius: var(--radius-xs);
  font-size: 12px; color: var(--text-2); line-height: 1.7;
  white-space: pre-wrap; max-height: 400px; overflow-y: auto;
  border-left: 3px solid var(--accent);
}

/* ── DOMINIK animated face widget ───────────────────────────────────── */
.dominik-face {
  position: fixed;
  width: 64px; height: 64px;
  border-radius: 14px;
  user-select: none;
  pointer-events: auto;
  cursor: grab;
  z-index: 9999;
  transition: width .52s cubic-bezier(.34,1.56,.64,1),
              height .52s cubic-bezier(.34,1.56,.64,1);
  touch-action: none;
  overflow: hidden;
  transform-origin: center;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 0;
  outline: none;
}
.dominik-face:active { cursor: grabbing; }
.dominik-face.enlarged {
  width: 260px; height: 260px;
}

/* Widget buttons (expand + slime) */
.df-expand-btn, .df-slime-btn {
  position: absolute;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: #fff;
  color: #222;
  cursor: pointer;
  opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s, background .2s, color .2s;
  z-index: 2;
  pointer-events: auto;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.dominik-face:hover .df-expand-btn { opacity: 1; }
.dominik-face.enlarged:hover .df-slime-btn { opacity: 1; }
.df-expand-btn:hover, .df-slime-btn:hover { opacity: .5 !important; }
.df-slime-btn.slime-active { background: var(--accent); color: #fff; opacity: 1; }
.df-slime-btn.slime-active:hover { opacity: .7 !important; }
.df-icon-shrink { display: none; }
.dominik-face.enlarged .df-icon-expand { display: none; }
.dominik-face.enlarged .df-icon-shrink { display: block; }

/* SVG structural elements */
.df-face-group { transform-box: fill-box; transform-origin: center; }

.df-eye {
  transform-box: fill-box; transform-origin: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s;
}
.df-eye-arc {
  opacity: 0;
  transition: opacity .3s ease;
}
.df-brow {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  transition: opacity .3s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.df-mouth { opacity: 0; transition: opacity .28s ease; }
.df-m-scared { transition: none; }
.dominik-face.slime-active #dfFaceCircle  { display: none; }

/* ── Keyframes ── */
@keyframes df-blink {
  0%, 83%, 100% { transform: scaleY(1); }
  87%, 90%      { transform: scaleY(0.07); }
}
@keyframes df-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.028); }
}
@keyframes df-dart {
  0%, 100%  { transform: scaleY(0.45) translateX(0);   }
  25%       { transform: scaleY(0.45) translateX(-3px); }
  75%       { transform: scaleY(0.45) translateX(3px);  }
}
@keyframes df-bounce {
  0%   { transform: translateY(0)    scale(1);    }
  30%  { transform: translateY(-10px) scale(1.04); }
  55%  { transform: translateY(-5px)  scale(1);    }
  75%  { transform: translateY(-8px)  scale(1.02); }
  100% { transform: translateY(0)    scale(1);    }
}
@keyframes df-rapid-bounce {
  0%,100% { transform: translateY(0); }
  20%     { transform: translateY(-8px); }
  40%     { transform: translateY(-2px); }
  60%     { transform: translateY(-7px); }
  80%     { transform: translateY(-1px); }
}
@keyframes df-shake {
  0%,100% { transform: rotate(0deg);    }
  20%     { transform: rotate(-2.5deg); }
  40%     { transform: rotate(2.5deg);  }
  60%     { transform: rotate(-1.5deg); }
  80%     { transform: rotate(1.5deg);  }
}
@keyframes df-jump {
  0%   { transform: translateY(0)     scale(1);    }
  25%  { transform: translateY(-13px) scale(1.06); }
  55%  { transform: translateY(-6px)  scale(1);    }
  75%  { transform: translateY(-9px)  scale(1.03); }
  100% { transform: translateY(0)     scale(1);    }
}
@keyframes df-nod {
  0%,100% { transform: rotate(0deg);  }
  30%     { transform: rotate(4deg);  }
  65%     { transform: rotate(-1deg); }
}

/* ── IDLE ── */
.dominik-face[data-emotion="idle"] .df-m-smile  { opacity: 1; }
.dominik-face[data-emotion="idle"] .df-eye      { animation: df-blink 3.5s ease-in-out infinite; }
.dominik-face[data-emotion="idle"] .df-eye-r    { animation-delay: .07s; }
.dominik-face[data-emotion="idle"] .df-face-group { animation: df-breathe 4s ease-in-out infinite; }

/* ── THINKING ── */
.dominik-face[data-emotion="thinking"] .df-m-flat  { opacity: 1; }
.dominik-face[data-emotion="thinking"] .df-eye     { animation: df-dart 1.8s ease-in-out infinite; }
.dominik-face[data-emotion="thinking"] .df-brow    { opacity: 1; }
.dominik-face[data-emotion="thinking"] .df-brow-l  { transform: rotate(9deg); }
.dominik-face[data-emotion="thinking"] .df-brow-r  { transform: rotate(-9deg); }

/* ── HAPPY ── */
.dominik-face[data-emotion="happy"] .df-m-smile { opacity: 1; }
.dominik-face[data-emotion="happy"] .df-eye     { transform: scaleY(1.2); }
.dominik-face[data-emotion="happy"]             { animation: df-bounce .75s cubic-bezier(.34,1.56,.64,1) 1; }

/* ── EXCITED ── */
.dominik-face[data-emotion="excited"] .df-m-grin { opacity: 1; }
.dominik-face[data-emotion="excited"] .df-eye    { transform: scaleY(1.3) scaleX(1.1); }
.dominik-face[data-emotion="excited"]            { animation: df-rapid-bounce .5s ease-in-out 2; }

/* ── FOCUSED ── */
.dominik-face[data-emotion="focused"] .df-m-flat { opacity: 1; }
.dominik-face[data-emotion="focused"] .df-eye    { transform: scaleY(0.6); }

/* ── CONCERNED ── */
.dominik-face[data-emotion="concerned"] .df-m-frown  { opacity: 1; }
.dominik-face[data-emotion="concerned"] .df-brow      { opacity: 1; }
.dominik-face[data-emotion="concerned"] .df-brow-l    { transform: rotate(-7deg); }
.dominik-face[data-emotion="concerned"] .df-brow-r    { transform: rotate(7deg); }
.dominik-face[data-emotion="concerned"]               { animation: df-shake 1s ease-in-out 1; }

/* ── SURPRISED ── */
.dominik-face[data-emotion="surprised"] .df-m-o  { opacity: 1; }
.dominik-face[data-emotion="surprised"] .df-eye  { transform: scaleY(1.5) scaleX(1.1); }
.dominik-face[data-emotion="surprised"]          { animation: df-jump .55s cubic-bezier(.34,1.56,.64,1) 1; }

/* ── CELEBRATING ── */
.dominik-face[data-emotion="celebrating"] .df-m-grin   { opacity: 1; }
.dominik-face[data-emotion="celebrating"] .df-eye      { opacity: 0; }
.dominik-face[data-emotion="celebrating"] .df-eye-arc  { opacity: 1; }
.dominik-face[data-emotion="celebrating"]              { animation: df-rapid-bounce .42s ease-in-out 3; }

/* ── TIRED ── */
.dominik-face[data-emotion="tired"] .df-m-tiny    { opacity: 1; }
.dominik-face[data-emotion="tired"] .df-eye       { transform: scaleY(0.22); }
.dominik-face[data-emotion="tired"] .df-face-group { animation: df-breathe 7s ease-in-out infinite; }

/* ── PROUD ── */
.dominik-face[data-emotion="proud"] .df-m-content  { opacity: 1; }
.dominik-face[data-emotion="proud"] .df-eye         { opacity: 0; }
.dominik-face[data-emotion="proud"] .df-eye-arc     { opacity: 1; }
.dominik-face[data-emotion="proud"]                 { animation: df-nod .9s ease-in-out 2; }

/* ── Notes Page ────────────────────────────────────────────────── */

.notes-course-select-wrap {
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 5px;
}

.notes-course-select {
  width: 100%;
  max-width: 380px;
  padding: 9px 36px 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface) 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 1l5 5 5-5' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.notes-course-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 7,112,227), 0.12);
}
.notes-course-select.error {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,38,38,.13);
  animation: notes-shake 0.32s ease;
}
body.dark .notes-course-select {
  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 1l5 5 5-5' stroke='%23aaa' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.notes-course-error {
  font-size: 12px;
  color: var(--red);
  font-weight: 500;
  padding-left: 2px;
}

@keyframes notes-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px); }
  40%  { transform: translateX(6px); }
  60%  { transform: translateX(-4px); }
  80%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.notes-input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

@media (max-width: 760px) {
  .notes-input-grid { grid-template-columns: 1fr; }
}

.notes-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-sm);
}

.notes-panel-label {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .05em;
}

.notes-textarea {
  width: 100%; min-height: 160px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px; line-height: 1.6;
  transition: border-color var(--transition);
}
.notes-textarea:focus { outline: none; border-color: var(--accent); }
.notes-textarea::placeholder { color: var(--text-3); }

.notes-meta-row {
  display: flex; gap: 8px; align-items: center;
}
.notes-meta-row > * { flex: 1; }

.notes-select, .notes-date-input {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  transition: border-color var(--transition);
  width: 100%;
}
.notes-select:focus, .notes-date-input:focus { outline: none; border-color: var(--accent); }

.notes-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 24px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  cursor: pointer;
  background: var(--surface-2);
  transition: border-color var(--transition), background var(--transition);
  text-align: center;
  font-size: 13px; color: var(--text-2);
  min-height: 120px;
}
.notes-dropzone:hover { border-color: var(--accent); background: var(--accent-subtle); }
.notes-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.notes-dropzone-sub {
  font-size: 11px; color: var(--text-3);
}

.notes-file-list {
  display: flex; flex-direction: column; gap: 6px;
}

.notes-file-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px 4px 14px;
  font-size: 12px;
}
.notes-file-chip-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
}
.notes-file-chip-remove {
  flex-shrink: 0;
  color: var(--text-3); font-size: 13px;
  padding: 0 2px; line-height: 1;
  transition: color var(--transition);
}
.notes-file-chip-remove:hover { color: var(--red); }

.notes-list-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 32px;
  margin-bottom: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.notes-dominik-badge {
  font-size: 12px; color: var(--text-3);
}

.notes-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 48px;
}

.notes-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition);
}
.notes-item:hover { border-color: var(--accent); }
.notes-item.notes-item-expanded { border-color: var(--accent); }

.notes-item-header {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.notes-type-tag {
  font-size: 11px; font-weight: 600;
  padding: 2px 9px; border-radius: 10px;
  text-transform: capitalize; letter-spacing: .02em;
  flex-shrink: 0;
}

.notes-item-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.notes-item-date {
  font-size: 12px; color: var(--text-3);
  flex-shrink: 0; margin-left: auto;
}

.notes-dominik-indicator {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.notes-dominik-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  display: inline-block;
}

.notes-delete-btn {
  flex-shrink: 0; color: var(--text-3);
  opacity: 0;
  transition: opacity var(--transition), color var(--transition);
}
.notes-item:hover .notes-delete-btn { opacity: 1; }
.notes-delete-btn:hover { color: var(--red) !important; }

.notes-preview {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

.notes-full {
  font-size: 13px; color: var(--text-2); line-height: 1.6;
  white-space: pre-wrap;
  margin-top: 2px;
  max-height: 400px; overflow-y: auto;
}

/* ── Feature 1: Voice Notes ──────────────────────────────────── */

.notes-panel-label-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.notes-panel-label-row .notes-panel-label {
  margin-bottom: 0; flex: 1;
}

.notes-mic-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); flex-shrink: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.notes-mic-btn:hover {
  background: var(--accent-subtle); color: var(--accent); border-color: var(--accent);
}
.notes-mic-btn.recording {
  background: var(--red); border-color: var(--red); color: #fff;
  animation: mic-pulse 1.2s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50% { box-shadow: 0 0 0 8px rgba(220,38,38,.0); }
}

.notes-mic-status {
  font-size: 12px; font-weight: 500; color: var(--red);
}

/* ── Feature 2: Export System ────────────────────────────────── */

.notes-export-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-xs);
  color: var(--text-3); flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
}
.notes-export-btn:hover { color: var(--accent); background: var(--accent-subtle); }

.notes-export-all-link {
  font-size: 12px; color: var(--text-3); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color var(--transition);
}
.notes-export-all-link:hover { color: var(--accent); }

.conv-export-btn {
  display: block; width: 100%;
  padding: 7px 12px; text-align: left;
  font-size: 13px; color: var(--text-2);
  transition: background var(--transition), color var(--transition);
}
.conv-export-btn:hover { background: var(--surface-2); color: var(--accent); }

/* ── Feature 3: Global Search ────────────────────────────────── */

.search-toggle-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
  transition: background var(--transition), color var(--transition);
}
.search-toggle-btn:hover { background: var(--surface-2); color: var(--accent); }

.search-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 80px;
}

.search-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.search-modal {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  width: 90%; max-width: 560px;
  overflow: hidden;
}

.search-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--text);
  line-height: 1.4;
}
.search-input::placeholder { color: var(--text-3); }

.search-esc-hint {
  flex-shrink: 0;
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-3); font-family: inherit;
}

.search-results {
  max-height: 400px; overflow-y: auto;
}

.search-empty {
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: var(--text-3);
}

.search-group-header {
  padding: 10px 16px 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}

.search-result-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 16px; cursor: pointer;
  transition: background var(--transition);
  border-top: 1px solid var(--border-subtle);
}
.search-result-item:hover { background: var(--surface-2); }
.search-result-item:first-child { border-top: none; }

.search-result-course-badge {
  flex-shrink: 0; margin-top: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 20px;
  background: var(--accent-subtle); color: var(--accent);
  white-space: nowrap; max-width: 120px;
  overflow: hidden; text-overflow: ellipsis;
}

.search-result-body { flex: 1; min-width: 0; }

.search-result-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.search-result-excerpt {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.search-result-excerpt em {
  font-style: normal; font-weight: 600; color: var(--accent);
}

body.dark .search-modal { background: var(--surface); }

/* ── Feature 4: Offline Banner ───────────────────────────────── */

.offline-banner {
  position: sticky; top: 0; z-index: 100;
  background: var(--amber); color: #fff;
  text-align: center; padding: 8px 16px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .02em;
  margin: -24px -24px 16px;
}
body.dark .offline-banner { background: #92400e; }

/* ── Toast notification ──────────────────────────────────────── */

.toast-notification {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  padding: 10px 18px; border-radius: 24px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 20000;
  animation: toast-in 0.2s ease;
  white-space: nowrap;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Chat document action bar ────────────────────────────────── */
.chat-action-bar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 0 2px;
  flex-wrap: wrap;
}
.chat-action-bar-label {
  font-size: 11px; color: var(--text-3); font-weight: 500; margin-right: 2px;
}
.chat-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.chat-action-btn:hover { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); }
.chat-action-btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.chat-action-btn.primary:hover { background: var(--accent-hover); }

/* ── Document Preview Panel ──────────────────────────────────── */
.preview-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 96vw;
  background: var(--bg);
  box-shadow: -6px 0 32px rgba(0,0,0,.14);
  z-index: 8100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.preview-panel.open { transform: translateX(0); }

.preview-panel-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 32px 40px;
}

/* ── Rendered document inside preview ───────────────────────── */
.preview-doc {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 15px; line-height: 1.75;
  color: var(--text); max-width: 100%;
}
.preview-doc h1 { font-size: 22px; font-weight: 700; margin: 0 0 18px; line-height: 1.25; }
.preview-doc h2 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; }
.preview-doc h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.preview-doc p  { margin: 0 0 12px; }
.preview-doc ul, .preview-doc ol { padding-left: 22px; margin: 0 0 12px; }
.preview-doc li { margin-bottom: 4px; }
.preview-doc strong { font-weight: 700; }
.preview-doc em { font-style: italic; }
.preview-doc hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.preview-doc blockquote {
  border-left: 3px solid var(--accent); margin: 12px 0;
  padding: 6px 0 6px 14px; color: var(--text-2);
}
.preview-doc code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px; background: var(--surface-2);
  padding: 1px 5px; border-radius: 3px;
}

/* ── Bookmarklet ─────────────────────────────────────────────── */
.bookmarklet-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 600;
  text-decoration: none; user-select: none;
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: background var(--transition), box-shadow var(--transition);
}
.bookmarklet-link:hover { background: var(--accent-hover); box-shadow: var(--shadow); }

/* ── Session-Sync dropdown ─────────────────────────────────────── */
.sync-dropdown {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.sync-dropdown-summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; user-select: none;
  list-style: none;
}
.sync-dropdown-summary::-webkit-details-marker { display: none; }
.sync-dropdown-summary:hover { background: var(--surface); }
.sync-dropdown-summary .sync-chevron {
  margin-left: auto;
  transition: transform var(--transition);
  color: var(--text-3);
}
.sync-dropdown[open] .sync-chevron { transform: rotate(180deg); }
.sync-dropdown-body {
  padding: 4px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--border);
}
.sync-steps {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-2);
}
.sync-steps strong { color: var(--text); }

/* ── Database Page Layout ───────────────────────────────────── */
.db-layout {
  display: flex; height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

.db-sidebar {
  width: 240px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.db-sidebar-head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.db-sidebar-title { font-size: 13px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .05em; }

.db-tree { flex: 1; overflow-y: auto; padding: 8px 0; }

.db-course-node { }
.db-course-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; width: 100%; text-align: left;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: none; border: none; cursor: pointer;
  transition: background var(--transition);
}
.db-course-toggle:hover { background: var(--surface-2); }
.db-course-arrow {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform .2s ease;
  color: var(--text-3);
}
.db-course-node.open .db-course-arrow { transform: rotate(90deg); }
.db-course-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.db-course-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.db-course-children { display: none; }
.db-course-node.open .db-course-children { display: block; }

.db-folder-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 14px 5px 30px; width: 100%; text-align: left;
  font-size: 12.5px; color: var(--text-2);
  background: none; border: none; cursor: pointer;
  border-radius: 0; transition: background var(--transition), color var(--transition);
}
.db-folder-btn:hover { background: var(--surface-2); color: var(--text); }
.db-folder-btn.active { background: var(--accent-subtle); color: var(--accent); font-weight: 600; }

.db-folder-count {
  margin-left: auto;
  font-size: 11px; color: var(--text-3);
  background: var(--surface-2); border-radius: 99px;
  padding: 1px 6px; min-width: 20px; text-align: center;
}
.db-folder-btn.active .db-folder-count { background: var(--accent-subtle); color: var(--accent); }

/* ── Database main area ─────────────────────────────────────── */
.db-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.db-main-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.db-main-title { font-size: 14px; font-weight: 700; color: var(--text); }
.db-view-toggle { display: flex; gap: 2px; }
.db-view-btn {
  width: 28px; height: 28px; border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); transition: background var(--transition), color var(--transition);
}
.db-view-btn:hover { background: var(--surface-2); color: var(--text-2); }
.db-view-btn.active { background: var(--accent-subtle); color: var(--accent); }

.db-content {
  flex: 1; overflow-y: auto;
  padding: 20px;
}
.db-loading, .db-empty {
  padding: 48px 24px; text-align: center;
  color: var(--text-3); font-size: 14px;
}

/* Grid view */
.db-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.db-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 12px;
  cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.db-card:hover {
  border-color: var(--accent); box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.db-card-icon { width: 36px; height: 36px; border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; }
.db-card-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.db-card-meta { font-size: 11px; color: var(--text-3); }

/* List view */
.db-list { display: flex; flex-direction: column; gap: 2px; }
.db-list-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-xs);
  cursor: pointer; transition: background var(--transition);
}
.db-list-row:hover { background: var(--surface); }
.db-list-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.db-list-name { flex: 1; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-list-date { font-size: 12px; color: var(--text-3); flex-shrink: 0; }
.db-list-size { font-size: 12px; color: var(--text-3); flex-shrink: 0; width: 60px; text-align: right; }

/* ── DB rich preview panel content ──────────────────────────── */

.db-preview-content {
  padding: 4px 0 32px;
}

.db-preview-course {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 3px 10px; border-radius: 10px;
  margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .04em;
}

.db-preview-title {
  font-size: 18px; font-weight: 700; color: var(--text);
  line-height: 1.35; margin: 0 0 18px;
}

/* 2-col metadata grid */
.db-meta-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 14px;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.db-meta-label {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  align-self: center;
}
.db-meta-value {
  font-size: 13px; color: var(--text);
  line-height: 1.5;
}

/* Section blocks (description, body, content) */
.db-preview-section {
  margin-bottom: 18px;
}
.db-preview-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 10px;
}
.db-preview-body-text {
  font-size: 13.5px; line-height: 1.7; color: var(--text);
}
.db-preview-body-text p {
  margin: 0 0 12px;
}
.db-preview-body-text p:last-child { margin-bottom: 0; }

/* Syllabus gets slightly larger text */
.db-preview-syllabus-text {
  font-size: 13.5px;
}

.db-preview-empty-note {
  font-size: 13px; color: var(--text-3);
  font-style: italic;
  margin: 0;
}

.db-preview-canvas-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); font-size: 13px; font-weight: 600;
  text-decoration: none;
  padding: 7px 14px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.db-preview-canvas-link:hover {
  background: var(--accent); color: #fff;
}

/* Code/preformatted text in previews */
.db-preview-code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 11.5px;
  white-space: pre-wrap;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* ── Notes mode toggle ───────────────────────────────────────── */
.notes-mode-toggle {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 0 0 20px;
  background: var(--surface-2); border-radius: 99px;
  padding: 3px; width: fit-content; align-self: center;
  border: 1px solid var(--border);
  width: 220px;
}
.notes-mode-btn {
  flex: 1; padding: 7px 18px; border-radius: 99px;
  font-size: 13px; font-weight: 600;
  border: none; cursor: pointer; transition: all .2s ease;
  background: none; color: var(--text-2);
  white-space: nowrap;
}
.notes-mode-btn.active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}

/* ── Staged file list inside dropzone ────────────────────────── */
.notes-staged-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.notes-staged-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-xs);
  background: var(--surface-2); border: 1px solid var(--border);
}
.notes-staged-icon { font-size: 16px; flex-shrink: 0; }
.notes-staged-name { flex: 1; font-size: 12px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-staged-size { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.notes-staged-remove {
  width: 20px; height: 20px; border-radius: 50%;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.notes-staged-remove:hover { background: var(--red-subtle); color: var(--red); }

.notes-dropzone.has-files {
  padding: 10px 16px; min-height: 44px;
}
.notes-dropzone.has-files .notes-dropzone-icon { display: none; }
.notes-dropzone.has-files .notes-dropzone-label { font-size: 12px; color: var(--text-3); }
.notes-dropzone.has-files .notes-dropzone-sub { display: none; }

/* ── File Send Animation ─────────────────────────────────────── */
.file-send-orb {
  position: fixed; z-index: 99999;
  width: 28px; height: 28px;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* Nav button pulse on file arrival */
@keyframes nav-pulse {
  0%   { background: transparent; }
  30%  { background: var(--accent-subtle); }
  100% { background: transparent; }
}
.nav-btn.nav-pulse { animation: nav-pulse 0.6s ease forwards; }

/* ══════════════════════════════════════════════════════════════════
   LIQUID-GLASS REDESIGN  ·  alive / game-like layer
   (appended last so it layers over the base cascade)
   ══════════════════════════════════════════════════════════════════ */

/* Drifting gradient-mesh background — the screen breathes */
body::before {
  content: '';
  position: fixed; inset: -20% -10% -10% -10%;
  z-index: -2;
  background:
    radial-gradient(40% 50% at 18% 22%, var(--mesh-1), transparent 60%),
    radial-gradient(45% 55% at 82% 18%, var(--mesh-2), transparent 60%),
    radial-gradient(50% 60% at 50% 90%, var(--mesh-3), transparent 62%);
  filter: blur(30px) saturate(1.1);
  animation: meshDrift 34s ease-in-out infinite alternate;
  pointer-events: none;
}
body::after {  /* deepens vignette so glass + text read on dark */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.18));
}
body.dark::after { background: radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(0,0,0,.45)); }

@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1);     }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

/* ── Glass surfaces ─────────────────────────────────────────────── */
.topbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
}

.course-card,
.sidebar-block,
.stat-tile {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 1px 0 var(--glass-hi) inset,
    var(--shadow);
}

/* ── Course cards: per-course color world + glow + progress ─────── */
.course-card {
  border-radius: 16px;
  padding: 18px;
  transition: transform .25s var(--spring), box-shadow .3s ease, border-color .3s ease;
  --card-accent: var(--accent);
}
.course-card::before {           /* top hue bar → full-bleed glow wash */
  height: 100%; right: auto; width: 100%;
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--card-accent) 26%, transparent), transparent 55%);
  opacity: .9;
}
.course-card::after {            /* hue edge accent on the left */
  content: ''; position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px;
  border-radius: 3px; background: var(--card-accent);
  box-shadow: 0 0 14px var(--card-accent);
}
.course-card > * { position: relative; z-index: 1; }
.course-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--glass-border));
  box-shadow:
    0 1px 0 var(--glass-hi) inset,
    0 14px 40px rgba(0,0,0,.28),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 30%, transparent),
    0 10px 50px color-mix(in srgb, var(--card-accent) 30%, transparent);
}
.course-card:active { transform: translateY(-1px) scale(.995); }

/* urgency temperature */
.course-card.is-hot::after { background: var(--red); box-shadow: 0 0 16px var(--red); }
.course-card.is-warm::after { background: var(--amber); box-shadow: 0 0 16px var(--amber); }
.course-card.is-hot:hover  { box-shadow: 0 1px 0 var(--glass-hi) inset, 0 14px 44px rgba(0,0,0,.3), 0 0 60px rgba(220,38,38,.32); }

.course-grade-badge {
  background: color-mix(in srgb, var(--card-accent) 90%, #000 0%);
  color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--card-accent) 45%, transparent);
}

/* completion progress bar inside card */
.course-progress {
  margin-top: 14px; height: 7px; border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden; position: relative;
}
.course-progress-fill {
  height: 100%; width: 0;
  border-radius: 6px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--card-accent) 70%, #fff 0%),
    var(--card-accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--card-accent) 60%, transparent);
  transition: width 1s var(--spring);
}
.course-progress-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; font-size: 11px; color: var(--text-3); font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase;
}
.course-progress-label b { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }

/* ── Home hero: Level / XP / completion ─────────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  margin-bottom: 20px;
  border-radius: 18px; padding: 16px 20px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
  position: relative; overflow: hidden;
}
.home-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 140% at 0% 0%, var(--mesh-1), transparent 55%),
              radial-gradient(70% 140% at 100% 100%, var(--mesh-2), transparent 55%);
  opacity: .8;
}
.home-hero > * { position: relative; z-index: 1; }

.hero-level {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--ring,0) * 1%), var(--surface-2) 0);
  position: relative;
}
.hero-level::before {
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--surface); 
}
.hero-level span { position: relative; z-index: 1; line-height: 1; }
.hero-level .lvl-num { font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hero-level .lvl-cap { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--text-3); text-transform: uppercase; margin-top: 2px; }

.hero-mid { min-width: 0; }
.hero-greeting { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.hero-greeting .accent { color: var(--accent); }
.xp-bar { height: 12px; border-radius: 8px; background: var(--surface-2); overflow: hidden; position: relative; }
.xp-fill {
  height: 100%; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, #5b8cff, #7c5bff 60%, #00c2c7);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(123,91,255,.5);
  transition: width 1.1s var(--spring);
  animation: xpShimmer 3s linear infinite;
}
@keyframes xpShimmer { to { background-position: 200% 0; } }
.hero-xp-text { margin-top: 6px; font-size: 11px; color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-xp-text b { color: var(--text-2); }

.hero-stats { display: flex; gap: 10px; }
.hero-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--surface-2); min-width: 58px;
}
.hero-chip .v { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.hero-chip .k { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.hero-chip.hot .v { color: var(--red); }

@media (max-width: 640px) {
  .home-hero { grid-template-columns: auto 1fr; }
  .hero-stats { grid-column: 1 / -1; }
}

/* ── XP chip in the topbar ──────────────────────────────────────── */
.topbar-right { display: flex; align-items: center; gap: 12px; }
.xp-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  font-size: 12px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.xp-chip .bolt { color: #7c5bff; filter: drop-shadow(0 0 5px rgba(123,91,255,.7)); }
.xp-chip .lvl { color: var(--text-3); font-weight: 700; }

/* ── Mascot: logo reacts to workload ────────────────────────────── */
.logo svg { transition: filter .4s ease, transform .3s var(--spring); }
.logo.mood-clear svg { filter: drop-shadow(0 0 8px rgba(5,150,105,.8)); }
.logo.mood-busy  svg { filter: drop-shadow(0 0 8px rgba(217,119,6,.85)); animation: mascotBob 2.4s ease-in-out infinite; }
.logo.mood-hot   svg { filter: drop-shadow(0 0 9px rgba(220,38,38,.9));  animation: mascotBob 1.3s ease-in-out infinite; }
.logo:hover svg { transform: scale(1.12) rotate(-4deg); }
@keyframes mascotBob { 50% { transform: translateY(-2px); } }

/* ── Springy nav + buttons ──────────────────────────────────────── */
.nav-btn { transition: color var(--transition), background var(--transition), transform .2s var(--spring); }
.nav-btn:hover { transform: translateY(-2px); }
.nav-btn:active { transform: translateY(0) scale(.94); }
.nav-btn.active { color: var(--accent); background: var(--accent-subtle); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset; }

/* ── Confetti canvas ────────────────────────────────────────────── */
#confettiCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

/* ── Count-up helper ────────────────────────────────────────────── */
.count-up { font-variant-numeric: tabular-nums; }

/* ── Sidebar blocks: glassy + rounded ───────────────────────────── */
.sidebar-block { border-radius: 16px; }
.agenda-dot.today { box-shadow: 0 0 8px var(--red); }
.agenda-dot.tomorrow { box-shadow: 0 0 8px var(--amber); }

/* ── Respect reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .xp-fill { animation: none; }
  .logo.mood-busy svg, .logo.mood-hot svg { animation: none; }
  .course-card, .course-progress-fill, .xp-fill, .nav-btn { transition: none; }
}

/* ── Course cards: COLOR movement (aurora hue drift) + sheen + pulse ──
   The card itself lifts & grows on hover (JS tilt); the *color* drifts
   always-on, like a slow aurora behind the glass. */
.course-card::before {
  inset: -45%; width: auto; height: auto; right: auto; bottom: auto; z-index: 0;
  background:
    radial-gradient(32% 32% at 28% 30%, color-mix(in srgb, var(--card-accent) 44%, transparent), transparent 70%),
    radial-gradient(30% 30% at 74% 64%, color-mix(in srgb, var(--card-accent) 32%, transparent), transparent 70%),
    radial-gradient(26% 26% at 62% 18%, color-mix(in srgb, var(--card-accent) 24%, transparent), transparent 72%);
  filter: blur(10px); opacity: .92;
  animation: cardAurora 18s ease-in-out infinite alternate;
}
.course-card:nth-child(3n+2)::before { animation-delay: -6s;  animation-duration: 21s; }
.course-card:nth-child(3n+3)::before { animation-delay: -12s; animation-duration: 16s; }
.course-card:hover::before { opacity: 1; }
@keyframes cardAurora {
  0%   { transform: translate(0,0)    rotate(0deg)  scale(1);    }
  50%  { transform: translate(7%,-6%) rotate(10deg) scale(1.18); }
  100% { transform: translate(-6%,5%) rotate(-8deg) scale(1.08); }
}

/* progress bar: color flows along it */
.course-progress-fill {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--card-accent) 55%, #fff),
    var(--card-accent),
    color-mix(in srgb, var(--card-accent) 55%, #fff));
  background-size: 220% 100%;
  animation: progressFlow 3.2s linear infinite;
}
@keyframes progressFlow { to { background-position: -220% 0; } }

/* cursor-following sheen (kept — pairs with the hover lift) */
.course-card .card-sheen {
  position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(160px 160px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 60%);
}
.course-card:hover .card-sheen { opacity: 1; }

/* urgent cards pulse their edge color */
.course-card.is-hot  { --pulse: var(--red); }
.course-card.is-warm { --pulse: var(--amber); }
.course-card.is-hot::after,
.course-card.is-warm::after { animation: edgePulse 1.8s ease-in-out infinite; }
@keyframes edgePulse {
  0%,100% { box-shadow: 0 0 12px var(--pulse); opacity: .85; }
  50%     { box-shadow: 0 0 22px var(--pulse), 0 0 8px var(--pulse); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .course-card::before, .course-progress-fill,
  .course-card.is-hot::after, .course-card.is-warm::after { animation: none; }
}

/* ── Home: fill the space, sophisticated balanced composition ───── */
.home-layout {
  max-width: 1180px; margin: 0 auto;
  min-height: calc(100vh - var(--topbar-h) - 56px);
  align-content: center;        /* center vertically when content is short */
}
.courses-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.course-card {
  min-height: 176px;
  display: flex; flex-direction: column;
  padding: 20px;
}
.course-card .course-progress { margin-top: auto; }   /* anchor progress to the bottom */
.section-title { margin-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════════
   LIQUID-GLASS PROPAGATION  ·  inner screens
   ══════════════════════════════════════════════════════════════════ */

/* Course detail tabs */
.tab-bar { border-bottom: 1px solid var(--glass-border); }
.tab-btn { transition: color var(--transition), border-color var(--transition); }
.tab-btn.active { color: var(--accent); }
.tab-btn.active::after { box-shadow: 0 0 10px var(--accent); }

/* Todos */
.todo-item {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-sm);
  transition: transform .25s var(--spring), box-shadow .3s ease, border-color .3s ease;
}
.todo-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
}

/* Calendar */
.calendar-grid-wrap, .cal-panel, .cal-popup, .settings-block {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.35);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
}
.calendar-grid-wrap, .cal-panel, .settings-block { border-radius: 16px; }
.cal-day { transition: background .2s ease, transform .2s var(--spring); }
.cal-day:hover { transform: translateY(-1px); }

/* Detail modal — premium glass + colored hero wash */
.modal-overlay { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(0,0,0,.45); }
/* The detail preview must NOT cover or blur the top nav — leave it clickable so
   you can jump between windows without closing the preview. */
.topbar { z-index: 250; }
/* The preview docks to the RIGHT of whatever you're looking at — a side sheet,
   not a centered overlay — so the class page (or list) stays fully visible and
   interactive on the left. Click another item to swap it; ✕ to close. */
:root { --preview-w: clamp(360px, 38vw, 560px); }
#detailModal {
  inset: var(--topbar-h) 0 0 auto;          /* top right bottom, left:auto */
  width: var(--preview-w);
  padding: 0;
  align-items: stretch; justify-content: stretch;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: none;
  pointer-events: none;                      /* clicks fall through to the left */
}
/* When the preview is docked, the page reserves space for it and reflows to the
   left — the sheet sits BESIDE the content, never on top of it. Nothing hidden. */
#app { transition: padding-right .3s cubic-bezier(.4,0,.2,1), max-width .3s ease; }
body.preview-docked #app {
  max-width: none;
  margin-left: 0; margin-right: 0;
  padding-right: calc(var(--preview-w) + 24px);
}
#detailModal > .modal {
  pointer-events: auto;
  width: 100%; max-width: none; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 0;
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 54px -26px rgba(0,0,0,.6);
  animation: sheetInRight .3s cubic-bezier(.4,0,.2,1);
}
@keyframes sheetInRight { from { transform: translateX(100%); opacity: .5; } to { transform: none; opacity: 1; } }
#detailModal .detail-modal-body { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
@media (max-width: 760px) {
  #detailModal { inset: var(--topbar-h) 0 0 0; width: 100%; }
}
.modal, .detail-modal-body {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  backdrop-filter: blur(28px) saturate(1.4);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow-md);
}
.detail-hero {
  position: relative; border-radius: 14px; padding: 18px; overflow: hidden;
}
.detail-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 130% at 0% 0%, var(--mesh-1), transparent 55%),
              radial-gradient(70% 130% at 100% 100%, var(--mesh-2), transparent 55%);
  opacity: .8;
}
.detail-hero > * { position: relative; z-index: 1; }

/* Counselor chat */
.conv-sidebar {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid var(--glass-border);
}

/* ── COMBO: background mood reacts to deadline pressure ─────────── */
body.mood-clear { }                       /* default cool palette */
body.mood-busy  { --mesh-2: rgba(217,150,60,.20); }
body.mood-hot   {
  --mesh-1: rgba(255,86,86,.26);
  --mesh-2: rgba(255,140,50,.20);
}
body.mood-hot::before  { animation-duration: 22s; }   /* canvas feels more charged */
body.mood-clear::before { animation-duration: 40s; }  /* calm when you're clear */

/* ── Course cards: FLOWING outer glow (extends beyond the card) ──
   Lives on a wrapper because the card itself clips its inner aurora.
   Soft + slow = looks like color flowing in a stream, not a hologram. */
.course-card-wrap { position: relative; display: flex; }
.course-card-wrap > .course-card { flex: 1; width: 100%; z-index: 1; }
.course-card-wrap::before {
  content: ''; position: absolute; inset: -24px; z-index: 0; border-radius: 30px; pointer-events: none;
  background:
    radial-gradient(38% 42% at 28% 30%, color-mix(in srgb, var(--card-accent) 40%, transparent), transparent 70%),
    radial-gradient(42% 46% at 72% 66%, color-mix(in srgb, var(--card-accent) 32%, transparent), transparent 72%),
    radial-gradient(30% 34% at 60% 18%, color-mix(in srgb, var(--card-accent) 22%, transparent), transparent 74%);
  filter: blur(28px);
  opacity: .5;
  animation: glowStream 15s ease-in-out infinite alternate;
}
.course-card-wrap:nth-child(3n+2)::before { animation-delay: -5s;  animation-duration: 18s; }
.course-card-wrap:nth-child(3n+3)::before { animation-delay: -10s; animation-duration: 13s; }
.course-card-wrap:hover::before { opacity: .72; }
@keyframes glowStream {
  0%   { transform: translate(0,0)      scale(1);    }
  25%  { transform: translate(10px,-8px) scale(1.10); }
  50%  { transform: translate(-7px,10px) scale(1.16); }
  75%  { transform: translate(8px,7px)   scale(1.08); }
  100% { transform: translate(-9px,-6px) scale(1.12); }
}
/* re-stagger the INNER aurora now that cards sit inside wrappers; soften it
   slightly so inner + outer together aren't too intense */
.course-card::before { opacity: .78; }
.course-card-wrap:nth-child(3n+2) .course-card::before { animation-delay: -6s;  animation-duration: 21s; }
.course-card-wrap:nth-child(3n+3) .course-card::before { animation-delay: -12s; animation-duration: 16s; }
@media (prefers-reduced-motion: reduce) { .course-card-wrap::before { animation: none; } }

/* ── Fill more of the page ──────────────────────────────────────── */
.home-layout { max-width: 1260px; }
.courses-grid { gap: 28px; }          /* room for the glow to stream between cards */
.course-card { min-height: 208px; }

/* taller, bolder cards so the single row fills the canvas with presence */
.course-card { min-height: 270px; padding: 24px; }
.home-layout { min-height: calc(100vh - var(--topbar-h) - 40px); align-content: center; }
.courses-section { display: flex; flex-direction: column; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════
   REVISION: inside-the-card flow, no level graphic, zero blank space
   ══════════════════════════════════════════════════════════════════ */

/* hero without the level ring */
.home-hero { grid-template-columns: 1fr auto; }

/* glow lives INSIDE the card and visibly FLOWS (rotating soft color) */
.course-card-wrap::before { display: none; }   /* drop the outer extend */
.course-card::before {
  inset: -55%; width: auto; height: auto; right: auto; bottom: auto; z-index: 0;
  background: conic-gradient(from 0deg at 42% 38%,
    transparent 0deg,
    color-mix(in srgb, var(--card-accent) 52%, transparent) 55deg,
    transparent 130deg,
    color-mix(in srgb, var(--card-accent) 40%, transparent) 210deg,
    transparent 285deg,
    color-mix(in srgb, var(--card-accent) 48%, transparent) 340deg,
    transparent 360deg);
  filter: blur(26px);
  opacity: .8;
  animation: cardFlow 14s linear infinite;
}
@keyframes cardFlow { to { transform: rotate(1turn); } }
.course-card-wrap:nth-child(3n+2) .course-card::before { animation-delay: -5s; animation-duration: 17s; }
.course-card-wrap:nth-child(3n+3) .course-card::before { animation-delay: -10s; animation-duration: 11s; }
@media (prefers-reduced-motion: reduce) { .course-card::before { animation: none; } }

/* ── Zero blank space: fill the whole viewport ─────────────────── */
.home-layout {
  height: calc(100vh - 124px);   /* topbar margin 60 + #app padding 24+40 */
  min-height: 0; max-width: 1280px;
  align-content: stretch; align-items: stretch;
}
.courses-section { display: flex; flex-direction: column; min-height: 0; }
.courses-grid { flex: 1 1 auto; grid-auto-rows: 1fr; align-items: stretch; min-height: 0; }
.course-card { min-height: 0; height: 100%; }
.sidebar { height: 100%; position: static; }
.sidebar-block { flex: 1 1 0; max-height: none; min-height: 0; }

/* center the inside flow so color fills the whole (now tall) card evenly */
.course-card::before {
  inset: -35%;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,
    color-mix(in srgb, var(--card-accent) 50%, transparent) 50deg,
    transparent 120deg,
    color-mix(in srgb, var(--card-accent) 42%, transparent) 200deg,
    transparent 270deg,
    color-mix(in srgb, var(--card-accent) 48%, transparent) 330deg,
    transparent 360deg);
  filter: blur(32px);
  opacity: .85;
}

/* ══════════════════════════════════════════════════════════════════
   COLOR SPREAD + CALMER FLOW + LAYOUT FIX
   The background becomes the color engine: vibrant living mesh that
   shows THROUGH every translucent glass panel, so color is everywhere
   — not just the course cards.
   ══════════════════════════════════════════════════════════════════ */

/* richer, more present mesh hues + more translucent glass so color bleeds in */
:root {
  --mesh-1: rgba(7,112,227,.30);
  --mesh-2: rgba(124,58,237,.27);
  --mesh-3: rgba(8,145,178,.24);
  --glass-bg:  rgba(255,255,255,0.46);
  --glass-bg-2: rgba(255,255,255,0.34);
}
body.dark {
  --mesh-1: rgba(64,128,255,.34);
  --mesh-2: rgba(160,80,255,.28);
  --mesh-3: rgba(0,200,210,.24);
}
body::before { filter: blur(44px) saturate(1.3); opacity: 1; }

/* subtle colored wash on the side panels + hero so they carry hue too */
.sidebar-block, .home-hero, .calendar-grid-wrap, .cal-panel {
  position: relative; overflow: hidden;
}
.sidebar-block::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(90% 60% at 0% 0%, var(--mesh-1), transparent 60%),
              radial-gradient(80% 60% at 100% 100%, var(--mesh-3), transparent 60%);
  opacity: .5;
}
.sidebar-block > * { position: relative; z-index: 1; }

/* calmer card flow — slower + softer so it's not obnoxious */
.course-card::before { opacity: .5; animation-duration: 32s; }
.course-card-wrap:nth-child(3n+2) .course-card::before { animation-duration: 38s; }
.course-card-wrap:nth-child(3n+3) .course-card::before { animation-duration: 28s; }

/* LAYOUT FIX: stop empty panels ballooning; let the colorful canvas fill space */
.home-layout {
  height: auto; min-height: calc(100vh - 124px);
  align-content: center; align-items: start;
}
.courses-grid { grid-auto-rows: auto; }
.course-card { height: auto; min-height: 210px; }
.sidebar { height: auto; position: sticky; top: calc(var(--topbar-h) + 24px); }
.sidebar-block { flex: 0 0 auto; max-height: 360px; }

/* ── Revert: STATIC per-course card color (no flowing animation) ── */
.course-card::before {
  inset: 0; width: auto; height: auto; right: auto; bottom: auto;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--card-accent) 30%, transparent), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--card-accent) 16%, transparent), transparent 60%);
  filter: none;
  opacity: .9;
  animation: none;                       /* no more rotating/flowing color */
}
.course-card-wrap::before { display: none; }     /* outer glow stays off */
.course-progress-fill {
  animation: none;                       /* static progress color */
  background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 62%, #fff), var(--card-accent));
  background-size: auto;
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN CONSISTENCY: one theme color everywhere, per-class SHADES
   Cards, progress bars, badges, hero bar and the background all derive
   from --accent. Each class is just a lighter/deeper shade of it.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --accent-2: color-mix(in srgb, var(--accent) 60%, #ffffff);   /* lighter shade */
  --accent-3: color-mix(in srgb, var(--accent) 82%, #101433);   /* deeper shade  */
  --mesh-1: color-mix(in srgb, var(--accent)   30%, transparent);
  --mesh-2: color-mix(in srgb, var(--accent-2) 30%, transparent);
  --mesh-3: color-mix(in srgb, var(--accent-3) 28%, transparent);
}
body.dark {
  --accent-2: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --accent-3: color-mix(in srgb, var(--accent) 70%, #6f86ff);
  --mesh-1: color-mix(in srgb, var(--accent)   42%, transparent);
  --mesh-2: color-mix(in srgb, var(--accent-2) 36%, transparent);
  --mesh-3: color-mix(in srgb, var(--accent-3) 34%, transparent);
}

/* each class = a different shade of the SAME theme color (target the card so
   it beats the card's own --card-accent default) */
.course-card-wrap:nth-child(3n+1) .course-card { --card-accent: var(--accent);   }
.course-card-wrap:nth-child(3n+2) .course-card { --card-accent: var(--accent-2); }
.course-card-wrap:nth-child(3n+3) .course-card { --card-accent: var(--accent-3); }

/* hero progress bar in the same family (was multi-hue purple/teal) */
.xp-fill { background: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3)); animation: none; }

/* a little more flow/movement in the background */
body::before { animation-duration: 24s; }
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0)     scale(1);    }
  50%  { transform: translate3d(5%,-4%,0)  scale(1.14); }
  100% { transform: translate3d(-5%,4%,0)  scale(1.08); }
}

/* ── Custom inline icons: size to text so they sit like the old emoji ── */
.ico {
  width: 1.05em; height: 1.05em;
  display: inline-block; vertical-align: -0.16em;
  flex-shrink: 0;
}
.xp-chip .bolt .ico { vertical-align: -0.2em; }

/* custom icons take the theme color + a soft glow */
.ico {
  color: var(--accent);
  filter: drop-shadow(0 0 1.6px color-mix(in srgb, var(--accent) 55%, transparent));
}

/* ── Consolidated sub-toggle (Planner: List/Month · Library: Notes/Files) ── */
.subnav {
  display: inline-flex; gap: 4px; padding: 4px;
  margin: 0 0 18px; border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 var(--glass-hi) inset;
}
.subnav-btn {
  padding: 6px 18px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}
.subnav-btn:hover { color: var(--text); }
.subnav-btn.active {
  color: #fff; background: var(--accent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

/* ── Topbar utility buttons: theme color + glow (incl. dark-mode toggle) ── */
.theme-toggle, .search-toggle-btn, .settings-gear-btn { color: var(--accent); }
.theme-toggle svg, .search-toggle-btn svg, .settings-gear-btn svg {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent));
  transition: filter var(--transition), transform .2s var(--spring);
}
.theme-toggle:hover svg, .search-toggle-btn:hover svg, .settings-gear-btn:hover svg {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 75%, transparent));
  transform: scale(1.1);
}
.settings-gear-btn.active svg { filter: drop-shadow(0 0 8px var(--accent)); }

/* ══════════════════════════════════════════════════════════════════
   Sub-tabs centered & prominent · redundant titles removed · nav glow
   ══════════════════════════════════════════════════════════════════ */

/* center the sub-toggle up top and make it the obvious header */
.subnav {
  display: flex; width: fit-content;
  margin: 2px auto 24px; padding: 5px; gap: 6px;
}
.subnav-btn { padding: 9px 26px; font-size: 14.5px; }

/* drop page titles that now just repeat the tab/section */
#page-todos > .page-header > .page-title { display: none; }
#page-todos > .page-header { justify-content: flex-end; }   /* keep +Add Todo on the right */
#page-notes > .page-header { display: none; }               /* header only held the title */

/* nav: glow under/behind the active item for emphasis */
.nav-btn { position: relative; }
.nav-btn.active {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent) inset,
    0 7px 20px -5px color-mix(in srgb, var(--accent) 75%, transparent);
}
.nav-btn.active::after {            /* soft glow bloom from beneath */
  content: ''; position: absolute; left: 50%; bottom: -6px; translate: -50% 0;
  width: 70%; height: 12px; border-radius: 50%;
  background: var(--accent); filter: blur(9px); opacity: .55; z-index: -1;
  pointer-events: none;
}
.nav-btn.active svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent)); }
.nav-btn:hover svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); }

/* keep the nav glow INSIDE the bar — no spill below the nav line */
.topbar { overflow: hidden; }
.nav-btn.active::after { display: none; }     /* drop the downward bloom */
.nav-btn.active {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent),
    0 0 16px -2px color-mix(in srgb, var(--accent) 65%, transparent);   /* symmetric halo, clipped by topbar */
}

/* ── Planner: calendar + list merged, side by side ─────────────── */
.planner-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px; align-items: start;
}
@media (max-width: 980px) { .planner-layout { grid-template-columns: 1fr; } }
.planner-cal, .planner-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.planner-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.planner-month { font-size: 18px; font-weight: 700; color: var(--text); }
.planner-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── Active nav: glow only, no box ─────────────────────────────── */
.nav-btn.active {
  background: transparent;
  box-shadow: 0 0 18px -3px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ── Topbar icons: bright + themed in dark so they're actually visible ── */
body.dark .theme-toggle,
body.dark .search-toggle-btn,
body.dark .settings-gear-btn { color: color-mix(in srgb, var(--accent) 42%, #ffffff); }

/* Active nav: NO box/halo — only the icon and word glow */
.nav-btn.active { background: transparent; box-shadow: none; }
.nav-btn.active span {
  color: var(--accent);
  text-shadow: 0 0 9px color-mix(in srgb, var(--accent) 70%, transparent);
}
.nav-btn.active svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 80%, transparent));
}

/* Planner agenda (right column) */
.planner-list .cal-panel { width: 100%; }
.cal-event-when { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 600; white-space: nowrap; padding-left: 8px; }

/* ══════════════════════════════════════════════════════════════════
   Flattened assignment detail modal (readable document, no nested boxes)
   ══════════════════════════════════════════════════════════════════ */
.detail-head { padding-top: 20px; display: flex; flex-direction: column; gap: 6px; border-bottom: none; }
.detail-title { font-size: 22px; line-height: 1.25; }
.detail-course-name { font-size: 14px; }
.detail-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 13px; color: var(--text-2); font-weight: 500;
}
.detail-meta .dm { display: inline-flex; align-items: center; gap: 5px; }
.detail-meta .dm-sep { opacity: .4; }
.detail-meta .dm-alert { color: var(--red); font-weight: 600; }
.detail-meta .dm-grade { color: var(--green); font-weight: 600; }
.detail-meta .dm-status { text-transform: capitalize; }

.detail-body {
  font-size: 15px; line-height: 1.75; color: var(--text); word-break: break-word;
  border-top: 1px solid var(--border-subtle); padding-top: 16px;
  /* NO box: renders directly on the modal; the whole modal scrolls */
}
.detail-body > :first-child { margin-top: 0; }
.detail-body p { margin: 0 0 12px; }
.detail-body p:last-child { margin-bottom: 0; }
.detail-body ul, .detail-body ol { margin: 0 0 12px 1.3em; }
.detail-body li { margin: 4px 0; }
.detail-body a { color: var(--accent); text-decoration: underline; }
.detail-body strong, .detail-body b, .detail-body h1, .detail-body h2, .detail-body h3, .detail-body h4 { color: var(--text); }
.detail-body h1, .detail-body h2, .detail-body h3, .detail-body h4 { font-size: 15.5px; font-weight: 700; margin: 16px 0 6px; }
.detail-body img { max-width: 100%; border-radius: 8px; }
.detail-empty { color: var(--text-3); font-style: italic; }
.detail-notes { color: var(--text-2); }
.detail-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-3); margin-bottom: 8px; }
.detail-actions { display: flex; justify-content: flex-end; padding-top: 8px; }

/* Clean: drop the hard line between nav and page (soft shadow instead) */
.topbar { border-bottom: none; box-shadow: 0 8px 24px -16px rgba(0,0,0,.55); }
body.light .topbar { box-shadow: 0 8px 22px -18px rgba(0,0,0,.22); }

/* ── Detail modal: one glass card, no inner seam, glowing close ── */
/* body is transparent so the card's glass shows through (kills the line under ✕) */
.detail-modal-body {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.modal.modal-lg { position: relative; overflow: hidden; }
.modal.modal-lg::before {            /* glass colour wash for vibe */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(90% 55% at 0% 0%, var(--mesh-1), transparent 55%),
    radial-gradient(80% 55% at 100% 0%, var(--mesh-2), transparent 55%);
  opacity: .5;
}
.modal.modal-lg > * { position: relative; z-index: 1; }

/* glowing close button */
#closeDetailModal { color: var(--accent); }
body.dark #closeDetailModal { color: color-mix(in srgb, var(--accent) 42%, #ffffff); }
#closeDetailModal svg {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 60%, transparent));
  transition: filter var(--transition), transform .2s var(--spring);
}
#closeDetailModal:hover svg {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 80%, transparent));
  transform: scale(1.12);
}

/* ── Submission display + tags (assignment previews) ───────────── */
.assign-status-tag.submitted-mark { background: var(--accent-subtle); color: var(--accent); }
/* Distinct tinted card so the user's submission stands apart from the prompt. */
.detail-submission {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 16px;
}
.detail-submission-text { white-space: pre-wrap; }
.db-preview-submission { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; }
.detail-submission .submission-link,
.db-preview-section .db-preview-canvas-link.submission-link { word-break: break-all; }
.submission-link { display: inline-block; color: var(--accent); text-decoration: none; margin: 4px 0; }
.submission-link:hover { text-decoration: underline; }
.db-card { position: relative; }
.db-card-tag {
  position: absolute; top: 8px; right: 8px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
}

/* ── Library → Archive (desktop of old classes) ────────────────── */
.archive-body { display: flex; flex-direction: column; gap: 28px; padding: 4px 0 40px; }
.archive-term-head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.archive-term-title { font-size: 16px; font-weight: 700; color: var(--text); }
.archive-term-date { font-size: 12px; color: var(--text-3); }
.archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.archive-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.archive-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.archive-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.archive-card-name { font-weight: 600; color: var(--text); line-height: 1.3; }
.archive-card-sub { font-size: 12px; color: var(--text-3); }

/* Submitted assignments stand out in the class-tab list. */
.assignment-item.has-submission { border-left: 3px solid var(--accent); }
.assignment-item.has-submission .assign-title { color: var(--text); }

/* ── Per-class Grades tab ──────────────────────────────────────── */
.grades-wrap { padding: 2px 0 24px; }
.grades-total { font-size: 14px; color: var(--text-2); margin: 4px 0 14px; }
.grades-total b { color: var(--text); font-size: 17px; margin-left: 4px; }
.grades-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.grade-row {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 0.9fr; gap: 12px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s ease;
}
.grade-row:last-child { border-bottom: none; }
.grade-row:hover:not(.grade-head) { background: var(--surface-2); }
.grade-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); font-weight: 700; cursor: default; background: var(--surface-2);
}
.grade-name { font-weight: 600; color: var(--text); }
.grade-due, .grade-sub { color: var(--text-2); font-size: 13px; }
.grade-score-col { text-align: right; }
.grade-score-col b { color: var(--text); }

/* ── Per-class Modules timeline (landing) ──────────────────────── */
.mod-timeline { display: flex; flex-direction: column; gap: 22px; padding: 2px 0 28px; }
.mod-section { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.mod-section-head {
  padding: 11px 16px; font-weight: 700; font-size: 14px; color: var(--text);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.mod-item-list { display: flex; flex-direction: column; }
.mod-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  color: var(--text); font-size: 14px;
}
.mod-item:last-child { border-bottom: none; }
.mod-item.clickable { cursor: pointer; transition: background .1s ease; }
.mod-item.clickable:hover { background: var(--surface-2); }
.mod-ico { color: var(--text-3); flex: none; }
.mod-item-title { flex: 1; }
.mod-item-due { color: var(--text-3); font-size: 12px; }
.mod-subheader {
  padding: 9px 16px 5px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-3); border-bottom: 1px solid var(--border);
}

/* ── Canvas-style grades (what-if + weighting) ──────────────────────────────── */
.grades-layout {
  display: grid; grid-template-columns: 1fr 240px; gap: 20px; align-items: start;
  padding: 8px 4px 24px;
}
.grades-main { min-width: 0; }
.grades-table-v2 { display: flex; flex-direction: column; }
.gv-row {
  display: grid; grid-template-columns: 2.4fr 1fr 0.9fr 1.1fr; gap: 10px;
  align-items: center; padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
.gv-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.gv-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gv-link { color: var(--accent); font-weight: 600; cursor: pointer; }
.gv-link:hover { text-decoration: underline; }
.gv-cat { font-size: 11px; color: var(--text-3); }
.gv-due { color: var(--text-2); font-size: 13px; }
.gv-status { display: flex; }
.gv-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
}
.gv-tag-ok   { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.gv-tag-late { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.gv-tag-miss { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.gv-score-col { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.gv-input {
  width: 56px; text-align: right; padding: 5px 8px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px;
  color: var(--text); transition: border-color .15s, background .15s;
}
.gv-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.gv-poss { color: var(--text-3); font-size: 13px; white-space: nowrap; }
.gv-row-dirty .gv-input { border-color: var(--accent); color: var(--accent); }

/* Footer: weighted group breakdown + total */
.grades-foot { margin-top: 14px; border-top: 2px solid var(--border); }
.gv-grouphead {
  display: grid; grid-template-columns: 2.4fr 1fr 1.4fr 1fr; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); padding: 10px 12px 6px;
}
.gv-grouprow {
  display: grid; grid-template-columns: 2.4fr 1fr 1.4fr 1fr; gap: 10px;
  padding: 8px 12px; font-size: 13px; color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.gv-grouprow .gv-gname { color: var(--text); font-weight: 600; }
.gv-totalrow {
  display: grid; grid-template-columns: 2.4fr 1fr 1.4fr 1fr; gap: 10px;
  padding: 12px; font-weight: 700; font-size: 15px; color: var(--text);
  border-top: 1px solid var(--border);
}
.gv-totalrow-simple { grid-template-columns: 1fr auto auto; }
.gv-totalrow .gv-gpct, .gv-grouprow .gv-gpct { text-align: right; }

/* Right summary card */
.grades-summary {
  position: sticky; top: calc(var(--topbar-h) + 12px);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.gs-total { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text); }
.grades-whatif .gs-total { color: var(--accent); }
.gs-letter { font-size: 16px; font-weight: 700; color: var(--text-2); }
.gs-note { font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.gs-toggle {
  display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2);
  cursor: pointer; line-height: 1.35;
}
.gs-toggle input { margin-top: 1px; accent-color: var(--accent); }
.gs-reset {
  margin-top: 4px; padding: 7px 10px; font-size: 12px; font-weight: 600;
  background: var(--accent-subtle); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 8px; cursor: pointer;
}
.gs-reset:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.gs-hint { font-size: 11px; color: var(--text-3); line-height: 1.4; }

@media (max-width: 760px) {
  .grades-layout { grid-template-columns: 1fr; }
  .grades-summary { position: static; order: -1; }
}

/* ── Inline class panel on Home (desk-style expand) ─────────────────────────── */
.home-course-panel {
  grid-column: 1 / -1;          /* span full width, under the courses + to-dos */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1), opacity .3s ease, margin-top .4s cubic-bezier(.4,0,.2,1);
}
.home-course-panel.open { grid-template-rows: 1fr; opacity: 1; margin-top: 22px; }
.home-course-panel > .hcp-inner {
  overflow: hidden; min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.hcp-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.hcp-title { flex: 1; font-size: 17px; font-weight: 700; color: var(--text); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcp-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.hcp-expand, .hcp-close {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; color: var(--text-3); background: transparent;
  transition: background .15s, color .15s;
}
.hcp-expand:hover, .hcp-close:hover { background: var(--surface-2); color: var(--text); }
.hcp-inner .tab-bar { padding: 0 18px; }
.hcp-inner .tab-content { padding: 4px 18px 18px; }

/* content cross-fade when swapping classes without re-animating height */
.hcp-inner.hcp-swap .tab-content { animation: hcpFade .26s ease; }
@keyframes hcpFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* selected card glow + "push aside" dimming of the others */
.course-card { transition: opacity .3s ease, box-shadow .25s ease, border-color .2s ease; }
.course-card.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 30px -16px var(--accent);
}
.courses-grid.has-open .course-card:not(.is-open) { opacity: .55; }
.courses-grid.has-open .course-card:not(.is-open):hover { opacity: .85; }

/* ── Planner inline preview (fills the negative space below the calendar) ────── */
.planner-detail { grid-column: 1 / -1; margin-top: 18px; }
.planner-detail[hidden] { display: none; }
.pd-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 24px;
  animation: hcpFade .28s ease;
}
.pd-close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; color: var(--text-3); background: transparent;
}
.pd-close:hover { background: var(--surface-2); color: var(--text); }
.pd-card .detail-modal-body { max-height: none; overflow: visible; padding: 0; }
.pd-card .detail-title { padding-right: 40px; }

/* ── Home class panel: in-panel preview + tab swipe + tidy layout ────────────── */
/* When a class is open, leave the centered full-height dashboard mode for a
   top-aligned flow so nothing overlaps and the to-dos sit in line with the hero. */
.home-layout.class-open { align-content: start; min-height: 0; }
.home-layout.class-open .courses-section { justify-content: flex-start; flex: 0 0 auto; }
.home-layout.class-open .courses-grid { flex: 0 0 auto; grid-auto-rows: auto; }
.home-layout.class-open .course-card { height: auto; min-height: 0; }
.home-layout.class-open .sidebar { height: auto; position: static; }
.home-layout.class-open .sidebar-block { flex: 0 0 auto; max-height: 320px; }

/* The class panel body splits: module/tab page (left) + preview card (right) */
.hcp-body { display: flex; align-items: stretch; }
.hcp-body > #hcpTabContent { flex: 1 1 auto; min-width: 0; }
.hcp-preview {
  flex: 0 0 0%;
  min-width: 0; overflow: hidden;
  border-left: 1px solid var(--border);
  opacity: 0;
  transition: flex-basis .34s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.hcp-preview[hidden] { display: none; }
.hcp-body.preview-open .hcp-preview { flex: 0 0 46%; opacity: 1; }
.hcp-body.preview-open > #hcpTabContent { flex: 1 1 54%; }
.hcp-preview-card { position: relative; padding: 16px 20px 20px; }
.hcp-preview-card .detail-modal-body { max-height: 68vh; overflow-y: auto; overscroll-behavior: contain; padding: 0; }
.hcp-preview-card .detail-title { padding-right: 40px; }

/* Side-swipe between tabs (no blank-blink) */
@keyframes tabSwipeIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.tab-content.tab-swipe-in { animation: tabSwipeIn .26s cubic-bezier(.4,0,.2,1); }
.tab-content { transition: opacity .15s ease; }

/* ── Wider canvas — push content toward the edges, less negative space ───────── */
#app { max-width: min(1720px, 95vw); }
.home-layout { max-width: none; }
.home-layout.class-open { max-width: none; }

/* ── Planner: Week/Month toggle + Today + Week view ─────────────────────────── */
.planner-cal-head { gap: 8px; }
.cal-today-btn {
  padding: 5px 12px; font-size: 13px; font-weight: 600; border-radius: 8px;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border);
}
.cal-today-btn:hover { color: var(--accent); border-color: var(--accent); }
.cal-view-toggle {
  margin-left: auto; display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.cal-view-btn {
  padding: 5px 12px; font-size: 13px; font-weight: 600; border-radius: 7px;
  color: var(--text-2); background: transparent;
}
.cal-view-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* Week view: 7 columns, each a day list */
.calendar-grid-wrap.view-week .cal-weekdays { display: none; }
.calendar-grid-wrap.view-week .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
}
.week-col { border-left: 1px solid var(--border); min-height: 360px; display: flex; flex-direction: column; }
.week-col:first-child { border-left: none; }
.week-col-head {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.week-dow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
.week-dnum { font-size: 18px; font-weight: 700; color: var(--text); }
.week-col.today .week-dnum {
  background: var(--accent); color: #fff; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
}
.week-col-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; flex: 1; }
.week-empty { text-align: center; color: var(--text-3); font-size: 13px; padding-top: 8px; }
.week-chip {
  border-left: 3px solid var(--cc, var(--accent));
  background: color-mix(in srgb, var(--cc, var(--accent)) 12%, transparent);
  border-radius: 6px; padding: 6px 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  transition: background .15s ease;
}
.week-chip:hover { background: color-mix(in srgb, var(--cc, var(--accent)) 22%, transparent); }
.week-chip-time { font-size: 11px; font-weight: 600; color: var(--cc, var(--accent)); }
.week-chip-title { font-size: 12.5px; color: var(--text); line-height: 1.3; }
.week-chip.is-event .week-chip-title { font-weight: 600; }