styles.css

:root{
  --bg: #0b1020;
  --panel: #121938;
  --panel-2: #0f1630;
  --text: #e7ecff;
  --muted: #9fb2ff;
  --primary: #6c8cff;
  --primary-600:#5877f5;
  --danger: #ff6b6b;
  --success:#64d38a;
  --warning:#ffd166;
  --border: #223060;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: linear-gradient(180deg, var(--bg), #0b1228 40%, #0b1228 100%);
  color:var(--text);
}
.container{max-width:1100px; margin:0 auto; padding:0 16px}

.app-header{position:sticky; top:0; z-index:10; background:rgba(11,16,32,.8); backdrop-filter: blur(8px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-logo{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--primary); color:white}
.nav{display:flex; gap:6px; flex-wrap:wrap}
.nav-link{background:transparent; color:var(--text); border:1px solid transparent; padding:8px 10px; border-radius:8px; cursor:pointer}
.nav-link.active, .nav-link:hover{background:var(--panel); border-color:var(--border)}
.auth-box{display:flex; align-items:center; gap:10px}
.user-box{display:flex; align-items:center; gap:8px}
.user-box img{width:28px; height:28px; border-radius:50%; border:1px solid var(--border); background:#000}
.hidden{display:none}

main{padding:20px 0 48px}
.section{display:none}
.section.visible{display:block}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-bottom:16px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px}
.card-title{font-size:14px; color:var(--muted)}
.card-value{font-size:26px; margin-top:6px; font-weight:700}
.card-sub{margin-top:6px; font-size:12px; color:var(--muted)}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:12px; margin:16px 0}
.panel-header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border)}
.panel-header h3{margin:0; font-size:16px}
.panel-actions{display:flex; gap:8px; align-items:center}

.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; padding:14px}
.form-row{display:flex; flex-direction:column; gap:8px}
.form-row-actions{align-self:end; display:flex; gap:8px; flex-direction:row}
.segmented{display:grid; grid-template-columns:auto 1fr auto 1fr; gap:6px; align-items:center}
.segmented input[type="radio"]{appearance:none; width:0; height:0; margin:0}
.segmented label{display:inline-block; padding:8px 10px; border-radius:8px; background:var(--panel-2); border:1px solid var(--border); text-align:center; cursor:pointer}
.segmented input:checked + label{background:var(--primary-600); border-color:transparent}

input, select, textarea, button{font:inherit; color:inherit}
input, select, textarea{background:var(--panel-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:8px 10px}
input::placeholder{color:#8fa2ff88}

.btn{background:var(--primary); border:1px solid transparent; color:white; padding:8px 12px; border-radius:8px; cursor:pointer}
.btn:hover{background:var(--primary-600)}
.btn-secondary{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-secondary:hover{background:#0e1840}
.btn-danger{background:var(--danger)}

.table-wrap{overflow:auto}
.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table tbody tr:hover{background:#0f183a}
.table .muted{color:var(--muted); font-size:12px}

.budgets-list{padding:14px; display:flex; flex-direction:column; gap:12px}
.budget-item{padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2)}
.budget-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.progress{height:10px; background:#0d1534; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress > div{height:100%; background:linear-gradient(90deg, #64d38a, #6c8cff); width:0%}

.debts-list, .recurring-list{padding:14px; display:flex; flex-direction:column; gap:12px}
.debt-item, .rec-item{padding:12px; border:1px solid var(--border); border-radius:10px; background:var(--panel-2)}
.debt-actions, .rec-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:#0e1430; color:var(--muted)}

.footer{border-top:1px solid var(--border); padding:14px 0; color:var(--muted); background:#0b1020}

.export-output{width:100%; margin:12px 0; background:#0f1630; border:1px dashed var(--border); color:var(--muted); border-radius:8px; padding:10px}