/*
 * Center CRM design system
 * Brand direction: graphite product UI with a warm orange/coral/pink accent.
 * This file is intentionally loaded after app.css. It maps legacy variables to
 * semantic tokens and provides a gradual migration path for existing screens.
 */

@import url("./app.css?v=20260804-4") layer(legacy);

:root {
    /* Typography */
    --ds-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif;
    --ds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --ds-leading-tight: 1.12;
    --ds-leading-body: 1.55;
    --ds-tracking-tight: -0.035em;
    --ds-tracking-label: 0.12em;

    /* Primitive neutrals */
    --ds-white: #ffffff;
    --ds-gray-50: #f7f7f8;
    --ds-gray-100: #f0f1f3;
    --ds-gray-200: #e5e6e9;
    --ds-gray-300: #d4d5da;
    --ds-gray-400: #afb1b8;
    --ds-gray-500: #858891;
    --ds-gray-600: #686b74;
    --ds-gray-700: #4a4d56;
    --ds-gray-800: #303239;
    --ds-gray-900: #222329;
    --ds-gray-950: #17181c;

    /* Primitive brand palette sampled from the supplied visual reference */
    --ds-orange-400: #ee8a55;
    --ds-orange-500: #e46d32;
    --ds-coral-400: #e75a69;
    --ds-coral-500: #d83248;
    --ds-coral-600: #b91f38;
    --ds-pink-500: #c82b68;
    --ds-pink-600: #b51655;
    --ds-rose-50: #fff5f5;
    --ds-rose-100: #ffe9eb;
    --ds-rose-200: #ffcfd4;

    /* Supporting semantic colors */
    --ds-green-50: #ecfaf5;
    --ds-green-100: #d7f3e8;
    --ds-green-600: #148b64;
    --ds-green-700: #0f7151;
    --ds-amber-50: #fff8e7;
    --ds-amber-100: #ffedbd;
    --ds-amber-600: #c57b08;
    --ds-red-50: #fff1f3;
    --ds-red-100: #ffdce1;
    --ds-red-600: #ce3347;
    --ds-indigo-50: #f1f2ff;
    --ds-indigo-100: #e3e5ff;
    --ds-indigo-600: #5661ce;

    /* Semantic color roles */
    --ds-canvas: var(--ds-gray-50);
    --ds-surface: var(--ds-white);
    --ds-surface-subtle: #fafafb;
    --ds-surface-muted: var(--ds-gray-100);
    --ds-surface-inverse: var(--ds-gray-950);
    --ds-text-strong: var(--ds-gray-950);
    --ds-text: var(--ds-gray-800);
    --ds-text-muted: var(--ds-gray-600);
    --ds-text-faint: var(--ds-gray-500);
    --ds-text-inverse: var(--ds-white);
    --ds-border: var(--ds-gray-200);
    --ds-border-strong: var(--ds-gray-300);
    --ds-action: var(--ds-coral-500);
    --ds-action-hover: var(--ds-coral-600);
    --ds-action-soft: var(--ds-rose-100);
    --ds-action-soft-hover: var(--ds-rose-200);
    --ds-focus-ring: rgba(248, 79, 85, 0.22);
    --ds-success: var(--ds-green-600);
    --ds-success-soft: var(--ds-green-50);
    --ds-warning: var(--ds-amber-600);
    --ds-warning-soft: var(--ds-amber-50);
    --ds-danger: var(--ds-red-600);
    --ds-danger-soft: var(--ds-red-50);
    --ds-info: var(--ds-indigo-600);
    --ds-info-soft: var(--ds-indigo-50);

    /* Organization-customizable schedule colors */
    --crm-lesson-individual: #d83248;
    --crm-lesson-group: #e46d32;
    --crm-lesson-makeup: #b51655;
    --crm-lesson-master_class: #df73a2;
    --crm-status-pending: #858891;
    --crm-status-conducted: #148b64;
    --crm-status-cancelled: #ce3347;
    --crm-attendance-attended: #148b64;
    --crm-attendance-missed: #ce3347;

    /* Brand surfaces */
    --ds-brand-orange: var(--ds-orange-500);
    --ds-brand-coral: var(--ds-coral-500);
    --ds-brand-pink: var(--ds-pink-600);
    --ds-brand-dark: #1f2025;
    --ds-brand-soft: #fff0f2;

    /* Spacing */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-8: 32px;
    --ds-space-10: 40px;
    --ds-space-12: 48px;
    --ds-space-16: 64px;

    /* Shape, elevation and motion */
    --ds-radius-xs: 8px;
    --ds-radius-sm: 12px;
    --ds-radius-md: 16px;
    --ds-radius-lg: 22px;
    --ds-radius-xl: 30px;
    --ds-shadow-xs: 0 1px 2px rgba(23, 24, 28, 0.04);
    --ds-shadow-sm: 0 8px 24px rgba(23, 24, 28, 0.07);
    --ds-shadow-md: 0 18px 46px rgba(23, 24, 28, 0.1);
    --ds-shadow-brand: 0 12px 28px rgba(232, 61, 74, 0.24);
    --ds-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
    --ds-duration-fast: 140ms;
    --ds-duration-normal: 220ms;

    /* Compatibility aliases used by the existing CRM front end */
    --page: var(--ds-canvas);
    --surface: var(--ds-surface);
    --text: var(--ds-text-strong);
    --muted: var(--ds-text-muted);
    --line: var(--ds-border);
    --line-strong: var(--ds-border-strong);
    --primary: var(--ds-action);
    --primary-dark: var(--ds-action-hover);
    --primary-soft: var(--ds-action-soft);
    --danger: var(--ds-danger);
    --danger-soft: var(--ds-danger-soft);
    --success: var(--ds-success);
    --success-soft: var(--ds-success-soft);
    --shadow: var(--ds-shadow-md);
    --radius-lg: var(--ds-radius-xl);
    --radius-md: var(--ds-radius-md);
    --radius-sm: var(--ds-radius-sm);

    font-family: var(--ds-font-sans);
}

