@import url("/static/colors_and_type.css");

:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #eef4f2;
    --ink: #16211f;
    --ink-soft: #31423d;
    --muted: #63736d;
    --muted-light: #87958f;
    --line: rgba(210, 220, 216, 0.88);
    --line-strong: #b9c7c1;
    --border: rgba(210, 220, 216, 0.88);
    --text-muted: #63736d;
    --primary: #0f766e;
    --primary-strong: #0b5f59;
    --primary-soft: #e6f4f1;
    --primary-border: #98d5cc;
    --secondary: #315f88;
    --secondary-soft: #eaf2fa;
    --accent: #a95224;
    --accent-soft: #fff2e8;
    --amber: #9a5b08;
    --amber-soft: #fff7df;
    --green: #087f5b;
    --green-soft: #e9f8f1;
    --red: #bd3d2f;
    --red-soft: #fff1f0;
    --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.05);
    --shadow-md: 0 1px 2px rgba(22, 33, 31, 0.06), 0 10px 28px rgba(22, 33, 31, 0.07);
    --shadow-lg: 0 1px 2px rgba(22, 33, 31, 0.08), 0 18px 42px rgba(22, 33, 31, 0.1);
    --radius-lg: 8px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.planning-summary.empty-state {
    color: var(--muted);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--bg);
    text-rendering: optimizeLegibility;
}

::selection {
    color: var(--ink);
    background: rgba(20, 117, 108, 0.18);
}

/* Ensure the HTML `hidden` attribute always wins over CSS display rules */
[hidden] { display: none !important; }

html, body {
    height: 100dvh;
    overflow: hidden;
}

body {
    margin: 0;
    height: 100dvh;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 248, 251, 0) 320px),
        var(--bg);
    font-size: 16px;
    line-height: 1.5;
}

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

button {
    color: inherit;
    touch-action: manipulation;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(20, 117, 108, 0.22);
    outline-offset: 2px;
}

.app-shell {
    height: 100dvh;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
}

.side-nav {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
}

.brand-row {
    height: 76px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.72);
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(135deg, #0f766e 0%, #0b5f59 55%, #315f88 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 18px -6px rgba(15, 118, 110, 0.45);
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.02em;
}

.brand-row strong,
.teacher-card strong {
    display: block;
    letter-spacing: 0;
}

.brand-row span:last-child,
.teacher-card small {
    display: block;
    margin-top: 2px;
    color: var(--muted-light);
    font-size: 0.78rem;
}

.nav-main,
.nav-bottom {
    display: grid;
    gap: 7px;
}

.nav-main {
    flex: 1;
    align-content: start;
    padding: 24px 12px;
}

.nav-main::before {
    content: "功能";
    padding: 0 18px 14px;
    color: var(--muted-light);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
}

.nav-bottom {
    padding: 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.72);
    background: rgba(248, 250, 252, 0.5);
}

.workspace-tab {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 0 16px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    text-align: left;
    font-size: 0.98rem;
    font-weight: 650;
    transition: background 0.18s var(--ease), color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}

.workspace-tab:hover {
    color: var(--ink);
    background: #f2f6f1;
    transform: translateX(1px);
}

.workspace-tab.is-active {
    color: var(--primary-strong);
    border-color: rgba(20, 117, 108, 0.16);
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
}

.nav-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--muted-light);
    background: transparent;
    flex: 0 0 auto;
}

.nav-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.workspace-tab.is-active .nav-icon {
    color: var(--primary);
}

.teacher-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.teacher-card > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--primary-strong);
    background: var(--primary-soft);
    font-weight: 900;
}

.main-shell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow-y: auto;
}

.eyebrow,
.panel-kicker {
    margin: 0 0 5px;
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.workspace-hero h2,
.panel h2,
.panel h3,
.section-preview h3 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.25;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.workspace {
    display: none;
    flex: 1;
    padding: 24px;
}

.workspace.is-active {
    display: block;
    animation: pageIn 0.32s ease both;
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.workspace-hero {
    position: relative;
    overflow: hidden;
    min-height: 142px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 24px 26px 24px 30px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--hero-accent, var(--primary));
    border-radius: var(--radius-lg);
    color: var(--ink);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 246, 0.92));
    box-shadow: var(--shadow-md);
}

.workspace-hero::before,
.workspace-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.workspace-hero::before {
    inset: auto 24px 18px 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--hero-accent, var(--primary)), transparent);
    opacity: 0.28;
}

.workspace-hero::after {
    inset: 0 0 0 auto;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(20, 117, 108, 0.04));
}

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

.workspace-hero .eyebrow {
    color: var(--hero-accent, var(--primary));
}

.workspace-hero h2 {
    max-width: 760px;
    margin-bottom: 10px;
    font-size: clamp(1.55rem, 2.4vw, 2.25rem);
    font-weight: 850;
}

.workspace-hero p:not(.eyebrow) {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.agent-hero {
    --hero-accent: #356b9a;
}

.agent-hero h2 {
    max-width: none !important;
}

.diagnosis-hero {
    --hero-accent: var(--accent);
}

.settings-hero {
    --hero-accent: #7057a3;
}

.hero-note {
    min-width: 214px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    font-weight: 850;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-sm);
}

.diagnosis-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.32fr) minmax(0, 0.68fr);
    gap: 24px;
    align-items: start;
}

.generator-status {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(680px, calc(100% - 156px));
    width: fit-content;
    margin: 0;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
}

.generator-stage {
    display: block;
}

.generator-panel {
    display: none;
}

.generator-panel.is-active {
    display: block;
    animation: pageIn 0.24s ease both;
}

.generator-panel > .panel {
    min-height: 0;
}

.generator-panel .compact-info {
    max-height: none;
}

.step-content-grid {
    display: grid;
    gap: 10px;
}

.paper-preview,
.section-configs,
.agent-config-list,
.guide-list,
.diagnosis-section-list,
.question-list {
    display: grid;
    gap: 10px;
}

.panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-md);
}

.command-panel {
    position: relative;
}

.command-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.command-panel,
.flow-panel,
.preview-panel,
.agent-panel,
.diagnosis-guide,
.diagnosis-panel {
    padding: 18px;
}

.panel-head,
.section-card-head,
.agent-card-head,
.persona-head,
.question-review-head,
.section-preview-head,
.paper-title-row,
.question-card-head,
.scope-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.panel-head {
    margin-bottom: 16px;
}

.panel-head.compact {
    margin-bottom: 12px;
}

.minor-text {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.62;
}

.field {
    display: block;
    margin-bottom: 12px;
}

.field span {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 850;
}

textarea,
select,
input {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 10px 11px;
    color: var(--ink);
    background: #fbfcfa;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease);
}

select {
    min-height: 44px;
    padding-right: 36px;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 51%,
        calc(100% - 13px) 51%;
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
}

textarea {
    min-height: 92px;
    resize: vertical;
    line-height: 1.6;
}

textarea:focus,
select:focus,
input:focus {
    outline: 0;
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(20, 117, 108, 0.12);
}

.hero-field textarea {
    min-height: 96px;
}

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

.form-card,
.scope-box,
.accordion,
.agent-card,
.persona-card,
.guide-item,
.diagnosis-result,
.info-box,
.status-box,
.diagnosis-section-card,
.question-card,
.audit-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 246, 0.72);
}

.form-card,
.scope-box,
.accordion,
.agent-card {
    padding: 12px;
    margin-bottom: 12px;
}

.scope-head {
    margin-bottom: 10px;
}

.scope-head h3 {
    margin: 0;
}

.scope-actions {
    display: flex;
    gap: 8px;
    width: min(620px, 100%);
}

.scope-actions select {
    flex: 0 0 120px;
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-scopes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line-strong);
}

.chip {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    color: var(--ink-soft);
    background: #fff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.chip:hover {
    transform: translateY(-1px);
    border-color: var(--primary-border);
    color: var(--primary-strong);
    background: var(--primary-soft);
}

.chip.scope-chip {
    color: var(--primary-strong);
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.accordion {
    padding: 0;
}

.accordion summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink);
    font-weight: 900;
}

.accordion summary small {
    color: var(--muted);
    font-weight: 700;
}

.accordion summary::-webkit-details-marker,
.section-preview summary::-webkit-details-marker,
.answer-box summary::-webkit-details-marker {
    display: none;
}

.accordion[open] summary {
    border-bottom: 1px solid var(--line);
}

.accordion-body {
    padding: 10px;
}

.section-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.score-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
}

.score-breakdown span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: rgba(15, 118, 110, 0.08);
    color: var(--primary-strong);
    font-size: 12px;
    line-height: 1.35;
}

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

.section-grid {
    grid-template-columns: 88px minmax(0, 1fr);
}

.persona-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.agent-card .persona-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.agent-route-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.agent-route-card .route-summary {
    margin-top: 10px;
}

.persona-card,
.guide-item,
.diagnosis-section-card {
    padding: 14px;
}

.editable-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    background: var(--amber-soft);
    color: var(--amber);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

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

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

.mini-field {
    margin-bottom: 0;
}

.mini-field span {
    margin-bottom: 4px;
    font-size: 0.74rem;
}

.mini-field input,
.mini-field select {
    padding: 8px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.mini-field textarea {
    padding: 8px 9px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    min-height: 80px;
    box-sizing: border-box;
}

.wide-field {
    grid-column: 1 / -1;
}

.parse-result-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.parse-result-footer .minor-text {
    margin: 0;
}

.blueprint-source-line {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}

.blueprint-section-editor {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.editable-section-card {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

.persona-tag,
.section-score,
.question-number {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    color: var(--primary-strong);
    background: var(--primary-soft);
    font-size: 0.72rem;
    font-weight: 900;
}

.section-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.section-head-left .section-score {
    flex-shrink: 0;
}

.agent-skills {
    color: var(--muted);
    line-height: 1.7;
}

.primary-btn,
.ghost-btn,
.regen-btn {
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 900;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}

.primary-btn {
    min-width: 128px;
    min-height: 44px;
    padding: 11px 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    box-shadow: 0 12px 24px rgba(20, 117, 108, 0.2);
}

.ghost-btn,
.regen-btn {
    min-height: 30px;
    padding: 4px 12px;
    color: var(--primary-strong);
    background: var(--primary-soft);
}

.primary-btn:hover,
.ghost-btn:hover,
.regen-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(23, 33, 29, 0.1);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
    box-shadow: none;
}

.primary-btn.is-loading,
.ghost-btn.is-loading,
.regen-btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 1;
    pointer-events: none;
}

.primary-btn.is-loading::before,
.ghost-btn.is-loading::before,
.regen-btn.is-loading::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: statusSpin 0.8s linear infinite;
}

.primary-btn.is-loading::before {
    border-color: rgba(255, 255, 255, 0.45);
    border-right-color: #fff;
}

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

