﻿/* VetEntrusted Exam AI Studio - wwwroot/css/exam-ai-studio.css */
.exam-ai-studio {
    --exam-ai-primary: #0d9488;
    --exam-ai-primary-dark: #0f766e;
    --exam-ai-primary-soft: #ccfbf1;
    --exam-ai-primary-ultra-soft: #f0fdfa;
    --exam-ai-blue: #2563eb;
    --exam-ai-blue-soft: #dbeafe;
    --exam-ai-purple: #7c3aed;
    --exam-ai-purple-soft: #ede9fe;
    --exam-ai-success: #16a34a;
    --exam-ai-success-soft: #dcfce7;
    --exam-ai-warning: #d97706;
    --exam-ai-warning-soft: #fef3c7;
    --exam-ai-danger: #dc2626;
    --exam-ai-danger-soft: #fee2e2;
    --exam-ai-info: #0284c7;
    --exam-ai-info-soft: #e0f2fe;
    --exam-ai-page: #f8fafc;
    --exam-ai-surface: #ffffff;
    --exam-ai-surface-soft: #f8fafc;
    --exam-ai-text: #0f172a;
    --exam-ai-text-muted: #64748b;
    --exam-ai-text-soft: #475569;
    --exam-ai-border: #e2e8f0;
    --exam-ai-border-strong: #cbd5e1;
    --exam-ai-shadow-sm: 0 8px 24px rgba(15, 23, 42, 0.06);
    --exam-ai-shadow-lg: 0 30px 90px rgba(15, 23, 42, 0.28);
    --exam-ai-radius-md: .9rem;
    --exam-ai-radius-lg: 1.15rem;
    --exam-ai-radius-xl: 1.35rem;
    --exam-ai-radius-pill: 999px;
    --exam-ai-shell-left: 274px;
    --exam-ai-shell-right: 318px;
    --exam-ai-shell-top: 74px;
    --exam-ai-modal-max-width: 1480px;
    --exam-ai-modal-max-height: calc(100vh - var(--exam-ai-shell-top) - 28px);
    color: var(--exam-ai-text);
}

    .exam-ai-studio .exam-ai-modal-backdrop, .exam-ai-modal-backdrop {
        position: fixed;
        top: var(--exam-ai-shell-top,74px);
        left: var(--exam-ai-shell-left,274px);
        right: var(--exam-ai-shell-right,318px);
        bottom: 0;
        z-index: 3600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        background: radial-gradient(circle at top left,rgba(13,148,136,.16),transparent 34rem),radial-gradient(circle at bottom right,rgba(124,58,237,.10),transparent 34rem),rgba(15,23,42,.54);
        backdrop-filter: blur(8px);
        overflow: hidden
    }

    .exam-ai-studio .exam-ai-modal-shell, .exam-ai-modal-shell {
        width: min(100%,var(--exam-ai-modal-max-width));
        height: min(100%,var(--exam-ai-modal-max-height));
        max-height: var(--exam-ai-modal-max-height);
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid rgba(226,232,240,.94);
        border-radius: var(--exam-ai-radius-xl);
        box-shadow: var(--exam-ai-shadow-lg);
        overflow: hidden;
        isolation: isolate
    }

.exam-ai-modal-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg,rgba(240,253,250,.98),rgba(255,255,255,.98));
    border-bottom: 1px solid var(--exam-ai-border)
}

.exam-ai-modal-title-block {
    min-width: 0
}

.exam-ai-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .25rem;
    color: var(--exam-ai-primary-dark);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase
}

.exam-ai-modal-title {
    margin: 0;
    color: var(--exam-ai-text);
    font-size: clamp(1.25rem,2vw,1.85rem);
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -.04em
}

.exam-ai-modal-subtitle {
    margin: .35rem 0 0;
    color: var(--exam-ai-text-muted);
    font-size: .92rem;
    line-height: 1.45
}

.exam-ai-close-button {
    width: 2.45rem;
    height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--exam-ai-border);
    border-radius: 999px;
    background: #fff;
    color: var(--exam-ai-text-soft);
    cursor: pointer
}

    .exam-ai-close-button:hover, .exam-ai-close-button:focus {
        background: var(--exam-ai-danger-soft);
        border-color: #fecaca;
        color: var(--exam-ai-danger);
        box-shadow: 0 0 0 4px rgba(220,38,38,.10);
        outline: none
    }

