/* BOQCraft — ธีมตามตัวอย่างที่เฮียเลือก (openbot/flow_test/UI Design): พื้นดำ + ไลม์นีออน · หัวข้อหนาสองสี · การ์ด bento
   + ธีมสว่าง (เฮีย 2026-10-11) · ทุกสีเป็นโทเคน · ไลม์ใช้เป็น "พื้น" ได้ทั้งสองธีม แต่ "ตัวหนังสือ/เส้น" บนพื้นสว่างต้องใช้เขียวเข้ม (--accent-text)
   ความต่างสีตัวหนังสือผ่าน WCAG AA (≥4.5 ตัวเล็ก · ≥3 ตัวใหญ่) ทั้งสองธีม — ตรวจด้วย openbot/tools/contrast_lint.js
   โทเคนระยะ: 4/8/16/24/32/48 · มุม 8/12/18 · สถานะปุ่มครบ (ชี้/กด/ปิด/กำลังโหลด) · กรอบโฟกัสชัดเสมอ */
:root {
  color-scheme: dark;
  --bg: #0b0d0c; --bg2: #101311; --card: #151917; --card2: #1b201d; --line: #2a312c; --line2: #3a443c;
  --text: #eef2ec; --muted: #a3ada5; --dim: #808b82;
  --accent: #c8f135; --accent2: #b2dc1c; --accent-ink: #0b0d0c; --accent-text: #c8f135; --glow: rgba(200, 241, 53, .32);
  --good: #4ade80; --warn: #facc15; --bad: #f87171; --info: #7cc4ff;
  --ok-fg: #c9f7d8; --ok-bg: rgba(74, 222, 128, .08); --ok-bd: rgba(74, 222, 128, .35);
  --warn-fg: #fbeaa4; --warn-bg: rgba(250, 204, 21, .07); --warn-bd: rgba(250, 204, 21, .35);
  --bad-fg: #ffd0d0; --bad-bg: rgba(248, 113, 113, .08); --bad-bd: rgba(248, 113, 113, .38);
  --info-fg: #d6ecff; --info-bg: rgba(124, 196, 255, .07); --info-bd: rgba(124, 196, 255, .32);
  --header-bg: rgba(11, 13, 12, .80); --grid-line: rgba(255, 255, 255, .025); --hero-glow: rgba(200, 241, 53, .10); --hero-glow2: rgba(124, 196, 255, .06);
  --soft: rgba(255, 255, 255, .02); --row-hover: rgba(200, 241, 53, .035);
  --sh1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --r1: 8px; --r2: 12px; --r3: 18px; --pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --head: "Kanit", "IBM Plex Sans Thai", system-ui, sans-serif;
  --body: "IBM Plex Sans Thai", "Kanit", system-ui, sans-serif;
}
/* ธีมสว่าง: เลือกเอง (data-theme=light) หรือเครื่องผู้ใช้ตั้งสว่างไว้และยังไม่เคยเลือก */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f4; --bg2: #eef0eb; --card: #ffffff; --card2: #ffffff; --line: #dde2d8; --line2: #c3cbbf;
  --text: #12150f; --muted: #4b544c; --dim: #5d665e;
  --accent-text: #4f6f00; --glow: rgba(120, 160, 0, .20);
  --good: #166534; --warn: #8a5100; --bad: #b91c1c; --info: #1d4ed8;
  --ok-fg: #14532d; --ok-bg: #dcfce7; --ok-bd: #86efac;
  --warn-fg: #713f12; --warn-bg: #fef9c3; --warn-bd: #fde047;
  --bad-fg: #7f1d1d; --bad-bg: #fee2e2; --bad-bd: #fca5a5;
  --info-fg: #1e3a8a; --info-bg: #dbeafe; --info-bd: #93c5fd;
  --header-bg: rgba(246, 247, 244, .88); --grid-line: rgba(11, 13, 12, .045); --hero-glow: rgba(170, 215, 0, .16); --hero-glow2: rgba(80, 140, 220, .08);
  --soft: rgba(11, 13, 12, .025); --row-hover: rgba(79, 111, 0, .05);
  --sh1: 0 1px 2px rgba(11, 13, 12, .06), 0 10px 26px rgba(11, 13, 12, .06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f6f7f4; --bg2: #eef0eb; --card: #ffffff; --card2: #ffffff; --line: #dde2d8; --line2: #c3cbbf;
    --text: #12150f; --muted: #4b544c; --dim: #5d665e;
    --accent-text: #4f6f00; --glow: rgba(120, 160, 0, .20);
    --good: #166534; --warn: #8a5100; --bad: #b91c1c; --info: #1d4ed8;
    --ok-fg: #14532d; --ok-bg: #dcfce7; --ok-bd: #86efac;
    --warn-fg: #713f12; --warn-bg: #fef9c3; --warn-bd: #fde047;
    --bad-fg: #7f1d1d; --bad-bg: #fee2e2; --bad-bd: #fca5a5;
    --info-fg: #1e3a8a; --info-bg: #dbeafe; --info-bd: #93c5fd;
    --header-bg: rgba(246, 247, 244, .88); --grid-line: rgba(11, 13, 12, .045); --hero-glow: rgba(170, 215, 0, .16); --hero-glow2: rgba(80, 140, 220, .08);
    --soft: rgba(11, 13, 12, .025); --row-hover: rgba(79, 111, 0, .05);
    --sh1: 0 1px 2px rgba(11, 13, 12, .06), 0 10px 26px rgba(11, 13, 12, .06);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.6 var(--body); background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 15% -10%, var(--hero-glow), transparent 60%),
    radial-gradient(700px 380px at 100% 0%, var(--hero-glow2), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
::placeholder { color: var(--dim); opacity: 1; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--s3); }

