/**
 * 全局统一 UI 主题
 * 白天模式：浅色底、深色字；黑夜模式：深色底、浅色字
 * 后台设置 + 主题(白天/黑夜/自动) 4 个按钮同尺寸、全局固定位置
 */
:root {
  --mes-bg-surface: #1c1b1f;
  --mes-bg-card: #2b2930;
  --mes-bg-card-hover: #36343b;
  --mes-color-primary: #90caf9;
  --mes-color-primary-bg: #1976d2;
  --mes-color-on-primary: #0d47a1;
  --mes-color-on-surface: #e6e1e5;
  --mes-color-on-surface-dim: #b0bec5;
  --mes-color-outline: rgba(255,255,255,0.12);
  --mes-color-border: rgba(255,255,255,0.08);
}

/* 白天模式：全局浅色底、深色字（含后台、CSV、弹窗、框内） */
[data-theme="light"] {
  --md-sys-color-primary: #1976d2;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-surface: #fafafa;
  --md-sys-color-surface-dim: #f5f5f5;
  --md-sys-color-on-surface: #1c1b1f;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #e7e0ec;
  --md-sys-color-surface-container: #ffffff;
  --md-sys-color-surface-container-high: #f5f5f5;
}

/* 黑夜模式：全局深色底、浅色字（无蓝色，与黑底同色） */
[data-theme="dark"] {
  --md-sys-color-primary: #90caf9;
  --md-sys-color-on-primary: #0d47a1;
  --md-sys-color-surface: #1c1b1f;
  --md-sys-color-surface-dim: #141318;
  --md-sys-color-on-surface: #e6e1e5;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: rgba(255,255,255,0.2);
  --md-sys-color-surface-container: #2b2930;
  --md-sys-color-surface-container-high: #36343b;
}
/* 全局页面背景：白天白底、黑夜黑底（无蓝渐变） */
[data-theme="dark"] body { background: var(--md-sys-color-surface) !important; }
[data-theme="light"] body { background: var(--md-sys-color-surface) !important; }

/* 全局固定：后台设置 + 白天/黑夜/自动 4 个按钮同尺寸（40×40）、同间距 */
.global-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.global-header-actions .theme-icon,
.global-header-actions .btn-admin-entry,
.global-header-actions .btn-home {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  box-sizing: border-box;
}
.global-header-actions .theme-icon svg,
.global-header-actions .btn-admin-entry svg,
.global-header-actions .btn-home svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.global-header-actions .theme-icon:hover,
.global-header-actions .btn-admin-entry:hover,
.global-header-actions .btn-home:hover {
  filter: brightness(1.1);
  color: var(--md-sys-color-on-surface);
}
.global-header-actions .theme-icon.active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary);
}

/* 创建账号、用户（姓）、退出：与主题/后台同款外框（随主题），内容扁平单色 */
.global-header-actions .btn-user-header {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  box-sizing: border-box;
}
.global-header-actions .btn-user-header:hover { filter: brightness(1.1); color: var(--md-sys-color-on-surface); }

