:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --text: #0f172a;
    --muted: #475569;
    --line: #e2e8f0;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #059669;
    --danger: #dc2626;
    --warning: #ea580c;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 14px;

    --code-bg: #f3f1f1;
    --code-border: #e3dfdf;
    --code-text: #2b2b2b;
    --code-muted: #909090;
    --code-gutter: #8a8a8a;
    --code-keyword: #cc1f4a;
    --code-string: #3f7f1d;
    --code-number: #8b3fd1;
    --code-func: #3f7f1d;
    --code-builtin: #3f7f1d;
    --code-class: #2f6f9f;
    --code-meta: #8b3fd1;
    --code-operator: #c2185b;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "Inter", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 22%),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.06), transparent 20%),
        var(--bg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, center;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.container-wide {
    width: min(1600px, calc(100% - 24px));
}

/* =========================
   HEADER
   ========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 800;
    letter-spacing: 0;
}

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 15px;
    background:
        linear-gradient(145deg, rgba(5, 150, 105, 0.92), rgba(37, 99, 235, 0) 46%),
        linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.26);
    position: relative;
    overflow: hidden;
}

.logo-mark::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
}

.logo-icon {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
}

.logo-icon-bracket,
.logo-icon-slash {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-icon-slash {
    opacity: 0.78;
    stroke-width: 2.8;
}

.logo-icon-dot {
    fill: #34d399;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
}

.logo-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    justify-items: start;
}

.logo-name {
    color: var(--text);
    font-family: "JetBrains Mono", "Inter", Arial, sans-serif;
    font-size: 19px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
    font-weight: 900;
}

.logo-text {
    display: block;
    width: 100%;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.15;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
}

.header-nav-area {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.header-mobile-panel {
    display: contents;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.main-nav a {
    color: var(--muted);
    font-weight: 600;
    transition: 0.2s ease;
    padding: 8px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.main-nav a:hover {
    color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
}

.main-nav a.is-active {
    color: var(--primary-dark);
    background: rgba(37, 99, 235, 0.12);
}

.header-burger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    cursor: pointer;
    transition: 0.18s ease;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.header-burger span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.header-burger:hover {
    color: var(--primary-dark);
    border-color: #93c5fd;
    background: rgba(37, 99, 235, 0.08);
}

.site-header.is-menu-open .header-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.is-menu-open .header-burger span:nth-child(2) {
    opacity: 0;
}

.site-header.is-menu-open .header-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-header.is-adaptive-menu .header-inner {
    min-height: auto;
    padding: 14px 0;
    flex-wrap: wrap;
    align-items: center;
}

.site-header.is-adaptive-menu .header-burger {
    display: inline-flex;
    margin-left: auto;
}

.site-header.is-adaptive-menu .header-nav-area {
    width: 100%;
    display: none;
    flex: 0 0 100%;
}

.site-header.is-adaptive-menu.is-menu-open .header-nav-area {
    display: block;
}

.site-header.is-adaptive-menu .header-mobile-panel {
    display: grid;
    gap: 14px;
    margin-top: 12px;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.site-header.is-adaptive-menu .main-nav {
    justify-content: flex-start;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.site-header.is-adaptive-menu .main-nav a {
    padding: 12px 14px;
    border-radius: 14px;
}

.site-header.is-adaptive-menu .header-actions {
    align-self: stretch;
    justify-content: flex-end;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.header-icon-link {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    color: var(--muted);
    transition: 0.18s ease;
}

.header-icon-button {
    cursor: pointer;
    padding: 0;
    font: inherit;
}

.header-icon-link svg {
    width: 20px;
    height: 20px;
    display: block;
}

.header-icon-link:hover {
    color: var(--primary-dark);
    border-color: #93c5fd;
    background: rgba(37, 99, 235, 0.08);
}

.header-icon-link.is-active {
    color: var(--primary-dark);
    border-color: #93c5fd;
    background: rgba(37, 99, 235, 0.12);
}

.favorite-task-button {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
    appearance: none;
    transition: color .16s ease, transform .16s ease;
}

.favorite-task-button svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
}

.favorite-task-button:hover {
    color: #ca8a04;
    transform: none;
}

.favorite-task-button.is-active {
    color: #f59e0b;
}

.favorite-task-button.is-active svg {
    fill: currentColor;
}

.favorite-task-button:disabled {
    opacity: .65;
    cursor: wait;
}

.favorite-task-button:focus-visible {
    outline: 2px solid rgba(245, 158, 11, 0.35);
    outline-offset: 3px;
    border-radius: 6px;
}

.task-title-with-favorite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.task-title-with-favorite h1,
.task-title-with-favorite h3 {
    margin: 0;
}

.task-title-with-favorite-compact {
    gap: 8px;
}

.task-title-with-favorite-compact .favorite-task-button {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.task-title-with-favorite-compact .favorite-task-button svg {
    width: 19px;
    height: 19px;
}

.favorite-task-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.favorite-task-nav-item .favorite-task-button {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

.favorite-task-nav-item .favorite-task-button svg {
    width: 16px;
    height: 16px;
}

.favorites-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.favorites-toolbar h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 900;
    line-height: 1.1;
}

.favorites-filter-form {
    width: min(260px, 100%);
}

.study-task-grid-nav .favorite-task-nav-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
}

.study-task-grid-nav .favorite-task-nav-item .study-task-grid-link {
    min-width: 0;
}

.shared-bundle-question-links .favorite-task-nav-item {
    display: inline-flex;
}

.page-wrap {
    flex: 1 0 auto;
    padding: 15px 0 60px;
}

.body-sandbox-fullscreen .page-wrap {
    padding: 14px 0 14px;
}

.body-embed {
    background: #f8fafc;
}

.body-embed::before {
    display: none;
}

.body-embed .page-wrap {
    padding: 14px;
}

.body-embed .container {
    width: 100%;
    max-width: none;
}

.body-embed .flash-wrap {
    margin-bottom: 12px;
}

.body-embed .form-page {
    justify-content: stretch;
}

.body-embed .form-card-wide {
    width: 100%;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.body-embed .task-meta-column {
    top: 14px;
}

.site-footer {
    margin-top: 10px;
    padding: 20px 0 28px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(10px);
}

.site-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-footer-copy {
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-footer-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    color: #334155;
    transition: 0.18s ease;
}

.site-footer-icon:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.site-footer-icon svg {
    width: 20px;
    height: 20px;
}

.container-sandbox {
    min-height: calc(100vh - 104px);
}

.admin-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.admin-section-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--line);
    color: var(--muted);
    font-weight: 700;
    box-shadow: var(--shadow);
}

.admin-section-link.is-active,
.admin-section-link:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
}

/* =========================
   COMMON
   ========================= */

h1,
h2,
h3,
h4 {
    margin-top: 0;
    color: var(--text);
    letter-spacing: -0.03em;
}

p {
    line-height: 1.7;
    color: var(--muted);
}

.hero-badge,
.admin-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}

.content-card,
.block-card,
.form-card,
.login-card,
.topic-page-card,
.task-page-card,
.admin-topic-card,
.summary-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.task-page-card {
    position: relative;
}

.variant-exam-info-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    scroll-margin-top: 96px;
    border-color: rgba(191, 219, 254, 0.92);
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbff);
}

.variant-exam-info-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.variant-exam-info-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-family: "JetBrains Mono", "Inter", Arial, sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.variant-exam-info-head h2 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.variant-exam-info-head p,
.variant-exam-info-body p {
    margin: 0;
}

.variant-exam-info-body {
    display: grid;
    gap: 12px;
    color: #475569;
    font-size: 15px;
    line-height: 1.65;
}

.variant-exam-info-body h3 {
    margin: 8px 0 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.variant-exam-info-body ul {
    margin: 0;
    padding-left: 20px;
}

.variant-exam-info-body li {
    margin: 4px 0;
}

iframe {
    width: 100%;
    min-height: 420px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow);
}

/* =========================
   BUTTONS / FORMS
   ========================= */

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

form input,
form textarea,
select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:focus,
form textarea:focus,
select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%2364758b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px 14px;
}

label {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--text);
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.checkbox-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.btn-success {
    background: linear-gradient(135deg, #10b981, var(--success));
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, var(--danger));
    color: #fff;
}

.btn-light {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
}

.btn-sm {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 14px;
}

.btn-block {
    width: 100%;
}

.editor-extra-btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    background: #fff;
    color: #334155;
    border-radius: 10px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* =========================
   FLASH
   ========================= */

