@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;550;600;650;700&display=swap');
:root{color-scheme:dark;--text:#f6f5fc;--muted:#aaa6c0;--bg:#2c2b45;--orange:#ff9e57}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#bbb5d1;color:var(--text);font-family:Inter,Arial,sans-serif;font-size:13px;display:flex;justify-content:center;align-items:flex-start;padding:48px 20px}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible{outline:2px solid #ffa56a;outline-offset:4px}svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:none}button>*{pointer-events:none}.phone-app{position:relative;width:390px;min-height:810px;background:radial-gradient(ellipse at 20% 5%,#34334d50,transparent 65%),var(--bg);border-radius:36px;padding:32px 20px 110px;box-shadow:20px 40px 60px #46405e45,inset 0 1px 2px #ffffff0d;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.app-header h1{font-size:14px;font-weight:500;color:#bebad1;letter-spacing:0;margin:0}.square-button{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;color:#cac4e0;background:linear-gradient(140deg,#41405b65,#33324c);box-shadow:4px 5px 12px #201f3520,inset 0 1px #ffffff03}.square-button svg{width:21px;height:21px}.notification{position:relative}.notification>span{position:absolute;bottom:-5px;right:7px;border-radius:6px;font-size:8px;background:#ed7c6c;box-shadow:0 0 10px #ed7c6c80;padding:2px 5px;color:white}.top-tabs{display:flex;background:#24233b88;border-radius:19px;padding:5px;gap:5px;height:51px;margin-bottom:23px;box-shadow:inset 2px 3px 9px #15142520}.top-tabs button{flex:1;border-radius:15px;font-size:11px;color:#a39db8;transition:.2s}.top-tabs button.active{background:linear-gradient(130deg,#4c4969,#44405f);color:#f3efff;box-shadow:0 5px 10px #17162940,inset 0 1px #ffffff05}.summary-chips{display:flex;gap:9px;justify-content:center;white-space:nowrap}.summary-chips>span{background:#3d3b5670;border:1px solid #ffffff03;border-radius:10px;font-size:9px;color:#b3aec7;padding:7px 9px}.summary-chips b{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6cddce;box-shadow:0 0 0 3px #6cddce15;margin-right:5px}.summary-chips>span+span b{background:#f2a475;box-shadow:0 0 0 3px #f2a47515}.summary-chips strong{font-weight:550;color:#e4deef;margin-left:3px}.balance-ring{position:relative;width:286px;height:286px;margin:13px auto 17px}.ring-art{position:absolute;width:100%;height:100%;inset:0;stroke-width:1;overflow:visible}.ring-orbit{stroke:#85809e20}.ring-segment{stroke-width:3;filter:drop-shadow(0 0 5px #9380d425)}.ring-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:12px}.ring-content>span{font-size:12px;color:#b0aac4}.ring-content strong{font-size:33px;letter-spacing:-1.3px;font-weight:400;margin:6px 0 8px;max-width:238px;overflow-wrap:anywhere;text-align:center}.ring-content small{font-size:10px;color:#a29ab7}.ring-content button{margin-top:11px;color:#8b819f;padding:0;height:17px}.ring-content svg{width:17px;height:17px}.wallet-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:23px}.wallet-actions button{background:linear-gradient(140deg,#3c395775,#39355070);border-radius:19px;height:65px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;font-size:9px;color:#e0d9ee;box-shadow:4px 5px 10px #24223740,inset 0 1px #ffffff02}.wallet-actions i{height:23px;color:#cfc4e6}.wallet-actions svg{width:22px;height:22px}.wallet-actions button:hover{background:#4c4564}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}.section-heading h2{font-size:11px;color:#b4acc7;font-weight:400;margin:0}.section-heading select{background:transparent;border:0;color:#a299b6;font-size:9px;padding:5px;max-width:110px}.section-heading select option{background:#302d47}.transaction{display:grid;grid-template-columns:1fr 46px auto;gap:7px;align-items:center;padding:12px 0;border-bottom:1px solid #ffffff04}.transaction-description{display:flex;gap:10px;align-items:center;min-width:0}.transaction-icon{width:40px;height:40px;border-radius:15px;background:#3b375280;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:#d8c8ed}.transaction-name{font-size:11px;overflow:hidden;text-overflow:ellipsis;max-width:145px;white-space:nowrap}.transaction small{display:block;font-size:9px;color:#9388a8;margin-top:5px}.transaction time{font-size:8px;color:#8f85a1}.amount{font-size:10px;text-align:right;white-space:nowrap;color:#e3d9ee}.amount.income{color:#8dd0b5}.empty{border-radius:15px;background:#24213938;padding:17px 14px;font-size:10px;line-height:1.9;color:#9d92b1}.text-button{font-size:10px;color:#d1bce9;padding:5px 0}.card-balance{display:flex;align-items:center;gap:8px;margin-top:2px;margin-bottom:26px}.card-balance>div{flex:1}.card-balance>div>span{font-size:9px;color:#a69eb9;display:block;margin-bottom:7px}.card-balance strong{font-size:27px;font-weight:450;letter-spacing:-.8px;display:block}.card-balance small{display:block;font-size:10px;color:#bfb4cd;margin-top:7px}.card-balance small b{font-weight:400}.round-button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:#26233c90;color:#b5a7ca;font-size:24px}.round-button svg{width:20px;height:20px}.card-stage{position:relative;margin:4px -2px 21px;padding:7px 0 0;isolation:isolate}.ribbon{position:absolute;z-index:-1;border-radius:50px 0 50px 0;width:210px;height:156px;background:linear-gradient(170deg,#ff00a5,#ff456b 40%,#ffc45c);transform:skewY(-22deg);filter:saturate(1.2)}.ribbon-one{left:-30px;top:78px}.ribbon-two{right:-32px;top:4px;width:128px;height:142px;transform:skewY(-28deg)}.credit-card{height:199px;border-radius:21px;border:1px solid #ffffff12;background:radial-gradient(ellipse at 8% 80%,#ff506b8c,transparent 64%),radial-gradient(ellipse at 100% 30%,#f1496880,transparent 60%),linear-gradient(130deg,#44324fc9,#3a2b47a8);backdrop-filter:blur(20px);padding:21px 22px;box-shadow:0 14px 25px #1d16313a;overflow:hidden}.card-top{display:flex;justify-content:space-between;align-items:center}.card-brand{display:flex;align-items:center;font-size:15px;font-weight:600;gap:9px}.card-brand i{display:grid;place-items:center;width:30px;height:30px;border:1px solid #e9d6f1aa;border-radius:50%;font-size:25px;font-weight:400;font-style:normal}.contactless{transform:rotate(-15deg);color:#d0adc6;font-size:18px;letter-spacing:1px}.card-number{font-size:18px;letter-spacing:.9px;margin-top:33px;color:#f0d8e9;white-space:nowrap}.card-bottom{display:flex;gap:27px;margin-top:23px;align-items:center;color:#d1abc6;font-size:8px}.card-bottom strong{display:block;color:#ecd1df;font-size:12px;font-weight:400;margin-top:4px}.mastercard{margin-left:auto;display:flex}.mastercard i{width:32px;height:32px;border:1px solid #cba7be44;border-radius:50%;background:#e5b5c338}.mastercard i+i{margin-left:-11px;background:#e5b5c326}.card-action-tabs{display:flex;gap:3px;background:#242139a0;border-radius:20px;padding:5px;position:relative;z-index:1;margin:0 0 18px;box-shadow:0 3px 7px #201b3530}.card-action-tabs button{flex:1;font-size:10px;color:#b4a8c5;border-radius:15px;padding:13px 3px}.card-action-tabs .active{color:#eee5f5;background:linear-gradient(120deg,#514968,#45415f);box-shadow:0 4px 8px #17122830}.invoice-line{border-radius:15px;background:#24213955;padding:14px 13px;margin-bottom:22px}.invoice-line>div:first-child{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#baadc9}.invoice-line strong{font-size:14px;font-weight:500;color:#e6d9ed}.invoice-line b{display:inline-block;width:5px;height:5px;background:#fca66e;border-radius:50%;margin-right:5px}.limit-track{height:3px;margin:12px 0;background:#4a3d58;border-radius:5px;overflow:hidden}.limit-track span{display:block;background:linear-gradient(90deg,#d176a9,#ffa56a);height:100%}.invoice-line>small{font-size:8px;color:#8c7e9e}.scheduled-item,.installment{display:flex;align-items:center;gap:10px;background:#24213945;border-radius:14px;padding:14px 12px;margin-bottom:9px}.scheduled-item>i,.installment>i{font-style:normal;font-size:21px;color:#c5afd7}.scheduled-item>div,.installment>div{flex:1;font-size:11px}.scheduled-item small,.installment small{display:block;font-size:8px;color:#a190b3;margin-top:6px}.scheduled-item>strong,.installment>strong{font-size:10px;font-weight:500}.scheduled-item>strong{color:#9bd2b9}.delete-recurrence{font-size:18px;color:#9f88ad}.installment-heading{margin-top:28px}.recurring-panel{padding-top:8px}.bottom-nav{position:absolute;bottom:13px;left:0;right:0;height:77px;border-radius:26px 26px 0 0;background:linear-gradient(110deg,#48435a90,#36314ec9);border-top:1px solid #a092b32b;backdrop-filter:blur(20px);display:flex;justify-content:space-around;padding:14px 8px 5px;z-index:5;box-shadow:0 -8px 30px #29203920}.bottom-nav>button{display:flex;flex-direction:column;align-items:center;gap:7px;color:#9d91b1;font-size:9px;width:61px;position:relative}.bottom-nav>button svg{width:21px;height:21px}.bottom-nav>button.active{color:#f2e5f6}.bottom-nav>button.active:before{content:'';position:absolute;top:-15px;width:23px;height:2px;background:#ffba84;box-shadow:0 0 14px 4px #ff9b5350}.bottom-nav .new-entry{margin-top:-29px;gap:5px}.new-entry>span{display:grid;place-items:center;width:51px;height:53px;background:linear-gradient(130deg,#ffb566,#ff864c);clip-path:polygon(50% 0,95% 23%,95% 76%,50% 100%,5% 76%,5% 23%);color:white;filter:drop-shadow(0 5px 10px #ff8c5560)}.bottom-nav .new-entry svg{width:25px;height:25px;stroke-width:1.8}.new-entry small{font-size:9px;color:#b8a7bf}.home-indicator{position:absolute;bottom:7px;left:calc(50% - 52px);width:104px;height:3px;background:#a598b233;border-radius:8px;z-index:6}dialog{border:1px solid #ffffff15;border-radius:24px;background:#302c46;color:#f1e8f7;width:360px;max-width:calc(100% - 30px);max-height:90vh;overflow-y:auto;padding:24px;box-shadow:0 30px 80px #17102088}dialog::backdrop{background:#171225aa;backdrop-filter:blur(6px)}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-heading h2{font-size:18px;font-weight:500;margin:0}.modal-heading button{font-size:26px;color:#baabc9}label{display:block;font-size:11px;color:#c5b6d4;margin:16px 0 7px}input,form select{width:100%;background:#252137;border:1px solid #a18bb32a;border-radius:11px;color:#f2e7fa;padding:12px;font-size:13px;outline:none}input:focus,form select:focus{border-color:#f9aa79}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-note{font-size:10px;line-height:1.8;color:#ab98bc}.primary{border-radius:12px;background:linear-gradient(120deg,#ffb66d,#f7895c);color:#342136;padding:13px;font-weight:600}.submit{width:100%;margin-top:14px}#form-error{font-size:11px;color:#ffaaa2;line-height:1.5}#toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%,180px);background:#f9ad78;color:#332239;padding:13px 20px;font-size:11px;border-radius:14px;transition:.3s;z-index:20;opacity:0;max-width:340px;width:max-content;box-shadow:0 10px 30px #19112455}#toast.show{transform:translate(-50%,0);opacity:1}[hidden]{display:none!important}
@media(min-width:600px){body{padding:45px 20px 60px}.phone-app{border:1px solid #e4daec18}.bottom-nav{position:absolute;bottom:13px}.home-indicator{bottom:8px}.phone-app:before{content:'';position:absolute;inset:10px 0 auto;height:3px;margin:auto;width:40px;border-radius:3px;background:#ffffff08}}
@media(max-width:599px){body{padding:0;background:#2c2b45;display:block}.phone-app{width:100%;min-height:100dvh;border-radius:0;box-shadow:none;padding:27px 20px 110px;overflow:clip}.bottom-nav{position:fixed;left:0;right:0;bottom:0;padding-bottom:max(16px,env(safe-area-inset-bottom));height:84px}.home-indicator{position:fixed;bottom:6px}.app-header{margin-bottom:22px}.top-tabs{margin-bottom:22px}.balance-ring{width:min(78vw,306px);height:min(78vw,306px);margin:14px auto 16px}.wallet-actions{margin-bottom:22px;height:65px}.credit-card{height:210px;padding:23px}.card-number{margin-top:34px;font-size:19px}.card-stage{margin-top:8px;margin-bottom:26px}.card-balance{margin-top:5px;margin-bottom:24px}.card-balance strong{font-size:29px}.transaction-name{max-width:155px}.phone-app:has(.card-screen:not([hidden])) .transactions-panel{padding-top:0}}@media(max-width:360px){.phone-app{padding-left:15px;padding-right:15px}.card-number{font-size:16px}.ring-content strong{font-size:29px}.summary-chips>span{font-size:8px;padding:7px}.transaction-name{max-width:115px}}
.billing-dates{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid #ffffff09}.billing-dates>div>span{display:block;font-size:9px;color:#ad9bbd}.billing-dates>div>strong{display:block;font-size:15px;font-weight:500;color:#f2d6c3;margin-top:6px}.billing-dates>button{grid-column:1/-1;text-align:left;padding:2px 0;font-size:9px;color:#c7addb}.notification-panel{background:#252139;border:1px solid #bca1d41a;border-radius:17px;padding:16px;margin:0 0 20px}.notification-panel .section-heading h2{color:#e2d3ee;font-size:13px}.notification-panel .text-button{font-size:9px}.notice{padding:13px 11px;border-radius:12px;margin-top:9px;background:#3d334a;border-left:2px solid #f7af79}.notice>strong{font-size:11px;font-weight:500;color:#f2ded0}.notice p{font-size:10px;line-height:1.7;color:#c0accb;margin:7px 0}.notice.overdue{border-color:#f28c9c}.notice.overdue>strong{color:#f7a9b6}.notice.read{opacity:.65}.notification-panel>.form-note{margin-bottom:0}
.auth-screen{width:390px;max-width:100%;min-height:650px;border-radius:30px;background:#2c2b45;padding:70px 30px;box-shadow:10px 20px 50px #46405e30}.auth-brand{font-size:52px;font-weight:650;letter-spacing:-3px;margin-bottom:35px}.auth-brand span{color:#ffa566}.auth-screen h2{font-weight:450;font-size:22px}.auth-screen p{font-size:12px;line-height:1.8;color:#b9a9c9}.auth-screen #login-error{color:#ffb2a5}.sync-status{font-size:8px;color:#9bc4b6;margin:-8px 0 15px;text-align:center;line-height:1.7}.sync-error{color:#ffb4a0}.reconnect{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:30}#logout-button{display:block;margin:-12px auto 10px;font-size:8px;color:#aa96bd}.submit:disabled{opacity:.6;cursor:wait}@media(max-width:599px){.auth-screen{width:100%;min-height:100dvh;border-radius:0}.sync-status{margin-bottom:12px}}
#change-password-button{display:block;margin:-10px auto 14px;font-size:9px;color:#b6a0cd}#password-error{color:#ffb2a5!important}#password-back{margin:15px auto;display:block}.auth-screen:has(#password-form){padding-top:32px;padding-bottom:32px}
.install-button{display:block;margin:18px auto 0;border:1px solid #bca2db30;border-radius:12px;padding:11px 15px;color:#d1bce6;background:#bca2db09;font-size:11px}.install-button.compact{margin:-5px auto 13px;padding:6px 11px;font-size:9px}.install-icon{border-radius:17px;display:block;margin:8px auto 22px}.install-steps{padding-left:20px;color:#baa8ce;font-size:12px;line-height:1.9}.install-steps li{margin-bottom:13px}.install-steps strong{color:#f0e0fb;font-weight:500}#install-dialog h3{font-size:13px;font-weight:500}#install-dialog{max-height:85dvh;overflow:auto}.auth-screen{padding-bottom:max(32px,env(safe-area-inset-bottom))}@media(max-width:599px){.phone-app{padding-top:max(27px,env(safe-area-inset-top))}.bottom-nav{height:calc(84px + env(safe-area-inset-bottom));padding-bottom:calc(16px + env(safe-area-inset-bottom))}.home-indicator{display:none}.auth-screen{padding-top:max(45px,env(safe-area-inset-top))}.phone-app{padding-bottom:calc(115px + env(safe-area-inset-bottom))}}