:root{
  /* Surfaces */
  --bg:#0a0814;--surface:#11101c;--surface-2:#181624;--surface-3:#22202e;
  --line:rgba(255,255,255,0.06);--line-2:rgba(255,255,255,0.12);

  /* Text */
  --t1:rgba(255,255,255,0.96);--t2:rgba(255,255,255,0.72);
  --t3:rgba(255,255,255,0.50);--t4:rgba(255,255,255,0.32);

  /* Brand */
  --accent:#b06bff;--accent-2:#8e3eff;--accent-dim:rgba(176,107,255,0.10);

  /* Semantic */
  --pos:#5ed3a0;--pos-dim:rgba(94,211,160,0.10);
  --neg:#ff7a6b;--neg-dim:rgba(255,122,107,0.10);
  --warn:#f0b840;--warn-dim:rgba(240,184,64,0.10);

  /* Data palette */
  --d1:#b06bff;--d2:#5ed3a0;--d3:#76a9ff;--d4:#ffa657;
  --d5:#ff7a9c;--d6:#7be7d1;--d7:#e89bff;--d8:#f0b840;
  --d9:#a3d56b;--d10:#76d9ff;

  /* Typography */
  --font-d:"Inter Tight",sans-serif;--font-b:"Inter",sans-serif;--font-m:"JetBrains Mono",ui-monospace,monospace;

  /* Radii & transitions */
  --r:10px;--r-lg:14px;--r-xl:20px;--t-fast:140ms;--t:200ms;--ease:cubic-bezier(.22,.61,.36,1);

}
*{box-sizing:border-box;margin:0;padding:0}
::selection{background:rgba(176,107,255,0.3);color:#fff}

.flex{display:flex}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}
.grid{display:grid}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}
.items-center{align-items:center}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.hidden{display:none!important}.w-full{width:100%}.p-3{padding:12px}
.text-left{text-align:left}.text-right{text-align:right}
.text-pos{color:var(--pos)}.text-neg{color:var(--neg)}
body{background:var(--bg);color:var(--t1);font-family:var(--font-b);min-height:100vh;line-height:1.5;font-size:14px;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 600px at 80% -100px,rgba(176,107,255,0.06),transparent 60%),radial-gradient(800px 500px at -10% 30%,rgba(118,169,255,0.04),transparent 50%)}
h1,h2,h3,.section-title,.btn,th,.label-caps{font-family:var(--font-d)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color var(--t) var(--ease)}
.card:hover{border-color:var(--line-2)}

input,select,textarea{background:var(--surface-2);border:1px solid var(--line);color:var(--t1);border-radius:var(--r);padding:9px 12px;width:100%;outline:none;font-size:13px;font-family:var(--font-b);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,107,255,0.12);background:var(--surface-3)}
select option{background:var(--surface);color:var(--t1)}
input[type="color"]{padding:2px 4px;height:36px;cursor:pointer}

/* Searchable category dropdown (edit transaction) */
.cat-trigger{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;cursor:pointer;font-size:13px;min-height:38px;transition:border-color var(--t-fast) var(--ease)}
.cat-trigger:hover{border-color:var(--line-2)}
.cat-trigger-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1)}
.cat-trigger-chev{width:14px;height:14px;color:var(--t3);flex-shrink:0}
.cat-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(0,0,0,0.55);display:flex;flex-direction:column;max-height:340px;overflow:hidden}
.cat-dropdown-search{padding:10px;border-bottom:1px solid var(--line);flex-shrink:0}
.cat-dropdown-search input{width:100%}
.cat-dropdown-list{overflow-y:auto;padding:6px}
.cat-dd-parent{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;cursor:pointer}
.cat-dd-parent:hover{background:var(--surface-2)}
.cat-dd-parent.sel{background:var(--accent-dim)}
.cat-dd-emoji{width:22px;text-align:center;flex-shrink:0;font-size:15px}
.cat-dd-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;color:var(--t1);font-size:13px}
.cat-dd-kids{display:flex;flex-wrap:wrap;gap:5px;padding:2px 10px 9px 41px}
.cat-dd-chip{font-size:12px;color:var(--t2);background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:4px 10px;cursor:pointer;transition:all var(--t-fast)}
.cat-dd-chip:hover{background:var(--surface-3);color:var(--t1)}
.cat-dd-chip.sel{background:var(--accent);color:#fff;border-color:transparent}
.cat-dd-empty{text-align:center;color:var(--t3);font-size:12px;padding:18px 0}
.cat-dd-chev{color:var(--t3);flex:none;margin-left:auto;transition:transform var(--t-fast)}
.cat-dd-chev.open{transform:rotate(90deg)}
.cat-dd-add{display:flex;align-items:center;gap:6px;padding:9px 10px;margin-top:6px;border-radius:8px;border:1px dashed var(--line-2,var(--line));cursor:pointer;color:var(--accent);font-size:12.5px;font-weight:600;justify-content:center;transition:background var(--t-fast)}
.cat-dd-add:hover{background:var(--accent-dim)}

.btn{border-radius:var(--r);padding:8px 14px;cursor:pointer;font-size:13px;font-weight:500;transition:all var(--t-fast) var(--ease);border:1px solid transparent;font-family:var(--font-d)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(176,107,255,0.3)}
.btn-primary:hover{background:var(--accent-2);box-shadow:0 8px 28px rgba(176,107,255,0.4)}
.btn-ghost{background:var(--surface-2);border-color:var(--line);color:var(--t2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--t1)}
.btn-danger{background:var(--neg-dim);border-color:rgba(255,122,107,0.18);color:var(--neg);padding:4px 10px;font-size:12px}
.btn-danger:hover{background:rgba(255,122,107,0.18)}
.btn-purple{background:var(--accent-dim);border-color:rgba(176,107,255,0.28);color:var(--accent)}
.btn-purple:hover{background:rgba(176,107,255,0.2)}
.btn-icon{background:none;border:none;cursor:pointer;padding:4px 6px;color:var(--t3);border-radius:var(--r);transition:all var(--t-fast)}
.btn-icon:hover{background:var(--surface-2);color:var(--t1)}

.progress-bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.toggle-wrap{position:relative;width:38px;height:22px;flex-shrink:0}
.toggle-inp{position:absolute;opacity:0;width:0;height:0}
.toggle-knob{display:block;width:38px;height:22px;border-radius:11px;background:var(--surface-3);border:1px solid var(--line);transition:.2s;cursor:pointer;position:relative}
.toggle-knob::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--t3);transition:.2s}
.toggle-knob[data-on="1"]{background:var(--pos);border-color:var(--pos)}
.toggle-knob[data-on="1"]::after{left:18px;background:#fff}
.progress-fill{height:100%;border-radius:3px;transition:width .6s var(--ease)}

.modal-overlay{position:fixed;inset:0;background:rgba(8,6,18,0.72);backdrop-filter:blur(10px);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:24px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto;box-shadow:0 0 0 1px rgba(176,107,255,0.06),0 30px 80px rgba(0,0,0,0.6)}
.modal h3{font-family:var(--font-d);font-size:19px;font-weight:700;margin-bottom:16px;color:var(--t1);letter-spacing:-.015em}

label,.lbl{font-size:11px;color:var(--t3);display:block;margin-bottom:4px;font-family:var(--font-d);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.form-group{margin-bottom:14px}

.badge-income{background:var(--pos-dim);color:var(--pos);border:1px solid rgba(94,211,160,0.18);border-radius:6px;padding:2px 8px;font-size:11px;font-family:var(--font-m)}
.badge-expense{background:var(--neg-dim);color:var(--neg);border:1px solid rgba(255,122,107,0.18);border-radius:6px;padding:2px 8px;font-size:11px;font-family:var(--font-m)}

/* Period picker */
.period{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.period-nav{display:flex;align-items:center;gap:2px}
.period-nav .arrow{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--t3);transition:all var(--t-fast);background:none;border:none;cursor:pointer}
.period-nav .arrow:hover{background:var(--surface-2);color:var(--t1)}
.period-nav .arrow svg{width:14px;height:14px}
.period-label{font-family:var(--font-d);font-size:18px;font-weight:600;color:var(--t1);min-width:160px;text-align:center;letter-spacing:-.01em}
.preset-row{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
.preset{font-family:var(--font-d);font-size:12.5px;font-weight:500;color:var(--t3);padding:6px 12px;border-radius:7px;transition:all var(--t-fast);background:none;border:none;cursor:pointer}
.preset:hover{color:var(--t2)}
.preset.active{background:var(--surface-3);color:var(--t1);box-shadow:0 0 0 1px var(--line-2)}

/* Hero net worth */
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:32px;margin-bottom:18px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:520px;height:520px;background:radial-gradient(circle,rgba(176,107,255,0.10),transparent 60%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero-label{font-family:var(--font-d);font-size:11.5px;font-weight:600;color:var(--t3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--pos);box-shadow:0 0 8px var(--pos)}
.net-val{font-family:var(--font-d);font-size:64px;font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--t1)}
.net-val .currency{color:var(--t3);font-weight:500;font-size:36px;margin-left:8px;letter-spacing:0}
.net-trend{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.net-trend .pill{display:inline-flex;align-items:center;gap:6px;background:var(--pos-dim);color:var(--pos);font-family:var(--font-d);font-size:13px;font-weight:600;padding:5px 11px;border-radius:8px;border:1px solid rgba(94,211,160,0.18)}
.net-trend .pill svg{width:13px;height:13px}
.net-trend .pill.neg{background:var(--neg-dim);color:var(--neg);border-color:rgba(255,122,107,0.18)}
.net-trend .since{color:var(--t3);font-size:13px;font-family:var(--font-d)}
.hero-spark{height:120px;position:relative}
.hero-spark svg{width:100%;height:100%;display:block;overflow:visible}

/* KPI row */
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;transition:all var(--t) var(--ease);cursor:pointer;position:relative;overflow:hidden}
.kpi:hover{border-color:var(--line-2);transform:translateY(-1px)}
.kpi-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.kpi-head .name{font-family:var(--font-d);font-size:13px;font-weight:500;color:var(--t2);display:flex;align-items:center;gap:8px}
.kpi-head .name .ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center}
.kpi-head .name .ico svg{width:14px;height:14px}
.kpi-head .arr{color:var(--t4);transition:color var(--t-fast)}
.kpi:hover .arr{color:var(--t2)}
.kpi-head .arr svg{width:14px;height:14px}
.kpi-val2{font-family:var(--font-d);font-size:28px;font-weight:700;letter-spacing:-.022em;line-height:1.1}
.kpi-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font-family:var(--font-d);font-size:11.5px;color:var(--t3);font-weight:500}
.kpi-meta .delta{font-family:var(--font-m);font-weight:500}
.kpi-mini{position:absolute;right:18px;bottom:18px;width:80px;height:32px;opacity:.6;pointer-events:none}
.kpi.income .kpi-head .ico{background:var(--pos-dim);color:var(--pos)}
.kpi.income .kpi-val2{color:var(--pos)}
.kpi.expense .kpi-head .ico{background:var(--neg-dim);color:var(--neg)}
.kpi.expense .kpi-val2{color:var(--neg)}
.kpi.save .kpi-head .ico{background:var(--accent-dim);color:var(--accent)}
.kpi.save .kpi-val2{color:var(--accent)}

/* Insight strip */
.insight{background:linear-gradient(135deg,var(--accent-dim),rgba(118,169,255,0.06));border:1px solid rgba(176,107,255,0.15);border-radius:var(--r-lg);padding:18px 22px;display:flex;align-items:center;gap:16px;margin-bottom:18px}
.insight .badge{font-family:var(--font-d);font-size:10.5px;font-weight:700;color:var(--accent);background:rgba(176,107,255,0.15);padding:4px 9px;border-radius:5px;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0}
.insight .txt{font-family:var(--font-d);font-size:14px;color:var(--t1);font-weight:500;flex:1}
.insight .txt b{color:var(--accent);font-weight:600}
.insight .more-link{flex-shrink:0;color:var(--t3);font-family:var(--font-d);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:4px;cursor:pointer;background:none;border:none}
.insight .more-link:hover{color:var(--accent)}

/* Grid rows */
.grid-row{display:grid;gap:18px;margin-bottom:18px}
.grid-3-2{grid-template-columns:3fr 2fr}

/* Card heads */
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.card-title{font-family:var(--font-d);font-size:14.5px;font-weight:600;color:var(--t1);letter-spacing:-.005em;display:flex;align-items:center;gap:10px}
.card-title .badge{font-family:var(--font-d);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);background:var(--surface-3);padding:3px 8px;border-radius:5px}
.card-action{font-family:var(--font-d);font-size:12.5px;font-weight:500;color:var(--t3);transition:color var(--t-fast);display:inline-flex;align-items:center;gap:4px;cursor:pointer;background:none;border:none}
.card-action:hover{color:var(--t1)}
.card-action svg{width:12px;height:12px}

