:root{
  --bg:#F4F9FC;
  --surface:#FFFFFF;
  --surface-alt:#EAF4FB;
  --ink:#102A3D;
  --ink-soft:#4C6577;
  --ink-faint:#90A6B5;
  --border:#DCE9F2;

  --blue:#2E97D4;
  --blue-dark:#1C6FA3;
  --blue-light:#8FD3F4;
  --blue-tint:#E3F4FC;

  --rust:#D9604C;
  --rust-tint:#FBE9E4;
  --gold:#D9A441;
  --gold-tint:#FBF0DC;
  --green:#3FA772;
  --green-tint:#E4F5EC;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm: 0 2px 10px rgba(16,42,61,0.06);
  --shadow: 0 10px 30px rgba(16,42,61,0.10);
  --shadow-lg: 0 20px 50px rgba(16,42,61,0.14);
  --ease: cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Heebo',sans-serif;
  font-size:15px;
  line-height:1.55;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.preload *{ transition:none !important; animation-play-state:paused !important; }

::selection{ background:var(--blue-light); color:var(--ink); }
h1,h2,h3{ font-family:'Heebo',sans-serif; margin:0; font-weight:800; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:'Heebo',sans-serif; cursor:pointer; }
img{ max-width:100%; display:block; }

/* ---------- header ---------- */
header.top{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:40;
  padding:16px 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
header.top .brand{ display:flex; align-items:center; gap:10px; }
header.top .mark{
  width:36px;height:36px;flex:none; border-radius:10px;
  background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
  display:flex;align-items:center;justify-content:center;
  font-weight:800; font-size:16px; color:#fff;
  box-shadow:0 4px 12px rgba(46,151,212,0.35);
}
header.top .brand-text{ font-weight:800; font-size:18px; color:var(--ink); }

.top-nav{ display:flex; align-items:center; gap:6px; }
.nav-link{
  padding:8px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); transition:background .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover{ background:var(--surface-alt); color:var(--ink); }
.nav-link.active{ background:var(--blue-tint); color:var(--blue-dark); }
.nav-user{ display:flex; align-items:center; margin-inline-start:6px; }
.nav-avatar{ width:32px; height:32px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--border); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:999px; padding:11px 22px; font-size:14px; font-weight:700;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), opacity .15s var(--ease);
}
.btn-primary{ background:linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color:#fff; box-shadow:0 6px 16px rgba(46,151,212,0.35); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(46,151,212,0.45); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline{ background:var(--surface); color:var(--ink); border-color:var(--border); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue-dark); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--surface-alt); color:var(--ink); }
.btn-rust{ background:var(--rust); color:#fff; }
.btn-rust:hover{ opacity:.9; transform:translateY(-1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-small{ padding:8px 16px; font-size:12.5px; border-radius:999px; }
.btn:active{ transform:translateY(0) scale(.98); }

/* generic legacy aliases used by the expense tool */
.btn.outline{ background:var(--surface); color:var(--ink); border-color:var(--border); }
.btn.outline:hover{ border-color:var(--blue); color:var(--blue-dark); }
.btn.rust{ background:var(--rust); color:#fff; border-color:var(--rust); }
.btn.rust.outline{ background:transparent; color:var(--rust); }
.btn.small{ padding:8px 14px; font-size:12.5px; }

/* ---------- layout helpers ---------- */
main{ max-width:1180px; margin:0 auto; padding:32px 24px 64px; }

.card{
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  border-radius:var(--radius); padding:24px; margin-bottom:22px;
  transition:box-shadow .2s var(--ease);
}

.site-footer{ text-align:center; padding:28px 20px; font-size:12px; color:var(--ink-faint); }

/* ---------- animations ---------- */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes floatSlow{ 0%,100%{ transform:translateY(0) translateX(0); } 50%{ transform:translateY(-16px) translateX(8px); } }
@keyframes pulseSoft{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.06); opacity:.8; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

.fade-in-up{ animation:fadeInUp .6s var(--ease) both; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
[data-stagger] > *{ opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
[data-stagger].in-view > *{ opacity:1; transform:translateY(0); }
[data-stagger].in-view > *:nth-child(1){ transition-delay:.02s; }
[data-stagger].in-view > *:nth-child(2){ transition-delay:.08s; }
[data-stagger].in-view > *:nth-child(3){ transition-delay:.14s; }
[data-stagger].in-view > *:nth-child(4){ transition-delay:.2s; }
[data-stagger].in-view > *:nth-child(5){ transition-delay:.26s; }
[data-stagger].in-view > *:nth-child(6){ transition-delay:.32s; }

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.4); border-top-color:#fff;
  animation:spin .7s linear infinite; display:inline-block;
}

/* ---------- forms ---------- */
input[type=text], input[type=email], textarea, select{
  font-family:'Heebo',sans-serif; font-size:14px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  padding:10px 13px; background:var(--surface); color:var(--ink);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
input[type=text]:focus, input[type=email]:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}
input[type="checkbox"]{ accent-color:var(--blue); width:16px; height:16px; cursor:pointer; }

/* ---------- modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(16,42,61,0.45); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal-overlay.open{ display:flex; animation:fadeIn .2s var(--ease); }
.modal{ background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-lg); border-radius:var(--radius); padding:24px; width:360px; max-width:100%; max-height:86vh; overflow-y:auto; animation:fadeInUp .25s var(--ease); }
.modal.wide{ width:500px; }
.modal h3{ font-size:17px; margin-bottom:6px; }
.modal .sub{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; font-weight:600; }
.modal input[type=text]{ width:100%; margin-bottom:12px; }
.modal textarea{ width:100%; min-height:64px; margin-bottom:14px; resize:vertical; }
.modal .hint-label{ font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
.modal .cat-list{ max-height:170px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:14px; }
.modal .cat-list .row{ padding:9px 12px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; transition:background .12s; }
.modal .cat-list .row:last-child{ border-bottom:none; }
.modal .cat-list .row:hover{ background:var(--surface-alt); }
.modal .cat-list .empty{ padding:10px; font-size:12.5px; color:var(--ink-faint); }
.modal .new-row{ display:flex; gap:8px; margin-bottom:14px; }
.modal .new-row input{ flex:1; margin-bottom:0; }
.modal .actions{ display:flex; gap:8px; justify-content:flex-start; flex-wrap:wrap; }

.swatch-box{ width:12px; height:12px; border-radius:4px; display:inline-block; flex:none; }

@media (max-width:640px){
  header.top{ padding:14px 18px; }
  main{ padding:22px 16px 48px; }
}