/* หลังบ้าน Super Conductor — พื้นสว่าง เรียบ ใช้บนมือถือได้ (ไม่มี dark mode · ไม่โหลดฟอนต์จากภายนอก) */
:root { color-scheme: light; --bg:#f6f8fc; --card:#fff; --ink:#1d2433; --muted:#667085; --line:#e3e8f0; --accent:#2a4d9b; --ok:#1b7f4b; --okbg:#e3f5ea; --off:#a33b3b; --offbg:#fbe8e8; --warn:#fff6dd; --warnline:#f0dca0; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: system-ui, -apple-system, "Sarabun", "Noto Sans Thai", sans-serif; line-height:1.6; }
[hidden] { display: none !important; }
main { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
h1 { font-size: 1.35rem; margin: 8px 0 12px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
p { margin: 0 0 12px; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .9rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; }

.topbar { background:var(--card); border-bottom:1px solid var(--line); }
.bar-inner { max-width: 760px; margin: 0 auto; padding: 10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.brand { font-weight: 700; }
.nav { display:flex; flex-wrap:wrap; gap:4px 14px; flex:1; }
.nav-link { text-decoration:none; color:var(--muted); padding:4px 2px; border-bottom:2px solid transparent; }
.nav-link[aria-current="page"] { color:var(--ink); border-bottom-color:var(--accent); font-weight:600; }

button, .btn { font: inherit; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; text-decoration:none; display:inline-block; min-height:44px; }
button.small, .btn.small { padding: 6px 12px; min-height: 36px; font-size:.9rem; }
button.primary, .btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--off); border-color:#e3b9b9; }
button:disabled { opacity:.55; cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #9db6ee; outline-offset: 1px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.stack { display:flex; flex-direction:column; gap:10px; }

label.field { display:block; font-weight:600; margin: 0 0 6px; }
input[type=text], input[type=password], input[type=url], select, textarea { width:100%; font: inherit; padding: 10px 12px; border:1px solid #c9d2e0; border-radius:10px; background:#fff; color:var(--ink); }
textarea { min-height: 140px; resize: vertical; }
.hint { color:var(--muted); font-size:.9rem; margin: 6px 0 0; }
.switch-row { padding: 12px 0; border-top:1px solid var(--line); }
.switch-row:first-of-type { border-top:0; }
.switch-row .title { font-weight:600; }
.check { display:flex; align-items:center; gap:10px; min-height:44px; }
.check input { width:20px; height:20px; }

.alert { border-radius:10px; padding:10px 14px; margin: 0 0 14px; border:1px solid var(--line); }
.alert.error { background:var(--offbg); border-color:#e9c3c3; color:#7a2a2a; }
.alert.ok { background:var(--okbg); border-color:#b9e0c8; color:#14603a; }
.alert.info { background:#eef3fc; border-color:#d3def5; }
.note { background:var(--warn); border:1px solid var(--warnline); border-radius:10px; padding:10px 14px; margin:0 0 10px; font-size:.95rem; }

.badge { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.82rem; font-weight:600; }
.badge.on { background:var(--okbg); color:var(--ok); }
.badge.off { background:var(--offbg); color:var(--off); }

.check-list { list-style:none; margin:0; padding:0; }
.check-item { display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.check-item:first-child { border-top:0; }
.mark { flex:none; width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.mark.done { background:var(--okbg); color:var(--ok); }
.mark.todo { background:#eef1f6; color:var(--muted); }
.check-body { display:flex; flex-direction:column; }
.check-label { font-weight:600; }
.check-note { color:var(--muted); font-size:.88rem; }

.mcp { display:flex; gap:8px; flex-wrap:wrap; }
.mcp input { flex:1; min-width: 200px; font-family: ui-monospace, Menlo, monospace; font-size:.9rem; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.93rem; min-width: 560px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:.85rem; }
td.yes { color:var(--ok); } td.no { color:var(--muted); }
.results { list-style:none; margin:12px 0 0; padding:0; }
.result { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.terms-text { white-space:pre-wrap; overflow-wrap:anywhere; max-height:320px; overflow-y:auto; border:1px solid var(--line); border-radius:10px; padding:12px; background:#fbfcfe; margin-bottom:12px; }
.login { max-width: 440px; margin: 40px auto 0; }
.login .btn-block { width:100%; margin-bottom:10px; }
.mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mb0 { margin-bottom: 0; }
/* จอแคบ: แถวบน = ชื่อระบบ + ปุ่มออก · แถวล่าง = เมนูแถวเดียว (เลื่อนแนวนอนได้ถ้าไม่พอ) */
@media (max-width: 640px) {
  .brand { margin-right: auto; }
  .nav { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 4px 16px; -webkit-overflow-scrolling: touch; }
  .nav-link { flex: none; white-space: nowrap; }
}