/* Donut legend */
.donut-wrap{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center}
.donut-canvas{position:relative;width:200px;height:200px;flex-shrink:0}
.donut-canvas .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-canvas .center .l{font-family:var(--font-d);font-size:10.5px;font-weight:600;color:var(--t3);letter-spacing:.1em;text-transform:uppercase}
.donut-canvas .center .v{font-family:var(--font-d);font-size:24px;font-weight:700;color:var(--t1);letter-spacing:-.02em;margin-top:4px}
.donut-canvas .center .d{font-family:var(--font-d);font-size:11px;color:var(--t3);margin-top:4px}
.legend{display:flex;flex-direction:column;gap:10px}
.leg-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;cursor:pointer;padding:6px 8px;border-radius:8px;transition:background var(--t-fast)}
.leg-row:hover{background:var(--surface-2)}
.leg-dot{width:10px;height:10px;border-radius:3px}
.leg-name{font-family:var(--font-d);font-size:13px;color:var(--t2);font-weight:500}
.leg-val{font-family:var(--font-m);font-size:12.5px;color:var(--t1);font-weight:500}
.leg-pct{font-family:var(--font-d);font-size:11px;color:var(--t3);font-weight:600;min-width:36px;text-align:right}

/* Account cards */
.acct-list{display:flex;flex-direction:column;gap:8px}
.acct{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 14px 14px 12px;border-radius:11px;border:1px solid transparent;background:var(--surface-2);transition:all var(--t-fast);cursor:pointer;position:relative}
.acct:hover{border-color:var(--line-2);background:var(--surface-3)}
.acct .swatch{width:3px;height:32px;border-radius:2px;align-self:center}
.acct .body{min-width:0}
.acct .top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.acct .name{font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--t1)}
.acct .sub{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-left:36px}
.acct .bal{font-family:var(--font-m);font-size:15px;font-weight:600;color:var(--t1);text-align:right}
.acct .bal .cur{color:var(--t3);font-size:11px;margin-left:3px;font-weight:500}

/* Budget items in overview */
.budget-list{display:flex;flex-direction:column;gap:14px}
.bud{display:flex;flex-direction:column;gap:8px}
.bud-head{display:flex;align-items:baseline;justify-content:space-between}
.bud-name{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--t1)}
.bud-stat{font-family:var(--font-m);font-size:12px;color:var(--t2);font-weight:500}
.bud-stat .lim{color:var(--t3)}
.bar{height:6px;background:var(--surface-3);border-radius:3px;overflow:hidden;position:relative}
.bar .fill{height:100%;border-radius:3px;transition:width .6s var(--ease)}
.bud-foot{display:flex;justify-content:space-between;font-family:var(--font-d);font-size:11px;color:var(--t3);font-weight:500}

/* Budget page — hero */
.bud-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;margin-bottom:18px;
          display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:center;position:relative;overflow:hidden}
.bud-hero::before{content:'';position:absolute;top:-40%;right:-10%;width:600px;height:600px;
                  background:radial-gradient(circle,rgba(176,107,255,0.08),transparent 60%);pointer-events:none}
