:root{--navy:#082a48;--muted:#6f7d8b;--line:#dbe3ea;--pressed:#f1f6fa;--blue:#0b6ca8;--blue-dark:#075b8f;--success:#178650;--success-bg:#eaf8f0}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;background:#fff;color:var(--navy);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body{overscroll-behavior-y:none}.screen{width:100%;min-height:100vh;min-height:100dvh;padding:max(16px,env(safe-area-inset-top)) 14px max(18px,env(safe-area-inset-bottom));background:#fff}
    .topbar{position:relative;display:flex;align-items:center;justify-content:center;min-height:42px;margin-bottom:18px}.back,.menu-button{position:absolute;top:0;display:grid;width:42px;height:42px;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--navy);cursor:pointer}.back{left:-4px}.menu-button{right:-4px}.back:active,.menu-button:active,.menu-button[aria-expanded="true"]{background:var(--pressed)}.logo{display:flex;align-items:baseline;font-size:21px;font-weight:800;font-style:italic;letter-spacing:-1.2px;user-select:none}.logo .pay{color:#111f31}.logo .pos{color:#0b6ca8}.logo sup{margin-left:2px;font-size:6px;font-style:normal;letter-spacing:0}.app-menu{position:absolute;z-index:20;top:46px;right:0;width:196px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 10px 28px rgba(8,42,72,.18)}.app-menu[hidden]{display:none}.menu-item{display:flex;align-items:center;width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--navy);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer}.menu-item:active{background:var(--pressed)}
    h1{margin:0 2px 12px;font-size:19px;line-height:1.25;font-weight:750;letter-spacing:-.25px}.transaction-summary{margin:0 0 14px;padding:9px 12px 10px;border:1px solid #d7e5ef;border-radius:11px;background:#f6fafd}.transaction-main{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}.transaction-label{display:block;margin-bottom:2px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.45px;text-transform:uppercase}.amount{display:block;font-size:20px;line-height:1.1;font-weight:800;letter-spacing:-.35px;white-space:nowrap}.reference-wrap{min-width:0;text-align:right}.reference-line{display:flex;align-items:center;justify-content:flex-end;gap:4px}.reference-input{width:112px;min-width:0;padding:2px 0;border:0;border-bottom:1px solid transparent;outline:0;background:transparent;color:var(--navy);font:inherit;font-size:12px;font-weight:700;text-align:right;text-overflow:ellipsis}.reference-input:not([readonly]),.reference-input:focus{border-bottom-color:var(--blue)}.edit-reference{display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--blue);cursor:pointer}.edit-reference:active{background:#e8f2f8}.selected-payment{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px;padding-top:8px;border-top:1px solid #dbe8f1}.selected-payment .transaction-label{margin:0}.payment-name{overflow:hidden;font-size:12px;line-height:1.25;font-weight:700;text-align:right;text-overflow:ellipsis;white-space:nowrap}
    .state-card{padding:17px 15px 15px;border:1px solid #cfe8da;border-radius:12px;background:#fff;box-shadow:0 2px 7px rgba(8,42,72,.045);text-align:center}.success-icon{display:grid;width:66px;height:66px;margin:0 auto 11px;place-items:center;border-radius:50%;background:var(--success-bg);color:var(--success);animation:pop .34s ease-out}.state-title{margin:0;color:var(--success);font-size:19px;line-height:1.2;font-weight:800}.state-message{margin:5px auto 0;color:var(--muted);font-size:11px;line-height:1.4}.details{margin-top:13px;padding-top:11px;border-top:1px solid #e3eee8;text-align:left}.detail-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;font-size:10px}.detail-label{color:var(--muted);font-weight:600}.detail-value{overflow:hidden;max-width:195px;font-weight:750;text-align:right;text-overflow:ellipsis;white-space:nowrap}.actions{display:grid;gap:8px;margin-top:12px}.button{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:10px 16px;border-radius:11px;font:inherit;font-size:13px;font-weight:750;cursor:pointer}.button svg{margin-right:7px}.button-primary{border:1px solid var(--blue);background:var(--blue);color:#fff}.button-primary:active{background:var(--blue-dark);transform:scale(.992)}.button-secondary{border:1px solid #b8c9d6;background:#fff;color:var(--navy)}.button-secondary:active{background:var(--pressed);transform:scale(.992)}
    @keyframes pop{0%{opacity:0;transform:scale(.7)}75%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}@media(max-height:650px){.topbar{margin-bottom:10px}.transaction-summary{margin-bottom:10px}.state-card{padding-top:12px}.success-icon{width:55px;height:55px;margin-bottom:8px}.details{margin-top:9px;padding-top:8px}.detail-row{min-height:21px}.actions{margin-top:9px}.button{min-height:42px}}@media(min-width:430px){.screen{width:min(100%,430px);margin:0 auto}}@media(prefers-reduced-motion:reduce){.success-icon{animation:none}}