:root {
  --red: #C00000;
  --red-soft: #fbeaea;
  --ink: #1f2329;
  --muted: #8a9099;
  --line: #ebedf0;
  --bg: #f5f6f8;
  --card: #ffffff;
  --green: #2e7d32;
  --amber: #b26a00;
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei","PingFang SC",-apple-system,"Segoe UI",sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; }
#app { min-height: 100vh; }

/* 登录 */
/* ---------- 科技风登录页 ---------- */
.login-wrap {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 15% 0%, rgba(220,38,38,.20), transparent 62%),
    radial-gradient(950px 540px at 85% 100%, rgba(56,130,246,.15), transparent 62%),
    linear-gradient(135deg, #0a0f1e 0%, #101b33 48%, #0a0f1e 100%);
}
/* 网格底纹 */
.login-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.95), transparent 78%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.95), transparent 78%);
}
/* 斜向扫描光带 */
.login-wrap::after {
  content: ''; position: absolute; left: -25%; right: -25%; top: -35%; height: 55%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(96,165,250,.09), transparent);
  transform: rotate(-12deg);
  animation: techScan 9s linear infinite;
}
@keyframes techScan { 0% { top: -40%; } 100% { top: 115%; } }
.tech-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.tech-orb.o1 { width: 420px; height: 420px; left: -120px; top: -120px; background: radial-gradient(circle, rgba(220,38,38,.5), transparent 70%); animation: techFloat 12s ease-in-out infinite alternate; }
.tech-orb.o2 { width: 520px; height: 520px; right: -160px; bottom: -180px; background: radial-gradient(circle, rgba(37,99,235,.45), transparent 70%); animation: techFloat 15s ease-in-out infinite alternate-reverse; }
@keyframes techFloat { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(42px,26px,0) scale(1.08); } }
/* 暗色玻璃拟态卡片 */
.login-card {
  position: relative; z-index: 1; width: 360px; max-width: 92vw; box-sizing: border-box; border-radius: 16px; padding: 36px 30px;
  background: rgba(13,20,38,.72);
  border: 1px solid rgba(148,163,184,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.login-card::before {
  content: ''; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red), #38bdf8, transparent); opacity: .9;
}
.login-card h1 { font-size: 22px; color: #f1f5f9; text-align:center; margin-bottom: 4px; letter-spacing: 1px; }
.login-card .sub { text-align:center; color: #7d8db1; margin-bottom: 24px; font-size: 13px; letter-spacing: 2px; }
.login-card .field label { color: #9fb0d0; }
.login-card input { background: rgba(255,255,255,.06); border-color: rgba(148,163,184,.25); color: #e7eefc; }
.login-card input::placeholder { color: #5b6b8c; }
.login-card input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.login-card .btn-primary { background: linear-gradient(135deg, #dc2626, #b91c1c); box-shadow: 0 6px 18px rgba(220,38,38,.35); }
.field { margin-bottom: 16px; }
.field label { display:block; margin-bottom: 6px; color:#444; font-size: 13px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; background:#fff; color: var(--ink); outline: none; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--red); }
textarea { resize: vertical; min-height: 60px; }
.btn { cursor:pointer; border:none; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-family:inherit; transition: filter .15s, background .15s; }
.btn-primary { background: var(--red); color:#fff; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { background:#fff; border:1px solid var(--line); color:#333; }
.btn-ghost:hover { border-color: var(--red); color: var(--red); }
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-danger { background:#fff; border:1px solid #f0c0c0; color: var(--red); }
.btn-danger:hover { background: var(--red-soft); }
.btn-ok { background:#2e7d32; color:#fff; }
.btn-ok:hover { filter: brightness(1.08); }
.btn-block { width:100%; }

/* 布局 */
.app-grid { display: flex; min-height: 100vh; }
.sidebar { width: var(--sb-w, 220px); background:#20180f; color:#d9cfc4; flex-shrink:0; display:flex; flex-direction:column; position:relative; transition: width .15s ease; }
.sidebar.collapsed { width: 48px; }
.sidebar.collapsed .brand { font-size: 0; padding: 18px 6px; }
.sidebar.collapsed .brand small { display: none; }
.sidebar.collapsed .gtitle { display: none; }
.sidebar.collapsed .nav-item { font-size: 0; padding: 11px 0; justify-content: center; gap: 0; }
.sb-toggle { position:absolute; top:16px; right:-11px; width:22px; height:22px; border-radius:50%; border:1px solid #322619; background:var(--red); color:#fff; cursor:pointer; font-size:12px; line-height:1; z-index:10; display:flex; align-items:center; justify-content:center; padding:0; }
.sidebar .brand { padding: 18px 18px; font-size: 15px; font-weight:700; color:#fff; border-bottom: 1px solid #322619; letter-spacing:1px; line-height:1.4; }
.sidebar .brand .co { display:block; font-weight:700; word-break:break-all; }
.sidebar .brand small { display:block; font-size: 17px; color:#fff; font-weight:700; margin-top:2px; letter-spacing:1px; }
.nav-group { padding: 10px 0; }
.nav-group .gtitle { padding: 6px 18px; font-size: 11px; color:#8a7a66; letter-spacing:1px; }
.nav-item { padding: 9px 18px; cursor:pointer; font-size: 14px; display:flex; align-items:center; gap:8px; color:#cdbfb0; }
.nav-item:hover { background:#2c2114; color:#fff; }
.nav-item.active { background: var(--red); color:#fff; }
.sb-resize { position:absolute; top:0; right:0; width:6px; height:100%; cursor:col-resize; z-index:11; }
.sb-resize:hover { background: rgba(192,0,0,.35); }
.nav-list { flex:1; overflow-y:auto; padding-bottom:10px; }
.nav-item[draggable=true] { cursor:grab; }
.nav-item[draggable=true]:active { cursor:grabbing; }
.nav-item.dragging { opacity:.5; background:#3a2c1a; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height: 56px; background: var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; padding: 0 22px; box-shadow: var(--shadow); z-index:2; }
.topbar .title { font-size:16px; font-weight:600; }
.topbar .spacer { flex:1; }
.topbar .user { color:#444; margin-right:14px; }
.content { padding: 22px; overflow:auto; flex:1; }

/* 卡片 */
.card { background: var(--card); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 18px; }
.card h3 { font-size: 15px; margin-bottom: 14px; display:flex; align-items:center; gap:8px; }
.card h3::before { content:""; width:4px; height:15px; background: var(--red); border-radius:2px; display:inline-block; }
.toolbar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.toolbar .spacer { flex:1; }
.search { max-width: 240px; }

/* 表格 */
table { width:100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 10px 12px; text-align:left; border-bottom:1px solid var(--line); }
th { color:#666; font-weight:600; background:#fafafa; position:sticky; top:0; }
tbody tr:hover { background:#fcfcfd; }
td.num, th.num { text-align:right; font-variant-numeric: tabular-nums; }
.empty { text-align:center; color: var(--muted); padding: 30px; }

/* 徽章 */
.badge { display:inline-block; padding:2px 9px; border-radius: 20px; font-size:12px; }
.badge-draft { background:#eef0f2; color:#666; }
.badge-received, .badge-shipped { background:#e6f4ea; color: var(--green); }
.badge-low { background: var(--red-soft); color: var(--red); }
.badge-partial { background:#fff4e0; color:#c77700; }
.badge-ok { background:#e6f4ea; color: var(--green); }

/* 统计卡 */
.stats { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.stat { background: var(--card); border-radius:12px; padding:16px 18px; box-shadow: var(--shadow); border-left:3px solid var(--red); }
.stat .label { color: var(--muted); font-size:13px; }
.stat .value { font-size:24px; font-weight:700; margin-top:6px; }
.stat .sub { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border, #eee); font-size:12px; color:var(--muted); }
.stat .sub b { color:var(--text); font-weight:600; }
.stat.red { border-left-color: var(--red); }
.stat.blue { border-left-color:#1a73e8; }
.stat.green { border-left-color: var(--green); }
.stat.amber { border-left-color: var(--amber); }
.stat.purple { border-left-color:#7b1fa2; }
.stat.orange { border-left-color:#e67e22; }
.stat.teal { border-left-color:#00897b; }

/* 弹窗 */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; z-index:50; }
.modal { background:#fff; border-radius:12px; width: 900px; max-width:96vw; box-shadow:0 16px 50px rgba(0,0,0,.3); }
.modal-head { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.modal-head h3 { font-size:16px; }
.modal-head .x { margin-left:auto; cursor:pointer; color:#999; font-size:20px; line-height:1; }
.modal-body { padding:18px 20px; max-height:76vh; overflow:auto; }
.modal-foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display:block; margin-bottom:5px; color:#555; font-size:13px; }
.item-row { display:grid; grid-template-columns: 1.8fr 1fr 0.6fr 0.8fr 0.6fr auto minmax(96px,1.4fr) 26px; gap:8px; align-items:center; margin-bottom:8px; }
.item-row.no-tax { grid-template-columns: 2fr 1.1fr 0.7fr 0.9fr auto minmax(96px,1.4fr) 26px; }
.item-row.with-stock { grid-template-columns: 1.5fr 0.8fr 0.5fr 0.65fr 0.5fr 0.6fr auto minmax(92px,1.3fr) 26px; }
.item-row.prod-row { grid-template-columns: 2fr 1.1fr 0.6fr 0.7fr 1.3fr 26px; }
.item-row.prod-row .stock { white-space:nowrap; font-size:12px; color:#666; }
.prod-items-cell { max-width:340px; min-width:200px; white-space:normal; line-height:1.5; color:#333; }
.item-row .row-note { font-size:13px; padding:7px 9px; min-width:0; }
.item-row .stock { font-size:12px; color:#666; white-space:nowrap; padding-top:8px; }
.item-row .stock.zero { color:#999; }
.item-row .stock.warn { color: var(--red); font-weight:600; }
.item-row .amt { text-align:right; font-variant-numeric:tabular-nums; padding-top:8px; color:#444; }
.add-link { color: var(--red); cursor:pointer; font-size:13px; }
.hint { color: var(--muted); font-size:12px; margin-top:-6px; margin-bottom:10px; }

/* toast */
#toast-root { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:99; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:#323232; color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.25); animation: fade .2s; }
.toast.err { background:#c00000; }
.toast.ok { background:#2e7d32; }
@keyframes fade { from{opacity:0; transform:translateY(-6px);} to{opacity:1;} }

/* 迷你柱状图 */
.bars { display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:10px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-col .bars-inner { display:flex; gap:4px; align-items:flex-end; height:100%; }
.bar { width:16px; border-radius:4px 4px 0 0; }
.bar.p { background: var(--red); }
.bar.s { background:#1a73e8; }
.bar-col .mlabel { font-size:11px; color:#888; margin-top:6px; }
.legend { display:flex; gap:16px; margin-bottom:10px; font-size:12px; color:#666; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; }

/* 年度筛选下拉（仪表盘 / 财务利润核算） */
.yr-label { font-size:13px; color:var(--muted); margin-right:6px; white-space:nowrap; }
.yr-select { padding:5px 10px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:#fff; color:#333; cursor:pointer; }

/* 合同关联订单 / 附件列表行 */
.tag-row { padding:5px 0; border-bottom:1px dashed var(--line); font-size:13px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tag-row:last-child { border-bottom:none; }
.tag-row a { color:var(--red); }

/* 服务订单方向徽标 */
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; line-height:18px; white-space:nowrap; }
.tag-red { background:rgba(192,0,0,.10); color:#c00000; }
.tag-blue { background:rgba(32,105,209,.12); color:#2069d1; }

/* 商品编辑：价格调整历史 */
.price-hist { margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.sub-title { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.sub-title::before { content:""; display:inline-block; width:3px; height:12px; background:var(--red); margin-right:6px; border-radius:2px; vertical-align:-1px; }
table.hist { font-size:12.5px; margin-top:2px; }
table.hist th { background:#fafafa; color:var(--muted); font-weight:600; }
table.hist td, table.hist th { padding:7px 10px; }

/* 商品展示图：表单上传控件 */
.img-picker { display:flex; flex-direction:column; gap:8px; }
.img-preview {
  width: 180px; height: 180px; border: 1px dashed var(--line); border-radius: 10px;
  background: #fafbfc; display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.img-preview img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.img-ph { color:#bbb; font-size:13px; }
.img-actions { display:flex; gap:8px; }
.img-tip { font-size:12px; color:var(--muted); }
.img-status { font-size:12px; min-height:16px; font-weight:600; }
/* 文件选择框：file input 直接作为「可见按钮」渲染，不隐藏、不叠盖、不用 JS 触发 click。
   360 等国产浏览器会拦截 display:none / 1px / 透明叠盖 的 file input（吞文件、甚至引发页面跳转）；
   真实可见的 file input 点击即原生打开对话框，兼容性最强。 */
.img-file-input {
  display:inline-block; font:inherit; font-size:13px; line-height:1.2;
  color:#c0392b; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; cursor:pointer; vertical-align:middle; max-width:260px;
}
.img-file-input::file-selector-button {
  font:inherit; font-size:13px; color:#fff; background:var(--red);
  border:0; border-radius:6px; padding:5px 10px; margin-right:8px; cursor:pointer;
}

/* 商品列表缩略图 */
.pthumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line); display:inline-block; vertical-align:middle; background:#fff;
}
.pthumb:hover { border-color: var(--red); }

/* ===== 手机端登录页适配 ===== */
/* 解决：固定 360px 卡片在窄屏溢出；输入框 14px 触发 iOS 自动放大；按钮点击区偏小 */
@media (max-width: 480px) {
  .login-wrap { padding: 0; }
  .login-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
    padding: 56px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: none;
  }
  .login-card h1 { font-size: 21px; }
  .login-card .sub { font-size: 12.5px; margin-bottom: 30px; }
  .field { margin-bottom: 18px; }
  .field label { font-size: 14px; margin-bottom: 7px; }
  /* 字号 ≥16px 避免 iOS 聚焦时自动放大页面 */
  input, select, textarea { font-size: 16px; padding: 12px 12px; }
  .btn { font-size: 15px; }
  .btn-block { padding: 13px; }
}
.nav-group .gtitle { cursor: grab; user-select: none; }
.nav-group .gtitle:active { cursor: grabbing; }
.nav-group.dragging { opacity: .45; }
.prod-row .stock { font-size: 12px; color: #6b5a45; white-space: nowrap; }
.prod-row .stock.zero { color: var(--red); font-weight: 600; }
.prod-row .stock.warn { color: #b8860b; font-weight: 600; }

/* 关联单据聚合芯片：入/出库单(数量) */
.lk-chip { display:inline-block; padding:2px 9px; border-radius:11px; background:#fdecea; color:#c0392b; border:1px solid #f3c4bd; font-size:12px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.lk-chip:hover { background:#c0392b; color:#fff; border-color:#c0392b; }

/* 关联单据明细展开块 */
.lk-block { border:1px solid #eee; border-radius:8px; margin-bottom:12px; overflow:hidden; }
.lk-block-head { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#faf7f5; border-bottom:1px solid #eee; }
.lk-block-head .lk-no { font-weight:700; color:#c0392b; }
.lk-block-head .lk-meta { color:#777; font-size:12px; flex:1; }
.lk-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.lk-tbl th, .lk-tbl td { padding:6px 8px; border-bottom:1px solid #f2f2f2; text-align:left; }
.lk-tbl th { background:#fbf3f1; color:#a0452a; font-weight:600; }
.lk-tbl .num { text-align:right; }

/* ---------- 财务管理版面优化 ---------- */
/* 利润核算 + 明细统一筛选：左右两栏 */
.fin-top { display:flex; gap:18px; margin-bottom:18px; align-items:stretch; }
.fin-top > .card { margin-bottom:0; }
.fin-profit { flex:1 1 60%; min-width:0; }
.fin-filter { flex:1 1 40%; min-width:0; }
/* 明细筛选改为右侧纵向表单 */
.fin-filter-body { display:flex; flex-direction:column; gap:12px; margin-top:4px; }
.ff-row { display:flex; flex-direction:column; gap:4px; }
.ff-row label { font-size:13px; color:#555; }
.ff-row select, .ff-row input { width:100%; box-sizing:border-box; }
.ff-actions { display:flex; gap:10px; margin-top:4px; }
.ff-actions .btn { flex:1; }
/* 利润核算：维度切换 + 多选芯片 */
.profit-chips { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; }
.chip { display:inline-block; padding:4px 12px; border-radius:14px; background:#f4f1ee; color:#6b5a45; border:1px solid #e6ddd3; font-size:13px; cursor:pointer; user-select:none; transition:background .12s,border-color .12s,color .12s; }
.chip:hover { border-color:var(--red); color:var(--red); }
.chip.on { background:var(--red); color:#fff; border-color:var(--red); }
/* 财务：3 行布局
   - fin-row-3：2 列（利润核算 / 费用支出），利润核算较宽
   - fin-row-1：单行容器（收付款记录，铺满）
   - fin-row-2：2 列（应收明细 / 应付明细） */
.fin-row-3 { display:grid; grid-template-columns:1.1fr 1fr; gap:18px; margin-bottom:18px; }
.fin-row-3 > .card { margin-bottom:0; }
.fin-row-3 .fin-profit { min-width:0; }
.fin-row-3 #profitTable, .fin-row-3 #expTable { overflow-x:auto; }
.fin-row-1 { display:block; margin-bottom:18px; }
.fin-row-1 > .card { margin-bottom:0; }
.fin-row-1 #payTable { overflow-x:auto; }
.fin-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fin-row-2 > .card { margin-bottom:0; }
.fin-row-2 #arOrderTable, .fin-row-2 #apOrderTable { overflow-x:auto; }
@media (max-width: 1100px) { .fin-row-3 { grid-template-columns:1fr; } }
@media (max-width: 980px) { .fin-row-2 { grid-template-columns:1fr; } }

/* 发票管理：宽表横向滚动 */
#invTable { overflow-x:auto; }

/* 财务：Excel 式筛选弹层 */
.xl-filter { position:absolute; top:46px; right:14px; z-index:60; width:300px; max-width:calc(100% - 28px); background:#fff; border:1px solid #ecdcd3; border-radius:12px; box-shadow:0 12px 34px rgba(150,40,20,.18); padding:14px 16px; text-align:left; }
.xl-filter .xf-row { margin-bottom:12px; }
.xl-filter label { display:block; font-size:12px; color:#a0452a; margin-bottom:5px; font-weight:600; }
.xl-filter .yr-select, .xl-filter input[type=date] { width:100%; box-sizing:border-box; }
.xl-filter .xf-quick { display:flex; flex-wrap:wrap; gap:6px; }
.xl-filter .xf-quick .chip { padding:4px 10px; }
.xl-filter .xf-custom { align-items:center; }
.xl-filter .xf-custom input { flex:1; min-width:0; }
.xl-filter .xf-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:4px; }
.xl-filter .xf-actions .btn { min-width:64px; }
.xl-filter .xl-periods { max-height:180px; overflow-y:auto; padding-right:4px; }

/* 登录 / 注册：底部链接 */
.login-links { margin-top: 18px; text-align: center; }
.login-links a { color: #7fb3ff; font-size: 13px; text-decoration: none; }
.login-links a:hover { color: #fff; text-decoration: underline; }

/* 顶栏公司名称 */
.topbar .co-name { color: var(--red); font-weight: 600; font-size: 14px; margin-right: 16px; padding-right: 16px; border-right: 1px solid var(--line); white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* 邀请码大号展示 */
.invite-code-box { text-align: center; font-size: 30px; letter-spacing: 6px; font-weight: 700; color: var(--red); background: var(--red-soft); border: 1px dashed var(--red); border-radius: 10px; padding: 16px 10px; margin: 12px 0; font-family: Consolas, Menlo, "Courier New", monospace; }

/* ===== 手机端（≤768px）整体适配 ===== */
/* 移动端汉堡按钮与抽屉遮罩：桌面隐藏，手机按媒体查询显示 */
.menu-btn { display: none; }
.sb-backdrop { display: none; }

@media (max-width: 768px) {
  /* 侧边栏改为抽屉：默认移出屏幕左侧，点击汉堡滑入 */
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 80vw; max-width: 300px;
    z-index: 60; transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.35);
  }
  .app-grid.sidebar-open .sidebar { transform: translateX(0); }
  .sb-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; display: none; }
  .app-grid.sidebar-open .sb-backdrop { display: block; }
  /* 桌面态折叠/拖拽手柄在手机端无意义，隐藏 */
  .sb-toggle, .sb-resize { display: none !important; }

  /* 顶栏：紧凑、加汉堡按钮 */
  .topbar { padding: 0 12px; height: 52px; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 10px; flex: 0 0 auto;
    border: 1px solid var(--line); background: #fff; border-radius: 8px;
    font-size: 18px; color: var(--red); cursor: pointer;
  }
  .topbar .title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .co-name { display: none; }            /* 手机端省空间，公司名已在侧边栏品牌处展示 */
  .topbar .user { font-size: 12px; margin-right: 8px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .btn-sm { padding: 5px 9px; }

  /* 内容区与卡片：收紧内边距 */
  .content { padding: 12px; }
  .card { padding: 14px; margin-bottom: 12px; }
  .card h3 { font-size: 14px; }

  /* 统计卡：双列自适应（minmax(0,1fr) 防止窄屏溢出） */
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .stat { padding: 12px 14px; }
  .stat .value { font-size: 20px; }

  /* 弹窗：全屏化、单列表单 */
  .modal-mask { padding: 0; align-items: stretch; }
  .modal { width: 100%; max-width: 100%; border-radius: 0; min-height: 100vh; }
  .modal-head { padding: 14px 16px; }
  .modal-body { max-height: none; padding: 16px 14px; }
  .modal-foot { flex-wrap: wrap; padding: 12px 14px; }
  .modal-foot .btn { flex: 1 1 auto; }
  .form-grid { grid-template-columns: 1fr; gap: 12px; }

  /* 单据明细行：原多列网格在手机上堆叠为块 */
  .item-row, .item-row.no-tax, .item-row.with-stock, .item-row.prod-row {
    grid-template-columns: 1fr; gap: 6px;
    padding: 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px;
  }
  .item-row > *, .item-row .row-note { width: 100%; }
  .item-row > :last-child { width: auto; justify-self: start; }   /* 删除按钮不撑满 */

  /* 工具栏：搜索框整行、按钮自适应 */
  .toolbar { gap: 8px; }
  .toolbar .search { flex: 1 1 100%; max-width: 100%; }
  .toolbar .btn { flex: 1 1 auto; }

  /* 财务多列栅格降级为单列 */
  .fin-top, .fin-row-3, .fin-row-2 { grid-template-columns: 1fr; gap: 12px; }
  .bars { height: 130px; }

  /* 表格横向滚动容器（由前端 JS 自动把 <table> 包进 .tbl-scroll） */
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 6px; }
  .tbl-scroll table { width: auto; min-width: 100%; }
  .tbl-scroll th, .tbl-scroll td { white-space: nowrap; }

  /* 防止 iOS 输入框聚焦自动放大页面 */
  input, select, textarea { font-size: 16px; }
}