* { box-sizing: border-box; }
    :root{
      --bg:#f5f7fb;
      --card:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --primary:#111827;
      --primary-2:#374151;
      --income:#16a34a;
      --expense:#dc2626;
      --accent:#2563eb;
      --warning:#d97706;
      --shadow:0 8px 30px rgba(17,24,39,.06);
      --radius:18px;
    }
    body.dark{
      --bg:#0b1020;
      --card:#121a2d;
      --text:#f8fafc;
      --muted:#94a3b8;
      --line:#263248;
      --primary:#f8fafc;
      --primary-2:#cbd5e1;
      --shadow:0 8px 30px rgba(0,0,0,.22);
    }
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:
      Inter, "PingFang SC","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;}
    button,input,select{font:inherit}
    button{cursor:pointer}
    .app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
    .sidebar{
      position:sticky;top:0;height:100vh;padding:26px 18px;background:#0f172a;color:#fff;
      display:flex;flex-direction:column;gap:24px
    }
    .brand{display:flex;gap:12px;align-items:center;padding:4px 8px}
    .logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#60a5fa,#22c55e);
      display:grid;place-items:center;font-weight:900;color:#0f172a;box-shadow:0 10px 25px rgba(96,165,250,.22)}
    .brand h1{font-size:18px;margin:0}
    .brand small{display:block;color:#94a3b8;margin-top:2px}
    .nav{display:grid;gap:8px}
    .nav button{border:0;background:transparent;color:#cbd5e1;border-radius:12px;padding:12px 13px;text-align:left}
    .nav button.active,.nav button:hover{background:#1e293b;color:#fff}
    .side-bottom{margin-top:auto;display:grid;gap:8px}
    .side-bottom button{border:1px solid #334155;background:#111827;color:#e5e7eb;border-radius:12px;padding:10px}
    .content{padding:28px;max-width:1440px;width:100%;margin:0 auto}
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
    .topbar h2{margin:0;font-size:26px}
    .topbar p{margin:6px 0 0;color:var(--muted);font-size:14px}
    .top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .btn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;padding:10px 14px;font-weight:700}
    .btn.primary{background:#111827;color:#fff;border-color:#111827}
    body.dark .btn.primary{background:#f8fafc;color:#111827;border-color:#f8fafc}
    .btn.danger{color:var(--expense)}
    .grid{display:grid;gap:16px}
    .summary{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:16px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
    .stat{padding:20px}
    .stat .label{color:var(--muted);font-size:13px}
    .stat .value{font-size:28px;font-weight:850;margin-top:8px;letter-spacing:-.5px}
    .stat .sub{font-size:12px;color:var(--muted);margin-top:7px}
    .income{color:var(--income)} .expense{color:var(--expense)}
    .main-grid{grid-template-columns:minmax(0,1.6fr) minmax(320px,.8fr);align-items:start}
    .section{padding:20px}
    .section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
    .section-title h3{margin:0;font-size:17px}
    .muted{color:var(--muted);font-size:13px}
    .chart{height:250px;display:flex;align-items:end;gap:12px;padding:18px 4px 2px}
    .bar-group{flex:1;display:flex;align-items:end;justify-content:center;gap:5px;height:100%;position:relative;padding-bottom:26px}
    .bar{width:34%;min-width:8px;border-radius:7px 7px 2px 2px;transition:.25s;position:relative}
    .bar.in{background:#22c55e}.bar.out{background:#ef4444}
    .bar:hover{filter:brightness(.95)}
    .bar-label{position:absolute;bottom:0;font-size:11px;color:var(--muted);white-space:nowrap}
    .legend{display:flex;gap:16px;color:var(--muted);font-size:12px}
    .legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px}
    .budget-wrap{display:grid;gap:12px}
    .budget-row{display:flex;justify-content:space-between;gap:14px;font-size:14px}
    .progress{height:12px;background:var(--bg);border-radius:999px;overflow:hidden;border:1px solid var(--line)}
    .progress > div{height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb);width:0%;transition:.3s}
    .mini-form{display:grid;grid-template-columns:1fr auto;gap:8px}
    input,select{
      width:100%;border:1px solid var(--line);background:var(--card);color:var(--text);
      border-radius:12px;padding:11px 12px;outline:none
    }
    input:focus,select:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.15)}
    .add-card{margin-top:16px}
    .entry-form{display:grid;grid-template-columns:1.05fr .85fr .95fr 1fr 1.45fr auto;gap:10px;align-items:end}
    .field label{display:block;color:var(--muted);font-size:12px;margin:0 0 6px 2px}
    .field .money{position:relative}.field .money span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
    .field .money input{padding-left:26px}
    .entry-form button{height:43px}
    .filters{display:grid;grid-template-columns:1.5fr repeat(3,.65fr);gap:10px;margin-bottom:14px}
    .table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
    table{width:100%;border-collapse:collapse;min-width:760px}
    th,td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
    th{color:var(--muted);font-weight:700;background:color-mix(in srgb,var(--card) 92%,var(--bg))}
    tr:last-child td{border-bottom:0}
    .badge{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:750}
    .badge.in{background:rgba(34,197,94,.12);color:var(--income)}
    .badge.out{background:rgba(239,68,68,.12);color:var(--expense)}
    .amount{font-weight:850}
    .actions{display:flex;gap:6px}
    .icon-btn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:9px;padding:6px 9px}
    .empty{padding:40px 18px;text-align:center;color:var(--muted)}
    .category-list{display:grid;gap:10px}
    .cat-row{display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;font-size:13px}
    .cat-bar{height:8px;background:var(--bg);border-radius:99px;overflow:hidden}
    .cat-bar > div{height:100%;background:#818cf8}
    .toast{position:fixed;right:22px;bottom:22px;background:#111827;color:white;padding:12px 16px;border-radius:12px;
      box-shadow:0 15px 40px rgba(0,0,0,.22);opacity:0;pointer-events:none;transform:translateY(8px);transition:.2s;z-index:50}
    .toast.show{opacity:1;transform:translateY(0)}
    .view{display:none}.view.active{display:block}
    .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .setting-box{padding:20px}
    .setting-box h3{margin-top:0}
    .setting-box p{color:var(--muted);font-size:13px;line-height:1.7}
    .danger-zone{border-color:rgba(220,38,38,.35)}
    .mobile-nav{display:none}
    @media(max-width:1050px){
      .summary{grid-template-columns:repeat(2,1fr)}
      .main-grid{grid-template-columns:1fr}
      .entry-form{grid-template-columns:repeat(3,1fr)}
      .entry-form .wide{grid-column:span 2}
    }
    @media(max-width:760px){
      .app{display:block}.sidebar{display:none}.content{padding:16px 12px 90px}
      .topbar{align-items:flex-start}.topbar h2{font-size:22px}.top-actions .hide-mobile{display:none}
      .summary{grid-template-columns:1fr 1fr}.stat{padding:16px}.stat .value{font-size:22px}
      .entry-form{grid-template-columns:1fr 1fr}.entry-form .wide{grid-column:1/-1}
      .filters{grid-template-columns:1fr 1fr}.filters input:first-child{grid-column:1/-1}
      .settings-grid{grid-template-columns:1fr}
      .mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;background:var(--card);
        border-top:1px solid var(--line);z-index:40}
      .mobile-nav button{border:0;background:transparent;color:var(--muted);padding:12px 4px;font-size:12px}
      .mobile-nav button.active{color:var(--text);font-weight:800}
    }
  
  /* ===== 密码锁屏 ===== */
  body.locked { overflow: hidden; }
  body.locked .app,
  body.locked .mobile-nav { visibility: hidden; }
  .password-gate {
    position: fixed; inset: 0; z-index: 99999;
    display: grid; place-items: center;
    padding: 22px;
    background:
      radial-gradient(circle at 20% 20%, rgba(96,165,250,.22), transparent 30%),
      radial-gradient(circle at 80% 80%, rgba(34,197,94,.18), transparent 28%),
      #0f172a;
  }
  .password-gate.hidden { display: none; }
  .password-panel {
    width: min(420px, 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    padding: 30px;
    background: rgba(17,24,39,.88);
    color: #f8fafc;
    box-shadow: 0 28px 90px rgba(0,0,0,.38);
    backdrop-filter: blur(18px);
  }
  .password-icon {
    width: 58px; height: 58px; border-radius: 18px;
    display: grid; place-items: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg,#60a5fa,#22c55e);
    color: #0f172a; font-size: 27px; font-weight: 900;
  }
  .password-panel h2 { margin: 0; font-size: 25px; }
  .password-panel p { margin: 9px 0 22px; color: #94a3b8; font-size: 14px; line-height: 1.65; }
  .password-panel input {
    width: 100%; height: 50px;
    border: 1px solid #334155; border-radius: 14px;
    background: #0b1220; color: #fff;
    font-size: 21px; letter-spacing: 8px; text-align: center;
    outline: none;
  }
  .password-panel input:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.18); }
  .password-panel button {
    width:100%; height:48px; margin-top:12px;
    border:0; border-radius:14px;
    background:#f8fafc; color:#111827; font-weight:850; font-size:15px;
  }
  .password-error { min-height: 20px; margin-top: 10px; color: #fca5a5; font-size: 13px; text-align:center; }
  .password-hint { margin-top:16px; color:#64748b; text-align:center; font-size:12px; }
  .password-panel.shake { animation: gateShake .28s linear; }
  @keyframes gateShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }