:root{--primary: #31509e;--primary-hover: #496abb;--primary-btn: #31509e;--primary-btn-text: white;--primary-btn-hover: #3a5aac;--budget-card-bg: #0f379ba8;--bg: white;--danger: #f24949;--danger-hover: #ee6565;--placeholder-hover: #f5f5f5;--placeholder: #d9d9d9;--primary-text: #4b4b4b;--secondary-text: #9e9e9e;--card-bg: white}html[data-theme=dark]{--bg: #0c1329;--primary: #ced7ee;--budget-card-bg: #12255aa8;--placeholder: #3d3c52;--placeholder-hover: #0d1833;--primary-text: #c3c4cf;--primary-btn: #1141bc;--primary-btn-text: var(--primary-text);--primary-btn-hover: #194bc8;--card-bg: rgb(10, 15, 37)}*{padding:0;margin:0;box-sizing:border-box;font-family:Outfit,sans-serif}body{display:flex;flex-direction:column;min-height:100vh;position:relative;align-items:center;font-family:Outfit,sans-serif;background-image:url(/assets/bg-16093689.png);background-repeat:no-repeat;background-position:center top;padding-bottom:2rem;background-color:var(--bg)}input{background-color:transparent;color:var(--primary-text)}.hidden{display:none!important}.hide{visibility:hidden}.container{max-width:40rem;width:100%}header{display:flex;justify-content:center;gap:1rem;align-items:center;height:15rem;color:var(--primary);filter:drop-shadow(5px 5px 5px rgba(23,34,56,.193))}.heading-title{font-size:3rem}.budgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.budget-card{padding:1rem;border-radius:20px;width:100%;cursor:pointer;background-color:var(--budget-card-bg);color:#fff}.budget-card.budget-detail{display:flex;align-items:center;justify-content:space-between}.budget-name{font-size:1.25rem;font-weight:600}.budget-amount{font-size:2rem;font-weight:700}.add-budget{display:flex;justify-content:center;align-items:center;border:2px dashed var(--placeholder);font-size:4rem;font-weight:700;color:var(--placeholder);background:transparent}.btn-rounded-lg{width:4rem;height:4rem;border:2px solid rgba(224,224,224,.435);padding:1rem;font-size:1.5rem;border-radius:50%;background-color:transparent;color:#e0e0e06f;cursor:pointer}.spend-item{padding:1rem;display:flex;justify-content:space-between;align-items:center;color:var(--primary-text);border-bottom:1px solid var(--placeholder)}.spends{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}.spend-item{cursor:pointer}.spend-item:hover{background-color:var(--placeholder-hover)}.spend-item .price{font-size:1.5rem;font-weight:700}.spend-add{padding:2rem;text-align:center;font-size:2rem;font-weight:700;border:2px dashed var(--placeholder);border-radius:20px;color:var(--placeholder);cursor:pointer;display:flex;justify-content:center;align-items:center;gap:1rem;line-height:0;background:transparent}.spend-add span{font-size:1rem;font-weight:500;transform:translateY(2px)}.modal{z-index:10;width:100%;height:100%;position:fixed;top:0;display:flex;justify-content:center;align-items:center;isolation:isolate}.modal:before{content:"";top:0;right:0;bottom:0;left:0;background-color:#00000046;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:absolute;z-index:-1}.modal .card{padding:1rem;border:1px solid var(--placeholder);background-color:var(--card-bg);border-radius:20px;height:max-content;animation:appear .3s ease-in-out}.modal.hidden .card{animation:disappear .3s ease-in-out}@keyframes appear{0%{transform:translateY(2rem);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes disappear{0%{transform:translateY(0);opacity:1}to{transform:translateY(2rem);opacity:0}}.card .card-title{margin-bottom:1rem;display:flex;justify-content:space-between;color:var(--primary)}.modal form{display:flex;flex-direction:column;gap:1rem}.form-item{display:flex;flex-direction:column;gap:.5rem}.modal label{color:var(--secondary-text)}.modal .btn-close{background-color:transparent;border:none;color:var(--danger);font-size:1.5rem;cursor:pointer}.modal input{border:1px solid var(--placeholder);border-radius:10px;font-size:1.5rem;padding:1rem}.modal form .form-action{display:flex;justify-content:space-between}.modal form .form-action button{padding:1rem;font-size:1.5rem;background-color:transparent;cursor:pointer;font-family:Outfit,sans-serif}.modal form .form-action button.btn-submit{background-color:var(--primary-btn);border:none;color:var(--primary-btn-text);border-radius:10px;padding:1rem 4rem}.modal form .form-action button.btn-submit:hover{background-color:var(--primary-btn-hover)}.modal form .form-action button.btn-delete{border:2px solid var(--danger);color:var(--danger);border-radius:10px}.modal form .form-action button.btn-delete:hover{border-color:var(--danger-hover);color:var(--danger-hover)}.input-rp{padding:1rem;border:1px solid var(--placeholder);border-radius:10px;display:flex}.input-rp:focus-within{outline:2px solid black}.input-rp:before{content:"Rp";font-size:1.5rem;margin-right:.5rem;color:var(--secondary-text)}.input-rp input{padding:0;border:none;outline:none;border-radius:0;flex:1}.back-home{display:flex;justify-content:center;gap:1rem;margin:0 auto;align-items:center;transform:translateY(-3rem);padding:.5rem 1rem;border-radius:20px;border:1px solid var(--placeholder);color:var(--primary-text);background:transparent;cursor:pointer}.notification{position:fixed;top:0;padding:1rem;margin-top:1rem;border:1px solid var(--placeholder);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:notifshow .5s ease-in-out;background-color:#ffffff9e;z-index:10}.notification.hide{animation:hidenotif 1s ease-out}@keyframes notifshow{0%{opacity:0;transform:translateY(-1rem)}to{opacity:1;transform:translateY(0)}}@keyframes hidenotif{0%{opacity:1}to{opacity:0}}.sort-spend{display:flex;justify-content:flex-end;align-items:center;gap:8px;color:var(--primary-text)}.sort-spend select{padding:.5rem 1rem;border:1px solid var(--placeholder);background-color:transparent;border-radius:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--primary-text)}.sort-spend select option{color:inherit;background-color:var(--placeholder)}.theme-switch{cursor:pointer;z-index:2;position:absolute;margin-top:2rem;padding:8px;border-radius:20px;border:2px solid var(--placeholder);background-color:transparent;color:var(--primary)}.theme-switch:hover{background-color:var(--placeholder)}@media only screen and (max-width: 600px){.budgets{padding:1rem;grid-template-columns:repeat(1,minmax(0,1fr))}#budget-details{padding:1rem}}