/* =========================================
   Studio: methodologist dashboard, course workspace,
   lesson editor, quality checks and media controls
   ========================================= */
.studio-page {
    display: grid;
    gap: 18px;
}

/* Course quiz constructor */
.studio-create-form.studio-create-form--quiz {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) auto;
}

.studio-quiz-row {
    min-height: 104px;
}

.studio-quiz-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.studio-quiz-overview article {
    display: grid;
    gap: 5px;
    min-height: 84px;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-quiz-overview span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.studio-quiz-overview strong {
    color: var(--text-main);
    font-size: 25px;
}

.studio-danger-text {
    color: var(--danger-text) !important;
}

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

.studio-check-grid--quiz .studio-toggle-card--publish {
    margin: 0;
}

.studio-form-actions,
.studio-section-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.studio-import-guide,
.studio-info-callout {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-import-guide {
    margin-bottom: 14px;
}

.studio-import-guide p,
.studio-info-callout span {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.studio-info-callout {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    border-color: color-mix(in srgb, var(--warning-text) 30%, var(--border-soft));
    background: color-mix(in srgb, var(--warning-bg) 62%, var(--bg-surface));
}

.studio-confirm-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--warning-text) 34%, var(--border-soft));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning-bg) 58%, var(--bg-surface));
    cursor: pointer;
}

.studio-confirm-card input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
}

.studio-confirm-card span,
.studio-confirm-card small {
    display: block;
}

.studio-confirm-card strong {
    color: var(--text-main);
}

.studio-confirm-card small {
    margin-top: 3px;
    color: var(--text-muted);
    line-height: 1.45;
}

.studio-quick-import {
    width: 100%;
    min-height: 280px;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    line-height: 1.6;
}

.studio-question-row--quiz {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}

.studio-question-row__number {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 12px;
    font-weight: 900;
}

.studio-question-row--quiz h4,
.studio-question-row--quiz p {
    margin: 0;
}

.studio-question-row--quiz .studio-warning-text {
    margin-top: 8px;
}

.studio-question-row--inactive {
    opacity: 0.6;
}

.studio-question-row__hidden-tag {
    color: var(--text-soft);
    font-style: italic;
}

.studio-settings-grid.studio-settings-grid--quiz-question {
    grid-template-columns: minmax(220px, 1fr) 120px;
}

.studio-rule-list {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding-left: 20px;
    color: var(--text-muted);
    line-height: 1.5;
}

.studio-rule-list strong {
    color: var(--text-main);
}

.studio-quiz-question-workspace textarea,
.studio-quiz-workspace textarea {
    width: 100%;
}

.studio-option-row.is-removed {
    opacity: 0.48;
}

.studio-option-row.is-removed input[type="text"] {
    text-decoration: line-through;
}

.studio-page .btn-block {
    width: 100%;
}

.studio-page .btn-small {
    min-height: 34px;
    padding: 7px 11px;
}

@media (max-width: 1280px) {
    .studio-create-form.studio-create-form--quiz {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .studio-quiz-overview,
    .studio-check-grid.studio-check-grid--quiz,
    .studio-settings-grid.studio-settings-grid--quiz-question,
    .studio-question-row--quiz,
    .studio-info-callout {
        grid-template-columns: 1fr;
    }

    .studio-question-row--quiz .studio-actions,
    .studio-form-actions,
    .studio-section-actions {
        justify-content: stretch;
    }

    .studio-question-row--quiz .btn,
    .studio-form-actions .btn,
    .studio-section-actions .btn {
        width: 100%;
    }
}

.studio-workspace-nav,
.studio-workspace-nav__path,
.studio-lesson-pager {
    display: flex;
    align-items: center;
}

.studio-workspace-nav {
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.studio-workspace-nav__path {
    gap: 10px;
    min-width: 0;
}

.studio-back-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.studio-back-link:hover,
.studio-back-link:focus-visible {
    border-color: var(--border-accent);
    background: var(--brand-red-soft);
    color: var(--brand-red);
    transform: translateX(-2px);
    outline: none;
}

.studio-nav-chevron {
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
}

.studio-nav-chevron--left {
    transform: rotate(135deg);
}

.studio-nav-chevron--right {
    transform: rotate(-45deg);
}

.studio-breadcrumbs {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-breadcrumbs li {
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-breadcrumbs li + li::before {
    content: "/";
    margin: 0 9px;
    color: var(--border-strong);
}

.studio-breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
}

.studio-breadcrumbs a:hover {
    color: var(--brand-red);
}

.studio-lesson-pager {
    flex: 0 0 auto;
    gap: 2px;
    min-height: 38px;
    padding: 3px;
    border: 1px solid var(--border-soft);
    border-radius: 11px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-lesson-pager__position {
    min-width: 58px;
    padding: 0 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.studio-pager-button {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.studio-pager-button:hover,
.studio-pager-button:focus-visible {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    outline: none;
}

.studio-pager-button:first-child:hover {
    transform: translateX(-1px);
}

.studio-pager-button:last-child:hover {
    transform: translateX(1px);
}

.studio-pager-button.is-disabled {
    cursor: default;
    opacity: 0.3;
}

.studio-hero,
.studio-section {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 22px;
}

.studio-hero h2 {
    max-width: 1080px;
    margin: 8px 0;
    font-size: clamp(30px, 3vw, 48px);
    line-height: 1.05;
}

.studio-hero p {
    max-width: 980px;
    margin: 0;
    color: var(--text-muted);
}

.studio-hero--dashboard {
    align-items: center;
}

.studio-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(92px, 1fr));
    gap: 10px;
    min-width: min(560px, 100%);
}

.studio-dashboard-stats div {
    display: grid;
    gap: 2px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-dashboard-stats strong {
    color: var(--text-main);
    font-size: 28px;
    line-height: 1;
}

.studio-dashboard-stats span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.studio-section {
    padding: 18px;
}

.studio-disclosure {
    overflow: clip;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-disclosure__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 16px 52px 16px 18px;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.studio-disclosure__summary::-webkit-details-marker {
    display: none;
}

.studio-disclosure__summary::after {
    content: "";
    position: absolute;
    right: 20px;
    width: 9px;
    height: 9px;
    border: solid var(--text-muted);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.studio-disclosure[open] > .studio-disclosure__summary::after {
    transform: rotate(225deg);
}

.studio-disclosure[open] > .studio-disclosure__summary {
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface-soft);
}

.studio-disclosure__summary:hover,
.studio-disclosure__summary:focus-visible {
    background: var(--bg-surface-soft);
    outline: none;
}

.studio-disclosure__summary h3,
.studio-disclosure__summary p {
    margin: 0;
}

.studio-disclosure__summary p {
    margin-top: 5px;
    color: var(--text-muted);
}

.studio-disclosure__count {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.studio-disclosure__body {
    padding: 16px 18px 18px;
}

.studio-disclosure--admin {
    border-style: dashed;
}

.studio-admin-links,
.studio-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.studio-section-toolbar {
    justify-content: flex-end;
    margin-bottom: 12px;
}

.studio-question-bank-toolbar {
    align-items: end;
    justify-content: space-between;
}

.studio-question-bank-filters {
    display: grid;
    flex: 1 1 620px;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.7fr) auto;
    gap: 10px;
    align-items: end;
}

.studio-question-bank-filters label {
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.studio-question-bank-filters input,
.studio-question-bank-filters select {
    width: 100%;
    min-height: 40px;
}

.studio-question-bank-result {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.studio-section__header,
.studio-panel-header,
.studio-course-card__top,
.studio-lesson-row__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.studio-section__header {
    margin-bottom: 16px;
}

.studio-section__header h3,
.studio-panel-header h3,
.studio-editor-panel h3,
.studio-course-card h3,
.studio-lesson-row h3 {
    margin: 0;
}

.studio-section__header p,
.studio-panel-header p,
.studio-course-card p,
.studio-lesson-row p {
    margin: 6px 0 0;
    color: var(--text-muted);
}

.studio-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}

.studio-filter-form,
.studio-create-form {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(180px, 1fr)) auto;
    gap: 12px;
    align-items: end;
}

.studio-create-form {
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.4fr) auto auto;
    padding-top: 14px;
}

.studio-filter-actions {
    display: flex;
    gap: 8px;
}

.studio-create-box {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-create-box summary {
    cursor: pointer;
    color: var(--brand-red);
    font-weight: 900;
}

.studio-course-card,
.studio-lesson-row {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface-soft);
}

.studio-course-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.studio-course-table,
.studio-attention-list {
    display: grid;
    gap: 10px;
}

.studio-course-row,
.studio-attention-item {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-course-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.35fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
}

.studio-course-row__top,
.studio-course-row__quality,
.studio-media-actions,
.studio-video-item__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.studio-course-row__top {
    justify-content: space-between;
}

.studio-course-row h3,
.studio-course-row p {
    margin: 0;
}

.studio-course-row p {
    margin-top: 6px;
    color: var(--text-muted);
}

.studio-attention-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    color: var(--text-main);
    text-decoration: none;
}

.studio-attention-item__mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--brand-red);
    color: #fff;
    font-weight: 900;
}

.studio-attention-item strong,
.studio-attention-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-attention-item small,
.studio-attention-item em {
    color: var(--text-muted);
    font-style: normal;
    font-weight: 800;
}

.studio-meta-row,
.studio-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.studio-meta-row span,
.studio-meta-row a {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
}

.studio-meta-row a {
    color: var(--brand-red);
    text-decoration: none;
}

.studio-lesson-list {
    display: grid;
    gap: 10px;
}

.studio-lesson-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 112px;
    padding: 16px;
}

.studio-lesson-row__number {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--brand-red);
    color: #fff;
    font-weight: 900;
}

