/* ===========================================================================
   WorkOpsPilot · 平静主题（第四版）
   ---------------------------------------------------------------------------
   老板看了实心红/蓝/黄大色块版本后："这些颜色太夸张了，能否按照首页按键的模式？
   所有页面都不要这么夸张，修改成淡蓝色，或者看着让人感觉平静的颜色。"

   这一版整体推翻前三版的"蒙德里安大色块"：
   1. 只有一种主色：柔和的蓝（#4A7BD0），用在按钮、当前页、链接、小节标题的色条上。
      其余全是白 / 极浅的蓝灰（背景 #F3F6FA、边线 #D9E2EC、次要文字 #5B6B7C）。
   2. 语义色全部"淡化"：不再整块红/黄，只用很浅的底色 + 深一点的文字
      （危险 #FDECEC/#B3413D，注意 #FFF4D6/#8A6200，正常 #E6F5EC/#1F7A4D）。
      红=不好、绿=好 这个本能保留，但音量降到最低。
   3. 边线 1px 浅灰、圆角 12px、极轻的阴影——和首页的圆角图标是一家人。不再有 3px 黑框。
   4. 当前页 / 选中项 = 浅蓝底 + 蓝字 + 左侧一条蓝，安静但一眼能看到。
   5. 首页的"手机桌面式图标网格"（第三版）原样保留，老板明确说喜欢这个模式。

   文件名不改（sw.js / index.html / accountant.html / track.html 都链的是这个名字），
   仍然在 styles.css 之后加载、只做覆盖、不改 HTML/JS。
   =========================================================================== */

:root {
  --c-bg: #F3F6FA;
  --c-surface: #FFFFFF;
  --c-surface-2: #F7F9FC;
  --c-line: #D9E2EC;
  --c-line-strong: #B9C7D6;
  --c-text: #1F2A37;
  --c-dim: #5B6B7C;
  --c-blue: #4A7BD0;
  --c-blue-dark: #3E6BB8;
  --c-blue-soft: #E8F0FB;
  --c-blue-tint: #EEF4FC;
  --c-red-soft: #FDECEC;
  --c-red-text: #B3413D;
  --c-amber-soft: #FFF4D6;
  --c-amber-text: #8A6200;
  --c-green-soft: #E6F5EC;
  --c-green-text: #1F7A4D;
  --c-radius: 12px;
  --c-shadow: 0 1px 3px rgba(20, 40, 80, 0.06), 0 4px 14px rgba(20, 40, 80, 0.04);

  /* 把老主题的变量整体切到平静色 */
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface-2: var(--c-surface-2);
  --surface-3: #EEF2F7;
  --border: var(--c-line);
  --border-strong: var(--c-line-strong);
  --text: var(--c-text);
  --text-dim: var(--c-dim);
  --wine: var(--c-blue);
  --wine-dark: var(--c-blue-dark);
  --wine-grad: var(--c-blue);
  --red: var(--c-red-text);
  --red-bg: var(--c-red-soft);
  --orange: var(--c-amber-text);
  --orange-bg: var(--c-amber-soft);
  --green: var(--c-green-text);
  --green-bg: var(--c-green-soft);
  --radius: var(--c-radius);
  --card-bg: var(--c-surface);
  --shadow-card: var(--c-shadow);
  --shadow-card-hover: 0 2px 6px rgba(20, 40, 80, 0.08), 0 8px 22px rgba(20, 40, 80, 0.06);
  --shadow-card-sm: 0 1px 2px rgba(20, 40, 80, 0.06);
  --shadow-inset: none;
  --navy: var(--c-text);
  --navy-dark: var(--c-text);
  --navy-grad: var(--c-text);
  --gold: var(--c-blue);
  --gold-dark: var(--c-blue-dark);
  --gold-bg: var(--c-blue-soft);
  /* 兼容旧版里引用过的 --m-* 变量（第三版首页网格用到 --m-black/--m-white/--m-red） */
  --m-black: var(--c-text);
  --m-white: #FFFFFF;
  --m-red: #D9534F;
  --m-blue: var(--c-blue);
  --m-yellow: var(--c-amber-soft);
  --m-grey: var(--c-line);
  --m-paper: var(--c-bg);
}

/* ---------- 全局基调 ---------- */
body { background: var(--c-bg); color: var(--c-text); font-weight: 500; }
a { color: var(--c-blue); }

/* ---------- 输入框 / 下拉 ---------- */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong) !important;
  color: var(--c-text);
  font-weight: 500;
  padding: 11px 12px;
  border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--c-blue) !important; box-shadow: 0 0 0 3px var(--c-blue-soft) !important; }
input::placeholder, textarea::placeholder { color: #93A3B4; font-weight: 400; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--c-blue); border-radius: 5px; }
label, .field label, .inv-form-field label { font-weight: 600; color: var(--c-text); font-size: 13.5px; }

/* ---------- 按钮 ---------- */
button { font-weight: 600; letter-spacing: 0; }
.btn-primary, .btn-primary-sm, #platform-screen .btn-primary, .btn-small-primary {
  background: var(--c-blue) !important;
  color: #fff !important;
  border: 1px solid var(--c-blue) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.btn-primary { padding: 13px 20px; font-size: 15.5px; }
.btn-primary:hover, .btn-primary-sm:hover, .btn-small-primary:hover { background: var(--c-blue-dark) !important; border-color: var(--c-blue-dark) !important; filter: none !important; }
.btn-primary:disabled { background: #A9BEE3 !important; border-color: #A9BEE3 !important; }
.btn-secondary, .btn-small, .btn-filter-pill, .trend-period-btn, .btn-undo, .toast-action-btn, .wh-stepper button, .wh-category-header, .inv-group-header, .action-bar-btn, .page-back-btn {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.btn-small { padding: 8px 12px; font-size: 13px; }
.btn-secondary:hover, .btn-small:hover, .btn-filter-pill:hover, .action-bar-btn:hover, .page-back-btn:hover { background: var(--c-blue-tint) !important; border-color: var(--c-blue) !important; }
.btn-filter-pill.active, .trend-period-btn.active, .ai-insight-tab-btn.active, .wh-sheet-chips button.active {
  background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; border-color: var(--c-blue) !important;
}
.btn-small-danger, .notif-delete-btn { background: var(--c-surface) !important; color: var(--c-red-text) !important; border-color: #EBC2C0 !important; }
.btn-small-danger:hover { background: var(--c-red-soft) !important; }
.btn-undo { color: var(--c-blue) !important; font-size: 12.5px; }

/* ---------- 顶栏 ---------- */
.topbar, #platform-screen .topbar {
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-line) !important;
  box-shadow: none !important;
  padding: 12px 24px;
}
.topbar .brand-inline h2, #platform-screen .topbar .brand-inline h2 { color: var(--c-text) !important; font-weight: 800; letter-spacing: -0.3px; }
.topbar .brand-inline h2::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--c-blue); border-radius: 4px; margin-right: 8px; vertical-align: -1px; }
.topbar .brand-inline span, #platform-screen .topbar .brand-inline span { color: var(--c-dim) !important; font-weight: 500; }
.topbar-right select, .topbar-right .btn-small, .topbar-right .pill, #platform-screen .topbar-right select, #platform-screen .topbar-right .pill {
  background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-line-strong) !important; border-radius: 10px !important;
}
.pill { font-weight: 600; }

/* ---------- 侧边栏：白底一列，当前页浅蓝底 + 左侧蓝条 ---------- */
.sidebar { gap: 4px !important; padding: 18px 12px; background: transparent !important; border: 0 !important; }
.sidebar::after { display: none !important; }
.nav-item {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-text) !important;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 14px;
  border-radius: 10px !important;
  position: relative;
  box-shadow: none !important;
}
.nav-item::before { background: none !important; }
.nav-item::after { content: none !important; }
.nav-item:hover { background: var(--c-blue-tint) !important; border-color: var(--c-line-strong) !important; filter: none !important; }
.nav-item.active {
  background: var(--c-blue-soft) !important;
  color: var(--c-blue-dark) !important;
  border-color: var(--c-blue) !important;
  outline: none !important;
  font-weight: 700;
  font-size: 15px;
  box-shadow: inset 4px 0 0 var(--c-blue) !important;
}
.nav-item[data-icon]::before { content: attr(data-icon); display: inline-block !important; position: static !important; width: auto !important; background: none !important; margin-right: 8px; font-size: 16px; }
#platform-screen .nav-item, #platform-screen .nav-item:nth-child(3n+1) { background: var(--c-surface) !important; color: var(--c-text) !important; }
#platform-screen .nav-item.active { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; }

/* ---------- 小节标题：深字 + 左侧一小段蓝条 ---------- */
.section-title, .section-title-row .section-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
}
.section-title::before { content: ""; display: inline-block; width: 5px; height: 20px; background: var(--c-blue); border-radius: 3px; flex-shrink: 0; }
/* 可折叠小节标题（盘点记录 / 最近出入库流水 / 温度记录…）
   老板："前面这个标志太小气、不够明显，能否改成流行的、稍微醒目的、带链接感的？"
   → 整行变成一张可点的浅色卡片：左边一个蓝底白色的圆角方块里放 › 箭头（展开时转 90°），
     右边写"展开 / 收起"，鼠标放上去整行泛蓝、箭头块加深。看起来就是"能点开"的东西。 */
