/* ธีมกลางของ AI Chat — แถบบนสีเข้ม · พื้นเทาอ่อน · การ์ดขาวมีเงา · หัวตารางสีเข้ม
   ทุกหน้าใช้ตัวแปรชุดนี้ — แก้สีที่นี่ที่เดียว · ชื่อเดิม (--bte --bte-dark --bte-soft --line --muted --bg --radius) ยังใช้ได้ทุกตัว
   ตัวหนังสือและปุ่มหลักเป็นสีดำ/เทา (ปุ่มหลักดำ ชี้แล้วเทาเข้ม · ปุ่มขอบเส้นเทาอ่อน ชี้แล้วพื้นเทาจาง)
   มาสคอตยังเป็นสีน้ำตาลประจำแบรนด์ (--mk-brand) · แถบบน · สีสถานะ · พื้นครีมของสิ่งที่เลือกอยู่ ไม่เปลี่ยน */
:root{
  --bar:#2a2118;          /* แถบบนสุด */
  --th:#3e2f20;           /* หัวตาราง */
  --bte:#1f1f1f;          /* สีหลัก (ปุ่มหลัก · สวิตช์เปิด · ชิปที่เลือก) */
  --bte-dark:#1f1f1f;     /* ข้อความเน้น · ลิงก์ · หัวกล่อง · เส้นโฟกัส */
  --pri-hover:#3c4043;    /* ชี้ปุ่มหลัก (พื้นดำ) */
  --btn-line:#dadce0;     /* ขอบปุ่มรอง/ปุ่มขอบ */
  --btn-hover:#f1f3f4;    /* พื้นตอนชี้ปุ่มรอง */
  --chip-on:#e8eaed;      /* ชิปกรองที่เลือก · ปุ่มส่งตอนยังไม่มีอะไรให้ส่ง */
  --focus-line:#5f6368;   /* กรอบช่องพิมพ์/ช่องกรอกตอนกำลังพิมพ์ */
  --mk-brand:#5d452e;     /* โหนดของมาสคอตบนพื้นสว่าง (สีแบรนด์ — ไม่ตามสีตัวหนังสือ) */
  --bte-soft:#f6efe2;     /* ชื่อเดิม = --tint */
  --tint:#f6efe2;         /* พื้นของสิ่งที่เลือกอยู่ */
  --hover:#f8f4ec;        /* พื้นตอนชี้ */
  --bg:#fafafa;           /* พื้นหน้า */
  --panel:#fff;           /* พื้นการ์ด/แผง */
  --line:#ececec;         /* เส้นแบ่ง */
  --line-2:#f0f0f0;       /* เส้นแบ่งแถวตาราง */
  --field:#bdbdbd;        /* กรอบช่องกรอก */
  --ink:#1f1f1f;          /* ตัวหนังสือหลัก */
  --ink-2:#424242;
  --ink-3:#5f6368;        /* ตัวหนังสือรอง */
  --muted:#5f6368;        /* ตัวหนังสือรอง/คำแนะนำ */
  --faint:#9e9e9e;        /* ตัวหนังสือจาง */
  --ok:#43a047; --warn:#fb8c00; --info:#1565c0; --err:#e53935;
  --r-sm:5px;             /* ช่องกรอก · ชิป · ปุ่มเล็ก */
  --r-card:6px;           /* การ์ด · เมนู */
  --r-btn:8px;            /* ปุ่มหลัก */
  --r-modal:14px;         /* กล่องข้อความ */
  --radius:6px;           /* ชื่อเดิม = --r-card */
  --sh-card:0 1px 4px rgba(0,0,0,.12);
  --sh-pop:0 4px 16px rgba(0,0,0,.22);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Roboto','Segoe UI',system-ui,-apple-system,'Noto Sans Thai','Sarabun',sans-serif;background:var(--bg);color:var(--ink);font-size:14px;accent-color:var(--bte)}
::selection{background:rgba(122,92,62,.22)}
:focus-visible{outline:2px solid var(--bte-dark);outline-offset:2px}
/* บนแถบบนสีเข้ม เส้นโฟกัสสีดำมองไม่เห็น → ใช้เส้นขาวจาง (เฉพาะของบนแถบ ไม่รวมเมนูพื้นขาวที่เปิดจากแถบ) */
.nav .bar>:focus-visible,.topbar :focus-visible{outline-color:rgba(255,255,255,.75)}
a{color:var(--bte-dark)}
/* แถบบนแบบทั่วไป (หน้าที่ยังไม่มีแถบของตัวเอง) */
.topbar{background:var(--bar);color:#fff;height:52px;padding:0 20px;display:flex;align-items:center;gap:14px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.topbar b{font-size:14px;font-family:'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;text-transform:uppercase}
.topbar .sp{flex:1}
.topbar a,.topbar button{color:rgba(255,255,255,.85);background:transparent;border:1px solid rgba(255,255,255,.25);padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;font:inherit;font-size:12.5px}
.topbar a:hover,.topbar button:hover{background:rgba(255,255,255,.12);color:#fff}
.wrap{max-width:1080px;margin:22px auto;padding:0 16px}
.card{background:var(--panel);border:0;box-shadow:var(--sh-card);border-radius:var(--r-card);padding:18px 20px;margin-bottom:16px}
h2{margin:0 0 14px;font-size:17px}
label.fld{display:block;margin-bottom:12px}
label.fld span{display:block;font-weight:600;font-size:12.5px;margin-bottom:4px;color:var(--ink-2)}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--field);border-radius:var(--r-sm);font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus-line);box-shadow:0 0 0 1px var(--focus-line)}
.grid{display:grid;gap:4px 16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:720px){.g2,.g3{grid-template-columns:1fr}}
.btn{background:var(--bte);color:#fff;border:0;padding:9px 20px;border-radius:var(--r-btn);font:inherit;font-weight:600;cursor:pointer}
.btn:hover:not(:disabled){background:var(--pri-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:#fff;color:var(--ink);border:1px solid var(--btn-line);border-radius:var(--r-sm);font-weight:500}
.btn.sec:hover:not(:disabled){background:var(--btn-hover);border-color:var(--btn-line);color:var(--ink)}
/* แถบ "มีเวอร์ชันใหม่" (สไตล์ใส่จาก vercheck.js) — ปุ่มหลักชี้แล้วเป็นเทาเข้ม เหมือนปุ่มหลักอื่น */
body .verbar .vb-go:hover:not(:disabled){background:var(--pri-hover);border-color:var(--pri-hover)}
/* ปุ่ม "ไว้ทีหลัง" = ปุ่มรองแบบเดียวกับหน้าแชต: ขอบเทาอ่อน ตัวหนังสือดำ ชี้แล้วพื้นเทาจาง */
body .verbar .vb-later{border-color:var(--btn-line);color:var(--ink)}
body .verbar .vb-later:hover{background:var(--btn-hover);border-color:var(--btn-line);color:var(--ink)}
/* ตาราง: หัวน้ำตาลเข้มตัวขาว · เส้นแนวนอนจาง · แถวสลับสี · ชี้แล้วพื้นครีม */
table.li{width:100%;border-collapse:collapse}
table.li th{font-size:12.5px;text-align:left;color:#fff;background:var(--th);font-weight:500;padding:9px 12px}
table.li td{padding:8.5px 12px;border-bottom:1px solid var(--line-2)}
:where(table.li tr:nth-child(even)) td{background:#fafafa}
table.li tr:hover td{background:var(--tint)}
.badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700}
.b-gray{background:#eee;color:var(--ink-3)}.b-green{background:#e6f4e6;color:#2e7d32}
.b-amber{background:#fdf0d5;color:#b45309}.b-red{background:#fdecea;color:#c62828}
.b-blue{background:#e7f0fa;color:var(--info)}
/* กล่องข้อความแนะนำ (พื้นครีม) — ใช้แทนการใส่สีในแท็กทีละจุด */
.note-box{background:var(--tint);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.7}
/* แจ้งเตือนมุมล่าง: พื้นน้ำตาลเข้ม · ขอบซ้ายเขียว = สำเร็จ · แดง = ไม่สำเร็จ */
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#2d2418;color:#fff;border-left:4px solid var(--ok);
  padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:0 8px 24px rgba(60,40,10,.3);opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%;z-index:400}
#toast.show{opacity:1}#toast.err{border-left-color:var(--err)}
.hint{font-size:12px;color:var(--muted)}