/* ============================================================================
 * 中泰祥升（广东）建设有限公司 · 工程项目管理系统 —— 样式表
 * 2026-09-19 视觉换代：蓝色扁平风 → 「祥升工程云」青蓝深侧栏风
 * ----------------------------------------------------------------------------
 * 🔴 兼容铁律（改动此文件前必读）
 *   1. app.js 有 200+ 处内联样式引用 var(--xxx)，**变量名一个都不能删改，只能改取值**。
 *      必须存在的变量：--primary --primary-dark --bg --bg2 --card --text --text2
 *      --line --border --red --green --warn --blue --orange --radius --shadow
 *   2. 类名同样不能改名（app.js 用它们生成 DOM）：本文件覆盖了旧版全部 119 个类名，
 *      并补齐了旧版遗漏、但 app.js 实际在用的类（.btn-outline/.stat-chip 等）。
 *   3. 🔴 颜色语义按中国习惯，**不要对调**：
 *      --red   = 收入 / 盈利 / 上涨（红涨）
 *      --green = 支出 / 欠付 / 下跌（绿跌）
 *      参考界面里 --success 是绿、--danger 是红，与本系统语义**相反**，切勿照搬。
 * ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  /* ---------- 品牌与设计语言（新增，取值来自「祥升工程云」参考界面） ---------- */
  --primary: #176b87;            /* 主色：青蓝（原 #1f5eff 蓝） */
  --primary-dark: #0d455a;
  --primary-soft: #e8f2f5;
  --accent: #f4a261;             /* 点缀橙（现金流口径色） */
  --sidebar: #102f3d;            /* 深色侧栏 */
  --sidebar-soft: #173d4e;
  --ink: #102a35;
  --ink-soft: #324f5b;
  --muted: #6a7e87;
  --surface-soft: #f8fafb;
  --line-soft: #edf2f3;
  --line-strong: #c7d5da;
  --success: #2a9d8f;
  --danger: #d95d70;
  --purple: #7568d8;
  --cyan: #2b93b6;
  --blue: #176b87;
  --orange: #f4a261;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(17, 48, 61, .05);
  --shadow-md: 0 12px 30px rgba(17, 48, 61, .09);
  --shadow-lg: 0 28px 60px rgba(6, 34, 45, .18);
  --sidebar-width: 240px;
  --topbar-height: 68px;

  /* ---------- 兼容变量（名称固定，仅取值换代） ---------- */
  --bg: #f3f6f7;
  --bg2: #f8fafb;                /* 内联样式兜底 #f4f6f8，这里统一为更浅的灰白 */
  --card: #ffffff;
  --text: #102a35;
  --text2: #6a7e87;
  --line: #dce7ea;
  --border: #dce7ea;
  --red: #d4380d;                /* 🔴 收入/盈利（红涨）—— 中国习惯，勿动 */
  --green: #0a8754;              /* 🟢 支出/欠付（绿跌）—— 中国习惯，勿动 */
  --warn: #d48806;
  --warn-soft: #fff7e6;
  --radius: 16px;
  --shadow: 0 2px 8px rgba(17, 48, 61, .05), 0 12px 30px rgba(17, 48, 61, .07);
}

html { font-size: 15px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5;
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, p { margin: 0; }

input, select, textarea {
  font-family: inherit; font-size: 1rem; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--text); outline: none; transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(23, 107, 135, .08);
}
input[readonly], input:disabled, select:disabled { background: #f3f6f7; color: var(--text2); }
label { display: block; font-size: .86rem; color: var(--ink-soft); margin: 10px 0 5px; font-weight: 600; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primary); }
.muted { color: var(--text2); font-size: .8rem; }
.nowrap { white-space: nowrap; }

/* ============================================================================
 * 一、登录页（左右分栏品牌页）
 * ========================================================================== */
