/* ไทยถูกบังคับให้เป็นฟอนต์เดียวกันทุกเครื่อง แทนที่จะปล่อยให้เบราว์เซอร์เดา
   เดิม: system-ui (=Segoe UI บน Windows) ไม่มี glyph ไทย → ตกไปใช้ TH Sarabun New ซึ่งเป็นฟอนต์
   เอกสารสิ่งพิมพ์ ตัว ก สูงแค่ 40/100 เทียบ x-height ของ Segoe UI ที่ 50/100 = ไทยเล็กกว่าอังกฤษ 20%
   (นั่นคือเหตุผลที่ html เคยถูกดันเป็น 19.5px เพื่อชดเชย — ซึ่งทำให้อังกฤษใหญ่เกินไปตาม)
   Leelawadee UI: ตัว ก สูง 51/100 → สมดุลกับ Segoe UI พอดีโดยไม่ต้อง size-adjust
   unicode-range จำกัดเฉพาะบล็อกไทย → อังกฤษ/ตัวเลขยังใช้ system-ui เหมือนเดิม · local() เท่านั้น = ไม่มี network */
@font-face {
  font-family: "HSV Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Noto Sans Thai"), local("IBM Plex Sans Thai"), local("Leelawadee UI"), local("Thonburi"), local("Sarabun");
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: "HSV Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Noto Sans Thai Bold"), local("IBM Plex Sans Thai SemiBold"), local("Leelawadee UI Bold"), local("Thonburi Bold"), local("Sarabun Bold");
  unicode-range: U+0E00-0E7F;
}

:root {
  --bg: #f6f7fb;
  --bg-glow-1: #c9c8ff;
  --bg-glow-2: #bdeef2;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
  --surface-3: #eef0f8;
  --border: rgba(23, 30, 51, 0.09);
  --border-strong: rgba(23, 30, 51, 0.18);
  --text: #1a2033;
  --text-dim: #454e63;
  --muted-2: #545c70;
  --accent: #564fe0;
  --accent-2: #0f8fa8;
  --accent-soft: rgba(86, 79, 224, 0.12);
  --gold: #a15c00;
  --danger: #c92a2a;
  --success: #0f9d63;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --font: "HSV Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* --- Interaction layer ---
     HR เปิดหน้านี้ทั้งวันเพื่อไล่เคลียร์คำร้อง → motion มีหน้าที่ยืนยันการกด ไม่ใช่ประดับ
     กดต้องต่ำกว่า 100ms เพราะสมองบัฟเฟอร์การรับรู้ ~80ms ช้ากว่านั้นรู้สึกหน่วง */
  --dur-press: 90ms;     /* กด — ต้องรู้สึกทันที */
  --dur-state: 160ms;    /* hover / เปลี่ยนสถานะ */
  --dur-panel: 280ms;    /* drawer / modal */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);        /* ease-out-quart */
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo */

  /* ไล่ระดับความสูงจากพื้น — ใช้สื่อ "ยกขึ้น / กดจม" ให้ของที่กดได้มีมิติ */
  --shadow-1: 0 1px 2px rgba(23, 30, 51, 0.06), 0 1px 1px rgba(23, 30, 51, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(23, 30, 51, 0.12), 0 2px 4px -2px rgba(23, 30, 51, 0.06);
  --shadow-3: 0 12px 26px -8px rgba(23, 30, 51, 0.20), 0 4px 10px -4px rgba(23, 30, 51, 0.10);
  --shadow-accent: 0 6px 18px -6px rgba(86, 79, 224, 0.55);
  --sheen: inset 0 1px 0 rgba(255, 255, 255, 0.18);  /* ขอบบนสว่าง = ผิวโค้งรับแสง */
}

* { box-sizing: border-box; }

/* 19.5px เคยเป็นไม้ค้ำชดเชยไทยที่เล็กกว่าอังกฤษ 20% — พอไทยสมดุลแล้วไม่ต้องค้ำ */
html { color-scheme: light; font-size: 17px; }

body {
  margin: 0;
  font-family: var(--font);
  /* ไทยเต็มพยางค์ (สระบน+วรรณยุกต์+สระล่าง เช่น ญ็่) กินหมึกสูง ~1.08em — normal (~1.36) แน่นเกินไป */
  line-height: 1.6;
  /* ambient wash นิ่ง ๆ แทนฉาก grid+ลำแสงเดิม (รื้อ 24 ส.ค.) — สาม blob ไล่โทน accent เบามาก
     static ล้วน ไม่มี animation/DOM เพิ่ม = ต้นทุน runtime ศูนย์ */
  background:
    radial-gradient(1100px 620px at 12% -10%, rgba(86, 79, 224, 0.10), transparent 60%),
    radial-gradient(900px 560px at 100% 0%, rgba(15, 143, 168, 0.08), transparent 55%),
    radial-gradient(1000px 600px at 50% 115%, rgba(86, 79, 224, 0.05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(86, 79, 224, 0.22); }

#login:not([hidden]), #app {
  position: relative;
  z-index: 1;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* tracking ติดลบบีบสระ/วรรณยุกต์ไทยให้ชนกัน — หัวข้อส่วนใหญ่เป็นไทย จึงคืนเป็น normal
   (.brand ยังคง -0.01em ได้ เพราะเป็นข้อความอังกฤษล้วน) */
h1, h2, h3 { font-family: var(--font); letter-spacing: normal; line-height: 1.35; }

/* คำศัพท์เดียวของทุกสิ่งที่กดได้: พัก=แนบพื้น · hover=ยกขึ้น 1px + เงาลึกขึ้น · กด=จมลงและหด
   filter/color อยู่ใน transition ด้วย ไม่งั้นปุ่มที่ใช้ filter (btn-sync/btn-issue) จะกระตุกตอน hover */
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
  box-shadow: var(--shadow-1);
  transition:
    background var(--dur-state) var(--ease-out),
    border-color var(--dur-state) var(--ease-out),
    color var(--dur-state) var(--ease-out),
    filter var(--dur-state) var(--ease-out),
    box-shadow var(--dur-state) var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}

button:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* กดแล้วต้อง "จม" ไม่ใช่แค่ขยับ — scale เล็กน้อย + เงาแบนลง อ่านเป็นแรงกดจริง */
button:active:not(:disabled) {
  transform: translateY(0) scale(0.978);
  box-shadow: var(--shadow-1);
  transition-duration: var(--dur-press);
}

button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }

input, select {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 100%;
  background: var(--surface);
  color: var(--text);
}

input::placeholder { color: var(--muted-2); }

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

select { color-scheme: light; cursor: pointer; }

/* ---- login ---- */
#login:not([hidden]) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}

.login-orb {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}

.login-orb-a { background: var(--bg-glow-1); top: -180px; left: -140px; animation: orbFloat 14s ease-in-out infinite; }
.login-orb-b { background: var(--bg-glow-2); bottom: -200px; right: -160px; animation: orbFloat 18s ease-in-out infinite reverse; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -25px) scale(1.08); }
}

#login-form {
  animation: formRise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

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

#login-form {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2.25rem 2rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 50px -18px rgba(26, 32, 51, 0.16);
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.login-logo {
  width: 84px;
  height: 84px;
  border-radius: 18px;
  object-fit: cover;
  margin: 0 auto 0.65rem;
  display: block;
  animation: markGlow 3.2s ease-in-out infinite;
}

@keyframes markGlow {
  0%, 100% { box-shadow: 0 8px 22px -6px rgba(86, 79, 224, 0.45); }
  50% { box-shadow: 0 8px 26px -4px rgba(15, 143, 168, 0.5); }
}

.login-wordmark-h1 { margin: 0 0 0.15rem; text-align: center; }
.login-wordmark { height: 252px; width: auto; display: inline-block; max-width: 100%; }

#login-form h1 {
  font-size: 1.4rem;
  margin: 0 0 0.15rem;
  text-align: center;
  font-weight: 700;
}

.login-wordmark-h1 {
  font-size: 1.4rem;
}

.login-sub {
  text-align: center;
  color: var(--muted-2);
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
}

#login-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.95rem;
  color: var(--text-dim);
}

#login-form button[type="submit"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  font-weight: 700;
  border: none;
  margin-top: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 1.02rem;
}

#login-form button[type="submit"]:hover { filter: brightness(1.08); }

.error { color: var(--danger); font-size: 0.95rem; }

/* ---- app shell ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: hidden;
  flex-wrap: wrap;
}

.topbar::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(86, 79, 224, 0.06), transparent);
  animation: topbarSweep 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes topbarSweep {
  0% { left: -30%; }
  50% { left: 110%; }
  100% { left: 110%; }
}

.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; font-size: 1.05rem; }

.brand-logo {
  width: 138px;
  height: 138px;
  border-radius: 24px;
  object-fit: cover;
  flex: 0 0 auto;
  animation: markGlow 3.2s ease-in-out infinite;
}

.brand-wordmark { height: 138px; width: auto; display: block; }

#nav {
  display: flex;
  gap: 0.2rem;
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem;
  width: fit-content;
  position: relative;
}

/* width อยู่ใน transition โดยตั้งใจ: ปุ่ม nav กว้างไม่เท่ากัน (82px–176px, อัตราส่วน 2.15×)
   ถ้าใช้ scaleX แทน ปลาย pill รัศมี 23px จะถูกยืดเป็นวงรี — แย่กว่าที่แก้
   element นี้ position:absolute → เปลี่ยน width ไม่ทำให้พี่น้องต้อง reflow */
