:root{
  --fg:#111;--muted:#666;--bg:#fff;--pri:#0a7;--bd:#eee;--link:#06c;
  --radius:12px;--h1:32px;--text:16px;
  --gradient-primary:linear-gradient(135deg, #0a7, #06c);
  --gradient-success:linear-gradient(135deg, #10b981, #059669);
  --gradient-warning:linear-gradient(135deg, #f59e0b, #d97706);
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px rgba(0,0,0,.08);
  --shadow-lg:0 10px 15px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px rgba(0,0,0,.15);
}

/* 导入增强样式 */
@import url('enhanced-styles.css');
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,Helvetica,'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}mark{background:#ffeb3b33}
header{
  padding:16px 20px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(255,255,255,0.95);
  box-shadow:0 4px 20px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
}

footer{
  padding:20px 16px;
  border-top:1px solid var(--bd);
  border-bottom:none;
  color:var(--muted);
  font-size:12px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.02));
}
.container{max-width:1080px;margin:0 auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.card{
  border:1px solid var(--bd);
  padding:20px;
  border-radius:16px;
  background:var(--card-bg,#fff);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:4px;
  background:var(--gradient-success);
  transform:scaleX(0);
  transition:transform 0.3s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
  border-color:var(--pri);
}

.card:hover::before{
  transform:scaleX(1);
}
.card:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.breadcrumb{font-size:13px;color:var(--muted);margin:10px 0}
h1{
  font-size:32px;
  margin:16px 0 20px;
  font-weight:700;
  background:linear-gradient(135deg, var(--fg), var(--link));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1.2;
}

h2{
  font-size:24px;
  margin:20px 0 16px;
  font-weight:600;
  color:var(--fg);
  position:relative;
  padding-left:12px;
}

h2::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  bottom:4px;
  width:4px;
  background:var(--gradient-success);
  border-radius:2px;
}
.meta{color:var(--muted);font-size:13px}
.tag{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--bd);
  border-radius:20px;
  font-size:12px;
  color:var(--muted);
  margin-right:8px;
  margin-bottom:8px;
  background:rgba(0,0,0,0.02);
  transition:all 0.3s ease;
  font-weight:500;
}

.tag:hover{
  background:var(--gradient-success);
  color:white;
  border-color:var(--pri);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(10, 167, 119, 0.3);
}
nav a{
  margin-right:14px;
  padding:8px 12px;
  border-radius:8px;
  font-weight:500;
  transition:all 0.3s ease;
  position:relative;
}

nav a:hover{
  background:var(--gradient-success);
  color:white;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(10, 167, 119, 0.3);
}

nav a.active{
  background:var(--gradient-success);
  color:white;
  box-shadow:0 2px 8px rgba(10, 167, 119, 0.2);
}
@media (prefers-color-scheme: dark){:root{--bg:#0b0c0e;--fg:#f0f2f5;--bd:#2a2d31;--link:#7cc4ff;--card-bg:#14161a}}
/* home tweaks */
.home h1{font-size:28px;letter-spacing:.2px}
.home .meta{margin-top:-4px;margin-bottom:12px}
.card strong{display:block;margin-bottom:6px}
.card .meta{font-size:12px}

/* 新增：现代化卡片设计 */
.card{
  border:1px solid var(--bd);
  padding:16px;
  border-radius:var(--radius);
  background:var(--card-bg,#fff);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--gradient-success);
  transform:scaleX(0);
  transition:transform 0.3s ease;
}

.card:hover::before{
  transform:scaleX(1);
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-xl);
  border-color:var(--pri);
}

/* 新增：现代化卡片设计 */
.card{
  border:1px solid var(--bd);
  padding:16px;
  border-radius:var(--radius);
  background:var(--card-bg,#fff);
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--gradient-success);
  transform:scaleX(0);
  transition:transform 0.3s ease;
}

.card:hover::before{
  transform:scaleX(1);
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-xl);
  border-color:var(--pri);
}

/* accessibility & readability */
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* sticky header */
header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.05);
  transition:all 0.3s ease;
}