.exam-ai-stepper {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .55rem;
    padding: .85rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--exam-ai-border)
}

button.exam-ai-step, .exam-ai-step {
    appearance: none;
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    min-width: 0;
    padding: .72rem .78rem;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-lg);
    background: var(--exam-ai-surface-soft);
    color: var(--exam-ai-text-soft);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: .16s ease
}

    .exam-ai-step:hover {
        background: #fff;
        border-color: #99f6e4;
        color: var(--exam-ai-primary-dark);
        box-shadow: 0 8px 20px rgba(13,148,136,.10)
    }

    .exam-ai-step:focus {
        outline: none;
        border-color: var(--exam-ai-primary);
        box-shadow: 0 0 0 4px rgba(13,148,136,.14)
    }

    .exam-ai-step.is-active {
        background: linear-gradient(135deg,var(--exam-ai-primary),var(--exam-ai-primary-dark));
        border-color: var(--exam-ai-primary-dark);
        color: #fff;
        box-shadow: 0 12px 26px rgba(13,148,136,.24)
    }

    .exam-ai-step.is-complete {
        background: var(--exam-ai-primary-ultra-soft);
        border-color: #99f6e4;
        color: var(--exam-ai-primary-dark)
    }

.exam-ai-step-number {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: var(--exam-ai-primary-dark);
    font-size: .82rem;
    font-weight: 900;
    box-shadow: inset 0 0 0 1px rgba(13,148,136,.18)
}

.exam-ai-step.is-active .exam-ai-step-number {
    background: rgba(255,255,255,.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.32)
}

.exam-ai-step-content {
    min-width: 0;
    display: grid;
    gap: .08rem
}

.exam-ai-step-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    font-weight: 900;
    line-height: 1.2
}

.exam-ai-step-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .73rem;
    font-weight: 600;
    opacity: .82;
    line-height: 1.2
}

.exam-ai-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: var(--exam-ai-page)
}

.exam-ai-layout-grid {
    display: grid;
    grid-template-columns: minmax(320px,.88fr) minmax(480px,1.12fr);
    gap: 1rem;
    padding: 1rem
}

    .exam-ai-layout-grid.is-single-column {
        grid-template-columns: 1fr
    }

.exam-ai-settings-card, .exam-ai-question-card {
    background: #fff;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-xl);
    box-shadow: var(--exam-ai-shadow-sm);
    overflow: hidden
}

.exam-ai-settings-card-header {
    padding: 1rem 1rem .85rem;
    border-bottom: 1px solid var(--exam-ai-border);
    background: linear-gradient(135deg,rgba(248,250,252,.96),rgba(255,255,255,.96))
}

.exam-ai-settings-card-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--exam-ai-text);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: -.025em
}

.exam-ai-settings-card-description {
    margin: .35rem 0 0;
    color: var(--exam-ai-text-muted);
    font-size: .86rem;
    line-height: 1.45
}

.exam-ai-settings-card-body {
    padding: 1rem;
    display: grid;
    gap: 1rem
}

.exam-ai-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .9rem
}

.exam-ai-form-field {
    min-width: 0
}

    .exam-ai-form-field.is-wide {
        grid-column: 1/-1
    }

.exam-ai-label {
    display: block;
    margin-bottom: .35rem;
    color: var(--exam-ai-text-soft);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .02em
}

.exam-ai-help-text {
    margin-top: .35rem;
    color: var(--exam-ai-text-muted);
    font-size: .78rem;
    line-height: 1.45
}

.exam-ai-input, .exam-ai-select, .exam-ai-textarea {
    width: 100%;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-md);
    background: #fff;
    color: var(--exam-ai-text);
    font: inherit;
    font-size: .92rem
}

.exam-ai-input, .exam-ai-select {
    min-height: 2.65rem;
    padding: .52rem .72rem
}

.exam-ai-textarea {
    min-height: 150px;
    padding: .72rem;
    resize: vertical;
    line-height: 1.5
}

    .exam-ai-textarea.is-large {
        min-height: 260px
    }

    .exam-ai-input:focus, .exam-ai-select:focus, .exam-ai-textarea:focus {
        outline: none;
        border-color: var(--exam-ai-primary);
        box-shadow: 0 0 0 4px rgba(13,148,136,.14)
    }