html {
    background: var(--ds-canvas);
}

body {
    color: var(--ds-text);
    background: var(--ds-canvas);
}

::selection {
    color: var(--ds-text-strong);
    background: var(--ds-rose-200);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 2px;
}

:where(button, a, input, select, textarea) {
    transition-timing-function: var(--ds-ease);
}

/* Brand and application shell */
.brand-mark,
.app-topbar .brand-mark {
    color: var(--ds-white);
    background: var(--ds-action);
    box-shadow: var(--ds-shadow-brand);
}

.brand--light .brand-mark {
    color: var(--ds-coral-600);
    background: var(--ds-white);
    box-shadow: 0 10px 28px rgba(73, 20, 34, 0.18);
}

.brand-name,
.account-copy strong {
    color: var(--ds-text-strong);
}

.app-topbar {
    border-color: rgba(212, 213, 218, 0.82);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 0 rgba(23, 24, 28, 0.025);
    backdrop-filter: blur(18px);
}

.menu-toggle,
.logout-button,
.lesson-reminders-toggle {
    color: var(--ds-text-muted);
    border-color: var(--ds-border);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-xs);
}

.menu-toggle:hover,
.logout-button:hover,
.lesson-reminders-toggle:hover {
    color: var(--ds-text-strong);
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-subtle);
}

.lesson-reminders-toggle.is-enabled {
    color: var(--ds-action-hover);
    border-color: var(--ds-rose-200);
    background: var(--ds-rose-50);
}

.account-avatar {
    color: var(--ds-coral-600);
    border-color: var(--ds-rose-200);
    background: var(--ds-action-soft);
}

.app-sidebar {
    color: #d9dadd;
    border-color: rgba(255, 255, 255, 0.07);
    background: var(--ds-brand-dark);
    box-shadow: 18px 0 45px rgba(23, 24, 28, 0.06);
}

.sidebar-label {
    color: #8f919a;
}

.sidebar-link {
    color: #c7c8ce;
}

.sidebar-link:hover {
    color: var(--ds-white);
    background: rgba(255, 255, 255, 0.07);
}

.sidebar-link.is-active {
    color: var(--ds-white);
    background: var(--ds-action);
    box-shadow: 0 10px 26px rgba(232, 61, 74, 0.22);
}

.sidebar-link.is-active::before {
    background: var(--ds-white);
}

.sidebar-footer {
    color: #aeb0b7;
    border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-status-dot,
.status-dot {
    background: #46d29a;
    box-shadow: 0 0 0 4px rgba(70, 210, 154, 0.14);
}

.sidebar-scrim {
    background: rgba(17, 18, 21, 0.48);
    backdrop-filter: blur(3px);
}

/* Type hierarchy */
.schedule-kicker,
.student-section-kicker,
.student-welcome-eyebrow,
.teacher-statistics-title .schedule-kicker,
.finance-dashboard-card-header .schedule-kicker,
.finance-dashboard-header .schedule-kicker,
.debug-header .schedule-kicker {
    color: var(--ds-action-hover);
    font-weight: 800;
    letter-spacing: var(--ds-tracking-label);
}

:where(
    .schedule-toolbar,
    .students-toolbar,
    .student-detail-header,
    .finance-dashboard-header,
    .teacher-statistics-header,
    .debug-header,
    .student-page-heading
) h1 {
    color: var(--ds-text-strong);
    font-weight: 780;
    letter-spacing: var(--ds-tracking-tight);
}

:where(
    .students-toolbar,
    .student-detail-header,
    .finance-dashboard-header,
    .teacher-statistics-header,
    .debug-header
) p {
    color: var(--ds-text-muted);
}

/* Buttons */
:where(
    .submit-button,
    .add-student-button,
    .primary-button,
    .lesson-conduct-button,
    .attendance-assign-button,
    .finance-add-button,
    .branch-select-button,
    .copy-credentials-button,
    .teacher-home-schedule-link
) {
    color: var(--ds-white);
    border-color: transparent;
    background: var(--ds-action);
    box-shadow: var(--ds-shadow-brand);
}

:where(
    .submit-button,
    .add-student-button,
    .primary-button,
    .lesson-conduct-button,
    .attendance-assign-button,
    .finance-add-button,
    .branch-select-button,
    .copy-credentials-button,
    .teacher-home-schedule-link
):hover {
    color: var(--ds-white);
    border-color: transparent;
    background: var(--ds-action-hover);
    box-shadow: 0 15px 34px rgba(217, 8, 94, 0.25);
    transform: translateY(-1px);
}

:where(.secondary-button, .week-button, .branch-action-button, .icon-action-button) {
    color: var(--ds-text);
    border-color: var(--ds-border);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-xs);
}

:where(.secondary-button, .week-button, .branch-action-button, .icon-action-button):hover {
    color: var(--ds-text-strong);
    border-color: var(--ds-rose-200);
    background: var(--ds-rose-50);
}

:where(.danger-button, .branch-action-button--danger, .icon-action-button--danger) {
    color: var(--ds-danger);
    border-color: var(--ds-red-100);
    background: var(--ds-danger-soft);
}

:where(.danger-button, .branch-action-button--danger, .icon-action-button--danger):hover {
    color: var(--ds-white);
    border-color: var(--ds-danger);
    background: var(--ds-danger);
}

/* Form controls */
:where(
    .input-wrap,
    .account-input-wrap,
    .student-search-form,
    .student-field input,
    .student-field select,
    .student-field textarea,
    .phone-field-row input,
    .phone-field-row select,
    .list-sort-form select,
    .schedule-branch-select-wrap,
    .regular-slot-row select,
    .student-picker-search,
    .status-control
) {
    color: var(--ds-text);
    border-color: var(--ds-border);
    background: var(--ds-surface);
}