.studio-lesson-row__body {
    min-width: 0;
}

.studio-lesson-row__actions {
    justify-content: flex-end;
}

.studio-warning-text {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--warning-bg);
    color: var(--warning-text) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.studio-module-nav {
    display: inline-flex;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-module-nav a {
    min-height: 38px;
    padding: 9px 14px;
    border-radius: 10px;
    color: var(--text-muted);
    font-weight: 900;
    text-decoration: none;
}

.studio-module-nav a:hover,
.studio-module-nav a:focus-visible,
.studio-module-nav a.is-active {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    outline: none;
}

.studio-dashboard-stats--compact {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    min-width: min(340px, 100%);
}

.studio-create-form--practice {
    grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.7fr) auto;
}

.studio-create-form--exam {
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr) auto;
}

.studio-create-hint,
.studio-help-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.studio-practical-row {
    min-height: 98px;
}

.studio-exam-row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.25fr) auto;
}

.studio-assessment-form,
.studio-assessment-main,
.studio-assessment-side,
.studio-settings-stack,
.studio-question-list {
    display: grid;
    gap: 16px;
}

.studio-assessment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(310px, 360px);
    gap: 16px;
    align-items: start;
}

.studio-assessment-layout--exam {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
}

.studio-assessment-side {
    position: sticky;
    top: 18px;
}

.studio-assessment-copy,
.studio-editor-panel {
    padding: 18px;
}

.studio-disclosure.studio-assessment-copy {
    padding: 0;
}

.studio-assessment-textarea {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    line-height: 1.65;
}

.studio-live-preview {
    max-height: calc(100vh - 220px);
    overflow: auto;
}

.studio-live-preview hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
}

.studio-live-preview h4 {
    margin: 0 0 10px;
}

.studio-formset,
.studio-formset [data-formset-rows] {
    display: grid;
    gap: 10px;
}

.studio-rubric-row,
.studio-category-row,
.studio-option-row,
.studio-question-row {
    display: grid;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-rubric-row {
    grid-template-columns: minmax(190px, 0.8fr) minmax(260px, 1.2fr) 100px 90px auto auto;
}

.studio-category-row {
    grid-template-columns: minmax(230px, 1fr) 150px 170px 90px auto;
}

.studio-option-row {
    grid-template-columns: minmax(280px, 1fr) 90px auto auto;
}

.studio-rubric-row .form-group,
.studio-category-row .form-group,
.studio-option-row .form-group {
    margin: 0;
}

.studio-rubric-row input:not([type="checkbox"]):not([type="radio"]),
.studio-category-row input:not([type="checkbox"]):not([type="radio"]),
.studio-option-row input:not([type="checkbox"]):not([type="radio"]),
.studio-settings-grid input:not([type="checkbox"]):not([type="radio"]),
.studio-settings-grid select,
.studio-settings-grid textarea {
    width: 100%;
}

.studio-page .studio-checkbox-row {
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
}

.studio-page .studio-checkbox-row input[type="checkbox"],
.studio-page .studio-checkbox-row input[type="radio"],
.studio-choice-list input[type="checkbox"],
.studio-choice-list input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
}

.studio-score-total {
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--warning-bg);
    color: var(--warning-text);
}

.studio-score-total.is-valid {
    background: var(--success-bg);
    color: var(--success-text);
}