.sticky-actions {
    position: static;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.status-box,
.info-box,
.diagnosis-result {
    padding: 12px;
    color: var(--ink-soft);
    line-height: 1.62;
}

.status-box {
    margin-bottom: 10px;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    box-shadow: 0 12px 22px rgba(20, 117, 108, 0.16);
}

.generator-status.status-box {
    margin-bottom: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 20px rgba(20, 117, 108, 0.14);
    overflow: hidden;
    transition: color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.generator-status.is-error {
    color: var(--red);
    border-color: #fecaca;
    background: var(--red-soft);
    box-shadow: none;
}

.generator-status.is-loading {
    padding-left: 34px;
    background: linear-gradient(110deg, var(--primary), var(--primary-strong), var(--accent), var(--primary));
    background-size: 220% 100%;
    animation: statusFlow 1.35s ease-in-out infinite;
}

.generator-status.is-loading::before {
    content: "";
    position: absolute;
    left: 12px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 999px;
    animation: statusSpin 0.8s linear infinite;
}

.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.loading-inline::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid var(--line-strong);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: statusSpin 0.8s linear infinite;
}

@keyframes statusFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes statusSpin {
    to {
        transform: rotate(360deg);
    }
}

.compact-info {
    grid-column: 1 / -1;
    max-height: 176px;
    overflow: auto;
    background: var(--surface-soft);
}

.empty-state {
    min-height: 150px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--muted);
}

.preview-meta,
.section-preview {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-md);
}

.preview-meta {
    padding: 16px;
}

.section-preview-head {
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.18s var(--ease);
}

.section-preview-head:hover {
    background: var(--surface-soft);
}

.section-preview-head.no-toggle {
    cursor: default;
}

.section-preview[open] > .section-preview-head {
    border-bottom: 1px solid var(--line);
}

.section-preview-head .part-prefix {
    color: var(--primary);
    font-weight: 700;
    margin-right: 4px;
    letter-spacing: 0.04em;
}

.item-subtype-tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 4px 0 0;
    background: var(--surface-soft);
    color: var(--muted);
    border-radius: 999px;
    font-size: 12px;
}

.muted-text {
    color: var(--muted);
    margin-left: 8px;
    font-size: 12px;
}

.question-list {
    padding: 12px 16px 16px;
}

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

.question-group-title {
    margin: 2px 0 0;
    color: var(--ink);
    font-size: 0.98rem;
    font-weight: 900;
    letter-spacing: 0;
}

.shared-material {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(20, 117, 108, 0.18);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, #fbfdfb 0%, #eef7f3 100%);
}

.shared-material-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 4px;
}

.shared-material-head strong {
    color: var(--primary-strong);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

.shared-material-head span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.shared-material-body {
    display: grid;
    gap: 8px;
    padding: 0 14px 12px;
}

.shared-material-text {
    color: var(--ink-soft);
    line-height: 1.78;
    white-space: pre-line;
    word-break: break-word;
}

.modern-material-text {
    white-space: normal;
}

.material-index-row {
    margin-bottom: 6px;
}

.modern-material-title {
    margin: 0 0 10px;
    color: var(--ink);
    font-weight: 900;
    text-align: center;
}

.modern-material-text p {
    margin: 0 0 8px;
    text-indent: 2em;
}

.modern-material-count {
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: right;
}

.shared-material-text + .shared-material-text {
    padding-top: 8px;
    border-top: 1px dashed rgba(20, 117, 108, 0.18);
}

.material-index {
    display: inline-flex;
    margin: 0 8px 4px 0;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: rgba(20, 117, 108, 0.1);
    color: var(--primary-strong);
    font-size: 0.75rem;
    font-weight: 900;
}

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

.question-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* 本地题库模式：未调用大模型，无需展示审稿 Agent 单题评价，整卷使用单列布局。 */
.question-card.is-local-mode {
    grid-template-columns: 1fr;
}

.question-main,
.question-review-side {
    min-width: 0;
}

.question-main {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.question-card-head strong {
    color: var(--muted);
}

.question-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}

.question-stem {
    margin: 8px 0;
    color: var(--ink);
    font-weight: 760;
    line-height: 1.78;
}

.question-card blockquote {
    margin: 8px 0;
    padding: 10px 12px;
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink-soft);
}

.sub-question-list,
.diagnosis-result ul,
.audit-card ul,
.validation-report ul,
.chief-editor-report ul {
    margin: 10px 0 0 18px;
    padding: 0;
}

.sub-question-list > li {
    margin: 6px 0;
    line-height: 1.78;
}

.sub-question-list.display-numbered {
    list-style: none;
    margin-left: 0;
}

.sub-question-list.display-numbered > li {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.sub-question-display-index {
    flex: 0 0 auto;
}

.sub-question-title {
    font-weight: 680;
}

.sub-question-detail-lines {
    margin-top: 4px;
    color: var(--ink-soft);
}

.question-index {
    margin-right: 6px;
    color: var(--primary, #0f766e);
    font-weight: 700;
}

.sub-question-rich {
    margin-top: 10px;
    line-height: 1.78;
}

.sub-question-rich .rich-body-text,
.question-card-head .rich-body-text {
    margin: 6px 0;
    line-height: 1.78;
    color: var(--ink, #1f2937);
}

.md-table {
    margin: 10px 0;
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    table-layout: auto;
    overflow: auto;
    box-shadow: 0 0 0 1px var(--line, #e5e7eb);
    border-radius: 6px;
}

.md-table th,
.md-table td {
    padding: 8px 10px;
    border: 1px solid var(--line, #e5e7eb);
    text-align: left;
    vertical-align: middle;
    font-size: 0.95rem;
    line-height: 1.6;
}

.md-table thead th {
    background: var(--surface-soft, #f1f5f9);
    color: var(--ink, #111827);
    font-weight: 600;
}

.validation-issue-list,
.chief-editor-change-list {
    max-height: none;
    overflow: visible;
}

.risk-summary-line {
    margin: 6px 0 2px;
}

.risk-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.risk-row td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    line-height: 1.5;
}

.risk-code-cell {
    width: 180px;
    min-width: 130px;
    font-size: 0.94rem;
    color: var(--ink-soft);
    text-align: center;
}

.risk-message-cell {
    font-size: 0.96rem;
}

.risk-action-cell {
    width: 90px;
    text-align: right;
    white-space: nowrap;
}

.risk-accept-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.88rem;
    color: var(--muted);
    cursor: pointer;
}

.risk-row-error {
    background: var(--red-soft);
}

.risk-row-error .risk-code-cell {
    background: var(--red-soft);
}

.risk-row-info {
    background: var(--surface-soft);
}

.risk-row-info .risk-code-cell {
    color: var(--muted);
}

.chief-editor-details {
    margin-top: 10px;
    border-top: 1px solid var(--line);
}

.chief-editor-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    color: var(--primary-strong);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 900;
    list-style: none;
}

.chief-editor-details summary::-webkit-details-marker {
    display: none;
}

.chief-editor-details summary::after {
    content: "展开";
    color: var(--muted);
    font-size: 0.75rem;
}

.chief-editor-details[open] summary::after {
    content: "收起";
}

.answer-card {
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.answer-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--primary-strong);
    font-size: 0.88rem;
}

.answer-card ul {
    margin: 0;
    padding-left: 20px;
}

.answer-card li {
    line-height: 1.5;
}

.answer-box {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
}

.answer-box summary {
    cursor: pointer;
    color: var(--primary-strong);
    font-weight: 900;
}

.question-review {
    height: 100%;
    margin-top: 0;
    padding: 12px;
    border: 1px solid rgba(16, 185, 129, 0.24);
    border-radius: var(--radius-md);
    background: var(--green-soft);
}

.question-review.yellow {
    border-color: #fde68a;
    background: var(--amber-soft);
}

.question-review.red {
    border-color: #fecaca;
    background: var(--red-soft);
}

.question-review-head {
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.question-review-head span {
    min-width: fit-content;
    white-space: normal;
}

.traffic-light-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.12);
}

.traffic-light-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.72);
}

.traffic-light-icon.yellow {
    background: var(--amber);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.16);
}

.traffic-light-icon.red {
    background: var(--red);
    box-shadow: 0 0 0 5px rgba(220, 38, 38, 0.14);
}

.validation-issue.warning {
    color: var(--amber);
}

.validation-issue.error {
    color: var(--red);
}

.audit-card,
.validation-report,
.chief-editor-report {
    padding: 12px;
}

.validation-report.failed {
    border-color: var(--line);
}

.report-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: 10px;
    margin-top: 10px;
    align-items: stretch;
}

.report-side-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-side-stack > .audit-card:last-child {
    margin-top: auto;
}

.section-preview > p {
    padding: 0 14px;
}

.self-review-panel {
    border-color: rgba(20, 117, 108, 0.18);
    background: #fff;
}

.section-preview > .report-grid {
    padding: 0 14px 14px;
}

