:root {
  --bg: #07040a;
  --panel: #120a14;
  --panel-2: #1a0e1d;
  --pink: #ff2e97;
  --pink-hot: #ff6ec0;
  --pink-deep: #b3126a;
  --text: #f6eaf1;
  --muted: #a98a9d;
  --glow: 0 0 6px rgba(255, 46, 151, .8), 0 0 18px rgba(255, 46, 151, .55), 0 0 42px rgba(255, 46, 151, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse 80% 40% at 50% -8%, rgba(255, 46, 151, .22), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
body.gated { overflow: hidden; }

a { color: var(--pink-hot); text-decoration: none; }
a:hover { color: #fff; text-shadow: 0 0 10px var(--pink); }

/* ---- header / neon logo ---- */
.site-header {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.6rem 1rem 1rem;
  border-bottom: 1px solid rgba(255, 46, 151, .25);
  box-shadow: 0 10px 40px -20px rgba(255, 46, 151, .5);
}
.logo { display: block; width: min(440px, 88vw); height: auto; }
.logo .tube { fill: none; stroke: var(--pink-hot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.logo .word { fill: #fff; stroke: var(--pink); stroke-width: 1.2; paint-order: stroke; }
.logo .sub { fill: var(--pink-hot); }
.logo .flicker { animation: flicker 7s infinite; }
@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .55; }
  21% { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) { .logo .flicker { animation: none; } }

.search { display: flex; gap: .5rem; width: min(520px, 100%); }
.search input {
  flex: 1; min-width: 0; padding: .6rem 1rem; color: var(--text); font-size: 1rem;
  background: var(--panel); border: 1px solid var(--pink-deep); border-radius: 999px; outline: none;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 18px rgba(255, 46, 151, .45); }
.btn {
  appearance: none; cursor: pointer; padding: .6rem 1.4rem; font: inherit; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: transparent; border: 1px solid var(--pink); border-radius: 999px;
  box-shadow: 0 0 10px rgba(255, 46, 151, .5), inset 0 0 10px rgba(255, 46, 151, .25);
  transition: .15s;
}
.btn:hover { background: var(--pink); box-shadow: var(--glow); color: #fff; text-shadow: none; }
.btn.solid { background: var(--pink); box-shadow: var(--glow); }
.btn.solid:hover { background: var(--pink-hot); }
.btn.ghost { border-color: var(--muted); color: var(--muted); box-shadow: none; }
.btn.ghost:hover { background: transparent; border-color: #fff; color: #fff; box-shadow: none; }

/* ---- layout ---- */
main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h2, h3 { color: var(--pink-hot); text-shadow: 0 0 14px rgba(255, 46, 151, .55); }

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.card {
  position: relative; display: block; overflow: hidden; color: inherit;
  background: var(--panel); border: 1px solid rgba(255, 46, 151, .22); border-radius: 12px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover {
  transform: translateY(-3px); border-color: var(--pink);
  box-shadow: 0 0 0 1px var(--pink), 0 8px 34px -6px rgba(255, 46, 151, .55);
  text-shadow: none;
}
.card .thumb { aspect-ratio: 3 / 4; background: var(--panel-2); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .meta { padding: .6rem .8rem .8rem; }
.card .title { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.card .sub { color: var(--muted); font-size: .82rem; margin-top: .2rem; }

@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .card .meta { padding: .5rem .6rem .6rem; }
  .card .title { font-size: .9rem; }
}

.card .cover { display: block; color: inherit; }
/* superuser only: every planned cover shot of this card is made */
.card.allshots { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 14px rgba(255, 46, 151, .75), 0 0 34px rgba(255, 46, 151, .45); }
.card.selected { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 26px -4px rgba(255, 46, 151, .6); }

/* neon radio-style multiselect, top left */
.pick {
  appearance: none; -webkit-appearance: none; position: absolute; top: .55rem; left: .55rem; z-index: 2;
  width: 1.7rem; height: 1.7rem; margin: 0; cursor: pointer; border-radius: 50%;
  background: rgba(7, 4, 10, .72); border: 2px solid var(--pink-hot);
  box-shadow: 0 0 8px rgba(255, 46, 151, .6), inset 0 0 6px rgba(255, 46, 151, .35);
  transition: .12s;
}
.pick:hover { box-shadow: var(--glow); }
.pick:checked { background: radial-gradient(circle, #fff 0 22%, var(--pink) 26% 62%, rgba(7, 4, 10, .72) 66%); box-shadow: var(--glow); }
.pick:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* download PNG, top right */
.dl {
  position: absolute; top: .55rem; right: .55rem; z-index: 2; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #fff;
  background: rgba(7, 4, 10, .72); border: 2px solid var(--pink-hot);
  box-shadow: 0 0 8px rgba(255, 46, 151, .6), inset 0 0 6px rgba(255, 46, 151, .35);
  transition: .12s;
}
.dl:hover { background: var(--pink); color: #fff; box-shadow: var(--glow); text-shadow: none; }

/* floating bundle bar */
.selbar {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 1.5rem); padding: .6rem .9rem;
  background: rgba(18, 10, 20, .94); backdrop-filter: blur(8px);
  border: 1px solid var(--pink); border-radius: 28px; box-shadow: var(--glow);
}
.selbar[hidden] { display: none; }
.selbar b { color: var(--pink-hot); }
.selbar .btn { padding: .4rem .9rem; white-space: nowrap; font-size: .9rem; }
@media (max-width: 600px) { .selbar { gap: .4rem; padding: .5rem .6rem; } .selbar .btn { padding: .35rem .7rem; } }

.pager { flex-wrap: wrap; }
.jump { display: flex; align-items: center; gap: .5rem; }
.jump input {
  width: 5.5rem; padding: .6rem 1rem; font-size: 1rem; text-align: center; color: var(--text);
  background: var(--panel); border: 1px solid var(--pink-deep); border-radius: 999px; outline: none;
  -moz-appearance: textfield;
}
.jump input::-webkit-outer-spin-button, .jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jump input:focus { border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink), 0 0 18px rgba(255, 46, 151, .45); }

.pager { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin: 2rem 0 0; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 4rem 0; }

/* ---- post page ---- */
.byline { color: var(--muted); }
.byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.byline a:hover { color: #ff5fb0; }
.thumbs { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.thumbs img { max-width: 100%; max-height: 34rem; border-radius: 10px; border: 1px solid rgba(255, 46, 151, .35); }
/* Original poster images mix wide and tall shots: justified rows, every picture in a row the same height */
.thumbs.posters { gap: .6rem; }
.thumbs.posters > a.shot { display: block; flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 15rem); min-width: 0; }
.thumbs.posters::after { content: ""; flex: 999 1 0; }   /* a short last row keeps its size instead of stretching */
.thumbs.posters img { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: var(--ar, 1.5); object-fit: cover; }
figure { margin: 0; }
figcaption { margin-top: .4rem; font-size: .9rem; }
.back { display: inline-block; margin-bottom: .5rem; }

/* ---- 18+ gate ---- */
.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem;
  background: rgba(4, 2, 6, .96); backdrop-filter: blur(14px);
}
.gate-box {
  width: min(520px, 100%); text-align: center; padding: 2rem 1.5rem;
  background: var(--panel); border: 2px solid var(--pink); border-radius: 18px;
  box-shadow: var(--glow), inset 0 0 30px rgba(255, 46, 151, .12);
}
.gate .badge {
  display: inline-grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: .6rem;
  font-size: 2.2rem; font-weight: 900; color: #fff; border: 3px solid var(--pink); border-radius: 50%;
  text-shadow: 0 0 8px var(--pink), 0 0 22px var(--pink);
  box-shadow: 0 0 14px var(--pink), inset 0 0 14px rgba(255, 46, 151, .5);
}
.gate h2 { margin: .2rem 0 .6rem; font-size: 1.6rem; color: #fff; }
.gate p { color: var(--muted); line-height: 1.5; margin: 0 0 1.4rem; }
.gate .actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.gate form { margin: 0; }

.profile { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: .5rem 0 1rem; padding: .8rem 1rem; border: 1px solid rgba(255, 46, 151, .3); border-radius: 12px; background: var(--panel); }
.profile div { min-width: 6rem; }
.profile dt { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.profile dd { margin: .1rem 0 0; font-weight: 600; }

.dl { position: absolute; }
.dl-count {
  position: absolute; bottom: -.35rem; right: -.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800; line-height: 1; color: #fff;
  background: var(--pink); border-radius: 999px; box-shadow: 0 0 8px var(--pink);
}

.tagline { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.tagline span { padding: .05rem .5rem; font-size: .7rem; color: var(--pink-hot); border: 1px solid rgba(255, 46, 151, .4); border-radius: 999px; }

.filterbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: .7rem .9rem; margin: 0 0 1.3rem; }
/* Wide screens: a tidy grid of six per row (11 controls = two rows) instead of one long row with a lonely Sort. */
@media (min-width: 900px) {
  .filterbar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1000px; margin-left: auto; margin-right: auto; justify-items: start; }
  .filterbar .fsel { width: 100%; }
  .filterbar .fsel select { width: 100%; }
}
.fsel { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.fsel span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; padding-left: .8rem; }
.fsel select {
  appearance: none; -webkit-appearance: none; cursor: pointer; min-width: 7.5rem; padding: .4rem 2rem .4rem .9rem;
  font: inherit; font-size: .9rem; color: var(--text); outline: none;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ff6ec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center;
  border: 1px solid var(--pink-deep); border-radius: 999px;
}
.fsel select:hover, .fsel select:focus { border-color: var(--pink); box-shadow: 0 0 12px rgba(255, 46, 151, .45); }
.fsel select.on { border-color: var(--pink); color: #fff; background-color: rgba(255, 46, 151, .22); box-shadow: 0 0 10px rgba(255, 46, 151, .5); }
.fsel option { background: var(--panel); color: var(--text); }
.clear { font-size: .85rem; color: var(--muted); padding-bottom: .5rem; }
@media (max-width: 600px) { .fsel { flex: 1 1 calc(50% - .5rem); } .fsel select { width: 100%; } }

/* tag links on the post page */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }
.chip { padding: .25rem .85rem; border: 1px solid var(--pink-deep); border-radius: 999px; color: var(--pink-hot); font-size: .85rem; }
.chip:hover { border-color: var(--pink); color: #fff; box-shadow: 0 0 12px rgba(255, 46, 151, .5); text-shadow: none; }
.chip.on { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: var(--glow); }

.site-footer { text-align: center; padding: 2rem 1rem 4rem; color: var(--muted); font-size: .85rem; }
.site-footer a { color: var(--pink-hot); }
.site-footer .foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem 1.2rem; }
.site-footer .foot-legal, .site-footer .foot-status, .site-footer .foot-admin { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid rgba(255, 46, 151, .2); max-width: 46rem; margin-left: auto; margin-right: auto; }
.site-footer .foot-coffee { margin-top: 1.2rem; }
.site-footer .foot-backfill { color: inherit; }  /* plain text, not a link */
.gate .legal-links { margin: -.6rem 0 1.2rem; font-size: .8rem; }
.legal { max-width: 46rem; margin: 0 auto; line-height: 1.65; }
.legal h2 { margin: 2rem 0 .5rem; font-size: 1.25rem; }
.legal h3 { margin: 1.3rem 0 .3rem; font-size: 1.02rem; color: var(--text); text-shadow: none; }
.legal ul, .legal ol { padding-left: 1.4rem; }
.legal li { margin: .3rem 0; }
.legal .updated { color: var(--muted); font-size: .85rem; }
.legal table { width: 100%; border-collapse: collapse; margin: .4rem 0 .8rem; font-size: .92rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .35rem .6rem; border-bottom: 1px solid rgba(255, 46, 151, .18); }
.legal th { color: var(--muted); font-weight: 600; }
@media (max-width: 560px) { .legal table { font-size: .84rem; } .legal th, .legal td { padding: .3rem .4rem; } }
.check-images .check-actions { display: flex; gap: .6rem; }
.check-images .check-progress { height: 8px; border-radius: 4px; background: var(--panel); overflow: hidden; margin: .8rem 0 .4rem; }
.check-images .check-bar { height: 100%; width: 0; background: #ff2e97; transition: width .2s; }
.check-images .check-status { color: var(--muted); font-size: .9rem; }
.check-images .check-table td { word-break: break-word; }
.legal .notice { padding: .9rem 1.1rem; background: var(--panel); border: 1px solid rgba(255, 46, 151, .35); border-radius: 12px; }

/* sort control sits at the end of the filter row, set apart from the filters */
.fsel.sort { margin-left: .4rem; padding-left: .9rem; border-left: 1px solid rgba(255, 46, 151, .3); }
@media (min-width: 900px) { .filterbar .fsel.sort { margin-left: 0; padding-left: 0; border-left: 0; } }
@media (max-width: 600px) { .fsel.sort { margin-left: 0; padding-left: 0; border-left: 0; } }
.muted { color: var(--muted); font-weight: 400; font-size: .85rem; }

.site-footer .signout { display: inline; margin: 0; }
.site-footer .signout button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .85); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lbframe { position: relative; line-height: 0; }
.lbcount { position: absolute; left: 0; right: 0; bottom: .9rem; text-align: center; line-height: 1.2; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: var(--pink-hot); text-shadow: 0 0 2px #000, 0 0 6px #000, 0 0 12px rgba(255, 46, 151, .7); pointer-events: none; }
.lbcount[hidden] { display: none; }
/* < > beside the picture (over its edges on a narrow screen, where there is no room outside) */
.lbnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: grid; place-items: center; padding: 0;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; cursor: pointer; color: var(--pink-hot);
  background: rgba(7, 4, 10, .72); border: 2px solid var(--pink-hot);
  box-shadow: 0 0 8px rgba(255, 46, 151, .6), inset 0 0 6px rgba(255, 46, 151, .35); transition: .12s;
}
.lbnav:hover { background: var(--pink); color: #fff; box-shadow: var(--glow); }
.lbnav[hidden] { display: none; }
.lbnav.prev { right: calc(100% + 1rem); }
.lbnav.next { left: calc(100% + 1rem); }
@media (max-width: 700px) {
  .lbnav { width: 2.4rem; height: 2.4rem; }
  .lbnav.prev { right: auto; left: .5rem; }
  .lbnav.next { left: auto; right: .5rem; }
  .lightbox img { max-width: 96vw; }
}
.lightbox img { max-height: 96vh; max-width: min(96vw, 100vw - 9rem); width: auto; height: auto; border-radius: 8px; box-shadow: 0 0 40px rgba(255, 46, 151, .4); cursor: zoom-out; }

.searchrow { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; width: 100%; }
.searchrow .search { flex: 0 1 520px; }
.searchrow .ext { white-space: nowrap; text-decoration: none; }
.searchrow .ext:hover { border-color: var(--pink); color: #fff; }
@media (max-width: 900px) { .searchrow .search { order: -1; flex-basis: 100%; width: 100%; } }

.modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .8); }
.modal[hidden] { display: none; }
.modal-box { max-width: 28rem; padding: 1.6rem; background: var(--panel); border: 1px solid var(--pink); border-radius: 14px; box-shadow: var(--glow); }
.modal-box h2 { margin-top: 0; }
.modal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 0; }

/* owner only: delete a generated cover, top right of the image */
.coverwrap { position: relative; display: inline-block; line-height: 0; max-width: 46%;}
.delcover { position: absolute; top: .55rem; right: .55rem; z-index: 2; margin: 0; }
.delcover button {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: rgba(7, 4, 10, .72); border: 2px solid var(--pink-hot);
  box-shadow: 0 0 8px rgba(255, 46, 151, .6), inset 0 0 6px rgba(255, 46, 151, .35); transition: .12s;
}
.delcover button:hover { background: #d62839; border-color: #ff6b7a; box-shadow: 0 0 12px rgba(214, 40, 57, .8); }

/* a read-only counter in the header, next to the buttons */
.pill {
  display: inline-block; padding: .6rem 1.2rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; cursor: default;
  color: var(--pink-hot); border: 1px solid rgba(255, 46, 151, .55); border-radius: 999px; background: rgba(255, 46, 151, .08);
}


/* My posts page: a phone-first grid of cards with a tick box on each, and a toolbar that wraps cleanly */
.mine { max-width: 60rem; margin: 0 auto; padding: 0 1rem; }
.mine h2 { margin: 1rem 0 .2rem; }
.mine .muted { margin: 0 0 1rem; }
.mine-pause { margin: 1rem 0 1.2rem; }
.mine-help { margin: 2.2rem 0 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(255, 46, 151, .3); border-radius: 12px; background: var(--panel); }
.mine-help h3 { margin: 0 0 .5rem; }
.mine-help h4 { margin: 1.3rem 0 .3rem; padding-top: .9rem; border-top: 1px solid rgba(255, 46, 151, .2); color: #fff; font-size: 1.05rem; }
.mine-help h4 + p { margin: 0 0 .2rem; }
.mine-help dl { margin: .6rem 0; }
.mine-help dt { font-weight: 700; color: var(--pink-hot); margin-top: .7rem; }
.mine-help dd { margin: .15rem 0 0; }
.mine-pause .btn { width: 100%; }
.mine-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.mine-count { color: var(--muted); margin-right: auto; }
.mine-all { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .2rem; }
.mine-bar .btn { flex: 1 1 calc(50% - .4rem); text-align: center; padding: .65rem .6rem; }
.btn.danger { color: #ff8f9a; border-color: rgba(255, 90, 110, .6); }
.mine input[type=checkbox] { width: 1.35rem; height: 1.35rem; accent-color: var(--pink); }
.mine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (min-width: 560px) { .mine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mine-bar .btn { flex: 0 0 auto; } }
@media (min-width: 860px) { .mine-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mine-card { position: relative; display: block; background: var(--panel); border: 1px solid var(--pink-deep); border-radius: 12px; overflow: hidden; cursor: pointer; }
.mine-card:has(input:checked) { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink); }
.mine-card > input { position: absolute; top: .5rem; left: .5rem; z-index: 2; }
.mine-pic { display: block; aspect-ratio: 3 / 4; background: #000; }
.mine-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mine-title { display: block; padding: .5rem .6rem .6rem; font-size: .85rem; line-height: 1.25; overflow-wrap: anywhere; }


/* Superuser view of hidden posts */
.hbadge { position: absolute; top: .5rem; left: .5rem; z-index: 3; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgba(255, 90, 110, .92); color: #1a0508; }
.card .cover { position: relative; }
.hidtoggle { align-self: end; padding: .45rem .9rem; border: 1px solid rgba(255, 90, 110, .6); border-radius: 999px; color: #ff8f9a; }
.hidtoggle.on { background: rgba(255, 90, 110, .15); }
.hidnote { padding: .8rem 1rem; border: 1px solid rgba(255, 90, 110, .6); border-radius: 12px; background: rgba(255, 90, 110, .08); }
form.inline { display: inline; margin-left: .6rem; }

/* Post page on phones: two pictures per row (desktop keeps its flowing thumbnails) */
@media (max-width: 700px) {
  .thumbs { gap: .8rem; }
  .thumbs > .coverwrap, .thumbs > figure, .thumbs > a.shot { flex: 0 0 calc(50% - .4rem); width: calc(50% - .4rem); min-width: 0; }
  .coverwrap { display: block; }
  .thumbs a.shot { display: block; }
  .thumbs img { width: 100%; height: auto; max-height: none !important; }
  .thumbs.posters > a.shot { flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 7rem); width: auto; }
  figcaption { font-size: .8rem; overflow-wrap: anywhere; }
  figcaption a { display: inline-block; padding: .45rem 0; }
}

/* Leaderboard */
.leaders { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.leaders h2 { margin: 1rem 0 .2rem; }
.leaders .muted { margin: 0 0 1.2rem; }
.board { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.board li { display: grid; grid-template-columns: 2.6rem 1fr auto; grid-template-areas: "rank who count" "rank latest count"; align-items: center; column-gap: .9rem;
  padding: .6rem 1rem; border: 1px solid rgba(255, 46, 151, .25); border-radius: 12px; background: var(--panel); }
.board .rank { grid-area: rank; font-size: 1.3rem; font-weight: 800; color: var(--muted); text-align: center; }
.board .who { grid-area: who; font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.board .who:hover { color: var(--pink-hot); text-decoration: underline; }
.board .count { grid-area: count; font-weight: 700; color: var(--pink-hot); white-space: nowrap; }
.board .latest { grid-area: latest; color: var(--muted); font-size: .8rem; }
.board .top { border-color: var(--pink); box-shadow: 0 0 12px rgba(255, 46, 151, .35); }
.board .top1 .rank { color: #ffd54a; } .board .top2 .rank { color: #d9dde3; } .board .top3 .rank { color: #e0a36a; }

/* Below the dropdowns: uploader filter, hidden-posts toggle, clear link; one centered row across the whole grid. */
.fextra { grid-column: 1 / -1; justify-self: stretch; flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1rem; }
.fextra .clear { padding-bottom: 0; }
.chipx { white-space: nowrap; padding: .45rem 1rem; border-radius: 999px; text-decoration: none; }
.chipx.uploader { border: 1px solid var(--pink); color: #fff; background: rgba(255, 46, 151, .22); box-shadow: 0 0 10px rgba(255, 46, 151, .4); }
.chipx.uploader:hover { background: rgba(255, 46, 151, .35); }

/* My posts: edit a post's name and description */
.mine-edit { display: block; padding: 0 .6rem .45rem; font-size: .78rem; color: var(--pink-hot); position: relative; z-index: 2; }
.mine-editbox { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; margin: 1rem 0 2rem; }
.mine-editpic { width: 180px; max-width: 40%; border-radius: 12px; border: 1px solid var(--pink-deep); }
.mine-editform { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .35rem; }
.mine-editform label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin-top: .6rem; }
.mine-editform input, .mine-editform textarea { width: 100%; box-sizing: border-box; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--pink-deep);
  background: var(--panel-2); color: var(--text); font: inherit; }
.mine-editform input:focus, .mine-editform textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 10px rgba(255, 46, 151, .4); }
.mine-editbtns { display: flex; flex-wrap: wrap; gap: .6rem; }
.formerror { color: #ff8f9a; margin: 0; }

/* Favorite heart, bottom left of the tile image (an overlay the size of the thumbnail; only the button takes clicks) */
.card { position: relative; }
.favbox { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 3 / 4; pointer-events: none; z-index: 2; }
.fav {
  pointer-events: auto; position: absolute; left: .55rem; bottom: .55rem; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; cursor: pointer; color: var(--pink-hot);
  background: rgba(7, 4, 10, .72); border: 2px solid var(--pink-hot);
  box-shadow: 0 0 8px rgba(255, 46, 151, .6), inset 0 0 6px rgba(255, 46, 151, .35); transition: .12s;
}
.fav svg { fill: none; }
.fav:hover { box-shadow: var(--glow); }
.fav.on { color: var(--pink); }
.fav.on svg { fill: currentColor; }
.fav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* My favorites on /me/ */
.mine-favs { margin: 2rem 0 0; }
.mine-favs h3 { margin: 0 0 .8rem; }
.mine-favs .favhead { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .8rem; }
.mine-favs .favhead h3 { margin: 0; }
.mine-favs .favhead form { margin: 0; }
.mine-favs .favhead .btn { font-size: .8rem; padding: .3rem .8rem; }
.mine-favs .mine-card { cursor: default; }
.mine-favs .mine-title { color: var(--text); text-decoration: none; padding-bottom: .1rem; }
.mine-by { display: block; padding: 0 .6rem .3rem; font-size: .75rem; color: var(--muted); }
.mine-unfav { padding: 0 .6rem .6rem; }
.mine-unfav button { background: none; border: 0; padding: 0; color: var(--pink-hot); font: inherit; font-size: .78rem; cursor: pointer; text-decoration: underline; }
.mine-sec { margin: 1rem 0 .6rem; }

.tabs { display: flex; gap: .5rem; margin: .6rem 0 .9rem; border-bottom: 1px solid rgba(255, 46, 151, .3); }
.tab { padding: .5rem 1rem; border-radius: 10px 10px 0 0; color: var(--muted); text-decoration: none; border: 1px solid transparent; border-bottom: 0; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.on { color: #fff; border-color: rgba(255, 46, 151, .5); background: var(--panel); box-shadow: 0 -4px 12px -6px rgba(255, 46, 151, .6); }
.board li.withpic { grid-template-columns: 2.6rem 3.4rem 1fr auto; grid-template-areas: "rank pic who count" "rank pic latest count"; }
.board .pic { grid-area: pic; display: block; width: 3.4rem; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: #000; }
.board .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board .latest a { color: inherit; }

/* New covers page: the newest generated covers, gallery tiles */
.newcovers > h2 { text-align: center; margin-bottom: 1.2rem; }
.newcovers .card .cover { cursor: zoom-in; }

/* Post page: favorite button beside the title */
.titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.titlerow h2 { margin-right: auto; }
.postfav { margin: 0; }
.favbtn { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--pink-hot); background: var(--panel); border: 1px solid var(--pink); }
.favbtn svg { fill: none; flex-shrink: 0; }
.favbtn:hover { box-shadow: var(--glow); }
.favbtn.on { background: var(--pink); color: #fff; }
.favbtn.on svg { fill: currentColor; }
.favbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.favbtn .favcount { padding-left: .5rem; border-left: 1px solid currentColor; opacity: .85; font-variant-numeric: tabular-nums; }

/* Stats page (admin only, /admin/stats/) */
.stats { max-width: 72rem; margin: 0 auto; }
.stats > h2 { text-align: center; margin-bottom: .3rem; }
.stats h3 { margin: 2rem 0 .7rem; color: var(--pink-hot); }
.stats h4 { margin: 1.2rem 0 .5rem; font-size: .95rem; color: var(--text); }
.stats-note { color: var(--muted); font-size: .85rem; text-align: center; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; }
.stat-tile { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; background: var(--panel); border: 1px solid rgba(255, 46, 151, .22); border-radius: 12px; }
.stat-tile b { font-size: 1.7rem; line-height: 1.15; color: var(--text); }
.stat-label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.stat-tile small { color: var(--muted); font-size: .8rem; }
.stat-chart { display: flex; align-items: flex-end; gap: 3px; height: 9rem; margin: 1.2rem 0 .3rem; padding: .6rem; background: var(--panel); border: 1px solid rgba(255, 46, 151, .22); border-radius: 12px; }
.stat-chart .bar { position: relative; flex: 1; height: 100%; }
.stat-chart i { position: absolute; bottom: 0; left: 0; right: 0; border-radius: 3px 3px 0 0; }
.stat-chart i.v { background: rgba(255, 46, 151, .35); }
.stat-chart i.u { left: 25%; right: 25%; background: var(--pink-hot); }
.stat-legend { color: var(--muted); font-size: .8rem; }
.stat-legend .key { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: -1px; margin-left: .4rem; }
.stat-legend .key.v { background: rgba(255, 46, 151, .35); }
.stat-legend .key.u { background: var(--pink-hot); }
.stat-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.6rem; }
.stat-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.stat-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(255, 46, 151, .14); }
.stat-list li a, .stat-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-list li span:last-child { color: var(--muted); white-space: nowrap; }
.stat-empty { color: var(--muted); font-size: .9rem; }
.stat-scroll { overflow-x: auto; }
.stat-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stat-table th, .stat-table td { padding: .35rem .6rem; text-align: right; border-bottom: 1px solid rgba(255, 46, 151, .14); white-space: nowrap; }
.stat-table th:first-child, .stat-table td:first-child { text-align: left; }
.stat-table th { color: var(--muted); font-weight: 600; }