:root { --bg: #0f1115; --panel: #171a21; --field: #1f232c; --line: #2c313c; --text: #e8eaf0; --muted: #9aa1b0;
        --accent: #ff8a1e; --good: #3ddc84; --bad: #ff5c5c; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Segoe UI", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif; font-size: 15px;
  background-image: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,138,30,.15), transparent 70%);
}
body.center { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
main { text-align: center; }
.logo { display: block; width: 84px; height: 84px; margin: 0 auto 22px; }
h1 { font-size: clamp(36px, 8vw, 64px); line-height: 1.05; margin: 0 0 32px; letter-spacing: -1px; }
h1 span { color: var(--accent); }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: #111; text-decoration: none; border: 0; cursor: pointer;
       font: inherit; font-weight: 700; font-size: 18px; padding: 15px 30px; border-radius: 12px; transition: opacity .12s, transform .12s; }
.cta:hover { opacity: .92; transform: translateY(-1px); }
.cta.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.cta svg { width: 22px; height: 22px; }
.cta:disabled { opacity: .5; cursor: default; transform: none; }
.meta { color: var(--muted); font-size: 13px; margin-top: 16px; }
.status { color: var(--muted); font-size: 12px; margin-top: 10px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin: 0 6px 0 0; vertical-align: 1px; }
.dot.ok { background: var(--good); } .dot.bad { background: var(--bad); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; width: min(400px, 100%); text-align: left; }
.card h2 { margin: 0 0 18px; font-size: 22px; }
label { display: block; color: var(--muted); font-size: 13px; margin: 14px 0 6px; }
input, select, textarea { width: 100%; background: var(--field); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
        padding: 10px 12px; font: inherit; outline: none; }
input:focus, select:focus { border-color: var(--accent); }
.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }
.msg { margin-top: 14px; font-size: 14px; min-height: 20px; }
.msg.ok { color: var(--good); } .msg.err { color: var(--bad); }
.card .cta { width: 100%; justify-content: center; margin-top: 20px; }
a { color: var(--accent); }
.back { display: block; text-align: center; margin-top: 16px; color: var(--muted); font-size: 13px; }