/* ═══════ EHS图库（第20应用）═══════ */
/* 页头沿用全工具统一 .tool-hero，此处仅覆写专属配色（蓝→紫，呼应图集主题） */
.tool-hero.is-gallery {
  --tool-hero: linear-gradient(118deg, #1d4ed8 0%, #3b82f6 48%, #7c3aed 100%);
  --tool-shadow: rgba(59, 130, 246, .28);
}
.gl-chips { display: flex; gap: 8px; overflow-x: auto; padding: 6px 16px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gl-chips::-webkit-scrollbar { display: none; }
.gl-chip { flex: none; font-size: 12px; padding: 5px 13px; border-radius: 14px; border: 1px solid var(--bd, #e3e8f0); background: var(--card, #fff); color: #465065; cursor: pointer; }
.gl-chip.on { background: var(--brand, #2f7cf6); border-color: var(--brand, #2f7cf6); color: #fff; font-weight: 600; }

/* 宫格浏览：手机 2 列 → 平板 3-4 列 → PC 5 列 */
.gl-feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 16px 26px; align-items: start; }
@media (min-width: 640px) { .gl-feed { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 6px 20px 30px; } }
@media (min-width: 960px) { .gl-feed { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1180px; margin-left: auto; margin-right: auto; } }
@media (min-width: 1240px) { .gl-feed { grid-template-columns: repeat(5, 1fr); gap: 18px; max-width: 1240px; margin-left: auto; margin-right: auto; } }
.gl-card { position: relative; width: 100%; aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; border: none; padding: 0; cursor: pointer; box-shadow: 0 6px 22px rgba(20, 40, 90, .16); background: #0e1420; display: block; text-align: left; }
.gl-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gl-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,20,.06) 20%, rgba(8,12,20,.28) 58%, rgba(8,12,20,.78) 100%); }
.gl-card-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 14px; color: #fff; display: flex; flex-direction: column; gap: 4px; }
.gl-card-cat { font-style: normal; font-size: 11px; opacity: .85; letter-spacing: .5px; }
.gl-card-title { font-size: 15px; line-height: 1.35; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-card-hint { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 11px; opacity: .8; margin-top: 6px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-card-hint svg { width: 12px; height: 12px; flex: none; }
.gl-empty { grid-column: 1 / -1; width: 100%; padding: 80px 20px; text-align: center; color: var(--mut, #8a94a6); font-size: 13px; }

/* 全屏查看器（VIP） */
.gl-viewer { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
.gl-v-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px; color: #fff; }
.gl-v-back { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gl-v-back svg { width: 20px; height: 20px; }
.gl-v-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-v-cat { font-style: normal; font-size: 11px; opacity: .7; }
.gl-v-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-v-count { font-size: 13px; opacity: .8; font-variant-numeric: tabular-nums; }
.gl-v-stage { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gl-v-stage img { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-user-select: none; user-select: none; }
.gl-v-loading { color: #fff; opacity: .7; font-size: 13px; display: inline-flex; gap: 8px; align-items: center; }
.gl-v-loading i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: glspin .7s linear infinite; }
@keyframes glspin { to { transform: rotate(360deg); } }
.gl-v-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 64px; border: none; background: rgba(255,255,255,.08); color: #fff; font-size: 30px; border-radius: 10px; cursor: pointer; opacity: .9; }
.gl-v-nav.left { left: 8px; }
.gl-v-nav.right { right: 8px; }
.gl-v-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; }
.gl-v-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.gl-v-dots i.on { background: #fff; }
.gl-v-bar { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; }
.gl-v-dl { display: inline-flex; align-items: center; gap: 8px; padding: 11px 26px; border-radius: 24px; border: none; background: var(--brand, #2f7cf6); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.gl-v-dl svg { width: 17px; height: 17px; }
.gl-v-dl:active { transform: scale(.97); }

/* ── 后台管理 ── */
.gl-adm { padding: 4px 2px; }
.gl-adm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gl-adm-head h3 { font-size: 17px; margin: 0; }
.gl-adm-sub { font-size: 12px; color: var(--mut, #8a94a6); }
.gl-adm-new { margin-left: auto; padding: 8px 16px; border-radius: 10px; border: none; background: var(--brand, #2f7cf6); color: #fff; font-size: 13px; cursor: pointer; }
.gl-edit-box { display: none; margin-bottom: 14px; border: 1px solid var(--bd, #e3e8f0); border-radius: 14px; padding: 14px; background: var(--card, #fff); }
.gl-edit-box.open { display: block; }
.gl-edit-box.flash { animation: glFlash 1.4s ease; }
@keyframes glFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0); border-color: var(--bd, #e3e8f0); } 30% { box-shadow: 0 0 0 3px rgba(24, 144, 255, .35); border-color: #1890ff; } }
.gl-edit-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gl-edit-head b { font-size: 14px; }
.gl-edit-note { font-size: 11px; color: var(--mut, #8a94a6); font-weight: 400; }
.gl-edit-close { margin-left: auto; border: none; background: transparent; font-size: 15px; color: var(--mut, #8a94a6); cursor: pointer; }
.gl-edit-form { display: flex; flex-direction: column; gap: 10px; }
.gl-inp { width: 100%; padding: 9px 12px; border: 1px solid var(--bd, #e3e8f0); border-radius: 9px; font-size: 13px; background: #fafbfd; color: var(--tx, #1f2937); box-sizing: border-box; }
.gl-edit-upload { display: flex; align-items: center; gap: 10px; }
.gl-edit-upload button { padding: 9px 14px; border-radius: 9px; border: 1px dashed var(--brand, #2f7cf6); color: var(--brand, #2f7cf6); background: transparent; font-size: 13px; cursor: pointer; }
.gl-edit-upload i { font-style: normal; font-size: 11px; color: var(--mut, #8a94a6); }
.gl-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.gl-thumb { position: relative; width: 86px; aspect-ratio: 9/16; border-radius: 9px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.gl-thumb.cover { border-color: var(--brand, #2f7cf6); }
.gl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-thumb-no { position: absolute; top: 4px; left: 5px; font-style: normal; font-size: 10px; color: #fff; background: rgba(0,0,0,.55); padding: 1px 5px; border-radius: 7px; }
.gl-thumb-cover { position: absolute; top: 4px; right: 5px; font-style: normal; font-size: 9px; color: #fff; background: var(--brand, #2f7cf6); padding: 1px 5px; border-radius: 7px; }
.gl-thumb-ops { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; padding: 6px 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.gl-thumb-ops button { width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(255,255,255,.9); color: #333; font-size: 12px; cursor: pointer; }
.gl-thumb-ops .gl-x { color: #e5484d; }
.gl-thumb-empty { width: 100%; min-height: 74px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--bd, #e3e8f0); border-radius: 10px; color: var(--mut, #8a94a6); font-size: 12px; }
.gl-edit-actions { display: flex; justify-content: flex-end; }
.gl-save { padding: 9px 22px; border: none; border-radius: 9px; background: var(--brand, #2f7cf6); color: #fff; font-size: 13px; cursor: pointer; }
.gl-adm-list { display: flex; flex-direction: column; gap: 10px; }
.gl-adm-row { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--bd, #e3e8f0); border-radius: 12px; background: var(--card, #fff); }
.gl-adm-cov { width: 46px; aspect-ratio: 9/16; object-fit: cover; border-radius: 7px; background: #eef1f6; }
.gl-adm-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-adm-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-adm-meta em, .gl-adm-meta i { font-style: normal; font-size: 11px; color: var(--mut, #8a94a6); }
.gl-adm-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.gl-adm-b { padding: 6px 10px; font-size: 12px; border-radius: 8px; border: 1px solid var(--bd, #e3e8f0); background: #fff; cursor: pointer; color: #465065; }
.gl-adm-b.gl-b-off { color: #e5484d; border-color: #ffd7d9; }
.gl-adm-b.gl-b-on { color: #16a34a; border-color: #bbf7d0; }
.gl-adm-b.gl-b-danger { color: #e5484d; border-color: #ffd7d9; }