.exam-ai-check-list {
    display: grid;
    gap: .65rem
}

.exam-ai-check-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem;
    align-items: start;
    padding: .75rem;
    background: #fff;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-md);
    cursor: pointer
}

    .exam-ai-check-row:hover {
        border-color: #99f6e4;
        background: var(--exam-ai-primary-ultra-soft)
    }

    .exam-ai-check-row input {
        width: 1.05rem;
        height: 1.05rem;
        margin-top: .12rem;
        accent-color: var(--exam-ai-primary)
    }

.exam-ai-check-title {
    display: block;
    color: var(--exam-ai-text);
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.3
}

.exam-ai-check-description {
    display: block;
    margin-top: .18rem;
    color: var(--exam-ai-text-muted);
    font-size: .78rem;
    line-height: 1.45
}

.exam-ai-info-box, .exam-ai-warning-box, .exam-ai-danger-box, .exam-ai-success-box {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem .95rem;
    border-radius: var(--exam-ai-radius-md);
    border: 1px solid transparent;
    font-size: .88rem;
    line-height: 1.5
}

.exam-ai-info-box {
    background: var(--exam-ai-info-soft);
    border-color: #bae6fd;
    color: #075985
}

.exam-ai-warning-box {
    background: var(--exam-ai-warning-soft);
    border-color: #fde68a;
    color: #78350f
}

.exam-ai-danger-box {
    background: var(--exam-ai-danger-soft);
    border-color: #fecaca;
    color: #7f1d1d
}

.exam-ai-success-box {
    background: var(--exam-ai-success-soft);
    border-color: #bbf7d0;
    color: #14532d
}

    .exam-ai-info-box p, .exam-ai-warning-box p, .exam-ai-danger-box p, .exam-ai-success-box p {
        margin: 0;
        display: grid;
        gap: .15rem
    }

.exam-ai-button-row, .exam-ai-footer-button-group, .exam-ai-inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    justify-content: flex-end
}

.exam-ai-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.55rem;
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: .16s ease
}

.exam-ai-button-compact {
    min-height: 2.15rem;
    padding: .4rem .75rem;
    font-size: .8rem
}

.exam-ai-button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(13,148,136,.14)
}

.exam-ai-button:disabled {
    opacity: .62;
    cursor: not-allowed
}

.exam-ai-button-primary {
    background: var(--exam-ai-primary);
    border-color: var(--exam-ai-primary);
    color: #fff
}

    .exam-ai-button-primary:hover {
        background: var(--exam-ai-primary-dark);
        border-color: var(--exam-ai-primary-dark);
        color: #fff
    }

.exam-ai-button-secondary {
    background: #fff;
    border-color: var(--exam-ai-border);
    color: var(--exam-ai-text-soft)
}

    .exam-ai-button-secondary:hover {
        background: var(--exam-ai-surface-soft);
        border-color: var(--exam-ai-border-strong);
        color: var(--exam-ai-text)
    }

.exam-ai-button-purple {
    background: var(--exam-ai-purple);
    border-color: var(--exam-ai-purple);
    color: #fff
}

    .exam-ai-button-purple:hover {
        background: #6d28d9;
        border-color: #6d28d9;
        color: #fff
    }

.exam-ai-button-danger {
    background: var(--exam-ai-danger);
    border-color: var(--exam-ai-danger);
    color: #fff
}

.exam-ai-question-list {
    display: grid;
    gap: 1rem
}

.exam-ai-question-card.is-selected {
    border-color: #99f6e4;
    box-shadow: var(--exam-ai-shadow-sm),0 0 0 4px rgba(13,148,136,.08)
}

.exam-ai-question-card.is-rejected {
    border-color: #fecaca;
    background: linear-gradient(135deg,#fff7f7,#fff)
}

.exam-ai-question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--exam-ai-border);
    background: var(--exam-ai-surface-soft)
}

.exam-ai-question-title-block {
    min-width: 0;
    display: grid;
    gap: .35rem
}

.exam-ai-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem
}

