:root{--primary:#167d65;--primary-dark:#0d6752;--bg:#f3f6f5;--panel:#fff;--text:#26342f;--muted:#77827e;--line:#e2e9e6;--danger:#c94d4d;--warn:#d88724}
*{box-sizing:border-box}body{margin:0;font-family:"Microsoft YaHei",Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px}button,input,select,textarea{font:inherit}.hidden{display:none!important}
.login-screen{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#103c32,#198269)}.login-card{width:min(390px,90vw);padding:36px;background:#fff;border-radius:18px;box-shadow:0 25px 70px #072a2366;display:grid;gap:15px}.logo{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--primary);color:#fff;font-size:25px;font-weight:bold}.login-card h1{margin:0;font-size:22px}.login-card p{margin:-6px 0 7px;color:var(--muted)}label{display:grid;gap:7px;color:#5d6965}.login-card input,.form-grid input,.form-grid select,.form-grid textarea,.toolbar input,.toolbar select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;outline:none}.error-text{color:var(--danger);min-height:18px}
.app{min-height:100vh;display:grid;grid-template-columns:220px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#153d34;color:#dcebe6;padding:20px 14px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 8px 20px}.brand>span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#fff;color:var(--primary);font-size:22px;font-weight:bold}.brand strong,.brand small{display:block}.brand small{color:#94b7ac;margin-top:4px}.sidebar nav{display:grid;gap:5px}.nav-item{border:0;border-radius:8px;padding:11px 13px;text-align:left;background:transparent;color:#cfe3dc;cursor:pointer}.nav-item:hover,.nav-item.active{background:#fff;color:#174c3e;font-weight:bold}.nav-label{padding:15px 12px 5px;color:#7fa99c;font-size:10px}.user-box{margin-top:auto;padding:13px;background:#0d3028;border-radius:10px}.user-box strong,.user-box small{display:block}.user-box small{color:#8fb6aa;margin:5px 0 10px}.user-box button{border:0;background:transparent;color:#c4ddd5;padding:0;cursor:pointer}
main{min-width:0;padding:0 26px 35px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between}.topbar h1{margin:0;font-size:23px}.topbar p{margin:6px 0 0;color:var(--muted)}.page{display:none}.page.active{display:block}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.stat,.stats-row>div{padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px}.stat span,.stats-row span{display:block;color:var(--muted);font-size:11px}.stat strong,.stats-row strong{display:block;margin-top:9px;font-size:22px}.stats-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:15px}.stats-row>div{min-width:170px}.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:15px;overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}.panel-head h2,.panel-head h3{margin:0;font-size:16px}.notice{padding:22px;line-height:1.8;color:var(--muted)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:15px}.filters{display:flex;gap:9px;flex:1}.filters input{min-width:280px}.filter-reset{width:40px;min-width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:#52615c;cursor:pointer;font-size:17px}.filter-reset:hover{border-color:var(--primary);background:#edf7f3}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.button{border:0;border-radius:8px;padding:10px 15px;font-weight:bold;cursor:pointer}.button.primary{background:var(--primary);color:#fff}.button.primary:hover{background:var(--primary-dark)}.button.ghost{background:#fff;border:1px solid var(--line);color:#52615c}.button.danger{background:#fff0f0;color:var(--danger);border:1px solid #f3cccc}.auxiliary-out-button{background:#26769b!important}.admin-data-panel .panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.admin-data-actions{display:flex;gap:10px;flex-wrap:wrap;padding:16px 18px}
.module-tabs{display:flex;gap:7px;margin-bottom:15px;padding:5px;background:#e9efed;border-radius:10px;width:max-content;max-width:100%;overflow:auto}.module-tabs button{border:0;border-radius:7px;padding:9px 15px;background:transparent;color:#60706a;white-space:nowrap;cursor:pointer}.module-tabs button.active{background:#fff;color:var(--primary);font-weight:bold;box-shadow:0 2px 8px #143d3414}
.wage-tabs{background:#f1f5f3;margin-top:2px}.wage-tabs button.active{box-shadow:none;border:1px solid #d9e5e1}.salary-card{border-left:4px solid var(--primary)}
.knife-working-controls{display:flex;align-items:center;gap:9px}.knife-working-controls select{min-width:145px;padding:10px 34px 10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#52615c;outline:none;cursor:pointer}.knife-working-controls select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #167d6518}
.balance-collapse{margin-bottom:15px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.balance-collapse summary{display:flex;justify-content:space-between;align-items:center;padding:15px 19px;cursor:pointer;font-weight:bold}.balance-collapse summary::marker{color:var(--primary)}.balance-collapse-body{display:flex;align-items:flex-end;gap:14px;padding:0 18px 18px}.balance-collapse-body .account-cards{flex:1;padding:0}.audit-details{max-width:650px;white-space:normal}.audit-details summary{cursor:pointer;color:var(--primary)}.audit-change{display:grid;grid-template-columns:130px 1fr;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line)}.paper-error-row td{background:#fff7c7!important;color:#20271f}.paper-pending-row td{background:#f5f7f6}.paper-target-row td{animation:paper-target-flash .6s ease 3}.tag.pending{background:#eef1f0;color:#687570}.tag.cleared{background:#e8f3fa;color:#24739a}.paper-stat-card{min-width:210px;padding:18px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;cursor:pointer;color:var(--text);transition:.18s}.paper-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #153d3414;border-color:#b9d5cc}.paper-stat-card span{display:block;color:var(--muted);font-size:11px}.paper-stat-card strong{display:block;margin-top:9px;font-size:22px}.paper-stat-card.warning strong{color:#c56d14}.paper-stat-card.pending strong{color:#687570}.paper-daily-amounts{display:grid;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}.paper-daily-amounts>div{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}.paper-daily-amounts>div:last-child{border-bottom:0}.paper-daily-amounts strong{color:var(--primary)}@keyframes paper-target-flash{50%{background:#dff5ed}}.weight-pair{display:grid;grid-template-columns:1fr 1fr;gap:15px;grid-column:1/-1}.vehicle-input-wrap{position:relative}
.table-panel{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}th{font-size:11px;color:#6d7975;background:#fafcfb}td{font-size:12px}.table-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 14px;background:#fafcfb;color:#66736e;font-size:12px}.table-pagination-top{border-bottom:1px solid var(--line)}.table-pagination-bottom{border-top:1px solid var(--line)}.pagination-info{white-space:nowrap}.pagination-pages{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.table-pagination button{border:1px solid var(--line);border-radius:7px;background:#fff;color:#52615c;padding:6px 10px;cursor:pointer}.table-pagination button.page-number{min-width:34px;padding:6px 9px}.table-pagination button:not(:disabled):hover{border-color:var(--primary);color:var(--primary)}.table-pagination button.active{background:var(--primary);border-color:var(--primary);color:#fff;opacity:1}.table-pagination button:disabled{opacity:.45;cursor:not-allowed}.table-pagination button.active:disabled{opacity:1}.pagination-ellipsis{padding:0 5px;color:#8a9692}.table-pagination label{display:flex;align-items:center;gap:6px;white-space:nowrap}.table-pagination select{padding:6px 22px 6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#52615c}.tag{display:inline-flex;padding:4px 8px;border-radius:99px;font-size:10px;font-weight:bold}.tag.income,.tag.ok{background:#e6f5ef;color:#167d65}.tag.expense,.tag.out,.tag.warn{background:#fff0e3;color:#c56d14}.tag.aux-out{background:#e8f3fa;color:#24739a}.material-category-tag,.material-subcategory-tag{display:inline-flex;align-items:center;margin-right:5px;padding:4px 8px;border-radius:99px;font-size:10px;font-weight:bold}.material-subcategory-tag{background:#f1f5f4;color:#5f6c68}.category-glue{background:#e5f1ff;color:#1d68a7}.category-carton{background:#e6f5ef;color:#167d65}.category-film{background:#f0e9ff;color:#6840a6}.category-foil{background:#fff0e3;color:#c56d14}.category-unknown{background:#f2f5f4;color:#687570}.money-in{color:#178261;font-weight:bold}.money-out{color:#c65050;font-weight:bold}.numeric{text-align:right;font-variant-numeric:tabular-nums}.auxiliary-amount{font-weight:bold}.row-actions{display:flex;gap:7px}.row-actions button{border:0;background:transparent;color:var(--primary);cursor:pointer}.row-actions button:disabled{color:#8a9692;cursor:default}.row-actions .delete{color:var(--danger)}.advance-deducted td{background:#f2f5f4;color:#7b8783}.auxiliary-calculation{padding:12px 14px;border-radius:8px;background:#edf7f3;color:#176d59}.auxiliary-calculation.warning{background:#fff8db;color:#8a6412}.empty{padding:28px;text-align:center;color:var(--muted)}.account-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:18px}.account-card{padding:14px;border:1px solid var(--line);border-radius:9px}.account-card strong{display:block;margin-top:8px}.warning-row{display:flex;justify-content:space-between;padding:13px 20px;border-bottom:1px solid var(--line);cursor:pointer}.warning-row:hover{background:#fffaf2}.warning-row strong{color:var(--danger)}
.list-card{padding:14px 18px;border-bottom:1px solid var(--line)}.list-card strong{display:block}.list-card small{color:var(--muted)}.admin-card-actions{margin-top:10px}.admin-card-actions .button{padding:7px 11px}.backup-cleanup-bar{padding:14px 18px;background:#fafcfb;text-align:right}.price-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.price-chips span{padding:5px 8px;background:#f2f6f4;border-radius:6px;font-size:10px}.user-permissions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.user-permissions label{display:flex;align-items:center;gap:4px;font-size:10px}
.modal-backdrop{display:none;position:fixed;inset:0;z-index:50;background:#09251f99;align-items:center;justify-content:center;padding:20px}.modal-backdrop.open{display:flex}.modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:14px}.modal.paper-batch-modal{width:min(1040px,96vw)}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.modal-head h2{margin:0}.modal-head-actions{display:flex;align-items:center;gap:8px}.modal-close,#modal-add-row{border:0;background:transparent;font-size:24px;cursor:pointer}#modal-add-row{width:36px;height:36px;border-radius:50%;background:#e8f4f0;color:var(--primary);font-weight:bold;line-height:1}#modal-add-row:hover{background:#d8eee7}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:22px 24px}.form-grid .wide{grid-column:1/-1}.paper-batch-total{display:flex;gap:10px;flex-wrap:wrap;padding:13px 15px;border-radius:10px;background:#edf7f3}.paper-batch-total span{padding:6px 10px;border-radius:7px;background:#fff;color:#52615c}.paper-batch-total strong{color:var(--primary)}.paper-batch-list{grid-column:1/-1;display:grid;gap:12px}.paper-batch-row{display:grid;grid-template-columns:140px 1.25fr 1fr 1fr 1.5fr 38px;gap:10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:10px;background:#fafcfb}.paper-batch-row label{min-width:0}.paper-batch-row input,.paper-batch-row select{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:#fff}.paper-batch-remove{height:38px;border:0;border-radius:8px;background:#fff0f0;color:var(--danger);cursor:pointer}.paper-batch-index{grid-column:1/-1;color:var(--muted);font-size:11px;font-weight:bold}.paper-daily-summary{display:grid;grid-template-columns:1fr auto 40px;gap:12px;align-items:end}.paper-daily-summary>div{padding:10px 14px;border-radius:8px;background:#edf7f3}.paper-daily-summary span{display:block;color:var(--muted);font-size:11px}.paper-daily-summary strong{display:block;margin-top:4px;color:var(--primary);font-size:18px}.paper-daily-summary select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line)}.toast{position:fixed;right:24px;bottom:24px;z-index:90;padding:12px 18px;background:#173d34;color:#fff;border-radius:9px;opacity:0;transform:translateY(12px);transition:.2s}.toast.show{opacity:1;transform:none}
@media(max-width:1000px){.app{grid-template-columns:180px 1fr}.stats-grid{grid-template-columns:1fr 1fr}.grid-two{grid-template-columns:1fr}.account-cards{grid-template-columns:1fr 1fr}.toolbar{align-items:stretch;flex-direction:column}.filters{flex-wrap:wrap}.filters input{min-width:0;flex:1}.balance-collapse-body{align-items:stretch;flex-direction:column}.panel-head{align-items:flex-start;gap:12px;flex-wrap:wrap}.knife-working-controls{width:100%;flex-wrap:wrap}.knife-working-controls select{flex:1}.table-pagination{justify-content:flex-start;flex-wrap:wrap}}
@media(max-width:750px){.paper-batch-row{grid-template-columns:1fr 1fr}.paper-batch-index{grid-column:1/-1}.paper-batch-remove{grid-column:2;justify-self:end;width:42px}}@media(max-width:650px){.weight-pair{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}.account-cards{grid-template-columns:1fr}.paper-batch-row{grid-template-columns:1fr}.paper-batch-remove{grid-column:1;justify-self:end}}

/* 侧边栏收起/展开 */
.sidebar-toggle{width:38px;height:38px;margin:0 0 12px 4px;border:1px solid #2d6256;border-radius:10px;background:#0d3028;color:#dcebe6;cursor:pointer;font-size:17px}.sidebar-toggle:hover{background:#fff;color:#174c3e}.app.sidebar-collapsed{grid-template-columns:74px 1fr}.app.sidebar-collapsed .sidebar{padding:18px 10px;align-items:center}.app.sidebar-collapsed .brand{padding:0 0 18px;justify-content:center}.app.sidebar-collapsed .brand div,.app.sidebar-collapsed .nav-label,.app.sidebar-collapsed .user-box strong,.app.sidebar-collapsed .user-box small{display:none}.app.sidebar-collapsed .brand>span{width:42px;height:42px}.app.sidebar-collapsed .sidebar nav{width:100%}.app.sidebar-collapsed .nav-item{position:relative;width:100%;min-height:42px;padding:0;text-align:center;font-size:0}.app.sidebar-collapsed .nav-item::before{content:attr(data-short);font-size:15px;font-weight:bold}.app.sidebar-collapsed .user-box{width:100%;padding:10px 0;text-align:center}.app.sidebar-collapsed .user-box button{font-size:0}.app.sidebar-collapsed .user-box button::before{content:"退";font-size:13px}.app.sidebar-collapsed main{padding-left:22px}@media(max-width:1000px){.app.sidebar-collapsed{grid-template-columns:70px 1fr}}

/* 人工对账状态样式 */
.tag.danger{background:#fff0f0;color:#c94d4d}.reconcile-exception-row td{background:#fff7e8!important}.row-actions button.success{color:#167d65;font-weight:bold}

/* finance reconcile snapshot */
.reconcile-snapshot-panel{margin-bottom:15px}.reconcile-snapshot-panel .panel-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.reconcile-snapshot-form{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:12px;padding:16px 18px}.reconcile-snapshot-form label{min-width:0}.reconcile-snapshot-form input,.reconcile-snapshot-form select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.reconcile-snapshot-form input[readonly]{background:#f7faf9;color:#52615c}.reconcile-snapshot-form .wide{grid-column:span 2}.reconcile-snapshot-form button{align-self:end}@media(max-width:980px){.reconcile-snapshot-form{grid-template-columns:1fr 1fr}.reconcile-snapshot-form .wide{grid-column:1/-1}}@media(max-width:640px){.reconcile-snapshot-form{grid-template-columns:1fr}}

/* balance reconcile modal */
.reconcile-balance-toolbar{display:flex;align-items:stretch;gap:12px;margin-bottom:15px;flex-wrap:wrap}.reconcile-latest-card{min-width:280px;flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 16px;text-align:left;cursor:pointer;color:var(--text)}.reconcile-latest-card:hover{border-color:var(--primary);box-shadow:0 8px 20px #153d3414}.reconcile-latest-card span{display:block;color:var(--muted);font-size:12px}.reconcile-latest-card strong{display:block;margin-top:6px;font-size:16px}.reconcile-latest-card small{display:block;margin-top:5px;color:#75827e}.balance-reconcile-modal,.balance-record-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px}.balance-reconcile-modal label,.balance-record-detail label{display:grid;gap:7px}.balance-reconcile-modal input,.balance-reconcile-modal textarea,.balance-record-detail textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.balance-reconcile-modal input[readonly]{background:#f7faf9;color:#52615c}.balance-reconcile-modal .wide,.balance-record-detail .wide{grid-column:1/-1}.balance-method-grid{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:12px;padding:12px;border:1px dashed var(--line);border-radius:10px}.balance-method-grid h3{grid-column:1/-1;margin:0;font-size:14px}.modal-table-wrap{max-height:55vh;overflow:auto}.modal-table-wrap table{width:100%;border-collapse:collapse}.clickable-row{cursor:pointer}.clickable-row:hover td{background:#edf7f3}.balance-record-detail>div:not(.wide){padding:12px;border:1px solid var(--line);border-radius:9px}.balance-record-detail span{display:block;color:var(--muted);font-size:12px}.balance-record-detail strong{display:block;margin-top:5px}.detail-actions{display:flex;gap:10px;justify-content:flex-end}@media(max-width:720px){.balance-reconcile-modal,.balance-record-detail,.balance-method-grid{grid-template-columns:1fr}}

/* balance reconcile paper-like modal */
.modal.balance-reconcile-modal-shell{width:min(960px,96vw)}.balance-reconcile-modal-shell .form-grid{display:block}.balance-reconcile-modal.paper-like-modal{display:grid;grid-template-columns:1fr 1fr;gap:14px}.balance-reconcile-modal.paper-like-modal label{display:grid;gap:7px}.balance-reconcile-modal.paper-like-modal input,.balance-reconcile-modal.paper-like-modal textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}.balance-reconcile-modal.paper-like-modal input[readonly]{background:#f7faf9;color:#52615c}.balance-reconcile-modal.paper-like-modal .wide{grid-column:1/-1}.balance-reconcile-modal.paper-like-modal textarea{min-height:72px;resize:vertical}.balance-reconcile-modal.paper-like-modal .balance-method-grid{grid-template-columns:repeat(3,minmax(150px,1fr));background:#fafcfb}@media(max-width:760px){.balance-reconcile-modal.paper-like-modal,.balance-reconcile-modal.paper-like-modal .balance-method-grid{grid-template-columns:1fr}}


/* V2.4 辅料库存/供货商统计入口 */
.stats-row .stat-clickable {
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.stats-row .stat-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(12, 128, 103, .35);
  box-shadow: 0 8px 18px rgba(12, 128, 103, .12);
}
.stats-row .stat-clickable::after {
  content: "点击查看";
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12px;
  color: #0c8067;
}
.modal-table-wrap table .numeric,
.auxiliary-table .numeric {
  text-align: right;
}

.supplier-manager {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(12, 128, 103, .14);
  border-radius: 12px;
  background: #f7fbfa;
}
.supplier-manager-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.supplier-manager-title strong {
  font-size: 16px;
  color: #12332c;
}
.supplier-manager-title span,
.supplier-list-title {
  color: #6b7b76;
  font-size: 13px;
}
.supplier-add-row {
  display: flex;
  gap: 10px;
}
.supplier-add-row input {
  flex: 1;
}
.supplier-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.supplier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eaf6f2;
  color: #0c8067;
  font-weight: 700;
}
.supplier-chip button {
  border: 0;
  background: transparent;
  color: #b42318;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.supplier-stat-table {
  overflow-x: auto;
}
.supplier-stat-table table {
  min-width: 980px;
}
.supplier-stat-table th,
.supplier-stat-table td {
  white-space: nowrap;
}

/* V3.1 全局弹窗布局：更大、更少留白、表单/表格自适应 */
.modal-backdrop {
  padding: clamp(10px, 2vw, 24px);
}
.modal {
  width: min(960px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .26);
}
.modal.paper-batch-modal,
.modal.custom-modal-shell,
.modal.balance-reconcile-modal-shell {
  width: min(1180px, 98vw);
}
.modal-head {
  flex: 0 0 auto;
  padding: 16px 20px;
}
.modal-head h2 {
  font-size: 20px;
}
#modal-form {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.form-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
  gap: 14px 16px;
  padding: 18px 20px;
}
.form-grid label {
  min-width: 0;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
}
.form-grid textarea {
  min-height: 96px;
  resize: vertical;
}
.custom-modal-shell .form-grid {
  display: block;
}
.custom-modal-shell .modal-table-wrap {
  max-height: calc(92vh - 210px);
  overflow: auto;
}
.modal-table-wrap table {
  width: 100%;
}
.modal-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.92), #fff);
}
.balance-reconcile-modal,
.paper-like-modal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 16px;
}
.balance-method-grid {
  grid-column: 1 / -1;
}
.paper-batch-row {
  grid-template-columns: 140px minmax(160px, 1.2fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(180px, 1.4fr) 38px;
}
@media (max-width: 760px) {
  .modal {
    width: 98vw;
    max-height: 94vh;
    border-radius: 14px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }
  .modal-head,
  .modal-actions {
    padding-left: 14px;
    padding-right: 14px;
  }
  .supplier-add-row {
    flex-direction: column;
  }
  .paper-batch-row {
    grid-template-columns: 1fr;
  }
}

/* Paper reconciliation */
.paper-reconcile-toolbar {
  align-items: flex-start;
}

.paper-reconcile-toolbar .filters {
  flex: 1 1 860px;
}

.paper-reconcile-toolbar input[type="date"],
.paper-reconcile-toolbar select {
  min-width: 138px;
}

.compact-date-filter {
  display: grid;
  gap: 3px;
  color: #68766f;
  font-size: 11px;
}

.compact-date-filter input {
  font-size: 13px;
}

.paper-reconcile-mode-tabs {
  margin: 4px 0 14px;
}

.paper-reconcile-table td,
.paper-reconcile-table th {
  white-space: nowrap;
}

.paper-reconcile-table td.paper-reconcile-vehicle-list {
  max-width: 420px;
  white-space: normal;
  line-height: 1.65;
}

.paper-reconcile-history-row {
  cursor: pointer;
}

.paper-reconcile-history-row:hover {
  background: rgba(26, 111, 85, .07);
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--primary, #176b52);
  font-weight: 700;
  padding: 0;
  cursor: pointer;
}

.paper-reconcile-snapshot {
  display: grid;
  gap: 18px;
}

.paper-reconcile-filter-summary {
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f4f8f5;
  color: #52615b;
}

.paper-reconcile-filter-summary strong {
  color: #163b30;
  font-size: 16px;
}

.paper-reconcile-snapshot-section h3 {
  margin: 0 0 10px;
}

.paper-reconcile-snapshot-section .table-scroll,
.paper-reconcile-history .table-scroll {
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(35, 78, 64, .12);
  border-radius: 12px;
}

.paper-reconcile-snapshot-section table,
.paper-reconcile-history table {
  width: 100%;
}

.salary-preview-list {
  display: grid;
  gap: 8px;
  max-height: 480px;
  overflow: auto;
}

.salary-preview-row {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(130px, auto) minmax(130px, auto) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(35, 78, 64, .12);
  border-radius: 12px;
  background: #fff;
}

.salary-preview-row span {
  display: grid;
  gap: 2px;
}

.salary-preview-row small {
  color: #718078;
}

.salary-preview-row em {
  color: #8a5c1d;
  font-style: normal;
  font-size: 12px;
}

.salary-preview-row.disabled {
  opacity: .58;
  background: #f4f4f1;
}

#salary-rows .tag.warn {
  max-width: 240px;
  white-space: normal;
  line-height: 1.45;
}

/* 工资异常行必须保持标准 table-row，不能复用首页 warning-row 的 flex 布局。 */
#salary-rows tr.salary-warning-row {
  display: table-row;
}

#salary-rows tr.salary-warning-row td {
  background: #fff8e8;
}

#salary-rows tr.salary-warning-row:hover td {
  background: #fff3d4;
}

@media (max-width: 760px) {
  .paper-reconcile-toolbar .filters {
    flex-basis: auto;
  }

  .paper-reconcile-toolbar input[type="date"],
  .paper-reconcile-toolbar select {
    min-width: 150px;
  }

  .salary-preview-row {
    grid-template-columns: auto 1fr;
  }
}

.daily-todo-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.dashboard-card-row {
  padding: 16px 18px;
  margin-bottom: 0;
}
.dashboard-card-row > div {
  min-width: 150px;
}
.dashboard-exception-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}
.daily-todo-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.daily-todo-actions button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
}
.daily-todo-actions button:hover {
  border-color: var(--primary);
  background: #edf7f3;
}
.daily-todo-row.todo-done {
  background: #fbfdfc;
}
.daily-todo-row.todo-done strong {
  color: var(--primary);
}
.daily-todo-row.todo-pending {
  background: #fffaf2;
}

/* Layout preview polish: cleaner dashboard, softer cards, roomier tables */
:root {
  --bg: #eef4f1;
  --panel: #ffffff;
  --line: #dbe7e2;
  --shadow-soft: 0 12px 30px rgba(19, 61, 52, .08);
  --shadow-hover: 0 18px 42px rgba(19, 61, 52, .13);
}

body {
  background:
    radial-gradient(circle at 20% 0%, rgba(22, 125, 101, .10), transparent 28%),
    linear-gradient(180deg, #f6faf8 0%, var(--bg) 45%, #edf4f1 100%);
}

.app {
  grid-template-columns: 236px 1fr;
}

.sidebar {
  margin: 14px 0 14px 14px;
  height: calc(100vh - 28px);
  border-radius: 22px;
  background: linear-gradient(180deg, #123e35 0%, #0a2b25 100%);
  box-shadow: 0 18px 38px rgba(13, 48, 40, .22);
}

.brand {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.brand > span {
  box-shadow: 0 10px 24px rgba(255, 255, 255, .12);
}

.nav-label {
  margin-top: 8px;
  letter-spacing: .08em;
}

.nav-item {
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease;
}

.nav-item:hover {
  transform: translateX(2px);
}

.nav-item.active {
  box-shadow: 0 10px 24px rgba(255, 255, 255, .10);
}

main {
  padding: 0 30px 42px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 96px;
  padding: 10px 0;
  background: linear-gradient(180deg, rgba(246, 250, 248, .96), rgba(246, 250, 248, .78));
  backdrop-filter: blur(10px);
}

.topbar h1 {
  font-size: 26px;
  letter-spacing: .02em;
}

.topbar p {
  font-size: 13px;
}

.stats-grid,
.dashboard-card-row,
.account-cards,
.grid-two {
  gap: 16px;
}

.stat,
.stats-row > div,
.panel,
.account-card,
.balance-collapse,
.reconcile-latest-card {
  border-color: rgba(219, 231, 226, .92);
  box-shadow: var(--shadow-soft);
}

.stat,
.stats-row > div {
  border-radius: 18px;
  background: linear-gradient(180deg, #fff 0%, #fbfdfc 100%);
}

.stat strong,
.stats-row strong {
  font-size: 24px;
}

.panel {
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .96);
}

.panel-head {
  padding: 18px 22px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
}

.panel-head h2,
.panel-head h3 {
  font-size: 17px;
}

.grid-two {
  grid-template-columns: minmax(360px, .95fr) minmax(420px, 1.05fr);
  align-items: start;
}

.dashboard-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.dashboard-card-row > div,
.stat-clickable {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.stat-clickable:hover,
.dashboard-card-row > div:hover {
  transform: translateY(-2px);
  border-color: rgba(22, 125, 101, .26);
  box-shadow: var(--shadow-hover);
}

.warning-row {
  margin: 0 14px;
  padding: 14px 6px;
}

.warning-row:last-child {
  border-bottom: 0;
}

.daily-todo-row,
.dashboard-exception-row {
  border-radius: 12px;
  padding-left: 14px;
  padding-right: 14px;
}

.notice {
  margin: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f5faf8;
}

.toolbar {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-soft);
}

.filters input,
.filters select,
.toolbar input,
.toolbar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
  border-radius: 11px;
  border-color: #d6e5df;
  background: #fbfdfc;
}

.filters input:focus,
.filters select:focus,
.toolbar input:focus,
.toolbar select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(22, 125, 101, .55);
  box-shadow: 0 0 0 3px rgba(22, 125, 101, .12);
}

.button,
.filter-reset {
  border-radius: 11px;
}

.button.primary {
  box-shadow: 0 10px 20px rgba(22, 125, 101, .18);
}

.module-tabs {
  padding: 6px;
  border: 1px solid rgba(219, 231, 226, .8);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-soft);
}

.module-tabs button {
  border-radius: 10px;
}

.table-panel {
  border-radius: 18px;
}

th {
  background: #f6faf8;
  color: #53645f;
  font-weight: 700;
}

td {
  background: #fff;
}

tbody tr:hover td {
  background: #f8fcfa;
}

.tag {
  padding: 5px 10px;
}

.modal {
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(9, 37, 31, .28);
}

.modal-head {
  background: linear-gradient(180deg, #fff 0%, #f8fcfa 100%);
}

.app.sidebar-collapsed .sidebar {
  margin-left: 10px;
}

@media (max-width: 1000px) {
  .app {
    grid-template-columns: 190px 1fr;
  }
  .grid-two,
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    margin: 10px 0 10px 10px;
    height: calc(100vh - 20px);
  }
  main {
    padding: 0 18px 34px;
  }
}

/* Modern UI Refresh: calm factory dashboard + light admin system */
:root {
  --primary: #126b58;
  --primary-dark: #0c5143;
  --accent: #d9853b;
  --bg: #f4f1ea;
  --panel: #fffdf8;
  --text: #20332e;
  --muted: #7b8580;
  --line: #e5ded2;
  --danger: #c86055;
  --warn: #d98732;
  --soft-green: #edf6f2;
  --soft-amber: #fff5e8;
  --soft-red: #fff1ee;
  --shadow-soft: 0 10px 28px rgba(43, 64, 56, .075);
  --shadow-hover: 0 18px 42px rgba(43, 64, 56, .12);
}

body {
  font-size: 13px;
  background:
    radial-gradient(circle at 12% 0%, rgba(18, 107, 88, .12), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(217, 133, 59, .10), transparent 28%),
    linear-gradient(180deg, #fbf7ef 0%, #f4f1ea 58%, #eef4f1 100%);
}

.login-screen {
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .22), transparent 25%),
    linear-gradient(135deg, #0e4439, #17775f 55%, #e3a15d);
}

.login-card {
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(7, 42, 35, .32);
}

.app {
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  margin: 16px 0 16px 16px;
  height: calc(100vh - 32px);
  padding: 18px 13px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%),
    linear-gradient(180deg, #123f36 0%, #092822 100%);
  box-shadow: 0 24px 50px rgba(10, 43, 37, .25);
}

.sidebar-toggle {
  align-self: flex-start;
  margin-left: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}

.brand {
  gap: 12px;
  padding: 2px 8px 18px;
}

.brand > span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff, #dff2eb);
}

.brand strong {
  font-size: 15px;
}

.nav-label {
  padding: 17px 12px 6px;
  color: rgba(222, 238, 232, .64);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(230, 244, 239, .88);
}

.nav-item::before {
  content: attr(data-short);
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255,255,255,.09);
  color: #fff;
  font-size: 13px;
  flex: 0 0 26px;
}

.nav-item:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
  transform: translateX(2px);
}

