:root{--page-background:#f7f7f7;--surface:#ffffff;--surface-soft:#fff5fc;--surface-strong:#ffe0ef;--ink:#111111;--ink-muted:#666666;--ink-subtle:#9c9a9f;--line:#f0e4ec;--line-strong:#ffd1e5;--primary:#ff4391;--primary-hot:#ff184c;--primary-deep:#aa0046;--primary-soft:#fff0f8;--accent:#ffc800;--success:#19a93f;--success-soft:#edfaed;--danger:#cf285e;--shadow-card:0 10px 26px rgba(162, 167, 176, 0.18);--shadow-glow:0 18px 44px rgba(255, 67, 145, 0.24);--shadow-modal:0 26px 70px rgba(79, 24, 51, 0.28);--radius-card:16px;--radius-field:16px;--font-sans:"Kanit","Noto Sans Thai","Segoe UI",Arial,sans-serif;--transition:180ms ease}*,::after,::before{box-sizing:border-box}html{min-width:320px;background:var(--page-background);scroll-behavior:smooth}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden;color:var(--ink);background:radial-gradient(circle at 18% 0,rgba(255,67,145,.14),transparent 32rem),radial-gradient(circle at 88% 12%,rgba(255,200,0,.12),transparent 26rem),var(--page-background);font-family:var(--font-sans);letter-spacing:0}body.panel-open{overflow:hidden}button,input,textarea{font:inherit;letter-spacing:0}button{border:0;cursor:pointer}input,textarea{width:100%;border:0;color:var(--ink);background:0 0}input:focus,textarea:focus{outline:0}input::placeholder,textarea::placeholder{color:var(--ink-subtle)}textarea{min-height:132px;resize:none}img,svg{display:block}[hidden]{display:none!important}.app-shell{position:relative;width:min(100%,750px);min-height:100vh;margin:0 auto;overflow:hidden;background:var(--page-background)}.screen-content{position:relative;z-index:1;display:flex;width:100%;min-height:100vh;flex-direction:column;padding:0 max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.hero-section{position:relative;min-height:322px;padding:max(18px,env(safe-area-inset-top)) 16px 88px;margin:0 -16px -58px;overflow:hidden;color:#fff;background:radial-gradient(circle at 8% 8%,rgba(255,255,255,.28),transparent 6.5rem),radial-gradient(circle at 78% 84%,rgba(255,255,255,.42),transparent 9rem),linear-gradient(158deg,#ff2f82 0,#ff4391 48%,#f7b 100%);border-radius:0 0 26px 26px}.hero-section::after,.hero-section::before{position:absolute;pointer-events:none;content:""}.hero-section::before{right:-118px;bottom:-142px;width:340px;height:220px;border-radius:50%;background:rgba(255,255,255,.36);filter:blur(3px)}.hero-section::after{right:-54px;bottom:-90px;width:250px;height:160px;border-radius:50%;background:rgba(255,255,255,.28)}.hero-topbar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;min-height:54px}.brand-mark-shell{display:grid;width:54px;height:54px;flex:0 0 auto;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:16px;background:#fff;box-shadow:0 12px 26px rgba(178,0,72,.2)}.brand-mark{width:38px;height:41px;object-fit:contain}.brand-copy{display:grid;gap:1px;min-width:0}.brand-copy strong{font-size:17px;font-weight:600;line-height:18px}.brand-copy span{max-width:160px;overflow:hidden;opacity:.84;font-size:10px;line-height:12px;text-overflow:ellipsis;white-space:nowrap}.support-pill{margin-left:auto;padding:7px 13px;border:1px solid rgba(255,255,255,.36);border-radius:999px;color:#fff;background:rgba(209,28,103,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);font-size:12px;font-weight:600;line-height:14px}.hero-copy{position:relative;z-index:2;width:min(68%,260px);padding-top:26px}.hero-kicker{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:6px 12px;margin:0 0 14px;border-radius:999px;color:#fff;background:rgba(209,28,103,.32);font-size:12px;font-weight:500;line-height:14px}.hero-kicker span{color:var(--accent)}.dialog-copy h2,.flow-card h2,.hero-copy h1,.sheet-copy h2,.success-card h2{margin:0;color:var(--ink);font-weight:600;letter-spacing:0}.hero-copy h1{color:#fff;font-size:clamp(30px, 8vw, 40px);font-style:italic;line-height:1.08}.dialog-copy p,.flow-card p,.helper-text,.hero-copy p:not(.hero-kicker),.sheet-copy p,.success-card p{margin:0;color:var(--ink-muted);font-size:14px;font-weight:400;line-height:20px}.hero-copy p:not(.hero-kicker){margin-top:10px;color:rgba(255,255,255,.86);font-size:13px;line-height:18px}.hero-art{position:absolute;z-index:1;right:-62px;bottom:16px;width:210px;height:210px;pointer-events:none}.hero-glow,.hero-lock{position:absolute;max-width:none}.hero-glow{inset:4px 10px auto auto;width:178px;height:184px;opacity:.62;mix-blend-mode:screen;filter:hue-rotate(82deg) saturate(1.55)}.hero-lock{top:20px;right:28px;width:164px;height:164px;object-fit:contain;filter:hue-rotate(82deg) saturate(1.28) drop-shadow(0 20px 22px rgba(169, 0, 78, .24))}.spark{position:absolute;z-index:3;width:12px;height:12px;color:#fff;transform:rotate(45deg)}.spark::after,.spark::before{position:absolute;inset:0;margin:auto;border-radius:999px;background:currentColor;content:""}.spark::before{width:4px;height:12px}.spark::after{width:12px;height:4px}.spark-one{top:82px;right:40px;color:var(--accent)}.spark-two{right:150px;bottom:82px;width:9px;height:9px}.spark-three{right:110px;bottom:44px;width:7px;height:7px;opacity:.8}.flow-card,.success-card,.trust-card{position:relative;z-index:2;border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-card)}.flow-card{display:flex;flex-direction:column;gap:18px;padding:0 16px 18px;overflow:hidden}.flow-card::before{position:absolute;inset:36px 10px auto;height:10px;border-radius:0 0 999px 999px;background:#ffd6e7;content:""}.card-ribbon{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;margin:0 -16px;color:#fff;background:linear-gradient(90deg,var(--primary-hot),#ff56b1);font-size:14px;font-weight:600;line-height:18px}.card-ribbon span{color:var(--accent);font-size:13px}.card-section{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px}.card-section-alert{padding:14px 0 2px}.card-section.compact{display:block;padding:14px 14px 16px;border-radius:14px;background:var(--surface-soft)}.section-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:var(--primary-deep);background:#ffe3f0;box-shadow:inset 0 0 0 1px rgba(255,67,145,.18);font-size:22px;font-weight:700;line-height:1}.dialog-copy h2,.flow-card h2,.sheet-copy h2,.success-card h2{font-size:18px;line-height:26px}.flow-card p{margin-top:6px}.rule-list{display:grid;gap:10px;padding:0;margin:12px 0 0;list-style:none}.rule-list li{position:relative;min-height:36px;padding:9px 10px 9px 38px;border-radius:12px;color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1px rgba(255,67,145,.08);font-size:13px;font-weight:400;line-height:18px}.rule-list li::before{position:absolute;top:11px;left:14px;width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px #ffe4f0;content:""}.rule-list li::after{position:absolute;top:14px;left:18px;width:5px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;content:"";transform:rotate(45deg)}.step-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.step-strip span{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:5px 6px;border-radius:999px;color:var(--primary-deep);background:#fff1f8;font-size:12px;font-weight:600;line-height:14px;text-align:center}.step-strip b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;color:#fff;background:var(--primary);font-size:11px;line-height:1}.ghost-button,.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font-weight:600;line-height:18px;text-align:center;transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition),background-color var(--transition)}.primary-button{color:#fff;background:linear-gradient(90deg,var(--primary-hot),#ff56b1);box-shadow:var(--shadow-glow);font-size:16px}.ghost-button:hover,.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.close-button:focus-visible,.ghost-button:focus-visible,.primary-button:focus-visible,.secondary-button:focus-visible{outline:rgba(255,67,145,.28) solid 3px;outline-offset:2px}.ghost-button:disabled,.primary-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.45;transform:none;box-shadow:none}.secondary-button{min-width:96px;padding:0 14px;color:var(--primary-deep);background:#ffe4f0;box-shadow:none;font-size:14px}.ghost-button{padding:0 18px;color:var(--primary);background:#fff;box-shadow:inset 0 0 0 1px var(--primary);font-size:14px}.full-width{width:100%}.success-card{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;margin-top:14px;padding:16px;border:1px solid rgba(25,169,63,.16);background:#f5fff8}.success-icon,.trust-icon{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:var(--success);background:#dcf5e9}.success-icon{width:36px;height:36px}.success-icon svg,.trust-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.success-icon svg{width:22px;height:22px}.trust-card{display:flex;align-items:center;gap:9px;margin-top:14px;padding:13px 14px;color:#aab0c2;background:0 0;box-shadow:none}.trust-icon{width:22px;height:22px;flex:0 0 auto;color:#aab0c2;background:0 0}.trust-icon svg{width:18px;height:18px}.trust-card p{margin:0;color:#aab0c2;font-size:12px;line-height:16px}.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px 16px max(24px,env(safe-area-inset-bottom))}.overlay-sheet{align-items:flex-end;padding:0}.backdrop{position:absolute;inset:0;background:rgba(48,12,32,.46);backdrop-filter:blur(10px)}.dialog-card,.sheet-card{position:relative;z-index:1;width:min(100%,360px);border:1px solid rgba(255,255,255,.6);border-radius:24px;background:var(--surface);box-shadow:var(--shadow-modal)}.dialog-card{max-height:min(92vh,660px);overflow-y:auto;padding:26px 16px 20px}.dialog-card::before,.sheet-card::before{position:absolute;inset:0 0 auto;height:7px;border-radius:inherit;background:linear-gradient(90deg,var(--primary-hot),#ff56b1);content:""}.sheet-card{width:min(100%,430px);padding:16px 18px calc(22px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0}.sheet-handle{width:46px;height:5px;margin:0 auto 18px;border-radius:999px;background:#ffd5e7}.close-button{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff1f8}.close-button span{position:absolute;width:16px;height:2px;border-radius:999px;background:var(--primary-deep)}.close-button span:first-child{transform:rotate(45deg)}.close-button span:last-child{transform:rotate(-45deg)}.dialog-kicker{display:inline-flex;align-items:center;min-height:24px;padding:4px 10px;margin:0 0 10px;border-radius:999px;color:var(--primary-deep);background:#fff1f8;font-size:12px;font-weight:600;line-height:14px}.dialog-copy,.sheet-copy{padding-right:36px}.dialog-copy p:not(.dialog-kicker),.sheet-copy p:not(.dialog-kicker){margin-top:7px}.dialog-form{display:grid;gap:17px;margin-top:22px}.field{display:grid;gap:8px}.field>span{color:var(--ink);font-size:14px;font-weight:600;line-height:20px}.field textarea,.field-control{min-height:54px;border:1px solid transparent;border-radius:var(--radius-field);background:#fff5fc;color:var(--ink);font-size:16px;font-weight:400;line-height:22px}.field textarea:focus,.field-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,67,145,.13)}.field-control{min-width:0;padding:0 16px}.field textarea{padding:14px 16px}.helper-text{margin-top:-7px;color:var(--ink-subtle);font-size:12px;line-height:18px}.counter-row{display:flex;justify-content:flex-end;margin-top:8px;color:var(--ink-subtle);font-size:12px;line-height:18px}.sheet-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:12px;margin-top:18px}.toast-stack{position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;z-index:40;display:grid;gap:10px;width:min(calc(100% - 32px),328px);transform:translateX(-50%)}.toast{padding:12px 14px;border:1px solid rgba(255,255,255,.55);border-radius:14px;color:#fff;background:rgba(82,13,47,.95);box-shadow:var(--shadow-modal);font-size:13px;line-height:18px;animation:180ms toast-enter}.toast.is-success{color:#11632b;background:#dcf5e9}.toast.is-error{color:#741a3d;background:#ffd9e7}.toast.is-loading{background:rgba(255,67,145,.96)}@keyframes toast-enter{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width:359px){.hero-section{min-height:336px}.hero-copy{width:72%}.hero-copy h1{font-size:28px}.hero-art{right:-82px;bottom:8px;transform:scale(.88);transform-origin:right bottom}.flow-card{padding-inline:14px}.card-ribbon{margin-inline:-14px}.sheet-actions{grid-template-columns:1fr}}@media (min-width:760px){body{display:flex;align-items:center;justify-content:center;padding:24px 0}.app-shell{min-height:0;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 80px rgba(95,35,66,.12)}.screen-content{display:grid;min-height:640px;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);grid-template-areas:"hero flow" "hero success" "hero trust";align-content:center;gap:14px 18px;padding:18px}.hero-section{grid-area:hero;min-height:604px;padding:24px 20px;margin:0;border-radius:20px}.hero-copy{width:100%;padding-top:92px}.hero-copy h1{font-size:42px}.hero-copy p:not(.hero-kicker){max-width:250px}.hero-art{right:-78px;bottom:54px;width:250px;height:250px}.hero-lock{width:208px;height:208px}.flow-card{grid-area:flow;align-self:end}.success-card{grid-area:success}.trust-card{grid-area:trust;align-self:start}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,::after,::before{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:1ms!important}}