.studio-score-total.is-invalid {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.studio-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.studio-settings-grid--question {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.studio-attempt-policy {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 96% 0, var(--brand-red-soft), transparent 34%),
        var(--bg-surface-soft);
}

.studio-attempt-policy__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.studio-attempt-policy__heading > div {
    display: grid;
    gap: 4px;
}

.studio-attempt-policy__heading > div > span {
    color: var(--brand-red);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.studio-attempt-policy__heading strong {
    color: var(--text-main);
    font-size: 16px;
}

.studio-attempt-policy__status {
    max-width: 50%;
    padding: 7px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
}

.studio-attempt-policy__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.studio-attempt-policy__fields .form-group {
    margin: 0;
}

.studio-attempt-policy__fields small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.studio-attempt-policy__presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.studio-attempt-policy__presets > span {
    margin-right: 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
}

.studio-attempt-policy__presets button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
}

.studio-attempt-policy__presets button:hover,
.studio-attempt-policy__presets button.is-active {
    border-color: var(--border-accent);
    background: var(--brand-red-soft);
    color: var(--brand-red);
}

.studio-attempt-policy__presets button:focus-visible {
    border-color: var(--border-accent);
    background: var(--brand-red-soft);
    color: var(--brand-red);
    box-shadow: 0 0 0 3px var(--brand-red-soft);
    outline: none;
}

.studio-attempt-policy__summary {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.studio-check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

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

.studio-flow-grid__parallel {
    grid-column: 1 / -1;
}

.studio-flow-grid small {
    color: var(--text-muted);
    line-height: 1.5;
}

.studio-flow-preview {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto minmax(0, 1fr) auto
        minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-flow-preview span {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.studio-flow-preview b {
    color: var(--text-soft);
    text-align: center;
}

.studio-choice-list ul {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.studio-choice-list label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.4;
}

.studio-choice-list--scroll {
    max-height: 340px;
    overflow: auto;
    padding-right: 4px;
}

.studio-question-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
}

.studio-question-row h4 {
    margin: 0;
}

.studio-question-row__order {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--brand-red);
    color: #fff;
    font-weight: 900;
}

.studio-help-list,
.studio-issue-list ul {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--text-muted);
    line-height: 1.6;
}

.studio-issue-list {
    display: block;
}

.studio-delete-choice {
    color: var(--danger-text);
}

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

.studio-editor-hero {
    align-items: center;
    padding: 18px;
}

.studio-editor-title-block {
    width: min(760px, 100%);
    min-width: 0;
}

.studio-editor-title-block label {
    display: block;
    margin: 14px 0 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-editor-title-block input {
    width: 100%;
    min-height: 56px;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 900;
}

.studio-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
    gap: 16px;
    align-items: start;
}

.studio-editor-main,
.studio-editor-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.studio-editor-side {
    position: sticky;
    top: 18px;
}

.studio-editor-field,
.studio-editor-writing,
.studio-editor-preview,
.studio-editor-panel {
    padding: 16px;
}

.studio-editor-writing {
    position: relative;
    min-width: 0;
}

.studio-alert {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-muted);
}

.studio-alert strong {
    color: var(--text-main);
}

.studio-alert--warning {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

.studio-alert--history {
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.08);
}

.studio-alert--success {
    border-color: color-mix(in srgb, var(--success-text) 30%, transparent);
    background: var(--success-bg);
}

.studio-alert--danger {
    border-color: color-mix(in srgb, var(--danger-text) 32%, transparent);
    background: var(--danger-bg);
}

.studio-alert--danger strong {
    color: var(--danger-text);
}

.studio-save-state {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.studio-save-state::before,
.studio-save-dock > span::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--success-text);
}

.studio-save-state.is-dirty,
.studio-save-dock.is-dirty > span {
    color: var(--warning-text);
}

.studio-save-state.is-dirty::before,
.studio-save-dock.is-dirty > span::before {
    background: var(--warning-text);
}

.studio-save-dock {
    display: flex;
    z-index: 30;
    bottom: 14px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    position: sticky;
    min-height: 58px;
    padding: 9px 10px 9px 16px;
    border: 1px solid var(--border-accent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-surface) 94%, transparent);
    box-shadow: var(--shadow-strong);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(12px);
}

.studio-save-dock.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.studio-exam-workspace {
    scroll-behavior: smooth;
}

.studio-exam-hero {
    align-items: center;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 90% 10%, var(--brand-red-soft), transparent 34%),
        var(--bg-surface);
}

.studio-exam-hero::after {
    content: "";
    position: absolute;
    right: 5%;
    bottom: -72px;
    width: 190px;
    height: 190px;
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    opacity: 0.55;
    pointer-events: none;
}

.studio-exam-hero > * {
    position: relative;
    z-index: 1;
}

.studio-eyebrow-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.studio-exam-overview {
    display: grid;
    grid-template-columns: minmax(300px, 1.45fr) repeat(3, minmax(150px, 0.55fr));
    gap: 10px;
}

.studio-exam-readiness,
.studio-exam-metric {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-exam-readiness__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.studio-exam-readiness__header div,
.studio-exam-metric {
    display: grid;
    gap: 3px;
}

.studio-exam-readiness__header span,
.studio-exam-metric span,
.studio-exam-metric small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.studio-exam-readiness__header strong,
.studio-exam-metric strong {
    color: var(--text-main);
    font-size: 20px;
}

.studio-exam-readiness__header b {
    color: var(--brand-red);
    font-size: 26px;
}

.studio-progress-track {
    height: 7px;
    margin-top: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-surface-soft);
}

.studio-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-red-dark));
    transition: width 0.25s ease;
}

.studio-exam-jumpnav {
    display: flex;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
    scrollbar-width: thin;
}

.studio-exam-jumpnav a {
    min-width: max-content;
    padding: 9px 13px;
    border-radius: 9px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.studio-exam-jumpnav a:hover,
.studio-exam-jumpnav a:focus-visible {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    outline: none;
}

.studio-issue-panel {
    display: block;
}

.studio-issue-panel summary {
    display: flex;
    align-items: center;
    min-height: 28px;
    cursor: pointer;
    list-style: none;
}

.studio-issue-panel summary::-webkit-details-marker {
    display: none;
}

.studio-issue-panel summary span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.studio-issue-panel summary small {
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--warning-bg);
    color: var(--warning-text);
    font-weight: 900;
}

.studio-issue-panel summary::after {
    content: "⌄";
    margin-left: auto;
    color: var(--warning-text);
    font-size: 20px;
    font-weight: 900;
    transition: transform 0.18s ease;
}

.studio-issue-panel[open] summary::after {
    transform: rotate(180deg);
}

.studio-issue-panel ul {
    margin: 12px 0 0;
    padding: 12px 12px 0 30px;
    border-top: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent);
}

.studio-process-map {
    display: grid;
    grid-template-columns:
        minmax(150px, 1fr) 24px minmax(150px, 1fr) 24px
        minmax(150px, 1fr) 24px minmax(150px, 1fr) 24px minmax(150px, 1fr);
    align-items: stretch;
}

.studio-process-map > i {
    align-self: center;
    position: relative;
    height: 1px;
    background: var(--border-strong);
}

.studio-process-map > i::after {
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    width: 6px;
    height: 6px;
    border: solid var(--border-strong);
    border-width: 1px 1px 0 0;
    transform: rotate(45deg);
}

.studio-process-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    min-height: 82px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.studio-process-step > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.studio-process-step div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.studio-process-step strong {
    color: var(--text-main);
    font-size: 13px;
}

