:root{--bg:#080b0a;--surface:#101713;--line:rgba(191,255,226,.09);--text:#f7fbf8;--muted:#9eaca3;--green:#18d88f;--green2:#6df5bf;--amber:#f0b44d;--red:#ff7268}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 0%,rgba(24,216,143,.08),transparent 28%),var(--bg);color:var(--text);font-family:Inter,"Noto Sans Thai",sans-serif;line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(1120px,calc(100% - 34px));margin:auto}.header{border-bottom:1px solid var(--line);background:rgba(8,11,10,.88);backdrop-filter:blur(18px)}.nav{height:78px;display:flex;align-items:center}.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.11em}.brand-symbol{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),#57dcff);color:#02100a}.back-link{margin-left:auto;color:var(--muted)}.payment-page{padding:64px 0 100px}.eyebrow{color:var(--green2);font-size:11px;font-weight:800;letter-spacing:.16em}.page-head h1{font-size:clamp(42px,6vw,66px);letter-spacing:-.05em;margin:8px 0}.page-head p{color:var(--muted)}.loading{margin-top:30px;padding:22px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.018)}.hidden{display:none!important}.payment-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;margin-top:34px}.payment-card,.upload-card,.success-card{padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(17,24,21,.97),rgba(8,11,10,.97))}.section-title{display:flex;gap:13px;align-items:center;margin-bottom:20px}.section-title>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(24,216,143,.08);color:var(--green2);font-weight:800}.section-title small{color:var(--muted)}.section-title h2{margin:2px 0;font-size:24px}.order-box{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.order-box div{padding:14px;background:var(--bg)}.order-box span,.account-details span{display:block;color:var(--muted);font-size:11px}.amount-box{display:flex;justify-content:space-between;align-items:center;padding:20px 0 30px}.amount-box strong{font-size:30px;color:var(--green2)}.payment-details{display:grid;grid-template-columns:220px 1fr;gap:18px}.qr-area{aspect-ratio:1;border:1px dashed rgba(255,255,255,.15);border-radius:16px;display:grid;place-items:center;padding:14px;background:#fff}.qr-area img{width:100%;height:100%;object-fit:contain;display:none}.qr-placeholder{color:#333;text-align:center}.account-details{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.account-details div{padding:13px;background:var(--bg)}.instruction{padding:14px;border-radius:12px;background:rgba(240,180,77,.06);color:#dfd4bf}.upload-zone{display:grid;place-items:center;text-align:center;padding:34px 18px;border:1px dashed rgba(109,245,191,.28);border-radius:16px;background:rgba(24,216,143,.025);cursor:pointer}.upload-zone input{display:none}.upload-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(24,216,143,.1);color:var(--green2);font-size:26px}.upload-zone small{color:var(--muted)}.upload-zone b{margin-top:12px;font-size:12px;color:var(--green2);word-break:break-all}.button{width:100%;min-height:56px;margin-top:16px;border:0;border-radius:14px;background:linear-gradient(180deg,var(--green2),var(--green));color:#03100a;font-weight:800;cursor:pointer}.button:disabled{opacity:.55}.error{color:var(--red);min-height:24px}.secure-note{display:flex;gap:10px;margin-top:18px;padding:14px;border-radius:12px;background:rgba(24,216,143,.04);color:var(--muted);font-size:12px}.secure-note p{margin:0}.success-card{max-width:720px;margin:40px auto;text-align:center}.success-mark{width:70px;height:70px;margin:auto;display:grid;place-items:center;border-radius:50%;background:rgba(24,216,143,.1);color:var(--green2);font-size:38px}.success-card h2{font-size:36px}.success-card p{color:var(--muted)}.success-info{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:20px 0;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}.success-info div{padding:15px;background:var(--bg)}.success-info span{display:block;color:var(--muted);font-size:11px}.link-button{display:inline-flex;width:auto;padding:0 24px;align-items:center}
@media(max-width:850px){.payment-grid{grid-template-columns:1fr}.payment-details{grid-template-columns:1fr 1fr}}@media(max-width:600px){.payment-details,.order-box,.success-info{grid-template-columns:1fr}.payment-page{padding-top:38px}}
