/* หน้าเข้าสู่ระบบและหน้าติดตั้ง */
:root{--bg:#f3f5f2;--panel:#fff;--ink:#15221c;--muted:#56665e;--line:#dce3dd;--line2:#c6d0c8;--band:#0d5642;--on-band:#f1f6f2;--brand:#0e6a50;--on-brand:#fff;--ok:#287548;--ok-soft:#dff0e5;--warn:#9a640a;--warn-soft:#f7ebd0;--bad:#ad3429;--bad-soft:#f7e0dc;--field:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#0e1412;--panel:#151d1a;--ink:#e4ebe6;--muted:#a0afa7;--line:#26322d;--line2:#33423b;--band:#0b3a2d;--on-band:#eef4f0;--brand:#58bf95;--on-brand:#06140f;--ok:#6cc48e;--ok-soft:#16301f;--warn:#e1b45a;--warn-soft:#30260f;--bad:#ef7f73;--bad-soft:#3a1c19;--field:#0f1714;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans Thai','Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif;font-size:15px;line-height:1.6}
.inner{max-width:880px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mast{background:var(--band);color:var(--on-band);padding-block:20px 18px}
.mast .org{font-size:13px;opacity:.8}
.mast .ttl{font-family:'Trirong','Noto Serif Thai',Georgia,serif;font-weight:600;font-size:clamp(20px,3vw,26px)}
main{padding-block:28px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.card.narrow{max-width:460px;margin:0 auto}
h1{font-family:'Trirong','Noto Serif Thai',Georgia,serif;font-weight:600;font-size:24px;margin:0 0 6px}
h2{font-size:16px;margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.muted{color:var(--muted)} .small{font-size:13px}
label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:12px 0 4px}
label.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink);font-weight:400}
label.chk input{width:18px;height:18px;margin-top:3px;flex:0 0 auto}
input,textarea{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:8px;padding:9px 11px;width:100%}
input:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4px 16px}
.grid label{margin-top:8px}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);padding:10px 18px;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.btn:disabled{opacity:.5;cursor:default}
.btn.block{width:100%;margin-top:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row form{margin:0}
.alert{border-radius:8px;padding:10px 14px;margin:14px 0;font-size:14px}
.alert.bad{background:var(--bad-soft);color:var(--bad)}
.alert.warn{background:var(--warn-soft);color:var(--ink)}
.checks{list-style:none;margin:14px 0;padding:0;display:grid;gap:6px}
.checks li{display:flex;gap:10px;align-items:baseline;font-size:14px}
.checks li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--muted);transform:translateY(-1px)}
.checks li.ok::before{background:var(--ok)} .checks li.warn::before{background:var(--warn)} .checks li.bad::before{background:var(--bad)}
.checks li.bad{color:var(--bad)}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
textarea.mono{white-space:pre;overflow:auto}
.foot{font-size:12px;color:var(--muted);padding-block:0 28px;text-align:center}