.fallback-report {
    margin: 0 0 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fallback-report strong {
    font-size: 14px;
}

.fallback-report ul {
    margin: 4px 0 0;
    padding-left: 18px;
    line-height: 1.6;
}

.fallback-report-clean {
    border-color: rgba(20, 117, 108, 0.22);
    background: linear-gradient(135deg, rgba(20, 117, 108, 0.06), #fff 65%);
}

.fallback-report-clean strong {
    color: #14756c;
}

.fallback-report-warn {
    border-color: rgba(214, 137, 16, 0.35);
    background: linear-gradient(135deg, rgba(214, 137, 16, 0.08), #fff 65%);
}

.fallback-report-warn strong {
    color: #b45f00;
}

.section-preview.is-fallback {
    border-color: rgba(214, 137, 16, 0.45);
    box-shadow: 0 0 0 1px rgba(214, 137, 16, 0.12), var(--shadow-md);
}

.fallback-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #b45f00;
    background: rgba(214, 137, 16, 0.14);
    border: 1px solid rgba(214, 137, 16, 0.35);
    vertical-align: middle;
}

.fallback-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 16px;
    margin: 0 16px;
    border-radius: var(--radius-md, 10px);
    background: rgba(214, 137, 16, 0.08);
    color: #7a4900;
    font-size: 13px;
    line-height: 1.55;
}

.fallback-notice strong {
    color: #b45f00;
}

.fallback-report-bank {
    border-color: rgba(45, 95, 184, 0.32);
    background: linear-gradient(135deg, rgba(45, 95, 184, 0.08), #fff 65%);
}

.fallback-report-bank strong {
    color: #2d5fb8;
}

.fallback-tag {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.fallback-tag-bank {
    color: #2d5fb8;
    background: rgba(45, 95, 184, 0.12);
    border: 1px solid rgba(45, 95, 184, 0.32);
}

.fallback-tag-skeleton {
    color: #b45f00;
    background: rgba(214, 137, 16, 0.14);
    border: 1px solid rgba(214, 137, 16, 0.35);
}

.section-preview.is-bank {
    border-color: rgba(45, 95, 184, 0.4);
    box-shadow: 0 0 0 1px rgba(45, 95, 184, 0.12), var(--shadow-md);
}

.fallback-badge-bank {
    color: #2d5fb8;
    background: rgba(45, 95, 184, 0.12);
    border-color: rgba(45, 95, 184, 0.32);
}

.fallback-notice-bank {
    background: rgba(45, 95, 184, 0.08);
    color: #2a4a86;
}

.fallback-notice-bank strong {
    color: #2d5fb8;
}

.fallback-notice-bank code,
.fallback-report ul code {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(45, 95, 184, 0.1);
    color: #2d5fb8;
    font-family: var(--font-mono, "SF Mono", monospace);
    font-size: 12px;
}

.workflow-diagnostics {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}

.workflow-diagnostics p {
    margin: 0;
}

.workflow-diagnostics p + p {
    margin-top: 4px;
}

input.is-disabled,
.providerForm input.is-disabled {
    color: #98a4b3;
    background: #f4f6fa;
    cursor: not-allowed;
}

.validation-issue {
    margin-bottom: 8px;
    line-height: 1.58;
    word-break: break-word;
}

.validation-issue .minor-text {
    display: block;
}

.repair-btn {
    margin-top: 8px;
    justify-self: end;
}

.diagnosis-panel textarea {
    min-height: 260px;
}

/* 试卷体检 · 导入条：DOCX / PDF / TXT 上传按钮 + 状态提示。
   - file input 隐藏，靠 <label for> 触发，避免浏览器原生样式破坏视觉。
   - hint 用 .is-error / .is-success 切换语义色，不再单独引用 status-box。 */
.diagnosis-import-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-soft, rgba(102, 130, 178, 0.06));
    border: 1px dashed var(--border-soft, rgba(102, 130, 178, 0.35));
}

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

.diagnosis-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.diagnosis-import-btn[aria-disabled="true"],
.diagnosis-import-btn.is-loading {
    cursor: not-allowed;
    opacity: 0.7;
}

.diagnosis-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.diagnosis-import-hint {
    margin: 0;
    font-size: 0.85em;
    color: var(--ink-soft, #6b7488);
}

.diagnosis-import-hint.is-error {
    color: var(--danger, #d04a4a);
}

.diagnosis-import-hint.is-success {
    color: var(--success, #2f8a4f);
}

@media (max-width: 1320px) {
    .app-shell {
        grid-template-columns: 224px minmax(0, 1fr);
    }

    .workspace-hero {
        align-items: flex-start;
    }

    .diagnosis-layout,
    .report-grid,
    .persona-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .side-nav {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .brand-row {
        height: auto;
        padding: 14px 16px;
    }

    .nav-main,
    .nav-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 10px 12px;
    }

    .nav-main::before {
        grid-column: 1 / -1;
        padding: 2px 4px 4px;
    }

    .workspace-tab {
        justify-content: flex-start;
        min-height: 46px;
        padding: 0 12px;
        font-size: 0.92rem;
    }

    .workspace {
        padding: 16px 14px 28px;
    }

    .workspace-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 20px;
    }

    .workspace-hero::after {
        width: 100%;
        height: 40px;
        inset: auto 0 0;
    }

    .grid.two,
    .section-grid,
    .editable-grid {
        grid-template-columns: 1fr;
    }

    .scope-head,
    .scope-actions,
    .panel-head,
    .section-preview-head,
    .paper-title-row {
        flex-direction: column;
        align-items: stretch;
    }

    .question-card {
        grid-template-columns: 1fr;
    }

    .generator-status {
        max-width: none;
        width: 100%;
    }

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

    .actions .primary-btn,
    .actions .ghost-btn,
    .actions .regen-btn {
        width: 100%;
    }

    .scope-actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .nav-main,
    .nav-bottom {
        grid-template-columns: 1fr;
    }

    .workspace-hero h2 {
        font-size: 1.42rem;
    }

    .panel-head,
    .section-preview-head,
    .paper-title-row,
    .question-card-head {
        gap: 8px;
    }

    .section-score,
    .persona-tag,
    .question-number {
        width: fit-content;
    }

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   M5 扩展样式：设置中心 / 历史 / 题库 / 流式 / 附件占位
   ===================================================================== */

.nav-icon-history,
.nav-icon-bank {
    background: transparent;
    border-radius: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
}
.nav-icon-history::before,
.nav-icon-bank::before { content: none; }

.span-two { grid-column: 1 / -1; }

.info-box-ok { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.info-box-warn { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.info-box-error { border-color: var(--red); background: var(--red-soft); color: var(--red); }

.danger-btn { color: var(--red); border-color: rgba(194, 65, 45, 0.4); }
.danger-btn:hover { background: var(--red-soft); }
.danger-btn:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: not-allowed; }
.danger-btn:disabled:hover { background: transparent; }

/* ---- 设置中心 ---- */

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

.provider-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--surface-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.provider-card {
    flex-direction: column;
    align-items: flex-start;
}

.provider-card header {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

/* ---- 历史与回放 ---- */

.history-layout {
    display: grid;
    grid-template-columns: 320px 320px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .history-layout {
        grid-template-columns: 1fr;
    }
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
}

.history-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-strong);
}

.history-pager span {
    color: var(--muted);
    font-size: 0.82rem;
}

.history-row {
    text-align: left;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--surface);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title chips"
        "meta meta";
    gap: 4px 8px;
    cursor: pointer;
    transition: border-color 120ms var(--ease), background-color 120ms var(--ease);
}

.history-row:hover { border-color: var(--primary-border); background: var(--primary-soft); }

.history-row.is-selected {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.history-row__title {
    grid-area: title;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.history-row__chips {
    grid-area: chips;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.history-row__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.history-row__meta .history-row__sep {
    opacity: 0.5;
}

.history-row-wrap {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: 8px 10px;
    transition: border-color 120ms var(--ease), background 120ms var(--ease);
}

.history-row-wrap:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.history-row-wrap.is-selected {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.history-row-wrap .history-row {
    border: none;
    background: transparent;
    padding: 2px 0;
    /* 容器 wrap 已经承接 grid 行的视觉边框，这里去掉 row 自身边框只用作内容布局 */
}

.history-row-wrap .history-row:hover {
    background: transparent;
    border-color: transparent;
}

/* —— 状态徽标 ——
   不同状态用配色徽标显示，比纯文本更易扫读；status-* class 与
   yuwenmingti/web/app.js 的 status 列表保持一致。 */
.history-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--muted);
}

.history-status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

.history-status-badge.status-completed,
.history-status-badge.status-succeeded,
.history-status-badge.status-ok {
    color: var(--green);
    background: rgba(16, 138, 90, 0.08);
    border-color: rgba(16, 138, 90, 0.32);
}

.history-status-badge.status-failed,
.history-status-badge.status-error,
.history-status-badge.status-aborted {
    color: var(--red);
    background: var(--red-soft);
    border-color: rgba(189, 61, 47, 0.32);
}

.history-status-badge.status-running {
    color: var(--amber);
    background: rgba(207, 137, 30, 0.08);
    border-color: rgba(207, 137, 30, 0.32);
}

.history-status-badge.status-terminated {
    color: var(--muted);
}

.history-row__pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.history-row__pill strong {
    color: var(--ink);
    font-weight: 800;
    margin-right: 3px;
}

/* —— 带图标的小按钮 ——
   panel-head 里 "刷新" 等按钮可以叠加 `.ghost-btn .ghost-btn-icon` 来在
   文字前面加 SVG；这里只负责对齐和图标尺寸，不重置 ghost-btn 主体样式。 */
#historyWorkspace .ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ghost-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.ghost-btn-icon svg {
    width: 100%;
    height: 100%;
}

.history-row-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.history-row-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.history-row-actions {
    display: flex;
    align-items: center;
}

.history-row-actions .row-delete-btn {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 120ms var(--ease);
}

.history-row-actions .row-delete-btn:hover {
    color: var(--red);
    border-color: var(--red);
    background: var(--red-soft);
}

.history-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}

.history-toolbar .history-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
}

.history-toolbar .history-select-all input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.history-toolbar .history-selected-count {
    color: var(--muted);
    font-size: 0.8rem;
    flex: 1;
}

.history-list-section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 2px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: rgba(15, 118, 110, 0.04);
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.history-list-section-head::before {
    content: "";
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: var(--primary-border);
}

.history-row .status-ok { color: var(--green); }
.history-row .status-error { color: var(--red); }
.history-row .status-running { color: var(--amber); }
.history-row .status-terminated { color: var(--muted); }

.history-detail-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 700px;
    overflow-y: auto;
}

.history-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: auto;
    padding: 40px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    color: var(--muted);
    text-align: center;
}

.history-detail-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--primary-border);
}

.history-detail-empty-icon svg {
    width: 24px;
    height: 24px;
}

.history-detail-empty-title {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
}

.history-detail-empty-sub {
    margin: 0;
    max-width: 320px;
}

.history-summary {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--surface-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-summary__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.history-summary__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.history-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.history-meta-chip strong {
    color: var(--ink);
    font-weight: 800;
}

.history-meta-chip-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.76rem;
}

.history-detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-detail-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.history-detail-section-head h3 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 800;
}

.history-detail-section-head small {
    color: var(--muted);
    font-size: 0.78rem;
}

.history-section,
.history-call {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--surface);
}

.history-section[open],
.history-call[open] {
    background: var(--surface-soft);
}

.history-section > summary,
.history-call > summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
}

.history-section-items {
    margin: 8px 0 0;
    padding-left: 20px;
}

.history-section-items li {
    margin-bottom: 6px;
    line-height: 1.55;
}

.history-call-pre {
    background: var(--surface-muted);
    padding: 8px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 0.78rem;
    max-height: 220px;
}

.history-attachments {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--surface);
}

.history-attachments h3 {
    margin: 0 0 8px;
    font-size: 0.92rem;
    color: var(--ink);
    font-weight: 800;
}

.history-attachments ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.history-detail-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
}

/* ---- 题库管理 ---- */

.bank-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .bank-layout {
        grid-template-columns: 1fr;
    }
}

/* 旧版 select-only filter 已经被 bank-toolbar 中的搜索 + chips 取代；
   保留向后兼容的 .bank-filter-row 样式，外层 hidden 时不影响布局。 */
.bank-filter-row {
    margin-bottom: 10px;
}

.bank-filter-row select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.bank-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.bank-search {
    position: relative;
    display: flex;
    align-items: center;
}

.bank-search-icon {
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    color: var(--muted);
    pointer-events: none;
}

.bank-search-icon svg {
    width: 100%;
    height: 100%;
}

.bank-search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 0.92rem;
    line-height: 1.4;
}

.bank-search input::-webkit-search-cancel-button {
    cursor: pointer;
}

.bank-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bank-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.4;
    cursor: pointer;
    transition:
        background-color 120ms var(--ease),
        color 120ms var(--ease),
        border-color 120ms var(--ease);
}

.bank-type-chip:hover {
    border-color: var(--primary-border);
    color: var(--ink);
}

.bank-type-chip.is-active {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-strong, var(--ink));
    font-weight: 700;
}

.bank-type-chip-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    font-size: 0.78rem;
}

.bank-type-chip.is-active .bank-type-chip-count {
    opacity: 0.9;
}

.bank-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 580px;
    overflow-y: auto;
}

.bank-row {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    background: var(--surface);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title pill"
        "meta meta";
    column-gap: 10px;
    row-gap: 4px;
    cursor: pointer;
    transition:
        border-color 120ms var(--ease),
        background-color 120ms var(--ease);
}

.bank-row__title {
    grid-area: title;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bank-row__pill {
    grid-area: pill;
    align-self: start;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.4;
}

.bank-row__pill strong {
    color: var(--ink);
    font-weight: 800;
}

.bank-row__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.bank-row__meta .bank-row__sep {
    opacity: 0.5;
}

.bank-row__meta code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    padding: 0;
    background: transparent;
    color: var(--muted);
}

.bank-row.is-active,
.bank-row:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.bank-row.is-active .bank-row__pill,
.bank-row:hover .bank-row__pill {
    background: var(--surface);
}

.bank-row.is-active .bank-row__title,
.bank-row.is-active .bank-row__meta,
.bank-row:hover .bank-row__title {
    color: var(--ink);
}

.bank-editor-head {
    align-items: flex-start;
    gap: 14px;
}