.studio-process-step small {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.studio-process-step.is-ready {
    border-color: color-mix(in srgb, var(--success-text) 28%, var(--border-soft));
    background: color-mix(in srgb, var(--success-bg) 70%, var(--bg-surface));
}

.studio-process-step.is-ready > span {
    background: var(--success-bg);
    color: var(--success-text);
}

.studio-process-step.is-warning > span {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.studio-process-step.is-separate {
    border-style: dashed;
}

.studio-exam-section {
    scroll-margin-top: 18px;
}

.studio-exam-section .studio-disclosure__summary > div:first-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 11px;
}

.studio-exam-section .studio-disclosure__summary h3,
.studio-exam-section .studio-disclosure__summary p {
    grid-column: 2;
}

.studio-section-number {
    display: grid;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 11px;
    font-weight: 900;
}

.studio-policy-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--success-text) 28%, var(--border-soft));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--success-bg) 70%, var(--bg-surface));
}

.studio-policy-callout > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: var(--success-bg);
    color: var(--success-text);
    font-weight: 900;
}

.studio-policy-callout strong,
.studio-policy-callout p {
    margin: 0;
}

.studio-policy-callout p {
    margin-top: 4px;
    color: var(--text-muted);
    line-height: 1.5;
}

.studio-toggle-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    min-height: 76px;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
    cursor: pointer;
}

.studio-toggle-card:hover {
    border-color: var(--border-accent);
}

.studio-toggle-card input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
}

.studio-toggle-card span,
.studio-toggle-card small {
    display: block;
}

.studio-toggle-card strong {
    color: var(--text-main);
}

.studio-toggle-card small {
    margin-top: 4px;
    color: var(--text-muted);
    line-height: 1.45;
}

.studio-toggle-card--publish {
    min-height: 0;
    margin: 14px 0;
}

.studio-field-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.studio-field-heading h3,
.studio-field-heading strong,
.studio-field-heading small {
    margin: 0;
}

.studio-field-heading div {
    display: grid;
    gap: 4px;
}

.studio-field-heading small {
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.45;
}

.studio-field-heading > span {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

[data-required-courses] {
    transition: opacity 0.18s ease;
}

[data-required-courses].is-context-muted {
    opacity: 0.58;
}

[data-required-courses].is-context-muted .studio-choice-list {
    pointer-events: none;
}

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

.studio-requirement-card {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-requirement-card .studio-choice-list {
    margin-top: 12px;
}

.studio-selected-resources {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.studio-selected-resources a {
    display: grid;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--bg-surface);
    color: var(--text-main);
    text-decoration: none;
}

.studio-selected-resources a:hover,
.studio-selected-resources a:focus-visible {
    border-color: var(--border-accent);
    outline: none;
}

.studio-selected-resources span {
    font-size: 12px;
    font-weight: 900;
}

.studio-selected-resources small {
    color: var(--text-muted);
}

.studio-publish-card {
    overflow: hidden;
    background:
        linear-gradient(145deg, var(--brand-red-soft), transparent 58%),
        var(--bg-surface);
}

.studio-publish-card__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.studio-publish-card__heading span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-publish-card__heading h3 {
    margin-top: 4px;
}

.studio-status-orb {
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border: 3px solid var(--bg-surface);
    border-radius: 50%;
    background: var(--warning-text);
    box-shadow: 0 0 0 3px var(--warning-bg);
}

.studio-status-orb.is-ready {
    background: var(--success-text);
    box-shadow: 0 0 0 3px var(--success-bg);
}

.studio-save-wide,
.studio-side-actions .btn {
    width: 100%;
}

.studio-readiness-list {
    display: grid;
    gap: 4px;
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
}

.studio-readiness-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
}

.studio-readiness-list li:last-child {
    border-bottom: 0;
}

.studio-readiness-list li > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warning-text);
    box-shadow: 0 0 0 4px var(--warning-bg);
}

.studio-readiness-list li.is-ready > span {
    background: var(--success-text);
    box-shadow: 0 0 0 4px var(--success-bg);
}

.studio-readiness-list strong,
.studio-readiness-list small {
    display: block;
}

.studio-readiness-list strong {
    color: var(--text-main);
    font-size: 12px;
}

.studio-readiness-list small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 11px;
}

.studio-readiness-note {
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.studio-delete-disabled {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-soft);
    background: var(--neutral-bg);
    cursor: help;
}

.studio-delete-disabled--block {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    line-height: 1.4;
    padding: 10px 16px;
    text-align: center;
    cursor: default;
}

.studio-operation-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0;
}

.studio-operation-stats div {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--bg-surface-soft);
}

.studio-operation-stats strong {
    font-size: 20px;
}

.studio-operation-stats span {
    color: var(--text-muted);
    font-size: 11px;
}

.studio-side-actions {
    display: grid;
    gap: 8px;
}

.studio-safety-note p {
    margin: 8px 0 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.studio-safety-note code {
    display: block;
    padding: 8px 9px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-conversion-confirm {
    flex-basis: 100%;
    margin-top: 4px;
}

.studio-editor__textarea {
    width: 100%;
    min-height: 520px;
    resize: vertical;
    white-space: pre-wrap;
}

.studio-editor__textarea--summary {
    min-height: 118px;
}

.studio-settings-box {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

.studio-settings-box > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}

.studio-settings-box > summary::-webkit-details-marker {
    display: none;
}

.studio-settings-box > summary span:first-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.studio-settings-box > summary strong {
    color: var(--text-main);
    font-size: 16px;
}

.studio-settings-box > summary small,
.studio-settings-box__summary-meta {
    color: var(--text-muted);
    font-size: 12px;
}

.studio-settings-box__summary-meta {
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg-surface-soft);
    font-weight: 800;
}

.studio-settings-box[open] > summary {
    border-bottom: 1px solid var(--border-soft);
}

.studio-course-settings-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
}

.studio-course-settings-form .form-group {
    margin: 0;
}

.studio-course-settings-form .form-group small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.studio-form-wide {
    grid-column: 1 / -1;
}

.studio-course-settings-form__checks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 22px;
}

.studio-course-settings-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
}

.studio-course-settings-form__footer p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.studio-editor-grid {
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(460px, 1.1fr);
    gap: 16px;
    align-items: start;
}

.studio-editor-grid--fullscreen {
    position: fixed;
    z-index: 2000;
    inset: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-main);
    box-shadow: var(--shadow-strong);
}

.studio-editor-grid--fullscreen .studio-editor-writing,
.studio-editor-grid--fullscreen .studio-editor-preview {
    max-height: calc(100vh - 48px);
}

.studio-editor-grid--fullscreen .studio-editor-preview {
    position: static;
    height: calc(100vh - 48px);
}

.studio-editor-grid--fullscreen .studio-editor__textarea {
    min-height: calc(100vh - 154px);
}

.studio-editor-fullscreen-active {
    overflow: hidden;
}

.studio-editor-grid[data-editor-mode="write"],
.studio-editor-grid[data-editor-mode="preview"] {
    grid-template-columns: minmax(0, 1fr);
}

.studio-editor-grid[data-editor-mode="write"] .studio-editor-preview,
.studio-editor-grid[data-editor-mode="preview"] .studio-editor-writing {
    display: none;
}

