/* ========================================================================
   Ledger — design tokens lifted directly from the Teal prototype
   (Teal design reference guide/Ledger.dc.html)
   ======================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/pjs-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/pjs-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/pjs-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/pjs-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 800; font-style: normal; font-display: swap;
  src: url('../fonts/pjs-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 400; font-style: normal; font-display: swap;
  src: url('../fonts/sg-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 500; font-style: normal; font-display: swap;
  src: url('../fonts/sg-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 600; font-style: normal; font-display: swap;
  src: url('../fonts/sg-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-weight: 700; font-style: normal; font-display: swap;
  src: url('../fonts/sg-700.woff2') format('woff2');
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --page:#e7eeec; --screen:#f3f7f5; --card:#ffffff; --card2:#f5f9f8;
  --text:#0c1a18; --dim:#5c6c69; --faint:#9aa9a6; --border:#e7edeb; --hair:#eef2f1;
  --accent:#0d9488; --accent2:#0a6f66; --accentSoft:rgba(13,148,136,.10);
  --income:#0f9d77; --expense:#ef5366; --chip:#eef3f1; --track:rgba(12,26,24,.06);
  --tab:rgba(255,255,255,.86); --shadow:0 1px 2px rgba(12,26,24,.05),0 12px 34px rgba(12,26,24,.07);
  --heroInk:#ffffff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
[data-theme="dark"] {
  --page:#070f0e; --screen:#0a1413; --card:#101e1c; --card2:#152825;
  --text:#eaf3f1; --dim:#9bafab; --faint:#62756f; --border:#1f322e;
  --hair:#172a27; --accent:#2dd4bf; --accent2:#5eead4; --accentSoft:rgba(45,212,191,.15);
  --income:#34d399; --expense:#fb7185; --chip:#16302c; --track:rgba(255,255,255,.07);
  --tab:rgba(13,24,22,.86); --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.5);
  --heroInk:#04201d;
}

html { background: var(--page); }
body {
  background: var(--screen);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
.mono { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif; }
button, input, select { font-family: inherit; }
button { -webkit-appearance: none; appearance: none; }
a { color: inherit; text-decoration: none; }

button:focus, a:focus, input:focus, select:focus { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.sheet.no-anim, .sheet-backdrop.no-anim { animation: none; }

.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }

@keyframes sheetUp { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pop { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== App shell ===================== */
#app {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--screen);
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: none;
  padding: calc(14px + var(--safe-top)) 18px 10px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 8;
  background: var(--screen);
}
.topbar .brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--accentSoft); flex: none;
}
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

main#screens {
  flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;
  padding-bottom: calc(110px + var(--safe-bottom));
}
.screen { padding: 6px 18px 24px; max-width: 560px; margin: 0 auto; }
.screen-title { font-size: 23px; font-weight: 800; letter-spacing: -.025em; padding: 8px 4px 16px; }

/* ===================== Cards / generic ===================== */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  padding: 20px; box-shadow: var(--shadow);
}
.section-label {
  font-size: 12px; font-weight: 700; color: var(--faint); letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 6px 10px;
}
.row-between { display: flex; align-items: center; justify-content: space-between; }
.list-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.list-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; border-bottom: 1px solid var(--hair); gap: 10px; }
.list-row:last-child { border-bottom: none; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }

