*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f3f4f6}
.qris-root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:14px}
.qris-card{width:100%;max-width:400px;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.1)}
.qris-header{padding:32px;background:#f0f2f5}
.qris-title{font-family:'Syne',sans-serif;font-size:26px;font-weight:800}
.qris-title span{color:#10b981}
.qris-body{padding:28px}
.qris-label{font-size:11px;color:#666;margin-bottom:10px;display:block}
.qris-input{width:100%;padding:16px;border-radius:14px;border:1px solid #ccc;font-size:22px;font-weight:700}
.qris-btn{width:100%;padding:16px;border:none;border-radius:14px;font-weight:700;cursor:pointer}
.qris-btn-primary{background:#10b981;color:#fff}
.qris-btn-ghost{background:#eee;margin-top:16px}
.qris-qr-section{text-align:center}
.qris-qr-box{background:#fff;padding:20px;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.15)}
.qris-amount-display{margin-top:20px}
.qris-amount-display .value{font-family:'Syne',sans-serif;font-size:28px;font-weight:800}
.qris-progress-track{width:100%;height:4px;background:#ddd;margin-top:10px}
.qris-progress-bar{height:100%;background:#10b981;width:100%}
.qris-state-center{text-align:center}