/* ══════════════════════════════════════════════════════════════════════════════
   SDesigns — ระบบจัดการเนื้อหาเว็บ (CMS)
   สไตล์ทั้งหมดอ้าง "โทเคน" จาก SDesigns Design System เท่านั้น
   → tokens.css เมานต์มาจาก /opt/sd-design-system/src/styles/tokens.css
   แก้สี/ฟอนต์/ระยะ ที่ Design System แล้วหน้านี้เปลี่ยนตาม (ทั้งโหมดสว่างและมืด)
   ห้ามใส่ค่าสีตรง ๆ ในไฟล์นี้ ยกเว้น rgba สำหรับเงา/วงโฟกัส
   ══════════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body-03);
  line-height: var(--leading-body-03);
  letter-spacing: var(--tracking-body-03);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
h1, h2, h3, p, ul, ol { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: var(--font-weight-semibold); }

/* ── ตัวอักษรตาม Design System ─────────────────────────────────────────────── */
.dsTitle {
  font-family: var(--font-display);
  font-size: var(--text-headline-02);
  line-height: var(--leading-headline-02);
  letter-spacing: var(--tracking-headline-02);
  font-weight: var(--font-weight-semibold);
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.dsTitle::before {
  content: "";
  width: 3px;
  height: 0.85em;
  flex: none;
  border-radius: var(--radius-s);
  background: var(--accent);
}
.overline {
  font-size: var(--text-overline);
  line-height: var(--leading-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
}
.muted { color: var(--muted); }
.tiny, .sm { font-size: var(--text-caption); }
.link { color: var(--brand); }
.error { color: var(--danger); font-size: var(--text-caption); min-height: 1em; }

/* ── หน้าเข้าสู่ระบบ ───────────────────────────────────────────────────────── */
.login {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-default);
  background: var(--wash-hero), var(--bg);
}
.loginCard {
  width: min(440px, 100%);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-l);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}
.loginCard .dsTitle { font-size: var(--text-headline-03); margin-bottom: var(--space-xxs); }
.loginCard .muted { font-size: var(--text-caption); }
.loginCard .block { margin-top: var(--space-s); }
.loginCard > .muted:last-child { margin-top: var(--space-s); }

/* ── โครงหน้า: แถบข้าง + ส่วนหลัก ──────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}
.side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-default) var(--space-s);
  background: var(--surface);
  border-right: var(--border-width) solid var(--border);
}
.brand { display: flex; align-items: center; gap: var(--space-xs); }
.crown { color: var(--brand); display: grid; place-items: center; }
.brandText { display: flex; flex-direction: column; line-height: 1.2; }
.brandText strong {
  font-family: var(--font-display);
  font-size: var(--text-headline-03);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-headline-03);
}
.brandText em {
  font-style: normal;
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  color: var(--muted);
}

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav button {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-l);
  background: transparent;
  color: var(--fg-soft);
  font: inherit;
  font-size: var(--text-body-03);
  font-weight: var(--font-weight-normal);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
.nav button svg { color: var(--icon); flex: none; }
.nav button:hover { background: var(--surface-2); color: var(--fg); }
.nav button.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 3px 0 0 0 var(--accent);
}
.nav button.active svg { color: var(--accent); }
.nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sideFoot {
  border-top: var(--border-width) solid var(--border);
  padding-top: var(--space-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sideFoot #me { word-break: break-all; }

/* ── แถบเครื่องมือบน ───────────────────────────────────────────────────────── */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-default);
  background: var(--surface);
  border-bottom: var(--border-width) solid var(--border);
}
.crumb { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-caption); }
.crumb span { color: var(--muted); }
.crumb i { color: var(--icon); font-style: normal; }
.crumb strong { color: var(--fg); font-weight: var(--font-weight-semibold); }
.topActions { margin-left: auto; display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

/* ── พื้นที่เนื้อหา ────────────────────────────────────────────────────────── */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--container-content);
  margin: 0 auto;
  padding: var(--space-default);
}
.pageHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-default);
  flex-wrap: wrap;
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-default);
  border-bottom: var(--border-width) solid var(--border);
}
.pageHeadText { max-width: 64ch; }
.pageHeadText .muted { margin-top: var(--space-xxs); }
.toolbar { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.spacer { flex: 1; }

/* ── ปุ่ม (ตามโทเคนแบรนด์) ────────────────────────────────────────────────── */
button, .file {
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius);
  border: var(--border-width) solid transparent;
  padding: 9px 14px;
  cursor: pointer;
  background: transparent;
  color: var(--fg);
  transition: background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
}
button.primary { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }
button.primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
button.secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
/* ปุ่มทำลายข้อมูล (ลบ) — ใช้โทเคน --danger ของ Design System ไม่กำหนดสีเอง */
button.danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger); color: var(--surface); }
button.secondary:hover { background: var(--surface-2); }
button.ghost { background: transparent; color: var(--fg-soft); border-color: transparent; }
button.ghost:hover { background: var(--surface-2); color: var(--fg); }
button.ghost.icon { padding: 8px; display: grid; place-items: center; color: var(--icon); }
button.ghost.icon svg { display: block; }
.icoSun { display: none; }
[data-theme='dark'] .icoSun { display: block; }
[data-theme='dark'] .icoMoon { display: none; }
button:focus-visible, .file:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { color: var(--fg-disabled); cursor: not-allowed; }
.file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  background: var(--surface);
  color: var(--fg);
  border-color: var(--border-strong);
}
.file:hover { background: var(--surface-2); }
.file input { display: none; }