.flash-wrap {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.flash {
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 600;
}

.flash-success {
    background: #dcfce7;
    color: #166534;
}

.flash-danger {
    background: #fee2e2;
    color: #991b1b;
}

.flash-info {
    background: #dbeafe;
    color: #1d4ed8;
}

.is-hidden {
    display: none !important;
}

.admin-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.admin-tag-course {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.admin-tag-sandbox {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

.admin-tag-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.admin-tag-variant {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.task-difficulty-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.task-difficulty-tag.is-ege {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.task-difficulty-tag.is-harder {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

.task-variant-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.task-variant-tag:hover {
    background: #dbeafe;
    border-color: #60a5fa;
    color: #1e40af;
}

/* =========================
   HERO / INDEX
   ========================= */

.hero {
    text-align: center;
    padding: 38px 18px 10px;
}

.hero-left {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.hero-left:has(.variant-view-tools) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

.hero-title {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 900;
}

.hero-subtitle {
    width: min(760px, 100%);
    margin: 18px auto 0;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.7;
    color: var(--muted);
}

.hero-left .hero-subtitle {
    margin-left: 0;
}

.levels {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.level-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 16px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
}

.level-basic {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.level-mid {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

.level-hard {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

.cards-section {
    margin-top: 34px;
}

.landing-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.landing-link-card {
    padding: 24px;
    display: grid;
    gap: 12px;
}

.landing-link-card h2 {
    margin-bottom: 0;
}

.landing-link-meta {
    color: var(--primary-dark);
    font-weight: 800;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 10px;
}

.landing-hero-copy,
.landing-hero-panel,
.landing-section,
.landing-cta-band {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: var(--shadow);
}

.landing-hero-copy,
.landing-hero-panel {
    border-radius: 28px;
}

.landing-hero-copy {
    padding: 34px;
    display: grid;
    gap: 18px;
}

.landing-hero-title {
    margin: 0;
    font-size: 58px;
    line-height: 1.02;
    letter-spacing: 0;
}

.landing-hero-subtitle {
    margin: 0;
    max-width: 780px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--muted);
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-hero-panel {
    padding: 24px;
}

.landing-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    height: 100%;
}

.landing-proof-card {
    min-height: 156px;
    padding: 20px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid rgba(226, 232, 240, 0.95);
    display: grid;
    align-content: start;
    gap: 10px;
}

.landing-proof-card span,
.landing-step-card strong {
    color: var(--primary-dark);
    font-weight: 700;
}

.landing-proof-card strong {
    font-size: 34px;
    line-height: 1;
}

.landing-proof-card small {
    color: var(--muted);
    line-height: 1.6;
}

.landing-section,
.landing-cta-band {
    margin-top: 24px;
    padding: 30px;
    border-radius: 28px;
}

.landing-section-head {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.landing-section-head h2,
.landing-audience-card h2,
.landing-cta-band h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1.1;
}

.landing-feature-grid,
.landing-steps-grid,
.landing-audience-grid {
    display: grid;
    gap: 18px;
}

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

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

.landing-steps-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-feature-card,
.landing-audience-card,
.landing-step-card {
    padding: 24px;
    display: grid;
    gap: 12px;
}

.landing-feature-card h3,
.landing-step-card h3 {
    margin: 0;
    font-size: 22px;
}

.landing-feature-card p,
.landing-audience-card p,
.landing-step-card p,
.landing-cta-band p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.landing-inline-link {
    color: var(--primary-dark);
    font-weight: 700;
}

.landing-inline-link.is-static {
    color: var(--muted);
}

.landing-check-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    display: grid;
    gap: 10px;
    line-height: 1.65;
}

.landing-cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.home-v1 {
    display: grid;
    gap: 18px;
}

.home-v1-hero {
    padding: 48px 0 6px;
    text-align: center;
}

.home-v1-eyebrow {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
    background: rgba(239, 246, 255, 0.88);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-v1-hero h1 {
    max-width: 980px;
    margin: 18px auto 0;
    color: var(--text);
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.home-v1-hero p {
    max-width: 820px;
    margin: 20px auto 0;
    color: #475569;
    font-size: clamp(17px, 1.65vw, 21px);
    font-weight: 700;
    line-height: 1.55;
}

.home-v1-role-grid {
    width: min(100%, 940px);
    margin: 32px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 20px;
}

.home-v1-role-card {
    min-height: 142px;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 22px 28px;
    text-align: left;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(148, 163, 184, 0.36);
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-v1-role-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}

.home-v1-role-card.is-student {
    border-radius: 20px 0 0 20px;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary), 0 16px 44px rgba(37, 99, 235, 0.1);
}

.home-v1-role-card.is-teacher {
    border-radius: 0 20px 20px 0;
    background: rgba(240, 253, 250, 0.76);
    border-color: rgba(20, 184, 166, 0.36);
}

.home-v1-role-avatar {
    width: 82px;
    height: 82px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: #dbeafe;
    font-size: 39px;
}

.home-v1-role-card.is-teacher .home-v1-role-avatar {
    background: #ccfbf1;
}

.home-v1-role-card strong {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.home-v1-role-card.is-teacher strong {
    color: #0f766e;
}

.home-v1-role-card small {
    display: block;
    color: #334155;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.home-v1-register-note {
    width: min(100%, 760px);
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(191, 219, 254, 0.86);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.08);
    text-align: left;
}

.home-v1-register-note a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border-radius: 999px;
    border: 0;
    background: #eff6ff;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.home-v1-register-note a:hover {
    transform: translateY(-1px);
    background: var(--primary);
    color: #fff;
}

.home-v1-register-note strong {
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.home-v1-main-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-v1-panel {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #dbe5f2;
    border-radius: 20px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.home-v1-product-card {
    position: relative;
    min-height: 330px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.home-v1-product-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), transparent 38%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.home-v1-product-card:hover,
.home-v1-product-card:focus-within {
    transform: translateY(-3px);
    border-color: rgba(147, 197, 253, 0.95);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.11);
}

.home-v1-product-card:hover::before,
.home-v1-product-card:focus-within::before {
    opacity: 1;
}

.home-v1-product-card > * {
    position: relative;
    z-index: 1;
}

.home-v1-course-card {
    isolation: isolate;
}

.home-v1-ribbon {
    position: absolute;
    top: 16px;
    right: -38px;
    z-index: 3;
    width: 142px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(38deg);
    transform-origin: center;
    border: 1px solid rgba(255, 255, 255, 0.44);
    background: linear-gradient(135deg, #f97316, #f59e0b);
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.24);
    pointer-events: none;
}

.home-v1-product-card h2,
.home-v1-audience-card h2,
.home-v1-path-card h2 {
    margin: 0;
    color: var(--text);
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.home-v1-product-card p {
    margin: 0;
    color: #475569;
    font-weight: 700;
    line-height: 1.5;
}

.home-v1-topic-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

.home-v1-topic-grid a {
    min-height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(191, 219, 254, 0.88);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.92), transparent 34%),
        linear-gradient(180deg, #ffffff, #eff6ff);
    color: var(--primary-dark);
    font-family: "JetBrains Mono", "Inter", Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.08);
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.home-v1-topic-grid a:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.38);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent),
        var(--primary);
    color: #fff;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.18);
}

.home-v1-card-link {
    min-height: 50px;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(29, 78, 216, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent),
        var(--primary);
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.home-v1-card-link:hover,
.home-v1-card-link:focus-visible {
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent),
        var(--primary-dark);
    color: #fff;
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.24);
}

.home-v1-card-link:focus-visible {
    outline: 3px solid rgba(147, 197, 253, 0.55);
    outline-offset: 3px;
}

.home-v1-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.home-v1-filter-grid span {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid #dbe5f2;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.home-v1-filter-grid span::after {
    content: "˅";
    color: #64748b;
}

.home-v1-task-list {
    display: grid;
    gap: 0;
}

.home-v1-task-list div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf2f7;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.home-v1-task-list span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-v1-task-list em {
    color: #475569;
    font-style: normal;
}

.home-v1-source-note {
    display: grid;
    gap: 8px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid #bfdbfe;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 45%),
        #eff6ff;
}

.home-v1-source-note span {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-v1-source-note strong {
    color: #334155;
    font-size: 15px;
    line-height: 1.45;
}

.home-v1-source-note a {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-v1-taskbase-card .home-v1-card-link {
    margin-top: 0;
}

.home-v1-task-count-card {
    flex: 1;
    min-height: 64px;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 11px 13px;
    border-radius: 15px;
    border: 1px solid rgba(191, 219, 254, 0.82);
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.13), transparent 42%),
        linear-gradient(145deg, #ffffff, #f8fbff);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.07);
}

.home-v1-task-count-card strong {
    color: var(--primary-dark);
    font-family: "JetBrains Mono", "Inter", Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
}

.home-v1-task-count-card span {
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-v1-mode-list {
    display: grid;
    gap: 8px;
}

.home-v1-mode-card {
    min-height: 64px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 3px;
    align-content: center;
    align-items: center;
    padding: 9px 12px;
    border-radius: 14px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
}

.home-v1-mode-card.is-exam {
    border-color: #ddd6fe;
    background: #f5f3ff;
}

.home-v1-mode-card span {
    grid-row: 1 / 3;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    background: #fff;
    color: var(--primary);
    font-size: 19px;
}

.home-v1-mode-card strong,
.home-v1-mode-card small {
    grid-column: 2;
}

.home-v1-mode-card strong {
    color: #0f766e;
    font-size: 16px;
    line-height: 1;
}

.home-v1-mode-card.is-exam strong {
    color: #4f46e5;
}

.home-v1-mode-card small {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.28;
}

.home-v1-gauge {
    position: relative;
    min-height: 112px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px;
    align-items: end;
    gap: 12px;
    padding: 14px;
    margin-top: 4px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(20, 184, 166, 0.18), transparent 42%),
        linear-gradient(145deg, #f8fbff, #ffffff);
    border: 1px solid rgba(226, 232, 240, 0.88);
    overflow: hidden;
}

.home-v1-gauge::before {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
}

.home-v1-gauge-score {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 4px;
    align-self: center;
}

.home-v1-gauge-score strong {
    position: relative;
    z-index: 1;
    color: var(--text);
    font-size: 42px;
    line-height: 1;
    letter-spacing: -0.06em;
}

.home-v1-gauge-score span {
    position: relative;
    z-index: 1;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

.home-v1-gauge-bars {
    position: relative;
    z-index: 1;
    height: 78px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    gap: 6px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(239, 246, 255, 0.78);
    border: 1px solid rgba(191, 219, 254, 0.72);
}

.home-v1-gauge-bars i {
    display: block;
    height: var(--h);
    min-height: 20px;
    border-radius: 999px 999px 7px 7px;
    background: linear-gradient(180deg, #2dd4bf, #0f9f8f);
    box-shadow: 0 8px 16px rgba(15, 159, 143, 0.18);
}

.home-v1-gauge-bars i:nth-child(2) {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.16);
}

.home-v1-progress-note {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1px solid rgba(191, 219, 254, 0.82);
    background: #eff6ff;
}

.home-v1-progress-note span {
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-v1-progress-note strong {
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
}

.home-v1-wide-grid,
.home-v1-path-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.home-v1-audience-card {
    min-height: 320px;
    display: block;
    padding: 26px;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

.home-v1-audience-card.is-teacher {
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.1), transparent 34%),
        rgba(255, 255, 255, 0.92);
}

.home-v1-audience-card h2 {
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 26px;
}

.home-v1-audience-card.is-teacher h2 {
    color: #0f766e;
}

.home-v1-benefit-list {
    display: grid;
    gap: 10px;
}

.home-v1-benefit-list div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 13px;
    row-gap: 3px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 17px;
    border: 1px solid rgba(219, 229, 242, 0.92);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88));
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.home-v1-benefit-list span {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    grid-row: 1 / 3;
    align-self: center;
    border-radius: 14px;
    border: 1px solid rgba(191, 219, 254, 0.92);
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 34%),
        linear-gradient(135deg, #dbeafe, #eff6ff);
    color: var(--primary-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 8px 18px rgba(37, 99, 235, 0.1);
}

.home-v1-benefit-icon svg {
    width: 23px;
    height: 23px;
}

.home-v1-benefit-icon svg path,
.home-v1-benefit-icon svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v1-audience-card.is-teacher .home-v1-benefit-list span {
    border-color: rgba(153, 246, 228, 0.9);
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 34%),
        linear-gradient(135deg, #ccfbf1, #ecfdf5);
    color: #0f766e;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68), 0 8px 18px rgba(13, 148, 136, 0.1);
}

.home-v1-benefit-list strong,
.home-v1-benefit-list small {
    grid-column: 2;
}

.home-v1-benefit-list strong {
    align-self: end;
}

.home-v1-benefit-list small {
    align-self: start;
}

.home-v1-benefit-list strong {
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.25;
}

.home-v1-benefit-list small {
    color: #334155;
    font-size: 12.5px;
    font-weight: 750;
    line-height: 1.32;
}

.home-v1-path-card {
    min-height: 250px;
    padding: 26px;
}

.home-v1-path-card h2 {
    margin-bottom: 22px;
    text-align: center;
    color: #12327a;
    font-size: 21px;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.home-v1-path-card.is-teacher h2 {
    color: #0f766e;
}

.home-v1-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-v1-steps div {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}

.home-v1-steps div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    right: -18px;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #cbd5e1;
    transform: translateY(-50%);
}

.home-v1-steps div:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 32px;
    right: -18px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #cbd5e1;
    border-right: 2px solid #cbd5e1;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
}

.home-v1-steps span {
    width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid #cfe0ff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.92), transparent 34%),
        #eaf2ff;
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 10px 22px rgba(37, 99, 235, 0.1);
}

.home-v1-step-icon svg {
    width: 31px;
    height: 31px;
}

.home-v1-step-icon svg path,
.home-v1-step-icon svg rect,
.home-v1-step-icon svg circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v1-path-card.is-teacher .home-v1-steps span {
    border-color: #b9ebe2;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.92), transparent 34%),
        #e5fbf8;
    color: #0f766e;
}

.home-v1-steps strong {
    color: var(--text);
    font-size: 13px;
}

.home-v1-steps small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.home-v1-facts {
    min-height: 86px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: center;
    padding: 16px 22px;
}

.home-v1-facts div {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.home-v1-facts span {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    background: #eff6ff;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
}

.home-v1-facts strong,
.home-v1-facts small {
    grid-column: 2;
}

.home-v1-facts strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
}

.home-v1-facts small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 1120px) {
    .home-v1-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-v1-product-card {
        min-height: 300px;
    }

    .home-v1-wide-grid,
    .home-v1-path-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 760px) {
    .home-v1 {
        gap: 14px;
    }

    .home-v1-hero {
        padding-top: 26px;
    }

    .home-v1-hero h1 {
        font-size: clamp(34px, 11vw, 48px);
        letter-spacing: -0.045em;
    }

    .home-v1-hero p {
        font-size: 16px;
    }

    .home-v1-role-grid,
    .home-v1-main-grid,
    .home-v1-facts {
        grid-template-columns: 1fr;
    }

    .home-v1-role-card,
    .home-v1-role-card.is-student,
    .home-v1-role-card.is-teacher {
        border-radius: 18px;
    }

    .home-v1-role-card {
        grid-template-columns: 70px minmax(0, 1fr);
        min-height: 118px;
        padding: 18px;
    }

    .home-v1-role-avatar {
        width: 62px;
        height: 62px;
        font-size: 30px;
    }

    .home-v1-role-card strong {
        font-size: 24px;
    }

    .home-v1-register-note {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .home-v1-product-card,
    .home-v1-audience-card,
    .home-v1-path-card {
        padding: 20px;
    }

    .home-v1-path-card h2 {
        white-space: normal;
    }

    .home-v1-topic-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .home-v1-audience-card {
        min-height: 0;
    }

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

    .home-v1-steps div::before,
    .home-v1-steps div::after {
        display: none;
    }
}

@media (max-width: 520px) {
    .home-v1-topic-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .home-v1-filter-grid {
        grid-template-columns: 1fr;
    }

    .home-v1-steps {
        grid-template-columns: 1fr;
    }

    .home-v1-facts {
        padding: 18px;
    }
}

.sandbox-map-page {
    min-height: calc(100vh - 104px);
    display: grid;
    gap: 0;
}

.sandbox-map-board {
    min-height: 0;
    padding: 18px 22px 24px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.sandbox-map-board-head {
    display: flex;
    align-items: center;
    gap: 18px;
}

.sandbox-map-jump-form {
    display: grid;
    gap: 10px;
    width: min(420px, 100%);
}

.sandbox-map-jump-form .study-menu-title {
    margin-bottom: 0;
}

.sandbox-map-jump-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.sandbox-map-jump-controls input[type="number"]::-webkit-outer-spin-button,
.sandbox-map-jump-controls input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sandbox-map-jump-controls input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sandbox-map-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: clamp(194px, 19vh, 208px);
    gap: 12px;
    min-height: 0;
    align-content: start;
}

.sandbox-map-card {
    position: relative;
    min-width: 0;
    min-height: 184px;
    height: 100%;
    max-height: 196px;
    padding: 0;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.sandbox-map-card:hover {
    transform: translateY(-3px);
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 20px 34px rgba(15, 23, 42, 0.12);
}

.sandbox-map-card.is-complete {
    border-color: rgba(52, 211, 153, 0.36);
    background:
        linear-gradient(180deg, rgba(240, 253, 247, 0.98), rgba(248, 250, 252, 0.98));
}

.sandbox-map-card.is-solved {
    border-color: rgba(134, 239, 172, 0.34);
    background:
        linear-gradient(180deg, rgba(248, 252, 249, 0.98), rgba(243, 248, 245, 0.98));
}

.sandbox-map-card-top {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(96px, 46%);
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: rgba(248, 250, 252, 0.64);
}

.sandbox-map-number {
    min-width: 0;
    font-size: clamp(36px, 3vw, 50px);
    line-height: 0.9;
    letter-spacing: 0;
    font-weight: 900;
    color: var(--text);
}

.sandbox-map-status {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sandbox-map-card.is-complete .sandbox-map-status {
    color: #166534;
    border-color: #86efac;
    background: rgba(220, 252, 231, 0.95);
}

.sandbox-map-card-body {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 10px;
    padding: 14px 16px 15px;
    border-top: 1px solid rgba(226, 232, 240, 0.76);
}

.sandbox-map-card-title {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text);
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sandbox-map-card-description {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sandbox-map-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: end;
    align-self: end;
}

.sandbox-map-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(236, 253, 245, 0.82);
    border: 1px solid rgba(134, 239, 172, 0.42);
    color: #166534;
    font-size: 11px;
    font-weight: 800;
}

.sandbox-map-card-accuracy {
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 5px;
    padding: 10px 8px;
    border-radius: 16px;
    background: rgba(239, 246, 255, 0.72);
    border: 1px solid rgba(191, 219, 254, 0.68);
    color: #475569;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.sandbox-map-card-accuracy span {
    display: block;
}

.sandbox-map-card-accuracy strong {
    color: var(--primary-dark);
    display: block;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
}

.sandbox-compact-page {
    display: grid;
    gap: 12px;
    min-height: calc(100vh - 104px);
    height: calc(100vh - 104px);
    align-content: stretch;
}

.sandbox-compact-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.sandbox-compact-title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.sandbox-compact-subtitle {
    margin: 0;
    max-width: 250px;
    font-size: 13px;
    line-height: 1.35;
    text-align: right;
}

.sandbox-compact-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    flex: 1;
    align-content: stretch;
}

.sandbox-compact-card {
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 6px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.sandbox-compact-card:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
}

.sandbox-compact-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sandbox-compact-number {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

.sandbox-compact-progress {
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.sandbox-compact-name {
    font-size: 12px;
    line-height: 1.22;
    color: var(--text);
    font-weight: 800;
    min-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sandbox-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 6px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
}

.task-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.task-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 156px;
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    border-color: rgba(37, 99, 235, 0.22);
}

.task-card.is-in-progress {
    background: linear-gradient(180deg, rgba(246, 252, 248, 0.98), rgba(255, 255, 255, 0.94));
    border-color: rgba(134, 239, 172, 0.5);
}

.task-card.is-correct {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.94));
    border-color: rgba(74, 222, 128, 0.58);
}

.task-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.task-number {
    min-width: 56px;
    width: auto;
    height: 56px;
    padding: 0 10px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.task-arrow {
    font-size: 20px;
    color: #94a3b8;
    font-weight: 700;
}

.task-name {
    font-size: 18px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.task-description {
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
}

.course-task-progress {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid rgba(203, 213, 225, 0.85);
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.task-card.is-in-progress .course-task-progress {
    background: rgba(236, 253, 245, 0.9);
    border-color: rgba(134, 239, 172, 0.68);
    color: #166534;
}

.task-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.task-page-head-main {
    min-width: 0;
}

.task-page-head-main p {
    margin-bottom: 0;
}

.task-page-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
}

.task-page-meta-text {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.task-page-meta-variant {
    text-align: right;
}

.task-card.is-correct .course-task-progress {
    background: rgba(220, 252, 231, 0.95);
    border-color: rgba(74, 222, 128, 0.74);
    color: #166534;
}

.task-meta {
    margin-top: auto;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.course-progress-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.course-progress-card {
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: var(--shadow);
}

.course-progress-label {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 10px;
}

.course-progress-value {
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.04em;
}

/* =========================
   ADMIN DASHBOARD
   ========================= */

.admin-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 24px;
}

.admin-title {
    font-size: clamp(32px, 4vw, 48px);
    margin-bottom: 10px;
}

.admin-subtitle {
    max-width: 680px;
}

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    padding: 22px;
}

.summary-label {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 10px;
}

.summary-value {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.admin-summary-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.admin-summary-row .admin-summary-grid {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.admin-summary-actions {
    flex: 0 0 auto;
    display: grid;
    align-content: center;
    gap: 8px;
}

.admin-summary-actions form,
.admin-summary-actions .btn {
    width: 100%;
}

.admin-list {
    display: grid;
    gap: 20px;
}

.admin-topic-card {
    padding: 22px;
}

.admin-topic-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.admin-topic-main {
    display: grid;
    grid-template-columns: auto minmax(220px, 560px);
    gap: 16px;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.admin-topic-number {
    min-width: 74px;
    height: 74px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    font-weight: 900;
    font-size: 22px;
}

.admin-topic-title {
    margin-bottom: 6px;
}

.admin-topic-title-form {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.admin-topic-title-form input {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0 16px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 18px;
    font-weight: 900;
}

.admin-topic-title-form button {
    flex: 0 0 auto;
}

.admin-topic-title-status {
    min-width: 88px;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.admin-topic-meta {
    margin: 0;
}

.admin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.icon-action-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.icon-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.icon-action-btn svg {
    width: 19px;
    height: 19px;
    display: block;
}

.icon-action-btn-light {
    background: #fff;
    color: var(--text);
    border-color: var(--line);
}

.icon-action-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-color: transparent;
}

.icon-action-btn-danger {
    background: linear-gradient(135deg, #ef4444, var(--danger));
    color: #fff;
    border-color: transparent;
}

.admin-actions form,
.table-actions form {
    margin: 0;
}

.admin-topic-body {
    border-top: 1px solid var(--line);
    padding-top: 18px;
}

.admin-topic-toolbar {
    margin-bottom: 16px;
}

.task-admin-table-wrap {
    overflow-x: auto;
}

.task-admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}

.task-admin-table th,
.task-admin-table td {
    text-align: left;
    padding: 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.task-admin-table th {
    background: #f8fafc;
    color: #334155;
    font-size: 14px;
}

.table-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-password-form {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-password-form input[type="password"],
.admin-password-form input[type="text"] {
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.admin-user-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #f8fafc;
}

.admin-user-tab {
    min-width: 120px;
    padding: 12px 16px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.admin-user-tab:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.7);
}

.admin-user-tab.is-active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.admin-user-panel.is-hidden {
    display: none;
}

.empty-box {
    padding: 18px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    color: #475569;
}

/* =========================
   LOGIN / FORMS
   ========================= */

.form-page,
.login-page {
    display: flex;
    justify-content: center;
}

.form-card {
    width: min(900px, 100%);
    padding: 28px;
}

.login-card {
    width: min(460px, 100%);
    padding: 28px;
}

.form-card-head {
    margin-bottom: 24px;
}

.form-card-head h1,
.login-card h1 {
    margin-bottom: 10px;
}

.admin-form {
    display: grid;
    gap: 18px;
}

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

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

.form-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.form-errors,
.field-error {
    color: #991b1b;
    font-size: 14px;
    line-height: 1.5;
}

.field-help {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.form-errors ul,
.field-error ul {
    margin: 0;
    padding-left: 18px;
}

.auth-links,
.auth-note {
    margin-top: 18px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--muted);
}

.auth-links a,
.auth-note a {
    color: var(--primary-dark);
    font-weight: 600;
}

.yandex-auth-btn {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: #ffffff;
    color: #111827;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yandex-auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

.yandex-auth-btn-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fc3f1d;
    color: #ffffff;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}

.yandex-auth-btn-wide {
    max-width: 360px;
}

.auth-page-modal-wrap {
    padding: 20px 0 32px;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.auth-modal.is-hidden {
    display: none;
}

.auth-modal .kompege-variant-modal-backdrop {
    position: fixed;
    inset: 0;
}

.auth-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    max-width: 100%;
    max-height: min(760px, 92vh);
    overflow: auto;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24);
}

.auth-modal-dialog-register {
    overflow: auto;
    padding: 22px;
}

@media (max-height: 760px) {
    .auth-modal {
        align-items: flex-start;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .auth-modal-dialog {
        max-height: none;
    }
}

.auth-modal-dialog-register .kompege-variant-modal-head {
    margin-bottom: 14px;
}

.auth-modal-dialog-register .admin-form {
    gap: 12px;
}

.auth-modal-dialog-register .form-group {
    gap: 6px;
}

.auth-modal-dialog-register .auth-note {
    margin-top: 12px;
}

.auth-modal-dialog .admin-badge {
    margin-bottom: 12px;
}

.auth-modal-dialog .kompege-variant-modal-head {
    margin-bottom: 20px;
}

.auth-modal-dialog .kompege-variant-modal-head h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.auth-modal-dialog .kompege-variant-modal-head p {
    margin: 0;
}

.bug-report-meta {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
}

.auth-modal-title-centered {
    width: 100%;
    text-align: center;
}

.auth-modal-dialog .kompege-variant-modal-head:has(.auth-modal-title-centered) {
    position: relative;
    display: block;
    padding-right: 44px;
    padding-left: 44px;
}

.auth-modal-dialog .kompege-variant-modal-head:has(.auth-modal-title-centered) [data-auth-modal-close] {
    position: absolute;
    top: 0;
    right: 0;
}

/* =========================
   TOPIC EDITOR
   ========================= */

.form-card-wide {
    width: min(1180px, 100%);
    padding: 30px;
}

.form-title {
    margin-bottom: 10px;
    font-size: clamp(30px, 4vw, 44px);
}

.form-subtitle {
    max-width: 760px;
}

.topic-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 320px);
    gap: 22px;
    align-items: start;
    position: relative;
    min-width: 0;
}

.topic-editor-layout {
    grid-template-columns: minmax(0, 1fr);
}

.topic-main-column,
.topic-side-column {
    display: grid;
    gap: 20px;
    min-width: 0;
    position: relative;
}

.topic-main-column {
    z-index: 2;
}

.topic-side-column {
    z-index: 1;
    pointer-events: none;
}

.topic-side-column > * {
    pointer-events: auto;
}

.task-meta-column {
    align-self: start;
    position: sticky;
    top: 96px;
    width: 100%;
    z-index: 1;
    pointer-events: none;
}

.task-meta-column > * {
    pointer-events: auto;
}

.form-section,
.side-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.form-section {
    padding: 22px;
}

.side-panel {
    padding: 20px;
    position: static;
}

#taskEditorForm .bundle-tabs-wrap {
    display: grid;
    gap: 18px;
}

#taskEditorForm .bundle-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 6px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.98), rgba(226, 232, 240, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#taskEditorForm .bundle-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 15px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    position: relative;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#taskEditorForm .bundle-tab-btn:hover {
    color: #0f172a;
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.45);
}

#taskEditorForm .bundle-tab-btn.is-active {
    background: #fff;
    color: #0f172a;
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    z-index: 2;
}

#taskEditorForm .bundle-tab-number {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    color: inherit;
}

#taskEditorForm .bundle-tab-panel {
    border-radius: 24px;
}

@media (max-width: 760px) {
    #taskEditorForm .bundle-tabs {
        grid-template-columns: 1fr;
    }
}

.bundle-tab-panel.is-hidden {
    display: none;
}

.task-meta-panel {
    display: grid;
    gap: 14px;
    align-self: start;
    padding: 16px;
}

.task-meta-panel h3 {
    margin: 0;
    font-size: 18px;
}

.task-meta-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

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

.task-meta-grid-single {
    grid-template-columns: 1fr;
}

.task-meta-panel .form-group {
    gap: 6px;
}

.task-meta-panel .form-group-checkbox {
    width: 100%;
}

.task-meta-panel label {
    font-size: 13px;
}

.task-meta-panel input[type="text"],
.task-meta-panel input[type="number"],
.task-meta-panel input[type="file"],
.task-meta-panel select {
    padding: 10px 12px;
    border-radius: 12px;
}

.task-meta-panel .checkbox-field {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.task-meta-panel .checkbox-field span {
    font-size: 14px;
    font-weight: 700;
}

.task-meta-panel .answer-builder-panel,
.task-meta-panel .attachment-admin-list {
    margin-top: 0;
}

.task-meta-panel .answer-builder-panel {
    padding: 10px;
    border-radius: 14px;
}

.task-meta-panel .answer-grid-builder {
    gap: 8px;
}

.task-meta-panel .answer-grid-input {
    min-height: 40px;
    padding: 8px 10px;
}

.task-meta-panel .existing-attachments-block {
    gap: 8px;
}

.task-meta-panel .attachment-admin-item {
    padding: 10px 12px;
    border-radius: 12px;
}

.task-meta-actions {
    display: grid;
    gap: 10px;
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.section-head {
    margin-bottom: 18px;
}

.section-head h2,
.side-panel h3 {
    margin-bottom: 8px;
}

.section-head p,
.side-panel p {
    margin: 0;
}

.side-list {
    margin: 0;
    padding-left: 18px;
    color: var(--muted);
    line-height: 1.7;
}

.editor-toolbar-top {
    grid-column: 1;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.editor-toolbar-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    box-sizing: border-box;
}

.editor-instance {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 12px;
    align-items: center;
    position: relative;
}

.editor-toolbar-label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.editor-language-select {
    min-width: 0;
    min-width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

.editor-toolbar-help {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    padding-bottom: 2px;
}

.editor-controls-row {
    grid-column: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    overflow-x: visible;
    margin-bottom: 0;
}

.editor-control-group {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 6px 8px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #f8fafc;
    box-sizing: border-box;
}

.editor-control-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-right: 2px;
    white-space: nowrap;
}

.align-btn {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    background: #fff;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    transition: 0.15s ease;
}

.align-btn:hover {
    background: #f8fafc;
}

.align-btn.is-active {
    background: #e0ecff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

.align-icon {
    position: relative;
    width: 16px;
    height: 12px;
    display: inline-block;
}

.align-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    background-position: center;
    opacity: 0.9;
}

.align-left::before {
    background-image: linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155);
    background-size: 14px 2px, 10px 2px, 14px 2px, 8px 2px;
    background-position: left 0 top 0, left 0 top 4px, left 0 top 8px, left 0 top 12px;
}

.align-center::before {
    background-image: linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155);
    background-size: 14px 2px, 10px 2px, 14px 2px, 8px 2px;
    background-position: center top 0, center top 4px, center top 8px, center top 12px;
}

.align-right::before {
    background-image: linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155);
    background-size: 14px 2px, 10px 2px, 14px 2px, 8px 2px;
    background-position: right 0 top 0, right 0 top 4px, right 0 top 8px, right 0 top 12px;
}

.align-justify::before {
    background-image: linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155), linear-gradient(#334155,#334155);
    background-size: 14px 2px, 14px 2px, 14px 2px, 14px 2px;
    background-position: left 0 top 0, left 0 top 4px, left 0 top 8px, left 0 top 12px;
}

.color-picker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.color-picker-wrap input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.color-picker-wrap input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 7px;
}

.editor-shell {
    grid-column: 1 / -1;
    margin-top: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.insert-table-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1;
}

.editor-control-group-align .editor-control-label {
    display: none;
}

.editor-table-picker {
    position: absolute;
    top: 52px;
    left: 0;
    z-index: 35;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow);
}

.editor-table-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 18px);
    gap: 4px;
}

.editor-table-picker-cell {
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.editor-table-picker-cell.is-active,
.editor-table-picker-cell:hover {
    background: #dbeafe;
    border-color: #60a5fa;
}

.editor-table-picker-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.editor-table-actions {
    position: static;
    z-index: 34;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px;
    margin: 10px 0 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.editor-plain-table {
    position: relative;
    margin: 0;
}

#toolbar-container {
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
    padding: 10px;
}

.article-editor {
    min-height: 480px;
    background: #fff;
}

.hidden-textarea {
    display: none;
}

.editor-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 14px;
    line-height: 1.6;
}

.form-actions-sticky {
    margin-top: 22px;
    padding: 16px 0 0;
}

.rich-editor-field {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.rich-editor-source,
.rich-editor-host,
.rich-editor-field .toastui-editor-defaultUI {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.rich-editor-source {
    display: none;
}

.rich-editor-host {
    overflow: hidden;
}

.rich-editor-field .toastui-editor-defaultUI {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    min-width: 0;
}

.rich-editor-field .toastui-editor-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 1px;
    padding: 3px;
}

.rich-editor-field .toastui-editor-md-container,
.rich-editor-field .toastui-editor-ww-container {
    background: #fff;
    min-width: 0;
}

.rich-editor-field .toastui-editor-contents {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text);
    overflow-wrap: anywhere;
}

.rich-editor-field .toastui-editor-contents img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.rich-editor-field .toastui-editor-toolbar-group {
    margin-right: 0;
}

.rich-editor-field .toastui-editor-toolbar-icons {
    border-radius: 10px;
    transform: scale(0.78);
    transform-origin: center;
}

.rich-editor-field .toastui-editor-toolbar .toastui-editor-toolbar-divider {
    margin: 0;
    height: 14px;
}

.rich-editor-field .toastui-editor-main,
.rich-editor-field .toastui-editor-main-container,
.rich-editor-field .toastui-editor-ww-container .toastui-editor {
    min-width: 0;
    width: 100%;
}

.rich-editor-field .toastui-editor-contents table {
    width: 100%;
}

.editor-latex-widget {
    display: inline-flex;
    max-width: 100%;
    vertical-align: middle;
    padding: 1px 3px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.04);
}

.editor-latex-widget-display {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 10px 0;
    padding: 8px 10px;
}

.editor-latex-widget mjx-container {
    margin: 0;
}

#topic-article img,
#task-shared-text-article img,
#task-text-article img,
#task-shared-solution-article img,
#task-solution-article img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#task-solution-article > hr:first-child {
    display: none;
}

.sandbox-task-layout #task-solution-article hr {
    display: none;
}

/* different code icons */
.editor-code-inline-btn,
.editor-code-block-btn {
    position: relative;
}

.editor-code-inline-btn .editor-code-icon,
.editor-code-block-btn .editor-code-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
}

.editor-code-inline-icon::before,
.editor-code-inline-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.editor-code-inline-icon::before {
    left: 1px;
    width: 5px;
    height: 9px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.editor-code-inline-icon::after {
    right: 1px;
    width: 5px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.editor-code-inline-icon {
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 3px;
    opacity: 0.9;
}

.editor-code-block-icon::before,
.editor-code-block-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
}

.editor-code-block-icon::before {
    top: 2px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor, 0 12px 0 currentColor;
    border-radius: 999px;
}

.editor-code-block-icon::after {
    top: 1px;
    left: 0;
    width: 2px;
    height: 14px;
    background: currentColor;
    box-shadow: 14px 0 0 currentColor;
    border-radius: 999px;
}

/* =========================
   QUILL
   ========================= */

.ql-toolbar.ql-snow {
    border: none !important;
    background: transparent;
}

.ql-container.ql-snow {
    border: none !important;
}

.ql-snow .ql-formats {
    margin-right: 10px;
    margin-bottom: 6px;
}

.ql-snow .ql-picker {
    color: #334155;
}

.ql-snow .ql-picker-options {
    z-index: 30;
}

.ql-editor .ql-align-center {
    text-align: center;
}

.ql-editor .ql-align-right {
    text-align: right;
}

.ql-editor .ql-align-justify {
    text-align: justify;
}

.topic-article .ql-align-center {
    text-align: center;
}

.topic-article .ql-align-right {
    text-align: right;
}

.topic-article .ql-align-justify {
    text-align: justify;
}

/* IMAGE ALIGNMENT FIX */
.ql-editor img,
.topic-article img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

.ql-editor img {
    display: inline-block;
    margin: 18px 0;
}

.topic-article img {
    display: inline-block;
    margin: 18px 0;
}

/* when alignment class is on wrapper or paragraph */
.ql-editor .ql-align-center img,
.topic-article .ql-align-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ql-editor .ql-align-right img,
.topic-article .ql-align-right img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.ql-editor .ql-align-justify img,
.topic-article .ql-align-justify img {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* when style attribute is used directly on wrapper */
.ql-editor [style*="text-align: center"] img,
.topic-article [style*="text-align: center"] img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ql-editor [style*="text-align:center"] img,
.topic-article [style*="text-align:center"] img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.ql-editor [style*="text-align: right"] img,
.topic-article [style*="text-align: right"] img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.ql-editor [style*="text-align:right"] img,
.topic-article [style*="text-align:right"] img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.ql-editor [style*="text-align: justify"] img,
.topic-article [style*="text-align: justify"] img,
.ql-editor [style*="text-align:justify"] img,
.topic-article [style*="text-align:justify"] img {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.ql-editor {
    min-height: 480px;
    padding: 22px 22px 28px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--text);
    font-family: "Inter", Arial, sans-serif;
}

.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4 {
    color: var(--text);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.ql-editor h1 {
    font-size: 34px;
}

.ql-editor h2 {
    font-size: 28px;
}

.ql-editor h3 {
    font-size: 22px;
}

.ql-editor p {
    color: var(--text);
    margin: 0 0 16px;
}

.ql-editor ul,
.ql-editor ol {
    margin: 0 0 18px 0;
    padding-left: 24px;
}

.ql-editor li {
    margin-bottom: 8px;
}

.ql-editor blockquote {
    border-left: 4px solid #93c5fd;
    margin: 18px 0;
    padding: 10px 16px;
    background: #f8fbff;
    color: #334155;
    border-radius: 0 12px 12px 0;
}

.ql-editor code:not(pre code) {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 0.92em;
    color: #1e293b;
    background: #eef2ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 2px 7px;
}

.ql-editor pre.ql-syntax,
.ql-editor .ql-code-block-container {
    margin: 20px 0;
    padding: 16px 18px;
    border-radius: 14px;
    overflow-x: auto;
    background: var(--code-bg);
    color: var(--code-text);
    border: 1px solid var(--code-border);
    font-family: "JetBrains Mono", monospace;
    font-size: 15px;
    line-height: 1.65;
}

.ql-editor table,
.topic-article table,
.task-page-card table,
.topic-page-card table {
    width: 100%;
    max-width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
}

.topic-article mjx-container[display="true"],
.task-page-card mjx-container[display="true"],
.topic-page-card mjx-container[display="true"] {
    max-width: 100%;
}

.topic-article math[display="block"],
.task-page-card math[display="block"],
.topic-page-card math[display="block"] {
    display: block;
    max-width: 100%;
    margin: 18px 0;
}

.topic-article mjx-container:not([display="true"]),
.task-page-card mjx-container:not([display="true"]),
.topic-page-card mjx-container:not([display="true"]) {
    display: inline;
    max-width: 100%;
    vertical-align: middle;
}

.topic-article math:not([display="block"]),
.task-page-card math:not([display="block"]),
.topic-page-card math:not([display="block"]) {
    display: inline-block;
    max-width: 100%;
    padding: 0.08em 0;
    vertical-align: middle;
}

.math-inline-wrap {
    display: inline;
    max-width: 100%;
    font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
    font-style: italic;
    line-height: 1;
    overflow-wrap: anywhere;
    word-break: normal;
}

.math-inline-wrap-token {
    display: inline-block;
    white-space: nowrap;
}

.math-inline-wrap-token-mo {
    padding: 0 0.08em;
    font-style: normal;
}

.topic-article .MathJax_Display,
.task-page-card .MathJax_Display,
.topic-page-card .MathJax_Display,
.topic-article math,
.task-page-card math,
.topic-page-card math,
.topic-article iframe,
.task-page-card iframe,
.topic-page-card iframe {
    max-width: 100%;
}

.topic-article mjx-container.is-math-fit > mjx-math,
.task-page-card mjx-container.is-math-fit > mjx-math,
.topic-page-card mjx-container.is-math-fit > mjx-math {
    transform: none;
}

.ql-editor th,
.ql-editor td,
.topic-article th,
.topic-article td,
.task-page-card th,
.task-page-card td,
.topic-page-card th,
.topic-page-card td {
    border: 1px solid rgba(203, 213, 225, 0.9);
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
}

.ql-editor th,
.topic-article th,
.task-page-card th,
.topic-page-card th {
    background: #f8fafc;
    font-weight: 800;
}

/* =========================
   PUBLIC PAGES
   ========================= */

.topic-page-card,
.task-page-card {
    padding: 32px 34px;
    margin-bottom: 22px;
}

.study-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.72fr);
    gap: 24px;
    align-items: start;
}

.study-main-column {
    min-width: 0;
    max-width: 100%;
}

.variant-detail-layout {
    grid-template-columns: minmax(0, 1fr);
}

.course-study-shell {
    transition: opacity 0.18s ease;
}

.course-study-shell.is-loading {
    opacity: 0.72;
    pointer-events: none;
}

.study-sidebar {
    min-width: 0;
    max-width: 100%;
}

.study-sidebar-card {
    position: sticky;
    top: 96px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.admin-task-edit-card {
    position: static;
    padding: 14px;
    margin-bottom: 14px;
}

.course-topic-side-hero {
    display: grid;
    gap: 10px;
    padding-bottom: 18px;
}

.course-topic-side-number {
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.92;
    letter-spacing: -0.06em;
    font-weight: 900;
    color: var(--text);
}

.course-topic-side-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
}

.sandbox-sticky-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
}

