:root{
  --bg:#0d0f14; --bg-2:#141821; --line:#232938; 
  --txt:#e7eaf0; --muted:#9aa4b8; --accent:#ff8a1f; --accent-2:#ffb55c;
  --good:#3ddc84; --bad:#ff5d5d; --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); min-height:100vh;
  font-family:"Segoe UI","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; display:flex; flex-direction:column;
}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%; max-width:1040px; margin:0 auto; padding:0 16px}
main.wrap{flex:1; padding-top:28px; padding-bottom:48px}

.site-head{border-bottom:1px solid var(--line); background:rgba(20,24,33,.85); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:62px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px; color:var(--txt); font-weight:700; font-size:18px}
.brand:hover{text-decoration:none}
.brand-mark{background:linear-gradient(135deg,var(--accent),#ff5f1f); color:#1a1205; width:34px; height:34px;
  border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:14px; letter-spacing:.5px}
.nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.nav a{color:var(--muted); font-size:15px}
.nav a:hover{color:var(--txt); text-decoration:none}
.inline-form{display:inline}
.linkish{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:0}
.linkish:hover{color:var(--txt)}

.hero{background:linear-gradient(160deg,#1b2130,#0f1219); border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px; margin-bottom:26px}
.hero h1{margin:0 0 6px; font-size:34px; letter-spacing:.5px}
.hero p{margin:0; color:var(--muted)}
.hero .cta{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}

.btn{display:inline-block; background:var(--accent); color:#1a1205; border:0; border-radius:9px;
  padding:11px 20px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit}
.btn:hover{background:var(--accent-2); text-decoration:none}
.btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--line)}
.btn-ghost:hover{background:var(--bg-2); color:var(--txt)}
.btn-sm{padding:7px 14px; font-size:14px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

.grid{display:grid; gap:14px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px}
.card h2{margin:0 0 14px; font-size:19px}
.stat{text-align:center}
.stat .v{font-size:26px; font-weight:800; color:var(--accent-2); display:block; line-height:1.25}
.stat .k{color:var(--muted); font-size:13px}

table{width:100%; border-collapse:collapse; font-size:15px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
th{color:var(--muted); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.4px}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

.tag{display:inline-block; background:#232938; color:var(--muted); border-radius:6px;
  padding:2px 8px; font-size:12px; font-weight:600}
.tag.on{background:rgba(61,220,132,.15); color:var(--good)}
.tag.off{background:#232938; color:var(--muted)}

.form{max-width:380px; margin:40px auto}
.form .card{padding:26px}
label{display:block; margin-bottom:6px; font-size:14px; color:var(--muted)}
input[type=text],input[type=password]{
  width:100%; background:#0f1219; border:1px solid var(--line); color:var(--txt);
  border-radius:9px; padding:11px 13px; font-size:15px; font-family:inherit; margin-bottom:16px}
input:focus{outline:2px solid var(--accent); outline-offset:0; border-color:transparent}
.alert{border-radius:9px; padding:11px 14px; margin-bottom:16px; font-size:14px}
.alert-bad{background:rgba(255,93,93,.12); border:1px solid rgba(255,93,93,.35); color:#ffb3b3}
.alert-info{background:rgba(255,138,31,.1); border:1px solid rgba(255,138,31,.3); color:var(--accent-2)}
.muted{color:var(--muted)}
.small{font-size:13px}

.site-foot{border-top:1px solid var(--line); color:var(--muted); font-size:13px; padding:18px 0}
.site-foot .dot{margin:0 8px}

@media (max-width:640px){
  .hero h1{font-size:26px}
  .head-inner{min-height:56px}
  table{font-size:14px}
  th,td{padding:8px 6px}
}