*{box-sizing:border-box;font-family:Segoe UI,Helvetica,Arial,'Microsoft Yahei',sans-serif}
body{margin:0;background:#f7f7f8;color:#222}
header{padding:20px 24px;border-bottom:1px solid #e1e1e1;background:white}
h1{margin:0;font-size:20px}
p{margin:6px 0 0;color:#666}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:16px}
.card{background:white;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer;display:flex;flex-direction:column}
.card-visual{display:grid;grid-template-columns:1fr;gap:4px;padding:8px;background:#f3f3f4}
.card-visual img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#ececec;border-radius:8px}
.card-visual .preview-0{grid-row:span 2;aspect-ratio:3/4}
.card-visual .preview-1,.card-visual .preview-2{aspect-ratio:3/5}
.card .meta{padding:10px 12px 12px}
.card .title{font-weight:600;line-height:1.4}
.card .tags{margin-top:6px;color:#888;font-size:12px;line-height:1.5}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:20px}
.modal.hidden{display:none}
.modal-content{background:white;border-radius:12px;max-width:900px;width:100%;max-height:90vh;overflow:auto;padding:18px;position:relative}
.close{position:absolute;right:12px;top:12px;border:0;background:#f0f0f0;padding:6px 10px;border-radius:6px;cursor:pointer}
.modal-body pre{white-space:pre-wrap}
.gallery{display:flex;flex-direction:column;gap:10px;margin:12px 0 16px}
.gallery-main img{width:100%;max-height:420px;object-fit:contain;display:block;border-radius:10px;background:#ececec}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}
.thumbs img{width:72px;height:96px;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;background:#ececec}
.thumbs img.active{border-color:#3b82f6}

@media (max-width:640px){
  header{padding:16px}
  h1{font-size:18px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
  .card{border-radius:10px}
  .modal{padding:0}
  .modal-content{max-width:none;width:100%;height:100%;max-height:100vh;border-radius:0;padding:16px 16px 24px}
  .close{right:8px;top:8px}
  .gallery-main img{max-height:280px}
  .thumbs img{width:64px;height:84px}
}

@media (max-width:420px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .meta{padding:8px 10px 10px}
  .card .title{font-size:14px}
  .card .tags{font-size:11px}
}

@media (max-width:640px){
  header{padding:16px}
  h1{font-size:18px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
  .card{border-radius:10px}
  .modal{padding:0}
  .modal-content{max-width:none;width:100%;height:100%;max-height:100vh;border-radius:0;padding:16px 16px 24px}
  .close{right:8px;top:8px}
}

@media (max-width:420px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .meta{padding:8px 10px 10px}
  .card .title{font-size:14px}
  .card .tags{font-size:11px}
}

.card{color:inherit;text-decoration:none}
header nav{margin-bottom:16px}
.modal-body h2{padding-right:72px}
.detail-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:16px 0}
.thumbs button{padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer}
.thumbs button[aria-pressed="true"]{border-color:#3b82f6}
.thumbs button img{display:block;border:0}
#share-url{width:100%;padding:8px}
a:focus-visible,button:focus-visible{outline:3px solid #3b82f6;outline-offset:3px}