:root{
  --bg:#faf7fb; --panel:#ffffff; --ink:#2b2233; --muted:#8a8194;
  --line:#ece6f0; --accent:#ff5d8f;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}
a{color:inherit;text-decoration:none}

/* 顶部导航 */
.topnav{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topnav .brand{font-weight:800; font-size:16px}
.topnav .links{display:flex; gap:18px; font-size:14px; color:var(--muted); align-items:center}
.topnav .links a:hover{color:var(--accent)}
.topnav .links a.edit-link{
  background:var(--accent); color:#fff; padding:6px 12px; border-radius:999px;
  font-size:13px; font-weight:700; margin-left:4px
}
.topnav .links a.edit-link:hover{filter:brightness(1.1); color:#fff}

/* 首页 hero */
.hero{
  text-align:center; padding:54px 20px 40px;
  background:linear-gradient(135deg,#ffe3ef 0%,#e7f4ff 50%,#f3e9ff 100%);
}
.hero h1{margin:0 0 10px; font-size:30px; letter-spacing:1px}
.hero p{margin:4px 0; color:var(--muted)}
.hero .updated{font-size:13px; color:#b3a9bf}

/* 分类卡片网格 */
.grid{
  max-width:1100px; margin:34px auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;
}
.catcard{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
  border-top:4px solid var(--accent);
}
.catcard:hover{transform:translateY(-4px); box-shadow:0 12px 30px rgba(155,107,255,.18)}
.catcard-cover{height:150px; background:#ffffff; overflow:hidden; display:flex; align-items:center; justify-content:center}
.catcard-cover img{width:100%; height:100%; object-fit:contain}
.catcard-body{padding:14px 16px; flex:1}
.catcard-name{font-size:18px; font-weight:800}
.catcard-desc{font-size:13px; color:var(--muted); margin:6px 0}
.catcard-count{font-size:13px; color:var(--accent); font-weight:700}
.catcard-go{padding:10px 16px; font-size:13px; font-weight:700; color:var(--accent); border-top:1px solid var(--line)}

/* 分类页 hero */
.cathero{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding:34px 24px; background:color-mix(in srgb,var(--accent) 12%, #fff);
  border-bottom:3px solid var(--accent);
}
.cathero h1{margin:6px 0; font-size:26px}
.cathero .crumb{font-size:13px; color:var(--muted)}
.cathero .crumb a:hover{color:var(--accent)}
.cathero p{margin:0; color:var(--muted); font-size:14px}
.cathero-meta{display:flex; align-items:center; gap:14px}
.pill{background:var(--accent); color:#fff; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700}
.dl{background:#fff; border:1px solid var(--accent); color:var(--accent); padding:8px 14px; border-radius:10px; font-size:13px; font-weight:700}
.dl:hover{background:var(--accent); color:#fff}

/* 大图浏览 */
.catalogview{max-width:1100px; margin:26px auto; padding:0 20px}
.toolbar{display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--muted); margin-bottom:10px}
.zoombtns button{
  border:1px solid var(--line); background:#fff; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:13px; margin-left:6px
}
.zoombtns button:hover{border-color:var(--accent); color:var(--accent)}
.catalogscroll{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; overflow:hidden}
.catalogscroll img.fit{width:100%; height:auto; display:block; border-radius:8px}
.catalogscroll img.full{max-width:none; width:auto; height:auto; display:block; border-radius:8px}

/* 单品清单 */
.items{max-width:1100px; margin:30px auto 50px; padding:0 20px}
.items h2{font-size:20px; border-left:4px solid var(--accent); padding-left:10px}
.grid-items{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.card img{width:100%; height:160px; object-fit:contain; background:#ffffff; display:block}
.card .noimg{height:160px; display:flex; align-items:center; justify-content:center; color:#bbb; background:#ffffff}

/* 立牌单品清单放大2倍，便于看清 */
.grid-items[data-cat="lipai"]{grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px}
.grid-items[data-cat="lipai"] .card img{height:320px}
.grid-items[data-cat="lipai"] .card .noimg{height:320px}
.grid-items[data-cat="lipai"] .t-title{font-size:16px}
.grid-items[data-cat="lipai"] .t-meta{font-size:14px}
.t-title{font-size:13px; font-weight:700; padding:8px 10px 2px; line-height:1.35}
.t-meta{display:flex; flex-direction:column; gap:2px; padding:0 10px 10px; font-size:12px; color:var(--muted)}
.t-price{color:var(--accent); font-weight:700}
.empty{color:var(--muted)}

.foot{max-width:1100px; margin:0 auto 40px; padding:18px 20px; color:#b3a9bf; font-size:12px; text-align:center}

@media(max-width:600px){
  .topnav .links{gap:10px; font-size:12px}
  .cathero{flex-direction:column; align-items:flex-start}
  .grid-items[data-cat="lipai"]{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .grid-items[data-cat="lipai"] .card img{height:180px}
  .grid-items[data-cat="lipai"] .card .noimg{height:180px}
}