.exam-ai-question-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem
}

.exam-ai-question-body {
    padding: 1rem;
    display: grid;
    gap: 1rem
}

.exam-ai-question-text {
    margin: 0;
    color: var(--exam-ai-text);
    font-size: 1.02rem;
    font-weight: 850;
    line-height: 1.55
}

.exam-ai-case-context {
    padding: .9rem 1rem;
    background: var(--exam-ai-blue-soft);
    border: 1px solid #bfdbfe;
    border-left: 5px solid var(--exam-ai-blue);
    border-radius: var(--exam-ai-radius-md);
    color: #1e3a8a;
    font-size: .92rem;
    line-height: 1.55
}

.exam-ai-learning-goal {
    padding: .75rem .85rem;
    background: var(--exam-ai-primary-ultra-soft);
    border: 1px solid #99f6e4;
    border-radius: var(--exam-ai-radius-md);
    color: var(--exam-ai-primary-dark);
    font-size: .86rem;
    line-height: 1.45
}

.exam-ai-option-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    list-style: none
}

.exam-ai-option {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    padding: .82rem .9rem;
    background: #fff;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-md);
    color: var(--exam-ai-text)
}

.exam-ai-option-letter {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--exam-ai-surface-soft);
    border: 1px solid var(--exam-ai-border);
    color: var(--exam-ai-text-soft);
    font-size: .78rem;
    font-weight: 950
}

.exam-ai-option-content {
    min-width: 0;
    display: grid;
    gap: .35rem
}

.exam-ai-option-text {
    color: var(--exam-ai-text);
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.45
}

.exam-ai-option-textarea {
    min-height: 84px
}

.exam-ai-option-editor-title {
    font-weight: 950;
    color: var(--exam-ai-text)
}

.exam-ai-option-analysis {
    display: grid;
    gap: .35rem;
    color: var(--exam-ai-text-muted);
    font-size: .8rem;
    line-height: 1.45
}

.exam-ai-option-analysis-row {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .6rem
}

.exam-ai-option-analysis-label {
    color: var(--exam-ai-text-soft);
    font-weight: 900
}

.exam-ai-option-correct {
    background: var(--exam-ai-success-soft);
    border-color: #86efac
}

    .exam-ai-option-correct .exam-ai-option-letter {
        background: var(--exam-ai-success);
        border-color: var(--exam-ai-success);
        color: #fff
    }

.exam-ai-option-weak {
    background: var(--exam-ai-warning-soft);
    border-color: #fde68a
}

.exam-ai-option-impossible {
    background: var(--exam-ai-danger-soft);
    border-color: #fecaca
}

    .exam-ai-option-impossible .exam-ai-option-letter {
        background: var(--exam-ai-danger);
        border-color: var(--exam-ai-danger);
        color: #fff
    }

.exam-ai-option-correct-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .65rem;
    background: #fff;
    border: 1px solid var(--exam-ai-border);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 850;
    cursor: pointer
}

    .exam-ai-option-correct-toggle input {
        accent-color: var(--exam-ai-primary)
    }

.exam-ai-quality-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    padding: .3rem .62rem;
    border-radius: 999px;
    border: 1px solid var(--exam-ai-border);
    background: #fff;
    color: var(--exam-ai-text-soft);
    font-size: .78rem;
    font-weight: 950;
    line-height: 1.2;
    white-space: nowrap
}

    .exam-ai-quality-badge.is-compact {
        padding: .2rem .5rem;
        font-size: .72rem
    }

    .exam-ai-quality-badge.is-excellent {
        background: var(--exam-ai-success-soft);
        border-color: #86efac;
        color: #14532d
    }

    .exam-ai-quality-badge.is-good {
        background: var(--exam-ai-primary-ultra-soft);
        border-color: #99f6e4;
        color: var(--exam-ai-primary-dark)
    }

    .exam-ai-quality-badge.is-warning {
        background: var(--exam-ai-warning-soft);
        border-color: #fde68a;
        color: #78350f
    }

    .exam-ai-quality-badge.is-danger {
        background: var(--exam-ai-danger-soft);
        border-color: #fecaca;
        color: #7f1d1d
    }