/* ── ช่องกรอก ─────────────────────────────────────────────────────────────── */
input, select, textarea {
  font-family: inherit;
  font-size: var(--text-body-03);
  color: var(--fg);
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 12px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49, 162, 219, 0.18);
}
textarea { resize: vertical; min-height: 84px; line-height: var(--leading-body-03); }
#search { width: 240px; }
#alt { width: 260px; }
.fieldLabel { display: block; font-size: var(--text-caption); font-weight: var(--font-weight-medium); color: var(--fg-soft); }
.loginCard .fieldLabel { margin-top: var(--space-xs); }
.locale {
  display: inline-flex;
  background: var(--surface-3);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 2px;
}
.locale button {
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  border-radius: var(--radius-full);
  padding: 6px 14px;
}
.locale button.active { background: var(--surface); color: var(--brand); font-weight: var(--font-weight-semibold); box-shadow: var(--box-shadow-xs); }

/* ── ป้ายสถานะ ────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--fg-soft);
}
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.err { background: var(--danger-soft); color: var(--danger); }

/* ── ผลตรวจก่อนเผยแพร่ ────────────────────────────────────────────────────── */
.gate {
  border: var(--border-width) solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-l);
  padding: var(--space-s) var(--space-default);
  margin-bottom: var(--space-default);
  font-size: var(--text-caption);
  background: var(--surface-2);
}
.gate ul { margin: var(--space-xxs) 0 0; padding-left: var(--space-s); }
.gate li { margin-bottom: 2px; }
.gate strong { display: block; margin-bottom: var(--space-xxs); font-size: var(--text-body-03); }
.gate.ok { background: var(--success-soft); border-color: var(--success); }
.gate.warn { background: var(--warning-soft); border-color: var(--warning); }
.gate.err { background: var(--danger-soft); border-color: var(--danger); }

/* ── รายการช่องข้อความ ────────────────────────────────────────────────────── */
.fields { display: flex; flex-direction: column; gap: var(--space-s); }
h3.section {
  position: sticky;
  top: 65px;
  z-index: 10;
  margin: var(--space-s) 0 0;
  padding: var(--space-xs) 0;
  font-size: var(--text-overline);
  line-height: var(--leading-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--fg-soft);
  background: var(--bg);
  border-bottom: var(--border-width) solid var(--border);
}
h3.section:first-child { margin-top: 0; }
.field {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  transition: border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.field:hover { border-color: var(--border-strong); }
.field:focus-within { border-color: var(--accent-border); box-shadow: 0 0 0 3px rgba(49, 162, 219, 0.12); }
.field .k { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.field .lab { font-weight: var(--font-weight-medium); color: var(--fg); }
.field code.key {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  color: var(--muted);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: 2px 6px;
  word-break: break-all;
}
.field .where {
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  color: var(--brand);
  background: var(--brand-soft);
  border: var(--border-width) solid var(--brand-border);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}
.field .sm.muted { text-align: right; }

/* ── คลังรูป ──────────────────────────────────────────────────────────────── */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-s);
}
.media-item {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.media-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface-3); display: block; }
.media-item .meta { padding: var(--space-s); display: flex; flex-direction: column; gap: 6px; font-size: var(--text-caption); }
.media-item code {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  color: var(--fg-soft);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  word-break: break-all;
  display: block;
}
.media-item .row { display: flex; gap: var(--space-xxs); flex-wrap: wrap; margin-top: var(--space-xxs); }
.media-item .row button { border: var(--border-width) solid var(--border-strong); }
.media-item .del { color: var(--danger); }

/* ── ตาราง ────────────────────────────────────────────────────────────────── */
.tableWrap {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  overflow: auto;
}
table.table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
table.table th {
  text-align: left;
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--muted);
  background: var(--surface-2);
  padding: 10px var(--space-s);
  border-bottom: var(--border-width) solid var(--border);
  white-space: nowrap;
}
table.table td { padding: var(--space-xs) var(--space-s); border-top: var(--border-width) solid var(--border); vertical-align: top; }
table.table tbody tr:hover td { background: var(--surface-2); }
table.table td button { padding: 6px 10px; }