.bud-hero .left{position:relative;z-index:2}
.bud-hero .lbl{font-family:var(--font-d);font-size:11.5px;font-weight:600;color:var(--t3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.bud-hero .val{font-family:var(--font-d);font-size:44px;font-weight:700;letter-spacing:-.025em;line-height:1.05}
.bud-hero .delta-row{display:flex;align-items:baseline;gap:14px;margin-top:14px}
.bud-hero .delta{font-family:var(--font-d);font-size:14.5px;font-weight:600;color:var(--t1)}
.bud-hero .delta .lim{color:var(--t3);font-weight:500}
.bud-hero .days{font-family:var(--font-d);font-size:12.5px;color:var(--t3);font-weight:500}
.bud-hero .hbar{height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden;margin-top:18px;position:relative}
.bud-hero .hbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),#8e3eff)}
.bud-hero .hbar .tickline{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--t4);border-radius:1px}
.bud-hero .bar-foot{display:flex;justify-content:space-between;font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:8px;font-weight:500}
.salary-row{background:var(--surface-2);border-radius:var(--r);padding:10px 12px !important;transition:background var(--t-fast)}
.salary-row:hover{background:var(--surface-3)}
.salary-row .v{font-size:18px !important}
.salary-sub{font-family:var(--font-d);font-size:11px;color:var(--t3);margin-top:2px;font-weight:500}
.hero-stats{display:flex;flex-direction:column;gap:10px;position:relative;z-index:2}
.hs-row{display:flex;justify-content:space-between;padding:9px 14px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);font-family:var(--font-d);font-size:13px}
.hs-row .l{color:var(--t3)}
.hs-row .v{color:var(--t1);font-weight:600}

/* Budget page — grid & cards */
.bud-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px}
.bud-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:all var(--t-fast);position:relative}
.bud-card:hover{border-color:var(--line-2)}
.bud-card.warn{border-left:3px solid var(--warn)}
.bud-card.over{border-left:3px solid var(--neg)}
.bud-card.ok{border-left:3px solid var(--pos)}
.bc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;gap:12px}
.bc-name{display:flex;align-items:center;gap:10px;min-width:0}
.bc-name .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.bc-name .text{min-width:0}
.bc-name .n{font-family:var(--font-d);font-size:14.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bc-name .sub{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:2px;display:flex;gap:6px;align-items:center}
.bc-name .sub .pill{font-family:var(--font-d);font-size:10px;font-weight:600;color:var(--t3);background:var(--surface-3);padding:2px 7px;border-radius:4px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.bc-actions{display:flex;gap:4px;opacity:.4;transition:opacity var(--t-fast)}
.bud-card:hover .bc-actions{opacity:1}
.bc-actions button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--t3);transition:all var(--t-fast);background:none;border:none;cursor:pointer}
.bc-actions button:hover{background:var(--surface-2);color:var(--t1)}
.bc-actions button.del:hover{color:var(--neg)}
.bc-actions button svg{width:12px;height:12px}
.bc-amounts{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.bc-spent{font-family:var(--font-d);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.bc-spent .cur{color:var(--t3);font-size:14px;font-weight:500;margin-left:2px}
.bc-limit{font-family:var(--font-d);font-size:13px;color:var(--t3);font-weight:500;text-align:right}
.bc-limit b{color:var(--t2);font-weight:600;font-family:var(--font-m)}
.bc-bar{height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden;position:relative;margin-bottom:12px}
.bc-bar i{display:block;height:100%;border-radius:4px;transition:width .6s var(--ease)}
.bc-foot{display:flex;justify-content:space-between;font-family:var(--font-d);font-size:11.5px;color:var(--t3);font-weight:500}
.bc-foot .left{display:flex;gap:8px;align-items:center}
.bc-foot .pct{font-family:var(--font-m);font-weight:700;font-size:12px}
.bc-foot .remain{font-weight:600}
.bc-foot .remain.over{color:var(--neg)}
.bc-foot .remain.warn{color:var(--warn)}
.bc-foot .remain.ok{color:var(--pos)}
.bc-cats{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.bc-cats .l{font-family:var(--font-d);font-size:10.5px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.bc-cats .chips{display:flex;gap:5px;flex-wrap:wrap}
.bc-cats .ch{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--line);padding:3px 8px;border-radius:6px;font-family:var(--font-d);font-size:11.5px;color:var(--t2);font-weight:500;white-space:nowrap}
.bc-cats .ch .cdot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.bc-cats .ch .amt{font-family:var(--font-m);color:var(--t3);font-weight:500;font-size:11px;margin-left:2px}
.bc-status{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0}
.bc-status svg{width:11px;height:11px}
.bc-status.ok{background:var(--pos-dim);color:var(--pos)}
.bc-status.warn{background:var(--warn-dim);color:var(--warn)}
.bc-status.over{background:var(--neg-dim);color:var(--neg)}
.bud-card.cta{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
              background:transparent;border:1.5px dashed var(--line-2);min-height:200px;cursor:pointer;transition:all var(--t-fast)}
.bud-card.cta:hover{border-color:var(--accent);background:var(--accent-dim)}
.bud-card.cta .plus{width:48px;height:48px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--t3);transition:all var(--t-fast)}
.bud-card.cta:hover .plus{background:var(--accent);border-color:var(--accent);color:#fff}
.bud-card.cta .plus svg{width:18px;height:18px}
.bud-card.cta .t{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--t2)}
.bud-card.cta .s{font-family:var(--font-d);font-size:12px;color:var(--t3);text-align:center;max-width:240px}

/* Chart wrap */
.chart-wrap{position:relative;height:240px}

/* Add Tx type cards */
.addtx-type{padding:14px 8px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:11px;
  display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;transition:all var(--t-fast);
  font-family:var(--font-d);font-size:12px;font-weight:500;color:var(--t3);flex:1}
.addtx-type:hover{border-color:var(--line-2);color:var(--t2)}
.addtx-type.active{background:var(--accent-dim);border-color:rgba(176,107,255,0.4);color:var(--accent)}
.addtx-type.active .addtx-type-icon{background:var(--accent) !important;color:#fff !important}
.addtx-type-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;transition:all var(--t-fast)}
.addtx-type-icon svg{width:15px;height:15px}

/* Icon button (topbar) */
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--t2);transition:all var(--t-fast) var(--ease);cursor:pointer}
.icon-btn:hover{background:var(--surface-2);color:var(--t1);border-color:var(--line-2)}
.icon-btn svg{width:16px;height:16px}

/* Transaction rows in overview */
.tx-list{display:flex;flex-direction:column}
.tx{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:padding var(--t-fast)}
.tx:last-child{border-bottom:none}
.tx:hover{padding-left:8px;padding-right:0}
.tx .ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--t2)}
.tx .ico svg{width:16px;height:16px}
.tx .body{min-width:0}
.tx .name{font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .meta{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:2px}
.tx .when{font-family:var(--font-d);font-size:11.5px;color:var(--t3);text-align:right;font-weight:500}
.tx .amt{font-family:var(--font-m);font-size:14px;font-weight:600;text-align:right;min-width:100px}
.tx .amt.pos{color:var(--pos)}
.tx .amt.neg{color:var(--neg)}

.toast{position:fixed;bottom:24px;right:24px;z-index:100;padding:12px 20px;border-radius:var(--r-lg);font-size:13px;font-family:var(--font-d);font-weight:500;animation:fadeUp .3s var(--ease);border:1px solid var(--line)}
.toast.pos{background:var(--pos-dim);color:var(--pos);border-color:rgba(94,211,160,0.18)}
.toast.neg{background:var(--neg-dim);color:var(--neg);border-color:rgba(255,122,107,0.18)}
@keyframes fadeUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Stats strip */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.stat .l{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.stat .v{font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.stat .s{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:4px;font-weight:500}

/* Filter bar (legacy compat) */
.filter-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:14px}
.filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search-input{position:relative;flex:1;min-width:200px}
.search-input svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--t3);pointer-events:none}
.search-input input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 14px 9px 36px;font-size:13px;color:var(--t1);outline:none;transition:all var(--t-fast)}
.search-input input::placeholder{color:var(--t3)}
.search-input input:focus{border-color:var(--accent);background:var(--surface-3);box-shadow:0 0 0 3px rgba(176,107,255,0.12)}
.segment{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:3px}
.segment button{font-family:var(--font-d);font-size:12.5px;font-weight:500;color:var(--t3);padding:6px 12px;border-radius:7px;transition:all var(--t-fast);background:none;border:none;cursor:pointer}
.segment button:hover{color:var(--t2)}
.segment button.active{background:var(--surface-3);color:var(--t1);box-shadow:0 0 0 1px var(--line-2)}
.select-mini{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 30px 8px 12px;font-size:13px;color:var(--t1);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808099' stroke-width='2'><polyline points='6,9 12,15 18,9'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:12px;transition:all var(--t-fast)}
.select-mini:hover{border-color:var(--line-2)}
.select-mini:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,107,255,0.12)}
.date-input{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;color:var(--t1);outline:none;color-scheme:dark;transition:all var(--t-fast);width:auto}
.date-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,107,255,0.12)}
.active-filters{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:12px;border-top:1px dashed var(--line);margin-top:12px}
.active-filters .lbl{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-right:4px}
.text-pos{color:var(--pos)}
.text-neg{color:var(--neg)}

