:root {
  --bg: #0d0b12; --fg: #f6f1fa; --muted: #b9aac6; --pink: #ff6fb5; --pink-2: #ff9ad0;
  --glass: rgba(20, 16, 28, .62); --line: rgba(255, 255, 255, .12);
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
button, input { font: inherit; }
[hidden] { display: none !important; }

#bg { position: fixed; inset: -6%; z-index: 0; background: radial-gradient(60% 60% at 50% 30%, #2a1633, var(--bg)); }
#bg .layer { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(18px) brightness(.45) saturate(1.2); opacity: 0; transition: opacity 1.2s ease; will-change: opacity; }
#bg .layer.on { opacity: 1; animation: slowzoom 30s ease-in-out infinite alternate; }
@keyframes slowzoom { to { transform: scale(1.08); } }

.view { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center;
  padding: calc(16px + var(--sa-t)) 16px calc(16px + var(--sa-b)); }
#feed { display: block; padding: 0; }
.card { width: min(440px, 100%); background: var(--glass); backdrop-filter: blur(16px);
  border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: grid; gap: 14px; }
h1 { margin: 0; font-size: 1.5rem; } h2 { margin: 0; font-size: 1.2rem; } p { margin: 0; color: var(--muted); }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 12px 18px;
  border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--fg);
  text-decoration: none; cursor: pointer; transition: transform .08s, background .15s; touch-action: manipulation; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--pink), #c94dff); border: 0; font-weight: 600; }
.btn.primary:disabled { opacity: .45; cursor: not-allowed; }
.btn.secondary { background: rgba(255,111,181,.14); border-color: rgba(255,111,181,.4); }
.btn.ghost { background: transparent; color: var(--muted); }
.icon { background: none; border: 0; color: var(--fg); font-size: 1.3rem; padding: 6px 10px; cursor: pointer; }

.field { display: grid; gap: 6px; } .field > span { color: var(--muted); font-size: .9rem; }
.ac { position: relative; }
.ac input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(0,0,0,.35); color: var(--fg); outline: none; }
.ac input:focus { border-color: var(--pink); }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; margin: 0; padding: 6px; list-style: none;
  background: #1a1524; border: 1px solid var(--line); border-radius: 14px; max-height: 220px; overflow: auto; }
.ac-list li { padding: 10px 12px; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.ac-list li.active, .ac-list li:hover { background: rgba(255,111,181,.18); }
.ac-list small { color: var(--muted); }
.chips { display: grid; gap: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px;
  background: rgba(255,111,181,.2); border: 1px solid rgba(255,111,181,.5); font-size: .9rem; cursor: pointer; }
.chip.suggest { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--muted); }
.chip.suggest.on { background: rgba(255,111,181,.2); border-color: rgba(255,111,181,.5); color: var(--fg); }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.actions { display: grid; gap: 10px; margin-top: 6px; }

/* the picker is the first card of the feed, so swiping up goes straight into "anything" */
.post.hero { height: auto; min-height: 100dvh; display: block; background: transparent;
  padding: calc(16px + var(--sa-t)) 20px calc(24px + var(--sa-b)); overflow: visible; user-select: auto; -webkit-user-select: auto; }
.hero-inner { width: min(520px, 100%); margin: 0 auto; display: grid; gap: 16px; padding-top: 4vh; }
.brand { color: var(--pink-2); font-weight: 600; letter-spacing: .02em; }
.hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.1; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.hero .field { display: grid; grid-template-columns: 5.5rem 1fr; align-items: start; gap: 12px; }
.hero .field > span { font-size: 1.05rem; color: var(--fg); padding-top: 14px; white-space: nowrap; }
.hero .ac input { padding: 14px 16px; font-size: 1.05rem; background: rgba(0,0,0,.45); }
.hero .ac-list { max-height: 180px; }
.hero .actions { margin-top: 4px; }
.hint { text-align: center; color: var(--muted); font-size: .9rem; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
@media (min-width: 900px) { .hero .actions { grid-template-columns: 1fr 1fr; } }
@media (max-width: 359px) { .hero .field { grid-template-columns: 1fr; } .hero .field > span { padding-top: 0; } }

/* feed */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between;
  padding: calc(6px + var(--sa-t)) 8px 6px; background: linear-gradient(rgba(0,0,0,.6), transparent); pointer-events: none; }
.topbar > * { pointer-events: auto; } .topbar .title { color: var(--muted); font-size: .9rem; }
/* 100vh first every time: Safari before 15.4 and Chrome before 108 drop the dvh line as invalid,
   and without the fallback the feed collapses to content height on exactly those phones. */
.feed-list { height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; touch-action: pan-y;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.feed-list::-webkit-scrollbar { display: none; }
.post { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; background: #000; user-select: none; -webkit-user-select: none; }
.post .media { max-width: 100%; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; object-fit: contain; }
.post .ph { width: 60vw; max-width: 320px; aspect-ratio: var(--ar, 3 / 4); border-radius: 12px;
  background: linear-gradient(110deg, #1b1524 35%, #2a2036 50%, #1b1524 65%); background-size: 300%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -300% 0; } }
.post .meta { position: absolute; left: 12px; right: 12px; bottom: calc(30px + var(--sa-b)); display: flex; justify-content: space-between;
  align-items: flex-end; gap: 10px; pointer-events: none; }
.post .meta > * { pointer-events: auto; }
.pill { padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); font-size: .85rem; }
button.pill { font: inherit; color: var(--fg); border: 0; cursor: pointer; }
.heart { font-size: 1.7rem; background: none; border: 0; filter: grayscale(1) opacity(.7); cursor: pointer; transition: transform .1s, filter .15s; }
.heart.on { filter: none; transform: scale(1.15); }
.vmute { cursor: pointer; }
.vbar { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; padding-bottom: var(--sa-b);
  display: flex; align-items: flex-end; touch-action: none; cursor: pointer; z-index: 2; }
.vtrack { width: 100%; height: 4px; background: rgba(255,255,255,.25); }
.vfill { height: 100%; width: 0; background: var(--pink); }
.vbar:active .vtrack, .vbar.drag .vtrack { height: 6px; }
.tags { position: absolute; left: 12px; right: 12px; bottom: calc(76px + var(--sa-b)); max-height: 40vh; overflow: auto;
  display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.6); backdrop-filter: blur(10px); }
.tags span { font-size: .8rem; color: var(--muted); }
.burst { position: absolute; font-size: 6rem; pointer-events: none; animation: burst .7s ease-out forwards; }
@keyframes burst { 0% { transform: scale(.3); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.4) translateY(-30px); opacity: 0; } }
.post.info { padding: 24px; text-align: center; color: var(--muted); }
.post.info .card { background: var(--glass); }

/* drawer + modal */
#drawer { position: fixed; inset: 0; z-index: 10; background: #120e1a; display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(10px + var(--sa-t)) 12px calc(12px + var(--sa-b)); gap: 10px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; align-content: start; }
.drawer-grid .thumb { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #000; }
.drawer-grid img { width: 100%; height: 100%; object-fit: cover; }
.drawer-grid button { position: absolute; top: 4px; right: 4px; border: 0; border-radius: 999px; width: 26px; height: 26px;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.drawer-grid .empty { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 40px 0; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
#toast { position: fixed; left: 50%; bottom: calc(24px + var(--sa-b)); transform: translateX(-50%); z-index: 30;
  padding: 10px 16px; border-radius: 999px; background: #241b30; border: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.5); }

@media (min-width: 900px) {
  .feed-list { max-width: 900px; margin: 0 auto; }
  .post { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { #bg .layer.on, .post .ph, .burst, .hint { animation: none; } }