/* ── การ์ด / ฟอร์มเพิ่มผู้ใช้ ─────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  padding: var(--space-default);
}
.inlineCard {
  display: flex;
  align-items: flex-end;
  gap: var(--space-s);
  flex-wrap: wrap;
  margin-bottom: var(--space-default);
}
.inlineCard .row { display: flex; flex-direction: column; gap: var(--space-xxs); flex: 1 1 180px; min-width: 160px; }

/* ── แจ้งเตือนมุมล่าง ─────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-default);
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(680px, calc(100% - var(--space-default) * 2));
  background: var(--panel-dark);
  color: var(--panel-dark-fg);
  font-size: var(--text-caption);
  padding: 10px var(--space-s);
  border-radius: var(--radius-full);
  box-shadow: var(--box-shadow-xl);
}

/* ── จอเล็ก: แถบข้างกลายเป็นแถบเลื่อนด้านบน ───────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: static;
    height: auto;
    gap: var(--space-xs);
    padding: var(--space-s) 0 0;
    border-right: 0;
    border-bottom: var(--border-width) solid var(--border);
  }
  .brand { padding: 0 var(--space-s); }
  .nav { flex-direction: row; overflow-x: auto; padding: 0 var(--space-s) var(--space-xs); scrollbar-width: thin; }
  .nav button { width: auto; flex: none; border-radius: var(--radius-full); white-space: nowrap; padding: 8px 12px; }
  .nav button.active { box-shadow: none; background: var(--brand); color: var(--brand-fg); }
  .nav button.active svg { color: var(--brand-fg); }
  /* ลดความสูงส่วนหัว: ไม่ต้องมีชื่อผู้ใช้/เส้นทางซ้ำ กับหัวข้อหน้าที่แสดงอยู่แล้ว */
  .sideFoot {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0 var(--space-s) var(--space-xs);
    border-top: 0;
  }
  .sideFoot #me { display: none; }
  .crumb { display: none; }
  .topbar { flex-wrap: wrap; padding: var(--space-s); }
  .topActions { margin-left: 0; width: 100%; gap: var(--space-xxs); }
  .content { padding: var(--space-s); }
  .pageHead { align-items: flex-start; }
  .toolbar { width: 100%; }
  h3.section { top: 0; }
}
@media (max-width: 560px) {
  .dsTitle { font-size: var(--text-headline-03); }
  #search, #alt { width: 100%; }
  #pw, #logout { padding: 8px 10px; font-size: var(--text-overline); }
  .inlineCard { flex-direction: column; align-items: stretch; }
  .pageHead { margin-bottom: var(--space-s); }
  .field { padding: var(--space-xs) var(--space-s); }
}

@media print {
  .side, .topbar, .toolbar { display: none; }
}

/* ── หน้าเว็บ: รายการหน้าทั้งหมด + พื้นที่แก้ไข (ตาม layout) ──────────────── */
.pagesLayout {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: var(--space-default);
  align-items: start;
}
.pageList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 74px;
  max-height: calc(100vh - 104px);
  overflow: auto;
  padding-right: var(--space-xxs);
  scrollbar-width: thin;
}
.pageGroup {
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-s) 0 var(--space-xxs);
}
.pageGroup:first-child { margin-top: 0; }
.pageItem {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  background: transparent;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-l);
  padding: 8px 10px;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  transition: background var(--duration-fast) var(--ease-default);
}
.pageItem:hover { background: var(--surface-2); }
.pageItem.active { background: var(--surface); border-color: var(--brand); box-shadow: var(--box-shadow-xs); }
.pageItem .piName { font-weight: var(--font-weight-semibold); font-size: var(--text-caption); }
.pageItem .piMeta { font-size: var(--text-caption); color: var(--muted); }
.pageMain { min-width: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.pageHeadCard {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  padding: var(--space-s) var(--space-default);
}
#page-gate { padding: var(--space-s) var(--space-default); border-radius: var(--radius-xl); font-size: var(--text-caption); }
#page-gate ul { margin: var(--space-xxs) 0 0 var(--space-s); }
#page-gate.ok { background: var(--success-bg, var(--surface-2)); border: var(--border-width) solid var(--success, var(--border)); }
#page-gate.warn { background: var(--warning-bg, var(--surface-2)); border: var(--border-width) solid var(--warning, var(--border)); }
#page-gate.err { background: var(--error-bg, var(--surface-2)); border: var(--border-width) solid var(--error, var(--border)); }

/* ── เมนูเว็บไซต์ ────────────────────────────────────────────────────────── */
.menuGroups { display: flex; flex-direction: column; gap: var(--space-default); }
.menuGroups .card {
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  padding: var(--space-s) var(--space-default);
}
.menuRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  padding: var(--space-xs) 0;
  border-top: var(--border-width) solid var(--border);
}
.menuRow:first-of-type { border-top: 0; }
.menuTop { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.menuRow .fieldLabel { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-overline); color: var(--muted); }
.menuRow input {
  width: 100%;
  background: transparent;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-l);
  padding: 8px 10px;
  color: var(--fg);
  font: inherit;
}
.menuRow input:focus { border-color: var(--brand); outline: none; }

@media (max-width: 900px) {
  .pagesLayout { grid-template-columns: minmax(0, 1fr); }
  .pageList {
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-xxs);
    padding-bottom: var(--space-xxs);
  }
  .pageGroup { display: none; }
  .pageItem {
    flex: none;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }
  .pageItem .piMeta { display: none; }
  .menuRow { grid-template-columns: minmax(0, 1fr); }
}


/* ── แท็บ "ตำแหน่งรูป" (ข่าว) ────────────────────────────────────────────── */
.alignList { display: flex; flex-direction: column; gap: var(--space-s); }
.alignRow {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 340px);
  gap: var(--space-default);
  align-items: center;
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs);
  padding: var(--space-default);
}
@media (max-width: 900px) { .alignRow { grid-template-columns: 1fr; } }

.alignPreviews { display: grid; grid-template-columns: 1fr 132px; gap: var(--space-xs); }
.alignPrev { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.alignPrev img {
  display: block; width: 100%; object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--surface-3, var(--surface-2));
  border: var(--border-width) solid var(--border);
}
/* กรอบจริงที่รูปถูกแสดง: ฮีโร่หน้าบทความ = 1440×460 (แบนมาก) · การ์ด = 16:10 */
.alignPrevHero img { aspect-ratio: 1440 / 460; }
.alignPrevCard img { aspect-ratio: 16 / 10; }
.alignPrev figcaption { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-muted, var(--muted)); }

