:root{--ink:#0b2340;--muted:#61728a;--line:#dfe7f0;--blue:#2486df;--bg:#f5f8fc;--card:#fff}
.gallery-page{background:linear-gradient(180deg,#f8fbff 0,#fff 28%);min-height:100vh;color:var(--ink)}
.gallery-hero{padding:54px 0 26px}
.gallery-kicker{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#5aa8ef;margin-bottom:10px}
.gallery-hero h1{font-size:clamp(38px,5vw,66px);line-height:1.02;margin:0 0 14px;letter-spacing:-.035em}.gallery-hero h1 span{color:var(--blue)}
.gallery-hero p{max-width:820px;color:var(--muted);font-size:18px;line-height:1.65;margin:0}
.gallery-toolbar{margin-top:28px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.species-pill{display:inline-flex;align-items:center;gap:10px;background:#eaf4ff;border:1px solid #cfe6fb;color:#155c9f;padding:12px 16px;border-radius:999px;font-weight:800}.species-pill:before{content:'●';color:#2486df;font-size:12px}
.gallery-search{margin-left:auto;min-width:min(420px,100%);position:relative}.gallery-search input{width:100%;padding:14px 16px 14px 44px;border:1px solid var(--line);border-radius:14px;background:white;font-size:15px;color:var(--ink);outline:none}.gallery-search span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#7d8da2}
.gallery-wrap{padding:14px 0 70px}.gallery-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.gallery-intro h2{font-size:28px;margin:0}.gallery-intro p{margin:5px 0 0;color:var(--muted)}
.stain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.stain-card{appearance:none;border:1px solid var(--line);background:#fff;border-radius:18px;padding:0;overflow:hidden;text-align:left;cursor:pointer;box-shadow:0 10px 30px rgba(32,63,100,.07);transition:.2s ease}.stain-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(32,63,100,.12);border-color:#b7d9f6}.stain-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#eef3f7}.stain-meta{padding:14px 15px 16px}.stain-meta strong{display:block;font-size:17px;color:var(--ink);margin-bottom:4px}.stain-meta span{font-size:13px;color:#77879a}.stain-card[hidden]{display:none}
.gallery-note{margin-top:26px;background:#eef7ff;border:1px solid #d5eaff;border-radius:16px;padding:18px 20px;color:#49647e;line-height:1.6}.gallery-note strong{color:var(--ink)}
.stain-modal{position:fixed;inset:0;background:rgba(4,17,33,.78);z-index:1000;display:none;align-items:center;justify-content:center;padding:26px}.stain-modal.open{display:flex}.modal-card{width:min(920px,96vw);max-height:94vh;overflow:auto;background:#fff;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.modal-top{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-top div{display:flex;flex-direction:column}.modal-top strong{font-size:22px}.modal-top span{color:var(--muted);font-size:13px;margin-top:3px}.modal-close{border:0;background:#edf3f8;width:38px;height:38px;border-radius:50%;font-size:22px;cursor:pointer}.modal-image-wrap{background:#edf2f6;padding:16px}.modal-image-wrap img{width:100%;display:block;border-radius:14px;background:white}.modal-bottom{padding:18px}.modal-bottom p{color:var(--muted);line-height:1.6;margin:0 0 14px}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}.modal-actions a,.modal-actions button{padding:11px 14px;border-radius:11px;text-decoration:none;font-weight:800;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}.modal-actions .primary{background:var(--blue);color:#fff;border-color:var(--blue)}
@media (max-width:1000px){.stain-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.gallery-hero{padding-top:32px}.gallery-toolbar{display:block}.gallery-search{margin:12px 0 0;min-width:0}.stain-grid{grid-template-columns:repeat(2,1fr);gap:12px}.gallery-intro{display:block}.stain-meta{padding:11px 12px 13px}.stain-meta strong{font-size:15px}.modal-card{border-radius:16px}.stain-modal{padding:10px}}