/* ============================================================
   报价管理系统 — 设计系统 v3.0 (ONES 极简商务)
   ============================================================ */
:root {
  /* 品牌色 */
  --primary: #1d4ed8; --primary-dark: #1e40af; --primary-light: #dbeafe; --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8;
  --success: #16a34a; --success-dark: #15803d; --success-light: #dcfce7; --success-50: #f0fdf4;
  --warning: #ea580c; --warning-dark: #c2410c; --warning-light: #fff7ed;
  --danger: #dc2626; --danger-dark: #b91c1c; --danger-light: #fef2f2;
  /* 中性色 */
  --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e8ecf1; --gray-300: #d5dbe3; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a;
  /* 表面色 */
  --sidebar-bg: #0b1520; --sidebar-hover: #162231; --sidebar-active: #1a3350;
  --bg: #f8fafc; --white: #fff;
  --border: #e8ecf1; --border-light: #f1f5f9;
  --text: #1e293b; --text-light: #64748b; --text-muted: #94a3b8;
  /* 间距 */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  /* 圆角（ONES 统一 6-8px） */
  --radius-sm: 5px; --radius: 8px; --radius-lg: 10px; --radius-xl: 14px;
  /* 阴影（更轻更细腻） */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.02);
  --shadow: 0 2px 4px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.02);
  /* 排版 */
  --font-sans: -apple-system, "Inter", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px;
  /* 过渡 */
  --transition: 0.15s ease;
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  background: var(--bg);
  color: var(--text);
  display: flex; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* ====== Sidebar ====== */
.sidebar {
  width: 220px; min-width: 220px;
  background: #0b1520;
  color: #94a3b8; display: flex; flex-direction: column;
  position: fixed; top:0; left:0; bottom:0; z-index:100; overflow-y:auto;
}
.sidebar-brand {
  padding: 18px 16px 14px; display: flex; align-items: center; gap:10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.brand-icon {
  width: 36px; height: 36px;
  background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-weight: 700; font-size: 16px;
}
.brand-name { font-size: 14px; font-weight: 600; color: #e2e8f0; letter-spacing: 0.3px; }
.brand-sub { font-size: 10px; color: #64748b; margin-top: 1px; }
.sidebar-nav { padding: 8px 10px; flex: 1; }
.nav-section {
  font-size: 10px; text-transform: uppercase; color: #475569;
  padding: 16px 8px 6px; letter-spacing: 1px; font-weight: 600;
}
.nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px; color: #7c8ba0;
  text-decoration: none; font-size: 13px; margin-bottom: 1px;
  transition: all var(--transition); border-left: none;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: #cbd5e1; }
.nav-item.active {
  background: rgba(29,78,216,0.15); color: #93c5fd; font-weight: 500;
  border-left: none;
}
.icon-nav {
  width: 22px; height: 22px; flex-shrink: 0;
  stroke: rgba(255,255,255,0.5);
}
.nav-item.active .icon-nav { stroke: #60a5fa; }
.sidebar-footer {
  padding: 12px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: space-between;
}
.user-info { display: flex; align-items: center; gap: 8px; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.user-name { font-size: 13px; color: #e2e8f0; font-weight: 500; }
.user-role { font-size: 11px; color: #64748b; }
.logout-btn {
  color: #64748b; text-decoration: none; font-size: 16px;
  padding: 4px 8px; border-radius: 4px; transition: all var(--transition);
}
.logout-btn:hover { color: #f87171; background: rgba(255,255,255,0.05); }

/* ====== Main Content ====== */
.main-content {
  margin-left: 220px;
  flex: 1;
  min-width: 0;
  max-height: 100vh;
  overflow: auto;
}

/* ====== Login Page ====== */
.login-page {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0c1929 100%);
  min-height: 100vh; position: relative; overflow: hidden;
}
.login-page::before {
  content: ''; position: absolute; top:-50%; right:-30%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
}
.login-page::after {
  content: ''; position: absolute; bottom:-40%; left:-20%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 70%);
}
.login-page .main-content { margin-left:0; width:100%; display:flex; justify-content:center; z-index:1; }
.login-box {
  background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
  padding: 48px 44px; border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1);
  width: 400px; position: relative;
}
.login-box h1 {
  text-align: center; margin-bottom: 8px;
  font-size: 24px; color: var(--text); font-weight: 700; letter-spacing: 0.5px;
}
.login-box::before {
  content: '垄普铝业'; display: block; text-align: center;
  font-size: 12px; color: var(--text-muted); margin-bottom: 24px;
  letter-spacing: 2px; text-transform: uppercase;
}

/* ====== Page Header ====== */
.page-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 24px 32px 16px;
}
.page-header h2 {
  font-size: 18px; font-weight: 600; color: var(--text);
  letter-spacing: 0.3px;
}

/* ====== Cards ====== */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; padding: 8px 32px;
}
.card {
  background: var(--white); padding: 24px; border-radius: var(--radius-lg);
  text-decoration: none; border: 1px solid var(--border);
  box-shadow: none; display: flex; flex-direction: column; gap: 8px;
  transition: all 0.2s ease;
}
.card:hover {
  border-color: #cbd5e1; box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.card-desc { font-size: 12px; color: var(--text-light); }
.card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--primary-50); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}

/* ====== Search Bar ====== */
.search-bar {
  display: flex; gap: 8px; padding: 0 16px 12px; align-items: center; flex-wrap: wrap;
}
.search-bar input, .search-bar select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; background: var(--white); transition: all var(--transition);
  box-shadow: none;
}
.search-bar input { flex: 1; max-width: 340px; }
.search-bar input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29,78,216,0.08); }
.search-bar select:focus { outline: none; border-color: var(--primary); }

