:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #667482;
  --line: #dbe2e8;
  --canvas: #f4f6f8;
  --panel: #ffffff;
  --teal: #087f8c;
  --teal-dark: #075c66;
  --amber: #a96205;
  --red: #b42318;
  --shadow: 0 8px 24px rgba(23, 33, 43, .06);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button { font: inherit; }
.login-page { min-height: 100vh; }
.login-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.login-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); max-width: 420px; padding: 28px; width: 100%; }
.login-card h1 { font-size: 26px; margin-bottom: 8px; }
.login-card .subhead { margin-bottom: 24px; }
.login-form { display: grid; gap: 15px; }
.login-form label, .login-form label > span { display: block; }
.login-form label > span { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.login-form input { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); height: 42px; padding: 9px 11px; width: 100%; }
.login-form input:focus { border-color: var(--teal); outline: 2px solid rgba(8, 127, 140, .14); }
.login-error { background: #fef3f2; border: 1px solid #fecdca; color: var(--red); margin: 0 0 16px; padding: 10px 12px; }
.access-switch-form { margin-top: 24px; }
.shell { width: min(1360px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 64px; }
.topbar { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; padding-bottom: 28px; }
.eyebrow { color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .12em; margin: 0 0 8px; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(26px, 4vw, 38px); letter-spacing: 0; line-height: 1.1; margin-bottom: 8px; }
.subhead { color: var(--muted); margin-bottom: 0; }
.controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-chip { border-right: 1px solid var(--line); color: var(--muted); padding-right: 10px; }
.logout-form { margin: 0 4px 0 0; }
.switch-control { align-items: center; color: var(--muted); cursor: pointer; display: inline-flex; gap: 8px; margin-right: 4px; user-select: none; }
.switch-control input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.switch-track { background: #aeb8c1; border-radius: 999px; display: inline-flex; height: 22px; padding: 3px; transition: .15s ease; width: 40px; }
.switch-thumb { background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(23, 33, 43, .25); display: block; height: 16px; transition: .15s ease; width: 16px; }
.switch-control input:checked + .switch-track { background: var(--teal); }
.switch-control input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch-control input:focus-visible + .switch-track { outline: 2px solid var(--teal); outline-offset: 2px; }
.switch-control input:disabled + .switch-track { opacity: .5; }
.state-chip { border: 1px solid var(--line); border-radius: 999px; color: var(--muted); padding: 6px 11px; white-space: nowrap; }
.state-chip.running { background: #e6f6f3; border-color: #9edfd7; color: var(--teal-dark); }
.button { border: 1px solid var(--line); border-radius: 6px; cursor: pointer; padding: 9px 14px; transition: .15s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--teal); border-color: var(--teal); color: white; }
.button.primary:hover { background: var(--teal-dark); }
.button.quiet { background: white; color: var(--ink); }
.button:disabled { cursor: not-allowed; opacity: .45; transform: none; }
.statusbar { display: grid; grid-template-columns: 1fr 1fr 1fr 2fr; gap: 1px; background: var(--line); border: 1px solid var(--line); box-shadow: var(--shadow); }
.statusbar > div { background: var(--panel); min-height: 72px; padding: 14px 16px; }
.status-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.error-banner { background: #fef3f2; border: 1px solid #fecdca; color: var(--red); margin: 16px 0 0; padding: 12px 14px; }
.metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0 26px; }
.metric { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px 18px; }
.metric span { color: var(--muted); display: block; font-size: 12px; }
.metric strong { display: block; font-size: 28px; line-height: 1.1; margin-top: 7px; }
.metric small { color: var(--muted); display: block; font-size: 11px; margin-top: 5px; }
.settings-launcher { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; padding: 14px 0; }
.settings-button { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); cursor: pointer; min-height: 40px; padding: 9px 14px; }
.settings-button:hover { border-color: var(--teal); color: var(--teal-dark); }
.settings-button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.task-settings { border-top: 0; padding: 20px 0; }
.task-settings { border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.credential-form { align-items: end; display: grid; gap: 12px; grid-template-columns: 1fr 1fr 1.4fr auto; margin-top: 14px; }
.credential-form label, .credential-form label > span { display: block; }
.credential-form label > span { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.credential-form input, .credential-form select, .credential-form textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); min-width: 0; padding: 8px 10px; width: 100%; }
.credential-form input { height: 40px; }
.credential-form textarea { font: inherit; resize: vertical; }
.credential-form select[multiple] { min-height: 112px; }
.credential-form input:focus, .credential-form select:focus, .credential-form textarea:focus { border-color: var(--teal); outline: 2px solid rgba(8, 127, 140, .14); }
.credential-form .button { height: 40px; white-space: nowrap; }
.wecom-form { align-items: end; display: grid; gap: 12px; grid-template-columns: minmax(260px, 1.5fr) minmax(240px, 1fr) auto; margin-top: 14px; }
.wecom-form label, .wecom-form label > span { display: block; }
.wecom-form label > span { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.wecom-form input { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); height: 40px; min-width: 0; padding: 8px 10px; width: 100%; }
.wecom-form input:focus { border-color: var(--teal); outline: 2px solid rgba(8, 127, 140, .14); }
.wecom-form .switch-control input { height: 1px; padding: 0; width: 1px; }
.wecom-actions { display: flex; gap: 8px; }
.wecom-actions .button { height: 40px; white-space: nowrap; }
.settings-dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 20px 56px rgba(23, 33, 43, .22); color: var(--ink); margin: auto; max-height: min(760px, calc(100vh - 32px)); max-width: calc(100vw - 32px); overflow: auto; padding: 0; width: 640px; }
.settings-dialog::backdrop { background: rgba(12, 18, 24, .58); }
.settings-dialog-header { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; gap: 18px; justify-content: space-between; padding: 20px 22px 16px; }
.settings-dialog-header h2 { font-size: 20px; margin: 0 0 3px; }
.settings-dialog-header p { color: var(--muted); margin: 0; }
.settings-dialog-close { align-items: center; background: transparent; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; display: flex; flex: 0 0 auto; font-size: 25px; height: 34px; justify-content: center; line-height: 1; padding: 0 0 3px; width: 34px; }
.settings-dialog-close:hover { background: #eef2f4; color: var(--ink); }
.settings-dialog-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.settings-dialog .credential-form, .settings-dialog .wecom-form { align-items: stretch; grid-template-columns: 1fr; margin: 0; padding: 20px 22px 22px; }
.settings-dialog .credential-form .switch-control input { height: 1px; padding: 0; width: 1px; }
.settings-dialog .dialog-switch { align-items: center; display: flex; justify-content: space-between; }
.settings-dialog .dialog-switch > span:first-child { margin: 0; }
.settings-dialog-actions { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 6px; padding-top: 16px; }
.settings-dialog-actions .button { height: 40px; white-space: nowrap; }
.dialog-subsection { border-top: 1px solid var(--line); padding-top: 4px; }
.dialog-subsection-heading { padding: 16px 22px 0; }
.dialog-subsection-heading h3 { font-size: 16px; margin: 0 0 3px; }
.dialog-subsection-heading p { color: var(--muted); margin: 0; }
.runtime-summary-row { align-items: center; display: flex; justify-content: space-between; padding: 13px 0 4px; }
.runtime-summary-row span { color: var(--muted); font-size: 13px; }
.runtime-summary-row strong { font-size: 14px; }
.account-pool-dialog { width: 720px; }
.account-pool-list { background: var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 1px; max-height: 280px; overflow: auto; }
.account-row { align-items: center; background: var(--panel); display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) auto; padding: 13px 22px; }
.account-row-main { min-width: 0; }
.account-row-main strong, .account-row-main span { display: block; }
.account-row-main span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.account-row-actions { display: flex; gap: 6px; }
.account-row-actions .button { padding: 7px 10px; }
.account-form { border-top: 0; }
.task-settings-heading { align-items: center; display: flex; justify-content: space-between; gap: 16px; }
.task-settings-heading h2 { font-size: 18px; margin-bottom: 3px; }
.task-settings-heading p { color: var(--muted); margin-bottom: 0; }
.task-list { display: grid; gap: 1px; margin-top: 14px; background: var(--line); border: 1px solid var(--line); }
.task-account-heading { align-items: center; background: #eef2f4; display: flex; gap: 10px; justify-content: space-between; padding: 8px 14px; }
.task-account-heading strong { font-size: 13px; }
.task-account-heading span { color: var(--muted); font-size: 12px; }
.task-option { align-items: center; background: var(--panel); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) auto minmax(150px, 190px); min-height: 66px; padding: 10px 14px; }
.task-option:hover { background: #f8fafb; }
.task-option input { accent-color: var(--teal); height: 17px; margin: 0; width: 17px; }
.task-option-check { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 20px minmax(0, 1fr); min-width: 0; }
.task-option-main { min-width: 0; }
.task-option-main strong, .task-option-main span { display: block; }
.task-option-main span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-bot-control { display: grid; gap: 3px; min-width: 0; }
.task-bot-control > span { color: var(--muted); font-size: 11px; }
.task-bot-control select { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); height: 36px; min-width: 0; padding: 6px 28px 6px 9px; width: 100%; }
.task-bot-control select:focus { border-color: var(--teal); outline: 2px solid rgba(8, 127, 140, .14); }
.task-pending { color: var(--muted); font-size: 12px; white-space: nowrap; }
.task-pending strong { color: var(--ink); font-size: 14px; margin-left: 3px; }
.task-rule-control { align-items: end; display: grid; gap: 4px; justify-items: end; min-width: 0; }
.task-rule-control > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.task-rule-control .button { padding: 7px 10px; }
.task-rule-dialog { max-width: 760px; width: min(760px, calc(100% - 32px)); }
.task-rule-form { display: grid; gap: 14px; grid-template-columns: 1fr; padding: 20px 22px 22px; }
.task-rule-fieldset { border: 1px solid var(--line); display: grid; gap: 12px; margin: 0; padding: 14px; }
.task-rule-fieldset legend { color: var(--teal-dark); font-size: 13px; font-weight: 700; padding: 0 6px; }
.task-rule-fieldset label { display: grid; gap: 6px; }
.task-rule-fieldset .task-rule-enable { align-items: center; background: #f5faf9; display: flex; justify-content: space-between; padding: 9px 10px; }
.task-rule-fieldset textarea:disabled, .task-rule-fieldset input:disabled { background: #eef1f2; color: var(--muted); cursor: not-allowed; }
.task-rule-fieldset textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; line-height: 1.5; min-height: 92px; padding: 9px 10px; resize: vertical; width: 100%; }
.task-rule-fieldset textarea:focus { border-color: var(--teal); outline: 2px solid rgba(8, 127, 140, .14); }
.task-rule-switch { align-items: center; background: #f5faf9; border: 1px solid #cfe4df; display: flex; gap: 16px; justify-content: space-between; padding: 13px 14px; }
.task-rule-switch > span:first-child { display: grid; gap: 4px; min-width: 0; }
.task-rule-switch strong { font-size: 14px; }
.task-rule-switch small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.task-rule-note { color: var(--muted); font-size: 12px; margin: 0; }
.blind-watermark-dialog { width: min(680px, calc(100vw - 32px)); }
.rejection-dialog { width: min(720px, calc(100vw - 32px)); }
.rejection-images-fieldset { border: 1px solid var(--line); margin: 0; padding: 12px; }
.rejection-images-fieldset legend { color: var(--muted); font-size: 12px; padding: 0 5px; }
.rejection-image-choices { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejection-image-choice { border: 1px solid var(--line); cursor: pointer; display: grid; gap: 6px; grid-template-columns: 20px 1fr; padding: 8px; }
.rejection-image-choice:has(input:checked) { border-color: var(--teal); outline: 2px solid rgba(8, 127, 140, .14); }
.rejection-image-choice input { align-self: center; grid-row: 1 / 3; height: 16px; margin: 0; width: 16px; }
.rejection-image-choice img { aspect-ratio: 4 / 3; background: #eef1f2; object-fit: cover; width: 100%; }
.rejection-image-choice span { color: var(--muted); font-size: 12px; text-align: center; }
.report-fields { background: #f8fafb; border: 1px solid var(--line); display: grid; gap: 12px; padding: 14px; }
.report-fields[hidden] { display: none; }
.report-upload-control input[type="file"] { background: var(--panel); height: auto; padding: 9px; }
.report-image-preview { display: grid; gap: 9px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-image-item { border: 1px solid var(--line); min-width: 0; padding: 7px; position: relative; }
.report-image-item img { aspect-ratio: 4 / 3; background: #eef1f2; object-fit: cover; width: 100%; }
.report-image-item span { color: var(--muted); display: block; font-size: 11px; overflow: hidden; padding: 4px 24px 0 0; text-overflow: ellipsis; white-space: nowrap; }
.report-image-remove { align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 50%; color: var(--red); cursor: pointer; display: flex; font-size: 18px; height: 26px; justify-content: center; line-height: 1; padding: 0 0 2px; position: absolute; right: 10px; top: 10px; width: 26px; }
.report-upload-status { color: var(--teal-dark); font-size: 12px; margin: 0; min-height: 18px; }
.blind-watermark-form { grid-template-columns: 1fr; }
.blind-watermark-form input[type="file"] { height: auto; padding: 9px; }
.blind-watermark-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.blind-watermark-status { color: var(--teal-dark); font-size: 13px; margin: 0; min-height: 20px; }
.blind-watermark-detection-result { border-top: 1px solid var(--line); display: grid; gap: 12px; padding-top: 16px; }
.blind-watermark-detection-head { align-items: center; display: flex; justify-content: space-between; }
.blind-watermark-detection-head > span { color: var(--muted); font-size: 12px; }
.blind-watermark-detection-state { border: 1px solid var(--line); border-radius: 999px; font-size: 12px; padding: 5px 9px; }
.blind-watermark-detection-state.detected { background: #fef3f2; border-color: #fecdca; color: var(--red); }
.blind-watermark-detection-state.clear { background: #e6f6f3; border-color: #9edfd7; color: var(--teal-dark); }
.blind-watermark-detection-metrics { border: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.blind-watermark-detection-metrics > div { min-width: 0; padding: 10px 12px; }
.blind-watermark-detection-metrics > div:nth-child(odd) { border-right: 1px solid var(--line); }
.blind-watermark-detection-metrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.blind-watermark-detection-metrics dt { color: var(--muted); font-size: 11px; }
.blind-watermark-detection-metrics dd { font-size: 14px; font-weight: 700; margin: 3px 0 0; overflow-wrap: anywhere; }
.blind-watermark-result { border-top: 1px solid var(--line); display: grid; gap: 12px; padding-top: 16px; }
.blind-watermark-detection-result[hidden], .blind-watermark-result[hidden] { display: none; }
.blind-watermark-result img { background: #eef2f4; border: 1px solid var(--line); max-height: min(54vh, 440px); max-width: 100%; object-fit: contain; width: 100%; }
.blind-watermark-result .button { justify-self: start; text-decoration: none; }
.tabs { border-bottom: 1px solid var(--line); display: flex; gap: 24px; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); cursor: pointer; padding: 12px 2px 10px; }
.tab.active { border-bottom-color: var(--teal); color: var(--teal-dark); font-weight: 700; }
.tab span { background: #eef2f4; border-radius: 999px; font-size: 11px; margin-left: 3px; padding: 2px 7px; }
.panel { padding-top: 24px; }
.panel-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 16px; }
.panel-heading h2 { font-size: 20px; margin-bottom: 4px; }
.panel-heading p { color: var(--muted); margin-bottom: 0; }
.filter-control { align-items: center; color: var(--muted); display: flex; gap: 8px; white-space: nowrap; }
.filter-control select { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); min-width: 160px; padding: 8px 30px 8px 10px; }
.review-list { display: grid; gap: 14px; min-width: 0; }
.review-pagination { align-items: center; display: flex; justify-content: flex-end; margin-top: 18px; min-height: 34px; overflow-x: auto; padding: 2px 0 4px; }
.review-pagination .el-pagination { --el-color-primary: var(--teal); --el-pagination-hover-color: var(--teal-dark); flex: 0 0 auto; }
.review-pagination .el-select__wrapper { border-radius: 6px; }
.review-pagination .el-pagination.is-background .btn-next,
.review-pagination .el-pagination.is-background .btn-prev,
.review-pagination .el-pagination.is-background .el-pager li { border-radius: 6px; }
.review-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); min-width: 0; padding: 18px; }
.review-head { align-items: flex-start; display: flex; justify-content: space-between; gap: 16px; }
.review-head h3 { font-size: 16px; margin: 0 0 4px; }
.review-meta { color: var(--muted); font-size: 12px; }
.review-times { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.review-times span { color: var(--ink); display: grid; font-size: 13px; gap: 2px; grid-template-columns: auto; }
.review-times b { color: var(--muted); font-size: 11px; font-weight: 600; }
.result-chip { border-radius: 999px; font-size: 12px; font-weight: 700; padding: 5px 9px; white-space: nowrap; }
.result-chip.pass { background: #e6f6f3; color: var(--teal-dark); }
.result-chip.manual { background: #fff3dc; color: var(--amber); }
.result-chip.approved { background: #e6f6f3; color: var(--teal-dark); }
.result-chip.external { background: #eef2f4; color: #485867; }
.result-chip.rejected { background: #fdecea; color: #9f241a; }
.result-chip.processing { background: #e8f1fb; color: #17649c; }
.check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.check { border-left: 3px solid var(--line); padding-left: 12px; }
.check.pass { border-color: #55b9ad; }
.check.warn { border-color: #edaa35; }
.processing-check.queued { border-color: #aeb8c2; }
.processing-check.running { border-color: #4389c8; }
.processing-check.passed { border-color: #55b9ad; }
.processing-check.failed, .processing-check.error { border-color: #edaa35; }
.processing-check.skipped { border-color: #aeb8c2; }
.check-label { color: var(--muted); font-size: 12px; }
.check-value { font-size: 17px; font-weight: 700; margin-top: 3px; }
.check-raw { color: var(--muted); font-size: 12px; margin-top: 4px; overflow-wrap: anywhere; }
.manual-review-reason { background: #fff8ea; border: 1px solid #f0cf91; color: #7a4600; margin-top: 16px; padding: 10px 12px; }
.manual-review-reason strong { display: block; font-size: 12px; margin-bottom: 3px; }
.manual-review-reason ul { margin: 0; padding-left: 18px; }
.thumbs { display: flex; gap: 8px; margin-top: 16px; max-width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 3px; }
.review-image { background: #eef2f4; border: 1px solid var(--line); cursor: zoom-in; flex: 0 0 auto; height: 100px; padding: 0; width: 130px; }
.review-image:hover { border-color: var(--teal); }
.review-image:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.review-image img { display: block; height: 100%; object-fit: cover; width: 100%; }
.image-preview { background: transparent; border: 0; height: 100vh; margin: auto; max-height: 100vh; max-width: 100vw; padding: 32px; width: 100vw; }
.image-preview::backdrop { background: rgba(12, 18, 24, .88); }
.image-preview[open] { align-items: center; display: flex; justify-content: center; }
.image-preview img { max-height: calc(100vh - 64px); max-width: calc(100vw - 64px); object-fit: contain; }
.image-preview-close { align-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .42); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 28px; height: 40px; justify-content: center; line-height: 1; padding: 0 0 3px; position: fixed; right: 18px; top: 18px; width: 40px; z-index: 1; }
.image-preview-close:hover { background: rgba(255, 255, 255, .22); }
.image-preview-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.card-actions { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 16px; padding-top: 14px; }
.card-actions .button { text-decoration: none; }
.approve { background: var(--teal-dark); border: 1px solid var(--teal-dark); border-radius: 6px; color: #fff; cursor: pointer; padding: 9px 14px; }
.approve:hover { background: #075e58; }
.reject { background: #b42318; border: 1px solid #b42318; border-radius: 6px; color: #fff; cursor: pointer; padding: 9px 14px; }
.reject:hover { background: #8e1d15; }
.reject:disabled, .approve:disabled { cursor: wait; opacity: .58; }
.empty { background: var(--panel); border: 1px dashed var(--line); color: var(--muted); padding: 32px; text-align: center; }
.detail-shell { width: min(1000px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 64px; }
.detail-topbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; padding-bottom: 18px; }
.detail-topbar a { color: var(--teal-dark); text-decoration: none; }
.detail-heading { align-items: flex-start; display: flex; gap: 20px; justify-content: space-between; padding: 26px 0 20px; }
.detail-heading h1 { font-size: 28px; margin-bottom: 6px; }
.detail-summary { background: var(--line); border: 1px solid var(--line); display: grid; gap: 1px; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 18px; }
.detail-summary > div { background: var(--panel); padding: 14px 16px; min-width: 0; }
.detail-summary strong { display: block; overflow-wrap: anywhere; }
.detail-section { border-top: 1px solid var(--line); padding: 22px 0; }
.detail-section h2 { font-size: 19px; margin-bottom: 14px; }
.model-trace-list { display: grid; gap: 10px; }
.model-trace { background: var(--panel); border: 1px solid var(--line); min-width: 0; padding: 14px; }
.model-trace h3 { color: var(--teal-dark); font-size: 14px; margin: 0 0 10px; }
.model-trace-row { align-items: flex-start; border-top: 1px solid #edf0f2; display: grid; gap: 12px; grid-template-columns: 76px minmax(0, 1fr); padding: 8px 0; }
.model-trace-row:first-of-type { border-top: 0; padding-top: 0; }
.model-trace-row > span { color: var(--muted); font-size: 12px; padding-top: 1px; }
.model-trace-row strong, .model-trace-row pre { font-size: 12px; line-height: 1.5; margin: 0; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.evidence-list { background: var(--line); border: 1px solid var(--line); display: grid; gap: 1px; }
.evidence-item { background: var(--panel); display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); padding: 16px; }
.evidence-step { color: var(--teal-dark); font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.watermark-warning { color: #9f241a; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.evidence-title { margin: 0; white-space: pre-line; }
.detail-image { background: #eef2f4; border: 1px solid var(--line); cursor: zoom-in; height: 220px; padding: 0; width: 100%; }
.detail-image img { display: block; height: 100%; object-fit: contain; width: 100%; }
.detail-actions { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 14px; justify-content: flex-end; padding-top: 20px; }
.detail-actions p { color: var(--muted); margin: 0 auto 0 0; }
.detail-notice { background: #eef6f4; border: 1px solid #b9ddd8; color: var(--teal-dark); padding: 12px 14px; }
.viewer-shell { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); margin: 12vh auto 0; max-width: 520px; padding: 28px; width: calc(100% - 32px); }
.viewer-shell h1 { font-size: 25px; }
.viewer-shell p:not(.eyebrow) { color: var(--muted); }
@media (max-width: 850px) {
  .shell { width: min(100% - 24px, 680px); padding-top: 22px; }
  .topbar { display: block; }
  .controls { justify-content: flex-start; margin-top: 18px; }
  .statusbar, .metrics { grid-template-columns: 1fr 1fr; }
  .statusbar > div:last-child { grid-column: 1 / -1; }
  .check-grid { grid-template-columns: 1fr; }
  .panel-heading { align-items: stretch; display: grid; gap: 12px; }
  .review-pagination { justify-content: flex-start; }
  .filter-control { justify-content: space-between; }
  .task-settings-heading { align-items: stretch; display: grid; }
  .credential-form, .wecom-form { grid-template-columns: 1fr; }
  .wecom-actions { flex-wrap: wrap; }
  .detail-shell { width: min(100% - 24px, 680px); padding-top: 18px; }
  .detail-heading { display: grid; }
  .detail-summary { grid-template-columns: 1fr 1fr; }
  .model-trace-row { grid-template-columns: 68px minmax(0, 1fr); }
  .evidence-item { grid-template-columns: 1fr; }
  .detail-image { height: min(70vh, 420px); }
  .task-option { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px); }
  .task-pending { grid-column: 1 / -1; justify-self: end; }
  .task-rule-control { grid-column: 1 / -1; justify-items: start; }
}
@media (max-width: 520px) {
  .settings-launcher { display: grid; grid-template-columns: 1fr; }
  .settings-dialog { max-height: calc(100vh - 16px); max-width: calc(100vw - 16px); width: 100%; }
  .settings-dialog-header { padding: 17px 16px 14px; }
  .settings-dialog .credential-form, .settings-dialog .wecom-form { padding: 16px; }
  .dialog-subsection-heading { padding: 14px 16px 0; }
  .settings-dialog .dialog-switch { align-items: flex-start; display: grid; gap: 8px; }
  .settings-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .rejection-image-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-image-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-row { align-items: stretch; grid-template-columns: 1fr; padding: 12px 16px; }
  .account-row-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-row-actions:has(.test-wecom) { grid-template-columns: repeat(3, 1fr); }
  .task-option { align-items: stretch; grid-template-columns: 1fr; }
  .task-rule-switch { align-items: flex-start; display: grid; }
  .task-pending { grid-column: auto; justify-self: start; }
  .detail-summary { grid-template-columns: 1fr; }
  .detail-actions { align-items: stretch; display: grid; }
}