.nav-indicator {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  height: calc(100% - 0.5rem);
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 200% 200%;
  box-shadow: var(--shadow-accent), var(--sheen);
  transform: translateX(0);
  transition:
    transform var(--dur-panel) var(--ease-out-strong),
    width var(--dur-panel) var(--ease-out-strong);
  animation: markGradientShift 5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* .btn-sync และ .inbox-heading-icon ก็เรียก keyframes ชุดนี้ — ลบทิ้งเมื่อไหร่ animation ตายเงียบ
   เบราว์เซอร์ไม่ฟ้อง error แค่ข้าม ตรวจด้วย el.getAnimations() ว่าได้ object จริงไหม */
@keyframes markGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.nav-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 0.48rem 0.8rem;
  color: var(--text-dim);
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;   /* กันข้อความ nav ตัดหลายบรรทัด (เช่น "รอยืนยันตามรอบ") เมื่อมี 5 ปุ่ม */
  transition: color 0.25s ease, transform 0.15s ease;
}

.nav-ic {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.nav-btn:hover { color: var(--text); transform: translateY(-1px); }
.nav-btn:hover .nav-ic { transform: scale(1.12); }

.nav-btn.active {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 3px 10px -3px rgba(86, 79, 224, 0.5);
}

.topbar-actions { display: flex; gap: 0.5rem; margin-left: auto; }
.topbar-actions button { font-size: 0.95rem; padding: 0.5rem 0.9rem; }

#view {
  padding: 2rem 1.5rem 3rem;
  max-width: 1180px;
  margin: 0 auto;
}

#view h2 {
  font-size: 1.85rem;
  margin: 0 0 1.25rem;
  font-weight: 700;
}

.inbox-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-bottom: 1.75rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px -20px rgba(26, 32, 51, 0.22);
  position: relative;
  overflow: hidden;
  animation: cardRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.inbox-heading-icon {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 200% 200%;
  color: #ffffff;
  animation: markGlow 3.2s ease-in-out infinite, markGradientShift 5s ease-in-out infinite;
}

.inbox-heading-icon svg { width: 26px; height: 26px; }

.inbox-heading-text h2 { margin: 0; line-height: 1.3; }

.inbox-heading-text .inbox-count { margin: 0.3rem 0 0; }

/* ---- sync Google Form button (เด่นชัดในหน้า inbox) ---- */
.btn-sync {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  background-size: 200% 200%;
  color: #ffffff;
  border: none;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 8px 20px -6px rgba(86, 79, 224, 0.6);
  animation: markGradientShift 5s ease-in-out infinite;
}

.btn-sync:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-sync:active { transform: translateY(1px); }
.btn-sync:disabled { opacity: 0.6; cursor: default; filter: none; transform: none; }
.btn-sync .btn-sync-ic { width: 21px; height: 21px; flex: 0 0 auto; }
.btn-sync.syncing .btn-sync-ic { animation: spin 0.9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

.sync-status {
  margin: -0.9rem 0 1.2rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-dim);
}
.sync-status.ok { color: var(--success); }
.sync-status.err { color: var(--danger); }

/* ---- urgent flag (ธงเตือนคำร้องด่วน) ---- */
.urgent-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: linear-gradient(135deg, #ff5a5f, #d31f28);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.72rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 10px -2px rgba(211, 31, 40, 0.6);
  animation: urgentPulse 1.7s ease-in-out infinite;
}
.urgent-flag svg { width: 15px; height: 15px; flex: 0 0 auto; }

@keyframes urgentPulse {
  0%, 100% { box-shadow: 0 3px 10px -2px rgba(211, 31, 40, 0.5); }
  50% { box-shadow: 0 3px 16px 0 rgba(211, 31, 40, 0.85); }
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.kpi-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(26, 32, 51, 0.18);
  animation: cardRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -16px rgba(26, 32, 51, 0.24);
}

.kpi-card-top { display: flex; margin-bottom: 0.7rem; }

.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
}

.kpi-icon svg { width: 19px; height: 19px; }

.kpi-grid .kpi-card:nth-child(1) { animation-delay: 0.02s; }
.kpi-grid .kpi-card:nth-child(2) { animation-delay: 0.08s; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: 0.14s; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: 0.2s; }

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

.kpi-value {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
}

.kpi-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 0.55rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(26,32,51,0.06);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 1rem;
}

th, td {
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0.9rem;
  text-align: left;
}

th {
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--surface-2);
  position: sticky;
  top: 0;
}

