/* ============================================================
   个人财富管理系统 V2.1.0 · 全局样式
   视觉基准：《个人财富管理系统设计图.png》
   ============================================================ */
:root {
  --green-900: #005C52;
  --green-800: #00695C;
  --green-700: #00796B;
  --green-500: #10A37F;
  --green-400: #19A983;
  --green-300: #2DBE91;
  --green-bg:   #EAF6F2;
  --green-bg2:  #F0F8F5;
  --page-bg:    #F4F7F6;
  --card-bg:    #FFFFFF;
  --text-1:     #1F2D2D;
  --text-2:     #667775;
  --border:     #DFE8E5;
  --danger:     #FF5B5B;
  --blue:       #3B82F6;
  --orange:     #F59E0B;
  --purple:     #8B5CF6;
  --blue-light: #60A5FA;
  --radius:     10px;
  --shadow:     0 1px 4px rgba(0, 92, 82, .05);
  --sidebar-w:  224px;
  --topbar-h:   64px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
  background: var(--page-bg); color: var(--text-1);
  font-size: 14px; line-height: 1.55;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--green-700); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #C9D8D3; border-radius: 4px; }

.boot-loading { display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; height: 100vh; color: var(--text-2); font-size: 13px; }
.boot-spinner { width: 32px; height: 32px; border: 3px solid var(--green-bg); border-top-color: var(--green-700); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 登录页 ---------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #F0F8F5 0%, #F4F7F6 55%, #EAF6F2 100%); padding: 24px; }
.login-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,92,82,.08);
  width: 100%; max-width: 400px; padding: 40px 36px; }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.login-logo .logo-badge { width: 44px; height: 44px; background: var(--green-900); border-radius: 11px;
  display: flex; align-items: center; justify-content: center; color: #fff; }
.login-title { font-size: 20px; font-weight: 700; color: var(--green-900); }
.login-sub { font-size: 12px; color: var(--text-2); margin-bottom: 28px; letter-spacing: .5px; }
.login-card .field { margin-bottom: 16px; }
.login-btn { width: 100%; padding: 12px; background: var(--green-900); color: #fff; border: none;
  border-radius: 8px; font-size: 15px; font-weight: 600; transition: background .15s; }
.login-btn:hover { background: var(--green-700); }
.login-btn:disabled { background: #9DB8B3; }
.login-err { color: var(--danger); font-size: 13px; margin-top: 12px; min-height: 18px; text-align: center; }

/* ---------------- 顶部品牌栏 ---------------- */
.topbar { height: var(--topbar-h); background: var(--card-bg); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 24px; gap: 16px; position: sticky; top: 0; z-index: 40; }
.topbar .brand { font-size: 19px; font-weight: 700; color: var(--green-900); letter-spacing: 1px; white-space: nowrap; }
.topbar .brand-sub { font-size: 12px; color: var(--text-2); border-left: 1px solid var(--border); padding-left: 14px; white-space: nowrap; }
.topbar .brand-sub small { display: block; font-size: 10px; color: #9AB3AD; letter-spacing: .5px; }
.topbar .motto { margin-left: auto; font-size: 17px; color: var(--green-800); font-weight: 600;
  font-family: "STKaiti", "KaiTi", "PingFang SC", serif; white-space: nowrap; }
.topbar .motto-sub { font-size: 11px; color: var(--text-2); text-align: right; line-height: 1.5; white-space: nowrap; }
.hamburger { display: none; background: none; border: none; color: var(--green-900); padding: 6px; }

/* ---------------- 布局 ---------------- */
.shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.sidebar { width: var(--sidebar-w); background: var(--green-900); color: #D9EDE7; flex-shrink: 0;
  display: flex; flex-direction: column; position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto; }
.sidebar-head { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; }
.sidebar-head .logo-badge { width: 34px; height: 34px; background: rgba(255,255,255,.14); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; color: #B8F0DC; }
.sidebar-head .name { font-size: 14px; font-weight: 600; color: #fff; }
.nav { padding: 4px 12px; flex: 1; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; margin-bottom: 2px;
  border-radius: 8px; color: #B9D8D1; font-size: 13.5px; cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; transition: background .12s, color .12s; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--green-500); color: #fff; font-weight: 600; }
.nav-item svg, .nav-item i { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-user { margin: 12px; padding: 12px; background: rgba(255,255,255,.08); border-radius: 10px;
  display: flex; align-items: center; gap: 10px; }
.sidebar-user .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green-400);
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.sidebar-user .uname { font-size: 13.5px; font-weight: 600; color: #fff; }
.sidebar-user .uslogan { font-size: 10.5px; color: #9CC9BF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-ver { text-align: center; font-size: 10px; color: #7FA89F; padding: 0 0 12px; }
.nav-backdrop { display: none; }

.main { flex: 1; padding: 20px 24px 32px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-title { font-size: 17px; font-weight: 700; color: var(--text-1); }
.page-greeting { font-size: 20px; font-weight: 700; margin: 6px 0 2px; }
.page-greeting .sun { font-size: 17px; }
.page-sub { font-size: 12.5px; color: var(--text-2); }

/* 月份切换器 */
.month-switch { display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 3px; }
.month-switch button { border: none; background: none; width: 26px; height: 26px; border-radius: 6px;
  color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.month-switch button:hover { background: var(--green-bg); color: var(--green-800); }
.month-switch .cur { font-size: 13px; font-weight: 600; color: var(--text-1); padding: 2px 8px; min-width: 96px;
  text-align: center; cursor: pointer; border-radius: 6px; }
.month-switch .cur:hover { background: var(--green-bg); color: var(--green-800); }
.month-switch .month-input { font-size: 13px; font-weight: 600; color: var(--text-1); border: 1px solid var(--green-500);
  border-radius: 6px; padding: 1px 4px; width: 112px; text-align: center; outline: none; font-family: inherit;
  background: #fff; }

/* ---------------- 卡片 ---------------- */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.card-title { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.card-title .ticon { width: 16px; height: 16px; color: var(--green-700); }
.card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------- 七大指标卡（V2.2.31 新增「流动净资产」） ---------------- */
.stats-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow); }
.stat-label { font-size: 12px; color: var(--text-2); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.stat-label svg { width: 14px; height: 14px; color: var(--green-700); }
.stat-value { font-size: 21px; font-weight: 700; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: 11.5px; margin-top: 5px; color: var(--text-2); }
.stat-na { color: #B7C6C2; font-weight: 600; }
.chart-empty { display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; min-height: 120px; color: #9AB3AD; font-size: 12.5px; line-height: 1.8; }
.snapshot-banner.warn { background: #FFF8EC; border-color: #F3E3C3; color: #8A6D2F; }

/* ---------------- 月末盘点向导 ---------------- */
.modal.modal-xl { max-width: 1060px; }
.checkup { display: flex; flex-direction: column; }
.checkup .ck-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.checkup .ck-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding-top: 14px; }
.checkup .ck-sub { font-size: 12.5px; color: var(--text-2); background: var(--green-bg);
  border-radius: 8px; padding: 8px 12px; margin: -6px 0 14px; }
.ck-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.ck-sec-title { font-size: 13.5px; font-weight: 700; color: var(--text-1); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px; }
.ck-cat { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 12px 0 6px;
  display: flex; align-items: center; gap: 6px; }
.ck-cat .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed #EFF4F2; }
.ck-name { font-size: 13px; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
.ck-badge { font-size: 10.5px; color: #9AB3AD; border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.ck-input { display: flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 12px; }
.ck-input input { width: 130px; text-align: right; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; outline: none; font-family: inherit; }
.ck-input input:focus { border-color: var(--green-500); }
.ck-input input.err { border-color: var(--danger); background: #FFF5F5; }
.ck-empty { font-size: 12.5px; color: #9AB3AD; padding: 12px 0; }
.ck-add { display: grid; grid-template-columns: 72px 1fr 100px 1fr auto; gap: 6px; margin-bottom: 12px; }
.ck-add select, .ck-add input { font-size: 12.5px; border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; outline: none; font-family: inherit; background: #fff; }
.ck-add input:focus, .ck-add select:focus { border-color: var(--green-500); }
.ck-tx-list { max-height: 55vh; overflow-y: auto; }
.ck-tx-sum { font-size: 11.5px; color: var(--text-2); padding: 0 0 6px; display: flex; gap: 10px; align-items: center;
  border-bottom: 1px solid var(--border); margin-bottom: 2px; position: sticky; top: 0; background: #fff; z-index: 1; }
.ck-tx { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 7px 0;
  border-bottom: 1px dashed #EFF4F2; }
.ck-tx-date { color: #9AB3AD; width: 40px; flex-shrink: 0; }
.ck-tx-cat { font-weight: 600; color: var(--text-1); }
.ck-tx-note { color: #9AB3AD; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-foot { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ck-totals { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.ck-totals b { color: var(--text-1); font-size: 13px; }
.ck-totals .ck-hl { color: var(--green-800); font-size: 14px; }
.ck-totals .pos, .ck-summary .pos { color: var(--green-500); }
.ck-totals .neg, .ck-summary .neg { color: var(--danger); }
.ck-sep { width: 1px; height: 14px; background: var(--border); }
.ck-warn { color: var(--danger); font-weight: 600; }
.ck-summary .ck-net { text-align: center; padding: 18px 0 20px; }
.ck-summary .ck-net .lb { font-size: 13px; color: var(--text-2); }
.ck-summary .ck-net .val { font-size: 34px; font-weight: 700; color: var(--green-800); margin: 6px 0; }
.ck-summary .ck-net .sub { font-size: 12.5px; color: #9AB3AD; }
.ck-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ck-card { background: var(--green-bg); border-radius: 10px; padding: 14px; }
.ck-card .lb { font-size: 12px; color: var(--text-2); line-height: 1.5; min-height: 36px; }
.ck-card .val { font-size: 18px; font-weight: 700; margin-top: 6px; }
.ck-card .sub { font-size: 11.5px; color: #9AB3AD; margin-top: 6px; }
.ck-extra { display: flex; gap: 18px; justify-content: center; font-size: 12.5px; color: var(--text-2);
  margin-top: 18px; flex-wrap: wrap; }
.ck-extra b { color: var(--green-800); }
@media (max-width: 900px) {
  .ck-body { grid-template-columns: 1fr; gap: 18px; }
  .ck-cards { grid-template-columns: 1fr; }
  .ck-add { grid-template-columns: 70px 1fr 90px; }
  .ck-add input#ckNote { grid-column: 1 / 3; }
}
.stat-delta b { font-weight: 600; }
.stat-delta.good b { color: var(--green-500); }
.stat-delta.bad  b { color: var(--danger); }

/* ---------------- Dashboard 网格 ---------------- */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.dash-mid { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-row { display: grid; gap: 16px; }
.dash-row.r-trend { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.dash-row.r-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dash-bottom { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1.3fr; gap: 16px; margin-top: 16px; align-items: stretch; }

.chart-box { width: 100%; height: 260px; }
.chart-box.sm { height: 200px; }
.chart-box.gauge { height: 170px; }

/* 资产结构 */
.struct-wrap { display: flex; align-items: center; gap: 8px; }
.struct-legend { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.struct-legend .li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; }
.struct-legend .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.struct-legend .pct { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 近期交易 */
.tx-list { display: flex; flex-direction: column; }
.tx-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #EDF3F1; font-size: 12.5px; }
.tx-item:last-child { border-bottom: none; }
.tx-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tx-icon svg { width: 15px; height: 15px; }
.tx-meta { flex: 1; min-width: 0; }
.tx-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-date { font-size: 11px; color: var(--text-2); }
.tx-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-amount.pos { color: var(--green-500); }
.tx-amount.neg { color: var(--danger); }

/* 健康评分 */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; }
.gauge-level { font-size: 13px; color: var(--green-500); font-weight: 600; margin-top: -34px; margin-bottom: 10px; }
.health-points { width: 100%; display: flex; flex-direction: column; gap: 7px; margin: 6px 0 12px; }
.health-points .hp { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-2); }
.health-points .hp svg { width: 14px; height: 14px; flex-shrink: 0; }
.health-points .hp.ok svg { color: var(--green-500); }
.health-points .hp.warn svg { color: var(--orange); }

/* ---------------- 表格 ---------------- */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; color: var(--text-2); font-weight: 500; font-size: 11.5px; padding: 7px 8px;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 9px 8px; border-bottom: 1px solid #EFF4F2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-weight: 600; }
.tbl .cat-cell { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cat-ico { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cat-ico svg { width: 14px; height: 14px; }
.row-toggle { border: none; background: none; color: var(--text-2); padding: 2px; display: inline-flex; }
.row-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
.row-toggle.open svg { transform: rotate(90deg); }
.sub-row td { background: #FAFCFB; font-size: 12px; color: var(--text-2); }
.link-act { color: var(--green-700); font-size: 12px; border: none; background: none; padding: 2px 6px; }
.link-act:hover { text-decoration: underline; }
.link-act.danger { color: var(--danger); }

/* ---------------- 按钮 ---------------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px;
  border: 1px solid transparent; font-size: 12.5px; font-weight: 600; transition: all .12s; }
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--green-900); color: #fff; }
.btn-primary:hover { background: var(--green-700); }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text-1); }
.btn-ghost:hover { border-color: var(--green-700); color: var(--green-800); }
.btn-danger { background: #fff; border-color: #F6C9C9; color: var(--danger); }
.btn-danger:hover { background: #FFF3F3; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------------- Tab ---------------- */
.tabs { display: flex; gap: 4px; background: var(--green-bg2); border-radius: 8px; padding: 3px; }
.tabs .tab { border: none; background: none; padding: 5px 13px; font-size: 12.5px; border-radius: 6px; color: var(--text-2); }
.tabs .tab.active { background: #fff; color: var(--green-900); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ---------------- 盈亏着色 ---------------- */
.pl-pos { color: var(--danger); font-weight: 600; }   /* 红涨（默认 A 股习惯） */
.pl-neg { color: var(--green-500); font-weight: 600; }
body.green-up .pl-pos { color: var(--green-500); }
body.green-up .pl-neg { color: var(--danger); }

/* ---------------- 家庭成员 ---------------- */
.member-list { display: flex; flex-direction: column; gap: 10px; }
.member-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid #EFF4F2; border-radius: 9px; }
.member-item .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.member-item .mname { font-size: 13px; font-weight: 600; }
.member-item .mrel { font-size: 11px; color: var(--text-2); }
.member-item .mlink { margin-left: auto; color: #B9C9C5; }

/* ---------------- 目标进度 ---------------- */
.goal-list { display: flex; flex-direction: column; gap: 14px; }
.goal-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.goal-head svg { width: 15px; height: 15px; }
.goal-head .gamount { margin-left: auto; font-size: 12px; color: var(--text-2); font-weight: 500; }
.goal-head .gpct { font-size: 12px; font-weight: 700; width: 38px; text-align: right; }
.progress { height: 7px; background: var(--green-bg); border-radius: 4px; overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 4px; transition: width .5s; }

/* ---------------- AI 顾问 ---------------- */
.ai-bubble { background: var(--green-bg2); border: 1px solid #DCEEDE; border-radius: 10px; padding: 12px 14px;
  font-size: 12.5px; color: var(--text-1); line-height: 1.7; margin-bottom: 12px; }
.ai-bubble ol { padding-left: 18px; }
.ai-input-row { display: flex; gap: 8px; }
.ai-input-row input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; outline: none; }
.ai-input-row input:focus { border-color: var(--green-700); }
.ai-send { width: 38px; height: 38px; border-radius: 8px; background: var(--green-900); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-answer { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--green-500);
  border-radius: 8px; padding: 10px 12px; font-size: 12.5px; margin-top: 10px; white-space: pre-line; display: none; }

/* ---------------- 表单 ---------------- */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; font-size: 13.5px; outline: none; background: #fff; color: var(--text-1); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-700); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-err { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 4px; }

/* ---------------- Modal / Drawer ---------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 40, 36, .45); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadeIn .15s; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  padding: 22px 24px; animation: slideUp .18s; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-size: 15.5px; font-weight: 700; }
.modal-close { border: none; background: none; color: var(--text-2); padding: 4px; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideUp { from { transform: translateY(14px); opacity: 0; } }

/* ---------------- Toast ---------------- */
.toast-box { position: fixed; top: 76px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--green-500);
  border-radius: 8px; padding: 10px 16px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.1); animation: slideUp .2s; max-width: 320px; }
.toast.err { border-left-color: var(--danger); }

/* ---------------- 页面通用 ---------------- */
.section-gap { margin-bottom: 16px; }
.empty { text-align: center; color: var(--text-2); font-size: 12.5px; padding: 28px 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.tag.green { background: var(--green-bg); color: var(--green-800); }
.tag.red { background: #FFECEC; color: var(--danger); }
.tag.gray { background: #F1F4F3; color: var(--text-2); }
.tag.blue { background: #EAF1FE; color: #2563EB; }
.tag.amber { background: #FFF7E6; color: #B45309; }

/* ---------------- 资产管理 · 月度余额录入 ---------------- */
/* 月份切换器与标题并排 */
.card-title .am-month-slot { display: inline-flex; align-items: center; margin-left: 10px; vertical-align: middle; }
.card-title .am-month-slot .month-switch { border-color: var(--border); }
.card-title .am-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 500; vertical-align: middle; }
.am-badge.green  { background: var(--green-bg); color: var(--green-800); }
.am-badge.blue   { background: #EAF1FE; color: #2563EB; }
.am-badge.amber  { background: #FFF7E6; color: #B45309; }
.am-badge.gray   { background: #F1F4F3; color: var(--text-2); }
.am-badge.red    { background: #FFECEC; color: var(--danger); }

/* 状态条：说明当前月份的性质（当月 / 历史存档 / 未录入 / 已锁定 / 错误） */
.am-status { margin: 0 16px 12px; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.7;
  border: 1px solid var(--border); background: #F7FAF9; color: var(--text-2); }
.am-status b { color: var(--text-1); display: inline-flex; align-items: center; gap: 5px; }
.am-status.current  { background: var(--green-bg); border-color: #CDE9E1; }
.am-status.history  { background: #EAF1FE; border-color: #CFE0FB; }
.am-status.locked   { background: #FFF7E6; border-color: #FAE5B5; }
.am-status.empty    { background: #F7FAF9; border-color: var(--border); }
.am-status.error    { background: #FFECEC; border-color: #F7C1C1; color: #791F1F; }
.am-status.error b  { color: #A32D2D; }

/* 内联金额输入框（资产 amt-input 与负债 liab-input 统一样式）
   V2.2.35：已录入（有值）= 无边框透明背景（干净的数字文本）；
            未录入（空值，.is-empty）= 带边框白底，提示此处待填写 */
input.amt-input, input.liab-input, input.rv-input { width: 108px; padding: 4px 8px; text-align: right; font-size: 13px; font-weight: 600;
  color: var(--text-1); border: 1px solid transparent; border-radius: 6px; background: transparent; }
input.amt-input.is-empty, input.liab-input.is-empty, input.rv-input.is-empty { border-color: var(--border); background: #fff; }
input.amt-input:hover, input.liab-input:hover, input.rv-input:hover { border-color: var(--border); background: #fff; }
input.amt-input:focus, input.liab-input:focus, input.rv-input:focus { outline: none; background: #fff; border-color: var(--green-500); box-shadow: 0 0 0 2px rgba(16,163,127,.12); }
input.amt-input::placeholder, input.liab-input::placeholder, input.rv-input::placeholder { color: #B9C9C5; font-weight: 400; font-size: 12px; }

/* 表格底部合计栏 */
.am-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-1); flex-wrap: wrap; }
.am-foot b { font-size: 15px; color: var(--green-700); }
.am-hint { font-size: 11.5px; color: var(--text-2); }
.am-diff { font-size: 11px; color: #9AB3AD; white-space: nowrap; }

/* 「录入于」时间戳：归档徽标，灰色、不抢视觉 */
.am-stamp { display: inline-block; margin-left: 6px; font-size: 10.5px; color: #9AB3AD;
  background: #F1F4F3; padding: 1px 6px; border-radius: 9px; line-height: 1.5; white-space: nowrap; }
.am-cell { display: inline-flex; align-items: center; gap: 0; }

/* 月份切换器右侧 ⌂ 按钮（回到本月） */
.month-switch button[data-home] {
  margin-left: 4px; color: var(--green);
  border-left: 1px solid var(--border); padding-left: 8px; border-radius: 0 8px 8px 0;
}
.month-switch button[data-home].home-on { color: var(--text-2); cursor: default; opacity: .6; }

/* 负债类别管理弹窗 */
.acm-help { font-size: 12px; color: var(--text-2); background: #F7FAF9;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px; }
.acm-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.acm-row { display: grid; grid-template-columns: 14px 14px 1fr auto auto auto auto;
  align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; }
.acm-color { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--border); }
.acm-handle { width: 4px; height: 14px; border-radius: 2px; background: #DEE5E2; }
.acm-name { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.acm-code { font-size: 11px; color: var(--text-2); font-family: ui-monospace, monospace; }
.acm-actions { display: flex; gap: 4px; align-items: center; }
.acm-add { display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.acm-add-row { display: grid; grid-template-columns: 1fr 60px; gap: 8px; align-items: center; }
.acm-add input, .acm-add select { width: 100%; }
.acm-add .acm-add-btn-row { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
/* 管理收支类别：收入/支出两列并排 */
.txc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
@media (max-width: 640px) { .txc-cols { grid-template-columns: 1fr; } }
.acm-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.acm-hint { font-size: 11.5px; color: var(--text-2); }

@media (max-width: 640px) {
  input.amt-input, input.liab-input { width: 88px; }
  .am-status { margin: 0 12px 10px; }
}
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.pager button { border: 1px solid var(--border); background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 12px; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* 备份页 */
.backup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 18px; }
.backup-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.backup-card h4 { font-size: 14px; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.backup-card h4 svg { width: 16px; height: 16px; color: var(--green-700); }
.backup-card p { font-size: 12px; color: var(--text-2); margin-bottom: 12px; min-height: 34px; }

/* 设置页 */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.health-item { border: 1px solid var(--border); border-radius: 9px; padding: 12px 14px; }

/* ---------------- 资产管理 · 首页精简卡片（AssetPanelMini） ---------------- */
.apm-list { padding: 4px 16px 8px; }
.apm-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px;
  border-bottom: 1px dashed #EFF3F1; }
.apm-row:last-child { border-bottom: 0; }
.apm-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; flex-shrink: 0; }
.apm-name { flex: 1; color: var(--text-1); }
.apm-amt { font-weight: 600; color: var(--text-1); font-variant-numeric: tabular-nums; }
.apm-pct { font-size: 11.5px; color: var(--text-2); min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.apm-foot { padding: 10px 16px 14px; border-top: 1px solid var(--border); display: flex; gap: 6px;
  align-items: center; justify-content: space-between; background: #F7FAF9; font-size: 12.5px; }
.apm-foot b { font-size: 16px; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ---------------- 资产管理 · 月度余额录入（V2.2.2） ---------------- */
/* 「现 ¥XXX」差异提示改为 tooltip 图标，缩窄到月列 */
.am-diff-icon { display: inline-flex; align-items: center; color: #B45309; cursor: help; margin-left: 2px; }

/* ---------------- 资产管理 · 类别管理 Modal ---------------- */
.acm-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.acm-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.acm-row .apm-ico { width: 26px; height: 26px; }
.acm-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-1); }
.acm-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.acm-add { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.acm-add .field-row { margin-bottom: 8px; }
.acm-add input[type=color] { padding: 2px; }
.health-item .hl { font-size: 11.5px; color: var(--text-2); margin-bottom: 4px; }
.health-item .hv { font-size: 14px; font-weight: 700; }
.health-item .hv.ok { color: var(--green-500); } .health-item .hv.bad { color: var(--danger); }

/* 报告 */
.report-view h3 { font-size: 14px; margin: 16px 0 8px; color: var(--green-900); }
.report-view .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.report-view .kv .cell { background: var(--green-bg2); border-radius: 8px; padding: 10px 12px; }
.report-view .kv .kl { font-size: 11px; color: var(--text-2); }
.report-view .kv .kv2 { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 月末盘点横幅 */
.snapshot-banner { display: flex; align-items: center; gap: 12px; background: var(--green-bg);
  border: 1px solid #D3EAE0; border-radius: 10px; padding: 11px 16px; margin-bottom: 16px; font-size: 12.5px; flex-wrap: wrap; }
.snapshot-banner svg { width: 16px; height: 16px; color: var(--green-700); flex-shrink: 0; }
.snapshot-banner .spacer { flex: 1; }

/* ---------------- 响应式：平板 ---------------- */
@media (max-width: 1280px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-right { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .dash-bottom { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .topbar .motto-sub { display: none; }
}
@media (max-width: 1024px) {
  .topbar .brand-sub { display: none; }
  .topbar .motto { font-size: 14px; }
}
/* ---------------- 响应式：手机 ---------------- */
@media (max-width: 768px) {
  .topbar { padding: 0 14px; }
  .topbar .motto { display: none; }
  .hamburger { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; z-index: 100; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .nav-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; }
  .main { padding: 14px 14px 90px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-value { font-size: 18px; }
  .dash-row.r-trend, .dash-row.r-three { grid-template-columns: 1fr; }
  .dash-right { grid-template-columns: 1fr; }
  .dash-bottom { grid-template-columns: 1fr; }
  .page-greeting { font-size: 17px; }
  .chart-box { height: 220px; }
  .field-row { grid-template-columns: 1fr; }
  .modal { padding: 18px; }
}

/* V2.2.17 AI 接入模式徽标 */
.ai-mode-badge {
  font-size: 11px; padding: 2px 10px; border-radius: 999px;
  background: #eef3f2; color: #7a8c88; white-space: nowrap;
}
.ai-mode-badge.on { background: #e2f5ea; color: #1f8a4c; }

/* V2.2.20 AI 财富月报排版 */
.ai-bubble { max-height: 420px; overflow-y: auto; }
.ai-rpt-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.ai-rpt-h { font-weight: 600; margin: 8px 0 2px; }
.ai-rpt-p { margin: 2px 0; }