:where(
    .input-wrap,
    .account-input-wrap,
    .student-search-form,
    .student-field input,
    .student-field select,
    .student-field textarea,
    .phone-field-row input,
    .phone-field-row select,
    .list-sort-form select,
    .schedule-branch-select-wrap,
    .regular-slot-row select,
    .student-picker-search,
    .status-control
):focus-within {
    border-color: var(--ds-action);
    box-shadow: 0 0 0 4px var(--ds-focus-ring);
}

:where(input, textarea)::placeholder {
    color: var(--ds-gray-400);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ds-text);
    box-shadow: 0 0 0 1000px var(--ds-surface) inset;
    caret-color: var(--ds-text);
}

.remember-device-input:checked + .remember-device-check,
.account-checkbox input:checked + .checkbox-visual,
.debug-checkbox input:checked + .checkbox-visual,
.group-student-option input:checked + .picker-checkbox {
    color: var(--ds-white);
    border-color: var(--ds-action);
    background: var(--ds-action);
    box-shadow: 0 5px 14px rgba(232, 61, 74, 0.2);
}

.password-toggle,
.account-password-toggle {
    color: var(--ds-action-hover);
}

.password-toggle:hover,
.account-password-toggle:hover {
    background: var(--ds-action-soft);
}

:where(
    .submit-button,
    .add-student-button,
    .primary-button,
    .lesson-conduct-button,
    .attendance-assign-button,
    .finance-add-button,
    .branch-select-button,
    .copy-credentials-button
):disabled {
    color: var(--ds-gray-500);
    border-color: var(--ds-border);
    background: var(--ds-gray-200);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Cards and containers */
:where(
    .schedule-card,
    .students-list-card,
    .detail-card,
    .account-card,
    .account-help-card,
    .statistics-card,
    .statistics-kpi,
    .finance-dashboard-card,
    .finance-kpi,
    .finance-quick-stats,
    .branch-card,
    .branches-overview,
    .debug-time-card,
    .student-overview-card,
    .student-next-card,
    .student-progress-card,
    .student-payment-history,
    .student-finance-summary,
    .teacher-day-card,
    .teacher-home-hero,
    .teacher-home-stats
) {
    border-color: var(--ds-border);
    background-color: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
}

:where(
    .students-list-card,
    .detail-card,
    .account-card,
    .statistics-card,
    .finance-dashboard-card,
    .branch-card,
    .debug-time-card
) {
    border-radius: var(--ds-radius-lg);
}

/* Tabs, filters and compact choices */
.list-view-toolbar,
.schedule-classroom-switcher,
.statistics-period-tabs,
.student-segmented {
    border-color: var(--ds-border);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--ds-shadow-xs);
}

:where(.list-filter-tab, .statistics-period-tab, .classroom-button, .student-segmented a) {
    color: var(--ds-text-muted);
}

:where(
    .list-filter-tab.is-active,
    .statistics-period-tab.is-active,
    .classroom-button.is-selected,
    .student-segmented a.is-active,
    .week-button--current.is-current
) {
    color: var(--ds-action-hover);
    border-color: var(--ds-rose-200);
    background: var(--ds-action-soft);
    box-shadow: 0 5px 16px rgba(232, 61, 74, 0.1);
}

/* Lists and entity rows */
:where(
    .student-list-item,
    .teacher-list-item,
    .discipline-list-item,
    .group-list-item,
    .group-member-item,
    .regular-series-item,
    .finance-payment-item,
    .student-payment-row,
    .teacher-lesson-row
) {
    border-color: var(--ds-border);
}

:where(
    .student-list-item,
    .teacher-list-item,
    .discipline-list-item,
    .group-list-item,
    .group-member-item,
    .regular-series-item,
    .teacher-lesson-row
):hover {
    background: var(--ds-action-soft);
}

:where(
    .student-avatar,
    .student-profile-avatar,
    .teacher-avatar,
    .discipline-avatar,
    .account-hero-avatar,
    .account-profile-avatar,
    .group-profile-icon
) {
    color: var(--ds-coral-600);
    border-color: var(--ds-rose-200);
    background: var(--ds-action-soft);
}

.student-row-arrow,
.search-icon,
.input-symbol {
    color: var(--ds-gray-500);
}

/* Status chips */
.student-status--active,
.account-active-label,
.account-active-state {
    color: var(--ds-success);
    border-color: var(--ds-green-100);
    background: var(--ds-success-soft);
}

.student-status--waiting {
    color: var(--ds-warning);
    border-color: var(--ds-amber-100);
    background: var(--ds-warning-soft);
}

.student-status--inactive,
.student-status--not_attending {
    color: var(--ds-text-muted);
    border-color: var(--ds-border);
    background: var(--ds-surface-muted);
}

.student-finance-alert--unpaid,
.finance-discipline-list dd.is-warning {
    color: var(--ds-warning);
    background: var(--ds-warning-soft);
}

.student-finance-alert--debt,
.attendance-debt-badge {
    color: var(--ds-danger);
    background: var(--ds-danger-soft);
}

/* Schedule */
.schedule-page,
.students-page,
.student-detail-page,
.finance-page,
.debug-page,
.account-page,
.teacher-statistics-page,
.student-portal-page,
.teacher-home-page {
    background: transparent;
}

.schedule-overdue-reminder {
    color: var(--ds-danger);
    border-color: var(--ds-red-100);
    background: var(--ds-danger-soft);
}

.calendar-scroll::-webkit-scrollbar-thumb {
    background: var(--ds-gray-300);
}

.calendar-corner,
.day-headers,
.time-axis,
.calendar-grid {
    border-color: var(--ds-border);
}

.day-header,
.calendar-cell {
    border-color: var(--ds-border);
}

.day-header.is-today {
    color: var(--ds-action-hover);
    background: var(--ds-action-soft);
    box-shadow: inset 0 -3px 0 var(--ds-action);
}

.day-header.is-today .weekday-date,
.today-badge {
    color: var(--ds-action-hover);
}

.calendar-cell:hover {
    background: rgba(255, 233, 235, 0.38);
}

