/* ==========================================================================
   Lumen LMS — app shell, layout utilities and page-level patterns
   Built on shadcn.css tokens. Designed as a Moodle front-end redesign.
   ========================================================================== */

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: 16.5rem 1fr; min-height: 100vh; transition: grid-template-columns .25s ease; }
.app.collapsed { grid-template-columns: 4rem 1fr; }
.app.focus-mode { grid-template-columns: 0 1fr; }
.app.focus-mode .sidebar { visibility: hidden; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: hsl(var(--sidebar));
  border-right: 1px solid hsl(var(--border)); overflow: hidden; z-index: 40;
}
.sidebar-header { display: flex; align-items: center; gap: .625rem; height: 3.75rem; padding: 0 1rem; flex-shrink: 0; }
.brand-mark {
  width: 2rem; height: 2rem; border-radius: .5rem; display: grid; place-items: center; flex-shrink: 0;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
}
.brand-mark [data-lucide], .brand-mark .lucide { width: 1.1rem; height: 1.1rem; }
.brand-name { font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.brand-sub { font-size: .7rem; color: hsl(var(--muted-foreground)); }
.sidebar-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .25rem .75rem 1rem; }
.nav-group { margin-top: 1rem; }
.nav-group-label { padding: 0 .5rem .375rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--muted-foreground)); white-space: nowrap; }
.nav-item {
  display: flex; align-items: center; gap: .75rem; height: 2.125rem; padding: 0 .625rem; border-radius: calc(var(--radius) - 2px);
  font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; transition: background .12s, color .12s;
}
.nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
[data-theme="dark"][data-accent="zinc"] .nav-item.active { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.nav-item .nav-badge { margin-left: auto; font-size: .7rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 9999px; display: grid; place-items: center; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; }
.nav-item .nav-badge.muted-badge { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.sidebar-footer { padding: .75rem; border-top: 1px solid hsl(var(--border)); flex-shrink: 0; }
.user-chip { display: flex; align-items: center; gap: .625rem; width: 100%; padding: .375rem; border-radius: calc(var(--radius) - 2px); text-align: left; }
.user-chip:hover { background: hsl(var(--accent)); }
.streak-card { margin: 1rem .25rem 0; padding: .875rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }

.app.collapsed .nav-group-label, .app.collapsed .nav-label, .app.collapsed .nav-badge, .app.collapsed .brand-text,
.app.collapsed .streak-card, .app.collapsed .user-meta, .app.collapsed .user-chip > [data-lucide], .app.collapsed .user-chip > .lucide { display: none; }
.app.collapsed .nav-item { justify-content: center; padding: 0; }
.app.collapsed .sidebar-header { justify-content: center; padding: 0; }
.app.collapsed .sidebar-body { padding: .25rem .5rem; }
.app.collapsed .nav-group { margin-top: .75rem; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 3.75rem; display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem;
  background: hsl(var(--background) / .85); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid hsl(var(--border));
}
.search-trigger {
  display: flex; align-items: center; gap: .5rem; height: 2.25rem; width: 100%; max-width: 22rem; padding: 0 .5rem 0 .75rem;
  border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); background: hsl(var(--muted) / .4);
  color: hsl(var(--muted-foreground)); font-size: .875rem; box-shadow: var(--shadow-sm);
}
.search-trigger:hover { background: hsl(var(--accent)); }
.search-trigger .kbd { margin-left: auto; }
.topbar-actions { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.notif-dot { position: absolute; top: .45rem; right: .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: hsl(var(--destructive)); box-shadow: 0 0 0 2px hsl(var(--background)); }
.page { padding: 1.5rem; max-width: 90rem; width: 100%; margin: 0 auto; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.mobile-only { display: none !important; }

@media (max-width: 1024px) {
  .app, .app.collapsed, .app.focus-mode { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; width: 17rem; transform: translateX(-100%); transition: transform .25s ease; z-index: 85; }
  .app.mobile-open .sidebar { transform: none; }
  .app.collapsed .nav-group-label, .app.collapsed .nav-label, .app.collapsed .brand-text, .app.collapsed .user-meta { display: revert; }
  .mobile-only { display: inline-flex !important; }
  .desktop-only { display: none !important; }
}
@media (max-width: 640px) {
  .page { padding: 1rem; }
  .topbar { padding: 0 .75rem; }
  .search-trigger .search-label, .search-trigger .kbd { display: none; }
  .search-trigger { width: 2.25rem; padding: 0; justify-content: center; }
  .h1 { font-size: 1.5rem; }
}

/* ---------- Layout utilities ---------- */
.flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } .block { display: block; }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; min-width: 0; } .shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-full { grid-column: 1 / -1; }
.layout-main-aside { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
.layout-aside-main { display: grid; gap: 1.5rem; grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
.sticky-top { position: sticky; top: 5rem; }
.stack > * + * { margin-top: 1rem; } .stack-sm > * + * { margin-top: .5rem; } .stack-lg > * + * { margin-top: 1.5rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .ml-auto { margin-left: auto; }
.p-0 { padding: 0 !important; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; } .pt-0 { padding-top: 0 !important; }
.w-full { width: 100%; } .h-full { height: 100%; } .min-w-0 { min-width: 0; }
.text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; } .text-right { text-align: right; } .text-center { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-primary { color: hsl(var(--primary)); } .text-success { color: hsl(var(--success)); } .text-warning { color: hsl(var(--warning)); } .text-destructive { color: hsl(var(--destructive)); }
.rounded { border-radius: var(--radius); } .rounded-full { border-radius: 9999px; } .border { border: 1px solid hsl(var(--border)); } .border-t { border-top: 1px solid hsl(var(--border)); } .border-b { border-bottom: 1px solid hsl(var(--border)); }
.bg-muted { background: hsl(var(--muted)); } .bg-card { background: hsl(var(--card)); } .relative { position: relative; } .overflow-hidden { overflow: hidden; }
.icon-sm [data-lucide], .icon-sm .lucide, .lucide.icon-sm { width: .875rem; height: .875rem; }
.icon-lg, .icon-lg.lucide { width: 1.25rem !important; height: 1.25rem !important; }

@media (max-width: 1280px) { .layout-main-aside { grid-template-columns: minmax(0, 1fr) 18rem; } }
@media (max-width: 1100px) {
  .layout-main-aside, .layout-aside-main { grid-template-columns: minmax(0, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-top { position: static; }
}
@media (max-width: 760px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .sm-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- Shared patterns ---------- */
.icon-tile { width: 2.25rem; height: 2.25rem; border-radius: calc(var(--radius) - 2px); display: grid; place-items: center; flex-shrink: 0; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.icon-tile.lg { width: 2.75rem; height: 2.75rem; }
.icon-tile.t-orange { background: hsl(24 95% 53% / .12); color: hsl(24 90% 48%); }
.icon-tile.t-green  { background: hsl(142 71% 40% / .12); color: hsl(142 71% 35%); }
.icon-tile.t-violet { background: hsl(262 83% 58% / .12); color: hsl(262 70% 55%); }
.icon-tile.t-rose   { background: hsl(347 77% 50% / .12); color: hsl(347 77% 50%); }
.icon-tile.t-amber  { background: hsl(38 92% 50% / .14); color: hsl(32 92% 42%); }
.icon-tile.t-sky    { background: hsl(199 89% 48% / .12); color: hsl(199 89% 40%); }
.icon-tile.t-muted  { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
[data-theme="dark"] .icon-tile.t-orange { color: hsl(24 95% 62%); } [data-theme="dark"] .icon-tile.t-green { color: hsl(142 69% 55%); }
[data-theme="dark"] .icon-tile.t-violet { color: hsl(262 83% 72%); } [data-theme="dark"] .icon-tile.t-rose { color: hsl(347 77% 65%); }
[data-theme="dark"] .icon-tile.t-amber { color: hsl(38 92% 60%); } [data-theme="dark"] .icon-tile.t-sky { color: hsl(199 89% 60%); }

.stat-label { font-size: .875rem; font-weight: 500; color: hsl(var(--muted-foreground)); }
.stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.delta { display: inline-flex; align-items: center; gap: .125rem; font-size: .75rem; font-weight: 600; }
.delta.up { color: hsl(var(--success)); } .delta.down { color: hsl(var(--destructive)); }
.delta [data-lucide], .delta .lucide { width: .8rem; height: .8rem; }

/* Course cover art (generated, no images needed) */
.cover { position: relative; height: 8.5rem; border-radius: calc(var(--radius) + 2px) calc(var(--radius) + 2px) 0 0; overflow: hidden; display: flex; align-items: flex-end; padding: .875rem; color: #fff; }
.cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgb(255 255 255 / .25), transparent 45%), radial-gradient(circle at 10% 110%, rgb(0 0 0 / .25), transparent 50%); }
.cover > * { position: relative; }
.cover .cover-icon { position: absolute; right: 1rem; top: 1rem; opacity: .9; }
.cover .cover-icon [data-lucide], .cover .cover-icon .lucide { width: 2.25rem; height: 2.25rem; stroke-width: 1.5; }
.cover-1 { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.cover-2 { background: linear-gradient(135deg, #ea580c, #db2777); }
.cover-3 { background: linear-gradient(135deg, #059669, #0891b2); }
.cover-4 { background: linear-gradient(135deg, #7c3aed, #c026d3); }
.cover-5 { background: linear-gradient(135deg, #0f172a, #334155); }
.cover-6 { background: linear-gradient(135deg, #ca8a04, #ea580c); }
.cover-7 { background: linear-gradient(135deg, #0284c7, #4f46e5); }
.cover-8 { background: linear-gradient(135deg, #be123c, #9333ea); }
.cover-sm { height: auto; width: 3rem; height: 3rem; border-radius: calc(var(--radius) - 2px); padding: 0; align-items: center; justify-content: center; flex-shrink: 0; }
.cover-sm [data-lucide], .cover-sm .lucide { width: 1.25rem; height: 1.25rem; }

/* Hero / welcome banner */
.hero {
  position: relative; overflow: hidden; border-radius: calc(var(--radius) + 4px); padding: 1.5rem; border: 1px solid hsl(var(--border));
  background: radial-gradient(1200px 300px at 0% 0%, hsl(var(--primary) / .12), transparent 60%), radial-gradient(600px 300px at 100% 100%, hsl(262 83% 58% / .1), transparent 60%), hsl(var(--card));
}

/* List rows */
.list-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; }
.list-row + .list-row { border-top: 1px solid hsl(var(--border)); }
.list-row-hover { margin: 0 -.75rem; padding: .75rem; border-radius: calc(var(--radius) - 2px); }
.list-row-hover:hover { background: hsl(var(--muted) / .6); }
.list-row-hover + .list-row-hover { border-top: 0; }

/* Timeline */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: .4375rem; top: .375rem; bottom: .375rem; width: 2px; background: hsl(var(--border)); }
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -1.5rem; top: .25rem; width: 1rem; height: 1rem; border-radius: 50%; background: hsl(var(--background)); border: 2px solid hsl(var(--primary)); }
.timeline-dot.done { background: hsl(var(--success)); border-color: hsl(var(--success)); }
.timeline-dot.late { border-color: hsl(var(--destructive)); }

/* Empty state */
.empty { display: grid; place-items: center; text-align: center; gap: .5rem; padding: 3rem 1rem; border: 1px dashed hsl(var(--border)); border-radius: var(--radius); }

/* Chat */
.chat-msg { display: flex; gap: .625rem; max-width: 85%; }
.chat-msg.me { margin-left: auto; flex-direction: row-reverse; }
.bubble { padding: .5rem .75rem; border-radius: 1rem; background: hsl(var(--muted)); font-size: .875rem; line-height: 1.45; }
.chat-msg.me .bubble { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-bottom-right-radius: .25rem; }
.chat-msg:not(.me) .bubble { border-bottom-left-radius: .25rem; }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1px; border-radius: 50%; background: currentColor; opacity: .4; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: 1; } }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.kanban-col { background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: .75rem; min-height: 12rem; }
.kanban-col.drag-over { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .05); }
.kanban-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); padding: .75rem; box-shadow: var(--shadow-sm); cursor: grab; }
.kanban-card + .kanban-card { margin-top: .5rem; }
.kanban-card.dragging { opacity: .5; }

/* Drag-sortable builder */
.drag-handle { cursor: grab; color: hsl(var(--muted-foreground)); }
.sortable-item.dragging { opacity: .4; }
.sortable-item.drop-target { box-shadow: 0 -2px 0 hsl(var(--primary)); }

/* Activity type colours (Moodle module icons) */
.mod { width: 2rem; height: 2rem; border-radius: .5rem; display: grid; place-items: center; flex-shrink: 0; }
.mod [data-lucide], .mod .lucide { width: 1rem; height: 1rem; }
.mod-assign { background: hsl(330 81% 60% / .14); color: hsl(330 70% 50%); }
.mod-quiz { background: hsl(262 83% 58% / .14); color: hsl(262 70% 55%); }
.mod-forum { background: hsl(199 89% 48% / .14); color: hsl(199 89% 38%); }
.mod-page { background: hsl(142 71% 40% / .14); color: hsl(142 71% 32%); }
.mod-video { background: hsl(0 84% 60% / .14); color: hsl(0 72% 50%); }
.mod-file { background: hsl(38 92% 50% / .16); color: hsl(32 92% 40%); }
.mod-live { background: hsl(173 80% 40% / .14); color: hsl(173 80% 30%); }
.mod-h5p { background: hsl(221 83% 53% / .14); color: hsl(221 83% 50%); }
[data-theme="dark"] .mod-assign { color: hsl(330 81% 70%); } [data-theme="dark"] .mod-quiz { color: hsl(262 83% 75%); }
[data-theme="dark"] .mod-forum { color: hsl(199 89% 62%); } [data-theme="dark"] .mod-page { color: hsl(142 69% 55%); }
[data-theme="dark"] .mod-video { color: hsl(0 84% 70%); } [data-theme="dark"] .mod-file { color: hsl(38 92% 60%); }
[data-theme="dark"] .mod-live { color: hsl(173 80% 50%); } [data-theme="dark"] .mod-h5p { color: hsl(221 83% 68%); }

/* Completion check */
.complete-btn { width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid hsl(var(--border)); display: grid; place-items: center; color: transparent; flex-shrink: 0; transition: all .15s; }
.complete-btn:hover { border-color: hsl(var(--success)); }
.complete-btn.done { background: hsl(var(--success)); border-color: hsl(var(--success)); color: #fff; }
.complete-btn [data-lucide], .complete-btn .lucide { width: .8rem; height: .8rem; stroke-width: 3; }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head { padding: .5rem; font-size: .75rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-align: right; border-bottom: 1px solid hsl(var(--border)); }
.cal-cell { min-height: 7rem; padding: .375rem; border-right: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.other { background: hsl(var(--muted) / .35); color: hsl(var(--muted-foreground)); }
.cal-day { align-self: flex-end; font-size: .75rem; font-weight: 600; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; }
.cal-cell.today .cal-day { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.cal-event { font-size: .7rem; font-weight: 500; padding: 1px .375rem; border-radius: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; cursor: pointer; }
.ev-blue { background: hsl(221 83% 53% / .12); border-color: hsl(221 83% 53%); }
.ev-orange { background: hsl(24 95% 53% / .12); border-color: hsl(24 95% 53%); }
.ev-green { background: hsl(142 71% 40% / .12); border-color: hsl(142 71% 40%); }
.ev-violet { background: hsl(262 83% 58% / .12); border-color: hsl(262 83% 58%); }
.ev-rose { background: hsl(347 77% 50% / .12); border-color: hsl(347 77% 50%); }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .75rem; }
.mini-cal > span { height: 2rem; display: grid; place-items: center; border-radius: calc(var(--radius) - 4px); position: relative; }
.mini-cal .dow { color: hsl(var(--muted-foreground)); font-weight: 500; height: 1.5rem; }
.mini-cal .dim { color: hsl(var(--muted-foreground) / .5); }
.mini-cal .today { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-weight: 600; }
.mini-cal .has-ev::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: hsl(var(--primary)); }
.mini-cal .today.has-ev::after { background: hsl(var(--primary-foreground)); }
@media (max-width: 760px) { .cal-cell { min-height: 4.5rem; } .cal-event { font-size: 0; height: 6px; padding: 0; border-left-width: 0; } }

/* Quiz */
.q-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: .375rem; }
.q-nav button { height: 2.25rem; border-radius: calc(var(--radius) - 4px); border: 1px solid hsl(var(--border)); font-size: .8rem; font-weight: 600; position: relative; }
.q-nav button:hover { background: hsl(var(--accent)); }
.q-nav button.answered { background: hsl(var(--primary) / .12); border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.q-nav button.current { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
.q-nav button.flagged::after { content: ""; position: absolute; top: -3px; right: -3px; width: .55rem; height: .55rem; border-radius: 50%; background: hsl(var(--warning)); box-shadow: 0 0 0 2px hsl(var(--card)); }
.option { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; transition: all .12s; font-size: .9375rem; }
.option:hover { border-color: hsl(var(--primary) / .5); background: hsl(var(--primary) / .03); }
.option:has(input:checked) { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .06); box-shadow: 0 0 0 1px hsl(var(--primary)); }
.option + .option { margin-top: .5rem; }
.option-letter { width: 1.75rem; height: 1.75rem; border-radius: .375rem; display: grid; place-items: center; font-size: .8rem; font-weight: 600; background: hsl(var(--muted)); flex-shrink: 0; }
.option:has(input:checked) .option-letter { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Video player mock */
.player { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--radius) + 2px); overflow: hidden; background: #0b0b10; color: #fff; }
.player-art { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, hsl(var(--primary) / .55), transparent 55%), radial-gradient(circle at 80% 70%, rgb(147 51 234 / .45), transparent 50%), #0b0b10; }
.player-center { position: absolute; inset: 0; display: grid; place-items: center; }
.play-btn { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: rgb(255 255 255 / .15); backdrop-filter: blur(8px); display: grid; place-items: center; color: #fff; border: 1px solid rgb(255 255 255 / .25); transition: transform .15s; }
.play-btn:hover { transform: scale(1.06); }
.play-btn [data-lucide], .play-btn .lucide { width: 1.75rem; height: 1.75rem; }
.player-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: .75rem 1rem; background: linear-gradient(transparent, rgb(0 0 0 / .75)); display: grid; gap: .5rem; }
.scrub { position: relative; height: 4px; border-radius: 9999px; background: rgb(255 255 255 / .25); cursor: pointer; }
.scrub > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: hsl(var(--primary)); }
.scrub .marker { position: absolute; top: -3px; width: 3px; height: 10px; background: #facc15; border-radius: 2px; }
.player-bar .btn-ghost { color: #fff; } .player-bar .btn-ghost:hover { background: rgb(255 255 255 / .15); color: #fff; }

/* Heatmap */
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); gap: 3px; overflow-x: auto; padding-bottom: 2px; }
.heatmap span { width: 11px; height: 11px; border-radius: 2px; background: hsl(var(--muted)); }
.heatmap span[data-l="1"] { background: #cde2fb; } .heatmap span[data-l="2"] { background: #86b6ef; }
.heatmap span[data-l="3"] { background: #3987e5; } .heatmap span[data-l="4"] { background: #1c5cab; }
[data-theme="dark"] .heatmap span[data-l="1"] { background: #104281; } [data-theme="dark"] .heatmap span[data-l="2"] { background: #1c5cab; }
[data-theme="dark"] .heatmap span[data-l="3"] { background: #3987e5; } [data-theme="dark"] .heatmap span[data-l="4"] { background: #9ec5f4; }
.legend-scale { display: inline-flex; gap: 3px; } .legend-scale span { width: 11px; height: 11px; border-radius: 2px; }

/* Badges / achievements */
.medal { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; position: relative; }
.medal [data-lucide], .medal .lucide { width: 1.75rem; height: 1.75rem; }
.medal.gold { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.medal.silver { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
.medal.bronze { background: linear-gradient(135deg, #fed7aa, #c2410c); color: #431407; }
.medal.violet { background: linear-gradient(135deg, #ddd6fe, #7c3aed); color: #2e1065; }
.medal.locked { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); filter: grayscale(1); }

/* Auth */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { position: relative; overflow: hidden; color: #fff; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(800px 500px at 0% 0%, rgb(99 102 241 / .7), transparent 60%), radial-gradient(700px 500px at 100% 100%, rgb(168 85 247 / .55), transparent 60%), #09090b; }
.auth-form { display: grid; place-items: center; padding: 2rem; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-art { display: none; } }

/* Chart container + tooltip */
.chart { position: relative; width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: hsl(var(--border)); stroke-width: 1; }
.chart .axis-text { fill: hsl(var(--muted-foreground)); font-size: 11px; font-family: var(--font-sans); }
.chart-tip { position: absolute; z-index: 20; pointer-events: none; min-width: 8rem; padding: .5rem .625rem; border-radius: calc(var(--radius) - 2px);
  background: hsl(var(--popover)); border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-md); font-size: .75rem; opacity: 0; transition: opacity .1s; }
.chart-tip.show { opacity: 1; }
.chart-tip .tip-row { display: flex; align-items: center; gap: .375rem; margin-top: .125rem; }
.chart-tip .tip-row b { margin-left: auto; padding-left: .75rem; font-variant-numeric: tabular-nums; }
.swatch { width: .625rem; height: .625rem; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.swatch.line { height: 2px; width: .875rem; border-radius: 1px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .75rem; color: hsl(var(--muted-foreground)); }
.chart-legend span { display: inline-flex; align-items: center; gap: .375rem; }
:root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100; --status-good: #1baf7a; --status-bad: #e34948;
}
[data-theme="dark"] { --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --status-good: #199e70; --status-bad: #e66767; }

/* Rich text editor mock */
.editor { border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); overflow: hidden; }
.editor-toolbar { display: flex; gap: 2px; padding: .25rem; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .4); flex-wrap: wrap; }
.editor-body { min-height: 7rem; padding: .75rem; font-size: .875rem; outline: none; }
.editor-body:empty::before { content: attr(data-placeholder); color: hsl(var(--muted-foreground)); }

/* Fade-in for page content */
.page > * { animation: fade-up .35s ease both; }
.page > *:nth-child(2) { animation-delay: .04s; } .page > *:nth-child(3) { animation-delay: .08s; } .page > *:nth-child(4) { animation-delay: .12s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }

@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .app { display: block; }
}

/* Topbar breadcrumb: single line, truncates before the actions */
.topbar .breadcrumb { flex-wrap: nowrap; min-width: 0; overflow: hidden; white-space: nowrap; }
.topbar .breadcrumb a, .topbar .breadcrumb .current { overflow: hidden; text-overflow: ellipsis; }
.topbar .breadcrumb a { flex-shrink: 1; max-width: 14rem; }
.topbar .breadcrumb .current { flex-shrink: 0; max-width: 20rem; }
.topbar-actions { flex-shrink: 0; }
.topbar .breadcrumb a:first-of-type { flex-shrink: 0; }