.section-title.collapse-header {
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin: 14px 0 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  box-shadow: var(--c-shadow);
  color: var(--c-blue-dark);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.section-title.collapse-header::before {
  content: "\203A"; /* › */
  width: 30px; height: 30px;
  background: var(--c-blue);
  color: #fff;
  border-radius: 9px;
  font-size: 22px; font-weight: 800; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding-bottom: 2px;
  transform: rotate(90deg);
  transition: transform .18s ease, background .15s ease;
  flex-shrink: 0;
}
.section-title.collapse-header.collapsed::before { transform: rotate(0deg); }
.section-title.collapse-header:hover { background: var(--c-blue-tint); border-color: var(--c-blue); color: var(--c-blue-dark); }
.section-title.collapse-header:hover::before { background: var(--c-blue-dark); }
.section-title.collapse-header:active { background: var(--c-blue-soft); }
/* 右侧原来的小箭头换成一句"展开 / 收起"文字提示（靠 CSS 内容，不改 HTML） */
.section-title.collapse-header .collapse-arrow { margin-left: auto; font-size: 0; color: var(--c-blue); transform: none !important; }
.section-title.collapse-header .collapse-arrow::after { content: attr(data-open-label); font-size: 13px; font-weight: 600; white-space: nowrap; }
.section-title.collapse-header.collapsed .collapse-arrow::after { content: attr(data-closed-label); }
.section-title.collapse-header .badge { margin-left: 4px; }
.collapse-header:hover { color: var(--c-blue-dark); }

/* ---------- 卡片：白底、浅边、圆角、轻阴影 ---------- */
.card, .trend-chart-card, .table-scroll, .form-inline, .ai-report, .assistant-messages, .wh-card, .landing-card, .login-card, .clock-card,
.stk-session, .inv-silent-box, .billing-invoice-row, .notif-dropdown, .app-modal, .legal-modal, .inv-item-modal, .wh-sheet, .ledger-filters, .inv-manage-modal, .onboarding-checklist {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: var(--c-shadow) !important;
  color: var(--c-text) !important;
}
.cards { gap: 12px; }
.cards .card { position: relative; padding: 20px 20px 18px; min-height: 0; border-top: 4px solid var(--c-blue) !important; }
.cards .card:nth-child(3n+1), .cards .card:nth-child(3n+2), .cards .card:nth-child(3n+3) { background: var(--c-surface) !important; color: var(--c-text) !important; border-top-color: var(--c-blue) !important; }
/* 语义色：只动顶部细条和数字颜色，底色仍是白 */
.cards .card.accent-red.accent-red { background: var(--c-surface) !important; color: var(--c-text) !important; border-top-color: #E07B78 !important; }
.cards .card.accent-orange.accent-orange { background: var(--c-surface) !important; color: var(--c-text) !important; border-top-color: #E8B93C !important; }
.cards .card.accent-green.accent-green { background: var(--c-surface) !important; color: var(--c-text) !important; border-top-color: #5DB884 !important; }
.card .label, .card-label, .cards .card .label, .cards .card .card-label { font-size: 13.5px; font-weight: 600; color: var(--c-dim) !important; text-transform: none; opacity: 1; }
.card .value, .card-value, .cards .card .value, .cards .card .card-value { font-size: 32px; font-weight: 800; letter-spacing: -0.8px; color: var(--c-text) !important; }
.cards .card.accent-green.accent-green .value { color: var(--c-green-text) !important; }
.cards .card.accent-red.accent-red .value { color: var(--c-red-text) !important; }
.cards .card.accent-orange.accent-orange .value { color: var(--c-amber-text) !important; }
.card.clickable:hover, .cards .card.clickable:hover { background: var(--c-blue-tint) !important; filter: none !important; }
@media (min-width: 900px) { .cards > .card:first-child { grid-column: auto; } }

/* ---------- 表格 ---------- */
table { border-collapse: collapse; }
th { background: var(--c-surface-2) !important; color: var(--c-dim) !important; font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--c-line) !important; }
td { border-bottom: 1px solid var(--c-line) !important; font-weight: 500; }
tr:last-child td { border-bottom: none !important; }
tbody tr:hover td { background: var(--c-blue-tint); }
table.mobile-cards tr { border: 1px solid var(--c-line) !important; background: var(--c-surface); border-radius: 10px; }
table.mobile-cards td { border-bottom: 1px solid var(--c-line) !important; }

/* ---------- 徽章：浅底深字 ---------- */
.badge, .tx-type-badge, .ai-source-badge, .landing-trial-badge, .pill { border: 1px solid transparent !important; font-weight: 600; padding: 3px 9px; border-radius: 999px !important; }
.badge-red, .tx-type-out { background: var(--c-red-soft) !important; color: var(--c-red-text) !important; }
.badge-orange, .tx-type-waste, .tx-type-adjust { background: var(--c-amber-soft) !important; color: var(--c-amber-text) !important; }
.badge-green { background: var(--c-green-soft) !important; color: var(--c-green-text) !important; }
.badge-dim, .tx-type-merge { background: var(--c-surface-2) !important; color: var(--c-dim) !important; }
.tx-type-in { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; }
.tx-delta-pos { color: var(--c-blue-dark); }
.tx-delta-neg { color: var(--c-red-text); }
tr.ledger-row td { background: var(--c-surface); }
tr.ledger-row td:first-child { border-left: 4px solid var(--c-line) !important; }
tr.ledger-row.tx-type-in td:first-child { border-left-color: var(--c-blue) !important; }
tr.ledger-row.tx-type-out td:first-child { border-left-color: #E07B78 !important; }
tr.ledger-row.tx-type-waste td:first-child, tr.ledger-row.tx-type-adjust td:first-child { border-left-color: #E8B93C !important; }

/* ---------- 库存卡片：左侧细色条 = 状态 ---------- */
.inv-item-card { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-left: 5px solid var(--c-blue) !important; border-radius: var(--c-radius) !important; box-shadow: var(--c-shadow) !important; }
.inv-item-card.is-low { border-left-color: #E07B78 !important; }
.inv-item-card.is-expiring { border-left-color: #E8B93C !important; }
.inv-item-name { font-weight: 700; font-size: 16px; }
.inv-item-qty-value { font-weight: 800; font-size: 24px; }
.inv-group-header { font-weight: 700 !important; font-size: 15px; margin-top: 10px; }
.inv-group-header::before { content: ""; display: inline-block; width: 5px; height: 14px; background: var(--c-blue); border-radius: 3px; margin-right: 8px; }
.inv-alert-row, .inv-dup-row { border: 1px solid var(--c-line); background: var(--c-surface); border-radius: 10px; }
#inv-duplicates-box, .inv-silent-box { border-left: 5px solid #E8B93C !important; }
.inv-item-cover.is-low { color: var(--c-red-text); }

/* ---------- 员工端：打卡 ---------- */
.clock-card { padding: 26px 22px; border-top: 4px solid var(--c-blue) !important; }
.clock-buttons { gap: 10px; }
.clock-buttons button { padding: 20px 16px !important; font-size: 18px !important; font-weight: 700; border-radius: 12px !important; }
.btn-in { background: var(--c-blue) !important; color: #fff !important; border: 1px solid var(--c-blue) !important; }
.btn-out { background: var(--c-surface) !important; color: var(--c-text) !important; border: 1px solid var(--c-line-strong) !important; }
.btn-out:hover { background: var(--c-blue-tint) !important; }
.clock-status.ok { color: var(--c-green-text); font-weight: 700; }
.clock-status.fail { color: var(--c-red-text); font-weight: 700; }
.wh-row, .wh-category-header, .wh-recall-item, .tx-row, .stk-line, .wh-stk-row { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: 10px !important; margin-bottom: 6px; }
.wh-row-info { font-weight: 600; font-size: 14.5px; }
.wh-stepper button.wh-minus { color: var(--c-red-text) !important; }
.wh-stepper button.wh-plus { color: var(--c-blue-dark) !important; }
.wh-stepper button:hover { background: var(--c-blue-tint) !important; }
.wh-sheet-take, #wh-sheet-take-btn { background: var(--c-blue) !important; color: #fff !important; border: 1px solid var(--c-blue) !important; font-size: 17px; border-radius: 12px !important; }
.wh-sheet-return, #wh-sheet-return-btn { background: var(--c-surface) !important; color: var(--c-blue-dark) !important; border: 1px solid var(--c-blue) !important; font-size: 17px; border-radius: 12px !important; }
.wh-board { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-left: 5px solid var(--c-blue) !important; border-radius: var(--c-radius) !important; }
.wh-stocktake { border: 1px solid var(--c-line) !important; border-left: 5px solid #E8B93C !important; background: var(--c-surface) !important; border-radius: var(--c-radius) !important; }

/* ---------- 首页 / 登录 / 注册 ---------- */
#landing-screen, #login-screen, #company-register-screen, #trial-locked-screen, .clock-screen { background: var(--c-bg); }
.landing-header h1, .brand h1 { font-size: 38px; font-weight: 800; letter-spacing: -1.2px; color: var(--c-text); position: relative; display: inline-block; }
.landing-header h1::after, .brand h1::after { content: ""; display: block; height: 5px; width: 64px; margin-top: 10px; background: var(--c-blue); border-radius: 3px; border: 0; }
.landing-header p, .brand p { color: var(--c-dim); font-weight: 500; }
.landing-card { padding: 18px; color: var(--c-text) !important; }
.landing-cards .landing-card:nth-child(1), .landing-cards .landing-card:nth-child(2) { background: var(--c-surface) !important; }
.landing-card-icon { border: 0 !important; border-radius: 14px !important; font-weight: 800; }
.landing-card-icon.employee { background: var(--c-green-soft) !important; color: var(--c-green-text) !important; }
.landing-card-icon.boss { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; }
.landing-card-info h3 { font-weight: 800; font-size: 18px; color: var(--c-text) !important; }
.landing-card-info p { color: var(--c-dim) !important; }
.landing-card .btn-primary-sm { background: var(--c-blue) !important; color: #fff !important; }
.landing-card .btn-small, .landing-card .btn-secondary { background: var(--c-surface) !important; color: var(--c-text) !important; }
.landing-trial-badge { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; }
.landing-video-wrap { border: 1px solid var(--c-line) !important; border-radius: var(--c-radius) !important; overflow: hidden; }
.landing-footer a { color: var(--c-dim); font-weight: 500; }
.login-card { border-top: 4px solid var(--c-blue) !important; padding: 28px 24px; }
#company-register-screen .login-card { border-top-color: var(--c-blue) !important; }
.homepage-announcement-banner { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; border: 1px solid #C9DAF3 !important; border-radius: 10px !important; font-weight: 600; }
.trial-banner { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; border-bottom: 1px solid #C9DAF3 !important; font-weight: 600; }
.trial-banner.urgent { background: var(--c-red-soft) !important; color: var(--c-red-text) !important; border-bottom-color: #EBC2C0 !important; }
.error-box { background: var(--c-red-soft) !important; color: var(--c-red-text) !important; border: 1px solid #EBC2C0 !important; border-radius: 10px !important; font-weight: 600; }

/* ---------- 快速上手清单 ---------- */
.onboarding-checklist-header, .onboarding-checklist h3 { color: var(--c-text) !important; font-weight: 700; }
.onboarding-item { border-bottom: 1px solid var(--c-line) !important; }
.onboarding-item-check { border: 1.5px solid var(--c-line-strong) !important; border-radius: 6px !important; }
.onboarding-item.done .onboarding-item-check, .onboarding-item-check.done { background: var(--c-green-text) !important; border-color: var(--c-green-text) !important; color: #fff !important; }

/* ---------- 弹窗 / 抽屉 ---------- */
.app-modal-overlay, .legal-modal-overlay, .wh-sheet-overlay, #wh-recall-overlay { background: rgba(31, 42, 55, 0.45) !important; backdrop-filter: blur(2px) !important; }
.app-modal { border-top: 4px solid var(--c-blue) !important; }
.legal-modal-header, .inv-item-modal-header, .wh-sheet-head { border-bottom: 1px solid var(--c-line) !important; }
.legal-modal-header h3 { font-weight: 800; }
.app-modal-actions .btn-primary { min-width: 120px; }

/* ---------- 底部操作条 ---------- */
.action-bar { background: rgba(255,255,255,0.96) !important; border-top: 1px solid var(--c-line) !important; backdrop-filter: blur(8px) !important; gap: 8px !important; padding: 8px 10px !important; box-shadow: 0 -2px 10px rgba(20,40,80,0.05) !important; }
.action-bar-btn { padding: 12px 8px; font-size: 14.5px; font-weight: 600; border: 1px solid var(--c-line) !important; border-radius: 10px !important; }
.action-bar-btn.ab-logout, .action-bar-btn[data-action="logout"], .action-bar-logout { background: var(--c-surface) !important; color: var(--c-red-text) !important; border-color: #EBC2C0 !important; }
.action-bar-btn.ab-home, .action-bar-btn[data-action="home"], #action-bar-home { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; border-color: #C9DAF3 !important; }
@media (min-width: 901px) { .action-bar { border: 1px solid var(--c-line) !important; border-radius: 14px !important; } }

/* ---------- 通知 / 提示 / 横幅 ---------- */
.toast { background: var(--c-text) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 600; }
.toast-action-btn { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-surface) !important; }
.notif-row { border-bottom: 1px solid var(--c-line) !important; }
.notif-row.severity-critical, .notif-row[data-severity="critical"] { border-left: 4px solid #E07B78 !important; }
.notif-row.severity-warning, .notif-row[data-severity="warning"] { border-left: 4px solid #E8B93C !important; }
.offline-banner { background: var(--c-amber-soft) !important; color: var(--c-amber-text) !important; border: 1px solid #EEDDAA !important; border-radius: 10px !important; font-weight: 600; }
.ai-report { border-left: 5px solid var(--c-blue) !important; }
.ai-report .headline { font-weight: 700; font-size: 16px; }
.ai-todo-list li { font-weight: 600; }
.assistant-msg.user { background: var(--c-blue) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; }
.assistant-msg.assistant, .assistant-msg.bot { background: var(--c-surface) !important; border: 1px solid var(--c-line) !important; border-radius: 14px !important; }
.chat-launcher { background: var(--c-blue) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; font-weight: 700; box-shadow: var(--c-shadow) !important; }

/* ---------- 发票预览 / 入库规则 提示 ---------- */
.ocr-pack-row.ocr-pack-required { border: 1px dashed #E8B93C !important; background: var(--c-amber-soft) !important; border-radius: 8px; }
tr.ocr-row-blocked td { background: var(--c-red-soft) !important; }
.ocr-price-hint.up { background: var(--c-amber-soft) !important; color: var(--c-amber-text) !important; border: 0; border-radius: 6px; }
.ocr-match-hint.warn { color: var(--c-amber-text); background: var(--c-amber-soft); padding: 4px 6px; border: 0; border-radius: 6px; font-weight: 600; }

/* ---------- 图表 / 统计 ---------- */
.ledger-sum-card { border-top: 4px solid var(--c-blue) !important; }
.menu-rank-bar { background: var(--c-blue) !important; border: 0; border-radius: 4px; }
.skeleton-block { background: var(--c-line) !important; border-radius: 8px; }
.global-loading-bar { background: var(--c-line) !important; height: 3px; }
.global-loading-bar::after, .global-loading-bar span { background: var(--c-blue) !important; }

/* ---------- 平台管理台：同一套平静色 ---------- */
#platform-screen .cards .card, #platform-screen .cards .card:nth-child(3n+1), #platform-screen .cards .card:nth-child(3n+2) { background: var(--c-surface) !important; color: var(--c-text) !important; border-top-color: var(--c-blue) !important; }
#platform-screen .sidebar { background: transparent !important; padding: 18px 12px; }

/* 页面标题行：标题永远不折行（老板："智能库存"四个字被右边三个按钮挤成两行，太难看）。
   桌面端标题在左、按钮在右；手机端标题独占一行，按钮另起一行靠左排。 */
.section-title-row { flex-wrap: wrap; row-gap: 10px; }
.section-title-row .section-title { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 720px) {
  .section-title-row { flex-direction: column; align-items: stretch; }
  .section-title-row .section-title { width: 100%; }
  .section-title-row > :not(.section-title) { align-self: flex-start; }
}

/* ---------- 手机端 ---------- */
@media (max-width: 900px) {
  .sidebar { background: var(--c-surface) !important; border-bottom: 1px solid var(--c-line) !important; padding: 10px 12px; gap: 6px !important; }
  .nav-item { white-space: nowrap; padding: 10px 14px; border-radius: 999px !important; }
  .nav-item.active { box-shadow: none !important; }
}
@media (max-width: 720px) {
  .cards { gap: 10px; }
  .cards .card { padding: 16px 14px; }
  .card .value, .card-value, .cards .card .value { font-size: 28px; }
  .section-title, .section-title-row .section-title { font-size: 17.5px; }
  .btn-primary { font-size: 15.5px; padding: 14px 18px; }
  .landing-header h1, .brand h1 { font-size: 30px; }
}

/* ===========================================================================
   第三版：手机桌面式主屏幕（老板："能否改用这种形式？"——一格格大圆角图标 + 一行字）
   登录后先看到这一页；每个功能一个大图标，红点数字 = 有几件事要处理；底部"⌂ 首页"随时回来。
   第四版整站都改成了平静的圆角风格，这一块原样保留（老板："按照首页按键的模式"）。
   =========================================================================== */
.nav-page[data-page="home"] { padding-top: 6px; }
.home-greeting { font-size: 22px; font-weight: 900; margin: 6px 0 18px; letter-spacing: -0.3px; }
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 22px 12px;
  justify-items: center;
  max-width: 760px;
}
.app-tile {
  background: transparent !important;
  border: 0 !important;
  padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 112px; cursor: pointer; color: var(--m-black);
}
.app-tile-icon {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 22px !important;
  background: var(--tile, #3478F6);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; line-height: 1;
  border: 0 !important;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,0.10), 0 2px 6px rgba(20,40,80,0.10) !important;
}
.app-tile:hover .app-tile-icon { filter: brightness(1.08); }
.app-tile:active .app-tile-icon { transform: scale(0.96) !important; }
.app-tile-label { font-size: 14.5px; font-weight: 800; text-align: center; line-height: 1.25; }
.app-tile-badge {
  position: absolute; top: -10px; right: -10px;
  min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 13px !important;
  background: var(--m-red); color: var(--m-white);
  font-size: 13px; font-weight: 900; line-height: 26px; text-align: center;
  border: 2px solid var(--m-white) !important;
}
/* 侧边栏按钮带同款小图标（桌面端左侧快捷切换用） */
.nav-item[data-icon]::before { content: attr(data-icon); display: inline-block !important; position: static !important; width: auto !important; background: none !important; margin-right: 8px; font-size: 16px; }
.nav-item[data-icon] { padding-left: 14px; }
/* 主屏幕页不需要左侧栏（桌面端也隐藏，避免两套导航同时出现） */
#app-screen.on-home #sidebar-nav { display: none !important; }
#app-screen.on-home .page-back-btn { display: none !important; }
@media (max-width: 720px) {
  .app-grid { grid-template-columns: repeat(4, 1fr); gap: 18px 6px; max-width: none; }
  .app-tile { width: auto; }
  .app-tile-icon { width: 68px; height: 68px; font-size: 34px; border-radius: 18px !important; }
  .app-tile-label { font-size: 12.5px; }
  .home-greeting { font-size: 19px; }
}

/* ===========================================================================
   功能归类（老板："功能横着滑才能找到，归一下类"）
   - 首页图标按 经营 / 库存与菜品 / 员工与排班 / 财务与营销 / 设置 分成几组，每组一个小标题
   - 桌面左侧栏同样分组，组名是浅灰小字
   - 手机端不再显示那条横向滑动的导航条：找功能一律回首页点图标（每页顶部"← 返回首页"、
     底部"⌂ 首页"），不用再左右划着找
   =========================================================================== */
.app-groups { display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.app-group-title { font-size: 13px; font-weight: 700; color: var(--c-dim); letter-spacing: 0.3px; margin: 0 0 10px 4px; text-transform: uppercase; }
.app-group .app-grid { max-width: none; }
.nav-group-label { font-size: 11.5px; font-weight: 700; color: var(--c-dim); letter-spacing: 0.4px; text-transform: uppercase; padding: 12px 8px 4px; }
.nav-group-label:first-child { padding-top: 0; }
@media (max-width: 900px) {
  #sidebar-nav { display: none !important; }
}
@media (max-width: 720px) {
  .app-groups { gap: 16px; }
  .app-group-title { font-size: 12.5px; margin-bottom: 8px; }
}

/* 手机端通知面板（老板："打开通知之后，手机用户看不到通知页面"）：原来面板是挂在"通知"按钮
   下面、右对齐 340px 宽的悬浮框，手机上按钮靠左，面板整个跑到屏幕左边外面去了。
   改成固定在屏幕上、左右各留 8px 的整宽面板，压在所有内容之上。 */
@media (max-width: 720px) {
  .notif-dropdown {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    top: 72px !important;
    width: auto !important; max-width: none !important;
    max-height: calc(100vh - 160px);
    overflow-y: auto !important;
    z-index: 1000 !important;
  }
  .notif-list { max-height: none; }
}

/* ===========================================================================
   第五版：质感 / 浮起（老板："所有板块都要有阴影、有质感、浮起来的效果，像苹果手机主页那样
   高级、有欲望去点击"）+ 手机端所有按钮必须在屏幕内看得见（"展开"被切到屏幕外）
   =========================================================================== */
:root {
  --c-shadow: 0 1px 2px rgba(20, 40, 80, 0.05), 0 6px 18px rgba(20, 40, 80, 0.08), 0 14px 36px rgba(20, 40, 80, 0.06);
  --c-shadow-hover: 0 2px 4px rgba(20, 40, 80, 0.06), 0 12px 28px rgba(20, 40, 80, 0.12), 0 24px 56px rgba(20, 40, 80, 0.08);
  --c-shadow-press: 0 1px 2px rgba(20, 40, 80, 0.08), 0 3px 8px rgba(20, 40, 80, 0.08);
  --c-glass: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%);
  --shadow-card: var(--c-shadow);
  --shadow-card-hover: var(--c-shadow-hover);
}

/* 手机端防横向溢出：任何一块内容都不能把页面撑到屏幕外，否则右侧按钮被切掉看不见 */
@media (max-width: 900px) {
  main { overflow-x: hidden; max-width: 100vw; }
  .nav-page { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
  .section-title.collapse-header, .section-title-row, .card, .cards, .table-scroll { max-width: 100%; box-sizing: border-box; }
  .section-title.collapse-header > span:first-child { flex: 1 1 auto; min-width: 0; }
  .section-title.collapse-header .collapse-arrow { flex-shrink: 0; padding-left: 8px; }
}

/* 卡片：白到极浅蓝的微渐变 + 三层阴影 + 上边缘一道高光，像浮在纸面上 */
.card, .trend-chart-card, .form-inline, .ai-report, .wh-card, .landing-card, .login-card, .clock-card,
.stk-session, .inv-silent-box, .billing-invoice-row, .app-modal, .legal-modal, .inv-item-modal, .wh-sheet, .ledger-filters, .inv-manage-modal, .onboarding-checklist, .inv-item-card, .wh-board, .wh-stocktake, .notif-dropdown {
  background: var(--c-glass) !important;
  box-shadow: var(--c-shadow), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cards .card, .cards .card:nth-child(n) { background: var(--c-glass) !important; }
.card.clickable:hover, .cards .card.clickable:hover, .inv-item-card:hover, .landing-card:hover { transform: translateY(-2px); box-shadow: var(--c-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.9) !important; }
.card.clickable:active, .inv-item-card:active { transform: translateY(0) scale(0.99); box-shadow: var(--c-shadow-press) !important; }

/* 可折叠标题行 = 一张可以按下去的卡片 */
.section-title.collapse-header { background: var(--c-glass); box-shadow: var(--c-shadow), inset 0 1px 0 rgba(255,255,255,0.9); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.section-title.collapse-header:hover { transform: translateY(-1px); box-shadow: var(--c-shadow-hover), inset 0 1px 0 rgba(255,255,255,0.9); }
.section-title.collapse-header:active { transform: scale(0.99); box-shadow: var(--c-shadow-press); }
.section-title.collapse-header::before { box-shadow: 0 3px 8px rgba(74, 123, 208, 0.35), inset 0 -2px 0 rgba(0,0,0,0.12); background: linear-gradient(180deg, #5A8AE0, #4A7BD0); }

/* 按钮：主按钮蓝色渐变 + 彩色投影，按下去会"陷"一点；次按钮白色浮起 */
.btn-primary, .btn-primary-sm, .btn-small-primary, .btn-in, .wh-sheet-take, #wh-sheet-take-btn {
  background: linear-gradient(180deg, #5A8AE0 0%, #4A7BD0 100%) !important;
  box-shadow: 0 4px 12px rgba(74, 123, 208, 0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-primary:hover, .btn-primary-sm:hover, .btn-small-primary:hover, .btn-in:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(74, 123, 208, 0.42), inset 0 1px 0 rgba(255,255,255,0.25) !important; }
.btn-primary:active, .btn-primary-sm:active, .btn-small-primary:active, .btn-in:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 6px rgba(74, 123, 208, 0.3) !important; }
.btn-secondary, .btn-small, .btn-filter-pill, .trend-period-btn, .btn-undo, .wh-stepper button, .wh-category-header, .inv-group-header, .action-bar-btn, .page-back-btn, .btn-out, .wh-sheet-return, #wh-sheet-return-btn {
  background: var(--c-glass) !important;
  box-shadow: 0 1px 2px rgba(20,40,80,0.06), 0 3px 8px rgba(20,40,80,0.08) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-secondary:hover, .btn-small:hover, .btn-filter-pill:hover, .action-bar-btn:hover, .page-back-btn:hover, .btn-out:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(20,40,80,0.08), 0 6px 14px rgba(20,40,80,0.12) !important; }
.btn-secondary:active, .btn-small:active, .btn-filter-pill:active, .action-bar-btn:active, .page-back-btn:active { transform: scale(0.97); box-shadow: 0 1px 3px rgba(20,40,80,0.1) !important; }
.btn-filter-pill.active, .trend-period-btn.active, .ai-insight-tab-btn.active, .wh-sheet-chips button.active { background: var(--c-blue-soft) !important; box-shadow: inset 0 1px 3px rgba(20,40,80,0.10) !important; }

/* 左侧栏按钮 & 顶栏 */
.nav-item { background: var(--c-glass) !important; box-shadow: 0 1px 2px rgba(20,40,80,0.05), 0 3px 8px rgba(20,40,80,0.06) !important; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.nav-item:hover { transform: translateX(2px); box-shadow: 0 2px 4px rgba(20,40,80,0.06), 0 6px 14px rgba(20,40,80,0.10) !important; }
.nav-item.active { box-shadow: inset 4px 0 0 var(--c-blue), 0 2px 6px rgba(74,123,208,0.18) !important; }
.topbar, #platform-screen .topbar { box-shadow: 0 1px 0 var(--c-line), 0 4px 16px rgba(20,40,80,0.05) !important; }
.action-bar { box-shadow: 0 -4px 20px rgba(20,40,80,0.08) !important; }

/* 首页大图标：更立体——顶部高光、底部暗边、彩色投影；按下去缩一点 */
.app-tile-icon {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile) 82%, white) 0%, var(--tile) 55%, color-mix(in srgb, var(--tile) 85%, black) 100%) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tile) 45%, transparent), 0 2px 4px rgba(20,40,80,0.12), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.12) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.app-tile:hover .app-tile-icon { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px color-mix(in srgb, var(--tile) 50%, transparent), 0 3px 6px rgba(20,40,80,0.14), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -3px 0 rgba(0,0,0,0.12) !important; filter: none; }
.app-tile:active .app-tile-icon { transform: scale(0.94) !important; box-shadow: 0 3px 8px color-mix(in srgb, var(--tile) 40%, transparent), inset 0 -2px 0 rgba(0,0,0,0.12) !important; }
.app-tile-badge { box-shadow: 0 2px 6px rgba(217,83,79,0.45) !important; }

/* 输入框：微微内凹，聚焦时浮起一圈蓝光 */
input:not([type="checkbox"]):not([type="radio"]), select, textarea { box-shadow: inset 0 1px 2px rgba(20,40,80,0.06) !important; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 1px 2px rgba(20,40,80,0.04), 0 0 0 3px var(--c-blue-soft), 0 4px 12px rgba(74,123,208,0.15) !important; }

/* 首页图标：固定每行 4 个、格子等宽、图标居中（老板："排列整齐，每行 4 个"） */
.app-groups { max-width: 560px; }
.app-group .app-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 20px 8px; justify-items: center; max-width: none; }
.app-tile { width: 100%; }
.app-tile-label { max-width: 100%; padding: 0 2px; }

/* 扫码进来的那一张商品卡片：蓝光呼吸 6 秒，一眼看到"就是这个" */
@keyframes qrFocusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,123,208,0.0), var(--c-shadow); } 50% { box-shadow: 0 0 0 6px rgba(74,123,208,0.25), var(--c-shadow-hover); } }
.inv-item-card.qr-focus { animation: qrFocusPulse 1.2s ease-in-out 5; border-color: var(--c-blue) !important; }

/* 首页：单张连续网格，每行 4 个，不分组（手机上 11 个图标 = 3 行，一屏看完） */
.app-groups { max-width: 560px; }
.app-groups > .app-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px 8px; justify-items: center; max-width: none; }
.home-greeting { margin-bottom: 14px; }
@media (max-width: 720px) {
  .app-groups > .app-grid { gap: 16px 4px; }
  .app-tile-icon { width: 64px; height: 64px; font-size: 32px; border-radius: 17px !important; }
  .app-tile-label { font-size: 12px; line-height: 1.2; }
  .nav-page[data-page="home"] { padding-top: 2px; }
  .home-greeting { font-size: 17px; margin: 2px 0 12px; }
}

/* 手机端：整页禁止横向溢出（顶栏右侧"老板 Joseph · company_admin"太长把页面撑宽，
   固定在底部的操作条跟着跑出屏幕——老板："返回/首页/退出要拉才看得见"） */
html, body { max-width: 100vw; overflow-x: hidden; }
.topbar { min-width: 0; }
.topbar-right { min-width: 0; }
.topbar-right .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .topbar-right .pill { max-width: 60vw; }
  body.has-action-bar #app-screen main { padding-bottom: 104px; }
}
/* 通知中心：右上角"✕ 关闭"永远可见；手机上头部按钮换行排、面板不超过屏幕 */
.notif-dropdown-header { position: sticky; top: 0; background: var(--c-surface); z-index: 2; flex-wrap: wrap; gap: 8px; }
.notif-close-btn { color: var(--c-red-text) !important; border-color: #EBC2C0 !important; font-weight: 700; }
@media (max-width: 720px) {
  .notif-dropdown-actions { flex-wrap: wrap; }
  .notif-dropdown { top: 8px !important; max-height: calc(100vh - 120px); }
}

/* ===========================================================================
   第六版：老板指定的正式配色
   主色 深海军蓝 #243B5A · 强调 柔和橙 #E99A55（重要操作 / 库存提醒）· 背景 暖灰白 #F6F7F5
   功能卡片 白 / 极浅蓝灰，用小图标或细色条区分模块 · 文字 深灰 #25313F
   弹窗：白色圆角面板、轻阴影、深色标题；主按钮海军蓝、取消浅灰。
   首页图标：不再一格一色的亮色大块，统一白卡 + 底部一条细色条，视觉安静。
   =========================================================================== */
:root {
  --c-bg: #F6F7F5;
  --c-surface: #FFFFFF;
  --c-surface-2: #F1F3F6;
  --c-line: #E1E5EA;
  --c-line-strong: #C5CCD5;
  --c-text: #25313F;
  --c-dim: #62707F;
  --c-blue: #243B5A;
  --c-blue-dark: #1A2C45;
  --c-blue-soft: #E6EBF2;
  --c-blue-tint: #F0F3F7;
  --c-orange: #E99A55;
  --c-orange-dark: #D4863F;
  --c-orange-soft: #FBEFE2;
  --c-orange-text: #9A5A1E;
  --c-red-soft: #FBE9E7;
  --c-red-text: #A9433A;
  --c-amber-soft: var(--c-orange-soft);
  --c-amber-text: var(--c-orange-text);
  --c-green-soft: #E5F3EA;
  --c-green-text: #23774A;
  --c-glass: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  --c-shadow: 0 1px 2px rgba(37, 49, 63, 0.05), 0 6px 16px rgba(37, 49, 63, 0.07);
  --c-shadow-hover: 0 2px 4px rgba(37, 49, 63, 0.06), 0 12px 26px rgba(37, 49, 63, 0.10);
  --bg: var(--c-bg); --surface: var(--c-surface); --surface-2: var(--c-surface-2); --border: var(--c-line);
  --text: var(--c-text); --text-dim: var(--c-dim);
  --wine: var(--c-blue); --wine-dark: var(--c-blue-dark); --wine-grad: var(--c-blue);
  --red: var(--c-red-text); --red-bg: var(--c-red-soft); --orange: var(--c-orange-text); --orange-bg: var(--c-orange-soft);
  --green: var(--c-green-text); --green-bg: var(--c-green-soft);
  --gold: var(--c-orange); --gold-dark: var(--c-orange-dark); --gold-bg: var(--c-orange-soft);
  --m-red: var(--c-orange);
}
body { background: var(--c-bg); color: var(--c-text); }
a { color: var(--c-blue); }

/* 主按钮：海军蓝 */
.btn-primary, .btn-primary-sm, .btn-small-primary, .btn-in, .wh-sheet-take, #wh-sheet-take-btn, #platform-screen .btn-primary {
  background: linear-gradient(180deg, #2C4869 0%, #243B5A 100%) !important;
  border-color: #243B5A !important;
  box-shadow: 0 4px 12px rgba(36, 59, 90, 0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
.btn-primary:hover, .btn-primary-sm:hover, .btn-small-primary:hover, .btn-in:hover { box-shadow: 0 6px 16px rgba(36, 59, 90, 0.34), inset 0 1px 0 rgba(255,255,255,0.12) !important; }
.btn-primary:active, .btn-primary-sm:active, .btn-small-primary:active, .btn-in:active { box-shadow: 0 2px 6px rgba(36, 59, 90, 0.25) !important; }
.btn-primary:disabled { background: #A7B2C2 !important; border-color: #A7B2C2 !important; box-shadow: none !important; }
/* 重要操作：橙色（出库确认、扫码出库、下单等已带 .btn-accent 的，以及员工端"拿走"） */
.btn-accent, .wh-sheet-take, #wh-sheet-take-btn {
  background: linear-gradient(180deg, #EFA96A 0%, #E99A55 100%) !important;
  border-color: #E99A55 !important; color: #fff !important;
  box-shadow: 0 4px 12px rgba(233, 154, 85, 0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
/* 取消 / 次按钮：浅灰 */
.btn-secondary, #app-modal-cancel-btn { background: #EEF1F4 !important; color: var(--c-text) !important; border-color: #EEF1F4 !important; box-shadow: none !important; }
.btn-secondary:hover, #app-modal-cancel-btn:hover { background: #E3E8EE !important; }
.btn-filter-pill.active, .trend-period-btn.active, .ai-insight-tab-btn.active, .wh-sheet-chips button.active { background: var(--c-blue) !important; color: #fff !important; border-color: var(--c-blue) !important; box-shadow: none !important; }
input:focus, select:focus, textarea:focus { border-color: var(--c-blue) !important; box-shadow: inset 0 1px 2px rgba(37,49,63,0.04), 0 0 0 3px rgba(36,59,90,0.14) !important; }
input[type="checkbox"] { accent-color: var(--c-blue); }

/* 顶栏 / 侧栏 / 小节标题 */
.topbar .brand-inline h2::before { background: var(--c-blue); }
#platform-screen .topbar .brand-inline h2::before { background: var(--c-orange); }
.nav-item.active { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; border-color: var(--c-blue) !important; box-shadow: inset 4px 0 0 var(--c-blue), 0 2px 6px rgba(36,59,90,0.12) !important; }
.section-title::before { background: var(--c-blue); }
.section-title.collapse-header { color: var(--c-text); }
.section-title.collapse-header::before { background: linear-gradient(180deg, #2C4869, #243B5A); box-shadow: 0 3px 8px rgba(36,59,90,0.30), inset 0 -2px 0 rgba(0,0,0,0.12); }
.section-title.collapse-header:hover { border-color: var(--c-blue); }
.section-title.collapse-header .collapse-arrow { color: var(--c-blue); }

/* 卡片：白，顶部细色条区分模块；库存提醒用橙 */
.cards .card, .cards .card:nth-child(n) { border-top-color: var(--c-blue) !important; }
.cards .card.accent-red.accent-red { border-top-color: var(--c-orange) !important; }
.cards .card.accent-red.accent-red .value { color: var(--c-orange-text) !important; }
.cards .card.accent-orange.accent-orange { border-top-color: var(--c-orange) !important; }
.cards .card.accent-green.accent-green { border-top-color: #5DB884 !important; }
.inv-item-card.is-low { border-left-color: var(--c-orange) !important; }
.inv-item-card.is-expiring { border-left-color: var(--c-orange) !important; }
.inv-item-cover.is-low { color: var(--c-orange-text); }
#inv-duplicates-box, .inv-silent-box, .wh-stocktake { border-left-color: var(--c-orange) !important; }
.badge-red, .tx-type-out { background: var(--c-orange-soft) !important; color: var(--c-orange-text) !important; }
.badge-orange { background: var(--c-orange-soft) !important; color: var(--c-orange-text) !important; }
.tx-type-in { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; }
tr.ledger-row.tx-type-out td:first-child { border-left-color: var(--c-orange) !important; }
tr.ledger-row.tx-type-in td:first-child { border-left-color: var(--c-blue) !important; }
.notif-row.severity-critical, .notif-row[data-severity="critical"] { border-left-color: var(--c-orange) !important; }
.trial-banner { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; border-bottom-color: #D5DDE7 !important; }
.trial-banner.urgent { background: var(--c-orange-soft) !important; color: var(--c-orange-text) !important; }
.homepage-announcement-banner { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; border-color: #D5DDE7 !important; }
.ai-report { border-left-color: var(--c-blue) !important; }
.assistant-msg.user { background: var(--c-blue) !important; }
.menu-rank-bar, .global-loading-bar::after, .global-loading-bar span { background: var(--c-blue) !important; }
.landing-card-icon.boss { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; }
.landing-header h1::after, .brand h1::after { background: var(--c-blue); }
.login-card, #company-register-screen .login-card, .clock-card, .ledger-sum-card { border-top-color: var(--c-blue) !important; }

/* 弹窗：白色圆角面板、轻阴影、深色标题 */
.app-modal, .legal-modal, .inv-item-modal, .inv-manage-modal { border-top: 0 !important; border-radius: 16px !important; box-shadow: 0 8px 32px rgba(37,49,63,0.18), 0 2px 6px rgba(37,49,63,0.08) !important; }
.app-modal-message { color: var(--c-text); font-weight: 500; }
.app-modal-message::first-line { font-weight: 800; font-size: 15.5px; }
.legal-modal-header h3, #inv-item-modal-title, #inv-manage-modal-title { color: var(--c-text); font-weight: 800; }
.app-modal-overlay, .legal-modal-overlay, .wh-sheet-overlay, #wh-recall-overlay { background: rgba(37, 49, 63, 0.40) !important; }

/* 底部操作条：首页浅蓝、客服橙字、退出灰 */
.action-bar-btn.ab-home, .action-bar-btn[data-action="home"], #action-bar-home { background: var(--c-blue-soft) !important; color: var(--c-blue) !important; border-color: #D5DDE7 !important; }
#action-bar-support { color: var(--c-orange-text) !important; background: var(--c-orange-soft) !important; border-color: #F2D9BF !important; font-weight: 700; }
.action-bar-btn.ab-logout, .action-bar-btn[data-action="logout"], .action-bar-logout { color: var(--c-dim) !important; background: var(--c-surface) !important; border-color: var(--c-line) !important; }
.chat-launcher { display: none !important; }

/* 首页图标：统一白卡 + 底部细色条（模块色）+ 表情图标；红点改橙 */
.app-tile-icon {
  background: var(--c-glass) !important;
  border: 1px solid var(--c-line) !important;
  box-shadow: var(--c-shadow), inset 0 1px 0 #fff !important;
  overflow: visible; /* 红点在图标外角，不能裁掉 */
}
.app-tile-icon::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 4px; border-radius: 2px; background: var(--tile); opacity: 0.9; }
.app-tile:hover .app-tile-icon { transform: translateY(-3px); box-shadow: var(--c-shadow-hover), inset 0 1px 0 #fff !important; border-color: var(--c-line-strong) !important; }
.app-tile:active .app-tile-icon { transform: scale(0.95) !important; box-shadow: 0 1px 3px rgba(37,49,63,0.10) !important; }
.app-tile-label { color: var(--c-text); font-weight: 700; }
.app-tile-badge { background: var(--c-orange) !important; border-color: #fff !important; box-shadow: 0 2px 6px rgba(233,154,85,0.45) !important; cursor: pointer; }
.home-greeting { color: var(--c-text); }
.inv-item-card.qr-focus { border-color: var(--c-blue) !important; }
@keyframes qrFocusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(36,59,90,0), var(--c-shadow); } 50% { box-shadow: 0 0 0 6px rgba(36,59,90,0.22), var(--c-shadow-hover); } }

/* ===========================================================================
   第七版：首页图标 —— 偏深莫兰迪色铺满卡片、奶油白图标、卡片放大填满屏幕宽度
   （老板："手机首页留白太多、按键太小；用莫兰迪色，颜色铺满卡片但带灰调；图标奶油白；
   页面背景暖白 #F7F6F3；保留柔和阴影"）
   =========================================================================== */
:root { --c-bg: #F7F6F3; --bg: #F7F6F3; }
body { background: #F7F6F3; }
.app-groups { max-width: 640px; }
.app-groups > .app-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 22px 12px; justify-items: stretch; }
.app-tile { width: 100%; gap: 10px; }
.app-tile-icon {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1;
  border-radius: 22px !important;
  border: 0 !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tile) 90%, white) 0%, var(--tile) 60%, color-mix(in srgb, var(--tile) 92%, black) 100%) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--tile) 38%, transparent), 0 2px 4px rgba(37,49,63,0.10), inset 0 1px 0 rgba(255,255,255,0.28) !important;
  font-size: clamp(30px, 6.2vw, 44px);
  overflow: visible;
}
.app-tile-icon::after { display: none; }
/* 表情图标统一成奶油白：去色 → 提亮 → 一点 sepia 变奶油色，保留图形细节（纯剪影会认不出是什么） */
.app-tile-icon > :not(.app-tile-badge), .app-tile-icon { color: #FFF9F2; }
.app-tile-icon { text-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.app-tile-icon-glyph { filter: grayscale(1) brightness(1.45) contrast(1.15) sepia(0.25) brightness(1.15); display: inline-block; line-height: 1; }
.app-tile:hover .app-tile-icon { transform: translateY(-3px); box-shadow: 0 14px 28px color-mix(in srgb, var(--tile) 42%, transparent), 0 3px 6px rgba(37,49,63,0.12), inset 0 1px 0 rgba(255,255,255,0.28) !important; }
.app-tile:active .app-tile-icon { transform: scale(0.95) !important; box-shadow: 0 3px 8px color-mix(in srgb, var(--tile) 35%, transparent) !important; }
.app-tile-label { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.app-tile-badge { top: -8px; right: -8px; background: #D98B5C !important; }
@media (max-width: 720px) {
  .nav-page[data-page="home"] { padding: 4px 2px 0; }
  .app-groups > .app-grid { gap: 18px 10px; }
  .app-tile-icon { border-radius: 20px !important; font-size: 34px; }
  .app-tile-label { font-size: 12.5px; }
  .home-greeting { font-size: 18px; margin: 4px 0 14px; }
}

/* ===========================================================================
   第八版：手机首页行距/列距拉开 · 顶栏/底栏按钮"塑料光泽、圆润"质感 · 登录页与首页同风格
   （老板："空白还是多，行距列距加大，仍然每行 4 个；通知/刷新/退出要有塑料光泽圆润感；
   登录页要和首页匹配"）
   =========================================================================== */
/* 首页网格：更松的间距，把首屏空间用起来 */
.app-groups > .app-grid { gap: 30px 18px; }
.home-greeting { font-size: 24px; margin: 10px 0 24px; }
@media (max-width: 720px) {
  .nav-page[data-page="home"] { padding: 10px 4px 0; }
  .app-groups > .app-grid { gap: 30px 16px; }
  .home-greeting { font-size: 20px; margin: 8px 0 22px; }
  .app-tile { gap: 12px; }
  .app-tile-label { font-size: 13px; }
}

/* "塑料光泽"按钮：胶囊形、顶部高光渐变、细边、下方柔影；按下去光泽收回 */
.topbar-right .btn-small, .topbar-right select, .topbar-right .pill, #platform-screen .topbar-right select, #platform-screen .topbar-right .pill,
.action-bar-btn, .page-back-btn, .btn-small, .btn-secondary, .btn-filter-pill, .trend-period-btn, .wh-stepper button, .leave-status-tab-btn {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 55%, #ECEEF1 100%) !important;
  border: 1px solid #D8DDE3 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(37,49,63,0.04) inset, 0 2px 4px rgba(37,49,63,0.08), 0 6px 14px rgba(37,49,63,0.06) !important;
  color: var(--c-text) !important;
}
.topbar-right .btn-small, .topbar-right .pill { padding: 9px 16px; font-weight: 700; }
.topbar-right select { padding: 9px 36px 9px 16px; font-weight: 700; }
.topbar-right .btn-small:hover, .action-bar-btn:hover, .page-back-btn:hover, .btn-small:hover, .btn-secondary:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 55%, #F0F2F5 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 3px 6px rgba(37,49,63,0.10), 0 8px 18px rgba(37,49,63,0.08) !important;
}
.topbar-right .btn-small:active, .action-bar-btn:active, .page-back-btn:active, .btn-small:active, .btn-secondary:active {
  transform: translateY(0) scale(0.98);
  background: linear-gradient(180deg, #EEF0F3 0%, #F6F7F9 100%) !important;
  box-shadow: inset 0 2px 4px rgba(37,49,63,0.10) !important;
}
/* 主按钮同样圆润 + 顶部高光 */
.btn-primary, .btn-primary-sm, .btn-small-primary, .btn-in, #platform-screen .btn-primary {
  border-radius: 999px !important;
  background: linear-gradient(180deg, #3A577A 0%, #2A4566 45%, #243B5A 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 4px 12px rgba(36,59,90,0.30) !important;
}
.btn-filter-pill.active, .trend-period-btn.active, .leave-status-tab-btn.active, .wh-sheet-chips button.active {
  background: linear-gradient(180deg, #3A577A 0%, #243B5A 100%) !important; color: #fff !important; border-color: #243B5A !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 3px 8px rgba(36,59,90,0.25) !important;
}
/* 底部操作条三个按钮：同款光泽；首页浅蓝、客服暖橙 */
.action-bar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; }
.action-bar-btn { padding: 13px 8px; font-weight: 700; }
#action-bar-home { background: linear-gradient(180deg, #F2F5F9 0%, #E6EBF2 100%) !important; color: var(--c-blue) !important; border-color: #CFD8E3 !important; }
#action-bar-support { background: linear-gradient(180deg, #FDF3E8 0%, #F7E3CC 100%) !important; color: #8A5320 !important; border-color: #E9CFAF !important; }
.notif-badge { background: #D98B5C !important; box-shadow: 0 1px 3px rgba(217,139,92,0.5) !important; }

/* 顶栏本身：暖白 + 底部细线 + 轻影，与首页背景同色系 */
.topbar, #platform-screen .topbar { background: linear-gradient(180deg, #FFFFFF, #FBFAF8) !important; }

/* 登录页 / 首页（未登录）：与老板首页同一套语言 —— 暖白背景、莫兰迪色入口卡、圆润光泽按钮 */
#landing-screen, #login-screen, #company-register-screen, #trial-locked-screen, .clock-screen { background: #F7F6F3; }
.landing-header h1 { font-size: 36px; font-weight: 900; letter-spacing: -1px; color: var(--c-text); }
.landing-header h1::after { background: linear-gradient(90deg, #6685A1, #789B87, #BD946B); width: 84px; height: 5px; }
.landing-header p { color: var(--c-dim); font-size: 15px; }
.landing-cards .landing-card { border: 0 !important; border-radius: 22px !important; padding: 22px 22px !important; color: #FFF9F2 !important; }
.landing-cards .landing-card:nth-child(1) { background: linear-gradient(160deg, #86A996 0%, #789B87 60%, #6E8F7C 100%) !important; box-shadow: 0 10px 24px rgba(120,155,135,0.35), 0 2px 4px rgba(37,49,63,0.08) !important; }
.landing-cards .landing-card:nth-child(2) { background: linear-gradient(160deg, #7593AD 0%, #6685A1 60%, #5C7A96 100%) !important; box-shadow: 0 10px 24px rgba(102,133,161,0.35), 0 2px 4px rgba(37,49,63,0.08) !important; }
.landing-card-info h3, .landing-card-info p { color: #FFF9F2 !important; }
.landing-card-info p { opacity: 0.92; }
.landing-card-icon { background: rgba(255,249,242,0.22) !important; border: 1px solid rgba(255,249,242,0.35) !important; border-radius: 16px !important; color: #FFF9F2 !important; }
.landing-card-icon.employee, .landing-card-icon.boss { background: rgba(255,249,242,0.22) !important; color: #FFF9F2 !important; }
.landing-card .btn-secondary, .landing-card .btn-small { background: linear-gradient(180deg, #FFFFFF, #F1F2F4) !important; color: var(--c-text) !important; border-color: rgba(255,255,255,0.7) !important; }
.landing-card .btn-primary-sm { background: linear-gradient(180deg, #FFFFFF, #F1F2F4) !important; color: var(--c-blue) !important; border-color: rgba(255,255,255,0.7) !important; box-shadow: 0 3px 8px rgba(37,49,63,0.15) !important; font-weight: 800; }
.landing-video-wrap { border: 0 !important; border-radius: 22px !important; box-shadow: var(--c-shadow) !important; }
.login-card { border: 0 !important; border-top: 0 !important; border-radius: 22px !important; padding: 28px 24px 26px !important; box-shadow: 0 12px 32px rgba(37,49,63,0.12), 0 2px 6px rgba(37,49,63,0.06) !important; }
.login-card .brand h1 { font-size: 30px; }
.login-card .brand h1::after { background: linear-gradient(90deg, #6685A1, #789B87, #BD946B); width: 72px; height: 4px; }
.login-card .btn-primary { width: 100%; padding: 14px 20px; font-size: 16px; }
.login-card input:not([type="checkbox"]) { border-radius: 14px !important; padding: 13px 14px; background: #FBFAF8; }
#company-register-screen .login-card { border-top: 0 !important; }
.clock-card { border-top: 0 !important; border-radius: 22px !important; }
.btn-in { border-radius: 18px !important; }
.btn-out { border-radius: 18px !important; background: linear-gradient(180deg, #FFFFFF, #F1F2F4) !important; }

/* 首页网格：无论标签是中文还是英文/荷兰文，四个格子永远等宽铺满整行（老板："中文版按键小、
   右边空一大块，英文/荷兰文版正常"——之前列宽受标签文字影响 + 旧规则里 .app-tile 固定 112px） */
.app-groups, .app-groups > .app-grid { width: 100%; max-width: none !important; box-sizing: border-box; }
.app-groups > .app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; justify-items: stretch !important; }
.app-tile { width: 100% !important; min-width: 0; }
.app-tile-icon { width: 100% !important; }
.app-tile-label { white-space: normal; word-break: keep-all; overflow-wrap: anywhere; max-width: 100%; }
@media (min-width: 721px) { .app-groups { max-width: 640px !important; } }
@media (max-width: 720px) {
  .nav-page[data-page="home"] { padding: 10px 0 0; }
  .app-groups > .app-grid { gap: 28px 14px; }
}

/* ===========================================================================
   第九版：明亮莫兰迪 + 彩色图标（老板："卡片偏灰偏暗、图标全白显得沉闷，寿司失去鲜活感；
   提高亮度、不加灰蒙层、图标恢复彩色并统一尺寸；文字保持深色"）
   =========================================================================== */
.app-tile-icon {
  /* 纯色为主，只在顶部加一点点白色高光，不再往下压暗 */
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile) 88%, white) 0%, var(--tile) 45%, var(--tile) 100%) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--tile) 40%, transparent), 0 1px 3px rgba(37,49,63,0.08), inset 0 1px 0 rgba(255,255,255,0.55) !important;
  text-shadow: none;
}
/* 图标恢复原色；统一尺寸：一律占卡片宽度的 52%，居中 */
.app-tile-icon-glyph {
  filter: none !important;
  font-size: 1em; line-height: 1;
  width: 52%; aspect-ratio: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  /* 一层很淡的奶白圆底，让不同表情图标的"体量"看起来一致，又不遮颜色 */
  background: rgba(255, 252, 247, 0.38);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
.app-tile-icon { font-size: clamp(30px, 6.4vw, 42px); }
@media (max-width: 720px) { .app-tile-icon { font-size: 32px; } }
.app-tile-label { color: #25313F; font-weight: 700; }
.app-tile-badge { background: #E0895A !important; }

/* 未登录首页的语言下拉：不再悬浮在右上角压住标题（老板："别让下拉菜单遮挡 App 名称"）
   —— 改成页面流里的一行，靠右，标题独占下一行；任何屏幕宽度都不会互相遮挡 */
.landing-lang-select {
  position: static !important;
  align-self: flex-end;
  margin: 6px 12px 0 auto;
  max-width: 180px !important;
  padding: 9px 36px 9px 16px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 55%, #ECEEF1 100%) !important;
  border: 1px solid #D8DDE3 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 4px rgba(37,49,63,0.08), 0 6px 14px rgba(37,49,63,0.06) !important;
  font-weight: 700;
}
#landing-screen { padding-top: 8px; }
.landing-header { margin-top: 4px; }
@media (max-width: 720px) {
  .landing-header h1 { font-size: 34px; }
  .landing-lang-select { margin-right: 8px; }
}

/* Safari 修正（老板的中文手机：四个格子缩成"和文字一样宽"，英文/荷兰文因为词长才恰好撑满）：
   Safari 里"竖排 flex 容器 → 里面的 grid"会把 grid 当成 fit-content 来量，1fr 列就跟着内容缩。
   把外层容器改成普通 block、显式 width:100%，grid 列宽再也不受标签长短影响。 */
.app-groups { display: block !important; width: 100% !important; }
.app-groups > .app-grid { display: grid !important; width: 100% !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.app-tile { display: flex; width: 100% !important; min-width: 0; }
.app-tile-icon { width: 100% !important; min-width: 0; }
/* 没有 aspect-ratio 的旧 Safari：用 padding 撑出正方形 */
@supports not (aspect-ratio: 1 / 1) {
  .app-tile-icon { height: 0 !important; padding-bottom: 100% !important; }
  .app-tile-icon > .app-tile-icon-glyph { position: absolute; left: 24%; top: 24%; width: 52% !important; height: 52%; }
}

/* 图标下方文字：不在单词中间硬切（荷兰文 "Gerechtkoste-n" 那种），整词换行、居中、最多两行 */
.app-tile-label { overflow-wrap: normal; word-break: normal; hyphens: manual; text-align: center; line-height: 1.25; }

/* ===========================================================================
   第十版：苹果质感图标 —— 清晰、立体、有光泽（老板："现在模糊浑浊、没质感；要像 iPhone 图标
   那样立体、光泽、明亮、圆润、清晰"）
   做法：① 去掉同色系大范围漫射阴影和半透明奶白圆盘（这两样是"浑浊"的来源）
        ② 底色上浅下深的干净渐变 + 顶部 45% 高度的玻璃高光层（::before）
        ③ 1px 极细深色描边 + 内侧 1px 白色边光 + 紧凑的黑色投影 → 边缘锐利、有厚度
        ④ 表情图标放大到 58%、加一点投影，图标本身"浮"在卡片上
   =========================================================================== */
.app-tile-icon {
  position: relative;
  border-radius: 24% !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tile) 70%, white) 0%, var(--tile) 52%, color-mix(in srgb, var(--tile) 90%, #1F2A37) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.75) inset,
    0 -1px 0 rgba(0,0,0,0.10) inset,
    0 0 0 1px rgba(31,42,55,0.10),
    0 2px 3px rgba(31,42,55,0.14),
    0 8px 16px rgba(31,42,55,0.14) !important;
  overflow: visible;
  isolation: isolate;
}
/* 玻璃高光：上半块柔和的白色反光，边界略清晰，像苹果早期图标的"玻璃感" */
.app-tile-icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.18) 44%, rgba(255,255,255,0.02) 46%, rgba(255,255,255,0.0) 100%);
  z-index: 0;
}
.app-tile-icon::after { display: none !important; }
/* 图标本体：去掉奶白圆盘，放大，加清晰投影 */
.app-tile-icon-glyph {
  position: relative; z-index: 1;
  width: 58% !important; height: 58%;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  filter: drop-shadow(0 2px 2px rgba(31,42,55,0.28)) !important;
  -webkit-font-smoothing: antialiased;
}
.app-tile-icon { font-size: clamp(34px, 7.4vw, 50px); }
@media (max-width: 720px) { .app-tile-icon { font-size: 38px; } }
.app-tile-badge { z-index: 2; background: linear-gradient(180deg, #F0A06A, #E0895A) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 5px rgba(224,137,90,0.5) !important; }
.app-tile:hover .app-tile-icon {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset, 0 -1px 0 rgba(0,0,0,0.10) inset, 0 0 0 1px rgba(31,42,55,0.10), 0 4px 6px rgba(31,42,55,0.16), 0 14px 26px rgba(31,42,55,0.16) !important;
}
.app-tile:active .app-tile-icon {
  transform: scale(0.95) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 0 0 1px rgba(31,42,55,0.12), 0 2px 4px rgba(31,42,55,0.16) !important;
  filter: brightness(0.96);
}
.app-tile-label { font-size: 13.5px; font-weight: 700; color: #25313F; }

/* ===========================================================================
   第十一版：更立体、有厚度、玻璃/金属光泽、更明亮（老板："不要扁平，一定要有立体阴影感、厚度，
   像金属一样靓丽鲜艳夺目"）；荷兰文长词不再挤到隔壁格
   =========================================================================== */
.app-tile-icon {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--tile) 50%, white) 0%,
      color-mix(in srgb, var(--tile) 80%, white) 16%,
      var(--tile) 50%,
      color-mix(in srgb, var(--tile) 86%, #1F2A37) 100%) !important;
  box-shadow:
    /* 内侧：顶部亮边、底部暗边、左亮右暗 → 圆润的体积感 */
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -3px 0 rgba(0,0,0,0.16),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(0,0,0,0.06),
    /* 外侧：细描边 + 底部一条"厚度"色带 + 两层投影 */
    0 0 0 1px rgba(31,42,55,0.12),
    0 5px 0 -1px color-mix(in srgb, var(--tile) 70%, #1F2A37),
    0 7px 4px rgba(31,42,55,0.10),
    0 14px 24px rgba(31,42,55,0.20) !important;
}
/* 玻璃高光：更亮、分界更清楚，再加一点左上角的金属反光 */
.app-tile-icon::before {
  background:
    radial-gradient(120% 60% at 18% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.26) 45%, rgba(255,255,255,0.05) 47%, rgba(255,255,255,0) 100%);
}
.app-tile-icon-glyph { filter: drop-shadow(0 2px 2px rgba(31,42,55,0.30)) saturate(1.08) !important; }
.app-tile:hover .app-tile-icon {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -3px 0 rgba(0,0,0,0.16), inset 1px 0 0 rgba(255,255,255,0.30), inset -1px 0 0 rgba(0,0,0,0.06),
    0 0 0 1px rgba(31,42,55,0.12), 0 6px 0 -1px color-mix(in srgb, var(--tile) 70%, #1F2A37), 0 10px 6px rgba(31,42,55,0.12), 0 20px 32px rgba(31,42,55,0.22) !important;
}
.app-tile:active .app-tile-icon {
  transform: translateY(2px) scale(0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.12),
    0 0 0 1px rgba(31,42,55,0.12), 0 2px 0 -1px color-mix(in srgb, var(--tile) 70%, #1F2A37), 0 3px 6px rgba(31,42,55,0.16) !important;
}
.app-groups > .app-grid { row-gap: 34px; }
/* 标签：长单词允许在必要时断字（hyphens 需要 <html lang>，已由 i18n 设置），不再挤进隔壁格 */
.app-tile-label { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; word-break: normal; padding: 0 2px; }
@media (max-width: 400px) { .app-tile-label { font-size: 12.5px; letter-spacing: -0.1px; } }

/* ===========================================================================
   对比度保险（老板：编辑按钮"字和底一个颜色"）
   第八版把所有 .btn-small 的文字统一成深灰，把更早写的"深底白字 / 红字"覆盖掉了。
   这一段放在文件最末尾、用更高优先级把"深色底 = 白字、危险 = 红字"重新钉死。
   =========================================================================== */
button.btn-primary, button.btn-primary-sm, button.btn-small-primary, .btn-small.btn-small-primary,
button.btn-in, button.btn-accent, .wh-sheet-take, #wh-sheet-take-btn,
.btn-filter-pill.active, .trend-period-btn.active, .ai-insight-tab-btn.active, .leave-status-tab-btn.active, .wh-sheet-chips button.active,
#platform-screen .btn-primary, .landing-card .btn-primary-sm.dark {
  color: #FFFFFF !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}
.landing-card .btn-primary-sm { color: var(--c-blue) !important; text-shadow: none; }   /* 首页入口卡上的白底登录按钮保持蓝字 */
.btn-small.btn-small-danger, button.btn-small-danger, .notif-delete-btn, .btn-small.notif-close-btn {
  color: #A9433A !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF1F0 100%) !important;
  border-color: #E6C3C0 !important;
}
.btn-small.btn-small-danger:hover, button.btn-small-danger:hover { background: #FBE9E7 !important; }
.btn-small.btn-undo { color: var(--c-blue) !important; }
/* 主按钮里的图标/子元素也跟着白 */
.btn-primary *, .btn-primary-sm *, .btn-small-primary *, .btn-in * { color: inherit !important; }
/* 禁用态：浅灰底深灰字，别出现"白字白底" */
.btn-primary:disabled, .btn-small-primary:disabled { color: #F3F5F8 !important; background: #A7B2C2 !important; border-color: #A7B2C2 !important; text-shadow: none; }

/* ===========================================================================
   第十二版：主色由深海军蓝改为与首页图标同系的"雾霾蓝"（老板："深蓝色至少中国人不太喜欢，
   改成淡雅一点、和首页颜色匹配、和白字对比更好的颜色"）
   取首页"今日概览"图标的灰蓝 #6FA0D6 往下压一档做按钮底色，白字仍清晰（对比度 ≈ 4.2:1）。
   =========================================================================== */
:root {
  --c-blue: #4F80BE;        /* 文字/图标/链接用：够深，看得清 */
  --c-blue-dark: #3F6EA6;
  --c-blue-soft: #E5EEF8;
  --c-blue-tint: #EEF4FA;
  --c-primary-top: #7FAADC; /* 按钮渐变：上浅下深，和首页图标一个手法 */
  --c-primary: #5E8FCA;
  --c-primary-bottom: #4F80BE;
  --wine: var(--c-blue); --wine-dark: var(--c-blue-dark); --wine-grad: var(--c-blue);
}
a { color: var(--c-blue-dark); }
/* 主按钮 / 深色底按钮 */
button.btn-primary, button.btn-primary-sm, button.btn-small-primary, .btn-small.btn-small-primary, button.btn-in, #platform-screen .btn-primary,
.btn-filter-pill.active, .trend-period-btn.active, .ai-insight-tab-btin.active, .ai-insight-tab-btn.active, .leave-status-tab-btn.active, .wh-sheet-chips button.active {
  background: linear-gradient(180deg, var(--c-primary-top) 0%, var(--c-primary) 55%, var(--c-primary-bottom) 100%) !important;
  border-color: var(--c-primary-bottom) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 4px 12px rgba(79,128,190,0.32) !important;
  text-shadow: 0 1px 1px rgba(31,42,55,0.18);
}
button.btn-primary:hover, button.btn-primary-sm:hover, button.btn-small-primary:hover, button.btn-in:hover {
  background: linear-gradient(180deg, #8DB5E2 0%, #6A99D1 55%, #5A8AC6 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 6px 16px rgba(79,128,190,0.38) !important;
}
button.btn-primary:active, button.btn-primary-sm:active, button.btn-small-primary:active, button.btn-in:active {
  background: linear-gradient(180deg, #5A8AC6 0%, #4F80BE 100%) !important;
  box-shadow: inset 0 2px 4px rgba(31,42,55,0.18) !important;
}
button.btn-primary:disabled, .btn-small-primary:disabled { background: #B9C8DB !important; border-color: #B9C8DB !important; color: #F5F8FB !important; box-shadow: none !important; }
/* 折叠标题的箭头块、小节标题色条、当前页标记、顶栏 logo 方块 */
.section-title.collapse-header::before { background: linear-gradient(180deg, var(--c-primary-top), var(--c-primary-bottom)); box-shadow: 0 3px 8px rgba(79,128,190,0.35), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.12); }
.section-title.collapse-header .collapse-arrow { color: var(--c-blue-dark); }
.section-title::before, .inv-group-header::before { background: var(--c-primary); }
.topbar .brand-inline h2::before { background: linear-gradient(180deg, var(--c-primary-top), var(--c-primary-bottom)); }
.nav-item.active { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; border-color: var(--c-primary) !important; box-shadow: inset 4px 0 0 var(--c-primary), 0 2px 6px rgba(79,128,190,0.15) !important; }
/* 卡片顶条、库存卡左条、徽章、横幅、聊天气泡、进度条、首页标题下划线 */
.cards .card, .cards .card:nth-child(n) { border-top-color: var(--c-primary) !important; }
.inv-item-card { border-left-color: var(--c-primary) !important; }
.tx-type-in { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; }
tr.ledger-row.tx-type-in td:first-child { border-left-color: var(--c-primary) !important; }
.trial-banner, .homepage-announcement-banner { background: var(--c-blue-soft) !important; color: var(--c-blue-dark) !important; border-color: #CFDCEE !important; }
.ai-report, .wh-board { border-left-color: var(--c-primary) !important; }
.assistant-msg.user { background: linear-gradient(180deg, var(--c-primary-top), var(--c-primary-bottom)) !important; color: #fff !important; }
.menu-rank-bar, .global-loading-bar::after, .global-loading-bar span { background: var(--c-primary) !important; }
.login-card, #company-register-screen .login-card, .clock-card, .ledger-sum-card { border-top-color: var(--c-primary) !important; }
.landing-card .btn-primary-sm { color: var(--c-blue-dark) !important; }
#action-bar-home { color: var(--c-blue-dark) !important; }
.inv-item-card.qr-focus { border-color: var(--c-primary) !important; }
@keyframes qrFocusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(79,128,190,0), var(--c-shadow); } 50% { box-shadow: 0 0 0 6px rgba(79,128,190,0.25), var(--c-shadow-hover); } }
input:focus, select:focus, textarea:focus { border-color: var(--c-primary) !important; box-shadow: inset 0 1px 2px rgba(37,49,63,0.04), 0 0 0 3px rgba(94,143,202,0.22) !important; }
input[type="checkbox"] { accent-color: var(--c-primary); }
.app-modal-actions .btn-primary { min-width: 120px; }

/* ===========================================================================
   第十三版：AI 区块用"淡雅的鼠尾草绿"（老板："黑色/深蓝坚决不接受，淡绿、酒红都可以"）
   AI 洞察 / AI 老板助手 这两块的标签、切换按钮、发送按钮、卡片色条统一为首页"员工档案"
   图标同系的鼠尾草绿，和其它模块的雾霾蓝区分开，一眼知道"这是 AI 的东西"。
   同时把老主题的 --navy / --gold 变量整体改掉：任何还引用它们的地方都不会再出现黑/深蓝。
   =========================================================================== */
:root {
  --navy: #5E8FCA; --navy-dark: #4F80BE; --navy-grad: linear-gradient(180deg, #7FAADC, #4F80BE);
  --gold: #E0B27F; --gold-dark: #C8955A; --gold-bg: #FBF1E4;
  --c-sage-top: #93CBA9; --c-sage: #6FB08D; --c-sage-bottom: #5A9F79; --c-sage-soft: #E5F3EA; --c-sage-text: #23774A;
}
.badge-navy { background: #E5EEF8 !important; color: #3F6EA6 !important; }
/* "✨ AI" 小标签：浅绿底深绿字 */
.ai-powered-chip { background: var(--c-sage-soft) !important; color: var(--c-sage-text) !important; border: 1px solid #CFE6D8; box-shadow: none; }
/* AI 小节标题前的色条 */
.section-title:has(.ai-powered-chip)::before { background: var(--c-sage) !important; }
/* AI 每日经营报告 / AI 利润分析 切换按钮：选中 = 鼠尾草绿渐变白字，未选 = 白底 */
.btn-small.ai-insight-tab-btn.active, .ai-insight-tab-btn.active {
  background: linear-gradient(180deg, var(--c-sage-top) 0%, var(--c-sage) 55%, var(--c-sage-bottom) 100%) !important;
  border-color: var(--c-sage-bottom) !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 4px 12px rgba(111,176,141,0.35) !important;
  text-shadow: 0 1px 1px rgba(31,42,55,0.18);
}
/* AI 助手"发送"按钮 + 日报卡片左侧色条 + 用户气泡 */
button#assistant-send-btn, #assistant-send-btn.btn-primary {
  background: linear-gradient(180deg, var(--c-sage-top) 0%, var(--c-sage) 55%, var(--c-sage-bottom) 100%) !important;
  border-color: var(--c-sage-bottom) !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(0,0,0,0.08) inset, 0 4px 12px rgba(111,176,141,0.35) !important;
}
button#assistant-send-btn:hover { background: linear-gradient(180deg, #A0D4B6 0%, #7ABB98 55%, #64A884 100%) !important; }
.ai-report, .assistant-messages { border-left: 5px solid var(--c-sage) !important; }
.ai-source-badge.is-ai { background: var(--c-sage-soft) !important; color: var(--c-sage-text) !important; }
.assistant-msg.user { background: linear-gradient(180deg, var(--c-sage-top), var(--c-sage-bottom)) !important; color: #fff !important; }
.ai-report .headline { color: var(--c-text); }

/* ===========================================================================
   第十四版：温暖饱满的莫兰迪（老板给的正式色表）
   页面背景 暖米白 #F7F4EF · 标题/分类/主要数字 深橄榄灰 #30372F · 主操作/选中/主要图标 浓橄榄绿 #596B42
   次级按钮/分类标识 莫兰迪棕 #927B68 · 库存不足数字与提示 酒红 #873F4B · 库存金额 深橄榄绿 #426B4D
   卡片 柔和象牙白 #FFFEFB · 字体 苹方：分类名半粗、数字粗、其余中等；正文用深色实字
   =========================================================================== */
:root {
  --c-bg: #F7F4EF; --bg: #F7F4EF;
  --c-surface: #FFFEFB; --surface: #FFFEFB; --card-bg: #FFFEFB;
  --c-surface-2: #F3EFE8; --surface-2: #F3EFE8;
  --c-line: #E4DED5; --border: #E4DED5;
  --c-line-strong: #CFC6BA; --border-strong: #CFC6BA;
  --c-text: #30372F; --text: #30372F;
  --c-dim: #5A6157; --text-dim: #5A6157;           /* 次要文字也够深，手机上看得清 */
  --c-glass: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
  /* 主色：浓橄榄绿 */
  --c-blue: #596B42; --c-blue-dark: #4A5A36; --c-blue-soft: #E9ECDF; --c-blue-tint: #F1F3EA;
  --c-primary-top: #7C8F62; --c-primary: #667A4E; --c-primary-bottom: #596B42;
  --wine: #596B42; --wine-dark: #4A5A36; --wine-grad: linear-gradient(180deg, #7C8F62, #596B42);
  --navy: #667A4E; --navy-dark: #596B42; --navy-grad: linear-gradient(180deg, #7C8F62, #596B42);
  /* 次级：莫兰迪棕 */
  --c-brown: #927B68; --c-brown-dark: #7A6555; --c-brown-soft: #F0E9E1;
  --gold: #927B68; --gold-dark: #7A6555; --gold-bg: #F0E9E1;
  /* 预警：酒红 */
  --c-orange: #873F4B; --c-orange-dark: #6F3340; --c-orange-soft: #F3E3E6; --c-orange-text: #873F4B;
  --c-red-soft: #F3E3E6; --c-red-text: #873F4B; --red: #873F4B; --red-bg: #F3E3E6;
  --orange: #873F4B; --orange-bg: #F3E3E6;
  --c-amber-soft: #F0E9E1; --c-amber-text: #7A6555;
  /* 金额/正常：深橄榄绿 */
  --c-green-text: #426B4D; --c-green-soft: #E6EFE8; --green: #426B4D; --green-bg: #E6EFE8;
  --m-red: #873F4B;
}
body, button, input, select, textarea { font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", Roboto, sans-serif; }
body { background: #F7F4EF; color: #30372F; font-weight: 500; }
a { color: #596B42; }

/* 字重：标题/分类半粗(600-700)，数字粗(800)，标签中等(500) */
.section-title, .section-title-row .section-title, .inv-group-header, .home-greeting, .legal-modal-header h3, .landing-card-info h3, .card .label { color: #30372F; }
.section-title { font-weight: 700; }
.inv-group-header, .inv-item-name, .wh-row-info { font-weight: 600 !important; color: #30372F !important; }
.card .value, .card-value, .cards .card .value, .inv-item-qty-value, .ledger-sum-card .value { font-weight: 800 !important; color: #30372F !important; }
.card .label, .cards .card .label, .inv-item-meta, .inv-item-figure-label, td, .notif-row, .app-tile-label { font-weight: 500; color: #30372F; }
.inv-item-meta, .inv-item-figure-label, .card .label, .cards .card .label { color: #5A6157 !important; }
th { color: #5A6157 !important; background: #F3EFE8 !important; }

/* 主操作：橄榄绿渐变（新增库存商品、编辑、登录、选中筛选、⌂首页…） */
button.btn-primary, button.btn-primary-sm, button.btn-small-primary, .btn-small.btn-small-primary, button.btn-in, #platform-screen .btn-primary,
.btn-filter-pill.active, .trend-period-btn.active, .leave-status-tab-btn.active, .wh-sheet-chips button.active {
  background: linear-gradient(180deg, #7C8F62 0%, #667A4E 55%, #596B42 100%) !important;
  border-color: #596B42 !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 -2px 0 rgba(0,0,0,0.10) inset, 0 4px 12px rgba(89,107,66,0.30) !important;
  text-shadow: 0 1px 1px rgba(31,42,55,0.20);
}
button.btn-primary:hover, button.btn-primary-sm:hover, button.btn-small-primary:hover, button.btn-in:hover { background: linear-gradient(180deg, #889A6E 0%, #71865A 55%, #63754C 100%) !important; }
button.btn-primary:active, button.btn-primary-sm:active, button.btn-small-primary:active, button.btn-in:active { background: linear-gradient(180deg, #596B42 0%, #4A5A36 100%) !important; }
button.btn-primary:disabled, .btn-small-primary:disabled { background: #BFC4B4 !important; border-color: #BFC4B4 !important; color: #F7F7F2 !important; }
/* 次级按钮：象牙白底 + 莫兰迪棕字/边（出库/入库/分类管理/单位管理/导出…） */
.btn-secondary, .btn-small, .btn-filter-pill, .trend-period-btn, .wh-stepper button, .action-bar-btn, .page-back-btn, .btn-out, .leave-status-tab-btn, .topbar-right .btn-small, .topbar-right select, .topbar-right .pill {
  color: #6F5B4A !important; border-color: #D9CFC3 !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F2EC 55%, #EFE9E0 100%) !important;
}
.btn-secondary:hover, .btn-small:hover, .btn-filter-pill:hover, .action-bar-btn:hover, .page-back-btn:hover { background: linear-gradient(180deg, #FFFFFF 0%, #F9F5EF 55%, #F3EDE4 100%) !important; border-color: #927B68 !important; }
/* 选中的筛选按钮被点过之后仍保持绿色（老板："点了今天/近7天，按钮要马上变绿，现在字是白的"）：
   手机上点过的按钮会一直停在 :hover 状态，上面那条 hover 的浅色背景盖掉了选中的绿色，只剩白字。 */
.btn-filter-pill.active:hover, .trend-period-btn.active:hover, .leave-status-tab-btn.active:hover, .wh-sheet-chips button.active:hover {
  background: linear-gradient(180deg, #7C8F62 0%, #667A4E 55%, #596B42 100%) !important;
  border-color: #596B42 !important; color: #fff !important;
}
.btn-small.btn-small-danger, button.btn-small-danger, .notif-delete-btn, .btn-small.notif-close-btn { color: #873F4B !important; border-color: #DEC3C8 !important; background: linear-gradient(180deg, #FFFFFF, #F8EEF0) !important; }
#app-modal-cancel-btn { background: #F0E9E1 !important; color: #6F5B4A !important; border-color: #F0E9E1 !important; }
/* 分类标识（左侧竖条、分组标题前的小条）：莫兰迪棕；小节标题色条：橄榄绿 */
.inv-group-header::before { background: #927B68 !important; }
.section-title::before { background: #596B42 !important; }
.section-title:has(.ai-powered-chip)::before { background: #596B42 !important; }
.section-title.collapse-header::before { background: linear-gradient(180deg, #7C8F62, #596B42) !important; box-shadow: 0 3px 8px rgba(89,107,66,0.35), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -2px 0 rgba(0,0,0,0.12) !important; }
.section-title.collapse-header .collapse-arrow { color: #596B42 !important; }
.section-title.collapse-header { color: #30372F !important; }
.section-title.collapse-header:hover { border-color: #596B42 !important; }
/* 统计卡片：顶部细线低调 —— 默认橄榄绿、金额深橄榄绿、库存不足酒红、注意/其它棕 */
.cards .card, .cards .card:nth-child(n) { border-top: 3px solid #596B42 !important; }
.cards .card.accent-green.accent-green { border-top-color: #426B4D !important; }
.cards .card.accent-green.accent-green .value { color: #426B4D !important; }
.cards .card.accent-red.accent-red { border-top-color: #873F4B !important; }
.cards .card.accent-red.accent-red .value { color: #873F4B !important; }
.cards .card.accent-orange.accent-orange { border-top-color: #927B68 !important; }
.cards .card.accent-orange.accent-orange .value { color: #7A6555 !important; }
/* 库存卡片左侧条：正常橄榄绿、不足酒红、临期棕 */
.inv-item-card { border-left-color: #596B42 !important; }
.inv-item-card.is-low { border-left-color: #873F4B !important; }
.inv-item-card.is-expiring { border-left-color: #927B68 !important; }
.inv-item-cover.is-low { color: #873F4B !important; font-weight: 700; }
/* "8 项库存不足 · 点击查看"提示框：酒红 */
.inv-alerts-toggle { background: #F3E3E6 !important; color: #873F4B !important; border: 1px solid #DEC3C8 !important; font-weight: 600 !important; }
#inv-duplicates-box, .inv-silent-box, .wh-stocktake { border-left-color: #927B68 !important; }
/* 徽章：出库/预警酒红，入库/正常绿，报损/修正棕 */
.badge-red, .tx-type-out, .badge-orange.is-low { background: #F3E3E6 !important; color: #873F4B !important; }
.badge-green, .tx-type-in { background: #E6EFE8 !important; color: #426B4D !important; }
.badge-orange, .tx-type-waste, .tx-type-adjust { background: #F0E9E1 !important; color: #7A6555 !important; }
.badge-dim, .tx-type-merge { background: #F3EFE8 !important; color: #5A6157 !important; }
tr.ledger-row.tx-type-in td:first-child { border-left-color: #426B4D !important; }
tr.ledger-row.tx-type-out td:first-child { border-left-color: #873F4B !important; }
tr.ledger-row.tx-type-waste td:first-child, tr.ledger-row.tx-type-adjust td:first-child { border-left-color: #927B68 !important; }
.notif-row.severity-critical, .notif-row[data-severity="critical"] { border-left-color: #873F4B !important; }
.notif-row.severity-warning, .notif-row[data-severity="warning"] { border-left-color: #927B68 !important; }
.app-tile-badge, .notif-badge { background: linear-gradient(180deg, #9B4E5B, #873F4B) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 2px 5px rgba(135,63,75,0.45) !important; }
/* 当前页、横幅、聚焦、复选框、进度条、气泡、顶栏 logo、底部操作条 */
.nav-item.active { background: #E9ECDF !important; color: #4A5A36 !important; border-color: #596B42 !important; box-shadow: inset 4px 0 0 #596B42, 0 2px 6px rgba(89,107,66,0.15) !important; }
.trial-banner, .homepage-announcement-banner { background: #E9ECDF !important; color: #4A5A36 !important; border-color: #D5DBC6 !important; }
.trial-banner.urgent { background: #F3E3E6 !important; color: #873F4B !important; border-color: #DEC3C8 !important; }
input:focus, select:focus, textarea:focus { border-color: #596B42 !important; box-shadow: inset 0 1px 2px rgba(48,55,47,0.04), 0 0 0 3px rgba(89,107,66,0.20) !important; }
input[type="checkbox"] { accent-color: #596B42; }
.menu-rank-bar, .global-loading-bar::after, .global-loading-bar span { background: #596B42 !important; }
.topbar .brand-inline h2::before { background: linear-gradient(180deg, #7C8F62, #596B42) !important; }
#action-bar-home { background: linear-gradient(180deg, #EEF1E6 0%, #E2E7D6 100%) !important; color: #4A5A36 !important; border-color: #CBD3BA !important; }
#action-bar-support { background: linear-gradient(180deg, #F6EFE7 0%, #EDE3D7 100%) !important; color: #6F5B4A !important; border-color: #D9CFC3 !important; }
.login-card, #company-register-screen .login-card, .clock-card, .ledger-sum-card, .ai-report, .wh-board { border-top-color: #596B42 !important; }
.ai-report, .assistant-messages { border-left-color: #667A4E !important; }
.assistant-msg.user { background: linear-gradient(180deg, #7C8F62, #596B42) !important; }
.ai-powered-chip, .ai-source-badge.is-ai { background: #E9ECDF !important; color: #4A5A36 !important; border-color: #D5DBC6 !important; }
.btn-small.ai-insight-tab-btn.active, .ai-insight-tab-btn.active, button#assistant-send-btn { background: linear-gradient(180deg, #7C8F62 0%, #667A4E 55%, #596B42 100%) !important; border-color: #596B42 !important; box-shadow: 0 4px 12px rgba(89,107,66,0.30) !important; }
.landing-header h1::after, .brand h1::after, .login-card .brand h1::after { background: linear-gradient(90deg, #596B42, #927B68, #873F4B) !important; }
.landing-cards .landing-card:nth-child(1) { background: linear-gradient(160deg, #7C8F62 0%, #667A4E 60%, #596B42 100%) !important; box-shadow: 0 10px 24px rgba(89,107,66,0.30) !important; }
.landing-cards .landing-card:nth-child(2) { background: linear-gradient(160deg, #A48F7B 0%, #927B68 60%, #7A6555 100%) !important; box-shadow: 0 10px 24px rgba(146,123,104,0.30) !important; }
.landing-card .btn-primary-sm { color: #596B42 !important; }
.inv-item-card.qr-focus { border-color: #596B42 !important; }
@keyframes qrFocusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(89,107,66,0), var(--c-shadow); } 50% { box-shadow: 0 0 0 6px rgba(89,107,66,0.25), var(--c-shadow-hover); } }
/* 首页问候 */
.home-greeting { color: #30372F; }
/* 老样式卡片顶部还有一条 ::before 色线，和现在的 border-top 叠在一起会出现双线，关掉 */
.card::before { display: none !important; }

/* ===== 打卡按钮状态（2026-09-28）：在岗时"上班"变灰、"下班"变主色；不在岗反之 ===== */
.clock-buttons .btn-in.clock-btn-done, .clock-buttons .btn-out.clock-btn-done {
  background: #ECE7DF !important; color: #9A9188 !important; border-color: #E2DBD1 !important;
  box-shadow: none !important; transform: none !important; cursor: not-allowed !important; opacity: 0.85;
}
.clock-buttons .btn-out.clock-btn-active {
  background: var(--c-blue, #596B42) !important; color: #fff !important; border-color: var(--c-blue, #596B42) !important;
  box-shadow: 0 4px 12px rgba(89, 107, 66, 0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.clock-buttons .btn-in.clock-btn-active {
  background: var(--c-blue, #596B42) !important; color: #fff !important; border-color: var(--c-blue, #596B42) !important;
}
.clock-shift-hint { margin: 6px 0 2px; font-size: 13px; color: #596B42; font-weight: 600; text-align: center; min-height: 0; }
.clock-shift-hint:empty { display: none; }

/* ===== 配送员在岗监督横幅（2026-09-28） ===== */
.shift-tracking-banner { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.4;
  background: #E7EDDC; color: #3F5230; border: 1px solid #C9D6B5; }
.shift-tracking-banner.paused { background: #F1EDE4; color: #6B6259; border-color: #E2DBD1; }
.shift-tracking-banner.denied { background: #F3DDE0; color: #873F4B; border-color: #E4BFC5; }
.shift-tracking-banner.hidden { display: none !important; }

/* ===== 员工留言板（2026-09-29） ===== */
.staff-msg-compose textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; }
.staff-msg-item { padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: #FFFEFB; border: 1px solid #E2DBD1; }
.staff-msg-item.unread { border-color: #E9AE6E; background: #FFF9F0; }
.staff-msg-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.staff-msg-body { font-size: 14.5px; line-height: 1.45; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.staff-msg-meta { font-size: 12px; color: #927B68; margin-top: 4px; }
.staff-msg-reply { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #E7EDDC; color: #3F5230; font-size: 13.5px; }
.staff-msg-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.staff-msg-actions .staff-msg-reply-input { flex: 1; min-width: 160px; }

/* ===== 发票入库换算行（2026-09-29） ===== */
.ocr-pack-row.ocr-pack-auto { border-style: solid !important; border-color: #C9D6B5 !important; background: #E7EDDC !important; color: #3F5230; font-weight: 600; }
.ocr-skip-row-btn { display: block; margin-top: 8px; width: 100%; }
tr.ocr-row.ocr-row-skipped { opacity: 0.45; }
tr.ocr-row.ocr-row-skipped .ocr-pack-row { border-color: #E2DBD1 !important; background: #F1EDE4 !important; }
tr.ocr-row.ocr-row-skipped .ocr-skip-row-btn { opacity: 1; }

/* ===== 员工首页打卡上班/下班：和功能按钮同一种方块图标；现在不能按的那个变淡 ===== */
#clock-screen .emp-clock-row { margin-top: 18px; }
.clock-tile.clock-btn-done { opacity: 0.4; cursor: not-allowed; }
.clock-tile.clock-btn-done .app-tile-icon { transform: none !important; }

/* 语言选择：小小一个，放在公司名下面居中，像普通 App */
.clock-lang { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 10px 0 2px; font-size: 14px; }
.clock-lang select, #clock-lang-select {
  width: auto !important; max-width: 118px; margin: 0 !important; padding: 5px 22px 5px 8px !important; font-size: 13px !important;
  border-radius: 999px !important; min-height: 0 !important; height: auto !important; background-position: right 6px center !important;
}

/* 打卡图标：小人 + 角落里的目的地（上班=店，下班=家）；上班的小人转身朝右走向店 */
.clock-tile .app-tile-icon { position: relative; }
.clock-walker-in { transform: scaleX(-1); }
.clock-tile-dest { position: absolute; z-index: 2; right: 9%; bottom: 9%; font-size: 0.5em; line-height: 1; filter: drop-shadow(0 1px 1px rgba(31,42,55,0.3)); }
.clock-tile-dest-left { right: auto; left: 9%; }

/* ===== 老板端字体放大一点 + 页面大标题前加图标（2026-10 老板："管理端也是如此"：醒目、字大一些、不要太夸张） ===== */
#app-screen main { font-size: 15.5px; }
#app-screen main .section-title { font-size: 20px; }
#app-screen main .section-title.page-main-title { font-size: 23px; }
#app-screen main .section-title[data-icon]::after { content: attr(data-icon); order: -1; font-size: 0.95em; line-height: 1; }
#app-screen main .section-title[data-icon]::before { order: -2; }
#app-screen main th { font-size: 14px; }
#app-screen main td { font-size: 15px; }
#app-screen main input:not([type="checkbox"]):not([type="radio"]), #app-screen main select, #app-screen main textarea { font-size: 16px; }
#app-screen main .btn-small { font-size: 14.5px; }
#app-screen main .btn-primary, #app-screen main .btn-secondary { font-size: 16px; }
#app-screen main .field label { font-size: 14px; }