.alignInfo { display: flex; flex-direction: column; gap: var(--space-xs); }
.alignInfo h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.alignPick { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.alignPick button {
  font: inherit; font-size: 13px; padding: 7px 14px; cursor: pointer;
  background: var(--surface-2, var(--surface)); color: var(--fg);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-pill, 999px);
}
.alignPick button[aria-pressed="true"] {
  background: var(--brand, #166790); border-color: var(--brand, #166790); color: #fff; font-weight: 600;
}
.alignTag { font-size: 11px; color: var(--fg-muted, var(--muted)); }
.alignDirty { box-shadow: 0 0 0 2px var(--accent, #31A2DB); }


/* ── แท็บ "บทความ" ──────────────────────────────────────────────────────── */
.articlesFilter { gap: var(--space-xs); align-items: center; }
.articlesFilter input[type="search"] { max-width: 320px; }

.syncPill {
  font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill, 999px);
  border: var(--border-width) solid var(--border); background: var(--surface-2, var(--surface));
  white-space: nowrap;
}
.syncPill.syncOk { border-color: var(--success, #1f9d55); color: var(--success, #1f9d55); }
.syncPill.syncBusy { border-color: var(--accent, #31A2DB); color: var(--brand, #166790); }
.syncPill.syncBad { border-color: var(--danger, #d64545); color: var(--danger, #d64545); }
.syncPill.syncIdle { color: var(--fg-muted, var(--muted)); }

.articleRows { display: flex; flex-direction: column; gap: var(--space-s); }
.articleRow {
  display: grid; grid-template-columns: 132px 1fr auto; gap: var(--space-default); align-items: center;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--box-shadow-xs); padding: var(--space-default);
}
@media (max-width: 860px) { .articleRow { grid-template-columns: 96px 1fr; } .arActions { grid-column: 1 / -1; } }
.arThumb img, .arNoImg {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius-m); background: var(--surface-3, var(--surface-2));
  border: var(--border-width) solid var(--border);
}
.arNoImg { display: grid; place-items: center; font-size: 11px; color: var(--fg-muted, var(--muted)); }
.arTop { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.arTitle { margin: 0; font-size: 16px; line-height: 1.35; }
.arTitleTh { margin: 2px 0 0; font-size: 13.5px; color: var(--fg-muted, var(--muted)); }
.arMeta { margin: 4px 0 0; font-size: 11.5px; color: var(--fg-muted, var(--muted)); }
.arActions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.pill { font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill, 999px); border: var(--border-width) solid var(--border); }
.pillOk { border-color: var(--success, #1f9d55); color: var(--success, #1f9d55); }
.pillDraft { color: var(--fg-muted, var(--muted)); }
.pillWarn { border-color: #c98a00; color: #c98a00; }
.pillQuiet { color: var(--fg-muted, var(--muted)); }

.messages { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-s); }
.msg { border-radius: var(--radius-m); padding: var(--space-xs) var(--space-s); font-size: 13px; border: var(--border-width) solid var(--border); }
.msg ul { margin: 6px 0 0 18px; }
.msgErr { border-color: var(--danger, #d64545); background: color-mix(in srgb, var(--danger, #d64545) 6%, transparent); }
.msgWarn { border-color: #c98a00; background: color-mix(in srgb, #c98a00 7%, transparent); }
.msgOk { border-color: var(--success, #1f9d55); }

.editGrid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-default); align-items: start; }
@media (max-width: 1100px) { .editGrid { grid-template-columns: 1fr; } }
.editMain { display: flex; flex-direction: column; gap: var(--space-s); min-width: 0; }
.editSide { display: flex; flex-direction: column; gap: var(--space-s); }
.fieldRow { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-xs); }
.fieldRow label { font-size: 12px; color: var(--fg-muted, var(--muted)); }
.fieldRow input, .fieldRow select, .fieldRow textarea { width: 100%; }
.checkline { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: var(--space-xs) 0; }

.langTabs { display: flex; gap: 6px; align-items: center; margin-bottom: var(--space-s); flex-wrap: wrap; }
.langTabs button {
  font: inherit; font-size: 13px; padding: 7px 14px; cursor: pointer;
  background: var(--surface-2, var(--surface)); color: var(--fg);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-pill, 999px);
}
.langTabs button.active { background: var(--brand, #166790); border-color: var(--brand, #166790); color: #fff; font-weight: 600; }

.blocksHead { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin: var(--space-xs) 0; font-size: 13px; }
.blockAdd { display: flex; gap: 6px; flex-wrap: wrap; }
.blocks { display: flex; flex-direction: column; gap: var(--space-xs); }
.blk { border: var(--border-width) solid var(--border); border-radius: var(--radius-m); padding: var(--space-xs); background: var(--surface-2, var(--surface)); }
.blkHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.blkType { font-size: 11.5px; color: var(--fg-muted, var(--muted)); }
.blkTools { display: flex; gap: 4px; align-items: center; }
.blkTools button { font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer; background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-s, 6px); }
.blkLead { font-size: 11.5px; color: var(--fg-muted, var(--muted)); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.blkLead input { margin: 0; }
.blk textarea, .blk input { width: 100%; }
.blkImg { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-xs); align-items: start; }
@media (max-width: 700px) { .blkImg { grid-template-columns: 1fr; } }
.blkImgPrev { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-s, 6px); background: var(--surface-3, var(--surface-2)); border: var(--border-width) solid var(--border); }
.blkImgFields { display: flex; flex-direction: column; gap: 6px; }

.heroPrev, .cardPrev { margin: 0 0 var(--space-xs); }
.heroPrev img { display: block; width: 100%; aspect-ratio: 1440 / 460; object-fit: cover; border-radius: var(--radius-m); border: var(--border-width) solid var(--border); background: var(--surface-3, var(--surface-2)); }
.cardPrev img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-m); border: var(--border-width) solid var(--border); background: var(--surface-3, var(--surface-2)); }
.heroPrev figcaption, .cardPrev figcaption { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted, var(--muted)); margin-top: 4px; }

.revList { display: flex; flex-direction: column; gap: 6px; }
.revItem { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; border-bottom: var(--border-width) dashed var(--border); padding-bottom: 6px; }

.overlay { position: fixed; inset: 0; background: rgba(6, 30, 44, .55); display: grid; place-items: center; z-index: 60; padding: 20px; }
.overlayCard { background: var(--surface); border-radius: var(--radius-xl); border: var(--border-width) solid var(--border); width: min(1100px, 100%); max-height: 86vh; overflow: auto; padding: var(--space-default); box-shadow: var(--box-shadow-l, 0 12px 40px rgba(0,0,0,.25)); }
.overlayHead { display: flex; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-s); }
.overlayHead input { flex: 1; }
.imgGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-xs); }
.imgCell { padding: 4px; background: var(--surface-2, var(--surface)); border: var(--border-width) solid var(--border); border-radius: var(--radius-m); cursor: pointer; text-align: left; font: inherit; }
.imgCell:hover { border-color: var(--accent, #31A2DB); }
.imgCell img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-s, 6px); }
.imgCell span { display: block; font-size: 10.5px; color: var(--fg-muted, var(--muted)); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ โมดูล "เรื่องจากฟอร์ม" และ "สินค้า" ═════════════════════════════════════
   ใช้โทเคนของดีไซน์ซิสเต็มเท่านั้น (ไม่กำหนดสีตายตัว) เพื่อให้สลับธีมได้
   ═════════════════════════════════════════════════════════════════════════ */

/* แถบตัวเลขสรุป — ใช้แถบเดียวมีเส้นคั่น ไม่ใช้การ์ดเท่ากัน 4 ใบ */
.stripBar {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--box-shadow-xs);
  overflow: hidden; margin-bottom: var(--space-s);
}
.stripCell {
  flex: 1 1 168px; min-width: 150px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-right: var(--border-width) solid var(--border);
  border-radius: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: none; font-weight: inherit;
}
.stripCell:last-child { border-right: 0; }
.stripCell:hover { background: var(--surface-2, rgba(127, 127, 127, .07)); }
.stripCell.on { background: color-mix(in srgb, var(--accent, #31A2DB) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent, #31A2DB); }
.stripCell.plain { cursor: default; }
.stripCell b { font-size: 21px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stripCell em { font-style: normal; font-size: 11px; color: var(--fg-muted, var(--muted)); }
.stripCell .overline { font-size: 10.5px; }

.filterBar { gap: var(--space-xs); margin-bottom: var(--space-s); }

/* ผังสองคอลัมน์: ตาราง + แผงรายละเอียด */
.splitPane { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr); gap: var(--space-s); align-items: start; }
.splitPane > .tableWrap { overflow: auto; max-height: calc(100vh - 250px); }
.detailPane {
  position: sticky; top: 74px; background: var(--surface);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--box-shadow-xs); max-height: calc(100vh - 110px); overflow: auto;
}
.detailHead { padding: 14px 16px; border-bottom: var(--border-width) solid var(--border); }
.detailBody { padding: 14px 16px 20px; }
@media (max-width: 1080px) {
  .splitPane { grid-template-columns: 1fr; }
  .splitPane > .tableWrap { max-height: none; }
  .detailPane { position: static; max-height: none; }
}

table.table tr.rowOn { background: color-mix(in srgb, var(--accent, #31A2DB) 9%, transparent); }
table.table tr[data-lead], table.table tr[data-prod] { cursor: pointer; }
.tblFoot {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-top: var(--border-width) solid var(--border); font-size: 12px; color: var(--fg-muted, var(--muted));
}
.tblFoot .grow, .btnRow .grow, .histRow .grow, .fileRow .grow { flex: 1; }

.chip {
  display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; font-size: 11.5px;
  border: var(--border-width) solid var(--border); border-radius: 999px;
  background: var(--surface-2, rgba(127, 127, 127, .08));
}
.chipEdit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
.chipEditItem { display: inline-flex; align-items: center; gap: 4px; }
.chipEditItem button { padding: 0 4px; font-size: 12px; line-height: 1.4; border: 0; background: transparent; cursor: pointer; opacity: .65; }
.chipEditItem button:hover { opacity: 1; color: var(--danger, #c0392b); }

.miniHead {
  margin: 16px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-muted, var(--muted)); border-bottom: var(--border-width) dashed var(--border); padding-bottom: 4px;
}
.miniHead .muted { text-transform: none; letter-spacing: 0; }

.kv { display: flex; flex-direction: column; gap: 0; }
.kvRow { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; padding: 5px 0; border-bottom: var(--border-width) dashed var(--border); font-size: 12.5px; }
.kvRow > span { color: var(--fg-muted, var(--muted)); }
.kvRow > div { word-break: break-word; }

.btnRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.btnRow a.secondary { text-decoration: none; }

.fileList, .histList { display: flex; flex-direction: column; gap: 4px; }
.fileRow, .histRow {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-m, 8px); text-decoration: none;
}
.fileRow:hover { background: var(--surface-2, rgba(127, 127, 127, .08)); }
.histRow { border-style: dashed; }

.emptyBox {
  padding: 22px 16px; text-align: center; color: var(--fg-muted, var(--muted)); font-size: 12.5px;
}
.emptyBox b { display: block; margin-bottom: 4px; color: var(--fg, inherit); font-size: 13.5px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: 11.5px; }
.pillNew { background: color-mix(in srgb, var(--accent, #31A2DB) 18%, transparent); color: var(--fg, inherit); }
.pillBad { background: color-mix(in srgb, #c0392b 15%, transparent); color: var(--fg, inherit); }

/* กล่องยืนยันสำหรับจัดการหลายรายการ */
.modalWrap {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 24, 32, .45); padding: 20px;
}
.modalBox {
  background: var(--surface); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--box-shadow-l, 0 18px 45px rgba(0, 0, 0, .28));
  padding: 20px; width: min(520px, 100%); max-height: 86vh; overflow: auto;
}
.modalBox h3 { margin: 0 0 6px; }
.modalBox p { margin: 0 0 12px; font-size: 12.5px; }

/* ตารางในแท็บงานจริง: ให้คอลัมน์หายใจ + ตัดข้อความยาวแบบไม่ทำแถวสูงเท่าหน้าจอ */
.splitPane table.table { min-width: 700px; }
table.table th, table.table td { vertical-align: top; }
.cellNowrap { white-space: nowrap; }
.cellClamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.filterBar select { max-width: 300px; }

/* ══ แท็บ "ภาพรวมและงานที่ต้องทำ" ════════════════════════════════════════════ */

.ovGrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--space-s); align-items: start; }
@media (max-width: 1080px) { .ovGrid { grid-template-columns: 1fr; } }
.ovCard { padding: 0; overflow: hidden; }
.ovCardHead {
  margin: 0; padding: 12px 16px; font-size: 14px; border-bottom: var(--border-width) solid var(--border);
  display: flex; align-items: center; gap: 8px; position: static;
}
.ovCardHead .grow { flex: 1; }
.ovWide { margin-top: var(--space-s); }

/* แถวงานที่ต้องทำ — ตัวเลขใหญ่ซ้าย · ชื่อ+คำอธิบาย · ป้ายทางขวา */
.taskList { display: flex; flex-direction: column; }
.taskRow {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; text-align: left; background: transparent; border: 0; border-radius: 0;
  border-bottom: var(--border-width) solid var(--border); cursor: pointer; box-shadow: none; font-weight: inherit;
}
.taskRow:last-child { border-bottom: 0; }
.taskRow:hover { background: var(--surface-2, rgba(127, 127, 127, .07)); }
.taskN { font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.taskN.zero { color: var(--fg-muted, var(--muted)); }
.taskTxt b { display: block; font-size: 13.5px; }
.taskTxt small { display: block; color: var(--fg-muted, var(--muted)); font-size: 11.5px; margin-top: 2px; }

/* ตัวเลขที่ควรรู้ — รายการนิยาม ไม่ใช่ตาราง */
.factsList { padding: 12px 16px 4px; display: flex; flex-direction: column; }
.factRow {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 12.5px;
  border-bottom: var(--border-width) dashed var(--border);
}
.factRow > span { color: var(--fg-muted, var(--muted)); }
.factRow:last-child { border-bottom: 0; }
.infoBox {
  margin: 10px 16px 16px; padding: 12px 14px; font-size: 12px; line-height: 1.55;
  background: color-mix(in srgb, var(--accent, #31A2DB) 10%, transparent);
  border: var(--border-width) solid color-mix(in srgb, var(--accent, #31A2DB) 35%, var(--border));
  border-radius: var(--radius-m, 10px); color: var(--fg, inherit);
}

/* ป้ายตัวเลขในแถบข้าง + หัวข้อกลุ่ม */
.navGroup {
  padding: 14px 14px 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-muted, var(--muted));
}
#tabs button { position: relative; }
.navCount {
  margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--fg-muted, var(--muted)); padding-left: 8px;
}
#tabs button.active .navCount { color: inherit; opacity: .8; }

/* แบนเนอร์ในแท็บหน้าเว็บ เมื่อเข้ามาจากงาน "ข้อความ EN/TH ไม่ครบ" */
.vulnBanner {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--space-s);
  padding: 12px 14px; border-radius: var(--radius-m, 10px); font-size: 12.5px;
  background: color-mix(in srgb, #f0a33a 14%, transparent);
  border: var(--border-width) solid color-mix(in srgb, #f0a33a 45%, var(--border));
}
.vulnBanner b { display: block; margin-bottom: 4px; }
.vulnBanner ul { margin: 4px 0 0 16px; padding: 0; }
.vulnBanner li { margin: 2px 0; }

.cellClamp1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }

/* มือถือ: แถบข้างกลายเป็นแถบเลื่อนนอน — หัวข้อกลุ่มกินที่ จึงซ่อนไว้ (ตามแบบเดียวกับ .pageGroup) */
@media (max-width: 900px) {
  .navGroup { display: none; }
  .navCount { margin-left: 6px; padding-left: 4px; }
  .taskRow { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .taskN { font-size: 20px; }
}

/* ช่องแสดงตำแหน่งรูปสินค้า (รูปจริงอยู่ที่แค็ตตาล็อกของแบรนด์) */
.imgSlots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 4px 0 6px; }
.imgSlot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  aspect-ratio: 4 / 3; border-radius: var(--radius-m, 10px); font-size: 11px;
  border: var(--border-width) dashed var(--border); background: var(--surface-2, rgba(127, 127, 127, .06));
  color: var(--fg-muted, var(--muted));
}
.imgSlot em { font-style: normal; font-size: 10px; opacity: .75; }

/* ── ตัวแก้ไขในแผงรายละเอียดสินค้า ── */
.dimRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 4px 0 2px; }
.dimRow label { font-size: 11.5px; }
.dimRow input { width: 100%; }
.specEditor, .listEditor { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.specRow { display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(120px, 1.4fr) auto; gap: 6px; }
.listRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.imgEditor { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.imgTile { display: flex; flex-direction: column; gap: 5px; }
.imgThumb {
  aspect-ratio: 4 / 3; border-radius: var(--radius-m, 10px); overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: var(--surface-2, rgba(127, 127, 127, .08));
  border: var(--border-width) dashed var(--border);
}
.imgThumb img { width: 100%; height: 100%; object-fit: cover; }
.imgThumb.bad::after { content: "หารูปไม่เจอ"; font-size: 10.5px; color: var(--fg-muted, var(--muted)); }
.imgTile .imgPath { font-size: 11px; }
.stickySave { position: sticky; bottom: 0; padding: 10px 0; background: var(--bg, var(--surface)); border-top: var(--border-width) solid var(--border); }
label.rowLine { display: flex; align-items: center; gap: 8px; }
label.rowLine input[type="checkbox"] { width: auto; }

.table .pill { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ชั้นสีสัน (Color layer) — ใช้โทเคนของ SDesigns Design System เท่านั้น
   หลักการ: 1 สี = 1 ชนิดข้อมูล · ผสมด้วย color-mix กับโทเคน ⇒ ใช้ได้ทั้งโหมดสว่าง/มืด
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --c-1: var(--brand);      /* น้ำเงินหลัก */
  --c-2: var(--cyan-600);   /* ฟ้าคราม */
  --c-3: var(--success);    /* เขียว */
  --c-4: var(--warning);    /* เหลืองอำพัน */
  --c-5: var(--danger);     /* แดง */
}
[data-theme='dark'] {
  --c-1: var(--brand);
  --c-2: var(--cyan-300);
  --c-3: var(--success);
  --c-4: var(--warning);
  --c-5: var(--danger);
}

/* 1) พื้นผิวแอป — ไล่เฉดอ่อน ๆ ให้การ์ดลอยขึ้น */
.shell { background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 430px); background-repeat: no-repeat; }
.side { background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 320px); }
.topbar { background-image: linear-gradient(90deg, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%); }

/* 2) แถบตัวเลข KPI — 1 ช่อง 1 สี + เส้นนำสายตา */
.stripBar .stripCell { position: relative; --hue: var(--c-1); background: linear-gradient(180deg, color-mix(in srgb, var(--hue) 18%, var(--surface)) 0%, color-mix(in srgb, var(--hue) 7%, var(--surface)) 100%); border-top: 3px solid color-mix(in srgb, var(--hue) 70%, transparent); }
.stripBar .stripCell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--hue); opacity: .9; }
.stripBar .stripCell > b { color: color-mix(in srgb, var(--hue) 88%, var(--fg)); }
.stripBar .stripCell .overline { color: color-mix(in srgb, var(--hue) 75%, var(--fg)); font-weight: 600; }
.stripBar .stripCell:nth-child(4n + 1) { --hue: var(--c-1); }
.stripBar .stripCell:nth-child(4n + 2) { --hue: var(--c-2); }
.stripBar .stripCell:nth-child(4n + 3) { --hue: var(--c-3); }
.stripBar .stripCell:nth-child(4n) { --hue: var(--c-4); }
.stripBar .stripCell:hover { background: color-mix(in srgb, var(--hue) 17%, var(--surface)); }
.stripBar .stripCell.on { background: color-mix(in srgb, var(--hue) 22%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hue) 45%, transparent); }

/* 3) การ์ดงานที่ต้องทำ — 1 งาน 1 สี */
.taskRow { --hue: var(--c-1); position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 12%, transparent), transparent 55%); }
.taskRow::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--hue); }
.taskRow:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 20%, transparent), transparent 65%); }
.taskRow .taskN { color: var(--hue); }
.taskRow .taskN.zero { color: color-mix(in srgb, var(--hue) 45%, var(--muted)); }
.taskRow .pill { background: color-mix(in srgb, var(--hue) 14%, transparent); border-color: color-mix(in srgb, var(--hue) 55%, transparent); color: color-mix(in srgb, var(--hue) 80%, var(--fg)); }
.taskRow[data-task="leads-new"] { --hue: var(--c-1); }
.taskRow[data-task="products-status"] { --hue: var(--c-4); }
.taskRow[data-task="products-materials"] { --hue: var(--c-2); }
.taskRow[data-task="pages-th"] { --hue: var(--c-5); }