/* segmented control */
.segment { display: flex; background: var(--chip); border-radius: 11px; padding: 3px; }
.segment button {
  flex: 1; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 8px; background: transparent; color: var(--faint);
  transition: background .15s, color .15s;
}
.segment button.active { background: var(--card); color: var(--accent); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* buttons */
.btn { border: none; cursor: pointer; border-radius: 14px; font-weight: 700; font-size: 14.5px; }
.btn-primary {
  color: #fff; background: linear-gradient(150deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 22px -6px var(--accentSoft);
}
.btn-primary:disabled { background: var(--track); box-shadow: none; cursor: default; color: var(--faint); }
.btn-ghost { background: var(--chip); color: var(--text); }
.btn-text { background: none; color: var(--accent); font-weight: 600; font-size: 12.5px; padding: 0; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 14px; background: var(--card); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; position: relative;
}
.icon-btn.sm { width: 34px; height: 34px; border-radius: 50%; background: var(--chip); border: none; }

input[type="text"], input[type="search"], input[type="number"], input[type="date"], select.field {
  border: 1px solid var(--border); background: var(--card); outline: none; border-radius: 14px;
  font-size: 14px; font-weight: 500; color: var(--text); width: 100%; height: 48px; padding: 0 14px;
}
input::placeholder { color: var(--faint); }
label.field-label { font-size: 12px; font-weight: 600; color: var(--dim); padding: 0 2px 8px; display: block; }

/* warning banner */
.banner {
  border-radius: 16px; padding: 13px 16px; display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; font-weight: 600;
}
.banner-warn { background: rgba(239,83,102,.12); color: var(--expense); }
.banner-info { background: var(--accentSoft); color: var(--accent); }

/* ===================== Hero ===================== */
.hero {
  border-radius: 26px; padding: 24px; background: linear-gradient(150deg, var(--accent), var(--accent2));
  box-shadow: 0 18px 40px -12px var(--accentSoft); position: relative; overflow: hidden;
}
.hero::before { content:''; position:absolute; right:-30px; top:-40px; width:160px; height:160px; border-radius:50%; background: rgba(255,255,255,.10); }
.hero::after { content:''; position:absolute; right:36px; bottom:-50px; width:120px; height:120px; border-radius:50%; background: rgba(255,255,255,.07); }
.hero-content { position: relative; }
.hero-label { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); letter-spacing: .02em; }
.hero-amount { font-family: 'Space Grotesk'; font-size: 42px; font-weight: 600; color: #fff; letter-spacing: -.02em; margin-top: 4px; line-height: 1; word-break: break-all; }
.hero-stats { display: flex; gap: 10px; margin-top: 20px; }
.hero-stat { flex: 1; background: rgba(255,255,255,.14); border-radius: 15px; padding: 12px 13px; backdrop-filter: blur(4px); min-width: 0; }
.hero-stat-label { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); font-size: 11.5px; font-weight: 600; }
.hero-stat-val { font-family: 'Space Grotesk'; font-size: 17px; font-weight: 600; color: #fff; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* budget pulse */
.budget-scroll { display: flex; gap: 11px; overflow-x: auto; padding: 2px 4px 4px; }
.budget-chip { flex: none; width: 118px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); cursor: pointer; }
.budget-ring { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; }
.budget-ring-inner { width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: 'Space Grotesk'; }
.budget-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-amounts { font-size: 11px; color: var(--dim); margin-top: 3px; }

/* donut + legend */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { position: relative; width: 120px; height: 120px; flex: none; border-radius: 50%; }
.donut-center { position: absolute; inset: 17px; border-radius: 50%; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.legend { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 160px; }
.legend-row { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend-name { font-size: 12.5px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-pct { font-size: 11.5px; font-weight: 700; color: var(--dim); font-family: 'Space Grotesk'; }

/* transaction rows */
.tx-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--hair); position: relative; background: var(--card); }
.tx-row:last-child { border-bottom: none; }
.tx-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.tx-main { flex: 1; min-width: 0; }
.tx-name { font-size: 14px; font-weight: 600; }
.tx-note { font-size: 11.5px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amt { font-family: 'Space Grotesk'; font-size: 14px; font-weight: 600; flex: none; }
.tx-swipe-wrap { position: relative; overflow: hidden; border-bottom: 1px solid var(--hair); }
.tx-swipe-wrap:last-child { border-bottom: none; }
.tx-actions { position: absolute; top: 0; right: 0; height: 100%; display: flex; }
.tx-actions button { width: 64px; border: none; color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.tx-actions .edit-btn { background: var(--accent); }
.tx-actions .del-btn { background: var(--expense); }
.tx-row.swiped { transform: translateX(-128px); transition: transform .2s ease; }
.tx-row { transition: transform .2s ease; }

.date-group-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; padding: 8px 4px; background: var(--screen); }

.empty-state { text-align: center; padding: 60px 20px; color: var(--faint); }
.empty-state .title { font-size: 15px; font-weight: 600; color: var(--dim); }
.empty-state .sub { font-size: 13px; margin-top: 6px; }

/* category chips */
.cat-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 14px; }
.cat-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 7px; background: none; border: none; cursor: pointer; padding: 2px; width: 64px; }
.cat-chip-icon { width: 54px; height: 54px; border-radius: 17px; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; }
.cat-chip-label { font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; }

