:root{--bg: #0F172A;--bg-2: #0b1120;--surface: #1E293B;--surface-2: #223047;--border: #2b3a55;--text: #F8FAFC;--muted: #94A3B8;--muted-2: #64748b;--cta: #22C55E;--cta-600: #16a34a;--cta-glow: rgba(34, 197, 94, .35);--accent: #38bdf8;--danger: #f87171;--radius: 14px;--radius-sm: 10px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--maxw: 960px;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(1100px 600px at 80% -10%,rgba(56,189,248,.1),transparent 60%),radial-gradient(900px 600px at 10% 0%,rgba(34,197,94,.1),transparent 55%),var(--bg);color:var(--text);font-family:Noto Sans Thai,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100dvh}h1,h2,h3,.display{font-family:Sora,Noto Sans Thai,sans-serif;letter-spacing:-.01em}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}.brand{font-family:Sora,sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em}.brand .on{color:var(--cta);text-shadow:0 0 12px var(--cta-glow)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:600;font-size:16px;padding:12px 18px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;min-height:46px;-webkit-user-select:none;user-select:none}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--cta);color:#04210f;box-shadow:0 0 #22c55e00}.btn-primary:not(:disabled):hover{background:var(--cta-600);box-shadow:0 6px 22px var(--cta-glow)}.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}.btn-ghost:not(:disabled):hover{border-color:var(--muted);background:#ffffff08}.btn-block{width:100%}.card{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent),var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}label{font-size:13px;color:var(--muted);font-weight:600}input,textarea,select{width:100%;font-family:inherit;font-size:16px;color:var(--text);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s}input:focus,textarea:focus,select:focus{border-color:var(--cta);box-shadow:0 0 0 3px var(--cta-glow)}textarea{resize:vertical;min-height:92px;line-height:1.55}.muted{color:var(--muted)}.err{color:var(--danger);font-size:14px}.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;border:1px solid var(--border);background:#7f7f7f1a;color:var(--muted)}.dot{width:8px;height:8px;border-radius:999px;background:var(--muted-2);flex:0 0 auto}.dot.on{background:var(--cta);box-shadow:0 0 8px var(--cta-glow)}.dot.off{background:var(--danger)}.dot.wait{background:#eab308}.hublink{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:9px;font-size:12px;color:var(--muted);background:#7f7f7f1f;border:1px solid rgba(127,127,127,.22);transition:color .2s,box-shadow .2s,border-color .2s}.hublink:hover{color:var(--accent);border-color:var(--accent);box-shadow:0 0 14px #38bdf840}.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.25);border-top-color:#04210f;border-radius:999px;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition:none!important}}