.studio-editor-modebar {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-editor-mode {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.studio-editor-mode:hover,
.studio-editor-mode:focus-visible,
.studio-editor-mode.is-active {
    background: var(--brand-red-soft);
    color: var(--brand-red);
    outline: none;
}

.studio-editor-preview {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 18px;
    height: clamp(620px, calc(100vh - 36px), 900px);
    min-height: 620px;
    overflow: hidden;
    padding: 0;
}

.studio-editor-preview__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface-soft);
}

.studio-editor-preview__header h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.studio-editor-preview__header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.studio-editor-preview__badge {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 12px;
    font-weight: 900;
}

.studio-preview-block,
#studio-content-preview {
    padding: 18px;
}

.studio-preview-block {
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface-soft);
}

.studio-preview-block h4 {
    margin: 0 0 10px;
    color: var(--brand-red);
    font-size: 13px;
    text-transform: uppercase;
}

#studio-content-preview {
    flex: 1;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

.studio-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface-soft);
}

.studio-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding-right: 8px;
    border-right: 1px solid var(--border-soft);
}

.studio-toolbar-group--utility {
    margin-left: auto;
    padding-right: 0;
    border-right: 0;
}

.studio-toolbar .editor-btn,
.studio-toolbar-menu summary,
.studio-find-bar .editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--bg-surface);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 900;
}

.studio-toolbar .editor-btn:hover,
.studio-toolbar .editor-btn:focus-visible,
.studio-toolbar-menu summary:hover,
.studio-toolbar-menu summary:focus-visible,
.studio-find-bar .editor-btn:hover,
.studio-find-bar .editor-btn:focus-visible {
    border-color: var(--border-accent);
    background: var(--brand-red-soft);
    color: var(--brand-red);
    outline: none;
}

.studio-toolbar .editor-btn--icon,
.studio-find-bar .editor-btn--icon {
    width: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 17px;
}

.studio-toolbar .editor-btn--symbol {
    width: 32px;
    min-width: 32px;
    padding: 0;
    font-family: inherit;
}

.studio-toolbar .studio-history-btn {
    gap: 6px;
    padding: 0 9px;
    color: var(--text-muted);
}

.studio-history-btn__icon {
    font-size: 17px;
    line-height: 1;
}

.studio-history-btn__label {
    font-size: 11px;
}

.studio-toolbar-menu {
    position: relative;
}

.studio-toolbar-menu summary {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
}

.studio-toolbar-menu summary::-webkit-details-marker {
    display: none;
}

.studio-toolbar-menu summary::after {
    content: "⌄";
    margin-left: 7px;
    color: var(--text-muted);
}

.studio-toolbar-menu[open] summary {
    border-color: var(--border-accent);
    background: var(--brand-red-soft);
    color: var(--brand-red);
}

.studio-toolbar-menu__content {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    gap: 6px;
    min-width: 180px;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    box-shadow: var(--shadow-card);
}

.studio-toolbar-menu__content .editor-btn {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
}

.studio-find-bar {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto repeat(5, auto);
    gap: 6px;
    align-items: center;
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface-soft);
}

.studio-find-bar[hidden] {
    display: none;
}

.studio-find-bar label,
.studio-find-bar input {
    min-width: 0;
    width: 100%;
}

.studio-find-bar input {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 13px;
}

.studio-find-bar__count {
    min-width: 44px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.studio-find-bar .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.studio-slash-menu {
    position: absolute;
    z-index: 30;
    display: grid;
    gap: 4px;
    width: min(430px, calc(100% - 48px));
    max-height: 360px;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    box-shadow: var(--shadow-strong);
}

.studio-slash-menu[hidden] {
    display: none;
}

.studio-slash-command {
    display: grid;
    grid-template-columns: minmax(100px, 0.42fr) auto minmax(130px, 1fr);
    gap: 9px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    text-align: left;
}

.studio-slash-command:hover,
.studio-slash-command.is-active {
    background: var(--brand-red-soft);
}

.studio-slash-command code,
.studio-slash-command span {
    color: var(--text-muted);
    font-size: 12px;
}

.studio-slash-command span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-editor-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 34px;
    padding: 8px 2px 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.studio-editor-statusbar [data-editor-save-status]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--success-text);
}

.studio-editor-statusbar [data-editor-save-status].is-dirty {
    color: var(--warning-text);
}

.studio-editor-statusbar [data-editor-save-status].is-dirty::before {
    background: var(--warning-text);
}

.studio-editor-preview__badge[data-state="loading"] {
    opacity: 0.72;
}

.studio-editor-preview__badge[data-state="error"] {
    background: rgba(220, 38, 38, 0.14);
    color: var(--brand-red);
}

.studio-dropzone {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 112px;
    place-items: center;
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
    text-align: center;
}

.studio-dropzone:hover,
.studio-dropzone.is-dragover {
    border-color: var(--border-accent);
    background: var(--brand-red-soft);
}

.studio-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.studio-dropzone span {
    color: var(--text-muted);
    font-size: 12px;
}

.studio-media-list,
.studio-video-form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.studio-quality-list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.studio-quality-list li {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-weight: 800;
}

.studio-quality-list li span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--text-muted);
}

.studio-quality-list .is-ok span {
    background: var(--success-text);
}

.studio-quality-list .is-warn span {
    background: var(--brand-red);
}

.studio-quality-list .is-muted {
    opacity: 0.72;
}