.exam-ai-question-type-pill, .exam-ai-small-pill, .exam-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: fit-content;
    padding: .18rem .48rem;
    border-radius: 999px;
    border: 1px solid var(--exam-ai-border);
    background: #fff;
    color: var(--exam-ai-text-soft);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.25
}

    .exam-ai-question-type-pill.is-mcq, .exam-ai-badge-teal {
        background: var(--exam-ai-primary-ultra-soft);
        border-color: #99f6e4;
        color: var(--exam-ai-primary-dark)
    }

    .exam-ai-question-type-pill.is-case, .exam-ai-badge-blue {
        background: var(--exam-ai-blue-soft);
        border-color: #bfdbfe;
        color: #1d4ed8
    }

    .exam-ai-question-type-pill.is-open, .exam-ai-badge-purple {
        background: var(--exam-ai-purple-soft);
        border-color: #ddd6fe;
        color: #6d28d9
    }

.exam-ai-badge-warning {
    background: var(--exam-ai-warning-soft);
    border-color: #fde68a;
    color: #78350f
}

.exam-ai-badge-danger {
    background: var(--exam-ai-danger-soft);
    border-color: #fecaca;
    color: #7f1d1d
}

.exam-ai-quality-issues {
    display: grid;
    gap: .5rem
}

.exam-ai-quality-issue {
    padding: .7rem .8rem;
    border-radius: var(--exam-ai-radius-md);
    border: 1px solid var(--exam-ai-border);
    background: #fff;
    font-size: .82rem;
    line-height: 1.45
}

    .exam-ai-quality-issue.is-info {
        background: var(--exam-ai-info-soft);
        border-color: #bae6fd;
        color: #075985
    }

    .exam-ai-quality-issue.is-warning {
        background: var(--exam-ai-warning-soft);
        border-color: #fde68a;
        color: #78350f
    }

    .exam-ai-quality-issue.is-danger {
        background: var(--exam-ai-danger-soft);
        border-color: #fecaca;
        color: #7f1d1d
    }

.exam-ai-quality-issue-title {
    display: block;
    margin-bottom: .2rem;
    font-weight: 950
}

.exam-ai-source-passage {
    padding: .85rem .95rem;
    background: #f8fafc;
    border: 1px solid var(--exam-ai-border);
    border-left: 5px solid var(--exam-ai-primary);
    border-radius: var(--exam-ai-radius-md);
    color: var(--exam-ai-text-soft);
    font-size: .84rem;
    line-height: 1.55
}

.exam-ai-source-passage-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .35rem;
    color: var(--exam-ai-primary-dark);
    font-size: .76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em
}

.exam-ai-source-passage blockquote {
    margin: 0
}

.exam-ai-rubric-box {
    display: grid;
    gap: .8rem;
    padding: .95rem;
    background: var(--exam-ai-purple-soft);
    border: 1px solid #ddd6fe;
    border-left: 5px solid var(--exam-ai-purple);
    border-radius: var(--exam-ai-radius-md);
    color: #4c1d95
}

.exam-ai-rubric-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #5b21b6;
    font-size: .92rem;
    font-weight: 950
}

.exam-ai-rubric-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .75rem
}

.exam-ai-rubric-section {
    min-width: 0;
    padding: .75rem;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(221,214,254,.9);
    border-radius: var(--exam-ai-radius-md)
}

    .exam-ai-rubric-section.is-wide {
        grid-column: 1/-1
    }

.exam-ai-rubric-section-title {
    display: block;
    margin-bottom: .35rem;
    color: #5b21b6;
    font-size: .78rem;
    font-weight: 950
}

.exam-ai-rubric-list {
    margin: 0;
    padding-left: 1.1rem;
    color: #4c1d95;
    font-size: .83rem;
    line-height: 1.5
}

.exam-ai-empty-state {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    background: #fff;
    border: 1px dashed var(--exam-ai-border-strong);
    border-radius: var(--exam-ai-radius-xl);
    color: var(--exam-ai-text-muted)
}

.exam-ai-empty-state-inner {
    max-width: 34rem;
    display: grid;
    justify-items: center;
    gap: .65rem
}

.exam-ai-empty-icon {
    width: 4.4rem;
    height: 4.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.35rem;
    background: var(--exam-ai-primary-ultra-soft);
    color: var(--exam-ai-primary-dark);
    font-size: 2rem
}

.exam-ai-empty-title {
    margin: 0;
    color: var(--exam-ai-text);
    font-size: 1.12rem;
    font-weight: 950
}

.exam-ai-empty-text {
    margin: 0;
    color: var(--exam-ai-text-muted);
    font-size: .92rem;
    line-height: 1.5
}

.exam-ai-footer-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.25rem;
    background: #fff;
    border-top: 1px solid var(--exam-ai-border)
}

.exam-ai-footer-status {
    min-width: 0;
    color: var(--exam-ai-text-muted);
    font-size: .84rem;
    line-height: 1.4
}

.exam-ai-details {
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-md);
    background: #fff;
    overflow: hidden
}

    .exam-ai-details summary {
        cursor: pointer;
        padding: .75rem .9rem;
        color: var(--exam-ai-text);
        font-weight: 900;
        list-style: none
    }

        .exam-ai-details summary::marker {
            font-size: 0
        }

.exam-ai-details-body {
    padding: .9rem;
    border-top: 1px solid var(--exam-ai-border)
}

.exam-ai-editor-block {
    display: grid;
    gap: .75rem;
    padding: .9rem;
    background: var(--exam-ai-surface-soft);
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-md)
}

.exam-ai-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .55rem
}

.exam-ai-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(13,148,136,.22);
    border-top-color: var(--exam-ai-primary);
    animation: exam-ai-spin .75s linear infinite
}

@keyframes exam-ai-spin {
    to {
        transform: rotate(360deg)
    }
}

.exam-ai-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: .75rem
}

.exam-ai-summary-card {
    padding: .9rem;
    background: #fff;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-lg);
    box-shadow: var(--exam-ai-shadow-sm)
}

.exam-ai-summary-label {
    color: var(--exam-ai-text-muted);
    font-size: .75rem;
    font-weight: 850
}

.exam-ai-summary-value {
    margin-top: .2rem;
    color: var(--exam-ai-text);
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: -.035em
}

.exam-ai-inline-warning {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: #92400e;
    font-size: .8rem;
    font-weight: 800
}

.exam-ai-studio *:focus-visible {
    outline: 3px solid rgba(13,148,136,.38);
    outline-offset: 2px
}

@media (max-width:1399.98px) {
    .exam-ai-studio {
        --exam-ai-shell-right: 0px;
        --exam-ai-modal-max-width: 1180px
    }

    .exam-ai-modal-backdrop {
        right: 0
    }

    .exam-ai-layout-grid {
        grid-template-columns: minmax(300px,.9fr) minmax(420px,1.1fr)
    }
}

