/* Modern modal gallery styles */
:root{
  --bg:#f7f9fc; --fg:#111827; --muted:#6b7280; --card:#ffffff; --stroke:#e5e7eb;
  --pill:#eef2ff; --pill-text:#3b82f6; --chip-bg:#f5f3ff; --chip-text:#7c3aed;
  --shadow:0 10px 24px rgba(17,24,39,.08); --radius:16px; --radius-lg:18px;
}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
h1{font-size:3rem;margin:0 0 8px}
.hero{max-width:960px;margin:36px auto 8px;padding:0 16px;text-align:center}
.subtitle{color:var(--muted);margin:0 auto 10px;max-width:720px}
.stats{display:flex;gap:20px;justify-content:center;color:var(--muted)}
.stat{display:flex;align-items:center;gap:8px}
.icon{width:18px;height:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px auto 24px;padding:0 16px}
.pill{border:1px solid var(--stroke);background:#fff;color:#374151;padding:6px 10px;border-radius:999px;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.pill.active{background:var(--pill);color:var(--pill-text);border-color:#dbeafe}
.pill:focus{outline:2px solid #c7d2fe;outline-offset:2px}

.wrap{max-width:1200px;margin:0 auto;padding:0 16px 60px}
.grid{display:grid;grid-template-columns:repeat(1, minmax(0,1fr));gap:18px}
@media (min-width:700px){.grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (min-width:1040px){.grid{grid-template-columns:repeat(3, minmax(0,1fr));}}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .img-wrap{position:relative;overflow:hidden}
.card img{display:block;width:100%;height:280px;object-fit:cover;background:#0b0d10}
.tag{position:absolute;right:12px;bottom:12px;background:var(--chip-bg);color:var(--chip-text);border:1px solid #ede9fe;border-radius:999px;font-size:.75rem;padding:4px 8px}
.card-body{padding:14px}
.card h3{margin:0 0 6px;font-size:1rem}
.card p{margin:0 0 10px;color:#4b5563;font-size:.92rem;min-height:3.4em}
.meta{display:flex;gap:12px;color:#6b7280;font-size:.85rem;flex-wrap:wrap}

.detail-modal{border:none;padding:0;margin:auto;max-width:min(96vw,1200px);width:96vw;background:transparent}
.detail-modal::backdrop{background:rgba(0,0,0,.65)}
.modal-shell{position:relative;display:grid;gap:0;grid-template-columns:1.4fr 1fr;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
@media (max-width:960px){.modal-shell{grid-template-columns:1fr}}
.icon-btn.close{position:absolute;top:10px;right:10px;background:#fff;border:1px solid var(--stroke);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.media{background:#000;display:grid;place-items:center;min-height:60vh}
.media-img{max-width:100%;max-height:80vh;width:auto;height:auto;display:block}
.panel{padding:18px 18px 22px;overflow:auto}
.chip{display:inline-block;background:var(--chip-bg);color:var(--chip-text);border:1px solid #ede9fe;border-radius:999px;font-size:.75rem;padding:4px 8px;margin-bottom:8px}
.panel-title{margin:6px 0 6px;font-size:1.25rem}
.panel-desc{margin:0 0 12px;color:#4b5563}
.info-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.info-list li{display:flex;align-items:center;gap:8px;color:#374151}
.icon-wrap{width:18px;height:18px;color:#6b7280;display:grid;place-items:center}
.card{border:1px solid var(--stroke);border-radius:12px;background:#fff;padding:10px;margin:10px 0}
.card-title{margin:4px 0 10px;font-size:1rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
.k{color:#6b7280}
.v{color:#111827}