/* ========== HERO Section - Modern & Premium ========== */
.hero{
  position:relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(151,180,94,0.15) 0%, transparent 50%),
    radial-gradient(circle at 85% 0%, rgba(40,112,47,0.35) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(34,181,97,0.2) 0%, transparent 60%),
    linear-gradient(165deg, var(--primary-950) 0%, var(--primary-800) 55%, var(--primary-700) 100%);
  color:#fff;
  padding:clamp(32px, 5vh, 48px) 24px clamp(28px, 4vh, 40px);
  overflow:hidden;
  border-bottom:5px solid var(--primary-500);
  box-shadow:0 8px 32px rgba(40,112,47,0.3);
  /* Performance optimization */
  will-change: auto;
  contain: layout style;
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity:0.4;
  pointer-events:none;
}

.pin-field{
  position:absolute; inset:0; pointer-events:none;
  background-image: url('../assets/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  filter: brightness(1.1) saturate(0.8);
}

.pin-field::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(34, 181, 97, 0.02) 0px, transparent 1px, transparent 30px, rgba(34, 181, 97, 0.02) 31px),
    repeating-linear-gradient(90deg, rgba(34, 181, 97, 0.02) 0px, transparent 1px, transparent 30px, rgba(34, 181, 97, 0.02) 31px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
  pointer-events: none;
}

.stamp{
  position:absolute; right:-18px; top:-18px; width:150px; height:150px;
  border:1.5px dashed rgba(151,180,94,0.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0.9;
  animation:spin 60s linear infinite;
}

.stamp::before{
  content:'✓ ตรวจแล้ว • AUDITED • ตรวจแล้ว • AUDITED •';
  position:absolute; inset:14px; border-radius:50%;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; color:rgba(184,204,218,0.55);
  display:none;
}

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

.hero-inner{ position:relative; max-width:800px; margin:0 auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:clamp(11px, 2vw, 13px); letter-spacing:.1em; font-weight:700;
  color:var(--primary-400); text-transform:uppercase;
  background:rgba(151,180,94,0.14); border:1.5px solid rgba(151,180,94,0.4);
  padding:8px 18px; border-radius:999px; margin-bottom:clamp(10px, 2vh, 14px);
  backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(151,180,94,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}

.eyebrow .live-dot{
  width:7px; height:7px; border-radius:50%; background:var(--primary-400);
  box-shadow:0 0 0 0 rgba(151,180,94,0.7); animation:pulse 2s ease-in-out infinite;
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(151,180,94,0.6); }
  50%{ box-shadow:0 0 0 8px rgba(151,180,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(151,180,94,0); }
}

.hero h1{
  font-size:clamp(32px, 6vw, 48px); font-weight:800; margin:0 0 4px;
  letter-spacing:-0.025em;
  text-shadow:0 2px 20px rgba(0,0,0,0.2);
  line-height:1.15;
}

.by-author{
  margin:0 0 16px; color:rgba(255,255,255,0.8); font-size:clamp(13px, 2vw, 15px);
  font-weight:500; letter-spacing:0.02em;
  text-shadow:0 1px 4px rgba(0,0,0,0.15);
}

.hero p.sub{
  margin:0 0 22px; color:rgba(255,255,255,0.82); font-size:15px; max-width:520px; line-height:1.6;
  font-weight:400;
  text-shadow:0 1px 4px rgba(0,0,0,0.15);
}

.search-wrap{ position:relative; max-width:560px; }

.search-box{
  display:flex; align-items:center; gap:10px;
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-md) saturate(1.2);
  -webkit-backdrop-filter:var(--blur-md) saturate(1.2);
  border-radius:16px; padding:6px 8px 6px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.3);
  transition:all .25s var(--ease);
  /* Performance optimization */
  will-change: transform, box-shadow;
}

.search-box:focus-within{
  box-shadow:0 16px 48px rgba(0,0,0,0.35), 0 0 0 3px rgba(34,181,97,0.4);
  transform:translateY(-2px);
  border-color:#fff;
}