@media (max-width:1199.98px) {
    .exam-ai-studio {
        --exam-ai-shell-left: 0px;
        --exam-ai-shell-right: 0px;
        --exam-ai-shell-top: 64px;
        --exam-ai-modal-max-height: calc(100vh - 76px)
    }

    .exam-ai-modal-backdrop {
        left: 0;
        right: 0;
        padding: .75rem
    }

    .exam-ai-layout-grid {
        grid-template-columns: 1fr
    }

    .exam-ai-stepper {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .exam-ai-summary-grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

@media (max-width:767.98px) {
    .exam-ai-studio {
        --exam-ai-shell-left: 0px;
        --exam-ai-shell-right: 0px;
        --exam-ai-shell-top: 0px;
        --exam-ai-modal-max-height: 100vh
    }

    .exam-ai-modal-backdrop {
        inset: 0;
        padding: 0;
        align-items: stretch;
        justify-content: stretch
    }

    .exam-ai-modal-shell {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0
    }

    .exam-ai-stepper {
        grid-template-columns: 1fr;
        padding: .7rem;
        gap: .45rem
    }

    .exam-ai-step-subtitle {
        display: none
    }

    .exam-ai-layout-grid {
        padding: .7rem;
        gap: .7rem
    }

    .exam-ai-form-grid, .exam-ai-rubric-grid, .exam-ai-summary-grid {
        grid-template-columns: 1fr
    }

    .exam-ai-question-header {
        flex-direction: column;
        align-items: stretch
    }

    .exam-ai-question-actions {
        justify-content: flex-start
    }

    .exam-ai-option {
        grid-template-columns: 1fr
    }

    .exam-ai-option-analysis-row {
        grid-template-columns: 1fr;
        gap: .15rem
    }

    .exam-ai-footer-actions {
        flex-direction: column;
        align-items: stretch;
        padding: .75rem
    }

    .exam-ai-footer-button-group, .exam-ai-button-row {
        justify-content: stretch
    }

    .exam-ai-button {
        width: 100%
    }
}

@media (prefers-reduced-motion:reduce) {
    .exam-ai-studio *, .exam-ai-studio *::before, .exam-ai-studio *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important
    }
}

/* ==========================================================
   30. READER PICKER / SOURCE SELECTION
========================================================== */

.exam-ai-studio .exam-ai-source-summary,
.exam-ai-source-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

    .exam-ai-studio .exam-ai-source-summary > div,
    .exam-ai-source-summary > div {
        min-width: 0;
        padding: 0.75rem;
        border: 1px solid var(--exam-ai-border);
        border-radius: var(--exam-ai-radius-md);
        background: #ffffff;
    }

    .exam-ai-studio .exam-ai-source-summary strong,
    .exam-ai-source-summary strong {
        display: block;
        color: var(--exam-ai-primary-dark);
        font-size: 1.25rem;
        font-weight: 950;
        line-height: 1;
    }

    .exam-ai-studio .exam-ai-source-summary span,
    .exam-ai-source-summary span {
        display: block;
        margin-top: 0.25rem;
        color: var(--exam-ai-text-muted);
        font-size: 0.74rem;
        line-height: 1.3;
    }

.exam-ai-studio .exam-ai-reader-toolbar,
.exam-ai-reader-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 210px;
    gap: 0.75rem;
    align-items: end;
}

.exam-ai-studio .exam-ai-reader-actions,
.exam-ai-reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.exam-ai-studio .exam-ai-button-compact,
.exam-ai-button-compact {
    min-height: 2.15rem;
    padding: 0.42rem 0.75rem;
    font-size: 0.8rem;
}

.exam-ai-studio .exam-ai-reader-list,
.exam-ai-reader-list {
    max-height: 360px;
    overflow: auto;
    display: grid;
    gap: 0.55rem;
    padding: 0.15rem;
}

.exam-ai-studio .exam-ai-reader-item,
.exam-ai-reader-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--exam-ai-border);
    border-radius: var(--exam-ai-radius-md);
    background: #ffffff;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

    .exam-ai-studio .exam-ai-reader-item:hover,
    .exam-ai-reader-item:hover {
        background: var(--exam-ai-surface-soft);
        border-color: #99f6e4;
    }

    .exam-ai-studio .exam-ai-reader-item.is-selected,
    .exam-ai-reader-item.is-selected {
        background: var(--exam-ai-primary-ultra-soft);
        border-color: #5eead4;
        box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.08);
    }

    .exam-ai-studio .exam-ai-reader-item input[type="checkbox"],
    .exam-ai-reader-item input[type="checkbox"] {
        width: 1.1rem;
        height: 1.1rem;
        accent-color: var(--exam-ai-primary);
    }

.exam-ai-studio .exam-ai-reader-item-main,
.exam-ai-reader-item-main {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
}

.exam-ai-studio .exam-ai-reader-title,
.exam-ai-reader-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--exam-ai-text);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.25;
}

.exam-ai-studio .exam-ai-reader-meta,
.exam-ai-reader-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    color: var(--exam-ai-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

@media (max-width: 1199.98px) {
    .exam-ai-studio .exam-ai-source-summary,
    .exam-ai-source-summary,
    .exam-ai-studio .exam-ai-reader-toolbar,
    .exam-ai-reader-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .exam-ai-studio .exam-ai-reader-item,
    .exam-ai-reader-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

        .exam-ai-studio .exam-ai-reader-item > .exam-ai-badge,
        .exam-ai-reader-item > .exam-ai-badge {
            grid-column: 2;
            width: fit-content;
        }

    .exam-ai-studio .exam-ai-reader-actions .exam-ai-button,
    .exam-ai-reader-actions .exam-ai-button {
        width: 100%;
    }
}
