:root{
  --accent:#0f766e; --accent-2:#14b8a6; --accent-ink:#0b5d56;
  --bg:#f6f8f7; --panel:#ffffff; --panel-2:#eef3f1;
  --ink:#16201d; --ink-2:#4a5a55; --muted:#7d8b86;
  --line:#dde6e2; --line-2:#eef3f1;
  --card:#ffffff; --shadow:0 1px 3px rgba(16,40,34,.08),0 6px 22px rgba(16,40,34,.06);
  --radius:14px; --radius-sm:9px;
}
html.dark{
  --bg:#0e1614; --panel:#15201d; --panel-2:#1b2825;
  --ink:#e7efec; --ink-2:#b3c4be; --muted:#7f938c;
  --line:#26352f; --line-2:#20302b;
  --card:#16221e; --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 26px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,#0f766e 0%,#0b5d56 55%,#0a4f49 100%); color:#eafaf6; padding:0 0 30px}
.hero-inner{max-width:1180px; margin:0 auto; padding:18px 22px 6px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 14px}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:#eafaf6; font-weight:700; font-size:18px}
.brand-mark{font-size:22px}
.topbar-right{display:flex; align-items:center; gap:10px}
.theme-switch{background:rgba(255,255,255,.12); border:none; color:#eafaf6; width:38px; height:38px; border-radius:50%; cursor:pointer; display:grid; place-items:center}
.theme-switch:hover{background:rgba(255,255,255,.22)}
.ts-moon{display:none}
html.dark .ts-sun{display:none}
html.dark .ts-moon{display:inline}
.menu{position:relative}
.lang-sum{list-style:none; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.12); color:#eafaf6; padding:7px 12px; border-radius:20px; cursor:pointer; font-size:14px; user-select:none}
.lang-sum:hover{background:rgba(255,255,255,.22)}
.lang-sum::-webkit-details-marker{display:none}
.menu-list{position:absolute; right:0; top:46px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; min-width:150px; z-index:40}
.lang-opt{display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink); padding:8px 12px; border-radius:8px; cursor:pointer; font-size:14px}
.lang-opt:hover{background:var(--panel-2)}
.hero h1{font-size:34px; margin:8px 0 6px; letter-spacing:.5px}
.hero-sub{font-size:17px; margin:0 0 8px; opacity:.95; font-weight:600}
.hero-intro{font-size:14.5px; margin:0 0 18px; max-width:760px; opacity:.9; line-height:1.7}
.stats{display:flex; gap:14px; flex-wrap:wrap}
.stat{background:rgba(255,255,255,.13); border-radius:12px; padding:12px 18px; min-width:96px}
.stat-n{display:block; font-size:24px; font-weight:800}
.stat-l{display:block; font-size:13px; opacity:.9}
/* ---------- Layout ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:22px; display:grid; grid-template-columns:236px 1fr; gap:24px; align-items:start}
.sidebar{position:sticky; top:14px}
.side-nav{display:flex; flex-direction:column; gap:3px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:10px; box-shadow:var(--shadow)}
.nav-item{display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none; color:var(--ink-2); padding:9px 12px; border-radius:10px; font-size:14.5px; font-weight:600}
.nav-item:hover{background:var(--panel-2)}
.nav-item.active{background:var(--accent); color:#fff}
.nav-item .nc{font-size:12.5px; background:var(--panel-2); color:var(--muted); padding:1px 8px; border-radius:10px}
.nav-item.active .nc{background:rgba(255,255,255,.25); color:#fff}
/* ---------- Toolbar ---------- */
.main{min-width:0}
.toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); margin-bottom:16px}
.search-wrap{flex:1 1 240px}
.q{width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); font-size:15px; outline:none}
.q:focus{border-color:var(--accent)}
.filter-group{display:flex; align-items:center; gap:8px}
.fg-label{font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap}
.fg-options{display:flex; gap:6px; flex-wrap:wrap}
.pill{border:1px solid var(--line); background:var(--bg); color:var(--ink-2); padding:6px 11px; border-radius:20px; cursor:pointer; font-size:13.5px; font-weight:600}
.pill:hover{border-color:var(--accent)}
.pill.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.reset-btn{border:1px solid var(--line); background:var(--bg); color:var(--ink-2); padding:8px 14px; border-radius:10px; cursor:pointer; font-size:13.5px; font-weight:600}
.reset-btn:hover{border-color:var(--accent); color:var(--accent)}
.result-meta{font-size:13.5px; color:var(--muted); margin:0 2px 12px}
.empty{color:var(--muted); padding:30px; text-align:center}
/* ---------- Cards ---------- */
.results{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px}
.card-head{display:flex; flex-direction:column; gap:6px}
.cat-badge{align-self:flex-start; font-size:12px; font-weight:700; padding:2px 9px; border-radius:20px; background:var(--panel-2); color:var(--accent-ink)}
.card-title{margin:0; font-size:17px; line-height:1.35}
.card-meta{display:flex; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--muted)}
.card-meta .stars{color:#e0a32e; letter-spacing:1px; font-size:14px}
.card-meta .cal,.card-meta .dur{background:var(--panel-2); padding:1px 8px; border-radius:8px}
.card-intro{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.6}
.card-toggle{align-self:flex-start; border:1px solid var(--accent); color:var(--accent); background:transparent; padding:6px 14px; border-radius:9px; cursor:pointer; font-size:13.5px; font-weight:600}
.card-toggle:hover{background:var(--accent); color:#fff}
.card-detail{border-top:1px dashed var(--line); padding-top:10px; margin-top:2px}
.d-sec{margin:10px 0}
.d-sec h4{margin:0 0 6px; font-size:13.5px; color:var(--accent-ink); font-weight:700}
.d-sec ul,.d-sec ol{margin:0; padding-left:20px; font-size:13.5px; color:var(--ink-2); line-height:1.7}
.d-sec ul li,.d-sec ol li{margin:3px 0}
/* 分类强调色 */
.cat-aquatic .cat-badge,.nav-item.cat-aquatic.active{background:#0e7490;color:#e0f7fb}
.cat-breakfast .cat-badge,.nav-item.cat-breakfast.active{background:#b45309;color:#fff7ed}
.cat-condiment .cat-badge,.nav-item.cat-condiment.active{background:#9d174d;color:#fff}
.cat-dessert .cat-badge,.nav-item.cat-dessert.active{background:#be185d;color:#fff}
.cat-drink .cat-badge,.nav-item.cat-drink.active{background:#0369a1;color:#e0f2fe}
.cat-meat_dish .cat-badge,.nav-item.cat-meat_dish.active{background:#b91c1c;color:#fff}
.cat-semi-finished .cat-badge,.nav-item.cat-semi-finished.active{background:#57534e;color:#fff}
.cat-soup .cat-badge,.nav-item.cat-soup.active{background:#0f766e;color:#eafaf6}
.cat-staple .cat-badge,.nav-item.cat-staple.active{background:#a16207;color:#fffbeb}
.cat-vegetable_dish .cat-badge,.nav-item.cat-vegetable_dish.active{background:#15803d;color:#ecfdf3}
.cat-tips .cat-badge,.nav-item.cat-tips.active{background:#4f46e5;color:#eef2ff}
/* ---------- About ---------- */
.about-page{max-width:780px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow)}
.about-intro{font-size:15px; line-height:1.8; color:var(--ink-2)}
.about-page h3{color:var(--accent-ink); margin:18px 0 6px; font-size:16px}
.about-page ul{padding-left:20px; font-size:14px; color:var(--ink-2); line-height:1.8}
.about-page p{font-size:14px; color:var(--ink-2); line-height:1.8}
.art-intro{font-size:14.5px; color:var(--ink-2); line-height:1.7; margin:0 0 4px}
/* 纯文本网址 */
.url{display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.86em; color:var(--muted); background:var(--panel-2); border:1px dashed var(--line); border-radius:6px; padding:0 6px; word-break:break-all}
/* ---------- Footer ---------- */
.site-foot{background:var(--panel); border-top:1px solid var(--line); margin-top:30px}
.sf-inner{max-width:1180px; margin:0 auto; padding:20px 22px; font-size:13px; color:var(--muted)}
.sf-copy{margin:0 0 6px; line-height:1.7}
.src-note{margin:0}
/* ---------- Responsive ---------- */
@media (max-width:860px){
  .wrap{grid-template-columns:1fr; gap:16px}
  .sidebar{position:static}
  .side-nav{flex-direction:row; flex-wrap:wrap}
  .nav-item{flex:1 1 auto; justify-content:center}
  .hero h1{font-size:27px}
  .results{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}
@media (max-width:520px){
  .hero-inner,.wrap,.sf-inner{padding-left:14px; padding-right:14px}
  .results{grid-template-columns:1fr}
}
/* RTL (阿拉伯语) */
html[dir="rtl"] .side-nav,html[dir="rtl"] .about-page{direction:rtl}
html[dir="rtl"] .nav-item{flex-direction:row-reverse}
html[dir="rtl"] .card-head{direction:rtl}
html[dir="rtl"] .d-sec ul,html[dir="rtl"] .d-sec ol,html[dir="rtl"] .about-page ul{padding-left:0; padding-right:20px}