/* 4) การ์ด/แผง — เส้นสีบนสุด + หัวการ์ดไล่เฉด */
.card, .ovCard, .pageHeadCard, .detailPane, .tableWrap { border-top: 3px solid color-mix(in srgb, var(--brand) 65%, transparent); }
.detailPane { background-image: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 220px); }
.pageItem.active, .pageItem:hover { box-shadow: inset 3px 0 0 var(--c-2); }
.ovCardHead { background-image: linear-gradient(90deg, color-mix(in srgb, var(--brand) 15%, transparent), transparent 72%); }

/* 5) บรรทัด "ตัวเลขที่ควรรู้" — จุดสีนำหน้า */
.factRow > span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--c-1)); margin-right: 7px; vertical-align: 1px; }
.factRow:nth-child(4n + 1) { --dot: var(--c-1); }
.factRow:nth-child(4n + 2) { --dot: var(--c-2); }
.factRow:nth-child(4n + 3) { --dot: var(--c-3); }
.factRow:nth-child(4n) { --dot: var(--c-4); }

/* 6) ตาราง */
.table thead th { background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 16%, var(--surface)), color-mix(in srgb, var(--brand) 8%, var(--surface))); color: color-mix(in srgb, var(--brand) 55%, var(--fg)); font-weight: 600; }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.table tbody tr.rowOn { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 3px 0 0 var(--accent); }

