/* คลังข่าว — ค้นข่าว PR ย้อนหลัง
   ธีมเดียวกับ /trend/ /ir/ /issue/ — สว่าง/มืดตามเครื่องผู้ใช้

   📌 ค่าสีพื้นฐานก๊อปมาจาก trend/styles.css + social/styles.css ตรงๆ ห้ามคิดเอง
      แก้ชุดสีของตระกูลนี้เมื่อไหร่ ต้องแก้ให้ครบทุกหน้า ไม่งั้นสลับหน้าแล้วสีเพี้ยน

   เขียนแบบ mobile-first: กฎพื้นฐานคือของจอแคบ แล้วค่อยขยายด้วย min-width */

:root {
  color-scheme: light dark;
  /* ↓ ตรงกับ trend/ir/issue/social */
  --plane:#f4f6fb; --surface:#ffffff; --border:#e4e8f0;
  --ink:#1f2937; --muted:#6b7280;
  --surface-2:#eef1f7; --ink-2:#4b5563; --accent:#2563eb;
  --good:#15803d; --mark:#fde68a; --mark-ink:#1f2937; --on-accent:#fff; --radius:14px;
}

/* ⚠️ ตามเครื่องผู้ใช้ เหมือน trend/ir/issue เป๊ะ (ค่าสีชุดเดียวกัน)
   /social/ ตรึงเป็นโหมดสว่างอย่างเดียว — อันนั้นเป็นข้อยกเว้น ไม่ใช่มาตรฐานของตระกูลนี้
   ⚠️ ไฮไลต์คำค้นต้องกำหนดสีตัวอักษรเองทั้งสองโหมด — ค่าเริ่มต้นของ <mark>
      เป็นตัวหนังสือดำบนพื้นเหลือง พอเป็นโหมดมืดจะกลายเป็นตัวหนังสือจางบนพื้นสว่าง อ่านไม่ออก */
@media (prefers-color-scheme: dark) {
  :root {
    --plane:#0d1117; --surface:#161b22; --border:#262c36;
    --ink:#e6edf3; --muted:#8b949e;
    --surface-2:#1c232c; --ink-2:#b6c2cf; --accent:#60a5fa;
    --good:#4ade80; --mark:#7c5e10; --mark-ink:#fff8dc; --on-accent:#0d1117;
  }
}

* { box-sizing:border-box; }

body {
  margin:0; min-height:100vh; background:var(--plane); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Sarabun","Noto Sans Thai",Roboto,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}

.wrap { max-width:1100px; margin:0 auto; padding:0 14px 56px; }

/* ── แถบบน ───────────────────────────────────────────────────────── */
.appbar {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 0; flex-wrap:wrap;
}
.logo { display:flex; align-items:center; gap:8px; font-weight:650; font-size:1rem; }
.bar-right { display:flex; align-items:center; gap:8px; }
.btn {
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:7px 13px; font-size:.8rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px; font-family:inherit;
}
.btn:hover { background:var(--surface-2); color:var(--ink); }
.btn.sm { padding:5px 11px; font-size:.75rem; }
#vtag { color:var(--muted); font-size:.72rem; }

/* ── ช่องค้นหา ───────────────────────────────────────────────────
   ⚠️ ติดบนสุดตลอด — เลื่อนดูผลลัพธ์ยาวๆ แล้วยังพิมพ์แก้คำค้นได้ทันที */
/* ⭐ ช่องค้นหา = ฟีเจอร์หลัก ต้องเด่นกว่าทุกอย่างบนหน้า
   เว้นที่ให้หายใจข้างบน · ตัวใหญ่กว่าปกติ · เงาลอยขึ้นมาจากพื้น */
/* 🧲 แถบนี้ติดบนสุดตลอด และ **กล่องตัวกรองอยู่ข้างในด้วย** (เจ้าของแจ้ง 28 ส.ค. 2026:
   "ตัวกรองไม่ float ตาม") · ของเดิมกล่องอยู่ข้างนอก พอเลื่อนอ่านข่าวมันจะมุดหายไปใต้แถบ
   ทีละครึ่ง — ดูเหมือนหน้าพัง และจะแก้ตัวกรองต่อต้องเลื่อนกลับขึ้นไปบนสุดก่อน */
/* ⚠️ ที่เว้นด้านบนใช้ **margin ไม่ใช่ padding** — padding อยู่ในกล่อง พอแถบไปติดบนสุด
   มันจะเหลือเป็นช่องว่างเปล่าๆ 76px คาอยู่ตลอดเวลา กินจอฟรีๆ
   ส่วน margin อยู่นอกกล่อง เลื่อนพ้นไปแล้วก็หายไปเลย (วัดจริง: มือถือได้ที่อ่านข่าวคืนมา 60px) */
.sticky {
  position:sticky; top:0; z-index:50; background:var(--plane);
  margin-top:60px; padding:16px 0;
}
.searchrow { position:relative; display:flex; align-items:center; }
#q {
  width:100%; font-family:inherit; font-size:1.15rem; font-weight:500; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--border); border-radius:999px;
  padding:18px 162px 18px 190px; -webkit-appearance:none; appearance:none;
  box-shadow:0 2px 10px rgba(16,24,40,.06);
  transition:border-color .12s, box-shadow .12s;
}
#q::placeholder { color:var(--muted); font-weight:400; }
#q::-webkit-search-cancel-button { display:none; }
#q:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.15), 0 2px 10px rgba(16,24,40,.06);
}
.qclear {
  position:absolute; right:118px; border:0; background:transparent; color:var(--muted);
  font-family:inherit; font-size:1.1rem; cursor:pointer; padding:9px 11px; line-height:1; border-radius:999px;
}
.qclear:hover { color:var(--ink); background:var(--surface-2); }
/* 📢 อยู่ "เหนือ" ช่องค้นหา — ต้องอ่านออกก่อนที่มือจะเริ่มพิมพ์ จึงตัวใหญ่กว่าหมายเหตุทั่วไป
   (ของเดิมอยู่ใต้ช่องและตัวเล็ก .71rem ซึ่งแทบไม่มีใครอ่าน) */
