:root{
  --bg:#faf9f5; --surface:#ffffff; --surface-alt:#f4f2ec; --track:#eceae2;
  --text:#1a1a18; --text-2:#56554f; --text-3:#8a887f; --border:#e3e1d8;
  --accent:#2a78d6; --accent-ink:#fff; --danger:#d6455a; --good:#2aa775;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#1f1e1c; --surface:#262522; --surface-alt:#2c2b27; --track:#383732;
    --text:#f3f1ea; --text-2:#c0bfb5; --text-3:#8a887f; --border:#3a3933;
    --accent:#3987e5; --shadow:0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.3);}
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; padding:24px 16px;}
body.no-scroll{overflow:hidden;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:860px; margin:0 auto;}
.wrap.wide{max-width:1180px;}

/* Header */
.topbar{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px; flex-wrap:wrap;}
.topbar-title{min-width:0;}
.topbar-actions{display:flex; align-items:center; gap:8px;}
h1{font-size:22px; font-weight:600; margin:0 0 4px;}
h2{font-size:17px; font-weight:600; margin:24px 0 10px;}
.sub{color:var(--text-2); font-size:14px; margin:0;}
.logout-form{margin:0;}

/* Summary cards */
.cards{display:flex; gap:12px; margin-bottom:8px; flex-wrap:wrap;}
.card{background:var(--surface-alt); border-radius:10px; padding:14px 16px; flex:1; min-width:150px;}
.card .label{font-size:13px; color:var(--text-2);}
.card .val{font-size:24px; font-weight:600; margin-top:2px; font-variant-numeric:tabular-nums;}

/* Two-column dashboard: categories block (left) + recent transactions (right) */
.dash{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; margin:16px 0;}
.side-col{min-width:0;}
.side-col h2{margin-top:0;}
.side-col .row-between{margin-bottom:10px;}

/* Chart + category accordion */
.chart-card{background:var(--surface); border:0.5px solid var(--border); border-radius:12px;
  padding:20px; margin:16px 0; box-shadow:var(--shadow); display:flex; gap:24px; align-items:flex-start;}
.dash > .chart-card{margin:0;}
.pie-side{flex:0 0 320px; max-width:320px;}
.chart-canvas-wrap{position:relative; width:100%; aspect-ratio:1/1;}
.cat-side{flex:1; min-width:260px;}
.empty{color:var(--text-3); font-size:14px; padding:20px 0; text-align:center; margin:0;}

/* Daily spending chart (under the pie) */
.daily-card{margin-top:16px;}
.daily-title{font-size:12.5px; color:var(--text-2); margin-bottom:6px;}
.daily-wrap{position:relative; width:100%; height:170px;}

/* Sort switch above the category list */
.sort-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; padding:0 2px;}
.sort-label{font-size:13px; color:var(--text-2);}
.seg{display:inline-flex; border:0.5px solid var(--border); border-radius:8px; overflow:hidden; background:var(--surface);}
.seg-btn{font-family:inherit; font-size:12.5px; padding:6px 12px; border:none; background:transparent; color:var(--text-2); cursor:pointer;}
.seg-btn + .seg-btn{border-left:0.5px solid var(--border);}
.seg-btn.active{background:var(--accent); color:var(--accent-ink);}

.cat-acc{border-bottom:0.5px solid var(--border);}
.cat-acc:last-child{border-bottom:none;}
.cat-head{width:100%; display:flex; align-items:center; gap:10px; background:transparent; border:none;
  color:var(--text); cursor:pointer; padding:10px 4px; font-family:inherit; text-align:left; border-radius:8px;}