/* Transactions tab: full height, filter fixed left, list scrolls */
#tab-transactions:not(.hidden){display:flex;flex-direction:column;height:calc(100vh - 80px);overflow:hidden}
#tab-transactions .stats-strip{display:none}
#tab-transactions .tx-filter-toggle{flex-shrink:0}

/* Transactions sidebar layout */
.tx-layout{display:grid;grid-template-columns:280px 1fr;gap:16px;flex:1;min-height:0;overflow:hidden}
@media(max-width:900px){.tx-layout{grid-template-columns:1fr}.tx-sidebar{display:none}.tx-sidebar.mobile-open{display:block;position:fixed;inset:0;z-index:60;background:rgba(8,6,18,0.8);backdrop-filter:blur(6px);padding:16px;overflow-y:auto}.tx-sidebar.mobile-open .tx-sidebar-inner{max-width:320px;margin:0 auto}}
.tx-sidebar{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.tx-sidebar::-webkit-scrollbar{width:4px}
.tx-sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.tx-sidebar-inner{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.tx-list-col{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tx-list-col .active-filters{flex-shrink:0}
.tx-list-col .card{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.tx-list-col .card::-webkit-scrollbar{width:5px}
.tx-list-col .card::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}
.tx-sidebar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.tx-sidebar-head h3{font-family:var(--font-d);font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.tx-sidebar-head h3 svg{width:16px;height:16px;color:var(--t3)}
.fx{margin-bottom:16px}
.fx:last-child{margin-bottom:0}
.fx-label{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.fx-label svg{width:13px;height:13px;color:var(--t4)}
.fx select{width:100%}
.fx .date-input{width:100%}

/* Amount range slider */
.range-slider{position:relative;height:32px;margin-top:8px}
.range-track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:var(--surface-3);border-radius:2px}
.range-fill{position:absolute;top:50%;height:4px;transform:translateY(-50%);background:var(--accent);border-radius:2px}
.range-slider input[type="range"]{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;margin:0}
.range-slider input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;pointer-events:auto;position:relative;z-index:2}
.range-slider input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-shadow:0 2px 6px rgba(0,0,0,0.3);cursor:pointer;pointer-events:auto}
.range-values{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--font-m);font-size:11px;color:var(--t3);font-feature-settings:"tnum"}
.range-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;margin-top:8px}
.range-inputs input[type="number"]{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;font-family:var(--font-m);font-size:12px;color:var(--t1);width:100%;outline:none;-moz-appearance:textfield}
.range-inputs input[type="number"]::-webkit-outer-spin-button,
.range-inputs input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.range-inputs input[type="number"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,107,255,0.12)}
.range-inputs .dash{color:var(--t4);font-size:14px;text-align:center}
.range-unit{font-family:var(--font-d);font-size:11px;color:var(--t3);font-weight:500;text-align:right;margin-bottom:-4px}

/* Filter toggle btn (mobile) */
.tx-filter-toggle{display:none;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;font-family:var(--font-d);font-size:13px;font-weight:500;color:var(--t2);cursor:pointer;gap:6px;align-items:center;margin-bottom:12px}
.tx-filter-toggle svg{width:16px;height:16px}
.tx-filter-toggle .badge{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px}
@media(max-width:900px){.tx-filter-toggle{display:inline-flex}}

/* Reset button */
.btn-reset{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px;font-family:var(--font-d);font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;transition:all var(--t-fast);margin-top:8px}
.btn-reset:hover{background:var(--surface-3);color:var(--t2);border-color:var(--line-2)}

