/* =========================================================
   工作台 · 视觉样式
   设计基调：深空导航 + 柔光内容区，柔和阴影、圆角、微动效
   ========================================================= */

:root{
  --bg:            #eef2f9;
  --bg-2:          #e6ecf6;
  --panel:         #ffffff;
  --panel-soft:    #f7f9fd;
  --line:          #e5eaf3;
  --line-soft:     #eef2f8;

  --ink:           #101828;
  --ink-2:         #404a5c;
  --muted:         #7b879c;
  --faint:         #a4aec0;

  --navy-1:        #101a2e;
  --navy-2:        #0a1120;

  --blue:          #2563eb;
  --blue-soft:     #e8efff;
  --amber:         #f59e0b;
  --indigo:        #6366f1;
  --emerald:       #10b981;
  --violet:        #8b5cf6;
  --rose:          #f43f5e;
  --cyan:          #06b6d4;
  --teal:          #14b8a6;
  --slate:         #94a3b8;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow:    0 4px 14px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-lg: 0 18px 44px rgba(16,24,40,.12), 0 4px 12px rgba(16,24,40,.06);

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 24px;

  --sb: 254px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 620px at 82% -12%, #dfe9ff 0%, transparent 58%),
    radial-gradient(900px 520px at 4% 108%, #e2fbf3 0%, transparent 55%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }
svg.ic{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cbd5e6; border:3px solid transparent; background-clip:content-box; border-radius:99px; }
::-webkit-scrollbar-thumb:hover{ background:#a9b7cf; background-clip:content-box; }
::-webkit-scrollbar-track{ background:transparent; }

.app{ display:flex; min-height:100vh; }

/* ================= 侧边栏 ================= */
.sidebar{
  width:var(--sb); flex:none; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:6px;
  padding:18px 14px 16px;
  background:linear-gradient(178deg,var(--navy-1) 0%, #0d1526 52%, var(--navy-2) 100%);
  color:#fff; z-index:40; overflow:hidden;
}
.sidebar::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px 200px at 108% 4%, rgba(59,130,246,.22), transparent 62%),
    radial-gradient(320px 220px at -20% 96%, rgba(20,184,166,.16), transparent 60%);
}
.sidebar > *{ position:relative; z-index:1; }

.brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 14px; }
.brand-avatar{
  width:40px;height:40px;flex:none;border-radius:13px; display:grid; place-items:center;
  font-weight:700; font-size:17px; letter-spacing:.4px; color:#fff;
  background:linear-gradient(140deg,#3b82f6,#1d4ed8 62%,#1e3a8a);
  box-shadow:0 8px 20px rgba(37,99,235,.42), inset 0 1px 0 rgba(255,255,255,.3);
}
.brand-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.brand-text strong{ font-size:15px; font-weight:650; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text span{ font-size:11.5px; color:rgba(255,255,255,.5); }
.brand-close{ display:none; }

.nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:2px 0 8px; display:flex; flex-direction:column; gap:2px; }
.nav::-webkit-scrollbar{ width:0; }
.nav-label{ display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.32); padding:14px 12px 7px; font-weight:600; }
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9.5px 11px; margin:1px 0; border:0; border-radius:12px;
  background:transparent; color:rgba(255,255,255,.68);
  font-size:13.5px; font-weight:500; cursor:pointer; text-align:left;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  position:relative;
}
.nav-item:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-item:active{ transform:scale(.985); }
.nav-icon{
  width:29px;height:29px;flex:none;border-radius:9px; display:grid;place-items:center;
  background:rgba(255,255,255,.08); color:var(--cic,#9fb3d1);
  transition:background .18s var(--ease), box-shadow .18s var(--ease);
}
.nav-icon svg.ic{ width:16px;height:16px;stroke-width:1.9; }
.nav-item.active{
  color:#fff; font-weight:600;
  background:linear-gradient(94deg,rgba(59,130,246,.92),rgba(37,99,235,.55) 76%,rgba(37,99,235,.22));
  box-shadow:0 8px 22px rgba(37,99,235,.32), inset 0 1px 0 rgba(255,255,255,.16);
}
.nav-item.active .nav-icon{ background:rgba(255,255,255,.2); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.24); }
.nav-item.active::before{ content:""; position:absolute; left:-14px; top:50%; translate:0 -50%; width:3px; height:20px; border-radius:0 4px 4px 0; background:#7fb0ff; }
.nav-badge{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px; border-radius:99px;
  background:rgba(245,158,11,.2); color:#fcd34d; font-size:11px; font-weight:700;
  display:grid; place-items:center; border:1px solid rgba(245,158,11,.28);
}

.sidebar-foot{ border-top:1px solid rgba(255,255,255,.07); padding-top:12px; display:flex; flex-direction:column; gap:3px; }
.foot-head{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.3); padding:6px 12px 5px; font-weight:600; }
.foot-btn{
  display:flex; align-items:center; gap:10px; width:100%; padding:8.5px 11px;
  border:0; border-radius:11px; background:transparent; color:rgba(255,255,255,.6);
  font-size:12.5px; cursor:pointer; text-align:left;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.foot-btn svg.ic{ width:15px;height:15px; }
.foot-btn:hover{ background:rgba(255,255,255,.07); color:#fff; }
.tagline{ font-size:11px; color:rgba(255,255,255,.26); text-align:center; padding:12px 0 2px; letter-spacing:.08em; }

.scrim{ display:none; }

/* ================= 主区域 ================= */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:14px;
  padding:20px 30px 16px;
  background:linear-gradient(180deg, rgba(238,242,249,.94) 0%, rgba(238,242,249,.78) 70%, rgba(238,242,249,0) 100%);
  backdrop-filter:blur(10px);
}
.page-head h1{ font-size:23px; font-weight:680; letter-spacing:-.2px; }
.page-head p{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.topbar-actions{ margin-left:auto; display:flex; gap:9px; }

.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:11px; border:1px solid transparent;
  font-size:13px; font-weight:560; cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn.primary{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff;
  box-shadow:0 8px 20px rgba(37,99,235,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn.primary:hover{ box-shadow:0 12px 26px rgba(37,99,235,.38); }
.btn.ghost{ background:#fff; border-color:var(--line); color:var(--ink-2); box-shadow:var(--shadow-sm); }
.btn.ghost:hover{ border-color:#cdd9ee; color:var(--ink); }
.btn.danger{ background:#fff; border-color:#fecdd3; color:#e11d48; }
.btn.danger:hover{ background:#fff1f2; }
.btn.tiny{ padding:6px 10px; font-size:12px; border-radius:9px; }
.icon-btn{
  width:38px;height:38px;flex:none;border-radius:11px; border:1px solid var(--line);
  background:#fff; color:var(--ink-2); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-sm);
}
.icon-btn:hover{ color:var(--blue); border-color:#cdd9ee; }
.only-mobile{ display:none; }

.view{ padding:2px 30px 120px; display:flex; flex-direction:column; gap:18px; animation:viewIn .42s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.view > *{ animation:cardIn .5s var(--ease) both; }
.view > *:nth-child(2){ animation-delay:.04s }
.view > *:nth-child(3){ animation-delay:.08s }
.view > *:nth-child(4){ animation-delay:.12s }
.view > *:nth-child(5){ animation-delay:.16s }
.view > *:nth-child(6){ animation-delay:.2s }
@keyframes cardIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ================= 卡片 ================= */
.grid{ display:grid; gap:16px; }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-2-1{ grid-template-columns:1.55fr 1fr; }
.g-1-2{ grid-template-columns:1fr 1.55fr; }
.g-auto{ grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:17px 18px; display:flex; flex-direction:column; gap:13px;
  position:relative; overflow:hidden;
  transition:box-shadow .26s var(--ease), transform .26s var(--ease);
}
.card.hoverable:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.card-head{ display:flex; align-items:flex-start; gap:11px; }
.card-head .head-text{ min-width:0; }
.card-head h3{ font-size:14.5px; font-weight:640; letter-spacing:-.1px; }
.card-head p{ font-size:11.5px; color:var(--faint); margin-top:3px; }
.card-head .spacer{ margin-left:auto; }
.chip-icon{
  width:34px;height:34px;flex:none;border-radius:11px; display:grid;place-items:center;
  background:color-mix(in srgb, var(--c) 12%, #fff); color:var(--c);
  border:1px solid color-mix(in srgb, var(--c) 20%, #fff);
}
.chip-icon svg.ic{ width:17px;height:17px; }
.card-body{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.card-foot{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.divider{ height:1px; background:var(--line-soft); }

/* 统计卡 */
.stat{ gap:9px; }
.stat .stat-label{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.stat .stat-label .dot{ width:7px;height:7px;border-radius:99px;background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,#fff); }
.stat .stat-value{ font-size:27px; font-weight:700; letter-spacing:-.6px; display:flex; align-items:baseline; gap:5px; }
.stat .stat-value small{ font-size:12.5px; font-weight:600; color:var(--faint); letter-spacing:0; }
.stat .stat-sub{ font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:6px; }
.stat-bar{ height:6px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.stat-bar > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,color-mix(in srgb,var(--c) 68%,#fff),var(--c)); transition:width .7s var(--ease); }
.trend-up{ color:#0e9f6e; } .trend-down{ color:#e11d48; }

/* ================= 表单 ================= */
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label{ font-size:11.5px; color:var(--muted); font-weight:560; padding-left:2px; }
.input,.select,.textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:11px;
  background:var(--panel-soft); color:var(--ink); font-size:13px; outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:var(--faint); }
.input:focus,.select:focus,.textarea:focus{ border-color:#9ec0ff; background:#fff; box-shadow:0 0 0 3.5px rgba(37,99,235,.11); }
.textarea{ resize:vertical; min-height:76px; line-height:1.62; }
.select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b879c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; padding-right:34px; }
.form-row{ display:grid; gap:11px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.form-row.narrow{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.inline-form{ display:flex; gap:9px; align-items:flex-end; flex-wrap:wrap; }

/* 快捷分类选择 */
.cat-picker{ display:flex; gap:7px; flex-wrap:wrap; }
.cat-opt{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px;
  border:1px solid var(--line); background:var(--panel-soft); color:var(--ink-2);
  font-size:12.5px; cursor:pointer; transition:all .17s var(--ease);
}
.cat-opt .cdot{ width:8px;height:8px;border-radius:99px; background:var(--c); }
.cat-opt:hover{ border-color:#cdd9ee; background:#fff; }
.cat-opt.on{ background:color-mix(in srgb,var(--c) 10%,#fff); border-color:var(--c); color:color-mix(in srgb,var(--c) 78%,#000); font-weight:600; box-shadow:0 4px 12px color-mix(in srgb,var(--c) 16%,transparent); }

/* ================= 列表 ================= */
.list{ display:flex; flex-direction:column; gap:8px; }
.row{
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  border:1px solid var(--line-soft); border-radius:13px; background:var(--panel-soft);
  transition:border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.row:hover{ background:#fff; border-color:#dde6f5; transform:translateX(2px); }
.row.done .row-title{ color:var(--faint); text-decoration:line-through; }
.row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.row-title{ font-size:13.5px; font-weight:540; word-break:break-word; }
.row-sub{ font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row-amount{ font-size:14px; font-weight:660; font-variant-numeric:tabular-nums; white-space:nowrap; }
.row-x{
  width:28px;height:28px;flex:none;border-radius:9px;border:1px solid transparent;background:transparent;
  color:var(--faint); display:grid;place-items:center; cursor:pointer; transition:all .16s var(--ease);
}
.row-x:hover{ background:#fff1f2; color:#e11d48; border-color:#fecdd3; }
.row-x svg.ic{ width:14px;height:14px; }

.check{
  width:22px;height:22px;flex:none;border-radius:7px;border:1.8px solid #cfd9ea; background:#fff;
  display:grid;place-items:center; cursor:pointer; color:transparent;
  transition:all .18s var(--ease);
}
.check svg.ic{ width:13px;height:13px; stroke-width:2.6; }
.check:hover{ border-color:var(--blue); }
.check.on{ background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-color:#2563eb; color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.32); }

.tag{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  font-size:11px; font-weight:580; background:var(--line-soft); color:var(--muted); white-space:nowrap;
}
.tag.c-amber{ background:#fef4e2; color:#b45309; }
.tag.c-blue{ background:#e8efff; color:#1d4ed8; }
.tag.c-emerald{ background:#e3f8f0; color:#047857; }
.tag.c-violet{ background:#f2ecfe; color:#6d28d9; }
.tag.c-rose{ background:#ffe9ee; color:#be123c; }
.tag.c-cyan{ background:#e0f7fb; color:#0e7490; }
.tag.c-slate{ background:#eef2f8; color:#64748b; }

.empty{
  padding:26px 18px; text-align:center; color:var(--faint); font-size:12.5px;
  border:1.5px dashed var(--line); border-radius:14px; background:var(--panel-soft);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.empty svg.ic{ width:22px;height:22px; color:#c3cddd; }

/* 进度条 */
.progress{ height:8px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.progress > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#60a5fa,#2563eb); transition:width .8s var(--ease); }
.progress.c-amber > i{ background:linear-gradient(90deg,#fbbf24,#f59e0b); }
.progress.c-emerald > i{ background:linear-gradient(90deg,#34d399,#10b981); }

/* ================= 图表 ================= */
.chart{ width:100%; display:block; overflow:visible; }
.chart text{ font-family:inherit; fill:var(--faint); font-size:11px; }
.chart .grid-line{ stroke:var(--line-soft); stroke-width:1; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.legend i{ width:9px;height:9px;border-radius:3px; display:inline-block; }
.chart-wrap{ position:relative; }
[data-tip]{ cursor:default; }

.tooltip{
  position:fixed; z-index:120; pointer-events:none; opacity:0; transform:translate(-50%,-118%) scale(.96);
  background:rgba(16,24,40,.94); color:#fff; font-size:11.5px; line-height:1.55;
  padding:8px 11px; border-radius:10px; box-shadow:0 12px 28px rgba(16,24,40,.28);
  transition:opacity .14s var(--ease), transform .14s var(--ease); white-space:nowrap; backdrop-filter:blur(6px);
}
.tooltip.on{ opacity:1; transform:translate(-50%,-130%) scale(1); }

/* 环形进度 */
.ring-text{ font-family:inherit; }
.ring-value{ font-size:19px; font-weight:700; fill:var(--ink); }
.ring-label{ font-size:10.5px; fill:var(--faint); }

/* ================= 知识卡片 ================= */
.kcard{
  border:1px solid var(--line); border-radius:16px; background:linear-gradient(170deg,#fff,#fafcff);
  padding:15px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm);
  transition:all .26s var(--ease); position:relative; overflow:hidden;
}
.kcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#06b6d4,#6366f1); opacity:.85; }
.kcard:hover{ box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.kcard h4{ font-size:14px; font-weight:640; line-height:1.45; }
.kcard .kpoint{ font-size:12.5px; color:var(--ink-2); line-height:1.68; }
.kcard .krow{ display:flex; gap:8px; font-size:12px; line-height:1.62; color:var(--muted); }
.kcard .krow b{ color:var(--cyan); font-weight:600; flex:none; }
.kcard .kfoot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }

/* 灵感卡 */
.quote-card{
  background:linear-gradient(135deg,#0f1c34 0%, #16233d 46%, #1a2a49 100%);
  color:#fff; border:0; position:relative; overflow:hidden;
}
.quote-card::after{ content:""; position:absolute; width:280px;height:280px; right:-90px; top:-120px; border-radius:50%; background:radial-gradient(circle,rgba(99,102,241,.42),transparent 66%); }
.quote-card .qmark{ font-size:52px; line-height:.7; color:rgba(147,197,253,.42); font-family:Georgia,serif; }
.quote-card blockquote{ margin:0; font-size:17px; line-height:1.75; font-weight:520; letter-spacing:.2px; }
.quote-card .qsrc{ font-size:12px; color:rgba(255,255,255,.5); }
.quote-card .card-head h3,.quote-card .card-head p{ color:#fff; }
.quote-card .card-head p{ color:rgba(255,255,255,.5); }

/* 目标卡 */
.goal-card{ gap:12px; }
.goal-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.kr{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-2); padding:5px 0; }
.kr .check{ width:18px;height:18px;border-radius:6px; }
.kr.done span{ color:var(--faint); text-decoration:line-through; }

/* 热力格 */
.heat{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:4px; }
.heat i{ width:13px;height:13px;border-radius:4px; background:var(--line-soft); display:block; }

/* ================= FAB ================= */
.fab-wrap{ position:fixed; right:30px; bottom:32px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.fab{
  width:56px;height:56px;border-radius:19px; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(140deg,#3b82f6,#1d4ed8 58%,#1e3a8a);
  box-shadow:0 16px 34px rgba(29,78,216,.42), inset 0 1px 0 rgba(255,255,255,.26);
  display:grid;place-items:center; transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.fab svg.ic{ width:24px;height:24px; stroke-width:2.1; transition:transform .3s var(--ease); }
.fab:hover{ box-shadow:0 20px 42px rgba(29,78,216,.5); transform:translateY(-2px); }
.fab-wrap.open .fab svg.ic{ transform:rotate(135deg); }
.fab-menu{
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  opacity:0; pointer-events:none; transform:translateY(12px) scale(.96);
  transition:all .26s var(--ease);
}
.fab-wrap.open .fab-menu{ opacity:1; pointer-events:auto; transform:none; }
.fab-menu button{
  display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border-radius:13px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2);
  font-size:12.5px; font-weight:540; cursor:pointer; box-shadow:var(--shadow-lg);
}
.fab-menu button:hover{ color:var(--blue); border-color:#cdd9ee; }
.fab-menu button svg.ic{ width:16px;height:16px; color:var(--blue); }

/* ================= 弹层 ================= */
.modal-root{ position:fixed; inset:0; z-index:100; display:none; }
.modal-root.open{ display:block; }
.modal-mask{ position:absolute; inset:0; background:rgba(16,24,40,.42); backdrop-filter:blur(4px); animation:fade .24s var(--ease) both; }
@keyframes fade{ from{opacity:0} to{opacity:1} }
.modal{
  position:relative; margin:5vh auto; width:min(680px,calc(100% - 32px)); max-height:88vh; overflow:auto;
  background:#fff; border-radius:var(--r-xl); box-shadow:0 30px 80px rgba(16,24,40,.3);
  padding:22px 24px; animation:pop .3s var(--ease) both; display:flex; flex-direction:column; gap:16px;
}
.modal.wide{ width:min(880px,calc(100% - 32px)); }
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.modal-head{ display:flex; align-items:flex-start; gap:12px; }
.modal-head h3{ font-size:17px; font-weight:660; }
.modal-head p{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.modal-head .icon-btn{ margin-left:auto; width:34px;height:34px;box-shadow:none; }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; padding-top:4px; }

/* 连接卡 */
.conn{ display:flex; gap:14px; padding:15px 16px; border:1px solid var(--line); border-radius:16px; background:var(--panel-soft); }
.conn .conn-logo{
  width:44px;height:44px;flex:none;border-radius:13px; display:grid;place-items:center; color:#fff;
}
.conn .conn-logo.obsidian{ background:linear-gradient(140deg,#7c3aed,#4c1d95); box-shadow:0 8px 18px rgba(124,58,237,.32); }
.conn .conn-logo.wb{ background:linear-gradient(140deg,#3b82f6,#1d4ed8); box-shadow:0 8px 18px rgba(37,99,235,.32); }
.conn-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.conn-body h4{ font-size:14px; font-weight:640; display:flex; align-items:center; gap:8px; }
.conn-body p{ font-size:12px; color:var(--muted); line-height:1.66; }
.conn-body code{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:11.5px; color:var(--ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.conn-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.status{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:99px; }
.status.ok{ background:#e3f8f0; color:#047857; }
.status.off{ background:#fef4e2; color:#b45309; }
.status i{ width:6px;height:6px;border-radius:99px; background:currentColor; }

.codebox{
  background:#0f1a2e; color:#cfe0ff; border-radius:14px; padding:14px 15px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.75;
  max-height:340px; overflow:auto; white-space:pre-wrap; word-break:break-word; border:1px solid #1e2c48;
}
.codebox::-webkit-scrollbar-thumb{ background:#33456b; background-clip:content-box; }

/* ================= Toast ================= */
.toasts{ position:fixed; left:50%; bottom:34px; z-index:200; display:flex; flex-direction:column; gap:9px; align-items:center; transform:translateX(-50%); }
.toast{
  display:flex; align-items:center; gap:9px; padding:11px 17px; border-radius:13px;
  background:rgba(16,24,40,.94); color:#fff; font-size:12.5px; font-weight:520;
  box-shadow:0 16px 36px rgba(16,24,40,.3); backdrop-filter:blur(8px);
  animation:toastIn .3s var(--ease) both; max-width:min(520px,90vw);
}
.toast.ok svg.ic{ color:#34d399; } .toast.bad svg.ic{ color:#fb7185; } .toast.info svg.ic{ color:#7fb0ff; }
.toast.out{ animation:toastOut .26s var(--ease) both; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(10px) scale(.97); } }

/* ================= 工具条 ================= */
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.search-wrap{ position:relative; flex:1; min-width:180px; max-width:320px; }
.search-wrap svg.ic{ position:absolute; left:12px; top:50%; translate:0 -50%; width:15px;height:15px; color:var(--faint); }
.search-wrap .input{ padding-left:35px; }
.seg{ display:inline-flex; background:var(--panel-soft); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; }
.seg button{ border:0; background:transparent; padding:6px 12px; border-radius:8px; font-size:12px; color:var(--muted); cursor:pointer; font-weight:540; }
.seg button.on{ background:#fff; color:var(--blue); box-shadow:var(--shadow-sm); }

.hint{ font-size:11.5px; color:var(--faint); line-height:1.7; }
.kv{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--muted); }
.kv b{ color:var(--ink); font-weight:640; font-variant-numeric:tabular-nums; }
.mini-note{ font-size:11.5px; color:var(--muted); background:var(--panel-soft); border:1px dashed var(--line); border-radius:11px; padding:9px 12px; line-height:1.7; }

/* ================= 账单导入 ================= */
.drop{
  display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  padding:22px 16px; border:1.6px dashed #c9d8ee; border-radius:16px;
  background:linear-gradient(180deg,#f8fbff,#f2f7ff);
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.drop.over{ border-color:#07c160; background:linear-gradient(180deg,#eefaf3,#e4f7ed); transform:scale(1.01); }
.drop-icon{
  width:42px;height:42px;border-radius:14px; display:grid;place-items:center; color:#fff;
  background:linear-gradient(140deg,#12b76a,#079455); box-shadow:0 10px 22px rgba(7,193,96,.3);
}
.drop-icon svg.ic{ width:20px;height:20px; }
.drop strong{ font-size:13.5px; font-weight:620; }
.link-btn{
  border:0; background:transparent; padding:0 1px; cursor:pointer;
  color:var(--blue); font-size:inherit; font-family:inherit; font-weight:600;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.link-btn:hover{ color:#1d4ed8; }
.howto{ border:1px solid var(--line); border-radius:12px; background:var(--panel-soft); padding:0 12px; }
.howto summary{ cursor:pointer; font-size:12px; color:var(--ink-2); font-weight:560; padding:10px 0; list-style:none; }
.howto summary::-webkit-details-marker{ display:none; }
.howto summary::before{ content:"›"; display:inline-block; margin-right:7px; color:var(--faint); transition:transform .2s var(--ease); }
.howto[open] summary::before{ transform:rotate(90deg); }
.howto-body{ font-size:12px; color:var(--muted); line-height:1.85; padding:0 0 12px; }
.howto-body code{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 6px; font-size:11.5px; color:var(--ink-2); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.howto-body b{ color:var(--ink-2); }
.select.cat-inline{
  width:auto; min-width:78px; padding:6px 24px 6px 9px; font-size:12px; font-weight:560;
  border-radius:10px; background-position:right 7px center; cursor:pointer;
}
.code-input{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.7;
  min-height:200px; white-space:pre; overflow:auto;
}

/* ================= 日历 ================= */
.cal-layout{ display:grid; grid-template-columns:1.62fr 1fr; gap:16px; align-items:start; }
.cal-side{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.cal-wrap{ display:flex; flex-direction:column; gap:7px; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.cal-dow span{ text-align:center; font-size:11px; font-weight:620; color:var(--faint); letter-spacing:.04em; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.cal-cell{
  min-height:88px; border:1px solid var(--line); border-radius:13px; background:#fff;
  padding:7px 8px 6px; display:flex; flex-direction:column; gap:5px; cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cal-cell:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:#cdd9ee; }
.cal-cell.out{ opacity:.4; }
.cal-cell.weekend:not(.today):not(.sel) .cal-day{ color:var(--muted); }
.cal-cell.today{ border-color:#9ec0ff; box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.cal-cell.sel{ border-color:var(--blue); box-shadow:0 0 0 3.5px rgba(37,99,235,.17); }
.cal-head{ display:flex; align-items:center; gap:5px; }
.cal-day{ font-size:12.5px; font-weight:660; color:var(--ink); font-variant-numeric:tabular-nums; }
.cal-tag{ font-size:9.5px; font-weight:700; color:#fff; background:linear-gradient(135deg,#3b82f6,#1d4ed8); border-radius:99px; padding:1px 6px; }
.cal-dots{ display:flex; gap:3px; flex-wrap:wrap; min-height:6px; }
.cal-dots i{ width:6px;height:6px;border-radius:99px; }
.cal-amt{ font-size:10.5px; font-weight:660; color:#0e9f6e; font-variant-numeric:tabular-nums; }
.cal-badges{ margin-top:auto; display:flex; gap:4px; flex-wrap:wrap; }
.cal-badges span{ font-size:9.5px; font-weight:600; color:var(--muted); background:rgba(255,255,255,.75); border:1px solid var(--line); border-radius:6px; padding:0 5px; }
.cal-legend{ padding-top:2px; }
.cal-nav{ margin-left:auto; display:flex; align-items:center; gap:7px; }
.cal-nav .icon-btn{ width:32px;height:32px; }
.sec-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:12px; font-weight:600; color:var(--ink-2);
  padding:2px 0 6px; border-bottom:1px solid var(--line-soft); margin-top:4px;
}
.sec-head b{ color:var(--blue); font-variant-numeric:tabular-nums; }

/* ================= 响应式 ================= */
@media (max-width:1180px){
  .g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .g-2-1,.g-1-2{ grid-template-columns:1fr; }
  .cal-layout{ grid-template-columns:1fr; }
}
@media (max-width:980px){
  .sidebar{ position:fixed; left:0; top:0; transform:translateX(-102%); transition:transform .3s var(--ease); box-shadow:0 0 60px rgba(16,24,40,.3); }
  .app.nav-open .sidebar{ transform:none; }
  .app.nav-open .scrim{ display:block; position:fixed; inset:0; background:rgba(16,24,40,.36); z-index:35; }
  .brand-close{ display:grid; place-items:center; margin-left:auto; width:30px;height:30px;border-radius:9px; border:0; background:rgba(255,255,255,.08); color:rgba(255,255,255,.7); cursor:pointer; }
  .only-mobile{ display:grid; }
  .only-desktop{ display:none; }
  .topbar{ padding:14px 18px 12px; }
  .view{ padding:2px 18px 130px; }
  .page-head h1{ font-size:19px; }
  .fab-wrap{ right:18px; bottom:22px; }
}
@media (max-width:720px){
  .g-4,.g-3,.g-2,.g-auto{ grid-template-columns:1fr; }
  .modal{ margin:3vh auto; padding:18px; }
  .quote-card blockquote{ font-size:15.5px; }
  .cal-grid,.cal-dow{ gap:4px; }
  .cal-cell{ min-height:62px; padding:5px 5px 4px; border-radius:10px; }
  .cal-amt,.cal-badges{ display:none; }
  .cal-tag{ display:none; }
  .cal-day{ font-size:11.5px; }
  .cal-dots i{ width:5px;height:5px; }
}