:root {
  color-scheme: light dark;
  --gap: 1rem;
  --bg: #f7f7f8;
  --surface: #fff;
  --text: #1c1c1e;
  --muted: #6b6b73;
  --border: #d9d9de;
  --accent: #2f6fed;
  --accent-text: #fff;
  --placeholder: #e4e6ea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121214;
    --surface: #1d1d20;
    --text: #ececf0;
    --muted: #9a9aa5;
    --border: #36363c;
    --accent: #6c9bff;
    --accent-text: #0b0b0d;
    --placeholder: #2a2c31;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.wrap { max-width: 40rem; margin: 0 auto; padding: var(--gap); }
.card { display: flex; flex-direction: column; gap: .5rem; }
input, button, select { font: inherit; padding: .6rem .8rem; min-height: 44px; border-radius: .4rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
button { cursor: pointer; }
.error { color: #c00; margin: 0; }

/* gallery */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); padding: .5rem var(--gap); display: flex; flex-direction: column; gap: .5rem; }
.search { display: flex; gap: .5rem; }
.search input[type="search"] { flex: 1; min-width: 0; }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; }
.chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.sort { display: flex; align-items: center; gap: .5rem; }
.gallery { padding: var(--gap); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; min-height: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: .6rem; overflow: hidden; color: var(--text); text-decoration: none; }
.thumb { position: relative; aspect-ratio: 4 / 3; background: var(--placeholder); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--placeholder); color: var(--muted); font-size: 1.5rem; font-weight: 700; }
.badge { position: absolute; left: .4rem; top: .4rem; padding: 0 .5rem; border-radius: .3rem; background: rgb(0 0 0 / .6); color: #fff; font-size: .75rem; }
.video-mark { position: absolute; right: .4rem; bottom: .4rem; padding: 0 .5rem; border-radius: .3rem; background: rgb(0 0 0 / .6); color: #fff; font-size: .85rem; }
.snippet { margin: .5rem .6rem 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.author { margin: .25rem .6rem .6rem; color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sentinel { grid-column: 1 / -1; min-height: 1px; }
.pager { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; }
.js .pager { display: none; }
.pager-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; }
.empty { text-align: center; color: var(--muted); margin: 3rem 0; }
.logout { text-align: center; padding: 0 var(--gap) 2rem; }

/* detail */
.back { display: inline-flex; align-items: center; min-height: 44px; }
.detail-image { position: relative; border-radius: .6rem; overflow: hidden; background: var(--placeholder); }
.detail-image img { display: block; width: 100%; height: auto; }
.detail-image .placeholder { min-height: 12rem; }
.detail-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; color: var(--muted); }
.meta dt { font-weight: 600; }
.meta dd { margin: 0; overflow-wrap: anywhere; }

/* nav + flash */
.mainnav { display: flex; align-items: center; gap: .25rem; padding: .25rem var(--gap); border-bottom: 1px solid var(--border); background: var(--surface); }
.mainnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--text); text-decoration: none; }
.mainnav form { margin: 0 0 0 auto; }
.flash { margin: .5rem var(--gap); padding: .6rem .8rem; border-radius: .4rem; background: var(--surface); border: 1px solid var(--accent); }
.banner { padding: .6rem .8rem; border-radius: .4rem; background: var(--placeholder); border: 1px solid var(--border); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); margin: .25rem 0; }

/* categories + status */
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.inline-form input[type="text"], .inline-form input[type="date"] { flex: 1; min-width: 8rem; }
.cat-list { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.cat-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); }
.cat-pos { min-width: 1.5rem; color: var(--muted); text-align: center; }
.cat-row .inline-form { flex: 1; margin: 0; }
.cat-move { display: flex; gap: .25rem; }
.cat-move form { margin: 0; }
.danger summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.failed-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.failed-list li { padding: .5rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); }
.failed-url, .failed-error { overflow-wrap: anywhere; margin: 0; }
progress { width: 100%; height: 1rem; }

/* detail */
.cat-toggle { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1rem 0; }
.cat-toggle p { flex-basis: 100%; margin: 0; color: var(--muted); }
.cat-toggle .chip { cursor: pointer; }

/* select mode */
.card-item { position: relative; -webkit-touch-callout: none; user-select: none; }
.pick { display: none; position: absolute; top: .4rem; right: .4rem; width: 28px; height: 28px; min-height: 0; padding: 0; z-index: 2; }
.selecting .pick { display: block; }
.selecting .post-card { outline: 2px solid transparent; }
.selecting .card-item:has(.pick:checked) .post-card { outline-color: var(--accent); }
.bulk-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: .5rem var(--gap); background: var(--surface); border-top: 1px solid var(--border); max-height: 50vh; overflow-y: auto; }
.selecting .bulk-bar { display: block; }
.selecting .pager { margin-bottom: 12rem; }
.bulk-bar form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bulk-count { margin: 0; flex-basis: 100%; }