:root {
  --bg: #0b0b12;
  --bg2: #14141f;
  --card: #181826;
  --line: #262638;
  --txt: #e8e8f0;
  --mut: #9a9ab2;
  --accent: #7c5cff;
  --accent2: #ff5c8a;
  --ok: #3ce28a;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* The `hidden` attribute must always win, even over class rules like
   `.modal { display: grid }`. Without this the empty modal renders on load. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, #1c1430 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #14202e 0%, transparent 55%),
    var(--bg);
  color: var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
  background: rgba(11, 11, 18, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  font-weight: 900; font-size: 22px; letter-spacing: -.5px;
  background: linear-gradient(90deg, #fff, #b7a8ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo .dot { color: var(--accent2); -webkit-text-fill-color: var(--accent2); }
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--ok); padding: 4px 10px; border: 1px solid #1f3a2c; border-radius: 999px;
  background: #0e1a14;
}
.live.stale { color: #e2a13c; border-color: #3a2f1f; background: #1a150e; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(60, 226, 138, .55); } 70% { box-shadow: 0 0 0 9px rgba(60, 226, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 226, 138, 0); } }

.controls { display: flex; align-items: center; gap: 14px; }
.sort { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.sortBtn {
  border: 0; background: transparent; color: var(--mut); cursor: pointer;
  font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 999px;
}
.sortBtn.active { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.stat { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* ---------- tag chips ---------- */
.tags {
  position: sticky; top: 57px; z-index: 20;
  display: flex; gap: 8px; padding: 12px 20px; overflow-x: auto;
  background: rgba(11, 11, 18, .6); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tags::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--card);
  color: var(--mut); border-radius: 999px; padding: 7px 14px; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: .15s;
}
.chip:hover { color: #fff; border-color: #3a3a52; }
.chip.active { color: #fff; background: linear-gradient(90deg, rgba(124, 92, 255, .25), rgba(255, 92, 138, .25)); border-color: var(--accent); }
.chip.mini { padding: 3px 10px; font-size: 12px; }

/* ---------- new pill ---------- */
.newpill {
  position: fixed; top: 112px; left: 50%; transform: translateX(-50%);
  z-index: 40; border: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff;
  font-weight: 800; font-size: 13px; padding: 9px 18px; border-radius: 999px;
  box-shadow: var(--shadow); animation: drop .25s ease;
}
@keyframes drop { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------- grid ---------- */
.grid {
  columns: 4 260px; column-gap: 16px;
  padding: 18px 20px 0; max-width: 1280px; margin: 0 auto;
}
.card {
  break-inside: avoid; margin: 0 0 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease;
  animation: rise .35s ease both;
}
.card:hover { transform: translateY(-3px); border-color: #3a3a52; }
.card.fresh { outline: 2px solid var(--accent); outline-offset: -2px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: #0e0e16; }

/* ---------- unified meme visual (svg · photo · video) ---------- */
.visual {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0e0e16;
  container-type: inline-size;   /* lets caption text scale with the card via cqw */
}
.visual > img, .visual > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* caption overlay for uploaded photos/videos (generated memes bake text in the SVG) */
.capwrap {
  position: absolute; inset: 0; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4cqw 3cqw;
}
.cap {
  font-family: 'Arial Black', Impact, system-ui, sans-serif; font-weight: 900;
  text-align: center; color: #fff; text-transform: uppercase;
  font-size: 10cqw; line-height: 1.04; letter-spacing: .5px; word-break: break-word;
  -webkit-text-stroke: 0.9cqw #000; paint-order: stroke fill;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.cap.bottom { margin-top: auto; }

/* DOM animation presets — mirror src/images.js, applied to the media element */
.fxmedia { transform-origin: center; will-change: transform, filter; }
@media (prefers-reduced-motion: reduce) { .fxmedia { animation: none !important; } }
.anim-bounce { animation: m-bounce 1.1s ease-in-out infinite; }
.anim-spin   { animation: m-spin 3.2s linear infinite; }
.anim-pulse  { animation: m-pulse 1.2s ease-in-out infinite; }
.anim-float  { animation: m-float 3s ease-in-out infinite; }
.anim-shake  { animation: m-shake .5s ease-in-out infinite; }
.anim-zoom   { animation: m-zoom 1.6s ease-in-out infinite; }
.anim-swing  { animation: m-swing 1.4s ease-in-out infinite; transform-origin: top center; }
.anim-slide  { animation: m-slide 2s ease-in-out infinite; }
.anim-flip   { animation: m-flip 2.4s ease-in-out infinite; }
.anim-glitch { animation: m-glitch .35s steps(2, end) infinite; }
.anim-rainbow { animation: m-rainbow 6s linear infinite; }
@keyframes m-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes m-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes m-shake { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes m-zoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes m-swing { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes m-slide { 0%,100% { transform: translateX(-8%); } 50% { transform: translateX(8%); } }
@keyframes m-flip { 0%,100% { transform: perspective(600px) rotateY(0); } 50% { transform: perspective(600px) rotateY(180deg); } }
@keyframes m-glitch { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(2%,-1%); } 75% { transform: translate(-1%,-1%); } 100% { transform: translate(0,0); } }
@keyframes m-rainbow { to { filter: hue-rotate(360deg); } }
.card .meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.card .ttl { font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .react-row { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }

.rbtn {
  border: 1px solid var(--line); background: var(--bg2); color: var(--mut);
  border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 700;
  cursor: pointer; display: inline-flex; gap: 5px; align-items: center; transition: .12s;
}
.rbtn:hover { color: #fff; border-color: var(--accent); }
.rbtn.on { color: #fff; background: linear-gradient(90deg, rgba(124, 92, 255, .35), rgba(255, 92, 138, .35)); border-color: var(--accent); }
.rbtn .n { font-variant-numeric: tabular-nums; }
.author { color: var(--mut); font-size: 12px; }

/* ---------- footer / loader ---------- */
.sentinel { height: 1px; }
.loader, .foot { text-align: center; color: var(--mut); font-size: 13px; padding: 20px; }
.foot { padding: 28px 20px 60px; }
#endNote { display: block; color: #6f6f88; margin-bottom: 6px; }

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  padding: 24px; background: rgba(5, 5, 9, .82); backdrop-filter: blur(10px);
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modalInner {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0;
  max-width: 920px; width: 100%; max-height: 90vh;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow);
}
.modalFig { margin: 0; background: radial-gradient(120% 120% at 50% 0%, #15151f, #07070d); display: grid; place-items: center; aspect-ratio: 1 / 1; min-height: 280px; }
.modalFig img { width: 100%; height: 100%; object-fit: contain; }
.modalFig .visual { width: 100%; height: 100%; aspect-ratio: auto; background: transparent; }
.modalFig .visual > img, .modalFig .visual > video { object-fit: contain; }
.modalMeta { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.modalMeta h2 { margin: 0; font-size: 20px; }
.modalSub { display: flex; align-items: center; gap: 10px; }
.reactions { display: flex; flex-wrap: wrap; gap: 8px; }
.permalink { margin-top: auto; }
.permalink code { font-size: 11px; color: var(--mut); word-break: break-all; }
.modalClose {
  position: fixed; top: 20px; right: 24px; z-index: 101;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: #fff; font-size: 16px; cursor: pointer;
  transition: .15s;
}
.modalClose:hover { background: var(--accent2); border-color: var(--accent2); }

/* prev/next navigation */
.modalNav {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 101;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(24, 24, 38, .8); color: #fff; font-size: 20px; cursor: pointer;
  display: grid; place-items: center; transition: .15s;
}
.modalNav:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.08); }
.modalNav.prev { left: 24px; }
.modalNav.next { right: 24px; }
.modalNav[disabled] { opacity: .25; cursor: default; pointer-events: none; }

/* ---------- buttons / avatar ---------- */
.btn {
  border: 1px solid var(--line); background: var(--bg2); color: var(--txt);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn:hover { border-color: var(--accent); color: #fff; }
.btn.create { background: linear-gradient(90deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; }
.btn.create:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.avatarBtn, .avatarBig {
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  border-radius: 50%; display: grid; place-items: center; line-height: 1; transition: .15s;
}
.avatarBtn { width: 38px; height: 38px; font-size: 18px; }
.avatarBtn:hover { border-color: var(--accent); transform: scale(1.06); }
.avatarBig { width: 64px; height: 64px; font-size: 34px; flex: 0 0 auto; }
.avatarBig:hover { border-color: var(--accent); }

/* ---------- card thumb / badges / views ---------- */
.thumb { position: relative; }
.badges { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 3px 8px;
  border-radius: 999px; color: #fff; backdrop-filter: blur(4px);
  background: rgba(10, 10, 18, .55); border: 1px solid rgba(255, 255, 255, .18);
}
.badge.oc { background: linear-gradient(90deg, rgba(124, 92, 255, .85), rgba(255, 92, 138, .85)); border-color: transparent; }
.badge.loop { background: rgba(10, 10, 18, .6); }
.badge.media { background: rgba(10, 10, 18, .6); }
.viewchip {
  position: absolute; bottom: 8px; right: 8px; font-size: 11px; font-weight: 700;
  color: #fff; padding: 3px 8px; border-radius: 999px;
  background: rgba(10, 10, 18, .55); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, .14);
}
.viewchip .vn { font-variant-numeric: tabular-nums; }

/* ---------- modal extras ---------- */
.badgeRow { display: flex; gap: 6px; flex-wrap: wrap; }
.badgeRow:empty { display: none; }
.viewline { color: var(--mut); font-size: 13px; font-weight: 600; }
.share { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share code { font-size: 11px; color: var(--mut); word-break: break-all; flex: 1 1 140px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff;
  font-weight: 800; font-size: 14px; padding: 11px 20px; border-radius: 999px;
  box-shadow: var(--shadow); animation: drop .25s ease;
}

/* ---------- bottom-sheet modals (studio + profile) ---------- */
.sheet { place-items: start center; overflow-y: auto; padding: 40px 16px; }
.sheetInner {
  width: 100%; max-width: 760px; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow); overflow: hidden;
}
.sheetHead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(124, 92, 255, .12), rgba(255, 92, 138, .12));
}
.sheetHead h2 { margin: 0; font-size: 19px; }
.modalClose.inline { position: static; width: 34px; height: 34px; font-size: 14px; }

/* ---------- studio ---------- */
.studioBody { display: grid; grid-template-columns: 300px 1fr; gap: 0; }
.previewWrap { padding: 22px; background: radial-gradient(120% 120% at 50% 0%, #15151f, #07070d); border-right: 1px solid var(--line); }
.preview { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; background: #0e0e16; box-shadow: var(--shadow); }
.preview img { width: 100%; height: 100%; display: block; }
.preview .visual { width: 100%; height: 100%; aspect-ratio: auto; }
.previewEmpty { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--mut); font-size: 13px; }

/* ---------- studio: mode tabs + upload zone ---------- */
.modeTabs { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; align-self: flex-start; }
.modeTab { border: 0; background: transparent; color: var(--mut); cursor: pointer; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 999px; }
.modeTab.active { color: #fff; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.designOnly[hidden], .uploadOnly[hidden] { display: none; }
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 26px 16px; cursor: pointer; color: var(--mut);
  border: 2px dashed var(--line); border-radius: 14px; background: var(--bg2); transition: .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); color: #fff; background: rgba(124, 92, 255, .1); }
.dzIcon { font-size: 30px; line-height: 1; }
.dzText { font-size: 13px; font-weight: 700; line-height: 1.5; word-break: break-word; }
.dzText small { display: inline-block; margin-top: 4px; font-weight: 600; color: var(--mut); font-size: 11px; }
.dzClear { align-self: flex-start; margin-top: 8px; }
.hint { color: var(--mut); font-size: 12px; margin: 12px 2px 0; line-height: 1.4; }

.studioForm { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.studioForm label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--mut); }
.fieldLabel { font-size: 12px; font-weight: 700; color: var(--mut); margin-top: 2px; }
.studioForm input[type=text], .studioForm select {
  background: var(--bg2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 10px; padding: 9px 11px; font-size: 14px; font-family: inherit;
}
.studioForm input[type=text]:focus, .studioForm select:focus { outline: none; border-color: var(--accent); }
.emojiInput { width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.emojiRow, .swatchRow, .animRow { display: flex; flex-wrap: wrap; gap: 7px; }
.emojiChip {
  width: 38px; height: 38px; font-size: 20px; cursor: pointer; line-height: 1;
  border: 1px solid var(--line); background: var(--bg2); border-radius: 10px; transition: .12s;
}
.emojiChip:hover { border-color: var(--accent); }
.emojiChip.active { border-color: var(--accent); background: rgba(124, 92, 255, .22); }
.swatch { width: 40px; height: 32px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; transition: .12s; }
.swatch:hover { transform: scale(1.06); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.animChip {
  border: 1px solid var(--line); background: var(--bg2); color: var(--mut);
  border-radius: 999px; padding: 7px 13px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .12s;
}
.animChip:hover { color: #fff; border-color: var(--accent); }
.animChip.active { color: #fff; background: linear-gradient(90deg, rgba(124, 92, 255, .35), rgba(255, 92, 138, .35)); border-color: var(--accent); }

.studioActions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.formMsg { font-size: 12px; color: var(--mut); }

/* ---------- profile / cabinet ---------- */
.profileBody { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.identity { display: flex; align-items: flex-end; gap: 14px; }
.identity .grow { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; color: var(--mut); }
.identity input {
  background: var(--bg2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 10px; padding: 9px 11px; font-size: 14px; font-family: inherit;
}
.identity input:focus { outline: none; border-color: var(--accent); }

.statCards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.statCard { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; text-align: center; }
.statCard b { display: block; font-size: 24px; font-weight: 900; background: linear-gradient(90deg, #fff, #b7a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.statCard span { font-size: 11px; color: var(--mut); }

.profileH3 { margin: 0; font-size: 14px; color: var(--mut); }
.miniGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.miniCard { position: relative; border: 1px solid var(--line); background: var(--card); border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0; transition: .12s; }
.miniCard:hover { border-color: var(--accent); transform: translateY(-2px); }
.miniCard img, .miniCard video { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.miniCard span { position: absolute; bottom: 6px; right: 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(10, 10, 18, .6); padding: 2px 7px; border-radius: 999px; }
.empty { color: var(--mut); font-size: 13px; text-align: center; padding: 10px; }

@media (max-width: 760px) {
  .modalInner { grid-template-columns: 1fr; max-height: 92vh; overflow: auto; }
  .modalFig { aspect-ratio: 16 / 11; }
  .grid { columns: 2 160px; }
  .stat { display: none; }
  .modalNav { width: 40px; height: 40px; font-size: 17px; }
  .modalNav.prev { left: 8px; }
  .modalNav.next { right: 8px; }
  .btn.create { padding: 7px 11px; }
  .studioBody { grid-template-columns: 1fr; }
  .previewWrap { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview { max-width: 280px; margin: 0 auto; }
  .statCards { grid-template-columns: repeat(2, 1fr); }
}