resources/css/app.css

@import 'tailwindcss';

@import 'tw-animate-css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    --font-sans:
        'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.87 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.87 0 0);

    --app-bg: #fafbff;
    --app-sidebar-bg: #ffffff;
    --app-surface: #ffffff;
    --app-surface-soft: #eef4ff;
    --app-surface-muted: rgba(217, 217, 217, 0.32);
    --app-border: rgba(0, 0, 0, 0.14);
    --app-border-soft: rgba(0, 0, 0, 0.08);
    --app-border-strong: #739af1;
    --app-text: #0a0a0a;
    --app-muted: #737373;
    --app-primary: #2764eb;
    --app-primary-soft: #ccdcff;
    --app-primary-foreground: #ffffff;
    --app-danger: #ef4444;
    --app-success: var(--app-primary);
    --app-placeholder: rgba(115, 115, 115, 0.42);
    --app-toggle-bg: rgba(255, 255, 255, 0.9);
    --app-shadow: 1px 1px 4.5px rgba(39, 100, 235, 0.36);
    --app-composer-shadow: 0 10px 24px rgba(39, 100, 235, 0.28);

    --welcome-shell-bg: var(--app-bg);
    --welcome-title: var(--app-text);
    --welcome-subtitle: var(--app-muted);
    --welcome-accent: var(--app-primary);
    --welcome-accent-foreground: var(--app-primary-foreground);
    --welcome-accent-soft: var(--app-primary-soft);
    --welcome-toggle-bg: var(--app-toggle-bg);
    --welcome-card-bg: var(--app-surface);
    --welcome-card-border: var(--app-border);
    --welcome-card-active-border: var(--app-border-strong);
    --welcome-card-active-shadow: var(--app-shadow);
    --welcome-icon-muted-bg: var(--app-surface-muted);
    --welcome-icon-muted-border: var(--app-border-soft);
    --welcome-icon-active-border: color-mix(
        in oklab,
        var(--app-primary) 26%,
        transparent
    );
    --register-shell-bg: var(--welcome-shell-bg);
    --register-card-bg: var(--welcome-card-bg);
    --register-card-border: var(--welcome-card-active-border);
    --register-card-shadow: var(--welcome-card-active-shadow);
    --register-input-bg: color-mix(
        in oklab,
        var(--app-primary) 13%,
        var(--app-surface)
    );
    --register-input-border: var(--app-border-soft);
    --register-button-border: var(--app-border-soft);
    --register-placeholder: var(--welcome-subtitle);
    --register-danger: var(--app-danger);
    --student-bg: var(--app-bg);
    --student-sidebar-bg: var(--app-sidebar-bg);
    --student-surface: var(--app-surface);
    --student-surface-soft: var(--app-surface-soft);
    --student-border: var(--app-border);
    --student-border-strong: var(--app-border-strong);
    --student-text: var(--app-text);
    --student-muted: var(--app-muted);
    --student-primary: var(--app-primary);
    --student-primary-soft: var(--app-primary-soft);
    --student-primary-foreground: var(--app-primary-foreground);
    --student-danger: var(--app-danger);
    --student-success: var(--app-success);
    --student-placeholder: var(--app-placeholder);
    --student-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
    --student-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
    --student-composer-shadow: var(--app-composer-shadow);
    --lecturer-bg: var(--app-bg);
    --lecturer-sidebar-bg: var(--app-sidebar-bg);
    --lecturer-surface: var(--app-surface);
    --lecturer-surface-soft: var(--app-surface-soft);
    --lecturer-border: var(--app-border);
    --lecturer-border-soft: var(--app-border-soft);
    --lecturer-border-strong: var(--app-border-strong);
    --lecturer-text: var(--app-text);
    --lecturer-muted: var(--app-muted);
    --lecturer-primary: var(--app-primary);
    --lecturer-primary-soft: var(--app-primary-soft);
    --lecturer-primary-foreground: var(--app-primary-foreground);
    --lecturer-danger: var(--app-danger);
    --lecturer-success: var(--app-success);
    --lecturer-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    --lecturer-sidebar-shadow: 1px 0 0 rgba(15, 23, 42, 0.08);
}

.dark {
    --background: #1f1f1f;
    --foreground: #f4f4f5;
    --card: #171717;
    --card-foreground: #f4f4f5;
    --popover: #171717;
    --popover-foreground: #f4f4f5;
    --primary: #3478ff;
    --primary-foreground: #ffffff;
    --secondary: #262626;
    --secondary-foreground: #f4f4f5;
    --muted: #262626;
    --muted-foreground: #737373;
    --accent: #262626;
    --accent-foreground: #f4f4f5;
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: rgba(255, 255, 255, 0.12);
    --input: rgba(255, 255, 255, 0.12);
    --ring: #3478ff;
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: #171717;
    --sidebar-foreground: #f4f4f5;
    --sidebar-primary: #3478ff;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #262626;
    --sidebar-accent-foreground: #f4f4f5;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-ring: #3478ff;

    --app-bg: #1f1f1f;
    --app-sidebar-bg: #171717;
    --app-surface: #171717;
    --app-surface-soft: #262626;
    --app-surface-muted: rgba(255, 255, 255, 0.08);
    --app-border: rgba(255, 255, 255, 0.12);
    --app-border-soft: rgba(255, 255, 255, 0.1);
    --app-border-strong: #3478ff;
    --app-text: #f4f4f5;
    --app-muted: #737373;
    --app-primary: #3478ff;
    --app-primary-soft: #c8d7ff;
    --app-primary-foreground: #ffffff;
    --app-danger: #ff4545;
    --app-success: var(--app-primary);
    --app-placeholder: rgba(244, 244, 245, 0.42);
    --app-toggle-bg: #171717;
    --app-shadow: 0 0 20px rgba(52, 120, 255, 0.34);
    --app-composer-shadow: 0 0 28px rgba(52, 120, 255, 0.36);

    --welcome-shell-bg: var(--app-bg);
    --welcome-title: var(--app-text);
    --welcome-subtitle: var(--app-muted);
    --welcome-accent: var(--app-primary);
    --welcome-accent-foreground: var(--app-primary-foreground);
    --welcome-accent-soft: var(--app-primary-soft);
    --welcome-toggle-bg: var(--app-toggle-bg);
    --welcome-card-bg: var(--app-surface);
    --welcome-card-border: var(--app-border);
    --welcome-card-active-border: var(--app-border-strong);
    --welcome-card-active-shadow: var(--app-shadow);
    --welcome-icon-muted-bg: var(--app-surface-muted);
    --welcome-icon-muted-border: var(--app-border-soft);
    --welcome-icon-active-border: color-mix(
        in oklab,
        var(--app-primary) 42%,
        transparent
    );
    --register-shell-bg: var(--welcome-shell-bg);
    --register-card-bg: var(--welcome-card-bg);
    --register-card-border: var(--welcome-card-active-border);
    --register-card-shadow: var(--welcome-card-active-shadow);
    --register-input-bg: var(--app-surface);
    --register-input-border: var(--app-border);
    --register-button-border: var(--app-border);
    --register-placeholder: var(--welcome-subtitle);
    --register-danger: var(--app-danger);
    --student-bg: var(--app-bg);
    --student-sidebar-bg: var(--app-sidebar-bg);
    --student-surface: var(--app-surface);
    --student-surface-soft: var(--app-surface-soft);
    --student-border: var(--app-border);
    --student-border-strong: var(--app-border-strong);
    --student-text: var(--app-text);
    --student-muted: var(--app-muted);
    --student-primary: var(--app-primary);
    --student-primary-soft: var(--app-primary-soft);
    --student-primary-foreground: var(--app-primary-foreground);
    --student-danger: var(--app-danger);
    --student-success: var(--app-success);
    --student-placeholder: var(--app-placeholder);
    --student-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
    --student-sidebar-shadow: 1px 0 0 var(--app-border);
    --student-composer-shadow: var(--app-composer-shadow);
    --lecturer-bg: var(--app-bg);
    --lecturer-sidebar-bg: var(--app-sidebar-bg);
    --lecturer-surface: var(--app-surface);
    --lecturer-surface-soft: var(--app-surface-soft);
    --lecturer-border: var(--app-border);
    --lecturer-border-soft: var(--app-border-soft);
    --lecturer-border-strong: var(--app-border-strong);
    --lecturer-text: var(--app-text);
    --lecturer-muted: var(--app-muted);
    --lecturer-primary: var(--app-primary);
    --lecturer-primary-soft: color-mix(
        in oklab,
        var(--app-primary) 22%,
        var(--app-surface)
    );
    --lecturer-primary-foreground: var(--app-primary-foreground);
    --lecturer-danger: var(--app-danger);
    --lecturer-success: var(--app-success);
    --lecturer-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
    --lecturer-sidebar-shadow: 1px 0 0 var(--app-border);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }

    button:not(:disabled),
    [role='button']:not([aria-disabled='true']),
    [data-slot='button']:not([aria-disabled='true']) {
        @apply cursor-pointer;
    }

    button:disabled,
    [aria-disabled='true'] {
        @apply cursor-not-allowed;
    }
}

@keyframes app-loading-dot {
    0%,
    80%,
    100% {
        opacity: 0.24;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-0.12rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-dot {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

@layer components {
    .app-loading-indicator {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap;
    }

    .app-loading-spinner {
        @apply shrink-0;
    }

    .app-loading-dots {
        @apply inline-flex min-w-[1.05em] items-center justify-start;
    }

    .app-loading-dot {
        animation: app-loading-dot 1.2s infinite ease-in-out both;
        line-height: 1;
    }

    .app-loading-dot:nth-child(2) {
        animation-delay: 0.16s;
    }

    .app-loading-dot:nth-child(3) {
        animation-delay: 0.32s;
    }

    .welcome-shell {
        @apply relative flex min-h-svh items-center justify-center px-4 py-8 sm:px-6;
        background-color: var(--welcome-shell-bg);
    }

    .welcome-content {
        @apply w-full max-w-[561px] space-y-7;
    }

    .welcome-theme-toggle {
        @apply absolute top-4 right-4 h-10 w-10 rounded-[10px] shadow-none backdrop-blur sm:top-8 sm:right-8;
        background-color: var(--welcome-toggle-bg);
        border-color: var(--welcome-card-active-border);
        color: var(--welcome-accent);
    }

    .welcome-logo {
        @apply mx-auto flex h-[77px] w-[77px] items-center justify-center rounded-[15px] border border-white;
        background-color: var(--welcome-accent);
        color: var(--welcome-accent-foreground);
    }

    .welcome-title {
        @apply text-center text-[34px] leading-tight font-bold tracking-[0.01em] sm:text-[40px];
        color: var(--welcome-title);
    }

    .welcome-subtitle {
        @apply text-center text-[15px] leading-normal sm:text-[20px];
        color: var(--welcome-subtitle);
    }

    .welcome-entries {
        @apply space-y-3;
    }

    .welcome-entry-card {
        @apply gap-0 overflow-hidden rounded-[17px] border py-0 transition-[border-color,box-shadow];
        background-color: var(--welcome-card-bg);
        border-color: var(--welcome-card-border);
        box-shadow: none;
    }

    .welcome-entry-card:hover,
    .welcome-entry-card:focus-within {
        border-color: var(--welcome-card-active-border);
        box-shadow: var(--welcome-card-active-shadow);
    }

    .welcome-entry-link {
        @apply flex h-[90px] items-center justify-between gap-3 px-3.5 py-2.5 outline-none focus-visible:ring-2 sm:px-4;
        --tw-ring-color: color-mix(
            in oklab,
            var(--welcome-accent) 35%,
            transparent
        );
    }

    .welcome-entry-icon {
        @apply flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-[10px] border transition-colors;
        background-color: var(--welcome-icon-muted-bg);
        border-color: var(--welcome-icon-muted-border);
        color: var(--welcome-subtitle);
    }

    .welcome-entry-card:hover .welcome-entry-icon,
    .welcome-entry-card:focus-within .welcome-entry-icon {
        background-color: var(--welcome-accent-soft);
        border-color: var(--welcome-icon-active-border);
        color: var(--welcome-accent);
    }

    .welcome-entry-title {
        @apply truncate text-left text-lg leading-tight font-semibold;
        color: var(--welcome-title);
    }

    .welcome-entry-description {
        @apply mt-1 truncate text-left text-[13px] leading-tight;
        color: var(--welcome-subtitle);
    }

    .welcome-entry-arrow {
        @apply h-4 w-4 shrink-0 transition-transform group-hover:translate-x-0.5;
        color: var(--welcome-title);
    }

    .welcome-register {
        @apply text-center text-[13px];
        color: var(--welcome-subtitle);
    }

    .welcome-register-link {
        @apply font-medium underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:outline-none;
        color: var(--welcome-accent);
        --tw-ring-color: color-mix(
            in oklab,
            var(--welcome-accent) 35%,
            transparent
        );
    }

    .register-shell {
        @apply relative flex min-h-svh items-center justify-center px-4 py-8 sm:px-6;
        background-color: var(--register-shell-bg);
    }

    .register-choice-content {
        @apply w-full max-w-[561px];
    }

    .register-choice-back {
        @apply mb-3;
    }

    .register-choice-options {
        @apply space-y-3;
    }

    .register-choice-card[data-highlighted='true'] {
        border-color: var(--welcome-card-active-border);
        box-shadow: var(--welcome-card-active-shadow);
    }

    .register-choice-card[data-highlighted='true'] .welcome-entry-icon {
        background-color: var(--welcome-accent-soft);
        border-color: var(--welcome-icon-active-border);
        color: var(--welcome-accent);
    }

    .register-card {
        @apply w-full max-w-[460px] gap-0 rounded-[17px] border py-0;
        background-color: var(--register-card-bg) !important;
        border-color: var(--register-card-border) !important;
        box-shadow: var(--register-card-shadow) !important;
    }

    .register-card-content {
        @apply px-5 py-6 sm:px-[38px] sm:py-7;
    }

    .register-back-link {
        @apply inline-flex text-sm font-semibold underline-offset-4 transition-colors hover:underline focus-visible:ring-2 focus-visible:outline-none;
        color: var(--welcome-subtitle);
        --tw-ring-color: color-mix(
            in oklab,
            var(--welcome-accent) 35%,
            transparent
        );
    }

    .register-heading {
        @apply mt-2 text-center text-2xl leading-tight font-semibold;
        color: var(--welcome-title);
    }

    .register-form {
        @apply mt-7 flex flex-col gap-4;
    }

    .register-field {
        @apply grid gap-1.5;
    }

    .register-label {
        @apply text-base leading-none font-medium;
        color: var(--welcome-title);
    }

    .register-input {
        @apply h-[43px] rounded-[6px] px-3.5 text-sm shadow-none;
        background-color: var(--register-input-bg) !important;
        border-color: var(--register-input-border) !important;
        color: var(--welcome-title) !important;
    }

    .register-input::placeholder {
        color: var(--register-placeholder);
        opacity: 1;
    }

    .register-input:focus-visible {
        border-color: var(--register-card-border) !important;
        --tw-ring-color: color-mix(
            in oklab,
            var(--welcome-accent) 35%,
            transparent
        );
    }

    .register-input[aria-invalid='true'] {
        border-color: var(--register-danger) !important;
        --tw-ring-color: color-mix(
            in oklab,
            var(--register-danger) 28%,
            transparent
        );
    }

    .register-error {
        @apply text-xs leading-snug;
        color: var(--register-danger);
    }

    .register-submit {
        @apply mt-1 h-[43px] w-full rounded-[6px] border text-base font-semibold shadow-none;
        background-color: var(--welcome-accent) !important;
        border-color: var(--register-button-border) !important;
        color: var(--welcome-accent-foreground) !important;
    }

    .register-submit:hover {
        background-color: color-mix(
            in oklab,
            var(--welcome-accent) 88%,
            var(--register-card-bg)
        ) !important;
    }

    .login-card {
        @apply max-w-[460px];
    }

    .login-card-content {
        @apply px-5 py-7 sm:px-[38px] sm:py-8;
    }

    .login-heading {
        @apply mt-2;
    }

    .login-form {
        @apply mt-8 flex flex-col gap-4;
    }

    .login-remember {
        @apply flex items-center gap-3;
    }

    .login-remember-label {
        @apply text-sm leading-none font-normal;
        color: var(--welcome-subtitle);
    }

    .login-submit {
        @apply mt-2;
    }

    .login-register-text {
        @apply mt-4;
    }

    .login-status {
        @apply mt-4 text-center text-sm font-medium;
        color: var(--app-success);
    }

    .login-error {
        color: var(--register-danger);
    }

    .student-dashboard-shell {
        @apply h-svh min-h-svh overflow-hidden;
        background-color: var(--student-bg);
        color: var(--student-text);
    }

    .student-sidebar {
        border-color: var(--student-border) !important;
    }

    .student-sidebar [data-sidebar='sidebar'] {
        background-color: var(--student-sidebar-bg);
        border-color: var(--student-border);
        box-shadow: var(--student-sidebar-shadow);
    }

    .student-sidebar-top {
        @apply border-b;
        border-color: var(--student-border);
        display: flex !important;
        height: 72px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 0 20px !important;
    }

    .student-logo-action {
        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px] transition-transform outline-none focus-visible:ring-2;
        --tw-ring-color: color-mix(
            in oklab,
            var(--student-primary) 45%,
            transparent
        );
    }

    .student-logo-action:hover {
        @apply scale-[1.03];
    }

    .student-logo-mark {
        @apply flex size-8 items-center justify-center rounded-[8px];
        background-color: var(--student-primary);
        color: var(--student-primary-foreground);
    }

    .student-sidebar-trigger {
        @apply rounded-[8px] shadow-none;
        color: var(--student-text);
        width: 32px !important;
        height: 32px !important;
    }

    .student-sidebar-trigger:hover {
        background-color: var(--student-surface-soft);
        color: var(--student-text);
    }

    .student-sidebar-content {
        gap: 0 !important;
    }

    .student-history-group {
        padding: 0 !important;
    }

    .student-history-label {
        @apply border-b text-xs font-medium;
        border-color: var(--student-border);
        color: var(--student-text);
        display: flex !important;
        height: 44px !important;
        align-items: center !important;
        gap: 6px !important;
        border-radius: 0 !important;
        padding: 0 20px !important;
        margin: 0 !important;
        width: 100% !important;
        background-color: transparent !important;
        cursor: pointer;
    }

    .student-history-label:hover {
        background-color: var(--student-surface-soft) !important;
    }

    .student-history-chevron {
        @apply ml-auto size-3 transition-transform;
    }

    .student-history-label[aria-expanded='false'] .student-history-chevron {
        transform: rotate(-90deg);
    }

    .student-history-list {
        gap: 4px !important;
        padding: 12px 20px !important;
    }

    .student-history-menu-item {
        @apply relative;
    }

    .student-history-menu-button {
        @apply rounded-[8px] text-left shadow-none;
        color: var(--student-muted);
        height: auto !important;
        min-height: 42px !important;
        padding: 8px 34px 8px 4px !important;
        align-items: flex-start !important;
    }

    .student-history-menu-button:hover,
    .student-history-menu-button[data-active='true'] {
        background-color: var(--student-surface-soft);
        color: var(--student-text);
    }

    .student-history-delete {
        @apply absolute top-1/2 right-2 flex size-6 -translate-y-1/2 items-center justify-center rounded-[6px] opacity-0 transition-opacity;
        color: var(--student-danger);
    }

    .student-history-menu-item:hover .student-history-delete,
    .student-history-menu-button[data-active='true'] + .student-history-delete {
        @apply opacity-100;
    }

    .student-history-delete:hover {
        background-color: color-mix(
            in oklab,
            var(--student-danger) 12%,
            transparent
        );
    }

    .student-delete-dialog {
        @apply gap-5 rounded-[16px] border p-6 shadow-none sm:max-w-[440px];
        background-color: var(--student-surface);
        border-color: var(--student-border);
        box-shadow: var(--student-shadow);
        color: var(--student-text);
    }

    .student-delete-dialog-body {
        @apply flex flex-col gap-3;
    }

    .student-delete-copy {
        @apply text-sm leading-relaxed;
        color: var(--student-muted);
    }

    .student-delete-copy strong {
        color: var(--student-text);
    }

    .student-delete-error {
        @apply rounded-[10px] border px-4 py-3 text-sm font-medium;
        background-color: color-mix(
            in oklab,
            var(--student-danger) 8%,
            var(--student-surface)
        );
        border-color: color-mix(
            in oklab,
            var(--student-danger) 24%,
            transparent
        );
        color: var(--student-danger);
    }

    .student-delete-dialog-footer {
        @apply gap-3 pt-1;
    }

    .student-delete-cancel {
        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
        background-color: var(--student-surface) !important;
        border-color: var(--student-border) !important;
        color: var(--student-text) !important;
    }

    .student-delete-cancel:hover {
        background-color: var(--student-surface-soft) !important;
    }

    .student-delete-confirm {
        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
        background-color: var(--student-danger) !important;
        color: var(--student-primary-foreground) !important;
    }

    .student-delete-confirm:hover {
        background-color: color-mix(
            in oklab,
            var(--student-danger) 86%,
            #000
        ) !important;
    }

    .student-history-menu-icon {
        @apply hidden;
        color: var(--student-text);
    }

    .student-history-copy,
    .student-user-copy {
        @apply min-w-0;
    }

    .student-history-title {
        @apply block truncate text-sm leading-tight font-medium;
        color: var(--student-text);
    }

    .student-history-meta {
        @apply mt-1 block truncate text-xs leading-tight;
        color: var(--student-muted);
    }

    .student-sidebar-footer {
        @apply mt-auto border-t;
        border-color: var(--student-border);
        padding: 16px 20px !important;
    }

    .student-user-menu-button {
        @apply mb-2 w-fit gap-2 rounded-[6px] shadow-none cursor-default;
        background-color: var(--student-surface-soft);
        color: var(--student-text);
        height: auto !important;
        padding: 6px 8px !important;
    }

    .student-user-menu-button:hover {
        background-color: var(--student-surface-soft);
        color: var(--student-text);
    }

    .student-user-avatar {
        @apply size-6 text-[8px];
        background-color: var(--student-surface);
        color: var(--student-text);
    }

    .student-user-name {
        @apply block truncate text-xs leading-tight font-semibold;
        color: var(--student-text);
    }

    .student-user-role {
        @apply block truncate text-[11px] leading-tight;
        color: var(--student-muted);
    }

    .student-logout-button {
        @apply justify-start gap-1 rounded-none text-[11px] font-normal shadow-none;
        color: var(--student-danger);
        height: auto !important;
        padding: 10px 16px !important;
    }

    .student-logout-button:hover {
        background-color: transparent;
        color: var(--student-danger);
    }

    .group[data-collapsible='icon'] .student-sidebar-top {
        justify-content: center !important;
        padding: 0 !important;
    }

    .group[data-collapsible='icon'] .student-sidebar-trigger {
        display: none !important;
    }

    .group[data-collapsible='icon'] .student-history-list {
        padding: 12px 8px !important;
    }

    .group[data-collapsible='icon'] .student-history-label {
        display: none !important;
    }

    .group[data-collapsible='icon'] .student-history-menu-button,
    .group[data-collapsible='icon'] .student-user-menu-button,
    .group[data-collapsible='icon'] .student-logout-button {
        @apply mx-auto flex items-center justify-center rounded-[8px];
        background-color: transparent;
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
    }

    .group[data-collapsible='icon'] .student-history-menu-icon {
        @apply block;
    }

    .group[data-collapsible='icon'] .student-history-copy,
    .group[data-collapsible='icon'] .student-user-copy,
    .group[data-collapsible='icon'] .student-logout-button span {
        @apply hidden;
    }

    .group[data-collapsible='icon'] .student-sidebar-footer {
        @apply px-2;
    }

    .student-workspace {
        @apply flex h-svh min-w-0 flex-1 flex-col overflow-hidden;
        background-color: var(--student-bg);
        color: var(--student-text);
    }

    .student-topbar {
        @apply sticky top-0 z-20 flex h-[72px] shrink-0 items-center justify-between border-b px-5 sm:px-6;
        background-color: var(--student-surface);
        border-color: var(--student-border);
    }

    .student-brand-title {
        @apply text-base font-bold;
        color: var(--student-text);
    }

    .student-topbar-actions {
        @apply flex items-center gap-3;
    }

    .student-theme-toggle {
        @apply static size-8 rounded-[8px] shadow-none sm:static;
        background-color: var(--student-surface) !important;
        border-color: var(--student-border-strong) !important;
        color: var(--student-primary) !important;
    }

    .student-new-session-button {
        @apply h-8 rounded-[8px] px-4 text-xs font-semibold shadow-none;
        background-color: var(--student-primary) !important;
        color: var(--student-primary-foreground) !important;
    }

    .student-chat-stage {
        @apply flex min-h-0 flex-1 items-center justify-center px-4 py-10;
    }

    .student-empty-state {
        @apply flex w-full max-w-[610px] -translate-y-8 flex-col items-center;
    }

    .student-empty-icon {
        @apply mb-5 flex size-[52px] items-center justify-center rounded-[12px];
        background-color: var(--student-primary-soft);
        color: var(--student-primary);
    }

    .student-empty-icon--thinking {
        @apply animate-pulse;
        background-color: var(--student-primary);
        color: var(--student-primary-foreground);
    }

    .student-greeting {
        @apply mb-9 text-center;
    }

    .student-greeting h2 {
        @apply text-3xl leading-tight font-bold tracking-[-0.02em];
        color: var(--student-text);
    }

    .student-greeting p {
        @apply mt-2 text-sm;
        color: var(--student-muted);
    }

    .student-composer-card {
        @apply w-full gap-0 rounded-[14px] border py-0 shadow-none;
        background-color: var(--student-surface);
        border-color: var(--student-border-strong);
        box-shadow: var(--student-composer-shadow);
    }

    .student-composer-content {
        @apply relative min-h-[225px] px-5 py-4;
    }

    .student-composer-form {
        display: contents;
    }

    .student-status {
        @apply -mt-5 mb-5 text-center text-xs font-medium;
        color: var(--student-danger);
    }

    .student-status--success {
        color: var(--student-success);
    }

    .student-course-row {
        @apply flex flex-wrap items-center gap-2 text-[11px] font-medium;
        color: var(--student-text);
    }

    .student-course-icon,
    .student-question-icon {
        color: var(--student-primary);
    }

    .student-course-label {
        @apply whitespace-nowrap;
    }

    .student-course-select {
        @apply h-6 w-[180px] rounded-[5px] px-2 text-[10px] shadow-none;
        background-color: var(--student-surface) !important;
        border-color: var(--student-border-strong) !important;
        color: var(--student-text) !important;
    }

    .student-course-select svg {
        @apply size-3;
    }

    .student-composer-divider {
        @apply my-4 h-px w-full;
        background-color: var(--student-border);
    }

    .student-question-row {
        @apply flex items-start gap-3;
    }

    .student-question-row textarea {
        @apply min-h-[118px] flex-1 resize-none bg-transparent pt-0 text-[11px] outline-none;
        color: var(--student-text);
    }

    .student-question-row textarea::placeholder {
        color: var(--student-placeholder);
    }

    .student-floating-send {
        @apply absolute right-5 bottom-4 size-8 rounded-[8px] shadow-none;
        background-color: var(--student-primary) !important;
        color: var(--student-primary-foreground) !important;
    }

    .student-chat-stage--session {
        @apply relative min-h-0 flex-col items-stretch justify-between overflow-hidden px-0 py-0;
    }

    .student-chat-thread {
        @apply min-h-0 w-full flex-1 overflow-y-auto overscroll-contain px-5 pt-8;
        padding-bottom: 12.5rem;
    }

    .student-chat-messages {
        @apply flex min-h-full w-full flex-col gap-6;
    }

    .student-chat-loading {
        @apply mt-24 text-center text-sm;
        color: var(--student-muted);
    }

    .student-chat-status {
        @apply mt-0 mb-4;
    }

    .student-message {
        @apply flex w-full items-start gap-3.5;
    }

    .student-message--assistant {
        @apply justify-start;
    }

    .student-message--user {
        @apply justify-end;
    }

    .student-message-avatar {
        @apply flex size-9 shrink-0 items-center justify-center rounded-[10px];
    }

    .student-message-avatar--assistant {
        background-color: var(--student-primary);
        color: var(--student-primary-foreground);
    }

    .student-message-avatar--user {
        background-color: var(--student-primary-soft);
        color: var(--student-primary);
    }

    .student-message-bubble {
        @apply max-w-[min(760px,88%)] rounded-[10px] border px-4 py-3.5 text-base shadow-none;
        background-color: var(--student-surface);
        border-color: var(--student-border-strong);
        color: var(--student-primary);
    }

    .student-message--assistant .student-message-bubble {
        color: var(--student-text);
    }

    .student-message--user .student-message-bubble {
        background-color: var(--student-primary);
        border-color: var(--student-primary);
        color: var(--student-primary-foreground);
    }

    .student-message-content {
        @apply text-base leading-relaxed whitespace-pre-wrap;
    }

    .student-message-caret {
        @apply ml-0.5 inline-block h-3 w-px animate-pulse align-[-2px];
        background-color: currentColor;
    }

    .student-message-time {
        @apply mt-2 block text-[10px];
        color: color-mix(in oklab, currentColor 72%, transparent);
    }

    .student-message-sources {
        @apply mt-3 flex flex-wrap gap-2;
    }

    .student-message-source {
        @apply rounded-full border px-2 py-1 text-[10px];
        border-color: color-mix(
            in oklab,
            var(--student-primary) 24%,
            transparent
        );
        color: inherit;
    }

    .student-message-bubble--typing {
        @apply text-[11px];
        color: var(--student-muted);
    }

    .student-chat-scroll-anchor {
        scroll-margin-bottom: 13.5rem;
    }

    .student-chat-composer {
        @apply pointer-events-none absolute right-5 bottom-8 left-5 z-10 w-auto pb-0;
    }

    .student-composer-card--dock {
        @apply pointer-events-auto w-full;
        -webkit-backdrop-filter: blur(18px) saturate(1.25);
        backdrop-filter: blur(18px) saturate(1.25);
        background-color: color-mix(
            in oklab,
            var(--student-surface) 76%,
            transparent
        ) !important;
    }

    .student-composer-card--dock .student-composer-content {
        @apply min-h-[116px];
    }

    .student-composer-card--dock .student-question-row textarea {
        @apply min-h-[38px];
    }

    .student-chat-updated-at {
        @apply mt-3 text-center text-[11px];
        color: var(--student-muted);
    }

    .embed-shell {
        @apply relative flex h-svh flex-col overflow-hidden px-6 py-5;
        background-color: var(--embed-bg);
        color: var(--embed-text);
    }

    .embed-toolbar {
        @apply relative z-20 flex shrink-0 items-start justify-between gap-4;
    }

    .embed-tabs {
        @apply flex h-8 items-center gap-1 rounded-full p-1 shadow-sm;
        background-color: color-mix(
            in oklab,
            var(--embed-muted) 20%,
            transparent
        );
    }

    .embed-tabs button {
        @apply h-6 rounded-full px-6 text-sm font-medium transition;
        color: var(--embed-text);
    }

    .embed-tabs button[aria-selected='true'] {
        @apply shadow-sm;
        background-color: var(--embed-surface);
    }

    .embed-actions {
        @apply flex items-center gap-5;
    }

    .embed-icon-button {
        @apply flex size-8 items-center justify-center rounded-[5px] transition;
        color: var(--embed-text);
    }

    .embed-icon-button:hover {
        background-color: color-mix(
            in oklab,
            var(--embed-muted) 14%,
            transparent
        );
    }

    .embed-icon-button--primary {
        background-color: var(--embed-primary);
        color: #ffffff;
    }

    .embed-icon-button--primary:hover {
        background-color: color-mix(
            in oklab,
            var(--embed-primary) 88%,
            #ffffff
        );
    }

    .embed-chat {
        @apply relative flex min-h-0 flex-1 flex-col items-center justify-center;
    }

    .embed-chat--session {
        @apply items-stretch justify-start;
    }

    .embed-empty-state {
        @apply mx-auto flex w-full max-w-[620px] -translate-y-5 flex-col items-center text-center;
    }

    .embed-empty-icon {
        @apply mb-5 flex size-[52px] items-center justify-center rounded-[14px];
        background-color: var(--embed-primary-soft);
        color: var(--embed-primary);
    }

    .embed-empty-state h1 {
        @apply text-2xl leading-tight font-bold tracking-[-0.02em];
        color: var(--embed-text);
    }

    .embed-empty-state p {
        @apply mt-2 text-sm;
        color: var(--embed-muted);
    }

    .embed-status {
        @apply mt-4 text-center text-sm font-medium;
        color: var(--embed-danger);
    }

    .embed-thread {
        @apply min-h-0 flex-1 space-y-5 overflow-y-auto overscroll-contain px-0 pt-10;
        margin-right: -1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 11rem;
    }

    .embed-message {
        @apply flex w-full items-start gap-3;
    }

    .embed-message--assistant {
        @apply justify-start;
    }

    .embed-message--user {
        @apply justify-end;
    }

    .embed-message-avatar {
        @apply flex size-8 shrink-0 items-center justify-center rounded-[9px];
    }

    .embed-message-avatar--assistant {
        background-color: var(--embed-primary);
        color: #ffffff;
    }

    .embed-message-avatar--user {
        background-color: var(--embed-primary-soft);
        color: var(--embed-primary);
    }

    .embed-message-bubble {
        @apply max-w-[min(290px,75%)] rounded-[10px] border px-4 py-3 text-sm shadow-none;
        background-color: var(--embed-surface);
        border-color: var(--embed-border);
        color: var(--embed-text);
    }

    .embed-message--assistant .embed-message-bubble {
        color: var(--embed-text);
    }

    .embed-message--user .embed-message-bubble {
        background-color: var(--embed-primary);
        border-color: var(--embed-primary);
        color: #ffffff;
    }

    .embed-message-content {
        @apply leading-relaxed whitespace-pre-wrap;
    }

    .embed-message-time {
        @apply mt-2 block text-xs;
        color: color-mix(in oklab, currentColor 68%, transparent);
    }

    .embed-message-caret {
        @apply ml-0.5 inline-block h-3 w-px animate-pulse align-[-2px];
        background-color: currentColor;
    }

    .embed-message-bubble--typing {
        color: var(--embed-muted);
    }

    .embed-composer-dock {
        @apply absolute right-0 bottom-0 left-0 z-10;
    }

    .embed-composer {
        @apply relative w-full rounded-[var(--embed-radius)] border px-4 py-3;
        -webkit-backdrop-filter: blur(16px) saturate(1.25);
        backdrop-filter: blur(16px) saturate(1.25);
        background-color: color-mix(
            in oklab,
            var(--embed-surface) 82%,
            transparent
        );
        border-color: var(--embed-border);
        box-shadow: 0 18px 40px color-mix(in oklab, var(--embed-primary) 24%, transparent);
    }

    .embed-course-row {
        @apply flex flex-wrap items-center gap-2 text-sm font-bold;
        color: var(--embed-text);
    }

    .embed-course-row svg,
    .embed-question-row svg {
        color: var(--embed-primary);
    }

    .embed-course-row select {
        @apply h-6 max-w-[210px] rounded-[5px] border px-2 text-xs outline-none;
        background-color: var(--embed-surface);
        border-color: var(--embed-border);
        color: var(--embed-text);
    }

    .embed-course-row select:disabled {
        @apply opacity-70;
    }

    .embed-composer-divider {
        @apply my-3 h-px w-full;
        background-color: color-mix(
            in oklab,
            var(--embed-muted) 24%,
            transparent
        );
    }

    .embed-question-row {
        @apply flex items-start gap-3;
    }

    .embed-question-row textarea {
        @apply min-h-[72px] flex-1 resize-none bg-transparent text-sm outline-none;
        color: var(--embed-text);
    }

    .embed-question-row textarea::placeholder {
        color: color-mix(in oklab, var(--embed-muted) 48%, transparent);
    }

    .embed-send-button {
        @apply absolute right-4 bottom-3 flex size-8 items-center justify-center rounded-[8px] transition disabled:opacity-55;
        background-color: var(--embed-primary);
        color: #ffffff;
    }

    .embed-updated-at {
        @apply mt-2 text-center text-xs;
        color: var(--embed-muted);
    }

    .embed-history {
        @apply flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto overscroll-contain pt-7;
        margin-right: -1.5rem;
        padding-right: 1.5rem;
    }

    .embed-history-item {
        @apply flex w-full items-center justify-between gap-4 rounded-[7px] px-6 py-3 text-left transition;
        color: var(--embed-text);
    }

    .embed-history-item[data-active='true'],
    .embed-history-item:hover {
        background-color: color-mix(
            in oklab,
            var(--embed-muted) 18%,
            transparent
        );
    }


    .embed-history-item strong {
        @apply block text-base font-semibold;
    }

    .embed-history-item small {
        @apply mt-1 block text-xs;
        color: var(--embed-text);
    }

    .embed-history-delete {
        @apply shrink-0 opacity-30 transition;
        color: var(--embed-danger);
    }

    .embed-history-item[data-active='true'] .embed-history-delete,
    .embed-history-item:hover .embed-history-delete {
        @apply opacity-100;
    }

    .embed-empty-copy {
        @apply mt-16 text-center text-sm;
        color: var(--embed-muted);
    }

    .embed-modal-backdrop {
        @apply absolute inset-0 z-50 flex items-center justify-center p-6;
        background-color: color-mix(in oklab, var(--embed-text) 30%, transparent);
    }

    .embed-modal {
        @apply w-full max-w-xs rounded-2xl p-5 shadow-xl;
        background-color: var(--embed-surface);
        color: var(--embed-text);
    }

    .embed-modal-title {
        @apply mb-1 text-sm font-semibold;
    }

    .embed-modal-body {
        @apply mb-4 text-sm;
        color: var(--embed-muted);
    }

    .embed-modal-actions {
        @apply flex justify-end gap-2;
    }

    .embed-modal-btn {
        @apply rounded-full px-4 py-1.5 text-xs font-medium transition;
    }

    .embed-modal-btn--cancel {
        background-color: color-mix(in oklab, var(--embed-muted) 15%, transparent);
        color: var(--embed-text);
    }

    .embed-modal-btn--cancel:hover {
        background-color: color-mix(in oklab, var(--embed-muted) 25%, transparent);
    }

    .embed-modal-btn--danger {
        background-color: var(--embed-danger);
        color: #fff;
    }

    .embed-modal-btn--danger:hover {
        opacity: 0.88;
    }

    .lecturer-dashboard-shell {
        @apply min-h-svh;
        background-color: var(--lecturer-bg);
        color: var(--lecturer-text);
    }

    .lecturer-sidebar {
        border-color: var(--lecturer-border) !important;
    }

    .lecturer-sidebar [data-sidebar='sidebar'] {
        background-color: var(--lecturer-sidebar-bg);
        border-color: var(--lecturer-border);
        box-shadow: var(--lecturer-sidebar-shadow);
    }

    .lecturer-sidebar-header {
        @apply border-b;
        border-color: var(--lecturer-border);
        display: flex !important;
        height: 72px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 0 20px !important;
    }

    .lecturer-brand {
        @apply flex min-w-0 items-center gap-3 rounded-[10px] text-left outline-none focus-visible:ring-2;
        color: var(--lecturer-text);
        flex: 1 1 auto;
        --tw-ring-color: color-mix(
            in oklab,
            var(--lecturer-primary) 45%,
            transparent
        );
    }

    .lecturer-brand-mark {
        @apply flex size-8 shrink-0 items-center justify-center rounded-[8px];
        background-color: var(--lecturer-primary);
        color: var(--lecturer-primary-foreground);
    }

    .lecturer-brand-copy {
        @apply truncate text-base font-bold;
    }

    .lecturer-sidebar-trigger {
        @apply rounded-[8px] shadow-none;
        color: var(--lecturer-text);
        width: 32px !important;
        height: 32px !important;
    }

    .lecturer-sidebar-trigger:hover {
        background-color: var(--lecturer-surface-soft);
        color: var(--lecturer-text);
    }

    .lecturer-sidebar-content {
        gap: 0 !important;
    }

    .lecturer-nav-group {
        padding: 16px 20px !important;
    }

    .lecturer-nav-list {
        gap: 8px !important;
    }

    .lecturer-nav-button {
        @apply justify-start gap-2 rounded-[8px] text-xs font-semibold shadow-none;
        color: var(--lecturer-muted);
        height: 34px !important;
        padding: 0 10px !important;
    }

    .lecturer-nav-button:hover {
        background-color: var(--lecturer-primary-soft);
        color: var(--lecturer-primary);
    }

    .lecturer-nav-button[data-active='true'] {
        background-color: var(--lecturer-primary);
        color: var(--lecturer-primary-foreground);
    }

    .lecturer-sidebar-footer {
        @apply mt-auto border-t;
        border-color: var(--lecturer-border);
        padding: 16px 20px !important;
    }

    .lecturer-user-button {
        @apply mb-3 w-fit gap-2 rounded-[6px] shadow-none cursor-default;
        background-color: var(--lecturer-surface-soft);
        color: var(--lecturer-text);
        height: auto !important;
        padding: 6px 8px !important;
    }

    .lecturer-user-button:hover {
        background-color: var(--lecturer-surface-soft);
        color: var(--lecturer-text);
    }

    .lecturer-user-avatar {
        @apply size-6 text-[8px];
        background-color: var(--lecturer-surface);
        color: var(--lecturer-text);
    }

    .lecturer-user-copy {
        @apply min-w-0;
    }

    .lecturer-user-name {
        @apply block truncate text-[11px] leading-tight font-semibold;
        color: var(--lecturer-text);
    }

    .lecturer-user-role {
        @apply block truncate text-[10px] leading-tight;
        color: var(--lecturer-muted);
    }

    .lecturer-logout-button {
        @apply justify-start gap-1 rounded-none text-[11px] font-normal shadow-none;
        color: var(--lecturer-danger);
        height: auto !important;
        padding: 10px 16px !important;
    }

    .lecturer-logout-button:hover {
        background-color: transparent;
        color: var(--lecturer-danger);
    }

    .lecturer-confirm-dialog {
        @apply gap-5 rounded-[16px] border p-6 shadow-none sm:max-w-[440px];
        background-color: var(--lecturer-surface);
        border-color: var(--lecturer-border);
        box-shadow: var(--lecturer-shadow);
        color: var(--lecturer-text);
    }

    .lecturer-confirm-dialog-footer {
        @apply gap-3 pt-1;
    }

    .lecturer-danger-button {
        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
        background-color: var(--lecturer-danger) !important;
        color: var(--lecturer-primary-foreground) !important;
    }

    .lecturer-danger-button:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 86%,
            #000
        ) !important;
    }

    .group[data-collapsible='icon'] .lecturer-sidebar-header {
        justify-content: center !important;
        padding: 0 !important;
    }

    .group[data-collapsible='icon'] .lecturer-brand-copy,
    .group[data-collapsible='icon'] .lecturer-nav-button span,
    .group[data-collapsible='icon'] .lecturer-user-copy,
    .group[data-collapsible='icon'] .lecturer-logout-button span {
        @apply hidden;
    }

    .group[data-collapsible='icon'] .lecturer-brand {
        flex: 0 0 auto;
        justify-content: center;
    }

    .group[data-collapsible='icon'] .lecturer-sidebar-trigger {
        display: none !important;
    }

    .group[data-collapsible='icon'] .lecturer-nav-group {
        padding: 20px 12px !important;
    }

    .group[data-collapsible='icon'] .lecturer-nav-button,
    .group[data-collapsible='icon'] .lecturer-user-button,
    .group[data-collapsible='icon'] .lecturer-logout-button {
        @apply mx-auto flex items-center justify-center rounded-[9px];
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
    }

    .group[data-collapsible='icon'] .lecturer-sidebar-footer {
        @apply px-3;
    }

    .lecturer-workspace {
        @apply flex min-w-0 flex-1 flex-col;
        background-color: var(--lecturer-bg);
        color: var(--lecturer-text);
    }

    .lecturer-page {
        @apply w-full px-5 py-8 sm:px-8 lg:px-10;
    }

    .lecturer-page input:not([type='checkbox']),
    .lecturer-page textarea,
    .lecturer-page select {
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 10%,
            var(--lecturer-surface)
        ) !important;
    }

    .lecturer-page-header {
        @apply flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between;
    }

    .lecturer-page-header h1 {
        @apply text-3xl leading-tight font-bold tracking-[-0.03em];
        color: var(--lecturer-text);
    }

    .lecturer-page-header p {
        @apply mt-1 text-sm leading-relaxed;
        color: var(--lecturer-muted);
    }

    .lecturer-header-actions {
        @apply flex items-center gap-3;
    }

    .lecturer-theme-toggle {
        @apply static size-9 rounded-[9px] shadow-none sm:static;
        background-color: var(--lecturer-surface) !important;
        border-color: var(--lecturer-border-strong) !important;
        color: var(--lecturer-primary) !important;
    }

    .lecturer-create-button {
        @apply h-9 rounded-[8px] px-4 text-xs font-semibold shadow-none;
        background-color: var(--lecturer-primary) !important;
        color: var(--lecturer-primary-foreground) !important;
    }

    .lecturer-cancel-button {
        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
        background-color: var(--lecturer-surface) !important;
        border-color: var(--lecturer-border) !important;
        color: var(--lecturer-text) !important;
    }

    .lecturer-cancel-button:hover {
        background-color: var(--lecturer-surface-soft) !important;
    }

    .lecturer-course-dialog {
        @apply gap-6 rounded-[16px] border p-6 shadow-none sm:max-w-[460px];
        background-color: var(--lecturer-surface);
        border-color: var(--lecturer-border-strong);
        box-shadow: var(--lecturer-shadow);
        color: var(--lecturer-text);
    }

    .lecturer-course-form {
        @apply flex flex-col gap-5;
    }

    .lecturer-form-field {
        @apply flex flex-col gap-2;
    }

    .lecturer-form-label {
        color: var(--lecturer-text);
    }

    .lecturer-form-input,
    .lecturer-form-textarea {
        @apply w-full rounded-[8px] border px-4 text-sm shadow-none transition-[border-color,box-shadow] outline-none;
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 6%,
            var(--lecturer-surface)
        );
        border-color: var(--lecturer-border);
        color: var(--lecturer-text);
    }

    .lecturer-form-input {
        @apply h-11;
    }

    .lecturer-form-textarea {
        @apply min-h-28 resize-none py-3;
    }

    .lecturer-form-input::placeholder,
    .lecturer-form-textarea::placeholder {
        color: var(--app-placeholder);
    }

    .lecturer-form-input:focus,
    .lecturer-form-textarea:focus {
        border-color: var(--lecturer-primary);
        box-shadow: 0 0 0 3px
            color-mix(in oklab, var(--lecturer-primary) 18%, transparent);
    }

    .lecturer-course-form .lecturer-status {
        @apply mx-0 mt-0;
    }

    .lecturer-course-footer {
        @apply gap-3 pt-1;
    }

    .lecturer-metric-grid {
        @apply mt-8 grid grid-cols-1 gap-5 md:grid-cols-3;
    }

    .lecturer-metric-card {
        @apply gap-0 rounded-[14px] border py-0 shadow-none;
        background-color: var(--lecturer-surface);
        border-color: var(--lecturer-border-soft);
        box-shadow: var(--lecturer-shadow);
    }

    .lecturer-metric-content {
        @apply flex items-center gap-5 px-6 py-6;
    }

    .lecturer-metric-icon {
        @apply flex size-12 shrink-0 items-center justify-center rounded-[12px];
        background-color: var(--lecturer-primary-soft);
        color: var(--lecturer-primary);
    }

    .lecturer-metric-icon[data-tone='danger'] {
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 12%,
            var(--lecturer-surface)
        );
        color: var(--lecturer-danger);
    }

    .lecturer-metric-copy p {
        @apply text-sm;
        color: var(--lecturer-muted);
    }

    .lecturer-metric-value-row {
        @apply mt-1 flex items-end gap-2;
    }

    .lecturer-metric-value-row strong {
        @apply text-3xl leading-none font-bold;
        color: var(--lecturer-text);
    }

    .lecturer-metric-icon[data-tone='danger']
        + .lecturer-metric-copy
        .lecturer-metric-value-row
        strong {
        color: var(--lecturer-danger);
    }

    .lecturer-metric-value-row span {
        @apply pb-1 text-xs;
        color: var(--lecturer-muted);
    }

    .lecturer-table-card {
        @apply mt-8 gap-0 overflow-hidden rounded-[14px] border py-0 shadow-none;
        background-color: var(--lecturer-surface);
        border-color: var(--lecturer-border);
        box-shadow: var(--lecturer-shadow);
    }

    .lecturer-table-content {
        @apply px-0;
    }

    .lecturer-table-heading {
        @apply flex flex-col gap-4 border-b px-6 py-5 sm:flex-row sm:items-center sm:justify-between;
        border-color: var(--lecturer-border);
    }

    .lecturer-table-heading h2 {
        @apply text-base font-semibold;
        color: var(--lecturer-text);
    }

    .lecturer-search-field {
        @apply relative w-full sm:max-w-[320px];
    }

    .lecturer-search-field svg {
        @apply pointer-events-none absolute top-1/2 left-3 -translate-y-1/2;
        color: var(--lecturer-muted);
        z-index: 1;
    }

    .lecturer-search-input {
        @apply h-10 rounded-[9px] border text-sm shadow-none transition-[border-color,box-shadow] outline-none;
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 5%,
            var(--lecturer-surface)
        );
        border-color: var(--lecturer-border);
        color: var(--lecturer-text);
        padding-right: 0.75rem !important;
        padding-left: 2.5rem !important;
    }

    .lecturer-search-input::placeholder {
        color: var(--app-placeholder);
    }

    .lecturer-search-input:focus {
        border-color: var(--lecturer-primary);
        box-shadow: 0 0 0 3px
            color-mix(in oklab, var(--lecturer-primary) 16%, transparent);
    }

    .lecturer-status {
        @apply mx-6 mt-4 rounded-[10px] border px-4 py-3 text-sm font-medium;
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 8%,
            var(--lecturer-surface)
        );
        border-color: color-mix(
            in oklab,
            var(--lecturer-danger) 24%,
            transparent
        );
        color: var(--lecturer-danger);
    }

    .lecturer-status--success {
        background-color: color-mix(
            in oklab,
            var(--lecturer-success) 8%,
            var(--lecturer-surface)
        );
        border-color: color-mix(
            in oklab,
            var(--lecturer-success) 24%,
            transparent
        );
        color: var(--lecturer-success);
    }

    .lecturer-table-wrap {
        @apply w-full overflow-x-auto;
    }

    .lecturer-table {
        @apply w-full min-w-[620px] border-collapse text-left;
    }

    .lecturer-table th {
        @apply px-6 py-4 text-xs font-semibold;
        color: var(--lecturer-muted);
    }

    .lecturer-table td {
        @apply border-t px-6 py-4 text-sm;
        border-color: var(--lecturer-border);
        color: var(--lecturer-muted);
    }

    .lecturer-table tbody tr:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 5%,
            transparent
        );
    }

    .lecturer-kb-name {
        @apply block max-w-[260px] font-semibold;
        color: var(--lecturer-text);
    }

    .lecturer-doc-pill {
        @apply inline-flex items-center gap-1.5 rounded-[7px] px-2.5 py-1 text-xs font-semibold;
        background-color: var(--lecturer-surface-soft);
        color: var(--lecturer-text);
    }

    .lecturer-doc-pill svg {
        color: var(--lecturer-primary);
    }

    .lecturer-doc-error {
        @apply size-1.5 rounded-full;
        background-color: var(--lecturer-danger);
    }

    .lecturer-table-empty {
        @apply py-10 text-center text-sm;
        color: var(--lecturer-muted) !important;
    }

    .lecturer-manage-button {
        @apply inline-flex items-center justify-center gap-1 rounded-[7px] px-3 py-1.5 text-sm font-semibold transition-colors outline-none focus-visible:ring-2;
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 10%,
            var(--lecturer-surface)
        );
        color: var(--lecturer-primary);
        --tw-ring-color: color-mix(
            in oklab,
            var(--lecturer-primary) 45%,
            transparent
        );
    }

    .lecturer-manage-button:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 16%,
            var(--lecturer-surface)
        );
    }

    .lecturer-detail-page {
        @apply min-h-svh w-full;
        background-color: var(--lecturer-bg);
        color: var(--lecturer-text);
    }

    .lecturer-detail-header {
        @apply flex flex-col gap-5 px-5 py-8 sm:flex-row sm:items-start sm:px-8 lg:px-10;
        background-color: var(--lecturer-surface-soft);
        border-bottom: 1px solid var(--lecturer-border-soft);
    }

    .lecturer-detail-back {
        @apply mt-1 inline-flex size-9 shrink-0 items-center justify-center rounded-full transition-colors outline-none focus-visible:ring-2;
        color: var(--lecturer-muted);
        --tw-ring-color: color-mix(
            in oklab,
            var(--lecturer-primary) 45%,
            transparent
        );
    }

    .lecturer-detail-back:hover {
        background-color: var(--lecturer-surface);
        color: var(--lecturer-text);
    }

    .lecturer-detail-heading {
        @apply min-w-0 flex-1;
    }

    .lecturer-detail-title-row {
        @apply flex flex-wrap items-center gap-4;
    }

    .lecturer-detail-title-row h1 {
        @apply text-3xl leading-tight font-bold tracking-[-0.03em];
        color: var(--lecturer-text);
    }

    .lecturer-detail-heading p {
        @apply mt-1 text-base leading-relaxed italic;
        color: var(--lecturer-muted);
    }

    .lecturer-detail-actions {
        @apply flex items-center gap-3 sm:ml-auto;
    }

    .lecturer-edit-button {
        @apply h-12 rounded-[8px] px-5 text-base font-semibold shadow-none;
        background-color: var(--lecturer-surface) !important;
        border-color: var(--lecturer-border) !important;
        color: var(--lecturer-text) !important;
    }

    .lecturer-edit-button:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 8%,
            var(--lecturer-surface)
        ) !important;
    }

    .lecturer-delete-button {
        @apply size-12 rounded-[8px] shadow-none;
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 10%,
            var(--lecturer-surface)
        ) !important;
        color: var(--lecturer-danger) !important;
    }

    .lecturer-delete-button:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 16%,
            var(--lecturer-surface)
        ) !important;
    }

    .lecturer-delete-copy {
        @apply text-sm leading-relaxed;
        color: var(--lecturer-muted);
    }

    .lecturer-delete-copy strong {
        color: var(--lecturer-text);
    }

    .lecturer-danger-action-button {
        @apply h-10 rounded-[8px] px-5 text-sm font-semibold shadow-none;
        background-color: var(--lecturer-danger) !important;
        color: var(--lecturer-primary-foreground) !important;
    }

    .lecturer-danger-action-button:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 86%,
            #000
        ) !important;
    }

    .lecturer-detail-content {
        @apply mx-auto flex w-full max-w-[920px] flex-col gap-6 px-5 py-10 sm:px-8;
    }

    .lecturer-upload-input {
        @apply sr-only;
    }

    .lecturer-upload-card {
        @apply flex min-h-[185px] w-full flex-col items-center justify-center gap-3 rounded-[14px] border border-dashed px-6 py-8 text-center transition-colors outline-none focus-visible:ring-2;
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 6%,
            var(--lecturer-surface)
        );
        border-color: color-mix(
            in oklab,
            var(--lecturer-primary) 28%,
            var(--lecturer-border)
        );
        color: var(--lecturer-text);
        --tw-ring-color: color-mix(
            in oklab,
            var(--lecturer-primary) 45%,
            transparent
        );
    }

    .lecturer-upload-card:hover {
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 10%,
            var(--lecturer-surface)
        );
        border-color: var(--lecturer-primary);
    }

    .lecturer-upload-card[data-uploading='true'] {
        opacity: 0.78;
    }

    .lecturer-upload-icon {
        @apply flex size-12 items-center justify-center rounded-full;
        background-color: var(--lecturer-surface);
        color: var(--lecturer-primary);
    }

    .lecturer-upload-title {
        @apply text-base font-medium;
        color: var(--lecturer-text);
    }

    .lecturer-upload-description {
        @apply max-w-[560px] text-sm leading-relaxed;
        color: var(--lecturer-muted);
    }

    .lecturer-document-section {
        @apply mt-1;
    }

    .lecturer-document-heading {
        @apply flex items-center gap-2 text-sm font-bold;
        color: var(--lecturer-text);
    }

    .lecturer-document-list {
        @apply mt-5 flex flex-col gap-3;
    }

    .lecturer-document-card {
        @apply relative gap-0 rounded-[10px] border py-0 shadow-none;
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 3%,
            var(--lecturer-surface)
        );
        border-color: color-mix(
            in oklab,
            var(--lecturer-primary) 18%,
            var(--lecturer-border)
        );
    }

    .lecturer-document-card[data-status='failed'] {
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 5%,
            var(--lecturer-surface)
        );
        border-color: color-mix(
            in oklab,
            var(--lecturer-danger) 25%,
            var(--lecturer-border)
        );
    }

    .lecturer-document-content {
        @apply flex items-start gap-4 px-5 py-5;
    }

    .lecturer-document-delete {
        @apply absolute top-3 right-3 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive;

        @media (hover: hover) {
            @apply opacity-0;
        }
    }

    @media (hover: hover) {
        .lecturer-document-card:hover .lecturer-document-delete,
        .lecturer-document-card:focus-within .lecturer-document-delete {
            @apply opacity-100;
        }
    }

    .lecturer-document-icon {
        @apply flex size-10 shrink-0 items-center justify-center rounded-[8px];
        background-color: color-mix(
            in oklab,
            var(--lecturer-primary) 12%,
            var(--lecturer-surface)
        );
        color: var(--lecturer-primary);
    }

    .lecturer-document-icon[data-status='failed'] {
        background-color: color-mix(
            in oklab,
            var(--lecturer-danger) 12%,
            var(--lecturer-surface)
        );
        color: var(--lecturer-danger);
    }

    .lecturer-document-copy {
        @apply min-w-0 flex-1;
    }

    .lecturer-document-copy h3 {
        @apply truncate text-sm font-bold;
        color: var(--lecturer-text);
    }

    .lecturer-document-meta {
        @apply mt-2 flex flex-wrap items-center gap-3 text-xs;
        color: var(--lecturer-muted);
    }

    .lecturer-document-status {
        @apply mt-3 flex items-center gap-1.5 text-xs font-semibold;
        color: var(--lecturer-success);
    }

    .lecturer-document-status[data-status='failed'] {
        color: var(--lecturer-danger);
    }

    .lecturer-document-status[data-status='processing'] {
        color: var(--lecturer-primary);
    }

    .lecturer-detail-empty {
        @apply rounded-[10px] border px-5 py-8 text-center text-sm;
        background-color: var(--lecturer-surface);
        border-color: var(--lecturer-border);
        color: var(--lecturer-muted);
    }

    @media (max-width: 640px) {
        .student-chat-stage--session {
            @apply px-0;
        }

        .student-chat-thread {
            @apply px-3;
            padding-bottom: 11rem;
        }

        .student-chat-scroll-anchor {
            scroll-margin-bottom: 12rem;
        }

        .student-message-bubble {
            @apply max-w-[calc(100vw_-_7rem)];
        }

        .student-chat-composer {
            @apply right-3 bottom-4 left-3 pb-0;
        }

        .lecturer-page {
            @apply px-4 py-6;
        }

        .lecturer-page-header h1 {
            @apply text-2xl;
        }

        .lecturer-header-actions {
            @apply w-full;
        }

        .lecturer-create-button {
            @apply flex-1;
        }

        .lecturer-detail-title-row h1 {
            @apply text-2xl;
        }

        .lecturer-detail-actions {
            @apply w-full;
        }

        .lecturer-edit-button {
            @apply flex-1;
        }

        .lecturer-detail-content {
            @apply px-4 py-6;
        }

        .lecturer-document-content {
            @apply flex-col;
        }
    }
}

