/* 一记 · 双主题变量（默认浅色，html[data-theme=dark] 切深色）；核心色板一律引用 design-tokens.css 的语义 token，
   唯一真源是 design-system/yiji/design-tokens.json；字体：标题 Caveat、正文/数字 Quicksand（本地 woff2） */
@import url("design-tokens.css?v=4");

/* 字体：Caveat（标题/手写）+ Quicksand（正文/数字），本地变量字重 400-700 */
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/caveat-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Quicksand';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/quicksand-latin.woff2') format('woff2');
}

:root{
  --font-heading:   'Caveat','PingFang SC','Microsoft YaHei',cursive;
  --font-body:      'Quicksand','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-number:    'Quicksand',system-ui,sans-serif;
  --bg:             var(--color-background);
  --panel:          var(--color-surface);
  --panel-strong:   var(--color-surface-muted);
  --ink:            var(--color-foreground);
  --sub:            var(--color-text-subtle);
  --sub-strong:     var(--color-text-muted);
  --line:           var(--color-border);
  --line-strong:    var(--color-border-strong);
  --hover:          var(--color-surface-muted);
  --accent:         var(--color-primary);
  --accent-strong:  var(--color-primary-text);
  --accent-weak:    rgba(37,99,235,.10);
  /* ⚠ --warn / --ok / --bad 在本文件里只当**文字**色用（9 处全是 color:，没有一处当填充）；
     取值是文字安全档 —— 语义填充色压浅色玻璃不达 AA（warning 1.9:1 / success 3.3:1 / danger 4.1:1） */
  --warn:           var(--color-warning-text);
  --warn-weak:      rgba(245,158,11,.10);
  --ok:             var(--color-success-text);
  --bad:            var(--color-danger-text);
  --grad:           linear-gradient(135deg, var(--color-primary), var(--color-tertiary) 50%, var(--color-secondary));
  --radius:         var(--radius-card);
  --shadow:         var(--shadow-card);
  --shadow-lg:      var(--shadow-float);
  --overlay-bg:     rgba(24,27,35,.35);
  --mask-bg:        rgba(246,247,251,.8);
  --toast-bg:       rgba(24,27,35,.92);
  /* 玻璃色斑与玻璃底/边缘：与 Android Theme.kt 的 glass.blobs / glass.fill / border-start 同值。
     ⚠ 色斑要"亮而饱和"而不是"深"：色斑互相重叠，深色叠起来最深处亮度只有 0.47，fg-2 压上去就掉到 4.1:1 */
  --glow-a:         rgba(155,184,255,.55);
  --glow-b:         rgba(193,169,255,.45);
  --glow-c:         rgba(134,227,214,.42);
  --glow-d:         rgba(255,179,209,.34);
  --glass-panel:    rgba(255,255,255,.56);
  --glass-bar:      rgba(255,255,255,.56);
  --sheen:          rgba(255,255,255,.40);
}
/* 深夜只覆盖“带 alpha 的功能性变量”；色板本身已通过 token 级联自动切到深夜值 */
html[data-theme="dark"]{
  --accent-weak:    rgba(96,165,250,.18);
  --warn-weak:      rgba(251,191,36,.14);
  --overlay-bg:     rgba(4,6,10,.6);
  --mask-bg:        rgba(5,7,12,.72);
  --toast-bg:       rgba(20,24,36,.92);
  --glow-a:         rgba(30,58,150,.72);
  --glow-b:         rgba(62,31,122,.65);
  --glow-c:         rgba(10,90,80,.58);
  --glow-d:         rgba(97,26,68,.52);
  --glass-panel:    rgba(19,26,41,.76);
  --glass-bar:      rgba(19,26,41,.76);
  --sheen:          rgba(255,255,255,.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{color-scheme:light;}
html[data-theme="dark"]{color-scheme:dark;}
body{
  font-family:var(--font-body);
  background:
    /* 4 团色斑的圆心/半径与 Android 的 BgBlobSpecs 对齐（半径 = 比例 × 屏幕长边，用 vmax 表达）。
       ⚠ 半径重叠：色相只能"亮而饱和"，深色叠起来最深处亮度只剩 0.47，--color-text-muted 会掉到 4.1:1 */
    radial-gradient(circle 95vmax at 8% 5%, var(--glow-a), transparent),
    radial-gradient(circle 88vmax at 99% 18%, var(--glow-b), transparent),
    radial-gradient(circle 92vmax at 1% 97%, var(--glow-c), transparent),
    radial-gradient(circle 78vmax at 96% 99%, var(--glow-d), transparent),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--sub);}
.wrap{display:flex; min-height:100vh;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading); font-weight:700; line-height:1.2;}
.ic{width:1em; height:1em; vertical-align:-.12em; display:inline-block; flex:0 0 auto;}

/* 侧边栏 */
.side{
  width:208px; flex:0 0 208px;
  background:var(--glass-bar);
  backdrop-filter:blur(var(--primitive-blur-xl)); -webkit-backdrop-filter:blur(var(--primitive-blur-xl));
  box-shadow:inset -1px 0 0 var(--sheen);
  border-right:1px solid var(--line);
  color:var(--sub);
  display:flex; flex-direction:column; padding:22px 14px;
  position:sticky; top:0; height:100vh;
}
.side .logo{font-family:var(--font-heading); font-size:22px; font-weight:700; letter-spacing:2px; padding:0 10px 20px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.side .ver{font-size:10px; background:var(--accent-weak); color:var(--accent-strong);
  padding:2px 7px; border-radius:var(--radius-pill); vertical-align:middle; letter-spacing:0;}
.side .nav{list-style:none;}
.side .nav li{padding:11px 13px; border-radius:var(--radius-control); font-size:14px; cursor:pointer;
  display:flex; align-items:center; gap:9px; margin-bottom:3px;
  color:var(--sub); transition:all .18s ease;}
.side .nav li .ic{width:16px; height:16px;}
.side .nav li:hover{background:var(--panel-strong); color:var(--ink); transform:translateX(2px);}
.side .nav li.on{background:var(--accent-weak); color:var(--accent-strong); font-weight:700;
  border:1px solid var(--line-strong);}
.side .foot{margin-top:auto; font-size:11px; color:var(--sub); line-height:1.8; padding:14px 10px;
  border-top:1px solid var(--line); opacity:.9;}

/* 主区 */
.main{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{
  height:60px; flex:0 0 60px;
  background:var(--glass-bar);
  backdrop-filter:blur(var(--primitive-blur-xl)); -webkit-backdrop-filter:blur(var(--primitive-blur-xl));
  box-shadow:inset 0 -1px 0 var(--sheen);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 24px;
  position:sticky; top:0; z-index:50;
}
.space-seg{display:flex; border:1px solid var(--line); border-radius:var(--radius-control); overflow:hidden; background:var(--panel);}
.space-seg span{padding:7px 15px; font-size:13px; cursor:pointer; color:var(--sub); transition:all .15s; display:flex; align-items:center; gap:6px;}
.space-seg span:hover{color:var(--ink);}
.space-seg span.on{background:var(--accent-weak); color:var(--accent-strong); font-weight:700;}
.search{flex:1; font-size:13px; color:var(--sub);}
.me{font-size:12px; color:var(--sub); display:flex; align-items:center; gap:7px;}
.content{flex:1; padding:26px 28px; overflow-y:auto;}
.hide{display:none !important;}

/* 卡片（玻璃拟态：半透明底 + 玻璃描边 + 模糊） */
.card{
  background:var(--glass-panel);
  border:1px solid var(--color-glass-border);
  border-radius:var(--radius);
  padding:18px 20px; margin-bottom:16px;
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen);
  backdrop-filter:blur(var(--primitive-blur-lg)); -webkit-backdrop-filter:blur(var(--primitive-blur-lg));
  transition:box-shadow .2s ease, border-color .2s ease;
}
.card:hover{border-color:var(--line-strong);}
.card.hero{ filter:saturate(.72) brightness(.9); }
.pt{font-family:var(--font-heading); font-size:16.5px; font-weight:700; letter-spacing:.2px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:space-between;}
.pt .sub{font-family:var(--font-body); font-size:12px; color:var(--sub); font-weight:400;}

/* 按钮 */
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-control); font-size:13px; font-weight:700;
  cursor:pointer; border:1px solid transparent; transition:all .18s ease; user-select:none;}
.btn.primary{background:var(--grad); color:#fff;
  box-shadow:0 4px 14px rgba(37,99,235,.30);}
.btn.primary:hover{filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(37,99,235,.38);}
.btn.primary:active{transform:translateY(0) scale(.98);}
.btn.ghost{background:var(--panel); color:var(--sub-strong); border-color:var(--line-strong);}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-weak);}
.btn.warn{background:linear-gradient(135deg, var(--color-gradient-expense-start), var(--color-gradient-expense-end)); color:#fff;}
.btn.mini{padding:4px 11px; font-size:12px; border-radius:var(--radius-control);}
.btn .ic{width:15px; height:15px;}
.btn:disabled{opacity:.45; cursor:default;}

/* KPI */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px;}
.kpi{
  background:var(--glass-panel);
  border:1px solid var(--color-glass-border);
  border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen);
  backdrop-filter:blur(var(--primitive-blur-lg)); -webkit-backdrop-filter:blur(var(--primitive-blur-lg));
  position:relative; overflow:hidden;
}
.kpi::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(240px 90px at 85% -20%, var(--accent-weak), transparent 70%);}
.kpi .lbl{font-size:12px; color:var(--sub);}
.kpi .num{font-family:var(--font-number); font-size:27px; font-weight:700; margin-top:5px; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;}
/* AI 用量 / 云端图片页的标记用 .k/.v 命名 */
.kpi .k{font-size:12px; color:var(--sub);}
.kpi .v{font-family:var(--font-number); font-size:27px; font-weight:700; margin-top:5px; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;}
.kpi .delta{font-size:12px; margin-top:4px; color:var(--sub);}
.down{color:var(--ok);} .up{color:var(--warn);}

/* 网格与图表 */
.grid2{display:grid; grid-template-columns:1.2fr 1fr; gap:14px;}
.bars{display:flex; align-items:flex-end; gap:4px; height:150px; padding-top:10px;}
.bars i{flex:1; border-radius:6px 6px 2px 2px; min-height:3px; position:relative;
  background:linear-gradient(180deg, var(--color-gradient-income-start), var(--color-gradient-income-end));
  transition:filter .15s;}
.bars i:hover{filter:brightness(1.1);}
.bars i span{position:absolute; bottom:-19px; left:50%; transform:translateX(-50%);
  font-size:9px; color:var(--sub); white-space:nowrap;}
.cat-row{display:flex; align-items:center; gap:8px; margin:8px 0; font-size:13px;}
.cat-name{width:60px; color:var(--sub-strong);}
.cat-bar{flex:1; height:9px; background:var(--panel-strong); border-radius:6px; overflow:hidden;}
.cat-bar i{display:block; height:100%; border-radius:6px;}
.cat-pct{width:96px; text-align:right; color:var(--sub); font-size:12px;
  font-variant-numeric:tabular-nums;}

/* 表格 */
table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; color:var(--sub); font-weight:600; font-size:12px;
  padding:10px; border-bottom:1px solid var(--line); white-space:nowrap; letter-spacing:.3px;}
td{padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr{transition:background .15s;}
tr:hover{background:var(--hover);}
tr.warn-row{background:var(--warn-weak);}

/* chips 与标签 */
.chip{font-size:11px; padding:3px 9px; border-radius:var(--radius-pill);
  background:var(--panel-strong); border:1px solid var(--line);
  color:var(--sub-strong); white-space:nowrap; display:inline-block; margin:1px 3px 1px 0;}
.chip.ok{background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.25); color:var(--ok);}
.chip.warn{background:var(--warn-weak); border-color:rgba(245,158,11,.3); color:var(--warn);}
.chip.blue{background:var(--accent-weak); border-color:rgba(37,99,235,.25); color:var(--accent-strong);}
.chip.nchip{cursor:pointer; transition:all .15s;}
.chip.nchip:hover{border-color:var(--accent); color:var(--accent-strong);}
.chip.nchip.on{background:var(--accent-weak); border-color:rgba(37,99,235,.35); color:var(--accent-strong); font-weight:700;}

/* 工具行与控件 */
.toolrow{display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
.sel{border:1px solid var(--line); border-radius:var(--radius-control); padding:7px 12px; font-size:13px;
  background:var(--panel); color:var(--ink); cursor:pointer;}
.sel:hover{border-color:var(--accent);}
.sel option{background:var(--panel); color:var(--ink);}
input[type=date]{color:var(--ink);}
input[type=checkbox]{accent-color:var(--color-primary);}
.bulk{background:var(--accent-weak); border:1px solid rgba(37,99,235,.25);
  border-radius:var(--radius); padding:9px 14px; font-size:13px;
  display:flex; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
.bulk b{color:var(--accent-strong);}
.note-banner{font-size:12.5px; color:var(--sub); background:var(--panel-strong);
  border:1px solid var(--line); border-radius:var(--radius-control); padding:9px 12px; margin-bottom:12px;}
.banner-warn{font-size:12.5px; color:var(--warn); background:linear-gradient(0deg, var(--warn-weak), var(--warn-weak)), var(--glass-panel);
  border:1px solid rgba(245,158,11,.3); border-radius:var(--radius-control); padding:9px 12px; margin-bottom:12px;}
.amt{font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums;}

/* 表单 */
/* .inp 是通用规则（捕捉面板 /「补记一笔」的输入框不在 .fld 里）；.fld .inp 只作更精细覆盖 */
.inp{width:100%; border:1px solid var(--line); border-radius:var(--radius-control); padding:10px 12px;
  font-size:14px; font-family:inherit; color:var(--ink);
  background:var(--panel); transition:all .18s;}
.inp:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak);}
/* 只有单行控件抬到 40px 触控高度；textarea 交回给各自规则（rows / min-height）决定 */
input.inp,select.inp{min-height:40px;}
textarea.inp{resize:none;}
.fld{margin-bottom:12px;}
.fld label{font-size:12px; color:var(--sub); display:block; margin-bottom:5px;}
.fld .inp{width:100%; border:1px solid var(--line); border-radius:var(--radius-control); padding:10px 12px;
  font-size:14px; font-family:inherit; color:var(--ink);
  background:var(--panel); transition:all .18s;}
.fld .inp:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);}
.fld select.inp option{background:var(--panel); color:var(--ink);}
.row2{display:flex; gap:10px;}
.row2 .fld{flex:1;}

/* 弹层（玻璃拟态） */
.overlay{position:fixed; inset:0; background:var(--overlay-bg); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:90;}
.modal{
  background:var(--glass-panel);
  border:1px solid var(--color-glass-border);
  border-radius:var(--radius-card); padding:26px; width:500px; max-width:92vw; max-height:86vh; overflow-y:auto;
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--sheen);
  backdrop-filter:blur(var(--primitive-blur-xl)); -webkit-backdrop-filter:blur(var(--primitive-blur-xl));
}
.modal .btnrow{margin-top:6px;}
.btnrow{display:flex; gap:10px; margin-top:4px;}
.btnrow .btn{flex:1; text-align:center; justify-content:center;}

/* 登录（玻璃拟态） */
.authmask{position:fixed; inset:0; background:var(--mask-bg); backdrop-filter:blur(10px);
  display:none; align-items:center; justify-content:center; z-index:100;}
.authcard{
  background:var(--glass-panel);
  border:1px solid var(--color-glass-border);
  border-radius:var(--radius-card); padding:34px 30px; width:360px; text-align:center;
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--sheen);
  backdrop-filter:blur(var(--primitive-blur-xl)); -webkit-backdrop-filter:blur(var(--primitive-blur-xl));
  position:relative; overflow:hidden;
}
.authcard::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(300px 140px at 50% -30%, var(--accent-weak), transparent 70%);}
.authcard .logo{font-family:var(--font-heading); font-size:30px; font-weight:700; letter-spacing:3px; position:relative;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.authcard .sub{font-size:12px; color:var(--sub); margin:8px 0 22px; position:relative;}
.authcard .inp{width:100%; border:1px solid var(--line); border-radius:var(--radius-control); padding:12px 14px;
  font-size:14px; margin-bottom:11px; display:block; font-family:inherit; color:var(--ink);
  background:var(--panel); transition:all .18s; position:relative;}
.authcard .inp:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);}
.hint{font-size:12px; color:var(--sub); margin-top:14px; position:relative;}

/* 提醒/待办条目 */
.todo{display:flex; align-items:center; gap:10px; padding:12px 0;
  border-bottom:1px dashed var(--line); font-size:13.5px;}
.todo .t{flex:1;}
.todo .m{font-size:12px; color:var(--sub);}
.todo .box{width:18px; height:18px; border:1.5px solid var(--line-strong); border-radius:6px; flex:0 0 18px;}
.rep-txt{font-size:13.5px; line-height:2; color:var(--sub-strong); white-space:pre-wrap;}

/* 快捷选择 seg（.seg2/.s2；旧的 .seg/.s 已无任何引用，连同日历 .cal 一并删除） */
.seg2{display:flex; gap:10px;}
.seg2 .s2{flex:1; text-align:center; padding:12px 8px; border:1px solid var(--line);
  border-radius:var(--radius-control); font-size:13px; color:var(--sub); cursor:pointer; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:6px;}
.seg2 .s2:hover{color:var(--ink); border-color:var(--line-strong);}
.seg2 .s2.on{border-color:var(--accent); background:var(--accent-weak); color:var(--accent-strong); font-weight:700;}

/* 个人资料 + 头像
   头像取值与 App 完全一致：`default:<name>`（内置，见 web/avatars/<name>.webp）或 `data:image/...;base64,...`（上传） */
.ava{width:40px; height:40px; border-radius:50%; flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; overflow:hidden; background:var(--grad); color:#fff; font-weight:700; font-size:15px;
  border:1px solid var(--color-glass-border); user-select:none;}
.ava img{width:100%; height:100%; object-fit:cover; display:block;}
.ava.sm{width:22px; height:22px; font-size:10px; border-width:0;}
.ava.lg{width:64px; height:64px; font-size:24px;}
.prof-head{display:flex; align-items:center; gap:14px;}
.prof-head .meta{flex:1; min-width:0;}
.prof-head .meta .nm{font-size:15px; font-weight:700;}
.prof-head .meta .ph{font-size:12px; color:var(--sub);}
.ava-row{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.ava-row .lb{width:104px; flex:0 0 104px; font-size:12px; color:var(--sub);}
.ava-row .ava-grid{flex:1;}
.ava-grid{display:flex; flex-wrap:wrap; gap:8px;}
.ava-tile{width:38px; height:38px; border-radius:50%; overflow:hidden; cursor:pointer; padding:0;
  border:2px solid var(--line); background:var(--panel-strong); display:flex; align-items:center;
  justify-content:center; transition:all .15s;}
.ava-tile:hover{border-color:var(--line-strong); transform:translateY(-1px);}
.ava-tile.on{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak);}
.ava-tile img{width:100%; height:100%; object-fit:cover; display:block;}

/* 提示 */
.toast{position:fixed; top:74px; right:26px;
  background:var(--toast-bg); backdrop-filter:blur(var(--primitive-blur-md)); -webkit-backdrop-filter:blur(var(--primitive-blur-md));
  color:#fff; padding:11px 18px; border-radius:var(--radius-control); font-size:13px; z-index:99;
  opacity:0; transform:translateY(-6px); transition:all .3s ease;
  /* 纯提示，不该吃掉点击：手机端它正好盖在 AI 悬浮球上方（z-index 高于悬浮球） */
  pointer-events:none;
  box-shadow:0 12px 40px rgba(24,27,35,.25);}
.toast.show{opacity:1; transform:translateY(0);}