.bank-editor-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bank-editor-actions {
    display: flex;
    gap: 8px;
}

.bank-editor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.bank-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.4;
}

.bank-meta-chip strong {
    color: var(--ink);
    font-weight: 800;
}

.bank-meta-chip-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

.bank-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
    color: var(--muted);
    text-align: center;
}

.bank-editor-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--primary-border);
}

.bank-editor-empty-icon svg {
    width: 22px;
    height: 22px;
}

.bank-editor-empty-title {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
}

.bank-editor-empty-sub {
    margin: 0;
    max-width: 320px;
}

.bank-editor-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bank-fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px 14px;
    margin: 0;
}

.bank-fieldset legend {
    padding: 0 6px;
    font-weight: 800;
    color: var(--ink);
}

.bank-fieldset-hint {
    margin: 0 0 10px;
    color: var(--muted);
}

.bank-items-fieldset {
    /* 旧选择器，保留以便 v6 polish 层继续叠加视觉差异 */
}

.bank-items-fieldset legend {
    padding: 0 6px;
    font-weight: 800;
}

.bank-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}

.bank-item-block {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    background: var(--surface-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bank-item-block header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.bank-item-block__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ink);
}

.bank-item-score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.bank-item-score strong {
    color: var(--ink);
    font-weight: 800;
}

/* ---- 流式时间线 ---- */

.stream-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    color: var(--muted);
}

.stream-timeline {
    margin-top: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}

.stream-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.stream-timeline-list {
    list-style: none;
    margin: 0;
    padding: 10px 12px 12px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.55;
}

.stream-event {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 10px;
    align-items: baseline;
    padding: 2px 0;
    border-radius: 0;
    border-left: 0;
    background: transparent;
}

.stream-event-time {
    color: var(--muted);
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 0.78rem;
}

.stream-event-body {
    display: block;
    min-width: 0;
    color: var(--ink-soft);
}

.stream-event-body strong,
.stream-event-body .minor-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.stream-event-body strong {
    color: var(--ink);
    font-weight: 750;
}

.stream-event-body .minor-text::before {
    content: " - ";
    color: var(--muted);
}

.stream-event.is-typing .stream-event-body strong::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 1em;
    margin-left: 2px;
    border-right: 2px solid var(--primary);
    vertical-align: -0.12em;
}

.stream-event-section_started .stream-event-body strong { color: var(--primary-strong); }
.stream-event-section_completed .stream-event-body strong,
.stream-event-paper_finalized .stream-event-body strong { color: var(--green); }
.stream-event-section_fallback .stream-event-body strong { color: var(--amber); }
.stream-event-thinking .stream-event-body strong { color: var(--accent); }
.stream-event-idle {
    color: var(--muted);
}

.stream-event-idle .stream-event-time {
    color: var(--muted);
}

.stream-event-idle .stream-event-body strong {
    color: var(--muted);
}

.stream-idle-dots {
    min-height: 1.25em;
    color: var(--primary);
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 1.08rem;
    font-weight: 850;
}

.stream-event-tool_called .stream-event-body strong { color: var(--accent); }
.stream-event-error .stream-event-body strong,
.stream-event-error .stream-event-body .minor-text { color: var(--red); }

/* ---- verbose 节点级事件：视觉次级（小字、缩进、灰一档），避免抢顶层 item_* 事件视觉权重 ---- */
.stream-event-node_event {
    padding-left: 1.5rem;
    border-left: 2px dashed var(--border);
    color: var(--muted);
    opacity: 0.95;
}
.stream-event-node_event .stream-event-body strong {
    font-weight: 600;
    color: var(--muted);
    font-size: 0.92em;
}
.stream-event-node_event .stream-event-body .minor-text {
    font-size: 0.88em;
}
.stream-event-node_event .stream-event-time {
    color: var(--muted);
    opacity: 0.7;
}

/* 副开关（节点详情）视觉上比主"实时显示"开关弱一档 */
.stream-toggle.stream-toggle-secondary {
    opacity: 0.85;
}
.stream-toggle.stream-toggle-secondary span {
    font-size: 0.92em;
    color: var(--muted);
}

/* ---- 附件占位 ---- */

.attachment-box {
    margin: 8px 0;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--surface-soft);
}

.attachment-box summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
}

.attachment-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    background: var(--surface);
}

.attachment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.attachment-kind {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: 0.78rem;
}

.attachment-preview {
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

.attachment-text {
    background: var(--surface-muted);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    white-space: pre-wrap;
    margin: 0;
}

/* =====================================================================
   UI polish layer：教师工作台视觉收敛、响应式与可访问性增强
   ===================================================================== */

:root {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #eef4f2;
    --ink: #16211f;
    --ink-soft: #31423d;
    --muted: #63736d;
    --muted-light: #87958f;
    --line: rgba(210, 220, 216, 0.88);
    --line-strong: #b9c7c1;
    --primary: #0f766e;
    --primary-strong: #0b5f59;
    --primary-soft: #e6f4f1;
    --primary-border: #98d5cc;
    --secondary: #315f88;
    --secondary-soft: #eaf2fa;
    --accent: #a95224;
    --accent-soft: #fff2e8;
    --amber: #9a5b08;
    --amber-soft: #fff7df;
    --green: #087f5b;
    --green-soft: #e9f8f1;
    --red: #bd3d2f;
    --red-soft: #fff1f0;
    --shadow-sm: 0 1px 2px rgba(22, 33, 31, 0.05);
    --shadow-md: 0 1px 2px rgba(22, 33, 31, 0.06), 0 10px 28px rgba(22, 33, 31, 0.07);
    --shadow-lg: 0 1px 2px rgba(22, 33, 31, 0.08), 0 18px 42px rgba(22, 33, 31, 0.1);
    --radius-lg: 8px;
    --radius-md: 8px;
    --radius-sm: 6px;
    color-scheme: light;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 251, 0) 320px),
        var(--bg);
    font-variant-numeric: tabular-nums;
}

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    transform: translateY(-140%);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: #fff;
    background: var(--primary-strong);
    box-shadow: var(--shadow-lg);
    font-weight: 850;
    text-decoration: none;
    transition: transform 0.18s var(--ease);
}

.skip-link:focus {
    transform: translateY(0);
}

.main-shell:focus {
    outline: none;
}

button,
a,
summary,
select {
    -webkit-tap-highlight-color: rgba(15, 118, 110, 0.16);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.28);
    outline-offset: 2px;
}

.app-shell {
    grid-template-columns: 260px minmax(0, 1fr);
    background: transparent;
}

.side-nav {
    border-right-color: rgba(192, 206, 201, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
        var(--surface);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.8);
}

.brand-row {
    height: 82px;
    padding: 0 20px;
}

.brand-mark,
.teacher-card > span {
    border-radius: var(--radius-md);
}

.brand-mark {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.2);
    font-size: 20px;
}

.brand-row strong,
.teacher-card strong {
    color: var(--ink);
    font-weight: 900;
}

.nav-main {
    padding: 22px 12px 18px;
}

.nav-main::before {
    padding: 0 14px 12px;
    color: var(--muted);
}

.nav-bottom {
    padding: 14px;
    background: rgba(246, 248, 251, 0.72);
}

.workspace-tab {
    min-height: 50px;
    border-color: transparent;
    border-radius: var(--radius-md);
    color: var(--ink-soft);
}

.workspace-tab:hover {
    background: var(--surface-soft);
    transform: translateX(2px);
}

.workspace-tab:active,
.stepper-item:active:not(:disabled),
.chip:active,
.primary-btn:active,
.ghost-btn:active,
.regen-btn:active {
    transform: translateY(0) scale(0.99);
}

.workspace-tab.is-active {
    border-color: rgba(15, 118, 110, 0.18);
    background: linear-gradient(90deg, var(--primary-soft), rgba(255, 255, 255, 0.88));
    box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm);
}

.nav-icon-history,
.nav-icon-bank {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
}

.nav-icon-history::before,
.nav-icon-bank::before {
    content: none;
}

.teacher-card {
    border-color: var(--line);
    background: var(--surface);
}

.workspace {
    width: 100%;
    padding: 24px clamp(16px, 2.2vw, 32px) 34px;
}

.workspace.is-active {
    animation-duration: 0.24s;
}

.workspace-hero {
    min-height: 0;
    margin-bottom: 14px;
    padding: 16px 20px;
    border-color: var(--line);
    border-left-width: 4px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 249, 0.94)),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.workspace-hero h2 {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
    margin-bottom: 4px;
}

.workspace-hero p:not(.eyebrow) {
    margin: 4px 0 0;
    font-size: 0.92rem;
}

.workspace-hero::before {
    inset: auto 24px 16px 24px;
    opacity: 0.22;
}

.workspace-hero::after {
    background: linear-gradient(90deg, transparent, rgba(49, 95, 136, 0.045));
}

.workspace-hero h2 {
    max-width: 820px;
    font-size: clamp(1.45rem, 2vw, 2rem);
}

.workspace-hero p:not(.eyebrow) {
    max-width: 820px;
    color: var(--muted);
}

.hero-note {
    border-color: rgba(15, 118, 110, 0.16);
    color: var(--primary-strong);
    background: rgba(230, 244, 241, 0.72);
}

.agent-hero {
    --hero-accent: var(--secondary);
}

.settings-hero {
    --hero-accent: #6b5a8f;
}

.panel {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-sm);
}

.panel:hover {
    border-color: rgba(185, 199, 193, 0.98);
}

.command-panel::before {
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
}

.command-panel,
.flow-panel,
.preview-panel,
.agent-panel,
.diagnosis-guide,
.diagnosis-panel,
.providers-panel,
.active-combo-panel,
.history-papers,
.history-runs,
.history-detail,
.bank-list-panel,
.bank-editor-panel {
    padding: 20px;
}

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

.panel-head:not(.compact) {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(210, 220, 216, 0.72);
}

.panel h2,
.panel h3,
.section-preview h3 {
    color: var(--ink);
}

.eyebrow,
.panel-kicker {
    color: var(--hero-accent, var(--primary));
}

.minor-text {
    color: var(--muted);
}

.grid.two {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 14px;
}

.field {
    margin-bottom: 14px;
}

.field span {
    color: var(--ink-soft);
}

textarea,
select,
input {
    min-height: 46px;
    border-color: var(--line-strong);
    border-radius: var(--radius-md);
    background: #fcfdfc;
}

textarea::placeholder,
input::placeholder {
    color: #8d9a95;
}

textarea:hover,
select:hover,
input:hover {
    border-color: #96aaa2;
    background: #fff;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

textarea:focus,
select:focus,
input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.13);
}

input[readonly],
input.is-disabled,
.providerForm input.is-disabled {
    color: #66756f;
    background: #eef3f1;
}

.field:focus-within > span {
    color: var(--primary-strong);
}

.form-card,
.scope-box,
.accordion,
.agent-card,
.persona-card,
.guide-item,
.diagnosis-result,
.info-box,
.status-box,
.diagnosis-section-card,
.question-card,
.audit-card,
.validation-report,
.chief-editor-report,
.history-summary,
.history-section,
.history-call,
.bank-item-block,
.attachment-box {
    border-color: var(--line);
    background: var(--surface-soft);
}

.form-card,
.scope-box,
.accordion,
.agent-card {
    padding: 14px;
    margin-bottom: 14px;
}

.scope-head {
    gap: 16px;
}

