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

:root {
    --bg: var(--canvas);
    --border: var(--hairline);
    --text-muted: var(--ink-4);
    --ink: var(--ink-1);
    --ink-soft: var(--ink-2);
    --muted: var(--ink-4);
    --muted-light: var(--ink-5);
    --line: var(--hairline);
    --line-strong: var(--hairline-strong);
    --primary-border: var(--brand-200);
    --red-soft: var(--danger-soft);
    --secondary-border: var(--info-border);
    --surface-elevated: var(--surface);
    --surface-panel: var(--surface);
    --surface-well: var(--canvas-deep);
    --line-subtle: var(--hairline);
    --focus-ring: rgba(15, 118, 110, 0.22);
    --paper-bg: #fffefd;
    --paper-line: rgba(169, 82, 36, 0.18);
    --shadow-brand: var(--shadow-brand-glow);
    --shadow-control: var(--shadow-sm);
    --ease: var(--ease-out);
    --ease-card: var(--ease-out);
    --ls-display: 0;
    --ls-tight: 0;
    --ls-cn: 0;
}

html {
    background: var(--canvas);
    font-family: var(--font-sans);
}

body:not(.login-body) {
    color: var(--ink-2);
    background: var(--canvas);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    color: var(--ink-1);
    background: rgba(15, 118, 110, 0.18);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.app-shell {
    background: var(--canvas);
}

.main-shell {
    background: var(--canvas);
}

.side-nav {
    border-right-color: var(--hairline);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
}

.brand-row {
    height: auto;
    align-items: center;
    gap: 12px;
    padding: 22px 22px 18px;
    border-bottom: 0;
}

.brand-mark,
.login-brand-mark {
    border-radius: 10px;
    background: var(--grad-brand);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 8px 16px -6px rgba(15, 118, 110, 0.40);
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: 0;
}

.brand-mark {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

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

.brand-row strong {
    font-size: 15px;
    line-height: 1.2;
}

.brand-row span:last-child,
.teacher-card small {
    color: var(--ink-5);
    font-size: 11px;
    font-weight: 500;
}

.nav-main,
.nav-bottom {
    gap: 2px;
}

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

.nav-main::before {
    padding: 14px 10px 10px;
    color: var(--ink-5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.nav-bottom {
    padding: 12px;
    border-top-color: var(--hairline);
    background: transparent;
}

.workspace-tab {
    min-height: 44px;
    gap: 12px;
    border: 0;
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
    transition:
        background var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.workspace-tab:hover {
    color: var(--ink-1);
    background: var(--canvas-deep);
    transform: none;
}

.workspace-tab.is-active {
    color: var(--brand-700);
    background: var(--brand-50);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--brand-500);
    font-weight: 600;
}

.nav-icon,
.workspace-tab .nav-icon {
    width: 18px;
    height: 18px;
    color: var(--ink-5);
    background: transparent;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
}

.workspace-tab.is-active .nav-icon {
    color: var(--brand-500);
    background: transparent;
}

.teacher-card {
    gap: 10px;
    padding: 10px 12px;
    border-color: var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
    box-shadow: none;
}

.teacher-card > span {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: var(--brand-600);
    background: var(--brand-50);
    font-weight: 600;
}

.logout-btn {
    justify-self: center;
    color: var(--ink-4);
    background: transparent;
    box-shadow: none;
}

.workspace {
    padding: 32px 36px 40px;
}

.workspace.is-active {
    animation: pageIn var(--dur-page) var(--ease-out) both;
}

.workspace-header {
    align-items: flex-end;
    gap: 24px;
    min-height: 0;
    margin: 0 0 28px;
    padding: 0 0 22px;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

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

.eyebrow,
.panel-kicker,
.workspace-header-main .eyebrow,
.form-card-legend,
.scope-list-label {
    color: var(--brand-600);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.workspace-header-main h2 {
    max-width: 760px;
    color: var(--ink-1);
    font: 700 30px/1.2 var(--font-serif);
    letter-spacing: 0;
}

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

.meta-pill {
    min-height: 26px;
    padding: 0 12px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    background: var(--canvas-deep);
    color: var(--ink-3);
    box-shadow: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
}

.meta-pill-soft {
    background: var(--canvas-deep);
    border-color: var(--hairline);
    color: var(--ink-3);
}

.meta-pill[data-tone="ok"],
.meta-pill-brand {
    background: var(--brand-50);
    border-color: var(--hairline-brand);
    color: var(--brand-700);
}

.meta-pill[data-tone="warn"] {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}

.meta-pill-error {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.stepper {
    gap: 8px;
    margin-bottom: 24px;
    padding: 8px;
    border-color: var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.stepper-item {
    min-height: 68px;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ink-3);
    box-shadow: none;
    transition:
        background var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.stepper-item:hover:not(:disabled) {
    border-color: var(--brand-200);
    background: var(--brand-50);
    color: var(--brand-700);
    transform: none;
}

.stepper-index {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    color: var(--ink-4);
    background: var(--canvas-deep);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
}

.stepper-text strong {
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.28;
}

.stepper-text small {
    color: var(--ink-4);
    font-size: 11px;
    line-height: 1.25;
}

.stepper-status {
    min-width: 52px;
    padding: 4px 8px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    color: var(--ink-4);
    background: var(--surface);
    font-size: 11px;
    font-weight: 500;
}

.stepper-item.is-current {
    border-color: var(--hairline-brand);
    background: var(--brand-50);
    color: var(--brand-700);
    box-shadow: inset 3px 0 0 var(--brand-500);
}

.stepper-item.is-current .stepper-index,
.stepper-item.is-done .stepper-index {
    color: #fff;
    background: var(--brand-500);
    box-shadow: none;
}

.stepper-item.is-current .stepper-status,
.stepper-item.is-done .stepper-status {
    color: var(--brand-700);
    background: var(--surface);
    border-color: var(--hairline-brand);
}

.panel,
.workspace-hero {
    border-color: var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}

.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: 24px 26px;
}

.command-panel::before {
    background: linear-gradient(90deg, var(--brand-500), var(--clay-500));
}

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

.panel-head h2,
.panel-head h3,
.section-preview h3 {
    color: var(--ink-1);
    font-weight: 600;
}

.panel-head h2 {
    font-size: 22px;
}

.minor-text,
.agent-skills,
.history-detail-empty-sub,
.bank-editor-empty-sub {
    color: var(--ink-4);
    font-size: 13px;
    line-height: 1.6;
}

.form-card,
.scope-box,
.accordion,
.agent-card,
.persona-card,
.guide-item,
.diagnosis-result,
.info-box,
.status-box,
.diagnosis-section-card,
.question-card,
.audit-card,
.history-summary,
.history-section,
.history-call,
.bank-item-block,
.attachment-box,
.provider-card,
.history-row,
.bank-row {
    border-color: var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

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

.field span,
.mini-field span,
.field-label,
.login-field-label {
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
}

textarea,
select,
input,
.login-field input {
    border-color: var(--hairline-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-1);
    background: var(--surface);
    box-shadow: none;
    transition:
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out);
}

textarea::placeholder,
input::placeholder,
.login-field input::placeholder {
    color: var(--ink-5);
}

textarea:focus,
select:focus,
input:focus,
.login-field input:focus {
    border-color: var(--brand-500);
    background: var(--surface);
    box-shadow: 0 0 0 4px var(--focus-ring);
}

.primary-btn,
.ghost-btn,
.regen-btn,
.login-submit {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0;
    transition:
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out);
}

.primary-btn,
.login-submit {
    background: var(--grad-brand);
    box-shadow: none;
}

.primary-btn:hover:not(:disabled),
.login-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-brand-glow);
}

.ghost-btn,
.regen-btn {
    color: var(--brand-700);
    background: var(--brand-50);
    box-shadow: none;
}

.ghost-btn:hover:not(:disabled),
.regen-btn:hover:not(:disabled) {
    color: var(--brand-700);
    background: var(--brand-100);
    box-shadow: none;
    transform: none;
}

.danger-btn,
.danger-zone .ghost-btn {
    color: var(--danger);
    background: var(--danger-soft);
}

.chip,
.bank-type-chip,
.history-status-badge,
.status-badge,
.persona-tag,
.section-score,
.question-number,
.history-meta-chip,
.bank-meta-chip,
.bank-row__pill,
.history-row__pill {
    border-color: var(--hairline);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-3);
    box-shadow: none;
    font-weight: 500;
}

.chip:hover,
.bank-type-chip:hover,
.bank-type-chip.is-active,
.chip.is-selected,
.selected-scopes .scope-chip,
.bank-row.is-active .bank-row__pill,
.bank-row:hover .bank-row__pill,
.history-row.is-selected .history-row__pill {
    border-color: var(--hairline-brand);
    background: var(--brand-50);
    color: var(--brand-700);
}

.scope-list-wrap,
.stream-timeline,
.paper-preview {
    border-color: var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--canvas-deep);
}

.status-box,
.generator-status.status-box {
    color: var(--brand-700);
    border-color: var(--hairline-brand);
    background: var(--brand-50);
    box-shadow: none;
}

.generator-status.status-box {
    animation: none;
}

.generator-status.is-error,
.status-box.status-box-error {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-soft);
}

.stream-event,
.section-preview,
.question-card,
.question-unit-card,
.provider-card,
.history-row,
.bank-row {
    border-color: var(--hairline);
    background: var(--surface);
    box-shadow: none;
}

.stream-event-body strong::before,
.question-index {
    background: var(--brand-500);
}

.material-block,
.question-card blockquote {
    border-color: var(--info-border);
    border-left-color: var(--navy-500);
    background: var(--info-soft);
}

.answer-card,
.answer-box {
    border-color: var(--hairline-brand);
    background: var(--brand-50);
}

.history-row:hover,
.bank-row:hover,
.bank-row.is-active,
.provider-card:hover {
    border-color: var(--hairline-brand);
    background: var(--brand-50);
    box-shadow: none;
}

.history-detail-empty-icon,
.bank-editor-empty-icon {
    color: var(--brand-600);
    background: var(--brand-50);
}

.export-actions-row {
    background: transparent;
}

.export-actions-row > button {
    border-color: var(--hairline);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink-1);
    box-shadow: none;
}

