:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--green: #22c55e;--red: #ef4444;--green-bg: rgba(34, 197, 94, .1);--red-bg: rgba(239, 68, 68, .1);--border: rgba(255, 255, 255, .1);--muted: rgba(255, 255, 255, .55)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0a0a0a;color:#fafafa}.app{max-width:560px;margin:0 auto;padding:2rem 1.25rem}header{text-align:center;margin-bottom:2rem}header h1{margin:0 0 .25rem;font-size:1.6rem;font-weight:700;letter-spacing:-.02em}header p{margin:0;color:var(--muted);font-size:.875rem}.summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin-bottom:1.75rem}.summary-card{border:1px solid var(--border);border-radius:.625rem;padding:1rem;text-align:center;background:#ffffff05}.summary-card.sales{border-color:#22c55e40}.summary-card.expenses{border-color:#ef444440}.summary-card.net{border-color:#ffffff26}.summary-card .label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.35rem}.summary-card .amount{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}.summary-card.sales .amount{color:var(--green)}.summary-card.expenses .amount{color:var(--red)}.form{border:1px solid var(--border);border-radius:.625rem;padding:1.25rem;margin-bottom:1.75rem;background:#ffffff05}.form h2{margin:0 0 1rem;font-size:.95rem;font-weight:600}.type-toggle{display:flex;gap:.5rem;margin-bottom:1rem}.type-btn{flex:1;padding:.55rem;border:1px solid var(--border);border-radius:.5rem;background:transparent;color:var(--muted);font-size:.825rem;font-weight:600;cursor:pointer;transition:all .15s}.type-btn.active-sale{background:var(--green-bg);border-color:#22c55e66;color:var(--green)}.type-btn.active-expense{background:var(--red-bg);border-color:#ef444466;color:var(--red)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:.75rem}.form-field{display:flex;flex-direction:column;gap:.3rem}.form-field.full{grid-column:1 / -1}.form-field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.form-field input,.form-field select{padding:.55rem .75rem;border:1px solid var(--border);border-radius:.5rem;background:#ffffff0a;color:#fafafa;font-size:.875rem;font-family:inherit;outline:none;transition:border-color .15s}.form-field input:focus,.form-field select:focus{border-color:#ffffff4d}.form-field input::placeholder{color:#ffffff40}.submit-btn{width:100%;margin-top:.75rem;padding:.65rem;border:none;border-radius:.5rem;font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s;color:#fff}.submit-btn.sale-btn{background:var(--green)}.submit-btn.expense-btn{background:var(--red)}.submit-btn:hover{opacity:.85}.transactions h2{margin:0 0 .75rem;font-size:.95rem;font-weight:600}.empty{text-align:center;padding:2.5rem 1rem;color:var(--muted);font-size:.875rem;border:1px dashed var(--border);border-radius:.625rem}.tx-list{display:flex;flex-direction:column;gap:.5rem}.tx-item{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;border:1px solid var(--border);border-radius:.5rem;background:#ffffff05;transition:background .15s}.tx-item:hover{background:#ffffff0a}.tx-badge{flex-shrink:0;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:.4rem;font-size:.75rem}.tx-badge.sale{background:var(--green-bg);color:var(--green)}.tx-badge.expense{background:var(--red-bg);color:var(--red)}.tx-info{flex:1;min-width:0}.tx-info .tx-category{font-size:.85rem;font-weight:600}.tx-info .tx-note{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-right{text-align:right;flex-shrink:0}.tx-right .tx-amount{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}.tx-right .tx-amount.sale{color:var(--green)}.tx-right .tx-amount.expense{color:var(--red)}.tx-right .tx-date{font-size:.65rem;color:var(--muted)}.tx-delete{flex-shrink:0;background:none;border:none;color:var(--muted);cursor:pointer;padding:.25rem;border-radius:.25rem;font-size:.8rem;line-height:1;opacity:0;transition:opacity .15s,color .15s}.tx-item:hover .tx-delete{opacity:1}.tx-delete:hover{color:var(--red)}
