@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#12161C; --panel:#1B212B; --panel-alt:#212836; --border:#2A313D; --border-strong:#38414F;
  --text:#EDEFF2; --text-2:#8B93A1; --text-muted:#5D6472;
  --accent:#E8A33D; --income:#4FAE7C; --income-bg:#1B2E27; --expense:#E15C4F; --expense-bg:#2E1F1D;
  --fixed:#5A8FC7; --fixed-bg:#1B2530; --variable:#D98A3D; --variable-bg:#2B2318;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none;}
.hidden{display:none !important;}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-card{width:340px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:28px;}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;}
.accent{color:var(--accent);}
.subtitle{color:var(--text-2);font-size:13px;margin:4px 0 20px;}
.login-form{display:flex;flex-direction:column;gap:14px;}
.login-form label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text-2);font-weight:500;}
.login-form input{margin-top:2px;}
.alert-error{background:var(--expense-bg);color:var(--expense);border:1px solid var(--expense);border-radius:7px;padding:9px 12px;font-size:13px;margin-bottom:14px;}
.alert-success{background:var(--income-bg);color:var(--income);border:1px solid var(--income);border-radius:7px;padding:9px 12px;font-size:13px;margin-bottom:14px;}

/* Shell */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:220px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);padding:18px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.sidebar-top{padding:0 8px 18px;}
.tagline{font-size:11px;color:var(--text-muted);margin-top:2px;}
.nav{display:flex;flex-direction:column;gap:3px;flex:1;}
.nav-item{padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text-2);border-left:2px solid transparent;cursor:pointer;}
.nav-item:hover{background:var(--panel-alt);}
.nav-item.active{background:var(--panel-alt);color:var(--text);font-weight:600;border-left:2px solid var(--accent);}
.sidebar-bottom{border-top:1px solid var(--border);padding-top:12px;margin-top:12px;}
.muted-label{font-size:11px;color:var(--text-muted);}
.user-name{font-size:13px;font-weight:600;}
.main{flex:1;padding:24px 32px;max-width:1100px;}

/* Inputs / buttons */
input,select{background:var(--panel-alt);border:1px solid var(--border);border-radius:7px;padding:9px 10px;color:var(--text);font-family:'Inter',sans-serif;font-size:13.5px;outline:none;width:100%;}
input:focus,select:focus{border-color:var(--border-strong);}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:7px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;font-family:'Inter',sans-serif;}
.btn-sm{padding:6px 10px;font-size:12px;}
.btn-primary{background:var(--accent);color:#1D1206;}
.btn-secondary{background:var(--panel-alt);color:var(--text);border:1px solid var(--border-strong);}
.btn-ghost{background:transparent;color:var(--text-2);border:1px solid var(--border);}
.btn-danger{background:var(--expense-bg);color:var(--expense);border:1px solid var(--expense);}

/* Cards / layout */
.card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:16px 18px;}
.card-title{font-size:14px;font-weight:600;margin-bottom:12px;}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title h2{font-family:'Space Grotesk',sans-serif;font-size:18px;margin:0;}
.muted{color:var(--text-2);font-size:13px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2);font-weight:500;}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
.metric-value{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;}
.metric-label{font-size:12.5px;color:var(--text-2);font-weight:500;}

/* Tags */
.tag{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11.5px;font-weight:600;background:var(--panel-alt);color:var(--text-2);}
.tag-income{background:var(--income-bg);color:var(--income);}
.tag-expense{background:var(--expense-bg);color:var(--expense);}
.tag-fixed{background:var(--fixed-bg);color:var(--fixed);}
.tag-variable{background:var(--variable-bg);color:var(--variable);}

/* Lists */
.list-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border);}
.list-row:first-child{border-top:none;}
.list-empty{padding:22px;text-align:center;color:var(--text-muted);font-size:13px;}
.row-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.row-title{font-size:13.5px;font-weight:600;}
.row-sub{font-size:11.5px;color:var(--text-muted);margin-top:2px;}
.row-amount{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:14px;white-space:nowrap;}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;}

/* Table (admin users) */
.table{width:100%;border-collapse:collapse;}
.table th, .table td{text-align:left;padding:11px 16px;font-size:13px;border-top:1px solid var(--border);}
.table th{color:var(--text-2);font-weight:600;border-top:none;background:var(--panel-alt);}
.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.reset-form{display:flex;gap:6px;margin-top:6px;}
.reset-form input{width:140px;}

/* Balance bars */
.balance-row{margin-bottom:16px;}
.balance-head{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13.5px;}
.balance-bar{display:flex;gap:3px;height:8px;}
.balance-bar div{border-radius:4px;}
.balance-foot{display:flex;gap:14px;margin-top:5px;font-size:11px;color:var(--text-muted);}

.loading{color:var(--text-muted);font-size:13px;padding:20px;}

@media (max-width: 720px){
  .app-shell{flex-direction:column;}
  .sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;}
  .sidebar-top{padding:4px 8px;}
  .nav{flex-direction:row;flex-wrap:wrap;}
  .sidebar-bottom{border-top:none;margin-top:0;padding:4px 8px;}
  .main{padding:18px;}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
}