/* ==========================================================
   文具之家财务管理系统 - 样式表
   ========================================================== */
:root {
  --brand: #4f6ef7;
  --brand-2: #3a52d8;
  --brand-soft: #eaf1ff;
  /* 按钮专用底色：浅色主题下必须是"明显浅灰"，不能纯白，
     否则白底页面上按钮像没样式；hover 用更深的蓝灰，反馈清晰 */
  --btn-bg: #f1f3f8;
  --btn-hover: #e4e9f5;
  --green: #17a673;
  --red: #e5484d;
  --orange: #f59e0b;
  --purple: #8b5cf6;
  --cyan: #06b6d4;

  /* 深蓝紫主渐变：按钮 / logo / 头像 / 强调条统一走这一条 */
  --grad-brand: linear-gradient(135deg, #4f6ef7 0%, #6d5cf3 52%, #8b5cf6 100%);
  --grad-soft: linear-gradient(135deg, rgba(79, 110, 247, .14), rgba(139, 92, 246, .14));

  --bg: #eef2fb;
  --panel: #ffffff;
  --panel-2: #fafbfe;
  --text: #1f2937;
  --text-2: #4b5563;
  --muted: #8b93a7;
  --border: #e6e9f0;
  --border-2: #dfe3ec;

  /* ---- 毛玻璃三层面板 ----
     glass   = 卡片 / 侧栏 / 顶栏等大块面板
     glass-2 = 面板内的次级表面（表头、行悬停、移动端卡片行）
     glass-3 = 玻璃面板上的输入控件，要比面板更实一点才看得清 */
  --glass: rgba(255, 255, 255, .82);
  --glass-2: rgba(255, 255, 255, .70);
  --glass-3: rgba(255, 255, 255, .94);
  --glass-brd: rgba(255, 255, 255, .85);
  --glass-brd-2: rgba(148, 163, 184, .30);
  --glass-hi: rgba(255, 255, 255, .80);
  --blur: 18px;

  --shadow: 0 2px 6px rgba(30, 41, 90, .06), 0 18px 44px rgba(30, 41, 90, .10);
  --shadow-sm: 0 1px 2px rgba(30, 41, 90, .05), 0 8px 22px rgba(30, 41, 90, .07);
  --radius: 16px;
  --sidebar-w: 224px;
}

[data-theme="dark"] {
  --brand: #6f93ff;
  --brand-2: #4a74e8;
  --brand-soft: #1b2540;
  --btn-bg: rgba(30, 41, 63, .92);
  --btn-hover: rgba(79, 110, 247, .22);
  --green: #2bb673;
  --red: #f05a5f;
  --orange: #f7b32b;
  --grad-brand: linear-gradient(135deg, #5b7cfa 0%, #7c5cf5 55%, #9b6df7 100%);
  --grad-soft: linear-gradient(135deg, rgba(91, 124, 250, .20), rgba(155, 109, 247, .20));

  --bg: #0b1120;
  --panel: #151c2c;
  --panel-2: #1a2233;
  --text: #e6e9f0;
  --text-2: #b9c0cf;
  --muted: #7c8698;
  --border: #232c3f;
  --border-2: #2b3550;

  --glass: rgba(21, 28, 44, .78);
  --glass-2: rgba(148, 163, 184, .14);
  --glass-3: rgba(30, 41, 63, .92);
  --glass-brd: rgba(148, 163, 184, .22);
  --glass-brd-2: rgba(148, 163, 184, .24);
  --glass-hi: rgba(255, 255, 255, .08);
  --blur: 18px;

  --shadow: 0 2px 6px rgba(0, 0, 0, .32), 0 18px 44px rgba(0, 0, 0, .30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 22px rgba(0, 0, 0, .26);
}

/* 不支持 backdrop-filter 的浏览器：直接退化成高不透明度实色，
   否则半透明面板叠在渐变上会糊成一片看不清字 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass: rgba(255, 255, 255, .94);
    --glass-2: rgba(255, 255, 255, .94);
    --glass-3: #ffffff;
    --glass-brd: #e6e9f0;
  }
  [data-theme="dark"] {
    --glass: rgba(21, 28, 44, .94);
    --glass-2: rgba(26, 34, 51, .94);
    --glass-3: #1a2233;
    --glass-brd: #2b3550;
  }
}

* { box-sizing: border-box; }

/* 禁止 iOS 横屏时自动放大字号 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; }

/* html 兜一层底色：渐变还没渲染完时不至于白屏 */
html { min-height: 100%; background: var(--bg); }

body {
  /* 背景必须透明：负 z-index 的伪元素在绘制顺序里排在 body 背景之前，
     body 若带不透明背景，::before 会被整个盖住，毛玻璃也无从模糊 */
  background: transparent;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* 固定渐变背景层：三团柔光 + 一层底色。
   用 fixed 而不是 background-attachment:fixed——后者在 iOS Safari 上会错位/整片拉伸 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(880px 520px at 8% -10%, rgba(99, 102, 241, .30), transparent 62%),
    radial-gradient(720px 460px at 92% 2%,  rgba(56, 189, 248, .24), transparent 62%),
    radial-gradient(900px 620px at 52% 112%, rgba(139, 92, 246, .26), transparent 60%),
    linear-gradient(160deg, #eef2ff 0%, #e9eefb 42%, #f2f5ff 100%);
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(880px 520px at 8% -10%, rgba(79, 110, 247, .28), transparent 62%),
    radial-gradient(720px 460px at 92% 2%,  rgba(14, 165, 233, .18), transparent 62%),
    radial-gradient(900px 620px at 52% 112%, rgba(139, 92, 246, .24), transparent 60%),
    linear-gradient(160deg, #0e1424 0%, #0b1120 48%, #101828 100%);
}

a { color: var(--brand); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text); }
p { margin: 0 0 8px; }
code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------- 布局 ---------------- */
.layout { display: flex; min-height: 100vh; }

/* 玻璃基类：任何想套毛玻璃的块直接加 .glass 即可 */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-brd-2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
}

.sidebar {
  width: var(--sidebar-w);
  flex: none;
  background: var(--glass);
  border-right: 1px solid var(--glass-brd-2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
}

.brand { display: flex; gap: 10px; align-items: center; padding: 16px 16px 14px; border-bottom: 1px solid var(--glass-brd-2); }
.brand-logo {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: var(--grad-brand);
  color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 18px;
  box-shadow: 0 4px 12px rgba(79, 110, 247, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.brand-logo.big { width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: 11px; color: var(--muted); }

.menu { flex: 1; overflow-y: auto; padding: 10px 10px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; position: relative;
  padding: 9px 12px; border-radius: 10px; color: var(--text-2);
  margin-bottom: 2px; font-size: 13.5px; transition: .15s;
}
.menu-item:hover { background: var(--glass-2); color: var(--text); }
.menu-item.active {
  background: var(--grad-soft);
  color: var(--brand);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(79, 110, 247, .18);
}
/* 选中项左侧的渐变竖条：绝对定位，不占布局，不影响文字排版 */
.menu-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--grad-brand);
}
.side-foot { padding: 10px; border-top: 1px solid var(--glass-brd-2); }

.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
  height: 60px;
  background: var(--glass);
  border-bottom: 1px solid var(--glass-brd-2);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  position: sticky; top: 0; z-index: 30;
}
.topbar-title h1 { font-size: 17px; }
.topbar-title p { font-size: 12px; color: var(--muted); margin: 0; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--grad-brand);
  color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600;
  box-shadow: 0 3px 10px rgba(79, 110, 247, .30), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.u-info { display: flex; flex-direction: column; line-height: 1.25; }
.u-info b { font-size: 13px; }
.u-info i { font-style: normal; font-size: 11px; color: var(--muted); }

.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--glass-brd-2);
  background: var(--glass-2); color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.icon-btn:hover { background: var(--glass); color: var(--brand); }

.content { padding: 18px 20px 30px; flex: 1; }
.foot { padding: 14px 20px 24px; color: var(--muted); font-size: 12px; text-align: center; }

.mask {
  display: none; position: fixed; inset: 0; z-index: 39;
  background: rgba(15, 23, 42, .38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.only-mobile { display: none; }

/* ---------------- 组件 ---------------- */
.alert {
  padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; font-size: 13.5px;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.alert-success { background: rgba(23, 166, 115, .13); color: #0f8a5f; border-color: rgba(23, 166, 115, .3); }
.alert-error { background: rgba(229, 72, 77, .12); color: #c9383d; border-color: rgba(229, 72, 77, .3); }
.alert-info { background: rgba(79, 110, 247, .12); color: var(--brand-2); border-color: rgba(79, 110, 247, .28); }
.alert-warn { background: rgba(245, 158, 11, .14); color: #b45309; border-color: rgba(245, 158, 11, .3); }

.card {
  background: var(--glass); border: 1px solid var(--glass-brd-2); border-radius: var(--radius);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
  margin-bottom: 16px;
}
/* 注意：这里绝对不能加 overflow:hidden。
   它会生成新的滚动容器，让手机端 .form-actions 的 position:sticky 吸底直接失效
   （元素会变成相对卡片吸附，滚过卡片就看不见了）。
   圆角靠 card-head / form-actions 各自收边，不需要父级裁剪。 */
.card-head {
  padding: 14px 16px; border-bottom: 1px solid var(--glass-brd-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* 标题前的渐变竖条：纯 CSS 生成，20 多个页面的 card-head 不用改一行 HTML */
.card-head h2 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card-head h2::before {
  content: ""; flex: none;
  width: 4px; height: 15px; border-radius: 3px;
  background: var(--grad-brand);
}
.card-extra { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-body { padding: 16px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card {
  background: var(--glass); border: 1px solid var(--glass-brd-2); border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%);
  backdrop-filter: blur(var(--blur)) saturate(165%);
  position: relative; overflow: hidden;
}
/* 左上角一团柔光，让卡片不是一块死板的白 */
.stat-card::after {
  content: ""; position: absolute; right: -28px; top: -34px;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 110, 247, .18), transparent 68%);
  pointer-events: none;
}
.stat-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-brand); z-index: 1; }
.stat-card.tone-green::before { background: linear-gradient(180deg, #34d399, var(--green)); }
.stat-card.tone-red::before { background: linear-gradient(180deg, #fb7185, var(--red)); }
.stat-card.tone-orange::before { background: linear-gradient(180deg, #fbbf24, var(--orange)); }
.stat-card.tone-purple::before { background: linear-gradient(180deg, #a78bfa, var(--purple)); }
.stat-card.tone-cyan::before { background: linear-gradient(180deg, #38bdf8, var(--cyan)); }
.stat-card > * { position: relative; z-index: 1; }
.stat-label { font-size: 12.5px; color: var(--muted); }
.stat-value { font-size: 24px; font-weight: 700; letter-spacing: .3px; margin-top: 2px; }
.stat-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 7px 14px; border-radius: 10px; border: 1px solid var(--border-2);
  background: var(--btn-bg); color: var(--text-2); cursor: pointer; font-size: 13.5px;
  transition: .15s; white-space: nowrap;
}
/* 浅色主题下 --btn-hover 为较深蓝灰，与白底明显拉开，杜绝"划过变纯白像没样式"；
   深色主题下 --btn-hover 为半透明蓝，反馈清晰。两主题各取独立值，互不串色。 */
.btn:hover { background: var(--btn-hover); color: var(--brand); border-color: rgba(79, 110, 247, .40); }
.btn-primary {
  background: var(--grad-brand); border-color: transparent; color: #fff;
  box-shadow: 0 4px 14px rgba(79, 110, 247, .30), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:hover {
  /* 必须显式覆盖 .btn:hover 的 --btn-hover 浅灰底，否则白字会叠在白底上看不清 */
  background: var(--grad-brand); filter: brightness(1.06); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(79, 110, 247, .38), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn-primary:active { background: var(--grad-brand); filter: brightness(.96); }
.btn-danger { color: var(--red); border-color: rgba(229, 72, 77, .32); }
.btn-danger:hover { background: rgba(229, 72, 77, .12); color: var(--red); border-color: rgba(229, 72, 77, .45); }
.btn-sm { padding: 4px 9px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; padding: 11px; font-size: 15px; font-weight: 600; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px; border: 1px solid transparent; }
.badge-green { background: rgba(23, 166, 115, .12); color: var(--green); }
.badge-red { background: rgba(229, 72, 77, .12); color: var(--red); }
.badge-blue { background: var(--brand-soft); color: var(--brand); }
.badge-orange { background: rgba(245, 158, 11, .14); color: #b45309; }
.badge-gray { background: var(--panel-2); color: var(--muted); border-color: var(--border); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.2px; }
/* 表格放在半透明卡片里，表头/悬停行也要跟着半透明，否则会浮出一块死白 */
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--glass-brd-2); text-align: left; white-space: nowrap; }
.table th { background: var(--glass-2); color: var(--text-2); font-weight: 600; font-size: 12.5px; }
.table tbody tr:hover { background: var(--glass-2); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .wrap-cell { white-space: normal; min-width: 160px; }
.text-right { text-align: right; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--muted); }
.text-bold { font-weight: 600; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.field > i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: 9px 12px; border: 1px solid var(--glass-brd-2); border-radius: 10px;
  background: var(--glass-3); color: var(--text); font-size: 13.5px; font-family: inherit; width: 100%;
  transition: .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  background: var(--glass-3);
  box-shadow: 0 0 0 3px rgba(79, 110, 247, .16);
}
.field input.amount-input { font-size: 18px; font-weight: 700; letter-spacing: .5px; }
/* 分组小标题：竖条用伪元素画渐变（border-image 配渐变在部分浏览器不稳，
   且与 .card-head h2 保持同一套实现） */
.form-title {
  position: relative;
  font-size: 13.5px; font-weight: 600; color: var(--brand-2);
  margin: 18px 0 10px; padding: 3px 0 3px 12px;
}
.form-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 3px; background: var(--grad-brand);
}
.form-title:first-child { margin-top: 0; }
.form-actions { margin-top: 16px; display: flex; gap: 10px; }
.check-line { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text-2); }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.filter-bar .field { min-width: 130px; }
.filter-bar .btn { height: 34px; }
/* 折叠开关由 JS 在窄屏创建，宽屏一律不显示 */
.fb-toggle { display: none; }

.pager { display: flex; gap: 6px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.pager-info { color: var(--muted); font-size: 12.5px; margin-right: 6px; }
.pg {
  padding: 5px 11px; border: 1px solid var(--glass-brd-2); border-radius: 9px;
  color: var(--text-2); font-size: 12.5px; background: var(--glass-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pg:hover { border-color: rgba(79, 110, 247, .5); color: var(--brand); }
.pg.active {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(79, 110, 247, .30);
}
.pg.disabled { opacity: .45; pointer-events: none; }

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty-ico {
  width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 20px;
  display: grid; place-items: center;
  background: var(--grad-soft); color: var(--brand);
}
.empty-ico .ico { width: 30px; height: 30px; opacity: .9; }
.empty small { font-size: 12px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }

/* 图表 */
.chart-box { width: 100%; height: 260px; position: relative; }
.chart-box canvas { width: 100%; height: 100%; display: block; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* 进度条 */
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.bar-row .bar-name { width: 96px; flex: none; overflow: hidden; text-overflow: ellipsis; }
.bar-line { flex: 1; height: 10px; background: var(--glass-2); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--grad-brand); }
.bar-val { width: 96px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }

/* 登录 / 安装页：背景走 body::before 的加强版渐变。
   注意这里绝不能再给 body 设不透明背景——body::before 是负 z-index，
   绘制顺序在 body 背景之前，body 一有底色就把渐变整个盖住。 */
.login-body, .install-body { background: transparent; min-height: 100vh; }
.login-body::before, .install-body::before {
  background:
    radial-gradient(760px 560px at 12% 4%,  rgba(99, 102, 241, .38), transparent 62%),
    radial-gradient(680px 520px at 88% 12%, rgba(56, 189, 248, .30), transparent 62%),
    radial-gradient(900px 700px at 62% 108%, rgba(139, 92, 246, .34), transparent 60%),
    linear-gradient(150deg, #eaf0ff 0%, #e6ecfb 46%, #f0f3ff 100%);
}
[data-theme="dark"] .login-body::before, [data-theme="dark"] .install-body::before {
  background:
    radial-gradient(760px 560px at 12% 4%,  rgba(79, 110, 247, .34), transparent 62%),
    radial-gradient(680px 520px at 88% 12%, rgba(14, 165, 233, .22), transparent 62%),
    radial-gradient(900px 700px at 62% 108%, rgba(139, 92, 246, .30), transparent 60%),
    linear-gradient(150deg, #0d1426 0%, #0b1120 50%, #111a2e 100%);
}
.login-wrap { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: center; min-height: 100vh; padding: 40px; max-width: 1180px; margin: 0 auto; }
.login-box {
  background: var(--glass); border: 1px solid var(--glass-brd-2);
  border-radius: 22px; padding: 30px;
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
}
.login-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.login-brand h1 { font-size: 20px; }
.login-brand p { color: var(--muted); font-size: 12.5px; margin: 2px 0 0; }
.login-side h2 { font-size: 17px; margin-bottom: 12px; }
.login-side ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.login-side li { margin-bottom: 8px; font-size: 14px; }
.login-foot { margin-top: 14px; text-align: center; font-size: 12px; color: var(--muted); }

.tabs {
  display: flex; gap: 6px; padding: 5px; margin-bottom: 16px;
  background: var(--glass-2); border: 1px solid var(--glass-brd-2); border-radius: 13px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tab { flex: 1; padding: 8px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--text-2); transition: .15s; }
.tab.active {
  background: var(--glass-3); color: var(--brand); font-weight: 600;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
}

.install-wrap { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
.install-head { text-align: center; margin-bottom: 22px; }
.install-head .brand-logo { margin: 0 auto 12px; }
.install-head h1 { font-size: 22px; }
.install-head p { color: var(--muted); font-size: 13px; }
/* 安装步骤条：卡片同样走玻璃，当前步用主渐变 */
.steps { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.steps span {
  font-size: 12.5px; color: var(--muted); padding: 5px 14px; border-radius: 20px;
  background: var(--glass); border: 1px solid var(--glass-brd-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.steps span.on {
  color: #fff; background: var(--grad-brand); border-color: transparent;
  box-shadow: 0 4px 12px rgba(79, 110, 247, .30);
}
.tips { font-size: 13px; color: var(--text-2); }

/* 快捷入口：图标装进渐变圆底，一眼能认出是什么功能 */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.quick-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  border: 1px solid var(--glass-brd-2); border-radius: 14px;
  background: var(--glass); color: var(--text-2); font-size: 13px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease;
}
.quick-item:hover {
  color: var(--brand); border-color: rgba(79, 110, 247, .42);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(79, 110, 247, .18), inset 0 1px 0 var(--glass-hi);
}
.quick-item:active { transform: translateY(-1px) scale(.985); }
/* 图标容器本身不含文字，位置靠 padding 居中即可 */
.quick-item .ico {
  width: 22px; height: 22px; padding: 11px; box-sizing: content-box;
  border-radius: 14px; color: #fff; background: var(--grad-brand);
  box-shadow: 0 6px 16px rgba(79, 110, 247, .28), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* 打印：毛玻璃在纸上会变成一片灰，全部退化成纯白实底 */
@media print {
  .sidebar, .topbar, .foot, .mask, .no-print { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; }
  body, html { background: #fff !important; }
  body::before { display: none !important; }
  .card, .stat-card, .quick-item, .login-box, .tabs {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .table th, .table tbody tr:hover { background: #f4f6fb !important; }
}

/* 尊重系统「减弱动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .quick-item:hover { transform: none; }
}

/* 响应式 */
@media (max-width: 1000px) {
  .login-wrap { grid-template-columns: 1fr; padding: 24px 16px; gap: 24px; }
  .login-side { display: none; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .only-mobile { display: grid; }
  .mask.show { display: block; }
  .content { padding: 14px 12px 24px; }
  .topbar { padding: 0 12px; }
  .stat-value { font-size: 20px; }
  .u-info { display: none; }
}

/* ==========================================================
   手机端适配
   断点 768px：手机竖屏 / 小平板竖屏
   断点 420px：窄屏手机
   ========================================================== */
@media (max-width: 768px) {
  /* 手机 GPU 扛不住 18px 的大范围模糊，统一降到 12px，观感几乎无差别 */
  :root { --blur: 12px; }

  /* ---------- 布局与安全区 ---------- */
  .main { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .content { padding: 12px 10px calc(78px + env(safe-area-inset-bottom)); }
  .foot { padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); font-size: 11.5px; }
  /* 抽屉拉开时背后是正文，模糊要够强才不糊成一团 */
  .sidebar {
    width: 268px; box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
  }
  .sidebar .brand { padding-top: calc(16px + env(safe-area-inset-top)); }

  /* ---------- 顶栏 ---------- */
  .topbar { height: 54px; padding: 0 10px; gap: 8px; }
  .topbar-title { min-width: 0; }
  .topbar-title h1 { font-size: 15.5px; }
  .topbar-title p { font-size: 11px; max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { gap: 6px; }
  .avatar { width: 30px; height: 30px; font-size: 13px; }

  /* ---------- 卡片 ---------- */
  .card { margin-bottom: 12px; }
  .card-head { padding: 11px 13px; gap: 8px; }
  .card-head h2 { font-size: 14.5px; }
  .card-extra { width: 100%; margin-left: 0; }
  .card-body { padding: 12px; }

  /* ---------- 触控目标：可点元素不小于 40px ---------- */
  .btn { padding: 9px 13px; min-height: 40px; }
  .btn-sm { padding: 7px 11px; min-height: 34px; font-size: 12.5px; border-radius: 8px; }
  .btn-block { min-height: 46px; }
  .icon-btn { width: 40px; height: 40px; }
  .menu-item { padding: 12px 12px; font-size: 14px; }
  .tab { padding: 9px 14px; }
  /* 消除移动端 300ms 点击延迟 */
  .btn, .icon-btn, .menu-item, .tab, .pg, .quick-item, button, label { touch-action: manipulation; }

  /* ---------- 表单：字号 >=16px，否则 iOS 聚焦时会自动放大整页 ---------- */
  .field input, .field select, .field textarea,
  .day-edit input, .day-edit select, .day-edit textarea,
  .cell-input, .sort-num,
  input[type=text], input[type=number], input[type=date], input[type=search],
  input[type=tel], input[type=email], input[type=password], select, textarea {
    font-size: 16px;
  }
  .field input, .field select, .field textarea { padding: 10px 12px; }
  .field input.amount-input { font-size: 20px; }
  .cell-input { min-width: 0; }
  .sort-num { width: 64px; }

  .form-grid { grid-template-columns: 1fr; gap: 12px; }
  .form-grid > .field[style*="1 / -1"], .form-grid > .field[style*="1/-1"] { grid-column: 1 / -1; }

  /* 筛选栏：由横向排列改为两列网格，按钮各占一行 */
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
  .filter-bar .field { min-width: 0; }
  .filter-bar > .btn, .filter-bar > button, .filter-bar > a.btn { width: 100%; }
  .filter-bar > .field:nth-child(odd):last-child { grid-column: 1 / -1; }
  .filter-bar > .day-tip, .filter-bar > .tips { grid-column: 1 / -1; }

  /* 条件较多的筛选栏默认收起，把首屏让给数据 */
  .fb-toggle { display: inline-flex; width: 100%; margin-bottom: 10px; }
  .fb-toggle.active { border-color: var(--brand); color: var(--brand); }
  form.filter-bar[data-fb-ready]:not(.fb-open) { display: none; }
  .fb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); display: inline-block; margin-left: 6px; }

  /* 表单操作区：吸底，长表单不用滚到底也能保存。
     背景要比卡片更实（glass-3）并自带模糊，否则滚动内容会直接从按钮下透出来。 */
  .form-actions {
    position: sticky; bottom: 0; z-index: 25; gap: 10px;
    margin: 14px -12px -12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--glass-3); border-top: 1px solid var(--glass-brd-2);
    -webkit-backdrop-filter: blur(16px) saturate(165%);
    backdrop-filter: blur(16px) saturate(165%);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -6px 18px rgba(30, 41, 90, .08);
  }
  .form-actions .btn { flex: 1; }
  .form-actions .btn:only-child { width: 100%; }

  /* ---------- 统计卡 / 快捷入口 / 栅格 ---------- */
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 11px 12px; }
  .stat-value { font-size: 19px; }
  .stat-label { font-size: 11.5px; }
  .stat-sub { font-size: 11px; }
  .quick-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .quick-item { padding: 12px 6px; font-size: 12.5px; }
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .chart-box { height: 230px; }
  .bar-row .bar-name { width: 72px; }
  .bar-val { width: 76px; }

  /* 页签较多时横向滚动，避免挤成一团 */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; }

  /* ---------- 分页 ---------- */
  .pager { justify-content: center; gap: 6px; }
  .pager-info { width: 100%; text-align: center; margin: 0 0 2px; }
  .pg { padding: 8px 11px; min-width: 38px; text-align: center; }

  /* ==========================================================
     数据表 → 卡片流
     由 app.js 自动注入 data-label 并给表格加 .t-card
     ========================================================== */
  .table-wrap.t-card-wrap { overflow: visible; max-height: none !important; }

  .t-card, .t-card tbody, .t-card tfoot { display: block; width: 100%; }
  .t-card thead { display: none; }
  .t-card tr {
    display: block; margin: 0 0 10px; padding: 0;
    border: 1px solid var(--glass-brd-2); border-radius: 12px;
    background: var(--glass-3); overflow: hidden;
  }
  .t-card tbody tr:last-child, .t-card tfoot tr:last-child { margin-bottom: 0; }
  .t-card tr:hover { background: var(--glass-3); }
  .t-card th, .t-card td {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--glass-brd-2);
    white-space: normal; text-align: left !important;
    font-size: 13.5px; font-weight: 400;
  }
  .t-card tr > th:last-child, .t-card tr > td:last-child { border-bottom: 0; }
  .t-card td::before, .t-card th::before {
    content: attr(data-label);
    flex: 0 0 auto; width: 76px;
    color: var(--muted); font-size: 11.5px; line-height: 1.35;
  }
  .t-card td[data-label=""]::before, .t-card th[data-label=""]::before,
  .t-card .td-full::before { display: none; }
  /* 合并单元格（小计行、展开面板）：整块展示，不按列拆分 */
  .t-card .td-full { display: block; padding: 10px 12px; background: var(--glass-2); }
  .t-card .td-full .filter-bar { margin: 0; }
  .t-card .td-empty { display: none; }
  /* 数字列：标签与数值两端对齐 */
  .t-card td.num, .t-card td.r, .t-card th.num { justify-content: space-between; }
  .t-card td.wrap-cell, .t-card td .wrap-cell { min-width: 0; }
  /* 纯展示型表格：双列网格，卡片高度减半，长列表少滚一半 */
  .t-card.t-compact tbody tr, .t-card.t-compact tfoot tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px; background: var(--glass-brd-2);
  }
  .t-card.t-compact td, .t-card.t-compact th {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1px; padding: 6px 12px 7px;
    background: var(--glass-3); border: 0; min-width: 0; overflow: hidden;
  }
  .t-card.t-compact td::before, .t-card.t-compact th::before {
    width: auto; font-size: 11px; line-height: 1.3;
  }
  .t-card.t-compact td.num, .t-card.t-compact th.num { justify-content: center; }
  /* 操作列、长文本列、合并格独占整行 */
  .t-card.t-compact tbody td:last-child,
  .t-card.t-compact td.wrap-cell,
  .t-card.t-compact .td-full { grid-column: 1 / -1; padding: 9px 12px; background: var(--glass-2); }
  .t-card.t-compact td > form { flex-wrap: wrap; }

  /* 单元格内的控件占满标签右侧的剩余空间 */
  .t-card td > input, .t-card td > select, .t-card td > textarea { flex: 1 1 auto; min-width: 0; }
  .t-card td > form { display: inline-flex; gap: 6px; flex-wrap: wrap; }
  .t-card td > form > input { flex: 1 1 60px; min-width: 0; }
  .t-card td .btn { flex: 0 0 auto; }

  /* 列数较少的表格保持横向滚动，但首列吸附。
     吸附列必须保持完全不透明（var(--panel)）——半透明会让横向滚动的其它列
     直接从它底下透出来，整列文字会糊成一团。这里刻意不套毛玻璃。 */
  .table-wrap:not(.t-card-wrap) { position: relative; }
  .table:not(.t-card) th:first-child,
  .table:not(.t-card) td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--panel); box-shadow: 1px 0 0 var(--glass-brd-2);
  }
  .table:not(.t-card) th:first-child { background: var(--panel-2); z-index: 2; }

  /* ---------- 长列表浮动按钮 ---------- */
  .m-fab {
    position: fixed; right: 12px; z-index: 36;
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: none; flex-direction: column; gap: 8px;
  }
  .m-fab.show { display: flex; }
  .m-fab button {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--glass-3); color: var(--text-2);
    border: 1px solid var(--glass-brd-2); box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(14px) saturate(165%);
    backdrop-filter: blur(14px) saturate(165%);
    display: grid; place-items: center; cursor: pointer; padding: 0;
  }
  .m-fab button:active { background: var(--brand-soft); color: var(--brand); }
  .m-fab .ico { width: 20px; height: 20px; }

  /* ---------- 登录 / 安装 ---------- */
  .login-wrap { padding: 20px 14px; min-height: auto; }
  .login-box { padding: 20px 18px; }
  .login-brand h1 { font-size: 18px; }
  .install-wrap { padding: 24px 14px calc(40px + env(safe-area-inset-bottom)); }
}

/* 窄屏手机 */
@media (max-width: 420px) {
  .content { padding: 10px 8px calc(78px + env(safe-area-inset-bottom)); }
  .card-body { padding: 11px 10px; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-value { font-size: 17px; }
  .filter-bar { grid-template-columns: 1fr; }
  .filter-bar > .btn, .filter-bar > button, .filter-bar > a.btn { width: 100%; }
  .t-card td::before, .t-card th::before { width: 68px; font-size: 11px; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
}