* { margin: 0; padding: 0; box-sizing: border-box; }





body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f0f2f5; color: #333; min-height: 100vh; display: flex; flex-direction: column; }





#login-screen { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a237e 0%, #283593 100%); }





.login-box { background: #fff; border-radius: 24px; padding: 80px 60px; width: 720px; box-shadow: 0 30px 80px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1); text-align: center; }





.login-box h1 { font-size: 48px; color: #1a237e; margin-bottom: 12px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }





.login-box .subtitle { color: #666; margin-bottom: 36px; font-size: 22px; }





.login-box input { width: 100%; padding: 24px 32px; margin: 10px 0; border: 1px solid #ccc; border-radius: 16px; font-size: 22px; outline: none; transition: border-color .2s, box-shadow .2s; }





.login-box input:focus { border-color: #1a237e; box-shadow: 0 0 0 3px rgba(26,35,126,0.15); }





.login-box button { width: 100%; padding: 24px; background: linear-gradient(135deg, #3949ab, #1a237e); color: #fff; border: none; border-radius: 16px; font-size: 28px; cursor: pointer; margin-top: 24px; box-shadow: 0 6px 20px rgba(26,35,126,0.4), inset 0 1px 0 rgba(255,255,255,0.15); transition: all .2s; letter-spacing: 2px; }





.login-box button:hover { background: linear-gradient(135deg, #3f51b5, #283593); box-shadow: 0 8px 24px rgba(26,35,126,0.5), inset 0 1px 0 rgba(255,255,255,0.2); transform: translateY(-2px); }





.login-box button:active { box-shadow: inset 0 3px 8px rgba(0,0,0,0.3); transform: translateY(0); }





.login-box button:hover { background: #283593; }





.login-box .error { color: #c62828; font-size: 13px; margin-top: 12px; display: none; }





#app { display: none; }





.topbar { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); color: #fff; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 12px rgba(0,0,0,0.25); position: sticky; top: 0; z-index: 100; }





.topbar .brand { font-size: 20px; font-weight: 600; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }





.topbar .brand span { color: #ffd54f; }





.topbar .user-info { display: flex; align-items: center; font-size: 16px; }





.topbar .user-info .lang-btn, .topbar .user-info #user-display, .topbar .user-info .logout-btn { margin-left: 10mm; }





.topbar .user-info .lang-btn:first-child { margin-left: 0; }





.topbar .user-info .lang-btn { background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.08)); color: #fff; border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 15px; letter-spacing: .5px; transition: all .2s; box-shadow: 0 3px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }





.topbar .user-info .lang-btn:hover { background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15)); border-color: rgba(255,255,255,0.6); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }





.topbar .user-info #user-display { font-size: 16px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.3); padding: 0 4px; }





.topbar .user-info .logout-btn { background: linear-gradient(135deg, #e53935, #c62828); color: #fff; border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 600; transition: all .2s; box-shadow: 0 3px 8px rgba(198,40,40,0.4), inset 0 1px 0 rgba(255,255,255,0.2); }





.topbar .user-info .logout-btn:hover { background: linear-gradient(135deg, #ef5350, #e53935); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(198,40,40,0.5), inset 0 1px 0 rgba(255,255,255,0.25); }





.sidebar { position: fixed; left: 0; top: 64px; bottom: 0; width: 260px; background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-right: 1px solid rgba(255,255,255,0.06); overflow-y: auto; transition: transform .3s; z-index: 50; }





.sidebar .nav-item { padding: 14px 22px; cursor: pointer; display: flex; align-items: center; gap: 14px; font-size: 22px; color: rgba(255,255,255,0.7); border-left: 3px solid transparent; transition: all .25s; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }





.sidebar .nav-parent { padding: 12px 22px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 18px; color: rgba(255,255,255,0.75); border-left: 3px solid transparent; transition: all .25s; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); user-select: none; }





.sidebar .nav-parent:hover { background: rgba(255,255,255,0.08); color: #fff; border-left-color: rgba(255,255,255,0.3); }





.sidebar .nav-arrow { font-size: 12px; width: 18px; text-align: center; color: rgba(255,255,255,0.5); transition: transform .2s; }





.sidebar .nav-sub { border-left: 2px solid rgba(255,255,255,0.1); margin-left: 12px; padding-left: 0; }





.sidebar .nav-sub .sub-item { padding: 10px 22px; font-size: 18px; border-left: 2px solid transparent; gap: 10px; }





.sidebar .nav-sub .sub-icon { font-size: 20px; width: 20px; text-align: center; }





.sidebar .sub-parent { padding: 10px 22px; font-size: 18px; border-left: 2px solid transparent; gap: 10px; cursor: pointer; display: flex; align-items: center; color: rgba(255,255,255,0.75); user-select: none; }

.sidebar .sub-parent:hover { background: rgba(255,255,255,0.08); color: #fff; border-left-color: rgba(255,255,255,0.3); }

.sidebar .sub-sub { border-left: 2px solid rgba(255,255,255,0.06); margin-left: 12px; padding-left: 0; }

.sidebar .sub-sub .sub-item { padding: 8px 22px; font-size: 16px; border-left: 2px solid transparent; gap: 8px; }





.sidebar .nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; border-left-color: rgba(255,255,255,0.3); }





.sidebar .nav-item.active { background: linear-gradient(90deg, rgba(255,255,255,0.12), transparent); color: #fff; border-left-color: #64b5f6; font-weight: 600; box-shadow: inset 0 0 20px rgba(100,181,246,0.06); }





.sidebar .nav-item .icon { font-size: 28px; width: 36px; text-align: center; }





.sidebar .nav-group { padding: 20px 22px 8px; font-size: 14px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }





.main { margin-left: 260px; padding: 24px; min-height: calc(100vh - 64px); }





.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }





.stat-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }





.stat-card .stat-num { font-size: 32px; font-weight: 700; color: #1a237e; }





.stat-card .stat-label { font-size: 13px; color: #777; margin-top: 4px; }





.modules-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }





.module-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); cursor: pointer; transition: all .2s; }





.module-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }





.module-card .mc-icon { font-size: 28px; margin-bottom: 8px; }





.module-card .mc-title { font-size: 16px; font-weight: 600; color: #333; }





.module-card .mc-desc { font-size: 12px; color: #888; margin-top: 4px; }





.module-card .mc-stats { display: flex; gap: 16px; margin-top: 12px; font-size: 12px; color: #666; }





.module-card .mc-stats span { background: #f5f5f5; padding: 2px 8px; border-radius: 4px; }





.data-section { display: none; }





.data-section.active { display: block; }





.data-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }





.data-header h2 { font-size: 20px; color: #333; }





.data-header .dh-actions { display: flex; gap: 10mm; flex-wrap: wrap; }





.data-header .dh-actions input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; width: 200px; }





.data-header .dh-actions button { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }





.btn-primary { background: #1a237e; color: #fff; padding: 8px 20px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; transition: all .2s; box-shadow: 0 3px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15); }





.btn-primary:hover { background: #283593; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transform: translateY(-1px); }





.btn-outline {

  background: linear-gradient(135deg, #4fc3f7, #0288d1);

  color: #fff;

  border: none;

  padding: 8px 20px;

  border-radius: 8px;

  font-size: 15px;

  font-weight: 700;

  box-shadow: 0 3px 8px rgba(2,136,209,.3), inset 0 1px 0 rgba(255,255,255,0.15);

  cursor: pointer;

  transition: all .2s;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}





.btn-outline:hover {

  background: linear-gradient(135deg, #5ec8f7, #0277bd);

  box-shadow: 0 4px 10px rgba(2,136,209,.4);

  transform: translateY(-1px);

}





.btn-print {



  background: linear-gradient(135deg, #66bb6a, #2e7d32);



  color: #fff; border: none;

  border-radius: 8px;



  padding: 8px 20px; font-size: 15px; font-weight: 700; cursor: pointer;

  box-shadow: 0 3px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15);

  transition: all 0.2s;

}





.btn-print:hover {





  background: linear-gradient(135deg, #43a047, #1b5e20);





  transform: translateY(-1px);





  box-shadow: 0 6px 12px rgba(0,0,0,0.2);





}





@media print {

  @page { size: A4; margin: 12mm; }

  body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body * { visibility: hidden !important; }

  .detail-section, .detail-section * { visibility: visible !important; }

  .detail-section { position: relative; left: 0; top: 0; width: 100%; page-break-inside: avoid; }

  .detail-section h2, .detail-section h3 { color: #000 !important; }

  .detail-section .dl, .detail-section .dv { color: #000 !important; }

  .detail-section table { border-collapse: collapse; width: 100%; }

  .detail-section table th, .detail-section table td { border: 1px solid #000 !important; color: #000 !important; padding: 3pt 4pt; font-size: 9pt; }

  .detail-section table th { background: #eee !important; }

  /* 结算看板 & 经销商列表打印 */
  .data-table, .data-table *,
  .table-container, .table-container *,
  .settlement-panel, .settlement-panel *,
  .settlement-cards, .settlement-cards *,
  .settle-summary-item, .settle-summary-item * { visibility: visible !important; }

  .settle-summary-item { position: relative; left: 0; top: 0; display: inline-block; }

  .table-container { position: relative; left: 0; top: 0; width: 100%; }

  .table-container table th, .table-container table td { border: 1px solid #000 !important; color: #000 !important; padding: 3pt 4pt; font-size: 9pt; }

  .table-container table th { background: #eee !important; }

  .btn-outline, .btn-print, .data-header .btn-outline, .data-header .btn-print, .no-print { display: none !important; }

  .print-page { page-break-after: always; }

  .print-page:last-child { page-break-after: auto; }

}





/* Save buttons: 200% size, 3D gradient */





.btn.btn-primary,





.btn.btn-secondary {





  background: linear-gradient(135deg, #3949ab, #1a237e);





  color: #fff;





  border: none;





  padding: 8px 20px;



  border-radius: 8px;



  font-size: 15px;



  box-shadow: 0 3px 8px rgba(26,35,126,.35);





  cursor: pointer;





  font-weight: 700;





  transition: all .2s;





}





.btn.btn-primary:hover,





.btn.btn-secondary:hover {





  background: linear-gradient(135deg, #3f51b5, #283593);





  box-shadow: 0 6px 17px rgba(26,35,126,.45);





}





#modal-save-btn,





#modal-cancel-btn {





  background: linear-gradient(135deg, #3949ab, #1a237e);





  color: #fff;





  border: none;





  padding: 8px 20px;



  border-radius: 8px;



  font-size: 15px;



  box-shadow: 0 3px 8px rgba(26,35,126,.35);





  cursor: pointer;





  font-weight: 700;





  transition: all .2s;





}





#modal-save-btn:hover,





#modal-cancel-btn:hover {





  background: linear-gradient(135deg, #3f51b5, #283593);





  box-shadow: 0 6px 17px rgba(26,35,126,.45);





}





.btn-danger { background: #c62828; color: #fff; }





.btn-success { background: #2e7d32; color: #fff; }





.btn-warning { background: #ef6c00; color: #fff; }





table.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }





table.data-table th { background: #fafafa; color: #555; font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 12px 16px; text-align: left; border-bottom: 2px solid #eee; }





table.data-table td { padding: 10px 16px; font-size: 13px; border-bottom: 1px solid #f0f0f0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }





table.data-table tr:hover td { background: #fafbff; }





table.data-table .actions button { padding: 4px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 11px; margin: 0 2px; }





table.data-table .actions .edit-btn { background: #e8eaf6; color: #1a237e; }





table.data-table .actions .del-btn { background: #ffebee; color: #c62828; }





.del-all-btn { background:#ffebee; color:#c62828; border:1px solid #ef9a9a; border-radius:4px; padding:6px 16px; cursor:pointer; font-size:13px; font-weight:600; }





.del-all-btn:hover { background:#ffcdd2; }





table.data-table .actions .view-btn { background: #e8f5e9; color: #2e7d32; }





/* Detail view */





.detail-section { background: #fff; border-radius: 10px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }





.detail-section .back-link { margin-bottom: 16px; }





.detail-section .back-link a { color: #1a237e; cursor: pointer; font-size: 14px; text-decoration: none; }





.detail-section .back-link a:hover { text-decoration: underline; }





.detail-section h2 { font-size: 20px; color: #333; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #1a237e; }





.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }





.detail-item { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }





.detail-item .dl { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }





.detail-item .dv { font-size: 15px; color: #333; font-weight: 500; }





.detail-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }





.detail-img-grid .detail-img-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #f8f8f8; cursor: pointer; transition: transform .2s, box-shadow .2s; }





.detail-img-grid .detail-img-card:hover { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }





.detail-img-grid .detail-img-card img { width: 100%; height: 200px; object-fit: cover; display: block; }





.detail-img-grid .detail-img-card .detail-img-order { padding: 6px 12px; font-size: 12px; color: #888; background: #fafafa; text-align: center; }





/* Lightbox */





.lightbox-overlay { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.92); z-index: 9999; justify-content: center; align-items: center; }





.lightbox-overlay.show { display: flex; }





.lightbox-content { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; box-shadow: 0 4px 30px rgba(0,0,0,0.5); cursor: default; user-select: none; display: block; margin: auto; }





.lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 22px; font-weight: 700; cursor: pointer; z-index: 10000; line-height: 1; background: linear-gradient(180deg, #ef5350, #c62828); border-radius: 8px; box-shadow: 0 3px 10px rgba(198,40,40,0.5), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; transition: all .2s; }





.lightbox-close:hover { transform: scale(1.1); box-shadow: 0 5px 16px rgba(198,40,40,0.6), 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); }





.lightbox-close:active { transform: scale(0.95); box-shadow: 0 2px 4px rgba(198,40,40,0.4), inset 0 2px 4px rgba(0,0,0,0.2); }





.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 28px; font-weight: 700; cursor: pointer; padding: 14px 20px; transition: all .2s; user-select: none; z-index: 10000; background: linear-gradient(180deg, #2979ff, #1565c0); border-radius: 10px; box-shadow: 0 4px 12px rgba(21,101,192,0.5), 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); opacity: 0.9; border: none; line-height: 1; }





.lightbox-nav:hover { opacity: 1; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 20px rgba(21,101,192,0.6), 0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3); }





.lightbox-nav:active { transform: translateY(-50%) scale(0.96); box-shadow: 0 2px 6px rgba(21,101,192,0.4), inset 0 2px 4px rgba(0,0,0,0.2); }





.lightbox-prev { left: 24px; }





.lightbox-next { right: 24px; }





.lightbox-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 14px; background: rgba(0,0,0,0.5); padding: 6px 16px; border-radius: 20px; }





.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; justify-content: center; align-items: center; }





.modal-overlay.show { display: flex; }





.modal { background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 780px; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }





.modal.bom-modal { max-width: 1100px; width: 95%; }





dialog .modal { max-width: 1100px; width: 95%; }





dialog { border: none; border-radius: 12px; padding: 0; overflow: visible; }

dialog[open] { margin: auto; }





.modal h3 { margin-bottom: 16px; font-size: 18px; }





.modal .form-grid { display: flex; flex-wrap: wrap; gap: 8px 24px; }





.form-grid .img-section { width: 100%; }



.detail-grid .img-section { grid-column: 1 / -1; width: 100%; }





.form-row { margin-bottom: 12px; }





.form-row { display: inline-flex; flex-direction: column; width: 300px; margin-bottom: 4px; }





.modal .form-row label { display: block; font-size: 13px; color: #555; margin-bottom: 4px; font-weight: 500; }





.form-row label { display: block; font-size: 17px; color: #555; margin-bottom: 4px; font-weight: 500; }





.modal .form-row input, .modal .form-row select, .modal .form-row textarea { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; outline: none; background: #fff; }





.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 6px; font-size: 17px; outline: none; background: #fff; }





.modal .form-row textarea { min-height: 60px; resize: vertical; }





.form-row textarea { min-height: 60px; resize: vertical; }





.modal .form-row input:focus, .modal .form-row select:focus { border-color: #1a237e; }





.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: #1a237e; }





.modal .modal-actions { display: flex; justify-content: flex-end; gap: 10mm; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }





.modal .modal-actions button { padding: 8px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }





/* Print field picker */





.print-picker { padding: 8px 0; }





.print-picker .pick-actions { margin-bottom: 12px; display: flex; gap: 8px; }





.print-picker .pick-actions button { padding: 4px 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; font-size: 12px; }





.print-picker .pick-actions button:hover { background: #f5f5f5; }





.print-picker .field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 40vh; overflow-y: auto; }





.print-picker .field-grid label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #eee; border-radius: 4px; cursor: pointer; font-size: 13px; }





.print-picker .field-grid label:hover { background: #f8f9ff; border-color: #1a237e; }





.print-picker .field-grid label input { width: auto; }





/* Image gallery */





.img-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }





.img-section h4 { font-size: 16px; color: #1a237e; margin-bottom: 8px; margin-top: 20px; text-align: left; }





.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }





.img-card { position: relative; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #f8f8f8; cursor: pointer; transition: transform .2s, box-shadow .2s; }





.img-card:hover { transform: scale(1.02); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }





.img-card img { width: 100%; height: 200px; object-fit: cover; display: block; }





.img-card .img-del, .detail-img-card .img-del { position: absolute; top: 2px; right: 2px; background: rgba(198,40,40,0.85); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }





.img-card .img-order { padding: 6px 12px; font-size: 12px; color: #888; background: #fafafa; text-align: center; border-top: 1px solid #eee; }





/* Dashboard cards */





.dash-card { background:#fff; border:1px solid #e0e0e0; border-radius:16px; padding:28px 20px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:transform 0.2s,box-shadow 0.2s; }





.dash-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1); }





.dash-icon { font-size:40px; margin-bottom:10px; }





.dash-label { font-size:15px; color:#666; margin-bottom:6px; }





.dash-num { font-size:32px; font-weight:700; color:#1a237e; }





.img-upload-btn {





  display: inline-flex;





  align-items: center;





  gap: 10px;





  padding: 16px 32px;





  border: 2px dashed #1a237e;





  border-radius: 12px;





  background: #f0f0ff;





  color: #1a237e;





  cursor: pointer;





  font-size: 26px;





  margin-top: 8px;





  transition: all .2s;





}





.img-upload-btn:hover { background: #e0e0ff; }





.img-upload-btn input[type=file] { display: none; }





.img-note { font-size: 24px; color: #888; margin-top: 4px; }





.toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 16px 32px; border-radius: 8px; color: #fff; font-size: 16px; font-weight: bold; z-index: 300; animation: toastIn .3s; box-shadow: 0 8px 24px rgba(0,0,0,0.25); white-space: nowrap; }





.toast.success { background: #2e7d32; }





.toast.error { background: #c62828; }





.toast.warning { background: #c62828; }





.toast.info { background: #455a64; }





@keyframes toastIn { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }





.mobile-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }





/* ═══════════════════════════════════════════════════
   移动端适配 (≤768px) - 完整响应式改造 v2026.07.28
   ═══════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 全局基础 ── */
  html, body { overflow-x: hidden; -webkit-overflow-scrolling: touch; }
  body { font-size: 14px; }

  /* ── 侧边栏：滑出式遮罩 ── */
  .sidebar {
    transform: translateX(-100%);
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    width: 280px !important;
    height: calc(100vh - 56px) !important;
    z-index: 200 !important;
    transition: transform 0.25s ease-out !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .sidebar.open { transform: translateX(0); }
  /* 侧边栏背景遮罩 */
  .sidebar.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: -1;
  }

  /* ── 主内容区全宽 ── */
  .main {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 60px 8px 16px 8px !important;
    min-height: calc(100vh - 56px);
  }

  /* ── 汉堡菜单按钮 ── */
  .mobile-toggle { display: flex !important; align-items: center; justify-content: center; }
  .mobile-menu-btn { display: inline-flex !important; }

  /* ── 顶栏压缩 ── */
  .topbar {
    height: 56px !important;
    padding: 0 12px !important;
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 100;
  }
  .topbar .brand { font-size: 16px !important; }
  .topbar .user-info { font-size: 12px !important; gap: 4px !important; }
  .topbar .user-info .lang-btn,
  .topbar .user-info .logout-btn {
    padding: 4px 10px !important;
    font-size: 11px !important;
    margin-left: 4px !important;
  }
  .topbar .user-info #user-display { font-size: 12px !important; }

  /* ── 统计卡片：2列 → 可滚动 ── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .stat-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .stat-card .stat-num { font-size: 22px !important; }
  .stat-card .stat-label { font-size: 11px !important; }

  /* ── 模块卡片：单列 ── */
  .modules-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .module-card {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .module-card .mc-icon { font-size: 24px !important; margin-bottom: 6px !important; }
  .module-card .mc-title { font-size: 14px !important; }
  .module-card .mc-desc { font-size: 11px !important; }

  /* ── 报表卡片 ── */
  .report-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .report-card {
    padding: 14px !important;
  }
  .report-card .num { font-size: 24px !important; }

  /* ── 数据区标题 ── */
  .data-header {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .data-header h2 { font-size: 16px !important; }
  .data-header .dh-actions {
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .data-header .dh-actions input,
  .data-header .dh-actions select {
    width: 100% !important;
    max-width: 100% !important;
  }
  .data-header .dh-actions button {
    width: 100% !important;
  }

  /* ── 表格：横向滚动 ── */
  .table-wrap, .data-table, table.data-table, .report-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.data-table th,
  table.data-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* ── 弹窗全屏 ── */
  .modal {
    width: 95% !important;
    max-width: 95vw !important;
    padding: 16px !important;
    border-radius: 12px !important;
    max-height: 90vh !important;
  }
  .modal.bom-modal,
  dialog .modal {
    max-width: 98vw !important;
    width: 98% !important;
  }
  .modal h3 { font-size: 16px !important; margin-bottom: 12px !important; }
  .modal .form-grid {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .modal .form-row,
  .form-row {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .modal .form-row label,
  .form-row label { font-size: 13px !important; }
  .modal .form-row input,
  .modal .form-row select,
  .modal .form-row textarea,
  .form-row input,
  .form-row select,
  .form-row textarea {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
  .modal .modal-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .modal .modal-actions button {
    width: 100% !important;
  }

  /* ── 登录框 ── */
  .login-box {
    width: 90% !important;
    max-width: 360px !important;
    padding: 32px 24px !important;
    border-radius: 16px !important;
  }
  .login-box h1 { font-size: 28px !important; }
  .login-box .subtitle { font-size: 14px !important; }
  .login-box input {
    padding: 14px !important;
    font-size: 15px !important;
  }
  .login-box button {
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* ── 详情页 ── */
  .detail-section {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  .detail-section h2 { font-size: 17px !important; }
  .detail-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .detail-item { padding: 8px 10px !important; font-size: 13px !important; }
  .detail-item .dl { font-size: 10px !important; }
  .detail-item .dv { font-size: 14px !important; }

  /* ── Dashboard卡片 ── */
  .dash-card {
    padding: 16px 10px !important;
    border-radius: 10px !important;
  }
  .dash-num { font-size: 22px !important; }
  .dash-label { font-size: 11px !important; }
  .dash-icon { font-size: 24px !important; }

  /* ── 图片网格 ── */
  .img-grid,
  .detail-img-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .img-card img,
  .detail-img-grid .detail-img-card img {
    height: 140px !important;
  }

  /* ── 表单控件触摸友好 ── */
  input, select, button, textarea {
    min-height: 40px;
    font-size: 14px;
  }

  /* ── 分页适应性 ── */
  .pagination {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .pagination button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* ── 过滤器自适应 ── */
  .filter-bar {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .filter-bar select,
  .filter-bar input,
  .filter-bar button {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── BOM编辑器 ── */
  .bom-split-editor {
    flex-direction: column !important;
    gap: 12px !important;
    min-height: auto !important;
  }
  .bom-mid {
    flex-direction: row !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .bom-right {
    border-left: none !important;
    border-top: 1px solid #ddd !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    min-width: 0 !important;
  }

  /* ── 打印选择器 ── */
  .print-picker .field-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }

  /* ── 弹窗叠加层优化 ── */
  .modal-overlay.show {
    align-items: flex-end !important;
  }
  .modal-overlay.show .modal {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    max-height: 90vh !important;
  }

  /* ── Toast 提示 ── */
  .toast {
    padding: 12px 20px !important;
    font-size: 14px !important;
    white-space: normal !important;
    max-width: 85vw !important;
    text-align: center !important;
  }

  /* ── lightbox 导航 ── */
  .lightbox-prev { left: 8px !important; }
  .lightbox-next { right: 8px !important; }
  .lightbox-nav { padding: 10px 14px !important; font-size: 20px !important; }
  .lightbox-close { top: 10px !important; right: 12px !important; width: 36px !important; height: 36px !important; font-size: 18px !important; }

  /* ── 大size主题覆盖回正常 ── */
  .nav-item { font-size: 15px !important; padding: 12px 24px !important; }
  .nav-sub .sub-item { font-size: 14px !important; padding: 10px 24px 10px 48px !important; }
  .nav-group { font-size: 13px !important; padding: 16px 24px 8px !important; }

}





.loading { text-align: center; padding: 60px; color: #999; }





.loading::after { content: ''; display: block; width: 32px; height: 32px; border: 3px solid #e0e0e0; border-top-color: #1a237e; border-radius: 50%; animation: spin .6s linear infinite; margin: 16px auto; }





@keyframes spin { to { transform: rotate(360deg); } }





.empty-state { text-align: center; padding: 40px; color: #999; font-size: 14px; background: #fff; border-radius: 8px; }





.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }





.pagination button { padding: 6px 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; font-size: 13px; }





.pagination button.active { background: #1a237e; color: #fff; border-color: #1a237e; }





.pagination button:hover:not(.active) { background: #f5f5f5; }





.lang-badge { background: #ffd54f; color: #1a237e; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; margin-left: 6px; }







/* BOM split-panel editor */





.bom-split-editor { display:flex; gap:10mm; min-height:380px; }





.bom-left { flex:1; min-width:0; overflow-x:auto; }





.bom-left table { width:100%; border-collapse:collapse; font-size:13px; }





.bom-left th { background:#f0f0f0; padding:6px 8px; text-align:left; border:1px solid #ddd; white-space:nowrap; }





.bom-left td { padding:5px 8px; border:1px solid #eee; }





.bom-left tr:hover td { background:#f5f8ff; }





.bom-parts-table { width:100%; border-collapse:collapse; font-size:13px; }





.bom-parts-table th { background:#f0f0f0; padding:6px 8px; text-align:left; border:1px solid #ddd; white-space:nowrap; }





.bom-parts-table td { padding:5px 8px; border:1px solid #eee; }





.bom-parts-table tr:hover td { background:#f5f8ff; }





.bom-section-label { font-weight:600; font-size:14px; padding:4px 0; color:#333; }





.bom-right table { width:100%; border-collapse:collapse; font-size:13px; }





.bom-mid { display:flex; align-items:center; justify-content:center; width:50px; flex-shrink:0; }





.bom-arrow-btn { width:44px; height:44px; border-radius:50%; background:linear-gradient(145deg, #2196f3, #0d47a1); color:#fff; font-size:20px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow: 3px 3px 6px rgba(0,0,0,0.3), inset 0 -2px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3); transition:all 0.15s; }





.bom-arrow-btn:hover { background:linear-gradient(145deg, #42a5f5, #1565c0); box-shadow: 2px 2px 4px rgba(0,0,0,0.4), inset 0 -1px 3px rgba(0,0,0,0.15), inset 0 1px 3px rgba(255,255,255,0.4); transform:scale(1.08); }





.bom-arrow-btn:active { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(255,255,255,0.15); transform:scale(0.96); }





/* Red blinking animation for BOM version input */





@keyframes bom-version-blink {





  0%, 100% { border-color: #f44336; background-color: #ffebee; }





  50% { border-color: #d32f2f; background-color: #ffcdd2; }





}





.bom-version-error {





  animation: bom-version-blink 0.5s ease-in-out 6;





  box-shadow: 0 0 8px rgba(244,67,54,0.4);





  outline: none;





}





.bom-right { flex:1; min-width:220px; border-left:1px solid #ddd; padding-left:16px; }





.bom-right h4 { margin:0 0 10px 0; color:#333; font-size:18px; font-weight:700; }





.bom-added-item { padding:8px 10px; margin-bottom:6px; background:#f8f9fa; border:1px solid #eee; border-radius:6px; font-size:13px; }





.bom-added-item .bom-item-name { font-weight:600; color:#333; }





.bom-added-item .bom-item-detail { color:#666; font-size:12px; }





.bom-added-item .bom-remove-btn { float:right; color:#e74c3c; cursor:pointer; font-size:16px; padding:0 4px; }





.bom-added-item .bom-remove-btn:hover { color:#c0392b; }





.ac-dropdown { position:absolute; top:100%; left:0; right:0; max-height:180px; overflow-y:auto; border:1px solid #ccc; background:#fff; z-index:9999; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,0.15); }

.ac-dropdown div { padding:6px 10px; cursor:pointer; border-bottom:1px solid #eee; font-size:13px; }

.ac-dropdown div:hover { background:#e8eaf6; }





/* ═══ 报表/看板(新增) ═══ */

.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }

.report-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; }

.report-card .num { font-size: 32px; font-weight: 700; color: #1a237e; line-height: 1.2; }

.report-card .label { font-size: 13px; color: #666; margin-top: 4px; }

.report-card.warn .num { color: #f44336; }

.report-card.info .num { color: #1976d2; }

.report-card.success .num { color: #388e3c; }

.report-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); font-size: 13px; }

.report-table th { background: #f5f5f5; padding: 10px 12px; text-align: left; font-weight: 600; color: #333; border-bottom: 2px solid #e0e0e0; }

.report-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; }

.report-table tr:hover td { background: #f8f9ff; }

.report-table .total-row td { font-weight: 700; background: #e8eaf6; border-top: 2px solid #1a237e; }

.import-box { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 16px; }

.import-box h3 { margin-bottom: 12px; font-size: 15px; color: #1a237e; }

.import-box select, .import-box input[type=file] { margin: 8px 0; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; width: 100%; max-width: 300px; display: block; }

.import-box .btn { margin: 4px 8px 4px 0; }

.filter-bar { margin-bottom: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.filter-bar select, .filter-bar input, .filter-bar button { padding: 6px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; }

.filter-bar button { background: #1a237e; color: #fff; border: none; cursor: pointer; }

.filter-bar button:hover { background: #283593; }



.readonly-field { background: #f5f5f5; cursor: not-allowed; color: #666; }

/* ========== 现代简约蓝白风主题覆盖 ========== */

/* 全局背景 */
body { background: #f5f7fa; color: #1e293b; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* 登录页 */
#login-screen { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-box { border-radius: 16px; padding: 48px 56px; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.login-box h1 { color: #2563eb; font-size: 36px; text-shadow: none; }
.login-box .subtitle { color: #64748b; font-size: 16px; margin-bottom: 32px; }
.login-box input { border: 1px solid #e2e8f0; border-radius: 10px; padding: 14px 18px; font-size: 15px; transition: all .2s; }
.login-box input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.login-box button { background: linear-gradient(135deg, #3b82f6, #2563eb); border-radius: 10px; padding: 14px; font-size: 16px; box-shadow: 0 4px 12px rgba(37,99,235,0.3); letter-spacing: 1px; }
.login-box button:hover { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 6px 16px rgba(37,99,235,0.4); transform: translateY(-1px); }

/* 顶栏 */
.topbar { background: #ffffff; color: #1e293b; box-shadow: 0 1px 3px rgba(0,0,0,0.08); border-bottom: 1px solid #e2e8f0; height: 60px; }
.topbar .brand { color: #1e293b; text-shadow: none; font-size: 18px; }
.topbar .brand span { color: #2563eb; }
.topbar .user-info { font-size: 14px; color: #475569; }
.topbar .user-info #user-display { text-shadow: none; color: #1e293b; font-weight: 500; }
.topbar .user-info .lang-btn { background: #f1f5f9; color: #475569; box-shadow: none; border: 1px solid #e2e8f0; padding: 6px 16px; font-size: 13px; border-radius: 6px; }
.topbar .user-info .lang-btn:hover { background: #e2e8f0; color: #1e293b; box-shadow: none; transform: none; border-color: #cbd5e1; }
.topbar .user-info .logout-btn { background: #ef4444; box-shadow: 0 2px 6px rgba(239,68,68,0.25); padding: 6px 16px; font-size: 13px; border-radius: 6px; }
.topbar .user-info .logout-btn:hover { background: #dc2626; box-shadow: 0 4px 10px rgba(239,68,68,0.35); transform: translateY(-1px); }

/* 侧边栏 */
.sidebar { background: #ffffff; border-right: 1px solid #e2e8f0; width: 240px; top: 60px; }
.sidebar .nav-group { color: #94a3b8; text-shadow: none; font-size: 11px; padding: 16px 20px 6px; }
.sidebar .nav-item { color: #475569; font-size: 14px; padding: 11px 20px; gap: 12px; text-shadow: none; border-left: 3px solid transparent; }
.sidebar .nav-item:hover { background: #f1f5f9; color: #1e293b; border-left-color: #cbd5e1; }
.sidebar .nav-item.active { background: #eff6ff; color: #2563eb; border-left-color: #2563eb; font-weight: 600; box-shadow: none; }
.sidebar .nav-item .icon { font-size: 18px; width: 24px; }
.sidebar .nav-parent { color: #64748b; font-size: 14px; padding: 10px 20px; text-shadow: none; }
.sidebar .nav-parent:hover { background: #f1f5f9; color: #1e293b; border-left-color: #cbd5e1; }
.sidebar .nav-arrow { color: #94a3b8; font-size: 10px; }
.sidebar .nav-sub { border-left-color: #e2e8f0; margin-left: 16px; }
.sidebar .nav-sub .sub-item { font-size: 13px; padding: 8px 20px; color: #64748b; }
.sidebar .sub-parent { color: #64748b; font-size: 13px; padding: 8px 20px; }
.sidebar .sub-parent:hover { background: #f1f5f9; color: #1e293b; border-left-color: #cbd5e1; }
.sidebar .sub-sub { border-left-color: #f1f5f9; margin-left: 16px; }
.sidebar .sub-sub .sub-item { font-size: 12px; padding: 6px 20px; }

/* 主内容区 */
.main { margin-left: 240px; padding: 20px 24px; min-height: calc(100vh - 60px); }

/* 统计卡片 */
.stats-grid { gap: 16px; margin-bottom: 20px; }
.stat-card { border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; transition: all .2s; }
.stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.stat-card .stat-num { font-size: 28px; color: #2563eb; font-weight: 700; }
.stat-card .stat-label { font-size: 12px; color: #64748b; margin-top: 6px; }

/* 模块卡片 */
.modules-grid { gap: 16px; }
.module-card { border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; }
.module-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #e2e8f0; }
.module-card .mc-title { font-size: 15px; color: #1e293b; font-weight: 600; }
.module-card .mc-desc { font-size: 12px; color: #64748b; }
.module-card .mc-stats { font-size: 12px; color: #64748b; }
.module-card .mc-stats span { background: #f1f5f9; color: #475569; }
.module-card .mc-icon { font-size: 24px; margin-bottom: 10px; }

/* 数据区标题 */
.data-header { margin-bottom: 16px; }
.data-header h2 { font-size: 18px; color: #1e293b; font-weight: 600; }
.data-header .dh-actions input { border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px; font-size: 13px; transition: all .2s; }
.data-header .dh-actions input:focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.data-header .dh-actions button { border-radius: 8px; font-size: 13px; }

/* 主按钮 */
.btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); border-radius: 8px; font-size: 14px; font-weight: 500; padding: 8px 18px; box-shadow: 0 2px 6px rgba(37,99,235,0.25); }
.btn-primary:hover { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 4px 12px rgba(37,99,235,0.35); transform: translateY(-1px); }

/* 次要按钮 */
.btn-outline { background: #ffffff; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 14px; font-weight: 500; padding: 8px 18px; box-shadow: none; }
.btn-outline:hover { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; box-shadow: none; transform: translateY(-1px); }

/* 打印按钮 */
.btn-print { background: linear-gradient(135deg, #22c55e, #16a34a); border-radius: 8px; font-size: 14px; font-weight: 500; padding: 8px 18px; box-shadow: 0 2px 6px rgba(34,197,94,0.25); }
.btn-print:hover { background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 4px 12px rgba(34,197,94,0.35); transform: translateY(-1px); }

/* 删除按钮 */
.del-all-btn { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 500; }
.del-all-btn:hover { background: #fee2e2; border-color: #fca5a5; }

/* 表格 */
table.data-table { border-collapse: separate; border-spacing: 0; }
table.data-table th { background: #f8fafc; color: #475569; font-size: 12px; font-weight: 600; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; text-transform: none; letter-spacing: 0.3px; }
table.data-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid #f1f5f9; color: #334155; }
table.data-table tr:hover td { background: #f8fafc; }
table.data-table .actions .edit-btn { background: #eff6ff; color: #2563eb; border-radius: 6px; padding: 4px 10px; font-size: 12px; }
table.data-table .actions .del-btn { background: #fef2f2; color: #dc2626; border-radius: 6px; padding: 4px 10px; font-size: 12px; }
table.data-table .actions .view-btn { background: #f0fdf4; color: #16a34a; border-radius: 6px; padding: 4px 10px; font-size: 12px; }

/* 详情页 */
.detail-section { border-radius: 12px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #f1f5f9; }
.detail-section .back-link a { color: #2563eb; font-size: 13px; }
.detail-section h2 { font-size: 18px; color: #1e293b; padding-bottom: 12px; border-bottom: 2px solid #2563eb; font-weight: 600; }
.detail-item { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.detail-item .dl { font-size: 11px; color: #94a3b8; letter-spacing: 0.5px; }
.detail-item .dv { font-size: 14px; color: #1e293b; font-weight: 500; }

/* Dashboard卡片 */
.dash-card { border-radius: 12px; border: 1px solid #f1f5f9; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 24px 16px; }
.dash-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.dash-label { font-size: 13px; color: #64748b; }
.dash-num { font-size: 28px; color: #2563eb; font-weight: 700; }
.dash-icon { font-size: 32px; margin-bottom: 8px; }

/* 图片区 */
.img-section h4 { font-size: 15px; color: #1e293b; font-weight: 600; }
.img-card { border: 1px solid #e2e8f0; border-radius: 10px; }
.img-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); }
.img-card .img-order { background: #f8fafc; color: #64748b; border-top: 1px solid #e2e8f0; font-size: 12px; padding: 8px 12px; }

/* 模态框通用优化 */
.modal-content, .form-section, .filter-bar { border-radius: 12px; }
.filter-bar button { background: #2563eb; border-radius: 8px; }
.filter-bar button:hover { background: #1d4ed8; }

/* 表单输入框统一优化 */
input[type="text"], input[type="number"], input[type="date"], input[type="email"], select, textarea {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    transition: all .2s;
}
input:focus, select:focus, textarea:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

/* ============================================================
   大气版优化 - 放大字号、增加留白、强化视觉层次
   ============================================================ */

/* 基础字号放大 */
body { font-size: 15px; }

/* 顶栏加高 */
.topbar { height: 72px; padding: 0 40px; }
.topbar .brand { font-size: 22px; }

/* 侧边栏加宽加高 */
.sidebar { width: 240px; }
.nav-item { padding: 14px 20px; font-size: 15px; }
.nav-sub .sub-item { padding: 12px 20px 12px 48px; font-size: 14px; }
.nav-group { padding: 18px 20px 8px; font-size: 12px; }

/* 主内容区增加留白 */
.main { padding: 24px; }

/* 统计卡片放大 */
.stats-grid { gap: 20px; margin-bottom: 24px; }
.stat-card { padding: 24px; border-radius: 14px; }
.stat-card .stat-num { font-size: 32px; font-weight: 700; }
.stat-card .stat-label { font-size: 14px; margin-top: 8px; }

/* 模块卡片 */
.modules-grid { gap: 20px; }
.module-card { padding: 28px 24px; border-radius: 14px; }
.module-card .mc-icon { font-size: 36px; margin-bottom: 14px; }
.module-card .mc-title { font-size: 17px; }

/* 数据区头部 */
.data-header { padding: 18px 24px; margin-bottom: 20px; border-radius: 12px; }
.data-header h2 { font-size: 20px; }

/* 按钮更高大 */
.btn-primary { padding: 12px 24px; font-size: 15px; border-radius: 10px; }
.btn-outline { padding: 12px 20px; font-size: 15px; border-radius: 10px; }
.btn-print { padding: 10px 20px; font-size: 14px; border-radius: 10px; }

/* 表格更舒展 */
table.data-table th { padding: 14px 16px; font-size: 14px; }
table.data-table td { padding: 14px 16px; font-size: 14px; }

/* 详情页 */
.detail-section { padding: 32px; border-radius: 14px; }
.detail-section h2 { font-size: 22px; padding-bottom: 16px; margin-bottom: 24px; }
.detail-grid { gap: 16px; }
.detail-item { padding: 12px 16px; font-size: 15px; }

/* 输入框更高 */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
    padding: 10px 14px;
    font-size: 15px;
    border-radius: 8px;
}

/* 弹窗/表单 */
.form-group { margin-bottom: 20px; }
.form-group label { font-size: 14px; margin-bottom: 8px; }

/* 卡片阴影增强质感 */
.stat-card, .module-card, .detail-section, .data-header {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
}


/* ============================================================
   主题：墨绿高级灰质感风
   主色：#0f766e  背景：#f1f5f9  卡片：纯白+细边框
   ============================================================ */

/* 全局背景 */
body { background: #f1f5f9; }

/* 登录页背景 */
#login-screen { background: linear-gradient(135deg, #0f766e 0%, #115e59 100%); }

/* 登录框标题 */
.login-box h1 { color: #0f766e; }

/* 登录输入框聚焦 */
.login-box input:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); }

/* 登录按钮 */
.login-box button { background: linear-gradient(135deg, #14b8a6, #0f766e); box-shadow: 0 6px 20px rgba(15, 118, 110, 0.4), inset 0 1px 0 rgba(255,255,255,0.15); }
.login-box button:hover { background: linear-gradient(135deg, #2dd4bf, #0d9488); box-shadow: 0 8px 24px rgba(15, 118, 110, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); }

/* 顶栏 */
.topbar { background: linear-gradient(135deg, #0f766e 0%, #115e59 100%); }
.topbar .brand span { color: #fde68a; }

/* 侧边栏 */
.sidebar { background: #ffffff; border-right: 1px solid #e2e8f0; }
.nav-item { color: #475569; }
.nav-item:hover { background: #f0fdfa; color: #0f766e; }
.nav-item.active { background: #ccfbf1; color: #0f766e; font-weight: 600; border-right: 3px solid #0f766e; }
.nav-sub .sub-item { color: #64748b; }
.nav-sub .sub-item:hover { background: #f0fdfa; color: #0f766e; }
.nav-sub .sub-item.active { color: #0f766e; font-weight: 600; }
.nav-group { color: #94a3b8; }

/* 主按钮 */
.btn-primary { background: linear-gradient(135deg, #14b8a6, #0f766e); border-color: #0f766e; }
.btn-primary:hover { background: linear-gradient(135deg, #2dd4bf, #0d9488); }

/* 次按钮 */
.btn-outline { color: #0f766e; border-color: #0f766e; }
.btn-outline:hover { background: #f0fdfa; }

/* 链接色 */
a { color: #0f766e; }
.back-link a { color: #0f766e; }

/* 表格表头 */
table.data-table th { background: #f0fdfa; color: #0f766e; border-bottom: 2px solid #14b8a6; }

/* 详情页标题 */
.detail-section h2 { color: #0f766e; border-bottom: 2px solid #14b8a6; }

/* 数据区标题 */
.data-header h2 { color: #0f766e; }

/* 统计卡片数字 */
.stat-card .stat-num { color: #0f766e; }

/* 模块卡片图标 */
.module-card .mc-icon { color: #0f766e; }

/* 卡片边框质感 */
.stat-card, .module-card, .detail-section, .data-header {
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

/* 选中行 */
table.data-table tr.selected td { background: #f0fdfa; }

/* 分页 */
.pagination .page-btn.active { background: #0f766e; border-color: #0f766e; }


/* 字号整体放大一号 */
body { font-size: 16px; }

/* 侧边栏菜单 */
.nav-item { font-size: 16px; padding: 16px 20px; }
.nav-sub .sub-item { font-size: 15px; padding: 14px 20px 14px 48px; }
.nav-group { font-size: 13px; padding: 20px 20px 10px; }

/* 顶栏 */
.topbar .brand { font-size: 24px; }

/* 统计卡片 */
.stat-card .stat-num { font-size: 36px; }
.stat-card .stat-label { font-size: 15px; }

/* 模块卡片 */
.module-card .mc-title { font-size: 18px; }
.module-card .mc-icon { font-size: 40px; }

/* 数据区标题 */
.data-header h2 { font-size: 22px; }

/* 按钮 */
.btn-primary { font-size: 16px; padding: 14px 28px; }
.btn-outline { font-size: 16px; padding: 14px 24px; }

/* 表格 */
table.data-table th { font-size: 15px; padding: 16px; }
table.data-table td { font-size: 15px; padding: 16px; }

/* 详情页 */
.detail-section h2 { font-size: 24px; }
.detail-item { font-size: 16px; padding: 14px 16px; }

/* 输入框 */
input[type="text"], input[type="number"], input[type="date"], select, textarea {
    font-size: 16px;
    padding: 12px 16px;
}

/* 表单标签 */
.form-group label { font-size: 15px; }


/* 侧边栏导航字体再放大 */
.nav-item { font-size: 17px; padding: 18px 24px; }
.nav-sub .sub-item { font-size: 16px; padding: 16px 24px 16px 56px; }
.nav-group { font-size: 14px; padding: 24px 24px 12px; }

/* 侧边栏加宽 */
.sidebar { width: 260px; }


/* 侧边栏菜单字体再加大 */
.nav-item { font-size: 18px !important; padding: 20px 24px !important; }
.nav-sub .sub-item { font-size: 17px !important; padding: 16px 24px 16px 56px !important; }
.nav-group { font-size: 15px !important; }


/* 分组标题加大 */
.nav-group { font-size: 18px !important; padding: 28px 24px 14px !important; letter-spacing: 1px; }