:root { color-scheme: light; --ink: #172033; --muted: #667085; --line: #e4e7ec; --surface: #f8fafc; --accent: #2952cc; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; font: 15px/1.5 system-ui, -apple-system, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display: flex; align-items: center; gap: 2rem; min-height: 60px; padding: 0 2rem; border-bottom: 1px solid var(--line); }
.topbar .brand { color: var(--ink); font-size: 18px; font-weight: 700; }
.topbar nav { display: flex; gap: 1.25rem; flex: 1; }
main { max-width: 1280px; margin: 0 auto; padding: 2rem; }
.page-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
h1 { margin: 0 0 .25rem; font-size: 28px; }
h2 { margin-top: 2rem; }
p { color: var(--muted); }
.button, input[type=submit] { display: inline-block; border: 0; border-radius: 6px; padding: .65rem 1rem; background: var(--accent); color: #fff; cursor: pointer; }
.link-button { border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.filters { display: flex; gap: .75rem; padding: 1rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
input, select, textarea { width: 100%; padding: .65rem; border: 1px solid #cfd4dc; border-radius: 6px; background: #fff; font: inherit; }
.filters input, .filters select { max-width: 300px; }
label { display: block; max-width: 680px; margin: 0 0 1rem; font-weight: 600; }
label input, label select, label textarea { margin-top: .35rem; font-weight: 400; }
.forum-form { max-width: 680px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td small { display: block; color: var(--muted); }
.list-heading { display: block; color: #111; font-size: 17px; font-weight: 700; line-height: 1.3; }
.forum-identity { display: inline-flex; align-items: center; gap: .4rem; }
.forum-icon { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 3px; object-fit: contain; }
.direct-link { display: block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engagement { display: flex; gap: .7rem; align-items: center; white-space: nowrap; }
.engagement-item { display: inline-flex; gap: .25rem; align-items: center; color: var(--muted); }
.engagement-item svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.status { display: inline-block; padding: .15rem .45rem; border-radius: 999px; background: #eef2ff; font-size: 12px; }
.details { display: grid; grid-template-columns: 180px 1fr; gap: .75rem 1.5rem; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }
.notice { padding: .75rem 1rem; border: 1px solid #a7d7b5; background: #effaf2; border-radius: 6px; color: #185c2d; }
.alert { padding: .75rem 1rem; border: 1px solid #efb3b3; background: #fff1f1; border-radius: 6px; color: #8f1d1d; }
.secondary-button, input.secondary-button { border: 1px solid #cfd4dc; background: #fff; color: var(--ink); }
.compact-button { padding: .45rem .65rem; white-space: nowrap; }
.bulk-review { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 2fr) auto; gap: .75rem; align-items: center; padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.checkbox-column { width: 42px; }
.review-table input[type=checkbox] { width: auto; }
.status-success { background: #e9f8ee; color: #1f6b37; }
.status-failed { background: #fff0f0; color: #9f1b1b; }
.status-stale { background: #fff7e6; color: #8a5a00; }
.status-running { background: #eef2ff; color: #334eae; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.metric { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.metric span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.metric strong { display: block; overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.crawl-section { margin-top: 2.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.section-heading h2, .section-heading p { margin: 0; }
.section-heading > span { color: var(--muted); white-space: nowrap; }
.pagination { display: flex; justify-content: center; gap: 1.25rem; margin-top: 1.5rem; color: var(--muted); }
.empty-state { padding: 3rem 1rem; text-align: center; border-bottom: 1px solid var(--line); }
.empty-state h2 { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.errors { margin-bottom: 1rem; padding: .75rem; color: #9f1b1b; background: #fff1f1; }
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem; background: var(--surface); }
.auth-card { width: min(100%, 420px); padding: 2rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 12px 40px rgba(23, 32, 51, .08); }
.auth-brand { display: inline-block; margin-bottom: 2rem; color: var(--ink); font-size: 18px; font-weight: 700; }
.auth-card input[type=submit] { width: 100%; }
.auth-footer { margin: 1.25rem 0 0; }
pre { white-space: pre-wrap; }
.ranking-callout { padding: 1rem; border: 1px solid #c7d2fe; border-radius: 8px; background: #f5f7ff; color: #344054; }
.ranking-section { margin-top: 2.5rem; }
.ranking-section h2 { margin-bottom: 0; }
.ranking-section .metrics { margin: 1rem 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ranking-table-wrapper { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.ranking-table { min-width: 900px; }
.ranking-table-v2 { min-width: 1500px; }
.ranking-table th, .ranking-table td { padding: .55rem .5rem; }
.ranking-table .rank-number, .ranking-table .numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranking-table .rank-number { width: 3rem; color: var(--muted); text-align: right; }
.ranking-topic { min-width: 220px; max-width: 360px; }
.ranking-topic .list-heading { overflow-wrap: anywhere; }
.ranking-forum { min-width: 130px; max-width: 220px; overflow-wrap: anywhere; }
.ranking-canonical { min-width: 150px; max-width: 240px; overflow-wrap: anywhere; }
.ranking-legacy { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.ranking-legacy > summary, .ranking-score summary { color: var(--muted); cursor: pointer; font-weight: 600; }
.ranking-legacy .ranking-section { margin-top: 1rem; }
.ranking-classification { min-width: 180px; max-width: 280px; }
.ranking-classification small { display: block; margin-top: .35rem; overflow-wrap: anywhere; }
.ranking-score { min-width: 190px; text-align: left; vertical-align: top; }
.ranking-score details { margin-top: .35rem; }
.ranking-components { margin: .5rem 0; }
.ranking-components div { display: flex; justify-content: space-between; gap: 1rem; }
.ranking-components dt { color: var(--muted); font-weight: 400; }
.ranking-components dd { margin: 0; }
.table-wrapper { max-width: 100%; overflow-x: auto; }
.subject-admin-links, .inline-actions { display: flex; gap: .75rem; align-items: center; }
.topic-actions { display: flex; gap: .35rem; align-items: center; }
.topic-actions form { margin: 0; }
.icon-button { display: inline-grid; width: 34px; height: 34px; padding: 7px; place-items: center; border: 1px solid #cfd4dc; border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
.icon-button:hover { border-color: var(--accent); color: var(--accent); }
.icon-button-danger:hover { border-color: #b42318; color: #b42318; }
.icon-button:disabled { cursor: not-allowed; opacity: .45; }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.subject-admin-links { margin: 0 0 1.5rem; }
.subject-area { margin-top: 2rem; }
.subject-group { padding: 1rem; margin: .75rem 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.subject-group h3 { margin: 0; }
.subject-form { max-width: 680px; }
.inline-actions form { margin: 0; }
.bounded-error, .run-error { max-width: 680px; overflow-wrap: anywhere; }
.jobs-callout { padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.jobs-section { margin-top: 2.5rem; }
.jobs-section h3 { margin: 1.5rem 0 .5rem; }
.jobs-table { min-width: 680px; }
.job-target { max-width: 36rem; overflow-wrap: anywhere; }
.job-target code { white-space: normal; }
.status-planned { background: #f2f4f7; color: #475467; }
.status-due { background: #fff7e6; color: #8a5a00; }
.status-live { background: #eef2ff; color: #334eae; }
.classification-fieldset { width: 100%; min-width: 0; max-width: 680px; margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; }
.classification-fieldset > *, .classification-secondary-grid > * { min-width: 0; }
.classification-fieldset select { min-width: 0; max-width: 100%; }
.model-classification, .assignment-card, .correction-history { overflow-wrap: anywhere; }
.classification-fieldset legend { padding: 0 .35rem; font-weight: 700; }
.classification-secondary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.classification-lock { margin: 0 0 .75rem; }
.classification-lock.status { color: #334eae; }
.model-classification { margin: 1rem 0; padding: 1rem; border: 1px solid #c7d2fe; border-radius: 8px; background: #f5f7ff; }
.model-classification h3 { margin: 0 0 .5rem; }
.model-classification p { margin: .35rem 0; }
.help-text { max-width: 640px; font-size: 13px; }
.form-errors { max-width: 680px; margin: 1rem 0; padding: .75rem 1rem; color: #9f1b1b; background: #fff1f1; border: 1px solid #efb3b3; border-radius: 6px; }
.form-errors ul { margin-bottom: 0; }
.correction-history { max-width: 680px; margin-top: 2rem; }
.assignment-card { padding: .75rem 0; border-top: 1px solid var(--line); }
.assignment-card small { display: block; color: var(--muted); }
.json-preview { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.json-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); background: #fff; }
.json-preview-url { min-width: 0; margin: 0; }
.json-preview-url strong { display: block; margin-bottom: .25rem; color: var(--ink); }
.json-preview-url a { display: block; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.json-preview-output { min-height: 24rem; max-height: 70vh; overflow: auto; margin: 0; padding: 1.5rem; background: #f8fafc; color: #334155; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; white-space: pre; }
.json-key { color: #7c3aed; font-weight: 600; }
.json-string { color: #067647; }
.json-number { color: #175cd3; }
.json-boolean { color: #b54708; font-weight: 600; }
.json-null { color: #667085; font-style: italic; }
@media (max-width: 1000px) { .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .topbar { width: 100%; min-width: 0; flex-wrap: wrap; padding: .75rem 1rem; gap: .75rem 1rem; } .topbar .brand { min-width: 0; flex: 1 1 auto; } .topbar nav { order: 3; width: 100%; min-width: 0; max-width: 100%; flex: 1 0 100%; gap: 1rem; overflow-x: auto; padding-bottom: .25rem; white-space: nowrap; } .topbar nav a { flex: 0 0 auto; } .topbar form { flex: 0 0 auto; margin-left: auto; } main { min-width: 0; padding: 1rem; overflow-x: auto; } .filters { flex-direction: column; } .bulk-review, .classification-secondary-grid { grid-template-columns: 1fr; } .metrics, .ranking-section .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ranking-table-wrapper { width: 100%; } .section-heading { align-items: start; flex-direction: column; } .proposal-review-table, .proposal-review-table tbody, .proposal-review-table tr, .proposal-review-table td { display: block; width: 100%; } .proposal-review-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .proposal-review-table tr { padding: .75rem 0; border-bottom: 1px solid var(--line); } .proposal-review-table td { padding: .5rem 0; border: 0; } .proposal-review-table td::before { display: block; margin-bottom: .2rem; color: var(--muted); content: attr(data-label); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } }