/* 0902 visual preview only. Colors and surfaces change; geometry and behavior stay intact. */
:root{
  --nav:#081b3a;
  --nav2:#0e1c35;
  --primary:#315efb;
  --primary2:#284dce;
  --bg:#f4f7fb;
  --card:#fff;
  --line:#e3e9f1;
  --text:#172033;
  --muted:#667085;
  --green:#2f9e6d;
  --orange:#e49a2f;
  --red:#e05252;
  --shadow:0 2px 10px rgba(16,24,40,.05);
  --preview-soft:#f8fafe;
  --preview-divider:#eef2f6;
}

html,body,.app-shell{background:#f4f7fb;color:#172033}
body,button,input,select,textarea,table{font-family:var(--user-interface-font,"Microsoft YaHei UI","Microsoft YaHei","Segoe UI",Arial,sans-serif);font-weight:400}

/* Navigation: preserve both rail widths and all menu positions. */
.primary-rail{background:#071a38;border-right:1px solid rgba(255,255,255,.06);box-shadow:none}
.primary-mark{background:#315efb;border:1px solid rgba(255,255,255,.16);box-shadow:none}
.primary-nav-item{color:#9aa9c1;transition:background-color .15s ease,color .15s ease}
.primary-nav-item:hover{background:rgba(255,255,255,.055);color:#f4f7fb}
.primary-nav-item.active{background:#24499a;color:#fff;box-shadow:inset 3px 0 0 #7aa2ff}
.primary-nav-item i{color:inherit}
.sidebar{background:#0e1c35;box-shadow:4px 0 14px rgba(7,26,56,.08)}
.brand{background:#0e1c35;border-bottom-color:rgba(255,255,255,.075)}
.brand b{color:#fff;font-weight:600}
.brand span{color:#8493aa;font-weight:400}
.nav-group-title{color:#d5deeb;font-weight:600}
.nav-group-title b{background:rgba(255,255,255,.07);color:#91a0b6}
.nav-group-title:hover{background:rgba(255,255,255,.035);color:#fff}
.nav-item{color:#aab5c7;transition:background-color .15s ease,color .15s ease}
.nav-item:hover{background:rgba(255,255,255,.055);color:#fff}
.nav-item.active{background:#24499a;color:#fff;box-shadow:inset 3px 0 0 #7aa2ff}
.nav-badge,.pending-badge,.patrol-badge{background:#e05252;color:#fff;box-shadow:none}
.sidebar-foot{background:#0b192f;border-top-color:rgba(255,255,255,.075);color:#91a0b6}

.status-dot{background:#2f9e6d;box-shadow:0 0 0 3px rgba(47,158,109,.14)}

/* Header: no height, spacing, ordering or control-size changes. */
.topbar{background:#fff;border-bottom:1px solid #e3e9f1;box-shadow:0 1px 0 rgba(16,24,40,.015)}
.topbar h1{color:#172033;font-weight:600;letter-spacing:-.2px}
.topbar p,.date-chip{color:#667085;font-weight:400}
.ui-line-icon{color:#315efb}

/* Controls: preserve dimensions and positions. */
.btn,.display-mode-select,.search,.filter,input,select,textarea{
  border-color:#dfe5ed;background:#fff;color:#344054;box-shadow:none;
  transition:border-color .15s ease,background-color .15s ease,color .15s ease;
}
.btn:hover{background:#f8fafe;border-color:#c8d1de;color:#172033;filter:none;transform:none}
.btn.primary,.selector-start{background:#315efb;border-color:#315efb;color:#fff;box-shadow:none}
.btn.primary:hover,.selector-start:hover{background:#284dce;border-color:#284dce;color:#fff}
.btn.ghost{background:#fff;border-color:#dfe5ed;color:#344054}
.btn.link,.code-link,.business-table a{background:transparent;border-color:transparent;color:#315efb}
.btn.link:hover,.code-link:hover,.business-table a:hover{background:transparent;color:#284dce}
.btn.danger{background:#fff7f7;border-color:#f0d0d0;color:#b63d3d}
.btn.danger:hover{background:#fff0f0;border-color:#e6b7b7;color:#a93232}
.alert-button{background:#fff8eb;border-color:#f2d7a5;color:#9f651b}
.alert-button:hover{background:#fff3d8;border-color:#e9c47f;color:#8b5716}
input:focus,select:focus,textarea:focus,.search:focus,.filter:focus{
  border-color:#315efb;box-shadow:0 0 0 2px rgba(49,94,251,.08);outline:none;
}
input::placeholder,textarea::placeholder{color:#98a2b3}
input:disabled,select:disabled,textarea:disabled{background:#f2f4f7;border-color:#e4e7ec;color:#98a2b3}
input[type="checkbox"],input[type="radio"]{accent-color:#315efb}

/* Cards and panels: use the same surfaces without changing their grid or size. */
.panel,.metric-card,.business-card,.business-summary,.qc-po-card,.qc-guide section,
.setting-card,.center-overview-card,.order-kpi,.order-chart-grid>section,.order-batch-card,
.qc-context-card,.coverage-card,.completion-card,.account-scope,.order-permission-card{
  background:#fff;border-color:#e3e9f1;border-radius:8px;box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.panel-head,.modal-head,.modal-foot,.qc-po-head,.business-card>header{border-color:#eef2f6}
.panel-title,.panel-head h2,.panel-head h3,.business-card h3,.qc-po-head h3{color:#172033;font-weight:600}
.panel-subtitle,.setting-card>p,.empty,.empty-business,.qc-empty{color:#98a2b3;font-weight:400}
.metric-card,.business-kpis button,.qc-dashboard-kpis button,.center-overview-card{
  border-color:#e3e9f1;border-radius:8px;box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.metric-card:after,.qc-dashboard-kpis button:after{background:#f0f4ff;opacity:.7}
.metric-card .label,.business-kpis span,.qc-dashboard-kpis span,.center-overview-card span{color:#667085;font-weight:400}
.metric-card .value,.business-kpis b,.qc-dashboard-kpis b,.center-overview-card b{color:#172033;font-weight:600}
.metric-card .hint,.business-kpis small,.qc-dashboard-kpis small,.center-overview-card small{color:#98a2b3;font-weight:400}
.metric-link:hover,.business-kpis button:hover,.qc-dashboard-kpis button:hover,.center-overview-card:hover{
  border-color:#cfd9ea;background:#fbfcff;box-shadow:0 3px 12px rgba(16,24,40,.07);transform:none;
}
.business-hero,.qc-dashboard-hero,.help-hero{background:#fff;border:1px solid #e3e9f1;border-radius:8px;box-shadow:0 2px 10px rgba(16,24,40,.05);color:#172033}
.business-hero:before,.qc-dashboard-hero:before,.help-hero:before{display:none}
.business-hero h2,.qc-dashboard-hero h2,.help-hero h2{color:#172033;font-weight:600}
.business-hero p,.qc-dashboard-hero p,.help-hero p{color:#667085}
.hero-data>div{background:#f8fafe;border-color:#e3e9f1}
.hero-data b{color:#172033;font-weight:600}
.hero-data span{color:#667085}
.business-alert,.audit-banner,.order-warning,.compliance-note,.form-note{border-radius:8px;box-shadow:none}

/* Tables: keep column geometry, row height, alignment, scrolling and sticky rules. */
table{background:#fff;color:#344054}
thead th,table th,.qc-line-table th,.qc-guide-table th{
  background:#f6f8fc;color:#475467;border-color:#e3e9f1;font-weight:600;vertical-align:middle;
}
tbody td,table td,.qc-line-table td,.qc-guide-table td{color:#344054;border-color:#eef2f6}
tbody tr:hover td,table tbody tr:hover td{background:#f8faff}
.table-wrap thead th:first-child,.table-wrap thead th:last-child{background:#f6f8fc}
.table-wrap tbody td:last-child{background:#fff;box-shadow:-8px 0 12px -12px rgba(16,24,40,.22)}
.table-wrap tbody tr:hover td:last-child{background:#f8faff}
.pagination{background:#fff;border-color:#eef2f6;color:#667085}
.pagination b{color:#344054;font-weight:500}

/* Status labels: shallow background + dark text; state names and logic are untouched. */
.tag,.status,.qc-status,.order-status,.qc-purchase-status{border:1px solid transparent;box-shadow:none;font-weight:500}
.tag.green,.status.green,.qc-status.green{background:#eaf7f1;color:#237a54;border-color:#d6eee3}
.tag.orange,.status.orange,.qc-status.orange{background:#fff5e6;color:#a86716;border-color:#f4e2c2}
.tag.red,.status.red,.qc-status.red{background:#fff0f0;color:#b43e3e;border-color:#f2d6d6}
.tag.blue,.status.blue,.qc-status.blue{background:#edf4ff;color:#2f66b5;border-color:#d9e8fb}
.tag.gray,.status.gray,.qc-status.gray{background:#f2f4f7;color:#667085;border-color:#e4e7ec}
.tag.purple,.status.purple,.qc-status.purple{background:#f4f0ff;color:#6c52a8;border-color:#e6def8}
.danger-text,.conflict-text{color:#c44343}
.warning-text{color:#b4761f}

/* Modal and drawer surfaces, with original dimensions and controls preserved. */
.modal-wrap{background:rgba(7,18,38,.54);backdrop-filter:none}
.modal,.action-menu-popover,.login-card{background:#fff;border-color:#e3e9f1;border-radius:10px;box-shadow:0 18px 48px rgba(7,18,38,.2)}
.modal-head h2{color:#172033;font-weight:600}
.modal-head p{color:#667085;font-weight:400}
.modal-head,.modal-foot{border-color:#eef2f6}
.modal-foot{background:#fbfcfe}
.icon-btn{color:#667085;background:#fff;border-color:#e3e9f1}
.icon-btn:hover{color:#172033;background:#f4f7fb}

/* Restrained interactions only. */
.btn,.nav-item,.primary-nav-item,input,select,textarea,tbody tr{transition-duration:.15s;transition-timing-function:ease}
@media (prefers-reduced-motion:reduce){.btn,.nav-item,.primary-nav-item,input,select,textarea,tbody tr{transition:none}}

/* Final confirmation pass: stronger hierarchy without changing geometry. */
:root{
  --bg:#eef3f8;
  --preview-layer:#f7f9fc;
  --preview-layer-strong:#f1f5f9;
  --preview-navy:#203a63;
  --preview-neutral:#60708a;
}

html,body,.app-shell,.content{background:#eef3f8}
.primary-nav-item.active{background:#1f3f78;box-shadow:inset 3px 0 0 #7095e8}
.nav-item.active{background:#203d70;box-shadow:inset 3px 0 0 #7095e8}
.nav-item:hover,.primary-nav-item:hover{background:rgba(255,255,255,.045)}
.nav-badge,.pending-badge,.patrol-badge{background:#c94f55}

.topbar{box-shadow:0 1px 3px rgba(16,24,40,.04)}
.topbar h1{font-weight:600}
.topbar p,.date-chip{color:#667085}
.top-actions .btn,.top-actions .display-mode-select{background:#fbfcfe}

/* Imported-data banner and compact summaries use neutral ink, not universal blue. */
.import-banner,.business-alert,.audit-banner,.order-warning,.compliance-note,.official-query-box{
  background:#f7f9fc;border-color:#dce4ee;box-shadow:none;
}
.import-numbers strong,.import-numbers b,.import-numbers .num,
.business-summary strong,.business-summary b,.business-summary .num{
  color:#172033;font-weight:600;
}
.import-numbers>div,.business-summary button{background:transparent;border-color:transparent}

/* Metrics remain the same size and position. The status rail is drawn inside each card. */
.metric-card,.business-kpis button,.qc-dashboard-kpis button,.order-kpi{
  position:relative;background:#fff;border:1px solid #dfe6ef;border-radius:8px;
  box-shadow:0 2px 8px rgba(16,24,40,.045);overflow:hidden;
}
.metric-card:before,.business-kpis button:before,.qc-dashboard-kpis button:before,.order-kpi:before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;
  background:var(--accent,#74839a);opacity:.9;
}
.metric-card:after,.business-kpis button:after,.qc-dashboard-kpis button:after{display:none}
.metric-card .label,.business-kpis span,.qc-dashboard-kpis span,.order-kpi>span{color:#667085}
.metric-card .value,.business-kpis b,.qc-dashboard-kpis b,.order-kpi>b{color:#172033;font-weight:600}
.metric-card .hint,.business-kpis small,.qc-dashboard-kpis small,.order-kpi>small{color:#7d8899}
.metric-card .label .ui-line-icon{display:none}
.metric-link:hover,.business-kpis button:hover,.qc-dashboard-kpis button:hover{
  background:#fbfcfe;border-color:#cbd6e4;box-shadow:0 3px 10px rgba(16,24,40,.065);
}

/* Limit dashboard emphasis to neutral, reminder and abnormal colors. */
body[data-page="dashboard"] .metric-grid .metric-card{--accent:#74839a!important}
body[data-page="dashboard"] .metric-grid .metric-card:nth-child(2){--accent:#d08a2f!important}
body[data-page="dashboard"] .metric-grid .metric-card:nth-child(4){--accent:#cc5353!important}

/* The completeness strip becomes a secondary layer rather than another white card. */
.quality-strip,.quality-role-strip{
  background:#f7f9fc;border:1px solid #dfe6ef;border-radius:8px;box-shadow:none;
}
.quality-strip>b,.quality-role-strip>b{color:#344054;font-weight:600}
.quality-strip button,.quality-role-strip button{
  background:#fff;border:1px solid #e3e9f1;color:#667085;box-shadow:0 1px 2px rgba(16,24,40,.025);
}
.quality-strip button:hover,.quality-role-strip button:hover{background:#f4f7fb;border-color:#cbd6e4;color:#344054}
.quality-strip strong,.quality-role-strip strong{color:#172033;font-weight:600}

/* Panels: tinted headers and neutral bodies establish distinct sections. */
.panel,.business-card,.qc-po-card,.order-batch-card{border-color:#dfe6ef;box-shadow:0 2px 8px rgba(16,24,40,.045)}
.panel-head,.business-card>header,.qc-po-head,.order-batch-head{
  background:#f7f9fc;border-bottom:1px solid #e3e9f1;
}
.panel-title,.panel-head h2,.panel-head h3,.business-card h3,.qc-po-head h3{color:#172033;font-weight:600}
.panel-body{background:#fff}
.expiry-list,.error-list,.detail-list,.notification-list{background:#f8fafc}
.expiry-item,.link-item,.candidate-card,.completion-card{
  background:#fff;border-color:#e3e9f1;box-shadow:0 1px 3px rgba(16,24,40,.035);
}

/* Overview cards use three restrained center colors already tied to their real modules. */
.business-hero,.qc-dashboard-hero,.help-hero{
  background:#f7f9fc;border-color:#dce4ee;box-shadow:0 2px 8px rgba(16,24,40,.04);
}
.center-overview-card{background:#fff;border-color:#dfe6ef;box-shadow:0 2px 8px rgba(16,24,40,.045)}
.center-overview-card.new{--center-color:#3d6fc3}
.center-overview-card.compliance{--center-color:#6a6f9d}
.center-overview-card.quality{--center-color:#3f8b70}
.center-overview-card:hover{background:#fbfcfe;border-color:#cbd6e4;box-shadow:0 3px 10px rgba(16,24,40,.06)}

/* Table hierarchy, keeping every original width, height and alignment rule. */
thead th,table th,.qc-line-table th,.qc-guide-table th{background:#f3f6fa;color:#475467;border-color:#dfe6ef}
tbody td,table td,.qc-line-table td,.qc-guide-table td{border-color:#edf1f5}
tbody tr:hover td,table tbody tr:hover td{background:#f5f8fc}
.table-wrap thead th:first-child,.table-wrap thead th:last-child{background:#f3f6fa}
.table-wrap tbody tr:hover td:last-child{background:#f5f8fc}
.pagination{background:#f9fbfd;border-color:#e3e9f1}

/* Keep true status semantics, but reduce saturation. */
.tag.green,.status.green,.qc-status.green{background:#edf7f2;color:#287757;border-color:#d8ebe2}
.tag.orange,.status.orange,.qc-status.orange{background:#fff6e9;color:#9c681f;border-color:#f0e0c5}
.tag.red,.status.red,.qc-status.red{background:#fff1f1;color:#aa4141;border-color:#efd7d7}
.tag.blue,.status.blue,.qc-status.blue{background:#eef4fb;color:#35659d;border-color:#dce7f4}
.tag.gray,.status.gray,.qc-status.gray{background:#f2f4f7;color:#667085;border-color:#e4e7ec}

/* Secondary text remains readable during long use. */
small,.muted,.panel-subtitle,.metric-card .hint{color:#7d8899}
.btn.link,.code-link,.business-table a{color:#315efb}

/* 删除入口与其他文字操作保持同色，风险由确认和权限校验表达。 */
.btn.delete-neutral,
.btn[data-action*="delete"],
.btn[data-action*="purge"],
.btn[data-action*="void"]{
  color:inherit!important;
  border-color:var(--line,#e3e9f1);
  background:transparent;
}
.btn.link[data-action*="delete"],
.btn.link[data-action*="purge"],
.btn.link[data-action*="void"]{
  color:var(--primary,#315efb)!important;
  border:0;
}
select,select option,.field select,.filter{font-weight:400!important}