/* ============================================================
   app.css —— 个人财务记账 · Seline Analytics 风格主题
   设计规范：Seline Analytics（Quiet analyst's desk on warm paper）
   - 暖石画布 #fafaf9，白色仅用于卡片面
   - 1px 石色细边框作为主要结构，轻阴影浮起
   - 唯一彩色强调：青色 #3ba6f1（CTA / 链接 / 品牌色）
   - 按钮 pill 全圆，输入 6px 圆角，卡片 10px 圆角
   - 无渐变、无贴纸色、无重阴影
   ============================================================ */
:root{
  --canvas:#fafaf9;
  --white:#ffffff;
  --border:#e8e6e5;
  --border-2:#d6d3d1;
  --ash:#a8a29e;
  --warm:#78716c;
  --ink:#0c0a09;
  --soot:#1c1917;
  --wash:#c1e1f7;
  --cyan:#3ba6f1;
  --cyan-edge:#3398e1;
  /* 数据语义色（克制：青=收入/正数，暖橙=支出/负债） */
  --pos:#3ba6f1;
  --neg:#c2410c;
  --neutral:#78716c;
  --font-ui:"Inter","Inter Tight","Segoe UI","Microsoft YaHei",-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-ui);background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.64}

/* ---- 顶部条：暖白 + 底部细线 ---- */
header{background:var(--white);color:var(--ink);padding:12px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--border)}
header h1{font-size:16px;font-weight:500;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
header h1 small{color:var(--warm);font-weight:400;font-size:12px}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:var(--cyan);color:#fff;font-weight:600;font-size:12px;flex-shrink:0}
header .tools{display:flex;gap:8px;flex-wrap:wrap}
header .tools button{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:400;cursor:pointer;transition:border-color .15s,color .15s;font-family:var(--font-ui)}
header .tools button:hover{border-color:var(--cyan);color:var(--cyan-edge)}
header .tools button.warn-soft{color:var(--neg)}
header .tools button.danger-soft{color:var(--neg)}

/* ---- 导航：无填充文字链接 ---- */
nav{background:var(--white);border-bottom:1px solid var(--border);display:flex;padding:0 18px;gap:2px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
nav button{border:none;background:none;padding:11px 16px;font-size:13.5px;font-weight:400;cursor:pointer;color:var(--warm);white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s;font-family:var(--font-ui)}
nav button:hover{color:var(--ink)}
nav button.active{color:var(--ink);font-weight:500;border-bottom-color:var(--cyan)}

/* ---- 导航下拉子菜单（系统配置） ---- */
nav .dropdown{position:relative}
nav .dd-menu{display:none;position:absolute;top:100%;left:0;min-width:150px;background:var(--white);border:1px solid var(--border);border-radius:8px;box-shadow:rgba(17,12,46,0.12) 0 10px 32px 0;padding:4px;z-index:20;flex-direction:column;gap:2px}
nav .dropdown:hover .dd-menu{display:flex}
nav .dd-menu button{border:none;background:none;padding:8px 14px;font-size:13px;color:var(--warm);text-align:left;border-radius:6px;border-bottom:none;cursor:pointer;white-space:nowrap;font-family:var(--font-ui)}
nav .dd-menu button:hover{background:var(--canvas);color:var(--ink)}

main{max-width:1200px;margin:22px auto;padding:0 18px 80px}

/* ---- 页面容器 ---- */
.page{display:none}.page.show{display:block;animation:pageIn .2s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- 卡片：白面 + 1px 石边 + 轻阴影 ---- */
.card{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:14px;box-shadow:rgba(0,0,0,0.05) 0 4px 16px 0}
.card h2{font-size:15px;font-weight:500;margin-bottom:12px;color:var(--ink);letter-spacing:-.01em}
.card .card-tip{font-size:11.5px;color:var(--warm);margin-top:6px}

/* ---- KPI 统计卡：安静的数字 ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:14px}
.kpi{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 16px;box-shadow:rgba(0,0,0,0.05) 0 4px 16px 0}
.kpi .label{font-size:11.5px;color:var(--warm);font-weight:400;letter-spacing:.01em;display:flex;align-items:center;gap:6px}
.kpi .label::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ash)}
.kpi.t-sky .label::before{background:var(--cyan)}
.kpi.t-ember .label::before{background:var(--neg)}
.kpi.t-mint .label::before{background:var(--cyan)}
.kpi.t-violet .label::before{background:var(--soot)}
.kpi .val{font-size:21px;font-weight:500;margin-top:4px;letter-spacing:-.02em;color:var(--ink)}
.val.pos{color:var(--pos)}.val.neg{color:var(--neg)}.val.neutral{color:var(--neutral)}

/* ---- 表单控件 ---- */
input,select{border:1px solid var(--border-2);border-radius:6px;padding:7px 12px;font-size:14px;width:100%;background:var(--white);color:var(--ink);font-family:var(--font-ui)}
input:focus,select:focus{outline:none;box-shadow:0 0 0 2px var(--cyan);border-color:var(--cyan)}
input::placeholder{color:var(--warm)}
input[type=date],input[type=datetime-local]{padding:6px 10px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row>*{flex:1;min-width:120px}

/* ---- 按钮：青色主 CTA / 灰边 ghost ---- */
button.btn{background:var(--cyan);color:#fff;border:1px solid var(--cyan-edge);border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,opacity .15s;font-family:var(--font-ui)}
button.btn:hover{background:#2e97e6}
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--border);font-weight:400}
button.btn.sec:hover{border-color:var(--cyan);color:var(--cyan-edge)}
button.btn.danger{background:transparent;color:var(--neg);border:1px solid var(--border-2);font-weight:400}
button.btn.danger:hover{border-color:var(--neg);color:var(--neg)}
button.btn.violet{background:var(--soot);border-color:var(--soot);color:#fff}
button.btn.mini{padding:3px 12px;font-size:12px}

/* ---- 表格 ---- */
table{width:100%;border-collapse:collapse}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
th{color:var(--warm);font-weight:500;font-size:11.5px;letter-spacing:.02em;background:var(--white)}
tbody tr:hover{background:#f5f5f4}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.empty{color:var(--ash);text-align:center;padding:24px 10px;font-size:13px}

/* ---- 进度条 / 专项条目 ---- */
.bar{height:8px;border-radius:999px;background:var(--border);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px}
.exp-item{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px;gap:8px}
.exp-item:last-child{border-bottom:none}
.swatch{display:inline-block;width:20px;height:20px;border-radius:6px;cursor:pointer;border:1px solid var(--border-2)}
.swatch.sel{outline:2px solid var(--cyan)}
.muted{color:var(--warm);font-size:12px}

/* ---- 徽章 / 标签：pill + 中性 ---- */
.badge{display:inline-block;padding:1px 10px;border-radius:999px;border:1px solid var(--border);font-size:11px;font-weight:400;letter-spacing:.02em;white-space:nowrap;color:var(--warm);background:var(--white)}
.badge.blue{background:var(--wash);border-color:var(--wash);color:#0b74c7}

/* ---- 二级子页 tab（系统配置等页内导航） ---- */
button.pill{background:transparent;border:1px solid var(--border-2);border-radius:999px;padding:5px 14px;font-size:12.5px;color:var(--warm);cursor:pointer;transition:all .15s;font-family:var(--font-ui)}
button.pill:hover{border-color:var(--cyan);color:var(--cyan-edge)}
button.pill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.badge.mint{color:#0b74c7;border-color:var(--wash)}
.badge.lav{background:#f5f5f4;border-color:var(--border)}
.badge.sun{background:var(--wash);border-color:var(--wash);color:var(--ink)}
.badge.ember{color:var(--neg);border-color:var(--border-2)}
.badge.violet{background:var(--soot);border-color:var(--soot);color:#fff}
.badge.gray{background:var(--border);border-color:var(--border);color:var(--warm)}

/* ---- 反馈体系：toast + 模态 ---- */
.toast-wrap{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:10000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:max-content;max-width:92vw}
.toast{color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:500;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;line-height:1.5;box-shadow:rgba(0,0,0,0.1) 0 4px 16px 0}
.toast.show{opacity:1;transform:translateY(0)}
.toast.success{background:var(--soot)}
.toast.error{background:var(--neg)}
.toast.warn{background:var(--ink);color:var(--wash)}
.modal-mask{position:fixed;inset:0;background:rgba(12,10,9,.4);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .18s ease;padding:12px}
.modal-box{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:22px 26px;max-width:400px;width:100%;animation:popIn .18s ease;box-shadow:rgba(17,12,46,0.12) 0 12px 45px 0}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}

/* ---- 响应式 ---- */
@media (max-width:720px){
  main{padding:14px 12px 60px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  nav{padding:0 8px}
  nav button{padding:10px 12px;font-size:13px}
  header{padding:10px 14px}
  .card{padding:14px 14px}
}