/* ═══ หน้าตากลางของทุกหน้าในระบบใหม่ · แก้ที่นี่ที่เดียวเปลี่ยนทั้งระบบ ═══ */
:root{
  --bg:#f4f5f7; --surface:#fff; --surface2:#fafbfc; --ink:#101828; --ink2:#475467; --ink3:#98a2b3;
  --line:#e4e7ec; --line2:#eef0f3; --brand:#0b1633; --onbrand:#fff; --accent:#c8102e;
  --ok:#067647; --okbg:#ecfdf3; --warn:#b54708; --warnbg:#fffaeb; --bad:#b42318; --badbg:#fef3f2;
  --r:9px; --sh:0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1116; --surface:#161b23; --surface2:#1b212b; --ink:#e6e9ef; --ink2:#98a2b3; --ink3:#667085;
  --line:#242b36; --line2:#1e242e; --brand:#e6e9ef; --onbrand:#0e1116;
  --ok:#75e0a7; --okbg:#0b2a1c; --warn:#fdb022; --warnbg:#2b1d05; --bad:#fda29b; --badbg:#2d1210;
  --sh:0 1px 3px rgba(0,0,0,.4);
}}
:root[data-theme="light"]{
  --bg:#f4f5f7; --surface:#fff; --surface2:#fafbfc; --ink:#101828; --ink2:#475467; --ink3:#98a2b3;
  --line:#e4e7ec; --line2:#eef0f3; --brand:#0b1633; --onbrand:#fff;
  --ok:#067647; --okbg:#ecfdf3; --warn:#b54708; --warnbg:#fffaeb; --bad:#b42318; --badbg:#fef3f2;
  --sh:0 1px 3px rgba(16,24,40,.08);
}
:root[data-theme="dark"]{
  --bg:#0e1116; --surface:#161b23; --surface2:#1b212b; --ink:#e6e9ef; --ink2:#98a2b3; --ink3:#667085;
  --line:#242b36; --line2:#1e242e; --brand:#e6e9ef; --onbrand:#0e1116;
  --ok:#75e0a7; --okbg:#0b2a1c; --warn:#fdb022; --warnbg:#2b1d05; --bad:#fda29b; --badbg:#2d1210;
  --sh:0 1px 3px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%}
.num{font-variant-numeric:tabular-nums;text-align:right}
a{color:inherit}

/* ── แถบหัว ── */
.top{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:10px 16px;flex-wrap:wrap}
.top h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;flex:1;min-width:140px}
.top h1 small{display:block;font-size:12px;font-weight:400;color:var(--ink3);letter-spacing:0}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);
  background:var(--surface2);border:1px solid var(--line);border-radius:99px;padding:4px 11px}
.btn{font:inherit;font-weight:600;font-size:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);border-radius:var(--r);padding:9px 15px;cursor:pointer;transition:.12s;
  text-decoration:none;display:inline-block;text-align:center}
.btn:hover{background:var(--surface2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--onbrand)}
.btn.pri:hover{filter:brightness(1.12)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.gh{background:transparent;border-color:transparent;color:var(--ink2);padding:6px 10px}
.btn.gh:hover{background:var(--surface2);color:var(--ink)}
.btn.bad{border-color:var(--bad);color:var(--bad)}

/* ── แท็บขีดเส้นใต้ ── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);background:var(--surface);
  padding:0 16px;overflow-x:auto;position:sticky;top:56px;z-index:49}
.tab{font:inherit;font-weight:600;font-size:14px;background:none;border:0;border-bottom:2px solid transparent;
  color:var(--ink2);padding:11px 13px;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}

.wrap{max-width:1040px;margin:0 auto;padding:18px 16px 60px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  padding:18px;margin-bottom:16px}
.card h2{margin:0 0 4px;font-size:15px;font-weight:600}
.card h2+p{margin:0 0 16px;color:var(--ink2);font-size:13px}

.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
input,select,textarea{font:inherit;font-size:15px;width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:7px;background:var(--surface2);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}
input[type=number]{font-variant-numeric:tabular-nums;text-align:right}
.help{font-size:12px;color:var(--ink3);margin-top:4px}

.calc{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin:15px 0}
.calc .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
.calc .row b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
.calc .lbl{font-size:13px;color:var(--ink2)}

.note{border-radius:7px;padding:10px 13px;font-size:13.5px;margin:11px 0;border:1px solid}
.note.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.note.warn{background:var(--warnbg);border-color:var(--warn);color:var(--warn)}
.note.bad{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.note b{font-weight:600}

.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -18px;padding:0 18px}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:600px}
th{text-align:left;font-weight:600;color:var(--ink2);font-size:12px;padding:8px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap}
th.num,td.num{text-align:right}
td{padding:9px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface2)}
.mut{color:var(--ink3)}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:99px;
  background:var(--surface2);border:1px solid var(--line);color:var(--ink2)}
.tag.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.tag.warn{background:var(--warnbg);border-color:var(--warn);color:var(--warn)}
.tag.bad{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.empty{text-align:center;color:var(--ink3);padding:36px 16px;font-size:14px}

/* ── ฉากเต็มจอ (ตั้งค่า / ล็อกอิน / กล่องแก้ไข) ── */
.ovl{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;
  align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.ovl.on{display:flex}
.ovl.dim{background:rgba(0,0,0,.55)}
.ovl .box{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);
  padding:26px;max-width:460px;width:100%;max-height:92vh;overflow-y:auto}
.ovl .box.wide{max-width:620px}
.ovl h2{margin:0 0 6px;font-size:19px;font-weight:600}
.ovl p{margin:0 0 18px;color:var(--ink2);font-size:14px}
.steps{font-size:13px;color:var(--ink2);background:var(--surface2);border:1px solid var(--line);
  border-radius:7px;padding:12px 14px;margin:14px 0}
.steps ol{margin:0;padding-left:19px}
.steps li{margin:5px 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--surface2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;
  background:var(--brand);color:var(--surface);padding:11px 20px;border-radius:99px;font-size:14px;
  font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:.2s}
.toast.on{opacity:1}

/* ── หน้าแรก (ศูนย์รวม) ── */
.hub{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.hubcard{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh);padding:20px;transition:.14s}
.hubcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.hubcard .ico{font-size:30px;line-height:1;margin-bottom:10px}
.hubcard b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.hubcard span{font-size:13px;color:var(--ink2)}
.hubcard.soon{opacity:.5;pointer-events:none}

@media(max-width:820px){
  .tabs{top:52px}
  .wrap{padding:14px 12px 50px}
  .card{padding:15px}
  .tblwrap{margin:0 -15px;padding:0 15px}
  .top{padding:9px 12px;gap:8px}
  .top h1{font-size:15px;min-width:110px}
  .top h1 small{font-size:11px}
  .chip{font-size:11.5px;padding:3px 9px}
  .tab{font-size:13px;padding:10px 11px}
  /* ตารางบนมือถือ: ตัวเล็กลงนิดให้เห็นคอลัมน์มากขึ้น */
  table{font-size:12.5px;min-width:520px}
  th{font-size:11px;padding:7px 8px}
  td{padding:8px}
  .grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px}
  input,select,textarea{font-size:16px}   /* 16px = iPhone ไม่ซูมเองตอนแตะช่อง */
  .btn{padding:10px 14px}
  .ovl{padding:12px}
  .ovl .box{padding:20px}
}
@media(max-width:480px){
  .grid{grid-template-columns:1fr 1fr}
  .card h2{font-size:14.5px}
}