:root{--main-yellow: #f7b733;--main-yellow-dark: #f5a623;--text-color: #333;--bg-color: #fff8e1;--card-bg: #fff;--shadow-color: rgba(247, 183, 51, .2);--light-yellow: #fff7dc;--ink-60: #777;--line: rgba(247, 183, 51, .25);--green: #2ecc71;--green-bg: #e8f8ee}*{box-sizing:border-box}body{margin:0;background-color:var(--bg-color);background-image:radial-gradient(rgba(247,183,51,.35) 1.5px,transparent 1.5px);background-size:22px 22px;background-position:0 0;color:var(--text-color);font-family:Poppins,sans-serif;line-height:1.6}.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:32px 16px 48px}.head{display:flex;align-items:center;justify-content:center;margin-bottom:32px}.head .logo{width:84px;height:60px;object-fit:contain}.card{background:var(--card-bg);border-radius:18px;padding:32px 26px;width:100%;max-width:400px;text-align:center;box-shadow:0 8px 24px var(--shadow-color)}.card h1{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.35rem;color:var(--main-yellow-dark);margin:0 0 6px}.muted{color:var(--ink-60);font-size:13.5px;margin:0 0 18px}.tiny{font-size:11.5px;margin-top:14px}.mode-toggle{display:flex;background:var(--light-yellow);border-radius:999px;padding:4px;margin-bottom:18px;gap:4px}.mode-toggle button{flex:1;border:none;background:transparent;padding:9px 10px;border-radius:999px;font-family:Poppins,sans-serif;font-weight:600;font-size:13px;color:var(--ink-60);cursor:pointer;transition:background .2s ease,color .2s ease}.mode-toggle button.active{background:var(--main-yellow);color:#fff;box-shadow:0 3px 10px var(--shadow-color)}.code-input{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-family:Poppins,sans-serif;text-align:center;letter-spacing:.5px;margin-bottom:14px;background:var(--light-yellow);color:var(--text-color)}.code-input.code-mode{text-transform:uppercase;letter-spacing:1.5px}.code-input:focus{outline:none;border-color:var(--main-yellow);background:#fff}.btn{width:100%;padding:13px;border:none;border-radius:12px;background:var(--main-yellow);color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .2s ease,transform .15s ease}.btn:hover{background:var(--main-yellow-dark)}.btn:active{transform:scale(.98)}.btn.ghost{background:transparent;color:var(--main-yellow-dark);border:1.5px solid var(--main-yellow);margin-top:10px}.btn.ghost:hover{background:var(--light-yellow)}.qr{width:100%;max-width:260px;border-radius:14px;border:1.5px solid var(--line);margin:10px 0 18px;padding:6px;background:#fff}.amount{font-family:Montserrat,sans-serif;font-size:28px;font-weight:800;color:var(--main-yellow-dark);margin-bottom:18px}.summary{text-align:left;border-top:1px dashed var(--line);padding-top:14px;margin-top:4px;display:flex;flex-direction:column;gap:9px}.row{display:flex;justify-content:space-between;gap:12px;font-size:13px}.row-label{color:var(--ink-60)}.row-value{font-weight:600;text-align:right}.row-value.mono{font-family:SF Mono,Menlo,monospace;letter-spacing:.5px}.pending-tag{display:inline-block;margin-top:18px;padding:7px 14px;border-radius:999px;background:var(--light-yellow);color:var(--main-yellow-dark);font-size:12.5px;font-weight:600}.check{width:60px;height:60px;line-height:60px;border-radius:50%;background:var(--green-bg);color:var(--green);font-size:30px;font-weight:800;margin:0 auto 14px}.foot{margin-top:36px;color:var(--ink-60);font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;text-align:center}.foot-link{color:var(--main-yellow-dark);font-weight:600;text-decoration:none}.foot-link:hover{text-decoration:underline}.foot-sep{color:var(--line)}.result-list{text-align:left;display:flex;flex-direction:column;gap:10px;margin-top:4px}.result-item{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--light-yellow);transition:background .15s ease,border-color .15s ease}.result-item:hover{background:#fff;border-color:var(--main-yellow)}.result-item .r-top{display:flex;justify-content:space-between;font-weight:700;font-size:13.5px;margin-bottom:3px}.result-item .r-sub{font-size:12px;color:var(--ink-60)}.status-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700}.status-pill.paid{background:var(--green-bg);color:var(--green)}.status-pill.pending{background:var(--light-yellow);color:var(--main-yellow-dark)}.status-pill.other{background:#f1f1f1;color:#888}