.search-box svg{ flex:none; color:var(--primary-700); width:20px; height:20px; }

#searchInput{
  flex:1; border:none; outline:none; background:transparent;
  font-family:'Noto Sans Thai',sans-serif; font-size:15px; color:var(--ink-900);
  padding:12px 4px;
  font-weight:500;
  /* Disable zoom on iOS when focusing */
  font-size:16px;
}

#searchInput::placeholder{ color:var(--ink-400); font-weight:400; }

.clear-btn{
  display:none; border:none; background:var(--cream-100); color:var(--ink-600);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px;
  align-items:center; justify-content:center; flex:none; transition:all .2s var(--ease);
}

.clear-btn:hover{
  background:var(--line);
  color:var(--ink-900);
  transform:rotate(90deg);
}

.stat-row{
  display:flex; gap:12px; margin-top:clamp(14px, 3vh, 18px); flex-wrap:wrap;
}

.stat-pill{
  font-size:13px; color:rgba(255,255,255,0.88); font-weight:500;
  background:rgba(255,255,255,0.10); border:1.5px solid rgba(255,255,255,0.18);
  padding:8px 16px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  backdrop-filter:blur(8px);
  box-shadow:0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.15);
  transition:all .2s var(--ease);
}

.stat-pill:hover{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.25);
  transform:translateY(-1px);
}

.stat-pill b{
  color:var(--primary-400); font-family:'Noto Sans Thai',sans-serif; font-weight:800;
  font-size:14px;
}

/* ========== FILTER BAR - Modern Glassmorphism ========== */
.filterbar{
  position:sticky; top:0; z-index:20;
  background:var(--glass-bg);
  backdrop-filter:var(--blur-lg) saturate(1.3);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.3);
  border-bottom:1px solid var(--glass-border);
  padding:12px 20px;
  transition:all .25s var(--ease);
  box-shadow:var(--glass-shadow);
  border:1px solid rgba(255, 255, 255, 0.3);
  border-radius:0;
}

.filterbar.scrolled{
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-lg) saturate(1.5);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.5);
  box-shadow:0 8px 32px rgba(40,112,47,0.15);
}

.filter-scroll{
  display:flex; gap:8px; overflow-x:auto; max-width:920px; margin:0 auto;
  scrollbar-width:none; padding:2px;
}

.filter-scroll::-webkit-scrollbar{ display:none; }

.chip{
  flex:none; display:flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg);
  backdrop-filter:var(--blur-sm) saturate(1.1);
  -webkit-backdrop-filter:var(--blur-sm) saturate(1.1);
  font-size:13px; font-weight:600; color:var(--ink-600);
  cursor:pointer; white-space:nowrap; transition:all .2s var(--ease);
  font-family:'Noto Sans Thai',sans-serif;
  box-shadow:0 1px 3px rgba(40,112,47,0.06);
  position:relative;
}

.chip:hover{
  border-color:var(--primary-500);
  color:var(--primary-700);
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(40,112,47,0.1);
  background:#fff;
}

.chip:active{ transform:translateY(0); }

.chip.active{
  background:linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 100%);
  border-color:var(--primary-700);
  color:#fff;
  box-shadow:0 4px 12px rgba(39,96,47,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-1px);
}

.chip.active:hover{ color:#fff; transform:translateY(-2px); }

.chip .dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
}

.chip .count{
  font-size:11px; opacity:0.7; background:rgba(0,0,0,0.08); border-radius:999px;
  padding:2px 7px; font-variant-numeric:tabular-nums; font-weight:700;
  min-width:22px; text-align:center;
}

.chip.active .count{
  background:rgba(255,255,255,0.25);
  opacity:1;
}

/* ========== MAIN Content Area ========== */
main{ max-width:920px; margin:0 auto; padding:20px 20px 80px; }

.status-line{
  font-size:13px; color:var(--ink-500); margin:0 4px 14px;
  font-weight:500;
}

.status-line b{
  color:var(--ink-900); font-variant-numeric:tabular-nums;
  font-weight:700;
}

.empty-state{
  text-align:center; padding:80px 24px; color:var(--ink-400);
  background:var(--glass-bg);
  backdrop-filter:var(--blur-md);
  -webkit-backdrop-filter:var(--blur-md);
  border:1px dashed var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
}

.empty-state .icon{
  font-size:40px; margin-bottom:18px; width:76px; height:76px; line-height:76px;
  border-radius:50%; background:var(--neutral-100); display:inline-block;
  box-shadow:inset 0 2px 8px rgba(3,60,18,0.06);
}

.empty-state h3{
  color:var(--ink-900); font-size:20px; margin:0 0 10px; font-weight:700;
}

.empty-state p{
  font-size:15px; margin:0; max-width:380px; margin:0 auto; line-height:1.7;
  color:var(--ink-500);
}

/* ========== CARDS Grid - Premium Design ========== */
.results-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px;
}

@keyframes cardIn{
  from{ opacity:0; transform:translateY(12px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.card{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:var(--blur-md) saturate(1.2);
  -webkit-backdrop-filter:var(--blur-md) saturate(1.2);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:14px 16px; cursor:pointer;
  transition:all .2s var(--ease);
  display:flex; flex-direction:column; gap:10px;
  animation:cardIn .3s var(--ease) backwards;
  box-shadow:var(--glass-shadow);
  overflow:hidden;
  /* Performance optimizations */
  will-change: transform;
  contain: layout style paint;
  /* Add tap highlight color for mobile */
  -webkit-tap-highlight-color: rgba(34, 181, 97, 0.1);
}

.card::before{
  content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0;
  background:var(--card-accent, var(--primary-500)); opacity:0;
  transition:all .2s var(--ease);
  box-shadow:0 0 8px var(--card-accent, var(--primary-500));
}

.card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(40,112,47,0.04) 0%, transparent 60%);
  opacity:0;
  transition:opacity .25s var(--ease);
  pointer-events:none;
}

.card:hover{
  border-color:rgba(34,181,97,0.4);
  background:var(--glass-bg-strong);
  backdrop-filter:var(--blur-lg) saturate(1.3);
  -webkit-backdrop-filter:var(--blur-lg) saturate(1.3);
  box-shadow:0 12px 36px rgba(40,112,47,0.12), 0 0 0 1px rgba(34,181,97,0.1);
  transform:translateY(-3px);
}

.card:hover::before{ opacity:1; }
.card:hover::after{ opacity:1; }
.card:active{ transform:translateY(-1px); }

.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

.card-name{
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:15px;
  line-height:1.4; color:var(--ink-900);
  transition:color .2s var(--ease);
}

.card:hover .card-name{ color:var(--primary-700); }

.card-name mark{
  background:rgba(151,180,94,0.30); color:var(--ink-900);
  border-radius:4px; padding:1px 3px;
  box-shadow:inset 0 -1px 0 rgba(151,180,94,0.4);
}

.badge{
  flex:none; font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:999px;
  color:#fff; letter-spacing:.03em; font-family:'Noto Sans Thai',sans-serif;
  box-shadow:0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.2);
}

.card-meta{
  display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12.5px; color:var(--ink-600);
  font-weight:500;
}

.card-meta span{ display:inline-flex; align-items:center; gap:4px; }

.load-more-wrap{ display:flex; justify-content:center; margin-top:28px; }

.load-more{
  border:2px solid var(--primary-600); color:var(--primary-700); background:#fff;
  font-family:'Noto Sans Thai',sans-serif; font-weight:700; font-size:14.5px;
  padding:13px 28px; border-radius:999px; cursor:pointer;
  transition:all .22s var(--ease);
  box-shadow:var(--shadow-xs);
}

.load-more:hover{
  background:var(--primary-700); color:#fff; border-color:var(--primary-700);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2);
  transform:translateY(-2px);
}

.load-more:active{ transform:translateY(0); }