:root{
  --bg:#f6f7f9; --card:#fff; --fg:#1c1f23; --muted:#6b7280; --line:#e3e6ea;
  --accent:#2563eb; --ok:#0f766e; --warn:#b45309; --bad:#b91c1c;
  --ok-bg:#ecfdf5; --warn-bg:#fffbeb; --bad-bg:#fef2f2; --soon-bg:#f5f7ff;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14161a; --card:#1b1e24; --fg:#e6e8eb; --muted:#9aa3af; --line:#2b3038;
    --accent:#60a5fa; --ok:#5eead4; --warn:#fbbf24; --bad:#f87171;
    --ok-bg:#0f2b26; --warn-bg:#2c2410; --bad-bg:#2d1516; --soon-bg:#1a1f2e;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",
       "Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.92em}
small{color:var(--muted)}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex; align-items:center; gap:24px; padding:0 20px; height:52px;
  background:var(--card); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.brand{font-weight:700; color:var(--fg); letter-spacing:.02em}
.topbar nav{display:flex; gap:18px; flex:1}
.topbar nav a{color:var(--muted); padding:4px 0; border-bottom:2px solid transparent}
.topbar nav a.on{color:var(--fg); border-bottom-color:var(--accent)}
.me{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px}
.me form{display:inline}

main{max-width:1180px; margin:0 auto; padding:22px 20px 60px}

/* ---------- 通用块 ---------- */
.head{display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px; gap:12px}
.head h2{margin:0; font-size:19px}
.head h2 small{font-weight:400}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin-bottom:18px;
}
.card h3{margin:0 0 12px; font-size:15px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.card h3 small{font-weight:400}
.empty{color:var(--muted); padding:10px 0; margin:0}
.hint{color:var(--muted); font-size:13px; margin-left:10px}
.tag{
  display:inline-block; padding:1px 7px; border-radius:20px; font-size:12px;
  background:var(--bg); border:1px solid var(--line); color:var(--muted); vertical-align:middle;
}
.warn{color:var(--warn)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.small{font-size:13px; color:var(--muted)}

/* ---------- 提示条 ---------- */
/* pre-wrap: 发信失败时提示和原始 SMTP 报错分两段显示，换行要保留 */
.banner{padding:10px 14px; border-radius:8px; margin-bottom:16px; font-size:14px;
        white-space:pre-wrap; word-break:break-word}
.banner.ok{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok)}
.banner.bad{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad)}

/* ---------- 统计 ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:20px}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column; gap:2px;
}
.stat b{font-size:26px; line-height:1.1}
.stat span{color:var(--muted); font-size:13px}
.stat.urgent b{color:var(--warn)}
.stat.overdue b{color:var(--bad)}

/* ---------- 表格 ---------- */
table{width:100%; border-collapse:collapse; background:var(--card);
      border:1px solid var(--line); border-radius:10px; overflow:hidden}
th,td{padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.03em; background:var(--bg)}
tbody tr:last-child td{border-bottom:none}
table.tight th, table.tight td{padding:7px 10px; font-size:14px}
tr.overdue{background:var(--bad-bg)}
tr.urgent{background:var(--warn-bg)}
tr.soon{background:var(--soon-bg)}

/* ---------- 看板：每月支出图 ---------- */
.spend-head{display:flex; gap:28px; align-items:flex-end; flex-wrap:wrap; margin-bottom:14px}
.spend-head>div{display:flex; flex-direction:column; gap:1px}
.spend-head span{color:var(--muted); font-size:12px}
.spend-head b{font-size:20px}
.legend{flex-direction:row !important; align-items:center; gap:6px !important;
        color:var(--muted); font-size:12px; margin-left:auto}
.sw{display:inline-block; width:10px; height:10px; border-radius:2px}
.sw-total{background:var(--accent); opacity:.35}
.sw-paid{background:var(--accent)}
.sw-proj{background:var(--accent); opacity:.14; border:1px dashed var(--accent)}

/* preserveAspectRatio="none" 会把柱子横向拉伸，但文字不受影响（SVG 文本按 viewBox 缩放），
   所以这里固定高度、宽度撑满，窄屏上柱子变细而不是溢出。 */
.chart{width:100%; height:200px; display:block; overflow:visible}
.chart .axis{stroke:var(--line); stroke-width:1}
.chart .bar-total{fill:var(--accent); opacity:.35}
.chart .bar-paid{fill:var(--accent)}
.chart .bar-now{fill:var(--accent); opacity:.07}
/* 预测部分：更浅 + 虚线描边，一眼能和已确认支出区分开 */
.chart .bar-proj{fill:var(--accent); opacity:.14;
                 stroke:var(--accent); stroke-width:1; stroke-dasharray:3 3}
.chart .divider{stroke:var(--muted); stroke-width:1; stroke-dasharray:2 3; opacity:.6}
.chart .xlabel{fill:var(--muted); font-size:11px; text-anchor:middle}
.chart .xlabel.future{opacity:.6}
.chart .ylabel{fill:var(--muted); font-size:11px}
.chart .budget-line{stroke:var(--ok); stroke-width:1.5; stroke-dasharray:6 4}
.chart .budget-line.over{stroke:var(--bad)}
.chart .budget-label{fill:var(--ok); font-size:11px; text-anchor:end}
.chart .budget-label.over{fill:var(--bad)}
.spend-head b.over{color:var(--bad)}
.spend-head b.under{color:var(--ok)}
.spend-head b small{font-weight:400; font-size:12px; margin-left:4px}
.filters .gap{width:14px}
.chart g:hover .bar-total{opacity:.55}

/* ---------- 看板：渠道栏 ---------- */
.chans{max-width:340px}
.chan{
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  padding:2px 0; line-height:1.45; cursor:default;
}
.chan + .chan{border-top:1px dashed var(--line)}
.chan .plat{
  flex:none; font-size:11px; padding:1px 6px; border-radius:4px;
  background:var(--bg); border:1px solid var(--line); color:var(--muted);
}
.chan .cname{color:var(--fg)}
.chan .cid{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px;
  color:var(--muted); word-break:break-all;
}
.chan a.cid{color:var(--accent)}
.chan .size{flex:none; font-size:11px; color:var(--muted)}
.tiny{font-size:11px; margin-bottom:3px}

/* ---------- 表单 ---------- */
input,select,textarea{
  font:inherit; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px; width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px}
textarea{resize:vertical}
label{display:block; font-size:13px; color:var(--muted); margin-bottom:2px}
label input,label select,label textarea{margin-top:4px; color:var(--fg)}

.form2{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 16px; align-items:end}
.form2 .full{grid-column:1/-1}
.check{display:flex; align-items:center; gap:7px; color:var(--fg); font-size:14px}
.check input{width:auto; margin:0}
.checks{display:flex; gap:16px; flex-wrap:wrap; margin-top:4px}
.checks.col{flex-direction:column; gap:8px; margin-bottom:14px}

.filters{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.filters input,.filters select{width:auto; min-width:170px}
.chip{
  padding:4px 12px; border-radius:20px; border:1px solid var(--line);
  color:var(--muted); font-size:13px; background:var(--card);
}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.chip.on:hover{text-decoration:none}

button,.btn{
  font:inherit; cursor:pointer; padding:7px 14px; border-radius:7px;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  display:inline-block;
}
button:hover,.btn:hover{border-color:var(--accent); text-decoration:none}
.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.primary:hover{opacity:.9}
.wide{width:100%; margin-top:8px}
button.link{background:none; border:none; padding:2px 4px; color:var(--accent)}
button.link.danger{color:var(--bad)}
form.inline{display:flex; gap:6px; align-items:center; justify-content:flex-end}
form.inline select{width:auto; min-width:110px}
.danger-zone{margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}

details{margin-top:14px}
summary{cursor:pointer; color:var(--accent); font-size:14px; padding:6px 0}
details[open] summary{margin-bottom:8px}

.pager{display:flex; gap:16px; align-items:center; justify-content:center;
       margin-top:16px; color:var(--muted); font-size:14px}

/* ---------- 合同摘要条 ---------- */
.summary{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; align-items:center}
.summary>div{display:flex; flex-direction:column; gap:1px}
.summary span{color:var(--muted); font-size:12px}
.summary b{font-size:17px}
.summary .act{align-items:flex-start; justify-content:center}
.summary.overdue{border-color:var(--bad)}
.summary.urgent{border-color:var(--warn)}

/* ---------- 登录 ---------- */
.login{max-width:340px; margin:12vh auto; background:var(--card);
       border:1px solid var(--line); border-radius:12px; padding:28px}
.login h1{margin:0; font-size:22px}
.login .sub{color:var(--muted); font-size:13px; margin:4px 0 20px}
.login label{margin-bottom:12px}

@media (max-width:640px){
  .topbar{gap:14px; padding:0 12px}
  main{padding:16px 12px 40px}
  table{display:block; overflow-x:auto}
}