.scope-actions {
    gap: 10px;
    width: min(500px, 100%);
}

.chip {
    min-height: 36px;
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink-soft);
}

.chip:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.chip.scope-chip {
    border-color: rgba(15, 118, 110, 0.28);
}

.accordion summary {
    min-height: 50px;
    align-items: center;
}

.accordion summary::after,
.answer-box summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.18s var(--ease);
}

.accordion[open] summary::after,
.answer-box[open] summary::after {
    transform: rotate(225deg);
}

.persona-tag,
.section-score,
.question-number,
.attachment-kind,
.fallback-tag,
.fallback-badge {
    border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: var(--radius-sm);
}

.primary-btn,
.ghost-btn,
.regen-btn {
    min-height: 30px;
    border-radius: var(--radius-md);
}

.primary-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-strong));
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.2);
}

.primary-btn:hover {
    background: linear-gradient(135deg, #11857c, var(--primary-strong));
}

.ghost-btn,
.regen-btn {
    border: 1px solid rgba(15, 118, 110, 0.14);
    background: var(--primary-soft);
}

.ghost-btn:hover,
.regen-btn:hover {
    border-color: var(--primary-border);
    background: #dff1ee;
}

button:disabled {
    opacity: 0.5;
}

.actions {
    gap: 14px;
}

.sticky-actions {
    margin: 18px -20px -20px;
    padding: 14px 20px;
    border-top-color: var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.96));
}

.status-box {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-strong), #134e4a);
    box-shadow: 0 10px 22px rgba(15, 95, 89, 0.14);
}

.info-box {
    background: var(--surface-soft);
}

.info-box-ok {
    border-color: rgba(8, 127, 91, 0.28);
    background: var(--green-soft);
    color: #075f45;
}

.info-box-warn {
    border-color: rgba(154, 91, 8, 0.28);
    background: var(--amber-soft);
    color: #744305;
}

.info-box-error {
    border-color: rgba(189, 61, 47, 0.28);
    background: var(--red-soft);
    color: #963126;
}

.diagnosis-layout {
    grid-template-columns: minmax(260px, 0.34fr) minmax(0, 0.66fr);
    gap: 18px;
}

.guide-list,
.agent-config-list,
.paper-preview,
.question-list,
.section-configs {
    gap: 12px;
}

.guide-item,
.persona-card,
.diagnosis-section-card,
.question-main,
.question-review,
.audit-card,
.validation-report,
.chief-editor-report {
    background: #fff;
}

.agent-card,
.section-card,
.editable-section-card,
.question-main {
    box-shadow: var(--shadow-sm);
}

.persona-grid {
    gap: 12px;
}

.question-stem {
    color: var(--ink);
    font-weight: 760;
}

.question-card blockquote {
    border-left-color: var(--secondary);
    background: var(--secondary-soft);
}

.answer-box {
    background: var(--surface-soft);
}

.answer-box summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chief-editor-details summary::after {
    color: var(--muted);
}

.history-layout {
    grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 0.8fr) minmax(360px, 1.4fr);
    gap: 18px;
}

.history-list,
.bank-list,
.history-detail-body,
.stream-timeline-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 118, 110, 0.45) transparent;
}

.history-list::-webkit-scrollbar,
.bank-list::-webkit-scrollbar,
.history-detail-body::-webkit-scrollbar,
.stream-timeline-list::-webkit-scrollbar {
    width: 10px;
}

.history-list::-webkit-scrollbar-thumb,
.bank-list::-webkit-scrollbar-thumb,
.history-detail-body::-webkit-scrollbar-thumb,
.stream-timeline-list::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: rgba(15, 118, 110, 0.4);
}

.history-row,
.bank-row,
.provider-card {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.16s var(--ease), background 0.16s var(--ease), box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}

.history-row:hover,
.bank-row:hover,
.bank-row.is-active {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.history-row:focus-visible,
.bank-row:focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.28);
    outline-offset: 2px;
}

.bank-layout {
    grid-template-columns: minmax(280px, 0.36fr) minmax(0, 0.64fr);
    gap: 18px;
}

.bank-filter-row select {
    min-height: 44px;
}

.bank-editor-actions,
.history-detail-actions {
    flex-wrap: wrap;
}

.bank-items-fieldset {
    border-color: var(--line);
    background: var(--surface-soft);
}

.bank-items-fieldset legend {
    color: var(--ink-soft);
    font-weight: 850;
}

.stream-toggle {
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.stream-toggle input {
    width: 18px;
    min-height: 18px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.stream-timeline {
    padding: 0;
    background: #fff;
}

.planning-summary {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
}

.planning-summary-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 2px;
}

.planning-strategy-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    cursor: help;
}

.planning-strategy-llm {
    color: #14756c;
    background: rgba(20, 117, 108, 0.08);
    border-color: rgba(20, 117, 108, 0.18);
}

.planning-strategy-rule {
    color: var(--muted);
    background: rgba(22, 33, 31, 0.04);
    border-color: var(--line);
}

.planning-strategy-fallback {
    color: #a85a00;
    background: rgba(255, 173, 64, 0.12);
    border-color: rgba(255, 173, 64, 0.32);
}

.planning-group {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
    display: grid;
    gap: 8px;
}

.planning-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.planning-group-head strong {
    color: var(--ink);
    font-size: 0.96rem;
    font-weight: 700;
}

.planning-group-meta {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.planning-material-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(22, 33, 31, 0.03);
    color: var(--ink);
    font-size: 0.86rem;
    line-height: 1.5;
}

.planning-material-row.planning-material-bank {
    color: var(--muted);
}

.planning-row-label {
    flex: 0 0 auto;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.planning-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.planning-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
    line-height: 1.5;
}

.planning-item-row:first-child {
    border-top: none;
    padding-top: 2px;
}

.planning-item-row strong {
    flex: 0 0 auto;
    color: var(--ink);
    font-weight: 700;
}

.planning-item-subtype {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(20, 117, 108, 0.08);
    color: #14756c;
    font-size: 0.75rem;
    font-weight: 600;
}

.planning-item-detail {
    flex: 1 1 240px;
    min-width: 0;
    color: var(--muted);
}

.planning-item-row-summary strong {
    color: var(--muted);
}

/* 旧的独立摘要 <p>（非 <li>、无三列布局）已下线；混合题组的默写汇总行改为
   ``<li class="planning-item-row planning-item-row-summary">``，完全复用
   ``planning-item-row`` 的 flex 三列对齐，仅靠 strong 颜色弱化区分。 */

.planning-empty-row {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .planning-group {
        padding: 10px 12px;
    }
    .planning-group-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.stream-event {
    grid-template-columns: 86px minmax(0, 1fr);
    padding: 2px 0;
    background: transparent;
}

.stream-event strong,
.stream-event span {
    min-width: 0;
}

.history-call-pre,
.attachment-text {
    border: 1px solid rgba(185, 199, 193, 0.64);
    background: #f1f5f4;
}

code {
    border-radius: 5px;
}

.empty-state {
    color: var(--muted);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.88)),
        var(--surface-soft);
}

@media (max-width: 1320px) {
    .app-shell {
        grid-template-columns: 232px minmax(0, 1fr);
    }

    .history-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .question-card,
    .bank-layout,
    .diagnosis-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .app-shell {
        display: block;
    }

    .side-nav {
        position: static;
        height: auto;
    }

    .brand-row {
        height: auto;
        padding: 14px 16px;
    }

    .nav-main,
    .nav-bottom {
        grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
        gap: 8px;
        padding: 10px 12px;
    }

    .nav-main::before {
        grid-column: 1 / -1;
        padding: 2px 4px;
    }

    .teacher-card {
        grid-column: 1 / -1;
    }

    .workspace {
        width: 100%;
        padding: 16px 14px 28px;
    }

    .workspace-hero {
        padding: 18px;
    }

    .hero-note {
        min-width: 0;
    }

    .command-panel,
    .flow-panel,
    .preview-panel,
    .agent-panel,
    .diagnosis-guide,
    .diagnosis-panel,
    .providers-panel,
    .history-papers,
    .history-runs,
    .history-detail,
    .bank-list-panel,
    .bank-editor-panel {
        padding: 16px;
    }

    .sticky-actions {
        margin: 16px -16px -16px;
        padding: 14px 16px;
    }

    .grid.two,
    .persona-grid,
    .editable-grid,
    .report-grid {
        grid-template-columns: 1fr;
    }

    .scope-actions {
        width: 100%;
    }

    .provider-card,
    .bank-item-block header,
    .stream-timeline-head {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .workspace {
        padding-inline: 10px;
    }

    .workspace-hero {
        padding: 16px;
    }

    .workspace-hero h2 {
        font-size: 1.32rem;
    }

    .workspace-tab {
        min-height: 46px;
    }

    .panel-head,
    .section-card-head,
    .agent-card-head,
    .persona-head,
    .question-review-head,
    .section-preview-head,
    .paper-title-row,
    .question-card-head,
    .scope-head {
        gap: 10px;
    }

    .stream-event {
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 8px;
    }

    .history-detail-actions,
    .bank-editor-actions {
        justify-content: stretch;
    }

    .history-detail-actions > *,
    .bank-editor-actions > * {
        width: 100%;
    }
}

/* =====================================================================
   Workflow v3 layer：紧凑 hero + 智能 stepper + 一致 panel footer
   ===================================================================== */

.workspace-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--hero-accent, var(--primary));
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.workspace-header-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.workspace-header-main h2 {
    margin: 0;
    font-size: clamp(1.18rem, 1.6vw, 1.45rem);
    font-weight: 850;
    letter-spacing: 0;
    color: var(--ink);
    line-height: 1.3;
}

.workspace-header-main .eyebrow {
    margin: 0;
    color: var(--hero-accent, var(--primary));
}

.workspace-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid rgba(15, 118, 110, 0.18);
    color: var(--primary-strong);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.meta-pill-soft {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--ink-soft);
}

.meta-pill-error {
    background: var(--red-soft);
    color: var(--red);
    border-color: rgba(189, 61, 47, 0.32);
}

/* M5+：active-combo 顶部"来源 pill" 用 data-tone 切配色（ok / warn）。
   保持和 .meta-pill-soft 一致的几何尺寸，只换颜色，避免布局漂移。 */
.meta-pill[data-tone="ok"] {
    background: var(--primary-soft);
    border-color: rgba(15, 118, 110, 0.28);
    color: var(--primary-strong);
}

.meta-pill[data-tone="warn"] {
    background: rgba(234, 179, 8, 0.18);
    border-color: rgba(234, 179, 8, 0.4);
    color: #7c5e0a;
}

#generatorWorkspace .workspace-hero {
    display: none;
}

/* 智能 stepper：兼具步骤切换 + 状态指示，取代旧的 step-tabs + workflow-phase-board 双重组件 */
.stepper {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-sm);
}

.stepper-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 64px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}

.stepper-item:hover:not(:disabled) {
    background: var(--surface-soft);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.stepper-item:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.stepper-item.is-current {
    border-color: var(--primary-border);
    background: linear-gradient(135deg, var(--primary-soft), rgba(255, 255, 255, 0.94));
    color: var(--primary-strong);
    box-shadow: inset 0 -3px 0 var(--primary), var(--shadow-sm);
}

.stepper-item.is-done .stepper-index {
    background: var(--green);
    color: #fff;
    box-shadow: 0 6px 16px rgba(8, 127, 91, 0.25);
}

.stepper-item.is-done {
    color: var(--ink-soft);
}

.stepper-item.is-pending .stepper-index {
    background: var(--surface-muted);
    color: var(--muted);
}

.stepper-index {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #fff;
    background: var(--primary);
    font-weight: 900;
    font-size: 0.86rem;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.18);
}

.stepper-item:not(.is-current):not(.is-done) .stepper-index {
    background: var(--surface-muted);
    color: var(--muted);
    box-shadow: none;
}

.stepper-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.stepper-text strong {
    font-size: 1.15rem;
    color: inherit;
    font-weight: 850;
}

.stepper-text small {
    color: var(--muted);
    font-size: 0.78rem;
}

.stepper-status {
    margin-left: auto;
    align-self: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
    background: var(--surface-muted);
    white-space: nowrap;
}

.stepper-item.is-current .stepper-status {
    color: #fff;
    background: var(--primary);
}

.stepper-item.is-done .stepper-status {
    color: #166534;
    background: #dcfce7;
}

@media (max-width: 1180px) {
    .stepper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stepper-status { display: none; }
}

/* 命题需求面板：runtime-summary 移入 panel-head 右侧 */
#inputPanel .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    align-items: center;
    gap: 16px;
}

#inputPanel .panel-head > div:first-child {
    min-width: 0;
}

@media (max-width: 760px) {
    #inputPanel .panel-head {
        grid-template-columns: 1fr;
    }
}

.ghost-btn-compact {
    min-height: 36px;
    padding: 6px 12px;
    font-size: 0.84rem;
}

/* fieldset 风格统一 */
.form-card,
.scope-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.6);
    padding: 14px 16px;
    margin: 0 0 14px;
    display: grid;
    gap: 12px;
}

fieldset.form-card,
fieldset.scope-box {
    min-width: 0;
}

.form-card-legend {
    padding: 0 8px;
    color: var(--ink);
    font-size: 0.86rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.scope-hint {
    margin: 0;
}

.scope-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.scope-actions select {
    width: 100%;
}

.scope-list-wrap {
    display: grid;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--line-strong);
}

.scope-list-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.selected-scopes {
    margin: 0;
    padding-top: 0;
    border-top: 0;
}

.selected-scopes .scope-chip {
    padding-right: 28px;
    position: relative;
}

.selected-scopes .scope-chip::after {
    content: "×";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 999px;
    line-height: 14px;
    text-align: center;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.65);
    font-size: 0.85rem;
    font-weight: 800;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.selected-scopes .scope-chip:hover::after {
    background: var(--red-soft);
    color: var(--red);
}

@media (max-width: 760px) {
    .scope-actions {
        grid-template-columns: 1fr;
    }
}

/* panel footer：把 status + actions 收成一致的一行 */
.panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px -20px -20px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.96));
}

.panel-footer .status-box {
    flex: 1 1 220px;
    min-width: 0;
    margin: 0;
}

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

.panel-footer-actions .stream-toggle {
    margin-right: 4px;
}

@media (max-width: 820px) {
    .panel-footer {
        margin: 16px -16px -16px;
        padding: 12px 16px;
        flex-direction: column;
        align-items: stretch;
    }
    .panel-footer .status-box {
        flex: 0 0 auto;
    }
    .panel-footer-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .panel-footer-actions .primary-btn,
    .panel-footer-actions .ghost-btn {
        width: 100%;
    }
}

/* Step 2：parse + spec 改为纵向堆叠以充分利用宽度 */
.step-content-stack {
    display: grid;
    gap: 12px;
}

.step-content-stack .compact-info {
    max-height: none;
    background: rgba(248, 250, 252, 0.65);
}

/* Step 3：分区标题 + soft 信息条 */
.progress-section {
    margin: 0 0 14px;
}

.progress-section-title {
    margin: 0 0 8px;
    color: var(--ink-soft);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.info-box-soft {
    background: var(--surface-soft);
    color: var(--muted);
    border-color: var(--line);
}

/* Step 5：导出按钮 row 内嵌 panel */
.export-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.65);
}

.ghost-btn-archive {
    margin-left: auto;
}

@media (max-width: 760px) {
    .ghost-btn-archive {
        margin-left: 0;
    }
}

/* 移动端：stepper 在一列时使用紧凑布局 */
@media (max-width: 560px) {
    .stepper-item {
        min-height: 54px;
        padding: 8px 10px;
    }
    .stepper-text small {
        display: none;
    }
}

/* 教师卡片紧凑：sidebar 在桌面端不需要这么宽，但响应式时要避免堆得太高 */
@media (max-width: 820px) {
    .nav-bottom .teacher-card {
        order: -1;
    }
}

/* =====================================================================
   Desktop adaptation v4：桌面端浏览器专项适配
   - 仅 >=1024px 生效，平板与移动端布局完全保持不变
   - 解决中等桌面（1024–1599）多栏布局过早收成单列的问题
   - 1600+ 宽屏 / 1920+ 超宽屏放大内容容器，避免桌面端右侧大块留白
   - 桌面专属细节：字体抗锯齿、sticky 侧栏内部滚动、stepper 进度连接线
   ===================================================================== */

/* —— 桌面端字体渲染：中文/英文混排在 macOS / Windows 上都更清晰 —— */
@media (min-width: 1024px) {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* —— 中等桌面 1024–1599：保留多栏布局，避免在 14"–15" 屏上塌成单列 ——
   原断点（history@1320 / bank@1100 / diagnosis@980）在常见的 1366 / 1440
   笔记本上会让右侧大块空白，桌面用户失去多栏对比的优势。 */
@media (min-width: 1024px) and (max-width: 1599px) {
    .history-layout {
        grid-template-columns: minmax(220px, 0.65fr) minmax(220px, 0.65fr) minmax(320px, 1.5fr);
        gap: 16px;
    }
    .bank-layout {
        grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr);
        gap: 16px;
    }
    .diagnosis-layout {
        grid-template-columns: minmax(260px, 0.32fr) minmax(0, 0.68fr);
        gap: 16px;
    }
}

/* —— 中小桌面 1024–1100：history 改为 2 栏 + 全宽详情，避免三栏过窄 —— */
@media (min-width: 1024px) and (max-width: 1100px) {
    .history-layout {
        grid-template-columns: 1fr 1fr;
    }
    .history-layout .history-detail {
        grid-column: 1 / -1;
    }
}

/* —— 宽屏 1600+：放大 sidebar 与外边距，让宽屏不再大块留白 ——
   workspace 已切换为 100% 宽度，这里只负责放大 sidebar 与 padding 节奏 */
@media (min-width: 1600px) {
    .app-shell {
        grid-template-columns: 280px minmax(0, 1fr);
    }
    .workspace {
        padding: 28px clamp(24px, 2.4vw, 40px) 40px;
    }
    .workspace-header {
        padding: 16px 22px;
    }
    .nav-main {
        padding: 24px 14px 18px;
    }
    .history-layout {
        grid-template-columns: minmax(280px, 0.65fr) minmax(280px, 0.65fr) minmax(420px, 1.6fr);
        gap: 18px;
    }
    .bank-layout {
        grid-template-columns: minmax(320px, 0.3fr) minmax(0, 0.7fr);
        gap: 18px;
    }
    .diagnosis-layout {
        grid-template-columns: minmax(280px, 0.28fr) minmax(0, 0.72fr);
        gap: 20px;
    }
}

/* —— 超宽屏 1920+：QHD / 4K 显示器适配，整体节奏更舒展 —— */
@media (min-width: 1920px) {
    .app-shell {
        grid-template-columns: 296px minmax(0, 1fr);
    }
    .workspace {
        padding: 32px clamp(32px, 2.6vw, 56px) 48px;
    }
}

/* —— 桌面端 sticky sidebar：内容多时内部滚动 + 精致滚动条 ——
   原 .side-nav 已经 sticky / height:100dvh，但在低分屏（<900px 高）
   或加了多个工作区入口时，底部 teacher-card 会被截断。 */
@media (min-width: 821px) {
    .side-nav {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(15, 118, 110, 0.32) transparent;
    }
    .side-nav::-webkit-scrollbar {
        width: 6px;
    }
    .side-nav::-webkit-scrollbar-thumb {
        background-color: rgba(15, 118, 110, 0.32);
        border-radius: 999px;
    }
    .side-nav::-webkit-scrollbar-thumb:hover {
        background-color: rgba(15, 118, 110, 0.55);
    }
}

/* —— Stepper 进度连接线：桌面 5 列模式下补一条 8px 横线串联各步骤 ——
   仅在 >=1181px（stepper 仍是 5 列）时显示，避免与 3 列 / 2 列 折行时错位。 */
@media (min-width: 1181px) {
    .stepper-item:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 24px;
        right: -8px;
        width: 8px;
        height: 2px;
        background: var(--line-strong);
        opacity: 0.55;
        pointer-events: none;
        transition: background 0.18s var(--ease), opacity 0.18s var(--ease);
    }
    .stepper-item.is-done:not(:last-child)::before {
        background: var(--green);
        opacity: 0.9;
    }
}


/* —— 桌面端 textarea：常用录入区在大屏给更多写作空间 —— */
@media (min-width: 1280px) {
    .diagnosis-panel textarea {
        min-height: 320px;
    }
    #promptInput {
        min-height: 110px;
    }
}

/* —— 桌面端列表/详情限高：减少 14"–15" 屏上反复滚动 —— */
@media (min-width: 1100px) {
    .stream-timeline-list {
        max-height: 360px;
    }
    .history-list,
    .bank-list {
        max-height: 700px;
    }
    .history-detail-body {
        max-height: 820px;
    }
}

/* —— 桌面端 hover 微交互：仅精确指针设备启用，避免触摸屏 sticky 状态 —— */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    .panel {
        transition: box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
    }
    .meta-pill {
        transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
    }
}

/* =====================================================================
   Fluid workspace v5：自适应窗口模式
   - workspace 已改为 100% 宽度填满主内容区，不再左对齐留出右侧空白
   - 在 >=1440px 宽屏下，form 内的 grid.two 自动扩展为 3+ 列充分利用横向空间
   - 含 span-two 元素的表单（凭证表单、题库编辑表单）显式保持 2 列，避免出现空白格
   - 1920+ 超宽屏给 form-card/scope-box 一个温和的 max-width，避免单个表单字段过长
   ===================================================================== */