/* ====== Forms ====== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; margin-bottom: 5px; font-size: 12px;
  font-weight: 600; color: var(--gray-600); letter-spacing: 0.2px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; background: var(--white);
  transition: all var(--transition); box-shadow: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,0.08);
}
.form-group textarea { resize: vertical; min-height: 60px; }
.form-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 20px;
}

/* ====== Buttons (v4.0 — 5变体 + 3尺寸 + loading/disabled) ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
  white-space: nowrap; transition: all 0.15s ease; line-height: 1.4;
  font-family: inherit; user-select: none;
  background: var(--white); color: var(--text);
}
.btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.btn:active { transform: scale(0.98); }

/* -- 变体 -- */
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 2px 8px rgba(29,78,216,0.2); }

.btn-secondary { background: var(--white); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-300); }

.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover { background: #15803d; border-color: #15803d; box-shadow: 0 2px 8px rgba(22,163,74,0.2); }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; box-shadow: 0 2px 8px rgba(220,38,38,0.2); }

.btn-warning { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-warning:hover { background: #c2410c; border-color: #c2410c; box-shadow: 0 2px 8px rgba(234,88,12,0.2); }

.btn-ghost { background: transparent; color: var(--text-light); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); color: var(--text); border-color: transparent; }

/* -- 尺寸 -- */
.btn-sm { padding: 4px 10px; font-size: 11px; gap: 4px; border-radius: 4px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }

/* -- 状态 -- */
.btn:disabled, .btn.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px; border: 2px solid transparent;
  border-top-color: currentColor; border-radius: 50%;
  animation: btnSpin 0.5s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

.btn-block { width: 100%; justify-content: center; }

.btn.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }

/* Link button (text-only) */
.btn-link { background: none; border: none; color: var(--primary); font-size: 13px; cursor: pointer; padding: 4px 8px; text-decoration: none; font-weight: 500; }
.btn-link:hover { color: var(--primary-dark); }
.btn-link.danger { color: var(--danger); }
.btn-link.danger:hover { color: var(--danger-dark); }

/* ====== Alerts ====== */
.alert {
  padding: 12px 18px; border-radius: var(--radius);
  margin: 0 32px 16px; font-size: 13px; font-weight: 500;
}
.alert-error { background: var(--danger-light); color: var(--danger); border: 1px solid #fecaca; }

/* ====== Table ====== */
.table-wrap {
  padding: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--white); margin: 0 16px;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  border: 1px solid var(--border);
}
.table {
  width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0;
  background: transparent; font-size: 13px;
}
.table thead { background: transparent; }
.table th {
  padding: 10px 12px; text-align: left; font-weight: 600;
  color: var(--gray-500); border-bottom: 1px solid var(--border);
  white-space: nowrap; font-size: 12px; text-transform: none; letter-spacing: 0.3px;
}
.table td {
  padding: 9px 12px; border-bottom: 1px solid #f1f5f9;
  color: var(--text); font-size: 13px; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis;
}
.table tbody tr:nth-child(odd) { background: #fff; }
.table tbody tr:nth-child(even) { background: #fafbfc; }
.table tbody tr:hover { background: #f1f5f9; }
.table tbody tr:last-child td { border-bottom: none; }
.table .empty {
  text-align: center; color: var(--text-muted);
  padding: 48px 16px; font-size: 14px;
}
.table .empty::before {
  content: '📋'; display: block; font-size: 32px; margin-bottom: 8px; opacity: 0.4;
}
.table td a { color: var(--primary); text-decoration: none; font-weight: 500; }
.table td a:hover { text-decoration: underline; }
.table tfoot td {
  border-top: 1px solid var(--border); font-weight: 600; background: var(--gray-50);
}

/* ====== Tags ====== */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.2px;
}
.tag-profile { background: #eff6ff; color: #3b82f6; }
.tag-sheet { background: #fef2f2; color: #ef4444; }
.tag-accessory { background: #faf5ff; color: #8b5cf6; }
.tag-assembly { background: #f0fdf4; color: #16a34a; }
.tag-finished { background: #fff7ed; color: #ea580c; }

/* ====== Status ====== */
.status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.status-inquiry { background: #f8fafc; color: #64748b; }
.status-passed { background: #fff7ed; color: #ea580c; }
.status-approved { background: #f0fdf4; color: #16a34a; }
.status-pending { background: #f8fafc; color: #64748b; }
.status-done { background: #f0fdf4; color: #16a34a; }
.status-running { background: #eff6ff; color: #2563eb; }

/* ====== Status Tabs (ONES 下划线式) ====== */
.status-tabs { display: flex; gap: 0; padding: 0 32px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.status-tabs .tab {
  padding: 10px 20px; border-radius: 0; font-size: 13px;
  text-decoration: none; color: var(--text-light); font-weight: 500;
  transition: all var(--transition); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.status-tabs .tab:hover { color: var(--text); background: transparent; }
.status-tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); background: transparent; box-shadow: none; }

/* ====== Utilities ====== */
.cost-cell { background: #f8fafc !important; color: var(--text-light) !important; }
.amount-cell { background: #f8fafc !important; font-weight: 600 !important; }
.search-item:hover { background: var(--primary-light); }
.dropdown-item:hover { background: var(--primary-light); }
.product-form h3 {
  padding: 0 24px; margin: 24px 0 14px; font-size: 15px; font-weight: 600; color: var(--text);
}
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); font-size: 12px; }

/* ====== Dashboard ====== */
.dashboard { padding: 32px; }
.dashboard h2 { margin-bottom: 24px; font-size: 20px; font-weight: 700; }

/* ====== Row actions (hover on first column) ====== */
.row-act { position: relative; text-align: center; vertical-align: middle; width: 38px; }
.row-num { color: var(--text-muted); font-size: 12px; }
.row-btns { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); white-space: nowrap; }
.table tbody tr:hover .row-btns { display: flex; gap: 2px; }
.table tbody tr:hover .row-num { display: none; }
.row-btn { width: 22px; height: 22px; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.row-btn.add { background: #dcfce7; color: #16a34a; }
.row-btn.add:hover { background: #16a34a; color: #fff; }
.row-btn.del { background: #fef2f2; color: #dc2626; }
.row-btn.del:hover { background: #dc2626; color: #fff; }

/* ====== Copy-on-hover ====== */
.copy-hint { opacity: 0; transition: opacity 0.15s; background: none; border: none; cursor: pointer; font-size: 11px; padding: 0 3px; }
*:hover > .copy-hint { opacity: 0.5; }
.copy-hint:hover { opacity: 1 !important; }

/* ====== Hideable columns (global) ====== */
.col-hide { display: none; }
#itemsTable .col-hide { display: none; }
.show-weight .col-weight,
.show-ucost .col-ucost,
.show-tcost .col-tcost,
.show-disc .col-disc,
#itemsTable.show-weight .col-weight,
#itemsTable.show-ucost .col-ucost,
#itemsTable.show-tcost .col-tcost,
#itemsTable.show-disc .col-disc { display: table-cell; }

/* ====== Quote toolbar ====== */
.quote-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 24px; background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50; gap: 8px; flex-wrap: wrap;
}
.qt-left, .qt-right { display: flex; align-items: center; gap: 6px; }
.qt-btn {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 5px;
  background: #fff; color: var(--text); font-size: 12px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; transition: all var(--transition); font-weight: 500;
}
.qt-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.qt-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.qt-btn.primary:hover { background: var(--primary-dark); }
.qt-btn.success { background: var(--success); color: #fff; border-color: var(--success); }
.qt-btn.success:hover { background: #15803d; }
.qt-btn.warn { background: var(--warning); color: #fff; border-color: var(--warning); }
.qt-btn.warn:hover { background: #c2410c; }
.qt-btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.qt-btn.danger:hover { background: #b91c1c; }
.qt-btn.on { background: var(--primary-light); border-color: var(--primary); color: var(--primary); }
.qt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.qt-label { font-size: 11px; color: var(--text-muted); }

/* ====== Quote form table (spreadsheet style, full-width smart fit) ====== */
#itemsTable, #bomTable { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#itemsTable thead, #bomTable thead { background: #f0f3f7; }
#itemsTable th, #bomTable th {
  padding: 6px 4px; font-weight: 600; color: #374151; border-right: 1px solid #d5dbe3;
  border-bottom: 1px solid #c5cdd8; font-size: 11px; text-transform: none;
  letter-spacing: 0; position: relative; white-space: nowrap;
}
#itemsTable th:last-child, #bomTable th:last-child { border-right: none; }
#itemsTable td, #bomTable td {
  padding: 6px 4px; border-right: 1px solid #e5e9f0; border-bottom: 1px solid #eef1f5;
  vertical-align: middle; transition: box-shadow 0.1s; white-space: nowrap; position: relative;
}
#itemsTable td:last-child, #bomTable td:last-child { border-right: none; }
#itemsTable td:hover, #bomTable td:hover {
  box-shadow: inset 0 0 0 2px #93c5fd;
  background: #fff;
}
#itemsTable td.cell-active, #bomTable td.cell-active {
  box-shadow: inset 0 0 0 2px #2563eb;
  background: #fff;
}
#itemsTable td input, #bomTable td input {
  width: 100%; border: none; background: transparent; font-size: 11px;
  padding: 3px 1px; outline: none; color: var(--text); font-family: inherit;
}
#itemsTable td input:focus, #bomTable td input:focus {
  background: #fff; box-shadow: none;
}
#itemsTable td input.cost-cell,
#itemsTable td input.amount-cell,
#bomTable td input.cost-cell,
#bomTable td input.amount-cell { background: transparent !important; }
#itemsTable .col-resize, #bomTable .col-resize {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 2; background: transparent;
}
#itemsTable .col-resize:hover,
#itemsTable .col-resize:active,
#bomTable .col-resize:hover,
#bomTable .col-resize:active { background: #93c5fd; }
#itemsTable th:hover .col-resize, #bomTable th:hover .col-resize { background: #cbd5e1; }
#itemsTable .row-resize:hover, #bomTable .row-resize:hover { background: #93c5fd; }
#itemsTable tbody tr:hover .row-resize, #bomTable tbody tr:hover .row-resize { background: #e5e9f0; }
/* hideable columns */
#itemsTable .col-hide, #bomTable .col-hide { display: none; }
#itemsTable.show-weight .col-weight, #bomTable.show-weight .col-weight { display: table-cell; }
#itemsTable.show-ucost .col-ucost, #bomTable.show-ucost .col-ucost { display: table-cell; }
#itemsTable.show-tcost .col-tcost, #bomTable.show-tcost .col-tcost { display: table-cell; }
#itemsTable.show-disc .col-disc, #bomTable.show-disc .col-disc { display: table-cell; }

/* 手动改价高亮（蓝色）—— 单价与原始不一致，折扣未改 */
#itemsTable td.price-changed-manual input[name$="_unit_price"],
#bomTable td.price-changed-manual input[name$="_unit_price"] {
  background: #dbeafe !important;
  border: 1px solid #3b82f6 !important;
  border-radius: 3px;
  color: #1d4ed8;
  font-weight: 600;
}

/* 折扣调整高亮（红色）—— 折扣率≠1，单价随之变化 */
#itemsTable td.price-changed-disc input[name$="_unit_price"],
#bomTable td.price-changed-disc input[name$="_unit_price"] {
  background: #fce4ec !important;
  border: 1px solid #e53935 !important;
  border-radius: 3px;
  color: #c62828;
  font-weight: 600;
}

/* 校验错误行高亮（深红色） */
#itemsTable tbody tr.has-error td,
#bomTable tbody tr.has-error td {
  background: #fecaca !important;
}
#itemsTable tbody tr.has-error:hover td,
#bomTable tbody tr.has-error:hover td {
  background: #fca5a5 !important;
}
#itemsTable tbody tr.has-error td input,
#bomTable tbody tr.has-error td input {
  color: #b91c1c; font-weight: 600;
}

/* 赠品行高亮（淡黄） */
#itemsTable tbody tr[data-gift] td,
#bomTable tbody tr[data-gift] td {
  background: #fff9c4 !important;
}
#itemsTable tbody tr[data-gift] td input[name$="_amount"],
#bomTable tbody tr[data-gift] td input[name$="_amount"] {
  background: #fff9c4 !important;
}

/* ====== Font size switcher ====== */
.fs-btn {
  width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: #94a3b8; border-radius: 4px;
  cursor: pointer; font-weight: 700; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fs-btn:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
#fs-s { font-size: 10px; }
#fs-l { font-size: 14px; }

.fs-s { font-size: 12px; }
.fs-s h2 { font-size: 18px !important; }
.fs-s .table { font-size: 11px; }
.fs-s .btn { font-size: 11px; padding: 6px 14px; }

.fs-m { font-size: 14px; }

.fs-l { font-size: 16px; }
.fs-l h2 { font-size: 24px !important; }
.fs-l .table { font-size: 14px; }
.fs-l .btn { font-size: 14px; padding: 10px 20px; }

/* ====== Hide number input spinners ====== */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ====== 动效 ====== */
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.main-content { animation: pageIn 0.2s ease; }
.table tbody tr { transition: background 0.1s ease; }
.sidebar .nav-item { transition: all 0.12s ease; }
.btn, .qt-btn { transition: all 0.12s ease; }

/* ====== 滚动条美化 (WebKit) ====== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 5px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 5px; border: 2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ====== Board Screen ====== */