:root { --bg:#f6f7f9; --card:#fff; --line:#e5e7eb; --fg:#111827; --dim:#6b7280;
        --acc:#111827; --ok:#059669; --no:#9ca3af; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--fg);
  font:16px/1.7 -apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:18px 14px 60px; }
header.top { display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:8px; padding:10px 2px 16px; }
header.top h1 { font-size:21px; margin:0; letter-spacing:.4px; }
header.top .n { color:var(--dim); font-size:13.5px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
a.card { background:var(--card); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; display:block; transition:.18s; }
a.card:hover { box-shadow:0 6px 22px rgba(17,24,39,.10); transform:translateY(-2px); }
.card .pic { width:100%; aspect-ratio:1/1; background:#f0f1f3; object-fit:cover; display:block; }
.card .empty { display:flex; align-items:center; justify-content:center; color:var(--no);
  font-size:13px; }
.card .meta { padding:10px 12px 12px; }
.card .t { font-weight:600; font-size:15.5px; line-height:1.45; }
.card .c { color:var(--dim); font-size:13px; margin-top:3px; }
.card .row { display:flex; gap:6px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.chip { font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--line);
  color:var(--dim); background:#fafafa; }
.chip.ok { color:var(--ok); border-color:#bbf7d0; background:#f0fdf4; }
.chip.no { color:var(--no); }
.badge { font-size:12px; padding:2px 8px; border-radius:6px; background:#eef2ff; color:#3730a3; }
/* 详情页 */
.detail { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr); gap:20px; }
@media (max-width:820px) { .detail { grid-template-columns:1fr; } }
.stage { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; }
.stage img { width:100%; display:block; aspect-ratio:1/1; object-fit:contain; background:#f0f1f3; }
.stage .nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92); cursor:pointer;
  font-size:18px; line-height:1; color:var(--fg); }
.stage .nav.l { left:10px; } .stage .nav.r { right:10px; }
.stage .lab { position:absolute; left:10px; top:10px; background:rgba(17,24,39,.78); color:#fff;
  font-size:12.5px; padding:3px 10px; border-radius:999px; }
.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.thumbs img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  border:2px solid transparent; background:#f0f1f3; cursor:pointer; display:block; }
.thumbs img.on { border-color:#111827; }
.thumbs img.gone { opacity:.28; }
.info { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; }
.info h1 { font-size:22px; margin:0 0 6px; }
.info .c { color:var(--dim); }
.info h2 { font-size:14px; color:var(--dim); font-weight:600; margin:18px 0 8px;
  text-transform:none; letter-spacing:.3px; }
.sizes { display:flex; flex-wrap:wrap; gap:7px; }
.sizes span { border:1px solid var(--line); border-radius:9px; padding:4px 11px; font-size:14px;
  background:#fafafa; color:var(--dim); }
.sizes span.on { border-color:#111827; color:var(--fg); font-weight:600; background:#fff; }
.back { display:inline-block; margin-bottom:12px; color:var(--dim); font-size:14px; }
.note { color:var(--dim); font-size:13px; margin-top:14px; }
footer { color:var(--no); font-size:12.5px; margin-top:34px; text-align:center; }
.empty-page { text-align:center; color:var(--dim); padding:60px 0; }