:root{
  --bg:#07070b;
  --panel:#0e0e14;
  --line:#222232;
  --text:#f7f7ff;
  --muted:#b7b7cd;
  --shadow: 0 26px 90px rgba(0,0,0,.70);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(900px 650px at 18% 10%, rgba(255,61,129,.18), transparent 60%),
    radial-gradient(900px 650px at 88% 20%, rgba(0,212,255,.12), transparent 60%),
    linear-gradient(180deg, #030307, var(--bg));
}
.mono{font-family:var(--mono)}
.top{
  max-width:1180px;margin:0 auto;padding:18px 18px 12px;
  display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;
}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:44px;height:44px;border-radius:16px;
  background:conic-gradient(from 230deg, rgba(255,61,129,.95), rgba(0,212,255,.85), rgba(255,189,46,.75), rgba(255,61,129,.95));
  box-shadow: 0 18px 55px rgba(255,61,129,.16);
}
.t1{font-weight:950}
.t2{margin-top:4px;color:rgba(183,183,205,.92);font-size:12px}
.right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.q{
  width:min(380px, 60vw);
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(34,34,50,.85);
  background:rgba(14,14,20,.55);
  color:rgba(247,247,255,.92);
  outline:none;
}
.q::placeholder{color:rgba(183,183,205,.55)}
.q:focus{border-color:rgba(0,212,255,.55);box-shadow:0 0 0 4px rgba(0,212,255,.10)}
.chip{
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(34,34,50,.85);
  background:rgba(14,14,20,.55);
  color:rgba(183,183,205,.92);
  font-size:12px;
}
.wrap{max-width:1180px;margin:0 auto;padding:12px 18px 40px}
.grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
@media (max-width: 1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 520px){.grid{grid-template-columns:1fr}}
.item{
  margin:0;
  border-radius:18px;
  border:1px solid rgba(34,34,50,.85);
  background:rgba(14,14,20,.55);
  overflow:hidden;
  box-shadow: var(--shadow);
  cursor:pointer;
}
.img{height:160px}
@media (max-width: 520px){.img{height:200px}}
.item figcaption{
  padding:12px 12px;
  color:rgba(247,247,255,.92);
  font-weight:850;
}
.item:hover{border-color:rgba(255,61,129,.35)}
.item[data-color="a"] .img{background:linear-gradient(135deg, #0ea5e9, #22c55e)}
.item[data-color="b"] .img{background:linear-gradient(135deg, #fb7185, #8b5cf6)}
.item[data-color="c"] .img{background:linear-gradient(135deg, #f59e0b, #111827)}
.item[data-color="d"] .img{background:linear-gradient(135deg, #84cc16, #0f172a)}
.item[data-color="e"] .img{background:linear-gradient(135deg, #60a5fa, #1e3a8a)}
.item[data-color="f"] .img{background:linear-gradient(135deg, #fbbf24, #fb7185)}
.item[data-color="g"] .img{background:linear-gradient(135deg, #22d3ee, #0f172a)}
.item[data-color="h"] .img{background:linear-gradient(135deg, #a3a3a3, #111827)}
.item[data-color="i"] .img{background:linear-gradient(135deg, #f472b6, #22c55e)}
.item[data-color="j"] .img{background:linear-gradient(135deg, #111827, #f3f4f6)}
.item[data-color="k"] .img{background:linear-gradient(135deg, #38bdf8, #fbbf24)}
.item[data-color="l"] .img{background:linear-gradient(135deg, #94a3b8, #22d3ee)}
.empty{
  margin-top:12px;
  padding:16px;
  border-radius:18px;
  border:1px dashed rgba(34,34,50,.85);
  color:rgba(183,183,205,.92);
  background:rgba(14,14,20,.45);
}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px}
.lbInner{
  width:min(980px,100%);
  border-radius:22px;
  border:1px solid rgba(34,34,50,.85);
  background:rgba(14,14,20,.85);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.lbTop{
  padding:12px 14px;
  border-bottom:1px solid rgba(34,34,50,.85);
  display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.lbTitle{font-weight:950}
.x{cursor:pointer;border-radius:12px;padding:9px 10px;border:1px solid rgba(34,34,50,.85);background:transparent;color:rgba(247,247,255,.92)}
.lbImg{height:420px}
@media (max-width: 560px){.lbImg{height:320px}}
.lbMeta{
  padding:10px 14px;
  border-top:1px solid rgba(34,34,50,.85);
  color:rgba(183,183,205,.92);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}