*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4fafe;--surface:#ffffff;--border:#f1f5f9;
  --ink:#181c1e;--ink2:#3f484c;--ink3:#6f797d;
  --blue:#00677e;--blue-d:#004d5f;--blue-bg:#e6f4f8;
  --accent:#00d4ff;--accent-2:#86d1eb;
  --green:#00d4ff;--green-bg:rgba(0,212,255,0.1);--green-light:rgba(0,212,255,0.2);
  --red:#ba1a1a;--red-bg:#ffefee;--red-light:#ffd9d6;
  --orange:#d97706;--orange-bg:#fffbeb;
  --shadow:none;
  --shadow-md:none;
  --r:4px;
  --font:'Space Grotesk',sans-serif;
  --font-num:'JetBrains Mono',ui-monospace,monospace;
  --hover:#f1f4f6;
  --sheet-radius:12px;
}
html{height:100%}
html,body{
  min-height:100%;
  background:
    linear-gradient(rgba(0,103,126,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,103,126,.03) 1px, transparent 1px),
    radial-gradient(1000px 450px at 20% -5%, rgba(0,212,255,.14), transparent 55%),
    linear-gradient(165deg,#f7fafb 0%,#f2f6f8 45%,#edf4f7 100%);
  background-size:32px 32px, 32px 32px, auto, auto;
  font-family:var(--font);color:var(--ink);font-size:14px;
  overflow-x:hidden;
}
body{display:flex;flex-direction:column}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Topbar */
.topbar{background:rgba(255,255,255,0.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);height:54px;display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;z-index:20}
.logo{font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.logo-icon{width:30px;height:30px;background:var(--blue);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.uid-field{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--ink2)}
.uid-field input{width:70px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:7px;font-family:var(--font);font-size:13px;outline:none}
.uid-field input:focus{border-color:var(--blue)}
.btn{height:34px;padding:0 14px;border-radius:4px;border:none;font-family:var(--font);font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:.15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--border)}
.btn-outline:hover{background:var(--bg)}
.btn-sm{height:28px;padding:0 10px;font-size:12px}
.btn-ghost{background:none;border:none;color:var(--ink2);cursor:pointer;padding:4px 6px;border-radius:6px;font-family:var(--font);font-size:12px;transition:.12s}
.btn-ghost:hover{background:var(--bg);color:var(--ink)}
.btn-icon{background:none;border:none;cursor:pointer;color:var(--ink3);padding:4px;border-radius:5px;font-size:14px;line-height:1;display:inline-flex;transition:.12s}
.btn-icon:hover{background:var(--bg);color:var(--red)}

/* Layout */
.layout{display:flex;flex:1;overflow:hidden}

/* Sidebar */
.sidebar{width:250px;flex-shrink:0;background:rgba(255,255,255,.85);backdrop-filter:blur(24px);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.sidebar-brand{padding:14px 14px 8px;border-bottom:1px solid var(--border)}
.sidebar-brand-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.sidebar-brand-subtitle{font-size:11px;color:var(--ink3);margin-top:4px}
.sidebar-nav{display:flex;flex-direction:column;gap:6px;padding:10px 10px 8px}
.side-nav-item{height:36px;padding:0 10px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink2);font-size:13px;font-weight:600;text-align:left;cursor:pointer;transition:.14s}
.side-nav-item:hover{background:var(--blue-bg);color:var(--ink)}
.side-nav-item.active{background:var(--blue-bg);border-color:#cae9f0;color:var(--blue-d)}
.sidebar-hd{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px;padding:14px 14px 6px}
.month-list{flex:1;overflow-y:auto;padding:0 8px 12px}
.month-list::-webkit-scrollbar{width:3px}
.month-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.m-item{height:36px;padding:0 8px;border-radius:8px;display:flex;align-items:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--ink2);transition:transform .12s ease,background .1s ease,color .1s ease;margin-bottom:1px}
.m-item:hover{background:var(--bg);color:var(--ink)}
.m-item.active{background:var(--blue-bg);color:var(--blue)}
.m-item:active{transform:scale(.98)}

/* Main */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.view-tabs{display:flex;gap:2px;padding:12px 16px 0;flex-shrink:0;background:var(--bg)}
.vtab{height:34px;padding:0 14px;border-radius:4px 4px 0 0;font-size:13px;font-weight:600;text-transform:uppercase;cursor:pointer;border:1px solid transparent;border-bottom:none;color:var(--ink2);background:transparent;transition:.1s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.vtab-icon{display:none}
.vtab span{display:inline}
.vtab:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.vtab.active{background:var(--surface);color:var(--ink);border-color:var(--border)}
.content{flex:1;overflow-y:auto;padding:0 18px 26px;background:transparent;border-top:1px solid var(--border)}
.content::-webkit-scrollbar{width:5px}
.content::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── Page header ── */
.ph{display:flex;align-items:center;gap:12px;padding:14px 0 10px}
.ph-title{font-size:26px;font-weight:700;letter-spacing:-.4px}
.ph-sub{font-size:12px;color:var(--ink3);margin-top:2px}

/* ── Cards ── */
.card{background:rgba(255,255,255,.94);border-radius:var(--r);border:1px solid var(--border);}

/* ── SUMMARY PAGE ── */
.summary-page{display:none}.summary-page.active{display:block}

/* Top stats row */
.top-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.stat-card{padding:16px 18px}
.sc-label{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.sc-val{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1.1;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.sc-val.exp{color:var(--red)}.sc-val.inc{color:var(--green)}.sc-val.bal{color:var(--blue)}.sc-val.save{color:var(--orange)}
.sc-sub{font-size:12px;color:var(--ink3);margin-top:4px}
.sc-change{font-size:12px;font-weight:600;margin-top:4px}
.sc-change.neg{color:var(--red)}.sc-change.pos{color:var(--green)}

/* Account balances */
.accounts-card{padding:16px 18px;margin-bottom:12px}
.accounts-card h3{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.acc-row{background:var(--bg);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;position:relative}
.acc-row .acc-name{font-size:12px;font-weight:600;color:var(--ink2)}
.acc-row .acc-balances{display:flex;gap:8px;align-items:center;margin-top:2px}
.acc-row .acc-start{font-size:12px;color:var(--ink3)}
.acc-row .acc-end{font-size:14px;font-weight:600;color:var(--ink);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.acc-row .acc-diff{font-size:11px;font-weight:500}
.acc-row .acc-diff.pos{color:var(--green)}.acc-row .acc-diff.neg{color:var(--red)}
.acc-row .acc-actions{position:absolute;top:6px;right:6px;display:none;gap:2px}
.acc-row:hover .acc-actions{display:flex}
.acc-total{background:var(--blue-bg);border-radius:8px;padding:10px 12px}
.acc-total .acc-name{color:var(--blue);font-weight:700}
.acc-total .acc-end{color:var(--blue)}
.add-acc-btn{background:none;border:1px dashed var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;color:var(--ink3);font-size:12px;font-family:var(--font);transition:.12s;display:flex;align-items:center;gap:6px}
.add-acc-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}

/* Budget section */
.budget-section{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.budget-card{padding:16px 18px}
.budget-card h3{font-size:13px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.budget-summary{display:flex;gap:16px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.bs-item{display:flex;flex-direction:column;gap:2px}
.bs-label{font-size:11px;color:var(--ink3);font-weight:500}
.bs-val{font-size:15px;font-weight:600}

/* Category budget table */
.bcat-table{width:100%;border-collapse:collapse}
.bcat-table th{font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.4px;padding:4px 6px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap}
.bcat-table th:first-child{text-align:left}
.bcat-table td{padding:5px 6px;font-size:12px;text-align:right;border-bottom:1px solid var(--border);vertical-align:middle}
.bcat-table td:first-child{text-align:left}
.bcat-table tbody tr:hover td{background:var(--bg)}
.bcat-table tbody tr:last-child td{border-bottom:none}
.bcat-table tfoot td{font-weight:700;font-size:12px;border-top:2px solid var(--border);border-bottom:none;background:var(--bg)}
.cat-name-cell{display:flex;align-items:center;gap:6px}
.pct-bar{display:inline-block;width:36px;height:5px;background:var(--border);border-radius:3px;overflow:hidden;vertical-align:middle;margin-left:4px}
.pct-fill{height:100%;border-radius:3px;transition:width .3s}
.pct-fill.ok{background:var(--green)}.pct-fill.warn{background:var(--orange)}.pct-fill.over{background:var(--red)}
.pct-text{font-size:11px;font-weight:500}
.pct-text.ok{color:var(--green)}.pct-text.warn{color:var(--orange)}.pct-text.over{color:var(--red)}
.diff-pos{color:var(--green);font-weight:500}.diff-neg{color:var(--red);font-weight:500}
.plan-input{width:90px;height:24px;padding:0 6px;border:1px solid var(--border);border-radius:5px;font-family:var(--font);font-size:12px;text-align:right;outline:none;background:transparent}
.plan-input:focus{border-color:var(--blue);background:#fff}
.edit-plan-btn{background:none;border:none;cursor:pointer;color:var(--ink3);font-size:11px;padding:2px 5px;border-radius:4px;font-family:var(--font);transition:.1s}
.edit-plan-btn:hover{color:var(--blue);background:var(--blue-bg)}

/* Charts row */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.chart-card{padding:16px 18px}
.chart-card h3{font-size:13px;font-weight:600;margin-bottom:14px;color:var(--ink);letter-spacing:.02em;text-transform:uppercase}
/* Donut via conic-gradient */
.donut-wrap{position:relative;width:180px;height:180px;margin:0 auto 12px;overflow:visible}
.donut-svg{width:180px;height:180px;display:block;overflow:visible}
.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.donut-center .dc-val{font-size:16px;font-weight:700;color:var(--red);white-space:nowrap;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.donut-center .dc-label{font-size:11px;color:var(--ink3);margin-top:1px}
.donut-legend{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;margin-top:8px}
.dl-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--ink2)}
.dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-btn{border:none;background:transparent;color:inherit;padding:2px 3px;border-radius:4px;cursor:pointer;font:inherit}
.legend-btn:hover{background:var(--blue-bg);color:var(--blue-d)}
/* Bar chart (CSS) */
.bar-chart{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;align-items:center;gap:10px}
.bar-label{font-size:11px;color:var(--ink2);font-family:var(--font);width:110px;flex-shrink:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:8px;background:var(--border);border-radius:2px;position:relative;overflow:visible}
.bar-fact{height:100%;border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1);position:relative}
.bar-plan-line{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);z-index:2;border-radius:1px}
.bar-amt{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:12px;font-weight:600;width:80px;flex-shrink:0;text-align:right;white-space:nowrap;color:var(--ink)}

/* ── TRANSACTIONS PAGE ── */
.txn-page{display:none}.txn-page.active{display:block}

/* Timeline */
.timeline-wrap::-webkit-scrollbar{height:4px}
.timeline-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.timeline-flex{display:flex;align-items:flex-end;gap:2px;height:70px;min-width:max-content;padding-bottom:10px}
.timeline-day{position:relative;width:24px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer}
.timeline-bar-track{width:14px;flex:1;background:var(--bg);border-radius:3px 3px 0 0;position:relative;margin-bottom:4px;overflow:hidden}
.timeline-bar{position:absolute;bottom:0;left:0;width:100%;background:var(--blue);border-radius:3px 3px 0 0;transition:height 0.3s;opacity:0.4}
.timeline-bar.has-data{opacity:1;min-height:2px;box-sizing:border-box}
.timeline-day:hover .timeline-bar.has-data{background:var(--blue-hover)}
.timeline-label{font-size:10px;color:var(--ink3)}
.timeline-day:hover .timeline-label{color:var(--ink)}

.timeline-tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 10px;font-size:11px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.1);white-space:nowrap;z-index:10;display:none;pointer-events:none;min-width:140px;text-align:left}
.global-timeline-tooltip{position:fixed;z-index:10000;bottom:auto;margin-bottom:0;transform:translate(-50%,-100%);margin-top:-8px;}

.txn-toolbar-top{display:flex;align-items:center;gap:8px;margin-top:14px;margin-bottom:10px;flex-wrap:wrap}
.txn-filters-panel{padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;animation:slideUp .15s ease}
.filters-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters-toggle-btn{position:relative}
.af-badge{position:absolute;top:-5px;right:-5px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.show-on-mobile{display:none}

.search-box{position:relative;flex:1;min-width:180px;max-width:280px}
.search-box input{width:100%;height:34px;padding:0 10px 0 32px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);font-size:13px;outline:none;background:var(--surface)}
.search-box input:focus{border-color:var(--blue)}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none;font-size:13px}
.fsel{height:34px;padding:0 10px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);font-size:13px;outline:none;background:var(--surface);color:var(--ink);cursor:pointer}
.toolbar-right{margin-left:auto}

/* Table */
.table-card{overflow:hidden}
.txn-table{width:100%;border-collapse:collapse}
.txn-table thead th{background:var(--bg);padding:9px 12px;font-size:11px;font-weight:600;color:var(--ink3);text-align:left;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2;user-select:none;white-space:nowrap;cursor:pointer}
.txn-table thead th:hover{color:var(--ink2)}
.txn-table thead th.sorted{color:var(--blue)}
.txn-table thead th.r{text-align:right}
.txn-table tbody tr{border-bottom:1px solid var(--border);transition:background .08s}
.txn-table tbody tr:last-child{border-bottom:none}
.txn-table tbody tr:hover{background:var(--bg)}
.txn-table td{padding:9px 12px;font-size:13px;vertical-align:middle}
.col-date{width:98px;color:var(--ink2);white-space:nowrap}
.col-amt{width:130px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;font-family:var(--font-num)}
.col-desc{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-cat{width:140px}
.col-bank{width:100px;color:var(--ink3);font-size:12px}
.col-type{width:80px}
.col-act{width:54px;text-align:right}
.amt-exp{color:var(--red)}.amt-inc{color:var(--green)}
.type-badge{display:inline-block;padding:2px 7px;border-radius:20px;font-size:11px;font-weight:500}
.type-badge.exp{background:var(--red-light);color:var(--red)}
.type-badge.inc{background:var(--green-light);color:var(--green)}
.cat-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:2px;opacity:0;transition:opacity .1s}
tr:hover .row-actions{opacity:1}
.act-btn{background:none;border:none;cursor:pointer;color:var(--ink3);padding:4px;border-radius:5px;font-size:13px;display:flex;transition:.1s}
.act-btn.edit:hover{color:var(--blue);background:var(--blue-bg)}
.act-btn.del:hover{color:var(--red);background:var(--red-bg)}
.table-empty{padding:48px;text-align:center;color:var(--ink3)}
.tfoot-row td{background:var(--bg)!important;font-weight:700;border-top:2px solid var(--border);font-size:13px}

/* Bulk selection & checkboxes */
.col-check{width:36px;text-align:center;padding:0 4px!important}
.txn-check{width:16px;height:16px;cursor:pointer;accent-color:var(--blue)}
.row-selected{background:var(--blue-bg)!important}.row-selected:hover{background:#dbeafe!important}
.bulk-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--blue-bg);border:1px solid rgba(59,130,246,.3);border-radius:8px;margin-bottom:10px;font-size:13px;animation:slideUp .15s ease}
.bulk-count{font-weight:600;color:var(--blue)}
/* Duplicate groups */
.dup-group{margin-bottom:8px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.dup-group-hd{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--orange-bg);font-size:12px;font-weight:500;flex-wrap:wrap}
.dup-count{color:var(--orange);font-weight:700;font-size:13px}
.dup-row{display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:1px solid var(--border);font-size:12px}
.dup-row.keep{background:var(--green-bg)}.dup-row.remove{background:var(--red-bg);opacity:.75}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .15s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border-radius:14px;width:460px;max-width:95vw;box-shadow:var(--shadow-md);transform:translateY(8px);transition:transform .15s;padding:22px}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.modal-title{font-size:16px;font-weight:700}
.modal-x{background:none;border:none;cursor:pointer;color:var(--ink3);font-size:20px;padding:2px 5px;border-radius:6px;line-height:1}
.modal-x:hover{background:var(--bg);color:var(--ink)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.frow.full{grid-template-columns:1fr}
.fg{display:flex;flex-direction:column;gap:4px}
.fg label{font-size:12px;font-weight:500;color:var(--ink2)}
.fg input,.fg select,.fg textarea{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:8px;font-family:var(--font);font-size:13px;color:var(--ink);background:var(--surface);outline:none;transition:.1s}
.fg textarea{height:66px;padding:8px 10px;resize:vertical}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.type-toggle{display:flex;gap:6px}
.type-btn{flex:1;height:36px;border-radius:8px;border:1px solid var(--border);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;background:var(--surface);transition:.1s}
.type-btn.active.exp{background:var(--red-bg);color:var(--red);border-color:var(--red)}
.type-btn.active.inc{background:var(--green-bg);color:var(--green);border-color:var(--green)}
.modal-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid transparent}
.btn-danger:hover{background:var(--red);color:#fff}

/* Account modal */
.acc-modal{width:400px}

/* ── INVENTORY PAGE ── */
.inv-page{display:none}.inv-page.active{display:block}
.inv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:16px}
.inv-card{padding:14px 16px;position:relative;transition:box-shadow .12s}
.inv-card:hover{box-shadow:var(--shadow-md)}
.inv-card .inv-name{font-size:14px;font-weight:600;margin-bottom:2px}
.inv-card .inv-cat{font-size:11px;color:var(--ink3)}
.inv-card .inv-qty{font-size:20px;font-weight:700;margin:6px 0 2px;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.inv-card .inv-unit{font-size:12px;color:var(--ink2)}
.inv-card .inv-meta{font-size:11px;color:var(--ink3);margin-top:4px}
.inv-card .inv-bar{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.inv-card .inv-fill{height:100%;border-radius:2px;transition:width .3s}
.inv-card .inv-actions{position:absolute;top:8px;right:8px;display:none;gap:2px}
.inv-card:hover .inv-actions{display:flex}
.inv-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;flex-shrink:0}
.inv-status.ok{background:var(--green)}.inv-status.warn{background:var(--orange)}.inv-status.critical{background:var(--red)}
.inv-cat-hd{font-size:12px;font-weight:600;color:var(--ink2);margin:16px 0 8px;display:flex;align-items:center;gap:6px}
.inv-empty{padding:48px;text-align:center;color:var(--ink3)}
.shop-list{margin-top:12px}.shop-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border)}
.shop-item:last-child{border-bottom:none}
.shop-item .shop-name{font-weight:600;font-size:13px;flex:1}.shop-item .shop-qty{font-size:12px;color:var(--ink2)}
.shop-item .shop-rec{font-size:12px;font-weight:500;color:var(--blue)}

