body{font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(to right,#00c6ff,#0072ff);padding:20px;margin:0;color:#333}h1{text-align:center;color:#fff}h2{color:#444;margin-bottom:10px}.card{background:white;padding:15px;border-radius:10px;margin-bottom:20px;box-shadow:0 4px 12px #0000001a}input,select,button{margin:2px;padding:8px 5px;border-radius:6px;border:1px solid #ccc;font-size:14px;width:100%}button{background-color:#0072ff;color:#fff;border:none;cursor:pointer;transition:.3s}button:hover{background-color:#0057cc}.toggle-btn{background-color:#ff9800;color:#fff;padding:10px;margin-top:10px;border:none;border-radius:6px;font-size:16px;cursor:pointer;width:100%;transition:.3s}.toggle-btn:hover{background-color:#e68900}.profile-section{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.profile-photo{display:flex;flex-direction:column;align-items:center}.profile-photo img{width:80px;height:80px;object-fit:cover;border-radius:50%;border:2px solid #0072ff}.profile-photo .placeholder{width:80px;height:80px;background:#f0f0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px}.form-grid label{display:block;font-size:12px;color:#666;margin-top:8px}.form-grid input,.form-grid select{margin-top:4px}.records-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.month-picker{display:flex;flex-direction:column;min-width:180px}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 6px}.pill{padding:10px 12px;border-radius:8px;background:#f5f7ff;border:1px solid #e6ecff}.pill-income{background:#e6fff3;border-color:#c6f5df}.pill-expense{background:#ffefef;border-color:#ffd4d4}.pill-balance{background:#f0f7ff;border-color:#d7e7ff}.tx-list{list-style:none;padding:0;margin-top:10px}.tx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#fafafa;border:1px solid #eee;border-radius:8px;margin:6px 0}.tx-row.income{border-left:4px solid #2ecc71}.tx-row.expense{border-left:4px solid #e74c3c}.tx-main{display:flex;align-items:center;gap:10px}.tx-emoji{font-size:20px}.tx-text{line-height:1.2}.tx-desc{font-weight:600}.tx-meta{font-size:12px;color:#666}.tx-meta .dot{margin:0 6px;color:#bbb}.tx-amt{font-weight:700;min-width:90px;text-align:right}.delete-btn{background:transparent;border:none;cursor:pointer;font-size:16px;color:#e74c3c;transition:color .3s}.delete-btn:hover{color:#c0392b}ul{list-style:none;padding:0}li{margin:5px 0}.empty{padding:12px;text-align:center;color:#777}.toggle-row{display:flex;gap:10px;margin-top:10px}.toggle-btn.secondary{background-color:#673ab7}.toggle-btn.secondary:hover{background-color:#5630a0}.records-header{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;flex-wrap:wrap}.records-actions{display:flex;gap:8px}.mini-btn{padding:6px 10px;border-radius:6px;border:none;background:#0072ff;color:#fff;cursor:pointer}.mini-btn:hover{opacity:.9}.mini-btn.outline{background:transparent;color:#0072ff;border:1px solid #0072ff}.edit-row{display:grid;grid-template-columns:120px 1fr 1.5fr 1fr 140px auto;gap:8px;width:100%;align-items:center}.row-actions{display:flex;gap:8px}.chart-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px;height:400px}.chart-card{height:300px;padding:5px;border:1px solid #61a931;border-radius:8px;background:#fafafa}.pie-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}@media (max-width: 800px){.chart-wrap{grid-template-columns:1fr}.edit-row{grid-template-columns:110px 1fr 1fr 1fr 130px auto}}.chart-card canvas{width:100%!important;height:100%!important}.chart-card{display:flex;flex-direction:column;--chart-height: 320px;height:var(--chart-height);padding:10px;border:1px solid #eee;border-radius:8px;background:#fafafa;overflow:hidden}.chart-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.chart-canvas{position:relative;flex:1 1 auto;min-height:180px}.chart-canvas canvas{width:100%!important;height:100%!important}.chart-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 900px){.chart-wrap{grid-template-columns:1fr}.chart-card{--chart-height: 360px}}@media (max-width: 560px){.chart-card{--chart-height: 380px}.pie-header h3{font-size:16px}.month-picker label{font-size:12px}.month-picker select{font-size:14px}}@media (max-width: 380px){.chart-card{--chart-height: 400px}}