.studio-media-item,
.studio-video-item {
    display: grid;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-media-item {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
}

.studio-media-item img {
    width: 78px;
    height: 58px;
    border-radius: 10px;
    object-fit: cover;
}

.studio-media-item strong,
.studio-video-item strong {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-media-alt {
    width: 100%;
    min-height: 34px;
    margin: 8px 0;
    font-size: 12px;
}

.studio-video-item small {
    color: var(--text-muted);
}

.status-ready,
.status-markdown {
    background: rgba(34, 197, 94, 0.14);
    color: var(--success-text);
}

.status-attention,
.status-legacy {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.status-plain,
.status-empty {
    background: var(--bg-surface-soft);
    color: var(--text-muted);
}

/* Quiz analytics */
.studio-analytics-page {
    min-width: 0;
}

.studio-analytics-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    align-items: stretch;
    overflow: hidden;
    border-top: 3px solid var(--brand-red);
}

.studio-analytics-scope {
    display: grid;
    gap: 5px;
    align-content: center;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-analytics-scope span,
.studio-analytics-scope small {
    color: var(--text-muted);
}

.studio-analytics-scope strong {
    color: var(--text-main);
    font-size: 21px;
}

.studio-analytics-filters {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-analytics-filters > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 12px 16px;
    color: var(--text-main);
    cursor: pointer;
    list-style: none;
}

.studio-analytics-filters > summary::-webkit-details-marker {
    display: none;
}

.studio-analytics-filters > summary:focus-visible {
    outline: 2px solid var(--border-accent);
    outline-offset: -3px;
    border-radius: var(--radius-lg);
}

.studio-analytics-filters > summary::after {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    content: "";
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.studio-analytics-filters[open] > summary::after {
    transform: rotate(225deg);
}

.studio-analytics-filters > summary span {
    display: grid;
    gap: 2px;
}

.studio-analytics-filters > summary small {
    color: var(--text-muted);
    font-weight: 600;
}

.studio-analytics-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 0 16px 16px;
}

.studio-analytics-filter-grid .form-group {
    min-width: 0;
    margin: 0;
}

.studio-analytics-filter-grid select {
    width: 100%;
    min-width: 0;
}

.studio-analytics-filter-actions {
    display: flex;
    gap: 8px;
}

.studio-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.studio-analytics-kpis article {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-analytics-kpis span,
.studio-analytics-kpis small {
    color: var(--text-muted);
}

.studio-analytics-kpis strong {
    color: var(--text-main);
    font-size: clamp(25px, 2.2vw, 36px);
    line-height: 1;
}

.studio-analytics-context {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.studio-analytics-context > span {
    padding: 8px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 13px;
}

.studio-analytics-context strong {
    color: var(--text-main);
}

.studio-analytics-context .is-warning {
    border-color: var(--warning-text);
    background: var(--warning-bg);
    color: var(--warning-text);
}

.studio-analytics-quality-note {
    align-items: center;
}

.studio-analytics-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    gap: 16px;
    align-items: stretch;
}

.studio-analytics-panel {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-analytics-panel > header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.studio-analytics-panel h3,
.studio-analytics-panel p {
    margin: 0;
}

.studio-analytics-panel > header > span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.studio-analytics-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--brand-red);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.studio-analytics-trend-list,
.studio-analytics-distribution,
.studio-analytics-question-list {
    display: grid;
    gap: 10px;
}

.studio-analytics-trend-list article {
    display: grid;
    grid-template-columns: 66px minmax(100px, 1fr) 88px minmax(160px, auto);
    gap: 10px;
    align-items: center;
    min-width: 0;
}

.studio-analytics-trend-list strong,
.studio-analytics-trend-list span,
.studio-analytics-trend-list small {
    white-space: nowrap;
}

.studio-analytics-trend-list span {
    color: var(--text-main);
    font-weight: 800;
}

.studio-analytics-trend-list small {
    color: var(--text-muted);
    text-align: right;
}

.studio-analytics-panel progress {
    display: block;
    width: 100%;
    height: 9px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--bg-surface-soft);
}

.studio-analytics-panel progress::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--bg-surface-soft);
}

.studio-analytics-panel progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--brand-red);
}

.studio-analytics-panel progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--brand-red);
}

.studio-analytics-suppressed-bar {
    width: 100%;
    height: 9px;
    border-radius: 999px;
    background: repeating-linear-gradient(
        135deg,
        var(--bg-surface-soft),
        var(--bg-surface-soft) 6px,
        var(--border-soft) 6px,
        var(--border-soft) 12px
    );
}

.studio-analytics-distribution article {
    display: grid;
    gap: 7px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.studio-analytics-distribution article:last-child {
    border-bottom: 0;
}

.studio-analytics-distribution article > div {
    display: flex;
    justify-content: space-between;
}

.studio-analytics-distribution span,
.studio-analytics-distribution small {
    color: var(--text-muted);
}

.studio-analytics-table-section,
.studio-analytics-question-section {
    min-width: 0;
}

.studio-analytics-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.studio-analytics-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.studio-analytics-caption,
.studio-analytics-mobile-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.studio-analytics-table-value {
    min-width: 0;
}

.studio-analytics-table th,
.studio-analytics-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-main);
    text-align: left;
    vertical-align: middle;
}

.studio-analytics-table thead th {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.studio-analytics-table tbody tr:last-child > * {
    border-bottom: 0;
}

.studio-analytics-table tbody tr:hover {
    background: var(--bg-surface-soft);
}

.studio-analytics-table a {
    color: var(--text-main);
    overflow-wrap: anywhere;
    text-decoration: none;
}

.studio-analytics-table a:hover,
.studio-analytics-table a:focus-visible {
    color: var(--brand-red);
}

.studio-analytics-table th small,
.studio-analytics-table td small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-weight: 600;
}

.studio-analytics-question-list article {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-analytics-question-score {
    display: grid;
    place-items: center;
    min-height: 62px;
    padding: 8px;
    border-radius: 14px;
    background: var(--danger-bg);
    color: var(--danger-text);
    text-align: center;
}

.studio-analytics-question-score strong {
    font-size: 20px;
}

.studio-analytics-question-score span {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-analytics-question-copy {
    min-width: 0;
}

.studio-analytics-question-copy > span,
.studio-analytics-question-copy p,
.studio-analytics-question-copy small {
    color: var(--text-muted);
}

.studio-analytics-question-copy > span {
    font-size: 12px;
    font-weight: 800;
}

.studio-analytics-question-copy h4 {
    display: -webkit-box;
    margin: 4px 0 6px;
    color: var(--text-main);
    overflow-wrap: anywhere;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.studio-analytics-question-copy p {
    margin: 0;
    font-size: 13px;
}

.studio-analytics-question-copy small {
    display: inline-block;
    margin-top: 7px;
}

.studio-analytics-empty {
    display: flex;
    gap: 14px;
    align-items: center;
    min-height: 130px;
    padding: 22px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
}

.studio-analytics-empty--scope {
    min-height: 180px;
}

.studio-analytics-empty--compact {
    min-height: 90px;
    box-shadow: none;
}

.studio-analytics-empty__icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 25px;
    font-weight: 900;
}

.studio-analytics-empty h3,
.studio-analytics-empty p {
    margin: 0;
}

.studio-analytics-empty p {
    margin-top: 4px;
    color: var(--text-muted);
}

.studio-analytics-view-nav {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 4px;
    align-self: flex-start;
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-analytics-view-nav a {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border-radius: calc(var(--radius-lg) - 5px);
    color: var(--text-muted);
    font-weight: 800;
    text-decoration: none;
}

.studio-analytics-view-nav a small {
    color: inherit;
    font-size: 11px;
    font-weight: 600;
}

.studio-analytics-view-nav a:hover,
.studio-analytics-view-nav a:focus-visible {
    background: var(--bg-surface-soft);
    color: var(--text-main);
}

.studio-analytics-view-nav a.is-active {
    background: var(--brand-red-soft);
    color: var(--brand-red);
}

.studio-team-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
    overflow: hidden;
    border-top: 3px solid var(--brand-red);
}

.studio-team-hero__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(118px, 1fr));
    gap: 10px;
    min-width: min(100%, 290px);
}