.calendar-cell.is-current-day {
    background: rgba(255, 245, 245, 0.65);
}

.lesson-card {
    --lesson-type-color: var(--crm-lesson-individual);
    color: var(--ds-text);
    border-color: color-mix(in srgb, var(--lesson-type-color) 34%, white);
    background: color-mix(in srgb, var(--lesson-type-color) 10%, white);
    box-shadow: 0 7px 18px rgba(31, 32, 37, 0.09);
}

.lesson-card::after {
    background: var(--crm-status-pending);
}

.lesson-card:hover {
    border-color: color-mix(in srgb, var(--lesson-type-color) 55%, white);
    box-shadow: 0 12px 26px rgba(31, 32, 37, 0.14);
}

.lesson-card--group {
    --lesson-type-color: var(--crm-lesson-group);
}

.lesson-card--makeup {
    --lesson-type-color: var(--crm-lesson-makeup);
}

.lesson-card--master_class {
    --lesson-type-color: var(--crm-lesson-master_class);
}

.lesson-card--status-conducted::after {
    background: var(--crm-status-conducted);
}

.lesson-card--status-cancelled::after {
    background: var(--crm-status-cancelled);
}

.lesson-room-badge {
    color: var(--ds-text-strong);
    border-color: color-mix(in srgb, var(--lesson-type-color) 42%, white);
    background: rgba(255, 255, 255, 0.78);
}

.lesson-card--group .lesson-room-badge {
    color: var(--ds-text-strong);
    border-color: color-mix(in srgb, var(--crm-lesson-group) 42%, white);
}

.lesson-card--makeup .lesson-room-badge {
    color: var(--ds-text-strong);
    border-color: color-mix(in srgb, var(--crm-lesson-makeup) 42%, white);
}

.lesson-card--overdue {
    border-color: color-mix(in srgb, var(--crm-attendance-missed) 50%, white);
    background: color-mix(in srgb, var(--crm-attendance-missed) 10%, white);
}

.lesson-status-dot--pending {
    background: var(--crm-status-pending);
}

.lesson-status-dot--conducted {
    background: var(--crm-status-conducted);
}

.lesson-status-dot--cancelled {
    background: var(--crm-status-cancelled);
}

.lesson-card-slot--selected .lesson-card {
    outline-color: var(--ds-action);
}

/* Dialogs and notices */
:where(.student-dialog, .password-dialog, .confirm-dialog, .lesson-detail-dialog)::backdrop {
    background: rgba(17, 18, 21, 0.56);
    backdrop-filter: blur(6px);
}

:where(.dialog-panel, .confirm-dialog-form, .lesson-detail-panel) {
    border-color: var(--ds-border);
    background: var(--ds-surface);
    box-shadow: 0 28px 90px rgba(17, 18, 21, 0.24);
}

.dialog-header,
.dialog-footer,
.lesson-detail-header {
    border-color: var(--ds-border);
}

.dialog-close:hover {
    color: var(--ds-action-hover);
    background: var(--ds-action-soft);
}

.flash {
    color: var(--ds-danger);
    border-color: var(--ds-red-100);
    background: var(--ds-danger-soft);
}

.flash--success {
    color: var(--ds-success);
    border-color: var(--ds-green-100);
    background: var(--ds-success-soft);
}

.flash--info {
    color: var(--ds-info);
    border-color: var(--ds-indigo-100);
    background: var(--ds-info-soft);
}

/* Email verification */
.portal-flash-stack,
.detail-flash-stack {
    margin-bottom: var(--ds-space-4);
}

.email-verification-banner {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    margin-bottom: var(--ds-space-5);
    padding: var(--ds-space-4) var(--ds-space-5);
    color: var(--ds-warning-strong, #75510a);
    border: 1px solid var(--ds-amber-100);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-warning-soft, #fff7df);
}

.email-verification-banner__icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--ds-radius-md);
    background: rgba(255, 255, 255, 0.72);
}

.email-verification-banner__icon svg {
    width: 22px;
    height: 22px;
}

.email-verification-banner__copy {
    min-width: 0;
    flex: 1;
}

.email-verification-banner__copy h2 {
    margin: 0 0 3px;
    color: inherit;
    font-size: 16px;
}

.email-verification-banner__copy p {
    margin: 0;
    color: inherit;
    line-height: 1.5;
}

.email-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.email-status svg {
    width: 15px;
    height: 15px;
}

.email-status--verified {
    color: var(--ds-success);
    background: var(--ds-success-soft);
}

.email-status--pending {
    color: var(--ds-warning-strong, #75510a);
    background: var(--ds-warning-soft, #fff7df);
}

.email-status--empty {
    color: var(--ds-text-muted);
    background: var(--ds-surface-muted);
}

.account-verification-action {
    margin-top: var(--ds-space-4);
}

.secondary-button--full {
    width: 100%;
    justify-content: center;
}

.verification-result__icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: var(--ds-space-4);
    color: var(--ds-success);
    place-items: center;
    border-radius: 50%;
    background: var(--ds-success-soft);
}

.verification-result__icon--error {
    color: var(--ds-danger);
    background: var(--ds-danger-soft);
}

.verification-result__icon svg {
    width: 28px;
    height: 28px;
}

.verification-link {
    box-sizing: border-box;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 720px) {
    .email-verification-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .email-verification-banner form,
    .email-verification-banner button {
        width: 100%;
    }
}

/* Account and profile emphasis */
.account-hero,
.teacher-home-hero,
.student-welcome {
    color: var(--ds-white);
    border-color: transparent;
    background: var(--ds-brand-dark);
    box-shadow: var(--ds-shadow-md);
}

.account-hero h1,
.account-hero p,
.account-hero .schedule-kicker,
.teacher-home-hero h1,
.teacher-home-hero p,
.student-welcome h1,
.student-welcome p,
.student-welcome-eyebrow {
    color: inherit;
}

.account-role-badge,
.student-welcome-badge {
    color: var(--ds-white);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.account-card-icon,
.student-card-icon,
.student-stat-icon,
.statistics-kpi-icon,
.finance-kpi-icon,
.student-finance-heading-icon {
    color: var(--ds-coral-600);
    background: var(--ds-action-soft);
}

/* Finance dashboard */
.finance-kpi {
    overflow: hidden;
}

.finance-kpi--revenue {
    color: var(--ds-white);
    border-color: transparent;
    background: var(--ds-brand-dark);
    box-shadow: var(--ds-shadow-md);
}

.finance-kpi--revenue :where(p, strong, small) {
    color: var(--ds-white);
}

.finance-kpi--revenue .finance-kpi-icon {
    color: var(--ds-white);
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.1);
}

.finance-kpi--unpaid {
    border-color: var(--ds-amber-100);
    background: var(--ds-warning-soft);
}

.finance-kpi--debt {
    border-color: var(--ds-red-100);
    background: var(--ds-danger-soft);
}

.finance-kpi--balance {
    border-color: var(--ds-indigo-100);
    background: var(--ds-info-soft);
}

.finance-revenue-row.is-current {
    background: var(--ds-action-soft);
}

.finance-revenue-row progress::-webkit-progress-value,
.finance-method-list progress::-webkit-progress-value,
.finance-coverage-progress::-webkit-progress-value {
    background: var(--ds-action);
}

.finance-revenue-row progress::-moz-progress-bar,
.finance-method-list progress::-moz-progress-bar,
.finance-coverage-progress::-moz-progress-bar {
    background: var(--ds-action);
}

.finance-coverage-value strong,
.finance-discipline-list dd.is-positive,
.finance-summary-grid .is-paid strong,
.finance-summary-grid .is-balance strong {
    color: var(--ds-success);
}

.finance-debtors-list a:hover,
.finance-recent-list a:hover {
    background: var(--ds-action-soft);
}

/* Statistics and progress visuals */
.statistics-period-tab.is-active,
.statistics-kpi--attendance .statistics-kpi-icon,
.statistics-kpi--time .statistics-kpi-icon {
    color: var(--ds-coral-600);
}

.statistics-progress i,
.student-progress-value i,
.student-finance-status.is-paid::before {
    background: var(--ds-action);
}

.statistics-timeline-bar .is-conducted,
.statistics-chart-legend .is-conducted,
.statistics-status-list .is-conducted,
.teacher-lesson-row--conducted::before {
    background: var(--crm-status-conducted);
}

.statistics-timeline-bar .is-cancelled,
.statistics-chart-legend .is-cancelled,
.statistics-status-list .is-cancelled,
.teacher-lesson-row--cancelled::before {
    background: var(--crm-status-cancelled);
}

.statistics-timeline-bar .is-pending,
.statistics-chart-legend .is-pending,
.statistics-status-list .is-pending,
.teacher-lesson-row--pending::before,
.student-lesson-calendar-legend .is-upcoming {
    background: var(--crm-status-pending);
}

.student-lesson-item--attended::after,
.student-lesson-calendar-legend .is-attended,
.student-progress-legend .is-attended,
.student-mini-lesson.is-attended .student-mini-state {
    background: var(--crm-attendance-attended);
}

.student-lesson-item--missed::after,
.student-lesson-calendar-legend .is-missed,
.student-progress-legend .is-missed,
.student-mini-lesson.is-missed .student-mini-state {
    background: var(--crm-attendance-missed);
}

.student-lesson-item--makeup::after,
.student-lesson-calendar-legend .is-makeup,
.statistics-progress .is-makeup,
.student-mini-lesson.is-makeup .student-mini-state {
    background: var(--crm-lesson-makeup);
}

.student-lesson-item--master_class::after,
.student-lesson-calendar-legend .is-master-class,
.statistics-progress .is-master_class,
.student-mini-lesson.is-master_class .student-mini-state {
    background: var(--crm-lesson-master_class);
}

.attendance-summary-grid .is-attended strong {
    color: var(--crm-attendance-attended);
}

.attendance-summary-grid .is-missed strong,
.statistics-attendance-list .is-danger {
    color: var(--crm-attendance-missed);
}

/* Branches and organization structure */
.branches-overview {
    color: var(--ds-white);
    border-color: transparent;
    background: var(--ds-brand-dark);
}

.branches-overview :where(span, strong, p) {
    color: inherit;
}

.branches-overview > div > span {
    color: #d7d8dd;
}

.branches-overview > div > strong {
    color: var(--ds-brand-dark);
    border-color: rgba(255, 255, 255, 0.84);
    background: var(--ds-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.branches-overview > p {
    color: #c7c8ce;
}

.branch-card.is-current {
    border-color: var(--ds-rose-200);
    box-shadow: 0 14px 38px rgba(232, 61, 74, 0.12);
}

.branch-card-marker {
    color: var(--ds-white);
    border-color: var(--ds-action);
    background: var(--ds-action);
}

.branch-card-marker .ti-icon {
    color: var(--ds-white);
}

.branch-current-badge {
    color: var(--ds-action-hover);
    border-color: var(--ds-rose-200);
    background: var(--ds-action-soft);
}

/* Organization appearance settings */
.settings-page {
    display: block;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(20px, 3vw, 36px);
}

.settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-6);
    margin-bottom: var(--ds-space-6);
}

.settings-header h1,
.settings-preview-heading h2,
.settings-panel-header h2 {
    margin: 0;
    color: var(--ds-text-strong);
}

.settings-header h1 {
    margin-top: 4px;
    font-size: clamp(28px, 3vw, 40px);
    line-height: var(--ds-leading-tight);
    letter-spacing: var(--ds-tracking-tight);
}

.settings-header > div > p:last-child,
.settings-preview-heading > p:last-child,
.settings-panel-header p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--ds-text-muted);
    line-height: var(--ds-leading-body);
}

.settings-access-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    color: var(--ds-text-muted);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
}