.cat-head:hover{background:var(--surface-alt);}
.legend-dot{width:11px; height:11px; border-radius:3px; flex:0 0 auto;}
.chead-icon{font-size:17px; color:var(--text-2); width:20px; text-align:center; flex:0 0 auto;}
.legend-name{flex:1; min-width:0; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.legend-val{font-size:12.5px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto;}
.chev{font-size:16px; color:var(--text-3); transition:transform .15s; flex:0 0 auto;}
.cat-head[aria-expanded="true"] .chev{transform:rotate(180deg);}
.cat-panel{padding:2px 0 10px 30px;}
.cat-tx{width:100%; border-collapse:collapse;}
.cat-tx tr{cursor:pointer;}
.cat-tx td{padding:7px 0; font-size:13px; border-top:0.5px solid var(--border);}
.cat-tx tr:first-child td{border-top:none;}
.cat-tx tr:hover td{color:var(--accent);}
.cat-tx td.date{color:var(--text-2); white-space:nowrap; width:1%; padding-right:12px;}
.cat-tx td.merch{padding-right:12px;}
.cat-tx td.amt{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}

/* Transaction list */
.tx-list{border:0.5px solid var(--border); border-radius:12px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
.tx{display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:0.5px solid var(--border); cursor:pointer;}
.tx:first-child{border-top:none;}
.tx:hover{background:var(--surface-alt);}
.tx .icon{font-size:18px; color:var(--text-2); width:34px; height:34px; border-radius:9px;
  background:var(--surface-alt); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.tx:hover .icon{background:var(--bg);}
.tx-body{flex:1; min-width:0;}
.tx-name{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tx-meta{font-size:12px; color:var(--text-3); display:flex; gap:8px; flex-wrap:wrap;}
.tx-right{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.tx-amt{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tx-edit{color:var(--text-3); font-size:16px;}
.tag{font-size:11px; padding:1px 7px; border-radius:20px; background:var(--surface-alt); color:var(--text-2);}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-family:inherit;
  padding:9px 16px; border-radius:9px; border:0.5px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; white-space:nowrap;}
.btn:hover{background:var(--surface-alt); text-decoration:none;}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent;}
.btn.primary:hover{filter:brightness(1.05);}
.btn.danger{background:var(--danger); color:#fff; border-color:transparent;}
.btn.block{width:100%; justify-content:center;}
.btn.icon-btn{padding:9px 11px; color:var(--text-2);}

/* Add dropdown */
.dropdown{position:relative;}
.menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--surface);
  border:0.5px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  min-width:230px; padding:6px; z-index:30; display:none;}
.menu.open{display:block;}
.menu a{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border-radius:9px; color:var(--text);}
.menu a:hover{background:var(--surface-alt); text-decoration:none;}
.menu a .icon{font-size:19px; color:var(--accent); width:22px; text-align:center; margin-top:1px;}
.menu a .mt{font-size:14px; font-weight:600;}
.menu a .md{font-size:12px; color:var(--text-3);}

/* Forms */
.panel{background:var(--surface); border:0.5px solid var(--border); border-radius:12px;
  padding:20px; box-shadow:var(--shadow); margin-top:8px;}
.formrow{margin-bottom:14px;}
.formrow label{display:block; font-size:13px; color:var(--text-2); margin-bottom:5px; font-weight:500;}
.field, .login-card input{width:100%; font-family:inherit; font-size:15px; color:var(--text); background:var(--bg);
  border:0.5px solid var(--border); border-radius:9px; padding:10px 12px;}
.field:focus, .login-card input:focus{outline:none; border-color:var(--accent);}
textarea.field{resize:vertical;}
.help{font-size:12px; color:var(--text-3); margin-top:4px;}
.errlist{color:var(--danger); font-size:12px; margin:4px 0 0; padding-left:16px;}
.actions{display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap;}
.receipt-preview{max-width:100%; border-radius:10px; border:0.5px solid var(--border); margin:0 0 12px;}
.muted{color:var(--text-3); font-size:13px;}
.row-between{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.pager{display:flex; gap:10px; justify-content:center; margin-top:14px; font-size:14px;}

/* Messages */
.msg{padding:11px 14px; border-radius:10px; margin-bottom:10px; font-size:14px; border:0.5px solid var(--border);}
.msg.success{background:rgba(42,167,117,.12); border-color:rgba(42,167,117,.4);}
.msg.error{background:rgba(214,69,90,.12); border-color:rgba(214,69,90,.4);}
.msg.warning{background:rgba(224,168,0,.14); border-color:rgba(224,168,0,.4);}

/* Modal */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:flex-start;
  justify-content:center; padding:24px 14px; z-index:50; overflow:auto;}
.modal-overlay[hidden]{display:none;}
.modal{position:relative; background:var(--surface); border:0.5px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow); width:min(560px,100%); padding:22px; margin:auto;}
.modal-x{position:absolute; top:8px; right:12px; background:transparent; border:none; color:var(--text-3);
  font-size:26px; line-height:1; cursor:pointer; padding:4px 8px;}
.modal-x:hover{color:var(--text);}
.modal-title{margin:0 0 14px; font-size:18px;}
.modal-actions .btn.danger{margin-left:auto;}

/* Login */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;}
.login-card{width:min(380px,100%); margin-top:0;}
.login-head{text-align:center; margin-bottom:18px;}
.login-head .ti{font-size:34px; color:var(--accent);}
.login-head h1{margin:8px 0 2px; font-size:20px;}

/* Responsive */
@media (max-width:1024px){
  .dash{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .chart-card{flex-direction:column; gap:18px;}
  .pie-side{flex:none; width:100%; max-width:340px; align-self:center;}
  .daily-wrap{height:160px;}
  .cat-side{width:100%; min-width:0;}
}
@media (max-width:560px){
  body{padding:16px 12px;}
  h1{font-size:20px;}
  .card{min-width:calc(50% - 6px);}
  .card .val{font-size:20px;}
  .modal{padding:18px 16px;}
  .modal-actions .btn{flex:1; justify-content:center;}
  .modal-actions .btn.danger{margin-left:0;}
  .sort-row{flex-direction:column; align-items:flex-start; gap:8px;}
}