
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--fb);line-height:1.6;
  -webkit-font-smoothing:antialiased;min-height:100vh;background-image:var(--bg-img,none);
  background-size:var(--bg-size,auto);background-attachment:fixed;transition:background-color .35s,color .35s}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max,1240px);margin:0 auto;padding:var(--wrap-pad,34px 26px 60px)}

/* ---------- header（按风格填色） ---------- */
.hdr{display:flex;align-items:center;gap:16px;padding:14px 26px;position:sticky;top:0;z-index:40;
  background:var(--hd-bg,color-mix(in srgb,var(--accent) 13%,var(--bg)));
  border-bottom:var(--hd-bd,1px solid var(--line));
  backdrop-filter:var(--hd-blur,saturate(120%) blur(10px))}
.brand{display:flex;align-items:baseline;gap:10px;font-family:var(--fd);font-weight:var(--brand-w,700);
  letter-spacing:var(--ls,0);text-transform:var(--tt,none);font-size:var(--brand-s,19px);white-space:nowrap}
.brand .mark{color:var(--accent);font-size:.9em}
.brand em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--fg2);letter-spacing:.04em}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.switcher{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg2);font-family:var(--fb)}
.switcher select,.btn-ic{font:inherit;font-size:12.5px;padding:7px 10px;border-radius:var(--r-sel,9px);
  border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;max-width:210px}
.btn-ic{width:34px;height:34px;padding:0;display:grid;place-items:center;font-size:15px;line-height:1;flex:0 0 auto}
.btn-ic:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:var(--hero-pad,40px 0 22px);text-align:var(--hero-align,left)}
h1{font-family:var(--fd);font-size:var(--h1,clamp(30px,4.6vw,52px));line-height:1.16;margin:0 0 10px;
  font-weight:var(--h1-w,800);letter-spacing:var(--h1-ls,-.02em);text-transform:var(--tt,none)}
h1 .sub{display:block;font-size:var(--h1-sub,15px);font-weight:400;letter-spacing:.02em;color:var(--fg2);margin-top:11px}

/* ---------- 搜索（站内 / 站外 + 引擎） ---------- */
.searchwrap{display:flex;gap:8px;align-items:stretch;max-width:var(--search-w,760px);margin:var(--search-mt,20px) 0 0;flex-wrap:wrap}
.seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--in-bg,var(--card));flex:0 0 auto}
.seg button{font:inherit;font-size:12.5px;padding:6px 13px;border:0;border-radius:999px;background:transparent;
  color:var(--fg2);cursor:pointer;transition:.18s;white-space:nowrap}
.seg button.on{background:var(--accent);color:var(--on-accent,#fff);font-weight:600}
.engine{display:none;font:inherit;font-size:12.5px;padding:0 10px;border-radius:var(--in-r,10px);border:1px solid var(--line);
  background:var(--in-bg,var(--card));color:var(--fg);cursor:pointer;flex:0 0 auto;max-width:190px}
.engine.show{display:block}
.search{position:relative;flex:1 1 240px;min-width:180px}
.search input{width:100%;padding:var(--in-pad,12px 44px 12px 16px);font:inherit;font-size:14.5px;color:var(--fg);
  background:var(--in-bg,var(--card));border:var(--in-bd,1px solid var(--line));border-radius:var(--in-r,10px);
  outline:none;box-shadow:var(--in-sh,none);transition:.22s}
.search input::placeholder{color:var(--fg2);opacity:.75}
.search input:focus{border-color:var(--accent);box-shadow:var(--in-focus,0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent))}
.search .go{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:29px;height:29px;border:0;border-radius:8px;
  background:var(--accent);color:var(--on-accent,#fff);display:none;place-items:center;font-size:13px;cursor:pointer}
.search .go.show{display:grid}
.search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--fg2);
  font-size:13px;cursor:pointer;display:none}
.search .clr.show{display:block}

/* ---------- 分类导航（锚点跳转） ---------- */
.cats{display:flex;flex-wrap:wrap;gap:var(--chip-gap,8px);margin:var(--cats-mt,22px) 0 var(--cats-mb,30px)}
.chip{font-size:12.8px;padding:var(--chip-pad,7px 13px);border-radius:var(--chip-r,999px);
  border:var(--chip-bd,1px solid var(--line));background:var(--chip-bg,transparent);color:var(--fg2);
  cursor:pointer;transition:.18s;white-space:nowrap;font-family:var(--fb)}
.chip b{font-weight:600;color:var(--fg2);opacity:.7;margin-left:5px;font-size:11.5px}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);font-weight:600}
.chip.on b{color:var(--on-accent,#fff);opacity:.75}

/* ---------- 分类分组 ---------- */
.cat-block{scroll-margin-top:78px;margin-bottom:var(--blk-gap,34px)}
.cat-h{display:flex;align-items:baseline;gap:10px;font-family:var(--fd);font-size:var(--cat-h-s,16px);
  font-weight:700;letter-spacing:var(--ls,0);margin:0 0 13px;padding-bottom:8px;
  border-bottom:var(--cat-h-bd,1px solid var(--line))}
.cat-h .n{font-size:11.5px;font-weight:400;color:var(--fg2);letter-spacing:.04em}
.cat-h::before{content:'';width:3px;height:.92em;background:var(--accent);border-radius:2px;flex:0 0 auto}
.grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(var(--min,250px),1fr))!important;
  gap:var(--gap,13px)!important;align-items:stretch}