.settings-access-icon,
.settings-security-icon {
    width: 16px;
    height: 16px;
}

.settings-flashes {
    margin-bottom: var(--ds-space-5);
}

.settings-flashes .flash {
    margin: 0;
}

.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    align-items: start;
    gap: var(--ds-space-6);
}

.settings-color-form {
    display: grid;
    min-width: 0;
    gap: var(--ds-space-5);
}

.settings-panel,
.settings-preview {
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-sm);
}

.settings-panel {
    overflow: hidden;
}

.settings-panel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface-subtle);
}

.settings-panel-header h2,
.settings-preview-heading h2 {
    font-size: 18px;
    line-height: 1.25;
}

.settings-panel-header p,
.settings-preview-heading > p:last-child {
    font-size: 13px;
}

.settings-panel-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    color: var(--ds-action-hover);
    border: 1px solid var(--ds-rose-200);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-action-soft);
}

.settings-panel-icon--status {
    color: var(--crm-status-conducted);
    border-color: color-mix(in srgb, var(--crm-status-conducted) 28%, white);
    background: color-mix(in srgb, var(--crm-status-conducted) 10%, white);
}

.settings-panel-icon .ti-icon {
    width: 21px;
    height: 21px;
}

.color-setting-list {
    display: grid;
}

.color-setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 17px 22px;
    border-bottom: 1px solid var(--ds-border);
}

.color-setting-row:last-child {
    border-bottom: 0;
}

.color-setting-copy {
    display: grid;
    gap: 4px;
}

.color-setting-copy strong {
    color: var(--ds-text-strong);
    font-size: 14px;
}

.color-setting-copy small {
    color: var(--ds-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.color-setting-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-setting-control code {
    min-width: 72px;
    color: var(--ds-text-muted);
    font: 600 12px/1 var(--ds-font-mono);
    text-align: right;
}

.color-setting-control input[type="color"] {
    width: 48px;
    height: 38px;
    padding: 4px;
    border: 1px solid var(--ds-border-strong);
    border-radius: 10px;
    background: var(--ds-surface);
    cursor: pointer;
}

.color-setting-control input[type="color"]:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 2px;
}

.color-setting-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-setting-control input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 6px;
}

.color-setting-control input[type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: 6px;
}

.color-setting-row .field-error {
    grid-column: 1 / -1;
    color: var(--ds-danger);
    font-size: 12px;
}

.settings-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.settings-form-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-form-actions .ti-icon {
    width: 17px;
    height: 17px;
}

.settings-preview {
    position: sticky;
    top: 20px;
    max-height: calc(100dvh - var(--topbar-height) - 40px);
    overflow-x: hidden;
    overflow-y: auto;
}

.settings-preview-heading {
    padding: 20px 22px;
    border-bottom: 1px solid var(--ds-border);
}

.settings-preview-lessons {
    display: grid;
    gap: 9px;
    padding: 18px 20px;
    background: var(--ds-surface-subtle);
}

.settings-lesson-card {
    --preview-color: var(--crm-lesson-individual);
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    padding: 12px 15px 12px 12px;
    border: 1px solid color-mix(in srgb, var(--preview-color) 34%, white);
    border-radius: var(--ds-radius-sm);
    background: color-mix(in srgb, var(--preview-color) 10%, white);
}

.settings-lesson-card::after {
    position: absolute;
    inset: 0 0 0 auto;
    width: 4px;
    background: var(--preview-color);
    content: "";
}

.settings-lesson-card--group {
    --preview-color: var(--crm-lesson-group);
}

.settings-lesson-card--makeup {
    --preview-color: var(--crm-lesson-makeup);
}

.settings-lesson-room {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    color: var(--ds-text-strong);
    font-size: 11px;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--preview-color) 42%, white);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
}

.settings-lesson-card div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.settings-lesson-card strong {
    color: var(--ds-text-strong);
    font-size: 13px;
}

.settings-lesson-card small {
    overflow: hidden;
    color: var(--ds-text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-status-preview {
    display: grid;
    margin: 0;
    padding: 8px 20px;
}

.settings-status-preview > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ds-border);
}

.settings-status-preview > div:last-child {
    border-bottom: 0;
}

.settings-status-preview dt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ds-text-strong);
    font-size: 12px;
    font-weight: 700;
}

.settings-status-preview dd {
    max-width: 52%;
    margin: 0;
    color: var(--ds-text-muted);
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.settings-status-preview i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--crm-status-pending);
}

.settings-status-preview .is-conducted {
    background: var(--crm-status-conducted);
}

.settings-status-preview .is-cancelled {
    background: var(--crm-status-cancelled);
}

.settings-status-preview .is-attended {
    background: var(--crm-attendance-attended);
}

.settings-status-preview .is-missed {
    background: var(--crm-attendance-missed);
}

.settings-security-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 15px 20px;
    color: var(--ds-text-muted);
    font-size: 11px;
    line-height: 1.5;
    border-top: 1px solid var(--ds-border);
    background: var(--ds-surface-subtle);
}

.settings-security-icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ds-action-hover);
}

@media (max-width: 1180px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-preview {
        position: static;
        max-height: none;
    }
}

@media (max-width: 620px) {
    .settings-header {
        flex-direction: column;
    }

    .settings-access-badge {
        align-self: flex-start;
    }

    .color-setting-row {
        grid-template-columns: 1fr;
    }

    .color-setting-control {
        justify-content: space-between;
    }

    .color-setting-control code {
        text-align: left;
    }

    .settings-form-actions button {
        width: 100%;
    }
}

/* Login */
.auth-presentation {
    color: var(--ds-white);
    background: var(--ds-brand-dark);
    box-shadow: 0 28px 74px rgba(17, 18, 21, 0.24);
}

.auth-presentation::before,
.auth-presentation::after {
    border-color: rgba(255, 255, 255, 0.13);
}

.brand--light .brand-name {
    color: var(--ds-white);
}

.presentation-orb {
    background: var(--ds-action);
    opacity: 0.32;
    filter: blur(16px);
}

.eyebrow--blue {
    color: var(--ds-action-hover);
}

.login-header h2 {
    color: var(--ds-text-strong);
}

.input-wrap:focus-within {
    border-color: var(--ds-action);
    box-shadow: 0 0 0 4px var(--ds-focus-ring);
}

.login-help,
.auth-copyright {
    color: var(--ds-text-faint);
}

.auth-form-meta {
    display: flex;
    justify-content: flex-end;
    margin-top: -10px;
}

.auth-form-meta a,
.reset-links a {
    color: var(--ds-action-hover);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.auth-form-meta a:hover,
.reset-links a:hover {
    color: var(--ds-action-active);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-form-meta a:focus-visible,
.reset-links a:focus-visible {
    border-radius: 4px;
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 3px;
}

.reset-panel {
    width: min(100%, 460px);
}

.reset-code-input {
    font-family: var(--ds-font-mono);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.password-rules {
    margin: -8px 0 0;
    color: var(--ds-text-faint);
    font-size: 12px;
    line-height: 1.5;
}

.reset-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    margin-top: 24px;
}

/* Motion and accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .lesson-card.lesson-card--overdue {
        animation-duration: 1.8s !important;
        animation-iteration-count: infinite !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --ds-border: #b9bbc2;
        --ds-border-strong: #8f929b;
        --ds-text-muted: #50535b;
    }

    .sidebar-link {
        color: var(--ds-white);
    }
}

@media (max-width: 900px) {
    .app-shell {
        --topbar-height: 68px;
        --sidebar-width: min(278px, 84vw);
    }

    .app-topbar {
        padding-inline: 14px;
    }

    .topbar-start,
    .topbar-end {
        gap: 10px;
    }

    .account-copy {
        display: none;
    }

    .app-sidebar,
    .app-shell:not(.is-sidebar-open) .app-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--sidebar-width);
        max-width: var(--sidebar-width);
        flex-basis: var(--sidebar-width);
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        opacity: 1;
        box-shadow: 24px 0 60px rgba(17, 18, 21, 0.24);
        transform: translateX(-105%);
        transition: transform var(--ds-duration-normal) var(--ds-ease);
    }

    .app-shell.is-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-shell.is-sidebar-open .sidebar-scrim {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(17, 18, 21, 0.48);
        backdrop-filter: blur(3px);
        cursor: pointer;
    }
}

@media (max-width: 760px) {
    .app-topbar {
        background: rgba(255, 255, 255, 0.96);
    }

    .app-sidebar {
        box-shadow: 24px 0 60px rgba(17, 18, 21, 0.24);
    }

    :where(.students-list-card, .detail-card, .finance-dashboard-card, .statistics-card) {
        border-radius: var(--ds-radius-md);
    }
}

/* Student funnel */
.funnel-page {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
    padding: 24px clamp(16px, 2.4vw, 34px) 22px;
    background: transparent;
}

.funnel-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.funnel-header h1 {
    margin: 0;
    color: var(--ds-text-strong);
    font-size: 32px;
    font-weight: 780;
    line-height: var(--ds-leading-tight);
    letter-spacing: var(--ds-tracking-tight);
}

.funnel-header > div:first-child > p:last-child {
    margin: 7px 0 0;
    color: var(--ds-text-muted);
    font-size: 13px;
}

.funnel-summary {
    display: flex;
    min-width: 102px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px 10px 15px;
    color: var(--ds-text-muted);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    box-shadow: var(--ds-shadow-xs);
}

.funnel-summary strong {
    display: grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    padding-inline: 7px;
    color: var(--ds-action-hover);
    font-size: 13px;
    border-radius: 9px;
    background: var(--ds-action-soft);
}

.funnel-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 14px;
    padding: 10px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--ds-shadow-xs);
}

.funnel-search {
    position: relative;
    display: flex;
    width: min(100%, 430px);
    min-height: 42px;
    align-items: center;
}

.funnel-search .search-icon {
    left: 14px;
}

.funnel-search input {
    width: 100%;
    min-height: 42px;
    padding: 0 42px;
    color: var(--ds-text);
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--ds-border);
    outline: 0;
    border-radius: 11px;
    background: var(--ds-surface);
}

.funnel-search:focus-within input {
    border-color: var(--ds-action);
    box-shadow: 0 0 0 4px var(--ds-focus-ring);
}

.funnel-search button {
    position: absolute;
    right: 8px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    color: var(--ds-text-muted);
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.funnel-search button:hover {
    color: var(--ds-text-strong);
    background: var(--ds-surface-muted);
}

.funnel-search button svg {
    width: 17px;
    height: 17px;
}

.funnel-search-result {
    margin: 0 8px 0 0;
    color: var(--ds-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.funnel-board {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(246px, 1fr);
    grid-template-columns: repeat(5, minmax(246px, 1fr));
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 1px 9px;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-color: var(--ds-gray-300) transparent;
    scrollbar-width: thin;
}

.funnel-column {
    --funnel-accent: var(--ds-gray-500);
    --funnel-accent-soft: var(--ds-surface-muted);
    display: flex;
    min-width: 0;
    min-height: 390px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    background: color-mix(in srgb, var(--funnel-accent-soft) 42%, white);
    box-shadow: var(--ds-shadow-xs);
    scroll-snap-align: start;
    transition:
        border-color var(--ds-duration-fast) var(--ds-ease),
        box-shadow var(--ds-duration-fast) var(--ds-ease),
        transform var(--ds-duration-fast) var(--ds-ease);
}

.funnel-column--awaiting_master_class {
    --funnel-accent: #d84d8c;
    --funnel-accent-soft: #fff0f7;
}

.funnel-column--master_class_completed {
    --funnel-accent: var(--ds-indigo-600);
    --funnel-accent-soft: var(--ds-indigo-50);
}

.funnel-column--active {
    --funnel-accent: var(--ds-green-600);
    --funnel-accent-soft: var(--ds-green-50);
}

.funnel-column--waiting {
    --funnel-accent: var(--ds-amber-600);
    --funnel-accent-soft: var(--ds-amber-50);
}

.funnel-column--not_attending {
    --funnel-accent: var(--ds-red-600);
    --funnel-accent-soft: var(--ds-red-50);
}

.funnel-column.is-drop-target {
    border-color: var(--funnel-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--funnel-accent) 18%, transparent);
    transform: translateY(-2px);
}

.funnel-column-header {
    display: flex;
    min-height: 72px;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 15px 13px;
    border-bottom: 1px solid color-mix(in srgb, var(--funnel-accent) 13%, var(--ds-border));
    background: rgba(255, 255, 255, 0.82);
}

.funnel-column-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ds-text-strong);
    font-size: 13px;
    font-weight: 780;
}