/* Multi-select dropdown */
.ms-wrap{position:relative}
.ms-trigger{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:38px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:5px 30px 5px 10px;cursor:pointer;transition:all var(--t-fast);position:relative}
.ms-trigger:hover{border-color:var(--line-2)}
.ms-trigger.open{border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,107,255,0.12);background:var(--surface-3)}
.ms-trigger .ms-placeholder{color:var(--t3);font-size:13px;font-family:var(--font-b)}
.ms-trigger .ms-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;color:var(--t3);transition:transform var(--t-fast);pointer-events:none}
.ms-trigger.open .ms-arrow{transform:translateY(-50%) rotate(180deg)}
.ms-trigger .ms-clear{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--t3);cursor:pointer;border:none;background:none;padding:0;display:none;border-radius:50%;transition:all var(--t-fast)}
.ms-trigger .ms-clear:hover{color:var(--t1);background:var(--surface-3)}
.ms-trigger.has-val .ms-clear{display:block}
.ms-chip{display:inline-flex;align-items:center;gap:3px;background:var(--surface-3);border:1px solid var(--line-2);border-radius:6px;padding:2px 6px 2px 4px;font-family:var(--font-d);font-size:11px;font-weight:500;color:var(--t1);white-space:nowrap;max-width:120px}
.ms-chip .ico{width:16px;height:16px;border-radius:4px;display:grid;place-items:center;font-size:10px;flex-shrink:0}
.ms-chip .x{cursor:pointer;color:var(--t3);font-size:13px;line-height:1;margin-left:2px;border:none;background:none;padding:0}
.ms-chip .x:hover{color:var(--neg)}
.ms-more{font-family:var(--font-d);font-size:11px;color:var(--t3);font-weight:500;padding:2px 4px}
.ms-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:100;display:none;max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.ms-dropdown::-webkit-scrollbar{width:4px}
.ms-dropdown::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.ms-dropdown.open{display:block}
.ms-group-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 4px;font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.04em}
.ms-group-head .ms-sel-all{font-weight:600;color:var(--accent);cursor:pointer;border:none;background:none;padding:0;font-family:var(--font-d);font-size:11px;letter-spacing:0}
.ms-group-head .ms-sel-all:hover{text-decoration:underline}
.ms-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;transition:background var(--t-fast)}
.ms-item:hover{background:var(--surface-2)}
.ms-item .ms-cb{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-2);display:grid;place-items:center;flex-shrink:0;transition:all var(--t-fast);color:transparent}
.ms-item.selected .ms-cb{background:var(--accent);border-color:var(--accent);color:#fff}
.ms-item .ms-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:14px}
.ms-item .ms-name{font-family:var(--font-d);font-size:13px;font-weight:500;color:var(--t1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-item .ms-check{width:18px;height:18px;color:var(--accent);flex-shrink:0;display:none}
.ms-item.selected .ms-check{display:block}
.ms-item.disabled{opacity:0.4;pointer-events:none}
.ms-item.disabled .ms-name::after{content:'';display:inline-block;width:14px;height:14px;margin-left:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808099' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 9.9-1'/%3E%3C/svg%3E") no-repeat center/contain;vertical-align:-2px}

/* Day groups */
.day-group{padding-top:18px}
.day-group:first-child{padding-top:8px}
.day-head{display:flex;align-items:baseline;justify-content:space-between;padding:10px 4px;border-bottom:1px solid var(--line);margin-bottom:4px}
.day-head .when{display:flex;align-items:baseline;gap:10px}
.day-head .date{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--t1)}
.day-head .rel{font-family:var(--font-d);font-size:11.5px;color:var(--t3);font-weight:500}
.day-head .totals{display:flex;gap:18px;font-family:var(--font-d);font-size:12px;font-weight:500;white-space:nowrap}
.day-head .totals .v{font-family:var(--font-m);font-weight:600;font-feature-settings:"tnum"}
.day-head .totals .in{color:var(--pos)}
.day-head .totals .out{color:var(--t1)}

/* Transaction rows */
.tx-row{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:14px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--line);cursor:pointer;transition:all var(--t-fast)}
.tx-row:last-child{border-bottom:none}
.tx-row:hover{background:var(--surface-2);padding-left:10px;padding-right:10px;margin:0 -10px;border-radius:8px;border-bottom-color:transparent}
.tx-row:hover + .tx-row{border-top:1px solid transparent}
.tx-row .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);position:relative}
.tx-row:hover .ico{background:var(--surface-3)}
.tx-row .ico svg,.tx-row .ico span.emoji{width:16px;height:16px;font-size:16px;line-height:1}
.tx-row .ico .src{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--surface-3);border:2px solid var(--surface);display:grid;place-items:center;color:var(--t2)}
.tx-row:hover .ico .src{border-color:var(--surface-2)}
.tx-row .ico .src svg{width:8px;height:8px}
.tx-row .body{min-width:0}
.tx-row .name{font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-row .meta{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:2px;display:flex;gap:8px;align-items:center}
.tx-row .meta .dot{width:3px;height:3px;border-radius:50%;background:var(--t4)}
.tx-row .cat-chip{font-family:var(--font-d);font-size:11.5px;color:var(--t2);padding:3px 8px;border-radius:6px;background:var(--surface-2);font-weight:500;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tx-row .cat-chip .chipdot{width:6px;height:6px;border-radius:50%;display:inline-block}
.tx-row .time{font-family:var(--font-d);font-size:11.5px;color:var(--t3);font-weight:500;font-feature-settings:"tnum";min-width:42px;text-align:right}
.tx-row .amt{font-family:var(--font-m);font-size:14px;font-weight:600;font-feature-settings:"tnum";text-align:right;min-width:100px;white-space:nowrap}
.tx-row .amt .cur{color:var(--t3);font-weight:500;font-size:10.5px;margin-left:2px}
.tx-row .amt.pos{color:var(--pos)}
.tx-row .amt.neg{color:var(--neg)}
.tx-row .actions{display:flex;gap:4px;opacity:0;transition:opacity var(--t-fast)}
.tx-row:hover .actions{opacity:1}
.tx-row .actions button{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--t3);transition:all var(--t-fast);background:none;border:none;cursor:pointer}
.tx-row .actions button:hover{background:var(--surface-3);color:var(--t1)}
.tx-row .actions button.del:hover{color:var(--neg)}
.tx-row .split-badge{font-family:var(--font-d);font-size:10px;color:var(--accent);font-weight:600;letter-spacing:.04em;display:inline-flex;align-items:center;gap:3px;margin-top:2px}
.tx-row .split-badge svg{width:10px;height:10px}
.tx-splits{padding:0 0 0 62px;display:flex;flex-direction:column;gap:2px;margin-top:-4px;margin-bottom:6px}
.tx-split-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 14px;font-family:var(--font-d);font-size:12px;color:var(--t2);background:rgba(176,107,255,0.04);border-radius:8px}
.tx-split-row .s-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.tx-split-row .s-cat{font-weight:600;display:flex;align-items:center;gap:6px}
.tx-split-row .s-desc{color:var(--t3);font-size:11px}
.tx-split-row .s-amt{font-family:var(--font-m);font-weight:600;font-feature-settings:"tnum";font-size:12px;text-align:right}
/* ── Merge / group ── */
.tx-merge-toolbar{display:flex;align-items:center;gap:10px;padding:4px 0 8px;min-height:34px}
.tx-merge-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-d);font-size:12px;font-weight:600;color:var(--t2);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer;transition:all var(--t-fast)}
.tx-merge-toggle:hover{color:var(--t1);background:var(--surface-3)}
.tx-merge-toggle.active{color:var(--accent);border-color:var(--accent);background:rgba(176,107,255,0.08)}
.tx-merge-bar{display:flex;align-items:center;gap:10px;flex:1;font-family:var(--font-d);font-size:12px;color:var(--t2)}
.tx-merge-bar.hidden{display:none}
.grp-chev{display:inline-block;margin-left:6px;color:var(--t3);transition:transform var(--t-fast);cursor:pointer;font-size:11px}
.grp-chev.open{transform:rotate(90deg)}
.tx-sel{position:absolute;left:2px;top:50%;transform:translateY(-50%);width:18px;height:18px;border:2px solid var(--line);border-radius:5px;display:none;place-items:center;color:#fff;background:var(--surface)}
.tx-sel svg{width:11px;height:11px;opacity:0}
#txList.select-mode .tx-row{padding-left:30px;position:relative}
#txList.select-mode .tx-row:hover{padding-left:36px}
#txList.select-mode .tx-sel{display:grid}
#txList.select-mode .tx-row .actions{display:none}
.tx-row.sel .tx-sel{background:var(--accent);border-color:var(--accent)}
.tx-row.sel .tx-sel svg{opacity:1}
.grp-badge{font-family:var(--font-d);font-size:10px;font-weight:700;color:var(--accent);background:rgba(176,107,255,0.1);border-radius:5px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.tx-members{padding:2px 0 8px 60px;display:flex;flex-direction:column;gap:3px}
.tx-members.hidden{display:none}
.tx-mem{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-radius:9px;background:var(--surface-2);cursor:pointer;transition:background var(--t-fast)}
.tx-mem:hover{background:var(--surface-3)}
.tx-mem .m-ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--surface-3);font-size:13px}
.tx-mem .m-name{font-family:var(--font-d);font-size:12.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-mem .m-meta{font-family:var(--font-d);font-size:11px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-mem .m-amt{font-family:var(--font-m);font-size:13px;font-weight:600;font-feature-settings:"tnum";text-align:right;white-space:nowrap}
.tx-mem .m-tag{font-family:var(--font-d);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);background:rgba(176,107,255,0.12);border-radius:4px;padding:1px 5px;margin-left:6px}
.tx-mem-load{font-family:var(--font-d);font-size:11px;color:var(--t3);padding:6px 12px}
.tx-unmerge{align-self:flex-start;margin-top:4px;font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--neg);background:none;border:1px solid var(--line);border-radius:7px;padding:5px 11px;cursor:pointer;transition:all var(--t-fast)}
.tx-unmerge:hover{background:var(--surface-3);border-color:var(--neg)}
.split-item{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.split-item .si-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px}
.split-item .si-name{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--t1)}
.split-item .si-desc{font-family:var(--font-d);font-size:11px;color:var(--t3);margin-top:1px}
.split-item .si-amt{font-family:var(--font-m);font-size:14px;font-weight:600;color:var(--t1);font-feature-settings:"tnum"}
.split-item .si-del{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--t3);background:none;border:none;cursor:pointer;transition:all var(--t-fast)}
.split-item .si-del:hover{background:rgba(255,122,107,0.12);color:var(--neg)}

/* Detail panel slide-in (side drawer) */
.detail-overlay{position:fixed;inset:0;z-index:80;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.detail-overlay.open{opacity:1;pointer-events:auto;background:transparent}
.detail-panel{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;background:var(--surface);
              border-left:1px solid var(--line);z-index:85;transform:translateX(100%);transition:transform .3s var(--ease);
              overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,0.25)}
