/* 全应用视觉规范。业务布局在 styles.css，通用外观在这里集中维护。
   主色用于导航和操作；绿/橙/红用于业务状态；避免页面自行添加渐变和重阴影。 */
:root {
  --surface-subtle: #e8f0fc;
  --border-brand: #b7d1fc;
  --text-secondary: #435e80;
  --space-card: 16px;
  --surface-highlight: #d4e5ff;
}
body { background: #e3ecfa; }
#app { box-shadow: 0 0 32px rgba(30, 41, 59, .06); }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
button:disabled { cursor: default; }
input::placeholder, textarea::placeholder { color: #8a97a9; opacity: 1; }
input, select, textarea { background-color: var(--bg); }
.field label { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
.btn { box-shadow: none; }
.btn-block { font-size: 15px; }
.btn-sm { border-radius: var(--radius-sm); }
.btn-ghost { color: var(--text-secondary); }
.chip { border-radius: var(--radius-sm); color: var(--text-secondary); }
.chip.on { background: var(--primary-soft); color: var(--primary); border-color: var(--border-brand); box-shadow: none; }
.fchip { border-color: var(--border); border-radius: var(--radius-sm); background-color: var(--card); color: var(--text-secondary); font-weight: 500; }
.fchip.on { background-color: var(--primary-soft); border-color: var(--border-brand); }
.expense-filter-row .fchip, .income-filter-row .fchip { box-shadow: none; }
.seg-tabs, .auth-tabs { background: var(--surface-subtle); border-radius: var(--radius-sm); }
.seg-tabs button, .auth-tabs button { border-radius: 7px; font-size: 14px; font-weight: 500; }
.seg-tabs button.active, .auth-tabs button.active { font-weight: 600; box-shadow: var(--shadow); }
.topbar { background: var(--card); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: none; }
.topbar .left { min-width: 0; }
.topbar h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.topbar .back { color: var(--text); }
.topbar .bell { color: var(--primary); }
.topbar .bell .badge { background: var(--red); top: 0; right: -2px; box-shadow: 0 0 0 2px var(--card); }
.tabbar { background: var(--card); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
.content { padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
.fab { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); }
.fab .fab-btn { border-radius: var(--radius); box-shadow: 0 4px 12px rgba(37, 99, 235, .2); }

/* 卡片和标题采用相同层级，卡片内部仍保留各业务需要的布局。 */
.stat, .panel, .list-card, .chart-card, .menu-group, .stat-mini, .chat-row,
.cash-flow-col, .expense-stats, .archive-hero, .archive-section, .profile-head {
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat, .list-card, .chart-card { padding: var(--space-card); }
.stat { min-width: 0; }
.stat .value { font-size: 24px; font-weight: 700; overflow-wrap: anywhere; letter-spacing: -.5px; }
.stat .label, .stat .sub { font-size: 12px; }
.stat.hero { background: var(--surface-highlight); border-color: var(--border-brand); color: var(--text); box-shadow: none; }
.stat.hero .label, .stat.hero .sub { color: var(--text-secondary); }
.stat.hero .value { color: var(--primary); }
.stat-mini .value { font-weight: 700; }
.section-title { padding-left: 0; margin: 20px 0 12px; font-size: 14px; font-weight: 600; gap: 8px; flex-wrap: wrap; }
.section-title::before { display: none; }
.panel-head h3, .chart-title, .lc-title, .archive-section-head h4 { font-size: 15px; font-weight: 600; }
.lc-sub { font-size: 13px; }
.lc-metrics > div { border-radius: var(--radius-sm); }
.tag { border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 500; }
.tag.orange { color: var(--orange); }
.tag.gray { background: var(--surface-subtle); }
.dash-filter-card, .quote-settings-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dash-filter-hint, .quote-settings-note { border-top: 1px solid var(--border); }
.dash-filter-scope, .quote-settings-head .quote-private-badge { color: var(--primary); background: var(--primary-soft); border-radius: 6px; }
.todo-tile { background: var(--card); border-color: var(--border); border-radius: var(--radius-sm); padding: 12px 6px; }
.todo-tile .tt-n { color: var(--orange); font-weight: 700; }
.todo-tile:active { background: var(--orange-soft); }
.work-status-card { background: var(--surface-highlight); border-color: var(--border-brand); }
.work-status-card > div:nth-child(2) { color: var(--primary); }
.bar-row .bar-fill { background: var(--primary); }
.income-progress span { background: var(--green); }
.chart-legend .leg .leg-l, .bar-row .bar-l { color: var(--text-secondary); }
.expense-stats strong { color: var(--text); font-size: 24px; font-weight: 700; }
.cash-flow-metrics > div:last-child { background: var(--red-soft); }
.reconcile-card { border-left: 3px solid var(--green); background: var(--green-soft); }

/* 同一套线条图标。正文中的图标跟随字号，导航和头像保留独立尺寸。 */
.lc-title .ui-icon, .lc-sub .ui-icon, .tt-l .ui-icon, .stat-mini .label .ui-icon,
.chip .ui-icon, .expense-category-name .ui-icon, .work-status-card .ui-icon {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: 3px;
}
.btn .ui-icon { width: 18px; height: 18px; }
.menu-item .ico { border-radius: var(--radius-sm); }
.menu-cat { color: var(--muted); letter-spacing: 0; }
.profile-head { background: var(--card); color: var(--text); padding: 20px 16px; }
.profile-head .name { font-size: 20px; }
.profile-head .meta { opacity: 1; color: var(--muted); }
.profile-head .prof-edit { background: var(--surface-subtle); color: var(--text-secondary); }
.profile-head .prof-avatar, .avatar-edit-button { background: var(--primary-soft); color: #4b7bca; }
.archive-hero, .archive-section { border-radius: var(--radius); }
.archive-tabs { background: var(--bg); }
.archive-avatar { color: var(--primary); background: var(--primary-soft); }
.archive-count { background: var(--surface-subtle); color: var(--muted); }
.archive-chips span { color: var(--primary); background: var(--primary-soft); }

/* 会话延续导航的蓝色，不另设聊天专属主题。 */
.chat-row { padding: 13px; }
.chat-row .ava, .contact-row .ava { color: var(--primary); background: var(--primary-soft); }
.chat-row .ava .ui-icon { width: 22px; height: 22px; }
.contact-row .ava .ui-icon { width: 19px; height: 19px; }
.msg.out { background: var(--surface-highlight); border: 1px solid var(--border-brand); color: var(--text); }
.msg.sys { background: var(--surface-subtle); color: var(--text-secondary); }
.msg .time { color: var(--muted); }
.chat-input textarea, .chat-send, .chat-add { border-radius: var(--radius-sm); }
.chat-tool-grid button > span { border-color: var(--border); border-radius: var(--radius-sm); color: var(--primary); background: var(--primary-soft); }
.chat-status { background: var(--orange-soft); color: var(--orange); }

/* 登录、弹窗、空状态与内部页面共享基础样式。 */
.auth-wrap { background: var(--bg); padding: 28px 22px; }
.auth-logo { color: var(--primary); }
.auth-logo .small { color: var(--muted); opacity: 1; }
.auth-card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.auth-title { font-size: 20px; }
.demo-tip { background: var(--primary-soft); color: var(--text-secondary); border-radius: var(--radius-sm); }
.modal-head h3 { font-size: 16px; font-weight: 600; }
.modal-head .close { display: flex; align-items: center; justify-content: center; flex: none; min-width: 36px; min-height: 36px; border-radius: var(--radius-sm); color: var(--text-secondary); }
.modal-head .close:active { background: var(--surface-subtle); }
.modal-head .close .ui-icon { width: 21px; height: 21px; }
.modal-body { background: var(--card); }
.empty { font-size: 13px; color: var(--muted); }
.uploader, .sig-canvas { border-color: #cbd5e1; border-radius: var(--radius-sm); }
th { color: var(--text-secondary); background: var(--bg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.settle-card { background: var(--orange-soft); border-color: #ecdbb9; border-radius: var(--radius); }
.settle-amount { color: var(--orange); font-weight: 700; }
.period-card { background: var(--surface-subtle); border-color: var(--border); border-radius: var(--radius-sm); }
.pay-col, .wp-row { border: 1px solid var(--border); border-radius: var(--radius); }
.pay-col .pay-main { font-weight: 700; }
.wp-ava { background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-sm); }
.file-card .ui-icon { width: 20px; height: 20px; color: var(--primary); }
.work-status-card .btn:disabled { opacity: 1; color: #8a97a9; background: #e8edf4; border-color: #e8edf4; }
.stat-mini, .lc-metrics > div { min-width: 0; }
.stat-mini .value, .lc-metrics .m-value { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  .list-card > .pay-sub3 { grid-template-columns: minmax(0, 1fr); }
  .list-card > .pay-sub3 > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
  .list-card > .pay-sub3 b { white-space: normal; overflow-wrap: anywhere; text-align: right; }
}