.studio-team-hero__summary article {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-team-hero__summary strong {
    color: var(--text-main);
    font-size: 22px;
    line-height: 1;
}

.studio-team-hero__summary span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.studio-analytics-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.studio-analytics-active-filters span {
    padding: 5px 9px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.studio-team-attention {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.studio-team-attention article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-team-attention__value {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--bg-surface-soft);
    color: var(--text-main);
    font-size: 20px;
    font-weight: 900;
}

.studio-team-attention article.is-warning .studio-team-attention__value {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.studio-team-attention article.is-danger .studio-team-attention__value {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.studio-team-attention article.is-info .studio-team-attention__value {
    background: var(--info-bg);
    color: var(--info-text);
}

.studio-team-attention h3,
.studio-team-attention p {
    margin: 0;
}

.studio-team-attention h3 {
    color: var(--text-main);
    font-size: 14px;
}

.studio-team-attention p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 12px;
}

.studio-team-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-team-panel__header {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    justify-content: space-between;
    padding: 18px;
    border-bottom: 1px solid var(--border-soft);
}

.studio-team-panel__header h3,
.studio-team-panel__header p {
    margin: 0;
}

.studio-team-panel__header p {
    margin-top: 4px;
    color: var(--text-muted);
}

.studio-team-toolbar {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(190px, auto) auto;
    gap: 8px;
    min-width: min(100%, 600px);
}

.studio-team-toolbar input,
.studio-team-toolbar select {
    width: 100%;
    min-width: 0;
}

.studio-team-toolbar .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.studio-team-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.studio-team-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.studio-team-table th,
.studio-team-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-main);
    text-align: left;
    vertical-align: middle;
}

.studio-team-table thead th {
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.studio-team-table tbody tr:hover {
    background: var(--bg-surface-soft);
}

.studio-team-table tbody tr:last-child > * {
    border-bottom: 0;
}

.studio-team-rank {
    width: 42px;
    color: var(--text-muted);
    font-weight: 900;
    text-align: center;
}

.studio-team-person {
    display: grid;
    gap: 3px;
    min-width: 190px;
}

.studio-team-person a {
    color: var(--text-main);
    font-weight: 900;
    text-decoration: none;
}

.studio-team-person a:hover,
.studio-team-person a:focus-visible {
    color: var(--brand-red);
}

.studio-team-person small,
.studio-team-metric small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
}

.studio-team-metric {
    min-width: 100px;
}

.studio-team-metric strong {
    color: var(--text-main);
    font-size: 16px;
}

.studio-team-score {
    display: grid;
    grid-template-columns: 45px minmax(70px, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 130px;
}

.studio-team-score progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--bg-surface-soft);
}

.studio-team-score progress::-webkit-progress-bar {
    background: var(--bg-surface-soft);
}

.studio-team-score progress::-webkit-progress-value,
.studio-team-score progress::-moz-progress-bar {
    background: var(--brand-red);
}

.studio-team-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--bg-surface-soft);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.studio-team-status.is-passed {
    background: var(--success-bg);
    color: var(--success-text);
}

.studio-team-status.is-failed {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.studio-team-status.is-open,
.studio-team-status.is-in_progress {
    background: var(--info-bg);
    color: var(--info-text);
}

.studio-team-status.is-warning,
.studio-team-status.is-attention {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.studio-analytics-pagination {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-top: 1px solid var(--border-soft);
}

.studio-analytics-pagination__actions {
    display: flex;
    gap: 8px;
}

.studio-employee-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border-top: 3px solid var(--brand-red);
}

.studio-employee-identity {
    display: flex;
    gap: 14px;
    align-items: center;
}

.studio-employee-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--brand-red-soft);
    color: var(--brand-red);
    font-size: 21px;
    font-weight: 900;
}

.studio-employee-identity h2,
.studio-employee-identity p {
    margin: 0;
}

.studio-employee-identity p {
    margin-top: 4px;
    color: var(--text-muted);
}

.studio-employee-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.studio-employee-summary article {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-soft);
}

.studio-employee-summary span,
.studio-employee-summary small {
    color: var(--text-muted);
}

.studio-employee-summary strong {
    color: var(--text-main);
    font-size: 26px;
}

.studio-attempt-list {
    display: grid;
    gap: 10px;
}

.studio-attempt-row {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) repeat(3, minmax(95px, auto)) auto;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface-soft);
}

.studio-attempt-row h4,
.studio-attempt-row p {
    margin: 0;
}

.studio-attempt-row p,
.studio-attempt-row small {
    color: var(--text-muted);
}

.studio-attempt-row__metric {
    display: grid;
    gap: 3px;
}