.sandbox-topic-sidebar {
    position: static;
    align-self: start;
}

.sandbox-sticky-sidebar {
    display: grid;
    gap: 22px;
}

.sandbox-topic-sidebar .study-sidebar-card,
.sandbox-sticky-sidebar .study-sidebar-card {
    position: static;
}

.sandbox-page-scroll-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 30;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-dark);
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.sandbox-page-scroll-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
}

.sandbox-page-scroll-top.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.result-sticky-sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
}

.result-sticky-sidebar .study-sidebar-card {
    position: static;
}

.variant-training-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 96px;
    align-self: start;
    height: fit-content;
    display: grid;
    gap: 22px;
}

.variant-training-sidebar .study-sidebar-card {
    position: static;
    max-height: calc(100vh - 96px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
}

.variant-training-summary-head {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
    border: 1px solid rgba(147, 197, 253, 0.55);
}

.variant-training-summary-title {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.variant-training-summary-mode {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.study-progress-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    margin-bottom: 18px;
}

.study-progress-value {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.study-progress-label {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.9;
}

.study-score-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    margin-bottom: 18px;
}

.study-timer-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(191, 219, 254, 0.92);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.1), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.11);
    margin-bottom: 18px;
    overflow: hidden;
}

.study-timer-card.is-warning {
    border-color: rgba(251, 146, 60, 0.72);
    background:
        radial-gradient(circle at 100% 0%, rgba(251, 146, 60, 0.16), transparent 34%),
        linear-gradient(180deg, #ffffff, #fff7ed);
    box-shadow: 0 14px 30px rgba(251, 146, 60, 0.13);
}

.study-timer-card.is-danger {
    border-color: rgba(248, 113, 113, 0.72);
    background:
        radial-gradient(circle at 100% 0%, rgba(248, 113, 113, 0.16), transparent 34%),
        linear-gradient(180deg, #ffffff, #fff7f7);
    box-shadow: 0 14px 30px rgba(248, 113, 113, 0.13);
}

.study-timer-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.study-timer-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.22);
}

.study-timer-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.study-timer-card .study-menu-title {
    margin: 0;
    color: var(--text);
    line-height: 1.1;
}

.study-timer-caption {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.study-finish-card {
    margin: -4px 0 18px;
}

.study-finish-card-after-menu {
    margin: 14px 0 0;
}

.study-finish-button {
    min-height: 56px;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    border-color: #7dd3fc;
    background: linear-gradient(180deg, #ffffff, #f0f9ff);
    box-shadow: 0 14px 28px rgba(14, 165, 233, 0.14);
}

.study-finish-button:hover {
    border-color: #38bdf8;
    background: linear-gradient(180deg, #ffffff, #e0f2fe);
    color: #0f172a;
}

.study-timer-value {
    color: var(--primary-dark);
    font-family: "JetBrains Mono", "Inter", Arial, sans-serif;
    font-size: 31px;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.study-timer-card.is-warning .study-timer-value {
    color: #c2410c;
}

.study-timer-card.is-danger .study-timer-value {
    color: var(--danger);
}

.study-timer-progress {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.study-timer-progress span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, var(--primary));
    transform-origin: left center;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.study-timer-card.is-warning .study-timer-progress span {
    background: linear-gradient(90deg, #facc15, #fb923c);
}

.study-timer-card.is-danger .study-timer-progress span {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

.study-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    color: var(--muted);
}

.study-score-row strong {
    color: var(--text);
}

.study-sidebar-head {
    margin-bottom: 20px;
}

.study-sidebar-kicker {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 12px;
}

.study-sidebar-head h2 {
    margin-bottom: 0;
    font-size: 24px;
}

.study-menu-group + .study-menu-group {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.study-menu-title {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}

.study-menu-list {
    display: grid;
    gap: 8px;
}

.sandbox-quick-nav-links {
    margin-top: 10px;
}

.study-menu-link {
    position: relative;
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-weight: 700;
    transition: 0.18s ease;
}

.study-menu-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.study-menu-link-button {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    font-weight: 800;
}

.study-menu-link.is-active {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.study-menu-link.is-correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.study-menu-link.is-correct:hover {
    border-color: #4ade80;
    background: #dcfce7;
    color: #166534;
}

.study-menu-link.is-late-correct {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.study-menu-link.is-late-correct:hover {
    border-color: #fb923c;
    background: #ffedd5;
    color: #c2410c;
}

.study-menu-link.is-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.study-menu-link.is-incorrect:hover {
    border-color: #f87171;
    background: #fee2e2;
    color: #991b1b;
}

.study-menu-link.is-partial {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.study-menu-link.is-partial:hover {
    border-color: #fb923c;
    background: #ffedd5;
    color: #c2410c;
}

.study-menu-link.is-attempted {
    border-color: #94a3b8;
    background: linear-gradient(135deg, #f8fafc, #eef2f7);
    color: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.study-menu-link.is-attempted:hover {
    border-color: #64748b;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #0f172a;
}

.study-menu-link.is-active.is-correct {
    border-color: #4ade80;
    background: linear-gradient(135deg, #ecfdf5, #dcfce7);
    color: #166534;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.14);
}

.study-menu-link.is-active.is-late-correct {
    border-color: #fb923c;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.14);
}

.study-menu-link.is-active.is-incorrect {
    border-color: #f87171;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12);
}

.study-menu-link.is-active.is-partial {
    border-color: #fb923c;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.14);
}

.sandbox-task-grid-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sandbox-task-grid-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    transition: 0.18s ease;
}

.sandbox-task-grid-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.sandbox-task-grid-link.is-active {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.sandbox-task-grid-link.is-correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.sandbox-task-grid-link.is-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.study-task-grid-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.study-task-grid-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    transition: 0.18s ease;
}

.study-task-grid-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.variant-info-grid-link,
.variant-info-menu-link {
    border-color: rgba(147, 197, 253, 0.9);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
}

.variant-info-grid-link {
    font-family: "JetBrains Mono", "Inter", Arial, sans-serif;
    font-size: 18px;
    font-weight: 900;
}

.variant-info-grid-link:hover,
.variant-info-menu-link:hover {
    border-color: var(--primary);
    color: #1d4ed8;
}

.study-task-grid-link.is-active {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.study-task-grid-link.is-correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.study-task-grid-link.is-late-correct {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.study-task-grid-link.is-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.study-task-grid-link.is-partial {
    border-color: #fdba74;
    background: #fff7ed;
    color: #c2410c;
}

.study-task-grid-link.is-attempted {
    border-color: #94a3b8;
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    color: #0f172a;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
}

.study-task-grid-link.is-attempted::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #64748b;
}

.study-task-code-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #2563eb);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.study-task-code-badge.is-hidden {
    display: none;
}

.study-task-grid-link.is-active.is-correct {
    border-color: #4ade80;
    background: linear-gradient(135deg, #ecfdf5, #dcfce7);
    color: #166534;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.14);
}

.study-task-grid-link.is-active.is-late-correct {
    border-color: #fb923c;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.14);
}

.study-task-grid-link.is-active.is-incorrect {
    border-color: #f87171;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12);
}

.study-task-grid-link.is-active.is-partial {
    border-color: #fb923c;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c;
    box-shadow: 0 8px 20px rgba(249, 115, 22, 0.14);
}

.study-task-grid-link.is-active.is-attempted {
    border-color: #64748b;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(100, 116, 139, 0.16);
}

.study-task-grid-link.is-active {
    outline: none;
    box-shadow:
        inset 0 0 0 3px rgba(37, 99, 235, 0.9),
        0 8px 20px rgba(37, 99, 235, 0.12);
}

.study-task-grid-link.is-active.is-correct {
    box-shadow:
        inset 0 0 0 3px rgba(34, 197, 94, 0.9),
        0 8px 20px rgba(34, 197, 94, 0.14);
}

.study-task-grid-link.is-active.is-late-correct,
.study-task-grid-link.is-active.is-partial {
    box-shadow:
        inset 0 0 0 3px rgba(249, 115, 22, 0.9),
        0 8px 20px rgba(249, 115, 22, 0.14);
}

.study-task-grid-link.is-active.is-incorrect {
    box-shadow:
        inset 0 0 0 3px rgba(239, 68, 68, 0.86),
        0 8px 20px rgba(239, 68, 68, 0.12);
}

.study-task-grid-link.is-active.is-attempted {
    box-shadow:
        inset 0 0 0 3px rgba(100, 116, 139, 0.82),
        0 8px 20px rgba(100, 116, 139, 0.16);
}

.sandbox-task-grid-link.is-active.is-correct {
    border-color: #4ade80;
    background: linear-gradient(135deg, #ecfdf5, #dcfce7);
    color: #166534;
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.14);
}

.sandbox-task-grid-link.is-active.is-incorrect {
    border-color: #f87171;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #991b1b;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12);
}

.study-sidebar-empty {
    padding: 14px 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    color: var(--muted);
    background: #f8fafc;
}

.answer-box {
    display: grid;
    gap: 14px;
}

.answer-privacy-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.answer-privacy-row > .student-answer-grid {
    flex: 1 1 auto;
    min-width: 0;
}

.answer-hint {
    margin-top: 14px;
    color: var(--muted);
    font-size: 14px;
}

.answer-hint a {
    color: var(--primary-dark);
    font-weight: 700;
}

.answer-submit-warning {
    margin-top: 2px;
}

.answer-title-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.answer-title-row label {
    margin: 0;
}

.answer-attempt-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.answer-attempt-badge.is-hidden {
    display: none;
}

.task-submit-row,
.sandbox-inline-answer-actions {
    position: relative;
}

.task-submit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.answer-submit-warning.is-bubble {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.94);
    color: #fff7ed;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.24);
    animation: answerWarningPulse 0.18s ease-out;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
}

.answer-submit-warning.is-bubble::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 100%;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(17, 24, 39, 0.94) transparent transparent transparent;
}

.answer-submit-warning.is-success-bubble {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 12px;
    background: rgba(51, 65, 85, 0.94);
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.2);
    animation: answerWarningPulse 0.18s ease-out;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
}

.answer-submit-warning.is-success-bubble::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 100%;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: rgba(51, 65, 85, 0.94) transparent transparent transparent;
}

.answer-submit-warning.is-prominent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #fdba74;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #9a3412;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(234, 88, 12, 0.14);
    animation: answerWarningPulse 0.22s ease-out;
}

.answer-submit-warning.is-prominent::before {
    content: "!";
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #f97316;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    font-size: 15px;
    line-height: 1;
}

.answer-submit-warning.is-hidden {
    display: none;
}

@media (max-width: 640px) {
    .answer-submit-warning.is-bubble,
    .answer-submit-warning.is-success-bubble {
        max-width: min(280px, calc(100vw - 48px));
        white-space: normal;
    }
}

@keyframes answerWarningPulse {
    0% {
        transform: translateY(-4px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.task-status-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
    margin-top: 14px;
}

.task-status-result-slot {
    min-width: 0;
}

.task-status-pill {
    margin: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    width: 100%;
}

.result-ok,
.result-bad {
    padding: 14px 16px;
    border-radius: 14px;
    font-weight: 700;
}

.result-ok {
    background: #dcfce7;
    color: #166534;
}

.result-bad {
    background: #fee2e2;
    color: #991b1b;
}

.sandbox-task-answer-card.is-correct,
.sandbox-sidebar-answer-card.is-correct,
.variant-training-answer-card.is-correct {
    border-color: #86efac;
    background: rgba(255, 255, 255, 0.92);
}

.variant-training-answer-card.is-late-correct {
    border-color: #fb923c;
    background: rgba(255, 255, 255, 0.94);
}

.sandbox-task-answer-card.is-incorrect,
.sandbox-sidebar-answer-card.is-incorrect,
.variant-training-answer-card.is-incorrect {
    border-color: #fca5a5;
    background: rgba(255, 255, 255, 0.92);
}

.sandbox-sidebar-answer-grid {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
}

.sandbox-sidebar-answer-actions .btn {
    width: 100%;
}

.sandbox-sidebar-task-status-row {
    grid-template-columns: 1fr;
    margin-top: 12px;
}

.sandbox-answer-stat {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
}

.sandbox-answer-stat strong {
    color: var(--text);
}

.task-inline-status {
    color: var(--muted);
    font-size: 15px;
    font-weight: 700;
}

.task-inline-status.is-correct {
    color: #166534;
}

.task-inline-status.is-incorrect {
    color: #991b1b;
}

.task-flow-nav {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sandbox-task-flow-nav-inside {
    margin-top: 20px;
}

.task-solution-section + .task-solution-section {
    margin-top: 18px;
}

.solution-answer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
}

.solution-answer-cell {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--text);
    font-weight: 700;
    text-align: center;
}

.answer-row-label,
.solution-answer-row-label {
    align-self: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.is-ege27-answer-grid {
    align-items: center;
}

.task-solution-section + #task-solution-article {
    margin-top: 18px;
}

.task-compact-head {
    margin-bottom: 20px;
}

.task-compact-head h1 {
    margin-bottom: 0;
    font-size: clamp(28px, 4vw, 36px);
    letter-spacing: -0.04em;
}

@media (max-width: 760px) {
    .task-status-row {
        grid-template-columns: 1fr;
    }

    .task-solution-card summary {
        flex-direction: column;
        align-items: flex-start;
    }
}

.task-submit-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.task-links {
    display: grid;
    gap: 10px;
}

.task-link-item {
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    font-weight: 600;
}

.table-task-link {
    color: var(--primary-dark);
    font-weight: 700;
}

.table-task-link:hover {
    text-decoration: underline;
}

.topic-video-wrap {
    margin-top: 16px;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #0f172a;
    box-shadow: var(--shadow);
}

.topic-video-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

.task-video-fallback {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.task-video-fallback-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 12px;
    border: 1px solid rgba(0, 119, 255, 0.18);
    border-radius: 999px;
    background: #fff;
    color: #1e293b;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.task-video-fallback-link:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 119, 255, 0.32);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    text-decoration: none;
}

.task-video-fallback-link:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.22);
    outline-offset: 3px;
}

.task-video-fallback-link-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    background: #07f;
}

.task-video-fallback-link-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: #fff;
}

.task-attachments {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.task-attachments h3 {
    margin-bottom: 12px;
}

.task-shared-question-head {
    margin: 24px 0 14px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.task-shared-question-head h3 {
    margin-bottom: 0;
}

.task-solution-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.task-solution-card summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 800;
}

.task-solution-card summary::-webkit-details-marker {
    display: none;
}

.task-solution-meta {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.task-solution-card[open] summary {
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.task-solution-card-locked {
    border-color: rgba(37, 99, 235, 0.16);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), #fff);
}

.task-solution-card-locked .task-solution-body {
    padding: 18px 20px;
}

.task-solution-card-locked p {
    margin: 0;
    color: var(--primary-dark);
    font-weight: 800;
}

.sandbox-task-layout .task-solution-card[open] summary {
    border-bottom: 0;
}

.sandbox-task-layout .task-solution-body .task-shared-question-head {
    padding-top: 0;
    border-top: 0;
    margin-top: 4px;
}

.task-solution-body {
    padding: 14px 20px 4px;
}

.attachment-list,
.attachment-admin-list {
    display: grid;
    gap: 10px;
}

.attachment-link,
.attachment-admin-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.attachment-link {
    font-weight: 600;
    color: var(--primary-dark);
}

.attachment-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.attachment-admin-name {
    min-width: 0;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.attachment-admin-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: auto;
}

.attachment-delete-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

.attachment-delete-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    flex: 0 0 auto;
}

.existing-attachments-block {
    margin-top: 8px;
}

.task-meta-panel .attachment-admin-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.task-meta-panel .attachment-admin-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
}

.task-meta-panel .attachment-delete-toggle {
    white-space: nowrap;
}

.account-hero {
    margin-bottom: 22px;
}

.account-dashboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.account-dashboard-hero > div:first-child {
    min-width: 0;
}

.account-dashboard-hero > .btn {
    flex-shrink: 0;
    justify-self: end;
}

.account-dashboard-actions {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.account-dashboard-actions > .btn {
    justify-self: end;
}

.teacher-works-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.teacher-works-hero > div {
    min-width: 0;
}

.teacher-works-hero .admin-title {
    margin-bottom: 0;
}

.teacher-works-hero > .btn {
    margin-left: auto;
    flex-shrink: 0;
}

.teacher-classes-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.teacher-classes-hero > div {
    min-width: 0;
}

.teacher-classes-hero .admin-title {
    margin-bottom: 0;
}

.teacher-student-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.teacher-student-hero > div:first-child {
    min-width: 0;
}

.teacher-student-hero > div:last-child {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.teacher-classes-inline-form {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.teacher-classes-inline-form input[type="text"] {
    width: 260px;
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dashboard-stat-grid,
.mini-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mini-work-card {
    padding: 20px;
    display: grid;
    gap: 12px;
}

.mini-work-card h3 {
    margin-bottom: 0;
}

.sandbox-grid,
.variant-public-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.sandbox-card,
.variant-public-card {
    padding: 24px;
    display: grid;
    gap: 12px;
}

.variant-public-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    min-width: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.variant-public-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    border-color: rgba(37, 99, 235, 0.22);
}

.variant-public-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.variant-card-name {
    font-size: 17px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.03em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sandbox-card-progress,
.variant-public-progress {
    display: grid;
    justify-items: end;
    color: var(--primary-dark);
    font-weight: 800;
}

.variant-public-progress strong {
    font-size: 28px;
    line-height: 1;
}

.variant-mode-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
    min-width: 0;
}

.variant-mode-panel {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(203, 213, 225, 0.84);
    background: #fff;
}

.variant-mode-panel-training {
    background:
        linear-gradient(180deg, rgba(240, 253, 244, 0.94), rgba(255, 255, 255, 0.96));
    border-color: rgba(134, 239, 172, 0.72);
}

.variant-mode-panel-exam {
    background:
        linear-gradient(180deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.96));
    border-color: rgba(253, 186, 116, 0.72);
}

.variant-mode-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.variant-mode-panel-head h3 {
    margin: 0;
    font-size: 15px;
}

.variant-mode-panel-kicker {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}

.variant-mode-panel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.variant-mode-stat,
.variant-mode-empty {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: #f8fafc;
}

.variant-mode-stat {
    display: grid;
    align-content: space-between;
    gap: 6px;
}

.variant-mode-stat span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.variant-mode-stat strong {
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.variant-mode-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
}

.variant-mode-panel-actions form {
    margin: 0;
}

.variant-mode-panel-actions {
    margin-top: auto;
    min-width: 0;
}

.variant-mode-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.variant-mode-action-grid.has-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.variant-public-card .btn {
    min-height: 40px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
}

.variant-view-tools {
    justify-self: end;
}

.variant-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.variant-view-toggle-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.variant-view-toggle-btn:hover {
    background: #eff6ff;
    color: var(--primary-dark);
}

.variant-view-toggle-btn.is-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.variant-view-toggle-btn svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.variant-view-pane.is-hidden {
    display: none;
}

.variant-table-class-filter {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.variant-table-class-filter label {
    width: min(360px, 100%);
    display: grid;
    gap: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.variant-table-class-filter select {
    min-height: 42px;
    border-radius: 14px;
    font-weight: 800;
}

.variant-table-shell {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.variant-table-toolbar {
    min-width: 1080px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.86);
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.08), transparent 32%),
        #fff;
}

.variant-table-toolbar > div {
    display: grid;
    gap: 3px;
}

.variant-table-toolbar span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.variant-table-toolbar strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.variant-compact-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    table-layout: fixed;
}

.variant-compact-table th,
.variant-compact-table td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
    text-align: left;
    vertical-align: top;
}

.variant-compact-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.variant-compact-table th:nth-child(1) {
    width: 30%;
}

.variant-compact-table th:nth-child(2),
.variant-compact-table th:nth-child(3) {
    width: 24%;
}

.variant-compact-table td:nth-child(2),
.variant-compact-table td:nth-child(3) {
    text-align: center;
}

.variant-compact-table td:nth-child(2) .variant-table-result,
.variant-compact-table td:nth-child(3) .variant-table-result {
    justify-items: center;
}

.variant-compact-table td:nth-child(2) .variant-table-mode-cell,
.variant-compact-table td:nth-child(3) .variant-table-mode-cell {
    width: min(100%, 260px);
}

.variant-compact-table th:nth-child(4) {
    width: 22%;
}

.variant-compact-table tbody tr:last-child td {
    border-bottom: 0;
}

.variant-compact-table tbody tr:hover:not(.variant-table-subgroup-row) {
    background: #f8fbff;
}

.variant-table-subgroup-row td {
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(248, 250, 252, 0.96));
}

.variant-table-subgroup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.variant-table-subgroup-row span {
    color: var(--text);
    font-weight: 900;
}

.variant-table-subgroup-row small {
    margin-left: 8px;
    color: #64748b;
    font-weight: 800;
}

.variant-table-title-cell {
    min-width: 0;
}

.variant-table-title-cell a {
    display: inline-block;
    color: var(--text);
    font-weight: 900;
    line-height: 1.25;
}

.variant-table-title-cell span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.variant-compact-table tr[data-variant-subfolder-content] {
    opacity: 1;
    transition: opacity 0.24s ease;
}

.variant-compact-table tr[data-variant-subfolder-content] td {
    transition: padding 0.28s ease, border-color 0.28s ease;
}

.variant-compact-table tr[data-variant-subfolder-content] td > * {
    max-height: 260px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: max-height 0.32s ease, opacity 0.22s ease, transform 0.24s ease;
}

.variant-compact-table tr[data-variant-subfolder-content].is-subfolder-collapsed {
    display: none;
}

.variant-compact-table tr[data-variant-subfolder-content].is-subfolder-collapsed td {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.variant-compact-table tr[data-variant-subfolder-content].is-subfolder-collapsed td > * {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
}

.variant-table-result,
.variant-table-class-stats {
    display: grid;
    gap: 5px;
}

.variant-table-mode-cell {
    gap: 7px;
}

.variant-table-mode-summary {
    display: grid;
    gap: 5px;
}

.variant-table-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.variant-table-score {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(191, 219, 254, 0.92);
    border-radius: 10px;
    background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.variant-table-score span {
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.variant-table-score strong {
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 950;
    line-height: 1;
}

.variant-table-empty-result {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.variant-table-empty-result.is-locked {
    border-color: rgba(37, 99, 235, 0.22);
    background: #eff6ff;
    color: var(--primary-dark);
}

.variant-table-mode-actions {
    display: grid;
    gap: 5px;
    width: 100%;
}

.variant-table-mode-actions form {
    margin: 0;
}

.variant-table-mode-actions .btn {
    width: 100%;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    white-space: normal;
}

.variant-table-result small,
.variant-table-muted {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.variant-table-class-stats strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.variant-table-class-head {
    display: flex;
    align-items: center;
    min-height: 20px;
}

.variant-table-class-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.variant-table-class-mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.variant-table-class-mode-link {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(187, 247, 208, 0.92);
    border-radius: 10px;
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    color: #166534;
    text-decoration: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.variant-table-class-mode-link span {
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.variant-table-class-mode-link strong {
    color: #166534;
    font-size: 15px;
    font-weight: 950;
    line-height: 1;
}

.variant-table-class-mode-link small {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.variant-table-class-mode-link:hover {
    border-color: #86efac;
    box-shadow: 0 10px 22px rgba(22, 101, 52, 0.1);
    transform: translateY(-1px);
}

.variant-result-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #93c5fd;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    white-space: normal;
    max-width: 100%;
}

.variant-result-pill.is-active {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.variant-result-pill.is-empty {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #64748b;
}

.variant-teacher-results {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
}

.variant-teacher-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.variant-card-class-filter {
    flex: 0 1 210px;
    min-width: 0;
}

.variant-card-class-filter select {
    width: 100%;
    min-height: 32px;
    padding: 4px 9px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.variant-teacher-class-list {
    display: grid;
    gap: 7px;
}

.variant-teacher-class-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.variant-teacher-class-name {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.variant-teacher-class-name strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.15;
}

.variant-teacher-class-name span {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.variant-teacher-mode-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.variant-teacher-mode-link {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 1px;
    padding: 6px 8px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
}

.variant-teacher-mode-link span {
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
}

.variant-teacher-mode-link small {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.variant-teacher-mode-link:hover {
    border-color: #93c5fd;
    background: #dbeafe;
}

.dashboard-action-row,
.inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.account-class-study-section {
    display: grid;
    gap: 18px;
}

.account-class-study-section .section-head,
.account-class-study-section .dashboard-action-row {
    margin-bottom: 0;
}

.account-class-study-section .dashboard-action-row + .mini-work-grid {
    margin-top: 0;
}

.account-profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.account-profile-head h2 {
    margin: 0;
}

.account-profile-static-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.account-profile-static-grid .form-group:last-child {
    grid-column: 1 / -1;
}

.account-profile-static-value {
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    color: var(--text);
    font-weight: 700;
    display: flex;
    align-items: center;
}

.variant-session-links,
.variant-active-session-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.variant-session-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-dark);
    font-weight: 700;
}

.variant-title-card {
    padding-top: 20px;
    padding-bottom: 20px;
}

.variant-title-card h1 {
    margin: 0;
}

.variant-mode-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.variant-active-session-list-inline {
    justify-content: flex-end;
    flex: 0 0 auto;
}

.variant-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.variant-mode-card {
    position: relative;
    padding: 22px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(72px, 1fr) auto auto;
    gap: 14px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.1), transparent 34%),
        #fff;
    box-shadow: var(--shadow);
}

.variant-mode-card .admin-badge {
    align-self: center;
    justify-self: start;
    margin-bottom: 0;
}

.variant-mode-card h3 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: -0.03em;
}

.variant-mode-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.variant-mode-card-action,
.variant-mode-action-form {
    grid-column: 1 / -1;
    align-self: end;
}

.variant-mode-card-action .btn,
.variant-mode-action-form .btn {
    width: 100%;
}

.variant-mode-action-form {
    margin: 0;
}

.variant-mode-card-body {
    grid-column: 1 / -1;
    min-width: 0;
}

.variant-mode-card-training {
    border-color: rgba(34, 197, 94, 0.22);
}

.variant-mode-card-exam {
    border-color: rgba(37, 99, 235, 0.2);
}

.variant-mode-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: var(--primary-dark);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.variant-mode-result {
    grid-column: 1 / -1;
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.84);
}

.variant-mode-result.is-empty {
    border-style: dashed;
    background: rgba(248, 250, 252, 0.58);
}

.variant-mode-result.is-locked,
.variant-mode-stat.is-locked {
    border-color: rgba(37, 99, 235, 0.22);
    background: #eff6ff;
}

.variant-mode-stat.is-locked {
    grid-column: 1 / -1;
}

.variant-mode-result span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.variant-mode-result strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

.variant-auth-callout {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, 0.08), transparent 36%),
        #f8fafc;
}

.variant-auth-callout p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.variant-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.variant-yandex-auth-btn {
    width: auto;
    margin: 0;
    min-height: 44px;
    padding: 0 16px;
}

.result-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.result-summary-mode {
    font-size: 20px;
}

.sandbox-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.public-task-list {
    display: grid;
    gap: 14px;
}

.public-task-list-compact {
    gap: 12px;
}

.public-task-card {
    position: relative;
    display: grid;
    gap: 10px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
    transition: 0.18s ease;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.task-code-corner-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #0f172a 100%);
    color: #fff;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 7px 16px rgba(37, 99, 235, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.task-code-corner-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.24);
}

.task-code-corner-badge:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.3);
    outline-offset: 3px;
}

.task-code-corner-badge.is-hidden {
    display: none;
}

.task-code-corner-icon {
    width: 20px;
    height: 20px;
}

.task-code-corner-bracket,
.task-code-corner-slash {
    fill: none;
    stroke: currentColor;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.task-code-corner-slash {
    opacity: 0.78;
    stroke-width: 2.8;
}

.task-code-corner-dot {
    fill: #34d399;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.5;
}

.public-task-card:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.public-task-card.is-correct {
    border-color: #86efac;
    background: #fff;
}

.public-task-card.is-incorrect {
    border-color: #fca5a5;
    background: #fff;
}

.public-task-card-link {
    display: grid;
    gap: 10px;
    padding: 18px;
    min-width: 0;
    max-width: 100%;
}

.public-task-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.public-task-card-number {
    font-weight: 800;
    color: var(--text);
}

.public-task-card-status {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    flex: 0 1 auto;
}

.public-task-card-status.is-correct {
    color: #166534;
}

.public-task-card-status.is-incorrect {
    color: #991b1b;
}

.public-task-card-text {
    color: var(--muted);
    line-height: 1.7;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.public-task-card-article.topic-article {
    font-size: 15px;
    line-height: 1.55;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.public-task-card-article.topic-article h1,
.public-task-card-article.topic-article h2,
.public-task-card-article.topic-article h3,
.public-task-card-article.topic-article h4 {
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 16px;
}

.public-task-card-article.topic-article p,
.public-task-card-article.topic-article ul,
.public-task-card-article.topic-article ol {
    margin-bottom: 8px;
}

.public-task-card-article.topic-article li {
    margin-bottom: 3px;
}

.public-task-card-article.topic-article img {
    max-width: 100%;
    height: auto;
    margin-top: 9px;
    margin-bottom: 9px;
}

.public-task-card-article.topic-article .ql-align-center img,
.public-task-card-article.topic-article .ql-align-right img,
.public-task-card-article.topic-article .ql-align-justify img,
.public-task-card-article.topic-article [style*="text-align: center"] img,
.public-task-card-article.topic-article [style*="text-align:center"] img,
.public-task-card-article.topic-article [style*="text-align: right"] img,
.public-task-card-article.topic-article [style*="text-align:right"] img,
.public-task-card-article.topic-article [style*="text-align: justify"] img,
.public-task-card-article.topic-article [style*="text-align:justify"] img {
    margin-top: 9px;
    margin-bottom: 9px;
}

.public-task-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.sandbox-task-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
}

.public-task-card-meta .sandbox-task-badges {
    width: 100%;
}

.public-task-card-meta .task-difficulty-tag {
    margin-left: 0;
}

.sandbox-inline-question-head-main .sandbox-task-badges {
    flex: 0 1 auto;
}

.sandbox-inline-question-head-main .task-difficulty-tag {
    margin-left: 0;
    flex-shrink: 0;
}

.public-task-card-actions {
    padding: 0 18px 18px;
    min-width: 0;
    max-width: 100%;
}

.public-task-card-actions-primary {
    padding-top: 0;
}

.public-task-card-actions form {
    margin: 0;
}

.sandbox-inline-answer-form {
    display: grid;
    gap: 12px;
}

.sandbox-inline-answer-grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.sandbox-inline-answer-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sandbox-inline-answer-feedback {
    display: grid;
    gap: 10px;
}

.sandbox-inline-answer-feedback .task-status-pill {
    min-height: 46px;
}

.sandbox-inline-question-list {
    display: grid;
    gap: 16px;
    padding: 0 18px 18px;
    min-width: 0;
    max-width: 100%;
}

.sandbox-inline-question-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    min-width: 0;
    max-width: 100%;
}

.sandbox-bundle-common-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: #fff;
    min-width: 0;
    max-width: 100%;
}

.public-task-card.is-pristine .sandbox-bundle-common-card {
    border: none;
    border-radius: 0;
}

.sandbox-inline-question-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sandbox-inline-question-head-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.sandbox-inline-question-head-main h3 {
    margin: 0;
}

.sandbox-inline-question-subtitle {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.sandbox-inline-question-head-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sandbox-inline-question-head h3 {
    margin: 0;
    font-size: 18px;
}

.sandbox-card-attachments {
    display: grid;
    gap: 12px;
}

.sandbox-card-attachments h3 {
    margin: 0;
    font-size: 16px;
}

.shared-bundle-question-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.task-shared-bundle-links {
    margin-top: 14px;
}

.shared-bundle-question-link {
    min-width: 54px;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    background: #fff;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.shared-bundle-question-link.is-correct {
    background: #fff;
    border-color: rgba(203, 213, 225, 0.9);
    color: #0f172a;
}

.shared-bundle-question-link.is-incorrect {
    background: #fff;
    border-color: rgba(203, 213, 225, 0.9);
    color: #0f172a;
}

.shared-bundle-admin-list {
    display: grid;
    gap: 14px;
}

.shared-bundle-admin-card {
    grid-template-columns: minmax(0, 1fr) auto;
}

.variant-group-list {
    display: grid;
    gap: 16px;
}

.variant-group-card {
    display: grid;
    gap: 14px;
}

.variant-group-head {
    margin-bottom: 16px;
}

.variant-group-head h3 {
    margin: 0;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 900;
}

.variant-task-full-list {
    display: grid;
    gap: 14px;
}

.variant-task-full-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.05);
}

.variant-task-full-card.is-correct {
    border-color: rgba(34, 197, 94, 0.28);
    background: #f0fdf4;
}

.variant-task-full-card.is-incorrect {
    border-color: rgba(239, 68, 68, 0.24);
    background: #fff7f7;
}

.variant-task-full-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.variant-task-full-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.variant-task-full-head h3 {
    margin: 0;
    color: var(--text);
    font-size: 22px;
    letter-spacing: -0.03em;
}

.variant-task-full-head .public-task-card-number {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
}

.variant-task-full-text {
    font-size: 16px;
    line-height: 1.7;
}

.variant-task-shared-condition {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.96));
}

.variant-task-shared-title,
.variant-task-question-title {
    color: #0f766e;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.variant-task-question-title {
    color: #64748b;
}

.variant-task-full-actions {
    display: flex;
    justify-content: flex-end;
}

.account-attempt-meta {
    margin-top: 8px;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.account-card {
    padding: 24px;
}

.account-section {
    margin-bottom: 22px;
}

.account-yandex-section {
    margin-top: -4px;
    margin-bottom: 24px;
}

.account-yandex-linked {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(203, 213, 225, 0.85);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.account-yandex-linked-muted {
    border-style: dashed;
}

.account-yandex-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fc3f1d;
    color: #ffffff;
    font-size: 19px;
    font-weight: 900;
    line-height: 1;
}

.account-yandex-info {
    min-width: 0;
}

.account-yandex-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.account-yandex-email {
    margin-top: 2px;
    max-width: 320px;
    overflow: hidden;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-yandex-linked .btn {
    margin-left: 4px;
    white-space: nowrap;
}

.account-stat-list {
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-weight: 600;
}

.class-card-list {
    display: grid;
    gap: 16px;
}

.teacher-class-tabs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.teacher-class-tabs-actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.teacher-class-create-open,
.teacher-class-reorder-open {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    white-space: nowrap;
}

.teacher-class-create-open svg,
.teacher-class-reorder-open svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.class-create-modal-dialog {
    width: min(480px, 100%);
}

.class-create-modal-form {
    display: grid;
    gap: 12px;
}

.class-create-modal-form label {
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.class-create-modal-form input[type="text"] {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
}

.class-create-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.class-create-modal-actions .btn {
    width: 100%;
}

.class-card {
    padding: 24px;
}

.class-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.class-card-title-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.class-card-title-row h3 {
    margin: 0;
}

.class-card-rename-toggle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 11px;
    opacity: 0.82;
}

.class-card-rename-toggle svg {
    width: 15px;
    height: 15px;
}

.class-card-rename-form {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.class-card-rename-form input {
    flex: 0 1 320px;
    min-width: 220px;
    max-width: 320px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.class-card-rename-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.class-card-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex-wrap: wrap;
    align-self: flex-start;
}

.class-card-head-actions form {
    margin: 0;
    display: inline-flex;
}

.class-card-head-actions .admin-badge {
    margin-bottom: 0;
}

.class-card-code-badge {
    background: #eff6ff;
    color: var(--primary-dark);
}

.teacher-class-section-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    margin: 0;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px;
    background: #f8fafc;
}

.teacher-class-section-tab {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.18s ease;
}

.teacher-class-section-tab:hover {
    color: var(--primary-dark);
    background: rgba(37, 99, 235, 0.08);
}

.teacher-class-section-tab.is-active {
    background: #fff;
    color: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.teacher-class-section-panel {
    min-width: 0;
}

.teacher-class-result-list {
    display: grid;
    gap: 10px;
}

.teacher-class-result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 14px 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    transition: 0.18s ease;
}

.teacher-class-result-card:hover {
    border-color: rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.teacher-class-result-kicker {
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}

.teacher-class-result-title {
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
}

.teacher-class-result-metrics {
    display: grid;
    justify-items: end;
    gap: 3px;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.teacher-class-result-metrics strong {
    color: var(--primary-dark);
    font-size: 14px;
}

.teacher-class-variant-result-card {
    color: var(--text);
}

.teacher-class-variant-links {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.teacher-class-variant-link {
    min-width: 118px;
    padding: 9px 12px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 14px;
    background: #eff6ff;
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 900;
}

.teacher-class-variant-link:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: #dbeafe;
}

.class-card-delete-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    align-self: center;
}

.class-card-delete-btn svg {
    width: 17px;
    height: 17px;
}

.class-reorder-modal-dialog {
    width: min(520px, 100%);
}

.class-reorder-list {
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
}

.class-reorder-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    background: #fff;
    cursor: grab;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    user-select: none;
}

.class-reorder-item.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.class-reorder-handle {
    color: #94a3b8;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    touch-action: none;
}

.class-reorder-name {
    min-width: 0;
    color: var(--text);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.class-reorder-code {
    max-width: 120px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.work-folder-reorder-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.work-folder-delete-btn {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.work-folder-delete-btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.work-folder-delete-form {
    display: none;
}

.class-reorder-actions {
    justify-content: flex-end;
    margin-top: 0;
}

.class-delete-modal-body {
    display: grid;
    gap: 8px;
    padding: 0 18px 18px;
}

.class-delete-modal-body p {
    margin: 0;
    color: #475569;
    font-weight: 700;
    line-height: 1.45;
}

.class-delete-modal-body strong {
    color: var(--text);
}

.class-delete-modal-actions {
    padding: 0 18px 18px;
    justify-content: flex-end;
}

.work-delete-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
}

.work-delete-modal-actions .btn {
    min-height: 40px;
}

.work-delete-modal-actions .btn.is-hidden {
    display: none;
}

.work-delete-modal-actions:has([data-work-delete-archive].is-hidden) {
    grid-template-columns: 1fr auto;
}

.class-work-class-card {
    padding: 20px;
}

.class-study-card,
.result-card {
    padding: 24px;
}

.class-work-result-hero,
.class-work-result-summary,
.class-work-result-details,
.class-work-result-table {
    margin-bottom: 20px;
}

.class-work-result-hero .hero-subtitle {
    margin-top: 8px;
}

.class-work-result-details {
    display: grid;
    gap: 16px;
}

.class-work-result-details h2 {
    margin: 0;
}

.class-work-result-details .account-stat-list {
    gap: 8px;
}

.class-work-result-details .variant-public-actions {
    margin-top: 0;
}

.class-work-result-table .section-head {
    margin-bottom: 14px;
}

.class-work-result-table .task-admin-table {
    border-radius: 0;
}



.class-work-result-task-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-dark);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.class-work-result-task-link:hover {
    color: var(--primary);
    text-decoration-thickness: 2px;
}

.class-work-code-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
}

.class-work-code-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.class-work-code-badge-button {
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.class-work-code-badge-button:hover {
    background: rgba(37, 99, 235, 0.18);
    color: #1e40af;
}

.code-solution-modal-actions .is-copied {
    border-color: rgba(22, 163, 74, 0.35);
    background: #dcfce7;
    color: #166534;
}

.class-study-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


.class-study-join-form {
    display: grid;
    gap: 8px;
    margin: 0;
}

.class-study-join-form label {
    margin: 0;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.class-study-join-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.class-study-toolbar-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
}

.class-study-filter-card {
    display: flex;
    align-items: end;
    gap: 14px;
    min-width: 0;
    margin: 0;
}

.class-study-filter-field {
    min-width: min(100%, 280px);
    display: grid;
    gap: 6px;
}

.class-study-filter-field span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.class-study-filter-field select {
    min-height: 42px;
    padding: 0 42px 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background-color: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 850;
}

.class-study-selected-class {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    color: #0f172a;
    font-weight: 850;
}

.class-study-selected-class.is-empty {
    color: #64748b;
}

.class-study-status-filter {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.class-study-status-filter button {
    min-height: 34px;
    padding: 0 13px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.18s ease;
}

.class-study-status-filter button:hover {
    color: var(--primary-dark);
    background: #eff6ff;
}

.class-study-status-filter button.is-active {
    background: #fff;
    color: var(--primary-dark);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.class-study-join-open {
    min-height: 42px;
    white-space: nowrap;
}

.class-study-join-modal-dialog {
    width: min(480px, 100%);
}

.class-study-join-modal-dialog .class-study-join-form {
    padding: 0 18px 18px;
}

.class-study-tabs-shell {
    display: grid;
    gap: 16px;
}

.class-study-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.class-study-tab {
    min-height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: 0.18s ease;
}

.class-study-tab span {
    min-width: 26px;
    min-height: 26px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
}

.class-study-tab:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.class-study-tab.is-active {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.class-study-tab.is-active span {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-dark);
}

.class-study-tab-panel.is-hidden {
    display: none;
}

.class-study-compact-card {
    padding: 18px;
    display: grid;
    gap: 12px;
}

.class-study-compact-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.class-study-compact-top h3 {
    margin: 6px 0 0;
    font-size: 18px;
}

.class-study-compact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.class-study-work-class-line {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(147, 197, 253, 0.6);
    border-radius: 12px;
    background: #eff6ff;
    color: var(--primary-dark);
}

.class-study-work-class-line span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.class-study-work-class-line strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 900;
}

.study-card-status {
    display: grid;
    justify-items: end;
    align-content: start;
    gap: 8px;
}

.study-card-status .admin-tag {
    white-space: nowrap;
}

.teacher-work-issue-status {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.teacher-work-issue-action form {
    margin: 0;
}

.class-study-compact-progress {
    margin-top: -2px;
}

.class-study-compact-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.class-study-compact-actions form {
    margin: 0;
}

.teacher-work-delete-form {
    margin-left: auto !important;
}

.teacher-work-duplicate-form {
    margin-left: auto !important;
}

.teacher-work-duplicate-form + .teacher-work-delete-form {
    margin-left: 0 !important;
}

.teacher-work-archive-form {
    margin-left: 0 !important;
}

.teacher-work-archive-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #d7e0f2;
    background: #f8fafc;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: 0.18s ease;
}

.teacher-work-archive-btn:hover {
    background: #eef2ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.teacher-work-archive-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.teacher-work-issue-toggle-form {
    margin-left: auto !important;
}

.teacher-work-archive-form + .teacher-work-delete-form {
    margin-left: 0 !important;
}

.teacher-work-edit-btn {
    min-width: 38px;
    padding-left: 10px;
    padding-right: 10px;
}

.teacher-work-edit-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.teacher-work-duplicate-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: 0.18s ease;
}

.teacher-work-duplicate-btn:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

.teacher-work-duplicate-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.teacher-work-share-wrap {
    position: relative;
    display: inline-flex;
}

.teacher-work-share-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 12px;
    background: #f0fdfa;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: 0.18s ease;
}

.teacher-work-share-btn:hover {
    border-color: rgba(20, 184, 166, 0.5);
    background: #ccfbf1;
    color: #0f766e;
}

.teacher-work-share-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.teacher-work-share-popover {
    position: fixed;
    z-index: 10000;
    width: min(360px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 54px rgba(15, 23, 42, 0.18);
}

.teacher-work-share-popover.is-hidden {
    display: none;
}

.teacher-work-share-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.teacher-work-share-popover p {
    margin: -4px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.teacher-work-share-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.teacher-work-share-link.is-hidden,
.teacher-work-share-popover .is-hidden {
    display: none;
}

.teacher-work-share-link input {
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
}

.work-form-share-wrap {
    display: block;
}

.teacher-work-share-action {
    width: 100%;
}

.work-form-share-popover {
    position: fixed;
}

.teacher-work-delete-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: 0.18s ease;
}

.teacher-work-delete-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
}

.teacher-work-delete-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.teacher-works-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.teacher-works-view-toggle {
    width: auto;
    justify-content: center;
    flex: 0 0 auto;
}

.teacher-works-view-toggle .variant-view-toggle-btn {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.teacher-works-view-pane.is-hidden {
    display: none;
}

.teacher-works-table-shell {
    overflow-x: auto;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

.teacher-works-table {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    table-layout: fixed;
}

.teacher-works-table th,
.teacher-works-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.teacher-works-table th:nth-child(1),
.teacher-works-table td:nth-child(1) {
    width: 24%;
    padding-left: 26px;
}

.teacher-works-table th:nth-child(2),
.teacher-works-table td:nth-child(2) {
    width: 12%;
}

.teacher-works-table th:nth-child(3),
.teacher-works-table td:nth-child(3) {
    width: 7%;
}

.teacher-works-table th:nth-child(4),
.teacher-works-table td:nth-child(4) {
    width: 15%;
}

.teacher-works-table th:nth-child(5),
.teacher-works-table td:nth-child(5) {
    width: 17%;
}

.teacher-works-table th:nth-child(6),
.teacher-works-table td:nth-child(6) {
    width: 25%;
}

.teacher-works-table th {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.teacher-works-table tbody tr:last-child td {
    border-bottom: 0;
}

.teacher-works-table tbody tr:hover {
    background: #f8fbff;
}

.teacher-works-table-title {
    min-width: 0;
}

.teacher-works-table-title a {
    display: inline-block;
    color: var(--text);
    font-weight: 900;
    text-decoration: none;
}

.teacher-works-table-title a:hover {
    color: var(--primary-dark);
}

.teacher-works-table-title span {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.class-reorder-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.class-reorder-controls .icon-action-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
}

.class-reorder-controls svg {
    width: 16px;
    height: 16px;
}

.class-reorder-delete-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 11px;
}

.class-reorder-delete-btn svg {
    width: 17px;
    height: 17px;
}

.teacher-works-table-title .teacher-works-table-created {
    margin-top: 3px;
    color: #94a3b8;
    font-size: 11px;
}

.teacher-works-table-tags,
.teacher-works-table-actions,
.teacher-works-table-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.teacher-works-table-tags {
    display: grid;
    gap: 5px;
}

.teacher-works-table-status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.teacher-works-table-status-meta:empty {
    display: none;
}

.teacher-works-table-status-meta .admin-tag {
    font-size: 10px;
}

.teacher-works-table-results {
    min-width: 0;
}

.teacher-works-table-results a {
    display: inline-grid;
    gap: 2px;
    width: 100%;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid rgba(191, 219, 254, 0.8);
    border-radius: 12px;
    background: #eff6ff;
    color: var(--primary-dark);
    text-decoration: none;
}

.teacher-works-table-results a:hover {
    border-color: #93c5fd;
    background: #dbeafe;
}

.teacher-works-table-results strong {
    font-size: 13px;
    font-weight: 900;
}

.teacher-works-table-results span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}

.teacher-works-table-folder-form select {
    width: 100%;
    min-height: 38px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    padding-left: 11px;
    padding-right: 30px !important;
    background-position: right 10px center;
}

.teacher-works-table-actions {
    min-width: 0;
    align-items: center;
    gap: 5px;
}

.teacher-works-table-actions form {
    margin: 0;
}

.teacher-works-action-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: min(780px, 100%);
    margin-left: auto;
}

.teacher-works-action-stack > .btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding-inline: 18px;
    white-space: nowrap;
}

.teacher-works-action-stack select {
    width: min(230px, 28vw);
}

.teacher-works-filter-form,
.teacher-folder-create-form {
    display: flex;
    align-items: end;
    gap: 10px;
    min-width: 0;
}

.teacher-works-filter-form-compact {
    width: min(360px, 100%);
    margin-left: auto;
}

.teacher-works-filter-inline {
    flex: 0 1 260px;
}

.teacher-works-filter-inline label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
}

.teacher-works-filter-inline label > span {
    color: #475569;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.teacher-works-filter-inline select {
    min-height: 48px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.teacher-folder-plus-tab {
    min-width: 54px;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
}

.teacher-folder-archive-tab {
    min-width: 70px;
    padding: 0 12px;
}

.teacher-folder-archive-tab svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.teacher-folder-icon {
    width: 28px;
    height: 22px;
    display: inline-block;
    border-radius: 6px 6px 7px 7px;
    background: #facc15;
    box-shadow: inset 0 -3px 0 rgba(180, 83, 9, 0.16);
    position: relative;
    flex: 0 0 auto;
}

.teacher-folder-icon::before {
    content: "";
    position: absolute;
    left: 3px;
    top: -5px;
    width: 12px;
    height: 7px;
    border-radius: 5px 5px 0 0;
    background: #fde68a;
}

.teacher-works-filter-form label,
.teacher-folder-create-form label {
    display: grid;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.teacher-works-filter-form select,
.teacher-folder-create-form input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 13px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.teacher-work-folder-move-form {
    margin: 0;
}

.teacher-work-folder-move-form label {
    display: grid;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.teacher-work-folder-move-form select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.work-public-link-toggle {
    width: fit-content;
    margin-bottom: 12px;
}

.public-work-link-box,
.public-work-card-link {
    display: grid;
    gap: 8px;
}

.public-work-link-box {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
}

.public-work-link-box > span {
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.public-work-link-box > div,
.public-work-card-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.public-work-link-box input,
.public-work-card-link input {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.public-work-start-card {
    max-width: 680px;
}

.public-work-start-form {
    margin-top: 18px;
}

.teacher-work-compact-card {
    gap: 14px;
}

.teacher-work-created-at {
    width: fit-content;
    margin-top: 7px;
    padding: 5px 9px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.teacher-work-compact-description {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.teacher-work-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.teacher-work-stat {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    display: grid;
    gap: 6px;
}

.teacher-work-stat span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.teacher-work-stat strong {
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.teacher-work-class-links {
    display: grid;
    gap: 10px;
}

.teacher-work-class-link {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #ffffff;
    display: grid;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    transition: 0.18s ease;
}

.teacher-work-class-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
}

.teacher-work-class-link-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.teacher-work-class-link-top strong {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text);
}

.teacher-work-class-link-top span {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
}

.teacher-work-class-link-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
}

.work-task-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 28px;
}

.work-task-picker-modal.is-hidden {
    display: none;
}

.work-task-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(6px);
}

.work-task-picker-dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: min(86vh, 860px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24);
}

.work-task-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.work-task-picker-head h2 {
    margin: 0;
    font-size: 22px;
}

.work-task-picker-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 14px;
}

.work-task-picker-body {
    min-height: 360px;
    overflow: auto;
}

.work-task-picker-scroll-top {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 3;
    width: 42px;
    height: 42px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-dark);
    font: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.work-task-picker-scroll-top:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.2);
}

.work-task-picker-body.is-loading {
    opacity: 0.72;
}

.work-task-picker-content {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.work-task-picker-top {
    display: grid;
    gap: 12px;
}

.work-task-picker-numbers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 6px;
}

.work-task-picker-number {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    padding: 7px 10px;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.work-task-picker-number:hover,
.work-task-picker-number.is-active {
    border-color: #93c5fd;
    background: #eff6ff;
    color: var(--primary-dark);
}

.work-task-picker-toolbar {
    display: flex;
    justify-content: flex-end;
}

.work-task-picker-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.work-task-picker-toolbar .work-task-picker-check {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
}

.work-task-picker-toolbar .work-task-picker-check input {
    width: 15px;
    height: 15px;
    margin: 0;
}

.work-task-picker-toolbar .work-task-picker-check span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.work-task-picker-toolbar select {
    height: 42px;
    min-height: 42px;
    padding: 0 34px 0 12px;
    border-radius: 10px;
    line-height: 42px;
}

.work-task-picker-list {
    display: grid;
    gap: 10px;
}

.work-task-picker-card {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.work-task-picker-card-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.work-task-picker-card-title {
    color: var(--text);
    font-weight: 800;
}

.work-task-picker-card-meta {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.work-task-picker-card-text {
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

.work-task-picker-card form {
    margin: 0;
    justify-self: start;
}

.work-task-picker-card .btn {
    min-width: 104px;
}

.work-task-picker-card > button[data-work-picker-client-button] {
    justify-self: start;
}

.work-task-picker-card .btn.is-selected {
    color: #166534;
    border-color: #86efac;
    background: #f0fdf4;
}

.work-task-picker-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 4px;
}

.work-task-picker-pagination a,
.work-task-picker-pagination span {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

body.has-modal-open {
    overflow: hidden;
}

.work-selected-task-table > thead > tr > th:first-child,
.work-selected-task-table > tbody > tr > td:first-child {
    width: 58px;
    text-align: center;
}

.work-task-order-controls {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.work-task-arrow-stack {
    display: grid;
    gap: 4px;
}

.work-task-drag-handle {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f8fafc;
    color: #64748b;
    font: inherit;
    font-weight: 900;
    line-height: 1;
    cursor: grab;
}

.work-task-drag-handle:active {
    cursor: grabbing;
}

.work-task-order-btn {
    width: 34px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.work-task-order-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.work-task-order-btn:hover {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.work-selected-task-table tr.is-dragging {
    opacity: 0.55;
    background: #eff6ff;
}

.work-selected-task-text {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.work-selected-task-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.work-selected-task-meta a {
    color: var(--primary-dark);
    text-decoration: none;
}

.work-selected-task-meta a:hover {
    text-decoration: underline;
}

.work-task-remove-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    color: #dc2626;
    border-color: #fecaca;
    background: #fff5f5;
}

.work-task-remove-icon:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fee2e2;
}

.work-task-remove-icon svg {
    width: 18px;
    height: 18px;
}

.work-selected-task-article {
    font-size: 14px;
    line-height: 1.6;
}

.work-selected-task-article img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 0;
}

.work-selected-task-article table {
    max-width: 100%;
}

.work-task-file-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.work-task-file-link {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.work-task-file-link:hover {
    border-color: #93c5fd;
    background: #dbeafe;
}

.work-settings-panel {
    display: grid;
    gap: 12px;
}

.work-side-sticky {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 20px;
    align-self: start;
}

.work-settings-panel .form-group {
    margin-bottom: 0;
}

.work-settings-panel textarea {
    min-height: 96px;
}

.work-settings-panel .selection-chip-inline {
    width: 100%;
    margin: 0;
}

.work-settings-panel label.selection-chip-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 9px 11px;
}

.work-settings-panel .selection-chip-inline input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
}

.work-settings-panel .selection-chip-inline span {
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}

.work-assignment-section .checkbox-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.work-assignment-section .selection-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 12px;
}

.work-assignment-section .checkbox-grid .selection-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: 100%;
}

.work-assignment-section .selection-chip input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
}

.work-assignment-section .selection-chip span {
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.work-assignment-section .checkbox-grid .selection-chip span {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.work-assignment-section .selection-chip small {
    margin-left: auto;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.work-assignment-section .checkbox-grid .selection-chip small {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.work-choice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work-result-visibility-options {
    display: grid;
    gap: 8px;
}

.work-result-visibility-options .selection-chip-inline {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
}

.work-form-layout-grid,
.work-form-layout-grid .topic-main-column,
.work-form-layout-grid .form-section,
.work-form-layout-grid .student-table-wrap,
.work-form-layout-grid .work-selected-task-table {
    min-width: 0;
    max-width: 100%;
}

.work-form-layout-grid .topic-side-column {
    position: static;
    align-self: start;
    height: fit-content;
}

.work-form-layout-grid .work-side-sticky {
    position: static;
}

.work-form-layout-grid .topic-side-column .admin-actions {
    display: grid;
    gap: 10px;
}

.work-form-layout-grid .topic-side-column .admin-actions form {
    margin: 0;
    width: 100%;
}

.work-form-layout-grid .topic-side-column .admin-actions .btn,
.work-form-layout-grid .topic-side-column .admin-actions button {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.work-form-layout-grid .student-table-wrap {
    overflow-x: auto;
}

.work-form-layout-grid .work-selected-task-table {
    table-layout: fixed;
}

.work-form-layout-grid .work-selected-task-table > thead > tr > th:nth-child(3),
.work-form-layout-grid .work-selected-task-table > tbody > tr > td:nth-child(3) {
    width: 58px;
    text-align: center;
}

.work-random-panel {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.work-random-panel.is-hidden {
    display: none;
}

.work-random-panel label {
    display: grid;
    grid-template-rows: 18px 42px;
    gap: 6px;
    min-width: 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.work-random-panel label > span {
    display: flex;
    align-items: center;
    min-height: 18px;
    line-height: 1;
}

.work-random-panel select,
.work-random-panel input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background-color: #fff;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.work-random-panel .btn {
    width: 100%;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
}

.work-random-add-wrap {
    position: relative;
    display: grid;
    grid-template-rows: 18px 42px;
    gap: 6px;
    min-height: 66px;
}

.work-random-add-spacer {
    display: block;
    min-height: 18px;
}

.work-random-add-wrap .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.work-random-added-label {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 11px;
    border-radius: 999px;
    background: #047857;
    color: #ecfdf5;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(4, 120, 87, 0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.work-random-added-label.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.teacher-work-class-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
}

.teacher-work-class-hero .admin-title {
    margin-bottom: 4px;
}

.teacher-work-result-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

.teacher-work-result-heading-row h2 {
    margin: 0;
}

.teacher-work-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
}

.teacher-work-summary-pill {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.teacher-work-summary-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.teacher-work-summary-value {
    color: var(--text);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.teacher-work-result-filter-form {
    display: flex !important;
    align-items: center;
    justify-content: flex-end !important;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 0;
    text-align: right;
}

.teacher-work-hide-absent-toggle {
    display: inline-flex !important;
    justify-self: end !important;
    width: fit-content;
    min-height: 38px;
    margin: 0 0 0 auto !important;
    padding: 8px 12px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 12px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.teacher-work-matrix-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.teacher-work-matrix-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}

.teacher-work-matrix-expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.teacher-work-matrix-expand-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.teacher-work-fullscreen-modal {
    padding: 16px;
}

.teacher-work-fullscreen-dialog {
    width: max-content;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    display: grid;
    grid-template-rows: auto minmax(0, auto);
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
}

.teacher-work-fullscreen-dialog.is-wide {
    width: calc(100vw - 32px);
}

.teacher-work-fullscreen-head {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.teacher-work-fullscreen-body {
    min-height: 0;
    max-width: 100%;
    max-height: calc(100vh - 132px);
    overflow: auto;
}

.teacher-work-fullscreen-body .teacher-work-matrix-wrap {
    max-width: 100%;
    max-height: calc(100vh - 132px);
    overflow: auto;
    padding-bottom: 0;
}

.teacher-work-fullscreen-body .teacher-work-matrix {
    min-width: max-content;
}

.teacher-work-matrix {
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    isolation: isolate;
    overflow: visible;
}

.teacher-work-matrix th,
.teacher-work-matrix td {
    text-align: center;
    min-width: 0;
    padding: 8px 6px;
}

.teacher-work-matrix-answer {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    width: 100%;
}

.teacher-work-matrix-answer-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-work-matrix-attempt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-work-matrix-attempt-badge.is-green {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.teacher-work-matrix-attempt-badge.is-orange {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.teacher-work-matrix-attempt-badge.is-plain {
    background: transparent;
    color: currentColor;
    padding: 0;
    border-radius: 0;
}

.teacher-work-matrix-badge-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    max-width: 100%;
}

.teacher-work-matrix-code-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-work-matrix-code-row {
    margin-top: 1px;
}

.teacher-work-matrix-code-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #2563eb);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
    pointer-events: none;
}

.teacher-work-matrix-code-corner {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #2563eb);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.08em;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2);
    pointer-events: none;
}

.teacher-work-matrix-col-student {
    width: 170px;
}

.teacher-work-matrix-col-task {
    width: 54px;
}

.teacher-work-matrix-col-solved {
    width: 64px;
}

.teacher-work-matrix-col-percent {
    width: 96px;
}

.teacher-work-matrix-col-ege-score {
    width: 84px;
}

.teacher-work-matrix-cell.is-homework-first {
    background: rgba(220, 252, 231, 0.72);
    color: #166534;
}

.teacher-work-matrix-cell.is-homework-late {
    background: rgba(255, 237, 213, 0.76);
    color: #9a3412;
}

.teacher-work-matrix-cell.is-homework-unsolved {
    background: rgba(254, 226, 226, 0.76);
    color: #991b1b;
}

.teacher-work-matrix th:first-child,
.teacher-work-matrix td:first-child {
    text-align: left;
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 10px 0 16px -14px rgba(15, 23, 42, 0.36);
}

.teacher-work-matrix thead th:first-child {
    z-index: 7;
    background: #f8fafc;
}

.teacher-work-matrix tfoot th:first-child {
    z-index: 6;
    background: #eff6ff;
}

.teacher-work-matrix .teacher-work-matrix-sticky-right {
    position: sticky;
    z-index: 5;
    background: #f8fafc;
}

.teacher-work-matrix thead .teacher-work-matrix-sticky-right {
    z-index: 7;
    background: #f8fafc;
}

.teacher-work-matrix tfoot .teacher-work-matrix-sticky-right {
    z-index: 6;
    background: #eff6ff;
}

.teacher-work-matrix .teacher-work-matrix-sticky-right-1 {
    right: 0;
    box-shadow: -10px 0 16px -14px rgba(15, 23, 42, 0.36);
}

.teacher-work-matrix .teacher-work-matrix-sticky-right-2 {
    right: 72px;
}

.teacher-work-matrix .teacher-work-matrix-sticky-right-3 {
    right: 144px;
}

.teacher-work-matrix .teacher-work-matrix-summary-solved {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.teacher-work-matrix .teacher-work-matrix-summary-percent {
    width: 96px;
    min-width: 96px;
    max-width: 96px;
}

.teacher-work-matrix .teacher-work-matrix-summary-ege-score {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
}

.teacher-work-matrix.is-work-result .teacher-work-matrix-summary-percent {
    right: 0;
    box-shadow: -10px 0 16px -14px rgba(15, 23, 42, 0.36);
}

.teacher-work-matrix.is-work-result .teacher-work-matrix-summary-solved {
    right: 96px;
}

.teacher-work-matrix.is-variant-result .teacher-work-matrix-summary-ege-score {
    right: 0;
    box-shadow: -10px 0 16px -14px rgba(15, 23, 42, 0.36);
}

.teacher-work-matrix.is-variant-result .teacher-work-matrix-summary-percent {
    right: 84px;
}

.teacher-work-matrix.is-variant-result .teacher-work-matrix-summary-solved {
    right: 180px;
}

.teacher-work-matrix-task-head a {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 3px;
    color: inherit;
    text-decoration: none;
}

.teacher-work-matrix-task-head span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 800;
}

.teacher-work-matrix-task-head small {
    display: block;
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.teacher-work-sort-btn {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.teacher-work-sort-btn-compact {
    gap: 6px;
}

.teacher-work-sort-indicator {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1;
}

.teacher-work-sort-btn:hover .teacher-work-sort-indicator {
    color: var(--primary-dark);
}

.teacher-work-matrix-student-cell strong {
    font-size: 13px;
    line-height: 1.25;
}

.teacher-work-student-history-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(37, 99, 235, 0.38);
}

.teacher-work-student-history-link:hover {
    color: var(--primary-dark);
    border-bottom-color: currentColor;
}

.teacher-work-matrix-student-cell small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.1;
}

.teacher-work-matrix-cell {
    position: relative;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teacher-work-matrix-cell.has-code-solution,
.teacher-work-matrix-cell[data-result-detail-cell="true"] {
    cursor: pointer;
}

.variant-history-hero {
    align-items: flex-start;
}

.variant-history-summary .summary-card {
    min-height: 118px;
}

.variant-history-date {
    font-size: 20px;
}

.variant-history-list {
    display: grid;
    gap: 18px;
}

.variant-history-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 32%),
        #fff;
    box-shadow: var(--shadow);
}

.variant-history-card.is-correct {
    border-width: 2px;
    border-color: rgba(34, 197, 94, 0.58);
}

.variant-history-card.is-incorrect {
    border-width: 2px;
    border-color: rgba(239, 68, 68, 0.5);
}

.variant-history-card-head,
.variant-history-final,
.variant-history-columns {
    display: grid;
    gap: 12px;
}

.variant-history-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.variant-history-task-link {
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
}

.variant-history-task-link:hover {
    color: var(--primary-dark);
}

.variant-history-ege {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.variant-history-score {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-dark);
    font-weight: 900;
}

.variant-history-final {
    margin-top: 16px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
}

.variant-history-final span,
.variant-history-code-meta {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.variant-history-final strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.variant-history-columns {
    margin-top: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
    align-items: start;
}

.variant-history-attempts,
.variant-history-code {
    display: grid;
    gap: 10px;
}

.variant-history-attempts h3,
.variant-history-code h3 {
    margin: 0;
    font-size: 15px;
}

.variant-history-attempts ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.variant-history-attempts li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.variant-history-attempts li.is-correct {
    border-color: rgba(34, 197, 94, 0.28);
    background: #f0fdf4;
}

.variant-history-attempts li.is-incorrect {
    border-color: rgba(239, 68, 68, 0.2);
    background: #fff7f7;
}

.variant-history-attempt-status {
    font-size: 11px;
    font-weight: 900;
}

.variant-history-attempt-answer {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.variant-history-attempts time {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.variant-history-empty {
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    color: #64748b;
    font-weight: 800;
}

.variant-history-code-pre {
    max-height: 340px;
    margin: 0;
    overflow: auto;
}

.teacher-work-matrix-cell.is-correct {
    background: #f0fdf4;
    color: #166534;
}

.teacher-work-matrix-cell.is-partial {
    background: #fff7ed;
    color: #9a3412;
}

.teacher-work-matrix-cell.is-incorrect {
    background: #fef2f2;
    color: #991b1b;
}

.teacher-work-matrix-cell.is-empty {
    color: #cbd5e1;
}

.teacher-variant-matrix-col-score {
    width: 58px;
}

.teacher-variant-matrix-col-status {
    width: 104px;
}

.teacher-work-matrix-summary-cell,
.teacher-work-matrix-footer-cell {
    font-size: 12px;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
}

.teacher-work-matrix tr.is-hover-row td,
.teacher-work-matrix tr.is-hover-row th {
    background: #fbfcfe;
}

.teacher-work-matrix td.is-hover-column,
.teacher-work-matrix th.is-hover-column {
    background: #f1f7ff;
    box-shadow: inset 1px 0 0 rgba(147, 197, 253, 0.45), inset -1px 0 0 rgba(147, 197, 253, 0.45);
}

.teacher-work-matrix td.is-hover-column.is-correct,
.teacher-work-matrix th.is-hover-column.is-correct {
    background: linear-gradient(180deg, #eefbf3, #e6f8ed);
}

.teacher-work-matrix td.is-hover-column.is-incorrect,
.teacher-work-matrix th.is-hover-column.is-incorrect {
    background: linear-gradient(180deg, #fff1f1, #fde8e8);
}

.teacher-work-matrix td.is-hover-cell,
.teacher-work-matrix th.is-hover-cell {
    background: #e9f3ff;
    box-shadow:
        inset 0 0 0 1px rgba(59, 130, 246, 0.35),
        0 0 0 2px rgba(255, 255, 255, 0.9);
}

.teacher-work-matrix td.is-hover-cell.is-correct,
.teacher-work-matrix th.is-hover-cell.is-correct {
    background: linear-gradient(180deg, #dcf8e6, #d4f3df);
    color: #14532d;
}

.teacher-work-matrix td.is-hover-cell.is-incorrect,
.teacher-work-matrix th.is-hover-cell.is-incorrect {
    background: linear-gradient(180deg, #ffe4e4, #ffdcdc);
    color: #7f1d1d;
}

.teacher-work-student-list {
    display: grid;
    gap: 16px;
}

.teacher-work-student-card {
    display: grid;
    gap: 14px;
}

.teacher-work-student-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.teacher-work-student-head h3 {
    margin-bottom: 4px;
}

.teacher-work-student-head p {
    margin: 0;
    color: var(--muted);
}

.teacher-work-student-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
}

.teacher-work-task-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 8px;
}

.teacher-work-task-grid-cell {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
}

.teacher-work-task-grid-cell.is-correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.teacher-work-task-grid-cell.is-incorrect {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #991b1b;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.selection-chip {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
}

.selection-chip input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0 0 6px;
}

.selection-chip span {
    font-weight: 800;
    color: var(--text);
}

.selection-chip small {
    color: var(--muted);
    font-size: 13px;
}

.selection-chip-inline {
    width: 100%;
}

.work-count-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.work-count-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.work-count-card span {
    font-weight: 800;
    color: var(--text);
}

.number-chip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.number-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    font-weight: 800;
    color: #334155;
}

.number-chip:hover {
    border-color: #93c5fd;
    color: var(--primary-dark);
    background: #f8fbff;
}

.number-chip.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.sandbox-number-chip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sandbox-work-picker {
    display: grid;
    gap: 10px;
}

.sandbox-display-form {
    display: grid;
    gap: 10px;
}

.sandbox-display-field {
    display: grid;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.sandbox-display-field span {
    display: block;
}

.sandbox-display-form select {
    width: 100%;
    min-width: 0;
}

.sandbox-pagination-panel {
    display: grid;
    gap: 10px;
}

.sandbox-pagination-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.sandbox-pagination-meta strong {
    font-size: 22px;
    line-height: 1;
    color: var(--text);
}

.sandbox-pagination-meta span {
    font-size: 13px;
    color: var(--muted);
}

.sandbox-pagination-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sandbox-pagination-actions .btn {
    min-width: 0;
}

.sandbox-pagination-note {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.45;
}

.sandbox-results-footer {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    display: grid;
    gap: 14px;
}

.sandbox-results-footer-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sandbox-results-footer-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.sandbox-results-footer-range {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
}

.sandbox-results-footer-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.sandbox-results-footer-page {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.95);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.98));
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
}

.sandbox-pager-nav {
    min-height: 44px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    transition: 0.18s ease;
}

.sandbox-pager-nav:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.sandbox-pager-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sandbox-pager-link,
.sandbox-pager-ellipsis {
    min-width: 42px;
    min-height: 42px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
}

.sandbox-pager-link {
    border: 1px solid rgba(203, 213, 225, 0.95);
    background: #fff;
    color: #334155;
    transition: 0.18s ease;
}

.sandbox-pager-link:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.sandbox-pager-link.is-current {
    border-color: #93c5fd;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.95), rgba(219, 234, 254, 0.98));
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.sandbox-pager-ellipsis {
    color: #94a3b8;
}

.sandbox-results-footer-page.is-single {
    width: fit-content;
    max-width: 100%;
    color: var(--muted);
    border-color: var(--line);
    background: #f8fafc;
}

.sandbox-jump-form {
    display: grid;
    gap: 10px;
}

.sandbox-jump-form input[type="number"]::-webkit-outer-spin-button,
.sandbox-jump-form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sandbox-jump-form input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sandbox-work-panel {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #f8fafc;
}

.assignment-progress {
    display: grid;
    gap: 10px;
}

.assignment-progress-bar {
    height: 12px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.assignment-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.assignment-progress-meta {
    color: var(--muted);
    font-weight: 700;
}

.student-table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.student-table-wrap .task-admin-table {
    min-width: 720px;
}

.teacher-student-attempts-wrap .teacher-student-attempts-table {
    table-layout: fixed;
    min-width: 720px;
}

.teacher-student-attempts-task-col {
    width: 28%;
}

.teacher-student-attempts-source-col {
    width: 112px;
}

.teacher-student-attempts-result-col {
    width: 112px;
}

.teacher-student-attempts-answer-col {
    width: 18%;
}

.teacher-student-attempts-code-col {
    width: 76px;
}

.teacher-student-attempts-date-col {
    width: 150px;
}

.teacher-student-attempts-table th,
.teacher-student-attempts-table td {
    overflow-wrap: anywhere;
}

.teacher-student-attempts-date,
.teacher-student-attempts-result {
    white-space: nowrap;
}

.teacher-student-attempts-answer {
    max-width: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.teacher-work-matrix-wrap .teacher-work-matrix {
    min-width: 760px;
}

.answer-builder-panel {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fafc;
}

.answer-grid-builder,
.student-answer-grid {
    display: grid;
    gap: 10px;
}

.answer-grid-builder {
    grid-template-columns: repeat(1, minmax(110px, 1fr));
}

.answer-grid-input,
.student-answer-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.answer-grid-input:focus,
.student-answer-input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.student-answer-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.student-answer-input.is-correct {
    border-color: #4ade80;
    background: #f0fdf4;
    color: #166534;
}

.student-answer-input.is-late-correct {
    border-color: #fb923c;
    background: #fff7ed;
    color: #c2410c;
}

.student-answer-input.is-incorrect {
    border-color: #f87171;
    background: #fef2f2;
    color: #991b1b;
}

[data-answer-privacy-form="true"][data-answer-result="saved"] .student-answer-input:not(.is-correct):not(.is-late-correct):not(.is-incorrect) {
    border-color: #cbd5e1;
    background: #f1f5f9;
    color: #334155;
}

.answer-clear-field {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 6px;
    align-items: center;
}

.answer-clear-button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(248, 113, 113, 0.36);
    border-radius: 12px;
    background: #fff7f7;
    color: #dc2626;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(220, 38, 38, 0.08);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.answer-clear-button:hover {
    border-color: rgba(220, 38, 38, 0.48);
    background: #fef2f2;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.12);
    transform: translateY(-1px);
}

.answer-clear-button:focus-visible {
    outline: 2px solid rgba(248, 113, 113, 0.38);
    outline-offset: 2px;
}

.answer-clear-button svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.answer-clear-button.is-hidden {
    display: none;
}

[data-answer-submit="true"].is-hidden {
    display: none;
}

.answer-privacy-row.has-multi-row-answer {
    align-items: flex-start;
}

.answer-privacy-row.has-multi-row-answer .answer-privacy-toggle {
    margin-top: 4px;
}

.answer-privacy-row.has-multi-row-answer .answer-clear-form-button {
    margin-top: 50px;
    margin-left: -48px;
}

[data-answer-privacy-form="true"][data-answer-result="saved"] .answer-clear-button {
    border-color: rgba(148, 163, 184, 0.42);
    background: #f8fafc;
    color: #64748b;
    box-shadow: 0 8px 18px rgba(100, 116, 139, 0.08);
}

[data-answer-privacy-form="true"][data-answer-result="saved"] .answer-clear-button:hover {
    border-color: rgba(100, 116, 139, 0.58);
    background: #f1f5f9;
    box-shadow: 0 12px 24px rgba(100, 116, 139, 0.12);
}

.answer-privacy-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 999px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #166534;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(34, 197, 94, 0.12);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.answer-privacy-toggle:hover {
    color: #14532d;
    border-color: rgba(34, 197, 94, 0.32);
    box-shadow: 0 14px 28px rgba(34, 197, 94, 0.18);
    transform: translateY(-1px);
}

.answer-privacy-toggle:focus-visible {
    outline: 2px solid rgba(34, 197, 94, 0.34);
    outline-offset: 2px;
}

[data-answer-privacy-form="true"][data-answer-result="saved"] .answer-privacy-toggle {
    border-color: rgba(148, 163, 184, 0.38);
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    color: #475569;
    box-shadow: 0 10px 24px rgba(100, 116, 139, 0.12);
}

[data-answer-privacy-form="true"][data-answer-result="saved"] .answer-privacy-toggle:hover {
    color: #334155;
    border-color: rgba(100, 116, 139, 0.52);
    box-shadow: 0 14px 28px rgba(100, 116, 139, 0.16);
}

[data-answer-privacy-form="true"][data-answer-result="saved"] .answer-privacy-toggle:focus-visible {
    outline-color: rgba(100, 116, 139, 0.36);
}

.student-answer-input.is-late-correct + .answer-privacy-toggle,
.answer-privacy-row:has(.student-answer-input.is-late-correct) .answer-privacy-toggle {
    border-color: rgba(251, 146, 60, 0.38);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c;
    box-shadow: 0 10px 24px rgba(249, 115, 22, 0.14);
}

.answer-privacy-row:has(.student-answer-input.is-late-correct) .answer-privacy-toggle:hover {
    color: #9a3412;
    border-color: rgba(251, 146, 60, 0.52);
    box-shadow: 0 14px 28px rgba(249, 115, 22, 0.2);
}

.answer-privacy-row:has(.student-answer-input.is-late-correct) .answer-privacy-toggle:focus-visible {
    outline-color: rgba(251, 146, 60, 0.42);
}

.answer-privacy-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.answer-privacy-toggle-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.answer-privacy-toggle-icon-show {
    display: none;
}

.answer-privacy-toggle.is-revealed .answer-privacy-toggle-icon-show {
    display: inline-flex;
}

.answer-privacy-toggle.is-revealed .answer-privacy-toggle-icon-hide {
    display: none;
}

[data-answer-privacy-form="true"].is-answer-hidden .student-answer-input {
    color: transparent;
    text-shadow: 0 0 0 transparent;
    caret-color: transparent;
}

@media (max-width: 640px) {
    .answer-privacy-row {
        align-items: flex-start;
    }

    .answer-privacy-toggle {
        margin-top: 8px;
    }
}

.account-topic-table th:first-child,
.account-topic-table td:first-child {
    font-weight: 800;
}

.account-topic-table td a {
    color: inherit;
    text-decoration: none;
}

.account-topic-table td a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.account-topic-table-compact {
    font-size: 14px;
}

.teacher-class-topic-detail-table th,
.teacher-class-topic-detail-table td {
    text-align: center;
    vertical-align: middle;
}

.teacher-class-topic-detail-table th:first-child,
.teacher-class-topic-detail-table td:first-child {
    text-align: left;
}

.topic-stat-row.is-correct td {
    background: rgba(220, 252, 231, 0.55);
}

.topic-stat-row.is-partial td {
    background: rgba(255, 237, 213, 0.72);
}

.topic-stat-row.is-incorrect td {
    background: rgba(254, 226, 226, 0.55);
}

.sandbox-mobile-answer-card,
.sandbox-mobile-quick-nav-card {
    display: none;
}

.class-topic-stats {
    margin-bottom: 18px;
}

.class-topic-stats h4 {
    margin-bottom: 12px;
}

.student-detail-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.student-detail-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
}

.student-detail-card summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    font-weight: 700;
}

.student-detail-card summary::-webkit-details-marker {
    display: none;
}

.student-detail-card[open] summary {
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.student-detail-meta {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.student-detail-card .student-table-wrap {
    padding: 0 18px 18px;
}

.teacher-class-students-table th,
.teacher-class-students-table td {
    text-align: center;
    vertical-align: middle;
    padding-top: 9px;
    padding-bottom: 9px;
}

.teacher-class-students-table th .teacher-work-sort-btn {
    position: relative;
    justify-content: center;
    gap: 0;
    padding-right: 16px;
}

.teacher-class-students-table th .teacher-work-sort-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.teacher-class-students-table th:last-child,
.teacher-class-students-table td:last-child {
    text-align: right;
}

.teacher-class-actions-col {
    width: 116px;
    min-width: 116px;
}

.teacher-class-student-actions-cell {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

.teacher-class-student-name-cell {
    white-space: nowrap;
    font-weight: 800;
    text-align: left !important;
}

.teacher-class-student-link {
    color: inherit;
    text-decoration: none;
}

.teacher-class-student-link:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.teacher-class-topic-grid-cell {
    min-width: 280px;
}

.teacher-class-topic-grid {
    display: grid;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 4px;
    min-width: 260px;
}

.teacher-class-topic-chip {
    min-width: 0;
    padding: 4px 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: #475569;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    transition: 0.18s ease;
}

.teacher-class-topic-chip:hover {
    border-color: #93c5fd;
    color: var(--primary-dark);
    background: #f8fbff;
}

.teacher-class-topic-chip.is-correct {
    background: rgba(220, 252, 231, 0.72);
    border-color: rgba(74, 222, 128, 0.55);
    color: #166534;
}

.teacher-class-topic-chip.is-partial {
    background: linear-gradient(135deg, #fff3db, #fde7bf);
    border-color: #f6c86b;
    color: #9a3412;
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}

.teacher-class-topic-chip.is-incorrect {
    background: rgba(254, 226, 226, 0.7);
    border-color: rgba(248, 113, 113, 0.42);
    color: #991b1b;
}

.teacher-class-student-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.teacher-class-student-actions-cell .teacher-class-student-actions {
    padding: 0;
}

.teacher-class-student-actions-cell .teacher-class-student-actions form {
    display: inline-flex;
}

.teacher-class-student-actions-cell .icon-action-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
}

.teacher-class-student-actions-cell .icon-action-btn svg {
    width: 18px;
    height: 18px;
}

.teacher-class-topic-overview {
    margin-top: 16px;
    display: grid;
    gap: 12px;
}

.teacher-class-topic-overview-head {
    margin-bottom: 0;
}

.teacher-class-topic-overview-description {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
}

.teacher-class-topic-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.teacher-class-topic-overview-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.teacher-class-topic-overview-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.teacher-class-topic-overview-card.is-correct {
    background: rgba(220, 252, 231, 0.58);
    border-color: rgba(74, 222, 128, 0.42);
}

.teacher-class-topic-overview-card.is-partial {
    background: linear-gradient(135deg, #fff4de, #fde6bd);
    border-color: rgba(245, 158, 11, 0.35);
}

.teacher-class-topic-overview-card.is-incorrect {
    background: rgba(254, 226, 226, 0.6);
    border-color: rgba(248, 113, 113, 0.35);
}

.teacher-class-topic-overview-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.teacher-class-topic-overview-number {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.teacher-class-topic-overview-accuracy {
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-dark);
}

.teacher-class-topic-overview-title {
    min-height: 34px;
    font-size: 12px;
    line-height: 1.35;
    color: #475569;
}

.teacher-class-topic-overview-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.teacher-class-topic-overview-metrics div {
    display: grid;
    gap: 2px;
}

.teacher-class-topic-overview-metrics span {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.teacher-class-topic-overview-metrics strong {
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
}


.teacher-student-topic-strip {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
}

.attempt-result-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.attempt-result-tag.is-correct {
    background: rgba(220, 252, 231, 0.9);
    color: #166534;
}

.attempt-result-tag.is-incorrect {
    background: rgba(254, 226, 226, 0.9);
    color: #991b1b;
}

.topic-picker-card {
    padding: 24px;
    margin-bottom: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.topic-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 10px;
}

.topic-picker-btn {
    padding: 14px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: #334155;
    font-weight: 800;
    cursor: pointer;
    transition: 0.18s ease;
}

.topic-picker-btn:hover {
    border-color: #93c5fd;
    background: #f8fbff;
    color: var(--primary-dark);
}

.topic-picker-btn.is-active {
    border-color: #93c5fd;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.admin-topic-panel.is-hidden {
    display: none;
}

.sort-help-text {
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.sortable-task-list {
    display: grid;
    gap: 12px;
}

.sortable-task-card {
    display: grid;
    gap: 14px;
    align-items: stretch;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: 0.18s ease;
}

.sortable-task-card.has-handle-card {
    grid-template-columns: auto minmax(0, 1fr) 128px;
}

.sortable-task-card.no-handle-card {
    grid-template-columns: minmax(0, 1fr) 128px;
}

.sortable-task-card .table-actions {
    justify-self: end;
}

.sortable-task-control {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
}

.sortable-task-card.is-dragging {
    opacity: 0.55;
    border-style: dashed;
}

.sortable-task-handle {
    width: 38px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 18px;
    cursor: grab;
    user-select: none;
}

.sortable-task-handle:active {
    cursor: grabbing;
}

.sortable-task-content {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
}

.sortable-task-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0;
}

.sortable-task-title {
    font-weight: 800;
    color: var(--text);
}

.sortable-task-card .table-actions {
    display: grid;
    align-content: start;
    justify-items: stretch;
    gap: 8px;
    width: 44px;
    min-width: 44px;
}

.sortable-task-card .table-actions .icon-action-btn,
.sortable-task-card .table-actions form,
.sortable-task-card .table-actions form .icon-action-btn {
    width: 100%;
}

.sortable-task-order {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.sortable-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 14px;
}

.sortable-task-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.kompege-queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kompege-queue-head p {
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 700;
}

.kompege-candidate-list {
    display: grid;
    gap: 12px;
}

.kompege-candidate-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
}

.kompege-candidate-main {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.kompege-candidate-card.is-removing {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.kompege-import-notice {
    border-color: rgba(37, 99, 235, 0.22);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96));
}

.kompege-import-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #92400e;
    font-weight: 700;
    font-size: 13px;
}

.kompege-import-warnings span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.18);
}

.kompege-import-match-note {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 14px;
    background: rgba(220, 252, 231, 0.72);
    color: #166534;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.45;
}

.kompege-check-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(6px);
}

.kompege-check-modal.is-visible {
    display: flex;
}

.kompege-check-dialog {
    width: min(420px, 100%);
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
    text-align: center;
}

.kompege-check-dialog h2 {
    margin: 14px 0 8px;
    font-size: 22px;
}

.kompege-check-dialog p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.kompege-check-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto;
    border-radius: 50%;
    border: 4px solid rgba(37, 99, 235, 0.14);
    border-top-color: #2563eb;
    animation: kompege-spin 0.75s linear infinite;
}

.kompege-check-modal:not(.is-loading) .kompege-check-spinner {
    animation: none;
    border-color: rgba(16, 185, 129, 0.22);
    border-top-color: #10b981;
}

.kompege-check-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

@keyframes kompege-spin {
    to {
        transform: rotate(360deg);
    }
}

.kompege-review-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: stretch;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(7px);
}

.kompege-review-modal.is-visible {
    display: flex;
}

.kompege-review-dialog {
    width: min(1180px, 100%);
    min-height: 0;
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.26);
}

.kompege-review-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

.kompege-review-dialog iframe {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    background: #f8fafc;
}

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

.kompege-variant-import-card {
    margin-bottom: 18px;
    padding: 20px;
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
    align-items: end;
    gap: 20px;
}

.kompege-variant-import-card h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.kompege-variant-import-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.kompege-variant-import-form {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1fr) minmax(160px, 0.9fr);
    align-items: end;
    gap: 12px;
}

.kompege-variant-import-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.kompege-variant-import-form input,
.kompege-variant-import-form select {
    width: 100%;
    height: 44px;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.kompege-variant-import-form button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: end;
    max-width: 100%;
}

.kompege-variant-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
}

.kompege-variant-modal.is-hidden {
    display: none;
}

.kompege-variant-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(8px);
}

.kompege-variant-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, 100%);
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24);
}

.kompege-variant-modal-dialog-sm {
    width: min(460px, 100%);
}

.unsaved-answer-modal-dialog {
    width: min(460px, calc(100vw - 32px));
    padding: 18px;
    border-radius: 20px;
}

.unsaved-answer-modal-dialog .kompege-variant-modal-head {
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.unsaved-answer-modal-dialog .kompege-variant-modal-head h2 {
    margin-bottom: 4px;
    font-size: 19px;
    line-height: 1.2;
}

.unsaved-answer-modal-dialog .kompege-variant-modal-head p {
    max-width: 340px;
    font-size: 13px;
    line-height: 1.4;
}

.kompege-variant-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.kompege-variant-modal-head h2 {
    margin: 0 0 8px;
    font-size: 24px;
}

.kompege-variant-modal-head p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.code-solution-modal-dialog,
.teacher-code-modal-dialog {
    width: min(1180px, calc(100vw - 32px));
}

.teacher-code-modal-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.teacher-code-modal-dialog .kompege-variant-modal-head {
    align-items: center;
    margin-bottom: 12px;
}

.teacher-code-modal-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.teacher-code-modal-head-actions .btn {
    min-height: 38px;
    padding: 8px 14px;
}

.code-solution-modal-dialog {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}

.code-solution-modal-head {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 6px;
    min-height: 36px;
}

.code-solution-modal-head h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #0f172a;
}

.code-solution-modal-body {
    display: grid;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.code-solution-editor-panel,
.code-solution-preview-panel {
    display: grid;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.code-solution-editor-label,
.code-solution-preview-head {
    font-size: 14px;
    font-weight: 800;
    color: #334155;
}

.code-solution-editor-shell {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    height: min(56vh, 520px);
    min-height: 240px;
    border: 1px solid rgba(203, 213, 225, 0.9);
    border-radius: 8px;
    background: #2b2b2b;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.code-solution-line-numbers {
    padding: 16px 10px 16px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    background: #313335;
    color: #858b93;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    text-align: right;
    white-space: pre;
    user-select: none;
    overflow: hidden;
}

.code-solution-code-layer {
    position: relative;
    min-height: 0;
    min-width: 0;
}

.code-solution-editor-highlight,
.code-solution-input {
    position: absolute;
    inset: 0;
    min-height: 0;
    width: 100%;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 1.6;
    tab-size: 4;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-solution-editor-highlight {
    margin: 0;
    color: #e2e8f0;
    overflow: hidden;
    pointer-events: none;
}

.code-solution-editor-highlight code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    white-space: inherit;
}

.code-solution-editor-highlight .hljs {
    color: #d4d4d4;
    background: transparent;
}

.code-solution-editor-highlight .hljs-comment,
.code-solution-editor-highlight .hljs-quote {
    color: #7a869a;
    font-style: italic;
}

.code-solution-editor-highlight .hljs-keyword,
.code-solution-editor-highlight .hljs-selector-tag,
.code-solution-editor-highlight .hljs-literal {
    color: #cc7832;
    font-weight: 600;
}

.code-solution-editor-highlight .hljs-string,
.code-solution-editor-highlight .hljs-doctag,
.code-solution-editor-highlight .hljs-regexp {
    color: #6aab73;
}

.code-solution-editor-highlight .hljs-number {
    color: #6897bb;
}

.code-solution-editor-highlight .hljs-built_in,
.code-solution-editor-highlight .hljs-type {
    color: #a9b7c6;
}

.code-solution-editor-highlight .hljs-title.function_,
.code-solution-editor-highlight .hljs-title.function,
.code-solution-editor-highlight .hljs-function .hljs-title {
    color: #ffc66d;
}

.code-solution-editor-highlight .hljs-class .hljs-title,
.code-solution-editor-highlight .hljs-title.class_ {
    color: #bbb529;
}

.code-solution-editor-highlight .hljs-params,
.code-solution-editor-highlight .hljs-variable,
.code-solution-editor-highlight .hljs-property,
.code-solution-editor-highlight .hljs-punctuation {
    color: #d4d4d4;
}

.code-solution-editor-highlight .hljs-operator {
    color: #a9b7c6;
}

.code-solution-editor-highlight .hljs-meta {
    color: #bbb529;
}

.code-solution-input {
    display: block;
    color: #e2e8f0;
    resize: none;
    outline: none;
    overflow: auto;
}

.code-solution-input.is-highlighted-editor {
    color: transparent;
    caret-color: #e2e8f0;
    -webkit-text-fill-color: transparent;
}

.code-solution-input::selection {
    background: rgba(96, 165, 250, 0.35);
    -webkit-text-fill-color: transparent;
}

.code-solution-input:focus {
    box-shadow: inset 0 0 0 1px #4b6eaf;
}

.code-solution-preview-pre,
.task-code-history-pre {
    margin: 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: #0f172a;
    color: #e2e8f0;
    overflow: auto;
}

.teacher-code-modal-dialog .code-solution-preview-pre {
    max-height: none;
    min-height: 0;
    overflow: auto;
}

.teacher-code-modal-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    padding-right: 2px;
}

.teacher-result-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    min-height: 0;
}

.teacher-result-detail-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}

.teacher-result-detail-code-panel {
    position: relative;
    padding: 12px;
}

.teacher-result-detail-code-panel h3 {
    position: static;
}

.teacher-result-detail-panel + .teacher-result-detail-panel {
    margin-top: 12px;
}

.teacher-result-detail-grid .teacher-result-detail-panel + .teacher-result-detail-panel {
    margin-top: 0;
}

.teacher-result-detail-panel h3 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}

.teacher-result-detail-task {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.55;
}

.teacher-result-detail-task img {
    max-width: 100%;
    height: auto;
}

.teacher-result-detail-task .teacher-result-table-wrap {
    max-width: 100%;
    margin: 14px 0;
    overflow-x: auto;
}

.teacher-result-detail-task table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.teacher-result-detail-task th,
.teacher-result-detail-task td {
    border: 1px solid rgba(203, 213, 225, 0.9);
    padding: 10px 12px;
    text-align: center;
    vertical-align: middle;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.35;
}

.teacher-result-detail-task th {
    background: #f8fafc;
    font-weight: 800;
}

.teacher-result-detail-task h4 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
}

.teacher-result-detail-common {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
}

.teacher-result-detail-question {
    padding-top: 2px;
}

.teacher-result-attachments {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.24);
}

.teacher-result-attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.teacher-result-attachment-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(147, 197, 253, 0.8);
    border-radius: 12px;
    background: #eff6ff;
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

.teacher-result-attachment-link:hover {
    border-color: #60a5fa;
    background: #dbeafe;
}

.teacher-result-detail-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.teacher-result-detail-list div {
    display: grid;
    gap: 2px;
}

.teacher-result-detail-list dt {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.teacher-result-detail-list dd {
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.teacher-result-code-panel {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.teacher-result-code-panel .code-solution-preview-head {
    display: none;
}

.teacher-result-code-panel .code-solution-preview-pre {
    height: 100%;
    min-height: 0;
    max-height: none;
    padding-bottom: 58px;
}

.teacher-code-copy-float {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24);
    transition: 0.18s ease;
}

.teacher-code-copy-float:hover {
    background: #fff;
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.teacher-code-copy-float svg {
    width: 18px;
    height: 18px;
}

.teacher-code-copy-float.is-copied {
    background: #dcfce7;
    border-color: rgba(34, 197, 94, 0.5);
    color: #166534;
}

.teacher-result-attempt-list {
    display: grid;
    gap: 8px;
    max-height: 168px;
    overflow: auto;
}

.teacher-result-attempt-item {
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f8fafc;
}

.teacher-result-attempt-item.is-correct {
    border-left-color: #16a34a;
}

.teacher-result-attempt-item.is-incorrect {
    border-left-color: #dc2626;
}

.teacher-result-attempt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.teacher-result-attempt-head strong {
    color: #111827;
    font-size: 12px;
}

.teacher-result-attempt-head span {
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

.teacher-result-attempt-item p {
    margin: 0;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.teacher-result-attempt-item small,
.teacher-result-attempt-empty {
    color: #64748b;
    font-size: 12px;
}

.code-solution-preview-pre code,
.task-code-history-pre code {
    font-family: "JetBrains Mono", monospace;
    font-size: 14px;
    line-height: 1.6;
}

.code-solution-preview-pre .hljs,
.task-code-history-pre .hljs {
    color: #d4d4d4;
    background: transparent;
}

.code-solution-preview-pre .hljs-comment,
.code-solution-preview-pre .hljs-quote,
.task-code-history-pre .hljs-comment,
.task-code-history-pre .hljs-quote {
    color: #7a869a;
    font-style: italic;
}

.code-solution-preview-pre .hljs-keyword,
.code-solution-preview-pre .hljs-selector-tag,
.code-solution-preview-pre .hljs-literal,
.task-code-history-pre .hljs-keyword,
.task-code-history-pre .hljs-selector-tag,
.task-code-history-pre .hljs-literal {
    color: #cc7832;
    font-weight: 600;
}

.code-solution-preview-pre .hljs-string,
.code-solution-preview-pre .hljs-doctag,
.code-solution-preview-pre .hljs-regexp,
.task-code-history-pre .hljs-string,
.task-code-history-pre .hljs-doctag,
.task-code-history-pre .hljs-regexp {
    color: #6aab73;
}

.code-solution-preview-pre .hljs-number,
.task-code-history-pre .hljs-number {
    color: #6897bb;
}

.code-solution-preview-pre .hljs-built_in,
.code-solution-preview-pre .hljs-type,
.task-code-history-pre .hljs-built_in,
.task-code-history-pre .hljs-type {
    color: #a9b7c6;
}

.code-solution-preview-pre .hljs-title.function_,
.code-solution-preview-pre .hljs-title.function,
.code-solution-preview-pre .hljs-function .hljs-title,
.task-code-history-pre .hljs-title.function_,
.task-code-history-pre .hljs-title.function,
.task-code-history-pre .hljs-function .hljs-title {
    color: #ffc66d;
}

.code-solution-preview-pre .hljs-class .hljs-title,
.code-solution-preview-pre .hljs-title.class_,
.task-code-history-pre .hljs-class .hljs-title,
.task-code-history-pre .hljs-title.class_ {
    color: #bbb529;
}

.code-solution-preview-pre .hljs-params,
.code-solution-preview-pre .hljs-variable,
.code-solution-preview-pre .hljs-property,
.code-solution-preview-pre .hljs-punctuation,
.task-code-history-pre .hljs-params,
.task-code-history-pre .hljs-variable,
.task-code-history-pre .hljs-property,
.task-code-history-pre .hljs-punctuation {
    color: #d4d4d4;
}

.code-solution-preview-pre .hljs-operator,
.task-code-history-pre .hljs-operator {
    color: #a9b7c6;
}

.code-solution-preview-pre .hljs-meta,
.task-code-history-pre .hljs-meta {
    color: #bbb529;
}

.code-solution-modal-actions {
    margin-top: 18px;
}

.task-code-history-list {
    display: grid;
    gap: 18px;
}

.task-code-history-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 20px;
    background: #fff;
}

.task-code-history-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: 13px;
}

.task-code-history-meta strong {
    color: #0f172a;
}

.variant-sticky-panel {
    position: sticky;
    top: 92px;
}

.admin-page-actions-row {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 18px;
}

.compact-modal-form {
    display: grid;
    gap: 14px;
}

.unsaved-answer-modal-actions {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    width: 100%;
    align-items: center;
}

.unsaved-answer-modal-actions .btn {
    min-height: 38px;
    width: 100%;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.unsaved-answer-modal-actions [data-unsaved-answer-modal-close] {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 88px;
}

.unsaved-answer-modal-actions [data-unsaved-answer-modal-discard] {
    grid-column: 2;
    grid-row: 1;
}

.unsaved-answer-modal-actions [data-unsaved-answer-modal-save] {
    grid-column: 1 / -1;
    grid-row: 2;
}

@media (max-width: 640px) {
    .teacher-code-modal-dialog {
        max-height: calc(100vh - 20px);
    }

    .teacher-code-modal-dialog .kompege-variant-modal-head {
        align-items: flex-start;
    }

    .teacher-code-modal-head-actions {
        flex-wrap: nowrap;
    }

    .teacher-code-modal-body {
        grid-template-rows: auto auto auto;
        overflow: auto;
    }

    .teacher-result-detail-grid {
        grid-template-columns: 1fr;
    }

    .teacher-result-detail-task {
        max-height: min(420px, 42vh);
    }

    .teacher-result-detail-list {
        grid-template-columns: 1fr;
    }

    .teacher-result-code-panel .code-solution-preview-pre {
        min-height: 180px;
        max-height: 260px;
    }

    .teacher-result-attempt-list {
        max-height: 180px;
    }

    .unsaved-answer-modal-actions {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .unsaved-answer-modal-actions [data-unsaved-answer-modal-close],
    .unsaved-answer-modal-actions [data-unsaved-answer-modal-discard],
    .unsaved-answer-modal-actions [data-unsaved-answer-modal-save] {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
    }

    .unsaved-answer-modal-actions .btn {
        min-height: 38px;
        font-size: 13px;
    }

    .task-submit-actions {
        display: grid;
    }

    .task-submit-actions .btn {
        width: 100%;
    }

    .code-solution-modal-dialog,
    .teacher-code-modal-dialog {
        width: min(100%, calc(100vw - 20px));
    }

    .code-solution-input {
        min-height: 200px;
    }

    .code-solution-editor-shell {
        height: min(58vh, 420px);
        min-height: 200px;
    }
}

.compact-modal-form label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.compact-modal-form input,
.compact-modal-form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.logout-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.variant-folder-tabs {
    margin-top: 10px;
}

.variant-folder-tabs .class-study-tabs {
    gap: 12px;
}

.variant-folder-tab-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
}

.variant-folder-tabs .class-study-tab {
    min-height: 48px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.variant-folder-tab-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.variant-folder-tab-actions form {
    margin: 0;
}

.variant-folder-tab-actions .icon-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
}

.variant-folder-tabs .class-study-tab.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.variant-folder-tabs .class-study-tab.is-active span {
    color: var(--primary-dark);
}

.variant-admin-subfolder-list,
.variant-public-subfolder-list {
    display: grid;
    gap: 18px;
}

.variant-admin-subfolder-section,
.variant-public-subfolder-section {
    display: grid;
    gap: 12px;
}

.variant-subfolder-create-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 16px;
}

.variant-subfolder-create-form input {
    width: min(280px, 100%);
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 700;
}

.variant-subfolder-head,
.variant-public-subfolder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(239, 246, 255, 0.72));
    cursor: pointer;
}

.variant-table-subgroup-head:focus-visible,
.variant-public-subfolder-head:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.34);
    outline-offset: 3px;
}

.variant-subfolder-title-block {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.variant-subfolder-head h3,
.variant-public-subfolder-head span {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.variant-subfolder-head > div:first-child {
    display: grid;
    gap: 2px;
}

.variant-subfolder-toggle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 12px;
    background: #eff6ff;
    color: var(--primary-dark);
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.variant-subfolder-toggle:hover {
    transform: translateY(-1px);
    border-color: #93c5fd;
    background: #dbeafe;
}

.variant-subfolder-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
    transition: transform 0.18s ease;
}

.variant-subfolder-toggle.is-collapsed svg {
    transform: rotate(-90deg);
}

.variant-public-grid[data-variant-subfolder-content] {
    max-height: 5000px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: max-height 0.38s ease, opacity 0.24s ease, transform 0.26s ease;
}

.variant-public-grid[data-variant-subfolder-content].is-subfolder-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}

.variant-subfolder-head span,
.variant-public-subfolder-head small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.variant-location-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.variant-location-form select {
    min-width: 0;
    min-height: 38px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.variant-selected-task-table th:first-child,
.variant-selected-task-table td:first-child,
.variant-task-number-cell {
    width: 54px;
    min-width: 54px;
    text-align: center;
    white-space: nowrap;
}

.variant-selected-task-table th:nth-child(2),
.variant-selected-task-table td:nth-child(2) {
    width: auto;
}

.variant-selected-task-table th:nth-child(3),
.variant-selected-task-table td:nth-child(3) {
    width: 58px;
    text-align: center;
}

.variant-selected-task-table th:last-child,
.variant-selected-task-table td:last-child {
    width: 58px;
    text-align: center;
}

.variant-card {
    padding: 24px;
    display: grid;
    gap: 18px;
}

.variant-folder-list,
.variant-public-folder-list {
    display: grid;
    gap: 24px;
}

.variant-public-tabs-shell {
    margin-top: 8px;
}

@media (max-width: 720px) {
    .variant-location-form {
        grid-template-columns: 1fr;
    }

    .variant-subfolder-head,
    .variant-public-subfolder-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .account-dashboard-actions {
        justify-items: start;
    }

    .account-dashboard-actions > .btn {
        justify-self: start;
    }

    .account-yandex-linked {
        width: 100%;
    }

    .account-profile-head {
        align-items: stretch;
        flex-direction: column;
    }

    .account-profile-static-grid {
        grid-template-columns: 1fr;
    }

    .account-profile-static-grid .form-group:last-child {
        grid-column: auto;
    }
}

.variant-folder-section,
.variant-public-folder-section {
    display: grid;
    gap: 14px;
}

.variant-folder-head,
.variant-public-folder-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.variant-folder-head h2,
.variant-public-folder-head h2 {
    margin: 0;
    font-size: clamp(22px, 3vw, 30px);
    letter-spacing: -0.03em;
}

.variant-public-folder-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.variant-folder-head span {
    min-width: 34px;
    min-height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 900;
}

.variant-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.variant-card-head h2 {
    margin-bottom: 10px;
}

.variant-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--muted);
    font-weight: 600;
}

.variant-task-list {
    display: grid;
    gap: 10px;
}

.variant-task-item {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
}

/* =========================
   ARTICLE
   ========================= */

.topic-article {
    font-family: "Inter", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.82;
    color: #1f2937;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.topic-article > *:first-child {
    margin-top: 0;
}

.topic-article > *:last-child {
    margin-bottom: 0;
}

.topic-article h1,
.topic-article h2,
.topic-article h3,
.topic-article h4 {
    color: #0f172a;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-top: 30px;
    margin-bottom: 14px;
}

.topic-article h1 {
    font-size: 36px;
}

.topic-article h2 {
    font-size: 29px;
}

.topic-article h3 {
    font-size: 23px;
}

.topic-article p {
    margin: 0 0 18px;
    color: #1f2937;
}

.topic-article ul,
.topic-article ol {
    margin: 0 0 18px;
    padding-left: 26px;
}

.topic-article li {
    margin-bottom: 8px;
    color: #1f2937;
}

.topic-article a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.topic-article strong {
    color: #0f172a;
    font-weight: 800;
}

.topic-article em {
    font-style: italic;
}

.topic-article blockquote {
    margin: 22px 0;
    padding: 14px 18px;
    border-left: 4px solid #93c5fd;
    background: #f8fbff;
    border-radius: 0 14px 14px 0;
    color: #334155;
}

.topic-article code:not(pre code) {
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 0.92em;
    color: #1e293b;
    background: #eef2ff;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    padding: 2px 7px;
}

.topic-article .ql-ui {
    display: none !important;
}

/* =========================
   CODE BLOCKS
   ========================= */

.code-block-wrap {
    position: relative;
    margin: 24px 0;
    border: 1px solid var(--code-border);
    border-radius: 10px;
    background: var(--code-bg);
    overflow: hidden;
    max-width: 100%;
}

.code-block-header {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
}

.code-language-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    background: #dfdcdc;
    color: #1f1f1f;
    font-family: "JetBrains Mono", monospace;
    font-size: 15px;
    font-weight: 500;
}

