:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f6f7f9; color: #111; }
header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #ddd; padding: 10px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; z-index: 10; }
header h1 { font-size: 18px; margin: 0; }
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
button, input, select { font: inherit; padding: 7px 10px; border: 1px solid #ccc; border-radius: 8px; background: #fff; }
button { cursor: pointer; }
button.primary { background: #111; color: #fff; border-color: #111; }
button:disabled { opacity: .5; cursor: default; }
.card { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.error { color: #b00020; }
.muted { color: #666; font-size: 13px; }
.file-row { border: 1px solid #eee; border-radius: 8px; padding: 10px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file-row img.thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; background: #eee; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #e5e5e5; border: 1px solid #ddd; padding: 0; }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); color: #fff; display: flex; flex-direction: column; z-index: 50; }
.viewer .stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viewer img, .viewer video { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; background: #111; }
.viewer .bar button { background: #222; color: #fff; border-color: #444; }
/* hidden must win over .viewer's display:flex (see CloudPhoto lesson). */
[hidden] { display: none !important; }
@media (max-width: 720px) { main { padding: 10px; } .grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } }