/* ============================================================
   EcoleNumerique - Global Theme (Lite)
   Single source for base tokens + shared app components.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Lexend:wght@500;600;700;800&family=Outfit:wght@600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Public+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
    --app-font-title: "Outfit", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-font-section: "Lexend", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-font-numeric: "Space Grotesk", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-font-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --app-font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", monospace;
    --app-font-display: var(--app-font-title);
    --app-font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-sans: var(--app-font-sans);
    --font-display: var(--app-font-display);
    --font-body: var(--app-font-body);
    --font-mono: var(--app-font-mono);
    --app-scale: 0.94;
    --app-text-2xs: 0.75rem;
    --app-text-xs: 0.8125rem;
    --app-text-sm: 0.9375rem;
    --app-text-base: 1rem;
    --app-text-lg: 1.125rem;
    --app-text-xl: 1.25rem;
    --app-text-2xl: 1.5rem;
    --app-text-3xl: 1.875rem;
    --app-text-4xl: 2.25rem;
    --app-leading-2xs: 1.2;
    --app-leading-xs: 1.3;
    --app-leading-sm: 1.4;
    --app-leading-base: 1.5;
    --app-leading-lg: 1.5;
    --app-leading-xl: 1.4;
    --app-leading-2xl: 1.25;
    --app-leading-3xl: 1.15;
    --app-leading-4xl: 1.1;
    --app-control-height-sm: 2.25rem;
    --app-control-height-md: 2.75rem;
    --app-control-height-lg: 3.25rem;
    --app-control-padding-sm: 0.5rem 0.75rem;
    --app-control-padding-md: 0.65rem 0.9rem;
    --app-control-padding-lg: 0.8rem 1rem;
    --app-chip-padding: 0.25rem 0.6rem;
    --app-badge-padding: 0.3rem 0.7rem;
    --app-pill-height: 2rem;
    --app-pill-padding: 0.3rem 0.7rem;
    --app-tab-height: 2.4rem;
    --app-tab-padding: 0.45rem 0.85rem;
    --app-space-1: 0.25rem;
    --app-space-2: 0.5rem;
    --app-space-3: 0.75rem;
    --app-space-4: 1rem;
    --app-space-5: 1.25rem;
    --app-space-6: 1.5rem;
    --app-space-7: 2rem;
    --app-space-8: 2.5rem;
    --app-stack-gap: var(--app-space-3);
    --app-section-gap: var(--app-space-5);
    --app-card-padding: var(--app-space-5);
    --app-card-padding-sm: var(--app-space-4);
    --app-card-padding-xs: var(--app-space-3);
    --app-toolbar-height: 3.75rem;
    --app-toolbar-height-mobile: 3.5rem;
    --app-toolbar-offset-current: var(--app-toolbar-height);
    --app-toolbar-offset-extra: 0px;

    --app-gray-50: #f9fafb;
    --app-gray-100: #f3f4f6;
    --app-gray-200: #e5e7eb;
    --app-gray-300: #d1d5db;
    --app-gray-400: #9ca3af;
    --app-gray-500: #6b7280;
    --app-gray-600: #4b5563;
    --app-gray-700: #374151;
    --app-gray-800: #1f2937;
    --app-gray-900: #111827;

    --app-primary-50: #eff6ff;
    --app-primary-100: #dbeafe;
    --app-primary-200: #bfdbfe;
    --app-primary-300: #93c5fd;
    --app-primary-400: #60a5fa;
    --app-primary-500: #3b82f6;
    --app-primary-600: #2563eb;
    --app-primary-700: #1d4ed8;
    --app-primary-800: #1e40af;
    --app-primary-900: #1e3a8a;

    --app-primary: var(--app-primary-600);
    --app-primary-strong: var(--app-primary-700);
    --app-primary-dim: color-mix(in srgb, var(--app-primary) 14%, transparent);
    --app-link: var(--app-primary-600);

    --app-success: #16a34a;
    --app-warning: #d97706;
    --app-danger: #dc2626;
    --app-info: var(--app-primary-600);
    --app-tone-slate: var(--app-gray-700);
    --app-tone-primary: var(--app-primary-600);
    --app-tone-info: var(--app-primary-500);
    --app-tone-success: var(--app-success);
    --app-tone-warning: var(--app-warning);
    --app-tone-danger: var(--app-danger);

    --app-bg: var(--app-gray-200);
    --app-surface: #ffffff;
    --app-surface-strong: #ffffff;
    --app-surface-hover: var(--app-gray-100);
    --app-text: var(--app-gray-900);
    --app-text-secondary: var(--app-gray-700);
    --app-muted: var(--app-gray-600);
    --app-border: var(--app-gray-200);
    --app-border-strong: color-mix(in srgb, var(--app-primary) 26%, var(--app-gray-300) 74%);
    --app-ring: color-mix(in srgb, var(--app-primary) 28%, transparent);
    --app-focus-ring: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--app-ring);
    --app-button-bg: color-mix(in srgb, var(--app-primary-600) 22%, #ffffff 78%);
    --app-button-bg-hover: color-mix(in srgb, var(--app-primary-600) 30%, #ffffff 70%);
    --app-button-text: color-mix(in srgb, var(--app-primary-900) 76%, #0f172a 24%);
    --app-button-text-strong: color-mix(in srgb, var(--app-primary-900) 88%, #020617 12%);
    --app-button-border: color-mix(in srgb, var(--app-primary-700) 52%, var(--app-border) 48%);
    --app-button-border-strong: color-mix(in srgb, var(--app-primary-800) 66%, var(--app-border) 34%);
    --app-button-shadow: 0 12px 24px -18px rgba(37, 99, 235, 0.4);
    --app-button-primary-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
    --app-button-primary-bg-hover: linear-gradient(135deg, #1d4ed8, #1e40af);
    --app-button-primary-border: color-mix(in srgb, var(--app-primary-700) 62%, transparent);
    --app-button-primary-text: #ffffff;
    --app-button-primary-shadow: 0 14px 26px -18px rgba(37, 99, 235, 0.42);
    --app-button-active-bg: linear-gradient(135deg, #1d4ed8, #1e40af);
    --app-button-active-border: color-mix(in srgb, var(--app-primary-800) 72%, transparent);
    --app-button-active-text: #ffffff;
    --app-button-active-shadow: 0 14px 26px -18px rgba(29, 78, 216, 0.44);
    --app-button-success-bg: linear-gradient(135deg, #059669, #047857);
    --app-button-success-bg-hover: linear-gradient(135deg, #047857, #065f46);
    --app-button-success-border: color-mix(in srgb, #047857 66%, transparent);
    --app-button-success-text: #ffffff;
    --app-button-success-shadow: 0 14px 26px -18px rgba(5, 150, 105, 0.42);
    --app-button-warning-bg: linear-gradient(135deg, #f59e0b, #d97706);
    --app-button-warning-bg-hover: linear-gradient(135deg, #d97706, #b45309);
    --app-button-warning-border: color-mix(in srgb, #b45309 66%, transparent);
    --app-button-warning-text: #111827;
    --app-button-warning-shadow: 0 14px 26px -18px rgba(217, 119, 6, 0.4);
    --app-button-danger-bg: linear-gradient(135deg, #e11d48, #be123c);
    --app-button-danger-bg-hover: linear-gradient(135deg, #be123c, #9f1239);
    --app-button-danger-border: color-mix(in srgb, #9f1239 70%, transparent);
    --app-button-danger-text: #ffffff;
    --app-button-danger-shadow: 0 14px 26px -18px rgba(225, 29, 72, 0.42);

    --app-radius-sm: 0.5rem;
    --app-radius-md: 0.75rem;
    --app-radius-lg: 1rem;
    --app-radius-xl: 1.5rem;
    --app-radius-full: 9999px;

    --app-shadow-sm: 0 4px 10px -8px rgba(17, 24, 39, 0.2);
    --app-shadow: 0 10px 18px -14px rgba(17, 24, 39, 0.22);
    --app-shadow-md: 0 16px 28px -20px rgba(17, 24, 39, 0.26);
    --app-shadow-soft: 0 8px 18px -16px rgba(17, 24, 39, 0.18);

    --app-page-flat-bg: var(--app-gray-200);
    --app-page-flat-bg-dark: #0f172a;
    --app-panel-flat-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    --app-panel-flat-bg-dark: linear-gradient(180deg, rgba(13, 27, 48, 0.95), rgba(10, 22, 40, 0.95));

    --app-transition-fast: 160ms ease;
    --app-transition: 220ms ease;
    --app-interactive-transition: color var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), box-shadow var(--app-transition-fast), transform var(--app-transition-fast);
}

html {
    font-size: calc(100% * var(--app-scale));
}

/* Login page compact layout */
body.app-auth-page.auth-page--login .auth-suite--single .auth-suite__layout {
    width: min(780px, 100%);
    grid-template-columns: minmax(0, 1fr);
}

body.app-auth-page.auth-page--login .auth-suite--single .auth-suite__aside {
    display: none;
}

body.app-auth-page.auth-page--login .auth-suite--single .auth-suite__panel {
    grid-column: 1 / -1;
}

body.app-auth-page.auth-page--login .auth-suite {
    padding: clamp(0.85rem, 2vw, 1.6rem);
}

body.app-auth-page.auth-page--login .auth-suite__panel {
    gap: 0.9rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    border-radius: 1.35rem;
}

body.app-auth-page.auth-page--login .auth-suite__panel-header {
    gap: 0.75rem;
}

body.app-auth-page.auth-page--login .auth-suite__logo-mark {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.85rem;
}

body.app-auth-page.auth-page--login .auth-suite__panel-title {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

body.app-auth-page.auth-page--login .auth-suite__panel-subtitle {
    font-size: 0.88rem;
    line-height: 1.45;
}

body.app-auth-page.auth-page--login .auth-form-v2 {
    gap: 0.8rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__field {
    gap: 0.35rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__label {
    font-size: 0.86rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__input-icon {
    width: 2.35rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__control {
    min-height: 2.85rem;
    font-size: 0.92rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__toggle {
    min-height: 2.2rem;
    font-size: 0.78rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__hint,
body.app-auth-page.auth-page--login .auth-form-v2__meta-note,
body.app-auth-page.auth-page--login .auth-form-v2__footer-note,
body.app-auth-page.auth-page--login .auth-sso-card__text {
    font-size: 0.85rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__meta-row {
    gap: 0.6rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__checkbox {
    font-size: 0.86rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__submit,
body.app-auth-page.auth-page--login .auth-form-v2__secondary-action {
    min-height: 2.85rem;
    font-size: 0.92rem;
    padding: 0.65rem 0.95rem;
    border-radius: 0.95rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__divider {
    font-size: 0.72rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__alt-block,
body.app-auth-page.auth-page--login .auth-form-v2__alt-stack {
    gap: 0.7rem;
}

body.app-auth-page.auth-page--login .auth-form-v2__alt-stack > .auth-form-v2__secondary-action {
    justify-self: center;
}

body.app-auth-page.auth-page--login .auth-sso-card {
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
}

body.app-auth-page.auth-page--login .auth-suite__trust-row {
    gap: 0.5rem;
}

body.app-auth-page.auth-page--login .auth-suite__trust-chip {
    min-height: 1.7rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
}

/* Register page compact layout */
body.app-auth-page.auth-page--register .auth-suite--single .auth-suite__layout {
    width: min(860px, 100%);
    grid-template-columns: minmax(0, 1fr);
}

body.app-auth-page.auth-page--register .auth-suite--single .auth-suite__aside {
    display: none;
}

body.app-auth-page.auth-page--register .auth-suite--single .auth-suite__panel {
    grid-column: 1 / -1;
}

body.app-auth-page.auth-page--register .auth-suite {
    padding: clamp(0.85rem, 2vw, 1.6rem);
}

body.app-auth-page.auth-page--register .auth-suite__panel {
    gap: 0.85rem;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    border-radius: 1.35rem;
}

body.app-auth-page.auth-page--register .auth-suite__panel-header {
    gap: 0.75rem;
}

body.app-auth-page.auth-page--register .auth-suite__logo-mark {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.85rem;
}

body.app-auth-page.auth-page--register .auth-suite__panel-title {
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

body.app-auth-page.auth-page--register .auth-suite__panel-subtitle {
    font-size: 0.88rem;
    line-height: 1.45;
}

body.app-auth-page.auth-page--register .auth-form-v2 {
    gap: 0.8rem;
}

body.app-auth-page.auth-page--register .auth-register-step-v2 {
    gap: 0.85rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__section-head {
    gap: 0.25rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__section-kicker {
    min-height: 1.55rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.66rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__section-title {
    font-size: 1.05rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__section-text,
body.app-auth-page.auth-page--register .auth-stepper-v2__content small,
body.app-auth-page.auth-page--register .auth-choice-v2__text,
body.app-auth-page.auth-page--register .auth-strength-v2__status {
    font-size: 0.85rem;
    line-height: 1.45;
}

body.app-auth-page.auth-page--register .auth-stepper-v2 {
    gap: 0.6rem;
}

body.app-auth-page.auth-page--register .auth-stepper-v2__item {
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
}

body.app-auth-page.auth-page--register .auth-stepper-v2__index {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.82rem;
}

body.app-auth-page.auth-page--register .auth-stepper-v2__content strong {
    font-size: 0.82rem;
}

body.app-auth-page.auth-page--register .auth-choice-grid-v2 {
    gap: 0.7rem;
}

body.app-auth-page.auth-page--register .auth-choice-v2 {
    gap: 0.45rem;
    padding: 0.85rem;
    border-radius: 1rem;
}

body.app-auth-page.auth-page--register .auth-choice-v2__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.8rem;
}

body.app-auth-page.auth-page--register .auth-choice-v2__title {
    font-size: 0.9rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__radio-grid {
    gap: 0.5rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__radio-card {
    min-height: 2rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__field {
    gap: 0.35rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__label {
    font-size: 0.86rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__input-icon {
    width: 2.35rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__control {
    min-height: 2.85rem;
    font-size: 0.92rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__toggle {
    min-height: 2.2rem;
    font-size: 0.78rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__hint,
body.app-auth-page.auth-page--register .auth-form-v2__meta-note,
body.app-auth-page.auth-page--register .auth-form-v2__footer-note,
body.app-auth-page.auth-page--register .auth-inline-banner__text {
    font-size: 0.85rem;
}

body.app-auth-page.auth-page--register .auth-inline-banner {
    gap: 0.6rem;
    padding: 0.75rem 0.85rem;
    border-radius: 1rem;
}

body.app-auth-page.auth-page--register .auth-inline-banner__chip {
    min-height: 1.55rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

body.app-auth-page.auth-page--register .auth-password-panel-v2 {
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
}

body.app-auth-page.auth-page--register .auth-strength-v2__label {
    font-size: 0.82rem;
}

body.app-auth-page.auth-page--register .auth-strength-v2__meter {
    height: 0.45rem;
}

body.app-auth-page.auth-page--register .auth-rules-v2 {
    gap: 0.45rem;
}

body.app-auth-page.auth-page--register .auth-rules-v2__item {
    min-height: 2.1rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.8rem;
    font-size: 0.78rem;
}

body.app-auth-page.auth-page--register .auth-rules-v2__badge {
    min-width: 3.6rem;
    min-height: 1.45rem;
    font-size: 0.68rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__submit,
body.app-auth-page.auth-page--register .auth-form-v2__secondary-action {
    min-height: 2.85rem;
    font-size: 0.92rem;
    padding: 0.65rem 0.95rem;
    border-radius: 0.95rem;
}

body.app-auth-page.auth-page--register .auth-form-v2__divider {
    font-size: 0.72rem;
}

body.app-auth-page.auth-page--register .auth-suite__trust-row {
    gap: 0.5rem;
}

body.app-auth-page.auth-page--register .auth-suite__trust-chip {
    min-height: 1.7rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.72rem;
}

body.app-auth-page .auth-register-step-v2[hidden] {
    display: none !important;
}

html[data-font-scale="comfort"],
html[data-font-scale="comfortable"] {
    --app-scale: 1;
}

html[data-font-scale="compact"] {
    --app-scale: 0.94;
}

html.dark,
html[data-theme="dark"] {
    --app-bg: var(--app-gray-900);
    --app-surface: var(--app-gray-800);
    --app-surface-strong: var(--app-gray-800);
    --app-surface-hover: var(--app-gray-700);
    --app-text: #ffffff;
    --app-text-secondary: #d1d5db;
    --app-muted: #9ca3af;
    --app-border: var(--app-gray-700);
    --app-border-strong: color-mix(in srgb, var(--app-primary-400) 34%, var(--app-gray-600) 66%);
    --app-ring: color-mix(in srgb, var(--app-primary-400) 32%, transparent);
    --app-button-bg: color-mix(in srgb, var(--app-primary-400) 28%, rgba(15, 23, 42, 0.94) 72%);
    --app-button-bg-hover: color-mix(in srgb, var(--app-primary-300) 34%, rgba(15, 23, 42, 0.92) 66%);
    --app-button-text: #ffffff;
    --app-button-text-strong: #ffffff;
    --app-button-border: color-mix(in srgb, var(--app-primary-300) 60%, rgba(148, 163, 184, 0.28) 40%);
    --app-button-border-strong: color-mix(in srgb, var(--app-primary-200) 72%, rgba(148, 163, 184, 0.22) 28%);
    --app-button-shadow: 0 14px 28px -20px rgba(37, 99, 235, 0.38);
    --app-button-primary-bg: linear-gradient(135deg, #3b82f6, #2563eb);
    --app-button-primary-bg-hover: linear-gradient(135deg, #2563eb, #1d4ed8);
    --app-button-primary-border: color-mix(in srgb, var(--app-primary-300) 56%, transparent);
    --app-button-primary-shadow: 0 16px 28px -18px rgba(37, 99, 235, 0.54);
    --app-button-active-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
    --app-button-active-border: color-mix(in srgb, var(--app-primary-300) 66%, transparent);
    --app-button-active-shadow: 0 16px 30px -18px rgba(37, 99, 235, 0.58);
    --app-button-success-bg: linear-gradient(135deg, #10b981, #059669);
    --app-button-success-bg-hover: linear-gradient(135deg, #059669, #047857);
    --app-button-success-border: color-mix(in srgb, #34d399 62%, transparent);
    --app-button-success-text: #ffffff;
    --app-button-success-shadow: 0 16px 28px -18px rgba(16, 185, 129, 0.42);
    --app-button-warning-bg: linear-gradient(135deg, #fbbf24, #f59e0b);
    --app-button-warning-bg-hover: linear-gradient(135deg, #f59e0b, #d97706);
    --app-button-warning-border: color-mix(in srgb, #fbbf24 62%, transparent);
    --app-button-warning-text: #ffffff;
    --app-button-warning-shadow: 0 16px 28px -18px rgba(245, 158, 11, 0.46);
    --app-button-danger-bg: linear-gradient(135deg, #fb7185, #e11d48);
    --app-button-danger-bg-hover: linear-gradient(135deg, #e11d48, #be123c);
    --app-button-danger-border: color-mix(in srgb, #fb7185 62%, transparent);
    --app-button-danger-text: #ffffff;
    --app-button-danger-shadow: 0 16px 28px -18px rgba(244, 63, 94, 0.46);
    --app-shadow-sm: 0 6px 14px -10px rgba(0, 0, 0, 0.58);
    --app-shadow: 0 14px 22px -16px rgba(0, 0, 0, 0.64);
    --app-shadow-md: 0 20px 32px -20px rgba(0, 0, 0, 0.68);
}

html.dark :is(
    .app-btn-primary,
    .app-btn-success,
    .app-btn-warning,
    .app-btn-danger,
    .dash-btn,
    .dash-btn--ghost,
    .app-segmented-link,
    .app-copy-btn,
    .referral-copy-btn,
    .referral-open-btn,
    .admin-shell-button,
    .admin-shell-button--primary,
    .admin-shell-button--secondary,
    .admin-shell-button--danger,
    .admin-shell-button--ghost,
    .support-hub :is(.support-chip-btn, .support-new-btn, .support-send-btn, .support-empty-action, .support-reset, .support-file-btn, .support-tab)
),
html[data-theme="dark"] :is(
    .app-btn-primary,
    .app-btn-success,
    .app-btn-warning,
    .app-btn-danger,
    .dash-btn,
    .dash-btn--ghost,
    .app-segmented-link,
    .app-copy-btn,
    .referral-copy-btn,
    .referral-open-btn,
    .admin-shell-button,
    .admin-shell-button--primary,
    .admin-shell-button--secondary,
    .admin-shell-button--danger,
    .admin-shell-button--ghost,
    .support-hub :is(.support-chip-btn, .support-new-btn, .support-send-btn, .support-empty-action, .support-reset, .support-file-btn, .support-tab)
) {
    color: #ffffff !important;
}

html.dark :is(a, button, input[type="submit"], input[type="button"]):is(
    [class*="rounded"][class*="border-blue-"][class*="text-blue-"],
    [class*="rounded"][class*="border-indigo-"][class*="text-indigo-"],
    [class*="rounded"][class*="border-sky-"][class*="text-sky-"],
    [class*="rounded"][class*="border-slate-"][class*="text-slate-"]
),
html[data-theme="dark"] :is(a, button, input[type="submit"], input[type="button"]):is(
    [class*="rounded"][class*="border-blue-"][class*="text-blue-"],
    [class*="rounded"][class*="border-indigo-"][class*="text-indigo-"],
    [class*="rounded"][class*="border-sky-"][class*="text-sky-"],
    [class*="rounded"][class*="border-slate-"][class*="text-slate-"]
) {
    color: #ffffff !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: var(--app-font-body);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--app-font-body);
    background: var(--app-bg) !important;
    color: var(--app-text);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

:where(h1) {
    font-family: var(--app-font-display);
    font-size: clamp(var(--app-text-2xl), 2.6vw, var(--app-text-3xl));
    line-height: var(--app-leading-2xl);
    font-weight: 650;
    color: var(--app-text);
}

:where(h2) {
    font-family: var(--app-font-section);
    font-size: var(--app-text-2xl);
    line-height: var(--app-leading-xl);
    font-weight: 600;
    color: var(--app-text);
}

:where(h3) {
    font-family: var(--app-font-section);
    font-size: var(--app-text-xl);
    line-height: var(--app-leading-lg);
    font-weight: 600;
    color: var(--app-text);
}

:where(h4) {
    font-family: var(--app-font-section);
    font-size: var(--app-text-lg);
    line-height: var(--app-leading-lg);
    font-weight: 600;
    color: var(--app-text);
}

:where(h5) {
    font-family: var(--app-font-section);
    font-size: var(--app-text-base);
    line-height: var(--app-leading-base);
    font-weight: 600;
    color: var(--app-text);
}

:where(h6) {
    font-family: var(--app-font-section);
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-base);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

:where(p) {
    font-size: var(--app-text-base);
    line-height: var(--app-leading-base);
}

:where(small, .app-text-muted, .app-helper-text) {
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-sm);
    color: var(--app-muted);
}

:where(label) {
    font-family: var(--app-font-ui);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-sm);
    font-weight: 600;
    color: var(--app-text-secondary);
}

:where(button, input, select, textarea) {
    font-family: var(--app-font-ui);
}

:where(
    .app-btn,
    .app-btn-primary,
    .dash-btn,
    .dash-btn--ghost,
    .app-segmented-link,
    .app-shell-chip,
    .app-shell-theme,
    .admin-shell-button,
    .admin-topbar-action
) {
    font-family: var(--app-font-ui);
}

:where(
    .app-kpi-card__value,
    .app-status-pill,
    .app-badge,
    .app-nav-link__badge,
    .app-shell-chip__badge,
    .font-numeric
) {
    font-family: var(--app-font-numeric);
    font-variant-numeric: tabular-nums;
}

:where(
    .app-shell-toolbar__eyebrow,
    .app-page-hero__eyebrow,
    .app-shell-sidebar__summary-label,
    .app-shell-sidebar__aux-label
) {
    font-family: var(--app-font-section);
}

code,
pre,
kbd,
samp {
    font-family: var(--app-font-mono);
}

.font-display {
    font-family: var(--app-font-display);
}

:where(h2, h3, h4, h5, h6).font-display {
    font-family: var(--app-font-section);
}

.font-section {
    font-family: var(--app-font-section);
}

.font-ui {
    font-family: var(--app-font-ui);
}

.font-numeric {
    font-family: var(--app-font-numeric);
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--app-link);
    transition: color var(--app-transition-fast);
}

a:hover {
    color: var(--app-primary-700);
}

html.dark a:hover {
    color: var(--app-primary-300);
}

:focus-visible {
    outline: 2px solid var(--app-primary);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

:where(button, [role="button"], a, input, select, textarea) {
    transition: var(--app-interactive-transition);
}

:where(
    button,
    [role="button"],
    summary,
    a[href],
    label[for],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
):not(:disabled):not([aria-disabled="true"]) {
    cursor: pointer;
}

:where(button, [role="button"], a, input, select, textarea):focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

:where(button, [role="button"], input, select, textarea):disabled,
:where(button, [role="button"], input, select, textarea)[aria-disabled="true"],
:where(a)[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Unified role accent palette */
body:is(.app-role-admin, .app-role-teacher, .app-role-student, .app-role-company, .app-role-auth, .app-role-web) {
    --app-role-accent: var(--app-primary-600);
}

body.app-view,
body.app-public-page,
body.app-auth-page {
    --app-shell-accent: var(--app-role-accent, var(--app-primary));
    --app-shell-border: color-mix(in srgb, var(--app-shell-accent) 24%, var(--app-border) 76%);
    --app-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 36%, var(--app-border) 64%);
    --app-panel-surface: var(--app-surface-strong);
    --app-chip-surface: var(--app-surface);
    --app-surface-shadow: var(--app-shadow);
    --app-chip-shadow: var(--app-shadow-sm);
    --app-button-bg: color-mix(in srgb, var(--app-shell-accent) 22%, var(--app-surface) 78%);
    --app-button-bg-hover: color-mix(in srgb, var(--app-shell-accent) 30%, var(--app-surface) 70%);
    --app-button-text: color-mix(in srgb, var(--app-shell-accent) 84%, var(--app-text) 16%);
    --app-button-text-strong: color-mix(in srgb, var(--app-shell-accent) 28%, var(--app-text) 72%);
    --app-button-border: color-mix(in srgb, var(--app-shell-accent) 52%, var(--app-border) 48%);
    --app-button-border-strong: color-mix(in srgb, var(--app-shell-accent) 66%, var(--app-border) 34%);
    --app-button-shadow: 0 12px 24px -18px color-mix(in srgb, var(--app-shell-accent) 40%, transparent);
    --app-button-primary-bg: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent) 92%, #2563eb 8%), color-mix(in srgb, var(--app-shell-accent) 84%, #1d4ed8 16%));
    --app-button-primary-bg-hover: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent) 84%, #1d4ed8 16%), color-mix(in srgb, var(--app-shell-accent) 76%, #1e40af 24%));
    --app-button-primary-border: color-mix(in srgb, var(--app-shell-accent) 62%, transparent);
    --app-button-primary-shadow: 0 14px 26px -18px color-mix(in srgb, var(--app-shell-accent) 46%, transparent);
    --app-button-active-bg: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent) 90%, #1d4ed8 10%), color-mix(in srgb, var(--app-shell-accent) 78%, #1e40af 22%));
    --app-button-active-border: color-mix(in srgb, var(--app-shell-accent) 76%, transparent);
    --app-button-active-shadow: 0 14px 26px -18px color-mix(in srgb, var(--app-shell-accent) 52%, transparent);
}

/* Boost blue accents in light mode (without touching dark mode palette) */
html:not(.dark):not([data-theme="dark"]) body.app-view,
html:not(.dark):not([data-theme="dark"]) body.app-public-page,
html:not(.dark):not([data-theme="dark"]) body.app-auth-page {
    --app-shell-border: color-mix(in srgb, var(--app-shell-accent) 32%, var(--app-border) 68%);
    --app-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 50%, var(--app-border) 50%);
}

/* Force page background in light mode even if Tailwind bg-* classes exist on <body>. */
html:not(.dark):not([data-theme="dark"]) body:is(.bg-slate-50, .bg-slate-100, .bg-slate-200, .bg-white) {
    background: var(--app-bg) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher {
    background: var(--app-bg) !important;
}

/* Shared panels and surfaces */
:is(
    .app-shell-toolbar,
    .app-shell-sidebar,
    .app-shell-sidebar__section,
    .app-auth-panel,
    .app-public-panel,
    .app-checkout-panel,
    .admin-shell-card,
    .teacher-stats-panel,
    .teacher-stats-mini-card,
    .teacher-stats-soft-card,
    .teacher-stats-list-card
) {
    border: 1px solid var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-panel-surface, var(--app-surface-strong)) !important;
    box-shadow: var(--app-surface-shadow, var(--app-shadow)) !important;
}

/* Chips and compact controls */
:is(
    .app-shell-chip,
    .app-shell-theme,
    .app-shell-burger,
    .app-public-chip,
    .teacher-topbar-chip,
    .student-topbar-chip,
    .teacher-stats-chip,
    .teacher-stats-month-pill
) {
    border: 1px solid var(--app-button-border) !important;
    background: color-mix(in srgb, var(--app-button-bg) 90%, var(--app-surface) 10%) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-button-shadow);
    transition: border-color var(--app-transition-fast), color var(--app-transition-fast), background var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

:is(
    .app-shell-chip,
    .app-shell-theme,
    .app-shell-burger,
    .app-public-chip,
    .teacher-topbar-chip,
    .student-topbar-chip,
    .teacher-stats-chip,
    .teacher-stats-month-pill
):hover {
    border-color: var(--app-button-border-strong) !important;
    background: color-mix(in srgb, var(--app-button-bg-hover) 94%, var(--app-surface) 6%) !important;
    color: var(--app-text) !important;
}

/* Light mode: keep topbar button labels fully black for readability */
html:not(.dark):not([data-theme="dark"]) .app-shell-toolbar :is(
    .student-topbar-chip,
    .teacher-topbar-chip,
    .admin-topbar-action,
    .app-shell-theme,
    .app-shell-burger
) {
    color: #111827 !important;
}

html:not(.dark):not([data-theme="dark"]) .app-shell-toolbar :is(
    .student-topbar-chip,
    .teacher-topbar-chip,
    .admin-topbar-action,
    .app-shell-theme,
    .app-shell-burger
):hover {
    color: #0f172a !important;
}

.app-shell-chip--primary {
    background: var(--app-button-primary-bg) !important;
    border-color: var(--app-button-primary-border) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
}

.app-shell-chip--primary:hover {
    background: var(--app-button-primary-bg-hover) !important;
    color: var(--app-button-primary-text) !important;
}

.app-shell-chip--kpi {
    border-style: dashed !important;
}

.app-shell-chip--kpi.is-active {
    border-color: color-mix(in srgb, #0ea5e9 58%, var(--app-border) 42%) !important;
    background: color-mix(in srgb, #0ea5e9 18%, var(--app-surface) 82%) !important;
    color: color-mix(in srgb, #0c4a6e 72%, var(--app-text) 28%) !important;
}

.app-shell-chip--kpi .app-icon > svg {
    width: 0.9rem;
    height: 0.9rem;
}

html.dark .app-shell-chip--kpi.is-active,
html[data-theme="dark"] .app-shell-chip--kpi.is-active {
    border-color: color-mix(in srgb, #38bdf8 56%, rgba(148, 163, 184, 0.34) 44%) !important;
    background: color-mix(in srgb, #0ea5e9 22%, rgba(15, 23, 42, 0.88) 78%) !important;
    color: #e0f2fe !important;
}

/* Sidebar links */
.app-shell-sidebar :is(.app-nav-link, .app-shell-sidebar__primary) {
    border: 1px solid var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-surface) !important;
    color: var(--app-text-secondary) !important;
    box-shadow: none !important;
    transition: border-color var(--app-transition-fast), color var(--app-transition-fast), background var(--app-transition-fast);
}

.app-shell-sidebar :is(.app-nav-link, .app-shell-sidebar__primary):hover,
.app-shell-sidebar :is(.app-nav-link, .app-shell-sidebar__primary).is-active-nav {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    color: var(--app-text) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 9%, var(--app-surface) 91%) !important;
}

html:not(.dark):not([data-theme="dark"]) .app-shell-sidebar :is(.app-nav-link, .app-shell-sidebar__primary):hover,
html:not(.dark):not([data-theme="dark"]) .app-shell-sidebar :is(.app-nav-link, .app-shell-sidebar__primary).is-active-nav {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 15%, var(--app-surface) 85%) !important;
}

/* Unified app shells */
.app-shell-toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 35 !important;
    min-height: var(--app-toolbar-height);
    padding: 0.5rem 0.8rem !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface)) !important;
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.18) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html:not(.dark):not([data-theme="dark"]) .app-shell-toolbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, #f8fafc 94%), #ffffff) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] :is(.app-shell-toolbar + *, .app-shell-toolbar + script + *) {
    margin-top: calc(var(--app-toolbar-offset-current, var(--app-toolbar-height)) + var(--app-toolbar-offset-extra, 0px)) !important;
}

.app-shell-toolbar__inner {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    width: min(100%, 100%);
}

.app-shell-toolbar__heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.app-shell-toolbar__brandline {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.58rem;
}

.app-shell-toolbar__mobile-logo {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, var(--app-border) 70%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface) 93%);
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 35%, transparent);
}

.app-shell-toolbar__mobile-logo-text {
    font-family: var(--app-font-display);
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
}

.app-shell-toolbar__titleblock {
    min-width: 0;
}

.app-shell-toolbar__eyebrow {
    margin: 0;
    color: var(--app-text-secondary) !important;
    font-size: var(--app-text-2xs) !important;
    font-weight: 700;
    letter-spacing: 0.16em !important;
    text-transform: uppercase;
}

.app-shell-toolbar__title {
    margin: 0.08rem 0 0;
    color: var(--app-text) !important;
    font-family: var(--app-font-display);
    font-size: clamp(var(--app-text-lg), 1.6vw, var(--app-text-2xl)) !important;
    line-height: 1.04 !important;
    font-weight: 650;
}

.app-shell-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0.1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
}

.app-shell-toolbar__actions::-webkit-scrollbar {
    display: none;
}

:is(.app-shell-chip, .app-shell-theme, .app-shell-burger, .admin-topbar-action) {
    min-height: var(--app-control-height-sm);
    padding: var(--app-chip-padding) !important;
    border-radius: var(--app-radius-full) !important;
    font-size: var(--app-text-xs) !important;
    line-height: var(--app-leading-xs);
    font-weight: 600 !important;
}

:is(.app-shell-theme, .app-shell-burger) {
    width: var(--app-control-height-sm);
    min-width: var(--app-control-height-sm);
    padding: 0 !important;
}

.app-shell-burger > svg,
.app-shell-burger .app-icon > svg {
    width: 0.9rem;
    height: 0.9rem;
}

.app-shell-burger[data-close-sidebar] {
    font-size: 1rem !important;
    line-height: 1 !important;
}

@media (min-width: 768px) {
    body:is(.app-role-teacher, .app-role-student, .app-role-admin)[data-view] .app-shell-toolbar {
        left: 16.8rem !important;
        width: calc(100% - 16.8rem) !important;
    }

    .app-shell-toolbar__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
    }

    .app-shell-toolbar__heading {
        align-items: center;
    }

    .app-shell-toolbar__actions {
        flex-shrink: 0;
        justify-content: flex-end;
        padding-bottom: 0;
    }
}

.app-shell-chip__badge,
.app-nav-link__badge {
    display: inline-flex;
    min-width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border-radius: var(--app-radius-full);
    background: var(--app-primary-500);
    color: #ffffff;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    line-height: 1;
}

.app-nav-link__badge.is-empty {
    background: color-mix(in srgb, #64748b 78%, #94a3b8 22%);
    color: rgba(255, 255, 255, 0.92);
}

.app-shell-chip--notification {
    position: relative;
}

.app-user-menu {
    position: relative;
    z-index: 3;
}

.app-user-menu[open] {
    z-index: 35;
}

.app-user-menu__trigger {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-user-menu__trigger::-webkit-details-marker,
.app-user-menu__trigger::marker {
    display: none;
    content: "";
}

.app-user-menu__avatar,
.app-user-menu__header-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    flex: 0 0 auto;
}

.app-user-menu__avatar {
    width: 2rem;
    height: 2rem;
    overflow: visible;
}

.app-user-menu__header-avatar {
    width: 2.7rem;
    height: 2.7rem;
    overflow: hidden;
}

.app-user-menu__avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.app-user-menu__avatar-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, #0f172a 18%), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 62%, #38bdf8 38%));
    color: #ffffff;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.app-user-menu__trigger-badge {
    position: absolute;
    top: -0.22rem;
    right: -0.24rem;
    display: inline-flex;
    min-width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    line-height: 1;
    z-index: 1;
    box-shadow: 0 0 0 2px var(--app-surface, #ffffff);
}

.app-user-menu__meta,
.app-user-menu__header-copy {
    min-width: 0;
    display: grid;
}

.app-user-menu__meta {
    gap: 0.08rem;
    text-align: left;
}

.app-user-menu__name,
.app-user-menu__header-name {
    min-width: 0;
    margin: 0;
    font-size: var(--app-text-sm);
    line-height: 1.2;
    font-weight: 700;
    color: var(--app-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-menu__role,
.app-user-menu__header-role,
.app-user-menu__header-email {
    min-width: 0;
    margin: 0;
    color: var(--app-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-menu__role,
.app-user-menu__header-role {
    font-size: var(--app-text-2xs);
}

.app-user-menu__header-email {
    font-size: var(--app-text-xs);
}

.app-user-menu__caret {
    margin-left: auto;
    color: var(--app-text-secondary);
    transition: transform var(--app-transition-fast), color var(--app-transition-fast);
}

.app-user-menu__caret > svg {
    width: 0.85rem;
    height: 0.85rem;
}

.app-user-menu[open] .app-user-menu__caret {
    transform: rotate(180deg);
    color: var(--app-text);
}

.app-user-menu__panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    width: min(21rem, calc(100vw - 1.5rem));
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--app-shell-border, var(--app-border)) 82%);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-panel-surface, var(--app-surface-strong)) 98%, transparent), color-mix(in srgb, var(--app-chip-surface, var(--app-surface)) 96%, transparent));
    box-shadow: var(--app-shadow-md);
    padding: 0.9rem;
    display: grid;
    gap: 0.55rem;
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
}

.app-user-menu__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.1rem 0.15rem 0.72rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-border) 88%);
}

.app-user-menu__header-copy {
    gap: 0.14rem;
}

.app-user-menu__header-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--app-border) 82%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface) 93%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 62%, var(--app-text) 38%);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.app-user-menu__list {
    display: grid;
    gap: 0.2rem;
}

.app-user-menu__separator {
    height: 1px;
    margin: 0.1rem 0.15rem 0;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-border) 90%);
}

.app-user-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 0.9rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-text);
    padding: 0.76rem 0.82rem;
    text-decoration: none;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast), transform var(--app-transition-fast);
}

.app-user-menu__item:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, var(--app-border) 78%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    color: var(--app-text);
}

.app-user-menu__item:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 42%, var(--app-border) 58%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface) 92%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent);
}

.app-user-menu__item:active {
    transform: translateY(1px);
}

.app-user-menu__item-copy {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.72rem;
}

.app-user-menu__item-icon {
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface) 93%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 66%, var(--app-text) 34%);
    flex: 0 0 auto;
    transition: background var(--app-transition-fast), color var(--app-transition-fast);
}

.app-user-menu__item-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--app-text-sm);
    font-weight: 650;
    line-height: 1.2;
}

.app-user-menu__item:hover .app-user-menu__item-icon,
.app-user-menu__item:focus-visible .app-user-menu__item-icon {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 74%, var(--app-text) 26%);
}

.app-user-menu__item-badge {
    display: inline-flex;
    min-width: 1.28rem;
    height: 1.28rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.38rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--app-primary-500), color-mix(in srgb, var(--app-primary-500) 72%, #ffffff 28%));
    color: #ffffff;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-panel-surface, var(--app-surface-strong)) 86%, transparent);
}

.app-user-menu__item--danger {
    color: color-mix(in srgb, var(--app-danger) 74%, var(--app-text) 26%);
}

.app-user-menu__item--danger .app-user-menu__item-icon {
    background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface) 92%);
    color: color-mix(in srgb, var(--app-danger) 76%, var(--app-text) 24%);
}

.app-user-menu__item--danger:hover {
    border-color: color-mix(in srgb, var(--app-danger) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-danger) 6%, var(--app-surface) 94%);
    color: color-mix(in srgb, var(--app-danger) 82%, var(--app-text) 18%);
}

.app-user-menu__item--danger:focus-visible {
    border-color: color-mix(in srgb, var(--app-danger) 38%, var(--app-border) 62%);
    background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface) 92%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-danger) 14%, transparent);
}

.app-user-menu__item--danger:hover .app-user-menu__item-icon,
.app-user-menu__item--danger:focus-visible .app-user-menu__item-icon {
    background: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-danger) 84%, var(--app-text) 16%);
}

@media (max-width: 767px) {
    .app-user-menu__meta {
        display: none;
    }

    .app-user-menu__header {
        align-items: flex-start;
    }

    .app-user-menu__header-pill {
        display: none;
    }

    .app-user-menu__trigger {
        justify-content: center;
    }
}

.app-shell-sidebar {
    width: min(100%, 16.8rem);
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface)) !important;
    box-shadow: 0 18px 32px -28px rgba(15, 23, 42, 0.24) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Keep student shell palette identical across all student routes */
#student-sidebar {
    --app-shell-accent: #1d4ed8;
    --app-shell-border: color-mix(in srgb, var(--app-shell-accent) 24%, var(--app-border) 76%);
    --app-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 36%, var(--app-border) 64%);
    --app-panel-surface: var(--app-surface-strong);
    --app-chip-surface: var(--app-surface);
}

#student-sidebar .app-shell-sidebar__section {
    border-color: var(--app-shell-border) !important;
    background: var(--app-panel-surface) !important;
    box-shadow: var(--app-surface-shadow, var(--app-shadow)) !important;
}

#student-sidebar .app-nav-link {
    border-color: var(--app-shell-border) !important;
    background: var(--app-surface) !important;
    color: var(--app-text-secondary) !important;
}

#student-sidebar .app-nav-link:hover,
#student-sidebar .app-nav-link.is-active-nav {
    border-color: var(--app-shell-border-strong) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 9%, var(--app-surface) 91%) !important;
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) #student-sidebar .app-nav-link:hover,
html:not(.dark):not([data-theme="dark"]) #student-sidebar .app-nav-link.is-active-nav {
    background: color-mix(in srgb, var(--app-shell-accent) 15%, var(--app-surface) 85%) !important;
}

/* Keep topbar palette identical across student/teacher routes */
.student-shell-toolbar {
    --student-shell-accent: #1d4ed8;
    --student-shell-border: color-mix(in srgb, var(--student-shell-accent) 24%, var(--app-border) 76%);
    --student-shell-border-strong: color-mix(in srgb, var(--student-shell-accent) 36%, var(--app-border) 64%);
    --app-shell-accent: var(--student-shell-accent);
    --app-shell-border: var(--student-shell-border);
    --app-shell-border-strong: var(--student-shell-border-strong);
    --app-panel-surface: var(--app-surface-strong);
    --app-chip-surface: var(--app-surface);
    --app-surface-shadow: var(--app-shadow);
    --app-chip-shadow: var(--app-shadow-sm);
    border-color: var(--student-shell-border) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--student-shell-accent) 4%, var(--app-surface-strong) 96%), var(--app-surface)) !important;
}

html:not(.dark):not([data-theme="dark"]) .student-shell-toolbar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--student-shell-accent) 6%, #f8fafc 94%), #ffffff) !important;
}

.student-shell-toolbar :is(.student-topbar-chip, .app-shell-theme, .app-shell-burger) {
    border-color: var(--app-button-border) !important;
    background: color-mix(in srgb, var(--app-button-bg) 90%, var(--app-surface) 10%) !important;
    color: var(--app-text) !important;
}

.student-shell-toolbar :is(.student-topbar-chip, .app-shell-theme, .app-shell-burger):hover {
    border-color: var(--app-button-border-strong) !important;
    background: color-mix(in srgb, var(--app-button-bg-hover) 94%, var(--app-surface) 6%) !important;
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) .student-shell-toolbar :is(.student-topbar-chip, .app-shell-theme, .app-shell-burger) {
    color: #111827 !important;
}

html:not(.dark):not([data-theme="dark"]) .student-shell-toolbar :is(.student-topbar-chip, .app-shell-theme, .app-shell-burger):hover {
    color: #0f172a !important;
}

body.app-role-teacher .app-shell-toolbar {
    --app-shell-accent: var(--app-role-accent, var(--app-primary));
    --app-shell-border: color-mix(in srgb, var(--app-shell-accent) 24%, var(--app-border) 76%);
    --app-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 36%, var(--app-border) 64%);
    border-color: var(--app-shell-border) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] {
    --teacher-shell-toolbar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent) 6%, #f8fafc 94%),
        #ffffff
    );
    --teacher-shell-sidebar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent) 7%, #f5f7ff 93%),
        #fbfcff
    );
    --teacher-shell-section-bg: color-mix(in srgb, var(--app-shell-accent) 4%, #ffffff 96%);
    --teacher-shell-nav-bg: color-mix(in srgb, var(--app-shell-accent) 5%, #ffffff 95%);
    --teacher-shell-nav-bg-hover: color-mix(in srgb, var(--app-shell-accent) 11%, #eef4ff 89%);
    --teacher-shell-border: color-mix(in srgb, var(--app-shell-accent) 28%, #d8e0f2 72%);
    --teacher-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 42%, #d8e0f2 58%);
    --app-button-bg: color-mix(in srgb, var(--app-shell-accent) 16%, #eef4ff 84%);
    --app-button-bg-hover: color-mix(in srgb, var(--app-shell-accent) 22%, #e6eeff 78%);
    --app-button-border: color-mix(in srgb, var(--app-shell-accent) 38%, #cfd9f0 62%);
    --app-button-border-strong: color-mix(in srgb, var(--app-shell-accent) 54%, #cfd9f0 46%);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] .app-shell-toolbar {
    border-color: var(--teacher-shell-border) !important;
    background: var(--teacher-shell-toolbar-bg) !important;
    box-shadow: 0 14px 26px -22px rgba(37, 99, 235, 0.26) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] .app-shell-toolbar__eyebrow {
    color: color-mix(in srgb, var(--app-shell-accent) 56%, #334155 44%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar {
    border-right-color: var(--teacher-shell-border) !important;
    background: var(--teacher-shell-sidebar-bg) !important;
    box-shadow: 10px 0 28px -28px rgba(37, 99, 235, 0.24) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__brand {
    border-bottom-color: var(--teacher-shell-border) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 3%, #ffffff 97%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__section {
    border-color: var(--teacher-shell-border) !important;
    background: var(--teacher-shell-section-bg) !important;
    box-shadow: 0 12px 24px -24px rgba(37, 99, 235, 0.18) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__summary-label {
    color: color-mix(in srgb, var(--app-shell-accent) 48%, #334155 52%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__summary-caret {
    color: color-mix(in srgb, var(--app-shell-accent) 38%, #64748b 62%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link {
    border-color: var(--teacher-shell-border) !important;
    background: var(--teacher-shell-nav-bg) !important;
    color: #243041 !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link:hover {
    border-color: var(--teacher-shell-border-strong) !important;
    background: var(--teacher-shell-nav-bg-hover) !important;
    color: #0f172a !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link.is-active-nav {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg) !important;
    color: var(--app-button-active-text) !important;
    box-shadow: var(--app-button-active-shadow) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link.is-active-nav .app-icon,
html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link.is-active-nav .app-nav-link__label {
    color: var(--app-button-active-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] {
    --student-shell-accent: var(--app-role-accent, var(--app-primary));
    --app-shell-accent: var(--student-shell-accent);
    --student-shell-toolbar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent) 6%, #f8fafc 94%),
        #ffffff
    );
    --student-shell-sidebar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent) 7%, #f5f7ff 93%),
        #fbfcff
    );
    --student-shell-section-bg: color-mix(in srgb, var(--app-shell-accent) 4%, #ffffff 96%);
    --student-shell-nav-bg: color-mix(in srgb, var(--app-shell-accent) 5%, #ffffff 95%);
    --student-shell-nav-bg-hover: color-mix(in srgb, var(--app-shell-accent) 11%, #eef4ff 89%);
    --student-shell-border: color-mix(in srgb, var(--app-shell-accent) 28%, #d8e0f2 72%);
    --student-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 42%, #d8e0f2 58%);
    --app-button-bg: color-mix(in srgb, var(--app-shell-accent) 16%, #eef4ff 84%);
    --app-button-bg-hover: color-mix(in srgb, var(--app-shell-accent) 22%, #e6eeff 78%);
    --app-button-border: color-mix(in srgb, var(--app-shell-accent) 38%, #cfd9f0 62%);
    --app-button-border-strong: color-mix(in srgb, var(--app-shell-accent) 54%, #cfd9f0 46%);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] .student-shell-toolbar {
    --student-shell-accent: var(--app-role-accent, var(--app-primary));
    --student-shell-border: color-mix(in srgb, var(--student-shell-accent) 28%, #d8e0f2 72%);
    --student-shell-border-strong: color-mix(in srgb, var(--student-shell-accent) 42%, #d8e0f2 58%);
    --app-shell-accent: var(--student-shell-accent);
    --app-shell-border: var(--student-shell-border);
    --app-shell-border-strong: var(--student-shell-border-strong);
    border-color: var(--student-shell-border) !important;
    background: var(--student-shell-toolbar-bg) !important;
    box-shadow: 0 14px 26px -22px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] .app-shell-toolbar__eyebrow {
    color: color-mix(in srgb, var(--app-shell-accent) 54%, #334155 46%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar {
    --app-shell-accent: var(--app-role-accent, var(--app-primary));
    --app-shell-border: var(--student-shell-border);
    --app-shell-border-strong: var(--student-shell-border-strong);
    border-right-color: var(--student-shell-border) !important;
    background: var(--student-shell-sidebar-bg) !important;
    box-shadow: 10px 0 28px -28px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-shell-sidebar__brand {
    border-bottom-color: var(--student-shell-border) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 3%, #ffffff 97%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-shell-sidebar__section {
    border-color: var(--student-shell-border) !important;
    background: var(--student-shell-section-bg) !important;
    box-shadow: 0 12px 24px -24px rgba(37, 99, 235, 0.16) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-shell-sidebar__summary-label {
    color: color-mix(in srgb, var(--app-shell-accent) 46%, #334155 54%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-shell-sidebar__summary-caret {
    color: color-mix(in srgb, var(--app-shell-accent) 36%, #64748b 64%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-nav-link {
    border-color: var(--student-shell-border) !important;
    background: var(--student-shell-nav-bg) !important;
    color: #243041 !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-nav-link:hover {
    border-color: var(--student-shell-border-strong) !important;
    background: var(--student-shell-nav-bg-hover) !important;
    color: #0f172a !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-nav-link.is-active-nav {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg) !important;
    color: var(--app-button-active-text) !important;
    box-shadow: var(--app-button-active-shadow) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-nav-link.is-active-nav .app-icon,
html:not(.dark):not([data-theme="dark"]) body.app-role-student[data-view^="student/"] #student-sidebar .app-nav-link.is-active-nav .app-nav-link__label {
    color: var(--app-button-active-text) !important;
}

html.dark body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar,
html[data-theme="dark"] body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar {
    border-right-color: color-mix(in srgb, #0284c7 26%, rgba(148, 163, 184, 0.2) 74%) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #0284c7 8%, rgba(15, 23, 42, 0.96) 92%),
        rgba(15, 23, 42, 0.98)
    ) !important;
    box-shadow: 10px 0 28px -28px rgba(2, 132, 199, 0.24) !important;
}

html.dark body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__brand,
html[data-theme="dark"] body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__brand {
    border-bottom-color: color-mix(in srgb, #0284c7 24%, rgba(148, 163, 184, 0.18) 76%) !important;
    background: color-mix(in srgb, #0284c7 6%, rgba(15, 23, 42, 0.98) 94%) !important;
}

html.dark body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__section,
html[data-theme="dark"] body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__section {
    border-color: color-mix(in srgb, #0284c7 24%, rgba(148, 163, 184, 0.18) 76%) !important;
    background: color-mix(in srgb, #0284c7 10%, rgba(15, 23, 42, 0.94) 90%) !important;
    box-shadow: 0 12px 24px -24px rgba(2, 132, 199, 0.18) !important;
}

html.dark body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link,
html[data-theme="dark"] body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link {
    border-color: color-mix(in srgb, #0284c7 26%, rgba(148, 163, 184, 0.18) 74%) !important;
    background: color-mix(in srgb, #0284c7 9%, rgba(15, 23, 42, 0.92) 91%) !important;
    color: #d1d5db !important;
}

html.dark body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link:hover,
html[data-theme="dark"] body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-nav-link:hover {
    border-color: color-mix(in srgb, #0284c7 38%, rgba(148, 163, 184, 0.16) 62%) !important;
    background: color-mix(in srgb, #0284c7 14%, rgba(15, 23, 42, 0.9) 86%) !important;
    color: #f8fafc !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] {
    --dashboard-shell-shared-accent: var(--app-role-accent, var(--app-primary));
}

body.app-role-student[data-view^="student/"] {
    --student-shell-accent: var(--dashboard-shell-shared-accent);
    --app-shell-accent: var(--dashboard-shell-shared-accent);
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) {
    --dashboard-sidebar-border: color-mix(in srgb, var(--dashboard-shell-shared-accent) 28%, var(--app-border) 72%);
    --dashboard-sidebar-border-strong: color-mix(in srgb, var(--dashboard-shell-shared-accent) 42%, var(--app-border) 58%);
    --dashboard-sidebar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dashboard-shell-shared-accent) 8%, var(--app-surface-strong) 92%),
        var(--app-surface)
    );
    --dashboard-sidebar-brand-bg: color-mix(in srgb, var(--dashboard-shell-shared-accent) 5%, var(--app-surface-strong) 95%);
    --dashboard-sidebar-section-bg: color-mix(in srgb, var(--dashboard-shell-shared-accent) 7%, var(--app-surface-strong) 93%);
    --dashboard-sidebar-link-bg: color-mix(in srgb, var(--dashboard-shell-shared-accent) 9%, var(--app-surface) 91%);
    --dashboard-sidebar-link-bg-hover: color-mix(in srgb, var(--dashboard-shell-shared-accent) 15%, var(--app-surface) 85%);
    border-right-color: var(--dashboard-sidebar-border) !important;
    background: var(--dashboard-sidebar-bg) !important;
    box-shadow: 10px 0 28px -28px color-mix(in srgb, var(--dashboard-shell-shared-accent) 24%, transparent) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-shell-sidebar__brand {
    border-bottom-color: var(--dashboard-sidebar-border) !important;
    background: var(--dashboard-sidebar-brand-bg) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-shell-sidebar__section {
    border-color: var(--dashboard-sidebar-border) !important;
    background: var(--dashboard-sidebar-section-bg) !important;
    box-shadow: 0 12px 24px -24px color-mix(in srgb, var(--dashboard-shell-shared-accent) 18%, transparent) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-shell-sidebar__summary-label {
    color: color-mix(in srgb, var(--dashboard-shell-shared-accent) 46%, var(--app-text-secondary) 54%) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-shell-sidebar__summary-caret {
    color: color-mix(in srgb, var(--dashboard-shell-shared-accent) 34%, var(--app-text-secondary) 66%) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link {
    border-color: var(--dashboard-sidebar-border) !important;
    background: var(--dashboard-sidebar-link-bg) !important;
    color: var(--app-text-secondary) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link:hover {
    border-color: var(--dashboard-sidebar-border-strong) !important;
    background: var(--dashboard-sidebar-link-bg-hover) !important;
    color: var(--app-text) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link.is-active-nav {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg) !important;
    color: var(--app-button-active-text) !important;
    box-shadow: var(--app-button-active-shadow) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link.is-active-nav :is(.app-icon, .app-nav-link__label) {
    color: var(--app-button-active-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-company {
    --company-shell-toolbar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent) 6%, #f8fafc 94%),
        #ffffff
    );
    --company-shell-border: color-mix(in srgb, var(--app-shell-accent) 28%, #d8e0f2 72%);
    --app-button-bg: color-mix(in srgb, var(--app-shell-accent) 16%, #eef4ff 84%);
    --app-button-bg-hover: color-mix(in srgb, var(--app-shell-accent) 22%, #e6eeff 78%);
    --app-button-border: color-mix(in srgb, var(--app-shell-accent) 38%, #cfd9f0 62%);
    --app-button-border-strong: color-mix(in srgb, var(--app-shell-accent) 54%, #cfd9f0 46%);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-company .app-shell-toolbar {
    border-color: var(--company-shell-border) !important;
    background: var(--company-shell-toolbar-bg) !important;
    box-shadow: 0 14px 26px -22px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-company .app-shell-toolbar__eyebrow {
    color: color-mix(in srgb, var(--app-shell-accent) 52%, #334155 48%) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-company .app-shell-sidebar__logo {
    border-color: color-mix(in srgb, var(--app-shell-accent) 26%, #d8e0f2 74%) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 4%, #ffffff 96%) !important;
    box-shadow: 0 10px 20px -18px rgba(37, 99, 235, 0.16) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-shell-sidebar__logo {
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, var(--app-border) 74%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%) !important;
    box-shadow: 0 10px 20px -18px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, transparent) !important;
}

.app-shell-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-height: 4.15rem;
    padding: 0.88rem 0.9rem !important;
    border-bottom: 1px solid var(--app-border);
}

.app-shell-sidebar__logo {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    flex-shrink: 0;
    border-radius: 0.88rem;
}

.app-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface) 92%);
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 34%, transparent);
}

.app-brand-badge--lg {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.1rem;
}

.app-brand-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-brand-badge__text {
    font-family: var(--app-font-display);
    font-size: var(--app-text-base);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-text) 18%);
}

.app-shell-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
    opacity: 0.9;
}

.app-shell-glow--primary {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, transparent);
}

.app-shell-glow--info {
    background: color-mix(in srgb, var(--app-tone-info) 16%, transparent);
}

.app-shell-glow--warning {
    background: color-mix(in srgb, var(--app-tone-warning) 14%, transparent);
}

.app-shell-sidebar__brand-copy {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.app-shell-brand-title {
    margin: 0;
    color: var(--app-text) !important;
    font-family: var(--app-font-display);
    font-size: clamp(0.98rem, 0.7rem + 0.35vw, 1.1rem) !important;
    line-height: 1.1;
    font-weight: 680;
    letter-spacing: 0.01em;
}

.app-shell-brand-meta {
    margin: 0;
    color: color-mix(in srgb, var(--app-text-secondary) 88%, transparent) !important;
    font-size: clamp(0.72rem, 0.64rem + 0.12vw, var(--app-text-xs)) !important;
    line-height: 1.28;
}

.app-shell-sidebar__brand .app-shell-burger {
    width: 2.15rem;
    min-width: 2.15rem;
    min-height: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 9%, var(--app-surface) 91%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 72%, var(--app-text) 28%);
    box-shadow: 0 6px 14px -12px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 42%, transparent);
    transition: background-color var(--app-transition-fast), border-color var(--app-transition-fast), transform var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-shell-sidebar__brand .app-shell-burger--desktop > svg {
    width: 1rem;
    height: 1rem;
    display: block;
    margin: 0;
}

.app-shell-sidebar__brand .app-shell-burger:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 44%, var(--app-border) 56%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 15%, var(--app-surface) 85%);
    transform: translateY(-1px);
    box-shadow: 0 10px 18px -14px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, transparent);
}

.app-shell-sidebar__brand .app-shell-burger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, var(--app-border) 42%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, transparent);
}

.app-shell-sidebar__brand [data-close-sidebar] {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .app-shell-sidebar__brand .app-shell-burger--desktop {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .app-shell-sidebar__brand [data-close-sidebar] {
        display: none !important;
    }
}

.app-shell-sidebar__nav {
    padding: 0.82rem 0.82rem 0.92rem !important;
    font-size: var(--app-text-sm);
}

.app-shell-sidebar__summary {
    min-height: var(--app-control-height-sm);
    padding: 0.5rem 0.72rem !important;
}

.app-shell-sidebar__summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.app-shell-sidebar__summary-label,
.admin-sidebar-section__title {
    color: var(--app-text-secondary) !important;
    font-size: var(--app-text-2xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
}

.app-shell-sidebar__summary-caret {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    transition: transform var(--app-transition-fast), color var(--app-transition-fast);
}

.app-shell-sidebar__section[open] .app-shell-sidebar__summary-caret {
    transform: rotate(180deg);
}

.app-shell-sidebar__section-body {
    padding: 0 0.35rem 0.35rem !important;
}

:is(.app-shell-sidebar .app-nav-link, .admin-shell-nav-link) {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm) !important;
    border-radius: var(--app-radius-md) !important;
    font-size: var(--app-text-sm) !important;
    line-height: var(--app-leading-sm);
    font-weight: 600 !important;
}

.app-nav-link__content,
.admin-shell-nav-link__content {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.72rem;
}

.app-nav-link__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell-sidebar .app-icon,
.admin-shell-nav-link .app-icon,
.admin-shell-nav-link__icon {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 74%, var(--app-text) 26%);
}

.app-shell-sidebar .app-icon > svg,
.admin-shell-nav-link__icon > svg {
    width: 1.05rem;
    height: 1.05rem;
}

body.app-view :is(.text-slate-400, .text-slate-500) {
    color: color-mix(in srgb, var(--app-text-secondary) 76%, var(--app-gray-500) 24%) !important;
}

body.app-view :is(.text-slate-600, .text-slate-700) {
    color: var(--app-text-secondary) !important;
}

body.app-view :is(.text-slate-800, .text-slate-900) {
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-view :is(.text-slate-100, .text-slate-200) {
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-view .text-slate-300 {
    color: var(--app-text-secondary) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-view :is(section, article, aside, div, form, a, button)[class*="rounded-"][class*="bg-slate-800"],
html:not(.dark):not([data-theme="dark"]) body.app-view :is(section, article, aside, div, form, a, button)[class*="rounded-"][class*="bg-slate-900"],
html:not(.dark):not([data-theme="dark"]) body.app-view :is(section, article, aside, div, form, a, button)[class*="rounded-"][class*="bg-slate-950"] {
    background: var(--app-panel-flat-bg) !important;
    border-color: color-mix(in srgb, var(--app-primary) 12%, var(--app-border) 88%) !important;
    color: var(--app-text) !important;
    box-shadow: var(--app-shadow-sm) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-view :is(input, select, textarea)[class*="bg-slate-800"],
html:not(.dark):not([data-theme="dark"]) body.app-view :is(input, select, textarea)[class*="bg-slate-900"],
html:not(.dark):not([data-theme="dark"]) body.app-view :is(input, select, textarea)[class*="bg-slate-950"] {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-view :is(input, select, textarea)[class*="bg-slate-"]::file-selector-button {
    background: var(--app-gray-100) !important;
    color: var(--app-text-secondary) !important;
    border: 0;
    border-radius: 0.65rem;
}

/* Inputs */
:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    border: 1px solid var(--app-shell-border, var(--app-border));
    min-height: var(--app-control-height-md);
    padding: var(--app-control-padding-md);
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-sm);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    color: var(--app-text);
}

:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus-visible {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    box-shadow: 0 0 0 3px var(--app-ring);
    outline: none;
}

body[data-density="compact"] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-xs);
}

.app-auth-input {
    border-color: var(--app-shell-border, var(--app-border)) !important;
}

.app-auth-input:focus,
.app-auth-input:focus-visible {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 0 0 3px var(--app-ring) !important;
    outline: none !important;
}

.app-auth-submit {
    border: 1px solid color-mix(in srgb, var(--app-primary) 56%, transparent);
    box-shadow: 0 10px 18px -14px color-mix(in srgb, var(--app-primary) 50%, transparent);
}

.app-link-primary {
    color: var(--app-link) !important;
}

.app-link-primary:hover {
    color: var(--app-primary-700) !important;
}

html.dark .app-link-primary:hover,
html[data-theme="dark"] .app-link-primary:hover {
    color: var(--app-primary-300) !important;
}

.app-text-accent {
    color: color-mix(in srgb, var(--app-primary) 78%, var(--app-text) 22%) !important;
}

.app-inline-note {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-sm);
}

.app-inline-note--danger {
    color: color-mix(in srgb, var(--app-tone-danger) 78%, var(--app-text) 22%) !important;
}

.app-inline-note--warning {
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%) !important;
}

.app-checkbox {
    accent-color: var(--app-shell-accent, var(--app-primary));
}

.app-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--app-ring);
}

.app-flash {
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: var(--app-radius-md);
    padding: 0.85rem 1rem;
    font-size: var(--app-text-sm);
    line-height: 1.55;
}

.app-flash--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 32%, var(--app-border) 68%);
    background: color-mix(in srgb, var(--app-tone-info) 8%, var(--app-surface) 92%);
    color: color-mix(in srgb, var(--app-tone-info) 76%, var(--app-text) 24%);
}

.app-flash--success {
    border-color: color-mix(in srgb, var(--app-tone-success) 32%, var(--app-border) 68%);
    background: color-mix(in srgb, var(--app-tone-success) 8%, var(--app-surface) 92%);
    color: color-mix(in srgb, var(--app-tone-success) 76%, var(--app-text) 24%);
}

.app-flash--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-tone-warning) 8%, var(--app-surface) 92%);
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%);
}

.app-flash--danger {
    border-color: color-mix(in srgb, var(--app-tone-danger) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-tone-danger) 8%, var(--app-surface) 92%);
    color: color-mix(in srgb, var(--app-tone-danger) 78%, var(--app-text) 22%);
}

/* Buttons with blue/sky/indigo backgrounds */
body :is(a, button, input[type="submit"], input[type="button"]):is(
    [class*="bg-blue-"],
    [class*="bg-indigo-"],
    [class*="bg-sky-"],
    [class*="bg-cyan-"],
    [class*="bg-emerald-"]
) {
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong)) !important;
    border-color: color-mix(in srgb, var(--app-primary) 54%, transparent) !important;
    color: #ffffff !important;
}

/* Density */
body[data-density="comfortable"],
body[data-density="comfort"] {
    --app-density-card-radius-lg: 1.5rem;
    --app-density-card-radius-md: 1rem;
    --app-density-pad-lg: 1.5rem;
    --app-density-pad-md: 1.125rem;
    --app-density-shadow: 0 18px 38px -30px rgba(15, 23, 42, 0.22);
}

body[data-density="compact"] {
    --app-density-card-radius-lg: 1.2rem;
    --app-density-card-radius-md: 0.95rem;
    --app-density-pad-lg: 1.25rem;
    --app-density-pad-md: 1rem;
    --app-density-shadow: 0 12px 26px -22px rgba(15, 23, 42, 0.18);
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] {
    background-color: #f4f7fb !important;
    background-image: none !important;
}

html.dark body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] {
    background-color: #08111f !important;
    background-image: none !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] > :is(div.pointer-events-none.fixed.inset-0.overflow-hidden, .admin-shell-backdrop, .admin-auth-backdrop) {
    display: none !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg, .backdrop-blur-xl) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.shadow-card, .shadow-card-hover, .shadow-modal, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-glow) {
    box-shadow: var(--app-density-shadow) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.rounded-3xl, .rounded-\[2rem\]) {
    border-radius: var(--app-density-card-radius-lg) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.rounded-2xl, .rounded-\[1\.75rem\]) {
    border-radius: var(--app-density-card-radius-md) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] .rounded-xl {
    border-radius: 0.85rem !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.p-8, .p-7, .p-6) {
    padding: var(--app-density-pad-lg) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] .p-5 {
    padding: 1.05rem !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] .p-4 {
    padding: var(--app-density-pad-md) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.px-8, .px-7, .px-6) {
    padding-left: var(--app-density-pad-lg) !important;
    padding-right: var(--app-density-pad-lg) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.py-8, .py-7, .py-6) {
    padding-top: var(--app-density-pad-lg) !important;
    padding-bottom: var(--app-density-pad-lg) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] :is(.text-4xl, .text-5xl) {
    font-size: clamp(var(--app-text-3xl), 2.4vw, calc(var(--app-text-4xl) * 1.16)) !important;
    line-height: 1.08 !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] .text-3xl {
    font-size: clamp(var(--app-text-2xl), 2vw, var(--app-text-3xl)) !important;
    line-height: 1.12 !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company)[data-density="compact"] .text-2xl {
    font-size: clamp(var(--app-text-lg), 1.6vw, var(--app-text-2xl)) !important;
    line-height: 1.18 !important;
}

/* Shared utility flattening */
body:is(.app-view, .app-public-page, .app-auth-page, .admin-auth-body, .app-role-company) :is(.shadow-card, .shadow-card-hover, .shadow-modal, .shadow-lg, .shadow-xl, .shadow-2xl, .shadow-glow) {
    box-shadow: var(--app-shadow-soft) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .admin-auth-body, .app-role-company) :is(.hover\:shadow-card-hover:hover, .hover\:shadow-card:hover, .hover\:shadow-glow:hover) {
    box-shadow: var(--app-shadow) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .admin-auth-body, .app-role-company) :is(.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, .backdrop-blur-lg, .backdrop-blur-xl) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .admin-auth-body, .app-role-company) :is(.rounded-3xl, .rounded-\[2rem\]) {
    border-radius: var(--app-radius-xl) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .admin-auth-body, .app-role-company) :is(.rounded-2xl, .rounded-\[1\.75rem\]) {
    border-radius: var(--app-radius-lg) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .admin-auth-body, .app-role-company) .rounded-xl {
    border-radius: var(--app-radius-md) !important;
}

/* Icons */
.app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.app-icon > svg {
    width: 1rem;
    height: 1rem;
    stroke: currentColor;
}

/* Shared dashboard components */
.app-overview-panel,
.dash-card,
.app-kpi-card {
    position: relative;
    overflow: hidden;
    color: var(--app-text);
}

.app-dashboard-shell,
.app-dashboard-shell :is(.td-widget, .app-dashboard-widget) {
    min-width: 0;
}

.app-overview-panel,
.dash-card {
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface));
    box-shadow: var(--app-shadow-soft);
}

.app-overview-panel {
    display: grid;
    gap: 1.1rem;
    padding: 1.2rem;
    border-radius: var(--app-radius-lg);
    grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.9fr);
}

.app-overview-panel__intro {
    min-width: 0;
}

.app-overview-panel__eyebrow {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-overview-panel__title {
    margin: 0.3rem 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(var(--app-text-2xl), 2.2vw, var(--app-text-4xl));
    line-height: 1.06;
    font-weight: 650;
    color: var(--app-text);
}

.app-overview-panel__summary {
    margin: 0.6rem 0 0;
    max-width: 42rem;
    font-size: var(--app-text-base);
    line-height: 1.6;
    color: var(--app-muted);
}

.app-overview-panel__chips,
.app-overview-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.app-overview-panel__chips {
    margin-top: 0.95rem;
}

.app-overview-panel__actions {
    margin-top: 1rem;
}

.app-overview-metrics {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-overview-metric {
    min-width: 0;
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: calc(var(--app-radius-lg) - 0.25rem);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
    padding: 0.95rem 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.app-overview-metric__label,
.dash-section-label,
.performance-pill__label {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-overview-metric__value,
.performance-pill__value {
    margin: 0.38rem 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(var(--app-text-lg), 1.6vw, var(--app-text-2xl));
    line-height: 1.08;
    font-weight: 650;
    color: var(--app-text);
}

.app-overview-metric__meta,
.app-kpi-card__meta,
.priority-item__meta {
    margin: 0.28rem 0 0;
    font-size: var(--app-text-sm);
    line-height: 1.45;
    color: var(--app-muted);
}

.dash-card {
    border-radius: var(--app-radius-lg);
}

.dash-section-title {
    margin: 0.2rem 0 0;
    font-family: var(--app-font-display);
    font-size: var(--app-text-lg);
    line-height: 1.18;
    font-weight: 650;
    color: var(--app-text);
}

:is(.dash-badge, .app-status-pill) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--app-pill-height);
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    border-radius: var(--app-radius-full);
    border: 1px solid transparent;
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

:is(.dash-badge--teacher, .app-status-pill--teacher, .app-status-pill--info) {
    border-color: color-mix(in srgb, var(--app-primary-600) 32%, transparent);
    background: color-mix(in srgb, var(--app-primary-600) 12%, transparent);
    color: var(--app-primary-700);
}

:is(.dash-badge--active, .app-status-pill--active) {
    border-color: color-mix(in srgb, var(--app-tone-success) 34%, transparent);
    background: color-mix(in srgb, var(--app-tone-success) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-success) 78%, var(--app-text) 22%);
}

:is(.dash-badge--pending, .app-status-pill--pending) {
    border-color: color-mix(in srgb, var(--app-tone-warning) 36%, transparent);
    background: color-mix(in srgb, var(--app-tone-warning) 13%, transparent);
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%);
}

:is(.dash-badge--urgent, .app-status-pill--urgent) {
    border-color: color-mix(in srgb, var(--app-tone-danger) 38%, transparent);
    background: color-mix(in srgb, var(--app-tone-danger) 13%, transparent);
    color: color-mix(in srgb, var(--app-tone-danger) 80%, var(--app-text) 20%);
}

:is(.dash-badge--done, .app-status-pill--done) {
    border-color: color-mix(in srgb, var(--app-tone-slate) 30%, transparent);
    background: color-mix(in srgb, var(--app-tone-slate) 10%, transparent);
    color: color-mix(in srgb, var(--app-tone-slate) 76%, var(--app-text) 24%);
}

:is(.dash-badge--sky, .app-status-pill--sky) {
    border-color: color-mix(in srgb, var(--app-tone-info) 34%, transparent);
    background: color-mix(in srgb, var(--app-tone-info) 13%, transparent);
    color: color-mix(in srgb, var(--app-tone-info) 84%, var(--app-text) 16%);
}

.priority-item,
.performance-pill {
    min-width: 0;
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: calc(var(--app-radius-lg) - 0.2rem);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface) 97%);
    padding: 0.9rem 1rem;
}

.priority-item--critical {
    border-color: color-mix(in srgb, var(--app-danger) 34%, var(--app-shell-border, var(--app-border)) 66%);
    background: color-mix(in srgb, var(--app-danger) 6%, var(--app-surface) 94%);
}

.dash-progress {
    width: 100%;
    height: 0.72rem;
    overflow: hidden;
    border-radius: var(--app-radius-full);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-border) 88%);
}

.dash-progress__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-primary-500), var(--app-primary-700));
}

.dash-link {
    color: var(--app-primary);
    font-weight: 600;
    text-decoration: none;
}

.dash-link:hover {
    color: var(--app-primary-strong);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.dash-link--inline {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.28rem 0.62rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--app-primary-600) 45%, var(--app-border) 55%);
    background: color-mix(in srgb, var(--app-primary-600) 10%, var(--app-surface) 90%);
    text-decoration: none;
    font-weight: 700;
}

.dash-link--inline:hover {
    background: color-mix(in srgb, var(--app-primary-600) 16%, var(--app-surface) 84%);
    text-decoration: none;
}

.app-btn-primary,
.app-auth-submit,
.support-hub :is(.support-send-btn, .support-empty-action),
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-blue-600"][class*="text-white"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-sky-500"][class*="text-white"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-indigo-600"][class*="text-white"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-gradient-to-r"] {
    border: 1px solid var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-btn-primary:hover,
.app-auth-submit:hover,
.support-hub :is(.support-send-btn, .support-empty-action):hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-blue-600"][class*="text-white"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-sky-500"][class*="text-white"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-indigo-600"][class*="text-white"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-gradient-to-r"]:hover {
    background: var(--app-button-primary-bg-hover) !important;
    color: var(--app-button-primary-text) !important;
}

:is(.app-btn-primary, .app-auth-submit, .app-btn-soft, .app-segmented-link):disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.app-btn-success,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-emerald-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-green-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-emerald-"][class*="text-emerald-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-green-"][class*="text-green-"] {
    border: 1px solid var(--app-button-success-border) !important;
    background: var(--app-button-success-bg) !important;
    color: var(--app-button-success-text) !important;
    box-shadow: var(--app-button-success-shadow) !important;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-btn-success:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-emerald-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-green-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-emerald-"][class*="text-emerald-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-green-"][class*="text-green-"]:hover {
    background: var(--app-button-success-bg-hover) !important;
    color: var(--app-button-success-text) !important;
}

.app-btn-warning,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-amber-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-amber-"][class*="text-amber-"] {
    border: 1px solid var(--app-button-warning-border) !important;
    background: var(--app-button-warning-bg) !important;
    color: var(--app-button-warning-text) !important;
    box-shadow: var(--app-button-warning-shadow) !important;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-btn-warning:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-amber-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-amber-"][class*="text-amber-"]:hover {
    background: var(--app-button-warning-bg-hover) !important;
    color: var(--app-button-warning-text) !important;
}

.app-btn-danger,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-rose-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-red-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-rose-"][class*="text-rose-"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-red-"][class*="text-red-"] {
    border: 1px solid var(--app-button-danger-border) !important;
    background: var(--app-button-danger-bg) !important;
    color: var(--app-button-danger-text) !important;
    box-shadow: var(--app-button-danger-shadow) !important;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-btn-danger:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-rose-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="bg-red-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-rose-"][class*="text-rose-"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-red-"][class*="text-red-"]:hover {
    background: var(--app-button-danger-bg-hover) !important;
    color: var(--app-button-danger-text) !important;
}

.app-btn-soft {
    border: 1px solid var(--app-button-border) !important;
    background: var(--app-button-bg) !important;
    color: var(--app-button-text) !important;
    box-shadow: var(--app-button-shadow) !important;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-btn-soft:hover {
    border-color: var(--app-button-border-strong) !important;
    background: var(--app-button-bg-hover) !important;
    color: var(--app-button-text-strong) !important;
}

.app-btn-soft--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 38%, var(--app-border) 62%) !important;
    background: color-mix(in srgb, var(--app-tone-info) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-tone-info) 82%, var(--app-text) 18%) !important;
}

.app-btn-soft--info:hover {
    border-color: color-mix(in srgb, var(--app-tone-info) 52%, var(--app-border) 48%) !important;
    background: color-mix(in srgb, var(--app-tone-info) 16%, var(--app-surface) 84%) !important;
}

.app-btn-soft--success {
    border-color: color-mix(in srgb, var(--app-tone-success) 38%, var(--app-border) 62%) !important;
    background: color-mix(in srgb, var(--app-tone-success) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-tone-success) 80%, var(--app-text) 20%) !important;
}

.app-btn-soft--success:hover {
    border-color: color-mix(in srgb, var(--app-tone-success) 52%, var(--app-border) 48%) !important;
    background: color-mix(in srgb, var(--app-tone-success) 16%, var(--app-surface) 84%) !important;
}

.app-btn-soft--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 38%, var(--app-border) 62%) !important;
    background: color-mix(in srgb, var(--app-tone-warning) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-tone-warning) 84%, var(--app-text) 16%) !important;
}

.app-btn-soft--warning:hover {
    border-color: color-mix(in srgb, var(--app-tone-warning) 52%, var(--app-border) 48%) !important;
    background: color-mix(in srgb, var(--app-tone-warning) 16%, var(--app-surface) 84%) !important;
}

.app-btn-soft--danger {
    border-color: color-mix(in srgb, var(--app-tone-danger) 38%, var(--app-border) 62%) !important;
    background: color-mix(in srgb, var(--app-tone-danger) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-tone-danger) 80%, var(--app-text) 20%) !important;
}

.app-btn-soft--danger:hover {
    border-color: color-mix(in srgb, var(--app-tone-danger) 52%, var(--app-border) 48%) !important;
    background: color-mix(in srgb, var(--app-tone-danger) 16%, var(--app-surface) 84%) !important;
}

:is(
    .app-btn-primary,
    .app-btn-success,
    .app-btn-warning,
    .app-btn-danger,
    .app-btn-soft,
    .dash-btn,
    .dash-btn--ghost,
    .app-segmented-link,
    .app-auth-submit,
    .app-copy-btn,
    .referral-copy-btn,
    .referral-open-btn,
    .admin-shell-button,
    .admin-shell-button--primary,
    .admin-shell-button--secondary,
    .admin-shell-button--danger,
    .admin-shell-button--ghost,
    .support-hub :is(.support-send-btn, .support-empty-action, .support-chip-btn, .support-new-btn, .support-reset, .support-file-btn, .support-tab, .support-empty-secondary)
) {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm);
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-sm);
    border-radius: var(--app-radius-md);
}

:is(
    .app-segmented-link,
    .dash-btn--ghost,
    .app-copy-btn,
    .admin-shell-button--ghost,
    .support-hub :is(.support-chip-btn, .support-tab, .support-file-btn, .support-empty-secondary)
) {
    padding: var(--app-chip-padding);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-xs);
}

.app-segmented-link,
.dash-btn--ghost,
.admin-shell-button--secondary,
.support-hub :is(.support-chip-btn, .support-new-btn, .support-reset, .support-file-btn, .support-empty-secondary, .support-tab),
.app-copy-btn,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-slate-300"][class*="text-slate-700"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-slate-200"][class*="bg-white"][class*="text-slate-700"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-blue-500"][class*="text-blue-700"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-blue-500"][class*="text-blue-300"],
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-slate-600"][class*="text-slate-200"] {
    border-color: var(--app-button-border) !important;
    background: var(--app-button-bg) !important;
    color: var(--app-button-text) !important;
    box-shadow: var(--app-button-shadow);
}

.app-segmented-link:hover,
.dash-btn--ghost:hover,
.admin-shell-button--secondary:hover,
.support-hub :is(.support-chip-btn, .support-new-btn, .support-reset, .support-file-btn, .support-empty-secondary, .support-tab):hover,
.app-copy-btn:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-slate-300"][class*="text-slate-700"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-slate-200"][class*="bg-white"][class*="text-slate-700"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-blue-500"][class*="text-blue-700"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-blue-500"][class*="text-blue-300"]:hover,
:is(a, button, input[type="submit"], input[type="button"])[class*="rounded"][class*="border-slate-600"][class*="text-slate-200"]:hover {
    border-color: var(--app-button-border-strong) !important;
    background: var(--app-button-bg-hover) !important;
    color: var(--app-button-text-strong) !important;
}

.app-segmented-link--active,
.support-hub .support-tab.is-active,
body.app-role-teacher[data-view^="teacher/"] .period-btn--active,
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-filter-btn.is-active,
body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.border-emerald-500,
.app-shell-sidebar .app-nav-link.is-active-nav,
.admin-shell-nav-link--active {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg) !important;
    color: var(--app-button-active-text) !important;
    box-shadow: var(--app-button-active-shadow) !important;
}

.app-segmented-link--active:hover,
.support-hub .support-tab.is-active:hover,
body.app-role-teacher[data-view^="teacher/"] .period-btn--active:hover,
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-filter-btn.is-active:hover,
body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.border-emerald-500:hover,
.app-shell-sidebar .app-nav-link.is-active-nav:hover,
.admin-shell-nav-link--active:hover {
    color: var(--app-button-active-text) !important;
}

.app-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.3rem 0.72rem;
    border-radius: 9999px;
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast);
}

.app-copy-btn:disabled {
    opacity: 0.78;
    cursor: default;
}

html.dark .dash-link--inline {
    border-color: color-mix(in srgb, var(--app-primary-400) 54%, rgba(148, 163, 184, 0.34) 46%);
    background: color-mix(in srgb, var(--app-primary-500) 24%, rgba(15, 23, 42, 0.92) 76%);
    color: #dbeafe;
}

html.dark .dash-link--inline:hover {
    background: color-mix(in srgb, var(--app-primary-500) 30%, rgba(15, 23, 42, 0.9) 70%);
}

/* Utility tone bridge: unify legacy tailwind colors across admin/student/web pages */
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(input, select, textarea)[class*="focus:border-sky-"]:focus,
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(input, select, textarea)[class*="focus:border-blue-"]:focus,
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(input, select, textarea)[class*="focus:border-sky-"]:focus-visible,
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(input, select, textarea)[class*="focus:border-blue-"]:focus-visible {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 0 0 3px var(--app-ring) !important;
    outline: none !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(input[type="checkbox"], input[type="radio"])[class*="text-sky-"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(input[type="checkbox"], input[type="radio"])[class*="text-blue-"] {
    accent-color: var(--app-shell-accent, var(--app-primary)) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(
    .text-blue-500,
    .text-blue-700,
    .text-blue-600,
    .text-sky-500,
    .text-sky-700,
    .text-sky-600,
    .text-indigo-500,
    .text-indigo-700,
    .text-indigo-600
) {
    color: color-mix(in srgb, var(--app-primary-700) 82%, var(--app-text) 18%) !important;
}

html.dark body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(
    .text-blue-400,
    .text-blue-300,
    .text-blue-200,
    .text-blue-100,
    .text-sky-400,
    .text-sky-300,
    .text-sky-200,
    .text-indigo-400,
    .text-indigo-300,
    .text-indigo-200
),
html[data-theme="dark"] body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(
    .text-blue-400,
    .text-blue-300,
    .text-blue-200,
    .text-blue-100,
    .text-sky-400,
    .text-sky-300,
    .text-sky-200,
    .text-indigo-400,
    .text-indigo-300,
    .text-indigo-200
) {
    color: color-mix(in srgb, var(--app-primary-200) 80%, #ffffff 20%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(.text-emerald-400, .text-emerald-300, .text-emerald-200) {
    color: color-mix(in srgb, var(--app-tone-success) 80%, var(--app-text) 20%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(.text-amber-800, .text-amber-700, .text-amber-300, .text-amber-200) {
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(.text-rose-400, .text-rose-300, .text-rose-200, .text-rose-100) {
    color: color-mix(in srgb, var(--app-tone-danger) 80%, var(--app-text) 20%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-blue-"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-sky-"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-indigo-"] {
    border-color: color-mix(in srgb, var(--app-tone-info) 38%, var(--app-border) 62%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-blue-50"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-sky-50"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-indigo-50"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-blue-500/10"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-sky-500/10"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-indigo-500/10"] {
    background: color-mix(in srgb, var(--app-tone-info) 10%, var(--app-surface) 90%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-emerald-"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-green-"] {
    border-color: color-mix(in srgb, var(--app-tone-success) 38%, var(--app-border) 62%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-emerald-500/10"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-emerald-500/20"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-emerald-50"] {
    background: color-mix(in srgb, var(--app-tone-success) 10%, var(--app-surface) 90%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-amber-"] {
    border-color: color-mix(in srgb, var(--app-tone-warning) 38%, var(--app-border) 62%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-amber-50"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-amber-500/10"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-amber-900/"] {
    background: color-mix(in srgb, var(--app-tone-warning) 10%, var(--app-surface) 90%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-rose-"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="border-red-"] {
    border-color: color-mix(in srgb, var(--app-tone-danger) 38%, var(--app-border) 62%) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-rose-500/10"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-rose-900/"],
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-web[data-view^="web/"]) :is(span, div, p, article, section, li, td, th, small, strong, em)[class*="bg-red-900/"] {
    background: color-mix(in srgb, var(--app-tone-danger) 10%, var(--app-surface) 90%) !important;
}

body.app-checkout-page .checkout-alert {
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    color: var(--app-text-secondary);
}

body.app-checkout-page .checkout-alert.checkout-alert--danger {
    border-color: color-mix(in srgb, var(--app-tone-danger) 36%, var(--app-border) 64%);
    background: color-mix(in srgb, var(--app-tone-danger) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-tone-danger) 78%, var(--app-text) 22%);
}

body.app-checkout-page .checkout-alert.checkout-alert--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 36%, var(--app-border) 64%);
    background: color-mix(in srgb, var(--app-tone-warning) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-tone-warning) 84%, var(--app-text) 16%);
}

body.app-checkout-page .checkout-alert.checkout-alert--success {
    border-color: color-mix(in srgb, var(--app-tone-success) 36%, var(--app-border) 64%);
    background: color-mix(in srgb, var(--app-tone-success) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-tone-success) 78%, var(--app-text) 22%);
}

.dash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--app-control-height-md);
    padding: var(--app-control-padding-md);
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    font-size: var(--app-text-sm);
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--app-button-primary-shadow);
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), color var(--app-transition-fast), background var(--app-transition-fast);
}

.dash-btn:hover {
    transform: translateY(-1px);
    background: var(--app-button-primary-bg-hover);
    color: var(--app-button-primary-text);
}

.dash-btn--ghost {
    box-shadow: none;
}

.details-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--app-muted);
    transition: transform var(--app-transition-fast);
}

details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] > summary .details-chevron {
    transform: rotate(180deg);
}

.app-kpi-card {
    --app-kpi-accent: var(--app-primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    border-color: color-mix(in srgb, var(--app-kpi-accent) 22%, var(--app-shell-border, var(--app-border)) 78%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-kpi-accent) 5%, var(--app-surface-strong) 95%), var(--app-surface));
    box-shadow: var(--app-shadow-soft);
}

.app-kpi-card::before {
    content: "";
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: var(--app-radius-full);
    background: color-mix(in srgb, var(--app-kpi-accent) 72%, transparent);
    box-shadow: 0 0 0 0.34rem color-mix(in srgb, var(--app-kpi-accent) 12%, transparent);
}

.app-kpi-card__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
    min-width: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-kpi-card__head > span:last-child {
    min-width: 0;
}

.app-kpi-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--app-kpi-accent) 14%, var(--app-surface) 86%);
    color: var(--app-kpi-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.app-kpi-card__icon > svg {
    width: 1.35rem;
    height: 1.35rem;
    stroke: currentColor;
}

.app-kpi-card__value {
    margin: 0.7rem 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(var(--app-text-2xl), 2vw, var(--app-text-4xl));
    line-height: 1.08;
    font-weight: 650;
    color: var(--app-text);
    text-wrap: balance;
}

.app-kpi-card--slate { --app-kpi-accent: var(--app-tone-slate); }
.app-kpi-card--blue { --app-kpi-accent: var(--app-primary-600); }
.app-kpi-card--sky { --app-kpi-accent: var(--app-tone-info); }
.app-kpi-card--indigo { --app-kpi-accent: var(--app-primary-700); }
.app-kpi-card--amber { --app-kpi-accent: var(--app-tone-warning); }
.app-kpi-card--rose { --app-kpi-accent: var(--app-tone-danger); }
.app-kpi-card--emerald { --app-kpi-accent: var(--app-tone-success); }

.dash-skeleton {
    border-radius: var(--app-radius-sm);
    background: linear-gradient(90deg, var(--app-gray-100) 25%, var(--app-gray-200) 50%, var(--app-gray-100) 75%);
    background-size: 200% 100%;
    animation: appShimmer 1.5s linear infinite;
}

.td-widget.is-priority-top .dash-card,
.td-widget.is-priority-top.app-overview-panel {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
}

.app-page-hero,
.app-page-section-card,
.app-page-subcard,
.app-page-list-item,
.app-alert-card {
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface));
    box-shadow: var(--app-shadow-soft);
    color: var(--app-text);
}

.app-page-hero,
.app-page-section-card {
    border-radius: var(--app-radius-xl);
}

.app-page-subcard,
.app-page-list-item,
.app-alert-card {
    border-radius: var(--app-radius-lg);
}

.app-page-hero {
    padding: var(--app-card-padding);
}

.app-page-hero__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--app-space-4);
}

.app-page-hero__intro {
    min-width: 0;
}

.app-page-hero__eyebrow {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-page-hero__title {
    margin: var(--app-space-2) 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(var(--app-text-xl), 1.8vw, var(--app-text-2xl));
    line-height: 1.14;
    font-weight: 650;
    color: var(--app-text);
}

.app-page-hero__summary {
    margin: var(--app-space-2) 0 0;
    max-width: 44rem;
    font-size: var(--app-text-sm);
    line-height: 1.55;
    color: var(--app-muted);
}

.app-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.app-page-subgrid {
    display: grid;
    gap: 1rem;
}

.app-page-subcard {
    padding: 1rem;
}

.app-page-list-item {
    padding: 0.9rem 1rem;
}

.app-alert-card {
    padding: 0.9rem 1rem;
}

.app-alert-card--active {
    border-color: color-mix(in srgb, var(--app-tone-success) 34%, var(--app-shell-border, var(--app-border)) 66%);
    background: color-mix(in srgb, var(--app-tone-success) 8%, var(--app-surface) 92%);
}

.app-alert-card--pending {
    border-color: color-mix(in srgb, var(--app-tone-warning) 34%, var(--app-shell-border, var(--app-border)) 66%);
    background: color-mix(in srgb, var(--app-tone-warning) 8%, var(--app-surface) 92%);
}

.app-alert-card--urgent {
    border-color: color-mix(in srgb, var(--app-tone-danger) 34%, var(--app-shell-border, var(--app-border)) 66%);
    background: color-mix(in srgb, var(--app-tone-danger) 8%, var(--app-surface) 92%);
}

.app-alert-card--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 34%, var(--app-shell-border, var(--app-border)) 66%);
    background: color-mix(in srgb, var(--app-tone-info) 8%, var(--app-surface) 92%);
}

.app-metric-bar {
    background: color-mix(in srgb, var(--app-primary) 72%, transparent);
}

/* Student content pages */
.student-content-main {
    max-width: 72rem;
    padding-top: 1.2rem !important;
    padding-bottom: 1.4rem !important;
}

.student-content-main > :not(script) + :not(script) {
    margin-top: 1.05rem !important;
}

.student-content-main > section:first-child,
.student-content-main .app-page-hero {
    border-radius: 1.35rem !important;
    padding: 1rem !important;
}

.student-content-main .app-page-hero__header,
.student-content-main > section:first-child > div:first-child {
    gap: 0.85rem !important;
}

.student-content-main .app-page-hero__title,
.student-content-main :is(h1.text-xl, h2.text-lg) {
    font-size: clamp(var(--app-text-lg), 1.5vw, var(--app-text-2xl)) !important;
    line-height: 1.12 !important;
}

.student-content-main .app-page-hero__summary,
.student-content-main > section:first-child p.text-sm {
    font-size: var(--app-text-sm) !important;
    line-height: 1.5 !important;
}

.student-content-main .app-page-subgrid {
    gap: var(--app-stack-gap);
}

.student-content-main .app-page-subcard,
.student-content-main .app-page-section-card,
.student-content-main .app-page-list-item,
.student-content-main .app-alert-card {
    border-radius: 1.2rem !important;
}

.student-content-main .app-page-subcard,
.student-content-main .app-page-section-card {
    padding: var(--app-card-padding-sm) !important;
}

.student-content-main .app-page-list-item,
.student-content-main .app-alert-card {
    padding: var(--app-card-padding-xs) var(--app-card-padding-sm) !important;
}

.student-content-main .app-kpi-card {
    border-radius: 1.2rem !important;
    padding: var(--app-card-padding-sm) !important;
}

.student-content-main .app-kpi-card::before {
    top: 0.8rem;
    right: 0.85rem;
    width: 0.48rem;
    height: 0.48rem;
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--app-kpi-accent) 11%, transparent);
}

.student-content-main .app-kpi-card__head {
    gap: 0.68rem;
    font-size: var(--app-text-xs);
    letter-spacing: 0.09em;
}

.student-content-main .app-kpi-card__icon {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.9rem;
}

.student-content-main .app-kpi-card__icon > svg {
    width: 1.16rem;
    height: 1.16rem;
}

.student-content-main .app-kpi-card__value,
.student-content-main .text-2xl {
    font-size: clamp(var(--app-text-lg), 1.45vw, var(--app-text-2xl)) !important;
    line-height: 1.08 !important;
}

.student-content-main .app-kpi-card__meta {
    margin-top: 0.24rem;
    font-size: var(--app-text-xs);
}

.student-content-main :is(.dash-btn, .app-btn-primary, .app-segmented-link) {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-sm) !important;
}

.student-content-main :is(a, button)[class*="rounded-lg"][class*="px-3"][class*="py-2"] {
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-sm) !important;
}

.student-content-main :is(section, article)[class*="rounded-3xl"][class*="p-5"],
.student-content-main :is(section, article)[class*="rounded-2xl"][class*="p-5"] {
    padding: 1rem !important;
}

.student-content-main :is(section, article, li, div)[class*="rounded-2xl"][class*="p-4"] {
    padding: 0.9rem !important;
}

body[data-view="student/meetings"] .student-content-main [data-student-meetings-section] [data-student-meetings-item] {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface-strong) 97%),
        var(--app-surface)
    ) !important;
    box-shadow: 0 10px 18px -18px rgba(15, 23, 42, 0.24);
}

body[data-view="student/meetings"] .student-content-main [data-student-meeting-course] {
    color: #475569 !important;
    font-weight: 500;
}

body[data-view="student/meetings"] .student-content-main [data-student-meeting-title] {
    color: #0f172a !important;
}

body[data-view="student/meetings"] .student-content-main [data-student-meeting-meta] {
    color: #334155 !important;
}

body[data-view="student/meetings"] .student-content-main [data-student-meeting-action] {
    border-color: color-mix(in srgb, var(--app-primary-600) 52%, transparent) !important;
    background: color-mix(in srgb, var(--app-primary-600) 8%, var(--app-surface) 92%);
    color: #1e40af !important;
    font-weight: 700;
}

body[data-view="student/meetings"] .student-content-main [data-student-meeting-action]:hover {
    background: color-mix(in srgb, var(--app-primary-600) 14%, var(--app-surface) 86%) !important;
    color: #1e3a8a !important;
}

body[data-view="student/meetings"] .student-content-main [data-student-meeting-link] {
    color: #1d4ed8 !important;
    font-weight: 600;
}

html.dark body[data-view="student/meetings"] .student-content-main [data-student-meetings-section] [data-student-meetings-item] {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.9)) !important;
    box-shadow: 0 12px 24px -22px rgba(2, 6, 23, 0.8);
}

html.dark body[data-view="student/meetings"] .student-content-main [data-student-meeting-course] {
    color: #94a3b8 !important;
}

html.dark body[data-view="student/meetings"] .student-content-main [data-student-meeting-title] {
    color: #f8fafc !important;
}

html.dark body[data-view="student/meetings"] .student-content-main [data-student-meeting-meta] {
    color: #cbd5e1 !important;
}

html.dark body[data-view="student/meetings"] .student-content-main [data-student-meeting-action] {
    color: #bfdbfe !important;
}

html.dark body[data-view="student/meetings"] .student-content-main [data-student-meeting-link] {
    color: #93c5fd !important;
}

body[data-view="student/favorites"] .student-content-main .aspect-video {
    aspect-ratio: 16 / 8.8;
}

/* Utility-based card and pill normalization across app pages */
body.app-view main :is(section, article, aside, div, li)[class*="rounded-3xl"][class*="border"][class*="bg-white"],
body.app-view main :is(section, article, aside, div, li)[class*="rounded-2xl"][class*="border"][class*="bg-white"] {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface)) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

body.app-view main :is(section, article, aside, div, li)[class*="rounded-2xl"][class*="border"][class*="bg-slate-50"],
body.app-view main :is(section, article, aside, div, li)[class*="rounded-xl"][class*="border"][class*="bg-slate-50"] {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface) 97%) !important;
}

body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-slate-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-slate-"] {
    border-color: color-mix(in srgb, var(--app-tone-slate) 28%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-slate) 10%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-slate) 76%, var(--app-text) 24%) !important;
}

body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-blue-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-blue-"],
body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-sky-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-sky-"],
body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-indigo-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-indigo-"] {
    border-color: color-mix(in srgb, var(--app-tone-info) 32%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-info) 12%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-info) 84%, var(--app-text) 16%) !important;
}

body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-emerald-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-emerald-"] {
    border-color: color-mix(in srgb, var(--app-tone-success) 34%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-success) 12%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-success) 78%, var(--app-text) 22%) !important;
}

body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-amber-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-amber-"] {
    border-color: color-mix(in srgb, var(--app-tone-warning) 34%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-warning) 12%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%) !important;
}

body.app-view main :is(span)[class*="rounded-full"][class*="border"][class*="bg-rose-"],
body.app-view main :is(span)[class*="rounded-lg"][class*="border"][class*="bg-rose-"] {
    border-color: color-mix(in srgb, var(--app-tone-danger) 36%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-danger) 12%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-danger) 80%, var(--app-text) 20%) !important;
}

.teacher-mobile-cta {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 35;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: var(--app-radius-full);
    border: 1px solid color-mix(in srgb, var(--app-primary) 48%, transparent);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    color: #ffffff;
    box-shadow: var(--app-shadow-md);
    text-decoration: none;
    font-weight: 700;
}

/* Teacher dashboard refresh */
body.app-role-teacher[data-view^="teacher/"] {
    --teacher-page-surface: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface-strong) 97%),
        var(--app-surface)
    );
    --teacher-page-soft-surface: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
    --teacher-page-soft-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%);
}

html.dark body.app-role-teacher[data-view^="teacher/"] {
    --teacher-page-surface: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
    --teacher-page-soft-surface: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, rgba(15, 23, 42, 0.9) 90%);
    --teacher-page-soft-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, rgba(148, 163, 184, 0.34) 70%);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) {
    width: min(100%, 96rem);
    padding-top: 1rem !important;
    padding-bottom: 1.4rem !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) > :not(script) + :not(script) {
    margin-top: 1rem !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article, aside, details, div)[class*="rounded-2xl"][class*="border"]:not([class*="bg-rose"]):not([class*="bg-amber"]):not([class*="bg-emerald"]):not([class*="bg-blue"]):not([class*="bg-sky"]):not([class*="bg-cyan"]) {
    border-color: var(--teacher-page-soft-border) !important;
    background: var(--teacher-page-surface) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article, aside, details, div)[class*="rounded-xl"][class*="border"][class*="bg-slate-50"] {
    border-color: var(--teacher-page-soft-border) !important;
    background: var(--teacher-page-soft-surface) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article, aside, details, div)[class*="rounded-"][class*="border"][class*="bg-slate-900"] {
    border-color: var(--teacher-page-soft-border) !important;
    background: var(--teacher-page-surface) !important;
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article, aside, details, div, li)[class*="bg-slate-900"],
html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article, aside, details, div, li)[class*="bg-slate-950"] {
    border-color: var(--teacher-page-soft-border) !important;
    background: var(--teacher-page-surface) !important;
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is([class*="border-slate-7"], [class*="border-slate-8"], [class*="border-slate-9"]) {
    border-color: var(--teacher-page-soft-border) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(.text-slate-50, .text-slate-100, .text-slate-200) {
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
.text-slate-300 {
    color: var(--app-text-secondary) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(.text-slate-400, .text-slate-500) {
    color: var(--app-muted) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(input, select, textarea)[class*="bg-slate-900"],
html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(input, select, textarea)[class*="bg-slate-950"],
html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(input, select, textarea)[class*="bg-slate-800"] {
    border-color: var(--teacher-page-soft-border) !important;
    background: var(--teacher-page-soft-surface) !important;
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(thead, tr, th, td)[class*="border-slate"] {
    border-color: var(--teacher-page-soft-border) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) :is(table, thead, tbody, tr, th, td) {
    border-color: var(--teacher-page-soft-border) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) :is(th, td) {
    color: inherit;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea) {
    border-color: var(--teacher-page-soft-border) !important;
    background: var(--teacher-page-soft-surface) !important;
    color: var(--app-text) !important;
    box-shadow: none !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), select, textarea):focus {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent) !important;
    outline: none !important;
}

.teacher-hub-main,
.teacher-workflow-main,
.teacher-courses-main {
    position: relative;
    z-index: 1;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
> :is(section, details):first-child:not(.filter-bar) {
    position: relative;
    overflow: hidden;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
> :is(section, details):first-child:not(.filter-bar)::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, transparent),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, transparent)
    );
    opacity: 0.88;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(h1, h2, h3)[class*="text-slate-100"],
body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(h1, h2, h3)[class*="text-slate-200"] {
    color: var(--app-text) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) details {
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) details[open] {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 12px 24px -22px rgba(15, 23, 42, 0.24);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .overflow-x-auto {
    border-radius: var(--app-radius-md);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) table thead th {
    position: relative;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%);
    color: var(--app-muted);
    font-size: var(--app-text-2xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) table tbody tr {
    transition: background var(--app-transition-fast);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) table tbody tr:hover {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%);
}

body.app-role-teacher[data-view^="teacher/"] .filter-bar {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: var(--app-radius-lg);
    background: var(--teacher-page-soft-surface, var(--app-panel-surface, var(--app-surface)));
    box-shadow: var(--app-shadow-soft);
}

html.dark body.app-role-teacher[data-view^="teacher/"] .filter-bar {
    box-shadow: 0 12px 24px -22px rgba(2, 6, 23, 0.84);
}

body.app-role-teacher[data-view^="teacher/"] .period-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--app-radius-full);
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-soft-surface, var(--app-surface));
    color: var(--app-text-secondary);
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), transform var(--app-transition-fast);
}

body.app-role-teacher[data-view^="teacher/"] .period-btn:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    color: var(--app-text);
    transform: translateY(-1px);
}

body.app-role-teacher[data-view^="teacher/"] .period-btn--active {
}

body.app-role-teacher[data-view^="teacher/"] .period-btn--inactive {
    background: var(--teacher-page-soft-surface, var(--app-surface));
    color: var(--app-text-secondary);
}

body.app-role-teacher[data-view^="teacher/"] .teacher-period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-soft-surface, var(--app-surface));
}

body.app-role-teacher[data-view^="teacher/"] .teacher-period-tabs .period-btn {
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-color: transparent;
    background: transparent;
}

body.app-role-teacher[data-view^="teacher/"] .teacher-period-tabs .period-btn--active {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 32%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--teacher-page-soft-surface, var(--app-surface)) 82%);
    color: var(--app-text);
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.32);
}

body.app-role-teacher[data-view^="teacher/"] .teacher-period-tabs .period-btn--inactive {
    color: var(--app-text-secondary);
}

body.app-role-teacher[data-view^="teacher/"] .teacher-period-label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--teacher-page-soft-surface, var(--app-surface)) 92%);
    color: var(--app-text-secondary);
    font-weight: 600;
}

body.app-role-teacher[data-view^="teacher/"] [data-filter-panel][hidden] {
    display: none !important;
}

body.app-role-teacher[data-view^="teacher/"] .period-filter-toggle {
    min-height: 2.1rem;
}

body.app-role-teacher[data-view^="teacher/"] .period-filter-toggle.period-filter-toggle--active {
    border-color: var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
}

body.app-role-teacher[data-view^="teacher/"] .period-custom-fields {
    display: none;
}

body.app-role-teacher[data-view^="teacher/"] form[data-period-custom="true"] .period-custom-fields,
body.app-role-teacher[data-view^="teacher/"] .period-custom-fields.is-visible {
    display: grid;
    margin-top: 0.75rem !important;
}

/* Teacher pages: align content rhythm with student dashboard */
body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) > :not(script) + :not(script) {
    margin-top: 1.02rem !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
> :is(section, article):first-child:not(.filter-bar) {
    border-radius: 1.28rem !important;
    padding: 1rem !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
> :is(section, article):first-child:not(.filter-bar)
:is(h1, h2) {
    font-size: clamp(var(--app-text-lg), 1.58vw, var(--app-text-2xl)) !important;
    line-height: 1.14 !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
> :is(section, article):first-child:not(.filter-bar)
p.text-sm {
    font-size: var(--app-text-sm) !important;
    line-height: 1.52 !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .app-kpi-card {
    border-radius: 1.14rem !important;
    padding: 0.92rem !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .app-kpi-card::before {
    top: 0.8rem;
    right: 0.85rem;
    width: 0.48rem;
    height: 0.48rem;
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--app-kpi-accent) 11%, transparent);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .app-kpi-card__head {
    gap: 0.68rem;
    font-size: var(--app-text-xs);
    letter-spacing: 0.09em;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .app-kpi-card__icon {
    width: 2.42rem;
    height: 2.42rem;
    border-radius: 0.88rem;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .app-kpi-card__icon > svg {
    width: 1.14rem;
    height: 1.14rem;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(.app-kpi-card__value, .text-2xl) {
    font-size: clamp(var(--app-text-lg), 1.44vw, var(--app-text-2xl)) !important;
    line-height: 1.08 !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .app-kpi-card__meta {
    margin-top: 0.24rem;
    font-size: var(--app-text-xs);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(.dash-btn, .app-btn-primary, .app-segmented-link) {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-sm) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(a, button)[class*="rounded-lg"][class*="px-3"][class*="py-2"] {
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-sm) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article)[class*="rounded-3xl"][class*="p-5"],
body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article)[class*="rounded-2xl"][class*="p-5"] {
    padding: var(--app-card-padding-sm) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell)
:is(section, article, li, div)[class*="rounded-2xl"][class*="p-4"] {
    padding: var(--app-card-padding-xs) !important;
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) form :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--app-control-height-sm);
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) .overflow-x-auto {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: var(--app-radius-lg);
    background: var(--teacher-page-soft-surface, var(--app-surface));
}

body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) details > summary {
    min-height: 2.1rem;
}

.teacher-stats-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: var(--app-radius-xl);
    background: var(--teacher-page-surface, var(--app-panel-surface, var(--app-surface)));
    box-shadow: var(--app-shadow-soft);
}

.teacher-stats-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: min(44vw, 28rem);
    height: 9rem;
    border-radius: 0 0 0 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent), transparent 72%);
    pointer-events: none;
}

.teacher-stats-kicker {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.teacher-stats-callout {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: calc(var(--app-radius-lg) - 0.08rem);
    background: var(--teacher-page-soft-surface, var(--app-surface));
    padding: 0.95rem 1rem;
}

.teacher-stats-delta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--app-radius-full);
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
}

.teacher-stats-delta:hover {
    color: inherit;
    text-decoration: none;
}

.teacher-stats-progress {
    width: 100%;
    height: 0.62rem;
    overflow: hidden;
    border-radius: var(--app-radius-full);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-border) 86%);
}

.teacher-stats-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.teacher-stats-empty {
    border: 1px dashed var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: calc(var(--app-radius-lg) - 0.12rem);
    background: var(--teacher-page-soft-surface, var(--app-surface));
    padding: 0.8rem 0.9rem;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.teacher-stats-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.teacher-stats-signal {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: calc(var(--app-radius-lg) - 0.12rem);
    background: var(--teacher-page-soft-surface, var(--app-surface));
    padding: 0.78rem 0.84rem;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast), background var(--app-transition-fast);
}

.teacher-stats-signal:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    transform: translateY(-1px);
    color: inherit;
    text-decoration: none;
}

.teacher-stats-signal__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    flex-shrink: 0;
    border-radius: 0.9rem;
}

.teacher-stats-signal__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.teacher-stats-stack {
    display: grid;
    gap: 0.8rem;
}

.teacher-stats-chart-grid line {
    stroke: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, var(--app-border) 78%);
    stroke-width: 1;
}

.teacher-stats-chart-grid text {
    fill: var(--app-muted);
}

.teacher-stats-chart-point {
    cursor: pointer;
    transition: transform var(--app-transition-fast), opacity var(--app-transition-fast);
}

.teacher-stats-chart-point:hover,
.teacher-stats-chart-point[data-active="true"] {
    transform: scale(1.08);
}

.teacher-stats-ring {
    position: relative;
    width: 8.2rem;
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    display: grid;
    place-items: center;
    padding: 0.75rem;
}

.teacher-stats-ring::before {
    content: "";
    position: absolute;
    inset: 0.78rem;
    border-radius: inherit;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-surface, var(--app-surface));
}

.teacher-stats-ring__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.teacher-stats-timeline {
    position: relative;
}

.teacher-stats-timeline::before {
    content: "";
    position: absolute;
    left: 0.52rem;
    top: 0.25rem;
    bottom: 0.2rem;
    width: 1px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, var(--app-border) 78%);
}

.teacher-stats-timeline__item {
    position: relative;
    padding-left: 1.45rem;
}

.teacher-stats-timeline__item::before {
    content: "";
    position: absolute;
    left: 0.22rem;
    top: 0.78rem;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 46%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent);
}

.teacher-courses-main {
    max-width: 96rem;
}

.teacher-courses-control {
    min-height: 2.65rem;
}

.teacher-courses-modal {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.teacher-courses-modal__panel {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    color: var(--app-text) !important;
}

.course-create-upload-panel {
    position: relative;
}

.course-create-upload-panel::before {
    content: "";
    position: absolute;
    inset: 0.55rem;
    border-radius: calc(var(--app-radius-lg) - 0.25rem);
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, transparent);
    opacity: 0.34;
    pointer-events: none;
}

.course-create-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-height: 1.55rem;
    margin: 0;
    padding: 0.16rem 0.58rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--app-text-xs);
    font-weight: 600;
    line-height: 1.35;
}

.course-create-hint--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 34%, transparent);
    background: color-mix(in srgb, var(--app-tone-info) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-info) 84%, var(--app-text) 16%);
}

.course-create-hint--success {
    border-color: color-mix(in srgb, var(--app-tone-success) 34%, transparent);
    background: color-mix(in srgb, var(--app-tone-success) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-success) 82%, var(--app-text) 18%);
}

.course-create-hint--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 36%, transparent);
    background: color-mix(in srgb, var(--app-tone-warning) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-warning) 84%, var(--app-text) 16%);
}

.course-create-hint--error {
    border-color: color-mix(in srgb, var(--app-tone-danger) 38%, transparent);
    background: color-mix(in srgb, var(--app-tone-danger) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-danger) 82%, var(--app-text) 18%);
}

:is(input, textarea, select).course-create-field--error {
    border-color: color-mix(in srgb, var(--app-tone-danger) 54%, transparent) !important;
}

:is(input, textarea, select).course-create-field--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 54%, transparent) !important;
}

:is(input, textarea, select).course-create-field--success {
    border-color: color-mix(in srgb, var(--app-tone-success) 52%, transparent) !important;
}

.course-create-local-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.25rem 0.62rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: var(--app-text-xs);
    font-weight: 600;
}

.course-create-local-status--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 34%, transparent);
    background: color-mix(in srgb, var(--app-tone-info) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-info) 84%, var(--app-text) 16%);
}

.course-create-local-status--success {
    border-color: color-mix(in srgb, var(--app-tone-success) 34%, transparent);
    background: color-mix(in srgb, var(--app-tone-success) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-success) 82%, var(--app-text) 18%);
}

.course-create-local-status--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 36%, transparent);
    background: color-mix(in srgb, var(--app-tone-warning) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-warning) 84%, var(--app-text) 16%);
}

.course-create-local-status--error {
    border-color: color-mix(in srgb, var(--app-tone-danger) 38%, transparent);
    background: color-mix(in srgb, var(--app-tone-danger) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-danger) 82%, var(--app-text) 18%);
}

/* Teacher page-level polish */
body[data-view="teacher/statistics"] .teacher-hub-main {
    width: min(100%, 104rem);
}

body[data-view="teacher/statistics"] .teacher-stats-panel {
    border-radius: 1.22rem !important;
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card {
    border-radius: 1rem !important;
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast);
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    transform: translateY(-1px);
}

body[data-view="teacher/statistics"] [data-chart-trigger][data-active="true"] {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, transparent) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 84%, var(--app-text) 16%) !important;
}

body[data-view="teacher/statistics"] [data-teacher-stats-chart] svg {
    max-height: 19rem;
}

body[data-view="teacher/statistics"] {
    --teacher-stats-panel-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 92%, var(--app-shell-accent, var(--app-primary)) 8%),
        var(--teacher-page-soft-surface, var(--app-surface))
    );
    --teacher-stats-card-bg: color-mix(
        in srgb,
        var(--teacher-page-soft-surface, var(--app-surface)) 88%,
        var(--app-shell-accent, var(--app-primary)) 12%
    );
    --teacher-stats-panel-shadow: 0 18px 32px -28px rgba(15, 23, 42, 0.4);
}

html.dark body[data-view="teacher/statistics"] {
    --teacher-stats-panel-bg: linear-gradient(180deg, rgba(18, 27, 46, 0.96), rgba(9, 16, 30, 0.96));
    --teacher-stats-card-bg: color-mix(in srgb, rgba(15, 23, 42, 0.92) 86%, rgba(59, 130, 246, 0.2) 14%);
    --teacher-stats-panel-shadow: 0 20px 36px -30px rgba(2, 6, 23, 0.86);
}

body[data-view="teacher/statistics"] .teacher-stats-hero {
    background: var(--teacher-stats-panel-bg) !important;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    box-shadow: var(--teacher-stats-panel-shadow);
}

body[data-view="teacher/statistics"] .teacher-stats-hero::before {
    opacity: 0.85;
}

body[data-view="teacher/statistics"] .teacher-stats-panel {
    background: var(--teacher-stats-panel-bg) !important;
    box-shadow: var(--teacher-stats-panel-shadow) !important;
}

body[data-view="teacher/statistics"] :is(.teacher-stats-mini-card, .teacher-stats-soft-card, .teacher-stats-list-card) {
    background: var(--teacher-stats-card-bg) !important;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    box-shadow: none !important;
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card {
    position: relative;
    overflow: hidden;
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.35rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 55%, transparent),
        transparent
    );
    opacity: 0.35;
    pointer-events: none;
}

body[data-view="teacher/statistics"] .teacher-stats-callout {
    background: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 90%, var(--app-shell-accent, var(--app-primary)) 10%) !important;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
}

body[data-view="teacher/statistics"] .teacher-stats-progress {
    height: 0.55rem;
}

body[data-view="teacher/statistics"] .teacher-stats-ring {
    background: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 86%, transparent);
}

body[data-view="teacher/statistics"] .teacher-stats-signal {
    background: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 92%, transparent);
}

body[data-view="teacher/statistics"] .teacher-stats-signal__icon {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 20%, transparent);
}

body[data-view="teacher/statistics"] .teacher-stats-row {
    align-items: center;
}

body[data-view="teacher/statistics"] .teacher-stats-timeline::before {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, var(--app-border) 72%);
}

body[data-view="teacher/courses"] {
    --teacher-courses-accent: var(--app-shell-accent, var(--app-primary));
    --teacher-courses-border: color-mix(in srgb, var(--teacher-courses-accent) 14%, var(--app-border) 86%);
    --teacher-courses-border-strong: color-mix(in srgb, var(--teacher-courses-accent) 28%, var(--app-border-strong) 72%);
    --teacher-courses-surface: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 94%, #ffffff 6%);
    --teacher-courses-surface-soft: linear-gradient(
        135deg,
        color-mix(in srgb, var(--teacher-courses-accent) 9%, var(--teacher-courses-surface) 91%),
        var(--teacher-courses-surface)
    );
    --teacher-courses-shadow: 0 18px 44px -30px rgba(37, 99, 235, 0.28);
    --teacher-courses-btn-primary-start: color-mix(in srgb, var(--teacher-courses-accent) 84%, #3b82f6 16%);
    --teacher-courses-btn-primary-end: color-mix(in srgb, var(--teacher-courses-accent) 68%, #1d4ed8 32%);
    --teacher-courses-btn-primary-border: color-mix(in srgb, var(--teacher-courses-accent) 56%, #1e3a8a 44%);
    --teacher-courses-btn-primary-shadow: 0 16px 30px -22px color-mix(in srgb, var(--teacher-courses-accent) 74%, transparent);
    --teacher-courses-btn-secondary-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--teacher-courses-accent) 10%, #ffffff 90%),
        color-mix(in srgb, var(--teacher-courses-surface) 94%, #ffffff 6%)
    );
    --teacher-courses-btn-secondary-bg-hover: linear-gradient(
        145deg,
        color-mix(in srgb, var(--teacher-courses-accent) 15%, #ffffff 85%),
        color-mix(in srgb, var(--teacher-courses-surface) 92%, #ffffff 8%)
    );
    --teacher-courses-btn-secondary-border: color-mix(in srgb, var(--teacher-courses-accent) 24%, var(--teacher-courses-border) 76%);
    --teacher-courses-btn-secondary-text: color-mix(in srgb, var(--teacher-courses-accent) 66%, var(--app-text) 34%);
    --teacher-courses-btn-secondary-shadow: 0 14px 24px -20px rgba(30, 64, 175, 0.26);
    --teacher-courses-btn-manage-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--teacher-courses-accent) 16%, #ffffff 84%),
        color-mix(in srgb, #bfdbfe 30%, var(--teacher-courses-surface) 70%)
    );
    --teacher-courses-btn-manage-bg-hover: linear-gradient(
        145deg,
        color-mix(in srgb, var(--teacher-courses-accent) 24%, #ffffff 76%),
        color-mix(in srgb, #93c5fd 36%, var(--teacher-courses-surface) 64%)
    );
    --teacher-courses-pagination-surface: linear-gradient(
        145deg,
        color-mix(in srgb, var(--teacher-courses-accent) 6%, #ffffff 94%),
        color-mix(in srgb, var(--teacher-courses-surface) 96%, #ffffff 4%)
    );
    --teacher-courses-pagination-border: color-mix(in srgb, var(--teacher-courses-accent) 18%, var(--teacher-courses-border) 82%);
    --teacher-courses-pagination-link-bg: color-mix(in srgb, var(--teacher-courses-surface) 88%, #ffffff 12%);
    --teacher-courses-pagination-link-bg-hover: color-mix(in srgb, var(--teacher-courses-accent) 14%, #ffffff 86%);
    --teacher-courses-pagination-link-border: color-mix(in srgb, var(--teacher-courses-accent) 20%, var(--teacher-courses-border) 80%);
    --teacher-courses-pagination-link-text: color-mix(in srgb, var(--teacher-courses-accent) 58%, var(--app-text) 42%);
    --teacher-courses-pagination-link-active-bg: linear-gradient(135deg, var(--teacher-courses-btn-primary-start), var(--teacher-courses-btn-primary-end));
    --teacher-courses-pagination-link-active-border: color-mix(in srgb, var(--teacher-courses-accent) 70%, #1d4ed8 30%);
    --teacher-courses-pagination-link-active-text: #ffffff;
    --teacher-courses-pagination-link-active-shadow: 0 14px 30px -22px color-mix(in srgb, var(--teacher-courses-accent) 72%, transparent);
    --teacher-courses-action-strong-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --teacher-courses-action-strong-bg-hover: linear-gradient(135deg, #2563eb, #1e40af);
    --teacher-courses-action-strong-border: color-mix(in srgb, var(--teacher-courses-accent) 72%, #1e3a8a 28%);
    --teacher-courses-action-strong-shadow: 0 16px 28px -22px rgba(37, 99, 235, 0.52);
    --teacher-courses-pill-bg: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--teacher-courses-accent) 7%, #f8fafc 93%));
    --teacher-courses-pill-border: color-mix(in srgb, var(--teacher-courses-accent) 28%, var(--teacher-courses-border) 72%);
    --teacher-courses-pill-text: color-mix(in srgb, var(--teacher-courses-accent) 55%, #0f172a 45%);
    --teacher-courses-pill-count-bg: color-mix(in srgb, var(--teacher-courses-accent) 10%, #ffffff 90%);
    --teacher-courses-pill-count-border: color-mix(in srgb, var(--teacher-courses-accent) 26%, var(--teacher-courses-border) 74%);
    --teacher-courses-pill-active-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --teacher-courses-pill-active-border: color-mix(in srgb, var(--teacher-courses-accent) 74%, #1e40af 26%);
    --teacher-courses-pill-active-text: #ffffff;
    --teacher-courses-pill-active-count-bg: rgba(255, 255, 255, 0.22);
    --teacher-courses-pill-active-count-border: rgba(255, 255, 255, 0.34);
    --teacher-courses-kpi-label-text: #334155;
    --teacher-courses-kpi-value-text: #0f172a;
    --teacher-courses-kpi-meta-text: #475569;
    --teacher-courses-card-surface: linear-gradient(
        170deg,
        color-mix(in srgb, var(--teacher-courses-accent) 18%, #eef4ff 82%),
        color-mix(in srgb, var(--teacher-courses-accent) 8%, #f8fbff 92%)
    );
    --teacher-courses-card-border: color-mix(in srgb, var(--teacher-courses-accent) 32%, var(--teacher-courses-border) 68%);
}

body[data-view="teacher/courses"] .teacher-courses-main {
    width: min(100%, 103rem);
}

body[data-view="teacher/courses"] :is(.teacher-courses-hero, .teacher-courses-panel, .teacher-courses-alert) {
    border-color: var(--teacher-courses-border) !important;
    border-radius: 1.4rem !important;
    background: var(--teacher-courses-surface) !important;
    box-shadow: var(--teacher-courses-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    animation: teacher-courses-fade-up 460ms ease both;
}

body[data-view="teacher/courses"] .teacher-courses-main > section:nth-of-type(2) {
    animation-delay: 40ms;
}

body[data-view="teacher/courses"] .teacher-courses-main > section:nth-of-type(3) {
    animation-delay: 90ms;
}

body[data-view="teacher/courses"] .teacher-courses-main > section:nth-of-type(4) {
    animation-delay: 130ms;
}

body[data-view="teacher/courses"] .teacher-courses-hero {
    background: var(--teacher-courses-surface-soft) !important;
    padding: 1.35rem 1.45rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-hero__header {
    gap: 1rem;
}

body[data-view="teacher/courses"] .teacher-courses-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--teacher-courses-accent) 72%, var(--app-text) 28%);
}

body[data-view="teacher/courses"] .teacher-courses-hero__title {
    margin-top: 0.35rem;
    font-size: clamp(var(--app-text-2xl), 2vw, calc(var(--app-text-4xl) * 0.95));
    line-height: 1.05;
}

body[data-view="teacher/courses"] .teacher-courses-hero__subtitle {
    max-width: 44rem;
    color: var(--app-muted) !important;
}

body[data-view="teacher/courses"] .teacher-courses-hero__actions,
body[data-view="teacher/courses"] .teacher-courses-toolbar-actions {
    align-items: center;
}

body[data-view="teacher/courses"] .teacher-courses-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

body[data-view="teacher/courses"] .teacher-courses-action-group > .teacher-courses-btn {
    min-width: 10.35rem;
}

body[data-view="teacher/courses"] .teacher-courses-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--app-control-height-md);
    border-radius: 999px !important;
    padding: 0.72rem 1.05rem !important;
    border: 1px solid transparent;
    font-weight: 700;
    box-shadow: 0 10px 18px -16px rgba(30, 41, 59, 0.35);
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 26px -18px rgba(15, 23, 42, 0.34);
}

body[data-view="teacher/courses"] .teacher-courses-btn--primary {
    border-color: var(--teacher-courses-btn-primary-border) !important;
    background: linear-gradient(135deg, var(--teacher-courses-btn-primary-start), var(--teacher-courses-btn-primary-end)) !important;
    color: #ffffff !important;
    box-shadow: var(--teacher-courses-btn-primary-shadow);
}

body[data-view="teacher/courses"] .teacher-courses-btn--secondary {
    border-color: var(--teacher-courses-btn-secondary-border) !important;
    background: var(--teacher-courses-btn-secondary-bg) !important;
    color: var(--teacher-courses-btn-secondary-text) !important;
    box-shadow: var(--teacher-courses-btn-secondary-shadow);
}

body[data-view="teacher/courses"] .teacher-courses-btn--secondary:hover {
    background: var(--teacher-courses-btn-secondary-bg-hover) !important;
}

body[data-view="teacher/courses"] .teacher-courses-btn--secondary .app-icon {
    color: color-mix(in srgb, var(--teacher-courses-accent) 72%, #1d4ed8 28%);
}

body[data-view="teacher/courses"] .teacher-courses-btn--compact {
    min-height: var(--app-control-height-sm);
    padding: 0.52rem 0.9rem !important;
    font-size: var(--app-text-xs);
}

body[data-view="teacher/courses"] .teacher-courses-hero__stats {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: 1.15rem;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat {
    --teacher-courses-stat-accent: var(--teacher-courses-accent);
    min-width: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--teacher-courses-stat-accent) 32%, var(--teacher-courses-border) 68%);
    border-radius: 1.05rem;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--teacher-courses-stat-accent) 20%, #ffffff 80%),
        color-mix(in srgb, var(--teacher-courses-stat-accent) 8%, var(--app-surface) 92%)
    );
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--teacher-courses-stat-accent) 26%, rgba(15, 23, 42, 0.42));
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat::before {
    content: "";
    position: absolute;
    inset: auto -16% -36% auto;
    width: 8.4rem;
    height: 8.4rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--teacher-courses-stat-accent) 30%, rgba(255, 255, 255, 0.2)) 0%, transparent 74%);
    pointer-events: none;
    opacity: 0.56;
    z-index: -1;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--teacher-courses-stat-accent) 62%, #ffffff 38%), transparent);
    pointer-events: none;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--teacher-courses-stat-accent) 42%, var(--teacher-courses-border-strong) 58%);
    box-shadow: 0 24px 38px -26px color-mix(in srgb, var(--teacher-courses-stat-accent) 32%, rgba(15, 23, 42, 0.5));
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat[data-stat-tone="draft"] {
    --teacher-courses-stat-accent: #f59e0b;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat[data-stat-tone="pending"] {
    --teacher-courses-stat-accent: #f97316;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat[data-stat-tone="active"] {
    --teacher-courses-stat-accent: #10b981;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat[data-stat-tone="view"] {
    --teacher-courses-stat-accent: #3b82f6;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat__label,
body[data-view="teacher/courses"] .teacher-courses-kpi__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--teacher-courses-stat-accent) 34%, var(--teacher-courses-kpi-label-text) 66%);
}

body[data-view="teacher/courses"] :is(.teacher-courses-hero-stat__label, .teacher-courses-kpi__label, .teacher-courses-section-head__eyebrow, .teacher-courses-card__title, .teacher-courses-chip) .app-icon {
    width: 0.95rem;
    height: 0.95rem;
    opacity: 0.9;
}

body[data-view="teacher/courses"] :is(.teacher-courses-btn, .teacher-courses-card__button, .teacher-courses-status-pill, .teacher-courses-check, .teacher-courses-field__label) .app-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat__value {
    margin-top: 0.32rem;
    font-size: clamp(1.2rem, 1.1vw, 1.56rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--teacher-courses-kpi-value-text);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

body[data-view="teacher/courses"] .teacher-courses-hero-stat__meta {
    margin-top: 0.2rem;
    font-size: var(--app-text-xs);
    color: var(--teacher-courses-kpi-meta-text);
}

body[data-view="teacher/courses"] .teacher-courses-section-head__meta,
body[data-view="teacher/courses"] .teacher-courses-empty__meta {
    margin-top: 0.2rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body[data-view="teacher/courses"] .teacher-courses-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.05rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.9rem;
    border: 1px solid currentColor;
    flex: 0 0 auto;
}

body[data-view="teacher/courses"] .teacher-courses-alert__body {
    display: grid;
    gap: 0.24rem;
}

body[data-view="teacher/courses"] .teacher-courses-alert__title,
body[data-view="teacher/courses"] .teacher-courses-section-head__title {
    margin: 0;
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/courses"] .teacher-courses-alert--success .teacher-courses-alert__icon {
    color: #0f766e;
    background: rgba(16, 185, 129, 0.12);
}

body[data-view="teacher/courses"] .teacher-courses-alert--danger .teacher-courses-alert__icon {
    color: #be123c;
    background: rgba(244, 63, 94, 0.12);
}

body[data-view="teacher/courses"] .teacher-courses-alert--warning .teacher-courses-alert__icon {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
}

body[data-view="teacher/courses"] .teacher-courses-panel {
    padding: 1.15rem 1.2rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-section-head {
    align-items: flex-start !important;
    gap: 1rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-section-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--teacher-courses-accent) 58%, var(--app-text) 42%);
}

body[data-view="teacher/courses"] .teacher-courses-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px !important;
}

body[data-view="teacher/courses"] .teacher-courses-draft-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--teacher-courses-accent) 4%, var(--app-surface) 96%), var(--app-surface)) !important;
    border-color: var(--teacher-courses-border) !important;
    box-shadow: 0 16px 28px -26px rgba(15, 23, 42, 0.4);
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-draft-card:hover {
    transform: translateY(-2px);
    border-color: var(--teacher-courses-border-strong) !important;
    box-shadow: 0 22px 34px -28px rgba(15, 23, 42, 0.5);
}

body[data-view="teacher/courses"] .teacher-courses-draft-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body[data-view="teacher/courses"] .teacher-courses-filter-form {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

body[data-view="teacher/courses"] [data-course-filters-section] {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

body[data-view="teacher/courses"] .teacher-courses-filter-top {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--teacher-courses-border);
    border-radius: 1.05rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--teacher-courses-accent) 6%, var(--app-surface) 94%), var(--app-surface));
}

body[data-view="teacher/courses"] .teacher-courses-period-cluster {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

body[data-view="teacher/courses"] .teacher-courses-period-cluster .dash-section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body[data-view="teacher/courses"] .teacher-courses-filter-main {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex: 1 1 20rem;
    min-width: 0;
}

body[data-view="teacher/courses"] .teacher-courses-search-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 18rem;
    min-height: var(--app-control-height-md);
    max-width: 32rem;
    border: 1px solid var(--teacher-courses-border);
    border-radius: 999px;
    padding: 0.2rem 0.45rem 0.2rem 0.72rem;
    background: color-mix(in srgb, var(--app-surface) 85%, #ffffff 15%);
}

body[data-view="teacher/courses"] .teacher-courses-search-compact > input {
    width: 100%;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.35rem 0.1rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-search-compact > input:focus {
    outline: 0;
}

body[data-view="teacher/courses"] .teacher-courses-filter-summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--teacher-courses-border);
    background: color-mix(in srgb, var(--app-surface) 82%, #ffffff 18%);
}

body[data-view="teacher/courses"] .teacher-courses-filter-toggle {
    border-radius: 999px !important;
}

body[data-view="teacher/courses"] :is(.teacher-courses-custom-range, .teacher-courses-form-grid) {
    margin-top: 1rem;
}

body[data-view="teacher/courses"] .teacher-courses-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-field {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
}

body[data-view="teacher/courses"] .teacher-courses-field__label {
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: var(--app-muted);
}

body[data-view="teacher/courses"] .teacher-courses-field--actions {
    justify-content: flex-end;
}

body[data-view="teacher/courses"] .teacher-courses-field__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
}

body[data-view="teacher/courses"] .teacher-courses-control {
    min-height: var(--app-control-height-md);
    border-radius: 0.95rem !important;
    border: 1px solid var(--teacher-courses-border) !important;
    background: color-mix(in srgb, var(--app-surface) 84%, #ffffff 16%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

body[data-view="teacher/courses"] .teacher-courses-control:focus {
    border-color: color-mix(in srgb, var(--teacher-courses-accent) 48%, var(--teacher-courses-border) 52%) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--teacher-courses-accent) 14%, transparent) !important;
}

body[data-view="teacher/courses"] .teacher-courses-status-row {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--teacher-courses-border);
    gap: 0.55rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-status-pill {
    border: 1px solid var(--teacher-courses-pill-border) !important;
    background: var(--teacher-courses-pill-bg) !important;
    color: var(--teacher-courses-pill-text) !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 20px -18px rgba(37, 99, 235, 0.28);
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-status-pill:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--teacher-courses-accent) 46%, var(--teacher-courses-pill-border) 54%) !important;
    box-shadow: 0 14px 24px -20px color-mix(in srgb, var(--teacher-courses-accent) 56%, transparent);
}

body[data-view="teacher/courses"] .teacher-courses-status-pill.is-active {
    border-color: var(--teacher-courses-pill-active-border) !important;
    background: var(--teacher-courses-pill-active-bg) !important;
    color: var(--teacher-courses-pill-active-text) !important;
    box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--teacher-courses-accent) 72%, transparent);
}

body[data-view="teacher/courses"] .teacher-courses-status-pill .teacher-courses-status-pill__count {
    border-color: var(--teacher-courses-pill-count-border) !important;
    background: var(--teacher-courses-pill-count-bg) !important;
    color: inherit !important;
}

body[data-view="teacher/courses"] .teacher-courses-status-pill.is-active .teacher-courses-status-pill__count {
    border-color: var(--teacher-courses-pill-active-count-border) !important;
    background: var(--teacher-courses-pill-active-count-bg) !important;
    color: #ffffff !important;
}

body[data-view="teacher/courses"] .teacher-courses-status-pill .app-icon {
    color: inherit;
}

body[data-view="teacher/courses"] .teacher-courses-bulk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-end !important;
    gap: 0.75rem !important;
    padding-top: 0.95rem;
    border-top: 1px solid var(--teacher-courses-border);
}

body[data-view="teacher/courses"] .teacher-courses-bulk-row__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

body[data-view="teacher/courses"] .teacher-courses-bulk-row__controls .teacher-courses-field {
    min-width: min(100%, 16rem);
}

body[data-view="teacher/courses"] .teacher-courses-bulk-row__actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

body[data-view="teacher/courses"] .teacher-courses-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--app-muted);
}

body[data-view="teacher/courses"] .teacher-courses-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

body[data-view="teacher/courses"] .teacher-courses-card {
    --teacher-courses-card-accent: var(--teacher-courses-accent);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(
            165deg,
            color-mix(in srgb, var(--teacher-courses-card-accent) 24%, transparent),
            transparent 62%
        ),
        var(--teacher-courses-card-surface) !important;
    border-color: color-mix(in srgb, var(--teacher-courses-card-accent) 36%, var(--teacher-courses-card-border) 64%) !important;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast), filter var(--app-transition-fast);
    padding: 0.95rem !important;
    box-shadow: 0 18px 32px -26px rgba(15, 23, 42, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    animation: teacher-courses-fade-up 420ms ease both;
    will-change: transform, box-shadow;
    cursor: default;
}

body[data-view="teacher/courses"] .teacher-courses-card::before {
    content: "";
    position: absolute;
    inset: auto -20% -42% auto;
    width: 11rem;
    height: 11rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--teacher-courses-card-accent) 46%, rgba(255, 255, 255, 0.22)) 0%, transparent 72%);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
    animation: teacher-courses-card-glow 7.6s ease-in-out infinite;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity var(--app-transition-fast), transform var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-card::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--teacher-courses-card-accent) 60%, #ffffff 40%), transparent);
    opacity: 0.65;
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-card > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(3n + 1) {
    --teacher-courses-card-accent: #3b82f6;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(3n + 2) {
    --teacher-courses-card-accent: #10b981;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(3n) {
    --teacher-courses-card-accent: #f59e0b;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(1) {
    animation-delay: 30ms;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(2) {
    animation-delay: 70ms;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(3) {
    animation-delay: 110ms;
}

body[data-view="teacher/courses"] .teacher-courses-list > .teacher-courses-card:nth-child(4) {
    animation-delay: 150ms;
}

body[data-view="teacher/courses"] .teacher-courses-card:is(:hover, :focus-within) {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--teacher-courses-card-accent) 38%, var(--teacher-courses-border-strong) 62%) !important;
    box-shadow: 0 32px 56px -34px color-mix(in srgb, var(--teacher-courses-card-accent) 42%, rgba(15, 23, 42, 0.48)),
        0 16px 28px -24px rgba(15, 23, 42, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    filter: saturate(1.05);
}

body[data-view="teacher/courses"] .teacher-courses-card:is(:hover, :focus-within)::before {
    opacity: 0.34;
    transform: translate3d(-6px, -6px, 0) scale(1.08);
}

body[data-view="teacher/courses"] .teacher-courses-card:is(:hover, :focus-within)::after {
    opacity: 0.95;
}

/* Explicit hover/focus selectors for broad browser compatibility */
body[data-view="teacher/courses"] .teacher-courses-card:hover,
body[data-view="teacher/courses"] .teacher-courses-card:focus-within,
body[data-view="teacher/courses"] .teacher-courses-card:active {
    transform: translateY(-6px) scale(1.01) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 34px 60px -34px rgba(37, 99, 235, 0.46), 0 18px 32px -24px rgba(15, 23, 42, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
    filter: saturate(1.08) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card:hover::before,
body[data-view="teacher/courses"] .teacher-courses-card:focus-within::before,
body[data-view="teacher/courses"] .teacher-courses-card:active::before {
    opacity: 0.42;
    transform: translate3d(-8px, -8px, 0) scale(1.1);
}

body[data-view="teacher/courses"] .teacher-courses-card:hover::after,
body[data-view="teacher/courses"] .teacher-courses-card:focus-within::after,
body[data-view="teacher/courses"] .teacher-courses-card:active::after {
    opacity: 1;
}

body[data-view="teacher/courses"] .teacher-courses-card__stack {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-height: 100%;
}

body[data-view="teacher/courses"] .teacher-courses-card__cover {
    border-color: var(--teacher-courses-border) !important;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    height: 4.25rem !important;
    border-radius: 0.95rem !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-view="teacher/courses"] .teacher-courses-card__top {
    display: grid !important;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__intro {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 1rem;
    align-items: start;
}

body[data-view="teacher/courses"] .teacher-courses-card__title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: clamp(0.98rem, 0.92rem + 0.18vw, 1.08rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

body[data-view="teacher/courses"] .teacher-courses-card__subline {
    margin-top: 0.18rem;
    line-height: 1.45;
}

body[data-view="teacher/courses"] .teacher-courses-card__description {
    margin-top: 0.45rem !important;
    font-size: 0.88rem !important;
    line-height: 1.45;
    min-height: 2.6em;
    width: 100%;
}

body[data-view="teacher/courses"] .teacher-courses-card__description--split {
    margin-top: 0 !important;
    align-self: stretch;
    min-height: 4.1em;
}

body[data-view="teacher/courses"] .teacher-courses-chip,
body[data-view="teacher/courses"] .teacher-courses-kpi {
    border-color: var(--teacher-courses-border) !important;
    background: color-mix(in srgb, var(--app-surface) 82%, #ffffff 18%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem !important;
    margin-top: 0.45rem !important;
    overflow-x: auto;
    padding-bottom: 0.08rem;
}

body[data-view="teacher/courses"] .teacher-courses-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.28rem 0.55rem !important;
    font-size: 0.72rem;
    line-height: 1.2;
}

body[data-view="teacher/courses"] .teacher-courses-card__metrics {
    gap: 0.45rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-kpi {
    padding: 0.72rem 0.75rem !important;
    border-radius: 0.95rem !important;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast);
    animation: teacher-courses-kpi-glow 7.5s ease-in-out infinite;
}

body[data-view="teacher/courses"] .teacher-courses-kpi:nth-child(1) {
    border-color: color-mix(in srgb, #3b82f6 36%, var(--teacher-courses-border) 64%) !important;
    background: linear-gradient(145deg, color-mix(in srgb, #3b82f6 18%, var(--app-surface) 82%), var(--app-surface)) !important;
}

body[data-view="teacher/courses"] .teacher-courses-kpi:nth-child(2) {
    border-color: color-mix(in srgb, #10b981 36%, var(--teacher-courses-border) 64%) !important;
    background: linear-gradient(145deg, color-mix(in srgb, #10b981 18%, var(--app-surface) 82%), var(--app-surface)) !important;
}

body[data-view="teacher/courses"] .teacher-courses-kpi:nth-child(3) {
    border-color: color-mix(in srgb, #f59e0b 36%, var(--teacher-courses-border) 64%) !important;
    background: linear-gradient(145deg, color-mix(in srgb, #f59e0b 18%, var(--app-surface) 82%), var(--app-surface)) !important;
}

body[data-view="teacher/courses"] .teacher-courses-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -24px rgba(15, 23, 42, 0.48);
}

body[data-view="teacher/courses"] .teacher-courses-kpi__value {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    color: var(--app-text);
}

body[data-view="teacher/courses"] .teacher-courses-card__footer {
    margin-top: auto;
    padding-top: 0.95rem;
    border-top: 1px solid var(--teacher-courses-border);
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__meta {
    align-items: flex-start !important;
    gap: 0.45rem !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__meta-main {
    gap: 0.4rem !important;
    line-height: 1.5;
}

body[data-view="teacher/courses"] .teacher-courses-card__inline-manage {
    min-height: 2rem;
    padding: 0.42rem 0.74rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem !important;
    width: 100%;
    justify-self: end;
    min-width: 10.25rem;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--single {
    grid-template-columns: 1fr !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions > :is(a, form) {
    display: flex !important;
    width: 100%;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem !important;
    min-width: 0;
    width: 100%;
    justify-self: stretch;
    align-items: start;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager > .teacher-courses-card__actions-group {
    border: 1px solid color-mix(in srgb, #3b82f6 38%, var(--teacher-courses-border) 62%);
    border-radius: 1rem;
    padding: 0.74rem;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #3b82f6 20%, var(--app-surface) 80%),
        color-mix(in srgb, #1d4ed8 10%, var(--app-surface) 90%)
    );
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 32%, transparent);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-group--main {
    border-color: color-mix(in srgb, #3b82f6 46%, var(--teacher-courses-border) 54%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops {
    border-color: color-mix(in srgb, #10b981 44%, var(--teacher-courses-border) 56%) !important;
    background: linear-gradient(
        155deg,
        color-mix(in srgb, #10b981 18%, var(--app-surface) 82%),
        color-mix(in srgb, #059669 10%, var(--app-surface) 90%)
    ) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-title {
    margin: 0 0 0.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, #1d4ed8 76%, var(--app-text) 24%);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops .teacher-courses-card__actions-title {
    color: color-mix(in srgb, #047857 76%, var(--app-text) 24%);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    justify-items: center;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-group--main .teacher-courses-card__actions-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops .teacher-courses-card__actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid > :is(a, form) {
    display: flex !important;
    width: min(100%, 18.75rem);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid > .teacher-courses-card__action-span-2 {
    grid-column: 1 / -1;
    width: min(100%, 21.5rem);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops .teacher-courses-card__actions-grid > .teacher-courses-card__action-span-2 {
    grid-column: auto;
    width: 100%;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--secondary {
    border-color: color-mix(in srgb, #3b82f6 54%, var(--teacher-courses-border) 46%) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #dbeafe 72%, var(--app-surface) 28%),
        color-mix(in srgb, #93c5fd 48%, var(--app-surface) 52%)
    ) !important;
    color: color-mix(in srgb, #1e3a8a 84%, var(--app-text) 16%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--secondary:hover {
    border-color: color-mix(in srgb, #2563eb 62%, var(--teacher-courses-border) 38%) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #bfdbfe 72%, var(--app-surface) 28%),
        color-mix(in srgb, #60a5fa 56%, var(--app-surface) 44%)
    ) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--primary {
    border-color: color-mix(in srgb, #10b981 62%, #047857 38%) !important;
    background: linear-gradient(135deg, #34d399, #059669) !important;
    color: #ecfdf5 !important;
    box-shadow: 0 14px 24px -18px rgba(5, 150, 105, 0.52);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--danger {
    border-color: color-mix(in srgb, #f43f5e 66%, var(--teacher-courses-border) 34%) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #fecdd3 74%, var(--app-surface) 26%),
        color-mix(in srgb, #fb7185 48%, var(--app-surface) 52%)
    ) !important;
    color: color-mix(in srgb, #9f1239 86%, var(--app-text) 14%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--danger:hover {
    border-color: color-mix(in srgb, #e11d48 76%, var(--teacher-courses-border) 24%) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #fda4af 76%, var(--app-surface) 24%),
        color-mix(in srgb, #fb7185 62%, var(--app-surface) 38%)
    ) !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions--manager > .teacher-courses-card__actions-group,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions--manager > .teacher-courses-card__actions-group {
    border-color: color-mix(in srgb, #60a5fa 52%, rgba(148, 163, 184, 0.28) 48%) !important;
    background: linear-gradient(155deg, rgba(30, 64, 175, 0.44), rgba(15, 23, 42, 0.9)) !important;
    box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.24);
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops {
    border-color: color-mix(in srgb, #34d399 52%, rgba(148, 163, 184, 0.28) 48%) !important;
    background: linear-gradient(155deg, rgba(5, 150, 105, 0.42), rgba(15, 23, 42, 0.9)) !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions-title,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions-title {
    color: #bfdbfe !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops .teacher-courses-card__actions-title,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops .teacher-courses-card__actions-title {
    color: #86efac !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--secondary,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--secondary {
    border-color: color-mix(in srgb, #60a5fa 62%, rgba(148, 163, 184, 0.3) 38%) !important;
    background: linear-gradient(145deg, rgba(37, 99, 235, 0.62), rgba(30, 58, 138, 0.84)) !important;
    color: #eff6ff !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--secondary:hover,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--secondary:hover {
    border-color: color-mix(in srgb, #93c5fd 70%, rgba(148, 163, 184, 0.3) 30%) !important;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.72), rgba(30, 64, 175, 0.9)) !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--primary,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--primary {
    border-color: color-mix(in srgb, #34d399 72%, rgba(6, 78, 59, 0.28) 28%) !important;
    background: linear-gradient(135deg, #34d399, #059669) !important;
    color: #ecfdf5 !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--danger,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--danger {
    border-color: color-mix(in srgb, #fb7185 72%, rgba(148, 163, 184, 0.28) 28%) !important;
    background: linear-gradient(145deg, rgba(225, 29, 72, 0.66), rgba(157, 23, 77, 0.82)) !important;
    color: #ffe4e6 !important;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--danger:hover,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button--danger:hover {
    border-color: color-mix(in srgb, #fda4af 78%, rgba(148, 163, 184, 0.22) 22%) !important;
    background: linear-gradient(145deg, rgba(244, 63, 94, 0.74), rgba(190, 24, 93, 0.86)) !important;
}

body[data-view="teacher/courses"] .teacher-courses-more {
    grid-column: 1 / -1;
    position: relative;
}

body[data-view="teacher/courses"] .teacher-courses-more > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

body[data-view="teacher/courses"] .teacher-courses-more > summary::-webkit-details-marker {
    display: none;
}

body[data-view="teacher/courses"] .teacher-courses-more[open] > summary {
    border-color: color-mix(in srgb, var(--teacher-courses-accent) 46%, var(--teacher-courses-border) 54%);
}

body[data-view="teacher/courses"] .teacher-courses-more__menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.48rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--teacher-courses-border);
    animation: teacher-courses-fade-up 260ms ease both;
}

body[data-view="teacher/courses"] .teacher-courses-card__button {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: var(--app-control-height-sm);
    border-radius: 999px !important;
    width: 100%;
    padding: 0.54rem 0.68rem !important;
    letter-spacing: 0.01em;
    font-size: 0.78rem !important;
    justify-content: center;
    text-align: center;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-card__button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -20px rgba(15, 23, 42, 0.44);
}

body[data-view="teacher/courses"] .teacher-courses-card__button--secondary {
    border-color: var(--teacher-courses-btn-secondary-border) !important;
    background: var(--teacher-courses-btn-manage-bg) !important;
    color: color-mix(in srgb, var(--teacher-courses-accent) 72%, var(--app-text) 28%) !important;
    box-shadow: 0 12px 24px -20px rgba(37, 99, 235, 0.32);
}

body[data-view="teacher/courses"] .teacher-courses-card__button--secondary:hover {
    background: var(--teacher-courses-btn-manage-bg-hover) !important;
    border-color: color-mix(in srgb, var(--teacher-courses-accent) 40%, var(--teacher-courses-border) 60%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__button--secondary .app-icon {
    color: color-mix(in srgb, var(--teacher-courses-accent) 76%, #1d4ed8 24%);
}

body[data-view="teacher/courses"] .teacher-courses-action-strong {
    border-color: var(--teacher-courses-action-strong-border) !important;
    background: var(--teacher-courses-action-strong-bg) !important;
    color: #ffffff !important;
    box-shadow: var(--teacher-courses-action-strong-shadow);
}

body[data-view="teacher/courses"] .teacher-courses-action-strong:hover {
    border-color: color-mix(in srgb, var(--teacher-courses-accent) 84%, #1e3a8a 16%) !important;
    background: var(--teacher-courses-action-strong-bg-hover) !important;
    box-shadow: 0 18px 30px -22px rgba(37, 99, 235, 0.58);
}

body[data-view="teacher/courses"] .teacher-courses-action-strong .app-icon {
    color: #ffffff;
    opacity: 0.95;
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button .app-icon {
    color: currentColor !important;
    opacity: 0.96;
    transition: color var(--app-transition-fast), opacity var(--app-transition-fast);
}

body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__button:hover .app-icon {
    color: currentColor !important;
}

body[data-view="teacher/courses"] .teacher-courses-card__button--primary {
    border-color: color-mix(in srgb, #10b981 50%, #047857 50%) !important;
    background: linear-gradient(135deg, #34d399, #059669) !important;
    color: #ecfdf5 !important;
    box-shadow: 0 14px 24px -20px rgba(16, 185, 129, 0.52);
}

body[data-view="teacher/courses"] .teacher-courses-card__button--danger {
    border-color: color-mix(in srgb, #fb7185 44%, var(--teacher-courses-border) 56%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, #fff1f2 84%, #fda4af 16%), color-mix(in srgb, #ffe4e6 88%, #fb7185 12%)) !important;
    color: #be123c !important;
    box-shadow: 0 12px 22px -20px rgba(190, 24, 93, 0.34);
}

body[data-view="teacher/courses"] .teacher-courses-empty {
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    padding-block: 2rem;
}

body[data-view="teacher/courses"] .teacher-courses-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-courses-border);
    color: color-mix(in srgb, var(--teacher-courses-accent) 76%, var(--app-text) 24%);
    background: color-mix(in srgb, var(--teacher-courses-accent) 8%, var(--app-surface) 92%);
}

body[data-view="teacher/courses"] .teacher-courses-empty__title {
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/courses"] .teacher-courses-pagination__nav a {
    min-width: 2.2rem;
    border-radius: 0.85rem !important;
    border-color: var(--teacher-courses-pagination-link-border) !important;
    background: var(--teacher-courses-pagination-link-bg) !important;
    color: var(--teacher-courses-pagination-link-text) !important;
    box-shadow: 0 10px 20px -18px rgba(30, 64, 175, 0.24);
}

body[data-view="teacher/courses"] .teacher-courses-pagination__nav a.is-active {
    border-color: var(--teacher-courses-pagination-link-active-border) !important;
    background: var(--teacher-courses-pagination-link-active-bg) !important;
    color: var(--teacher-courses-pagination-link-active-text) !important;
    box-shadow: var(--teacher-courses-pagination-link-active-shadow);
}

body[data-view="teacher/courses"] .teacher-courses-pagination {
    border: 1px solid var(--teacher-courses-pagination-border);
    border-radius: 1rem;
    background: var(--teacher-courses-pagination-surface);
    padding: 0.52rem 0.65rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 30px -28px rgba(30, 64, 175, 0.28);
}

body[data-view="teacher/courses"] .teacher-courses-pagination__meta {
    color: color-mix(in srgb, var(--teacher-courses-accent) 38%, var(--app-muted) 62%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-pagination__nav a:hover:not(.is-active):not(.is-disabled) {
    background: var(--teacher-courses-pagination-link-bg-hover) !important;
    border-color: color-mix(in srgb, var(--teacher-courses-accent) 36%, var(--teacher-courses-pagination-link-border) 64%) !important;
    transform: translateY(-1px);
}

body[data-view="teacher/courses"] .teacher-courses-pagination__nav a.is-disabled {
    box-shadow: none;
    opacity: 0.5 !important;
}

body[data-view="teacher/courses"] .teacher-courses-pagination__ellipsis {
    color: color-mix(in srgb, var(--teacher-courses-accent) 32%, var(--app-muted) 68%) !important;
}

body[data-view="teacher/courses"] .teacher-courses-modal {
    backdrop-filter: blur(4px);
}

body[data-view="teacher/courses"] .teacher-courses-modal__panel {
    border-color: var(--teacher-courses-border) !important;
    background: var(--teacher-courses-surface);
    box-shadow: 0 24px 60px -36px rgba(15, 23, 42, 0.38);
}

html.dark body[data-view="teacher/courses"],
html[data-theme="dark"] body[data-view="teacher/courses"] {
    --teacher-courses-border: color-mix(in srgb, var(--teacher-courses-accent) 20%, rgba(148, 163, 184, 0.28) 80%);
    --teacher-courses-border-strong: color-mix(in srgb, var(--teacher-courses-accent) 34%, rgba(148, 163, 184, 0.22) 66%);
    --teacher-courses-surface: linear-gradient(155deg, rgba(8, 20, 44, 0.96), rgba(7, 18, 40, 0.94));
    --teacher-courses-surface-soft: linear-gradient(145deg, rgba(14, 35, 72, 0.96), rgba(8, 20, 44, 0.94));
    --teacher-courses-btn-primary-start: color-mix(in srgb, var(--teacher-courses-accent) 78%, #3b82f6 22%);
    --teacher-courses-btn-primary-end: color-mix(in srgb, var(--teacher-courses-accent) 62%, #1d4ed8 38%);
    --teacher-courses-btn-primary-border: color-mix(in srgb, var(--teacher-courses-accent) 48%, rgba(59, 130, 246, 0.52) 52%);
    --teacher-courses-btn-primary-shadow: 0 18px 30px -22px color-mix(in srgb, var(--teacher-courses-accent) 66%, rgba(8, 47, 73, 0.34));
    --teacher-courses-btn-secondary-bg: linear-gradient(145deg, rgba(30, 58, 138, 0.28), rgba(15, 23, 42, 0.66));
    --teacher-courses-btn-secondary-bg-hover: linear-gradient(145deg, rgba(37, 99, 235, 0.32), rgba(15, 23, 42, 0.78));
    --teacher-courses-btn-secondary-border: color-mix(in srgb, var(--teacher-courses-accent) 34%, rgba(148, 163, 184, 0.34) 66%);
    --teacher-courses-btn-secondary-text: color-mix(in srgb, #e2e8f0 80%, var(--teacher-courses-accent) 20%);
    --teacher-courses-btn-secondary-shadow: 0 14px 26px -20px rgba(2, 6, 23, 0.62);
    --teacher-courses-btn-manage-bg: linear-gradient(145deg, rgba(30, 64, 175, 0.38), rgba(15, 23, 42, 0.76));
    --teacher-courses-btn-manage-bg-hover: linear-gradient(145deg, rgba(59, 130, 246, 0.46), rgba(15, 23, 42, 0.86));
    --teacher-courses-pagination-surface: linear-gradient(145deg, rgba(12, 29, 62, 0.95), rgba(7, 18, 40, 0.94));
    --teacher-courses-pagination-border: color-mix(in srgb, var(--teacher-courses-accent) 28%, rgba(148, 163, 184, 0.28) 72%);
    --teacher-courses-pagination-link-bg: color-mix(in srgb, rgba(15, 23, 42, 0.86) 76%, var(--teacher-courses-accent) 24%);
    --teacher-courses-pagination-link-bg-hover: color-mix(in srgb, rgba(30, 64, 175, 0.46) 62%, rgba(15, 23, 42, 0.54) 38%);
    --teacher-courses-pagination-link-border: color-mix(in srgb, var(--teacher-courses-accent) 36%, rgba(148, 163, 184, 0.28) 64%);
    --teacher-courses-pagination-link-text: #dbeafe;
    --teacher-courses-pagination-link-active-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --teacher-courses-pagination-link-active-border: color-mix(in srgb, var(--teacher-courses-accent) 64%, #1e40af 36%);
    --teacher-courses-pagination-link-active-shadow: 0 14px 30px -20px rgba(37, 99, 235, 0.62);
    --teacher-courses-action-strong-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --teacher-courses-action-strong-bg-hover: linear-gradient(135deg, #2563eb, #1e40af);
    --teacher-courses-action-strong-border: color-mix(in srgb, var(--teacher-courses-accent) 62%, rgba(147, 197, 253, 0.38) 38%);
    --teacher-courses-action-strong-shadow: 0 18px 30px -22px rgba(37, 99, 235, 0.6);
    --teacher-courses-pill-bg: linear-gradient(145deg, rgba(30, 58, 138, 0.28), rgba(15, 23, 42, 0.74));
    --teacher-courses-pill-border: color-mix(in srgb, var(--teacher-courses-accent) 42%, rgba(148, 163, 184, 0.3) 58%);
    --teacher-courses-pill-text: #dbeafe;
    --teacher-courses-pill-count-bg: rgba(148, 163, 184, 0.14);
    --teacher-courses-pill-count-border: rgba(148, 163, 184, 0.34);
    --teacher-courses-pill-active-bg: linear-gradient(135deg, #3b82f6, #1d4ed8);
    --teacher-courses-pill-active-border: color-mix(in srgb, var(--teacher-courses-accent) 72%, rgba(191, 219, 254, 0.42) 28%);
    --teacher-courses-pill-active-text: #ffffff;
    --teacher-courses-pill-active-count-bg: rgba(255, 255, 255, 0.22);
    --teacher-courses-pill-active-count-border: rgba(255, 255, 255, 0.34);
    --teacher-courses-kpi-label-text: #dbeafe;
    --teacher-courses-kpi-value-text: #f8fafc;
    --teacher-courses-kpi-meta-text: #e2e8f0;
    --teacher-courses-card-surface: linear-gradient(
        170deg,
        color-mix(in srgb, var(--teacher-courses-accent) 24%, rgba(11, 26, 52, 0.95) 76%),
        rgba(7, 18, 40, 0.95)
    );
    --teacher-courses-card-border: color-mix(in srgb, var(--teacher-courses-accent) 40%, rgba(148, 163, 184, 0.32) 60%);
}

html.dark body[data-view="teacher/courses"] .teacher-courses-hero-stat,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-hero-stat {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--teacher-courses-stat-accent) 26%, rgba(15, 23, 42, 0.92) 74%),
        rgba(8, 18, 38, 0.93)
    );
    border-color: color-mix(in srgb, var(--teacher-courses-stat-accent) 44%, rgba(148, 163, 184, 0.34) 56%);
    box-shadow: 0 20px 34px -24px color-mix(in srgb, var(--teacher-courses-stat-accent) 40%, rgba(2, 6, 23, 0.72));
}

html.dark body[data-view="teacher/courses"] .teacher-courses-hero-stat::before,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-hero-stat::before {
    background: radial-gradient(circle, color-mix(in srgb, var(--teacher-courses-stat-accent) 38%, rgba(191, 219, 254, 0.2)) 0%, transparent 74%);
    opacity: 0.42;
}

html.dark body[data-view="teacher/courses"] .teacher-courses-hero-stat__value,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-hero-stat__value {
    text-shadow: 0 1px 0 rgba(15, 23, 42, 0.45);
}

html.dark body[data-view="teacher/courses"] .teacher-courses-card:hover,
html.dark body[data-view="teacher/courses"] .teacher-courses-card:focus-within,
html.dark body[data-view="teacher/courses"] .teacher-courses-card:active,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card:hover,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card:focus-within,
html[data-theme="dark"] body[data-view="teacher/courses"] .teacher-courses-card:active {
    box-shadow: 0 36px 62px -34px rgba(37, 99, 235, 0.58), 0 20px 34px -24px rgba(2, 6, 23, 0.7), inset 0 1px 0 rgba(148, 163, 184, 0.24) !important;
}

@keyframes teacher-courses-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes teacher-courses-kpi-glow {
    0%,
    100% {
        box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.28);
    }
    50% {
        box-shadow: 0 20px 30px -22px color-mix(in srgb, var(--teacher-courses-accent) 46%, rgba(15, 23, 42, 0.6));
    }
}

@keyframes teacher-courses-card-glow {
    0%,
    100% {
        opacity: 0.16;
        transform: translate3d(0, 0, 0) scale(0.96);
    }
    50% {
        opacity: 0.32;
        transform: translate3d(-4px, -3px, 0) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-view="teacher/courses"] :is(.teacher-courses-hero, .teacher-courses-panel, .teacher-courses-alert, .teacher-courses-card, .teacher-courses-kpi, .teacher-courses-more__menu) {
        animation: none !important;
    }

    body[data-view="teacher/courses"] .teacher-courses-card::before {
        animation: none !important;
    }
}

@media (max-width: 1440px) {
    body[data-view="teacher/courses"] .teacher-courses-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    body[data-view="teacher/courses"] .teacher-courses-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    body[data-view="teacher/courses"] .teacher-courses-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-view="teacher/courses"] .teacher-courses-filter-top {
        align-items: flex-start;
    }

    body[data-view="teacher/courses"] .teacher-courses-filter-main {
        flex: 1 1 100%;
        justify-content: stretch;
        flex-wrap: wrap;
    }

    body[data-view="teacher/courses"] .teacher-courses-search-compact {
        max-width: none;
        width: 100%;
    }
}

@media (max-width: 980px) {
    body[data-view="teacher/courses"] .teacher-courses-card__actions--manager {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__intro {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions-group--main .teacher-courses-card__actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions-group--ops .teacher-courses-card__actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid {
        justify-items: stretch;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid > :is(a, form),
    body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid > .teacher-courses-card__action-span-2 {
        width: 100%;
    }
}

@media (max-width: 760px) {
    body[data-view="teacher/courses"] :is(.teacher-courses-hero, .teacher-courses-panel, .teacher-courses-alert) {
        border-radius: 1.15rem !important;
        padding-inline: 1rem !important;
    }

    body[data-view="teacher/courses"] .teacher-courses-hero__stats,
    body[data-view="teacher/courses"] .teacher-courses-custom-range,
    body[data-view="teacher/courses"] .teacher-courses-form-grid,
    body[data-view="teacher/courses"] .teacher-courses-list,
    body[data-view="teacher/courses"] .teacher-courses-card__metrics {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__top {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__cover {
        width: 100%;
        max-width: none;
        height: 11rem;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions {
        grid-template-columns: 1fr;
        min-width: 0;
        width: 100%;
        justify-self: stretch;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions--manager .teacher-courses-card__actions-grid {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-more__menu {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__actions > :is(a, form),
    body[data-view="teacher/courses"] .teacher-courses-bulk-row > :is(label, button, .teacher-courses-bulk-row__controls, .teacher-courses-bulk-row__actions) {
        flex: 1 1 100%;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__button,
    body[data-view="teacher/courses"] .teacher-courses-btn {
        width: 100%;
    }

    body[data-view="teacher/courses"] .teacher-courses-action-group {
        width: 100%;
        justify-content: stretch;
    }

    body[data-view="teacher/courses"] .teacher-courses-action-group > .teacher-courses-btn {
        flex: 1 1 100%;
        min-width: 0;
    }

    body[data-view="teacher/courses"] .teacher-courses-field__actions {
        justify-content: stretch;
    }

    body[data-view="teacher/courses"] .teacher-courses-field__actions .teacher-courses-btn {
        flex: 1 1 100%;
    }

    body[data-view="teacher/courses"] .teacher-courses-bulk-row {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/courses"] .teacher-courses-bulk-row__actions {
        justify-content: stretch;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__footer {
        grid-template-columns: 1fr;
        align-items: start !important;
    }

    body[data-view="teacher/courses"] .teacher-courses-card__inline-manage {
        width: 100%;
    }
}

body[data-view="teacher/dashboard"] .app-dashboard-shell {
    width: min(100%, 100rem);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell > section {
    border-radius: 1.18rem !important;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.28);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta {
    letter-spacing: 0.01em;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta--positive {
    color: #1e40af !important;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta--negative {
    color: #a16207 !important;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta--neutral {
    color: #475569 !important;
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta--positive {
    color: #93c5fd !important;
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta--negative {
    color: #fcd34d !important;
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta--neutral {
    color: #cbd5e1 !important;
}

body[data-view="teacher/dashboard"] .app-shell-toolbar__eyebrow {
    font-size: var(--app-text-2xs) !important;
    letter-spacing: 0.14em !important;
}

body[data-view="teacher/dashboard"] .app-shell-toolbar__title {
    font-size: clamp(var(--app-text-lg), 1.4vw, var(--app-text-xl)) !important;
    line-height: 1.08 !important;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-panel__title {
    font-size: clamp(var(--app-text-xl), 1.8vw, var(--app-text-2xl));
    line-height: var(--app-leading-2xl);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-panel__summary {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-base);
    max-width: 38rem;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-metric__label,
body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-section-label,
body[data-view="teacher/dashboard"] .app-dashboard-shell .performance-pill__label {
    font-size: var(--app-text-2xs);
    letter-spacing: 0.09em;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-metric__value,
body[data-view="teacher/dashboard"] .app-dashboard-shell .performance-pill__value {
    font-size: clamp(var(--app-text-lg), 1.35vw, var(--app-text-xl));
    line-height: var(--app-leading-xl);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-metric__meta,
body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card__meta,
body[data-view="teacher/dashboard"] .app-dashboard-shell .priority-item__meta {
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-sm);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-section-title {
    font-size: var(--app-text-base);
    line-height: var(--app-leading-lg);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card__head {
    gap: 0.7rem;
    font-size: var(--app-text-2xs);
    letter-spacing: 0.09em;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card__icon {
    width: calc(var(--app-control-height-sm) + 0.1rem);
    height: calc(var(--app-control-height-sm) + 0.1rem);
    border-radius: 0.92rem;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card__icon > svg {
    width: 1.05rem;
    height: 1.05rem;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card__value,
body[data-view="teacher/dashboard"] .app-dashboard-shell .text-2xl,
body[data-view="teacher/dashboard"] .app-dashboard-shell .text-3xl {
    font-size: clamp(var(--app-text-xl), 1.6vw, var(--app-text-2xl)) !important;
    line-height: var(--app-leading-2xl) !important;
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .kpi-delta,
body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-badge,
body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-btn,
body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-link {
    font-size: var(--app-text-sm);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-progress {
    height: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--app-primary-600) 24%, var(--app-border) 76%);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-primary-600) 16%, var(--app-border) 84%),
        color-mix(in srgb, var(--app-primary-500) 8%, var(--app-border) 92%)
    );
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-progress__fill {
    background: linear-gradient(90deg, var(--app-primary-500), var(--app-primary-700));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-primary-700) 26%, transparent), 0 6px 14px -10px color-mix(in srgb, var(--app-primary-700) 58%, transparent);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .priority-item .dash-link--inline {
    font-weight: 700;
    color: var(--app-primary-700);
    border-color: color-mix(in srgb, var(--app-primary-600) 48%, var(--app-border) 52%);
    background: color-mix(in srgb, var(--app-primary-600) 12%, var(--app-surface) 88%);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .priority-item .dash-link--inline:hover {
    color: var(--app-primary-800);
    border-color: color-mix(in srgb, var(--app-primary-700) 58%, var(--app-border) 42%);
    background: color-mix(in srgb, var(--app-primary-600) 18%, var(--app-surface) 82%);
}

body[data-view="teacher/dashboard"] .app-dashboard-shell .priority-item :is(.text-sm, .font-semibold),
body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-panel__actions :is(a, button) {
    font-size: var(--app-text-sm) !important;
}

@media (max-width: 768px) {
    body[data-view="teacher/dashboard"] .app-shell-toolbar__title {
        font-size: var(--app-text-lg) !important;
    }

    body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-panel__title {
        font-size: var(--app-text-xl);
    }

    body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-panel__summary {
        font-size: var(--app-text-sm);
    }

    body[data-view="teacher/dashboard"] .app-dashboard-shell .app-kpi-card__value,
    body[data-view="teacher/dashboard"] .app-dashboard-shell .text-2xl,
    body[data-view="teacher/dashboard"] .app-dashboard-shell .text-3xl,
    body[data-view="teacher/dashboard"] .app-dashboard-shell .app-overview-metric__value,
    body[data-view="teacher/dashboard"] .app-dashboard-shell .performance-pill__value {
        font-size: var(--app-text-lg) !important;
    }

    body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-section-title {
        font-size: var(--app-text-base);
    }
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-progress {
    border-color: color-mix(in srgb, var(--app-primary-400) 36%, rgba(148, 163, 184, 0.36) 64%);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-primary-500) 20%, rgba(15, 23, 42, 0.96) 80%),
        color-mix(in srgb, var(--app-primary-700) 14%, rgba(15, 23, 42, 0.96) 86%)
    );
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .dash-progress__fill {
    box-shadow: 0 0 0 1px color-mix(in srgb, #93c5fd 35%, transparent), 0 8px 16px -12px color-mix(in srgb, #2563eb 75%, transparent);
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .priority-item .dash-link--inline {
    color: #dbeafe;
    border-color: color-mix(in srgb, #60a5fa 42%, rgba(148, 163, 184, 0.38) 58%);
    background: color-mix(in srgb, #1d4ed8 26%, rgba(15, 23, 42, 0.92) 74%);
}

html.dark body[data-view="teacher/dashboard"] .app-dashboard-shell .priority-item .dash-link--inline:hover {
    color: #eff6ff;
    border-color: color-mix(in srgb, #93c5fd 58%, rgba(148, 163, 184, 0.28) 42%);
    background: color-mix(in srgb, #2563eb 34%, rgba(15, 23, 42, 0.92) 66%);
}

body[data-view="teacher/course_insights"] .teacher-hub-main {
    width: min(100%, 98rem);
}

body[data-view="teacher/course_insights"] .teacher-hub-main > section {
    border-radius: 1.18rem !important;
}

body[data-view="teacher/course_insights"] .course-insight-toggle-indicator .course-insight-toggle-label--open {
    display: none;
}

body[data-view="teacher/course_insights"] details[open] .course-insight-toggle-indicator .course-insight-toggle-label--closed {
    display: none;
}

body[data-view="teacher/course_insights"] details[open] .course-insight-toggle-indicator .course-insight-toggle-label--open {
    display: inline;
}

body[data-view="teacher/course_insights"] .course-insight-stat {
    --course-insight-accent: var(--app-primary-600);
    position: relative;
    overflow: hidden;
}

body[data-view="teacher/course_insights"] .course-insight-stat--enrolled { --course-insight-accent: #2563eb; }
body[data-view="teacher/course_insights"] .course-insight-stat--sales { --course-insight-accent: #7c3aed; }
body[data-view="teacher/course_insights"] .course-insight-stat--gross { --course-insight-accent: #0284c7; }
body[data-view="teacher/course_insights"] .course-insight-stat--creation { --course-insight-accent: #c2410c; }
body[data-view="teacher/course_insights"] .course-insight-stat--referral { --course-insight-accent: #8b5cf6; }
body[data-view="teacher/course_insights"] .course-insight-stat--net { --course-insight-accent: #1d4ed8; }
body[data-view="teacher/course_insights"] .course-insight-stat--payment { --course-insight-accent: #d97706; }

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat {
    border-color: color-mix(in srgb, var(--course-insight-accent) 30%, #cbd5e1 70%) !important;
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--course-insight-accent) 10%, #ffffff 90%) 0%,
            #ffffff 58%,
            color-mix(in srgb, var(--course-insight-accent) 4%, #f8fafc 96%) 100%
        ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 10px 18px -16px color-mix(in srgb, var(--course-insight-accent) 46%, transparent) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.2rem;
    background: linear-gradient(90deg, var(--course-insight-accent), color-mix(in srgb, var(--course-insight-accent) 18%, transparent));
    opacity: 0.9;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat > p:first-child {
    color: color-mix(in srgb, var(--course-insight-accent) 38%, #334155 62%) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat .text-xl,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat .text-slate-900 {
    color: #0f172a !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat .text-xs {
    color: #475569 !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stats-grid > .course-insight-stat .font-semibold {
    color: #0f172a !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_insights"] .course-insight-stat--payment :is(.app-status-pill--active, .app-status-pill--pending) {
    font-weight: 700;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main {
    width: min(100%, 99rem);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main > :is(section, form, article) {
    border-radius: 1.14rem !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main [class*="grid"][class*="xl:grid-cols"] {
    gap: 1rem !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main :is([data-enterprise-offer-root], [data-referral-panel]) {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    min-width: 0;
    border-radius: 1rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface-strong) 92%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, var(--app-surface) 98%)
    );
    box-shadow: var(--app-shadow-sm);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-hint {
    margin-top: 0.15rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-chip {
    align-self: flex-start;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 40%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, transparent);
    padding: 0.2rem 0.6rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-count {
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 35%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, transparent);
    padding: 0.2rem 0.6rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-count.is-full {
    border-color: color-mix(in srgb, #ef4444 50%, rgba(148, 163, 184, 0.2));
    background: color-mix(in srgb, #ef4444 16%, transparent);
    color: #b91c1c;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-quick {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-quick .course-list-add-btn {
    white-space: nowrap;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-quick-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface);
    color: var(--app-text);
    font-size: var(--app-text-sm);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-quick-input::placeholder {
    color: var(--app-muted);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-quick-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 65%, rgba(148, 163, 184, 0.2));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 15%, transparent);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-row,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 0.85rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-surface) 92%, rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
    overflow: hidden;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-row::before,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row]::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 45%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, transparent);
    flex: 0 0 auto;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-row:hover,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row]:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 38%, rgba(148, 163, 184, 0.3));
    box-shadow: 0 12px 18px -18px rgba(15, 23, 42, 0.35);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-handle,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] > button {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, rgba(148, 163, 184, 0.4));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, transparent);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 60%, var(--app-text) 40%);
    font-weight: 700;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-handle,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] > button:first-child {
    cursor: grab;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-remove,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] > button:last-child {
    border-color: color-mix(in srgb, #f87171 55%, rgba(148, 163, 184, 0.3));
    background: color-mix(in srgb, #f87171 16%, transparent);
    color: #fca5a5;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-remove:hover,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] > button:last-child:hover {
    border-color: color-mix(in srgb, #fb7185 70%, rgba(148, 163, 184, 0.2));
    background: color-mix(in srgb, #fb7185 26%, transparent);
    color: #fecdd3;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-input,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] input[data-list-input] {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0.45rem 0.55rem !important;
    font-size: var(--app-text-sm);
    color: var(--app-text);
    min-width: 0;
    flex: 1 1 auto;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-input:focus,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] input[data-list-input]:focus {
    outline: none;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) [data-list-row] input[data-list-input]::placeholder {
    color: var(--app-muted);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, #22c55e 55%, rgba(148, 163, 184, 0.35));
    background: color-mix(in srgb, #22c55e 22%, transparent);
    color: #14532d;
    font-size: var(--app-text-xs);
    font-weight: 600;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-add-btn:hover {
    border-color: color-mix(in srgb, #22c55e 72%, rgba(148, 163, 184, 0.2));
    background: color-mix(in srgb, #22c55e 32%, transparent);
    color: #052e16;
}

html.dark body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-add-btn,
html[data-theme="dark"] body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-add-btn {
    border-color: color-mix(in srgb, #22c55e 65%, rgba(148, 163, 184, 0.25));
    background: color-mix(in srgb, #22c55e 18%, rgba(15, 23, 42, 0.6));
    color: #bbf7d0;
}

html.dark body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-add-btn:hover,
html[data-theme="dark"] body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-add-btn:hover {
    border-color: color-mix(in srgb, #22c55e 80%, rgba(148, 163, 184, 0.2));
    background: color-mix(in srgb, #22c55e 28%, rgba(15, 23, 42, 0.6));
    color: #dcfce7;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-list-note {
    font-size: var(--app-text-2xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 9%, var(--app-surface-strong) 91%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface) 97%)
    );
    box-shadow: var(--app-shadow-sm);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-label {
    font-size: var(--app-text-2xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-title {
    font-size: var(--app-text-base);
    font-weight: 700;
    color: var(--app-text);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-count {
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-track {
    height: 0.32rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, rgba(148, 163, 184, 0.3));
    overflow: hidden;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-progress {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-shell-accent, var(--app-primary)), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 50%, #22d3ee));
    transition: width var(--app-transition);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-list {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, rgba(148, 163, 184, 0.4));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    color: var(--app-text);
    text-align: left;
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast), transform var(--app-transition-fast);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-item:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 44%, rgba(148, 163, 184, 0.3));
    box-shadow: 0 12px 18px -18px rgba(15, 23, 42, 0.35);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-item.is-active {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 60%, rgba(148, 163, 184, 0.2));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-surface) 84%);
    box-shadow: 0 16px 22px -18px rgba(15, 23, 42, 0.45);
    transform: translateY(-1px);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-item.is-done {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 38%, rgba(148, 163, 184, 0.25));
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, var(--app-text) 30%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-num {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--app-text-xs);
    font-weight: 700;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, transparent);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 75%, var(--app-text) 25%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-item.is-active .course-stepper-num {
    background: linear-gradient(135deg, var(--app-shell-accent, var(--app-primary)), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 55%, #22d3ee));
    color: #ffffff;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--app-text-sm);
    font-weight: 600;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-stepper-sub {
    font-size: var(--app-text-xs);
    font-weight: 500;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.2rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, rgba(148, 163, 184, 0.3));
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.8rem;
    border: 1px solid var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    font-size: var(--app-text-xs);
    font-weight: 600;
    box-shadow: var(--app-button-primary-shadow);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-btn:hover {
    border-color: var(--app-button-primary-border);
    background: var(--app-button-primary-bg-hover);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-icon--prev {
    transform: rotate(180deg);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main .app-icon {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-text) 18%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-btn .app-icon {
    color: currentColor;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-step-hint {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface-strong);
    color: var(--app-text);
    font-size: var(--app-text-sm);
    font-weight: 600;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn .app-icon {
    color: currentColor;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn--primary {
    border: 1px solid var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-button-primary-shadow);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn--primary:hover {
    background: var(--app-button-primary-bg-hover);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn--secondary {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 35%, rgba(148, 163, 184, 0.35));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface) 92%);
    color: var(--app-text);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn--secondary:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 55%, rgba(148, 163, 184, 0.3));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn--ghost {
    border-color: var(--app-shell-border, var(--app-border));
    background: transparent;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-final-btn--ghost:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 35%, rgba(148, 163, 184, 0.35));
    background: color-mix(in srgb, var(--app-surface) 88%, rgba(148, 163, 184, 0.12));
    color: var(--app-text);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-meta {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.2rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, rgba(148, 163, 184, 0.35));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-banner {
    border-color: color-mix(in srgb, #ef4444 75%, rgba(148, 163, 184, 0.25)) !important;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #ef4444 22%, rgba(255, 255, 255, 0.92)),
        color-mix(in srgb, #dc2626 10%, rgba(255, 255, 255, 0.96))
    ) !important;
    color: var(--app-text) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-banner p {
    color: var(--app-text-secondary) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-btn {
    border-color: color-mix(in srgb, #ef4444 70%, rgba(148, 163, 184, 0.2)) !important;
    background: color-mix(in srgb, #ef4444 28%, transparent) !important;
    color: color-mix(in srgb, #7f1d1d 78%, var(--app-text) 22%) !important;
    font-weight: 600;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-btn:hover {
    border-color: color-mix(in srgb, #ef4444 85%, rgba(148, 163, 184, 0.1)) !important;
    background: color-mix(in srgb, #ef4444 38%, transparent) !important;
}

html.dark body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-banner,
html[data-theme="dark"] body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-banner {
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #ef4444 32%, rgba(15, 23, 42, 0.95)),
        color-mix(in srgb, #dc2626 18%, rgba(15, 23, 42, 0.92))
    ) !important;
    color: #f8fafc !important;
}

html.dark body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-banner p,
html[data-theme="dark"] body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-banner p {
    color: #e2e8f0 !important;
}

html.dark body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-btn,
html[data-theme="dark"] body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-restore-btn {
    color: #ffffff !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .course-section-step {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 40%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-card {
    position: static;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-body {
    display: grid;
    gap: 0.9rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-desc {
    white-space: pre-line;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-xs);
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, rgba(148, 163, 184, 0.4));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface) 92%);
    color: var(--app-text);
    font-weight: 600;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-section {
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, rgba(148, 163, 184, 0.3));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%);
    padding: 0.65rem 0.75rem;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-list {
    margin-top: 0.5rem;
    padding-left: 1.05rem;
    list-style: disc;
    display: grid;
    gap: 0.35rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .student-preview-list li::marker {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, transparent);
}

body[data-view="teacher/course_edit"] .course-create-hint.hidden,
body[data-view="teacher/course_edit"] .course-create-hint:empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-width: 0 !important;
}

body[data-view="teacher/course_edit"] .course-content-live-preview .student-preview-list {
    margin-top: 0.65rem;
    padding-left: 0;
    list-style: none;
    gap: 0.55rem;
}

body[data-view="teacher/course_edit"] .course-content-live-preview .student-preview-list li {
    padding: 0.68rem 0.78rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-border) 84%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
    color: var(--app-text-secondary);
}

body[data-view="teacher/reviews"] {
    --reviews-filter-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 33%, var(--teacher-page-soft-border, var(--app-border)) 67%);
    --reviews-filter-surface: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--teacher-page-surface, var(--app-surface)) 94%), var(--teacher-page-soft-surface, var(--app-surface)));
}

body[data-view="teacher/reviews"] .teacher-hub-main {
    width: min(100%, 92rem);
}

body[data-view="teacher/reviews"] .teacher-hub-main > section {
    border-radius: 1.16rem !important;
}

body[data-view="teacher/reviews"] [data-reviews-kpis] .reviews-kpi {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--app-kpi-accent) 36%, var(--app-shell-border, var(--app-border)) 64%) !important;
    background:
        radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--app-kpi-accent) 18%, transparent), transparent 58%),
        linear-gradient(180deg, color-mix(in srgb, var(--app-kpi-accent) 8%, var(--teacher-page-surface, var(--app-surface)) 92%), var(--teacher-page-surface, var(--app-surface)));
    box-shadow: 0 14px 24px -22px color-mix(in srgb, var(--app-kpi-accent) 48%, transparent), var(--app-shadow-soft) !important;
}

body[data-view="teacher/reviews"] [data-reviews-kpis] .reviews-kpi::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0.2rem;
    background: linear-gradient(90deg, var(--app-kpi-accent), color-mix(in srgb, var(--app-kpi-accent) 10%, transparent));
    opacity: 0.9;
}

body[data-view="teacher/reviews"] [data-reviews-kpis] .reviews-kpi:hover {
    border-color: color-mix(in srgb, var(--app-kpi-accent) 56%, var(--app-shell-border-strong, var(--app-border-strong)) 44%) !important;
    transform: translateY(-1px);
}

body[data-view="teacher/reviews"] .reviews-filter {
    border-color: var(--reviews-filter-border) !important;
    background: var(--reviews-filter-surface) !important;
}

body[data-view="teacher/reviews"] .reviews-filter-state {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 38%, var(--app-border) 62%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 62%, #0f172a 38%);
}

body[data-view="teacher/reviews"] .reviews-filter-toggle {
    min-height: var(--app-control-height-sm);
}

body[data-view="teacher/reviews"] .reviews-filter-toggle.reviews-filter-toggle--active {
    border-color: var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
}

body[data-view="teacher/reviews"] [data-reviews-filter-panel][hidden] {
    display: none !important;
}

body[data-view="teacher/reviews"] .reviews-filter-panel {
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, var(--teacher-page-soft-border, var(--app-border)) 72%);
    border-radius: 1rem;
    padding: 0.82rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--teacher-page-soft-surface, var(--app-surface)) 96%);
}

body[data-view="teacher/reviews"] .reviews-filter-dynamic {
    align-items: end;
}

body[data-view="teacher/reviews"] .reviews-filter-field.hidden {
    display: none !important;
}

body[data-view="teacher/reviews"] .reviews-filter-actions :is(.app-btn-primary, .dash-btn) {
    min-height: var(--app-control-height-sm);
}

body[data-view="teacher/reviews"] .reviews-filter-query {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 9%, var(--app-surface) 91%);
    color: var(--app-text-secondary);
}

body[data-view="teacher/reviews"] .reviews-course-card {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/reviews"] .reviews-course-card:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    transform: translateY(-1px);
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/reviews"] .teacher-hub-main section article.rounded-2xl.border {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast);
}

body[data-view="teacher/reviews"] .teacher-hub-main section article.rounded-2xl.border:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    transform: translateY(-1px);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/reviews"] .reviews-course-card .mt-1.text-xs.text-slate-500 {
    color: #334155 !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/reviews"] [data-feedback-inline="1"] {
    font-weight: 600;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/reviews"] [data-feedback-inline="1"].border-slate-200 {
    border-color: #bfdbfe !important;
    background: #f8fafc !important;
    color: #0f172a !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/reviews"] [data-feedback-inline="1"].border-emerald-200 {
    border-color: #86efac !important;
    background: #ecfdf5 !important;
    color: #065f46 !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/reviews"] [data-feedback-inline="1"].border-amber-200 {
    border-color: #fcd34d !important;
    background: #fffbeb !important;
    color: #92400e !important;
}

html.dark body[data-view="teacher/reviews"] .reviews-filter {
    background: linear-gradient(180deg, rgba(12, 29, 54, 0.92), rgba(9, 22, 42, 0.92)) !important;
}

html.dark body[data-view="teacher/reviews"] .reviews-filter-state {
    color: #dbeafe;
}

body[data-view="teacher/exam_preview"] .teacher-hub-main,
body[data-view="teacher/exams_manage"] .teacher-hub-main {
    width: min(100%, 98rem);
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main > section {
    border-radius: 1.18rem !important;
    box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.3);
}

html.dark body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main > section {
    box-shadow: 0 18px 32px -28px rgba(2, 6, 23, 0.82);
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main > section:first-child {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%),
        var(--app-surface)
    ) !important;
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main > section:first-child :is(a, button, span)[class*="rounded-xl"] {
    min-height: var(--app-control-height-md);
    border-radius: 999px !important;
    padding: var(--app-control-padding-md) !important;
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main .app-kpi-card {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast);
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main .app-kpi-card:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    transform: translateY(-1px);
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main details {
    overflow: hidden;
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main :is(article, details).rounded-2xl.border {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main :is(article, details).rounded-2xl.border:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.24);
}

body:is([data-view="teacher/withdrawals"], [data-view="teacher/referrals"], [data-view="teacher/meetings"]) .teacher-hub-main > :is(section, article) {
    border-radius: 1.16rem !important;
}

body:is([data-view="teacher/withdrawals"], [data-view="teacher/referrals"], [data-view="teacher/meetings"]) .teacher-hub-main > section:first-child {
    border-radius: 1.22rem !important;
}

body:is([data-view="teacher/withdrawals"], [data-view="teacher/referrals"], [data-view="teacher/meetings"]) .teacher-hub-main :is(button, a)[class*="rounded-lg"] {
    min-height: var(--app-control-height-sm);
}

body[data-view="teacher/meetings"] .teacher-hub-main details.group {
    border-radius: 1rem !important;
}

body[data-view="teacher/meetings"] .teacher-hub-main details.group > summary {
    border-radius: 0.82rem;
}

body[data-view="teacher/apply"] {
    background:
        radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, transparent), transparent 28%),
        radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, transparent), transparent 25%),
        var(--app-bg) !important;
}

body[data-view="teacher/apply"] > .relative.z-10 {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    box-shadow: 0 20px 34px -28px rgba(15, 23, 42, 0.26) !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .teacher-hub-main {
    width: min(100%, 88rem);
    gap: 1rem !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) {
    background: var(--app-bg) !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-main] {
    display: grid;
    gap: 1rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-list-section] {
    scroll-margin-top: 5.6rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-form] {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: var(--app-radius-md);
    background: var(--teacher-page-soft-surface, var(--app-surface));
    padding: 0.9rem;
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) details.group {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: var(--app-radius-lg);
    background: var(--teacher-page-soft-surface, var(--app-surface));
    padding: 0.82rem 0.9rem;
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) details.group[open] {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is(#promo-delete-modal [data-modal-panel], #promo-target-modal [data-target-panel]) {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-surface, var(--app-surface)) !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-main] > :is([data-promo-hero], [data-promo-period-bar], [data-coupon-analytics], [data-promo-create-section]) {
    border-radius: 1.2rem !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] {
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-badges {
    row-gap: 0.35rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-actions {
    align-items: center;
    justify-content: flex-end;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-actions :is(a, button) {
    min-height: var(--app-control-height-sm);
    padding: 0.45rem 0.9rem;
    font-size: var(--app-text-sm);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] h1 {
    font-size: clamp(var(--app-text-2xl), 1.8vw, var(--app-text-3xl));
    line-height: 1.08;
    letter-spacing: -0.01em;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] > div > div:first-child > p {
    max-width: 70ch;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-bar] {
    top: 0.4rem !important;
    z-index: 22;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-soft-surface, var(--app-surface)) !important;
    box-shadow: var(--app-shadow-soft);
    padding: 0.72rem 0.78rem !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] {
    display: grid;
    gap: 0.58rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] > .flex {
    row-gap: 0.42rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .period-btn {
    min-width: 2.85rem;
    min-height: 2rem;
    padding: 0.38rem 0.74rem !important;
    border-radius: 9999px !important;
    font-size: var(--app-text-sm) !important;
    font-weight: 650;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .ml-auto {
    font-size: var(--app-text-xs);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .grid {
    gap: 0.55rem;
    grid-template-columns: minmax(10.5rem, 13rem) minmax(10.5rem, 13rem) auto;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] label {
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary) !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] input[type="date"] {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm) !important;
    border-radius: 0.85rem !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] button[name="period"][value="custom"] {
    min-height: var(--app-control-height-sm) !important;
    padding: var(--app-control-padding-sm) !important;
    border-radius: 0.85rem !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-coupon-kpi-grid] {
    gap: 0.7rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-coupon-kpi-card] {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface-strong) 95%),
        var(--app-surface)
    );
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-coupon-kpi-card]:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    box-shadow: 0 10px 16px -14px rgba(15, 23, 42, 0.2);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-coupon-insight-card] {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-surface, var(--app-surface));
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-table-wrap] {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    box-shadow: var(--app-shadow-soft);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-table-wrap] table {
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-table-wrap] th {
    letter-spacing: 0.08em;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-table-wrap] td {
    line-height: 1.35;
    vertical-align: top;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-table-wrap] tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, transparent);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-list-section] > .flex {
    margin-top: 0.2rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-list-filters-wrap] {
    border-radius: 1.15rem !important;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    padding: 1rem 1.05rem !important;
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-unified-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    align-items: start;
    gap: 0.9rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-unified-toolbar > :last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-list-filters] {
    align-items: center;
    justify-content: flex-end;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-filter-btn {
    min-height: var(--app-control-height-sm);
    padding-left: 0.78rem !important;
    padding-right: 0.78rem !important;
    font-size: var(--app-text-sm) !important;
    line-height: 1.2;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-filter-btn.is-active {
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-section-header {
    margin-top: 0.2rem;
    padding-inline: 0.05rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-section-actions .app-btn-primary {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm) !important;
    white-space: nowrap;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-empty {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card] {
    border-radius: 1.1rem !important;
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
    content-visibility: auto;
    contain-intrinsic-size: 420px;
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card]:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.28);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-head] {
    gap: 1rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-head] > div:first-child {
    max-width: min(100%, 48rem);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-head] > .text-right {
    min-width: 11rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-actions] {
    gap: 0.6rem !important;
    align-items: stretch;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-actions] > [data-promo-edit-details] {
    flex: 1 1 24rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-actions] > [data-promo-delete-form] {
    margin-left: auto;
    display: inline-flex;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-actions] :is(summary, button) {
    min-height: var(--app-control-height-sm);
    align-items: center;
    justify-content: center;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-create-section] {
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    box-shadow: var(--app-shadow-soft);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-create-section] [data-create-trigger] {
    min-height: 2.26rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-create-modal] [data-promo-form] {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .app-delete-confirm-btn {
    border: 1px solid #be123c !important;
    background: #be123c !important;
    color: #ffffff !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .app-delete-confirm-btn:hover {
    border-color: #9f1239 !important;
    background: #9f1239 !important;
    color: #ffffff !important;
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .app-delete-confirm-btn {
    border-color: #fb7185 !important;
    background: #e11d48 !important;
    color: #ffffff !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is([data-promo-delete-modal], [data-promo-target-modal], [data-promo-create-modal]) :is([data-modal-panel], [data-target-panel], [data-create-panel]) {
    border-radius: 1.2rem;
    width: min(100%, 56rem);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is([data-modal-backdrop], [data-target-backdrop], [data-create-backdrop]) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.58) !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is([data-promo-delete-modal], [data-promo-target-modal], [data-promo-create-modal]):not(.hidden) :is([data-modal-backdrop], [data-target-backdrop], [data-create-backdrop]) {
    opacity: 1 !important;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is([data-promo-form] label, [data-promo-form] .text-xs) {
    color: var(--app-text-secondary);
}

html:not(.dark):not([data-theme="dark"]) body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card] :is(.text-slate-500, .text-slate-600) {
    color: #334155 !important;
}

html:not(.dark):not([data-theme="dark"]) body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card] :is(.text-blue-600, .text-blue-700) {
    color: #1d4ed8 !important;
}

html:not(.dark):not([data-theme="dark"]) body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card] .text-xl {
    color: #1e40af !important;
}

@media (prefers-reduced-motion: reduce) {
    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is(
        [data-promo-card],
        [data-coupon-kpi-card],
        [data-modal-panel],
        [data-target-panel],
        [data-create-panel],
        [data-modal-backdrop],
        [data-target-backdrop],
        [data-create-backdrop]
    ) {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .teacher-workflow-main {
    width: min(100%, 98rem);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-shell {
    gap: 1.5rem;
    max-width: min(100%, 98rem);
    width: 100%;
    overflow-x: hidden;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 1fr;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-layout {
    display: grid;
    gap: 1.6rem;
    min-width: 0;
    overflow-x: hidden;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) :is(.course-content-main, .course-content-side) {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
    align-self: start;
    max-width: 100%;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-main {
    order: 1;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-side {
    order: 2;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-layout > * {
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics {
    align-content: start;
    align-self: start;
    grid-auto-rows: min-content;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-checklist {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scroll-snap-type: x proximity;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-checklist > * {
    scroll-snap-align: start;
}

@media (min-width: 1280px) {
    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.72fr) clamp(18.5rem, 22vw, 22rem);
        align-items: start;
        column-gap: 1.6rem;
    }

    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-main {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-side {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        max-width: none;
    }
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-card {
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-panel-surface);
    box-shadow: var(--app-shadow);
    border-radius: var(--app-radius-lg);
    padding: 1.1rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-card__title {
    margin: 0;
    font-size: var(--app-text-base);
    font-weight: 700;
    color: var(--app-text);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-card__subtitle {
    margin: 0.15rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-builder {
    display: grid;
    gap: 1rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) :is(.course-content-summary, .course-content-actions, .course-content-plan, .course-content-audit, .course-content-live-preview) {
    display: grid;
    gap: 0.95rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-live-preview {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-media {
    overflow: hidden;
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-surface) 86%), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%));
    max-width: 100%;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-cover {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 8.75rem;
    object-fit: cover;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-placeholder {
    min-height: 9.5rem;
    display: grid;
    place-items: center;
    gap: 0.55rem;
    padding: 1rem;
    text-align: center;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-body {
    display: grid;
    gap: 0.95rem;
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-heading {
    margin: 0;
    font-size: var(--app-text-base);
    font-weight: 700;
    color: var(--app-text);
    overflow-wrap: anywhere;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-description {
    margin: 0.35rem 0 0;
    color: var(--app-muted);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-pill {
    scroll-snap-align: start;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-pill--full {
    grid-column: 1 / -1;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--app-border) 82%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface) 93%);
    color: var(--app-text-secondary);
    font-size: var(--app-text-2xs);
    font-weight: 600;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-pill strong {
    color: var(--app-text);
    font-size: var(--app-text-xs);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-section,
body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-note {
    border-radius: var(--app-radius-md);
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-border) 84%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
    padding: 0.8rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-section__label {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-badge {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 20%, var(--app-border) 80%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%);
    color: var(--app-text);
    font-size: var(--app-text-2xs);
    font-weight: 700;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-outline {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-item {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface);
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-item.is-draft {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--app-warning) 48%, var(--app-border) 52%);
    background: color-mix(in srgb, var(--app-warning) 8%, var(--app-surface) 92%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-item--empty {
    color: var(--app-muted);
    text-align: center;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-item__title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
    overflow-wrap: anywhere;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-item__description {
    margin: 0.2rem 0 0;
    color: var(--app-muted);
    line-height: 1.45;
    font-size: var(--app-text-xs);
    overflow-wrap: anywhere;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-preview-note p:last-child {
    margin: 0.4rem 0 0;
    color: var(--app-text);
    line-height: 1.5;
}

@media (min-width: 1280px) {
    body[data-view="teacher/course_content"] .course-content-live-preview {
        width: 100%;
        max-width: 18.5rem;
        align-self: center;
        margin-inline: auto;
    }
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-hero.app-overview-panel {
    gap: 1rem;
    border-radius: var(--app-radius-xl);
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 20rem);
    align-items: start;
    column-gap: 1.4rem;
    padding: 1.05rem 1.15rem;
}

body[data-view="teacher/course_content"] .course-content-hero--single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-hero.app-overview-panel {
        grid-template-columns: 1fr;
    }

    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics {
        margin-top: 0;
        padding-left: 0;
        transform: none;
    }

    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics::before {
        display: none;
    }
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics {
    place-self: start end;
    position: relative;
    align-content: start;
    margin-top: 0;
    padding-left: 1rem;
    transform: translateY(-1.6rem);
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%);
    opacity: 0.7;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics .app-overview-metric {
    padding: 0.35rem 0.7rem 0.55rem;
    border-radius: 0.9rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics .app-overview-metric__label {
    margin-top: -0.05rem;
    font-size: var(--app-text-2xs);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics .app-overview-metric__value {
    font-size: var(--app-text-sm);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-metrics .app-overview-metric__meta {
    font-size: var(--app-text-2xs);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-hero__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-hero .app-overview-panel__summary {
    margin-top: 0.45rem;
    font-size: var(--app-text-sm);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) :is(.app-overview-panel__title, .app-overview-panel__summary, .course-content-card__title, .course-content-card__subtitle, .app-overview-metric, .course-content-check-item, .course-content-summary__stats p) {
    overflow-wrap: anywhere;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-progress {
    margin-top: 0.9rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-progress__meta {
    margin: 0.35rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-hero .dash-progress,
body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-summary .dash-progress {
    display: none;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    border-radius: 999px;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%);
    color: var(--app-text-secondary);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-pill--success {
    border-color: color-mix(in srgb, var(--app-success) 50%, var(--app-border) 50%);
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-success) 80%, var(--app-text) 20%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-pill--warning {
    border-color: color-mix(in srgb, var(--app-warning) 50%, var(--app-border) 50%);
    background: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-warning) 80%, var(--app-text) 20%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-pill--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 48%, var(--app-border) 52%);
    background: color-mix(in srgb, var(--app-tone-info) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-tone-info) 82%, var(--app-text) 18%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-surface) 86%);
    color: var(--app-shell-accent, var(--app-primary));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-icon > svg {
    width: 1.35rem;
    height: 1.35rem;
}

html.dark body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-icon {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, rgba(15, 23, 42, 0.92) 78%);
    color: #dbeafe;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--inline {
    align-items: center;
    justify-content: space-between;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-surface) 84%);
    color: var(--app-shell-accent, var(--app-primary));
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert__icon > svg {
    width: 1.1rem;
    height: 1.1rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert__title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert__body p {
    margin: 0.25rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--success {
    border-color: color-mix(in srgb, var(--app-success) 55%, var(--app-border) 45%);
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface) 88%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--success .course-content-alert__icon {
    background: color-mix(in srgb, var(--app-success) 20%, var(--app-surface) 80%);
    color: var(--app-success);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--danger {
    border-color: color-mix(in srgb, var(--app-danger) 55%, var(--app-border) 45%);
    background: color-mix(in srgb, var(--app-danger) 10%, var(--app-surface) 90%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--danger .course-content-alert__icon {
    background: color-mix(in srgb, var(--app-danger) 18%, var(--app-surface) 82%);
    color: var(--app-danger);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--warning {
    border-color: color-mix(in srgb, var(--app-warning) 55%, var(--app-border) 45%);
    background: color-mix(in srgb, var(--app-warning) 12%, var(--app-surface) 88%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--warning .course-content-alert__icon {
    background: color-mix(in srgb, var(--app-warning) 22%, var(--app-surface) 78%);
    color: var(--app-warning);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--info {
    border-color: color-mix(in srgb, var(--app-tone-info) 55%, var(--app-border) 45%);
    background: color-mix(in srgb, var(--app-tone-info) 10%, var(--app-surface) 90%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-alert--info .course-content-alert__icon {
    background: color-mix(in srgb, var(--app-tone-info) 18%, var(--app-surface) 82%);
    color: var(--app-tone-info);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-check-item {
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
    border-radius: var(--app-radius-md);
    padding: 0.6rem;
    font-size: var(--app-text-2xs);
    min-width: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-check-item.is-done {
    border-color: color-mix(in srgb, var(--app-success) 52%, var(--app-border) 48%);
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface) 88%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-check-item .font-semibold {
    font-size: var(--app-text-xs);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-summary__progress {
    margin-bottom: 0.85rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-summary__stats {
    display: grid;
    gap: 0.35rem 1rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-action,
body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm);
    border-radius: var(--app-radius-md);
    font-size: var(--app-text-sm);
    font-weight: 600;
    text-decoration: none;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-action--disabled {
    border: 1px dashed var(--app-border);
    background: var(--app-surface);
    color: var(--app-muted);
    cursor: not-allowed;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-banner {
    margin-top: 0.9rem;
    border-radius: var(--app-radius-md);
    border: 1px solid color-mix(in srgb, var(--app-success) 62%, var(--app-border) 38%);
    background: color-mix(in srgb, var(--app-success) 20%, var(--app-surface) 80%);
    padding: 0.85rem 1rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: color-mix(in srgb, var(--app-success) 80%, var(--app-text) 20%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-text {
    margin: 0.25rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--app-control-height-md);
    min-width: 8.75rem;
    padding: var(--app-control-padding-md);
    border-radius: 999px !important;
    font-size: var(--app-text-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-btn .app-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-btn--ghost {
    border-color: color-mix(in srgb, var(--app-border-strong) 72%, var(--app-shell-border, var(--app-border)) 28%) !important;
    background: color-mix(in srgb, var(--app-surface) 92%, var(--app-primary) 8%) !important;
    color: color-mix(in srgb, var(--app-text) 86%, var(--app-primary) 14%) !important;
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.42) !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-btn--ghost:hover {
    border-color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border-strong) 70%) !important;
    background: color-mix(in srgb, var(--app-surface) 84%, var(--app-primary) 16%) !important;
    color: color-mix(in srgb, var(--app-text) 80%, var(--app-primary) 20%) !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-autosave-status {
    margin-top: 0.6rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) #tabs-container {
    position: static;
    top: auto;
    z-index: auto;
    padding: 0.55rem;
    border-radius: var(--app-radius-lg);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-panel-surface);
    box-shadow: var(--app-shadow-sm);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-tabs {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.course-content-tab {
    min-height: var(--app-tab-height);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: var(--app-tab-padding);
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: var(--app-text-sm);
    font-weight: 600;
    transition: border-color var(--app-transition-fast), color var(--app-transition-fast), background var(--app-transition-fast), transform var(--app-transition-fast);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.course-content-tab:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    color: var(--app-text);
    transform: translateY(-1px);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.course-content-tab.border-emerald-500 {
    color: #ffffff !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-surface) 22%);
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, var(--app-border) 30%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.course-content-tab.border-emerald-500 .course-content-tab__label {
    color: #ffffff;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-tab__icon {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-surface) 86%);
    color: var(--app-shell-accent, var(--app-primary));
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-tab__icon > svg {
    width: 1rem;
    height: 1rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-tab__count {
    margin-left: auto;
    padding: var(--app-badge-padding);
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.border-emerald-500 .course-content-tab__count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .tab-button.border-emerald-500 .course-content-tab__icon {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) [data-tab-panel] {
    border: none;
    background: transparent;
    padding: 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-panel {
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    padding: 1rem;
    box-shadow: var(--app-shadow-sm);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-panel__intro {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-panel__title {
    font-size: var(--app-text-base);
    font-weight: 700;
    color: var(--app-text);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-panel__subtitle {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    margin: 0.15rem 0 0;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-context-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--app-radius-md);
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--app-border) 82%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-context-note__label {
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: var(--app-text-secondary);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-context-note__value {
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-exam-card {
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 35%, var(--app-border) 65%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    border-radius: var(--app-radius-md);
    padding: 0.95rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-exam-item {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-surface) !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-form :is(input, textarea, select) {
    border: 1px solid var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-radius: var(--app-radius-md) !important;
    padding: 0.55rem 0.7rem !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-form :is(input, textarea, select):focus {
    outline: none !important;
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 0 0 3px var(--app-ring) !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-input {
    border: 1px solid var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-surface) !important;
    color: var(--app-text) !important;
    border-radius: var(--app-radius-md) !important;
    padding: 0.55rem 0.7rem !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) #youtube-preview-wrap,
body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) #doc-upload-progress {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-surface) !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-details::-webkit-details-marker {
    display: none;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-details__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-details__toggle {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-guide-grid {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-guide-card {
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: var(--app-radius-md);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
    padding: 0.75rem;
    font-size: var(--app-text-xs);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) :is(#content-confirm-modal, #edit-chapter-modal, #edit-lesson-modal, #edit-doc-modal, #edit-meeting-modal, #add-lesson-modal, #add-doc-modal, #add-meeting-modal) > div {
    background: var(--app-panel-surface) !important;
    border-color: var(--app-shell-border, var(--app-border)) !important;
    box-shadow: var(--app-shadow-md) !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-plan-bar {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: end;
}

@media (max-width: 900px) {
    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-plan-bar {
        grid-template-columns: 1fr;
    }
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-plan__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-plan__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-plan-order {
    display: flex;
    justify-content: flex-end;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-chapter-add {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--app-radius-md);
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 35%, var(--app-border) 65%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) [data-plan-item] {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-surface) !important;
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast);
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) [data-plan-item]:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    transform: translateY(-1px);
}

html.dark body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-banner {
    background: color-mix(in srgb, var(--app-success) 22%, rgba(15, 23, 42, 0.92) 78%);
}

html.dark body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .course-content-restore-btn {
    color: #ffffff !important;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main {
    width: min(100%, 94rem);
}

body[data-view="teacher/exams_create"] {
    --exam-accent: var(--app-shell-accent, var(--app-primary));
    --exam-accent-2: var(--exam-accent);
    --exam-card-border: var(--app-shell-border, var(--app-border));
    --exam-card-bg: var(--app-panel-surface);
    --exam-card-shadow: var(--app-shadow);
    --exam-radius-card: var(--app-radius-lg);
    --exam-radius-soft: var(--app-radius-md);
}

body[data-view="teacher/exams_create"] .exam-create-hero {
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: var(--app-radius-xl);
    background: var(--app-panel-surface);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--app-shadow);
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card, .exam-create-card, .exam-create-help-card, .exam-create-banner) {
    border-color: var(--app-shell-border, var(--app-border)) !important;
    background: var(--app-panel-surface) !important;
    border-radius: var(--app-radius-lg) !important;
    box-shadow: var(--app-shadow);
}

body[data-view="teacher/exams_create"] .exam-create-card__icon {
    border-color: color-mix(in srgb, var(--exam-accent) 26%, var(--app-border) 74%);
    background: color-mix(in srgb, var(--exam-accent) 10%, var(--app-surface) 90%);
    color: var(--exam-accent);
    border-radius: 0.8rem;
}

body[data-view="teacher/exams_create"] .exam-create-hero__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-hero__eyebrow {
    margin: 0 0 0.3rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--exam-accent) 70%, var(--app-text) 30%);
}

body[data-view="teacher/exams_create"] .exam-create-hero__title {
    margin: 0;
    font-size: clamp(var(--app-text-3xl), 2vw, calc(var(--app-text-4xl) * 1.07));
    line-height: 1.08;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-hero__subtitle {
    margin: 0.45rem 0 0;
    max-width: 44rem;
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-hero__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

body[data-view="teacher/exams_create"] .exam-create-hero__back {
    min-height: var(--app-control-height-md);
    border-radius: 999px !important;
    padding: var(--app-control-padding-md) !important;
}

body[data-view="teacher/exams_create"] .exam-create-hero__back .app-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .exam-create-hero__stats {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: 1.1rem;
}

body[data-view="teacher/exams_create"] .exam-create-stat {
    display: grid;
    gap: 0.28rem;
    padding: 0.95rem 1rem;
    border-radius: calc(var(--exam-radius-soft) + 0.1rem);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--exam-accent) 6%, var(--app-surface) 94%);
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-stat__label {
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-stat__value {
    font-size: var(--app-text-base);
    color: var(--app-text);
    overflow-wrap: anywhere;
}

body[data-view="teacher/exams_create"] .exam-create-stat__meta {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.1rem;
    background: var(--app-panel-surface);
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/exams_create"] .exam-create-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .exam-create-alert__body {
    display: grid;
    gap: 0.2rem;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-alert__title {
    margin: 0;
    font-weight: 700;
}

body[data-view="teacher/exams_create"] .exam-create-alert--success {
    border-color: color-mix(in srgb, var(--app-success) 42%, var(--app-border) 58%);
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-panel-surface) 88%);
}

body[data-view="teacher/exams_create"] .exam-create-alert--success .exam-create-alert__icon {
    background: color-mix(in srgb, var(--app-success) 16%, var(--app-surface) 84%);
    color: color-mix(in srgb, var(--app-success) 76%, var(--app-text) 24%);
}

body[data-view="teacher/exams_create"] .exam-create-alert--warning {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--app-border) 58%);
    background: color-mix(in srgb, #f59e0b 10%, var(--app-panel-surface) 90%);
}

body[data-view="teacher/exams_create"] .exam-create-alert--warning .exam-create-alert__icon {
    background: color-mix(in srgb, #f59e0b 16%, var(--app-surface) 84%);
    color: color-mix(in srgb, #b45309 80%, var(--app-text) 20%);
}

body[data-view="teacher/exams_create"] .exam-create-alert--danger {
    border-color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 42%, var(--app-border) 58%);
    background: color-mix(in srgb, var(--app-tone-danger, #ef4444) 10%, var(--app-panel-surface) 90%);
}

body[data-view="teacher/exams_create"] .exam-create-alert--danger .exam-create-alert__icon {
    background: color-mix(in srgb, var(--app-tone-danger, #ef4444) 16%, var(--app-surface) 84%);
    color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 80%, var(--app-text) 20%);
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card) {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.18rem;
    background: var(--app-panel-surface);
    padding: 1.15rem;
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/exams_create"] .exam-create-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-card__heading {
    display: grid;
    grid-auto-flow: row;
    align-items: start;
    gap: 0.22rem;
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, var(--app-border) 78%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-text) 18%);
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .exam-create-card__title {
    margin: 0;
    font-size: var(--app-text-lg);
    line-height: 1.2;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-card__kicker {
    display: block;
    margin: 0 0 0.15rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-card__subtitle {
    display: block;
    margin: 0.22rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    max-width: 74ch;
}

body[data-view="teacher/exams_create"] .exam-create-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    border-radius: 999px;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-surface) 90%, var(--app-shell-accent, var(--app-primary)) 10%);
    color: var(--app-text);
    font-size: var(--app-text-xs);
    font-weight: 700;
    white-space: nowrap;
}

body[data-view="teacher/exams_create"] .exam-create-status-pill--success {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-border) 62%);
    background: color-mix(in srgb, var(--app-success) 14%, var(--app-surface) 86%);
    color: color-mix(in srgb, var(--app-success) 80%, var(--app-text) 20%);
}

body[data-view="teacher/exams_create"] .exam-create-status-pill--info {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 36%, var(--app-border) 64%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 84%, var(--app-text) 16%);
}

body[data-view="teacher/exams_create"] .exam-create-status-pill--warning {
    border-color: color-mix(in srgb, #f59e0b 36%, var(--app-border) 64%);
    background: color-mix(in srgb, #f59e0b 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, #b45309 82%, var(--app-text) 18%);
}

body[data-view="teacher/exams_create"] .exam-create-layout {
    display: grid;
    gap: 1.25rem;
}

body[data-view="teacher/exams_create"] :is(.exam-create-main, .exam-create-side) {
    display: grid;
    gap: 1rem;
    min-width: 0;
    align-content: start;
}

body[data-view="teacher/exams_create"] .exam-create-summary-card__progress {
    display: grid;
    gap: 0.5rem;
}

body[data-view="teacher/exams_create"] .exam-create-summary-card__progress-meta {
    margin: 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-summary-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: 0.95rem;
}

body[data-view="teacher/exams_create"] .exam-create-summary-item {
    padding: 0.9rem 1rem;
    border-radius: var(--exam-radius-soft);
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 92%, var(--app-shell-accent, var(--app-primary)) 8%);
}

body[data-view="teacher/exams_create"] .exam-create-summary-item--done {
    border-color: color-mix(in srgb, var(--app-success) 36%, var(--app-border) 64%);
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface) 88%);
}

body[data-view="teacher/exams_create"] .exam-create-summary-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body[data-view="teacher/exams_create"] .exam-create-summary-item__label {
    font-size: var(--app-text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-summary-item__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 15%, var(--app-surface) 85%);
    color: var(--app-text);
    font-weight: 700;
}

body[data-view="teacher/exams_create"] .exam-create-summary-item__meta {
    margin: 0.55rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-summary-note {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, #f59e0b 34%, var(--app-border) 66%);
    background: color-mix(in srgb, #f59e0b 10%, var(--app-surface) 90%);
}

body[data-view="teacher/exams_create"] .exam-create-summary-note__title {
    margin: 0;
    font-weight: 700;
    color: color-mix(in srgb, #b45309 82%, var(--app-text) 18%);
}

body[data-view="teacher/exams_create"] .exam-create-summary-note__list {
    margin: 0.55rem 0 0;
    padding-left: 1rem;
    color: var(--app-text);
    display: grid;
    gap: 0.3rem;
}

body[data-view="teacher/exams_create"] .exam-create-summary-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-mini-stat {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-surface) 88%, var(--app-shell-accent, var(--app-primary)) 12%);
    color: var(--app-text);
    font-size: var(--app-text-sm);
}

body[data-view="teacher/exams_create"] .exam-create-form-card {
    display: grid;
    gap: 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.18rem;
    background: var(--app-panel-surface);
    padding: 1.15rem;
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    position: sticky;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 18;
    display: grid;
    gap: 0.8rem;
    margin-top: 0.1rem;
    padding: 1rem 1.15rem;
    backdrop-filter: blur(8px);
}

body[data-view="teacher/exams_create"] .exam-create-actions-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-actions-label {
    margin: 0;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--exam-accent) 68%, var(--app-text) 32%);
}

body[data-view="teacher/exams_create"] .exam-create-actions-meta {
    margin: 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-action-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
}

body[data-view="teacher/exams_create"] .exam-create-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--app-control-height-md);
    border-radius: 999px !important;
    padding: 0.72rem 1.05rem !important;
    min-width: clamp(10rem, 18vw, 13rem);
    box-shadow: 0 10px 18px -16px rgba(30, 41, 59, 0.35);
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast);
}

body[data-view="teacher/exams_create"] .exam-create-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 26px -18px rgba(15, 23, 42, 0.34);
}

body[data-view="teacher/exams_create"] .exam-create-action-btn .app-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .exam-create-action-btn--secondary {
    order: 1;
}

body[data-view="teacher/exams_create"] .exam-create-action-btn--primary {
    order: 2;
}

body[data-view="teacher/exams_create"] .exam-create-inline-btn--block {
    width: 100%;
}

body[data-view="teacher/exams_create"] :is(.exam-create-main > section, .exam-create-main > #qcm-builder, .exam-create-main > #drive-upload-progress, .exam-create-side > section, .exam-create-help-card, #exam-autosave-box, #exam-live-validation) {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--app-panel-surface) !important;
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/exams_create"] .exam-create-help-card {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.12rem;
    padding: 1rem 1.1rem;
}

body[data-view="teacher/exams_create"] .exam-create-help-card--accent {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-tone-info, var(--app-shell-accent, var(--app-primary))) 10%, var(--app-panel-surface) 90%),
        var(--app-panel-surface)
    ) !important;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__summary {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    list-style: none;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-text) 18%);
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__content {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
    flex: 1 1 auto;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__title {
    font-size: var(--app-text-base);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-help-card__meta {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-help-card__body {
    margin-top: 0.8rem;
    font-size: var(--app-text-sm);
    color: var(--app-text);
    display: grid;
    gap: 0.5rem;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__body--grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

body[data-view="teacher/exams_create"] .exam-create-help-card__body--list {
    padding-left: 1.2rem;
    list-style: decimal;
}

body[data-view="teacher/exams_create"] .exam-create-help-card > :not(summary) :is(p, li, ol) {
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-help-card > :not(summary) :is(p, li) {
    opacity: 0.92;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-surface) 88%, var(--app-shell-accent, var(--app-primary)) 12%);
    color: var(--app-text);
    font-size: var(--app-text-xs);
    font-weight: 700;
    white-space: nowrap;
}

body[data-view="teacher/exams_create"] .exam-create-help-card[open] .exam-create-help-card__toggle {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-surface) 84%);
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 34%, var(--app-border) 66%);
}

body[data-view="teacher/exams_create"] .exam-create-help-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__backdrop {
    border: 0;
    background: rgba(2, 6, 23, 0.58);
    cursor: pointer;
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__panel {
    z-index: 1;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--app-panel-surface);
    box-shadow: var(--app-shadow-md);
    max-height: min(88vh, 44rem);
    overflow: auto;
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-border) 86%);
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 80%, var(--app-text) 20%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__title {
    margin: 0;
    font-size: var(--app-text-lg);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__subtitle {
    margin: 0.25rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-help-modal__body {
    padding: 1rem 1.15rem 1.15rem;
}

@media (max-width: 767px) {
    body[data-view="teacher/exams_create"] .exam-create-help-modal__head {
        flex-direction: column;
        align-items: stretch;
    }
}

body[data-view="teacher/exams_create"] .exam-create-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-field__label {
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea) {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--exam-accent) 18%, var(--app-border) 82%);
    border-radius: var(--exam-radius-soft);
    background: color-mix(in srgb, var(--app-surface) 97%, #2563eb 3%);
    color: var(--app-text);
    padding: 0.78rem 0.92rem;
    outline: none;
    box-shadow: none;
}

body[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea):focus {
    border-color: color-mix(in srgb, var(--exam-accent) 48%, var(--app-border) 52%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-accent) 14%, transparent 86%);
}

body[data-view="teacher/exams_create"] .exam-create-type-grid,
body[data-view="teacher/exams_create"] .exam-create-type-stack {
    display: grid;
    gap: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-type-grid {
    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
}

body[data-view="teacher/exams_create"] .exam-create-type-cluster {
    display: grid;
    gap: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-type-cluster.hidden {
    display: none !important;
}

body[data-view="teacher/exams_create"] .exam-create-type-option {
    display: grid;
    gap: 0.9rem;
    width: 100%;
    padding: 1rem;
    text-align: left;
    cursor: pointer;
    border-radius: 1.05rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 95%, var(--app-shell-accent, var(--app-primary)) 5%);
    color: var(--app-text);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

body[data-view="teacher/exams_create"] .exam-create-type-option:hover {
    border-color: color-mix(in srgb, var(--exam-accent) 36%, var(--app-border) 64%);
    transform: translateY(-1px);
}

body[data-view="teacher/exams_create"] .exam-create-type-option:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--exam-accent) 50%, var(--app-border) 50%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-accent) 14%, transparent 86%);
}

body[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    border-color: color-mix(in srgb, var(--exam-accent) 42%, var(--app-border) 58%);
    background: linear-gradient(
        140deg,
        color-mix(in srgb, var(--app-surface) 88%, var(--exam-accent) 12%),
        color-mix(in srgb, var(--app-surface) 92%, var(--exam-accent-2) 8%)
    );
    box-shadow: 0 18px 36px -30px rgba(37, 99, 235, 0.42);
}

body[data-view="teacher/exams_create"] .exam-create-type-option:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

body[data-view="teacher/exams_create"] .exam-create-type-option__top,
body[data-view="teacher/exams_create"] .exam-create-type-option__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

body[data-view="teacher/exams_create"] .exam-create-type-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--exam-accent) 28%, var(--app-border) 72%);
    background: linear-gradient(135deg, color-mix(in srgb, var(--exam-accent) 12%, #ffffff 88%), color-mix(in srgb, var(--exam-accent-2) 12%, #ffffff 88%));
    color: color-mix(in srgb, var(--exam-accent) 78%, #0f172a 22%);
}

body[data-view="teacher/exams_create"] .exam-create-type-option__title {
    margin: 0;
    font-size: var(--app-text-base);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-type-option__subtitle,
body[data-view="teacher/exams_create"] .exam-create-type-option__lock {
    margin: 0.2rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body[data-view="teacher/exams_create"] .exam-create-type-option__meta {
    justify-content: flex-start;
}

body[data-view="teacher/exams_create"] .exam-create-type-option__fact {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--exam-accent) 18%, var(--app-border) 82%);
    background: color-mix(in srgb, var(--app-surface) 94%, var(--exam-accent) 6%);
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

body[data-view="teacher/exams_create"] .exam-create-subpanel {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 94%, var(--app-shell-accent, var(--app-primary)) 6%);
}

body[data-view="teacher/exams_create"] .exam-create-subpanel__title {
    margin: 0;
    font-size: var(--app-text-base);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-subpanel__subtitle,
body[data-view="teacher/exams_create"] .exam-create-subpanel__note {
    margin: 0.18rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-subpanel__note a,
body[data-view="teacher/exams_create"] .exam-create-subpanel__link {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
    text-decoration: underline;
}

body[data-view="teacher/exams_create"] .exam-create-setting-card,
body[data-view="teacher/exams_create"] .exam-create-reference {
    display: grid;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 95%, var(--app-shell-accent, var(--app-primary)) 5%);
}

body[data-view="teacher/exams_create"] .exam-create-setting-card__title,
body[data-view="teacher/exams_create"] .exam-create-reference__value {
    margin: 0;
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--app-text-sm);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--app-shell-accent, var(--app-primary));
}

body[data-view="teacher/exams_create"] .exam-create-check-grid,
body[data-view="teacher/exams_create"] .exam-create-reference-list {
    display: grid;
    gap: 0.8rem;
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    min-height: 8rem;
    border-radius: 1rem;
    background:
        radial-gradient(circle at 78% 22%, rgba(96, 165, 250, 0.22), transparent 0 22%),
        radial-gradient(circle at 20% 78%, rgba(56, 189, 248, 0.18), transparent 0 18%),
        linear-gradient(135deg, rgba(191, 219, 254, 0.5), rgba(219, 234, 254, 0.28));
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__body {
    display: grid;
    gap: 0.55rem;
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__title {
    margin: 0;
    font-size: var(--app-text-lg);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__meta,
body[data-view="teacher/exams_create"] .exam-create-preview-card__description,
body[data-view="teacher/exams_create"] .exam-create-reference__label,
body[data-view="teacher/exams_create"] .exam-create-reference__meta {
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__sample,
body[data-view="teacher/exams_create"] .exam-create-inline-error {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 94%, var(--app-shell-accent, var(--app-primary)) 6%);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-inline-error {
    border-color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 36%, var(--app-border) 64%);
    background: color-mix(in srgb, var(--app-tone-danger, #ef4444) 8%, var(--app-surface) 92%);
}

body[data-view="teacher/exams_create"] .exam-create-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.12rem;
    background: var(--app-panel-surface);
}

body[data-view="teacher/exams_create"] .exam-create-banner__copy {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.85rem;
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .exam-create-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

body[data-view="teacher/exams_create"] .exam-create-banner__title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-banner__list {
    margin: 0.45rem 0 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.22rem;
    color: inherit;
}

body[data-view="teacher/exams_create"] .exam-create-banner__status--ok {
    color: color-mix(in srgb, var(--app-success) 82%, var(--app-text) 18%);
}

body[data-view="teacher/exams_create"] .exam-create-banner__status--error {
    color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 84%, var(--app-text) 16%);
}

body[data-view="teacher/exams_create"] .exam-create-banner--info {
    border-color: color-mix(in srgb, var(--app-success) 40%, var(--app-border) 60%) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-success) 16%, var(--app-panel-surface) 84%),
        color-mix(in srgb, var(--app-success) 10%, var(--app-panel-surface) 90%)
    ) !important;
}

body[data-view="teacher/exams_create"] .exam-create-banner--info .exam-create-banner__icon {
    background: color-mix(in srgb, var(--app-success) 18%, var(--app-surface) 82%);
    color: color-mix(in srgb, var(--app-success) 74%, var(--app-text) 26%);
}

body[data-view="teacher/exams_create"] .exam-create-banner--error {
    border-color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 40%, var(--app-border) 60%) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-tone-danger, #ef4444) 10%, var(--app-panel-surface) 90%),
        color-mix(in srgb, var(--app-tone-danger, #ef4444) 6%, var(--app-panel-surface) 94%)
    ) !important;
    color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 86%, var(--app-text) 14%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--app-control-height-md);
    padding: var(--app-control-padding-md);
    border-radius: var(--exam-radius-soft) !important;
    font-size: var(--app-text-sm);
    font-weight: 700;
    white-space: nowrap;
}

body[data-view="teacher/exams_create"] .app-btn-soft {
    border-color: color-mix(in srgb, var(--exam-accent) 30%, var(--app-border) 70%) !important;
    color: var(--exam-accent) !important;
    background: color-mix(in srgb, var(--exam-accent) 12%, var(--app-surface) 88%) !important;
}

body[data-view="teacher/exams_create"] .app-btn-success {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--exam-accent), var(--exam-accent-2)) !important;
    color: #ffffff !important;
}

body[data-view="teacher/exams_create"] .exam-create-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--app-control-height-md);
    padding: var(--app-control-padding-md) !important;
    border-radius: var(--exam-radius-soft) !important;
    font-size: var(--app-text-base);
}

body[data-view="teacher/exams_create"] .exam-create-main > .flex.gap-2 {
    flex-wrap: wrap;
}

body[data-view="teacher/exams_create"] .exam-create-tool-grid,
body[data-view="teacher/exams_create"] .exam-create-settings-grid {
    display: grid;
    gap: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-tool-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 95%, var(--app-shell-accent, var(--app-primary)) 5%);
}

body[data-view="teacher/exams_create"] .exam-create-tool-card__header,
body[data-view="teacher/exams_create"] .exam-create-builder__controls,
body[data-view="teacher/exams_create"] .exam-create-tool-card__inline,
body[data-view="teacher/exams_create"] .exam-create-upload__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body[data-view="teacher/exams_create"] .exam-create-tool-card__title {
    margin: 0;
    font-size: var(--app-text-base);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-tool-card__subtitle,
body[data-view="teacher/exams_create"] .exam-create-tool-card__hint,
body[data-view="teacher/exams_create"] .exam-create-builder__panel-label {
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-tool-card__pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: var(--app-text);
    font-size: var(--app-text-xs);
    font-weight: 700;
}

body[data-view="teacher/exams_create"] .exam-create-tool-card__body {
    display: grid;
    gap: 0.8rem;
}

body[data-view="teacher/exams_create"] .exam-create-builder {
    display: grid;
    gap: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-variant-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

body[data-view="teacher/exams_create"] #points_per_question {
    width: 4.6rem !important;
    max-width: 4.6rem;
    flex: 0 0 auto;
}

body[data-view="teacher/exams_create"] .q-block > .flex {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

body[data-view="teacher/exams_create"] .q-block .q-text {
    flex: 1 1 14rem;
    width: auto;
    min-width: 10rem;
}

body[data-view="teacher/exams_create"] .q-block .q-type {
    flex: 0 0 auto;
    width: auto;
    min-width: 9rem;
}

body[data-view="teacher/exams_create"] .q-block .q-remove {
    flex: 0 0 auto;
    white-space: nowrap;
}

body[data-view="teacher/exams_create"] .variant-tab {
    min-height: var(--app-tab-height);
    padding: var(--app-tab-padding) !important;
    font-size: var(--app-text-sm);
    border-radius: 0.95rem;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-soft-surface, var(--app-surface));
    color: var(--app-text-secondary);
}

body[data-view="teacher/exams_create"] .variant-tab.is-active,
body[data-view="teacher/exams_create"] .variant-tab.border-emerald-400 {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, transparent) !important;
    background: linear-gradient(135deg, var(--app-shell-accent, var(--app-primary)), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 72%, #1d4ed8 28%)) !important;
    color: #ffffff !important;
}

body[data-view="teacher/exams_create"] .q-block {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: color-mix(in srgb, var(--app-surface) 96%, var(--app-shell-accent, var(--app-primary)) 4%);
}

body[data-view="teacher/exams_create"] .q-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
}

body[data-view="teacher/exams_create"] :is(.q-number, .opt-letter) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--app-control-height-sm);
    min-height: var(--app-control-height-sm);
    border-radius: 0.6rem;
    background: #1e293b;
    color: #f8fafc !important;
    font-weight: 700;
}

body[data-view="teacher/exams_create"] :is(.q-remove, .o-remove, .add-option) {
    min-height: var(--app-control-height-sm);
    border-radius: 0.85rem;
}

body[data-view="teacher/exams_create"] .add-option {
    border-color: color-mix(in srgb, var(--exam-accent) 50%, var(--app-border) 50%);
    color: var(--exam-accent);
    background: color-mix(in srgb, var(--exam-accent) 8%, var(--app-surface) 92%);
}

body[data-view="teacher/exams_create"] .o-remove {
    border-color: color-mix(in srgb, #ef4444 55%, var(--app-border) 45%);
    color: #ef4444;
}

body[data-view="teacher/exams_create"] .exam-create-compliance-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-view="teacher/exams_create"] .exam-create-compliance-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--exam-radius-soft);
    border: 1px solid var(--exam-card-border);
    background: color-mix(in srgb, var(--app-surface) 96%, #2563eb 4%);
    color: var(--app-text);
}

body[data-view="teacher/exams_create"] .exam-create-compliance-item--ok {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-border) 62%);
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-surface) 88%);
}

body[data-view="teacher/exams_create"] .exam-create-compliance-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--app-pill-height);
    min-height: var(--app-pill-height);
    border-radius: 999px;
    font-size: var(--app-text-xs);
    font-weight: 700;
    background: color-mix(in srgb, var(--exam-accent) 14%, var(--app-surface) 86%);
    color: var(--exam-accent);
}

body[data-view="teacher/exams_create"] .exam-create-compliance-item--ok .exam-create-compliance-item__badge {
    background: color-mix(in srgb, var(--app-success) 16%, var(--app-surface) 84%);
    color: color-mix(in srgb, var(--app-success) 84%, var(--app-text) 16%);
}

body[data-view="teacher/exams_create"] .exam-create-compliance-item__text {
    font-size: var(--app-text-sm);
}

body[data-view="teacher/exams_create"] .exam-create-upload__track {
    overflow: hidden;
    height: 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%);
}

body[data-view="teacher/exams_create"] .exam-create-upload__bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-shell-accent, var(--app-primary)), #38bdf8);
    transition: width 160ms ease;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main :is(.text-slate-100, .text-slate-200) {
    color: var(--app-text) !important;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main :is(.text-slate-300, .text-slate-400, .text-slate-500) {
    color: var(--app-muted) !important;
}

@media (min-width: 1200px) {
    body[data-view="teacher/exams_create"] .exam-create-layout {
        grid-template-columns: minmax(0, 1.72fr) minmax(20rem, 26rem);
        align-items: start;
    }

    body[data-view="teacher/exams_create"] .exam-create-side {
        position: sticky;
        top: 1rem;
    }
}

@media (min-width: 900px) {
    body[data-view="teacher/exams_create"] .exam-create-tool-grid,
    body[data-view="teacher/exams_create"] .exam-create-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    body[data-view="teacher/exams_create"] .exam-create-settings-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body[data-view="teacher/exams_create"] .exam-create-card__header,
    body[data-view="teacher/exams_create"] .exam-create-builder__controls,
    body[data-view="teacher/exams_create"] .exam-create-tool-card__header,
    body[data-view="teacher/exams_create"] .exam-create-tool-card__inline,
    body[data-view="teacher/exams_create"] .exam-create-upload__meta {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-view="teacher/exams_create"] .q-option {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
        position: static;
        bottom: auto;
        backdrop-filter: none;
    }

    body[data-view="teacher/exams_create"] .exam-create-action-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/exams_create"] .exam-create-action-btn {
        width: 100%;
        min-width: 0;
    }

    body[data-view="teacher/exams_create"] .exam-create-action-btn--primary {
        order: 1;
    }

    body[data-view="teacher/exams_create"] .exam-create-action-btn--secondary {
        order: 2;
    }
}

body[data-view="teacher/exams_create"] :is(#exam-autosave-box, #exam-live-validation, #qcm-builder, .qcm-advanced-only) {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
}

body[data-view="teacher/exams_create"] .variant-tab {
    min-height: 2rem;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-soft-surface, var(--app-surface));
    color: var(--app-text-secondary);
}

body[data-view="teacher/exams_create"] .variant-tab.border-emerald-400 {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 60%, transparent) !important;
    background: linear-gradient(135deg, var(--app-shell-accent, var(--app-primary)), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 72%, #1d4ed8 28%)) !important;
    color: #ffffff !important;
}

html.dark body[data-view="teacher/exams_create"] .variant-tab.border-emerald-400 {
    color: #ffffff !important;
}

/* Teacher exams: darker palette aligned with teacher hub pages */
body[data-view="teacher/exams_create"] {
    --exam-accent: var(--app-primary-600);
    --exam-accent-strong: var(--app-primary-500);
    --exam-text: var(--app-text);
    --exam-text-soft: var(--app-muted);
    --exam-border: color-mix(in srgb, var(--app-primary-300) 34%, #cbd5e1 66%);
    --exam-border-strong: color-mix(in srgb, var(--app-primary-400) 56%, #cbd5e1 44%);
    --exam-panel: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    --exam-card: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.94));
    --exam-soft: rgba(232, 242, 255, 0.92);
    --exam-stat-base-a: rgba(248, 252, 255, 0.98);
    --exam-stat-base-b: rgba(239, 246, 255, 0.96);
    --exam-card-shadow: 0 24px 42px -34px rgba(15, 23, 42, 0.28);
    background:
        radial-gradient(circle at 8% 10%, rgba(71, 122, 255, 0.16), transparent 38%),
        radial-gradient(circle at 92% 2%, rgba(21, 178, 255, 0.1), transparent 34%),
        linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #eff5ff 100%) !important;
}

html.dark body[data-view="teacher/exams_create"],
html[data-theme="dark"] body[data-view="teacher/exams_create"] {
    --exam-accent: var(--app-primary-300);
    --exam-accent-strong: #9ec3ff;
    --exam-text: #edf4ff;
    --exam-text-soft: #9db1d3;
    --exam-border: color-mix(in srgb, var(--app-primary-300) 34%, rgba(148, 163, 184, 0.24) 66%);
    --exam-border-strong: color-mix(in srgb, var(--app-primary-200) 56%, rgba(148, 163, 184, 0.2) 44%);
    --exam-panel: linear-gradient(150deg, rgba(11, 28, 62, 0.96), rgba(7, 20, 46, 0.96));
    --exam-card: linear-gradient(160deg, rgba(14, 35, 76, 0.96), rgba(8, 22, 49, 0.96));
    --exam-soft: rgba(16, 36, 74, 0.88);
    --exam-stat-base-a: rgba(18, 40, 83, 0.95);
    --exam-stat-base-b: rgba(9, 24, 52, 0.95);
    --exam-card-shadow: 0 26px 50px -38px rgba(1, 8, 23, 0.94);
    background:
        radial-gradient(circle at 8% 10%, rgba(71, 122, 255, 0.24), transparent 38%),
        radial-gradient(circle at 92% 2%, rgba(21, 178, 255, 0.14), transparent 36%),
        linear-gradient(180deg, #061127 0%, #040c1d 44%, #05132f 100%) !important;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main {
    color: var(--exam-text);
}

body[data-view="teacher/exams_create"] .exam-create-hero {
    border-color: var(--exam-border) !important;
    background: var(--exam-panel) !important;
    box-shadow: var(--exam-card-shadow) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card, .exam-create-card, .exam-create-help-card, .exam-create-banner, .exam-create-main > section, .exam-create-main > #qcm-builder, .exam-create-main > #drive-upload-progress, .exam-create-side > section, #exam-autosave-box, #exam-live-validation) {
    border-color: var(--exam-border) !important;
    background: var(--exam-card) !important;
    box-shadow: var(--exam-card-shadow) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-hero__eyebrow, .exam-create-hero__subtitle, .exam-create-stat__label, .exam-create-stat__meta, .exam-create-card__kicker, .exam-create-card__subtitle, .exam-create-help-card__meta, .exam-create-tool-card__subtitle, .exam-create-tool-card__hint, .exam-create-builder__panel-label, .exam-create-preview-card__meta, .exam-create-preview-card__description, .exam-create-reference__label, .exam-create-reference__meta, .exam-create-summary-card__progress-meta, .exam-create-summary-item__label, .exam-create-type-option__subtitle, .exam-create-type-option__lock, .exam-create-subpanel__subtitle, .exam-create-subpanel__note, .exam-create-actions-meta) {
    color: var(--exam-text-soft) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-hero__title, .exam-create-stat__value, .exam-create-card__title, .exam-create-help-card__title, .exam-create-field__label, .exam-create-setting-card__title, .exam-create-reference__value, .exam-create-preview-card__title, .exam-create-tool-card__title, .exam-create-type-option__title, .exam-create-summary-note__title, .exam-create-summary-item__meta, .exam-create-actions-label) {
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] .exam-create-stat {
    border-color: color-mix(in srgb, var(--exam-accent) 42%, var(--exam-border) 58%) !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--exam-accent) 16%, var(--exam-stat-base-a) 84%), var(--exam-stat-base-b)) !important;
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--exam-accent) 42%, rgba(3, 12, 30, 0.85));
}

body[data-view="teacher/exams_create"] :is(.exam-create-card__icon, .exam-create-help-card__icon, .exam-create-type-option__icon) {
    border-color: color-mix(in srgb, var(--exam-accent) 36%, rgba(148, 163, 184, 0.24)) !important;
    background: color-mix(in srgb, var(--exam-accent) 16%, var(--exam-soft) 84%) !important;
    color: color-mix(in srgb, var(--exam-accent) 72%, #f8fafc 28%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-status-pill {
    border-color: var(--exam-border) !important;
    background: color-mix(in srgb, var(--exam-soft) 88%, rgba(8, 20, 47, 0.92) 12%) !important;
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] .exam-create-status-pill--success {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--exam-border) 62%) !important;
    background: color-mix(in srgb, var(--app-success) 16%, var(--exam-soft) 84%) !important;
    color: color-mix(in srgb, var(--app-success) 62%, #f8fafc 38%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-status-pill--info {
    border-color: color-mix(in srgb, var(--exam-accent) 42%, var(--exam-border) 58%) !important;
    background: color-mix(in srgb, var(--exam-accent) 18%, var(--exam-soft) 82%) !important;
    color: color-mix(in srgb, var(--exam-accent) 68%, #f8fafc 32%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-status-pill--warning {
    border-color: color-mix(in srgb, #f59e0b 38%, var(--exam-border) 62%) !important;
    background: color-mix(in srgb, #f59e0b 14%, var(--exam-soft) 86%) !important;
    color: color-mix(in srgb, #fbbf24 60%, #f8fafc 40%) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-item, .exam-create-subpanel, .exam-create-setting-card, .exam-create-reference, .exam-create-tool-card, .exam-create-preview-card__sample, .exam-create-compliance-item, .q-block) {
    border-color: var(--exam-border) !important;
    background: color-mix(in srgb, var(--exam-soft) 86%, rgba(8, 20, 47, 0.94) 14%) !important;
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] .exam-create-summary-item--done,
body[data-view="teacher/exams_create"] .exam-create-compliance-item--ok {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--exam-border) 62%) !important;
    background: color-mix(in srgb, var(--app-success) 12%, var(--exam-soft) 88%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-summary-note {
    border-color: color-mix(in srgb, #f59e0b 36%, var(--exam-border) 64%) !important;
    background: color-mix(in srgb, #f59e0b 10%, var(--exam-soft) 90%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-summary-note__title {
    color: color-mix(in srgb, #fbbf24 62%, #f8fafc 38%) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-item__count, .exam-create-mini-stat, .exam-create-tool-card__pill, .exam-create-help-card__toggle, .exam-create-compliance-item__badge) {
    border-color: color-mix(in srgb, var(--exam-accent) 30%, var(--exam-border) 70%) !important;
    background: color-mix(in srgb, var(--exam-accent) 14%, var(--exam-soft) 86%) !important;
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea) {
    border-color: color-mix(in srgb, var(--exam-accent) 28%, var(--exam-border) 72%) !important;
    background: color-mix(in srgb, var(--exam-soft) 90%, rgba(5, 15, 35, 0.96) 10%) !important;
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea):focus {
    border-color: var(--exam-border-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-accent) 16%, transparent 84%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-type-option {
    border-color: var(--exam-border) !important;
    background: color-mix(in srgb, var(--exam-soft) 84%, rgba(8, 20, 47, 0.96) 16%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-type-option:hover {
    border-color: var(--exam-border-strong) !important;
    box-shadow: 0 18px 30px -24px rgba(3, 12, 30, 0.56);
}

body[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    border-color: color-mix(in srgb, var(--exam-accent) 54%, var(--exam-border) 46%) !important;
    background: linear-gradient(145deg, color-mix(in srgb, var(--exam-accent) 18%, var(--exam-stat-base-a) 82%), color-mix(in srgb, var(--exam-accent-strong) 10%, var(--exam-stat-base-b) 90%)) !important;
    box-shadow: 0 20px 34px -28px color-mix(in srgb, var(--exam-accent) 46%, rgba(3, 12, 30, 0.92));
}

body[data-view="teacher/exams_create"] .exam-create-type-option__fact {
    border-color: color-mix(in srgb, var(--exam-accent) 22%, var(--exam-border) 78%) !important;
    background: color-mix(in srgb, var(--exam-accent) 10%, var(--exam-soft) 90%) !important;
    color: var(--exam-text-soft) !important;
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    background:
        radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--exam-accent) 24%, transparent), transparent 0 22%),
        radial-gradient(circle at 20% 78%, color-mix(in srgb, var(--exam-accent-strong) 18%, transparent), transparent 0 18%),
        linear-gradient(135deg, color-mix(in srgb, var(--exam-accent) 18%, rgba(6, 17, 39, 0.82)), rgba(8, 22, 49, 0.94)) !important;
}

body[data-view="teacher/exams_create"] .exam-create-banner--info {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--exam-border) 62%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-success) 14%, var(--exam-card) 86%), color-mix(in srgb, var(--app-success) 8%, var(--exam-card) 92%)) !important;
}

body[data-view="teacher/exams_create"] .exam-create-banner--error,
body[data-view="teacher/exams_create"] .exam-create-inline-error {
    border-color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 38%, var(--exam-border) 62%) !important;
    background: color-mix(in srgb, var(--app-tone-danger, #ef4444) 10%, var(--exam-soft) 90%) !important;
    color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 72%, #f8fafc 28%) !important;
}

body[data-view="teacher/exams_create"] .app-btn-soft {
    border-color: color-mix(in srgb, var(--exam-accent) 28%, var(--exam-border) 72%) !important;
    background: color-mix(in srgb, var(--exam-accent) 12%, var(--exam-soft) 88%) !important;
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] .app-btn-success {
    border-color: color-mix(in srgb, var(--exam-accent) 46%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--exam-accent) 88%, #1d4ed8 12%), color-mix(in srgb, var(--exam-accent-strong) 42%, #0f172a 58%)) !important;
    box-shadow: 0 18px 28px -20px color-mix(in srgb, var(--exam-accent) 44%, rgba(3, 12, 30, 0.9));
    color: #ffffff !important;
}

body[data-view="teacher/exams_create"] .variant-tab {
    border-color: var(--exam-border) !important;
    background: color-mix(in srgb, var(--exam-soft) 88%, rgba(8, 20, 47, 0.92) 12%) !important;
    color: var(--exam-text-soft) !important;
}

body[data-view="teacher/exams_create"] :is(.variant-tab.is-active, .variant-tab.border-emerald-400) {
    border-color: color-mix(in srgb, var(--exam-accent) 56%, var(--exam-border) 44%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--exam-accent) 78%, #1d4ed8 22%), color-mix(in srgb, var(--exam-accent-strong) 24%, #07142e 76%)) !important;
    color: #ffffff !important;
}

body[data-view="teacher/exams_create"] .add-option {
    border-color: color-mix(in srgb, var(--exam-accent) 34%, var(--exam-border) 66%) !important;
    background: color-mix(in srgb, var(--exam-accent) 10%, var(--exam-soft) 90%) !important;
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] .exam-create-upload__track {
    background: color-mix(in srgb, var(--exam-accent) 12%, rgba(8, 20, 47, 0.96) 88%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-upload__bar {
    background: linear-gradient(90deg, color-mix(in srgb, var(--exam-accent) 82%, #1d4ed8 18%), color-mix(in srgb, var(--exam-accent-strong) 38%, #38bdf8 62%)) !important;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main :is(.text-slate-100, .text-slate-200) {
    color: var(--exam-text) !important;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main :is(.text-slate-300, .text-slate-400, .text-slate-500) {
    color: var(--exam-text-soft) !important;
}

body:is([data-view="teacher/withdrawals"], [data-view="teacher/referrals"], [data-view="teacher/meetings"]) .teacher-hub-main {
    width: min(100%, 92rem);
}

body:is([data-view="teacher/withdrawals"], [data-view="teacher/referrals"], [data-view="teacher/meetings"]) .teacher-hub-main > section {
    border-radius: 1.14rem !important;
}

body:is([data-view="teacher/withdrawals"], [data-view="teacher/referrals"], [data-view="teacher/meetings"]) .teacher-hub-main .overflow-x-auto {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-soft-surface, var(--app-surface));
}

body:is([data-view="teacher/course_preview"], [data-view="teacher/course_updates"]) .teacher-workflow-main {
    width: 100%;
    max-width: 100%;
}

body[data-view="admin/course_preview"] .admin-shell-content {
    width: 100%;
    max-width: 100%;
}

body:is([data-view="teacher/course_preview"], [data-view="teacher/course_updates"]) .teacher-workflow-main > :is(section, article, details, div.rounded-2xl) {
    border-radius: 1.16rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main > section:first-of-type {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%),
        var(--app-surface)
    ) !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main #reviews-moderation article.rounded-xl.border {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/course_preview"] .teacher-workflow-main #reviews-moderation article.rounded-xl.border:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -22px rgba(15, 23, 42, 0.28);
}

body[data-view="teacher/course_preview"] .teacher-workflow-main {
    gap: 0.65rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main > :is(section, article, details, div.rounded-2xl) {
    padding: 0.82rem !important;
    border-radius: 1.02rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main :is(.rounded-3xl, .rounded-2xl) {
    border-radius: 0.96rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .rounded-xl {
    border-radius: 0.8rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .h-9.w-9 {
    width: 1.95rem !important;
    height: 1.95rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .h-8.w-8 {
    width: 1.7rem !important;
    height: 1.7rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .app-icon > svg {
    width: 0.82rem;
    height: 0.82rem;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main :is(.p-3, .p-2\.5, .sm\:p-4) {
    padding: 0.78rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .px-3 {
    padding-left: 0.62rem !important;
    padding-right: 0.62rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .px-2\.5 {
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .py-1\.5 {
    padding-top: 0.32rem !important;
    padding-bottom: 0.32rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main .py-0\.5 {
    padding-top: 0.16rem !important;
    padding-bottom: 0.16rem !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main :is(.text-\[12px\], .sm\:text-base, .text-base) {
    font-size: 16px !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main :is(.text-\[11px\], .text-xs, .sm\:text-sm, .text-sm) {
    font-size: 13px !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main :is(.text-\[10px\], .text-\[9px\], .sm\:text-xs) {
    font-size: 13px !important;
}

body[data-view="teacher/course_preview"] .teacher-workflow-main :is(h1, h2, h3, h4, p, li, span, a, button) {
    line-height: 1.34;
}

body[data-view="teacher/course_updates"] .teacher-workflow-main .space-y-3 > div.rounded-2xl.border {
    transition: border-color var(--app-transition-fast), transform var(--app-transition-fast);
}

body[data-view="teacher/course_updates"] .teacher-workflow-main .space-y-3 > div.rounded-2xl.border:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    transform: translateY(-1px);
}

body[data-view="teacher/referrals"] .teacher-hub-main > section:first-child {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%),
        var(--app-surface)
    ) !important;
}

body[data-view="teacher/referrals"] .teacher-hub-main > section {
    box-shadow: 0 16px 30px -26px rgba(15, 23, 42, 0.28);
}

html.dark body[data-view="teacher/referrals"] .teacher-hub-main > section {
    box-shadow: 0 18px 32px -28px rgba(2, 6, 23, 0.82);
}

body[data-view="teacher/referrals"] .teacher-hub-main > section.grid > div {
    background: var(--teacher-page-soft-surface, var(--app-surface)) !important;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    box-shadow: none !important;
}

body[data-view="teacher/referrals"] .teacher-hub-main table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 92%, transparent);
}

body[data-view="teacher/referrals"] .teacher-hub-main [data-referral-copy-wrap] :is(button, a)[class*="rounded-lg"] {
    min-height: var(--app-control-height-sm);
}

body[data-view="teacher/meetings"] .teacher-meetings-hero {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.35rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 88%, var(--app-shell-accent, var(--app-primary)) 12%),
        var(--teacher-page-soft-surface, var(--app-surface))
    );
    padding: 1.25rem 1.4rem;
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/meetings"] .teacher-meetings-hero__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

body[data-view="teacher/meetings"] .teacher-meetings-hero__kicker {
    margin: 0;
    font-size: var(--app-text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
    font-weight: 700;
}

body[data-view="teacher/meetings"] .teacher-meetings-hero__title {
    margin: 0.4rem 0 0;
    font-size: clamp(var(--app-text-2xl), 1.8vw, var(--app-text-3xl));
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/meetings"] .teacher-meetings-hero__subtitle {
    margin: 0.4rem 0 0;
    max-width: 42rem;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meetings-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.7rem;
    border-radius: var(--app-radius-full);
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-soft-surface, var(--app-surface));
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: var(--app-text-secondary);
    white-space: nowrap;
}

body[data-view="teacher/meetings"] .teacher-meeting-chip--soft {
    background: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 92%, var(--app-shell-accent, var(--app-primary)) 8%);
}

body[data-view="teacher/meetings"] .teacher-meeting-chip--status.teacher-meeting-chip--pending {
    border-color: color-mix(in srgb, var(--app-tone-warning) 55%, transparent);
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%);
    background: color-mix(in srgb, var(--app-tone-warning) 10%, var(--teacher-page-soft-surface, var(--app-surface)) 90%);
}

body[data-view="teacher/meetings"] .teacher-meeting-chip--status.teacher-meeting-chip--confirmed {
    border-color: color-mix(in srgb, var(--app-tone-success) 55%, transparent);
    color: color-mix(in srgb, var(--app-tone-success) 82%, var(--app-text) 18%);
    background: color-mix(in srgb, var(--app-tone-success) 10%, var(--teacher-page-soft-surface, var(--app-surface)) 90%);
}

body[data-view="teacher/meetings"] .teacher-meeting-chip--status.teacher-meeting-chip--cancelled {
    border-color: color-mix(in srgb, var(--app-tone-danger) 55%, transparent);
    color: color-mix(in srgb, var(--app-tone-danger) 82%, var(--app-text) 18%);
    background: color-mix(in srgb, var(--app-tone-danger) 10%, var(--teacher-page-soft-surface, var(--app-surface)) 90%);
}

body[data-view="teacher/meetings"] .teacher-meeting-chip--date {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 45%, transparent);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 80%, var(--app-text) 20%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--teacher-page-soft-surface, var(--app-surface)) 90%);
}

body[data-view="teacher/meetings"] .teacher-meetings-stats {
    margin-top: 1.2rem;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

body[data-view="teacher/meetings"] .teacher-meetings-stat {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    background: var(--teacher-page-soft-surface, var(--app-surface));
}

body[data-view="teacher/meetings"] .teacher-meetings-stat__label {
    margin: 0;
    font-size: var(--app-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat__value {
    margin: 0.35rem 0 0;
    font-size: var(--app-text-2xl);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat__meta {
    margin: 0.2rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meetings-filter {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.25rem;
    background: var(--teacher-page-soft-surface, var(--app-surface));
    box-shadow: var(--app-shadow-soft);
    padding: 1.1rem;
    position: sticky;
    top: 0.65rem;
    z-index: 18;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__form {
    display: block;
    gap: 0;
    align-items: initial;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter-toggle {
    min-height: var(--app-control-height-sm);
}

body[data-view="teacher/meetings"] .teacher-meetings-filter-toggle.teacher-meetings-filter-toggle--active {
    border-color: var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
}

body[data-view="teacher/meetings"] [data-meetings-filter-panel][hidden] {
    display: none !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__panel {
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, var(--teacher-page-soft-border, var(--app-border)) 72%);
    border-radius: 1rem;
    padding: 0.82rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--teacher-page-soft-surface, var(--app-surface)) 96%);
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__dynamic {
    display: grid;
    gap: 0.8rem;
    align-items: end;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter-field {
    display: flex;
    flex-direction: column;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter-field.hidden {
    display: none !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

body[data-view="teacher/meetings"] .teacher-meetings-input {
    width: 100%;
    border-radius: 0.9rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-surface, var(--app-surface));
    color: var(--app-text);
    padding: 0.55rem 0.85rem;
    font-size: var(--app-text-sm);
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__actions {
    display: flex;
    justify-content: flex-end;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__submit {
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 52%, transparent);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    color: #ffffff;
    padding: 0.55rem 1.4rem;
    font-size: var(--app-text-sm);
    font-weight: 700;
    box-shadow: 0 16px 28px -22px color-mix(in srgb, var(--app-primary) 52%, transparent);
}

body[data-view="teacher/meetings"] .teacher-meetings-list {
    display: grid;
    gap: 1rem;
}

body[data-view="teacher/meetings"] .teacher-meetings-empty {
    border: 1px dashed var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1rem;
    padding: 1.2rem;
    background: var(--teacher-page-soft-surface, var(--app-surface));
    text-align: center;
}

body[data-view="teacher/meetings"] .teacher-meetings-empty__title {
    margin: 0;
    font-weight: 600;
    color: var(--app-text);
}

body[data-view="teacher/meetings"] .teacher-meetings-empty__subtitle {
    margin: 0.4rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meeting-card {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 1.2rem;
    background: var(--teacher-page-surface, var(--app-surface));
    padding: 1rem 1.1rem;
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/meetings"] .teacher-meeting-card[open] {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    box-shadow: var(--app-shadow-soft);
}

body[data-view="teacher/meetings"] .teacher-meeting-summary {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

body[data-view="teacher/meetings"] .teacher-meeting-summary::-webkit-details-marker {
    display: none;
}

body[data-view="teacher/meetings"] .teacher-meeting-summary__main {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-course {
    margin: 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meeting-title {
    margin: 0;
    font-size: var(--app-text-lg);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="teacher/meetings"] .teacher-meeting-meta {
    margin: 0;
    font-size: var(--app-text-sm);
    color: var(--app-text-secondary);
}

body[data-view="teacher/meetings"] .teacher-meeting-summary__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-toggle {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    font-weight: 600;
}

body[data-view="teacher/meetings"] .teacher-meeting-body {
    margin-top: 1rem;
    display: grid;
    gap: 0.9rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-info {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 0.95rem;
    padding: 0.85rem;
    background: var(--teacher-page-soft-surface, var(--app-surface));
}

body[data-view="teacher/meetings"] .teacher-meeting-info__title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 600;
    color: var(--app-text);
}

body[data-view="teacher/meetings"] .teacher-meeting-info__subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meeting-slots {
    display: grid;
    gap: 0.7rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-slot {
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 0.95rem;
    padding: 0.85rem;
    background: var(--teacher-page-soft-surface, var(--app-surface));
}

body[data-view="teacher/meetings"] .teacher-meeting-slot__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-slot__title {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 600;
    color: var(--app-text);
}

body[data-view="teacher/meetings"] .teacher-meeting-slot__time {
    margin: 0.2rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body[data-view="teacher/meetings"] .teacher-meeting-slot__details {
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body[data-view="teacher/meetings"] .teacher-meeting-slot__details a {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-text) 18%);
    text-decoration: underline;
    word-break: break-all;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm {
    position: relative;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__toggle {
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    background: var(--teacher-page-surface, var(--app-surface));
    color: var(--app-text);
    border-radius: 0.8rem;
    padding: 0.4rem 0.9rem;
    font-size: var(--app-text-xs);
    font-weight: 600;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__toggle::-webkit-details-marker {
    display: none;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__form {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.7rem;
    border: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    border-radius: 0.95rem;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--teacher-page-soft-surface, var(--app-surface)) 92%, var(--app-shell-accent, var(--app-primary)) 8%);
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__grid {
    display: grid;
    gap: 0.7rem;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__actions {
    display: flex;
    justify-content: flex-end;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__submit {
    border: 1px solid color-mix(in srgb, var(--app-tone-success) 55%, transparent);
    background: color-mix(in srgb, var(--app-tone-success) 22%, transparent);
    color: color-mix(in srgb, var(--app-tone-success) 85%, var(--app-text) 15%);
    border-radius: 0.85rem;
    padding: 0.45rem 1rem;
    font-size: var(--app-text-sm);
    font-weight: 700;
}

body[data-view="teacher/meetings"] .teacher-meeting-actions {
    display: flex;
    justify-content: flex-end;
}

body[data-view="teacher/meetings"] .teacher-meeting-cancel-btn {
    border: 1px solid color-mix(in srgb, var(--app-tone-danger) 55%, transparent);
    background: color-mix(in srgb, var(--app-tone-danger) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-danger) 80%, var(--app-text) 20%);
    border-radius: 0.9rem;
    padding: 0.5rem 1rem;
    font-size: var(--app-text-sm);
    font-weight: 700;
}

body[data-view="teacher/withdrawals"] .withdrawals-period-grid {
    display: grid;
    gap: 0.75rem;
    align-items: end;
}

body[data-view="teacher/withdrawals"] .withdrawals-filter-panel {
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, var(--teacher-page-soft-border, var(--app-border)) 74%);
    border-radius: 1rem;
    padding: 0.82rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--teacher-page-soft-surface, var(--app-surface)) 96%);
}

body[data-view="teacher/withdrawals"] .withdrawals-period-grid .app-btn-primary {
    min-width: 9.5rem;
    justify-self: end;
}

/* Teacher withdrawals: visual refresh */
body[data-view="teacher/withdrawals"] {
    --withdrawals-accent: var(--app-primary-600);
    --withdrawals-accent-strong: var(--app-primary-500);
    --withdrawals-text: var(--app-text);
    --withdrawals-text-soft: var(--app-muted);
    --withdrawals-border: color-mix(in srgb, var(--app-primary-300) 34%, #cbd5e1 66%);
    --withdrawals-border-strong: color-mix(in srgb, var(--app-primary-400) 56%, #cbd5e1 44%);
    --withdrawals-panel: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    --withdrawals-card: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.94));
    --withdrawals-soft: rgba(232, 242, 255, 0.92);
    --withdrawals-kpi-base-a: rgba(248, 252, 255, 0.98);
    --withdrawals-kpi-base-b: rgba(239, 246, 255, 0.96);
    --withdrawals-shadow: 0 24px 42px -34px rgba(15, 23, 42, 0.28);
}

html.dark body[data-view="teacher/withdrawals"],
html[data-theme="dark"] body[data-view="teacher/withdrawals"] {
    --withdrawals-accent: var(--app-primary-300);
    --withdrawals-accent-strong: #9ec3ff;
    --withdrawals-text: #edf4ff;
    --withdrawals-text-soft: #9db1d3;
    --withdrawals-border: color-mix(in srgb, var(--app-primary-300) 34%, rgba(148, 163, 184, 0.24) 66%);
    --withdrawals-border-strong: color-mix(in srgb, var(--app-primary-200) 56%, rgba(148, 163, 184, 0.2) 44%);
    --withdrawals-panel: linear-gradient(150deg, rgba(11, 28, 62, 0.96), rgba(7, 20, 46, 0.96));
    --withdrawals-card: linear-gradient(160deg, rgba(14, 35, 76, 0.96), rgba(8, 22, 49, 0.96));
    --withdrawals-soft: rgba(16, 36, 74, 0.88);
    --withdrawals-kpi-base-a: rgba(18, 40, 83, 0.95);
    --withdrawals-kpi-base-b: rgba(9, 24, 52, 0.95);
    --withdrawals-shadow: 0 26px 50px -38px rgba(1, 8, 23, 0.94);
}

body[data-view="teacher/withdrawals"] .withdrawals-main {
    color: var(--withdrawals-text);
}

body[data-view="teacher/withdrawals"] .withdrawals-filter {
    border-radius: 1.2rem;
    border: 1px solid var(--withdrawals-border);
    background: var(--withdrawals-panel);
    box-shadow: var(--withdrawals-shadow);
}

body[data-view="teacher/withdrawals"] .withdrawals-period-bar {
    gap: 0.6rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-period-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--withdrawals-border);
    background: var(--withdrawals-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-period-tabs .period-btn {
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border-color: transparent;
    background: transparent;
}

body[data-view="teacher/withdrawals"] .withdrawals-period-tabs .period-btn--active {
    border-color: color-mix(in srgb, var(--withdrawals-accent) 36%, transparent);
    background: color-mix(in srgb, var(--withdrawals-accent) 22%, var(--withdrawals-soft) 78%);
    color: var(--withdrawals-accent-strong);
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.32);
}

body[data-view="teacher/withdrawals"] .withdrawals-period-tabs .period-btn--inactive {
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-period-label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--withdrawals-border);
    background: color-mix(in srgb, var(--withdrawals-accent) 8%, var(--withdrawals-soft) 92%);
    color: var(--withdrawals-text-soft);
    font-weight: 600;
}

body[data-view="teacher/withdrawals"] .withdrawals-filter-panel {
    border-style: solid;
    border-color: color-mix(in srgb, var(--withdrawals-accent) 28%, var(--withdrawals-border) 72%);
    background: linear-gradient(160deg, color-mix(in srgb, var(--withdrawals-accent) 6%, var(--withdrawals-card) 94%), var(--withdrawals-card));
}

body[data-view="teacher/withdrawals"] form[data-period-custom="false"] .withdrawals-filter-panel {
    display: none;
}

body[data-view="teacher/withdrawals"] .withdrawals-period-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

body[data-view="teacher/withdrawals"] .withdrawals-kpis {
    margin-top: 0.4rem;
    gap: 0.85rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--app-kpi-accent) 42%, var(--withdrawals-border) 58%) !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--app-kpi-accent) 24%, var(--withdrawals-kpi-base-a) 76%), var(--withdrawals-kpi-base-b)) !important;
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--app-kpi-accent) 52%, rgba(3, 12, 30, 0.85));
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    animation: withdrawals-kpi-glow 8s ease-in-out infinite;
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi::after {
    content: "";
    position: absolute;
    inset: auto -26% -54% auto;
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--app-kpi-accent) 34%, transparent), transparent 70%);
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--app-kpi-accent) 66%, var(--withdrawals-border) 34%) !important;
    box-shadow: 0 24px 36px -24px color-mix(in srgb, var(--app-kpi-accent) 56%, rgba(4, 12, 29, 0.86));
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi .app-kpi-card__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi .app-kpi-card__icon {
    border: 1px solid color-mix(in srgb, var(--app-kpi-accent) 56%, transparent);
    background: color-mix(in srgb, var(--app-kpi-accent) 16%, transparent);
    color: color-mix(in srgb, var(--app-kpi-accent) 88%, #0f172a 12%);
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi .app-kpi-card__icon > svg {
    width: 0.95rem;
    height: 0.95rem;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-kpi .app-kpi-card__icon,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-kpi .app-kpi-card__icon {
    border-color: color-mix(in srgb, var(--app-kpi-accent) 48%, rgba(148, 163, 184, 0.32));
    background: color-mix(in srgb, var(--app-kpi-accent) 18%, rgba(15, 23, 42, 0.82));
    color: color-mix(in srgb, var(--app-kpi-accent) 72%, #f8fafc 28%);
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi .app-kpi-card__meta {
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-kpi-note {
    margin: -0.2rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--withdrawals-text-soft);
}

@keyframes withdrawals-kpi-glow {
    0%,
    100% {
        box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--app-kpi-accent) 52%, rgba(3, 12, 30, 0.85));
    }
    50% {
        box-shadow: 0 23px 34px -24px color-mix(in srgb, var(--app-kpi-accent) 62%, rgba(3, 12, 30, 0.88));
    }
}

body[data-view="teacher/withdrawals"] .withdrawals-card {
    border: 1px solid var(--withdrawals-border);
    background: var(--withdrawals-card);
    box-shadow: var(--withdrawals-shadow);
    padding: 1.1rem;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

body[data-view="teacher/withdrawals"] .withdrawals-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 36px -26px rgba(2, 10, 28, 0.7);
}

body[data-view="teacher/withdrawals"] .withdrawals-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

body[data-view="teacher/withdrawals"] .withdrawals-section-title {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--app-text-base);
    font-weight: 700;
    color: var(--withdrawals-text);
}

body[data-view="teacher/withdrawals"] .withdrawals-section-title .app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--withdrawals-accent) 36%, transparent);
    background: color-mix(in srgb, var(--withdrawals-accent) 14%, transparent);
    color: color-mix(in srgb, var(--withdrawals-accent) 86%, #0f172a 14%);
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-section-title .app-icon,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-section-title .app-icon {
    border-color: color-mix(in srgb, var(--withdrawals-accent) 44%, rgba(148, 163, 184, 0.28));
    background: color-mix(in srgb, var(--withdrawals-accent) 22%, rgba(15, 23, 42, 0.82));
    color: color-mix(in srgb, var(--withdrawals-accent) 70%, #f8fafc 30%);
}

body[data-view="teacher/withdrawals"] .withdrawals-section-title .app-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-section-meta {
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-request {
    position: relative;
    overflow: hidden;
}

body[data-view="teacher/withdrawals"] .withdrawals-request::before {
    content: "";
    position: absolute;
    inset: -35% auto auto -12%;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(74, 128, 255, 0.22), transparent 70%);
}

body[data-view="teacher/withdrawals"] .withdrawals-request__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.65rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-summary-item {
    border-radius: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--withdrawals-accent) 22%, var(--withdrawals-border) 78%);
    background: color-mix(in srgb, var(--withdrawals-accent) 6%, var(--withdrawals-soft) 94%);
    padding: 0.6rem 0.8rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-summary-label {
    margin: 0;
    font-size: var(--app-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-summary-value {
    margin: 0.28rem 0 0;
    font-size: var(--app-text-base);
    font-weight: 800;
    color: var(--withdrawals-text);
}

body[data-view="teacher/withdrawals"] .withdrawals-note {
    border-radius: 0.9rem;
    border: 1px solid var(--withdrawals-border);
    padding: 0.6rem 0.8rem;
    font-size: var(--app-text-sm);
    font-weight: 600;
}

body[data-view="teacher/withdrawals"] .withdrawals-note--ok {
    border-color: color-mix(in srgb, var(--app-tone-success) 42%, var(--withdrawals-border) 58%);
    background: color-mix(in srgb, var(--app-tone-success) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-success) 80%, var(--withdrawals-text) 20%);
}

body[data-view="teacher/withdrawals"] .withdrawals-note--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 44%, var(--withdrawals-border) 56%);
    background: color-mix(in srgb, var(--app-tone-warning) 12%, transparent);
    color: color-mix(in srgb, var(--app-tone-warning) 78%, var(--withdrawals-text) 22%);
}

body[data-view="teacher/withdrawals"] .withdrawals-label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-input,
body[data-view="teacher/withdrawals"] .withdrawals-select {
    border-color: var(--withdrawals-border);
    background: color-mix(in srgb, var(--withdrawals-soft) 82%, #ffffff 18%);
    color: var(--withdrawals-text);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body[data-view="teacher/withdrawals"] .withdrawals-phone {
    display: flex;
    gap: 0.5rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-phone__code {
    min-width: 7.2rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-phone__input {
    flex: 1;
}

body[data-view="teacher/withdrawals"] .withdrawals-help {
    margin: 0.35rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--withdrawals-text-soft);
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-input,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-input,
html.dark body[data-view="teacher/withdrawals"] .withdrawals-select,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-select {
    background: color-mix(in srgb, var(--withdrawals-soft) 90%, rgba(9, 24, 52, 1) 10%);
}

body[data-view="teacher/withdrawals"] .withdrawals-input:focus,
body[data-view="teacher/withdrawals"] .withdrawals-select:focus {
    border-color: var(--withdrawals-border-strong);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--withdrawals-accent) 24%, transparent);
}

body[data-view="teacher/withdrawals"] .withdrawals-cta-btn {
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-tone-success) 85%, #0ea5e9 15%), color-mix(in srgb, var(--app-tone-success) 70%, #0f766e 30%));
    color: #ecfeff;
    box-shadow: 0 16px 26px -18px color-mix(in srgb, var(--app-tone-success) 70%, transparent);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-view="teacher/withdrawals"] .withdrawals-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 30px -18px color-mix(in srgb, var(--app-tone-success) 74%, transparent);
}

body[data-view="teacher/withdrawals"] .withdrawals-link-btn {
    border: 1px solid color-mix(in srgb, var(--withdrawals-accent) 40%, var(--withdrawals-border) 60%);
    background: color-mix(in srgb, var(--withdrawals-accent) 10%, transparent);
    color: color-mix(in srgb, var(--withdrawals-accent) 82%, var(--withdrawals-text) 18%);
}

body[data-view="teacher/withdrawals"] .withdrawals-hint {
    margin: 0;
    font-size: var(--app-text-xs);
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-table-wrap {
    border-radius: 1rem;
    border: 1px solid var(--withdrawals-border);
    background: color-mix(in srgb, var(--withdrawals-soft) 92%, transparent);
}

body[data-view="teacher/withdrawals"] .withdrawals-table {
    font-variant-numeric: tabular-nums;
}

body[data-view="teacher/withdrawals"] .withdrawals-table thead th {
    font-size: var(--app-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
    color: var(--withdrawals-text-soft);
    border-bottom: 1px solid var(--withdrawals-border);
}

body[data-view="teacher/withdrawals"] .withdrawals-table tbody td {
    color: var(--withdrawals-text);
    border-top: 1px solid color-mix(in srgb, var(--withdrawals-border) 80%, transparent);
}

body[data-view="teacher/withdrawals"] .withdrawals-table__row:hover {
    background: color-mix(in srgb, var(--withdrawals-accent) 8%, transparent);
}

body[data-view="teacher/withdrawals"] .withdrawals-table tfoot td {
    border-top: 1px solid var(--withdrawals-border);
    background: color-mix(in srgb, var(--withdrawals-accent) 6%, transparent);
    color: var(--withdrawals-text);
}

body[data-view="teacher/withdrawals"] .withdrawals-table__net,
body[data-view="teacher/withdrawals"] .withdrawals-net {
    color: color-mix(in srgb, var(--app-tone-success) 72%, var(--withdrawals-text) 28%);
}

body[data-view="teacher/withdrawals"] .withdrawals-empty {
    border-radius: 1rem;
    border: 1px dashed color-mix(in srgb, var(--withdrawals-accent) 30%, var(--withdrawals-border) 70%);
    background: color-mix(in srgb, var(--withdrawals-accent) 6%, transparent);
    text-align: center;
    padding: 1rem;
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--withdrawals-accent) 36%, transparent);
    background: color-mix(in srgb, var(--withdrawals-accent) 14%, transparent);
    color: color-mix(in srgb, var(--withdrawals-accent) 86%, #0f172a 14%);
    margin-bottom: 0.6rem;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-empty__icon,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-empty__icon {
    border-color: color-mix(in srgb, var(--withdrawals-accent) 44%, rgba(148, 163, 184, 0.28));
    background: color-mix(in srgb, var(--withdrawals-accent) 22%, rgba(15, 23, 42, 0.82));
    color: color-mix(in srgb, var(--withdrawals-accent) 70%, #f8fafc 30%);
}

body[data-view="teacher/withdrawals"] .withdrawals-empty__icon svg {
    width: 1rem;
    height: 1rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-empty__title {
    margin: 0;
    font-weight: 700;
    color: var(--withdrawals-text);
}

body[data-view="teacher/withdrawals"] .withdrawals-empty__subtitle {
    margin: 0.35rem 0 0.8rem;
    font-size: var(--app-text-sm);
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-empty__action {
    border: 1px solid color-mix(in srgb, var(--withdrawals-accent) 38%, var(--withdrawals-border) 62%);
    background: color-mix(in srgb, var(--withdrawals-accent) 10%, transparent);
    color: color-mix(in srgb, var(--withdrawals-accent) 82%, var(--withdrawals-text) 18%);
}

body[data-view="teacher/withdrawals"] .withdrawals-history-item {
    border-radius: 1rem;
    border: 1px solid var(--withdrawals-border);
    background: color-mix(in srgb, var(--withdrawals-soft) 92%, transparent);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: space-between;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

body[data-view="teacher/withdrawals"] .withdrawals-history-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px -22px rgba(2, 10, 28, 0.5);
}

body[data-view="teacher/withdrawals"] .withdrawals-history-main {
    display: grid;
    gap: 0.2rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-history-amount {
    margin: 0;
    font-weight: 700;
    color: var(--withdrawals-text);
}

body[data-view="teacher/withdrawals"] .withdrawals-history-meta {
    margin: 0;
    font-size: var(--app-text-xs);
    color: var(--withdrawals-text-soft);
}

body[data-view="teacher/withdrawals"] .withdrawals-history-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

body[data-view="teacher/withdrawals"] .withdrawals-status--cancelled {
    background-color: #e11d48 !important;
    border-color: #be123c !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px -12px rgba(225, 29, 72, 0.6) !important;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-status--cancelled,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-status--cancelled {
    background-color: #f43f5e !important;
    border-color: #fb7185 !important;
    color: #ffffff !important;
}

body[data-view="teacher/withdrawals"] .withdrawals-cancel-form {
    margin: 0;
}

body[data-view="teacher/withdrawals"] .withdrawals-cancel-btn {
    border: 1px solid color-mix(in srgb, var(--app-tone-danger) 46%, var(--withdrawals-border) 54%);
    background: color-mix(in srgb, var(--app-tone-danger) 10%, transparent);
    color: color-mix(in srgb, var(--app-tone-danger) 78%, var(--withdrawals-text) 22%);
    border-radius: 999px;
    padding: 0.25rem 0.8rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

body[data-view="teacher/withdrawals"] .withdrawals-cancel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px -14px color-mix(in srgb, var(--app-tone-danger) 60%, transparent);
}

@media (min-width: 640px) {
    body[data-view="teacher/withdrawals"] .withdrawals-history-item {
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 700px) {
    body[data-view="teacher/withdrawals"] .withdrawals-actions {
        width: 100%;
        justify-content: stretch;
    }

    body[data-view="teacher/withdrawals"] .withdrawals-cta-btn {
        width: 100%;
    }
}

@media (min-width: 900px) {
    body[data-view="teacher/withdrawals"] .withdrawals-period-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }
}

@media (min-width: 900px) {
    body[data-view="teacher/meetings"] .teacher-meetings-filter__dynamic {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    body[data-view="teacher/meetings"] .teacher-meeting-confirm__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[data-view="teacher/meetings"] .teacher-meetings-filter__actions {
        justify-content: stretch;
    }

    body[data-view="teacher/meetings"] .teacher-meetings-filter__submit {
        width: 100%;
    }

    body[data-view="teacher/meetings"] .teacher-meeting-summary__aside {
        width: 100%;
    }

    body[data-view="teacher/meetings"] .teacher-meeting-confirm__form {
        padding: 0.7rem;
    }
}

/* Teacher meetings: visual refresh aligned with dashboard navy style */
body[data-view="teacher/meetings"] {
    --teacher-meetings-accent: var(--app-primary-600);
    --teacher-meetings-accent-strong: var(--app-primary-500);
    --teacher-meetings-text: var(--app-text);
    --teacher-meetings-text-soft: var(--app-muted);
    --teacher-meetings-border: color-mix(in srgb, var(--app-primary-300) 34%, #cbd5e1 66%);
    --teacher-meetings-border-strong: color-mix(in srgb, var(--app-primary-400) 56%, #cbd5e1 44%);
    --teacher-meetings-panel: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.96));
    --teacher-meetings-card: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(242, 248, 255, 0.94));
    --teacher-meetings-soft: rgba(232, 242, 255, 0.92);
    --teacher-meetings-chip-bg-base: rgba(255, 255, 255, 1);
    --teacher-meetings-chip-soft-start: rgba(94, 146, 255, 0.2);
    --teacher-meetings-chip-soft-end: rgba(245, 250, 255, 0.98);
    --teacher-meetings-stat-base-a: rgba(248, 252, 255, 0.98);
    --teacher-meetings-stat-base-b: rgba(239, 246, 255, 0.96);
    --teacher-meetings-filter-panel: linear-gradient(160deg, rgba(248, 252, 255, 0.98), rgba(241, 248, 255, 0.96));
    --teacher-meetings-input-bg: color-mix(in srgb, #ffffff 78%, var(--teacher-meetings-soft) 22%);
    --teacher-meetings-shadow: 0 24px 42px -34px rgba(15, 23, 42, 0.28);
    background:
        radial-gradient(circle at 8% 10%, rgba(71, 122, 255, 0.18), transparent 38%),
        radial-gradient(circle at 92% 2%, rgba(21, 178, 255, 0.12), transparent 36%),
        linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #eff5ff 100%) !important;
}

html.dark body[data-view="teacher/meetings"],
html[data-theme="dark"] body[data-view="teacher/meetings"] {
    --teacher-meetings-accent: var(--app-primary-300);
    --teacher-meetings-accent-strong: #9ec3ff;
    --teacher-meetings-text: #edf4ff;
    --teacher-meetings-text-soft: #9db1d3;
    --teacher-meetings-border: color-mix(in srgb, var(--app-primary-300) 34%, rgba(148, 163, 184, 0.24) 66%);
    --teacher-meetings-border-strong: color-mix(in srgb, var(--app-primary-200) 56%, rgba(148, 163, 184, 0.2) 44%);
    --teacher-meetings-panel: linear-gradient(150deg, rgba(11, 28, 62, 0.96), rgba(7, 20, 46, 0.96));
    --teacher-meetings-card: linear-gradient(160deg, rgba(14, 35, 76, 0.96), rgba(8, 22, 49, 0.96));
    --teacher-meetings-soft: rgba(16, 36, 74, 0.88);
    --teacher-meetings-chip-bg-base: rgba(8, 20, 47, 1);
    --teacher-meetings-chip-soft-start: rgba(28, 65, 136, 0.45);
    --teacher-meetings-chip-soft-end: rgba(12, 32, 71, 0.95);
    --teacher-meetings-stat-base-a: rgba(18, 40, 83, 0.95);
    --teacher-meetings-stat-base-b: rgba(9, 24, 52, 0.95);
    --teacher-meetings-filter-panel: linear-gradient(160deg, rgba(14, 34, 73, 0.95), rgba(8, 21, 49, 0.95));
    --teacher-meetings-input-bg: color-mix(in srgb, var(--teacher-meetings-soft) 90%, rgba(9, 24, 52, 1) 10%);
    --teacher-meetings-shadow: 0 26px 50px -38px rgba(1, 8, 23, 0.94);
    background:
        radial-gradient(circle at 8% 10%, rgba(71, 122, 255, 0.28), transparent 38%),
        radial-gradient(circle at 92% 2%, rgba(21, 178, 255, 0.18), transparent 36%),
        linear-gradient(180deg, #061127 0%, #040c1d 44%, #05132f 100%) !important;
}

body[data-view="teacher/meetings"] .teacher-hub-main {
    color: var(--teacher-meetings-text);
}

body[data-view="teacher/meetings"] .teacher-meetings-hero {
    position: relative;
    overflow: hidden;
    border-color: var(--teacher-meetings-border) !important;
    background: var(--teacher-meetings-panel) !important;
    box-shadow: var(--teacher-meetings-shadow) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-hero::before {
    content: "";
    position: absolute;
    inset: -42% auto auto -16%;
    width: 20rem;
    height: 20rem;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(74, 128, 255, 0.26), transparent 70%);
}

body[data-view="teacher/meetings"] :is(.teacher-meetings-hero__kicker, .teacher-meetings-stat__label, .teacher-meetings-label) {
    color: var(--teacher-meetings-text-soft) !important;
}

body[data-view="teacher/meetings"] :is(.teacher-meetings-hero__title, .teacher-meetings-stat__value, .teacher-meeting-title, .teacher-meetings-empty__title) {
    color: var(--teacher-meetings-text) !important;
}

body[data-view="teacher/meetings"] :is(.teacher-meetings-hero__subtitle, .teacher-meetings-stat__meta, .teacher-meeting-course, .teacher-meeting-meta, .teacher-meeting-info__subtitle, .teacher-meeting-slot__time, .teacher-meetings-empty__subtitle) {
    color: var(--teacher-meetings-text-soft) !important;
}

body[data-view="teacher/meetings"] .teacher-meeting-chip {
    border-color: var(--teacher-meetings-border) !important;
    background: color-mix(in srgb, var(--teacher-meetings-soft) 88%, var(--teacher-meetings-chip-bg-base) 12%) !important;
    color: var(--teacher-meetings-text) !important;
    box-shadow: 0 10px 20px -18px rgba(30, 77, 214, 0.5);
}

body[data-view="teacher/meetings"] .teacher-meeting-chip--soft {
    background: linear-gradient(140deg, var(--teacher-meetings-chip-soft-start), var(--teacher-meetings-chip-soft-end)) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-stats {
    margin-top: 1.1rem;
    gap: 0.85rem;
}

body[data-view="teacher/meetings"] .teacher-meetings-stat {
    --meetings-kpi-tone: var(--teacher-meetings-accent);
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--meetings-kpi-tone) 42%, var(--teacher-meetings-border) 58%) !important;
    background: linear-gradient(150deg, color-mix(in srgb, var(--meetings-kpi-tone) 24%, var(--teacher-meetings-stat-base-a) 76%), var(--teacher-meetings-stat-base-b)) !important;
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--meetings-kpi-tone) 52%, rgba(3, 12, 30, 0.85));
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
    animation: teacher-meetings-kpi-glow 8s ease-in-out infinite;
}

body[data-view="teacher/meetings"] .teacher-meetings-stat::after {
    content: "";
    position: absolute;
    inset: auto -26% -54% auto;
    width: 6rem;
    height: 6rem;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--meetings-kpi-tone) 34%, transparent), transparent 70%);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--meetings-kpi-tone) 66%, var(--teacher-meetings-border) 34%) !important;
    box-shadow: 0 24px 36px -24px color-mix(in srgb, var(--meetings-kpi-tone) 56%, rgba(4, 12, 29, 0.86));
}

body[data-view="teacher/meetings"] .teacher-meetings-stat--total {
    --meetings-kpi-tone: var(--app-primary-400);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat--pending {
    --meetings-kpi-tone: var(--app-warning);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat--confirmed {
    --meetings-kpi-tone: var(--app-success);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat--cancelled {
    --meetings-kpi-tone: var(--app-danger);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat__head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

body[data-view="teacher/meetings"] .teacher-meetings-stat__icon {
    display: inline-flex;
    height: 1.8rem;
    width: 1.8rem;
    flex: 0 0 1.8rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--meetings-kpi-tone) 56%, transparent);
    background: color-mix(in srgb, var(--meetings-kpi-tone) 16%, transparent);
    color: color-mix(in srgb, var(--meetings-kpi-tone) 88%, #0f172a 12%);
}

body[data-view="teacher/meetings"] .teacher-meetings-stat__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

@keyframes teacher-meetings-kpi-glow {
    0%,
    100% {
        box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--meetings-kpi-tone) 52%, rgba(3, 12, 30, 0.85));
    }
    50% {
        box-shadow: 0 23px 34px -24px color-mix(in srgb, var(--meetings-kpi-tone) 62%, rgba(3, 12, 30, 0.88));
    }
}

body[data-view="teacher/meetings"] .teacher-meetings-filter {
    border-color: var(--teacher-meetings-border) !important;
    background: var(--teacher-meetings-panel) !important;
    box-shadow: var(--teacher-meetings-shadow) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-filter__panel {
    border-color: color-mix(in srgb, var(--teacher-meetings-accent) 42%, var(--teacher-meetings-border) 58%) !important;
    background: var(--teacher-meetings-filter-panel) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-input {
    border-color: var(--teacher-meetings-border) !important;
    background: var(--teacher-meetings-input-bg) !important;
    color: var(--teacher-meetings-text) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-input::placeholder {
    color: color-mix(in srgb, var(--teacher-meetings-text-soft) 85%, transparent);
}

body[data-view="teacher/meetings"] .teacher-meetings-input:focus {
    border-color: var(--teacher-meetings-border-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teacher-meetings-accent) 28%, transparent);
}

body[data-view="teacher/meetings"] :is(.teacher-meetings-filter__submit, .teacher-meeting-confirm__submit) {
    box-shadow: 0 14px 24px -18px color-mix(in srgb, var(--app-primary) 58%, transparent) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-empty,
body[data-view="teacher/meetings"] .teacher-meeting-card,
body[data-view="teacher/meetings"] .teacher-meeting-info,
body[data-view="teacher/meetings"] .teacher-meeting-slot,
body[data-view="teacher/meetings"] .teacher-meeting-confirm__form {
    border-color: var(--teacher-meetings-border) !important;
    background: var(--teacher-meetings-card) !important;
    box-shadow: 0 18px 30px -26px rgba(2, 10, 27, 0.9);
}

body[data-view="teacher/meetings"] .teacher-meeting-card[open] {
    border-color: var(--teacher-meetings-border-strong) !important;
}

body[data-view="teacher/meetings"] .teacher-meeting-confirm__toggle {
    border-color: var(--teacher-meetings-border) !important;
    background: var(--teacher-meetings-input-bg) !important;
    color: var(--teacher-meetings-text) !important;
}

body[data-view="teacher/meetings"] :is(.teacher-meetings-hero, .teacher-meetings-filter, .teacher-meetings-stat, .teacher-meeting-card, .teacher-meetings-empty) {
    border: none !important;
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body[data-view="teacher/meetings"] :is(.teacher-meetings-hero, .teacher-meetings-filter, .teacher-meetings-stat, .teacher-meeting-card, .teacher-meetings-empty):hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 38px -26px rgba(2, 10, 28, 0.72) !important;
}

body[data-view="teacher/meetings"] .teacher-meeting-card[open] {
    border: none !important;
    transform: translateY(-2px);
    box-shadow: 0 24px 38px -26px rgba(2, 10, 28, 0.74) !important;
}

body[data-view="teacher/meetings"] .teacher-meetings-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto 0.35rem;
    border-radius: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--teacher-meetings-accent) 56%, transparent);
    background: color-mix(in srgb, var(--teacher-meetings-accent) 18%, transparent);
    color: color-mix(in srgb, var(--teacher-meetings-accent) 84%, #0f172a 16%);
}

body[data-view="teacher/meetings"] .teacher-meetings-empty__icon svg {
    width: 1rem;
    height: 1rem;
}

body[data-view="teacher/referrals"] [data-referral-copy-wrap] .flex {
    flex-wrap: wrap;
}

body[data-view="teacher/referrals"] [data-referral-copy-wrap] .flex > input[type="text"] {
    flex: 1 1 16rem;
    min-width: 0;
}

body[data-view="teacher/referrals"] [data-referral-copy-wrap] .flex > .referral-copy-btn {
    flex: 0 0 auto;
}

body[data-view="teacher/referrals"] .referral-open-btn {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 52%, transparent) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, #0f172a 18%) !important;
    font-weight: 700;
}

body[data-view="teacher/referrals"] .referral-open-btn:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, transparent) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-surface) 84%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 92%, #0f172a 8%) !important;
}

html.dark body[data-view="teacher/referrals"] .referral-open-btn {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 52%, rgba(148, 163, 184, 0.35) 48%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 20%, rgba(15, 23, 42, 0.92) 80%) !important;
    color: #dbeafe !important;
}

html.dark body[data-view="teacher/referrals"] .referral-open-btn:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 68%, rgba(148, 163, 184, 0.32) 32%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, rgba(15, 23, 42, 0.92) 72%) !important;
}

@media (max-width: 640px) {
    body[data-view="teacher/referrals"] [data-referral-copy-wrap] .flex > input[type="text"],
    body[data-view="teacher/referrals"] [data-referral-copy-wrap] .flex > .referral-copy-btn,
    body[data-view="teacher/referrals"] [data-referral-copy-wrap] a {
        width: 100%;
    }

    body[data-view="teacher/referrals"] [data-referral-copy-wrap] a {
        justify-content: center;
    }
}

body:is([data-view="teacher/referrals"], [data-view="student/referrals"]) .referral-copy-btn {
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, var(--app-border) 44%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 80%, #0f172a 20%) !important;
    box-shadow: 0 8px 18px -14px rgba(37, 99, 235, 0.45);
}

body:is([data-view="teacher/referrals"], [data-view="student/referrals"]) .referral-copy-btn:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, var(--app-border) 30%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-surface) 84%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 90%, #0f172a 10%) !important;
}

body:is([data-view="teacher/referrals"], [data-view="student/referrals"]) .referral-copy-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.45rem;
    padding: 0.1rem 0.56rem;
    border-radius: 9999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, var(--app-border) 44%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 80%, #0f172a 20%);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    line-height: 1;
}

html.dark body:is([data-view="teacher/referrals"], [data-view="student/referrals"]) .referral-copy-btn {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, rgba(148, 163, 184, 0.35) 44%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, rgba(15, 23, 42, 0.92) 76%) !important;
    color: #dbeafe !important;
}

html.dark body:is([data-view="teacher/referrals"], [data-view="student/referrals"]) .referral-copy-chip {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, rgba(148, 163, 184, 0.35) 44%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, rgba(15, 23, 42, 0.92) 76%);
    color: #dbeafe;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main > :is(section, details, #exam-autosave-box, #exam-live-validation) {
    border-radius: 1.08rem !important;
}

body[data-view="teacher/exams_create"] #exam-form > :is(section, .grid, #qcm-builder) {
    border-radius: 1rem !important;
}

body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) .teacher-workflow-main > :is(section, details) {
    border-radius: 1.08rem !important;
}

@media (max-width: 900px) {
    body.app-role-teacher[data-view^="teacher/"] :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) {
        padding-top: 0.85rem !important;
        padding-bottom: 1rem !important;
    }

    .teacher-stats-hero {
        padding: 1rem !important;
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar {
        top: 0.4rem !important;
        padding: 0.78rem !important;
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar form > .flex {
        flex-wrap: wrap;
        gap: 0.4rem 0.5rem;
        align-items: center;
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar .dash-section-label {
        flex: 0 0 100%;
        margin-right: 0;
        font-size: var(--app-text-2xs);
        letter-spacing: 0.16em;
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar .period-btn {
        min-height: 1.9rem;
        padding: 0.28rem 0.6rem;
        font-size: var(--app-text-xs);
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar .ml-auto {
        margin-left: 0 !important;
        flex: 0 0 100%;
        text-align: right;
        font-size: var(--app-text-xs);
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar .grid {
        grid-template-columns: 1fr;
    }

    body.app-role-teacher[data-view^="teacher/"] .filter-bar button[type="submit"]:not(.period-btn) {
        width: 100%;
    }

    body[data-view="teacher/withdrawals"] .withdrawals-period-grid {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/withdrawals"] .withdrawals-period-grid .app-btn-primary {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    body[data-view="teacher/courses"] #courses-filter-form,
    body:is([data-view="teacher/course_content"], [data-view="teacher/course_edit"]) #tabs-container {
        position: static;
    }

    body[data-view="teacher/courses"] [data-course-actions="card"] > :is(a, form) {
        flex: 1 1 100%;
    }

    body[data-view="teacher/courses"] [data-course-bulk-form] :is(select, button) {
        width: 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .ml-auto {
        margin-left: 0 !important;
        width: 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .grid {
        grid-template-columns: 1fr;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-bar] {
        padding: 0.6rem 0.65rem !important;
        border-radius: 0.9rem !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] > .flex {
        align-items: center;
        width: 100%;
        overflow: visible;
        flex-wrap: wrap !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .period-btn {
        min-width: 0;
        flex: 0 0 auto;
        min-height: 1.85rem;
        padding: 0.26rem 0.6rem !important;
        font-size: var(--app-text-xs) !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] .period-btn:last-child {
        min-width: 7.6rem;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] label {
        font-size: var(--app-text-xs) !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] input[type="date"] {
        min-height: 2.1rem !important;
        font-size: var(--app-text-sm) !important;
        padding-top: 0.34rem !important;
        padding-bottom: 0.34rem !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] button[name="period"][value="custom"],
    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-period-form] button[type="submit"] {
        min-height: 2.1rem !important;
        font-size: var(--app-text-sm) !important;
        padding: 0.4rem 0.8rem !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] > div {
        display: grid;
        gap: 0.72rem;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] p {
        overflow-wrap: anywhere;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .inline-flex.rounded-full {
        max-width: 100%;
        white-space: normal;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-actions :is(a, button) {
        width: 100%;
        justify-content: center;
        font-size: var(--app-text-sm);
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] > div > .flex.flex-wrap.gap-2 {
        width: 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] > div > .flex.flex-wrap.gap-2 :is(button, a) {
        flex: 1 1 100%;
        justify-content: center;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-actions] > :is([data-promo-edit-details], [data-promo-delete-form]) {
        margin-left: 0;
        flex: 1 1 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-actions] :is(summary, button) {
        width: 100%;
        justify-content: center;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-coupon-insights-grid] {
        grid-template-columns: 1fr;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-list-filters] {
        width: 100%;
        justify-content: flex-start;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-filter-btn {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-unified-toolbar {
        grid-template-columns: 1fr;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-unified-toolbar > :last-child {
        width: 100%;
        align-items: stretch;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-unified-toolbar > :last-child > p {
        text-align: left !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-section-actions {
        width: 100%;
        justify-content: space-between;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-list-section-actions .app-btn-primary {
        width: 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card-head] > .text-right {
        width: 100%;
        min-width: 0;
        text-align: left !important;
        border-top: 1px solid var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
        padding-top: 0.55rem;
        margin-top: 0.15rem;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-card] :is([data-promo-card-head] .text-xl, [data-promo-card-head] .text-lg) {
        font-size: var(--app-text-xl) !important;
        line-height: 1.18 !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is([data-promo-delete-modal], [data-promo-target-modal], [data-promo-create-modal]) {
        padding: 0.5rem !important;
        align-items: flex-start !important;
        overflow-y: auto;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) :is([data-modal-panel], [data-target-panel], [data-create-panel]) {
        width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        margin-top: 0.25rem;
        padding: 0.9rem !important;
    }

    body[data-view="teacher/reviews"] .reviews-filter-panel {
        padding: 0.68rem;
    }

    body[data-view="teacher/reviews"] .reviews-filter-actions {
        width: 100%;
    }

    body[data-view="teacher/reviews"] .reviews-filter-actions :is(button, a) {
        flex: 1 1 100%;
    }

    body[data-view="teacher/reviews"] .reviews-filter-query {
        width: 100%;
        justify-content: center;
    }

    body:is([data-view="teacher/withdrawals"], [data-view="teacher/meetings"], [data-view="teacher/referrals"]) .teacher-hub-main :is(.grid, .flex)[class*="md:grid-cols"] {
        gap: 0.62rem !important;
    }

    body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main > section:first-child .flex.flex-wrap.items-center.gap-3 {
        width: 100%;
    }

    body:is([data-view="teacher/exam_preview"], [data-view="teacher/exams_manage"]) .teacher-hub-main > section:first-child .flex.flex-wrap.items-center.gap-3 :is(a, button, form) {
        flex: 1 1 100%;
    }

    body[data-view="teacher/apply"] > .relative.z-10.w-full.max-w-4xl {
        padding: 1rem !important;
        border-radius: 1.16rem !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .dash-enter {
        animation: dashEnter 320ms ease both;
    }

    .dash-enter-2 {
        animation-delay: 70ms;
    }

    .dash-enter-3 {
        animation-delay: 120ms;
    }
}

@keyframes dashEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1023px) {
    .app-overview-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .app-overview-metrics {
        grid-template-columns: 1fr;
    }

    .student-content-main {
        padding-top: 0.95rem !important;
        padding-bottom: 1.05rem !important;
    }

    .student-content-main > :not(script) + :not(script) {
        margin-top: 0.9rem !important;
    }

    .student-content-main .app-page-hero__title,
    .student-content-main :is(h1.text-xl, h2.text-lg) {
        font-size: var(--app-text-lg) !important;
    }

    .student-content-main .app-kpi-card__value,
    .student-content-main .text-2xl {
        font-size: var(--app-text-2xl) !important;
    }
}

html.dark .app-overview-panel,
html.dark .dash-card,
html.dark .app-kpi-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
}

html.dark .app-overview-metric,
html.dark .priority-item,
html.dark .performance-pill,
html.dark .dash-btn--ghost {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, rgba(15, 23, 42, 0.94) 94%);
}

html.dark .app-overview-metric,
html.dark .priority-item,
html.dark .performance-pill,
html.dark .dash-card,
html.dark .app-kpi-card {
    box-shadow: 0 14px 26px -22px rgba(2, 6, 23, 0.82);
}

html.dark :is(.dash-badge--teacher, .app-status-pill--teacher, .app-status-pill--info) {
    color: #bfdbfe;
}

html.dark :is(.dash-badge--active, .app-status-pill--active) {
    color: #99f6e4;
}

html.dark :is(.dash-badge--pending, .app-status-pill--pending) {
    color: #fde68a;
}

html.dark :is(.dash-badge--urgent, .app-status-pill--urgent) {
    color: #fecaca;
}

html.dark :is(.dash-badge--done, .app-status-pill--done) {
    color: #cbd5e1;
}

html.dark :is(.dash-badge--sky, .app-status-pill--sky) {
    color: #bae6fd;
}

html.dark :is(.app-page-hero, .app-page-section-card, .app-page-subcard, .app-page-list-item, .app-alert-card) {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
    box-shadow: 0 14px 26px -22px rgba(2, 6, 23, 0.82);
}

/* App feedback */
.app-feedback {
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-border);
    padding: 0.75rem 0.95rem;
}

.app-feedback--success {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-border) 62%);
    background: color-mix(in srgb, var(--app-success) 12%, transparent);
    color: color-mix(in srgb, var(--app-success) 74%, var(--app-text) 26%);
}

.app-feedback--error {
    border-color: color-mix(in srgb, var(--app-danger) 38%, var(--app-border) 62%);
    background: color-mix(in srgb, var(--app-danger) 12%, transparent);
    color: color-mix(in srgb, var(--app-danger) 74%, var(--app-text) 26%);
}

/* Skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--app-gray-100) 25%, var(--app-gray-200) 50%, var(--app-gray-100) 75%);
    background-size: 200% 100%;
    animation: appShimmer 1.5s linear infinite;
}

html.dark .skeleton {
    background: linear-gradient(90deg, var(--app-gray-700) 25%, var(--app-gray-600) 50%, var(--app-gray-700) 75%);
    background-size: 200% 100%;
}

@keyframes appShimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/* Live badges in top bars */
:where([data-live-notif-badge], [data-live-support-badge], [data-live-user-menu-total-badge]) {
    display: inline-flex;
    min-width: 1.1rem;
    height: 1.1rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border-radius: var(--app-radius-full);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    line-height: 1;
}

:where([data-live-notif-badge]).hidden,
:where([data-live-support-badge]).hidden,
:where([data-live-user-menu-total-badge]).hidden {
    display: none !important;
}

/* Theme toggle button generated by JS */
.app-theme-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.app-theme-toggle-icon [data-theme-label] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
}

.app-theme-toggle-icon [data-theme-label] > svg {
    width: 1.125rem;
    height: 1.125rem;
}

.app-theme-fab {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--app-radius-full);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface);
    color: var(--app-text-secondary);
    box-shadow: var(--app-shadow-md);
    transition: border-color var(--app-transition-fast), color var(--app-transition-fast), transform var(--app-transition-fast);
}

.app-theme-fab:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    color: var(--app-text);
    transform: translateY(-1px);
}

.app-font-scale-fab {
    position: fixed;
    right: 1rem;
    bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
    z-index: 49;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem;
    border-radius: var(--app-radius-full);
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    box-shadow: var(--app-shadow);
}

.app-kpi-fab {
    position: fixed;
    left: 1rem;
    bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px));
    z-index: 49;
}

.app-font-scale-btn {
    min-width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: var(--app-radius-full);
    padding: 0 0.54rem;
    background: transparent;
    color: var(--app-text-secondary);
    font-family: var(--app-font-ui);
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: var(--app-interactive-transition);
}

.app-font-scale-btn:hover {
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.app-font-scale-btn.is-active {
    border-color: color-mix(in srgb, var(--app-primary) 54%, transparent);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    color: #ffffff;
    box-shadow: var(--app-shadow-sm);
}

.app-font-scale-btn:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring);
}

.app-scroll-top {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 48;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: var(--app-radius-full);
    border: 1px solid color-mix(in srgb, var(--app-primary) 45%, transparent);
    background: linear-gradient(135deg, var(--app-primary), var(--app-primary-strong));
    color: #ffffff;
    box-shadow: var(--app-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition: opacity var(--app-transition-fast), visibility var(--app-transition-fast), transform var(--app-transition-fast), filter var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.app-scroll-top > svg {
    width: 1.15rem;
    height: 1.15rem;
}

.app-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.app-scroll-top:hover {
    filter: brightness(1.03);
    box-shadow: 0 18px 34px -24px rgba(37, 99, 235, 0.5);
}

.app-scroll-top:focus-visible {
    outline: none;
    box-shadow: var(--app-focus-ring), 0 18px 34px -24px rgba(37, 99, 235, 0.5);
}

html.dark .app-scroll-top,
html[data-theme="dark"] .app-scroll-top {
    border-color: color-mix(in srgb, var(--app-primary-300) 56%, transparent);
    box-shadow: 0 16px 30px -22px rgba(59, 130, 246, 0.5);
}

html.dark .app-font-scale-fab,
html[data-theme="dark"] .app-font-scale-fab {
    border-color: var(--app-border);
    background: color-mix(in srgb, rgba(15, 23, 42, 0.88) 86%, var(--app-primary-300) 14%);
}

html.dark .app-kpi-fab,
html[data-theme="dark"] .app-kpi-fab {
    border-color: var(--app-border) !important;
}

@media (max-width: 767px) {
    .app-font-scale-fab {
        right: 0.75rem;
        bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
        gap: 0.26rem;
        padding: 0.24rem;
    }

    .app-font-scale-btn {
        min-width: 1.88rem;
        height: 1.88rem;
        padding: 0 0.5rem;
    }

    .app-scroll-top {
        right: 0.75rem;
        bottom: calc(0.82rem + env(safe-area-inset-bottom, 0px));
        width: 2.5rem;
        height: 2.5rem;
    }

    .app-kpi-fab {
        left: 0.75rem;
        bottom: calc(0.82rem + env(safe-area-inset-bottom, 0px));
    }
}

body[data-view="teacher/course_edit"] .app-scroll-top {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

@media print {
    .app-font-scale-fab,
    .app-scroll-top,
    .app-kpi-fab {
        display: none !important;
    }
}

/* Command palette (Ctrl/Cmd + K) */
.app-cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: start center;
    padding: 5.5rem 1rem 1rem;
    background: rgba(17, 24, 39, 0.32);
}

.app-cmdk-overlay.hidden {
    display: none !important;
}

.app-cmdk-panel {
    width: min(92vw, 760px);
    border-radius: 1rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface-strong);
    box-shadow: var(--app-shadow-md);
    overflow: hidden;
}

.app-cmdk-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--app-shell-border, var(--app-border));
}

.app-cmdk-input {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--app-text);
    font-size: var(--app-text-base);
    outline: none;
}

.app-cmdk-hint {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

.app-cmdk-list {
    max-height: min(54vh, 520px);
    overflow-y: auto;
    padding: 0.35rem;
}

.app-cmdk-item {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-text-secondary);
    border-radius: 0.65rem;
    padding: 0.6rem 0.7rem;
    text-align: left;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
    cursor: pointer;
}

.app-cmdk-item small {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
}

.app-cmdk-item:hover,
.app-cmdk-item.is-active {
    border-color: var(--app-shell-border-strong, var(--app-border-strong));
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface) 92%);
    color: var(--app-text);
}

.app-cmdk-empty {
    padding: 0.9rem;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

.app-cmdk-foot {
    border-top: 1px solid var(--app-shell-border, var(--app-border));
    padding: 0.45rem 0.85rem;
    color: var(--app-muted);
    font-size: var(--app-text-xs);
}

/* Mobile sidebar behavior */
@media (max-width: 767px) {
    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin)[data-view] {
        overflow-x: hidden;
        --app-toolbar-offset-current: var(--app-toolbar-height-mobile);
        --app-toolbar-offset-extra: 0.35rem;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin)[data-view] > .relative.z-10,
    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin)[data-view] .flex-1.min-w-0,
    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin)[data-view] .app-shell-toolbar,
    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin)[data-view] .app-shell-toolbar__inner,
    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin)[data-view] main {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .app-shell-sidebar.js-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: min(84vw, 17rem);
        max-width: 17rem;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        transform: translateX(-110%) !important;
        transition: transform var(--app-transition) !important;
        overflow: hidden !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .app-shell-sidebar.js-sidebar.left-0 {
        transform: translateX(0) !important;
    }

    .app-shell-sidebar.js-sidebar.-left-full {
        transform: translateX(-110%) !important;
    }

    .app-shell-sidebar.js-sidebar .app-shell-sidebar__brand {
        position: sticky;
        top: 0;
        z-index: 2;
        flex-shrink: 0;
    }

    .app-shell-sidebar.js-sidebar .app-shell-sidebar__nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .app-shell-toolbar {
        padding: 0.5rem 0.75rem !important;
        min-height: var(--app-toolbar-height-mobile);
    }

    .app-shell-toolbar__mobile-logo {
        display: inline-flex;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] :is(.app-shell-toolbar + *, .app-shell-toolbar + script + *) {
        margin-top: calc(var(--app-toolbar-offset-current, var(--app-toolbar-height-mobile)) + var(--app-toolbar-offset-extra, 0px)) !important;
    }

    .app-shell-toolbar__title {
        font-size: clamp(var(--app-text-base), 5vw, var(--app-text-xl)) !important;
    }

    .app-shell-toolbar__actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
        gap: 0.52rem;
        overflow: visible;
        max-width: 100%;
        width: 100%;
        align-items: stretch;
        justify-items: stretch;
    }

    .app-shell-toolbar__actions > * {
        min-width: 0;
        max-width: none;
        width: 100%;
        justify-content: center !important;
        text-align: center;
    }

    body.app-kpi-mobile-hidden :is(
        .app-kpi-card,
        .student-hero-stat,
        .student-stat-card,
        .ref-kpi,
        .stats-kpi,
        .promo-kpi-card,
        .admin-courses-kpi,
        .teacher-courses-kpi,
        .teacher-courses-hero-stat,
        .exam-create-stat,
        .teacher-meetings-stat,
        .withdrawals-kpi,
        .admin-dashboard-kpi-surface,
        .admin-courses-kpi-item,
        .course-insight-stat,
        .reviews-kpi,
        .support-kpi,
        .teacher-stats-mini-card,
        .teacher-stats-soft-card,
        .teacher-stats-list-card,
        .course-edit-kpi,
        [data-coupon-kpi-card]
    ) {
        display: none !important;
    }

    body.app-kpi-mobile-hidden :is(
        .student-hero-stats,
        .student-stat-grid,
        .ref-kpi-grid,
        .stats-hero__kpis,
        .promo-kpi-grid,
        [data-promo-kpis],
        .teacher-courses-hero__stats,
        .exam-create-hero__stats,
        .teacher-meetings-stats,
        .withdrawals-kpis,
        .admin-courses-kpi-grid,
        [data-coupon-kpi-grid],
        .course-insight-stats-grid,
        [data-reviews-kpis],
        [data-course-kpi-group]
    ) {
        display: none !important;
    }

    body.app-kpi-mobile-hidden [data-course-kpi-group] > div {
        display: none !important;
    }

    .app-shell-toolbar__actions .app-shell-chip--notification {
        width: 100%;
        min-width: 0;
        justify-content: center;
        gap: 0.36rem !important;
        padding: var(--app-chip-padding) !important;
    }

    .app-shell-toolbar__actions .app-shell-chip--notification [data-live-notif-badge] {
        position: static;
        min-width: 1.02rem;
        height: 1.02rem;
        margin-left: 0.15rem;
    }

    body.app-role-admin[data-view] .app-shell-toolbar__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.52rem;
    }

    body.app-role-admin[data-view] .app-shell-toolbar__actions > * {
        min-height: var(--app-control-height-sm);
    }

    body.app-role-admin[data-view] .app-shell-toolbar__actions :is(.app-status-pill, .admin-topbar-badge) {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    body.app-role-admin[data-view^="admin/"] .admin-shell-main {
        padding-top: var(--admin-topbar-offset-mobile, 4.2rem);
    }

    .app-shell-toolbar__titleblock {
        max-width: calc(100vw - 7.7rem);
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .teacher-hub-main {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-main] > * {
        max-width: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-badges {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
        gap: 0.45rem;
        width: 100%;
    }

    body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) [data-promo-hero] .promo-hero-badges > * {
        justify-content: center;
        text-align: center;
        white-space: normal;
        font-size: var(--app-text-2xs);
        padding: 0.3rem 0.5rem;
    }

    :is(.app-shell-chip, .app-shell-theme, .app-shell-burger, .admin-topbar-action) {
        min-height: var(--app-control-height-sm);
        padding: var(--app-chip-padding) !important;
        font-size: var(--app-text-xs) !important;
        line-height: var(--app-leading-xs);
    }

    .app-shell-theme--desktop {
        display: none !important;
    }

    .app-shell-chip--notification {
        width: var(--app-control-height-sm);
        min-width: var(--app-control-height-sm);
        justify-content: center;
        gap: 0 !important;
        padding: 0 !important;
    }

    .app-shell-chip--notification > :not(.app-icon):not([data-live-notif-badge]) {
        display: none !important;
    }

    .app-shell-toolbar__actions :is([data-topbar-catalogue], [data-kpi-toggle]) {
        width: var(--app-control-height-sm);
        min-width: var(--app-control-height-sm);
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .app-shell-toolbar__actions :is([data-topbar-catalogue], [data-kpi-toggle]) > :not(.app-icon) {
        display: none !important;
    }

    .app-shell-chip--notification [data-live-notif-badge] {
        position: absolute;
        top: -0.2rem;
        right: -0.2rem;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.18rem;
        font-size: var(--app-text-2xs);
        line-height: 1;
        box-shadow: 0 0 0 2px var(--app-surface);
        z-index: 1;
    }

    html.dark .app-shell-chip--notification [data-live-notif-badge] {
        box-shadow: 0 0 0 2px color-mix(in srgb, #0f172a 90%, var(--app-shell-accent) 10%);
    }

    .app-shell-sidebar__brand {
        min-height: 3.85rem;
        padding: 0.78rem 0.78rem !important;
    }

    .app-shell-sidebar__nav {
        padding: 0.72rem 0.72rem 0.82rem !important;
    }

    :is(.app-shell-sidebar .app-nav-link, .admin-shell-nav-link) {
        min-height: var(--app-control-height-sm);
        font-size: var(--app-text-sm) !important;
    }

    .app-shell-sidebar__primary {
        min-height: var(--app-control-height-sm);
        font-size: var(--app-text-sm) !important;
    }

    body.app-view main {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }

    body.app-view main :is(.text-4xl, .text-5xl) {
        font-size: clamp(var(--app-text-2xl), 7.4vw, var(--app-text-3xl)) !important;
        line-height: 1.08 !important;
    }

    body.app-view main .text-3xl {
        font-size: clamp(var(--app-text-xl), 6.4vw, var(--app-text-3xl)) !important;
        line-height: 1.12 !important;
    }

    body.app-view main .text-2xl {
        font-size: clamp(var(--app-text-lg), 4.8vw, var(--app-text-xl)) !important;
        line-height: 1.18 !important;
    }

    body.app-view main :is(.p-6, .p-5, .p-4) {
        padding: 1rem !important;
    }

    body.app-view :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .student-content-main, .app-dashboard-shell) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    body.app-view :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .student-content-main, .app-dashboard-shell) > * {
        scroll-margin-top: 5.2rem;
    }

    body:is(.app-role-teacher, .app-role-student)[data-view] main :is(.grid[class*="md:grid-cols"], .grid[class*="lg:grid-cols"]) {
        grid-template-columns: 1fr !important;
    }

    body:is(.app-role-teacher, .app-role-student)[data-view] main :is(.overflow-x-auto, [class*="overflow-x-auto"]) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body:is(.app-role-teacher, .app-role-student)[data-view] main :is(.overflow-x-auto, [class*="overflow-x-auto"]) table {
        min-width: 640px;
    }

    body:is(.app-role-teacher, .app-role-student)[data-view] main :is(
        .flex.items-center.justify-between,
        .flex.flex-wrap.items-center.justify-between
    ) {
        gap: 0.55rem !important;
    }

    .sidebar-open .app-shell-sidebar.js-sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
    }

    .sidebar-open .js-sidebar-backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .sidebar-open {
        overflow: hidden;
    }
}

/* ============================================================
   Admin UI
   ============================================================ */

body.app-role-admin {
    --admin-shell-accent: var(--app-role-accent, var(--app-primary));
    --admin-shell-border: color-mix(in srgb, var(--admin-shell-accent) 24%, var(--app-border) 76%);
    --admin-shell-border-strong: color-mix(in srgb, var(--admin-shell-accent) 36%, var(--app-border) 64%);
    --admin-shell-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.16);
    --admin-shell-shadow-soft: 0 10px 22px -18px rgba(15, 23, 42, 0.12);
    --admin-shell-soft-surface: color-mix(in srgb, var(--admin-shell-accent) 6%, var(--app-surface-strong) 94%);
    --admin-shell-soft-surface-strong: color-mix(in srgb, var(--admin-shell-accent) 10%, var(--app-surface-strong) 90%);
    --admin-shell-link: color-mix(in srgb, var(--admin-shell-accent) 76%, var(--app-text) 24%);
    background: var(--app-bg);
}

body.app-role-admin[data-view^="admin/"] {
    --admin-topbar-offset-desktop: var(--app-toolbar-height);
    --admin-topbar-offset-mobile: var(--app-toolbar-height-mobile);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin {
    --admin-shell-toolbar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--admin-shell-accent) 10%, #f3f7ff 90%),
        #ffffff
    );
    --admin-shell-sidebar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--admin-shell-accent) 7%, #f5f8ff 93%),
        #fbfcff
    );
    --admin-shell-section-bg: color-mix(in srgb, var(--admin-shell-accent) 4%, #ffffff 96%);
    --admin-shell-nav-bg: color-mix(in srgb, var(--admin-shell-accent) 5%, #ffffff 95%);
    --admin-shell-nav-bg-hover: color-mix(in srgb, var(--admin-shell-accent) 11%, #eef4ff 89%);
    --admin-shell-border: color-mix(in srgb, var(--admin-shell-accent) 28%, #d7e0f3 72%);
    --admin-shell-border-strong: color-mix(in srgb, var(--admin-shell-accent) 42%, #d7e0f3 58%);
    --app-button-bg: color-mix(in srgb, var(--admin-shell-accent) 16%, #eef3ff 84%);
    --app-button-bg-hover: color-mix(in srgb, var(--admin-shell-accent) 22%, #e7eeff 78%);
    --app-button-border: color-mix(in srgb, var(--admin-shell-accent) 38%, #cfdbf2 62%);
    --app-button-border-strong: color-mix(in srgb, var(--admin-shell-accent) 54%, #cfdbf2 46%);
}

.admin-shell-root {
    min-height: 100vh;
}

.admin-shell-main {
    min-width: 0;
    padding-top: var(--admin-topbar-offset-desktop, 4.95rem);
}

body.app-role-admin[data-view^="admin/"] .admin-shell-main > .app-shell-toolbar + * {
    margin-top: 0 !important;
}

.admin-shell-content {
    width: min(100%, 100%);
    margin: 0 auto;
}

.admin-shell-toolbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 18px -18px rgba(15, 23, 42, 0.08);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-shell-toolbar {
    border-color: var(--admin-shell-border) !important;
    background: var(--admin-shell-toolbar-bg) !important;
    box-shadow: 0 14px 28px -24px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .app-shell-toolbar__eyebrow {
    color: color-mix(in srgb, var(--admin-shell-accent) 54%, #334155 46%) !important;
}

body.app-role-admin #admin-sidebar {
    box-shadow: 0 14px 30px -26px rgba(15, 23, 42, 0.14) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin #admin-sidebar {
    border-right-color: var(--admin-shell-border) !important;
    background: var(--admin-shell-sidebar-bg) !important;
    box-shadow: 10px 0 28px -28px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .app-shell-sidebar__brand {
    border-bottom-color: var(--admin-shell-border) !important;
    background: color-mix(in srgb, var(--admin-shell-accent) 3%, #ffffff 97%) !important;
}

.admin-topbar-chip {
    min-height: var(--app-control-height-sm);
}

.admin-topbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-pill-height);
    border-radius: 999px;
    border: 1px solid var(--admin-shell-border);
    padding: var(--app-pill-padding);
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
}

.admin-topbar-badge--active,
.admin-topbar-badge--done {
    background: color-mix(in srgb, var(--app-primary) 7%, var(--app-surface-strong) 93%);
    color: color-mix(in srgb, var(--app-primary) 78%, var(--app-text) 22%);
}

.admin-topbar-badge--pending {
    border-color: color-mix(in srgb, var(--app-warning) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-warning) 9%, var(--app-surface-strong) 91%);
    color: color-mix(in srgb, var(--app-warning) 82%, var(--app-text) 18%);
}

.admin-topbar-badge--urgent {
    border-color: color-mix(in srgb, var(--app-danger) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface-strong) 92%);
    color: color-mix(in srgb, var(--app-danger) 80%, var(--app-text) 20%);
}

.admin-topbar-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--app-control-height-sm);
    border-radius: 0.95rem;
    border: 1px solid var(--admin-shell-border);
    padding: var(--app-control-padding-sm);
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-sm);
    font-weight: 600;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-topbar-action:hover {
    transform: translateY(-1px);
}

.admin-topbar-action--neutral {
    border-color: var(--app-button-border);
    background: var(--app-button-bg);
    color: var(--app-button-text);
}

html:not(.dark):not([data-theme="dark"]) .admin-topbar-action--neutral {
    color: var(--app-button-text);
}

.admin-topbar-action--neutral:hover {
    border-color: var(--app-button-border-strong);
    background: var(--app-button-bg-hover);
    color: var(--app-button-text-strong);
}

.admin-topbar-action--primary {
    border-color: var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-button-primary-shadow);
}

.admin-topbar-action--primary:hover {
    background: var(--app-button-primary-bg-hover);
    color: var(--app-button-primary-text);
    filter: none;
}

.admin-shell-backdrop {
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.admin-shell-backdrop__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(64px);
}

.admin-shell-backdrop__orb--one {
    top: -8rem;
    left: 16%;
    width: 16rem;
    height: 16rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.09) 0%, rgba(59, 130, 246, 0) 72%);
}

.admin-shell-backdrop__orb--two {
    right: -7rem;
    bottom: -9rem;
    width: 20rem;
    height: 20rem;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.07) 0%, rgba(96, 165, 250, 0) 72%);
}

.admin-shell-card,
.admin-shell-hero,
.admin-shell-soft-card,
.admin-shell-list-item,
.admin-shell-empty,
.admin-shell-alert {
    position: relative;
    overflow: hidden;
}

.admin-shell-card,
.admin-shell-soft-card,
.admin-shell-empty {
    border: 1px solid var(--admin-shell-border);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-strong) 97%, transparent),
            color-mix(in srgb, var(--admin-shell-soft-surface) 94%, transparent)
        );
    box-shadow: var(--admin-shell-shadow-soft);
}

.admin-shell-card::before,
.admin-shell-soft-card::before,
.admin-shell-empty::before {
    content: none;
}

.admin-shell-card > *,
.admin-shell-hero > *,
.admin-shell-soft-card > *,
.admin-shell-list-item > *,
.admin-shell-empty > *,
.admin-shell-alert > * {
    position: relative;
    z-index: 1;
}

.admin-shell-hero {
    border: 1px solid color-mix(in srgb, var(--admin-shell-accent) 28%, var(--app-border) 72%);
    background:
        radial-gradient(circle at 14% 8%, rgba(59, 130, 246, 0.08), transparent 24%),
        radial-gradient(circle at 88% 12%, rgba(99, 102, 241, 0.06), transparent 26%),
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--app-surface-strong) 98%, transparent),
            color-mix(in srgb, var(--admin-shell-soft-surface-strong) 94%, transparent)
        );
    box-shadow: var(--admin-shell-shadow);
}

.admin-shell-hero::before,
.admin-shell-hero::after {
    content: none;
}

.admin-shell-kpi {
    min-height: 124px;
}

.admin-shell-metric {
    min-height: 132px;
}

.admin-shell-metric::after {
    content: "";
    position: absolute;
    inset: auto -1rem -1rem auto;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--admin-shell-accent) 8%, transparent);
}

html:not(.dark):not([data-theme="dark"]) .admin-shell-metric {
    color: #0f172a;
}

html:not(.dark):not([data-theme="dark"]) .admin-shell-metric .admin-shell-section-title {
    color: #334155;
}

html:not(.dark):not([data-theme="dark"]) .admin-shell-metric__value {
    color: #0f172a;
}

body.app-view .admin-shell-metric__meta {
    color: var(--app-text-secondary) !important;
}

html:not(.dark):not([data-theme="dark"]) body.app-view .admin-shell-metric__meta {
    color: #334155 !important;
}

html:not(.dark):not([data-theme="dark"]) .admin-shell-metric .admin-inline-accent {
    color: var(--admin-inline-tone);
}

.admin-shell-nav-link .app-icon,
.admin-shell-toolbar .app-icon {
    width: 1rem;
    height: 1rem;
}

.admin-sidebar-section {
    border: 1px solid color-mix(in srgb, var(--admin-shell-accent) 12%, var(--app-border) 88%);
    border-radius: var(--app-radius-xl);
    background: color-mix(in srgb, var(--admin-shell-accent) 3%, var(--app-surface) 97%);
    padding: 0.42rem;
    box-shadow: none;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-sidebar-section {
    border-color: var(--admin-shell-border) !important;
    background: var(--admin-shell-section-bg) !important;
    box-shadow: 0 12px 24px -24px rgba(37, 99, 235, 0.16) !important;
}

.admin-sidebar-section__title {
    padding: 0.12rem 0.45rem 0.22rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-sidebar-section__title {
    color: color-mix(in srgb, var(--admin-shell-accent) 46%, #334155 54%) !important;
}

.admin-shell-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: var(--app-control-height-sm);
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-button-border);
    background: var(--app-button-bg);
    padding: var(--app-control-padding-sm);
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-sm);
    font-weight: 600;
    color: var(--app-button-text);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-shell-nav-link {
    border-color: var(--admin-shell-border) !important;
    background: var(--admin-shell-nav-bg) !important;
    color: #243041 !important;
}

.admin-shell-nav-link:hover {
    border-color: var(--app-button-border-strong);
    background: var(--app-button-bg-hover);
    color: var(--app-button-text-strong);
    transform: translateY(-1px);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-shell-nav-link:hover {
    border-color: var(--admin-shell-border-strong) !important;
    background: var(--admin-shell-nav-bg-hover) !important;
    color: #0f172a !important;
}

.admin-shell-nav-link--active {
    border-color: var(--app-button-active-border);
    background: var(--app-button-active-bg);
    color: var(--app-button-active-text);
    box-shadow: var(--app-button-active-shadow);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-shell-nav-link--active {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg) !important;
    color: var(--app-button-active-text) !important;
    box-shadow: var(--app-button-active-shadow) !important;
}

.admin-shell-nav-link--danger {
    border-color: color-mix(in srgb, var(--app-danger) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-danger) 6%, #ffffff 94%);
    color: color-mix(in srgb, var(--app-danger) 78%, var(--app-text) 22%);
}

.admin-shell-nav-link__content {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.72rem;
}

.admin-shell-nav-link__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: color-mix(in srgb, var(--admin-shell-accent) 72%, var(--app-text) 28%);
}

.admin-shell-nav-link--active .admin-shell-nav-link__icon {
    color: var(--app-button-active-text);
}

html:not(.dark):not([data-theme="dark"]) body.app-role-admin .admin-shell-nav-link--active .admin-shell-nav-link__icon {
    color: var(--app-button-active-text) !important;
}

.admin-shell-nav-link__badge {
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #2563eb;
    padding: 0 0.35rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: #ffffff;
}

.admin-shell-nav-link__badge.is-empty {
    background: color-mix(in srgb, #64748b 78%, #94a3b8 22%);
    color: rgba(255, 255, 255, 0.92);
}

.admin-shell-section-title {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: rgb(100 116 139);
}

.admin-inline-accent {
    --admin-inline-tone: #2563eb;
    color: color-mix(in srgb, var(--admin-inline-tone) 78%, var(--app-text) 22%);
}

.admin-inline-accent--info {
    --admin-inline-tone: #2563eb;
}

.admin-inline-accent--success {
    --admin-inline-tone: #059669;
}

.admin-inline-accent--warning {
    --admin-inline-tone: #d97706;
}

.admin-inline-accent--danger {
    --admin-inline-tone: #dc2626;
}

.admin-inline-accent--violet {
    --admin-inline-tone: #7c3aed;
}

body[data-view="admin/dashboard"] .admin-dashboard-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

body[data-view="admin/dashboard"] .admin-dashboard-heading--info {
    color: color-mix(in srgb, #2563eb 82%, var(--app-text) 18%) !important;
}

body[data-view="admin/dashboard"] .admin-dashboard-heading--success {
    color: color-mix(in srgb, #2563eb 82%, var(--app-text) 18%) !important;
}

body[data-view="admin/dashboard"] .admin-dashboard-heading--danger {
    color: color-mix(in srgb, #2563eb 82%, var(--app-text) 18%) !important;
}

body[data-view="admin/dashboard"] .admin-dashboard-heading--violet {
    color: color-mix(in srgb, #2563eb 82%, var(--app-text) 18%) !important;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-icon {
    --app-kpi-accent: var(--admin-kpi-surface-tone, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--app-kpi-accent) 16%, #ffffff 84%);
    border: 1px solid color-mix(in srgb, var(--app-kpi-accent) 24%, #e2e8f0 76%);
    color: var(--app-kpi-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-icon > svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface {
    --admin-kpi-surface-tone: #2563eb;
    position: relative;
    background: linear-gradient(160deg, #eff6ff, #dbeafe) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, #ffffff 90%, var(--admin-kpi-surface-tone) 10%),
        color-mix(in srgb, #ffffff 66%, var(--admin-kpi-surface-tone) 34%)
    ) !important;
    border-color: color-mix(in srgb, #cbd5e1 52%, var(--admin-kpi-surface-tone) 48%) !important;
    box-shadow:
        0 16px 28px -24px color-mix(in srgb, var(--admin-kpi-surface-tone) 42%, #0f172a 58%),
        inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--admin-kpi-surface-tone) 78%, #ffffff 22%);
    opacity: 0.72;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface--info {
    --admin-kpi-surface-tone: #2563eb;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface--success {
    --admin-kpi-surface-tone: #059669;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface--warning {
    --admin-kpi-surface-tone: #d97706;
}

body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface--danger {
    --admin-kpi-surface-tone: #dc2626;
}

body[data-view="admin/support_agents"] .admin-support-step {
    display: flex;
    align-items: flex-start;
    gap: 0.68rem;
}

body[data-view="admin/support_agents"] .admin-support-step__icon {
    width: 1.95rem;
    height: 1.95rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.78rem;
    color: #1d4ed8;
    border: 1px solid color-mix(in srgb, #2563eb 28%, #cbd5e1 72%);
    background: color-mix(in srgb, #2563eb 12%, #ffffff 88%);
}

body[data-view="admin/support_agents"] .admin-support-step__icon > svg {
    width: 1rem;
    height: 1rem;
}

body[data-view="admin/support_agents"] .admin-support-avatar {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(160deg, #2563eb, #1d4ed8);
    color: #f8fafc;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[data-view="admin/support_agents"] .admin-support-table thead tr {
    border-bottom: 1px solid color-mix(in srgb, #2563eb 18%, var(--admin-shell-border) 82%);
}

body[data-view="admin/support_agents"] .admin-support-table tbody {
    border-top: 0;
}

body[data-view="admin/support_agents"] .admin-support-table__row {
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

body[data-view="admin/support_agents"] .admin-support-table__row:hover {
    background: color-mix(in srgb, #2563eb 10%, #ffffff 90%);
}

body[data-view="admin/support_agents"] .admin-support-table__row:focus-within {
    background: color-mix(in srgb, #2563eb 14%, #ffffff 86%);
}

body[data-view="admin/support_agents"] .admin-support-modal-panel {
    border-color: color-mix(in srgb, #2563eb 24%, var(--admin-shell-border) 76%);
}

body[data-view="admin/courses"] {
    --admin-courses-neutral-bg: color-mix(in srgb, var(--app-surface-strong) 95%, #2563eb 5%);
    --admin-courses-neutral-border: color-mix(in srgb, #2563eb 22%, var(--admin-shell-border) 78%);
    --admin-courses-hover-bg: color-mix(in srgb, var(--app-surface-strong) 88%, #2563eb 12%);
    --admin-courses-primary-bg: color-mix(in srgb, #2563eb 12%, var(--app-surface-strong) 88%);
    --admin-courses-primary-border: color-mix(in srgb, #2563eb 34%, var(--admin-shell-border) 66%);
    --admin-courses-primary-text: color-mix(in srgb, #1d4ed8 76%, var(--app-text) 24%);
    --admin-courses-danger-bg: color-mix(in srgb, #dc2626 10%, var(--app-surface-strong) 90%);
    --admin-courses-danger-border: color-mix(in srgb, #dc2626 28%, var(--admin-shell-border) 72%);
    --admin-courses-danger-text: color-mix(in srgb, #dc2626 78%, var(--app-text) 22%);
    --admin-courses-kpi-pending-bg: linear-gradient(145deg, #dbeafe, #bfdbfe);
    --admin-courses-kpi-pending-bg: linear-gradient(145deg, color-mix(in srgb, #2563eb 34%, #ffffff 66%), color-mix(in srgb, #1d4ed8 18%, #ffffff 82%));
    --admin-courses-kpi-pending-border: color-mix(in srgb, #2563eb 48%, var(--admin-shell-border) 52%);
    --admin-courses-kpi-pending-text: #1e40af;
    --admin-courses-kpi-processed-bg: linear-gradient(145deg, #ede9fe, #ddd6fe);
    --admin-courses-kpi-processed-bg: linear-gradient(145deg, color-mix(in srgb, #7c3aed 32%, #ffffff 68%), color-mix(in srgb, #6d28d9 18%, #ffffff 82%));
    --admin-courses-kpi-processed-border: color-mix(in srgb, #7c3aed 46%, var(--admin-shell-border) 54%);
    --admin-courses-kpi-processed-text: #5b21b6;
    --admin-courses-kpi-approved-bg: linear-gradient(145deg, #d1fae5, #a7f3d0);
    --admin-courses-kpi-approved-bg: linear-gradient(145deg, color-mix(in srgb, #059669 34%, #ffffff 66%), color-mix(in srgb, #047857 18%, #ffffff 82%));
    --admin-courses-kpi-approved-border: color-mix(in srgb, #059669 46%, var(--admin-shell-border) 54%);
    --admin-courses-kpi-approved-text: #065f46;
    --admin-courses-kpi-rejected-bg: linear-gradient(145deg, #fee2e2, #fecaca);
    --admin-courses-kpi-rejected-bg: linear-gradient(145deg, color-mix(in srgb, #dc2626 30%, #ffffff 70%), color-mix(in srgb, #b91c1c 16%, #ffffff 84%));
    --admin-courses-kpi-rejected-border: color-mix(in srgb, #dc2626 44%, var(--admin-shell-border) 56%);
    --admin-courses-kpi-rejected-text: #991b1b;
}

body[data-view="admin/courses"] .admin-courses-kpi {
    border-width: 1px;
    border-style: solid;
    box-shadow: 0 10px 22px -20px rgba(37, 99, 235, 0.45);
    color: var(--app-text);
    background-image: linear-gradient(180deg, color-mix(in srgb, #ffffff 28%, transparent), transparent);
}

body[data-view="admin/courses"] .admin-courses-kpi .admin-shell-label {
    color: color-mix(in srgb, currentColor 62%, var(--app-text-secondary) 38%);
}

body[data-view="admin/courses"] .admin-courses-kpi .text-2xl {
    color: currentColor;
}

body[data-view="admin/courses"] .admin-courses-kpi--pending {
    border-color: var(--admin-courses-kpi-pending-border);
    background: var(--admin-courses-kpi-pending-bg);
    color: var(--admin-courses-kpi-pending-text);
}

body[data-view="admin/courses"] .admin-courses-kpi--processed {
    border-color: var(--admin-courses-kpi-processed-border);
    background: var(--admin-courses-kpi-processed-bg);
    color: var(--admin-courses-kpi-processed-text);
}

body[data-view="admin/courses"] .admin-courses-kpi--approved {
    border-color: var(--admin-courses-kpi-approved-border);
    background: var(--admin-courses-kpi-approved-bg);
    color: var(--admin-courses-kpi-approved-text);
}

body[data-view="admin/courses"] .admin-courses-kpi--rejected {
    border-color: var(--admin-courses-kpi-rejected-border);
    background: var(--admin-courses-kpi-rejected-bg);
    color: var(--admin-courses-kpi-rejected-text);
}

body[data-view="admin/courses"] .admin-courses-kpi-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-view="admin/courses"] .admin-courses-kpi-item {
    border: 1px solid var(--admin-courses-neutral-border);
    border-radius: 0.95rem;
    background: var(--admin-courses-neutral-bg);
    padding: 0.58rem 0.74rem;
}

body[data-view="admin/courses"] .admin-courses-kpi-item--warning {
    border-color: color-mix(in srgb, #d97706 36%, var(--admin-shell-border) 64%);
    background: color-mix(in srgb, #d97706 9%, var(--app-surface-strong) 91%);
}

body[data-view="admin/courses"] .admin-courses-kpi-item--success {
    border-color: color-mix(in srgb, #059669 34%, var(--admin-shell-border) 66%);
    background: color-mix(in srgb, #059669 8%, var(--app-surface-strong) 92%);
}

body[data-view="admin/courses"] .admin-courses-kpi-item__label {
    font-size: var(--app-text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-kpi-item__value {
    margin-top: 0.2rem;
    font-size: var(--app-text-xl);
    font-weight: 700;
    line-height: 1.1;
    color: var(--app-text);
}

body[data-view="admin/courses"] .admin-courses-kpi-item__value--compact {
    font-size: var(--app-text-lg);
}

body[data-view="admin/courses"] .admin-courses-layout {
    display: grid;
    gap: 0.95rem;
    grid-template-columns: minmax(0, 1fr);
}

body[data-view="admin/courses"] .admin-courses-queue,
body[data-view="admin/courses"] .admin-courses-detail {
    border: 1px solid var(--admin-courses-neutral-border);
}

body[data-view="admin/courses"] .admin-courses-queue__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

body[data-view="admin/courses"] .admin-courses-filter-grid {
    margin-top: 0.72rem;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

body[data-view="admin/courses"] .admin-courses-search-panel {
    margin-top: 0.72rem;
    display: block;
    border: 1px solid var(--admin-courses-neutral-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--admin-courses-neutral-bg) 90%, var(--app-surface-strong) 10%);
    padding: 0.75rem;
}

body[data-view="admin/courses"].is-search-enhanced .admin-courses-search-panel {
    display: none;
}

body[data-view="admin/courses"].is-search-enhanced .admin-courses-search-panel.is-open {
    display: block;
}

body[data-view="admin/courses"] .admin-courses-search-grid {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-view="admin/courses"] .admin-courses-search-date {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-view="admin/courses"] [data-search-field].is-hidden {
    display: none;
}

body[data-view="admin/courses"] .admin-courses-bulk__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

body[data-view="admin/courses"] .admin-courses-bulk__toolbar .admin-shell-input {
    min-height: var(--app-control-height-sm);
}

body[data-view="admin/courses"] .admin-courses-queue__list {
    max-height: min(68vh, 46rem);
    overflow: auto;
    padding-right: 0.3rem;
    display: grid;
    gap: 0.62rem;
}

body[data-view="admin/courses"] .admin-courses-row {
    border-radius: 1rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: var(--admin-courses-neutral-bg);
    padding: 0.7rem;
    transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

body[data-view="admin/courses"] .admin-courses-row:hover {
    border-color: var(--admin-courses-primary-border);
    background: var(--admin-courses-hover-bg);
}

body[data-view="admin/courses"] .admin-courses-row.is-active {
    border-color: var(--admin-courses-primary-border);
    background: var(--admin-courses-hover-bg);
    box-shadow: 0 12px 22px -22px rgba(37, 99, 235, 0.78);
}

body[data-view="admin/courses"] .admin-courses-row.is-hidden {
    display: none;
}

body[data-view="admin/courses"] .admin-courses-row__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: start;
}

body[data-view="admin/courses"] .admin-courses-row__checkbox {
    display: inline-flex;
    align-items: center;
    padding-top: 0.35rem;
}

body[data-view="admin/courses"] .admin-courses-row__focus {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 0.2rem;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
}

body[data-view="admin/courses"] .admin-courses-row__title {
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="admin/courses"] .admin-courses-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.52rem 0.72rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-row__actions {
    margin-top: 0.62rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.46rem;
}

body[data-view="admin/courses"] .admin-courses-action {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    border-radius: 999px;
    border: 1px solid var(--admin-courses-neutral-border);
    background: transparent;
    padding: 0.45rem 0.74rem;
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: var(--app-text);
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

body[data-view="admin/courses"] .admin-courses-action:hover {
    transform: translateY(-1px);
    background: var(--admin-courses-hover-bg);
}

body[data-view="admin/courses"] .admin-courses-action:focus-visible,
body[data-view="admin/courses"] .admin-courses-row__focus:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--admin-courses-primary-border) 74%, transparent);
    outline-offset: 1px;
}

body[data-view="admin/courses"] .admin-courses-action--primary {
    border-color: var(--admin-courses-primary-border);
    background: var(--admin-courses-primary-bg);
    color: var(--admin-courses-primary-text);
}

body[data-view="admin/courses"] .admin-courses-action--danger {
    border-color: var(--admin-courses-danger-border);
    background: var(--admin-courses-danger-bg);
    color: var(--admin-courses-danger-text);
}

body[data-view="admin/courses"] .admin-courses-action--neutral {
    border-color: var(--admin-courses-neutral-border);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-action--ghost {
    border-color: transparent;
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-reason-panel {
    margin-top: 0.58rem;
    border-radius: 0.92rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: color-mix(in srgb, var(--admin-courses-neutral-bg) 94%, var(--app-surface-strong) 6%);
    padding: 0.62rem;
}

body[data-view="admin/courses"] .admin-courses-reason-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

body[data-view="admin/courses"] .admin-courses-reason-actions {
    margin-top: 0.52rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

body[data-view="admin/courses"] .admin-courses-shortcuts {
    margin-top: 0.7rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-shortcuts kbd {
    border-radius: 0.4rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: color-mix(in srgb, var(--admin-courses-neutral-bg) 94%, var(--app-surface-strong) 6%);
    padding: 0.12rem 0.36rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
}

body[data-view="admin/courses"] .admin-courses-detail__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

body[data-view="admin/courses"] .admin-courses-detail__meta {
    display: grid;
    gap: 0.58rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-view="admin/courses"] .admin-courses-detail-box {
    border-radius: 0.9rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: var(--admin-courses-neutral-bg);
    padding: 0.58rem 0.68rem;
}

body[data-view="admin/courses"] .admin-courses-detail-box__value {
    margin-top: 0.22rem;
    font-size: var(--app-text-sm);
    font-weight: 600;
    color: var(--app-text);
}

body[data-view="admin/courses"] .admin-courses-detail-box__hint {
    margin-top: 0.12rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-detail-section {
    border-radius: 0.95rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: var(--admin-courses-neutral-bg);
    padding: 0.64rem;
}

body[data-view="admin/courses"] .admin-courses-detail-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

body[data-view="admin/courses"] .admin-courses-video-wrap {
    margin-top: 0.52rem;
    border-radius: 0.85rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: color-mix(in srgb, #0f172a 4%, var(--admin-courses-neutral-bg) 96%);
    min-height: 10.5rem;
    overflow: hidden;
    display: grid;
    place-items: center;
}

body[data-view="admin/courses"] .admin-courses-video-wrap iframe {
    width: 100%;
    min-height: 13rem;
    border: 0;
}

body[data-view="admin/courses"] .admin-courses-outline-meta {
    margin-top: 0.52rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-outline-list {
    margin-top: 0.52rem;
    display: grid;
    gap: 0.42rem;
}

body[data-view="admin/courses"] .admin-courses-outline-item {
    border-radius: 0.72rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: color-mix(in srgb, var(--admin-courses-neutral-bg) 96%, var(--app-surface-strong) 4%);
    padding: 0.45rem 0.55rem;
    display: grid;
    gap: 0.12rem;
}

body[data-view="admin/courses"] .admin-courses-outline-item__title {
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: var(--app-text);
}

body[data-view="admin/courses"] .admin-courses-outline-item__meta {
    font-size: var(--app-text-2xs);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-history-list {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.44rem;
}

body[data-view="admin/courses"] .admin-courses-history-item {
    border-radius: 0.76rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: color-mix(in srgb, var(--admin-courses-neutral-bg) 96%, var(--app-surface-strong) 4%);
    padding: 0.5rem 0.58rem;
}

body[data-view="admin/courses"] .admin-courses-history-item__title {
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: var(--app-text);
}

body[data-view="admin/courses"] .admin-courses-history-item__reason {
    margin-top: 0.15rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body[data-view="admin/courses"] .admin-courses-history-item__date {
    margin-top: 0.15rem;
    font-size: var(--app-text-2xs);
    color: var(--app-text-muted, #64748b);
}

body[data-view="admin/courses"] .admin-courses-history-scroll {
    max-height: 16rem;
    overflow: auto;
    display: grid;
    gap: 0.45rem;
    padding-right: 0.26rem;
}

body[data-view="admin/courses"] .admin-courses-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.65rem;
    align-items: center;
    border-radius: 0.82rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: var(--admin-courses-neutral-bg);
    padding: 0.55rem 0.62rem;
}

body[data-view="admin/courses"] .admin-courses-pagination {
    margin-top: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.36rem;
    flex-wrap: wrap;
}

body[data-view="admin/courses"] .admin-courses-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    height: 2.05rem;
    padding: 0 0.56rem;
    border-radius: 0.65rem;
    border: 1px solid var(--admin-courses-neutral-border);
    background: var(--admin-courses-neutral-bg);
    color: var(--app-text);
    text-decoration: none;
    font-size: var(--app-text-xs);
    font-weight: 600;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

body[data-view="admin/courses"] .admin-courses-pagination__link:hover {
    border-color: var(--admin-courses-primary-border);
    background: var(--admin-courses-hover-bg);
}

body[data-view="admin/courses"] .admin-courses-pagination__link.is-active {
    border-color: var(--admin-courses-primary-border);
    background: var(--admin-courses-primary-bg);
    color: var(--admin-courses-primary-text);
}

body[data-view="admin/courses"] .admin-courses-pagination__link.is-disabled {
    opacity: 0.42;
    pointer-events: none;
}

body[data-view="admin/courses"] .admin-courses-pagination__dots {
    color: var(--app-text-secondary);
    font-size: var(--app-text-xs);
    padding: 0 0.12rem;
}

@media (min-width: 1200px) {
    body[data-view="admin/courses"] .admin-courses-layout {
        grid-template-columns: minmax(22rem, 1fr) minmax(22rem, 1fr);
        align-items: start;
    }

    body[data-view="admin/courses"] .admin-courses-detail {
        position: sticky;
        top: 5.8rem;
        max-height: calc(100vh - 7rem);
        overflow: auto;
    }
}

@media (max-width: 1180px) {
    body[data-view="admin/courses"] .admin-courses-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-view="admin/courses"] .admin-courses-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    body[data-view="admin/courses"] .admin-courses-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-view="admin/courses"] .admin-courses-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-view="admin/courses"] .admin-courses-search-grid,
    body[data-view="admin/courses"] .admin-courses-search-date {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-view="admin/courses"] .admin-courses-row__top {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body[data-view="admin/courses"] .admin-courses-row__top > .admin-shell-badge {
        grid-column: 2;
        justify-self: start;
    }

    body[data-view="admin/courses"] .admin-courses-detail__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-view="admin/courses"] .admin-courses-reason-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    body[data-view="admin/courses"] .admin-courses-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-view="admin/courses"] .admin-courses-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-view="admin/courses"] .admin-courses-search-grid,
    body[data-view="admin/courses"] .admin-courses-search-date {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-view="admin/courses"] .admin-courses-history-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.4rem;
    }
}

body[data-view="admin/secondary_admins"] .admin-secondary-list-item {
    border: 1px solid color-mix(in srgb, #2563eb 20%, var(--admin-shell-border) 80%);
    background: color-mix(in srgb, #ffffff 95%, #2563eb 5%);
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

body[data-view="admin/secondary_admins"] .admin-secondary-list-item:hover {
    border-color: color-mix(in srgb, #2563eb 32%, var(--admin-shell-border) 68%);
    background: color-mix(in srgb, #ffffff 90%, #2563eb 10%);
}

body[data-view="admin/secondary_admins"] .admin-secondary-step {
    display: flex;
    align-items: flex-start;
    gap: 0.68rem;
}

body[data-view="admin/secondary_admins"] .admin-secondary-step__icon {
    width: 1.95rem;
    height: 1.95rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.78rem;
    color: #1d4ed8;
    border: 1px solid color-mix(in srgb, #2563eb 28%, #cbd5e1 72%);
    background: color-mix(in srgb, #2563eb 12%, #ffffff 88%);
}

body[data-view="admin/secondary_admins"] .admin-secondary-permission-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, #2563eb 14%, #cbd5e1 86%);
    background: color-mix(in srgb, #ffffff 92%, #2563eb 8%);
    padding: 0.5rem 0.65rem;
    font-size: var(--app-text-xs);
    color: #1f2937;
}

body[data-view="admin/secondary_admins"] .admin-secondary-permission-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #2563eb 24%, #cbd5e1 76%);
    background: color-mix(in srgb, #2563eb 10%, #ffffff 90%);
    color: #1e40af;
    padding: 0.2rem 0.56rem;
    font-size: var(--app-text-2xs);
    font-weight: 600;
}

body[data-view="admin/secondary_admins"] .admin-secondary-modal-panel {
    border-color: color-mix(in srgb, #2563eb 24%, var(--admin-shell-border) 76%);
}

.admin-kpi-value {
    --admin-kpi-tone: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: color-mix(in srgb, var(--admin-kpi-tone) 82%, var(--app-text) 18%);
}

.admin-kpi-value::before {
    content: "";
    width: 0.52rem;
    height: 0.52rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--admin-kpi-tone);
    box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--admin-kpi-tone) 14%, transparent);
}

.admin-kpi-value--info {
    --admin-kpi-tone: #2563eb;
}

.admin-kpi-value--success {
    --admin-kpi-tone: #059669;
}

.admin-kpi-value--warning {
    --admin-kpi-tone: #d97706;
}

.admin-kpi-value--danger {
    --admin-kpi-tone: #dc2626;
}

.admin-kpi-value--violet {
    --admin-kpi-tone: #7c3aed;
}

.admin-kpi-note {
    --admin-kpi-note-tone: rgb(100 116 139);
    color: var(--admin-kpi-note-tone);
}

.admin-kpi-note--slate {
    --admin-kpi-note-tone: rgb(100 116 139);
}

.admin-kpi-note--info {
    --admin-kpi-note-tone: color-mix(in srgb, #2563eb 70%, rgb(71 85 105) 30%);
}

.admin-kpi-note--success {
    --admin-kpi-note-tone: color-mix(in srgb, #059669 72%, rgb(71 85 105) 28%);
}

.admin-kpi-note--warning {
    --admin-kpi-note-tone: color-mix(in srgb, #d97706 74%, rgb(71 85 105) 26%);
}

.admin-kpi-note--danger {
    --admin-kpi-note-tone: color-mix(in srgb, #dc2626 74%, rgb(71 85 105) 26%);
}

.admin-kpi-note--violet {
    --admin-kpi-note-tone: color-mix(in srgb, #7c3aed 72%, rgb(71 85 105) 28%);
}

.admin-accent-link {
    --admin-link-tone: #2563eb;
    color: color-mix(in srgb, var(--admin-link-tone) 82%, var(--app-text) 18%);
}

.admin-accent-link--info {
    --admin-link-tone: #2563eb;
}

.admin-accent-link--success {
    --admin-link-tone: #059669;
}

.admin-accent-link--warning {
    --admin-link-tone: #d97706;
}

.admin-accent-link--danger {
    --admin-link-tone: #dc2626;
}

.admin-accent-link--violet {
    --admin-link-tone: #7c3aed;
}

.admin-shell-alert {
    border-radius: 0.95rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--admin-shell-border);
    box-shadow: var(--admin-shell-shadow-soft);
    font-size: var(--app-text-sm);
}

.admin-shell-alert--error {
    border-color: color-mix(in srgb, var(--app-danger) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface-strong) 92%);
    color: color-mix(in srgb, var(--app-danger) 84%, var(--app-text) 16%);
}

.admin-shell-alert--success,
.admin-shell-alert--info {
    border-color: color-mix(in srgb, var(--app-primary) 30%, var(--app-border) 70%);
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-strong) 92%);
    color: color-mix(in srgb, var(--app-primary) 82%, var(--app-text) 18%);
}

.admin-shell-alert--warning {
    border-color: color-mix(in srgb, var(--app-warning) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-warning) 10%, var(--app-surface-strong) 90%);
    color: color-mix(in srgb, var(--app-warning) 84%, var(--app-text) 16%);
}

.admin-shell-link {
    color: var(--admin-shell-link);
    font-weight: 600;
}

.admin-shell-link:hover {
    color: var(--app-text);
}

.admin-shell-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.62rem 0.98rem;
    font-size: var(--app-text-sm);
    font-weight: 600;
    line-height: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.admin-shell-button:hover {
    transform: translateY(-1px);
}

.admin-shell-button--primary {
    border-color: var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-button-primary-shadow);
}

.admin-shell-button--primary:hover {
    background: var(--app-button-primary-bg-hover);
    filter: none;
}

.admin-shell-button--secondary {
}

.admin-shell-button--danger {
    border-color: color-mix(in srgb, var(--app-danger) 30%, var(--app-border) 70%);
    background: color-mix(in srgb, var(--app-danger) 9%, var(--app-surface-strong) 91%);
    color: color-mix(in srgb, var(--app-danger) 86%, var(--app-text) 14%);
}

.admin-shell-button--danger:hover {
    border-color: color-mix(in srgb, var(--app-danger) 44%, var(--app-border) 56%);
    background: color-mix(in srgb, var(--app-danger) 12%, var(--app-surface-strong) 88%);
}

.admin-shell-button--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--admin-shell-link);
}

.admin-shell-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--admin-shell-border);
    padding: var(--app-badge-padding);
    font-size: var(--app-text-2xs);
    font-weight: 600;
    line-height: 1;
}

.admin-shell-badge--info {
    border-color: color-mix(in srgb, var(--app-primary) 32%, var(--app-border) 68%);
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-strong) 92%);
    color: color-mix(in srgb, var(--app-primary) 82%, var(--app-text) 18%);
}

.admin-shell-badge--slate {
    background: color-mix(in srgb, var(--app-surface-hover) 94%, transparent);
    color: var(--app-text-secondary);
}

.admin-shell-badge--warning {
    border-color: color-mix(in srgb, var(--app-warning) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-warning) 10%, var(--app-surface-strong) 90%);
    color: color-mix(in srgb, var(--app-warning) 86%, var(--app-text) 14%);
}

.admin-shell-badge--danger {
    border-color: color-mix(in srgb, var(--app-danger) 34%, var(--app-border) 66%);
    background: color-mix(in srgb, var(--app-danger) 9%, var(--app-surface-strong) 91%);
    color: color-mix(in srgb, var(--app-danger) 86%, var(--app-text) 14%);
}

.admin-shell-list-item {
    border: 1px solid var(--admin-shell-border);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-strong) 96%, transparent),
            color-mix(in srgb, var(--admin-shell-soft-surface) 93%, transparent)
        );
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.10);
}

.admin-shell-empty {
    border-style: dashed;
    color: var(--app-muted);
}

.admin-dashboard-hero {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
    align-items: start;
}

.admin-dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border-radius: 999px;
    border: 1px solid var(--admin-shell-border);
    padding: 0.4rem 0.76rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    line-height: 1;
}

.admin-dashboard-chip--neutral {
    background: rgba(255, 255, 255, 0.74);
    color: rgb(51 65 85);
}

.admin-dashboard-chip--info {
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface-strong) 92%);
    color: color-mix(in srgb, var(--app-primary) 82%, var(--app-text) 18%);
}

.admin-dashboard-chip--warning {
    border-color: color-mix(in srgb, var(--app-warning) 30%, var(--app-border) 70%);
    background: color-mix(in srgb, var(--app-warning) 10%, var(--app-surface-strong) 90%);
    color: color-mix(in srgb, var(--app-warning) 84%, var(--app-text) 16%);
}

.admin-dashboard-chip--danger {
    border-color: color-mix(in srgb, var(--app-danger) 30%, var(--app-border) 70%);
    background: color-mix(in srgb, var(--app-danger) 9%, var(--app-surface-strong) 91%);
    color: color-mix(in srgb, var(--app-danger) 84%, var(--app-text) 16%);
}

.admin-dashboard-stat {
    border: 1px solid color-mix(in srgb, var(--admin-shell-accent) 20%, var(--app-border) 80%);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.92),
            color-mix(in srgb, var(--admin-shell-soft-surface) 96%, transparent)
        );
    box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.10);
}

.admin-dashboard-priority {
    border-radius: 1.1rem;
    border: 1px solid var(--admin-shell-border);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.94),
            color-mix(in srgb, var(--admin-shell-soft-surface) 96%, transparent)
        );
    padding: 1rem;
}

.admin-dashboard-priority--info {
    border-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-border) 76%);
}

.admin-dashboard-priority--warning {
    border-color: color-mix(in srgb, var(--app-warning) 24%, var(--app-border) 76%);
}

.admin-dashboard-priority--urgent {
    border-color: color-mix(in srgb, var(--app-danger) 24%, var(--app-border) 76%);
}

.admin-dashboard-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 1rem;
    border: 1px solid var(--admin-shell-border);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.9rem 0.95rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-dashboard-shortcut:hover {
    border-color: var(--admin-shell-border-strong);
    background: color-mix(in srgb, var(--admin-shell-accent) 6%, #ffffff 94%);
    transform: translateY(-1px);
    box-shadow: none;
}

.admin-dashboard-shortcut__meta {
    display: grid;
    gap: 0.16rem;
}

.admin-dashboard-module {
    border-radius: 1.08rem;
    border: 1px solid var(--admin-shell-border);
    background: rgba(255, 255, 255, 0.88);
    padding: 0.95rem;
}

.admin-dashboard-module--allowed {
    border-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-primary) 6%, #ffffff 94%);
}

.admin-dashboard-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--admin-shell-border);
    background: rgba(255, 255, 255, 0.86);
    padding: 0.42rem 0.8rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: rgb(71 85 105);
}

.admin-dashboard-count--info {
    border-color: color-mix(in srgb, var(--app-primary) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-primary) 8%, rgba(255, 255, 255, 0.92));
    color: color-mix(in srgb, var(--app-primary) 78%, var(--app-text) 22%);
}

.admin-dashboard-count--success {
    border-color: color-mix(in srgb, #059669 24%, var(--app-border) 76%);
    background: color-mix(in srgb, #059669 8%, rgba(255, 255, 255, 0.92));
    color: color-mix(in srgb, #059669 78%, var(--app-text) 22%);
}

.admin-dashboard-count--warning {
    border-color: color-mix(in srgb, var(--app-warning) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-warning) 10%, rgba(255, 255, 255, 0.92));
    color: color-mix(in srgb, var(--app-warning) 80%, var(--app-text) 20%);
}

.admin-dashboard-count--danger {
    border-color: color-mix(in srgb, var(--app-danger) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-danger) 9%, rgba(255, 255, 255, 0.92));
    color: color-mix(in srgb, var(--app-danger) 80%, var(--app-text) 20%);
}

.admin-dashboard-count--violet {
    border-color: color-mix(in srgb, #7c3aed 24%, var(--app-border) 76%);
    background: color-mix(in srgb, #7c3aed 8%, rgba(255, 255, 255, 0.92));
    color: color-mix(in srgb, #7c3aed 78%, var(--app-text) 22%);
}

.admin-shell-panel,
.admin-shell-modal {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--admin-shell-border);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-strong) 97%, transparent),
            color-mix(in srgb, var(--admin-shell-soft-surface) 94%, transparent)
        );
    box-shadow: var(--admin-shell-shadow-soft);
}

.admin-shell-panel::before,
.admin-shell-modal::before {
    content: none;
}

.admin-shell-panel > *,
.admin-shell-modal > * {
    position: relative;
    z-index: 1;
}

.admin-shell-form-grid {
    display: grid;
    gap: 0.85rem;
}

.admin-shell-field {
    display: grid;
    gap: 0.38rem;
}

.admin-shell-label {
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(100 116 139);
}

.admin-shell-input {
    width: 100%;
    min-height: 2.65rem;
    border-radius: 0.9rem;
    border: 1px solid var(--admin-shell-border);
    background: color-mix(in srgb, var(--app-surface) 96%, transparent);
    padding: 0.7rem 0.85rem;
    font-size: var(--app-text-sm);
    color: var(--app-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.admin-shell-input:focus {
    border-color: color-mix(in srgb, var(--admin-shell-accent) 48%, var(--app-border) 52%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-shell-accent) 14%, transparent);
}

.admin-shell-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--app-text-sm);
}

.admin-shell-table thead tr {
    border-bottom: 1px solid var(--admin-shell-border);
}

.admin-shell-table th {
    padding: 0.78rem 0.9rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
    text-align: left;
}

.admin-shell-table td {
    padding: 0.82rem 0.9rem;
    vertical-align: top;
}

body[data-view="admin/courses"] .admin-shell-table tbody tr {
    transition: background-color 0.15s ease;
}

body[data-view="admin/courses"] .admin-shell-table tbody tr:hover {
    background: color-mix(in srgb, #2563eb 6%, transparent);
}

.admin-shell-dense {
    gap: 1.25rem;
}

.admin-shell-dense .admin-shell-card,
.admin-shell-dense .admin-shell-hero,
.admin-shell-dense .admin-shell-soft-card,
.admin-shell-dense .admin-shell-empty,
.admin-shell-dense .admin-shell-panel {
    border-radius: 1.45rem;
}

.admin-shell-dense .admin-shell-list-item,
.admin-shell-dense .admin-shell-modal,
.admin-shell-dense :is(article, section, div, aside, form).rounded-2xl {
    border-radius: 1.08rem;
}

.admin-shell-dense :is(article, section, div, aside, form).p-6 {
    padding: var(--app-card-padding);
}

.admin-shell-dense :is(article, section, div, aside, form).p-5 {
    padding: var(--app-card-padding-sm);
}

.admin-shell-dense :is(article, section, div, aside, form).p-4 {
    padding: var(--app-card-padding-xs);
}

.admin-shell-dense .text-4xl {
    font-size: var(--app-text-3xl);
    line-height: 1.08;
}

.admin-shell-dense .text-3xl {
    font-size: var(--app-text-3xl);
    line-height: 1.12;
}

.admin-shell-dense .text-2xl {
    font-size: var(--app-text-2xl);
    line-height: 1.18;
}

.admin-shell-dense .text-xl {
    font-size: var(--app-text-lg);
    line-height: 1.24;
}

.admin-shell-dense .text-lg {
    font-size: var(--app-text-base);
    line-height: 1.32;
}

.admin-shell-dense .text-base {
    font-size: var(--app-text-sm);
    line-height: 1.44;
}

.admin-shell-dense .text-sm {
    font-size: var(--app-text-sm);
    line-height: 1.45;
}

.admin-shell-dense .text-xs {
    font-size: var(--app-text-2xs);
    line-height: 1.42;
}

.admin-shell-dense :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-height: var(--app-control-height-sm);
    border-radius: 0.9rem;
    padding: var(--app-control-padding-sm);
    font-size: var(--app-text-sm);
    border-color: var(--admin-shell-border);
    background: color-mix(in srgb, var(--app-surface) 96%, transparent);
    color: var(--app-text);
}

.admin-shell-dense textarea {
    min-height: 7rem;
}

.admin-shell-dense input[type="file"] {
    padding-top: 0.58rem;
    padding-bottom: 0.58rem;
}

.admin-shell-dense :is(button, a).rounded-full {
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm);
    font-size: var(--app-text-xs);
}

.admin-shell-dense :is(button, a).rounded-lg {
    padding: 0.56rem 0.86rem;
    font-size: var(--app-text-xs);
}

.admin-shell-dense span.rounded-full {
    padding: 0.26rem 0.6rem;
}

.admin-shell-dense ::placeholder {
    color: var(--app-muted);
}

.admin-shell-dense table {
    width: 100%;
}

.admin-shell-dense th,
.admin-shell-dense td {
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
}

.admin-shell-dense .app-kpi-card__value {
    font-size: var(--app-text-2xl);
    line-height: 1.1;
}

.admin-shell-dense .app-status-badge {
    padding: var(--app-badge-padding);
    font-size: var(--app-text-2xs);
}

.admin-auth-body {
    position: relative;
    min-height: 100vh;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 12% 12%, rgba(59, 130, 246, 0.18), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(37, 99, 235, 0.16), transparent 30%),
        linear-gradient(160deg, #020617 0%, #09142b 48%, #020617 100%);
    color: #e2e8f0;
}

.admin-auth-backdrop {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.admin-auth-backdrop__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(88px);
}

.admin-auth-backdrop__orb--one {
    top: -6rem;
    left: 8%;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0) 72%);
}

.admin-auth-backdrop__orb--two {
    right: -8rem;
    bottom: -8rem;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 72%);
}

.admin-auth-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 72rem);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
}

.admin-auth-hero,
.admin-auth-panel {
    position: relative;
    overflow: hidden;
    border-radius: 1.7rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(2, 6, 23, 0.92));
    box-shadow: 0 32px 72px -44px rgba(2, 6, 23, 0.92);
}

.admin-auth-hero {
    padding: 1.45rem;
    background:
        radial-gradient(circle at 14% 10%, rgba(59, 130, 246, 0.16), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(37, 99, 235, 0.14), transparent 34%),
        linear-gradient(145deg, rgba(6, 16, 38, 0.96), rgba(2, 8, 21, 0.94));
}

.admin-auth-panel {
    padding: 1.35rem;
}

.admin-auth-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: rgba(30, 64, 175, 0.12);
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #bfdbfe;
}

.admin-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.admin-auth-brand-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
}

.admin-auth-brand-copy {
    min-width: 0;
}

.admin-auth-heading {
    font-family: var(--app-font-display);
    font-size: var(--app-text-2xl);
    font-weight: 600;
    line-height: 1.1;
    color: #f8fafc;
}

.admin-auth-subheading {
    margin-top: 0.35rem;
    font-size: var(--app-text-sm);
    line-height: 1.5;
    color: #94a3b8;
}

.admin-auth-highlights {
    margin-top: 1rem;
    display: grid;
    gap: 0.85rem;
}

.admin-auth-highlight {
    display: grid;
    gap: 0.28rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.12);
    background: rgba(15, 23, 42, 0.54);
    padding: 0.9rem;
}

.admin-auth-highlight strong {
    font-size: var(--app-text-sm);
    color: #f8fafc;
}

.admin-auth-highlight span {
    font-size: var(--app-text-xs);
    line-height: 1.45;
    color: #94a3b8;
}

.admin-auth-alert {
    border-radius: 1rem;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(127, 29, 29, 0.2);
    padding: 0.82rem 0.92rem;
    font-size: var(--app-text-xs);
    color: #fecaca;
}

.admin-auth-alert--success {
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(30, 64, 175, 0.16);
    color: #dbeafe;
}

.admin-auth-form {
    display: grid;
    gap: 0.85rem;
}

.admin-auth-form-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-auth-field {
    display: grid;
    gap: 0.35rem;
}

.admin-auth-label {
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #94a3b8;
}

.admin-auth-input {
    width: 100%;
    min-height: 2.75rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.64);
    padding: 0.72rem 0.88rem;
    font-size: var(--app-text-sm);
    color: #f8fafc;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.admin-auth-input:focus {
    border-color: rgba(96, 165, 250, 0.62);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.admin-auth-input::placeholder {
    color: #64748b;
}

.admin-auth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-auth-link {
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: #bfdbfe;
}

.admin-auth-link:hover {
    color: #eff6ff;
}

.admin-auth-submit {
    width: 100%;
    min-height: var(--app-control-height-md);
    border: 1px solid var(--app-button-primary-border);
    border-radius: 999px;
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    font-size: var(--app-text-sm);
    font-weight: 700;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
    box-shadow: var(--app-button-primary-shadow);
}

.admin-auth-submit:hover {
    background: var(--app-button-primary-bg-hover);
    color: var(--app-button-primary-text);
    filter: none;
    transform: translateY(-1px);
}

.admin-auth-note {
    font-size: var(--app-text-xs);
    line-height: 1.5;
    color: #94a3b8;
}

html.dark .admin-shell-backdrop__orb--one {
    background: radial-gradient(circle, rgba(71, 85, 105, 0.10) 0%, rgba(71, 85, 105, 0) 72%);
}

html.dark body.app-role-admin {
    background:
        radial-gradient(circle at 0% 0%, rgba(71, 85, 105, 0.08), transparent 18%),
        radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.03), transparent 14%),
        linear-gradient(180deg, #020617 0%, #020617 10rem, #030712 100%);
}

html.dark .admin-shell-backdrop__orb--two {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, rgba(59, 130, 246, 0) 72%);
}

html.dark .admin-shell-toolbar {
    border-color: rgba(51, 65, 85, 0.7);
    background: rgba(2, 6, 23, 0.82);
    box-shadow: 0 10px 24px -22px rgba(2, 6, 23, 0.78);
}

html.dark .admin-shell-card,
html.dark .admin-shell-soft-card,
html.dark .admin-shell-empty {
    border-color: color-mix(in srgb, var(--admin-shell-accent) 12%, rgba(51, 65, 85, 0.96) 88%);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px -24px rgba(2, 6, 23, 0.62);
}

html.dark .admin-shell-panel,
html.dark .admin-shell-modal {
    border-color: color-mix(in srgb, var(--admin-shell-accent) 12%, rgba(51, 65, 85, 0.96) 88%);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.94));
    box-shadow: 0 14px 30px -24px rgba(2, 6, 23, 0.62);
}

html.dark .admin-shell-hero {
    border-color: color-mix(in srgb, var(--admin-shell-accent) 16%, rgba(51, 65, 85, 0.96) 84%);
    background:
        radial-gradient(circle at 14% 8%, rgba(71, 85, 105, 0.08), transparent 22%),
        radial-gradient(circle at 88% 12%, rgba(59, 130, 246, 0.05), transparent 24%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
    box-shadow: 0 16px 34px -24px rgba(2, 6, 23, 0.68);
}

html.dark .admin-shell-metric::after {
    background: color-mix(in srgb, var(--admin-shell-accent) 14%, transparent);
}

html.dark .admin-shell-alert--error {
    background: color-mix(in srgb, var(--app-danger) 12%, rgba(2, 6, 23, 0.88));
    color: color-mix(in srgb, var(--app-danger) 62%, #fecdd3 38%);
}

html.dark .admin-shell-alert--success,
html.dark .admin-shell-alert--info {
    background: color-mix(in srgb, var(--app-primary) 12%, rgba(2, 6, 23, 0.88));
    color: color-mix(in srgb, var(--app-primary) 56%, #dbeafe 44%);
}

html.dark .admin-shell-alert--warning {
    background: color-mix(in srgb, var(--app-warning) 12%, rgba(2, 6, 23, 0.88));
    color: color-mix(in srgb, var(--app-warning) 58%, #fef3c7 42%);
}

html.dark .admin-inline-accent {
    color: color-mix(in srgb, var(--admin-inline-tone) 58%, #e2e8f0 42%);
}

html.dark .admin-kpi-value {
    color: color-mix(in srgb, var(--admin-kpi-tone) 56%, #f8fafc 44%);
}

html.dark .admin-kpi-value::before {
    box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--admin-kpi-tone) 18%, transparent);
}

html.dark .admin-kpi-note {
    color: color-mix(in srgb, var(--admin-kpi-note-tone) 60%, #cbd5e1 40%);
}

html.dark .admin-accent-link {
    color: color-mix(in srgb, var(--admin-link-tone) 56%, #dbeafe 44%);
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-icon {
    background: color-mix(in srgb, var(--admin-kpi-surface-tone) 24%, rgba(15, 23, 42, 0.76));
    border-color: color-mix(in srgb, var(--admin-kpi-surface-tone) 34%, rgba(148, 163, 184, 0.26));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--admin-kpi-surface-tone) 16%, rgba(241, 245, 249, 0.06));
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface {
    background: linear-gradient(160deg, #1e293b, #0f172a) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, #0f172a 78%, var(--admin-kpi-surface-tone) 22%),
        color-mix(in srgb, #020617 72%, var(--admin-kpi-surface-tone) 28%)
    ) !important;
    border-color: color-mix(in srgb, var(--admin-kpi-surface-tone) 44%, rgba(148, 163, 184, 0.22)) !important;
    box-shadow:
        0 18px 30px -24px rgba(2, 6, 23, 0.72),
        inset 0 1px 0 color-mix(in srgb, var(--admin-kpi-surface-tone) 12%, rgba(241, 245, 249, 0.06)) !important;
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface::before {
    background: color-mix(in srgb, var(--admin-kpi-surface-tone) 72%, #e2e8f0 28%);
    opacity: 0.56;
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface .admin-shell-section-title {
    color: #dbe6fb !important;
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface .admin-kpi-note,
html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface .admin-kpi-note--slate {
    color: #b9c8e3 !important;
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface .admin-kpi-value {
    color: color-mix(in srgb, var(--admin-kpi-tone) 68%, #f8fafc 32%) !important;
}

html.dark body[data-view="admin/dashboard"] .admin-dashboard-kpi-surface .admin-kpi-value::before {
    box-shadow: 0 0 0 0.34rem color-mix(in srgb, var(--admin-kpi-tone) 24%, transparent) !important;
}

html.dark body[data-view="admin/support_agents"] .admin-support-step__icon {
    color: #93c5fd;
    border-color: color-mix(in srgb, #3b82f6 40%, rgba(148, 163, 184, 0.26) 60%);
    background: color-mix(in srgb, #1d4ed8 20%, rgba(15, 23, 42, 0.82));
}

html.dark body[data-view="admin/support_agents"] .admin-support-table thead tr {
    border-bottom-color: color-mix(in srgb, #3b82f6 24%, rgba(71, 85, 105, 0.76) 76%);
}

html.dark body[data-view="admin/support_agents"] .admin-support-table__row:hover {
    background: color-mix(in srgb, #2563eb 16%, rgba(15, 23, 42, 0.84));
}

html.dark body[data-view="admin/support_agents"] .admin-support-table__row:focus-within {
    background: color-mix(in srgb, #2563eb 22%, rgba(15, 23, 42, 0.78));
}

html.dark body[data-view="admin/support_agents"] .admin-support-modal-panel {
    border-color: color-mix(in srgb, #2563eb 28%, rgba(51, 65, 85, 0.72) 72%);
}

html.dark body[data-view="admin/courses"] {
    --admin-courses-neutral-bg: color-mix(in srgb, #1e3a8a 10%, rgba(15, 23, 42, 0.9) 90%);
    --admin-courses-neutral-border: color-mix(in srgb, #60a5fa 28%, rgba(51, 65, 85, 0.72) 72%);
    --admin-courses-hover-bg: color-mix(in srgb, #2563eb 20%, rgba(15, 23, 42, 0.84) 80%);
    --admin-courses-primary-bg: color-mix(in srgb, #2563eb 24%, rgba(15, 23, 42, 0.78) 76%);
    --admin-courses-primary-border: color-mix(in srgb, #60a5fa 50%, rgba(51, 65, 85, 0.5) 50%);
    --admin-courses-primary-text: #dbeafe;
    --admin-courses-danger-bg: color-mix(in srgb, #dc2626 22%, rgba(15, 23, 42, 0.8) 78%);
    --admin-courses-danger-border: color-mix(in srgb, #f87171 40%, rgba(51, 65, 85, 0.6) 60%);
    --admin-courses-danger-text: #fecaca;
    --admin-courses-kpi-pending-bg: linear-gradient(145deg, rgba(37, 99, 235, 0.5), rgba(30, 58, 138, 0.55));
    --admin-courses-kpi-pending-bg: linear-gradient(145deg, color-mix(in srgb, #2563eb 42%, rgba(15, 23, 42, 0.58)), color-mix(in srgb, #1d4ed8 30%, rgba(2, 6, 23, 0.7)));
    --admin-courses-kpi-pending-border: color-mix(in srgb, #60a5fa 52%, rgba(51, 65, 85, 0.48));
    --admin-courses-kpi-pending-text: #dbeafe;
    --admin-courses-kpi-processed-bg: linear-gradient(145deg, rgba(124, 58, 237, 0.5), rgba(91, 33, 182, 0.55));
    --admin-courses-kpi-processed-bg: linear-gradient(145deg, color-mix(in srgb, #7c3aed 40%, rgba(15, 23, 42, 0.6)), color-mix(in srgb, #6d28d9 30%, rgba(2, 6, 23, 0.72)));
    --admin-courses-kpi-processed-border: color-mix(in srgb, #a78bfa 48%, rgba(51, 65, 85, 0.52));
    --admin-courses-kpi-processed-text: #ede9fe;
    --admin-courses-kpi-approved-bg: linear-gradient(145deg, rgba(5, 150, 105, 0.52), rgba(4, 120, 87, 0.56));
    --admin-courses-kpi-approved-bg: linear-gradient(145deg, color-mix(in srgb, #059669 40%, rgba(15, 23, 42, 0.6)), color-mix(in srgb, #047857 30%, rgba(2, 6, 23, 0.72)));
    --admin-courses-kpi-approved-border: color-mix(in srgb, #34d399 46%, rgba(51, 65, 85, 0.54));
    --admin-courses-kpi-approved-text: #d1fae5;
    --admin-courses-kpi-rejected-bg: linear-gradient(145deg, rgba(220, 38, 38, 0.5), rgba(153, 27, 27, 0.55));
    --admin-courses-kpi-rejected-bg: linear-gradient(145deg, color-mix(in srgb, #dc2626 38%, rgba(15, 23, 42, 0.62)), color-mix(in srgb, #b91c1c 30%, rgba(2, 6, 23, 0.72)));
    --admin-courses-kpi-rejected-border: color-mix(in srgb, #fca5a5 46%, rgba(51, 65, 85, 0.54));
    --admin-courses-kpi-rejected-text: #fee2e2;
}

html.dark .admin-shell-badge--info {
    border-color: color-mix(in srgb, #93c5fd 52%, rgba(51, 65, 85, 0.48) 48%);
    background: color-mix(in srgb, #2563eb 40%, rgba(15, 23, 42, 0.6) 60%);
    color: #ffffff;
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi--pending {
    border-color: var(--admin-courses-kpi-pending-border);
    background: var(--admin-courses-kpi-pending-bg);
    color: var(--admin-courses-kpi-pending-text);
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi--processed {
    border-color: var(--admin-courses-kpi-processed-border);
    background: var(--admin-courses-kpi-processed-bg);
    color: var(--admin-courses-kpi-processed-text);
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi--approved {
    border-color: var(--admin-courses-kpi-approved-border);
    background: var(--admin-courses-kpi-approved-bg);
    color: var(--admin-courses-kpi-approved-text);
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi--rejected {
    border-color: var(--admin-courses-kpi-rejected-border);
    background: var(--admin-courses-kpi-rejected-bg);
    color: var(--admin-courses-kpi-rejected-text);
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi-item__label {
    color: #bfd0ea;
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi-item__value {
    color: #e2e8f0;
}

html.dark body[data-view="admin/courses"] .admin-courses-kpi .admin-shell-label {
    color: color-mix(in srgb, currentColor 60%, #cbd5e1 40%);
}

html.dark body[data-view="admin/courses"] .admin-courses-row.is-active {
    box-shadow: 0 14px 26px -22px rgba(2, 6, 23, 0.85);
}

html.dark body[data-view="admin/courses"] .admin-courses-action {
    color: #dbeafe;
}

html.dark body[data-view="admin/courses"] .admin-courses-action--neutral,
html.dark body[data-view="admin/courses"] .admin-courses-action--ghost {
    color: #cbd5e1;
}

html.dark body[data-view="admin/courses"] .admin-courses-shortcuts kbd {
    background: color-mix(in srgb, #2563eb 16%, rgba(15, 23, 42, 0.88));
}

html.dark body[data-view="admin/courses"] .admin-courses-video-wrap {
    background: color-mix(in srgb, #2563eb 10%, rgba(2, 6, 23, 0.92));
}

html.dark body[data-view="admin/courses"] .admin-courses-history-item__date {
    color: #94a3b8;
}

html.dark body[data-view="admin/courses"] .admin-shell-table tbody tr:hover {
    background: color-mix(in srgb, #2563eb 16%, rgba(15, 23, 42, 0.45));
}

html.dark body[data-view="admin/secondary_admins"] .admin-secondary-list-item {
    border-color: color-mix(in srgb, #3b82f6 28%, rgba(51, 65, 85, 0.74) 72%);
    background: color-mix(in srgb, #1d4ed8 11%, rgba(15, 23, 42, 0.89));
}

html.dark body[data-view="admin/secondary_admins"] .admin-secondary-list-item:hover {
    border-color: color-mix(in srgb, #3b82f6 40%, rgba(51, 65, 85, 0.6) 60%);
    background: color-mix(in srgb, #2563eb 18%, rgba(15, 23, 42, 0.82));
}

html.dark body[data-view="admin/secondary_admins"] .admin-secondary-step__icon {
    color: #93c5fd;
    border-color: color-mix(in srgb, #3b82f6 40%, rgba(148, 163, 184, 0.26) 60%);
    background: color-mix(in srgb, #1d4ed8 20%, rgba(15, 23, 42, 0.82));
}

html.dark body[data-view="admin/secondary_admins"] .admin-secondary-permission-option {
    border-color: color-mix(in srgb, #3b82f6 28%, rgba(148, 163, 184, 0.24) 72%);
    background: color-mix(in srgb, #2563eb 14%, rgba(15, 23, 42, 0.84));
    color: #dbeafe;
}

html.dark body[data-view="admin/secondary_admins"] .admin-secondary-permission-pill {
    border-color: color-mix(in srgb, #3b82f6 38%, rgba(148, 163, 184, 0.2) 62%);
    background: color-mix(in srgb, #2563eb 22%, rgba(15, 23, 42, 0.78));
    color: #dbeafe;
}

html.dark body[data-view="admin/secondary_admins"] .admin-secondary-modal-panel {
    border-color: color-mix(in srgb, #2563eb 28%, rgba(51, 65, 85, 0.72) 72%);
}

html.dark .admin-topbar-badge--active,
html.dark .admin-topbar-badge--done {
    border-color: color-mix(in srgb, var(--app-primary-300) 44%, rgba(148, 163, 184, 0.22) 56%);
    background: rgba(10, 17, 30, 0.84);
    color: #e7efff;
}

html.dark .admin-dashboard-shortcut,
html.dark .admin-dashboard-module {
    border-color: color-mix(in srgb, var(--app-primary-300) 22%, rgba(148, 163, 184, 0.24) 78%);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.93), rgba(5, 11, 24, 0.95));
}

html.dark .admin-topbar-action--neutral {
    background: color-mix(in srgb, var(--app-primary-400) 16%, rgba(15, 23, 42, 0.94) 84%);
    border-color: color-mix(in srgb, var(--app-primary-300) 48%, rgba(148, 163, 184, 0.24) 52%);
    color: #e2e8f0;
}

html.dark .admin-shell-nav-link {
    background: var(--app-button-bg);
    border-color: var(--app-button-border);
    color: var(--app-button-text);
}

html.dark .admin-shell-nav-link:hover,
html.dark .admin-dashboard-shortcut:hover {
    background: var(--app-button-bg-hover);
    border-color: var(--app-button-border-strong);
    color: var(--app-button-text-strong);
}

html.dark .admin-shell-nav-link--active {
    background: var(--app-button-active-bg);
    border-color: var(--app-button-active-border);
    box-shadow: var(--app-button-active-shadow);
}

html.dark .admin-dashboard-module--allowed {
    border-color: color-mix(in srgb, var(--app-primary-300) 52%, rgba(148, 163, 184, 0.2) 48%);
    background: linear-gradient(180deg, rgba(22, 40, 74, 0.96), rgba(11, 24, 46, 0.96));
    box-shadow:
        0 16px 30px -24px rgba(37, 99, 235, 0.42),
        inset 0 1px 0 rgba(191, 219, 254, 0.1);
}

html.dark .admin-dashboard-module--allowed:hover {
    border-color: color-mix(in srgb, var(--app-primary-200) 58%, rgba(148, 163, 184, 0.2) 42%);
    background: linear-gradient(180deg, rgba(25, 47, 86, 0.96), rgba(14, 30, 58, 0.96));
}

html.dark .admin-sidebar-section {
    border-color: rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(10, 17, 30, 0.92), rgba(4, 9, 20, 0.94));
}

html.dark body.app-role-admin[data-view^="admin/"] #admin-sidebar,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] #admin-sidebar {
    border-right-color: color-mix(in srgb, #0284c7 26%, rgba(148, 163, 184, 0.2) 74%) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, #0284c7 8%, rgba(15, 23, 42, 0.96) 92%),
        rgba(15, 23, 42, 0.98)
    ) !important;
    box-shadow: 10px 0 28px -28px rgba(2, 132, 199, 0.24) !important;
}

html.dark body.app-role-admin[data-view^="admin/"] #admin-sidebar .app-shell-sidebar__brand,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] #admin-sidebar .app-shell-sidebar__brand {
    border-bottom-color: color-mix(in srgb, #0284c7 24%, rgba(148, 163, 184, 0.18) 76%) !important;
    background: color-mix(in srgb, #0284c7 6%, rgba(15, 23, 42, 0.98) 94%) !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-sidebar-section,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-sidebar-section {
    border-color: color-mix(in srgb, #0284c7 24%, rgba(148, 163, 184, 0.18) 76%) !important;
    background: color-mix(in srgb, #0284c7 10%, rgba(15, 23, 42, 0.94) 90%) !important;
    box-shadow: 0 12px 24px -24px rgba(2, 132, 199, 0.18) !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link {
    border-color: color-mix(in srgb, #0284c7 26%, rgba(148, 163, 184, 0.18) 74%) !important;
    background: color-mix(in srgb, #0284c7 9%, rgba(15, 23, 42, 0.92) 91%) !important;
    color: #d1d5db !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link .app-nav-link__label,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link .app-nav-link__label {
    color: inherit !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link:hover,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link:hover {
    border-color: color-mix(in srgb, #0284c7 38%, rgba(148, 163, 184, 0.16) 62%) !important;
    background: color-mix(in srgb, #0284c7 14%, rgba(15, 23, 42, 0.9) 86%) !important;
    color: #f8fafc !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg) !important;
    color: var(--app-button-active-text) !important;
    box-shadow: var(--app-button-active-shadow) !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active:hover,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active:hover {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-button-active-bg-hover, var(--app-button-active-bg)) !important;
    color: var(--app-button-active-text) !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link__icon,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link__icon {
    color: #60a5fa !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active .admin-shell-nav-link__icon,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active .admin-shell-nav-link__icon {
    color: #ffffff !important;
}

html.dark .admin-dashboard-priority {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(7, 11, 22, 0.94));
}

html.dark .admin-dashboard-count--info {
    background: color-mix(in srgb, var(--app-primary) 12%, rgba(2, 6, 23, 0.9));
    color: color-mix(in srgb, var(--app-primary) 56%, #dbeafe 44%);
}

html.dark .admin-dashboard-count--success {
    background: color-mix(in srgb, #059669 14%, rgba(2, 6, 23, 0.9));
    color: color-mix(in srgb, #34d399 56%, #d1fae5 44%);
}

html.dark .admin-dashboard-count--warning {
    background: color-mix(in srgb, var(--app-warning) 14%, rgba(2, 6, 23, 0.9));
    color: color-mix(in srgb, var(--app-warning) 56%, #fef3c7 44%);
}

html.dark .admin-dashboard-count--danger {
    background: color-mix(in srgb, var(--app-danger) 14%, rgba(2, 6, 23, 0.9));
    color: color-mix(in srgb, var(--app-danger) 58%, #fecdd3 42%);
}

html.dark .admin-dashboard-count--violet {
    background: color-mix(in srgb, #7c3aed 12%, rgba(2, 6, 23, 0.9));
    color: color-mix(in srgb, #a78bfa 54%, #ede9fe 46%);
}

@media (min-width: 1280px) {
    body.app-role-admin[data-view="admin/support"] .admin-shell-dense > .grid {
        grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .admin-shell-content {
        width: min(100%, 100%);
    }
}

@media (max-width: 767px) {
    .admin-shell-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .admin-shell-dense .text-4xl {
        font-size: var(--app-text-3xl);
    }

    .admin-shell-dense .text-3xl {
        font-size: var(--app-text-2xl);
    }

    .admin-shell-dense .text-2xl {
        font-size: var(--app-text-xl);
    }

    .admin-shell-backdrop__orb--one {
        left: -2rem;
        width: 18rem;
        height: 18rem;
    }

    .admin-shell-backdrop__orb--two {
        right: -8rem;
        bottom: -8rem;
        width: 22rem;
        height: 22rem;
    }

    .admin-auth-body {
        padding: 0.9rem;
    }

    .admin-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .admin-auth-shell,
    .admin-auth-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-auth-hero,
    .admin-auth-panel {
        border-radius: 1.4rem;
    }
}

/* ============================================================
   Public UI
   ============================================================ */

body:is(.app-public-page, .app-auth-page, .app-role-auth, .app-role-web[data-view^="web/"]) {
    --app-panel-surface: var(--app-panel-flat-bg);
    --app-chip-surface: color-mix(in srgb, var(--app-surface-strong) 95%, transparent);
    --app-surface-shadow: var(--app-shadow);
    --app-chip-shadow: var(--app-shadow-sm);
    background: var(--app-page-flat-bg) !important;
    background-image: none !important;
}

html.dark body:is(.app-public-page, .app-auth-page, .app-role-auth, .app-role-web[data-view^="web/"]) {
    --app-panel-surface: var(--app-panel-flat-bg-dark);
    --app-chip-surface: color-mix(in srgb, rgba(8, 18, 34, 0.92) 90%, transparent);
    background: var(--app-page-flat-bg-dark) !important;
    background-image: none !important;
}

body:is(.app-public-page, .app-auth-page, .app-role-auth, .app-role-web[data-view^="web/"]) > .pointer-events-none.fixed.inset-0.overflow-hidden,
body:is(.app-public-page, .app-auth-page, .app-role-auth, .app-role-web[data-view^="web/"]) .gradient-animated {
    display: none !important;
}

body.app-auth-page .app-auth-submit {
    box-shadow: 0 8px 18px -16px color-mix(in srgb, var(--app-shell-accent) 34%, transparent);
}

body:is(.app-auth-page, .app-role-company) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--app-primary-400) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 16%, transparent) !important;
    outline: none !important;
}

body:is(.app-auth-page, .app-role-company) :is(a, button)[class*="text-emerald-"] {
    color: var(--app-link) !important;
}

body:is(.app-auth-page, .app-role-company) :is(a, button)[class*="text-emerald-"]:hover {
    color: var(--app-primary-700) !important;
}

html.dark body:is(.app-auth-page, .app-role-company) :is(a, button)[class*="text-emerald-"]:hover,
html[data-theme="dark"] body:is(.app-auth-page, .app-role-company) :is(a, button)[class*="text-emerald-"]:hover {
    color: var(--app-primary-300) !important;
}

body.app-role-company :is(a, button, input[type="submit"], input[type="button"]):is(
    [class*="bg-emerald-"],
    [class*="bg-green-"],
    [class*="border-emerald-"][class*="text-emerald-"],
    [class*="border-green-"][class*="text-green-"]
) {
    border: 1px solid var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
}

body.app-role-company :is(a, button, input[type="submit"], input[type="button"]):is(
    [class*="bg-emerald-"],
    [class*="bg-green-"],
    [class*="border-emerald-"][class*="text-emerald-"],
    [class*="border-green-"][class*="text-green-"]
):hover {
    background: var(--app-button-primary-bg-hover) !important;
    color: var(--app-button-primary-text) !important;
}

body.app-role-company :is(input, textarea, select)[class*="border-emerald-"] {
    border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-border) 72%) !important;
}

body.app-role-company :is(div, span, article, section, p, small, strong, li)[class*="border-emerald-"] {
    border-color: color-mix(in srgb, var(--app-primary) 28%, var(--app-border) 72%) !important;
}

body.app-role-company :is(div, span, article, section, p, small, strong, li)[class*="bg-emerald-"] {
    background: color-mix(in srgb, var(--app-primary) 8%, var(--app-surface) 92%) !important;
}

body.app-role-company :is(div, span, article, section, p, small, strong, li)[class*="text-emerald-"] {
    color: color-mix(in srgb, var(--app-primary) 78%, var(--app-text) 22%) !important;
}

body:is(.app-public-page, .app-auth-page, .app-role-auth, .app-role-web[data-view^="web/"]) footer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body:is([data-view="web/profile"], [data-view="web/notifications"], [data-view="web/support"]) {
    background: var(--app-bg) !important;
    background-image: none !important;
}

html.dark body:is([data-view="web/profile"], [data-view="web/notifications"], [data-view="web/support"]) {
    background: var(--app-bg) !important;
    background-image: none !important;
}

:is(main.profile-page, main.support-hub) {
    --app-shell-accent: var(--app-role-accent, var(--app-primary));
    --app-shell-border: color-mix(in srgb, var(--app-shell-accent) 24%, var(--app-border) 76%);
    --app-shell-border-strong: color-mix(in srgb, var(--app-shell-accent) 36%, var(--app-border) 64%);
    --app-page-card-bg-light: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent) 4%, var(--app-surface-strong) 96%), var(--app-surface));
    --app-page-card-bg-soft-light: color-mix(in srgb, var(--app-shell-accent) 3%, var(--app-surface) 97%);
    --app-page-card-bg-dark: linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(2, 6, 23, 0.92));
}

:is(main.profile-page, main.support-hub) :is(section, article, aside, nav, div, li)[class*="rounded-2xl"][class*="border"],
:is(main.profile-page, main.support-hub) :is(section, article, aside, nav, div, li)[class*="rounded-3xl"][class*="border"] {
    border-color: var(--app-shell-border) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

:is(main.profile-page, main.support-hub) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea) {
    border-color: var(--app-shell-border) !important;
    box-shadow: none !important;
}

:is(main.profile-page, main.support-hub) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="file"]), select, textarea):focus {
    border-color: var(--app-shell-border-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent) 18%, transparent) !important;
    outline: none !important;
}

/* Compact tuning for support/profile content areas */
.student-content-main.support-hub,
main.profile-page.student-content-main {
    max-width: 70rem;
}

.student-content-main.support-hub .support-hero {
    padding: 1rem !important;
    border-radius: 1.25rem !important;
}

.student-content-main.support-hub :is(.support-kpi, .support-conv-panel, .support-thread-panel, .support-empty-card) {
    border-radius: 1.15rem !important;
}

.student-content-main.support-hub :is(.support-chip-btn, .support-new-btn, .support-send-btn, .support-empty-action, .support-reset),
main.profile-page.student-content-main :is([data-profile-save], [data-profile-cancel]) {
    min-height: var(--app-control-height-sm);
    padding: 0.45rem 0.78rem !important;
    font-size: var(--app-text-xs) !important;
}

.student-content-main.support-hub .support-thread-messages {
    max-height: 50vh;
}

/* Support */
.support-hub {
    --support-border: var(--app-shell-border);
}

.support-hub .support-hero,
.support-hub .support-kpi,
.support-hub .support-conv-panel,
.support-hub .support-thread-panel,
.support-hub .support-empty-card {
    border-color: var(--support-border) !important;
    background: var(--app-page-card-bg-light) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

html.dark .support-hub .support-hero,
html.dark .support-hub .support-kpi,
html.dark .support-hub .support-conv-panel,
html.dark .support-hub .support-thread-panel,
html.dark .support-hub .support-empty-card {
    background: var(--app-page-card-bg-dark) !important;
}

.support-hub .support-thread-header {
    border-color: var(--support-border) !important;
    background: var(--app-page-card-bg-soft-light) !important;
}

.support-hub .support-thread-messages {
    background: color-mix(in srgb, var(--app-shell-accent) 4%, var(--app-surface) 96%);
}

html.dark .support-hub .support-thread-messages {
    background: color-mix(in srgb, var(--app-shell-accent) 8%, rgba(15, 23, 42, 0.92) 92%);
}

.support-hub .support-hero__eyebrow {
    color: color-mix(in srgb, var(--app-shell-accent) 74%, #475569 26%);
}

.support-hub .support-hero__subtitle {
    color: var(--app-muted, #64748b);
}

.support-hub :is(.support-panel-title, .support-thread-title, .support-empty-title) {
    color: var(--app-text) !important;
}

.support-hub :is(.support-panel-subtitle, .support-thread-meta, .support-empty-subtitle, .support-status, .support-file-hint) {
    color: var(--app-text-secondary) !important;
}

.support-hub .support-chip-btn,
.support-hub .support-new-btn,
.support-hub .support-reset,
.support-hub .support-file-btn,
.support-hub .support-empty-secondary {
    border: 1px solid var(--app-button-border);
    background: var(--app-button-bg);
    color: var(--app-button-text);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.support-hub .support-chip-btn:hover,
.support-hub .support-new-btn:hover,
.support-hub .support-reset:hover,
.support-hub .support-file-btn:hover,
.support-hub .support-empty-secondary:hover {
    border-color: var(--app-button-border-strong);
    background: var(--app-button-bg-hover);
    color: var(--app-button-text-strong);
}

.support-hub .support-reset {
    border-radius: 999px !important;
    min-height: var(--app-control-height-sm);
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-sm);
    white-space: nowrap;
}

.support-hub .support-kpi__pill {
    background: color-mix(in srgb, #2563eb 16%, transparent);
    color: #1d4ed8;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-xs);
}

.support-hub .support-kpi--support .support-kpi__value {
    color: #0f766e;
}

.support-hub .support-kpi--notif .support-kpi__value {
    color: #0c4a6e;
}

.support-hub .support-kpi--meeting .support-kpi__value {
    color: #92400e;
}

.support-hub .support-thread-status {
    color: var(--app-text-secondary) !important;
    font-weight: 600;
}

.support-hub .support-tab {
    border: 1px solid var(--app-button-border);
    background: var(--app-button-bg);
    color: var(--app-button-text);
}

.support-hub .support-tab.is-active {
    border-color: var(--app-button-active-border);
    background: var(--app-button-active-bg);
    color: var(--app-button-active-text);
    box-shadow: var(--app-button-active-shadow);
}

html.dark .support-hub .support-tab.is-active {
    color: var(--app-button-active-text);
    background: var(--app-button-active-bg);
}

.support-hub .support-input {
    border-color: var(--support-border) !important;
    background: var(--app-page-card-bg-soft-light);
}

.support-hub .support-input:focus {
    border-color: var(--app-shell-border-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent) 18%, transparent) !important;
    outline: none;
}

.support-hub .support-send-btn,
.support-hub .support-empty-action {
    border: 1px solid var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-button-primary-shadow);
}

.support-hub .support-send-btn:hover,
.support-hub .support-empty-action:hover {
    background: var(--app-button-primary-bg-hover);
    color: var(--app-button-primary-text);
}

.support-hub .support-conv-item {
    border-color: var(--support-border) !important;
    background: var(--app-page-card-bg-soft-light) !important;
    color: var(--app-text) !important;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.support-hub .support-conv-item:hover {
    transform: translateY(-1px);
    border-color: var(--app-shell-border-strong) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 8%, var(--app-surface) 92%) !important;
}

.support-hub .support-conv-item.is-active {
    border-color: color-mix(in srgb, var(--app-shell-accent) 42%, var(--app-border) 58%) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 12%, var(--app-surface) 88%) !important;
}

html.dark .support-hub .support-conv-item {
    background: color-mix(in srgb, var(--app-shell-accent) 8%, rgba(15, 23, 42, 0.92) 92%) !important;
}

html.dark .support-hub .support-conv-item.is-active {
    background: color-mix(in srgb, var(--app-shell-accent) 24%, rgba(15, 23, 42, 0.92) 76%) !important;
}

.support-hub .support-conv-title {
    color: var(--app-text) !important;
}

.support-hub .support-conv-preview {
    color: var(--app-text-secondary) !important;
}

.support-hub :is(.support-conv-time, .support-conv-owner) {
    color: color-mix(in srgb, var(--app-text-secondary) 86%, transparent) !important;
}

.support-hub :is(.support-avatar, .support-conv-avatar, .support-msg-avatar) {
    border: 1px solid color-mix(in srgb, var(--app-shell-accent) 38%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent) 70%, #1d4ed8 30%), color-mix(in srgb, var(--app-shell-accent) 84%, #0f172a 16%)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px -18px color-mix(in srgb, var(--app-shell-accent) 64%, transparent);
}

.support-hub .support-unread-pill {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-xs);
}

.support-hub .support-status-pill {
    border: 1px solid var(--support-border);
    font-weight: 600;
    min-height: var(--app-pill-height);
    padding: var(--app-pill-padding);
    font-size: var(--app-text-xs);
    line-height: var(--app-leading-xs);
}

.support-hub .support-msg {
    align-items: flex-end;
}

.support-hub .support-msg-stack {
    max-width: min(78%, 42rem);
}

.support-hub .support-msg-meta {
    color: color-mix(in srgb, var(--app-text-secondary) 86%, transparent) !important;
}

.support-hub .support-msg-bubble {
    border: 1px solid var(--support-border);
    line-height: 1.45;
}

.support-hub .support-msg-bubble.is-peer {
    border-color: var(--support-border) !important;
    background: var(--app-page-card-bg-soft-light) !important;
    color: var(--app-text) !important;
}

.support-hub .support-msg-bubble.is-self {
    border-color: color-mix(in srgb, var(--app-shell-accent) 58%, transparent) !important;
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
}

html.dark .support-hub .support-msg-bubble.is-peer {
    background: color-mix(in srgb, var(--app-shell-accent) 10%, rgba(15, 23, 42, 0.94) 90%) !important;
}

.support-hub .support-attachment-link {
    border-color: var(--support-border) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 4%, var(--app-surface) 96%) !important;
    color: color-mix(in srgb, var(--app-shell-accent) 80%, var(--app-text) 20%) !important;
}

.support-hub .support-attachment-link:hover {
    border-color: var(--app-shell-border-strong) !important;
    color: var(--app-text) !important;
}

.support-hub .support-msg-bubble.is-self .support-attachment-link {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

.support-hub .support-msg-empty {
    border-color: var(--support-border) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 5%, var(--app-surface) 95%);
    color: var(--app-text-secondary);
}

.support-thread-messages::-webkit-scrollbar {
    width: 8px;
}

.support-thread-messages::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--app-shell-accent) 30%, #94a3b8 70%);
    border-radius: 999px;
}

/* Profile */
main.profile-page.student-content-main {
    padding-bottom: calc(8.6rem + env(safe-area-inset-bottom, 0px)) !important;
}

main.profile-page [data-profile-action-bar] {
    border-color: color-mix(in srgb, var(--app-shell-accent) 26%, var(--app-border) 74%) !important;
    background: color-mix(in srgb, var(--app-surface) 92%, var(--app-shell-accent) 8%) !important;
    box-shadow: 0 -12px 28px -24px rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html.dark main.profile-page [data-profile-action-bar] {
    border-color: color-mix(in srgb, var(--app-shell-accent) 30%, rgba(148, 163, 184, 0.34) 70%) !important;
    background: color-mix(in srgb, rgba(2, 6, 23, 0.94) 90%, var(--app-shell-accent) 10%) !important;
    box-shadow: 0 -14px 28px -22px rgba(2, 6, 23, 0.82);
}

main.profile-page [data-profile-action-bar] [data-profile-dirty] {
    color: var(--app-text-secondary) !important;
}

main.profile-page [data-upload-widget] {
    border-color: var(--app-shell-border) !important;
    background: var(--app-page-card-bg-soft-light) !important;
}

html.dark main.profile-page [data-upload-widget] {
    background: color-mix(in srgb, var(--app-shell-accent) 6%, rgba(15, 23, 42, 0.94) 94%) !important;
}

main.profile-page [data-upload-dropzone] {
    border-color: color-mix(in srgb, var(--app-shell-accent) 24%, var(--app-shell-border) 76%) !important;
}

main.profile-page [data-profile-save],
main.profile-page [data-profile-cancel] {
    min-height: 2.5rem;
}

body.profile-actions-managed main.profile-page [data-profile-action-bar]:not(.is-visible) {
    display: none;
}

main.profile-page [data-profile-dirty] {
    font-weight: 500;
}

@media (min-width: 768px) {
    body:is(.app-role-teacher, .app-role-student)[data-view$="/profile"] main.profile-page [data-profile-action-bar] {
        left: 16.8rem !important;
        right: 0 !important;
    }
}

main.profile-page [data-password-toggle] {
    border-color: var(--app-shell-border) !important;
    background: var(--app-page-card-bg-soft-light) !important;
    color: var(--app-text) !important;
}

main.profile-page .profile-password-field__label {
    display: block;
}

main.profile-page .profile-password-field__control {
    position: relative;
    margin-top: 0.35rem;
}

main.profile-page .profile-password-field__input {
    padding-right: 6.4rem !important;
}

main.profile-page .profile-password-field__toggle {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    z-index: 1;
    min-width: 4.9rem;
    min-height: 2.1rem;
    transform: translateY(-50%);
}

main.profile-page .profile-password-field__toggle [data-password-toggle-label] {
    white-space: nowrap;
}

main.profile-page [data-password-toggle]:hover {
    border-color: var(--app-shell-border-strong) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 9%, var(--app-surface) 91%) !important;
}

html.dark main.profile-page [data-password-toggle] {
    border-color: color-mix(in srgb, var(--app-shell-accent) 35%, rgba(148, 163, 184, 0.42) 65%) !important;
    background: color-mix(in srgb, rgba(15, 23, 42, 0.92) 84%, var(--app-shell-accent) 16%) !important;
    color: #e2e8f0 !important;
}

html.dark main.profile-page [data-password-toggle]:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent) 56%, rgba(148, 163, 184, 0.44) 44%) !important;
    color: #f8fafc !important;
}

main.profile-page .profile-completion-chip {
    font-weight: 600;
}

main.profile-page .profile-completion-chip--done {
    border-color: color-mix(in srgb, var(--app-tone-info) 32%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-info) 12%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-info) 84%, var(--app-text) 16%) !important;
}

main.profile-page .profile-completion-chip--pending {
    border-color: color-mix(in srgb, var(--app-tone-warning) 34%, transparent) !important;
    background: color-mix(in srgb, var(--app-tone-warning) 12%, transparent) !important;
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%) !important;
}

@media (max-width: 767px) {
    .support-hub .support-chat-layout {
        gap: 1rem;
    }

    main.profile-page.student-content-main {
        padding-bottom: calc(10.4rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.profile-actions-managed:not(.profile-mobile-actions-visible) main.profile-page.student-content-main {
        padding-bottom: calc(5.2rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    main.profile-page [data-profile-action-bar] {
        padding-top: 0.6rem !important;
        padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    main.profile-page [data-profile-action-bar] > div {
        row-gap: 0.5rem;
    }

    body.profile-actions-managed main.profile-page [data-profile-action-bar] {
        transform: translateY(calc(100% + 0.45rem));
        opacity: 0;
        pointer-events: none;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    body.profile-actions-managed.profile-mobile-actions-visible main.profile-page [data-profile-action-bar] {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
}

/* Teacher pagination and action icons */
body.app-role-teacher .app-action-icon {
    display: inline-flex;
    margin-right: 0.35rem;
    vertical-align: middle;
    color: currentColor;
    opacity: 0.95;
}

body.app-role-teacher .app-action-icon svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}

body.app-role-teacher .app-heading-iconized {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

body.app-role-teacher .app-heading-icon {
    display: inline-flex;
    color: color-mix(in srgb, var(--app-shell-accent) 74%, currentColor 26%);
    opacity: 0.96;
    flex-shrink: 0;
}

body.app-role-teacher .app-heading-icon svg {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

body.app-role-teacher h1.app-heading-iconized .app-heading-icon svg {
    width: 1.18rem;
    height: 1.18rem;
}

body.app-role-teacher .app-pagination {
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    border-radius: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent) 24%, var(--app-border) 76%);
    background: color-mix(in srgb, var(--app-surface) 92%, var(--app-shell-accent) 8%);
    padding: 0.52rem 0.72rem;
}

body.app-role-teacher .app-pagination.is-hidden {
    display: none;
}

body.app-role-teacher .app-pagination__summary {
    margin: 0;
    font-size: var(--app-text-xs);
    line-height: 1.25;
    color: var(--app-muted);
}

body.app-role-teacher .app-pagination__controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

body.app-role-teacher .app-pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}

body.app-role-teacher .app-pagination__button {
    border-radius: 0.68rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent) 32%, var(--app-border) 68%);
    background: color-mix(in srgb, var(--app-surface) 95%, var(--app-shell-accent) 5%);
    color: var(--app-text-secondary);
    font-size: var(--app-text-xs);
    line-height: 1;
    font-weight: 600;
    padding: 0.42rem 0.62rem;
    min-width: 2rem;
    cursor: pointer;
    transition: background var(--app-transition-fast), border-color var(--app-transition-fast), color var(--app-transition-fast), transform var(--app-transition-fast);
}

body.app-role-teacher .app-pagination__button:hover:not(.is-disabled) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 48%, var(--app-border) 52%);
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-shell-accent) 14%, var(--app-surface) 86%);
    transform: translateY(-1px);
}

body.app-role-teacher .app-pagination__button:focus-visible {
    outline: 2px solid var(--app-shell-accent);
    outline-offset: 2px;
}

body.app-role-teacher .app-pagination__button.is-active {
    border-color: color-mix(in srgb, var(--app-shell-accent) 62%, transparent);
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 10px 20px -16px rgba(37, 99, 235, 0.62);
}

body.app-role-teacher .app-pagination__button.is-disabled,
body.app-role-teacher .app-pagination__button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

html.dark body.app-role-teacher .app-pagination,
html[data-theme="dark"] body.app-role-teacher .app-pagination {
    border-color: color-mix(in srgb, var(--app-shell-accent) 28%, rgba(148, 163, 184, 0.44) 72%);
    background: color-mix(in srgb, rgba(15, 23, 42, 0.9) 90%, var(--app-shell-accent) 10%);
}

html.dark body.app-role-teacher .app-pagination__summary,
html[data-theme="dark"] body.app-role-teacher .app-pagination__summary {
    color: #a9b7d5;
}

html.dark body.app-role-teacher .app-pagination__button,
html[data-theme="dark"] body.app-role-teacher .app-pagination__button {
    border-color: color-mix(in srgb, var(--app-shell-accent) 40%, rgba(148, 163, 184, 0.3) 60%);
    background: color-mix(in srgb, rgba(15, 23, 42, 0.9) 88%, var(--app-shell-accent) 12%);
    color: #d5e2ff;
}

html.dark body.app-role-teacher .app-pagination__button:hover:not(.is-disabled),
html[data-theme="dark"] body.app-role-teacher .app-pagination__button:hover:not(.is-disabled) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 56%, rgba(148, 163, 184, 0.28) 44%);
    background: color-mix(in srgb, var(--app-shell-accent) 22%, rgba(15, 23, 42, 0.82) 78%);
    color: #f8fbff;
}

@media (max-width: 767px) {
    body.app-role-teacher .app-pagination {
        padding: 0.48rem 0.58rem;
    }

    body.app-role-teacher .app-pagination__summary {
        width: 100%;
    }

    body.app-role-teacher .app-pagination__controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* Global borderless cards/boxes */
:root {
    --app-card-surface-shadow: 0 15px 32px -22px rgba(15, 23, 42, 0.28);
    --app-card-surface-shadow-hover: 0 24px 44px -24px rgba(15, 23, 42, 0.38);
    --app-card-surface-inner: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    --app-card-surface-inner-hover: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

html.dark,
html[data-theme="dark"] {
    --app-card-surface-shadow: 0 20px 38px -24px rgba(2, 6, 23, 0.78);
    --app-card-surface-shadow-hover: 0 30px 54px -24px rgba(2, 6, 23, 0.88);
    --app-card-surface-inner: inset 0 1px 0 rgba(226, 232, 240, 0.1);
    --app-card-surface-inner-hover: inset 0 1px 0 rgba(226, 232, 240, 0.16);
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
    .card,
    .box,
    .panel,
    .widget,
    .dash-card,
    .app-kpi-card,
    .app-overview-panel,
    .app-overview-metric,
    .priority-item,
    .performance-pill,
    .app-page-hero,
    .app-page-section-card,
    .app-page-subcard,
    .app-page-list-item,
    .app-alert-card,
    .admin-shell-card,
    .admin-shell-panel,
    .admin-shell-soft-card,
    .teacher-stats-panel,
    .teacher-stats-soft-card,
    .teacher-stats-list-card,
    .support-card,
    .support-kpi,
    .support-conv-panel,
    .support-thread-panel,
    .support-empty-card,
    section[class*="rounded-2xl"][class*="border"],
    section[class*="rounded-3xl"][class*="border"],
    article[class*="rounded-2xl"][class*="border"],
    article[class*="rounded-3xl"][class*="border"],
    aside[class*="rounded-2xl"][class*="border"],
    aside[class*="rounded-3xl"][class*="border"],
    li[class*="rounded-2xl"][class*="border"],
    li[class*="rounded-3xl"][class*="border"],
    form[class*="rounded-2xl"][class*="border"],
    form[class*="rounded-3xl"][class*="border"],
    details[class*="rounded-2xl"][class*="border"],
    details[class*="rounded-3xl"][class*="border"]
) {
    border-color: transparent !important;
    border-width: 0 !important;
    box-shadow: var(--app-card-surface-inner), var(--app-card-surface-shadow) !important;
    transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease, background-color 180ms ease;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
    .card,
    .box,
    .panel,
    .widget,
    .dash-card,
    .app-kpi-card,
    .app-overview-panel,
    .app-overview-metric,
    .priority-item,
    .performance-pill,
    .app-page-hero,
    .app-page-section-card,
    .app-page-subcard,
    .app-page-list-item,
    .app-alert-card,
    .admin-shell-card,
    .admin-shell-panel,
    .admin-shell-soft-card,
    .teacher-stats-panel,
    .teacher-stats-soft-card,
    .teacher-stats-list-card,
    .support-card,
    .support-kpi,
    .support-conv-panel,
    .support-thread-panel,
    .support-empty-card,
    section[class*="rounded-2xl"][class*="bg-white"],
    section[class*="rounded-3xl"][class*="bg-white"],
    article[class*="rounded-2xl"][class*="bg-white"],
    article[class*="rounded-3xl"][class*="bg-white"],
    aside[class*="rounded-2xl"][class*="bg-white"],
    aside[class*="rounded-3xl"][class*="bg-white"],
    li[class*="rounded-2xl"][class*="bg-white"],
    li[class*="rounded-3xl"][class*="bg-white"]
)[class*="bg-white"] {
    background-color: color-mix(in srgb, #ffffff 94%, var(--app-shell-accent, var(--app-primary)) 6%) !important;
}

html.dark body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
    .dash-card,
    .app-kpi-card,
    .app-overview-panel,
    .app-overview-metric,
    .priority-item,
    .performance-pill,
    .app-page-hero,
    .app-page-section-card,
    .app-page-subcard,
    .app-page-list-item,
    .app-alert-card,
    .admin-shell-card,
    .admin-shell-panel,
    .admin-shell-soft-card,
    .teacher-stats-panel,
    .teacher-stats-soft-card,
    .teacher-stats-list-card,
    .support-card,
    .support-kpi,
    .support-conv-panel,
    .support-thread-panel,
    .support-empty-card
),
html[data-theme="dark"] body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
    .dash-card,
    .app-kpi-card,
    .app-overview-panel,
    .app-overview-metric,
    .priority-item,
    .performance-pill,
    .app-page-hero,
    .app-page-section-card,
    .app-page-subcard,
    .app-page-list-item,
    .app-alert-card,
    .admin-shell-card,
    .admin-shell-panel,
    .admin-shell-soft-card,
    .teacher-stats-panel,
    .teacher-stats-soft-card,
    .teacher-stats-list-card,
    .support-card,
    .support-kpi,
    .support-conv-panel,
    .support-thread-panel,
    .support-empty-card
) {
    background-color: color-mix(in srgb, rgba(15, 23, 42, 0.88) 92%, var(--app-shell-accent, var(--app-primary)) 8%) !important;
}

@media (hover: hover) and (pointer: fine) {
    body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
        .dash-card,
        .app-kpi-card,
        .app-overview-panel,
        .app-overview-metric,
        .priority-item,
        .performance-pill,
        .app-page-hero,
        .app-page-section-card,
        .app-page-subcard,
        .app-page-list-item,
        .app-alert-card,
        .admin-shell-card,
        .admin-shell-panel,
        .admin-shell-soft-card,
        .teacher-stats-panel,
        .teacher-stats-soft-card,
        .teacher-stats-list-card,
        .support-card,
        .support-kpi,
        .support-conv-panel,
        .support-thread-panel,
        .support-empty-card,
        section[class*="rounded-2xl"][class*="border"],
        section[class*="rounded-3xl"][class*="border"],
        article[class*="rounded-2xl"][class*="border"],
        article[class*="rounded-3xl"][class*="border"],
        aside[class*="rounded-2xl"][class*="border"],
        aside[class*="rounded-3xl"][class*="border"],
        li[class*="rounded-2xl"][class*="border"],
        li[class*="rounded-3xl"][class*="border"],
        form[class*="rounded-2xl"][class*="border"],
        form[class*="rounded-3xl"][class*="border"],
        details[class*="rounded-2xl"][class*="border"],
        details[class*="rounded-3xl"][class*="border"]
    ):hover {
        transform: translateY(-2px);
        filter: brightness(1.01);
        box-shadow: var(--app-card-surface-inner-hover), var(--app-card-surface-shadow-hover) !important;
    }
}

/* Subtle borders for KPI surfaces */
:root {
    --app-kpi-border-subtle: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, rgba(148, 163, 184, 0.34) 76%);
    --app-kpi-border-subtle-hover: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 36%, rgba(148, 163, 184, 0.28) 64%);
}

html.dark,
html[data-theme="dark"] {
    --app-kpi-border-subtle: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 32%, rgba(148, 163, 184, 0.3) 68%);
    --app-kpi-border-subtle-hover: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 46%, rgba(148, 163, 184, 0.26) 54%);
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
    .app-kpi-card,
    .app-overview-metric,
    .admin-shell-metric,
    .admin-dashboard-kpi-surface,
    .support-kpi,
    [data-coupon-kpi-card],
    [data-course-kpi-group] > div
) {
    border-width: 3px !important;
    border-style: solid !important;
    border-color: var(--app-kpi-border-subtle) !important;
}

@media (hover: hover) and (pointer: fine) {
    body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
        .app-kpi-card,
        .app-overview-metric,
        .admin-shell-metric,
        .admin-dashboard-kpi-surface,
        .support-kpi,
        [data-coupon-kpi-card],
        [data-course-kpi-group] > div
    ):hover {
        border-color: var(--app-kpi-border-subtle-hover) !important;
    }
}

/* KPI proposal v2: clearer contrast + subtle accent */
body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--app-kpi-accent) 30%, var(--app-shell-border, var(--app-border)) 70%) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-kpi-accent) 7%, var(--app-surface-strong) 93%),
        color-mix(in srgb, var(--app-kpi-accent) 2%, var(--app-surface) 98%)
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        0 16px 30px -24px rgba(15, 23, 42, 0.34) !important;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card::after {
    content: "";
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.62rem;
    height: 0.17rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-kpi-accent) 48%, transparent),
        color-mix(in srgb, var(--app-kpi-accent) 14%, transparent) 44%,
        transparent 78%
    );
    opacity: 0.56;
    pointer-events: none;
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card .app-kpi-card__icon {
    border: 1px solid color-mix(in srgb, var(--app-kpi-accent) 34%, transparent) !important;
    background: color-mix(in srgb, var(--app-kpi-accent) 18%, var(--app-surface) 82%) !important;
}

html.dark body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card,
html[data-theme="dark"] body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card {
    border-color: color-mix(in srgb, var(--app-kpi-accent) 46%, rgba(148, 163, 184, 0.28) 54%) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-kpi-accent) 14%, rgba(15, 23, 42, 0.96) 86%),
        color-mix(in srgb, var(--app-kpi-accent) 5%, rgba(2, 6, 23, 0.95) 95%)
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 245, 249, 0.11),
        0 22px 40px -24px rgba(2, 6, 23, 0.86) !important;
}

html.dark body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card::after,
html[data-theme="dark"] body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card::after {
    opacity: 0.74;
}

html.dark body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card .app-kpi-card__icon,
html[data-theme="dark"] body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card .app-kpi-card__icon {
    border-color: color-mix(in srgb, var(--app-kpi-accent) 38%, rgba(148, 163, 184, 0.34) 62%) !important;
    background: color-mix(in srgb, var(--app-kpi-accent) 18%, rgba(15, 23, 42, 0.88) 82%) !important;
}

@media (hover: hover) and (pointer: fine) {
    body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) .app-kpi-card:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--app-kpi-accent) 62%, rgba(148, 163, 184, 0.2) 38%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.52),
            0 26px 44px -24px color-mix(in srgb, var(--app-kpi-accent) 34%, rgba(2, 6, 23, 0.66) 66%) !important;
    }
}

/* Teacher withdrawals: darker parity with meetings */
html.dark body[data-view="teacher/withdrawals"],
html[data-theme="dark"] body[data-view="teacher/withdrawals"] {
    --withdrawals-panel: linear-gradient(160deg, rgba(9, 24, 52, 0.98), rgba(5, 15, 35, 0.98));
    --withdrawals-card: linear-gradient(165deg, rgba(10, 28, 60, 0.96), rgba(6, 18, 43, 0.96));
    --withdrawals-soft: rgba(11, 29, 62, 0.84);
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card {
    border-color: color-mix(in srgb, var(--app-kpi-accent) 34%, rgba(148, 163, 184, 0.22) 66%) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-kpi-accent) 9%, rgba(13, 32, 69, 0.96) 91%),
        color-mix(in srgb, var(--app-kpi-accent) 3%, rgba(6, 18, 43, 0.98) 97%)
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 245, 249, 0.08),
        0 20px 34px -24px rgba(1, 8, 23, 0.92) !important;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card::after,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card::after {
    opacity: 0.42;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-kpi-accent) 28%, transparent),
        color-mix(in srgb, var(--app-kpi-accent) 8%, transparent) 44%,
        transparent 78%
    );
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card .app-kpi-card__icon,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card .app-kpi-card__icon {
    border-color: color-mix(in srgb, var(--app-kpi-accent) 30%, rgba(148, 163, 184, 0.28) 70%) !important;
    background: color-mix(in srgb, var(--app-kpi-accent) 12%, rgba(7, 18, 43, 0.92) 88%) !important;
}

@media (hover: hover) and (pointer: fine) {
    html.dark body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card:hover,
    html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-kpi.app-kpi-card:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--app-kpi-accent) 48%, rgba(148, 163, 184, 0.18) 52%) !important;
        box-shadow:
            inset 0 1px 0 rgba(241, 245, 249, 0.08),
            0 24px 38px -24px rgba(1, 8, 23, 0.94) !important;
    }
}

html.dark body[data-view="teacher/withdrawals"] :is(.withdrawals-summary-item, .withdrawals-empty, .withdrawals-history-item, .withdrawals-table-wrap),
html[data-theme="dark"] body[data-view="teacher/withdrawals"] :is(.withdrawals-summary-item, .withdrawals-empty, .withdrawals-history-item, .withdrawals-table-wrap) {
    border-color: color-mix(in srgb, var(--withdrawals-accent) 18%, rgba(148, 163, 184, 0.22) 82%) !important;
    background: linear-gradient(160deg, rgba(11, 29, 62, 0.92), rgba(7, 19, 45, 0.92)) !important;
}

html.dark body[data-view="teacher/withdrawals"] :is(.withdrawals-note, .withdrawals-filter-panel),
html[data-theme="dark"] body[data-view="teacher/withdrawals"] :is(.withdrawals-note, .withdrawals-filter-panel) {
    background: linear-gradient(160deg, rgba(10, 27, 58, 0.94), rgba(6, 18, 43, 0.94)) !important;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-note--warning,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-note--warning {
    background: color-mix(in srgb, var(--app-tone-warning) 8%, rgba(6, 18, 43, 0.96) 92%) !important;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-note--ok,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-note--ok {
    background: color-mix(in srgb, var(--app-tone-success) 8%, rgba(6, 18, 43, 0.96) 92%) !important;
}

html.dark body[data-view="teacher/withdrawals"] :is(.withdrawals-link-btn, .withdrawals-empty__action),
html[data-theme="dark"] body[data-view="teacher/withdrawals"] :is(.withdrawals-link-btn, .withdrawals-empty__action) {
    border-color: color-mix(in srgb, var(--withdrawals-accent) 28%, rgba(148, 163, 184, 0.22) 72%) !important;
    background: color-mix(in srgb, var(--withdrawals-accent) 8%, rgba(7, 19, 45, 0.96) 92%) !important;
    color: var(--withdrawals-text) !important;
}

html.dark body[data-view="teacher/withdrawals"] .withdrawals-cta-btn,
html[data-theme="dark"] body[data-view="teacher/withdrawals"] .withdrawals-cta-btn {
    border-color: color-mix(in srgb, var(--withdrawals-accent) 36%, rgba(148, 163, 184, 0.18) 64%) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--withdrawals-accent) 84%, #1d4ed8 16%),
        color-mix(in srgb, var(--withdrawals-accent-strong) 24%, #07142e 76%)
    ) !important;
    box-shadow: 0 18px 28px -20px rgba(1, 8, 23, 0.92) !important;
}

/* Teacher dashboard parity for KPI-like cards */
body[data-view="teacher/dashboard"] :is(.dash-card, .app-overview-metric, .priority-item, .performance-pill) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, rgba(148, 163, 184, 0.3) 70%) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface-strong) 93%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, var(--app-surface) 98%)
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 16px 30px -24px rgba(15, 23, 42, 0.34) !important;
}

body[data-view="teacher/dashboard"] :is(.app-overview-metric, .priority-item, .performance-pill) {
    position: relative;
}

body[data-view="teacher/dashboard"] :is(.app-overview-metric, .priority-item, .performance-pill)::after {
    content: "";
    position: absolute;
    left: 0.78rem;
    right: 0.78rem;
    bottom: 0.46rem;
    height: 0.14rem;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 44%, transparent),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, transparent) 46%,
        transparent 80%
    );
    opacity: 0.52;
    pointer-events: none;
}

html.dark body[data-view="teacher/dashboard"] :is(.dash-card, .app-overview-metric, .priority-item, .performance-pill),
html[data-theme="dark"] body[data-view="teacher/dashboard"] :is(.dash-card, .app-overview-metric, .priority-item, .performance-pill) {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 44%, rgba(148, 163, 184, 0.28) 56%) !important;
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, rgba(15, 23, 42, 0.96) 88%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, rgba(2, 6, 23, 0.95) 96%)
    ) !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 245, 249, 0.1),
        0 22px 40px -24px rgba(2, 6, 23, 0.86) !important;
}

html.dark body[data-view="teacher/dashboard"] :is(.app-overview-metric, .priority-item, .performance-pill)::after,
html[data-theme="dark"] body[data-view="teacher/dashboard"] :is(.app-overview-metric, .priority-item, .performance-pill)::after {
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    body[data-view="teacher/dashboard"] :is(.dash-card, .app-overview-metric, .priority-item, .performance-pill):hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, rgba(148, 163, 184, 0.24) 42%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            0 26px 44px -24px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 34%, rgba(2, 6, 23, 0.66) 66%) !important;
    }
}

/* Platform rule: nested cards/boxes must keep visible borders */
:root {
    --app-nested-card-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, rgba(148, 163, 184, 0.36) 70%);
}

html.dark,
html[data-theme="dark"] {
    --app-nested-card-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 44%, rgba(148, 163, 184, 0.28) 56%);
}

body:is(.app-view, .app-public-page, .app-auth-page, .app-role-company, .admin-auth-body) :is(
    .card,
    .box,
    .panel,
    .widget,
    .dash-card,
    .app-kpi-card,
    .app-overview-panel,
    .app-overview-metric,
    .priority-item,
    .performance-pill,
    .app-page-hero,
    .app-page-section-card,
    .app-page-subcard,
    .app-page-list-item,
    .app-alert-card,
    .admin-shell-card,
    .admin-shell-panel,
    .admin-shell-soft-card,
    .teacher-stats-panel,
    .teacher-stats-soft-card,
    .teacher-stats-list-card,
    .support-card,
    .support-kpi,
    .support-conv-panel,
    .support-thread-panel,
    .support-empty-card,
    section[class*="rounded"][class*="border"],
    article[class*="rounded"][class*="border"],
    aside[class*="rounded"][class*="border"],
    li[class*="rounded"][class*="border"],
    form[class*="rounded"][class*="border"],
    details[class*="rounded"][class*="border"],
    div[class*="rounded"][class*="border"]
) :is(
    .card,
    .box,
    .panel,
    .widget,
    .dash-card,
    .app-kpi-card,
    .app-overview-panel,
    .app-overview-metric,
    .priority-item,
    .performance-pill,
    .app-page-subcard,
    .app-page-list-item,
    .app-alert-card,
    .admin-shell-card,
    .admin-shell-panel,
    .admin-shell-soft-card,
    .teacher-stats-panel,
    .teacher-stats-soft-card,
    .teacher-stats-list-card,
    .support-card,
    .support-kpi,
    .support-conv-panel,
    .support-thread-panel,
    .support-empty-card,
    section[class*="rounded"][class*="border"],
    article[class*="rounded"][class*="border"],
    aside[class*="rounded"][class*="border"],
    li[class*="rounded"][class*="border"],
    form[class*="rounded"][class*="border"],
    details[class*="rounded"][class*="border"],
    div[class*="rounded"][class*="border"]
) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--app-nested-card-border) !important;
}

/* Dashboard chrome: role-specific identity + borderless navigation */
body:is(.app-role-teacher, .app-role-student, .app-role-admin)[data-view] {
    --app-role-accent: #2a57e5;
    --app-dashboard-active-bg: linear-gradient(135deg, #3a71f4, #2450d8);
    --app-dashboard-active-shadow: 0 14px 26px -18px rgba(42, 87, 229, 0.58);
    --app-dashboard-active-bg-dark: linear-gradient(135deg, #4a83ff, #2a57e5);
    --app-dashboard-active-shadow-dark: 0 16px 30px -18px rgba(74, 131, 255, 0.56);
}

body:is(.app-role-teacher, .app-role-student, .app-role-admin)[data-view] :is(
    .app-shell-toolbar,
    .app-shell-sidebar,
    .app-shell-sidebar__brand,
    .app-shell-sidebar__section,
    .app-shell-sidebar .app-nav-link,
    .app-shell-sidebar__primary,
    .admin-sidebar-section,
    .admin-shell-nav-link,
    .app-shell-chip,
    .app-shell-theme,
    .app-shell-burger,
    .teacher-topbar-chip,
    .student-topbar-chip,
    .admin-topbar-action,
    .admin-topbar-badge
) {
    border-width: 0 !important;
    border-color: transparent !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-admin)[data-view] :is(#teacher-sidebar, #student-sidebar, #admin-sidebar) .app-shell-sidebar__brand {
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%) !important;
}

@media (min-width: 768px) {
    body:is(.app-role-teacher, .app-role-student, .app-role-admin)[data-view] :is(#teacher-sidebar, #student-sidebar, #admin-sidebar) .app-shell-sidebar__brand {
        min-height: var(--app-toolbar-offset-current, var(--app-toolbar-height)) !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin)[data-view] :is(#teacher-sidebar, #student-sidebar, #admin-sidebar) .app-shell-sidebar__brand .app-shell-burger--desktop {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        align-self: center;
        margin-left: auto !important;
        border-width: 1px !important;
        border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, var(--app-border) 70%) !important;
    }
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link.is-active-nav,
body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__primary.is-active-nav {
    background: var(--app-dashboard-active-bg, var(--app-button-active-bg)) !important;
    color: #ffffff !important;
    box-shadow: var(--app-dashboard-active-shadow, var(--app-button-active-shadow)) !important;
}

body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link.is-active-nav :is(.app-icon, .app-nav-link__label),
body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__primary.is-active-nav :is(.app-icon, .app-nav-link__label) {
    color: #ffffff !important;
}

body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active {
    background: var(--app-dashboard-active-bg, var(--app-button-active-bg)) !important;
    color: #ffffff !important;
    box-shadow: var(--app-dashboard-active-shadow, var(--app-button-active-shadow)) !important;
}

body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active .admin-shell-nav-link__icon {
    color: #ffffff !important;
}

html.dark body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link.is-active-nav,
html[data-theme="dark"] body:is(.app-role-teacher, .app-role-student)[data-view] :is(#teacher-sidebar, #student-sidebar) .app-nav-link.is-active-nav,
html.dark body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__primary.is-active-nav,
html[data-theme="dark"] body.app-role-teacher[data-view^="teacher/"] #teacher-sidebar .app-shell-sidebar__primary.is-active-nav {
    background: var(--app-dashboard-active-bg-dark, var(--app-dashboard-active-bg)) !important;
    box-shadow: var(--app-dashboard-active-shadow-dark, var(--app-dashboard-active-shadow)) !important;
}

html.dark body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active,
html[data-theme="dark"] body.app-role-admin[data-view^="admin/"] .admin-shell-nav-link--active {
    background: var(--app-dashboard-active-bg-dark, var(--app-dashboard-active-bg)) !important;
    box-shadow: var(--app-dashboard-active-shadow-dark, var(--app-dashboard-active-shadow)) !important;
}

@media (min-width: 768px) {
    .app-shell-burger--desktop svg {
        transition: transform var(--app-transition-fast);
    }

    :is(#teacher-sidebar, #student-sidebar, #admin-sidebar) .app-shell-burger--desktop {
        flex-shrink: 0;
    }

    body.sidebar-collapsed .app-shell-burger--desktop svg {
        transform: rotate(180deg);
    }

    body.sidebar-collapsed :is(#teacher-sidebar, #student-sidebar, #admin-sidebar) .app-shell-burger--desktop {
        margin-left: 0 !important;
    }

    body.sidebar-collapsed .app-shell-sidebar.js-sidebar {
        width: 5.4rem !important;
        min-width: 5.4rem !important;
        max-width: 5.4rem !important;
    }

    body.sidebar-collapsed.app-role-teacher[data-view] .app-shell-toolbar,
    body.sidebar-collapsed.app-role-student[data-view] .app-shell-toolbar,
    body.sidebar-collapsed.app-role-admin[data-view] .app-shell-toolbar {
        left: 5.4rem !important;
        width: calc(100% - 5.4rem) !important;
    }

    body.sidebar-collapsed:is(.app-role-teacher, .app-role-student)[data-view$="/profile"] main.profile-page [data-profile-action-bar] {
        left: 5.4rem !important;
    }

    body.sidebar-collapsed .app-shell-sidebar__brand {
        justify-content: center;
        gap: 0.34rem !important;
        padding-left: 0.72rem !important;
        padding-right: 0.72rem !important;
    }

    body.sidebar-collapsed .app-shell-sidebar__brand-copy,
    body.sidebar-collapsed .app-shell-sidebar__space-switcher,
    body.sidebar-collapsed .app-shell-sidebar__aux-label,
    body.sidebar-collapsed .app-shell-sidebar__summary,
    body.sidebar-collapsed .admin-sidebar-section__title,
    body.sidebar-collapsed .app-nav-link__label,
    body.sidebar-collapsed .app-nav-link__badge,
    body.sidebar-collapsed .admin-shell-nav-link__badge,
    body.sidebar-collapsed .app-status-pill {
        display: none !important;
    }

    body.sidebar-collapsed .app-shell-sidebar__logo {
        margin: 0 !important;
    }

    body.sidebar-collapsed .app-shell-sidebar__nav,
    body.sidebar-collapsed .app-shell-sidebar__primary-block {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    body.sidebar-collapsed .app-shell-sidebar__section-body {
        padding: 0 !important;
    }

    body.sidebar-collapsed :is(.app-shell-sidebar .app-nav-link, .app-shell-sidebar__primary, .admin-shell-nav-link) {
        justify-content: center !important;
        padding-left: 0.72rem !important;
        padding-right: 0.72rem !important;
    }

    body.sidebar-collapsed .app-nav-link__content,
    body.sidebar-collapsed .admin-shell-nav-link__content {
        justify-content: center !important;
        gap: 0 !important;
    }

    body.sidebar-collapsed main,
    body.sidebar-collapsed :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .student-content-main, .app-dashboard-shell) {
        max-width: 100% !important;
    }
}

/* Teacher statistics redesign */
body[data-view="teacher/statistics"] {
    --teacher-page-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.92));
    --teacher-page-soft-surface: color-mix(in srgb, rgba(255, 255, 255, 0.92) 70%, rgba(224, 242, 254, 0.85) 30%);
    --teacher-page-soft-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, rgba(148, 163, 184, 0.35) 74%);
    --teacher-stats-panel-bg: linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 245, 255, 0.92) 55%, rgba(236, 254, 255, 0.88) 100%);
    --teacher-stats-card-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.92) 0%, rgba(234, 246, 255, 0.88) 60%, rgba(240, 253, 250, 0.84) 100%);
    --teacher-stats-panel-shadow: 0 28px 50px -38px rgba(15, 23, 42, 0.38);
    --teacher-stats-card-shadow: 0 18px 26px -22px rgba(15, 23, 42, 0.22);
    --teacher-stats-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, rgba(226, 232, 240, 0.9) 78%);
    --teacher-stats-grid: rgba(37, 99, 235, 0.22);
}

html.dark body[data-view="teacher/statistics"],
html[data-theme="dark"] body[data-view="teacher/statistics"] {
    --app-bg: radial-gradient(circle at 15% 0%, rgba(14, 116, 144, 0.32), transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(30, 64, 175, 0.35), transparent 50%),
        #0b1020;
    --teacher-page-surface: linear-gradient(160deg, rgba(9, 16, 30, 0.98), rgba(15, 23, 42, 0.96));
    --teacher-page-soft-surface: color-mix(in srgb, rgba(15, 23, 42, 0.92) 78%, rgba(30, 64, 175, 0.12) 22%);
    --teacher-page-soft-border: color-mix(in srgb, rgba(59, 130, 246, 0.55) 34%, rgba(148, 163, 184, 0.28) 66%);
    --teacher-stats-panel-bg: linear-gradient(160deg, rgba(12, 18, 33, 0.98), rgba(10, 16, 30, 0.98));
    --teacher-stats-card-bg: linear-gradient(150deg, rgba(15, 23, 42, 0.92), rgba(9, 16, 30, 0.96));
    --teacher-stats-panel-shadow: 0 30px 55px -40px rgba(2, 6, 23, 0.85);
    --teacher-stats-card-shadow: 0 22px 32px -28px rgba(2, 6, 23, 0.75);
    --teacher-stats-border: color-mix(in srgb, rgba(59, 130, 246, 0.55) 30%, rgba(15, 23, 42, 0.9) 70%);
    --teacher-stats-grid: rgba(148, 163, 184, 0.2);
}

body[data-view="teacher/statistics"] .teacher-stats-backdrop {
    z-index: 0;
}

body[data-view="teacher/statistics"] .teacher-stats-orb {
    opacity: 0.55;
    mix-blend-mode: multiply;
}

body[data-view="teacher/statistics"] .teacher-stats-orb--left {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.42), transparent 68%);
}

body[data-view="teacher/statistics"] .teacher-stats-orb--right {
    background: radial-gradient(circle, rgba(14, 165, 233, 0.36), transparent 68%);
}

body[data-view="teacher/statistics"] .teacher-stats-orb--bottom {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.28), transparent 70%);
}

body[data-view="teacher/statistics"] .teacher-stats-grid {
    opacity: 0.035;
    background-image: linear-gradient(var(--teacher-stats-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--teacher-stats-grid) 1px, transparent 1px);
    background-size: 64px 64px;
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-orb,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-orb {
    opacity: 0.32;
    mix-blend-mode: screen;
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-grid,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-grid {
    opacity: 0.06;
}

body[data-view="teacher/statistics"] .teacher-stats-hero {
    border-color: var(--teacher-stats-border) !important;
    box-shadow: var(--teacher-stats-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body[data-view="teacher/statistics"] .teacher-stats-hero::before {
    width: min(52vw, 32rem);
    height: 10.5rem;
    background: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.45), transparent 62%),
        radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.42), transparent 58%);
    opacity: 0.9;
}

body[data-view="teacher/statistics"] .teacher-stats-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.12), rgba(16, 185, 129, 0.14), transparent 75%);
    opacity: 0.8;
    pointer-events: none;
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-hero,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-hero {
    box-shadow: var(--teacher-stats-panel-shadow), inset 0 1px 0 rgba(148, 163, 184, 0.08) !important;
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-hero::after,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-hero::after {
    opacity: 0.4;
}

body[data-view="teacher/statistics"] :is(.teacher-stats-panel, .teacher-stats-mini-card, .teacher-stats-soft-card, .teacher-stats-list-card) {
    border-color: var(--teacher-stats-border) !important;
}

body[data-view="teacher/statistics"] .teacher-stats-panel {
    box-shadow: var(--teacher-stats-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body[data-view="teacher/statistics"] :is(.teacher-stats-mini-card, .teacher-stats-soft-card, .teacher-stats-list-card) {
    box-shadow: var(--teacher-stats-card-shadow) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card {
    position: relative;
    overflow: hidden;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast);
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(56, 189, 248, 0.35), transparent 55%);
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card::after {
    opacity: 0.55;
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 34px -26px rgba(15, 23, 42, 0.34) !important;
}

body[data-view="teacher/statistics"] .teacher-stats-mini-card > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/statistics"] :is(.teacher-stats-chip, .teacher-stats-month-pill) {
    border-color: var(--teacher-stats-border) !important;
    background: color-mix(in srgb, rgba(255, 255, 255, 0.92) 82%, var(--app-shell-accent, var(--app-primary)) 18%) !important;
    color: var(--app-text) !important;
    box-shadow: 0 16px 26px -22px rgba(37, 99, 235, 0.35) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

body[data-view="teacher/statistics"] :is(.teacher-stats-chip, .teacher-stats-month-pill):hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 32%, rgba(148, 163, 184, 0.5) 68%) !important;
    box-shadow: 0 18px 30px -22px rgba(37, 99, 235, 0.38) !important;
}

html.dark body[data-view="teacher/statistics"] :is(.teacher-stats-chip, .teacher-stats-month-pill),
html[data-theme="dark"] body[data-view="teacher/statistics"] :is(.teacher-stats-chip, .teacher-stats-month-pill) {
    background: rgba(15, 23, 42, 0.8) !important;
    border-color: color-mix(in srgb, rgba(59, 130, 246, 0.6) 38%, rgba(148, 163, 184, 0.3) 62%) !important;
    box-shadow: 0 14px 22px -18px rgba(2, 6, 23, 0.75) !important;
}

body[data-view="teacher/statistics"] .teacher-stats-callout {
    border-color: var(--teacher-stats-border) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08)) !important;
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-callout,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-callout {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(16, 185, 129, 0.06)) !important;
}

body[data-view="teacher/statistics"] .teacher-stats-progress {
    height: 0.68rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, rgba(226, 232, 240, 0.6) 88%);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

body[data-view="teacher/statistics"] .teacher-stats-delta {
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.18);
}

body[data-view="teacher/statistics"] .teacher-stats-signal {
    border-color: var(--teacher-stats-border) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(239, 246, 255, 0.85)) !important;
    box-shadow: var(--teacher-stats-card-shadow) !important;
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-signal,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-signal {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(9, 16, 30, 0.95)) !important;
}

body[data-view="teacher/statistics"] .teacher-stats-ring {
    box-shadow: inset 0 0 0 1px var(--teacher-stats-border), 0 16px 30px -26px rgba(15, 23, 42, 0.28);
    background: color-mix(in srgb, rgba(255, 255, 255, 0.9) 70%, rgba(59, 130, 246, 0.08) 30%);
}

html.dark body[data-view="teacher/statistics"] .teacher-stats-ring,
html[data-theme="dark"] body[data-view="teacher/statistics"] .teacher-stats-ring {
    background: color-mix(in srgb, rgba(15, 23, 42, 0.92) 80%, rgba(59, 130, 246, 0.12) 20%);
}

body[data-view="teacher/statistics"] .teacher-stats-timeline::before {
    width: 2px;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.55), rgba(16, 185, 129, 0.4), transparent 90%);
}

body[data-view="teacher/statistics"] .teacher-stats-timeline__item::before {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, transparent);
}

body[data-view="teacher/statistics"] .teacher-stats-chart-grid line {
    stroke-dasharray: 4 6;
}

body[data-view="teacher/statistics"] .teacher-stats-chart-point {
    filter: drop-shadow(0 6px 10px rgba(37, 99, 235, 0.25));
}

body[data-view="teacher/statistics"] [data-chart-trigger][data-active="true"] {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, transparent) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(16, 185, 129, 0.16)) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 90%, var(--app-text) 10%) !important;
    box-shadow: 0 14px 24px -20px rgba(37, 99, 235, 0.4) !important;
}

body[data-view="teacher/course_edit"] {
    --course-edit-accent: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, #1d4ed8 22%);
    --course-edit-accent-soft: color-mix(in srgb, var(--course-edit-accent) 14%, #ffffff 86%);
    --course-edit-secondary: color-mix(in srgb, #0891b2 58%, var(--course-edit-accent) 42%);
    --course-edit-success: color-mix(in srgb, #059669 72%, var(--course-edit-accent) 28%);
    --course-edit-panel-border: color-mix(in srgb, var(--course-edit-accent) 30%, rgba(148, 163, 184, 0.34) 70%);
    --course-edit-panel-border-strong: color-mix(in srgb, var(--course-edit-accent) 46%, rgba(148, 163, 184, 0.28) 54%);
    --course-edit-hero-bg: linear-gradient(
        135deg,
        color-mix(in srgb, rgba(255, 255, 255, 0.96) 82%, var(--course-edit-accent) 18%),
        color-mix(in srgb, rgba(239, 246, 255, 0.96) 72%, rgba(16, 185, 129, 0.12) 28%) 55%,
        color-mix(in srgb, rgba(236, 254, 255, 0.94) 78%, rgba(14, 165, 233, 0.12) 22%) 100%
    );
    --course-edit-panel-bg: linear-gradient(180deg, rgba(7, 14, 29, 0.98), rgba(10, 22, 40, 0.96) 56%, rgba(12, 25, 44, 0.97) 100%);
    --course-edit-panel-bg-soft: linear-gradient(180deg, rgba(12, 24, 43, 0.94), rgba(7, 17, 32, 0.96));
    --course-edit-panel-bg-nested: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(2, 6, 23, 0.2));
    --course-edit-panel-shadow: 0 28px 54px -36px rgba(15, 23, 42, 0.52);
    --course-edit-soft-shadow: 0 20px 36px -28px rgba(15, 23, 42, 0.32);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--course-edit-accent) 14%, transparent) 0, transparent 28%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--course-edit-success) 10%, transparent) 0, transparent 22%),
        linear-gradient(180deg, #edf3fb 0%, #f8faff 36%, #edf4fb 100%) !important;
    background-attachment: fixed !important;
}

html.dark body[data-view="teacher/course_edit"],
html[data-theme="dark"] body[data-view="teacher/course_edit"] {
    --course-edit-panel-border: color-mix(in srgb, var(--course-edit-accent) 40%, rgba(148, 163, 184, 0.24) 60%);
    --course-edit-panel-border-strong: color-mix(in srgb, var(--course-edit-accent) 58%, rgba(148, 163, 184, 0.2) 42%);
    --course-edit-hero-bg: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.9),
        rgba(10, 18, 35, 0.96) 54%,
        color-mix(in srgb, rgba(5, 150, 105, 0.18) 24%, rgba(2, 6, 23, 0.94) 76%) 100%
    );
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--course-edit-accent) 20%, transparent) 0, transparent 28%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--course-edit-success) 12%, transparent) 0, transparent 24%),
        linear-gradient(180deg, #06111f 0%, #0b1728 42%, #07111e 100%) !important;
}

body[data-view="teacher/course_edit"] .teacher-workflow-main {
    width: min(100%, 98.5rem);
}

body[data-view="teacher/course_edit"] .course-edit-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 2vw, 2rem) !important;
    border-radius: 1.7rem !important;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 24%, rgba(148, 163, 184, 0.34) 76%) !important;
    background: var(--course-edit-hero-bg) !important;
    box-shadow: 0 34px 58px -40px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.48), transparent 44%),
        radial-gradient(circle at 82% 20%, rgba(59, 130, 246, 0.14), transparent 34%);
    pointer-events: none;
}

body[data-view="teacher/course_edit"] .course-edit-hero::after {
    content: "";
    position: absolute;
    right: -7rem;
    bottom: -8rem;
    width: 20rem;
    height: 20rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--course-edit-secondary) 18%, transparent), transparent 68%);
    pointer-events: none;
}

body[data-view="teacher/course_edit"] .course-edit-hero > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/course_edit"] .course-edit-hero .max-w-3xl > p:first-child {
    font-family: var(--app-font-mono);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.32em !important;
    color: color-mix(in srgb, var(--course-edit-accent) 72%, #334155 28%) !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero .max-w-3xl h1 {
    font-family: var(--app-font-title);
    font-size: clamp(2.35rem, 3.2vw, 3.45rem) !important;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

body[data-view="teacher/course_edit"] .course-edit-hero .max-w-3xl > p.mt-3 {
    max-width: 44rem;
    font-size: 1rem !important;
    line-height: 1.72;
    color: #43556d !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero .mt-4 {
    gap: 0.6rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero .mt-4 > span {
    border-color: color-mix(in srgb, var(--course-edit-accent) 20%, rgba(148, 163, 184, 0.36) 80%) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 12px 22px -20px rgba(15, 23, 42, 0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

html.dark body[data-view="teacher/course_edit"] .course-edit-hero .max-w-3xl > p.mt-3,
html[data-theme="dark"] body[data-view="teacher/course_edit"] .course-edit-hero .max-w-3xl > p.mt-3 {
    color: #c9d5e5 !important;
}

html.dark body[data-view="teacher/course_edit"] .course-edit-hero .mt-4 > span,
html[data-theme="dark"] body[data-view="teacher/course_edit"] .course-edit-hero .mt-4 > span {
    background: rgba(15, 23, 42, 0.62) !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 22%, rgba(148, 163, 184, 0.34) 78%) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(239, 246, 255, 0.74)) !important;
    box-shadow: var(--course-edit-soft-shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] .course-edit-kpi::before {
    content: "";
    position: absolute;
    top: -2.8rem;
    right: -2.5rem;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--course-edit-accent) 18%, transparent), transparent 72%);
    pointer-events: none;
}

body[data-view="teacher/course_edit"] .course-edit-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--course-edit-panel-border-strong) !important;
    box-shadow: 0 26px 40px -28px rgba(37, 99, 235, 0.28);
}

body[data-view="teacher/course_edit"] .course-edit-kpi > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:first-child {
    font-family: var(--app-font-mono);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.28em !important;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--course-edit-accent) 40%, #475569 60%) !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(2) {
    margin-top: 0.65rem !important;
    font-family: var(--app-font-title);
    font-size: clamp(1.8rem, 1.5vw, 2.3rem) !important;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #0f172a !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(3) {
    color: #526477 !important;
    line-height: 1.52;
}

html.dark body[data-view="teacher/course_edit"] .course-edit-kpi,
html[data-theme="dark"] body[data-view="teacher/course_edit"] .course-edit-kpi {
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.78), rgba(2, 6, 23, 0.86)) !important;
    box-shadow: 0 24px 38px -30px rgba(2, 6, 23, 0.66);
}

html.dark body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(2),
html[data-theme="dark"] body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(2) {
    color: #f8fafc !important;
}

html.dark body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(3),
html[data-theme="dark"] body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(3) {
    color: #b8c7dc !important;
}

body[data-view="teacher/course_edit"] .course-edit-alert {
    border-radius: 1.2rem !important;
    box-shadow: 0 20px 34px -28px rgba(15, 23, 42, 0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

body[data-view="teacher/course_edit"] .course-edit-alert--error {
    border-color: color-mix(in srgb, #fb7185 34%, rgba(244, 244, 245, 0.9) 66%) !important;
    background: linear-gradient(135deg, rgba(255, 241, 242, 0.92), rgba(255, 251, 251, 0.94)) !important;
}

body[data-view="teacher/course_edit"] .course-edit-alert--success {
    border-color: color-mix(in srgb, #34d399 34%, rgba(236, 253, 245, 0.9) 66%) !important;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(248, 250, 252, 0.96)) !important;
}

body[data-view="teacher/course_edit"] .course-edit-alert--warning {
    border-color: color-mix(in srgb, #f59e0b 34%, rgba(255, 251, 235, 0.92) 66%) !important;
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.95), rgba(255, 255, 255, 0.96)) !important;
}

body[data-view="teacher/course_edit"] .course-edit-layout {
    gap: 1.35rem !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) {
    position: relative;
    border: 1px solid var(--course-edit-panel-border) !important;
    background: var(--course-edit-panel-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--course-edit-panel-shadow) !important;
    border-radius: 1.55rem !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 78%);
    pointer-events: none;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) :is(.text-white, .text-slate-100) {
    color: #f8fafc !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) :is(.text-slate-300, .text-slate-200) {
    color: #d8e3f1 !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) :is(.text-slate-400, .text-slate-500) {
    color: #94a3b8 !important;
}

body[data-view="teacher/course_edit"] .course-edit-panel > .flex.items-start span[aria-hidden="true"] {
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 22%, rgba(148, 163, 184, 0.32) 78%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-view="teacher/course_edit"] .course-edit-panel--summary > .flex.items-start span[aria-hidden="true"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(13, 148, 136, 0.18)) !important;
    color: #d1fae5 !important;
}

body[data-view="teacher/course_edit"] .course-edit-panel--actions > .flex.items-start span[aria-hidden="true"] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(14, 165, 233, 0.18)) !important;
    color: #dbeafe !important;
}

body[data-view="teacher/course_edit"] .course-edit-panel--quick > .flex.items-start span[aria-hidden="true"] {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.16), rgba(59, 130, 246, 0.12)) !important;
    color: #e2e8f0 !important;
}

body[data-view="teacher/course_edit"] .course-edit-panel--form > .flex {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--course-edit-accent) 14%, rgba(148, 163, 184, 0.18) 86%);
}

body[data-view="teacher/course_edit"] .course-edit-panel--form h2 {
    font-family: var(--app-font-title);
    letter-spacing: -0.04em;
}

body[data-view="teacher/course_edit"] .course-edit-step {
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 20%, rgba(148, 163, 184, 0.22) 80%) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(2, 6, 23, 0.16)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border-radius: 1.35rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-step > div:first-child p:first-child {
    font-family: var(--app-font-mono);
    font-size: var(--app-text-2xs);
    letter-spacing: 0.28em !important;
    color: #93c5fd !important;
}

body[data-view="teacher/course_edit"] .course-edit-step > div:first-child h3 {
    font-family: var(--app-font-section);
    font-size: 1.55rem !important;
    letter-spacing: -0.035em;
}

body[data-view="teacher/course_edit"] .course-edit-step > div:first-child p:last-child {
    max-width: 44rem;
    color: #9db0c4 !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) label {
    color: #dbe7f8;
    font-weight: 600;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-height: var(--app-control-height-md);
    border-radius: 0.95rem !important;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 28%, rgba(148, 163, 184, 0.34) 72%) !important;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.34), rgba(15, 23, 42, 0.78)) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) textarea {
    min-height: 7rem;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"])::placeholder {
    color: #8ea3ba !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
    border-color: color-mix(in srgb, var(--course-edit-accent) 56%, rgba(148, 163, 184, 0.24) 44%) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--course-edit-accent) 16%, transparent) !important;
    outline: none !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 32%, rgba(148, 163, 184, 0.3) 68%);
    background: color-mix(in srgb, var(--course-edit-accent) 12%, rgba(255, 255, 255, 0.04) 88%);
    color: #e2e8f0;
    padding: 0.62rem 0.9rem;
    font-weight: 600;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) input[type="file"]:hover::file-selector-button {
    border-color: color-mix(in srgb, var(--course-edit-accent) 48%, rgba(148, 163, 184, 0.24) 52%);
    background: color-mix(in srgb, var(--course-edit-accent) 18%, rgba(255, 255, 255, 0.04) 82%);
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) input[type="checkbox"] {
    accent-color: var(--course-edit-accent);
}

body[data-view="teacher/course_edit"] [data-enterprise-offer-root],
body[data-view="teacher/course_edit"] .course-edit-step .rounded-xl,
body[data-view="teacher/course_edit"] .course-edit-step .rounded-2xl.border,
body[data-view="teacher/course_edit"] .course-edit-panel--summary article,
body[data-view="teacher/course_edit"] .course-edit-builder-panel,
body[data-view="teacher/course_edit"] .course-edit-outline-card,
body[data-view="teacher/course_edit"] .course-edit-outline-item,
body[data-view="teacher/course_edit"] .course-edit-outline-doc {
    border-color: color-mix(in srgb, var(--course-edit-accent) 20%, rgba(148, 163, 184, 0.22) 80%) !important;
    background: var(--course-edit-panel-bg-nested) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-view="teacher/course_edit"] [data-enterprise-mode-btn] {
    min-height: 2.5rem;
    border-color: color-mix(in srgb, var(--course-edit-accent) 22%, rgba(148, 163, 184, 0.28) 78%) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-view="teacher/course_edit"] [data-enterprise-mode-btn][aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--course-edit-accent) 60%, rgba(148, 163, 184, 0.18) 40%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--course-edit-accent) 32%, rgba(15, 23, 42, 0.9) 68%), color-mix(in srgb, var(--course-edit-secondary) 18%, rgba(15, 23, 42, 0.94) 82%)) !important;
    box-shadow: 0 16px 28px -24px color-mix(in srgb, var(--course-edit-accent) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}

body[data-view="teacher/course_edit"] .course-edit-sidebar {
    align-self: start;
}

@media (min-width: 1280px) {
    body[data-view="teacher/course_edit"] .course-edit-sidebar {
        position: sticky;
        top: calc(var(--app-toolbar-height, 3.75rem) + 1rem);
    }
}

body[data-view="teacher/course_edit"] .course-edit-panel--summary .h-2 {
    height: 0.72rem !important;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 18%, rgba(148, 163, 184, 0.16) 82%);
    background: rgba(2, 6, 23, 0.46) !important;
    box-shadow: inset 0 1px 2px rgba(2, 6, 23, 0.52);
}

body[data-view="teacher/course_edit"] .course-edit-panel--summary .h-2 > div {
    background: linear-gradient(90deg, var(--course-edit-accent), #14b8a6) !important;
    box-shadow: 0 0 20px -6px rgba(37, 99, 235, 0.5);
}

body[data-view="teacher/course_edit"] .course-edit-panel--summary .rounded-2xl.border.border-amber-500\/30 {
    border-color: color-mix(in srgb, #f59e0b 42%, rgba(148, 163, 184, 0.18) 58%) !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.02)) !important;
    box-shadow: 0 18px 30px -24px rgba(245, 158, 11, 0.24);
}

body[data-view="teacher/course_edit"] .course-edit-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    width: 100%;
    border-radius: 1rem !important;
    padding: 0.95rem 1rem !important;
    border: 1px solid var(--course-edit-panel-border) !important;
    text-decoration: none !important;
    box-shadow: 0 18px 32px -26px rgba(15, 23, 42, 0.48);
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] .course-edit-action-btn:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

body[data-view="teacher/course_edit"] .course-edit-action-btn--save {
    border-color: color-mix(in srgb, var(--app-success) 54%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-success) 84%, #10b981 16%), color-mix(in srgb, var(--course-edit-success) 72%, #047857 28%)) !important;
    color: #ffffff !important;
    box-shadow: 0 20px 34px -24px rgba(5, 150, 105, 0.42) !important;
}

body[data-view="teacher/course_edit"] .course-edit-action-btn--preview,
body[data-view="teacher/course_edit"] .course-edit-action-btn--draft {
    border-color: color-mix(in srgb, var(--course-edit-accent) 26%, rgba(148, 163, 184, 0.26) 74%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 8%, rgba(15, 23, 42, 0.92) 92%) !important;
    color: #e5eefc !important;
}

body[data-view="teacher/course_edit"] .course-edit-action-btn--preview:hover,
body[data-view="teacher/course_edit"] .course-edit-action-btn--draft:hover {
    border-color: var(--course-edit-panel-border-strong) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 14%, rgba(15, 23, 42, 0.9) 86%) !important;
}

body[data-view="teacher/course_edit"] .course-edit-action-btn--submit {
    border-color: color-mix(in srgb, var(--course-edit-accent) 58%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--course-edit-accent) 86%, #2563eb 14%), color-mix(in srgb, var(--course-edit-secondary) 34%, #0f172a 66%)) !important;
    color: #ffffff !important;
    box-shadow: 0 20px 34px -24px rgba(37, 99, 235, 0.42) !important;
}

body[data-view="teacher/course_edit"] .course-edit-builder {
    padding: clamp(1.15rem, 2vw, 1.7rem) !important;
}

body[data-view="teacher/course_edit"] .course-edit-builder-head {
    padding-bottom: 0.45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--course-edit-accent) 12%, rgba(148, 163, 184, 0.16) 88%);
}

body[data-view="teacher/course_edit"] .course-edit-tab {
    min-height: 3rem;
    border-radius: 1rem !important;
    border-color: color-mix(in srgb, var(--course-edit-accent) 22%, rgba(148, 163, 184, 0.24) 78%) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(2, 6, 23, 0.16)) !important;
    color: #dde7f4 !important;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] .course-edit-tab .app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.78rem;
    background: color-mix(in srgb, var(--course-edit-accent) 12%, rgba(255, 255, 255, 0.04) 88%);
    color: #bfdbfe;
}

body[data-view="teacher/course_edit"] .course-edit-tab:hover {
    transform: translateY(-1px);
    border-color: var(--course-edit-panel-border-strong) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(2, 6, 23, 0.18)) !important;
}

body[data-view="teacher/course_edit"] .course-edit-tab.border-emerald-500 {
    border-color: color-mix(in srgb, var(--course-edit-accent) 62%, rgba(148, 163, 184, 0.18) 38%) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--course-edit-accent) 76%, #1d4ed8 24%), color-mix(in srgb, var(--course-edit-success) 28%, #0f172a 72%)) !important;
    color: #ffffff !important;
    box-shadow: 0 20px 34px -24px color-mix(in srgb, var(--course-edit-accent) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body[data-view="teacher/course_edit"] .course-edit-tab.border-emerald-500 .app-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

body[data-view="teacher/course_edit"] .course-edit-builder-panel {
    padding: 1.1rem !important;
    border-radius: 1.3rem !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) details {
    border-radius: 1rem;
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) summary {
    list-style: none;
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) summary::-webkit-details-marker {
    display: none;
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.35rem;
    padding: 0.55rem 0.92rem !important;
    border-radius: 0.88rem !important;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 24%, rgba(148, 163, 184, 0.22) 76%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 8%, rgba(15, 23, 42, 0.92) 92%) !important;
    color: #e2e8f0 !important;
    font-weight: 700;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) summary:hover {
    transform: translateY(-1px);
    border-color: var(--course-edit-panel-border-strong) !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) details[open] > summary {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-edit-accent) 14%, transparent);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) details > form {
    margin-top: 0.75rem !important;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 18%, rgba(148, 163, 184, 0.22) 82%);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(2, 6, 23, 0.22));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="bg-gradient-to-r"][class*="from-indigo-"][class*="to-emerald-"] {
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 58%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--course-edit-accent) 82%, #2563eb 18%), color-mix(in srgb, var(--course-edit-success) 52%, #0f172a 48%)) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--course-edit-accent) 38%, transparent) !important;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), filter var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="bg-gradient-to-r"][class*="from-indigo-"][class*="to-emerald-"]:hover {
    transform: translateY(-1px);
    filter: saturate(1.08);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-rose-600"] {
    border-color: color-mix(in srgb, #fb7185 58%, rgba(148, 163, 184, 0.18) 42%) !important;
    background: color-mix(in srgb, #fb7185 14%, rgba(15, 23, 42, 0.92) 86%) !important;
    color: #ffe4e6 !important;
    box-shadow: 0 16px 28px -24px rgba(244, 63, 94, 0.34);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-rose-600"]:hover {
    border-color: color-mix(in srgb, #fb7185 72%, rgba(148, 163, 184, 0.12) 28%) !important;
    background: color-mix(in srgb, #fb7185 20%, rgba(15, 23, 42, 0.88) 80%) !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-slate-700"]:not(.tab-button),
body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-slate-600"],
body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-emerald-400"] {
    border-color: color-mix(in srgb, var(--course-edit-accent) 28%, rgba(148, 163, 184, 0.24) 72%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 9%, rgba(15, 23, 42, 0.92) 91%) !important;
    color: #e6eefb !important;
    box-shadow: 0 14px 24px -24px rgba(15, 23, 42, 0.48);
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-slate-700"]:not(.tab-button):hover,
body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-slate-600"]:hover,
body[data-view="teacher/course_edit"] :is(.course-edit-builder, .course-edit-outline) :is(button, a)[class*="border-emerald-400"]:hover {
    transform: translateY(-1px);
    border-color: var(--course-edit-panel-border-strong) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 14%, rgba(15, 23, 42, 0.88) 86%) !important;
}

body[data-view="teacher/course_edit"] .course-edit-outline {
    padding: clamp(1.15rem, 2vw, 1.7rem) !important;
}

body[data-view="teacher/course_edit"] .course-edit-outline-card {
    position: relative;
    border-radius: 1.35rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-outline-card::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    bottom: 1rem;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--course-edit-accent) 42%, transparent), transparent 88%);
    opacity: 0.74;
}

body[data-view="teacher/course_edit"] .course-edit-outline-card > .flex {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/course_edit"] .course-edit-outline-card > .flex > div:first-child {
    padding-left: 0.85rem;
}

body[data-view="teacher/course_edit"] .course-edit-outline-item {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(8, 13, 24, 0.94)) !important;
}

body[data-view="teacher/course_edit"] .course-edit-outline-doc {
    border-style: dashed !important;
    background: color-mix(in srgb, rgba(2, 6, 23, 0.88) 88%, var(--course-edit-accent) 12%) !important;
}

body[data-view="teacher/course_edit"] .course-edit-outline .ml-4 {
    margin-left: 1.25rem !important;
    padding-left: 0.7rem;
    border-left: 1px dashed color-mix(in srgb, var(--course-edit-accent) 28%, rgba(148, 163, 184, 0.18) 72%);
}

@media (max-width: 1024px) {
    body[data-view="teacher/course_edit"] .course-edit-hero .max-w-3xl h1 {
        font-size: clamp(2.05rem, 7vw, 2.8rem) !important;
    }

    body[data-view="teacher/course_edit"] .course-edit-tab {
        justify-content: center;
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 767px) {
    body[data-view="teacher/course_edit"] .teacher-workflow-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) {
        border-radius: 1.35rem !important;
    }

    body[data-view="teacher/course_edit"] .course-edit-hero {
        padding: 1.15rem !important;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-head {
        gap: 0.85rem !important;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-panel {
        padding: 0.95rem !important;
    }

    body[data-view="teacher/course_edit"] .course-edit-outline-card::before {
        left: 0.82rem;
    }

    body[data-view="teacher/course_edit"] .course-edit-outline .ml-4 {
        margin-left: 0.75rem !important;
        padding-left: 0.55rem;
    }
}

body[data-view="teacher/course_edit"] .course-edit-panel > .flex.items-start span[aria-hidden="true"] {
    width: 3.25rem !important;
    height: 3.25rem !important;
    flex: 0 0 3.25rem;
}

body[data-view="teacher/course_edit"] .course-edit-panel > .flex.items-start span[aria-hidden="true"] svg {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 1;
}

body[data-view="teacher/course_edit"] .course-edit-open-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    border-color: color-mix(in srgb, var(--course-edit-accent) 28%, rgba(148, 163, 184, 0.24) 72%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 9%, rgba(15, 23, 42, 0.92) 91%) !important;
    color: #e6eefb !important;
    font-weight: 700;
    box-shadow: 0 14px 24px -24px rgba(15, 23, 42, 0.48);
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/course_edit"] .course-edit-open-modal:hover {
    transform: translateY(-1px);
    border-color: var(--course-edit-panel-border-strong) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 14%, rgba(15, 23, 42, 0.88) 86%) !important;
}

body[data-view="teacher/course_edit"] [data-list-row] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 24%, rgba(148, 163, 184, 0.24) 76%);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(7, 13, 24, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-view="teacher/course_edit"] [data-list-row] > button {
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: 0.85rem !important;
}

body[data-view="teacher/course_edit"] [data-list-row] > button:first-child {
    border-color: color-mix(in srgb, var(--course-edit-accent) 22%, rgba(148, 163, 184, 0.28) 78%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 12%, rgba(255, 255, 255, 0.04) 88%) !important;
    color: #bfdbfe !important;
}

body[data-view="teacher/course_edit"] [data-list-row] > button:last-child {
    border-color: color-mix(in srgb, #fb7185 50%, rgba(148, 163, 184, 0.18) 50%) !important;
    background: color-mix(in srgb, #fb7185 12%, rgba(15, 23, 42, 0.92) 88%) !important;
    color: #ffe4e6 !important;
}

body[data-view="teacher/course_edit"] [data-list-row] [data-list-input] {
    min-height: 2.75rem !important;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-inline: 0.25rem !important;
}

body[data-view="teacher/course_edit"] [data-list-row] [data-list-input]:focus {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-view="teacher/course_edit"] [data-add-target] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.65rem;
    border-radius: 0.95rem !important;
    border-color: color-mix(in srgb, var(--course-edit-accent) 32%, rgba(148, 163, 184, 0.24) 68%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 12%, rgba(15, 23, 42, 0.92) 88%) !important;
    color: #e6eefb !important;
    font-weight: 700;
}

body[data-view="teacher/course_edit"] [data-add-target]:hover {
    border-color: var(--course-edit-panel-border-strong) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 18%, rgba(15, 23, 42, 0.88) 82%) !important;
}

body[data-view="teacher/course_edit"] .course-edit-modal {
    backdrop-filter: blur(10px);
}

body[data-view="teacher/course_edit"] .course-edit-modal-card {
    position: relative;
    overflow: hidden;
    background: var(--course-edit-panel-bg-soft) !important;
    border-color: var(--course-edit-panel-border-strong) !important;
    box-shadow: var(--course-edit-panel-shadow) !important;
}

body[data-view="teacher/course_edit"] .course-edit-modal-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.36), transparent 78%);
    pointer-events: none;
}

body[data-view="teacher/course_edit"] .course-edit-modal-card > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/course_edit"] .course-edit-modal-card label {
    color: #dbe7f8;
    font-weight: 600;
}

body[data-view="teacher/course_edit"] .course-edit-modal-card :is(input, select, textarea):not([type="hidden"]) {
    min-height: var(--app-control-height-md);
    border-radius: 0.95rem !important;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 28%, rgba(148, 163, 184, 0.34) 72%) !important;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.34), rgba(15, 23, 42, 0.78)) !important;
    color: #f8fafc !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body[data-view="teacher/course_edit"] .course-edit-modal-card :is(input, select, textarea):not([type="hidden"]):focus {
    border-color: color-mix(in srgb, var(--course-edit-accent) 56%, rgba(148, 163, 184, 0.24) 44%) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--course-edit-accent) 16%, transparent) !important;
    outline: none !important;
}

body[data-view="teacher/course_edit"] .course-edit-modal-card input[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    border-radius: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 32%, rgba(148, 163, 184, 0.3) 68%);
    background: color-mix(in srgb, var(--course-edit-accent) 12%, rgba(255, 255, 255, 0.04) 88%);
    color: #e2e8f0;
    padding: 0.62rem 0.9rem;
    font-weight: 600;
}

body[data-view="teacher/course_edit"] .course-edit-modal-secondary {
    border-color: color-mix(in srgb, var(--course-edit-accent) 26%, rgba(148, 163, 184, 0.26) 74%) !important;
    background: color-mix(in srgb, var(--course-edit-accent) 8%, rgba(15, 23, 42, 0.92) 92%) !important;
    color: #e5eefc !important;
    font-weight: 700;
}

body[data-view="teacher/course_edit"] .course-edit-modal-primary {
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 58%, transparent) !important;
    box-shadow: 0 18px 32px -24px color-mix(in srgb, var(--course-edit-accent) 38%, transparent) !important;
    font-weight: 700;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline, .course-edit-hero, .course-edit-modal-card) svg {
    display: block;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline, .course-edit-hero, .course-edit-modal-card) svg * {
    vector-effect: non-scaling-stroke;
}

body[data-view="teacher/course_edit"] .course-edit-hero {
    padding: clamp(1.1rem, 1.6vw, 1.55rem) !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero .flex.flex-col.gap-6 {
    gap: 1rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero-copy {
    max-width: 38rem;
}

body[data-view="teacher/course_edit"] .course-edit-hero .course-edit-hero-copy h1 {
    font-size: clamp(2.15rem, 2.4vw, 2.9rem) !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero .course-edit-hero-copy > p.mt-3 {
    max-width: 38rem;
    font-size: 0.98rem !important;
    line-height: 1.6;
}

body[data-view="teacher/course_edit"] .course-edit-hero-kpis {
    gap: 0.85rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi {
    padding: 1rem 1.05rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(2) {
    font-size: clamp(1.55rem, 1.4vw, 2rem) !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(3) {
    font-size: 0.96rem;
}

body[data-view="teacher/course_edit"] .course-edit-panel > .flex.items-start span[aria-hidden="true"],
body[data-view="teacher/course_edit"] .course-edit-tab .app-icon {
    overflow: hidden;
}

body[data-view="teacher/course_edit"] .course-edit-panel > .flex.items-start span[aria-hidden="true"] svg,
body[data-view="teacher/course_edit"] .course-edit-tab .app-icon svg {
    width: 100%;
    height: 100%;
}

body[data-view="teacher/course_edit"] .course-edit-builder {
    padding: 1rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-builder-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: start;
}

body[data-view="teacher/course_edit"] .course-edit-builder-copy {
    max-width: 38rem;
}

body[data-view="teacher/course_edit"] .course-edit-builder-copy > p:first-child {
    letter-spacing: 0.24em !important;
}

body[data-view="teacher/course_edit"] .course-edit-builder-copy > p.mt-2 {
    max-width: 38rem;
}

body[data-view="teacher/course_edit"] .course-edit-tabs {
    justify-content: flex-end;
    align-items: center;
    gap: 0.65rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-tab {
    min-height: 2.72rem;
    padding: 0.72rem 0.9rem !important;
    gap: 0.55rem !important;
    border-radius: 1rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-tab .app-icon {
    width: 1.7rem;
    height: 1.7rem;
}

body[data-view="teacher/course_edit"] .course-edit-tab__label {
    white-space: nowrap;
}

body[data-view="teacher/course_edit"] .course-edit-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    height: 1.55rem;
    padding-inline: 0.38rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #dbeafe;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

body[data-view="teacher/course_edit"] .course-edit-tab.border-emerald-500 .course-edit-tab__count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

body[data-view="teacher/course_edit"] .course-edit-builder-panel {
    padding: 0.95rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter {
    gap: 0.9rem !important;
}

@media (min-width: 1024px) {
    body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
        align-items: end;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter > :nth-child(3) {
        grid-column: auto;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter > :nth-child(4) {
        grid-column: auto;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter .course-edit-builder-form__actions {
        justify-content: stretch !important;
        align-self: end;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter .course-edit-builder-form__actions > button {
        min-width: 13rem;
        min-height: 3rem;
    }
}

body[data-view="teacher/course_edit"] .course-edit-panel--actions .grid {
    gap: 0.8rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-action-btn {
    min-height: 3rem;
}

body[data-view="teacher/course_edit"] .course-edit-action-btn--preview,
body[data-view="teacher/course_edit"] .course-edit-action-btn--draft {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(15, 23, 42, 0.84)) !important;
    color: #f3f7fd !important;
}

body[data-view="teacher/course_edit"] [data-list-row] {
    gap: 0.55rem;
    padding: 0.28rem;
    border-radius: 1.05rem;
    background: linear-gradient(180deg, rgba(22, 33, 54, 0.82), rgba(10, 18, 32, 0.96));
}

body[data-view="teacher/course_edit"] [data-list-row] > button:first-child {
    background: linear-gradient(180deg, rgba(62, 91, 138, 0.7), rgba(38, 54, 92, 0.94)) !important;
    color: #dbeafe !important;
}

body[data-view="teacher/course_edit"] [data-list-row] > button:last-child {
    min-width: 2.3rem;
    background: linear-gradient(180deg, rgba(225, 29, 72, 0.88), rgba(190, 24, 93, 0.92)) !important;
    color: #ffffff !important;
}

body[data-view="teacher/course_edit"] [data-list-row] [data-list-input] {
    min-height: 2.6rem !important;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 18%, rgba(203, 213, 225, 0.92) 82%) !important;
    border-radius: 0.92rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.94)) !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    padding: 0.72rem 0.95rem !important;
}

body[data-view="teacher/course_edit"] [data-list-row] [data-list-input]::placeholder {
    color: #8ca0ba !important;
}

body[data-view="teacher/course_edit"] [data-list-row] [data-list-input]:focus {
    border-color: color-mix(in srgb, var(--course-edit-accent) 40%, rgba(148, 163, 184, 0.34) 60%) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--course-edit-accent) 14%, transparent) !important;
    background: #ffffff !important;
}

body[data-view="teacher/course_edit"] [data-add-target] {
    padding-inline: 1rem !important;
    box-shadow: 0 14px 26px -22px rgba(15, 23, 42, 0.42);
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--summary, .course-edit-panel--actions, .course-edit-panel--quick) > .flex.items-start > div {
    min-width: 0;
}

body[data-view="teacher/course_edit"] .course-edit-panel--actions > .flex.items-start > div,
body[data-view="teacher/course_edit"] .course-edit-panel--quick > .flex.items-start > div {
    max-width: 18rem;
}

body[data-view="teacher/course_edit"] .course-edit-outline-card > .flex > div:first-child > p.font-semibold {
    font-family: var(--app-font-title);
    font-size: 1.18rem;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

body[data-view="teacher/course_edit"] .course-edit-outline-item,
body[data-view="teacher/course_edit"] .course-edit-outline-doc {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-outline-item p.font-medium,
body[data-view="teacher/course_edit"] .course-edit-outline-doc :is(p.font-medium, p.text-sm) {
    color: #f8fafc;
}

body[data-view="teacher/course_edit"] .course-edit-outline :is(.course-edit-open-modal, a[href*="exam_preview"], form.inline-block > button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.3rem;
    padding: 0.55rem 0.9rem !important;
    border-radius: 0.9rem !important;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 1024px) {
    body[data-view="teacher/course_edit"] .course-edit-builder-head {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/course_edit"] .course-edit-tabs {
        justify-content: flex-start;
    }
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] {
    --course-edit-accent: var(--app-shell-accent, var(--app-primary));
    --course-edit-secondary: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-primary-700) 18%);
    --course-edit-success: var(--app-shell-accent, var(--app-primary));
    --course-edit-panel-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, #d8e0f2 72%);
    --course-edit-panel-border-strong: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 42%, #d8e0f2 58%);
    --course-edit-panel-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%),
        var(--app-surface)
    );
    --course-edit-panel-bg-soft: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, #f8fbff 94%),
        #ffffff
    );
    --course-edit-panel-bg-nested: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface-strong) 93%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, var(--app-surface) 98%)
    );
    --course-edit-panel-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.18);
    --course-edit-soft-shadow: 0 14px 24px -22px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, #f3f6ff 90%),
        #ffffff 24%,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, #f5f7ff 93%) 100%
    ) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-hero {
    border-color: var(--course-edit-panel-border) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, #f8fbff 90%),
        #ffffff 56%,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, #f3f7ff 94%) 100%
    ) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 18px 32px -24px rgba(15, 23, 42, 0.16) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-hero::before {
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.54), transparent 44%),
        radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, transparent), transparent 34%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-hero::after {
    background: radial-gradient(circle, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, transparent), transparent 68%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-kpi,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) {
    border-color: var(--course-edit-panel-border) !important;
    background: var(--course-edit-panel-bg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), var(--course-edit-panel-shadow) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-kpi {
    background: linear-gradient(
        160deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface-strong) 93%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, var(--app-surface) 98%)
    ) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) :is(.text-white, .text-slate-100) {
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) :is(.text-slate-300, .text-slate-200) {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, #334155 84%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel, .course-edit-builder, .course-edit-outline) :is(.text-slate-400, .text-slate-500) {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, #64748b 90%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel--summary, .course-edit-panel--actions, .course-edit-panel--quick) > .flex.items-start span[aria-hidden="true"] {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, #eef4ff 88%) !important;
    color: var(--app-primary-700) !important;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, #d8e0f2 72%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-panel--summary :is(.text-emerald-300, .text-emerald-200),
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-panel--actions :is(.text-blue-300, .text-blue-200) {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, #334155 42%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) label {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, #334155 78%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, #d8e0f2 76%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, #ffffff 97%) !important;
    color: var(--app-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel--form, .course-edit-builder, .course-edit-outline) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 46%, #d8e0f2 54%) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, transparent) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-tab {
    border-color: var(--app-button-border) !important;
    background: var(--app-button-bg) !important;
    color: var(--app-button-text-strong) !important;
    box-shadow: 0 10px 18px -18px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 20%, transparent) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-tab__count {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, #eef4ff 84%);
    color: var(--app-primary-700);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-tab.border-emerald-500 {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-dashboard-active-bg, var(--app-button-active-bg)) !important;
    color: #ffffff !important;
    box-shadow: var(--app-dashboard-active-shadow, var(--app-button-active-shadow)) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-tab.border-emerald-500 :is(.app-icon, .course-edit-tab__label, .course-edit-tab__count) {
    color: #ffffff !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-tab.border-emerald-500 .course-edit-tab__count {
    background: rgba(255, 255, 255, 0.18);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-panel--summary .h-2 {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 20%, #d8e0f2 80%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, #e2e8f0 90%) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-panel--summary .h-2 > div {
    background: linear-gradient(90deg, var(--app-primary-500), var(--app-primary-700)) !important;
    box-shadow: 0 0 20px -10px rgba(37, 99, 235, 0.36);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-action-btn--save {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-dashboard-active-bg, var(--app-button-active-bg)) !important;
    color: #ffffff !important;
    box-shadow: var(--app-dashboard-active-shadow, var(--app-button-active-shadow)) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-action-btn--preview,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-action-btn--draft {
    border-color: var(--app-button-border) !important;
    background: var(--app-button-bg) !important;
    color: var(--app-button-text-strong) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-action-btn--submit {
    border-color: color-mix(in srgb, var(--app-primary-700) 62%, transparent) !important;
    background: linear-gradient(135deg, var(--app-primary-700), var(--app-primary-800)) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px -22px rgba(37, 99, 235, 0.34) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-panel--summary article, .course-edit-builder-panel, .course-edit-outline-card, .course-edit-outline-item, .course-edit-outline-doc, [data-enterprise-offer-root], .course-edit-step .rounded-xl, .course-edit-step .rounded-2xl.border) {
    border-color: var(--app-nested-card-border) !important;
    background: var(--course-edit-panel-bg-nested) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] [data-list-row] {
    border: 1px solid var(--app-nested-card-border);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, #ffffff 94%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, #f8fbff 98%)
    );
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] [data-list-row] > button:first-child {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, #eef4ff 86%) !important;
    color: var(--app-primary-700) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] [data-list-row] > button:last-child {
    background: color-mix(in srgb, #ef4444 12%, #ffffff 88%) !important;
    color: #be123c !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-modal-card {
    border-color: var(--course-edit-panel-border) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, #ffffff 96%),
        #ffffff
    ) !important;
    box-shadow: 0 30px 48px -28px rgba(15, 23, 42, 0.28) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-modal-card :is(h3, p, label, .text-slate-100, .text-slate-300, .text-slate-400) {
    color: var(--app-text) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-modal-card .course-edit-modal-secondary {
    border-color: var(--app-button-border) !important;
    background: var(--app-button-bg) !important;
    color: var(--app-button-text-strong) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-modal-card .course-edit-modal-primary {
    border-color: var(--app-button-active-border) !important;
    background: var(--app-dashboard-active-bg, var(--app-button-active-bg)) !important;
    color: #ffffff !important;
    box-shadow: var(--app-dashboard-active-shadow, var(--app-button-active-shadow)) !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero {
    padding: clamp(0.95rem, 1.3vw, 1.2rem) !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
    gap: 0.95rem 1.1rem !important;
    align-items: stretch;
}

body[data-view="teacher/course_edit"] .course-edit-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 34rem;
    padding-right: 0.1rem;
}

body[data-view="teacher/course_edit"] .course-edit-hero .course-edit-hero-copy > p:first-child {
    margin-bottom: 0.1rem;
}

body[data-view="teacher/course_edit"] .course-edit-hero .course-edit-hero-copy h1 {
    margin-top: 0.28rem !important;
    font-size: clamp(1.95rem, 2.15vw, 2.55rem) !important;
    line-height: 1;
}

body[data-view="teacher/course_edit"] .course-edit-hero .course-edit-hero-copy > p.mt-3 {
    margin-top: 0.58rem !important;
    max-width: 33rem;
    font-size: 0.97rem !important;
    line-height: 1.58;
}

body[data-view="teacher/course_edit"] .course-edit-hero-meta {
    margin-top: 0.8rem !important;
    gap: 0.45rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero-meta > span {
    min-height: 1.95rem;
    padding: 0.38rem 0.78rem !important;
    font-size: 0.74rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-hero-kpis {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem !important;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--course-edit-accent) 18%, rgba(148, 163, 184, 0.22) 82%);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(2, 6, 23, 0.04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

body[data-view="teacher/course_edit"] .course-edit-kpi {
    min-height: 0;
    padding: 0.84rem 0.92rem !important;
    border-radius: 1.08rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi::before {
    top: -2.15rem;
    right: -2rem;
    width: 6.5rem;
    height: 6.5rem;
    opacity: 0.72;
}

body[data-view="teacher/course_edit"] .course-edit-kpi::after {
    content: "";
    position: absolute;
    left: 0.92rem;
    top: 0.78rem;
    width: 2.4rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--course-edit-kpi-accent, var(--course-edit-accent)), transparent);
    opacity: 0.82;
}

body[data-view="teacher/course_edit"] .course-edit-kpi--structure {
    --course-edit-kpi-accent: color-mix(in srgb, var(--course-edit-accent) 72%, #2563eb 28%);
}

body[data-view="teacher/course_edit"] .course-edit-kpi--resources {
    --course-edit-kpi-accent: color-mix(in srgb, var(--course-edit-secondary) 68%, var(--course-edit-accent) 32%);
}

body[data-view="teacher/course_edit"] .course-edit-kpi--pedagogy {
    --course-edit-kpi-accent: color-mix(in srgb, var(--course-edit-accent) 46%, #0ea5e9 54%);
}

body[data-view="teacher/course_edit"] .course-edit-kpi--readiness {
    --course-edit-kpi-accent: color-mix(in srgb, var(--course-edit-accent) 38%, #14b8a6 62%);
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:first-child {
    font-size: 0.68rem !important;
    letter-spacing: 0.2em !important;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(2) {
    margin-top: 0.5rem !important;
    font-size: clamp(1.34rem, 1.28vw, 1.78rem) !important;
    line-height: 1.04;
}

body[data-view="teacher/course_edit"] .course-edit-kpi p:nth-child(3) {
    margin-top: 0.26rem !important;
    font-size: 0.87rem !important;
    line-height: 1.4;
}

body[data-view="teacher/course_edit"] :is(.course-edit-panel--form > .course-edit-section-head, .course-edit-panel--summary > .flex.items-start, .course-edit-panel--actions > .flex.items-start, .course-edit-panel--quick > .flex.items-start) {
    align-items: flex-start !important;
    gap: 0.9rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-panel--form > .course-edit-section-head {
    padding-bottom: 0.55rem;
}

body[data-view="teacher/course_edit"] :is(.course-edit-section-lead, .course-edit-panel--summary > .flex.items-start, .course-edit-panel--actions > .flex.items-start, .course-edit-panel--quick > .flex.items-start) > div {
    min-width: 0;
}

body[data-view="teacher/course_edit"] :is(.course-edit-section-icon, .course-edit-panel--summary > .flex.items-start span[aria-hidden="true"], .course-edit-panel--actions > .flex.items-start span[aria-hidden="true"], .course-edit-panel--quick > .flex.items-start span[aria-hidden="true"]) {
    width: 3rem !important;
    height: 3rem !important;
    flex: 0 0 3rem;
    border-radius: 1rem !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-section-icon, .course-edit-panel--summary > .flex.items-start span[aria-hidden="true"], .course-edit-panel--actions > .flex.items-start span[aria-hidden="true"], .course-edit-panel--quick > .flex.items-start span[aria-hidden="true"]) svg {
    width: 1.32rem;
    height: 1.32rem;
}

body[data-view="teacher/course_edit"] :is(.course-edit-section-copy > p:first-child, .course-edit-panel--summary > .flex.items-start > div > p:first-child, .course-edit-panel--actions > .flex.items-start > div > p:first-child, .course-edit-panel--quick > .flex.items-start > div > p:first-child) {
    font-size: 0.74rem !important;
    letter-spacing: 0.22em !important;
}

body[data-view="teacher/course_edit"] :is(.course-edit-section-copy h2, .course-edit-panel--summary > .flex.items-start > div > h2, .course-edit-panel--actions > .flex.items-start > div > h2, .course-edit-panel--quick > .flex.items-start > div > h2) {
    margin-top: 0.42rem !important;
    font-family: var(--app-font-title);
    font-size: clamp(1.52rem, 1.65vw, 2rem) !important;
    line-height: 1.04;
    letter-spacing: -0.045em;
}

body[data-view="teacher/course_edit"] :is(.course-edit-section-copy p.mt-2, .course-edit-panel--summary > .flex.items-start > div > p.mt-2, .course-edit-panel--actions > .flex.items-start > div > p.mt-2) {
    margin-top: 0.48rem !important;
    max-width: 30rem;
    line-height: 1.52;
}

body[data-view="teacher/course_edit"] .course-edit-panel--form > .course-edit-section-head > span:last-child {
    min-height: 2rem;
    padding-inline: 0.82rem !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 22px -20px rgba(15, 23, 42, 0.2);
}

body[data-view="teacher/course_edit"] .course-edit-builder-head {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0.9rem 1rem;
    align-items: start;
    padding-bottom: 0.68rem;
}

body[data-view="teacher/course_edit"] .course-edit-builder-copy {
    max-width: 30rem;
}

body[data-view="teacher/course_edit"] .course-edit-builder-copy h2 {
    margin-top: 0.34rem !important;
    font-family: var(--app-font-title);
    font-size: clamp(1.7rem, 1.8vw, 2.1rem) !important;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

body[data-view="teacher/course_edit"] .course-edit-builder-copy > p.mt-2 {
    margin-top: 0.46rem !important;
    max-width: 30rem;
    font-size: 0.97rem !important;
    line-height: 1.55;
}

body[data-view="teacher/course_edit"] .course-edit-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0.55rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-tab {
    width: 100%;
    min-height: 2.56rem;
    padding: 0.54rem 0.72rem !important;
    gap: 0.48rem !important;
    justify-content: flex-start;
    border-radius: 0.95rem !important;
    font-size: 0.92rem !important;
}

body[data-view="teacher/course_edit"] .course-edit-tab .app-icon {
    width: 1.42rem;
    height: 1.42rem;
}

body[data-view="teacher/course_edit"] .course-edit-tab__label {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-view="teacher/course_edit"] .course-edit-tab__count {
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: auto;
    padding-inline: 0.3rem;
    font-size: 0.68rem;
}

body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter {
    gap: 0.75rem 0.95rem !important;
    align-items: end;
}

body[data-view="teacher/course_edit"] .course-edit-builder-form__actions {
    align-self: end;
}

body[data-view="teacher/course_edit"] .course-edit-builder-form__submit {
    min-width: 11.75rem;
    min-height: 2.82rem;
    padding-inline: 1.05rem !important;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    body[data-view="teacher/course_edit"] .course-edit-builder-form--chapter .course-edit-builder-form__actions {
        grid-column: 3 !important;
        justify-content: flex-end !important;
    }
}

@media (max-width: 1279px) {
    body[data-view="teacher/course_edit"] .course-edit-hero-shell {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-head {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/course_edit"] .course-edit-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body[data-view="teacher/course_edit"] .course-edit-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-view="teacher/course_edit"] .course-edit-tab {
        min-height: 2.48rem;
        padding-inline: 0.68rem !important;
    }

    body[data-view="teacher/course_edit"] .course-edit-builder-form__submit {
        width: 100%;
    }
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-hero-kpis {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(243, 247, 255, 0.92));
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, #d8e0f2 82%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] :is(.course-edit-section-icon, .course-edit-panel--summary > .flex.items-start span[aria-hidden="true"], .course-edit-panel--actions > .flex.items-start span[aria-hidden="true"], .course-edit-panel--quick > .flex.items-start span[aria-hidden="true"]) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 12px 22px -18px rgba(37, 99, 235, 0.14);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-panel--form > .course-edit-section-head > span:last-child {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, #d8e0f2 72%) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, #eef4ff 90%) !important;
    color: var(--app-primary-700) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-tab {
    box-shadow: 0 10px 18px -18px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/course_edit"] .course-edit-builder-form__submit {
    box-shadow: 0 14px 24px -18px rgba(37, 99, 235, 0.28);
}

/* ============================================================
   Global Full-Width Layout Override
   ============================================================ */
body.app-view {
    --app-content-max-width: 100%;
}

body.app-view .app-shell-toolbar__inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.app-view main:is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .app-dashboard-shell,
    .app-shell-main,
    .stats-shell
),
body.app-view main[class*="max-w-"] {
    width: 100% !important;
    max-width: var(--app-content-max-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.app-view :is(.student-content-main.support-hub, main.profile-page.student-content-main) {
    max-width: var(--app-content-max-width) !important;
}

body[data-view="teacher/exams_create"] {
    --exam-polish-accent: color-mix(in srgb, var(--exam-accent, var(--app-shell-accent, var(--app-primary))) 78%, #1d4ed8 22%);
    --exam-polish-secondary: color-mix(in srgb, #06b6d4 60%, var(--exam-polish-accent) 40%);
    --exam-polish-success: color-mix(in srgb, #10b981 56%, var(--exam-polish-accent) 44%);
    --exam-polish-line: color-mix(in srgb, var(--exam-polish-accent) 30%, rgba(148, 163, 184, 0.22) 70%);
    --exam-polish-line-strong: color-mix(in srgb, var(--exam-polish-accent) 46%, rgba(148, 163, 184, 0.18) 54%);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--exam-polish-accent) 16%, transparent) 0, transparent 26%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--exam-polish-success) 9%, transparent) 0, transparent 22%),
        linear-gradient(180deg, #05111f 0%, #091525 48%, #06111d 100%) !important;
}

body[data-view="teacher/exams_create"] .teacher-workflow-main {
    width: min(100%, 97rem);
}

body[data-view="teacher/exams_create"] .exam-create-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 2vw, 1.9rem) !important;
    border-radius: 1.7rem !important;
    border-color: var(--exam-polish-line) !important;
    background:
        linear-gradient(135deg, rgba(7, 18, 38, 0.96), rgba(8, 24, 49, 0.94) 55%, rgba(4, 47, 46, 0.26) 100%) !important;
    box-shadow: 0 32px 60px -38px rgba(2, 6, 23, 0.78) !important;
}

body[data-view="teacher/exams_create"] .exam-create-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 34%),
        radial-gradient(circle at 84% 18%, rgba(56, 189, 248, 0.16), transparent 28%);
    pointer-events: none;
}

body[data-view="teacher/exams_create"] .exam-create-hero::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -7rem;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--exam-polish-secondary) 18%, transparent), transparent 68%);
    pointer-events: none;
}

body[data-view="teacher/exams_create"] .exam-create-hero > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/exams_create"] .exam-create-hero__title {
    font-family: var(--app-font-title);
    font-size: clamp(2.25rem, 3vw, 3.2rem);
    line-height: 0.98;
    letter-spacing: -0.05em;
}

body[data-view="teacher/exams_create"] .exam-create-hero__subtitle {
    max-width: 42rem;
    line-height: 1.7;
}

body[data-view="teacher/exams_create"] .exam-create-hero__actions {
    gap: 0.75rem;
}

body[data-view="teacher/exams_create"] .exam-create-hero__actions > span,
body[data-view="teacher/exams_create"] .exam-create-hero__back {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

body[data-view="teacher/exams_create"] .exam-create-hero__stats {
    margin-top: 1.25rem;
    gap: 0.95rem;
}

body[data-view="teacher/exams_create"] .exam-create-stat {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border-radius: 1.2rem !important;
}

body[data-view="teacher/exams_create"] .exam-create-stat::before {
    content: "";
    position: absolute;
    top: -2rem;
    right: -2rem;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--exam-polish-accent) 20%, transparent), transparent 70%);
    pointer-events: none;
}

body[data-view="teacher/exams_create"] .exam-create-stat__value {
    font-family: var(--app-font-title);
    font-size: clamp(1.55rem, 1.8vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card, .exam-create-card, .exam-create-help-card, .exam-create-banner, .exam-create-main > section, .exam-create-main > #qcm-builder, .exam-create-main > #drive-upload-progress, .exam-create-side > section, #exam-autosave-box, #exam-live-validation) {
    position: relative;
    border-radius: 1.45rem !important;
    border-color: var(--exam-polish-line) !important;
    box-shadow: 0 24px 44px -34px rgba(2, 6, 23, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card, .exam-create-card, .exam-create-help-card, .exam-create-banner, .exam-create-main > section, .exam-create-main > #qcm-builder, .exam-create-main > #drive-upload-progress, .exam-create-side > section, #exam-autosave-box, #exam-live-validation)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 78%);
    pointer-events: none;
}

body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card, .exam-create-card, .exam-create-help-card, .exam-create-banner, .exam-create-main > section, .exam-create-main > #qcm-builder, .exam-create-main > #drive-upload-progress, .exam-create-side > section, #exam-autosave-box, #exam-live-validation) > * {
    position: relative;
    z-index: 1;
}

body[data-view="teacher/exams_create"] .exam-create-form-card {
    padding: clamp(1.15rem, 1.6vw, 1.4rem) !important;
}

body[data-view="teacher/exams_create"] .exam-create-type-option {
    min-height: 10.75rem;
    border-radius: 1.2rem !important;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), box-shadow var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/exams_create"] .exam-create-type-option:hover {
    transform: translateY(-2px);
}

body[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    border-color: var(--exam-polish-line-strong) !important;
    box-shadow: 0 24px 38px -30px color-mix(in srgb, var(--exam-polish-accent) 34%, rgba(2, 6, 23, 0.88)) !important;
}

body[data-view="teacher/exams_create"] .exam-create-type-option__icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-view="teacher/exams_create"] .exam-create-type-option__fact {
    font-weight: 700;
}

body[data-view="teacher/exams_create"] .exam-create-tool-card,
body[data-view="teacher/exams_create"] .exam-create-setting-card,
body[data-view="teacher/exams_create"] .exam-create-reference,
body[data-view="teacher/exams_create"] .exam-create-summary-item,
body[data-view="teacher/exams_create"] .exam-create-preview-card__sample,
body[data-view="teacher/exams_create"] .exam-create-compliance-item,
body[data-view="teacher/exams_create"] .q-block {
    border-color: color-mix(in srgb, var(--exam-polish-accent) 24%, rgba(148, 163, 184, 0.2) 76%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    min-height: 10rem;
    border-bottom: 1px solid color-mix(in srgb, var(--exam-polish-accent) 18%, rgba(148, 163, 184, 0.18) 82%);
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__title {
    font-family: var(--app-font-title);
    letter-spacing: -0.04em;
}

body[data-view="teacher/exams_create"] .exam-create-summary-item__count,
body[data-view="teacher/exams_create"] .exam-create-mini-stat {
    font-family: var(--app-font-title);
}

body[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    border-color: var(--exam-polish-line-strong) !important;
    background: linear-gradient(135deg, rgba(5, 15, 34, 0.96), rgba(7, 22, 46, 0.95)) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    gap: 0.55rem;
    padding: 0.78rem 1rem !important;
    box-shadow: 0 26px 44px -30px rgba(2, 6, 23, 0.78) !important;
}

body[data-view="teacher/exams_create"] .exam-create-action-btn {
    min-height: 2.9rem;
    min-width: 0;
    border-radius: 1rem !important;
    box-shadow: 0 18px 30px -26px rgba(2, 6, 23, 0.66);
}

body[data-view="teacher/exams_create"] .exam-create-action-btn--secondary {
    border-color: color-mix(in srgb, var(--exam-polish-accent) 28%, rgba(148, 163, 184, 0.22) 72%) !important;
    background: color-mix(in srgb, var(--exam-polish-accent) 10%, rgba(8, 20, 47, 0.92) 90%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-action-btn--primary {
    border-color: color-mix(in srgb, var(--exam-polish-accent) 54%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--exam-polish-accent) 84%, #2563eb 16%), color-mix(in srgb, var(--exam-polish-success) 34%, #0f172a 66%)) !important;
}

body[data-view="teacher/exams_create"] .exam-create-builder__controls,
body[data-view="teacher/exams_create"] .exam-create-tool-card__header,
body[data-view="teacher/exams_create"] .exam-create-card__header,
body[data-view="teacher/exams_create"] .exam-create-upload__meta {
    gap: 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-variant-tabs {
    gap: 0.75rem;
}

body[data-view="teacher/exams_create"] .variant-tab {
    min-height: 2.85rem;
    border-radius: 1rem !important;
    font-weight: 700;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), box-shadow var(--app-transition-fast), background var(--app-transition-fast);
}

body[data-view="teacher/exams_create"] .variant-tab:hover {
    transform: translateY(-1px);
    border-color: var(--exam-polish-line-strong) !important;
}

body[data-view="teacher/exams_create"] :is(.variant-tab.is-active, .variant-tab.border-emerald-400) {
    box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--exam-polish-accent) 36%, rgba(2, 6, 23, 0.88)) !important;
}

body[data-view="teacher/exams_create"] .questions-container {
    display: grid;
    gap: 0.95rem;
}

body[data-view="teacher/exams_create"] .q-block {
    border-radius: 1.2rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(2, 6, 23, 0.22)) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-help-card, #exam-autosave-box, #exam-live-validation) {
    border-radius: 1.25rem !important;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__summary {
    min-height: 4rem;
    gap: 0.9rem;
}

body[data-view="teacher/exams_create"] .exam-create-help-card__toggle {
    min-width: 4.2rem;
    text-align: center;
}

body[data-view="teacher/exams_create"] details.exam-create-help-card[open] {
    box-shadow: 0 24px 40px -34px rgba(2, 6, 23, 0.74) !important;
}

body[data-view="teacher/exams_create"] .exam-create-inline-btn,
body[data-view="teacher/exams_create"] .exam-create-submit-btn {
    border-radius: 0.95rem !important;
}

body[data-view="teacher/exams_create"] .exam-create-upload__track {
    height: 0.8rem;
    border-radius: 999px;
    overflow: hidden;
}

body[data-view="teacher/exams_create"] .exam-create-upload__bar {
    box-shadow: 0 0 18px -4px color-mix(in srgb, var(--exam-polish-accent) 46%, transparent);
}

body[data-view="teacher/exams_create"] #exam-autosave-box .exam-create-banner__actions {
    gap: 0.65rem;
}

@media (max-width: 1024px) {
    body[data-view="teacher/exams_create"] .exam-create-hero__title {
        font-size: clamp(2rem, 6vw, 2.65rem);
    }

    body[data-view="teacher/exams_create"] .exam-create-type-option {
        min-height: 9.8rem;
    }
}

@media (max-width: 767px) {
    body[data-view="teacher/exams_create"] .teacher-workflow-main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body[data-view="teacher/exams_create"] .exam-create-hero {
        padding: 1.15rem !important;
    }

    body[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-form-card, .exam-create-actions-card, .exam-create-card, .exam-create-help-card, .exam-create-banner, .exam-create-main > section, .exam-create-main > #qcm-builder, .exam-create-main > #drive-upload-progress, .exam-create-side > section, #exam-autosave-box, #exam-live-validation) {
        border-radius: 1.28rem !important;
    }

    body[data-view="teacher/exams_create"] .exam-create-hero__stats {
        gap: 0.8rem;
    }

    body[data-view="teacher/exams_create"] .exam-create-action-grid {
        grid-template-columns: 1fr;
    }
}

/* Teacher exams_create: contextual visibility + readability pass */
body[data-view="teacher/exams_create"] .teacher-workflow-main .hidden {
    display: none !important;
}

@media (min-width: 768px) {
    body[data-view="teacher/exams_create"] .app-shell-toolbar .app-shell-theme--desktop {
        display: inline-flex !important;
    }
}

body[data-view="teacher/exams_create"] .teacher-workflow-main {
    overflow-x: clip;
}

body[data-view="teacher/exams_create"] .exam-create-layout {
    gap: 1.2rem;
}

body[data-view="teacher/exams_create"] :is(.exam-create-main, .exam-create-side) {
    gap: 1.2rem;
}

body[data-view="teacher/exams_create"] .exam-create-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

body[data-view="teacher/exams_create"] .exam-create-actions-meta {
    flex: 1 1 18rem;
    min-width: 14rem;
    overflow-wrap: anywhere;
}

body[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    left: 0;
    right: 0;
    max-width: 100%;
    overflow: clip;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-panel-surface) 95%, var(--app-shell-accent, var(--app-primary)) 5%),
        var(--app-panel-surface)
    ) !important;
    box-shadow: 0 18px 30px -26px rgba(15, 23, 42, 0.3) !important;
}

body[data-view="teacher/exams_create"] .exam-create-action-grid {
    margin-left: auto;
    gap: 0.6rem;
}

body[data-view="teacher/exams_create"] .exam-create-action-btn {
    min-width: clamp(9rem, 13vw, 11rem);
    min-height: 2.65rem;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    .exam-create-tool-card,
    .exam-create-setting-card,
    .exam-create-reference,
    .exam-create-summary-item,
    .exam-create-compliance-item,
    .exam-create-preview-card__sample,
    .q-block,
    .exam-create-help-card
) {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-border) 86%) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-panel-surface) 98%, var(--app-shell-accent, var(--app-primary)) 2%),
        color-mix(in srgb, var(--app-panel-surface) 94%, var(--app-surface) 6%)
    ) !important;
    box-shadow: 0 12px 22px -24px rgba(15, 23, 42, 0.24) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    .exam-create-summary-item--done,
    .exam-create-compliance-item--ok
) {
    background: color-mix(in srgb, var(--app-tone-success, #16a34a) 12%, var(--app-panel-surface) 88%) !important;
}

@media (max-width: 920px) {
    body[data-view="teacher/exams_create"] .exam-create-actions-row {
        align-items: stretch;
    }

    body[data-view="teacher/exams_create"] .exam-create-actions-meta {
        flex-basis: 100%;
        min-width: 0;
    }

    body[data-view="teacher/exams_create"] .exam-create-action-grid {
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body[data-view="teacher/exams_create"] .exam-create-action-grid {
        grid-template-columns: 1fr;
    }
}

/* Teacher exams_create: light theme background normalization */
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] {
    background:
        radial-gradient(circle at 8% 8%, rgba(59, 130, 246, 0.09), transparent 38%),
        radial-gradient(circle at 92% 2%, rgba(14, 165, 233, 0.08), transparent 34%),
        linear-gradient(180deg, #f5f8ff 0%, #f8fbff 52%, #f3f7ff 100%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-hero {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, #d6e0f2 76%) !important;
    background: linear-gradient(145deg, #ffffff 0%, #f4f8ff 62%, #eef5ff 100%) !important;
    box-shadow: 0 24px 38px -30px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-hero::before {
    background:
        linear-gradient(120deg, rgba(59, 130, 246, 0.1), transparent 42%),
        radial-gradient(circle at 82% 20%, rgba(14, 165, 233, 0.12), transparent 30%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-hero::after {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.14), transparent 72%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 255, 0.97)) !important;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, #d4deef 84%) !important;
    box-shadow: 0 14px 26px -24px rgba(30, 64, 175, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .q-block {
    background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, #d4deef 78%) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 255, 0.96)) !important;
    box-shadow: 0 16px 28px -22px rgba(37, 99, 235, 0.22) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-action-btn--secondary {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, #f8fbff 92%) !important;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, #d4deef 74%) !important;
}

/* ============================================================
   Global semantic color system v1
   - semantic tokens
   - role palettes
   - pilot pages: teacher/exams_create + student/my_courses
   ============================================================ */

:root {
    --color-neutral-900: #0f172a;
    --color-neutral-700: #334155;
    --color-neutral-500: #64748b;
    --color-neutral-300: #cbd5e1;
    --color-neutral-50: #f8fafc;

    --color-primary: #2563eb;
    --color-secondary: #0891b2;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;

    --color-bg: var(--app-bg);
    --color-surface: var(--app-surface);
    --color-text: var(--app-text);
    --color-muted: var(--app-muted);
    --color-accent: var(--color-primary);
    --color-info: var(--color-secondary);
    --app-role-secondary: var(--color-secondary);
}

html.dark,
html[data-theme="dark"] {
    --color-bg: var(--app-bg);
    --color-surface: var(--app-surface);
    --color-text: var(--app-text);
    --color-muted: var(--app-muted);
}

body:is(.app-role-admin, .app-role-teacher, .app-role-student, .app-role-company, .app-role-auth, .app-role-web) {
    --color-bg: var(--app-bg);
    --color-surface: var(--app-surface);
    --color-text: var(--app-text);
    --color-muted: var(--app-muted);
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-danger: #dc2626;
}

body.app-role-teacher[data-view],
body.app-role-teacher {
    --color-accent: #2563eb;
    --color-info: #0891b2;
    --app-role-accent: var(--color-accent);
    --app-role-secondary: var(--color-info);
}

body.app-role-student[data-view],
body.app-role-student {
    --color-accent: #2563eb;
    --color-info: #4f46e5;
    --app-role-accent: var(--color-accent);
    --app-role-secondary: var(--color-info);
}

body.app-role-company[data-view],
body.app-role-company {
    --color-accent: #d97706;
    --color-info: #334155;
    --app-role-accent: var(--color-accent);
    --app-role-secondary: var(--color-info);
}

body.app-role-admin[data-view],
body.app-role-admin {
    --color-accent: #4f46e5;
    --color-info: #ea580c;
    --app-role-accent: var(--color-accent);
    --app-role-secondary: var(--color-info);
}

body:is(.app-role-web, .app-role-auth) {
    --color-accent: #2563eb;
    --color-info: #0891b2;
    --app-role-accent: var(--color-accent);
    --app-role-secondary: var(--color-info);
}

body.app-view,
body.app-public-page,
body.app-auth-page {
    --app-shell-accent: var(--color-accent, var(--app-role-accent, var(--app-primary)));
    --app-link: var(--app-shell-accent);
    --app-info: var(--color-info, var(--app-shell-accent));
    --app-tone-primary: var(--app-shell-accent);
    --app-tone-info: var(--app-info);
    --app-tone-success: var(--color-success);
    --app-tone-warning: var(--color-warning);
    --app-tone-danger: var(--color-danger);
    --app-button-primary-bg: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-shell-accent) 86%, #2563eb 14%),
        color-mix(in srgb, var(--app-role-secondary, var(--app-shell-accent)) 32%, var(--app-shell-accent) 68%)
    );
    --app-button-primary-bg-hover: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-shell-accent) 78%, #1d4ed8 22%),
        color-mix(in srgb, var(--app-role-secondary, var(--app-shell-accent)) 38%, var(--app-shell-accent) 62%)
    );
    --app-button-primary-border: color-mix(in srgb, var(--app-shell-accent) 62%, transparent);
    --app-button-active-bg: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-shell-accent) 84%, #1d4ed8 16%),
        color-mix(in srgb, var(--app-role-secondary, var(--app-shell-accent)) 36%, var(--app-shell-accent) 64%)
    );
    --app-button-active-border: color-mix(in srgb, var(--app-shell-accent) 70%, transparent);
}

body.app-role-teacher[data-view] {
    --app-dashboard-active-bg: linear-gradient(135deg, #1d4ed8, #4338ca);
    --app-dashboard-active-shadow: 0 14px 26px -18px rgba(29, 78, 216, 0.56);
    --app-dashboard-active-bg-dark: linear-gradient(135deg, #3b82f6, #6366f1);
    --app-dashboard-active-shadow-dark: 0 16px 30px -18px rgba(59, 130, 246, 0.54);
}

body.app-role-student[data-view] {
    --app-dashboard-active-bg: linear-gradient(135deg, #2563eb, #4f46e5);
    --app-dashboard-active-shadow: 0 14px 26px -18px rgba(37, 99, 235, 0.54);
    --app-dashboard-active-bg-dark: linear-gradient(135deg, #3b82f6, #6366f1);
    --app-dashboard-active-shadow-dark: 0 16px 30px -18px rgba(59, 130, 246, 0.52);
}

body.app-role-company[data-view] {
    --app-dashboard-active-bg: linear-gradient(135deg, #d97706, #334155);
    --app-dashboard-active-shadow: 0 14px 26px -18px rgba(217, 119, 6, 0.48);
    --app-dashboard-active-bg-dark: linear-gradient(135deg, #f59e0b, #475569);
    --app-dashboard-active-shadow-dark: 0 16px 30px -18px rgba(245, 158, 11, 0.46);
}

body.app-role-admin[data-view] {
    --app-dashboard-active-bg: linear-gradient(135deg, #4f46e5, #ea580c);
    --app-dashboard-active-shadow: 0 14px 26px -18px rgba(79, 70, 229, 0.52);
    --app-dashboard-active-bg-dark: linear-gradient(135deg, #6366f1, #f97316);
    --app-dashboard-active-shadow-dark: 0 16px 30px -18px rgba(99, 102, 241, 0.5);
}

/* Pilot 1: teacher/exams_create (role-aware palette) */
body[data-view="teacher/exams_create"] {
    --exam-accent: var(--color-accent, var(--app-role-accent, var(--app-primary-600)));
    --exam-accent-strong: color-mix(in srgb, var(--color-info, #0891b2) 72%, #ffffff 28%);
    --exam-text: var(--color-text);
    --exam-text-soft: var(--color-muted);
    --exam-border: color-mix(in srgb, var(--exam-accent) 34%, #cbd5e1 66%);
    --exam-border-strong: color-mix(in srgb, var(--exam-accent) 50%, #cbd5e1 50%);
    --exam-panel: linear-gradient(
        150deg,
        color-mix(in srgb, var(--exam-accent) 8%, rgba(255, 255, 255, 0.98) 92%),
        color-mix(in srgb, var(--exam-accent-strong) 7%, rgba(244, 249, 255, 0.96) 93%)
    );
    --exam-card: linear-gradient(
        160deg,
        color-mix(in srgb, var(--exam-accent) 7%, rgba(255, 255, 255, 0.96) 93%),
        color-mix(in srgb, var(--exam-accent-strong) 9%, rgba(242, 248, 255, 0.94) 91%)
    );
    --exam-soft: color-mix(in srgb, var(--exam-accent) 12%, rgba(232, 242, 255, 0.92) 88%);
    --exam-stat-base-a: color-mix(in srgb, var(--exam-accent) 8%, rgba(248, 252, 255, 0.98) 92%);
    --exam-stat-base-b: color-mix(in srgb, var(--exam-accent-strong) 10%, rgba(239, 246, 255, 0.96) 90%);
    --exam-card-shadow: 0 24px 42px -34px rgba(15, 23, 42, 0.28);
    background:
        radial-gradient(circle at 9% 12%, color-mix(in srgb, var(--exam-accent) 18%, transparent), transparent 40%),
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--exam-accent-strong) 14%, transparent), transparent 35%),
        linear-gradient(180deg, #eef4ff 0%, #f8fbff 45%, #eff5ff 100%) !important;
}

html.dark body[data-view="teacher/exams_create"],
html[data-theme="dark"] body[data-view="teacher/exams_create"] {
    --exam-accent: color-mix(in srgb, var(--color-accent, #2563eb) 72%, #93c5fd 28%);
    --exam-accent-strong: color-mix(in srgb, var(--color-info, #0891b2) 72%, #99f6e4 28%);
    --exam-text: #edf4ff;
    --exam-text-soft: #9db1d3;
    --exam-border: color-mix(in srgb, var(--exam-accent) 32%, rgba(148, 163, 184, 0.24) 68%);
    --exam-border-strong: color-mix(in srgb, var(--exam-accent) 54%, rgba(148, 163, 184, 0.2) 46%);
    --exam-panel: linear-gradient(
        150deg,
        color-mix(in srgb, var(--exam-accent) 16%, rgba(11, 28, 62, 0.96) 84%),
        color-mix(in srgb, var(--exam-accent-strong) 12%, rgba(7, 20, 46, 0.96) 88%)
    );
    --exam-card: linear-gradient(
        160deg,
        color-mix(in srgb, var(--exam-accent) 18%, rgba(14, 35, 76, 0.96) 82%),
        color-mix(in srgb, var(--exam-accent-strong) 10%, rgba(8, 22, 49, 0.96) 90%)
    );
    --exam-soft: color-mix(in srgb, var(--exam-accent) 22%, rgba(16, 36, 74, 0.88) 78%);
    --exam-stat-base-a: color-mix(in srgb, var(--exam-accent) 24%, rgba(18, 40, 83, 0.95) 76%);
    --exam-stat-base-b: color-mix(in srgb, var(--exam-accent-strong) 12%, rgba(9, 24, 52, 0.95) 88%);
    --exam-card-shadow: 0 26px 50px -38px rgba(1, 8, 23, 0.94);
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--exam-accent) 22%, transparent), transparent 38%),
        radial-gradient(circle at 92% 2%, color-mix(in srgb, var(--exam-accent-strong) 16%, transparent), transparent 36%),
        linear-gradient(180deg, #061127 0%, #040c1d 44%, #05132f 100%) !important;
}

/* Pilot 2: student/my_courses (green/teal variation) */
body[data-view="student/my_courses"] {
    --student-courses-accent: var(--color-accent, var(--app-shell-accent, var(--app-primary)));
    --student-courses-secondary: var(--color-info, var(--app-role-secondary, #4f46e5));
    --student-courses-border: color-mix(in srgb, var(--student-courses-accent) 24%, #d8e0f2 76%);
    --student-courses-surface: linear-gradient(
        165deg,
        color-mix(in srgb, var(--student-courses-accent) 5%, #ffffff 95%),
        color-mix(in srgb, var(--student-courses-secondary) 7%, #f8fafc 93%)
    );
    background:
        radial-gradient(circle at 9% 8%, color-mix(in srgb, var(--student-courses-accent) 12%, transparent), transparent 40%),
        radial-gradient(circle at 91% 2%, color-mix(in srgb, var(--student-courses-secondary) 12%, transparent), transparent 36%),
        var(--app-bg) !important;
}

body[data-view="student/my_courses"] .student-content-main > :is(section.rounded-3xl, section.rounded-2xl) {
    border-color: var(--student-courses-border) !important;
    background: var(--student-courses-surface) !important;
    box-shadow: 0 16px 26px -24px rgba(15, 23, 42, 0.26) !important;
}

body[data-view="student/my_courses"] :is(article.rounded-2xl, li.rounded-xl) {
    border-color: color-mix(in srgb, var(--student-courses-accent) 20%, var(--app-border) 80%) !important;
    background: linear-gradient(
        170deg,
        color-mix(in srgb, var(--student-courses-accent) 3%, var(--app-surface) 97%),
        color-mix(in srgb, var(--student-courses-secondary) 4%, var(--app-surface) 96%)
    ) !important;
}

body[data-view="student/my_courses"] .app-kpi-card--blue {
    --app-kpi-accent: var(--student-courses-accent);
}

body[data-view="student/my_courses"] .app-kpi-card--sky {
    --app-kpi-accent: var(--student-courses-secondary);
}

body[data-view="student/my_courses"] .app-kpi-card--indigo {
    --app-kpi-accent: color-mix(in srgb, var(--student-courses-secondary) 54%, var(--student-courses-accent) 46%);
}

body[data-view="student/my_courses"] .dash-progress__fill {
    background: linear-gradient(90deg, var(--student-courses-accent), var(--student-courses-secondary)) !important;
}

body[data-view="student/my_courses"] .app-segmented-link--active {
    border-color: var(--student-courses-accent) !important;
    background: linear-gradient(
        135deg,
        var(--student-courses-accent),
        color-mix(in srgb, var(--student-courses-secondary) 40%, var(--student-courses-accent) 60%)
    ) !important;
    color: #ffffff !important;
}

body[data-view="student/my_courses"] .app-status-pill--sky {
    border-color: color-mix(in srgb, var(--student-courses-secondary) 34%, var(--app-border) 66%) !important;
    background: color-mix(in srgb, var(--student-courses-secondary) 14%, var(--app-surface) 86%) !important;
    color: color-mix(in srgb, var(--student-courses-secondary) 72%, var(--app-text) 28%) !important;
}

body[data-view="student/my_courses"] .text-blue-600 {
    color: color-mix(in srgb, var(--student-courses-accent) 78%, var(--app-text) 22%) !important;
}

html.dark body[data-view="student/my_courses"] .dark\:text-blue-300,
html[data-theme="dark"] body[data-view="student/my_courses"] .dark\:text-blue-300 {
    color: color-mix(in srgb, var(--student-courses-accent) 62%, #ffffff 38%) !important;
}

html.dark body[data-view="student/my_courses"],
html[data-theme="dark"] body[data-view="student/my_courses"] {
    --student-courses-border: color-mix(in srgb, var(--student-courses-accent) 34%, rgba(148, 163, 184, 0.22) 66%);
    --student-courses-surface: linear-gradient(
        165deg,
        color-mix(in srgb, var(--student-courses-accent) 16%, rgba(11, 28, 62, 0.94) 84%),
        color-mix(in srgb, var(--student-courses-secondary) 14%, rgba(7, 20, 46, 0.94) 86%)
    );
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--student-courses-accent) 18%, transparent), transparent 38%),
        radial-gradient(circle at 92% 2%, color-mix(in srgb, var(--student-courses-secondary) 16%, transparent), transparent 36%),
        linear-gradient(180deg, #061127 0%, #040c1d 44%, #05132f 100%) !important;
}

/* ============================================================
   Full-project role color remap
   - propagate role accents to legacy primary tokens
   - remap blue/indigo/sky/cyan utility classes across all views
   ============================================================ */

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) {
    --app-shell-accent: var(--color-accent, var(--app-role-accent, var(--app-primary)));
    --app-primary: var(--app-shell-accent);
    --app-primary-700: color-mix(in srgb, var(--app-shell-accent) 78%, #0f172a 22%);
    --app-primary-600: color-mix(in srgb, var(--app-shell-accent) 90%, #2563eb 10%);
    --app-primary-500: color-mix(in srgb, var(--app-shell-accent) 76%, #ffffff 24%);
    --app-primary-400: color-mix(in srgb, var(--app-shell-accent) 62%, #ffffff 38%);
    --app-primary-300: color-mix(in srgb, var(--app-shell-accent) 50%, #ffffff 50%);
    --app-link: var(--app-shell-accent);
    --app-info: var(--color-info, var(--app-shell-accent));
    --app-ring: color-mix(in srgb, var(--app-shell-accent) 26%, transparent);
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="text-blue-"], [class*=" text-blue-"],
    [class^="text-indigo-"], [class*=" text-indigo-"],
    [class^="text-sky-"], [class*=" text-sky-"],
    [class^="text-cyan-"], [class*=" text-cyan-"]
) {
    color: color-mix(in srgb, var(--app-shell-accent) 78%, var(--app-text) 22%) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="border-blue-"], [class*=" border-blue-"],
    [class^="border-indigo-"], [class*=" border-indigo-"],
    [class^="border-sky-"], [class*=" border-sky-"],
    [class^="border-cyan-"], [class*=" border-cyan-"]
) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 34%, var(--app-border) 66%) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    div, span, article, section, p, small, strong, li, td, th, label
):is(
    [class^="bg-blue-"], [class*=" bg-blue-"],
    [class^="bg-indigo-"], [class*=" bg-indigo-"],
    [class^="bg-sky-"], [class*=" bg-sky-"],
    [class^="bg-cyan-"], [class*=" bg-cyan-"]
) {
    background: color-mix(in srgb, var(--app-shell-accent) 10%, var(--app-surface) 90%) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"]
):is(
    [class^="bg-blue-"], [class*=" bg-blue-"],
    [class^="bg-indigo-"], [class*=" bg-indigo-"],
    [class^="bg-sky-"], [class*=" bg-sky-"],
    [class^="bg-cyan-"], [class*=" bg-cyan-"]
) {
    border: 1px solid var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"]
):is(
    [class^="bg-blue-"], [class*=" bg-blue-"],
    [class^="bg-indigo-"], [class*=" bg-indigo-"],
    [class^="bg-sky-"], [class*=" bg-sky-"],
    [class^="bg-cyan-"], [class*=" bg-cyan-"]
):hover {
    background: var(--app-button-primary-bg-hover) !important;
    color: var(--app-button-primary-text) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"]
):is(
    [class^="border-blue-"], [class*=" border-blue-"],
    [class^="border-indigo-"], [class*=" border-indigo-"],
    [class^="border-sky-"], [class*=" border-sky-"],
    [class^="border-cyan-"], [class*=" border-cyan-"]
):is(
    [class^="text-blue-"], [class*=" text-blue-"],
    [class^="text-indigo-"], [class*=" text-indigo-"],
    [class^="text-sky-"], [class*=" text-sky-"],
    [class^="text-cyan-"], [class*=" text-cyan-"]
) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 52%, var(--app-border) 48%) !important;
    background: color-mix(in srgb, var(--app-shell-accent) 10%, var(--app-surface) 90%) !important;
    color: color-mix(in srgb, var(--app-shell-accent) 82%, var(--app-text) 18%) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-blue-"]:focus,
body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-indigo-"]:focus,
body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-sky-"]:focus,
body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-cyan-"]:focus {
    border-color: color-mix(in srgb, var(--app-shell-accent) 56%, var(--app-border) 44%) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-blue-"]:focus,
body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-indigo-"]:focus,
body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-sky-"]:focus,
body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-cyan-"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent) 24%, transparent) !important;
}

html.dark body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="dark:text-blue-"], [class*=" dark:text-blue-"],
    [class^="dark:text-indigo-"], [class*=" dark:text-indigo-"],
    [class^="dark:text-sky-"], [class*=" dark:text-sky-"],
    [class^="dark:text-cyan-"], [class*=" dark:text-cyan-"]
),
html[data-theme="dark"] body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="dark:text-blue-"], [class*=" dark:text-blue-"],
    [class^="dark:text-indigo-"], [class*=" dark:text-indigo-"],
    [class^="dark:text-sky-"], [class*=" dark:text-sky-"],
    [class^="dark:text-cyan-"], [class*=" dark:text-cyan-"]
) {
    color: color-mix(in srgb, var(--app-shell-accent) 62%, #ffffff 38%) !important;
}

html.dark body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="dark:border-blue-"], [class*=" dark:border-blue-"],
    [class^="dark:border-indigo-"], [class*=" dark:border-indigo-"],
    [class^="dark:border-sky-"], [class*=" dark:border-sky-"],
    [class^="dark:border-cyan-"], [class*=" dark:border-cyan-"]
),
html[data-theme="dark"] body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="dark:border-blue-"], [class*=" dark:border-blue-"],
    [class^="dark:border-indigo-"], [class*=" dark:border-indigo-"],
    [class^="dark:border-sky-"], [class*=" dark:border-sky-"],
    [class^="dark:border-cyan-"], [class*=" dark:border-cyan-"]
) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 44%, rgba(148, 163, 184, 0.28) 56%) !important;
}

html.dark body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="dark:bg-blue-"], [class*=" dark:bg-blue-"],
    [class^="dark:bg-indigo-"], [class*=" dark:bg-indigo-"],
    [class^="dark:bg-sky-"], [class*=" dark:bg-sky-"],
    [class^="dark:bg-cyan-"], [class*=" dark:bg-cyan-"]
),
html[data-theme="dark"] body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web, .app-role-auth) :is(
    [class^="dark:bg-blue-"], [class*=" dark:bg-blue-"],
    [class^="dark:bg-indigo-"], [class*=" dark:bg-indigo-"],
    [class^="dark:bg-sky-"], [class*=" dark:bg-sky-"],
    [class^="dark:bg-cyan-"], [class*=" dark:bg-cyan-"]
) {
    background: color-mix(in srgb, var(--app-shell-accent) 20%, rgba(15, 23, 42, 0.88) 80%) !important;
}

/* Teacher-specific remap: convert emerald/green/teal accents to teacher blue palette */
body.app-role-teacher :is(
    [class^="text-emerald-"], [class*=" text-emerald-"],
    [class^="text-green-"], [class*=" text-green-"],
    [class^="text-teal-"], [class*=" text-teal-"]
) {
    color: color-mix(in srgb, var(--app-shell-accent) 78%, var(--app-text) 22%) !important;
}

body.app-role-teacher :is(
    [class^="border-emerald-"], [class*=" border-emerald-"],
    [class^="border-green-"], [class*=" border-green-"],
    [class^="border-teal-"], [class*=" border-teal-"]
) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 34%, var(--app-border) 66%) !important;
}

body.app-role-teacher :is(
    div, span, article, section, p, small, strong, li, td, th, label
):is(
    [class^="bg-emerald-"], [class*=" bg-emerald-"],
    [class^="bg-green-"], [class*=" bg-green-"],
    [class^="bg-teal-"], [class*=" bg-teal-"]
) {
    background: color-mix(in srgb, var(--app-shell-accent) 10%, var(--app-surface) 90%) !important;
}

body.app-role-teacher :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"]
):is(
    [class^="bg-emerald-"], [class*=" bg-emerald-"],
    [class^="bg-green-"], [class*=" bg-green-"],
    [class^="bg-teal-"], [class*=" bg-teal-"]
) {
    border: 1px solid var(--app-button-primary-border) !important;
    background: var(--app-button-primary-bg) !important;
    color: var(--app-button-primary-text) !important;
    box-shadow: var(--app-button-primary-shadow) !important;
}

body.app-role-teacher :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"]
):is(
    [class^="bg-emerald-"], [class*=" bg-emerald-"],
    [class^="bg-green-"], [class*=" bg-green-"],
    [class^="bg-teal-"], [class*=" bg-teal-"]
):hover {
    background: var(--app-button-primary-bg-hover) !important;
    color: var(--app-button-primary-text) !important;
}

body.app-role-teacher :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-emerald-"]:focus,
body.app-role-teacher :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-green-"]:focus,
body.app-role-teacher :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-teal-"]:focus {
    border-color: color-mix(in srgb, var(--app-shell-accent) 56%, var(--app-border) 44%) !important;
}

body.app-role-teacher :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-emerald-"]:focus,
body.app-role-teacher :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-green-"]:focus,
body.app-role-teacher :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-teal-"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent) 24%, transparent) !important;
}

html.dark body.app-role-teacher :is(
    [class^="dark:text-emerald-"], [class*=" dark:text-emerald-"],
    [class^="dark:text-green-"], [class*=" dark:text-green-"],
    [class^="dark:text-teal-"], [class*=" dark:text-teal-"]
),
html[data-theme="dark"] body.app-role-teacher :is(
    [class^="dark:text-emerald-"], [class*=" dark:text-emerald-"],
    [class^="dark:text-green-"], [class*=" dark:text-green-"],
    [class^="dark:text-teal-"], [class*=" dark:text-teal-"]
) {
    color: color-mix(in srgb, var(--app-shell-accent) 62%, #ffffff 38%) !important;
}

html.dark body.app-role-teacher :is(
    [class^="dark:border-emerald-"], [class*=" dark:border-emerald-"],
    [class^="dark:border-green-"], [class*=" dark:border-green-"],
    [class^="dark:border-teal-"], [class*=" dark:border-teal-"]
),
html[data-theme="dark"] body.app-role-teacher :is(
    [class^="dark:border-emerald-"], [class*=" dark:border-emerald-"],
    [class^="dark:border-green-"], [class*=" dark:border-green-"],
    [class^="dark:border-teal-"], [class*=" dark:border-teal-"]
) {
    border-color: color-mix(in srgb, var(--app-shell-accent) 44%, rgba(148, 163, 184, 0.28) 56%) !important;
}

html.dark body.app-role-teacher :is(
    [class^="dark:bg-emerald-"], [class*=" dark:bg-emerald-"],
    [class^="dark:bg-green-"], [class*=" dark:bg-green-"],
    [class^="dark:bg-teal-"], [class*=" dark:bg-teal-"]
),
html[data-theme="dark"] body.app-role-teacher :is(
    [class^="dark:bg-emerald-"], [class*=" dark:bg-emerald-"],
    [class^="dark:bg-green-"], [class*=" dark:bg-green-"],
    [class^="dark:bg-teal-"], [class*=" dark:bg-teal-"]
) {
    background: color-mix(in srgb, var(--app-shell-accent) 20%, rgba(15, 23, 42, 0.88) 80%) !important;
}

/* ============================================================
   Page-level palettes (blue spectrum) by view namespace
   ============================================================ */

body[data-view] {
    --page-accent: var(--app-shell-accent, var(--app-primary));
    --page-accent-alt: color-mix(in srgb, var(--page-accent) 56%, #0ea5e9 44%);
    --page-border: color-mix(in srgb, var(--page-accent) 24%, var(--app-border) 76%);
    --page-surface-a: color-mix(in srgb, var(--page-accent) 4%, #ffffff 96%);
    --page-surface-b: color-mix(in srgb, var(--page-accent-alt) 6%, #f8fafc 94%);
    --page-surface-hero-a: color-mix(in srgb, var(--page-accent) 7%, #ffffff 93%);
    --page-surface-hero-b: color-mix(in srgb, var(--page-accent-alt) 10%, #f8fafc 90%);
    --page-shadow: 0 18px 32px -26px rgba(15, 23, 42, 0.26);
}

body[data-view^="teacher/"] {
    --page-accent: #2563eb;
    --page-accent-alt: #0ea5e9;
}

body[data-view^="student/"] {
    --page-accent: #3b82f6;
    --page-accent-alt: #6366f1;
}

body[data-view^="company/"] {
    --page-accent: #1d4ed8;
    --page-accent-alt: #0284c7;
}

body[data-view^="admin/"] {
    --page-accent: #4338ca;
    --page-accent-alt: #2563eb;
}

body[data-view^="web/"] {
    --page-accent: #2563eb;
    --page-accent-alt: #38bdf8;
}

body:is(
    [data-view^="teacher/"],
    [data-view^="student/"],
    [data-view^="company/"],
    [data-view^="admin/"],
    [data-view^="web/"]
) {
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--page-accent) 12%, transparent), transparent 40%),
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--page-accent-alt) 11%, transparent), transparent 36%),
        var(--app-bg) !important;
}

html.dark body:is(
    [data-view^="teacher/"],
    [data-view^="student/"],
    [data-view^="company/"],
    [data-view^="admin/"],
    [data-view^="web/"]
),
html[data-theme="dark"] body:is(
    [data-view^="teacher/"],
    [data-view^="student/"],
    [data-view^="company/"],
    [data-view^="admin/"],
    [data-view^="web/"]
) {
    --page-border: color-mix(in srgb, var(--page-accent) 34%, rgba(148, 163, 184, 0.24) 66%);
    --page-surface-a: color-mix(in srgb, var(--page-accent) 16%, rgba(15, 23, 42, 0.94) 84%);
    --page-surface-b: color-mix(in srgb, var(--page-accent-alt) 14%, rgba(15, 23, 42, 0.92) 86%);
    --page-surface-hero-a: color-mix(in srgb, var(--page-accent) 22%, rgba(17, 24, 39, 0.95) 78%);
    --page-surface-hero-b: color-mix(in srgb, var(--page-accent-alt) 16%, rgba(17, 24, 39, 0.94) 84%);
    --page-shadow: 0 20px 34px -26px rgba(2, 6, 23, 0.72);
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--page-accent) 18%, transparent), transparent 40%),
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--page-accent-alt) 16%, transparent), transparent 36%),
        #0b1220 !important;
}

body[data-view^="teacher/"]:not([data-view="teacher/exams_create"]) :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl),
body[data-view^="student/"] .student-content-main > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl),
body[data-view^="company/"] :is(main.max-w-7xl, main.app-dashboard-shell) > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl),
body[data-view^="admin/"] .admin-shell-content > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl),
body[data-view^="web/"] main > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl) {
    border-color: var(--page-border) !important;
    background: linear-gradient(165deg, var(--page-surface-a), var(--page-surface-b)) !important;
    box-shadow: var(--page-shadow) !important;
}

body[data-view^="teacher/"]:not([data-view="teacher/exams_create"]) :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .app-dashboard-shell) > section:first-child,
body[data-view^="student/"] .student-content-main > section:first-child,
body[data-view^="company/"] :is(main.max-w-7xl, main.app-dashboard-shell) > section:first-child,
body[data-view^="admin/"] .admin-shell-content > section:first-child,
body[data-view^="web/"] main > section:first-child {
    background: linear-gradient(160deg, var(--page-surface-hero-a), var(--page-surface-hero-b)) !important;
}

/* ============================================================
   Unified workspace baseline
   Reference: admin/dashboard shell look-and-feel
   ============================================================ */

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view,
body.app-role-company.app-auth-page {
    --workspace-accent: var(--app-shell-accent, var(--app-primary));
    --workspace-border: color-mix(in srgb, var(--workspace-accent) 28%, #d7e0f3 72%);
    --workspace-border-strong: color-mix(in srgb, var(--workspace-accent) 42%, #d7e0f3 58%);
    --workspace-surface-soft: color-mix(in srgb, var(--workspace-accent) 6%, #ffffff 94%);
    --workspace-surface-strong: color-mix(in srgb, var(--workspace-accent) 10%, #ffffff 90%);
    --workspace-panel-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--workspace-accent) 10%, #f3f7ff 90%),
        #ffffff
    );
    --workspace-sidebar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--workspace-accent) 7%, #f5f8ff 93%),
        #fbfcff
    );
    --workspace-card-bg: linear-gradient(
        180deg,
        color-mix(in srgb, #ffffff 97%, transparent),
        color-mix(in srgb, var(--workspace-surface-soft) 94%, transparent)
    );
    --workspace-hero-bg: linear-gradient(
        145deg,
        color-mix(in srgb, #ffffff 98%, transparent),
        color-mix(in srgb, var(--workspace-surface-strong) 94%, transparent)
    );
    --workspace-shadow: 0 14px 32px -24px rgba(15, 23, 42, 0.16);
    --workspace-shadow-soft: 0 10px 22px -18px rgba(15, 23, 42, 0.12);
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--workspace-accent) 12%, transparent), transparent 40%),
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--workspace-accent) 10%, transparent), transparent 36%),
        var(--app-bg) !important;
}

html.dark body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view,
html[data-theme="dark"] body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view,
html.dark body.app-role-company.app-auth-page,
html[data-theme="dark"] body.app-role-company.app-auth-page {
    --workspace-border: color-mix(in srgb, var(--workspace-accent) 32%, rgba(148, 163, 184, 0.24) 68%);
    --workspace-border-strong: color-mix(in srgb, var(--workspace-accent) 48%, rgba(148, 163, 184, 0.2) 52%);
    --workspace-surface-soft: color-mix(in srgb, var(--workspace-accent) 16%, rgba(15, 23, 42, 0.94) 84%);
    --workspace-surface-strong: color-mix(in srgb, var(--workspace-accent) 20%, rgba(15, 23, 42, 0.92) 80%);
    --workspace-panel-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--workspace-accent) 14%, rgba(15, 23, 42, 0.94) 86%),
        rgba(15, 23, 42, 0.95)
    );
    --workspace-sidebar-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--workspace-accent) 16%, rgba(2, 6, 23, 0.95) 84%),
        rgba(2, 6, 23, 0.96)
    );
    --workspace-card-bg: linear-gradient(
        180deg,
        color-mix(in srgb, var(--workspace-accent) 12%, rgba(15, 23, 42, 0.9) 88%),
        rgba(2, 6, 23, 0.92)
    );
    --workspace-hero-bg: linear-gradient(
        145deg,
        color-mix(in srgb, var(--workspace-accent) 20%, rgba(15, 23, 42, 0.92) 80%),
        color-mix(in srgb, var(--workspace-accent) 16%, rgba(2, 6, 23, 0.94) 84%)
    );
    --workspace-shadow: 0 16px 34px -24px rgba(2, 6, 23, 0.64);
    --workspace-shadow-soft: 0 12px 24px -18px rgba(2, 6, 23, 0.54);
    background:
        radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--workspace-accent) 18%, transparent), transparent 40%),
        radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--workspace-accent) 14%, transparent), transparent 36%),
        #0b1220 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view .app-shell-toolbar,
body.app-role-company.app-auth-page .app-shell-toolbar {
    border-color: var(--workspace-border) !important;
    background: var(--workspace-panel-bg) !important;
    box-shadow: var(--workspace-shadow) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-admin).app-view :is(#teacher-sidebar, #student-sidebar, #admin-sidebar),
body:is(.app-role-teacher, .app-role-student, .app-role-admin).app-view .app-shell-sidebar {
    border-right-color: var(--workspace-border) !important;
    background: var(--workspace-sidebar-bg) !important;
    box-shadow: 10px 0 28px -28px color-mix(in srgb, var(--workspace-accent) 36%, rgba(15, 23, 42, 0.28)) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-admin).app-view :is(#teacher-sidebar, #student-sidebar, #admin-sidebar) .app-shell-sidebar__brand {
    border-bottom-color: var(--workspace-border) !important;
    background: color-mix(in srgb, var(--workspace-accent) 3%, #ffffff 97%) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl) {
    border-color: var(--workspace-border) !important;
    background: var(--workspace-card-bg) !important;
    box-shadow: var(--workspace-shadow-soft) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) > section:first-child {
    border-color: var(--workspace-border-strong) !important;
    background: var(--workspace-hero-bg) !important;
    box-shadow: var(--workspace-shadow) !important;
}

body[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    border-color: var(--workspace-border) !important;
    background: var(--workspace-card-bg) !important;
    box-shadow: var(--workspace-shadow-soft) !important;
}

body[data-view="teacher/exams_create"] .exam-create-hero {
    border-color: var(--workspace-border-strong) !important;
    background: var(--workspace-hero-bg) !important;
    box-shadow: var(--workspace-shadow) !important;
}

/* ============================================================
   Unified density & typography baseline
   Reference: admin-shell-dense
   ============================================================ */

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view {
    --workspace-gap: 1.25rem;
    --workspace-radius-card: 1.45rem;
    --workspace-radius-item: 1.08rem;
    --workspace-radius-control: 0.9rem;
    --workspace-radius-btn: 0.95rem;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) {
    gap: var(--workspace-gap) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) > :is(section, article, details, form, div.rounded-3xl, div.rounded-2xl) {
    border-radius: var(--workspace-radius-card) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(article, section, div, aside, form, li).rounded-2xl {
    border-radius: var(--workspace-radius-item) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(article, section, div, aside, form).p-6 {
    padding: var(--app-card-padding) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(article, section, div, aside, form).p-5 {
    padding: var(--app-card-padding-sm) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(article, section, div, aside, form).p-4 {
    padding: var(--app-card-padding-xs) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-4xl {
    font-size: var(--app-text-3xl) !important;
    line-height: 1.08 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-3xl {
    font-size: var(--app-text-3xl) !important;
    line-height: 1.12 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-2xl {
    font-size: var(--app-text-2xl) !important;
    line-height: 1.18 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-xl {
    font-size: var(--app-text-lg) !important;
    line-height: 1.24 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-lg {
    font-size: var(--app-text-base) !important;
    line-height: 1.32 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-base {
    font-size: var(--app-text-sm) !important;
    line-height: 1.44 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-sm {
    font-size: var(--app-text-sm) !important;
    line-height: 1.45 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) .text-xs {
    font-size: var(--app-text-2xs) !important;
    line-height: 1.42 !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-height: var(--app-control-height-sm) !important;
    border-radius: var(--workspace-radius-control) !important;
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-sm) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) textarea {
    min-height: 7rem !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) input[type="file"] {
    padding-top: 0.58rem !important;
    padding-bottom: 0.58rem !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(button, a, input[type="submit"], input[type="button"]).rounded-full {
    min-height: var(--app-control-height-sm) !important;
    padding: var(--app-control-padding-sm) !important;
    font-size: var(--app-text-xs) !important;
}

body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
    .teacher-hub-main,
    .teacher-workflow-main,
    .teacher-courses-main,
    .student-content-main,
    .admin-shell-content,
    .app-dashboard-shell,
    .app-shell-main,
    main.max-w-7xl,
    main.max-w-6xl
) :is(button, a, input[type="submit"], input[type="button"]).rounded-lg {
    border-radius: var(--workspace-radius-btn) !important;
    padding: 0.56rem 0.86rem !important;
    font-size: var(--app-text-xs) !important;
}

/* ============================================================
   Project-wide palette normalization pass 3
   - remove remaining emerald/green/teal accents
   - keep warning/danger tones intact
   ============================================================ */

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) {
    --project-accent: var(--app-shell-accent, var(--color-accent, var(--app-primary, #2563eb)));
    --project-accent-alt: color-mix(in srgb, var(--project-accent) 64%, #0ea5e9 36%);
    --project-accent-soft: color-mix(in srgb, var(--project-accent) 10%, var(--app-surface, #ffffff) 90%);
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="text-emerald-"], [class*=" text-emerald-"],
    [class^="text-green-"], [class*=" text-green-"],
    [class^="text-teal-"], [class*=" text-teal-"]
) {
    color: color-mix(in srgb, var(--project-accent) 80%, var(--app-text, #0f172a) 20%) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="border-emerald-"], [class*=" border-emerald-"],
    [class^="border-green-"], [class*=" border-green-"],
    [class^="border-teal-"], [class*=" border-teal-"]
) {
    border-color: color-mix(in srgb, var(--project-accent) 36%, var(--app-border, #dbe4f0) 64%) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    div, span, article, section, p, small, strong, li, td, th, label
):is(
    [class^="bg-emerald-"], [class*=" bg-emerald-"],
    [class^="bg-green-"], [class*=" bg-green-"],
    [class^="bg-teal-"], [class*=" bg-teal-"]
) {
    background: var(--project-accent-soft) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(
    [class^="bg-emerald-"], [class*=" bg-emerald-"],
    [class^="bg-green-"], [class*=" bg-green-"],
    [class^="bg-teal-"], [class*=" bg-teal-"]
) {
    border: 1px solid color-mix(in srgb, var(--project-accent) 48%, #ffffff 52%) !important;
    background: linear-gradient(
        135deg,
        var(--project-accent),
        color-mix(in srgb, var(--project-accent) 62%, var(--project-accent-alt) 38%)
    ) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--project-accent) 55%, transparent) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    a, button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]
):is(
    [class^="bg-emerald-"], [class*=" bg-emerald-"],
    [class^="bg-green-"], [class*=" bg-green-"],
    [class^="bg-teal-"], [class*=" bg-teal-"]
):hover {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--project-accent) 88%, #ffffff 12%),
        color-mix(in srgb, var(--project-accent-alt) 72%, var(--project-accent) 28%)
    ) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-emerald-"]:focus,
body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-green-"]:focus,
body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:border-teal-"]:focus {
    border-color: color-mix(in srgb, var(--project-accent) 56%, var(--app-border, #dbe4f0) 44%) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-emerald-"]:focus,
body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-green-"]:focus,
body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select
)[class*="focus:ring-teal-"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--project-accent) 24%, transparent) !important;
}

html.dark body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="dark:text-emerald-"], [class*=" dark:text-emerald-"],
    [class^="dark:text-green-"], [class*=" dark:text-green-"],
    [class^="dark:text-teal-"], [class*=" dark:text-teal-"]
),
html[data-theme="dark"] body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="dark:text-emerald-"], [class*=" dark:text-emerald-"],
    [class^="dark:text-green-"], [class*=" dark:text-green-"],
    [class^="dark:text-teal-"], [class*=" dark:text-teal-"]
) {
    color: color-mix(in srgb, var(--project-accent) 64%, #ffffff 36%) !important;
}

html.dark body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="dark:border-emerald-"], [class*=" dark:border-emerald-"],
    [class^="dark:border-green-"], [class*=" dark:border-green-"],
    [class^="dark:border-teal-"], [class*=" dark:border-teal-"]
),
html[data-theme="dark"] body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="dark:border-emerald-"], [class*=" dark:border-emerald-"],
    [class^="dark:border-green-"], [class*=" dark:border-green-"],
    [class^="dark:border-teal-"], [class*=" dark:border-teal-"]
) {
    border-color: color-mix(in srgb, var(--project-accent) 44%, rgba(148, 163, 184, 0.28) 56%) !important;
}

html.dark body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="dark:bg-emerald-"], [class*=" dark:bg-emerald-"],
    [class^="dark:bg-green-"], [class*=" dark:bg-green-"],
    [class^="dark:bg-teal-"], [class*=" dark:bg-teal-"]
),
html[data-theme="dark"] body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    [class^="dark:bg-emerald-"], [class*=" dark:bg-emerald-"],
    [class^="dark:bg-green-"], [class*=" dark:bg-green-"],
    [class^="dark:bg-teal-"], [class*=" dark:bg-teal-"]
) {
    background: color-mix(in srgb, var(--project-accent) 20%, rgba(15, 23, 42, 0.88) 80%) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    a[class*="bg-gradient-to-r"][class*="from-indigo-"][class*="to-emerald-"],
    button[class*="bg-gradient-to-r"][class*="from-indigo-"][class*="to-emerald-"],
    a[class*="bg-gradient-to-r"][class*="from-blue-"][class*="to-emerald-"],
    button[class*="bg-gradient-to-r"][class*="from-blue-"][class*="to-emerald-"],
    a[class*="bg-gradient-to-r"][class*="from-sky-"][class*="to-emerald-"],
    button[class*="bg-gradient-to-r"][class*="from-sky-"][class*="to-emerald-"],
    a[class*="bg-gradient-to-r"][class*="from-indigo-"][class*="to-green-"],
    button[class*="bg-gradient-to-r"][class*="from-indigo-"][class*="to-green-"]
) {
    border: 1px solid color-mix(in srgb, var(--project-accent) 48%, #ffffff 52%) !important;
    background-image: linear-gradient(
        135deg,
        var(--project-accent),
        color-mix(in srgb, var(--project-accent) 60%, var(--project-accent-alt) 40%)
    ) !important;
    color: #ffffff !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    #cover-progress-bar,
    #general-progress-bar,
    #upload-progress-bar,
    #doc-upload-progress-bar,
    #drive-upload-bar,
    [id$="-progress-bar"],
    [id*="progress-bar"],
    .dash-progress__fill,
    .exam-create-upload__bar
) {
    background: linear-gradient(
        90deg,
        var(--project-accent),
        color-mix(in srgb, var(--project-accent) 56%, var(--project-accent-alt) 44%)
    ) !important;
}

body:is(
    .app-role-teacher,
    .app-role-student,
    .app-role-company,
    .app-role-admin,
    .app-role-auth,
    .app-role-web,
    .app-view,
    .app-public-page,
    .app-auth-page
) :is(
    .app-feedback--success,
    .app-status-pill--success,
    .app-status-pill--done,
    .teacher-courses-alert--success
) {
    border-color: color-mix(in srgb, var(--project-accent) 34%, var(--app-border, #dbe4f0) 66%) !important;
    background: color-mix(in srgb, var(--project-accent) 10%, var(--app-surface, #ffffff) 90%) !important;
    color: color-mix(in srgb, var(--project-accent) 78%, var(--app-text, #0f172a) 22%) !important;
}

body[data-view="teacher/referrals"] .ref-level-bar > span {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--project-accent) 86%, #2563eb 14%),
        color-mix(in srgb, var(--project-accent-alt) 78%, var(--project-accent) 22%)
    ) !important;
}

body[data-view="teacher/referrals"] .ref-money {
    color: color-mix(in srgb, var(--project-accent) 78%, var(--ref-text, #0f172a) 22%) !important;
}

/* Final pass: teacher/exams_create background hierarchy (light mode) */
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] {
    --workspace-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, #dbe4f2 82%);
    --workspace-border-strong: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 30%, #dbe4f2 70%);
    --workspace-card-bg: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    --workspace-hero-bg: linear-gradient(145deg, #f9fbff 0%, #edf4ff 100%);
    --workspace-shadow-soft: 0 12px 24px -20px rgba(30, 64, 175, 0.18);
    --workspace-shadow: 0 18px 34px -24px rgba(30, 64, 175, 0.22);
    background:
        radial-gradient(circle at 7% 8%, rgba(59, 130, 246, 0.08), transparent 40%),
        radial-gradient(circle at 93% 3%, rgba(14, 165, 233, 0.08), transparent 34%),
        linear-gradient(180deg, #f4f8ff 0%, #f7faff 50%, #f2f7ff 100%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-hero {
    border-color: var(--workspace-border-strong) !important;
    background: var(--workspace-hero-bg) !important;
    box-shadow: var(--workspace-shadow) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-hero::before {
    background:
        linear-gradient(120deg, rgba(59, 130, 246, 0.1), transparent 44%),
        radial-gradient(circle at 82% 18%, rgba(14, 165, 233, 0.12), transparent 32%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-card__kicker {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 72%, #334155 28%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    border-color: var(--workspace-border) !important;
    background: var(--workspace-card-bg) !important;
    box-shadow: var(--workspace-shadow-soft) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    .exam-create-tool-card,
    .exam-create-setting-card,
    .exam-create-reference,
    .exam-create-summary-item,
    .exam-create-preview-card__sample,
    .exam-create-compliance-item,
    .q-block
) {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, #dbe4f2 84%) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-summary-note {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, #dbe4f2 86%) !important;
    background: linear-gradient(180deg, #f8fbff, #f1f6ff) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-compliance-item {
    background: #ffffff !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-compliance-item--ok {
    background: color-mix(in srgb, #16a34a 11%, #ffffff 89%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-compliance-item__badge {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, #ecf3ff 86%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 74%, #1e293b 26%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea
) {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, #dbe4f2 78%) !important;
    background: #ffffff !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    select,
    textarea
):focus {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 48%, #c7d5ec 52%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent 84%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-type-option {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, #dbe4f2 84%) !important;
    background: linear-gradient(170deg, #f6f9ff 0%, #edf4ff 100%) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 36%, #c7d5ec 64%) !important;
    background: linear-gradient(165deg, #ebf3ff 0%, #dfeeff 100%) !important;
    box-shadow: 0 12px 24px -20px rgba(37, 99, 235, 0.24) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, #dbe4f2 76%) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%) !important;
    box-shadow: 0 16px 28px -22px rgba(37, 99, 235, 0.22) !important;
}

/* Align exam create palette + sizing with teacher dashboard */
body.app-role-teacher[data-view="teacher/exams_create"] {
    --exam-accent: var(--app-shell-accent, var(--app-primary-600));
    --exam-accent-2: color-mix(in srgb, var(--app-shell-accent, var(--app-primary-600)) 72%, #93c5fd 28%);
    --exam-card-border: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    --exam-card-bg: var(--teacher-page-soft-surface, var(--app-surface));
    --exam-card-shadow: var(--app-shadow-soft);
    --exam-radius-card: 0.95rem;
    --exam-radius-soft: 0.65rem;
    --exam-text: var(--app-text);
    --exam-text-soft: var(--app-muted);
    --exam-border: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    --exam-border-strong: var(--app-shell-border-strong, var(--app-border-strong));
    --exam-panel: var(--teacher-page-surface, var(--app-surface));
    --exam-card: var(--teacher-page-soft-surface, var(--app-surface));
    --exam-soft: var(--teacher-page-soft-surface, var(--app-surface));
    --exam-stat-base-a: var(--teacher-page-soft-surface, var(--app-surface));
    --exam-stat-base-b: var(--teacher-page-soft-surface, var(--app-surface));
    --exam-polish-accent: var(--app-shell-accent, var(--app-primary-600));
    --exam-polish-secondary: color-mix(in srgb, var(--app-shell-accent, var(--app-primary-600)) 60%, #60a5fa 40%);
    --exam-polish-success: color-mix(in srgb, #22c55e 56%, var(--app-shell-accent, var(--app-primary-600)) 44%);
    --exam-polish-line: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border)));
    --exam-polish-line-strong: var(--app-shell-border-strong, var(--app-border-strong));
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-grid {
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option {
    padding: 0.75rem 0.85rem;
    gap: 0.55rem;
    border-radius: 0.9rem;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-soft-surface, var(--app-surface)) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--teacher-page-soft-surface, var(--app-surface)) 90%),
        var(--teacher-page-soft-surface, var(--app-surface))
    ) !important;
    box-shadow: 0 14px 24px -20px rgba(15, 23, 42, 0.25);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option:hover {
    border-color: var(--app-shell-border-strong, var(--app-border-strong)) !important;
    box-shadow: 0 12px 20px -18px rgba(15, 23, 42, 0.24);
    transform: translateY(-1px);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option__top {
    gap: 0.5rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option__icon {
    width: 2.05rem;
    height: 2.05rem;
    border-radius: 0.7rem;
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, #ffffff 88%) !important;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 74%, #1f2937 26%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option__title {
    font-size: var(--app-text-sm);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option__subtitle {
    font-size: var(--app-text-xs);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option__fact {
    min-height: 1.4rem;
    padding: 0.2rem 0.55rem;
    font-size: var(--app-text-2xs);
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--teacher-page-soft-surface, var(--app-surface)) 90%) !important;
    color: var(--app-muted) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    border-radius: 1.05rem !important;
    box-shadow: var(--app-shadow-soft) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
)::before {
    opacity: 0;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero {
    padding: 1rem 1.05rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__header {
    margin-bottom: 0.65rem;
    gap: 0.75rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__heading {
    gap: 0.25rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__icon {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.75rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__title {
    font-size: var(--app-text-base);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__subtitle {
    font-size: var(--app-text-xs);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__kicker {
    letter-spacing: 0.14em;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-form-card {
    padding: 0.95rem !important;
    gap: 0.85rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-summary-card, .exam-create-actions-card) {
    padding: 0.95rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-grid {
    gap: 0.65rem;
    margin-top: 0.75rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item {
    padding: 0.75rem 0.85rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item__label {
    font-size: var(--app-text-xs);
    letter-spacing: 0.06em;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item__count {
    font-size: var(--app-text-base);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item__meta {
    font-size: var(--app-text-xs);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill {
    min-height: 1.55rem;
    padding: 0.2rem 0.55rem;
    font-size: var(--app-text-2xs);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-grid,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-settings-grid {
    gap: 0.75rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-card,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-setting-card,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-reference,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-preview-card__sample,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-compliance-item {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-soft-surface, var(--app-surface)) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-card,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-setting-card {
    padding: 0.85rem;
    gap: 0.7rem;
    border-radius: 0.9rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-card__header,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-builder__controls,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-card__inline,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-upload__meta {
    gap: 0.5rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-card__title {
    font-size: var(--app-text-sm);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-tool-card__hint {
    font-size: var(--app-text-xs);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-help-card {
    padding: 0.85rem 0.95rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-variant-tabs {
    gap: 0.4rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option {
    min-height: 7.6rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    min-height: 8rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    border-color: var(--teacher-page-soft-border, var(--app-shell-border, var(--app-border))) !important;
    background: var(--teacher-page-surface, var(--app-surface)) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-help-toggle {
    margin-bottom: 0.1rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-inline-btn[data-help-trigger] {
    min-height: 1.9rem;
    padding: 0.25rem 0.65rem;
    font-size: var(--app-text-xs);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-inline-btn--ghost {
    border-style: dashed;
    background: transparent !important;
    color: var(--app-primary-700) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-inline-btn--ghost:hover {
    background: color-mix(in srgb, var(--app-primary-600) 8%, var(--teacher-page-soft-surface, var(--app-surface)) 92%) !important;
}


/* ============================================================
   Auth premium (merged)
   ============================================================ */
body.app-auth-page {
    position: relative;
    overflow-x: hidden;
}

body.app-auth-page .auth-scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body.app-auth-page .auth-scene__orb {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    opacity: 0.65;
}

body.app-auth-page .auth-scene__orb--blue {
    top: -6rem;
    right: -4rem;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, transparent),
        transparent 70%
    );
}

body.app-auth-page .auth-scene__orb--cyan {
    bottom: -7rem;
    left: -4rem;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--app-role-secondary, #0891b2) 24%, transparent),
        transparent 70%
    );
}

body.app-auth-page .auth-scene__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 120px 120px;
    opacity: 0.2;
}

body.app-auth-page .auth-stage {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.5rem;
}

body.app-auth-page .auth-grid {
    width: min(100%, 66rem);
    display: grid;
    gap: 1.6rem;
}

body.app-auth-page .auth-card {
    background: var(--app-surface);
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: 1.6rem;
    padding: 2rem;
    box-shadow: var(--app-shadow-md);
    display: grid;
    gap: 1.4rem;
}

body.app-auth-page .auth-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}

body.app-auth-page .auth-brand {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

body.app-auth-page .auth-logo-shell {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    border: 1px solid var(--app-shell-border, var(--app-border));
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

body.app-auth-page .auth-logo-fallback {
    font-weight: 800;
    color: var(--app-shell-accent, var(--app-primary));
}

body.app-auth-page .auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body.app-auth-page .auth-title {
    margin: 0.35rem 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
    line-height: 1.12;
}

body.app-auth-page .auth-subtitle {
    margin: 0.5rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.app-auth-page .auth-theme-toggle {
    min-height: 2.2rem;
}

body.app-auth-page .auth-flash {
    border-radius: 0.9rem;
}

body.app-auth-page .auth-login-layout {
    display: grid;
    gap: 1.5rem;
}

body.app-auth-page .auth-form {
    display: grid;
    gap: 1rem;
}

body.app-auth-page .auth-field {
    display: grid;
    gap: 0.5rem;
}

body.app-auth-page .auth-field__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body.app-auth-page .auth-field__hint {
    margin: 0.2rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.app-auth-page .auth-input-shell {
    position: relative;
    display: flex;
    align-items: center;
}

body.app-auth-page .auth-input-shell__icon {
    position: absolute;
    left: 0.85rem;
    color: var(--app-muted);
    pointer-events: none;
}

body.app-auth-page .auth-input {
    width: 100%;
    padding-left: 2.7rem !important;
    padding-right: 1rem !important;
    border-radius: 0.9rem !important;
    background: var(--app-surface) !important;
}

body.app-auth-page .auth-input-shell--password .auth-input {
    padding-right: 3.6rem !important;
}

body.app-auth-page .auth-password-toggle {
    position: absolute;
    right: 0.85rem;
    background: none;
    border: none;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: var(--app-muted);
}

body.app-auth-page .auth-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: var(--app-text-xs);
}

body.app-auth-page .auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--app-muted);
}

body.app-auth-page .auth-text-link,
body.app-auth-page .auth-login-link {
    color: var(--app-link);
    text-decoration: none;
    font-weight: 600;
}

body.app-auth-page .auth-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--app-control-height-md);
    border-radius: 0.9rem;
    font-weight: 700;
}

body.app-auth-page .auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--app-muted);
    font-size: var(--app-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

body.app-auth-page .auth-divider::before,
body.app-auth-page .auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--app-border);
}

body.app-auth-page .auth-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-surface);
    border-radius: 0.9rem;
    padding: 0.7rem 1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--app-text);
}

body.app-auth-page .auth-footnote {
    text-align: center;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.app-auth-page .auth-note-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body.app-auth-page .auth-note-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface) 92%);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: var(--app-text-secondary);
}

body.app-auth-page .auth-info-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px dashed var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    padding: 0.9rem 1rem;
    border-radius: 1rem;
}

body.app-auth-page .auth-info-panel__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-surface) 84%);
    display: grid;
    place-items: center;
    color: var(--app-shell-accent, var(--app-primary));
}

body.app-auth-page .auth-info-panel__title {
    margin: 0;
    font-weight: 700;
}

body.app-auth-page .auth-info-panel__text {
    margin: 0.25rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.app-auth-page .auth-stepper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.4rem 0 0.6rem;
}

body.app-auth-page .auth-stepper__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: var(--app-muted);
}

body.app-auth-page .auth-stepper__index {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    display: grid;
    place-items: center;
    font-size: var(--app-text-2xs);
    background: var(--app-surface);
}

body.app-auth-page .auth-stepper__item.is-active {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
}

body.app-auth-page .auth-stepper__item.is-active .auth-stepper__index {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 46%, var(--app-border) 54%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
}

body.app-auth-page .auth-stepper__line {
    flex: 1;
    height: 2px;
    border-radius: 999px;
    background: var(--app-border);
}

body.app-auth-page .auth-register-layout {
    display: grid;
    gap: 1.5rem;
}

body.app-auth-page .auth-register-step,
body.app-auth-page .auth-register-column {
    display: grid;
    gap: 1rem;
}

body.app-auth-page .auth-register-panel {
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%),
        var(--app-surface)
    );
    border-radius: 1.2rem;
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
}

body.app-auth-page .auth-register-panel__step {
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body.app-auth-page .auth-register-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 70%, var(--app-muted) 30%);
}

body.app-auth-page .auth-register-panel__title {
    margin: 0.2rem 0 0;
    font-size: var(--app-text-lg);
    font-weight: 700;
}

body.app-auth-page .auth-register-panel__copy {
    margin: 0.2rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.app-auth-page .auth-choice-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

body.app-auth-page .auth-choice-card {
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: var(--app-surface);
    display: grid;
    gap: 0.45rem;
    cursor: pointer;
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast), transform var(--app-transition-fast);
}

body.app-auth-page .auth-choice-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--app-shadow-soft);
}

body.app-auth-page .auth-choice-card.is-active {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 46%, var(--app-border) 54%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
}

body.app-auth-page .auth-choice-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.app-auth-page .auth-choice-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-surface) 86%);
    display: grid;
    place-items: center;
    color: var(--app-shell-accent, var(--app-primary));
}

body.app-auth-page .auth-choice-card__title {
    font-weight: 700;
}

body.app-auth-page .auth-choice-card__text {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body.app-auth-page .auth-step-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

body.app-auth-page .auth-step-actions--top {
    justify-content: flex-start;
}

body.app-auth-page .auth-password-rules {
    border: 1px dashed var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

body.app-auth-page .auth-password-rules__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--app-text-sm);
}

body.app-auth-page .auth-password-rules ul {
    list-style: none;
    padding: 0;
    margin: 0.65rem 0 0;
    display: grid;
    gap: 0.4rem;
}

body.app-auth-page .password-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--app-text-xs);
    color: var(--app-text-secondary);
}

body.app-auth-page .password-rule-badge {
    font-size: var(--app-text-2xs);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-muted);
    font-weight: 600;
}

body.app-auth-page .auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

@media (max-width: 900px) {
    body.app-auth-page .auth-stage {
        padding: 3rem 1rem;
    }

    body.app-auth-page .auth-card {
        padding: 1.6rem;
    }
}

@media (max-width: 720px) {
    body.app-auth-page .auth-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    body.app-auth-page .auth-stepper {
        flex-direction: column;
        align-items: flex-start;
    }

    body.app-auth-page .auth-stepper__line {
        width: 100%;
    }

    body.app-auth-page .auth-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Checkout premium (merged)
   ============================================================ */
body.app-checkout-page {
    position: relative;
    overflow-x: hidden;
    --checkout-accent: var(--app-shell-accent, var(--app-primary));
    --checkout-border: color-mix(in srgb, var(--checkout-accent) 20%, var(--app-border) 80%);
    --checkout-soft: color-mix(in srgb, var(--checkout-accent) 6%, var(--app-surface) 94%);
}

body.app-checkout-page .checkout-scene {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body.app-checkout-page .checkout-scene__orb {
    position: absolute;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    opacity: 0.6;
}

body.app-checkout-page .checkout-scene__orb--blue {
    top: -7rem;
    right: -4rem;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--checkout-accent) 28%, transparent),
        transparent 70%
    );
}

body.app-checkout-page .checkout-scene__orb--cyan {
    bottom: -8rem;
    left: -4rem;
    background: radial-gradient(circle, color-mix(in srgb, #0ea5e9 22%, transparent), transparent 70%);
}

body.app-checkout-page .checkout-scene__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 140px 140px;
    opacity: 0.2;
}

body.app-checkout-page .checkout-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 74rem);
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    display: grid;
    gap: 2rem;
}

body.app-checkout-page .checkout-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

body.app-checkout-page .checkout-brand {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

body.app-checkout-page .checkout-logo-shell {
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--checkout-accent) 12%, var(--app-surface) 88%);
    border: 1px solid var(--checkout-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

body.app-checkout-page .checkout-logo-fallback {
    font-weight: 800;
    color: var(--checkout-accent);
}

body.app-checkout-page .checkout-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body.app-checkout-page .checkout-title {
    margin: 0.35rem 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(1.6rem, 2vw, 2.3rem);
    line-height: 1.1;
}

body.app-checkout-page .checkout-copy {
    margin: 0.5rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.app-checkout-page .checkout-hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

body.app-checkout-page .checkout-chip,
body.app-checkout-page .checkout-summary-chip,
body.app-checkout-page .checkout-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--checkout-border);
    background: var(--checkout-soft);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: var(--app-text-secondary);
}

body.app-checkout-page .checkout-count-chip {
    padding: 0.35rem 0.85rem;
}

body.app-checkout-page .checkout-hero__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.app-checkout-page .checkout-link-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--checkout-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    text-decoration: none;
    color: var(--app-text);
    font-weight: 600;
    background: var(--checkout-soft);
}

body.app-checkout-page .checkout-alert-stack {
    display: grid;
    gap: 0.85rem;
}

body.app-checkout-page .checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.44fr);
    gap: 1.5rem;
    align-items: start;
}

body.app-checkout-page .checkout-panel {
    border: 1px solid var(--checkout-border);
    border-radius: 1.3rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--checkout-accent) 4%, var(--app-surface) 96%),
        var(--app-surface)
    );
    padding: 1.5rem;
    box-shadow: var(--app-shadow-soft);
    display: grid;
    gap: 1rem;
}

body.app-checkout-page .checkout-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

body.app-checkout-page .checkout-panel__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body.app-checkout-page .checkout-section-copy,
body.app-checkout-page .checkout-help {
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    margin: 0.25rem 0 0;
}

body.app-checkout-page .checkout-item-list {
    display: grid;
    gap: 0.9rem;
}

body.app-checkout-page .checkout-item-card {
    border: 1px solid var(--checkout-border);
    border-radius: 1.1rem;
    background: var(--app-surface);
    padding: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
}

body.app-checkout-page .checkout-item-card__main {
    display: grid;
    gap: 0.5rem;
}

body.app-checkout-page .checkout-item-card__eyebrow {
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

body.app-checkout-page .checkout-item-card__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--app-text-base);
}

body.app-checkout-page .checkout-item-card__meta {
    margin: 0.2rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.app-checkout-page .checkout-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

body.app-checkout-page .checkout-item-card__aside {
    display: grid;
    gap: 0.5rem;
    justify-items: end;
    text-align: right;
}

body.app-checkout-page .checkout-price-stack {
    display: grid;
    gap: 0.15rem;
    font-size: var(--app-text-sm);
}

body.app-checkout-page .checkout-price-old {
    color: var(--app-muted);
    text-decoration: line-through;
    font-size: var(--app-text-xs);
}

body.app-checkout-page .checkout-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--app-danger);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--app-text-xs);
}

body.app-checkout-page .checkout-empty {
    border: 1px dashed var(--checkout-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: grid;
    gap: 0.85rem;
    text-align: center;
    color: var(--app-muted);
    background: color-mix(in srgb, var(--checkout-accent) 4%, var(--app-surface) 96%);
}

body.app-checkout-page .checkout-empty__icon {
    font-size: 2rem;
}

body.app-checkout-page .checkout-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

body.app-checkout-page .checkout-note-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

body.app-checkout-page .checkout-note-card {
    border: 1px solid var(--checkout-border);
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    background: var(--checkout-soft);
    display: grid;
    gap: 0.35rem;
}

body.app-checkout-page .checkout-summary-list {
    display: grid;
    gap: 0.6rem;
}

body.app-checkout-page .checkout-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--app-text-sm);
}

body.app-checkout-page .checkout-summary-total {
    border-top: 1px solid var(--checkout-border);
    padding-top: 1rem;
    display: grid;
    gap: 0.35rem;
}

body.app-checkout-page .checkout-summary-note {
    margin: 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.app-checkout-page .checkout-option-block {
    border: 1px solid var(--checkout-border);
    border-radius: 1rem;
    padding: 1.1rem;
    background: var(--checkout-soft);
    display: grid;
    gap: 0.85rem;
}

body.app-checkout-page .checkout-option-head {
    display: grid;
    gap: 0.25rem;
}

/* Exam create refresh */
body[data-view="teacher/exams_create"] {
    --exam-accent: var(--app-shell-accent, var(--app-primary));
    --exam-accent-2: var(--app-shell-accent, var(--app-primary));
    --exam-card-border: var(--app-shell-border, var(--app-border));
    --exam-card-bg: var(--app-panel-surface);
    --exam-card-shadow: var(--app-shadow);
    --exam-radius-card: var(--app-radius-lg);
    --exam-radius-soft: var(--app-radius-md);
}

body[data-view="teacher/exams_create"] .exam-create-hero {
    padding: 1rem 1.15rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    border-radius: var(--app-radius-xl);
    background: var(--app-panel-surface);
    box-shadow: var(--app-shadow);
}

body[data-view="teacher/exams_create"] .exam-create-hero__header {
    gap: 0.75rem;
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-hero__eyebrow {
    color: color-mix(in srgb, var(--exam-accent) 70%, var(--app-text) 30%);
}

body[data-view="teacher/exams_create"] .exam-create-card__icon {
    border-color: color-mix(in srgb, var(--exam-accent) 26%, var(--app-border) 74%);
    background: color-mix(in srgb, var(--exam-accent) 10%, var(--app-surface) 90%);
    color: var(--exam-accent);
}

body[data-view="teacher/exams_create"] .exam-create-hero__subtitle {
    margin-top: 0.35rem;
    font-size: var(--app-text-sm);
}

body[data-view="teacher/exams_create"] .exam-create-hero__title {
    overflow-wrap: anywhere;
}

body[data-view="teacher/exams_create"] .exam-create-hero__header > div {
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-hero__meta {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin-top: 0.85rem;
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-hero__meta-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.85rem;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: color-mix(in srgb, var(--exam-accent) 6%, var(--app-surface) 94%);
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-hero__meta-label {
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-hero__meta-value {
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
    overflow-wrap: anywhere;
}

body[data-view="teacher/exams_create"] .exam-create-hero__meta-sub {
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-layout,
body[data-view="teacher/exams_create"] .exam-create-side,
body[data-view="teacher/exams_create"] .exam-create-main {
    min-width: 0;
    max-width: 100%;
}

body[data-view="teacher/exams_create"] .exam-create-side > section {
    max-width: 100%;
    overflow: hidden;
}

body[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    width: 100%;
    background:
        radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--exam-accent) 18%, transparent), transparent 0 26%),
        radial-gradient(circle at 20% 78%, color-mix(in srgb, var(--exam-accent) 12%, transparent), transparent 0 22%),
        linear-gradient(135deg, color-mix(in srgb, var(--exam-accent) 12%, var(--app-surface) 88%), var(--app-surface));
}

body[data-view="teacher/exams_create"] :is(
    .exam-create-type-option,
    .exam-create-tool-card,
    .exam-create-setting-card,
    .exam-create-summary-item,
    .exam-create-compliance-item,
    .exam-create-preview-card__sample,
    .exam-create-reference,
    .exam-create-banner,
    .exam-create-help-card
) {
    background: var(--app-panel-surface) !important;
    border-color: var(--app-shell-border, var(--app-border)) !important;
    box-shadow: var(--app-shadow);
}

body[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    background: color-mix(in srgb, var(--exam-accent) 8%, var(--app-panel-surface) 92%) !important;
    border-color: color-mix(in srgb, var(--exam-accent) 40%, var(--app-border) 60%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-summary-item--done {
    border-color: color-mix(in srgb, var(--app-success) 38%, var(--app-border) 62%) !important;
    background: color-mix(in srgb, var(--app-success) 12%, var(--app-panel-surface) 88%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-compliance-item--ok {
    border-color: color-mix(in srgb, var(--app-success) 34%, var(--app-border) 66%) !important;
    background: color-mix(in srgb, var(--app-success) 10%, var(--app-panel-surface) 90%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-banner--info {
    border-color: color-mix(in srgb, var(--exam-accent) 32%, var(--app-border) 68%) !important;
    background: color-mix(in srgb, var(--exam-accent) 8%, var(--app-panel-surface) 92%) !important;
}

body[data-view="teacher/exams_create"] .exam-create-banner--error {
    border-color: color-mix(in srgb, var(--app-tone-danger, #ef4444) 34%, var(--app-border) 66%) !important;
    background: color-mix(in srgb, var(--app-tone-danger, #ef4444) 8%, var(--app-panel-surface) 92%) !important;
}

body[data-view="teacher/exams_create"] :is(.exam-create-preview-card__title,
    .exam-create-preview-card__meta,
    .exam-create-preview-card__description,
    .exam-create-preview-card__sample,
    .exam-create-help-card__meta,
    .exam-create-summary-item__meta,
    .exam-create-reference__value,
    .exam-create-banner__status--ok,
    .exam-create-banner__status--error) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

body[data-view="teacher/exams_create"] input[type="file"] {
    width: 100%;
    max-width: 100%;
}

body[data-view="teacher/exams_create"] .exam-create-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
    min-width: 0;
}

body[data-view="teacher/exams_create"] .exam-create-stepper__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--app-shell-border, var(--app-border));
    background: var(--app-panel-surface);
    font-size: var(--app-text-xs);
    font-weight: 600;
    color: var(--app-muted);
}

body[data-view="teacher/exams_create"] .exam-create-stepper__index {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    background: color-mix(in srgb, var(--exam-accent) 14%, var(--app-surface) 86%);
    color: var(--exam-accent);
}

body[data-view="teacher/exams_create"] .exam-create-stepper__item.is-active {
    border-color: color-mix(in srgb, var(--exam-accent) 40%, var(--app-border) 60%);
    color: var(--app-text);
    box-shadow: var(--app-shadow-sm);
}

body[data-view="teacher/exams_create"] .exam-create-stepper__item.is-active .exam-create-stepper__index {
    background: var(--exam-accent);
    color: #ffffff;
}

body[data-view="teacher/exams_create"] .exam-create-stepper__item.is-done {
    border-color: color-mix(in srgb, var(--app-success) 45%, var(--app-border) 55%);
    color: color-mix(in srgb, var(--app-success) 78%, var(--app-text) 22%);
}

body[data-view="teacher/exams_create"] .exam-create-stepper__item.is-done .exam-create-stepper__index {
    background: color-mix(in srgb, var(--app-success) 18%, var(--app-surface) 82%);
    color: var(--app-success);
}

@media (max-width: 640px) {
    body[data-view="teacher/exams_create"] .exam-create-hero__meta {
        grid-template-columns: 1fr;
    }
}

body.app-checkout-page .checkout-checkline {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: var(--app-text-sm);
    color: var(--app-text-secondary);
}

body.app-checkout-page .checkout-input-row {
    display: grid;
    gap: 0.6rem;
}

body.app-checkout-page .checkout-input,
body.app-checkout-page .checkout-qty-input {
    width: 100%;
    border-radius: 0.85rem !important;
}

body.app-checkout-page .checkout-qty-field {
    display: grid;
    gap: 0.4rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.app-checkout-page .checkout-method {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--checkout-border);
    border-radius: 1rem;
    padding: 0.85rem 0.95rem;
    background: var(--app-surface);
    cursor: pointer;
    transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast), transform var(--app-transition-fast);
}

body.app-checkout-page .checkout-method.is-active {
    border-color: color-mix(in srgb, var(--checkout-accent) 42%, var(--checkout-border) 58%);
    background: color-mix(in srgb, var(--checkout-accent) 6%, var(--app-surface) 94%);
    box-shadow: var(--app-shadow-soft);
}

body.app-checkout-page .checkout-method__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

body.app-checkout-page .checkout-form-actions {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

body.app-checkout-page .checkout-pay-button,
body.app-checkout-page .checkout-refresh-button,
body.app-checkout-page .checkout-secondary-button {
    min-height: var(--app-control-height-md);
    border-radius: 999px;
    font-weight: 700;
}

body.app-checkout-page .checkout-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

body.app-checkout-page .checkout-status-card,
body.app-checkout-page .checkout-inline-state {
    border: 1px solid var(--checkout-border);
    border-radius: 0.95rem;
    padding: 0.75rem 0.9rem;
    background: var(--app-surface);
    color: var(--app-text-secondary);
}

body.app-checkout-page .checkout-status-card--danger {
    border-color: color-mix(in srgb, var(--app-danger) 42%, var(--checkout-border) 58%);
    background: color-mix(in srgb, var(--app-danger) 8%, var(--app-surface) 92%);
    color: color-mix(in srgb, var(--app-danger) 78%, var(--app-text) 22%);
}

body.app-checkout-page .checkout-status-card--warning {
    border-color: color-mix(in srgb, var(--app-warning) 42%, var(--checkout-border) 58%);
    background: color-mix(in srgb, var(--app-warning) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-warning) 78%, var(--app-text) 22%);
}

body.app-checkout-page .checkout-status-card--success {
    border-color: color-mix(in srgb, var(--app-success) 42%, var(--checkout-border) 58%);
    background: color-mix(in srgb, var(--app-success) 10%, var(--app-surface) 90%);
    color: color-mix(in srgb, var(--app-success) 78%, var(--app-text) 22%);
}

body.app-checkout-page .checkout-status-line {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
}

@media (max-width: 980px) {
    body.app-checkout-page .checkout-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body.app-checkout-page .checkout-shell {
        padding: 2.4rem 1rem 3rem;
    }

    body.app-checkout-page .checkout-item-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    body.app-checkout-page .checkout-item-card__aside {
        justify-items: start;
        text-align: left;
    }
}

/* Checkout premium refresh */
body.app-checkout-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--checkout-accent) 12%, transparent), transparent 26rem),
        linear-gradient(180deg, color-mix(in srgb, var(--checkout-accent) 4%, var(--app-bg) 96%), var(--app-bg));
}

body.app-checkout-page .checkout-shell {
    width: min(100%, 80rem);
    padding: clamp(2rem, 3vw, 3.25rem) 1.25rem 4rem;
    gap: 1.5rem;
}

body.app-checkout-page .checkout-hero {
    padding: 1.35rem 1.5rem;
    border: 1px solid color-mix(in srgb, var(--checkout-accent) 24%, var(--app-border) 76%);
    border-radius: 1.55rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--checkout-accent) 12%, transparent), transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--checkout-accent) 7%, var(--app-surface) 93%), var(--app-surface));
    box-shadow: 0 24px 50px -40px rgba(15, 23, 42, 0.35);
}

body.app-checkout-page .checkout-hero > div {
    min-width: 0;
    flex: 1 1 38rem;
}

body.app-checkout-page .checkout-brand > div {
    min-width: 0;
}

body.app-checkout-page .checkout-logo-shell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.app-checkout-page .checkout-copy {
    max-width: 48rem;
    line-height: 1.55;
}

body.app-checkout-page .checkout-hero__actions {
    align-self: flex-start;
}

body.app-checkout-page :is(
    .checkout-chip,
    .checkout-summary-chip,
    .checkout-count-chip,
    .checkout-panel__eyebrow,
    .checkout-item-card__eyebrow,
    .checkout-link-button,
    .checkout-status-line,
    .checkout-method__title
) svg,
body.app-checkout-page .checkout-theme-toggle [data-theme-label] svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

body.app-checkout-page .checkout-link-button,
body.app-checkout-page .checkout-theme-toggle {
    min-height: 2.9rem;
}

body.app-checkout-page .checkout-theme-toggle {
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
    flex: 0 0 auto;
}

body.app-checkout-page .checkout-main-column,
body.app-checkout-page .checkout-sidebar {
    display: grid;
    gap: 1.25rem;
    min-width: 0;
    align-content: start;
}

body.app-checkout-page .checkout-grid {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 23rem);
    gap: 1.25rem;
}

body.app-checkout-page .checkout-panel {
    border-radius: 1.4rem;
    gap: 1.15rem;
    box-shadow: 0 18px 38px -30px rgba(15, 23, 42, 0.34);
}

body.app-checkout-page .checkout-panel h2,
body.app-checkout-page .checkout-option-head h3 {
    margin: 0;
    font-family: var(--app-font-section);
    line-height: 1.15;
    color: var(--app-text);
}

body.app-checkout-page .checkout-panel h2 {
    font-size: clamp(1.2rem, 1.4vw, 1.5rem);
}

body.app-checkout-page .checkout-option-head h3 {
    font-size: 1rem;
}

body.app-checkout-page .checkout-section-copy,
body.app-checkout-page .checkout-help,
body.app-checkout-page .checkout-note-card p,
body.app-checkout-page .checkout-status-card p,
body.app-checkout-page .checkout-alert p {
    margin: 0;
}

body.app-checkout-page .checkout-item-card {
    padding: 1.15rem 1.2rem;
    gap: 1.15rem;
    transition: transform var(--app-transition-fast), border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

body.app-checkout-page .checkout-item-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--checkout-accent) 36%, var(--checkout-border) 64%);
    box-shadow: 0 18px 34px -30px rgba(15, 23, 42, 0.38);
}

body.app-checkout-page .checkout-item-card__main > div {
    min-width: 0;
}

body.app-checkout-page .checkout-item-card__title {
    overflow-wrap: anywhere;
}

body.app-checkout-page .checkout-item-card__aside {
    min-width: 9rem;
}

body.app-checkout-page .checkout-price-stack strong,
body.app-checkout-page .checkout-summary-row strong,
body.app-checkout-page .checkout-summary-total strong {
    font-family: var(--app-font-numeric);
    letter-spacing: -0.02em;
}

body.app-checkout-page .checkout-price-stack strong {
    font-size: 1.15rem;
}

body.app-checkout-page .checkout-summary-card {
    position: sticky;
    top: 1.25rem;
}

body.app-checkout-page .checkout-summary-total {
    gap: 0.45rem;
}

body.app-checkout-page .checkout-summary-total strong {
    font-size: clamp(1.6rem, 2vw, 2rem);
}

body.app-checkout-page .checkout-summary-card .checkout-button-row {
    padding-top: 0.25rem;
    border-top: 1px solid var(--checkout-border);
}

body.app-checkout-page .checkout-note-list {
    gap: 0.9rem;
}

body.app-checkout-page .checkout-note-card {
    min-height: 100%;
    padding: 1rem 1.1rem;
}

body.app-checkout-page .checkout-note-card strong {
    font-family: var(--app-font-section);
}

body.app-checkout-page .checkout-form-panel {
    gap: 1.2rem;
}

body.app-checkout-page .checkout-form-panel [data-checkout-feedback] {
    display: grid;
    gap: 0.75rem;
}

body.app-checkout-page .checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

body.app-checkout-page .checkout-form-grid > .checkout-option-block {
    grid-column: span 6;
    min-width: 0;
}

body.app-checkout-page .checkout-form-grid > .checkout-option-block:not(.checkout-option-block--wide):first-child:nth-last-child(2) {
    grid-column: 1 / -1;
}

body.app-checkout-page .checkout-form-grid > .checkout-option-block--wide {
    grid-column: 1 / -1;
}

body.app-checkout-page .checkout-option-block {
    padding: 1.15rem;
    border-radius: 1.15rem;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--checkout-accent) 7%, var(--app-surface) 93%), var(--app-surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body.app-checkout-page .checkout-option-head {
    gap: 0.35rem;
}

body.app-checkout-page .checkout-option-list,
body.app-checkout-page .checkout-input-row {
    display: grid;
    gap: 0.75rem;
}

body.app-checkout-page .checkout-checkline {
    line-height: 1.5;
}

body.app-checkout-page .checkout-checkline input {
    margin-top: 0.2rem;
}

body.app-checkout-page .checkout-input,
body.app-checkout-page .checkout-qty-input {
    min-height: 3rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--checkout-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: none;
}

body.app-checkout-page :is(.checkout-input, .checkout-qty-input):focus {
    outline: none;
    border-color: color-mix(in srgb, var(--checkout-accent) 48%, var(--checkout-border) 52%);
    box-shadow: var(--app-focus-ring);
}

body.app-checkout-page .checkout-method {
    padding: 1rem 1.05rem;
}

body.app-checkout-page .checkout-method p {
    margin: 0.25rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.app-checkout-page .checkout-form-actions {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    padding-top: 0.15rem;
}

body.app-checkout-page .checkout-form-actions :is(.checkout-pay-button, .checkout-refresh-button),
body.app-checkout-page .checkout-form-panel .checkout-button-row .checkout-secondary-button,
body.app-checkout-page .checkout-fedapay-panel .checkout-pay-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

body.app-checkout-page .checkout-remove {
    transition: color var(--app-transition-fast), transform var(--app-transition-fast);
}

body.app-checkout-page .checkout-remove:hover {
    color: color-mix(in srgb, var(--app-danger) 86%, var(--app-text) 14%);
    transform: translateX(1px);
}

@media (max-width: 1080px) {
    body.app-checkout-page .checkout-grid {
        grid-template-columns: 1fr;
    }

    body.app-checkout-page .checkout-summary-card {
        position: static;
    }
}

@media (max-width: 760px) {
    body.app-checkout-page .checkout-hero {
        padding: 1.15rem;
    }

    body.app-checkout-page .checkout-form-grid {
        grid-template-columns: 1fr;
    }

    body.app-checkout-page .checkout-form-grid > .checkout-option-block {
        grid-column: auto;
    }

    body.app-checkout-page .checkout-form-actions {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Web course reading (merged)
   ============================================================ */
body.course-reading-page {
    --course-accent: var(--app-primary-600);
    --course-border: color-mix(in srgb, var(--course-accent) 18%, var(--app-border) 82%);
    --course-soft: color-mix(in srgb, var(--course-accent) 6%, var(--app-surface) 94%);
    --course-title: var(--app-text);
    --course-text-soft: var(--app-text-secondary);
    background: color-mix(in srgb, var(--course-accent) 6%, var(--app-bg) 94%) !important;
    color: var(--app-text);
    font-family: var(--app-font-body);
}

body.course-reading-page .course-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--app-surface);
    border-bottom: 1px solid var(--course-border);
    backdrop-filter: blur(12px);
}

body.course-reading-page .course-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
}

body.course-reading-page .course-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 1rem;
}

body.course-reading-page .course-page {
    padding: 1.25rem 0 2rem;
}

body.course-reading-page .course-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

body.course-reading-page .course-brand__logo {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--course-accent) 12%, var(--app-surface) 88%);
    border: 1px solid var(--course-border);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex: 0 0 auto;
}

body.course-reading-page .course-brand__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

body.course-reading-page .course-brand__subtitle {
    margin: 0.1rem 0 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
}

body.course-reading-page .course-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--course-border);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    text-decoration: none;
    color: var(--app-text);
    font-weight: 600;
    font-size: var(--app-text-xs);
    background: var(--course-soft);
}

body.course-reading-page .course-layout {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

body.course-reading-page .course-sticky {
    position: sticky;
    top: calc(var(--app-toolbar-height) + 1rem);
    align-self: start;
}

body.course-reading-page .course-card,
body.course-reading-page .course-list-card,
body.course-reading-page .course-note-card,
body.course-reading-page .course-price-card,
body.course-reading-page .course-queue-card,
body.course-reading-page .course-share-card,
body.course-reading-page .course-rating-card {
    border: 1px solid var(--course-border);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
    overflow: hidden;
}

body.course-reading-page .course-card__body {
    padding: 0.9rem;
    display: grid;
    gap: 0.75rem;
}

body.course-reading-page .course-sidebar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-sidebar__cover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--course-soft);
}

body.course-reading-page .course-sidebar__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.course-reading-page .course-sidebar__placeholder {
    display: grid;
    place-items: center;
    padding: 1rem;
    text-align: center;
    color: var(--app-muted);
    min-height: 100%;
}

body.course-reading-page .course-sidebar__title {
    margin: 0;
    font-size: var(--app-text-lg);
}

body.course-reading-page .course-sidebar__meta {
    margin: 0.35rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.course-reading-page .course-tag,
body.course-reading-page .course-chip,
body.course-reading-page .course-count-badge,
body.course-reading-page .course-progress-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--course-border);
    background: var(--course-soft);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    color: var(--app-text-secondary);
}

body.course-reading-page .course-tag--accent,
body.course-reading-page .course-chip--accent {
    border-color: color-mix(in srgb, var(--course-accent) 45%, var(--course-border) 55%);
    background: color-mix(in srgb, var(--course-accent) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--course-accent) 78%, var(--app-text) 22%);
}

body.course-reading-page .course-stats-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.course-reading-page .course-stat {
    border: 1px solid var(--course-border);
    border-radius: 0.75rem;
    background: var(--course-soft);
    padding: 0.62rem 0.68rem;
    display: grid;
    gap: 0.35rem;
}

body.course-reading-page .course-stat__head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

body.course-reading-page .course-stat__value {
    margin: 0;
    font-size: var(--app-text-base);
    font-weight: 700;
}

body.course-reading-page .course-progress-card {
    display: grid;
    gap: 0.75rem;
}

body.course-reading-page .course-bar {
    height: 0.6rem;
    border-radius: 999px;
    background: var(--app-border);
    overflow: hidden;
}

body.course-reading-page .course-bar__fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--course-accent), color-mix(in srgb, var(--course-accent) 68%, #1d4ed8 32%));
}

body.course-reading-page .course-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-section-label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

body.course-reading-page .course-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--course-border);
    background: color-mix(in srgb, var(--course-accent) 12%, var(--app-surface) 88%);
    display: grid;
    place-items: center;
    color: var(--course-accent);
}

body.course-reading-page .course-kicker {
    margin: 0;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted);
}

body.course-reading-page .course-title {
    margin: 0.15rem 0 0;
    font-size: var(--app-text-base);
    font-weight: 700;
}

body.course-reading-page .course-text,
body.course-reading-page .course-text-soft {
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.course-reading-page .course-items {
    display: grid;
    gap: 0.75rem;
}

body.course-reading-page .course-item {
    border: 1px solid var(--course-border);
    border-radius: 0.85rem;
    background: var(--app-surface);
    padding: 0.72rem;
    display: grid;
    gap: 0.5rem;
}

body.course-reading-page .course-item__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-item__title {
    margin: 0;
    font-weight: 700;
}

body.course-reading-page .course-item__meta {
    margin: 0.2rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.course-reading-page .course-chip-row,
body.course-reading-page .course-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

body.course-reading-page .course-note-box {
    border: 1px dashed var(--course-border);
    border-radius: 0.8rem;
    padding: 0.62rem 0.72rem;
    background: var(--course-soft);
    color: var(--app-text-secondary);
    font-size: var(--app-text-sm);
}

body.course-reading-page .course-empty,
body.course-reading-page .course-list__empty {
    border: 1px dashed var(--course-border);
    border-radius: 0.8rem;
    padding: 0.7rem;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.course-reading-page .course-primary-btn,
body.course-reading-page .course-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: var(--app-text-xs);
}

body.course-reading-page .course-primary-btn {
    border-color: var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-button-primary-shadow);
}

body.course-reading-page .course-secondary-btn {
    border-color: var(--app-button-border);
    background: var(--app-button-bg);
    color: var(--app-button-text-strong);
}

body.course-reading-page .course-btn--sm {
    min-height: var(--app-control-height-sm);
    padding: 0.36rem 0.72rem;
    font-size: var(--app-text-xs);
}

body.course-reading-page .course-btn--danger {
    border-color: var(--app-button-danger-border);
    background: var(--app-button-danger-bg);
    color: var(--app-button-danger-text);
}

body.course-reading-page .course-duo,
body.course-reading-page .course-story-grid,
body.course-reading-page .course-hero-grid,
body.course-reading-page .course-player-grid,
body.course-reading-page .course-metric-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

body.course-reading-page .course-player-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr);
}

body.course-reading-page .course-video-shell {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 0.85rem;
    overflow: hidden;
    background: #0f172a;
}

body.course-reading-page .course-video-shell :is(iframe, video) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

body.course-reading-page .course-player-overlay {
    position: absolute;
    inset: 0;
 z-index: 2;
    background: transparent;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

body.course-reading-page .course-review-list {
    display: grid;
    gap: 0.8rem;
}

body.course-reading-page .course-review {
    border: 1px solid var(--course-border);
    border-radius: 0.85rem;
    background: var(--app-surface);
    padding: 0.72rem;
}

body.course-reading-page .course-review__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body.course-reading-page .course-review__title {
    margin: 0;
    font-weight: 700;
}

body.course-reading-page .course-review__comment {
    margin: 0.35rem 0 0;
    color: var(--app-text-secondary);
}

body.course-reading-page .course-review__date {
    margin: 0.35rem 0 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.course-reading-page .course-teacher__avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    border: 1px solid var(--course-border);
    background: color-mix(in srgb, var(--course-accent) 12%, var(--app-surface) 88%);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--course-accent);
}

body.course-reading-page .course-teacher__chips {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

body.course-reading-page .course-mini-card {
    border: 1px solid var(--course-border);
    border-radius: 0.9rem;
    padding: 0.75rem;
    background: var(--course-soft);
    display: grid;
    gap: 0.35rem;
}

body.course-reading-page .course-mini__head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
}

body.course-reading-page .course-mini__value {
    font-weight: 700;
}

body.course-reading-page .course-share-panel {
    display: grid;
    gap: 0.6rem;
}

body.course-reading-page .course-share-url {
    word-break: break-all;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

body.course-reading-page .course-field-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

body.course-reading-page .course-field__label {
    display: block;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
    margin-bottom: 0.3rem;
}

body.course-reading-page .course-input,
body.course-reading-page .course-range {
    width: 100%;
}

body.course-reading-page .course-main {
    min-width: 0;
    display: grid;
    gap: 0.75rem;
}

body.course-reading-page .course-flash-stack {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

body.course-reading-page .course-display {
    font-family: var(--app-font-display, var(--app-font-body));
    letter-spacing: 0.01em;
}

body.course-reading-page .course-topbar-theme {
    width: 2.1rem;
    height: 1.9rem;
    padding: 0;
}

body.course-reading-page .course-sidebar__content {
    display: grid;
    gap: 1rem;
}

body.course-reading-page .course-inline-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-stat__icon {
    width: 1rem;
    height: 1rem;
    color: color-mix(in srgb, var(--course-accent) 78%, var(--app-text) 22%);
}

body.course-reading-page .course-stat__label {
    margin: 0;
}

body.course-reading-page .course-card--hero {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--course-accent) 6%, var(--app-surface) 94%), var(--app-surface));
}

body.course-reading-page :is(.course-list-card, .course-note-card, .course-price-card, .course-queue-card, .course-share-card, .course-rating-card, .course-metric) {
    padding: 0.8rem;
}

body.course-reading-page .course-price__value {
    margin: 0.12rem 0 0;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    font-weight: 800;
    color: color-mix(in srgb, var(--course-accent) 78%, var(--app-text) 22%);
}

body.course-reading-page .course-price__base {
    text-decoration: line-through;
    color: var(--app-muted);
}

body.course-reading-page .course-list {
    list-style: none;
    margin: 0.7rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

body.course-reading-page .course-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--app-text-secondary);
    font-size: var(--app-text-sm);
}

body.course-reading-page .course-list__bullet {
    width: 1rem;
    height: 1rem;
    color: color-mix(in srgb, var(--course-accent) 82%, var(--app-text) 18%);
    margin-top: 0.08rem;
    flex: 0 0 auto;
}

body.course-reading-page .course-metric {
    border: 1px solid var(--course-border);
    border-radius: 0.85rem;
    background: var(--app-surface);
}

body.course-reading-page .course-player-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

body.course-reading-page .course-block {
    border: 1px solid var(--course-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--course-soft) 58%, var(--app-surface) 42%);
}

body.course-reading-page .course-toolbar {
    display: grid;
    gap: 0.6rem;
}

body.course-reading-page .course-toolbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-toolbar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding-top: 0.2rem;
}

body.course-reading-page .course-queue__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

body.course-reading-page .queue-item {
    width: 100%;
    border: 1px solid var(--course-border);
    border-radius: 0.8rem;
    background: var(--app-surface);
    padding: 0.58rem 0.68rem;
    text-align: left;
    color: inherit;
    transition: border-color 140ms ease, background-color 140ms ease;
}

body.course-reading-page .queue-item:hover {
    border-color: color-mix(in srgb, var(--course-accent) 56%, var(--course-border) 44%);
}

body.course-reading-page .queue-item.active {
    border-color: color-mix(in srgb, var(--course-accent) 62%, var(--course-border) 38%);
    background: color-mix(in srgb, var(--course-accent) 8%, var(--app-surface) 92%);
}

body.course-reading-page .course-chapter {
    border: 1px solid var(--course-border);
    border-radius: 0.85rem;
    background: var(--app-surface);
    padding: 0.7rem;
}

body.course-reading-page .course-chapter[open] {
    border-color: color-mix(in srgb, var(--course-accent) 50%, var(--course-border) 50%);
    background: color-mix(in srgb, var(--course-accent) 4%, var(--app-surface) 96%);
}

body.course-reading-page .course-chapter > summary {
    cursor: pointer;
    list-style: none;
}

body.course-reading-page .course-chapter > summary::-webkit-details-marker {
    display: none;
}

body.course-reading-page .course-chapter__summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body.course-reading-page .course-chapter__lead {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
}

body.course-reading-page .course-chapter__number {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--course-border);
    background: var(--course-soft);
    display: grid;
    place-items: center;
    font-size: var(--app-text-xs);
    font-weight: 700;
    color: color-mix(in srgb, var(--course-accent) 76%, var(--app-text) 24%);
    flex: 0 0 auto;
}

body.course-reading-page .course-chapter__title {
    margin: 0;
    font-weight: 700;
    font-size: var(--app-text-base);
    color: var(--course-title);
}

body.course-reading-page .course-chapter__desc {
    margin: 0.3rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.course-reading-page .course-field {
    display: grid;
    gap: 0.26rem;
}

body.course-reading-page :is(.course-input, .course-field input, .course-field select, .course-field textarea, #rating-select, #rating-comment, #lesson-notes) {
    border: 1px solid var(--course-border);
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--course-soft) 56%, var(--app-surface) 44%);
    color: var(--app-text);
    padding: 0.46rem 0.62rem;
    font: inherit;
}

body.course-reading-page :is(.course-input, .course-field input, .course-field select, .course-field textarea, #rating-select, #rating-comment, #lesson-notes):focus {
    outline: none;
    border-color: color-mix(in srgb, var(--course-accent) 62%, var(--course-border) 38%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-accent) 18%, transparent);
}

body.course-reading-page :is(#rating-comment, #lesson-notes, .course-field textarea) {
    min-height: 5.8rem;
    resize: vertical;
}

body.course-reading-page .course-range {
    accent-color: var(--course-accent);
}

body.course-reading-page .speed-chip.app-segmented-link--active {
    border-color: color-mix(in srgb, var(--course-accent) 62%, var(--course-border) 38%);
    background: color-mix(in srgb, var(--course-accent) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--course-accent) 82%, var(--app-text) 18%);
}

body.course-reading-page .course-teacher__head {
    margin-bottom: 0.4rem;
}

body.course-reading-page .course-teacher__meta {
    margin: 0.28rem 0 0;
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

body.course-reading-page .course-mini__icon {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--course-accent);
}

body.course-reading-page .course-mini__label {
    margin: 0;
}

@media (min-width: 1280px) {
    body.course-reading-page .course-layout {
        grid-template-columns: minmax(0, 255px) minmax(0, 1fr);
    }

    body.course-reading-page .course-player-grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.38fr);
    }
}

@media (max-width: 1024px) {
    body.course-reading-page .course-layout {
        grid-template-columns: 1fr;
    }

    body.course-reading-page .course-sticky {
        position: static;
    }

    body.course-reading-page .course-player-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body.course-reading-page .course-topbar__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    body.course-reading-page .course-shell {
        padding: 0 1rem;
    }

    body.course-reading-page .course-card__body {
        padding: 1rem;
    }

    body.course-reading-page :is(.course-list-card, .course-note-card, .course-price-card, .course-queue-card, .course-share-card, .course-rating-card, .course-metric) {
        padding: 0.85rem;
    }

    body.course-reading-page .course-toolbar__row {
        align-items: stretch;
    }

    body.course-reading-page .course-inline-actions {
        width: 100%;
    }

    body.course-reading-page .course-inline-actions :is(.course-input, .course-secondary-btn, .course-primary-btn) {
        width: 100%;
    }

    body.course-reading-page .course-chapter {
        padding: 0.72rem;
    }
}

/* === Marketing (Home/Catalogue) === */
:root {
  --mk-bg: #f6f1e8;
  --mk-surface: #ffffff;
  --mk-ink: #1f1b16;
  --mk-muted: #5f584f;
  --mk-accent: #c2562e;
  --mk-accent-dark: #9c4424;
  --mk-accent-soft: rgba(194, 86, 46, 0.12);
  --mk-teal: #1c7a7b;
  --mk-teal-soft: rgba(28, 122, 123, 0.12);
  --mk-border: rgba(31, 27, 22, 0.12);
  --mk-border-strong: rgba(31, 27, 22, 0.2);
  --mk-shadow: 0 24px 60px rgba(31, 27, 22, 0.12);
  --mk-radius: 22px;
  --mk-font-display: "Fraunces", "Georgia", serif;
  --mk-font-body: "Manrope", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body.mk-body {
  margin: 0;
  font-family: var(--mk-font-body);
  color: var(--mk-ink);
  background: var(--mk-bg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body.mk-body::before,
body.mk-body::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(194, 86, 46, 0.16), transparent 65%);
  filter: blur(0px);
  z-index: 0;
}

body.mk-body::before {
  top: -220px;
  right: -160px;
}

body.mk-body::after {
  bottom: -260px;
  left: -140px;
  background: radial-gradient(circle at center, rgba(28, 122, 123, 0.18), transparent 65%);
}

.mk-shell {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.mk-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: rgba(246, 241, 232, 0.85);
  border-bottom: 1px solid rgba(31, 27, 22, 0.06);
}

.mk-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  gap: 24px;
}

.mk-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.mk-logo {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mk-accent-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mk-brand-name {
  font-family: var(--mk-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.1;
}

.mk-brand-sub {
  font-size: 0.85rem;
  color: var(--mk-muted);
}

.mk-nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.mk-nav-link {
  text-decoration: none;
  color: var(--mk-ink);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.mk-nav-link:hover {
  border-color: var(--mk-accent);
}

.mk-nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.mk-btn:hover {
  transform: translateY(-1px);
}

.mk-btn-primary {
  background: var(--mk-accent);
  color: #fff;
  box-shadow: 0 16px 30px rgba(194, 86, 46, 0.24);
}

.mk-btn-primary:hover {
  background: var(--mk-accent-dark);
}

.mk-btn-outline {
  background: transparent;
  color: var(--mk-ink);
  border-color: var(--mk-border-strong);
}

.mk-btn-ghost {
  background: rgba(31, 27, 22, 0.05);
  color: var(--mk-ink);
}

.mk-hero {
  padding: 80px 0 64px;
}

.mk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}

.mk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--mk-teal-soft);
  color: var(--mk-teal);
}

.mk-hero-title {
  font-family: var(--mk-font-display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  margin: 18px 0 14px;
  line-height: 1.05;
}

.mk-hero-desc {
  font-size: 1.02rem;
  color: var(--mk-muted);
  margin: 0 0 24px;
  max-width: 52ch;
}

.mk-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mk-hero-card {
  background: var(--mk-surface);
  border-radius: var(--mk-radius);
  border: 1px solid var(--mk-border);
  padding: 26px;
  box-shadow: var(--mk-shadow);
  display: grid;
  gap: 18px;
}

.mk-hero-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.mk-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.mk-stat {
  background: rgba(31, 27, 22, 0.04);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 4px;
}

.mk-stat span {
  font-size: 0.8rem;
  color: var(--mk-muted);
}

.mk-stat strong {
  font-size: 1.1rem;
}

.mk-section {
  padding: 54px 0;
}

.mk-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.mk-section-title {
  font-family: var(--mk-font-display);
  font-size: 2rem;
  margin: 0;
}

.mk-section-desc {
  color: var(--mk-muted);
  margin: 6px 0 0;
  max-width: 52ch;
}

.mk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  background: rgba(31, 27, 22, 0.06);
}

.mk-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mk-course-card {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding-bottom: 16px;
  box-shadow: 0 12px 26px rgba(31, 27, 22, 0.08);
}

.mk-course-cover {
  position: relative;
  padding-top: 58%;
  background: linear-gradient(120deg, rgba(194, 86, 46, 0.18), rgba(28, 122, 123, 0.2));
}

.mk-course-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mk-course-body {
  padding: 0 16px;
  display: grid;
  gap: 10px;
}

.mk-course-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.mk-course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--mk-muted);
}

.mk-course-price {
  font-weight: 700;
  color: var(--mk-ink);
}

.mk-path-card,
.mk-testimonial,
.mk-step {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: 18px;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.mk-path-card h3,
.mk-testimonial h3 {
  margin: 0;
  font-size: 1.05rem;
}

.mk-highlight {
  background: linear-gradient(130deg, rgba(194, 86, 46, 0.14), rgba(28, 122, 123, 0.14));
  border-radius: 20px;
  padding: 28px;
  border: 1px solid var(--mk-border);
}

.mk-footer {
  padding: 48px 0 60px;
  border-top: 1px solid rgba(31, 27, 22, 0.08);
  background: rgba(255, 255, 255, 0.65);
  margin-top: 40px;
}

.mk-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.mk-footer a {
  color: var(--mk-muted);
  text-decoration: none;
}

.mk-footer a:hover {
  color: var(--mk-ink);
}

.mk-anim {
  opacity: 0;
  transform: translateY(12px);
  animation: mk-rise 0.8s ease forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes mk-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mk-divider {
  height: 1px;
  background: rgba(31, 27, 22, 0.08);
  margin: 18px 0;
}

/* Catalogue page */
.mk-catalogue-hero {
  padding: 56px 0 32px;
}

.mk-search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: 999px;
  padding: 12px 16px;
  align-items: center;
  box-shadow: var(--mk-shadow);
}

.mk-search input {
  border: none;
  outline: none;
  font-size: 0.95rem;
  flex: 1;
  background: transparent;
}

.mk-filter-panel {
  background: var(--mk-surface);
  border: 1px solid var(--mk-border);
  border-radius: 20px;
  padding: 18px;
  display: grid;
  gap: 14px;
  position: sticky;
  top: 100px;
}

.mk-filter-panel label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mk-muted);
}

.mk-filter-panel select,
.mk-filter-panel input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--mk-border);
  padding: 10px 12px;
  font-size: 0.9rem;
  background: #fff;
}

.mk-catalogue-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.mk-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.mk-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.mk-sort-row select {
  border-radius: 12px;
  border: 1px solid var(--mk-border);
  padding: 10px 12px;
  font-size: 0.9rem;
  background: #fff;
}

.mk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 27, 22, 0.08);
  font-size: 0.78rem;
  font-weight: 700;
}

.mk-empty {
  padding: 28px;
  border-radius: 18px;
  border: 1px dashed var(--mk-border-strong);
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 980px) {
  .mk-hero-grid {
    grid-template-columns: 1fr;
  }

  .mk-catalogue-layout {
    grid-template-columns: 1fr;
  }

  .mk-filter-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .mk-nav-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .mk-nav-links {
    width: 100%;
    justify-content: space-between;
  }

  .mk-hero {
    padding: 60px 0 40px;
  }

  .mk-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* === Teacher Statistics (stats-*) === */
body[data-view="teacher/statistics"] {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 42%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 38%),
        linear-gradient(180deg, #0a1426 0%, #0b1425 52%, #091221 100%);
}

body[data-view="teacher/statistics"] .stats-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

body[data-view="teacher/statistics"] .stats-orb {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    filter: blur(0px);
    opacity: 0.65;
}

body[data-view="teacher/statistics"] .stats-orb--one {
    top: -140px;
    right: -180px;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.28), transparent 68%);
}

body[data-view="teacher/statistics"] .stats-orb--two {
    bottom: -160px;
    left: -200px;
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.24), transparent 70%);
}

body[data-view="teacher/statistics"] .stats-orb--three {
    top: 40%;
    left: 55%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.2), transparent 70%);
}

body[data-view="teacher/statistics"] .stats-bg__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(59, 130, 246, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.12) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.3;
}

body[data-view="teacher/statistics"] .stats-shell {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 1.5rem;
}

body[data-view="teacher/statistics"] .stats-card {
    border: 1px solid var(--app-shell-border, rgba(148, 163, 184, 0.28));
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(10, 18, 33, 0.96));
    border-radius: 24px;
    padding: 1.4rem;
    box-shadow: 0 26px 40px -32px rgba(2, 6, 23, 0.8);
}

body[data-view="teacher/statistics"] .stats-hero {
    position: relative;
    overflow: hidden;
}

body[data-view="teacher/statistics"] .stats-hero__head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

body[data-view="teacher/statistics"] .stats-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.7);
    margin-bottom: 0.4rem;
}

body[data-view="teacher/statistics"] .stats-title {
    font-size: clamp(1.4rem, 2.2vw, 2.1rem);
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-subtitle {
    margin: 0;
    color: rgba(226, 232, 240, 0.75);
    max-width: 60ch;
}

body[data-view="teacher/statistics"] .stats-hero__chips,
body[data-view="teacher/statistics"] .stats-teacher-chart__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

body[data-view="teacher/statistics"] .stats-chip,
body[data-view="teacher/statistics"] .stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.6);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 600;
}

body[data-view="teacher/statistics"] .stats-hero__grid {
    margin-top: 1.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 1.4rem;
    align-items: start;
}

body[data-view="teacher/statistics"] .stats-hero__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.75rem;
}

body[data-view="teacher/statistics"] .stats-kpi {
    background: rgba(12, 20, 36, 0.92);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 18px;
    padding: 0.9rem;
    display: grid;
    gap: 0.35rem;
    position: relative;
}

body[data-view="teacher/statistics"] .stats-kpi__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(226, 232, 240, 0.7);
}

body[data-view="teacher/statistics"] .stats-kpi__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-kpi__meta {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.65);
}

body[data-view="teacher/statistics"] .stats-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.7);
}

body[data-view="teacher/statistics"] .stats-badge--info {
    border-color: rgba(59, 130, 246, 0.5);
    color: #dbeafe;
    background: rgba(37, 99, 235, 0.2);
}

body[data-view="teacher/statistics"] .stats-badge--warning {
    border-color: rgba(251, 191, 36, 0.5);
    color: #fde68a;
    background: rgba(251, 191, 36, 0.15);
}

body[data-view="teacher/statistics"] .stats-badge--corner {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

body[data-view="teacher/statistics"] .stats-goal {
    background: rgba(12, 20, 36, 0.92);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
}

body[data-view="teacher/statistics"] .stats-goal__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

body[data-view="teacher/statistics"] .stats-goal__label {
    font-size: 0.8rem;
    color: rgba(226, 232, 240, 0.7);
}

body[data-view="teacher/statistics"] .stats-goal__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0.25rem 0;
}

body[data-view="teacher/statistics"] .stats-goal__meta {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.65);
}

body[data-view="teacher/statistics"] .stats-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

body[data-view="teacher/statistics"] .stats-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #38bdf8);
}

body[data-view="teacher/statistics"] .stats-progress em {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 14px;
    background: #facc15;
    opacity: 0.85;
}

body[data-view="teacher/statistics"] .stats-goal__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
}

body[data-view="teacher/statistics"] .stats-goal__foot p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.6);
}

body[data-view="teacher/statistics"] .stats-goal__foot strong {
    color: #f8fafc;
    font-size: 0.9rem;
}

body[data-view="teacher/statistics"] .stats-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

body[data-view="teacher/statistics"] .stats-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.7);
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
}

body[data-view="teacher/statistics"] .stats-btn--primary {
    background: #2563eb;
    border-color: rgba(59, 130, 246, 0.6);
    color: #ffffff;
}

body[data-view="teacher/statistics"] .stats-filter__intro,
body[data-view="teacher/statistics"] .stats-section__head,
body[data-view="teacher/statistics"] .stats-teacher-chart__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

body[data-view="teacher/statistics"] .stats-section__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-view="teacher/statistics"] .stats-filter__title,
body[data-view="teacher/statistics"] .stats-section__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-filter__subtitle,
body[data-view="teacher/statistics"] .stats-section__subtitle {
    margin: 0;
    color: rgba(226, 232, 240, 0.7);
}

body[data-view="teacher/statistics"] .stats-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: #93c5fd;
    text-decoration: none;
}

body[data-view="teacher/statistics"] .stats-link:hover {
    color: #bfdbfe;
}

body[data-view="teacher/statistics"] .stats-section__kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.6);
    margin-bottom: 0.35rem;
}

body[data-view="teacher/statistics"] .stats-filter-collapse {
    border-top: 1px dashed rgba(148, 163, 184, 0.35);
    padding-top: 0.8rem;
}

body[data-view="teacher/statistics"] .stats-filter-collapse summary {
    cursor: pointer;
    color: rgba(226, 232, 240, 0.9);
    font-weight: 700;
    margin-bottom: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: rgba(15, 23, 42, 0.7);
    box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.55);
    list-style: none;
}

body[data-view="teacher/statistics"] .stats-filter-collapse summary::after {
    content: "▾";
    font-size: 0.85rem;
    line-height: 1;
    transition: transform 150ms ease;
}

body[data-view="teacher/statistics"] .stats-filter-collapse[open] summary::after {
    transform: rotate(180deg);
}

body[data-view="teacher/statistics"] .stats-filter-collapse summary::-webkit-details-marker,
body[data-view="teacher/statistics"] .stats-filter-collapse summary::marker {
    display: none;
    content: "";
}

body[data-view="teacher/statistics"] .stats-filter-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

body[data-view="teacher/statistics"] .stats-filter-input-v2 {
    width: 100%;
    margin-top: 0.35rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    padding: 0.55rem 0.7rem;
    background: rgba(15, 23, 42, 0.75);
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-filter-actions-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

body[data-view="teacher/statistics"] .stats-filter-note-v2 {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.65);
}

body[data-view="teacher/statistics"] .stats-filter-noscript {
    margin-top: 0.6rem;
}

body[data-view="teacher/statistics"] .stats-alert {
    border-radius: 16px;
    border: 1px solid rgba(251, 191, 36, 0.5);
    background: rgba(251, 191, 36, 0.12);
    padding: 0.85rem 1rem;
    color: #fde68a;
}

body[data-view="teacher/statistics"] .stats-teacher-chart__surface {
    margin-top: 1.2rem;
}

body[data-view="teacher/statistics"] .stats-teacher-chart__range {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.68);
}

body[data-view="teacher/statistics"] .stats-teacher-chart__axis {
    position: relative;
    margin-top: 0.6rem;
    height: 1.2rem;
}

body[data-view="teacher/statistics"] .stats-teacher-chart__axis-item {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.6);
    white-space: nowrap;
}

body[data-view="teacher/statistics"] .stats-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

body[data-view="teacher/statistics"] .stats-chart__bar {
    background: rgba(12, 20, 36, 0.85);
    border-radius: 16px;
    padding: 0.6rem;
    min-height: 140px;
    display: grid;
    align-content: end;
    gap: 0.35rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    position: relative;
}

body[data-view="teacher/statistics"] .stats-chart__fill {
    width: 100%;
    height: var(--bar, 40%);
    background: linear-gradient(180deg, #3b82f6, rgba(56, 189, 248, 0.65));
    border-radius: 999px;
}

body[data-view="teacher/statistics"] .stats-chart__value {
    font-size: 0.75rem;
    color: #e2e8f0;
    text-align: center;
}

body[data-view="teacher/statistics"] .stats-chart__label {
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.6);
    text-align: center;
}

body[data-view="teacher/statistics"] .stats-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.7rem;
    margin-top: 0.6rem;
}

body[data-view="teacher/statistics"] .stats-metrics > div {
    background: rgba(12, 20, 36, 0.85);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: grid;
    gap: 0.2rem;
}

body[data-view="teacher/statistics"] .stats-metrics p {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.6);
}

body[data-view="teacher/statistics"] .stats-metrics strong {
    font-size: 0.95rem;
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.2rem;
}

body[data-view="teacher/statistics"] .stats-span-5 { grid-column: span 5; }
body[data-view="teacher/statistics"] .stats-span-6 { grid-column: span 6; }
body[data-view="teacher/statistics"] .stats-span-7 { grid-column: span 7; }

body[data-view="teacher/statistics"] .stats-cash {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}

body[data-view="teacher/statistics"] .stats-cash div {
    background: rgba(12, 20, 36, 0.85);
    border-radius: 14px;
    padding: 0.6rem 0.8rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

body[data-view="teacher/statistics"] .stats-cash span {
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.6);
}

body[data-view="teacher/statistics"] .stats-cash strong {
    font-size: 0.9rem;
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-timeline {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

body[data-view="teacher/statistics"] .stats-timeline__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(12, 20, 36, 0.85);
}

body[data-view="teacher/statistics"] .stats-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.6rem;
    margin-top: 0.8rem;
}

body[data-view="teacher/statistics"] .stats-status > div {
    background: rgba(12, 20, 36, 0.85);
    border-radius: 14px;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: grid;
    gap: 0.2rem;
}

body[data-view="teacher/statistics"] .stats-status span {
    font-size: 0.72rem;
    color: rgba(226, 232, 240, 0.6);
}

body[data-view="teacher/statistics"] .stats-status strong {
    font-size: 0.95rem;
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-affiliate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
}

body[data-view="teacher/statistics"] .stats-affiliate__card {
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(12, 20, 36, 0.9);
    display: grid;
    gap: 0.3rem;
    color: #e2e8f0;
}

body[data-view="teacher/statistics"] .stats-affiliate__input {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

body[data-view="teacher/statistics"] .stats-affiliate__input input {
    flex: 1;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    padding: 0.4rem 0.6rem;
    background: rgba(15, 23, 42, 0.75);
    color: #f8fafc;
}

body[data-view="teacher/statistics"] .stats-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

body[data-view="teacher/statistics"] .stats-list__item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(12, 20, 36, 0.85);
}

body[data-view="teacher/statistics"] .stats-list__value {
    display: grid;
    gap: 0.35rem;
    text-align: right;
}

body[data-view="teacher/statistics"] .stats-mini {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.3);
    overflow: hidden;
}

body[data-view="teacher/statistics"] .stats-mini span {
    position: absolute;
    inset: 0;
    width: 40%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

body[data-view="teacher/statistics"] .stats-ops {
    display: grid;
    gap: 0.6rem;
}

body[data-view="teacher/statistics"] .stats-ops__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(12, 20, 36, 0.85);
    color: #e2e8f0;
    text-decoration: none;
}

body[data-view="teacher/statistics"] .stats-ops__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.2);
}

body[data-view="teacher/statistics"] .stats-ops__value {
    font-weight: 700;
}

body[data-view="teacher/statistics"] .stats-table {
    display: grid;
    gap: 0.5rem;
}

body[data-view="teacher/statistics"] .stats-table__head,
body[data-view="teacher/statistics"] .stats-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 110px));
    gap: 0.6rem;
    align-items: center;
}

body[data-view="teacher/statistics"] .stats-table__head span,
body[data-view="teacher/statistics"] .stats-table__row span {
    text-align: center;
}

body[data-view="teacher/statistics"] .stats-table__head span:first-child,
body[data-view="teacher/statistics"] .stats-table__row span:first-child {
    text-align: left;
}

body[data-view="teacher/statistics"] .stats-table__head {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(226, 232, 240, 0.6);
}

body[data-view="teacher/statistics"] .stats-table__row {
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: rgba(12, 20, 36, 0.85);
}

body[data-view="teacher/statistics"] .stats-table__title {
    font-weight: 600;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-view="teacher/statistics"] .stats-table__row span:not(.stats-table__title) {
    font-variant-numeric: tabular-nums;
}

body[data-view="teacher/statistics"] .stats-empty {
    padding: 1rem;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    color: rgba(226, 232, 240, 0.7);
    text-align: center;
}

@media (max-width: 980px) {
    body[data-view="teacher/statistics"] .stats-hero__grid {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/statistics"] .stats-grid {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/statistics"] .stats-span-5,
    body[data-view="teacher/statistics"] .stats-span-6,
    body[data-view="teacher/statistics"] .stats-span-7 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    body[data-view="teacher/statistics"] .stats-card {
        padding: 1rem;
    }

    body[data-view="teacher/statistics"] .stats-hero__kpis {
        grid-template-columns: 1fr;
    }

    body[data-view="teacher/statistics"] .stats-table__head,
    body[data-view="teacher/statistics"] .stats-table__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* === Teacher Referrals (ref-*) === */
body[data-view="teacher/referrals"] .ref-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.2rem 2rem;
    display: grid;
    gap: 1.2rem;
}

body[data-view="teacher/referrals"] .ref-panel {
    border: 1px solid var(--app-shell-border, rgba(148, 163, 184, 0.35));
    background: var(--app-panel-surface, rgba(255, 255, 255, 0.92));
    border-radius: 22px;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--app-shadow-sm, 0 12px 24px -24px rgba(15, 23, 42, 0.3));
}

body[data-view="teacher/referrals"] .ref-hero {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.08));
}

body[data-view="teacher/referrals"] .ref-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}

body[data-view="teacher/referrals"] .ref-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--app-muted, #64748b);
    margin: 0 0 0.35rem;
}

body[data-view="teacher/referrals"] .ref-title {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    margin: 0 0 0.4rem;
    color: var(--app-text, #0f172a);
}

body[data-view="teacher/referrals"] .ref-sub {
    margin: 0;
    color: var(--app-text-secondary, #475569);
    max-width: 70ch;
}

body[data-view="teacher/referrals"] .ref-chip-wrap {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

body[data-view="teacher/referrals"] .ref-chip,
body[data-view="teacher/referrals"] .ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--app-text, #0f172a);
}

body[data-view="teacher/referrals"] .ref-link-zone {
    margin-top: 0.9rem;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    padding: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
}

body[data-view="teacher/referrals"] .ref-link-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, auto);
    gap: 0.6rem;
    align-items: center;
}

body[data-view="teacher/referrals"] .ref-input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    padding: 0.5rem 0.7rem;
    background: #ffffff;
    color: #0f172a;
}

body[data-view="teacher/referrals"] .ref-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.9);
    color: #1e3a8a;
}

body[data-view="teacher/referrals"] .ref-btn-soft {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.3);
}

body[data-view="teacher/referrals"] .ref-btn-solid {
    background: #2563eb;
    color: #ffffff;
    border-color: rgba(59, 130, 246, 0.6);
}

body[data-view="teacher/referrals"] .ref-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.9rem;
}

body[data-view="teacher/referrals"] .ref-kpi {
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    display: grid;
    gap: 0.35rem;
}

body[data-view="teacher/referrals"] .ref-kpi-h {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

body[data-view="teacher/referrals"] .ref-kpi-v {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
}

body[data-view="teacher/referrals"] .ref-kpi-m {
    font-size: 0.78rem;
    color: #475569;
    margin: 0;
}

body[data-view="teacher/referrals"] .ref-code-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    font-weight: 600;
}

body[data-view="teacher/referrals"] .ref-code-value {
    font-family: var(--app-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.85rem;
}

body[data-view="teacher/referrals"] .ref-sec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

body[data-view="teacher/referrals"] .ref-sec-title {
    font-size: 1.05rem;
    margin: 0 0 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

body[data-view="teacher/referrals"] .ref-sec-sub {
    margin: 0;
    color: #475569;
}

body[data-view="teacher/referrals"] .ref-level-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem;
}

body[data-view="teacher/referrals"] .ref-level {
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 16px;
    padding: 0.8rem 0.9rem;
    background: rgba(248, 250, 252, 0.9);
}

body[data-view="teacher/referrals"] .ref-level-l {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0 0 0.25rem;
}

body[data-view="teacher/referrals"] .ref-level-v {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

body[data-view="teacher/referrals"] .ref-level-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.3);
    overflow: hidden;
}

body[data-view="teacher/referrals"] .ref-level-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

body[data-view="teacher/referrals"] .ref-level-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-size: 0.72rem;
    font-weight: 700;
}

body[data-view="teacher/referrals"] .ref-table-wrap {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(255, 255, 255, 0.9);
}

body[data-view="teacher/referrals"] .ref-table {
    width: 100%;
    border-collapse: collapse;
}

body[data-view="teacher/referrals"] .ref-table thead th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    background: rgba(241, 245, 249, 0.9);
}

body[data-view="teacher/referrals"] .ref-table tbody tr {
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

body[data-view="teacher/referrals"] .ref-money {
    font-weight: 700;
    color: #1d4ed8;
}

body[data-view="teacher/referrals"] .ref-order {
    font-family: var(--app-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.75rem;
    color: #334155;
}

body[data-view="teacher/referrals"] .ref-empty {
    padding: 0.9rem;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    color: #64748b;
    text-align: center;
}

@media (max-width: 980px) {
    body[data-view="teacher/referrals"] .ref-link-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    body[data-view="teacher/referrals"] .ref-panel {
        padding: 1rem;
    }
}

/* Dark mode overrides for referrals */
html.dark body[data-view="teacher/referrals"] .ref-panel,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-panel {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.25);
}

html.dark body[data-view="teacher/referrals"] .ref-chip,
html.dark body[data-view="teacher/referrals"] .ref-pill,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-chip,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-pill {
    background: rgba(15, 23, 42, 0.8);
    color: #e2e8f0;
}

html.dark body[data-view="teacher/referrals"] .ref-input,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-input {
    background: rgba(15, 23, 42, 0.85);
    color: #f8fafc;
    border-color: rgba(148, 163, 184, 0.35);
}

html.dark body[data-view="teacher/referrals"] .ref-table-wrap,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-table-wrap {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.2);
}

html.dark body[data-view="teacher/referrals"] .ref-table thead th,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-table thead th {
    background: rgba(15, 23, 42, 0.85);
    color: #94a3b8;
}

html.dark body[data-view="teacher/referrals"] .ref-table tbody tr,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-table tbody tr {
    border-top-color: rgba(30, 41, 59, 0.8);
}

html.dark body[data-view="teacher/referrals"] .ref-money,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-money {
    color: #93c5fd;
}

html.dark body[data-view="teacher/referrals"] .ref-link-zone,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-link-zone,
html.dark body[data-view="teacher/referrals"] .ref-kpi,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-kpi,
html.dark body[data-view="teacher/referrals"] .ref-level,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-level {
    background: color-mix(in srgb, var(--teacher-ui-surface-soft) 88%, transparent);
    border-color: var(--teacher-ui-border);
}

html.dark body[data-view="teacher/referrals"] .ref-kpi-h,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-kpi-h,
html.dark body[data-view="teacher/referrals"] .ref-level-v,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-level-v {
    color: var(--teacher-ui-text);
}

html.dark body[data-view="teacher/referrals"] .ref-kpi-v,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-kpi-v {
    color: #f8fafc;
}

html.dark body[data-view="teacher/referrals"] .ref-kpi-m,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-kpi-m,
html.dark body[data-view="teacher/referrals"] .ref-level-l,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-level-l,
html.dark body[data-view="teacher/referrals"] .ref-order,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-order,
html.dark body[data-view="teacher/referrals"] .ref-empty,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-empty {
    color: var(--teacher-ui-text-muted);
}

html.dark body[data-view="teacher/referrals"] .ref-code-btn,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-code-btn {
    background: color-mix(in srgb, #1d4ed8 28%, var(--teacher-ui-surface) 72%);
    border-color: color-mix(in srgb, #60a5fa 52%, var(--teacher-ui-border) 48%);
    color: #dbeafe;
}

html.dark body[data-view="teacher/referrals"] .ref-code-btn:hover,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-code-btn:hover,
html.dark body[data-view="teacher/referrals"] .ref-btn-soft:hover,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-btn-soft:hover {
    border-color: color-mix(in srgb, #93c5fd 55%, var(--teacher-ui-border) 45%);
    background: color-mix(in srgb, #2563eb 24%, var(--teacher-ui-surface-soft) 76%);
}

html.dark body[data-view="teacher/referrals"] .ref-btn-soft,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-btn-soft {
    background: color-mix(in srgb, #1d4ed8 20%, var(--teacher-ui-surface-soft) 80%);
    border-color: color-mix(in srgb, #60a5fa 42%, var(--teacher-ui-border) 58%);
    color: #dbeafe;
}

html.dark body[data-view="teacher/referrals"] .ref-level-pill,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-level-pill {
    background: color-mix(in srgb, #2563eb 24%, var(--teacher-ui-surface) 76%);
    color: #dbeafe;
    border-color: color-mix(in srgb, #60a5fa 46%, var(--teacher-ui-border) 54%);
}

html.dark body[data-view="teacher/referrals"] .ref-empty,
html[data-theme="dark"] body[data-view="teacher/referrals"] .ref-empty {
    border-color: color-mix(in srgb, var(--teacher-ui-border) 78%, #60a5fa 22%);
    background: color-mix(in srgb, var(--teacher-ui-surface-soft) 76%, transparent);
}

/* === Teacher Promotions KPI === */
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card {
    position: relative;
    border-radius: 18px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
    box-shadow: 0 14px 24px -20px rgba(15, 23, 42, 0.25);
    display: grid;
    gap: 0.35rem;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0.22;
    background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.25), transparent 55%);
    pointer-events: none;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #64748b;
    font-weight: 600;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-caption {
    margin: 0;
    font-size: 0.78rem;
    color: #475569;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--success {
    border-color: rgba(16, 185, 129, 0.35);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--success::before {
    background: radial-gradient(circle at top left, rgba(16, 185, 129, 0.25), transparent 55%);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--warning {
    border-color: rgba(245, 158, 11, 0.35);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--warning::before {
    background: radial-gradient(circle at top left, rgba(245, 158, 11, 0.25), transparent 55%);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--danger {
    border-color: rgba(239, 68, 68, 0.35);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--danger::before {
    background: radial-gradient(circle at top left, rgba(239, 68, 68, 0.25), transparent 55%);
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card {
    background: linear-gradient(150deg, rgba(15, 23, 42, 0.95), rgba(9, 16, 30, 0.95));
    border-color: rgba(148, 163, 184, 0.2);
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-label,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-label {
    color: rgba(226, 232, 240, 0.7);
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-value,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-value {
    color: #f8fafc;
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-caption,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-caption {
    color: rgba(226, 232, 240, 0.6);
}

/* === Promotions KPI Color Accents === */
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card {
    --promo-kpi-accent: #64748b;
    border-left: 4px solid var(--promo-kpi-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--promo-kpi-accent) 10%, #ffffff 90%), #ffffff);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--neutral { --promo-kpi-accent: #64748b; }
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--success { --promo-kpi-accent: #10b981; }
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--warning { --promo-kpi-accent: #f59e0b; }
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card--danger { --promo-kpi-accent: #ef4444; }

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-value {
    color: var(--promo-kpi-accent);
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--promo-kpi-accent) 12%, rgba(15, 23, 42, 0.95) 88%), rgba(12, 18, 30, 0.95));
    border-left-color: var(--promo-kpi-accent);
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-value,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-value {
    color: color-mix(in srgb, var(--promo-kpi-accent) 75%, #ffffff 25%);
}

/* KPI icon styling for promotions */
body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--promo-kpi-accent) 14%, #ffffff 86%);
    color: var(--promo-kpi-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-icon > svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
}

html.dark body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-icon,
html[data-theme="dark"] body:is([data-view="teacher/promotions"], [data-view="teacher/coupons"]) .promo-kpi-icon {
    background: color-mix(in srgb, var(--promo-kpi-accent) 18%, rgba(15, 23, 42, 0.9) 82%);
    color: color-mix(in srgb, var(--promo-kpi-accent) 75%, #ffffff 25%);
}

/* === Teacher Statistics Light Theme Overrides === */
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 42%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 38%),
        linear-gradient(180deg, #eef2ff 0%, #eef5fb 55%, #e9edf7 100%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-bg__grid {
    opacity: 0.18;
    background-image: linear-gradient(rgba(59, 130, 246, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.16) 1px, transparent 1px);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-orb--one {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.18), transparent 70%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-orb--two {
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.16), transparent 70%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-orb--three {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.14), transparent 70%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 18px 28px -24px rgba(15, 23, 42, 0.25);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-title,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-section__title,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-filter__title,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-kpi__value,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-goal__value,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-cash strong,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-chart__value,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-table__title {
    color: #0f172a;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-subtitle,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-kpi__meta,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-goal__meta,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-filter__subtitle,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-section__subtitle,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-section__meta,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-teacher-chart__range,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-filter-note-v2,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-goal__foot p,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-cash span,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-chart__label,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-teacher-chart__axis-item,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-metrics p,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-status span {
    color: #475569;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-metrics strong,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-status strong,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-goal__foot strong {
    color: #0f172a;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-kicker,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-section__kicker,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-kpi__label {
    color: #64748b;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-chip,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-pill {
    background: #ffffff;
    border-color: #cbd5f5;
    color: #1e293b;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-kpi,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-goal,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-metrics > div,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-cash div,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-timeline__item,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-status > div,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-affiliate__card,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-list__item,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-ops__item,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-chart__bar,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-table__row {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #0f172a;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-badge {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-badge--info {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.35);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-badge--warning {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.35);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-filter-input-v2,
html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-affiliate__input input {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-btn {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #1e3a8a;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-btn--primary {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #ffffff;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-link {
    color: #1d4ed8;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-link:hover {
    color: #1e40af;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-filter-collapse summary {
    color: #1f2937;
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 12px 22px -18px rgba(148, 163, 184, 0.5);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-table__head {
    color: #64748b;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-empty {
    color: #64748b;
    border-color: #cbd5e1;
}

/* ===== UI Refresh 2026 ===== */
body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company).app-view :is(.app-shell-toolbar + *, .app-shell-toolbar + script + *) {
    margin-top: calc(var(--app-toolbar-offset-current, var(--app-toolbar-height)) + var(--app-toolbar-offset-extra, 0px)) !important;
}

.app-shell-toolbar {
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-border) 88%) !important;
    padding: 0.65rem 1rem !important;
    box-shadow: 0 16px 34px -30px rgba(15, 23, 42, 0.3) !important;
}

.app-shell-toolbar__inner {
    gap: 0.7rem;
}

.app-shell-toolbar__titleblock {
    display: grid;
    gap: 0.15rem;
}

.app-shell-toolbar__title {
    letter-spacing: -0.02em;
}

.app-shell-toolbar__trail {
    margin: 0;
    font-size: var(--app-text-xs);
    line-height: 1.35;
    color: var(--app-muted);
}

.app-shell-toolbar__actions {
    gap: 0.6rem;
}

.app-user-menu__trigger {
    min-height: var(--app-control-height-sm);
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, var(--app-border) 84%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%);
    padding: 0.34rem 0.52rem;
    border-radius: 999px;
}

.app-user-menu__trigger:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, var(--app-surface) 93%);
}

.app-user-menu__trigger:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 38%, var(--app-border) 62%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent);
}

.app-user-menu__trigger--compact {
    width: auto;
    gap: 0.45rem;
}

.app-user-menu__trigger--compact .app-user-menu__caret {
    margin-left: 0;
}

.app-user-menu__panel {
    border-radius: 1.3rem;
    padding: 0.95rem;
}

.app-user-menu__header {
    padding: 0.12rem 0.15rem 0.74rem;
    border-radius: 0;
    background: transparent;
}

.app-flash {
    display: grid;
    gap: 0.4rem;
    border-radius: 1.1rem;
    padding: 1rem 1.1rem;
    box-shadow: var(--app-shadow-soft);
}

.app-page-hero,
.app-page-section-card,
.app-page-subcard,
.app-page-list-item,
.app-alert-card,
.app-transaction-card,
.app-summary-card,
.app-empty-state,
.app-data-table-wrap {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-border) 88%);
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.22);
}

.app-page-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.1rem, 2.4vw, 1.45rem);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface));
}

.app-page-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 5rem;
    height: 0.28rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--app-primary-500), color-mix(in srgb, var(--app-tone-success) 72%, var(--app-primary-400) 28%));
}

.app-page-hero__header {
    gap: 1rem;
}

.app-page-hero__title {
    max-width: 50rem;
    font-size: clamp(1.45rem, 2.2vw, 2.2rem);
}

.app-page-hero__summary {
    max-width: 48rem;
    font-size: var(--app-text-base);
    line-height: 1.65;
}

.app-page-hero__actions,
.app-action-cluster,
.app-empty-state__actions,
.app-section-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.app-summary-strip {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.app-summary-strip--4 {
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
}

.app-summary-card {
    --summary-accent: var(--app-primary-600);
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.38rem;
    padding: 1rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--summary-accent) 18%, var(--app-border) 82%);
    border-radius: 1.15rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--summary-accent) 5%, var(--app-surface) 95%), var(--app-surface));
}

.app-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 0.22rem;
    background: color-mix(in srgb, var(--summary-accent) 86%, transparent);
}

.app-summary-card--info { --summary-accent: var(--app-primary-600); }
.app-summary-card--success { --summary-accent: var(--app-tone-success); }
.app-summary-card--warning { --summary-accent: var(--app-tone-warning); }
.app-summary-card--danger { --summary-accent: var(--app-tone-danger); }
.app-summary-card--slate { --summary-accent: var(--app-tone-slate); }

.app-summary-card__label {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-summary-card__value {
    margin: 0;
    font-family: var(--app-font-display);
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.05;
    font-weight: 650;
    color: var(--app-text);
}

.app-summary-card__meta {
    margin: 0;
    font-size: var(--app-text-sm);
    line-height: 1.5;
    color: var(--app-muted);
}

.app-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.app-section-head__eyebrow {
    margin: 0;
    font-size: var(--app-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-section-head__title {
    margin: 0.15rem 0 0;
    font-family: var(--app-font-section);
    font-size: clamp(1.05rem, 1.55vw, 1.32rem);
    line-height: 1.22;
    font-weight: 650;
    color: var(--app-text);
}

.app-section-head__desc {
    margin: 0.35rem 0 0;
    max-width: 48rem;
    font-size: var(--app-text-sm);
    line-height: 1.58;
    color: var(--app-muted);
}

.app-empty-state {
    display: grid;
    justify-items: start;
    gap: 0.85rem;
    padding: 1.25rem;
    border: 1px dashed color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, var(--app-border) 74%);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%), var(--app-surface));
}

.app-empty-state--compact {
    padding: 1rem;
}

.app-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-surface) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, var(--app-text) 18%);
}

.app-empty-state__icon > svg {
    width: 1.4rem;
    height: 1.4rem;
}

.app-empty-state__title {
    margin: 0;
    font-size: clamp(1rem, 1.4vw, 1.22rem);
    line-height: 1.24;
    font-weight: 650;
    color: var(--app-text);
}

.app-empty-state__body {
    margin: 0.25rem 0 0;
    max-width: 40rem;
    font-size: var(--app-text-sm);
    line-height: 1.58;
    color: var(--app-muted);
}

.app-data-table-wrap {
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-border) 90%);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, var(--app-surface) 98%);
}

.app-data-table {
    width: 100%;
    min-width: 44rem;
    border-collapse: separate;
    border-spacing: 0;
}

.app-data-table thead th {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-border) 90%);
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%);
}

.app-data-table tbody td {
    padding: 1rem;
    vertical-align: top;
    border-bottom: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-border) 92%);
}

.app-data-table tbody tr:last-child td {
    border-bottom: none;
}

.app-data-table tbody tr:hover {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface) 97%);
}

.app-data-table__primary {
    margin: 0;
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-text);
}

.app-data-table__secondary {
    margin: 0.3rem 0 0;
    font-size: var(--app-text-xs);
    line-height: 1.5;
    color: var(--app-muted);
}

.app-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.app-inline-form select,
.app-inline-form input,
.app-inline-form textarea {
    min-height: var(--app-control-height-sm);
}

.app-transaction-card {
    display: grid;
    gap: 0.95rem;
    padding: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-border) 88%);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface) 96%), var(--app-surface));
}

.app-transaction-card__header,
.app-transaction-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.app-transaction-card__eyebrow {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-transaction-card__amount {
    margin: 0.3rem 0 0;
    font-family: var(--app-font-display);
    font-size: clamp(1.28rem, 1.8vw, 1.9rem);
    line-height: 1.04;
    font-weight: 650;
    color: var(--app-text);
}

.app-transaction-card__meta,
.app-transaction-card__list {
    margin: 0;
    font-size: var(--app-text-sm);
    line-height: 1.58;
    color: var(--app-muted);
}

.app-pagination-card {
    padding: 0.95rem 1rem;
}

.app-pagination-card__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
}

.app-pagination-card__summary {
    margin: 0;
    font-size: var(--app-text-xs);
    color: var(--app-muted);
}

.app-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.app-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--app-button-border);
    border-radius: 0.95rem;
    background: var(--app-button-bg);
    color: var(--app-button-text);
    font-size: var(--app-text-xs);
    font-weight: 700;
    text-decoration: none;
}

.app-pagination__link:hover {
    border-color: var(--app-button-border-strong);
    background: var(--app-button-bg-hover);
    color: var(--app-button-text-strong);
}

.app-pagination__link.is-current {
    border-color: var(--app-button-active-border);
    background: var(--app-button-active-bg);
    color: var(--app-button-active-text);
    box-shadow: var(--app-button-active-shadow);
}

.app-pagination__link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.app-pagination__ellipsis {
    padding: 0 0.25rem;
    color: var(--app-muted);
}

.app-status-pill--warning {
    border-color: color-mix(in srgb, var(--app-tone-warning) 36%, transparent);
    background: color-mix(in srgb, var(--app-tone-warning) 13%, transparent);
    color: color-mix(in srgb, var(--app-tone-warning) 82%, var(--app-text) 18%);
}

.company-shell-toolbar {
    --app-shell-accent: var(--app-primary-600);
}

.company-shell-toolbar__inner {
    width: min(100%, 80rem);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.95rem;
}

.company-shell-toolbar__brand {
    display: flex;
    min-width: min(100%, 26rem);
    gap: 0.9rem;
}

.company-shell-toolbar__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--app-primary-600) 20%, var(--app-border) 80%);
    background: color-mix(in srgb, var(--app-primary-600) 9%, var(--app-surface) 91%);
    box-shadow: 0 14px 28px -24px rgba(37, 99, 235, 0.4);
}

.company-shell-toolbar__logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-shell-toolbar__logo-text {
    font-family: var(--app-font-display);
    font-size: var(--app-text-sm);
    font-weight: 700;
    color: var(--app-primary-700);
}

.company-shell-toolbar__content {
    min-width: 0;
    display: grid;
    gap: 0.3rem;
}

.company-shell-toolbar__headline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.company-shell-toolbar__summary {
    margin: 0;
    max-width: 48rem;
    font-size: var(--app-text-sm);
    line-height: 1.58;
    color: var(--app-muted);
}

.company-shell-toolbar__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.company-shell-toolbar__actions {
    align-items: center;
    justify-content: flex-end;
}

.company-shell-action {
    min-height: var(--app-control-height-sm);
}

.company-shell-account-trigger {
    min-height: var(--app-control-height-sm);
}

.company-content-main {
    max-width: 80rem;
    padding-top: 1.2rem !important;
    padding-bottom: 2rem !important;
}

body.app-role-company.app-view .company-content-main > :not(script) + :not(script) {
    margin-top: 1.15rem !important;
}

body.app-role-company.app-view .company-content-main :is(section, article)[class*="rounded-2xl"][class*="border-slate-200"],
body.app-role-company.app-view .company-content-main :is(section, article)[class*="rounded-xl"][class*="border-slate-200"] {
    border-color: color-mix(in srgb, var(--app-primary-600) 10%, var(--app-border) 90%) !important;
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.22) !important;
}

body.app-role-company.app-view .company-content-main :is(.text-[11px], .text-xs) {
    letter-spacing: 0.08em;
}

.support-hub .support-chat-layout {
    grid-template-columns: minmax(19rem, 0.94fr) minmax(0, 1.36fr);
    align-items: stretch;
}

.support-hub .support-conv-panel,
.support-hub .support-thread-panel {
    min-height: 42rem;
    border-color: color-mix(in srgb, var(--app-primary-600) 12%, var(--app-border) 88%) !important;
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.22);
}

.support-hub #support-conv-list {
    max-height: 34rem;
    overflow-y: auto;
}

.support-hub .support-thread-messages {
    min-height: 20rem;
    background: color-mix(in srgb, var(--app-primary-600) 3%, var(--app-surface) 97%) !important;
}

body[data-view="teacher/course_create"] .teacher-workflow-main,
body[data-view="teacher/course_edit"] .teacher-workflow-main {
    max-width: 80rem;
    padding-inline: max(1rem, 3vw) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main :is(section.rounded-2xl, article.rounded-2xl, aside.rounded-2xl, div.rounded-2xl) {
    border-color: color-mix(in srgb, var(--app-primary-600) 12%, var(--app-border) 88%) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-primary-600) 4%, var(--app-surface) 96%), var(--app-surface)) !important;
    box-shadow: 0 18px 36px -30px rgba(15, 23, 42, 0.22) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main :is(.text-slate-100, .text-slate-200) {
    color: var(--app-text) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main :is(.text-slate-300, .text-slate-400, .text-slate-500) {
    color: var(--app-muted) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main :is(input, select, textarea)[class*="bg-slate-900"],
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main :is(input, select, textarea)[class*="bg-slate-950"] {
    border-color: color-mix(in srgb, var(--app-primary-600) 14%, var(--app-border) 86%) !important;
    background: color-mix(in srgb, var(--app-primary-600) 2%, var(--app-surface) 98%) !important;
    color: var(--app-text) !important;
}

body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main .course-meta,
body:is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) .teacher-workflow-main .course-stepper {
    border-color: color-mix(in srgb, var(--app-primary-600) 12%, var(--app-border) 88%) !important;
    background: color-mix(in srgb, var(--app-primary-600) 4%, var(--app-surface) 96%) !important;
}

@media (max-width: 1024px) {
    .support-hub .support-chat-layout {
        grid-template-columns: 1fr;
    }

    .support-hub .support-conv-panel,
    .support-hub .support-thread-panel {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .app-shell-toolbar {
        padding-inline: 0.8rem !important;
    }

    .app-shell-toolbar__actions {
        justify-content: flex-start;
    }

    .company-shell-toolbar__brand {
        min-width: 100%;
    }

    .company-shell-toolbar__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .app-summary-strip,
    .app-summary-strip--4 {
        grid-template-columns: 1fr;
    }

    .app-transaction-card__header,
    .app-transaction-card__footer,
    .app-pagination-card__inner {
        flex-direction: column;
        align-items: stretch;
    }

    .app-data-table {
        min-width: 36rem;
    }
}

/* ===== Auth Suite Refresh 2026 ===== */
body.app-auth-page{--auth-primary:#2563eb;--auth-strong:#1d4ed8;--auth-soft:rgba(37,99,235,.1);--auth-border:rgba(148,163,184,.28);--auth-border-strong:rgba(71,85,105,.2);--auth-surface:rgba(255,255,255,.88);--auth-surface-strong:rgba(255,255,255,.96);--auth-text:#0f172a;--auth-muted:#475569;--auth-danger:#dc2626;--auth-warning:#d97706;--auth-success:#0f766e;--auth-shadow:0 32px 90px -52px rgba(15,23,42,.52);position:relative;min-height:100vh;background:radial-gradient(circle at top left,rgba(59,130,246,.14),transparent 28%),linear-gradient(180deg,#f8fbff 0%,#f8fafc 52%,#f3f6fb 100%)}
html.dark body.app-auth-page,html[data-theme="dark"] body.app-auth-page,body.app-auth-page.dark{--auth-soft:rgba(59,130,246,.18);--auth-border:rgba(100,116,139,.32);--auth-border-strong:rgba(148,163,184,.24);--auth-surface:rgba(15,23,42,.9);--auth-surface-strong:rgba(15,23,42,.95);--auth-text:#e2e8f0;--auth-muted:#94a3b8;background:radial-gradient(circle at top left,rgba(37,99,235,.22),transparent 28%),linear-gradient(180deg,#020617 0%,#0f172a 48%,#111827 100%)}
body.app-auth-page .auth-suite__scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}body.app-auth-page .auth-suite__orb{position:absolute;border-radius:999px;filter:blur(80px);opacity:.8}body.app-auth-page .auth-suite__orb--primary{width:26rem;height:26rem;top:-5rem;right:-4rem;background:rgba(37,99,235,.22)}body.app-auth-page .auth-suite__orb--secondary{width:22rem;height:22rem;bottom:-5rem;left:-5rem;background:rgba(6,182,212,.18)}body.app-auth-page .auth-suite__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(180deg,rgba(255,255,255,.28),transparent 72%)}
body.app-auth-page .auth-suite{position:relative;z-index:1;min-height:100vh;padding:clamp(1.25rem,3vw,2.25rem);display:flex;align-items:center;justify-content:center}body.app-auth-page .auth-suite__layout{width:min(1180px,100%);display:grid;grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);gap:clamp(1rem,2vw,1.6rem)}body.app-auth-page .auth-suite--compact .auth-suite__layout{width:min(1020px,100%);grid-template-columns:minmax(260px,.86fr) minmax(0,1fr)}
body.app-auth-page .auth-suite__aside,body.app-auth-page .auth-suite__panel{position:relative;border:1px solid var(--auth-border);border-radius:1.75rem;box-shadow:var(--auth-shadow);backdrop-filter:blur(22px)}body.app-auth-page .auth-suite__aside{overflow:hidden;background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(15,23,42,.84)),radial-gradient(circle at top left,rgba(37,99,235,.42),transparent 34%);color:#e2e8f0}body.app-auth-page .auth-suite--company .auth-suite__aside{background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(12,74,110,.88)),radial-gradient(circle at top right,rgba(37,99,235,.38),transparent 32%)}body.app-auth-page .auth-suite--admin .auth-suite__aside{background:linear-gradient(180deg,rgba(2,6,23,.96),rgba(30,41,59,.92)),radial-gradient(circle at top left,rgba(59,130,246,.28),transparent 34%)}body.app-auth-page .auth-suite__aside::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(255,255,255,.12),transparent 22%);pointer-events:none}body.app-auth-page .auth-suite__aside-body{position:relative;z-index:1;height:100%;display:grid;align-content:start;gap:1.35rem;padding:clamp(1.45rem,3vw,2rem)}
body.app-auth-page .auth-suite__panel{display:grid;gap:1.1rem;padding:clamp(1.35rem,2.6vw,2rem);background:var(--auth-surface);color:var(--auth-text)}body.app-auth-page .auth-suite__panel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 18%);pointer-events:none}body.app-auth-page .auth-suite__panel-header,body.app-auth-page .auth-suite__panel>:not(style){position:relative;z-index:1}
body.app-auth-page .auth-suite__panel-header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:flex-start}body.app-auth-page .auth-suite__panel-brand{display:flex;align-items:flex-start;gap:.95rem;min-width:0}body.app-auth-page .auth-suite__logo-mark{width:3.15rem;height:3.15rem;border-radius:1rem;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,245,249,.88));border:1px solid rgba(255,255,255,.6);color:#0f172a;font-family:var(--app-font-display,inherit);font-weight:700;box-shadow:0 16px 34px -28px rgba(15,23,42,.5)}html.dark body.app-auth-page .auth-suite__logo-mark,html[data-theme="dark"] body.app-auth-page .auth-suite__logo-mark,body.app-auth-page.dark .auth-suite__logo-mark{background:linear-gradient(180deg,rgba(30,41,59,.92),rgba(15,23,42,.96));border-color:rgba(148,163,184,.28);color:#e2e8f0}body.app-auth-page .auth-suite__logo-mark img{width:100%;height:100%;object-fit:contain}
body.app-auth-page .auth-suite__eyebrow{display:inline-flex;align-items:center;gap:.45rem;margin:0;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,232,240,.78)}body.app-auth-page .auth-suite__panel .auth-suite__eyebrow{color:color-mix(in srgb,var(--auth-primary) 45%,var(--auth-muted) 55%)}body.app-auth-page .auth-suite__panel-title{margin:.4rem 0 0;font-family:var(--app-font-display,inherit);font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.06;letter-spacing:-.03em;color:var(--auth-text)}body.app-auth-page .auth-suite__aside-title{margin:0;font-family:var(--app-font-display,inherit);font-size:clamp(1.55rem,2.8vw,2.45rem);line-height:1.05;letter-spacing:-.03em;color:#f8fafc}
body.app-auth-page .auth-suite__panel-subtitle,body.app-auth-page .auth-suite__aside-text,body.app-auth-page .auth-suite__highlight-text,body.app-auth-page .auth-form-v2__hint,body.app-auth-page .auth-form-v2__meta-note,body.app-auth-page .auth-form-v2__footer-note,body.app-auth-page .auth-empty-state-v2__text,body.app-auth-page .auth-inline-banner__text,body.app-auth-page .auth-sso-card__text{margin:0;font-size:.95rem;line-height:1.6;color:var(--auth-muted)}body.app-auth-page .auth-suite__aside-text,body.app-auth-page .auth-suite__highlight-text{color:rgba(226,232,240,.82)}
body.app-auth-page .auth-suite__stats{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}body.app-auth-page .auth-suite__stat{padding:.95rem 1rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:rgba(15,23,42,.18)}body.app-auth-page .auth-suite__stat strong{display:block;margin-bottom:.22rem;font-size:1.2rem;font-weight:700;color:#fff}body.app-auth-page .auth-suite__stat span{font-size:.86rem;line-height:1.45;color:rgba(226,232,240,.74)}body.app-auth-page .auth-suite__highlights{display:grid;gap:.9rem}body.app-auth-page .auth-suite__highlight{padding:1rem 1.05rem;border-radius:1.05rem;background:rgba(15,23,42,.22);border:1px solid rgba(148,163,184,.18)}body.app-auth-page .auth-suite__highlight-title,body.app-auth-page .auth-inline-banner__title,body.app-auth-page .auth-strength-v2__title,body.app-auth-page .auth-empty-state-v2__title,body.app-auth-page .auth-sso-card__title{margin:0;font-size:.96rem;line-height:1.35;font-weight:700;color:inherit}
body.app-auth-page .auth-suite__badge-list,body.app-auth-page .auth-suite__trust-row{display:flex;flex-wrap:wrap;gap:.7rem}body.app-auth-page .auth-suite__badge,body.app-auth-page .auth-suite__trust-chip,body.app-auth-page .auth-inline-banner__chip{display:inline-flex;align-items:center;gap:.42rem;min-height:2rem;padding:.42rem .72rem;border-radius:999px;font-size:.8rem;font-weight:600;background:rgba(255,255,255,.84);border:1px solid rgba(148,163,184,.24);color:var(--auth-text)}body.app-auth-page .auth-suite__badge{color:#e2e8f0;background:rgba(255,255,255,.08);border-color:rgba(148,163,184,.18)}
body.app-auth-page .auth-suite__panel-utility,body.app-auth-page .auth-suite__utility-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.65rem}body.app-auth-page .auth-inline-banner,body.app-auth-page .auth-password-panel-v2,body.app-auth-page .auth-sso-card,body.app-auth-page .auth-empty-state-v2,body.app-auth-page .auth-message{border-radius:1.15rem;border:1px solid color-mix(in srgb,var(--auth-primary) 14%,var(--auth-border) 86%);background:color-mix(in srgb,var(--auth-primary) 5%,var(--auth-surface-strong) 95%)}body.app-auth-page .auth-inline-banner,body.app-auth-page .auth-password-panel-v2,body.app-auth-page .auth-sso-card,body.app-auth-page .auth-empty-state-v2{display:grid;gap:.85rem;padding:1rem 1.05rem}body.app-auth-page .auth-inline-banner,body.app-auth-page .auth-sso-card{grid-template-columns:minmax(0,1fr) auto;align-items:start}
body.app-auth-page .auth-message{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.85rem;align-items:flex-start;padding:1rem 1.05rem;box-shadow:0 18px 38px -30px rgba(15,23,42,.3)}body.app-auth-page .auth-message--success{border-color:color-mix(in srgb,var(--auth-success) 24%,var(--auth-border) 76%);background:color-mix(in srgb,var(--auth-success) 7%,var(--auth-surface-strong) 93%)}body.app-auth-page .auth-message--warning{border-color:color-mix(in srgb,var(--auth-warning) 24%,var(--auth-border) 76%);background:color-mix(in srgb,var(--auth-warning) 7%,var(--auth-surface-strong) 93%)}body.app-auth-page .auth-message--danger{border-color:color-mix(in srgb,var(--auth-danger) 24%,var(--auth-border) 76%);background:color-mix(in srgb,var(--auth-danger) 6%,var(--auth-surface-strong) 94%)}body.app-auth-page .auth-message__icon{display:inline-flex;align-items:center;justify-content:center;width:2.45rem;height:2.45rem;border-radius:.95rem;background:rgba(255,255,255,.72);color:var(--auth-primary-strong)}body.app-auth-page .auth-message--success .auth-message__icon{color:var(--auth-success)}body.app-auth-page .auth-message--warning .auth-message__icon{color:var(--auth-warning)}body.app-auth-page .auth-message--danger .auth-message__icon{color:var(--auth-danger)}body.app-auth-page .auth-message__title{margin:0;font-size:.96rem;font-weight:700;color:var(--auth-text)}body.app-auth-page .auth-message__text,body.app-auth-page .auth-message__list{margin:.28rem 0 0;padding:0;font-size:.92rem;line-height:1.55;color:var(--auth-muted)}body.app-auth-page .auth-message__list{padding-left:1rem}body.app-auth-page .auth-suite__ghost-link,body.app-auth-page .auth-form-v2__text-link,body.app-auth-page .auth-form-v2__footer-note a,body.app-auth-page .auth-form-v2__hint a,body.app-auth-page .auth-form-v2__checkbox a{color:var(--auth-strong);text-decoration:none;font-weight:600}body.app-auth-page .auth-suite__ghost-link,body.app-auth-page .auth-form-v2__ghost-button,body.app-auth-page .auth-suite__theme-toggle{min-height:2.55rem;padding:.55rem .82rem;border-radius:999px;border:1px solid var(--auth-border);background:color-mix(in srgb,var(--auth-primary) 4%,var(--auth-surface-strong) 96%);color:var(--auth-text);font-size:.9rem;font-weight:600;transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}body.app-auth-page .auth-suite__ghost-link:hover,body.app-auth-page .auth-form-v2__ghost-button:hover,body.app-auth-page .auth-suite__theme-toggle:hover,body.app-auth-page .auth-form-v2__text-link:hover,body.app-auth-page .auth-form-v2__footer-note a:hover,body.app-auth-page .auth-form-v2__hint a:hover,body.app-auth-page .auth-form-v2__checkbox a:hover{text-decoration:none;border-color:color-mix(in srgb,var(--auth-primary) 28%,var(--auth-border-strong) 72%);background:color-mix(in srgb,var(--auth-primary) 8%,var(--auth-surface-strong) 92%)}
body.app-auth-page .auth-form-v2{display:grid;gap:1rem}body.app-auth-page .auth-form-v2__section-head{display:grid;gap:.35rem}body.app-auth-page .auth-form-v2__section-head--split,body.app-auth-page .auth-form-v2__action-row,body.app-auth-page .auth-form-v2__meta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}body.app-auth-page .auth-form-v2__action-row--end{justify-content:flex-end}body.app-auth-page .auth-form-v2__section-kicker{display:inline-flex;align-items:center;width:fit-content;min-height:1.9rem;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--auth-primary) 60%,var(--auth-muted) 40%);background:var(--auth-soft)}body.app-auth-page .auth-form-v2__section-title{margin:0;font-size:1.18rem;line-height:1.25;font-weight:700;color:var(--auth-text)}body.app-auth-page .auth-form-v2__section-text,body.app-auth-page .auth-stepper-v2__content small,body.app-auth-page .auth-choice-v2__text,body.app-auth-page .auth-strength-v2__status{margin:0;font-size:.92rem;line-height:1.55;color:var(--auth-muted)}
body.app-auth-page .auth-form-v2__grid{display:grid;gap:1rem}body.app-auth-page .auth-form-v2__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}body.app-auth-page .auth-form-v2__field{display:grid;gap:.45rem;min-width:0}body.app-auth-page .auth-form-v2__field--full{grid-column:1 / -1}body.app-auth-page .auth-form-v2__label-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem}body.app-auth-page .auth-form-v2__label{display:inline-flex;align-items:center;gap:.48rem;min-width:0;font-size:.9rem;line-height:1.3;font-weight:650;color:var(--auth-text)}body.app-auth-page .auth-form-v2__label svg,body.app-auth-page .auth-suite__trust-chip svg,body.app-auth-page .auth-form-v2__submit svg,body.app-auth-page .auth-form-v2__secondary-action svg,body.app-auth-page .auth-form-v2__ghost-button svg{flex-shrink:0}
body.app-auth-page .auth-form-v2__input-wrap{position:relative;display:flex;align-items:center;border:1px solid var(--auth-border-strong);border-radius:1rem;background:var(--auth-surface-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}body.app-auth-page .auth-form-v2__field.is-invalid .auth-form-v2__input-wrap{border-color:color-mix(in srgb,var(--auth-danger) 44%,var(--auth-border-strong) 56%);box-shadow:0 0 0 4px color-mix(in srgb,var(--auth-danger) 12%,transparent)}body.app-auth-page .auth-form-v2__field.is-valid .auth-form-v2__input-wrap{border-color:color-mix(in srgb,var(--auth-success) 34%,var(--auth-border-strong) 66%)}body.app-auth-page .auth-form-v2__input-wrap:focus-within{border-color:color-mix(in srgb,var(--auth-primary) 42%,var(--auth-border-strong) 58%);box-shadow:0 0 0 4px color-mix(in srgb,var(--auth-primary) 16%,transparent)}body.app-auth-page .auth-form-v2__input-icon{display:inline-flex;align-items:center;justify-content:center;width:2.9rem;color:color-mix(in srgb,var(--auth-primary) 50%,var(--auth-muted) 50%)}body.app-auth-page .auth-form-v2__control{width:100%;min-height:3.25rem;padding:.8rem 1rem .8rem 0;border:none;background:transparent;color:var(--auth-text);font-size:.96rem;line-height:1.45}body.app-auth-page .auth-form-v2__control::placeholder{color:color-mix(in srgb,var(--auth-muted) 72%,white 28%)}body.app-auth-page .auth-form-v2__input-wrap--password .auth-form-v2__control{padding-right:.25rem}body.app-auth-page .auth-form-v2__toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:2.5rem;margin-right:.42rem;padding:.4rem .75rem;border:none;border-radius:999px;background:color-mix(in srgb,var(--auth-primary) 6%,transparent);color:var(--auth-strong);font-size:.82rem;font-weight:700}body.app-auth-page .auth-form-v2__error,body.app-auth-page .auth-form-v2__match{margin:0;font-size:.82rem;line-height:1.45}body.app-auth-page .auth-form-v2__error,body.app-auth-page .auth-form-v2__match.is-error{color:var(--auth-danger)}body.app-auth-page .auth-form-v2__match.is-valid{color:var(--auth-success)}
body.app-auth-page .auth-form-v2__checkbox{display:inline-flex;align-items:flex-start;gap:.7rem;font-size:.92rem;line-height:1.55;color:var(--auth-text)}body.app-auth-page .auth-form-v2__checkbox input{margin-top:.18rem}body.app-auth-page .auth-form-v2__submit,body.app-auth-page .auth-form-v2__secondary-action{display:inline-flex;align-items:center;justify-content:center;gap:.62rem;min-height:3.2rem;width:fit-content;padding:.78rem 1.1rem;border-radius:1rem;border:1px solid transparent;text-decoration:none;font-size:.96rem;font-weight:700;line-height:1.25;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}body.app-auth-page .auth-form-v2__submit--primary,body.app-auth-page .auth-form-v2__submit--inline{background:linear-gradient(135deg,var(--auth-primary),var(--auth-strong));color:#fff;box-shadow:0 22px 44px -30px rgba(37,99,235,.68)}body.app-auth-page .auth-form-v2__submit--secondary,body.app-auth-page .auth-form-v2__secondary-action,body.app-auth-page .auth-form-v2__ghost-button{background:color-mix(in srgb,var(--auth-primary) 4%,var(--auth-surface-strong) 96%);border-color:color-mix(in srgb,var(--auth-primary) 16%,var(--auth-border) 84%);color:var(--auth-text)}body.app-auth-page .auth-form-v2__submit--primary:hover,body.app-auth-page .auth-form-v2__secondary-action:hover,body.app-auth-page .auth-form-v2__submit--secondary:hover,body.app-auth-page .auth-form-v2__ghost-button:hover,body.app-auth-page .auth-form-v2__submit--inline:hover{transform:translateY(-1px)}body.app-auth-page .auth-form-v2__submit[disabled]{cursor:not-allowed;opacity:.75;transform:none}body.app-auth-page .auth-form-v2__secondary-action--full,body.app-auth-page .auth-form-v2__submit--primary,body.app-auth-page .auth-form-v2__submit--inline{width:100%}body.app-auth-page .auth-form-v2__divider{display:flex;align-items:center;gap:.9rem;color:var(--auth-muted);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}body.app-auth-page .auth-form-v2__divider::before,body.app-auth-page .auth-form-v2__divider::after{content:"";height:1px;flex:1;background:color-mix(in srgb,var(--auth-primary) 12%,var(--auth-border) 88%)}body.app-auth-page .auth-form-v2__alt-block,body.app-auth-page .auth-form-v2__alt-stack{display:grid;gap:.85rem}
body.app-auth-page .auth-choice-grid-v2{display:grid;gap:.95rem;grid-template-columns:repeat(2,minmax(0,1fr))}body.app-auth-page .auth-choice-v2{display:grid;justify-items:start;gap:.55rem;padding:1.05rem;border-radius:1.15rem;border:1px solid var(--auth-border-strong);background:color-mix(in srgb,var(--auth-primary) 4%,var(--auth-surface-strong) 96%);color:var(--auth-text);text-align:left}body.app-auth-page .auth-choice-v2.is-active{border-color:color-mix(in srgb,var(--auth-primary) 44%,var(--auth-border-strong) 56%);background:color-mix(in srgb,var(--auth-primary) 10%,var(--auth-surface-strong) 90%);box-shadow:0 0 0 4px color-mix(in srgb,var(--auth-primary) 12%,transparent)}body.app-auth-page .auth-choice-v2__icon{display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.95rem;background:var(--auth-soft);color:var(--auth-strong)}body.app-auth-page .auth-choice-v2__title{font-size:.98rem;line-height:1.35;font-weight:700}body.app-auth-page .auth-form-v2__radio-grid{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:-.1rem}body.app-auth-page .auth-form-v2__radio-card{display:inline-flex;align-items:center;gap:.5rem;min-height:2.4rem;padding:.45rem .7rem;border-radius:999px;border:1px solid var(--auth-border);background:color-mix(in srgb,var(--auth-primary) 3%,var(--auth-surface-strong) 97%);font-size:.86rem;color:var(--auth-muted)}
body.app-auth-page .auth-form-v2__accordion{display:grid;gap:.8rem}body.app-auth-page .auth-form-v2__accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:3rem;padding:.75rem .95rem;border:1px dashed color-mix(in srgb,var(--auth-primary) 26%,var(--auth-border) 74%);border-radius:1rem;background:color-mix(in srgb,var(--auth-primary) 3%,var(--auth-surface-strong) 97%);color:var(--auth-text);font-size:.93rem;font-weight:650}body.app-auth-page .auth-form-v2__accordion-note{display:inline-flex;align-items:center;min-height:1.9rem;padding:.2rem .6rem;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--auth-muted);background:rgba(148,163,184,.12)}
body.app-auth-page .auth-password-panel-v2{gap:.95rem}body.app-auth-page .auth-strength-v2{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}body.app-auth-page .auth-strength-v2__label{font-size:.92rem;font-weight:700;color:var(--auth-text)}body.app-auth-page .auth-strength-v2__meter{height:.6rem;border-radius:999px;overflow:hidden;background:rgba(148,163,184,.18)}body.app-auth-page .auth-strength-v2__meter>span{display:block;width:10%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f97316,#facc15);transition:width .18s ease,background .18s ease}body.app-auth-page .auth-strength-v2__meter>span[data-strength-tone="medium"]{background:linear-gradient(90deg,#f59e0b,#22c55e)}body.app-auth-page .auth-strength-v2__meter>span[data-strength-tone="strong"]{background:linear-gradient(90deg,#22c55e,#0f766e)}body.app-auth-page .auth-rules-v2{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}body.app-auth-page .auth-rules-v2__item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;min-height:2.55rem;padding:.55rem .7rem;border-radius:.95rem;border:1px solid var(--auth-border);background:rgba(255,255,255,.5);color:var(--auth-text);font-size:.84rem}html.dark body.app-auth-page .auth-rules-v2__item,html[data-theme="dark"] body.app-auth-page .auth-rules-v2__item,body.app-auth-page.dark .auth-rules-v2__item{background:rgba(15,23,42,.45)}body.app-auth-page .auth-rules-v2__item.is-valid{border-color:color-mix(in srgb,var(--auth-success) 36%,var(--auth-border) 64%)}body.app-auth-page .auth-rules-v2__badge{display:inline-flex;align-items:center;justify-content:center;min-width:4.5rem;min-height:1.8rem;padding:.2rem .55rem;border-radius:999px;background:rgba(148,163,184,.14);font-size:.74rem;font-weight:700;color:var(--auth-muted)}body.app-auth-page .auth-rules-v2__item.is-valid .auth-rules-v2__badge{color:var(--auth-success);background:color-mix(in srgb,var(--auth-success) 12%,transparent)}
body.app-auth-page .auth-stepper-v2{display:grid;gap:.85rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}body.app-auth-page .auth-stepper-v2__line{height:1px;background:color-mix(in srgb,var(--auth-primary) 14%,var(--auth-border) 86%)}body.app-auth-page .auth-stepper-v2__item{display:flex;align-items:center;gap:.75rem;padding:.85rem .95rem;border:1px solid var(--auth-border);border-radius:1rem;background:color-mix(in srgb,var(--auth-primary) 3%,var(--auth-surface-strong) 97%)}body.app-auth-page .auth-stepper-v2__item.is-active,body.app-auth-page .auth-stepper-v2__item.is-complete{border-color:color-mix(in srgb,var(--auth-primary) 34%,var(--auth-border) 66%)}body.app-auth-page .auth-stepper-v2__index{display:inline-flex;align-items:center;justify-content:center;width:2.15rem;height:2.15rem;border-radius:999px;background:rgba(148,163,184,.12);font-size:.92rem;font-weight:700;color:var(--auth-muted)}body.app-auth-page .auth-stepper-v2__item.is-active .auth-stepper-v2__index,body.app-auth-page .auth-stepper-v2__item.is-complete .auth-stepper-v2__index{background:linear-gradient(135deg,var(--auth-primary),var(--auth-strong));color:#fff}body.app-auth-page .auth-stepper-v2__content{display:grid;gap:.1rem}body.app-auth-page .auth-stepper-v2__content strong{font-size:.9rem;color:var(--auth-text)}body.app-auth-page .auth-register-step-v2{display:grid;gap:1.1rem}
@media (max-width:1080px){body.app-auth-page .auth-suite__layout,body.app-auth-page .auth-suite--compact .auth-suite__layout{grid-template-columns:minmax(0,1fr)}body.app-auth-page .auth-suite__aside{order:2}body.app-auth-page .auth-suite__panel{order:1}}
@media (max-width:820px){body.app-auth-page .auth-suite{padding:1rem;align-items:stretch}body.app-auth-page .auth-choice-grid-v2,body.app-auth-page .auth-form-v2__grid--2,body.app-auth-page .auth-rules-v2,body.app-auth-page .auth-inline-banner,body.app-auth-page .auth-sso-card,body.app-auth-page .auth-stepper-v2{grid-template-columns:minmax(0,1fr)}body.app-auth-page .auth-stepper-v2__line{display:none}body.app-auth-page .auth-form-v2__section-head--split,body.app-auth-page .auth-form-v2__action-row,body.app-auth-page .auth-form-v2__meta-row,body.app-auth-page .auth-suite__panel-header,body.app-auth-page .auth-suite__panel-utility,body.app-auth-page .auth-suite__utility-group,body.app-auth-page .auth-strength-v2{flex-direction:column;align-items:stretch}body.app-auth-page .auth-form-v2__ghost-button,body.app-auth-page .auth-form-v2__submit,body.app-auth-page .auth-form-v2__secondary-action,body.app-auth-page .auth-suite__ghost-link,body.app-auth-page .auth-suite__theme-toggle{width:100%}}
@media (max-width:560px){body.app-auth-page .auth-suite{padding:.75rem}body.app-auth-page .auth-suite__panel,body.app-auth-page .auth-suite__aside{border-radius:1.35rem}body.app-auth-page .auth-suite__panel,body.app-auth-page .auth-suite__aside-body{padding:1rem}body.app-auth-page .auth-suite__panel-title,body.app-auth-page .auth-suite__aside-title{font-size:1.45rem}body.app-auth-page .auth-suite__logo-mark{width:2.8rem;height:2.8rem}body.app-auth-page .auth-form-v2__control{min-height:3.05rem;font-size:.93rem}body.app-auth-page .auth-message{grid-template-columns:1fr}}

/*
 * Teacher UI refresh
 * Shared hierarchy, calmer surfaces, and responsive rules for teacher pages.
 */
body:is(.app-role-teacher, .app-role-web)[data-view^="teacher/"],
body.app-role-web[data-view="web/support"],
body.app-role-web[data-view="web/profile"] {
    --teacher-ui-accent: #2563eb;
    --teacher-ui-accent-strong: #1d4ed8;
    --teacher-ui-surface: color-mix(in srgb, #ffffff 94%, #dbeafe 6%);
    --teacher-ui-surface-soft: color-mix(in srgb, #ffffff 90%, #eff6ff 10%);
    --teacher-ui-surface-muted: color-mix(in srgb, #f8fafc 92%, #dbeafe 8%);
    --teacher-ui-border: color-mix(in srgb, #cbd5e1 70%, #dbeafe 30%);
    --teacher-ui-border-strong: color-mix(in srgb, #94a3b8 75%, #bfdbfe 25%);
    --teacher-ui-text: #0f172a;
    --teacher-ui-text-muted: #475569;
    --teacher-ui-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    --teacher-ui-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);
}

html.dark body:is(.app-role-teacher, .app-role-web)[data-view^="teacher/"],
html.dark body.app-role-web[data-view="web/support"],
html.dark body.app-role-web[data-view="web/profile"],
html[data-theme="dark"] body:is(.app-role-teacher, .app-role-web)[data-view^="teacher/"],
html[data-theme="dark"] body.app-role-web[data-view="web/support"],
html[data-theme="dark"] body.app-role-web[data-view="web/profile"] {
    --teacher-ui-surface: color-mix(in srgb, #0f172a 86%, #1e293b 14%);
    --teacher-ui-surface-soft: color-mix(in srgb, #111827 88%, #1d4ed8 12%);
    --teacher-ui-surface-muted: color-mix(in srgb, #0f172a 92%, #1e293b 8%);
    --teacher-ui-border: color-mix(in srgb, #334155 78%, #2563eb 22%);
    --teacher-ui-border-strong: color-mix(in srgb, #475569 72%, #60a5fa 28%);
    --teacher-ui-text: #e2e8f0;
    --teacher-ui-text-muted: #94a3b8;
    --teacher-ui-shadow: 0 22px 54px rgba(2, 6, 23, 0.48);
    --teacher-ui-shadow-soft: 0 14px 32px rgba(2, 6, 23, 0.34);
}

body.app-role-teacher :is(.teacher-hub-main, .teacher-workflow-main, .teacher-courses-main, .stats-shell, .ref-main, .withdrawals-main, .profile-page),
body.app-role-web :is(.support-hub, .profile-page) {
    width: min(1280px, 100%);
    padding-inline: clamp(1rem, 2vw, 1.5rem);
    gap: clamp(1rem, 2vw, 1.5rem);
    overflow-x: clip;
}

body.app-role-teacher :is(main, section, article, aside, form, div),
body.app-role-web :is(main, section, article, aside, form, div) {
    min-width: 0;
}

body.app-role-teacher :is(.teacher-courses-panel, .withdrawals-card, .ref-panel, .support-conv-panel, .support-thread-panel, .course-content-card, .app-page-list-item, .stats-card),
body.app-role-web :is(.support-conv-panel, .support-thread-panel, .app-page-list-item) {
    border-color: var(--teacher-ui-border) !important;
    background: var(--teacher-ui-surface) !important;
    box-shadow: var(--teacher-ui-shadow-soft);
}

body.app-role-teacher .filter-bar,
body.app-role-teacher .stats-filter,
body.app-role-web .support-hub .support-conv-panel {
    border-color: var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface) 92%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: var(--teacher-ui-shadow-soft);
}

body.app-role-teacher .teacher-page-header,
body.app-role-web .teacher-page-header {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--teacher-ui-border);
    border-radius: 1.75rem;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--teacher-ui-accent) 18%, transparent), transparent 34%),
        linear-gradient(145deg, var(--teacher-ui-surface) 0%, var(--teacher-ui-surface-soft) 100%);
    box-shadow: var(--teacher-ui-shadow);
}

body.app-role-teacher .teacher-page-header::after,
body.app-role-web .teacher-page-header::after {
    content: "";
    position: absolute;
    inset: auto -6rem -6rem auto;
    width: 16rem;
    height: 16rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--teacher-ui-accent) 14%, transparent);
    filter: blur(28px);
    pointer-events: none;
}

body.app-role-teacher .teacher-page-header__main,
body.app-role-web .teacher-page-header__main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: space-between;
    align-items: start;
}

body.app-role-teacher .teacher-page-header__copy,
body.app-role-web .teacher-page-header__copy {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    flex: 1 1 34rem;
    width: min(100%, 52rem);
    max-width: 100%;
}

body.app-role-teacher .teacher-page-header__copy-body,
body.app-role-web .teacher-page-header__copy-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    max-width: 52rem;
}

body.app-role-teacher .teacher-page-header__icon,
body.app-role-web .teacher-page-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--teacher-ui-accent) 12%, var(--teacher-ui-surface) 88%);
    color: var(--teacher-ui-accent-strong);
    border: 1px solid color-mix(in srgb, var(--teacher-ui-accent) 18%, var(--teacher-ui-border) 82%);
}

body.app-role-teacher .teacher-page-header__icon svg,
body.app-role-web .teacher-page-header__icon svg {
    width: 1.3rem;
    height: 1.3rem;
}

body.app-role-teacher .teacher-page-header__eyebrow,
body.app-role-web .teacher-page-header__eyebrow {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-page-header__title,
body.app-role-web .teacher-page-header__title {
    margin: 0;
    font-family: var(--font-display, inherit);
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1.1;
    color: var(--teacher-ui-text);
}

body.app-role-teacher .teacher-page-header__summary,
body.app-role-web .teacher-page-header__summary {
    margin: 0;
    max-width: 60rem;
    font-size: 0.97rem;
    line-height: 1.6;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-page-header__chips,
body.app-role-web .teacher-page-header__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

body.app-role-teacher .teacher-page-header__aside,
body.app-role-web .teacher-page-header__aside {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.8rem;
    justify-items: stretch;
    flex: 0 1 22rem;
    width: min(100%, 22rem);
    max-width: 100%;
    margin-inline-start: auto;
}

body.app-role-teacher .teacher-page-header__actions,
body.app-role-web .teacher-page-header__actions,
body.app-role-teacher .teacher-empty-state__actions,
body.app-role-web .teacher-empty-state__actions {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    width: min(24rem, 100%);
}

body.app-role-teacher .teacher-page-header__note,
body.app-role-web .teacher-page-header__note {
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface) 88%, transparent);
    color: var(--teacher-ui-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    width: 100%;
}

body.app-role-teacher .teacher-action-btn,
body.app-role-web .teacher-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.8rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    border: 1px solid transparent;
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 700;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

body.app-role-teacher .teacher-action-btn:hover,
body.app-role-web .teacher-action-btn:hover {
    transform: translateY(-1px);
}

body.app-role-teacher .teacher-action-btn--primary,
body.app-role-web .teacher-action-btn--primary {
    background: linear-gradient(135deg, var(--teacher-ui-accent), #1e40af);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

body.app-role-teacher .teacher-action-btn--secondary,
body.app-role-web .teacher-action-btn--secondary {
    border-color: var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface) 90%, transparent);
    color: var(--teacher-ui-text);
}

body.app-role-teacher .teacher-action-btn--ghost,
body.app-role-web .teacher-action-btn--ghost {
    border-color: color-mix(in srgb, var(--teacher-ui-border) 88%, transparent);
    background: transparent;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-action-btn--danger,
body.app-role-web .teacher-action-btn--danger {
    border-color: color-mix(in srgb, #ef4444 44%, var(--teacher-ui-border) 56%);
    background: color-mix(in srgb, #ef4444 10%, var(--teacher-ui-surface) 90%);
    color: #b91c1c;
}

body.app-role-teacher .teacher-metric-strip,
body.app-role-web .teacher-metric-strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.8rem;
    margin-top: 1.25rem;
}

body.app-role-teacher .teacher-metric-card,
body.app-role-web .teacher-metric-card {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid color-mix(in srgb, var(--teacher-ui-border) 86%, transparent);
    background: color-mix(in srgb, var(--teacher-ui-surface) 86%, transparent);
}

body.app-role-teacher .teacher-metric-card__label,
body.app-role-web .teacher-metric-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-metric-card__value,
body.app-role-web .teacher-metric-card__value {
    margin: 0;
    font-size: clamp(1.35rem, 1.55vw, 1.8rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--teacher-ui-text);
}

body.app-role-teacher .teacher-metric-card__meta,
body.app-role-web .teacher-metric-card__meta {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-status-badge,
body.app-role-web .teacher-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface) 88%, transparent);
    color: var(--teacher-ui-text);
    font-size: 0.78rem;
    font-weight: 700;
}

body.app-role-teacher .teacher-status-badge--success,
body.app-role-web .teacher-status-badge--success {
    border-color: color-mix(in srgb, #10b981 48%, var(--teacher-ui-border) 52%);
    background: color-mix(in srgb, #10b981 12%, var(--teacher-ui-surface) 88%);
    color: #047857;
}

body.app-role-teacher .teacher-status-badge--warning,
body.app-role-web .teacher-status-badge--warning {
    border-color: color-mix(in srgb, #f59e0b 48%, var(--teacher-ui-border) 52%);
    background: color-mix(in srgb, #f59e0b 12%, var(--teacher-ui-surface) 88%);
    color: #b45309;
}

body.app-role-teacher .teacher-status-badge--danger,
body.app-role-web .teacher-status-badge--danger {
    border-color: color-mix(in srgb, #ef4444 50%, var(--teacher-ui-border) 50%);
    background: color-mix(in srgb, #ef4444 11%, var(--teacher-ui-surface) 89%);
    color: #b91c1c;
}

body.app-role-teacher .teacher-status-badge--info,
body.app-role-web .teacher-status-badge--info {
    border-color: color-mix(in srgb, var(--teacher-ui-accent) 40%, var(--teacher-ui-border) 60%);
    background: color-mix(in srgb, var(--teacher-ui-accent) 11%, var(--teacher-ui-surface) 89%);
    color: var(--teacher-ui-accent-strong);
}

html.dark body.app-role-teacher .teacher-status-badge--success,
html.dark body.app-role-web .teacher-status-badge--success,
html[data-theme="dark"] body.app-role-teacher .teacher-status-badge--success,
html[data-theme="dark"] body.app-role-web .teacher-status-badge--success {
    color: #6ee7b7;
}

html.dark body.app-role-teacher .teacher-status-badge--warning,
html.dark body.app-role-web .teacher-status-badge--warning,
html[data-theme="dark"] body.app-role-teacher .teacher-status-badge--warning,
html[data-theme="dark"] body.app-role-web .teacher-status-badge--warning {
    color: #fcd34d;
}

html.dark body.app-role-teacher .teacher-status-badge--danger,
html.dark body.app-role-web .teacher-status-badge--danger,
html[data-theme="dark"] body.app-role-teacher .teacher-status-badge--danger,
html[data-theme="dark"] body.app-role-web .teacher-status-badge--danger {
    color: #fca5a5;
}

body.app-role-teacher .teacher-feedback,
body.app-role-web .teacher-feedback {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    border: 1px solid var(--teacher-ui-border);
    background: var(--teacher-ui-surface);
}

body.app-role-teacher .teacher-feedback__icon,
body.app-role-web .teacher-feedback__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--teacher-ui-accent) 10%, transparent);
}

body.app-role-teacher .teacher-feedback__title,
body.app-role-web .teacher-feedback__title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--teacher-ui-text);
}

body.app-role-teacher .teacher-feedback__line,
body.app-role-web .teacher-feedback__line {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-feedback--success,
body.app-role-web .teacher-feedback--success {
    border-color: color-mix(in srgb, #10b981 40%, var(--teacher-ui-border) 60%);
    background: color-mix(in srgb, #10b981 11%, var(--teacher-ui-surface) 89%);
}

body.app-role-teacher .teacher-feedback--warning,
body.app-role-web .teacher-feedback--warning {
    border-color: color-mix(in srgb, #f59e0b 44%, var(--teacher-ui-border) 56%);
    background: color-mix(in srgb, #f59e0b 11%, var(--teacher-ui-surface) 89%);
}

body.app-role-teacher .teacher-feedback--danger,
body.app-role-teacher .teacher-feedback--error,
body.app-role-web .teacher-feedback--danger,
body.app-role-web .teacher-feedback--error {
    border-color: color-mix(in srgb, #ef4444 46%, var(--teacher-ui-border) 54%);
    background: color-mix(in srgb, #ef4444 10%, var(--teacher-ui-surface) 90%);
}

body.app-role-teacher .teacher-empty-state,
body.app-role-web .teacher-empty-state {
    display: grid;
    gap: 1rem;
    align-items: center;
    justify-items: start;
    padding: clamp(1.1rem, 2vw, 1.5rem);
    border-radius: 1.5rem;
    border: 1px dashed var(--teacher-ui-border-strong);
    background: color-mix(in srgb, var(--teacher-ui-surface-muted) 88%, transparent);
}

body.app-role-teacher .teacher-empty-state__icon,
body.app-role-web .teacher-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--teacher-ui-accent) 9%, var(--teacher-ui-surface) 91%);
    color: var(--teacher-ui-accent-strong);
}

body.app-role-teacher .teacher-empty-state__title,
body.app-role-web .teacher-empty-state__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--teacher-ui-text);
}

body.app-role-teacher .teacher-empty-state__text,
body.app-role-web .teacher-empty-state__text {
    margin: 0.35rem 0 0;
    max-width: 44rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher :is(.teacher-courses-hero__stats, .teacher-meetings-stats, .withdrawals-kpis, .ref-kpi-grid, [data-reviews-kpis]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.85rem;
}

body.app-role-teacher :is(.teacher-courses-card, .reviews-course-card, .teacher-meeting-card, .withdrawals-history-item, .ref-table-wrap, .teacher-courses-panel, .teacher-courses-hero, [data-reviews-hero]) {
    border-color: var(--teacher-ui-border);
    box-shadow: var(--teacher-ui-shadow-soft);
}

body.app-role-teacher .teacher-courses-card {
    border-radius: 1.35rem;
    background: var(--teacher-ui-surface);
}

body.app-role-teacher .teacher-courses-card__description {
    color: var(--teacher-ui-text-muted);
}

body.app-role-teacher .teacher-courses-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

body.app-role-teacher .teacher-courses-card__chips .teacher-courses-chip {
    border-color: var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface-soft) 84%, transparent);
}

body.app-role-teacher .teacher-courses-card__footer {
    padding-top: 0.85rem;
    border-top: 1px solid var(--teacher-ui-border);
}

body.app-role-teacher .teacher-courses-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

body.app-role-teacher .teacher-meeting-card,
body.app-role-teacher .reviews-course-card,
body.app-role-teacher .app-page-list-item {
    overflow: hidden;
    border-radius: 1.35rem;
    background: var(--teacher-ui-surface);
}

body.app-role-teacher .teacher-meeting-summary,
body.app-role-teacher .app-page-list-item,
body.app-role-web .app-page-list-item {
    gap: 0.9rem;
}

body.app-role-teacher .teacher-meeting-body,
body.app-role-teacher .app-page-list-item {
    background: color-mix(in srgb, var(--teacher-ui-surface) 92%, transparent);
}

body.app-role-teacher .support-chat-layout {
    align-items: start;
}

body.app-role-teacher .support-thread-panel,
body.app-role-web .support-thread-panel {
    min-height: clamp(34rem, 74vh, 48rem);
}

body.app-role-teacher .support-thread-messages,
body.app-role-web .support-thread-messages {
    background: color-mix(in srgb, var(--teacher-ui-surface-soft) 80%, transparent);
    border-color: var(--teacher-ui-border);
}

body.app-role-teacher .withdrawals-request__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

body.app-role-teacher .withdrawals-summary-item {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface-soft) 82%, transparent);
}

body.app-role-teacher .stats-grid {
    align-items: start;
}

body.app-role-teacher :is(.stats-card, .stats-hero) {
    border-radius: 1.6rem;
}

body.app-role-teacher .stats-table {
    overflow-x: auto;
}

body.app-role-teacher .ref-link-zone,
body.app-role-teacher .ref-kpi,
body.app-role-teacher .teacher-courses-hero-stat,
body.app-role-teacher .teacher-meetings-stat,
body.app-role-teacher .withdrawals-kpi {
    border-color: var(--teacher-ui-border);
    background: color-mix(in srgb, var(--teacher-ui-surface-soft) 86%, transparent);
    box-shadow: none;
}

body.app-role-teacher [data-profile-action-bar] {
    pointer-events: none;
}

body.app-role-teacher [data-profile-action-bar] > * {
    pointer-events: auto;
    border-color: var(--teacher-ui-border);
    box-shadow: var(--teacher-ui-shadow-soft);
}

@media (max-width: 1100px) {
    body.app-role-teacher :is(.support-chat-layout, .course-content-layout),
    body.app-role-teacher :is(.teacher-workflow-main > .grid, .profile-page form > .grid) {
        grid-template-columns: 1fr !important;
    }

    body.app-role-teacher :is(.stats-span-7, .stats-span-6, .stats-span-5) {
        grid-column: span 12 !important;
    }

    body.app-role-teacher :is([data-view="teacher/course_create"], [data-view="teacher/course_edit"]) aside {
        position: static !important;
    }
}

@media (max-width: 900px) {
    body.app-role-teacher .teacher-page-header__main,
    body.app-role-web .teacher-page-header__main {
        flex-direction: column;
    }

    body.app-role-teacher .teacher-page-header__aside,
    body.app-role-web .teacher-page-header__aside {
        flex-basis: auto;
        width: 100%;
        max-width: none;
        margin-inline-start: 0;
    }

    body.app-role-teacher :is(.teacher-courses-card__top, .teacher-meeting-summary, .support-thread-header),
    body.app-role-web .support-thread-header {
        flex-direction: column;
        align-items: stretch;
    }

    body.app-role-teacher :is(.teacher-courses-card__footer, .teacher-meeting-summary__aside, .teacher-meetings-filter__dynamic, .reviews-filter-dynamic, .withdrawals-form),
    body.app-role-web .support-chat-layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    body.app-role-teacher :is(.teacher-page-header, .teacher-empty-state),
    body.app-role-web :is(.teacher-page-header, .teacher-empty-state) {
        border-radius: 1.35rem;
        padding: 1rem;
    }

    body.app-role-teacher .teacher-page-header__copy,
    body.app-role-web .teacher-page-header__copy {
        flex-direction: column;
    }

    body.app-role-teacher .teacher-page-header__actions,
    body.app-role-web .teacher-page-header__actions,
    body.app-role-teacher .teacher-empty-state__actions,
    body.app-role-web .teacher-empty-state__actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    body.app-role-teacher :is(.teacher-courses-hero__stats, .teacher-meetings-stats, .withdrawals-kpis, .ref-kpi-grid, [data-reviews-kpis], .teacher-metric-strip) {
        grid-template-columns: 1fr;
    }

    body.app-role-teacher .withdrawals-request__summary {
        grid-template-columns: 1fr;
    }

    body.app-role-teacher .ref-table thead {
        display: none;
    }

    body.app-role-teacher .ref-table tbody tr {
        display: grid;
        gap: 0.55rem;
        padding: 0.95rem 0;
        border-top: 1px solid var(--teacher-ui-border);
    }

    body.app-role-teacher .ref-table tbody td[data-label] {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0;
    }

    body.app-role-teacher .ref-table tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--teacher-ui-text-muted);
        font-weight: 700;
    }
}

/* === Module refactor: shared back-office components === */
.app-page-hero__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.app-page-hero__intro {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 26rem;
}

.app-page-hero__aside,
.app-section-head__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.app-page-hero__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.15rem;
}

.app-page-hero__footer-copy {
    flex: 1 1 18rem;
}

.app-page-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.app-page-hero__stat {
    display: grid;
    gap: 0.22rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-border) 86%);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%);
}

.app-page-hero__stat-label {
    margin: 0;
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-page-hero__stat-value {
    margin: 0;
    font-family: var(--app-font-display);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    line-height: 1.1;
    font-weight: 650;
    color: var(--app-text);
}

.notifications-page,
.support-hub,
main.profile-page {
    width: min(100%, 86rem);
}

.notifications-summary-strip .app-summary-card__value {
    font-size: clamp(1.2rem, 1.8vw, 1.9rem);
}

.notifications-scope-card {
    position: sticky;
    top: calc(var(--app-toolbar-offset-current, 0px) + 0.65rem);
    z-index: 20;
    backdrop-filter: blur(14px);
}

.notifications-scope-links,
.notifications-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.notifications-meta {
    justify-content: flex-end;
}

.notifications-page .app-page-list-item {
    display: grid;
    gap: 0.9rem;
}

body[data-view="teacher/notifications"] .notifications-page,
body[data-view="teacher/notifications"] .teacher-hub-main {
    gap: 1rem;
}

body[data-view="teacher/notifications"] .notifications-page {
    width: 100%;
    max-width: 100%;
}

body[data-view="teacher/notifications"] .notifications-summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    gap: 0.7rem;
}

body[data-view="teacher/notifications"] .notifications-summary-strip .app-summary-card {
    gap: 0.24rem;
    padding: 0.78rem 0.88rem;
    border-radius: 1rem;
}

body[data-view="teacher/notifications"] .notifications-summary-strip .app-summary-card::before {
    height: 0.18rem;
}

body[data-view="teacher/notifications"] .notifications-summary-strip .app-summary-card__label {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
}

body[data-view="teacher/notifications"] .notifications-summary-strip .app-summary-card__value {
    font-size: clamp(1rem, 1.35vw, 1.45rem);
}

body[data-view="teacher/notifications"] .notifications-summary-strip .app-summary-card__meta {
    font-size: 0.76rem;
    line-height: 1.35;
}

body[data-view="teacher/notifications"] .notifications-page .app-page-list-item {
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, var(--app-border) 88%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 2%, var(--app-surface) 98%);
    box-shadow: 0 18px 34px -34px rgba(15, 23, 42, 0.18);
}

body[data-view="teacher/notifications"] .notifications-page .app-page-list-item {
    padding: 0.8rem 1.15rem;
    gap: 0.7rem;
}

body[data-view="teacher/notifications"] .notifications-page .app-page-list-item > .flex:not(.mt-3) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 0.9rem;
    row-gap: 0.35rem;
}

body[data-view="teacher/notifications"] .notifications-page .app-page-list-item > .flex:not(.mt-3) > p {
    justify-self: end;
    text-align: right;
    margin-top: 0.1rem;
}

body[data-view="teacher/notifications"] .notifications-page .app-page-list-item > .mt-3 {
    margin-top: 0;
    padding-left: calc(2.5rem + 0.75rem);
    gap: 0.55rem;
}

body[data-view="teacher/notifications"] .notifications-page ul.space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.6rem;
}

body[data-view="teacher/notifications"] .notifications-page ul.space-y-3 {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, var(--app-border) 86%);
    border-radius: 1.3rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, var(--app-surface-strong) 96%), var(--app-surface));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 18px 32px -30px rgba(15, 23, 42, 0.25);
}

body[data-view="teacher/notifications"] .notifications-page ul.space-y-3 > .app-page-list-item {
    margin-inline: 0;
}

body[data-view="teacher/notifications"] .notifications-page .app-page-list-item .app-status-pill {
    font-size: 0.68rem;
    padding: 0.18rem 0.55rem;
    letter-spacing: 0.04em;
}

body[data-view="teacher/notifications"] .notifications-page .app-page-section-card:not(.notifications-scope-card) .app-section-head {
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
}

body[data-view="teacher/notifications"] .notifications-page .app-page-section-card:not(.notifications-scope-card) .app-section-head__desc {
    font-size: 0.85rem;
}

body[data-view="teacher/notifications"] .notifications-scope-card {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, var(--app-border) 90%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 3%, var(--app-surface) 97%);
    padding: 1rem 1.1rem;
}

body[data-view="teacher/notifications"] .notifications-scope-card .app-section-head__desc {
    font-size: 0.85rem;
    max-width: 48rem;
    margin-bottom: 0.35rem;
}

body[data-view="teacher/notifications"] .notifications-scope-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    gap: 0.5rem;
    scrollbar-width: thin;
}

body[data-view="teacher/notifications"] .notifications-scope-links .app-segmented-link {
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, var(--app-surface) 94%);
}

body[data-view="teacher/notifications"] .notifications-scope-links .app-segmented-link--active {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--app-surface) 82%);
    font-weight: 700;
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.35);
}
.notif-inline-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-right: 0.2rem;
    vertical-align: baseline;
}

.notif-message-body {
    overflow-wrap: anywhere;
}

.notif-body-link {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, var(--app-text) 22%);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    word-break: break-word;
}

.notif-body-link:hover {
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 92%, var(--app-text) 8%);
}

.notif-copy-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0.18rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, var(--app-border) 82%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, var(--app-surface) 95%);
    color: var(--app-text);
    font-size: var(--app-text-2xs);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--app-transition-fast), background var(--app-transition-fast), color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}

.notif-copy-link-btn:hover {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 28%, var(--app-border) 72%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, var(--app-surface) 92%);
}

.notif-copy-link-btn:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 38%, var(--app-border) 62%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, transparent);
}

.notif-copy-link-btn:disabled {
    cursor: default;
    opacity: 0.75;
}

.support-chat-layout {
    align-items: start;
}

.support-thread-panel {
    min-height: 38rem;
}

.support-thread-panel .support-thread-messages {
    min-height: 18rem;
}

main.profile-page {
    padding-bottom: 6.5rem;
}

/* === Module refactor: statistics polish === */
body[data-view="teacher/statistics"] .stats-hero__kpis .stats-kpi {
    --stats-kpi-accent: #2563eb;
    background: linear-gradient(160deg, color-mix(in srgb, var(--stats-kpi-accent) 18%, rgba(15, 23, 42, 0.94) 82%), rgba(12, 20, 36, 0.92));
    border-color: color-mix(in srgb, var(--stats-kpi-accent) 34%, rgba(148, 163, 184, 0.22) 66%);
}

body[data-view="teacher/statistics"] .stats-hero__kpis .stats-kpi:nth-child(2) {
    --stats-kpi-accent: #10b981;
}

body[data-view="teacher/statistics"] .stats-hero__kpis .stats-kpi:nth-child(3) {
    --stats-kpi-accent: #f59e0b;
}

body[data-view="teacher/statistics"] .stats-hero__kpis .stats-kpi:nth-child(4) {
    --stats-kpi-accent: #8b5cf6;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] {
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 42%), radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 40%), linear-gradient(180deg, #f6f9ff 0%, #eef4ff 55%, #f8fbff 100%);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-bg__grid {
    background-image: linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px);
    opacity: 0.45;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-card {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 255, 0.96));
    box-shadow: 0 24px 34px -30px rgba(37, 99, 235, 0.18);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] :is(.stats-title, .stats-section__title, .stats-filter__title, .stats-goal__value, .stats-kpi__value, .stats-cash strong, .stats-metrics strong, .stats-status strong, .stats-table__title, .stats-affiliate__card strong) {
    color: #0f172a;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] :is(.stats-subtitle, .stats-section__subtitle, .stats-filter__subtitle, .stats-kicker, .stats-section__kicker, .stats-goal__label, .stats-goal__meta, .stats-kpi__label, .stats-kpi__meta, .stats-cash span, .stats-metrics p, .stats-status span, .stats-chart__label, .stats-section__meta, .stats-link, .stats-empty, .stats-timeline__item p, .stats-teacher-chart__range, .stats-teacher-chart__axis-item) {
    color: #475569;
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] :is(.stats-kpi, .stats-goal, .stats-chart__bar, .stats-list__item, .stats-timeline__item, .stats-status > div, .stats-metrics > div, .stats-cash div, .stats-affiliate__card, .stats-table__row) {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(241, 246, 255, 0.94));
    border-color: rgba(148, 163, 184, 0.2);
}

html:not(.dark):not([data-theme="dark"]) body[data-view="teacher/statistics"] .stats-table__head {
    color: #64748b;
}

@media (max-width: 1024px) {
    .notifications-meta {
        justify-content: flex-start;
    }

    .support-chat-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .app-page-hero__aside {
        justify-content: flex-start;
    }

    .app-page-hero__footer {
        flex-direction: column;
        align-items: stretch;
    }

    main.profile-page,
    .notifications-page,
    .support-hub {
        width: 100%;
    }
}

/* === Module refactor: withdrawals and referrals polish === */
body[data-view="teacher/withdrawals"] .withdrawals-hero .app-page-hero__stats {
    min-width: min(100%, 34rem);
}

body[data-view="teacher/withdrawals"] .withdrawals-hero .app-page-hero__actions,
body[data-view="teacher/referrals"] .ref-page-hero .app-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

body[data-view="teacher/withdrawals"] .withdrawals-section-head {
    margin-bottom: 1rem;
}

body[data-view="teacher/referrals"] .ref-page-hero .app-page-hero__footer-copy {
    flex: 1 1 36rem;
}

body[data-view="teacher/referrals"] .ref-page-hero .ref-link-zone {
    margin-top: 0;
}

body[data-view="teacher/referrals"] .ref-sec-head .app-section-head__desc {
    max-width: 42rem;
}

@media (max-width: 720px) {
    body[data-view="teacher/withdrawals"] .withdrawals-hero .app-page-hero__actions,
    body[data-view="teacher/referrals"] .ref-page-hero .app-page-hero__actions {
        justify-content: stretch;
    }

    body[data-view="teacher/withdrawals"] .withdrawals-hero .app-page-hero__actions > *,
    body[data-view="teacher/referrals"] .ref-page-hero .app-page-hero__actions > * {
        width: 100%;
        justify-content: center;
    }
}

/* Student workspace refresh */
body[data-view^="student/"] {
    --student-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    --student-panel-soft-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.74));
    --student-panel-border: rgba(148, 163, 184, 0.18);
    --student-panel-shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.22);
    --student-muted: #64748b;
    --student-strong: #0f172a;
}

html.dark body[data-view^="student/"],
html[data-theme="dark"] body[data-view^="student/"] {
    --student-panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.62));
    --student-panel-soft-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0.5));
    --student-panel-border: rgba(71, 85, 105, 0.42);
    --student-panel-shadow: 0 26px 50px -38px rgba(2, 6, 23, 0.72);
    --student-muted: #94a3b8;
    --student-strong: #e2e8f0;
}

body[data-view^="student/"] .student-page-header.app-page-hero {
    border-color: var(--student-panel-border);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 38%),
        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.11), transparent 40%),
        var(--student-panel-bg);
    box-shadow: var(--student-panel-shadow);
}

body[data-view^="student/"] .student-page-header .app-page-hero__header {
    gap: 1.5rem;
    align-items: flex-start;
}

body[data-view^="student/"] .student-page-header .app-page-hero__actions {
    align-items: flex-start;
}

.student-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.875rem;
    width: min(100%, 680px);
}

.student-hero-stat {
    min-width: 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.82);
    border-radius: 1.25rem;
    padding: 0.95rem 1rem;
}

html.dark .student-hero-stat,
html[data-theme="dark"] .student-hero-stat {
    border-color: rgba(71, 85, 105, 0.42);
    background: rgba(15, 23, 42, 0.56);
}

.student-hero-stat__label,
.student-stat-card__label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--student-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-hero-stat__value,
.student-stat-card__value {
    margin-top: 0.55rem;
    max-width: 100%;
    color: var(--student-strong);
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 700;
    line-height: 1.05;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.student-hero-stat__meta,
.student-stat-card__meta {
    margin-top: 0.35rem;
    color: var(--student-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.student-stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.student-stat-card {
    min-width: 0;
    border: 1px solid var(--student-panel-border);
    background: var(--student-panel-bg);
    box-shadow: var(--student-panel-shadow);
    border-radius: 1.5rem;
    padding: 1rem 1.1rem;
}

.student-stat-card--primary,
.student-stat-card--info {
    border-color: rgba(37, 99, 235, 0.2);
}

.student-stat-card--success {
    border-color: rgba(5, 150, 105, 0.2);
}

.student-stat-card--warning {
    border-color: rgba(245, 158, 11, 0.25);
}

.student-stat-card--danger {
    border-color: rgba(239, 68, 68, 0.24);
}

.student-panel {
    min-width: 0;
    border: 1px solid var(--student-panel-border);
    background: var(--student-panel-bg);
    box-shadow: var(--student-panel-shadow);
    border-radius: 1.75rem;
    padding: 1.25rem;
}

.student-panel--soft {
    background: var(--student-panel-soft-bg);
}

.student-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.student-panel__eyebrow {
    color: var(--student-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.student-panel__title {
    margin-top: 0.35rem;
    color: var(--student-strong);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.student-panel__desc {
    margin-top: 0.35rem;
    color: var(--student-muted);
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 48rem;
}

.student-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.student-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.student-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.student-card {
    min-width: 0;
    border: 1px solid var(--student-panel-border);
    background: rgba(255, 255, 255, 0.78);
    border-radius: 1.5rem;
    padding: 1.1rem;
}

html.dark .student-card,
html[data-theme="dark"] .student-card {
    border-color: rgba(71, 85, 105, 0.42);
    background: rgba(15, 23, 42, 0.52);
}

.student-card--feature {
    background: linear-gradient(140deg, rgba(37, 99, 235, 0.08), rgba(255, 255, 255, 0.95));
}

html.dark .student-card--feature,
html[data-theme="dark"] .student-card--feature {
    background: linear-gradient(140deg, rgba(37, 99, 235, 0.16), rgba(15, 23, 42, 0.6));
}

.student-card__eyebrow {
    color: var(--student-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-card__title {
    margin-top: 0.4rem;
    color: var(--student-strong);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.student-card__meta {
    margin-top: 0.4rem;
    color: var(--student-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.student-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
}

.student-course-progress {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}

.student-course-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
}

.student-inline-code {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.55rem 0.72rem;
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.06);
    color: var(--student-strong);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

html.dark .student-inline-code,
html[data-theme="dark"] .student-inline-code {
    background: rgba(148, 163, 184, 0.14);
}

.student-hero-stat__value--code {
    font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: clamp(0.98rem, 1.4vw, 1.14rem);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.student-copy-field {
    display: grid;
    gap: 0.75rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.student-filter-bar {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.5rem;
    border: 1px solid var(--student-panel-border);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 38px -32px rgba(15, 23, 42, 0.24);
}

html.dark .student-filter-bar,
html[data-theme="dark"] .student-filter-bar {
    background: rgba(15, 23, 42, 0.82);
}

.student-filter-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    color: var(--student-muted);
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 160ms ease;
}

.student-filter-link:hover,
.student-filter-link:focus-visible,
.student-filter-link.is-active {
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.08);
    color: #0f172a;
}

html.dark .student-filter-link:hover,
html.dark .student-filter-link:focus-visible,
html.dark .student-filter-link.is-active,
html[data-theme="dark"] .student-filter-link:hover,
html[data-theme="dark"] .student-filter-link:focus-visible,
html[data-theme="dark"] .student-filter-link.is-active {
    color: #f8fafc;
}

body[data-view="student/notifications"] .notifications-page,
body[data-view="student/notifications"] .student-content-main {
    gap: 1.25rem;
}

body[data-view="student/notifications"] .app-page-list-item {
    border: 1px solid var(--student-panel-border);
    background: rgba(255, 255, 255, 0.78);
    border-radius: 1.35rem;
    box-shadow: 0 20px 36px -34px rgba(15, 23, 42, 0.18);
}

html.dark body[data-view="student/notifications"] .app-page-list-item,
html[data-theme="dark"] body[data-view="student/notifications"] .app-page-list-item {
    background: rgba(15, 23, 42, 0.58);
}

body[data-view="student/orders"] .app-transaction-card {
    border-color: var(--student-panel-border);
    background: var(--student-panel-bg);
    box-shadow: var(--student-panel-shadow);
}

body[data-view="student/orders"] .app-transaction-card__header,
body[data-view="student/orders"] .app-transaction-card__footer {
    gap: 1rem;
}

main.profile-page.student-content-main {
    padding-bottom: 6rem;
}

[data-profile-action-bar] {
    position: sticky;
    bottom: 0.75rem;
    inset-inline: auto;
    padding: 0;
}

[data-profile-action-bar] > div {
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 44px -34px rgba(15, 23, 42, 0.28);
}

.student-content-main.support-hub .support-chat-layout {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 1rem;
}

.student-content-main.support-hub :is(.support-conv-panel, .support-thread-panel),
main.profile-page.student-content-main :is(section.rounded-3xl, form.rounded-3xl) {
    box-shadow: var(--student-panel-shadow);
}

.student-content-main.support-hub .support-thread-panel {
    min-height: 0;
}

.student-content-main.support-hub .support-thread-messages {
    min-height: 18rem;
    max-height: min(56vh, 42rem);
}

@media (max-width: 1024px) {
    .student-content-main.support-hub .support-chat-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .student-page-header .app-page-hero__actions {
        width: 100%;
    }

    .student-page-header .app-page-hero__actions > * {
        flex: 1 1 calc(50% - 0.5rem);
        justify-content: center;
    }

    .student-copy-field {
        grid-template-columns: 1fr;
    }

    .student-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [data-profile-action-bar] > div {
        border-radius: 1.15rem;
    }
}

@media (max-width: 540px) {
    .student-hero-stats,
    .student-stat-grid,
    .student-card-grid {
        grid-template-columns: 1fr;
    }

    .student-page-header .app-page-hero__actions > * {
        flex-basis: 100%;
    }
}

body:is([data-view="web/profile"], [data-view="teacher/profile"], [data-view="student/profile"], [data-view="web/support"], [data-view="teacher/support"], [data-view="student/support"]) {
    --student-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    --student-panel-soft-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.74));
    --student-panel-border: rgba(148, 163, 184, 0.18);
    --student-panel-shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.22);
    --student-muted: #64748b;
    --student-strong: #0f172a;
}

html.dark body:is([data-view="web/profile"], [data-view="teacher/profile"], [data-view="student/profile"], [data-view="web/support"], [data-view="teacher/support"], [data-view="student/support"]),
html[data-theme="dark"] body:is([data-view="web/profile"], [data-view="teacher/profile"], [data-view="student/profile"], [data-view="web/support"], [data-view="teacher/support"], [data-view="student/support"]) {
    --student-panel-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.62));
    --student-panel-soft-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0.5));
    --student-panel-border: rgba(71, 85, 105, 0.42);
    --student-panel-shadow: 0 26px 50px -38px rgba(2, 6, 23, 0.72);
    --student-muted: #94a3b8;
    --student-strong: #e2e8f0;
}

body:is([data-view="web/profile"], [data-view="teacher/profile"], [data-view="student/profile"], [data-view="web/support"], [data-view="teacher/support"], [data-view="student/support"]) .student-page-header.app-page-hero {
    border-color: var(--student-panel-border);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 38%),
        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.11), transparent 40%),
        var(--student-panel-bg);
    box-shadow: var(--student-panel-shadow);
}

body:is([data-view="web/profile"], [data-view="teacher/profile"], [data-view="student/profile"], [data-view="web/support"], [data-view="teacher/support"], [data-view="student/support"]) .student-page-header .app-page-hero__header {
    gap: 1.5rem;
    align-items: flex-start;
}

body:is([data-view="web/profile"], [data-view="teacher/profile"], [data-view="student/profile"], [data-view="web/support"], [data-view="teacher/support"], [data-view="student/support"]) .student-page-header .app-page-hero__actions {
    align-items: flex-start;
}

body[data-view$="/support"] .support-workspace {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(300px, 360px);
    align-items: start;
}

body[data-view$="/support"] .support-workspace > * {
    min-width: 0;
}

body[data-view$="/support"] .support-conv-panel,
body[data-view$="/support"] .support-thread-panel,
body[data-view$="/support"] .support-compose-panel {
    min-height: 0;
}

body[data-view$="/support"] .support-compose-panel {
    position: sticky;
    top: 5.25rem;
}

body[data-view$="/support"] .support-thread-messages {
    min-height: 18rem;
    max-height: min(58vh, 44rem);
    overflow-y: auto;
}

body.profile-actions-managed [data-profile-action-bar] {
    position: sticky;
    bottom: 1rem;
    z-index: 25;
}

body.profile-actions-managed [data-profile-action-bar] > div {
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 44px -34px rgba(15, 23, 42, 0.28);
}

@media (max-width: 1280px) {
    body[data-view$="/support"] .support-workspace {
        grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    }

    body[data-view$="/support"] .support-compose-panel {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 900px) {
    body[data-view$="/support"] .support-workspace {
        grid-template-columns: 1fr;
    }
}

/* Student workspace compact density adjustments */
body.app-role-student[data-view] {
    --student-panel-shadow: 0 20px 36px -30px rgba(15, 23, 42, 0.2);
}

html.dark body.app-role-student[data-view],
html[data-theme="dark"] body.app-role-student[data-view] {
    --student-panel-shadow: 0 24px 40px -32px rgba(2, 6, 23, 0.68);
}

body.app-role-student[data-view] .student-content-main {
    max-width: 68rem;
    padding-top: 0.85rem !important;
    padding-bottom: 0.95rem !important;
}

body.app-role-student[data-view] .student-content-main > :not(script) + :not(script) {
    margin-top: 0.72rem !important;
}

body.app-role-student[data-view] .student-content-main .app-page-hero,
body.app-role-student[data-view] .student-content-main > section:first-child {
    border-radius: 1.2rem !important;
    padding: 0.78rem !important;
}

body.app-role-student[data-view] .student-content-main .app-page-hero__header,
body.app-role-student[data-view] .student-content-main > section:first-child > div:first-child {
    gap: 0.62rem !important;
}

body.app-role-student[data-view] .student-content-main .app-page-hero__title,
body.app-role-student[data-view] .student-content-main :is(h1.text-xl, h2.text-lg) {
    font-size: clamp(1.05rem, 1.3vw, 1.45rem) !important;
    line-height: 1.1 !important;
}

body.app-role-student[data-view] .student-content-main .app-page-hero__summary,
body.app-role-student[data-view] .student-content-main > section:first-child p.text-sm {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
}

body.app-role-student[data-view] .student-content-main :is(.dash-btn, .app-btn-primary, .app-segmented-link, .app-btn-soft) {
    min-height: 2.15rem;
    padding: 0.5rem 0.78rem !important;
    font-size: 0.88rem !important;
}

body.app-role-student[data-view] .student-content-main :is(a, button)[class*="rounded-xl"][class*="px-4"][class*="py-2.5"] {
    padding: 0.5rem 0.8rem !important;
    font-size: 0.88rem !important;
}

body.app-role-student[data-view] .app-status-pill {
    min-height: 1.8rem;
    padding: 0.24rem 0.58rem;
    font-size: 0.72rem;
}

body.app-role-student[data-view] .student-page-header.app-page-hero .app-page-hero__header {
    gap: 0.9rem;
}

body.app-role-student[data-view] .student-page-header.app-page-hero .app-page-hero__actions {
    gap: 0.45rem;
}

body.app-role-student[data-view] .student-hero-stats {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 0.62rem;
    width: min(100%, 620px);
}

body.app-role-student[data-view] .student-hero-stat {
    border-radius: 1.1rem;
    padding: 0.68rem 0.78rem;
}

body.app-role-student[data-view] :is(.student-hero-stat__value, .student-stat-card__value) {
    margin-top: 0.45rem;
    font-size: clamp(1.3rem, 1.75vw, 1.6rem);
}

body.app-role-student[data-view] .student-hero-stat__value--code {
    font-size: clamp(0.94rem, 1.2vw, 1.06rem);
}

body.app-role-student[data-view] :is(.student-hero-stat__meta, .student-stat-card__meta) {
    font-size: 0.8rem;
    line-height: 1.4;
}

body.app-role-student[data-view] .student-stat-card {
    border-radius: 1.25rem;
    padding: 0.76rem 0.88rem;
}

body.app-role-student[data-view] .student-panel {
    border-radius: 1.45rem;
    padding: 0.85rem;
}

body.app-role-student[data-view] .student-panel__header {
    gap: 0.68rem;
}

body.app-role-student[data-view] .student-panel__title {
    margin-top: 0.28rem;
    font-size: 1rem;
    line-height: 1.2;
}

body.app-role-student[data-view] .student-panel__desc {
    margin-top: 0.28rem;
    font-size: 0.86rem;
    line-height: 1.45;
    max-width: 42rem;
}

body.app-role-student[data-view] .student-chip-row {
    gap: 0.35rem;
}

body.app-role-student[data-view] .student-card-grid {
    gap: 0.68rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

body.app-role-student[data-view] .student-list {
    gap: 0.58rem;
}

body.app-role-student[data-view] .student-card {
    border-radius: 1.25rem;
    padding: 0.8rem;
}

body.app-role-student[data-view] .student-card__title {
    margin-top: 0.32rem;
    font-size: 0.98rem;
    line-height: 1.28;
}

body.app-role-student[data-view] .student-card__meta {
    margin-top: 0.3rem;
    font-size: 0.84rem;
    line-height: 1.45;
}

body.app-role-student[data-view] .student-card__footer {
    gap: 0.5rem;
    margin-top: 0.62rem;
}

body.app-role-student[data-view] .student-inline-code {
    padding: 0.48rem 0.64rem;
    border-radius: 0.8rem;
    font-size: 0.78rem;
}

body.app-role-student[data-view] #student-sidebar .app-shell-sidebar__brand {
    gap: 0.6rem;
    min-height: 3.7rem;
    padding: 0.72rem 0.78rem !important;
}

body.app-role-student[data-view] #student-sidebar .app-shell-sidebar__logo {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.72rem;
}

body.app-role-student[data-view] #student-sidebar .app-shell-brand-title {
    font-size: clamp(0.92rem, 0.76rem + 0.2vw, 1rem) !important;
}

body.app-role-student[data-view] #student-sidebar .app-shell-brand-meta {
    font-size: 0.74rem !important;
}

body.app-role-student[data-view] #student-sidebar .app-shell-sidebar__nav {
    padding: 0.72rem 0.72rem 0.82rem !important;
}

body.app-role-student[data-view] #student-sidebar .app-shell-sidebar__summary {
    min-height: 2rem;
    padding: 0.42rem 0.62rem !important;
}

body.app-role-student[data-view] #student-sidebar .app-shell-sidebar__section-body {
    padding: 0 0.28rem 0.28rem !important;
}

body.app-role-student[data-view] #student-sidebar .app-nav-link {
    min-height: 2.1rem;
    padding: 0.46rem 0.62rem !important;
    font-size: 0.88rem !important;
}

body.app-role-student[data-view] #student-sidebar .app-nav-link__content {
    gap: 0.58rem;
}

body.app-role-student[data-view] .student-shell-toolbar .app-shell-toolbar__title {
    font-size: clamp(1rem, 1.25vw, 1.3rem) !important;
}

body.app-role-student[data-view] .student-shell-toolbar .app-shell-toolbar__actions {
    gap: 0.45rem;
}

body.app-role-student[data-view] .student-shell-toolbar .app-shell-toolbar__heading {
    gap: 0.7rem;
}

body.app-role-student[data-view] .student-shell-toolbar :is(.student-topbar-chip, .app-shell-theme, .app-shell-burger) {
    min-height: 2.05rem;
    font-size: 0.78rem !important;
}

body.app-role-student[data-view] .student-shell-toolbar .student-topbar-chip {
    padding: 0.22rem 0.55rem !important;
}

body.app-role-student[data-view] .student-shell-toolbar :is(.app-shell-theme, .app-shell-burger) {
    width: 2.05rem;
    min-width: 2.05rem;
}

body.app-role-student[data-view] .student-content-main .mt-6 {
    margin-top: 0.85rem !important;
}

body.app-role-student[data-view] .student-content-main .mt-5 {
    margin-top: 0.68rem !important;
}

body.app-role-student[data-view] .student-content-main .mt-4 {
    margin-top: 0.52rem !important;
}

body.app-role-student[data-view] .student-content-main .gap-6 {
    gap: 0.8rem !important;
}

body.app-role-student[data-view] .student-content-main .gap-5 {
    gap: 0.72rem !important;
}

body.app-role-student[data-view] .student-content-main .gap-4 {
    gap: 0.6rem !important;
}

body.app-role-student[data-view] .student-content-main .gap-3 {
    gap: 0.5rem !important;
}

body.app-role-student[data-view] .student-content-main .space-y-6 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.8rem !important;
}

body.app-role-student[data-view] .student-content-main .space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.68rem !important;
}

body.app-role-student[data-view] .student-content-main .space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.56rem !important;
}

body.app-role-student[data-view] .student-content-main .space-y-3 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.46rem !important;
}

body.app-role-student[data-view] .student-content-main .p-5 {
    padding: 0.82rem !important;
}

body.app-role-student[data-view] .student-content-main .p-4 {
    padding: 0.7rem !important;
}

body.app-role-student[data-view] .student-content-main .py-6 {
    padding-top: 0.9rem !important;
    padding-bottom: 0.9rem !important;
}

body.app-role-student[data-view] .student-content-main .pb-10 {
    padding-bottom: 1.25rem !important;
}

body.app-role-student[data-view] .student-content-main :is(.rounded-3xl, .rounded-2xl)[class*="px-4"][class*="py-3"] {
    padding: 0.62rem 0.78rem !important;
}

body.app-role-student[data-view] .student-content-main :is(.rounded-3xl, .rounded-2xl)[class*="px-4"][class*="py-4"] {
    padding: 0.72rem 0.78rem !important;
}

body.app-role-student[data-view] .student-content-main :is(.rounded-3xl, .rounded-2xl)[class*="px-3"][class*="py-2"] {
    padding: 0.46rem 0.68rem !important;
}

body.app-role-student[data-view] .app-page-hero__footer {
    gap: 0.7rem !important;
    padding-top: 0.7rem !important;
}

@media (min-width: 768px) {
    body.app-role-student[data-view] .app-shell-sidebar {
        width: 15.6rem;
        min-width: 15.6rem;
        max-width: 15.6rem;
    }

    body.app-role-student[data-view] .app-shell-toolbar {
        left: 15.6rem !important;
        width: calc(100% - 15.6rem) !important;
    }

    body.app-role-student[data-view] .student-content-main [class*="md:p-6"] {
        padding: 0.92rem !important;
    }

    body.app-role-student[data-view] .student-content-main [class*="md:p-5"] {
        padding: 0.82rem !important;
    }
}

/* Support workspace refresh */
body[data-view$="/support"] {
    --support-pane-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    --support-pane-bg-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.74));
    --support-pane-border: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 16%, rgba(148, 163, 184, 0.28) 84%);
    --support-pane-border-strong: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 34%, rgba(148, 163, 184, 0.22) 66%);
    --support-pane-shadow: 0 26px 52px -38px rgba(15, 23, 42, 0.24);
    --support-muted: #64748b;
    --support-ink: #0f172a;
}

html.dark body[data-view$="/support"],
html[data-theme="dark"] body[data-view$="/support"] {
    --support-pane-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.82));
    --support-pane-bg-soft: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.64));
    --support-pane-border: rgba(71, 85, 105, 0.44);
    --support-pane-border-strong: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 42%, rgba(148, 163, 184, 0.24) 58%);
    --support-pane-shadow: 0 28px 58px -38px rgba(2, 6, 23, 0.74);
    --support-muted: #94a3b8;
    --support-ink: #e2e8f0;
}

body[data-view$="/support"] .support-hub--workspace {
    max-width: 88rem;
}

body[data-view$="/support"] .support-page-hero {
    border: 1px solid var(--support-pane-border);
    border-radius: 1.6rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, transparent), transparent 34%),
        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.08), transparent 36%),
        var(--support-pane-bg);
    box-shadow: var(--support-pane-shadow);
}

body[data-view$="/support"] .support-page-hero .app-page-hero__header {
    gap: 1.25rem;
    align-items: stretch;
}

body[data-view$="/support"] .support-page-hero .app-page-hero__summary {
    max-width: 62ch;
}

body[data-view$="/support"] .support-page-hero .app-page-hero__footer {
    gap: 1rem;
    align-items: flex-end;
}

body[data-view$="/support"] .support-page-hero .student-hero-stats {
    width: min(100%, 44rem);
}

body[data-view$="/support"] .support-hero-context {
    display: grid;
    gap: 0.8rem;
    min-height: 100%;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 18%, rgba(148, 163, 184, 0.24) 82%);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, transparent), transparent 38%),
        var(--support-pane-bg-soft);
    box-shadow: none;
}

body[data-view$="/support"] .support-hero-context__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body[data-view$="/support"] .support-hero-context__chip {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.78rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 26%, rgba(148, 163, 184, 0.24) 74%);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, rgba(255, 255, 255, 0.84) 92%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, #0f172a 22%);
    font-size: 0.78rem;
    font-weight: 700;
}

body[data-view$="/support"] .support-workspace {
    display: grid;
    gap: 1.05rem;
    grid-template-columns: minmax(286px, 320px) minmax(0, 1fr) minmax(290px, 330px);
    align-items: start;
}

body[data-view$="/support"] :is(.support-conv-panel, .support-thread-panel, .support-compose-panel) {
    border: 1px solid var(--support-pane-border) !important;
    border-radius: 1.45rem !important;
    background: var(--support-pane-bg) !important;
    box-shadow: var(--support-pane-shadow) !important;
    min-height: 0;
    overflow: hidden;
}

body[data-view$="/support"] .support-conv-panel,
body[data-view$="/support"] .support-thread-panel,
body[data-view$="/support"] .support-compose-panel {
    padding: 1rem !important;
}

body[data-view$="/support"] .support-conv-panel {
    display: grid;
    gap: 1rem;
}

body[data-view$="/support"] .support-thread-panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    min-height: min(78vh, 60rem);
}

body[data-view$="/support"] .support-compose-panel {
    position: sticky;
    top: calc(var(--app-toolbar-offset-current, 0px) + 1rem);
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

body.app-role-web[data-view="web/support"] .support-compose-panel {
    top: 1rem;
}

body[data-view$="/support"] .support-panel-heading,
body[data-view$="/support"] .support-composer__head,
body[data-view$="/support"] .support-side-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

body[data-view$="/support"] .support-panel-toolbar,
body[data-view$="/support"] .support-empty-actions,
body[data-view$="/support"] .support-shortcut-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

body[data-view$="/support"] .support-tab-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body[data-view$="/support"] .support-section-kicker,
body[data-view$="/support"] .support-field-label {
    margin: 0;
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 76%, var(--support-muted) 24%);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body[data-view$="/support"] .support-section-title,
body[data-view$="/support"] .support-thread-title,
body[data-view$="/support"] .support-side-card__title,
body[data-view$="/support"] .support-composer__title,
body[data-view$="/support"] .support-empty-title {
    margin: 0.2rem 0 0;
    color: var(--support-ink);
    font-family: var(--app-font-section);
    font-size: clamp(1.02rem, 1.2vw, 1.28rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
}

body[data-view$="/support"] .support-section-copy,
body[data-view$="/support"] .support-thread-meta,
body[data-view$="/support"] .support-side-card__copy,
body[data-view$="/support"] .support-empty-subtitle,
body[data-view$="/support"] .support-file-hint {
    margin: 0.28rem 0 0;
    color: var(--support-muted);
    line-height: 1.6;
}

body[data-view$="/support"] .support-search-block,
body[data-view$="/support"] .support-side-card {
    display: grid;
    gap: 0.55rem;
}

body[data-view$="/support"] .support-search-shell {
    position: relative;
    display: flex;
    align-items: center;
}

body[data-view$="/support"] .support-search-shell__icon {
    position: absolute;
    left: 0.95rem;
    color: var(--support-muted);
    pointer-events: none;
}

body[data-view$="/support"] .support-input {
    width: 100%;
    border: 1px solid var(--support-pane-border) !important;
    border-radius: 1rem;
    background: var(--support-pane-bg-soft) !important;
    color: var(--support-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

body[data-view$="/support"] .support-input::placeholder {
    color: color-mix(in srgb, var(--support-muted) 88%, transparent);
}

body[data-view$="/support"] .support-input:focus {
    border-color: var(--support-pane-border-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, transparent) !important;
    outline: none;
}

body[data-view$="/support"] .support-search-input {
    padding-left: 2.7rem !important;
}

body[data-view$="/support"] .support-list-shell {
    min-height: 26rem;
    max-height: min(70vh, 46rem);
    overflow: auto;
    padding-right: 0.2rem;
}

body[data-view$="/support"] .support-conv-list {
    display: grid;
    gap: 0.68rem;
}

body[data-view$="/support"] .support-list-empty {
    border: 1px dashed var(--support-pane-border);
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, rgba(255, 255, 255, 0.92) 95%);
    color: var(--support-muted);
    padding: 0.9rem;
    font-size: 0.82rem;
    line-height: 1.5;
}

body[data-view$="/support"] .support-conv-item {
    align-items: flex-start;
    border-color: transparent !important;
    border-radius: 1.2rem !important;
    background: var(--support-pane-bg-soft) !important;
    color: var(--support-ink) !important;
    box-shadow: none !important;
}

body[data-view$="/support"] .support-conv-item:hover {
    transform: translateY(-1px);
    border-color: var(--support-pane-border-strong) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, rgba(255, 255, 255, 0.92) 92%) !important;
}

body[data-view$="/support"] .support-conv-item.is-active {
    border-color: var(--support-pane-border-strong) !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 14%, rgba(255, 255, 255, 0.96) 86%), rgba(255, 255, 255, 0.98)) !important;
    box-shadow: 0 18px 28px -28px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 52%, rgba(15, 23, 42, 0.52)) !important;
}

html.dark body[data-view$="/support"] .support-conv-item,
html[data-theme="dark"] body[data-view$="/support"] .support-conv-item {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, rgba(15, 23, 42, 0.9) 90%) !important;
}

html.dark body[data-view$="/support"] .support-conv-item.is-active,
html[data-theme="dark"] body[data-view$="/support"] .support-conv-item.is-active {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 22%, rgba(15, 23, 42, 0.9) 78%) !important;
}

body[data-view$="/support"] :is(.support-avatar, .support-conv-avatar, .support-msg-avatar) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 34%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, #2563eb 22%), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, #0f172a 22%)) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px -24px color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 58%, transparent);
}

body[data-view$="/support"] .support-avatar--lg {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    font-size: 0.88rem;
    font-weight: 800;
}

body[data-view$="/support"] .support-unread-pill {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 18px -14px rgba(37, 99, 235, 0.52);
}

body[data-view$="/support"] .support-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--support-pane-border);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body[data-view$="/support"] .support-status-pill--neutral {
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
}

body[data-view$="/support"] .support-status-pill--open {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.22);
    color: #1d4ed8;
}

body[data-view$="/support"] .support-status-pill--waiting-support {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(217, 119, 6, 0.2);
    color: #b45309;
}

body[data-view$="/support"] .support-status-pill--waiting-user {
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(14, 165, 233, 0.18);
    color: #0369a1;
}

body[data-view$="/support"] .support-status-pill--closed {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.2);
    color: #475569;
}

body[data-view$="/support"] .support-thread-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid color-mix(in srgb, var(--support-pane-border) 88%, transparent);
}

body[data-view$="/support"] .support-thread-identity {
    display: flex;
    gap: 0.9rem;
    min-width: 0;
}

body[data-view$="/support"] .support-thread-identity__copy {
    min-width: 0;
}

body[data-view$="/support"] .support-thread-head__status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

body[data-view$="/support"] .support-thread-meta-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--support-pane-border);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, rgba(255, 255, 255, 0.9) 94%);
    color: var(--support-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

body[data-view$="/support"] .support-thread-meta-pill--soft {
    background: transparent;
}

body[data-view$="/support"] .support-inline-status {
    display: none;
}

body[data-view$="/support"] .support-inline-status:not(:empty) {
    display: flex;
    align-items: center;
    min-height: 2.9rem;
    padding: 0.72rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid var(--support-pane-border);
    font-size: 0.84rem;
    font-weight: 600;
}

body[data-view$="/support"] .support-inline-status--idle {
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 6%, rgba(255, 255, 255, 0.92) 94%);
    color: var(--support-muted);
}

body[data-view$="/support"] .support-inline-status--success {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.18);
    color: #047857;
}

body[data-view$="/support"] .support-inline-status--error {
    background: rgba(244, 63, 94, 0.12);
    border-color: rgba(244, 63, 94, 0.18);
    color: #be123c;
}

body[data-view$="/support"] .support-thread-stage {
    display: grid;
    gap: 0.9rem;
    min-height: 0;
    flex: 1 1 auto;
}

body[data-view$="/support"] .support-empty-state {
    display: grid;
    gap: 0.8rem;
    justify-items: start;
    padding: 1.3rem;
    border: 1px dashed var(--support-pane-border);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, transparent), transparent 34%),
        color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 5%, rgba(255, 255, 255, 0.94) 95%);
}

body[data-view$="/support"] .support-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 32%, transparent);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 10%, rgba(255, 255, 255, 0.88) 90%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 82%, #0f172a 18%);
}

body[data-view$="/support"] .support-thread-canvas {
    position: relative;
    display: grid;
    gap: 0.9rem;
    min-height: 18rem;
    max-height: min(58vh, 42rem) !important;
    padding: 1rem !important;
    overflow-y: auto;
    border-color: var(--support-pane-border) !important;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%),
        linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, rgba(255, 255, 255, 0.95) 96%), rgba(248, 250, 252, 0.92)) !important;
}

html.dark body[data-view$="/support"] .support-thread-canvas,
html[data-theme="dark"] body[data-view$="/support"] .support-thread-canvas {
    background:
        radial-gradient(circle at top left, rgba(148, 163, 184, 0.08), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 7%, rgba(15, 23, 42, 0.95) 93%), rgba(15, 23, 42, 0.88)) !important;
}

body[data-view$="/support"] .support-msg {
    align-items: flex-end;
}

body[data-view$="/support"] .support-msg-stack {
    max-width: min(72%, 42rem);
}

body[data-view$="/support"] .support-msg-meta {
    margin-bottom: 0.3rem;
    color: color-mix(in srgb, var(--support-muted) 88%, transparent) !important;
    font-size: 0.72rem;
}

body[data-view$="/support"] .support-msg-bubble {
    border: 1px solid var(--support-pane-border);
    border-radius: 1.25rem !important;
    padding: 0.9rem 1rem;
    line-height: 1.58;
    box-shadow: 0 16px 30px -28px rgba(15, 23, 42, 0.2);
}

body[data-view$="/support"] .support-msg-bubble.is-peer {
    background: var(--support-pane-bg-soft) !important;
    color: var(--support-ink) !important;
}

body[data-view$="/support"] .support-msg-bubble.is-self {
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 56%, transparent) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 88%, #2563eb 12%), color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 76%, #1d4ed8 24%)) !important;
    color: #ffffff !important;
}

body[data-view$="/support"] .support-msg-empty {
    border-color: var(--support-pane-border) !important;
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 4%, rgba(255, 255, 255, 0.92) 96%);
    color: var(--support-muted);
}

body[data-view$="/support"] .support-composer {
    display: grid;
    gap: 0.8rem;
    margin-top: auto;
}

body[data-view$="/support"] .support-composer__box {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem;
    border: 1px solid var(--support-pane-border);
    border-radius: 1.35rem;
    background: var(--support-pane-bg-soft);
}

body[data-view$="/support"] .support-composer__textarea {
    min-height: 8rem;
    resize: vertical;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-view$="/support"] .support-composer__textarea:focus {
    box-shadow: none !important;
}

body[data-view$="/support"] .support-composer__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--support-pane-border) 88%, transparent);
}

body[data-view$="/support"] .support-composer__tools {
    display: grid;
    gap: 0.45rem;
}

body[data-view$="/support"] :is(.support-new-btn, .support-reset, .support-file-btn, .support-empty-secondary) {
    border: 1px solid var(--support-pane-border);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, rgba(255, 255, 255, 0.94) 92%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 78%, #0f172a 22%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

body[data-view$="/support"] :is(.support-new-btn, .support-reset, .support-file-btn, .support-empty-secondary):hover {
    border-color: var(--support-pane-border-strong);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 12%, rgba(255, 255, 255, 0.92) 88%);
    color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 88%, #0f172a 12%);
}

body[data-view$="/support"] :is(.support-send-btn, .support-empty-action) {
    border: 1px solid var(--app-button-primary-border);
    background: var(--app-button-primary-bg);
    color: var(--app-button-primary-text);
    box-shadow: var(--app-button-primary-shadow);
}

body[data-view$="/support"] :is(.support-send-btn, .support-empty-action):hover {
    background: var(--app-button-primary-bg-hover);
    color: var(--app-button-primary-text);
}

body[data-view$="/support"] .support-side-card {
    padding: 1rem;
    border: 1px solid var(--support-pane-border);
    border-radius: 1.25rem;
    background: var(--support-pane-bg-soft);
}

body[data-view$="/support"] .support-context-list {
    display: grid;
    gap: 0.75rem;
    margin: 0;
}

body[data-view$="/support"] .support-context-list div {
    display: grid;
    gap: 0.16rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--support-pane-border) 82%, transparent);
}

body[data-view$="/support"] .support-context-list dt {
    color: var(--support-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body[data-view$="/support"] .support-context-list dd {
    margin: 0;
    color: var(--support-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

body[data-view$="/support"] .support-guide-list {
    display: grid;
    gap: 0.72rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-view$="/support"] .support-guide-list li {
    position: relative;
    padding-left: 1.1rem;
    color: var(--support-muted);
    line-height: 1.6;
}

body[data-view$="/support"] .support-guide-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 88%, #2563eb 12%), #0ea5e9);
}

body[data-view$="/support"] .support-shortcut-list {
    display: grid;
    gap: 0.6rem;
}

body[data-view$="/support"] .support-shortcut-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.8rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--support-pane-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.58);
    color: var(--support-ink);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

body[data-view$="/support"] .support-shortcut-link:hover {
    transform: translateY(-1px);
    border-color: var(--support-pane-border-strong);
    background: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 8%, rgba(255, 255, 255, 0.9) 92%);
}

body[data-view$="/support"] .support-shortcut-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.32rem 0.7rem;
    border: 1px solid var(--support-pane-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
    color: var(--support-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

body[data-view$="/support"] .support-shortcut-pill kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    min-height: 1.3rem;
    padding: 0 0.28rem;
    border-radius: 0.48rem;
    border: 1px solid var(--support-pane-border);
    background: rgba(255, 255, 255, 0.78);
    color: var(--support-ink);
    font-size: 0.72rem;
    font-weight: 800;
}

@media (max-width: 1280px) {
    body[data-view$="/support"] .support-workspace {
        grid-template-columns: minmax(286px, 320px) minmax(0, 1fr);
    }

    body[data-view$="/support"] .support-compose-panel {
        position: static;
        grid-column: 1 / -1;
    }
}

@media (max-width: 980px) {
    body[data-view$="/support"] .support-workspace {
        grid-template-columns: 1fr;
    }

    body[data-view$="/support"] .support-thread-panel {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    body[data-view$="/support"] .support-page-hero .app-page-hero__header,
    body[data-view$="/support"] .support-panel-heading,
    body[data-view$="/support"] .support-thread-head,
    body[data-view$="/support"] .support-composer__head,
    body[data-view$="/support"] .support-composer__footer {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-view$="/support"] .support-thread-head__status {
        justify-content: flex-start;
    }

    body[data-view$="/support"] .support-msg-stack {
        max-width: 100%;
    }

    body[data-view$="/support"] :is(.support-new-btn, .support-reset, .support-file-btn, .support-empty-secondary, .support-send-btn, .support-empty-action) {
        width: 100%;
        justify-content: center;
    }

    body[data-view$="/support"] .support-shortcut-row,
    body[data-view$="/support"] .support-empty-actions {
        width: 100%;
    }

    body[data-view$="/support"] .support-shortcut-pill {
        width: 100%;
        justify-content: center;
    }
}

/* Global site announcement */
:root {
    --app-site-announcement-offset: 0px;
}

.app-site-announcement {
    position: relative;
    z-index: 80;
    width: 100%;
    border-bottom: 1px solid rgba(14, 116, 144, 0.2);
    background:
        linear-gradient(90deg, rgba(201, 237, 242, 0.98), rgba(225, 247, 238, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    box-shadow: 0 10px 28px -22px rgba(8, 47, 73, 0.42);
}

.app-site-announcement__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    width: min(100%, 100%);
    min-height: 3.5rem;
    padding: 0.75rem 1.25rem;
}

.app-site-announcement__text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    color: #0f172a;
    text-align: center;
    font-size: var(--app-text-sm);
    line-height: 1.55;
}

.app-site-announcement__title {
    font-family: var(--app-font-ui);
    font-weight: 800;
}

.app-site-announcement__message {
    color: rgba(15, 23, 42, 0.84);
}

.app-site-announcement__link {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    color: #0f4c81;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.16em;
}

.app-site-announcement__link:hover,
.app-site-announcement__link:focus-visible {
    color: #0b3d68;
}

.app-site-announcement__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(15, 76, 129, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.54);
    color: rgba(15, 23, 42, 0.72);
    font-size: 1.3rem;
    line-height: 1;
    box-shadow: none;
}

.app-site-announcement__close:hover,
.app-site-announcement__close:focus-visible {
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
}

.app-shell-toolbar {
    top: var(--app-site-announcement-offset, 0px) !important;
}

@media (max-width: 980px) {
    .app-site-announcement__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        padding: 0.7rem 1rem;
    }

    .app-site-announcement__text {
        justify-content: flex-start;
        text-align: left;
    }
}

@media (max-width: 640px) {
    .app-site-announcement__inner {
        align-items: start;
        padding-inline: 0.85rem;
    }

    .app-site-announcement__text {
        font-size: var(--app-text-xs);
    }
}

/* Support messenger layout */
body[data-view$="/support"] {
    --support-messenger-blue: #1877f2;
    --support-messenger-blue-strong: #0f68e3;
    --support-messenger-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
    --support-messenger-surface-soft: rgba(246, 249, 255, 0.92);
    --support-messenger-border: rgba(148, 163, 184, 0.2);
    --support-messenger-shadow: 0 26px 60px -42px rgba(15, 23, 42, 0.32);
}

html.dark body[data-view$="/support"],
html[data-theme="dark"] body[data-view$="/support"] {
    --support-messenger-surface: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.92));
    --support-messenger-surface-soft: rgba(15, 23, 42, 0.78);
    --support-messenger-border: rgba(71, 85, 105, 0.46);
    --support-messenger-shadow: 0 28px 70px -44px rgba(2, 6, 23, 0.78);
}

body[data-view$="/support"] .support-page-hero--messenger {
    border: 1px solid var(--support-messenger-border);
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at top left, rgba(24, 119, 242, 0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.08), transparent 34%),
        var(--support-messenger-surface);
    box-shadow: var(--support-messenger-shadow);
}

body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__header {
    align-items: center;
    gap: 1rem;
}

body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__summary {
    max-width: 58ch;
    color: var(--support-muted);
}

body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__footer {
    align-items: center;
    gap: 0.9rem;
}

body[data-view$="/support"] .support-page-hero--messenger .student-hero-stats {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

body[data-view$="/support"] .support-page-hero--messenger .student-hero-stat {
    min-width: 10rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: none;
}

html.dark body[data-view$="/support"] .support-page-hero--messenger .student-hero-stat,
html[data-theme="dark"] body[data-view$="/support"] .support-page-hero--messenger .student-hero-stat {
    background: rgba(15, 23, 42, 0.5);
}

body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__actions > * {
    border-radius: 999px !important;
}

body[data-view$="/support"] .support-hero-presence {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 100%;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.65);
}

body[data-view$="/support"] .support-hero-presence__avatar {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, var(--support-messenger-blue));
    color: #fff;
    font-size: 0.98rem;
    font-weight: 800;
    box-shadow: 0 16px 28px -20px rgba(24, 119, 242, 0.8);
}

body[data-view$="/support"] .support-hero-presence__copy {
    display: grid;
    gap: 0.16rem;
}

body[data-view$="/support"] .support-hero-presence__eyebrow {
    margin: 0;
    color: var(--support-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body[data-view$="/support"] .support-hero-presence__title,
body[data-view$="/support"] .support-hero-presence__meta {
    margin: 0;
}

body[data-view$="/support"] .support-hero-presence__title {
    color: var(--support-ink);
    font-size: 1rem;
    font-weight: 800;
}

body[data-view$="/support"] .support-hero-presence__meta {
    color: var(--support-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

body[data-view$="/support"] .support-workspace--messenger {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(320px, 350px) minmax(0, 1fr);
    align-items: stretch;
}

body[data-view$="/support"] .support-workspace--messenger :is(.support-conv-panel, .support-thread-panel) {
    padding: 0 !important;
    border: 1px solid var(--support-messenger-border) !important;
    border-radius: 1.75rem !important;
    background: var(--support-messenger-surface) !important;
    box-shadow: var(--support-messenger-shadow) !important;
    min-height: min(78vh, 68rem);
    overflow: hidden;
}

body[data-view$="/support"] .support-sidebar-shell,
body[data-view$="/support"] .support-thread-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

body[data-view$="/support"] .support-sidebar-shell {
    gap: 0.9rem;
    padding: 1rem;
}

body[data-view$="/support"] .support-messenger-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

body[data-view$="/support"] .support-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, var(--support-messenger-blue));
    color: #fff;
    box-shadow: 0 18px 30px -22px rgba(24, 119, 242, 0.88);
    transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

body[data-view$="/support"] .support-round-btn:hover,
body[data-view$="/support"] .support-round-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 22px 34px -24px rgba(24, 119, 242, 0.94);
}

body[data-view$="/support"] .support-sidebar-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body[data-view$="/support"] .support-sidebar-summary__item {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(24, 119, 242, 0.08);
    color: color-mix(in srgb, var(--support-messenger-blue) 80%, #0f172a 20%);
    font-size: 0.76rem;
    font-weight: 700;
}

body[data-view$="/support"] .support-search-block {
    gap: 0.45rem;
}

body[data-view$="/support"] .support-search-shell {
    min-height: 3.1rem;
    padding-inline: 0.95rem;
    border: 0;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.62);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
}

html.dark body[data-view$="/support"] .support-search-shell,
html[data-theme="dark"] body[data-view$="/support"] .support-search-shell {
    background: rgba(30, 41, 59, 0.8);
}

body[data-view$="/support"] .support-search-input {
    min-height: 3.1rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body[data-view$="/support"] .support-search-input:focus {
    box-shadow: none;
}

body[data-view$="/support"] .support-panel-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

body[data-view$="/support"] .support-tab-row {
    display: inline-flex;
    gap: 0.28rem;
    padding: 0.24rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
}

body[data-view$="/support"] .support-tab {
    border: 0 !important;
    background: transparent !important;
    color: var(--support-muted) !important;
    min-height: 2.45rem;
    padding-inline: 0.95rem !important;
    box-shadow: none !important;
}

body[data-view$="/support"] .support-tab.is-active {
    background: #fff !important;
    color: var(--support-messenger-blue) !important;
    box-shadow: 0 10px 18px -18px rgba(15, 23, 42, 0.28) !important;
}

html.dark body[data-view$="/support"] .support-tab.is-active,
html[data-theme="dark"] body[data-view$="/support"] .support-tab.is-active {
    background: rgba(15, 23, 42, 0.92) !important;
}

body[data-view$="/support"] .support-reset {
    min-height: 2.45rem;
    padding-inline: 0.95rem !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--support-muted) !important;
    box-shadow: none !important;
}

body[data-view$="/support"] .support-list-shell {
    flex: 1;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

body[data-view$="/support"] .support-conv-list {
    display: grid;
    gap: 0.32rem;
    height: 100%;
    overflow-y: auto;
    padding-right: 0.2rem;
}

body[data-view$="/support"] .support-list-empty {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: 1rem;
    border-radius: 1.2rem;
    background: rgba(248, 250, 252, 0.9);
    color: var(--support-muted);
    text-align: center;
}

body[data-view$="/support"] .support-conv-item {
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.85rem !important;
    border: 0 !important;
    border-radius: 1.25rem !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-view$="/support"] .support-conv-item:hover {
    transform: none;
    background: rgba(24, 119, 242, 0.06) !important;
}

body[data-view$="/support"] .support-conv-item.is-active {
    background:
        linear-gradient(180deg, rgba(24, 119, 242, 0.12), rgba(59, 130, 246, 0.08)) !important;
    box-shadow: inset 0 0 0 1px rgba(24, 119, 242, 0.14) !important;
}

body[data-view$="/support"] .support-conv-avatar {
    position: relative;
    width: 3rem !important;
    height: 3rem !important;
    flex: 0 0 auto;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #38bdf8, var(--support-messenger-blue)) !important;
    box-shadow: 0 18px 28px -20px rgba(24, 119, 242, 0.82);
}

body[data-view$="/support"] .support-conv-avatar::after {
    content: '';
    position: absolute;
    right: 0.1rem;
    bottom: 0.12rem;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #22c55e;
}

html.dark body[data-view$="/support"] .support-conv-avatar::after,
html[data-theme="dark"] body[data-view$="/support"] .support-conv-avatar::after {
    border-color: #0f172a;
}

body[data-view$="/support"] .support-conv-title {
    color: var(--support-ink) !important;
    font-size: 0.94rem !important;
    font-weight: 800 !important;
}

body[data-view$="/support"] .support-conv-time {
    flex: 0 0 auto;
    color: var(--support-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 700;
}

body[data-view$="/support"] .support-conv-preview {
    color: var(--support-muted) !important;
    font-size: 0.8rem !important;
}

body[data-view$="/support"] .support-conv-owner {
    color: rgba(100, 116, 139, 0.86) !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body[data-view$="/support"] .support-unread-pill {
    min-width: 1.35rem !important;
    height: 1.35rem !important;
    background: var(--support-messenger-blue);
    color: #fff;
    box-shadow: 0 12px 18px -16px rgba(24, 119, 242, 0.84);
}

body[data-view$="/support"] .support-sidebar-links {
    display: grid;
    gap: 0.55rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

body[data-view$="/support"] .support-sidebar-links .support-shortcut-link {
    min-height: 2.9rem;
    padding-inline: 0.9rem;
    border: 0;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.85);
    box-shadow: none;
}

html.dark body[data-view$="/support"] .support-sidebar-links .support-shortcut-link,
html[data-theme="dark"] body[data-view$="/support"] .support-sidebar-links .support-shortcut-link {
    background: rgba(30, 41, 59, 0.7);
}

body[data-view$="/support"] .support-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(14px);
}

html.dark body[data-view$="/support"] .support-thread-head,
html[data-theme="dark"] body[data-view$="/support"] .support-thread-head {
    background: rgba(15, 23, 42, 0.66);
}

body[data-view$="/support"] .support-thread-identity {
    align-items: center;
}

body[data-view$="/support"] .support-avatar--lg {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, var(--support-messenger-blue));
    color: #fff;
    box-shadow: 0 18px 28px -20px rgba(24, 119, 242, 0.78);
}

body[data-view$="/support"] .support-thread-head__status {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

body[data-view$="/support"] .support-thread-meta-pill {
    background: rgba(248, 250, 252, 0.95);
}

html.dark body[data-view$="/support"] .support-thread-meta-pill,
html[data-theme="dark"] body[data-view$="/support"] .support-thread-meta-pill {
    background: rgba(30, 41, 59, 0.84);
}

body[data-view$="/support"] .support-thread-overview {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin: 0.95rem 1rem 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1.3rem;
    background:
        radial-gradient(circle at left center, rgba(24, 119, 242, 0.08), transparent 24%),
        rgba(248, 250, 252, 0.92);
}

html.dark body[data-view$="/support"] .support-thread-overview,
html[data-theme="dark"] body[data-view$="/support"] .support-thread-overview {
    background:
        radial-gradient(circle at left center, rgba(24, 119, 242, 0.12), transparent 24%),
        rgba(15, 23, 42, 0.6);
}

body[data-view$="/support"] .support-thread-overview__body {
    min-width: 0;
}

body[data-view$="/support"] .support-thread-overview__title {
    display: block;
    color: var(--support-ink);
    font-size: 0.96rem;
    font-weight: 800;
    line-height: 1.35;
}

body[data-view$="/support"] .support-thread-overview__copy {
    margin: 0.18rem 0 0;
    color: var(--support-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

body[data-view$="/support"] .support-thread-overview__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: flex-end;
    color: var(--support-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

body[data-view$="/support"] .support-thread-overview__meta strong {
    color: var(--support-ink);
    font-weight: 800;
}

body[data-view$="/support"] .support-inline-status {
    margin: 0.75rem 1rem 0;
}

body[data-view$="/support"] .support-thread-stage {
    flex: 1;
    min-height: 0;
    padding: 0.85rem 1rem 1rem;
    border: 0;
    background: transparent;
}

body[data-view$="/support"] .support-thread-canvas {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-height: 100%;
    padding: 1.1rem;
    border: 0;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at top center, rgba(24, 119, 242, 0.05), transparent 28%),
        linear-gradient(180deg, rgba(247, 250, 255, 0.95), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
    overflow-y: auto;
}

html.dark body[data-view$="/support"] .support-thread-canvas,
html[data-theme="dark"] body[data-view$="/support"] .support-thread-canvas {
    background:
        radial-gradient(circle at top center, rgba(24, 119, 242, 0.09), transparent 28%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.92));
}

body[data-view$="/support"] .support-empty-state {
    min-height: 100%;
    justify-items: center;
    gap: 0.9rem;
    padding: 1.8rem 1.2rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

body[data-view$="/support"] :is(.support-empty-state, .support-thread-canvas, .support-composer).hidden,
body[data-view="admin/support"] :is(.support-empty-card, .support-thread-messages, #support-message-form).hidden,
.support-hub :is(.support-empty-card, .support-thread-messages, #support-message-form).hidden {
    display: none !important;
}

body[data-view$="/support"] .support-empty-state__icon {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 1.4rem;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(24, 119, 242, 0.18));
    color: var(--support-messenger-blue);
}

body[data-view$="/support"] .support-empty-tips {
    display: grid;
    gap: 0.55rem;
    width: min(100%, 34rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-view$="/support"] .support-empty-tips li {
    position: relative;
    padding: 0.72rem 0.95rem 0.72rem 2.15rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.76);
    color: var(--support-muted);
    text-align: left;
    line-height: 1.55;
}

body[data-view$="/support"] .support-empty-tips li::before {
    content: '';
    position: absolute;
    left: 0.95rem;
    top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, var(--support-messenger-blue));
}

html.dark body[data-view$="/support"] .support-empty-tips li,
html[data-theme="dark"] body[data-view$="/support"] .support-empty-tips li {
    background: rgba(30, 41, 59, 0.72);
}

body[data-view$="/support"] .support-msg {
    margin-bottom: 0.95rem;
}

body[data-view$="/support"] .support-msg-stack {
    max-width: min(78%, 42rem);
}

body[data-view$="/support"] .support-msg-meta {
    margin-bottom: 0.35rem;
    color: rgba(100, 116, 139, 0.82) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
}

body[data-view$="/support"] .support-msg-bubble {
    padding: 0.82rem 1rem !important;
    border: 0 !important;
    box-shadow: 0 18px 24px -22px rgba(15, 23, 42, 0.28);
}

body[data-view$="/support"] .support-msg-bubble.is-self {
    border-radius: 1.35rem 1.35rem 0.45rem 1.35rem !important;
    background: linear-gradient(135deg, #1d9bf0, var(--support-messenger-blue)) !important;
    color: #fff !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view$="/support"] .support-msg.is-self .support-msg-meta {
    color: rgba(9, 83, 193, 0.86) !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view$="/support"] .support-msg-bubble.is-self {
    background: linear-gradient(135deg, #0b63f6, #0057ff) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 0 rgba(2, 6, 23, 0.14);
    box-shadow: 0 24px 34px -26px rgba(0, 87, 255, 0.72);
}

html:not(.dark):not([data-theme="dark"]) body[data-view$="/support"] .support-msg-bubble.is-self :is(div, span, strong, a) {
    color: inherit !important;
}

html:not(.dark):not([data-theme="dark"]) body[data-view$="/support"] .support-msg-bubble.is-self .support-attachment-link {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

body[data-view$="/support"] .support-msg-bubble.is-peer {
    border-radius: 1.35rem 1.35rem 1.35rem 0.45rem !important;
    background: rgba(226, 232, 240, 0.74) !important;
    color: var(--support-ink) !important;
}

html.dark body[data-view$="/support"] .support-msg-bubble.is-peer,
html[data-theme="dark"] body[data-view$="/support"] .support-msg-bubble.is-peer {
    background: rgba(30, 41, 59, 0.92) !important;
}

body[data-view$="/support"] .support-msg-avatar {
    background: linear-gradient(135deg, #0f172a, #334155) !important;
}

body[data-view$="/support"] .support-attachment-link {
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 22px -20px rgba(15, 23, 42, 0.24);
}

body[data-view$="/support"] .support-msg-empty {
    border: 1px dashed rgba(148, 163, 184, 0.36);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.7);
    color: var(--support-muted);
}

body[data-view$="/support"] .support-composer--messenger {
    padding: 0 1rem 1rem;
}

body[data-view$="/support"] .support-composer__shell {
    padding: 0.82rem 0.92rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 38px -30px rgba(15, 23, 42, 0.34);
}

html.dark body[data-view$="/support"] .support-composer__shell,
html[data-theme="dark"] body[data-view$="/support"] .support-composer__shell {
    background: rgba(15, 23, 42, 0.94);
}

body[data-view$="/support"] .support-field-label--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body[data-view$="/support"] .support-composer__box {
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: transparent;
}

body[data-view$="/support"] .support-composer__textarea {
    min-height: 2.9rem;
    max-height: 12rem;
    padding: 0.18rem 0.1rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    resize: none;
}

body[data-view$="/support"] .support-composer__textarea:focus {
    box-shadow: none;
}

body[data-view$="/support"] .support-composer__footer {
    align-items: center;
    gap: 0.75rem;
}

body[data-view$="/support"] .support-composer__tools {
    flex: 1;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

body[data-view$="/support"] .support-file-btn {
    min-height: 2.8rem;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(226, 232, 240, 0.6) !important;
    box-shadow: none !important;
}

body[data-view$="/support"] .support-file-hint {
    color: var(--support-muted);
    font-size: 0.78rem;
}

body[data-view$="/support"] .support-send-btn {
    min-width: 3rem;
    min-height: 3rem;
    padding-inline: 1rem !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #3b82f6, var(--support-messenger-blue)) !important;
    box-shadow: 0 18px 28px -20px rgba(24, 119, 242, 0.86) !important;
}

body[data-view$="/support"] .support-send-btn:hover,
body[data-view$="/support"] .support-send-btn:focus-visible {
    background: linear-gradient(135deg, #3b82f6, var(--support-messenger-blue-strong)) !important;
}

body[data-view$="/support"] .support-empty-secondary,
body[data-view$="/support"] .support-empty-action {
    border-radius: 999px !important;
}

@media (max-width: 1280px) {
    body[data-view$="/support"] .support-workspace--messenger {
        grid-template-columns: minmax(290px, 320px) minmax(0, 1fr);
    }
}

@media (max-width: 980px) {
    body[data-view$="/support"] .support-workspace--messenger {
        grid-template-columns: 1fr;
    }

    body[data-view$="/support"] .support-workspace--messenger :is(.support-conv-panel, .support-thread-panel) {
        min-height: auto;
    }

    body[data-view$="/support"] .support-thread-overview {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    body[data-view$="/support"] .support-thread-overview__meta {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__header,
    body[data-view$="/support"] .support-page-hero--messenger .app-page-hero__footer,
    body[data-view$="/support"] .support-thread-head,
    body[data-view$="/support"] .support-panel-toolbar,
    body[data-view$="/support"] .support-composer__footer {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-view$="/support"] .support-thread-head__status,
    body[data-view$="/support"] .support-thread-overview__meta {
        justify-content: flex-start;
    }

    body[data-view$="/support"] .support-msg-stack {
        max-width: 92%;
    }

    body[data-view$="/support"] .support-round-btn,
    body[data-view$="/support"] .support-empty-action,
    body[data-view$="/support"] .support-empty-secondary,
    body[data-view$="/support"] .support-send-btn {
        width: 100%;
        justify-content: center;
    }
}
body[data-view="teacher/notifications"] .teacher-hub-main {
    width: 100%;
    max-width: none;
}

body[data-view="teacher/notifications"] .notifications-page {
    padding-left: 0;
    padding-right: 0;
}

/* Exam create: align palette with course create/content (final override) */
body.app-role-teacher[data-view="teacher/exams_create"] {
    --exam-sync-surface: var(--teacher-ui-surface, var(--app-surface));
    --exam-sync-surface-soft: var(--teacher-ui-surface-soft, var(--app-surface));
    --exam-sync-surface-muted: var(--teacher-ui-surface-muted, var(--app-surface));
    --exam-sync-border: var(--teacher-ui-border, var(--app-border));
    --exam-sync-border-strong: var(--teacher-ui-border-strong, var(--app-border-strong));
    --exam-sync-text: var(--teacher-ui-text, var(--app-text));
    --exam-sync-muted: var(--teacher-ui-text-muted, var(--app-muted));
    --exam-sync-shadow: var(--teacher-ui-shadow, var(--app-shadow));
    --exam-sync-shadow-soft: var(--teacher-ui-shadow-soft, var(--app-shadow-soft));
    --exam-sync-accent: var(--teacher-ui-accent, var(--app-primary-600, #2563eb));
    --exam-sync-success: #10b981;
    --exam-sync-warning: #f59e0b;
    --exam-sync-danger: #ef4444;
    background: linear-gradient(180deg, var(--exam-sync-surface-muted), var(--exam-sync-surface)) !important;
    color: var(--exam-sync-text);
}

body.app-role-teacher[data-view="teacher/exams_create"] .teacher-workflow-main {
    color: var(--exam-sync-text);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero {
    background: linear-gradient(180deg, var(--exam-sync-surface), var(--exam-sync-surface-soft)) !important;
    border-color: var(--exam-sync-border-strong) !important;
    box-shadow: var(--exam-sync-shadow) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero::before,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero::after {
    content: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    background: var(--exam-sync-surface) !important;
    border-color: var(--exam-sync-border) !important;
    box-shadow: var(--exam-sync-shadow-soft) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
)::before {
    content: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-tool-card,
    .exam-create-setting-card,
    .exam-create-reference,
    .exam-create-summary-item,
    .exam-create-preview-card__sample,
    .exam-create-compliance-item,
    .q-block
) {
    background: var(--exam-sync-surface-soft) !important;
    border-color: color-mix(in srgb, var(--exam-sync-border-strong) 60%, var(--exam-sync-border) 40%) !important;
    box-shadow: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-hero__eyebrow,
    .exam-create-hero__subtitle,
    .exam-create-stat__label,
    .exam-create-stat__meta,
    .exam-create-card__kicker,
    .exam-create-card__subtitle,
    .exam-create-help-card__meta,
    .exam-create-tool-card__subtitle,
    .exam-create-tool-card__hint,
    .exam-create-builder__panel-label,
    .exam-create-preview-card__meta,
    .exam-create-preview-card__description,
    .exam-create-reference__label,
    .exam-create-reference__meta,
    .exam-create-summary-card__progress-meta,
    .exam-create-summary-item__label,
    .exam-create-type-option__subtitle,
    .exam-create-type-option__lock,
    .exam-create-subpanel__subtitle,
    .exam-create-subpanel__note,
    .exam-create-actions-meta
) {
    color: var(--exam-sync-muted) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-hero__title,
    .exam-create-stat__value,
    .exam-create-card__title,
    .exam-create-help-card__title,
    .exam-create-field__label,
    .exam-create-setting-card__title,
    .exam-create-reference__value,
    .exam-create-preview-card__title,
    .exam-create-tool-card__title,
    .exam-create-type-option__title,
    .exam-create-summary-note__title,
    .exam-create-summary-item__meta,
    .exam-create-actions-label
) {
    color: var(--exam-sync-text) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-card__icon,
    .exam-create-help-card__icon,
    .exam-create-type-option__icon
) {
    background: color-mix(in srgb, var(--app-primary-600, #2563eb) 12%, var(--exam-sync-surface) 88%) !important;
    border-color: color-mix(in srgb, var(--app-primary-600, #2563eb) 24%, var(--exam-sync-border) 76%) !important;
    color: color-mix(in srgb, var(--app-primary-600, #2563eb) 70%, var(--exam-sync-text) 30%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stat {
    background: color-mix(in srgb, var(--app-primary-600, #2563eb) 6%, var(--exam-sync-surface) 94%) !important;
    border-color: color-mix(in srgb, var(--app-primary-600, #2563eb) 22%, var(--exam-sync-border) 78%) !important;
    box-shadow: var(--exam-sync-shadow-soft) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-action-btn--primary {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--app-primary-600, #2563eb), #1e40af) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-action-btn--secondary {
    border-color: var(--exam-sync-border) !important;
    background: color-mix(in srgb, var(--exam-sync-accent) 4%, var(--exam-sync-surface) 96%) !important;
    color: var(--exam-sync-text) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option {
    background: var(--exam-sync-surface-soft) !important;
    border-color: var(--exam-sync-border) !important;
    box-shadow: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    background: color-mix(in srgb, var(--exam-sync-accent) 8%, var(--exam-sync-surface) 92%) !important;
    border-color: var(--exam-sync-border-strong) !important;
    box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.2) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option:hover {
    border-color: var(--exam-sync-border-strong) !important;
    box-shadow: 0 10px 20px -18px rgba(15, 23, 42, 0.18) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .variant-tab {
    background: var(--exam-sync-surface) !important;
    border-color: var(--exam-sync-border) !important;
    box-shadow: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.variant-tab.is-active, .variant-tab.border-emerald-400) {
    background: color-mix(in srgb, var(--exam-sync-accent) 10%, var(--exam-sync-surface) 90%) !important;
    border-color: var(--exam-sync-border-strong) !important;
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.2) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill {
    background: color-mix(in srgb, var(--exam-sync-accent) 9%, var(--exam-sync-surface) 91%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-accent) 34%, var(--exam-sync-border) 66%) !important;
    color: color-mix(in srgb, var(--exam-sync-accent) 70%, var(--exam-sync-text) 30%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill--success {
    background: color-mix(in srgb, var(--exam-sync-success) 12%, var(--exam-sync-surface) 88%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-success) 40%, var(--exam-sync-border) 60%) !important;
    color: #047857 !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill--warning {
    background: color-mix(in srgb, var(--exam-sync-warning) 12%, var(--exam-sync-surface) 88%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-warning) 40%, var(--exam-sync-border) 60%) !important;
    color: #b45309 !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill--info {
    background: color-mix(in srgb, var(--exam-sync-accent) 12%, var(--exam-sync-surface) 88%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-accent) 40%, var(--exam-sync-border) 60%) !important;
    color: color-mix(in srgb, var(--exam-sync-accent) 70%, #1e293b 30%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-note {
    background: color-mix(in srgb, var(--exam-sync-accent) 5%, var(--exam-sync-surface) 95%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-accent) 18%, var(--exam-sync-border) 82%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-banner {
    background: color-mix(in srgb, var(--exam-sync-accent) 6%, var(--exam-sync-surface) 94%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-accent) 16%, var(--exam-sync-border) 84%) !important;
    box-shadow: var(--exam-sync-shadow-soft) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-banner--error,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-inline-error {
    background: color-mix(in srgb, var(--exam-sync-danger) 6%, var(--exam-sync-surface) 94%) !important;
    border-color: color-mix(in srgb, var(--exam-sync-danger) 24%, var(--exam-sync-border) 76%) !important;
    color: #b91c1c !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    background: color-mix(in srgb, var(--exam-sync-accent) 6%, var(--exam-sync-surface) 94%) !important;
    border-bottom-color: var(--exam-sync-border) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-inline-btn,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-submit-btn {
    background: color-mix(in srgb, var(--exam-sync-accent) 5%, var(--exam-sync-surface) 95%) !important;
    border-color: var(--exam-sync-border) !important;
    color: var(--exam-sync-text) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.q-block, .q-option) {
    background: var(--exam-sync-surface) !important;
    border-color: var(--exam-sync-border) !important;
    box-shadow: none !important;
}

/* Exams create: QCM builder palette (A/B/C) */
body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder {
    --qcm-variant-a: #2563eb;
    --qcm-variant-b: #10b981;
    --qcm-variant-c: #f97316;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder [data-variant-tab="1"],
body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder [data-variant-panel="1"] {
    --qcm-variant-accent: var(--qcm-variant-a);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder [data-variant-tab="2"],
body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder [data-variant-panel="2"] {
    --qcm-variant-accent: var(--qcm-variant-b);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder [data-variant-tab="3"],
body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder [data-variant-panel="3"] {
    --qcm-variant-accent: var(--qcm-variant-c);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-variant-tabs {
    gap: 0.65rem !important;
    padding: 0.35rem !important;
    border-radius: 1.15rem !important;
    border: 1px solid color-mix(in srgb, var(--app-border) 78%, var(--app-panel-surface) 22%) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--qcm-variant-a) 8%, var(--app-panel-surface) 92%),
        color-mix(in srgb, var(--qcm-variant-b) 8%, var(--app-panel-surface) 92%) 50%,
        color-mix(in srgb, var(--qcm-variant-c) 8%, var(--app-panel-surface) 92%)
    ) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .variant-tab {
    position: relative;
    border-width: 1px !important;
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 26%, var(--app-border) 74%) !important;
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 8%, var(--app-panel-surface) 92%) !important;
    color: color-mix(in srgb, var(--app-text) 86%, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 14%) !important;
    box-shadow: 0 12px 22px -22px rgba(15, 23, 42, 0.22) !important;
    transform: translateZ(0);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .variant-tab:hover {
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 34%, var(--app-border) 66%) !important;
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 11%, var(--app-panel-surface) 89%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder :is(.variant-tab.is-active, .variant-tab.border-emerald-400) {
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 52%, var(--app-border) 48%) !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 18%, var(--app-panel-surface) 82%),
        var(--app-panel-surface)
    ) !important;
    color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 74%, var(--app-text) 26%) !important;
    box-shadow: 0 18px 30px -28px color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 38%, rgba(15, 23, 42, 0.22)) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder :is(.variant-tab.is-active, .variant-tab.border-emerald-400)::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.45rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 70%, transparent),
        transparent
    );
    opacity: 0.9;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel] {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "head actions"
        "questions questions";
    align-items: start;
    gap: 0.7rem 1rem;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 6%, var(--app-panel-surface) 94%),
        var(--app-panel-surface)
    ) !important;
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 18%, var(--app-border) 82%) !important;
    box-shadow: 0 14px 24px -26px rgba(15, 23, 42, 0.2) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel]:not([hidden]):not(.hidden) {
    display: grid;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel][hidden],
body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel].hidden {
    display: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel] .exam-create-variant-panel-head {
    grid-area: head;
    min-width: 0;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel] .exam-create-variant-panel-actions {
    grid-area: actions;
    justify-self: end;
    align-self: start;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel] .questions-container {
    grid-area: questions;
    margin-top: 0 !important;
    display: grid !important;
    gap: 0.95rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-variant-panel-actions .exam-create-inline-btn {
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 30%, var(--app-border) 70%) !important;
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 11%, var(--app-panel-surface) 89%) !important;
    color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 78%, var(--app-text) 22%) !important;
    box-shadow: 0 12px 20px -22px color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 34%, rgba(15, 23, 42, 0.12)) !important;
    white-space: nowrap;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-variant-panel-actions .exam-create-inline-btn:hover {
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 42%, var(--app-border) 58%) !important;
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 16%, var(--app-panel-surface) 84%) !important;
    transform: translateY(-1px);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .q-block {
    border-radius: 1.18rem !important;
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 22%, var(--app-border) 78%) !important;
    border-left-width: 4px !important;
    border-left-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 65%, transparent) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 6%, var(--app-panel-surface) 94%),
        var(--app-panel-surface)
    ) !important;
    box-shadow: 0 16px 26px -28px rgba(15, 23, 42, 0.22) !important;
    transition: transform var(--app-transition-fast), box-shadow var(--app-transition-fast), border-color var(--app-transition-fast);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .q-block:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 32%, var(--app-border) 68%) !important;
    box-shadow: 0 22px 34px -34px rgba(15, 23, 42, 0.26) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder :is(.q-number, .opt-letter) {
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 16%, var(--app-panel-surface) 84%) !important;
    border: 1px solid color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 36%, var(--app-border) 64%) !important;
    color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 80%, var(--app-text) 20%) !important;
    font-weight: 800;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder :is(.q-text, .o-text, .q-type) {
    background: color-mix(in srgb, var(--app-panel-surface) 92%, #f1f5f9 8%) !important;
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 18%, var(--app-border) 82%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder :is(.q-text, .o-text, .q-type):focus {
    outline: none;
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 42%, var(--app-border) 58%) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 18%, transparent) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .o-correct {
    accent-color: var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary)));
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .add-option {
    border-color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 38%, var(--app-border) 62%) !important;
    color: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 78%, var(--app-text) 22%) !important;
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 9%, transparent) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .add-option:hover {
    background: color-mix(in srgb, var(--qcm-variant-accent, var(--app-shell-accent, var(--app-primary))) 14%, transparent) !important;
}

@media (max-width: 560px) {
    body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "actions"
            "questions";
    }

    body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-subpanel[data-variant-panel] .exam-create-variant-panel-actions {
        justify-self: stretch;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder .exam-create-variant-panel-actions .exam-create-inline-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }
}
/* Exams create: final cleanup pass (layout + palette stability) */
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero {
    padding: 1rem 1.15rem !important;
    border: 1px solid var(--app-shell-border, var(--app-border)) !important;
    border-radius: var(--app-radius-xl) !important;
    background: var(--app-panel-surface) !important;
    box-shadow: var(--app-shadow) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero::before,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero::after {
    display: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    background: var(--app-panel-surface) !important;
    border-color: var(--app-shell-border, var(--app-border)) !important;
    box-shadow: var(--app-shadow-soft) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-layout {
    gap: 1.2rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-main, .exam-create-side) {
    gap: 1rem;
}

@media (min-width: 1200px) {
    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-layout {
        grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 23.5rem);
        align-items: start;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-side {
        position: static !important;
        top: auto !important;
        align-self: start;
    }
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    position: sticky;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    z-index: 20;
    border-color: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 24%, var(--app-border) 76%) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--app-panel-surface) 95%, var(--app-shell-accent, var(--app-primary)) 5%),
        var(--app-panel-surface)
    ) !important;
    box-shadow: 0 18px 30px -26px rgba(15, 23, 42, 0.3) !important;
}

/* References + final actions (second pass) */
body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context {
    padding: 0.9rem 0.95rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-card__header--tight {
    margin-bottom: 0.15rem;
    align-items: baseline;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-card__title {
    font-size: clamp(1.15rem, 1.35vw, 1.32rem);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-card__subtitle {
    margin-top: 0.1rem;
    font-size: var(--app-text-sm);
    line-height: 1.35;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-reference-list--compact {
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-reference {
    gap: 0.3rem;
    padding: 0.72rem 0.85rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-reference__value {
    font-size: var(--app-text-base);
    line-height: 1.3;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context .exam-create-reference__meta {
    margin-top: 0;
    font-size: var(--app-text-sm);
    line-height: 1.35;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem 0.95rem;
    padding: 0.64rem 0.9rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-actions-head--inline {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-actions-label {
    white-space: nowrap;
    margin: 0;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-actions-meta {
    margin: 0;
    font-size: var(--app-text-xs);
    line-height: 1.25;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-action-grid {
    margin-left: auto;
    justify-content: flex-end;
    gap: 0.5rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-action-btn {
    min-width: clamp(8.7rem, 10.6vw, 10.2rem);
    min-height: 2.44rem;
    padding: 0.56rem 0.85rem !important;
}

@media (max-width: 980px) {
    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact {
        grid-template-columns: 1fr;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-actions-head--inline {
        flex-wrap: wrap;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-action-grid {
        width: 100%;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-action-btn {
        min-width: 0;
        flex: 1 1 12rem;
    }
}

/* Exams create: simplified palette + reduced visual noise */
body.app-role-teacher[data-view="teacher/exams_create"] {
    --exam-lite-border: color-mix(in srgb, var(--app-border) 84%, #94a3b8 16%);
    --exam-lite-border-strong: color-mix(in srgb, var(--app-border) 68%, #64748b 32%);
    --exam-lite-surface: color-mix(in srgb, var(--app-panel-surface) 96%, #f8fafc 4%);
    --exam-lite-accent: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 48%, #475569 52%);
    --exam-lite-text-soft: color-mix(in srgb, var(--app-text-muted, #64748b) 88%, #334155 12%);
}

body.app-role-teacher[data-view="teacher/exams_create"] .teacher-workflow-main {
    width: min(100%, 94rem);
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-hero,
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    background: var(--exam-lite-surface) !important;
    border-color: var(--exam-lite-border) !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.28) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stepper,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-grid,
body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-grid,
body.app-role-teacher[data-view="teacher/exams_create"] #exam-compliance-list {
    display: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-footer {
    margin-top: 0.35rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-footer .exam-create-mini-stat:nth-child(n + 2) {
    display: none;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-card__subtitle, .exam-create-subpanel__subtitle, .exam-create-subpanel__note) {
    color: var(--exam-lite-text-soft);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill {
    background: color-mix(in srgb, var(--exam-lite-accent) 8%, var(--exam-lite-surface) 92%) !important;
    border-color: color-mix(in srgb, var(--exam-lite-accent) 24%, var(--exam-lite-border) 76%) !important;
    color: color-mix(in srgb, var(--exam-lite-accent) 74%, #0f172a 26%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea) {
    border-color: var(--exam-lite-border) !important;
    background: color-mix(in srgb, var(--exam-lite-surface) 98%, #ffffff 2%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea):focus {
    border-color: color-mix(in srgb, var(--exam-lite-accent) 45%, var(--exam-lite-border) 55%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-lite-accent) 10%, transparent 90%) !important;
}

@media (min-width: 1200px) {
    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-layout {
        grid-template-columns: minmax(0, 1.82fr) minmax(19.5rem, 21.25rem) !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        max-width: 56rem;
    }
}

/* Exams create: compact clean pass v2 */
body.app-role-teacher[data-view="teacher/exams_create"] {
    --exam-clean-border: color-mix(in srgb, var(--app-border) 90%, #94a3b8 10%);
    --exam-clean-border-strong: color-mix(in srgb, var(--app-border) 74%, #64748b 26%);
    --exam-clean-surface: color-mix(in srgb, var(--app-panel-surface) 98%, #f8fafc 2%);
    --exam-clean-accent: color-mix(in srgb, var(--app-shell-accent, var(--app-primary)) 40%, #475569 60%);
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-hero,
    .exam-create-summary-card,
    .exam-create-form-card,
    .exam-create-actions-card,
    .exam-create-card,
    .exam-create-help-card,
    .exam-create-banner,
    .exam-create-main > section,
    .exam-create-main > #qcm-builder,
    .exam-create-main > #drive-upload-progress,
    .exam-create-side > section,
    #exam-autosave-box,
    #exam-live-validation
) {
    border-color: var(--exam-clean-border) !important;
    background: var(--exam-clean-surface) !important;
    box-shadow: 0 8px 18px -18px rgba(15, 23, 42, 0.28) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero__meta-item {
    padding: 0.48rem 0.62rem;
    gap: 0.1rem;
    border-color: var(--exam-clean-border) !important;
    background: color-mix(in srgb, var(--exam-clean-accent) 4%, var(--exam-clean-surface) 96%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero__meta-sub {
    display: none;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-status-pill {
    border-color: color-mix(in srgb, var(--exam-clean-accent) 24%, var(--exam-clean-border) 76%) !important;
    background: color-mix(in srgb, var(--exam-clean-accent) 7%, var(--exam-clean-surface) 93%) !important;
    color: color-mix(in srgb, var(--exam-clean-accent) 72%, #0f172a 28%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-card .exam-create-card__subtitle,
body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-grid,
body.app-role-teacher[data-view="teacher/exams_create"] #exam-compliance-list {
    display: none !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-card__progress {
    gap: 0.35rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-note {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-note__list {
    margin: 0.2rem 0 0;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-footer {
    margin-top: 0.45rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-footer .exam-create-mini-stat:nth-child(n + 2) {
    display: none;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-preview-card__cover {
    min-height: 5.1rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-preview-card__description {
    display: none;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-autosave-box {
    padding: 0.62rem 0.82rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-autosave-box .exam-create-banner__copy {
    gap: 0.6rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-autosave-box .exam-create-banner__actions {
    gap: 0.45rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-autosave-box .exam-create-inline-btn {
    min-height: 2.2rem;
    padding: 0.45rem 0.72rem !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-setting-card {
    padding: 0.76rem 0.84rem;
    gap: 0.45rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-check-grid {
    gap: 0.45rem;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea) {
    border-color: var(--exam-clean-border) !important;
    background: color-mix(in srgb, var(--exam-clean-surface) 98%, #ffffff 2%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(.exam-create-form-card, .exam-create-main, .exam-create-side) :is(input, select, textarea):focus {
    border-color: color-mix(in srgb, var(--exam-clean-accent) 46%, var(--exam-clean-border-strong) 54%) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--exam-clean-accent) 10%, transparent 90%) !important;
}

@media (max-width: 767px) {
    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view {
        overflow-x: hidden;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-company, .app-role-admin, .app-role-web).app-view :is(
        .teacher-hub-main,
        .teacher-workflow-main,
        .teacher-courses-main,
        .student-content-main,
        .admin-shell-content,
        .company-content-main,
        .app-dashboard-shell,
        .app-shell-main,
        main.max-w-7xl,
        main.max-w-6xl,
        main.profile-page
    ) {
        width: 100%;
        max-width: 100%;
        padding-inline: 0.75rem !important;
    }

    body.app-role-admin[data-view] .admin-shell-content,
    body.app-role-company[data-view] .company-content-main,
    main.profile-page {
        padding-top: 0.95rem !important;
        padding-bottom: 1.25rem !important;
    }

    .app-shell-toolbar__inner,
    .company-shell-toolbar__inner {
        align-items: stretch;
        gap: 0.65rem;
    }

    .app-shell-toolbar__heading {
        align-items: center;
    }

    .app-shell-toolbar__heading,
    .company-shell-toolbar__brand,
    .company-shell-toolbar__headline,
    .company-shell-toolbar__meta,
    .company-shell-toolbar__content,
    .app-shell-toolbar__titleblock {
        width: 100%;
        min-width: 0;
    }

    .company-shell-toolbar__brand {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .app-shell-toolbar__titleblock {
        max-width: none;
    }

    .app-shell-toolbar__title,
    .company-shell-toolbar .app-shell-toolbar__title,
    .app-page-hero__title,
    .app-section-head__title {
        text-wrap: balance;
    }

    .app-shell-toolbar__actions,
    body.app-role-company[data-view] .company-shell-toolbar__actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.app-role-company[data-view] .company-shell-action,
    body.app-role-company[data-view] .company-shell-account-trigger {
        width: 100%;
        justify-content: center;
    }

    .app-user-menu {
        width: 100%;
    }

    .app-user-menu__trigger--compact {
        width: 100%;
        justify-content: center;
    }

    .app-user-menu__panel {
        left: 0;
        right: 0;
        width: auto;
    }

    .app-overview-panel,
    .app-overview-metrics,
    .app-summary-strip,
    .app-summary-strip--4 {
        grid-template-columns: 1fr;
    }

    .app-overview-panel {
        padding: 1rem;
    }

    .app-page-hero__header,
    .app-section-head,
    .student-panel__header {
        flex-direction: column;
        align-items: stretch;
    }

    .app-page-hero__actions,
    .app-section-head__actions,
    .app-action-cluster,
    .app-empty-state__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .app-page-hero__summary,
    .app-section-head__desc,
    .company-shell-toolbar__summary {
        max-width: none;
    }

    .app-page-hero__actions > *,
    .app-section-head__actions > *,
    .app-action-cluster > *,
    .app-empty-state__actions > * {
        min-width: 0;
        width: 100%;
        justify-content: center;
    }

    .admin-shell-modal {
        width: min(100%, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
        padding: 1rem !important;
    }

    :is(
        .admin-shell-content,
        .company-content-main,
        .teacher-hub-main,
        .teacher-workflow-main,
        .teacher-courses-main,
        .student-content-main,
        .app-dashboard-shell,
        .app-shell-main,
        main.profile-page
    ) :is(.overflow-x-auto, .app-data-table-wrap, .withdrawals-table-wrap, .ref-table-wrap) {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 0.2rem;
    }

    :is(.admin-shell-table, .app-data-table, .withdrawals-table, .ref-table) {
        min-width: max(100%, 36rem);
    }

    body[data-view^="company/"] #latestInviteLink {
        min-width: 0 !important;
        width: 100% !important;
    }

    body[data-view="admin/course_preview"] [class*="min-w-[36rem]"],
    body[data-view^="teacher/"] [class*="min-w-[320px]"],
    body[data-view^="teacher/"] [class*="min-w-[340px]"],
    body[data-view^="company/"] [class*="min-w-[260px]"],
    body[data-view^="admin/"] [class*="min-w-[220px]"] {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body[data-view="teacher/exams_create"] :is(.exam-create-main, .exam-create-side) {
        width: 100%;
        max-width: 100%;
    }
}

/* Mobile polish pass: recover readable density on phone */
@media (max-width: 767px) {
    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar {
        padding: 0.55rem 0.74rem !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__inner {
        gap: 0.55rem !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__heading {
        align-items: flex-start !important;
        gap: 0.6rem !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__brandline {
        flex: 1 1 auto;
        min-width: 0;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__title {
        font-size: clamp(1.02rem, 4.5vw, 1.28rem) !important;
        line-height: 1.14 !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__trail {
        font-size: 0.72rem !important;
        line-height: 1.35;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__actions {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start !important;
        gap: 0.45rem !important;
        width: 100%;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-shell-toolbar__actions > * {
        width: auto !important;
        max-width: 100%;
        min-width: 0 !important;
        flex: 0 1 auto;
        justify-content: center;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] :is(.app-shell-chip, .app-shell-theme, .app-shell-burger, .admin-topbar-action, .company-shell-action, .company-shell-account-trigger) {
        min-height: 2.32rem !important;
        font-size: 0.84rem !important;
        line-height: 1.2 !important;
        padding: 0.42rem 0.72rem !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] :is(.app-shell-theme, .app-shell-burger) {
        width: 2.32rem;
        min-width: 2.32rem;
        padding: 0 !important;
    }

    body:is(.app-role-teacher, .app-role-student, .app-role-admin, .app-role-company)[data-view] .app-user-menu__trigger--compact {
        width: auto !important;
        min-width: 2.32rem;
        padding-inline: 0.6rem !important;
        justify-content: center;
    }

    body.app-role-student[data-view] .app-shell-toolbar__actions,
    body.app-role-teacher[data-view] .app-shell-toolbar__actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    body.app-role-student[data-view] .app-shell-toolbar__actions > *,
    body.app-role-teacher[data-view] .app-shell-toolbar__actions > * {
        width: 100% !important;
    }

    body.app-role-admin[data-view] .app-shell-toolbar__actions :is(.app-status-pill, .admin-topbar-badge) {
        order: -1;
        width: 100%;
        justify-content: flex-start !important;
        text-align: left;
    }

    body.app-role-admin[data-view] .admin-shell-content {
        padding-inline: 0.75rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
    }

    body.app-role-admin[data-view] .admin-shell-hero,
    body.app-role-admin[data-view] .admin-shell-card,
    body.app-role-admin[data-view] .admin-shell-content :is(section, article).rounded-3xl {
        border-radius: 1.2rem !important;
    }

    body.app-role-admin[data-view] .admin-shell-content :is(.p-6, .p-5) {
        padding: 0.95rem !important;
    }

    body.app-role-admin[data-view] .admin-dashboard-hero {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }

    body.app-role-admin[data-view] .admin-dashboard-stat {
        min-width: 0 !important;
    }

    body.app-role-admin[data-view] .admin-shell-content .text-2xl {
        font-size: 1.32rem !important;
        line-height: 1.18;
    }

    body.app-role-admin[data-view] .admin-shell-content .text-xl {
        font-size: 1.08rem !important;
        line-height: 1.2;
    }

    body.app-role-student[data-view] .student-content-main {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
    }

    body.app-role-student[data-view] :is(.student-panel, .student-card, .student-stat-card, .student-page-header.app-page-hero) {
        border-radius: 1.16rem !important;
    }

    body.app-role-student[data-view] .student-page-header.app-page-hero,
    body.app-role-student[data-view] .student-content-main > section:first-child {
        padding: 0.95rem !important;
    }

    body.app-role-student[data-view] .student-hero-stats {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.7rem !important;
    }

    body.app-role-student[data-view] .student-hero-stat {
        padding: 0.78rem 0.84rem !important;
    }

    body.app-role-student[data-view] :is(.student-hero-stat__value, .student-stat-card__value) {
        font-size: clamp(1.24rem, 5vw, 1.5rem) !important;
    }

    body.app-role-student[data-view] .student-panel__title {
        font-size: 1.05rem !important;
    }

    body.app-role-student[data-view] .student-panel__desc,
    body.app-role-student[data-view] .student-card__meta {
        font-size: 0.88rem !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-layout {
        gap: 0.85rem !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero {
        padding: 0.95rem !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero__title {
        font-size: clamp(1.25rem, 5.8vw, 1.68rem) !important;
        line-height: 1.16 !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero__subtitle {
        font-size: 0.86rem;
        line-height: 1.45;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero__meta {
        grid-template-columns: 1fr !important;
        gap: 0.52rem !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] :is(
        .exam-create-summary-card,
        .exam-create-form-card,
        .exam-create-actions-card,
        .exam-create-card,
        .exam-create-main > section,
        .exam-create-side > section,
        #exam-autosave-box
    ) {
        border-radius: 1.05rem !important;
        padding: 0.92rem !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-action-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--compact .exam-create-action-btn {
        width: 100%;
        min-height: 2.55rem !important;
    }

    body.app-role-teacher[data-view="teacher/exams_create"] :is(input, select, textarea) {
        min-height: 2.5rem;
        font-size: 0.92rem;
    }
}

@media (max-width: 520px) {
    body.app-role-student[data-view] .app-shell-toolbar__actions,
    body.app-role-teacher[data-view] .app-shell-toolbar__actions {
        grid-template-columns: 1fr !important;
    }

    body.app-role-student[data-view] .student-hero-stats {
        grid-template-columns: 1fr !important;
    }
}

/* Teacher exams_create: vibrant multi-accent palette (page-wide) */
body.app-role-teacher[data-view="teacher/exams_create"] {
    --exam-vibe-blue: #2563eb;
    --exam-vibe-green: #10b981;
    --exam-vibe-orange: #f97316;
    --exam-vibe-purple: #a855f7;
    --exam-vibe-pink: #ec4899;
    --exam-panel-accent: var(--exam-vibe-blue);
}

body.app-role-teacher[data-view="teacher/exams_create"] {
    background:
        radial-gradient(1200px 720px at 12% -12%, color-mix(in srgb, var(--exam-vibe-blue) 16%, transparent), transparent 62%),
        radial-gradient(1050px 660px at 92% -10%, color-mix(in srgb, var(--exam-vibe-purple) 14%, transparent), transparent 60%),
        radial-gradient(980px 720px at 92% 112%, color-mix(in srgb, var(--exam-vibe-green) 16%, transparent), transparent 62%),
        radial-gradient(960px 680px at -12% 112%, color-mix(in srgb, var(--exam-vibe-orange) 14%, transparent), transparent 62%),
        var(--app-shell-bg, #f8fafc) !important;
    background-attachment: fixed;
}

html.dark body.app-role-teacher[data-view="teacher/exams_create"],
body.app-role-teacher[data-view="teacher/exams_create"][data-theme="dark"] {
    background:
        radial-gradient(1200px 720px at 12% -12%, color-mix(in srgb, var(--exam-vibe-blue) 10%, transparent), transparent 62%),
        radial-gradient(1050px 660px at 92% -10%, color-mix(in srgb, var(--exam-vibe-purple) 9%, transparent), transparent 62%),
        radial-gradient(980px 720px at 92% 112%, color-mix(in srgb, var(--exam-vibe-green) 10%, transparent), transparent 64%),
        radial-gradient(960px 680px at -12% 112%, color-mix(in srgb, var(--exam-vibe-orange) 9%, transparent), transparent 64%),
        var(--app-shell-bg, #020617) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-frame {
    --exam-panel-accent: var(--exam-vibe-blue);
}

body.app-role-teacher[data-view="teacher/exams_create"] #qcm-builder {
    --exam-panel-accent: var(--exam-vibe-blue);
}

body.app-role-teacher[data-view="teacher/exams_create"] [data-exam-type-panel="drive"] {
    --exam-panel-accent: var(--exam-vibe-purple);
}

body.app-role-teacher[data-view="teacher/exams_create"] [data-exam-type-panel="meeting"] {
    --exam-panel-accent: var(--exam-vibe-pink);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-advanced-settings {
    --exam-panel-accent: var(--exam-vibe-orange);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-reference-context {
    --exam-panel-accent: var(--exam-vibe-green);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-card {
    --exam-panel-accent: var(--exam-vibe-green);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-actions-card--sticky {
    --exam-panel-accent: var(--exam-vibe-blue);
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-form-card,
    .exam-create-summary-card,
    .exam-create-actions-card,
    .exam-create-card
) {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--exam-panel-accent) 22%, var(--app-shell-border, var(--app-border)) 78%) !important;
    background:
        radial-gradient(900px 280px at 0% 0%, color-mix(in srgb, var(--exam-panel-accent) 14%, transparent), transparent 62%),
        radial-gradient(900px 320px at 100% 0%, color-mix(in srgb, var(--exam-vibe-purple) 10%, transparent), transparent 64%),
        radial-gradient(900px 320px at 85% 120%, color-mix(in srgb, var(--exam-vibe-green) 9%, transparent), transparent 62%),
        var(--app-panel-surface) !important;
    box-shadow: 0 18px 34px -34px rgba(15, 23, 42, 0.22) !important;
}

html.dark body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-form-card,
    .exam-create-summary-card,
    .exam-create-actions-card,
    .exam-create-card
) {
    border-color: color-mix(in srgb, var(--exam-panel-accent) 26%, var(--app-shell-border, var(--app-border)) 74%) !important;
    background:
        radial-gradient(900px 280px at 0% 0%, color-mix(in srgb, var(--exam-panel-accent) 12%, transparent), transparent 62%),
        radial-gradient(900px 320px at 100% 0%, color-mix(in srgb, var(--exam-vibe-purple) 8%, transparent), transparent 66%),
        radial-gradient(900px 320px at 85% 120%, color-mix(in srgb, var(--exam-vibe-green) 8%, transparent), transparent 64%),
        var(--app-panel-surface) !important;
    box-shadow: 0 22px 44px -44px rgba(0, 0, 0, 0.7) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    .exam-create-form-card,
    .exam-create-summary-card,
    .exam-create-actions-card,
    .exam-create-card
)::after {
    content: "";
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    top: 0.55rem;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--exam-panel-accent) 70%, transparent),
        color-mix(in srgb, var(--exam-vibe-purple) 48%, transparent),
        color-mix(in srgb, var(--exam-vibe-orange) 48%, transparent),
        transparent
    );
    opacity: 0.65;
    pointer-events: none;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-hero {
    border-color: color-mix(in srgb, var(--exam-vibe-blue) 18%, var(--app-shell-border, var(--app-border)) 82%) !important;
    background:
        radial-gradient(1000px 340px at 0% 0%, color-mix(in srgb, var(--exam-vibe-blue) 14%, transparent), transparent 62%),
        radial-gradient(980px 360px at 100% 0%, color-mix(in srgb, var(--exam-vibe-purple) 12%, transparent), transparent 64%),
        radial-gradient(1000px 420px at 70% 140%, color-mix(in srgb, var(--exam-vibe-green) 10%, transparent), transparent 62%),
        var(--app-panel-surface) !important;
    box-shadow: 0 20px 38px -38px rgba(15, 23, 42, 0.2) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-card__kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.62rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--exam-panel-accent) 28%, var(--app-shell-border, var(--app-border)) 72%);
    background: color-mix(in srgb, var(--exam-panel-accent) 10%, transparent);
    color: color-mix(in srgb, var(--exam-panel-accent) 78%, var(--app-text, #0f172a) 22%);
    font-weight: 800;
    letter-spacing: 0.14em;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stepper__item:nth-child(1) {
    --exam-step-accent: var(--exam-vibe-blue);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stepper__item:nth-child(2) {
    --exam-step-accent: var(--exam-vibe-green);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stepper__item:nth-child(3) {
    --exam-step-accent: var(--exam-vibe-orange);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stepper__item {
    border: 1px solid color-mix(in srgb, var(--exam-step-accent, var(--exam-vibe-blue)) 22%, var(--app-shell-border, var(--app-border)) 78%);
    background: color-mix(in srgb, var(--exam-step-accent, var(--exam-vibe-blue)) 10%, transparent);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-stepper__index {
    border: 1px solid color-mix(in srgb, var(--exam-step-accent, var(--exam-vibe-blue)) 30%, var(--app-shell-border, var(--app-border)) 70%);
    background: color-mix(in srgb, var(--exam-step-accent, var(--exam-vibe-blue)) 14%, var(--app-panel-surface) 86%);
    color: color-mix(in srgb, var(--exam-step-accent, var(--exam-vibe-blue)) 82%, var(--app-text, #0f172a) 18%);
    font-weight: 800;
}

body.app-role-teacher[data-view="teacher/exams_create"] .dash-progress__fill {
    background: linear-gradient(90deg, var(--exam-vibe-blue), var(--exam-vibe-green), var(--exam-vibe-orange)) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option[data-exam-type-choice] {
    --type-accent: var(--exam-vibe-blue);
    border-color: color-mix(in srgb, var(--type-accent) 22%, var(--app-shell-border, var(--app-border)) 78%) !important;
    background:
        radial-gradient(800px 240px at 0% 0%, color-mix(in srgb, var(--type-accent) 14%, transparent), transparent 62%),
        var(--app-panel-surface) !important;
    box-shadow: 0 16px 26px -28px rgba(15, 23, 42, 0.14) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option[data-exam-type-choice="drive"] {
    --type-accent: var(--exam-vibe-purple);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option[data-exam-type-choice="meeting"] {
    --type-accent: var(--exam-vibe-pink);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option[data-exam-type-choice="qcm"] {
    --type-accent: var(--exam-vibe-blue);
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option__icon {
    border-color: color-mix(in srgb, var(--type-accent) 30%, var(--app-shell-border, var(--app-border)) 70%) !important;
    background: color-mix(in srgb, var(--type-accent) 14%, var(--app-panel-surface) 86%) !important;
    color: color-mix(in srgb, var(--type-accent) 78%, var(--app-text, #0f172a) 22%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-type-option.is-active {
    border-color: color-mix(in srgb, var(--type-accent) 44%, var(--app-shell-border, var(--app-border)) 56%) !important;
    box-shadow: 0 22px 36px -36px color-mix(in srgb, var(--type-accent) 40%, rgba(15, 23, 42, 0.2)) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item {
    border-left-width: 4px;
    border-left-color: color-mix(in srgb, var(--exam-vibe-orange) 52%, transparent);
    background:
        radial-gradient(680px 220px at 0% 0%, color-mix(in srgb, var(--exam-vibe-orange) 9%, transparent), transparent 62%),
        var(--app-panel-surface) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-summary-item--done {
    border-left-color: color-mix(in srgb, var(--exam-vibe-green) 58%, transparent);
    background:
        radial-gradient(680px 220px at 0% 0%, color-mix(in srgb, var(--exam-vibe-green) 10%, transparent), transparent 62%),
        var(--app-panel-surface) !important;
}

/* Teacher exams_create: section accents for inner cards */
body.app-role-teacher[data-view="teacher/exams_create"] :is(
    #exam-frame,
    #qcm-builder,
    [data-exam-type-panel="drive"],
    [data-exam-type-panel="meeting"],
    #exam-advanced-settings,
    #exam-reference-context,
    .exam-create-summary-card
) :is(
    .exam-create-tool-card,
    .exam-create-setting-card,
    .exam-create-reference,
    .exam-create-subpanel:not([data-variant-panel]),
    .exam-create-preview-card__sample,
    .exam-create-compliance-item
) {
    border-color: color-mix(in srgb, var(--exam-panel-accent) 18%, var(--app-shell-border, var(--app-border)) 82%) !important;
    background:
        radial-gradient(760px 240px at 0% 0%, color-mix(in srgb, var(--exam-panel-accent) 12%, transparent), transparent 62%),
        var(--teacher-page-soft-surface, var(--app-panel-surface)) !important;
    box-shadow: 0 14px 24px -28px rgba(15, 23, 42, 0.14) !important;
}

html.dark body.app-role-teacher[data-view="teacher/exams_create"] :is(
    #exam-frame,
    #qcm-builder,
    [data-exam-type-panel="drive"],
    [data-exam-type-panel="meeting"],
    #exam-advanced-settings,
    #exam-reference-context,
    .exam-create-summary-card
) :is(
    .exam-create-tool-card,
    .exam-create-setting-card,
    .exam-create-reference,
    .exam-create-subpanel:not([data-variant-panel]),
    .exam-create-preview-card__sample,
    .exam-create-compliance-item
) {
    border-color: color-mix(in srgb, var(--exam-panel-accent) 22%, var(--app-shell-border, var(--app-border)) 78%) !important;
    background:
        radial-gradient(760px 240px at 0% 0%, color-mix(in srgb, var(--exam-panel-accent) 10%, transparent), transparent 64%),
        var(--teacher-page-soft-surface, var(--app-panel-surface)) !important;
    box-shadow: 0 18px 34px -34px rgba(0, 0, 0, 0.66) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] :is(
    #exam-frame,
    #qcm-builder,
    [data-exam-type-panel="drive"],
    [data-exam-type-panel="meeting"],
    #exam-advanced-settings,
    #exam-reference-context,
    .exam-create-summary-card
) .exam-create-status-pill--info,
body.app-role-teacher[data-view="teacher/exams_create"] :is(
    #exam-frame,
    #qcm-builder,
    [data-exam-type-panel="drive"],
    [data-exam-type-panel="meeting"],
    #exam-advanced-settings,
    #exam-reference-context,
    .exam-create-summary-card
) .exam-create-tool-card__pill {
    border-color: color-mix(in srgb, var(--exam-panel-accent) 30%, var(--app-shell-border, var(--app-border)) 70%) !important;
    background: color-mix(in srgb, var(--exam-panel-accent) 10%, var(--app-panel-surface) 90%) !important;
    color: color-mix(in srgb, var(--exam-panel-accent) 78%, var(--app-text, #0f172a) 22%) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-advanced-settings input[type="checkbox"] {
    accent-color: var(--exam-panel-accent);
}


body.app-role-teacher[data-view="teacher/exams_create"] #btn-import-csv,
body.app-role-teacher[data-view="teacher/exams_create"] button[type="submit"][name="import_csv"] {
    border-color: rgba(91, 98, 255, 0.34) !important;
    background: linear-gradient(135deg, rgba(91, 98, 255, 0.16), rgba(129, 140, 248, 0.28)) !important;
    color: #3044b5 !important;
    box-shadow: 0 14px 28px rgba(91, 98, 255, 0.12) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] a[href*="qcm_import_example.csv"] {
    border-color: rgba(15, 118, 110, 0.28) !important;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.14), rgba(16, 185, 129, 0.2)) !important;
    color: #0f766e !important;
    box-shadow: 0 14px 28px rgba(16, 185, 129, 0.12) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] .exam-create-inline-btn[data-help-trigger] {
    border-color: rgba(249, 115, 22, 0.28) !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(249, 115, 22, 0.18)) !important;
    color: #c2410c !important;
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.12) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #btn-apply-template {
    border-color: rgba(37, 99, 235, 0.26) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(37, 99, 235, 0.18)) !important;
    color: #1d4ed8 !important;
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.12) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #btn-restore-autosave {
    border-color: rgba(22, 163, 74, 0.26) !important;
    background: linear-gradient(135deg, rgba(134, 239, 172, 0.18), rgba(34, 197, 94, 0.18)) !important;
    color: #15803d !important;
    box-shadow: 0 14px 28px rgba(34, 197, 94, 0.12) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #btn-clear-autosave {
    border-color: rgba(225, 29, 72, 0.24) !important;
    background: linear-gradient(135deg, rgba(253, 164, 175, 0.16), rgba(244, 63, 94, 0.14)) !important;
    color: #be123c !important;
    box-shadow: 0 14px 28px rgba(244, 63, 94, 0.12) !important;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 0.7rem;
    padding: 0.82rem 1rem;
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(245, 248, 255, 0.94));
    color: #1f2937;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    margin-top: 0.38rem;
    flex: 0 0 0.62rem;
    border-radius: 999px;
    background: #f97316;
    box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.14);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item--drive {
    border-color: rgba(249, 115, 22, 0.24);
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 237, 213, 0.88));
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item--drive::before {
    background: #ea580c;
    box-shadow: 0 0 0 5px rgba(249, 115, 22, 0.14);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item--meeting {
    border-color: rgba(14, 165, 233, 0.22);
    background: linear-gradient(135deg, rgba(240, 249, 255, 0.95), rgba(224, 242, 254, 0.88));
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item--meeting::before {
    background: #0284c7;
    box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.14);
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item--qcm {
    border-color: rgba(59, 130, 246, 0.22);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(224, 231, 255, 0.88));
}

body.app-role-teacher[data-view="teacher/exams_create"] #exam-live-validation .exam-create-banner__item--qcm::before {
    background: #2563eb;
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.14);
}