:root{
  --night:#0A1330; --deep:#111C42; --panel:#16234F; --line:#2A3A6B;
  --gold:#E8B84B; --jade:#4ADEC0; --mist:#A8B4D4; --paper:#F5F2E8; --clay:#D9705A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--night);color:var(--paper);
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  line-height:1.6;font-size:15px;padding-bottom:80px;-webkit-text-size-adjust:100%}
h1,h2,h3,.disp{font-family:"Bai Jamjuree","IBM Plex Sans Thai",sans-serif}
.wrap{max-width:780px;margin:0 auto;padding:0 16px}
a{color:var(--jade)}

header{border-bottom:1px solid var(--line);padding:16px 0;margin-bottom:18px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-family:"Bai Jamjuree";font-weight:700;font-size:1.02rem;line-height:1.3}
.brand small{display:block;font-family:"IBM Plex Sans Thai";font-weight:400;
  font-size:.68rem;color:var(--mist)}
.who{text-align:right;font-size:.75rem;color:var(--mist)}
.who b{display:block;color:var(--gold);font-size:.9rem}

button{font-family:inherit;cursor:pointer;border-radius:3px;border:none}
button:focus-visible,input:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
.btn{background:var(--gold);color:#0A1330;font-weight:600;font-size:.95rem;padding:11px 22px}
.btn:hover:not(:disabled){background:#f0c866}
.btn-o{background:transparent;color:var(--gold);border:1px solid var(--gold);
  font-weight:600;font-size:.88rem;padding:10px 18px}
.btn-o:hover:not(:disabled){background:rgba(232,184,75,.12)}
.btn-s{background:transparent;color:var(--mist);border:1px solid var(--line);
  font-size:.8rem;padding:7px 14px}
.btn-s:hover{color:var(--paper)}

input,select{font-family:inherit;font-size:16px;width:100%;padding:11px 12px;
  background:var(--deep);border:1px solid var(--line);color:var(--paper);border-radius:3px}
input:focus,select:focus{outline:2px solid var(--gold);outline-offset:1px}
label{display:block;font-size:.78rem;color:var(--mist);margin:14px 0 5px}

nav.tabs{display:flex;gap:4px;margin-bottom:22px;border-bottom:1px solid var(--line);
  overflow-x:auto}
nav.tabs button{background:none;color:var(--mist);font-size:.89rem;padding:10px 13px;
  border-bottom:2px solid transparent;border-radius:0;white-space:nowrap}
nav.tabs button.on{color:var(--gold);border-bottom-color:var(--gold)}
.view{display:none}.view.on{display:block}

.notice{border-radius:4px;padding:12px 14px;font-size:.82rem;margin-bottom:20px}
.n-warn{background:rgba(217,112,90,.1);border:1px solid var(--clay);color:#F3D9D2}
.n-info{background:rgba(74,222,192,.08);border:1px solid var(--jade);color:#CDEFE8}
.n-gold{background:rgba(232,184,75,.08);border:1px solid var(--gold);color:#F5E6C4}
.notice b{display:block;margin-bottom:3px}

.box{background:var(--deep);border:1px solid var(--line);border-radius:6px;padding:15px}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.stat .n{font-family:"Bai Jamjuree";font-size:1.5rem;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.2}
.stat .l{font-size:.74rem;color:var(--mist)}

h2.sec{font-size:1rem;margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.note{font-size:.8rem;color:var(--mist);margin-top:10px;line-height:1.7}
.mono{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}

.led{background:var(--deep);border:1px solid var(--line);border-radius:6px;
  max-height:420px;overflow-y:auto}
.led .r{padding:11px 14px;border-bottom:1px solid var(--line);font-size:.83rem;
  display:flex;justify-content:space-between;gap:12px}
.led .r:last-child{border-bottom:none}
.led .r time{color:var(--mist);font-size:.72rem;white-space:nowrap}
.hash{font-family:ui-monospace,monospace;font-size:.67rem;color:var(--jade);
  word-break:break-all}
.empty{padding:32px 16px;text-align:center;color:var(--mist);font-size:.86rem}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--gold);color:var(--paper);
  padding:12px 20px;border-radius:4px;font-size:.88rem;z-index:99;
  box-shadow:0 8px 24px rgba(0,0,0,.55);max-width:92vw;text-align:center}
.toast.bad{border-color:var(--clay)}

.gate{max-width:410px;margin:34px auto;background:var(--deep);
  border:1px solid var(--line);border-radius:8px;padding:26px}
.gate h1{font-size:1.25rem;margin-bottom:5px}
.gate p{font-size:.84rem;color:var(--mist)}
.gate .btn{width:100%;margin-top:20px}
.err{color:var(--clay);font-size:.8rem;margin-top:10px;min-height:1.2em}
.swap{background:none;color:var(--mist);font-size:.8rem;margin-top:14px;
  text-decoration:underline;width:100%;padding:4px}

.loading{padding:40px;text-align:center;color:var(--mist);font-size:.9rem}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- logo header ---------- */
.masthead{text-align:center;padding:26px 0 20px}
.masthead img{width:118px;height:118px;border-radius:10px;display:block;margin:0 auto 14px;
  box-shadow:0 6px 26px rgba(0,0,0,.5)}
.masthead .name{font-family:"Bai Jamjuree";font-size:1.32rem;font-weight:700;
  letter-spacing:.01em;line-height:1.25}
.masthead .tag{font-size:.8rem;color:var(--gold);margin-top:7px;line-height:1.5}
.masthead.small img{width:56px;height:56px;margin:0}
header .logo{width:42px;height:42px;border-radius:7px;flex:0 0 auto}
.hleft{display:flex;align-items:center;gap:11px;min-width:0}

/* ---------- language switch ---------- */
.langsw{display:flex;gap:0;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  flex:0 0 auto}
.lang-btn{background:transparent;color:var(--mist);font-size:.78rem;padding:6px 13px;
  border-radius:0;font-family:inherit}
.lang-btn.on{background:var(--gold);color:#0A1330;font-weight:600}
.lang-btn:not(.on):hover{color:var(--paper)}
.gate .langsw{margin:0 auto 18px;width:fit-content}

.tb-home{font-size:.78rem;color:var(--gold);text-decoration:none;
  border:1px solid var(--line);border-radius:4px;padding:6px 12px;white-space:nowrap}
.tb-home:hover{background:rgba(232,184,75,.12)}
.gate .tb-home{display:block;text-align:center;margin:0 auto 10px;width:fit-content}