.export-actions-row > button:hover:not(:disabled) {
    border-color: var(--hairline-brand);
    background: var(--brand-50);
    box-shadow: var(--shadow-md);
}

.export-actions-row > button::before {
    border-color: var(--hairline-brand);
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
}

body.login-body {
    color: var(--ink-2);
    background: var(--canvas);
    font-family: var(--font-sans);
}

body.login-body::before {
    background: radial-gradient(circle, rgba(15, 118, 110, 0.20), rgba(15, 118, 110, 0) 70%);
}

body.login-body::after {
    background: radial-gradient(circle, rgba(49, 95, 136, 0.16), rgba(49, 95, 136, 0) 70%);
}

.bg-grid {
    background-image:
        linear-gradient(rgba(15, 23, 21, 0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 21, 0.026) 1px, transparent 1px);
}

.login-card {
    border-color: var(--hairline);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-xl);
}

.login-brand-mark {
    width: 60px;
    height: 60px;
    font-size: 24px;
}

.login-title {
    color: var(--ink-1);
    font: 700 30px/1.12 var(--font-serif);
    letter-spacing: 0;
    padding-left: 0;
}

.login-subtitle {
    color: var(--ink-5);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    padding-left: 0;
}

.login-divider {
    background: var(--grad-hairline);
}

.login-input-wrap svg {
    color: var(--ink-5);
}

.login-input-wrap:focus-within svg {
    color: var(--brand-500);
}

.login-error {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger-border);
}

.login-footer-brand {
    color: var(--ink-5);
}

@media (max-width: 1320px) {
    .workspace {
        padding: 28px 28px 36px;
    }
}

@media (max-width: 820px) {
    .side-nav {
        border-bottom-color: var(--hairline);
    }

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

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

    .workspace-header {
        align-items: stretch;
        gap: 14px;
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .workspace-header-main h2 {
        font-size: 24px;
    }

    .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;
    }
}

@media (max-width: 620px) {
    .workspace-header-main h2 {
        font-size: 22px;
    }

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