*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f1016;--surface: rgba(26, 27, 40, .7);--border: rgba(255, 255, 255, .08);--text: #ffffff;--text-muted: #94a3b8;--accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--green: #10b981;--red: #ef4444;--surface-glow: 0 8px 32px 0 rgba(0, 0, 0, .3)}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);background-image:radial-gradient(circle at top right,rgba(99,102,241,.15),transparent 400px),radial-gradient(circle at bottom left,rgba(168,85,247,.15),transparent 400px);color:var(--text);min-height:100vh}.app{max-width:540px;margin:0 auto;padding:32px 20px 80px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}header h1{font-size:32px;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.5px}.export-btn{padding:8px 16px;border:1px solid var(--border);border-radius:12px;background:#ffffff08;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.export-btn:hover{background:#ffffff14;transform:translateY(-1px)}.summary-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:24px}.card{background:var(--surface);border-radius:16px;padding:16px;border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--surface-glow);transition:transform .2s ease}.card:hover{transform:translateY(-2px)}.card-label{display:block;color:var(--text-muted);font-size:13px;font-weight:500;margin-bottom:8px}.card-value{font-size:20px;font-weight:800}.income-card .card-value{color:var(--green);text-shadow:0 0 16px rgba(16,185,129,.4)}.expense-card .card-value{color:var(--red);text-shadow:0 0 16px rgba(239,68,68,.4)}.balance-card.positive .card-value{color:var(--text)}.balance-card.negative .card-value{color:var(--red)}.date-filters{display:flex;gap:6px;margin-bottom:24px;background:#0003;border-radius:12px;padding:6px;border:1px solid var(--border)}.date-filters button{flex:1;padding:10px;border:none;border-radius:8px;background:transparent;color:var(--text-muted);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.date-filters button:hover{color:var(--text)}.date-filters button.active{background:var(--surface);color:var(--text);box-shadow:0 4px 12px #0003}.category-breakdown{background:var(--surface);border-radius:16px;padding:20px;margin-bottom:24px;border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--surface-glow)}.category-breakdown h3{font-size:15px;color:var(--text-muted);margin-bottom:16px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.cat-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;font-size:14px;font-weight:500}.cat-row span:first-child{width:90px;color:var(--text)}.cat-bar-track{flex:1;height:8px;background:#ffffff0d;border-radius:4px;overflow:hidden}.cat-bar{height:100%;background:var(--accent-gradient);border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}.cat-amount{width:60px;text-align:right;font-weight:700;color:var(--text-muted)}.transactions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.transactions-header h3{font-size:20px;font-weight:700}.add-btn{padding:8px 20px;border:none;border-radius:10px;background:var(--accent-gradient);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #6366f166}.add-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #6366f180}.add-form{background:var(--surface);border-radius:16px;padding:20px;margin-bottom:20px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--surface-glow);animation:slideDown .3s ease forwards}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.type-toggle{display:flex;gap:8px}.type-toggle button{flex:1;padding:10px;border:1px solid var(--border);border-radius:10px;background:#0003;color:var(--text-muted);cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.type-toggle button.active.expense{background:#ef444426;color:var(--red);border-color:#ef44444d}.type-toggle button.active.income{background:#10b98126;color:var(--green);border-color:#10b9814d}.add-form input,.add-form select{padding:12px 16px;border:1px solid var(--border);border-radius:10px;background:#0003;color:var(--text);font-size:15px;outline:none;transition:border-color .2s ease}.add-form input:focus,.add-form select:focus{border-color:#6366f1}.save-btn{padding:14px;border:none;border-radius:10px;background:var(--accent-gradient);color:#fff;font-weight:700;font-size:15px;cursor:pointer;margin-top:8px;transition:transform .2s ease}.save-btn:hover{transform:translateY(-2px)}.transaction{display:flex;align-items:center;gap:16px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:8px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .2s ease}.transaction:hover{transform:translate(4px);border-color:#ffffff26;background:#1e1f2ecc}.tx-info{flex:1;min-width:0}.tx-desc{display:block;font-size:16px;font-weight:600;margin-bottom:4px}.tx-meta{font-size:13px;color:var(--text-muted)}.tx-amount{font-weight:800;font-size:18px;white-space:nowrap}.tx-amount.income{color:var(--green)}.tx-amount.expense{color:var(--text)}.tx-delete{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;padding:6px;transition:color .2s ease;display:block;opacity:0}.transaction:hover .tx-delete{opacity:1}.tx-delete:hover{color:var(--red)}