.detail-panel.open{transform:translateX(0)}
.main{transition:margin-right .3s var(--ease)}
.main.detail-open{margin-right:420px}
.detail-head{padding:24px 28px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.detail-head h3{font-family:var(--font-d);font-size:16px;font-weight:600;letter-spacing:-.01em}
.detail-body{padding:28px}
.detail-amount{margin-bottom:24px}
.detail-amount .l{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.detail-amount .v{font-family:var(--font-d);font-size:40px;font-weight:700;letter-spacing:-.025em;line-height:1}
.detail-amount .v.pos{color:var(--pos)}
.detail-amount .v.neg{color:var(--neg)}
.detail-amount .when{font-family:var(--font-d);font-size:13px;color:var(--t3);margin-top:8px;font-weight:500}
.detail-fields{display:flex;flex-direction:column}
.detail-field{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.detail-field:last-child{border-bottom:none}
.detail-field .k{font-family:var(--font-d);font-size:12px;font-weight:500;color:var(--t3);letter-spacing:.02em}
.detail-field .fv{font-family:var(--font-d);font-size:13.5px;font-weight:500;color:var(--t1);display:flex;align-items:center;gap:8px}
.detail-field .fv .ico{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--surface-2);font-size:12px}
.detail-actions{display:flex;gap:10px;margin-top:24px}
.detail-splits{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.detail-splits .ds-head{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}

tr:hover td{background:var(--surface)}
th{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px}
td{padding:8px 12px;font-size:13px}
table{width:100%;border-collapse:collapse}

.section-title{font-size:11px;font-weight:600;color:var(--t3);margin-bottom:12px;letter-spacing:.08em;text-transform:uppercase}
.kpi-val{font-family:var(--font-m);font-size:1.2rem;font-weight:500}

.heatmap-cell{width:12px;height:12px;border-radius:2px;cursor:default;transition:opacity .15s}
.heatmap-cell:hover{opacity:.6}

/* Heatmap page */
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.hm-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.hm-stat .l{font-family:var(--font-d);font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.hm-stat .v{font-family:var(--font-d);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hm-stat .s{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:4px;font-weight:500}
.hm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:18px}
.hm-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.hm-title{font-family:var(--font-d);font-size:15px;font-weight:600;letter-spacing:-.005em}
.heatmap-wrap{position:relative;padding-left:34px;overflow-x:auto;padding-bottom:8px}
.heatmap-grid{display:grid;gap:3px;width:max-content}
.heatmap-grid .cell{width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,0.03);border:1px solid transparent;transition:transform var(--t-fast),border-color var(--t-fast);cursor:default}
.heatmap-grid .cell:hover{border-color:rgba(255,255,255,0.3);transform:scale(1.3);position:relative;z-index:2}
.heatmap-grid .cell.lvl1{background:#2a1645}
.heatmap-grid .cell.lvl2{background:#4a217a}
.heatmap-grid .cell.lvl3{background:#7a3fce}
.heatmap-grid .cell.lvl4{background:#a16bef}
.heatmap-grid .cell.lvl5{background:#c66bff}
.heatmap-grid .cell.today{box-shadow:0 0 0 2px var(--accent),0 0 8px var(--accent)}
.heatmap-grid .cell.empty{background:transparent;cursor:default}
.heatmap-grid .cell.empty:hover{transform:none;border-color:transparent}
.dow-labels{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:3px;font-family:var(--font-d);font-size:10px;color:var(--t3);font-weight:500;letter-spacing:.04em}
.dow-labels span{height:14px;display:flex;align-items:center}
.month-labels{position:relative;height:18px;margin-left:34px;font-family:var(--font-d);font-size:10.5px;color:var(--t3);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.month-labels span{position:absolute;top:0}
.hm-legend{display:flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--font-d);font-size:11.5px;color:var(--t3);font-weight:500}
.hm-legend .swatches{display:flex;gap:3px}
.hm-legend .sw{width:14px;height:14px;border-radius:3px}

/* Analytics layout: fixed sidebar + scrollable content */
#tab-charts:not(.hidden){display:flex;flex-direction:column;height:calc(100vh - 80px);overflow:hidden}
.an-layout{display:grid;grid-template-columns:260px 1fr;gap:16px;flex:1;min-height:0;overflow:hidden}
@media(max-width:900px){.an-layout{grid-template-columns:1fr}.an-sidebar{display:none}.an-sidebar.mobile-open{display:block;position:fixed;inset:0;z-index:60;background:rgba(8,6,18,0.8);backdrop-filter:blur(6px);padding:16px;overflow-y:auto}.an-sidebar.mobile-open .an-sidebar-inner{max-width:320px;margin:0 auto}}
.an-sidebar{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}
.an-sidebar::-webkit-scrollbar{width:4px}
.an-sidebar::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:2px}
.an-sidebar-inner{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.an-content{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent;padding-right:4px}
.an-content::-webkit-scrollbar{width:5px}
.an-content::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px}

/* Analytics sub-tabs */
.an-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:22px}
.an-tab{font-family:var(--font-d);font-size:13px;font-weight:500;color:var(--t3);padding:8px 16px;border-radius:20px;transition:all var(--t-fast);background:none;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.an-tab svg{width:14px;height:14px}
.an-tab:hover{color:var(--t2);background:var(--surface-2)}
.an-tab.active{background:var(--pos);color:#fff;border-color:var(--pos);box-shadow:0 4px 14px rgba(94,211,160,0.3)}
.an-sub{display:none}.an-sub.active{display:block}

/* Income/expense report table */
.ie-table{width:100%;border-collapse:collapse;font-family:var(--font-d)}
.ie-table th{font-size:11px;font-weight:600;color:var(--t3);letter-spacing:.04em;padding:12px 16px;text-align:right;border-bottom:1px solid var(--line)}
.ie-table th:first-child{text-align:left}
.ie-table .ie-section{font-size:14px;font-weight:700;color:var(--t1);padding:14px 16px;border-bottom:1px solid var(--line)}
.ie-table .ie-section td{padding:14px 16px;font-weight:700}
.ie-table .ie-section td:not(:first-child){text-align:right;font-family:var(--font-m);font-feature-settings:"tnum"}
.ie-table .ie-row td{padding:10px 16px;border-bottom:1px solid var(--line);font-size:13px}
.ie-table .ie-row td:first-child{display:flex;align-items:center;gap:10px;color:var(--t1);font-weight:500}
.ie-table .ie-row td:not(:first-child){text-align:right;font-family:var(--font-m);font-feature-settings:"tnum";font-size:13px;color:var(--t1)}
.ie-table .ie-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.ie-table .ie-sub{font-size:11px;color:var(--t3);font-weight:500}
.ie-zero{color:var(--t4) !important}

/* Balance dynamics accounts list */
.bd-account{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line)}
.bd-account:last-child{border-bottom:none}
.bd-account .bd-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.bd-account .bd-info{flex:1}
.bd-account .bd-name{font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--t1)}
.bd-account .bd-type{font-family:var(--font-d);font-size:11px;color:var(--t3);margin-top:1px}
.bd-account .bd-bal{font-family:var(--font-m);font-size:14px;font-weight:600;text-align:right;font-feature-settings:"tnum"}
.bd-account .bd-note{font-family:var(--font-d);font-size:10.5px;color:var(--t3);text-align:right;margin-top:2px}

/* Cashflow summary bars */
.cf-summary{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.cf-bar-row{display:flex;align-items:center;gap:12px}
.cf-bar-label{font-family:var(--font-d);font-size:12px;font-weight:500;color:var(--t2);width:60px;flex-shrink:0}
.cf-bar-wrap{flex:1;height:20px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.cf-bar-fill{height:100%;border-radius:4px;transition:width .6s var(--ease)}
.cf-bar-val{font-family:var(--font-m);font-size:12px;font-weight:600;font-feature-settings:"tnum";min-width:100px;text-align:right}

.rec-list{display:flex;flex-direction:column;gap:10px}
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;transition:border-color var(--t-fast)}
.rec:hover{border-color:var(--line-2)}
.rec .day{width:46px;height:46px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-d);color:#fff;background:linear-gradient(135deg,#b06bff,#8e3eff)}
.rec .day .n{font-size:16px;font-weight:700;line-height:1}
.rec .day .m{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-top:2px;opacity:.85}
.rec .body .name{font-family:var(--font-d);font-size:13.5px;font-weight:600;color:var(--t1)}
.rec .body .meta{font-family:var(--font-d);font-size:11.5px;color:var(--t3);margin-top:2px}
.rec .amt{font-family:var(--font-m);font-size:14px;font-weight:600;color:var(--t1);font-feature-settings:"tnum";text-align:right;white-space:nowrap}
.insight-row{display:flex;flex-direction:column;gap:12px}
.ins{padding:14px 16px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.ins .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.ins .ic svg{width:14px;height:14px}
.ins .body{flex:1}
.ins .t{font-family:var(--font-d);font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px}
.ins .d{font-family:var(--font-d);font-size:12px;color:var(--t3);line-height:1.5}
.ins.pos .ic{background:var(--pos-dim);color:var(--pos)}
.ins.neg .ic{background:var(--neg-dim);color:var(--neg)}
.ins.warn .ic{background:var(--warn-dim);color:var(--warn)}
.ins.accent .ic{background:var(--accent-dim);color:var(--accent)}

.account-card{border-radius:var(--r-lg);padding:16px;position:relative;overflow:hidden;cursor:default}
.account-card::before{content:'';position:absolute;right:-16px;top:-16px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.04)}

.cat-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r);transition:background var(--t)}
.cat-row:hover{background:var(--surface-2)}
.cat-sub{padding-left:32px;opacity:.8}

/* infinite scroll sentinel */
#txSentinel{height:1px}
#txLoading{text-align:center;padding:16px;color:var(--t3);font-size:13px;display:none}

.period-pill{border-radius:20px;padding:4px 12px;font-size:11px;cursor:pointer;font-family:var(--font-d);font-weight:600;letter-spacing:.04em;border:1px solid var(--line);color:var(--t3);background:transparent;transition:all var(--t)}
.period-pill:hover{border-color:var(--line-2);color:var(--t2)}
.period-pill.active{background:var(--accent-dim);border-color:rgba(176,107,255,0.3);color:var(--accent)}

.chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:3px 10px;font-size:11px;font-family:var(--font-d)}
.chip button{background:none;border:none;cursor:pointer;color:var(--t3);font-size:13px;line-height:1;padding:0 2px}
.chip button:hover{color:var(--neg)}

/* AI Chat */
.ai-msg{display:flex;flex-direction:column;max-width:82%}
.ai-msg-user{align-self:flex-end;align-items:flex-end}
.ai-msg-assistant{align-self:flex-start;align-items:flex-start}
.ai-bubble{padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.ai-msg-user .ai-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.ai-msg-assistant .ai-bubble{background:var(--surface-2);color:var(--t1);border-bottom-left-radius:4px;border:1px solid var(--line)}
.ai-typing-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t3);animation:aiDot 1.2s infinite}
.ai-typing-dot:nth-child(2){animation-delay:.2s}
.ai-typing-dot:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

/* AI Panel (inline side panel) */
.ai-panel{position:fixed;top:0;right:0;bottom:0;width:420px;background:var(--surface);
  border-left:1px solid var(--line);z-index:30;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s var(--ease)}
.ai-panel.open{transform:translateX(0)}
.ai-panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-shrink:0}
.ai-panel-head .ai-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-dim);border:1px solid rgba(176,107,255,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-panel-head .ai-title{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--t1)}
.ai-panel-head .ai-sub{font-size:11px;color:var(--t3)}
.ai-panel-msgs{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.ai-panel-input{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:flex-end;flex-shrink:0}
.ai-fab{position:fixed;bottom:28px;right:28px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#b06bff,#8e3eff);color:#fff;border:none;cursor:pointer;z-index:29;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(176,107,255,0.45),0 0 0 1px rgba(255,255,255,0.08) inset;transition:all var(--t) var(--ease)}
.ai-fab:hover{transform:scale(1.08);box-shadow:0 12px 36px rgba(176,107,255,0.55)}
.ai-fab svg{width:22px;height:22px}
.ai-fab.hidden{display:none}
/* Main content shrinks when AI panel is open */
.main-content{transition:margin-right .28s var(--ease)}
.main-content.ai-pushed{margin-right:420px}

/* AI markdown tables */
.ai-bubble table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px;font-family:var(--font-m)}
.ai-bubble th{text-align:left;padding:6px 10px;background:var(--surface-3);color:var(--t2);font-weight:600;border-bottom:2px solid var(--line-2);white-space:nowrap}
.ai-bubble td{padding:5px 10px;border-bottom:1px solid var(--line);color:var(--t1);white-space:nowrap}
.ai-bubble tr:last-child td{border-bottom:none}
.ai-bubble tr:hover td{background:rgba(176,107,255,0.04)}
.ai-bubble strong{color:var(--accent);font-weight:600}

/* ─────────── APP SHELL: SIDEBAR ─────────── */
.app{display:grid;grid-template-columns:64px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:20px 0 16px;gap:8px;position:sticky;top:0;height:100vh;z-index:20}
.brand{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#b06bff,#6d2ee0);display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:700;font-size:16px;box-shadow:0 8px 24px rgba(176,107,255,0.4),0 0 0 1px rgba(255,255,255,0.08) inset;margin-bottom:16px;letter-spacing:-.04em;text-decoration:none}
.side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-btn{position:relative;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--t3);transition:all var(--t-fast) var(--ease);cursor:pointer;background:none;border:none}
.nav-btn:hover{background:var(--surface-2);color:var(--t1)}
.nav-btn.active{color:#fff;background:var(--accent-dim)}
.nav-btn.active::before{content:'';position:absolute;left:-12px;top:10px;bottom:10px;width:2px;background:var(--accent);border-radius:1px}
.nav-btn svg{width:20px;height:20px}
.nav-btn[data-tooltip]:hover::after{content:attr(data-tooltip);position:absolute;left:54px;top:50%;transform:translateY(-50%);background:var(--surface-3);border:1px solid var(--line-2);padding:6px 10px;border-radius:6px;font-family:var(--font-d);font-size:12px;color:var(--t1);font-weight:500;white-space:nowrap;z-index:50;pointer-events:none}
.side-foot{display:flex;flex-direction:column;gap:6px;align-items:center}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#76a9ff,#b06bff);display:grid;place-items:center;font-family:var(--font-d);font-weight:600;font-size:12px;color:#fff;letter-spacing:.04em}
.main-content{padding:28px 36px 64px;width:100%;overflow-x:hidden}

/* ─────────── TOPBAR ─────────── */
.topbar{display:flex;align-items:center;gap:20px;margin-bottom:28px}
.topbar .where{display:flex;align-items:baseline;gap:14px}
.topbar h1{font-family:var(--font-d);font-size:26px;font-weight:700;letter-spacing:-.02em}
.topbar .crumb{font-family:var(--font-d);font-size:13px;color:var(--t3);font-weight:500}
.topbar .crumb::before{content:'/';margin:0 8px;color:var(--t4)}
.topbar .right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ─────────── RESPONSIVE ─────────── */
@media(max-width:1100px){
  .main-content{padding:24px 20px 64px}
  .grid-3-2{grid-template-columns:1fr}
  .grid-row{grid-template-columns:1fr !important}
  #tab-categories > div{grid-template-columns:1fr !important}
  .donut-wrap{grid-template-columns:160px 1fr}
  .donut-canvas{width:160px;height:160px}
  .donut-canvas .center .v{font-size:20px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .net-val{font-size:48px}
  .kpi-row{grid-template-columns:1fr}
}
@media(max-width:900px){
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .tx-row{grid-template-columns:auto 1fr auto auto}
  .tx-row .cat-chip{display:none}
  .bud-hero{grid-template-columns:1fr}
  .bud-hero .val{font-size:34px}
  .hm-stats{grid-template-columns:repeat(2,1fr)}
  .detail-panel{width:100vw}
  .main.detail-open{margin-right:0}
  .ai-panel{width:100vw}
  .main-content.ai-pushed{margin-right:0}
}
@media(max-width:680px){
  .stats-strip{grid-template-columns:1fr 1fr}
  .donut-wrap{grid-template-columns:1fr}
  .donut-canvas{margin:0 auto}
  .app{grid-template-columns:1fr}
  .side{position:fixed;bottom:0;left:0;right:0;height:auto;flex-direction:row;border-right:none;border-top:1px solid var(--line);padding:8px 16px;z-index:40}
  .brand{display:none}
  .side-nav{flex-direction:row;flex:1;justify-content:space-around}
  .side-foot{display:none}
  .nav-btn.active::before{display:none}
  .nav-btn[data-tooltip]:hover::after{display:none}
  .main-content{padding:20px 16px 96px}
  .topbar h1{font-size:22px}
  .period{flex-wrap:wrap}
  .preset-row{margin-left:0 !important}
  .search-input{min-width:100%}
  .ai-fab{bottom:80px;right:16px;width:48px;height:48px}
  .ai-panel{width:100vw}
  .main-content.ai-pushed{margin-right:0}
}

/* ── Settings tab layout ─────────────────────────────────────── */
.set-layout{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:calc(100vh - 100px)}
.set-sidebar{background:var(--surface);border-right:1px solid var(--line);border-radius:var(--r-lg) 0 0 var(--r-lg);padding:24px 0;overflow-y:auto}
.set-sidebar-section{padding:0 20px;margin-bottom:8px}
.set-sidebar-section .set-section-title{font-family:var(--font-d);font-size:10.5px;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:12px 12px 8px;margin:0}
.set-nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);color:var(--t2);font-family:var(--font-d);font-size:13.5px;font-weight:500;cursor:pointer;transition:all var(--t-fast);border:none;background:none;width:100%;text-align:left;position:relative}
.set-nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.6}
.set-nav-item:hover{background:var(--surface-2);color:var(--t1)}
.set-nav-item.active{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(176,107,255,0.25)}
.set-nav-item.active svg{opacity:1}
.set-nav-item .set-badge{margin-left:auto;font-size:10px;font-weight:600;background:var(--surface-2);color:var(--t3);padding:2px 6px;border-radius:6px;font-family:var(--font-d)}
.set-nav-item.active .set-badge{background:rgba(255,255,255,0.2);color:#fff}
.set-content{padding:32px 36px;overflow-y:auto;background:var(--bg);border-radius:0 var(--r-lg) var(--r-lg) 0}
.set-content-title{font-family:var(--font-d);font-size:22px;font-weight:700;color:var(--t1);margin:0 0 28px}
.set-section{margin-bottom:32px}
.set-section-label{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--t1);margin:0 0 16px}
.set-field{margin-bottom:20px}
.set-field label{display:block;font-family:var(--font-d);font-size:12px;font-weight:600;color:var(--t3);letter-spacing:.03em;margin-bottom:6px}
.set-field input[type="text"],.set-field input[type="password"],.set-field input[type="email"],.set-field select{width:100%;max-width:320px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);color:var(--t1);font-size:13.5px;font-family:var(--font);transition:border-color var(--t-fast)}
.set-field input:focus,.set-field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(176,107,255,0.15)}
.set-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.set-row .set-field{margin-bottom:0}
.set-toggle{display:flex;align-items:center;gap:12px;padding:14px 0}
.set-toggle-track{width:42px;height:24px;border-radius:12px;background:var(--surface-3);cursor:pointer;position:relative;transition:background var(--t-fast);flex-shrink:0}
.set-toggle-track.on{background:var(--pos)}
.set-toggle-track .set-toggle-thumb{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:left var(--t-fast);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.set-toggle-track.on .set-toggle-thumb{left:21px}
.set-toggle-info{font-size:13px;color:var(--t2)}
.set-toggle-info small{display:block;color:var(--t3);font-size:11.5px;margin-top:2px}
.set-divider{height:1px;background:var(--line);margin:24px 0}
.set-danger-zone{background:rgba(255,122,107,0.06);border:1px solid rgba(255,122,107,0.15);border-radius:var(--r-lg);padding:20px}
.set-danger-zone h4{font-family:var(--font-d);font-size:14px;font-weight:600;color:var(--neg);margin:0 0 6px}
.set-danger-zone p{font-size:12.5px;color:var(--t3);margin:0 0 14px}
.btn-danger{background:var(--neg);color:#fff;border:none;padding:8px 20px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--t-fast);font-family:var(--font-d)}
.btn-danger:hover{filter:brightness(1.1);box-shadow:0 4px 14px rgba(255,122,107,0.3)}
.set-profile-row{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.set-avatar{width:56px;height:56px;border-radius:16px;background:var(--accent);display:grid;place-items:center;font-size:22px;font-weight:700;color:#fff;font-family:var(--font-d);flex-shrink:0}
.set-sub-panel{display:none}
.set-sub-panel.active{display:block}
.set-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;color:var(--t3);text-align:center;gap:12px}
.set-placeholder svg{width:48px;height:48px;opacity:.3}
.set-placeholder h4{font-family:var(--font-d);font-size:16px;font-weight:600;color:var(--t2);margin:0}
.set-placeholder p{font-size:13px;margin:0;max-width:320px}
/* ── Integration cards ── */
.intg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin-bottom:12px}
.intg-card.intg-soon{opacity:.5;pointer-events:none}
.intg-head{display:flex;align-items:center;gap:14px}
.intg-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.intg-info{flex:1}
.intg-info h4{margin:0;font-size:15px;font-weight:600;color:var(--t1);font-family:var(--font-d)}
.intg-info p{margin:2px 0 0;font-size:12px;color:var(--t3)}
.intg-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:8px;background:rgba(94,211,160,0.12);color:var(--pos);font-family:var(--font-d)}
.intg-desc{font-size:13px;color:var(--t2);margin:16px 0 14px;line-height:1.5}
.intg-steps{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.intg-step{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2)}
.intg-step-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0;font-family:var(--font-d)}
.intg-token-row{display:flex;gap:10px;align-items:center}
.intg-token-row input{flex:1;max-width:360px;padding:10px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);color:var(--t1);font-size:13px;font-family:var(--font-m)}
.intg-token-row input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(176,107,255,0.15)}
.intg-accounts{display:flex;flex-direction:column;gap:6px;margin:16px 0}
.intg-acc{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border-radius:var(--r);font-size:13px}
.intg-acc .acc-name{flex:1;color:var(--t1);font-weight:500}
.intg-acc .acc-bal{font-family:var(--font-m);font-weight:600;color:var(--t1);font-feature-settings:"tnum"}
.intg-acc .acc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.intg-sync-row{display:flex;gap:8px;margin-top:4px}
.intg-sync-row .btn{display:flex;align-items:center;gap:6px;font-size:13px}
@media(max-width:900px){
  .set-layout{grid-template-columns:1fr}
  .set-sidebar{border-right:none;border-radius:var(--r-lg);border-bottom:1px solid var(--line);padding:16px 0}
  .set-sidebar-section{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px}
  .set-sidebar-section .set-section-title{width:100%;padding:8px 4px 4px}
  .set-nav-item{padding:8px 12px;font-size:12.5px;white-space:nowrap}
  .set-content{padding:24px 16px}
  .intg-token-row{flex-direction:column}
  .intg-token-row input{max-width:100%}
}

/* ── Category Lucide icons (replaces emoji) ───────────────────────────── */
.cat-svg{display:inline-block;vertical-align:-2px}
.lnk-svg{width:11px;height:11px;vertical-align:-1px;display:inline-block}
.emoji svg,.ms-ico svg,.m-ico svg,.ie-ico svg,.cat-dd-emoji svg,.si-icon svg,#dCatIco svg{display:block}
.ie-ico{color:var(--t2)}
.icon-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:6px}
.icon-picker-item{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;cursor:pointer;color:var(--t2);background:var(--surface-2);transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.icon-picker-item:hover{border-color:var(--line-2);color:var(--t1)}
.icon-picker-item.selected{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}
.icon-picker-item svg{width:18px;height:18px}