/* keypad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { height: 48px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); font-family: 'Space Grotesk'; font-size: 21px; font-weight: 600; color: var(--text); cursor: pointer; }
.keypad button:active { background: var(--chip); }

/* bottom sheet */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(8,16,15,.45); z-index: 50; animation: fadeIn .2s ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; background: var(--screen); border-radius: 28px 28px 0 0; z-index: 51; display: flex; flex-direction: column; animation: sheetUp .3s cubic-bezier(.32,.72,0,1); box-shadow: 0 -10px 40px rgba(0,0,0,.2); }
.sheet-head { flex: none; padding: 16px 20px 6px; }
.sheet-body { flex: 1; overflow-y: auto; padding: 4px 20px 24px; }
.sheet-foot { flex: none; background: var(--screen); padding: 10px 16px calc(14px + var(--safe-bottom)); }
@media (min-width: 700px) {
  .sheet { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 480px; max-height: 86vh; border-radius: 26px; animation: pop .2s ease; }
}

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(108px + var(--safe-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 9px; background: var(--text); color: var(--screen); padding: 11px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: toastIn .3s ease; white-space: nowrap; font-size: 13px; font-weight: 600; }

/* tab bar (mobile) */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(82px + var(--safe-bottom)); background: var(--tab); backdrop-filter: blur(20px); border-top: 1px solid var(--border); display: flex; align-items: flex-start; padding: 10px 0 0; }
.tabbar button { flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 4px 0; color: var(--faint); }
.tabbar button.active { color: var(--accent); }
.tabbar button span { font-size: 10px; font-weight: 600; }
.tabbar .fab-wrap { flex: 1; display: flex; justify-content: center; }
.fab { width: 56px; height: 56px; border-radius: 20px; background: linear-gradient(150deg, var(--accent), var(--accent2)); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px -4px var(--accentSoft), 0 6px 14px rgba(0,0,0,.18); margin-top: -8px; }

/* sidebar (desktop) */
.sidebar { display: none; }
.app-shell { display: flex; flex: 1; min-height: 0; }

@media (min-width: 880px) {
  body { background: var(--page); }
  #app { max-width: 1180px; margin: 0 auto; min-height: 100vh; }
  .topbar { display: none; }
  .tabbar { display: none; }
  .sidebar {
    display: flex; flex-direction: column; width: 232px; flex: none; padding: 28px 16px;
    border-right: 1px solid var(--border); background: var(--screen);
    position: sticky; top: 0; height: 100vh; gap: 4px;
  }
  .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
  .sidebar .brand-name { font-size: 19px; }
  .sidebar nav { display: flex; flex-direction: column; gap: 2px; }
  .sidebar nav button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--dim); text-align: left; }
  .sidebar nav button.active { background: var(--chip); color: var(--accent); }
  .sidebar .sidebar-add { margin-top: 14px; }
  main#screens { padding-bottom: 24px; }
  .screen { max-width: 100%; padding: 28px 32px; }
  .dash-grid { display: grid; grid-template-columns: 280px 1fr 300px; gap: 20px; align-items: start; }
  .dash-col { display: flex; flex-direction: column; gap: 20px; }
  .reports-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .tx-toolbar-grid { max-width: 640px; }
}

/* install banner */
.install-banner { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 18px; }
.install-banner img { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.install-banner .txt { flex: 1; }
.install-banner .txt .t { font-size: 13.5px; font-weight: 700; }
.install-banner .txt .s { font-size: 11.5px; color: var(--faint); margin-top: 1px; }

/* filter sheet, swatches, drag handle */
.swatch { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
.chip-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; background: var(--chip); font-size: 12.5px; font-weight: 600; color: var(--dim); cursor: pointer; border: 1px solid transparent; }
.chip-toggle.active { background: var(--accentSoft); color: var(--accent); border-color: var(--accent); }
.drag-handle { cursor: grab; color: var(--faint); flex: none; touch-action: none; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 14px; background: var(--track); cursor: pointer; flex: none; border: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s ease; }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(18px); }

.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--track); border-top-color: var(--accent); animation: spin .7s linear infinite; }

.heat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.heat-cell { aspect-ratio: 1; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; }

.context-menu { position: fixed; z-index: 70; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 160px; }
.context-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; background: none; border: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); }
.context-menu button:hover { background: var(--chip); }
.context-menu button.danger { color: var(--expense); }