/* 7) แถบข้าง */
.navGroup { color: color-mix(in srgb, var(--brand) 62%, var(--muted)); font-weight: 700; }
#tabs button svg { color: color-mix(in srgb, var(--brand) 62%, var(--muted)); }
/* เนื้อหาเว็บไซต์ = น้ำเงิน · งานขายและสินค้า = ฟ้าคราม · ระบบ = เทาเงิน */
#tabs button:nth-of-type(-n + 8) svg { color: color-mix(in srgb, var(--c-1) 70%, var(--muted)); }
#tabs button:nth-of-type(n + 9):nth-of-type(-n + 10) svg { color: color-mix(in srgb, var(--c-2) 78%, var(--muted)); }
#tabs button:nth-of-type(n + 11) svg { color: color-mix(in srgb, var(--muted) 90%, var(--fg)); }
#tabs button:nth-of-type(n + 9):nth-of-type(-n + 10) .navCount { background: color-mix(in srgb, var(--c-2) 16%, transparent); color: color-mix(in srgb, var(--c-2) 70%, var(--fg)); }
#tabs button.active { background: color-mix(in srgb, var(--brand) 14%, transparent); box-shadow: inset 3px 0 0 var(--brand); color: color-mix(in srgb, var(--brand) 80%, var(--fg)); }
#tabs button.active svg { color: var(--brand); }

