/*
 * НТО Школа — workspace redesign.
 * A restrained, high-contrast system shared by public and role-based screens.
 */

:root {
    --bg: #f3f4f2;
    --surface: #ffffff;
    --surface-soft: #f7f8f6;
    --surface-strong: #eceeea;
    --text: #181918;
    --muted: #6f736f;
    --line: #dedfdb;
    --line-strong: #caccc7;
    --primary: #2f65f5;
    --primary-strong: #1f4fd2;
    --primary-soft: #eaf0ff;
    --accent: #10a66a;
    --success: #128f55;
    --warning: #d2810c;
    --danger: #d83f51;
    --violet: #6947db;
    --sidebar: #111210;
    --sidebar-soft: #1b1c19;
    --sidebar-line: #2a2b28;
    --shadow: 0 22px 60px rgba(21, 23, 20, .12);
    --shadow-soft: 0 8px 24px rgba(21, 23, 20, .055);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --focus: 0 0 0 3px rgba(79, 115, 232, .18);
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
    --press-duration: 140ms;
    --ui-duration: 180ms;
}

html {
    background: var(--bg);
    scroll-padding-top: 92px;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -.006em;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
summary,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

::selection {
    background: #cfd9ff;
    color: #131a35;
}

/* Public navigation */
.public-header {
    position: sticky;
    top: 12px;
    z-index: 1000;
    width: min(1320px, calc(100% - 24px));
    min-height: 64px;
    margin: 12px auto 0;
    padding: 9px 10px 9px 14px;
    border: 1px solid rgba(210, 212, 207, .88);
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 36px rgba(20, 22, 18, .08);
    backdrop-filter: blur(18px);
}

.logo {
    gap: 10px;
    color: var(--text);
    font-size: .98rem;
    letter-spacing: -.02em;
}

.logo > i {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 11px;
    background: var(--sidebar);
    color: #fff;
    font-size: .9rem;
}

/* One geometry for every interactive icon, regardless of role or viewport. */
.nav-btn > i,
.nav-menu-item > i,
.workspace-action > i,
.btn > i,
.btn-small > i,
.icon-btn > i,
.notification-bell > i,
.public-nav-menu > summary > i,
.orbital-chip > i,
.hero-kpis > span > i,
.card h2 > i,
.card h3 > i,
.guide-strip i,
.action-buttons i {
    display: inline-grid !important;
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.nav-btn,
.nav-menu-item,
.workspace-action,
.btn,
.btn-small,
.icon-btn,
.notification-bell,
.public-nav-menu > summary {
    align-items: center !important;
}

/* Saturated icons: blue for neutral actions, white for filled semantic actions. */
.public-header .nav-btn > i,
.workspace-action > i,
.btn-gray > i,
.icon-btn > i,
.notification-bell > i,
.nav-menu-item > i,
.card h2 > i,
.card h3 > i {
    color: #2f65f5;
}

.btn:not(.btn-gray) > i,
.btn-small:not(.btn-gray) > i,
.public-header .public-nav-links .nav-btn:last-child > i {
    color: #fff;
}

.workspace-sidebar .nav-btn > i,
.workspace-sidebar .nav-more > summary > i {
    color: #2f65f5 !important;
}

.workspace-sidebar .logout-btn > i {
    color: #e34a5c !important;
}

.logo > span {
    display: grid;
    gap: 1px;
    line-height: 1.15;
}

.logo strong {
    font-weight: 780;
}

.logo small {
    color: #8e918c;
    font-size: .65rem;
    font-weight: 620;
    letter-spacing: .02em;
}

.public-header .nav-buttons,
.public-nav-links {
    gap: 4px;
}

.public-header .nav-btn {
    min-height: 40px;
    padding: 8px 12px;
    border-color: transparent;
    border-radius: 10px;
    background: transparent !important;
    color: #535752 !important;
    font-size: .8rem;
    font-weight: 690;
}

.public-header .nav-btn.active {
    border-color: var(--line);
    background: var(--surface-soft) !important;
    box-shadow: none !important;
    color: var(--text) !important;
}

.public-header .public-nav-links .nav-btn:last-child {
    border-color: var(--sidebar);
    background: var(--sidebar) !important;
    color: #fff !important;
}

/* Shared content shell */
.app-main {
    min-height: calc(100vh - 76px);
}

.container {
    width: min(1320px, 100%);
    max-width: 1320px;
    padding: 24px;
}

.is-public .container {
    padding-top: 28px;
}

.workspace-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
    padding: 17px 4px 14px;
    border-bottom: 1px solid var(--line);
}

.workspace-heading {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.workspace-heading strong {
    overflow: hidden;
    color: var(--text);
    font-size: 1.13rem;
    font-weight: 760;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-kicker {
    color: #858983;
    font-size: .67rem;
    font-weight: 760;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.workspace-shortcuts {
    display: flex;
    align-items: center;
    gap: 6px;
}

.workspace-action {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: #5e625d;
    font-size: .77rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color var(--ui-duration) ease, color var(--ui-duration) ease, background-color var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.workspace-action.active {
    border-color: #c7d2fc;
    background: var(--primary-soft);
    color: #3556be;
}

.workspace-action:active {
    transform: scale(.97);
}

/* Desktop role workspace */
@media (min-width: 1081px) {
    body.is-authenticated {
        padding-left: 252px;
    }

    .workspace-sidebar {
        position: fixed;
        inset: 14px auto 14px 14px;
        z-index: 1000;
        display: flex;
        width: 224px;
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        gap: 18px;
        padding: 16px 12px 12px;
        overflow: visible;
        border: 1px solid #242521;
        border-radius: 22px;
        background: var(--sidebar);
        box-shadow: 0 24px 60px rgba(12, 13, 11, .22);
    }

    .workspace-sidebar .logo {
        width: 100%;
        padding: 0 4px 14px;
        border-bottom: 1px solid var(--sidebar-line);
        color: #fff;
    }

    .workspace-sidebar .logo > i {
        background: var(--primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
    }

    .workspace-sidebar .logo strong {
        color: #fff;
    }

    .workspace-sidebar .logo small {
        color: #777b74;
    }

    .workspace-sidebar .nav-buttons {
        display: flex;
        width: 100%;
        min-height: 0;
        flex: 1;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 3px;
        overflow: visible auto;
        scrollbar-color: #343632 transparent;
    }

    .workspace-sidebar .workspace-user {
        order: -4;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 54px;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        padding: 8px;
        border: 1px solid var(--sidebar-line);
        border-radius: 12px;
        background: var(--sidebar-soft);
        color: #fff;
    }

    .workspace-user > i {
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 10px;
        background: #292b27;
        color: #b9bdb5;
    }

    .workspace-user > span {
        display: grid;
        min-width: 0;
        gap: 1px;
    }

    .workspace-user strong {
        overflow: hidden;
        color: #f7f7f4;
        font-size: .76rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .workspace-user small {
        color: #80847d;
        font-size: .66rem;
    }

    .workspace-sidebar .notification-center {
        order: -3;
        position: absolute;
        top: 74px;
        right: 21px;
        width: 31px;
        height: 31px;
        border-color: transparent;
        background: transparent;
    }

    .workspace-sidebar .notification-bell {
        color: #8d9189;
    }

    .workspace-sidebar .notification-badge {
        top: -4px;
        right: -4px;
        border-color: var(--sidebar-soft);
    }

    .workspace-sidebar .nav-btn {
        width: 100%;
        min-height: 39px;
        justify-content: flex-start;
        padding: 9px 10px;
        border-color: transparent;
        border-radius: 10px;
        background: transparent !important;
        box-shadow: none !important;
        color: #8f938b !important;
        font-size: .79rem;
        font-weight: 650;
        transition: background-color var(--ui-duration) ease, color var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
    }

    .workspace-sidebar .nav-btn > i {
        color: #7896ff;
        font-size: .82rem;
    }

    .workspace-sidebar .nav-btn.active {
        background: #f3f4ef !important;
        box-shadow: none !important;
        color: #141512 !important;
    }

    .workspace-sidebar .nav-btn.active > i {
        color: #2f65f5;
    }

    .workspace-sidebar .nav-btn:active {
        transform: scale(.98);
    }

    .workspace-sidebar .nav-more {
        width: 100%;
    }

    .workspace-sidebar .nav-more > summary {
        width: 100%;
    }

    .workspace-sidebar .nav-menu {
        top: auto;
        right: auto;
        bottom: 0;
        left: calc(100% + 10px);
        width: 224px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 13px;
        background: #fff;
        box-shadow: var(--shadow);
        transform-origin: left bottom;
    }

    .workspace-sidebar .nav-menu-item {
        min-height: 38px;
        padding: 9px 10px;
        border-radius: 8px;
        color: #555954;
        font-size: .78rem;
        font-weight: 650;
    }

    .workspace-sidebar .nav-menu-item.active {
        background: var(--primary-soft);
        color: #3556be;
    }

    .workspace-sidebar .nav-logout-form {
        width: 100%;
        margin-top: auto;
        padding-top: 9px;
        border-top: 1px solid var(--sidebar-line);
    }

    .workspace-sidebar .logout-btn {
        color: #ba858c !important;
    }

    .is-authenticated .app-main {
        width: 100%;
        min-height: 100vh;
    }

    .is-authenticated .container {
        max-width: 1320px;
        padding-top: 22px;
    }
}

/* Foundation components */
.card,
.form-panel,
.soft-panel,
.concept-panel,
.glass-panel,
.profile-card,
.group-card,
.pricing-card,
.feature-card,
.question-item,
.test-question,
.answer-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

.card {
    margin-bottom: 14px;
    padding: 20px;
}

.card h2,
.catalog-section-heading h2,
.home-section-heading h2,
.home-pricing__heading h2 {
    color: var(--text);
    font-weight: 760;
    letter-spacing: -.028em;
}

.card h2 {
    margin-bottom: 14px;
    font-size: 1.17rem;
}

.card h2 > i,
.card h3 > i {
    color: #2f65f5;
    font-size: .9em;
}

.card h3,
.profile-card h3,
.group-card h3,
.concept-item h3 {
    color: #242623;
    font-weight: 730;
    letter-spacing: -.018em;
}

.text-muted,
.card-note,
.tariff-note,
.pricing-description,
.pricing-note,
.concept-item p,
.feature-card p {
    color: var(--muted) !important;
}

.grid {
    gap: 12px;
}

.profile-card,
.group-card,
.feature-card,
.pricing-card,
.concept-item,
.assignment-catalog-card,
.ready-test-card {
    transition: border-color var(--ui-duration) ease, box-shadow var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.feature-card,
.profile-card,
.group-card {
    padding: 17px;
}

.feature-card {
    text-align: left;
}

.feature-card > i {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 11px;
    background: #e7edff;
    color: #2f65f5;
    font-size: .95rem;
}

.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.stat-card {
    position: relative;
    min-height: 116px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: none;
}

.stat-card::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #4f75f6;
    content: "";
    opacity: .72;
}

.stat-card:nth-child(2n)::after {
    background: #1da266;
}

.stat-card:nth-child(3n)::after {
    background: #d54d60;
}

.stat-card h3 {
    margin-bottom: 5px;
    color: #20221f;
    font-size: 1.75rem;
    font-weight: 760;
    letter-spacing: -.045em;
}

.stat-card p {
    color: #767a74;
    font-size: .76rem;
    font-weight: 650;
}

.btn,
.btn-small,
a.btn,
a.btn-small,
button.btn,
button.btn-small {
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--primary);
    border-radius: 10px;
    background: var(--primary);
    box-shadow: none;
    color: #fff !important;
    font-size: .82rem;
    font-weight: 720;
    letter-spacing: -.006em;
    transition: background-color var(--ui-duration) ease, border-color var(--ui-duration) ease, color var(--ui-duration) ease, box-shadow var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.btn-small,
a.btn-small,
button.btn-small {
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: .76rem;
}

.btn:active,
.btn-small:active,
.icon-btn:active,
.notification-bell:active,
.choice-option:active,
.ntoshka-launcher:active {
    transform: scale(.97);
}

.btn.btn-gray,
.btn-small.btn-gray,
a.btn.btn-gray,
a.btn-small.btn-gray,
button.btn.btn-gray,
button.btn-small.btn-gray {
    border-color: var(--line-strong) !important;
    background: var(--surface) !important;
    color: #50544f !important;
}

.btn-green {
    border-color: #0d804a !important;
    background: #128f55 !important;
}

.btn-purple {
    border-color: #5734c5 !important;
    background: #6947db !important;
}

.btn-red {
    border-color: #bd2f40 !important;
    background: #d83f51 !important;
}

.btn-orange {
    border-color: #b96e07 !important;
    background: #d2810c !important;
    color: #fff !important;
}

.icon-btn,
.notification-bell {
    display: inline-grid;
    min-width: 34px;
    min-height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    color: #6d716b;
    cursor: pointer;
    transition: background-color var(--ui-duration) ease, color var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.form-group {
    margin-bottom: 14px;
}

.form-group label,
.ready-test-use label,
.demo-control-card label,
.demo-side-card label {
    margin-bottom: 6px;
    color: #4f534e;
    font-size: .77rem;
    font-weight: 720;
}

.form-group input,
.form-group select,
.form-group textarea,
.filter-select,
.answer-input,
.answer-textarea,
.teacher-group-create-form input,
.ready-direction-filter select,
.catalog-filters input,
.catalog-filters select,
.demo-control-card select,
.demo-side-card select,
.demo-side-card textarea,
.demo-inline input {
    min-height: 42px;
    padding: 10px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: inset 0 1px 1px rgba(20, 22, 18, .02);
    color: var(--text);
    font-size: .86rem;
    transition: border-color var(--ui-duration) ease, box-shadow var(--ui-duration) ease, background-color var(--ui-duration) ease;
}

input::placeholder,
textarea::placeholder {
    color: #a1a49f;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.answer-input:focus,
.answer-textarea:focus,
.filter-select:focus {
    border-color: var(--primary);
    background: #fff;
    box-shadow: var(--focus);
}

.checkbox-row,
.radio-row,
.choice-option {
    border-color: var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
}

.choice-option {
    transition: border-color var(--ui-duration) ease, background-color var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.table-container {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: none;
}

.table th,
.table td {
    padding: 11px 12px;
    border-bottom-color: #eceeeb;
    font-size: .8rem;
}

.table th {
    background: #f5f6f4;
    color: #71756f;
    font-size: .7rem;
    font-weight: 760;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.status,
.profile-badge,
.concept-tag,
.assignment-catalog-tags span,
.demo-status {
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .69rem;
    font-weight: 730;
}

.status-correct,
.status-success,
.status-online {
    border-color: #c5e4d2;
    background: #eaf6ef;
    color: #267149;
}

.status-pending,
.status-warning {
    border-color: #ead9b9;
    background: #faf3e5;
    color: #8b6123;
}

.status-banned,
.status-error {
    border-color: #ecc8cd;
    background: #faecee;
    color: #a43d49;
}

.status-offline {
    border-color: var(--line);
    background: var(--surface-strong);
    color: #6c706a;
}

.profile-badge,
.concept-tag,
.assignment-catalog-tags span {
    border-color: #d5dcf5;
    background: var(--primary-soft);
    color: #4660b4;
}

.progress-track,
.demo-progress {
    height: 7px;
    border-radius: 999px;
    background: #e6e8e4;
}

.progress-fill,
.demo-progress i {
    border-radius: inherit;
    background: var(--primary);
}

.progress-fill {
    animation: none;
}

.flash,
.profile-completion-notice,
.subscription-notice,
.demo-safety,
.independent-note,
.answer-correct,
.answer-incorrect {
    border-width: 1px;
    border-left-width: 3px;
    border-radius: 11px;
    box-shadow: none;
}

.flash-success,
.answer-correct,
.demo-safety {
    border-color: #b9dbc7;
    background: #eff8f2;
    color: #286e49;
}

.flash-error,
.answer-incorrect {
    border-color: #e9c0c6;
    background: #fbeff0;
    color: #973d47;
}

.empty-state {
    padding: 48px 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 14px;
    background: var(--surface-soft);
}

.empty-state i {
    color: #969a94;
    font-size: 2.2rem;
    opacity: .6;
}

pre {
    border: 1px solid #e1e3df;
    border-radius: 11px;
    background: #f5f6f4;
    color: #343733;
}

details > summary {
    color: #4c63b6;
}

/* Modals and transient UI */
.modal,
.notification-overlay {
    background: rgba(17, 18, 16, .58);
    backdrop-filter: blur(5px);
}

.modal-content,
.notification-panel {
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(10, 11, 9, .28);
}

.modal.show .modal-content,
.notification-overlay.show .notification-panel {
    animation: redesign-modal-in 210ms var(--ease-out) both;
}

@keyframes redesign-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-header {
    background: #f7f8f6;
}

.notification-item.unread {
    border-left-color: var(--primary);
    background: var(--primary-soft);
}

/* Public presentation */
.hero {
    border: 1px solid #242621;
    border-radius: var(--radius-lg);
    background: var(--sidebar);
    box-shadow: 0 28px 72px rgba(18, 20, 17, .16);
}

.hero::before {
    background: linear-gradient(90deg, rgba(12, 13, 11, .96) 0%, rgba(12, 13, 11, .84) 54%, rgba(12, 13, 11, .48) 100%);
}

.hero-home {
    min-height: 590px;
    padding: clamp(30px, 5vw, 64px);
}

.hero-home .hero-background {
    filter: grayscale(.45) saturate(.72) contrast(1.04);
}

.hero h1 {
    max-width: 740px;
    color: #fff;
    font-size: clamp(2.7rem, 6vw, 5.4rem);
    font-weight: 720;
    letter-spacing: -.065em;
    line-height: .94;
}

.hero-home .hero-lead {
    max-width: 650px;
    margin: 18px 0 24px;
    color: #c9cdc6;
    font-size: clamp(1rem, 1.7vw, 1.22rem);
    line-height: 1.55;
}

.orbital-chip,
.hero-kpis span {
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #dfe2dc;
    font-size: .72rem;
    font-weight: 690;
    backdrop-filter: blur(9px);
}

.hero-campaign {
    max-width: 700px;
    margin-top: 24px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-left: 1px solid rgba(255, 255, 255, .13);
    border-radius: 16px;
    background: rgba(255, 255, 255, .075);
    backdrop-filter: blur(14px);
}

.hero-campaign__eyebrow {
    color: #9eb1f1;
}

.hero-campaign h2 {
    margin-top: 7px;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 690;
    letter-spacing: -.035em;
}

.hero-home .hero-cta {
    border-color: #fff !important;
    background: #fff !important;
    color: #171816 !important;
}

.hero-login {
    border-color: rgba(255, 255, 255, .2) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.home-pricing,
.home-demo,
.home-method,
.home-seo-section {
    margin-top: 54px;
    padding-top: 44px;
    border-top-color: var(--line);
}

.home-section-heading,
.home-pricing__heading > div,
.home-seo-copy {
    max-width: 760px;
}

.home-section-heading h2,
.home-pricing__heading h2,
.home-seo-copy h2 {
    font-size: clamp(1.7rem, 3vw, 2.45rem);
}

.home-section-heading .orbital-chip,
.home-pricing__heading .orbital-chip,
.home-seo-copy .orbital-chip,
.concept-panel .orbital-chip {
    border-color: var(--line);
    background: var(--surface-strong);
    color: #565a54;
}

.sample-task {
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

.method-step > span {
    border-radius: 10px;
    background: var(--sidebar);
}

.trust-links a,
.seo-link-item {
    border-radius: 14px;
    box-shadow: none;
    transition: border-color var(--ui-duration) ease, background-color var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.site-footer {
    width: min(1320px, calc(100% - 24px));
    margin: 72px auto 12px;
    padding: 30px;
    border: 1px solid #292b27;
    border-radius: 20px;
    background: var(--sidebar);
    color: #a8aca4;
}

.site-footer nav {
    gap: 8px 18px;
}

.site-footer a {
    color: #e5e7e2;
}

.auth-card {
    max-width: 660px;
    margin: 28px auto;
    padding: clamp(22px, 4vw, 36px);
    border-radius: 20px;
    box-shadow: var(--shadow-soft);
}

/* Catalog, demo and dense work screens */
.teacher-catalog,
.teacher-demo {
    max-width: none;
}

.catalog-hero,
.demo-hero {
    gap: 28px;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid #252723;
    border-radius: 20px;
    background: var(--sidebar);
    box-shadow: var(--shadow);
    color: #d5d8d1;
}

.catalog-hero h2,
.demo-hero h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -.055em;
}

.catalog-hero p,
.demo-hero p {
    color: #aeb3aa;
}

.catalog-eyebrow {
    color: #a7b7ee;
}

.catalog-proof {
    border-color: #343631;
    border-radius: 15px;
    background: #1b1d19;
}

.catalog-section,
.demo-control-card,
.demo-live-card,
.demo-side-card {
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: none;
}

.catalog-section {
    margin-top: 14px;
    padding: clamp(18px, 3vw, 28px);
}

.catalog-step {
    border-radius: 8px;
    background: var(--primary-soft);
    color: #4862b7;
}

.ready-direction {
    border-color: var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.ready-direction[open] > summary {
    border-bottom-color: var(--line);
}

.ready-test-grid,
.assignment-catalog-grid {
    gap: 10px;
}

.ready-test-card,
.assignment-catalog-card {
    border-color: var(--line);
    border-top: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.ready-test-card::before,
.assignment-catalog-card::before {
    display: block;
    width: 32px;
    height: 4px;
    margin-bottom: 13px;
    border-radius: 99px;
    background: var(--primary);
    content: "";
}

.ready-test-card.ready-test-green::before {
    background: var(--success);
}

.ready-test-card.ready-test-purple::before {
    background: var(--violet);
}

.demo-layout {
    gap: 12px;
}

.demo-control-card,
.demo-live-card,
.demo-side-card {
    padding: 18px;
}

.live-dot {
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(47, 138, 92, .12);
    animation: none;
}

.demo-stats > div {
    border: 1px solid #e7e9e5;
    border-radius: 10px;
    background: #f5f6f4;
}

.teacher-first-run > div {
    border-color: var(--line);
    border-radius: 13px;
    background: #fff;
}

.teacher-first-run > div > i {
    border-radius: 10px;
    background: var(--primary-soft);
    color: #4964bd;
}

.concept-hero,
.concept-split,
.page-intro {
    gap: 12px;
}

.concept-panel.dark {
    border-color: #252723;
    border-radius: 18px;
    background: var(--sidebar);
}

.concept-metric,
.concept-item,
.insight-card {
    border-color: var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    box-shadow: none;
    animation: none;
}

.concept-panel.dark .concept-metric {
    border-color: #32342f;
    background: #1c1e1a;
}

.concept-panel.dark .concept-metric strong {
    color: #fff;
}

.test-summary,
.result-detail,
.task-card,
.dashboard-section,
.answer-detail {
    border-radius: 14px;
}

/* Assistant follows the same visual language without losing its identity. */
.ntoshka-launcher {
    border: 1px solid #2a2c28;
    border-radius: 18px;
    background: var(--sidebar);
    box-shadow: 0 18px 46px rgba(17, 18, 16, .2);
    transition: box-shadow var(--ui-duration) ease, transform var(--press-duration) var(--ease-out);
}

.ntoshka-panel {
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(17, 18, 16, .2);
}

.ntoshka-header {
    background: var(--sidebar);
}

.ntoshka-messages,
.ntoshka-suggestions,
.ntoshka-form,
.ntoshka-privacy {
    background: #fff;
}

.ntoshka-message-bot {
    border-color: var(--line);
    color: #3b3e3a;
}

.ntoshka-message-user,
.ntoshka-form button {
    background: var(--primary);
}

/* Hover is deliberately restricted to precise pointing devices. */
@media (hover: hover) and (pointer: fine) {
    .workspace-action:hover,
    .public-header .nav-btn:hover {
        border-color: var(--line-strong);
        background: var(--surface-soft) !important;
        color: var(--text) !important;
    }

    .workspace-sidebar .nav-btn:hover {
        background: #1c1e1a !important;
        color: #d7dad3 !important;
    }

    .workspace-sidebar .nav-btn.active:hover {
        background: #f3f4ef !important;
        color: #141512 !important;
    }

    .btn:hover,
    .btn-small:hover {
        border-color: var(--primary-strong);
        background: var(--primary-strong);
        box-shadow: 0 7px 18px rgba(58, 83, 166, .14);
        transform: translateY(-1px);
    }

    .btn.btn-gray:hover,
    .btn-small.btn-gray:hover,
    a.btn.btn-gray:hover,
    a.btn-small.btn-gray:hover,
    button.btn.btn-gray:hover,
    button.btn-small.btn-gray:hover {
        border-color: #bfc2bc !important;
        background: #f4f5f3 !important;
        color: #242623 !important;
    }

    .profile-card:hover,
    .group-card:hover,
    .feature-card:hover,
    .pricing-card:hover,
    .concept-item:hover,
    .assignment-catalog-card:hover,
    .ready-test-card:hover,
    .trust-links a:hover,
    .seo-link-item:hover {
        border-color: #c2c5bf;
        background: #fff;
        box-shadow: var(--shadow-soft);
        transform: translateY(-2px);
    }

    .choice-option:hover {
        border-color: #bdc9f4;
        background: var(--primary-soft);
    }

    .table tr:hover td {
        background: #fafbf9;
    }
}

/* Tablet and mobile */
@media (max-width: 1080px) {
    .workspace-sidebar {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: flex;
        width: 100%;
        align-items: center;
        flex-direction: row;
        gap: 10px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, .94);
        box-shadow: 0 8px 24px rgba(20, 22, 18, .06);
        backdrop-filter: blur(16px);
    }

    .workspace-sidebar .logo {
        flex: 0 0 auto;
    }

    .workspace-sidebar .logo small {
        display: none;
    }

    .workspace-sidebar .nav-buttons {
        display: flex;
        width: auto;
        min-width: 0;
        flex: 1;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
    }

    .workspace-sidebar .workspace-user {
        display: none;
    }

    .workspace-sidebar .nav-btn {
        min-width: max-content;
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid transparent;
        border-radius: 9px;
        background: transparent !important;
        color: #666a64 !important;
        font-size: .76rem;
        box-shadow: none !important;
    }

    .workspace-sidebar .nav-btn.active {
        border-color: var(--line);
        background: var(--surface-soft) !important;
        color: var(--text) !important;
    }

    .workspace-sidebar .notification-center {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .workspace-sidebar .nav-menu {
        position: fixed;
        top: 68px;
        right: 12px;
        left: auto;
        width: min(280px, calc(100vw - 24px));
    }

    .workspace-sidebar .nav-logout-form {
        flex: 0 0 auto;
    }

    .workspace-topbar {
        width: calc(100% - 32px);
    }
}

@media (max-width: 760px) {
    body {
        font-size: 14px;
    }

    .public-header {
        top: 8px;
        width: calc(100% - 16px);
        margin-top: 8px;
        border-radius: 15px;
    }

    .public-header .public-nav-menu,
    .public-header .public-nav-menu > summary {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
    }

    .public-header .public-nav-menu > summary {
        display: grid !important;
        place-items: center;
        padding: 0 !important;
        line-height: 1;
    }

    .public-header .public-nav-menu > summary > i {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        line-height: 1;
    }

    .public-header .logo > span {
        display: grid;
    }

    .workspace-sidebar {
        flex-wrap: nowrap;
        padding: 8px;
    }

    .workspace-sidebar .logo span,
    .workspace-sidebar .nav-btn span {
        display: none;
    }

    .workspace-sidebar .logo > i,
    .workspace-sidebar .notification-center,
    .workspace-sidebar .nav-btn,
    .workspace-sidebar .nav-more > summary,
    .workspace-sidebar .nav-logout-form .nav-btn {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        justify-content: center;
        padding: 0;
        font-size: 0;
    }

    .workspace-sidebar .logo > i {
        display: inline-grid;
        place-items: center;
        background: var(--primary);
        color: #fff;
        font-size: 1rem;
    }

    .workspace-sidebar .nav-btn,
    .workspace-sidebar .nav-more > summary,
    .workspace-sidebar .nav-logout-form .nav-btn {
        gap: 0 !important;
    }

    .workspace-sidebar .nav-btn i,
    .workspace-sidebar .notification-bell i {
        margin: 0;
        font-size: .95rem;
    }

    .workspace-topbar {
        width: calc(100% - 24px);
        padding: 14px 0 12px;
    }

    .workspace-heading strong {
        font-size: 1rem;
    }

    .workspace-action {
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
    }

    .workspace-action span {
        display: none;
    }

    .container,
    .is-public .container {
        padding: 14px 12px;
    }

    .card,
    .form-panel,
    .soft-panel,
    .concept-panel,
    .glass-panel,
    .catalog-section,
    .demo-control-card,
    .demo-live-card,
    .demo-side-card {
        padding: 15px;
    }

    .hero,
    .catalog-hero,
    .demo-hero {
        border-radius: 18px;
    }

    .hero-home {
        min-height: 560px;
        padding: 26px 20px;
    }

    .hero h1 {
        font-size: clamp(2.55rem, 16vw, 4.1rem);
    }

    .hero-campaign {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat-card {
        min-height: 104px;
    }

    .stat-card h3 {
        font-size: 1.45rem;
    }

    .home-pricing,
    .home-demo,
    .home-method,
    .home-seo-section {
        margin-top: 38px;
        padding-top: 30px;
    }

    .site-footer {
        width: calc(100% - 16px);
        margin-top: 42px;
        padding: 22px;
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    .workspace-sidebar .nav-buttons {
        scrollbar-width: none;
    }

    .workspace-sidebar .nav-buttons::-webkit-scrollbar {
        display: none;
    }

    .workspace-kicker {
        font-size: .6rem;
    }

    .workspace-shortcuts {
        gap: 4px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .action-buttons .btn,
    .action-buttons .btn-small,
    .hero-actions .btn {
        width: 100%;
    }

    .catalog-hero h2,
    .demo-hero h2 {
        font-size: 2.15rem;
    }

    .modal-content {
        padding: 16px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .modal.show .modal-content,
    .notification-overlay.show .notification-panel {
        animation: redesign-modal-fade 160ms ease both;
    }

    .btn,
    .btn-small,
    .workspace-action,
    .workspace-sidebar .nav-btn,
    .profile-card,
    .group-card,
    .feature-card,
    .pricing-card,
    .concept-item,
    .assignment-catalog-card,
    .ready-test-card,
    .choice-option,
    .ntoshka-launcher {
        transform: none !important;
        transition-duration: 0ms !important;
    }
}

@keyframes redesign-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Strong, consistent action colors across every role. */
.btn,
.btn-small,
a.btn,
a.btn-small,
button.btn,
button.btn-small {
    border-color: #1d4ed8;
    background: #2563eb;
    color: #fff !important;
}

.btn-green { border-color: #047857 !important; background: #059669 !important; }
.btn-purple { border-color: #5b21b6 !important; background: #6d28d9 !important; }
.btn-red { border-color: #b91c1c !important; background: #dc2626 !important; }
.btn-orange { border-color: #c2410c !important; background: #ea580c !important; color: #fff !important; }
.btn.btn-gray,
.btn-small.btn-gray,
a.btn.btn-gray,
a.btn-small.btn-gray,
button.btn.btn-gray,
button.btn-small.btn-gray {
    border-color: #334155 !important;
    background: #475569 !important;
    color: #fff !important;
}

@media (hover: hover) and (pointer: fine) {
    .btn-green:hover { border-color: #065f46 !important; background: #047857 !important; }
    .btn-purple:hover { border-color: #4c1d95 !important; background: #5b21b6 !important; }
    .btn-red:hover { border-color: #991b1b !important; background: #b91c1c !important; }
    .btn-orange:hover { border-color: #9a3412 !important; background: #c2410c !important; }
    .btn.btn-gray:hover,
    .btn-small.btn-gray:hover,
    a.btn.btn-gray:hover,
    a.btn-small.btn-gray:hover,
    button.btn.btn-gray:hover,
    button.btn-small.btn-gray:hover {
        border-color: #1e293b !important;
        background: #334155 !important;
        color: #fff !important;
    }
    .page-leaderboard .table tbody tr:hover td { background: transparent !important; }
}

/* Live student work sheet shared by the demo and actual monitoring. */
body.student-work-open { overflow: hidden; }
.student-work-modal[hidden] { display: none !important; }
.student-work-modal { position: fixed; inset: 0; z-index: 5200; display: grid; place-items: center; padding: 22px; }
.student-work-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(9, 14, 28, .72); backdrop-filter: blur(5px); }
.student-work-dialog { position: relative; width: min(960px, 100%); max-height: min(88dvh, 860px); overflow: hidden; border: 1px solid #cbd5e1; border-radius: 22px; background: #f8fafc; box-shadow: 0 32px 100px rgba(2, 6, 23, .38); animation: student-work-in 210ms var(--ease-out) both; }
.student-work-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; color: #fff; background: linear-gradient(135deg, #111827, #1d4ed8); }
.student-work-header h2 { margin: 3px 0; color: #fff; }
.student-work-header p { margin: 0; color: #dbeafe; }
.student-work-kicker { color: #93c5fd; font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.student-work-close { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.student-work-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 0; max-height: calc(min(88dvh, 860px) - 108px); }
.student-work-list { display: grid; align-content: start; gap: 12px; min-height: 0; overflow-y: auto; padding: 18px; }
.student-work-answer { overflow: hidden; border: 1px solid #dbe3ee; border-radius: 15px; background: #fff; }
.student-work-answer.is-current { border: 2px solid #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
.student-work-answer > div { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #e5e7eb; }
.student-work-answer > div > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #2563eb; color: #fff; font-weight: 900; }
.student-work-answer h3 { margin: 0; font-size: .95rem; }
.student-work-answer small { color: #64748b; font-weight: 800; }
.student-work-answer.is-current small { color: #1d4ed8; }
.student-work-answer pre { min-height: 58px; margin: 0; border: 0; border-radius: 0; background: #fff; color: #475569; }
.student-work-answer.has-answer pre { color: #111827; background: #f8fafc; }
.student-work-hint { display: grid; align-content: start; gap: 12px; min-height: 0; overflow-y: auto; padding: 20px; border-left: 1px solid #dbe3ee; background: #fff; }
.student-work-hint h3, .student-work-hint p { margin: 0; }
.student-work-hint label { display: grid; gap: 7px; color: #475569; font-size: .8rem; font-weight: 850; }
.student-work-hint textarea { width: 100%; min-height: 116px; padding: 11px; border: 1px solid #cbd5e1; border-radius: 12px; resize: vertical; font: inherit; }
.student-work-feedback { min-height: 38px; color: #047857; font-size: .8rem; font-weight: 800; }
.student-work-empty { display: grid; place-items: center; gap: 8px; min-height: 260px; color: #64748b; text-align: center; }
.student-work-empty i { color: #2563eb; font-size: 2rem; }
.demo-student-link { padding: 0; border: 0; background: transparent; color: #1d4ed8; font: 850 inherit; cursor: pointer; }

/* Hints delivered while a student is taking a real test. */
.test-live-hints { margin: 16px 0; padding: 16px; border: 2px solid #f59e0b; border-radius: 15px; background: #fffbeb; box-shadow: 0 10px 28px rgba(180,83,9,.12); }
.test-live-hints > div:first-child { display: flex; align-items: center; gap: 8px; color: #92400e; }
.test-live-hints article { margin-top: 10px; padding-top: 10px; border-top: 1px solid #fcd34d; }
.test-live-hints article span { color: #b45309; font-size: .76rem; font-weight: 850; }
.test-live-hints article p { margin: 4px 0 0; color: #451a03; font-weight: 700; }

/* Assistant: clear desktop label, compact mobile robot, explicit hide/restore. */
.ntoshka-launcher-label { color: #fff !important; font-weight: 900 !important; }
.ntoshka-header-actions { display: flex; gap: 6px; }
.ntoshka-hide,
.ntoshka-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; }
.ntoshka-restore { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 4200; display: grid; place-items: center; width: 42px; height: 42px; border: 2px solid #2563eb; border-radius: 14px; background: #111827; color: #60a5fa; box-shadow: 0 12px 32px rgba(2,6,23,.24); cursor: pointer; }
.ntoshka-restore[hidden] { display: none !important; }

/* Student-facing demo experience. */
.teacher-demo-links, .demo-hero-actions, .student-demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.student-demo-experience { display: grid; gap: 16px; }
.student-demo-tabs { display: inline-flex; width: fit-content; padding: 5px; border: 1px solid #d5dbe5; border-radius: 14px; background: #fff; }
.student-demo-tabs button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: transparent; color: #475569; font: 850 .82rem/1 inherit; cursor: pointer; }
.student-demo-tabs button.is-active { background: #2563eb; color: #fff; }
.student-demo-stage { overflow: hidden; border: 1px solid #d5dbe5; border-radius: 20px; background: #f1f5f9; box-shadow: 0 16px 46px rgba(15,23,42,.08); }
.student-demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; color: #fff; background: #111827; font-size: .82rem; font-weight: 850; }
.student-demo-card { margin: 18px; padding: clamp(18px,3vw,30px); border: 1px solid #dbe3ee; border-radius: 17px; background: #fff; }
.student-demo-card h2 { margin: 8px 0 14px; }
.student-demo-card > pre { background: #f8fafc; }
.student-demo-label { color: #2563eb; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.student-demo-card details { margin: 16px 0; padding: 0 14px 14px; border: 1px solid #cbd5e1; border-radius: 13px; }
.student-demo-answer-label { display: grid; gap: 7px; margin: 16px 0; font-weight: 850; }
.student-demo-answer-label textarea { width: 100%; padding: 13px; border: 1px solid #cbd5e1; border-radius: 13px; font: inherit; }
.student-demo-feedback { display: grid; gap: 4px; margin-top: 14px; padding: 0; }
.student-demo-feedback.is-correct, .student-demo-feedback.is-error { padding: 14px; border-radius: 12px; }
.student-demo-feedback.is-correct { background: #dcfce7; color: #065f46; }
.student-demo-feedback.is-error { background: #fee2e2; color: #991b1b; }
.student-demo-help { margin-top: 12px; padding: 14px; border-left: 4px solid #f59e0b; border-radius: 10px; background: #fffbeb; color: #78350f; }
.student-demo-help.is-solution { border-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
.student-demo-help p { margin: 5px 0 0; }
.student-demo-test-grid { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
.student-demo-question-map { display: grid; align-content: start; gap: 8px; padding: 18px 0 18px 18px; }
.student-demo-question-map button { display: grid; place-items: center; width: 46px; height: 42px; border: 1px solid #cbd5e1; border-radius: 11px; background: #fff; color: #475569; font-weight: 900; cursor: pointer; }
.student-demo-question-map button.is-answered { border-color: #059669; color: #047857; background: #d1fae5; }
.student-demo-question-map button.is-active { border-color: #2563eb; color: #fff; background: #2563eb; }
.student-demo-test-progress { display: flex; align-items: center; gap: 12px; color: #475569; font-size: .8rem; font-weight: 850; }
.student-demo-test-progress > div { flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: #e2e8f0; }
.student-demo-test-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2563eb,#059669); }
.student-demo-actions.is-between { justify-content: space-between; margin-top: 18px; }
.demo-integrity-trigger { margin-top: 15px; }
.student-demo-complete { display: grid; place-items: center; gap: 12px; min-height: 430px; margin: 18px; padding: 32px; border-radius: 17px; background: #fff; text-align: center; }
.student-demo-complete > i { color: #059669; font-size: 3rem; }
.demo-integrity-modal[hidden], .test-integrity-warning[hidden] { display: none !important; }
.demo-integrity-modal, .test-integrity-warning { position: fixed; inset: 0; z-index: 5600; display: grid; place-items: center; padding: 18px; background: rgba(2,6,23,.78); backdrop-filter: blur(5px); }
.demo-integrity-modal > div, .test-integrity-warning > div { display: grid; place-items: center; width: min(480px,100%); padding: 30px; border: 1px solid #fdba74; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 30px 90px rgba(2,6,23,.4); }
.demo-integrity-modal > div > i, .test-integrity-warning > div > i { color: #ea580c; font-size: 2.8rem; }
.demo-integrity-modal h2, .test-integrity-warning h2 { margin: 10px 0 5px; }
.demo-integrity-modal span, .test-integrity-warning span { margin-top: 10px; color: #c2410c; font-weight: 900; text-transform: uppercase; }
.support-recipient-note { display: flex; gap: 12px; margin-bottom: 16px; padding: 14px; border: 1px solid #86efac; border-radius: 13px; background: #f0fdf4; color: #14532d; }
.support-recipient-note > i { margin-top: 3px; color: #059669; font-size: 1.25rem; }
.support-recipient-note div { display: grid; gap: 3px; }
.support-recipient-note span { color: #166534; font-size: .8rem; }

@keyframes student-work-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
    .student-work-modal { align-items: end; padding: 0; }
    .student-work-dialog { width: 100%; max-height: 94dvh; border-radius: 20px 20px 0 0; }
    .student-work-header { padding: 16px; }
    .student-work-body { grid-template-columns: 1fr; max-height: calc(94dvh - 104px); overflow-y: auto; }
    .student-work-list { overflow: visible; padding: 12px; }
    .student-work-hint { overflow: visible; border-top: 1px solid #dbe3ee; border-left: 0; padding: 16px; }
    .student-work-answer > div { grid-template-columns: 28px minmax(0,1fr); }
    .student-work-answer small { grid-column: 2; }
    .demo-table { min-width: 0 !important; }
    .demo-table thead { display: none; }
    .demo-table, .demo-table tbody, .demo-table tr, .demo-table td { display: block; width: 100%; }
    .demo-table tbody { display: grid; gap: 12px; padding: 2px; }
    .demo-table tr { padding: 12px; border: 1px solid #dbe3ee; border-radius: 14px; background: #fff; }
    .demo-table td { display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 8px; padding: 7px 2px; border: 0; }
    .demo-table td::before { content: attr(data-label); color: #64748b; font-size: .7rem; font-weight: 850; text-transform: uppercase; }
    .demo-table td > * { grid-column: 2; }
    .student-demo-test-grid { grid-template-columns: 1fr; }
    .student-demo-question-map { display: flex; gap: 7px; overflow-x: auto; padding: 12px 12px 0; }
    .student-demo-question-map button { flex: 0 0 42px; }
    .student-demo-card { margin: 12px; padding: 16px; }
    .student-demo-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .ntoshka-launcher { width: 58px !important; height: 58px !important; padding: 5px !important; border-radius: 18px !important; }
    .ntoshka-launcher-label, .ntoshka-nudge { display: none !important; }
    .ntoshka-robot { width: 48px; height: 48px; flex-basis: 48px; }
    .ntoshka-panel { left: 8px !important; right: 8px !important; bottom: 74px !important; width: auto !important; max-height: calc(100dvh - 88px) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .student-work-dialog { animation: none; }
}

/* Compact, trigger-aligned workspace overflow menu. */
.workspace-sidebar .nav-menu {
    width: 196px;
    min-width: 0;
    gap: 0;
    padding: 5px;
    overflow: hidden;
    border: 1px solid #d9dee7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .16);
}

.workspace-sidebar .nav-menu-item {
    min-height: 35px;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    color: #475569 !important;
    font-size: .78rem;
    font-weight: 750;
}

.workspace-sidebar .nav-menu-item > i {
    width: 17px;
    color: #2563eb;
    text-align: center;
}

.workspace-sidebar .nav-menu-item.active {
    background: #eff6ff;
    color: #1d4ed8 !important;
}

@media (hover: hover) and (pointer: fine) {
    .workspace-sidebar .nav-menu-item:hover {
        background: #f1f5f9;
        color: #0f172a !important;
    }
}

@media (max-width: 1080px) {
    .workspace-sidebar .nav-menu {
        position: fixed;
        top: var(--nav-menu-top, 66px);
        right: var(--nav-menu-right, 12px);
        bottom: auto;
        left: auto;
        width: 196px;
        transform-origin: top right;
    }
}

@media (max-width: 420px) {
    .workspace-sidebar .nav-menu {
        width: min(196px, calc(100vw - 24px));
    }
}

/* Workspace navigation: every destination stays visible and the rail can collapse. */
.workspace-sidebar-toggle {
    display: none;
}

@media (min-width: 1081px) {
    .workspace-sidebar {
        background: #0c0d0b;
        border-color: #20221e;
    }

    .workspace-sidebar .logo {
        padding-right: 38px;
    }

    .workspace-sidebar-toggle {
        position: absolute;
        top: 17px;
        right: 12px;
        z-index: 2;
        display: inline-grid;
        width: 31px;
        height: 31px;
        place-items: center;
        padding: 0;
        border: 1px solid #30322d;
        border-radius: 9px;
        background: #181a17;
        color: #f7f8f4;
        cursor: pointer;
        transition: background-color 150ms ease, border-color 150ms ease, transform 120ms var(--ease-out);
    }

    .workspace-sidebar-toggle:active {
        transform: scale(.97);
    }

    .workspace-sidebar .nav-buttons {
        gap: 2px;
    }

    .workspace-sidebar .notification-nav-button {
        position: relative;
        order: -3;
    }

    .workspace-sidebar .notification-badge {
        position: static;
        min-width: 19px;
        height: 19px;
        margin-left: auto;
        border: 0;
        background: #ef4444;
        color: #fff;
        font-size: .66rem;
    }

    .workspace-sidebar .nav-btn {
        position: relative;
        color: #c7cbc3 !important;
    }

    .workspace-sidebar .nav-btn > i {
        color: #4f7cff;
    }

    .workspace-sidebar .nav-btn.active {
        border-color: #34372f;
        background: #22241f !important;
        color: #fff !important;
        box-shadow: inset 3px 0 0 #4f7cff !important;
    }

    .workspace-sidebar .nav-btn.active > i {
        color: #7da0ff;
    }

    .workspace-sidebar .workspace-user {
        background: #151714;
    }

    .workspace-sidebar .nav-logout-form {
        background: #0c0d0b;
    }

    html.workspace-sidebar-collapsed body.is-authenticated {
        padding-left: 98px;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar {
        width: 70px;
        padding-inline: 8px;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .logo {
        justify-content: center;
        padding: 0 0 14px;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .logo > span,
    html.workspace-sidebar-collapsed .workspace-sidebar .workspace-user > span,
    html.workspace-sidebar-collapsed .workspace-sidebar .nav-label {
        display: none;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar-toggle {
        top: 48px;
        right: -15px;
        border-color: #3b3e37;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .workspace-user {
        display: grid;
        grid-template-columns: 1fr;
        min-height: 48px;
        padding: 6px;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .workspace-user > i {
        margin: auto;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .nav-btn {
        justify-content: center;
        gap: 0;
        padding-inline: 0;
        font-size: 0;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .nav-btn > i {
        width: 20px;
        height: 20px;
        font-size: .96rem;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .notification-badge,
    html.workspace-sidebar-collapsed .workspace-sidebar .support-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        margin: 0;
        font-size: .61rem;
    }

    html.workspace-sidebar-collapsed .workspace-sidebar .nav-logout-form {
        padding-top: 8px;
    }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1081px) {
    .workspace-sidebar-toggle:hover {
        border-color: #4b4f46;
        background: #242721;
    }

    .workspace-sidebar .nav-btn:hover {
        background: #191b17 !important;
        color: #fff !important;
    }

    .workspace-sidebar .nav-btn.active:hover {
        background: #262923 !important;
    }
}

/* Demo classroom: keep monitoring primary and controls compact at every width. */
.demo-control-card {
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.demo-control-card .demo-control-heading {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.demo-control-heading h3 {
    margin: 2px 0 0;
}

.demo-section-kicker {
    display: block;
    color: #2563eb;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.demo-test-picker {
    min-width: 0;
}

.demo-control-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.demo-control-actions > * {
    min-height: 42px;
    white-space: nowrap;
}

.demo-command-panel {
    min-width: 0;
}

.demo-side-card {
    position: relative;
    overflow: hidden;
}

.demo-side-card .catalog-step {
    float: right;
    margin: 0 0 8px 10px;
}

.demo-side-card h3 {
    margin-top: 5px;
}

.demo-inline {
    align-items: stretch;
    margin-top: 14px;
}

.demo-inline input {
    min-height: 42px;
}

.demo-inline .btn-small {
    min-height: 42px;
    white-space: nowrap;
}

.demo-help-card {
    background: linear-gradient(145deg, #f3f7ff 0%, #fff 72%);
}

.demo-help-route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #c9d7ff;
    border-radius: 9px;
    background: #fff;
    color: #1d4ed8;
    font-size: .74rem;
    font-weight: 850;
}

.demo-log-card h3 {
    margin-bottom: 12px;
}

.demo-table {
    min-width: 760px;
}

.demo-work-button {
    min-width: 104px;
}

@media (min-width: 1441px) {
    .demo-layout {
        grid-template-columns: minmax(0, 1fr) 304px;
    }
}

@media (min-width: 761px) and (max-width: 1440px) {
    .demo-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-command-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-log-card {
        grid-column: 1 / -1;
    }

    .demo-log {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 210px;
    }
}

@media (max-width: 1080px) {
    .workspace-sidebar-toggle {
        display: none;
    }

    .workspace-sidebar .notification-nav-button {
        position: relative;
        flex: 0 0 auto;
    }

    .workspace-sidebar .notification-badge {
        position: absolute;
        top: -3px;
        right: -3px;
    }
}

@media (max-width: 760px) {
    .demo-control-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-control-card .demo-control-heading,
    .demo-test-picker,
    .demo-control-actions {
        grid-column: auto;
    }

    .demo-control-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .demo-control-actions > *,
    .demo-inline .btn-small {
        width: 100%;
    }

    .demo-inline {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-command-panel {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot {
        animation: none;
    }
}

/* Teacher workflows: clear interactive targets, compact reports and complete demo states. */
.demo-control-card {
    grid-template-columns: minmax(280px, 1fr) minmax(205px, 240px) auto;
}

.demo-test-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    min-width: 0;
}

.demo-test-control .demo-test-picker {
    min-width: 0;
}

.demo-test-rule {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    color: #183a78;
    font-size: .73rem;
    font-weight: 780;
}

.demo-test-rule i {
    color: #f59e0b;
}

.demo-audience-control {
    display: grid;
    gap: 6px;
    color: #4b5563;
    font-size: .72rem;
    font-weight: 800;
}

.demo-audience-button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border: 1px solid #b8c8fa;
    border-radius: 9px;
    background: #eef3ff;
    color: #1746c9;
    text-align: left;
    cursor: pointer;
}

.demo-dialog[hidden] {
    display: none !important;
}

.demo-dialog {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow: auto;
    background: rgba(7, 10, 15, .68);
    backdrop-filter: blur(5px);
}

.demo-dialog-card {
    width: min(760px, 100%);
    max-height: calc(100dvh - 36px);
    padding: 20px;
    overflow: auto;
    border: 1px solid #d9dde5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(8, 12, 20, .32);
}

.demo-audience-card {
    width: min(520px, 100%);
}

.demo-dialog-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.demo-dialog-card > header h3 {
    margin: 3px 0 0;
}

.demo-builder-name,
.demo-builder-settings > label {
    display: grid;
    gap: 7px;
    color: #243047;
    font-size: .76rem;
    font-weight: 800;
}

.demo-builder-settings {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #d9e2fb;
    border-radius: 12px;
    background: #f5f8ff;
}

.demo-builder-settings small {
    color: #63708a;
    font-size: .68rem;
    line-height: 1.45;
}

.demo-hint-disabled {
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
    border: 1px solid #f2ce7d;
    border-radius: 9px;
    background: #fff8df;
    color: #794600;
    font-size: .74rem;
    line-height: 1.45;
}

.demo-hint-disabled[hidden] {
    display: none;
}

.demo-builder-questions {
    display: grid;
    gap: 10px;
}

.demo-builder-question {
    display: grid;
    grid-template-columns: auto minmax(0, 1.5fr) minmax(150px, .7fr) auto;
    align-items: end;
    gap: 10px;
    padding: 12px;
    border: 1px solid #e0e3e9;
    border-radius: 11px;
    background: #fafbfc;
}

.demo-builder-question label {
    display: grid;
    gap: 6px;
    color: #39445a;
    font-size: .7rem;
    font-weight: 800;
}

.demo-builder-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}

.demo-audience-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.demo-audience-option {
    display: grid;
    grid-template-columns: 18px 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid #e0e3e9;
    border-radius: 10px;
    cursor: pointer;
}

.demo-audience-option input {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin: 0 !important;
    accent-color: #2563eb;
}

.demo-audience-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #2f66ed;
    color: #fff;
    font-weight: 900;
}

.demo-audience-option > span:last-child {
    display: grid;
}

.demo-audience-option small {
    color: #778195;
}

.demo-status-not_assigned {
    background: #edf0f4;
    color: #596273;
}

.demo-status-terminated {
    background: #fee2e2;
    color: #b91c1c;
}

.demo-row-terminated {
    background: #fff7f7;
}

.demo-integrity-mark,
.demo-hint-mark {
    display: block;
    margin-top: 4px;
    color: #c32222;
    font-size: .66rem;
    font-weight: 800;
}

.demo-hint-mark {
    color: #006e48;
}

.assignment-title-link {
    display: grid;
    width: 100%;
    gap: 4px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: #101827;
    text-align: left;
    cursor: pointer;
}

.assignment-title-link span {
    color: #697386;
    font-size: .76rem;
}

.assignment-title-link small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #245fe5;
    font-weight: 800;
}

.student-create-field {
    display: grid;
    gap: 5px;
}

.student-create-field > span {
    color: #27344b;
    font-size: .72rem;
    font-weight: 850;
}

.student-create-field small {
    color: #68758b;
    font-size: .68rem;
    line-height: 1.4;
}

.report-config-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.report-config-card > h3,
.report-config-card > p {
    margin: 0;
}

.report-option-group {
    display: grid;
    gap: 8px;
}

.report-option-group > strong {
    color: #27344b;
    font-size: .72rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.report-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.report-option-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.report-check {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr);
    min-height: 40px;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 8px 10px;
    border: 1px solid #dfe3ea;
    border-radius: 9px;
    background: #fff;
    color: #27344b;
    font-size: .76rem;
    font-weight: 720;
    cursor: pointer;
}

.report-check input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin: 0 !important;
    accent-color: #2563eb;
}

.report-config-card > button {
    align-self: flex-start;
    margin-top: auto;
}

.test-results-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.test-results-heading h2 {
    margin: 4px 0 6px;
}

.test-results-heading p {
    margin: 0;
    color: #657087;
}

.test-results-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 18px;
}

.table-cell-meta {
    display: block;
    margin-top: 3px;
    color: #778195;
}

.test-result-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef1f5;
    color: #596273;
    font-size: .7rem;
    font-weight: 850;
    white-space: nowrap;
}

.test-result-status-completed {
    background: #d7f8e8;
    color: #007649;
}

.test-result-status-in_progress,
.test-result-status-working {
    background: #dce7ff;
    color: #174ecb;
}

.test-attempt-settings small,
.test-hint-settings small {
    color: #68758b;
    font-size: .7rem;
    line-height: 1.45;
}

.test-hint-settings {
    padding: 13px;
    border: 1px solid #cbd8ff;
    border-radius: 11px;
    background: #f4f7ff;
}

.test-hint-settings[hidden] {
    display: none !important;
}

.test-configured-hint {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0 16px;
    padding: 14px;
    border: 1px solid #f0c86b;
    border-radius: 11px;
    background: #fff8dd;
    color: #684000;
}

.test-configured-hint > i {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 8px;
    background: #f59e0b;
    color: #fff;
}

.test-configured-hint p {
    margin: 4px 0 0;
}

.student-last-seen {
    color: #4f5d73;
    font-size: .74rem;
    white-space: nowrap;
}

html.workspace-content-loading::after {
    content: "";
    position: fixed;
    z-index: 2600;
    top: 0;
    left: var(--workspace-sidebar-width, 248px);
    width: min(34vw, 420px);
    height: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #245fff, #00a56d);
    box-shadow: 0 0 14px rgba(36, 95, 255, .45);
    animation: workspace-content-progress 700ms ease-in-out infinite alternate;
}

@keyframes workspace-content-progress {
    from { transform: translateX(-72%); opacity: .7; }
    to { transform: translateX(180%); opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
    .demo-audience-button:hover,
    .assignment-title-link:hover small {
        color: #123fb4;
    }

    .assignment-title-link:hover strong {
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 3px;
    }

    .report-check:hover,
    .demo-audience-option:hover {
        border-color: #afc2fb;
        background: #f7f9ff;
    }
}

@media (max-width: 900px) {
    .demo-control-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-control-card .demo-control-heading,
    .demo-test-control,
    .demo-audience-control,
    .demo-control-actions {
        grid-column: auto;
    }

    .test-results-heading {
        display: grid;
    }

    .test-results-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1080px) {
    html.workspace-content-loading::after {
        left: 0;
    }
}

@media (max-width: 600px) {
    .demo-test-control,
    .demo-builder-settings,
    .demo-builder-question,
    .report-option-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .demo-hint-disabled {
        grid-column: auto;
    }

    .demo-test-control .btn-small,
    .demo-builder-footer > *,
    .report-config-card > button {
        width: 100%;
    }

    .demo-builder-footer {
        display: grid;
    }

    .demo-dialog {
        padding: 8px;
    }

    .demo-dialog-card {
        max-height: calc(100dvh - 16px);
        padding: 15px;
        border-radius: 14px;
    }
}

/* Authenticated mobile navigation drawer. */
.workspace-mobile-menu-toggle,
.workspace-mobile-menu-close,
.workspace-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 1080px) {
    .workspace-sidebar {
        min-height: 64px;
        justify-content: space-between;
        overflow: visible;
    }

    .workspace-mobile-menu-open .workspace-sidebar {
        z-index: 1230;
    }

    .workspace-sidebar .logo {
        min-width: 0;
        flex: 0 1 auto;
    }

    .workspace-sidebar .logo > span {
        display: grid;
    }

    .workspace-mobile-menu-toggle {
        display: inline-flex;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #d5d9e1;
        border-radius: 11px;
        background: #fff;
        color: #172033;
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
        transition: border-color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
    }

    .workspace-mobile-menu-toggle > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .workspace-mobile-menu-toggle > i {
        display: inline-grid;
        width: 18px;
        height: 18px;
        place-items: center;
        color: var(--primary);
        line-height: 1;
    }

    .workspace-mobile-menu-toggle:active,
    .workspace-mobile-menu-close:active {
        transform: scale(.97);
    }

    .workspace-sidebar #workspace-primary-navigation {
        position: fixed;
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: auto;
        z-index: 1220;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(36px, auto);
        width: min(380px, calc(100vw - 16px));
        height: calc(100dvh - 16px);
        max-height: none;
        min-height: 0;
        align-content: start;
        align-items: stretch;
        gap: 4px;
        padding: 10px;
        overflow: hidden;
        border: 1px solid #292c27;
        border-radius: 18px;
        background: #0c0d0b;
        box-shadow: 0 24px 72px rgba(7, 10, 15, .38);
        visibility: hidden;
        pointer-events: none;
        transform: translateX(calc(100% + 18px));
        transition: transform 200ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 200ms;
    }

    .workspace-mobile-menu-open .workspace-sidebar #workspace-primary-navigation {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition: transform 200ms cubic-bezier(.23, 1, .32, 1), visibility 0s linear 0s;
    }

    .workspace-mobile-menu-close {
        order: -10;
        display: inline-flex;
        grid-column: 1 / -1;
        width: 100%;
        min-height: 38px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 4px;
        padding: 7px 10px;
        border: 1px solid #2d302a;
        border-radius: 10px;
        background: #171916;
        color: #f7f8f4;
        font-size: .82rem;
        font-weight: 800;
        cursor: pointer;
        transition: background-color 150ms ease, transform 120ms var(--ease-out);
    }

    .workspace-mobile-menu-close > i {
        order: 2;
        display: inline-grid;
        width: 20px;
        height: 20px;
        place-items: center;
        color: #7da0ff;
    }

    .workspace-sidebar #workspace-primary-navigation .workspace-user {
        order: -9;
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: 38px minmax(0, 1fr);
        min-height: 52px;
        align-items: center;
        gap: 10px;
        margin: 0 0 4px;
        padding: 7px 9px;
        border: 1px solid #292c27;
        border-radius: 12px;
        background: #151714;
        color: #fff;
    }

    .workspace-sidebar #workspace-primary-navigation .workspace-user > span {
        display: grid;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-btn,
    .workspace-sidebar #workspace-primary-navigation .nav-logout-form .nav-btn {
        position: relative;
        width: 100%;
        min-width: 0;
        min-height: 36px;
        justify-content: flex-start;
        gap: 8px !important;
        padding: 7px 8px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent !important;
        color: #c9cdc5 !important;
        font-size: .76rem;
        font-weight: 720;
        box-shadow: none !important;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-btn > i {
        display: inline-grid !important;
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        place-items: center !important;
        color: #4f7cff !important;
        font-size: .86rem;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-btn > span {
        display: inline-flex;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-btn.active {
        border-color: #353831;
        background: #22241f !important;
        color: #fff !important;
        box-shadow: inset 3px 0 0 #4f7cff !important;
    }

    .workspace-sidebar #workspace-primary-navigation .notification-nav-button .notification-badge,
    .workspace-sidebar #workspace-primary-navigation .support-badge {
        position: static;
        min-width: 20px;
        height: 20px;
        margin-left: auto;
        padding: 0 6px;
        border: 0;
        background: #ef4444;
        color: #fff;
        font-size: .65rem;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-logout-form {
        grid-column: 1 / -1;
        width: 100%;
        margin: 4px 0 0;
        padding-top: 6px;
        border-top: 1px solid #292c27;
        background: transparent;
    }

    .workspace-sidebar #workspace-primary-navigation .logout-btn {
        color: #f19aa6 !important;
    }

    .workspace-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1210;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        transition: opacity 170ms ease, visibility 0s linear 170ms;
    }

    .workspace-mobile-menu-open .workspace-mobile-menu-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 170ms ease, visibility 0s linear 0s;
    }

    html.workspace-mobile-menu-open,
    html.workspace-mobile-menu-open body {
        overflow: hidden;
    }
}

@media (hover: hover) and (pointer: fine) and (max-width: 1080px) {
    .workspace-mobile-menu-toggle:hover {
        border-color: #b9c6ee;
        background: #f6f8ff;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-btn:hover,
    .workspace-mobile-menu-close:hover {
        background: #1b1d19 !important;
        color: #fff !important;
    }
}

@media (max-width: 420px) {
    .workspace-sidebar {
        padding-inline: 9px;
    }

    .workspace-sidebar .logo {
        gap: 8px;
    }

    .workspace-sidebar .logo strong {
        font-size: .9rem;
    }

    .workspace-sidebar .logo small {
        display: none;
    }

    .workspace-mobile-menu-toggle {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
    }

    .workspace-sidebar #workspace-primary-navigation {
        top: 6px;
        right: 6px;
        bottom: 6px;
        width: calc(100vw - 12px);
        height: calc(100dvh - 12px);
        padding: 8px;
        border-radius: 16px;
    }
}

@media (max-width: 1080px) and (max-height: 620px) {
    .workspace-sidebar #workspace-primary-navigation {
        grid-auto-rows: minmax(30px, auto);
        gap: 2px;
        padding: 7px;
    }

    .workspace-mobile-menu-close {
        min-height: 32px;
        margin-bottom: 2px;
        padding-block: 5px;
    }

    .workspace-sidebar #workspace-primary-navigation .workspace-user {
        grid-template-columns: 32px minmax(0, 1fr);
        min-height: 42px;
        gap: 7px;
        margin-bottom: 2px;
        padding: 5px 7px;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-btn,
    .workspace-sidebar #workspace-primary-navigation .nav-logout-form .nav-btn {
        min-height: 30px;
        gap: 6px !important;
        padding: 4px 7px;
        font-size: .7rem;
    }

    .workspace-sidebar #workspace-primary-navigation .nav-logout-form {
        margin-top: 2px;
        padding-top: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-sidebar #workspace-primary-navigation,
    .workspace-mobile-menu-backdrop,
    html.workspace-content-loading::after {
        transition-duration: 1ms;
        animation: none;
    }
}

@media print {
    body.is-authenticated {
        padding-left: 0;
    }

    .workspace-sidebar,
    .workspace-topbar {
        display: none !important;
    }
}