.card{display:flex!important}
.grid>.card{grid-column:auto!important;grid-row:auto!important}   /* 强制等宽，取消便当盒跨列 */

/* ---------- 卡片 ---------- */
.card{display:flex;align-items:center;gap:10px;background:var(--card);border:var(--card-bd,1px solid var(--line));
  border-radius:var(--r,12px);padding:var(--card-pad,13px 14px);box-shadow:var(--sh,none);position:relative;
  overflow:hidden;min-width:0;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s,background .22s}
.card:hover{transform:var(--hv-y,translateY(-2px));box-shadow:var(--sh-h,var(--sh));border-color:var(--accent);
  background:var(--card-h,var(--card))}
/* logo：不填充、不描边 */
.card .fav{flex:0 0 var(--fav,26px);width:var(--fav,26px);height:var(--fav,26px);
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:0;
  color:var(--accent);background:none!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;overflow:hidden}
.card .fav img{width:100%;height:100%;object-fit:contain;display:block}
.card .txt{min-width:0;flex:1 1 auto}
.c-name{display:block;font-family:var(--fd);font-size:var(--name-s,13.5px);font-weight:var(--name-w,600);
  line-height:1.42;color:var(--fg);letter-spacing:var(--name-ls,0);
  white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset!important;
  -webkit-box-orient:unset!important;display:block!important}
.c-host{margin-top:3px;font-size:11px;color:var(--fg2);font-family:var(--fm);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.empty{display:none;text-align:center;color:var(--fg2);padding:60px 0;font-size:14px}
footer{margin-top:40px;padding-top:16px;border-top:var(--hd-bd,1px solid var(--line));
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:var(--fg2)}

/* ---------- 一键置顶 ---------- */
#toTop{position:fixed;right:22px;bottom:22px;z-index:60;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:17px;cursor:pointer;
  display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(8px);
  box-shadow:0 10px 26px rgba(20,20,30,.18);transition:.28s;backdrop-filter:blur(10px)}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* ---------- 夜间模式（暗色风格自带暗色，保持原样） ---------- */
body[data-mode="night"]:not([data-night-keep]){
  --bg:#0e1014;--fg:#e8ecf3;--fg2:#98a1b0;--line:#272d37;
  --card:#171b22;--card-h:#1d222b;--in-bg:#141821;--in-bd:#2a3140;--chip-bg:transparent;
  --hd-bg:#121620;--sh:none;--sh-h:0 0 0 1px #3a4354;
  --cat-bg:#1d222b}
body[data-mode="night"]:not([data-night-keep]) footer{border-top-color:#272d37}
/* 本身即暗色的风格：夜间模式做轻微压暗，保证切换有可见反馈 */
body[data-mode="night"][data-night-keep] .card{filter:brightness(.90)}
body[data-mode="night"][data-night-keep] .hdr{filter:brightness(.86)}
body[data-mode="night"][data-night-keep] .cat-h{opacity:.9}

@media(max-width:760px){
  .wrap{padding:18px 14px 46px}
  .hdr{padding:10px 14px;gap:10px}
  .brand{font-size:15.5px}.brand em{display:none}
  .switcher span{display:none}.switcher select{max-width:132px;font-size:11px;padding:6px}
  .hero{padding:22px 0 14px}
  h1{font-size:clamp(23px,7vw,32px)}
  .searchwrap{gap:6px}
  .seg button{padding:6px 10px;font-size:11.5px}
  .engine{max-width:120px;font-size:11px;padding:0 6px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(var(--min-m,150px),1fr));gap:var(--gap-m,9px)}
  .card{padding:var(--card-pad-m,11px 11px)}
  .card .fav{--fav:22px;flex-basis:22px;width:22px;height:22px}
  .cat-block{margin-bottom:24px}
  #toTop{right:14px;bottom:14px;width:40px;height:40px}
}