.global-header-actions .btn-create-account.btn-icon-only {
  padding: 0;
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.global-header-actions .btn-create-account.btn-icon-only .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.global-header-actions .btn-create-account.btn-icon-only .icon svg,
.global-header-actions .btn-logout-arrow svg { width: 20px; height: 20px; flex-shrink: 0; }
.global-header-actions .btn-create-account.btn-icon-only:hover { filter: brightness(1.1); color: var(--md-sys-color-on-surface); }

.global-header-actions .btn-logout-arrow {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.global-header-actions .btn-logout-arrow:hover { filter: brightness(1.1); color: var(--md-sys-color-on-surface); }

/* 底部/顶部通用图标按钮：白天=深色底、黑字；黑夜=浅色底、黑字 */
[data-theme="light"] .global-header-actions .theme-icon,
[data-theme="light"] .global-header-actions .btn-admin-entry,
[data-theme="light"] .global-header-actions .btn-home,
[data-theme="light"] .global-header-actions .btn-user-header,
[data-theme="light"] .global-header-actions .btn-create-account.btn-icon-only,
[data-theme="light"] .global-header-actions .btn-logout-arrow,
[data-theme="light"] .btn-entry-bom {
  background: #2b2930;
  color: #e6e1e5;
  border-color: rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .global-header-actions .theme-icon,
[data-theme="dark"] .global-header-actions .btn-admin-entry,
[data-theme="dark"] .global-header-actions .btn-home,
[data-theme="dark"] .global-header-actions .btn-user-header,
[data-theme="dark"] .global-header-actions .btn-create-account.btn-icon-only,
[data-theme="dark"] .global-header-actions .btn-logout-arrow,
[data-theme="dark"] .btn-entry-bom {
  background: #ffffff;
  color: #1c1b1f;
  border-color: rgba(255, 255, 255, 0.5);
}

/* 全局居中靠下 7 图标栏（独立页算法/后台也共用；无权限时 5/6 个） */
.global-footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.global-footer-nav .menu2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.global-footer-nav .menu2-actions .theme-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 底部栏图标：苹果 Dock 式悬停放大上浮（7/8 图标及未来新功能通用） */
.global-footer-nav .menu2-actions .btn-entry-bom,
.global-footer-nav .menu2-actions .theme-icon,
.global-footer-nav .menu2-actions .btn-admin-entry,
.global-footer-nav .menu2-actions .btn-create-account.btn-icon-only,
.global-footer-nav .menu2-actions .btn-user-header,
.global-footer-nav .menu2-actions .btn-logout-arrow {
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: center bottom;
}
.global-footer-nav .menu2-actions .btn-entry-bom:hover,
.global-footer-nav .menu2-actions .theme-icon:hover,
.global-footer-nav .menu2-actions .btn-admin-entry:hover,
.global-footer-nav .menu2-actions .btn-create-account.btn-icon-only:hover,
.global-footer-nav .menu2-actions .btn-user-header:hover,
.global-footer-nav .menu2-actions .btn-logout-arrow:hover {
  transform: scale(1.22) translateY(-6px);
}

/* 6个算法页头部快捷跳转（4级按钮，圆角 + Dock 悬浮） */
.algo-header-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 auto 20px;
  position: sticky;
  top: 0;
  z-index: 900;
  padding: 8px 0 16px;
  background: var(--md-sys-color-surface);
}
.algo-header-nav .algo-nav-btn {
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  min-width: 112px;
  border-radius: 10px;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1),
    filter 0.18s ease-out,
    background-color 0.18s ease-out,
    color 0.18s ease-out,
    border-color 0.18s ease-out;
  transform-origin: center bottom;
}

/* 头部算法切换按钮：白天=深色按钮，黑夜=浅色按钮（选中仍用全局蓝色） */
[data-theme="light"] .algo-header-nav .algo-nav-btn {
  background: #2b2930;
  color: #e6e1e5;
  border-color: rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .algo-header-nav .algo-nav-btn {
  background: #ffffff;
  color: #1c1b1f;
  border-color: rgba(255, 255, 255, 0.5);
}
.algo-header-nav .algo-nav-btn:hover {
  transform: scale(1.16) translateY(-4px);
  filter: brightness(1.08);
  color: var(--md-sys-color-on-surface);
}
.algo-header-nav .algo-nav-btn.is-active {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-color: var(--md-sys-color-primary);
  filter: none;
}

/* 除六宫格外：白天=深框白内容，黑夜=白框深色内容（统一边框+背景+字色） */
.mes-btn,
.btn-back-global,
.algo-btns .btn-calc,
.algo-btns .btn-clear {
  border: 1px solid var(--md-sys-color-outline-variant);
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.2s;
}

/* 内页按钮：白天=深色按钮，黑夜=浅色按钮（与头部一致） */
[data-theme="light"] .mes-btn,
[data-theme="light"] .btn-back-global,
[data-theme="light"] .algo-btns .btn-calc,
[data-theme="light"] .algo-btns .btn-clear {
  background: #2b2930;
  color: #e6e1e5;
  border-color: rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .mes-btn,
[data-theme="dark"] .btn-back-global,
[data-theme="dark"] .algo-btns .btn-calc,
[data-theme="dark"] .algo-btns .btn-clear {
  background: #ffffff;
  color: #1c1b1f;
  border-color: rgba(255, 255, 255, 0.5);
}
.mes-btn {
  padding: 0 18px;
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mes-btn:hover,
.btn-back-global:hover,
.algo-btns .btn-calc:hover,
.algo-btns .btn-clear:hover {
  filter: brightness(1.08);
  color: var(--md-sys-color-on-surface);
}
.btn-back-global {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}
.btn-back-global .ic-arrow { width: 18px; height: 18px; flex-shrink: 0; }
/* 返回键全局固定位置：每页唯一，放在页面头部左侧第一项 */
.page-header .btn-back-global,
.app-bar .btn-back-global,
.header .btn-back-global { order: -1; margin-right: auto; }

/* 4 个产品算法 + 运费算法：主标题统一（与导航按钮同家族） */
.board-calc-panel h4,
.box-panel h4,
.cabinet-panel h4,
.ltuz-panel h4,
.freight-panel h4,
#package-cart-section > h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  margin: 0 0 12px;
}

/* 数字输入：默认隐藏浏览器自带上下微调按钮 */
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;
}
/* 仅数量相关输入恢复微调按钮（id 以 -qty 结尾） */
input[type="number"][id$="-qty"]::-webkit-outer-spin-button,
input[type="number"][id$="-qty"]::-webkit-inner-spin-button {
  -webkit-appearance: auto;
}
input[type="number"][id$="-qty"] {
  -moz-appearance: number-input;
}

/* 6 页注释文字统一：不加粗、同字号同颜色 */
.calc-hint,
.box-hint,
.cabinet-hint,
.ltuz-hint,
.freight-hint {
  font-size: 14px;
  font-weight: 400;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.5;
}

/* 选主材：随主题 surface/on-surface */
#calc-material,
#box-material,
select.select-main-material,
#cab-material,
#ltuz-material {
  background: var(--md-sys-color-surface-container) !important;
  color: var(--md-sys-color-on-surface) !important;
}
#calc-material option,
#box-material option,
select.select-main-material option,
#cab-material option,
#ltuz-material option {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
}

/* 主材下拉框：预留约 9 个中文字宽度，优先展示完整，但不留太大空白 */
#calc-material,
#box-material,
#cab-material,
#ltuz-material,
select.select-main-material {
  min-width: 176px;
}

/* 颜色备注输入框：预留约 9 个中文字宽度，并与按钮同高 */
.calc-color-remark,
.box-remark,
.cabinet-remark,
.ltuz-remark {
  width: 150px !important;
  min-width: 150px !important;
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
}

/* 4 个产品 + 运费算法：字段标签字体统一 */
.board-calc-panel .calc-row label,
.box-panel .box-row label,
.cabinet-panel .cabinet-row label,
.ltuz-panel .ltuz-row label,
.freight-panel .freight-row label {
  font-size: 14px;
  font-weight: 400;
  color: var(--md-sys-color-on-surface);
}

/* 6个算法页：计算/清除按钮统一（深框白/白框深），与计算按钮间距 12px */
.algo-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.algo-btns .btn-calc,
.algo-btns .btn-clear {
  padding: 0 24px;
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
  font-size: 14px;
  min-width: 140px;
}

/* 4 个产品 + 运费算法：输入框高度与按钮统一 */
.board-calc-panel input[type="number"],
.board-calc-panel input[type="text"],
.board-calc-panel select,
.box-panel input[type="number"],
.box-panel input[type="text"],
.box-panel select,
.cabinet-panel input[type="number"],
.cabinet-panel input[type="text"],
.cabinet-panel select,
.ltuz-panel input[type="number"],
.ltuz-panel input[type="text"],
.ltuz-panel select,
.freight-panel input[type="number"],
.freight-panel select {
  height: 40px;
  min-height: 40px;
  border-radius: 10px;
  padding: 0 12px;
  box-sizing: border-box;
  outline: none;
}

/* 数值输入框与计算按钮同一套宽度规则 */
.calc-dim,
.box-panel input[type="number"],
.cabinet-panel input[type="number"],
.ltuz-panel input[type="number"],
.freight-panel input[type="number"] {
  width: 140px;
}

/* ========== 型边工艺 + 涂装工艺 全局统一格式与对齐（板材/盒子/柜子/LTUZ） ========== */
/* 涂装工艺「1面」「2面」列对齐 */
.calc-coating-sides,
.box-coating-sides,
.cabinet-coating-sides,
.ltuz-coating-sides {
  min-width: 5.5em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 4 产品涂装工艺：桌面端统一 3 列网格布局 */
#calc-coating-group,
#box-coating-group,
#cab-coating-group,
#ltuz-coating-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  align-items: start;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.calc-coating-item,
.box-coating-item,
.cabinet-coating-item,
.ltuz-coating-item {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
  font-size: 13px;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}
.calc-coating-item > label,
.box-coating-item > label,
.cabinet-coating-item > label,
.ltuz-coating-item > label {
  margin-right: 0;
  min-width: 0;
}
.calc-row[data-layout-id="row-coating"],
.box-row.box-coating-row,
.cabinet-row.cabinet-coating-row,
.ltuz-row.ltuz-coating-row {
  align-items: flex-start;
}
.calc-row[data-layout-id="row-coating"] .calc-group-label,
.box-row.box-coating-row .box-group-label,
.cabinet-row.cabinet-coating-row .cabinet-group-label,
.ltuz-row.ltuz-coating-row .ltuz-group-label {
  flex-shrink: 0;
}
.calc-row[data-layout-id="row-coating"] #calc-coating-group,
.box-row.box-coating-row #box-coating-group,
.cabinet-row.cabinet-coating-row #cab-coating-group,
.ltuz-row.ltuz-coating-row #ltuz-coating-group {
  flex: 1;
  min-width: 0;
}
/* 型边工艺行：标签与选项统一间距 */
.calc-row .calc-group-label,
.box-row .box-group-label,
.cabinet-row .cabinet-group-label,
.ltuz-row .ltuz-group-label {
  flex-shrink: 0;
}
#calc-main-group, #calc-polish-group, #calc-edge-group,
#box-forming-group, #box-polish-group, #box-edge-group,
#cab-forming-group, #cab-polish-group,
#ltuz-forming-group, #ltuz-polish-group, #ltuz-edge-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

