:root{--bg:#f4f5fa;--sf:#fff;--sf2:#eef0f7;--ink:#14151c;--mu:#6a6f85;--ln:#e1e4ef;--ac:#5b1fe8;--red:#f2352f;--gr:#0bbf6a;color-scheme:light}
[data-theme=dark]{--bg:#0c0d13;--sf:#151722;--sf2:#1d2030;--ink:#eceef8;--mu:#8b90a8;--ln:#272b3d;--ac:#9a7bff;color-scheme:dark}
*{box-sizing:border-box;margin:0}
body{font:400 15px/1.55 system-ui,-apple-system,'Segoe UI','Noto Sans Thai','Sarabun',Tahoma,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--ac)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px clamp(14px,3vw,32px);border-bottom:1px solid var(--ln);background:var(--sf)}
.brand img{display:block;height:36px;width:auto}[data-theme=dark] .brand img{filter:invert(1) hue-rotate(180deg)}
nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}nav a{text-decoration:none;color:var(--ink);font-weight:500}nav form{display:inline}
.box,.wide{width:100%;max-width:420px;margin:28px auto;padding:0 16px}.wide{max-width:1000px}
.card{background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:20px;margin-bottom:16px;overflow-x:auto}
h1{font-size:24px;margin-bottom:6px}h2{font-size:17px;margin-bottom:10px}.mu{color:var(--mu);font-size:14px}
label{display:block;font-weight:500;font-size:14px;margin-bottom:12px}
input,select{display:block;width:100%;margin-top:5px;font:inherit;color:var(--ink);background:var(--sf2);border:1px solid transparent;border-radius:10px;padding:9px 12px}
input:focus,select:focus{outline:none;border-color:var(--ac)}
small{display:block;color:var(--mu);font-weight:400;font-size:12px;margin-top:4px}
.btn,button{font:inherit;font-weight:600;color:#fff;background:var(--ac);border:0;border-radius:99px;padding:8px 18px;cursor:pointer;text-decoration:none;display:inline-block}
[data-theme=dark] .btn,[data-theme=dark] button:not(.lnk):not(.dg):not(.sm2){color:#120a36}
.btn.sm{padding:5px 14px;font-size:14px}.btn.full{width:100%;margin-top:6px;border-radius:12px;padding:11px}
button.lnk{background:none;color:var(--ink);padding:0;font-weight:500;border-radius:0}
button.sm2{padding:3px 10px;font-size:12px;background:var(--sf2);color:var(--ink)}button.dg{padding:3px 10px;font-size:12px;background:var(--red);color:#fff}
.msg{padding:10px 14px;border-radius:12px;margin-bottom:14px;font-size:14px;background:var(--sf2)}.msg.err{background:#fde8e7;color:#8a1b17}.msg.ok{background:#dcf7ea;color:#0a6b3c}
[data-theme=dark] .msg.err{background:#3a1613;color:#ffb4af}[data-theme=dark] .msg.ok{background:#0f3324;color:#9be8c3}
.tabs{display:flex;gap:6px;margin-bottom:16px}.tabs a{flex:1;text-align:center;padding:8px;border-radius:99px;background:var(--sf2);color:var(--ink);text-decoration:none;font-weight:500}.tabs a.on{background:var(--ac);color:#fff}
[data-theme=dark] .tabs a.on{color:#120a36}
.hp{position:absolute;left:-9999px;opacity:0}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--ln);white-space:nowrap;vertical-align:middle}th{color:var(--mu);font-weight:500;font-size:12px}
td form{display:inline}td form+form{margin-left:4px}td input{display:inline-block;width:78px;margin:0;padding:3px 8px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.st{background:var(--sf);border:1px solid var(--ln);border-radius:14px;padding:14px}.st b{display:block;font-size:24px}.st span{color:var(--mu);font-size:13px}
.key{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}code,pre{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code.k{background:var(--sf2);padding:6px 10px;border-radius:8px;word-break:break-all;user-select:all}
pre{background:var(--sf2);padding:12px;border-radius:10px;overflow-x:auto;margin:8px 0}
.tag{font-size:11px;padding:1px 8px;border-radius:99px;background:var(--sf2);color:var(--mu)}.tag.on{background:var(--gr);color:#fff}.tag.off{background:var(--red);color:#fff}
.pg{display:flex;gap:8px;justify-content:center;margin-top:10px}.ft{margin-top:auto;padding:18px;text-align:center;color:var(--mu);font-size:13px}
@media(max-width:560px){.row{grid-template-columns:1fr}}