*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background-color:#f5f6fa;font-family:Arial,sans-serif;overflow-x:hidden}#root{flex-direction:column;display:flex}.app{width:100%;height:100vh;display:flex}.main{background-color:#f5f6fa;flex:1;padding:25px;overflow-y:auto}@media (width<=768px){.app{flex-direction:column}}.sidebar{color:#111827;background-color:#fff;border-right:1px solid #e5e7eb;flex-direction:column;width:240px;height:100vh;padding:20px;display:flex}.sidebar h2{margin-bottom:30px;font-size:20px;font-weight:600}.sidebar ul{flex-direction:column;gap:10px;list-style:none;display:flex}.sidebar li{cursor:pointer;border-radius:10px;padding:12px 14px;font-size:15px;transition:all .2s}.sidebar li:hover{color:#2563eb;background-color:#f3f4f6}.sidebar li.active{color:#fff;background-color:#2563eb;font-weight:500}@media (width<=768px){.sidebar{width:100%;height:auto}.sidebar ul{flex-direction:row;justify-content:space-around}}.header{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.header select{border:1px solid #ccc;border-radius:6px;padding:6px 10px}.dashboard{padding:10px}.cards{gap:20px;margin-top:20px;display:flex}.card{background:linear-gradient(135deg,#fff,#f9fafb);border-radius:16px;flex:1;padding:20px;transition:transform .2s,box-shadow .2s;box-shadow:0 8px 20px #0000000d}.card:hover{transform:translateY(-6px);box-shadow:0 12px 25px #00000014}.card p{color:#6b7280;margin-bottom:8px;font-size:14px}.card h2{font-size:26px}@media (width<=1024px){.cards{flex-wrap:wrap}.card{flex:45%}}@media (width<=768px){.cards{flex-direction:column}}.transactions{margin-top:40px;overflow-x:auto}.transactions table{width:100%;min-width:600px}.controls{gap:10px;margin:15px 0;display:flex}.controls input,.controls select{border:1px solid #ccc;border-radius:6px;padding:8px}table{border-collapse:collapse;background:#fff;border-radius:10px;width:100%;overflow:hidden}th,td{text-align:left;padding:12px}thead{background-color:#f3f4f6}tr:nth-child(2n){background-color:#f9fafb}.income{color:green;font-weight:700}.expense{color:red;font-weight:700}.edit-btn{color:#fff;cursor:pointer;background:#f59e0b;border:none;border-radius:6px;padding:6px 10px;font-size:13px}.edit-btn:hover{background:#d97706}.actions{gap:8px;display:flex}.delete-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:6px;padding:6px 10px;font-size:13px}.delete-btn:hover{background:#dc2626}@media (width<=768px){.controls{flex-direction:column}.controls input,.controls select{width:100%}}.add-form{background:#fff;border-radius:12px;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;padding:20px;display:grid}.add-form h4{grid-column:span 2;margin-bottom:5px}.add-form input,.add-form select{background-color:#fff;border:1px solid #d1d5db;border-radius:8px;outline:none;width:100%;padding:10px;font-size:14px}.add-form input:focus,.add-form select:focus{border-color:#2563eb}.add-form input[type=number]{appearance:textfield}.add-form button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;grid-column:span 2;padding:12px;font-size:15px;font-weight:500;transition:background .2s}.add-form button:hover{background:#1e40af}@media (width<=768px){.add-form{grid-template-columns:1fr}.add-form h4,.add-form button{grid-column:span 1}}.insights{margin-top:40px}.insight-cards{gap:20px;margin-top:15px;display:flex}.insight-card{background:#fff;border-radius:12px;flex:1;padding:20px;box-shadow:0 4px 10px #00000014}.insight-card h4{margin-bottom:10px}@media (width<=1024px){.insight-cards{flex-wrap:wrap}.insight-card{flex:45%}}@media (width<=768px){.insight-cards{flex-direction:column}}
