/* ===================== BASE (from home.css) ===================== */
/* === Home — Polished Light Theme (CSS only) === */
/* ไม่แตะ HTML/JS | ให้โทนเดียวกับ categories/knowledge */

:root{
  --bg: #f7fafc;
  --bg-2: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --ring: #e5e7eb;
  --brand: #2563eb;
  --brand-2:#60a5fa;
  --accent: #34d399;
  --shadow: 0 12px 34px rgba(2,8,23,.08);
  --radius: 16px;

  /* motion */
  --hero-drift-speed: 26s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Prompt',sans-serif;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(96,165,250,.12), transparent),
    linear-gradient(180deg, #f6fbff 0%, var(--bg) 38%);
  color:var(--text);
  margin:0;
}

.container{max-width:1120px; margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg-2); border-bottom:1px solid var(--ring);
  backdrop-filter:saturate(140%) blur(6px);
}
.header-inner{display:flex; align-items:center; gap:14px; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--brand)}
.brand .brand-name{color:var(--brand)}
.nav{display:flex; gap:6px; margin-left:8px}
.nav-link{
  padding:8px 12px; border-radius:12px; color:var(--text); font-weight:600;
  transition:background .18s ease, transform .12s ease;
}
.nav-link:hover,.nav-link.is-active{background:rgba(99,102,241,.08)}
.auth{margin-left:auto; display:flex; gap:8px; align-items:center}
.menu-btn{display:none; border:1px solid var(--ring); border-radius:10px; padding:6px 10px; background:transparent; color:var(--text)}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--ring);
  color:var(--text); font-weight:800; background:#fff;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:#f1f5f9}
.btn.primary{
  background:linear-gradient(135deg, var(--brand), var(--accent));
  border:none; color:#000; box-shadow:0 10px 24px rgba(37,99,235,.18);
}
.btn.primary:hover{filter:saturate(110%) brightness(1.02)}
.btn.lg{padding:12px 18px; border-radius:14px}

/* Keyboard focus */
:where(a, button, .chip, .card):focus{outline:none}
:where(a, button, .chip, .card):focus-visible{
  box-shadow:0 0 0 3px rgba(37,99,235,.25), 0 0 0 6px rgba(37,99,235,.12);
  border-radius:12px;
}

/* ---------------- HERO ---------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 18% -10%, #e7f2ff, transparent 70%),
    radial-gradient(1200px 600px at 92% 110%, #e8fff6, transparent 65%),
    linear-gradient(180deg, #f6fbff, #ffffff);
  border-bottom:1px solid var(--ring);
}
.hero > *{position:relative; z-index:1}
.hero::before{
  /* gradient drift soft glow */
  content:""; position:absolute; inset:-10% -5%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 520px at 80% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  filter:blur(28px);
  animation: heroBgDrift var(--hero-drift-speed) ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroBgDrift{
  0%{transform:translate3d(-2%,-1%,0)} 50%{transform:translate3d(2%,1%,0)} 100%{transform:translate3d(1%,-2%,0)}
}
@media (prefers-reduced-motion: reduce){ .hero::before{animation:none} }

.hero-inner{
  display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:center; padding:38px 0 24px;
}
@media (max-width: 900px){ .hero-inner{grid-template-columns:1fr} }

.hero-text h1{
  margin:0 0 8px; font-size:clamp(26px,3.6vw,44px); line-height:1.15;
  letter-spacing:-.02em; font-weight:900;
}
.hero-text h1 span{color:var(--brand)}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.cta{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #dbeafe; background:#eef2ff; color:#1e40af;
  border-radius:999px; font-weight:800; font-size:.92rem; margin-bottom:6px;
}

/* Right-side hero card (ถ้ามี) */
.hero-card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.12), 0 10px 24px rgba(15,23,42,.06);
  position:relative; overflow:hidden;
}
.hero-card::after{
  /* gradient border mask */
  content:""; position:absolute; inset:0; border-radius:20px; padding:1px;
  background:linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.checklist{margin:8px 0 0; padding-left:18px}
.checklist li{margin:6px 0; color:var(--text)}
.hero-note{font-size:12px; color:var(--muted); margin-top:8px}

/* ---------------- Sections ---------------- */
.benefits{padding:26px 0}
.shortcuts{padding:8px 0 40px}
.shortcuts .shortcuts-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.shortcuts h2{font-size:1.24rem; margin:0}

/* shortcut chips (ถ้ามีใน HTML) */
.chip-link{
  display:inline-flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:999px; border:1px solid var(--ring); background:#fff; color:var(--text); font-weight:800;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
  transition:transform .14s ease, background .18s ease, box-shadow .18s ease;
}
.chip-link:hover{transform:translateY(-1px); background:#f8fafc}

/* ---------------- Cards Grid ---------------- */
.cards{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.card{
  background:#fff; border:1px solid var(--ring); border-radius:20px; padding:16px;
  color:inherit; box-shadow:0 12px 30px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-1px; border-radius:22px;
  background:linear-gradient(135deg, rgba(37,99,235,.22), rgba(52,211,153,.22));
  opacity:0; transition:opacity .18s ease;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(2,8,23,.12);
  border-color:#dbeafe; background:#fcfdff;
}
.card:hover::before{opacity:1}
.card .icon{font-size:28px}
.card .title{font-weight:900; margin:6px 0 4px}
.card .desc{color:var(--muted); font-size:.95rem}

.grid .container{padding:28px 0} /* รองรับโครงเก่า */
.grid h2{margin:0 0 12px}

.site-footer{border-top:1px solid var(--ring); background:var(--bg-2)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding:16px 0}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:640px){
  .cards{grid-template-columns:1fr}
  .auth{display:none}
}

/* --- user pill in header when logged in --- */
.user-pill{display:flex; align-items:center; gap:10px}
.user-pill .avatar{
  width:28px; height:28px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#a5b4fc,#34d399); color:#fff; font-weight:700; font-size:12px; box-shadow:0 2px 6px rgba(0,0,0,.08)
}
.user-pill .name{font-weight:600}

/* ===================== CATEGORIES: DESKTOP OVERRIDES ===================== */
/* categories.desktop.css — Desktop-only layout fixes (merged with base) */

:root{
  --ring:#e5e7eb;
  --bg-2:#fff;
  --brand:#2563eb;
  --text:#0f172a;
}

/* =================== HERO =================== */
.hero .hero-inner{
  padding: 64px 0 56px !important;
}
.hero .hero-text{
  max-width: 820px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.hero .hero-text h1{
  font-size: 56px !important;
  line-height: 1.08 !important;
  margin: 0 0 18px !important;
}
/* คืนสีคำว่า "หาศักยภาพ" ให้เป็นสีแบรนด์ */
.hero .hero-text h1 span{
  color: var(--brand) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  text-shadow: none !important;
}

/* =================== SEARCH & TAGS =================== */
.toolbar{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
}
.toolbar .input{
  width: min(680px, 90vw) !important;
  padding: 14px 96px 14px 42px !important;
  border: 1.5px solid var(--ring) !important;
  border-radius: 16px !important;
  background: var(--bg-2) !important;
  box-shadow: 0 8px 28px rgba(15,23,42,.08) !important;
}
.tags{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 10px !important;
  padding-inline: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* Smoother row: kill faint hairline under chips on some browsers */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  backface-visibility: hidden;
  background-clip: padding-box;
  border-bottom: 1px solid transparent; /* eat the hairline */
  margin-bottom: -1px;                  /* pull up by 1px */
  scrollbar-width: none;                /* Firefox: hide thin scrollbar */
}
.tags::-webkit-scrollbar{ display:none; height:0; }
.tag{
  padding: 10px 14px !important;
  min-height: 40px !important;
  border: 1px solid #e6eef7 !important; /* softer border */
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important; /* softer surface */
  font-weight: 800 !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  position: relative !important;
  box-shadow: 0 8px 18px rgba(2,8,23,.08), inset 0 1px 0 rgba(255,255,255,.60) !important;
  background-clip: padding-box !important; /* avoid dark seam at corners */
}

/* =================== GROUPS & GRID =================== */
.groups{
  padding: 32px 0 56px !important;
}
.group{
  margin: 22px 0 !important;
}

/* รองรับชื่อคลาสกริดที่ต่างกัน: .grid / .cards / [class*="grid"] */
#groups .grid,
#groups .cards,
#groups [class*="grid"],
.groups .grid,
.groups .cards,
.groups [class*="grid"]{
  display: grid !important;
  grid-auto-flow: row dense !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

/* จอกว้างมาก: เพิ่มฐานการ์ดเล็กน้อย */
@media (min-width: 1440px){
  #groups .grid,
  #groups .cards,
  #groups [class*="grid"],
  .groups .grid,
  .groups .cards,
  .groups [class*="grid"]{
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  }
}

/* การ์ดให้ยืดตามคอลัมน์ ไม่ล็อกกว้าง */
#groups .card,
.groups .card{
  width: auto !important;
  padding: 18px !important;
  border-radius: 20px !important;
}

/* กันผลข้างเคียง: ยกเลิกค่าที่อาจไปล็อก 1 คอลัมน์ */
#groups .grid{ --min: initial !important; }

/* =================== DESKTOP-ONLY BACKGROUND =================== */
/* แก้เฉพาะพื้นหลังเดสก์ท็อปให้เป็นภาพเดียวทั้งหน้า */
@media (min-width: 1025px){
  html, body{
    background:
      radial-gradient(1200px 640px at 14% -10%, #e7f2ff, transparent 70%),
      radial-gradient(1200px 640px at 92% 110%, #e8fff6, transparent 65%),
      linear-gradient(180deg, #f6fbff 0%, #ffffff 40%, #f7fafc 100%) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-attachment: fixed, fixed, fixed !important;
  }

  main,
  .hero,
  .groups,
  .site-footer{
    background: transparent !important;
  }

  /* กัน wrapper บางตัวที่ตั้งพื้นหลังขาวทั้งแนวกว้าง */
  .container,
  .content, .content-wrap, .content-wrapper,
  [class*="section"],
  [class*="block"],
  [class*="panel"]{
    background: transparent !important;
  }
}

/* === Desktop: keep all chips on one row === */
@media (min-width: 1025px){
  .hero .hero-text{ max-width: 940px !important; }
  .tags{ gap: 8px !important; }
  .tag{
    padding: 14px 18px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-color:#e6eef7 !important;
  }
  .tags{ flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; overflow-x: auto !important; overflow-y: hidden !important; }
}

/* === Desktop: Pro chip effects (hover/active/press + subtle intro) === */
@media (min-width: 1025px){
  .tag{
    position: relative;
    isolation: isolate;
    transition: transform .16s ease, box-shadow .20s ease,
                background .20s ease, border-color .20s ease, color .20s ease;
    box-shadow: 0 6px 18px rgba(2,8,23,.06), inset 0 -1px 0 rgba(255,255,255,.6);
    will-change: transform;
    backdrop-filter: saturate(120%);
  }
  .tag::before{
    content:"";
    position:absolute; inset:0; border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(52,211,153,.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; /* Safari */
            mask-composite: exclude;
    opacity: 0; transition: opacity .20s ease; pointer-events:none;
  }
  .tag:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(2,8,23,.12), inset 0 -1px 0 rgba(255,255,255,.55);
  }
  .tag:hover::before{ opacity: 1; }
  .tag:active{
    transform: translateY(0);
    box-shadow: 0 6px 16px rgba(2,8,23,.10), inset 0 1px 0 rgba(0,0,0,.03);
  }
  .tag:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 4px rgba(37,99,235,.25),
      0 10px 24px rgba(15,23,42,.16);
  }
  .tag.is-active,
  .tag[aria-selected="true"]{
    background:
      linear-gradient(180deg, #ffffff, #f7fafc) padding-box,
      linear-gradient(135deg, #93c5fd, #a7f3d0) border-box;
    border: 1px solid transparent !important;
    color: #0f172a;
    box-shadow: 0 10px 24px rgba(37,99,235,.18);
  }
  .tags{ --stagger: 26ms; }
  .tag{ opacity: 0; transform: translateY(6px); animation: tagIn .38s ease forwards; }
  .tags .tag:nth-child(1){ animation-delay: calc(var(--stagger)*1); }
  .tags .tag:nth-child(2){ animation-delay: calc(var(--stagger)*2); }
  .tags .tag:nth-child(3){ animation-delay: calc(var(--stagger)*3); }
  .tags .tag:nth-child(4){ animation-delay: calc(var(--stagger)*4); }
  .tags .tag:nth-child(5){ animation-delay: calc(var(--stagger)*5); }
  .tags .tag:nth-child(6){ animation-delay: calc(var(--stagger)*6); }
  .tags .tag:nth-child(7){ animation-delay: calc(var(--stagger)*7); }
}
@keyframes tagIn{ to{ opacity:1; transform: translateY(0);} }

/* === Desktop: Active chip = green fill ========================= */
@media (min-width: 1025px){
  :root{
    --chip-green-1: #34d399; /* emerald 400 */
    --chip-green-2: #10b981; /* emerald 500 */
    --chip-green-ring: rgba(34,197,94,.35);
  }
  .tag.is-active,
  .tag[aria-selected="true"],
  .tag.selected{
    background: linear-gradient(135deg, var(--chip-green-1), var(--chip-green-2)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(16,185,129,.28) !important;
  }
  .tag.is-active::before,
  .tag[aria-selected="true"]::before,
  .tag.selected::before{ opacity: 0 !important; }
  .tag.is-active:hover,
  .tag[aria-selected="true"]:hover,
  .tag.selected:hover{ transform: translateY(-2px); }
  .tag.is-active:focus-visible,
  .tag[aria-selected="true"]:focus-visible,
  .tag.selected:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 4px var(--chip-green-ring),
      0 12px 28px rgba(16,185,129,.28) !important;
  }
}

/* === Desktop: Pro badges for พร้อมทำ / เร็ว ๆ นี้ ================= */
@media (min-width: 1025px){
  :root{
    --badge-ready-1:#34d399;  /* emerald 400 */
    --badge-ready-2:#10b981;  /* emerald 500 */
    --badge-soon-1:#f59e0b;   /* amber 500 */
    --badge-soon-2:#f97316;   /* orange 500 */
  }
  .card .badge{
    position:absolute;
    top:10px; right:-10px;
    padding:8px 16px 8px 28px;
    border-radius:999px 12px 12px 999px;
    border:0; font-weight:900; letter-spacing:.1px; line-height:1; color:#fff;
    box-shadow: 0 12px 26px rgba(2,8,23,.18), inset 0 1px 0 rgba(255,255,255,.28);
    isolation:isolate;
    transition:transform .16s ease, filter .18s ease, box-shadow .18s ease;
  }
  .card .badge::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(0,0,0,.08));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none; opacity:.55;
  }
  .card .badge::after{
    content:""; position:absolute; left:10px; top:50%; transform:translateY(-50%);
    width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.92);
    box-shadow:0 0 0 2px rgba(255,255,255,.35);
  }
  .card:hover .badge{ transform:translateX(2px) translateY(-1px); filter:saturate(112%); }
  .card .badge.ready{ background:linear-gradient(135deg, var(--badge-ready-1), var(--badge-ready-2)); }
  .card .badge.soon { background:linear-gradient(135deg, var(--badge-soon-1), var(--badge-soon-2)); }
}

/* =======================================================
   ✅ CARD INTERACTION (DESKTOP)
   ======================================================= */
@media (min-width: 1025px){
  .card::before{
    content: none !important;
    opacity: 0 !important;
    background: none !important;
  }
  .card{
    position: relative;
    background:#fff !important;
    border:1px solid var(--ring);
    box-shadow: 0 12px 22px rgba(2,8,23,.06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    will-change: transform;
  }
  .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(2,8,23,.12);
    border-color: #dbeafe;
  }
  .card:active,
  .card:focus-visible,
  .card.is-selected{
    animation: card-pop .24s cubic-bezier(.22,.9,.24,1) both;
    outline: none;
  }
  .card:active .badge,
  .card:focus-visible .badge{ transform: translateX(2px) translateY(-1px); }

  @keyframes card-pop{
    0%   { transform: translateY(-2px) scale(1); }
    60%  { transform: translateY(-2px) scale(1.04); }
    100% { transform: translateY(-2px) scale(1); }
  }

  @media (prefers-reduced-motion: reduce){
    .card{ transition: box-shadow .18s ease, border-color .18s ease; }
    .card:active, .card:focus-visible, .card.is-selected{ animation: none; }
  }
}

/* =================== DESKTOP HERO BOTTOM FADE (scoped) =================== */
/* รวมไว้ใน @media เดียว (เลี่ยงชนกับบล็อกก่อนหน้า) */
@media (min-width:1025px){
  .hero{
    position: relative;
    overflow: visible !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
  .hero::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 56px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-2));
  }
}

/* ===================== TOAST (final, paste at very end) ===================== */
/* Global toast for "เร็วๆ นี้" or any notice; safe to append; no HTML/JS change */

.toast{
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom)); /* รองรับขอบจอ iPhone */
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;

  background: #111827;          /* Slate-900 */
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(2,8,23,.18);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;

  z-index: 9999;
  transition: transform .2s ease, opacity .2s ease;
}

/* เมื่อเรียก showToast() ให้เพิ่มคลาส .show ที่ element */
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* โทนสีเสริม (ถ้ามีการส่ง type จาก JS) */
.toast.success{ background:#065f46; border-color:#10b981; } /* เขียว */
.toast.warn{    background:#92400e; border-color:#f59e0b; } /* ส้ม */
.toast.error{   background:#7f1d1d; border-color:#ef4444; } /* แดง */

/* ปรับขนาดบนจอเล็ก */
@media (max-width: 480px){
  .toast{
    font-size: 0.92rem;
    padding: 10px 14px;
    max-width: min(92vw, 520px);
    text-align: center;
  }
}

/* === TAG/CHIP BAR — Mobile-friendly & Accessible === */
:root{ --chip-bg:#f1f5f9; --chip-bd:#e5e7eb; --chip-text:#0f172a; --chip-accent:#22c55e; }

.tags{                 /* คอนเทนเนอร์ของชิป */
  display:flex; gap:10px; flex-wrap:wrap;
  margin:8px 0 12px;
}

.tag{                  /* ชิปปุ่มปกติ */
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px;
  border-radius:999px;
  background:var(--chip-bg);
  border:1px solid var(--chip-bd);
  color:var(--chip-text);
  font-weight:600; letter-spacing:.1px;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .02s ease;
}
.tag:hover{ background:#e8edf3; }
.tag:active{ transform:translateY(1px); }

/* สถานะที่เลือกอยู่ */
.tag.is-active,
.tag[aria-current="true"]{
  background:color-mix(in oklab, var(--chip-accent) 18%, #fff);
  border-color:color-mix(in oklab, var(--chip-accent) 40%, #e5e7eb);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--chip-accent) 16%, #fff) inset;
  color:#0b3b2d;
}

/* โฟกัสจากคีย์บอร์ด */
.tag:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(34,197,94,.35);
}

/* มือถือ: ทำแถวชิปเต็มขอบจอ + สไลด์นิ้วได้ */
@media (max-width:640px){
  .tags{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    gap:8px; padding:6px calc(env(safe-area-inset-right) + 12px) 6px calc(env(safe-area-inset-left) + 12px);
    width:100vw; margin-left:50%; transform:translateX(-50%);  /* full-bleed */
  }
  .tags::-webkit-scrollbar{ display:none; }
}

/* === CHIP BAR GHOST-FRAME FIX (put at very end) === */
.toolbar,
#filterTags,
.tags {
  overflow: visible !important;           /* กันการตัดเงาปุ่ม */
  background: transparent !important;     /* ล้างพื้นหลังจาง ๆ */
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-mask: none !important;          /* กัน mask กลบขอบ */
  mask: none !important;
  backdrop-filter: none !important;       /* กันเบลอครอบทั้งแท่ง */
}

/* ปิด overlay/pseudo-element ที่อาจสร้างกรอบ */
.toolbar::before, .toolbar::after,
#filterTags::before, #filterTags::after,
.tags::before, .tags::after {
  content: none !important;
}

/* ให้ชิปลอยอยู่เหนือเอฟเฟกต์อื่น ๆ */
#filterTags .tag, .tags .tag {
  position: relative;
  z-index: 1;
}