/* ── Staging Environment Badge (แสดงเฉพาะ APP_ENV=staging) — คลาสกลาง ไม่ขึ้นกับธีม ── */
/* ── ป้ายช่วงเริ่มต้น (BETA) ข้างชื่อแอป ──────────────────────────────────────
   ตั้งใจให้เล็กและอยู่ติดโลโก้ แทนแบนเนอร์เต็มบรรทัดทุกหน้า
   เหตุผล: แบนเนอร์ถาวรคนอ่านครั้งเดียวแล้วมองไม่เห็นอีก (banner blindness)
   เหลือแค่กินพื้นที่ · ป้ายข้างโลโก้สื่อ "ยังใหม่" ได้ตลอดโดยไม่ต้องอ่านซ้ำ */
.beta-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── แถบเตือนสำหรับผู้ใช้ที่ยังไม่ยอมรับข้อตกลง ───────────────────────────────
   โผล่เฉพาะคนที่ยังไม่ตกลง และเฉพาะหน้าที่เข้าได้โดยไม่ต้องตกลง (ดู _terms.js)
   สีล็อกไว้ ไม่ผูกกับธีม เพราะเป็นข้อความที่ต้องอ่านออกเท่ากันทุกธีม */
.terms-pending-bar {
  position: relative;
  z-index: 2000;
  padding: 8px 16px;
  background: #f59e0b;
  color: #1a1a1a;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.terms-pending-bar a {
  margin-left: 10px;
  color: #1a1a1a;
  font-weight: 800;
  text-decoration: underline;
}

.staging-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 3000;
  padding: 4px 12px;
  border-radius: 999px;
  background: #b45309;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  user-select: none;
}

/* Inkza Brand: Sky Blue theme */
:root {
  --brand-deep-blue: #0369a1;
  --brand-sky-blue: #0ea5e9;
  --brand-dark-navy: #0f172a;
  --brand-ice-white: #f0f9ff;
  --primary-gradient: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);
  --secondary-gradient: linear-gradient(135deg, #0ea5e9 0%, #7dd3fc 100%);
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(14, 165, 233, 0.2);
  --text-dark: #1f1f1f;
  --text-light: #f0f9ff;
  --bg-color: #0f172a;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bg-color);
  color: var(--text-light);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-light);
}

/* หัวข้อในกล่อง .alert ต้องใช้สีของกล่อง ไม่ใช่สีตัวอักษรของหน้า
   ⚠️ กฎ h1-h6 ด้านบนไปทับสีที่ .alert ตั้งไว้ ทำให้หัวข้อกลายเป็นตัวอักษรสีอ่อน
      บนพื้นกล่องสีอ่อน = มองไม่เห็น (เจอที่ /terms/accept และหน้า /docs/* รวม 5 วิว)
   ⚠️ ต้องเป็น inherit ไม่ใช่สีตายตัว — กล่องแต่ละสี (info/warning/danger) มีสีตัวอักษร
      ของตัวเองอยู่แล้ว และคลาส text-*-emphasis ที่บางหน้าใส่ไว้เองยังทับกฎนี้ได้ตามปกติ */
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.alert .h1, .alert .h2, .alert .h3, .alert .h4, .alert .h5, .alert .h6 {
  color: inherit;
}

.text-muted {
  color: rgba(248, 249, 250, 0.6) !important;
}

.card {
  color: var(--text-light);
}

/* Background Animation */
body::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, rgba(15, 23, 42, 0) 70%);
  z-index: -1;
  animation: bgPulse 10s infinite alternate;
}

@keyframes bgPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* Glassmorphism Utility */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px 0 rgba(14, 165, 233, 0.15);
  border-radius: 16px;
}

/* ⚠️ backdrop-filter ด้านบนทำให้การ์ดแต่ละใบเป็น stacking context ของตัวเอง
   → z-index ของ .dropdown-menu ข้ามการ์ดไม่ได้ เมนูที่ล้นออกนอกการ์ดจะถูกการ์ดถัดไปทับ
   → ยกลำดับการ์ด "เฉพาะตอนที่มีเมนูเปิดอยู่" ให้อยู่เหนือการ์ดอื่น (ปิดเมนูแล้วคืนค่าเดิมเอง)
   ครอบทุกหน้าอัตโนมัติ ไม่ต้องไปใส่ position-relative z-3 ทีละหน้า */
/* ⚠️ ต้องยกเว้น navbar และทุกอย่างที่ fixed อยู่แล้ว
   navbar มีคลาส "glass-effect fixed-top" พร้อมกัน — ถ้าไม่ยกเว้น กฎนี้จะเปลี่ยน position
   จาก fixed เป็น relative ทุกครั้งที่เปิดดรอปดาวน์ในนาวบาร์ navbar จะหลุดกลับเข้า flow
   แล้วดันทั้งหน้าลง 96px (สูง 64 + m-3 บนล่าง 32) แล้วเด้งกลับตอนปิดเมนู
   (:has() มี specificity ของ argument ที่แรงที่สุด จึงชนะ .fixed-top ของ Bootstrap) */
.glass-effect:has(.dropdown-menu.show):not(.navbar):not(.fixed-top) {
  position: relative;
  z-index: 5;
}

/* Navbar */
.navbar {
  transition: all 0.3s ease;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: #0ea5e9 !important;
  -webkit-text-fill-color: #0ea5e9;
}

.nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 500;
  transition: color 0.3s;
}

/* ── แถบเมนูของหน้าสาธารณะ (views/partials/header.ejs) ────────────────────────
   ⚠️ กฎ .nav-link ด้านบนตั้งสีขาวไว้ตั้งแต่ยุคที่เว็บมีแต่ธีมมืด พอหน้าไหนพื้นสว่าง
      ตัวหนังสือจะขาวบนพื้นขาว = หายไปทั้งแถบ (ชื่อผู้ใช้ เมนู ตัวเลือกภาษา)
      เดิมแก้ไว้ใน <style> ของ views/index.ejs หน้าเดียว อีก 9 หน้าที่ include
      header.ejs ร่วมกัน (docs ทั้ง 6 · contact · login · terms_accept) จึงยังพัง
   วิธีแก้: ให้แถบเมนูมีพื้นกระจกสว่างคงที่ทุกหน้า แล้วใช้ตัวหนังสือเข้าม
      — ค่านี้ผ่านการปรับจนอ่านออกแม้ลอยอยู่บนภาพเมืองของหน้าแรกที่มีทั้งท้องฟ้าและตึก
   ⚠️ ลด alpha ต่ำกว่านี้ ตัวหนังสือ #334155 จะเริ่มจมหายบนส่วนเข้มของภาพ */
.navbar.glass-effect {
  background: rgba(255, 255, 255, 0.66) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.10);
}

.navbar .nav-link,
.navbar .dropdown-toggle { color: #334155 !important; }

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover { color: #0ea5e9 !important; }

.navbar .nav-link.active { color: #0ea5e9 !important; }

.nav-link:hover,
.nav-link.active {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

/* Helper Classes */
.text-gradient-primary {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-secondary {
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-premium {
  background: var(--primary-gradient);
  border: none;
  color: white;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.35);
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.55);
  color: white;
}

/* Dropdown Dark Theme */
.dropdown-menu.glass-effect {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  min-width: 200px;
}

.dropdown-menu.glass-effect .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 2px 6px;
  transition: background 0.2s, color 0.2s;
}

.dropdown-menu.glass-effect .dropdown-item:hover,
.dropdown-menu.glass-effect .dropdown-item:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.dropdown-menu.glass-effect .dropdown-item.text-danger {
  color: #ff6b6b !important;
}

/* เมนู dropdown ตามธีม — ใช้เมื่อเมนูลอยอยู่บนการ์ดสีเข้ม (.glass-effect) แล้วต้องอ่านง่าย
   .dropdown-menu.glass-effect ตรึงพื้นเป็นกรมท่าเข้มตายตัว วางบนการ์ดเข้มจะจมกลืนไปกับพื้นหลัง
   ⚠️ ความสว่างมาจากเลเยอร์ขาวโปร่งทับ --sb-bg ไม่ใช่สีตายตัว → ธีมสว่าง/ซีเปียยังคงพื้นสว่างเหมือนเดิม */
.dropdown-menu.menu-theme {
  background-color: var(--sb-bg);
  background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));
  border-color: var(--sb-border);
  color: var(--sb-text-hover);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.dropdown-menu.menu-theme .dropdown-item {
  color: var(--sb-text-hover);
  background: transparent;
}

.dropdown-menu.menu-theme .dropdown-item:hover,
.dropdown-menu.menu-theme .dropdown-item:focus {
  color: var(--sb-text-hover);
  background: var(--sb-hover);
}

.dropdown-menu.menu-theme .dropdown-item-text {
  color: var(--sb-secondary-text);
}

/* ============================================
   Admin Dashboard Layout
   ============================================ */
.admin-layout {
  padding: 0;
}

.admin-sidebar {
  width: 220px;
  min-height: calc(100vh - 80px);
  flex-shrink: 0;
}

.admin-sidebar-inner {
  width: 220px;
  min-height: calc(100vh - 80px);
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(14, 165, 233, 0.15);
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}

.admin-sidebar-brand {
  flex-shrink: 0;
}

.admin-nav-link {
  color: rgba(255, 255, 255, 0.65) !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s !important;
  -webkit-text-fill-color: unset !important;
  text-shadow: none !important;
}

.admin-nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.admin-nav-link.active {
  background: var(--primary-gradient) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.4);
}

.admin-main-content {
  min-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Admin Table */
/* ตารางบนธีมมืด — ชุดเดียวใช้สองชื่อ: .admin-table (หน้าแอดมิน) · .table-theme (หน้าผู้ใช้)
   ⚠️ .table-theme ถูกใช้ในวิวมาตลอดแต่ไม่เคยมีใครนิยามไว้ → ตารางได้พื้นขาวของ Bootstrap
      มาวางบนธีมมืด (หัวตารางดำบนขาว อ่านไม่ออก) · ธีมสว่างใช้ body.is-light .table ที่มีอยู่แล้ว
   ห้ามแยกไปนิยามซ้ำอีกชุด — สองหน้าที่นี้ต้องหน้าตาเหมือนกันเสมอ */
.admin-table,
.table-theme {
  background: transparent !important;
  --bs-table-bg: transparent !important;
  --bs-table-color: inherit;
  --bs-table-border-color: rgba(255, 255, 255, 0.1);
}

.admin-table thead th,
.table-theme thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--bs-table-border-color);
  letter-spacing: 0.04em;
}

.admin-table tbody tr,
.table-theme tbody tr {
  transition: background 0.15s;
}

/* BS5.3 render table hover สีผ่าน box-shadow — ต้อง override ทั้ง background-color และ box-shadow */
.admin-table tbody tr:hover td,
.admin-table tbody tr:hover th,
.table-theme tbody tr:hover td,
.table-theme tbody tr:hover th {
  background-color: rgba(56, 189, 248, 0.12) !important;
  box-shadow: inset 0 0 0 9999px rgba(56, 189, 248, 0.12) !important;
}

/* Fade-in animation */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form control dark theme */
.form-control.bg-transparent {
  color: #fff;
}

/* Semantic theme classes — สีเปลี่ยนตาม theme ที่จุดเดียว */
.input-theme {
  background-color: #1e293b;
  color: #f0f9ff;
  border-color: #475569;
}
.input-theme::placeholder { color: rgba(240,249,255,0.35); opacity: 1; }
.input-theme:focus {
  background-color: #1e293b;
  color: #f0f9ff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 0.2rem rgba(14,165,233,0.2);
}
.select-theme {
  background-color: #1e293b;
  color: #f0f9ff;
  border-color: #475569;
}
.select-theme:focus {
  background-color: #1e293b;
  color: #f0f9ff;
  border-color: #38bdf8;
  box-shadow: 0 0 0 0.2rem rgba(14,165,233,0.2);
}
.select-theme option, .select-theme optgroup { background: #1e293b; color: #f0f9ff; }

/* Light theme overrides (shared by all light themes: light / warm / pink) */
body.app-page.is-light .input-theme {
  background-color: #ffffff;
  color: #1e293b;
  border-color: #cbd5e1;
}
body.app-page.is-light .input-theme:focus {
  background-color: #ffffff;
  color: #1e293b;
  border-color: var(--accent, #0ea5e9);
  box-shadow: 0 0 0 0.2rem var(--accent-ring, rgba(14,165,233,0.15));
}
body.app-page.is-light .input-theme::placeholder {
  color: #94a3b8;
  opacity: 1;
}
body.app-page.is-light .select-theme {
  background-color: #ffffff;
  color: #1e293b;
  border-color: #cbd5e1;
}
body.app-page.is-light .select-theme:focus {
  background-color: #ffffff;
  color: #1e293b;
  border-color: var(--accent, #0ea5e9);
  box-shadow: 0 0 0 0.2rem var(--accent-ring, rgba(14,165,233,0.15));
}
body.app-page.is-light .select-theme option,
body.app-page.is-light .select-theme optgroup { background: #ffffff; color: #1e293b; }

/* AI test history */
.ai-test-result-box {
  min-height: 480px;
}

.ai-empty-state {
  min-height: 400px;
}

.ai-history-count {
  background: rgba(14, 165, 233, 0.14);
  border: 1px solid rgba(14, 165, 233, 0.28);
  color: #7dd3fc;
}

.ai-history-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 640px;
  overflow-y: auto;
  padding-right: 4px;
}

.ai-history-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.24);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.ai-history-meta,
.ai-history-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: rgba(240, 249, 255, 0.58);
  font-size: 0.72rem;
}

.ai-status-success {
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.28);
  color: #34d399;
}

.ai-status-error {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
  color: #f87171;
}

.ai-history-message {
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  max-width: 85%;
  width: fit-content;
  min-width: min(220px, 100%);
  position: relative;
  padding-right: 34px;
}

.ai-history-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.18);
}

.ai-history-assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-left-radius: 4px;
}

.ai-history-label {
  color: rgba(240, 249, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.ai-history-text {
  color: var(--text-light);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
}

.ai-history-user .ai-history-label,
.ai-history-user .ai-history-text {
  color: #ffffff;
}

.ai-history-message .btn-bubble-tts {
  right: 10px;
  top: 10px;
  color: rgba(240, 249, 255, 0.58);
}

.ai-history-message .btn-bubble-tts:hover {
  color: var(--text-light);
}

.ai-history-user .btn-bubble-tts {
  color: rgba(255, 255, 255, 0.68);
}

.ai-history-user .btn-bubble-tts:hover {
  color: #ffffff;
}

.ai-history-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

/* แหล่งอ้างอิงจาก web_search (url_citation) */
.ai-history-sources {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: rgba(34, 211, 238, 0.06);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 10px;
  max-width: 85%;
}
.ai-history-sources-title {
  color: rgba(240, 249, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.ai-history-sources a {
  display: block;
  color: #22d3ee;
  text-decoration: none;
  font-size: 0.78rem;
  padding: 1px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-history-sources a:hover { text-decoration: underline; }
body.app-page.is-light .ai-history-sources {
  background: rgba(14, 165, 233, 0.06);
  border-color: rgba(14, 165, 233, 0.22);
}
body.app-page.is-light .ai-history-sources-title { color: var(--sb-secondary-text, #64748b); }
body.app-page.is-light .ai-history-sources a { color: #0369a1; }

/* ไอคอนแหล่งอ้างอิงจากเว็บ — เรียงหนึ่งแถวและเลื่อนแนวนอนได้เมื่อมีหลายแหล่ง */
.web-source-icons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0;
}

.web-source-icon-link {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.web-source-icon-link:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
}

.web-source-favicon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.web-source-fallback {
  font-size: 0.95rem;
}

body.app-page.is-light .web-source-icon-link {
  border-color: var(--sb-border, #dbe4ee);
  background: rgba(255, 255, 255, 0.84);
  color: var(--sb-secondary-text, #64748b);
}

body.app-page.is-light .web-source-icon-link:hover {
  border-color: rgba(14, 165, 233, 0.55);
  background: rgba(14, 165, 233, 0.08);
  color: #0369a1;
}

body.app-page.is-light .ai-history-count {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.22);
  color: #0369a1;
}

body.app-page.is-light .ai-history-item {
  background: rgba(255, 255, 255, 0.64);
  border-color: var(--sb-border, #e2e8f0);
}

body.app-page.is-light .ai-history-meta,
body.app-page.is-light .ai-history-foot,
body.app-page.is-light .ai-history-label {
  color: var(--sb-secondary-text, #64748b);
}

body.app-page.is-light .ai-history-assistant {
  background: rgba(248, 250, 252, 0.84);
  border-color: var(--sb-border, #e2e8f0);
}

body.app-page.is-light .ai-history-user {
  border-color: rgba(14, 165, 233, 0.24);
}

body.app-page.is-light .ai-history-assistant .btn-bubble-tts {
  color: var(--sb-secondary-text, #64748b);
}

body.app-page.is-light .ai-history-assistant .btn-bubble-tts:hover {
  color: var(--text-light, #1e293b);
}

/* Stateless chat viewer */
.scv-content {
  padding: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.scv-topbar {
  flex-shrink: 0;
  padding: 8px 14px;
  background: var(--sb-bg, #0c1830);
  border-bottom: 1px solid var(--sb-border, rgba(14, 165, 233, 0.12));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.scv-title {
  font-size: 0.88rem;
  white-space: nowrap;
}

.scv-label {
  font-size: 0.73rem;
  white-space: nowrap;
}

.scv-user-input {
  width: 260px;
  font-size: 0.78rem;
}

.scv-limit-select {
  width: 84px;
}

.scv-user-info {
  font-size: 0.72rem;
  white-space: nowrap;
}

.scv-workspace {
  flex: 1;
  display: flex;
  min-height: 0;
}

.scv-panel {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--sb-border, rgba(14, 165, 233, 0.12));
  background: rgba(255, 255, 255, 0.02);
}

.scv-panel-hdr {
  padding: 9px 12px 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.scv-panel-title {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.scv-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.scv-panel-item {
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 5px;
  margin: 2px 6px;
  transition: background 0.12s;
  font-size: 0.8rem;
  color: var(--sb-text, #94a3b8);
  overflow: hidden;
}

.scv-panel-item:hover {
  background: var(--sb-hover, rgba(255, 255, 255, 0.06));
  color: var(--sb-text-hover, #e2e8f0);
}

.scv-panel-item.active {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
}

.scv-panel-primary {
  color: var(--text-light);
  font-size: 0.78rem;
  font-weight: 600;
}

.scv-panel-secondary {
  color: var(--sb-secondary-text, #64748b);
  font-size: 0.68rem;
}

.scv-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scv-chat-hdr {
  flex-shrink: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--sb-border, rgba(14, 165, 233, 0.12));
  background: rgba(255, 255, 255, 0.02);
}

.scv-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scv-request {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 14px;
}

.scv-request.active {
  outline: 1px solid rgba(14, 165, 233, 0.24);
  outline-offset: 6px;
  border-radius: 8px;
}

.scv-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--sb-secondary-text, #64748b);
  font-size: 0.68rem;
}

.scv-msg {
  max-width: 82%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.scv-msg.user {
  align-self: flex-end;
}

.scv-msg.assistant {
  align-self: flex-start;
}

.scv-bubble {
  position: relative;
  padding: 9px 34px 9px 13px;
  border-radius: 12px;
  font-size: 0.87rem;
  line-height: 1.65;
  word-break: break-word;
  white-space: pre-wrap;
}

.scv-msg.user .scv-bubble {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #ffffff;
  border-bottom-right-radius: 3px;
}

.scv-msg.assistant .scv-bubble {
  background: var(--glass-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
  color: var(--text-light, #e2e8f0);
  border-bottom-left-radius: 3px;
}

.scv-msg-meta {
  font-size: 0.67rem;
  color: var(--sb-secondary-text, #64748b);
}

.scv-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #475569;
  text-align: center;
  padding: 24px;
}

.scv-empty-icon {
  font-size: 2.5rem;
  opacity: 0.12;
}

.scv-title-icon {
  color: #22d3ee;
}

.scv-user-results {
  max-height: 340px;
  overflow-y: auto;
}

.scv-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.scv-user-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.scv-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}

/* Image generation viewer */
.imgv-title-icon {
  color: #f472b6;
}

.imgev-title-icon {
  color: #fb7185;
}

.vidv-title-icon {
  color: #38bdf8;
}

.ttsv-title-icon {
  color: #a78bfa;
}

.audv-title-icon {
  color: #34d399;
}

.sttv-title-icon {
  color: #f59e0b;
}

.imgv-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.imgv-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.imgv-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.24);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── คลังถาวร: รูปย่อในตารางไฟล์ ── */
.vault-thumb {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sb-hover);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
}

.vault-thumb img,
.vault-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── ตัวเลือกรูปจากคลัง (library picker) ── */
.lib-pick-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--glass-border);
  border-radius: 10px;
  background: var(--sb-hover);
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.lib-pick-item:hover {
  border-color: var(--bs-info);
}

.lib-pick-item.picked {
  border-color: var(--bs-info);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}

.lib-pick-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lib-pick-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-info);
  color: #fff;
  font-size: 0.7rem;
}

.lib-pick-size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1px 4px;
  background: rgba(15, 23, 42, 0.66);
  color: #fff;
  font-size: 0.6rem;
  text-align: center;
}

.lib-picked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  margin: 4px 4px 0 0;
  padding: 3px 6px 3px 3px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--sb-hover);
  font-size: 0.7rem;
}

.lib-picked-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.lib-picked-thumb {
  display: inline-flex;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  line-height: 0;
}

.lib-picked-thumb img {
  width: 100%;
  height: 100%;
}

.lib-picked-remove {
  border: 0;
  padding: 0 2px;
  background: transparent;
  color: var(--bs-secondary-color);
  cursor: pointer;
  line-height: 1;
}

.lib-picked-remove:hover {
  color: var(--bs-danger);
}

/* ป้ายนามสกุลไฟล์ในตารางคลัง — ใช้สีตัวอักษรของธีม ไม่กำหนดสีตายตัว */
.file-ext-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--glass-border);
  background: var(--sb-hover);
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.vault-name-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  opacity: 0.6;
}

.vault-name-btn:hover {
  opacity: 1;
}

.imgv-thumb {
  aspect-ratio: 1 / 1;
  background: rgba(15, 23, 42, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.imgv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imgv-thumb-missing {
  color: var(--sb-secondary-text, #64748b);
  font-size: 0.78rem;
  text-align: center;
  padding: 14px;
}

.imgv-card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imgv-prompt {
  color: var(--text-light);
  font-size: 0.82rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.imgv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--sb-secondary-text, #64748b);
  font-size: 0.68rem;
}

.imgv-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.imgev-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.imgev-shot {
  min-width: 0;
  position: relative;
}

.imgev-shot-label {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.68rem;
}

.imgev-result-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.imgev-result-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.58);
}

.imgev-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vidv-player {
  aspect-ratio: 16 / 9;
  background: rgba(15, 23, 42, 0.58);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vidv-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #020617;
}

.vidv-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}

.vidv-source-thumb {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.58);
  position: relative;
}

.vidv-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vidv-source-label {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.62rem;
}

.ttsv-audio-box {
  border-radius: 10px;
  padding: 10px;
  background: rgba(15, 23, 42, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ttsv-audio-box audio {
  width: 100%;
  display: block;
}

.ttsv-key {
  color: var(--sb-secondary-text, #64748b);
  font-size: 0.66rem;
  word-break: break-all;
}

.sttv-transcript {
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-light);
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

body.app-page.is-light .imgv-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--sb-border, #e2e8f0);
}

body.app-page.is-light .ttsv-audio-box {
  background: rgba(248, 250, 252, 0.84);
  border-color: var(--sb-border, #e2e8f0);
}

body.app-page.is-light .sttv-transcript {
  background: rgba(248, 250, 252, 0.84);
  border-color: var(--sb-border, #e2e8f0);
}

.form-control.bg-transparent::placeholder {
  color: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

.form-control.bg-transparent:focus {
  background: rgba(14, 165, 233, 0.06) !important;
  border-color: rgba(14, 165, 233, 0.5) !important;
  color: #fff;
  box-shadow: 0 0 0 0.2rem rgba(14, 165, 233, 0.15);
}

.input-group-text {
  border-radius: 8px 0 0 8px;
}


.dropdown-menu.glass-effect .dropdown-item.text-danger:hover,
.dropdown-menu.glass-effect .dropdown-item.text-danger:focus {
  background: rgba(255, 107, 107, 0.15) !important;
}

.card-premium {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s;
}

.card-premium:hover {
  transform: translateY(-5px);
}

.icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

/* ─── App Shell Layout (Full-height Sidebar, No Top Navbar) ─────────────────── */
body.app-page {
  padding-top: 0 !important;
  background-color: var(--bg-color); /* ← explicit: รับค่าจาก CSS var ที่ JS ตั้งบน <html> */
  color: var(--text-light);          /* ← explicit: รับค่าจาก CSS var ที่ JS ตั้งบน <html> */
  --bs-secondary-color: rgba(240,249,255,0.68);
  /* Theme CSS variables (ธีมบลู คือ default - JS จะ override ด้วย inline style) */
  --sb-bg:             #0c1422;
  --sb-border:         rgba(14,165,233,0.12);
  --sb-text:           rgba(255,255,255,0.5);
  --sb-text-hover:     #e2e8f0;
  --sb-hover:          rgba(255,255,255,0.06);
  --sb-active-bg:      rgba(14,165,233,0.15);
  --sb-active-color:   #38bdf8;
  --sb-divider:        rgba(255,255,255,0.06);
  --sb-scrollbar:      rgba(14,165,233,0.2);
  --sb-secondary-text: rgba(255,255,255,0.45); /* email, labels */
  --sb-tertiary-text:  rgba(255,255,255,0.3);  /* limits, muted */
  --sb-balance-bar:    rgba(255,255,255,0.1);  /* progress bar track */
}

body.app-page::before {
  display: none; /* ปิด bg animation เพื่อประหยัด GPU บน app pages */
}

.app-layout {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 250px;
  min-width: 250px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-scrollbar) transparent;
  transition: background 0.25s, border-color 0.25s;
}

.app-sidebar::-webkit-scrollbar { width: 3px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--sb-scrollbar); border-radius: 4px; }

/* table-responsive scrollbar — ซ่อน corner สีขาว */
.table-responsive::-webkit-scrollbar { height: 4px; }
.table-responsive::-webkit-scrollbar-thumb { background: rgba(14,165,233,0.25); border-radius: 4px; }
.table-responsive::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-corner { background: transparent; }

.app-content {
  margin-left: 250px;
  flex: 1;
  min-width: 0;
  padding: 32px 36px;
  min-height: 100vh;
}

.sidebar-divider {
  height: 1px;
  background: var(--sb-divider);
  border: none;
  margin: 0;
}

.sidebar-section {
  padding: 14px 14px;
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--sb-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
  -webkit-text-fill-color: unset;
  text-shadow: none;
}

.sidebar-nav-link:hover {
  background: var(--sb-hover);
  color: var(--sb-text-hover);
  -webkit-text-fill-color: var(--sb-text-hover);
  text-shadow: none;
}

.sidebar-nav-link.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-color);
  -webkit-text-fill-color: var(--sb-active-color);
}

.sidebar-nav-link i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 10px;
}

/* ─── Sidebar แบบปักหมุดท้าย (โลโก้บน → เมนูเลื่อน → บัญชีล่าง) ──────────
   ⚠️ ใส่ .has-pinned-footer เฉพาะ sidebar ผู้ใช้ ห้ามแก้ .app-sidebar ตรง ๆ
      เพราะ app_sidebar_admin.ejs ใช้คลาสเดียวกันและยังต้องการเลื่อนทั้งก้อนแบบเดิม
   เหตุผลที่ต้องปักหมุด: ThaiProMax หักพอยต์/เครดิตทุกบริการ ยอดคงเหลือจึงต้องเห็นตลอด
   ถ้าปล่อยให้เลื่อนไปกับเมนู พอผู้ใช้เลื่อนดูเมนูล่าง ๆ ยอดจะหลุดออกนอกจอทันที */
.app-sidebar.has-pinned-footer {
  overflow: hidden; /* ย้ายหน้าที่เลื่อนไปไว้ที่ .sidebar-scroll แทน */
}

.sidebar-scroll {
  flex: 1;
  min-height: 0; /* จำเป็นกับ flex child ที่ต้องเลื่อน ไม่งั้นมันจะดันสูงจนล้นแทนที่จะเลื่อน */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-scrollbar) transparent;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--sb-divider);
  background: var(--sb-bg);
}

.sidebar-user-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sb-text-hover);
  text-align: left;
  transition: background 0.15s;
}

.sidebar-user-trigger:hover {
  background: var(--sb-hover);
}

.sidebar-user-menu {
  min-width: 222px;
  padding: 6px;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  background: var(--sb-bg);
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.22);
  /* ⚠️ ต้องจำกัดความสูง เพราะ .has-pinned-footer เป็น overflow:hidden — เมนูที่สูงเกิน
     พื้นที่ sidebar จะโดนตัดหายโดยไม่มีทางเลื่อนดู (จอเตี้ยหรือย่อหน้าต่างจะเจอ) */
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sb-scrollbar) transparent;
}

.sidebar-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--sb-text);
  font-size: 0.85rem;
}

.sidebar-user-menu .dropdown-item:hover,
.sidebar-user-menu .dropdown-item:focus {
  background: var(--sb-hover);
  color: var(--sb-text-hover);
}

/* ⚠️ ต้องประกาศเอง ห้ามปล่อยให้ .dropdown-item.active ของ Bootstrap ทำงานตามลำพัง
   Bootstrap ให้พื้นหลังน้ำเงินทึบ + ตัวหนังสือขาว แต่กฎ .sidebar-user-menu .dropdown-item
   ด้านบนมี specificity เท่ากันและมาทีหลัง จึงชนะเฉพาะ color → ได้ตัวหนังสือสีเข้ม
   บนพื้นน้ำเงินทึบ อ่านแทบไม่ออก (เป็นมาตั้งแต่ยังไม่มีกฎนี้)
   ใช้ตัวแปรชุดเดียวกับ .sidebar-nav-link.active เพื่อให้หน้าตาตรงกันและถูกต้องทั้ง 4 ธีม */
.sidebar-user-menu .dropdown-item.active,
.sidebar-user-menu .dropdown-item:active {
  background: var(--sb-active-bg);
  color: var(--sb-active-color);
  -webkit-text-fill-color: var(--sb-active-color);
}

/* เมนูบัญชีที่กำลังเปิดอยู่ — ให้ปุ่มด้านล่าง sidebar รู้ตัวว่าอยู่หน้าไหน แบบเดียวกับเมนูหลัก */
.sidebar-user-trigger.active {
  background: var(--sb-active-bg);
  color: var(--sb-active-color);
}

.sidebar-user-menu .dropdown-item i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-user-menu .dropdown-divider {
  margin: 5px 2px;
  border-top: 1px solid var(--sb-divider);
  opacity: 1;
}

/* ─── Launch Navigation + Service Hubs ─────────────────────────────────── */
.sidebar-main-navigation {
  flex: 1;
  padding-bottom: 8px;
}

.sidebar-nav-label {
  margin: 14px 12px 6px;
  color: var(--sb-tertiary-text);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-nav-label:first-child {
  margin-top: 0;
}

.sidebar-nav-text {
  flex: 1;
}

.sidebar-nav-badge {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--sb-border);
  border-radius: 999px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.58rem;
  font-weight: 700;
}

.launch-hub-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

/* ── แบนเนอร์หัวหมวดที่มีภาพพื้นหลัง (HUB_CATALOG.heroImageUrl → --hero-bg) ──
   veil เบากว่าการ์ดได้เพราะตัวอักษรใหญ่กว่า แต่ยังต้องมี — คำบรรยายใช้สีจาง
   (--bs-secondary-color) ซึ่งอ่านไม่ออกทันทีถ้าวางบนภาพเปล่า
   background-origin: border-box จำเป็นด้วยเหตุผลเดียวกับการ์ด (กันรูปโผล่เป็นเส้น 1px ที่ขอบ) */
.launch-hub-hero.has-bg {
  background-image:
    linear-gradient(100deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.80) 40%, rgba(15, 23, 42, 0.50) 100%),
    var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box;
}

/* ธีมโทนสว่าง (light/warm/pink) — ตัวหนังสือเข้ม จึงต้องเป็น veil สีขาวแทน */
body.app-page.is-light .launch-hub-hero.has-bg {
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.84) 40%, rgba(255, 255, 255, 0.55) 100%),
    var(--hero-bg);
}

.launch-hub-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 1.45rem;
}

.launch-page-title {
  margin: 0 0 4px;
  color: var(--text-light);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700;
}

.launch-page-subtitle {
  margin: 0;
  color: var(--bs-secondary-color);
}

.launch-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.launch-section-heading h2 {
  margin: 0 0 3px;
  color: var(--text-light);
  font-size: 1.08rem;
  font-weight: 700;
}

.launch-section-heading p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.launch-service-count {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  white-space: nowrap;
}

.launch-service-card {
  min-height: 150px;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  position: relative;
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  color: var(--text-light);
  background: var(--glass-bg);
  text-decoration: none;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.launch-service-card:hover {
  color: var(--text-light);
  border-color: var(--sb-active-color);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.launch-service-card.is-planned {
  border-style: dashed;
  opacity: 0.5;
}

.launch-service-card.is-planned:hover {
  border-color: var(--glass-border);
  box-shadow: none;
  transform: none;
}

/* ── การ์ดบริการที่มีภาพพื้นหลัง (SERVICE_CATALOG.url → --card-bg) ──
   ต้องมี veil ทับภาพเสมอ ไม่ใช่แค่ความสวย: ตัวอักษรใช้ var(--text-light) ซึ่งสลับขั้วตามธีม
   (ธีมมืด = ตัวหนังสือสว่าง / ธีมสว่าง = ตัวหนังสือเข้ม) ถ้าวางบนภาพเปล่าจะมีธีมหนึ่งอ่านไม่ออกเสมอ
   ไล่เฉดจากซ้าย (ทึบ ตรงที่มีข้อความ) ไปขวา (จางลง ปล่อยให้เห็นภาพ) */
.launch-service-card.has-bg {
  background-image:
    linear-gradient(100deg, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.86) 45%, rgba(15, 23, 42, 0.60) 100%),
    var(--card-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* ⚠️ ต้องมี ไม่งั้นเห็นรูปโผล่เป็นเส้น 1px ตามขอบบน-ล่าง โดยไม่มี veil ทับ
     ค่าเริ่มต้นคือจัดขนาดตาม padding box แต่วาดถึง border box → รูปมีอัตราส่วนจริง
     cover จึงขยายจนล้นไปโดนแถบ border ส่วน gradient ไม่มีอัตราส่วน cover เลยพอดี
     padding box ไม่ล้นตาม → แถบ border มีแต่รูปไม่มี veil · ตรึงทั้งสองเลเยอร์ให้อ้างกรอบเดียวกัน */
  background-origin: border-box;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s, background-image 0.18s;
}

.launch-service-card.has-bg:hover {
  background-image:
    linear-gradient(100deg, rgba(15, 23, 42, 0.90) 0%, rgba(15, 23, 42, 0.78) 45%, rgba(15, 23, 42, 0.44) 100%),
    var(--card-bg);
}

/* ธีมโทนสว่าง (light/warm/pink) — ตัวหนังสือเข้ม จึงต้องเป็น veil สีขาวแทน */
body.app-page.is-light .launch-service-card.has-bg {
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.64) 100%),
    var(--card-bg);
}

body.app-page.is-light .launch-service-card.has-bg:hover {
  background-image:
    linear-gradient(100deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.80) 45%, rgba(255, 255, 255, 0.48) 100%),
    var(--card-bg);
}

.launch-service-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 1.05rem;
}

.launch-service-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-right: 68px;
  padding-bottom: 25px;
}

.launch-service-body strong {
  margin: 3px 0 5px;
  color: var(--text-light);
  font-size: 0.95rem;
}

.launch-service-body > span:last-child {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.55;
}

.launch-service-group {
  color: var(--sb-active-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.launch-service-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* ป้าย "โปรเจค" — ติดเฉพาะบริการที่สร้างโปรเจคแล้วกลับมาทำต่อได้ ที่เหลือไม่ติดป้าย
   เพราะป้ายมีไว้ชี้ข้อยกเว้น ไม่ใช่ประกาศค่าปกติ */
.launch-service-project {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--glass-bg);
  color: var(--bs-info);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.35;
}

.launch-service-project i {
  font-size: 0.6rem;
}

.launch-service-arrow {
  position: absolute;
  right: 17px;
  bottom: 16px;
  color: var(--sb-active-color);
}

.launch-service-modalities {
  position: absolute;
  left: 75px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bs-secondary-color);
}

.launch-service-media-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.launch-service-media-label {
  margin-right: 1px;
  font-size: 0.63rem;
  font-weight: 600;
}

.launch-service-media-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.72rem;
}

.launch-service-media-arrow {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.launch-service-status {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 3px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  font-size: 0.6rem;
  font-weight: 700;
}

.launch-service-status.is-ready {
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

/* ── สถานะการพิจารณาคุณภาพบริการ (เห็นเฉพาะ systemRole: admin) ────────────────
   ใช้ตอนไล่คัดว่าบริการไหน "คนใช้แล้วดีจริง" บริการไหนต้องรื้อทำใหม่
   สีล็อกไว้ ไม่ผูกกับธีม เพราะเป็นสัญญาณเตือนที่ต้องอ่านออกเท่ากันทุกธีม
   แถบซ้ายมีไว้ให้กวาดตาทั้งหน้าแล้วเห็นทันทีว่าเหลือสีแดงกี่ใบ ไม่ต้องอ่านป้ายทีละใบ */
.launch-service-card.is-review-pending { border-left: 4px solid #f2d16b; }
.launch-service-card.is-review-good    { border-left: 4px solid #2ea36a; }
.launch-service-card.is-review-rework  { border-left: 4px solid #f97316; }
.launch-service-card.is-review-drop    { border-left: 4px solid #e5484d; }

.launch-service-review {
  position: absolute;
  right: 15px;
  top: 40px;                 /* ใต้ป้าย "พร้อมใช้" ที่อยู่ top: 15px */
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
}

/* ตัวอักษรเข้มบนพื้นเหลือง/ส้ม เพราะสีขาวบนสองสีนี้อ่านไม่ออก */
.is-review-pending .launch-service-review { color: #10131a;  background: #f2d16b; }
.is-review-good    .launch-service-review { color: #fff;     background: #2ea36a; }
.is-review-rework  .launch-service-review { color: #10131a;  background: #f97316; }
.is-review-drop    .launch-service-review { color: #fff;     background: #e5484d; }

.launch-review-progress {
  padding: 3px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.launch-empty-state {
  padding: 54px 24px;
  border: 1px dashed var(--glass-border);
  border-radius: 18px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  text-align: center;
}

.launch-empty-state > i {
  display: block;
  margin-bottom: 10px;
  font-size: 2rem;
}

.launch-empty-state h2 {
  color: var(--text-light);
  font-size: 1.1rem;
}

@media (max-width: 575px) {
  .launch-hub-hero {
    align-items: flex-start;
    padding: 19px;
  }

  .launch-hub-icon {
    width: 46px;
    height: 46px;
  }

  .launch-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

/* ─── Launch Hub Filter (ตัวกรองบริการในหน้า Hub: ค้นหา + pill หมวด + เฉพาะพร้อมใช้) ─── */
.launch-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
}

.launch-filter-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 200px;
}

.launch-filter-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  pointer-events: none;
}

.launch-filter-search .input-theme {
  padding-left: 34px;
  font-size: 0.85rem;
}

.launch-filter-media {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.launch-filter-media > i {
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.launch-filter-media .select-theme {
  width: auto;
  min-width: 125px;
  font-size: 0.75rem;
}

.launch-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.launch-filter-pill {
  padding: 5px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.launch-filter-pill:hover {
  color: var(--text-light);
  border-color: var(--sb-active-color);
}

.launch-filter-pill.is-active {
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  border-color: var(--sb-active-color);
}

.launch-filter-pill span {
  opacity: 0.65;
  font-weight: 500;
}

.launch-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

/* ─── โหมดแสดงผลของหน้า hub: การ์ด / ลิสต์ ────────────────────────────────
   ปุ่มสลับอยู่ในแถบตัวกรอง · ค่าที่เลือกจำไว้ใน localStorage (สคริปต์อยู่ใน views/services/hub.ejs)
   เหตุผลที่ต้องมี: บนมือถือหน้า /work มี 63 บริการ ต้องเลื่อนกว่า 11,000px (~28 จอ)
   โหมดลิสต์ตัดรูปพื้นหลัง ป้ายสถานะ ป้ายหมวด และแถวไอคอนอินพุต/ผลลัพธ์ออก
   เหลือ ไอคอน + ชื่อ + คำอธิบายบรรทัดเดียว → สูงราว 64px จากเดิม ~175px (ลดราว 64%)

   ⚠️ ทำเป็น override ของ .launch-service-card ตัวเดิม ห้ามสร้างการ์ดชุดที่สอง
      เพราะตัวกรอง ตัวนับ และป้ายสถานะ review อ้าง DOM ชุดเดียวกันหมด
      ถ้าแยกโครงจะต้องไล่แก้ JS ตัวกรองตามอีกชุด
   ⚠️ ไม่ตั้งสีเองสักจุด ใช้ตัวแปรธีมกลางล้วน — โหมดลิสต์จึงสลับธีมได้เหมือนการ์ด */
.launch-view-toggle {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}

/* คอลัมน์ของ Bootstrap (.col-md-6 .col-xl-4) ต้องถูกทับให้เต็มแถว — ตัวเลือกนี้จำเพาะกว่าจึงชนะ */
[data-hub-view="list"] .row > [data-filter-item] {
  flex: 0 0 100%;
  max-width: 100%;
}

[data-hub-view="list"] .row {
  --bs-gutter-y: 0.5rem;
}

[data-hub-view="list"] .launch-service-card {
  min-height: 0;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 12px;
}

/* รูปพื้นหลังคือตัวที่กินความสูงและแบนด์วิดท์มากสุด — โหมดลิสต์ตัดทิ้งทั้ง veil และรูป */
[data-hub-view="list"] .launch-service-card.has-bg,
[data-hub-view="list"] .launch-service-card.has-bg:hover {
  background-image: none;
}

[data-hub-view="list"] .launch-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 0.9rem;
}

[data-hub-view="list"] .launch-service-body {
  padding: 0 30px 0 0;
}

[data-hub-view="list"] .launch-service-body strong {
  margin: 0;
  font-size: 0.88rem;
}

/* คำอธิบายเหลือบรรทัดเดียว ตัดด้วย ellipsis — min-width:0 ของ .launch-service-body ทำให้ตัดได้จริง */
[data-hub-view="list"] .launch-service-body > span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  line-height: 1.4;
}

[data-hub-view="list"] .launch-service-meta,
[data-hub-view="list"] .launch-service-modalities,
[data-hub-view="list"] .launch-service-status {
  display: none;
}

[data-hub-view="list"] .launch-service-arrow {
  top: 50%;
  bottom: auto;
  right: 13px;
  transform: translateY(-50%);
}

/* ป้ายพิจารณาคุณภาพเป็นเครื่องมือของแอดมิน ต้องเห็นในโหมดลิสต์ด้วย จึงย้ายมาชิดขวากลางแถวแทน */
[data-hub-view="list"] .launch-service-review {
  top: 50%;
  right: 34px;
  transform: translateY(-50%);
}

/* ─── Launch Dashboard ─────────────────────────────────────────────────── */
.launch-announcement-content {
  white-space: pre-wrap;
}

.launch-dashboard-hero {
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}

.launch-dashboard-copy {
  position: relative;
  z-index: 1;
}

.launch-dashboard-kicker {
  color: var(--sb-active-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.launch-dashboard-copy h1 {
  margin: 6px 0 8px;
  color: var(--text-light);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 700;
}

.launch-dashboard-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--bs-secondary-color);
}

.launch-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.launch-dashboard-symbol {
  color: var(--sb-active-color);
  font-size: 7rem;
  opacity: 0.13;
  transform: rotate(8deg);
}

.launch-feature-card {
  min-height: 190px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  color: var(--text-light);
  background: var(--glass-bg);
  text-decoration: none;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.launch-feature-card:hover {
  color: var(--text-light);
  border-color: var(--sb-active-color);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.launch-feature-primary {
  border-color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.launch-feature-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--sb-active-color);
  background: var(--glass-bg);
  font-size: 1.05rem;
}

.launch-feature-label {
  margin-bottom: 3px;
  color: var(--sb-active-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.launch-feature-card strong {
  margin-bottom: 6px;
  font-size: 1rem;
}

.launch-feature-card > span:nth-last-of-type(1) {
  padding-right: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.55;
}

.launch-feature-arrow {
  position: absolute;
  right: 18px;
  bottom: 17px;
  color: var(--sb-active-color);
}

.launch-dashboard-panel {
  padding: 21px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.launch-path-list {
  display: grid;
  gap: 8px;
}

.launch-path-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 12px;
  color: var(--text-light);
  background: var(--sb-hover);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}

.launch-path-item:hover {
  color: var(--text-light);
  background: var(--sb-active-bg);
  transform: translateX(2px);
}

.launch-path-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--sb-active-color);
  background: var(--glass-bg);
}

.launch-path-item strong,
.launch-path-item small {
  display: block;
}

.launch-path-item small {
  margin-top: 2px;
  color: var(--bs-secondary-color);
}

.launch-legacy-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 23px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--sb-active-bg);
}

.launch-legacy-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--sb-active-color);
  background: var(--glass-bg);
  font-size: 1.2rem;
}

.launch-legacy-banner span {
  color: var(--sb-active-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.launch-legacy-banner h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.05rem;
}

.launch-legacy-banner p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

@media (max-width: 767px) {
  .launch-dashboard-hero {
    min-height: 0;
    padding: 25px 20px;
  }

  .launch-dashboard-symbol {
    position: absolute;
    right: 18px;
    top: 8px;
    font-size: 5rem;
  }

  .launch-legacy-banner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .launch-legacy-banner .btn {
    grid-column: 1 / -1;
  }
}

/* ─── Content Studio: Strategy Review ──────────────────────────────────── */
.content-studio-strategy-empty {
  padding: 48px 26px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  text-align: center;
}

.content-studio-strategy-empty h2 {
  margin: 8px 0 7px;
  color: var(--text-light);
  font-size: 1.35rem;
}

.content-studio-strategy-empty > p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--bs-secondary-color);
}

.content-studio-estimate {
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px auto;
}

.content-studio-estimate > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--sb-hover);
  text-align: left;
}

.content-studio-estimate small,
.content-studio-estimate strong {
  display: block;
}

.content-studio-estimate small {
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
}

.content-studio-estimate strong {
  margin-top: 3px;
  color: var(--text-light);
  font-size: 0.8rem;
}

.content-studio-estimate-note {
  margin-top: 12px !important;
  font-size: 0.68rem;
}

.content-studio-strategy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.content-studio-pillar-list {
  display: grid;
  gap: 12px;
}

.content-studio-pillar-editor {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--sb-hover);
}

.content-studio-pillar-editor > div {
  grid-column: 2;
}

.content-studio-pillar-number {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / 4;
  border-radius: 11px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.8rem;
  font-weight: 700;
}

.content-studio-version-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.content-studio-version-list > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
}

.content-studio-version-list > span.is-current {
  color: var(--sb-active-color);
  border-color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-studio-version-list strong,
.content-studio-version-list small {
  font-size: inherit;
}

@media (max-width: 991px) {
  .content-studio-strategy-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .content-studio-estimate {
    grid-template-columns: 1fr;
  }

  .content-studio-pillar-editor {
    grid-template-columns: 1fr;
  }

  .content-studio-pillar-editor > div {
    grid-column: 1;
  }

  .content-studio-pillar-number {
    grid-row: auto;
  }
}

/* ─── Content Studio: Project + Brief CRUD ─────────────────────────────── */
.content-studio-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.content-studio-page-header h1 {
  margin: 4px 0 5px;
  color: var(--text-light);
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  font-weight: 700;
}

.content-studio-page-header p {
  max-width: 760px;
  margin: 0;
  color: var(--bs-secondary-color);
}

.content-studio-kicker {
  color: var(--sb-active-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.content-studio-empty {
  padding: 64px 24px;
  border: 1px dashed var(--glass-border);
  border-radius: 20px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  text-align: center;
}

.content-studio-empty-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border-radius: 17px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 1.6rem;
}

.content-studio-empty h2 {
  color: var(--text-light);
  font-size: 1.2rem;
}

.content-studio-empty p {
  max-width: 640px;
  margin: 0 auto 20px;
}

.content-studio-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.content-studio-project-card {
  min-height: 235px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  color: var(--text-light);
  background: var(--glass-bg);
  text-decoration: none;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}

.content-studio-project-card:hover {
  color: var(--text-light);
  border-color: var(--sb-active-color);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.content-studio-project-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.content-studio-project-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-studio-status {
  padding: 3px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.65rem;
  font-weight: 700;
}

.content-studio-project-title,
.content-studio-project-brand,
.content-studio-project-desc {
  display: block;
}

.content-studio-project-title {
  margin-bottom: 3px;
  font-size: 1rem;
}

.content-studio-project-brand {
  margin-bottom: 8px;
  color: var(--sb-active-color);
  font-size: 0.72rem;
  font-weight: 700;
}

.content-studio-project-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.content-studio-project-meta {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 15px;
  color: var(--bs-secondary-color);
  font-size: 0.67rem;
}

.content-studio-project-result-link {
  display: block;
  margin-top: 9px;
  padding-right: 28px;
  color: var(--sb-active-color);
  font-size: 0.72rem;
  font-weight: 700;
}

.content-studio-project-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: var(--sb-active-color);
}

.content-studio-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.content-studio-form-card,
.content-studio-aside-card,
.content-studio-detail-card,
.content-studio-next-card {
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.content-studio-form-card {
  overflow: hidden;
}

.content-studio-form-section {
  padding: 23px;
  border-bottom: 1px solid var(--glass-border);
}

.content-studio-form-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.content-studio-form-heading > span {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 10px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.78rem;
  font-weight: 700;
}

.content-studio-form-heading h2,
.content-studio-aside-card h2,
.content-studio-detail-heading h2,
.content-studio-next-card h2,
.content-studio-danger-zone h2 {
  margin: 0 0 3px;
  color: var(--text-light);
  font-size: 1rem;
}

.content-studio-form-heading p,
.content-studio-aside-card p,
.content-studio-detail-heading p,
.content-studio-next-card p,
.content-studio-danger-zone p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
}

.content-studio-channel-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.content-studio-channel-option {
  cursor: pointer;
}

.content-studio-channel-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.content-studio-channel-option span {
  display: inline-flex;
  padding: 7px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  font-size: 0.75rem;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.content-studio-channel-option input:checked + span {
  color: var(--sb-active-color);
  border-color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-weight: 700;
}

.content-studio-channel-option input:focus-visible + span {
  outline: 3px solid var(--sb-active-bg);
  outline-offset: 2px;
}

.content-studio-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 23px;
}

.content-studio-form-aside {
  display: grid;
  gap: 13px;
  position: sticky;
  top: 20px;
}

.content-studio-aside-card,
.content-studio-next-card {
  padding: 20px;
}

.content-studio-aside-card > i,
.content-studio-next-card > i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border-radius: 11px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 1rem;
}

.content-studio-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.content-studio-progress > i {
  color: var(--bs-secondary-color);
}

.content-studio-progress-step {
  min-width: 145px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  align-items: center;
}

.content-studio-progress-step > span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / 3;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  font-weight: 700;
}

.content-studio-progress-step strong,
.content-studio-progress-step small {
  display: block;
}

.content-studio-progress-step strong {
  color: var(--text-light);
  font-size: 0.76rem;
}

.content-studio-progress-step small {
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
}

.content-studio-progress-step.is-active > span {
  color: var(--sb-active-color);
  border-color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-studio-detail-card {
  padding: 22px;
}

.content-studio-detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.content-studio-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.content-studio-detail-list > div {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--glass-border);
}

.content-studio-detail-list dt {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.content-studio-detail-list dd {
  margin: 0;
  color: var(--text-light);
  font-size: 0.82rem;
  white-space: pre-wrap;
}

.content-studio-channel-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.content-studio-channel-badges span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.7rem;
  font-weight: 700;
}

.content-studio-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border: 1px solid rgba(220, 53, 69, 0.28);
  border-radius: 15px;
  background: rgba(220, 53, 69, 0.04);
}

@media (max-width: 991px) {
  .content-studio-form-layout {
    grid-template-columns: 1fr;
  }

  .content-studio-form-aside {
    grid-template-columns: repeat(2, 1fr);
    position: static;
  }
}

@media (max-width: 767px) {
  .content-studio-page-header,
  .content-studio-danger-zone {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-studio-form-aside {
    grid-template-columns: 1fr;
  }

  .content-studio-detail-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .content-studio-form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

/* ─── Content Studio: ปฏิทินแผนคอนเทนต์ 7 วัน ─────────────────────────── */
.content-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.content-plan-summary h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.15rem;
}

.content-plan-summary p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.content-plan-approved {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(25, 135, 84, 0.35);
  border-radius: 999px;
  color: #198754;
  background: rgba(25, 135, 84, 0.09);
  font-size: 0.75rem;
  font-weight: 700;
}

.content-plan-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 9px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.content-plan-day {
  min-height: 155px;
  display: flex;
  flex-direction: column;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text-light);
  background: var(--glass-bg);
  text-decoration: none;
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}

.content-plan-day:hover,
.content-plan-day.is-active {
  color: var(--text-light);
  border-color: var(--sb-active-color);
  background: var(--sb-active-bg);
  transform: translateY(-2px);
}

.content-plan-day-number {
  margin-bottom: 9px;
  color: var(--sb-active-color);
  font-size: 0.66rem;
  font-weight: 700;
}

.content-plan-day strong {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 7px;
  font-size: 0.78rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.content-plan-day small {
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
}

.content-plan-day-meta {
  margin-top: auto;
  padding-top: 9px;
  color: var(--sb-active-color);
  font-size: 0.62rem;
  font-weight: 700;
}

.content-plan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.content-plan-action-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
}

.content-plan-free-note {
  align-self: center;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

/* ─── Content Studio: Content Editor รายวัน ───────────────────────────── */
.content-copy-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.content-copy-status-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.content-copy-status-item {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  text-decoration: none;
}

.content-copy-status-item:hover,
.content-copy-status-item.is-active {
  color: var(--text-light);
  border-color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-copy-status-item.is-approved {
  border-color: rgba(25, 135, 84, 0.35);
}

.content-copy-status-item.is-generating {
  color: var(--sb-active-color);
  border-color: var(--sb-active-color);
}

.content-copy-status-item.is-draft {
  border-color: var(--bs-warning);
}

.content-copy-status-item.is-failed {
  color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.content-copy-status-item.is-locked {
  opacity: 0.7;
  border-style: dashed;
}

.content-copy-status-item span {
  font-size: 0.62rem;
}

.content-copy-status-item strong {
  color: inherit;
  font-size: 0.72rem;
}

/* ─── Content Studio: Batch Generation + Progress ─────────────────────── */
.content-batch-panel {
  padding: 22px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.content-batch-heading,
.content-batch-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.content-batch-progress-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.content-batch-heading h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.15rem;
}

.content-batch-heading p,
.content-batch-billing-note,
.content-batch-progress-head small,
.content-batch-item small {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.content-batch-estimate {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 18px;
}

.content-batch-estimate > div,
.content-batch-stats > span {
  padding: 11px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--sb-hover);
}

.content-batch-estimate small,
.content-batch-estimate strong,
.content-batch-stats small,
.content-batch-stats strong {
  display: block;
}

.content-batch-estimate small,
.content-batch-stats small {
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
}

.content-batch-estimate strong,
.content-batch-stats strong {
  margin-top: 2px;
  color: var(--text-light);
  font-size: 0.75rem;
}

.content-batch-billing-note {
  margin-top: 11px;
}

.content-batch-progress {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
}

.content-batch-progress-head strong,
.content-batch-item strong {
  display: block;
  color: var(--text-light);
  font-size: 0.78rem;
}

.ajax-loading-timer {
  min-width: 3.1em;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: left;
}

.content-batch-progress-head .spinner-border,
.content-batch-item .spinner-border,
.content-copy-status-item .spinner-border,
.content-plan-day-meta .spinner-border {
  width: 0.8rem;
  height: 0.8rem;
  border-width: 0.12em;
  vertical-align: -0.08em;
}

.content-batch-progress-bar {
  width: 100%;
  height: 10px;
  display: block;
  margin: 13px 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--sb-hover);
}

.content-batch-progress-bar::-webkit-progress-bar {
  background: var(--sb-hover);
}

.content-batch-progress-bar::-webkit-progress-value {
  border-radius: 999px;
  background: var(--sb-active-color);
}

.content-batch-progress-bar::-moz-progress-bar {
  border-radius: 999px;
  background: var(--sb-active-color);
}

.content-batch-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.content-batch-item-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.content-batch-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--sb-hover);
}

.content-batch-item.is-processing {
  border-color: var(--sb-active-color);
}

.content-batch-item.is-completed {
  border-color: var(--bs-success);
}

.content-batch-item.is-failed {
  border-color: var(--bs-danger);
}

.content-batch-item.is-skipped {
  opacity: 0.72;
  border-style: dashed;
}

/* ─── Content Studio: Editorial Correction Workflow ─────────────────── */
.editorial-correction-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.editorial-correction-summary > div {
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--glass-bg);
}

.editorial-correction-summary small,
.editorial-correction-summary strong {
  display: block;
}

.editorial-correction-summary small {
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
}

.editorial-correction-summary strong {
  margin-top: 3px;
  color: var(--text-light);
  font-size: 1.1rem;
}

.editorial-correction-summary .is-open { border-color: var(--bs-warning); }
.editorial-correction-summary .is-progress { border-color: var(--sb-active-color); }
.editorial-correction-summary .is-resolved { border-color: var(--bs-success); }
.editorial-correction-summary .is-dismissed { opacity: 0.72; }

.editorial-correction-board {
  padding: 22px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
}

.editorial-correction-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.editorial-correction-board-head h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.2rem;
}

.editorial-correction-board-head p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.editorial-correction-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.editorial-correction-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--sb-hover);
}

.editorial-correction-card.is-error { border-color: var(--bs-danger); }
.editorial-correction-card.is-warning { border-color: var(--bs-warning); }
.editorial-correction-card.is-info { border-color: var(--sb-active-color); }
.editorial-correction-card.is-status-resolved,
.editorial-correction-card.is-status-dismissed { opacity: 0.72; }

.editorial-correction-card-head,
.editorial-correction-actions,
.editorial-correction-days {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.editorial-correction-card-head {
  justify-content: space-between;
}

.editorial-correction-card-head span,
.editorial-correction-card-head small {
  display: block;
}

.editorial-correction-card-head span {
  color: var(--sb-active-color);
  font-size: 0.65rem;
  font-weight: 800;
}

.editorial-correction-card-head small {
  margin-top: 2px;
  color: var(--bs-secondary-color);
  font-size: 0.6rem;
}

.editorial-correction-card h3 {
  margin: 12px 0 6px;
  color: var(--text-light);
  font-size: 1rem;
}

.editorial-correction-card > p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  white-space: pre-wrap;
}

.editorial-correction-status {
  padding: 4px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text-light);
  background: var(--glass-bg);
  font-size: 0.62rem;
  white-space: nowrap;
}

.editorial-correction-status.is-open { color: var(--bs-warning); border-color: var(--bs-warning); }
.editorial-correction-status.is-in_progress { color: var(--sb-active-color); border-color: var(--sb-active-color); }
.editorial-correction-status.is-resolved { color: var(--bs-success); border-color: var(--bs-success); }

.editorial-correction-suggestion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  margin-top: 13px;
  padding: 11px;
  border-radius: 11px;
  color: var(--text-light);
  background: var(--glass-bg);
  font-size: 0.72rem;
}

.editorial-correction-suggestion i { color: var(--bs-warning); }
.editorial-correction-suggestion strong { display: block; margin-bottom: 2px; }

.editorial-correction-days { margin-top: 12px; }
.editorial-correction-days a {
  padding: 5px 10px;
  border: 1px solid var(--sb-active-color);
  border-radius: 999px;
  color: var(--sb-active-color);
  font-size: 0.68rem;
  text-decoration: none;
}

.editorial-correction-days a:hover { color: var(--text-light); background: var(--sb-active-bg); }
.editorial-correction-overall { margin-top: 12px !important; }
.editorial-correction-actions { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--glass-border); }
.editorial-correction-actions form { margin: 0; }

.editorial-correction-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 15px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--sb-active-color);
  border-radius: 16px;
  background: var(--glass-bg);
}

.editorial-correction-focus-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.editorial-correction-focus-copy h2 {
  margin: 3px 0 5px;
  color: var(--text-light);
  font-size: 1.05rem;
}

.editorial-correction-focus-copy p,
.editorial-correction-focus-copy strong {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.73rem;
}

.editorial-correction-focus-copy strong { display: block; margin-top: 8px; color: var(--text-light); }
.editorial-correction-focus-actions { display: grid; justify-items: end; gap: 8px; }
.editorial-correction-focus-actions form { margin: 0; }
.editorial-correction-ai-price {
  max-width: 260px;
  color: var(--bs-secondary-color);
  font-size: 0.67rem;
  line-height: 1.45;
  text-align: right;
}

@media (max-width: 991.98px) {
  .editorial-correction-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .editorial-correction-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-correction-board { padding: 15px; }
  .editorial-correction-board-head { flex-direction: column; }
  .editorial-correction-focus { grid-template-columns: auto minmax(0, 1fr); }
  .editorial-correction-focus-actions { grid-column: 1 / -1; width: 100%; justify-items: stretch; }
  .editorial-correction-focus-actions .btn { width: 100%; }
  .editorial-correction-ai-price { max-width: none; text-align: left; }
}

@media (max-width: 575.98px) {
  .editorial-correction-summary { grid-template-columns: minmax(0, 1fr); }
  .editorial-correction-card { padding: 14px; }
  .editorial-correction-card-head { align-items: flex-start; }
  .editorial-correction-actions .btn { width: 100%; }
  .editorial-correction-actions form { width: 100%; }
}

/* ─── Content Studio: ผลงานรวม 7 วัน ───────────────────────────────── */
.content-deliverables-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.content-deliverables-header h1 { margin: 4px 0 6px; color: var(--text-light); }
.content-deliverables-header p { max-width: 760px; margin: 0; color: var(--bs-secondary-color); }
.content-deliverables-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.content-deliverables-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--bs-info) 42%, var(--glass-border));
  border-radius: 15px;
  background: color-mix(in srgb, var(--bs-info) 8%, var(--glass-bg));
}

.content-deliverables-notice > i { color: var(--bs-info); font-size: 1.25rem; }
.content-deliverables-notice strong { display: block; color: var(--text-light); }
.content-deliverables-notice p { margin: 3px 0 0; color: var(--bs-secondary-color); font-size: 0.78rem; }

.content-deliverables-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.content-deliverables-summary > div {
  padding: 13px 15px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--glass-bg);
}

.content-deliverables-summary small { display: block; color: var(--bs-secondary-color); font-size: 0.66rem; }
.content-deliverables-summary strong { display: block; margin-top: 2px; color: var(--text-light); font-size: 1.08rem; }
.content-deliverables-list { display: grid; gap: 16px; }

.content-deliverable-card {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
}

.content-deliverable-card.is-approved { border-color: color-mix(in srgb, var(--bs-success) 48%, var(--glass-border)); }
.content-deliverable-card.is-generating { border-color: color-mix(in srgb, var(--bs-info) 55%, var(--glass-border)); }
.content-deliverable-card.is-failed { border-color: color-mix(in srgb, var(--bs-danger) 55%, var(--glass-border)); }

.content-deliverable-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px 17px;
  border-bottom: 1px solid var(--glass-border);
}

.content-deliverable-day {
  width: 52px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-deliverable-day span { font-size: 0.6rem; line-height: 1; }
.content-deliverable-day strong { font-size: 1.35rem; line-height: 1.1; }
.content-deliverable-title h2 { margin: 3px 0 0; color: var(--text-light); font-size: 1.08rem; }
.content-deliverable-state { display: grid; justify-items: end; gap: 5px; }

.content-deliverable-state > span,
.content-deliverable-state > a {
  padding: 5px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  font-size: 0.68rem;
  text-decoration: none;
}

.content-deliverable-state > span.is-approved { color: var(--bs-success); }
.content-deliverable-state > span.is-generating { color: var(--bs-info); }
.content-deliverable-state > span.is-failed,
.content-deliverable-state > a { color: var(--bs-warning); }

.content-deliverable-body {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
}

.content-deliverable-visual { display: flex; flex-direction: column; gap: 10px; }
.content-deliverable-visual > img { width: 100%; max-height: 460px; display: block; border-radius: 14px; background: var(--glass-bg); object-fit: contain; }
.content-deliverable-visual > .btn { align-self: stretch; }

.content-deliverable-image-empty,
.content-deliverable-copy-empty,
.content-deliverable-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 150px;
  padding: 18px;
  border: 1px dashed var(--glass-border);
  border-radius: 14px;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--glass-bg) 76%, transparent);
}

.content-deliverable-image-empty { min-height: 240px; flex-direction: column; justify-content: center; text-align: center; }
.content-deliverable-image-empty > i,
.content-deliverable-copy-empty > i,
.content-deliverable-empty > i { color: var(--sb-active-color); font-size: 1.7rem; }
.content-deliverable-image-empty strong,
.content-deliverable-copy-empty strong,
.content-deliverable-empty strong { color: var(--text-light); }
.content-deliverable-image-empty p,
.content-deliverable-copy-empty p,
.content-deliverable-empty p { margin: 3px 0 0; font-size: 0.75rem; }
.content-deliverable-empty { margin: 18px; min-height: 110px; }
.content-deliverable-empty > .btn { margin-left: auto; flex: 0 0 auto; }
.content-deliverable-copy { min-width: 0; }

.content-deliverable-field {
  padding: 11px 0;
  border-bottom: 1px solid var(--glass-border);
}

.content-deliverable-field:first-child { padding-top: 0; }
.content-deliverable-field small { display: block; margin-bottom: 4px; color: var(--sb-active-color); font-size: 0.63rem; font-weight: 700; letter-spacing: 0.06em; }
.content-deliverable-field p { margin: 0; color: var(--text-light); font-size: 0.82rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.content-deliverable-field.is-caption p { font-size: 0.87rem; }
.content-deliverable-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 15px; }

@media (max-width: 1199.98px) {
  .content-deliverables-header { flex-direction: column; }
  .content-deliverables-header-actions { justify-content: flex-start; }
}

@media (max-width: 991.98px) {
  .content-deliverables-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content-deliverable-body { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
  .content-deliverables-header-actions { width: 100%; }
  .content-deliverables-header-actions .btn { width: 100%; }
  .content-deliverables-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-deliverable-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .content-deliverable-state { grid-column: 1 / -1; justify-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-deliverable-state > span,
  .content-deliverable-state > a { text-align: center; }
  .content-deliverable-body { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .content-deliverable-visual > img { max-height: 520px; }
  .content-deliverable-empty { align-items: flex-start; flex-wrap: wrap; }
  .content-deliverable-empty > .btn { width: 100%; margin-left: 0; }
}

@media (max-width: 575.98px) {
  .content-deliverables-summary { grid-template-columns: minmax(0, 1fr); }
  .content-deliverable-card-head { padding: 13px; }
  .content-deliverable-card-actions .btn { width: 100%; }
}

/* ─── Content Studio: Consistency Review + ภาพรวม 7 วัน ──────────────── */
.content-review-header-actions,
.content-review-section-heading,
.content-review-day-head,
.content-review-day-footer,
.content-review-issue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.content-review-header-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.content-review-approved,
.content-review-free-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--bs-success);
  border-radius: 999px;
  color: var(--bs-success);
  font-size: 0.72rem;
  font-weight: 700;
}

.content-review-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.content-review-summary > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--glass-bg);
}

.content-review-summary small,
.content-review-summary strong {
  display: block;
}

.content-review-summary small {
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
}

.content-review-summary strong {
  margin-top: 3px;
  color: var(--text-light);
  font-size: 0.88rem;
}

.content-review-summary .is-error {
  border-color: var(--bs-danger);
}

.content-review-summary .is-warning {
  border-color: var(--bs-warning);
}

.content-review-section,
.content-review-ai-card,
.content-review-approve-card,
.content-review-history-card {
  padding: 21px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.content-review-section-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}

.content-review-section-heading h2,
.content-review-ai-card h2,
.content-review-approve-card h2,
.content-review-history-card h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.05rem;
}

.content-review-section-heading p,
.content-review-ai-card p,
.content-review-approve-card p,
.content-review-history-card p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.74rem;
}

.content-review-free-badge {
  padding: 5px 9px;
}

.content-review-day-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.content-review-day {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--sb-hover);
}

.content-review-day.is-approved {
  border-color: var(--bs-success);
}

.content-review-day-head span,
.content-review-day-head strong,
.content-review-day-footer,
.content-review-day-meta {
  font-size: 0.65rem;
}

.content-review-day-head span,
.content-review-day-footer a {
  color: var(--sb-active-color);
  font-weight: 700;
}

.content-review-day-head strong,
.content-review-day-footer,
.content-review-day-meta {
  color: var(--bs-secondary-color);
}

.content-review-day h3 {
  margin: 9px 0 3px;
  color: var(--text-light);
  font-size: 0.9rem;
}

.content-review-day-meta {
  margin: 0 0 11px;
}

.content-review-copy-block {
  padding: 9px 0;
  border-top: 1px solid var(--glass-border);
}

.content-review-copy-block small {
  color: var(--sb-active-color);
  font-size: 0.62rem;
  font-weight: 700;
}

.content-review-copy-block p {
  margin: 3px 0 0;
  color: var(--text-light);
  font-size: 0.74rem;
  white-space: pre-wrap;
}

.content-review-caption {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.content-review-day-footer {
  align-items: flex-end;
  padding-top: 9px;
  border-top: 1px solid var(--glass-border);
}

.content-review-day-footer a {
  text-decoration: none;
}

.content-review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.content-review-aside {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 20px;
}

.content-review-ai-card > i,
.content-review-approve-card > i,
.content-review-history-card > i {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  border-radius: 11px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-review-estimate {
  display: grid;
  gap: 6px;
  margin: 14px 0;
}

.content-review-estimate > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 9px;
}

.content-review-estimate small,
.content-review-estimate strong,
.content-review-note {
  font-size: 0.65rem;
}

.content-review-estimate small,
.content-review-note {
  color: var(--bs-secondary-color);
}

.content-review-estimate strong {
  color: var(--text-light);
  text-align: right;
}

.content-review-note {
  display: block;
  margin-top: 8px;
  text-align: center;
}

.content-review-empty {
  padding: 30px 18px;
  border: 1px dashed var(--glass-border);
  border-radius: 13px;
  color: var(--bs-secondary-color);
  text-align: center;
}

.content-review-empty > i {
  display: block;
  margin-bottom: 7px;
  color: var(--bs-success);
  font-size: 1.5rem;
}

.content-review-empty strong,
.content-review-empty p {
  display: block;
  margin: 0;
  font-size: 0.74rem;
}

.content-review-issue-list {
  display: grid;
  gap: 9px;
}

.content-review-issue-list.is-ai {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-review-issue {
  padding: 13px 14px;
  border: 1px solid var(--glass-border);
  border-left-width: 4px;
  border-radius: 11px;
  background: var(--sb-hover);
}

.content-review-issue.is-error {
  border-left-color: var(--bs-danger);
}

.content-review-issue.is-warning {
  border-left-color: var(--bs-warning);
}

.content-review-issue.is-info {
  border-left-color: var(--sb-active-color);
}

.content-review-issue-head span,
.content-review-issue-head small {
  font-size: 0.62rem;
  font-weight: 700;
}

.content-review-issue.is-error .content-review-issue-head span {
  color: var(--bs-danger);
}

.content-review-issue.is-warning .content-review-issue-head span {
  color: var(--bs-warning);
}

.content-review-issue.is-info .content-review-issue-head span {
  color: var(--sb-active-color);
}

.content-review-issue-head small {
  color: var(--bs-secondary-color);
}

.content-review-issue h3 {
  margin: 6px 0 3px;
  color: var(--text-light);
  font-size: 0.82rem;
}

.content-review-issue p,
.content-review-issue > strong {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.content-review-issue > strong {
  display: block;
  margin-top: 5px;
  color: var(--text-light);
  font-weight: 600;
}

.content-review-day-links,
.content-review-strengths {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.content-review-day-links a,
.content-review-strengths span {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.63rem;
  font-weight: 700;
  text-decoration: none;
}

.content-review-strengths {
  margin: 0 0 13px;
}

.content-review-strengths span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--bs-success);
}

@media (max-width: 991px) {
  .content-plan-layout {
    grid-template-columns: 1fr;
  }

  .content-batch-estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-review-layout {
    grid-template-columns: 1fr;
  }

  .content-review-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
}

/* ─── สแกนบิลและใบเสร็จ ─────────────────────────────────────────────────── */
.bill-scan-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
}

.bill-scan-panel {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.bill-scan-panel h2 {
  margin: 0;
  color: var(--text-light);
  font-size: 1.05rem;
}

.bill-scan-preview {
  display: block;
  width: 100%;
  max-height: 420px;
  margin-top: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  object-fit: contain;
}

.bill-scan-help {
  margin: 12px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.bill-scan-tips ul {
  display: grid;
  gap: 9px;
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.bill-scan-tips p {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--bs-info);
  font-size: 0.8rem;
}

.bill-scan-items {
  margin-top: 20px;
}

.bill-scan-items h3 {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.bill-scan-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--bs-success) 35%, transparent);
  border-radius: 12px;
}

.bill-scan-confirm strong,
.bill-scan-confirm span {
  display: block;
}

.bill-scan-confirm span {
  margin-top: 3px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.bill-scan-history {
  display: grid;
  gap: 8px;
}

.bill-scan-history article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--glass-border);
}

.bill-scan-history article:last-child {
  border-bottom: 0;
}

.bill-scan-history span,
.bill-scan-history strong,
.bill-scan-history small {
  display: block;
}

.bill-scan-history > article > div:first-child > span,
.bill-scan-history small {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.bill-scan-history strong {
  color: var(--text-light);
}

.bill-scan-history .finance-status {
  margin: 4px 0;
}

@media (max-width: 991.98px) {
  .bill-scan-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .bill-scan-confirm,
  .bill-scan-history article {
    align-items: stretch;
    flex-direction: column;
  }

  .bill-scan-confirm .btn {
    width: 100%;
  }

  .bill-scan-history .text-end {
    text-align: left !important;
  }
}

/* ─── ผู้ช่วยตรวจสุขภาพการเงิน ───────────────────────────────────────────── */
.finance-health-start,
.finance-health-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.finance-health-panel {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.finance-health-panel h2,
.finance-health-panel h3 {
  color: var(--text-light);
}

.finance-health-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.finance-health-panel h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.finance-health-cost,
.finance-health-disclaimer {
  margin: 12px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.finance-health-readiness,
.finance-health-metrics {
  display: grid;
  gap: 10px;
}

.finance-health-readiness {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-health-readiness > div,
.finance-health-metrics > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.finance-health-readiness strong,
.finance-health-readiness span,
.finance-health-metrics span,
.finance-health-metrics strong,
.finance-health-metrics small {
  display: block;
}

.finance-health-readiness strong {
  color: var(--text-light);
  font-size: 1.25rem;
}

.finance-health-readiness span,
.finance-health-metrics span,
.finance-health-metrics small {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.finance-health-privacy {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--bs-success) 30%, transparent);
  border-radius: 12px;
  color: var(--bs-success);
  font-size: 0.8rem;
}

.finance-health-summary {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}

.finance-health-score {
  text-align: center;
}

.finance-health-score strong {
  color: var(--bs-info);
  font-size: 3rem;
  line-height: 1;
}

.finance-health-score span {
  color: var(--bs-secondary-color);
}

.finance-health-score em {
  display: block;
  margin-top: 7px;
  color: var(--text-light);
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 700;
}

.finance-health-summary p {
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
  line-height: 1.75;
}

.finance-health-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}

.finance-health-metrics strong {
  margin: 5px 0 2px;
  color: var(--text-light);
  font-size: 1.05rem;
}

.finance-health-breakdown {
  margin-bottom: 20px;
}

.finance-health-breakdown > div {
  display: grid;
  grid-template-columns: 130px minmax(100px, 1fr) 64px;
  align-items: center;
  gap: 12px;
  margin: 9px 0;
  font-size: 0.8rem;
}

.finance-health-breakdown > div > div {
  height: 7px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--glass-border);
}

.finance-health-breakdown i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bs-info), var(--bs-success));
  transition: width 0.35s ease;
}

.finance-health-breakdown strong {
  color: var(--text-light);
  text-align: right;
}

.finance-health-insights {
  margin-bottom: 20px;
}

.finance-health-insights article {
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.finance-health-insights ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.finance-health-actions > div {
  display: grid;
  gap: 9px;
}

.finance-health-actions article {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.finance-health-actions strong,
.finance-health-actions p {
  display: block;
}

.finance-health-actions p {
  margin: 3px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.finance-health-priority {
  align-self: start;
  padding: 4px 8px;
  border: 1px solid var(--bs-success);
  border-radius: 999px;
  color: var(--bs-success);
  font-size: 0.68rem;
  text-align: center;
}

.finance-health-priority.is-important {
  border-color: var(--bs-warning);
  color: var(--bs-warning);
}

.finance-health-priority.is-urgent {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.finance-health-history {
  display: grid;
  gap: 8px;
}

.finance-health-history article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.45fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.finance-health-history article:last-child {
  border-bottom: 0;
}

.finance-health-history strong,
.finance-health-history span {
  display: block;
}

.finance-health-history span,
.finance-health-history time {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

@media (max-width: 991.98px) {
  .finance-health-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .finance-health-start,
  .finance-health-insights,
  .finance-health-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-health-history article {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}

@media (max-width: 575.98px) {
  .finance-health-readiness,
  .finance-health-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-health-breakdown > div {
    grid-template-columns: 100px minmax(70px, 1fr) 58px;
    gap: 7px;
  }

  .finance-health-actions article {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-health-priority {
    justify-self: start;
  }
}

/* ─── สรุปชีวิตรายสัปดาห์ ───────────────────────────────────────────────── */
.weekly-review-start,
.weekly-review-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.weekly-review-panel {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.weekly-review-panel h2,
.weekly-review-panel h3 {
  color: var(--text-light);
}

.weekly-review-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.weekly-review-panel h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.weekly-review-sensitive,
.weekly-review-privacy {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
}

.weekly-review-privacy {
  color: var(--bs-info);
}

.weekly-review-cost,
.weekly-review-disclaimer {
  margin: 12px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.weekly-review-readiness {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.weekly-review-readiness > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.weekly-review-readiness strong,
.weekly-review-readiness span {
  display: block;
}

.weekly-review-readiness strong {
  color: var(--text-light);
  font-size: 1.3rem;
}

.weekly-review-readiness span {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.weekly-review-coverage {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.weekly-review-coverage span {
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-info);
  font-size: 0.7rem;
}

.weekly-review-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.weekly-review-overview i {
  color: var(--bs-info);
  font-size: 1.4rem;
}

.weekly-review-overview p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.86rem;
  line-height: 1.75;
}

.weekly-review-columns {
  margin-bottom: 20px;
}

.weekly-review-columns > article {
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.weekly-review-list {
  display: grid;
  gap: 8px;
}

.weekly-review-list > div {
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.weekly-review-list > div:last-child {
  border-bottom: 0;
}

.weekly-review-list strong,
.weekly-review-list p {
  display: block;
}

.weekly-review-list strong {
  color: var(--text-light);
  font-size: 0.8rem;
}

.weekly-review-list p {
  margin: 3px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.weekly-review-followups,
.weekly-review-reflection {
  margin-top: 20px;
}

.weekly-review-followups > div {
  display: grid;
  gap: 8px;
}

.weekly-review-followups article {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.weekly-review-followups time {
  color: var(--bs-info);
  font-size: 0.78rem;
  font-weight: 700;
}

.weekly-review-followups strong,
.weekly-review-followups span {
  display: block;
}

.weekly-review-followups span {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.weekly-review-followups em {
  padding: 3px 8px;
  border: 1px solid var(--bs-secondary-color);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  font-size: 0.67rem;
  font-style: normal;
}

.weekly-review-followups em.is-high {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.weekly-review-reflection ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.weekly-review-history {
  display: grid;
  gap: 8px;
}

.weekly-review-history article {
  display: grid;
  grid-template-columns: minmax(200px, 0.7fr) minmax(280px, 1.3fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.weekly-review-history article:last-child {
  border-bottom: 0;
}

.weekly-review-history strong,
.weekly-review-history span {
  display: block;
}

.weekly-review-history span,
.weekly-review-history time,
.weekly-review-history p {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.weekly-review-history p {
  margin: 0;
}

@media (max-width: 767.98px) {
  .weekly-review-start,
  .weekly-review-columns,
  .weekly-review-history article {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .weekly-review-readiness {
    grid-template-columns: minmax(0, 1fr);
  }

  .weekly-review-followups article {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .weekly-review-followups em {
    justify-self: start;
  }
}

/* ─── ผู้ช่วยวางแผนวันและสัปดาห์ ────────────────────────────────────────── */
.life-planner-start {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: 14px;
}

/* ─── เตรียมข้อมูลก่อนพบแพทย์ ───────────────────────────────────────────── */
.doctor-prep-start {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
}

/* ─── ผู้ช่วยติดตามเป้าหมาย ─────────────────────────────────────────────── */
.goal-tracker-start {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
}

/* ─── ผู้ช่วยดูแลทรัพย์สิน ──────────────────────────────────────────────── */
.asset-care-start {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 14px;
}

.asset-care-panel {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.asset-care-panel h2,
.asset-care-panel h3 {
  color: var(--text-light);
}

.asset-care-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.asset-care-selected,
.asset-care-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.asset-care-selected > div,
.asset-care-metrics article,
.asset-care-count {
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.asset-care-selected span,
.asset-care-selected strong,
.asset-care-metrics span,
.asset-care-metrics strong,
.asset-care-count span,
.asset-care-count strong {
  display: block;
}

.asset-care-selected span,
.asset-care-metrics span,
.asset-care-count span,
.asset-care-cost,
.asset-care-disclaimer,
.asset-care-history span,
.asset-care-history time,
.asset-care-caution {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.asset-care-selected strong {
  margin-top: 4px;
  font-size: 0.84rem;
}

.asset-care-count strong {
  color: var(--text-light);
  font-size: 1.45rem;
}

.asset-care-caution {
  padding: 11px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.asset-care-rules {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.asset-care-cost,
.asset-care-disclaimer {
  margin: 10px 0 0;
}

.asset-care-metrics {
  margin-top: 14px;
}

.asset-care-metrics strong {
  margin-top: 4px;
  font-size: 1.2rem;
}

.asset-care-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.asset-care-overview i {
  color: var(--bs-info);
  font-size: 1.2rem;
}

.asset-care-overview p {
  margin: 0;
  line-height: 1.65;
}

.asset-care-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.asset-care-columns > section,
.asset-care-schedule,
.asset-care-records,
.asset-care-missing,
.asset-care-questions {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.asset-care-schedule,
.asset-care-records,
.asset-care-missing,
.asset-care-questions {
  margin-top: 16px;
}

.asset-care-columns h3,
.asset-care-schedule h3,
.asset-care-records h3,
.asset-care-missing h3,
.asset-care-questions h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
}

.asset-care-list,
.asset-care-schedule > div,
.asset-care-records > div,
.asset-care-history {
  display: grid;
  gap: 9px;
}

.asset-care-list article,
.asset-care-history article {
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.asset-care-list strong,
.asset-care-list p,
.asset-care-list span,
.asset-care-history strong,
.asset-care-history span {
  display: block;
}

.asset-care-list p,
.asset-care-schedule p,
.asset-care-records p {
  margin: 4px 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.asset-care-list span {
  color: var(--bs-info);
  font-size: 0.68rem;
}

.asset-care-schedule article,
.asset-care-records article {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.asset-care-schedule article:last-child,
.asset-care-records article:last-child {
  border-bottom: 0;
}

.asset-care-schedule time,
.asset-care-records time {
  color: var(--bs-info);
  font-size: 0.74rem;
  font-weight: 700;
}

.asset-care-schedule em,
.asset-care-records em {
  padding: 4px 8px;
  border: 1px solid var(--bs-info);
  border-radius: 999px;
  color: var(--bs-info);
  font-size: 0.67rem;
  font-style: normal;
}

.asset-care-schedule em.is-review,
.asset-care-records em.is-review {
  border-color: var(--bs-warning);
  color: var(--bs-warning);
}

.asset-care-missing > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.asset-care-missing span {
  padding: 5px 9px;
  border: 1px solid var(--bs-warning);
  border-radius: 999px;
  color: var(--bs-warning);
  font-size: 0.72rem;
}

.asset-care-questions ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.asset-care-questions li {
  font-size: 0.8rem;
}

.asset-care-history article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 991.98px) {
  .asset-care-start,
  .asset-care-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-care-selected,
  .asset-care-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .asset-care-selected,
  .asset-care-metrics,
  .asset-care-schedule article,
  .asset-care-records article {
    grid-template-columns: minmax(0, 1fr);
  }

  .asset-care-schedule em,
  .asset-care-records em {
    justify-self: start;
  }
}

.goal-tracker-panel {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.goal-tracker-panel h2,
.goal-tracker-panel h3 {
  color: var(--text-light);
}

.goal-tracker-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.goal-tracker-selected,
.goal-tracker-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.goal-tracker-selected > div,
.goal-tracker-metrics article,
.goal-tracker-count {
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.goal-tracker-selected span,
.goal-tracker-selected strong,
.goal-tracker-metrics span,
.goal-tracker-metrics strong,
.goal-tracker-count span,
.goal-tracker-count strong {
  display: block;
}

.goal-tracker-selected span,
.goal-tracker-metrics span,
.goal-tracker-count span,
.goal-tracker-cost,
.goal-tracker-disclaimer,
.goal-tracker-history span,
.goal-tracker-history time {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.goal-tracker-selected strong {
  margin-top: 4px;
  font-size: 0.88rem;
}

.goal-tracker-count strong {
  color: var(--text-light);
  font-size: 1.45rem;
}

.goal-tracker-rules {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.goal-tracker-cost,
.goal-tracker-disclaimer {
  margin: 10px 0 0;
}

.goal-tracker-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.goal-tracker-metrics strong {
  margin-top: 4px;
  font-size: 1rem;
}

.goal-tracker-metrics progress {
  width: 100%;
  height: 7px;
  margin-top: 8px;
  accent-color: var(--bs-info);
}

.goal-tracker-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.goal-tracker-overview i {
  color: var(--bs-info);
  font-size: 1.2rem;
}

.goal-tracker-overview p {
  margin: 0;
  line-height: 1.65;
}

.goal-tracker-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.goal-tracker-columns > section,
.goal-tracker-next,
.goal-tracker-events,
.goal-tracker-questions {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.goal-tracker-next,
.goal-tracker-events,
.goal-tracker-questions {
  margin-top: 16px;
}

.goal-tracker-columns h3,
.goal-tracker-next h3,
.goal-tracker-events h3,
.goal-tracker-questions h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
}

.goal-tracker-list,
.goal-tracker-next > div,
.goal-tracker-events > div,
.goal-tracker-history {
  display: grid;
  gap: 9px;
}

.goal-tracker-list article,
.goal-tracker-history article {
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.goal-tracker-list strong,
.goal-tracker-list p,
.goal-tracker-list span,
.goal-tracker-next strong,
.goal-tracker-next p,
.goal-tracker-next span,
.goal-tracker-history strong,
.goal-tracker-history span {
  display: block;
}

.goal-tracker-list p,
.goal-tracker-next p,
.goal-tracker-events p {
  margin: 4px 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.goal-tracker-list span,
.goal-tracker-next span {
  color: var(--bs-info);
  font-size: 0.68rem;
}

.goal-tracker-next article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.goal-tracker-next b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--bs-info);
  border-radius: 50%;
  color: var(--bs-info);
}

.goal-tracker-events article {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.goal-tracker-events article:last-child {
  border-bottom: 0;
}

.goal-tracker-events time {
  color: var(--bs-info);
  font-size: 0.74rem;
  font-weight: 700;
}

.goal-tracker-questions ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}

.goal-tracker-questions li {
  font-size: 0.8rem;
}

.goal-tracker-history article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 991.98px) {
  .goal-tracker-start,
  .goal-tracker-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-tracker-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .goal-tracker-selected,
  .goal-tracker-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .goal-tracker-events article {
    grid-template-columns: minmax(0, 1fr);
  }
}

.doctor-prep-panel,
.doctor-prep-document {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.doctor-prep-panel h2,
.doctor-prep-document h2,
.doctor-prep-document h3 {
  color: var(--text-light);
}

.doctor-prep-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.doctor-prep-emergency {
  font-size: 0.82rem;
}

.doctor-prep-consent,
.doctor-prep-privacy,
.doctor-prep-cost,
.doctor-prep-warning {
  font-size: 0.76rem;
}

.doctor-prep-consent {
  padding: 12px 12px 12px 34px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.doctor-prep-privacy,
.doctor-prep-cost {
  margin: 10px 0;
  color: var(--bs-secondary-color);
}

.doctor-prep-readiness {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.doctor-prep-readiness > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.doctor-prep-readiness strong,
.doctor-prep-readiness span {
  display: block;
}

.doctor-prep-readiness strong {
  color: var(--text-light);
  font-size: 1.35rem;
}

.doctor-prep-readiness span,
.doctor-prep-rules,
.doctor-prep-history span,
.doctor-prep-history time {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.doctor-prep-rules {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.doctor-prep-document {
  margin-bottom: 24px;
}

.doctor-prep-document-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
}

.doctor-prep-document-head span,
.doctor-prep-document-head p,
.doctor-prep-document footer {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.doctor-prep-document-head h2 {
  margin: 3px 0;
  font-size: 1.45rem;
}

.doctor-prep-document-head p {
  margin: 0;
}

.doctor-prep-warning,
.doctor-prep-summary,
.doctor-prep-section,
.doctor-prep-columns > section,
.doctor-prep-fact-grid > section {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.doctor-prep-warning {
  border-color: var(--bs-warning);
  color: var(--bs-secondary-color);
}

.doctor-prep-summary h3,
.doctor-prep-section h3,
.doctor-prep-columns h3,
.doctor-prep-fact-grid h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
}

.doctor-prep-summary p {
  margin: 0;
  line-height: 1.7;
}

.doctor-prep-fact-grid,
.doctor-prep-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.doctor-prep-list,
.doctor-prep-timeline,
.doctor-prep-history {
  display: grid;
  gap: 9px;
}

.doctor-prep-list article,
.doctor-prep-history article {
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.doctor-prep-list strong,
.doctor-prep-list span,
.doctor-prep-list p,
.doctor-prep-history strong,
.doctor-prep-history span {
  display: block;
}

.doctor-prep-list span {
  margin-top: 2px;
  color: var(--bs-info);
  font-size: 0.68rem;
}

.doctor-prep-list p,
.doctor-prep-timeline p,
.doctor-prep-columns p {
  margin: 4px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.55;
}

.doctor-prep-timeline article {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.doctor-prep-timeline article:last-child {
  border-bottom: 0;
}

.doctor-prep-timeline time {
  color: var(--bs-info);
  font-size: 0.74rem;
  font-weight: 700;
}

.doctor-prep-columns ol,
.doctor-prep-checklist {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 22px;
}

.doctor-prep-columns li,
.doctor-prep-checklist li {
  font-size: 0.8rem;
}

.doctor-prep-document footer {
  margin-top: 18px;
  text-align: center;
}

.doctor-prep-history article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (max-width: 991.98px) {
  .doctor-prep-start,
  .doctor-prep-fact-grid,
  .doctor-prep-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  body,
  .app-layout,
  .app-content {
    background: #fff !important;
  }

  .doctor-prep-screen-only,
  .app-sidebar,
  .app-topbar,
  .sidebar-backdrop,
  .floating-chat-container,
  .floating-chat-button {
    display: none !important;
  }

  .app-content {
    margin: 0 !important;
    padding: 0 !important;
  }

  .doctor-prep-document {
    display: block !important;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff !important;
    box-shadow: none;
    color: #111 !important;
  }

  .doctor-prep-document h2,
  .doctor-prep-document h3,
  .doctor-prep-document strong,
  .doctor-prep-document p,
  .doctor-prep-document span,
  .doctor-prep-document li,
  .doctor-prep-document time,
  .doctor-prep-document footer {
    color: #111 !important;
  }

  .doctor-prep-document section,
  .doctor-prep-document article {
    break-inside: avoid;
  }
}

.life-planner-panel {
  padding: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.life-planner-panel h2,
.life-planner-panel h3 {
  color: var(--text-light);
}

.life-planner-panel h2 {
  margin: 0;
  font-size: 1.05rem;
}

.life-planner-panel h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.life-planner-sensitive,
.life-planner-rationale {
  margin-top: 10px;
  padding: 11px 13px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
}

.life-planner-cost,
.life-planner-disclaimer {
  margin: 12px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.life-planner-readiness {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.life-planner-readiness > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.life-planner-readiness strong,
.life-planner-readiness span {
  display: block;
}

.life-planner-readiness strong {
  color: var(--text-light);
  font-size: 1.3rem;
}

.life-planner-readiness span {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.life-planner-rules {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding-left: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
}

.life-planner-rationale {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.life-planner-rationale i {
  color: var(--bs-info);
  font-size: 1.15rem;
}

.life-planner-rationale p {
  margin: 0;
  line-height: 1.65;
}

.life-planner-priorities > div,
.life-planner-days > div {
  display: grid;
  gap: 9px;
}

.life-planner-priorities article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.life-planner-priorities b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--bs-info);
  border-radius: 50%;
  color: var(--bs-info);
}

.life-planner-priorities strong,
.life-planner-priorities p,
.life-planner-priorities span {
  display: block;
}

.life-planner-priorities p {
  margin: 3px 0;
  color: var(--bs-secondary-color);
  font-size: 0.77rem;
}

.life-planner-priorities span {
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.life-planner-priorities em {
  padding: 4px 8px;
  border: 1px solid var(--bs-secondary-color);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-style: normal;
}

.life-planner-priorities em.is-high {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.life-planner-days {
  margin-top: 22px;
}

.life-planner-days section {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
}

.life-planner-days section > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--glass-border);
}

.life-planner-days section > div:first-child span {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.life-planner-days article {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--glass-border);
}

.life-planner-days article:last-child {
  border-bottom: 0;
}

.life-planner-days time {
  color: var(--bs-info);
  font-size: 0.78rem;
  font-weight: 700;
}

.life-planner-days strong,
.life-planner-days span {
  display: block;
}

.life-planner-days span {
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.life-planner-days em {
  padding: 3px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
  font-style: normal;
}

.life-planner-days em.is-break,
.life-planner-days em.is-buffer {
  border-color: var(--bs-success);
  color: var(--bs-success);
}

.life-planner-warnings {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--bs-warning) 35%, transparent);
  border-radius: 12px;
}

.life-planner-warnings ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.life-planner-history {
  display: grid;
  gap: 8px;
}

.life-planner-history article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
}

.life-planner-history article:last-child {
  border-bottom: 0;
}

.life-planner-history strong,
.life-planner-history span {
  display: block;
}

.life-planner-history span,
.life-planner-history time {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

@media (max-width: 991.98px) {
  .life-planner-start {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .life-planner-history article {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}

@media (max-width: 575.98px) {
  .life-planner-readiness {
    grid-template-columns: minmax(0, 1fr);
  }

  .life-planner-priorities article,
  .life-planner-days article {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .life-planner-priorities b,
  .life-planner-priorities em,
  .life-planner-days em {
    justify-self: start;
  }
}

@media (max-width: 767px) {
  .content-plan-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-plan-calendar {
    grid-template-columns: repeat(7, 165px);
  }

  .content-copy-status-strip {
    grid-template-columns: repeat(7, 125px);
  }

  .content-copy-navigation {
    justify-content: flex-start;
  }

  .content-batch-heading,
  .content-batch-progress-head {
    flex-direction: column;
  }

  .content-batch-heading form,
  .content-batch-heading button {
    width: 100%;
  }

  .content-batch-progress-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .content-batch-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-batch-item-list {
    grid-template-columns: 1fr;
  }

  .content-batch-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-review-header-actions,
  .content-review-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .content-review-day-grid,
  .content-review-issue-list.is-ai,
  .content-review-aside {
    grid-template-columns: 1fr;
  }
}

.sidebar-balance-bar {
  height: 3px;
  background: var(--sb-balance-bar, rgba(255,255,255,0.1));
  border-radius: 2px;
  overflow: hidden;
}

.sidebar-balance-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* แบนเนอร์โหมดปิดปรับปรุง (views/partials/app_header.ejs) — เห็นเฉพาะแอดมิน
   สีส้มคงที่ทุกธีมโดยตั้งใจ เป็นป้ายเตือนสถานะระบบ ไม่ใช่พื้นผิวของธีม */
.maintenance-banner {
  position: fixed;
  top: 0;
  left: 250px; /* เว้นที่ให้เมนูซ้ายที่ปักอยู่บนเดสก์ท็อป */
  right: 0;
  z-index: 200;
  padding: 8px 12px;
  background: #f59e0b;
  color: #1a1a1a;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

.maintenance-banner a {
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: underline;
}

/* ─── เมนูมือถือ (≤991px): แถบบน + ลิ้นชักเลื่อน ─────────────────────────────
   ⚠️ ของเดิมคือ `.app-sidebar { display: none }` เฉย ๆ → จอมือถือเข้าเมนูไม่ได้เลย
      หายไปทั้งเมนูหลัก, ยอด Points/Credits, ตัวสลับภาษา และเมนูบัญชี/ออกจากระบบ
      (เมนูผู้ใช้กับเมนูแอดมินใช้คลาส .app-sidebar ร่วมกัน จึงโดนทั้งคู่)
   ตอนนี้เปลี่ยนเป็นลิ้นชักที่เลื่อนออกมาจากซ้าย โดยใช้ markup เมนูก้อนเดิมทั้งหมด
   markup ของแถบบน/ฉากหลังอยู่ใน partial ของ sidebar เอง (app_sidebar_user/admin)
   จึงครอบทุกหน้าที่ใช้เลย์เอาต์ .app-layout โดยไม่ต้องแก้ไฟล์วิวทีละหน้า
   พฤติกรรมเปิด/ปิดอยู่ที่ /js/mobile-nav.js */

/* เดสก์ท็อปไม่ใช้ทั้งสามอย่าง — เมนูปักอยู่ซ้ายตลอดเวลาอยู่แล้ว */
.app-topbar,
.sidebar-backdrop,
.sidebar-close {
  display: none;
}

@media (max-width: 991px) {
  .app-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 10px;
    background: var(--sb-bg);
    border-bottom: 1px solid var(--sb-border);
    z-index: 1035; /* เหนือเนื้อหา แต่ต่ำกว่าฉากหลัง (1040) และลิ้นชัก (1045) */
  }

  .app-topbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--sb-text-hover);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }

  .app-topbar-toggle:hover,
  .app-topbar-toggle:focus-visible {
    background: var(--sb-hover);
  }

  .app-topbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
    color: var(--sb-text-hover);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    text-decoration: none;
  }

  .app-topbar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ยอดคงเหลือย้ายขึ้นแถบบน — เมนูที่ปักยอดไว้ท้าย sidebar ถูกซ่อนไปแล้วบนมือถือ
     ThaiProMax หักพอยต์/เครดิตทุกบริการ ยอดจึงต้องเห็นได้โดยไม่ต้องเปิดลิ้นชัก */
  .app-topbar-balance {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--sb-text-hover);
    text-decoration: none;
  }

  .app-topbar-balance > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--sb-text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
  }

  .sidebar-close:hover,
  .sidebar-close:focus-visible {
    background: var(--sb-hover);
    color: var(--sb-text-hover);
  }

  .app-sidebar {
    width: 82vw;
    min-width: 0;
    max-width: 300px;
    z-index: 1045;
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.25s ease, visibility 0.25s;
  }

  body.sidebar-open .app-sidebar {
    visibility: visible;
    transform: translateX(0);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  /* กันหน้าเลื่อนอยู่ข้างหลังตอนลิ้นชักเปิด */
  body.sidebar-open {
    overflow: hidden;
  }

  /* ปุ่ม/กล่องแชทลอยตั้ง z-index 1050 ไว้ (สูงกว่าลิ้นชัก 1045 เพราะปกติต้องลอยเหนือทุกอย่าง)
     ตอนเปิดเมนูจึงต้องซ่อน ไม่งั้นจะลอยเด่นอยู่บนฉากหลังมืดเหมือนกดได้ทั้งที่เมนูบังอยู่ */
  body.sidebar-open .floating-chat-toggle,
  body.sidebar-open .floating-chat-box {
    display: none;
  }

  .app-content {
    margin-left: 0;
    padding: 68px 16px 20px; /* 52px = ความสูงแถบบนที่ปักอยู่ + ระยะห่าง */
  }

  /* แบนเนอร์โหมดปิดปรับปรุง (เห็นเฉพาะแอดมิน) — เดสก์ท็อปเว้นที่ให้เมนู 250px
     บนมือถือไม่มีเมนูปัก จึงกางเต็มจอแล้ววางไว้ใต้แถบบน */
  .maintenance-banner {
    left: 0;
    top: 52px;
  }

  /* กล่องลอยติดจอ (sticky) ที่ตั้ง top ไว้สำหรับเดสก์ท็อป — บนมือถือต้องหลบแถบบน
     ไม่งั้นหัวกล่องจะมุดอยู่ใต้แถบขณะเลื่อน */
  .content-studio-form-aside,
  .content-review-aside {
    top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .sidebar-backdrop {
    transition: none;
  }
}

/* ─── App Themes (Blue / Dark / Light) ──────────────────────────── */

/* Theme: Dark — charcoal / neutral black */
body.app-page.theme-dark {
  background-color: #0d1117;
  --bs-secondary-color: rgba(201,209,217,0.72);
  --sb-bg:             #161b22;
  --sb-border:         rgba(255,255,255,0.06);
  --sb-active-bg:      rgba(255,255,255,0.1);
  --sb-active-color:   #c9d1d9;
  --sb-scrollbar:      rgba(255,255,255,0.15);
  --sb-secondary-text: rgba(255,255,255,0.4);
  --sb-tertiary-text:  rgba(255,255,255,0.25);
  --sb-balance-bar:    rgba(255,255,255,0.08);
}

/* Theme: Light — white sidebar + light content */
body.app-page.theme-light {
  background-color: #f1f5f9;
  color: #1e293b;
  --bs-secondary-color: #64748b;
  --accent:            #0284c7;
  --accent-ring:       rgba(2,132,199,0.15);
  --sb-bg:             #ffffff;
  --sb-border:         #e2e8f0;
  --sb-text:           #64748b;
  --sb-text-hover:     #0f172a;
  --sb-hover:          rgba(0,0,0,0.04);
  --sb-active-bg:      rgba(14,165,233,0.1);
  --sb-active-color:   #0369a1;
  --sb-divider:        #e2e8f0;
  --sb-scrollbar:      rgba(14,165,233,0.3);
  --sb-secondary-text: #64748b;
  --sb-tertiary-text:  #94a3b8;
  --sb-balance-bar:    #e2e8f0;
}

/* Theme: Warm — cream surface + amber accents (light family) */
body.app-page.theme-warm {
  background-color: #f5f1ea;
  color: #3d3528;
  --bs-secondary-color: #766b5a;
  --accent:            #c2410c;
  --accent-ring:       rgba(194,65,12,0.15);
  --sb-bg:             #fbf8f3;
  --sb-border:         #ece3d6;
  --sb-text:           #8a7d68;
  --sb-text-hover:     #2d2418;
  --sb-hover:          rgba(0,0,0,0.04);
  --sb-active-bg:      rgba(194,65,12,0.1);
  --sb-active-color:   #c2410c;
  --sb-divider:        #ece3d6;
  --sb-scrollbar:      rgba(194,65,12,0.3);
  --sb-secondary-text: #8a7d68;
  --sb-tertiary-text:  #b3a892;
  --sb-balance-bar:    #ece3d6;
}

/* Theme: Pink — soft rose surface + pink accents (light family) */
body.app-page.theme-pink {
  background-color: #fdf2f8;
  color: #4a1d3a;
  --bs-secondary-color: #8b5f77;
  --accent:            #db2777;
  --accent-ring:       rgba(219,39,119,0.15);
  --sb-bg:             #fff5fa;
  --sb-border:         #f6d9e8;
  --sb-text:           #9d6b85;
  --sb-text-hover:     #831843;
  --sb-hover:          rgba(0,0,0,0.035);
  --sb-active-bg:      rgba(219,39,119,0.1);
  --sb-active-color:   #db2777;
  --sb-divider:        #f6d9e8;
  --sb-scrollbar:      rgba(219,39,119,0.3);
  --sb-secondary-text: #9d6b85;
  --sb-tertiary-text:  #c79db1;
  --sb-balance-bar:    #f6d9e8;
}

/* Light theme — content area overrides (shared by all light themes) */
body.app-page.is-light .glass-effect {
  background: var(--glass-bg, rgba(255,255,255,0.75));
  border-color: var(--glass-border, rgba(0,0,0,0.07));
  box-shadow: 0 8px 24px 0 rgba(0,0,0,0.06);
}
body.app-page.is-light h1, body.app-page.is-light h2,
body.app-page.is-light h3, body.app-page.is-light h4,
body.app-page.is-light h5, body.app-page.is-light h6 { color: var(--text-light, #1e293b); }
body.app-page.is-light .text-white { color: var(--text-light, #1e293b) !important; }
body.app-page.is-light .text-muted { color: var(--sb-secondary-text, #64748b) !important; }
body.app-page.is-light .card { background: rgba(255,255,255,0.8); border-color: var(--sb-border, #e2e8f0); color: var(--text-light, #1e293b); }
body.app-page.is-light .bg-dark { background-color: #f8fafc !important; }
body.app-page.is-light .badge.bg-dark { color: #1e293b !important; }

/* ราคาต้นทุนสื่อในหน้าทดสอบแอดมิน — ต้องอ่านได้แม้อยู่ในแถว metadata ขนาดเล็ก */
.media-cost-badge {
  font-size: 0.78rem !important;
  padding: 0.35em 0.55em;
}
body.app-page.is-light .border-secondary { border-color: var(--sb-border, #e2e8f0) !important; }
body.app-page.is-light .table { --bs-table-color: #1e293b; --bs-table-bg: transparent; --bs-table-border-color: var(--sb-border, #e2e8f0); }
body.app-page.is-light .table-dark { --bs-table-color: #1e293b; --bs-table-bg: transparent; --bs-table-border-color: var(--sb-border, #e2e8f0); color: #1e293b; }
body.app-page.is-light .form-control,
body.app-page.is-light .form-select { background-color: #ffffff; border-color: #cbd5e1; color: #1e293b; }
body.app-page.is-light .modal-content { background-color: #ffffff; color: #1e293b; }
body.app-page.is-light .modal-content .text-white { color: #1e293b !important; }

/* Theme-aware modal (.app-modal) — ดาร์กบนธีมมืด, สว่างบนธีม light/warm/pink */
.modal-content.app-modal {
  background: rgba(22, 27, 34, 0.98);
  color: var(--text-light, #f0f9ff);
  border-color: var(--glass-border, rgba(255,255,255,0.12));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.app-page.is-light .modal-content.app-modal {
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.modal-content.app-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ธีมมืด → กากบาทขาว */
body.app-page.is-light .modal-content.app-modal .btn-close { filter: none; }                 /* ธีมสว่าง → กากบาทดำ */
.confirm-dialog-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
body.app-page.is-light .dropdown-menu.bg-dark { background-color: #ffffff !important; }
body.app-page.is-light .dropdown-item.text-white { color: #1e293b !important; }
body.app-page.is-light .btn-close-white { filter: invert(1); }
/* Light theme — code block overrides */
body.app-page.is-light .bg-black { background-color: #f0f4f8 !important; }
body.app-page.is-light pre.text-warning,
body.app-page.is-light code.text-warning { color: #92400e !important; }
body.app-page.is-light .text-info { color: var(--accent, #0369a1) !important; }

/* Breadcrumb กลับหน้าหมวด (หน้าเต็มของบริการย่อย) */
.breadcrumb-theme {
  --bs-breadcrumb-divider: '›';
  font-size: 0.8rem;
}
.breadcrumb-theme .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35); }
.breadcrumb-theme .breadcrumb-item a { color: #38bdf8; text-decoration: none; }
.breadcrumb-theme .breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-theme .breadcrumb-item.active { color: rgba(255,255,255,0.55); }
body.app-page.is-light .breadcrumb-theme .breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }
body.app-page.is-light .breadcrumb-theme .breadcrumb-item a { color: var(--accent, #0369a1); }
body.app-page.is-light .breadcrumb-theme .breadcrumb-item.active { color: var(--sb-secondary-text, #64748b); }

/* สีแบรนด์หมวดดูดวง (ม่วงมงคล) — คลาสกลาง theme-aware ใช้แทน inline #e879f9 */
.text-fortune { color: #e879f9 !important; }
body.app-page.is-light .text-fortune { color: #c026d3 !important; }

/* ── Soft inset surfaces — theme-aware (แทน inline rgba พื้นหลังจางที่กระจายในหน้าบริการ) ── */
/* ธีมมืด = ขาวจาง / ธีมสว่าง = ดำจาง (แก้ที่เดียว ทุกหน้าเปลี่ยนตาม) */
.soft-surface        { background: rgba(255, 255, 255, 0.04); }   /* กล่อง inset ทั่วไป */
.soft-surface-faint  { background: rgba(255, 255, 255, 0.015); }  /* จางมาก เช่น รายการประวัติ */
.soft-surface-strong { background: rgba(255, 255, 255, 0.06); }   /* เข้มขึ้น เช่น บับเบิลแชท */
.soft-surface-accent { background: rgba(13, 202, 240, 0.15); }    /* วงกลม avatar โทน info */
.video-backdrop      { background: #000; }                        /* พื้นวิดีโอ letterbox — คงดำทั้งสองธีม */
body.app-page.is-light .soft-surface        { background: rgba(15, 23, 42, 0.035); }
body.app-page.is-light .soft-surface-faint  { background: rgba(15, 23, 42, 0.02); }
body.app-page.is-light .soft-surface-strong { background: rgba(15, 23, 42, 0.05); }
body.app-page.is-light .soft-surface-accent { background: rgba(13, 202, 240, 0.14); }

/* ── Legacy/Chat surfaces & chips — theme-aware (แทน inline color ที่ตั้งจาก markup/JS) ── */
.inset-surface     { background: rgba(0, 0, 0, 0.12); }        /* กล่อง output/transcript เข้ม */
.chat-bubble-user  { background: rgba(14, 165, 233, 0.25); }   /* บับเบิลฝั่งผู้ใช้ (โทน accent) */
.pc-item           { background: rgba(255, 255, 255, 0.04); }  /* ปุ่มเซสชันในลิสต์โปรเจคแชท */
.pc-item.is-active { background: rgba(14, 165, 233, 0.25); }
.info-chip         { background: rgba(13, 202, 240, 0.15); color: #0dcaf0; font-size: 0.75rem; padding: 6px 10px; }
body.app-page.is-light .inset-surface     { background: rgba(15, 23, 42, 0.05); }
body.app-page.is-light .chat-bubble-user  { background: rgba(14, 165, 233, 0.18); }
body.app-page.is-light .pc-item           { background: rgba(15, 23, 42, 0.035); }
body.app-page.is-light .pc-item.is-active { background: rgba(14, 165, 233, 0.18); }
body.app-page.is-light .info-chip         { background: rgba(13, 202, 240, 0.14); color: #0369a1; }

/* ── Job UX pill — จับเวลากลางจอระหว่างสร้างงาน (ทุกบริการ ผ่าน job-ux.js) ── */
.job-ux-pill {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #f0f9ff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  font-size: 0.85rem;
  font-weight: 600;
  pointer-events: none;
}
body.app-page.is-light .job-ux-pill {
  background: #ffffff;
  color: #1e293b;
  border-color: var(--sb-border, #e2e8f0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ปุ่มอ่านออกเสียงบนบับเบิล/บล็อกคำตอบ AI (ใช้ทุกหน้า) — สีปกติ = เสียงฟรี, .premium = เสียงที่สร้างด้วย Gemini TTS */
.btn-speak {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.65);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex: 0 0 auto;
}
.btn-speak:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-speak.playing { color: #38bdf8; border-color: #38bdf8; animation: pulse-speak 0.8s infinite alternate ease-in-out; }
.btn-speak.premium { color: #fbbf24; border-color: rgba(251,191,36,0.55); }
.btn-speak.premium:hover { color: #fcd34d; border-color: #fbbf24; }
.btn-speak.premium.playing { color: #fbbf24; border-color: #fbbf24; }
@keyframes pulse-speak { from { opacity: 1; } to { opacity: 0.45; } }
body.app-page.is-light .btn-speak { color: #64748b; border-color: #cbd5e1; }
body.app-page.is-light .btn-speak:hover { color: #1e293b; border-color: #94a3b8; }
body.app-page.is-light .btn-speak.playing { color: var(--accent, #0369a1); border-color: var(--accent, #0369a1); }
body.app-page.is-light .btn-speak.premium { color: #b45309; border-color: #d97706; }
body.app-page.is-light .btn-speak.premium.playing { color: #b45309; border-color: #b45309; }

/* ปุ่มไมค์ข้างช่องกรอกแชท (public/js/mic-input.js) — ฝั่งตรงข้ามของ .btn-speak
   ขนาดเท่าปุ่มส่งของแชทลอย (36px) เพื่อให้วางเรียงกันแล้วไม่เบี้ยว */
.btn-mic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: rgba(255,255,255,0.65);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex: 0 0 auto;
}
.btn-mic:hover { color: #fff; border-color: rgba(255,255,255,0.45); }
/* ขนาดเล็ก — ใช้กับช่อง prompt ของฟอร์ม ที่ปุ่มไปอยู่ท้ายบรรทัด label (36px ใหญ่เกินไปข้างตัวอักษร small) */
.btn-mic.btn-mic-sm { width: 28px; height: 28px; font-size: 0.78rem; }
/* กำลังฟัง — ต้องต่างจากสถานะปกติแบบเห็นชัด ไม่งั้นผู้ใช้ไม่รู้ว่าไมค์เปิดอยู่ */
.btn-mic.listening {
  color: #fff;
  border-color: #ef4444;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  animation: pulse-mic 1s infinite alternate ease-in-out;
}
@keyframes pulse-mic { from { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } to { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }
body.app-page.is-light .btn-mic { color: #64748b; border-color: #cbd5e1; }
body.app-page.is-light .btn-mic:hover { color: #1e293b; border-color: #94a3b8; }
body.app-page.is-light .btn-mic.listening { color: #fff; border-color: #dc2626; }
/* เครื่องที่ผู้ใช้ตั้งค่าลดการเคลื่อนไหว — คงสีแดงไว้ แต่ไม่ต้องกะพริบ */
@media (prefers-reduced-motion: reduce) {
  .btn-mic.listening { animation: none; }
}

/* เวทีพรีวิวกล้องในโมดัลถ่ายรูปด้วยเว็บแคม (public/js/camera-input.js)
   พื้นดำเพื่อไม่ให้เห็นขอบขาววูบตอนกล้องยังไม่ติด และคุมความสูงไม่ให้ล้นจอ */
.cam-stage {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.cam-stage video {
  max-width: 100%;
  max-height: 60vh;
  display: block;
  /* ⚠️ ห้ามใส่ transform: scaleX(-1) ให้ดู "เหมือนส่องกระจก" แบบแอปเซลฟี่
     ปุ่มนี้ใช้ทั้งงานถ่ายเอกสาร (OCR/บิล/สัญญา) และถ่ายตัวเอง — ถ้ากลับด้านเฉพาะพรีวิว
     ผู้ใช้จะเห็นตัวหนังสือกลับหลังแล้วหมุนกระดาษตาม สุดท้ายไฟล์จริงกลับด้านจน OCR อ่านไม่ออก
     (เคยพลาดมาแล้ว 2026-08-20) → พรีวิวต้องตรงกับไฟล์ที่ได้เสมอ */
}

/* กล่องแชทแบบหน้าเต็ม (บริการเพื่อนคุย ฯลฯ) */
.chat-panel-messages { overflow-y: auto; scroll-behavior: smooth; }
.chat-panel-bubble {
  max-width: 78%;
  border-radius: 14px;
  padding: 10px 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-panel-bubble-user { background: rgba(14,165,233,0.18); border: 1px solid rgba(56,189,248,0.25); color: #f0f9ff; margin-left: auto; }
.chat-panel-bubble-ai { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: #f0f9ff; }
body.app-page.is-light .chat-panel-bubble-user { background: var(--accent-ring, rgba(2,132,199,0.12)); border-color: rgba(2,132,199,0.3); color: #0c4a6e; }
body.app-page.is-light .chat-panel-bubble-ai { background: #ffffff; border-color: var(--sb-border, #e2e8f0); color: #1e293b; }

/* Theme swatch picker buttons */
.btn-theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s;
  flex: 1;
}
.btn-theme-swatch:hover { background: var(--sb-hover, rgba(255,255,255,0.06)); }
.btn-theme-swatch small {
  font-size: 0.62rem;
  color: var(--sb-text, rgba(255,255,255,0.5));
  white-space: nowrap;
}
.btn-theme-swatch.active small {
  color: var(--sb-active-color, #38bdf8);
  font-weight: 600;
}
.theme-swatch-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  transition: outline 0.1s;
}
.btn-theme-swatch.active .theme-swatch-dot {
  outline: 2px solid var(--sb-active-color, #38bdf8);
  outline-offset: 2px;
}

/* ── Flatpickr — dark/blue theme override ───────────────────────────────── */
body.app-page:not(.is-light) .flatpickr-calendar {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  color: #f0f9ff;
}
body.app-page:not(.is-light) .flatpickr-months,
body.app-page:not(.is-light) .flatpickr-month {
  background: #1e293b;
  color: #f0f9ff;
  fill: #f0f9ff;
}
body.app-page:not(.is-light) .flatpickr-weekdays,
body.app-page:not(.is-light) span.flatpickr-weekday {
  background: #1e293b;
  color: #64748b;
  fill: #64748b;
}
body.app-page:not(.is-light) .flatpickr-day {
  color: #cbd5e1;
  border-color: transparent;
}
body.app-page:not(.is-light) .flatpickr-day:hover,
body.app-page:not(.is-light) .flatpickr-day:focus {
  background: #334155;
  border-color: #334155;
  color: #f0f9ff;
}
body.app-page:not(.is-light) .flatpickr-day.selected,
body.app-page:not(.is-light) .flatpickr-day.selected:hover {
  background: #0ea5e9;
  border-color: #0ea5e9;
  color: #fff;
}
body.app-page:not(.is-light) .flatpickr-day.today {
  border-color: #0ea5e9;
  color: #38bdf8;
}
body.app-page:not(.is-light) .flatpickr-day.today:hover {
  background: #0ea5e9;
  color: #fff;
}
body.app-page:not(.is-light) .flatpickr-day.flatpickr-disabled,
body.app-page:not(.is-light) .flatpickr-day.flatpickr-disabled:hover {
  color: #334155;
}
body.app-page:not(.is-light) .flatpickr-day.prevMonthDay,
body.app-page:not(.is-light) .flatpickr-day.nextMonthDay {
  color: #475569;
}
body.app-page:not(.is-light) .numInputWrapper:hover,
body.app-page:not(.is-light) .numInputWrapper span {
  background: #334155;
}
body.app-page:not(.is-light) .flatpickr-current-month input.cur-year,
body.app-page:not(.is-light) .flatpickr-current-month .flatpickr-monthDropdown-months {
  color: #f0f9ff;
  background: transparent;
}
body.app-page:not(.is-light) .flatpickr-monthDropdown-months option {
  background: #1e293b;
  color: #f0f9ff;
}
body.app-page:not(.is-light) .flatpickr-prev-month,
body.app-page:not(.is-light) .flatpickr-next-month {
  fill: #94a3b8;
}
body.app-page:not(.is-light) .flatpickr-prev-month:hover svg,
body.app-page:not(.is-light) .flatpickr-next-month:hover svg {
  fill: #f0f9ff;
}

/* ── Range Slider (form-range) — theme-aware track & thumb with fill */
.form-range { --range-fill: 0%; }
/* Dark / Blue theme */
body.app-page:not(.is-light) .form-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    #0ea5e9 var(--range-fill),
    rgba(255, 255, 255, 0.18) var(--range-fill)
  );
  border-radius: 1rem;
  height: 0.5rem;
}
body.app-page:not(.is-light) .form-range::-moz-range-track {
  background-color: rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  height: 0.5rem;
}
body.app-page:not(.is-light) .form-range::-moz-range-progress {
  background-color: #0ea5e9;
  border-radius: 1rem;
  height: 0.5rem;
}
body.app-page:not(.is-light) .form-range::-webkit-slider-thumb {
  background-color: #0ea5e9;
  border: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}
body.app-page:not(.is-light) .form-range::-moz-range-thumb {
  background-color: #0ea5e9;
  border: none;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25);
}
/* Light themes */
body.app-page.is-light .form-range::-webkit-slider-runnable-track {
  background: linear-gradient(
    to right,
    var(--accent, #0284c7) var(--range-fill),
    #94a3b8 var(--range-fill)
  );
  border-radius: 1rem;
  height: 0.5rem;
}
body.app-page.is-light .form-range::-moz-range-track {
  background-color: #94a3b8;
  border-radius: 1rem;
  height: 0.5rem;
}
body.app-page.is-light .form-range::-moz-range-progress {
  background-color: var(--accent, #0284c7);
  border-radius: 1rem;
  height: 0.5rem;
}
body.app-page.is-light .form-range::-webkit-slider-thumb {
  background-color: var(--accent, #0284c7);
  border: none;
}
body.app-page.is-light .form-range::-moz-range-thumb {
  background-color: var(--accent, #0284c7);
  border: none;
}
/* Range value display label — ใช้ CSS variable แทน text-white hardcode */
body.app-page .range-value {
  color: var(--text-light, #f0f9ff);
  font-weight: 600;
}

/* Breakout row — แถวที่ต้องกว้างกว่า .container กลาง (เช่น การ์ดแผนราคา 5 ใบแถวเดียว)
   ขยายเต็ม min(1680px, 96vw) โดยยังจัดกึ่งกลางหน้าจอ ไม่เกิด horizontal scroll */
.row-breakout-wide {
  width: min(1680px, 96vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ─── Content Studio: Export Content Pack ───────────────────────────── */
.content-export-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.content-export-summary > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
}

.content-export-summary i {
  width: 36px;
  height: 36px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.content-export-summary small,
.content-export-summary strong {
  display: block;
}

.content-export-summary small {
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
}

.content-export-summary strong {
  overflow-wrap: anywhere;
  color: var(--text-light);
  font-size: 0.82rem;
}

.content-export-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.content-export-section,
.content-export-format-card {
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.content-export-section {
  min-width: 0;
  padding: 21px;
}

.content-export-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.content-export-heading h2,
.content-export-format-card h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.05rem;
}

.content-export-heading p,
.content-export-format-card p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.content-export-item-list,
.content-export-aside {
  display: grid;
  gap: 10px;
}

.content-export-image-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text-light);
  background: var(--glass-bg);
  cursor: pointer;
}

.content-export-image-option:has(input:checked) {
  border-color: var(--sb-active-color);
  box-shadow: inset 3px 0 0 var(--sb-active-color);
}

.content-export-image-option strong,
.content-export-image-option small,
.content-export-image-option em {
  display: block;
}

.content-export-image-option strong {
  font-size: 0.78rem;
}

.content-export-image-option small,
.content-export-image-option em {
  margin-top: 3px;
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
}

.content-export-image-option em {
  color: var(--bs-warning);
  font-style: normal;
}

.content-export-item {
  display: grid;
  grid-template-columns: auto 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  color: var(--text-light);
  background: var(--sb-hover);
  cursor: pointer;
}

.content-export-item:has(input:checked) {
  border-color: var(--sb-active-color);
  box-shadow: inset 3px 0 0 var(--sb-active-color);
}

.content-export-day,
.content-export-ready {
  color: var(--sb-active-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.content-export-copy {
  min-width: 0;
}

.content-export-copy strong,
.content-export-copy small {
  display: block;
}

.content-export-copy strong {
  overflow: hidden;
  color: var(--text-light);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-export-copy small {
  margin-top: 2px;
  overflow-wrap: anywhere;
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
}

.content-export-format-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 17px;
}

.content-export-format-card > i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 1rem;
}

.content-export-format-card .btn {
  grid-column: 1 / -1;
}

.content-export-note {
  margin: 2px 4px 0;
  color: var(--bs-secondary-color);
  font-size: 0.66rem;
}

@media (max-width: 991.98px) {
  .content-export-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-export-aside {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .content-export-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767.98px) {
  .content-export-summary,
  .content-export-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .content-export-heading {
    flex-direction: column;
  }

  .content-export-note {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .content-export-section {
    padding: 14px;
  }

  .content-export-item {
    grid-template-columns: auto 50px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  .content-export-ready {
    grid-column: 3;
  }
}

/* ─── Content Studio V1.1: สร้างภาพจาก Visual Direction ─────────────── */
.content-image-panel {
  padding: 22px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.content-image-batch-panel {
  padding: 17px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--sb-hover);
}

.content-image-batch-panel .content-batch-estimate > div,
.content-image-batch-panel .content-batch-stats > span,
.content-image-batch-panel .content-batch-item {
  background: var(--glass-bg);
}

.content-image-heading,
.content-image-preview-actions,
.content-image-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.content-image-heading {
  align-items: flex-start;
  margin-bottom: 17px;
}

.content-image-heading h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 1.1rem;
}

.content-image-heading p,
.content-image-error p,
.content-image-empty p,
.content-image-note {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.content-image-version {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--sb-active-color);
  border-radius: 999px;
  color: var(--sb-active-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.content-image-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 16px;
}

.content-image-preview,
.content-image-direction,
.content-image-estimate span {
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--sb-hover);
}

.content-image-preview {
  min-width: 0;
  overflow: hidden;
}

.content-image-preview img {
  width: 100%;
  max-height: 620px;
  display: block;
  object-fit: contain;
  background: var(--glass-bg);
}

.content-image-preview-actions {
  padding: 11px 13px;
  border-top: 1px solid var(--glass-border);
}

.content-image-preview-actions span {
  color: var(--bs-secondary-color);
  font-size: 0.66rem;
}

.content-image-controls,
.content-image-estimate {
  display: grid;
  gap: 10px;
}

.content-image-direction {
  padding: 14px;
}

.content-image-direction small,
.content-image-estimate small {
  color: var(--sb-active-color);
  font-size: 0.64rem;
  font-weight: 700;
}

.content-image-direction p {
  margin: 5px 0 0;
  color: var(--text-light);
  font-size: 0.75rem;
  white-space: pre-wrap;
}

.content-image-estimate span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
}

.content-image-estimate strong {
  color: var(--text-light);
  font-size: 0.7rem;
  text-align: right;
}

.content-image-note {
  text-align: center;
}

.content-image-empty {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: var(--bs-secondary-color);
  text-align: center;
}

.content-image-empty i {
  margin-bottom: 8px;
  color: var(--sb-active-color);
  font-size: 2rem;
}

.content-image-empty strong {
  margin-bottom: 4px;
  color: var(--text-light);
  font-size: 0.82rem;
}

.content-image-error {
  justify-content: flex-start;
  margin-bottom: 14px;
  padding: 11px 13px;
  border: 1px solid var(--bs-danger);
  border-radius: 12px;
  color: var(--bs-danger);
  background: var(--sb-hover);
}

.content-image-error > i {
  font-size: 1.1rem;
}

.content-image-error strong {
  display: block;
  font-size: 0.75rem;
}

/* ─── Content Studio: Visual Consistency Review ──────────────────────── */
.visual-review-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.visual-review-summary > div {
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--glass-bg);
}

.visual-review-summary small,
.visual-review-summary strong {
  display: block;
}

.visual-review-summary small {
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
}

.visual-review-summary strong {
  margin-top: 3px;
  color: var(--text-light);
  font-size: 0.86rem;
}

.visual-review-summary .is-warning {
  border-color: var(--bs-warning);
}

.visual-review-summary .is-error {
  border-color: var(--bs-danger);
}

.visual-review-alert,
.visual-review-approve {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--bs-warning);
  border-radius: 14px;
  background: var(--glass-bg);
}

.visual-review-alert {
  justify-content: flex-start;
  margin-bottom: 14px;
}

.visual-review-alert.is-error {
  border-color: var(--bs-danger);
}

.visual-review-alert.is-error > i {
  color: var(--bs-danger);
}

.visual-review-alert > i,
.visual-review-approve > div > i {
  color: var(--sb-active-color);
  font-size: 1.25rem;
}

.visual-review-alert strong,
.visual-review-approve strong {
  color: var(--text-light);
  font-size: 0.8rem;
}

.visual-review-alert p,
.visual-review-approve p {
  margin: 2px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.visual-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.visual-review-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.visual-review-card.is-ready {
  border-color: var(--bs-success);
}

.visual-review-card.is-blocked {
  border-color: var(--bs-warning);
}

.visual-review-card-head,
.visual-review-current > div:not(.visual-review-empty),
.visual-review-version-title,
.visual-review-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.visual-review-card-head {
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid var(--glass-border);
}

.visual-review-card-head span,
.visual-review-card-head > strong {
  color: var(--sb-active-color);
  font-size: 0.65rem;
  font-weight: 700;
}

.visual-review-card-head h2 {
  margin: 3px 0;
  color: var(--text-light);
  font-size: 0.9rem;
}

.visual-review-card-head p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
}

.visual-review-current {
  background: var(--sb-hover);
}

.visual-review-current img {
  width: 100%;
  height: 300px;
  display: block;
  object-fit: contain;
  background: var(--glass-bg);
}

.visual-review-current > div:not(.visual-review-empty) {
  padding: 9px 12px;
  border-top: 1px solid var(--glass-border);
  color: var(--bs-secondary-color);
  font-size: 0.64rem;
}

.visual-review-current a {
  color: var(--sb-active-color);
  font-weight: 700;
  text-decoration: none;
}

.visual-review-empty {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 24px;
  color: var(--bs-secondary-color);
  text-align: center;
}

.visual-review-empty i {
  color: var(--sb-active-color);
  font-size: 1.8rem;
}

.visual-review-empty strong {
  color: var(--text-light);
  font-size: 0.76rem;
}

.visual-review-versions {
  padding: 13px 15px;
}

.visual-review-version-title {
  margin-bottom: 8px;
}

.visual-review-version-title strong,
.visual-review-version > div > strong {
  color: var(--text-light);
  font-size: 0.7rem;
}

.visual-review-version-title small,
.visual-review-version > div > small,
.visual-review-no-version {
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
}

.visual-review-version {
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid var(--glass-border);
}

.visual-review-version > div {
  min-width: 0;
}

.visual-review-version > div > strong,
.visual-review-version > div > small {
  display: block;
  overflow-wrap: anywhere;
}

.visual-review-version.is-current > div > strong,
.visual-review-version .is-selected {
  color: var(--bs-success);
}

.visual-review-version.is-expired {
  opacity: 0.65;
}

.visual-review-version > span {
  flex: 0 0 auto;
  color: var(--bs-danger);
  font-size: 0.64rem;
  font-weight: 700;
}

.visual-review-no-version {
  margin: 0;
  padding: 10px 0;
}

.visual-review-approve {
  border-color: var(--glass-border);
}

.visual-review-approve > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.visual-review-approve small.is-error {
  display: block;
  margin-top: 5px;
  color: var(--bs-danger);
  font-size: 0.66rem;
}

.visual-review-approve small.is-error a {
  color: inherit;
  font-weight: 700;
}

/* ─── Content Studio: AI Visual Consistency Review ──────────────────── */
.visual-ai-review {
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 17px;
  background: var(--glass-bg);
}

.visual-ai-review-head,
.visual-ai-review-action,
.visual-ai-review-result-head,
.visual-ai-audit,
.visual-ai-history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.visual-ai-review-head {
  align-items: flex-start;
}

.visual-ai-review-head h2,
.visual-ai-review-result-head h3,
.visual-ai-strengths h3,
.visual-ai-issues h3 {
  margin: 3px 0;
  color: var(--text-light);
}

.visual-ai-review-head h2 {
  font-size: 1rem;
}

.visual-ai-review-head p,
.visual-ai-review-result-head p,
.visual-ai-review-locked p,
.visual-ai-review-cost-note,
.visual-ai-review-disclaimer {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.visual-ai-review-badge {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--sb-active-color);
  border-radius: 999px;
  color: var(--sb-active-color);
  font-size: 0.65rem;
  font-weight: 700;
}

.visual-ai-review-locked {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--glass-border);
  border-radius: 13px;
}

.visual-ai-review-locked > i {
  color: var(--bs-secondary-color);
  font-size: 1.2rem;
}

.visual-ai-review-locked strong {
  color: var(--text-light);
  font-size: 0.76rem;
}

.visual-ai-review-action {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--sb-hover);
}

.visual-ai-review-price {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.visual-ai-review-price small,
.visual-ai-review-price strong {
  display: block;
}

.visual-ai-review-price small {
  color: var(--bs-secondary-color);
  font-size: 0.6rem;
}

.visual-ai-review-price strong {
  color: var(--text-light);
  font-size: 0.72rem;
}

.visual-ai-review-cost-note,
.visual-ai-review-disclaimer {
  margin-top: 9px;
}

.visual-ai-review-result {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
}

.visual-ai-review-result-head {
  align-items: flex-start;
  padding: 15px;
  border-bottom: 1px solid var(--glass-border);
}

.visual-ai-review-result-head span,
.visual-ai-review-result-head > strong {
  color: var(--sb-active-color);
  font-size: 0.62rem;
  font-weight: 800;
}

.visual-ai-review-result-head h3 {
  font-size: 0.9rem;
}

.visual-ai-review-result-head > strong {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.visual-ai-review-result-head > strong.is-ready {
  color: var(--bs-success);
}

.visual-ai-review-result-head > strong.is-needs_changes {
  color: var(--bs-warning);
}

.visual-ai-score-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  padding: 14px;
  border-bottom: 1px solid var(--glass-border);
}

.visual-ai-score-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--sb-hover);
}

.visual-ai-score-grid span,
.visual-ai-score-grid strong {
  display: block;
}

.visual-ai-score-grid span {
  min-height: 32px;
  color: var(--bs-secondary-color);
  font-size: 0.6rem;
}

.visual-ai-score-grid strong {
  margin: 2px 0;
  color: var(--text-light);
  font-size: 1rem;
}

.visual-ai-score-grid progress {
  width: 100%;
  height: 6px;
  accent-color: var(--sb-active-color);
}

.visual-ai-strengths,
.visual-ai-issues,
.visual-ai-day-grid,
.visual-ai-audit,
.visual-ai-history {
  padding: 14px;
  border-bottom: 1px solid var(--glass-border);
}

.visual-ai-strengths h3,
.visual-ai-issues h3 {
  font-size: 0.76rem;
}

.visual-ai-strengths ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.visual-ai-strengths li {
  display: flex;
  gap: 6px;
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
}

.visual-ai-strengths li i {
  color: var(--bs-success);
}

.visual-ai-issues h3 span {
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
  font-weight: 400;
}

.visual-ai-issues article {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1.3fr) minmax(180px, 1fr);
  gap: 10px;
  margin-top: 9px;
  padding: 11px;
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--bs-info);
  border-radius: 11px;
  background: var(--sb-hover);
}

.visual-ai-issues article.is-error {
  border-left-color: var(--bs-danger);
}

.visual-ai-issues article.is-warning {
  border-left-color: var(--bs-warning);
}

.visual-ai-issues article div > span,
.visual-ai-issues article div > strong,
.visual-ai-issues article div > small {
  display: block;
}

.visual-ai-issues article div > span,
.visual-ai-issues article div > small {
  color: var(--bs-secondary-color);
  font-size: 0.58rem;
}

.visual-ai-issues article div > strong {
  color: var(--text-light);
  font-size: 0.7rem;
}

.visual-ai-issues article p,
.visual-ai-issues article em {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.66rem;
  font-style: normal;
}

.visual-ai-issues article em i {
  margin-right: 5px;
  color: var(--bs-warning);
}

.visual-ai-empty {
  margin: 10px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
}

.visual-ai-day-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.visual-ai-day-grid > div {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
}

.visual-ai-day-grid > div.is-review {
  border-color: var(--bs-warning);
}

.visual-ai-day-grid span,
.visual-ai-day-grid strong,
.visual-ai-day-grid p {
  display: block;
}

.visual-ai-day-grid span,
.visual-ai-day-grid p {
  color: var(--bs-secondary-color);
  font-size: 0.58rem;
}

.visual-ai-day-grid strong {
  color: var(--text-light);
  font-size: 0.68rem;
}

.visual-ai-day-grid p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.visual-ai-audit,
.visual-ai-history {
  justify-content: flex-start;
  flex-wrap: wrap;
  color: var(--bs-secondary-color);
  font-size: 0.6rem;
}

.visual-ai-history {
  border-bottom: 0;
}

.visual-ai-history strong {
  color: var(--text-light);
}

.visual-ai-history span {
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
}

@media (max-width: 991.98px) {
  .visual-review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .visual-ai-score-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .visual-ai-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .visual-ai-issues article {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .visual-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-review-approve {
    align-items: flex-start;
    flex-direction: column;
  }

  .visual-review-approve form,
  .visual-review-approve .btn {
    width: 100%;
  }

  .visual-ai-review-head,
  .visual-ai-review-action,
  .visual-ai-review-result-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .visual-ai-review-action form,
  .visual-ai-review-action .btn {
    width: 100%;
  }

  .visual-ai-score-grid,
  .visual-ai-strengths ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-ai-day-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .visual-review-current img {
    height: 250px;
  }

  .visual-review-version {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 991.98px) {
  .content-image-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 575.98px) {
  .content-image-panel {
    padding: 14px;
  }

  .content-image-heading,
  .content-image-preview-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .content-image-preview-actions .btn {
    width: 100%;
  }
}

/* ─── ศูนย์การเงินส่วนตัว ────────────────────────────────────────────────── */
.finance-page-head,
.finance-section-head,
.finance-panel-head,
.finance-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.finance-section-head h2,
.finance-panel-head h3 {
  color: var(--text-light);
}

.finance-head-actions,
.finance-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.finance-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.finance-summary-card,
.finance-panel,
.finance-table-wrap {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: 0 8px 32px rgba(14, 165, 233, 0.08);
}

.finance-summary-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border-radius: 16px;
}

.finance-summary-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--bs-info);
  content: '';
}

.finance-summary-card.is-income::before,
.finance-summary-card.is-positive::before {
  background: var(--bs-success);
}

.finance-summary-card.is-expense::before,
.finance-summary-card.is-negative::before {
  background: var(--bs-danger);
}

.finance-summary-card.is-bill::before {
  background: var(--bs-warning);
}

.finance-summary-card span,
.finance-summary-card small {
  display: block;
  color: var(--bs-secondary-color);
}

.finance-summary-card strong {
  display: block;
  margin: 6px 0 2px;
  overflow: hidden;
  color: var(--text-light);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-section {
  scroll-margin-top: 20px;
}

.finance-section-head {
  margin-bottom: 14px;
}

.finance-section-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

.finance-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.finance-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
}

.finance-panel-head h3 {
  margin: 0;
  font-size: 0.98rem;
}

.finance-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.finance-list-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}

.finance-list-item:last-child {
  border-bottom: 0;
}

.finance-list-item strong,
.finance-list-item small {
  display: block;
}

.finance-list-item small {
  color: var(--bs-secondary-color);
}

.finance-category-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(120px, 2fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 0.82rem;
}

.finance-category-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.finance-progress {
  height: 7px;
  background: var(--glass-border);
}

/* กล่องตารางของศูนย์การเงิน — ตั้งใจให้เหมือน .glass-effect.rounded-4.p-4 ของหน้าทะเบียนร้าน
   เพื่อให้ทุกทะเบียนทั้งเว็บอยู่ในกรอบหน้าตาเดียวกัน */
.finance-table-wrap {
  overflow-x: auto;
  border-radius: 16px;
  padding: 1.5rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.finance-table-wrap .table {
  min-width: 800px;
  margin: 0;
  font-size: 0.82rem;
}

.finance-table-wrap td .finance-progress {
  min-width: 90px;
}

.finance-table-wrap td strong,
.finance-table-wrap td small {
  display: block;
}

.finance-table-wrap td small {
  color: var(--bs-secondary-color);
}

.finance-type,
.finance-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  font-weight: 700;
}

.finance-type.is-income,
.finance-status.is-active,
.finance-status.is-completed,
.finance-status.is-paid {
  border-color: color-mix(in srgb, var(--bs-success) 38%, transparent);
  color: var(--bs-success);
}

.finance-type.is-expense {
  border-color: color-mix(in srgb, var(--bs-danger) 38%, transparent);
  color: var(--bs-danger);
}

.finance-type.is-transfer {
  border-color: color-mix(in srgb, var(--bs-info) 38%, transparent);
  color: var(--bs-info);
}

.finance-status.is-pending {
  border-color: color-mix(in srgb, var(--bs-warning) 42%, transparent);
  color: var(--bs-warning);
}

.finance-status.is-paused,
.finance-status.is-ended,
.finance-status.is-skipped {
  color: var(--bs-secondary-color);
}

.finance-money.is-income {
  color: var(--bs-success);
}

.finance-money.is-expense {
  color: var(--bs-danger);
}

.finance-money.is-transfer {
  color: var(--bs-info);
}

.finance-empty {
  padding: 28px 16px;
  color: var(--bs-secondary-color);
  text-align: center;
}

@media (max-width: 1199.98px) {
  .finance-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .finance-page-head,
  .finance-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .finance-head-actions,
  .finance-head-actions .btn {
    width: 100%;
  }

  .finance-summary-grid,
  .finance-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-category-row {
    grid-template-columns: minmax(90px, 1fr) auto;
  }

  .finance-category-row .finance-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}
.ai-model-menu {
  min-width: 28rem;
  max-width: calc(100vw - 2rem);
  border-color: var(--glass-border);
  color: var(--text-light);
  background: var(--sb-bg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

/* เมนูที่มีแค่โลโก้ + ชื่อโมเดล (ไม่มีคอลัมน์ Pri/Int/Age) — ไม่ต้องกว้างขั้นต่ำ 28rem */
.ai-model-menu-simple {
  min-width: 0;
}

.ai-model-menu-scroll {
  max-height: min(32rem, calc(100vh - 12rem));
  overflow-y: auto;
  scrollbar-color: var(--sb-scrollbar) transparent;
  scrollbar-width: thin;
}

.ai-model-menu-scroll::-webkit-scrollbar {
  width: 6px;
}

.ai-model-menu-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ai-model-menu-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--sb-scrollbar);
}

.ai-model-menu .dropdown-item-text {
  color: var(--bs-secondary-color);
}

.ai-model-menu .dropdown-header {
  color: var(--sb-active-color);
}

.ai-model-menu .dropdown-item {
  color: var(--text-light);
  background: transparent;
}

.ai-model-menu .dropdown-item:hover,
.ai-model-menu .dropdown-item:focus {
  color: var(--text-light);
  background: var(--sb-hover);
}

.ai-model-menu .dropdown-item.active,
.ai-model-menu .dropdown-item:active {
  color: #fff;
  background: var(--bs-primary);
}

.ai-model-grid {
  display: grid;
  /* ช่องแรกกว้างขึ้น 1.6rem เพื่อชดเชยโลโก้ + gap ที่เพิ่มเข้ามา — ชื่อโมเดลจึงมีที่เท่าเดิม */
  grid-template-columns: minmax(11.6rem, 1fr) repeat(3, 3.5rem);
  gap: 0.75rem;
  align-items: center;
}

.ai-model-grid > span:not(:first-child) {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.ai-model-grid-head {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.65;
}

.ai-model-sort {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: end;
  cursor: pointer;
  white-space: nowrap;
}

.ai-model-sort-icon {
  display: inline-block;
  min-width: 0.65rem;
  font-size: 0.6rem;
}

.ai-model-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow: hidden;
}

/* ชื่อโมเดล — ตัดด้วย ... เมื่อยาวเกินช่อง (โลโก้ด้านหน้าไม่ถูกบีบ) */
.ai-model-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* โลโก้ผู้ให้บริการหน้าชื่อโมเดล (ไฟล์ใน public/images/providers)
   พื้นขาวคงที่ทุกธีมโดยตั้งใจ — โลโก้แบรนด์หลายตัวเป็นสีดำล้วน (Anthropic, Deepgram, Inception)
   ถ้าปล่อยพื้นโปร่งใสจะมองไม่เห็นเลยในธีมมืด */
.ai-model-icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  padding: 1px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}

/* ============================================
   Fortune Daily — Structured Result + AI Prediction Card
   ============================================ */
.fortune-daily-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  font-size: 0.7rem;
  font-weight: 600;
}

.fortune-daily-badge-highlight {
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.fortune-daily-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.fortune-daily-headline {
  margin-bottom: 9px;
  color: var(--text-light);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.fortune-daily-summary {
  max-width: 780px;
  color: var(--bs-secondary-color);
  font-size: 0.92rem;
  line-height: 1.8;
}

.fortune-daily-score {
  width: 92px;
  height: 92px;
  display: grid;
  place-content: center;
  border: 7px solid rgba(245, 190, 78, 0.2);
  border-top-color: #f5be4e;
  border-right-color: #f5be4e;
  border-radius: 50%;
  text-align: center;
  transform: rotate(8deg);
}

.fortune-daily-score strong,
.fortune-daily-score span {
  display: block;
  transform: rotate(-8deg);
}

.fortune-daily-score strong {
  color: var(--text-light);
  font-size: 1.55rem;
  line-height: 1;
}

.fortune-daily-score span {
  margin-top: 4px;
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
}

.fortune-daily-guidance {
  padding: 12px 14px;
  border: 1px solid rgba(245, 190, 78, 0.25);
  border-radius: 12px;
  color: #f3c96f;
  background: rgba(245, 190, 78, 0.08);
  font-size: 0.82rem;
}

.fortune-daily-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.fortune-daily-category {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-daily-category-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.fortune-daily-category-score {
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-weight: 600;
}

.fortune-daily-category-summary {
  min-height: 4.5em;
  margin-bottom: 12px;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
  line-height: 1.65;
}

.fortune-daily-tip {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 8px;
  overflow: hidden;
  border-radius: 7px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.66rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fortune-daily-lucky-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-border);
  gap: 1px;
}

.fortune-daily-lucky-grid > div {
  min-width: 0;
  padding: 14px 16px;
  background: var(--bg-color);
}

.fortune-daily-lucky-grid span,
.fortune-daily-lucky-grid strong {
  display: block;
}

.fortune-daily-lucky-grid span {
  margin-bottom: 4px;
  color: var(--bs-secondary-color);
  font-size: 0.65rem;
}

.fortune-daily-lucky-grid strong {
  overflow: hidden;
  color: var(--text-light);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fortune-daily-detail-list {
  display: grid;
  gap: 9px;
}

.fortune-daily-detail {
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--glass-bg);
}

.fortune-daily-detail summary {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  color: var(--text-light);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
}

.fortune-daily-detail summary::-webkit-details-marker {
  display: none;
}

.fortune-daily-detail summary::after {
  content: "+";
  margin-left: auto;
  color: var(--bs-secondary-color);
  font-size: 1rem;
}

.fortune-daily-detail[open] summary::after {
  content: "−";
}

.fortune-daily-detail p {
  margin: 0;
  padding: 0 16px 17px 43px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  line-height: 1.8;
}

body.app-page.is-light .fortune-daily-category,
body.app-page.is-light .fortune-daily-detail {
  background: rgba(255, 255, 255, 0.72);
}

body.app-page.is-light .fortune-daily-lucky-grid > div {
  background: rgba(255, 255, 255, 0.88);
}

body.app-page.is-light .fortune-daily-guidance {
  color: #8a5a00;
  background: rgba(245, 190, 78, 0.12);
}

@media (max-width: 1199.98px) {
  .fortune-daily-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .fortune-daily-intro {
    grid-template-columns: minmax(0, 1fr);
  }

  .fortune-daily-score {
    width: 78px;
    height: 78px;
  }

  .fortune-daily-category-grid,
  .fortune-daily-lucky-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fortune-daily-category-summary {
    min-height: 0;
  }
}

/* ============================================
   Fortune Tarot — Structured Result + AI Prediction Card
   ============================================ */
.fortune-tarot-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.7rem;
  font-weight: 600;
}

.fortune-tarot-headline {
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.fortune-tarot-question {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  font-weight: 600;
}

.fortune-tarot-summary {
  max-width: 920px;
  color: var(--bs-secondary-color);
  font-size: 0.92rem;
  line-height: 1.8;
}

.fortune-tarot-reading-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.fortune-tarot-reading-grid:has(.fortune-tarot-reading-card:only-child) {
  grid-template-columns: minmax(0, 560px);
}

.fortune-tarot-reading-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--glass-border);
  border-top: 3px solid rgba(192, 132, 252, 0.72);
  border-radius: 16px;
  background: var(--glass-bg);
}

.fortune-tarot-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.fortune-tarot-card-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.fortune-tarot-position {
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.fortune-tarot-reading-card h4 {
  margin-bottom: 7px;
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 700;
}

.fortune-tarot-orientation {
  display: inline-flex;
  margin-bottom: 13px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #20895c;
  background: rgba(59, 199, 139, 0.12);
  font-size: 0.65rem;
  font-weight: 700;
}

.fortune-tarot-orientation.is-reversed {
  color: #d76476;
  background: rgba(221, 92, 114, 0.12);
}

.fortune-tarot-reading-card p {
  margin-bottom: 14px;
  color: var(--bs-secondary-color);
  font-size: 0.77rem;
  line-height: 1.75;
}

.fortune-tarot-reading-card strong {
  display: block;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-light);
  font-size: 0.75rem;
  line-height: 1.6;
}

.fortune-tarot-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(192, 132, 252, 0.26);
  border-radius: 16px;
  background: rgba(142, 90, 210, 0.08);
}

.fortune-tarot-section-icon,
.fortune-tarot-guidance-grid article > span {
  width: 39px;
  height: 39px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.fortune-tarot-answer h3,
.fortune-tarot-guidance-grid h3 {
  margin-bottom: 6px;
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 700;
}

.fortune-tarot-answer p,
.fortune-tarot-guidance-grid p {
  color: var(--bs-secondary-color);
  font-size: 0.79rem;
  line-height: 1.8;
}

.fortune-tarot-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fortune-tarot-guidance-grid article {
  display: flex;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-tarot-guidance-grid p {
  margin-bottom: 0;
}

body.app-page.is-light .fortune-tarot-reading-card,
body.app-page.is-light .fortune-tarot-guidance-grid article {
  background: rgba(255, 255, 255, 0.72);
}

body.app-page.is-light .fortune-tarot-answer {
  background: rgba(142, 90, 210, 0.06);
}

@media (max-width: 991.98px) {
  .fortune-tarot-reading-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .fortune-tarot-guidance-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================
   Fortune Dream — Structured Result + AI Prediction Card
   ============================================ */
.fortune-dream-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
  font-size: 0.7rem;
  font-weight: 600;
}

.fortune-dream-headline {
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.fortune-dream-summary {
  max-width: 920px;
  color: var(--bs-secondary-color);
  font-size: 0.92rem;
  line-height: 1.8;
}

.fortune-dream-mood {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  color: var(--bs-secondary-color);
  background: var(--glass-bg);
  font-size: 0.75rem;
}

.fortune-dream-symbol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fortune-dream-symbol {
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--glass-border);
  border-top: 3px solid rgba(129, 140, 248, 0.72);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-dream-symbol-icon,
.fortune-dream-section-icon,
.fortune-dream-category-grid article > span,
.fortune-dream-guidance-grid article > span {
  width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: var(--sb-active-color);
  background: var(--sb-active-bg);
}

.fortune-dream-symbol h4 {
  margin: 13px 0 7px;
  color: var(--text-light);
  font-size: 0.92rem;
  font-weight: 700;
}

.fortune-dream-symbol p {
  margin-bottom: 13px;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.7;
}

.fortune-dream-symbol strong {
  display: block;
  padding-top: 11px;
  border-top: 1px solid var(--glass-border);
  color: var(--text-light);
  font-size: 0.72rem;
  line-height: 1.55;
}

.fortune-dream-meaning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(129, 140, 248, 0.25);
  border-radius: 16px;
  background: rgba(99, 102, 241, 0.08);
}

.fortune-dream-meaning h3,
.fortune-dream-category-grid h3,
.fortune-dream-guidance-grid h3 {
  margin-bottom: 6px;
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 700;
}

.fortune-dream-meaning p,
.fortune-dream-category-grid p,
.fortune-dream-guidance-grid p {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
  line-height: 1.75;
}

.fortune-dream-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fortune-dream-category-grid article {
  display: flex;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-dream-category-grid article > div {
  min-width: 0;
  flex: 1;
}

.fortune-dream-category-grid strong {
  color: var(--sb-active-color);
  font-size: 0.68rem;
  white-space: nowrap;
}

.fortune-dream-category-grid p,
.fortune-dream-guidance-grid p {
  margin-bottom: 0;
}

.fortune-dream-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fortune-dream-guidance-grid article {
  display: flex;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-dream-numbers {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
}

.fortune-dream-numbers span {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.fortune-dream-numbers strong {
  color: var(--text-light);
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.fortune-dream-numbers small {
  color: var(--bs-secondary-color);
  font-size: 0.62rem;
}

body.app-page.is-light .fortune-dream-symbol,
body.app-page.is-light .fortune-dream-category-grid article,
body.app-page.is-light .fortune-dream-guidance-grid article {
  background: rgba(255, 255, 255, 0.72);
}

body.app-page.is-light .fortune-dream-meaning {
  background: rgba(99, 102, 241, 0.05);
}

@media (max-width: 991.98px) {
  .fortune-dream-symbol-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .fortune-dream-category-grid,
  .fortune-dream-guidance-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fortune-dream-numbers {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
}

/* ============================================
   Fortune Modern — มาตรฐานกลางของหน้าดูดวงที่มีภาพและ Structured Result
   แต่ละศาสตร์กำหนดเฉพาะสี accent และ layout ที่มีความหมายเฉพาะ
   ============================================ */
.fortune-modern-result {
  --fortune-accent: #38bdf8;
  --fortune-accent-soft: rgba(14, 165, 233, 0.1);
  --fortune-accent-border: rgba(14, 165, 233, 0.25);
  width: 100%;
}

.fortune-natal-result {
  --fortune-accent: #c4b5fd;
  --fortune-accent-soft: rgba(126, 34, 206, 0.1);
  --fortune-accent-border: rgba(168, 85, 247, 0.25);
}

.fortune-numerology-result {
  --fortune-accent: #67e8f9;
  --fortune-accent-soft: rgba(14, 165, 233, 0.1);
  --fortune-accent-border: rgba(14, 165, 233, 0.25);
}

.fortune-love-result {
  --fortune-accent: #f9a8d4;
  --fortune-accent-soft: rgba(190, 24, 93, 0.1);
  --fortune-accent-border: rgba(244, 114, 182, 0.28);
}

.fortune-siamsi-result {
  --fortune-accent: #f5cf72;
  --fortune-accent-soft: rgba(185, 28, 28, 0.11);
  --fortune-accent-border: rgba(214, 166, 60, 0.3);
}

.fortune-naming-result {
  --fortune-accent: #e9a8ff;
  --fortune-accent-soft: rgba(168, 85, 247, 0.1);
  --fortune-accent-border: rgba(217, 70, 239, 0.26);
}

.fortune-auspicious-result {
  --fortune-accent: #f5cf72;
  --fortune-accent-soft: rgba(202, 138, 4, 0.1);
  --fortune-accent-border: rgba(234, 179, 8, 0.28);
}

.fortune-remedy-result {
  --fortune-accent: #5eead4;
  --fortune-accent-soft: rgba(13, 148, 136, 0.1);
  --fortune-accent-border: rgba(45, 212, 191, 0.27);
}

.fortune-boost-result {
  --fortune-accent: #c4b5fd;
  --fortune-accent-soft: rgba(124, 58, 237, 0.1);
  --fortune-accent-border: rgba(167, 139, 250, 0.27);
}

.fortune-chinese-result {
  --fortune-accent: #f4c86f;
  --fortune-accent-soft: rgba(185, 28, 28, 0.1);
  --fortune-accent-border: rgba(217, 119, 6, 0.28);
}

.fortune-fengshui-result {
  --fortune-accent: #6ee7b7;
  --fortune-accent-soft: rgba(5, 150, 105, 0.1);
  --fortune-accent-border: rgba(52, 211, 153, 0.27);
}

.fortune-deity-result {
  --fortune-accent: #f0abfc;
  --fortune-accent-soft: rgba(192, 38, 211, 0.1);
  --fortune-accent-border: rgba(232, 121, 249, 0.27);
}

.fortune-color-result {
  --fortune-accent: #7dd3fc;
  --fortune-accent-soft: rgba(14, 165, 233, 0.1);
  --fortune-accent-border: rgba(56, 189, 248, 0.27);
}

.fortune-luckyNumber-result {
  --fortune-accent: #a5b4fc;
  --fortune-accent-soft: rgba(79, 70, 229, 0.1);
  --fortune-accent-border: rgba(129, 140, 248, 0.27);
}

.fortune-palm-result {
  --fortune-accent: #5eead4;
  --fortune-accent-soft: rgba(13, 148, 136, 0.1);
  --fortune-accent-border: rgba(45, 212, 191, 0.27);
}

.fortune-face-result {
  --fortune-accent: #f0abfc;
  --fortune-accent-soft: rgba(192, 38, 211, 0.1);
  --fortune-accent-border: rgba(232, 121, 249, 0.27);
}

.fortune-wallpaper-result {
  --fortune-accent: #c4b5fd;
  --fortune-accent-soft: rgba(124, 58, 237, 0.1);
  --fortune-accent-border: rgba(167, 139, 250, 0.27);
}

.fortune-modern-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--glass-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.fortune-modern-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--glass-bg);
}

.fortune-modern-media-portrait {
  width: min(100%, 560px);
  margin-inline: auto;
}

.fortune-modern-image-portrait {
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.fortune-modern-download {
  position: absolute;
  right: 14px;
  bottom: 14px;
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.35));
}

.fortune-modern-history-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-bg);
}

.fortune-modern-history-image-portrait {
  max-height: 520px;
  object-fit: contain;
}

/* องค์ประกอบกลางสำหรับผลวิเคราะห์ที่มีรายการตัวเลือกเปรียบเทียบ */
.fortune-modern-intro {
  max-width: 1000px;
}

.fortune-modern-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 999px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.fortune-modern-headline {
  margin: 14px 0 9px;
  color: var(--text-light);
  font-size: clamp(1.4rem, 2.8vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.fortune-modern-summary {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.75;
}

.fortune-modern-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 16px;
  background: var(--fortune-accent-soft);
}

.fortune-modern-feature-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 1.15rem;
}

.fortune-modern-feature small {
  color: var(--fortune-accent);
  font-size: 0.68rem;
  font-weight: 700;
}

.fortune-modern-feature h3 {
  margin: 2px 0 5px;
  color: var(--text-light);
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  font-weight: 800;
}

.fortune-modern-feature p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.77rem;
  line-height: 1.75;
}

.fortune-modern-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.fortune-modern-section-title span {
  display: block;
  color: var(--text-light);
  font-size: 0.95rem;
  font-weight: 800;
}

.fortune-modern-section-title small {
  display: block;
  margin-top: 3px;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
  line-height: 1.6;
}

.fortune-modern-section-title > i {
  color: var(--fortune-accent);
  font-size: 1.2rem;
}

.fortune-modern-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fortune-modern-candidate-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-modern-candidate-card.is-featured {
  border-color: var(--fortune-accent-border);
  background: var(--fortune-accent-soft);
}

.fortune-modern-candidate-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.fortune-modern-candidate-order {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 0.67rem;
  font-weight: 800;
}

.fortune-modern-candidate-heading h3 {
  margin: 0;
  color: var(--text-light);
  font-size: 1rem;
  font-weight: 800;
}

.fortune-modern-candidate-heading small {
  display: block;
  margin-top: 2px;
  color: var(--bs-secondary-color);
  font-size: 0.66rem;
}

.fortune-modern-score {
  color: var(--fortune-accent);
  font-size: 0.75rem;
}

.fortune-modern-candidate-meaning {
  margin: 12px 0;
  color: var(--text-light);
  font-size: 0.77rem;
  line-height: 1.65;
}

.fortune-modern-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.fortune-modern-fact-grid > div {
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: var(--glass-bg);
}

.fortune-modern-fact-grid strong,
.fortune-modern-fact-grid span {
  display: block;
}

.fortune-modern-fact-grid strong {
  color: var(--fortune-accent);
  font-size: 0.65rem;
}

.fortune-modern-fact-grid span {
  margin-top: 4px;
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  line-height: 1.55;
}

.fortune-modern-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.fortune-modern-chip-list span {
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 0.64rem;
  font-weight: 700;
}

.fortune-modern-caution {
  margin: 10px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.67rem;
  line-height: 1.6;
}

.fortune-modern-guidance {
  padding: 14px 16px;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 14px;
  color: var(--text-light);
  background: var(--fortune-accent-soft);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* รายการรองและข้อมูลสนับสนุน ใช้ร่วมกันได้กับทุกศาสตร์แบบ Structured Result */
.fortune-modern-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fortune-modern-support {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fortune-modern-support-group {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  background: var(--glass-bg);
}

.fortune-modern-support-group > strong {
  display: block;
  color: var(--text-light);
  font-size: 0.72rem;
}

.fortune-modern-result :is(
  .fortune-natal-badge,
  .fortune-numerology-badge,
  .fortune-love-badge,
  .fortune-siamsi-badge,
  .fortune-siamsi-number
) {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 999px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 0.7rem;
  font-weight: 700;
}

.fortune-modern-result :is(
  .fortune-natal-headline,
  .fortune-numerology-headline,
  .fortune-love-headline,
  .fortune-siamsi-headline
) {
  max-width: 950px;
  margin: 14px 0 9px;
  color: var(--text-light);
  font-size: clamp(1.4rem, 2.8vw, 2.25rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.fortune-modern-result :is(
  .fortune-natal-birth-profile,
  .fortune-numerology-input-summary,
  .fortune-love-summary,
  .fortune-siamsi-question
) {
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.75;
}

.fortune-modern-result :is(
  .fortune-natal-overview,
  .fortune-numerology-overview,
  .fortune-love-overview,
  .fortune-siamsi-guidance
) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 17px;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 16px;
  background: var(--fortune-accent-soft);
}

.fortune-modern-result :is(
  .fortune-natal-overview,
  .fortune-numerology-overview,
  .fortune-love-overview,
  .fortune-siamsi-guidance
) > span,
.fortune-modern-result :is(
  .fortune-natal-category-grid,
  .fortune-numerology-category-grid,
  .fortune-siamsi-category-grid
) article > span {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
}

.fortune-modern-result :is(
  .fortune-natal-overview,
  .fortune-numerology-overview,
  .fortune-love-overview,
  .fortune-siamsi-guidance,
  .fortune-natal-category-grid article,
  .fortune-numerology-category-grid article,
  .fortune-siamsi-category-grid article
) :is(h3, h4) {
  margin-bottom: 6px;
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 700;
}

.fortune-modern-result :is(
  .fortune-natal-overview,
  .fortune-numerology-overview,
  .fortune-love-overview,
  .fortune-siamsi-guidance,
  .fortune-natal-category-grid article,
  .fortune-numerology-category-grid article,
  .fortune-siamsi-category-grid article
) p {
  margin-bottom: 0;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  line-height: 1.7;
}

.fortune-modern-result :is(
  .fortune-natal-category-grid,
  .fortune-numerology-category-grid,
  .fortune-siamsi-category-grid,
  .fortune-siamsi-reading-grid,
  .fortune-love-dimension-grid,
  .fortune-love-trait-columns
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fortune-modern-result :is(
  .fortune-natal-category-grid,
  .fortune-numerology-category-grid,
  .fortune-siamsi-category-grid,
  .fortune-siamsi-reading-grid
) article,
.fortune-love-dimension-grid article,
.fortune-love-trait-columns > section,
.fortune-natal-trait-columns > section {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-modern-result :is(
  .fortune-natal-category-grid,
  .fortune-numerology-category-grid,
  .fortune-siamsi-category-grid,
  .fortune-siamsi-reading-grid
) article {
  display: flex;
  gap: 13px;
}

.fortune-modern-result :is(
  .fortune-natal-guidance,
  .fortune-numerology-guidance,
  .fortune-love-guidance,
  .fortune-siamsi-blessing
) {
  padding: 14px 16px;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 14px;
  color: var(--text-light);
  background: var(--fortune-accent-soft);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* Layout เฉพาะ: พื้นดวง */
.fortune-natal-archetype {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 11px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 0.76rem;
  font-weight: 650;
}

.fortune-natal-trait-columns,
.fortune-natal-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fortune-natal-timeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fortune-natal-timeline article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 15px;
  border-top: 1px solid var(--fortune-accent-border);
  background: var(--glass-bg);
}

.fortune-natal-timeline-marker {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 2px solid var(--fortune-accent);
  border-radius: 50%;
}

.fortune-natal-paths,
.fortune-numerology-uses {
  padding: 15px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
}

.fortune-natal-paths > div,
.fortune-numerology-uses > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fortune-natal-paths > div > span,
.fortune-numerology-uses > div > span {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--fortune-accent);
  background: var(--fortune-accent-soft);
  font-size: 0.68rem;
}

/* Layout เฉพาะ: เลขศาสตร์ */
.fortune-numerology-hero,
.fortune-love-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.fortune-numerology-number {
  display: block;
  overflow-wrap: anywhere;
  color: var(--text-light);
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.04;
}

.fortune-numerology-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fortune-numerology-metrics article,
.fortune-numerology-pairs-section {
  padding: 13px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  text-align: center;
  background: var(--glass-bg);
}

.fortune-numerology-metrics strong,
.fortune-numerology-pairs strong {
  color: var(--fortune-accent);
}

.fortune-numerology-pairs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.fortune-numerology-pairs article {
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}

.fortune-numerology-trait-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Layout เฉพาะ: ความสัมพันธ์ */
.fortune-love-score {
  width: 140px;
  min-height: 140px;
  display: grid;
  place-content: center;
  border: 1px solid var(--fortune-accent-border);
  border-radius: 50%;
  text-align: center;
  background: var(--fortune-accent-soft);
}

.fortune-love-score strong {
  color: var(--fortune-accent);
  font-size: 2.7rem;
  line-height: 1;
}

.fortune-love-profiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.fortune-love-profiles article,
.fortune-love-next {
  padding: 15px;
  border: 1px solid var(--glass-border);
  border-radius: 15px;
  background: var(--glass-bg);
}

.fortune-love-dimension-top {
  display: flex;
  justify-content: space-between;
  color: var(--fortune-accent);
}

.fortune-love-trait-columns article {
  padding: 9px 0;
  border-top: 1px solid var(--glass-border);
}

.fortune-love-next ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 10px 0 0;
}

/* Layout เฉพาะ: เซียมซี */
.fortune-siamsi-poem {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 21px;
  border: 1px solid var(--fortune-accent-border);
  border-left: 4px solid #b91c1c;
  border-radius: 17px;
  background: var(--fortune-accent-soft);
}

.fortune-siamsi-slip-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--fortune-accent);
}

@media (max-width: 767.98px) {
  .fortune-modern-media {
    border-radius: 15px;
  }

  .fortune-modern-download {
    right: 8px;
    bottom: 8px;
  }

  .fortune-modern-result :is(
    .fortune-natal-category-grid,
    .fortune-numerology-category-grid,
    .fortune-siamsi-category-grid,
    .fortune-siamsi-reading-grid,
    .fortune-love-dimension-grid,
    .fortune-love-trait-columns,
    .fortune-natal-trait-columns,
    .fortune-natal-timeline,
    .fortune-numerology-hero,
    .fortune-numerology-metrics,
    .fortune-numerology-pairs,
    .fortune-numerology-trait-columns,
    .fortune-love-hero,
    .fortune-love-profiles,
    .fortune-love-next ol,
    .fortune-siamsi-poem,
    .fortune-modern-candidate-grid,
    .fortune-modern-list-grid,
    .fortune-modern-support,
    .fortune-modern-fact-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .fortune-love-score {
    justify-self: center;
  }
}

/* ═══ ตัวอย่าง 3D (ลบในภายหลัง) — คลาสกลางสำหรับ canvas ของ Three.js ═══
   canvas โปร่งใส (renderer alpha: true) เพื่อให้พื้นหลังตามธีมทะลุขึ้นมาเอง
   จึงไม่ต้องกำหนดสีในไฟล์นี้หรือใน JS และไม่แตกเมื่อสลับธีมสว่าง/มืด/บลู */
.viewer-3d {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  touch-action: none; /* ให้ OrbitControls จับการลากบนมือถือได้ ไม่ให้หน้าเลื่อนตาม */
}

.viewer-3d-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  max-height: 11rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ═══ ตัวอย่างห้อง 3D (ลบในภายหลัง) ═══
   จอเดินสำรวจต้องสูงกว่าจอดูวัตถุ เพื่อให้เห็นทั้งพื้นและเพดานขณะเดิน
   cursor: grab บอกผู้ใช้ว่าลากเพื่อหันมองได้ (ไม่ได้ใช้ pointer lock เพราะมือถือไม่รองรับ) */
.viewer-3d-room {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 22rem;
  border-radius: 12px;
  cursor: grab;
  touch-action: none; /* กันหน้าเลื่อนตามตอนลากนิ้วเพื่อหันมอง */
}

.viewer-3d-room:active {
  cursor: grabbing;
}

/* ปุ่มเดินบนจอสำหรับมือถือ — วางทับมุมล่างซ้ายของ canvas */
.room-dpad {
  display: grid;
  grid-template-columns: repeat(3, 2.75rem);
  grid-template-rows: repeat(2, 2.75rem);
  gap: 0.25rem;
  justify-content: start;
}

.room-dpad button {
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  touch-action: none;
}

/* ═══ ตัวอย่างห้อง 3D — โหมดเต็มจอ (ลบในภายหลัง) ═══
   ปุ่มเดินกับปุ่มเต็มจอต้องอยู่ "ใน" กรอบนี้ ไม่งั้นพอเข้าเต็มจอแล้วจะหายไปทั้งหมด
   เพราะเบราว์เซอร์แสดงเฉพาะ element ที่ขอเต็มจอกับลูกของมันเท่านั้น */
.viewer-3d-stage {
  position: relative;
  line-height: 0;
}

.viewer-3d-stage:fullscreen {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer-3d-stage:fullscreen .viewer-3d-room {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 0;
}

.room-overlay-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  line-height: 1;
}

.room-dpad-overlay {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
}

/* คำใบ้โต้ตอบในห้อง 3D — โผล่เฉพาะตอนเข้าใกล้ของที่กดได้ (ลบในภายหลัง) */
.room-hint {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none; /* ห้ามบังการคลิกที่ประตู */
}

/* ปุ่มซูมบนจอ (มือถือ) — วางมุมล่างขวาให้สมมาตรกับปุ่มเดินมุมล่างซ้าย */
.room-zoom-btn {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  touch-action: none;
}

/* ─── หน้าแรก (Landing /demo) ───────────────────────────────────────────
   หน้านี้อยู่นอกระบบธีมของแอปโดยตั้งใจ — เป็นหน้าสาธารณะที่ยังไม่ล็อกอิน
   จึงล็อกโทนสว่างชุดเดียว (เหมือน views/index.ejs เดิมที่ override body ทิ้ง)
   แต่เก็บสีไว้เป็นคลาสกลางที่นี่ ไม่กระจาย inline style ในไฟล์ EJS */
.landing {
  --ld-ink: #0f172a;
  --ld-body: #475569;
  --ld-muted: #64748b;
  --ld-line: #e2e8f0;
  --ld-surface: #ffffff;
  --ld-accent: #0284c7;
  --ld-accent-soft: rgba(2, 132, 199, 0.08);
  color: var(--ld-body);
}

.landing h1, .landing h2, .landing h3 { color: var(--ld-ink); }

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 999px;
  background: var(--ld-accent-soft);
  color: var(--ld-accent);
  font-size: 0.82rem;
  font-weight: 600;
}

.landing-hero { padding: 56px 0; }

/* ใช้ h2 ไม่ใช่ h1 — h1 เป็นของแบนเนอร์บนสุด หน้าหนึ่งควรมี h1 ตัวเดียว */
.landing-hero h2 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 16px 0 14px;
}

.landing-hero-lead {
  max-width: 33em;
  font-size: 1.06rem;
  line-height: 1.75;
}

.landing-hero-media {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--ld-line);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.landing-hero-media img { display: block; width: 100%; height: auto; }

/* ⚠️ ใช้ grid ไม่ใช่ flex-wrap — ป้ายสถิติถูกแปล 30 ภาษา บางภาษายาวกว่าไทยเท่าตัว
      (ar "مزوّدو خدمات الذكاء الاصطناعي" 29 ตัว · fi "tekoälypalveluntarjoajaa" 24 ตัว)
      กล่องนี้อยู่ใน col-lg-6 กว้างแค่ครึ่งจอ ถ้าใช้ flex ช่องจะกว้างตามเนื้อหา
      แล้วตกบรรทัดไม่เท่ากันจนแถวดูรุ่งริ่ง — grid บังคับช่องเท่ากันแล้วให้ป้ายตัดบรรทัดในช่องตัวเอง */
.landing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 20px 24px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--ld-line);
}

.landing-stat-num {
  display: block;
  color: var(--ld-ink);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
}

/* ⚠️ ต้องมี overflow-wrap/hyphens — คำเดียวยาว ๆ ของเยอรมัน/ฟินแลนด์ล้นช่อง grid ได้
      hyphens ทำงานได้เพราะ <html lang> ถูกเซ็ตตามภาษาผู้ใช้อยู่แล้ว */
.landing-stat-label {
  font-size: 0.84rem;
  color: var(--ld-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

.landing-section { padding: 56px 0; border-top: 1px solid var(--ld-line); }

.landing-section-head { max-width: 46em; margin-bottom: 30px; }

.landing-section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}

.landing-section-head p { margin: 0; color: var(--ld-muted); }

/* การ์ดหมวด — ใช้ภาพ hero ของหมวดที่มีอยู่แล้วใน public/images/hubs/ */
.landing-hub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ld-line);
  border-radius: 16px;
  background: var(--ld-surface);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.landing-hub-card:hover {
  transform: translateY(-3px);
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.landing-hub-media {
  position: relative;
  aspect-ratio: 16 / 7;
  background: #e2e8f0 center/cover no-repeat;
}

.landing-hub-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.86) 100%);
}

.landing-hub-body { padding: 16px 18px 20px; }

.landing-hub-body h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 6px;
}

.landing-hub-body p {
  margin: 0;
  color: var(--ld-muted);
  font-size: 0.87rem;
  line-height: 1.6;
}

.landing-hub-count {
  margin-top: 14px;
  color: var(--ld-accent);
  font-size: 0.82rem;
  font-weight: 700;
}

/* การ์ดบริการตัวอย่าง — ภาพเล็กด้านบน ข้อความด้านล่าง */
.landing-show-card {
  display: block;
  height: 100%;
  border: 1px solid var(--ld-line);
  border-radius: 14px;
  background: var(--ld-surface);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}

.landing-show-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,0.10); }

.landing-show-media {
  aspect-ratio: 16 / 9;
  background: #e2e8f0 center/cover no-repeat;
}

.landing-show-body { padding: 13px 15px 16px; }

.landing-show-body strong {
  display: block;
  color: var(--ld-ink);
  font-size: 0.93rem;
  margin-bottom: 4px;
}

.landing-show-body span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ld-muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ส่วนอธิบายการคิดเงิน — ภาพครึ่งหนึ่ง ข้อความอีกครึ่ง */
.landing-split-media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--ld-line);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
}

.landing-split-media img { display: block; width: 100%; height: auto; }

.landing-point {
  display: flex;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ld-line);
}

.landing-point:last-child { border-bottom: none; }

.landing-point i {
  flex-shrink: 0;
  color: var(--ld-accent);
  font-size: 1.15rem;
  line-height: 1.5;
}

.landing-point strong { display: block; color: var(--ld-ink); font-size: 0.95rem; margin-bottom: 3px; }
.landing-point span { font-size: 0.87rem; color: var(--ld-muted); line-height: 1.6; }

.landing-cta {
  padding: 52px 34px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
  color: #f0f9ff;
  text-align: center;
}

.landing-cta h2 { color: #ffffff; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: 10px; }
.landing-cta p { color: rgba(240, 249, 255, 0.9); margin-bottom: 24px; }

@media (max-width: 767px) {
  .landing-hero { padding-bottom: 36px; }
  .landing-section { padding: 40px 0; }
  .landing-stats { gap: 20px; }
  .landing-cta { padding: 38px 20px; }
}

/* แบนเนอร์บนสุดของหน้าแรก — เต็มความกว้างจอ
   ⚠️ ใช้เทคนิค negative margin ดันออกนอก .container แทนการปิด container ก่อน
      เพราะ container ที่ header.ejs เปิดไว้มี inline style min-height:100vh
      ถ้าปิดมันตั้งแต่ต้นหน้า จะเหลือกล่องเปล่าสูงเต็มจอคั่นอยู่เหนือแบนเนอร์
      (body มี overflow-x:hidden อยู่แล้ว จึงไม่เกิดแถบเลื่อนแนวนอนจาก 100vw) */
.landing-banner {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: clamp(360px, 58vh, 580px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f172a center/cover no-repeat;
  text-align: center;
  overflow: hidden;
  /* ⚠️ ห้ามใส่ margin-top ลบเพื่อดันขึ้นไปใต้ navbar — เคยทำแล้วพัง
     ค่าลบนั้นทำงานด้วย margin collapsing ทะลุ .landing ขึ้นไปหา .container
     พอ collapsing หยุด (เจอจริงตอนเปิดดรอปดาวน์ในเมนู) ค่าลบหายทันที
     padding-top:100px ของ container โผล่กลับมาเป็นช่องว่าง ดันทั้งหน้าลง 100px
     วิธีที่ถูกคือปิด padding ของ container ไปเลยใน views/index.ejs
     แล้วให้แบนเนอร์เว้นระยะ navbar เองด้วย padding-top ข้างล่างนี้ */
  padding: 172px 20px 64px;
}

.landing-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.42) 0%, rgba(15, 23, 42, 0.62) 55%, rgba(15, 23, 42, 0.74) 100%);
}

.landing-banner-inner {
  position: relative;
  max-width: 46rem;
}

/* ⚠️ ต้องเจาะจงกว่า `.landing h1` (ซึ่งบังคับสีเข้ม) ไม่งั้นตัวหนังสือจะกลายเป็นสีเข้มบนภาพมืด */
.landing .landing-banner-brand {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(2.5rem, 7vw, 4.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.landing-banner-tagline {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 600;
}

.landing-banner-sub {
  max-width: 34em;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.7;
}

.landing-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.landing-banner-actions .btn-outline-light { border-width: 2px; }

@media (max-width: 767px) {
  /* คงการดึงขึ้น -100px ไว้เหมือนเดิม เปลี่ยนแค่ระยะห่างภายใน */
  .landing-banner { min-height: 380px; padding: 150px 16px 48px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   บ้านเสมือนของฉัน — เกมพักสมอง
   ใช้ตัวแปรธีมกลางทั้งหมดเพื่อรองรับ Blue / Dark / Light / Warm / Pink
   ═══════════════════════════════════════════════════════════════════════════ */
.brain-games-shell {
  width: min(100%, 980px);
  margin-inline: auto;
}

.brain-memory-card:focus-visible,
.brain-number-card:focus-visible,
.brain-link-tile:focus-visible,
.brain-tone-pad:focus-visible,
.brain-stroop-choice:focus-visible,
.brain-slide-tile:focus-visible,
.brain-mine-cell:focus-visible,
.brain-nonogram-cell:focus-visible,
.brain-sudoku-cell:focus-visible,
.brain-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 55%, transparent);
  outline-offset: 3px;
}

.brain-game-card {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
}

.brain-game-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

/* ปุ่มท้ายหัวเรื่อง (เปิด/ปิดเสียง + เริ่มใหม่) — ห่อเองเมื่อจอแคบ ไม่ให้ดันหัวเรื่องแตก */
.brain-game-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.brain-game-heading h1,
.brain-game-heading h2 {
  margin: 3px 0 5px;
  color: var(--text-light);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.brain-game-heading p {
  margin: 0;
  color: var(--bs-secondary-color);
}

.brain-game-kicker {
  color: var(--bs-info);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brain-game-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.brain-game-stats > div {
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  text-align: center;
}

.brain-game-stats span,
.brain-game-stats strong {
  display: block;
}

.brain-game-stats span {
  margin-bottom: 2px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.brain-game-stats strong {
  color: var(--text-light);
  font-size: 1.12rem;
}

.brain-game-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 13px);
  width: min(100%, 560px);
  margin-inline: auto;
}

.brain-memory-card,
.brain-number-card {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: clamp(12px, 2vw, 18px);
  color: var(--text-light);
  background: color-mix(in srgb, var(--bs-info) 8%, var(--glass-bg));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--bg-color) 20%, transparent);
  user-select: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.brain-memory-card:hover,
.brain-number-card:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  transform: translateY(-2px);
}

.brain-memory-cover,
.brain-memory-symbol {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.brain-memory-cover {
  display: flex;
  color: var(--bs-info);
  font-size: clamp(1.1rem, 4vw, 1.8rem);
}

.brain-memory-symbol {
  display: none;
  font-size: clamp(1.7rem, 6vw, 3.2rem);
}

.brain-memory-card.is-flipped,
.brain-memory-card.is-matched {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-info) 17%, var(--glass-bg));
}

.brain-memory-card.is-flipped .brain-memory-cover,
.brain-memory-card.is-matched .brain-memory-cover {
  display: none;
}

.brain-memory-card.is-flipped .brain-memory-symbol,
.brain-memory-card.is-matched .brain-memory-symbol {
  display: flex;
}

.brain-memory-card.is-matched {
  border-color: color-mix(in srgb, var(--bs-success) 66%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-success) 13%, var(--glass-bg));
}

.brain-number-card {
  font-size: clamp(1.1rem, 4vw, 1.65rem);
  font-weight: 700;
}

.brain-number-card.is-done {
  border-color: color-mix(in srgb, var(--bs-success) 60%, var(--glass-border));
  color: color-mix(in srgb, var(--bs-success) 78%, var(--text-light));
  background: color-mix(in srgb, var(--bs-success) 13%, var(--glass-bg));
  box-shadow: none;
}

.brain-number-card.is-done::after {
  content: '✓';
  margin-left: 5px;
  font-size: 0.72em;
}

.brain-number-card.is-wrong {
  border-color: color-mix(in srgb, var(--bs-danger) 72%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-danger) 14%, var(--glass-bg));
  animation: brain-game-shake 0.28s ease;
}

/* ── เกมจับคู่ลากเส้น — กระดาน 6×6 พร้อมเส้นเชื่อมที่วาดทับด้านบน ─────────────── */
.brain-link-stage {
  position: relative;
  width: min(100%, 620px);
  margin-inline: auto;
}

.brain-link-board {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(5px, 1.4vw, 9px);
  width: 100%;
}

.brain-link-tile {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: clamp(9px, 1.6vw, 14px);
  color: var(--text-light);
  background: color-mix(in srgb, var(--bs-info) 8%, var(--glass-bg));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bg-color) 18%, transparent);
  font-size: clamp(1.05rem, 4.4vw, 1.9rem);
  line-height: 1;
  user-select: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.brain-link-tile:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  transform: translateY(-2px);
}

.brain-link-tile.is-selected {
  border-color: color-mix(in srgb, var(--bs-info) 78%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-info) 22%, var(--glass-bg));
  transform: translateY(-2px);
}

.brain-link-tile.is-matched {
  border-color: color-mix(in srgb, var(--bs-success) 66%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-success) 16%, var(--glass-bg));
}

.brain-link-tile.is-cleared {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--glass-border) 55%, transparent);
  background: transparent;
  box-shadow: none;
}

.brain-link-tile.is-wrong {
  border-color: color-mix(in srgb, var(--bs-danger) 72%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-danger) 14%, var(--glass-bg));
  animation: brain-game-shake 0.28s ease;
}

/* overflow: visible เพื่อให้เส้นที่เดินอ้อมนอกขอบกระดาน 1 ช่องยังมองเห็นได้ */
.brain-link-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.brain-link-lines polyline {
  fill: none;
  stroke: var(--bs-info);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── สีที่เป็น "กติกาของเกม" — จงใจไม่ผูกกับธีม ────────────────────────────────
   ปกติโปรเจคนี้ห้ามฮาร์ดโค้ดสี เพราะสลับธีมแล้วจะเพี้ยน แต่สองเกมนี้ (จำลำดับ / สีคำ)
   ใช้ "สี" เป็นตัวกติกาโดยตรง — ถ้าสีเปลี่ยนตามธีม เกมจะเล่นไม่ได้ หรือคำตอบเปลี่ยนความหมายไปเลย
   จึงล็อกไว้ที่เดียวตรงนี้ และเลือกเฉดที่อ่านออกทั้งบนพื้นสว่างและพื้นมืด
   ⚠️ ห้ามเอาคลาสกลุ่มนี้ไปใช้กับ UI ทั่วไป — ของทั่วไปใช้ตัวแปรธีมกลางเหมือนเดิม */
.brain-hue-red    { --brain-hue: #e5484d; }
.brain-hue-blue   { --brain-hue: #3d6ef5; }
.brain-hue-green  { --brain-hue: #2ea36a; }
.brain-hue-yellow { --brain-hue: #d99400; }

/* ── เกมจำลำดับ — แผงไฟ 4 ปุ่ม ─────────────────────────────────────────────── */
.brain-tone-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 420px);
}

.brain-tone-pad {
  aspect-ratio: 1;
  min-width: 0;
  border: 2px solid color-mix(in srgb, var(--brain-hue) 45%, transparent);
  border-radius: clamp(14px, 3vw, 22px);
  /* พื้นหลังหรี่คงที่ ไม่อิงธีม เพื่อให้ "ติด/ไม่ติด" ต่างกันชัดเท่ากันทุกธีม (เหมือนของเล่นจริง) */
  background: color-mix(in srgb, var(--brain-hue) 30%, #0d1117);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.brain-tone-pad.is-lit {
  background: var(--brain-hue);
  box-shadow: 0 0 30px color-mix(in srgb, var(--brain-hue) 70%, transparent);
  transform: scale(1.04);
}

/* ── เกมสีคำ — คำใหญ่ + ปุ่มตอบสี่สี ───────────────────────────────────────── */
.brain-stroop-stage {
  display: grid;
  place-items: center;
  min-height: clamp(120px, 22vw, 190px);
  margin-bottom: 18px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

.brain-stroop-word {
  color: var(--brain-hue);
  font-size: clamp(2.2rem, 9vw, 4rem);
  font-weight: 800;
  line-height: 1.2;
}

.brain-stroop-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 13px);
  width: min(100%, 560px);
  margin-inline: auto;
}

.brain-stroop-choice {
  padding: clamp(10px, 2.4vw, 16px) 6px;
  border: 2px solid color-mix(in srgb, var(--brain-hue) 70%, #000);
  border-radius: clamp(12px, 2vw, 16px);
  /* ตัวอักษรเข้มบนทุกเฉด — ขาวจะอ่านไม่ออกบนเหลือง */
  color: #10131a;
  background: var(--brain-hue);
  font-weight: 700;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.brain-stroop-choice:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.brain-stroop-choice.is-wrong {
  animation: brain-game-shake 0.26s ease;
}

.brain-stroop-choice:disabled {
  filter: grayscale(0.55);
  opacity: 0.65;
}

/* ── เกมเลื่อนแผ่นเลข ──────────────────────────────────────────────────────── */
.brain-slide-board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 480px);
}

.brain-slide-tile {
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: clamp(10px, 2vw, 16px);
  color: var(--text-light);
  background: color-mix(in srgb, var(--bs-info) 8%, var(--glass-bg));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bg-color) 18%, transparent);
  font-size: clamp(1.05rem, 4.4vw, 1.7rem);
  font-weight: 700;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.brain-slide-tile:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  transform: translateY(-2px);
}

/* ช่องว่างต้องกินพื้นที่ในกริดต่อไป ไม่งั้นแผ่นอื่นจะไหลมาแทนที่ทั้งกระดาน */
.brain-slide-tile.is-empty {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--glass-border) 55%, transparent);
  background: transparent;
  box-shadow: none;
}

.brain-slide-tile.is-home {
  border-color: color-mix(in srgb, var(--bs-success) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-success) 12%, var(--glass-bg));
}

/* ── เกมกู้ระเบิด ──────────────────────────────────────────────────────────── */
.brain-mine-board {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(3px, 0.9vw, 6px);
  width: min(100%, 540px);
}

.brain-mine-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: clamp(5px, 1.2vw, 9px);
  color: var(--text-light);
  background: color-mix(in srgb, var(--bs-info) 10%, var(--glass-bg));
  font-size: clamp(0.72rem, 2.7vw, 1.15rem);
  font-weight: 800;
  line-height: 1;
  transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.brain-mine-cell:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  transform: translateY(-1px);
}

/* ช่องที่เปิดแล้ว — ยุบลงไปให้ต่างจากช่องที่ยังปิดอยู่ชัดเจน */
.brain-mine-cell.is-open {
  border-color: color-mix(in srgb, var(--glass-border) 60%, transparent);
  background: color-mix(in srgb, var(--bg-color) 30%, transparent);
  box-shadow: none;
}

.brain-mine-cell.is-flagged {
  border-color: color-mix(in srgb, var(--bs-warning) 60%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-warning) 16%, var(--glass-bg));
}

.brain-mine-cell.is-mine {
  border-color: color-mix(in srgb, var(--bs-danger) 55%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-danger) 20%, var(--glass-bg));
}

/* ลูกที่กดโดนจริง — เข้มกว่าลูกอื่นเพื่อให้รู้ว่าแพ้เพราะช่องไหน */
.brain-mine-cell.is-boom {
  border-color: var(--bs-danger);
  background: color-mix(in srgb, var(--bs-danger) 55%, var(--glass-bg));
  animation: brain-game-shake 0.3s ease;
}

/* ธงที่ปักผิดที่ (เฉลยตอนแพ้) */
.brain-mine-cell.is-wrong-flag {
  border-color: color-mix(in srgb, var(--bs-danger) 50%, var(--glass-border));
  text-decoration: line-through;
}

/* สีตัวเลขบอกจำนวนระเบิดรอบข้าง — เป็นสีคงที่ ไม่ผูกกับธีม ด้วยเหตุผลเดียวกับ .brain-hue-*
   (ผู้เล่นจำ "3 คือแดง" ได้จากเกมนี้ทุกเวอร์ชันในโลก ถ้าสีเปลี่ยนตามธีมจะอ่านกระดานช้าลง)
   เลข 7-8 ไม่ได้ใช้สีคลาสสิก (เทาเข้ม/ดำ) เพราะมองไม่เห็นบนธีมมืด */
.brain-mine-count-1 { color: #4f7cff; }
.brain-mine-count-2 { color: #2ea36a; }
.brain-mine-count-3 { color: #e5484d; }
.brain-mine-count-4 { color: #a855f7; }
.brain-mine-count-5 { color: #d97706; }
.brain-mine-count-6 { color: #0ea5b7; }
.brain-mine-count-7 { color: #94a3b8; }
.brain-mine-count-8 { color: #ec4899; }

/* ── เกมโนโนแกรม 5×5 ──────────────────────────────────────────────────────── */
.brain-nonogram-wrap {
  width: 100%;
  overflow-x: auto;
  padding: 3px;
}

.brain-nonogram-grid {
  display: grid;
  grid-template-columns: minmax(58px, 0.9fr) repeat(5, minmax(38px, 1fr));
  gap: 3px;
  width: min(100%, 440px);
  margin-inline: auto;
}

.brain-nonogram-corner,
.brain-nonogram-hint {
  min-width: 0;
  min-height: 58px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--text-light);
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

.brain-nonogram-corner {
  border-style: dashed;
  background: transparent;
}

.brain-nonogram-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  font-size: clamp(0.75rem, 2.8vw, 1rem);
  font-weight: 800;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.brain-nonogram-hint.is-column {
  flex-direction: column;
  justify-content: flex-end;
}

.brain-nonogram-hint.is-row {
  justify-content: flex-end;
}

.brain-nonogram-hint.is-complete {
  border-color: color-mix(in srgb, var(--bs-success) 58%, var(--glass-border));
  color: color-mix(in srgb, var(--bs-success) 78%, var(--text-light));
  background: color-mix(in srgb, var(--bs-success) 11%, var(--glass-bg));
}

.brain-nonogram-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--bs-info) 6%, var(--glass-bg));
  font-size: clamp(1rem, 4.5vw, 1.55rem);
  font-weight: 700;
  line-height: 1;
  user-select: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.brain-nonogram-cell:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 65%, var(--glass-border));
  transform: translateY(-1px);
}

.brain-nonogram-cell.is-filled {
  border-color: color-mix(in srgb, var(--bs-info) 74%, var(--glass-border));
  background: var(--bs-info);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-light) 18%, transparent);
}

.brain-nonogram-cell.is-crossed {
  background: color-mix(in srgb, var(--bg-color) 30%, transparent);
}

.brain-nonogram-grid.is-solved .brain-nonogram-cell.is-filled {
  border-color: color-mix(in srgb, var(--bs-success) 72%, var(--glass-border));
  background: var(--bs-success);
}

/* ── เกม 2048 ─────────────────────────────────────────────────────────────── */
.brain-2048-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 2vw, 11px);
  width: min(100%, 450px);
  margin-inline: auto;
  padding: clamp(8px, 2vw, 12px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-color) 42%, var(--glass-bg));
  touch-action: none;
  user-select: none;
}

.brain-2048-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--glass-border) 65%, transparent);
  border-radius: clamp(9px, 2vw, 14px);
  color: #fffaf0;
  background: var(--bs-info);
  box-shadow: 0 5px 12px color-mix(in srgb, var(--bg-color) 20%, transparent);
  font-size: clamp(1.05rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1;
}

.brain-2048-tile.is-empty {
  color: transparent;
  background: color-mix(in srgb, var(--glass-border) 38%, transparent);
  box-shadow: none;
}

/* สีเป็นส่วนหนึ่งของลำดับความก้าวหน้าในเกม จึงกำหนดคงที่เหมือนสีบล็อกและสีเลขกู้ระเบิด */
.brain-2048-tile.tile-2    { color: #3c3a32; background: #eee4da; }
.brain-2048-tile.tile-4    { color: #3c3a32; background: #ede0c8; }
.brain-2048-tile.tile-8    { background: #f2b179; }
.brain-2048-tile.tile-16   { background: #f59563; }
.brain-2048-tile.tile-32   { background: #f67c5f; }
.brain-2048-tile.tile-64   { background: #f65e3b; }
.brain-2048-tile.tile-128  { background: #edcf72; }
.brain-2048-tile.tile-256  { background: #edcc61; }
.brain-2048-tile.tile-512  { background: #edc850; }
.brain-2048-tile.tile-1024 { background: #edc53f; font-size: clamp(0.9rem, 4.2vw, 1.65rem); }
.brain-2048-tile.tile-2048 { background: #edc22e; font-size: clamp(0.9rem, 4.2vw, 1.65rem); }
.brain-2048-tile.tile-4096,
.brain-2048-tile.is-super  { background: #3c3a32; font-size: clamp(0.82rem, 3.8vw, 1.45rem); }

.brain-2048-tile.is-new {
  animation: brain-2048-spawn 0.18s ease-out;
}

.brain-2048-tile.is-merged {
  animation: brain-2048-pop 0.2s ease-out;
}

.brain-2048-controls {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 48px);
  gap: 7px;
  justify-content: center;
  margin-top: 18px;
}

.brain-2048-controls [data-2048-direction="up"]    { grid-area: 1 / 2; }
.brain-2048-controls [data-2048-direction="left"]  { grid-area: 2 / 1; }
.brain-2048-controls [data-2048-direction="down"]  { grid-area: 2 / 2; }
.brain-2048-controls [data-2048-direction="right"] { grid-area: 2 / 3; }

@keyframes brain-2048-spawn {
  from { opacity: 0; transform: scale(0.45); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes brain-2048-pop {
  50% { transform: scale(1.12); }
}

/* ── เกมซูโดกุ ────────────────────────────────────────────────────────────── */
.brain-sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: min(100%, 540px);
  margin-inline: auto;
  border: 2px solid color-mix(in srgb, var(--bs-info) 58%, var(--glass-border));
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-color) 38%, var(--glass-bg));
}

.brain-sudoku-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  color: var(--bs-info);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  font-size: clamp(0.9rem, 4.1vw, 1.55rem);
  font-weight: 700;
  line-height: 1;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.brain-sudoku-cell.is-box-right {
  border-right-width: 2px;
  border-right-color: color-mix(in srgb, var(--bs-info) 50%, var(--glass-border));
}

.brain-sudoku-cell.is-box-bottom {
  border-bottom-width: 2px;
  border-bottom-color: color-mix(in srgb, var(--bs-info) 50%, var(--glass-border));
}

.brain-sudoku-cell.is-given {
  color: var(--text-light);
  background: color-mix(in srgb, var(--bg-color) 28%, var(--glass-bg));
  font-weight: 800;
}

/* ปลายดินสอคือ hotspot ของเคอร์เซอร์ เพื่อให้ตำแหน่งคลิกตรงกับช่องที่กำลังจดโน้ต */
.brain-sudoku-board.is-note-mode .brain-sudoku-cell:not(.is-given):not(:disabled) {
  cursor: url('/images/sudoku-note-cursor.svg') 4 28, crosshair;
}

.brain-sudoku-cell.is-peer {
  background: color-mix(in srgb, var(--bs-info) 8%, var(--glass-bg));
}

.brain-sudoku-cell.is-same {
  background: color-mix(in srgb, var(--bs-info) 18%, var(--glass-bg));
}

.brain-sudoku-cell.is-selected {
  z-index: 1;
  background: color-mix(in srgb, var(--bs-info) 28%, var(--glass-bg));
  box-shadow: inset 0 0 0 2px var(--bs-info);
}

.brain-sudoku-cell.is-conflict,
.brain-sudoku-cell.is-wrong {
  color: var(--bs-danger);
  background: color-mix(in srgb, var(--bs-danger) 14%, var(--glass-bg));
  animation: brain-game-shake 0.26s ease;
}

.brain-sudoku-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  padding: 2px;
  color: var(--bs-secondary-color);
  font-size: clamp(0.4rem, 1.55vw, 0.68rem);
  font-weight: 600;
  line-height: 1;
}

.brain-sudoku-notes > span {
  display: grid;
  place-items: center;
}

.brain-sudoku-keypad {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(3px, 1vw, 7px);
  width: min(100%, 540px);
  margin: 18px auto 0;
}

.brain-sudoku-keypad .btn {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  font-weight: 700;
}

/* ── เกมเขาวงกต ──────────────────────────────────────────────────────────── */
.brain-maze-board {
  display: grid;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--bs-info) 58%, var(--glass-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-color) 68%, var(--glass-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
  touch-action: none;
  user-select: none;
}

.brain-maze-board:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 55%, transparent);
  outline-offset: 3px;
}

.brain-maze-board.maze-size-21 { grid-template-columns: repeat(21, minmax(0, 1fr)); }
.brain-maze-board.maze-size-31 { grid-template-columns: repeat(31, minmax(0, 1fr)); }
.brain-maze-board.maze-size-41 { grid-template-columns: repeat(41, minmax(0, 1fr)); }

.brain-maze-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  color: var(--bs-info);
  line-height: 1;
}

.brain-maze-cell.is-wall {
  background: color-mix(in srgb, var(--bg-color) 78%, var(--text-light));
}

.brain-maze-cell.is-path {
  cursor: pointer;
  background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
}

.brain-maze-cell.is-visited {
  background: color-mix(in srgb, var(--bs-info) 14%, var(--glass-bg));
}

.brain-maze-cell.is-start {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-info) 72%, transparent);
}

.brain-maze-cell.is-goal {
  color: var(--bs-success);
  background: color-mix(in srgb, var(--bs-success) 18%, var(--glass-bg));
}

.brain-maze-cell.is-player {
  z-index: 1;
  color: var(--bs-info);
  background: color-mix(in srgb, var(--bs-info) 26%, var(--glass-bg));
  box-shadow: inset 0 0 0 2px var(--bs-info);
}

.brain-maze-marker {
  font-size: clamp(0.62rem, 2.8vw, 1.3rem);
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--bg-color) 48%, transparent));
}

.brain-maze-board.maze-size-21 .brain-maze-marker {
  font-size: clamp(0.48rem, 1.8vw, 0.88rem);
}

.brain-maze-board.maze-size-31 .brain-maze-marker {
  font-size: clamp(0.38rem, 1.3vw, 0.68rem);
}

.brain-maze-board.maze-size-41 .brain-maze-marker {
  font-size: clamp(0.3rem, 1vw, 0.56rem);
}

.brain-maze-board.is-bump {
  animation: brain-game-shake 0.26s ease;
}

.brain-maze-board.is-solved .brain-maze-cell.is-player {
  color: var(--bs-success);
  box-shadow: inset 0 0 0 2px var(--bs-success);
}

.brain-maze-board.is-solved .brain-maze-marker {
  animation: brain-maze-celebrate 0.7s ease-in-out infinite alternate;
}

.brain-maze-controls {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 48px);
  gap: 7px;
  justify-content: center;
  margin-top: 18px;
}

.brain-maze-controls [data-maze-direction="up"]    { grid-area: 1 / 2; }
.brain-maze-controls [data-maze-direction="left"]  { grid-area: 2 / 1; }
.brain-maze-controls [data-maze-direction="down"]  { grid-area: 2 / 2; }
.brain-maze-controls [data-maze-direction="right"] { grid-area: 2 / 3; }

@keyframes brain-maze-celebrate {
  from { transform: translateY(1px) scale(1); }
  to { transform: translateY(-2px) scale(1.12); }
}

/* ── เกมงูเก็บอาหาร ───────────────────────────────────────────────────────── */
.brain-snake-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: clamp(4px, 1vw, 7px);
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--bs-info) 58%, var(--glass-border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-color) 62%, var(--glass-border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
  touch-action: none;
  user-select: none;
}

.brain-snake-board:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 55%, transparent);
  outline-offset: 3px;
}

.brain-snake-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 24%;
  background: color-mix(in srgb, var(--glass-bg) 88%, transparent);
  line-height: 1;
  transition: background-color 0.08s ease, transform 0.08s ease;
}

.brain-snake-cell.is-snake {
  background: color-mix(in srgb, var(--bs-success) 78%, var(--bs-info));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-light) 16%, transparent);
}

.brain-snake-cell.is-head {
  z-index: 1;
  color: var(--text-light);
  background: var(--bs-info);
  transform: scale(1.08);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-info) 36%, transparent);
}

.brain-snake-cell.is-food {
  color: var(--bs-danger);
  background: color-mix(in srgb, var(--bs-danger) 13%, var(--glass-bg));
}

.brain-snake-marker {
  font-size: clamp(0.48rem, 2.4vw, 1.05rem);
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--bg-color) 42%, transparent));
}

.brain-snake-cell.is-food .brain-snake-marker {
  animation: brain-snake-food-pulse 0.8s ease-in-out infinite alternate;
}

.brain-snake-board.is-paused::after {
  content: 'พักเกม';
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--text-light);
  background: color-mix(in srgb, var(--bg-color) 68%, transparent);
  backdrop-filter: blur(3px);
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 800;
}

.brain-snake-board.is-game-over .brain-snake-cell,
.brain-snake-board.is-won .brain-snake-cell:not(.is-snake) {
  opacity: 0.64;
}

.brain-snake-board.is-won .brain-snake-cell.is-snake {
  animation: brain-snake-win 0.55s ease-in-out infinite alternate;
}

.brain-snake-controls {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 48px);
  gap: 7px;
  justify-content: center;
  margin-top: 18px;
}

.brain-snake-controls [data-snake-direction="up"]    { grid-area: 1 / 2; }
.brain-snake-controls [data-snake-direction="left"]  { grid-area: 2 / 1; }
.brain-snake-controls [data-snake-direction="down"]  { grid-area: 2 / 2; }
.brain-snake-controls [data-snake-direction="right"] { grid-area: 2 / 3; }

@keyframes brain-snake-food-pulse {
  from { transform: scale(0.86); }
  to { transform: scale(1.14); }
}

@keyframes brain-snake-win {
  from { filter: brightness(1); }
  to { filter: brightness(1.35); }
}

/* ── เกม Lights Out ───────────────────────────────────────────────────────── */
.brain-lights-out-board {
  display: grid;
  gap: clamp(6px, 1.6vw, 11px);
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: clamp(9px, 2vw, 15px);
  border: 2px solid color-mix(in srgb, var(--bs-info) 54%, var(--glass-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-color) 58%, var(--glass-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
}

.brain-lights-out-board.lights-out-size-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 360px);
}

.brain-lights-out-board.lights-out-size-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 460px);
}

.brain-lights-out-board.lights-out-size-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.brain-lights-out-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--glass-border) 76%, transparent);
  border-radius: clamp(8px, 2vw, 15px);
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--bg-color) 48%, var(--glass-bg));
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--bg-color) 35%, transparent);
  transition: transform 0.12s ease, border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.brain-lights-out-cell:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  transform: translateY(-1px);
}

.brain-lights-out-cell.is-on {
  color: color-mix(in srgb, var(--bs-warning) 84%, var(--text-light));
  border-color: color-mix(in srgb, var(--bs-warning) 72%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-warning) 25%, var(--glass-bg));
  box-shadow:
    inset 0 0 15px color-mix(in srgb, var(--bs-warning) 36%, transparent),
    0 0 15px color-mix(in srgb, var(--bs-warning) 28%, transparent);
}

.brain-lights-out-cell:focus-visible {
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--bs-info) 62%, transparent);
  outline-offset: 2px;
}

.brain-lights-out-marker {
  font-size: clamp(1.35rem, 8vw, 3.7rem);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--bs-warning) 64%, transparent));
}

.brain-lights-out-board.lights-out-size-5 .brain-lights-out-marker {
  font-size: clamp(1.05rem, 6vw, 2.7rem);
}

.brain-lights-out-board.lights-out-size-7 .brain-lights-out-marker {
  font-size: clamp(0.82rem, 4.4vw, 1.9rem);
}

.brain-lights-out-board.is-solved .brain-lights-out-cell {
  border-color: color-mix(in srgb, var(--bs-success) 46%, var(--glass-border));
  animation: brain-lights-out-finish 0.48s ease-out;
}

@keyframes brain-lights-out-finish {
  50% { transform: scale(0.92); }
}

/* ── เกมหอคอยฮานอย ───────────────────────────────────────────────────────── */
.brain-hanoi-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 14px);
  width: min(100%, 760px);
  margin-inline: auto;
  padding: clamp(8px, 2vw, 16px);
  border: 2px solid color-mix(in srgb, var(--bs-info) 52%, var(--glass-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-color) 42%, var(--glass-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
}

.brain-hanoi-tower {
  min-width: 0;
  padding: clamp(5px, 1.2vw, 10px);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--text-light);
  background: color-mix(in srgb, var(--glass-bg) 84%, transparent);
  transition: border-color 0.14s ease, background-color 0.14s ease, transform 0.14s ease;
}

.brain-hanoi-tower:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 58%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-info) 7%, var(--glass-bg));
  transform: translateY(-1px);
}

.brain-hanoi-tower:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 58%, transparent);
  outline-offset: 2px;
}

.brain-hanoi-tower.is-selected {
  border-color: var(--bs-info);
  background: color-mix(in srgb, var(--bs-info) 13%, var(--glass-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bs-info) 42%, transparent);
}

.brain-hanoi-tower.is-invalid {
  border-color: var(--bs-danger);
  animation: brain-game-shake 0.26s ease;
}

.brain-hanoi-tower.is-goal {
  border-color: var(--bs-success);
  background: color-mix(in srgb, var(--bs-success) 11%, var(--glass-bg));
}

.brain-hanoi-label {
  display: block;
  margin-bottom: 5px;
  color: var(--bs-secondary-color);
  font-size: clamp(0.7rem, 2.2vw, 0.92rem);
  font-weight: 700;
}

.brain-hanoi-stage {
  position: relative;
  display: block;
  height: clamp(210px, 32vw, 285px);
}

.brain-hanoi-pole {
  position: absolute;
  left: 50%;
  bottom: 17px;
  width: clamp(5px, 1.1vw, 9px);
  height: 88%;
  border-radius: 999px 999px 3px 3px;
  background: color-mix(in srgb, var(--bs-secondary) 72%, var(--text-light));
  transform: translateX(-50%);
}

.brain-hanoi-base {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 10px;
  height: clamp(7px, 1.5vw, 11px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-secondary) 76%, var(--text-light));
}

.brain-hanoi-stack {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  pointer-events: none;
}

.brain-hanoi-disk {
  display: grid;
  place-items: center;
  height: clamp(18px, 3.4vw, 29px);
  border: 1px solid color-mix(in srgb, var(--text-light) 20%, transparent);
  border-radius: 999px;
  color: var(--text-light);
  box-shadow: 0 3px 7px color-mix(in srgb, var(--bg-color) 30%, transparent);
  font-size: clamp(0.58rem, 1.8vw, 0.8rem);
  font-weight: 800;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.brain-hanoi-disk + .brain-hanoi-disk {
  margin-bottom: 2px;
}

.brain-hanoi-disk.disk-size-1 { width: 34%; background: color-mix(in srgb, var(--bs-info) 78%, var(--bs-success)); }
.brain-hanoi-disk.disk-size-2 { width: 44%; background: color-mix(in srgb, var(--bs-info) 72%, var(--bs-warning)); }
.brain-hanoi-disk.disk-size-3 { width: 54%; background: color-mix(in srgb, var(--bs-success) 68%, var(--bs-info)); }
.brain-hanoi-disk.disk-size-4 { width: 64%; background: color-mix(in srgb, var(--bs-warning) 68%, var(--bs-info)); }
.brain-hanoi-disk.disk-size-5 { width: 74%; background: color-mix(in srgb, var(--bs-primary) 72%, var(--bs-info)); }
.brain-hanoi-disk.disk-size-6 { width: 84%; background: color-mix(in srgb, var(--bs-danger) 62%, var(--bs-warning)); }
.brain-hanoi-disk.disk-size-7 { width: 94%; background: color-mix(in srgb, var(--bs-secondary) 58%, var(--bs-info)); }

.brain-hanoi-disk.is-picked {
  transform: translateY(-9px);
  box-shadow: 0 7px 13px color-mix(in srgb, var(--bs-info) 34%, transparent);
}

.brain-hanoi-board.is-solved .brain-hanoi-tower.is-goal .brain-hanoi-disk {
  animation: brain-hanoi-finish 0.62s ease-in-out infinite alternate;
}

@keyframes brain-hanoi-finish {
  from { filter: brightness(1); }
  to { filter: brightness(1.26); }
}

/* ── เกมต่อท่อน้ำ ─────────────────────────────────────────────────────────── */
.brain-pipe-board {
  display: grid;
  gap: clamp(3px, 1vw, 7px);
  width: min(100%, 570px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: clamp(6px, 1.5vw, 11px);
  border: 2px solid color-mix(in srgb, var(--bs-info) 54%, var(--glass-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-color) 52%, var(--glass-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
}

.brain-pipe-board.pipe-size-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 430px);
}

.brain-pipe-board.pipe-size-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  width: min(100%, 510px);
}

.brain-pipe-board.pipe-size-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.brain-pipe-cell {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: clamp(6px, 1.6vw, 12px);
  background: color-mix(in srgb, var(--glass-bg) 86%, transparent);
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}

.brain-pipe-cell:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 58%, var(--glass-border));
  transform: translateY(-1px);
}

.brain-pipe-cell:not(:disabled):active {
  transform: scale(0.94);
}

.brain-pipe-cell:focus-visible {
  z-index: 2;
  outline: 3px solid color-mix(in srgb, var(--bs-info) 58%, transparent);
  outline-offset: 2px;
}

.brain-pipe-cell.is-connected {
  border-color: color-mix(in srgb, var(--bs-info) 56%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-info) 10%, var(--glass-bg));
}

.brain-pipe-cell.is-source {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-info) 58%, transparent);
}

.brain-pipe-piece {
  position: absolute;
  inset: 8%;
  pointer-events: none;
}

.brain-pipe-arm,
.brain-pipe-center {
  position: absolute;
  display: block;
  background: color-mix(in srgb, var(--bs-secondary) 76%, var(--text-light));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-light) 13%, transparent);
  transition: background-color 0.14s ease, box-shadow 0.14s ease;
}

.brain-pipe-arm.is-north {
  top: -10%;
  left: 39%;
  width: 22%;
  height: 60%;
  border-radius: 999px 999px 0 0;
}

.brain-pipe-arm.is-east {
  top: 39%;
  right: -10%;
  width: 60%;
  height: 22%;
  border-radius: 0 999px 999px 0;
}

.brain-pipe-arm.is-south {
  bottom: -10%;
  left: 39%;
  width: 22%;
  height: 60%;
  border-radius: 0 0 999px 999px;
}

.brain-pipe-arm.is-west {
  top: 39%;
  left: -10%;
  width: 60%;
  height: 22%;
  border-radius: 999px 0 0 999px;
}

.brain-pipe-center {
  top: 34%;
  left: 34%;
  width: 32%;
  height: 32%;
  border-radius: 50%;
}

.brain-pipe-cell.is-connected .brain-pipe-arm,
.brain-pipe-cell.is-connected .brain-pipe-center {
  background: var(--bs-info);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text-light) 20%, transparent),
    0 0 8px color-mix(in srgb, var(--bs-info) 42%, transparent);
}

.brain-pipe-source {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 1;
  color: var(--bs-info);
  font-size: clamp(0.58rem, 2.4vw, 1rem);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--bs-info) 45%, transparent));
  pointer-events: none;
}

.brain-pipe-board.is-solved .brain-pipe-cell {
  animation: brain-pipe-finish 0.65s ease-in-out infinite alternate;
}

@keyframes brain-pipe-finish {
  from { filter: brightness(1); }
  to { filter: brightness(1.16); }
}

/* ── เกมถอดรหัสสี ────────────────────────────────────────────────────────── */
.brain-code-board {
  width: min(100%, 650px);
  margin-inline: auto;
  padding: clamp(12px, 2.5vw, 20px);
  border: 2px solid color-mix(in srgb, var(--bs-info) 50%, var(--glass-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-color) 34%, var(--glass-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
}

.brain-code-secret,
.brain-code-current {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(7px, 1.5vw, 11px);
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 84%, transparent);
}

.brain-code-secret strong,
.brain-code-current strong {
  margin-right: 5px;
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.brain-code-history {
  display: grid;
  gap: 6px;
  max-height: 430px;
  margin-block: 12px;
  overflow-y: auto;
  padding-right: 3px;
}

.brain-code-history-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
  min-height: 52px;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--glass-border) 74%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
}

.brain-code-history-row.is-current {
  border-color: color-mix(in srgb, var(--bs-info) 52%, var(--glass-border));
  background: color-mix(in srgb, var(--bs-info) 7%, var(--glass-bg));
}

.brain-code-round-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--glass-border) 45%, transparent);
  font-size: 0.7rem;
  font-weight: 800;
}

.brain-code-guess-pegs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.3vw, 9px);
  min-width: 0;
}

.brain-code-peg {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(30px, 7vw, 42px);
  height: clamp(30px, 7vw, 42px);
  border: 2px solid color-mix(in srgb, var(--text-light) 24%, transparent);
  border-radius: 50%;
  color: var(--text-light);
  box-shadow:
    inset 0 4px 7px color-mix(in srgb, var(--text-light) 16%, transparent),
    0 3px 7px color-mix(in srgb, var(--bg-color) 27%, transparent);
  font-size: clamp(0.65rem, 2vw, 0.82rem);
  font-weight: 900;
  line-height: 1;
}

.brain-code-peg.is-hidden {
  border-style: dashed;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--bg-color) 52%, var(--glass-bg));
}

.brain-code-peg.is-empty {
  border: 2px dashed color-mix(in srgb, var(--glass-border) 82%, transparent);
  background: transparent;
  box-shadow: none;
}

/* สีเป็นข้อมูลหลักของเกม จึงกำหนดคงที่และใส่หมายเลขกำกับเพื่อไม่พึ่งการมองสีเพียงอย่างเดียว */
.brain-code-peg.code-color-1 { background: #ef4444; }
.brain-code-peg.code-color-2 { background: #2563eb; }
.brain-code-peg.code-color-3 { background: #16a34a; }
.brain-code-peg.code-color-4 { color: #172033; background: #facc15; }
.brain-code-peg.code-color-5 { background: #9333ea; }
.brain-code-peg.code-color-6 { color: #172033; background: #fb923c; }
.brain-code-peg.code-color-7 { background: #db2777; }
.brain-code-peg.code-color-8 { color: #172033; background: #22d3ee; }

.brain-code-feedback {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 88px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.brain-code-feedback-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  padding: 4px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
}

.brain-code-feedback-item.is-exact { color: var(--bs-success); }
.brain-code-feedback-item.is-misplaced { color: var(--bs-warning); }

.brain-code-current {
  margin-bottom: 12px;
  border-color: color-mix(in srgb, var(--bs-info) 48%, var(--glass-border));
}

.brain-code-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
  gap: clamp(5px, 1.2vw, 9px);
  width: min(100%, 520px);
  margin: 0 auto 14px;
}

.brain-code-color-button {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.brain-code-color-button:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--bs-info) 62%, var(--glass-border));
  transform: translateY(-2px);
}

.brain-code-color-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 58%, transparent);
  outline-offset: 2px;
}

.brain-code-color-button .brain-code-peg {
  width: clamp(31px, 6vw, 39px);
  height: clamp(31px, 6vw, 39px);
}

@media (max-width: 575.98px) {
  .brain-code-history-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .brain-code-feedback {
    grid-column: 2;
    justify-content: center;
  }

  .brain-code-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── เกมเรียงน้ำสี ────────────────────────────────────────────────────────── */
.brain-water-board {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.5vw, 22px);
  width: min(100%, 780px);
  min-height: 235px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 28px);
  border: 2px solid color-mix(in srgb, var(--bs-info) 42%, var(--glass-border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg-color) 34%, var(--glass-bg));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--bg-color) 22%, transparent);
}

.brain-water-tube {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  width: clamp(48px, 8vw, 64px);
  padding: 10px 4px 2px;
  border: 0;
  border-radius: 18px;
  color: var(--text-light);
  background: transparent;
  transition: transform 0.16s ease, background-color 0.16s ease;
}

.brain-water-tube:not(:disabled):hover {
  background: color-mix(in srgb, var(--bs-info) 7%, transparent);
  transform: translateY(-4px);
}

.brain-water-tube.is-selected {
  background: color-mix(in srgb, var(--bs-info) 11%, transparent);
  transform: translateY(-12px);
}

.brain-water-tube:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 62%, transparent);
  outline-offset: 2px;
}

.brain-water-vessel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: clamp(42px, 7vw, 54px);
  height: clamp(142px, 22vw, 176px);
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--text-light) 48%, var(--glass-border));
  border-top: 0;
  border-radius: 0 0 22px 22px;
  background: color-mix(in srgb, var(--glass-bg) 38%, transparent);
  box-shadow:
    inset 8px 0 12px color-mix(in srgb, var(--text-light) 8%, transparent),
    0 7px 14px color-mix(in srgb, var(--bg-color) 25%, transparent);
}

.brain-water-vessel::before {
  position: absolute;
  top: 0;
  left: -2px;
  z-index: 2;
  width: calc(100% + 4px);
  height: 5px;
  border: 2px solid color-mix(in srgb, var(--text-light) 58%, var(--glass-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--glass-bg) 54%, transparent);
  content: '';
  pointer-events: none;
}

.brain-water-layer {
  display: block;
  flex: 0 0 25%;
  width: 100%;
  box-shadow: inset 8px 0 10px rgba(255, 255, 255, 0.13);
  transition: background-color 0.16s ease, filter 0.16s ease;
}

.brain-water-layer:last-child {
  border-radius: 0 0 18px 18px;
}

/* สีคือข้อมูลหลักของเกม จึงกำหนดคงที่และมีชื่อสีใน aria-label ของแต่ละหลอดกำกับ */
.brain-water-layer.water-color-1 { background: #ef4444; }
.brain-water-layer.water-color-2 { background: #2563eb; }
.brain-water-layer.water-color-3 { background: #16a34a; }
.brain-water-layer.water-color-4 { background: #facc15; }
.brain-water-layer.water-color-5 { background: #9333ea; }
.brain-water-layer.water-color-6 { background: #f97316; }
.brain-water-layer.water-color-7 { background: #db2777; }
.brain-water-layer.water-color-8 { background: #22d3ee; }
.brain-water-layer.water-color-9 { background: #84cc16; }
.brain-water-layer.water-color-10 { background: #92400e; }

.brain-water-tube-number {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--bs-secondary-color);
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
}

.brain-water-tube.is-complete .brain-water-vessel {
  border-color: color-mix(in srgb, var(--bs-success) 62%, var(--glass-border));
  animation: brain-water-complete 0.85s ease-in-out infinite alternate;
}

@keyframes brain-water-complete {
  from { filter: brightness(1); }
  to { filter: brightness(1.16); }
}

@media (max-width: 575.98px) {
  .brain-water-board {
    gap: 7px;
    padding: 15px 7px;
  }

  .brain-water-tube {
    width: 45px;
    padding-inline: 2px;
  }

  .brain-water-vessel {
    width: 39px;
    height: 132px;
  }
}

/* ── เกมไพ่คนเดียว (โซลิแทร์) ───────────────────────────────────────────────
   ขนาดไพ่คุมด้วยตัวแปรตัวเดียว แล้วให้ทุกอย่างคำนวณต่อจากมัน — แก้ที่เดียวปรับได้ทั้งกระดาน
   ต้องพอดี 7 คอลัมน์บนจอแคบสุด: 7×38 + 6×4 = 290px ยังไม่ล้นจอ 320px */
.brain-solitaire {
  --brain-card-w: clamp(38px, 10.5vw, 74px);
  --brain-card-h: calc(var(--brain-card-w) * 1.42);
  --brain-card-gap: clamp(4px, 1.2vw, 10px);
  width: 100%;
  margin-inline: auto;
}

.brain-solitaire-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--brain-card-gap);
}

.brain-solitaire-row + .brain-solitaire-row {
  margin-top: clamp(12px, 2.6vw, 22px);
}

.brain-solitaire-pile {
  display: flex;
  flex-direction: column;
  min-height: var(--brain-card-h);
}

/* ไพ่ในกองล่างซ้อนเหลื่อมกัน เห็นเฉพาะมุมบนที่บอกเลขกับดอก */
.brain-solitaire-column > .brain-card + .brain-card {
  margin-top: calc(var(--brain-card-h) * -0.7);
}

/* กองบน (สำรับ/กองทิ้ง/กองเก็บ) ซ้อนทับกันสนิท เห็นเฉพาะใบบนสุด */
.brain-solitaire-stack > .brain-card + .brain-card {
  margin-top: calc(var(--brain-card-h) * -1);
}

.brain-card-slot {
  height: var(--brain-card-h);
  border: 1px dashed color-mix(in srgb, var(--glass-border) 70%, transparent);
  border-radius: clamp(4px, 1vw, 8px);
  background: color-mix(in srgb, var(--glass-bg) 40%, transparent);
}

.brain-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  height: var(--brain-card-h);
  padding: clamp(2px, 0.9vw, 6px);
  border: 1px solid rgba(15, 23, 42, 0.35);
  border-radius: clamp(4px, 1vw, 8px);
  /* ไพ่ต้องเป็นพื้นสว่างเสมอทุกธีม — ไพ่จริงไม่มีโหมดมืด และเลขต้องอ่านออกตลอด */
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
  font-size: clamp(0.62rem, 2.5vw, 1rem);
  font-weight: 800;
  line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.brain-card:not(:disabled):not(.is-down):hover {
  transform: translateY(-2px);
}

/* หลังไพ่ — สีคงที่ ไม่ผูกกับธีม เพื่อให้แยก "คว่ำ/หงาย" ได้ชัดเท่ากันทุกธีม */
.brain-card.is-down {
  border-color: rgba(15, 23, 42, 0.5);
  background: repeating-linear-gradient(45deg, #1d4ed8, #1d4ed8 4px, #1e40af 4px, #1e40af 8px);
  cursor: default;
}

.brain-card.is-selected {
  outline: 3px solid var(--bs-info);
  outline-offset: 1px;
  transform: translateY(-3px);
}

.brain-card-red   { color: #d92d20; }
.brain-card-black { color: #111827; }

.brain-card-suit {
  font-size: 1.05em;
}

.brain-solitaire-spacer {
  min-height: var(--brain-card-h);
}

/* ── เกมไพ่สไปเดอร์ (Spider Solitaire) ───────────────────────────────────────── */
.brain-spider {
  --brain-card-w: clamp(28px, 8.8vw, 68px);
  --brain-card-h: calc(var(--brain-card-w) * 1.42);
  --brain-card-gap: clamp(2px, 0.8vw, 8px);
  width: 100%;
  margin-inline: auto;
}

.brain-spider-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brain-card-gap);
  margin-bottom: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}

.brain-spider-stock-wrap {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 12px);
}

.brain-spider-stock-pile {
  position: relative;
  width: var(--brain-card-w);
  height: var(--brain-card-h);
  border: 1px solid rgba(15, 23, 42, 0.5);
  border-radius: clamp(4px, 1vw, 8px);
  background: repeating-linear-gradient(45deg, #1d4ed8, #1d4ed8 4px, #1e40af 4px, #1e40af 8px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.brain-spider-stock-pile:hover:not(.is-empty) {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.35);
}

.brain-spider-stock-pile.is-empty {
  background: color-mix(in srgb, var(--glass-bg) 40%, transparent);
  border: 1px dashed color-mix(in srgb, var(--glass-border) 70%, transparent);
  box-shadow: none;
  cursor: default;
}

.brain-spider-stock-badge {
  font-size: clamp(0.72rem, 2vw, 0.88rem);
  font-weight: 600;
  opacity: 0.85;
}

.brain-spider-foundations {
  display: flex;
  gap: clamp(2px, 0.5vw, 6px);
}

.brain-spider-foundation-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: var(--brain-card-w);
  height: var(--brain-card-h);
  padding: clamp(2px, 0.8vw, 5px);
  border: 1px dashed color-mix(in srgb, var(--glass-border) 70%, transparent);
  border-radius: clamp(4px, 1vw, 8px);
  background: color-mix(in srgb, var(--glass-bg) 40%, transparent);
  font-size: clamp(0.6rem, 2.2vw, 0.95rem);
  font-weight: 800;
  line-height: 1;
}

.brain-spider-foundation-slot.has-suit {
  border: 1px solid rgba(15, 23, 42, 0.35);
  background: #f8fafc;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.28);
}

.brain-spider-tableau {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--brain-card-gap);
  width: 100%;
}

.brain-spider-column {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--brain-card-h) * 2.2);
  border-radius: clamp(4px, 1vw, 8px);
  transition: background-color 0.15s ease;
}

.brain-spider-column > .brain-card + .brain-card {
  margin-top: calc(var(--brain-card-h) * -0.73);
}

.brain-spider-column > .brain-card.is-down + .brain-card {
  margin-top: calc(var(--brain-card-h) * -0.80);
}

.brain-card.is-hint {
  outline: 3px solid #eab308 !important;
  outline-offset: 1px;
  transform: translateY(-2px);
}

/* ── เกมไพ่ฟรีเซลล์ (FreeCell Solitaire) ─────────────────────────────────────── */
.brain-freecell {
  --brain-card-w: clamp(32px, 9.8vw, 72px);
  --brain-card-h: calc(var(--brain-card-w) * 1.42);
  --brain-card-gap: clamp(3px, 1vw, 9px);
  width: 100%;
  margin-inline: auto;
}

.brain-freecell-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 2vw, 24px);
  margin-bottom: clamp(10px, 2vw, 18px);
}

.brain-freecell-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brain-freecell-label {
  font-size: clamp(0.68rem, 1.8vw, 0.8rem);
  font-weight: 700;
  color: var(--bs-info);
  opacity: 0.9;
}

.brain-freecell-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--brain-card-gap);
}

.brain-freecell-tableau {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--brain-card-gap);
  width: 100%;
}

.brain-freecell-col {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--brain-card-h) * 2.5);
  border-radius: clamp(4px, 1vw, 8px);
  transition: background-color 0.15s ease;
}

.brain-freecell-col > .brain-card + .brain-card {
  margin-top: calc(var(--brain-card-h) * -0.72);
}

/* ── เกมไพ่ปิรามิด (Pyramid Solitaire) ─────────────────────────────────────── */
.brain-pyramid {
  --brain-card-w: clamp(34px, 10.5vw, 68px);
  --brain-card-h: calc(var(--brain-card-w) * 1.42);
  --brain-card-gap: clamp(4px, 1.2vw, 10px);
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}

.brain-pyramid-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(14px, 2.5vw, 24px);
  padding: 4px;
}

.brain-pyramid-row {
  display: flex;
  justify-content: center;
  gap: var(--brain-card-gap);
  width: 100%;
}

.brain-pyramid-row + .brain-pyramid-row {
  margin-top: calc(var(--brain-card-h) * -0.54);
}

.brain-pyramid-card {
  position: relative;
  width: var(--brain-card-w);
  height: var(--brain-card-h);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, filter 0.2s ease;
}

.brain-pyramid-card.is-covered {
  opacity: 0.72;
  filter: brightness(0.8);
  pointer-events: none;
}

.brain-pyramid-card.is-uncovered {
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.brain-pyramid-card.is-uncovered:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.brain-pyramid-card.is-selected {
  outline: 3px solid #38bdf8 !important;
  outline-offset: 1px;
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.5);
  z-index: 30;
}

.brain-pyramid-card.is-hint {
  outline: 3px solid #eab308 !important;
  outline-offset: 1px;
  transform: translateY(-4px);
  animation: brain-pyramid-pulse 0.6s ease-in-out infinite alternate;
  z-index: 25;
}

.brain-pyramid-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 16px);
  max-width: 440px;
  margin-inline: auto;
}

.brain-pyramid-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.brain-pyramid-label {
  font-size: clamp(0.68rem, 1.8vw, 0.78rem);
  font-weight: 700;
  color: var(--bs-info);
  opacity: 0.9;
  text-align: center;
}

.brain-pyramid-slot {
  position: relative;
  width: var(--brain-card-w);
  height: var(--brain-card-h);
  border: 1px dashed color-mix(in srgb, var(--glass-border) 70%, transparent);
  border-radius: clamp(4px, 1vw, 8px);
  background: color-mix(in srgb, var(--glass-bg) 35%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.brain-pyramid-slot.is-stock {
  border-style: solid;
  background: repeating-linear-gradient(45deg, #1e40af, #1e40af 4px, #1d4ed8 4px, #1d4ed8 8px);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.brain-pyramid-slot.is-stock.is-empty {
  background: color-mix(in srgb, var(--glass-bg) 35%, transparent);
  border-style: dashed;
}

.brain-pyramid-slot.is-stock:hover:not(.is-empty) {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.4);
}

.brain-pyramid-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.brain-pyramid-slot.is-discard {
  color: var(--bs-secondary);
  font-size: 1.4rem;
  opacity: 0.5;
}

.brain-pyramid-victory {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: color-mix(in srgb, var(--glass-bg) 85%, transparent);
  border: 2px solid var(--bs-primary);
  border-radius: clamp(10px, 2vw, 18px);
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  animation: brain-pyramid-appear 0.4s ease-out;
  margin-block: 20px;
  width: min(100%, 420px);
}

.brain-pyramid-victory-trophy {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  color: #facc15;
  margin-bottom: 8px;
  animation: brain-snake-food-pulse 0.8s ease-in-out infinite alternate;
}

.brain-pyramid-victory-stats {
  display: flex;
  gap: clamp(12px, 3vw, 24px);
  margin-top: 12px;
}

.brain-pyramid-victory-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brain-pyramid-victory-stats span {
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.brain-pyramid-victory-stats strong {
  font-size: 1.15rem;
  color: var(--bs-info);
}

@keyframes brain-pyramid-appear {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes brain-pyramid-pulse {
  from { box-shadow: 0 0 4px rgba(234, 179, 8, 0.4); }
  to   { box-shadow: 0 0 18px rgba(234, 179, 8, 0.9); }
}

/* ── เกมคิดเลขเร็ว 24 (Math 24 Challenge) ──────────────────────────────────── */
.brain-math24 {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vw, 22px);
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}

.brain-math24-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 16px);
  width: 100%;
}

.brain-math24-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: clamp(12px, 3vw, 24px);
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.25);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease, filter 0.2s ease;
}

.brain-math24-bubble:hover:not(.is-used) {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 10px 24px rgba(2, 132, 199, 0.5);
  border-color: #38bdf8;
}

.brain-math24-bubble.is-used {
  opacity: 0.3;
  filter: grayscale(0.6);
  pointer-events: none;
  transform: scale(0.92);
  box-shadow: none;
}

.brain-math24-screen {
  background: color-mix(in srgb, var(--glass-bg) 80%, #0f172a);
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  border-radius: clamp(8px, 2vw, 16px);
  padding: clamp(12px, 2.5vw, 18px);
  min-height: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

.brain-math24-equation {
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #f8fafc;
  word-break: break-all;
  min-height: 1.5em;
}

.brain-math24-placeholder {
  color: #64748b;
  font-weight: 500;
  font-size: clamp(0.85rem, 2.2vw, 1rem);
}

.brain-math24-eval {
  display: flex;
  justify-content: flex-end;
}

.brain-math24-keypad {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brain-math24-ops {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(4px, 1.2vw, 10px);
}

.brain-math24-op-btn {
  font-size: clamp(1.2rem, 3.2vw, 1.55rem);
  font-weight: 900;
  padding-block: clamp(10px, 2.2vw, 16px);
  border-radius: clamp(8px, 2vw, 14px);
  background: color-mix(in srgb, var(--glass-bg) 85%, #0f172a);
  border: 1.5px solid color-mix(in srgb, var(--bs-primary) 50%, #38bdf8);
  color: #38bdf8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.brain-math24-op-btn:hover {
  transform: translateY(-2px);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}

.brain-math24-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.brain-math24-hint-box {
  animation: brain-pyramid-appear 0.3s ease-out;
}

/* ── เกมแตะบินหลบเสา (Tap Fly) ─────────────────────────────────────────────── */
.brain-tapfly-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
}

.brain-tapfly-viewport {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 400 / 560;
  max-height: 70vh;
  border-radius: clamp(8px, 2vw, 16px);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid color-mix(in srgb, var(--glass-border) 80%, transparent);
  background: #0f172a;
}

#tapFlyCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
  cursor: pointer;
  outline: none;
}

.brain-tapfly-touch-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #f8fafc;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: clamp(0.72rem, 2vw, 0.84rem);
  font-weight: 600;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.brain-tapfly-viewport.is-playing .brain-tapfly-touch-hint {
  opacity: 0;
}

/* ── เกมบล็อกหล่น ──────────────────────────────────────────────────────────── */
.brain-tetris-stage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
  flex-wrap: wrap;
}

.brain-tetris-board {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  width: min(100%, 290px);
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-color) 45%, transparent);
}

.brain-tetris-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 118px;
}

.brain-tetris-panel {
  padding: 10px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  text-align: center;
}

.brain-tetris-panel span {
  display: block;
  margin-bottom: 4px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.brain-tetris-panel strong {
  color: var(--text-light);
  font-size: 1.12rem;
}

.brain-tetris-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 76px;
  margin-inline: auto;
}

.brain-tetris-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: color-mix(in srgb, var(--glass-border) 28%, transparent);
}

/* สีบล็อกทั้ง 7 แบบ — คงที่ไม่ผูกกับธีม ด้วยเหตุผลเดียวกับสีเลขในเกมกู้ระเบิด
   ผู้เล่นจำรูปทรงจากสีได้ทันที (ฟ้ายาว เหลืองสี่เหลี่ยม ม่วงตัวที) ถ้าสีเปลี่ยนจะอ่านกระดานช้าลง */
.brain-tetris-cell.is-filled { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.35); }
.brain-tetris-piece-0 { background: #22d3ee; }
.brain-tetris-piece-1 { background: #facc15; }
.brain-tetris-piece-2 { background: #a855f7; }
.brain-tetris-piece-3 { background: #22c55e; }
.brain-tetris-piece-4 { background: #ef4444; }
.brain-tetris-piece-5 { background: #3b82f6; }
.brain-tetris-piece-6 { background: #f97316; }

.brain-tetris-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 420px);
  margin: 18px auto 0;
}

.brain-game-message {
  min-height: 26px;
  margin: 18px 0 0;
  color: var(--bs-secondary-color);
  text-align: center;
}

@keyframes brain-game-shake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

@media (max-width: 575.98px) {
  .brain-game-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .brain-game-heading .btn,
  .brain-game-actions {
    align-self: flex-start;
  }

  .brain-game-stats > div {
    padding-inline: 7px;
  }

  .brain-game-stats span {
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brain-memory-card,
  .brain-number-card,
  .brain-link-tile,
  .brain-tone-pad,
  .brain-stroop-choice,
  .brain-slide-tile,
  .brain-mine-cell,
  .brain-nonogram-cell,
  .brain-card {
    transition: none;
  }

  .brain-number-card.is-wrong,
  .brain-link-tile.is-wrong,
  .brain-mine-cell.is-boom {
    animation: none;
  }

  .brain-2048-tile.is-new,
  .brain-2048-tile.is-merged {
    animation: none;
  }

  .brain-sudoku-cell {
    transition: none;
  }

  .brain-sudoku-cell.is-conflict,
  .brain-sudoku-cell.is-wrong {
    animation: none;
  }

  .brain-maze-board.is-bump,
  .brain-maze-board.is-solved .brain-maze-marker {
    animation: none;
  }

  .brain-snake-cell,
  .brain-snake-cell.is-food .brain-snake-marker,
  .brain-snake-board.is-won .brain-snake-cell.is-snake {
    transition: none;
    animation: none;
  }

  .brain-lights-out-cell,
  .brain-lights-out-board.is-solved .brain-lights-out-cell {
    transition: none;
    animation: none;
  }

  .brain-hanoi-tower,
  .brain-hanoi-disk,
  .brain-hanoi-tower.is-invalid,
  .brain-hanoi-board.is-solved .brain-hanoi-tower.is-goal .brain-hanoi-disk {
    transition: none;
    animation: none;
  }

  .brain-pipe-cell,
  .brain-pipe-arm,
  .brain-pipe-center,
  .brain-pipe-board.is-solved .brain-pipe-cell {
    transition: none;
    animation: none;
  }

  .brain-code-color-button {
    transition: none;
  }

  .brain-water-tube,
  .brain-water-layer,
  .brain-water-tube.is-complete .brain-water-vessel {
    transition: none;
    animation: none;
  }
}

/* ── ปุ่มพับ/กางกลุ่มเนื้อหา (เช่น "ตัวเลือกขั้นสูง" หน้าสร้างเพลง) ─────────────────
   ไม่แตะสีใดๆ เลย — ใช้คู่กับปุ่มคลาสมาตรฐาน (btn-outline-*) จึงปลอดภัยกับทุกธีม
   หมุนลูกศรตาม aria-expanded ที่ Bootstrap collapse ตั้งให้เอง */
.collapse-toggle-icon {
  transition: transform 0.2s ease;
}

[aria-expanded="true"] > .collapse-toggle-icon {
  transform: rotate(180deg);
}

/* กล่องชิปตัวเลือกที่มีตัวเลือกเยอะมาก (เช่น แนวเพลง/เครื่องดนตรี) — จำกัดความสูงแล้วเลื่อนดู
   ไม่งั้นกลุ่มเดียวกินหน้าจอทั้งหน้าจนหากลุ่มถัดไปไม่เจอ */
.option-chip-scroll {
  max-height: 11rem;
  overflow-y: auto;
  padding-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .collapse-toggle-icon {
    transition: none;
  }
}

/* ── คอลัมน์ผลลัพธ์/ประวัติที่วางข้างฟอร์มยาว (เช่น หน้าสร้างเพลง) ───────────────
   ลอยติดจอขณะเลื่อนฟอร์ม — ไม่งั้นฟอร์มที่ยาวหลายพัน px จะทิ้งช่องว่างฝั่งนี้ไว้ทั้งแถบ
   และผลลัพธ์จะอยู่ไกลจากจุดที่ผู้ใช้เลื่อนอยู่ตอนกดสร้าง
   ⚠️ เปิดเฉพาะ xl ขึ้นไป — จอเล็กกว่านั้นคอลัมน์นี้ตกลงมาอยู่ใต้ฟอร์มอยู่แล้ว sticky จะกลายเป็นตัวกวน */
@media (min-width: 1200px) {
  .form-result-aside {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

/* ── ไฮไลต์กลุ่มตัวเลือกที่ AI เพิ่งเปลี่ยนให้ (หน้าสร้างเพลง) ──────────────────
   ใช้ตัวแปรสีของ Bootstrap (--bs-warning-rgb) จึงเปลี่ยนตามธีมเอง ไม่ได้ฝังสีตายตัว
   ต้องมีสัญญาณทางสายตา ไม่งั้นผู้ใช้ไม่รู้ว่า AI ไปแก้อะไรไว้ในกล่องขั้นสูงที่พับอยู่ */
.option-group-updated {
  border-radius: 10px;
  animation: option-group-flash 1.8s ease-out;
}

@keyframes option-group-flash {
  0%   { box-shadow: 0 0 0 2px rgba(var(--bs-warning-rgb), 0.6); }
  70%  { box-shadow: 0 0 0 2px rgba(var(--bs-warning-rgb), 0.35); }
  100% { box-shadow: 0 0 0 2px rgba(var(--bs-warning-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .option-group-updated {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   บ้านเสมือนของฉัน — เกมเล่นกับเพื่อน (โอเทลโล)
   ใช้ตัวแปรธีมกลางทั้งหมด รองรับ Blue / Dark / Light / Warm / Pink
   สีกระดานผสมจาก --bs-success แทนการฮาร์ดโค้ดเขียว เพื่อให้เข้ากับทุกธีม
   ═══════════════════════════════════════════════════════════════════════════ */
.versus-lobby-panel {
  padding: clamp(16px, 2.5vw, 22px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

/* แผงเล่นกับบอท — เน้นกว่าอีกสองแผง เพราะเป็นทางเดียวที่เริ่มเล่นได้ทันทีโดยไม่ต้องรอเพื่อน */
.versus-lobby-panel-primary {
  border-color: color-mix(in srgb, var(--bs-info) 45%, transparent);
  background: color-mix(in srgb, var(--bs-info) 10%, var(--glass-bg));
}

.versus-lobby-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.versus-lobby-divider::before,
.versus-lobby-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}

.versus-lobby-title {
  margin-bottom: 6px;
  color: var(--text-light);
  font-size: 1.05rem;
}

.versus-lobby-hint {
  margin-bottom: 16px;
  color: var(--bs-secondary-color);
  font-size: 0.88rem;
}

/* รหัสห้องอ่านออกเสียงให้เพื่อนฟัง — ต้องตัวโตและห่างพอให้ไม่สับสน */
.versus-code-input {
  font-family: var(--bs-font-monospace, monospace);
  font-size: 1.3rem;
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
}

.versus-rules {
  padding: 16px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
}

.versus-rules-title {
  margin-bottom: 10px;
  color: var(--text-light);
  font-size: 0.97rem;
}

.versus-rules-list {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--bs-secondary-color);
  font-size: 0.88rem;
}

.versus-rules-list li + li {
  margin-top: 6px;
}

.versus-room-code-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.versus-room-code {
  padding: 3px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bs-info) 14%, transparent);
  color: var(--text-light);
  font-family: var(--bs-font-monospace, monospace);
  font-size: 1.15rem;
  letter-spacing: 0.25em;
}

.versus-mode-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border: 1px solid color-mix(in srgb, var(--bs-info) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bs-info) 14%, transparent);
  color: var(--text-light);
  font-size: 0.85rem;
}

.versus-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.versus-player {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

/* ขอบเรืองบอกว่า "ตาของคนนี้" — ใช้แทนข้อความ จะได้เห็นได้จากหางตาระหว่างคิด */
.versus-player.is-active {
  border-color: color-mix(in srgb, var(--bs-info) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-info) 18%, transparent);
}

.versus-player.is-empty {
  justify-content: center;
  border-style: dashed;
  color: var(--bs-secondary-color);
  font-size: 0.85rem;
}

.versus-player-disc {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.versus-player-disc.is-black {
  border: 1px solid color-mix(in srgb, var(--text-light) 45%, transparent);
  background: #1b1f24;
}

.versus-player-disc.is-white {
  border: 1px solid color-mix(in srgb, var(--text-light) 30%, transparent);
  background: #f4f6f8;
}

.versus-player-name {
  overflow: hidden;
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.versus-player-role {
  margin-inline-start: auto;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  white-space: nowrap;
}

.versus-board {
  display: grid;
  /* จำนวนคอลัมน์มาจากทะเบียนเกม — versus-board.js ตั้ง --versus-cols ให้ตอนสร้างกระดาน */
  grid-template-columns: repeat(var(--versus-cols, 8), minmax(0, 1fr));
  /* ⚠️ ต้องประกาศแถวไว้ด้วย ทั้งที่ auto-placement สร้างแถวให้เองอยู่แล้วและขนาดออกมาเท่ากันเป๊ะ
     เหตุผล: ลำเรือของเกมเรือรบเป็น element ลอย (position: absolute) ที่ระบุตำแหน่งด้วย grid-row
     ซึ่งอ้างได้เฉพาะ "เส้นกริดที่ประกาศไว้" — เส้นแถวที่เกิดจากการไหลอัตโนมัติไม่นับ
     ถ้าไม่มีบรรทัดนี้ เบราว์เซอร์จะตีเส้นที่หาไม่เจอเป็นขอบกระดาน แล้วเรือจะยืดเต็มความสูงทุกลำ
     ใช้ auto เพื่อให้ขนาดแถวเหมือนเดิมทุกประการ (ความสูงมาจาก aspect-ratio ของช่อง) */
  grid-template-rows: repeat(var(--versus-rows, 8), auto);
  gap: 2px;
  width: min(100%, 520px);
  margin-inline: auto;
  padding: 8px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bs-success) 28%, var(--glass-bg));
}

.versus-cell {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--bs-success) 34%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bs-success) 16%, var(--glass-bg));
  cursor: default;
}

.versus-cell > span {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  transform: scale(0);
}

.versus-cell.is-black > span,
.versus-cell.is-white > span {
  transform: scale(1);
}

.versus-cell.is-black > span {
  background: radial-gradient(circle at 33% 28%, #454c55, #14181d 70%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 45%);
}

.versus-cell.is-white > span {
  background: radial-gradient(circle at 33% 28%, #ffffff, #cfd6dd 72%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 22%);
}

/* จุดเล็กกลางช่อง = ช่องที่ลงได้ตอนนี้ (เซิร์ฟเวอร์เป็นคนบอกว่าช่องไหน) */
.versus-cell.is-playable {
  border-color: color-mix(in srgb, var(--bs-info) 55%, transparent);
  background: color-mix(in srgb, var(--bs-info) 20%, var(--glass-bg));
  cursor: pointer;
}

.versus-cell.is-playable::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bs-info) 75%, transparent);
}

.versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 34%, var(--glass-bg));
}

/* กรอบบอกตาล่าสุดของอีกฝ่าย — ไม่งั้นกระดานเปลี่ยนแล้วหาไม่เจอว่าเขาลงตรงไหน */
.versus-cell.is-last {
  border-color: color-mix(in srgb, var(--bs-warning) 75%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-warning) 45%, transparent);
}

.versus-cell:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 55%, transparent);
  outline-offset: 2px;
}

.versus-connection {
  margin-top: 12px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--bs-warning) 45%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bs-warning) 12%, transparent);
  color: var(--bs-secondary-color);
  font-size: 0.83rem;
  text-align: center;
}

@media (max-width: 575.98px) {
  .versus-players {
    grid-template-columns: minmax(0, 1fr);
  }

  .versus-board {
    padding: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .versus-cell > span {
    transition: none;
  }
}

/* ── เรียงสี่ (Connect Four) — ใช้โครงกระดานเดียวกับโอเทลโล เปลี่ยนแค่สีกับรูปทรง ─────
   หมาก 'b'/'w' เป็นโทเคนภายในที่ใช้ร่วมกันทุกเกม (ดู _versus_catalog.js)
   เกมนี้จึงแค่ทับสีให้เป็นแดง/เหลือง ไม่ต้องแตะโค้ดฝั่ง JS เลย */
.versus-board-c4 {
  width: min(100%, 460px);
  background: color-mix(in srgb, var(--bs-primary) 30%, var(--glass-bg));
}

.versus-board-c4 .versus-cell {
  border-color: color-mix(in srgb, var(--bs-primary) 36%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--glass-bg) 92%, transparent);
}

.versus-board-c4 .versus-cell.is-black > span {
  background: radial-gradient(circle at 33% 28%, #ff6b6b, #c92a2a 72%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 32%);
}

.versus-board-c4 .versus-cell.is-white > span {
  background: radial-gradient(circle at 33% 28%, #ffe066, #f0a500 74%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 28%);
}

.versus-board-c4 .versus-cell.is-playable {
  border-color: color-mix(in srgb, var(--bs-info) 60%, transparent);
  background: color-mix(in srgb, var(--bs-info) 22%, var(--glass-bg));
}

.versus-board-c4 .versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 36%, var(--glass-bg));
}

/* หมากคู่เล่นในแผงผู้เล่นต้องเป็นสีเดียวกับบนกระดาน ไม่งั้นสับสนว่าตัวเองเป็นสีอะไร */
.versus-game-c4 .versus-player-disc.is-black { background: #c92a2a; }
.versus-game-c4 .versus-player-disc.is-white { background: #f0a500; }

/* เส้น 4 ตัวที่ชนะ — เรืองให้เห็นชัดว่าชนะด้วยแนวไหน (โอเทลโลไม่ใช้คลาสนี้) */
.versus-cell.is-winning {
  border-color: color-mix(in srgb, var(--bs-success) 85%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-success) 45%, transparent);
}

@keyframes versus-drop {
  from { transform: translateY(-260%) scale(1); }
  to   { transform: translateY(0) scale(1); }
}

/* หมากเรียงสี่ต้อง "ตกลงมา" ไม่ใช่โผล่กลางกระดาน ไม่งั้นดูไม่ออกว่าลงคอลัมน์ไหน */
.versus-board-c4 .versus-cell.is-last > span {
  animation: versus-drop 260ms cubic-bezier(0.45, 0, 0.55, 1.15);
}

@media (prefers-reduced-motion: reduce) {
  .versus-board-c4 .versus-cell.is-last > span { animation: none; }
}

/* ── หมากฮอสไทย — กระดานสลับสี + เบี้ย/ฮอส ─────────────────────────────────
   เกมแรกของหมวดที่ "ยกหมากจากช่องหนึ่งไปอีกช่อง" จึงมีสถานะ is-selected เพิ่มมา
   ตัวหมากยังใช้ is-black/is-white ร่วมกับเกมอื่น เพิ่มแค่ is-king สำหรับฮอส */
.versus-board-checkers {
  width: min(100%, 520px);
  gap: 0;
  background: color-mix(in srgb, var(--bs-warning) 18%, var(--glass-bg));
}

.versus-board-checkers .versus-cell {
  border: 0;
  border-radius: 0;
}

/* ช่องสีอ่อนไม่ได้ใช้เล่นเลยตลอดเกม — ทำให้จางลงเพื่อให้สายตาโฟกัสช่องเข้ม */
.versus-board-checkers .versus-cell.is-light-square {
  background: color-mix(in srgb, var(--bs-warning) 12%, var(--glass-bg));
}

.versus-board-checkers .versus-cell.is-dark-square {
  background: color-mix(in srgb, var(--bs-warning) 42%, var(--glass-bg));
}

.versus-board-checkers .versus-cell.is-black > span {
  background: radial-gradient(circle at 33% 28%, #4a5058, #16191d 72%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 45%);
}

.versus-board-checkers .versus-cell.is-white > span {
  background: radial-gradient(circle at 33% 28%, #fdfdfd, #c8ced5 74%);
  box-shadow: inset 0 -2px 3px rgb(0 0 0 / 25%);
}

/* ฮอสมีวงแหวนทองซ้อน — ต้องดูออกจากระยะสายตาปกติว่าตัวไหนเป็นฮอส */
.versus-cell.is-king > span {
  box-shadow: inset 0 0 0 3px #ffd43b, inset 0 -2px 3px rgb(0 0 0 / 35%);
}

.versus-cell.is-king::before {
  content: '';
  position: absolute;
  inset: 34%;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, #ffd43b 85%, transparent);
  pointer-events: none;
}

/* หมากที่เลือกไว้รอเลือกปลายทาง */
.versus-cell.is-selected {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bs-info) 85%, transparent);
}

.versus-board-checkers .versus-cell.is-playable {
  background: color-mix(in srgb, var(--bs-info) 42%, var(--glass-bg));
}

.versus-board-checkers .versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 58%, var(--glass-bg));
}

.versus-game-checkers .versus-player-disc.is-black { background: #16191d; }
.versus-game-checkers .versus-player-disc.is-white { background: #e9ecef; }

/* ── เรือรบ — กระดานคู่ (น่านน้ำคู่แข่ง + กองเรือเรา) ────────────────────────
   เกมแรกของหมวดที่มีสองกระดาน เพราะเป็นเกมข้อมูลปกปิด
   ⚠️ ช่องเรือ (is-ship) มีเฉพาะกระดานของเราเอง — ฝั่งคู่แข่งเซิร์ฟเวอร์ mask ออกไปแล้ว */
.versus-dual {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  justify-items: center;
}

@media (min-width: 992px) {
  .versus-dual { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.versus-dual-side {
  width: 100%;
  max-width: 420px;
}

.versus-board-title {
  margin-bottom: 8px;
  color: var(--text-light);
  font-size: 0.92rem;
  text-align: center;
}

.versus-board-title span {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 400;
}

.versus-board-battleship {
  width: 100%;
  gap: 1px;
  background: color-mix(in srgb, var(--bs-info) 26%, var(--glass-bg));
}

.versus-board-battleship .versus-cell {
  border: 1px solid color-mix(in srgb, var(--bs-info) 22%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--bs-info) 10%, var(--glass-bg));
}

/* กระดานของเราเองกดไม่ได้ ต้องไม่มี cursor pointer หรือ hover ให้เข้าใจผิด */
.versus-board.is-own .versus-cell,
.versus-cell.is-readonly {
  cursor: default;
}

.versus-board-battleship .versus-cell.is-playable {
  background: color-mix(in srgb, var(--bs-info) 24%, var(--glass-bg));
  cursor: pointer;
}

.versus-board-battleship .versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 44%, var(--glass-bg));
}

/* เรือของเรา — ทึบเต็มช่อง ให้เห็นรูปทรงกองเรือชัด */
.versus-cell.is-ship > span {
  inset: 8%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-light) 48%, transparent);
  transform: scale(1);
}

/* ยิงโดน — แดงเต็มช่อง เห็นได้จากหางตา */
.versus-cell.is-hit > span {
  inset: 8%;
  border-radius: 3px;
  background: radial-gradient(circle at 40% 35%, #ff8787, #c92a2a 75%);
  transform: scale(1);
}

/* ยิงพลาด — จุดเล็กสีจาง ไม่ให้แย่งสายตาไปจากรอยโดน */
.versus-cell.is-miss > span {
  inset: 34%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bs-secondary-color) 60%, transparent);
  transform: scale(1);
}

/* ── กองเรือของเราวาดเป็น "ลำจริง" คร่อมหลายช่อง ────────────────────────────
   ภาพเรือ: public/images/games/battleship/ (CC0 — ดูที่มาใน scripts/assets/sea-warfare/LICENSE.txt)

   ทำไมใช้ element ลอยทับ ไม่ใช่ background ของแต่ละช่อง:
   ถ้าหั่นภาพเรือใส่ทีละช่อง ลำเรือจะขาดตรงร่อง gap ของกริดทุกช่อง และเลื่อนสะสมทีละ 1px
   จนหัวเรือกับท้ายเรือไม่ตรงกัน · การวางเป็น grid item ที่ span N ช่องได้พื้นที่รวม "ร่องด้วย"
   ลำเรือจึงต่อเนื่องจริง — versus-board.js เป็นคนคำนวณว่าเรือลำไหนอยู่แถว/คอลัมน์ไหน ยาวกี่ช่อง

   ⚠️ ต้อง position: absolute — grid item ปกติจะไปแย่งช่องกับ .versus-cell 100 ช่องที่วางอัตโนมัติ
      ทำให้ช่องท้าย ๆ ถูกดันตกแถว · abspos ยังรับ grid-row/grid-column ได้ตามปกติ
      แต่ไม่นับเป็นสมาชิกของกริดจึงไม่ดันใคร (inset: 0 = เต็มพื้นที่เรือพอดี) */
.versus-board-battleship.has-ship-art {
  position: relative;
}

.versus-ship {
  position: absolute;
  inset: 0;
  z-index: 1;
  grid-row: var(--ship-row) / span var(--ship-row-span);
  grid-column: var(--ship-col) / span var(--ship-col-span);
  background-image: var(--ship-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated; /* ต้นฉบับเป็นพิกเซลอาร์ต ปล่อยให้เบราว์เซอร์เกลี่ยจะเบลอ */
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%));
}

/* มีลำเรือจริงแล้ว ก็ไม่ต้องมีบล็อกเทาทึบของเดิมซ้อนอยู่ข้างใต้ */
.versus-board-battleship.has-ship-art .versus-cell.is-ship > span {
  background: none;
}

/* ⚠️ ช่องที่โดนยิงต้องลอย "เหนือ" ลำเรือ ไม่งั้นรอยแดงจมอยู่ใต้ภาพเรือจนมองไม่เห็นว่าโดนตรงไหน
      และต้องล้างพื้นหลังช่องออก ไม่งั้นได้สี่เหลี่ยมสีน้ำล้อมรอยแดงบังลำเรือเป็นรู */
.versus-board-battleship.has-ship-art .versus-cell.is-hit {
  z-index: 2;
  background: transparent;
  border-color: transparent;
}

/* รอยโดนบนกระดานเรา — ย่อลงเป็นจุดกลม ให้ยังเห็นว่าลำเรือทอดยาวผ่านช่องนี้อยู่
   (ฝั่งน่านน้ำคู่แข่งไม่มีลำเรือให้บัง จึงยังใช้สี่เหลี่ยมแดงเต็มช่องแบบเดิม) */
.versus-board-battleship.has-ship-art .versus-cell.is-hit > span {
  inset: 22%;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(0 0 0 / 40%);
}

.versus-game-battleship .versus-player-disc.is-black { background: #339af0; }
.versus-game-battleship .versus-player-disc.is-white { background: #ff922b; }

/* กระดานเรือรบมี 100 ช่อง — ถ้าขึ้นจุดไฮไลต์ทุกช่องที่ยิงได้ จะรกจนกลบรอยยิงจริง
   ตรงนี้ใช้ hover + cursor บอกว่ากดได้ก็พอ แล้วปล่อยให้สีแดง (โดน) กับจุดเทา (พลาด) เด่นแทน */
.versus-board-battleship .versus-cell.is-playable::after {
  content: none;
}

/* ── เรียงห้า (Gomoku) — กระดานเส้นตาราง หมากวางบนช่อง ────────────────────────
   13×13 = 169 ช่อง จึงต้องเล็กกว่ากระดานเกมอื่น แต่ยังกดถูกช่องบนมือถือ
   ใช้พื้นไม้อ่อนแบบกระดานหมากล้อม แล้ววาดเส้นด้วย border ของแต่ละช่อง */
.versus-board-gomoku {
  width: min(100%, 480px);
  gap: 0;
  padding: 6px;
  background: color-mix(in srgb, var(--bs-warning) 22%, var(--glass-bg));
}

.versus-board-gomoku .versus-cell {
  border: 1px solid color-mix(in srgb, var(--bs-warning) 55%, transparent);
  border-radius: 0;
  background: transparent;
}

.versus-board-gomoku .versus-cell.is-black > span,
.versus-board-gomoku .versus-cell.is-white > span {
  inset: 9%;
}

.versus-board-gomoku .versus-cell.is-black > span {
  background: radial-gradient(circle at 33% 28%, #4a5058, #14181d 72%);
  box-shadow: inset 0 -1px 2px rgb(0 0 0 / 45%);
}

.versus-board-gomoku .versus-cell.is-white > span {
  background: radial-gradient(circle at 33% 28%, #ffffff, #ccd2d9 74%);
  box-shadow: inset 0 -1px 2px rgb(0 0 0 / 22%);
}

/* 169 ช่องถ้าขึ้นจุดไฮไลต์ทุกช่องจะรกมาก — ใช้ hover บอกว่ากดได้พอ (เหมือนกระดานเรือรบ) */
.versus-board-gomoku .versus-cell.is-playable::after {
  content: none;
}

.versus-board-gomoku .versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 32%, transparent);
}

.versus-game-gomoku .versus-player-disc.is-black { background: #14181d; }
.versus-game-gomoku .versus-player-disc.is-white { background: #e9ecef; }

/* ── หมากรุกไทย — กระดานเส้นตาราง + สัญลักษณ์ตัวหมาก ─────────────────────────
   ⚠️ เกมนี้ใช้คลาสชุด is-mk-* ของตัวเอง ไม่ปนกับ is-black/is-white ของเกมอื่น
      เพราะวาดเป็นสัญลักษณ์ตัวหมาก ไม่ใช่วงกลมสีแบบโอเทลโล/หมากฮอส
   ⚠️ ใช้อักขระหมากรุกยูนิโคด เพราะตัวหมากไทยไม่มีอักขระเฉพาะของตัวเอง
      แยกฝ่ายด้วยสีตัวอักษร ไม่ใช่แยกด้วยตัวอักขระทึบ/โปร่ง (โปร่งอ่านยากบนพื้นเข้ม) */
.versus-board-makruk {
  width: min(100%, 480px);
  gap: 0;
  padding: 6px;
  background: color-mix(in srgb, var(--bs-warning) 20%, var(--glass-bg));
}

.versus-board-makruk .versus-cell {
  border: 1px solid color-mix(in srgb, var(--bs-warning) 50%, transparent);
  border-radius: 0;
  background: transparent;
}

/* ตัวหมากวาดด้วยอักขระบน span — ไม่ใช้พื้นหลังวงกลมแบบเกมอื่น */
.versus-cell.is-mk > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  font-size: clamp(1rem, 4.2vw, 1.7rem);
  line-height: 1;
  transform: none;
}

.versus-cell.is-mk-white > span { color: #f8f9fa; text-shadow: 0 0 2px #000, 0 1px 2px rgb(0 0 0 / 60%); }
.versus-cell.is-mk-black > span { color: #16191d; text-shadow: 0 0 2px #fff, 0 1px 2px rgb(255 255 255 / 45%); }

.versus-cell.is-mk-k > span::after { content: '♚'; }
.versus-cell.is-mk-m > span::after { content: '♛'; }
.versus-cell.is-mk-f > span::after { content: '♕'; } /* เบี้ยหงาย — โปร่งเพื่อแยกจากเม็ดตัวจริง */
.versus-cell.is-mk-s > span::after { content: '♝'; }
.versus-cell.is-mk-n > span::after { content: '♞'; }
.versus-cell.is-mk-r > span::after { content: '♜'; }
.versus-cell.is-mk-p > span::after { content: '♟'; }

/* ⚠️ เคยปิดจุดไฮไลต์ของกระดานนี้ไว้ โดยลอกเหตุผลมาจากเรียงห้า/เรือรบ ที่มีช่องลงได้เป็นร้อยช่อง
   แต่หมากรุกพอเลือกตัวแล้วเหลือปลายทางแค่ 2-8 ช่อง — จุดไฮไลต์คือสิ่งที่ต้องมีที่สุด
   ไม่งั้นผู้เล่นต้องเอาเมาส์ไล่จิ้มทีละช่องเพื่อหาว่าตัวนี้เดินไปไหนได้ */
.versus-board-makruk .versus-cell.is-playable {
  background: color-mix(in srgb, var(--bs-info) 16%, transparent);
}

.versus-board-makruk .versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 36%, transparent);
}

/* ── ไกด์บอกปลายทาง (เกมยกหมาก) ─────────────────────────────────────────────
   จุดทึบ = เดินไปช่องว่าง · วงแหวนรอบตัวหมาก = เดินไปกินตัวนั้น
   แยกสองแบบตามธรรมเนียม UI หมากรุก เพราะ "ว่าง" กับ "กินได้" คนละการตัดสินใจกันคนละเรื่อง */
.versus-cell.is-capture::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--bs-danger) 80%, transparent);
  background: none;
  pointer-events: none;
}

/* ช่องกินต้องเห็นตัวหมากที่จะโดนกินด้วย จึงไม่ทับพื้นหลังทึบ */
.versus-board-makruk .versus-cell.is-capture,
.versus-board-checkers .versus-cell.is-capture {
  background: color-mix(in srgb, var(--bs-danger) 18%, transparent);
}

.versus-game-makruk .versus-player-disc.is-black { background: #16191d; }
.versus-game-makruk .versus-player-disc.is-white { background: #f1f3f5; }

/* ตัวที่ยกได้แต่ยังไม่ได้เลือก — บอกว่ากดสลับมาเลือกตัวนี้ได้ ระหว่างที่เลือกตัวอื่นอยู่
   (ก่อนหน้านี้ช่องพวกนี้ถูก disabled จนกดยกเลิก/สลับตัวไม่ได้เลย) */
.versus-cell.is-selected {
  cursor: pointer;
}

.versus-cell.is-mk:not(:disabled),
.versus-board-checkers .versus-cell:not(:disabled) {
  cursor: pointer;
}

/* ── หมากรุกสากล — กระดานสลับสี + สัญลักษณ์ตัวหมาก ──────────────────────────
   ใช้คลาสชุด is-ch-* แยกจาก is-mk-* ของหมากรุกไทย เพราะคนละชุดตัวหมาก (มีควีน ไม่มีเม็ด/โคน) */
.versus-board-chess {
  width: min(100%, 480px);
  gap: 0;
  padding: 6px;
  background: color-mix(in srgb, var(--bs-secondary-color) 22%, var(--glass-bg));
}

.versus-board-chess .versus-cell {
  border: 0;
  border-radius: 0;
}

.versus-board-chess .versus-cell.is-light-square {
  background: color-mix(in srgb, var(--bs-warning) 14%, #f3ede2);
}

.versus-board-chess .versus-cell.is-dark-square {
  background: color-mix(in srgb, var(--bs-warning) 40%, #9d7f5f);
}

.versus-cell.is-ch > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  font-size: clamp(1.1rem, 4.6vw, 1.9rem);
  line-height: 1;
  transform: none;
}

/* แยกฝ่ายด้วยสีตัวอักษร + เงา ไม่ใช้อักขระโปร่ง (โปร่งอ่านยากบนช่องเข้ม) */
.versus-cell.is-ch-white > span { color: #fdfdfd; text-shadow: 0 0 2px #000, 0 1px 2px rgb(0 0 0 / 65%); }
.versus-cell.is-ch-black > span { color: #15181b; text-shadow: 0 0 2px #fff, 0 1px 2px rgb(255 255 255 / 40%); }

.versus-cell.is-ch-k > span::after { content: '♚'; }
.versus-cell.is-ch-q > span::after { content: '♛'; }
.versus-cell.is-ch-r > span::after { content: '♜'; }
.versus-cell.is-ch-b > span::after { content: '♝'; }
.versus-cell.is-ch-n > span::after { content: '♞'; }
.versus-cell.is-ch-p > span::after { content: '♟'; }

.versus-board-chess .versus-cell.is-playable {
  background: color-mix(in srgb, var(--bs-info) 40%, transparent);
}

.versus-board-chess .versus-cell.is-playable:hover {
  background: color-mix(in srgb, var(--bs-info) 58%, transparent);
}

.versus-board-chess .versus-cell.is-playable::after { content: none; }

.versus-game-chess .versus-player-disc.is-black { background: #15181b; }
.versus-game-chess .versus-player-disc.is-white { background: #fdfdfd; }

/* หน้าจอถามว่าจะหงายเบี้ยเป็นตัวอะไร */
.versus-promotion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--bs-info) 50%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bs-info) 12%, transparent);
}

.versus-promotion-label {
  color: var(--text-light);
  font-size: 0.88rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   บ้านเสมือนของฉัน — หมวดเกมเล่นยาว: เกมปลูกผัก (/virtual-home/long/farm)
   ใช้ตัวแปรธีมกลางทั้งหมด รองรับ Blue / Dark / Light / Warm / Pink
   สีของ "โตแล้ว/พร้อมเก็บ" ผสมจาก --bs-success · สีเน้นทั่วไปผสมจาก --bs-info
   ⚠️ ห้ามฮาร์ดโค้ดสีพื้น/สีตัวอักษรในบล็อกนี้ — หน้านี้ใช้คู่กับปุ่ม Bootstrap ที่เปลี่ยนตามธีมอยู่แล้ว
   ═══════════════════════════════════════════════════════════════════════════ */

/* แถบสถานะบนสุด — ค่าที่ต้องเห็นตลอดไม่ว่าจะอยู่แท็บไหน */
.farm-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

.farm-status-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.farm-status-label {
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
}

.farm-status-value {
  color: var(--text-light);
  font-size: 1.15rem;
  line-height: 1.2;
}

.farm-status-sub {
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
}

.farm-status-checkin { align-items: flex-start; }

.farm-xp-bar,
.farm-quest-bar,
.farm-plot-bar {
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-light) 14%, transparent);
}

.farm-xp-fill,
.farm-quest-fill,
.farm-plot-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--bs-info);
  transition: width 0.4s ease;
}

/* ข้อความตอบกลับจากเซิร์ฟเวอร์ — สีแดงเฉพาะตอนทำผิดกติกา */
.farm-message {
  min-height: 1.4em;
  margin-bottom: 10px;
  color: var(--bs-info);
  font-size: 0.88rem;
}

.farm-message.is-error { color: var(--bs-danger); }

/* กันกดซ้ำระหว่างรอเซิร์ฟเวอร์ — แค่มารยาทของ UI ไม่ใช่ระบบป้องกัน (ของจริงอยู่ที่ rev ฝั่งเซิร์ฟเวอร์) */
.farm-busy .farm-plots,
.farm-busy .farm-panel { opacity: 0.65; pointer-events: none; }

.farm-tabs {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

/* ⚠️ ต้องมี !important เพราะกฎกลางบรรทัด ~110 ตั้ง `.nav-link { color: rgba(255,255,255,0.7) !important }`
   ไว้ตั้งแต่ยุคที่เว็บมีแต่ธีมมืด — ธีมสว่างจะได้ตัวหนังสือขาวบนพื้นขาว มองไม่เห็นทั้งแถบ
   (specificity ของที่นี่สูงกว่า จึงชนะเมื่อใส่ !important เท่ากัน) */
.farm-tabs .nav-link {
  border-radius: 999px;
  color: var(--bs-secondary-color) !important;
  font-size: 0.86rem;
}

.farm-tabs .nav-link:hover {
  background: color-mix(in srgb, var(--bs-info) 14%, transparent);
  color: var(--text-light) !important;
  text-shadow: none; /* กฎกลางใส่เงาฟ้าให้ .nav-link:hover ซึ่งบนพิลล์กลมๆ ดูเลอะ */
}

/* แท็บที่เลือกอยู่: พื้นทึบสีเน้น + ตัวหนังสือขาวคงที่ทุกธีม
   ⚠️ ห้ามใช้ var(--text-light) ตรงนี้ เพราะธีมสว่างมันคือสีกรมท่า = เข้มบนพื้นเข้ม อ่านไม่ออกอีกแบบ */
.farm-tabs .nav-link.active {
  background: var(--bs-info);
  color: #fff !important;
  text-shadow: none;
}

/* จุดแดงบนแท็บภารกิจ — บอกว่ามีรางวัลรออยู่โดยไม่ต้องเปิดเข้าไปดู */
.farm-tab-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--bs-danger);
  vertical-align: middle;
}

.farm-panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.farm-panel-hint {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
}

.farm-section-title {
  margin: 18px 0 10px;
  color: var(--text-light);
  font-size: 1rem;
}

/* ── แปลงปลูก ─────────────────────────────────────────────────────────────── */
.farm-plots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.farm-plot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bs-success) 8%, var(--glass-bg));
  color: var(--text-light);
  text-align: center;
}

.farm-plot.is-empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
}

/* โตแล้ว = ต้องเห็นจากมุมตาโดยไม่ต้องอ่านตัวหนังสือ (ผู้เล่นสแกนทั้งกริดทีเดียว) */
.farm-plot.is-ready {
  border-color: color-mix(in srgb, var(--bs-success) 65%, transparent);
  background: color-mix(in srgb, var(--bs-success) 22%, var(--glass-bg));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-success) 30%, transparent);
}

.farm-plot:hover { border-color: color-mix(in srgb, var(--bs-info) 55%, transparent); }

.farm-plot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 55%, transparent);
  outline-offset: 3px;
}

.farm-plot-emoji { font-size: 1.9rem; line-height: 1.1; }

.farm-plot-name {
  color: var(--text-light);
  font-size: 0.84rem;
  font-weight: 600;
}

.farm-plot-timer {
  color: var(--bs-secondary-color);
  font-size: 0.74rem;
}

.farm-plot.is-ready .farm-plot-timer { color: var(--bs-success); font-weight: 600; }

.farm-expand { margin-top: 14px; }

/* ── ร้านเมล็ด / สูตรแปรรูป ────────────────────────────────────────────────── */
.farm-seed-grid,
.farm-recipe-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.farm-seed,
.farm-recipe {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

.farm-seed.is-locked,
.farm-recipe.is-locked { opacity: 0.55; }

.farm-seed-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.farm-seed-emoji { font-size: 1.5rem; }

.farm-seed-name { color: var(--text-light); font-size: 0.95rem; }

.farm-seed-meta {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}

.farm-seed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.farm-recipe-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.farm-chip {
  padding: 3px 9px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--text-light);
  font-size: 0.75rem;
}

/* วัตถุดิบที่ยังไม่พอ — บอกตรงๆ ว่าขาดตัวไหน ไม่ใช่แค่ปุ่มกดไม่ได้เฉยๆ */
.farm-chip.is-short {
  border-color: color-mix(in srgb, var(--bs-danger) 55%, transparent);
  color: var(--bs-danger);
}

/* ── คลัง / ภารกิจ / อัพเกรด (แถวแนวนอนหน้าตาเดียวกัน) ─────────────────────── */
.farm-item-list,
.farm-quest-list,
.farm-upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.farm-item,
.farm-quest,
.farm-upgrade {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

.farm-quest.is-claimed { opacity: 0.6; }

.farm-item-emoji { font-size: 1.6rem; }

.farm-item-info {
  display: flex;
  flex: 1 1 220px;
  flex-direction: column;
  gap: 2px;
  color: var(--text-light);
}

.farm-item-info small { color: var(--bs-secondary-color); font-size: 0.76rem; }

.farm-upgrade-next { color: var(--bs-info) !important; }

.farm-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.farm-quest-done {
  color: var(--bs-success);
  font-size: 0.82rem;
  font-weight: 600;
}

.farm-quest-bar { margin-top: 4px; }

/* ── โรงแปรรูป ────────────────────────────────────────────────────────────── */
.farm-kitchen-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.farm-kitchen-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bs-info) 8%, var(--glass-bg));
  text-align: center;
}

.farm-kitchen-slot.is-empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--glass-bg) 60%, transparent);
}

.farm-kitchen-slot.is-ready {
  border-color: color-mix(in srgb, var(--bs-success) 65%, transparent);
  background: color-mix(in srgb, var(--bs-success) 20%, var(--glass-bg));
}

/* กล่องเลือกเมล็ด — ใช้พื้นทึบเดิมของ Bootstrap ไม่ได้ เพราะธีมมืดจะกลายเป็นกล่องขาว */
.farm-modal-content {
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--bg-color);
  color: var(--text-light);
}

.farm-modal-content .modal-header { border-bottom-color: var(--glass-border); }

/* ═══════════════════════════════════════════════════════════════════════════
   บ้านเสมือนของฉัน — หมวดเกมผ่านด่าน (/virtual-home/stage)
   ใช้ตัวแปรธีมกลางทั้งหมด รองรับ Blue / Dark / Light / Warm / Pink
   ⚠️ คลาสในบล็อกนี้ใช้ร่วมกันทุกเกมในหมวด (กริดกลาง .stage-grid ปรับจำนวนคอลัมน์ด้วย --stage-cols)
      เกมใหม่ที่เป็นกระดานตารางจึงไม่ต้องเพิ่ม CSS ใหม่เลย
   ═══════════════════════════════════════════════════════════════════════════ */

/* หลอดความคืบหน้าบนการ์ดเกมในหน้ารวมหมวด */
.stage-game-card { position: relative; }

.stage-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 12px;
}

.stage-progress-bar {
  overflow: hidden;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-light) 16%, transparent);
}

.stage-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bs-info);
}

.stage-progress-text {
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
}

/* ── หน้าเลือกด่าน ────────────────────────────────────────────────────────── */
.stage-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
}

.stage-summary-item { display: flex; flex-direction: column; gap: 2px; color: var(--text-light); }

.stage-summary-label { color: var(--bs-secondary-color); font-size: 0.76rem; }

.stage-level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}

.stage-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 78%, transparent);
  color: var(--text-light);
  text-align: center;
  text-decoration: none;
}

.stage-level:hover { border-color: color-mix(in srgb, var(--bs-info) 55%, transparent); color: var(--text-light); }

/* ด่านที่ผ่านแล้วต้องแยกออกจากด่านที่ยังไม่เคยเล่นตั้งแต่เหลือบตา ไม่ใช่ต้องอ่านดาว */
.stage-level.is-cleared {
  border-color: color-mix(in srgb, var(--bs-success) 55%, transparent);
  background: color-mix(in srgb, var(--bs-success) 16%, var(--glass-bg));
}

.stage-level.is-locked { opacity: 0.45; cursor: not-allowed; }

.stage-level-no { font-size: 1.15rem; font-weight: 700; }

.stage-level-stars { color: var(--bs-warning); font-size: 0.8rem; letter-spacing: 1px; }

.stage-level-record { color: var(--bs-secondary-color); font-size: 0.72rem; }

/* ── หน้ากระดาน ───────────────────────────────────────────────────────────── */
.stage-play-title { font-size: clamp(1.1rem, 2.6vw, 1.4rem) !important; }

.stage-play-prompt { color: var(--bs-secondary-color); font-size: 0.9rem; }

.stage-play-record { color: var(--bs-secondary-color); font-size: 0.82rem; }

.stage-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.stage-move-counter { color: var(--text-light); font-size: 0.88rem; }

.stage-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.stage-board { display: flex; justify-content: center; }

/* ── นาโนแกรมผ่านด่าน — ใช้ร่วมกันทั้งภาพสีเดียวและภาพ 4 สี ──────────────── */
.stage-board-nonogram {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.stage-nonogram-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.stage-nonogram-tool,
.stage-nonogram-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--glass-bg) 82%, transparent);
  color: var(--text-light);
  font-size: 0.8rem;
}

.stage-nonogram-tool:hover,
.stage-nonogram-tool[aria-pressed="true"],
.stage-nonogram-fullscreen:hover,
.stage-nonogram-fullscreen[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--bs-info) 68%, transparent);
  background: color-mix(in srgb, var(--bs-info) 15%, var(--glass-bg));
}

.stage-nonogram-tool[aria-pressed="true"],
.stage-nonogram-fullscreen[aria-pressed="true"] { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-info) 25%, transparent); }

.stage-nonogram-fullscreen:disabled { opacity: 0.45; cursor: not-allowed; }

.stage-board-nonogram:fullscreen,
.stage-board-nonogram.is-faux-fullscreen {
  box-sizing: border-box;
  justify-content: flex-start;
  overflow: auto;
  min-height: 100%;
  padding: 16px;
  background: var(--bg-color);
  color: var(--text-light);
}

.stage-board-nonogram:fullscreen .stage-nonogram-grid,
.stage-board-nonogram.is-faux-fullscreen .stage-nonogram-grid {
  --nonogram-cell-size: clamp(22px, min(3vw, 3vh), 34px);
}

.stage-board-nonogram.is-faux-fullscreen {
  position: fixed;
  z-index: 2000;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

body.has-nonogram-fullscreen { overflow: hidden; }

.stage-nonogram-swatch,
.stage-nonogram-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid color-mix(in srgb, var(--text-light) 24%, transparent);
  border-radius: 5px;
}

.stage-nonogram-swatch.is-ink { background: var(--text-light); }
.stage-nonogram-cross { color: var(--bs-danger); font-size: 1.25rem; font-weight: 700; line-height: 1; }

.stage-nonogram-guide {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
  text-align: center;
}

.stage-nonogram-scroll {
  overflow: auto;
  width: 100%;
  max-width: max-content;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}

.stage-nonogram-grid {
  --nonogram-cell-size: clamp(24px, 2.5vw, 32px);
  display: grid;
  grid-template-columns: minmax(86px, max-content) repeat(var(--nonogram-cols), var(--nonogram-cell-size));
  grid-template-rows: minmax(86px, max-content) repeat(var(--nonogram-rows), var(--nonogram-cell-size));
  width: max-content;
  margin: 0 auto;
  border: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent);
  background: color-mix(in srgb, var(--glass-bg) 84%, var(--bg-color));
  box-shadow: 0 8px 28px color-mix(in srgb, var(--bg-color) 38%, transparent);
}

.stage-nonogram-corner,
.stage-nonogram-hint {
  display: flex;
  color: var(--text-light);
  font-size: 0.7rem;
  font-weight: 700;
  user-select: none;
}

.stage-nonogram-corner {
  align-items: center;
  justify-content: center;
  border-right: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent);
  color: var(--bs-secondary-color);
  font-size: 1.15rem;
}

.stage-nonogram-hint {
  gap: 3px;
  transition: opacity 0.18s ease;
}

.stage-nonogram-hint.is-column {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 1px;
  border-right: 1px solid color-mix(in srgb, var(--text-light) 16%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent);
}

.stage-nonogram-hint.is-row {
  align-items: center;
  justify-content: flex-end;
  min-width: 86px;
  padding: 1px 7px;
  border-right: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 16%, transparent);
}

.stage-nonogram-hint.is-complete { opacity: 0.35; }

.stage-nonogram-clue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  min-height: 17px;
  padding: 1px 3px;
  border-radius: 5px;
  line-height: 1;
}

.stage-nonogram-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nonogram-cell-size);
  height: var(--nonogram-cell-size);
  padding: 0;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--text-light) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 18%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--text-light) 4%, var(--glass-bg));
  color: var(--bs-danger);
  font-size: clamp(0.78rem, 2vw, 1rem);
  font-weight: 700;
  line-height: 1;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.stage-nonogram-cell:hover { background: color-mix(in srgb, var(--bs-info) 16%, var(--glass-bg)); }
.stage-nonogram-cell:focus-visible { position: relative; z-index: 2; outline: 3px solid var(--bs-info); outline-offset: -3px; }
.stage-nonogram-cell.is-major-column { border-left: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent); }
.stage-nonogram-cell.is-major-row { border-top: 2px solid color-mix(in srgb, var(--text-light) 48%, transparent); }
.stage-nonogram-cell.is-crossed { background: color-mix(in srgb, var(--bs-danger) 7%, var(--glass-bg)); }
.stage-nonogram-grid.is-monochrome .stage-nonogram-cell.is-filled { background: var(--text-light); }

/* สีเป็นข้อมูลของตัวเกม ไม่ใช่สีโครงหน้า จึงคงชุดเดียวทุกธีมเพื่อให้อ่านป้ายใบ้ได้ตรงกัน */
.stage-nonogram-swatch.is-tone-1,
.stage-nonogram-clue.is-tone-1,
.stage-nonogram-cell.is-tone-1 { background: #e94b5f; color: #fff; }
.stage-nonogram-swatch.is-tone-2,
.stage-nonogram-clue.is-tone-2,
.stage-nonogram-cell.is-tone-2 { background: #f4c542; color: #171717; }
.stage-nonogram-swatch.is-tone-3,
.stage-nonogram-clue.is-tone-3,
.stage-nonogram-cell.is-tone-3 { background: #3f7fe8; color: #fff; }
.stage-nonogram-swatch.is-tone-4,
.stage-nonogram-clue.is-tone-4,
.stage-nonogram-cell.is-tone-4 { background: #43a86b; color: #fff; }

@media (max-width: 575.98px) {
  .stage-nonogram-grid {
    --nonogram-cell-size: 26px;
    grid-template-columns: minmax(72px, max-content) repeat(var(--nonogram-cols), var(--nonogram-cell-size));
    grid-template-rows: minmax(76px, max-content) repeat(var(--nonogram-rows), var(--nonogram-cell-size));
  }

  .stage-nonogram-hint.is-row { min-width: 72px; padding-inline: 4px; }
  .stage-nonogram-clue { min-width: 15px; min-height: 15px; padding: 1px 2px; }
}

/* ── เกมผจญภัยกระโดดข้ามด่าน — เกมเดียวในหมวดที่วาดด้วย canvas ────────────────
   ⚠️ ต้องเปลี่ยน .stage-board เป็นแนวตั้งเฉพาะเกมนี้ เพราะมีปุ่มบังคับอยู่ใต้จอ
      เกมอื่นในหมวดมีแต่กระดานชิ้นเดียวจึงจัดกึ่งกลางแนวนอนพอ */
.stage-board-platformer {
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.platformer-canvas {
  display: block;
  width: 100%;
  /* 12 ไทล์สูง : 21 ไทล์กว้าง — สัดส่วนนี้ทำให้เห็นด่านสูงเต็มจอโดยกล้องเลื่อนแค่แนวนอน */
  aspect-ratio: 21 / 12;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: #6ec6ff;
  /* ⚠️ ห้ามลบ — บนมือถือถ้าไม่ปิด touch-action การลากนิ้วบนจอเกมจะเลื่อนหน้าเว็บแทน */
  touch-action: none;
}

.platformer-pad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  touch-action: none;
  user-select: none;
}

.platformer-pad-side { display: flex; gap: 10px; }

.platformer-btn {
  width: 66px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  color: var(--text-light);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  /* ⚠️ กันเบราว์เซอร์ตีความการกดค้างเป็น "เลือกข้อความ" หรือเปิดเมนูบนมือถือ */
  -webkit-touch-callout: none;
  touch-action: none;
}

.platformer-btn.is-jump { width: 108px; }

.platformer-btn.is-down {
  border-color: var(--bs-warning);
  background: color-mix(in srgb, var(--bs-warning) 24%, var(--glass-bg));
}

/* จอเล็กพื้นที่นิ้วสำคัญกว่าพื้นที่จอ — ขยายปุ่มและปล่อยให้ภาพเกมเตี้ยลงได้ */
@media (max-width: 575px) {
  .platformer-btn { width: 74px; height: 64px; }
  .platformer-btn.is-jump { width: 120px; }
}

.stage-message {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--bs-info);
  font-size: 0.88rem;
  text-align: center;
}

.stage-message.is-error { color: var(--bs-danger); }
.stage-message.is-good { color: var(--bs-success); }

/* กริดกลางของทุกเกมกระดาน — จำนวนคอลัมน์มาจากตัวแปร --stage-cols ที่ตัววาดตั้งให้ */
.stage-grid {
  display: grid;
  grid-template-columns: repeat(var(--stage-cols, 8), 1fr);
  gap: 3px;
  width: min(100%, 460px);
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
}

/* ⚠️ ความสูงของแถวต้องมาจาก aspect-ratio ของช่อง ไม่ใช่ปล่อยให้ auto ตามเนื้อใน
   เดิมกริดตั้ง aspect-ratio ไว้ที่ตัวกริด แต่ไม่ได้กำหนด grid-template-rows
   → แถวที่มีตัวหมาก/กล่องจะสูงตามขนาดตัวอักษร ส่วนแถวว่างเตี้ยลง กระดานจึงเบี้ยวทั้งแผ่น
   การให้ช่องเป็นสี่เหลี่ยมจัตุรัสแทน ทำให้กริดสี่เหลี่ยม (หมากรุก/รถติด) และกริดผืนผ้า
   (ผลักกล่องที่กว้างไม่เท่าสูง) ได้ช่องขนาดเท่ากันหมดโดยไม่ต้องคำนวณอะไรเพิ่ม */
.stage-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-light) 10%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-light) 5%, transparent);
  color: var(--text-light);
  font-size: clamp(0.9rem, 3.4vw, 1.5rem);
  line-height: 1;
}

.stage-cell:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 55%, transparent);
  outline-offset: 2px;
}

/* ── ผลักกล่อง ────────────────────────────────────────────────────────────── */
/* กริดของเกมนี้กว้างไม่เท่าสูง (6-8 × 6-8 สลับกันไปตามด่าน) — ช่องสี่เหลี่ยมจัตุรัส
   ที่ตั้งไว้ใน .stage-cell จัดการความสูงให้เองแล้ว ไม่ต้องมีกฎเฉพาะของเกมนี้ */

.stage-cell.is-wall {
  border-color: transparent;
  background: color-mix(in srgb, var(--text-light) 26%, transparent);
}

/* จุดเป้าต้องเห็นได้แม้มีกล่องทับอยู่ — ใช้วงแหวนด้านในแทนการเปลี่ยนสีพื้นทั้งช่อง */
.stage-cell.is-goal { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bs-warning) 70%, transparent); }

.stage-cell.is-box-done { background: color-mix(in srgb, var(--bs-success) 30%, transparent); }

.stage-cell.is-player { background: color-mix(in srgb, var(--bs-info) 22%, transparent); }

/* ── รถติด ────────────────────────────────────────────────────────────────── */
/* รถหนึ่งคัน = element เดียวที่กินหลายช่องด้วย grid-area (ดู [public/js/stage-rush.js])
   ⚠️ ห้ามกลับไปวาดทีละช่อง — รถต้องเป็น element เดียวจริง ๆ เพราะทั้งการลาก การเลื่อนแบบมีแอนิเมชัน
      และกรอบตอนถูกเลือก ล้วนทำกับ "รถทั้งคัน" ไม่ใช่ช่องเดี่ยว ๆ
   ⚠️ สีรถไม่ผูกกับตัวแปรธีมโดยตั้งใจ — มันคือสีของวัตถุในเกม ไม่ใช่สีของหน้าเว็บ
      แต่สีของรถทั่วไปเป็นแค่ความสวยงาม ไม่ใช่ข้อมูล · ตัวที่บอกว่ามีกี่คันคือรูปทรงรถ
      (เส้นขอบ กระจกหน้า หัว-ท้าย) รถสีเดียวกันจอดติดกันจึงยังนับออก — ต่างจากยุคที่รถเป็นบล็อกสีทึบ
      มีแค่สีแดงของรถผู้เล่นที่เป็น "ป้ายระบุตัว" จริง จึงห้ามแจกให้คันอื่น */
/* รถวาดด้วยภาพจริง — หั่นจากสไปรต์ชีตด้วย scripts/gen_rush_car_sprites.js
   stage-rush.js เป็นคนเลือกว่าคันไหนใช้ภาพไหนแล้วส่งมาทาง --car-img
   ⚠️ margin ต้องเป็น 0 — ตัวไฟล์ภาพเผื่อขอบใสมาให้แล้ว ถ้าหด margin ซ้ำรถจะสั้นกว่าช่องที่มันกินจริง
      ซึ่งเป็นข้อมูลที่ผู้เล่นเกมนี้ต้องอ่านให้เป๊ะว่ารถคันไหนขวางช่องไหนอยู่ */
.stage-car {
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  background-image: var(--car-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated; /* ต้นฉบับเป็นพิกเซลอาร์ต ปล่อยให้เบราว์เซอร์เกลี่ยจะเบลอ */
  cursor: grab;
  /* ⚠️ ห้ามลบ — บนมือถือถ้าไม่ปิด touch-action การลากรถจะกลายเป็นการเลื่อนหน้าจอแทน */
  touch-action: none;
}

/* ระหว่างลาก: ยกขึ้นมาเหนือคันอื่นและปิด transition เพื่อให้ตามนิ้วแบบไม่หน่วง */
.stage-car.is-dragging {
  z-index: 3;
  cursor: grabbing;
  transition: none;
}

/* รถของผู้เล่นต้องหาเจอในพริบตา — สีแดงมากับตัวภาพ car-target-h.webp คันเดียวในกระดาน
   (ชุดภาพรถทั่วไปจงใจไม่มีสีแดงเลย ดูเหตุผลใน scripts/gen_rush_car_sprites.js) */

/* กรอบเหลืองของคันที่เลือก — ตอนเป็นบล็อกสีทึบใช้ box-shadow รอบตัวก็พอ แต่พอรถเป็นภาพโปร่งใส
   กรอบสี่เหลี่ยมกลับมีประโยชน์กว่าเดิม เพราะมันบอก "ช่องที่รถคันนี้กินอยู่" ได้ตรง ๆ */
.stage-car.is-selected {
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--bs-warning);
}

.stage-car:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-info) 70%, transparent);
  outline-offset: 2px;
}

/* ใช้ร่วมกับหมากรุกปริศนา (ไฮไลต์หมากที่เลือกอยู่) */
.stage-cell.is-selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-warning) 65%, transparent); }

/* ปากทางออก — ต้องบอกให้เห็นว่าต้องพารถไปไหน ไม่งั้นผู้เล่นใหม่งง */
.stage-cell.is-exit {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--bs-success) 65%, transparent);
  background: color-mix(in srgb, var(--bs-success) 12%, transparent);
}

/* ── หมากรุกปริศนา ────────────────────────────────────────────────────────── */
.stage-grid-chess { gap: 0; padding: 4px; }

.stage-grid-chess .stage-cell { border: 0; border-radius: 0; font-size: clamp(1.1rem, 4.6vw, 2rem); }

.stage-grid-chess .stage-cell.is-dark { background: color-mix(in srgb, var(--text-light) 14%, transparent); }

.stage-cell.is-white-piece { color: var(--text-light); text-shadow: 0 0 2px rgba(0, 0, 0, 0.55); }

/* หมากฝ่ายรับใช้สีเน้น ไม่ใช่สีขาว/ดำจริง — ธีมสว่างจะแยกสองฝ่ายไม่ออกถ้าใช้สีจริง */
.stage-cell.is-black-piece { color: var(--bs-info); }

.stage-cell.is-playable { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bs-info) 55%, transparent); }

.stage-cell.is-last-move { background: color-mix(in srgb, var(--bs-warning) 22%, transparent); }

/* ── ปริศนาตรรกะ ──────────────────────────────────────────────────────────── */
.stage-logic { width: min(100%, 560px); }

.stage-jug-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.stage-jug {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
  color: var(--text-light);
}

.stage-jug.is-source { border-color: color-mix(in srgb, var(--bs-warning) 65%, transparent); }

.stage-jug.is-target-hit { border-color: color-mix(in srgb, var(--bs-success) 65%, transparent); }

.stage-jug-glass {
  display: flex;
  align-items: flex-end;
  width: 62px;
  height: 96px;
  border: 2px solid color-mix(in srgb, var(--text-light) 30%, transparent);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--text-light) 6%, transparent);
}

.stage-jug-water {
  width: 100%;
  border-radius: 0 0 8px 8px;
  background: color-mix(in srgb, var(--bs-info) 65%, transparent);
  transition: height 0.25s ease;
}

.stage-logic-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.stage-logic-goal { margin-top: 14px; color: var(--bs-secondary-color); font-size: 0.85rem; text-align: center; }

.stage-crossing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stage-bank {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--glass-bg) 70%, transparent);
}

.stage-bank.is-active { border-color: color-mix(in srgb, var(--bs-info) 55%, transparent); }

.stage-bank-title { margin: 0 0 4px; color: var(--text-light); font-size: 0.92rem; }

.stage-bank-item {
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-light) 6%, transparent);
  color: var(--text-light);
  font-size: 0.85rem;
  text-align: left;
}

.stage-bank-item:disabled { opacity: 0.5; }

.stage-bank-item.is-picked {
  border-color: color-mix(in srgb, var(--bs-warning) 65%, transparent);
  background: color-mix(in srgb, var(--bs-warning) 18%, transparent);
}

.stage-boat { margin-top: 6px; color: var(--bs-info); font-size: 0.8rem; }

/* ── กล่องผ่านด่าน ────────────────────────────────────────────────────────── */
.stage-clear {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--bs-success) 55%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bs-success) 14%, var(--glass-bg));
  text-align: center;
}

.stage-clear-title { margin: 0 0 6px; color: var(--text-light); font-size: 1.1rem; }

.stage-clear-detail { margin: 0 0 12px; color: var(--bs-secondary-color); font-size: 0.9rem; }

.stage-clear-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ภาพเคลื่อนที่ของกระดานทุกเกม — สำเนาที่บินจากช่องเดิมไปช่องใหม่ (window.BoardMotion)
   ⚠️ คลาสสองตัวนี้ใช้ร่วมกันทุกเกม (เลื่อนแผ่นเลข · 2048 · ไพ่คนเดียว · หมากฮอส · หมากรุกไทย/สากล)
      เกมใหม่ที่อยากได้ภาพเลื่อนไม่ต้องเพิ่ม CSS อะไรอีก แค่เรียก snapshot() แล้ว fly()
   ═══════════════════════════════════════════════════════════════════════════ */
.board-ghost {
  z-index: 1080;          /* เหนือกระดานและ sidebar แต่ต่ำกว่า modal ของ Bootstrap (1055 คือ backdrop) */
  pointer-events: none;   /* ⚠️ ห้ามลบ — ghost ทับทั้งหน้าจอ ถ้ากินคลิกผู้เล่นจะกดกระดานไม่ได้ระหว่างเลื่อน */
  margin: 0 !important;
  transform: translate(0, 0);
  will-change: transform;
}

/* ghost ของกระดานหมาก: เอาเฉพาะ "ตัวหมาก" ไปลอย ไม่เอาพื้นช่องกับกรอบไปด้วย
   (หน้าตาหมากผูกกับคลาสบนช่อง จึงต้องโคลนทั้งช่องแล้วมาลบพื้นทีหลัง) */
.board-ghost.versus-cell,
.board-ghost.stage-cell {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.board-ghost.versus-cell::after,
.board-ghost.stage-cell::after { content: none !important; }

/* ⚠️ ตัวหมากในกระดานเกมเล่นกับเพื่อนตั้ง transform: scale(0) ไว้เป็นค่าเริ่มต้น แล้วขยายเป็น 1 ตอนมีหมาก
   (เอฟเฟกต์ "โผล่จากเล็กไปใหญ่" ที่ออกแบบมาสำหรับเกมวางหมาก)
   สำเนาเป็น element ที่เพิ่งสร้าง จึงเริ่มที่ scale(0) แล้วค่อยขยายระหว่างบิน — เห็นเป็นหมากค่อยๆ โตขณะเลื่อน
   ต้องบังคับให้เต็มขนาดตั้งแต่วินาทีแรกและปิด transition ของมันทิ้ง */
.board-ghost > span {
  transform: scale(1) !important;
  transition: none !important;
}

/* ปลายทางระหว่างรอสำเนาบินมาถึง — ซ่อนไว้ก่อนไม่งั้นเห็นของชิ้นเดียวกันสองที่พร้อมกัน */
.is-arriving,
.is-arriving > span { opacity: 0 !important; }

/* ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหวไว้ ตัวช่วยฝั่ง JS จะไม่สร้าง ghost ตั้งแต่แรก
   กฎนี้เป็นตาข่ายชั้นสองเผื่อมี ghost ค้างจากจังหวะที่ผู้ใช้เพิ่งเปลี่ยนค่าระหว่างเล่น */
@media (prefers-reduced-motion: reduce) {
  .board-ghost { display: none !important; }
  .is-arriving, .is-arriving > span { opacity: 1 !important; }
}

/* ── โอเทลโล: แอนิเมชันพลิกเหรียญตอนหมากเปลี่ยนสี ─────────────────────────────
   ⚠️ ตัวเลข 320ms ต้องตรงกับ FLIP_MS ใน [public/js/versus-board.js]
      เพราะฝั่ง JS เป็นคนสลับสีตอนหมุนถึงครึ่งทาง (160ms) และถอดคลาสตอนหมุนจบ
      ถ้าสองที่ไม่ตรงกัน จะเห็นสีเปลี่ยนตอนหมากยังหันหน้าอยู่ = ไม่ใช่การพลิก
   ⚠️ ต้องมี rotateY คู่กับ scale(1) เสมอ — .versus-cell.is-black > span ตั้ง transform: scale(1) ไว้
      ถ้าเขียนแต่ rotateY หมากจะหดเป็นศูนย์ระหว่างหมุน */
@keyframes versus-flip {
  0%   { transform: scale(1) rotateY(0deg); }
  50%  { transform: scale(1) rotateY(90deg); }
  100% { transform: scale(1) rotateY(0deg); }
}

.versus-cell.is-flipping > span {
  animation: versus-flip 320ms ease-in-out both;
  animation-delay: var(--flip-delay, 0ms);
  /* ปิด transition ของสีระหว่างหมุน — ต้องเปลี่ยนสีแบบทันทีตอนหันข้าง ไม่ใช่ค่อย ๆ ไล่สี */
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .versus-cell.is-flipping > span { animation: none; }
}

/* ── ตัวจัดการถัง R2 Private (/system_admin/r2-private) ──────────────────────
   คลาสกลางของหน้า file explorer — ไม่กำหนดสีตายตัว ใช้ตัวแปรธีมทั้งหมด
   เพื่อให้สลับธีมสว่าง/มืด/บลู แล้วไม่แตก (ดูกฏใน .github/copilot-instructions.md) */
.r2m-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--sb-hover);
  color: var(--bs-warning);
  font-size: 0.72rem;
}

.r2m-pathbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--sb-border, rgba(14, 165, 233, 0.12));
  font-size: 0.78rem;
}

.r2m-crumb {
  border: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sb-hover);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.r2m-crumb:hover {
  background: var(--glass-border);
}

.r2m-crumb.is-current {
  cursor: default;
  opacity: 0.65;
}

.r2m-crumb-sep {
  opacity: 0.35;
}

/* ชื่อโฟลเดอร์/ไฟล์ในตาราง — เป็นปุ่มเพื่อให้กดด้วยคีย์บอร์ดได้ แต่หน้าตาเหมือนลิงก์ */
.r2m-name {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.r2m-name:hover {
  text-decoration: underline;
}

.r2m-drop {
  padding: 22px 14px;
  border: 2px dashed var(--glass-border);
  border-radius: 10px;
  background: var(--sb-hover);
  color: var(--bs-secondary-color);
  text-align: center;
  cursor: pointer;
}

.r2m-drop.is-over {
  border-color: var(--bs-info);
}

.r2m-drop-list {
  max-height: 180px;
  overflow-y: auto;
  font-size: 0.74rem;
}

/* ── ลากไฟล์มาวางทั้งหน้าเพื่ออัปโหลด (/system_admin/r2-private) ──────────────
   overlay ต้อง pointer-events:none เพราะตัวรับ drop จริงคือ window
   ถ้าปล่อยให้ overlay รับ event เอง มันจะบัง element ข้างล่างจนเกิด dragleave ค้าง */
.r2m-main {
  position: relative;
}

.r2m-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--glass-bg, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(3px);
  pointer-events: none;
}

.r2m-overlay.is-active {
  display: flex;
}

/* ตอนกำลังอัปโหลดต้องกินคลิก — กันกดลบ/เปลี่ยนโฟลเดอร์ระหว่างไฟล์ยังวิ่งอยู่ */
.r2m-overlay.is-busy {
  pointer-events: auto;
}

/* กว้างพอให้แถบความคืบหน้ามีที่ยืน ไม่หดตามความยาวชื่อไฟล์ */
.r2m-overlay-busy {
  min-width: min(340px, 70vw);
}

.r2m-overlay-card {
  padding: 24px 32px;
  border: 3px dashed var(--bs-info);
  border-radius: 14px;
  background: var(--sb-bg, #0c1830);
  text-align: center;
  overflow-wrap: anywhere;
}

/* กล่องแถวรายการสินค้าในบิลของ "ร้านเล็กๆ ของฉัน" (ขาย/ซื้อ/ปรับสต๊อก)
   จำกัดความสูงแล้วให้เลื่อนในตัวเอง — ไม่งั้นบิลที่มีหลายสิบรายการจะดัน modal
   ยาวทะลุจอจนกดปุ่มบันทึกไม่ได้
   จำนวนแถวที่เห็นตั้งต่อทะเบียนผ่าน --shop-items-rows (maxVisibleItems ใน _shop_cfg.js)
   เพราะแต่ละหน้ามีช่องระดับบิลใต้กล่องไม่เท่ากัน หน้าที่มีช่องเยอะต้องให้กล่องเตี้ยลง */
.shop-items-scroll {
  max-height: calc(var(--shop-items-rows, 8) * 2.75rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* รูปสินค้าของ "ร้านเล็กๆ ของฉัน" — กล่องขนาดคงที่ที่มีไอคอนสำรองซ้อนอยู่ข้างหลังรูปเสมอ
   ทำไมต้องมีไอคอนสำรอง: ไฟล์อยู่ถัง private ลิงก์จึงหมดอายุใน 10 นาที และผู้ใช้ลบไฟล์ทิ้ง
   จากหน้าคลังได้เอง → รูปพังเป็นเรื่องปกติ ต้องมีของรออยู่ ไม่ใช่ปล่อยให้เห็นไอคอนรูปแตกของเบราว์เซอร์
   (JS เป็นคนเอา <img> ที่โหลดไม่ขึ้นออก แล้วไอคอนที่ซ่อนอยู่ข้างหลังจะโผล่มาเอง) */
.shop-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--sb-hover);
  border: 1px solid var(--sb-border);
}
.shop-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-thumb-sm { width: 1.75rem; height: 1.75rem; border-radius: 0.35rem; font-size: 0.7rem; }
.shop-thumb-lg { width: 8rem; height: 8rem; border-radius: 0.75rem; font-size: 1.75rem; }

/* รูปคนในทะเบียนคนสำคัญ — วงกลม ต่างจากรูปสินค้าที่เป็นสี่เหลี่ยมมน
   ⚠️ URL เป็น presigned อายุ 10 นาที รูปจึงพังได้เป็นปกติเมื่อเปิดหน้าค้างไว้นาน
      ตัวดัก error ฝั่ง JS จะถอด <img> ออกให้เหลือไอคอนคนแทน */
.life-photo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sb-hover);
  font-size: 0.75rem;
}
.life-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.life-photo-lg { width: 7rem; height: 7rem; font-size: 1.75rem; }

/* รูปย่อที่กดดูขนาดเต็มได้ — ของกลาง ใช้คู่กับ /js/image-zoom.js ได้ทุกหน้า
   วางทับรูปย่อทรงไหนก็ได้ (สี่เหลี่ยมของสินค้า / วงกลมของทะเบียนชีวิต)
   เพราะกำหนดแค่ 'ถอดหน้าตาปุ่มทิ้ง' ไม่ได้กำหนดขนาดหรือรูปทรงเอง
   ⚠️ ต้องอยู่ 'หลัง' .shop-thumb กับ .life-photo ในไฟล์นี้ — padding/border ของ <button>
      ต้องชนะค่าที่คลาสรูปทรงตั้งไว้ ซึ่ง specificity เท่ากันจึงตัดสินด้วยลำดับ
   ⚠️ เป็น <button> จริงเพื่อให้แท็บ/Enter ใช้ได้ · ใช้คลิกไม่ใช่ hover เพราะมือถือไม่มี hover */
.zoom-trigger {
  padding: 0;
  border: 0;
  cursor: zoom-in;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.zoom-trigger:hover,
.zoom-trigger:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.55);
}

/* รูปขนาดเต็มในกล่อง — สูงไม่เกินจอ ไม่ต้องเลื่อนหาปุ่มปิด */
.zoom-img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 0.75rem;
  object-fit: contain;
}

/* ปุ่มเลือกสินค้าในบิล — หน้าตาเหมือนช่อง select แต่วางรูปย่อไว้หน้าชื่อสินค้าได้ */
.shop-product-btn {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
}

/* เมนูเลือกสินค้า — ต่อกับ body และวางแบบ fixed ไม่ให้โดนกล่องรายการที่เลื่อนได้ตัดหายไปครึ่งหนึ่ง
   z-index ต้องสูงกว่าโมดัล (1055) เพราะเมนูนี้เปิดขณะฟอร์มบิลเปิดอยู่ */
/* ⚠️ ต้องเขียนเป็น .dropdown-menu.shop-product-menu (2 คลาส) ห้ามเหลือคลาสเดียว
   เพราะ Bootstrap ตั้ง .dropdown-menu { z-index: 1000 } ไว้ ซึ่ง specificity เท่ากันเป๊ะ
   ถ้าเท่ากันจะไปตัดสินที่ "ไฟล์ไหนมาทีหลัง" ซึ่งเปราะมาก — วันไหนสลับลำดับ <link>
   หรือเบราว์เซอร์ถือ style.css ตัวเก่าค้างไว้ เมนูจะตกไปอยู่หลังโมดัล (z-index 1055) ทันที */
.dropdown-menu.shop-product-menu {
  position: fixed;
  z-index: 1080; /* เหนือโมดัล (1055) แต่ยังต่ำกว่า toast (1090) */
  padding: 0.5rem;
  max-width: calc(100vw - 1rem);
}
.shop-product-list {
  max-height: 15rem;
  overflow-y: auto;
}

/* ============================================
   โลกรอบตัวฉัน (/world) — ชั้นที่ 1 ของกลาง: แถบตัวเลขวันนี้ + พาดหัวข่าว
   ใช้ตัวแปรธีมกลางทั้งหมด (--glass-*, --text-light, --bs-*) ห้ามใส่สีตายตัว
   ============================================ */
.world-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.world-section-title {
  margin: 0;
  color: var(--text-light);
  font-size: 1.02rem;
  font-weight: 700;
}

.world-section-note {
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

.world-empty {
  padding: 22px;
  border: 1px dashed var(--glass-border);
  border-radius: 16px;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  text-align: center;
}

/* แถบตัวเลข: เลื่อนแนวนอนบนจอแคบแทนที่จะบีบใบให้อ่านไม่ออก
   scroll-snap ทำให้เลื่อนแล้วหยุดตรงขอบใบพอดี ไม่ค้างครึ่งใบ */
.world-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}

.world-metric {
  scroll-snap-align: start;
  position: relative;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: var(--glass-bg);
  overflow: hidden;
}

.world-metric::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--bs-secondary-color);
  content: '';
}

.world-metric.is-up::before { background: var(--bs-success); }
.world-metric.is-down::before { background: var(--bs-danger); }
.world-metric.is-stale { opacity: 0.72; }

.world-metric-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  white-space: nowrap;
}

.world-metric-value {
  margin-top: 4px;
  color: var(--text-light);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.world-metric-value small {
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-weight: 500;
}

.world-metric-change {
  margin-top: 2px;
  color: var(--bs-secondary-color);
  font-size: 0.72rem;
  white-space: nowrap;
}

.world-metric.is-up .world-metric-change { color: var(--bs-success); }
.world-metric.is-down .world-metric-change { color: var(--bs-danger); }

.world-metric-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 1rem;
}

.world-metric-tag,
.world-metric-stale {
  padding: 1px 7px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  font-size: 0.66rem;
  white-space: nowrap;
}

.world-metric-stale {
  color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.world-sources {
  margin: 10px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.world-sources a {
  color: var(--bs-secondary-color);
  text-decoration: underline;
}

.world-sources a:hover { color: var(--text-light); }

/* ข่าว: การ์ดพาดหัว + ที่มา — ทั้งใบเป็นลิงก์ออกไปต้นทาง เราไม่เก็บเนื้อข่าว */
.world-news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 10px;
}

.world-news-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.world-news-item:hover {
  border-color: var(--sb-active-color);
  transform: translateY(-2px);
}

.world-news-title {
  color: var(--text-light);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

.world-news-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.world-news-source { font-weight: 600; }
.world-news-meta i { margin-left: auto; }

/* ที่ว่างของชั้นที่ 2 (AI ย่อยของกลางให้) — เส้นประบอกว่ายังไม่ใช่ของจริง */
.world-layer2 {
  padding: 16px 18px;
  border: 1px dashed var(--glass-border);
  border-radius: 16px;
}

.world-layer2-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.world-layer2-body > i {
  color: var(--sb-active-color);
  font-size: 1.3rem;
}

.world-layer2-body strong {
  display: block;
  color: var(--text-light);
  font-size: 0.9rem;
}

.world-layer2-body p {
  color: var(--bs-secondary-color);
  font-size: 0.76rem;
  line-height: 1.6;
}

/* ชั้นที่ 2 — สรุปวันนี้โดย AI (ของกลาง วันละครั้ง)
   ที่มาเป็นชิปลิงก์เสมอ เพราะทุกข้อต้องอ้างพาดหัวที่มีจริงถึงจะถูกแสดง */
.world-brief {
  display: grid;
  gap: 10px;
}

.world-brief-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--sb-active-color);
  border-radius: 14px;
  background: var(--glass-bg);
}

.world-brief-index {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--sb-active-bg);
  color: var(--sb-active-color);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
}

.world-brief-body { min-width: 0; }

.world-brief-heading {
  display: block;
  color: var(--text-light);
  font-size: 0.92rem;
  line-height: 1.45;
}

.world-brief-summary {
  margin: 4px 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  line-height: 1.65;
}

.world-brief-affects {
  margin: 6px 0 0;
  color: var(--bs-info);
  font-size: 0.76rem;
  line-height: 1.5;
}

.world-brief-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.world-brief-sources a {
  padding: 1px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--bs-secondary-color);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.world-brief-sources a:hover {
  color: var(--text-light);
  border-color: var(--sb-active-color);
}

/* ชิปที่มาแบบ "ตัวเลขวันนี้" — ไม่มีลิงก์ออกนอก เพราะตัวเลขอยู่บนหน้าเดียวกันข้างบนแล้ว */
.world-brief-metric-ref {
  padding: 1px 8px;
  border: 1px solid var(--bs-info);
  border-radius: 999px;
  color: var(--bs-info);
}
/* พื้นผิว Canvas ที่ผู้ใช้ลากองค์ประกอบภายในได้ — ป้องกันหน้าเลื่อนตามนิ้วบนมือถือ */
.canvas-drag-surface {
  cursor: grab;
  touch-action: none;
}

.canvas-drag-surface:active {
  cursor: grabbing;
}

/* กรอบเทียบรูปก่อน–หลัง ใช้รูปผลลัพธ์เป็นฐานและเลื่อนเปิดรูปต้นฉบับด้านบน */
.image-compare-frame {
  --compare-position: 50%;
  position: relative;
  overflow: hidden;
}

.image-compare-frame > img {
  display: block;
}

.image-compare-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 calc(100% - var(--compare-position)) 0 0);
}

/* OBS Browser Source Overlay — แยกจากธีมแอปเพราะต้องมีพื้นหลังโปร่งใสบนภาพสตรีม */
html.stream-overlay-root,
body.stream-overlay-page {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent !important;
}

.stream-overlay-stage {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 5vw, 96px);
  font-family: 'Outfit', 'Noto Sans Thai', sans-serif;
}

.stream-overlay-stage.is-top {
  align-items: flex-start;
}

.stream-overlay-stage.is-left {
  justify-content: flex-start;
}

.stream-overlay-stage.is-right {
  justify-content: flex-end;
}

.stream-overlay-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 18px;
  background-color: #0f172a;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.045) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.045) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.045) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.045) 75%);
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

.stream-overlay-preview .stream-overlay-stage {
  padding: clamp(12px, 4%, 48px);
}

.stream-overlay-preview .stream-overlay-card {
  width: min(820px, 94%);
}

@media (max-width: 767.98px) {
  .stream-overlay-preview {
    min-height: 260px;
    aspect-ratio: auto;
  }

  .stream-overlay-preview .stream-overlay-icon {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }

  .stream-overlay-preview .stream-overlay-heading strong {
    font-size: 22px;
  }

  .stream-overlay-preview .stream-overlay-heading span {
    font-size: 18px;
  }

  .stream-overlay-preview .stream-overlay-card p {
    font-size: 17px;
  }
}

.stream-overlay-card {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  width: min(920px, 92vw);
  padding: clamp(18px, 2.5vw, 32px);
  border: 1px solid rgba(125, 211, 252, 0.7);
  border-radius: 24px;
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.94), rgba(15, 23, 42, 0.94));
  box-shadow: 0 20px 60px rgba(2, 8, 23, 0.45);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.stream-overlay-card.has-bg-dark {
  border-color: rgba(148, 163, 184, 0.7);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
}

.stream-overlay-card.has-bg-purple {
  border-color: rgba(216, 180, 254, 0.75);
  background: linear-gradient(135deg, rgba(126, 34, 206, 0.95), rgba(46, 16, 101, 0.96));
}

.stream-overlay-card.has-bg-green {
  border-color: rgba(110, 231, 183, 0.75);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.95), rgba(6, 78, 59, 0.96));
}

.stream-overlay-card.has-bg-red {
  border-color: rgba(252, 165, 165, 0.78);
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(69, 10, 10, 0.96));
}

.stream-overlay-card.has-bg-gold {
  border-color: rgba(253, 230, 138, 0.8);
  background: linear-gradient(135deg, rgba(180, 83, 9, 0.96), rgba(69, 26, 3, 0.96));
}

.stream-overlay-card.is-hidden {
  pointer-events: none;
  opacity: 0;
  transform: translateY(28px) scale(0.97);
}

.stream-overlay-card.is-backgroundless {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 2px 8px rgba(2, 8, 23, 0.9);
}

.stream-overlay-card.has-text-dark {
  color: #0f172a;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.55);
}

.stream-overlay-card.has-text-yellow {
  color: #fef08a;
}

.stream-overlay-card.has-text-cyan {
  color: #a5f3fc;
}

.stream-overlay-card.has-text-pink {
  color: #fbcfe8;
}

.stream-overlay-card.has-accent-cyan {
  border-color: rgba(34, 211, 238, 0.9);
}

.stream-overlay-card.has-accent-cyan .stream-overlay-heading span,
.stream-overlay-card.has-accent-cyan .stream-overlay-icon {
  color: #22d3ee;
}

.stream-overlay-card.has-accent-pink {
  border-color: rgba(244, 114, 182, 0.9);
}

.stream-overlay-card.has-accent-pink .stream-overlay-heading span,
.stream-overlay-card.has-accent-pink .stream-overlay-icon {
  color: #f472b6;
}

.stream-overlay-card.has-accent-green {
  border-color: rgba(52, 211, 153, 0.9);
}

.stream-overlay-card.has-accent-green .stream-overlay-heading span,
.stream-overlay-card.has-accent-green .stream-overlay-icon {
  color: #34d399;
}

.stream-overlay-card.has-accent-gold {
  border-color: rgba(251, 191, 36, 0.9);
}

.stream-overlay-card.has-accent-gold .stream-overlay-heading span,
.stream-overlay-card.has-accent-gold .stream-overlay-icon {
  color: #fbbf24;
}

.stream-overlay-card.has-accent-white {
  border-color: rgba(255, 255, 255, 0.9);
}

.stream-overlay-card.has-accent-white .stream-overlay-heading span,
.stream-overlay-card.has-accent-white .stream-overlay-icon {
  color: #ffffff;
}

/* โหมดไม่มีกรอบต้องชนะทุกพรีเซ็ตสี เพื่อไม่ให้สีเน้นดึงเส้นขอบกลับมา */
.stream-overlay-card.is-backgroundless {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.stream-overlay-icon {
  display: grid;
  flex: 0 0 auto;
  width: clamp(56px, 7vw, 88px);
  height: clamp(56px, 7vw, 88px);
  place-items: center;
  border-radius: 50%;
  color: #fb7185;
  background: rgba(255, 255, 255, 0.96);
  font-size: clamp(30px, 4vw, 48px);
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.24);
}

.stream-overlay-copy {
  min-width: 0;
  flex: 1;
}

.stream-overlay-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.stream-overlay-heading strong {
  overflow: hidden;
  font-size: clamp(24px, 3.3vw, 44px);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stream-overlay-heading span {
  color: #fde68a;
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 700;
}

.stream-overlay-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 10px 0 0;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.stream-overlay-card.is-card-small {
  width: min(700px, 88vw);
  padding: clamp(14px, 2vw, 24px);
}

.stream-overlay-card.is-card-large {
  width: min(1120px, 96vw);
  padding: clamp(22px, 3vw, 40px);
}

.stream-overlay-card.is-card-small .stream-overlay-icon {
  width: clamp(48px, 6vw, 70px);
  height: clamp(48px, 6vw, 70px);
  font-size: clamp(26px, 3.5vw, 38px);
}

.stream-overlay-card.is-card-large .stream-overlay-icon {
  width: clamp(68px, 8vw, 104px);
  height: clamp(68px, 8vw, 104px);
  font-size: clamp(38px, 5vw, 58px);
}

.stream-overlay-card.is-text-small .stream-overlay-heading strong {
  font-size: clamp(20px, 2.7vw, 34px);
}

.stream-overlay-card.is-text-small .stream-overlay-heading span {
  font-size: clamp(17px, 2vw, 27px);
}

.stream-overlay-card.is-text-small p {
  font-size: clamp(15px, 1.8vw, 23px);
}

.stream-overlay-card.is-text-large .stream-overlay-heading strong {
  font-size: clamp(30px, 4vw, 54px);
}

.stream-overlay-card.is-text-large .stream-overlay-heading span {
  font-size: clamp(25px, 3.2vw, 42px);
}

.stream-overlay-card.is-text-large p {
  font-size: clamp(22px, 3vw, 38px);
}

.stream-overlay-preview .stream-overlay-card.is-card-small {
  width: min(700px, 88%);
}

.stream-overlay-preview .stream-overlay-card.is-card-large {
  width: min(1120px, 96%);
}

.stream-overlay-status {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(125, 211, 252, 0.5);
  border-radius: 999px;
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.8);
  font-size: 14px;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.stream-overlay-status.is-hidden {
  opacity: 0;
}