:root{
  --brand:#3860be;--brand-dark:#294a98;--brand-soft:#edf2ff;
  --pink:#ec008c;--ink:#1d2433;--muted:#677084;--line:#dfe5ef;
  --paper:#f4f7fb;--surface:#fff;--ok:#078a45;--shadow:0 18px 55px rgba(32,52,92,.12);
  font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;color:var(--ink);background:var(--paper)
}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 10% 10%,#e8eeff 0,transparent 28%),var(--paper)}
button,input{font:inherit}.topbar{height:72px;padding:0 max(20px,calc((100vw - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.brand{text-decoration:none;font-size:1.4rem;font-weight:900;letter-spacing:-.06em}.brand-fast{color:var(--brand)}.brand-print{color:var(--pink)}
.order-pill{display:flex;gap:8px;align-items:center;font-size:.86rem;color:var(--muted)}.order-pill strong{color:var(--ink)}
.shell{max-width:1120px;margin:auto;padding:18px 24px 56px}.test-banner{display:flex;align-items:center;justify-content:center;gap:8px;color:#755410;font-size:.84rem;background:#fff8dd;border:1px solid #f4dfa1;border-radius:10px;padding:9px 14px}.test-dot{width:7px;height:7px;border-radius:50%;background:#d59600}
.steps{max-width:620px;margin:28px auto 34px;display:flex;align-items:center}.steps i{height:2px;background:var(--line);flex:1}.step{display:flex;align-items:center;gap:8px;color:#8d96a8;white-space:nowrap}.step span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #cbd2df;background:#fff;font-weight:700}.step b{font-size:.9rem}.step.is-active{color:var(--brand)}.step.is-active span{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 0 0 6px var(--brand-soft)}
.welcome-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:28px;align-items:start}.upload-panel,.order-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.upload-panel{padding:46px}.eyebrow{font-size:.78rem;font-weight:800;color:var(--brand);letter-spacing:.05em}h1{font-size:clamp(1.8rem,4vw,2.75rem);line-height:1.18;margin:10px 0 10px;letter-spacing:-.035em}p.intro{font-size:1.04rem;line-height:1.7;color:var(--muted);margin:0 0 28px;max-width:580px}
.dropzone{width:100%;min-height:268px;border:2px dashed #a9b9dd;border-radius:20px;background:linear-gradient(180deg,#f9fbff,#f2f6ff);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);cursor:pointer;padding:26px;transition:.2s}.dropzone:hover,.dropzone:focus-visible{border-color:var(--brand);background:#edf3ff;transform:translateY(-2px);outline:none}.dropzone strong{font-size:1.18rem;color:#fff;background:var(--brand);border-radius:12px;padding:12px 25px;box-shadow:0 8px 18px rgba(56,96,190,.24)}.dropzone small{font-size:.8rem;margin-top:5px}.upload-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:#fff;color:var(--brand);box-shadow:0 8px 24px rgba(56,96,190,.13);margin-bottom:8px}.upload-icon svg{width:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:.86rem}.trust-row b{color:var(--ok);margin-right:4px}.order-card{padding:30px;position:relative;overflow:hidden}.receipt-notch{position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(135deg,var(--paper) 5px,transparent 0) 0 0/10px 10px,linear-gradient(225deg,var(--paper) 5px,transparent 0) 0 0/10px 10px}.order-head{display:flex;justify-content:space-between;gap:16px;align-items:start;padding-bottom:22px;border-bottom:1px dashed #cfd6e2}.order-head span{font-size:.8rem;color:var(--muted)}.order-head h2{font-size:1.2rem;margin:5px 0 0}.paid-badge{padding:6px 10px!important;border-radius:999px;background:#e9f8ef;color:var(--ok)!important;font-weight:700}.order-list{margin:8px 0 20px}.order-list div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid #edf0f5}.order-list dt{color:var(--muted);font-size:.88rem}.order-list dd{margin:0;text-align:right;font-weight:700;font-size:.9rem}.order-note{display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft);color:#445271;border-radius:13px;padding:13px;font-size:.82rem;line-height:1.55}.order-note svg{width:18px;flex:0 0 auto;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222a38;color:white;padding:12px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);z-index:50;font-size:.9rem}
@media(max-width:760px){.topbar{height:62px;padding:0 18px}.order-pill span{display:none}.shell{padding:12px 16px 40px}.test-banner{font-size:.75rem}.steps{margin:23px 6px 28px}.step{gap:5px}.step b{font-size:.74rem}.step span{width:30px;height:30px}.welcome-grid{grid-template-columns:1fr}.upload-panel{padding:26px 20px}.dropzone{min-height:235px}.order-card{padding:25px 20px}.trust-row{gap:10px 16px}}
@media(max-width:420px){.step b{display:none}.steps{max-width:260px}.order-pill{font-size:.78rem}h1{font-size:1.9rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}