.login-page {
  min-height: 100vh; display: grid;
  grid-template-columns: minmax(400px, 1.05fr) minmax(400px, .95fr);
  background: #fff;
}
.login-brand-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 52px 60px; color: #fff;
  background: linear-gradient(145deg, #0d3545 0%, #134d62 58%, #1b6985 100%);
}
.login-brand-panel::before, .login-brand-panel::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1);
}
.login-brand-panel::before {
  width: 460px; height: 460px; right: -200px; top: -120px;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .025), 0 0 0 140px rgba(255, 255, 255, .02);
}
.login-brand-panel::after {
  width: 250px; height: 250px; left: -130px; bottom: 30px; background: rgba(244, 162, 97, .09);
}
.login-brand { display: flex; align-items: center; gap: 13px; position: relative; z-index: 1; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 17px; letter-spacing: .04em; }
.login-brand small { margin-top: 2px; font-size: 9px; letter-spacing: .18em; color: rgba(255, 255, 255, .55); }
.login-copy { margin: auto 0; position: relative; z-index: 1; max-width: 560px; }
.login-copy > p { font-size: 11px; letter-spacing: .22em; color: #87c6d9; font-weight: 700; margin-bottom: 18px; }
.login-copy h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.1; letter-spacing: -.04em; font-weight: 750; }
.login-copy > span {
  display: block; max-width: 500px; margin-top: 22px;
  color: rgba(255, 255, 255, .7); font-size: 15px; line-height: 1.8;
}
.login-points { display: grid; gap: 12px; position: relative; z-index: 1; margin-bottom: 48px; }
.login-points div { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .82); font-size: 14px; }
.login-points .icon { background: rgba(255, 255, 255, .12); border-radius: 50%; padding: 2px; }
.login-brand-panel footer { position: relative; z-index: 1; color: rgba(255, 255, 255, .45); font-size: 12px; }

.login-form-panel { display: grid; place-items: center; padding: 52px; background: #fff; }
.login-card { width: min(400px, 100%); display: grid; gap: 16px; }
.login-card h2, .login-form h2 { font-size: 30px; letter-spacing: -.03em; }
.login-sub { color: var(--muted); font-size: 13px; margin-top: -10px; }
.login-eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .2em; font-weight: 800; }
.login-mobile-logo { display: none; }
.login-logo { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 21px; background: linear-gradient(145deg, #1c7896, #0c4054); }
.login-card .field, .login-form .field { display: grid; gap: 6px; margin: 0; }
.login-card .field > span:first-child, .login-form .field > span:first-child { font-size: 13px; font-weight: 600; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .icon { position: absolute; left: 12px; color: var(--muted); }
.login-card .input-wrap input, .login-form .input-wrap input { padding-left: 40px; }
.login-err { min-height: 1.3em; color: var(--red); font-size: .84rem; display: flex; align-items: center; gap: 6px; }
.login-tip {
  margin-top: 2px; font-size: .76rem; color: var(--text2);
  background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.7;
}
.login-tip b { color: var(--ink-soft); }
.login-tip code { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--primary); font-weight: 700; }

/* ---------- 启动加载页（登录页/主界面就绪后淡出） ---------- */
.boot-loader {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 22% 18%, #edf6f8, #f6f8f9 58%);
  color: var(--muted); transition: opacity .4s ease;
}
.boot-loader.gone { opacity: 0; pointer-events: none; }
.boot-loader p { font-size: .88rem; }
.boot-bar { width: 176px; height: 4px; border-radius: 99px; background: #dce9ed; overflow: hidden; }
.boot-bar span {
  display: block; width: 45%; height: 100%; border-radius: inherit;
  background: var(--primary); animation: bootslide 1.1s ease-in-out infinite;
}
@keyframes bootslide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

/* ============================================================================
 * 二、布局骨架
 * ========================================================================== */
.app { display: flex; min-height: 100vh; }

/* ---------- 侧栏 ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); z-index: 40;
  background: linear-gradient(180deg, var(--sidebar), #0d2632); color: #fff;
  display: flex; flex-direction: column; box-shadow: 8px 0 30px rgba(5, 28, 38, .08);
  transition: transform .22s ease;
}
.brand {
  min-height: 72px; display: flex; align-items: center; gap: 11px;
  padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-weight: 700; font-size: .9rem; color: #fff; letter-spacing: .02em;
}
.brand-logo {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; font-size: 1.1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(145deg, #1c7896, #0c4054);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.brand-text { min-width: 0; }
.brand-text strong, .brand-text small { display: block; }
.brand-text strong { font-size: .92rem; white-space: nowrap; }
.brand-text small { font-size: 8px; letter-spacing: .13em; color: rgba(255, 255, 255, .42); margin-top: 1px; }
.sidebar-close { display: none; margin-left: auto; color: rgba(255, 255, 255, .7); background: none; border: 0; cursor: pointer; }

.company-name {
  margin: 14px 14px 8px; padding: 11px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06);
}
.company-name span, .company-name small { display: block; }
.company-name span { color: rgba(255, 255, 255, .82); font-size: 11px; line-height: 1.5; }
.company-name small { margin-top: 3px; color: rgba(255, 255, 255, .36); font-size: 10px; }

.nav { flex: 1; overflow-y: auto; padding: 6px 10px 10px; scrollbar-width: thin; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }
.nav-section-label {
  padding: 12px 12px 5px; font-size: 9px; letter-spacing: .16em; font-weight: 700;
  color: rgba(255, 255, 255, .3); text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 42px; padding: 0 12px; margin-bottom: 2px; border: 0; border-radius: 11px;
  background: transparent; color: rgba(255, 255, 255, .68);
  font-size: .92rem; font-weight: 580; text-align: left; cursor: pointer;
  transition: background .18s, color .18s; position: relative;
}
.nav-item .icon { flex-shrink: 0; }
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav-item.active {
  background: rgba(255, 255, 255, .11); color: #fff;
  box-shadow: inset 3px 0 0 #63b8d0;
}
.nav-item .nav-badge {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px;
  background: rgba(244, 162, 97, .22); color: #f7c79b;
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
}
.sidebar-foot { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .84rem; }
.side-user {
  margin-bottom: 8px; padding: 10px; border-radius: 12px; color: #fff;
  background: rgba(255, 255, 255, .045); display: flex; align-items: center; gap: 9px;
}
.side-user > div { min-width: 0; }
.side-user b, .side-user small { display: block; }
.side-user b { font-size: 12px; font-weight: 650; }
.side-user small { color: rgba(255, 255, 255, .4); font-size: 10px; margin-top: 1px; }
.avatar {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .9rem;
  background: linear-gradient(135deg, #f4a261, #dc7f4a);
}
/* 行内动作链接（付款 / 编辑 / 状态 / 明细 / 详细▾）——app.js 大量使用，
 * 主战场在**白底内容区**，所以默认取主色；侧栏深色底上再单独覆盖。
 * 旧版把这里定成浅灰紫 #8fa3d6，白底上几乎读不出来、悬停还变白（等于消失），本次一并修正。 */
.btn-link {
  background: none; border: none; color: var(--primary); cursor: pointer; font-size: .84rem;
  padding: 0; font-weight: 650; transition: color .18s; text-decoration: none;
}
.btn-link:hover { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 2px; }
/* 侧栏（深色底）内的链接：回到浅色，悬停变白 */
.sidebar .btn-link { color: #8fa9b4; font-weight: 650; }
.sidebar .btn-link:hover { color: #fff; text-decoration: none; }
.quick-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin: 8px 0 0; padding: 11px; border: 1px solid rgba(99, 184, 208, .28); border-radius: 12px;
  background: rgba(99, 184, 208, .12); color: #dff3f8;
  font-size: .86rem; font-weight: 700; cursor: pointer; transition: .18s ease;
}
.quick-btn:hover { background: rgba(99, 184, 208, .2); transform: translateY(-1px); }

/* ---------- 主区 ---------- */
.main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30; min-height: var(--topbar-height);
  display: flex; align-items: center; gap: 14px; padding: 0 26px;
  background: rgba(243, 246, 247, .88); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(210, 222, 226, .7);
}
.topbar-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.topbar-title span, .topbar-title small { display: block; }
.topbar-title small { color: var(--muted); font-size: 10px; font-weight: 500; margin-top: 1px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-quick {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--primary), #0e5873);
  color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(23, 107, 135, .22); transition: .18s ease;
}
.topbar-quick:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(23, 107, 135, .28); }
.topbar-user {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 12px 4px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  font-size: .84rem; font-weight: 650; color: var(--ink-soft);
}
.mobile-menu { display: none; }
.icon-button {
  width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-soft); transition: .18s ease;
}
.icon-button:hover { background: var(--primary-soft); color: var(--primary); }

.content { padding: 22px 26px 90px; max-width: 1440px; width: 100%; margin: 0 auto; }

/* 底部 Tab（手机） */
.tabbar { display: none; }

/* ============================================================================
 * 三、通用组件
 * ========================================================================== */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 16px;
}
.card-title {
  font-size: 1rem; font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-title .more { font-size: .82rem; color: var(--primary); font-weight: 650; }
.section-h {
  font-size: .95rem; font-weight: 700; margin: 20px 0 10px;
  display: flex; justify-content: space-between; align-items: center;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 9px 18px; border: 1px solid transparent; border-radius: 11px;
  cursor: pointer; font-size: .92rem; font-weight: 650;
  transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), #0e5873); color: #fff;
  box-shadow: 0 6px 18px rgba(23, 107, 135, .22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(23, 107, 135, .28); }
.btn-ghost { background: #fff; color: var(--ink-soft); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--surface-soft); }
.btn-outline { background: #fff; color: var(--primary); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--primary); background: var(--primary-soft); }
.btn-danger { background: #fdecef; color: var(--danger); }
.btn-danger:hover { background: #fbdfe4; }
.btn-del { background: var(--red); color: #fff; }
.btn-del:hover { filter: brightness(1.06); }
.btn-block { width: 100%; margin-top: 14px; }
.btn-sm { min-height: 32px; padding: 5px 12px; font-size: .8rem; border-radius: 9px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.link { color: var(--primary); font-weight: 650; }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ---------- KPI ---------- */
.kpi {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--primary);
  border-radius: 15px; box-shadow: var(--shadow-sm); padding: 16px 18px; min-width: 0;
}
.kpi-label { font-size: .8rem; color: var(--text2); margin-bottom: 6px; font-weight: 600; }
.kpi-value {
  font-size: 1.35rem; font-weight: 750; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi-sub { font-size: .74rem; color: var(--text2); margin-top: 5px; line-height: 1.5; overflow-wrap: anywhere; }
/* 🔴 密集 KPI 行（首行 6 张 / 5 张同行）的防溢出铁律：
 * 窄卡下必须收紧内边距与字号，并允许长金额断行 —— 否则 ¥6,030,000.00 这类数字会撑破卡片。
 * 这几条来自既有验收（test-dash-payable-ui.js B5），换肤时不得删除。 */
.grid-6 .kpi { padding: 14px 13px; min-width: 0; }
.grid-6 .kpi-value { font-size: 1.02rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.grid-6 .kpi-sub { font-size: .67rem; line-height: 1.5; overflow-wrap: anywhere; }
.grid-5 .kpi { padding: 14px 14px; min-width: 0; }
.grid-5 .kpi-value { font-size: 1.08rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.grid-5 .kpi-sub { font-size: .68rem; line-height: 1.5; overflow-wrap: anywhere; }
.kpi-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kpi-acct { color: var(--primary) !important; }
.kpi-cash { color: #b45309 !important; }
.money-in { color: var(--red); }
.money-out { color: var(--green); }

/* 统计条（采购/台账/成本/应收 顶部小片） */
.stat-chip {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 12px; min-width: 132px;
  background: var(--surface-soft); border: 1px solid var(--line);
}
.stat-chip .stat-n { font-size: 1.05rem; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-chip .stat-l { font-size: .72rem; color: var(--text2); }

/* ---------- 页签 ---------- */
.seg {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin-bottom: 16px;
  background: #e7edef; border-radius: 13px;
}
.seg button {
  flex: 0 1 auto; min-width: 0; border: none; background: transparent;
  padding: 9px 15px; border-radius: 10px; font-size: .9rem; cursor: pointer;
  color: var(--muted); font-weight: 650; transition: .18s ease;
}
.seg button:hover { color: var(--ink-soft); }
.seg button.active { background: #fff; color: var(--primary); font-weight: 700; box-shadow: var(--shadow-sm); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px;
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  background: #eef3f4; color: #58707a;
}
.tag-blue { background: var(--primary-soft); color: var(--primary); }
.tag-gray { background: #eef1f3; color: var(--text2); }
.tag-green { background: #e8f7f3; color: #268879; }
.tag-red { background: #fdecef; color: #cc4c60; }
.tag-orange { background: #fdf2e7; color: #c77c27; }

/* ---------- 项目卡片 ---------- */
.proj-card { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.proj-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.proj-code { font-size: .74rem; color: var(--text2); }
.proj-name { font-size: 1.02rem; font-weight: 700; margin: 3px 0 10px; }
.proj-nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--text2); }
.proj-nums b { display: block; font-size: .95rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 进度条 ---------- */
.bar-track { height: 8px; background: #e9eff1; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4da4bd, var(--primary)); }

/* ============================================================================
 * 四、表格
 * ========================================================================== */
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th {
  text-align: left; color: var(--text2); font-weight: 700; font-size: .8rem;
  padding: 11px 10px; border-bottom: 1px solid var(--line); background: #fbfcfd; white-space: nowrap;
}
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; color: var(--ink-soft); }
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover td { background: #f9fcfc; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl b, .tbl .primary-cell { color: var(--text); }
.tbl-wrap { overflow-x: auto; border-radius: var(--radius); }

/* 项目收支台账：紧凑排版（列多，缩 padding/字号/文字列宽，长文字列允许换行） */
.tbl-ledger { font-size: .78rem; }
.tbl-ledger th { padding: 7px 7px; }
.tbl-ledger td { padding: 6px 7px; }
.tbl-ledger td:first-child,
.tbl-ledger td:nth-child(3) { white-space: normal; }

/* 明细录入容器：窄屏列多时横向滚动，避免挤压变形 */
.items-box { overflow-x: auto; }
.items-box .it-row { min-width: 560px; }
.it-row input, .it-row select { font-size: .88rem; padding: 8px 9px; }
.it-sub {
  align-self: center; text-align: right; font-weight: 700; font-size: .92rem;
  color: var(--text); white-space: nowrap; line-height: 1; min-width: 0;
}
.it-sub::before { content: '¥'; font-weight: 600; color: var(--text2); font-size: .78rem; margin-right: 2px; }
.it-row input[readonly] { background: #f3f5f9; color: var(--text2); }
.dwo-row { min-width: 0; }
.dwo-line-amt { font-variant-numeric: tabular-nums; }

/* 筛选条（台账/材料/成本/应收 顶部） */
.lg-f { border-radius: 12px !important; }

/* 材料档案关联选择：明细行候选浮层 */
.mp-cand {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden; max-height: 232px; overflow-y: auto;
}
.mp-opt {
  padding: 8px 11px; cursor: pointer; font-size: .86rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--line-soft);
}
.mp-opt:last-child { border-bottom: none; }
.mp-opt:hover { background: var(--primary-soft); color: var(--primary-dark); }
.mp-opt .muted { font-size: .78rem; margin-left: 4px; }

/* 聚合明细 / 合计行 */
.agg-detail { font-weight: 650; }
.agg-total td { font-weight: 700; }

/* 配置分区（基础信息 / 劳务配置） */
.cfg-sec { min-width: 0; }
.cfg-sec .cfg-input { min-width: 0; }
.cfg-del { text-decoration: none; }

/* 付款人区块提示 */
.payer-hint { line-height: 1.7; }
.payer-employee-extra { margin-top: 2px; }

/* ============================================================================
 * 五、弹窗 / 提示
 * ========================================================================== */
.modal-mask {
  position: fixed; inset: 0; z-index: 100; padding: 22px;
  background: rgba(7, 31, 41, .48); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadein .18s ease;
}
.modal {
  background: #fff; width: 100%; max-width: 560px; max-height: min(90vh, 900px);
  border-radius: 20px; box-shadow: var(--shadow-lg); overflow-y: auto;
  padding: 22px; animation: slideup .22s ease;
}
.modal-lg { max-width: 900px; }
.modal-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
  margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { font-size: 1.1rem; letter-spacing: -.02em; }
.modal-head p { color: var(--text2); font-size: .78rem; margin-top: 3px; }
.modal-close {
  background: none; border: none; font-size: 1.5rem; color: var(--text2);
  cursor: pointer; line-height: 1; padding: 0 4px; border-radius: 8px; transition: .18s ease;
}
.modal-close:hover { color: var(--danger); background: #fdecef; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }

.confirm-box { padding: 2px; }
.confirm-title { font-size: 1.05rem; font-weight: 750; color: var(--danger); margin-bottom: 12px; }
.confirm-msg { font-size: .95rem; line-height: 1.75; color: var(--text); margin-bottom: 4px; word-break: break-word; }
.confirm-msg b { color: var(--text); }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideup { from { transform: translateY(30px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 200;
  background: rgba(16, 47, 61, .95); color: #fff; padding: 12px 22px; border-radius: 12px;
  font-size: .88rem; font-weight: 600; animation: fadein .2s ease; max-width: 86vw;
  text-align: center; box-shadow: var(--shadow-md); backdrop-filter: blur(6px);
}

.empty { text-align: center; color: var(--text2); padding: 44px 18px; font-size: .9rem; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .8rem; color: var(--text2); margin-top: 10px; }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }

/* 高级字段折叠（长期空置字段不占视线） */
.adv-fold { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 2px; }
.adv-fold > summary { cursor: pointer; font-size: .84rem; color: var(--text2); padding: 8px 0 4px; list-style: none; }
.adv-fold > summary::-webkit-details-marker { display: none; }
.adv-fold > summary::before { content: '▸ '; }
.adv-fold[open] > summary::before { content: '▾ '; }

.detail-toggle { font-size: .82rem; }
.rp-toggle { font-size: .82rem; }
.acc-card { cursor: pointer; margin-bottom: 0; }
.acc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.notset { color: #b0b8c8; font-weight: 400; }

/* ============================================================================
 * 六、项目经营总表（13 列合并表 · 两级表头 + 口径分组色带）
 * 设计要点：① 青带 = 账面口径（回款能否盖住成本）② 橙带 = 现金口径（口袋正负）
 * 两个口径并排，一眼看出是两件事而非两个打架的数；③ 首列冻结，横滚不丢项目名；
 * ④ 关键结论列（阶段毛利润 / 现金盈亏）加粗放大 + 正负号，成为视觉重心。
 * ========================================================================== */
.tbl.merged { border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.tbl.merged th, .tbl.merged td { padding: 9px 10px; }
.tbl.merged thead th { position: sticky; top: 0; z-index: 2; }

/* 第一行：口径分组色带（白字，一眼分清五组） */
.tbl.merged tr.grp th {
  font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-align: center;
  padding: 8px 8px; color: #fff; border-bottom: none;
  background: linear-gradient(180deg, #1d4b5c, #123340);
}
.tbl.merged tr.grp th.g-info { text-align: left; padding-left: 12px; }
.tbl.merged tr.grp th.col-acct { background: linear-gradient(180deg, #2b8aa6, #176b87); }
.tbl.merged tr.grp th.col-cash { background: linear-gradient(180deg, #f4a261, #d98343); }
.tbl.merged tr.grp th.sticky-col { background: linear-gradient(180deg, #1d4b5c, #123340); }

/* 第二行：具体列名（浅底，账面青 / 现金橙保持语义） */
.tbl.merged thead tr:nth-child(2) th {
  background: #f2f5f7; color: var(--text2); font-weight: 600; font-size: .74rem;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tbl.merged thead tr:nth-child(2) th.col-acct { background: #e4f1f5; color: var(--primary-dark); }
.tbl.merged thead tr:nth-child(2) th.col-cash { background: #fdf0e2; color: #b45309; }
.tbl.merged thead tr:nth-child(2) th.sticky-col { background: #f2f5f7; }

/* 排序交互 */
.tbl.merged th.sortable { cursor: pointer; user-select: none; }
.tbl.merged th.sortable:hover { color: var(--primary); }
.tbl.merged th .sarrow { font-size: .68rem; margin-left: 2px; color: var(--primary); font-weight: 700; }

/* 冻结首列 */
.tbl.merged .sticky-col { position: sticky; left: 0; z-index: 3; background: #fff; box-shadow: 1px 0 0 var(--line); }
.tbl.merged thead .sticky-col { z-index: 5; }
.tbl.merged tr:last-child td { border-bottom: none; }

/* 项目名 + 状态圆点 */
.tbl.merged .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.tbl.merged .pj-sub { font-size: .72rem; color: var(--text2); font-weight: 400; margin-top: 3px; }

/* 数据区列背景：账面青 / 现金橙 */
.tbl.merged tbody td { background: #fff; }
.tbl.merged tbody .col-acct { background: #f4fafc; }
.tbl.merged tbody .col-cash { background: #fff8f0; }

/* 斑马纹（跳过合计行） */
.tbl.merged tbody tr:not(.total-row):nth-child(even) td { background: #f7f9fa; }
.tbl.merged tbody tr:not(.total-row):nth-child(even) .col-acct { background: #eaf4f8; }
.tbl.merged tbody tr:not(.total-row):nth-child(even) .col-cash { background: #fff2e4; }

/* 行悬浮高亮（跳过合计行） */
.tbl.merged tbody tr:not(.total-row):hover td { background: var(--primary-soft); }
.tbl.merged tbody tr:not(.total-row):hover .col-acct { background: #dcecf2; }
.tbl.merged tbody tr:not(.total-row):hover .col-cash { background: #ffe8cf; }

/* 关键结论列：加粗放大 + 正负号 */
.tbl.merged td.kpi-acct, .tbl.merged td.kpi-cash { font-weight: 800 !important; font-size: .9rem; }
.tbl.merged td.bridge-hot { font-weight: 700; color: var(--red); }

/* 合计行：深底强分隔 */
.tbl.merged tr.total-row td {
  border-top: 2px solid #cfe0e5; font-weight: 700;
  background: #e9eff1; color: var(--text);
}
.tbl.merged tr.total-row td.col-acct { background: #d8ecf2; color: var(--primary-dark); }
.tbl.merged tr.total-row td.col-cash { background: #fbdcbd; color: #8a4b12; }
.tbl.merged tr.total-row td.sticky-col { background: #e9eff1; }

/* 恒等式说明条（合并表的灵魂：把两个口径用一条等式串起来） */
.ident-box {
  margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #f2f8fa 0%, #fffaf4 100%);
  border: 1px solid #dfeaee; font-size: .82rem; line-height: 1.95;
}
.ident-box .ident-title { font-size: .88rem; font-weight: 700; margin-bottom: 6px; }
.ident-eq {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; font-weight: 700;
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 9px;
  background: #fff; border: 1px solid #e0ebee; border-radius: var(--radius-sm);
  padding: 9px 13px; margin: 4px 0 6px;
}
.ident-eq .acct { color: var(--primary); }
.ident-eq .cash { color: #b45309; }
.ident-eq .op { color: #9aa9b0; font-weight: 400; }
.ident-box .acct { color: var(--primary); font-weight: 700; }
.ident-box .cash { color: #b45309; font-weight: 700; }

/* 窄屏：13 列降级为项目卡片（左右两栏 = 两个口径） */
.mcards { display: none; }
.mcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; margin-bottom: 12px; }
.mcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.mcard-name { font-weight: 700; font-size: .95rem; }
.mcard-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; font-size: .74rem; color: var(--text2); }
.mcard-rows b { display: block; font-size: .88rem; color: var(--text); font-variant-numeric: tabular-nums; }
.mcard-cal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mcard-cal > div { border-radius: 12px; padding: 9px 11px; }
.mcard-acct { background: #f2f8fa; border-left: 3px solid var(--primary); }
.mcard-cash { background: #fff8f0; border-left: 3px solid var(--accent); }
.mcard-cal .lbl { font-size: .72rem; color: var(--text2); margin-bottom: 4px; }
.mcard-cal .val { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  .mtable-box { display: none; }
  .mcards { display: block; }
}

/* ============================================================================
 * 七、响应式
 * ========================================================================== */
@media (max-width: 860px) {
  html { font-size: 14.5px; }
  .sidebar { transform: translateX(-105%); width: min(290px, 86vw); }
  .sidebar.open { transform: none; }
  .sidebar-close { display: inline-flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(8, 28, 37, .4); backdrop-filter: blur(3px);
  }
  .main { margin-left: 0; }
  .topbar { padding: 0 16px; }
  .mobile-menu { display: inline-flex; }
  .content { padding: 16px 16px 96px; }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 34;
    min-height: 64px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 2px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabbar::-webkit-scrollbar { display: none; }
  /* 10 个模块全量平铺、横向滑动 —— 不做「更多」折叠（已否决折叠方案） */
  .tab-item {
    flex: 0 0 auto; min-width: 62px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; padding: 4px 8px;
    border: 0; background: transparent; border-radius: 10px;
    text-decoration: none; color: var(--muted); font-size: .6rem; font-weight: 600;
    cursor: pointer; transition: .18s ease;
  }
  .tab-item span { font-size: 1.05rem; }
  .tab-item .tab-ico { display: block; line-height: 0; font-size: 0; }
  .tab-item .tab-ico svg { width: 21px; height: 21px; }
  .tab-item.active { color: var(--primary); background: var(--primary-soft); }
  /* 拆成单条（不合并选择器）：既有验收 test-dash-payable-ui.js B5 按 `.grid-5 {` 匹配 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .kpi-value { font-size: 1.2rem; }
  .modal-mask { padding: 10px; align-items: flex-end; }
  .modal { border-radius: 20px 20px 0 0; max-width: 100%; max-height: 92vh; }
  .toast { bottom: 110px; }
  .topbar-title small { display: none; }
}
/* 中屏（平板横屏 / 小笔记本，861–1080）：6 列 KPI 降 3 列、5 列降 3 列、4 列降 2 列
 * ⚠️ 本块必须排在 `max-width:860px` 块**之后** —— 既有验收
 *    test-dash-payable-ui.js B5 用「第一个 861px 之前是否有 2 列规则」判手机端，
 *    顺序一换就会误报。换肤时不要挪动。 */
@media (min-width: 861px) and (max-width: 1080px) {
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .login-page { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-form-panel {
    padding: 26px 22px; min-height: 100vh;
    background: radial-gradient(circle at 100% 0%, #e9f3f5, transparent 42%), #fff;
  }
  .login-mobile-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; }
  .login-mobile-logo strong { font-size: 15px; }
  .card { padding: 15px; }
  .kpi { padding: 14px; }
  .stat-chip { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .chart-legend { font-size: .72rem; }
}
@media (max-width: 520px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .stat-chip { flex: 1 1 100%; }
  .card-title { flex-wrap: wrap; }
  .topbar-user { padding-right: 8px; }
  .kpi-value { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}