/* 时间线（只保留实际使用的 .tl-tags） */
.tl-tags{margin-top:5px; display:flex; gap:6px; flex-wrap:wrap;}

/* ============ AI 助手悬浮球 + 对话面板（POST /api/assistant/ask） ============ */
.ai-fab-w{position:fixed; right:28px; bottom:28px; width:58px; height:58px; border-radius:50%; background:radial-gradient(circle at 32% 28%, var(--color-gradient-ai-start), var(--color-gradient-ai-mid) 55%, var(--color-gradient-ai-end)); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 8px rgba(0,0,0,.18); transition:transform .2s, box-shadow .2s; z-index:85; border:1px solid rgba(255,255,255,.22);}
.ai-fab-w .fab-bubble{position:absolute; border-radius:50%; background:rgba(255,255,255,.5); pointer-events:none;}
.ai-fab-w .fab-bubble.b1{width:8px; height:8px; top:10px; left:12px; animation:fabFloat 3.4s ease-in-out infinite;}
.ai-fab-w .fab-bubble.b2{width:5px; height:5px; top:22px; right:11px; background:rgba(255,255,255,.4); animation:fabFloat 4.2s ease-in-out .7s infinite;}
.ai-fab-w .fab-bubble.b3{width:6px; height:6px; bottom:11px; left:15px; background:rgba(255,255,255,.35); animation:fabFloat 3.8s ease-in-out 1.3s infinite;}
.ai-fab-w .fab-ripple{position:absolute; inset:0; border-radius:50%; pointer-events:none;}
.ai-fab-w .fab-ripple::before, .ai-fab-w .fab-ripple::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(167,139,250,.65); animation:fabRipple 3s cubic-bezier(.2,.6,.35,1) infinite;}
.ai-fab-w .fab-ripple::after{animation-delay:1.5s; border-color:rgba(139,92,246,.4);}
.ai-fab-w::after{content:""; position:absolute; inset:-5px; border-radius:50%; background:radial-gradient(circle, rgba(139,92,246,.4), transparent 65%); z-index:-1; animation:aifabPulse 2.8s ease-in-out infinite;}
.ai-fab-w:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 34px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.28);}
.ai-fab-w svg{width:28px; height:28px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); animation:fabSway 4.5s ease-in-out infinite;}
.ai-fab-w:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
@keyframes fabFloat{0%,100%{transform:translateY(0); opacity:.7;}50%{transform:translateY(-3px); opacity:1;}}
@keyframes fabRipple{0%{transform:scale(1); opacity:.8;}100%{transform:scale(1.9); opacity:0;}}
@keyframes aifabPulse{0%,100%{opacity:.45; transform:scale(1);}50%{opacity:1; transform:scale(1.14);}}
@keyframes fabSway{0%,100%{transform:rotate(0);}25%{transform:rotate(-4deg);}75%{transform:rotate(4deg);}}
@keyframes aiSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .ai-fab-w .fab-ripple::before, .ai-fab-w .fab-ripple::after, .ai-fab-w .fab-bubble, .ai-fab-w svg, .ai-fab-w::after, .ai-spinner{animation:none;} }

/* AI 对话面板（玻璃拟态） */
.ai-panel{position:fixed; right:28px; bottom:96px; width:352px; max-width:calc(100vw - 40px); background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-card); box-shadow:var(--shadow-lg, 0 10px 30px rgba(0,0,0,.25)), inset 0 1px 0 var(--sheen); backdrop-filter:blur(var(--primitive-blur-lg)); -webkit-backdrop-filter:blur(var(--primitive-blur-lg)); z-index:121; overflow:hidden;
  /* 脚本展开时设 display:flex：这里必须保持纵向排列 */
  flex-direction:column;}
.ai-panel-h{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(139,92,246,.06));}
.ai-panel-h svg{width:18px; height:18px; vertical-align:-4px; color:var(--color-gradient-ai-mid);}
.ai-panel-t{font-family:var(--font-heading);}
.ai-panel-x{color:var(--sub); cursor:pointer; font-size:15px; padding:2px 6px; border-radius:6px;}
.ai-panel-x:hover{color:var(--ink); background:var(--hover);}
.ai-panel-body{padding:14px 16px; max-height:min(58vh, 420px); overflow-y:auto;}
.ai-bubble{font-size:13px; line-height:1.7; background:var(--accent-weak); border-radius:var(--radius) var(--radius) var(--radius) 4px; padding:9px 12px; margin-bottom:8px; color:var(--ink); width:fit-content; max-width:100%;}
.ai-bubble.ai-me{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius) var(--radius) 4px var(--radius); margin-left:auto; color:var(--sub-strong);}
.ai-chips{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px;}
.ai-chips .chip{cursor:pointer;}
.ai-chips .chip:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-weak);}
.ai-scope{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub); margin:2px 0 10px;}
.ai-scope .seg2 .s2{flex:0 0 auto; padding:4px 10px; font-size:12px; border-radius:999px;}
.ai-meta{font-size:11px; color:var(--sub); margin:-4px 0 10px; line-height:1.7;}
.ai-notice{font-size:11.5px; color:var(--warn); background:var(--warn-weak); border:1px solid rgba(245,158,11,.25); border-radius:var(--radius-control); padding:6px 9px; margin:-2px 0 10px; line-height:1.6;}
.ai-loading{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub); padding:2px 0 6px;}
.ai-spinner{width:13px; height:13px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:aiSpin .8s linear infinite; flex:0 0 auto;}
.ai-err{font-size:12px; color:var(--bad); line-height:1.6; padding:2px 0 6px;}
.ai-panel-in{display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line);}
.ai-panel-input{flex:1; min-width:0; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius-control); padding:9px 12px; font-size:13px; color:var(--ink); font-family:inherit;}
.ai-panel-input:focus{outline:none; border-color:var(--accent);}
.ai-panel-mic{width:34px; height:34px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; flex:0 0 auto;}
.ai-panel-mic:hover{border-color:var(--accent); color:var(--accent-strong);}
.ai-panel-mic .ic{width:16px; height:16px; vertical-align:baseline;}
.ai-panel-mic.rec{border-color:var(--accent); background:var(--accent-weak); color:var(--accent-strong);}
.ai-panel-send{background:var(--accent); color:#fff; border:none; border-radius:var(--radius-control); padding:9px 14px; font-size:13px; font-weight:700; cursor:pointer; flex:0 0 auto; user-select:none;}
.ai-panel-send.busy{opacity:.6; cursor:default;}

/* 窄屏：面板贴边收窄，悬浮球缩小并让出底部空间 */
@media (max-width: 620px){
  .ai-panel{right:12px; left:12px; width:auto; bottom:84px;}
  .ai-fab-w{right:16px; bottom:16px; width:52px; height:52px;}
  .ai-fab-w svg{width:25px; height:25px;}
}

@media (max-width: 1000px){ .grid2{grid-template-columns:1fr;} .kpis{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 620px){ .ava-row{flex-wrap:wrap; gap:4px;} .ava-row .lb{width:100%; flex:1 1 100%;} }

/* ==================== toC 外壳与内容流 ==================== */
/* ---- 通用原子 ---- */
.block{width:100%; justify-content:center;}
.sub{font-size:12px; color:var(--sub); font-weight:400; font-family:var(--font-body);}
.iconbtn{
  width:38px; height:38px; flex:0 0 38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-control); border:1px solid transparent; background:transparent;
  color:var(--sub-strong); cursor:pointer; transition:background var(--motion-duration-fast) var(--motion-easing),
  color var(--motion-duration-fast) var(--motion-easing), border-color var(--motion-duration-fast) var(--motion-easing);
}
.iconbtn .ic{width:19px; height:19px;}
.iconbtn:hover{background:var(--hover); color:var(--ink);}
.iconbtn:active{transform:scale(.94);}
.iconbtn:focus-visible{outline:2px solid var(--color-ring); outline-offset:2px;}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 2px 10px;}
.section-head h2{font-family:var(--font-heading); font-size:19px; letter-spacing:.2px;}
.section-head .more{font-size:12px; color:var(--accent-strong); cursor:pointer; font-weight:700;}
.section-head .more:hover{text-decoration:underline;}

/* ---- 侧栏：品牌头 + 底部捕捉入口 ---- */
.side-head{display:flex; align-items:center; gap:8px; padding:0 10px 18px;}
.side .logo{font-family:var(--font-heading); font-size:24px; font-weight:700; letter-spacing:2px; padding:0;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.side .ver{font-size:10px; background:var(--accent-weak); color:var(--accent-strong);
  padding:2px 7px; border-radius:var(--radius-pill); letter-spacing:0;}
.side-foot{margin-top:auto; padding-top:14px; border-top:1px solid var(--line);}
.side-foot .foot-note{font-size:11px; color:var(--sub); line-height:1.8; padding:12px 10px 0; opacity:.85;}

/* ---- 顶栏 ---- */
.topbar-title{font-family:var(--font-heading); font-size:19px; font-weight:700; letter-spacing:.4px; display:none;}
.monthchip{font-size:12px; color:var(--sub-strong); background:var(--panel-strong); border:1px solid var(--line);
  padding:5px 11px; border-radius:var(--radius-pill); white-space:nowrap; font-variant-numeric:tabular-nums;}
.me{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sub-strong); cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-pill); padding:4px 10px 4px 4px;
  font-family:inherit; transition:background var(--motion-duration-fast) var(--motion-easing);}
.me:hover{background:var(--hover);}
.me .ava{width:28px; height:28px; font-size:12px;}
.only-mobile{display:none;}

/* ---- 底部标签栏（移动端主导航） ---- */
.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:80;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:var(--glass-bar);
  backdrop-filter:blur(var(--primitive-blur-xl)); -webkit-backdrop-filter:blur(var(--primitive-blur-xl));
  border-top:1px solid var(--line); box-shadow:0 -1px 0 var(--sheen) inset;
  display:flex; align-items:flex-end; justify-content:space-around;
}
.tab{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 0 5px;
  background:none; border:none; cursor:pointer; color:var(--sub); font-family:inherit; font-size:10.5px;
  border-radius:12px; transition:color var(--motion-duration-fast) var(--motion-easing);
}
.tab > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}
.tab .ic{width:22px; height:22px;}
.tab.on{color:var(--accent-strong); font-weight:700;}
.tab.on .ic{stroke-width:2.2;}
.tab:active{transform:scale(.94);}
.tab-capture{justify-content:center;}
.tab-capture-inner{
  width:52px; height:52px; margin-top:-20px; border-radius:50%;
  background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.35);
  border:2px solid var(--bg); transition:transform var(--motion-duration-fast) var(--motion-easing);
}
.tab-capture-inner .ic{width:26px; height:26px;}
.tab-capture:active .tab-capture-inner{transform:scale(.92);}

/* ---- 移动导航抽屉 / 桌面「更多」抽屉 ---- */
.drawer-mask,.sidedrawer-mask{position:fixed; inset:0; background:var(--overlay-bg); backdrop-filter:blur(3px);
  z-index:110; display:flex; animation:fadeIn var(--motion-duration-fast) var(--motion-easing);}
.drawer{
  width:82vw; max-width:340px; height:100%; padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  background:var(--panel); border-right:1px solid var(--line); overflow-y:auto;
  box-shadow:var(--shadow-lg); animation:slideInLeft var(--motion-duration-normal) var(--motion-easing);
}
.drawer-head{display:flex; align-items:center; gap:12px; padding:4px 6px 18px; border-bottom:1px solid var(--line);}
.drawer-me{display:flex; flex-direction:column; gap:2px; min-width:0;}
.drawer-me b{font-size:15px;}
.drawer-me span{font-size:12px; color:var(--sub);}
.drawer-list{margin-top:12px;}
.drawer-list .ditem{
  display:flex; align-items:center; gap:12px; padding:13px 12px; border-radius:var(--radius-control);
  font-size:14px; color:var(--sub-strong); cursor:pointer; transition:background var(--motion-duration-fast) var(--motion-easing);
}
.drawer-list .ditem:hover{background:var(--hover); color:var(--ink);}
.drawer-list .ditem.on{background:var(--accent-weak); color:var(--accent-strong); font-weight:700;}
.drawer-list .ditem .ic{width:19px; height:19px; color:var(--sub);}
.drawer-list .ditem.on .ic{color:var(--accent-strong);}
.drawer-list .dgroup{font-size:11px; color:var(--sub); padding:16px 12px 6px; letter-spacing:.6px;}
.sidedrawer-mask{align-items:center; justify-content:center;}
.sidedrawer{width:420px; max-width:92vw; max-height:80vh; overflow-y:auto; padding:22px;
  background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--sheen);
  backdrop-filter:blur(var(--primitive-blur-xl)); -webkit-backdrop-filter:blur(var(--primitive-blur-xl));
  animation:popIn var(--motion-duration-normal) var(--motion-easing);}
.sd-head{font-family:var(--font-heading); font-size:20px; font-weight:700; margin-bottom:14px;}
.sd-list{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.sd-list .ditem{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius-control); font-size:12.5px; color:var(--sub-strong);
  cursor:pointer; background:var(--panel); transition:all var(--motion-duration-fast) var(--motion-easing);}