.funnel-column-title i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--funnel-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--funnel-accent) 13%, transparent);
}

.funnel-column-header small {
    display: block;
    margin: 6px 0 0 16px;
    color: var(--ds-text-faint);
    font-size: 10px;
}

.funnel-column-count {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    padding: 0 7px;
    color: var(--funnel-accent);
    font-size: 11px;
    font-weight: 800;
    border-radius: 9px;
    background: var(--funnel-accent-soft);
}

.funnel-card-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    scrollbar-color: var(--ds-gray-300) transparent;
    scrollbar-width: thin;
}

.funnel-student-card {
    position: relative;
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    box-shadow: 0 3px 10px rgba(23, 24, 28, 0.045);
    transition:
        border-color var(--ds-duration-fast) var(--ds-ease),
        box-shadow var(--ds-duration-fast) var(--ds-ease),
        opacity var(--ds-duration-fast) var(--ds-ease),
        transform var(--ds-duration-fast) var(--ds-ease);
}

.funnel-student-card:hover {
    border-color: color-mix(in srgb, var(--funnel-accent) 32%, var(--ds-border));
    box-shadow: 0 9px 20px rgba(23, 24, 28, 0.09);
    transform: translateY(-1px);
}

.funnel-student-card.is-movable {
    cursor: grab;
}

.funnel-student-card.is-dragging {
    opacity: 0.42;
    cursor: grabbing;
    transform: rotate(1deg) scale(0.98);
}

.funnel-student-card.is-saving {
    opacity: 0.58;
    pointer-events: none;
}

.funnel-student-card-main {
    display: flex;
    align-items: center;
}

.funnel-student-link {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    padding: 12px 8px 12px 12px;
    color: inherit;
    text-decoration: none;
}

.funnel-student-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--funnel-accent);
    font-size: 10px;
    font-weight: 800;
    border: 1px solid color-mix(in srgb, var(--funnel-accent) 18%, var(--ds-border));
    border-radius: 11px;
    background: var(--funnel-accent-soft);
}

.funnel-student-identity {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.funnel-student-identity strong,
.funnel-student-identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.funnel-student-identity strong {
    color: var(--ds-text-strong);
    font-size: 11px;
    font-weight: 740;
}

.funnel-student-identity small {
    color: var(--ds-text-faint);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.funnel-drag-handle {
    display: grid;
    width: 24px;
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 3px);
    gap: 3px;
    place-content: center;
    align-self: stretch;
    color: var(--ds-gray-400);
}

.funnel-drag-handle i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.funnel-mobile-move-button {
    display: none;
}

.funnel-column-empty {
    display: grid;
    min-height: 110px;
    place-items: center;
    margin: 0;
    padding: 16px;
    color: var(--ds-text-faint);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    border: 1px dashed color-mix(in srgb, var(--funnel-accent) 25%, var(--ds-border));
    border-radius: var(--ds-radius-sm);
    background: rgba(255, 255, 255, 0.48);
}

.funnel-notice {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 80;
    max-width: min(390px, calc(100vw - 32px));
    padding: 13px 16px;
    color: var(--ds-green-700);
    font-size: 12px;
    font-weight: 700;
    border: 1px solid var(--ds-green-100);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-green-50);
    box-shadow: var(--ds-shadow-md);
}

.funnel-notice[data-type="error"] {
    color: var(--ds-danger);
    border-color: var(--ds-red-100);
    background: var(--ds-danger-soft);
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .funnel-mobile-move-button {
        display: flex;
        width: 100%;
        min-height: 36px;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        color: var(--ds-text-muted);
        font-size: 10px;
        font-weight: 720;
        border: 0;
        border-top: 1px solid var(--ds-border);
        background: var(--ds-surface-subtle);
        cursor: pointer;
    }

    .funnel-mobile-move-button:hover {
        color: var(--ds-danger);
        background: var(--ds-danger-soft);
    }

    .funnel-mobile-move-button svg {
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 700px) {
    .funnel-page {
        padding: 18px 12px 12px;
    }

    .funnel-header {
        align-items: center;
    }

    .funnel-header h1 {
        font-size: 27px;
    }

    .funnel-header > div:first-child > p:last-child {
        max-width: 230px;
        font-size: 11px;
    }

    .funnel-summary {
        min-width: auto;
        gap: 8px;
        padding: 7px;
    }

    .funnel-summary > span {
        display: none;
    }

    .funnel-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        margin: 14px 0 10px;
        padding: 7px;
    }

    .funnel-search {
        width: 100%;
    }

    .funnel-search-result {
        margin: 0 4px 2px;
        font-size: 10px;
    }

    .funnel-board {
        grid-auto-columns: min(86vw, 340px);
        grid-template-columns: repeat(5, min(86vw, 340px));
        gap: 10px;
        scroll-padding-inline: 1px;
        scroll-snap-type: x mandatory;
    }

    .funnel-column {
        min-height: 0;
    }

    .funnel-column-header {
        min-height: 66px;
        padding: 13px;
    }

    .funnel-notice {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }
}