:root {
  color-scheme: light;
  --ink: #102a43;
  --muted: #627d98;
  --paper: #f4f7fb;
  --card: #ffffff;
  --accent: #087e8b;
  --accent-dark: #075c64;
  --line: #d9e2ec;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at top right, #d9f0ee, var(--paper) 45%); min-height: 100vh; }
.shell { max-width: 1280px; margin: 0 auto; padding: 4vw; }
.login-card { width: min(440px, 100%); margin: 8vh auto; padding: 40px; border-radius: 24px; background: var(--card); box-shadow: 0 24px 80px #102a4320; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); }
h2 { margin-top: 0; font-size: 18px; }
.muted { color: var(--muted); line-height: 1.7; }
form { display: grid; gap: 18px; margin-top: 28px; }
label { display: grid; gap: 8px; font-size: 14px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 13px; color: var(--ink); background: white; font: inherit; }
textarea { min-height: 96px; resize: vertical; }
button { border: 0; border-radius: 10px; padding: 12px 18px; color: white; background: var(--accent); font: inherit; font-weight: 750; cursor: pointer; }
button:hover { background: var(--accent-dark); }
button.secondary { color: var(--ink); background: #eaf0f5; }
button.danger { background: #b42318; }
button.danger:hover { background: #8f1d14; }
button.small-button { padding: 7px 10px; font-size: 12px; }
.error { min-height: 20px; color: #b42318; }
.hidden, .view { display: none; }
header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.actions { display: flex; align-items: center; gap: 12px; }
nav { display: flex; gap: 8px; overflow-x: auto; margin: 30px 0; padding-bottom: 8px; }
nav button { color: var(--muted); background: transparent; white-space: nowrap; }
nav button.active { color: white; background: var(--ink); }
.active-view { display: block; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric, .panel { border: 1px solid #ffffff; border-radius: 16px; background: #ffffffcc; box-shadow: 0 8px 30px #102a430b; }
.metric { padding: 20px; }
.metric strong { display: block; margin-top: 10px; font-size: 28px; }
.panel { padding: 22px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
#knowledge-files-table td:nth-child(3) { min-width: 300px; max-width: 560px; white-space: normal; line-height: 1.55; overflow-wrap: anywhere; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
pre { white-space: pre-wrap; word-break: break-word; }
.knowledge-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.knowledge-layout .full-width { grid-column: 1 / -1; }
.ingestion-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(460px, 1.2fr); gap: 18px; }
.ingestion-layout .full-width { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
details { border: 1px solid var(--line); border-radius: 10px; padding: 13px; }
summary { color: var(--muted); cursor: pointer; font-weight: 700; }
.consent-row { grid-template-columns: 20px 1fr; align-items: start; line-height: 1.6; font-weight: 500; }
.consent-row input { width: auto; margin-top: 4px; }
.review-table td { max-width: 360px; white-space: normal; vertical-align: top; line-height: 1.55; }
.row-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.progress-track { width: 120px; height: 7px; overflow: hidden; border-radius: 99px; background: #e3ebf2; }
.progress-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.knowledge-card { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdff; }
.knowledge-card h3 { margin: 0 0 10px; font-size: 16px; }
.knowledge-card p { margin: 7px 0; line-height: 1.65; }
.pill { display: inline-block; margin: 2px 4px 2px 0; padding: 3px 8px; border-radius: 99px; color: #075c64; background: #dff4f1; font-size: 12px; }
.inline-form { grid-template-columns: 1fr auto; align-items: end; }
.inline-form textarea { min-height: 76px; }
.compact-form { margin-top: 16px; }
.notice { margin-top: 18px; padding: 13px 15px; border-radius: 10px; color: #7a4a00; background: #fff6df; line-height: 1.6; }
.small { font-size: 13px; }
.status-message { min-height: 22px; color: var(--accent-dark); line-height: 1.6; }
.lead-panel { background: linear-gradient(135deg, #ffffff 0%, #f2faf9 100%); }
.lead-toolbar { display: flex; align-items: end; gap: 10px; min-width: 330px; }
.lead-toolbar label { min-width: 205px; }
.lead-metrics { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 4px; }
.lead-metric { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.lead-metric span { color: var(--muted); font-size: 12px; }
.lead-metric strong { display: block; margin-top: 6px; font-size: 25px; }
.lead-metric.lead-a { border-color: #efb7af; background: #fff5f3; }
.lead-metric.lead-b { border-color: #f0d58c; background: #fffaf0; }
.lead-metric.lead-c { border-color: #cdd9e4; background: #f7fafc; }
.lead-metric.lead-reviewed { border-color: #a9d8ce; background: #f1fbf8; }
.lead-table { margin-top: 8px; }
.lead-table table { min-width: 1240px; }
.lead-table td { vertical-align: top; line-height: 1.55; }
.lead-summary { min-width: 260px; max-width: 380px; white-space: normal; }
.lead-evidence { min-width: 230px; max-width: 340px; white-space: normal; }
.lead-evidence details { padding: 9px 11px; background: #fff; }
.lead-evidence p { margin: 8px 0 0; }
.evidence-quote { color: #43576a; font-size: 12px; overflow-wrap: anywhere; }
.lead-action { min-width: 220px; max-width: 300px; white-space: normal; }
.lead-badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.lead-badge.lead-a { color: #9f241b; background: #fee4e2; }
.lead-badge.lead-b { color: #8a5200; background: #fff0c7; }
.lead-badge.lead-c { color: #43576a; background: #e9eef3; }
.lead-review-actions { min-width: 180px; }
.lead-review-actions .small { flex-basis: 100%; white-space: normal; }
.answer-box { margin-top: 18px; padding: 18px; border: 1px solid #b8ded9; border-radius: 12px; background: #f1fbfa; line-height: 1.75; white-space: pre-wrap; }
.batch-import-box { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.batch-import-box h3 { margin: 0 0 8px; font-size: 17px; }
.paste-import-box { margin: 18px 0 24px; padding: 18px; border: 1px solid #b9dfcf; border-radius: 14px; background: linear-gradient(135deg, #f3fcf8, #eef8fb); }
.paste-import-box form { margin-top: 14px; }
.paste-import-box textarea { min-height: 190px; line-height: 1.65; }
.batch-progress { height: 8px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: #e3ebf2; }
.batch-progress div { width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.import-command-center { background: linear-gradient(135deg, #ffffff 0%, #eefaf8 100%); }
.refresh-control { display: grid; justify-items: end; gap: 8px; min-width: 180px; }
.refresh-control button { min-width: 126px; transition: transform .15s ease, background .15s ease; }
.refresh-control button:not(:disabled):active { transform: translateY(1px) scale(.98); }
.refresh-control button.is-loading { color: #075c64; background: #d9f1ee; }
.refresh-status { min-height: 20px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: right; }
.refresh-status.success { color: #176b45; }
.refresh-status.error { color: #b42318; }
.import-command-center.refresh-complete { box-shadow: 0 0 0 3px #9edbd344, 0 8px 30px #102a430b; }
.import-overview { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 12px; margin: 20px 0; }
.import-stat { padding: 16px; border: 1px solid #d7ece9; border-radius: 14px; background: #ffffffd9; }
.import-stat span { display: block; color: var(--muted); font-size: 12px; }
.import-stat strong { display: block; margin-top: 7px; color: var(--ink); font-size: 24px; }
.import-stat.attention { border-color: #f3d28d; background: #fff9eb; }
.import-stat.good { border-color: #b9dfcf; background: #f0fbf6; }
.import-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.import-guidance div { display: grid; gap: 5px; padding: 13px 15px; border-radius: 12px; background: #f5f8fb; }
.import-guidance strong { font-size: 13px; }
.import-guidance span { color: var(--muted); font-size: 12px; line-height: 1.55; }
.import-toolbar { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1fr) minmax(300px, 1.35fr); gap: 14px; align-items: end; margin-top: 18px; }
.bulk-review-action { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.bulk-review-action span { line-height: 1.45; }
#import-jobs-table table { min-width: 830px; }
#import-jobs-table tr.selected-task { background: #eaf8f6; }
#import-jobs-table tr:hover td { background: #f6fbfb; }
.task-name { display: grid; gap: 4px; min-width: 190px; white-space: normal; }
.task-name strong { font-size: 14px; }
.task-name span { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.task-advice { max-width: 260px; color: var(--muted); white-space: normal; line-height: 1.5; }
.status-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.status-chip.processing { color: #075c64; background: #dff4f1; }
.status-chip.review { color: #8a5200; background: #fff0c7; }
.status-chip.ready { color: #176b45; background: #ddf6e8; }
.status-chip.failed { color: #9f241b; background: #fee4e2; }
.status-chip.cancelled { color: #52606d; background: #e9eef3; }
.import-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.import-pagination .page-actions { display: flex; gap: 8px; }
.import-pagination button:disabled, button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 640px) { .shell { padding: 20px; } .login-card { padding: 26px; } header { align-items: flex-start; flex-direction: column; } }
@media (max-width: 860px) { .knowledge-layout { grid-template-columns: 1fr; } .knowledge-layout .full-width { grid-column: auto; } }
@media (max-width: 960px) { .ingestion-layout { grid-template-columns: 1fr; } .ingestion-layout .full-width { grid-column: auto; } .inline-form { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .import-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .import-guidance, .import-toolbar { grid-template-columns: 1fr; } .bulk-review-action { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .lead-metrics { grid-template-columns: repeat(2, minmax(130px, 1fr)); } .lead-toolbar { min-width: 0; width: 100%; align-items: stretch; flex-direction: column; } }
@media (max-width: 640px) { .option-grid { grid-template-columns: 1fr; } .panel-heading { flex-direction: column; } .refresh-control { justify-items: start; } .refresh-status { text-align: left; } }
/* Artificial-assistance requests are rendered only with textContent. */
.support-item { border-top: 1px solid #dbe5e8; padding: 1rem 0; overflow-wrap: anywhere; }
.support-item h3 { margin: 0 0 .5rem; }
.support-item label { display: block; margin: .75rem 0; }
.support-item textarea { width: 100%; }
.support-item .actions { flex-wrap: wrap; }
.knowledge-source-editor { border: 1px solid #dbe5e8; border-radius: 16px; padding: 1.25rem; margin-top: 1rem; overflow-wrap: anywhere; }
.knowledge-source-editor form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.knowledge-source-editor label { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.knowledge-source-editor .actions { grid-column: 1 / -1; flex-wrap: wrap; }
.knowledge-source-editor input[type="checkbox"] { align-self: flex-start; width: auto; }
@media (max-width: 700px) { .knowledge-source-editor form { grid-template-columns: 1fr; } }