/* 8) ปุ่มและป้าย */
.primary { background-image: linear-gradient(180deg, var(--accent), var(--brand)); border-color: color-mix(in srgb, var(--brand) 60%, transparent); }
.secondary { border-color: color-mix(in srgb, var(--brand) 32%, var(--border)); }
.secondary:hover { background: color-mix(in srgb, var(--brand) 13%, transparent); border-color: color-mix(in srgb, var(--brand) 50%, transparent); color: color-mix(in srgb, var(--brand) 80%, var(--fg)); }
button.small { border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); }
.pillOk { background: color-mix(in srgb, var(--success) 16%, transparent); border-color: color-mix(in srgb, var(--success) 45%, transparent); color: color-mix(in srgb, var(--success) 86%, var(--fg)); }
.pillWarn { background: color-mix(in srgb, var(--warning) 18%, transparent); border-color: color-mix(in srgb, var(--warning) 50%, transparent); color: color-mix(in srgb, var(--warning) 82%, var(--fg)); }
.pillQuiet { background: color-mix(in srgb, var(--muted) 10%, transparent); }
.chip { background: color-mix(in srgb, var(--c-1) 12%, transparent); border: var(--border-width) solid color-mix(in srgb, var(--c-1) 32%, transparent); }

/* 9) หัวเรื่องหน้า — ขีดสีใต้หัวข้อ (ลายเซ็นของระบบ)
      .dsTitle ของ DS เป็น display:flex ⇒ ต้องให้ห่อบรรทัดแล้วบังคับขีดให้ตกบรรทัดใหม่ */
.pageHeadText h1 { flex-wrap: wrap; }
.pageHeadText h1::after { content: ""; flex-basis: 100%; max-width: 54px; height: 4px; border-radius: 3px; margin-top: 10px; background: linear-gradient(90deg, var(--c-1), var(--c-2) 55%, var(--c-3)); }

/* 11) เก็บรายละเอียดให้มีสีสันสม่ำเสมอ */
.navCount { background: color-mix(in srgb, var(--brand) 20%, transparent); color: color-mix(in srgb, var(--brand) 82%, var(--fg)); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
#tabs button.active .navCount { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.crumb { color: color-mix(in srgb, var(--brand) 45%, var(--muted)); }
.crumb strong, .crumb b { color: color-mix(in srgb, var(--brand) 75%, var(--fg)); }
.tblFoot { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.toolbar.filterBar select:focus, .toolbar.filterBar input:focus { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.overline { color: color-mix(in srgb, var(--brand) 60%, var(--muted)); }

/* 10) กล่องคำอธิบาย + ช่องรูป */
.infoBox { background: linear-gradient(180deg, color-mix(in srgb, var(--c-2) 17%, transparent), color-mix(in srgb, var(--c-1) 10%, transparent)); border-color: color-mix(in srgb, var(--c-2) 42%, transparent); }
.imgSlot, .imgThumb { border-color: color-mix(in srgb, var(--c-2) 45%, var(--border)); background: color-mix(in srgb, var(--c-2) 9%, var(--surface)); }
.kvRow > span { color: color-mix(in srgb, var(--brand) 45%, var(--muted)); }