:root{--blue:#006cba;--bg:#f5f7f9;--text:#242626;--muted:#656767;--green:#087a37}*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#e6ebef}button,input{font:inherit}button{cursor:pointer;border:0;background:none;padding:0;color:var(--blue);-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--blue);outline-offset:4px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.symbols{position:absolute;width:0;height:0;overflow:hidden}.phone{height:100dvh;max-width:440px;margin:auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;position:relative}.statusbar{height:62px;flex-shrink:0;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 43px 0 49px;color:#000;font-size:18px;font-weight:700}.location{font-size:19px;display:inline-block;transform:rotate(-27deg);margin-left:-2px}.status-icons{display:flex;align-items:center;gap:8px}.signal{display:flex;align-items:end;gap:2px;height:15px}.signal i{width:4px;background:#000;border-radius:1.5px;height:6px}.signal i:nth-child(2){height:9px}.signal i:nth-child(3){height:12px;background:#ccc}.signal i:nth-child(4){height:15px;background:#ccc}.wifi{width:21px;height:18px;stroke-width:3}.battery{position:relative;background:linear-gradient(90deg,#000 73%,#aaa 73%);color:white;border-radius:5px;font-size:14px;line-height:15px;padding:0 5px}.battery:after{content:'';position:absolute;right:-3px;top:5px;width:2px;height:5px;background:#aaa;border-radius:1px}main{overflow-y:auto;overflow-x:hidden;flex:1;scrollbar-width:none;padding-bottom:42px}main::-webkit-scrollbar{display:none}.greeting{padding:14px 27px 0 16px;height:84px;display:flex;justify-content:space-between;align-items:flex-start;font-size:13.5px;line-height:21px}.greeting button{margin-top:9px}.greeting svg{width:21px;height:21px}.balance{padding:3px 27px 0 16px}.muted{font-size:11px;color:var(--muted);display:block;margin-bottom:2px}.balance-line{display:flex;align-items:center;height:25px;gap:4px}.balance-line>button{color:var(--muted);margin-right:5px;display:flex}.balance-line>button svg{width:20px;height:20px}.total{font-size:19px;letter-spacing:-.35px}.currency{font-size:13px;color:#5d5f5f}.balance-tools{display:flex;gap:21px;margin-left:auto;align-items:center}.balance-tools button{display:flex}.balance-tools svg{width:20px;height:20px}.quick-actions{display:flex;gap:13px;overflow-x:auto;scrollbar-width:none;padding:25px 15px 0;margin-bottom:25px}.quick-actions>button{flex:0 0 82px;font-size:10.5px;font-weight:700;white-space:nowrap;text-align:center}.quick-actions>button>span{width:49px;height:49px;border-radius:50%;background:white;box-shadow:0 5px 10px #00000019;margin:0 auto 9px;display:grid;place-items:center}.quick-actions svg{width:20px;height:20px}.quick-actions .customize>span{background:transparent;border:1.6px solid var(--blue);box-shadow:none}.accounts{padding:0 16px}.bank-heading{font-size:10.6px;display:flex;justify-content:space-between;color:var(--muted);margin-bottom:8px;white-space:nowrap}.account-card{background:white;border-radius:9px;box-shadow:0 4px 10px #00000019;overflow:hidden}.account{height:103px;border-bottom:1px solid #d8e0e8;position:relative;padding:16px 14px;display:flex;gap:11px;width:100%;text-align:left;color:var(--text)}.brand{width:40px;height:28px;stroke:none;flex-shrink:0}.account-info{min-width:0}.owner{display:block;color:#717171;font-size:11px;letter-spacing:.2px;line-height:15px}.account-name{display:block;color:var(--blue);font-size:13px;font-weight:700;line-height:16px}.iban{font-size:10.7px;white-space:nowrap;display:block;line-height:15px;letter-spacing:-.15px}.account-value{position:absolute;right:14px;bottom:17px;color:var(--green);font-size:13.5px;font-weight:700}.account-value small{font-size:10.5px}.negative{color:#df0000}.wero-row{height:83px;border:0;align-items:flex-start}.wero-brand{background:var(--bg);width:40px;height:40px;padding:8px;color:#202020;stroke:none}.qr-button{position:absolute;right:4px;top:7px;bottom:5px;width:60px;border-left:1px solid #d8e0e8;display:grid;place-items:center}.qr-button>span{border:1.6px solid var(--blue);width:39px;height:39px;border-radius:50%;display:grid;place-items:center}.qr-button svg{width:20px;height:20px}.adjust{margin:28px 16px 0;border:1.6px solid var(--blue);border-radius:24px;width:calc(100% - 32px);height:39px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.4px}.adjust svg{width:19px;height:19px}.bottom-nav{height:98px;flex-shrink:0;background:#fff;display:flex;align-items:flex-start;justify-content:space-around;box-shadow:0 -6px 16px #00000006;z-index:2;padding-top:14px}.bottom-nav>button{width:20%;display:flex;align-items:center;flex-direction:column;gap:7px;color:#616363;font-size:9px;position:relative}.bottom-nav svg{height:21px;width:21px}.bottom-nav span{color:#292929}.bottom-nav .active,.bottom-nav .active span{color:var(--blue)}.bottom-nav .active:before{content:'';position:absolute;top:-14px;width:48px;height:2px;border-radius:2px;background:var(--blue)}.bottom-nav .payment{border-radius:50%;background:var(--blue);color:white;width:52px;height:52px;font-size:32px;line-height:52px;font-weight:300;margin-top:-8px}.filled{stroke:none}#account-search{margin-top:12px;width:100%;padding:10px;border:1px solid #ccd7e0;border-radius:8px;background:white}dialog{width:min(360px,calc(100% - 32px));border:0;border-radius:18px;padding:30px;color:var(--text);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#122c4570;backdrop-filter:blur(3px)}.close{position:absolute;right:16px;top:10px;font-size:26px}.demo-label{font-size:10px;letter-spacing:1.5px;color:var(--muted)}dialog h2{font-size:22px;margin:18px 0 10px}dialog p{font-size:14px;line-height:1.5}.dialog-ok{background:var(--blue);color:white;padding:12px 20px;border-radius:24px;margin-top:10px}@media(min-width:600px){.phone{box-shadow:0 0 50px #1f3b4b25}}@media(max-width:380px){.bank-heading{font-size:9px}.iban{font-size:9.5px}.account-name{font-size:12px}.greeting{font-size:12px}}