/* 宽屏下让普通双列表单能自然扩展，narrow 时退化回 2 列 */
@media (min-width: 1440px) {
    .grid.two {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    
    /* 含跨列字段的表单保持 2 列，避免行末出现空白格 */
    #bankEditorForm .grid.two,
    .bank-item-block .grid.two {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
    
}

/* 4K / 超宽屏：题干文字保留一个舒适阅读宽度，避免一行超过 60 字。
   阅读材料（现代文整篇文章）跟随题目卡片宽度铺满，避免在 1920+ 屏上
   只填左半屏、右侧出现大块空白。 */
@media (min-width: 1920px) {
    .question-stem {
        max-width: 1080px;
    }
}

/* ---- 登录记录 ---- */

.login-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.login-history-table th {
    padding: 8px 10px;
    border-bottom: 2px solid var(--line);
    text-align: left;
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.login-history-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
}

.login-success {
    color: var(--green);
    font-weight: 700;
}

.login-fail {
    color: var(--red);
    font-weight: 700;
}

.login-detail-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- 安全上线整理：只读路由、长文本与移动端操作区 ---- */

.logout-btn {
    margin-top: 8px;
}

.persona-card-readonly {
    min-width: 0;
}

.persona-tag-readonly,
.route-note {
    overflow-wrap: anywhere;
}

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

.route-summary div {
    min-width: 0;
}

.route-summary dt {
    display: inline;
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.route-summary dt::after {
    content: "：";
}

.route-summary dd {
    display: inline;
    margin: 0;
    color: var(--ink);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.history-layout,
.bank-layout,
.diagnosis-layout,
.history-detail,
.bank-editor-panel,
.panel,
.agent-card,
.persona-card {
    min-width: 0;
}

.history-row,
.bank-row,
.provider-card,
.question-card,
.agent-skills,
.question-stem,
.shared-material-text,
.login-detail-cell,
.meta-pill,
.persona-tag,
.info-box,
.status-box,
pre,
code {
    overflow-wrap: anywhere;
}

.login-history-panel {
    overflow-x: auto;
}

.login-history-table {
    min-width: 640px;
}

.panel-footer-actions > button,
.bank-editor-actions > button,
.scope-actions > button {
    min-height: 44px;
}

@media (max-width: 820px) {
    .sticky-actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        backdrop-filter: blur(12px);
    }

    .panel-footer-actions {
        width: 100%;
    }

    .panel-footer-actions > button,
    .panel-footer-actions > .stream-toggle {
        flex: 1 1 100%;
    }

    .route-summary {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Display polish v6: CSS-only refinement for the main workbench.
   Keep behavior untouched: no DOM, route, event, or API assumptions here.
   ===================================================================== */

:root {
    --surface-elevated: #ffffff;
    --surface-panel: rgba(255, 255, 255, 0.98);
    --surface-well: #f3f7f5;
    --line-subtle: rgba(218, 226, 222, 0.72);
    --focus-ring: rgba(15, 118, 110, 0.2);
    --paper-bg: #fffefd;
    --paper-line: rgba(188, 164, 128, 0.18);
    --secondary-border: rgba(49, 95, 136, 0.2);
    --shadow-control: 0 1px 1px rgba(22, 33, 31, 0.04), 0 6px 14px rgba(22, 33, 31, 0.06);
}

body {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0, rgba(246, 248, 251, 0.7) 300px, rgba(246, 248, 251, 0) 560px),
        linear-gradient(90deg, rgba(15, 118, 110, 0.035), rgba(49, 95, 136, 0.035) 52%, rgba(169, 82, 36, 0.026)),
        var(--bg);
}

.main-shell {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 220px),
        transparent;
}

.side-nav {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96)),
        var(--surface-elevated);
}

.brand-row {
    border-bottom-color: var(--line-subtle);
}

.workspace-tab {
    min-width: 0;
    padding-inline: 14px;
}

.workspace-tab .nav-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    background: rgba(99, 115, 109, 0.08);
}

.workspace-tab.is-active .nav-icon {
    color: var(--primary-strong);
    background: rgba(15, 118, 110, 0.12);
}

.workspace-header,
.workspace-hero,
.panel {
    border-color: var(--line-subtle);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
        var(--surface-panel);
}

.workspace-header {
    min-height: 86px;
    padding: 16px 20px;
    box-shadow: var(--shadow-control);
}

.workspace-header-main h2 {
    max-width: 860px;
}

.meta-pill {
    min-height: 34px;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
}

.stepper {
    gap: 6px;
    padding: 6px;
    border-color: var(--line-subtle);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: var(--shadow-control);
}

.stepper-item {
    min-width: 0;
    min-height: 60px;
    padding: 9px 10px;
}

.stepper-text strong {
    font-size: 0.96rem;
    line-height: 1.28;
}

.stepper-status {
    font-size: 0.72rem;
}

.stepper-index {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
}

.stepper-item.is-current {
    background:
        linear-gradient(135deg, rgba(230, 244, 241, 0.98), rgba(255, 255, 255, 0.96)),
        var(--primary-soft);
}

.panel {
    box-shadow: var(--shadow-control);
}

.panel:hover {
    box-shadow: var(--shadow-md);
}

.command-panel,
.flow-panel,
.preview-panel,
.agent-panel,
.diagnosis-guide,
.diagnosis-panel,
.providers-panel,
.active-combo-panel,
.history-papers,
.history-runs,
.history-detail,
.bank-list-panel,
.bank-editor-panel {
    padding: 22px;
}

.panel-head:not(.compact) {
    margin-bottom: 20px;
    padding-bottom: 16px;
}

.panel-head h2,
.panel-head h3 {
    font-weight: 900;
}

.form-card,
.scope-box,
.accordion,
.info-box,
.diagnosis-result,
.audit-card,
.validation-report,
.chief-editor-report,
.history-summary,
.history-section,
.history-call,
.bank-item-block,
.attachment-box {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.68)),
        var(--surface-soft);
}

.form-card,
.scope-box {
    gap: 14px;
    padding: 16px;
}

.form-card-legend {
    border: 1px solid var(--line-subtle);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
}

textarea,
select,
input {
    border-color: rgba(185, 199, 193, 0.92);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 1px rgba(22, 33, 31, 0.03);
}

textarea:focus,
select:focus,
input:focus {
    box-shadow: 0 0 0 4px var(--focus-ring), 0 8px 18px rgba(22, 33, 31, 0.08);
}

.primary-btn,
.ghost-btn,
.regen-btn,
.chip {
    box-shadow: var(--shadow-control);
}

.ghost-btn,
.regen-btn {
    color: var(--primary-strong);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(230, 244, 241, 0.86)),
        var(--primary-soft);
}

.regen-btn {
    min-height: 36px;
}

.chip {
    border-color: var(--line-subtle);
}

.sticky-actions,
.panel-footer {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.98)),
        var(--surface-soft);
}

.paper-preview {
    padding: 14px;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(243, 247, 245, 0.78)),
        var(--surface-well);
}

.paper-preview.empty-state {
    min-height: 240px;
    border-style: dashed;
    color: var(--muted);
}

.preview-meta {
    border-color: var(--paper-line);
    background:
        linear-gradient(180deg, rgba(255, 254, 253, 0.98), rgba(255, 254, 253, 0.94)),
        var(--paper-bg);
    box-shadow: var(--shadow-control);
}

.paper-title-row {
    align-items: center;
    gap: 16px;
}

.paper-title-row h3 {
    font-size: clamp(1.18rem, 1.6vw, 1.48rem);
    font-weight: 900;
}

.section-preview {
    border-color: var(--line-subtle);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-control);
}

.section-preview[open] {
    border-color: rgba(15, 118, 110, 0.18);
}

.section-preview-head {
    align-items: center;
    min-height: 58px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
        var(--surface-soft);
}

.section-preview-head::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    pointer-events: none;
    transition: transform 0.18s var(--ease), border-color 0.18s var(--ease);
}

.section-preview[open] > .section-preview-head::after {
    transform: rotate(225deg);
    border-color: var(--primary);
}

.section-preview-head.no-toggle::after {
    content: none;
}

.section-preview-head h3 {
    font-size: 1rem;
}

.section-head-left {
    flex: 1 1 auto;
}

.section-head-left .section-score,
.question-head .section-score,
.paper-title-row .section-score {
    min-height: 28px;
    border-color: rgba(15, 118, 110, 0.18);
    background: rgba(230, 244, 241, 0.76);
}

.question-list {
    gap: 10px;
    padding: 14px;
}

.question-card,
.question-unit-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 254, 253, 0.94)),
        var(--paper-bg);
    box-shadow: var(--shadow-sm);
}

.question-unit-group {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.76)),
        var(--surface-soft);
}

.question-unit-group > .question-unit-card {
    background: var(--paper-bg);
}

.question-head {
    min-width: 0;
}

.question-head > strong {
    min-width: 0;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 780;
    line-height: 1.72;
}

.question-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7em;
    min-height: 1.7em;
    /* 1. 增加左右内边距，让"十"、"十五"这种 2 字汉字大题号也有呼吸空间。
       2. 不再硬撑 line-height: 1，文字正常垂直对齐即可。 */
    padding: 0 8px;
    margin-right: 8px;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--primary);
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

/* 题干文字保留 1120px 阅读舒适宽度；材料 / 答案跟随题目卡片宽度铺满，
   使其与"题干"视觉对齐而非比题干窄一截。 */
.question-stem,
.question-stem-rich,
.sub-question-list,
.workflow-diagnostics {
    max-width: 1120px;
}

.material-block,
.answer-card {
    max-width: none;
    width: 100%;
}

.question-stem,
.question-stem-rich,
.sub-question-rich .rich-body-text,
.question-card-head .rich-body-text {
    line-height: 1.82;
}

.material-block,
.question-card blockquote {
    border: 1px solid var(--secondary-border);
    border-left: 4px solid var(--secondary);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(234, 242, 250, 0.88), rgba(255, 255, 255, 0.78)),
        var(--secondary-soft);
}

.material-block {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    color: var(--ink-soft);
    line-height: 1.78;
}

.material-block p {
    margin: 0;
}

.material-block p + p {
    padding-top: 8px;
    border-top: 1px dashed rgba(49, 95, 136, 0.18);
}

.sub-question-list {
    margin-top: 4px;
}

/* 长文小题（现代文 / 古诗文 / 综合运用）的子题列表用一个浅色块承接，
   保留 <ol> 默认的 "1." "2." 数字编号。padding-left 必须给 <ol> 默认
   编号留出足够空间——之前用 12px 时，"1.2.3.4" 这种数字 marker
   会因 list-style-position:outside 而被推到 <ol> 边框左侧、
   视觉上落在"小卡片"外面。这里恢复 28px 让 marker 落在卡片内。 */
.unit-subpart-list {
    padding: 10px 14px 10px 28px;
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.72);
}

.answer-card,
.answer-box {
    border-color: rgba(15, 118, 110, 0.18);
    background:
        linear-gradient(180deg, rgba(230, 244, 241, 0.66), rgba(255, 255, 255, 0.82)),
        var(--primary-soft);
}

.answer-card strong,
.answer-box summary {
    color: var(--primary-strong);
}

/* 评分标准（rubric）不再在试卷预览里渲染——配套的 rubric 相关样式块整体删除。
 * 改动详见 web/app.js 中 questionUnitAnswers 上方的整体说明。 */

.question-card-footer {
    gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--line-subtle);
}

.risk-table,
.md-table,
.login-history-table {
    border-radius: var(--radius-md);
    overflow: hidden;
}

.risk-row td {
    background: rgba(255, 255, 255, 0.58);
}

.risk-row-error td {
    background: var(--red-soft);
}

