:root { --bg: #eef1f4; --panel: #ffffff; --ink: #15191f; --muted: #66717f; --line: #d5dbe2; --line-dark: #b5bec8; --accent: #1d5f8f; --accent-dark: #17486c; --ok: #1d7b52; --warn: #9a6500; --bad: #bd2d20; --bad-bg: #fff1ef; --warn-bg: #fff7df; --ok-bg: #eef8f3; --focus-bg: #fff7f5; --shadow: 0 10px 28px rgba(28, 35, 45, 0.10); } * { box-sizing: border-box; } html { height: 100%; overflow: hidden; } body { margin: 0; height: 100vh; min-height: 100vh; overflow: hidden; background: var(--bg); color: var(--ink); font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; font-size: 14px; letter-spacing: 0; } .login-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, rgba(29, 95, 143, .10), transparent 42%), linear-gradient(315deg, rgba(29, 123, 82, .12), transparent 38%), var(--bg); } .login-panel { width: min(430px, 100%); display: grid; gap: 12px; border: 1px solid var(--line-dark); border-radius: 8px; background: #fff; box-shadow: 0 18px 48px rgba(28, 35, 45, .16); padding: 24px; } .login-mark { width: 42px; height: 42px; border: 2px solid var(--accent); border-radius: 8px; background: linear-gradient(90deg, transparent 46%, rgba(29, 95, 143, .18) 47%, rgba(29, 95, 143, .18) 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(29, 95, 143, .18) 47%, rgba(29, 95, 143, .18) 53%, transparent 54%), #fff; } .login-panel p { margin: -4px 0 4px; color: var(--muted); } .login-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; } .login-panel button { min-height: 40px; } .login-message { min-height: 18px; color: var(--bad); } .app-shell { height: 100vh; overflow: hidden; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } h1, h2 { margin: 0; letter-spacing: 0; } h1 { font-size: 18px; } h2 { font-size: 16px; } .topbar { min-height: 76px; display: grid; grid-template-columns: minmax(250px, 320px) auto minmax(720px, 1fr) auto; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line-dark); background: #f9fafb; } .session-box { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 160px; } .session-box span { color: var(--muted); white-space: nowrap; } .session-box button { min-height: 34px; padding: 6px 12px; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand p, .detail-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; } .mark { width: 34px; height: 34px; border: 2px solid var(--accent); border-radius: 7px; background: linear-gradient(90deg, transparent 46%, rgba(29, 95, 143, .16) 47%, rgba(29, 95, 143, .16) 53%, transparent 54%), linear-gradient(0deg, transparent 46%, rgba(29, 95, 143, .16) 47%, rgba(29, 95, 143, .16) 53%, transparent 54%), #fff; flex: 0 0 auto; } .top-nav { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: auto; } .nav-button { min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: 6px 10px; white-space: nowrap; } .nav-button.is-active { background: var(--accent); color: #fff; } .status-grid { display: grid; grid-template-columns: repeat(6, minmax(104px, 1fr)); gap: 8px; } .status-card, .metric-card { min-height: 48px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; } .status-card span, .metric-card span { display: block; color: var(--muted); font-size: 12px; } .status-card strong, .metric-card strong { display: block; margin-top: 2px; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-online { color: var(--ok); } .status-offline { color: var(--bad); } .status-muted { color: var(--muted); } .page-view { height: calc(100vh - 76px); min-height: 0; overflow: hidden; } .is-hidden { display: none !important; } .overview-page, .audit-page, .audit-history-page, .settings-page { padding: 12px; overflow: auto; } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; } .page-band { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); padding: 12px; margin-bottom: 12px; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .section-head.compact { margin-bottom: 6px; } .section-head span { color: var(--muted); font-size: 12px; } .queue-summary, .settings-list { display: grid; gap: 8px; } .queue-line, .settings-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; border-bottom: 1px solid var(--line); padding: 6px 0; } .queue-line:last-child, .settings-list > div:last-child { border-bottom: 0; } .queue-line span, .settings-list span { color: var(--muted); } .workspace { height: calc(100vh - 76px); display: grid; grid-template-columns: 300px minmax(720px, 1.25fr) minmax(390px, .85fr); gap: 10px; padding: 10px; } .record-panel, .pdf-panel, .detail-panel { min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; } .record-panel, .detail-panel { display: flex; flex-direction: column; } .panel-tools { display: grid; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: #fbfcfd; } .bulk-action { width: 100%; min-height: 34px; } .export-action { border-color: #b6c3d0; background: #f7fafc; color: var(--accent-dark); } input, select, textarea { width: 100%; border: 1px solid var(--line-dark); border-radius: 6px; background: #fff; color: var(--ink); } input, select { min-height: 34px; padding: 6px 8px; } textarea { padding: 8px; resize: vertical; } .record-list, .audit-list { overflow: auto; padding: 6px; } .record-item { width: 100%; display: block; border: 1px solid transparent; border-radius: 7px; background: transparent; text-align: left; padding: 9px; cursor: pointer; } .record-item:hover, .record-item.is-active { border-color: var(--line-dark); background: #f3f6f8; } .record-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .record-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tag { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px 6px; border-radius: 5px; font-size: 12px; border: 1px solid var(--line); color: var(--muted); background: #fff; white-space: nowrap; } .tag.needs_review, .tag.audit-failed { color: var(--bad); border-color: #efb6ae; background: var(--bad-bg); } .tag.auto_corrected, .tag.audit-unsure, .tag.ai_pending { color: var(--warn); border-color: #efd28b; background: var(--warn-bg); } .tag.reviewed, .tag.auto_pass, .tag.ai_passed, .tag.audit-passed { color: var(--ok); border-color: #b6dec9; background: var(--ok-bg); } .tag.submitted { color: var(--muted); border-color: var(--line-dark); background: #f3f5f7; } .record-sub { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; } .record-time { display: block; color: #7b8794; } .record-footer { min-height: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 2px; } .record-download { flex: 0 0 auto; min-height: 24px; padding: 2px 8px; border: 1px solid #b6c3d0; border-radius: 5px; background: #fff; color: var(--accent); font-size: 12px; } .record-download:hover { border-color: var(--accent); background: #eef6fb; } .pdf-panel { display: flex; flex-direction: column; } .pdf-toolbar, .detail-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fbfcfd; } .pdf-toolbar > div:first-child { min-width: 0; } .detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .ai-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ai-actions button { min-height: 32px; border-color: #6f8f35; background: #eef7df; color: #304b12; } .ai-actions button:disabled { cursor: wait; color: var(--muted); border-color: var(--line-dark); background: #eef1f4; } .ai-progress { display: grid; gap: 7px; border: 1px solid #9db7d8; border-radius: 7px; background: #f4f9ff; padding: 8px; } .ai-progress-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; } .ai-progress-head strong { color: #174a83; } .ai-progress-head span, .ai-progress-meta { color: var(--muted); font-size: 12px; } .ai-progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #dbe6f3; } .ai-progress-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: #2474bd; transition: width .2s ease; } .ai-progress button { min-height: 30px; border: 1px solid #9f6d20; border-radius: 6px; background: #fff4df; color: #744500; } #pdfSubtitle { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; } .pdf-zoom-controls { display: inline-grid; grid-template-columns: 32px 50px 32px 42px; align-items: center; gap: 4px; flex: 0 0 auto; } .pdf-zoom-controls button { width: 100%; height: 30px; padding: 0; border-radius: 6px; font-weight: 700; line-height: 1; } .pdf-zoom-controls span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .view-switch { display: inline-flex; border: 1px solid var(--line-dark); border-radius: 7px; overflow: hidden; background: #fff; } .view-switch button { min-width: 52px; border: 0; border-right: 1px solid var(--line); background: #fff; padding: 6px 8px; } .view-switch button:last-child { border-right: 0; } .view-switch button.is-active { background: var(--accent); color: #fff; } .viewer { flex: 1; min-height: 0; background: #dfe4ea; } .review-strip { display: grid; grid-template-columns: 150px minmax(260px, 1fr); gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); background: #fbfcfd; } .strip-item { min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fff; } .strip-item span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 3px; } .strip-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .strip-note { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; } .strip-note span { margin: 0; } .strip-note input { min-height: 30px; } #pdfFrame, #auditPdfFrame { display: block; width: 100%; height: 100%; border: 0; background: #fff; } .target-summary { border-bottom: 1px solid var(--line); background: #fffafa; padding: 0; } .collapsible-panel > summary { cursor: pointer; list-style: none; } .collapsible-panel > summary::-webkit-details-marker { display: none; } .target-panel > summary, .review-log-panel > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 10px; } .target-panel > summary::before, .review-log-panel > summary::before { content: "▸"; color: var(--muted); font-size: 12px; } .target-panel[open] > summary::before, .review-log-panel[open] > summary::before { content: "▾"; } .target-panel > summary strong, .review-log-panel > summary h2 { flex: 1; } .target-panel > summary span { color: var(--muted); font-size: 12px; } .target-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 6px; } .target-chips button, .target-chips span { border: 1px solid #e7aea7; border-radius: 6px; background: #fff; color: var(--bad); padding: 4px 7px; font-size: 12px; } .target-chips.is-ai-target button, .target-chips.is-ai-target span { border-color: #9bbff0; background: #f3f8ff; color: #1f5f9e; } .target-summary ul { margin: 0; padding: 0 10px 10px 28px; color: #6e332d; font-size: 12px; line-height: 1.5; } .target-summary ul.ai-note-list { color: #1f5f9e; } #saveBtn, .login-panel button, .session-box button, .audit-save-actions button, .page-band button, .bulk-action, .button-row button { min-height: 34px; border: 1px solid var(--accent-dark); border-radius: 6px; background: var(--accent); color: #fff; padding: 6px 10px; white-space: nowrap; } #saveBtn:disabled { cursor: not-allowed; background: #b9c4ce; border-color: #a9b4bf; } .button-row { display: flex; gap: 8px; flex-wrap: wrap; } .button-row button.danger, .audit-save-actions button.danger, .page-band button.danger { background: var(--bad); border-color: #9f2118; } .audit-save-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .audit-save-actions button { min-height: 30px; padding: 5px 8px; font-size: 12px; } .detail-form { flex: 1; min-height: 0; overflow: auto; padding: 10px; } .field-group { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; overflow: hidden; } .field-group.is-alert { border-color: #df8e84; box-shadow: inset 3px 0 0 var(--bad); } .field-group summary { cursor: pointer; padding: 8px 10px; background: #eef2f5; font-weight: 700; } .field-group.is-alert summary { background: var(--bad-bg); color: #6e241e; } .field-group summary span { float: right; font-size: 12px; color: var(--bad); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px; } .field { min-width: 0; } .field.is-wide { grid-column: 1 / -1; } .field > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .field > span em { color: var(--bad); font-style: normal; } .field.is-ai-modified > span em { color: #1769c2; } .field.is-manual-modified > span em { color: var(--ok); } .field.is-alert input, .field.is-alert select, .field.is-alert textarea, .field.is-alert .json-editor { border-color: #d9796f; background: var(--focus-bg); } .field.is-ai-modified input, .field.is-ai-modified select, .field.is-ai-modified textarea, .field.is-ai-modified .json-editor { border-color: #78aee8; background: #f2f8ff; } .field.is-manual-modified input, .field.is-manual-modified select, .field.is-manual-modified textarea, .field.is-manual-modified .json-editor { border-color: #8bc8a8; background: #f2fbf6; } .json-table td.is-ai-cell input { border-color: #5d9ee7; background: #edf6ff; box-shadow: inset 3px 0 0 #2d7ecb; } .json-table td.is-manual-cell input { border-color: #6fbd91; background: #effaf4; box-shadow: inset 3px 0 0 #2b9a57; } .json-editor { border: 1px solid var(--line); border-radius: 7px; overflow: hidden; background: #fff; } .json-toolbar { display: flex; gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); background: #f8fafb; } .json-toolbar button, .json-table button { border: 1px solid var(--line-dark); border-radius: 5px; background: #fff; padding: 4px 7px; color: var(--ink); } .json-table-wrap, .data-table-wrap { overflow: auto; } .json-table-wrap { max-height: 360px; } .json-table, .data-table { width: max-content; min-width: 100%; border-collapse: collapse; } .json-table th, .json-table td, .data-table th, .data-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px; vertical-align: top; } .json-table th, .data-table th { position: sticky; top: 0; z-index: 1; background: #eef2f5; color: #303844; font-size: 12px; white-space: nowrap; } .data-table tr.log-ai td { background: #f3f8ff; } .data-table tr.log-manual td { background: #f3fbf6; } .ai-question-item { border-top: 1px solid var(--line); background: #fff; } .ai-question-item summary { cursor: pointer; display: grid; grid-template-columns: 140px 110px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 34px; padding: 7px 10px; color: var(--muted); } .ai-question-item summary strong { color: var(--accent); } .ai-question-item summary em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; } .ai-question-body { display: grid; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid var(--line); background: #fbfdff; } .ai-question-body p { margin: 3px 0 0; } .ai-question-body pre { max-height: 220px; overflow: auto; margin: 4px 0 0; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; white-space: pre-wrap; } .ai-question-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 6px; } .ai-question-figure { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; } .ai-question-image-frame { display: grid; place-items: center; min-height: 120px; max-height: 320px; overflow: auto; background: #252525; } .ai-question-image-frame img { max-width: 100%; height: auto; display: block; } .ai-question-figure figcaption { padding: 6px 8px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .json-table input { min-width: 120px; border-color: #c8d0d8; background: #fff; } .json-table td:nth-child(4) input, .json-table td:nth-child(11) input { min-width: 260px; } .manual-note, .review-log-panel { padding: 10px; border-top: 1px solid var(--line); background: #fbfcfd; } .manual-note label, .audit-toolbar label, .audit-side label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; } .review-log-panel { max-height: 230px; overflow: auto; } .review-log-panel.collapsible-panel { padding: 0; } .review-log-panel .data-table-wrap { max-height: 184px; } .save-message, .inline-message { min-height: 28px; padding: 0 10px 10px; color: var(--muted); } .inline-message { padding: 0; } .save-message.is-ok, .inline-message.is-ok { color: var(--ok); } .save-message.is-error, .inline-message.is-error { color: var(--bad); } .audit-toolbar { display: grid; grid-template-columns: minmax(180px, 260px) 120px auto 1fr; align-items: end; gap: 10px; } .audit-layout { height: calc(100vh - 170px); display: grid; grid-template-columns: 300px minmax(760px, 1.35fr) minmax(390px, .9fr); gap: 10px; } .audit-list, .audit-record, .audit-side { min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); overflow: auto; } .audit-record { padding: 10px; } .audit-side { padding: 12px; display: grid; align-content: start; gap: 12px; } .audit-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .audit-meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; } .audit-pdf { width: 100%; height: calc(100vh - 250px); min-height: 420px; border: 1px solid var(--line); background: #fff; } .settings-grid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr); gap: 12px; } .settings-wide { grid-column: 1 / -1; } .settings-ai { grid-column: 1 / -1; } .ai-section-head { align-items: flex-start; } .ai-title-row { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ai-enable-toggle { min-height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; background: #f8fafb; } .settings-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(360px, 2fr) auto; gap: 10px; align-items: end; margin-bottom: 12px; } .status-check-form { display: grid; grid-template-columns: minmax(74px, 100px) minmax(120px, 1fr) minmax(180px, 1.4fr) 82px auto; gap: 8px; align-items: center; } .ai-settings-form { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(260px, 1.4fr) 82px auto auto; gap: 10px; align-items: end; } .ai-settings-form > label:not(.toggle-field) { display: grid; gap: 4px; } .ai-settings-form > label > span { color: var(--muted); font-size: 12px; } .ai-action-table { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: auto; } .ai-action-table table { width: 100%; min-width: 760px; border-collapse: collapse; } .ai-action-table th, .ai-action-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: middle; } .ai-action-table th { color: var(--muted); font-size: 12px; background: #f7fafc; } .ai-action-table tr:last-child td { border-bottom: 0; } .ai-action-table select { min-height: 32px; } .ai-privacy-toggle { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .ai-privacy-toggle input { width: auto; min-height: 0; } .ai-privacy-note { margin-top: 8px; border: 1px solid #b6dec9; border-radius: 6px; padding: 8px 10px; color: var(--ok); background: var(--ok-bg); font-size: 12px; } .ai-privacy-note.is-warning { border-color: #e9c26f; color: var(--warn); background: var(--warn-bg); } .status-check-form input, .status-check-form select, .ai-settings-form input, .ai-settings-form select { min-height: 34px; } .toggle-field { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); white-space: nowrap; } .toggle-field input { width: auto; min-height: 0; } .permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .permission-item { display: flex; align-items: center; gap: 7px; min-height: 34px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfd; padding: 5px 8px; } .permission-item input { width: auto; min-height: auto; } .user-list { display: grid; gap: 10px; } .user-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; } .user-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; } .user-card-head span { color: var(--muted); font-size: 12px; } .user-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; } .user-edit-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; } .user-actions { margin-top: 10px; } .empty { padding: 18px; color: var(--muted); } .empty.small { padding: 8px; font-size: 12px; } .list-note { position: sticky; top: 0; z-index: 1; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fffdf4; color: var(--warn); font-size: 12px; } .list-loading, .list-end { padding: 10px; color: var(--muted); font-size: 12px; text-align: center; } @media (max-width: 1280px) { .topbar { grid-template-columns: 1fr; } .status-grid { width: 100%; } .workspace, .audit-layout, .settings-grid, .settings-form { height: auto; min-height: calc(100vh - 130px); grid-template-columns: 1fr; } .settings-form { min-height: 0; } .status-check-form, .ai-settings-form { grid-template-columns: 1fr; } .record-panel, .pdf-panel, .detail-panel, .audit-list, .audit-record, .audit-side { min-height: 420px; } .review-strip { grid-template-columns: 1fr 1fr; } }