:root {
    --bg: #eef1f4;
    --surface: #ffffff;
    --surface-2: #f7f9fb;
    --ink: #17202a;
    --muted: #6f7a86;
    --line: #d9e0e7;
    --line-strong: #c4ced8;
    --brand: #176b67;
    --brand-strong: #0d504d;
    --accent: #c98b2c;
    --danger: #b42318;
    --success: #16794c;
    --warning: #a15c07;
    --shadow: 0 18px 45px rgba(25, 38, 52, .12);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    letter-spacing: 0;
}

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

a {
    color: inherit;
}

h1,
h2,
p {
    margin: 0;
}

.login-shell {
    min-height: 100vh;
    background: var(--bg);
}

.login-grid {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(380px, .9fr) minmax(420px, 1.1fr);
}

.login-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px;
    color: #f7fbfb;
    background:
        linear-gradient(145deg, rgba(13, 80, 77, .96), rgba(23, 107, 103, .93)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='rgba(255,255,255,.18)' stroke-width='1'%3E%3Cpath d='M24 55h212M24 110h212M24 165h212M24 220h212M55 24v212M110 24v212M165 24v212M220 24v212'/%3E%3C/g%3E%3C/svg%3E");
}

.brand-lockup,
.brand-block {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: var(--brand);
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark.large {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
}

.brand-name {
    font-weight: 800;
    line-height: 1.1;
}

.brand-name.large {
    font-size: 1.45rem;
}

.brand-subtitle,
.toolbar-subtitle,
.page-summary,
.muted-cell {
    color: var(--muted);
    font-size: .86rem;
}

.login-brand-panel .brand-subtitle,
.login-brand-panel .login-copy p {
    color: rgba(255, 255, 255, .78);
}

.login-copy {
    display: grid;
    max-width: 560px;
    gap: 18px;
}

.login-copy h1 {
    font-size: clamp(2rem, 4vw, 4.3rem);
    line-height: .98;
    max-width: 680px;
}

.login-kicker,
.eyebrow,
.form-heading p {
    color: var(--brand);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-brand-panel .login-kicker {
    color: #ffe2aa;
}

.login-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.login-metrics span {
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    font-size: .82rem;
}

.login-panel {
    display: grid;
    place-items: center;
    padding: 32px;
}

.single-panel {
    min-height: 100vh;
}

.login-card,
.modal-panel {
    width: min(100%, 460px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.login-card {
    padding: 32px;
}

.form-heading {
    display: grid;
    gap: 6px;
    margin-bottom: 24px;
}

.form-heading h2 {
    font-size: 1.55rem;
}

.form-field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
    color: #2e3945;
    font-size: .9rem;
    font-weight: 650;
}

.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.clave-plantilla-form-grid .clave-form-full {
    grid-column: 1 / -1;
}

.field {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: var(--ink);
    background: #fff;
    outline: none;
}

.field:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .14);
}

.field-sm {
    min-height: 32px;
    padding: 5px 8px;
    font-size: .82rem;
}

.textarea {
    min-height: 104px;
    resize: vertical;
}

.validation-message {
    color: var(--danger);
    font-size: .8rem;
    font-weight: 500;
}

.primary-button,
.secondary-button,
.danger-button,
.icon-button,
.page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 750;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.primary-button {
    padding: 0 16px;
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.primary-button:hover {
    background: var(--brand-strong);
}

.secondary-button {
    padding: 0 13px;
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
}

.secondary-button:hover {
    background: var(--surface-2);
}

.danger-button {
    padding: 0 13px;
    color: var(--danger);
    background: #fff;
    border-color: #efc2bc;
}

.danger-button:hover {
    background: #fff3f1;
}

.compact {
    min-height: 32px;
    padding: 0 10px;
    font-size: .82rem;
}

.full {
    width: 100%;
}

button:disabled,
.disabled {
    cursor: not-allowed;
    opacity: .58;
}

.icon-button {
    width: 38px;
    height: 38px;
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.icon-button-sm {
    width: 26px;
    height: 26px;
    min-height: 26px;
    font-size: .72rem;
}

.app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: auto 1fr;
    background: var(--bg);
}

.app-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    width: 276px;
    height: 100vh;
    flex-direction: column;
    border-right: 1px solid #132c33;
    color: #e8f2f1;
    background: #102f36;
    transition: width .18s ease, transform .18s ease;
}

.app-sidebar.collapsed {
    width: 82px;
}

.app-sidebar .brand-block {
    min-height: 78px;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-sidebar .brand-mark {
    flex: 0 0 auto;
    background: var(--accent);
}

.app-sidebar .brand-subtitle,
.user-role {
    color: rgba(232, 242, 241, .64);
}

.sidebar-toggle {
    margin-left: auto;
}

.app-nav {
    display: grid;
    gap: 5px;
    padding: 14px 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    color: rgba(232, 242, 241, .78);
    text-decoration: none;
    font-weight: 700;
}

.nav-item:hover,
.nav-item.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.nav-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    font-size: .8rem;
    font-weight: 900;
}

.nav-divider {
    height: 1px;
    margin: 8px 8px;
    background: rgba(255, 255, 255, .1);
}

.nav-section-label {
    padding: 8px 12px 4px;
    color: rgba(232, 242, 241, .52);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    color: #102f36;
    background: #e3c17d;
    font-weight: 900;
}

.user-copy {
    min-width: 0;
    flex: 1;
}

.user-name {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-main {
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(14px);
}

.mobile-menu {
    display: none;
}

.topbar-kicker {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.topbar-title {
    font-size: 1.05rem;
    font-weight: 850;
}

.topbar-spacer {
    flex: 1;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
}

.password-tool-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem;
    align-items: center;
}

.password-field {
    position: relative;
}

.password-field .field {
    padding-right: 76px;
}

.password-visibility-button {
    position: absolute;
    top: 50%;
    right: 6px;
    min-width: 58px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--brand);
    background: transparent;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-visibility-button:hover,
.password-visibility-button:focus {
    background: rgba(0, 112, 116, .08);
    outline: none;
}

.password-visibility-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.field-hint {
    display: inline-block;
    margin-top: .35rem;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 700;
}

.field-hint.success {
    color: #087f5b;
}

.page-frame {
    padding: 24px;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.page-header h1 {
    margin-top: 3px;
    font-size: 2rem;
}

.constructed-lab-header {
    min-width: 0;
}

.constructed-lab-header > div {
    min-width: 0;
}

.constructed-lab-header h1,
.constructed-lab-header .page-summary {
    overflow-wrap: anywhere;
}

.constructed-lab-page {
    min-width: 0;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.arelo-table-shell {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 28px rgba(25, 38, 52, .07);
}

.arelo-table-toolbar {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.table-toolbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.toolbar-title {
    font-weight: 850;
}

.switch-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 750;
}

.arelo-alert {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 14px;
    padding: 11px 12px;
    border-radius: 6px;
    font-weight: 650;
}

.arelo-alert span:last-child {
    overflow-wrap: anywhere;
}

.arelo-alert-error {
    color: #7a1b13;
    border: 1px solid #f0b7ad;
    background: #fff0ed;
}

.arelo-alert-success {
    color: #12613d;
    border: 1px solid #a7e4c0;
    background: #ecfdf3;
}

.arelo-toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    max-width: min(420px, calc(100vw - 36px));
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    font-size: .9rem;
    font-weight: 750;
    animation: toast-in .18s ease-out;
}

.arelo-toast-success {
    color: #12613d;
    border: 1px solid #a7e4c0;
    background: #ecfdf3;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.icon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.arelo-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.arelo-table {
    width: 100%;
    min-width: 1280px;
    border-collapse: separate;
    border-spacing: 0;
}

.arelo-table th,
.arelo-table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.arelo-table th {
    color: #40505f;
    background: #fbfcfd;
    font-size: .76rem;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
}

.arelo-table tbody tr:hover {
    background: #f8fbfb;
}

.arelo-th-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 28px;
}

.arelo-filter {
    margin-top: 8px;
}

.arelo-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--surface);
}

.arelo-page-info,
.arelo-page-info label,
.arelo-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
}

.arelo-page-info {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.page-size-select {
    width: 74px;
}

.page-button {
    width: 34px;
    min-height: 34px;
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line);
}

.page-button.active {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

.page-ellipsis {
    color: var(--muted);
}

.key-cell {
    color: var(--brand-strong);
    font-family: "Cascadia Mono", Consolas, monospace;
    font-weight: 850;
}

.description-cell {
    max-width: 540px;
    color: #26323f;
    font-weight: 650;
}

.micro-cell {
    margin-top: 3px;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 650;
}

.control-cell {
    display: inline-flex;
    max-width: 160px;
    overflow: hidden;
    color: var(--brand-strong);
    font-size: .84rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-badge,
.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.soft-badge {
    color: #45515d;
    background: #eef2f5;
}

.soft-badge.warning {
    color: #7a4c00;
    background: #fff4d8;
}

.soft-badge.success {
    color: #0b6b3d;
    background: #e6f7ee;
}

.status-badge.draft {
    color: #5e4616;
    background: #fff4d8;
}

.status-badge.progress {
    color: #164e63;
    background: #e2f4fb;
}

.status-badge.ready {
    color: #6e3f05;
    background: #ffedd5;
}

.status-badge.success {
    color: #12613d;
    background: #dcfce7;
}

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

.skeleton-line {
    width: 100%;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #edf1f4, #f7f9fb, #edf1f4);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite linear;
}

@keyframes shimmer {
    to {
        background-position: -200% 0;
    }
}

.empty-cell {
    padding: 46px 20px;
    color: var(--muted);
    text-align: center;
}

.empty-icon {
    color: var(--line-strong);
    font-size: 2rem;
}

.empty-title {
    margin-top: 8px;
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 850;
}

.empty-message {
    margin-top: 4px;
}

.modal-backdrop-soft {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(16, 31, 43, .45);
}

.modal-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 90;
    width: min(92vw, 640px);
    max-height: 88vh;
    overflow: auto;
    transform: translate(-50%, -50%);
}

.app-dialog-backdrop {
    z-index: 1400;
}

.app-dialog-panel {
    z-index: 1410;
    width: min(92vw, 430px);
    padding: 24px;
    text-align: center;
}

.app-dialog-icon {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
    border-radius: 999px;
    font-size: 1.8rem;
    font-weight: 900;
}

.app-dialog-icon.error,
.app-dialog-icon.danger {
    color: #8a1e14;
    border: 2px solid #f0b7ad;
    background: #fff0ed;
}

.app-dialog-icon.warning {
    color: #8a5b12;
    border: 2px solid #f4d58e;
    background: #fff8e5;
}

.app-dialog-icon.success {
    color: #12613d;
    border: 2px solid #a7e4c0;
    background: #ecfdf3;
}

.app-dialog-icon.info {
    color: var(--brand);
    border: 2px solid rgba(23, 107, 103, .24);
    background: #eef8f7;
}

.app-dialog-panel h2 {
    margin: 0;
    font-size: 1.3rem;
}

.app-dialog-panel p {
    margin: 12px 0 0;
    color: var(--muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.app-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.wide-modal {
    width: min(94vw, 820px);
}

.small-modal {
    width: min(92vw, 460px);
}

.criterion-help-modal {
    width: min(92vw, 620px);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.modal-header h2 {
    margin-top: 3px;
    font-size: 1.35rem;
}

.modal-panel form {
    padding: 20px;
}

.modal-body {
    padding: 20px;
}

.criterion-help-body {
    display: grid;
    gap: 14px;
}

.criterion-help-block {
    display: grid;
    gap: 5px;
}

.criterion-help-block strong {
    color: #26313d;
    font-size: .88rem;
}

.criterion-help-block p {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

.criterion-help-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
}

.criterion-help-list code {
    display: inline-block;
    max-width: 100%;
    padding: 4px 7px;
    overflow-wrap: anywhere;
    border: 1px solid var(--line);
    border-radius: 5px;
    color: #163b39;
    background: #f7faf9;
    font-size: .86rem;
}

.formula-expected-preview {
    display: grid;
    gap: 8px;
    margin: 10px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 7px;
    background: #f8fbfa;
}

.formula-expected-preview.warn {
    border-left-color: #c9861a;
    background: #fffaf0;
}

.formula-expected-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.formula-expected-preview-head span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.formula-expected-preview-head strong {
    color: #003f43;
    font-size: 1.08rem;
}

.formula-expected-preview p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.4;
}

.formula-expected-vars {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.formula-expected-vars span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid #d6e3e4;
    border-radius: 6px;
    color: #23313d;
    background: #ffffff;
    font-size: .82rem;
    font-weight: 700;
}

.formula-expected-vars code {
    color: #006267;
    font-weight: 900;
}

.role-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 6px;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: #45515d;
    background: #fff;
    font-size: .82rem;
    font-weight: 800;
}

.role-chip.active {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.role-chip input {
    width: 14px;
    height: 14px;
    accent-color: var(--brand);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

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

.settings-panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.settings-panel-header h2 {
    margin-top: 3px;
    font-size: 1.1rem;
}

.settings-panel form {
    padding: 20px;
}

.compact-table {
    max-height: 360px;
    border-top: 1px solid var(--line);
}

.key-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 20px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    color: #5a6875;
    font-size: .82rem;
    font-weight: 800;
}

.key-preview strong {
    color: var(--brand);
    font-size: .95rem;
    letter-spacing: 0;
}

.key-builder {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.form-label-title {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 900;
}

.key-builder-palette,
.key-builder-sequence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.key-builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 9px 6px 12px;
    border: 1px solid #b8d7da;
    border-radius: 8px;
    background: #eefafa;
    color: var(--brand);
    font-size: .82rem;
    font-weight: 900;
}

.key-builder-chip button {
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font-weight: 900;
}

.key-builder-chip button:disabled {
    cursor: not-allowed;
    opacity: .4;
}

.key-builder-chip.locked {
    border-color: #d8e0e7;
    background: #fff;
    color: #5a6875;
}

.key-builder-format {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px dashed #b8d7da;
    border-radius: 8px;
    background: #f9ffff;
}

.key-builder-format span,
.empty-state-inline {
    color: #6a7887;
    font-size: .8rem;
    font-weight: 800;
}

.key-builder-format strong {
    color: var(--brand);
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: .95rem;
    letter-spacing: 0;
}

.editor-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

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

.workflow-note {
    min-height: 76px;
    resize: vertical;
}

.workflow-modal {
    width: min(92vw, 620px);
}

.workflow-modal-body {
    display: grid;
    gap: 14px;
}

.workflow-modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.metadata-card {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.metadata-card span,
.metadata-card small {
    overflow: hidden;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metadata-card strong {
    overflow: hidden;
    color: var(--ink);
    font-size: .94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-grid {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.editor-grid.base-collapsed {
    grid-template-columns: 56px minmax(0, 1fr);
}

.editor-panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.editor-base-column {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.editor-base-collapse-bar {
    display: flex;
    justify-content: flex-end;
}

.editor-base-rail {
    position: sticky;
    top: 86px;
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 240px;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.editor-base-rail span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--muted);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wide-editor-panel {
    grid-column: 2;
}

.editor-workspace {
    overflow: hidden;
}

.editor-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 14px 0;
    border-bottom: 1px solid var(--line);
    background: #fbfcfd;
}

.editor-tab {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-weight: 850;
}

.editor-tab:hover {
    color: var(--ink);
    background: #f2f5f7;
}

.editor-tab.active {
    color: var(--brand-strong);
    border-color: var(--line);
    background: #fff;
}

.editor-tab-body {
    padding: 20px;
}

.tab-section {
    display: grid;
    gap: 18px;
}

.editor-subsection {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.editor-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.editor-subsection-header h3 {
    margin: 3px 0 0;
    font-size: 1rem;
}

.tab-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tab-section-header h2 {
    margin-top: 3px;
    font-size: 1.1rem;
}

.editor-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.editor-panel-header h2 {
    margin-top: 3px;
    font-size: 1.1rem;
}

.editor-panel form {
    padding: 20px;
}

.tab-section form {
    padding: 0;
}

.inline-editor-controls {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.inline-editor-controls .form-field {
    width: min(100%, 220px);
    margin-bottom: 0;
}

.editor-check,
.editor-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: end;
    justify-self: start;
    gap: 8px;
    min-height: 42px;
    width: fit-content;
    max-width: 100%;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    color: #45515d;
    background: #fff;
    font-size: .84rem;
    font-weight: 850;
}

.editor-check.active,
.editor-indicator.active {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.editor-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--brand);
}

.editor-help {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.editor-note {
    padding: 11px 12px;
    border: 1px solid #cfe2e0;
    border-radius: 8px;
    color: #31524f;
    background: #f2fbfa;
    font-size: .86rem;
    font-weight: 650;
}

.warning-note {
    border-color: #f0d394;
    color: #6f4e00;
    background: #fff8e8;
}

.variable-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 1180px) {
    .variable-form-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .variable-form-grid .form-field:first-child {
        grid-column: span 2;
    }
}

.html-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.html-editor-pane,
.html-preview-pane {
    min-width: 0;
}

.html-editor-pane {
    border-right: 1px solid var(--line);
}

.html-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 12px;
    border-bottom: 1px solid var(--line);
    color: #334151;
    font-size: .82rem;
    font-weight: 850;
}

.html-editor-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tiny-button {
    min-height: 26px;
    padding: 4px 8px;
    font-size: .76rem;
}

.tiny-select {
    min-height: 30px;
    width: auto;
    min-width: 112px;
    padding: 4px 8px;
    font-size: .78rem;
}

.html-code-area {
    min-height: 260px;
    border: 0;
    border-radius: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
    resize: vertical;
}

.editor-format-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    background: #f8fafc;
    font-size: .78rem;
}

.help-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--accent);
    background: #fff;
    font-size: .78rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.help-icon-button:hover {
    border-color: rgba(15, 118, 110, .35);
    background: #ecfdf5;
}

.editor-help-modal {
    max-width: 460px;
}

.operator-help-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.operator-help-list div {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.operator-help-list code,
.operator-help-example code {
    color: #0f766e;
    font-weight: 900;
}

.operator-help-example {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 8px;
    background: #f0fdfa;
}

.operator-help-example span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.glossary-modal {
    width: min(94vw, 980px);
    max-height: min(88vh, 920px);
}

.glossary-body {
    display: grid;
    gap: 18px;
    max-height: calc(88vh - 96px);
    overflow-y: auto;
    padding-right: 4px;
}

.glossary-section {
    display: grid;
    gap: 10px;
}

.glossary-section h3 {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
}

.glossary-note {
    border: 1px solid rgba(13, 116, 106, .18);
    border-radius: 8px;
    background: rgba(232, 246, 244, .72);
    color: var(--muted);
    font-size: .86rem;
    font-weight: 750;
    line-height: 1.45;
    padding: 9px 11px;
}

.glossary-note strong {
    color: var(--teal-dark);
}

.glossary-note code {
    color: #0f766e;
    font-weight: 950;
}

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

.glossary-grid article,
.glossary-examples code {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.glossary-grid article code,
.glossary-examples code {
    color: #0f766e;
    font-weight: 900;
    white-space: normal;
    word-break: break-word;
}

.glossary-grid article span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 700;
}

.glossary-examples {
    display: grid;
    gap: 8px;
}

.asset-picker-modal {
    width: min(94vw, 760px);
}

.asset-picker-body {
    display: grid;
    gap: 14px;
}

.asset-picker-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 150px;
    gap: 10px;
    align-items: end;
}

.asset-picker-controls.single {
    grid-template-columns: minmax(0, 1fr);
}

.asset-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    max-height: 320px;
    overflow: auto;
    padding: 3px;
}

.asset-picker-item {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 10px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #172330;
    background: #fff;
    cursor: pointer;
}

.asset-picker-item.active {
    border-color: var(--teal);
    background: #f0fbf9;
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .10);
}

.asset-picker-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid #d6e3e4;
    border-radius: 8px;
    background: #fbfcfd;
}

.asset-picker-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.asset-picker-item strong {
    max-width: 100%;
    overflow: hidden;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-picker-item small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.asset-picker-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d6e3e4;
    border-radius: 8px;
    background: #f8fbfa;
}

.asset-picker-preview span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.asset-picker-preview code {
    display: block;
    padding: 7px 8px;
    overflow-wrap: anywhere;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #006267;
    background: #fff;
    font-size: .84rem;
    font-weight: 850;
}

.asset-picker-preview-render {
    display: grid;
    min-width: 92px;
    justify-items: center;
}

.asset-picker-actions {
    align-items: center;
    margin: 0;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.asset-picker-actions button {
    min-height: 38px;
}

@media (max-width: 720px) {
    .asset-picker-controls,
    .asset-picker-preview {
        grid-template-columns: 1fr;
    }

    .asset-picker-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

.CodeMirror {
    min-height: 260px;
    font-family: Consolas, "Courier New", monospace;
    font-size: .9rem;
}

.html-preview {
    min-height: 260px;
    padding: 14px;
    overflow: auto;
    color: var(--ink);
    background: #fff;
}

.html-preview p {
    margin: 0 0 10px;
}

.rs-drawing {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 12px 0;
}

.rs-fraction-pie {
    width: min(220px, 100%);
    height: auto;
    overflow: visible;
}

.html-preview .rs-center,
.simulator-html .rs-center,
.simulator-option-html .rs-center {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
}

.html-preview .text-left,
.simulator-html .text-left,
.simulator-option-html .text-left {
    text-align: left;
}

.html-preview .text-center,
.simulator-html .text-center,
.simulator-option-html .text-center {
    text-align: center;
}

.html-preview .text-right,
.simulator-html .text-right,
.simulator-option-html .text-right {
    text-align: right;
}

.html-preview .text-justify,
.simulator-html .text-justify,
.simulator-option-html .text-justify {
    text-align: justify;
}

.html-preview .rs-table,
.simulator-html .rs-table,
.simulator-option-html .rs-table {
    width: min(100%, 860px);
    border-collapse: collapse;
    margin: 12px auto;
}

.html-preview .rs-table th,
.html-preview .rs-table td,
.simulator-html .rs-table th,
.simulator-html .rs-table td,
.simulator-option-html .rs-table th,
.simulator-option-html .rs-table td {
    border: 1px solid #26323f;
    padding: 6px 8px;
    vertical-align: top;
}

.html-preview .rs-table th,
.simulator-html .rs-table th,
.simulator-option-html .rs-table th {
    background: #d8edf8;
    font-weight: 850;
}

.rs-asset {
    display: inline-grid;
    place-items: center;
    vertical-align: middle;
}

.rs-asset img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rs-asset-xs {
    width: 22px;
    height: 22px;
}

.rs-asset-sm {
    width: 42px;
    height: 42px;
}

.rs-asset-md {
    width: 72px;
    height: 72px;
}

.rs-asset-lg {
    width: 112px;
    height: 112px;
}

.rs-asset-xl {
    width: 160px;
    height: 160px;
}

.rs-asset-block,
.rs-asset-center {
    display: grid;
    margin: 10px 0;
}

.rs-asset-center {
    justify-content: center;
}

.rs-asset-inline {
    display: inline-grid;
    margin: 0 4px;
}

.editor-list {
    display: grid;
    gap: 8px;
    padding: 0;
}

.editor-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfe;
}

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

.audit-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.audit-row.current {
    border-color: #b8d8d5;
    background: #f7fcfb;
}

.audit-marker {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--line-strong);
}

.audit-marker.info {
    background: var(--brand);
}

.audit-marker.warning {
    background: var(--warning);
}

.audit-marker.success {
    background: var(--success);
}

.audit-marker.danger {
    background: var(--danger);
}

.audit-content {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.audit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.audit-head strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.audit-state {
    width: fit-content;
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--brand-strong);
    background: #edf7f6;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .78rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.audit-detail {
    color: #2e3945;
    font-size: .9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.simulator-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 16px;
    align-items: start;
}

.simulator-preview {
    min-height: 360px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.simulator-html {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 18px;
}

@media (min-width: 768px) {
    .simulator-html {
        font-size: 1.08rem;
        line-height: 1.6;
    }
}

.simulator-html p,
.simulator-option-html p {
    margin: 0 0 10px;
}

.simulator-options {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.open-answer-simulator {
    display: grid;
    gap: 12px;
    margin-top: 22px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.open-answer-result {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
}

.open-answer-result.success {
    color: #12613d;
    border-color: #a7e4c0;
    background: #ecfdf3;
}

.open-answer-result.danger {
    color: #7a1b13;
    border-color: #f0b7ad;
    background: #fff0ed;
}

.open-answer-result.manual {
    color: #5e4616;
    border-color: #f1d89a;
    background: #fff8e7;
}

.open-answer-result span,
.open-answer-result small {
    font-size: .86rem;
}

.simulator-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.simulator-option.correct {
    border-color: var(--success);
    box-shadow: inset 3px 0 0 var(--success);
    background: #f3fbf7;
}

.simulator-option.selected {
    border-color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
    background: #f3fbfb;
}

.simulator-option > span {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    background: #fff;
}

.simulator-option.multi > span {
    border-radius: 4px;
}

.simulator-option.correct > span {
    border-color: var(--success);
    background: var(--success);
    box-shadow: inset 0 0 0 4px #fff;
}

.simulator-option.selected > span {
    border-color: var(--brand);
    background: var(--brand);
    box-shadow: inset 0 0 0 4px #fff;
}

.simulator-option.multi.correct > span {
    box-shadow: inset 0 0 0 3px #fff;
}

.simulator-option.multi.selected > span {
    box-shadow: inset 0 0 0 3px #fff;
}

.simulator-option-html {
    min-width: 0;
}

.ordering-simulator {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.ordering-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 750;
}

.ordering-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
    cursor: grab;
}

.ordering-card:active {
    cursor: grabbing;
}

.ordering-position {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-weight: 850;
}

.ordering-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.drag-editor-grid,
.drag-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.drag-editor-single {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
}

.sub-editor-panel {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.sub-editor-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.sub-editor-panel h3,
.editor-list h3,
.drag-bank h3 {
    margin: 0 0 12px;
    font-size: .95rem;
}

.sub-editor-title h3 {
    margin-bottom: 0;
}

.zone-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.zone-checks > span {
    width: 100%;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.drag-catalog-layout {
    display: grid;
    gap: 14px;
}

.drag-zone-strip {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.drag-zone-strip-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.drag-zone-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 10px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: #fff;
}

.drag-zone-summary .muted-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drag-element-list {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.drag-simulator {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.drag-bank,
.drag-zone {
    min-height: 110px;
    padding: 14px;
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: #fbfcfd;
}

.drag-bank {
    background: #fff;
}

.drag-zones {
    align-items: stretch;
}

.drag-zone {
    border-style: solid;
    background: #f8fbfb;
}

.drag-zone header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: 800;
}

.drag-zone header > span {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--brand);
    background: #e8f4f3;
    font-size: .78rem;
}

.drag-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(180, 198, 213, .45);
    cursor: grab;
}

.drag-item .simulator-option-html {
    min-width: 0;
}

.drag-item select {
    width: 100%;
    border-color: #d8e4ec;
    background-color: #f8fbfc;
    color: var(--ink);
}

.drag-item:active {
    cursor: grabbing;
}

.compact-select {
    min-height: 34px;
    padding: 6px 8px;
    font-size: .82rem;
}

.relation-editor-list,
.relation-simulator {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.relation-simulator-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: start;
    gap: 14px;
}

.relation-left-list {
    display: grid;
    gap: 10px;
}

.relation-right-bank {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.relation-right-bank h3 {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.relation-right-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: var(--surface);
}

.relation-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-size: .82rem;
    font-weight: 900;
}

.relation-editor-row,
.relation-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.relation-row {
    grid-template-columns: minmax(0, 1fr) auto minmax(100px, 140px);
}

.relation-select {
    text-align: center;
    font-weight: 850;
}

.relation-arrow {
    color: var(--brand);
    font-weight: 900;
}

.panel-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.base-curricular-card {
    transition: border-color .22s ease, box-shadow .22s ease;
}

.base-curricular-card.saved {
    border-color: #38b871;
    box-shadow: 0 0 0 3px rgba(56, 184, 113, .16), 0 18px 46px rgba(22, 121, 76, .18);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.panel-header h2 {
    margin: 3px 0 0;
    font-size: 1.05rem;
}

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.panel-card > form,
.panel-card > .metric-list,
.panel-card > .timeline-list,
.panel-card > .empty-state,
.panel-card > .curriculum-node,
.panel-card > header + .curriculum-node,
.panel-card > header + .empty-state {
    margin: 18px;
}

.inline-error-label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 10px 10px 10px 12px;
    color: #7a1b13;
    border: 1px solid #f0b7ad;
    border-radius: 8px;
    background: #fff0ed;
    font-size: .86rem;
    font-weight: 750;
}

.inline-error-label span {
    overflow-wrap: anywhere;
}

.inline-error-close {
    width: 28px;
    height: 28px;
    border: 1px solid #f0b7ad;
    border-radius: 6px;
    color: #7a1b13;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

.inline-error-close:hover {
    background: #ffe1dc;
}

.scope-options {
    display: grid;
    gap: 10px;
    margin: 4px 0 16px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.scope-options > span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.scope-options .switch-row {
    min-height: 34px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.editor-sidebar {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.tab-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 14px 0;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: #fbfcfd;
}

.tab-button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-weight: 850;
}

.tab-button:hover {
    color: var(--ink);
    background: #f2f5f7;
}

.tab-button.active {
    color: var(--brand-strong);
    border-color: var(--line);
    background: #fff;
}

.tab-strip + .panel-card {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

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

.metric-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.metric-list span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.metric-list strong {
    color: var(--brand-strong);
    font-size: 1.15rem;
}

.curriculum-node {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.curriculum-node + .curriculum-node {
    margin-top: 12px;
}

.curriculum-node header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.curriculum-node header > div:first-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.node-title-button {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.node-title-button:hover span span {
    color: var(--brand-strong);
}

.node-title-button > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.node-toggle {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--brand-strong);
    background: #fff;
    font-size: .82rem;
    font-weight: 950;
}

.curriculum-node strong {
    color: var(--brand-strong);
    font-size: .86rem;
    letter-spacing: .02em;
}

.curriculum-node span {
    overflow: hidden;
    color: var(--ink);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.curriculum-node small {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 750;
}

.curriculum-node.level-1 {
    border-color: #bddbd7;
    background: #f7fbfa;
    box-shadow: inset 4px 0 0 var(--brand);
}

.curriculum-node.level-2 {
    margin-left: 18px;
    background: #fbfcfd;
    box-shadow: inset 4px 0 0 #d0a13a;
}

.curriculum-node.level-3 {
    margin-left: 18px;
    background: #fff;
    box-shadow: inset 4px 0 0 #738191;
}

.curriculum-node.level-4 {
    margin-left: 18px;
    background: #fcfcfb;
    box-shadow: inset 4px 0 0 #8f7344;
}

.node-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.assignment-list {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.assignment-list.focused {
    padding-top: 0;
}

.assignment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.assignment-row > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

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

.archive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.archive-row > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.archive-row strong {
    color: var(--ink);
}

.archive-row span,
.archive-row small {
    color: var(--muted);
}

.validation-box.compact {
    margin-top: 6px;
    padding: 8px 10px;
}

.leaf-focus {
    display: grid;
    gap: 14px;
    margin: 18px;
}

.breadcrumb-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #fbfcfd;
    font-size: .82rem;
    font-weight: 850;
}

.breadcrumb-line strong {
    color: var(--brand);
}

.leaf-focus-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid #bddbd7;
    border-radius: 8px;
    background: #f7fbfa;
    box-shadow: inset 4px 0 0 var(--brand);
}

.leaf-focus-header h3 {
    margin: 3px 0 4px;
    font-size: 1.05rem;
}

.leaf-focus-header span {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 800;
}

.empty-state.compact {
    min-height: 90px;
    padding: 18px;
}

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

.version-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 18px 18px 0;
}

.version-list article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.version-list strong {
    color: var(--brand-strong);
}

.version-list span,
.version-list small {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.timeline-list article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.timeline-list strong {
    color: var(--ink);
}

.timeline-list span,
.timeline-list small {
    color: var(--muted);
    font-size: .86rem;
}

.flow-state-card {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.flow-state-card span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.flow-state-card strong {
    color: var(--brand-strong);
    font-size: 1.05rem;
}

.validation-box {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.validation-box.success {
    border-color: #a7e4c0;
    background: #ecfdf3;
}

.validation-box.danger {
    border-color: #f0b7ad;
    background: #fff0ed;
}

.validation-box strong {
    color: var(--ink);
}

.validation-box span {
    color: var(--muted);
    font-size: .86rem;
}

.purge-confirm-row {
    align-items: flex-start;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid #efc2bc;
    border-radius: 8px;
    color: #7a1b13;
    background: #fff;
}

.evidence-modal {
    width: min(92vw, 720px);
    max-height: min(88vh, 760px);
    overflow: hidden;
}

.evidence-modal .modal-body {
    max-height: calc(min(88vh, 760px) - 80px);
    overflow: auto;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.evidence-summary-list {
    display: grid;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.evidence-summary-row {
    display: grid;
    grid-template-columns: minmax(150px, .85fr) minmax(0, 1.15fr);
    gap: 16px;
    align-items: start;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.evidence-summary-row:last-child {
    border-bottom: 0;
}

.evidence-summary-row > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.evidence-summary-row span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.evidence-summary-row strong {
    color: var(--ink);
    font-size: .94rem;
}

.evidence-summary-row small,
.evidence-summary-row p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}

.evidence-card {
    display: grid;
    gap: 5px;
    min-height: 128px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
    box-shadow: inset 4px 0 0 var(--brand);
}

.evidence-card span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.evidence-card strong {
    color: var(--ink);
    font-size: 1rem;
}

.evidence-card small,
.evidence-card p,
.evidence-events span,
.evidence-events small,
.evidence-events p {
    margin: 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.35;
}

.evidence-events {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.evidence-events h3 {
    margin: 0;
    font-size: .98rem;
}

.evidence-events article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.evidence-events-compact {
    gap: 6px;
    margin-top: 14px;
}

.evidence-events-compact article {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: #fbfcfd;
}

.evidence-events-compact strong {
    font-size: .9rem;
}

.evidence-events-compact p {
    margin-top: 2px;
}

.evidence-events-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.evidence-board {
    display: grid;
    gap: 16px;
}

.evidence-loading {
    padding: 18px;
    color: var(--muted);
    font-weight: 750;
}

.evidence-user-card {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
}

.evidence-user-card.embedded {
    padding: 0;
    border: 0;
    box-shadow: none;
}

.evidence-detail-modal {
    width: min(94vw, 1120px);
}

.evidence-user-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.evidence-user-header h2 {
    margin-top: 3px;
    font-size: 1.25rem;
}

.role-stack {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.table-role-stack {
    justify-content: flex-start;
}

.metric-number {
    color: var(--brand-strong);
    font-size: 1.1rem;
}

.metric-stack {
    display: inline-grid;
    gap: 2px;
    justify-items: start;
    line-height: 1.15;
}

.evidence-clusters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.metric-cluster {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.metric-cluster h3 {
    margin: 0;
    color: var(--brand-strong);
    font-size: .88rem;
}

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

.metric-pill {
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.metric-pill span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.metric-pill strong {
    color: var(--brand-strong);
    font-size: 1.25rem;
}

.section-kicker {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.evidence-event-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.event-kind {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    min-height: 26px;
    border-radius: 999px;
    color: var(--brand-strong);
    background: #e8f4f3;
    font-size: .76rem;
    font-weight: 850;
}

.search-results {
    display: grid;
    gap: 8px;
    max-height: 240px;
    overflow: auto;
    margin: 12px 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.modal-search-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
    padding: 20px 20px 0;
}

.modal-search-block .form-field {
    margin-bottom: 0;
}

.modal-search-block .secondary-button {
    min-height: 42px;
}

.modal-search-block + .search-results {
    margin: 12px 20px 0;
}

.result-row {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.result-row:hover {
    border-color: var(--brand);
    background: #f4fbfa;
}

.result-row span {
    color: var(--muted);
    font-size: .84rem;
}

.action-field {
    justify-content: end;
}

@media (max-width: 900px) {
    .relation-simulator-grid {
        grid-template-columns: 1fr;
    }
}

.simulator-side {
    display: grid;
    gap: 10px;
}

.simulator-side div {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.simulator-side span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.simulator-side strong {
    color: var(--brand-strong);
    font-size: 1.25rem;
}

.simulator-vars {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.simulator-vars header {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.simulator-vars div:not(.simulator-vars-chip-list) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 6px;
    background: #fff;
}

.simulator-vars span {
    color: var(--brand-strong);
    font-family: "Cascadia Mono", Consolas, monospace;
    font-weight: 850;
}

.simulator-vars-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.simulator-vars .simulator-var-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid #d6e3e4;
    border-radius: 6px;
    color: #23313d;
    background: #ffffff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
}

.simulator-var-chip code {
    color: #006267;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-weight: 900;
}

.criteria-audit-panel {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #d7e1ea;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
}

.criteria-audit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.criteria-audit-header h3 {
    margin: 0;
    color: #102033;
    font-size: 1.05rem;
}

.criteria-variable-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    background: #f8fafc;
}

.criteria-audit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.criteria-audit-card {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #d7e1ea;
    border-radius: 8px;
    background: #fbfcfd;
}

.criteria-audit-card.wide {
    grid-column: 1 / -1;
}

.criteria-audit-card.success {
    border-left: 4px solid var(--brand);
}

.criteria-audit-card span,
.criteria-audit-card small {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.criteria-audit-card strong {
    color: #102033;
}

.criteria-audit-card code {
    overflow-wrap: anywhere;
    padding: 7px 8px;
    border-radius: 6px;
    background: #eef6f6;
    color: #0f575a;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-weight: 800;
}

.criteria-audit-card ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}

.criteria-audit-html,
.criteria-audit-chip-html {
    color: #102033;
}

.criteria-audit-chip-html {
    padding: 6px 8px;
    border: 1px solid #d6e3e4;
    border-radius: 6px;
    background: #fff;
}

.criteria-pair-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff;
}

.mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 18;
    border: 0;
    background: rgba(16, 31, 43, .48);
}

.blazor-error-boundary {
    margin: 16px;
    padding: 16px;
    border-radius: 8px;
    color: #fff;
    background: var(--danger);
}

.blazor-error-boundary::after {
    content: "Ocurrió un error.";
}

.tag-editor {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 12px;
    margin: 16px 0;
}

.tag-input-field {
    margin: 0;
}

.tag-cloud,
.table-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tag-cloud {
    margin-top: 12px;
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(10, 112, 107, .22);
    border-radius: 999px;
    color: var(--brand-strong);
    background: rgba(10, 112, 107, .08);
    font-weight: 800;
    line-height: 1;
}

.tag-chip.compact {
    min-height: 24px;
    padding: 4px 8px;
    font-size: .78rem;
}

.tag-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 999px;
    color: var(--brand-strong);
    background: rgba(10, 112, 107, .16);
    font-weight: 900;
    cursor: pointer;
}

.tag-chip button:hover {
    color: #fff;
    background: var(--danger);
}

.lab-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.lab-shell.no-technical {
    grid-template-columns: 320px minmax(0, 1fr);
}

.lab-shell.no-capture {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.lab-shell.no-capture.no-technical {
    grid-template-columns: minmax(0, 1fr);
}

.lab-config-card,
.lab-json-card {
    position: sticky;
    top: 84px;
}

.lab-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 14px;
}

.lab-mode-tabs button {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    font-weight: 800;
    cursor: pointer;
}

.lab-mode-tabs button.active {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

.lab-notes {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.lab-author-form {
    display: grid;
    gap: 12px;
    padding: 0 14px 14px;
}

.lab-notes div,
.lab-current-expression {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfdfe;
}

.lab-notes span,
.lab-current-expression span,
.lab-section-title span,
.lab-answer-head span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
}

.lab-workbench {
    overflow: hidden;
}

.lab-prompt {
    margin: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.constructed-live-preview {
    display: grid;
    gap: 12px;
    margin: 14px;
    padding: 18px;
    border: 1px solid #bddbd7;
    border-radius: 8px;
    background: #f7fbfa;
    box-shadow: inset 4px 0 0 var(--brand);
}

.constructed-live-preview h3 {
    margin: 3px 0 0;
    font-size: 1.05rem;
}

.constructed-live-preview-content {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    overflow-x: auto;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    text-align: center;
}

.formula-output-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 14px 1rem;
}

.formula-output-grid textarea[readonly] {
    min-height: 72px;
    background: #fbfdff;
    font-family: Consolas, "Liberation Mono", monospace;
    font-size: .92rem;
    font-weight: 700;
}

.lab-answer-zone {
    display: grid;
    gap: 12px;
    min-height: 154px;
    margin: 14px;
    padding: 16px;
    border: 2px dashed #abc3d3;
    border-radius: 10px;
    background: #f8fbfc;
}

.lab-answer-head,
.lab-section-title {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
}

.lab-answer-head > div:first-child {
    display: grid;
    gap: 4px;
}

.answer-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.answer-view-toggle span {
    padding: 0 6px;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.answer-view-toggle button {
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 6px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 850;
}

.answer-view-toggle button.active {
    color: #fff;
    background: var(--brand);
}

.mobile-target-hint {
    display: none;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid rgba(10, 112, 107, .22);
    border-radius: 8px;
    color: var(--brand-strong);
    background: rgba(10, 112, 107, .08);
    font-size: .84rem;
    font-weight: 800;
}

.mobile-target-hint span {
    color: var(--muted);
    font-size: .76rem;
    text-transform: uppercase;
}

.lab-empty-answer {
    display: grid;
    min-height: 72px;
    place-items: center;
    border-radius: 8px;
    color: var(--muted);
    background: rgba(255, 255, 255, .75);
    font-weight: 750;
}

.lab-token-line,
.lab-token-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.answer-linear > .lab-token-line {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    align-items: flex-start;
}

.answer-linear > .lab-token-line > .lab-answer-token {
    flex: 0 0 auto;
}

.answer-linear .container-answer-token {
    min-width: 132px;
}

.answer-linear .fraction-builder {
    min-width: 106px;
}

.answer-linear .fraction-slot,
.answer-linear .sqrt-radicand,
.answer-linear .lab-container-slot,
.answer-linear .matrix-slot {
    min-height: 36px;
    padding: 6px;
}

.answer-linear .lab-answer-token {
    box-shadow: none;
}

.lab-answer-token,
.lab-bank-token {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    min-height: 46px;
    padding: 8px 10px;
    border: 1px solid #bfd0dc;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 35, 48, .05);
    font-size: 1.05rem;
    font-weight: 850;
}

.lab-answer-token {
    flex-direction: column;
    align-items: stretch;
    min-width: 96px;
    padding: 10px;
}

.lab-answer-token-content {
    display: block;
    min-height: 36px;
    font-size: 1.12rem;
    line-height: 36px;
    text-align: center;
}

.lab-answer-token-content sup,
.lab-bank-token sup {
    position: relative;
    top: -.45em;
    vertical-align: baseline;
    font-size: .72em;
    line-height: 0;
}

.lab-bank-token {
    cursor: grab;
}

.lab-bank-token:active,
.lab-answer-token:active {
    cursor: grabbing;
}

.lab-bank-token.distractor {
    color: #6b4c12;
    border-color: #ead7a5;
    background: #fff9e7;
}

.lab-bank-token.operator-token {
    color: var(--ink);
    border-color: #c7d6e3;
    background: #fff;
}

.lab-bank-token small {
    color: #8a6a18;
    font-size: .72rem;
    text-transform: uppercase;
}

.lab-token-actions {
    display: inline-flex;
    gap: 6px;
    align-items: stretch;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.tiny-action {
    min-width: 34px;
    min-height: 28px;
    padding: 4px 8px;
    font-size: .76rem;
    line-height: 1;
}

.remove-action {
    min-width: 34px;
    color: #b42318;
    border-color: #efc2bc;
    background: #fff6f4;
    font-size: 1rem;
    font-weight: 900;
}

.remove-action:hover {
    color: #fff;
    border-color: #b42318;
    background: #b42318;
}

.lab-remove-zone {
    display: grid;
    min-height: 42px;
    place-items: center;
    border: 1px dashed #e0a89f;
    border-radius: 8px;
    color: #8a2d22;
    background: #fff6f4;
    font-size: .86rem;
    font-weight: 800;
}

.lab-bank {
    display: grid;
    gap: 12px;
    margin: 14px;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.lab-accepted-list {
    display: grid;
    gap: 10px;
    margin: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.lab-accepted-row {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #d9e4eb;
    border-radius: 8px;
    background: #f8fbfc;
}

.lab-accepted-row span {
    font-weight: 800;
    overflow-wrap: anywhere;
}

.capture-accepted-list {
    margin: 0 14px 14px;
    padding: 12px;
}

.capture-accepted-list .lab-section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
}

.capture-accepted-list .lab-accepted-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.operator-builder {
    align-items: center;
    display: flex;
    gap: .45rem;
}

.operator-symbol {
    color: var(--brand-strong);
    font-size: 2rem;
    font-weight: 900;
}

.operator-slots {
    display: grid;
    gap: .3rem;
    min-width: 120px;
}

.lab-container-slot,
.matrix-slot {
    min-width: 5.5rem;
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    background: #f8fbfc;
    padding: 8px;
    color: #6b7a8c;
    font-size: .8rem;
}

.lab-container-slot > span,
.matrix-slot > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.lab-container-slot .lab-token-line,
.matrix-slot .lab-token-line,
.matrix-slot .constructed-answer-token-line {
    gap: 6px;
}

.lab-container-slot .lab-answer-token,
.matrix-slot .lab-answer-token,
.matrix-slot .constructed-answer-token {
    min-width: 72px;
    background: #fff;
    box-shadow: none;
}

.matrix-builder {
    display: grid;
    grid-template-columns: repeat(2, minmax(72px, 1fr));
    gap: 8px;
    padding: 8px 12px;
    border-left: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
    border-radius: 8px;
    min-width: 180px;
}

.capture-accepted-list .lab-accepted-row button {
    align-self: flex-end;
}

.lab-empty-answer.compact {
    min-height: 42px;
}

.lab-json {
    max-height: 520px;
    margin: 14px;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #15313d;
    background: #f8fbfc;
    font-size: .78rem;
    line-height: 1.45;
}

.lab-current-expression {
    margin: 0 14px 14px;
}

.lab-math-preview {
    display: grid;
    gap: 8px;
    margin: 0 14px 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.lab-math-preview span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
}

.lab-math-preview-content {
    display: grid;
    min-height: 64px;
    place-items: center;
    padding: 12px;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    background: #f8fbfc;
    color: var(--ink);
    font-size: 1.2rem;
    overflow-x: auto;
}

.lab-container-help {
    margin: 0 0 4px;
    padding: 10px 12px;
    border: 1px solid #d9e4eb;
    border-radius: 8px;
    color: var(--muted);
    background: #f8fbfc;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.35;
}

.container-token {
    color: var(--brand-strong);
    border-color: rgba(10, 112, 107, .35);
    background: rgba(10, 112, 107, .08);
}

.container-answer-token {
    min-width: 150px;
}

.fraction-builder {
    display: grid;
    gap: 5px;
    justify-items: stretch;
    min-width: 120px;
}

.fraction-slot,
.sqrt-radicand {
    min-height: 42px;
    padding: 8px;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    background: #f8fbfc;
}

.active-drop-target {
    border-color: var(--brand);
    background: #edf9f7;
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .12);
}

.fraction-slot > span,
.sqrt-radicand > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.fraction-bar {
    height: 2px;
    background: var(--ink);
    border-radius: 999px;
}

.sqrt-builder {
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr);
    gap: 8px;
    align-items: stretch;
}

.sqrt-symbol {
    display: grid;
    min-width: 28px;
    place-items: center;
    color: var(--brand-strong);
    font-size: 2rem;
    font-weight: 900;
}

.sqrt-radicand {
    border-top: 2px solid var(--ink);
}

.fraction-slot .lab-token-line,
.sqrt-radicand .lab-token-line {
    gap: 6px;
}

.fraction-slot .lab-answer-token,
.sqrt-radicand .lab-answer-token {
    min-width: 72px;
    box-shadow: none;
}

@media (max-width: 980px) {
    .login-grid {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 42vh;
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: fixed;
        transform: translateX(-100%);
    }

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

    .mobile-menu {
        display: inline-flex;
    }

    .topbar-user span {
        display: none;
    }

    .password-tool-row {
        grid-template-columns: 1fr;
    }

    .page-frame:has(.constructed-lab-page) {
        padding: 12px;
    }

    .constructed-lab-page {
        width: 100%;
    }

    .constructed-lab-header {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .constructed-lab-header h1 {
        font-size: clamp(1.45rem, 5vw, 2rem);
        line-height: 1.05;
    }

    .editor-grid,
    .editor-grid.base-collapsed,
    .html-editor-shell,
    .simulator-shell,
    .lab-shell {
        grid-template-columns: 1fr;
    }

    .lab-config-card,
    .lab-json-card {
        position: static;
    }

    .constructed-workspace .lab-config-card {
        display: none;
    }

    .constructed-workspace {
        width: 100%;
        gap: 0;
    }

    .constructed-workspace .lab-workbench {
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .constructed-workspace .panel-card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 12px 10px 8px;
        border-bottom: 0;
        background: transparent;
    }

    .constructed-workspace .panel-card-header h2 {
        font-size: clamp(1.25rem, 5vw, 1.65rem);
        line-height: 1.08;
    }

    .constructed-live-preview {
        margin: 10px;
        padding: 14px;
    }

    .constructed-live-preview-content {
        min-height: 78px;
        padding: 14px 10px;
        font-size: 1.18rem;
    }

    .formula-output-grid {
        grid-template-columns: 1fr;
        margin: 0 10px 10px;
    }

    .constructed-workspace .lab-answer-zone {
        margin: 10px;
        padding: 12px;
        border-radius: 8px;
    }

    .constructed-workspace .mobile-target-hint {
        display: grid;
    }

    .constructed-workspace .lab-answer-head,
    .constructed-workspace .lab-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .constructed-workspace .answer-view-toggle {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
    }

    .constructed-workspace .answer-view-toggle button {
        flex: 0 0 auto;
    }

    .constructed-workspace .lab-bank {
        position: sticky;
        bottom: 0;
        z-index: 7;
        margin: 10px 0 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 8px 8px 0 0;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -10px 26px rgba(25, 38, 52, .12);
    }

    .constructed-workspace .lab-token-bank {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .constructed-workspace .lab-bank-token {
        flex: 0 0 auto;
    }

    .constructed-workspace .lab-answer-token {
        min-width: 82px;
    }

    .constructed-workspace .container-answer-token {
        min-width: min(100%, 160px);
    }
}

@media (max-width: 720px) {
    .login-brand-panel,
    .login-panel,
    .page-frame {
        padding: 18px;
    }

    .page-frame:has(.constructed-lab-page) {
        padding: 0;
    }

    .constructed-lab-header {
        display: none;
    }

    .login-copy h1 {
        font-size: 2rem;
    }

    .page-header,
    .table-toolbar-main,
    .arelo-table-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .page-actions,
    .modal-actions {
        justify-content: stretch;
    }

    .page-actions button,
    .modal-actions button {
        width: 100%;
    }

    .constructed-workspace .page-actions {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
    }

    .constructed-workspace .page-actions button {
        width: auto;
    }

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

    .tag-editor {
        grid-template-columns: 1fr;
    }

    .modal-search-block {
        grid-template-columns: 1fr;
    }

    .variable-form-grid {
        grid-template-columns: 1fr;
    }

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

    .constructed-live-preview-content {
        min-height: 68px;
        padding: 12px 8px;
        font-size: 1.02rem;
    }

    .constructed-workspace .panel-card-header {
        padding: 12px 12px 4px;
    }

    .constructed-workspace .panel-card-header .eyebrow {
        font-size: .66rem;
    }

    .constructed-workspace .page-actions {
        gap: 6px;
    }

    .constructed-workspace .soft-badge,
    .constructed-workspace .compact {
        min-height: 30px;
        font-size: .76rem;
    }

    .constructed-workspace .lab-prompt,
    .constructed-live-preview,
    .constructed-workspace .lab-answer-zone {
        margin: 8px;
    }

    .constructed-workspace .lab-prompt {
        padding: 14px;
    }

    .constructed-live-preview h3,
    .constructed-workspace .lab-answer-head strong {
        font-size: 1rem;
    }

    .constructed-workspace .lab-answer-head span {
        font-size: .78rem;
    }

    .constructed-workspace .answer-view-toggle {
        padding: 3px;
    }

    .constructed-workspace .answer-view-toggle span {
        font-size: .68rem;
    }

    .constructed-workspace .answer-view-toggle button {
        min-height: 26px;
        padding: 0 8px;
        font-size: .74rem;
    }

    .constructed-workspace .lab-answer-zone {
        min-height: 120px;
        border-width: 1px;
    }

    .constructed-workspace .mobile-target-hint {
        padding: 8px;
        font-size: .8rem;
    }

    .constructed-workspace .lab-empty-answer {
        min-height: 58px;
        font-size: .86rem;
    }

    .constructed-workspace .lab-remove-zone {
        min-height: 34px;
        padding: 7px;
        font-size: .76rem;
        text-align: center;
    }

    .constructed-workspace .lab-bank-token {
        min-height: 40px;
        padding: 7px 9px;
        font-size: .92rem;
    }

    .constructed-workspace .lab-answer-token {
        min-width: 76px;
        min-height: 40px;
        padding: 8px;
        font-size: .94rem;
    }

    .constructed-workspace .lab-answer-token-content {
        min-height: 30px;
        line-height: 30px;
        font-size: 1rem;
    }

    .constructed-workspace .tiny-action {
        min-width: 30px;
        min-height: 26px;
        padding: 3px 7px;
    }

    .editor-base-rail {
        position: static;
        min-height: auto;
        grid-template-columns: auto 1fr;
        justify-items: start;
    }

    .editor-base-rail span {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .editor-metadata-strip {
        grid-template-columns: 1fr;
    }

    .wide-editor-panel {
        grid-column: auto;
    }

    .html-editor-pane {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .curriculum-node header,
    .assignment-row,
    .leaf-focus-header {
        grid-template-columns: 1fr;
    }

    .curriculum-node.level-2,
    .curriculum-node.level-3,
    .curriculum-node.level-4 {
        margin-left: 0;
    }

    .node-actions {
        justify-content: stretch;
    }

    .node-actions button {
        flex: 1 1 120px;
    }
}
.constructed-answer-player {
    display: grid;
    gap: 1rem;
}

.constructed-answer-preview {
    display: grid;
    gap: 12px;
    margin-top: 1rem;
    padding: 18px;
    border: 1px solid #bddbd7;
    border-radius: 8px;
    background: #f7fbfa;
    box-shadow: inset 4px 0 0 var(--brand);
}

.constructed-answer-preview .eyebrow {
    margin-bottom: 0;
}

.constructed-answer-preview h3 {
    margin: 3px 0 0;
    font-size: 1.05rem;
}

.constructed-answer-math {
    display: grid;
    min-height: 92px;
    place-items: center;
    padding: 18px;
    overflow-x: auto;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    text-align: center;
}

.constructed-answer-text-preview {
    place-items: start;
    align-content: center;
    white-space: normal;
    font-size: 1rem;
    line-height: 1.6;
    text-align: left;
}

.constructed-answer-zone {
    border: 2px dashed #9fc2de;
    border-radius: 10px;
    padding: 1rem;
    background: #fbfdff;
    display: grid;
    gap: .85rem;
}

.constructed-answer-head,
.constructed-answer-section-title,
.constructed-answer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.constructed-answer-head span,
.constructed-answer-section-title span {
    display: block;
    color: #65758a;
    font-size: .85rem;
}

.constructed-answer-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #eef4f6;
    border-radius: 999px;
    padding: .25rem;
}

.constructed-answer-toggle span {
    padding: 0 .35rem;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.constructed-answer-toggle button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    padding: .35rem .65rem;
    font-weight: 800;
    color: #526173;
}

.constructed-answer-toggle button.active {
    background: #0f766e;
    color: #fff;
}

.constructed-answer-target {
    display: none;
    border: 1px solid #add7d2;
    border-radius: 8px;
    background: #eaf7f5;
    padding: .65rem .8rem;
}

.constructed-answer-target span {
    display: block;
    color: #65758a;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.constructed-answer-keyboard {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: .65rem;
    align-items: end;
    padding: .75rem;
    border: 1px solid #d5e2ea;
    border-radius: 8px;
    background: #fff;
}

.constructed-answer-keyboard label {
    display: grid;
    gap: .35rem;
}

.constructed-answer-keyboard label span {
    color: #65758a;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
}

.constructed-answer-keyboard > span {
    grid-column: 1 / -1;
    color: #68778b;
    font-size: .78rem;
    font-weight: 700;
}

.constructed-answer-empty {
    min-height: 4.5rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #68778b;
    font-weight: 800;
}

.constructed-answer-token-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.constructed-answer-zone.answer-linear .constructed-answer-token-line {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 8px;
    align-items: flex-start;
}

.constructed-answer-zone.answer-linear > .constructed-answer-token-line > .constructed-answer-token {
    flex: 0 0 auto;
}

.constructed-answer-zone.answer-linear .container-answer-token {
    min-width: 132px;
}

.constructed-answer-zone.answer-linear .fraction-builder {
    min-width: 106px;
}

.constructed-answer-zone.answer-linear .fraction-slot,
.constructed-answer-zone.answer-linear .constructed-answer-radicand,
.constructed-answer-zone.answer-linear .matrix-slot {
    min-height: 36px;
    padding: 6px;
}

.constructed-answer-zone.answer-linear .constructed-answer-token {
    box-shadow: none;
}

.constructed-answer-token {
    display: inline-flex;
    gap: 10px;
    align-items: stretch;
    flex-direction: column;
    min-width: 96px;
    min-height: 46px;
    padding: 10px;
    border: 1px solid #bfd0dc;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 35, 48, .05);
    font-size: 1.05rem;
    font-weight: 850;
}

.constructed-answer-token.container-answer-token {
    min-width: 150px;
    border-color: #9fc2de;
    background: #fff;
}

.constructed-answer-token-content {
    display: block;
    min-height: 36px;
    font-size: 1.12rem;
    line-height: 36px;
    text-align: center;
    border-bottom: 1px solid #d9e3ea;
}

.constructed-answer-token sup,
.constructed-answer-bank-token sup {
    position: relative;
    top: -.45em;
    vertical-align: baseline;
    font-size: .72em;
    line-height: 0;
}

.constructed-answer-token-actions {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.constructed-answer-slot {
    min-width: 5.5rem;
    min-height: 42px;
    display: grid;
    place-items: center;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    background: #f8fbfc;
    padding: 8px;
    color: #6b7a8c;
    font-size: .8rem;
}

.constructed-answer-slot > span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.constructed-answer-slot.active-drop-target {
    border-color: var(--brand);
    background: #edf9f7;
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .12);
}

.fraction-slot,
.constructed-answer-radicand {
    min-height: 42px;
    padding: 8px;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    background: #f8fbfc;
}

.constructed-answer-radicand {
    border-top: 2px solid var(--ink);
}

.fraction-bar {
    height: 2px;
    background: var(--ink);
    border-radius: 999px;
}

.fraction-builder {
    display: grid;
    gap: 5px;
    justify-items: stretch;
    min-width: 120px;
}

.sqrt-builder {
    display: grid;
    grid-template-columns: auto minmax(90px, 1fr);
    gap: 8px;
    align-items: stretch;
}

.operator-builder {
    align-items: center;
    display: flex;
    gap: .4rem;
}

.sqrt-symbol,
.operator-symbol {
    color: var(--brand-strong);
    font-size: 2rem;
    font-weight: 900;
}

.sqrt-symbol {
    align-items: center;
    display: grid;
    min-width: 28px;
    place-items: center;
}

.fraction-slot .constructed-answer-token-line,
.constructed-answer-radicand .constructed-answer-token-line {
    gap: 6px;
}

.fraction-slot .constructed-answer-token,
.constructed-answer-radicand .constructed-answer-token {
    min-width: 72px;
    background: #fff;
    box-shadow: none;
}

.operator-slots .constructed-answer-token,
.constructed-answer-slot .constructed-answer-token {
    background: #fff;
}

.operator-slots {
    display: grid;
    gap: .3rem;
}

.constructed-answer-remove {
    border: 1px dashed #f2aaa1;
    border-radius: 8px;
    background: #fff7f6;
    color: #9b1c12;
    padding: .75rem;
    text-align: center;
    font-weight: 900;
}

.constructed-answer-bank {
    border-top: 1px solid #d7e0e8;
    padding-top: 1rem;
}

.constructed-answer-token-bank {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: .75rem;
}

.constructed-answer-bank-token {
    border: 1px solid #bdd0df;
    border-radius: 8px;
    background: #fff;
    min-height: 2.75rem;
    padding: .55rem .8rem;
    font-weight: 900;
    color: #142235;
}

.constructed-answer-bank-token.container-token {
    border-color: #9ac8c5;
    background: #eefafa;
    color: #075e59;
}

.constructed-answer-bank-token.distractor {
    border-color: #f1ca7a;
    background: #fff8e7;
    color: #7a4f00;
}

.constructed-answer-bank-token small {
    margin-left: .35rem;
    color: inherit;
    text-transform: uppercase;
}

.constructed-answer-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.constructed-answer-coverage {
    border-radius: 8px;
    padding: .7rem .85rem;
    display: grid;
    gap: .2rem;
    margin: .75rem 0;
}

.constructed-answer-coverage.ok {
    border: 1px solid #a8d8cc;
    background: #effbf7;
    color: #075e59;
}

.constructed-answer-coverage.warn {
    border: 1px solid #f1ca7a;
    background: #fff8e7;
    color: #7a4f00;
}

.constructed-answer-component-help {
    margin-top: 1rem;
}

.sub-editor-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.sub-editor-panel-title h3 {
    margin: 0;
}

.selectable-token {
    cursor: pointer;
}

.selectable-token.selected {
    border-color: var(--brand);
    background: #eaf7f5;
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .12);
}

.selectable-token.disabled-token {
    opacity: .42;
    background: #f3f6f8;
    border-style: dashed;
    box-shadow: none;
}

.component-palette,
.piece-palette {
    padding: .35rem 0;
}

.matrix-size-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}

.label-with-help {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
}

.help-icon-button {
    align-items: center;
    background: #eef5f4;
    border: 1px solid #b8d2cf;
    border-radius: 999px;
    color: #075e59;
    cursor: pointer;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 900;
    height: 1.35rem;
    justify-content: center;
    line-height: 1;
    width: 1.35rem;
}

.help-icon-button:hover {
    background: #dcefed;
    border-color: #197b73;
}

.constructed-answer-expected-preview {
    background: #f8fbfb;
    border: 1px solid #d3e0df;
    border-radius: 8px;
    display: grid;
    gap: .35rem;
    margin-top: .75rem;
    padding: .75rem .85rem;
}

.structured-lab-page {
    display: grid;
    gap: 1rem;
}

.structured-lab-header {
    margin-bottom: 0;
}

.structured-lab-shell {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.structured-lab-panel,
.structured-student-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 35, 48, .08);
}

.structured-lab-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.structured-student-panel {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
}

.structured-student-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.structured-student-head h2,
.structured-lab-panel h2,
.structured-lab-panel h3 {
    margin: 0;
}

.structured-lab-preview-card,
.structured-question-card,
.structured-normalized,
.structured-active-slot {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    padding: .85rem;
}

.structured-question-card {
    display: grid;
    gap: .4rem;
    background: #fff;
}

.structured-question-card p {
    margin: 0;
    color: var(--muted);
}

.structured-answer-stage {
    min-height: 260px;
    display: grid;
    place-items: center;
    border: 2px dashed #a9c7df;
    border-radius: 8px;
    background: #fbfdff;
    padding: 1.25rem;
}

.structured-template {
    display: inline-grid;
    justify-items: center;
    align-items: center;
    gap: .55rem;
    max-width: 100%;
}

.structured-mixed-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.structured-equation-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.structured-text-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    flex-wrap: wrap;
    color: var(--ink);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: 1.5;
}

.structured-fixed-text {
    font-weight: 750;
}

.structured-dynamic-builder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.structured-dynamic-fixed {
    min-width: 1.8rem;
    text-align: center;
}

.structured-builder-editor {
    display: grid;
    gap: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    padding: .9rem;
}

.structured-builder-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
}

.structured-template-text-gap .structured-slot {
    min-width: 8.5rem;
}

.structured-fixed-symbol {
    color: var(--ink);
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

.structured-fraction {
    display: inline-grid;
    gap: .28rem;
    min-width: 7rem;
    align-items: center;
    justify-items: stretch;
}

.structured-fraction-bar {
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}

.structured-matrix {
    display: grid;
    grid-template-columns: repeat(2, minmax(5.5rem, 1fr));
    gap: .45rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
    border-radius: 8px;
}

.structured-slot {
    position: relative;
    display: grid;
    gap: .25rem;
    min-width: 5.8rem;
    min-height: 4.25rem;
    border: 1px dashed #a9bfd0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: .55rem .65rem;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 12px rgba(15, 35, 48, .04);
}

.structured-slot:hover,
.structured-slot.active {
    border-color: var(--brand);
    background: #effbf9;
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .12);
}

.structured-slot.empty strong {
    color: #94a3b8;
}

.structured-slot-label {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.structured-slot strong {
    min-height: 1.45rem;
    font-size: 1.15rem;
    font-weight: 950;
}

.structured-slot-clear {
    color: #b42318;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.structured-piece-editor,
.structured-expected-editor {
    display: grid;
    gap: .75rem;
}

.structured-piece-editor-inline {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    padding: .9rem;
}

.structured-add-piece {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
}

.structured-piece-bank {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.structured-piece {
    border: 1px solid #bdd0df;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    min-height: 2.65rem;
    min-width: 2.65rem;
    padding: .45rem .75rem;
    font-weight: 900;
    cursor: grab;
}

.structured-piece:hover {
    border-color: var(--brand);
    background: #effbf9;
}

.structured-active-slot {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
}

.structured-active-slot span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.structured-validation {
    border-radius: 8px;
    padding: .8rem .9rem;
    font-weight: 900;
}

.structured-validation.ok {
    border: 1px solid #a8d8cc;
    background: #effbf7;
    color: #075e59;
}

.structured-validation.warn {
    border: 1px solid #f1ca7a;
    background: #fff8e7;
    color: #7a4f00;
}

.structured-normalized {
    display: grid;
    gap: .4rem;
}

.structured-normalized code {
    white-space: normal;
}

@media (max-width: 980px) {
    .structured-lab-shell {
        grid-template-columns: 1fr;
    }

    .structured-student-head {
        align-items: stretch;
        flex-direction: column;
    }

    .structured-answer-stage {
        min-height: 220px;
        padding: .85rem;
    }

    .structured-mixed-wrap {
        gap: .55rem;
    }
}

@media (max-width: 560px) {
    .structured-add-piece {
        grid-template-columns: 1fr;
    }

    .structured-matrix {
        grid-template-columns: repeat(2, minmax(4.6rem, 1fr));
        padding: .6rem;
    }

    .structured-slot {
        min-width: 4.6rem;
        min-height: 3.8rem;
        padding: .45rem;
    }
}

.constructed-answer-expected-math {
    align-items: center;
    background: #ffffff;
    border: 1px dashed #b8d2cf;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    min-height: 4rem;
    overflow-x: auto;
    padding: .75rem;
}

.constructed-answer-help-modal {
    max-width: 760px;
}

.structured-response-editor,
.structured-response-player {
    display: grid;
    gap: 1rem;
}

.structured-response-grid {
    display: grid;
    grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: start;
}

.structured-response-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.structured-response-matrix-picker {
    margin-top: .85rem;
}

.structured-response-builder,
.structured-response-preview,
.structured-response-pieces,
.structured-response-block-list {
    display: grid;
    gap: .75rem;
    margin-top: 1rem;
}

.structured-response-preview {
    border: 1px solid #bddbd7;
    border-radius: 8px;
    background: #f7fbfa;
    box-shadow: inset 4px 0 0 var(--brand);
    padding: 1rem;
}

.structured-response-preview .eyebrow {
    margin-bottom: 0;
}

.structured-response-preview h3 {
    margin: 3px 0 0;
    font-size: 1.05rem;
    line-height: 1.25;
}

.cartesian-lab-page {
    display: grid;
    gap: 1rem;
}

.cartesian-lab-header {
    margin-bottom: 0;
}

.cartesian-mode-tabs {
    width: fit-content;
}

.cartesian-lab-shell {
    display: grid;
    grid-template-columns: minmax(310px, 380px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.cartesian-lab-panel,
.cartesian-student-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 35, 48, .08);
}

.cartesian-lab-panel,
.cartesian-student-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.cartesian-question-card {
    display: grid;
    gap: .4rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: .9rem;
}

.cartesian-question-card p {
    margin: 0;
    color: var(--muted);
}

.cartesian-scenario-card {
    display: grid;
    gap: .35rem;
    border: 1px solid #bdd0df;
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    background: #f8fafc;
    padding: .85rem;
}

.cartesian-scenario-card span {
    color: var(--brand-strong);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.cartesian-scenario-card strong {
    color: var(--ink);
}

.cartesian-scenario-card p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.35;
}

.cartesian-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(240px, 320px);
    gap: 1rem;
    align-items: start;
}

.cartesian-workspace-preview {
    grid-template-columns: minmax(320px, 760px);
    justify-content: center;
}

.visual-cartesian-player {
    display: grid;
    justify-content: center;
    margin: .75rem auto 0;
    width: min(100%, 760px);
}

.panel-cartesian-editor {
    display: grid;
    gap: 1rem;
}

.panel-cartesian-window {
    display: grid;
    gap: .8rem;
    border: 1px solid #d4e2ec;
    border-radius: 8px;
    padding: 1rem;
    background: #f8fbfc;
}

.panel-cartesian-axis-row {
    display: grid;
    grid-template-columns: minmax(72px, .35fr) repeat(3, minmax(140px, 1fr));
    gap: .75rem;
    align-items: end;
}

.panel-cartesian-axis-row > strong {
    align-self: center;
    color: #006b66;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.panel-cartesian-window-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .75rem .9rem;
    border: 1px solid #d4e2ec;
    border-radius: 8px;
    background: #f8fbfc;
}

.panel-cartesian-window-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: #eaf4f2;
    color: #005b58;
    font-size: .82rem;
    font-weight: 850;
}

.panel-cartesian-elements-title {
    margin-top: .35rem;
    padding-top: 1rem;
    border-top: 1px solid #dbe6ee;
}

.panel-cartesian-element-editor {
    display: grid;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid #d4e2ec;
    border-radius: 8px;
    background: #fff;
}

.panel-cartesian-meta-grid {
    grid-template-columns: minmax(140px, .8fr) minmax(220px, 1.4fr) minmax(88px, .45fr) minmax(88px, .45fr) minmax(150px, .65fr);
    align-items: end;
}

.panel-cartesian-function-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.panel-cartesian-fields .full-span {
    grid-column: 1 / -1;
}

.cartesian-plane {
    width: 100%;
    max-height: min(72vh, 680px);
    border: 1px solid #bdd0df;
    border-radius: 8px;
    background: #fff;
    touch-action: none;
}

.cartesian-plane-bg {
    fill: #ffffff;
}

.cartesian-hit-area {
    cursor: crosshair;
    fill: transparent;
    pointer-events: all;
}

.cartesian-grid-line {
    stroke: #dbe5ee;
    stroke-width: 1;
}

.cartesian-grid-line.axis {
    stroke: #243447;
    stroke-width: 2;
}

.cartesian-axis-label {
    fill: #6a7788;
    font-size: 12px;
    font-weight: 800;
    user-select: none;
}

.cartesian-student-line {
    stroke: #176b67;
    stroke-width: 4;
    stroke-linecap: round;
    opacity: .9;
}

.cartesian-reference-line {
    pointer-events: none;
}

.cartesian-reference-line line {
    stroke: #c98b2c;
    stroke-width: 4;
    stroke-dasharray: 8 7;
    stroke-linecap: round;
    opacity: .85;
}

.cartesian-reference-line line.variant-1 {
    stroke: #7756a8;
}

.cartesian-reference-line text {
    fill: #344052;
    font-size: 13px;
    font-weight: 950;
    user-select: none;
}

.cartesian-visual-list {
    display: grid;
    gap: .65rem;
    padding-top: .35rem;
    border-top: 1px solid var(--line);
}

.cartesian-lab-panel .full-span {
    grid-column: 1 / -1;
}

.cartesian-visual-element {
    pointer-events: none;
}

.cartesian-visual-element text {
    font-size: 15px;
    font-weight: 950;
    user-select: none;
}

.cartesian-visual-line line,
.cartesian-visual-circle circle,
.cartesian-visual-ellipse ellipse,
.cartesian-visual-function polyline {
    vector-effect: non-scaling-stroke;
}

.cartesian-formula-glossary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    padding: .85rem;
}

.cartesian-formula-glossary summary {
    cursor: pointer;
    color: var(--teal-dark);
    font-weight: 950;
}

.cartesian-formula-note {
    border: 1px solid rgba(13, 116, 106, .18);
    border-radius: 8px;
    background: rgba(232, 246, 244, .72);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.35;
    margin-top: .75rem;
    padding: .6rem .7rem;
}

.cartesian-formula-note strong {
    color: var(--teal-dark);
}

.cartesian-formula-note code {
    color: #0f766e;
    font-weight: 950;
}

.cartesian-formula-group {
    display: grid;
    gap: .45rem;
    margin-top: .75rem;
}

.cartesian-formula-group strong {
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
}

.cartesian-formula-group code {
    display: block;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #f8fbfc;
    padding: .45rem .55rem;
    color: var(--ink);
    font-size: .82rem;
}

.cartesian-formula-group span {
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.35;
}

.cartesian-visual-label text {
    font-size: 18px;
}

.cartesian-visual-error {
    fill: var(--danger);
    font-size: 14px;
    font-weight: 900;
}

.cartesian-point circle {
    stroke-width: 2;
}

.cartesian-point text {
    font-size: 14px;
    font-weight: 900;
    user-select: none;
}

.cartesian-point.expected circle {
    fill: #fff8e7;
    stroke: #c98b2c;
}

.cartesian-point.expected {
    pointer-events: none;
}

.cartesian-point.expected text {
    fill: #7a4f00;
}

.cartesian-point.student {
    cursor: pointer;
}

.cartesian-point.student circle {
    fill: #176b67;
    stroke: #0d504d;
}

.cartesian-point.student.active circle {
    fill: #0d504d;
    stroke: #f1ca7a;
    stroke-width: 4;
}

.cartesian-point.student text {
    fill: #0d504d;
}

.cartesian-controls {
    display: grid;
    gap: 1rem;
}

.cartesian-point-selector,
.cartesian-summary {
    display: grid;
    gap: .65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
    padding: .85rem;
}

.cartesian-point-selector {
    grid-template-columns: 1fr auto auto;
    align-items: center;
}

.cartesian-point-selector span,
.cartesian-summary span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.cartesian-point-selector button {
    min-width: 2.5rem;
    min-height: 2.35rem;
    border: 1px solid #bdd0df;
    border-radius: 8px;
    background: #fff;
    font-weight: 950;
}

.cartesian-point-selector button.active {
    border-color: var(--brand);
    background: #eaf7f5;
    color: var(--brand-strong);
}

.cartesian-summary div {
    display: grid;
    gap: .2rem;
}

.cartesian-summary.compact {
    background: #fff;
}

@media (max-width: 980px) {
    .cartesian-lab-shell,
    .cartesian-workspace {
        grid-template-columns: 1fr;
    }
}

.visual-panel-lab-page {
    display: grid;
    gap: 18px;
}

.visual-panel-lab-header {
    padding-bottom: 0;
}

.visual-panel-lab-shell {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.visual-panel-config,
.visual-panel-editor-card,
.visual-panel-preview-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.visual-panel-config,
.visual-panel-editor-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.visual-panel-config {
    position: sticky;
    top: 14px;
}

.visual-panel-workbench {
    display: grid;
    gap: 16px;
}

.visual-template-help {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 10px;
    border: 1px solid #d6e3e4;
    border-radius: 7px;
    background: #f8fbfa;
}

.visual-template-help span {
    width: 100%;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.visual-template-help code {
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: #006267;
    background: #fff;
    font-size: .78rem;
    font-weight: 800;
}

.panel-token-help-card {
    display: grid;
    gap: 5px;
    min-width: min(100%, 230px);
    flex: 1 1 230px;
    padding: 10px;
    border: 1px solid #d7e2e4;
    border-radius: 8px;
    background: #fff;
}

.panel-token-help-card code {
    justify-self: start;
}

.panel-token-help-card small {
    color: #5c6a78;
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.35;
}

.panel-token-help-modal {
    width: min(860px, calc(100vw - 32px));
}

.panel-token-help-modal .modal-body {
    max-height: min(620px, calc(100vh - 190px));
    overflow: auto;
}

.visual-category-editor {
    display: grid;
    gap: 8px;
}

.visual-category-edit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.visual-category-edit-card.active {
    border-color: var(--teal);
    background: #f1fbf9;
}

.visual-category-edit-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    color: #172330;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.visual-category-edit-main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-category-edit-main span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.visual-products-grid {
    display: grid;
    gap: 10px;
}

.visual-product-edit-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.visual-product-edit-icon {
    display: grid;
    place-items: center;
    width: 48px;
    aspect-ratio: 1;
    border: 1px solid #bfd2d4;
    border-radius: 8px;
    color: #005f64;
    background: #fff;
    font-weight: 900;
    letter-spacing: .04em;
}

.visual-product-edit-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.visual-product-edit-fields {
    display: grid;
    gap: 8px;
}

.visual-product-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.visual-panel-preview-card {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.visual-generated-question {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #162534;
    background: #fff;
    font-size: 1rem;
    line-height: 1.55;
}

.visual-store-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fbfa);
}

.visual-store-category {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.visual-store-category header {
    display: grid;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5ecee;
}

.visual-store-category h3 {
    margin: 0;
    color: #162534;
    font-size: 1rem;
}

.visual-store-category header span {
    color: #006267;
    font-size: .9rem;
    font-style: italic;
    font-weight: 850;
}

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

.visual-store-product {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 8px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.visual-store-product.selected {
    border-color: #d49a2d;
    background: #fff7e8;
}

.visual-store-product-icon {
    display: grid;
    place-items: center;
    width: 58px;
    aspect-ratio: 1;
    border: 1px solid #1f2d3a;
    border-radius: 7px;
    color: #1f2d3a;
    background:
        linear-gradient(135deg, transparent 45%, #eef4f5 45% 55%, transparent 55%),
        #fff;
    font-weight: 900;
    letter-spacing: .04em;
}

.visual-store-product-icon img {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.visual-store-product span {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-scenario-summary,
.visual-panel-note {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid #d6e3e4;
    border-radius: 8px;
    background: #f8fbfa;
}

.visual-scenario-summary span,
.visual-blueprint-card span,
.visual-token-card span,
.visual-panel-note strong {
    color: var(--brand);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.visual-scenario-summary strong {
    color: var(--ink);
    font-size: 1rem;
}

.visual-scenario-summary p,
.visual-panel-note p,
.visual-blueprint-card p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.visual-case-list {
    display: grid;
    gap: 7px;
}

.visual-case-button {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: #26323f;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.visual-case-button:hover,
.visual-case-button.active {
    border-color: var(--brand);
    background: #f1fbf9;
}

.visual-case-button span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.visual-case-button strong {
    font-size: .9rem;
}

.visual-blueprint-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
    gap: 12px;
}

.visual-blueprint-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.visual-blueprint-card pre {
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    color: #172330;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.5;
}

.visual-token-grid,
.visual-snapshot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.visual-token-card,
.visual-snapshot-grid span {
    display: inline-grid;
    gap: 4px;
    min-width: 150px;
    padding: 9px 10px;
    border: 1px solid #d6e3e4;
    border-radius: 8px;
    background: #fff;
}

.visual-token-card strong {
    color: #172330;
    font-size: .9rem;
}

.visual-snapshot-grid span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: auto;
    color: #172330;
    font-size: .86rem;
    font-weight: 750;
}

.visual-snapshot-grid code {
    color: #006267;
    font-weight: 900;
}

.visual-data-table-card,
.visual-ticket-card,
.visual-timeline-card,
.visual-route-card,
.visual-bars-card,
.visual-generic-card-grid {
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: #fff;
}

.visual-data-table-card {
    overflow-x: auto;
}

.visual-data-table-title {
    padding: 14px 16px;
    border-bottom: 1px solid #dbe6e8;
    color: var(--ink);
    background: #f8fbfa;
    font-size: 1.02rem;
    font-weight: 950;
    text-align: center;
}

.visual-data-table {
    width: 100%;
    border-collapse: collapse;
}

.visual-data-table th,
.visual-data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.visual-data-table th {
    color: #40505f;
    background: #f8fafc;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.visual-ticket-card {
    display: grid;
    gap: 6px;
    max-width: 440px;
    padding: 18px;
    font-family: "Cascadia Mono", Consolas, monospace;
}

.visual-ticket-title {
    padding-bottom: 8px;
    border-bottom: 1px dashed #a9b8c4;
    color: var(--brand-strong);
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.visual-ticket-line,
.visual-ticket-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}

.visual-ticket-line small {
    color: var(--muted);
}

.visual-ticket-total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 2px solid #172330;
    font-weight: 900;
}

.visual-timeline-card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.visual-timeline-card article {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.visual-timeline-card span,
.visual-route-card span {
    color: var(--brand-strong);
    font-weight: 900;
}

.visual-timeline-card small {
    color: var(--muted);
    font-weight: 800;
}

.visual-route-card {
    display: grid;
    gap: 10px;
    padding: 16px;
}

.visual-route-card article {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid #bdd0df;
    border-radius: 8px;
    background: linear-gradient(90deg, #fff, #f8fbfa);
    text-align: center;
}

.visual-route-card span::before,
.visual-route-card span::after {
    content: "";
    display: inline-block;
    width: 36px;
    height: 1px;
    margin: 0 8px 4px;
    background: #9eb3c2;
}

.visual-bars-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    overflow-x: auto;
}

.visual-bars-heading {
    display: grid;
    gap: 4px;
    padding: 4px 2px 8px;
    color: #172330;
    font-size: 1rem;
    line-height: 1.45;
    text-align: center;
}

.visual-bars-heading h1,
.visual-bars-heading h2,
.visual-bars-heading h3,
.visual-bars-heading p {
    margin: 0;
}

.visual-bars-axis-layout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.visual-bars-y-axis {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    min-height: 250px;
    padding: 12px 0 34px;
    color: #607080;
    font-size: .76rem;
    font-weight: 900;
    text-align: right;
}

.visual-bars-y-axis span:last-child {
    align-self: end;
}

.visual-bars-x-axis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 0 8px 2px 140px;
    color: #607080;
    font-size: .76rem;
    font-weight: 900;
}

.visual-bar-row {
    display: grid;
    grid-template-columns: minmax(86px, 130px) minmax(0, 1fr) minmax(42px, auto);
    gap: 12px;
    align-items: center;
}

.visual-bar-row span,
.visual-bar-row strong {
    font-weight: 900;
}

.visual-bar-track {
    height: 30px;
    overflow: hidden;
    border: 1px solid #bdd0df;
    border-radius: 8px;
    background: repeating-linear-gradient(
        90deg,
        #f8fafc 0,
        #f8fafc calc(20% - 1px),
        #e7eef3 20%,
        #e7eef3 calc(20% + 1px)
    );
}

.visual-bar-track i {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 7px;
}

.visual-bar-row strong.side {
    justify-self: start;
}

.visual-bar-stack-horizontal {
    display: flex;
}

.visual-bar-stack-horizontal i {
    flex: 0 0 auto;
    border-radius: 0;
}

.visual-bar-stack-horizontal i:first-child {
    border-radius: 7px 0 0 7px;
}

.visual-bar-stack-horizontal i:last-child {
    border-radius: 0 7px 7px 0;
}

.visual-bar-group-horizontal {
    display: grid;
    gap: 4px;
}

.visual-bar-group-horizontal .visual-bar-track {
    height: 18px;
}

.visual-bars-card.vertical {
    min-width: min(100%, 420px);
}

.visual-bars-plot {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(64px, 1fr);
    gap: 14px;
    align-items: end;
    min-height: 250px;
    padding: 14px 10px 8px;
    border: 1px solid #d9e5e6;
    border-radius: 8px;
    background:
        linear-gradient(#edf3f6 1px, transparent 1px),
        #fbfcfd;
    background-size: 100% 20%;
}

.visual-bar-column {
    display: grid;
    grid-template-rows: auto minmax(140px, 1fr) minmax(2.2rem, auto);
    gap: 8px;
    align-items: end;
    min-width: 0;
    text-align: center;
}

.visual-bar-column strong {
    color: #172330;
    font-size: .92rem;
    font-weight: 950;
}

.visual-bar-value-placeholder {
    visibility: hidden;
}

.visual-bar-stack-wrap {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 6px;
    height: 100%;
    min-height: 140px;
}

.visual-bar-stack-wrap > i {
    display: block;
    width: min(72%, 52px);
    min-height: 3px;
    border-radius: 8px 8px 3px 3px;
    box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .08);
}

.visual-bar-stack-wrap em {
    align-self: center;
    color: #172330;
    font-size: .78rem;
    font-style: normal;
    font-weight: 950;
}

.visual-bar-group-vertical {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: 100%;
    min-height: 140px;
}

.visual-bar-group-vertical i {
    display: block;
    width: min(30%, 22px);
    min-height: 3px;
    border-radius: 7px 7px 3px 3px;
    box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .08);
}

.visual-bar-stack-vertical {
    display: flex;
    flex-direction: column-reverse;
    width: min(72%, 52px);
    min-height: 3px;
    overflow: hidden;
    border-radius: 8px 8px 3px 3px;
    box-shadow: inset 0 -10px 16px rgba(0, 0, 0, .08);
}

.visual-bar-stack-vertical i {
    display: block;
    width: 100%;
    min-height: 2px;
}

.visual-bar-column span {
    display: block;
    overflow: hidden;
    color: #40505f;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-bar-error {
    display: grid;
    gap: 4px;
    align-self: stretch;
    padding: 12px;
    border: 1px solid #f3b2ad;
    border-radius: 8px;
    color: #8a1f15;
    background: #fff5f3;
}

.visual-bars-plot .visual-bar-error {
    align-self: center;
    min-width: 150px;
}

.visual-bar-error strong {
    color: #7d1b14;
    font-weight: 950;
}

.visual-bars-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    padding-top: 2px;
}

.visual-bars-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #40505f;
    font-size: .83rem;
    font-weight: 900;
}

.visual-bars-legend i {
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.visual-bar-error span {
    color: #8a1f15;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.3;
}

.visual-generic-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
}

.visual-generic-card-grid article {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcfd;
}

.visual-generic-card-grid span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.visual-generic-card-grid strong {
    color: var(--brand-strong);
    font-size: 1.15rem;
}

.visual-generic-card-grid small {
    color: var(--muted);
    font-weight: 750;
}

.panel-visual-editor {
    gap: 18px;
}

.panel-visual-editor-grid {
    display: grid;
    grid-template-columns: minmax(320px, .55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.panel-template-tokens {
    grid-column: 1 / -1;
}

.panel-template-tokens .visual-template-help {
    margin: 0;
}

.panel-visual-editor textarea.textarea {
    min-height: 142px;
    resize: vertical;
}

.panel-visual-editor .sub-editor-panel {
    overflow: hidden;
    border-color: #d6e3e4;
    background: #fff;
}

.panel-visual-editor .sub-editor-panel-title {
    background: linear-gradient(180deg, #fff, #f8fbfa);
}

.panel-category-editor {
    display: grid;
    gap: 16px;
}

.compact-note {
    align-self: stretch;
    margin: 0;
    padding: 11px 12px;
    border-color: #d7e6e7;
    color: #516171;
    background: #f5fbfa;
    font-size: .84rem;
    line-height: 1.45;
}

.panel-category-grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.panel-category-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 180px;
    padding: 10px;
    border: 1px solid #d9e5e6;
    border-radius: 8px;
    background: #f8fbfa;
}

.panel-category-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 2px 8px;
    border-bottom: 1px solid #dce7e8;
}

.panel-category-list-header span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.panel-category-list-header strong {
    display: grid;
    min-width: 26px;
    height: 26px;
    place-items: center;
    border: 1px solid #bddbd7;
    border-radius: 999px;
    color: var(--brand-strong);
    background: #fff;
    font-size: .82rem;
    font-weight: 950;
}

.panel-category-empty {
    display: grid;
    min-height: 132px;
    gap: 4px;
    place-items: center;
    border: 1px dashed #bdd0d2;
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    text-align: center;
}

.panel-category-empty strong {
    color: var(--brand-strong);
    font-size: .84rem;
    font-weight: 950;
}

.panel-category-empty span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.panel-category-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid #d7e2e4;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.panel-category-button:hover {
    border-color: #9fc7c5;
    background: #f6fbfa;
}

.panel-category-button.active {
    border-color: var(--brand);
    background: #f1fbf9;
    box-shadow: inset 4px 0 0 var(--brand);
}

.panel-category-button span {
    overflow: hidden;
    color: var(--brand-strong);
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-category-button strong {
    display: grid;
    min-width: 28px;
    height: 26px;
    place-items: center;
    border: 1px solid #bddbd7;
    border-radius: 999px;
    color: #006267;
    background: #f8fbfa;
    font-size: .78rem;
    font-weight: 950;
    text-align: right;
}

.panel-category-button small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 800;
}

.panel-category-button .panel-category-description {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #526171;
    font-size: .82rem;
    font-weight: 850;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-category-detail {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 180px;
    padding: 14px;
    border: 1px solid #d9e5e6;
    border-radius: 8px;
    background: #fff;
}

.panel-category-detail > .editor-note {
    display: grid;
    min-height: 150px;
    place-items: center;
    margin: 0;
    border-style: dashed;
    color: var(--muted);
    background: #fbfdfd;
    text-align: center;
}

.panel-category-detail > .form-grid {
    grid-template-columns: minmax(190px, 1.3fr) minmax(150px, .8fr) minmax(170px, 1fr) auto;
    align-items: end;
}

.field-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #d7e2e4;
    border-radius: 8px;
    color: var(--brand-strong);
    background: #f8fbfa;
    font-size: .82rem;
    font-weight: 900;
}

.field-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
}

.panel-category-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.panel-products-editor {
    display: grid;
    gap: 10px;
}

.panel-table-editor {
    display: grid;
    gap: 14px;
}

.panel-table-title-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, .9fr);
    gap: 12px;
    align-items: end;
}

.panel-table-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.panel-table-side,
.panel-table-main {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d9e5e6;
    border-radius: 8px;
    background: #f8fbfa;
}

.panel-table-pill {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d7e2e4;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.panel-table-pill:hover,
.panel-table-pill.active {
    border-color: var(--brand);
    background: #f1fbf9;
}

.panel-table-pill span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: var(--brand-strong);
    background: #eaf5f2;
    font-size: .78rem;
    font-weight: 950;
}

.panel-table-pill strong {
    overflow: hidden;
    font-size: .86rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-table-inline-editor,
.panel-table-cell-editor {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: #fff;
}

.panel-table-row-list {
    display: grid;
    gap: 8px;
}

.panel-table-row-button {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d7e2e4;
    border-radius: 8px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.panel-table-row-button:hover,
.panel-table-row-button.active {
    border-color: var(--brand);
    background: #f1fbf9;
}

.panel-table-row-button strong {
    color: var(--brand-strong);
    font-size: .82rem;
    font-weight: 950;
}

.panel-table-row-button span {
    overflow: hidden;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-table-cells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.panel-bars-editor {
    display: grid;
    gap: 14px;
}

.panel-bars-settings {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(180px, 1.4fr);
    align-items: end;
}

.panel-bars-series {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: #f8fbfc;
}

.panel-bar-series-card {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(90px, auto) auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: #fff;
}

.panel-bars-list {
    display: grid;
    gap: 10px;
}

.panel-bar-card {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(110px, .35fr) minmax(92px, auto) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: #fbfcfd;
}

.panel-bar-card:hover {
    border-color: #bdd4d6;
    background: #fff;
}

.panel-bar-card .form-field {
    margin: 0;
}

.panel-bar-card .form-field small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.3;
}

.panel-bar-card .color-field {
    width: 4.4rem;
    min-width: 4.4rem;
    padding: 4px;
}

.panel-bar-values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.panel-product-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid #d8e3e5;
    border-radius: 8px;
    background: #fbfcfd;
}

.panel-product-card:hover {
    border-color: #bdd4d6;
    background: #fff;
}

.panel-product-fields {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.panel-product-fields > .field {
    font-weight: 850;
}

.visual-product-mini-grid {
    display: grid;
    grid-template-columns: minmax(120px, .7fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.asset-select-button {
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    padding-inline: 11px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visual-store-empty {
    display: grid;
    grid-column: 1 / -1;
    gap: 4px;
    min-height: 150px;
    place-items: center;
    padding: 24px;
    border: 1px dashed #bdd0d2;
    border-radius: 8px;
    color: var(--muted);
    background: #fff;
    text-align: center;
}

.visual-store-empty strong {
    color: var(--brand-strong);
    font-size: 1rem;
}

.visual-store-empty span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 750;
}

.panel-token-button {
    cursor: pointer;
    text-align: left;
}

.panel-token-button:hover {
    border-color: var(--brand);
    background: #f1fbf9;
}

@media (max-width: 1100px) {
    .visual-panel-lab-shell {
        grid-template-columns: 1fr;
    }

    .visual-panel-config {
        position: static;
    }
}

@media (max-width: 760px) {
    .visual-product-edit-card,
    .panel-category-grid,
    .panel-product-card,
    .panel-table-title-row,
    .panel-table-layout,
    .panel-bars-settings,
    .panel-cartesian-axis-row,
    .panel-cartesian-meta-grid,
    .panel-cartesian-function-grid,
    .panel-bar-series-card,
    .panel-bar-card,
    .visual-product-mini-grid,
    .visual-store-panel,
    .visual-blueprint-grid,
    .visual-generic-card-grid {
        grid-template-columns: 1fr;
    }

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

    .visual-timeline-card article,
    .visual-ticket-line,
    .visual-ticket-total,
    .visual-bar-row {
        grid-template-columns: 1fr;
    }

    .visual-bars-card {
        padding: 12px;
    }

    .visual-bar-row {
        gap: 8px;
    }

    .visual-bar-track,
    .visual-bar-group-horizontal {
        grid-row: 2;
    }

    .visual-bars-axis-layout {
        grid-template-columns: 1fr;
    }

    .visual-bars-y-axis,
    .visual-bars-x-axis {
        display: none;
    }

    .visual-bars-plot {
        grid-auto-columns: minmax(52px, 1fr);
        gap: 10px;
        min-height: 210px;
        padding-inline: 8px;
    }

    .visual-bar-column {
        grid-template-rows: auto minmax(112px, 1fr) minmax(2rem, auto);
    }

    .visual-bar-column span {
        font-size: .74rem;
    }
}

.mathfield-lab-page {
    display: grid;
    gap: 1rem;
}

.mathfield-lab-header {
    align-items: flex-end;
}

.mathfield-lab-shell {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.mathfield-lab-side,
.mathfield-lab-workbench {
    min-width: 0;
}

.compact-output {
    display: grid;
    gap: .8rem;
}

.mathfield-copy-actions {
    justify-content: stretch;
    margin-top: .85rem;
}

.mathfield-copy-actions button {
    flex: 1;
}

.mathfield-lab-notes {
    margin-top: 1rem;
}

.mathfield-board {
    padding: 1rem;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    background: #202229;
}

.mathfield-host {
    min-height: 132px;
}

math-field.mathfield-lab-input {
    display: block;
    width: 100%;
    min-height: 116px;
    padding: 1.15rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: #272a31;
    color: #ffffff;
    font-size: 1.85rem;
    --caret-color: #c8b6ff;
    --selection-background-color: rgba(200, 182, 255, .28);
    --contains-highlight-background-color: rgba(200, 182, 255, .18);
}

math-field.mathfield-lab-input::part(menu-toggle),
math-field.mathfield-lab-input::part(virtual-keyboard-toggle) {
    color: #ffffff;
}

.mathfield-preview-panel {
    display: grid;
    gap: .8rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid #b7d7d3;
    border-left: 4px solid #007a72;
    border-radius: 8px;
    background: #f6fffd;
}

.mathfield-preview-panel h3 {
    margin: 0;
    font-size: 1rem;
}

.mathfield-preview-content {
    min-height: 86px;
    display: grid;
    place-items: center;
    padding: 1rem;
    border: 1px dashed #a9cbe6;
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
    font-size: 1.2rem;
}

.mathfield-tabs {
    display: flex;
    gap: 1.25rem;
    margin-top: 1rem;
    border-bottom: 1px solid #d7e2ec;
    overflow-x: auto;
}

.mathfield-tabs button {
    appearance: none;
    padding: .75rem 0 .65rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #6d7a88;
    font-weight: 900;
}

.mathfield-tabs button.active {
    border-color: #007a72;
    color: #102033;
}

.mathfield-keypad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: .45rem;
    margin-top: .85rem;
}

.mathfield-key {
    min-height: 54px;
    padding: .6rem .75rem;
    border: 1px solid #d1dfeb;
    border-radius: 18px;
    background: #ffffff;
    color: #102033;
    font-size: 1.18rem;
    font-weight: 900;
    box-shadow: 0 1px 0 rgba(16, 32, 51, .04);
}

.mathfield-key:hover {
    border-color: #8ebbb7;
    background: #f4fbfa;
}

.mathfield-key.container,
.mathfield-key.function {
    background: #eef7f6;
    border-color: #a9d7d3;
    color: #006b63;
}

.mathfield-key.operator {
    background: #f2f0f8;
    border-color: #d7cdec;
}

.mathfield-key.number {
    background: #f7f9fb;
}

.mathfield-examples {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d7e2ec;
}

.mathfield-example-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.mathfield-example-list button {
    display: grid;
    gap: .45rem;
    min-height: 84px;
    padding: .85rem;
    border: 1px solid #d7e2ec;
    border-radius: 999px;
    background: #ffffff;
    color: #102033;
    text-align: center;
}

.mathfield-example-list button:hover {
    border-color: #8ebbb7;
    background: #f7fcfb;
}

.mathfield-example-math {
    overflow-x: auto;
}

@media (max-width: 980px) {
    .mathfield-lab-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .mathfield-board,
    .mathfield-preview-panel {
        padding: .75rem;
    }

    math-field.mathfield-lab-input {
        min-height: 92px;
        font-size: 1.35rem;
    }

    .mathfield-keypad {
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    }

    .mathfield-key {
        min-height: 46px;
        border-radius: 14px;
        font-size: 1rem;
    }

    .mathfield-example-list {
        grid-template-columns: 1fr;
    }

    .mathfield-example-list button {
        border-radius: 18px;
    }
}

.structured-response-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    min-height: 5.5rem;
    padding: 1rem;
    border: 1px dashed #abc3d3;
    border-radius: 8px;
    background: #fff;
}

.structured-response-fixed {
    color: var(--ink);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
}

.structured-response-slot {
    display: grid;
    gap: .2rem;
    min-width: 6.5rem;
    min-height: 4rem;
    border: 1px dashed #a9bfd0;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    padding: .55rem .7rem;
    text-align: center;
}

button.structured-response-slot {
    cursor: pointer;
}

.structured-response-slot.active {
    border-color: var(--brand);
    background: #effbf9;
    box-shadow: 0 0 0 3px rgba(23, 107, 103, .12);
}

.structured-response-slot span {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.structured-response-slot strong {
    min-height: 1.4rem;
    font-size: 1.1rem;
    font-weight: 950;
}

.structured-response-slot.empty strong {
    color: #94a3b8;
}

.structured-response-slot small {
    color: var(--danger);
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.structured-response-fraction {
    display: inline-grid;
    gap: .28rem;
    min-width: 7rem;
    align-items: center;
    justify-items: stretch;
}

.structured-response-fraction-bar {
    height: 2px;
    border-radius: 999px;
    background: var(--ink);
}

.structured-response-sqrt {
    display: inline-grid;
    grid-template-columns: auto minmax(6.5rem, 1fr);
    gap: .45rem;
    align-items: center;
    color: var(--ink);
    font-size: 2rem;
    font-weight: 950;
}

.structured-response-sqrt .structured-response-slot {
    border-top: 2px solid var(--ink);
}

.structured-response-operator {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.structured-response-operator-symbol {
    color: var(--brand-strong);
    font-size: 2rem;
    font-weight: 950;
}

.structured-response-operator-slots {
    display: grid;
    gap: .3rem;
}

.structured-response-matrix {
    display: grid;
    gap: .45rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--ink);
    border-right: 3px solid var(--ink);
    border-radius: 8px;
}

.structured-response-expected-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (max-width: 980px) {
    .structured-response-grid,
    .structured-response-expected-grid {
        grid-template-columns: 1fr;
    }
}

.constructed-answer-help-body {
    display: grid;
    gap: 1rem;
}

.constructed-answer-help-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.constructed-answer-help-grid code {
    white-space: normal;
}

@media (max-width: 900px) {
    .constructed-answer-editor-grid {
        grid-template-columns: 1fr;
    }

    .constructed-answer-head,
    .constructed-answer-section-title,
    .constructed-answer-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .constructed-answer-target {
        display: block;
    }

    .constructed-answer-zone {
        padding: .75rem;
    }

    .constructed-answer-keyboard {
        grid-template-columns: 1fr;
    }

    .constructed-answer-keyboard button {
        width: 100%;
    }

    .constructed-answer-token-line {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .constructed-answer-token {
        min-width: 4.5rem;
    }

    .constructed-answer-help-grid {
        grid-template-columns: 1fr;
    }
}

.image-library-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.image-upload-card,
.image-library-card {
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
}

.image-upload-card .sub-editor-panel-title,
.image-library-card .sub-editor-panel-title {
    margin-bottom: .25rem;
    padding-bottom: .45rem;
}

.image-upload-card .form-field {
    gap: .5rem;
    margin: 0;
}

.image-upload-card .field {
    margin-top: .05rem;
}

.image-upload-card .form-field small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.35;
}

.image-upload-drop {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: center;
    min-height: 6rem;
    padding: 1rem;
    border: 1px dashed #9fb8c9;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbfd 0%, #ffffff 100%);
    cursor: pointer;
}

.image-upload-drop:hover {
    border-color: rgba(15, 118, 110, .55);
    background: #f3fbfa;
}

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

.image-upload-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    color: #075e59;
    background: #e7f4f2;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.image-upload-drop strong {
    display: block;
    color: var(--ink);
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.image-upload-drop small {
    display: block;
    margin-top: .2rem;
    color: var(--muted);
    font-weight: 700;
}

.image-library-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) auto;
    gap: .75rem;
    align-items: end;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.image-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 16rem));
    gap: .85rem;
    align-items: start;
}

.image-library-item {
    display: grid;
    grid-template-rows: 10rem minmax(4.25rem, auto) auto;
    gap: .7rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
    min-width: 0;
    overflow: hidden;
}

.image-library-item:hover {
    border-color: rgba(15, 118, 110, .28);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.image-library-preview {
    display: grid;
    place-items: center;
    width: 100%;
    height: 10rem;
    min-height: 0;
    padding: .75rem;
    border: 1px solid #d8e3ec;
    border-radius: 8px;
    background:
        linear-gradient(45deg, #f5f8fb 25%, transparent 25%),
        linear-gradient(-45deg, #f5f8fb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f5f8fb 75%),
        linear-gradient(-45deg, transparent 75%, #f5f8fb 75%);
    background-color: #ffffff;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
    cursor: pointer;
    appearance: none;
    overflow: hidden;
    line-height: 1;
}

.image-library-preview img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, .08));
}

.image-library-copy {
    display: grid;
    gap: .25rem;
    min-width: 0;
}

.image-library-copy strong {
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.image-library-copy small,
.image-library-copy span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25;
}

.image-library-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-height: 4.25rem;
    overflow: hidden;
}

.compact-tag-cloud {
    margin-top: 0;
}

.image-library-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-self: end;
}

.image-library-actions .compact {
    min-height: 2rem;
    padding: .35rem .65rem;
    font-size: .78rem;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
}

.image-detail-modal {
    width: min(68rem, calc(100vw - 2rem));
}

.image-detail-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .75fr);
    gap: 1rem;
    align-items: start;
}

.image-detail-preview {
    display: grid;
    place-items: center;
    min-height: 24rem;
    max-height: 72vh;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    overflow: auto;
}

.image-detail-preview img {
    display: block;
    max-width: 100%;
    max-height: 68vh;
    object-fit: contain;
}

.image-shortcode-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fafc;
}

.image-shortcode-panel .full,
.image-detail-meta,
.image-detail-tags {
    grid-column: 1 / -1;
}

.image-detail-meta,
.image-detail-tags {
    display: grid;
    gap: .25rem;
    padding: .75rem;
    border: 1px solid #d8e3ec;
    border-radius: 8px;
    background: #ffffff;
}

.image-detail-meta span,
.image-detail-tags span {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.image-detail-meta strong,
.image-detail-tags p {
    margin: 0;
    color: var(--ink);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.image-detail-meta small {
    color: var(--muted);
    font-weight: 700;
}

.arelo-alert-success {
    border-color: #a7f3d0;
    color: #065f46;
    background: #ecfdf5;
}

.rs-image {
    max-width: 100%;
}

.rs-image img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.rs-image-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 .2rem;
}

.rs-image-block {
    display: flex;
    margin: .75rem 0;
}

.rs-image-center {
    display: flex;
    justify-content: center;
    margin: .75rem auto;
}

.rs-image-xs img {
    width: 2.75rem;
}

.rs-image-s img {
    width: 6rem;
}

.rs-image-md img {
    width: min(100%, 12rem);
}

.rs-image-l img {
    width: min(100%, 22rem);
}

.rs-image-xl img {
    width: min(100%, 44rem);
}

@media (max-width: 1000px) {
    .image-library-shell,
    .image-detail-body {
        grid-template-columns: 1fr;
    }

    .image-library-toolbar {
        grid-template-columns: 1fr;
    }
}
.exam-app-shell {
    min-height: 100vh;
    background: #eef3f7;
    color: #102033;
}

.exam-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.35rem;
    background: #ffffff;
    border-bottom: 1px solid #d7e2ec;
    box-shadow: 0 10px 24px rgba(16, 32, 51, 0.06);
}

.exam-topbar.sticky {
    position: sticky;
    top: 0;
    z-index: 20;
}

.exam-topbar h1 {
    margin: 0;
    font-size: 1.35rem;
}

.exam-folio {
    display: inline-flex;
    margin-top: .35rem;
    color: #64748b;
    font-weight: 800;
    letter-spacing: .02em;
}

.exam-topbar-meta,
.exam-progress-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.exam-topbar-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .35rem;
}

.exam-progress-meta strong {
    color: #006b63;
    font-size: 1.75rem;
}

.exam-module-home {
    width: min(1180px, calc(100% - 2rem));
    margin: 2rem auto;
}

.exam-module-intro {
    margin-bottom: 1rem;
}

.exam-module-intro h2 {
    margin: .15rem 0;
    font-size: 1.75rem;
}

.exam-module-intro p {
    margin: 0;
    color: #64748b;
}

.exam-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.exam-module-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    min-height: 150px;
    padding: 1rem;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    background: #ffffff;
    color: #102033;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(16, 32, 51, 0.06);
}

.exam-module-card span {
    color: #006b63;
    font-weight: 900;
    text-transform: uppercase;
}

.exam-module-card strong {
    font-size: 1.15rem;
}

.exam-module-card small {
    color: #64748b;
    font-weight: 800;
}

.exam-module-card.active {
    border-color: #006b63;
    background: #f1fbf8;
}

.exam-module-card.done,
.exam-module-card.locked {
    opacity: .58;
    cursor: not-allowed;
}

.exam-question-shell {
    position: relative;
    width: min(1220px, calc(100% - 2rem));
    margin: 1.25rem auto 2rem;
}

.exam-watermark {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 0;
    color: rgba(15, 23, 42, .08);
    font-size: clamp(1.6rem, 4vw, 4rem);
    font-weight: 900;
    pointer-events: none;
}

.exam-saving-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(2px);
}

.exam-saving-card {
    display: grid;
    justify-items: center;
    gap: .65rem;
    width: min(22rem, 100%);
    padding: 1.4rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    color: #fff;
    background: rgba(16, 32, 51, .92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    text-align: center;
}

.exam-saving-card strong {
    font-size: 1.1rem;
}

.exam-saving-card small {
    color: rgba(255, 255, 255, .78);
    line-height: 1.35;
}

.exam-saving-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(255, 255, 255, .32);
    border-top-color: #8ee7dc;
    border-radius: 999px;
    animation: exam-saving-spin .8s linear infinite;
}

@keyframes exam-saving-spin {
    to {
        transform: rotate(360deg);
    }
}

.feedback-shell {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.feedback-summary-card,
.feedback-panel {
    background: #fff;
    border: 1px solid #d7e1ea;
    border-radius: 8px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
    padding: 1rem;
}

.feedback-score {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin: .25rem 0 1rem;
}

.feedback-score strong {
    color: #006c67;
    font-size: 2.4rem;
    line-height: 1;
}

.feedback-score span {
    color: #617286;
    font-weight: 700;
}

.feedback-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.feedback-kpis div,
.feedback-area-card {
    border: 1px solid #d7e1ea;
    border-radius: 8px;
    background: #f8fafc;
    padding: .85rem;
}

.feedback-kpis span,
.feedback-area-card span,
.feedback-reactive-row small {
    color: #64748b;
    display: block;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.feedback-kpis strong,
.feedback-area-card strong {
    color: #0f172a;
    display: block;
    margin-top: .25rem;
}

.feedback-panel-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.feedback-panel-head h2 {
    font-size: 1.2rem;
    margin: 0;
}

.feedback-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}

.feedback-area-card.low {
    border-left: 4px solid #dc2626;
}

.feedback-area-card.mid {
    border-left: 4px solid #d97706;
}

.feedback-area-card.high {
    border-left: 4px solid #0f766e;
}

.feedback-area-score {
    color: #006c67;
    font-size: 1.5rem;
    font-weight: 900;
    margin: .35rem 0;
}

.feedback-reactive-list {
    display: grid;
    gap: .65rem;
}

.feedback-reactive-row {
    align-items: center;
    border: 1px solid #d7e1ea;
    border-radius: 8px;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr minmax(240px, .4fr) auto;
    padding: .85rem;
}

.feedback-reactive-row > div {
    display: grid;
    gap: .2rem;
}

.feedback-review-modal {
    max-width: min(1480px, calc(100vw - 48px));
}

.simulator-audit-modal {
    max-width: min(1180px, calc(100vw - 48px));
}

.simulator-audit-trigger {
    white-space: nowrap;
}

.feedback-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.feedback-review-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}

.feedback-review-player {
    pointer-events: none;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    background: #edf2f7;
    color: #405267;
    font-size: .78rem;
    font-weight: 900;
}

.status-pill.success {
    background: #e7f7f1;
    color: #0f766e;
}

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

@media (max-width: 760px) {
    .feedback-kpis,
    .feedback-reactive-row {
        grid-template-columns: 1fr;
    }

    .feedback-panel-head,
    .feedback-score {
        align-items: flex-start;
        flex-direction: column;
    }
}

.exam-question-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1rem;
}

.exam-question-dot {
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    background: #ffffff;
    color: #102033;
    font-weight: 900;
}

.exam-question-dot.active {
    border-color: #006b63;
    background: #006b63;
    color: #ffffff;
}

.exam-question-dot.done:not(.active) {
    border-color: #60a5fa;
    background: #eff6ff;
    color: #1d4ed8;
}

.exam-question-card {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(16, 32, 51, .06);
}

.exam-question-card.answered {
    border-color: #6ee7b7;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .12), 0 14px 30px rgba(16, 32, 51, .06);
}

.exam-question-card.answered-persisted {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12), 0 14px 30px rgba(16, 32, 51, .06);
}

.exam-question-card > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.exam-question-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    color: #64748b;
    font-weight: 800;
}

.exam-answer-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.6rem;
    padding: .2rem .55rem;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    color: #047857;
    background: #ecfdf5;
    font-size: .78rem;
    font-weight: 900;
}

.exam-question-card.answered-persisted .exam-answer-status {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.exam-question-html {
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    line-height: 1.65;
}

.exam-options {
    display: grid;
    gap: .75rem;
}

.exam-option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    background: #ffffff;
    color: #102033;
    text-align: left;
}

.exam-option.selected {
    border-color: #006b63;
    background: #f1fbf8;
}

.exam-option-check {
    width: 1rem;
    height: 1rem;
    border: 2px solid #9db1c3;
    border-radius: 999px;
}

.exam-option.selected .exam-option-check {
    border-color: #006b63;
    background: radial-gradient(circle, #006b63 42%, transparent 45%);
}

.exam-option-html {
    min-width: 0;
}

.exam-ordering {
    display: grid;
    gap: .75rem;
}

.exam-ordering-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .85rem 1rem;
    border: 1px solid #d7e2ec;
    border-radius: 8px;
    background: #ffffff;
}

.exam-ordering-position {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #edf8f5;
    color: #006b63;
    font-weight: 900;
}

.exam-ordering-actions {
    display: flex;
    gap: .35rem;
}

.exam-save-status {
    margin-top: 1rem;
    color: #006b63;
    font-weight: 900;
}

.exam-drag {
    display: grid;
    gap: 1rem;
}

.exam-drag-zones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .85rem;
}

.exam-drag-zone,
.exam-drag-bank {
    min-height: 140px;
    padding: .9rem;
    border: 1px dashed #94b8d6;
    border-radius: 8px;
    background: #f8fbfd;
}

.exam-drag-zone header {
    margin-bottom: .75rem;
    color: #006b63;
    font-weight: 900;
}

.exam-drag-bank {
    background: #ffffff;
}

.exam-drag-bank h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
}

.exam-drag-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    align-items: stretch;
    margin-bottom: .55rem;
    padding: .75rem;
    border: 0;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(180, 198, 213, .45);
    cursor: grab;
}

.exam-drag-item select {
    width: 100%;
    border-color: #d8e4ec;
    background-color: #f8fbfc;
}

.compact-field {
    min-height: 2.2rem;
    padding: .35rem .55rem;
}

.exam-bottom-nav {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: .85rem;
    border: 1px solid #d7e2ec;
    border-radius: 8px 8px 0 0;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
    .exam-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .exam-topbar-meta,
    .exam-progress-meta {
        align-items: flex-start;
    }

    .exam-topbar-actions {
        justify-content: flex-start;
    }

    .exam-progress-meta strong {
        font-size: 1.35rem;
    }

    .exam-question-shell,
    .exam-module-home {
        width: calc(100% - 1rem);
        margin-inline: .5rem;
    }

    .exam-question-card {
        padding: .9rem;
    }

    .exam-drag-item {
        grid-template-columns: 1fr;
    }

    .exam-ordering-item {
        grid-template-columns: auto 1fr;
    }

    .exam-ordering-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}