.lecturer-dashboard-shell {
    --primary: var(--lecturer-primary);
    --primary-foreground: var(--lecturer-primary-foreground);
    --ring: color-mix(in oklab, var(--lecturer-primary) 40%, transparent);
}

/* Error page */
.error-shell {
    @apply relative flex min-h-screen items-center justify-center bg-background px-4;
}

.error-toggle {
    @apply absolute top-4 right-4;
}

.error-content {
    @apply flex flex-col items-center gap-4 text-center max-w-sm w-full;
}

.error-icon {
    @apply flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground;
}

.error-code {
    @apply text-6xl font-bold text-muted-foreground;
}

.error-title {
    @apply text-2xl font-semibold text-foreground;
}

.error-description {
    @apply text-sm text-muted-foreground;
}

/* Markdown rendering in chat messages */
.student-message-markdown {
    @apply text-sm leading-relaxed;
}

.student-message-markdown p {
    @apply mb-2 last:mb-0;
}

.student-message-markdown strong,
.student-message-markdown b {
    @apply font-semibold;
}

.student-message-markdown em,
.student-message-markdown i {
    @apply italic;
}

.student-message-markdown ul {
    @apply mb-2 list-disc pl-5;
}

.student-message-markdown ol {
    @apply mb-2 list-decimal pl-5;
}

.student-message-markdown li {
    @apply mb-0.5;
}

.student-message-markdown code {
    @apply rounded bg-muted px-1 py-0.5 font-mono text-xs;
}

.student-message-markdown pre {
    @apply mb-2 overflow-x-auto rounded-md bg-muted p-3;
}

.student-message-markdown pre code {
    @apply bg-transparent p-0;
}

.student-message-markdown h1,
.student-message-markdown h2,
.student-message-markdown h3 {
    @apply mb-1 font-semibold;
}

.student-message-markdown blockquote {
    @apply border-l-2 border-muted-foreground pl-3 italic text-muted-foreground;
}