/* ============================================================
   DESIGN TOKENS
   Ledger / passbook aesthetic: cream paper, ink-green cover,
   brick-red for expense, deep green for income, navy for actions.
   One bold element (the cover panel) — everything else stays
   flat, quiet, hairline-ruled like a paper ledger.
   ============================================================ */
:root{
  --paper:#F6F3EA;
  --paper-line:#DED6C2;
  --ink:#1F2A24;
  --ink-soft:#41504A;
  --card:#FFFFFF;
  --rule:#E4DFD0;
  --income:#2F6F4E;
  --income-bg:#E7F0EA;
  --expense:#A6432E;
  --expense-bg:#F5E7E2;
  --accent:#1B4B6B;
  --accent-bg:#E6EDF1;
  --muted:#8A8574;
  --danger:#A6432E;
  --radius:8px;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
}

/* Dark theme variables */
[data-theme="dark"]{
  --paper:#1E1E1E;
  --paper-line:#333333;
  --ink:#FFFFFF;
  --ink-soft:#CCCCCC;
  --card:#2D2D2D;
  --rule:#404040;
  --income:#4CAF50;
  --income-bg:#2E3D2E;
  --expense:#F44336;
  --expense-bg:#3D2E2E;
  --accent:#2196F3;
  --accent-bg:#1E3A5F;
  --muted:#AAAAAA;
  --danger:#F44336;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
::-webkit-scrollbar{width:0;height:0;}

#app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px 6px;
}
.topbar .brand{
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:0.2px;
}
.topbar .brand span{color:var(--muted); font-size:13px; font-family:var(--sans); margin-left:6px;}
.icon-btn{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--paper-line);
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; color:var(--ink);
}

/* ---------- Views container ---------- */
.views{
  flex:1;
  overflow-y:auto;
  padding:0 16px 100px;
}
.view{display:none;}
.view.active{display:block; animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

/* ---------- Cover panel (the one bold element) ---------- */
.cover{
  background:var(--ink);
  color:var(--paper);
  border-radius:10px;
  padding:22px 20px 18px;
  margin:6px 0 18px;
  background-image:
    repeating-linear-gradient(180deg, rgba(246,243,234,0.05) 0px, rgba(246,243,234,0.05) 1px, transparent 1px, transparent 27px);
  position:relative;
  overflow:hidden;
}
.cover .label{font-size:12.5px; color:#C9CFC9; letter-spacing:0.3px;}
.cover .balance{
  font-family:var(--serif);
  font-size:40px;
  font-variant-numeric:tabular-nums;
  margin:4px 0 14px;
  letter-spacing:0.2px;
}
.cover .split{display:flex; gap:22px;}
.cover .split div{font-size:13px;}
.cover .split b{
  display:block; font-family:var(--serif); font-size:17px;
  font-variant-numeric:tabular-nums; margin-top:2px;
}
.cover .split .inc b{color:#8FD1AC;}
.cover .split .exp b{color:#E9A896;}

/* ---------- Section headers ---------- */
.sec-head{
  display:flex; align-items:center; justify-content:space-between;
  margin:22px 0 10px;
}
.sec-head h2{
  font-family:var(--serif); font-size:16px; font-weight:normal; margin:0; color:var(--ink);
}
.sec-head .link{font-size:13px; color:var(--accent); cursor:pointer;}

/* ---------- Month switcher ---------- */
.month-switch{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:4px 0 14px;
}
.month-switch button{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--paper-line);
  background:var(--card); cursor:pointer; color:var(--ink); font-size:14px;
}
.month-switch .m-label{font-family:var(--serif); font-size:15px; min-width:130px; text-align:center;}

/* ---------- Bookmarks strip ---------- */
.bm-strip{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px;}
.bm-chip{
  flex:0 0 auto; background:var(--card); border:1px solid var(--paper-line);
  border-radius:20px; padding:8px 14px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.bm-chip small{display:block; color:var(--muted); font-size:11px; margin-top:1px;}
.bm-chip.add{color:var(--accent); border-style:dashed;}

/* ---------- Cards / lists ---------- */
.card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  margin-bottom:10px;
}
.list-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
  cursor:pointer;
}
.list-row:last-child{border-bottom:none;}
.dot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px; font-weight:600; color:#fff; flex:0 0 auto;
}
.row-main{flex:1; min-width:0;}
.row-main .t1{font-size:14.5px; color:var(--ink);}
.row-main .t2{font-size:12px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.amt{font-family:var(--serif); font-size:15px; font-variant-numeric:tabular-nums; flex:0 0 auto;}
.amt.income{color:var(--income);}
.amt.expense{color:var(--expense);}
.amt.transfer{color:var(--accent);}

.day-group .day-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 2px 6px; font-size:12.5px; color:var(--muted);
}
.day-group .day-head b{color:var(--ink); font-weight:600;}

.empty{
  text-align:center; padding:40px 20px; color:var(--muted); font-size:13.5px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}

.empty::before{
  content:"";
  display:block;
  width:48px;
  height:48px;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.6;
}

.empty-transactions::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z' fill='%238A8574'/%3E%3Cpath d='M12 10v6M8 14h8' stroke='%23FFFFFF' stroke-width='2'/%3E%3C/svg%3E");
}

