:root{
  /* 极简高级灰 调色板 */
  --bg:#f4f4f5;
  --surface:#ffffff;
  --surface-2:#f7f8f9;
  --border:#e7e8eb;
  --border-2:#dfe1e4;

  --text:#1d2025;
  --text-2:#575c66;
  --text-3:#9aa0a9;
  --ink:#23262b;            /* 主按钮 / 强调 墨色 */
  --ink-hover:#3a3f47;

  /* 语义色：仅用于金额与状态，克制使用 */
  --income:#2f6fb3;
  --expense:#d6453f;
  --tax:#8a7bb8;
  --balance:#1f9d6b;

  --radius:18px;
  --shadow:0 1px 2px rgba(16,18,22,0.04), 0 10px 30px -16px rgba(16,18,22,0.12);
  --shadow-sm:0 1px 2px rgba(16,18,22,0.05);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
html { overflow-x:hidden; }

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  color:var(--text);
  background:var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}
/* 极简：去掉彩色光斑，仅保留极淡的明暗层次 */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,#f6f6f7 0%,#f1f1f3 100%);
}

.app-shell{
  position:relative; z-index:1;
  display:grid; grid-template-columns:340px 1fr;
  align-items:stretch; gap:1rem;
  max-width:1280px; margin:0 auto; padding:1.4rem 1.6rem;
}

/* ============ 侧边栏 ============ */
.sidebar{
  display:flex; flex-direction:column; gap:1.1rem;
  padding:1.6rem 1.1rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  animation:fadeIn .5s ease both;
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.brand{ display:flex; align-items:center; gap:0.7rem; padding:0.2rem 0.2rem 0.5rem; }
.brand-mark{
  width:44px; height:44px; flex:0 0 auto; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; font-weight:800; color:#fff;
  background:var(--ink);
  box-shadow:var(--shadow-sm);
}
.brand-name{ font-size:1rem; font-weight:700; color:var(--text); line-height:1.25; letter-spacing:-0.01em; }
.brand-name span{ display:block; font-size:0.68rem; font-weight:500; color:var(--text-3); letter-spacing:0.3px; margin-top:2px; }
.screenshot-btn{
  flex:0 0 auto; width:36px; height:36px; border:none; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  margin-left:auto; padding:0;
}
.screenshot-btn:hover{ background:var(--border); color:var(--text); border-color:transparent; }

.side-nav{ display:flex; flex-direction:row; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; }
.nav-link{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.55rem 0.6rem; border-radius:9px;
  color:var(--text-2); text-decoration:none; font-weight:600; font-size:0.9rem;
  transition:0.18s; border:1px solid transparent;
}
.nav-link:hover{ color:var(--text); }
.nav-link.is-active{
  background:var(--ink); color:#fff; border-color:var(--ink);
  box-shadow:0 1px 3px rgba(35,38,43,0.18);
}
.nav-link.is-active::before{ display:none; }

.side-block{ display:flex; flex-direction:column; gap:0.5rem; }
.year-selector{ position:relative; display:block; }
.year-selector .select-label{
  position:absolute; right:2.2rem; top:50%; transform:translateY(-50%);
  font-size:0.85rem; font-weight:600; color:var(--text-3); pointer-events:none; z-index:1;
}
.year-selector select{
  width:100%; padding:0.58rem 2.6rem 0.58rem 0.85rem;
  border-radius:11px; border:1px solid var(--border-2);
  background:var(--surface); color:var(--text);
  font-size:0.95rem; font-weight:600; font-family:'Inter',sans-serif; cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa0a9' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.85rem center; background-size:18px 18px;
  transition:0.18s;
}
.year-selector select:hover{ border-color:#c9ccd1; }
.year-selector select:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(35,38,43,0.10); }

.side-actions{ display:flex; flex-direction:column; gap:0.5rem; margin-top:0.2rem; }
.side-btn{
  width:100%; padding:0.6rem; border-radius:11px; font-weight:600; font-size:0.88rem;
  cursor:pointer; border:1px solid transparent; font-family:'Inter',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  white-space:nowrap; transition:0.18s;
}
.side-btn.primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.side-btn.primary:hover{ background:var(--ink-hover); }
.side-btn.ghost{ background:var(--surface); color:var(--text-2); border-color:var(--border-2); }
.side-btn.ghost:hover{ background:var(--surface-2); color:var(--text); }

.side-quote{
  margin-top:auto; flex-shrink:0;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px; padding:1rem 1rem 0.95rem;
  color:var(--text-2); font-size:0.8rem; line-height:1.6; position:relative; overflow:hidden;
  height:5.0rem;
  animation:fadeIn .6s ease both;
}
.quote-glyph{ position:absolute; top:0.1rem; left:0.55rem; font-size:2rem; line-height:1; color:var(--border-2); font-family:Georgia,serif; }
.side-quote .q-text{ position:relative; display:block; padding-left:0.9rem; }
.side-quote .q-author{ display:block; margin-top:0.4rem; font-size:0.7rem; color:var(--text-3); font-style:italic; text-align:right; position:relative; top:-5px; }

/* 侧边栏模拟时钟（仅电脑端显示，白底黑字） */
.side-clock{
  margin-top:0;
  display:flex; flex-direction:column; align-items:center; gap:0.55rem;
  user-select:none; -webkit-user-select:none;
}
/* 侧边栏日历（仅电脑端，农历 + 节假日） */
.side-calendar{
  width:calc(100% + 1.4rem);
  margin:0 -0.7rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0.6rem 0.45rem 0.55rem;
  user-select:none; -webkit-user-select:none;
  overflow:visible;
}
.side-calendar .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:0.55rem; }
.side-calendar .cal-title{ font-size:0.92rem; font-weight:600; color:var(--text); }
.side-calendar .cal-nav{
  width:1.6rem; height:1.6rem; border:none; background:var(--surface-2);
  border-radius:8px; color:var(--text-2); cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
}
.side-calendar .cal-nav:hover{ background:var(--border); color:var(--text); }
.side-calendar .cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
  font-size:0.68rem; color:var(--text-3); margin-bottom:0.3rem;
}
.side-calendar .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; overflow:visible; }
.side-calendar .cal-cell{
  height:3.2rem; min-height:3.2rem; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:8px; line-height:1.1; position:relative; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
  overflow:visible;
}
.side-calendar .cal-cell:hover{ background:var(--surface-2); }
.side-calendar .cal-cell .cal-day{ font-size:0.82rem; font-weight:600; color:var(--text); flex:0 0 auto; }
.side-calendar .cal-cell .cal-lunar{
  font-size:0.68rem; color:var(--text-3);
  white-space:nowrap; flex:0 0 auto; max-width:none;
}
.side-calendar .cal-cell.term .cal-lunar{ color:#1f9d72; }
.side-calendar .cal-cell.hist .cal-lunar{ color:#9b51c4; }
.side-calendar .cal-cell.selected{ box-shadow:0 0 0 2px var(--ink); }
.side-calendar .cal-cell.today::after{
  content:''; position:absolute; top:3px; right:3px; width:6px; height:6px;
  border-radius:50%; background:#2ecc71; box-shadow:0 0 0 1px rgba(0,0,0,0.12);
}
.side-calendar .cal-cell.out{ opacity:0.5; }
.side-calendar .cal-cell.out .cal-day{ color:var(--text-3); font-weight:400; }
.side-calendar .cal-cell.holiday .cal-lunar{ color:var(--expense); }
.side-calendar .cal-cell.today{ background:var(--ink); }
.side-calendar .cal-cell.today .cal-day{ color:#fff; }
.side-calendar .cal-cell.today .cal-lunar{ color:rgba(255,255,255,0.85); }
.side-calendar .cal-cell.today.holiday .cal-lunar{ color:#ffd2cf; }
.side-clock .clock-svg{ width:246px; height:246px; display:block; }
.side-clock .clock-bezel{ fill:#cfd4da; }
.side-clock .clock-dial{ fill:#ffffff; stroke:#e2e6eb; stroke-width:1; }
.side-clock .clock-face line{ stroke-linecap:round; }
.side-clock .clock-face .tick-major{ stroke:#111111; stroke-width:2.4; }
.side-clock .clock-face .tick-minor{ stroke:#b0b8c4; stroke-width:1; }
.side-clock .clock-num{
  fill:#111111; font-size:15px; font-weight:600;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Microsoft YaHei',sans-serif;
  text-anchor:middle; dominant-baseline:central;
}
.side-clock .hand{ stroke-linecap:round; }
.side-clock .hand-hour{ stroke:#111111; stroke-width:5; }
.side-clock .hand-min{ stroke:#111111; stroke-width:3.4; }
.side-clock .hand-sec{ stroke:#d32f2f; stroke-width:1.6; }
.side-clock .clock-cap-outer{ fill:#d32f2f; }
.side-clock .clock-cap-inner{ fill:#ffffff; }
.side-clock .clock-caption{ font-size:0.9rem; color:var(--text); letter-spacing:0.04em; text-align:center; line-height:1.6; font-weight:500; }
.side-clock .clock-caption .lunar-line{ color:var(--text); }

/* 侧边栏黄历框（选中日期的宜/忌） */
.almanac-box{
  width:calc(100% + 1.4rem); margin:0 -0.7rem;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:0.6rem 0.5rem 0.65rem; user-select:none; -webkit-user-select:none;
}
.almanac-box .alm-head{ text-align:center; margin-bottom:0.5rem; }
.almanac-box .alm-date{ font-size:0.82rem; font-weight:700; color:var(--text); }
.almanac-box .alm-lunar{ height:1.5rem; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; font-size:0.72rem; color:var(--text-2); margin-top:0.15rem; }
.almanac-box .alm-tags{ display:inline-flex; flex-wrap:nowrap; gap:3px; margin-left:0.25rem; min-width:0; flex:0 1 auto; overflow:hidden; }
.almanac-box .alm-tag{ display:inline-block; font-size:0.72rem; padding:0 5px; border-radius:20px; line-height:1.4; }
.almanac-box .alm-tag.term{ background:rgba(31,157,114,0.12); color:#1f9d72; }
.almanac-box .alm-tag.holiday{ background:rgba(211,47,47,0.10); color:var(--expense); }
.almanac-box .alm-tag.hist{ background:rgba(155,81,196,0.14); color:#9b51c4; }
.almanac-box .alm-body{ display:flex; flex-direction:column; gap:0.35rem; }
.almanac-box .alm-row{ display:flex; align-items:flex-start; gap:0.5rem; font-size:0.74rem; line-height:1.55; }
.almanac-box .alm-badge{ flex:0 0 auto; width:1.4rem; height:1.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.78rem; color:#fff; }
.almanac-box .alm-badge.yi{ background:#2e9e63; }
.almanac-box .alm-badge.ji{ background:#d9534f; }
.almanac-box .alm-items{ color:var(--text-2); flex:1; }
/* 每日一言：手机端显示在主内容区底部（替代侧边栏的版本） */
.content-quote{
  display:none;
  margin-top:1.1rem;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:14px; padding:1rem 1rem 0.95rem;
  color:var(--text-2); font-size:0.85rem; line-height:1.7; position:relative; overflow:hidden;
  animation:fadeIn .6s ease both;
}
.content-quote .quote-glyph{ position:absolute; top:0.1rem; left:0.55rem; font-size:2rem; line-height:1; color:var(--border-2); font-family:Georgia,serif; }
.content-quote .q-text{ position:relative; display:block; padding-left:0.9rem; }
.content-quote .q-author{ display:block; margin-top:0.4rem; font-size:0.72rem; color:var(--text-3); font-style:italic; text-align:right; }

.side-foot{ font-size:0.7rem; color:var(--text-3); text-align:center; padding-top:0.4rem; letter-spacing:0.3px; }

/* ============ 右侧内容卡 ============ */
.content{
  position:relative;
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.9rem 2.2rem 2.2rem;
  min-height:auto;
  animation:fadeUp .55s ease both;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

.topbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1.6rem; animation:fadeUp .5s ease both; }
.topbar-title h1{ font-size:1.6rem; font-weight:800; letter-spacing:-0.025em; color:var(--text); }
.subtitle{ color:var(--text-2); font-size:0.85rem; margin-top:0.3rem; font-weight:500; }
.topbar-badge{
  background:var(--surface-2); color:var(--text-2);
  padding:0.42rem 1rem; border-radius:30px; font-size:0.82rem; font-weight:700;
  border:1px solid #c2c6cc; white-space:nowrap;
}

.error-msg{ background:#fdeced; color:var(--expense); padding:0.75rem 1rem; border-radius:11px; margin-bottom:1rem; border:1px solid #f3c9cb; font-weight:600; }

/* ===== 汇总卡片（极简白卡 + 语义色点缀） ===== */
.summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.6rem; }
.summary-item{
  position:relative; overflow:hidden;
  border-radius:16px; padding:1.25rem 1.3rem 1.35rem;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation:fadeUp .5s ease both;
}
.summary-item:nth-child(1){ animation-delay:.04s; }
.summary-item:nth-child(2){ animation-delay:.10s; }
.summary-item:nth-child(3){ animation-delay:.16s; }
.summary-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--income);
}
.summary-item.expense-card::before{ background:var(--expense); }
.summary-item.balance-card::before{ background:var(--balance); }
.summary-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-2); }
.summary-item .label{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.6px; font-weight:700; color:var(--text-3); padding-right:2.6rem; }
.summary-item .value{ font-size:1.9rem; font-weight:800; margin-top:calc(0.4rem + 10px); letter-spacing:-0.02em; padding-right:2.6rem; line-height:1.1; color:var(--text); white-space:nowrap; }
.summary-item.income-card .value{ color:var(--income); }
.summary-item.expense-card .value{ color:var(--expense); }
.summary-item.balance-card .value{ color:var(--balance); }
.summary-item .sub{ font-size:0.78rem; color:var(--text-2); margin-top:0.3rem; font-weight:500; }
.si-icon{
  position:absolute; top:calc(1rem - 10px); right:1rem;
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); color:var(--text-2);
}
.summary-item.income-card .si-icon{ background:rgba(47,111,179,0.10); color:var(--income); }
.summary-item.expense-card .si-icon{ background:rgba(214,69,63,0.10); color:var(--expense); }
.summary-item.balance-card .si-icon{ background:rgba(31,157,107,0.10); color:var(--balance); }
.rate-wrap{ margin-top:0.5rem; padding-right:2.6rem; display:flex; flex-wrap:wrap; gap:0.4rem; }
.savings-rate{ font-size:0.7rem; padding:0.22rem 0.6rem; border-radius:20px; display:inline-block; font-weight:700; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); }
.savings-rate.excellent{ background:rgba(31,157,107,0.12); color:#1a7a54; border-color:rgba(31,157,107,0.25); }
.savings-rate.good{ background:rgba(15,118,110,0.12); color:#0c635c; border-color:rgba(15,118,110,0.25); }
.savings-rate.fair{ background:rgba(214,163,63,0.14); color:#9a6b14; border-color:rgba(214,163,63,0.3); }
.savings-rate.low{ background:rgba(214,69,63,0.10); color:#b23b3b; border-color:rgba(214,69,63,0.25); }
.savings-rate.danger{ background:rgba(214,69,63,0.14); color:#a52f2f; border-color:rgba(214,69,63,0.3); }
.avg-pill{ font-size:0.7rem; padding:0.22rem 0.6rem; border-radius:20px; display:inline-block; font-weight:700; background:var(--surface-2); color:var(--text-2); border:1px solid var(--border); white-space:nowrap; }
.avg-pill.avg-income{ color:var(--income); background:rgba(47,111,179,0.08); border-color:rgba(47,111,179,0.30); }
.avg-pill.avg-expense{ color:var(--expense); background:rgba(214,69,63,0.08); border-color:rgba(214,69,63,0.30); }

/* ===== 表格 ===== */
.table-wrap{ animation:fadeUp .5s ease .2s both; }
.section-head{ display:flex; align-items:baseline; gap:0.8rem; margin-bottom:0.9rem; }
.section-head h2{ font-size:1.05rem; font-weight:800; color:var(--text); display:flex; align-items:center; gap:0.5rem; }
.section-head .hint{ font-size:0.78rem; color:var(--text-2); font-weight:500; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-sm); }

table{ width:100%; min-width:680px; border-collapse:collapse; font-size:0.92rem; }
col.month{ min-width:70px; } col.income{ min-width:130px; } col.tax{ min-width:130px; } col.expense{ min-width:130px; } col.balance{ min-width:130px; }

th, td{ padding:0.7rem; border-bottom:1px solid var(--border); vertical-align:middle; white-space:nowrap; }
tbody tr:nth-child(even) td{ background:var(--surface-2); }
th{
  font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; color:#111;
  background:var(--surface-2); border-bottom:1px solid var(--border-2);
}
th:nth-child(1), td:nth-child(1){ text-align:left; }
th:nth-child(2), td:nth-child(2),
th:nth-child(3), td:nth-child(3),
th:nth-child(4), td:nth-child(4),
th:nth-child(5), td:nth-child(5){ text-align:right; }
tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:#eef0f2; transition:background .15s ease; }

.month-label{ font-weight:600; color:var(--text); }

.input-cell{
  position:relative;
}
.input-cell input{
  width:100%; padding:0.36rem 0.5rem;
  border:1px solid var(--border-2); border-radius:9px; font-size:0.92rem; font-weight:700;
  background:var(--surface); transition:0.18s; font-family:'Inter',sans-serif; color:var(--text);
  text-align:right; box-sizing:border-box;
}
/* 已修改且未保存的输入框内左侧显示的蓝色圆点 */
.unsaved-dot{
  position:absolute; left:20px; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%;
  background:#1a73e8; box-shadow:0 0 0 2px rgba(26,115,232,0.18);
  pointer-events:none; z-index:1;
}
.input-cell input:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(35,38,43,0.10); background:#fff; }
.input-cell input.input-income{ color:var(--income); }
.input-cell input.input-income:focus{ border-color:var(--income); box-shadow:0 0 0 3px rgba(47,111,179,0.14); }
.input-cell input.input-expense{ color:var(--expense); }
.input-cell input.input-expense:focus{ border-color:var(--expense); box-shadow:0 0 0 3px rgba(214,69,63,0.14); }
.input-cell input.input-tax{ color:var(--tax); }
.input-cell input.input-tax:focus{ border-color:var(--tax); box-shadow:0 0 0 3px rgba(138,123,184,0.18); }

.readonly-balance{ font-weight:800; padding:0.2rem 0.2rem; display:inline-block; min-width:84px; text-align:right; white-space:nowrap; transition:color 0.3s ease; }
.balance-positive{ color:var(--balance); }
.balance-negative{ color:var(--expense); }
.balance-zero{ color:var(--text-3); }

.total-row td{ font-weight:800; border-top:2px solid var(--border-2); padding-top:0.95rem; padding-bottom:0.95rem; background:var(--surface-2) !important; }
.total-row .month-label{ text-align:left; }
.total-row .total-value{ font-size:1.02rem; }
.total-income{ color:var(--income); }
.total-expense{ color:var(--expense); }
.total-balance{ color:var(--balance); transition:color 0.3s ease; }
.total-tax{ color:var(--tax); }

/* ===== 底部栏 ===== */
.footer-note{
  margin-top:1.4rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.6rem 1rem;
  color:var(--text-2); font-size:0.9rem; font-weight:500; animation:fadeUp .5s ease .26s both;
}
.footer-left{ display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap; }
.footer-left label{ display:flex; align-items:center; gap:0.35rem; cursor:pointer; font-weight:600; color:var(--text); user-select:none; }
.footer-left input[type="checkbox"]{ width:17px; height:17px; cursor:pointer; accent-color:var(--ink); }
.save-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.35rem;
  background:var(--ink); color:#fff; border:none;
  padding:0.32rem 1.1rem; border-radius:30px; font-size:0.83rem; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; transition:0.18s;
}
.save-btn:hover{ background:var(--ink-hover); }
.save-btn .ic{ width:1.15em; height:1.15em; color:#fff; }
.save-status{ display:inline-flex; align-items:center; gap:0.3rem; font-size:0.9rem; font-weight:600; color:var(--text-2); }
.logout-btn{
  background:transparent; border:1px solid #c2c6cc; padding:0.34rem 1.05rem; border-radius:30px;
  font-size:0.9rem; font-weight:700; color:var(--text-2); cursor:pointer; font-family:'Inter',sans-serif; transition:0.18s; white-space:nowrap;
  margin-left:auto;
}
.logout-btn:hover{ background:#fdeced; border-color:var(--expense); color:var(--expense); }

.loading{ text-align:center; padding:2.4rem; color:var(--text-2); font-size:1rem; }

/* ===== 保存提示 ===== */
#saveTip{
  position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:0.6rem 1.5rem;
  border-radius:30px; font-weight:600; font-size:0.92rem; box-shadow:0 10px 28px rgba(0,0,0,0.18);
  z-index:1000; opacity:0; transition:opacity 0.3s ease; pointer-events:none;
  max-width:calc(100vw - 2rem); text-align:center;
}
#saveTip.show{ opacity:1; }
#saveTip.error{ background:#b23b3b; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }

/* ===== 密码弹窗 ===== */
.password-overlay{
  position:fixed; inset:0; z-index:99999;
  background:rgba(20,22,26,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; justify-content:center; align-items:center; animation:fadeIn .3s ease;
}
.password-modal{
  background:var(--surface); border-radius:20px; padding:2.2rem 2.4rem 2.3rem; max-width:400px; width:92%;
  border:1px solid var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,0.25); text-align:center; animation:slideUp .38s ease;
}
@keyframes slideUp{ from{transform:translateY(30px); opacity:0} to{transform:translateY(0); opacity:1} }
.pm-icon{
  width:60px; height:60px; margin:0 auto 1rem; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  background:var(--ink);
}
.password-modal h2{ font-size:1.45rem; font-weight:800; color:var(--text); margin-bottom:0.3rem; }
.password-modal .sub{ font-size:0.88rem; color:var(--text-2); margin-bottom:1.4rem; }
.password-modal input[type="password"]{
  width:100%; padding:0.85rem 1rem; border:1px solid var(--border-2); border-radius:12px;
  font-size:1.05rem; font-family:'Inter',sans-serif; outline:none; transition:0.2s; text-align:center; letter-spacing:6px; background:var(--surface-2);
}
.password-modal input[type="password"]:focus{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(35,38,43,0.10); background:#fff; }
.remember-row{ display:flex; align-items:center; justify-content:center; gap:0.5rem; margin-top:0.9rem; font-size:0.84rem; color:var(--text-2); cursor:pointer; user-select:none; }
.remember-row input[type="checkbox"]{ width:16px; height:16px; cursor:pointer; accent-color:var(--ink); }
.password-modal button{
  margin-top:1rem; width:100%; padding:0.76rem; background:var(--ink);
  color:#fff; border:none; border-radius:12px; font-size:1rem; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif; transition:0.18s;
}
.password-modal button:hover{ background:var(--ink-hover); }
.password-modal button:active{ transform:scale(0.99); }
.password-error{ color:var(--expense); margin-top:0.6rem; font-size:0.83rem; font-weight:600; min-height:1.5rem; }

/* ============ 响应式 ============ */
@media (max-width: 960px){
  .app-shell{ grid-template-columns:1fr; gap:0; padding:0; }
  .sidebar{
    position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
    border:none; border-bottom:1px solid var(--border); border-radius:0; gap:0.7rem; padding:1rem 1.1rem;
  }
  .brand{ flex:1 1 auto; }
  .side-nav{ flex-direction:row; flex:1 1 100%; order:3; }
  .nav-link{ flex:1; justify-content:center; }
  .nav-link.is-active::before{ display:none; }
  .side-block{ flex:2 1 0; min-width:0; }
  .side-actions{ flex:1 1 0; min-width:0; flex-direction:row; }
  .year-selector select, .side-btn{ height:2.6rem; }
  .side-quote{ display:none; }
  .side-clock{ display:none; }
  .side-calendar{ display:none; }
  .almanac-box{ display:none; }
  .content-quote{ display:block; }
  .side-foot{ flex:1 1 100%; order:5; }
  .content{ margin:1rem; min-height:auto; padding:1.4rem 1.2rem 1.6rem; }
  .summary{ grid-template-columns:1fr; }
}
@media (max-width: 560px){
  .topbar{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:0.5rem 0.8rem; }
  .summary-item .value{ font-size:1.5rem; white-space:normal; word-break:break-word; }
  .summary-item{ overflow:hidden; }
  table{ font-size:0.82rem; min-width:0; width:100%; }
  col.month, col.income, col.tax, col.expense, col.balance{ min-width:0; }
  th, td{ padding:0.55rem 0.5rem; }
  .input-cell input{ font-size:0.82rem; }
  .footer-note{ flex-wrap:wrap; }
}

/* ===== 线性 SVG 图标（替代 emoji） ===== */
.ic{ width:1em; height:1em; flex:0 0 auto; display:inline-block; vertical-align:middle; color:var(--text-2); }
.nav-link .ic{ width:1.15em; height:1.15em; color:var(--text-2); }
.nav-link:hover .ic{ color:var(--text); }
.nav-link.is-active .ic{ color:#fff; }
.side-btn .ic{ width:1.1em; height:1.1em; }
.side-btn.primary .ic{ color:#fff; }
.side-btn.ghost .ic{ color:var(--text-2); }
.section-head h2 .ic{ width:1.15em; height:1.15em; color:var(--text-2); }
.save-status .ic{ width:1.15em; height:1.15em; margin-right:0; color:currentColor; }
.error-msg .ic, .loading .ic{ width:1.05em; height:1.05em; margin-right:0.35em; }
.error-msg .ic{ color:var(--expense); }
.si-icon svg{ width:20px; height:20px; }
.pm-icon svg{ width:30px; height:30px; color:#fff; }

/* 移动兜底：浏览器不认 viewport 时，由 JS 加 .force-mobile 强制单栏布局 */
html.force-mobile{ font-size:2.5rem; height:auto; }
html.force-mobile .screenshot-btn{ display:none; }
html.force-mobile body{ height:auto; min-height:100%; }
html.force-mobile .app-shell{ grid-template-columns:1fr; max-width:100%; margin:0; padding:0; gap:0; }
html.force-mobile .sidebar{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; border:none; border-bottom:1px solid var(--border); border-radius:0; gap:0.7rem; padding:1rem 1.1rem; }
html.force-mobile .brand{ flex:0 0 auto; }
html.force-mobile .brand-mark{ width:3.2rem; height:3.2rem; font-size:1.6rem; border-radius:0.9rem; }
html.force-mobile .side-nav{ flex-direction:row; flex:1 1 100%; order:3; }
html.force-mobile .nav-link{ flex:1; justify-content:center; }
html.force-mobile .side-block{ flex:2 1 0; min-width:0; }
html.force-mobile .side-actions{ flex:1 1 0; min-width:0; flex-direction:row; }
html.force-mobile .year-selector select,
html.force-mobile .side-btn{ height:2.6rem; font-size:0.88rem; }
html.force-mobile .side-quote{ display:none; }
html.force-mobile .side-clock{ display:none; }
html.force-mobile .side-calendar{ display:none; }
html.force-mobile .almanac-box{ display:none; }
html.force-mobile .content-quote{ display:block; }
html.force-mobile .year-selector select{ padding-right:3rem; background-size:26px 26px; background-position:right 0.95rem center; }
html.force-mobile .side-foot{ flex:1 1 100%; order:5; }
html.force-mobile .content{ margin:0.7rem; min-height:auto; padding:1.1rem 1rem 1.3rem; }
html.force-mobile .summary{ grid-template-columns:repeat(3,1fr); gap:0.4rem; margin-bottom:1rem; }
html.force-mobile .summary-item{ padding:0.6rem 0.55rem 0.7rem; overflow:hidden; }
html.force-mobile .summary-item .label{ font-size:0.62rem; padding-right:0; }
html.force-mobile .summary-item .value{ font-size:0.82rem; padding-right:0; white-space:normal; word-break:break-word; line-height:1.2; }
html.force-mobile .summary-item .sub{ font-size:0.6rem; padding-right:0; }
html.force-mobile .si-icon{ display:none; }
html.force-mobile .rate-wrap{ padding-right:0; }
html.force-mobile .savings-rate{ font-size:0.58rem; padding:0.15rem 0.4rem; white-space:normal; line-height:1.3; }
html.force-mobile .avg-pill{ font-size:0.58rem; padding:0.15rem 0.4rem; white-space:normal; line-height:1.3; }
html.force-mobile .topbar{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:0.5rem 0.8rem; }
html.force-mobile table{ min-width:0; width:100%; font-size:0.78rem; }
html.force-mobile col.month{ min-width:0; }
html.force-mobile col.income{ min-width:0; }
html.force-mobile col.tax{ min-width:0; }
html.force-mobile col.expense{ min-width:0; }
html.force-mobile col.balance{ min-width:0; }
html.force-mobile .resign-timer{ flex-wrap:wrap; }
html.force-mobile .resign-timer .rt-value{ font-size:0.82rem; white-space:normal; }
html.force-mobile .resign-timer .rt-period{ font-size:0.72rem; white-space:normal; }
html.force-mobile .side-calendar, html.force-mobile .almanac-box{ width:100%; margin:0; }
html.force-mobile th, html.force-mobile td{ padding:0.42rem 0.3rem; font-size:0.78rem; }
html.force-mobile .input-cell input{ font-size:0.95rem; max-width:250px; }
html.force-mobile .footer-note{ flex-wrap:wrap; }
html.force-mobile .password-modal{ padding:1.4rem 1.6rem 1.5rem; width:88%; }
html.force-mobile .password-modal h2{ font-size:0.9rem; margin-bottom:0.15rem; }
html.force-mobile .password-modal .sub{ font-size:0.56rem; margin-bottom:0.8rem; }
html.force-mobile .pm-icon{ width:38px; height:38px; font-size:1.1rem; margin-bottom:0.6rem; border-radius:12px; }
html.force-mobile .password-modal input[type="password"]{ padding:0.5rem 0.6rem; font-size:0.65rem; letter-spacing:3px; border-radius:8px; }
html.force-mobile .remember-row{ font-size:0.52rem; margin-top:0.5rem; gap:0.3rem; }
html.force-mobile .remember-row input[type="checkbox"]{ width:13px; height:13px; }
html.force-mobile .password-modal button{ padding:0.5rem; font-size:0.62rem; margin-top:0.6rem; border-radius:8px; }
html.force-mobile .footer-left input[type="checkbox"],
html.force-mobile .remember-row input[type="checkbox"]{ width:1.4rem; height:1.4rem; }

/* ===== 离职计时器 ===== */
.resign-timer{
  margin-top:1.1rem;
  display:flex; align-items:center; gap:0.95rem;
  background:linear-gradient(135deg, #f7f8f9 0%, #eef1f4 100%);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0.95rem 1.15rem;
  box-shadow:var(--shadow-sm);
  animation:fadeUp .5s ease .30s both;
}
.resign-timer .rt-badge{
  flex:0 0 auto;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.resign-timer .rt-text{ display:flex; flex-direction:column; gap:0.15rem; line-height:1.35; }
.resign-timer .rt-value{
  font-size:1.18rem; font-weight:800; letter-spacing:-0.01em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}
.resign-timer .rt-period{
  font-size:0.86rem; font-weight:700; color:#1f9d55;
  letter-spacing:0.2px;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}