: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; }
.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; }
.thumb .sel { position: absolute; top: 6px; left: 6px; z-index: 2; }
.thumb .badge { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.date-group h2 { font-size: 15px; margin: 20px 0 8px; }
.viewer { position: fixed; inset: 0; background: rgba(0,0,0,.92); color: #fff; display: flex; flex-direction: column; z-index: 50; }
/* hidden must win over .viewer's display:flex (and any other display
   rule): author styles override the UA stylesheet's [hidden] rule, so
   without this the viewer covers the login page on every load and its
   own Close button cannot hide it either. */
[hidden] { display: none !important; }
.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; }
.progress { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.progress > div { height: 100%; background: #111; width: 0%; }
.upload-item { border: 1px solid #eee; border-radius: 8px; padding: 10px; margin-bottom: 8px; }
@media (max-width: 720px) {
  main { padding: 10px; }
  .grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  header h1 { font-size: 16px; }
}