/* Sync panel */
.sync-panel{position:fixed;right:16px;bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-md);padding:18px;width:320px;z-index:100;display:none}
.sync-panel.open{display:block}
.sync-panel h3{font-size:14px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.sync-close{background:none;border:none;cursor:pointer;color:var(--ink3);font-size:18px;line-height:1}
.sf{margin-bottom:8px}
.sf label{display:block;font-size:11px;font-weight:500;color:var(--ink2);margin-bottom:3px}
.sf input{width:100%;height:34px;padding:0 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;outline:none}
.sf input:focus{border-color:var(--blue)}
.sync-btns{display:flex;gap:7px;margin-top:10px}
.sync-btns .btn{flex:1;justify-content:center;font-size:12px}
.btn-teal{background:#0d9488;color:#fff}.btn-teal:hover{background:#0f766e}

/* Toasts */
.toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:7px;z-index:999;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:var(--shadow-md);animation:slideUp .18s ease;pointer-events:all}
.toast.ok{background:#064e3b}.toast.err{background:#7f1d1d}
@keyframes slideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-state{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px;color:var(--ink3)}

/* Month jump popup (shared desktop + mobile) */
.month-popup-panel{
  display:none;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:300;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow-md);
  min-width:200px;
  max-width:calc(100vw - 32px);
}
.month-add-btn{
  width:28px;height:28px;min-width:28px;
  background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
  transition:transform .12s ease,background .12s ease;
}
.month-add-btn:hover{background:var(--blue-d)}
.month-add-btn:active{transform:scale(.96)}

/* Desktop: hide mobile-only chrome */
.mobile-month-bar{display:none}
.topbar-logout-mobile{display:none}

.txn-mobile-meta,.txn-mobile-meta-hd{display:none}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes sheetUp{
  from{opacity:0;transform:translateY(100%)}
  to{opacity:1;transform:translateY(0)}
}

.summary-page.active,.txn-page.active,.inv-page.active{
  animation:fadeUp .22s ease both;
}

@media(max-width:800px){
  .sidebar{width:200px}
  .top-stats{grid-template-columns:1fr 1fr}
  .budget-section{grid-template-columns:1fr}
  .col-bank,.col-type{display:none}
}

@media(max-width:767px){
  .topbar{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px;align-items:center;background:rgba(244,250,254,0.85);backdrop-filter:blur(24px);}
  .logo{font-size:14px;letter-spacing:0.15em;text-transform:uppercase;font-family:var(--font);font-weight:700;color:var(--blue-d);}
  .logo-icon{display:none;}
  .topbar-logout-mobile{
    display:inline-flex;align-items:center;gap:6px;
    margin-left:auto;margin-right:4px;
    min-height:44px;padding:0 10px;border-radius:8px;
    color:var(--ink2);text-decoration:none;font-size:13px;font-weight:500;
    border:1px solid transparent;
    transition:background .15s ease,color .15s ease;
  }
  .topbar-logout-mobile:active{background:var(--hover)}
  .topbar-right{width:100%;margin-left:0;justify-content:space-between;flex-wrap:wrap;gap:8px;order:3}
  .uid-field label{display:none}
  .uid-field input{min-height:44px;width:80px;font-size:14px}
  .topbar .btn{min-height:44px;padding:0 16px;font-size:14px}
  .topbar .btn-outline{min-width:44px}

  .layout{flex-direction:row}
  .sidebar{display:none!important}
  .sidebar-nav,.sidebar-brand{display:none}
  .main{min-width:0;flex:1}

  .mobile-month-bar{
    display:flex!important;align-items:stretch;gap:8px;
    flex-shrink:0;
    padding:10px 14px 8px;
    background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(248,250,252,.9) 100%);
    border-bottom:1px solid var(--border);
  }
  .month-select-mobile{
    flex:1;min-height:44px;border-radius:10px;border:1px solid var(--border);
    padding:0 12px;font-family:var(--font);font-size:15px;font-weight:500;
    background:var(--surface);color:var(--ink);outline:none;
    transition:border-color .15s ease,box-shadow .15s ease;
  }
  .month-select-mobile:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
  .month-jump-btn{min-width:48px;min-height:44px;padding:0 12px;font-size:16px;font-weight:600}
  .month-jump-btn:active{transform:scale(.96)}

  .view-tabs{
    position:fixed;bottom:0;left:0;right:0;height:80px;
    background:rgba(244,250,254,0.85);backdrop-filter:blur(32px);
    border-top:1px solid var(--border);display:flex;justify-content:space-around;
    align-items:center;padding:0 16px;padding-bottom:env(safe-area-inset-bottom,0);
    z-index:100;gap:0;overflow:visible;
  }
  .vtab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:transparent;border:none;border-radius:0;color:var(--ink3);height:100%;
    gap:4px;padding:0;transition:transform .1s,color .1s;
  }
  .vtab.active{
    color:var(--accent);transform:scale(0.95);background:transparent;border:none;box-shadow:none;
  }
  .vtab:active{transform:scale(0.9);}
  .vtab-icon{display:block;width:24px;height:24px;}
  .vtab span{font-size:10px;text-transform:uppercase;font-weight:600;letter-spacing:0.05em;}
  .content{padding:0 12px 96px;border-top:none}

  .ph{padding:12px 0 8px}
  .ph-title{font-size:22px}

  .top-stats{grid-template-columns:1fr 1fr;gap:8px}
  .budget-section,.charts-row{grid-template-columns:1fr}
  .accounts-grid{grid-template-columns:1fr;gap:0}
  .acc-row{background:transparent;border-radius:0;border-bottom:1px solid var(--border);padding:12px 0}
  .acc-row.acc-total{border-bottom:none}
  .charts-row .chart-card{min-width:0}
  .donut-wrap{width:160px;height:160px}
  .donut-svg{width:160px;height:160px}
  .bcat-table th:nth-child(2), .bcat-table td:nth-child(2),
  .bcat-table th:nth-child(5), .bcat-table td:nth-child(5) {
    display: none;
  }
  .txn-toolbar-top{margin-top:10px;gap:8px}
  .search-box{max-width:none;width:100%;flex:1 1 100%}
  .txn-filters-panel .fsel{min-height:44px;flex:1 1 calc(50% - 4px);min-width:140px}
  .txn-toolbar-top .btn{min-height:44px;flex:1}
  .dup-btn{flex:1 1 100%}
  .toolbar-right{margin-left:0;width:100%}
  .toolbar-right .btn{width:100%;justify-content:center}
  .show-on-mobile{display:block}
  .mobile-sort-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

  .txn-table{display:block;width:100%;max-width:100%}
  .table-card{max-width:100%;overflow-x:hidden}
  .txn-table thead{display:none}
  .txn-table tbody{display:block;width:100%}
  .txn-table tbody tr{
    display:grid;
    grid-template-columns:40px 1fr auto 52px;
    grid-template-rows:auto auto;
    gap:4px 10px;
    align-items:start;
    padding:12px 0;
    border-bottom:1px solid var(--border);
  }
  .txn-table tbody td.col-check{grid-column:1;grid-row:1/span 2;align-self:center;padding-top:4px!important}
  .txn-table tbody td.col-date{grid-column:2;grid-row:1;font-weight:600;color:var(--ink)}
  .txn-table tbody td.col-type{display:none!important}
  .txn-table tbody td.col-amt{grid-column:3;grid-row:1;align-self:start;text-align:right;font-size:15px;padding-top:0!important}
  .txn-table tbody td.col-desc,.txn-table tbody td.col-cat,.txn-table tbody td.col-bank{display:none!important}
  .txn-table tbody td.txn-mobile-meta{
    grid-column:2/4;grid-row:2;
    display:block!important;padding:0 0 4px!important;
    border:none!important;
  }
  .txn-table tbody td.col-act{grid-column:4;grid-row:1/span 2;align-self:center;padding:4px 0!important}
  .txn-m-type{font-size:11px;margin-bottom:4px;display:inline-block}
  .txn-m-desc{font-size:13px;color:var(--ink);line-height:1.35;word-break:break-word}
  .txn-m-cat{margin-top:4px}
  .txn-table tfoot .row-actions{opacity:1!important}
  .act-btn{min-width:44px;min-height:44px;align-items:center;justify-content:center}

  .txn-table tfoot{display:block;width:100%}
  .txn-table tfoot .tfoot-row{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:8px;padding:12px 0;border-top:2px solid var(--border);
  }
  .txn-table tfoot td{display:none!important}
  .txn-table tfoot td.col-amt{display:block!important;text-align:right;flex:1}
  .txn-table tfoot td:nth-child(2){display:block!important;flex:1}

  .inv-stats{grid-template-columns:1fr 1fr;gap:8px}
  .inv-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .inv-card .inv-actions{display:flex!important}

  .modal-overlay{align-items:flex-end;padding:0}
  .modal{
    width:100%;max-width:100%;border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;
    margin-top:auto;max-height:92vh;overflow-y:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom,0));
    transform:translateY(110%);
    transition:transform .2s ease,opacity .2s ease;
  }
  .modal-overlay.open .modal{
    animation:sheetUp .24s cubic-bezier(.2,.85,.2,1) both;
  }
  .modal .frow{grid-template-columns:1fr}
  .sync-panel{left:12px;right:12px;width:auto;bottom:12px;max-width:none}

  .sidebar-logout-wrap{display:none}
}

@media(max-width:430px){
  .top-stats{grid-template-columns:1fr}
  .inv-stats{grid-template-columns:1fr}
  .inv-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .summary-page.active,.txn-page.active,.inv-page.active,
  .month-add-btn,.vtab,.month-jump-btn,.m-item{
    animation:none!important;
    transition:none!important;
  }
  .month-add-btn:active,.vtab:active,.month-jump-btn:active,.m-item:active{transform:none!important}
  .modal-overlay.open .modal{
    animation:none!important;
    transform:translateY(0)!important;
    transition:none!important;
  }
}

/* Author column */
.col-author { width:100px; color:var(--c-txt-muted); font-size:13px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tx-author { color:var(--c-txt-muted); font-size:12px; margin-top:2px; }

.inv-table .row-actions { opacity: 1 !important; }

/* Inventory table mobile fix */
.mobile-only { display: none !important; }
@media(max-width:767px){
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }

  .inv-table thead { display: none !important; }
  .inv-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "name name"
      "details details"
      "qty actions" !important;
    gap: 8px !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .inv-table tbody tr > td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  .inv-table .col-name { grid-area: name !important; font-weight: bold; font-size: 1.1em; }
  .inv-table .col-mobile-details { grid-area: details !important; }
  .inv-table .col-qty {
    grid-area: qty !important;
    text-align: left !important;
    align-self: center;
    font-size: 1.1em;
  }
  .inv-table .col-actions { grid-area: actions !important; align-self: center; }

  .inv-table .row-actions {
    display: flex !important;
    opacity: 1 !important;
    justify-content: flex-end;
  }
}
.inv-table .row-actions { opacity: 1 !important; }