/* ============================================================
   收付记账 · 多门店餐饮经营管理系统
   设计系统 + 布局 + 组件（桌面端侧边栏 / 移动端底部 Tab）
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌与语义色 */
  --brand-50:#eef4ff;  --brand-100:#dbe6ff; --brand-200:#bcd1ff;
  --brand-500:#2f6bff; --brand-600:#1f57e0; --brand-700:#1a45b4;

  --income:#0f9d63;    --income-bg:#e8f7f0;   /* 收入=绿 */
  --expense:#e0483d;   --expense-bg:#fdecea;  /* 支出=红 */
  --warn:#d97706;      --warn-bg:#fef4e6;
  --info:#0e7490;      --info-bg:#e6f5f8;
  --card-balance:#7c3aed; --card-balance-bg:#f1ebfe;

  /* 中性色 */
  --bg:#f4f6fa;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef1f6;
  --line:#e3e8ef;
  --line-strong:#cfd7e3;
  --text:#16202f;
  --text-2:#5a6879;
  --text-3:#8b97a8;
  --text-inv:#ffffff;

  /* 尺寸 */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px;

  --shadow-1:0 1px 2px rgba(16,32,60,.06), 0 1px 3px rgba(16,32,60,.05);
  --shadow-2:0 4px 12px rgba(16,32,60,.08), 0 1px 3px rgba(16,32,60,.05);
  --shadow-3:0 12px 32px rgba(16,32,60,.14), 0 2px 8px rgba(16,32,60,.08);

  --sidebar-w:236px;
  --topbar-h:60px;
  --tabbar-h:58px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
          "Noto Sans CJK SC", sans-serif;
  --font-num: "SF Mono", "DIN Alternate", ui-monospace, Menlo, Consolas,
              "PingFang SC", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0e1420; --surface:#151d2c; --surface-2:#1b2435; --surface-3:#222d41;
    --line:#273349; --line-strong:#33415a;
    --text:#e8edf5; --text-2:#a3b0c2; --text-3:#75839a;
    --brand-50:#16233d; --brand-100:#1c2c4c;
    --income-bg:#12301f; --expense-bg:#3a1c1a; --warn-bg:#33260f;
    --info-bg:#0d2c33; --card-balance-bg:#241a3d;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 4px 14px rgba(0,0,0,.45);
    --shadow-3:0 14px 36px rgba(0,0,0,.6);
  }
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,select,textarea { font-family:inherit; font-size:inherit; color:inherit; }
a { color:var(--brand-600); text-decoration:none; }
[hidden] { display:none !important; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

/* ---------- 2. 启动屏 ---------- */
.boot {
  position:fixed; inset:0; display:flex; flex-direction:column; gap:var(--sp-4);
  align-items:center; justify-content:center; background:var(--bg); z-index:9999;
}
.boot-logo,.sidebar-logo {
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-500),#6b4dff);
  color:#fff; font-weight:700; font-size:22px; box-shadow:var(--shadow-2);
}
.boot-logo { width:60px; height:60px; font-size:28px; animation:pulse 1.4s ease-in-out infinite; }
.boot-text { color:var(--text-3); font-size:14px; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.07);opacity:1} }

/* ---------- 3. 应用骨架 ---------- */
.app { display:block; min-height:100%; }
@media (min-width:1025px) {
  .app {
    display:grid; grid-template-columns:var(--sidebar-w) 1fr;
    grid-template-rows:var(--topbar-h) 1fr;
    grid-template-areas:"side top" "side view";
  }
  .sidebar { grid-area:side; }
  .topbar  { grid-area:top; }
  .view    { grid-area:view; }
  .tabbar  { display:none; }
}

.sidebar {
  display:none; flex-direction:column; background:var(--surface);
  border-right:1px solid var(--line); position:sticky; top:0; height:100vh;
}
@media (min-width:1025px){ .sidebar{display:flex} }
.sidebar-brand { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); }
.sidebar-brand-text { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.sidebar-brand-text strong { font-size:15px; letter-spacing:.3px; }
.sidebar-brand-text span { font-size:11px; color:var(--text-3); white-space:nowrap; }
.nav { flex:1; overflow-y:auto; padding:var(--sp-2) var(--sp-3); display:flex; flex-direction:column; gap:2px; }
.nav-group { font-size:11px; color:var(--text-3); padding:var(--sp-4) var(--sp-3) var(--sp-1); letter-spacing:.6px; }
.nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-sm);
  color:var(--text-2); font-size:14px; cursor:pointer; user-select:none;
  transition:background .12s,color .12s;
}
.nav-item svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-item:hover { background:var(--surface-2); color:var(--text); }
.nav-item.active { background:var(--brand-50); color:var(--brand-600); font-weight:600; }
@media (prefers-color-scheme:dark){ .nav-item.active{ color:#8fb2ff; } }
.sidebar-foot { padding:var(--sp-3); border-top:1px solid var(--line); }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:var(--sp-2); border-radius:var(--r-sm); cursor:pointer; }
.sidebar-user:hover { background:var(--surface-2); }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-100); color:var(--brand-600); font-weight:600; font-size:14px; flex:none; }
.sidebar-user-meta { min-width:0; line-height:1.3; }
.sidebar-user-meta strong { display:block; font-size:13px; }
.sidebar-user-meta span { display:block; font-size:11px; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.topbar {
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  display:flex; align-items:center; gap:var(--sp-3); padding:0 var(--sp-5);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
@media (max-width:480px){ .topbar{padding:0 var(--sp-3)} }
.topbar-title { font-size:16px; font-weight:650; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-actions { display:flex; align-items:center; gap:var(--sp-2); }
.topbar-shop { display:flex; align-items:center; gap:var(--sp-2); }

.view { padding:var(--sp-5); min-width:0; }
@media (max-width:768px) {
  .view { padding:var(--sp-3) var(--sp-3) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }
}

.icon-btn {
  width:36px; height:36px; display:grid; place-items:center; border:none; cursor:pointer;
  background:transparent; border-radius:var(--r-sm); color:var(--text-2);
}
.icon-btn:hover { background:var(--surface-3); color:var(--text); }
.icon-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.only-mobile { display:grid; }
@media (min-width:1025px){ .only-mobile{display:none} }

/* 移动端底部 Tab */
.tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex;
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 2px; color:var(--text-3); font-size:10.5px; cursor:pointer;
  background:none; border:none; min-height:var(--tabbar-h);
}
.tabbar-item svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tabbar-item.active { color:var(--brand-600); font-weight:600; }
.tabbar-item.fab { position:relative; }
.tabbar-item.fab .fab-dot {
  width:38px; height:38px; border-radius:13px; display:grid; place-items:center; margin-top:-14px;
  background:linear-gradient(135deg,var(--brand-500),#6b4dff); color:#fff;
  box-shadow:0 6px 16px rgba(47,107,255,.4);
}
.tabbar-item.fab.active .fab-dot { background:linear-gradient(135deg,var(--brand-600),#5a3ae0); }
@media (min-width:1025px){ .tabbar{display:none} }

/* 抽屉（移动端菜单） */
.drawer-mask { position:fixed; inset:0; background:rgba(8,14,26,.5); z-index:200; }
.drawer {
  position:fixed; top:0; bottom:0; left:0; width:270px; z-index:201;
  background:var(--surface); display:flex; flex-direction:column;
  animation:slideIn .2s ease;
}
@keyframes slideIn{ from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* ---------- 4. 通用组件 ---------- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.card-pad { padding:var(--sp-5); }
@media (max-width:768px){ .card-pad{padding:var(--sp-4)} }
.card-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
@media (max-width:768px){ .card-head{padding:var(--sp-3) var(--sp-4)} }
.card-title { font-size:15px; font-weight:650; margin:0; display:flex; align-items:center; gap:8px; }
.card-sub { font-size:12px; color:var(--text-3); font-weight:400; }

.grid { display:grid; gap:var(--sp-4); }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-auto { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
@media (max-width:1024px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-auto{grid-template-columns:1fr}
}

.row { display:flex; align-items:center; gap:var(--sp-3); }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.col { display:flex; flex-direction:column; }
.wrap { flex-wrap:wrap; }
.grow { flex:1; min-width:0; }
.spacer { flex:1; }
.muted { color:var(--text-3); }
.dim { color:var(--text-2); }
.small { font-size:12px; }
.tiny { font-size:11px; }
.bold { font-weight:650; }
.center { text-align:center; }
.right { text-align:right; }
.nowrap { white-space:nowrap; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.mb-2{margin-bottom:var(--sp-2)} .mb-3{margin-bottom:var(--sp-3)} .mb-4{margin-bottom:var(--sp-4)}
.num { font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:-.2px; }
.hidden{display:none !important}

/* 按钮 */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:38px; padding:0 16px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--text); font-size:14px; font-weight:500;
  cursor:pointer; white-space:nowrap; transition:.14s; user-select:none;
}
.btn:hover { border-color:var(--text-3); background:var(--surface-2); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-primary { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn-primary:hover { background:var(--brand-700); border-color:var(--brand-700); }
.btn-success { background:var(--income); border-color:var(--income); color:#fff; }
.btn-success:hover { filter:brightness(.93); }
.btn-danger { background:var(--expense); border-color:var(--expense); color:#fff; }
.btn-danger:hover { filter:brightness(.93); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-3); color:var(--text); }
.btn-sm { height:30px; padding:0 10px; font-size:12.5px; border-radius:6px; }
.btn-sm svg { width:14px; height:14px; }
.btn-lg { height:46px; padding:0 22px; font-size:15px; }
.btn-block { width:100%; }
.btn-icon { width:34px; padding:0; }
.btn-icon.btn-sm { width:28px; }

/* 表单 */
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-label { font-size:13px; color:var(--text-2); font-weight:500; display:flex; align-items:center; gap:4px; }
.field-label .req { color:var(--expense); }
.field-hint { font-size:11.5px; color:var(--text-3); line-height:1.45; }
.field-err { font-size:11.5px; color:var(--expense); }

.input, .select, .textarea {
  width:100%; height:40px; padding:0 12px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--surface); color:var(--text);
  transition:border-color .14s, box-shadow .14s; outline:none; min-width:0;
}
.textarea { height:auto; min-height:80px; padding:10px 12px; resize:vertical; line-height:1.5; }
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--brand-500); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 15%, transparent);
}
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
.input:disabled, .select:disabled { background:var(--surface-3); color:var(--text-3); cursor:not-allowed; }
.input.is-err, .select.is-err { border-color:var(--expense); }
.input-money { text-align:right; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:16px; font-weight:600; }
.select { appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b97a8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:15px; }

.form-grid { display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid .span2 { grid-column:1 / -1; }
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} .form-grid .span2{grid-column:auto} }

/* 金额输入组 */
.money-group { display:flex; align-items:baseline; gap:6px; }
.money-group .cur { font-size:13px; color:var(--text-3); font-family:var(--font-num); }

/* 分段控件 */
.segmented { display:inline-flex; background:var(--surface-3); border-radius:var(--r-sm); padding:3px; gap:2px; }
.segmented button {
  border:none; background:transparent; padding:6px 14px; border-radius:6px;
  font-size:13px; color:var(--text-2); cursor:pointer; transition:.14s; white-space:nowrap;
}
.segmented button.active { background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow-1); }

/* 店铺切换器 */
.shop-switch { display:flex; align-items:center; gap:6px; min-width:0; }
.shop-switch .select { height:34px; border-radius:var(--r-full); padding-left:12px; font-size:13px; max-width:190px; }
@media (max-width:768px){
  .shop-switch .select { max-width:112px; padding-left:10px; padding-right:26px; font-size:12.5px; }
  .topbar-title { font-size:15px; }
}

/* 徽标 / 标签 */
.tag {
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px;
  border-radius:5px; font-size:11.5px; font-weight:500; background:var(--surface-3); color:var(--text-2);
}
.tag-income { background:var(--income-bg); color:var(--income); }
.tag-expense { background:var(--expense-bg); color:var(--expense); }
.tag-brand { background:var(--brand-50); color:var(--brand-600); }
.tag-warn { background:var(--warn-bg); color:var(--warn); }
.tag-info { background:var(--info-bg); color:var(--info); }
.tag-purple { background:var(--card-balance-bg); color:var(--card-balance); }
.tag-off { background:var(--surface-3); color:var(--text-3); }
@media (prefers-color-scheme:dark){ .tag-brand{color:#8fb2ff} }

/* 统计卡 */
.stat {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:5px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-1);
}
.stat::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line-strong);
}
.stat.income::after{background:var(--income)} .stat.expense::after{background:var(--expense)}
.stat.brand::after{background:var(--brand-500)} .stat.purple::after{background:var(--card-balance)}
.stat-label { font-size:12.5px; color:var(--text-2); display:flex; align-items:center; gap:6px; }
.stat-value { font-size:25px; font-weight:700; font-family:var(--font-num);
  font-variant-numeric:tabular-nums; letter-spacing:-.6px; line-height:1.2; }
.stat.income .stat-value{color:var(--income)} .stat.expense .stat-value{color:var(--expense)}
.stat.purple .stat-value{color:var(--card-balance)}
.stat-sub { font-size:11.5px; color:var(--text-3); }
@media (max-width:640px){
  .stat{padding:var(--sp-3) var(--sp-4)}
  .stat-value{font-size:20px}
}

/* 表格 */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th {
  text-align:left; font-weight:600; color:var(--text-2); font-size:12.5px;
  padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--surface-2); position:sticky; top:0; z-index:1;
}
table.tbl td { padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tbody tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover { background:var(--surface-2); }
table.tbl .r { text-align:right; }
table.tbl .num { font-size:13.5px; }
table.tbl tfoot td { padding:11px 12px; font-weight:700; background:var(--surface-2); border-top:2px solid var(--line-strong); }
.tbl-actions { display:flex; gap:4px; justify-content:flex-end; }
.link-btn { background:none; border:none; color:var(--brand-600); cursor:pointer; padding:2px 6px; font-size:12.5px; border-radius:5px; }
.link-btn:hover { background:var(--brand-50); }
.link-btn.danger { color:var(--expense); }
.link-btn.danger:hover { background:var(--expense-bg); }

/* 空状态 / 加载 */
.empty { padding:var(--sp-8) var(--sp-4); text-align:center; color:var(--text-3); }
.empty-icon { font-size:34px; opacity:.5; margin-bottom:var(--sp-2); }
.empty-text { font-size:13.5px; }
.skeleton { background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);
  background-size:200% 100%; animation:shimmer 1.3s infinite; border-radius:6px; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.spinner { width:18px; height:18px; border:2px solid var(--line-strong); border-top-color:var(--brand-500);
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-block { display:flex; align-items:center; justify-content:center; gap:10px; padding:var(--sp-8); color:var(--text-3); font-size:13px; }

/* 页面标题区 */
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-4); flex-wrap:wrap; }
.page-title { font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px; }
.page-desc { font-size:13px; color:var(--text-3); margin:4px 0 0; }

/* 筛选栏 */
.filters { display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end; }
.filters .field { min-width:132px; }
.filters .field.grow { flex:1; min-width:180px; }
@media (max-width:640px){
  .filters { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
  .filters .field { min-width:0; }
  .filters .field.grow { grid-column:1/-1; min-width:0; }
  .filters .filter-actions { grid-column:1/-1; display:flex; gap:var(--sp-2); }
  .filters .filter-actions .btn { flex:1; }
}

/* ---------- 5. 记账专用组件 ---------- */

/* 首页英雄区 */
.hero {
  background:linear-gradient(135deg,#1f57e0,#6b4dff); color:#fff;
  border-radius:var(--r-xl); padding:var(--sp-5) var(--sp-6); position:relative; overflow:hidden;
  box-shadow:0 10px 28px rgba(47,107,255,.25);
}
.hero::after {
  content:''; position:absolute; right:-40px; top:-60px; width:240px; height:240px;
  border-radius:50%; background:rgba(255,255,255,.09);
}
.hero-head { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); position:relative; z-index:1; flex-wrap:wrap; }
.hero-title { font-size:15px; opacity:.9; margin:0; font-weight:500; }
.hero-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); position:relative; z-index:1; margin-top:var(--sp-4); }
.hero-item span { display:block; font-size:12px; opacity:.82; margin-bottom:4px; }
.hero-item strong { font-size:26px; font-weight:700; font-family:var(--font-num);
  font-variant-numeric:tabular-nums; letter-spacing:-.8px; }
@media (max-width:640px){
  .hero{padding:var(--sp-4)}
  .hero-grid{grid-template-columns:1fr 1fr; gap:var(--sp-3)}
  .hero-item:last-child{grid-column:1/-1; padding-top:var(--sp-2); border-top:1px solid rgba(255,255,255,.2)}
  .hero-item strong{font-size:21px}
}

/* 快捷入口 */
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
@media (max-width:640px){ .quick-grid{grid-template-columns:repeat(4,1fr); gap:var(--sp-2)} }
.quick {
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:var(--sp-4) var(--sp-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  cursor:pointer; transition:.15s; text-align:center;
}
.quick:hover { border-color:var(--brand-500); transform:translateY(-2px); box-shadow:var(--shadow-2); }
.quick-ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; }
.quick-ico svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.quick-label { font-size:12.5px; font-weight:500; }
@media (max-width:640px){ .quick-label{font-size:11px} .quick{padding:var(--sp-3) 4px} .quick-ico{width:36px;height:36px} }

/* 店长看板：只保留 4 个录单入口，图标与点击区域都放大 */
.quick-grid-lg { grid-template-columns:repeat(2,1fr); gap:var(--sp-4); }
/* 收入 / 支出 图标页：2 个大图标水平居中，大小与 quick-grid-lg 一致 */
.quick-page { display:flex; align-items:flex-start; justify-content:center; padding-top:var(--sp-4); }
.quick-row { display:flex; justify-content:center; align-items:stretch; gap:var(--sp-5); flex-wrap:wrap; }
.quick-row .quick { width:148px; padding:var(--sp-6) var(--sp-3); border-radius:var(--r-lg); }
.quick-row .quick-ico { width:72px; height:72px; border-radius:22px; }
.quick-row .quick-ico svg { width:36px; height:36px; stroke-width:1.7; }
.quick-row .quick-label { font-size:15.5px; font-weight:600; margin-top:2px; }
.quick-row .quick:active { transform:scale(.97); }
@media (max-width:400px){
  .quick-row { gap:var(--sp-3); }
  .quick-row .quick { width:128px; padding:var(--sp-5) var(--sp-2); }
  .quick-row .quick-ico { width:62px; height:62px; border-radius:19px; }
  .quick-row .quick-ico svg { width:31px; height:31px; }
  .quick-row .quick-label { font-size:14.5px; }
}
.quick-grid-lg .quick { padding:var(--sp-6) var(--sp-4); border-radius:var(--r-lg); }
.quick-grid-lg .quick-ico { width:72px; height:72px; border-radius:22px; }
.quick-grid-lg .quick-ico svg { width:36px; height:36px; stroke-width:1.7; }
.quick-grid-lg .quick-label { font-size:15.5px; font-weight:600; margin-top:2px; }
.quick-grid-lg .quick:active { transform:scale(.97); }
@media (min-width:768px){ .quick-grid-lg { grid-template-columns:repeat(4,1fr); } }
@media (max-width:400px){
  .quick-grid-lg { gap:var(--sp-3); }
  .quick-grid-lg .quick { padding:var(--sp-5) var(--sp-3); }
  .quick-grid-lg .quick-ico { width:62px; height:62px; border-radius:19px; }
  .quick-grid-lg .quick-ico svg { width:31px; height:31px; }
  .quick-grid-lg .quick-label { font-size:14.5px; }
}

