:root { color-scheme: light dark; font-family: -apple-system, system-ui, sans-serif; }
body { margin: 0; background: Canvas; color: CanvasText; }
header { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid color-mix(in srgb, CanvasText 15%, transparent); }
header h1 { font-size: 1.1rem; margin: 0; }
nav a { margin-left: 1rem; }
main { padding: 1rem; }
.signin { max-width: 28rem; margin: 4rem auto; }
.signin input, .signin button { display: block; width: 100%; margin: .5rem 0; padding: .6rem; font: inherit; }
.err { color: #c33; }
.muted { opacity: .6; }
.crumbs { margin-bottom: 1rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.tile { display: flex; flex-direction: column; padding: .75rem; border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); border-radius: 8px; text-decoration: none; color: inherit; }
.tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; margin-bottom: .4rem; }
.tile small { opacity: .6; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 4px; }
.cell { position: relative; aspect-ratio: 1; display: block; }
.cell img { width: 100%; height: 100%; object-fit: cover; }
.cell.personal { outline: 2px solid #d9a; outline-offset: -2px; }
.cell.staging { opacity: .6; }
.badge { position: absolute; right: 4px; bottom: 4px; background: #0009; color: #fff; font-size: .7rem; padding: 1px 4px; border-radius: 3px; }
.lightbox { position: fixed; inset: 0; background: #000c; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; }
.lightbox figure { margin: 2vh auto; max-width: 95vw; text-align: center; }
.lightbox img, .lightbox video { max-width: 95vw; max-height: 70vh; }
.lightbox figcaption { color: #eee; padding: .5rem; }
.lightbox figcaption a { color: #9cf; margin-left: 1rem; }
.search { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; }
.search input[type=search] { flex: 1 1 16rem; padding: .5rem; font: inherit; }
.search select, .search button { padding: .45rem; font: inherit; }
.search .chk { display: flex; align-items: center; gap: .25rem; opacity: .8; font-size: .9rem; }
.badge.cap { left: 4px; right: 4px; bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.captions { max-width: 40rem; margin: 0 auto 2rem; text-align: left; color: #eee; }
.captions .cap { margin: .3rem 0; }
.captions .cap .body { white-space: pre-wrap; }
.captions .cap small { opacity: .7; margin-left: .4rem; }
.captions .cap a { color: #9cf; margin-left: .6rem; font-size: .8rem; }
.captions textarea { width: 100%; font: inherit; padding: .4rem; }
.captions button { font: inherit; padding: .35rem .8rem; margin-top: .3rem; }
.captions form a { color: #9cf; margin-left: .6rem; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #000c; color: #fff; padding: .5rem 1rem; border-radius: 6px; }