/* SmartBudget AI — fintech-inspired UI */
:root{
  --sba-bg:#f6f7fb; --sba-card:#fff; --sba-text:#0f172a; --sba-muted:#64748b;
  --sba-primary:#6366f1; --sba-primary-2:#8b5cf6; --sba-success:#10b981;
  --sba-danger:#ef4444; --sba-warn:#f59e0b; --sba-border:#e5e7eb;
  --sba-radius:14px; --sba-shadow:0 6px 24px -12px rgba(15,23,42,.18);
}
.sba-dark{
  --sba-bg:#0b1020; --sba-card:#121933; --sba-text:#e5e7eb; --sba-muted:#94a3b8;
  --sba-border:#1f2944; --sba-shadow:0 6px 24px -12px rgba(0,0,0,.6);
}
.sba-app{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;color:var(--sba-text);background:var(--sba-bg);padding:16px;border-radius:var(--sba-radius);}
.sba-grid{display:grid;gap:16px;}
.sba-grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.sba-grid-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:16px;}
.sba-grid-span-2{grid-column:span 2;}
.sba-card{background:var(--sba-card);border:1px solid var(--sba-border);border-radius:var(--sba-radius);padding:18px;box-shadow:var(--sba-shadow);margin-bottom:16px;transition:transform .15s ease;}
.sba-card:hover{transform:translateY(-1px);}
.sba-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:8px;flex-wrap:wrap;}
.sba-stat{display:flex;flex-direction:column;gap:6px;}
.sba-stat__label{color:var(--sba-muted);font-size:13px;}
.sba-stat__value{font-size:26px;font-weight:700;letter-spacing:-.02em;}
.sba-stat[data-stat="income"]   .sba-stat__value{color:var(--sba-success);}
.sba-stat[data-stat="expense"]  .sba-stat__value{color:var(--sba-danger);}
.sba-stat[data-stat="savings"]  .sba-stat__value{color:var(--sba-primary);}
.sba-btn{cursor:pointer;border:1px solid var(--sba-border);background:var(--sba-card);color:var(--sba-text);padding:8px 14px;border-radius:10px;font-weight:500;transition:all .15s;}
.sba-btn:hover{border-color:var(--sba-primary);}
.sba-btn--primary{background:linear-gradient(135deg,var(--sba-primary),var(--sba-primary-2));color:#fff;border:none;box-shadow:0 6px 16px -6px rgba(99,102,241,.55);}
.sba-btn--danger{color:var(--sba-danger);}
.sba-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.sba-input,.sba-app input,.sba-app select,.sba-app textarea{background:var(--sba-card);color:var(--sba-text);border:1px solid var(--sba-border);border-radius:10px;padding:10px 12px;font-size:14px;width:100%;}
.sba-app label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--sba-muted);margin-bottom:8px;}
.sba-table{width:100%;border-collapse:collapse;}
.sba-table th,.sba-table td{padding:10px 8px;border-bottom:1px solid var(--sba-border);font-size:14px;text-align:left;}
.sba-table th{color:var(--sba-muted);font-weight:500;}
.sba-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:500;}
.sba-pill--income{background:rgba(16,185,129,.12);color:var(--sba-success);}
.sba-pill--expense{background:rgba(239,68,68,.12);color:var(--sba-danger);}
.sba-progress{height:8px;background:var(--sba-border);border-radius:999px;overflow:hidden;margin-top:6px;}
.sba-progress__bar{height:100%;background:linear-gradient(90deg,var(--sba-primary),var(--sba-primary-2));transition:width .4s;}
.sba-progress__bar.over{background:linear-gradient(90deg,var(--sba-warn),var(--sba-danger));}
.sba-budget-row{padding:10px 0;border-bottom:1px solid var(--sba-border);}
.sba-budget-row:last-child{border:none;}
.sba-budget-row__head{display:flex;justify-content:space-between;font-weight:500;}
.sba-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:99999;padding:16px;animation:sbaFade .15s ease;}
.sba-modal[hidden]{display:none;}
.sba-modal__inner{background:var(--sba-card);color:var(--sba-text);padding:22px;border-radius:var(--sba-radius);max-width:520px;width:100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.sba-modal__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.sba-toast{position:fixed;bottom:20px;right:20px;background:var(--sba-card);color:var(--sba-text);border:1px solid var(--sba-border);padding:12px 16px;border-radius:10px;box-shadow:var(--sba-shadow);z-index:100000;animation:sbaSlide .25s ease;}
.sba-toast--ok{border-left:3px solid var(--sba-success);}
.sba-toast--err{border-left:3px solid var(--sba-danger);}
@keyframes sbaFade{from{opacity:0}to{opacity:1}}
@keyframes sbaSlide{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:640px){.sba-grid-span-2{grid-column:auto;}.sba-modal__inner{padding:16px;}}