:root {
    --primary: #ee4d2d;
    --primary-dark: #d83c1f;
    --ink: #17202a;
    --muted: #697386;
    --line: #e8ebf0;
    --bg: #f4f6f9
}
* {
    box-sizing: border-box
}
body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(145deg,#fff5f1 0,var(--bg) 42%);
    font: 15px Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    color: var(--ink)
}
header {
    height: 72px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 max(24px,calc((100% - 1080px)/2));
    box-shadow: 0 1px 8px #17202a0a
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 19px;
    font-weight: 750
}
.mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800
}
.online {
    font-size: 13px;
    color: #16834b
}
.online:before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
    background: #20b26b
}
.wrap {
    width: min(100% - 28px,500px);
    margin: 48px auto
}
.card {
    background: #fff;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 18px 55px #26364d14
}
.eyebrow {
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}
h1 {
    font-size: 26px;
    margin: 7px 0 8px
}
.subtitle {
    color: var(--muted);
    margin: 0 0 25px;
    line-height: 1.55
}
label {
    display: block;
    margin: 0 0 9px;
    font-weight: 650
}
.field {
    display: flex;
    align-items: center;
    border: 1px solid #d9dee7;
    border-radius: 12px;
    background: #fff;
    transition: .2s
}
.field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px #ee4d2d16
}
.prefix {
    padding-left: 16px;
    color: var(--muted);
    font-weight: 700;
    font-size: 18px
}
input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 21px;
    padding: 15px 16px;
    color: var(--ink)
}
button,.button {
    width: 100%;
    display: block;
    margin-top: 18px;
    padding: 15px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 16px;
    font-weight: 750;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: .2s
}
button:hover,.button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px)
}
.qr {
    text-align: center
}
@media(min-width:761px) {
    .payment-wrap {
        width: min(calc(100% - 48px),960px)
    }
    .payment-wrap .card {
        padding: 38px 42px
    }
    .payment-wrap .qr {
        display: grid;
        grid-template-columns: minmax(250px,1fr) minmax(340px,400px);
        grid-template-rows: auto auto auto auto auto 1fr;
        column-gap: 48px;
        align-items: center;
        text-align: left
    }
    .payment-wrap .eyebrow,
    .payment-wrap .amount-label,
    .payment-wrap .amount,
    .payment-wrap .timer,
    .payment-wrap .status,
    .payment-wrap .transaction-meta,
    .payment-wrap .secondary {
        grid-column: 1
    }
    .payment-wrap .qr-frame {
        grid-column: 2;
        grid-row: 1 / span 7;
        justify-self: end;
        width: 100%
    }
    .payment-wrap .amount {
        font-size: 40px;
        margin-bottom: 25px
    }
    .payment-wrap .timer {
        margin-top: 0
    }
    .payment-wrap .status,
    .payment-wrap .secondary {
        text-align: center
    }
}
.amount-label {
    color: var(--muted);
    font-size: 13px
}
.amount {
    font-size: 32px;
    font-weight: 800;
    margin: 3px 0 16px
}
.qr-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: 0 8px 30px #1d293914
}
.qr img {
    display: block;
    width: min(100%,360px);
    height: auto;
    border-radius: 8px
}
.payment-confirmation {
    display: none;
    min-height: 330px;
    width: min(100%,360px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: #11733e;
    background: linear-gradient(145deg,#f0fdf6,#e5f8ed);
    border-radius: 12px;
    padding: 28px
}
.confirmation-icon {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 50%;
    color: #fff;
    background: #16a765;
    font-size: 42px;
    font-weight: 800;
    box-shadow: 0 12px 30px #16a76533
}
.payment-confirmation strong {
    font-size: 20px
}
.payment-confirmation small {
    margin-top: 7px;
    color: #54816a
}
.qr-frame.is-paid img,
.qr-frame.is-expired img,
.qr-frame.is-failed img {
    display: none
}
.qr-frame.is-paid .payment-confirmation,
.qr-frame.is-expired .payment-confirmation,
.qr-frame.is-failed .payment-confirmation {
    display: flex
}
.qr-frame.is-expired .payment-confirmation,
.qr-frame.is-failed .payment-confirmation {
    color: #a62d22;
    background: linear-gradient(145deg,#fff5f4,#fee9e7)
}
.qr-frame.is-expired .confirmation-icon,
.qr-frame.is-failed .confirmation-icon {
    background: #d64535;
    box-shadow: 0 12px 30px #d6453533
}
.qr-frame.is-expired .payment-confirmation small,
.qr-frame.is-failed .payment-confirmation small {
    color: #95615c
}
.status {
    padding: 13px 15px;
    border-radius: 11px;
    background: #fff7df;
    color: #8a5a00;
    font-weight: 800
}
.paid {
    background: #e5f8ed;
    color: #11733e
}
.status.paid {
    width: max-content;
    min-width: 92px;
    padding: 9px 20px;
    border: 1px solid #bcebd1;
    font-size: 12px;
    letter-spacing: .08em;
    margin-inline: auto
}
.expired,.failed {
    background: #fee9e7;
    color: #a62d22
}
.timer {
    font-weight: 700;
    margin: 18px 0 10px
}
.transaction-meta {
    display: grid;
    gap: 12px;
    margin: 22px 0 8px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc
}
.transaction-meta>div {
    display: grid;
    gap: 4px
}
.transaction-meta span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}
.transaction-meta strong {
    color: #344054;
    font: 600 12px ui-monospace,SFMono-Regular,Consolas,monospace;
    word-break: break-all
}
.secondary {
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    margin-top: 12px
}
.secondary:hover {
    background: #f8f9fb
}
.status-paid .eyebrow {
    color: #0b8f55
}
.status-paid .secondary {
    color: #fff;
    background: #111827;
    border-color: #111827
}
.status-paid .secondary:hover {
    background: #253044
}
.status-paid .timer,
.status-paid .status {
    display: none
}
.payment-wrap.payment-paid {
    width: min(calc(100% - 48px),860px)
}
.status-paid .payment-confirmation {
    min-height: 270px
}
.err {
    padding: 12px;
    background: #fee9e7;
    color: #a62d22;
    border-radius: 10px
}
.foot {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin-top: 20px
}
@media(max-width:560px) {
    header {
        height: 64px;
        padding: 0 16px
    }
    .online {
        display: none
    }
    .wrap {
        width: calc(100% - 20px);
        margin: 14px auto 24px
    }
    .card {
        padding: 22px 18px;
        border-radius: 16px
    }
    h1 {
        font-size: 23px
    }
    .qr img {
        width: min(78vw,320px)
    }
    .payment-confirmation {
        min-height: min(78vw,320px);
        width: min(78vw,320px)
    }
}
.secure-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #16a765;
    box-shadow: 0 0 0 3px #16a76518
}
@media(min-width:561px) and (max-width:760px) {
    .payment-wrap {
        width: min(calc(100% - 32px),620px);
        margin: 28px auto
    }
}