.studio-attempt-row__metric span {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-answer-review-list {
    display: grid;
    gap: 12px;
}

.studio-answer-review {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-left: 4px solid var(--danger-text);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.studio-answer-review.is-correct {
    border-left-color: var(--success-text);
}

.studio-answer-review.is-legacy {
    border-left-color: var(--warning-text);
}

.studio-answer-review__number {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--danger-bg);
    color: var(--danger-text);
    font-weight: 900;
}

.studio-answer-review.is-correct .studio-answer-review__number {
    background: var(--success-bg);
    color: var(--success-text);
}

.studio-answer-review.is-legacy .studio-answer-review__number {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.studio-answer-review__body {
    min-width: 0;
}

.studio-answer-review__body h3,
.studio-answer-review__body p {
    margin: 0;
}

.studio-answer-review__body h3 {
    overflow-wrap: anywhere;
}

.studio-answer-review__topic {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.studio-answer-review__answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.studio-answer-review__answers div,
.studio-answer-review__explanation {
    padding: 11px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-soft);
}

.studio-answer-review__answers span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.studio-answer-review__explanation {
    margin-top: 10px;
    color: var(--text-muted);
}

.studio-answer-review__explanation strong {
    color: var(--text-main);
}

@media (max-width: 1280px) {
    .studio-exam-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .studio-exam-readiness {
        grid-column: 1 / -1;
    }

    .studio-process-map {
        grid-template-columns: repeat(5, minmax(150px, 1fr));
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .studio-process-map > i {
        display: none;
    }

    .studio-editor-layout,
    .studio-editor-grid,
    .studio-course-row,
    .studio-filter-form,
    .studio-create-form {
        grid-template-columns: 1fr;
    }

    .studio-assessment-layout,
    .studio-assessment-layout--exam {
        grid-template-columns: 1fr;
    }

    .studio-assessment-side {
        position: static;
    }

    .studio-rubric-row,
    .studio-category-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-editor-side {
        position: static;
    }

    .studio-editor-preview {
        position: static;
        height: min(760px, calc(100vh - 32px));
        min-height: 520px;
    }

    .studio-editor-grid--fullscreen {
        grid-template-columns: 1fr !important;
        overflow: auto;
    }

    .studio-find-bar {
        grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto repeat(3, auto);
    }

    .studio-find-bar [data-editor-replace-one],
    .studio-find-bar [data-editor-replace-all] {
        display: none;
    }

    .studio-course-settings-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .studio-analytics-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

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

@media (max-width: 1080px) {
    .studio-analytics-chart-grid {
        grid-template-columns: 1fr;
    }

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

    .studio-team-hero,
    .studio-employee-hero {
        grid-template-columns: 1fr;
    }

    .studio-team-panel__header {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-team-toolbar {
        min-width: 0;
        width: 100%;
    }

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

    .studio-attempt-row {
        grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(90px, auto));
    }

    .studio-attempt-row > .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .studio-exam-overview,
    .studio-requirements-grid {
        grid-template-columns: 1fr;
    }

    .studio-attempt-policy__heading {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-attempt-policy__status {
        max-width: none;
        text-align: left;
    }

    .studio-attempt-policy__fields {
        grid-template-columns: 1fr;
    }

    .studio-exam-readiness {
        grid-column: auto;
    }

    .studio-process-map {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .studio-exam-section .studio-disclosure__summary > div:first-child {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .studio-exam-section .studio-disclosure__summary {
        align-items: flex-start;
    }

    .studio-hero,
    .studio-lesson-row,
    .studio-section__header,
    .studio-disclosure__summary,
    .studio-course-card__top,
    .studio-lesson-row__top {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .studio-hero,
    .studio-section__header,
    .studio-disclosure__summary,
    .studio-course-card__top,
    .studio-lesson-row__top,
    .studio-dashboard-stats {
        display: grid;
    }

    .studio-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    .studio-lesson-row {
        display: grid;
    }

    .studio-disclosure__summary {
        padding-right: 48px;
    }

    .studio-workspace-nav {
        align-items: flex-start;
    }

    .studio-question-bank-filters {
        grid-template-columns: 1fr;
    }

    .studio-question-bank-toolbar > .btn {
        width: 100%;
    }

    .studio-breadcrumbs li:not(:last-child) {
        display: none;
    }

    .studio-breadcrumbs li + li::before {
        display: none;
    }

    .studio-lesson-pager__position {
        min-width: 52px;
        padding: 0 6px;
    }

    .studio-toolbar {
        align-items: stretch;
    }

    .studio-editor-modebar {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .studio-toolbar-group {
        padding-right: 0;
        border-right: 0;
    }

    .studio-toolbar-group--utility {
        margin-left: 0;
    }

    .studio-history-btn__label {
        display: none;
    }

    .studio-toolbar .studio-history-btn {
        width: 32px;
        min-width: 32px;
        padding: 0;
    }

    .studio-find-bar {
        grid-template-columns: minmax(0, 1fr) auto auto auto;
    }

    .studio-find-bar label:nth-of-type(2),
    .studio-find-bar [data-editor-replace-one],
    .studio-find-bar [data-editor-replace-all] {
        display: none;
    }

    .studio-slash-command {
        grid-template-columns: 1fr auto;
    }

    .studio-slash-command span {
        display: none;
    }

    .studio-course-settings-form {
        grid-template-columns: 1fr;
    }

    .studio-form-wide {
        grid-column: auto;
    }

    .studio-course-settings-form__checks {
        padding-top: 0;
    }

    .studio-course-settings-form__footer {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-course-settings-form__footer .btn {
        width: 100%;
    }

    .studio-module-nav,
    .studio-flow-grid,
    .studio-settings-grid,
    .studio-settings-grid--question,
    .studio-check-grid,
    .studio-rubric-row,
    .studio-category-row,
    .studio-option-row,
    .studio-question-row {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .studio-flow-grid__parallel {
        grid-column: auto;
    }

    .studio-flow-preview {
        grid-template-columns: 1fr;
    }

    .studio-flow-preview b {
        transform: rotate(90deg);
    }

    .studio-module-nav {
        display: grid;
    }

    .studio-analytics-hero,
    .studio-analytics-question-list article {
        grid-template-columns: 1fr;
    }

    .studio-analytics-scope {
        width: 100%;
    }

    .studio-analytics-trend-list article {
        grid-template-columns: 58px minmax(90px, 1fr) auto;
    }

    .studio-analytics-trend-list article small {
        grid-column: 2 / -1;
        white-space: normal;
        text-align: left;
    }

    .studio-analytics-question-score {
        place-items: start;
        min-height: 0;
    }

    .studio-analytics-question-score span {
        display: none;
    }

    .studio-analytics-question-list .btn {
        width: 100%;
    }

    .studio-analytics-view-nav {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .studio-team-attention,
    .studio-team-toolbar,
    .studio-answer-review__answers {
        grid-template-columns: 1fr;
    }

    .studio-team-toolbar .btn {
        width: 100%;
    }

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

    .studio-attempt-row > div:first-child,
    .studio-attempt-row > .btn {
        grid-column: 1 / -1;
    }

    .studio-answer-review {
        grid-template-columns: 1fr;
    }

    .studio-answer-review__number {
        width: 36px;
        height: 36px;
    }

    .studio-team-table {
        display: block;
        min-width: 0;
    }

    .studio-team-table thead {
        display: none;
    }

    .studio-team-table tbody {
        display: grid;
        gap: 10px;
        padding: 12px;
    }

    .studio-team-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 14px;
        padding: 12px;
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        background: var(--bg-surface-soft);
    }

    .studio-team-table th,
    .studio-team-table td {
        display: grid;
        grid-template-columns: minmax(84px, 0.45fr) minmax(0, 1fr);
        gap: 8px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-soft);
    }

    .studio-team-table .studio-team-rank,
    .studio-team-table th[scope="row"] {
        grid-column: 1 / -1;
    }

    .studio-team-table .studio-analytics-mobile-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 900;
        white-space: normal;
        text-transform: uppercase;
    }
}

@media (max-width: 480px) {
    .studio-analytics-filter-grid,
    .studio-analytics-kpis {
        grid-template-columns: 1fr;
    }

    .studio-analytics-filter-actions {
        grid-column: auto;
        flex-direction: column;
    }

    .studio-analytics-filter-actions .btn {
        width: 100%;
    }

    .studio-analytics-context {
        display: grid;
        grid-template-columns: 1fr;
    }

    .studio-team-hero__summary,
    .studio-employee-summary {
        grid-template-columns: 1fr;
    }

    .studio-analytics-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .studio-analytics-pagination__actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .studio-analytics-pagination__actions .btn {
        width: 100%;
    }

    .studio-team-table tr {
        grid-template-columns: 1fr;
    }

    .studio-team-table td,
    .studio-team-table th {
        grid-column: auto;
    }

    .studio-analytics-trend-list article {
        grid-template-columns: 54px minmax(70px, 1fr) auto;
        font-size: 12px;
    }

    .studio-analytics-panel {
        padding: 14px;
    }

    .studio-analytics-table {
        display: block;
        min-width: 0;
    }

    .studio-analytics-table thead {
        display: none;
    }

    .studio-analytics-table tbody {
        display: grid;
        gap: 10px;
    }

    .studio-analytics-table tr {
        display: grid;
        gap: 0;
        padding: 12px;
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        background: var(--bg-surface-soft);
    }

    .studio-analytics-table th,
    .studio-analytics-table td {
        display: grid;
        grid-template-columns: minmax(96px, 0.45fr) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-soft);
    }

    .studio-analytics-table th {
        display: grid;
    }

    .studio-analytics-mobile-label {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        white-space: normal;
        text-transform: uppercase;
    }

    .studio-analytics-table-value {
        overflow-wrap: anywhere;
        text-align: right;
    }

    .studio-analytics-table-value small {
        text-align: right;
    }

    .studio-analytics-table tr > *:last-child {
        border-bottom: 0;
    }
}