.empty-bookmarks::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v4h4v-4zm0-6h-4v6h4V7z' fill='%238A8574'/%3E%3C/svg%3E");
}

.empty-account::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15v2h16v-2H4zm4-4H6v-2c0-2.21 1.79-4 4-4s4 1.79 4 4v2h2V7h2V5c0-3.31-2.69-6-6-6-1.45 0-2.75.56-3.74 1.46l1.46 1.46C12.41 3.56 13.71 3 15 3h2v2h-1l-.89-.89C13.05 3.46 12.25 3 11 3H7c-1.66 0-3 1.34-3 3v2H8v2h2v4H8V7h2V5c0-1.11.89-2 2-2s2 .89 2 2v2h2V7h2V5z' fill='%238A8574'/%3E%3C/svg%3E");
}

.empty-budgets::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h18v2H3V3zm0 4h18v2H3V7zm0 4h18v2H3v-2zm0 4h12v2H3v-2z' fill='%238A8574'/%3E%3C/svg%3E");
}

.empty-stats::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v-4h4v4zm0-8h-4V7h4v4z' fill='%238A8574'/%3E%3C/svg%3E");
}

.empty-recurring::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4c-5 0-9 4-9 9H1l3 8 9-6 9 6 3-8h-3c0-4-3-7-7-7zm-1 14H6v-2h5v2zm0-4H6v-2h5v2zm0-4H6V9h5v2z' fill='%238A8574'/%3E%3C/svg%3E");
}

