:root {
  --navy: #1e3a5f;
  --blue: #2563eb;
  --green: #16803c;
  --ink: #0f172a;
  --muted: #526174;
  --line: #cbd5e1;
  --soft: #eef3f8;
  --surface: #ffffff;
  --canvas: #f8fafc;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: #e8eef5; }
.login-shell { width: min(960px, 100%); min-height: 580px; display: grid; grid-template-columns: 1.08fr 0.92fr; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12); }
.brand-panel { background: var(--navy); color: #fff; padding: 56px; display: flex; flex-direction: column; align-items: flex-start; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid currentColor; font-size: 24px; font-weight: 700; }
.brand-mark-small { width: 32px; height: 32px; font-size: 15px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0; }
.brand-panel .eyebrow { margin-top: 32px; color: #cbd9e8; }
h1, h2, h3, p { margin-top: 0; }
.brand-panel h1 { margin-bottom: 18px; font-size: 34px; line-height: 1.25; }
.brand-copy { max-width: 360px; color: #d9e5f1; font-size: 16px; line-height: 1.75; }
.assurance-list { width: 100%; margin: auto 0 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.assurance-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 14px; }
.assurance-list dt { color: #d9e5f1; }.assurance-list dd { margin: 0; font-weight: 700; }
.login-card { padding: 56px 48px; align-self: center; }.login-card h2 { font-size: 26px; margin-bottom: 10px; }.muted { color: var(--muted); line-height: 1.6; }
fieldset { border: 0; padding: 0; margin: 30px 0 22px; } legend { margin-bottom: 12px; font-size: 14px; font-weight: 700; }
.user-option { display: flex; gap: 12px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background-color .2s; }
.user-option:hover { border-color: var(--blue); background: #f8fbff; }.user-option input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); }
.user-option strong, .user-option small { display: block; }.user-option small { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.button { min-height: 44px; border: 0; padding: 10px 18px; cursor: pointer; font-weight: 700; transition: background-color .2s, transform .2s; }.button:hover { transform: translateY(-1px); }.button-primary { width: 100%; color: #fff; background: var(--blue); }.button-primary:hover { background: #1d4ed8; }
.login-button { display: grid; place-items: center; text-decoration: none; }
.form-error { margin: 18px 0 0; padding: 12px; color: #991b1b; background: #fef2f2; border: 1px solid #fca5a5; line-height: 1.5; }.login-note { margin: 24px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.app-page { display: flex; min-height: 100vh; }.sidebar { width: 238px; flex: 0 0 238px; display: flex; flex-direction: column; color: #dce8f3; background: var(--navy); padding: 24px 16px; }.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 30px; color: #fff; font-size: 17px; font-weight: 700; }.sidebar nav { display: grid; gap: 6px; }.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; color: inherit; text-decoration: none; border-left: 3px solid transparent; }.nav-item.is-active { color: #fff; background: rgba(255, 255, 255, .12); border-left-color: #77a7ff; }.nav-item.is-disabled { color: #a8bbcf; cursor: not-allowed; }.sidebar-note { margin: auto 8px 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); color: #c1d0df; font-size: 13px; line-height: 1.6; }
.workspace { width: 100%; padding: 32px 40px 48px; }.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }.topbar .eyebrow { margin-bottom: 4px; }.topbar h1 { margin: 0; font-size: 28px; }.user-menu { display: flex; align-items: center; gap: 10px; }.avatar { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--green); border-radius: 50%; }.user-menu strong, .user-menu small { display: block; }.user-menu small { margin-top: 2px; color: var(--muted); font-size: 12px; }.text-button { min-height: 44px; padding: 0 8px; border: 0; color: var(--navy); background: transparent; cursor: pointer; text-decoration: underline; }
.status-banner { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 13px 16px; color: #14532d; background: #ecfdf3; border: 1px solid #86efac; line-height: 1.5; }.status-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--green); }.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }.metric-card, .panel { background: var(--surface); border: 1px solid var(--line); }.metric-card { padding: 20px; }.metric-card p { margin-bottom: 12px; color: var(--muted); font-size: 14px; }.metric-card strong { display: block; margin-bottom: 9px; font-size: 30px; }.metric-card small { color: var(--muted); font-size: 13px; }.content-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 16px; margin-top: 16px; }.panel { padding: 24px; }.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.panel h2 { margin-bottom: 0; font-size: 20px; }.pill { display: inline-block; padding: 4px 9px; color: var(--navy); background: var(--soft); font-size: 13px; font-weight: 700; }.empty-state { min-height: 240px; display: grid; justify-items: center; align-content: center; text-align: center; }.empty-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; color: var(--navy); background: var(--soft); font-size: 25px; }.empty-state h3 { margin-bottom: 8px; font-size: 17px; }.empty-state p { max-width: 390px; margin-bottom: 0; color: var(--muted); line-height: 1.65; }.process-list { display: grid; gap: 17px; margin: 24px 0 0; padding: 0; list-style: none; }.process-list li { display: flex; align-items: center; gap: 12px; color: #334155; line-height: 1.5; }.process-list span { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; color: var(--navy); background: var(--soft); font-size: 13px; font-weight: 700; }
.upload-panel { margin-bottom: 16px; }.upload-limit { color: var(--muted); font-size: 13px; font-weight: 700; }.upload-form { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; align-items: center; gap: 12px; margin-top: 20px; }.upload-form label { font-weight: 700; }.upload-form input[type="file"] { min-height: 44px; padding: 9px; border: 1px dashed var(--line); background: #fbfdff; }.upload-form small { grid-column: 2 / 3; margin-top: -6px; color: var(--muted); line-height: 1.5; }.upload-button { grid-column: 3; grid-row: 1 / span 2; white-space: nowrap; }.status-pill { display: inline-block; padding: 4px 8px; color: #14532d; background: #ecfdf3; font-size: 12px; font-weight: 700; }.task-table-wrap { overflow-x: auto; margin-top: 20px; }.task-table { width: 100%; border-collapse: collapse; font-size: 13px; }.task-table th, .task-table td { padding: 12px 10px; border-bottom: 1px solid var(--soft); text-align: left; white-space: nowrap; }.task-table th { color: var(--muted); font-size: 12px; }
.task-link, .back-link { color: var(--blue); font-weight: 700; text-decoration: none; }.task-link:hover, .back-link:hover { text-decoration: underline; }.status-processing { color: #1d4ed8; background: #eff6ff; }.status-pending_confirmation { color: #854d0e; background: #fef9c3; }.status-written { color: #14532d; background: #dcfce7; }.status-manual_handling { color: #7c2d12; background: #ffedd5; }.status-failed { color: #991b1b; background: #fef2f2; }.task-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 18px 0 16px; }.task-header h2 { margin-bottom: 8px; }.processing-state { min-height: 260px; display: grid; justify-items: center; align-content: center; text-align: center; }.processing-state p { max-width: 480px; color: var(--muted); line-height: 1.65; }.loading-mark { width: 38px; height: 38px; margin-bottom: 16px; border: 4px solid var(--soft); border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }.detail-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); gap: 16px; }.field-list { margin: 20px 0 0; }.field-list div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1.3fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--soft); }.field-list dt { color: var(--muted); }.field-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }.result-block { margin-top: 18px; padding: 16px; background: var(--soft); border-left: 3px solid var(--navy); }.result-block h3 { margin-bottom: 8px; font-size: 15px; }.result-block p { margin: 0; line-height: 1.65; }.decision-actions { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }.decision-actions p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }.button-secondary { color: #7c2d12; background: #ffedd5; border: 1px solid #fdba74; }.button-secondary:hover { background: #fed7aa; }.decision-result { margin-top: 18px; padding: 16px; background: #f8fafc; border-left: 3px solid var(--green); }.decision-result h3 { margin-bottom: 8px; font-size: 15px; }.decision-result p { margin-bottom: 8px; line-height: 1.6; }.decision-result p:last-child { margin-bottom: 0; }@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .workspace { padding: 28px 24px 40px; }.metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.content-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .auth-page { padding: 0; place-items: stretch; }.login-shell { min-height: 100vh; grid-template-columns: 1fr; border: 0; box-shadow: none; }.brand-panel, .login-card { padding: 32px 24px; }.brand-panel h1 { font-size: 28px; }.assurance-list { margin-top: 30px; }.app-page { display: block; }.sidebar { width: 100%; min-height: auto; padding: 16px; }.sidebar-brand { padding-bottom: 14px; }.sidebar nav { grid-template-columns: repeat(3, 1fr); gap: 4px; }.nav-item { justify-content: center; padding: 0 6px; font-size: 13px; }.nav-item .nav-icon { display: none; }.sidebar-note { display: none; }.workspace { padding: 24px 16px 32px; }.topbar { align-items: flex-start; }.topbar h1 { font-size: 24px; }.user-menu small { display: none; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.metric-card { padding: 15px; }.panel { padding: 18px; }.upload-form { grid-template-columns: 1fr; }.upload-form small { grid-column: 1; margin-top: 0; }.upload-button { grid-column: 1; grid-row: auto; width: 100%; }.task-header, .detail-grid { grid-template-columns: 1fr; display: grid; }.task-header .status-pill { justify-self: start; }.decision-actions { grid-template-columns: 1fr; }.decision-actions .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

.sidebar .is-disabled { display: none; }
.task-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.filter-link { min-height: 36px; display: inline-flex; align-items: center; padding: 7px 11px; color: var(--navy); background: var(--soft); border: 1px solid var(--line); font-size: 13px; font-weight: 700; text-decoration: none; }
.filter-link:hover { border-color: var(--blue); background: #f8fbff; }.filter-link.is-active { color: #fff; background: var(--navy); border-color: var(--navy); }
.task-records-panel { padding-bottom: 8px; }.task-records-panel .task-table th, .task-records-panel .task-table td { white-space: normal; vertical-align: top; }.task-records-panel .task-table td { min-width: 110px; }.task-records-panel .task-table td:first-child { min-width: 210px; }.task-records-panel .task-table td:nth-child(2) { min-width: 160px; overflow-wrap: anywhere; }
.decision-cell { min-width: 190px !important; color: var(--muted); line-height: 1.5; }.decision-cell strong { display: block; color: var(--ink); }.decision-cell small { display: block; margin-top: 4px; }
.nav-alert { width: 9px; height: 9px; flex: 0 0 auto; margin-left: auto; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--navy); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.upload-feedback { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px; color: #1d4ed8; background: #eff6ff; border: 1px solid #93c5fd; line-height: 1.5; }.upload-feedback.is-error { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }.upload-loading-mark { width: 18px; height: 18px; margin: 0; border-width: 3px; }.upload-feedback .task-link { margin-left: auto; white-space: nowrap; }
.button:disabled { cursor: wait; opacity: .65; transform: none; }.status-pill { position: relative; }.task-alert { display: inline-block; width: 7px; height: 7px; margin-left: 6px; vertical-align: middle; border-radius: 50%; background: #dc2626; }
.contract-type-fieldset { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }.contract-type-fieldset legend { width: 100%; margin-bottom: 2px; }.contract-type-fieldset legend span { color: #dc2626; }.contract-type-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); background: #fbfdff; cursor: pointer; font-weight: 700; }.contract-type-option:hover { border-color: var(--blue); background: #f8fbff; }.contract-type-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }.payment-schedule-title { margin: 24px 0 0; font-size: 16px; }.payment-schedule td:last-child { min-width: 180px; white-space: normal; line-height: 1.5; }