/* ---- ส่วนหัว ---- */
.top { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: var(--header-bg); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: var(--s3); min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font: 600 18px/1.4 var(--head); }
.brand:hover { text-decoration: none; }
.markimg { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 24px var(--glow); display: block; }
.wordmark { font: 700 21px/1.4 var(--head); letter-spacing: .2px; }
.beta { font: 600 12px/1.4 var(--body); color: var(--accent-text); border: 1px solid var(--accent-text); border-radius: var(--pill); padding: 4px 8px; }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.nav a, .nav button.link { color: var(--muted); font-size: 15px; padding: 8px 10px; border-radius: var(--r1); }
.nav a:hover, .nav button.link:hover { color: var(--text); background: var(--card); text-decoration: none; }
.nav form { margin: 0; }
button.link { background: none; border: 0; font: inherit; cursor: pointer; }
/* ปุ่มสลับภาษา / ธีม (แคปซูล 2 ช่อง) */
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--pill); padding: 2px; margin-left: 4px; }
.nav .seg a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); font-size: 13px; font-weight: 600; color: var(--muted); }
.nav .seg a:hover { text-decoration: none; color: var(--text); background: transparent; }
.nav .seg a.on { background: var(--accent); color: var(--accent-ink); }
.nav .seg svg { width: 14px; height: 14px; }
:root:not([data-theme="light"]) .themes a[data-t="dark"], :root[data-theme="light"] .themes a[data-t="light"] { background: var(--accent); color: var(--accent-ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .themes a[data-t="light"] { background: var(--accent); color: var(--accent-ink); }
  :root:not([data-theme]) .themes a[data-t="dark"] { background: transparent; color: var(--muted); }
}

/* ---- ตัวหนังสือ ---- */
h1, h2, h3 { font-family: var(--head); line-height: 1.42; margin: 0 0 var(--s3); letter-spacing: .2px; }
h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 700; line-height: 1.5; }   /* Kanit ไทย: กล่องตัวอักษรสูง → 1.5 กันบรรทัดชน */
h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 600; }
h3 { font-size: 19px; font-weight: 600; }
.hl { color: var(--accent-text); }
.mute { color: var(--muted); }
.dim { color: var(--dim); }
.lead { color: var(--muted); font-size: 18px; max-width: 640px; }
.small { font-size: 14px; }
.glowline { height: 2px; width: 160px; background: linear-gradient(90deg, transparent, var(--accent-text), transparent); box-shadow: 0 0 18px var(--glow); border: 0; margin: var(--s3) 0 var(--s4); }

/* ---- ปุ่ม (ปกติ/ชี้/กด/ปิด/กำลังโหลด) ---- */
.btn { --b: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 var(--s4);
  border-radius: var(--pill); border: 1px solid var(--b); background: var(--b); color: var(--accent-ink); font: 600 16px/1.45 var(--body);
  cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, background .2s ease; text-decoration: none; }
.btn:hover { text-decoration: none; box-shadow: 0 0 0 4px var(--glow); }
.btn:active { transform: translateY(1px) scale(.99); background: var(--accent2); }
.btn .arr { transition: transform .15s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--accent-text); box-shadow: none; color: var(--accent-text); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad-bd); }
.btn.danger:hover { box-shadow: 0 0 0 4px var(--bad-bg); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; pointer-events: none; }
.btn.loading { pointer-events: none; opacity: .85; }
.btn.loading::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }
.btn.sm { min-height: 38px; padding: 0 var(--s3); font-size: 14px; }
/* ปุ่มเข้าสู่ระบบ Google (พื้นขาว โลโก้ G สี · ตามแนวทางของ Google) / LINE (สีเขียว LINE #06C755 ตัวหนังสือขาว) */
.btn.sso { width: 100%; justify-content: center; gap: 12px; }
.btn.sso.google { --b: #ffffff; color: #1f1f1f; border-color: #c4c7c5; }
.btn.sso.google:hover { box-shadow: 0 0 0 4px var(--soft); }
.btn.sso.line { --b: #06C755; color: #ffffff; border-color: #06C755; }
.btn.sso.line:hover { box-shadow: 0 0 0 4px rgba(6, 199, 85, .18); }

/* ---- การ์ด / bento ---- */
.card { background-color: var(--card); background-image: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line);
  border-radius: var(--r3); padding: var(--s4); box-shadow: var(--sh1); }
.card.hi { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 40px var(--glow); }
.card.hi .mute, .card.hi .dim, .card.hi .lab, .card.hi .unit, .card.hi .hl { color: rgba(11, 13, 12, .80); }
.card.hi a:not(.btn) { color: var(--accent-ink); text-decoration: underline; }
.card.hi .btn.ghost { color: var(--accent-ink); border-color: rgba(11, 13, 12, .45); }
.card.hi .btn.ghost:hover { background: rgba(11, 13, 12, .08); color: var(--accent-ink); border-color: var(--accent-ink); }
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step .no { font: 700 22px/1 var(--head); color: var(--accent-text); margin-bottom: var(--s3); display: block; }
.card.hi.step .no { color: var(--accent-ink); }
.section { padding: var(--s6) 0; }
.hero { padding: 72px 0 var(--s5); }
.stat .num { font: 700 clamp(26px, 3.6vw, 38px)/1.4 var(--head); }
.stat .unit { color: var(--muted); font-size: 14px; margin-left: 6px; }
.stat .lab { color: var(--muted); font-size: 14px; margin-top: var(--s2); }
.outline-num { font: 800 clamp(44px, 7vw, 72px)/1 var(--head); color: transparent; -webkit-text-stroke: 1.5px var(--accent-text); }

/* ---- ชิป / ป้ายสถานะ ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 600;
  border: 1px solid var(--line2); color: var(--muted); background: var(--soft); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip.good, .chip.lv-สูง, .chip.st-done { color: var(--good); border-color: var(--ok-bd); }
.chip.warn, .chip.lv-กลาง, .chip.st-queued { color: var(--warn); border-color: var(--warn-bd); }
.chip.bad, .chip.lv-ต่ำ, .chip.st-rejected, .chip.st-no_structure, .chip.st-error, .chip.st-timeout, .chip.st-ai_down { color: var(--bad); border-color: var(--bad-bd); }
.chip.st-running { color: var(--accent-text); border-color: var(--accent-text); }
.chip.st-running::before { animation: pulse 1.2s ease-in-out infinite; }

/* ---- แจ้งเตือน ---- */
.alert { border-radius: var(--r2); padding: 12px var(--s3); border: 1px solid; margin: 0 0 var(--s2); font-size: 15px; }
.alert.ok, .alert.good { color: var(--ok-fg); background: var(--ok-bg); border-color: var(--ok-bd); }
.alert.warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-bd); }
.alert.error, .alert.bad { color: var(--bad-fg); background: var(--bad-bg); border-color: var(--bad-bd); }
.alert.info { color: var(--info-fg); background: var(--info-bg); border-color: var(--info-bd); }
.flashes { margin-top: var(--s3); }

/* ---- ฟอร์ม ---- */
label.f { display: block; font-weight: 600; margin: var(--s3) 0 var(--s2); }
input[type=text], input[type=email], input[type=number], textarea, select {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r2); border: 1px solid var(--line2); background: var(--bg2);
  color: var(--text); font: 16px/1.5 var(--body); transition: border-color .15s ease, box-shadow .15s ease; }
select option { background: var(--card); color: var(--text); }
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--glow); }
.check { display: flex; gap: 12px; align-items: flex-start; margin: var(--s3) 0; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent-text); margin-top: 2px; flex: none; }
.drop { display: block; border: 1.5px dashed var(--line2); border-radius: var(--r3); padding: var(--s5) var(--s3); text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; background: var(--soft); }
.drop:hover, .drop.over { border-color: var(--accent-text); background: var(--row-hover); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .big { font: 600 20px/1.45 var(--head); display: block; margin-bottom: 6px; }
.drop .fname { color: var(--accent-text); font-weight: 600; margin-top: var(--s2); display: block; word-break: break-all; }
.rate { display: flex; gap: var(--s2); flex-wrap: wrap; }
.rate label { position: relative; }
.rate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate span { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--line2);
  cursor: pointer; font-weight: 600; color: var(--muted); transition: all .15s ease; }
.rate input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 18px var(--glow); }
.rate input:focus-visible + span { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.rate span:hover { border-color: var(--accent-text); color: var(--text); }

/* ---- ตาราง ---- */
.tbl { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--bg2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
td.why { color: var(--muted); font-size: 13px; min-width: 220px; }

/* ---- รายการงาน / ความคืบหน้า ---- */
.jobs { display: grid; gap: var(--s2); }
.jobrow { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r2); background: var(--card); color: var(--text); }
.jobrow:hover { border-color: var(--accent-text); text-decoration: none; }
.jobrow .nm { font-weight: 600; word-break: break-all; }
.jobrow .meta { margin-left: auto; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bar { height: 8px; border-radius: var(--pill); background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow: 0 0 16px var(--glow); transition: width .6s ease; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--accent-text); animation: spin 1s linear infinite; }
.checks { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.checks a { display: block; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: #fff; }
.checks a:hover { border-color: var(--accent-text); }
.checks img { width: 100%; height: 180px; object-fit: cover; display: block; }
.checks .cap { background: var(--card); color: var(--muted); font-size: 13px; padding: 8px 12px; }
.row { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.mt0 { margin-top: 0; } .mt2 { margin-top: var(--s2); } .mt3 { margin-top: var(--s3); } .mt4 { margin-top: var(--s4); } .mt5 { margin-top: var(--s5); }
.mb0 { margin-bottom: 0; }
.foot { border-top: 1px solid var(--line); margin-top: var(--s6); padding: var(--s4) 0; color: var(--dim); font-size: 14px; }
.prose p, .prose li { color: var(--muted); }
.prose h3 { margin-top: var(--s4); }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸"; color: var(--accent-text); margin-right: 8px; display: inline-block; transition: transform .15s ease; }
details[open] > summary::before { transform: rotate(90deg); }
.tbl input[type=number] { width: 90px; min-height: 38px; padding: 6px 10px; }
.tbl form.row { gap: 8px; flex-wrap: nowrap; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; } }

@media (max-width: 960px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .g2 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 40px 0 var(--s4); }
  .card { padding: var(--s3); }
  .jobrow { flex-direction: column; align-items: flex-start; }
  .jobrow .meta { margin-left: 0; justify-content: flex-start; }
  .top .wrap { min-height: 56px; }
  .nav { width: 100%; margin-left: 0; }
  .hide-sm, .themes .lbl { display: none; }
  .nav .seg a { padding: 6px 12px; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }