:root{color-scheme:light;font-family:Assistant,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#f4f7fb;color:#1f2933;direction:ltr}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}#app{max-width:1080px;margin:24px auto 48px;padding:0 16px}h1{margin:0 0 12px;font-size:24px;font-weight:700}.subtitle{margin:0 0 24px;color:#4d5b6c;font-weight:400}.header-top{display:flex;justify-content:space-between;align-items:flex-start}.header-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;margin-bottom:24px}.header-actions button,.google-login-btn,.add-expense-btn,.add-income-btn{border:none;background:#0ea5e9;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;transition:transform .12s ease,box-shadow .12s ease}.google-login-btn{align-self:flex-start}.header-actions button:hover:not(:disabled),.google-login-btn:hover,.add-expense-btn:hover,.add-income-btn:hover{transform:translateY(-1px);box-shadow:0 6px 12px #0ea5e940}.header-actions button:disabled{background:#94a3b8;cursor:not-allowed}.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-bottom:20px}.summary-card{background:#fff;border:1px solid #e5eaf0;border-radius:12px;padding:16px;box-shadow:0 6px 16px #1f293312}.summary-card h3{margin:0 0 6px;font-size:15px;color:#334155}.summary-value{display:flex;align-items:baseline;gap:6px;font-size:26px;font-weight:700;color:#0f766e}.summary-note{margin-top:6px;font-size:13px;color:#6b7280}.table-card{background:#fff;border:1px solid #e5eaf0;border-radius:12px;box-shadow:0 6px 16px #1f293312;margin-bottom:18px;overflow:hidden}.table-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #e5eaf0;background:linear-gradient(90deg,#f7fafc,#eef2f7)}.table-header h2{margin:0;font-size:18px}.pill{padding:4px 10px;border-radius:999px;background:#0ea5e9;color:#fff;font-size:12px}table{width:100%;border-collapse:collapse}thead th{background:#f5f7fb;color:#4b5563;font-weight:700;text-align:left;padding:12px 10px;border-bottom:1px solid #e5eaf0;font-size:14px}tbody td{padding:10px;border-bottom:1px solid #eef1f5;font-size:14px}tbody tr:hover{background:#f8fafc}.amount{text-align:left;font-variant-numeric:tabular-nums}.negative{color:#b91c1c}.positive{color:#0f766e}.neutral{color:#374151}.muted{color:#6b7280}.footer-row{background:#f5f7fb;font-weight:700}.category-row td{background:#e7eef9;color:#1f2933;font-weight:700;padding:10px 12px}.toggle-btn{all:unset;display:inline-flex;align-items:center;gap:8px;cursor:pointer}.toggle-btn .chevron{font-size:14px}.note{margin:12px;color:#6b7280;font-size:13px}.badge{display:inline-block;padding:4px 8px;border-radius:8px;background:#fef3c7;color:#92400e;font-weight:600;font-size:12px}.recurring-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:11px;font-weight:700}.cta-row{display:flex;gap:10px;align-items:center;padding:10px 16px 16px}.cta-row button{border:none;background:#0ea5e9;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600;transition:transform .12s ease,box-shadow .12s ease}.cta-row button:hover{transform:translateY(-1px);box-shadow:0 6px 12px #0ea5e940}.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0006;align-items:flex-start;justify-content:center;padding-top:100px}.modal-content{background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%;max-width:500px;border-radius:12px;box-shadow:0 4px 8px #0003;position:relative}.close-button{color:#aaa;float:right;font-size:28px;font-weight:700;position:absolute;top:10px;right:20px}.close-button:hover,.close-button:focus{color:#000;text-decoration:none;cursor:pointer}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:600;color:#334155}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid #e5eaf0;border-radius:8px;font-size:16px;box-sizing:border-box}.form-group select{position:relative;margin-bottom:20px;background-position:right 10px center;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-size:16px;padding-right:40px}.modal-content{min-height:400px}.modal-content--small{min-height:0;max-width:340px}.modal-content--small .form-group--actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.confirm-message{white-space:pre-line;margin:0 0 20px;color:#374151;line-height:1.5}.confirm-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.confirm-ok-btn{padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;border:none;background:#0ea5e9;color:#fff;transition:background .2s,transform .1s}.confirm-ok-btn:hover{background:#0284c7}.confirm-ok-btn--danger{background:#dc2626}.confirm-ok-btn--danger:hover{background:#b91c1c}.confirm-cancel-btn,.modal-cancel-btn{background:#e5e7eb;color:#374151;border:none;outline:none;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;transition:background .2s;-webkit-appearance:none;-moz-appearance:none;appearance:none}.confirm-cancel-btn:hover,.modal-cancel-btn:hover{background:#d1d5db}.custom-dropdown{position:relative;width:100%}.custom-dropdown-toggle{width:100%;padding:10px 40px 10px 10px;border:1px solid #e5eaf0;border-radius:8px;font-size:16px;background:#fff;text-align:left;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;box-sizing:border-box}.custom-dropdown-menu{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5eaf0;border-radius:8px;box-shadow:0 4px 6px #0000001a;z-index:1000;max-height:200px;overflow-y:auto;margin-top:2px}.custom-dropdown-item{padding:10px;cursor:pointer;border-bottom:1px solid #f0f0f0}.custom-dropdown-item:hover,.custom-dropdown-item.selected{background-color:#e3f2fd;color:#1976d2}.custom-dropdown-item:last-child{border-bottom:none}.form-group textarea{resize:vertical;min-height:80px}.modal-content button[type=submit]{background:#0ea5e9;color:#fff;padding:10px 15px;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;transition:transform .12s ease,box-shadow .12s ease}.modal-content button[type=submit]:hover{transform:translateY(-1px);box-shadow:0 6px 12px #0ea5e940}.editable-cell{position:relative;display:flex!important;align-items:center;gap:8px}.edit-btn{opacity:0;background:transparent;border:none;cursor:pointer;color:#64748b;padding:4px;border-radius:4px;transition:opacity .2s,background-color .2s;font-size:1rem}.editable-cell:hover .edit-btn,.edit-btn:focus{opacity:1}tr.table-row-with-actions:hover .edit-btn,tr.table-row-with-actions .edit-btn:focus{opacity:1}.editable-card .summary-value{display:flex;align-items:center;gap:8px}.editable-card .edit-btn{opacity:.6;transition:opacity .2s ease}.editable-card:hover .edit-btn{opacity:1}.table-header .header-actions{display:flex;align-items:center;gap:8px}.table-header .header-actions .pill{margin:0}.add-btn{background:#10b981;color:#fff;border:none;border-radius:6px;padding:4px 8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:4px}.add-btn:hover{transform:translateY(-1px);box-shadow:0 2px 4px #10b98133}.add-btn:active{transform:translateY(0)}.edit-btn:hover{background-color:#e2e8f0;color:#0ea5e9}@media (max-width: 900px),(pointer: coarse){h1{font-size:20px}.table-header h2{font-size:16px}thead{display:none}table,tbody,tr,td{display:block;width:100%}tbody tr{border-bottom:1px solid #e5eaf0;padding:10px 8px}tbody td{display:flex;justify-content:flex-start;align-items:baseline;gap:12px;padding:6px 4px;text-align:left}tbody td:before{content:attr(data-label);font-weight:700;color:#4b5563;padding-right:12px;flex-shrink:0}tbody td .toggle-btn,tbody td .amount,tbody td span:not([class]){text-align:left}.category-row td{padding:4px 0}tbody tr[data-role=detail] td[data-label="Expected Amount"],tbody tr[data-role=detail] td[data-label="Remaining Amount"],.category-row td[data-label=Details],.category-row td[data-label=Actions]{display:none!important}tbody tr[data-role=detail]{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"date spent ." "details details actions";row-gap:4px;column-gap:8px;padding:8px 6px}tbody tr[data-role=detail] td{width:auto;min-width:0;padding:2px 0;border-bottom:none}tbody tr[data-role=detail] td[data-label="Category / Date"]{grid-area:date}tbody tr[data-role=detail] td[data-label=Spent]{grid-area:spent;justify-content:flex-start;text-align:left;margin-left:12px;font-weight:700}tbody tr[data-role=detail] td[data-label=Details]{grid-area:details}tbody tr[data-role=detail] td[data-label=Actions]{grid-area:actions;justify-content:flex-end;justify-self:end;align-items:center;gap:6px}tbody tr[data-role=detail] td[data-label="Category / Date"]:before,tbody tr[data-role=detail] td[data-label=Spent]:before,tbody tr[data-role=detail] td[data-label=Actions]:before{content:none}tbody tr[data-role=detail] .edit-btn{opacity:1}.category-row td[data-label="Category / Date"]:before{content:"Category"}tbody tr[data-role=detail] td[data-label=Details]:before{content:none}.toggle-btn{justify-content:flex-start;flex-wrap:wrap;text-align:left;width:100%}.toggle-btn .group-totals{margin-left:0!important;width:100%;justify-content:flex-start}.amount{text-align:left}}