.snapshots { margin: var(--section-gap, 30px) 0; scroll-margin-top: 100px; }
.snapshots[hidden], .snapshots [hidden] { display: none !important; }
.snapshots-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.snapshots-heading .eyebrow { margin: 0 0 6px; }
.snapshots-heading h2 { margin: 0; font-size: clamp(1.6rem, 5.5vw, 2rem); line-height: 1.05; letter-spacing: -.045em; }
.snapshots-count { color: var(--muted, #6a6862); font-size: .9rem; text-align: right; }
.snapshot-preview-settings { margin: 14px 0; }
.snapshot-preview-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: .9rem; font-weight: 800; cursor: pointer; }
.snapshot-preview-toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--blueberry, #43089f); }
.snapshot-preview-settings .snapshot-help { margin: 0; }
.snapshots[data-hdr-previews="off"] img, .snapshots[data-hdr-previews="off"] video { dynamic-range-limit: standard; }
.snapshots button { font: inherit; color: var(--ink, #171713); cursor: pointer; }
.snapshots button:disabled { opacity: .5; cursor: default; }
.snapshots :focus-visible { outline: 3px solid var(--blueberry, #43089f); outline-offset: 3px; }
.snapshot-add { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 88px; padding: 15px 18px; border: 1.5px dashed var(--muted, #aaa394); border-radius: 22px; text-align: left; background: var(--paper, #fff); }
.snapshot-plus { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink, #171713); background: #f8cc65; font-size: 28px; line-height: 1; font-weight: 800; }
.snapshot-add strong { display: block; font-size: 1rem; font-weight: 900; line-height: 1.3; }
.snapshot-add small { display: block; margin-top: 4px; color: var(--muted, #6a6862); font-size: .8rem; line-height: 1.4; font-weight: 700; }
.snapshot-add-audio { margin-top: 12px; min-height: 72px; }
.snapshot-add-audio .snapshot-plus { background: #e7defb; font-size: 24px; }
.snapshot-upload-audio { min-height: 44px; margin-top: 6px; padding: 10px 4px; border: 0; background: transparent; text-decoration: underline; font-size: .85rem !important; }
.snapshot-recorder { margin-top: 12px; padding: 16px; border: 1px solid var(--oat, #ddd8ce); border-radius: 22px; background: var(--paper, #fff); }
.snapshot-record-status { margin: 0; font-size: .9rem; font-weight: 800; }
.snapshot-record-time { display: block; margin: 8px 0 16px; font-size: 1.8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.snapshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.snapshot-grid:empty { display: none; }
.snapshot-tile { position: relative; min-width: 0; }
.snapshot-photo { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 100%; aspect-ratio: 1; border: 1px solid var(--oat, #ddd8ce); border-radius: 22px; overflow: hidden; padding: 0; background: #e7defb; font-size: .8rem !important; font-weight: 800 !important; }
.snapshot-photo img { width: 100%; height: 100%; object-fit: cover; }
.snapshot-play { font-size: 24px; }
.snapshot-clip { position: relative; }
.snapshot-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.snapshot-clip-ready video { opacity: 1; }
.snapshot-clip-label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.snapshot-clip-ready .snapshot-clip-label { position: absolute; bottom: 8px; left: 8px; flex-direction: row; gap: 5px; padding: 6px 8px; border-radius: 12px; background: #171713c7; color: #fff; font-size: .7rem; }
.snapshot-clip-ready .snapshot-play { font-size: 12px; }
.snapshot-edit { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--oat, #ddd8ce); border-radius: 50%; background: var(--paper, #fff); font-size: 18px !important; }
.snapshot-edit::before { content: ''; position: absolute; inset: -4px; }
.snapshot-composer { margin-top: 14px; padding: 16px; border: 1px solid var(--oat, #ddd8ce); border-radius: 22px; background: var(--paper, #fff); }
.snapshot-selection { list-style: none; margin: 0 0 16px; padding: 0; }
.snapshot-selection li { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.snapshot-selection span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .85rem; }
.snapshot-selection img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.snapshot-selection-details { flex: 1; min-width: 0; }
.snapshot-selection-details audio { display: block; width: 100%; min-width: 0; margin-top: 8px; }
.snapshot-selection li:has(audio) { flex-wrap: wrap; }
.snapshot-selection li:has(audio) .snapshot-selection-details { flex-basis: 100%; }
.snapshots textarea { display: block; box-sizing: border-box; width: 100%; font: inherit; font-size: 1rem; border: 1px solid var(--oat, #ddd8ce); border-radius: 12px; padding: 12px; background: var(--paper, #fff); margin: 8px 0 14px; }
.snapshot-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.snapshot-actions button, .snapshot-selection button, .snapshot-pending button, .snapshot-more { min-height: 44px; padding: 10px 14px; border: 1px solid var(--oat, #ddd8ce); border-radius: 14px; background: var(--paper, #fff); font-weight: 800 !important; }
.snapshot-actions .snapshot-primary { background: #f8cc65; border-color: var(--ink, #171713); }
.snapshot-help, .snapshot-notice { font-size: .8rem; line-height: 1.6; color: var(--muted, #6a6862); overflow-wrap: anywhere; }
.snapshot-notice:empty { display: none; }
.snapshot-pending { padding: 12px; background: var(--paper, #fff); border: 1px dashed var(--oat, #ddd8ce); border-radius: 18px; overflow-wrap: anywhere; font-size: .8rem; }
.snapshot-pending small, .snapshot-pending label { display: block; margin: 8px 0; }
.snapshot-pending input, .snapshot-pending progress { width: 100%; max-width: 100%; }
.snapshot-more { margin-top: 20px; }
.snapshot-viewer { box-sizing: border-box; width: min(94vw, 800px); max-height: 90dvh; padding: 20px; border: 1px solid var(--oat, #ddd8ce); border-radius: 24px; background: var(--cream, #faf9f7); color: var(--ink, #171713); }
.snapshot-viewer::backdrop { background: #171713a6; }
.snapshot-viewer h2 { flex: 1; font-size: 1rem; overflow-wrap: anywhere; }
.snapshot-viewer-content img, .snapshot-viewer-content video { display: block; max-width: 100%; max-height: 50dvh; margin: 16px auto; object-fit: contain; border-radius: 14px; }
.snapshot-viewer-content audio { display: block; width: 100%; margin: 20px auto; }
.snapshot-caption { white-space: pre-wrap; overflow-wrap: anywhere; }
.snapshot-download { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: inherit; font-size: .9rem; }
.admin-card.snapshots { margin: 0; }
.admin-card.snapshots .snapshot-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.snapshot-admin-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; font-size: .8rem; overflow-wrap: anywhere; }
.snapshot-admin-meta time { color: var(--muted, #6a6862); }
.snapshot-delete { min-height: 44px; padding: 10px 14px; border: 1px solid var(--oat, #ddd8ce); border-radius: 14px; background: var(--paper, #fff); font-weight: 800 !important; }
.snapshots .snapshot-delete { color: #a03d35; }
@media (max-width: 600px) { .admin-card.snapshots .snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 350px) { .snapshot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .snapshot-add { padding: 12px; gap: 10px; } }