.copy-code-btn {
    width: 46px;
    height: 46px;
    border: 1px solid #dfdada;
    border-radius: 8px;
    background: #f7f4f4;
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.copy-code-btn:hover {
    background: #efebeb;
}

.copy-code-btn.copied {
    background: #e8f7e8;
    border-color: #b7dfb7;
}

.code-with-lines {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: stretch;
}

.code-line-numbers {
    padding: 20px 0 18px 0;
    border-right: 2px solid #9f9a9a;
    color: var(--code-gutter);
    font-family: "JetBrains Mono", monospace;
    font-size: 15px;
    line-height: 1.65;
    text-align: right;
    user-select: none;
}

.code-line-numbers span {
    display: block;
    padding-right: 18px;
}

.code-content {
    min-width: 0;
    max-width: 100%;
}

.code-pre {
    margin: 0;
    padding: 0;
    background: var(--code-bg) !important;
    overflow-x: auto;
    max-width: 100%;
}

.code-pre,
.code-pre code,
.code-pre .hljs {
    background: var(--code-bg) !important;
    color: var(--code-text) !important;
}

.code-pre code,
.code-pre .hljs {
    display: block;
    margin: 0;
    padding: 20px 20px 18px 20px;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
    font-size: 15px;
    line-height: 1.65;
    font-weight: 500;
    white-space: pre;
    tab-size: 4;
    -moz-tab-size: 4;
}

/* highlight.js colors */

.topic-article .hljs {
    color: var(--code-text) !important;
}

.topic-article .hljs-comment,
.topic-article .hljs-quote {
    color: var(--code-muted) !important;
    font-style: normal;
}

.topic-article .hljs-keyword,
.topic-article .hljs-selector-tag,
.topic-article .hljs-literal {
    color: var(--code-keyword) !important;
    font-weight: 500;
}

.topic-article .hljs-string,
.topic-article .hljs-doctag,
.topic-article .hljs-regexp {
    color: var(--code-string) !important;
}

.topic-article .hljs-number {
    color: var(--code-number) !important;
}

.topic-article .hljs-built_in {
    color: var(--code-builtin) !important;
    font-style: italic;
}

.topic-article .hljs-title.function_,
.topic-article .hljs-title.function,
.topic-article .hljs-function .hljs-title {
    color: var(--code-func) !important;
}

.topic-article .hljs-class .hljs-title,
.topic-article .hljs-type,
.topic-article .hljs-title.class_ {
    color: var(--code-class) !important;
}

.topic-article .hljs-params,
.topic-article .hljs-variable,
.topic-article .hljs-property,
.topic-article .hljs-punctuation {
    color: var(--code-text) !important;
}

.topic-article .hljs-operator {
    color: var(--code-operator) !important;
}

.topic-article .hljs-meta {
    color: var(--code-meta) !important;
}

.topic-article .hljs-emphasis {
    font-style: italic;
}

.topic-article .hljs-strong {
    font-weight: 700;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 980px) {
    .sandbox-map-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 208px;
    }

    .sandbox-map-board-head {
        align-items: flex-start;
    }

    .sandbox-compact-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sandbox-compact-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .sandbox-compact-subtitle {
        text-align: left;
        max-width: none;
    }

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

    .landing-links,
    .sandbox-grid,
    .variant-public-grid,
    .sandbox-overview-grid,
    .course-progress-strip,
    .variant-mode-grid,
    .variant-mode-summary-grid,
    .result-summary-grid,
    .dashboard-stat-grid,
    .mini-work-grid {
        grid-template-columns: 1fr;
    }

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

    .variant-mode-section-head,
    .variant-task-full-head {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-left:has(.variant-view-tools) {
        grid-template-columns: 1fr;
    }

    .variant-view-tools,
    .variant-table-class-filter {
        justify-self: start;
        justify-content: flex-start;
    }

    .variant-active-session-list-inline {
        justify-content: flex-start;
    }

    .variant-task-full-head .btn {
        width: 100%;
    }

    .variant-mode-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-summary-grid {
        grid-template-columns: 1fr;
    }

    .kompege-variant-import-card,
    .kompege-variant-import-form,
    .variant-grid {
        grid-template-columns: 1fr;
    }

    .class-study-compact-grid {
        grid-template-columns: 1fr;
    }

    .teacher-class-tabs-row {
        grid-template-columns: 1fr;
    }

    .teacher-class-reorder-open {
        justify-self: start;
    }

    .class-reorder-modal-dialog {
        width: min(100%, calc(100vw - 24px));
    }

    .class-reorder-item {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 8px;
        padding: 10px;
    }

    .class-reorder-code {
        display: none;
    }

    .class-reorder-controls {
        flex-direction: column;
        gap: 3px;
    }

    .class-reorder-controls .icon-action-btn {
        width: 32px;
        height: 28px;
        min-width: 32px;
        border-radius: 10px;
    }

    .teacher-works-grid,
    .teacher-work-stats,
    .teacher-works-tools {
        grid-template-columns: 1fr;
    }

    .teacher-works-filter-form,
    .teacher-folder-create-form {
        flex-direction: column;
        align-items: stretch;
    }

    .teacher-works-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .teacher-works-hero .btn {
        margin-left: 0;
        width: 100%;
    }

    .teacher-works-action-stack {
        width: 100%;
        flex-wrap: wrap;
        justify-content: stretch;
    }

    .teacher-works-action-stack > .btn {
        flex: 1 1 180px;
    }

    .teacher-works-view-toggle {
        flex: 0 0 auto;
    }

    .teacher-works-filter-inline {
        flex: 1 1 220px;
    }

    .teacher-works-action-stack select {
        width: 100%;
    }

    .teacher-work-class-hero,
    .teacher-work-student-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .teacher-work-result-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .teacher-work-result-filter-form {
        width: 100% !important;
    }

    .teacher-work-task-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .work-task-picker-numbers {
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }

    .topic-layout-grid {
        grid-template-columns: 1fr;
    }

    .admin-topic-main {
        grid-template-columns: auto minmax(0, 1fr);
        width: 100%;
    }

    .work-form-layout-grid .topic-side-column {
        order: -1;
        position: static;
    }

    .work-side-sticky {
        position: static;
    }

    .work-form-layout-grid .topic-main-column {
        order: 1;
    }

    .study-layout {
        grid-template-columns: 1fr;
    }

    .sandbox-task-layout .study-sidebar {
        display: grid;
    }

    .sandbox-task-layout .sandbox-mobile-answer-card,
    .sandbox-task-layout .sandbox-mobile-quick-nav-card {
        display: block;
    }

    .sandbox-task-layout .sandbox-sticky-sidebar .sandbox-sidebar-answer-card,
    .sandbox-task-layout .sandbox-sticky-sidebar .sandbox-desktop-quick-nav-group {
        display: none;
    }

    .sandbox-results-footer-actions {
        grid-template-columns: 1fr;
    }

    .sandbox-pager-nav {
        justify-content: center;
    }

    .sandbox-pager-list {
        order: -1;
        justify-content: flex-start;
    }

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

    .side-panel {
        position: static;
    }

    .study-sidebar-card {
        position: static;
    }

    .sandbox-topic-sidebar,
    .sandbox-sticky-sidebar,
    .variant-training-sidebar {
        position: static;
    }

    .variant-training-sidebar {
        display: grid;
        max-height: none;
    }

    .class-card-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .class-card-title-row {
        align-items: flex-start;
    }

    .class-card-head-actions {
        margin-left: 0;
    }

    .class-card-rename-form input {
        min-width: 0;
        width: 100%;
        max-width: none;
    }

    .class-card-rename-form {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .class-card-rename-actions {
        width: 100%;
    }

    .teacher-class-topic-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-detail-card summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .teacher-classes-hero {
        align-items: flex-start;
    }

    .teacher-classes-inline-form {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .teacher-classes-inline-form input[type="text"] {
        width: 100%;
    }

    .sortable-task-card {
        grid-template-columns: 1fr;
    }

    .sortable-task-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

}

@media (max-width: 760px) {
    .teacher-work-class-hero {
        gap: 12px;
        margin-bottom: 16px;
    }

    .teacher-work-class-hero .admin-title {
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }

    .teacher-work-class-hero .dashboard-action-row {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .teacher-work-class-hero .dashboard-action-row .btn,
    .teacher-work-class-hero .dashboard-action-row form,
    .teacher-work-class-hero .dashboard-action-row button {
        width: 100%;
    }

    .teacher-work-result-heading-row {
        align-items: stretch;
        gap: 10px;
    }

    .teacher-work-result-heading-row h2 {
        font-size: 22px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .teacher-work-result-filter-form {
        justify-content: stretch !important;
    }

    .teacher-work-hide-absent-toggle {
        width: 100%;
        justify-content: center;
        margin-left: 0 !important;
    }

    .teacher-work-summary-strip {
        grid-template-columns: 1fr;
    }

    .teacher-work-summary-pill {
        min-height: 58px;
        padding: 12px;
    }

    .teacher-work-summary-value {
        font-size: 22px;
    }

    .teacher-work-matrix-wrap {
        margin-inline: -16px;
        padding: 0 16px 8px;
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 0;
        scroll-snap-type: x proximity;
    }

    .teacher-work-matrix-wrap::before {
        content: "Прокрутите таблицу вбок";
        display: block;
        width: max-content;
        margin: 0 0 8px;
        padding: 6px 10px;
        border-radius: 999px;
        background: #eff6ff;
        color: var(--primary-dark);
        font-size: 12px;
        font-weight: 900;
    }

    .teacher-work-matrix {
        min-width: max-content;
        width: max-content;
        font-size: 12px;
    }

    .teacher-work-matrix th,
    .teacher-work-matrix td {
        padding: 7px 5px;
    }

    .teacher-work-matrix-col-student {
        width: 138px;
    }

    .teacher-work-matrix-col-task {
        width: 46px;
    }

    .teacher-work-matrix-col-solved {
        width: 58px;
    }

    .teacher-work-matrix-col-percent {
        width: 74px;
    }

    .teacher-work-matrix-col-ege-score {
        width: 68px;
    }

    .teacher-work-matrix th:first-child,
    .teacher-work-matrix td:first-child {
        left: 16px;
    }

    .teacher-work-matrix .teacher-work-matrix-sticky-right {
        position: static;
        right: auto !important;
        box-shadow: none !important;
    }

    .teacher-work-matrix .teacher-work-matrix-summary-solved {
        width: 58px;
        min-width: 58px;
        max-width: 58px;
    }

    .teacher-work-matrix .teacher-work-matrix-summary-percent {
        width: 74px;
        min-width: 74px;
        max-width: 74px;
    }

    .teacher-work-matrix .teacher-work-matrix-summary-ege-score {
        width: 68px;
        min-width: 68px;
        max-width: 68px;
    }

    .teacher-work-matrix-student-cell strong {
        font-size: 12px;
    }

    .teacher-work-matrix-student-cell small {
        font-size: 9px;
    }

    .teacher-work-matrix-task-head span {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .teacher-work-matrix-task-head small {
        font-size: 8px;
    }

    .teacher-work-matrix-cell {
        font-size: 9px;
    }

    .teacher-work-matrix-code-corner {
        top: 2px;
        right: 2px;
        min-width: 17px;
        height: 13px;
        padding: 0 3px;
        font-size: 7px;
    }

    .teacher-work-matrix-actions {
        justify-content: stretch;
    }

    .teacher-work-matrix-expand-btn {
        width: 100%;
        justify-content: center;
    }

    .teacher-work-fullscreen-modal {
        padding: 8px;
    }

    .teacher-work-fullscreen-dialog {
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 12px;
        border-radius: 18px;
    }

    .teacher-work-fullscreen-head {
        align-items: flex-start;
    }

    .teacher-work-fullscreen-body {
        max-height: calc(100vh - 110px);
    }

    .teacher-work-fullscreen-body .teacher-work-matrix-wrap {
        margin-inline: 0;
        padding: 0 0 8px;
    }

    .teacher-work-fullscreen-body .teacher-work-matrix th:first-child,
    .teacher-work-fullscreen-body .teacher-work-matrix td:first-child {
        left: 0;
    }

    .teacher-classes-hero {
        gap: 12px;
    }

    .teacher-classes-inline-form {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .teacher-classes-inline-form .btn {
        width: 100%;
    }

    .teacher-class-tabs-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
    }

    .teacher-class-tabs-row .class-study-tabs {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        overflow: visible;
        padding: 0;
    }

    .teacher-class-tabs-row .class-study-tab {
        flex: 1 1 130px;
        min-height: 42px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .teacher-class-tabs-actions {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .teacher-class-create-open,
    .teacher-class-reorder-open {
        flex: 0 0 42px;
        justify-self: auto;
    }

    .class-card {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        padding: 16px;
        border-radius: 20px;
    }

    .class-card-title-row {
        width: 100%;
        align-items: center;
    }

    .class-card-title-row h3 {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 22px;
    }

    .class-card-head-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .class-card-head-actions .admin-badge {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }

    .teacher-class-section-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin: 4px 0 0;
    }

    .teacher-class-section-tab {
        min-width: 0;
        padding: 0 8px;
        font-size: 12px;
    }

    .teacher-class-result-card {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 14px;
    }

    .teacher-class-result-metrics {
        justify-items: start;
        white-space: normal;
    }

    .teacher-class-variant-links {
        justify-content: stretch;
    }

    .teacher-class-variant-link {
        flex: 1 1 130px;
    }

    .class-card-rename-form {
        width: 100%;
        gap: 8px;
    }

    .class-card-rename-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .class-card-rename-actions .btn {
        width: 100%;
    }

    .class-card .student-table-wrap {
        margin-inline: -2px;
        max-width: 100%;
        overflow: hidden;
        padding-bottom: 0;
    }

    .class-card .student-table-wrap .teacher-class-students-table {
        display: block;
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .teacher-class-students-table thead {
        display: none;
    }

    .teacher-class-students-table tbody {
        display: grid;
        gap: 12px;
        width: 100%;
        min-width: 0;
    }

    .teacher-class-students-table tr {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name actions"
            "topics topics"
            "attempts correct"
            "accuracy accuracy";
        gap: 10px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .teacher-class-students-table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        text-align: left;
    }

    .teacher-class-student-name-cell {
        grid-area: name;
        white-space: normal;
        align-self: center;
    }

    .teacher-class-student-link {
        display: inline;
        font-size: 17px;
        line-height: 1.25;
    }

    .teacher-class-student-actions-cell {
        grid-area: actions;
        align-self: center;
    }

    .teacher-class-student-actions-cell .teacher-class-student-actions {
        gap: 6px;
    }

    .teacher-class-student-actions-cell .icon-action-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 11px;
    }

    .teacher-class-topic-grid-cell {
        grid-area: topics;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .teacher-class-topic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
        min-width: 0;
        gap: 6px;
        overflow: visible;
        padding: 2px 0;
    }

    .teacher-class-topic-chip {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 10px;
        font-size: 12px;
    }

    .teacher-class-students-table td:nth-child(3),
    .teacher-class-students-table td:nth-child(4),
    .teacher-class-students-table td:nth-child(5) {
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 14px;
        background: #f8fafc;
        color: #0f172a;
        font-size: 18px;
        font-weight: 900;
        text-align: left;
    }

    .teacher-class-students-table td:nth-child(3)::before,
    .teacher-class-students-table td:nth-child(4)::before,
    .teacher-class-students-table td:nth-child(5)::before {
        color: #64748b;
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .teacher-class-students-table td:nth-child(3) {
        grid-area: attempts;
    }

    .teacher-class-students-table td:nth-child(3)::before {
        content: "Решений";
    }

    .teacher-class-students-table td:nth-child(4) {
        grid-area: correct;
    }

    .teacher-class-students-table td:nth-child(4)::before {
        content: "Верно";
    }

    .teacher-class-students-table td:nth-child(5) {
        grid-area: accuracy;
    }

    .teacher-class-students-table td:nth-child(5)::before {
        content: "Точность";
    }

    .teacher-class-topic-overview-head {
        align-items: flex-start;
    }

    .teacher-class-topic-overview-description br {
        display: none;
    }

    .teacher-class-topic-overview-grid {
        grid-template-columns: 1fr;
    }

    .teacher-class-topic-overview-card {
        padding: 14px;
    }

    .teacher-class-topic-overview-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .teacher-class-topic-overview-title {
        min-height: 0;
    }

    .teacher-class-topic-overview-metrics {
        grid-template-columns: 1fr;
    }

    .work-task-picker-modal {
        padding: 12px;
    }

    .work-task-picker-dialog {
        max-height: 92vh;
        border-radius: 18px;
    }

    .work-task-picker-head {
        align-items: flex-start;
        padding: 14px;
    }

    .work-task-picker-content {
        padding: 14px;
    }

    .work-task-picker-numbers {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    }

    .work-task-picker-card {
        grid-template-columns: 1fr;
    }

    .work-task-picker-card .btn {
        width: 100%;
    }

    .work-random-panel {
        grid-template-columns: 1fr;
    }

    .variant-teacher-class-row {
        grid-template-columns: 1fr;
    }

    .variant-teacher-mode-links {
        justify-content: stretch;
    }

    .variant-teacher-mode-link {
        flex: 1 1 120px;
    }

    .work-form-layout-grid .work-assignment-section .checkbox-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .work-form-layout-grid .work-assignment-section .selection-chip {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .work-form-layout-grid .student-table-wrap {
        max-width: 100%;
        overflow-x: hidden;
        padding-bottom: 0;
    }

    .work-form-layout-grid .student-table-wrap .work-selected-task-table {
        display: block;
        min-width: 0;
        width: 100%;
        background: transparent;
        border-radius: 0;
    }

    .work-form-layout-grid .work-selected-task-table > thead {
        display: none;
    }

    .work-form-layout-grid .work-selected-task-table > tbody {
        display: grid;
        gap: 12px;
    }

    .work-form-layout-grid .work-selected-task-table > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
    }

    .work-form-layout-grid .work-selected-task-table > thead > tr > th,
    .work-form-layout-grid .work-selected-task-table > tbody > tr > td {
        display: block;
        min-width: 0;
        padding: 0;
        border-bottom: 0;
    }

    .work-form-layout-grid .work-selected-task-table > tbody > tr > td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 100%;
        overflow: hidden;
    }

    .work-form-layout-grid .work-selected-task-table > tbody > tr > td:first-child {
        width: auto;
        text-align: left;
        grid-column: 1;
        grid-row: 1;
    }

    .work-form-layout-grid .work-task-order-controls {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-flow: row nowrap;
        gap: 6px;
    }

    .work-form-layout-grid .work-task-arrow-stack {
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        gap: 6px;
    }

    .work-form-layout-grid .work-task-drag-handle,
    .work-form-layout-grid .work-task-order-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }

    .work-form-layout-grid .work-selected-task-table > tbody > tr > td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .work-form-layout-grid .work-selected-task-text {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    .work-form-layout-grid .work-selected-task-article {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .work-form-layout-grid .work-selected-task-article table {
        display: table !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        font-size: clamp(7px, 1.75vw, 10px);
        line-height: 1.15;
    }

    .work-form-layout-grid .work-selected-task-article th,
    .work-form-layout-grid .work-selected-task-article td {
        display: table-cell !important;
        min-width: 0;
        max-width: none;
        height: auto !important;
        min-height: 0 !important;
        padding: 1px 2px !important;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: middle;
    }

    .work-form-layout-grid .work-selected-task-article table * {
        max-width: 100% !important;
        min-height: 0 !important;
        line-height: 1.2 !important;
    }

    .work-form-layout-grid .work-selected-task-article table p {
        margin: 0 !important;
        padding: 0 !important;
    }

    .work-form-layout-grid .work-task-file-link {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .teacher-class-topic-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .sandbox-map-page {
        height: auto;
        min-height: calc(100vh - 104px);
    }

    .sandbox-map-board {
        border-radius: 22px;
    }

    .sandbox-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 218px;
    }

    .sandbox-map-card {
        min-height: 218px;
        max-height: none;
        padding: 0;
    }

    .sandbox-map-card-meta {
        gap: 5px;
    }

    .sandbox-compact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .header-inner {
        min-height: auto;
        padding: 14px 0;
        flex-wrap: wrap;
        align-items: center;
    }

    .header-burger {
        display: inline-flex;
        margin-left: auto;
    }

    .header-nav-area {
        width: 100%;
        display: none;
        flex: 0 0 100%;
    }

    .site-header.is-menu-open .header-nav-area {
        display: block;
    }

    .header-mobile-panel {
        display: grid;
        gap: 14px;
        margin-top: 12px;
        padding: 16px;
        border: 1px solid rgba(226, 232, 240, 0.95);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
    }

    .main-nav {
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .main-nav a {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .header-actions {
        align-self: stretch;
        justify-content: flex-end;
    }

    iframe {
        min-height: 260px;
    }

    .hero {
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    .hero-subtitle {
        margin-left: 0;
    }

    .levels {
        justify-content: flex-start;
    }

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

    .sandbox-card-top,
    .variant-public-head,
    .public-task-card-top,
    .task-page-head,
    .task-flow-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .task-page-meta {
        align-items: flex-start;
        max-width: 100%;
    }

    .task-page-meta-variant,
    .task-variant-tag,
    .task-difficulty-tag {
        max-width: 100%;
        white-space: normal;
    }

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

    .work-count-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .number-chip-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .admin-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-card-wide,
    .form-card,
    .topic-page-card,
    .task-page-card {
        padding: 22px 18px;
    }

    .form-section,
    .side-panel {
        padding: 16px;
        border-radius: 18px;
    }

    .task-meta-grid-double {
        grid-template-columns: 1fr;
    }

    .editor-instance {
        grid-template-columns: 1fr;
    }

    .editor-toolbar-top {
        grid-column: auto;
        margin-bottom: 0;
    }

    .editor-controls-row {
        grid-column: auto;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .editor-control-group {
        width: 100%;
        justify-content: flex-start;
    }

    .editor-shell {
        margin-top: 0;
    }

    .topic-article {
        font-size: 16px;
        line-height: 1.78;
    }

    .topic-page-card,
    .task-page-card,
    .public-task-card,
    .public-task-card-link,
    .public-task-card-actions,
    .sandbox-inline-question-list,
    .sandbox-inline-question-card,
    .sandbox-bundle-common-card {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .public-task-card-link,
    .public-task-card-actions,
    .sandbox-inline-question-list,
    .sandbox-inline-question-card,
    .sandbox-bundle-common-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .public-task-card-article.topic-article,
    .topic-page-card .topic-article,
    .task-page-card .topic-article {
        max-width: 100%;
        overflow-x: visible;
    }

    .public-task-card-article.topic-article img,
    .topic-page-card .topic-article img,
    .task-page-card .topic-article img {
        max-width: 100% !important;
        height: auto !important;
    }

    .public-task-card-article.topic-article table,
    .topic-page-card .topic-article table,
    .task-page-card .topic-article table {
        display: table;
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        table-layout: fixed;
    }

    .public-task-card-article.topic-article th,
    .public-task-card-article.topic-article td,
    .topic-page-card .topic-article th,
    .topic-page-card .topic-article td,
    .task-page-card .topic-article th,
    .task-page-card .topic-article td {
        min-width: 0;
        padding: 8px 6px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .public-task-card-article.topic-article .code-block-wrap,
    .topic-page-card .topic-article .code-block-wrap,
    .task-page-card .topic-article .code-block-wrap,
    .public-task-card-article.topic-article pre,
    .topic-page-card .topic-article pre,
    .task-page-card .topic-article pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .public-task-card-article.topic-article mjx-container[display="true"],
    .topic-page-card .topic-article mjx-container[display="true"],
    .task-page-card .topic-article mjx-container[display="true"] {
        max-width: 100%;
    }

    .public-task-card-article.topic-article mjx-container:not([display="true"]),
    .topic-page-card .topic-article mjx-container:not([display="true"]),
    .task-page-card .topic-article mjx-container:not([display="true"]) {
        display: inline !important;
        max-width: 100%;
        margin: 0;
    }

    .public-task-card-article.topic-article math:not([display="block"]),
    .topic-page-card .topic-article math:not([display="block"]),
    .task-page-card .topic-article math:not([display="block"]) {
        display: inline;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        line-break: anywhere;
    }

    .public-task-card-article.topic-article math:not([display="block"]) mrow,
    .public-task-card-article.topic-article math:not([display="block"]) mi,
    .public-task-card-article.topic-article math:not([display="block"]) mn,
    .public-task-card-article.topic-article math:not([display="block"]) mo,
    .public-task-card-article.topic-article math:not([display="block"]) mtext,
    .topic-page-card .topic-article math:not([display="block"]) mrow,
    .topic-page-card .topic-article math:not([display="block"]) mi,
    .topic-page-card .topic-article math:not([display="block"]) mn,
    .topic-page-card .topic-article math:not([display="block"]) mo,
    .topic-page-card .topic-article math:not([display="block"]) mtext,
    .task-page-card .topic-article math:not([display="block"]) mrow,
    .task-page-card .topic-article math:not([display="block"]) mi,
    .task-page-card .topic-article math:not([display="block"]) mn,
    .task-page-card .topic-article math:not([display="block"]) mo,
    .task-page-card .topic-article math:not([display="block"]) mtext {
        display: inline;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .answer-privacy-row,
    .answer-privacy-row > .student-answer-grid,
    .student-answer-grid,
    .sandbox-inline-answer-grid,
    .sandbox-sidebar-answer-grid {
        min-width: 0;
        max-width: 100%;
    }

    .student-answer-grid,
    .sandbox-inline-answer-grid,
    .sandbox-sidebar-answer-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
    }

    .sandbox-inline-answer-actions .task-submit-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    .sandbox-inline-answer-actions .task-submit-actions .btn {
        min-width: 0;
        width: 100%;
        padding-left: 6px;
        padding-right: 6px;
        font-size: 11px;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
    }

    .topic-article h1 {
        font-size: 30px;
    }

    .topic-article h2 {
        font-size: 25px;
    }

    .topic-article h3 {
        font-size: 21px;
    }

    .code-with-lines {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .code-line-numbers {
        font-size: 13px;
        padding-top: 20px;
    }

    .code-line-numbers span {
        padding-right: 12px;
    }

    .code-pre code,
    .code-pre .hljs,
    .ql-editor pre.ql-syntax,
    .ql-editor .ql-code-block-container {
        font-size: 13px;
        padding: 20px 14px 16px 14px;
    }

    .code-language-badge {
        min-height: 34px;
        padding: 0 12px;
        font-size: 13px;
    }

    .copy-code-btn {
        width: 38px;
        height: 38px;
    }

    .article-editor,
    .ql-editor {
        min-height: 340px;
    }
}

@media (max-width: 520px) {
    .work-form-layout-grid .work-selected-task-article table {
        font-size: clamp(6px, 1.55vw, 8px);
    }

    .sandbox-map-card-top {
        grid-template-columns: minmax(0, 1fr) 72px;
        gap: 8px;
        padding: 14px 12px 10px;
    }

    .sandbox-map-number {
        font-size: clamp(27px, 7.4vw, 32px);
    }

    .sandbox-map-card-accuracy {
        min-height: 52px;
        padding: 8px 6px;
        font-size: 9px;
        border-radius: 14px;
    }

    .sandbox-map-card-accuracy span {
        display: none;
    }

    .sandbox-map-card-accuracy strong {
        font-size: 19px;
    }

    .sandbox-map-card-body {
        padding: 10px 12px 12px;
    }

    .sandbox-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 228px;
    }

    .sandbox-map-card {
        min-height: 228px;
        max-height: none;
    }

    .sandbox-map-board {
        padding: 18px 16px 20px;
    }

    .sandbox-map-board-head h2 {
        font-size: 22px;
    }

    .sandbox-map-legend {
        gap: 8px;
    }

    .sandbox-map-legend-item {
        font-size: 12px;
    }

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

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

    .landing-links,
    .sandbox-grid,
    .course-progress-strip,
    .variant-public-grid {
        grid-template-columns: 1fr;
    }

    .task-card {
        min-height: 140px;
    }

    .logo-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 14px;
    }

    .logo-icon {
        width: 31px;
        height: 31px;
    }

    .logo-name {
        font-size: 16px;
    }

    .logo-text {
        font-size: 9px;
    }

    .admin-topic-main {
        flex-direction: column;
    }

    .landing-hero,
    .landing-feature-grid,
    .landing-audience-grid,
    .landing-steps-grid {
        grid-template-columns: 1fr;
    }

    .landing-proof-grid {
        grid-template-columns: 1fr;
    }

    .landing-hero-copy,
    .landing-section,
    .landing-cta-band,
    .landing-hero-panel {
        padding: 22px;
    }

    .landing-hero-title {
        font-size: 34px;
    }

    .landing-section-head h2,
    .landing-audience-card h2,
    .landing-cta-band h2 {
        font-size: 28px;
    }

    .landing-cta-band {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    .sandbox-map-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 228px;
    }

    .sandbox-map-card {
        min-height: 228px;
        max-height: none;
    }

    .sandbox-map-card-top {
        grid-template-columns: minmax(0, 1fr) 68px;
    }

    .sandbox-map-card-title {
        -webkit-line-clamp: 2;
    }
}

@media (max-width: 960px) {
    .landing-hero,
    .landing-feature-grid,
    .landing-audience-grid,
    .landing-steps-grid {
        grid-template-columns: 1fr;
    }

    .landing-cta-band {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================
   ERROR PAGES
   ========================= */

.error-page-container {
    width: min(1240px, calc(100% - 28px));
}

.error-page-body .page-wrap {
    display: flex;
    align-items: center;
}

.error-hero {
    position: relative;
    padding: 56px 0 72px;
}

.error-shell {
    position: relative;
    display: grid;
    gap: 20px;
}

.error-hero-backdrop {
    position: absolute;
    inset: auto;
    width: 320px;
    height: 320px;
    border-radius: 999px;
    filter: blur(28px);
    opacity: 0.55;
    pointer-events: none;
}

.error-hero-backdrop-a {
    top: 12px;
    left: -40px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.28), transparent 70%);
}

.error-hero-backdrop-b {
    right: -20px;
    bottom: 0;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.22), transparent 72%);
}

.error-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(191, 219, 254, 0.9);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 250, 252, 0.96)),
        var(--surface);
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.11);
    padding: 28px;
}

.error-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(37, 99, 235, 0.05), transparent 32%),
        linear-gradient(300deg, rgba(14, 165, 233, 0.06), transparent 28%);
}

.error-status-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.error-status-pill,
.error-path-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.error-status-pill {
    background: linear-gradient(135deg, var(--primary), #0ea5e9);
    color: #fff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
}

.error-path-pill {
    background: rgba(15, 23, 42, 0.06);
    color: var(--muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.error-content-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
    gap: 24px;
    align-items: center;
}

.error-copy {
    display: grid;
    gap: 16px;
}

.error-eyebrow {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-dark);
    font-weight: 800;
}

.error-heading {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.error-description {
    margin: 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--muted);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 6px;
}

.error-visual {
    display: flex;
    justify-content: flex-end;
}

.error-visual-frame {
    width: min(100%, 340px);
    min-height: 300px;
    border-radius: 28px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.98));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.error-code {
    font-size: clamp(90px, 16vw, 170px);
    line-height: 0.9;
    font-weight: 900;
    letter-spacing: -0.08em;
    color: #bfdbfe;
}

.error-visual-caption {
    max-width: 220px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(226, 232, 240, 0.82);
}

.error-links-card {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.error-link-tile {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.error-link-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(37, 99, 235, 0.24);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.1);
}

.error-link-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.error-link-tile strong {
    font-size: 18px;
    letter-spacing: -0.02em;
}

.error-link-tile span:last-child {
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 960px) {
    .error-content-grid,
    .error-links-card {
        grid-template-columns: 1fr;
    }

    .error-visual {
        justify-content: stretch;
    }

    .error-visual-frame {
        width: 100%;
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    .error-hero {
        padding: 28px 0 44px;
    }

    .error-card {
        padding: 20px;
        border-radius: 24px;
    }

    .error-description {
        font-size: 16px;
    }

    .error-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .error-actions .btn {
        width: 100%;
    }
}


@media (max-width: 1079px) {
    .teacher-works-action-stack .teacher-works-view-toggle,
    .teacher-works-view-toggle {
        display: none !important;
    }

    [data-work-view-root] .teacher-works-view-pane[data-work-view-pane="table"] {
        display: none !important;
    }

    [data-work-view-root] .teacher-works-view-pane[data-work-view-pane="cards"] {
        display: block !important;
    }
}

@media (max-width: 1079px) {
    .variant-view-tools {
        display: none;
    }

    .hero-left:has(.variant-view-tools) {
        display: block;
    }
}

.variant-compact-table th .variant-table-class-filter {
    justify-content: stretch;
    width: 100%;
}

.variant-compact-table th .variant-table-class-filter label {
    width: 100%;
    gap: 5px;
}

.variant-compact-table th .variant-table-class-filter select {
    min-height: 34px;
    border-radius: 10px;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

.variant-table-toolbar:has(+ .variant-compact-table th .variant-table-class-filter) {
    min-height: 0;
}


/* Compact class selector in variants table header */
.variant-compact-table .variant-table-class-head {
    width: 240px;
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
}

.variant-table-class-filter {
    margin: 0;
}

.variant-table-class-filter label {
    display: block;
    margin: 0;
}

.variant-table-class-filter select {
    width: 100%;
    max-width: 240px;
    min-width: 220px;
    min-height: 36px;
    height: 36px;
    padding: 0 38px 0 12px;
    background-position: right 12px center;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* Account profile page */
.account-profile-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: var(--shadow);
}

.account-profile-avatar {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24);
}

.account-profile-title h1 {
    margin: 0 0 6px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.account-profile-title p {
    margin: 0;
    color: #64748b;
    font-weight: 800;
}

.account-profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 16px;
}

.account-profile-card {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 22px;
}

.account-profile-card-main {
    align-content: stretch;
    grid-template-rows: auto 1fr auto;
}

.account-profile-card-soft {
    background:
        radial-gradient(circle at 100% 0%, rgba(14, 165, 233, 0.08), transparent 36%),
        #fff;
}

.account-profile-card-head {
    display: grid;
    gap: 4px;
}

.account-profile-card-kicker {
    color: var(--primary-dark);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.account-profile-card-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.account-profile-data-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-profile-data-list div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fafc;
}

.account-profile-data-list span {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.account-profile-data-list strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 16px;
    font-weight: 900;
}

.account-profile-yandex-box {
    width: 100%;
}

.account-profile-action-form {
    margin: 0;
}

.account-profile-card-actions {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.account-profile-wide-action {
    width: fit-content;
}

.account-profile-card p {
    margin: 0;
    color: #475569;
    font-weight: 700;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .account-profile-hero {
        grid-template-columns: 1fr;
    }

    .account-profile-grid,
    .account-profile-data-list {
        grid-template-columns: 1fr;
    }

    .account-profile-wide-action,
    .account-profile-hero .btn {
        width: 100%;
    }
}


.account-history-head {
    align-items: center;
    gap: 12px;
}

.account-history-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}


@media (max-width: 760px) {
    .class-study-toolbar-card,
    .class-study-join-row {
        grid-template-columns: 1fr;
    }

    .class-study-toolbar-card {
        align-items: stretch;
    }

    .class-study-filter-card {
        align-items: stretch;
        flex-direction: column;
    }

    .class-study-filter-field {
        min-width: 0;
    }

    .class-study-status-filter {
        width: 100%;
        justify-content: stretch;
    }

    .class-study-status-filter button {
        flex: 1 1 calc(50% - 4px);
    }

    .class-study-join-open {
        width: 100%;
    }
}


.account-topic-stat-link {
    color: var(--primary-dark) !important;
    font-weight: 900;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.account-topic-stat-link:hover {
    color: var(--primary) !important;
    text-decoration-thickness: 2px !important;
}


.account-stat-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.account-stat-extra-card {
    min-width: 0;
    padding: 20px;
}

.account-stat-extra-head {
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.account-stat-extra-head p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.account-stat-result-list {
    display: grid;
    gap: 10px;
}

.account-stat-result-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f8fafc;
}

.account-stat-result-item strong,
.account-stat-result-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-stat-result-item > div:first-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.account-stat-result-item > div:first-child strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 900;
}

.account-stat-result-item > div:first-child span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.account-stat-result-score {
    min-width: 76px;
    display: grid;
    justify-items: end;
    gap: 2px;
}

.account-stat-result-score span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-stat-result-score strong {
    color: var(--primary-dark);
    font-size: 18px;
    font-weight: 900;
}

@media (max-width: 920px) {
    .account-stat-extra-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .account-stat-result-item {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .account-stat-result-score {
        justify-items: start;
    }
}