header.scrolled{
  background:rgba(255,255,255,0.98);
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
}

/* lists & content rhythm */
ul{padding-left:22px}
ul li{margin:4px 0}
h1{font-weight:700}
h2{font-weight:600}

/* breadcrumb refinement */
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb a+a:before{content:"›";margin:0 6px;color:var(--muted)}

/* tag look tweak */
.tag{background:rgba(0,0,0,.03)}
@media (prefers-color-scheme: dark){
  .tag{background:rgba(255,255,255,.06)}
  nav a:hover{background:rgba(255,255,255,.06)}
}

/* responsive tuning */
@media (max-width:960px){
  .container{padding:16px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:640px){
  .container{padding:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
  .home h1{font-size:26px}
  
  /* 移动端导航优化 */
  nav{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
  nav a{margin-right:4px;padding:6px 8px;font-size:13px;flex:0 0 auto}
  
  /* 移动端搜索优化 */
  .search form{flex-direction:column;gap:8px}
  .search input[type="search"]{width:100%;margin-bottom:8px}
  .search button{width:100%}
  
  /* 移动端卡片优化 */
  .card{padding:14px}
  .grid .card{padding-left:40px;min-height:60px}
  .grid .card::before{left:10px;top:10px;width:24px;height:24px;font-size:14px}
}
@media (max-width:420px){
  .grid{grid-template-columns:1fr}
  nav a{font-size:12px;padding:4px 6px}
  
  /* 超小屏幕优化 */
  .container{padding:12px}
  .hero{padding:16px 12px}
  .hero h1{font-size:24px}
  h1{font-size:28px}
  h2{font-size:20px}
}

/* visual polish */
html{scroll-behavior:smooth}
a{transition:color .15s ease, text-decoration-color .15s ease;text-underline-offset:2px;text-decoration-thickness:1px}
.card{will-change:transform,box-shadow}
.card:active{transform:translateY(-1px) scale(.997)}
.card:hover{box-shadow:0 12px 32px rgba(0,0,0,.12)}
nav a.active{background:rgba(0,0,0,.06);color:var(--fg);font-weight:600}
img{max-width:100%;height:auto;display:block;border-radius:8px}

/* subtle separators */
.section{border-top:1px solid var(--bd);margin-top:20px;padding-top:16px}

/* gradient title for home */
.home h1{background:linear-gradient(90deg,var(--fg),var(--link));-webkit-background-clip:text;background-clip:text;color:transparent}

/* dark mode tweaks */
@media (prefers-color-scheme: dark){
  .card:hover{box-shadow:0 14px 36px rgba(0,0,0,.45)}
  nav a.active{background:rgba(255,255,255,.06)}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
  .card:hover,.card:active{transform:none;box-shadow:0 6px 20px rgba(0,0,0,.08)}
}

/* 移动端优化 - 触摸友好的交互 */
@media (max-width: 768px) {
  /* 增大触摸目标 */
  nav a {
    padding: 12px 16px;
    margin: 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .card {
    min-height: 80px;
    padding: 20px 16px;
  }
  
  /* 优化按钮触摸体验 */
  .search button, .enhanced-search button {
    min-height: 44px;
    font-size: 16px;
  }
  
  /* 优化输入框 */
  input[type="search"], input[type="text"] {
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 44px;
  }
  
  /* 优化选择框 */
  select {
    min-height: 44px;
    font-size: 16px;
  }
  
  /* 优化列表项间距 */
  ul li {
    margin: 8px 0;
    line-height: 1.5;
  }
  
  /* 优化标题间距 */
  h1 {
    margin: 20px 0 16px;
    font-size: 28px;
    line-height: 1.3;
  }
  
  h2 {
    margin: 24px 0 16px;
    font-size: 22px;
    line-height: 1.3;
  }
  
  /* 优化面包屑导航 */
  .breadcrumb {
    font-size: 14px;
    margin: 16px 0;
  }
  
  /* 优化网格布局 */
  .grid {
    gap: 12px;
  }
  
  /* 优化卡片内容 */
  .card strong {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .card .meta {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .container {
    padding: 12px;
  }
  
  nav a {
    padding: 10px 12px;
    font-size: 14px;
    margin: 2px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* 移动端优化 - 触摸友好的交互 */
@media (max-width: 768px) {
  /* 增大触摸目标 */
  nav a {
    padding: 12px 16px;
    margin: 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .card {
    min-height: 80px;
    padding: 20px 16px;
  }
  
  /* 优化按钮触摸体验 */
  .search button, .enhanced-search button {
    min-height: 44px;
    font-size: 16px;
  }
  
  /* 优化输入框 */
  input[type="search"], input[type="text"] {
    font-size: 16px; /* 防止iOS缩放 */
    min-height: 44px;
  }
  
  /* 优化选择框 */
  select {
    min-height: 44px;
    font-size: 16px;
  }
  
  /* 优化列表项间距 */
  ul li {
    margin: 8px 0;
    line-height: 1.5;
  }
  
  /* 优化标题间距 */
  h1 {
    margin: 20px 0 16px;
    font-size: 28px;
    line-height: 1.3;
  }
  
  h2 {
    margin: 24px 0 16px;
    font-size: 22px;
    line-height: 1.3;
  }
  
  /* 优化面包屑导航 */
  .breadcrumb {
    font-size: 14px;
    margin: 16px 0;
  }
  
  /* 优化网格布局 */
  .grid {
    gap: 12px;
  }
  
  /* 优化卡片内容 */
  .card strong {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .card .meta {
    font-size: 14px;
    line-height: 1.4;
  }
}

/* 超小屏幕优化 */
@media (max-width: 375px) {
  .container {
    padding: 12px;
  }
  
  nav a {
    padding: 10px 12px;
    font-size: 14px;
    margin: 2px;
  }
  
  h1 {
    font-size: 24px;
  }
  
  h2 {
    font-size: 20px;
  }
  
  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* home index polish: category icons + nav underline + card texture */
.home .grid{margin-top:12px}

/* textured card background (very subtle, keeps readability) */
.card{background:
  radial-gradient(1200px 200px at 50% -100px, rgba(0,0,0,.03), transparent 60%),
  var(--card-bg,#fff)}

/* category avatar icons using nth-child, no html changes needed */
.grid .card{position:relative;padding-left:44px;min-height:64px}
.grid .card::before{
  content:"";
  position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:999px;
  display:grid;place-items:center;font-size:16px;line-height:1;
  background:radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.9) 0, rgba(255,255,255,.6) 40%, transparent 60%), linear-gradient(135deg, #e8f7f3, #eaf3ff);
  color:#0b6452;box-shadow:inset 0 0 0 1px var(--bd), 0 2px 6px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease
}
.card:hover::before{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--bd), 0 6px 14px rgba(0,0,0,.14)}
/* map icons by index (12 categories on home) */
.grid .card:nth-child(1)::before{content:"🥬"}   /* 叶菜类 */
.grid .card:nth-child(2)::before{content:"🥕"}   /* 根茎类 */
.grid .card:nth-child(3)::before{content:"🥒"}   /* 瓜果类 */
.grid .card:nth-child(4)::before{content:"🍆"}   /* 茄果类 */
.grid .card:nth-child(5)::before{content:"🫘"}   /* 豆类 */
.grid .card:nth-child(6)::before{content:"🧄"}   /* 葱蒜类 */
.grid .card:nth-child(7)::before{content:"🍄"}   /* 菌菇类 */
.grid .card:nth-child(8)::before{content:"🥦"}   /* 花菜类 */
.grid .card:nth-child(9)::before{content:"🌊"}   /* 海藻水生类 */
.grid .card:nth-child(10)::before{content:"🌱"}  /* 芽菜类 */
.grid .card:nth-child(11)::before{content:"🌾"}  /* 野菜类 */
.grid .card:nth-child(12)::before{content:"🧺"}  /* 其他 */

/* animated underline for nav */
nav a{position:relative}
nav a::after{
  content:"";position:absolute;left:8px;right:8px;bottom:4px;height:2px;
  background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease
}
nav a:hover::after, nav a.active::after{transform:scaleX(1)}

/* footer nuance */
footer{background:linear-gradient(180deg, transparent, rgba(0,0,0,.02))}
@media (prefers-color-scheme: dark){
  .grid .card::before{
    background:radial-gradient(120% 120% at 30% 30%, rgba(20,22,26,.9) 0, rgba(20,22,26,.6) 40%, transparent 60%), linear-gradient(135deg, #182126, #181a20);
    color:#a8fff0;box-shadow:inset 0 0 0 1px var(--bd), 0 2px 10px rgba(0,0,0,.5)
  }
  footer{background:linear-gradient(180deg, transparent, rgba(255,255,255,.03))}
}

/* hero + search styles and adjustable variables */
:root{--radius:12px;--h1:32px;--text:16px}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.hero{
  margin-top:8px;margin-bottom:18px;padding:28px 20px;
  border:1px solid var(--bd);border-radius:var(--radius,12px);
  background:linear-gradient(180deg, rgba(10,167,119,.06), transparent 70%)
}
.hero h1{font-size:var(--h1,32px);margin:6px 0 8px;letter-spacing:.2px}
.hero .meta{margin:0;color:var(--muted)}

.search{margin-top:14px}
.search form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search input[type="search"]{
  flex:1 1 260px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;
  font-size:16px;background:var(--bg);color:var(--fg)
}
.search input[type="search"]:focus{outline:2px solid var(--pri);outline-offset:2px}
.search button{
  padding:10px 14px;border-radius:10px;border:1px solid var(--pri);
  background:var(--pri);color:#fff;font-weight:600;cursor:pointer;
  transition:filter .15s ease, transform .12s ease
}
.search button:hover{filter:brightness(.98)}
.search button:active{transform:translateY(1px)}

/* 搜索页面专用样式 */
.search-container{
  margin:24px 0;
  padding:20px;
  border:1px solid var(--bd);
  border-radius:var(--radius);
  background:var(--card-bg,#fff);
}

.enhanced-search{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.enhanced-search input{
  flex:1;
  padding:12px 16px;
  border:1px solid var(--bd);
  border-radius:8px;
  font-size:16px;
  background:var(--bg);
  color:var(--fg)
}

.enhanced-search input:focus{
  outline:2px solid var(--pri);
  outline-offset:2px;
}

.enhanced-search button{
  padding:12px 20px;
  border:1px solid var(--pri);
  border-radius:8px;
  background:var(--pri);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
}

.enhanced-search button:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}

.filter-options{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.filter-options label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--muted);
}

.filter-options select{
  padding:6px 10px;
  border:1px solid var(--bd);
  border-radius:6px;
  background:var(--bg);
  color:var(--fg);
}

.filter-options input[type="checkbox"]{
  width:16px;
  height:16px;
}

.search-stats{
  padding:8px 0;
  border-bottom:1px solid var(--bd);
  margin-bottom:16px;
}

@media (max-width:640px){
  .hero{padding:22px 16px}
  .hero h1{font-size:28px}
  .search button{width:100%}
  
  .search-container{
    padding:16px;
    margin:16px 0;
  }
  
  .enhanced-search{
    flex-direction:column;
    gap:8px;
  }
  
  .filter-options{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}

@media (prefers-color-scheme: dark){
  .hero{background:linear-gradient(180deg, rgba(10,167,119,.12), transparent 70%)}
}