.sd-list .ditem:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-weak); transform:translateY(-2px);}
.sd-list .ditem .ic{width:22px; height:22px;}
.sd-list .ditem.on{border-color:var(--accent); background:var(--accent-weak); color:var(--accent-strong); font-weight:700;}

/* ---- 捕捉面板（底部弹层） ---- */
.sheet-mask{position:fixed; inset:0; background:var(--overlay-bg); backdrop-filter:blur(4px); z-index:130;
  display:flex; align-items:flex-end; justify-content:center; animation:fadeIn var(--motion-duration-fast) var(--motion-easing);}
.sheet{
  width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--color-glass-border);
  border-radius:22px 22px 0 0; padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow-lg);
  animation:sheetUp var(--motion-duration-normal) var(--motion-easing);
}
.sheet-grab{width:38px; height:4px; border-radius:99px; background:var(--line-strong); margin:6px auto 12px; opacity:.7;}
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.sheet-title{font-family:var(--font-heading); font-size:20px; font-weight:700;}
.capture-kinds{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;}
.ckind{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; cursor:pointer;
  background:var(--panel-strong); border:1.5px solid transparent; border-radius:14px;
  font-family:inherit; font-size:12px; color:var(--sub-strong);
  transition:all var(--motion-duration-fast) var(--motion-easing);
}
.ckind .ic{width:21px; height:21px;}
.ckind:hover{transform:translateY(-2px);}
.ckind.on{background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); font-weight:700;}
.capture-body{display:flex; flex-direction:column; gap:12px;}
.capture-ta{width:100%; font-size:15.5px; line-height:1.7; min-height:104px;}
.capture-row{display:flex; gap:10px;}
.capture-row .inp{flex:1; min-width:0;}
.capture-quick{display:flex; flex-wrap:wrap; gap:8px;}
.qchip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px; font-size:12.5px; cursor:pointer;
  background:var(--panel-strong); border:1.5px solid transparent; border-radius:var(--radius-pill);
  color:var(--sub-strong); font-family:inherit;
  transition:all var(--motion-duration-fast) var(--motion-easing);
}
.qchip .ic{width:15px; height:15px;}
.qchip:hover{border-color:var(--line-strong); color:var(--ink);}
.qchip.on{background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); font-weight:700;}
.capture-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px;}
.capture-hint{font-size:11.5px; color:var(--sub);}
.capture-foot .btn.primary{min-width:104px; justify-content:center; padding:11px 20px; font-size:14px;}
.money-amount{display:flex; align-items:center; gap:8px; padding:6px 4px 2px; border-bottom:2px solid var(--line);}
.money-amount .cur{font-family:var(--font-number); font-size:26px; font-weight:700; color:var(--sub);}
.money-amount .inp{border:none; background:transparent; font-family:var(--font-number); font-size:34px;
  font-weight:700; padding:6px 0; box-shadow:none;}
.money-amount .inp:focus{box-shadow:none; border:none;}
.uploadzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  padding:30px 18px; border:1.5px dashed var(--line-strong); border-radius:var(--radius-card);
  background:var(--panel-strong); text-align:center; transition:all var(--motion-duration-fast) var(--motion-easing);
}
.uploadzone:hover{border-color:var(--accent); background:var(--accent-weak);}
.uploadzone .ic{width:28px; height:28px; color:var(--accent-strong);}
.uploadzone b{font-size:14px;}
.uploadzone span{font-size:11.5px; color:var(--sub);}

/* ---- 弹层头（统一关闭按钮位置） ---- */
.modal-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.modal-title{font-family:var(--font-heading); font-size:20px; font-weight:700;}
.modal-head .sub{margin-left:auto;}
.modal-head .iconbtn{margin-left:auto;}
.modal-head .sub + .iconbtn{margin-left:0;}

/* ---- 随想卡片流 ---- */
.nstream{display:flex; flex-direction:column; gap:10px; padding:4px 0 12px;}
.ncard{
  position:relative; padding:14px 15px 12px; cursor:pointer;
  background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen);
  backdrop-filter:blur(var(--primitive-blur-lg)); -webkit-backdrop-filter:blur(var(--primitive-blur-lg));
  transition:transform var(--motion-duration-fast) var(--motion-easing),
             border-color var(--motion-duration-fast) var(--motion-easing),
             box-shadow var(--motion-duration-fast) var(--motion-easing);
  animation:cardIn var(--motion-duration-normal) var(--motion-easing) both;
}
.ncard:hover{transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow-lg);}
.ncard:focus-visible{outline:2px solid var(--color-ring); outline-offset:2px;}
.ncard.done{opacity:.55;}
.ncard.done .ncard-title{text-decoration:line-through;}
.ncard-top{display:flex; align-items:flex-start; gap:10px; margin-bottom:6px;}
.ncard-title{flex:1; font-size:15px; font-weight:600; line-height:1.45; word-break:break-word;}
.ncard-body{font-size:13px; color:var(--sub-strong); line-height:1.65; white-space:pre-wrap; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.ncard-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}
.ncard-foot{display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:9px; border-top:1px dashed var(--line);}
.ncard-foot > *{min-width:0;}
.ncard-time{font-size:11.5px; color:var(--sub); font-variant-numeric:tabular-nums; white-space:nowrap;}
.ncard-actions{margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.nact{
  display:inline-flex; align-items:center; gap:5px; padding:6px 11px; font-size:11.5px; cursor:pointer;
  background:var(--panel-strong); border:1px solid var(--line); border-radius:var(--radius-pill);
  color:var(--sub-strong); font-family:inherit;
  transition:all var(--motion-duration-fast) var(--motion-easing);
}
.nact .ic{width:14px; height:14px;}
.nact:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-weak);}
.nact.on{background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); font-weight:700;}
.ncard-thumb{width:100%; max-height:200px; object-fit:cover; border-radius:12px; margin-top:9px; display:block;}
.catdot{width:8px; height:8px; border-radius:50%; flex:0 0 8px; display:inline-block; margin-right:5px; vertical-align:1px;}
.remindpill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:4px 10px;
  border-radius:var(--radius-pill); background:var(--accent-weak); color:var(--accent-strong); font-weight:600;}
.remindpill .ic{width:13px; height:13px;}
.remindpill.due{background:var(--warn-weak); color:var(--warn);}

/* ---- 总览：捕捉卡 + 随想回流 ---- */
.capture-cta{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:var(--radius-card); font-family:inherit;
  background:var(--glass-panel); border:1px dashed var(--line-strong); color:var(--sub);
  transition:all var(--motion-duration-fast) var(--motion-easing);
}
.capture-cta:hover{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-weak);}
.capture-cta .ic{width:22px; height:22px; flex:0 0 22px; color:var(--accent-strong);}
.capture-cta b{font-weight:600; font-size:14.5px;}
.capture-cta span{display:block; font-size:11.5px; color:var(--sub); margin-top:2px;}
.hero-card{
  position:relative; overflow:hidden; padding:20px 20px 18px; margin-bottom:16px;
  border-radius:var(--radius-card); color:#fff;
  background:linear-gradient(135deg, var(--color-primary), var(--color-tertiary) 62%, var(--color-secondary));
  box-shadow:0 14px 32px -10px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.hero-card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(360px 160px at 88% -20%, rgba(255,255,255,.30), transparent 70%);}
.hero-card .h-lbl{font-size:12.5px; opacity:.9; position:relative;}
.hero-card .h-num{font-family:var(--font-number); font-size:38px; font-weight:700; letter-spacing:-1px;
  margin:6px 0 4px; position:relative; font-variant-numeric:tabular-nums;}
.hero-card .h-sub{font-size:12.5px; opacity:.92; position:relative;}
.hero-card .h-row{display:flex; gap:22px; margin-top:14px; position:relative;}
.hero-card .h-cell{flex:1;}
.hero-card .h-cell .k{font-size:11.5px; opacity:.85;}
.hero-card .h-cell .v{font-family:var(--font-number); font-size:19px; font-weight:700; margin-top:3px;
  font-variant-numeric:tabular-nums;}

/* ---- 记账：卡片式账单行（窄屏）/ 桌面表格 ---- */
.txn-cards{display:flex; flex-direction:column; gap:9px;}
.txn-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen); cursor:pointer;
  transition:transform var(--motion-duration-fast) var(--motion-easing), border-color var(--motion-duration-fast) var(--motion-easing);
}
.txn-row:hover{transform:translateY(-1px); border-color:var(--line-strong);}
.txn-row.warn{border-color:rgba(245,158,11,.4); background:linear-gradient(0deg, var(--warn-weak), var(--warn-weak)), var(--glass-panel);}
.txn-ico{width:40px; height:40px; flex:0 0 40px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--panel-strong); font-size:15px; font-weight:700; color:var(--sub-strong);}
.txn-mid{flex:1; min-width:0;}
.txn-mer{font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.txn-meta{font-size:11.5px; color:var(--sub); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.txn-amt{font-family:var(--font-number); font-size:16px; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums;}
.txn-amt.out{color:var(--color-category-expense);}
.txn-amt.in{color:var(--ok);}
.txn-pick{width:20px; height:20px; flex:0 0 20px; accent-color:var(--color-primary);}

/* ---- 表单渐进披露 ---- */
.adv{border-top:1px dashed var(--line); padding-top:10px; margin-top:4px;}
.adv summary{cursor:pointer; font-size:12.5px; color:var(--accent-strong); font-weight:600; list-style:none;}
.adv summary::-webkit-details-marker{display:none;}
.adv summary::before{content:"＋ "; font-weight:700;}
.adv[open] summary::before{content:"－ ";}

/* ---- 空状态 / 骨架屏 / 提示 ---- */
.empty{display:flex; flex-direction:column; align-items:center; gap:10px; padding:44px 22px; text-align:center;}
.empty .ic{width:38px; height:38px; color:var(--line-strong);}
.empty b{font-size:15px;}
.empty span{font-size:12.5px; color:var(--sub); line-height:1.7; max-width:300px;}
.empty .btn{margin-top:6px;}
.skel{background:var(--panel-strong); border-radius:12px; position:relative; overflow:hidden;}
.skel::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, var(--sheen), transparent);
  animation:shimmer 1.4s infinite;}
.skel-line{height:13px; margin-bottom:9px;}
.skel-card{padding:16px; border-radius:var(--radius-card); margin-bottom:10px;
  background:var(--glass-panel); border:1px solid var(--color-glass-border);}
.toastwrap{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:200;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}

/* ---- 提醒 ---- */
.remind-picker{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px;}
.rpick{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; font-size:12.5px; cursor:pointer;
  background:var(--panel-strong); border:1.5px solid transparent; border-radius:var(--radius-pill);
  color:var(--sub-strong); font-family:inherit; transition:all var(--motion-duration-fast) var(--motion-easing);}
.rpick .ic{width:14px; height:14px;}
.rpick:hover{border-color:var(--line-strong);}
.rpick.on{background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); font-weight:700;}
.remind-card{display:flex; align-items:center; gap:12px; padding:14px 15px; margin-bottom:9px;
  background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen);}
.remind-card.overdue{border-color:rgba(225,29,72,.35);}
.remind-when{font-family:var(--font-number); font-size:17px; font-weight:700; min-width:62px; color:var(--accent-strong);
  font-variant-numeric:tabular-nums;}
.remind-card.overdue .remind-when{color:var(--bad);}
.remind-mid{flex:1; min-width:0;}
.remind-mid .t{font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.remind-mid .m{font-size:11.5px; color:var(--sub); margin-top:3px;}
.note-meta-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px;}
.note-remind-card{display:flex; align-items:center; gap:10px; padding:11px 13px; margin-bottom:12px;
  background:var(--panel-strong); border:1px solid var(--line); border-radius:var(--radius-control); font-size:12.5px; color:var(--sub-strong);}
#nd-content{font-size:17px; line-height:1.75; color:var(--ink); white-space:pre-wrap; margin-bottom:14px; font-weight:500;}
#nd-image-wrap img{max-width:100%; max-height:340px; border-radius:14px; display:block; margin-bottom:12px;}
.iv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; margin-top:12px;}

/* ---- 「我的」页 ---- */
.me-head{display:flex; align-items:center; gap:14px; padding:18px; margin-bottom:16px;
  background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-card);
  box-shadow:var(--shadow), inset 0 1px 0 var(--sheen); cursor:pointer;}
.me-head .ava{width:56px; height:56px; font-size:22px;}
.me-head .meta{flex:1; min-width:0;}
.me-head .meta b{font-size:16px;}
.me-head .meta span{display:block; font-size:12px; color:var(--sub); margin-top:3px;}
.me-list{display:flex; flex-direction:column; gap:8px;}
.me-item{display:flex; align-items:center; gap:12px; padding:14px 15px; cursor:pointer; font-family:inherit;
  background:var(--glass-panel); border:1px solid var(--color-glass-border); border-radius:var(--radius-control);
  color:var(--sub-strong); font-size:14px;
  transition:all var(--motion-duration-fast) var(--motion-easing);}
.me-item:hover{border-color:var(--accent); color:var(--accent-strong); transform:translateX(2px);}
.me-item .ic{width:19px; height:19px; color:var(--sub);}
.me-item:hover .ic{color:var(--accent-strong);}
.me-item .arrow{margin-left:auto; color:var(--sub); font-size:16px;}

/* ---- 动效 ---- */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes popIn{from{opacity:0; transform:scale(.96) translateY(8px);}to{opacity:1; transform:none;}}
@keyframes sheetUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes slideInLeft{from{transform:translateX(-100%);}to{transform:translateX(0);}}
@keyframes cardIn{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
@keyframes pop{0%{transform:scale(1);}45%{transform:scale(1.14);}100%{transform:scale(1);}}
.pop{animation:pop 320ms var(--motion-easing);}

/* ============ 响应式：≤1100 收窄左栏，≤860 切底部标签栏 ============ */
@media (min-width: 1101px){
  /* 基础样式里 .side 是 sticky；≤1100 区块改成 relative 做抽屉布局，宽屏在此恢复常驻 */
  .side{position:sticky;}
}

@media (max-width: 1100px){
  .side{width:74px; flex:0 0 74px; padding:18px 8px; align-items:center;}
  .side-head{gap:0; padding:0 0 16px; justify-content:center;}
  .side .logo{font-size:20px; letter-spacing:0;}
  .side .ver{display:none;}
  .side .nav li{justify-content:center; padding:12px 0; font-size:0; gap:0;}
  .side .nav li .ic{width:20px; height:20px;}
  .side-foot .foot-note{display:none;}
  .side-foot .btn{font-size:0; padding:12px 0; gap:0;}
  .side-foot .btn .ic{width:20px; height:20px;}
}

@media (max-width: 860px){
  .side{display:none;}
  .tabbar{display:flex;}
  .only-mobile{display:inline-flex;}
  .topbar-title{display:block;}
  /* 选择器必须多带一层 .topbar：与后面的 `.topbar .space-seg{order:5;width:100%}` 特异性相同，少一层会被它盖掉 */
  body[data-view="notes"] .topbar .space-seg,
  body[data-view="remind"] .topbar .space-seg,
  body[data-view="me"] .topbar .space-seg{display:none;}
  .topbar{height:54px; flex:0 0 54px; gap:8px; padding:0 12px;}
  .topbar .space-seg{order:5; width:100%;}
  .topbar{flex-wrap:wrap; height:auto; flex:0 0 auto; padding:8px 12px 0; row-gap:8px;}
  .topbar-title{order:1;}
  .me{order:3; margin-left:auto; font-size:0; gap:0; padding:2px;}
  #btn-theme{order:2;}
  #btn-logout{order:4;}
  .space-seg{order:5; margin-bottom:8px;}
  .space-seg span{flex:1; justify-content:center; padding:8px 0;}
  .monthchip{display:none;}
  .content{padding:16px 14px calc(96px + env(safe-area-inset-bottom));}
  .kpis{grid-template-columns:repeat(2,1fr); gap:10px;}
  .kpi{padding:14px;}
  .kpi .num,.kpi .v{font-size:22px;}
  .card{padding:15px 16px; border-radius:14px;}
  .grid2{gap:10px;}
  .modal{width:100%; max-width:100%; border-radius:20px 20px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    max-height:94vh; align-self:flex-end;}
  .overlay{align-items:flex-end;}
  .hero-card{padding:17px 17px 15px;}
  .hero-card .h-num{font-size:32px;}
  .toast{left:14px; right:14px; top:auto; bottom:calc(96px + env(safe-area-inset-bottom)); text-align:center;}
  .ai-fab-w{bottom:calc(84px + env(safe-area-inset-bottom)); right:16px; width:50px; height:50px;}
  .ai-panel{right:12px; left:12px; width:auto; bottom:calc(150px + env(safe-area-inset-bottom));}
  /* 表格 → 卡片流：手机上不用横向滚动也能看全每一行 */
  table.stackable thead,
  table.stackable tr:has(th){display:none;}
  table.stackable,table.stackable tbody,table.stackable tr,table.stackable td{display:block; width:auto;}
  table.stackable tr{
    border:1px solid var(--color-glass-border); border-radius:14px; padding:12px 14px; margin-bottom:9px;
    background:var(--glass-panel); box-shadow:var(--shadow);
  }
  table.stackable td{border:none; padding:2px 0; white-space:normal; word-break:break-word;}
  table.stackable td[data-label]::before{
    content:attr(data-label) " ";
    color:var(--sub); font-size:11.5px;
  }
  .btnrow{flex-wrap:wrap;}

  /* ---- 录入面「撑满可用空间」：面板吃满 92~94dvh，中间内容区滚动，顶栏与按钮行吸边 ---- */
  .sheet{height:92dvh; max-height:92dvh; overflow:hidden;}
  .sheet-grab,.sheet-head,.capture-kinds,#cp-state{flex:0 0 auto;}
  #capture-body,#capture-shot,#capture-money{flex:1 1 auto; min-height:0; overflow-y:auto;}
  #capture-body .capture-ta{flex:1 1 auto; min-height:110px;}
  /* 保存键吸在滚动区底部：键盘弹起、内容变高时也不至于先滚一下才点得到 */
  #capture-body .capture-foot,#capture-money .capture-foot{position:sticky; bottom:0; z-index:1;
    background:var(--panel); padding-top:10px; flex:0 0 auto;}
  #capture-money .capture-foot{margin-top:auto;}
  #capture-shot{justify-content:center;}
  /* 三件套（支出 / 记到 / 日期）在窄屏换成两行，不再挤成 100px 宽 */
  .capture-row{flex-wrap:wrap;}
  .capture-row .inp{flex:1 1 44%;}
  /* 大弹层（账单编辑 / 随想详情）同样撑满：必须用不透明底色 —— --glass-panel 是半透明玻璃，全屏铺开会让背后内容透上来 */
  .modal.fill{height:94dvh; max-height:94dvh; background:var(--panel);
    display:flex; flex-direction:column;}
  .modal.fill > *{flex:0 0 auto;}
  .modal.fill .modal-head{position:sticky; top:0; z-index:2; background:var(--panel); padding-bottom:10px;}
  .modal.fill .btnrow{position:sticky; bottom:0; z-index:2; background:var(--panel);
    padding:10px 0 2px; margin-top:auto; border-top:1px solid var(--line);}
  /* 随想详情→编辑：写正文的地方别再只有 4 行 */
  #ne-content{min-height:min(40vh, 300px);}
}

@media (min-width: 861px){
  .sheet-mask{align-items:center;}
  .sheet{border-radius:var(--radius-card); max-width:520px; padding:20px 22px; animation:popIn var(--motion-duration-normal) var(--motion-easing);}
  .tabbar{display:none;}
  /* 桌面用鼠标，拖拽改高度是合理的；手机上那个拖拽手柄只会碍事 */
  .capture-ta{resize:vertical; min-height:260px;}
  textarea.inp{resize:vertical;}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}