.export-actions-row {
    border-color: var(--line-subtle);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.74)),
        var(--surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.provider-card,
.history-row,
.bank-row,
.guide-item,
.persona-card,
.diagnosis-section-card {
    box-shadow: var(--shadow-sm);
}

.history-row:hover,
.bank-row:hover,
.bank-row.is-active,
.provider-card:hover {
    box-shadow: var(--shadow-control);
}

@media (min-width: 1181px) {
    .stepper-item:not(:last-child)::before {
        top: 29px;
    }
}

@media (max-width: 980px) {
    .paper-title-row,
    .section-preview-head {
        align-items: flex-start;
    }

    .question-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .question-card-footer .repair-btn {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 820px) {
    .command-panel,
    .flow-panel,
    .preview-panel,
    .agent-panel,
    .diagnosis-guide,
    .diagnosis-panel,
    .providers-panel,
    .active-combo-panel,
    .history-papers,
    .history-runs,
    .history-detail,
    .bank-list-panel,
    .bank-editor-panel {
        padding: 16px;
    }

    .paper-preview {
        padding: 10px;
    }

    .section-preview-head {
        flex-wrap: wrap;
    }

    .section-preview-head .regen-btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .workspace-header {
        min-height: 0;
        padding: 14px;
    }

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

    .stepper-item {
        min-height: 52px;
    }



    .paper-preview.empty-state {
        min-height: 180px;
    }
}

/* =====================================================================
   Design System display layer
   只覆盖视觉表达，保留生产 DOM hooks 与 app.js 工作流。
   ===================================================================== */

.workspace-header {
    align-items: flex-end;
    border-left: 4px solid var(--primary);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 249, 0.94)),
        var(--surface);
}

.workspace-header-main {
    gap: 6px;
}

.workspace-header-main h2 {
    font-size: 1.72rem;
    line-height: 1.25;
}

.workspace-header-main .eyebrow,
.panel-kicker,
.form-card-legend,
.scope-list-label {
    letter-spacing: 0;
}

.workspace-header-meta {
    align-self: flex-start;
}

.meta-pill {
    min-height: 32px;
    border-radius: 999px;
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset;
}

.meta-pill-soft {
    background: var(--surface-soft);
    border-color: var(--line);
    color: var(--muted);
}

.stepper {
    gap: 8px;
    padding: 8px;
    border-color: var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.stepper-item {
    min-height: 76px;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-color: var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: none;
}

.stepper-index {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--muted);
    box-shadow: none;
}

.stepper-text {
    gap: 3px;
}

.stepper-text strong {
    font-size: 0.96rem;
    font-weight: 900;
}

.stepper-text small {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.2;
}

.stepper-status {
    align-self: flex-start;
    min-width: 52px;
    padding: 4px 8px;
    color: var(--muted);
    background: var(--surface-soft);
    border: 1px solid var(--line);
}

.stepper-item:hover:not(:disabled) {
    border-color: var(--primary-border);
    background: var(--surface-soft);
    color: var(--ink);
}

.stepper-item.is-current {
    border-color: var(--primary-border);
    background: linear-gradient(135deg, var(--primary-soft), #fff 74%);
    color: var(--primary-strong);
    box-shadow: inset 0 -3px 0 var(--primary), var(--shadow-sm);
}

.stepper-item.is-current .stepper-index,
.stepper-item.is-done .stepper-index {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(15, 118, 110, 0.6);
}

.stepper-item.is-done {
    color: var(--ink);
    border-color: var(--primary-border);
}

.stepper-item.is-done .stepper-status {
    color: var(--primary-strong);
    background: var(--primary-soft);
    border-color: var(--primary-border);
}

@media (min-width: 1181px) {
    .stepper-item:not(:last-child)::before {
        top: 36px;
        background: var(--line);
    }

    .stepper-item.is-done:not(:last-child)::before {
        background: var(--primary-border);
    }
}

.form-card,
.scope-box {
    border-color: var(--line);
    background: var(--surface-soft);
    box-shadow: var(--shadow-sm);
}

.scope-box {
    background: #fff;
}

#moduleSuggestions.chip-row {
    gap: 6px;
    margin-bottom: 10px;
}

#moduleSuggestions .chip {
    border-style: dashed;
    background: #fff;
}

#moduleSuggestions .chip:hover {
    border-style: solid;
    border-color: var(--primary-border);
    color: var(--primary-strong);
    background: var(--primary-soft);
}

.scope-list-wrap {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(248, 250, 252, 0.72);
}

.selected-scopes .scope-chip {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: var(--primary-strong);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) inset;
}

.panel-footer {
    border-top: 1px solid var(--line);
}

.generator-status.status-box,
.status-box {
    border-radius: var(--radius-sm);
}

.generator-status.status-box {
    color: #fff;
    background: linear-gradient(110deg, var(--primary), var(--primary-strong) 35%, var(--accent) 70%, var(--primary));
    background-size: 220% 100%;
    animation: statusFlow 6s ease-in-out infinite;
    box-shadow: 0 12px 22px -12px rgba(15, 118, 110, 0.55);
}

.stream-timeline {
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.stream-timeline-head {
    padding: 12px 14px;
    background: #fff;
}

.stream-timeline-head strong {
    color: var(--primary-strong);
    font-weight: 900;
}

.stream-timeline-list {
    padding: 12px 14px;
    gap: 6px;
}

.stream-event {
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}

.stream-event-time {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.stream-event-body strong {
    color: var(--ink);
    font-weight: 850;
}

.stream-event-body strong::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--primary);
    vertical-align: 0.08em;
}

.stream-event-section_completed .stream-event-body strong::before,
.stream-event-paper_finalized .stream-event-body strong::before {
    background: var(--green);
}

.stream-event-section_fallback .stream-event-body strong::before,
.stream-event-error .stream-event-body strong::before {
    background: var(--amber);
}

.stream-event-error {
    border-color: #fecaca;
    background: var(--red-soft);
}

.stream-event-error .stream-event-body strong::before {
    background: var(--red);
}

.export-actions-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.export-actions-row > button {
    position: relative;
    display: grid;
    justify-content: start;
    align-content: start;
    min-height: 98px;
    padding: 42px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    text-align: left;
    white-space: normal;
}

.export-actions-row > button:hover:not(:disabled) {
    border-color: var(--primary-border);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), #fff 70%);
    box-shadow: var(--shadow-md);
}

.export-actions-row > button::before {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-strong);
    border: 1px solid var(--primary-border);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

#renderDocxBtn::before {
    content: "Word";
}

#renderPdfBtn::before {
    content: "PDF";
}

#renderHtmlBtn::before {
    content: "网页";
}

#archiveBtn::before {
    content: "归档";
}

.export-actions-row > button::after {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.45;
}

#renderDocxBtn::after {
    content: "可在 Word 中继续排版";
}

#renderPdfBtn::after {
    content: "用于打印与定稿流转";
}

#renderHtmlBtn::after {
    content: "在线预览，保留网页样式";
}

#archiveBtn::after {
    content: "保存本次命题过程";
}

#renderDocxBtn {
    border-color: var(--primary-border);
    border-left: 4px solid var(--primary);
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), #fff 70%);
}

.ghost-btn-archive {
    margin-left: 0;
}

#renderExportResult {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}

@media (max-width: 1180px) {
    .export-actions-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .workspace-header-main h2 {
        font-size: 1.25rem;
    }

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

    .stepper-item {
        min-height: 60px;
    }

    .stepper-status {
        display: inline-flex;
    }

    .stream-event {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .export-actions-row {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Agent workspace: workflow flow + 一一对齐的调用点与智能体详情卡
   ===================================================================== */

/* 竖排流程：每个 route 渲染成一行 .agent-flow-row，左列是调用点芯片，
   右列是对应的智能体详情卡，两列宽度通过 grid-template-columns 锁定，
   避免长描述把左侧序号挤变形。窄屏（<720px）退化为上下堆叠。 */
.agent-flow-aligned {
    margin-top: 12px;
}

.agent-flow-aligned-vertical {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.agent-flow-row {
    display: grid;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.agent-flow-row > .agent-flow-step-cell,
.agent-flow-row > .agent-flow-card-cell {
    min-width: 0;
}

.agent-flow-row > .agent-flow-step-cell {
    display: flex;
}

.agent-flow-row > .agent-flow-step-cell > .agent-flow-step {
    flex: 1;
    width: 100%;
}

@media (max-width: 720px) {
    .agent-flow-row {
        grid-template-columns: 1fr;
    }
}

.agent-flow-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong, rgba(15, 118, 110, 0.18));
    border-radius: 12px;
    background: rgba(15, 118, 110, 0.06);
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1.25;
    position: relative;
    min-width: 0;
}

.agent-flow-step-local {
    background: rgba(124, 58, 237, 0.06);
    border-color: rgba(124, 58, 237, 0.28);
}

.agent-flow-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-strong, #0f766e);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.agent-flow-step-local .agent-flow-step-index {
    background: #7c3aed;
}

.agent-flow-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.agent-flow-step-body strong {
    font-weight: 800;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.agent-flow-step-body small {
    color: var(--muted, #6f7c79);
    font-size: 0.7rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.persona-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.persona-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--primary-soft, rgba(15, 118, 110, 0.12));
    color: var(--primary-strong, #0f766e);
    border: 1px solid var(--primary-border, rgba(15, 118, 110, 0.24));
    font-weight: 800;
    font-size: 0.78rem;
}

.agent-route-card-local .persona-step-index {
    background: rgba(124, 58, 237, 0.1);
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.3);
}

.agent-route-card-local {
    background: rgba(124, 58, 237, 0.04);
}

/* "系统级调用点 · 模型与智能体明细"卡片：
   承接顶部"调用点"概览中被折叠掉的厂商 / 模型信息。
   按用户要求取消整卡背景填充，只保留 .agent-card 的默认白底，
   与上方"命题工作流"概览卡片视觉重量一致。 */

/* 命题工作流 / 试卷体检 各自独占一行，组与组之间留出气口。
   每个 section 内部用 grid 等分本组的子卡片；窄屏由父 .agent-systemroles-section
   的 overflow-x:auto 横向滚动，避免被换行打散。 */
.agent-systemroles-section + .agent-systemroles-section {
    margin-top: 16px;
}

.agent-systemroles-section-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft, #475569);
    letter-spacing: 0.02em;
}

.agent-systemroles-section {
    overflow-x: auto;
}

.agent-systemroles-grid {
    /* 子卡片数量 = 该组路由数；用 auto-flow:column + grid-auto-columns 强制单行平铺。
       不再依赖 auto-fit（多行）或 repeat(N, …)（要在 JS 里塞 inline style）。 */
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 1fr);
    grid-template-columns: none;
    margin-top: 0;
}

.agent-systemrole-card .route-summary {
    margin-top: 10px;
}

/* 命题工作流 / 试卷体检 详情卡片在竖排流程中已经天然按行 1↔1 对齐
   （由 .agent-flow-row 的两列 grid 控制），不再需要额外横向布局保护。 */

/* 题型卡片内的"通用单题流水线 / 长文流水线专属节点"两段式分组
   ——上段沿用原 4 个固定 persona 卡（命题 / 候选排序 / 审稿 / 返修），
     下段仅在该题型 applicable_question_types 命中长文流水线时出现。
   两段共享同一段标签字号，与"系统级调用点"段落保持视觉口径一致。 */
.agent-questiontype-section + .agent-questiontype-section {
    margin-top: 16px;
}

.agent-questiontype-section-label {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-soft, #475569);
    letter-spacing: 0.02em;
}

/* 长文专属节点区段：与 .agent-questiontype-section 视觉口径完全一致，
   不再用紫色高亮强调，仅通过段落标题文案区分通用 / 长文流水线。 */

/* 长文流水线 3 个节点同 .persona-grid 默认 auto-fit 排布即可，
   只在节点描述较长时给一点最小宽度兜底，避免触发频繁换行抖动。 */
.agent-longform-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.agent-longform-trigger {
    margin-top: 8px;
    color: var(--ink-soft, #475569);
    font-size: 0.78rem;
}