/* 收支双栏入口（收入 / 支出） */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.duo-card { border-radius:var(--r-lg); padding:var(--sp-5); cursor:pointer; color:#fff;
  position:relative; overflow:hidden; transition:.16s; border:none; text-align:left; }
.duo-card.income { background:linear-gradient(135deg,#0f9d63,#13b47a); box-shadow:0 8px 20px rgba(15,157,99,.25); }
.duo-card.expense { background:linear-gradient(135deg,#e0483d,#f2714a); box-shadow:0 8px 20px rgba(224,72,61,.25); }
.duo-card:hover { transform:translateY(-2px); }
.duo-card::after { content:''; position:absolute; right:-30px; bottom:-40px; width:130px; height:130px;
  border-radius:50%; background:rgba(255,255,255,.12); }
.duo-card h4 { margin:0 0 4px; font-size:16px; position:relative; }
.duo-card p { margin:0; font-size:12px; opacity:.85; position:relative; line-height:1.5; }
.duo-ico { position:absolute; right:16px; top:16px; opacity:.3; }
.duo-ico svg { width:40px; height:40px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:480px){ .duo-card{padding:var(--sp-4)} }

/* 明细行（收银录入分组） */
.money-section { border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.money-section-head {
  padding:9px 14px; background:var(--surface-2); border-bottom:1px solid var(--line);
  font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.money-section-head .note { font-size:11.5px; color:var(--text-3); font-weight:400; }
.money-sub { margin-left:auto; margin-right:12px; font-size:12px; color:var(--text-2); white-space:nowrap; }
.money-sub b { font-family:var(--font-num); font-size:14px; color:var(--brand-600); font-weight:700; }
.money-section-body { padding:var(--sp-4); display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* 校验提示条 */
.check-bar {
  display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-radius:var(--r-sm);
  font-size:12.5px; line-height:1.5; margin-top:var(--sp-2);
}
.check-bar svg { width:15px; height:15px; flex:none; margin-top:1.5px; fill:none; stroke:currentColor; stroke-width:2; }
.check-bar.ok { background:var(--income-bg); color:var(--income); }
.check-bar.info { background:var(--info-bg); color:var(--info); }
.check-bar.warn { background:var(--warn-bg); color:var(--warn); }
.check-bar.err { background:var(--expense-bg); color:var(--expense); }

/* 明细行编辑器（送货单） */
.lines { display:flex; flex-direction:column; gap:var(--sp-2); }
.line {
  display:grid; grid-template-columns:34px 1fr 1.4fr 92px 88px 96px 34px;
  gap:var(--sp-2); align-items:center; padding:var(--sp-2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
}
.line-head { background:transparent; border:none; padding:0 4px; font-size:11.5px;
  color:var(--text-3); font-weight:600; }
.line .input { height:34px; font-size:13px; padding:0 8px; }
.line .input-money { font-size:13.5px; }
.line-seq { text-align:center; font-size:12px; color:var(--text-3); font-family:var(--font-num); }
@media (max-width:900px){
  .line { grid-template-columns:1fr 1fr; gap:var(--sp-2); padding:var(--sp-3);
    background:var(--surface-2); position:relative; }
  /* 栅格子项默认 min-width:auto，会被输入框内容宽度撑破容器，导致整页横向溢出 */
  .line > * { min-width:0; }
  .line-head { display:none; }
  .line-seq { position:absolute; top:6px; right:38px; }
  .line .f-cat,.line .f-name,.line .f-unit,.line .f-qty,.line .f-price,.line .f-amt,.line .f-del {
    display:flex; flex-direction:column; gap:4px; }
  .line .f-del { position:absolute; top:4px; right:4px; }
  .line .f-name,.line .f-amt { grid-column:1/-1; }
  .line::before { content:attr(data-seq) ' ·'; position:absolute; top:8px; left:12px; font-size:11px; color:var(--text-3); }
  .line .f-unit { grid-column:1/-1; }
}
.lines-total {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); background:var(--brand-50); border-radius:var(--r-md);
  margin-top:var(--sp-3); flex-wrap:wrap;
}
.lines-total .v { font-size:22px; font-weight:700; font-family:var(--font-num); color:var(--brand-600); }

/* 九宫格凭证 */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:var(--sp-2); }
.photo-cell { position:relative; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-3); cursor:zoom-in; }
.photo-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-cell .del {
  position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%;
  background:rgba(8,14,26,.66); color:#fff; border:none; cursor:pointer; display:grid; place-items:center;
  font-size:15px; line-height:1; backdrop-filter:blur(4px);
}
.photo-cell .del:hover { background:var(--expense); }
.photo-add {
  aspect-ratio:1; border:1.5px dashed var(--line-strong); border-radius:var(--r-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-3); cursor:pointer; background:var(--surface-2); font-size:11.5px; transition:.14s;
}
.photo-add:hover { border-color:var(--brand-500); color:var(--brand-500); background:var(--brand-50); }
.photo-add svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* 登录页 */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--sp-5);
  background:linear-gradient(160deg,#1f57e0 0%,#6b4dff 55%,#8b3ad0 100%); }
.login-card { width:100%; max-width:392px; background:var(--surface); border-radius:var(--r-xl);
  padding:var(--sp-7) var(--sp-6); box-shadow:var(--shadow-3); }
@media (max-width:480px){ .login-card{padding:var(--sp-6) var(--sp-4)} }
.login-brand { text-align:center; margin-bottom:var(--sp-6); }
.login-logo { width:56px; height:56px; border-radius:16px; margin:0 auto var(--sp-3);
  background:linear-gradient(135deg,var(--brand-500),#6b4dff); color:#fff; display:grid; place-items:center;
  font-size:26px; font-weight:700; box-shadow:0 8px 20px rgba(47,107,255,.35); }
.login-brand h1 { margin:0; font-size:21px; font-weight:700; letter-spacing:-.3px; }
.login-brand p { margin:5px 0 0; font-size:12.5px; color:var(--text-3); }
.login-accounts { margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px dashed var(--line); }
.remember-row {
  display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  font-size:13px; color:var(--text-2); margin-top:calc(-1 * var(--sp-2));
}
.remember-row input[type=checkbox] { width:16px; height:16px; accent-color:var(--brand-600); cursor:pointer; flex:none; }
.remember-row .tag { margin-left:auto; }
.login-accounts h5 { margin:0 0 var(--sp-2); font-size:12px; color:var(--text-3); font-weight:600; }
.acct-chip { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:8px 11px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  cursor:pointer; margin-bottom:6px; font-size:12.5px; text-align:left; transition:.14s; }
.acct-chip:hover { border-color:var(--brand-500); background:var(--brand-50); }
.acct-chip code { font-family:var(--font-num); color:var(--brand-600); font-size:12px; }

/* 图表 */
.chart-box { width:100%; overflow:hidden; }
.chart-box svg { display:block; width:100%; height:auto; }
.chart-legend { display:flex; gap:var(--sp-4); flex-wrap:wrap; font-size:12px; color:var(--text-2); padding:0 var(--sp-2) var(--sp-2); }
.chart-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.chart-tip { position:fixed; z-index:900; background:var(--text); color:var(--bg);
  padding:7px 10px; border-radius:6px; font-size:11.5px; pointer-events:none; white-space:nowrap;
  box-shadow:var(--shadow-2); font-family:var(--font-num); }
.chart-empty { display:grid; place-items:center; height:180px; color:var(--text-3); font-size:13px; }

/* 灯箱 */
.lightbox { position:fixed; inset:0; z-index:1000; background:rgba(6,10,20,.94);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--sp-3); padding:var(--sp-5); }
.lightbox img { max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--r-sm); }
.lightbox-bar { display:flex; align-items:center; gap:var(--sp-3); color:#fff; font-size:13px; }
.lightbox-bar button { background:rgba(255,255,255,.14); border:none; color:#fff; width:38px; height:38px;
  border-radius:50%; cursor:pointer; font-size:17px; display:grid; place-items:center; }
.lightbox-bar button:hover { background:rgba(255,255,255,.26); }

/* Toast */
.toast-host { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:1200;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
.toast {
  padding:10px 16px; border-radius:var(--r-sm); background:var(--text); color:var(--bg);
  font-size:13.5px; box-shadow:var(--shadow-3); display:flex; align-items:center; gap:8px;
  animation:toastIn .2s ease; max-width:100%;
}
.toast svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.toast.ok { background:var(--income); color:#fff; }
.toast.err { background:var(--expense); color:#fff; }
.toast.warn { background:var(--warn); color:#fff; }
@keyframes toastIn{ from{opacity:0; transform:translateY(-12px)} to{opacity:1; transform:none} }

/* Modal */
.modal-host { position:fixed; inset:0; z-index:1100; display:grid; place-items:center;
  padding:var(--sp-4); background:rgba(8,14,26,.55); backdrop-filter:blur(3px); overflow-y:auto; }
.modal { width:100%; max-width:520px; background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); animation:modalIn .18s ease; max-height:92vh; display:flex; flex-direction:column; margin:auto; }
.modal.wide { max-width:860px; }
@keyframes modalIn{ from{opacity:0; transform:scale(.96) translateY(8px)} to{opacity:1; transform:none} }
.modal-head { padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.modal-head h3 { margin:0; font-size:16px; font-weight:650; }
.modal-body { padding:var(--sp-5); overflow-y:auto; flex:1; }
.modal-foot { padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:var(--sp-2); flex-wrap:wrap; }
@media (max-width:480px){
  .modal-foot .btn { flex:1; }
  .modal-body { padding:var(--sp-4); }
}

/* 详情描述列表 */
.dl { display:grid; grid-template-columns:auto 1fr; gap:9px var(--sp-4); font-size:13.5px; align-items:baseline; }
.dl dt { color:var(--text-3); font-size:12.5px; white-space:nowrap; }
.dl dd { margin:0; word-break:break-all; }

/* 提示条 */
.alert { display:flex; gap:9px; padding:11px 14px; border-radius:var(--r-sm); font-size:13px; line-height:1.55; }
.alert svg { width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2; }
.alert-info { background:var(--info-bg); color:var(--info); }
.alert-warn { background:var(--warn-bg); color:var(--warn); }
.alert-err  { background:var(--expense-bg); color:var(--expense); }
.alert-ok   { background:var(--income-bg); color:var(--income); }
.alert strong { display:block; margin-bottom:2px; }

/* 金额着色 */
.amt-in  { color:var(--income); font-weight:600; }
.amt-out { color:var(--expense); font-weight:600; }
.amt-card{ color:var(--card-balance); font-weight:600; }

/* ---------- 选项选择器（单位 / 商品类别） ---------- */
.tagsel { position:relative; min-width:0; }
.tagsel-trigger {
  display:flex; align-items:center; gap:4px; width:100%; height:34px; padding:0 8px;
  border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface);
  color:var(--text); font-size:13px; cursor:pointer; text-align:left; min-width:0;
  transition:border-color .14s, box-shadow .14s;
}
.tagsel-trigger:hover { border-color:var(--brand-500); }
.tagsel-trigger:focus-visible { outline:none; border-color:var(--brand-500);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-500) 15%, transparent); }
.tagsel-trigger.is-empty { color:var(--text-3); }
.tagsel-trigger .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tagsel-trigger .caret { flex:none; width:12px; height:12px; opacity:.45;
  stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.tagsel.is-required .tagsel-trigger.is-empty { border-color:var(--expense); }

/* 选项弹层 */
.picker-search { position:relative; margin-bottom:var(--sp-3); }
.picker-search .input { padding-left:34px; }
.picker-search .mag { position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--text-3); pointer-events:none;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.picker-list { display:flex; flex-direction:column; gap:2px; max-height:46vh; overflow-y:auto;
  margin:0 calc(-1 * var(--sp-1)); padding:0 var(--sp-1); }
.picker-opt {
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--r-sm);
  cursor:pointer; border:1px solid transparent; background:none; width:100%; text-align:left;
  font-size:14.5px; color:var(--text); transition:.12s;
}
.picker-opt:hover, .picker-opt.is-active { background:var(--brand-50); border-color:var(--brand-200); }
.picker-opt .chip {
  display:inline-flex; align-items:center; padding:3px 11px; border-radius:var(--r-full);
  background:var(--surface-3); font-size:13.5px; flex:none; min-width:0;
}
.picker-opt.is-current { background:var(--income-bg); }
.picker-opt.is-current .chip { background:#fff; color:var(--income); font-weight:600; }
.picker-opt .mark { margin-left:auto; color:var(--income); flex:none; width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.picker-create {
  display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:var(--r-sm);
  border:1px dashed var(--brand-500); background:var(--brand-50); color:var(--brand-600);
  cursor:pointer; width:100%; text-align:left; font-size:14.5px; font-weight:600; margin-bottom:var(--sp-2);
}
.picker-create .plus { width:16px; height:16px; flex:none; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; }
.picker-empty { padding:var(--sp-5) 0; text-align:center; color:var(--text-3); font-size:13px; }
.picker-hint { font-size:11.5px; color:var(--text-3); margin-top:var(--sp-3); text-align:center; }

/* 移动端：选项弹层从底部弹出，贴近系统选择器手感 */
@media (max-width:768px){
  .modal.picker-modal { max-width:none; width:100%; align-self:flex-end; margin:0;
    border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:88vh; }
  .picker-list { max-height:52vh; }
  .picker-opt, .picker-create { padding:14px 12px; font-size:15.5px; }
}

/* 分页 */
.pager { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--line); font-size:12.5px; color:var(--text-3); flex-wrap:wrap; }
@media (max-width:640px){ .pager{padding:var(--sp-3)} }
.pager-btns { display:flex; gap:6px; align-items:center; }

/* ============================================================
   原生 App 手感（配合 PWA / WebView 容器）
   ============================================================ */

/* 禁双指缩放与双击放大：touch-action 交给脚本用 preventDefault 处理 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overscroll-behavior-y: none; }

/* 刘海屏 / 手势条安全区 */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
.topbar { padding-top: var(--sat); height: calc(var(--topbar-h) + var(--sat)); }
.view {
  padding-left: calc(var(--sp-5) + var(--sal));
  padding-right: calc(var(--sp-5) + var(--sar));
  padding-bottom: calc(var(--tabbar-h) + var(--sab) + 16px);
}
.tabbar { padding-bottom: var(--sab); min-height: calc(var(--tabbar-h) + var(--sab)); }
.tabbar-item { min-height: var(--tabbar-h); }
.drawer { padding-top: var(--sat); padding-bottom: var(--sab); }
.modal-host { padding-top: calc(var(--sab) + var(--sp-4)); padding-bottom: calc(var(--sab) + var(--sp-4)); }
@media (max-width:768px){
  .view {
    padding-left: calc(var(--sp-3) + var(--sal));
    padding-right: calc(var(--sp-3) + var(--sar));
  }
  .toast-host { top: calc(var(--sat) + 10px); }
  /* 底部弹出的选项层落在手势条上方 */
  .modal.picker-modal { padding-bottom: var(--sab); }
  .picker-list { padding-bottom: calc(var(--sp-2) + var(--sab)); }
}

/* 独立 App 模式下不需要浏览器的手势回弹 */
@media (display-mode: standalone) {
  body { -webkit-user-select: none; user-select: none; }
  input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
}

/* 独立模式下顶栏不再需要悬停反馈 */
@media (display-mode: standalone) {
  .nav-item:hover, .tagsel-trigger:hover { background: inherit; }
}

/* 打印 */
@media print {
  .sidebar,.topbar,.tabbar,.toast-host,.no-print { display:none !important; }
  .app { display:block; }
  .view { padding:0; }
  .card { box-shadow:none; border-color:#ccc; break-inside:avoid; }
}