/* ---------- Due recurring banner ---------- */
.banner{
  background:var(--accent-bg); border:1px solid #C9D9E1; border-radius:var(--radius);
  padding:12px 14px; margin:10px 0; font-size:13px; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.banner button{background:var(--accent); color:#fff; border:none; border-radius:6px; padding:7px 12px; font-size:12.5px; cursor:pointer;}

/* ---------- Stats ---------- */
.donut-wrap{display:flex; align-items:center; gap:18px; padding:14px;}
.legend{flex:1; font-size:13px;}
.legend-row{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.legend-row .sw{width:10px;height:10px;border-radius:2px;flex:0 0 auto;}
.legend-row .name{flex:1; color:var(--ink-soft);}
.legend-row .val{font-variant-numeric:tabular-nums; color:var(--ink);}
.bars{padding:14px 10px 6px;}

/* ---------- Budget ---------- */
.budget-row{padding:12px 14px; border-bottom:1px solid var(--rule);}
.budget-row:last-child{border-bottom:none;}
.budget-top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:6px;}
.budget-top .cat{color:var(--ink);}
.budget-top .nums{color:var(--muted); font-variant-numeric:tabular-nums;}
.track{height:7px; background:var(--rule); border-radius:4px; overflow:hidden;}
.track .fill{height:100%; background:var(--income); border-radius:4px;}
.track .fill.over{background:var(--expense);}

/* ---------- Accounts ---------- */
.acct-row{display:flex; align-items:center; gap:12px; padding:14px;}
.acct-row .badge{width:36px;height:36px;border-radius:8px;background:var(--accent-bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;}
.acct-row .row-main .t1{font-size:15px;}
.acct-row .amt{font-size:16px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 16px; border-radius:7px; border:1px solid var(--paper-line);
  background:var(--card); color:var(--ink); font-size:14px; cursor:pointer;
}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.danger{background:var(--expense-bg); border-color:#E3C6BC; color:var(--expense);}
.btn.block{width:100%;}
.btn.ghost{background:transparent; border-color:transparent; color:var(--accent); padding:8px 4px;}

/* ---------- Bottom nav ---------- */
.tabbar{
  position:sticky; bottom:0; left:0; right:0;
  background:var(--card);
  border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
  max-width:480px; margin:0 auto; width:100%;
}
.tab-btn{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:10.5px; cursor:pointer; padding:2px 8px;
}
.tab-btn.active{color:var(--ink);}
.tab-btn svg{width:20px;height:20px;}
.fab{
  width:52px;height:52px;border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:26px; border:none; cursor:pointer; margin-top:-26px;
  box-shadow:0 3px 8px rgba(31,42,36,0.3);
}

/* ---------- Modal / sheet ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(31,42,36,0.45);
  display:none; align-items:flex-end; justify-content:center; z-index:50;
}
.overlay.show{display:flex;}
.sheet{
  background:var(--paper); width:100%; max-width:480px;
  border-radius:16px 16px 0 0; max-height:92vh; overflow-y:auto;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom,0px));
  animation:slideup .2s ease;
}
@keyframes slideup{from{transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.sheet-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.sheet-head h3{font-family:var(--serif); font-weight:normal; font-size:17px; margin:0;}
.sheet-head .x{cursor:pointer; color:var(--muted); font-size:20px; line-height:1; padding:4px;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--paper-line); border-radius:7px;
  background:var(--card); font-size:14.5px; color:var(--ink);
}
.field textarea{resize:vertical; min-height:44px;}

.type-toggle{display:flex; gap:8px; margin-bottom:16px;}
.type-toggle button{
  flex:1; padding:9px; border-radius:7px; border:1px solid var(--paper-line);
  background:var(--card); font-size:13.5px; cursor:pointer; color:var(--muted);
}
.type-toggle button.active[data-t="expense"]{background:var(--expense-bg); border-color:#E3C6BC; color:var(--expense);}
.type-toggle button.active[data-t="income"]{background:var(--income-bg); border-color:#C4DFCB; color:var(--income);}
.type-toggle button.active[data-t="transfer"]{background:var(--accent-bg); border-color:#C9D9E1; color:var(--accent);}

.amount-row{display:flex; gap:8px; align-items:center;}
.amount-row input{flex:1; font-family:var(--serif); font-size:22px; font-variant-numeric:tabular-nums;}
.calc-btn{
  width:44px;height:44px;border-radius:7px; border:1px solid var(--paper-line);
  background:var(--card); font-size:17px; cursor:pointer; flex:0 0 auto;
}

.chip-grid{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  padding:8px 13px; border-radius:20px; border:1px solid var(--paper-line);
  background:var(--card); font-size:13px; cursor:pointer; color:var(--ink-soft);
}
.chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}

.switch-row{display:flex; align-items:center; justify-content:space-between; padding:4px 0;}
.switch{position:relative; width:40px; height:23px; flex:0 0 auto;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:var(--paper-line); border-radius:20px; cursor:pointer; transition:.15s;}
.slider:before{content:""; position:absolute; width:17px;height:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;}
input:checked + .slider{background:var(--accent);}
input:checked + .slider:before{transform:translateX(17px);}

/* ---------- Calculator overlay ---------- */
.calc-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px;}
.calc-pad button{
  padding:16px 0; border-radius:8px; border:1px solid var(--paper-line);
  background:var(--card); font-size:17px; cursor:pointer; color:var(--ink);
}
.calc-pad button.op{background:var(--accent-bg); color:var(--accent);}
.calc-pad button.eq{background:var(--ink); color:var(--paper); grid-row:span 2;}
.calc-display{
  font-family:var(--serif); font-size:28px; text-align:right; padding:14px 6px;
  font-variant-numeric:tabular-nums; border-bottom:1px solid var(--rule); margin-bottom:4px; min-height:40px;
  overflow-x:auto; white-space:nowrap;
}

/* ---------- Lock screen ---------- */
#lockscreen{
  position:fixed; inset:0; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:100;
  padding-top:env(safe-area-inset-top,0px);
}
#lockscreen.hidden{display:none;}
#lockscreen .title{font-family:var(--serif); font-size:19px; margin-bottom:22px;}
.pin-dots{display:flex; gap:14px; margin-bottom:26px;}
.pin-dots span{width:12px;height:12px;border-radius:50%; border:1px solid #7C877F;}
.pin-dots span.filled{background:var(--paper); border-color:var(--paper);}
.pin-pad{display:grid; grid-template-columns:repeat(3,64px); gap:14px;}
.pin-pad button{
  width:64px;height:64px;border-radius:50%; border:1px solid #3E4A44; background:transparent;
  color:var(--paper); font-size:19px; cursor:pointer;
}
.pin-pad button:active{background:#2B3830;}
#lock-error{color:#E9A896; font-size:12.5px; height:16px; margin-top:14px;}

.toast{
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:20px;
  font-size:13px; z-index:80; opacity:0; pointer-events:none; transition:opacity .2s;
  max-width:80%; text-align:center;
}
.toast.show{opacity:1;}

.swatch-grid{display:flex; flex-wrap:wrap; gap:8px;}
.swatch{width:26px;height:26px;border-radius:50%; cursor:pointer; border:2px solid transparent;}
.swatch.active{border-color:var(--ink);}

/* ---------- Spending Insights ---------- */
.insight-item{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--rule);
}
.insight-item:last-child{border-bottom:none;}
.insight-label{font-size:13px; color:var(--ink-soft);}
.insight-value{font-family:var(--serif); font-variant-numeric:tabular-nums;}

/* ---------- Goals ---------- */
.goal-item{
  display:flex; flex-direction:column; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--rule);
}
.goal-item:last-child{border-bottom:none;}
.goal-header{
  display:flex; justify-content:space-between; align-items:center;
}
.goal-header h3{
  font-size:15px; margin:0; color:var(--ink);
}
.goal-header .goal-date{
  font-size:12px; color:var(--muted);
}
.goal-progress{
  display:flex; flex-direction:column; gap:4px;
}
.goal-bar{
  height:8px; background:var(--rule); border-radius:4px; overflow:hidden;
}
.goal-fill{
  height:100%; background:var(--income); border-radius:4px;
}
.goal-text{
  font-size:13px; color:var(--ink); font-variant-numeric:tabular-nums;
}
.goal-remaining{
  font-size:12px; color:var(--ink-soft); text-align:right;
}
.goal-completed{
  font-size:12px; color:var(--ink); font-weight:600; text-align:center;
}

/* Empty states with illustrations */
.empty-goals::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' fill='%238A8574'/%3E%3C/svg%3E");
}

.empty-bills::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v4h4v-4zm0-6h-4v6h4V7z' fill='%238A8574'/%3E%3C/svg%3E");
}

.empty-insights::before{
  background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v-4h4v4zm0-8h-4V7h4v4z' fill='%238A8574'/%3E%3C/svg%3E");
}