.j223-lab {
    --j223-accent: var(--cq-cyan, #4bd4e5);
    display: grid;
    gap: 1rem;
    color: var(--cq-text, #edf5f5);
}
.j223-lab *, .j223-lab *::before, .j223-lab *::after { box-sizing: border-box; }
.j223-lab > * { min-width: 0; max-width: 100%; }

.j223-lab--file_control { --j223-accent: #65e2ae; }
.j223-lab--record_bay { --j223-accent: #d2a9ff; }
.j223-lab--query_vault { --j223-accent: #65cfff; }
.j223-lab--simulation_core { --j223-accent: #ffca68; }

.j223-header,
.j223-workspace,
.j223-mastery,
.j223-support,
.j223-exam,
.j223-instructions,
.j223-target,
.j223-why,
.j223-controls-guide,
.j223-current-state,
.j223-diagnose,
.j223-apply-complete,
.j223-mission-brief,
.j223-success-criteria,
.j223-mission-complete {
    border: 1px solid var(--cq-border, #29444b);
    background: #07161b;
}

.j223-apply-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
    gap: 1rem;
}

.j223-instructions,
.j223-target,
.j223-why,
.j223-current-state,
.j223-diagnose,
.j223-apply-complete,
.j223-mission-brief,
.j223-success-criteria,
.j223-mission-complete { padding: 1rem; }
.j223-instructions h4,
.j223-target h4,
.j223-current-state h4,
.j223-mission-brief h4,
.j223-mission-complete h4 { margin: .25rem 0 .65rem; }
.j223-instructions ol { margin: .65rem 0 0; padding-left: 1.35rem; }
.j223-instructions li + li { margin-top: .35rem; }
.j223-target strong { display: block; margin-top: .75rem; color: var(--j223-accent); }
.j223-why p:last-child { max-width: 70rem; margin-bottom: 0; }

.j223-controls-guide { padding: 0; }
.j223-controls-guide summary { min-height: 48px; padding: .85rem 1rem; cursor: pointer; font-weight: 900; }
.j223-controls-guide dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .65rem; margin: 0; padding: 0 1rem 1rem; }
.j223-controls-guide dl div { padding: .75rem; background: rgba(255,255,255,.035); border: 1px solid var(--cq-border, #29444b); }
.j223-controls-guide dt { color: var(--j223-accent); font-weight: 900; }
.j223-controls-guide dd { margin: .25rem 0 0; color: var(--cq-text-muted, #9cb1b6); }

.j223-round-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.j223-round-strip button { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; min-height: 64px; padding: .7rem; text-align: left; color: var(--cq-text, #edf5f5); background: #07161b; border: 1px solid var(--cq-border, #29444b); }
.j223-round-strip button span { grid-row: 1 / 3; align-self: center; color: var(--j223-accent); font-weight: 900; }
.j223-round-strip button small { color: var(--cq-text-muted, #9cb1b6); }
.j223-round-strip button.is-active { border-color: var(--j223-accent); box-shadow: inset 3px 0 var(--j223-accent); }
.j223-round-strip button.is-active[data-round-tab="diagnose"] { background: color-mix(in srgb, var(--j223-accent) 10%, #07161b); animation: j223-diagnose-tab 1.2s ease-in-out 2; }
.j223-round-strip button.is-active[data-round-tab="diagnose"] small::after { content: '  \00b7  repair zone active'; color: var(--j223-accent); font-weight: 900; }
.j223-round-strip button.is-complete::after { content: 'Complete'; grid-column: 2; color: #8eebba; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.j223-round-strip button:disabled { cursor: not-allowed; opacity: .48; }

.j223-current-state { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: 1rem; align-items: center; border-left: 4px solid var(--j223-accent); }
.j223-current-state dl { display: grid; grid-template-columns: .55fr 1.45fr; gap: .55rem; margin: 0; }
.j223-current-state dl div { padding: .6rem; background: rgba(255,255,255,.035); }
.j223-current-state dt { color: var(--cq-text-muted, #9cb1b6); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.j223-current-state dd { margin: .2rem 0 0; }
.j223-diagnose select,
.j223-brief input { width: 100%; min-height: 44px; margin-top: .5rem; padding: .55rem; color: var(--cq-text, #edf5f5); background: #050f13; border: 1px solid var(--cq-border, #29444b); }
.j223-diagnose { position: relative; overflow: hidden; padding: 0; border-color: color-mix(in srgb, var(--j223-accent) 70%, #29444b); background: linear-gradient(135deg, color-mix(in srgb, var(--j223-accent) 9%, #07161b), #07161b 58%); }
.j223-diagnose::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--j223-accent) 10%, transparent), transparent); transform: translateX(-110%); }
.j223-diagnose.is-alerting::before { animation: j223-diagnostic-scan 1.15s ease-out 2; }
.j223-diagnose__header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--cq-border, #29444b); }
.j223-diagnose__header h4 { margin: .2rem 0 .25rem; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.j223-diagnose__header p { margin: .15rem 0; }
.j223-fault-beacon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; }
.j223-fault-beacon i, .j223-fault-beacon::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--j223-accent); border-radius: 50%; }
.j223-diagnose.is-alerting .j223-fault-beacon::before { animation: j223-fault-ping 1.4s ease-out infinite; }
.j223-fault-beacon span { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #041014; background: var(--j223-accent); font-size: 1.25rem; font-weight: 1000; }
.j223-alert-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border: 1px solid color-mix(in srgb, var(--j223-accent) 60%, #29444b); color: var(--j223-accent); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
.j223-alert-chip span { width: 8px; height: 8px; border-radius: 50%; background: var(--j223-accent); box-shadow: 0 0 12px var(--j223-accent); }
.j223-repair-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--cq-border, #29444b); }
.j223-repair-route li { display: grid; grid-template-columns: auto 1fr; gap: .05rem .55rem; padding: .75rem; background: #07161b; }
.j223-repair-route li span { grid-row: 1 / 3; align-self: center; color: var(--j223-accent); font-weight: 900; }
.j223-repair-route li small { color: var(--cq-text-muted, #9cb1b6); }
.j223-repair-route li.is-active { background: color-mix(in srgb, var(--j223-accent) 9%, #07161b); box-shadow: inset 0 -3px var(--j223-accent); }
.j223-fault-card { margin: 1rem; padding: 1rem; border: 1px dashed color-mix(in srgb, var(--j223-accent) 60%, #29444b); background: rgba(0, 0, 0, .16); }
.j223-fault-card > p:not(.eyebrow) { max-width: 65rem; font-size: 1.03rem; }
.j223-repair-control { display: block; max-width: 46rem; color: var(--j223-accent); font-weight: 900; }
.j223-repair-target { position: relative; z-index: 2; outline: 3px solid var(--j223-accent) !important; outline-offset: 5px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--j223-accent) 15%, transparent), 0 0 28px color-mix(in srgb, var(--j223-accent) 35%, transparent); animation: j223-repair-target 1s ease-in-out 3; }
@keyframes j223-diagnostic-scan { to { transform: translateX(110%); } }
@keyframes j223-fault-ping { 0% { opacity: .9; transform: scale(.75); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes j223-repair-target { 50% { transform: translateY(-2px); } }
@keyframes j223-diagnose-tab { 50% { box-shadow: inset 4px 0 var(--j223-accent), 0 0 18px color-mix(in srgb, var(--j223-accent) 28%, transparent); } }
.j223-apply-complete,
.j223-mission-complete { border-color: #65e2ae; background: rgba(42, 158, 103, .08); }

.j223-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    border-top: 4px solid var(--j223-accent);
    padding: 1rem;
}

.j223-header h3,
.j223-header p { margin: .2rem 0; }
.j223-header output { color: var(--j223-accent); font-weight: 900; }

.j223-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(230px, .65fr);
    min-width: 0;
}

.j223-model { min-width: 0; padding: 1rem; }
.j223-brief { border-left: 1px solid var(--cq-border, #29444b); padding: 1rem; }
.j223-brief span,
.j223-model__heading span,
.j223-round-heading span {
    display: block;
    color: var(--cq-text-muted, #9cb1b6);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.j223-brief strong { display: block; margin-top: .3rem; color: var(--j223-accent); }
.j223-model__heading { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }

.j223-control-grid,
.j223-range-controls,
.j223-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.j223-control-grid button,
.j223-field-slots button,
.j223-model > button,
.j223-range-controls button {
    min-height: 44px;
    border: 1px solid var(--j223-accent);
    background: #0a2026;
    color: var(--cq-text, #edf5f5);
    padding: .55rem .75rem;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.j223-file-door {
    min-height: 128px;
    border: 2px solid var(--j223-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--j223-accent) 12%, #07161b), #07161b);
    padding: 1rem;
    margin-bottom: .8rem;
    transition: transform 180ms ease, background 180ms ease;
}
.j223-file-door.is-open { transform: translateX(6px); }
.j223-file-door strong { display: block; margin: .35rem 0; color: var(--j223-accent); }

.j223-event-log,
.j223-history { margin: .75rem 0 0; padding-left: 1.25rem; color: var(--cq-text-muted, #9cb1b6); }

.j223-field-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: .55rem;
    align-items: end;
}
.j223-field-slots label,
.j223-range-controls label { display: grid; gap: .3rem; color: var(--cq-text-muted, #9cb1b6); font-weight: 800; }
.j223-field-slots input,
.j223-range-controls input {
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--cq-border, #29444b);
    background: #050f13;
    color: var(--cq-text, #edf5f5);
    padding: .55rem;
}

.j223-table-wrap { max-width: 100%; overflow-x: auto; margin-top: .85rem; }
.j223-table-wrap:focus { outline: 2px solid var(--j223-accent); outline-offset: 2px; }
.j223-table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; }
.j223-table-wrap caption { text-align: left; color: var(--cq-text-muted, #9cb1b6); padding: 0 0 .5rem; }
.j223-table-wrap th,
.j223-table-wrap td { border: 1px solid var(--cq-border, #29444b); padding: .55rem; text-align: left; }
.j223-table-wrap thead { background: color-mix(in srgb, var(--j223-accent) 12%, #07161b); }
.j223-table-wrap tr.is-malformed { color: #ffc078; }
.j223-operation-reference {
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid var(--cq-border, #29444b);
    background: rgba(255,255,255,.025);
}
.j223-operation-reference > p { margin: 0; }
.j223-operation-reference code,
.j223-record-code code,
.j223-record-answer code { color: #d7f7e5; overflow-wrap: anywhere; }
.j223-record-code {
    margin: .7rem 0;
    padding: .75rem;
    overflow-x: auto;
    border-left: 3px solid var(--j223-accent);
    background: #040d11;
}
.j223-record-answer {
    display: grid;
    gap: .4rem;
    max-width: 38rem;
    margin-top: .8rem;
    color: var(--cq-text-muted, #9cb1b6);
    font-weight: 800;
}
.j223-record-answer input {
    min-width: 0;
    min-height: 44px;
    padding: .55rem;
    color: var(--cq-text, #edf5f5);
    background: #050f13;
    border: 1px solid var(--cq-border, #29444b);
}
.j223-record-answer input:focus-visible {
    outline: 3px solid var(--j223-accent);
    outline-offset: 2px;
}

.j223-clause-scanner { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.j223-clause-scanner span { border: 1px solid var(--cq-border, #29444b); padding: .65rem; text-align: center; font-weight: 900; }
.j223-clause-scanner span.is-active { border-color: var(--j223-accent); color: var(--j223-accent); }
.j223-sql-builder { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr) auto; gap: .65rem; align-items: end; margin: .85rem 0; padding: .8rem; border: 1px solid var(--j223-accent); background: color-mix(in srgb, var(--j223-accent) 7%, #07161b); }
.j223-sql-builder .eyebrow { grid-column: 1 / -1; margin: 0; }
.j223-sql-builder label { display: grid; gap: .3rem; color: var(--cq-text-muted, #9cb1b6); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.j223-sql-builder select { min-height: 42px; padding: .45rem; color: var(--cq-text, #edf5f5); background: #050f13; border: 1px solid var(--cq-border, #29444b); }
.j223-sql-builder > strong { align-self: center; color: var(--j223-accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.j223-query-help { margin: .45rem 0 .8rem; color: var(--cq-text-muted, #9cb1b6); font-size: .85rem; }

.j223-generated-value {
    display: grid;
    place-items: center;
    width: min(180px, 100%);
    min-height: 100px;
    margin: 1rem auto;
    border: 2px solid var(--j223-accent);
    color: var(--j223-accent);
    font: 900 2.4rem ui-monospace, monospace;
}
.j223-range-track { display: flex; justify-content: space-between; position: relative; border-top: 4px solid #29444b; padding-top: .4rem; }
.j223-range-track i { position: absolute; top: -8px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--j223-accent); transition: left 180ms ease; }

.j223-mastery,
.j223-support,
.j223-exam { padding: 1rem; }
.j223-mission-brief,
.j223-success-criteria { border-left: 4px solid var(--j223-accent); }
.j223-fixed-data { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.j223-fixed-data strong { flex-basis: 100%; }
.j223-fixed-data code { padding: .4rem .55rem; color: var(--j223-accent); background: #040d11; border: 1px solid var(--cq-border, #29444b); }
.j223-success-criteria p { margin: .35rem 0; }
.j223-round-heading h4 { margin: .25rem 0 .8rem; }
.j223-editor-label { display: block; margin-bottom: .35rem; font-weight: 900; }
.j223-mastery textarea {
    width: 100%;
    min-height: 190px;
    resize: vertical;
    border: 1px solid var(--cq-border, #29444b);
    background: #040d11;
    color: #d7f7e5;
    padding: .8rem;
    font: .9rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.j223-mastery textarea:focus { outline: 2px solid var(--j223-accent); outline-offset: 2px; }
.j223-actions { margin-top: .75rem; }
.j223-feedback { min-height: 1.5rem; color: var(--cq-text-muted, #9cb1b6); }
.j223-feedback.is-error { color: #ffaaa4; }
.j223-feedback.is-success { color: #8eebba; }
.j223-result:not([hidden]) { border-left: 3px solid var(--j223-accent); padding: .7rem .8rem; background: color-mix(in srgb, var(--j223-accent) 8%, #07161b); }
.j223-result h5 { margin: 0 0 .45rem; font-size: 1.05rem; }
.j223-result-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--cq-border, #29444b); }
.j223-result-table-wrap:focus { outline: 2px solid var(--j223-accent); outline-offset: 2px; }
.j223-result-table-wrap table { width: 100%; min-width: 360px; border-collapse: collapse; }
.j223-result-table-wrap caption { padding: .55rem; text-align: left; color: var(--cq-text-muted, #9cb1b6); }
.j223-result-table-wrap th,
.j223-result-table-wrap td { padding: .55rem; border: 1px solid var(--cq-border, #29444b); text-align: left; }

.j223-dataset-reference { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: 0 0 1rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--j223-accent) 65%, #29444b); background: color-mix(in srgb, var(--j223-accent) 7%, #07161b); }
.j223-dataset-reference h5,
.j223-dataset-reference p { margin: .15rem 0; }
.j223-dataset-reference .card-action { flex: 0 0 auto; min-height: 44px; }
.j223-dataset-fallback { margin: 1rem 0; border: 1px solid var(--cq-border, #29444b); background: #07161b; }
.j223-dataset-fallback summary { min-height: 44px; padding: .75rem; cursor: pointer; font-weight: 900; }
.j223-dataset-fallback > div { padding: 0 .75rem .75rem; }
.has-dataset-dialog .j223-dataset-fallback { display: none; }
.j223-dialog-open { overflow: hidden; }

.j223-dataset-dialog { width: min(980px, calc(100vw - 2rem)); max-width: none; max-height: min(88vh, 760px); margin: auto; padding: 0; overflow: hidden; color: var(--cq-text, #edf5f5); background: #07161b; border: 1px solid var(--j223-accent); box-shadow: 0 24px 80px rgba(0, 0, 0, .58); }
.j223-dataset-dialog::backdrop { background: rgba(1, 8, 11, .82); backdrop-filter: blur(3px); }
.j223-dataset-dialog__surface { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(88vh, 760px); }
.j223-dataset-dialog__header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding: 1rem; border-bottom: 1px solid var(--cq-border, #29444b); background: #0a2026; }
.j223-dataset-dialog__header h2,
.j223-dataset-dialog__header p { margin: .15rem 0; }
.j223-dialog-close { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; color: var(--cq-text, #edf5f5); background: #07161b; border: 1px solid var(--cq-border, #29444b); font-size: 1.75rem; line-height: 1; cursor: pointer; }
.j223-dialog-close:hover { color: #041014; background: var(--j223-accent); }
.j223-dialog-close:focus-visible,
.j223-dataset-dialog .card-action:focus-visible { outline: 3px solid var(--j223-accent); outline-offset: 3px; }
.j223-dataset-dialog__body { min-height: 0; padding: 1rem; overflow: auto; }
.j223-dataset-dialog__body > p:first-child { max-width: 70ch; }
.j223-dataset-meta { display: grid; grid-template-columns: .65fr 1.6fr .5fr; gap: .65rem; margin: 1rem 0; }
.j223-dataset-meta div { padding: .7rem; border: 1px solid var(--cq-border, #29444b); background: rgba(255, 255, 255, .025); }
.j223-dataset-meta dt { color: var(--cq-text-muted, #9cb1b6); font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.j223-dataset-meta dd { margin: .3rem 0 0; overflow-wrap: anywhere; }
.j223-dataset-table-wrap { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--cq-border, #29444b); scrollbar-color: var(--j223-accent) #07161b; }
.j223-dataset-table-wrap:focus { outline: 3px solid var(--j223-accent); outline-offset: 2px; }
.j223-dataset-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.j223-dataset-table caption { padding: .65rem; text-align: left; color: var(--cq-text-muted, #9cb1b6); }
.j223-dataset-table th,
.j223-dataset-table td { padding: .7rem; border: 1px solid var(--cq-border, #29444b); text-align: left; white-space: nowrap; }
.j223-dataset-table thead { background: color-mix(in srgb, var(--j223-accent) 12%, #07161b); }
.j223-dataset-table thead th code { display: block; color: var(--j223-accent); }
.j223-dataset-table thead th small { display: block; margin-top: .2rem; color: var(--cq-text-muted, #9cb1b6); font-weight: 400; }
.j223-scroll-hint { margin: .45rem 0 0; color: var(--cq-text-muted, #9cb1b6); font-size: .8rem; }
.j223-dataset-dialog__footer { display: flex; justify-content: flex-end; padding: .8rem 1rem; border-top: 1px solid var(--cq-border, #29444b); background: #0a2026; }

.j223-support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 390px); gap: 1rem 1.5rem; align-items: center; }
.j223-support__intro { min-width: 0; }
.j223-support h4 { margin: .2rem 0; }
.j223-support__intro > :last-child { margin-bottom: 0; }
.j223-hint-control { display: grid; gap: .55rem; }
.j223-hint-unlock {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    width: 100%;
    min-height: 68px;
    overflow: hidden;
    padding: .65rem .8rem;
    color: #031418;
    background: linear-gradient(120deg, var(--j223-accent), color-mix(in srgb, var(--j223-accent) 72%, white));
    border: 1px solid color-mix(in srgb, var(--j223-accent) 75%, white);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--j223-accent) 16%, transparent);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.j223-hint-unlock::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.36) 48%, transparent 68%);
    transform: translateX(-120%);
    transition: transform 420ms ease;
}
.j223-hint-unlock:hover { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--j223-accent) 24%, transparent); }
.j223-hint-unlock:hover::after { transform: translateX(120%); }
.j223-hint-unlock:focus-visible { outline: 3px solid var(--cq-text, #edf5f5); outline-offset: 3px; }
.j223-hint-unlock__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(3,20,24,.4);
    background: rgba(3,20,24,.12);
    font-size: 1.2rem;
    font-weight: 950;
}
.j223-hint-unlock__copy { display: grid; gap: .12rem; min-width: 0; }
.j223-hint-unlock__copy strong { font-size: 1rem; line-height: 1.15; }
.j223-hint-unlock__copy small { font-size: .76rem; font-weight: 700; opacity: .75; }
.j223-hint-unlock__arrow { font-size: 1.35rem; font-weight: 900; transition: transform 160ms ease; }
.j223-hint-unlock:hover .j223-hint-unlock__arrow { transform: translateX(3px); }
.j223-hint-unlock.is-loading .j223-hint-unlock__icon { animation: j223-hint-pulse 700ms ease-in-out infinite alternate; }
.j223-hint-unlock.is-complete,
.j223-hint-unlock:disabled {
    cursor: default;
    transform: none;
    color: var(--cq-text-muted, #9cb1b6);
    background: #0a2026;
    border-color: var(--cq-border, #29444b);
    box-shadow: none;
}
.j223-hint-unlock.is-loading:disabled {
    cursor: progress;
    color: #031418;
    background: linear-gradient(120deg, var(--j223-accent), color-mix(in srgb, var(--j223-accent) 72%, white));
    border-color: var(--j223-accent);
    opacity: .82;
}
.j223-hint-unlock.is-complete .j223-hint-unlock__icon { color: #031418; background: var(--j223-accent); border-color: var(--j223-accent); }
.j223-hint-unlock.is-complete .j223-hint-unlock__arrow { display: none; }
.j223-hint-progress { display: flex; gap: .4rem; }
.j223-hint-progress span { flex: 1 1 0; height: 4px; overflow: hidden; background: var(--cq-border, #29444b); }
.j223-hint-progress span::after { content: ""; display: block; width: 100%; height: 100%; background: var(--j223-accent); transform: scaleX(0); transform-origin: left; transition: transform 260ms ease; }
.j223-hint-progress span.is-unlocked::after { transform: scaleX(1); }
.j223-hint-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.j223-support li { display: grid; gap: .2rem; margin: 0; padding: .75rem; background: rgba(255,255,255,.035); border-left: 3px solid var(--j223-accent); animation: j223-hint-reveal 260ms ease both; }
.j223-support li span { color: var(--cq-text-muted, #9cb1b6); }

@keyframes j223-hint-pulse { to { transform: scale(.88); opacity: .62; } }
@keyframes j223-hint-reveal { from { opacity: 0; transform: translateY(-6px); } }

.j223-exam { margin: 0; }
.j223-exam legend { padding: 0 .35rem; font-size: 1.05rem; font-weight: 900; }
.j223-exam > div { display: grid; gap: .45rem; margin: .75rem 0; }
.j223-exam label { border: 1px solid var(--cq-border, #29444b); padding: .7rem; cursor: pointer; }
.j223-exam label:has(input:checked) { border-color: var(--j223-accent); background: color-mix(in srgb, var(--j223-accent) 8%, #07161b); }
.j223-exam label:focus-within { outline: 2px solid var(--j223-accent); outline-offset: 2px; }
.j223-exam input { width: 1.15rem; height: 1.15rem; margin-right: .45rem; }

@media (max-width: 800px) {
    .j223-apply-overview,
    .j223-current-state { grid-template-columns: 1fr; }
    .j223-round-strip { grid-template-columns: 1fr; }
    .j223-workspace { grid-template-columns: 1fr; }
    .j223-brief { border-left: 0; border-top: 1px solid var(--cq-border, #29444b); }
    .j223-field-slots { grid-template-columns: 1fr; }
    .j223-support { grid-template-columns: 1fr; }
    .j223-hint-list { grid-template-columns: 1fr; }
    .j223-sql-builder { grid-template-columns: 1fr; align-items: stretch; }
    .j223-diagnose__header { grid-template-columns: auto minmax(0, 1fr); }
    .j223-alert-chip { grid-column: 1 / -1; justify-self: start; }
    .j223-dataset-meta { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .j223-header { flex-direction: column; }
    .j223-model,
    .j223-brief,
    .j223-mastery,
    .j223-support,
    .j223-exam { padding: .8rem; }
    .j223-control-grid button,
    .j223-actions .card-action { width: 100%; }
    .j223-clause-scanner { grid-template-columns: 1fr; }
    .j223-repair-route { grid-template-columns: 1fr; }
    .j223-hint-unlock { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .j223-hint-unlock__icon { width: 38px; height: 38px; }
    .j223-dataset-reference { align-items: stretch; flex-direction: column; }
    .j223-dataset-reference .card-action { width: 100%; text-align: center; }
    .j223-dataset-dialog { width: 100vw; height: 100dvh; max-height: none; border: 0; }
    .j223-dataset-dialog__surface { height: 100dvh; max-height: none; }
    .j223-dataset-dialog__header,
    .j223-dataset-dialog__body { padding: .8rem; }
    .j223-dataset-dialog__footer { padding: .65rem .8rem max(.65rem, env(safe-area-inset-bottom)); }
    .j223-dataset-dialog__footer .card-action { width: 100%; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .j223-file-door,
    .j223-range-track i { transition: none; }
    .j223-diagnose.is-alerting::before,
    .j223-diagnose.is-alerting .j223-fault-beacon::before,
    .j223-repair-target,
    .j223-round-strip button.is-active[data-round-tab="diagnose"] { animation: none; }
    .j223-dataset-dialog::backdrop { backdrop-filter: none; }
    .j223-hint-unlock,
    .j223-hint-unlock::after,
    .j223-hint-unlock__arrow,
    .j223-hint-progress span::after,
    .j223-support li { animation: none; transition: none; }
}