/* ========== 窄屏紧凑排版（仅在小视口生效，不影响桌面定稿） ========== */
/* 平板竖屏 / 手机横屏 */
@media (max-width: 768px) {
  body { padding: 12px 14px !important; font-size: 14px !important; }
  .page-header { margin-bottom: 14px !important; gap: 10px !important; }
  .wrap { max-width: 100% !important; }
  .board-calc-panel, .box-panel, .cabinet-panel, .ltuz-panel {
    padding: 14px 16px !important;
    border-radius: 10px !important;
  }
  .board-calc-panel h4, .box-panel h4, .cabinet-panel h4, .ltuz-panel h4 {
    font-size: 16px !important; margin-bottom: 8px !important;
  }
  .calc-hint, .box-hint, .cabinet-hint, .ltuz-hint, .freight-hint {
    font-size: 13px !important; margin-bottom: 10px !important; line-height: 1.45 !important;
  }
  .calc-row, .box-row, .cabinet-row, .ltuz-row, .freight-row {
    margin-bottom: 8px !important; gap: 8px !important;
  }
  .calc-row label, .box-row label, .cabinet-row label, .ltuz-row label, .freight-row label {
    min-width: 0 !important; font-size: 13px !important;
  }
  .calc-row input[type="number"], .calc-row select,
  .box-row input[type="number"], .box-row select,
  .cabinet-row input[type="number"], .cabinet-row select,
  .ltuz-row input[type="number"], .ltuz-row select,
  .freight-row input[type="number"], .freight-row select {
    padding: 6px 10px !important; font-size: 14px !important;
  }
  .calc-group-label, .box-group-label, .cabinet-group-label, .ltuz-group-label {
    font-size: 13px !important; min-width: 0 !important;
  }
  .calc-result, .box-result, .cabinet-result, .ltuz-result, .freight-result {
    margin-top: 14px !important; padding: 12px 16px !important; font-size: 14px !important;
  }
  .calc-result .total, .box-result .total, .cabinet-result .total, .ltuz-result .total, .freight-result .total {
    font-size: 16px !important; margin-top: 8px !important;
  }
  .board-calc-layout, .box-calc-layout, .cabinet-calc-layout, .ltuz-calc-layout {
    gap: 14px !important;
  }
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-calc-thumb-wrap {
    width: 200px !important; height: 200px !important; min-width: 200px !important;
  }
  .global-header-actions .theme-icon, .global-header-actions .btn-admin-entry, .global-header-actions .btn-home,
  .global-header-actions .btn-user-header, .global-header-actions .btn-logout-arrow, .global-header-actions .btn-create-account.btn-icon-only {
    width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important;
    font-size: 16px !important;
  }
  .algo-header-nav .algo-nav-btn {
    height: 36px !important; min-height: 36px !important;
  }
  .global-header-actions .theme-icon svg, .global-header-actions .btn-admin-entry svg, .global-header-actions .btn-home svg,
  .global-header-actions .btn-create-account .icon svg, .global-header-actions .btn-logout-arrow svg {
    width: 18px !important; height: 18px !important;
  }
  .btn-back-global { padding: 8px 14px !important; font-size: 13px !important; }
  .algo-btns { margin-top: 10px !important; gap: 8px !important; }
  .algo-btns .btn-calc, .algo-btns .btn-clear { padding: 10px 20px !important; font-size: 14px !important; }
  /* 板材页 涂装工艺：窄屏改为网格，每项单独一行不挤在一起 */
  .calc-row:has(#calc-coating-group) { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  #calc-coating-group { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 10px !important; width: 100% !important; }
  .calc-coating-item { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-right: 0 !important; margin-bottom: 0 !important; min-width: 0 !important; }
  .calc-coating-sides { flex-shrink: 0 !important; }
  /* LTUZ/柜子 涂装工艺：窄屏 2 列，与图1图2一致 */
  #calc-coating-group,
  #box-coating-group,
  #cab-coating-group,
  #ltuz-coating-group { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px 10px !important; }
  .calc-row[data-layout-id="row-coating"],
  .box-row.box-coating-row,
  .cabinet-row.cabinet-coating-row,
  .ltuz-row.ltuz-coating-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  #cab-coating-group { width: 100% !important; }
}

/* 手机竖屏 */
@media (max-width: 480px) {
  body { padding: 8px 10px !important; font-size: 13px !important; }
  .page-header { margin-bottom: 10px !important; gap: 8px !important; }
  .board-calc-panel, .box-panel, .cabinet-panel, .ltuz-panel {
    padding: 10px 12px !important; border-radius: 8px !important;
  }
  .board-calc-panel h4, .box-panel h4, .cabinet-panel h4, .ltuz-panel h4 {
    font-size: 15px !important; margin-bottom: 6px !important;
  }
  .calc-hint, .box-hint, .cabinet-hint, .ltuz-hint, .freight-hint {
    font-size: 12px !important; margin-bottom: 8px !important;
  }
  .calc-row, .box-row, .cabinet-row, .ltuz-row, .freight-row {
    margin-bottom: 6px !important; gap: 6px !important;
  }
  .calc-row input[type="number"], .calc-row select,
  .box-row input[type="number"], .box-row select,
  .cabinet-row input[type="number"], .cabinet-row select,
  .ltuz-row input[type="number"], .ltuz-row select,
  .freight-row input[type="number"], .freight-row select {
    padding: 5px 8px !important; font-size: 13px !important;
  }
  .calc-result, .box-result, .cabinet-result, .ltuz-result, .freight-result {
    margin-top: 10px !important; padding: 10px 12px !important; font-size: 13px !important;
  }
  .calc-result .total, .box-result .total, .cabinet-result .total, .ltuz-result .total, .freight-result .total {
    font-size: 15px !important; margin-top: 6px !important;
  }
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-calc-thumb-wrap {
    width: 160px !important; height: 160px !important; min-width: 160px !important;
  }
  .global-header-actions .theme-icon, .global-header-actions .btn-admin-entry, .global-header-actions .btn-home,
  .global-header-actions .btn-user-header, .global-header-actions .btn-logout-arrow, .global-header-actions .btn-create-account.btn-icon-only {
    width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
    font-size: 14px !important;
  }
  .algo-header-nav .algo-nav-btn {
    height: 32px !important; min-height: 32px !important;
    font-size: 13px !important;
  }
  .global-header-actions .theme-icon svg, .global-header-actions .btn-admin-entry svg, .global-header-actions .btn-home svg,
  .global-header-actions .btn-create-account .icon svg, .global-header-actions .btn-logout-arrow svg {
    width: 16px !important; height: 16px !important;
  }
  .btn-back-global { padding: 6px 12px !important; font-size: 12px !important; }
  .algo-btns .btn-calc, .algo-btns .btn-clear { padding: 8px 16px !important; font-size: 13px !important; }
  #box-coating-group, #cab-coating-group { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 8px !important; }
  /* 板材页 涂装工艺：手机竖屏单列，一项一行 */
  #calc-coating-group,
  #ltuz-coating-group,
  #box-coating-group,
  #cab-coating-group { grid-template-columns: 1fr !important; gap: 6px 8px !important; }
  .board-calc-layout, .box-calc-layout, .cabinet-calc-layout, .ltuz-calc-layout { flex-direction: column !important; align-items: stretch !important; }
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-calc-thumb-wrap { margin: 0 auto !important; }
}

/* 5级 手机横屏（矮屏）：缩略图再缩小，避免一屏放不下 */
@media (max-width: 900px) and (max-height: 500px) {
  body { padding: 6px 10px !important; }
  .page-header { margin-bottom: 8px !important; }
  .board-calc-panel, .box-panel, .cabinet-panel, .ltuz-panel { padding: 8px 12px !important; }
  .board-calc-panel h4, .box-panel h4, .cabinet-panel h4, .ltuz-panel h4 { margin-bottom: 4px !important; font-size: 14px !important; }
  .calc-row, .box-row, .cabinet-row, .ltuz-row, .freight-row { margin-bottom: 4px !important; gap: 6px !important; }
  .calc-result, .box-result, .cabinet-result, .ltuz-result, .freight-result { margin-top: 8px !important; padding: 8px 10px !important; font-size: 12px !important; }
  .board-calc-thumb-wrap, .box-calc-thumb-wrap, .cabinet-calc-thumb-wrap, .ltuz-calc-thumb-wrap {
    width: 100px !important; height: 100px !important; min-width: 100px !important;
  }
  .algo-btns .btn-calc, .algo-btns .btn-clear { padding: 6px 12px !important; font-size: 12px !important; }
}

/* 5级 包装算法等占位页 */
@media (max-width: 768px) {
  .placeholder { padding: 24px 16px !important; font-size: 14px !important; }
  .placeholder h2 { font-size: 18px !important; }
}
@media (max-width: 480px) {
  .placeholder { padding: 16px 12px !important; font-size: 13px !important; }
  .placeholder h2 { font-size: 16px !important; }
}