.nav-item.active {
  background: #fffdf8;
  color: var(--primary-dark);
  box-shadow: 0 12px 28px rgba(0,0,0,.13);
}

.nav-item.active::before {
  background: var(--soft-green);
  color: var(--primary);
}

.user-box {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.16);
}

main {
  padding: 0 34px 44px;
}

.topbar {
  height: 92px;
  background: linear-gradient(180deg, rgba(251,247,239,.95), rgba(251,247,239,.78));
}

.topbar h1 {
  font-size: 24px;
  font-weight: 800;
}

.dashboard-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px;
  border: 1px solid rgba(229, 222, 210, .85);
  border-radius: 26px;
  background:
    radial-gradient(circle at 15% 0%, rgba(18, 107, 88, .18), transparent 32%),
    linear-gradient(135deg, #fffdf8 0%, #f8efe0 100%);
  box-shadow: var(--shadow-soft);
}

.dashboard-hero-kicker {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(18, 107, 88, .08);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-hero h2 {
  margin: 12px 0 8px;
  font-size: 28px;
  letter-spacing: .02em;
}

.dashboard-hero p {
  max-width: 580px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.dashboard-hero-balance {
  min-width: 260px;
  padding: 18px 20px;
  border: 0;
  border-radius: 22px;
  text-align: left;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #0e5b4c, #14856a);
  box-shadow: 0 16px 32px rgba(18, 107, 88, .24);
}

.dashboard-hero-balance span,
.dashboard-hero-balance small {
  display: block;
  color: rgba(255,255,255,.78);
}

.dashboard-hero-balance strong {
  display: block;
  margin: 9px 0 7px;
  font-size: 28px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  margin-bottom: 16px;
}

.stat,
.stats-row > div,
.panel,
.account-card,
.balance-collapse,
.reconcile-latest-card {
  border: 1px solid rgba(229, 222, 210, .9);
  box-shadow: var(--shadow-soft);
}

.stat,
.stats-row > div {
  padding: 17px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fffdf8 0%, #fffaf1 100%);
}

.stat span,
.stats-row span {
  color: #7c867f;
  font-size: 12px;
}

.stat strong,
.stats-row strong {
  font-size: 22px;
  letter-spacing: -.02em;
}

.panel {
  border-radius: 22px;
  background: rgba(255,253,248,.94);
}

.panel-head {
  padding: 18px 22px;
  background: transparent;
}

.panel-head h2,
.panel-head h3 {
  font-size: 16px;
  font-weight: 800;
}

.grid-two {
  grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
}

.dashboard-card-row {
  padding: 0 16px 16px;
  gap: 12px;
}

.dashboard-card-row > div {
  min-width: 150px;
  border-radius: 16px;
  background: #fff;
}

.stat-clickable:hover,
.dashboard-card-row > div:hover {
  transform: translateY(-2px);
}

.notice {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(18, 107, 88, .08);
  background: var(--soft-green);
}

.warning-row {
  margin: 0 14px 8px;
  border: 0;
  border-radius: 15px;
  background: #fff;
}

.warning-row:hover {
  background: #fff8ed;
}

.daily-todo-row.todo-pending,
.dashboard-exception-row {
  background: var(--soft-amber);
}

.daily-todo-row.todo-done {
  background: #f7fbf8;
}

.toolbar {
  margin-bottom: 16px;
  border-radius: 20px;
  background: rgba(255,253,248,.78);
}

.module-tabs {
  width: auto;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(255,253,248,.76);
}

.module-tabs button {
  padding: 10px 16px;
  border-radius: 13px;
}

.module-tabs button.active {
  background: var(--primary);
  color: #fff;
}

.button {
  border-radius: 12px;
}

.button.primary {
  background: linear-gradient(135deg, var(--primary), #17846a);
}

.button.ghost {
  background: #fffdf8;
}

.filter-reset {
  border-radius: 12px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  padding: 13px 14px;
  background: #fbf7ef;
  color: #68766f;
  font-size: 12px;
}

td {
  padding: 14px;
  font-size: 13px;
}

tbody tr:hover td {
  background: #fffaf1;
}

.tag {
  border-radius: 999px;
  font-size: 11px;
}

.modal {
  width: min(760px, 96vw);
  border-radius: 24px;
}

.modal-head {
  padding: 18px 22px;
}

.form-grid {
  gap: 16px;
}

.modal-actions {
  position: sticky;
  bottom: 0;
  background: #fffdf8;
}

.app.sidebar-collapsed {
  grid-template-columns: 86px 1fr;
}

.app.sidebar-collapsed .nav-item {
  justify-content: center;
}

.app.sidebar-collapsed .nav-item::before {
  content: attr(data-short);
  width: 34px;
  height: 34px;
  font-size: 18px;
  line-height: 1;
}

/* V3.1 品牌标识 */
.login-logo-image {
  width: 132px;
  max-height: 132px;
  object-fit: contain;
  justify-self: center;
  margin: -6px auto 2px;
}
.brand > span {
  overflow: hidden;
  padding: 3px;
}
.brand > span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.app.sidebar-collapsed .brand > span {
  padding: 4px;
}

/* 对账问题悬浮入口与记录弹窗 */
.reconcile-issue-fab[hidden],
.reconcile-issue-fab-menu[hidden],
.reconcile-issue-fab-badge[hidden],
.reconcile-issue-fab-menu button[hidden] {
  display: none !important;
}
.reconcile-issue-fab {
  position: fixed;
  right: 28px;
  bottom: 92px;
  z-index: 46;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 10px;
}
.reconcile-issue-fab-toggle {
  position: relative;
  min-width: 132px;
  height: 54px;
  padding: 0 18px 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 27px;
  color: #fff;
  background: linear-gradient(135deg, #0c725e, #095245);
  box-shadow: 0 12px 30px rgba(9, 82, 69, .3);
  cursor: pointer;
  font-weight: 700;
}
.reconcile-issue-fab-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 34px rgba(9, 82, 69, .36);
}
.reconcile-issue-fab-icon { font-size: 20px; }
.reconcile-issue-fab-badge {
  position: absolute;
  top: -6px;
  right: -3px;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  background: #d94b3d;
  font-size: 11px;
  line-height: 1;
}
.reconcile-issue-fab-menu {
  width: 210px;
  padding: 8px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(21, 65, 56, .14);
  border-radius: 15px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(20, 46, 41, .2);
}
.reconcile-issue-fab-menu button {
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.reconcile-issue-fab-menu button:hover { background: #eef7f3; color: var(--primary); }
.reconcile-issue-modal-toolbar {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.reconcile-issue-modal-toolbar > div { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.reconcile-issue-modal-toolbar strong { color: var(--warn); }
.reconcile-issue-modal-toolbar span { color: var(--muted); font-size: 13px; }
.reconcile-issue-modal-toolbar select {
  min-width: 160px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.reconcile-issue-modal-table table { min-width: 1080px; }
.reconcile-issue-pending td { background: #fffaf0; }
.issue-link-id { display: block; margin-top: 4px; color: var(--muted); }

@media (max-width: 640px) {
  .reconcile-issue-fab { right: 14px; bottom: 82px; }
  .reconcile-issue-fab-toggle { min-width: 56px; width: 56px; padding: 0; }
  .reconcile-issue-fab-label { display: none; }
  .reconcile-issue-fab-menu { width: min(210px, calc(100vw - 28px)); }
}

/* V3.1 辅料供应商结算 */
.supplier-settlement-toolbar {
  align-items: center;
}
.supplier-settlement-toolbar .filters select {
  min-width: 190px;
}
.supplier-settlement-latest {
  width: 100%;
  margin: 0 0 16px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #b8dfd2;
  border-radius: 13px;
  color: #155b4c;
  background: #eff9f5;
  cursor: pointer;
  text-align: left;
}
.supplier-settlement-latest:hover {
  border-color: #70bba5;
  background: #e5f6ef;
}
.supplier-settlement-latest span {
  color: var(--muted);
  font-size: 12px;
}
.supplier-settlement-panel .panel-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.supplier-settlement-panel table {
  min-width: 980px;
}
.settlement-history-filters {
  margin-bottom: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.settlement-history-filters select {
  min-width: 170px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.supplier-settlement-modal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.supplier-settlement-modal label {
  display: grid;
  gap: 7px;
}
.supplier-settlement-modal input,
.supplier-settlement-modal textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.supplier-settlement-modal input[readonly] {
  background: #f7faf9;
  color: #52615c;
}
.supplier-settlement-modal .wide {
  grid-column: 1 / -1;
}
.supplier-settlement-modal textarea {
  min-height: 84px;
  resize: vertical;
}
.supplier-settlement-check {
  align-content: start;
}
.supplier-settlement-check input {
  width: 18px;
  height: 18px;
  margin-top: 4px;
}
.supplier-settlement-warning {
  color: #a64b00;
  background: #fff4e8;
  border: 1px solid #f2c69b;
}
.settlement-voided {
  opacity: .58;
  text-decoration: line-through;
}
.settlement-detail-grid {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.settlement-detail-grid > div {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8faf9;
}
.settlement-detail-grid span,
.settlement-detail-grid strong {
  display: block;
}
.settlement-detail-grid span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
}
.settlement-detail-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .supplier-settlement-latest { align-items: flex-start; flex-direction: column; }
  .supplier-settlement-modal { grid-template-columns: 1fr; }
  .settlement-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .dashboard-hero {
    flex-direction: column;
  }
  .dashboard-hero-balance {
    width: 100%;
  }
  .stats-grid,
  .grid-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .sidebar {
    margin: 0;
    height: 100vh;
    border-radius: 0;
  }
  main {
    padding: 0 14px 28px;
  }
  .dashboard-hero {
    padding: 18px;
    border-radius: 20px;
  }
  .dashboard-hero h2 {
    font-size: 24px;
  }
}

/* Sidebar spacing fix: keep the dark rail away from the content area */
@media (min-width: 761px) {
  .app {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .sidebar {
    margin: 16px 20px 16px 12px;
    width: auto;
  }

  main {
    padding-left: 34px;
  }

  .app.sidebar-collapsed {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .app.sidebar-collapsed .sidebar {
    margin: 16px 12px 16px 10px;
  }
}

/* Page header spacing fix: make every module title area breathe */
.topbar {
  position: static;
  top: auto;
  z-index: auto;
  min-height: 118px;
  height: auto;
  padding: 24px 28px 22px;
  align-items: center;
  border: 1px solid rgba(229, 222, 210, .72);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  margin: 0 -4px 22px;
  background:
    radial-gradient(circle at 0% 0%, rgba(18, 107, 88, .08), transparent 32%),
    linear-gradient(135deg, rgba(255, 253, 248, .96), rgba(248, 241, 229, .88));
  box-shadow: 0 12px 28px rgba(43, 64, 56, .055);
  backdrop-filter: none;
}

.topbar > div:first-child {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.topbar h1 {
  font-size: 28px;
  line-height: 1.15;
}

.topbar p {
  max-width: 760px;
  margin: 0;
  line-height: 1.7;
}

#page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.beijing-clock {
  min-width: 230px;
  padding: 10px 14px;
  border: 1px solid rgba(18, 107, 88, .12);
  border-radius: 999px;
  background: rgba(255, 253, 248, .82);
  box-shadow: 0 10px 24px rgba(43, 64, 56, .06);
  color: var(--primary-dark);
  text-align: right;
  line-height: 1.25;
}

.beijing-clock span,
.beijing-clock small {
  color: var(--muted);
  font-size: 11px;
}

.beijing-clock strong {
  display: inline-block;
  margin: 0 8px;
  font-size: 14px;
  letter-spacing: .2px;
}

.daily-todo-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-todo-notice button {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .topbar {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 16px;
  }

  .topbar h1 {
    font-size: 24px;
  }

  #page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-right {
    width: 100%;
    justify-content: flex-start;
  }

  .beijing-clock {
    width: 100%;
    min-width: 0;
    text-align: left;
  }
}

/* Experience UI Refresh: clearer daily-operation layout, tables and dialogs */
:root {
  --experience-bg: #f6f3eb;
  --experience-card: rgba(255, 254, 250, .96);
  --experience-line: rgba(210, 202, 188, .72);
  --experience-shadow: 0 16px 38px rgba(45, 64, 56, .08);
  --experience-soft-shadow: 0 8px 22px rgba(45, 64, 56, .055);
}

body {
  background:
    radial-gradient(circle at 12% 5%, rgba(24, 119, 96, .08), transparent 28%),
    linear-gradient(180deg, #faf7ef 0%, var(--experience-bg) 52%, #f4efe4 100%);
}

main {
  padding-right: 38px;
}

.topbar {
  margin-bottom: 26px;
}

.topbar h1 {
  letter-spacing: -.4px;
}

.topbar p {
  color: #718079;
}

.page.active {
  animation: pageFadeIn .16s ease-out;
}

@keyframes pageFadeIn {
  from { opacity: .45; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.stats-grid,
.stats-row,
.dashboard-card-row {
  gap: 16px;
}

.stat,
.stats-row > div,
.account-card,
.reconcile-latest-card {
  border-color: var(--experience-line);
  border-radius: 18px;
  background: var(--experience-card);
  box-shadow: var(--experience-soft-shadow);
}

.stat strong,
.stats-row strong {
  letter-spacing: -.3px;
}

.panel {
  border-color: var(--experience-line);
  border-radius: 20px;
  background: var(--experience-card);
  box-shadow: var(--experience-shadow);
  overflow: hidden;
}

.panel + .panel,
.grid-two .panel {
  margin-bottom: 0;
}

.panel-head {
  min-height: 58px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(250,247,239,.82));
}

.panel-head h2,
.panel-head h3 {
  font-size: 17px;
  letter-spacing: -.2px;
}

.panel-head p {
  margin: 5px 0 0;
  color: #78877f;
}

.toolbar {
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--experience-line);
  border-radius: 18px;
  background: rgba(255, 254, 250, .78);
  box-shadow: var(--experience-soft-shadow);
}

.filters {
  align-items: center;
  flex-wrap: wrap;
}

.filters input,
.filters select,
.toolbar input,
.toolbar select,
.form-grid input,
.form-grid select,
.form-grid textarea {
  min-height: 40px;
  border-radius: 12px;
  border-color: rgba(194, 186, 172, .82);
  background: #fffefa;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.filters input:focus,
.filters select:focus,
.toolbar input:focus,
.toolbar select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: rgba(24, 119, 96, .58);
  box-shadow: 0 0 0 4px rgba(24, 119, 96, .10);
  background: #fff;
}

.toolbar-actions,
.toolbar > div:last-child:not(.filters) {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.button,
.filter-reset,
.module-tabs button,
.row-actions button,
.table-pagination button {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.button:hover,
.filter-reset:hover,
.table-pagination button:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(45, 64, 56, .08);
}

.button.primary {
  background: linear-gradient(135deg, var(--primary), #12785f);
}

.module-tabs {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 6px;
  border: 1px solid rgba(210, 202, 188, .64);
  border-radius: 999px;
  background: rgba(255, 254, 250, .74);
  box-shadow: var(--experience-soft-shadow);
}

.module-tabs button {
  border-radius: 999px;
  min-height: 36px;
}

.module-tabs button.active {
  box-shadow: 0 8px 22px rgba(23, 76, 62, .13);
}

.table-panel {
  border-radius: 18px;
  border: 1px solid var(--experience-line);
  background: var(--experience-card);
}

.table-panel table {
  min-width: max-content;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(210, 202, 188, .82);
  background: #f4f0e7;
  color: #5f6f67;
  font-weight: 800;
}

td {
  padding: 13px 15px;
  vertical-align: middle;
}

tbody tr {
  transition: background .12s ease;
}

tbody tr:hover td {
  background: rgba(237, 247, 243, .72);
}

td:has(.money-in),
td:has(.money-out),
td.numeric,
th.numeric,
.numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tag,
.material-category-tag,
.material-subcategory-tag {
  min-height: 23px;
  align-items: center;
  letter-spacing: .1px;
}

.row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.row-actions button {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(237, 247, 243, .88);
  white-space: nowrap;
}

.row-actions button:hover {
  background: #dceee7;
}

.row-actions .delete {
  background: #fff0f0;
}

.row-actions .delete:hover {
  background: #ffe2e2;
}

.empty {
  padding: 36px 20px;
  color: #829089;
}

.table-pagination {
  position: relative;
  background: rgba(250, 247, 239, .86);
}

.modal-backdrop {
  padding: 28px;
  backdrop-filter: blur(4px);
}

.modal {
  width: min(900px, 96vw);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(12, 38, 31, .28);
}

.modal-head {
  padding: 20px 26px;
  background: linear-gradient(180deg, #fffefa, #f8f3ea);
}

.modal-head h2 {
  font-size: 20px;
  letter-spacing: -.2px;
}

.form-grid {
  gap: 16px 18px;
  padding: 24px 26px;
}

.form-grid textarea {
  min-height: 86px;
  resize: vertical;
}

.modal-actions {
  padding: 16px 26px;
  background: rgba(255, 253, 248, .96);
}

.modal-close {
  border-radius: 50%;
}

.warning-row {
  align-items: center;
  min-height: 54px;
}

.daily-todo-row,
.dashboard-exception-row {
  padding: 14px 20px;
}

.beijing-clock {
  background: rgba(255, 254, 250, .9);
}

@media (max-width: 1180px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar {
    flex-direction: column;
  }

  .filters input {
    min-width: min(280px, 100%);
  }
}

@media (max-width: 760px) {
  main {
    padding: 0 14px 28px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .module-tabs {
    width: 100%;
  }

  .module-tabs button {
    flex: 1 0 auto;
  }

  .toolbar,
  .filters,
  .toolbar-actions,
  .toolbar > div:last-child:not(.filters) {
    width: 100%;
  }

  .filters > *,
  .toolbar-actions > *,
  .toolbar > div:last-child:not(.filters) > * {
    flex: 1 1 160px;
  }

  .modal-backdrop {
    padding: 12px;
  }

  .modal {
    width: 100%;
    max-height: 94vh;
    border-radius: 18px;
  }

  .form-grid,
  .balance-reconcile-modal.paper-like-modal,
  .balance-method-grid {
    grid-template-columns: 1fr !important;
  }
}