td.n { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.zero-dash { color: var(--border-strong); }   /* ช่องค่า 0 = "-" จาง ให้ตัวเลขจริงเด่น */

/* ===== M6: หน้าคลัง — เทรนด์การไหล + tag ของตาย + ชื่อที่ระบบจำ ===== */
.trend-up { color: #1f9d55; font-weight: 600; }
.trend-down { color: var(--danger); font-weight: 600; }
.trend-flat { color: var(--muted-2); }
.dead-tag { font-size: 0.78em; color: var(--muted-2); border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 0.35em; margin-left: 0.3em; }
.unknown-tag { font-size: 0.78em; color: var(--muted-2); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 0 0.35em; margin-left: 0.3em; }
.coverage-bar { margin: 0.6rem 0; padding: 0.55rem 0.8rem; border-radius: 8px; font-size: 0.92em; line-height: 1.6; }
.coverage-bar.ok { background: var(--ok-bg, #eaf7ef); color: var(--ok-fg, #1c6b3a); }
.coverage-bar.warn { background: var(--warn-bg, #fdf3e3); color: var(--warn-fg, #7a4b06); }
.coverage-bar .linklike { background: none; border: 0; padding: 0; margin-left: 0.4em; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.coverage-codes { margin-top: 0.4rem; }
.coverage-codes.hidden { display: none; }
.alias-chip { display: inline-block; font-size: 0.82em; background: var(--surface-2); border-radius: 4px; padding: 0.05em 0.4em; margin: 1px; color: var(--muted-2); }
/* ตารางไขว้: เส้นแบ่งสีจางระหว่างคอลัมน์ (สาขา) ให้กวาดสายตาแยกคอลัมน์ง่าย */
.crosstab-table th, .crosstab-table td { border-left: 1px solid var(--border); }
.crosstab-table th:first-child, .crosstab-table td:first-child { border-left: none; }

/* ===== M7 drill-down ===== */
/* filter chips */
.filter-chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0 0 1rem; align-items:center; }
.filter-chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.6rem; background:var(--accent-soft); color:var(--accent); border:1px solid rgba(86,79,224,0.3); border-radius:999px; font-size:0.92rem; }
.filter-chip .chip-x { background:none; border:none; color:inherit; padding:0 0.1rem; font-size:0.85rem; cursor:pointer; line-height:1; }
.chip-clear-all { background:none; border:none; color:var(--muted-2); text-decoration:underline; font-size:0.9rem; padding:0.2rem; cursor:pointer; }
/* drillable elements */
.drillable { cursor:pointer; }
g.drillable:hover .chart-fill { filter:brightness(1.1); }
td.drillable:hover, th.drillable:hover { background:var(--accent-soft); }
.pie-slice.drillable { cursor:pointer; }
.pie-slice.drillable:hover { opacity:0.82; }
.see-ic { font-size:12px; fill:var(--accent); font-family:var(--font); font-weight:700; }
.see-hit { fill:transparent; }
g.see-list { cursor:pointer; }
g.see-list:hover .see-ic { fill:var(--accent-2); }
.see-list-btn { background:none; border:none; color:var(--accent); font-size:0.85rem; cursor:pointer; margin-left:auto; padding:0 0.2rem; font-weight:700; white-space:nowrap; }
.see-list-btn:hover { color:var(--accent-2); }
.kpi-card.drillable { position:relative; }
.kpi-see { position:absolute; top:0.5rem; right:0.6rem; }
.pie-legend-row.drillable { display:flex; align-items:center; gap:0.3rem; }
/* drill list modal (ต่ำกว่า drawer 110 → detail drawer สไลด์ทับได้) */
.drill-modal { position:fixed; inset:0; z-index:100; background:rgba(23,30,51,0.4); display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; transition:opacity 0.2s ease; }
.drill-modal.open { opacity:1; }
.drill-modal[hidden] { display:none; }
.drill-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); width:min(780px,100%); max-height:85vh; display:flex; flex-direction:column; box-shadow:0 24px 60px -18px rgba(23,30,51,0.5); overflow:hidden; }
.drill-head { display:flex; align-items:center; gap:0.6rem; padding:1rem 1.3rem; border-bottom:1px solid var(--border); }
.drill-title { font-weight:700; font-size:1.05rem; }
.drill-head .dr-close { margin-left:auto; }
.drill-list-body { overflow:auto; padding:1rem 1.3rem; }

/* ===== M7.2 Dashboard ===== */
.dash-hero { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:0 0 1.1rem; }
.dash-hero-card { position:relative; padding:1.3rem 1.4rem; border-radius:var(--radius-lg); color:#fff; overflow:hidden; box-shadow:0 14px 30px -14px rgba(23,30,51,0.45); }
.dash-hero-card.drillable { cursor:pointer; transition:transform 0.15s ease, box-shadow 0.15s ease; }
.dash-hero-card.drillable:hover { transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(23,30,51,0.55); }
.dash-hero-card::after { content:""; position:absolute; right:-32px; top:-32px; width:120px; height:120px; border-radius:50%; background:rgba(255,255,255,0.12); pointer-events:none; }
.dash-hero-card.h-a { background:linear-gradient(135deg,#564fe0,#7a63e8); }
.dash-hero-card.h-b { background:linear-gradient(135deg,#0f9d63,#0f8fa8); }
.dash-hero-card.h-c { background:linear-gradient(135deg,#c8890b,#e0a422); }
.dash-hero-card.h-d { background:linear-gradient(135deg,#0f8fa8,#34d1e8); }
.dash-hero-ic { display:inline-flex; width:26px; height:26px; opacity:0.92; position:relative; z-index:1; }
.dash-hero-ic svg { width:26px; height:26px; }
.dash-hero-val { font-size:2rem; font-weight:800; line-height:1.1; margin-top:0.4rem; letter-spacing:-0.02em; position:relative; z-index:1; }
.dash-hero-lbl { font-size:1rem; font-weight:600; opacity:0.96; margin-top:0.15rem; position:relative; z-index:1; }
.dash-hero-sub { font-size:0.85rem; opacity:0.82; margin-top:0.4rem; position:relative; z-index:1; }
.dash-highlights { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0.8rem; margin:0 0 1.4rem; }
.dash-hi { display:flex; align-items:center; gap:0.75rem; padding:0.85rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); }
.dash-hi.drillable { cursor:pointer; transition:border-color 0.15s ease, transform 0.12s ease; }
.dash-hi.drillable:hover { border-color:var(--accent); transform:translateY(-1px); }
.dash-hi-ic { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:var(--accent-soft); color:var(--accent); flex:0 0 auto; }
.dash-hi-ic svg { width:20px; height:20px; }
.dash-hi-txt { min-width:0; }
.dash-hi-val { font-weight:800; font-size:1.05rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-hi-lbl { font-size:0.85rem; color:var(--muted-2); margin-top:0.1rem; }

/* M7.3: ปุ่ม export ต่อ panel */
.panel-head-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; margin:0 0 1rem; }
.panel-head-row h3 { margin:0; }
.panel-export { font-size:0.8rem; font-weight:700; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(86,79,224,0.28); border-radius:999px; padding:0.25rem 0.65rem; cursor:pointer; white-space:nowrap; }
.panel-export:hover { background:var(--accent); color:#fff; border-color:transparent; }

td.item-name {
  font-weight: 700;
  background: linear-gradient(100deg, var(--text), var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

tbody tr:hover { background: var(--surface-2); }

.empty {
  color: var(--muted-2);
  text-align: center;
  padding: 1.5rem;
}

.error { color: var(--danger); }

/* ---- สถิติ toolbar ---- */
.stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  box-shadow: 0 8px 24px -18px rgba(26, 32, 51, 0.16);
}

.stats-toolbar label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--muted-2);
}

.stats-toolbar select {
  font: inherit;
  padding: 0.4rem 0.6rem;
  width: auto;
  min-width: 130px;
}

.toggle-group {
  display: flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem;
}

.toggle-btn {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 0.4rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dim);
}

.toggle-btn:hover { border-color: var(--border); background: #ffffff; }

.toggle-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  font-weight: 600;
  border-color: transparent;
  box-shadow: 0 3px 10px -3px rgba(86, 79, 224, 0.5);
}

/* ปุ่มที่เลือกอยู่ (nav tab / toggle) ตอน hover ต้องคง gradient + ตัวอักษรขาว
   กัน global `button:hover:not(:disabled)` (spec 0,2,1 > .active 0,2,0) ทับพื้นเป็นสีอ่อน → ขาวบนอ่อน มองไม่เห็น
   spec (0,3,0) ชนะทั้ง global hover และ .toggle-btn:hover · brightness = feedback เบา ๆ ให้ไม่รู้สึกปุ่มตาย */
.nav-btn.active:hover,
.toggle-btn.active:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  border-color: transparent;
  filter: brightness(1.06);
}

/* ---- ช่วงวันที่ (stats + dashboard) ---- */
/* white-space: nowrap กัน "ช่วงวันที่" หด-ตกบรรทัดเมื่อ date input กินพื้นที่ · flex-wrap ให้ input ตัวที่ 2
   ห่อลงบรรทัดใหม่บนจอแคบแทน (ข้อความ label ไม่มีวันแตก) · input แคบลงจาก ~166px default */
.date-range { gap: 0.4rem 0.5rem; white-space: nowrap; flex-wrap: wrap; }
.date-range input[type="date"] {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  color-scheme: light;
  width: 140px;
  flex: 0 0 auto;
}
.date-range-sep { color: var(--muted-2); }

/* ช่องแก้วันที่จ่าย (drawer ใบ issued) */
.dr-issued-edit { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.dr-issued-edit input[type="date"] {
  font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text); color-scheme: light;
}
.btn-save-issued { padding: 0.34rem 0.7rem; font-size: 0.86rem; }
.period-chip .period-anchor {
  font-size: 0.82rem;
  color: var(--muted-2);
  background: rgba(0,0,0,0.05);
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
}
.dash-chips { margin-top: 0.25rem; }
.payout-hint {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  background: var(--accent-soft);
  border: 1px solid rgba(86,79,224,0.22);
  border-radius: 10px;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
}

/* ---- สถิติ panels ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.stat-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(26, 32, 51, 0.16);
  animation: cardRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -16px rgba(26, 32, 51, 0.22);
}

.stats-grid .stat-panel:nth-child(1) { animation-delay: 0.05s; }
.stats-grid .stat-panel:nth-child(2) { animation-delay: 0.1s; }
.stats-grid .stat-panel:nth-child(3) { animation-delay: 0.15s; }
.stats-grid .stat-panel:nth-child(4) { animation-delay: 0.2s; }
.stats-grid .stat-panel:nth-child(5) { animation-delay: 0.25s; }

.stat-panel h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(26,32,51,0.07);
}

.panel-ic { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); }

/* M4: บรรทัดสรุปใต้กราฟ (อัตราจ่าย/ปฏิเสธ + lead time) */
.panel-sub {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text);
}
.panel-sub .muted { font-size: 0.82rem; }

.stat-panel-wide { grid-column: 1 / -1; }

@media (max-width: 780px) {
  .stats-grid { grid-template-columns: 1fr; }
}

.table-scroll { overflow-x: auto; border-radius: var(--radius-sm); }
/* list-scroll: เลื่อนเฉพาะรายการ (หัวตารางค้างบน) — ส่วนหัว/ตัวกรอง/ค้นหา อยู่นิ่ง */
.list-scroll { overflow-y: auto; max-height: calc(100vh - 340px); min-height: 180px; }
/* ⚠️ .inbox-table มี overflow:hidden (border-radius) ซึ่งทำให้ sticky th พัง — override เป็น visible ในบริบท list-scroll */
.list-scroll .inbox-table { overflow: visible; }
.list-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }

/* ---- ช่องค้นหา (inbox + รอยืนยันตามรอบ) ---- */
.search-box { position: relative; margin: 0 0 1rem; }
.search-box .search-ic { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted-2); pointer-events: none; }
.search-input { width: 100%; padding: 0.6rem 0.9rem 0.6rem 2.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 1rem; }
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* ---- ค้นหาแบบเลือกช่อง: dropdown นั่งในกล่องเดียวกับช่องพิมพ์ ให้อ่านเป็นประโยคเดียว "ค้นหา [ผู้สั่ง]" ---- */
.search-box.has-field { display: flex; align-items: stretch; gap: 0; }
.search-box.has-field .search-input {
  flex: 1 1 auto; min-width: 0;
  border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none;
}
.search-field {
  flex: 0 0 auto; width: auto; min-width: 8.5rem;
  padding: 0.6rem 0.7rem; font-size: 0.92rem;
  border: 1px solid var(--border); border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2); color: var(--text-dim); cursor: pointer;
}
.search-field:hover { background: var(--surface-3); }
.search-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
/* ช่องพิมพ์โฟกัสอยู่ = ทั้งกล่องดูเป็นก้อนเดียวที่ active ไม่ใช่สองชิ้นแยกกัน */
.search-box.has-field:focus-within .search-field { border-color: var(--accent); }
@media (max-width: 560px) {
  .search-box.has-field { flex-wrap: wrap; }
  .search-box.has-field .search-input { border-right: 1px solid var(--border); border-radius: var(--radius-sm); }
  .search-field { flex: 1 0 100%; width: 100%; margin-top: 6px; border-radius: var(--radius-sm); }
}
/* กล่องค้นหาในหน้าตั้งค่าอยู่ในการ์ด ไม่ต้องเว้นล่างเท่าหน้าเต็ม */
.set-card .search-box { margin-bottom: 0.6rem; }
.set-found { margin: 0 0 8px; font-size: 0.83rem; color: var(--muted-2); }

/* ---- SVG charts ---- */
.chart { width: 100%; height: auto; max-width: 100%; }

.chart-lbl { font-size: 16.5px; fill: var(--text); font-family: var(--font); font-weight: 700; }
.chart-val { font-size: 16.5px; fill: var(--text-dim); font-family: var(--mono); font-weight: 600; }
.chart-track { fill: var(--surface-3); }

.chart-fill {
  transform-origin: left center;
  animation: growBar 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes growBar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.pie-slice {
  transform-origin: 90px 90px;
  animation: sliceIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sliceIn {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.pie-total-val, .pie-total-lbl {
  animation: fadeIn 0.6s ease 0.4s both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.pie-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.pie { width: 168px; height: 168px; flex: 0 0 auto; }

.pie-total-val { font-family: var(--mono); font-weight: 700; fill: var(--text); }
.pie-total-lbl { fill: var(--muted-2); }

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1.02rem;
  color: var(--text-dim);
  flex: 1 1 160px;
}

.pie-legend-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 3px rgba(26,32,51,0.06);
}
.pie-legend-row strong { color: var(--text); font-family: var(--mono); font-weight: 600; }

.pie-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  flex: 0 0 auto;
}

/* ---- inbox ---- */
.inbox-count {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 600;
  margin: -0.6rem 0 1.25rem;
}

.inbox-count::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: dotPulse 2.2s ease-in-out infinite;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: min(640px, calc(100vh - 430px));
  min-height: 260px;
  overflow-y: auto;
  padding-right: 0.4rem;
  margin-right: -0.4rem;
}

.inbox-row {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.1rem 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: space-between;
  box-shadow: 0 10px 26px -20px rgba(26, 32, 51, 0.2);
  animation: cardRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.inbox-row:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(26, 32, 51, 0.22);
}

.inbox-list .inbox-row:nth-child(1) { animation-delay: 0.02s; }
.inbox-list .inbox-row:nth-child(2) { animation-delay: 0.07s; }
.inbox-list .inbox-row:nth-child(3) { animation-delay: 0.12s; }
.inbox-list .inbox-row:nth-child(4) { animation-delay: 0.17s; }
.inbox-list .inbox-row:nth-child(5) { animation-delay: 0.22s; }
.inbox-list .inbox-row:nth-child(6) { animation-delay: 0.27s; }
.inbox-list .inbox-row:nth-child(n+7) { animation-delay: 0.3s; }

.inbox-row.urgent {
  border-color: rgba(211, 31, 40, 0.42);
  background: linear-gradient(180deg, #ffffff, #fff5f5);
}

.inbox-row.urgent:hover { border-color: rgba(211, 31, 40, 0.6); }

.inbox-row-main { flex: 1 1 260px; min-width: 200px; }

.inbox-raw {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.inbox-raw-name {
  background: linear-gradient(100deg, var(--text) 30%, var(--accent) 55%, var(--accent-2) 68%, var(--text) 85%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rawTextSheen 6s ease-in-out infinite;
}

.inbox-qty {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(86, 79, 224, 0.25);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-family: var(--mono);
  white-space: nowrap;
}

@keyframes rawTextSheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.inbox-raw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 4px var(--accent-soft);
  animation: dotPulse 2.2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--accent-soft); }
  50% { transform: scale(1.25); box-shadow: 0 0 0 7px transparent; }
}

.inbox-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.inbox-row-actions {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 240px;
}

.inbox-suggestions { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.36rem 0.8rem;
  font-size: 0.98rem;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff, var(--surface-3));
  color: var(--text-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 5px rgba(26,32,51,0.08);
}

.meta-chip { color: var(--muted-2); }

.code-chip {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text-dim);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, #ffffff, var(--surface-3));
}

.branch-chip {
  color: #0f766e;
  font-weight: 600;
  border-color: rgba(15, 118, 110, 0.3);
  background: linear-gradient(120deg, rgba(15, 118, 110, 0.1), rgba(15, 143, 168, 0.1));
}

.requester-chip {
  color: #a6136b;
  font-weight: 600;
  border-color: rgba(166, 19, 107, 0.28);
  background: linear-gradient(120deg, rgba(166, 19, 107, 0.1), rgba(167, 139, 250, 0.12));
}

.category-chip {
  position: relative;
  color: var(--accent);
  font-weight: 600;
  border-color: rgba(86, 79, 224, 0.35);
  background: linear-gradient(120deg, rgba(86, 79, 224, 0.12), rgba(15, 143, 168, 0.12) 60%, rgba(86, 79, 224, 0.12));
  background-size: 220% 100%;
  overflow: hidden;
  animation: categoryShimmer 5s ease-in-out infinite;
}

@keyframes categoryShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.category-ic {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

.suggestion-chip {
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 6px rgba(26,32,51,0.09);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.suggestion-chip:hover {
  border-color: var(--accent-2);
  background: var(--accent-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 3px var(--accent-soft), 0 3px 8px rgba(26,32,51,0.1);
  transform: translateY(-1px);
}

.suggestion-chip.learned {
  border-color: rgba(161, 92, 0, 0.4);
  color: var(--gold);
  background: rgba(161, 92, 0, 0.08);
}

.suggestion-chip.learned:hover {
  background: rgba(161, 92, 0, 0.16);
  box-shadow: 0 0 0 3px rgba(161, 92, 0, 0.16);
}

.chip-score {
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  font-weight: 700;
  opacity: 1;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: rgba(86, 79, 224, 0.1);
  color: var(--accent);
}

.empty-inline { color: var(--muted-2); font-size: 1rem; font-weight: 500; }

.inbox-manual select { font-size: 1rem; }

.status-filter { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 1.3rem; }
.status-filter .toggle-btn { border: 1px solid var(--border); background: var(--surface-2); }
.status-filter .toggle-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; box-shadow: 0 3px 10px -3px rgba(86,79,224,0.5); }

.request-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 0.9rem; box-shadow: 0 10px 26px -20px rgba(26,32,51,0.2); animation: cardRise 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.request-card.urgent { border-color: rgba(211,31,40,0.42); background: linear-gradient(180deg,#fff,#fff5f5); }

.card-head { display:flex; flex-wrap:wrap; align-items:center; gap:0.45rem; margin-bottom:0.85rem; }
.card-items { display:flex; flex-direction:column; gap:0.6rem; }
.req-item { border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.7rem 0.85rem; background:var(--surface-2); }
.req-item.matched { display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.matched-check { color:var(--success); font-weight:800; }
.matched-name { font-weight:700; color:var(--text); }
.req-item-raw { color:var(--muted-2); font-size:0.92rem; }
.req-item.matched .cat-combo { flex: 1 1 220px; margin-left: auto; max-width: 320px; }
.req-item-head { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.5rem; }
.req-item-name { font-weight:700; font-size:1.1rem; }
.req-item-qty { font-family:var(--mono); font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:0.15rem 0.6rem; font-size:0.95rem; white-space:nowrap; }

.status-badge { font-size:0.9rem; font-weight:800; padding:0.22rem 0.7rem; border-radius:999px; margin-left:auto; }
.badge-pending { color:var(--accent); background:var(--accent-soft); border:1px solid rgba(86,79,224,0.3); }
.badge-issued { color:#0f7a4d; background:rgba(15,157,99,0.12); border:1px solid rgba(15,157,99,0.35); }
.badge-rejected { color:var(--danger); background:rgba(201,42,42,0.1); border:1px solid rgba(201,42,42,0.32); }
.badge-queued { color:#8a5a00; background:rgba(213,150,0,0.14); border:1px solid rgba(213,150,0,0.42); }

.status-note { margin:0.7rem 0 0; font-size:1rem; color:var(--text-dim); }
.card-actions { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:0.95rem; }

/* ---- inbox list (ตารางแถวกระชับ คลิกเปิด drawer) ---- */
.inbox-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
/* หัวคอลัมน์: ชิดซ้ายตรงกับเนื้อ td (default เบราว์เซอร์คือ center = เหลื่อม) + ห้ามตกบรรทัด + เลขชิดขวาตามเนื้อ */
.inbox-table th { font-size:0.9rem; padding:0.65rem 0.9rem; text-align:left; white-space:nowrap; color:var(--muted-2); font-weight:700; }
.inbox-table th.n { text-align:right; }
.inbox-table td { padding:0.7rem 0.9rem; font-size:1rem; border-bottom:1px solid var(--border); }
.inbox-table tbody tr:last-child td { border-bottom:none; }
.inbox-row-tr { cursor:pointer; transition:background 0.15s ease; }
.inbox-row-tr:hover { background:var(--surface-2); }
.inbox-row-tr.urgent { background:linear-gradient(90deg,#fff5f5,transparent 60%); }
.inbox-row-tr.urgent:hover { background:linear-gradient(90deg,#ffecec,var(--surface-2) 60%); }
.col-urgent { width:26px; text-align:center; padding-left:0.6rem !important; padding-right:0 !important; }
.urgent-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:linear-gradient(135deg,#ff5a5f,#d31f28); box-shadow:0 0 0 3px rgba(211,31,40,0.18); }
.col-code { font-family:var(--mono); font-weight:700; color:var(--text-dim); white-space:nowrap; }
.col-dept { color:var(--text-dim); }
.inbox-requester-line { font-weight:600; }
/* ชื่อของ: รายการละบรรทัด — ตัดบรรทัดเดียวทำให้ของชิ้นที่ 2 หายทั้งชิ้น (ชื่อจากฟอร์มยาวกว่าคอลัมน์แทบทุกใบ) */
.inbox-items { list-style:none; margin:3px 0 0; padding:0; font-size:0.82rem; color:var(--muted-2); max-width:340px; }
.inbox-items li { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-items li + li { margin-top:1px; }
.inbox-items-more { color:var(--muted); font-style:italic; }
.items-count-chip { display:inline-block; margin-left:0.35rem; padding:0.05rem 0.4rem; border-radius:999px;
  background:var(--surface-3); color:var(--muted-2); font-size:0.72rem; font-weight:600; white-space:nowrap; vertical-align:middle; }
.col-match { font-family:var(--mono); font-weight:700; text-align:center; white-space:nowrap; color:var(--success); }
.col-match.partial { color:var(--gold); }
.col-date { font-family:var(--mono); font-size:0.9rem; color:var(--muted-2); white-space:nowrap; }

/* ---- drawer รายละเอียด (สไลด์จากขวา) ---- */
.drawer-overlay { position:fixed; inset:0; z-index:105; background:rgba(20,25,40,0.4); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity 0.28s ease; }
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.inbox-drawer { position:fixed; top:0; right:0; height:100%; width:min(480px,94vw); z-index:110; background:var(--surface); border-left:1px solid var(--border); box-shadow:-18px 0 50px -24px rgba(26,32,51,0.4); transform:translateX(100%); transition:transform 0.28s cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column; overflow:hidden; }
.inbox-drawer.open { transform:translateX(0); }
.dr-head { display:flex; align-items:center; gap:0.75rem; padding:1.15rem 1.35rem; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#fff,var(--surface-2)); }
.dr-title { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; font-family:var(--mono); font-weight:800; font-size:1.2rem; color:var(--text); }
.dr-close { margin-left:auto; flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; }
.dr-close:hover { background:var(--surface-3); }
.dr-body { flex:1; overflow-y:auto; padding:1.2rem 1.35rem; }
.dr-row { display:flex; justify-content:space-between; gap:1rem; padding:0.55rem 0; border-bottom:1px solid var(--border); }
.dr-label { font-size:0.95rem; color:var(--muted-2); flex:0 0 auto; }
.dr-val { font-size:1rem; font-weight:600; text-align:right; color:var(--text); }
.dr-section-label { margin:1.3rem 0 0.7rem; font-size:0.95rem; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.03em; }
.dr-items { display:flex; flex-direction:column; gap:0.7rem; }
.dr-actions { display:flex; flex-wrap:wrap; gap:0.6rem; padding:1.05rem 1.35rem; border-top:1px solid var(--border); background:var(--surface-2); }

/* ---- sortable table headers ---- */
.inbox-table th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.inbox-table th.sortable:hover { color:var(--accent); }
.inbox-table th.sorted { color:var(--accent); }
.sort-arrow { font-size:0.8em; }

/* ---- drawer edit mode ---- */
.btn-edit { background:var(--surface-2); color:var(--accent); border:1px solid var(--border-strong); font-weight:700; font-size:1rem; padding:0.55rem 1.15rem; border-radius:var(--radius-sm); }
.btn-edit:hover { background:var(--accent-soft); }
.dr-field { display:flex; flex-direction:column; gap:0.3rem; margin-bottom:0.85rem; font-size:0.95rem; color:var(--text-dim); }
.dr-field input, .dr-field select, .dr-field textarea { font:inherit; }
.ed-items { display:flex; flex-direction:column; gap:0.5rem; }
.ed-item { display:grid; grid-template-columns:1fr 68px 66px 84px 34px; gap:0.4rem; align-items:center; }
.ed-item input { padding:0.42rem 0.5rem; font-size:0.95rem; min-width:0; }
.ed-del { flex:0 0 auto; width:34px; height:34px; padding:0; border-radius:8px; border:1px solid rgba(201,42,42,0.4); background:#fff; color:var(--danger); font-size:0.95rem; }
.ed-del:hover { background:rgba(201,42,42,0.08); }
.btn-add-item { margin-top:0.7rem; width:100%; background:var(--surface-2); color:var(--text-dim); border:1px dashed var(--border-strong); font-weight:600; padding:0.55rem 1rem; border-radius:var(--radius-sm); }
.btn-add-item:hover { background:var(--surface-3); }

.btn-issue, .btn-reject, .btn-revert { font-weight:700; font-size:1rem; padding:0.55rem 1.15rem; border-radius:var(--radius-sm); border:1px solid transparent; }
.btn-issue { background:linear-gradient(135deg,#0f9d63,#0f8fa8); color:#fff; }
.btn-issue:hover { filter:brightness(1.08); }
.btn-reject { background:#fff; color:var(--danger); border-color:rgba(201,42,42,0.4); }
.btn-reject:hover { background:rgba(201,42,42,0.08); }
.btn-revert { background:var(--surface-2); color:var(--text-dim); border-color:var(--border); }
.btn-revert:hover { background:var(--surface-3); }
/* M5: ส่งไปรอตามรอบ (indigo) — แยกจากจ่ายทันที(เขียว) · .suggested = ปุ่มแนะนำตาม urgency */
.btn-queue { font-weight:700; font-size:1rem; padding:0.55rem 1.15rem; border-radius:var(--radius-sm); border:1px solid transparent; background:linear-gradient(135deg,var(--accent),#7a63e8); color:#fff; }
.btn-queue:hover { filter:brightness(1.08); }
.btn-issue.suggested, .btn-queue.suggested { box-shadow:0 0 0 3px var(--accent-soft), 0 4px 14px -6px rgba(86,79,224,0.5); }

/* M8: chip/warning ข้อมูลไม่ครบ (จาก backend incomplete[]) */
.incomplete-chip { display:inline-block; font-size:.72em; font-weight:600; color:#b26b00; background:#fff3e0; border:1px solid #ffcc80; border-radius:4px; padding:0 .35em; margin-left:.25em; vertical-align:middle; white-space:nowrap; }
.dr-incomplete { background:#fff3e0; border:1px solid #ffcc80; color:#8a5200; border-radius:6px; padding:.4rem .6rem; margin:.2rem 0 .5rem; font-size:.9em; }

/* M5: รอยืนยันตามรอบ view */
.payout-table .col-check { width:34px; text-align:center; padding-left:0.7rem !important; }
.payout-check, #payout-check-all { width:17px; height:17px; cursor:pointer; accent-color:var(--accent); }
.payout-row-tr.urgent { background:linear-gradient(90deg,#fff5f5,transparent 60%); }
.payout-actionbar { position:sticky; bottom:14px; display:flex; gap:0.7rem; align-items:center; margin-top:1rem; padding:0.75rem 0.9rem; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:0 10px 30px -12px rgba(23,30,51,0.35); }
.payout-label-input { flex:1; min-width:0; }
.payout-date-field { display:flex; align-items:center; gap:0.4rem; white-space:nowrap; font-size:0.9rem; color:var(--text-dim); }
.payout-date-field input[type=date] { font:inherit; }
.payout-actionbar .btn-issue { white-space:nowrap; }
.payout-items { max-width:24rem; }
.payout-items .muted { font-size:0.85em; }
.payout-history-wrap { margin-top:2rem; }
.payout-history-title { font-size:1.05rem; margin:0 0 0.7rem; color:var(--text-dim); }
.payout-batch-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.payout-batch-item { padding:0.75rem 0.95rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer; transition:border-color 0.15s ease; }
.payout-batch-item:hover { border-color:var(--border-strong); }
.pb-main { display:flex; align-items:center; gap:0.7rem; }
.pb-label { font-weight:700; }
.pb-count { margin-left:auto; font-size:0.9rem; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:0.16rem 0.6rem; border-radius:999px; }
.pb-meta { font-size:0.88rem; color:var(--muted-2); margin-top:0.3rem; }
.pb-detail { margin-top:0.6rem; border-top:1px dashed var(--border); padding-top:0.5rem; display:flex; flex-direction:column; gap:0.25rem; }
.pb-req { font-size:0.92rem; color:var(--text-dim); display:flex; flex-direction:column; gap:0.1rem; }
.pb-req-head { font-family:var(--mono); }
.pb-req-items { font-size:0.86rem; }

.reject-modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(20,25,40,0.45); backdrop-filter:blur(3px); padding:1.5rem; }
.reject-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.6rem; width:min(440px,100%); box-shadow:0 24px 50px -18px rgba(26,32,51,0.35); }
.reject-box h3 { margin:0 0 0.9rem; font-size:1.2rem; }
.reject-box textarea { width:100%; font:inherit; padding:0.6rem 0.75rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); resize:vertical; }
.reject-box input[type=date] { width:100%; font:inherit; padding:0.55rem 0.7rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); }
.reject-actions { display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1rem; }
.btn-cancel { background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border); font-weight:600; padding:0.55rem 1.1rem; border-radius:var(--radius-sm); }

/* ---- ส่งออก ---- */
.export-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 520px;
  box-shadow: 0 16px 40px -20px rgba(26, 32, 51, 0.18);
}

.export-hint { color: var(--muted-2); font-size: 1.05rem; margin: 0 0 1.25rem; }

.export-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

.export-actions button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  padding: 0.75rem 1.4rem;
}

.export-actions button:hover { filter: brightness(1.08); }
.export-actions button:disabled { opacity: 0.55; cursor: default; filter: none; }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 0.75rem 1rem; }
  /* จอแคบ: nav เต็มบรรทัด เลื่อนแนวนอนได้ (ปุ่มความกว้างตามเนื้อหา ไม่บีบจนตัด "รอยืนยันตามรอบ") */
  #nav { order: 3; flex: 1 1 100%; width: 100%; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  #nav::-webkit-scrollbar { display: none; }
  .nav-btn { flex: 0 0 auto; text-align: center; }
  #view { padding: 1.5rem 1rem 2.5rem; }
  .inbox-row { flex-direction: column; justify-content: flex-start; }
  .inbox-row-main, .inbox-row-actions { flex: 0 0 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- M3: หน้าตั้งค่า (CRUD master + users) --- */
.settings-wrap { max-width: 760px; margin: 0 auto; }
.settings-wrap > h2 { margin: 0 0 4px; }
.set-note { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 18px; }
.muted { color: var(--text-dim); font-size: 0.9rem; font-weight: 400; }
.set-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px;
}
.set-card h3 { margin: 0 0 12px; font-size: 1.05rem; }
.set-add { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.set-input {
  flex: 1 1 160px; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.98rem; background: var(--surface); color: var(--text);
}
.set-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.set-add-btn, .user-add-btn { background: var(--accent); color: #fff; border-color: var(--accent); flex: 0 0 auto; }
.set-add-btn:hover, .user-add-btn:hover { filter: brightness(1.06); background: var(--accent); border-color: var(--accent); }
.set-list { list-style: none; margin: 0; padding: 0; }
.set-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--border);
}
.set-list li:first-child { border-top: none; }
.set-name { min-width: 0; overflow-wrap: anywhere; }
.set-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.set-row-actions button { padding: 5px 10px; font-size: 0.86rem; }
.set-del, .user-del { color: var(--danger); }
.set-del:hover, .user-del:hover { border-color: var(--danger); }
.set-body { max-height: 340px; overflow-y: auto; }

/* --- M10: รวมชื่อผู้สั่ง ---
   การ์ดนี้เป็นหน้า "ตัดสินใจ" ไม่ใช่ตาราง master ธรรมดา จึงปลดเพดานเลื่อนของ .set-body ทิ้ง —
   ของเดิมเป็นกล่องเลื่อน 340px ที่ข้างในมีกล่องเลื่อนอีกชั้น (รายชื่อ 240px) ⇒ ปุ่มยืนยันตกใต้ขอบที่มองไม่เห็น
   ตอนนี้เหลือที่เลื่อนได้จุดเดียวคือรายชื่อทั้งหมด ส่วนที่ต้องตัดสินอยู่บนสุดเสมอ */
[data-seg="requesters"] .set-body { max-height: none; overflow: visible; }
.rq-block + .rq-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.rq-h { margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rq-badge {
  background: var(--gold); color: #fff; font-size: 0.76rem; font-weight: 700;
  min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
}
.rq-why, .rq-src { font-size: 0.78rem; color: var(--muted-2); }
.rq-src { padding: 1px 7px; border-radius: 999px; background: var(--surface-3); white-space: nowrap; }
.rq-empty { color: var(--text-dim); font-size: 0.92rem; margin: 0; }
.rq-reject { color: var(--danger); }
.rq-reject:hover { border-color: var(--danger); }

/* ---- การ์ดตัดสิน (คู่ที่ระบบเสนอ) ---- */
.rq-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rq-card {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); padding: 12px 14px 13px; box-shadow: var(--shadow-1);
}
.rq-card-head { margin-bottom: 8px; }
.rq-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.rq-side {
  min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.rq-side-name { font-weight: 700; overflow-wrap: anywhere; }
.rq-side-meta {
  margin-top: 3px; font-size: 0.82rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.rq-side-mem { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--accent); overflow-wrap: anywhere; }
.rq-vs { color: var(--text-dim); font-size: 1.1rem; }
.rq-branches { display: inline-flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.rq-branch {
  font-size: 0.76rem; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--muted-2); white-space: nowrap;
}
.rq-canon-row {
  margin-top: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 10px; border-top: 1px dashed var(--border);
}
.rq-canon-label { font-size: 0.85rem; color: var(--text-dim); }
.rq-canon-opts { display: flex; flex-wrap: wrap; gap: 6px; }
/* radio ตัวจริงซ่อนไว้แต่ยังโฟกัสได้ — ป้ายคือสิ่งที่คนเห็นและกด */
.rq-canon-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rq-canon-opt {
  cursor: pointer; font-size: 0.86rem; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-dim);
  transition: background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out),
              border-color var(--dur-state) var(--ease-out);
}
.rq-canon-opt:hover { border-color: var(--accent); }
.rq-canon-opt.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.rq-canon-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.rq-card-actions { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 8px; }
.rq-card-actions .primary, .rq-bar .primary {
  background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 700;
}
.rq-card-actions .primary:hover, .rq-bar .primary:hover {
  filter: brightness(1.06); background: var(--accent); border-color: var(--accent);
}

/* ---- กลุ่มที่รวมไว้แล้ว: หนึ่งแถว = หนึ่งคน (ของเดิมหนึ่งแถว = หนึ่ง alias ⇒ คนหนึ่งคนกระจายหลายแถว) ---- */
.rq-groups { list-style: none; margin: 0; padding: 0; }
.rq-group { padding: 9px 2px; border-top: 1px solid var(--border); }
.rq-group:first-child { border-top: none; }
.rq-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.rq-group-name { font-weight: 700; overflow-wrap: anywhere; }
.rq-group-n { font-size: 0.85rem; color: var(--muted-2); }
.rq-group-mem { margin-top: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rq-group-lead { font-size: 0.8rem; color: var(--text-dim); }
.rq-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font-size: 0.85rem; max-width: 100%;
}
.rq-chip-name { overflow-wrap: anywhere; }
.rq-chip-n { font-size: 0.76rem; color: var(--muted-2); }
.rq-chip { padding: 2px 10px; }
.rq-edit-toggle { margin-left: auto; padding: 3px 12px; font-size: 0.83rem; }
.rq-group.editing {
  background: var(--surface-2); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 8px 0;
}
.rq-group.flash { animation: rqFlash 1.2s var(--ease-out); }
@keyframes rqFlash { from { background: var(--accent-soft); } to { background: var(--surface-2); } }
.rq-mem-list { list-style: none; margin: 8px 0 0; padding: 0; }
.rq-mem-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 7px 0; border-top: 1px solid var(--border);
}
.rq-mem-row:first-child { border-top: none; }
.rq-mem-row.main .rq-mem-name { font-weight: 700; }
.rq-mem-name { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.rq-mem-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.rq-mem-actions button { padding: 4px 10px; font-size: 0.83rem; }
.rq-mem-actions .rq-unmerge { color: var(--danger); }
.rq-mem-actions .rq-unmerge:hover { border-color: var(--danger); }
.rq-edit-note { margin: 9px 0 0; font-size: 0.8rem; color: var(--text-dim); }

/* ---- คู่ที่เคยบอกว่าคนละคน (ถอนคืนได้) ---- */
.rq-rejects li { justify-content: space-between; }
.rq-rej-pair { min-width: 0; overflow-wrap: anywhere; }
.rq-unreject { flex: 0 0 auto; padding: 4px 11px; font-size: 0.83rem; }

/* ---- ตัวกรอง ยังไม่ได้จัด / จัดแล้ว / ทั้งหมด ---- */
.rq-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.rq-filter { padding: 4px 12px; font-size: 0.85rem; }
.rq-filter-n { opacity: 0.75; font-size: 0.8rem; }
.rq-pick-done { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; padding: 8px 6px; }
.rq-entries li.done { background: var(--surface-2); }
.rq-goto { flex: 0 0 auto; padding: 4px 11px; font-size: 0.83rem; }

/* ---- รายชื่อทั้งหมด + ค้นหา ---- */
.rq-entries { max-height: 300px; overflow-y: auto; }
/* แถวรายชื่อวางแบบ block ไม่ใช่ flex — ชื่อยาวมี overflow-wrap:anywhere ซึ่งทำให้ min-content = 0
   พอกลายเป็น flex item ที่ min-width:0 มันจึงยุบเหลือกว้าง 0 แล้วห่อทีละตัวอักษร (แถวสูง 300px บนมือถือ) */
.rq-entries li { display: block; padding: 0; }
.rq-entries li.on { background: var(--accent-soft); }
.rq-none {
  padding: 14px 12px; color: var(--text-dim); font-size: 0.9rem; line-height: 1.9;
  background: var(--surface-2); border-radius: var(--radius-sm); text-align: center;
}
.rq-none b { display: block; color: var(--text); margin-bottom: 6px; }
.rq-none .rq-filter { margin: 0 3px; }
.rq-pick { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 8px 6px; }
/* กฎกลาง `input, select { width:100% }` กินช่องติ๊กด้วย — ปล่อยไว้ช่องติ๊กจะยืดเต็มแถวแล้วดันชื่อตกขอบ */
.rq-pick input[type="checkbox"] {
  flex: 0 0 auto; width: 16px; height: 16px; padding: 0; margin: 3px 0 0;
  border-radius: 4px; accent-color: var(--accent);
}
.rq-pick-body { min-width: 0; }
.rq-pick-name { display: block; overflow-wrap: anywhere; }
.rq-pick-meta {
  margin-top: 2px; font-size: 0.8rem; color: var(--muted-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
}
.rq-bar {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent); display: grid; gap: 8px;
}
.rq-bar-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rq-bar .rq-canon-opt { background: var(--surface); }

@media (max-width: 640px) {
  .rq-sides { grid-template-columns: 1fr; }
  .rq-vs { justify-self: center; }
  .rq-card-actions button { flex: 1 1 auto; }
}

/* --- M9: combobox ค้นหาคลัง (แทน select) --- */
.cat-combo { position: relative; margin-top: .3rem; }
.cat-search {
  width: 100%; padding: .35rem .5rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: .9em; font-family: var(--font); background: var(--surface); color: var(--text);
}
.cat-results {
  position: absolute; z-index: 5; left: 0; right: 0; margin-top: 2px; max-height: 240px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.cat-opt {
  display: block; width: 100%; text-align: left; padding: .4rem .55rem;
  background: none; border: none; cursor: pointer; font-size: .9em;
}
.cat-opt:hover { background: var(--surface-2); }
.cat-opt-unit { color: var(--muted-2); font-size: .85em; }
.cat-none { padding: .4rem .55rem; color: var(--muted-2); font-size: .85em; }
.cat-add {
  display: block; width: 100%; text-align: left; padding: .45rem .55rem;
  background: var(--accent-soft); border: none; border-top: 1px solid var(--border);
  cursor: pointer; font-size: .9em; font-weight: 600; color: var(--accent);
}
.cat-addform { padding: .5rem .55rem; display: flex; flex-direction: column; gap: .35rem; }
.cat-addform label { display: flex; flex-direction: column; font-size: .8em; color: var(--muted-2,#666); gap: 2px; }
.cat-addform input, .cat-addform select { padding: .3rem .45rem; border: 1px solid var(--border-strong,#ccc); border-radius: 5px; font-size: .95em; }
.caf-actions { display: flex; gap: .4rem; margin-top: .2rem; }
.caf-save { flex: 1; padding: .4rem; background: #1f9d55; color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
.caf-cancel { padding: .4rem .7rem; background: none; border: 1px solid var(--border-strong,#ccc); border-radius: 6px; cursor: pointer; }
/* ฟอร์มเพิ่มของ = in-flow (ดัน dr-body ให้ scroll ถึงปุ่มได้ ไม่โดนแถบ dr-actions บังบนจอเล็ก) แทน dropdown absolute */
.cat-results.inflow { position: static; max-height: none; overflow: visible; box-shadow: none; border: none; margin-top: .4rem; }

/* =====================================================================================
   INTERACTION LAYER — คำศัพท์เดียวกันทุกจุดที่กดได้
   พัก: แนบพื้น (shadow-1) · hover: ยกขึ้น 1px + เงาลึก · กด: จมลง + หด 2%
   ทุกอันมี :focus-visible เพราะคีย์บอร์ดต้องเห็นว่าตัวเองอยู่ไหน
   ไม่มี ripple / bounce / elastic — ปุ่มในเครื่องมือทำงานควรหายไปในงาน ไม่ใช่เรียกร้องความสนใจ
   ===================================================================================== */

/* ปุ่มผี (โปร่งใส) ไม่ควรมีเงา — ยกอย่างเดียว */
.nav-btn, .dr-close, .caf-cancel, .filter-chip .chip-x { box-shadow: none; }
.nav-btn:hover:not(:disabled), .nav-btn:active:not(:disabled) { box-shadow: none; }

.nav-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.nav-btn:active:not(:disabled) .nav-ic { transform: scale(1); }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ปุ่มหลักสีเข้ม: เงาสีของตัวเอง + ขอบบนสว่าง = อ่านเป็นผิวนูนรับแสง */
.btn-sync { box-shadow: var(--shadow-accent), var(--sheen); }
/* ต้อง re-assert gradient — global `button:hover:not(:disabled)` (spec 0,2,1) ทับ background ของ .btn-sync (0,1,0)
   เป็น surface อ่อน → ตัวอักษรขาวบนพื้นอ่อน อ่านไม่ออก (กับดักเดียวกับ .nav-btn.active ที่จดไว้ข้างบน) */
.btn-sync:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); background-size: 200% 200%; color: #fff; filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(86,79,224,0.62), var(--sheen); }
.btn-sync:active:not(:disabled) { transform: translateY(0) scale(0.978); box-shadow: 0 2px 8px -4px rgba(86,79,224,0.5), var(--sheen); }
.btn-sync:disabled { opacity: 0.6; cursor: default; filter: none; transform: none; box-shadow: var(--shadow-1); }

/* ปุ่มตัดสินใจในลิ้นชัก — 3 ปุ่มนี้คือหัวใจของระบบ เดิมมีแค่ hover ไม่มีแรงกดเลย */
.btn-issue, .btn-queue { box-shadow: var(--shadow-2), var(--sheen); }
.btn-issue:hover:not(:disabled), .btn-queue:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); box-shadow: var(--shadow-3), var(--sheen); }
.btn-issue:active:not(:disabled), .btn-queue:active:not(:disabled) { transform: translateY(0) scale(0.978); box-shadow: var(--shadow-1), var(--sheen); filter: brightness(0.98); }

.btn-reject { box-shadow: var(--shadow-1); }
.btn-reject:hover:not(:disabled) { background: rgba(201,42,42,0.08); border-color: rgba(201,42,42,0.55); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn-reject:active:not(:disabled) { transform: translateY(0) scale(0.978); box-shadow: var(--shadow-1); }

/* ปุ่มที่ระบบแนะนำ: วงแหวนนิ่ง ไม่กะพริบ — กะพริบคือการตะโกนใส่คนที่กำลังอ่าน */
.btn-issue.suggested, .btn-queue.suggested { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-3), var(--sheen); }

/* แถบกรองสถานะ (segmented) */
.toggle-btn:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.toggle-btn.active { box-shadow: var(--shadow-2), var(--sheen); }
.toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* แถวคำร้องที่คลิกได้ — แถวในตารางห้ามลอย (ทำให้ตารางเต้น) ใช้พื้นหลัง + จมแทน */
.inbox-row-tr {
  transition: background var(--dur-state) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.inbox-row-tr:hover { background: var(--surface-2); }
.inbox-row-tr:active { background: var(--surface-3); transform: scale(0.996); }
.inbox-row-tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* หัวตารางที่เรียงลำดับได้ = ปุ่ม ต้องรู้สึกเหมือนปุ่ม */
.inbox-table th.sortable { transition: color var(--dur-state) var(--ease-out); }
.inbox-table th.sortable:active { color: var(--accent); transform: translateY(0.5px); }
.inbox-table th.sortable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }

/* การ์ดสถิติที่กดเพื่อ drill ลงไปได้ */
.dash-hero-card.drillable, .dash-hi.drillable {
  transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out);
}
.dash-hero-card.drillable:hover, .dash-hi.drillable:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.dash-hero-card.drillable:active, .dash-hi.drillable:active { transform: translateY(0) scale(0.99); box-shadow: var(--shadow-1); }
.dash-hero-card.drillable:focus-visible, .dash-hi.drillable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ปุ่มปิดลิ้นชัก: หมุนเล็กน้อยตอน hover = บอกว่ามันคือ "ปิด" ไม่ใช่ "ย้อนกลับ" */
.dr-close { transition: background var(--dur-state) var(--ease-out), color var(--dur-state) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.dr-close:hover { background: var(--surface-3); color: var(--text); transform: rotate(90deg); }
.dr-close:active { transform: rotate(90deg) scale(0.9); }

/* อุปกรณ์สัมผัสไม่มี hover จริง — :hover ค้างหลังแตะ ทำให้ปุ่มดูติดค้าง */
@media (hover: none) {
  button:hover:not(:disabled),
  .nav-btn:hover:not(:disabled),
  .dash-hero-card.drillable:hover,
  .dash-hi.drillable:hover,
  .inbox-row-tr:hover { transform: none; box-shadow: var(--shadow-1); background: inherit; }
  .dr-close:hover { transform: none; }
}

/* .nav-btn.active วาด pill ทับ .nav-indicator ที่อยู่ข้างหลัง (z 1 vs 0) — ถ้าต่างคนต่างมีเงาสี
   จะได้เงาสองชั้นซ้อนกัน · ให้ indicator เป็นเจ้าของเงาแหล่งเดียว ปุ่มเหลือแค่ผิวรับแสง */
.nav-btn.active { box-shadow: var(--sheen); }

/* ---- M12 Stock-lite ---- */
.stock-badge { font-size: 0.78em; color: var(--muted-2); border: 1px dashed var(--border-strong); border-radius: 4px; padding: 0 0.35em; white-space: nowrap; }
.stock-val.stock-zero { color: var(--muted-2); }
.stock-neg { color: var(--danger); }
.stock-actions { white-space: nowrap; }
.stock-btn { font-size: 0.8em; padding: 0.2em 0.5em; margin-right: 0.25em; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); cursor: pointer; }
.stock-btn:hover { filter: brightness(0.96); }
.stock-hint { font-size: 0.8em; color: var(--muted-2); white-space: nowrap; }
.stock-hint.short { color: var(--danger); font-weight: 600; }
.stock-now { font-size: 0.92em; color: var(--muted-2); margin: 0.2rem 0 0.6rem; }
.stock-hist-box { max-width: 460px; width: 100%; }
.moves-list { max-height: 320px; overflow-y: auto; margin: 0.4rem 0 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.move-row { display: flex; gap: 0.6em; align-items: baseline; font-size: 0.92em; border-bottom: 1px dashed var(--border-strong); padding-bottom: 0.3rem; }
.move-date { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.move-qty { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.move-meta { color: var(--muted-2); font-size: 0.9em; overflow-wrap: anywhere; }

/* ---- M13: scrollbar ลิสต์ให้เห็นชัด (เดิมกลืนกับพื้น) ---- */
.list-scroll { scrollbar-width: auto; scrollbar-color: rgba(86, 79, 224, 0.45) var(--surface-2); }
.list-scroll::-webkit-scrollbar { width: 12px; }
.list-scroll::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 10px; }
.list-scroll::-webkit-scrollbar-thumb { background: rgba(86, 79, 224, 0.45); border-radius: 10px; border: 2px solid var(--surface-2); background-clip: padding-box; }
.list-scroll::-webkit-scrollbar-thumb:hover { background: rgba(86, 79, 224, 0.7); background-clip: padding-box; }

/* ---- M13: แบนเนอร์ใกล้หมดใต้เมนู + ป้ายในหน้ารายการ ---- */
.low-banner { margin: 0.4rem 1.2rem 0; padding: 0.5rem 1rem; border-radius: 10px; background: var(--warn-bg, #fdf3e3); color: var(--warn-fg, #7a4b06); border: 1px solid rgba(122, 75, 6, 0.25); font-size: 0.95rem; font-weight: 600; cursor: pointer; line-height: 1.5; }
.low-banner:hover { filter: brightness(0.97); }
.low-banner-blink { font-weight: 800; animation: lowBlink 1.6s ease-in-out infinite; }
@keyframes lowBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .low-banner-blink { animation: none; } }
.low-row td { background: rgba(201, 42, 42, 0.06); }
.low-tag { font-size: 0.75em; color: var(--danger); border: 1px solid rgba(201, 42, 42, 0.4); border-radius: 4px; padding: 0 0.3em; white-space: nowrap; font-weight: 700; }
.cover-days { display: block; font-size: 0.75em; color: var(--muted-2); font-weight: 400; }
.low-filter { white-space: nowrap; cursor: pointer; user-select: none; }
.low-filter input { accent-color: var(--danger); }

/* ---- M14: Stock dashboard + theme polish ---- */
.stock-dash-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.05rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-dim); font-weight: 700; font-size: 0.98rem; box-shadow: var(--shadow-1); }
.stock-dash-btn svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.stock-dash-btn:hover:not(:disabled) { background: var(--surface); border-color: var(--accent); color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.stock-dash-btn.open, .stock-dash-btn.open:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; box-shadow: var(--shadow-accent), var(--sheen); }
.stock-dash-btn.open svg { color: #fff; }
.stock-dash { margin: 0 0 1.3rem; }
.stock-dash .dash-hero { margin-bottom: 1rem; }
.stock-hero-of { font-size: 0.58em; font-weight: 700; opacity: 0.8; margin-left: 2px; }
.stock-dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.stock-dash .stat-panel h3 svg { width: 15px; height: 15px; color: var(--accent); vertical-align: -2px; margin-right: 3px; }

/* polish: ไอคอน nav มีสี accent ตอนพัก (active ยังขาวบน gradient) — เพิ่มชีวิตให้ topbar */
.nav-btn:not(.active) .nav-ic { color: var(--accent); opacity: 0.85; }
.nav-btn.active .nav-ic { color: #fff; opacity: 1; }
/* polish: ปุ่ม stock ใช้ radius token + ภาษากด (ยก/จม) เดียวกับปุ่มอื่นทั้งแอป */
.stock-btn { border-radius: var(--radius-sm); transition: transform var(--dur-press) var(--ease-out), box-shadow var(--dur-state) var(--ease-out), border-color var(--dur-state) var(--ease-out); }
.stock-btn:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow-1); filter: none; }
.stock-btn:active { transform: translateY(0) scale(0.97); }
/* polish: ทรงป้าย/ชิปนุ่มขึ้นเท่ากันทั้งชุด + แบนเนอร์ใช้ radius/เงาระบบเดียวกัน */
.alias-chip, .stock-badge, .low-tag, .dead-tag, .unknown-tag { border-radius: 6px; }
.low-banner { border-radius: var(--radius); box-shadow: var(--shadow-1); }

/* ---- M15: มิติ + ลูกเล่น ---- */
/* modal เด้งเข้า (เดิมโผล่ทันที) — overlay จางเร็ว กล่องลอยขึ้น+ขยายนิด ด้วย ease เดิมของแอป */
.reject-modal { animation: overlayIn 160ms var(--ease-out) both; }
.reject-box { animation: boxIn 260ms var(--ease-out-strong) both; }
@keyframes overlayIn { from { opacity: 0; } }
@keyframes boxIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* มิติของผิวการ์ด: ขอบบนรับแสง + เงาสัมผัสใกล้ + เงาโยนไกล (สามชั้น = นูนจริง ไม่ใช่ลอยแบน) */
.stat-panel { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(26,32,51,0.05), 0 10px 30px -18px rgba(26,32,51,0.18); }
.stat-panel:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 4px rgba(26,32,51,0.06), 0 16px 34px -16px rgba(26,32,51,0.24); }
.kpi-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(26,32,51,0.05), 0 10px 30px -18px rgba(26,32,51,0.2); }
.inbox-table { box-shadow: var(--shadow-1); }
/* หัวตารางลอยเหนือเนื้อชัดขึ้นตอน scroll ลอด (sticky) */
.list-scroll thead th { box-shadow: inset 0 -1px 0 var(--border), 0 4px 10px -7px rgba(26,32,51,0.22); }

/* hero: วงแหวนซ้อนมุมล่างซ้ายคู่กับวงทึบมุมบนขวาเดิม — แสงสองชั้นบนผิว gradient */
.dash-hero-card::before { content:""; position:absolute; left:-20px; bottom:-28px; width:80px; height:80px; border-radius:50%; border:11px solid rgba(255,255,255,0.09); pointer-events:none; }

/* กางภาพรวมคลัง: การ์ดไหลเข้าเป็นจังหวะ (ลิสต์โผล่แบบลิสต์ — cap delay 0.3s) */
.stock-dash .dash-hero-card { animation: cardRise 0.45s var(--ease-out-strong) both; }
.stock-dash .dash-hero-card:nth-child(2) { animation-delay: 0.06s; }
.stock-dash .dash-hero-card:nth-child(3) { animation-delay: 0.12s; }
.stock-dash .dash-hero-card:nth-child(4) { animation-delay: 0.18s; }
.stock-dash .stock-dash-panels .stat-panel:nth-child(1) { animation-delay: 0.22s; }
.stock-dash .stock-dash-panels .stat-panel:nth-child(2) { animation-delay: 0.3s; }

/* แถวที่ยอดเพิ่งบันทึก: วาบ accent หนึ่งครั้งแล้วเงียบ — ยืนยันตำแหน่งที่ข้อมูลลง */
@keyframes rowFlash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.row-flash td { animation: rowFlash 1.2s var(--ease-out) both; }

/* จุด "ด่วน" เต้นช้า ๆ — สัญญาณเดียวในตารางที่มีชีวิต เพราะมันคือสิ่งเดียวที่รอไม่ได้ */
@keyframes urgentPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(211,31,40,0.18); } 50% { box-shadow: 0 0 0 6px rgba(211,31,40,0.08); } }
.urgent-dot { animation: urgentPulse 1.8s ease-in-out infinite; }