/* ⚠️ ห้ามใช้ display:flex ที่นี่ — ลูกแต่ละชิ้น (<b> <i> ข้อความ) กลายเป็น flex item
   แล้วตัดบรรทัดทีละชิ้น จอแคบเลยยาว 4 บรรทัดดันช่องค้นหาตกจอ (วัดจริงที่ 390px)
   เป็นข้อความธรรมดา ให้มันไหลเองตามปกติ */
.qhint {
  margin:0 6px 10px; font-size:.82rem; color:var(--ink-2); line-height:1.45;
}
.qhint i { color:var(--muted); }
/* 🤖 ป้าย "ค้นด้วย AI" — ต้องรู้ตั้งแต่แรกเห็นว่านี่ไม่ใช่ช่องใส่คีย์เวิร์ดธรรมดา
   (เจ้าของสั่ง 26 ส.ค. 2026) · สีเน้นเดียวกับปุ่มถาม เพื่อให้สายตาโยงถึงกัน */
.aitag {
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; padding:3px 11px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-size:.86rem; font-weight:700;
}
/* 🔀 ปุ่มสลับโหมด 2 ช่อง ติดอยู่ "ใน" ช่องค้นหา
   🚫 **ห้ามทำเป็นป้ายใบเดียวที่กดแล้วสลับ** — เจ้าของบอกตรงๆ ว่า "คนจะไม่รู้ซิว่ากดได้"
      (ลองมาแล้วทั้งแบบป้ายเฉยๆ และแบบมีลูกศร ▾ + เงา ก็ยังอ่านเป็นป้ายบอกสถานะอยู่ดี)
   ✅ โชว์ทั้ง 2 ตัวเลือก — ช่องที่ยังไม่ได้เลือกทำหน้าที่บอกเองว่ากดได้ */
.modeseg {
  position:absolute; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:2px;
  padding:3px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border);
}
.mseg {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  border:0; background:transparent; color:var(--muted);
  font-family:inherit; font-size:.8rem; font-weight:650; line-height:1;
  padding:7px 11px; border-radius:999px; white-space:nowrap;
  transition:background .12s, color .12s;
}
.mseg:hover { color:var(--ink); background:rgba(37,99,235,.09); }
.mseg:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* ช่องที่เลือกอยู่ — ทึบและมีเงา ให้ต่างจากช่องที่ยังไม่ได้เลือกแบบไม่ต้องเพ่ง */
.mseg.on {
  background:var(--accent); color:var(--on-accent);
  box-shadow:0 1px 4px rgba(37,99,235,.35);
}
.mseg.on:hover { background:var(--accent); color:var(--on-accent); }
@media (prefers-color-scheme: dark) {
  #q { box-shadow:none; }
  #q:focus { box-shadow:0 0 0 4px rgba(96,165,250,.2); }
}
.qhint code {
  background:var(--surface-2); border:1px solid var(--border); border-radius:5px;
  padding:1px 5px; font-size:.95em;
}

/* ── กล่องตัวกรอง 3 ตัว ───────────────────────────────────────────
   จอแคบซ้อนแนวตั้ง · จอกว้างเรียงแนวนอน (ดู @media ท้ายไฟล์) */
/* ⚠️ ต้องมาก่อนกฎ .filters { display:grid } — ไม่งั้น display ชนะ [hidden] แล้วพับไม่ลง */
[hidden] { display:none !important; }

/* ⚠️ **ต้องจำกัดความสูง** เพราะกล่องนี้อยู่ในแถบที่ติดบนสุดแล้ว
   ไม่งั้นกางตัวกรองบนมือถือ = แถบกินจอทั้งหน้า ไม่เหลือที่อ่านข่าวเลย
   เกินกว่านี้ให้เลื่อนอยู่ข้างในกล่อง (รายชื่อสำนักข่าวก็เลื่อนอยู่ข้างในของมันอีกชั้น) */
.filters { max-height:46vh; overflow-y:auto; overscroll-behavior:contain; }
/* จอแคบต้องเตี้ยกว่านี้อีก — ไม่งั้นเหลือที่อ่านข่าวไม่ถึงครึ่งจอ (วัดจริงที่ 390×780) */
@media (max-width:560px) { .filters { max-height:34vh; } }

/* ⚠️ ปุ่มตัวกรองอยู่ "ในช่องค้นหา" มุมขวา (เจ้าของสั่ง 20 ส.ค. 2026)
   วางไว้เป็นปุ่มลอยนอกช่องแล้วมองไม่เห็น · ในช่องค้นหาคือจุดที่สายตาอยู่อยู่แล้ว
   ⚠️ ต้องเผื่อ padding ขวาของ #q ให้พอ ไม่งั้นข้อความที่พิมพ์จะมุดใต้ปุ่ม */
.grow { flex:1; }
.ftoggle {
  position:absolute; right:7px; z-index:2;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink);
  border-radius:999px; padding:9px 14px; font-size:.82rem; font-weight:600; line-height:1;
}
.ftoggle:hover { border-color:var(--accent); color:var(--accent); }
.ftoggle .fcaret { color:var(--muted); font-size:.6rem; }
/* ⚠️ จอแคบ: เหลือแต่ไอคอน — คำว่า "ตัวกรอง" กินที่พิมพ์ไปเกือบครึ่งช่อง
   (ปุ่มยังใหญ่พอกดได้ และยังเห็นชัดเพราะอยู่ในช่องค้นหา) */
/* 🤖 ปุ่มถามเป็นประโยค — อยู่ในช่องค้นหาเหมือนปุ่มตัวกรอง
   ⚠️ **ทุกครั้งที่เพิ่มปุ่มในช่องค้นหา ต้องขยาย padding-right ของ #q ด้วย**
      ไม่งั้นข้อความที่พิมพ์จะมุดไปใต้ปุ่ม — เทสต์ archives.mjs [9c] วัดการชนกันไว้
   ลำดับจากขวา:  [⚙ ตัวกรอง]  [🤖 ถาม]  [✕ ล้าง] */
/* ⭐ ปุ่ม "ถาม" เป็นการกระทำเดียวที่ทำให้เกิดผลลัพธ์ — ใช้สีเน้นให้ต่างจากปุ่มตัวกรอง */
.askbtn {
  right:126px;
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.askbtn:hover { filter:brightness(1.08); color:var(--on-accent); border-color:var(--accent); }
/* ⏳ กำลังค้นอยู่ — ปุ่มต้องบอกสถานะ ไม่งั้นกดแล้วเหมือนกดไม่ติด
   ⚠️ ไอคอนหมุนใช้ currentColor จึงเห็นชัดบนพื้นสีเน้นอยู่แล้ว แต่ต้องล้าง margin-right ทิ้ง
      (ตัวกลางเว้นไว้ 7px สำหรับข้อความที่ตามหลัง ในปุ่มนี้มี gap ของ flex อยู่แล้ว) */
.askbtn.busy { opacity:.75; cursor:progress; }
.askbtn .spin { margin-right:0; vertical-align:0; }
/* ⚠️ ปุ่มถาม (สีเน้น) กับปุ่มตัวกรอง "ตอนกรองอยู่" (สีเน้นเหมือนกัน) อยู่ติดกันจนอ่านเป็นก้อนเดียว
   เจ้าของส่งภาพมาให้ดู 26 ส.ค. 2026 · แก้ด้วยการเว้นระยะ + ทำให้ตัวกรองเป็นแบบขอบ ไม่ใช่ทึบ
   🚫 margin ใช้ไม่ได้ ปุ่มเป็น position:absolute — ต้องขยับค่า right เอา */
/* กรองอยู่ = ทำให้เห็นชัดว่ารายการถูกกรองไว้ ไม่ใช่ข่าวหายไปเฉยๆ
   ⚠️ ใช้ "ขอบสีเน้น" ไม่ใช่ "พื้นสีเน้น" — ของเดิมเป็นพื้นทึบเหมือนปุ่มถามเป๊ะ
      พอกรองอยู่ 2 ปุ่มติดกันจะกลายเป็นก้อนสีน้ำเงินก้อนเดียว แยกไม่ออกว่ากดตรงไหน */
.ftoggle.on {
  background:var(--surface); border-color:var(--accent); color:var(--accent);
}
.ftoggle.on .fcaret { color:var(--accent); }
.ftoggle.on .fbadge { background:var(--accent); color:var(--on-accent); }
#q { padding-right:258px; }
.qclear { right:218px; }

/* จอกลาง: ปุ่มถามเหลือแต่ไอคอน (Enter ก็ทำงานเหมือนกัน และ hint บอกไว้แล้ว) */
@media (max-width:860px) {
  .askbtn .flabel { display:none; }
  /* ป้าย 🤖 ยังมีคำกำกับได้อยู่ แค่บีบลง */
  .mseg { padding:7px 9px; font-size:.76rem; }
  #q { padding-left:176px; }
  .askbtn { padding:9px 12px; }
  #q { padding-right:208px; }
  .qclear { right:168px; }
}
/* ⚠️ **จอแคบใส่ 3 ปุ่มในช่องค้นหาไม่ได้** — วัดแล้วเหลือที่พิมพ์ 148px (เกณฑ์ 180px)
   ปุ่ม 🤖 จึงลงมาอยู่ "ใต้ช่อง" แทนที่จะเบียดข้างใน · ช่องพิมพ์ได้ที่คืนมาเต็ม
   และปุ่มยังอ่านออกว่าทำอะไร (มีคำกำกับ ไม่ใช่ไอคอนลอยๆ)
   — เทสต์ archives.mjs [9c] วัดที่พิมพ์ไว้ ลองยัดกลับเข้าไปเมื่อไหร่ตกทันที */
@media (max-width:560px) {
  .ftoggle .flabel { display:none; }
  /* ⚠️ จอแคบเหลือแค่ 🤖 — คำว่า "ค้นด้วย AI" กินที่พิมพ์ไปเกือบ 90px
     บรรทัด hint ข้างบนยังบอกอยู่ว่าเป็น AI จึงไม่ได้หายไปไหน */
  /* จอแคบเหลือ "🤖 AI" — ยังบอกได้ว่าเป็น AI แต่ไม่กินที่พิมพ์
     และ .qex ซ่อนตัวอย่างยาวๆ ไว้ (placeholder ในช่องบอกตัวอย่างอยู่แล้ว) */
  /* 📱 **จอแคบ: ปุ่มสลับโหมดลงมาอยู่แถวล่าง คู่กับปุ่มค้น** — ไม่ใช่ซ่อนหรือย่อ
     วัดแล้วถ้ายัดไว้ในช่อง ที่พิมพ์เหลือ 156px (เกณฑ์ 180px) และต้องตัดคำกำกับทิ้งจนเหลือแต่ไอคอน
     ย้ายลงแถวล่างแทน = ได้ที่พิมพ์คืนเต็มๆ **และยังมีคำกำกับครบ อ่านออกว่าเป็นตัวเลือก**
     🚫 ห้ามใช้ flex-wrap (เหตุผลเดียวกับปุ่มถาม — ปุ่มตัวกรองจะหลุดกรอบ) */
  .modeseg { left:auto; right:8px; bottom:0; top:auto; }
  .qhint .qex { display:none; }
  .mseg { padding:7px 10px; font-size:.76rem; }
  #q { padding-left:20px; padding-right:98px; }
  .qclear { right:58px; padding:9px 8px; }
  .ftoggle { padding:9px 12px; }
  /* ⚠️ **ห้ามใช้ flex-wrap ให้ปุ่มตกบรรทัด** — ลองแล้วปุ่มตัวกรอง (absolute ที่ไม่ได้กำหนด top)
     ย้ายตามไปด้วย แล้วหลุดออกนอกกรอบช่องค้นหา (เทสต์ [9c] จับได้)
     ใช้เว้นที่ด้านล่างของแถวแล้ววางปุ่มลงไปแทน — ปุ่มตัวกรองไม่ขยับเลย */
  .searchrow { padding-bottom:47px; }
  .askbtn { right:auto; left:20px; bottom:0; padding:8px 14px; }
  .askbtn .flabel { display:inline; }
}

/* แถบ "ตีความคำถามเป็นอะไร" — ต้องอ่านออกโดยไม่ต้องกดอะไร
   ⚠️ ผลที่ถูก AI คัดโดยผู้ใช้ไม่รู้ว่าคัดด้วยอะไร = ของหายเงียบ (กับดักเดียวกับตัวกรองที่พับไว้) */
.askbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:9px 20px 0; padding:8px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2);
  font-size:.78rem; color:var(--ink);
}
.askbar .askwhy { flex:1 1 240px; min-width:0; }
/* ⚠️ กำหนดสีเองทั้ง 2 โหมด — ไฟล์นี้ไม่มีตัวแปรสีเตือน ยืมของโหมดเดียวจะอ่านไม่ออกอีกโหมด */
.askbar .asknote { color:#b45309; flex:1 1 100%; }
/* ⚠️ .loading ตัวกลางมี padding 22px + จัดกึ่งกลาง (ไว้ใช้ท้ายรายการ) ต้องล้างในแถบนี้ */
.askbar .loading { display:inline-flex; align-items:center; gap:8px; color:var(--muted); padding:0; text-align:left; }
@media (prefers-color-scheme: dark) {
  .askbar .asknote { color:#fbbf24; }
}
.fbadge {
  display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
  margin-left:5px; padding:0 4px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-size:.66rem; font-weight:700;
}
/* สรุปว่ากรองอะไรไว้ — อ่านได้โดยไม่ต้องกางกล่อง */
.fsum {
  margin:0 4px 10px; font-size:.76rem; color:var(--accent);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ⚠️ 3 กล่องแยกใบทำให้ **สูงไม่เท่ากันและกินที่** (กล่องวันที่เตี้ย กล่องสำนักข่าวสูง 210px)
   แก้เป็น **การ์ดใบเดียวแบ่ง 3 ช่อง** — ขอบเดียว สูงเท่ากันเอง และเตี้ยลงเพราะ
   ล็อกความสูงทั้งแถวไว้ แล้วให้รายการยาวๆ เลื่อนอยู่ข้างในแทนที่จะดันแถวให้สูงขึ้น */
.filters {
  display:grid; grid-template-columns:1fr; gap:0; margin-bottom:12px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}
.fbox {
  background:transparent; border:0; border-radius:0; padding:12px 14px;
  min-width:0; display:flex; flex-direction:column;
  /* ⚠️ ต้องมี min-height:0 — ไม่งั้นลูกที่เป็น flex จะดันความสูงจนล้นออกนอกการ์ด
     แล้วโดน overflow:hidden ตัดทิ้ง = รายชื่อสำนักข่าวท่อนล่างหายไปเลย เลื่อนหาไม่ได้ */
  min-height:0; overflow:hidden;
}
.fbox + .fbox { border-top:1px solid var(--border); }
.fh { margin:0 0 9px; font-size:.82rem; font-weight:650; display:flex; gap:7px; align-items:baseline; flex-wrap:wrap; }
.fhint { font-size:.7rem; color:var(--muted); font-weight:400; }
.fnote { margin:9px 0 0; font-size:.7rem; color:var(--muted); }

.dates { display:flex; flex-wrap:wrap; gap:8px; }
.dates label { font-size:.76rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; flex:1 1 140px; }
.dates input {
  flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); color:var(--ink);
  border-radius:8px; padding:7px 9px; font-family:inherit; font-size:.8rem;
}
.dates input:focus { outline:none; border-color:var(--accent); }

/* ชิพหมวด — กดเลือกได้หลายอัน (เจอหมวดใดหมวดหนึ่งก็นับ) */
.chips { display:flex; gap:6px; flex-wrap:wrap; align-content:flex-start; overflow-y:auto; min-height:0; }
.ch {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  border:1px solid var(--border); background:var(--surface); color:var(--ink-2);
  border-radius:999px; padding:6px 12px; font-size:.78rem;
}
.ch:hover { border-color:var(--accent); color:var(--ink); }
.ch.on { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.ch .n { font-size:.72rem; opacity:.7; font-variant-numeric:tabular-nums; }
.ch.on .n { opacity:.85; }

/* รายชื่อสำนักข่าว — เรียงข่าวมากไปน้อย พิมพ์ค้นในรายการได้ */
.minisearch {
  width:100%; font-family:inherit; font-size:.8rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:8px;
  padding:7px 10px; margin-bottom:8px; -webkit-appearance:none; appearance:none;
}
.minisearch:focus { outline:none; border-color:var(--accent); }
.srclist { max-height:150px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; min-height:0; }
.src {
  display:flex; align-items:center; gap:8px; cursor:pointer; font-family:inherit; text-align:left;
  border:0; background:transparent; color:var(--ink-2); border-radius:8px;
  padding:6px 8px; font-size:.79rem; width:100%;
}
.src:hover { background:var(--surface-2); color:var(--ink); }
.src .box {
  flex:none; width:15px; height:15px; border:1.5px solid var(--border); border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; color:var(--on-accent);
}
.src.on .box { background:var(--accent); border-color:var(--accent); }
.src .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.src .n { color:var(--muted); font-size:.72rem; font-variant-numeric:tabular-nums; }
.src.on { color:var(--ink); font-weight:600; }
.srcempty { color:var(--muted); font-size:.75rem; padding:6px 8px; }

/* ── แถวสถานะ ────────────────────────────────────────────────────── */
.statusrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 2px 9px; }
.count { font-size:.92rem; font-weight:650; }
.count .dim { color:var(--muted); font-weight:400; font-size:.8rem; }

/* ── รายการผลลัพธ์ ───────────────────────────────────────────────── */
.list { display:flex; flex-direction:column; gap:8px; }
.item {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:11px 13px;
}
.item .top { display:flex; gap:8px; align-items:flex-start; }
.item a.t {
  flex:1; min-width:0; color:var(--ink); text-decoration:none; font-size:.92rem;
  font-weight:600; line-height:1.45;
}
.item a.t:hover { color:var(--accent); text-decoration:underline; }
.item mark { background:var(--mark); color:var(--mark-ink); border-radius:3px; padding:0 1px; }
.copy {
  flex:none; border:1px solid var(--border); background:var(--surface); color:var(--muted);
  border-radius:8px; padding:4px 8px; font-size:.72rem; font-family:inherit; cursor:pointer; line-height:1.4;
}
.copy:hover { color:var(--ink); background:var(--surface-2); }
.copy.done { color:var(--good); border-color:var(--good); }
.meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:7px; font-size:.73rem; color:var(--muted); }
.meta .o { color:var(--ink-2); font-weight:600; }
.meta .sep { opacity:.5; }
.tag {
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2);
  border-radius:999px; padding:2px 8px; font-size:.7rem;
}

/* ── ว่าง / โหลดเพิ่ม ────────────────────────────────────────────── */
.empty { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
         padding:26px 16px; text-align:center; color:var(--muted); font-size:.86rem; }
.empty b { display:block; color:var(--ink); font-size:.95rem; margin-bottom:6px; }
.empty .btn { margin-top:12px; }
.morewrap { display:flex; justify-content:center; padding:16px 0 0; }
.morewrap .btn { padding:10px 20px; font-size:.85rem; }
.loading { color:var(--muted); font-size:.82rem; text-align:center; padding:22px 0; }
.spin {
  display:inline-block; width:12px; height:12px; margin-right:7px; vertical-align:-1px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:sp .7s linear infinite;
}
@keyframes sp { to { transform:rotate(360deg); } }

/* ── จอกว้าง ─────────────────────────────────────────────────────── */
@media (min-width:760px) {
  /* ล็อกความสูงทั้งแถว — 3 ช่องจึงสูงเท่ากันเสมอ ไม่ว่าในนั้นจะมีของยาวแค่ไหน */
  .filters { grid-template-columns:repeat(3,1fr); grid-template-rows:200px; }
  .fbox + .fbox { border-top:0; border-left:1px solid var(--border); }
  .srclist, .chips { flex:1; max-height:none; }
  .item .top { align-items:baseline; }
  .item a.t { font-size:.95rem; }
}