/* ================================================================
 * grinded — social felület
 * Sötét (alap) és világos téma a <html data-theme> alapján.
 * ================================================================ */
@font-face {
  font-family: "Jakarta";
  src: url("/fonts/jakarta-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jakarta";
  src: url("/fonts/jakarta-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0b0b10;
  --surface: #14141b;
  --surface-2: #1c1c25;
  --surface-3: #262631;
  --line: #24242e;
  --line-2: #34343f;
  --text: #f5f5f8;
  --muted: #a1a1b3;
  --faint: #6e6e80;
  --accent: #8b5cf6;
  --accent-2: #ec4899;
  --accent-3: #f97316;
  --grad: linear-gradient(135deg, #8b5cf6 0%, #ec4899 55%, #f97316 100%);
  --grad-soft: linear-gradient(135deg, rgba(139, 92, 246, .22), rgba(236, 72, 153, .16) 55%, rgba(249, 115, 22, .14));
  --online: #22c55e;
  --danger: #f43f5e;
  --bubble-in: #1f1f29;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --shadow-sm: 0 6px 20px rgba(0, 0, 0, .28);
  --header-h: 56px;
  --bottomnav-h: 64px;
  --sidebar-w: 250px;
  --font: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f5f5f9;
  --surface: #ffffff;
  --surface-2: #f0f0f5;
  --surface-3: #e6e6ee;
  --line: #e7e7ef;
  --line-2: #d8d8e2;
  --text: #15151d;
  --muted: #5f5f75;
  --faint: #9696a8;
  --bubble-in: #eeeef4;
  --shadow: 0 24px 60px rgba(25, 25, 50, .14);
  --shadow-sm: 0 6px 20px rgba(25, 25, 50, .08);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 15px;
  line-height: 1.45;
}
button { font-family: inherit; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 16px; color: var(--text); }
a { color: inherit; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
::selection { background: rgba(236, 72, 153, .35); }

/* ---------------- Ikonok ---------------- */
.ic { width: 22px; height: 22px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.sm { width: 16px; height: 16px; }
.ic.xs { width: 14px; height: 14px; }
.ic.lg { width: 26px; height: 26px; }
.ic.fill { fill: currentColor; stroke: none; }

/* ---------------- Márka ---------------- */
.brand-mark { font-weight: 800; font-size: 30px; letter-spacing: -1px; line-height: 1; }
.brand-mark span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-mark.small { font-size: 24px; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------- Gombok ---------------- */
.btn-primary, .btn-ghost, .btn-soft, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 15px;
  text-decoration: none; transition: transform .12s, filter .15s, background .15s; white-space: nowrap;
}
.btn-primary { background: var(--grad); color: #fff; box-shadow: 0 8px 24px rgba(236, 72, 153, .28); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active, .btn-soft:active, .btn-ghost:active { transform: scale(.97); }
.btn-primary:disabled, .btn-soft:disabled { opacity: .55; cursor: default; filter: none; }
.btn-soft { background: var(--surface-3); color: var(--text); }
.btn-soft:hover { background: var(--line-2); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: rgba(244, 63, 94, .14); color: var(--danger); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 14px; padding: 4px 2px; }
.link-btn:hover { color: var(--text); }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 0; color: var(--text); transition: background .15s; flex: none; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.soft { background: var(--surface-2); }

.badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent-2); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }

/* ---------------- Avatar + story gyűrű ---------------- */
.avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: none; background-size: cover; background-position: center; }
.avatar.sm { width: 32px; height: 32px; font-size: 13px; }
.avatar.md { width: 48px; height: 48px; font-size: 18px; }
.avatar.lg { width: 60px; height: 60px; font-size: 22px; }
.avatar.xl { width: 96px; height: 96px; font-size: 36px; }
.avatar .status { position: absolute; bottom: 0; right: 0; width: 28%; height: 28%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 2.5px var(--surface); }
.ring { display: inline-grid; place-items: center; padding: 2.5px; border-radius: 50%; background: var(--line-2); flex: none; }
.ring.live { background: var(--grad); }
/* A rés a gyűrű és a kép között: szegély a háttér színében (az árnyék eltakarná a gyűrűt). */
.ring > .avatar { border: 3px solid var(--bg); }
.ptile .ring > .avatar { border-color: var(--surface); }

/* ================================================================
 * APP ELRENDEZÉS
 * mobil: fejléc + tartalom + alsó fülsáv
 * ≥900px: bal oldalsáv + tartalom; ≥1240px: + jobb sáv
 * ================================================================ */
/* A magasság a látható területhez igazodik (JS: --app-h / --app-top), így a mobil billentyűzet nem takarja el a beviteli mezőt. */
.app { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; height: 100vh; height: var(--app-h, 100dvh); overflow: hidden; }
.sidebar, .rail { display: none; }

.mheader { grid-row: 1; display: flex; align-items: center; gap: 4px; height: var(--header-h); padding: 0 8px 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 30; }
.mheader .brand-mark { margin-right: auto; }

.views { grid-row: 2; position: relative; min-height: 0; overflow: hidden; }
.view { display: none; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.view.active { display: block; }
.view-chat.active { display: flex; }

.bottomnav { grid-row: 3; display: flex; align-items: stretch; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); z-index: 30; }
.bn-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--faint); font-size: 10.5px; font-weight: 700; }
.bn-item.active { color: var(--text); }
.bn-item.active .ic { stroke-width: 2.5; }
.bn-item .badge { top: 6px; right: calc(50% - 22px); }
.bn-item .avatar { width: 26px; height: 26px; font-size: 11px; }
.bn-item.active .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.bn-ai { flex: 1; display: grid; place-items: center; background: none; border: 0; }
.bn-ai span { width: 52px; height: 40px; border-radius: 15px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(236, 72, 153, .35); transition: transform .15s; }
.bn-ai.active span { transform: scale(1.07); }

@media (min-width: 900px) {
  .app { grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 1fr; }
  .mheader, .bottomnav { display: none; }
  .views { grid-row: 1; grid-column: 2; }
  .sidebar { grid-row: 1; grid-column: 1; display: flex; flex-direction: column; gap: 4px; padding: 22px 14px 16px; border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
  .sidebar .brand-mark { padding: 4px 12px 22px; }
  .side-item { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; background: none; border: 0; font-size: 15.5px; font-weight: 600; color: var(--text); text-align: left; }
  .side-item:hover { background: var(--surface-2); }
  .side-item.active { font-weight: 800; background: var(--surface-2); }
  .side-item.active .ic { stroke-width: 2.5; }
  .side-item .badge { position: static; margin-left: auto; box-shadow: none; }
  .side-item .avatar { width: 24px; height: 24px; font-size: 10px; }
  .side-new { margin: 14px 4px 0; }
  .side-spacer { flex: 1; }
  .side-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: none; border: 0; text-align: left; }
  .side-me:hover { background: var(--surface-2); }
  .side-me .me-text { flex: 1; min-width: 0; }
  .side-me b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me small { color: var(--muted); font-size: 12.5px; }
}
@media (min-width: 1240px) {
  .app { grid-template-columns: var(--sidebar-w) 1fr 330px; }
  .rail { grid-row: 1; grid-column: 3; display: flex; flex-direction: column; gap: 16px; padding: 22px 20px; border-left: 1px solid var(--line); overflow-y: auto; }
}

/* ---------------- Tartalom oszlop ---------------- */
.feed { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; display: flex; flex-direction: column; gap: 22px; }
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 0; }
.block { display: flex; flex-direction: column; gap: 12px; }
.block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.block-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin: 0; display: flex; align-items: center; gap: 8px; }
.count-pill { background: var(--surface-3); color: var(--muted); font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.empty { color: var(--muted); font-size: 14px; margin: 0; padding: 6px 2px; }
.empty-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 20px; border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--line-2); }
.empty-card .big-emoji { font-size: 40px; line-height: 1; }
.empty-card b { font-size: 16px; }
.empty-card p { margin: 0; color: var(--muted); font-size: 14px; max-width: 360px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------------- Főoldal ---------------- */
.hello h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.6px; }
.hello p { margin: 4px 0 0; color: var(--muted); }

.stories { display: flex; gap: 14px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 6px; scrollbar-width: none; }
.stories::-webkit-scrollbar { display: none; }
.story { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; flex: none; background: none; border: 0; padding: 0; }
.story .avatar { width: 62px; height: 62px; font-size: 22px; }
.story-name { font-size: 12px; font-weight: 700; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-topic { font-size: 10.5px; color: var(--muted); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -5px; }
.story-add { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px dashed var(--line-2); color: var(--muted); }
.story .plus { position: absolute; right: 2px; top: 48px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-2); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--bg); }
.story .plus .ic { width: 13px; height: 13px; stroke-width: 3; }

.hero-daily { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 20px 20px; background: var(--grad); color: #fff; box-shadow: 0 18px 40px rgba(236, 72, 153, .22); }
.hero-daily::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hero-daily .hd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; position: relative; z-index: 1; }
.hero-daily .hd-label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .2); padding: 5px 10px; border-radius: 999px; }
.hero-daily .hd-count { font-size: 13px; font-weight: 700; opacity: .95; display: flex; align-items: center; gap: 7px; }
.hero-daily .hd-count::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.hero-daily .hd-q { position: relative; z-index: 1; font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.4px; margin: 16px 0 18px; }
.btn-white { position: relative; z-index: 1; background: #fff; color: #15151d; border: 0; border-radius: 999px; padding: 11px 18px; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.btn-white:active { transform: scale(.97); }

.vibe-teaser { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line); cursor: pointer; width: 100%; text-align: left; }
.vibe-teaser .vt-emoji { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--surface); flex: none; }
.vibe-teaser .vt-text { flex: 1; min-width: 0; }
.vibe-teaser b { display: block; font-size: 16px; }
.vibe-teaser small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.vibe-teaser > .ic { color: var(--muted); }

.hscroll { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scroll-padding: 0 16px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll .ptile { width: 158px; flex: none; scroll-snap-align: start; }

.topic-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 5px 11px; border-radius: 999px; max-width: 55%; border: 0; }
.topic-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
button.chip:hover { border-color: var(--line-2); background: var(--surface-2); }
.chip .n { font-size: 11.5px; color: var(--muted); font-weight: 800; }

/* ---------------- Ember csempe (rács) + sor (lista) ---------------- */
.grid-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .grid-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ptile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 12px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.ptile .ring { margin-bottom: 6px; cursor: pointer; }
.ptile .avatar { width: 66px; height: 66px; font-size: 25px; }
.ptile .pt-name { font-weight: 800; font-size: 14.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ptile .pt-sub { font-size: 12.5px; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; justify-content: center; }
.ptile .pt-sub span { overflow: hidden; text-overflow: ellipsis; }
.ptile .pt-actions { display: flex; gap: 6px; margin-top: 10px; width: 100%; }
.ptile .pt-actions .btn-primary, .ptile .pt-actions .btn-soft { flex: 1; padding: 8px 6px; font-size: 13px; box-shadow: none; }
.ptile .pt-actions .icon-btn { width: 35px; height: 35px; background: var(--surface-3); }

.people-list { display: flex; flex-direction: column; gap: 2px; }
.person { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; }
.person:hover { background: var(--surface-2); }
.person .avatar { cursor: pointer; }
.person-info { flex: 1; min-width: 0; cursor: pointer; }
.person-name { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-sub { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.person-sub span { overflow: hidden; text-overflow: ellipsis; }
.person .btn-soft, .person .btn-primary { padding: 7px 14px; font-size: 13px; box-shadow: none; }

/* ---------------- Felfedezés ---------------- */
.searchbar { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 48px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid transparent; }
.searchbar:focus-within { border-color: var(--accent); background: var(--surface); }
.searchbar .ic { color: var(--muted); }
.searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; }
.topic-join { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line); }
.topic-join .tj-text { flex: 1; min-width: 0; }
.topic-join b { display: block; font-size: 17px; }
.topic-join small { color: var(--muted); }

/* ---------------- AI chat ---------------- */
.chat-shell { width: 100%; max-width: 780px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 900px) { .chat-shell { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.ai-id { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ai-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.ai-avatar .ic { width: 20px; height: 20px; }
.ai-id b { display: block; font-size: 15.5px; }
.ai-id small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topic-bar { padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; display: flex; flex-direction: column; gap: 8px; }
.topic-row { display: flex; align-items: center; gap: 8px; }
.topic-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid transparent; }
.topic-field:focus-within { border-color: var(--accent); background: var(--surface); }
.topic-field .hash { font-weight: 800; font-size: 17px; }
.topic-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-weight: 600; }
.topic-row .btn-primary { padding: 11px 16px; box-shadow: none; }
.topic-hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin: 0; min-height: 18px; }
.here-now { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); background: none; border: 0; padding: 0; font-size: 12.5px; }
.here-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; align-items: flex-end; gap: 8px; }
.msg.user { justify-content: flex-end; }
.msg .mini-ai { width: 28px; height: 28px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; }
.msg .mini-ai .ic { width: 14px; height: 14px; }
.msg .bubble { max-width: 80%; padding: 10px 15px; border-radius: 22px; line-height: 1.5; font-size: 15px; white-space: pre-wrap; word-wrap: break-word; }
.msg.ai .bubble { background: var(--bubble-in); border-bottom-left-radius: 6px; }
.msg.user .bubble { background: var(--grad); color: #fff; border-bottom-right-radius: 6px; }
.dots { display: inline-flex; gap: 4px; padding: 5px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite both; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; }
.composer input, .msgr-composer input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid transparent; outline: none; }
.composer input:focus, .msgr-composer input:focus { border-color: var(--accent); background: var(--surface); }
.send-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; transition: transform .12s; }
.send-btn:active { transform: scale(.94); }
.send-btn .ic { width: 20px; height: 20px; stroke-width: 2.4; }

/* ---------------- Profil ---------------- */
.profile { gap: 0; padding-top: 0; }
.pv-cover { position: relative; height: 150px; margin: 0 -16px; background: var(--grad); overflow: hidden; }
.pv-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .25), transparent 45%), radial-gradient(circle at 10% 90%, rgba(0, 0, 0, .25), transparent 50%); }
@media (min-width: 680px) { .pv-cover { margin: 16px 0 0; border-radius: var(--radius); } }
.pv-cover .icon-btn { position: absolute; top: 12px; z-index: 1; background: rgba(0, 0, 0, .3); color: #fff; backdrop-filter: blur(6px); }
.pv-cover .icon-btn:hover { background: rgba(0, 0, 0, .45); }
.pv-back { left: 12px; }
.pv-more { right: 12px; }
.pv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -52px; padding: 0 4px; position: relative; z-index: 1; }
.pv-top .ring { padding: 3.5px; }
.pv-top .ring > .avatar { border-width: 4px; }
.pv-stats { display: flex; gap: 4px; padding-bottom: 4px; }
.pv-stat { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 6px 8px; border-radius: 14px; background: none; border: 0; }
.pv-stat:hover { background: var(--surface-2); }
.pv-stat b { font-size: 19px; font-weight: 800; }
.pv-stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pv-id { padding: 12px 4px 0; }
.pv-id h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.pv-username { color: var(--muted); font-size: 14.5px; font-weight: 600; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv-chips .chip { padding: 6px 12px; font-size: 13px; }
.chip.live { color: var(--online); }
.chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--online); }
.pv-bio { margin: 12px 0 0; font-size: 15px; line-height: 1.55; white-space: pre-wrap; }
.pv-bio.muted { color: var(--muted); }
.pv-actions { display: flex; gap: 8px; margin-top: 16px; }
.pv-actions > * { flex: 1; min-width: 0; }
.pv-actions .icon-btn { flex: none; width: 44px; height: 44px; background: var(--surface-3); }
.notice { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(244, 63, 94, .1); font-size: 14px; }
.notice .ic { color: var(--danger); }
.notice span { flex: 1; }
.pv-section { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.pv-section > h2 { font-size: 17px; font-weight: 800; margin: 0; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
.seg button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--muted); }
.seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------------- Vibe card ---------------- */
.vp-sunset { --v1: #ff8a5b; --v2: #ff3d7f; --v3: #7b2ff7; }
.vp-ocean  { --v1: #22d3ee; --v2: #3b82f6; --v3: #312e81; }
.vp-forest { --v1: #4ade80; --v2: #0d9488; --v3: #134e4a; }
.vp-grape  { --v1: #c084fc; --v2: #7c3aed; --v3: #312e81; }
.vp-fire   { --v1: #fbbf24; --v2: #ef4444; --v3: #9d174d; }
.vp-mint   { --v1: #6ee7b7; --v2: #06b6d4; --v3: #1e3a8a; }
.vibe-card { position: relative; overflow: hidden; border-radius: 28px; padding: 22px 22px 24px; color: #fff; background: linear-gradient(160deg, var(--v1, #c084fc) 0%, var(--v2, #7c3aed) 52%, var(--v3, #312e81) 100%); box-shadow: 0 24px 50px rgba(0, 0, 0, .25); text-align: center; }
.vibe-card::before, .vibe-card::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .1); pointer-events: none; }
.vibe-card::before { width: 260px; height: 260px; top: -90px; right: -90px; }
.vibe-card::after { width: 180px; height: 180px; bottom: -70px; left: -60px; background: rgba(0, 0, 0, .12); }
.vibe-card > * { position: relative; z-index: 1; }
.vc-top { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.vc-brand { text-transform: none; letter-spacing: -.3px; font-size: 18px; }
.vc-emoji { font-size: 64px; line-height: 1; margin: 18px 0 8px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25)); }
.vc-name { font-size: 14px; font-weight: 700; opacity: .85; }
.vc-persona { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.8px; margin: 4px 0 10px; }
.vc-tagline { font-size: 15.5px; line-height: 1.45; margin: 0 auto 16px; max-width: 420px; opacity: .95; }
.vc-pills, .vc-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.vc-pills span { background: rgba(255, 255, 255, .2); padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.vc-section { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin: 16px 0 8px; }
.vc-topics span { font-weight: 800; font-size: 14px; }
.vc-match { margin-top: 16px; padding: 12px 14px; border-radius: 18px; background: rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.45; text-align: left; }
.vibe-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vibe-actions > * { flex: 1; }
.vibe-note { font-size: 12.5px; color: var(--muted); margin: 0; text-align: center; }

/* Nyilvános vibe oldal */
body.vibe-public { min-height: 100vh; background: radial-gradient(900px 500px at 10% -10%, rgba(139, 92, 246, .3), transparent), radial-gradient(900px 500px at 110% 110%, rgba(249, 115, 22, .22), transparent), var(--bg); }
.vibe-public-wrap { max-width: 460px; margin: 0 auto; padding: 32px 18px 48px; display: flex; flex-direction: column; gap: 24px; }
.vibe-cta { text-align: center; }
.vibe-cta h2 { font-size: 22px; margin: 0 0 6px; }
.vibe-cta p { color: var(--muted); margin: 0 0 16px; }
.vibe-missing { text-align: center; padding: 40px 0 0; }
.vibe-missing .vc-emoji { font-size: 56px; }
.vibe-missing h1 { font-size: 22px; }
.vibe-missing p { color: var(--muted); }

/* ================================================================
 * Fiókok (drawer): üzenetek, értesítések, AI beszélgetéseim
 * ================================================================ */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 90; }
.scrim.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: var(--app-top, 0px); height: var(--app-h, 100dvh); width: 400px; max-width: 100%; background: var(--surface); box-shadow: var(--shadow); z-index: 100; display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility .28s; visibility: hidden; }
.drawer.right { right: 0; transform: translateX(105%); border-left: 1px solid var(--line); }
.drawer.left { left: 0; transform: translateX(-105%); border-right: 1px solid var(--line); }
.drawer.open { transform: none; visibility: visible; }
@media (max-width: 899px) { .drawer { width: 100%; } }
.dr-screen { display: none; flex-direction: column; height: 100%; min-height: 0; }
.dr-screen.active { display: flex; }
.dr-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 18px; min-height: 60px; border-bottom: 1px solid var(--line); flex: none; }
.dr-head.tight { padding-left: 6px; }
.dr-title { font-weight: 800; font-size: 18px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px calc(12px + env(safe-area-inset-bottom)); }

.convo { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; cursor: pointer; }
.convo:hover { background: var(--surface-2); }
.convo .avatar { width: 54px; height: 54px; font-size: 20px; }
.convo-info { flex: 1; min-width: 0; }
.convo-name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-last { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-last.unread { color: var(--text); font-weight: 800; }
.convo-time { font-size: 12px; color: var(--faint); flex: none; align-self: flex-start; margin-top: 8px; }
.convo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); flex: none; }

.thread-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 4px; border-radius: 12px; }
.thread-who:hover { background: var(--surface-2); }
.thread-who > div { min-width: 0; }
.thread-who b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-who small { display: block; font-size: 12px; color: var(--muted); }
.thread-who small.live { color: var(--online); }
.msgr-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.dm-msg { max-width: 78%; padding: 9px 14px; border-radius: 22px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.dm-msg.in { background: var(--bubble-in); align-self: flex-start; border-bottom-left-radius: 6px; }
.dm-msg.out { background: var(--grad); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.dm-msg.pending { opacity: .55; }
.dm-msg.failed { background: var(--surface-3); color: var(--muted); }
.dm-note { align-self: flex-end; max-width: 80%; font-size: 12px; color: var(--danger); margin: 2px 4px 8px; text-align: right; line-height: 1.35; }
.thread-empty { margin: auto; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; }
.thread-empty .avatar { width: 84px; height: 84px; font-size: 32px; margin-bottom: 6px; }
.thread-empty b { color: var(--text); font-size: 17px; }
.msgr-composer { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); flex: none; }
.thread-blocked { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; color: var(--muted); font-size: 14px; flex: none; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.safety-hint { font-size: 11.5px; color: var(--faint); text-align: center; padding: 0 16px 8px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 5px; }

.notif { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; cursor: pointer; }
.notif:hover { background: var(--surface-2); }
.notif-text { font-size: 14px; line-height: 1.4; }
.notif-time { color: var(--faint); font-size: 12px; margin-top: 2px; }

.sd-new { margin: 12px 12px 4px; }
.sd-item { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; cursor: pointer; }
.sd-item:hover { background: var(--surface-2); }
.sd-item.active { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--accent); }
.sd-item-main { flex: 1; min-width: 0; }
.sd-item-title { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-item-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sd-del { background: transparent; border: 0; color: var(--faint); padding: 6px; border-radius: 10px; }
.sd-del:hover { color: var(--danger); background: var(--surface-3); }

/* ================================================================
 * Modálok, lapok (sheet), toast
 * ================================================================ */
.modal { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); animation: fade .18s ease; }
.modal-card { width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); animation: pop .2s cubic-bezier(.2, .9, .3, 1.2); }
.modal-card.wide { max-width: 480px; }
.modal-card h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.modal-card .sub { margin: -6px 0 0; color: var(--muted); font-size: 14px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
@media (max-width: 560px) {
  .modal { place-items: end center; padding: 0; }
  .modal-card { max-width: none; border-radius: 26px 26px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); animation: up .25s cubic-bezier(.2, .8, .2, 1); }
  .modal-actions > * { flex: 1; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
@keyframes up { from { transform: translateY(40%); opacity: 0; } }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.field input, .field textarea, .auth-form input { background: var(--surface-2); border: 1.5px solid transparent; color: var(--text); padding: 12px 14px; border-radius: 14px; outline: none; font-weight: 500; }
.field input:focus, .field textarea:focus, .auth-form input:focus { border-color: var(--accent); background: var(--surface); }
.field textarea { resize: vertical; min-height: 84px; }
.field-hint { font-size: 12px; color: var(--muted); margin: 0; font-weight: 500; }
.sheet-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.sheet-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 12px; border-radius: 14px; background: none; border: 0; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; }
.sheet-item:hover { background: var(--surface-2); }
.sheet-item .ic { color: var(--muted); }
.sheet-item.danger, .sheet-item.danger .ic { color: var(--danger); }
.sheet-sep { height: 1px; background: var(--line); margin: 6px 12px; }
.reason-list { display: flex; flex-direction: column; gap: 6px; }
.reason { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid transparent; cursor: pointer; font-weight: 600; font-size: 14.5px; }
.reason.sel { border-color: var(--accent-2); background: var(--grad-soft); }
.reason input { accent-color: var(--accent-2); width: 18px; height: 18px; margin: 0; }
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.45; cursor: pointer; font-weight: 500; }
.check-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent-2); flex: none; }
.check-row a { color: var(--accent-2); font-weight: 700; }
.pf-avatar-row { display: flex; align-items: center; gap: 16px; }
.pf-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-avatar-actions .field-hint { width: 100%; }
.file-btn { cursor: pointer; }
.vibe-preview { width: 100%; max-width: 230px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.vibe-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vibe-link { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 13px; color: var(--muted); }
.vibe-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent-2); animation: spin .8s linear infinite; }
.spinner.sm { width: 18px; height: 18px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast-dock { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 130; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); animation: drop .3s cubic-bezier(.2, .9, .3, 1.2); cursor: pointer; transition: opacity .3s; }
.toast .t-ic { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; }
.toast .t-ic .ic { width: 18px; height: 18px; }
.toast .t-title { font-weight: 800; font-size: 14px; }
.toast .t-body { font-size: 13px; color: var(--muted); line-height: 1.4; }
@keyframes drop { from { transform: translateY(-16px); opacity: 0; } }

/* Jobb sáv (széles képernyő) */
.rail h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: var(--muted); }
.rail .card { padding: 12px; }
.rail-foot { font-size: 12px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 4px; }
.rail-foot a { color: var(--faint); text-decoration: none; }
.rail-foot a:hover { color: var(--muted); }
.feed-foot { font-size: 12px; color: var(--faint); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.feed-foot a { color: var(--faint); text-decoration: none; }

/* ================================================================
 * Belépés / onboarding
 * ================================================================ */
.auth-body { min-height: 100vh; min-height: 100dvh; overflow: auto; display: grid; place-items: center; padding: 28px 16px; background: radial-gradient(900px 520px at 0% -10%, rgba(139, 92, 246, .32), transparent 60%), radial-gradient(800px 480px at 110% 20%, rgba(236, 72, 153, .22), transparent 60%), radial-gradient(900px 500px at 50% 120%, rgba(249, 115, 22, .2), transparent 60%), var(--bg); }
.auth-shell { width: 100%; max-width: 980px; display: grid; gap: 28px; align-items: center; }
@media (min-width: 880px) { .auth-shell { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.auth-hero h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.04; letter-spacing: -1.6px; font-weight: 800; margin: 18px 0 14px; }
.auth-hero p { color: var(--muted); font-size: 17px; margin: 0 0 24px; max-width: 460px; }
.auth-feats { display: flex; flex-direction: column; gap: 12px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.auth-feat i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-size: 20px; background: var(--surface); border: 1px solid var(--line); flex: none; }
@media (max-width: 879px) { .auth-feats { display: none; } .auth-hero { text-align: center; } .auth-hero h1 { font-size: 30px; margin: 14px 0 8px; } .auth-hero p { margin: 0 auto; font-size: 15px; } }
.auth-card, .onboard-card { width: 100%; max-width: 420px; justify-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 26px; box-shadow: var(--shadow); }
.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 999px; margin-bottom: 20px; }
.tab { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 10px; border-radius: 999px; font-weight: 700; font-size: 14.5px; transition: .15s; }
.tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
:root[data-theme="light"] .tab.active { background: #fff; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label:not(.check-row) { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.auth-form .btn-primary { margin-top: 4px; padding: 14px; font-size: 16px; }
.auth-error { color: var(--danger); font-size: 13.5px; min-height: 18px; text-align: center; margin: 14px 0 0; font-weight: 600; }
.onboard-card { max-width: 480px; text-align: center; }
.onboard-card .brand-tag { color: var(--muted); margin: 10px 0 0; }
.onboard-q { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 22px 0 16px; }
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.cat-card { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface-2); border: 2px solid transparent; padding: 20px 12px; border-radius: 20px; transition: .15s; }
.cat-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.cat-card.selected { border-color: var(--accent-2); background: var(--grad-soft); }
.cat-emoji { font-size: 32px; line-height: 1; }
.cat-name { font-weight: 800; font-size: 15px; }
.cat-card:last-child { grid-column: 1 / -1; }
.onboard-continue { width: 100%; }

/* ---------------- Jogi oldalak ---------------- */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 32px 20px 80px; line-height: 1.65; }
.legal-wrap h1 { font-size: 30px; font-weight: 800; letter-spacing: -.6px; margin: 0 0 6px; }
.legal-wrap h2 { font-size: 19px; font-weight: 800; margin: 30px 0 8px; }
.legal-wrap .muted { color: var(--muted); font-size: 13px; }
.legal-wrap a { color: var(--accent-2); }
.legal-wrap ul { padding-left: 20px; }
.legal-back { display: inline-block; margin-bottom: 18px; color: var(--muted) !important; text-decoration: none; font-weight: 700; }

/* ---------------- Admin ---------------- */
.admin-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; display: flex; flex-direction: column; gap: 18px; }
.admin-head { display: flex; align-items: center; gap: 12px; }
.admin-head h1 { flex: 1; margin: 0; font-size: 26px; font-weight: 800; }
.admin-wrap h2 { font-size: 18px; margin: 10px 0 0; }
.report { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.report-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); }
.tag.red { background: rgba(244, 63, 94, .16); color: var(--danger); }
.report small, .admin-row small { color: var(--muted); }
.evidence { background: var(--surface-2); border-radius: 14px; padding: 10px 12px; max-height: 260px; overflow-y: auto; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }
.evidence .from-target b { color: var(--danger); }
.admin-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.admin-row:last-child { border-bottom: 0; }
.admin-row .grow { flex: 1; min-width: 0; }

/* ---------------- Meghívók + barátok ---------------- */
.invite-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius); background: var(--grad-soft); border: 1px solid var(--line); }
.invite-card .ic-top { display: flex; align-items: center; gap: 14px; }
.invite-card .big-emoji { font-size: 34px; line-height: 1; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); flex: none; }
.invite-card b { display: block; font-size: 16px; }
.invite-card small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; line-height: 1.4; }
.invite-card .vibe-link { background: var(--surface); }
.invite-card .inv-actions { display: flex; gap: 8px; }
.invite-card .inv-actions > * { flex: 1; }
.invite-card .inv-count { font-size: 12.5px; color: var(--muted); text-align: center; margin: 0; }
.ftile .pt-topic { font-size: 12.5px; font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile .pt-topic.live { color: var(--online); }
.ftile .pt-topic.off { color: var(--muted); font-weight: 600; }
.invite-tile { border-style: dashed; border-color: var(--line-2); background: transparent; justify-content: center; cursor: pointer; }
.invite-tile .story-add { width: 66px; height: 66px; margin-bottom: 6px; }
.invite-tile:hover { background: var(--surface-2); }
.invite-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 18px; background: var(--grad-soft); border: 1px solid var(--line); }
.invite-banner b { display: block; font-size: 14.5px; }
.invite-banner span:not(.avatar) { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.chip.friend { background: var(--grad-soft); }

/* ---------------- Nyelvváltó (belépés) ---------------- */
.lang-switch { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--faint); }
.lang-switch button { background: none; border: 0; color: var(--muted); font-weight: 700; font-size: 13px; padding: 2px 4px; }
.lang-switch button.active { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- Beviteli mezők: a gépelt szöveg mindig látsszon ----------------
 * Egyes böngészők (pl. Samsung Internet / Chrome „sötét mód minden oldalra") átszínezik a mezőket;
 * a szövegszínt és a kurzort ezért kifejezetten megadjuk. */
input, textarea { -webkit-text-fill-color: currentColor; caret-color: var(--accent-2); }
.composer input, .msgr-composer input, .topic-field input, .searchbar input, .field input, .field textarea, .auth-form input {
  color: var(--text); -webkit-text-fill-color: currentColor; -webkit-appearance: none; appearance: none; opacity: 1;
}
/* A betűszín a „color"-t követi (currentColor): ha egy böngésző átszínezi a hátteret, a szöveget is vele együtt színezi át. */
input::placeholder, textarea::placeholder { color: var(--faint); -webkit-text-fill-color: currentColor; opacity: 1; }
/* Jelzés a böngészőknek (pl. Samsung Internet), hogy az oldalnak saját sötét módja van – ne színezzék át erőszakkal. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
@media (prefers-color-scheme: light) { :root[data-theme="light"] { color-scheme: light; } }
/* Beépített böngésző (Instagram, Facebook, TikTok…) figyelmeztetés */
.iab-bar { position: fixed; left: 8px; right: 8px; top: calc(var(--app-top, 0px) + 8px); z-index: 200; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--accent); box-shadow: var(--shadow); font-size: 13.5px; }
.iab-bar p { flex: 1; margin: 0; }
.iab-bar .btn-primary { flex: none; }
input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--surface-2) inset; transition: background-color 9999s; }
/* Gépelés közben (mobil) az alsó fülsáv elrejtve, hogy több hely maradjon */
@media (max-width: 899px) { body.typing .bottomnav { display: none; } }

/* ---------------- Értesítések, telepítés ---------------- */
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: 0; }
.set-row .grow { flex: 1; min-width: 0; }
.set-row b { display: block; font-size: 15px; }
.set-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.switch { position: relative; width: 48px; height: 28px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); transition: background .2s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s; }
.switch input:checked + span { background: var(--grad); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .45; }
.push-status { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--surface-2); }
.push-status .grow { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.push-status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); flex: none; }
.push-status.on .dot { background: var(--online); box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.nudge { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.nudge .n-top { display: flex; align-items: center; gap: 14px; }
.nudge .n-ic { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none; }
.nudge b { display: block; font-size: 16px; }
.nudge small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; margin-top: 2px; }
.nudge .n-actions { display: flex; gap: 8px; }
.nudge .n-actions > * { flex: 1; }
.ios-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.ios-share { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-3); vertical-align: middle; margin: 0 2px; }

/* ---------------- App letöltés (főoldal) ---------------- */
.app-dl { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; text-align: left; }
.app-dl-ic img { width: 44px; height: 44px; border-radius: 12px; display: block; }
.app-dl-text { flex: 1; min-width: 0; }
.app-dl-text b { display: block; font-size: 15px; }
.app-dl-text small { display: block; color: var(--muted); font-size: 12.5px; }
.login-dl { margin: 16px auto 0; display: flex; justify-content: center; }
.dl-help { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---------------- Képek az üzenetekben ---------------- */
.attach-btn { cursor: pointer; color: var(--muted); }
.attach-btn:hover { color: var(--text); }
.msg-img { display: block; max-width: 100%; width: 240px; max-height: 320px; object-fit: cover; border-radius: 16px; cursor: zoom-in; background: var(--surface-3); }
.dm-msg.has-img { padding: 4px; background: transparent !important; border: 0; }
.dm-msg.has-img .cap { padding: 6px 8px 2px; }
.dm-msg.out.has-img .cap { color: var(--text); }
.msg .bubble .msg-img { margin: -4px -8px 6px; width: calc(100% + 16px); max-width: 260px; }
.lightbox { background: rgba(0, 0, 0, .9); place-items: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; animation: pop .2s ease; }
.lightbox .lb-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; color: #fff; background: rgba(255,255,255,.12); }

/* ---------------- Csoportok ---------------- */
.gavatar { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 800; flex: none; }
.convo .gavatar { width: 54px; height: 54px; font-size: 20px; border-radius: 18px; }
.thread-who .gavatar { width: 40px; height: 40px; }
.dm-sender { font-size: 12px; font-weight: 700; color: var(--muted); margin: 8px 0 2px 38px; }
.gm-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; align-self: flex-start; }
.gm-row .avatar { width: 30px; height: 30px; font-size: 12px; }
.gm-row .dm-msg { max-width: 100%; }
.sys-msg { align-self: center; text-align: center; font-size: 12.5px; color: var(--muted); padding: 6px 12px; margin: 6px 0; border-radius: 999px; background: var(--surface-2); max-width: 90%; }
.ginv { align-self: flex-start; width: min(290px, 86%); border-radius: 20px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); margin: 4px 0; }
.ginv.out { align-self: flex-end; }
.ginv .gi-top { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--grad-soft); }
.ginv .gi-top .gavatar { width: 48px; height: 48px; font-size: 20px; }
.ginv b { display: block; font-size: 15px; }
.ginv small { display: block; color: var(--muted); font-size: 12.5px; }
.ginv .gi-text { padding: 12px 14px 4px; font-size: 14px; line-height: 1.4; }
.ginv .gi-act { padding: 10px 14px 14px; }
.ginv .gi-act .btn-primary, .ginv .gi-act .btn-soft { width: 100%; }
.ginv .gi-note { font-size: 13px; color: var(--muted); text-align: center; }
.pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; margin: 0 -8px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 14px; cursor: pointer; }
.pick:hover { background: var(--surface-2); }
.pick .person-info { cursor: pointer; }
.pick input { width: 22px; height: 22px; accent-color: var(--accent-2); flex: none; margin: 0; }
.chip-mini { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--grad-soft); color: var(--text); margin-left: 6px; }
/* Függő csoportmeghívók (Üzenetek lista teteje + főoldal) */
.convo-sec { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px; }
.ginv-row { background: var(--grad-soft); border: 1px solid var(--line); margin-bottom: 6px; }
.ginv-row .btn-primary { flex: none; }
.home-invites { margin-bottom: 14px; }
.home-invites .convo-sec { padding-top: 0; }
/* Reakciók + szerkesztés */
.dm-msg { position: relative; }
.dm-msg.has-rx { margin-bottom: 14px; }
.rx-bar { position: absolute; bottom: -14px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: 13px; line-height: 1.4; white-space: nowrap;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; }
.dm-msg.in .rx-bar { right: auto; left: 8px; }
.rx-bar.mine { border-color: var(--accent); }
.dm-msg .edited { font-size: 11.5px; opacity: .7; }
.dm-msg.heart-pop::after { content: "❤️"; position: absolute; left: 50%; top: 50%; font-size: 34px; transform: translate(-50%, -50%); animation: heartpop .7s ease forwards; pointer-events: none; }
@keyframes heartpop { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 30% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 100% { transform: translate(-50%, -90%) scale(1); opacity: 0; } }
@media (hover: none) { .dm-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
.modal.sheet { place-items: end center; }
.ma-card { gap: 6px; padding: 16px; }
.ma-rx { display: flex; justify-content: space-between; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.ma-emoji { font-size: 30px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; transition: transform .12s; }
.ma-emoji:active { transform: scale(1.25); }
.ma-emoji.on { background: var(--surface-3); }
.ma-item { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 14px; font-weight: 700; font-size: 15px; text-align: left; color: var(--text); }
.ma-item:hover { background: var(--surface-2); }
.edit-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--accent-2); }
.edit-bar span { flex: 1; }
/* Történetek */
.ring.seen { background: var(--line-2); }
.story { cursor: pointer; }
button.plus { border: 0; padding: 0; cursor: pointer; }
.bg-sunset { background: linear-gradient(160deg, #f97316, #ec4899 55%, #8b5cf6); }
.bg-ocean { background: linear-gradient(160deg, #06b6d4, #3b82f6 55%, #6366f1); }
.bg-grape { background: linear-gradient(160deg, #a855f7, #7c3aed 55%, #312e81); }
.bg-fire { background: linear-gradient(160deg, #facc15, #f97316 50%, #dc2626); }
.bg-mint { background: linear-gradient(160deg, #34d399, #10b981 50%, #0d9488); }
.bg-night { background: linear-gradient(160deg, #1e293b, #0f172a 60%, #000); }
.story-viewer { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 115; background: #000; display: grid; place-items: center; }
.sv-frame { position: relative; width: 100%; height: 100%; max-width: 480px; overflow: hidden; background: #000; color: #fff; }
@media (min-width: 600px) { .sv-frame { height: min(100%, 860px); border-radius: 18px; } }
.sv-media { position: absolute; inset: 0; display: grid; place-items: center; }
.sv-media img { width: 100%; height: 100%; object-fit: contain; }
.sv-text { padding: 32px; font-size: 28px; font-weight: 800; line-height: 1.3; text-align: center; white-space: pre-wrap; word-break: break-word; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.sv-cap { position: absolute; left: 16px; right: 16px; bottom: 96px; padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.45); font-size: 15px; text-align: center; white-space: pre-wrap; word-break: break-word; }
.sv-tap { position: absolute; top: 70px; bottom: 80px; z-index: 2; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.sv-prev { left: 0; width: 32%; }
.sv-next { right: 0; width: 68%; }
.sv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: calc(10px + env(safe-area-inset-top)) 10px 18px; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.sv-bars { display: flex; gap: 4px; }
.sv-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-bars i { display: block; height: 100%; background: #fff; }
.sv-head { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sv-head .avatar { width: 36px; height: 36px; font-size: 14px; }
.sv-who { flex: 1; min-width: 0; }
.sv-who b { display: block; font-size: 14.5px; }
.sv-who small { color: rgba(255,255,255,.75); font-size: 12px; }
.sv-head .icon-btn { color: #fff; }
.sv-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.sv-views { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.14); }
.sv-reply { display: flex; align-items: center; gap: 8px; }
.sv-reply input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); outline: none;
  color: #fff; -webkit-text-fill-color: currentColor; font-size: 16px; }
.sv-reply input::placeholder { color: rgba(255,255,255,.75); }
.sv-reply .icon-btn { color: #fff; }
.sv-heart { font-size: 28px; width: 46px; height: 46px; display: grid; place-items: center; transition: transform .12s; }
.sv-heart:active { transform: scale(1.3); }
.sv-media.heart-pop::after { content: "❤️"; position: absolute; left: 50%; top: 50%; font-size: 90px; transform: translate(-50%, -50%); animation: heartpop .8s ease forwards; pointer-events: none; }
.sc-card { max-width: 400px; }
.sc-preview { position: relative; width: 100%; aspect-ratio: 9 / 14; max-height: 52dvh; border-radius: 18px; overflow: hidden; background-color: var(--surface-2); display: grid; place-items: center; }
.sc-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; }
.sc-pick p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.sc-pick .btn-primary, .sc-pick .btn-soft { min-width: 170px; justify-content: center; }
.sc-preview img { width: 100%; height: 100%; object-fit: cover; }
.sc-preview textarea { width: 100%; height: 100%; padding: 28px; border: 0; outline: none; resize: none; background: transparent; text-align: center; display: grid;
  font-size: 24px; font-weight: 800; line-height: 1.3; color: #fff; -webkit-text-fill-color: currentColor; }
.sc-preview textarea::placeholder { color: rgba(255,255,255,.75); }
.sc-caption { height: 46px; padding: 0 16px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid transparent; outline: none; }
.sc-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.sc-actions #sc-share { flex: 1; justify-content: center; }
.st-ref { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.st-thumb { width: 34px; height: 54px; border-radius: 8px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 8px; font-weight: 800; color: #fff; background-color: var(--surface-3); }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-ref small { font-size: 12px; opacity: .8; }
/* Elfelejtett jelszó */
.link-btn { background: none; border: 0; padding: 6px; color: var(--accent-2); font-weight: 700; font-size: 14px; cursor: pointer; align-self: center; }
.forgot-title { margin: 0; font-size: 20px; }
.auth-error.ok { color: var(--accent-2); }
/* Hangüzenet */
.mic-btn { flex: none; }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: recblink 1s infinite; flex: none; }
@keyframes recblink { 50% { opacity: .25; } }
.rec-bar b { font-variant-numeric: tabular-nums; }
.rec-hint { flex: 1; color: var(--muted); font-size: 14px; }
.rec-bar .send-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; flex: none; }
.dm-msg.voice-msg { padding: 6px 12px 6px 6px; }
.voice { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.voice .vp { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.22); color: inherit; }
.dm-msg.in .voice .vp { background: var(--grad); color: #fff; }
.voice .vp .ic { width: 16px; height: 16px; }
.voice .vbar { flex: 1; height: 4px; border-radius: 4px; background: rgba(127,127,127,.35); overflow: hidden; cursor: pointer; }
.voice .vbar i { display: block; height: 100%; width: 0; background: currentColor; }
.voice .vt { font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: .85; min-width: 30px; }
/* Megosztott történet */
.dm-msg.story-card { padding: 6px; }
.st-share { display: flex; flex-direction: column; gap: 6px; width: 150px; }
.st-big { position: relative; display: grid; place-items: center; width: 150px; height: 240px; border-radius: 14px; overflow: hidden; background-color: #000; color: #fff; text-align: center; }
.st-big img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.st-big b { padding: 12px; font-size: 15px; line-height: 1.3; white-space: pre-wrap; word-break: break-word; }
.st-big em { display: none; padding: 12px; font-size: 12px; font-style: normal; opacity: .75; }
.st-big.gone { background: var(--surface-3) !important; color: var(--muted); }
.st-big.gone em { display: block; }
.st-cap { font-size: 13px; }
.st-share small { font-size: 12px; opacity: .85; padding: 0 4px 2px; }
/* Beállítások: e-mail sor */
.si-text { display: flex; flex-direction: column; align-items: flex-start; }
.si-text small { color: var(--muted); font-size: 12px; font-weight: 500; }
/* Visszavonás, válasz, Látta, ír… */
.dm-msg.deleted { background: transparent !important; color: var(--muted) !important; border: 1px solid var(--line-2); font-style: italic; font-size: 13.5px; }
.quote { display: block; width: 100%; text-align: left; margin: -2px 0 6px; padding: 6px 10px; border-radius: 12px; border-left: 3px solid currentColor;
  background: rgba(127,127,127,.18); color: inherit; font: inherit; font-size: 13px; line-height: 1.35; cursor: pointer; }
.quote b { display: block; font-size: 12px; }
.quote span { display: block; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.dm-msg.has-img .quote { color: var(--text); }
.dm-msg.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 4px var(--accent); } }
.seen-mark { align-self: flex-end; font-size: 11.5px; color: var(--faint); margin: -2px 6px 4px; }
.seen-mark.on { color: var(--muted); }
.typing-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.typing-row.g { margin-left: 38px; }
.typing-row small { font-size: 11.5px; color: var(--muted); margin-left: 6px; }
.typing-row .dm-msg { padding: 6px 14px; }
.convo-last.typing { color: var(--accent-2); font-style: italic; }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface-2); }
.reply-bar .rb-text { flex: 1; min-width: 0; border-left: 3px solid var(--accent); padding-left: 10px; }
.reply-bar b { display: block; font-size: 13px; }
.reply-bar span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-item.danger { color: #ef4444; }
.kick-btn { margin-left: auto; flex: none; }
.pa-ic { font-size: 40px; text-align: center; }
#push-ask-modal h3 { margin: 0; text-align: center; }
#push-ask-modal .field-hint { text-align: center; }
.sv-insta { color: #fff; font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 999px; background: linear-gradient(135deg, #f58529, #dd2a7b 50%, #8134af); border: 0; }
/* Admin: visszavont szűrés */
.admin-row.overturned { opacity: .6; }
.admin-row .row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ok-tag { color: #10b981; font-weight: 700; }
/* Névtelen kérdések */
.ask-teaser { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 4px 0 16px; border-radius: 20px; text-align: left;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.ask-teaser.has-new { border-color: var(--accent-2); background: var(--grad-soft); }
.at-ic { font-size: 30px; }
.at-text { flex: 1; min-width: 0; }
.at-text b { display: block; font-size: 15px; }
.at-text small { display: block; color: var(--muted); font-size: 12.5px; }
.at-badge { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--accent-2); color: #fff; font-weight: 800; display: grid; place-items: center; }
.asks-card { max-width: 460px; }
.asks-toggle { font-size: 14px; }
.asks-list { display: flex; flex-direction: column; gap: 10px; max-height: 46dvh; overflow-y: auto; }
.ask-item { padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.ask-item.new { border-color: var(--accent-2); }
.ask-item .ai-q { font-weight: 700; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.ask-item small { color: var(--faint); font-size: 12px; }
.ask-item .ai-a { margin-top: 6px; color: var(--muted); font-size: 14px; white-space: pre-wrap; }
.ask-item .ai-act { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 8px; }
.ask-q-card { border-radius: 20px; overflow: hidden; background: #fff; color: #15151d; text-align: center; }
.ask-q-card small { display: block; padding: 10px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #ec4899, #8b5cf6); }
.ask-q-card b { display: block; padding: 16px; font-size: 17px; white-space: pre-wrap; word-break: break-word; }
.aa-text { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid transparent; background: var(--surface-2); resize: none; outline: none; font-size: 16px; }
.aa-text:focus { border-color: var(--accent); }
/* nyilvános kérdező oldal */
.ask-body { display: block; }
.ask-shell { max-width: 460px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.ask-brand { align-self: center; font-size: 28px; text-decoration: none; }
.ask-card { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.ask-who { display: flex; align-items: center; gap: 12px; }
.ask-who b { display: block; font-size: 17px; }
.ask-who small { color: var(--muted); }
.ask-title { margin: 0; font-size: 24px; line-height: 1.2; }
#ask-form { display: flex; flex-direction: column; gap: 10px; }
#ask-text { width: 100%; padding: 14px 16px; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface-2); resize: none; outline: none; font-size: 17px; }
#ask-text:focus { border-color: var(--accent); }
.ask-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.ask-send, .ask-cta { justify-content: center; text-align: center; text-decoration: none; }
.ask-done { align-items: center; text-align: center; }
.ask-done h2, #ask-missing h2 { margin: 0; }
.ask-fine { color: var(--faint); font-size: 12px; text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Most! */
.moment-block:empty { display: none; }
.moment-block { margin-bottom: 16px; }
.mo-card { padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.mo-card.mo-live { border: 0; background: var(--grad); color: #fff; box-shadow: 0 12px 34px rgba(236, 72, 153, .35); }
.mo-card.mo-live small { color: rgba(255, 255, 255, .9) !important; }
.mo-card.mo-live .mo-go { background: #fff; color: #15151d; }
.mo-wait { opacity: .9; }
.mo-top { display: flex; align-items: center; gap: 12px; }
.mo-top > div { flex: 1; min-width: 0; }
.mo-top b { display: block; font-size: 16px; }
.mo-top small { display: block; color: var(--muted); font-size: 13px; }
.mo-bolt { font-size: 30px; }
.mo-timer { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mo-locked { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.mo-avs { display: flex; }
.mo-avs .avatar { margin-right: -8px; border: 2px solid var(--surface); }
.mo-go { justify-content: center; font-size: 16px; }
.mo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mo-tile { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.mo-tile img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; cursor: zoom-in; }
.mo-info { padding: 8px 10px 10px; }
.mo-info b { display: block; font-size: 13.5px; }
.mo-info small { color: var(--muted); font-size: 12px; }
.mo-info p { margin: 4px 0 0; font-size: 13px; word-break: break-word; }
.mo-rx { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; font-weight: 700; }
.mo-rx.on { background: var(--accent-2); }
.mo-empty { grid-column: 1 / -1; color: var(--muted); font-size: 13.5px; padding: 8px 4px; }
.mc-preview { border-radius: 18px; overflow: hidden; background: #000; max-height: 50dvh; display: grid; place-items: center; }
.mc-preview img { width: 100%; max-height: 50dvh; object-fit: contain; }
/* Barátság-kártya */
.blend-cta { flex-basis: 100%; padding: 11px; border-radius: 16px; border: 0; font-weight: 800; font-size: 15px; color: #fff; background: var(--grad); cursor: pointer; }
.pv-actions { flex-wrap: wrap; }
.blend-card-wrap { max-width: 400px; }
.blend-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 0; color: var(--muted); }
.blend-card { border-radius: 24px; padding: 22px 18px; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bc-avs { display: flex; }
.bc-avs .avatar { width: 64px; height: 64px; font-size: 26px; border: 3px solid #fff; margin: 0 -6px; }
.bc-score { font-size: 64px; font-weight: 800; line-height: 1; margin-top: 4px; }
.bc-title { font-size: 22px; font-weight: 800; }
.bc-tag { margin: 0; font-size: 14.5px; opacity: .95; }
.bc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bc-chips span { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 13px; font-weight: 700; }
.bc-diff { margin: 4px 0 0; font-size: 13px; opacity: .92; }
.blend-mini { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 190px; padding: 14px; border: 0; border-radius: 16px; color: #fff; cursor: pointer; }
.blend-mini b { font-size: 34px; line-height: 1; }
.blend-mini span { font-weight: 800; font-size: 14px; }
.blend-mini small { font-size: 11.5px; opacity: .9; }
/* Szív a történeten: csak az emoji, háttér nélkül */
.sv-heart { background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; cursor: pointer; }
/* Borítókép */
.pv-cover.has-img::after { background: linear-gradient(rgba(0,0,0,.25), transparent 40%, rgba(0,0,0,.2)); }
.pv-cover-btn { right: 60px; cursor: pointer; }
.pv-cover-btn.hidden { display: none; }
.pf-cover-row { display: flex; align-items: center; gap: 14px; }
.pf-cover-prev { width: 110px; height: 56px; border-radius: 12px; flex: none; background: var(--grad); }
.pf-cover-btns { display: flex; gap: 6px; margin-top: 6px; }
/* Szint-gyűrű az avatarokon */
.avatar.lvr { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4.5px var(--lvr, var(--accent)); }
.avatar.lvr[data-ring="sunset"] { --lvr: #f97316; } .avatar.lvr[data-ring="ocean"] { --lvr: #3b82f6; } .avatar.lvr[data-ring="grape"] { --lvr: #8b5cf6; }
.avatar.lvr[data-ring="fire"] { --lvr: #ef4444; } .avatar.lvr[data-ring="mint"] { --lvr: #10b981; } .avatar.lvr[data-ring="gold"] { --lvr: #eab308; }
.ring > .avatar.lvr { box-shadow: none; }
/* Szint kártya */
.lv-card { margin: 14px 0; padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.lv-head { display: flex; align-items: center; gap: 12px; }
.lv-head > div { flex: 1; min-width: 0; }
.lv-head b { display: block; font-size: 16px; }
.lv-head small { color: var(--muted); font-size: 13px; }
.lv-emoji { font-size: 34px; }
.lv-bar { height: 10px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: var(--grad); border-radius: 10px; transition: width .6s ease; }
.lv-next { color: var(--muted); font-weight: 700; }
.lv-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv-perk { position: relative; padding: 10px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); opacity: .65; }
.lv-perk.on { opacity: 1; border-color: var(--accent); }
.lv-perk span { font-size: 20px; }
.lv-perk b { display: block; font-size: 13.5px; }
.lv-perk small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.lv-perk em { position: absolute; top: 8px; right: 10px; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.lv-perk.on em { color: #10b981; }
.lv-rings { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-rings small { color: var(--muted); font-weight: 700; }
.lv-rings > div { display: flex; gap: 8px; }
.lv-swatch { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.lv-swatch.on { border-color: var(--text); }
.lv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-note { margin: 0; color: var(--faint); font-size: 11.5px; }
/* Klubok */
.clubs-list { display: flex; flex-direction: column; gap: 10px; }
.club-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.club-emoji-big { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--grad-soft); flex: none; }
.club-info { flex: 1; min-width: 0; }
.club-info b { display: block; font-size: 15px; }
.club-info p { margin: 2px 0; font-size: 13px; color: var(--muted); }
.club-info small { color: var(--faint); font-size: 12px; }
.club-name-row { display: flex; gap: 10px; align-items: flex-end; }
.club-name-row .field { flex: 1; }
.club-emoji { width: 58px; height: 46px; font-size: 26px; text-align: center; border-radius: 14px; background: var(--surface-2); border: 1.5px solid transparent; outline: none; }
/* Élő */
.live-strip { display: flex; flex-direction: column; gap: 8px; }
.live-strip:not(:empty) { margin-bottom: 12px; }
.live-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 1.5px solid #ef4444; background: rgba(239, 68, 68, .1); color: var(--text); text-align: left; cursor: pointer; }
.li-text { flex: 1; min-width: 0; }
.li-text b { display: block; font-size: 14px; }
.li-text small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.live-view { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 116; background: rgba(0, 0, 0, .92); display: grid; place-items: center; }
.lvw-frame { position: relative; width: 100%; height: 100%; max-width: 520px; display: flex; flex-direction: column; background: linear-gradient(180deg, #1b1027, #0b0b10); color: #fff; }
@media (min-width: 600px) { .lvw-frame { height: min(100%, 860px); border-radius: 18px; overflow: hidden; } }
.lvw-head { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 12px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.lvw-who { flex: 1; min-width: 0; }
.lvw-who b { display: block; font-size: 15px; }
.lvw-who small { color: rgba(255, 255, 255, .7); font-size: 12.5px; }
.lvw-badge { padding: 3px 8px; border-radius: 6px; background: #ef4444; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; }
.lvw-count { font-size: 13px; font-weight: 700; }
.lvw-head .icon-btn { color: #fff; }
.lvw-pinned { margin: 10px 12px 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .12); font-size: 14px; }
.lvw-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.lvw-msg { display: flex; gap: 8px; align-items: flex-start; cursor: default; }
.lvw-msg > div { background: rgba(255, 255, 255, .08); padding: 7px 11px; border-radius: 14px; font-size: 14px; min-width: 0; word-break: break-word; }
.lvw-msg b { display: block; font-size: 12.5px; opacity: .85; }
.lvw-msg.host > div { background: linear-gradient(135deg, rgba(236, 72, 153, .5), rgba(139, 92, 246, .5)); }
.lvw-hosttag { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .2); }
.lvw-empty { color: rgba(255, 255, 255, .6); text-align: center; font-size: 13.5px; margin: 20px; }
.lvw-composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .08); }
.lvw-composer input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #fff; -webkit-text-fill-color: currentColor; outline: none; font-size: 16px; }
.lvw-composer .icon-btn { color: #fff; }
.lvw-hearts { position: absolute; right: 0; bottom: 70px; width: 90px; height: 300px; pointer-events: none; }
.lvw-float { position: absolute; bottom: 0; font-size: 28px; animation: floatup 2.2s ease-out forwards; }
@keyframes floatup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-30px) scale(1.1); } 100% { transform: translateY(-280px) scale(1); opacity: 0; } }
/* Heti toplista */
.rank-card { margin: 0 0 16px; padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.rank-card .block-head { margin-bottom: 6px; }
.rank-sub { color: var(--muted); }
.rank-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.rank-tabs button { flex: 1; padding: 7px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.rank-tabs button.on { background: var(--grad); color: #fff; }
.rank-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.rank-row.me { background: var(--grad-soft); }
.rank-row b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-n { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.rank-v { font-weight: 800; font-size: 13.5px; }
.rank-foot { margin: 8px 0 0; color: var(--faint); font-size: 12px; }
.sheet-toggle { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.sheet-toggle span { flex: 1; }
/* Kezdő lépések */
.onb-card { margin: 0 0 14px; padding: 14px; border-radius: 22px; background: var(--grad-soft); border: 1.5px solid var(--accent); display: flex; flex-direction: column; gap: 10px; }
.onb-head { display: flex; align-items: flex-start; gap: 10px; }
.onb-head > div { flex: 1; }
.onb-head b { display: block; font-size: 16px; }
.onb-head small { color: var(--muted); font-size: 12.5px; }
.onb-steps { display: flex; flex-direction: column; gap: 6px; }
.onb-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.onb-step.done { opacity: .55; cursor: default; }
.onb-step.done b { text-decoration: line-through; }
.onb-ic { font-size: 22px; width: 28px; text-align: center; }
.onb-t { flex: 1; min-width: 0; }
.onb-t b { display: block; font-size: 14px; }
.onb-t small { display: block; color: var(--muted); font-size: 12px; }
.onb-go { color: var(--muted); }
.si-emoji { width: 22px; text-align: center; }
.bug-shot { align-self: flex-start; }
/* Admin statisztika */
:root { --chart-1: #8b5cf6; }
:root[data-theme="light"] { --chart-1: #7c3aed; }
.stats { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.stats h3 { margin: 10px 0 0; font-size: 16px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.kpi b { display: block; font-size: 26px; line-height: 1.1; color: var(--text); }
.kpi span { display: block; font-size: 12.5px; color: var(--muted); }
.kpi small { color: var(--faint); font-size: 11.5px; }
.chart-card { padding: 12px 14px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.chart-head small { color: var(--faint); }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.ch-bar { fill: var(--chart-1); }
.ch-col.dim .ch-bar { opacity: .45; }
.ch-base { stroke: var(--line-2); stroke-width: 1; }
.ch-val { fill: var(--text); font-size: 12px; font-weight: 700; }
.ch-tick { fill: var(--muted); font-size: 11px; }
.ch-tip { position: absolute; top: -6px; width: 140px; padding: 6px 8px; border-radius: 10px; background: var(--surface-3); color: var(--text); font-size: 12.5px; pointer-events: none; box-shadow: var(--shadow-sm); }
.chart-table summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-top: 6px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.stat-table th { text-align: left; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.stat-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--text); }
.fbar { display: inline-block; width: 70px; height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.fbar i { display: block; height: 100%; background: var(--chart-1); border-radius: 6px; }
.bug-text { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.bug-img { display: block; max-width: 160px; max-height: 220px; border-radius: 10px; margin-top: 6px; border: 1px solid var(--line); }
.ua { display: block; color: var(--faint); font-size: 11px; word-break: break-all; }
.err-msg { font-size: 13.5px; word-break: break-word; }
.err-stack { white-space: pre-wrap; font-size: 11px; color: var(--muted); max-height: 180px; overflow: auto; }
/* Letöltő oldal (meghívó / csoport link) */
.get-body { display: block; }
.get-shell { max-width: 440px; margin: 0 auto; padding: 36px 18px 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.get-logo { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 14px 40px rgba(236, 72, 153, .35); }
.get-invite { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.get-invite b { display: block; font-size: 15px; }
.get-invite span:not(.avatar):not(.gavatar) { display: block; color: var(--muted); font-size: 13px; }
.get-title { margin: 4px 0 0; font-size: 28px; line-height: 1.15; }
.get-sub { margin: 0; color: var(--muted); }
.get-btn { width: 100%; justify-content: center; gap: 8px; font-size: 18px; padding: 16px; border-radius: 18px; text-decoration: none; }
.get-steps { width: 100%; padding: 16px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--accent); text-align: left; display: flex; flex-direction: column; gap: 10px; }
.get-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.get-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; }
.get-steps p { margin: 0; color: var(--muted); font-size: 14px; }
.get-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.get-share { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #3b82f6; color: #fff; font-size: 13px; }
.get-done { align-items: center; text-align: center; border-color: #10b981; }
.get-feats { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.get-feats div { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: left; font-size: 14px; }
.get-skip { font-size: 13.5px; color: var(--muted); text-decoration: underline; }
/* Kivágó */
.crop-card { max-width: 420px; }
.crop-wrap { display: grid; place-items: center; }
.crop-vp { position: relative; overflow: hidden; border-radius: 14px; background: #000; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.crop-vp:active { cursor: grabbing; }
.crop-vp img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.crop-vp.round::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .55); pointer-events: none; }
.crop-vp:not(.round)::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .8); border-radius: 14px; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 10px; }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
/* nagyítható profilkép / borítókép */
#pv-avatar { cursor: zoom-in; }
.pv-cover.has-img { cursor: zoom-in; }
.get-note { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.get-note.strong { color: var(--text); font-weight: 700; }
.ia-card { align-items: center; text-align: center; }
.ia-card h3 { margin: 4px 0 0; }
/* Videó üzenet */
.msg-video-wrap { position: relative; }
.msg-video { display: block; width: 240px; max-width: 100%; max-height: 360px; border-radius: 16px; background: #000; }
.msg-video.uploading { height: 150px; display: grid; place-items: center; align-content: center; gap: 8px; color: #fff; }
.msg-video.uploading small { color: rgba(255,255,255,.85); }
.vid-dur { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11.5px; pointer-events: none; }
/* Keresés az üzenetekben */
.msgr-search { margin: 0 12px 6px; }
.convo-last mark { background: rgba(236, 72, 153, .3); color: inherit; border-radius: 3px; padding: 0 1px; }
/* Jelentés: konkrét üzenet */
.report-msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--accent-2); font-size: 14px; }
.rep-msg { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid #ef4444; }
.rep-msg small { color: var(--muted); }
.rep-msg button { align-self: flex-start; }
.group-desc { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
/* AI a csoportban */
.avatar.ai-av { background: var(--grad) !important; color: #fff; display: inline-grid; place-items: center; font-size: 60%; }
.sum-bar { display: flex; align-items: flex-start; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--grad-soft); }
.sum-bar.hidden { display: none; }
.sum-btn { flex: 1; padding: 9px 12px; border-radius: 14px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--text); font-weight: 800; font-size: 14px; cursor: pointer; text-align: left; }
.sum-text { flex: 1; font-size: 14px; line-height: 1.45; }
.sum-text b { display: block; margin-bottom: 4px; }
/* Heti ajánló */
.suggest-card { margin: 0 0 16px; padding: 14px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--accent); display: flex; flex-direction: column; gap: 8px; }
.suggest-card .block-head { margin-bottom: 2px; }
.sug-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; }
.sug-info { flex: 1; min-width: 0; cursor: pointer; }
.sug-info b { display: block; font-size: 14.5px; }
.sug-info small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.sug-act { display: flex; gap: 6px; align-items: center; flex: none; }
/* grinded Radar */
.radar-view { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 114; background: var(--bg); display: grid; place-items: center; }
.rdr-frame { width: 100%; height: 100%; max-width: 520px; display: flex; flex-direction: column; background: radial-gradient(700px 400px at 50% -10%, rgba(139, 92, 246, .28), transparent 60%), var(--bg); }
.rdr-head { display: flex; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; border-bottom: 1px solid var(--line); }
.rdr-logo { width: 38px; height: 38px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; font-size: 20px; }
.rdr-who { flex: 1; min-width: 0; }
.rdr-who b { display: block; font-size: 16px; }
.rdr-who small { color: var(--muted); font-size: 12.5px; }
.rdr-body { flex: 1; overflow-y: auto; padding: 16px 14px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.rdr-hero { text-align: center; }
.rdr-hero h2 { margin: 6px 0 4px; font-size: 24px; }
.rdr-hero p { margin: 0; color: var(--muted); }
.rdr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rdr-chips .chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; }
.rdr-safe { margin: 0; color: var(--faint); font-size: 12px; text-align: center; }
.rdr-radar { position: relative; width: 150px; height: 150px; margin: 10px auto; }
.rdr-radar.small { width: 110px; height: 110px; }
.rdr-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: radarPing 2.4s ease-out infinite; }
.rdr-radar span:nth-child(2) { animation-delay: .8s; } .rdr-radar span:nth-child(3) { animation-delay: 1.6s; }
.rdr-radar i { position: absolute; inset: 32%; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-style: normal; font-size: 26px; box-shadow: 0 0 30px rgba(236, 72, 153, .5); }
@keyframes radarPing { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.rdr-empty { text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0; }
.rdr-empty b { color: var(--text); font-size: 16px; }
.rdr-empty p { margin: 0; font-size: 13.5px; }
.rdr-mine { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.rdr-mine > div { flex: 1; min-width: 0; }
.rdr-mine small { display: block; color: var(--muted); font-size: 12px; }
.rdr-mine b { display: block; font-size: 14.5px; }
.rdr-h { margin: 4px 0 0; font-size: 16px; }
#rdr-list { display: flex; flex-direction: column; gap: 10px; }
.rdr-card { padding: 14px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.rdr-card.met { border-color: #10b981; box-shadow: 0 8px 24px rgba(16, 185, 129, .2); }
.rdr-top { display: flex; align-items: center; gap: 10px; }
.rdr-top b { display: block; font-size: 15.5px; }
.rdr-top small { display: block; color: var(--muted); font-size: 12.5px; }
.rdr-reason { margin: 0; font-weight: 700; font-size: 14.5px; }
.rdr-opener { margin: 0; color: var(--muted); font-size: 13.5px; }
.rdr-met { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(16, 185, 129, .12); text-align: center; }
.rdr-signal { font-size: 46px; line-height: 1.1; }
.rdr-met small { color: var(--muted); font-size: 12.5px; }
.rdr-act { display: flex; gap: 8px; justify-content: flex-end; }
.rdr-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.radar-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 1.5px solid var(--accent); background: var(--grad-soft); color: var(--text); text-align: left; cursor: pointer; }
.rdr-mini { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); display: grid; place-items: center; }
/* szervezői rész */
.radar-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.radar-form input { height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.ra-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ra-times span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.ra-times input { width: 100%; }
.radar-ev { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin-top: 10px; }
.ra-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ra-stats div { padding: 10px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.ra-stats b { display: block; font-size: 22px; }
.ra-stats span { font-size: 12px; color: var(--muted); }
.ra-words { display: flex; flex-wrap: wrap; gap: 4px; }
.ra-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ra-qr img { width: 220px; height: 220px; border-radius: 12px; background: #fff; padding: 8px; }
.tag.live-tag { background: #ef4444; color: #fff; }
.admin-head { flex-wrap: wrap; }
.ra-times input, .radar-form input { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 520px) { .ra-times { grid-template-columns: 1fr; } }

/* ================================================================
 * Grind: cél + napi check-in + törzs + Neked
 * ================================================================ */
:root { --fire: linear-gradient(135deg, #f97316 0%, #ec4899 58%, #8b5cf6 100%); }
.badge.dot { min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; top: 8px; right: calc(50% - 16px); background: #f97316; }
.side-item .badge.dot { margin-left: auto; }
/* főoldali sáv */
#grind-strip:empty { display: none; }
.gs-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px 12px 14px; border-radius: 20px; background: var(--surface); border: 1.5px solid transparent;
  background-image: linear-gradient(var(--surface), var(--surface)), var(--fire); background-origin: border-box; background-clip: padding-box, border-box; color: var(--text); text-align: left; }
.gs-card.done { background-image: linear-gradient(var(--surface), var(--surface)), linear-gradient(135deg, #22c55e, #10b981); }
.gs-new { cursor: pointer; }
.gs-new .ic { color: var(--muted); flex: none; }
.gs-flame { font-size: 30px; line-height: 1; flex: none; animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 50% { transform: scale(1.08) rotate(2deg); } }
.gs-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; text-align: left; }
.gs-streak { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--fire); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.gs-card.done .gs-streak { background: linear-gradient(135deg, #22c55e, #0d9488); }
.gs-streak b { font-size: 19px; font-weight: 800; } .gs-streak small { font-size: 12px; margin-top: 2px; }
.gs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-text b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gs-text small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.gs-check { font-size: 22px; flex: none; padding-right: 4px; }
.gs-ci { flex: none; white-space: nowrap; }
/* nézet */
.gr-titlebar { display: flex; flex-direction: column; gap: 2px; }
.gr-sub { color: var(--muted); font-size: 14px; font-weight: 600; }
.gr-skel { height: 180px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.gr-tabs { position: sticky; top: 0; z-index: 5; }
/* cél beállítása (AI co-creation) */
.gr-setup { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.gr-setup-head { display: flex; align-items: center; gap: 12px; }
.gr-setup-head b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.gr-setup-head small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.gr-big { font-size: 34px; line-height: 1; flex: none; }
.gr-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-cat { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid transparent; font-weight: 700; font-size: 14px; color: var(--text); }
.gr-cat.on { background: var(--grad-soft); border-color: var(--accent-2); }
.gr-ai-btn { width: 100%; padding: 13px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gr-ai-btn .dots i, .modal-actions .dots i { background: #fff; }
.gr-hint { text-align: center; }
.gr-why { margin: -2px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px; color: var(--muted); font-weight: 600; }
.gr-back { align-self: center; }
/* cél kártya */
.gr-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: var(--radius); background: var(--fire); color: #fff; box-shadow: 0 18px 44px rgba(236, 72, 153, .25); }
.gr-hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.gr-hero.done { background: linear-gradient(135deg, #10b981 0%, #0ea5e9 60%, #8b5cf6 100%); box-shadow: 0 18px 44px rgba(14, 165, 233, .22); }
.gr-hero > * { position: relative; z-index: 1; }
.gh-top { display: flex; align-items: center; justify-content: space-between; }
.gh-cat { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .2); padding: 5px 10px; border-radius: 999px; }
.gh-more { color: #fff; margin: -8px -8px -8px 0; }
.gh-more:hover { background: rgba(255, 255, 255, .15); }
.gh-title { font-size: 22px; font-weight: 800; line-height: 1.22; letter-spacing: -.4px; }
.gh-stats { display: flex; align-items: center; gap: 16px; }
.gh-streak { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 86px; height: 86px; border-radius: 26px; background: rgba(0, 0, 0, .18); line-height: 1; }
.gh-streak b { font-size: 36px; font-weight: 800; }
.gh-streak span { font-size: 11px; font-weight: 700; margin-top: 4px; opacity: .95; text-align: center; padding: 0 4px; }
.gh-weekwrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gh-weekwrap > small { font-size: 12.5px; font-weight: 700; opacity: .9; }
.gh-week { display: flex; justify-content: space-between; gap: 4px; }
.gw { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gw i { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; }
.gw.on i { background: #fff; }
.gw.on i::after { content: "🔥"; font-size: 13px; font-style: normal; }
.gw.today i { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.gw small { font-size: 10px; font-weight: 800; opacity: .85; }
.gh-step { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .16); }
.gh-step small, .gh-next small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.gh-step b { font-size: 16px; font-weight: 800; line-height: 1.3; }
.gh-actions, .gh-done-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gh-actions .btn-white { flex: 1; justify-content: center; }
.gh-textonly { background: none; border: 0; color: #fff; font-weight: 800; font-size: 14px; padding: 8px 6px; opacity: .92; text-decoration: underline; text-underline-offset: 3px; }
.gh-done { display: flex; flex-direction: column; gap: 10px; }
.gh-done-row { display: flex; gap: 12px; align-items: flex-start; }
.gh-thumb { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; cursor: zoom-in; box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.gh-done-text b { font-size: 15px; font-weight: 800; }
.gh-done-text p { margin: 3px 0 0; font-size: 14px; opacity: .95; white-space: pre-wrap; word-break: break-word; }
.gh-coach { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .95); color: #15151d; font-size: 14.5px; font-weight: 600; line-height: 1.4; animation: pop .25s ease-out; }
.gh-coach small { display: block; margin-top: 4px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #8b5cf6; }
.gh-coach-ic { flex: none; width: 28px; height: 28px; border-radius: 10px; background: var(--grad); color: #fff; display: grid; place-items: center; }
.gh-coach .dots i { background: #8b5cf6; }
.gh-next { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 16px; background: rgba(0, 0, 0, .16); }
.gh-next b { font-size: 14.5px; font-weight: 800; }
.gh-done-actions .btn-white { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 14px; }
.gr-fx { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.gr-fx span { font-size: 110px; animation: fxBurst 1.5s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.gr-fx b { position: absolute; font-size: 54px; font-weight: 800; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); animation: fxBurst 1.5s .1s cubic-bezier(.2, .9, .3, 1.2) both; margin-top: 60px; }
@keyframes fxBurst { 0% { transform: scale(.2); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3) translateY(-30px); opacity: 0; } }
/* törzs */
.tr-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.tr-head { display: flex; align-items: center; gap: 12px; }
.tr-emoji { width: 46px; height: 46px; flex: none; border-radius: 16px; background: var(--grad-soft); display: grid; place-items: center; font-size: 24px; }
.tr-id { flex: 1; min-width: 0; }
.tr-id b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.tr-id small { color: var(--muted); font-size: 13px; font-weight: 600; }
.tr-head .btn-soft { display: inline-flex; align-items: center; gap: 6px; }
.tr-bar { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.tr-bar span { display: block; height: 100%; border-radius: inherit; background: var(--fire); transition: width .4s; }
.tr-board { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.tr-board::-webkit-scrollbar { display: none; }
.tr-m { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; color: var(--text); }
.tr-av { position: relative; padding: 3px; border-radius: 50%; background: var(--surface-3); }
.tr-m.done .tr-av { background: var(--fire); }
.tr-av .avatar { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--surface); }
.tr-ok { position: absolute; right: -4px; bottom: -2px; min-width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-style: normal; font-weight: 800; background: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.tr-m:not(.done) .avatar { filter: grayscale(.6); opacity: .8; }
.tr-m b { font-size: 12px; font-weight: 700; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-m small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.tr-add .avatar { background: var(--surface-2) !important; color: var(--muted); font-size: 24px; font-weight: 500; filter: none !important; opacity: 1 !important; border: 1.5px dashed var(--line-2); box-shadow: none; }
.tr-add .tr-av { background: transparent; }
.tr-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
/* check-in kártyák */
.ci-list { display: flex; flex-direction: column; gap: 14px; }
.ci-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.ci-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ci-who { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; min-width: 0; }
.ci-who b { display: block; font-size: 14.5px; font-weight: 800; }
.ci-who small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.ci-streak { flex: none; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--grad-soft); }
.ci-goal { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ci-goal > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-mood { flex: none; font-size: 18px; }
.ci-photo { width: 100%; max-height: 520px; object-fit: cover; border-radius: 16px; cursor: zoom-in; background: var(--surface-2); }
.ci-text { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ci-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-reasons span { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ci-card footer { display: flex; align-items: center; gap: 8px; }
.ci-fire { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: none; font-weight: 800; font-size: 14px; color: var(--text); transition: transform .15s; }
.ci-fire.on { border-color: transparent; background: var(--fire); color: #fff; }
.ci-fire.pop { transform: scale(1.12); }
.ci-fire:disabled { opacity: .6; cursor: default; }
.ci-dm { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-2); background: none; display: grid; place-items: center; color: var(--text); }
/* Neked */
.fy-hint { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.fy-people .fy-p { flex: none; width: 168px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 14px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.fy-p-who { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; }
.fy-p-who b { font-size: 14px; font-weight: 800; max-width: 144px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-p-goal { font-size: 13px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.fy-p small { font-size: 12px; color: var(--muted); font-weight: 700; }
.fy-follow { width: 100%; margin-top: 2px; }
/* check-in ablak */
.ci-modal { gap: 12px; }
.ci-step { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--grad-soft); }
.ci-step small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ci-step b { font-size: 15px; font-weight: 800; }
.ci-cam { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 14px; border-radius: 18px; border: 2px dashed var(--line-2); background: var(--surface-2); color: var(--text); }
.ci-cam span { font-size: 36px; line-height: 1; }
.ci-cam b { font-size: 15px; font-weight: 800; }
.ci-cam small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.ci-prev { position: relative; }
.ci-prev img { width: 100%; max-height: 30vh; object-fit: cover; border-radius: 18px; display: block; cursor: pointer; }
.ci-raw { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; }
.ci-x { position: absolute; right: 8px; top: 8px; background: rgba(0, 0, 0, .55); color: #fff; }
.ci-moods { display: flex; flex-direction: column; gap: 6px; }
.ci-moods > small { font-size: 13px; font-weight: 700; color: var(--muted); }
.ci-moods > div { display: flex; gap: 6px; }
.ci-mood-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); }
.ci-mood-btn span { font-size: 22px; line-height: 1.1; }
.ci-mood-btn small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.ci-mood-btn.on { border-color: var(--accent-2); background: var(--grad-soft); }
.chip.grind-chip { background: var(--grad-soft); max-width: 100%; }
.ci-modal .modal-actions { position: sticky; bottom: -22px; margin: 0 -22px -22px; padding: 12px 22px 18px; background: var(--surface); border-top: 1px solid var(--line); z-index: 2; }
.ci-cam { padding: 16px 14px; }
.field textarea.gp-step { min-height: 0; resize: none; }

/* ================================================================
 * Mozgó hátterek (csak CSS, %-os méretek: a 1080×1920-as történetben és a borítón is jók)
 * ================================================================ */
.abg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.abg i { position: absolute; display: block; }
@keyframes abgD1 { to { transform: translate(35%, 25%) scale(1.25); } }
@keyframes abgD2 { to { transform: translate(-30%, -20%) scale(.85); } }
@keyframes abgD3 { to { transform: translate(20%, -35%) scale(1.2); } }
@keyframes abgRise { to { transform: translate(10%, -60%) scale(1.3); } }
@keyframes abgPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes abgFall { to { transform: translateY(50%); } }
@keyframes abgTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes abgUp { from { top: 105%; } to { top: -35%; } }
@keyframes abgWave { to { transform: translateX(-50%); } }
@keyframes abgGrid { to { background-position: 0 100%, 0 0; } }
@keyframes abgPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* aurora */
.abg-aurora { background: radial-gradient(120% 80% at 50% 110%, #1e1b4b, #0b1026 60%); }
.abg-aurora i:nth-child(-n+3) { width: 95%; height: 60%; border-radius: 50%; mix-blend-mode: screen; }
.abg-aurora i:nth-child(1) { left: -25%; top: 0; background: radial-gradient(closest-side, rgba(34, 211, 238, .85), transparent); animation: abgD1 13s ease-in-out infinite alternate; }
.abg-aurora i:nth-child(2) { right: -30%; top: 22%; background: radial-gradient(closest-side, rgba(168, 85, 247, .9), transparent); animation: abgD2 16s ease-in-out infinite alternate; }
.abg-aurora i:nth-child(3) { left: 0; bottom: -12%; background: radial-gradient(closest-side, rgba(52, 211, 153, .75), transparent); animation: abgD3 19s ease-in-out infinite alternate; }
/* lávalámpa */
.abg-lava { background: linear-gradient(180deg, #3b0a2a, #120312); }
.abg-lava i:nth-child(-n+4) { width: 75%; height: 45%; border-radius: 50%; mix-blend-mode: screen; }
.abg-lava i:nth-child(1) { left: -10%; top: 55%; background: radial-gradient(closest-side, rgba(249, 115, 22, .95), transparent); animation: abgRise 9s ease-in-out infinite alternate; }
.abg-lava i:nth-child(2) { right: -20%; top: 5%; background: radial-gradient(closest-side, rgba(236, 72, 153, .95), transparent); animation: abgD2 8s ease-in-out infinite alternate; }
.abg-lava i:nth-child(3) { left: 15%; top: 25%; background: radial-gradient(closest-side, rgba(250, 204, 21, .7), transparent); animation: abgD1 11s ease-in-out infinite alternate; }
.abg-lava i:nth-child(4) { right: 0; bottom: -15%; background: radial-gradient(closest-side, rgba(251, 113, 133, .85), transparent); animation: abgD3 10s ease-in-out infinite alternate; }
/* színátmenet */
.abg-flow { background: linear-gradient(125deg, #8b5cf6, #ec4899, #f97316, #06b6d4, #8b5cf6); background-size: 400% 400%; animation: abgPan 14s ease infinite; }
.abg-flow i:nth-child(1) { width: 90%; height: 55%; left: 40%; top: -10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .35), transparent); animation: abgD2 12s ease-in-out infinite alternate; }
/* csillagos ég */
.abg-stars { background: radial-gradient(140% 90% at 50% 105%, #4338ca 0%, #1e1b4b 35%, #020617 75%); }
.abg-stars i:nth-child(-n+3) { left: 0; right: 0; top: -100%; height: 200%; animation: abgFall 90s linear infinite, abgTwinkle 3s ease-in-out infinite; }
.abg-stars i:nth-child(1) { background-image: radial-gradient(circle at 15% 20%, #fff 0 .8%, transparent 1.2%), radial-gradient(circle at 70% 60%, #fff 0 .6%, transparent 1%), radial-gradient(circle at 40% 85%, #fde68a 0 .7%, transparent 1.1%); background-size: 30% 12%; }
.abg-stars i:nth-child(2) { background-image: radial-gradient(circle at 55% 35%, #fff 0 .5%, transparent .9%), radial-gradient(circle at 85% 10%, #93c5fd 0 .6%, transparent 1%), radial-gradient(circle at 25% 70%, #fff 0 .4%, transparent .8%); background-size: 22% 9%; animation-duration: 120s, 4.5s; animation-delay: 0s, 1s; }
.abg-stars i:nth-child(3) { background-image: radial-gradient(circle at 35% 50%, #fff 0 .9%, transparent 1.4%); background-size: 45% 17%; animation-duration: 70s, 2.4s; animation-delay: 0s, .6s; }
/* neon (synthwave) */
.abg-neon { background: linear-gradient(180deg, #1a0536 0%, #3b0764 50%, #0f0524 50.5%, #0f0524 100%); }
.abg-neon i:nth-child(1) { left: 22%; width: 56%; top: 20%; height: 31.5%; border-radius: 50%; background: linear-gradient(180deg, #fde047, #f97316 55%, #db2777);
  -webkit-mask: linear-gradient(#000 0 55%, transparent 55% 60%, #000 60% 68%, transparent 68% 72%, #000 72% 80%, transparent 80% 83%, #000 83% 90%, transparent 90%);
  mask: linear-gradient(#000 0 55%, transparent 55% 60%, #000 60% 68%, transparent 68% 72%, #000 72% 80%, transparent 80% 83%, #000 83% 90%, transparent 90%); animation: abgPulse 4s ease-in-out infinite; }
.abg-neon i:nth-child(1) { clip-path: inset(0 0 50% 0); }
.abg-neon i:nth-child(2) { left: -50%; width: 200%; top: 50%; height: 60%; transform-origin: 50% 0; transform: perspective(300px) rotateX(62deg);
  background-image: linear-gradient(rgba(240, 171, 252, .9) 3px, transparent 3px), linear-gradient(90deg, rgba(34, 211, 238, .85) 3px, transparent 3px);
  background-size: 10% 10%, 5% 100%; animation: abgGrid 2.2s linear infinite; }
.abg-neon i:nth-child(3) { left: 0; right: 0; top: 44%; height: 12%; background: linear-gradient(transparent, rgba(240, 171, 252, .35), transparent); }
/* bokeh */
.abg-bokeh { background: linear-gradient(160deg, #1e1b4b, #4c1d95 60%, #831843); }
.abg-bokeh i { border-radius: 50%; aspect-ratio: 1; animation: abgUp linear infinite; }
.abg-bokeh i:nth-child(1) { left: 8%; width: 22%; background: radial-gradient(circle, rgba(244, 114, 182, .6), transparent 70%); animation-duration: 16s; }
.abg-bokeh i:nth-child(2) { left: 55%; width: 34%; background: radial-gradient(circle, rgba(251, 191, 36, .45), transparent 70%); animation-duration: 22s; animation-delay: -8s; }
.abg-bokeh i:nth-child(3) { left: 30%; width: 14%; background: radial-gradient(circle, rgba(96, 165, 250, .6), transparent 70%); animation-duration: 12s; animation-delay: -4s; }
.abg-bokeh i:nth-child(4) { left: 75%; width: 18%; background: radial-gradient(circle, rgba(244, 114, 182, .5), transparent 70%); animation-duration: 18s; animation-delay: -12s; }
.abg-bokeh i:nth-child(5) { left: -5%; width: 40%; background: radial-gradient(circle, rgba(168, 85, 247, .45), transparent 70%); animation-duration: 26s; animation-delay: -15s; }
/* konfetti */
.abg-confetti { background: linear-gradient(180deg, #fff1f7, #fdf4ff); }
.abg-confetti i:nth-child(-n+3) { left: 0; right: 0; top: -100%; height: 200%; animation: abgFall linear infinite; }
.abg-confetti i:nth-child(1) { background-image: radial-gradient(circle at 10% 15%, #f43f5e 0 3%, transparent 3.5%), radial-gradient(circle at 60% 40%, #22c55e 0 2.5%, transparent 3%), radial-gradient(circle at 85% 75%, #3b82f6 0 3%, transparent 3.5%); background-size: 40% 12.5%; animation-duration: 7s; }
.abg-confetti i:nth-child(2) { background-image: radial-gradient(circle at 30% 60%, #facc15 0 3%, transparent 3.5%), radial-gradient(circle at 75% 20%, #a855f7 0 2.5%, transparent 3%); background-size: 30% 10%; animation-duration: 10s; }
.abg-confetti i:nth-child(3) { background-image: radial-gradient(circle at 50% 50%, #ec4899 0 2%, transparent 2.5%), radial-gradient(circle at 15% 80%, #06b6d4 0 2%, transparent 2.5%); background-size: 25% 8.333%; animation-duration: 5s; }
/* tenger */
.abg-sea { background: linear-gradient(180deg, #e0f2fe 0%, #38bdf8 35%, #0369a1 70%, #0c4a6e 100%); }
.abg-sea i:nth-child(-n+3) { left: 0; width: 200%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q25 4 50 20 T100 20 T150 20 T200 20 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x; background-size: 50% 100%; animation: abgWave linear infinite; }
.abg-sea i:nth-child(1) { bottom: 18%; height: 14%; opacity: .18; animation-duration: 14s; }
.abg-sea i:nth-child(2) { bottom: 8%; height: 14%; opacity: .25; animation-duration: 10s; animation-direction: reverse; }
.abg-sea i:nth-child(3) { bottom: -2%; height: 14%; opacity: .32; animation-duration: 7s; }
.abg-sea i:nth-child(4) { width: 60%; height: 34%; left: 20%; top: 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent); animation: abgPulse 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .abg, .abg i { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

/* ================================================================
 * Történet-stúdió
 * ================================================================ */
.studio { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 116; background: #000; color: #fff; display: grid; place-items: center; }
.st-frame { position: relative; width: 100%; height: 100%; max-width: 520px; display: flex; flex-direction: column; overflow: hidden; }
.st-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; }
.st-tools { display: flex; gap: 6px; }
.st-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.st-btn.active { background: #fff; color: #111; }
.st-aa { font-size: 16px; }
.st-wrap { position: relative; flex: 1; min-height: 0; margin: 0 10px; }
.st-stage { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; overflow: hidden; border-radius: 48px; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; }
.st-bg { position: absolute; inset: 0; }
.st-photo { position: absolute; max-width: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.st-photo.card { border-radius: 40px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.st-draw { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; pointer-events: none; }
.st-stage.drawing .st-draw { pointer-events: auto; cursor: crosshair; }
.st-stage.drawing .st-items { pointer-events: none !important; }
.st-stage.drawing .st-item { pointer-events: none; }
.st-items { position: absolute; inset: 0; pointer-events: none; }
.st-item { position: absolute; pointer-events: auto; cursor: grab; white-space: pre; }
.st-txt { display: flex; flex-direction: column; align-items: center; text-align: center; font: 800 72px/88px var(--font); }
.st-txt span { display: block; }
.st-txt.st-plain { text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.st-txt.st-box span { width: fit-content; background: var(--bgc); padding: 0 22px; border-radius: 22px; }
.st-txt.st-neon { color: #fff; text-shadow: 0 0 12px var(--glow), 0 0 30px var(--glow); }
.st-emoji { font-size: 170px; line-height: 1; }
.st-pill { display: inline-flex; align-items: center; gap: 16px; font: 800 46px/46px var(--font); padding: 20px 32px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #15151d; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); white-space: nowrap; }
.st-pill.st-streak { background: linear-gradient(90deg, #f97316, #ec4899 60%, #8b5cf6); color: #fff; }
.st-eq { display: inline-flex; align-items: flex-end; gap: 5px; height: 40px; }
.st-eq i { width: 8px; border-radius: 4px; background: linear-gradient(#ec4899, #8b5cf6); animation: eqBar .9s ease-in-out infinite alternate; }
.st-eq i:nth-child(1) { height: 40%; } .st-eq i:nth-child(2) { height: 100%; animation-delay: .3s; } .st-eq i:nth-child(3) { height: 65%; animation-delay: .6s; }
@keyframes eqBar { to { transform: scaleY(.35); } }
.st-eq i { transform-origin: bottom; }
.st-hint { position: absolute; left: 0; right: 0; top: 40%; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; pointer-events: none; padding: 0 90px; }
.st-hint b { font: 800 84px/1.1 var(--font); text-shadow: 0 4px 24px rgba(0, 0, 0, .3); }
.st-hint span { font: 600 44px/1.3 var(--font); opacity: .9; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.st-trash { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .6); z-index: 4; transition: transform .15s, background .15s; pointer-events: none; }
.st-trash.hot { background: #ef4444; transform: translateX(-50%) scale(1.2); }
.st-bottom { display: flex; align-items: center; gap: 8px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
.st-photo-btn, .st-card-btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; font-size: 14px; border: 0; cursor: pointer; white-space: nowrap; }
.st-card-btn.on { background: #fff; color: #111; }
.st-share { flex: 1; height: 44px; }
.st-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 58%; overflow-y: auto; background: #14141b; border-radius: 24px 24px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; animation: sheetUp .22s ease-out; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
.st-panel-head { display: flex; align-items: center; justify-content: space-between; }
.st-panel-head b { font-size: 16px; }
.st-sub { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a1a1b3; }
.st-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.st-sw { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; padding: 0; }
.st-sw-in { position: relative; width: 100%; aspect-ratio: 9 / 13; border-radius: 14px; overflow: hidden; border: 2px solid transparent; display: block; }
.st-sw.on .st-sw-in { border-color: #fff; }
.st-sw small { font-size: 11px; font-weight: 700; color: #d4d4de; }
.st-specials { display: flex; flex-wrap: wrap; gap: 8px; }
.st-specials .st-pill { font-size: 14px; line-height: 1.2; padding: 8px 14px; box-shadow: none; border: 0; }
.st-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.st-emojis button { background: none; border: 0; font-size: 28px; padding: 6px 0; border-radius: 10px; }
.st-emojis button:active { background: rgba(255, 255, 255, .1); }
.st-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.st-flt { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; padding: 0; }
.st-flt img { width: 64px; height: 96px; object-fit: cover; border-radius: 12px; border: 2px solid transparent; }
.st-flt.on img { border-color: #fff; }
.st-flt small { font-size: 11px; font-weight: 700; }
.st-colors { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.st-color { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); padding: 0; }
.st-color.on { border: 3px solid #fff; transform: scale(1.15); }
.st-draw-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
.st-size { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); border: 2px solid transparent; display: grid; place-items: center; color: #fff; font-size: 18px; }
.st-size.on { border-color: #fff; }
.st-size i { display: block; border-radius: 50%; background: #fff; }
.st-moods { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.st-moods button { flex: none; padding: 7px 12px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-weight: 700; font-size: 13px; }
.st-moods button.on { background: #fff; color: #111; }
.st-msearch { height: 40px; padding: 0 14px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; -webkit-text-fill-color: #fff; }
.st-tracks { display: flex; flex-direction: column; gap: 4px; }
.st-trk { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; }
.st-trk.playing { background: rgba(236, 72, 153, .18); }
.st-play { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; }
.st-trk.playing .st-play { background: var(--grad); }
.st-trk-main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: #fff; padding: 0; }
.st-trk-main b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-trk-main small { font-size: 12px; color: #a1a1b3; }
.st-credit { font-size: 11.5px; color: #a1a1b3; text-align: center; }
.st-trim-head b { display: block; font-size: 16px; } .st-trim-head small { color: #a1a1b3; font-size: 12.5px; }
.st-wave { position: relative; height: 70px; display: flex; align-items: center; gap: 1px; touch-action: none; cursor: ew-resize; }
.st-wave i { flex: 1; background: rgba(255, 255, 255, .35); border-radius: 2px; min-width: 1px; }
.st-win { position: absolute; top: -4px; bottom: -4px; border: 3px solid #fff; border-radius: 10px; background: rgba(236, 72, 153, .25); pointer-events: none; }
.st-trim-row { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.st-trim-row small { color: #a1a1b3; font-weight: 600; font-size: 12px; }
.st-te { position: absolute; inset: 0; z-index: 6; background: rgba(0, 0, 0, .84); display: flex; flex-direction: column; padding: 14px; gap: 14px; }
.st-te-top { display: flex; justify-content: space-between; align-items: center; padding-top: env(safe-area-inset-top); }
.st-te-style { height: 38px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #fff; background: none; color: #fff; font-weight: 800; }
.st-te-input { flex: none; width: 100%; border: 0; outline: none; resize: none; text-align: center; font: 700 20px/1.35 var(--font); padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .1); color: #fff; -webkit-text-fill-color: #fff; caret-color: #fff; }
.st-te-preview { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none; }
.st-te-preview .st-txt { font-size: 38px; line-height: 47px; }
.st-te-preview .st-txt.st-box span { padding: 0 12px; border-radius: 12px; }
.st-te-preview.empty { opacity: .45; }
/* néző: rétegzett történet + hang */
.sv-media.sv-layered { display: block; }
.sv-stage-box { position: absolute; inset: 0; overflow: hidden; }
.sv-stage { position: absolute; width: 1080px; height: 1920px; transform-origin: 0 0; overflow: hidden; }
.sv-media .sv-stage img { width: auto; height: auto; object-fit: initial; }
.sv-media .sv-stage .sv-overlay { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; }
.sv-media .sv-stage .st-photo { position: absolute; height: auto; }
.sv-stage .st-item { pointer-events: none; }
.sv-sound { background: rgba(0, 0, 0, .35); border: 0; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; display: grid; place-items: center; }
.sv-music { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 3; max-width: 80%; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
/* mozgó borító */
.pv-cover > .abg { z-index: 0; }
.pv-cover.has-anim::after { background: linear-gradient(transparent 55%, rgba(0, 0, 0, .25)); }
.pf-cover-prev { position: relative; overflow: hidden; }
.pf-anim { display: flex; flex-direction: column; gap: 8px; }
.pf-anim > b { font-size: 13px; color: var(--muted); }
.pf-anim-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.pf-anim-sw { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: var(--text); }
.pf-anim-sw > span { position: relative; display: grid; place-items: center; width: 78px; height: 40px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--surface-2); color: var(--muted); font-weight: 800; }
.pf-anim-sw.on > span { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2); }
.pf-anim-sw small { font-size: 11px; font-weight: 700; color: var(--muted); }
.st-panel > * { flex-shrink: 0; }
.st-te .st-colors { flex-wrap: nowrap; gap: 6px; padding-bottom: env(safe-area-inset-bottom); }
.st-te .st-color { width: 28px; height: 28px; flex: none; }

/* ================================================================
 * Grind 2: bizonyíték, pontszám, squad, Haladás feed, dashboard
 * ================================================================ */
/* pontszám a cél kártyán */
.gh-score { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px 12px; border-radius: 16px; border: 0; background: rgba(0, 0, 0, .18); color: #fff; text-align: left; }
.gh-score span { font-size: 15px; font-weight: 700; } .gh-score small { font-size: 12px; font-weight: 700; opacity: .9; }
.gh-score i { position: absolute; left: 0; bottom: 0; height: 4px; background: #fff; border-radius: 0 4px 4px 0; opacity: .85; }
.gh-focus { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 16px; background: rgba(0, 0, 0, .22); }
.gh-focus span { flex: 1; font-weight: 700; } .gh-focus b { font-size: 22px; font-variant-numeric: tabular-nums; }
.gh-actions .gh-focus-btn { flex: none; }
.gh-other { align-self: center; margin-top: -6px; }
.gr-fx em { position: absolute; margin-top: 190px; font-style: normal; font-weight: 800; font-size: 34px; color: #fff; text-shadow: 0 3px 16px rgba(0, 0, 0, .35); animation: fxBurst 1.5s .2s cubic-bezier(.2, .9, .3, 1.2) both; }
/* bizonyíték chipek */
.ci-proofs-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ci-proof { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.gh-done-text .ci-proof { background: rgba(255, 255, 255, .2); color: #fff; }
.ci-proof a { color: inherit; text-decoration: none; }
.ci-gs { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--fire); color: #fff; }
.ci-fire em { font-style: normal; font-size: 11.5px; opacity: .75; font-weight: 700; }
/* check-in ablak: bizonyíték */
.ci-proofs { display: flex; flex-direction: column; gap: 8px; }
.ci-proofs > small { font-size: 13px; font-weight: 700; color: var(--muted); }
.ci-proof-tabs { display: flex; gap: 6px; }
.ci-proof-tabs button { flex: 1; padding: 9px 6px; border-radius: 12px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; }
.ci-proof-tabs button.on { border-color: var(--accent-2); background: var(--grad-soft); }
.ci-proof-row { display: flex; flex-direction: column; gap: 6px; }
.ci-proof-row input { height: 42px; padding: 0 12px; border-radius: 12px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); min-width: 0; }
.ci-proof-row input:focus { border-color: var(--accent); outline: none; }
.ci-inline { display: flex; align-items: center; gap: 8px; }
.ci-inline input { flex: 1; }
.ci-inline #ci-min { max-width: 110px; }
.ci-inline span { font-weight: 700; color: var(--muted); }
.ci-tracked { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--grad-soft); color: var(--text) !important; }
.ci-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.ci-quick button { padding: 6px 12px; border-radius: 999px; border: 0; background: var(--surface-3); color: var(--text); font-weight: 700; font-size: 13px; }
/* squad */
.sq-card .tr-head .icon-btn { margin: -6px -8px -6px 0; }
.sq-streak { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1.5px solid transparent; }
.sq-streak.safe { border-color: rgba(34, 197, 94, .5); background: rgba(34, 197, 94, .08); }
.sq-shield { flex: none; font-size: 20px; padding: 8px 12px; border-radius: 14px; background: var(--grad-soft); }
.sq-shield b { font-size: 22px; }
.sq-streak b { display: block; font-size: 15px; } .sq-streak small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sq-sprint { display: flex; flex-direction: column; gap: 6px; }
.sq-sprint b { display: block; font-size: 14.5px; } .sq-sprint small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.tr-m { position: relative; cursor: pointer; }
.tr-cap { position: absolute; left: -4px; top: -8px; font-size: 18px; font-style: normal; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.tr-poke { position: absolute; right: 2px; top: 30px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); background: #f97316; color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0; }
.tr-poke:disabled { background: var(--surface-3); }
.sq-empty-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.sq-name-row { display: flex; gap: 8px; }
.sq-name-row input { height: 46px; border-radius: 14px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); padding: 0 12px; min-width: 0; }
.sq-name-row input:focus { border-color: var(--accent); outline: none; }
.sq-emoji { width: 56px; flex: none; text-align: center; font-size: 22px; }
.sq-name-row input:not(.sq-emoji) { flex: 1; font-weight: 700; }
.sq-days { display: flex; gap: 6px; }
.sq-days button { flex: 1; padding: 10px 4px; border-radius: 12px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); font-weight: 700; }
.sq-days button.on { border-color: var(--accent-2); background: var(--grad-soft); }
#sq-max { height: 42px; border-radius: 12px; border: 0; background: var(--surface-2); color: var(--text); padding: 0 10px; font-weight: 700; }
.sq-list { display: flex; flex-direction: column; gap: 8px; }
.sq-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: var(--surface-2); }
.sq-row .tr-emoji { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
.sq-row-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sq-row-id b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-row-id small { font-size: 12px; color: var(--muted); font-weight: 600; }
.sq-row-sprint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Haladás feed */
.prog-block:empty { display: none; }
.prog-list { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.prog-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border: 0; background: none; color: var(--text); text-align: left; border-bottom: 1px solid var(--line); }
.prog-item:last-child { border-bottom: 0; }
.prog-item:active { background: var(--surface-2); }
.prog-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); font-size: 16px; }
.prog-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prog-text { font-size: 14px; line-height: 1.35; }
.prog-body small { font-size: 12px; color: var(--muted); font-weight: 600; }
.prog-body em { font-style: normal; font-weight: 800; color: var(--accent-2); }
.prog-empty { padding: 16px; border-radius: var(--radius); border: 1px dashed var(--line-2); color: var(--muted); font-size: 14px; text-align: center; }
.inv-left { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* Dashboard (profil trófeaterem) */
.pv-dash { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pv-dash:empty { display: none; }
.dash-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-head h2 { margin: 0 auto 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.dash-head .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
.dash-focus { margin: 0; padding: 11px 14px; border-radius: 16px; background: var(--grad-soft); font-weight: 700; font-size: 14.5px; border: 0; color: var(--text); text-align: left; }
.dash-focus.empty { background: var(--surface); border: 1px dashed var(--line-2); color: var(--muted); }
.dash-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.dash-card-h { display: flex; align-items: baseline; justify-content: space-between; }
.dash-card-h b { font-size: 15px; } .dash-card-h small { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.dash-muted { flex-direction: row; align-items: center; justify-content: space-between; color: var(--muted); }
.dash-rank { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--fire) border-box; border: 1.5px solid transparent; }
.dr-top { display: flex; align-items: center; gap: 12px; }
.dr-emoji { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--grad-soft); }
.dr-top b { display: block; font-size: 19px; font-weight: 800; } .dr-top small { font-size: 13px; color: var(--muted); font-weight: 700; }
.dr-found { margin-left: auto; font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(250, 204, 21, .15); color: #eab308; }
.dr-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.dr-bar i { display: block; height: 100%; border-radius: inherit; background: var(--fire); }
.dr-next { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: -4px; }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-stats div { padding: 10px 6px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.dash-stats b { display: block; font-size: 20px; font-weight: 800; }
.dash-stats span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.dash-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.dash-heat i, .dash-legend i { display: block; width: 11px; height: 11px; border-radius: 3px; background: var(--surface-3); }
.dash-heat i.e { background: transparent; }
.dash-heat i.l1, .dash-legend i.l1 { background: #7c2d52; } .dash-heat i.l2, .dash-legend i.l2 { background: #be3470; }
.dash-heat i.l3, .dash-legend i.l3 { background: #ec4899; } .dash-heat i.l4, .dash-legend i.l4 { background: #f97316; }
:root[data-theme="light"] .dash-heat i.l1, :root[data-theme="light"] .dash-legend i.l1 { background: #fbcfe8; }
:root[data-theme="light"] .dash-heat i.l2, :root[data-theme="light"] .dash-legend i.l2 { background: #f472b6; }
.dash-legend { display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.dash-legend small { font-size: 11px; color: var(--muted); margin: 0 4px; }
.dash-goal { margin: 0; font-weight: 800; font-size: 16px; } .dash-goal span { color: var(--muted); font-size: 14px; }
.dash-sub { color: var(--muted); font-weight: 600; margin-top: -6px; }
.dash-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.dash-badge { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border-radius: 14px; border: 0; background: var(--surface-2); color: var(--text); }
.dash-badge span { font-size: 28px; line-height: 1; } .dash-badge small { font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; }
.dash-badge.locked { opacity: .35; filter: grayscale(1); }
.dash-done { display: flex; gap: 10px; align-items: flex-start; }
.dash-done > span { font-size: 22px; } .dash-done b { display: block; font-size: 14.5px; } .dash-done small { font-size: 12px; color: var(--muted); font-weight: 600; }
.dash-squad { cursor: pointer; }
.dash-wlist { display: flex; flex-direction: column; gap: 4px; }
.dash-w { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 12px; background: var(--surface-2); }
.dash-w .check-row { flex: 1; color: var(--text); font-weight: 700; align-items: center; }
.dash-w .icon-btn { width: 34px; height: 34px; font-weight: 800; }
.dash-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash-sh { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 6px; border-radius: 16px; border: 0; background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 24px; font-weight: 800; }
.dash-sh small { font-size: 12px; font-weight: 700; }
.dash-sh.li { background: #0a66c2; color: #fff; } .dash-sh.x { background: #000; color: #fff; } .dash-sh.fb { background: #1877f2; color: #fff; }
/* regisztráció: alapító tag + várólista */
.found-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(250, 204, 21, .12); border: 1px solid rgba(250, 204, 21, .35); font-size: 13.5px; }
.found-banner b { display: block; } .found-banner span { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.field .check-row input[type="checkbox"] { padding: 0; width: 18px; height: 18px; border: 0; background: none; flex: none; -webkit-appearance: checkbox; appearance: auto; }
.dash-w .icon-btn:disabled { opacity: .25; }
.dash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: -4px; }
.dash-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 10px; min-width: 0; font-size: 14px; }
.dash-actions button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Squad-chat 2.0: rögzített sáv, GrindBot-kártyák, check-in kártya, effektek ---------- */
.sq-bar { flex: none; padding: 7px 12px 8px; border-bottom: 1px solid var(--line); background: var(--grad-soft); display: flex; flex-direction: column; gap: 6px; }
body.typing .sqb-people { display: none; }
.sq-bar.mini { padding-bottom: 8px; }
.sqb-top { display: flex; align-items: center; gap: 10px; }
.sqb-shield { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 13px; }
.sqb-shield b { font-size: 15px; }
.sqb-shield.safe { background: var(--fire); color: #fff; border-color: transparent; }
.sqb-prog { flex: 1; min-width: 0; cursor: default; }
.sq-bar.mini .sqb-prog { cursor: pointer; }
.sqb-track { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: visible; }
.sqb-track span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--grad); transition: width .5s ease; }
.sqb-track.safe span { background: linear-gradient(90deg, #22c55e, #84cc16); }
.sqb-track i { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); opacity: .55; border-radius: 2px; }
.sqb-prog small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sqb-prog small b { color: var(--text); }
.sqb-min { width: 30px; height: 30px; font-size: 14px; color: var(--muted); }
.sqb-flash { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 5px 4px 12px; border-radius: 999px; background: linear-gradient(135deg, #facc15, #f97316); color: #1a1205; font-weight: 800; font-size: 13.5px; animation: sqpulse 1.4s ease-in-out infinite; }
.sqb-flash .btn-white { padding: 5px 12px; font-size: 13px; }
.sqb-flash em { font-style: normal; font-size: 12.5px; }
@keyframes sqpulse { 50% { box-shadow: 0 0 0 4px rgba(250, 204, 21, .25); } }
.sqb-people { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 2px; }
.sqb-people::-webkit-scrollbar { display: none; }
.sqb-m, .sqb-ci { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 50px; background: none; border: 0; color: var(--text); padding: 0; }
.sqb-m small, .sqb-ci small { font-size: 10.5px; font-weight: 700; max-width: 54px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.sqb-av { position: relative; display: block; border-radius: 50%; padding: 2px; background: var(--surface-3); }
.sqb-av .avatar { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 2px var(--surface); }
.sqb-av i { position: absolute; right: -4px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 2px; border-radius: 9px; background: var(--surface); font-style: normal; font-size: 11px; display: grid; place-items: center; box-shadow: 0 0 0 1.5px var(--line-2); }
.sqb-av em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 13px; }
.sqb-m.done .sqb-av { background: linear-gradient(135deg, #22c55e, #84cc16); }
.sqb-av { isolation: isolate; }
.sqb-m.focus .sqb-av { background: transparent; }
.sqb-m.focus .sqb-av::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: conic-gradient(var(--accent), var(--accent-2), var(--accent-3), var(--accent)); animation: sqspin 2.4s linear infinite; }
.sqb-m.focus small b { color: var(--accent); font-weight: 800; }
.sqb-m.late .sqb-av { background: repeating-linear-gradient(45deg, var(--surface-3) 0 4px, var(--line-2) 4px 8px); }
.sqb-m.late .avatar { filter: grayscale(.6); }
@keyframes sqspin { to { transform: rotate(360deg); } }
.sqb-ci span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: var(--fire); box-shadow: 0 0 0 3px rgba(249, 115, 22, .25); animation: sqpulse 1.8s ease-in-out infinite; }
.sqb-ci small { color: var(--text); }
.sq-act-btn { font-size: 19px; }
.slash-pop { flex: none; max-height: 44vh; overflow-y: auto; margin: 0 10px 6px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.slash-pop button { display: grid; grid-template-columns: 28px auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; text-align: left; background: none; border: 0; color: var(--text); }
.slash-pop button:hover { background: var(--surface-2); }
.slash-pop span { font-size: 18px; text-align: center; }
.slash-pop b { font-size: 14px; }
.slash-pop small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bot-card { position: relative; align-self: center; width: min(420px, 94%); display: flex; gap: 10px; margin: 8px 0; padding: 12px 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-sm); }
.bot-card.has-rx { margin-bottom: 20px; }
.bc-ic { flex: none; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--grad-soft); }
.bc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bc-kick { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.bc-main p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.bc-main > small { font-size: 12px; color: var(--muted); }
.bc-main .btn-primary, .bc-main .btn-soft { align-self: flex-start; margin-top: 4px; }
.bc-cd { font-size: 13px; font-weight: 700; color: var(--muted); }
.bc-cd b { color: var(--text); font-variant-numeric: tabular-nums; }
.bc-people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.bc-person { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.bc-person .avatar { width: 30px; height: 30px; font-size: 12px; }
.bc-person small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.bc-person.hiding .avatar { filter: grayscale(1); opacity: .6; }
.bc-person.hiding small::after { content: " 🙈"; }
.bc-rx { display: flex; gap: 6px; margin-top: 2px; }
.bc-rxb { font-size: 16px; width: 34px; height: 30px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); transition: transform .12s; }
.bc-rxb:active { transform: scale(1.3); }
.bc-ok { font-style: normal; font-size: 13px; font-weight: 800; color: #22c55e; }
.bot-card.slim { padding: 6px 12px; border-radius: 999px; align-items: center; width: auto; max-width: 94%; box-shadow: none; background: var(--surface-2); border-color: transparent; }
.bot-card.slim .bc-ic { width: 26px; height: 26px; font-size: 14px; border-radius: 50%; }
.bot-card.slim .bc-kick { display: none; }
.bot-card.slim p { font-size: 13px; color: var(--muted); }
.bc-safe, .bc-perfect, .bc-streak { border: 2px solid transparent; background-image: linear-gradient(var(--surface), var(--surface)), var(--fire); background-origin: border-box; background-clip: padding-box, border-box; }
.bc-safe .bc-ic, .bc-perfect .bc-ic { background: var(--fire); }
.bot-card.alarm { border-color: rgba(244, 63, 94, .6); background: linear-gradient(135deg, rgba(244, 63, 94, .16), rgba(249, 115, 22, .10)), var(--surface); }
.bot-card.alarm .bc-ic { background: var(--danger); animation: sqsiren 1s steps(2) infinite; }
.bot-card.alarm .bc-kick { color: var(--danger); }
@keyframes sqsiren { 50% { background: #f97316; } }
.bot-card.rip { background: linear-gradient(180deg, var(--surface-2), var(--surface)); filter: saturate(.6); }
.bot-card.rip .bc-kick { color: var(--muted); }
.tomb { align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 22px 8px; margin: 2px 0 4px; border-radius: 60px 60px 8px 8px; background: linear-gradient(180deg, #6b7280, #4b5563); color: #f3f4f6; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.tomb b { font-size: 16px; letter-spacing: .12em; font-family: Georgia, serif; }
.tomb span { font-size: 12.5px; font-weight: 800; }
.tomb small { font-size: 10.5px; opacity: .8; }
.bot-card.flash { border-color: #facc15; }
.bot-card.flash .bc-ic { background: linear-gradient(135deg, #facc15, #f97316); }
.bot-card.flash.live { animation: sqpulse 1.4s ease-in-out infinite; }
.bot-card.hype { background: var(--grad); border-color: transparent; color: #fff; }
.bot-card.hype .bc-kick { color: rgba(255, 255, 255, .85); }
.bot-card.hype .bc-ic { background: rgba(255, 255, 255, .2); font-size: 26px; }
.bot-card.hype .bc-rxb { background: rgba(255, 255, 255, .2); border-color: transparent; }
.bc-big { font-size: 17px !important; font-weight: 900; letter-spacing: .01em; }
.bc-dice { align-self: flex-start; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; font-weight: 900; background: var(--text); color: var(--bg); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); font-variant-numeric: tabular-nums; }
.bc-dice.rolling { animation: sqdice .14s linear infinite; }
@keyframes sqdice { 50% { transform: rotate(12deg) scale(1.06); } }
.bc-coin { align-self: flex-start; padding: 8px 16px; border-radius: 999px; font-weight: 900; font-size: 15px; letter-spacing: .08em; background: linear-gradient(135deg, #fde68a, #f59e0b); color: #3b2503; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.bc-coin.spin { animation: sqcoin .9s ease-out; }
@keyframes sqcoin { 0% { transform: rotateX(0) translateY(0); } 50% { transform: rotateX(900deg) translateY(-18px); } 100% { transform: rotateX(1800deg) translateY(0); } }
.bc-quote { font-size: 15px !important; font-style: italic; }
.bot-card.excuse .bc-ic { background: rgba(244, 63, 94, .15); }
.bot-card.quake { border-color: var(--accent-3); box-shadow: 0 0 0 3px rgba(249, 115, 22, .25); }
.bot-card.pop-in { animation: sqpopin .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes sqpopin { from { transform: scale(.85); opacity: 0; } }
.bot-card.wiggle { animation: sqwiggle .6s ease; }
@keyframes sqwiggle { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-7px) rotate(-1deg); } 35%, 75% { transform: translateX(7px) rotate(1deg); } }

/* Check-in kártya a chatben */
.dm-msg.ci-bubble { padding: 0; overflow: visible; background: var(--surface) !important; color: var(--text) !important; border: 2px solid transparent; border-radius: 20px;
  background-image: linear-gradient(var(--surface), var(--surface)), var(--fire) !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; max-width: min(340px, 86%); }
.cic { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.cic-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cic-head b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cic-streak { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--fire); color: #fff; font-weight: 900; font-size: 12.5px; }
.cic-mood { font-size: 18px; }
.cic-img:empty { display: none; }
.cic-img img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; cursor: zoom-in; }
.cic-text { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; }
.cic .ci-proofs-row { margin-top: 0; }
.cic-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.cic-fire { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line-2); background: none; font-weight: 800; font-size: 13.5px; color: var(--text); transition: transform .15s; }
.cic-fire em { font-style: normal; font-size: 11px; opacity: .75; }
.cic-fire.on { border-color: transparent; background: var(--fire); color: #fff; }
.cic-fire.pop { transform: scale(1.14); }
.cic-fire:disabled { opacity: .75; cursor: default; }
.cic-fans { display: flex; }
.cic-fans .avatar { width: 22px; height: 22px; font-size: 9px; margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.cic-fans .avatar:first-child { margin-left: 0; }
.flash-tag { font-size: 11.5px; font-weight: 900; letter-spacing: .04em; padding: 2px 0 6px; }
.arch-chip { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line-2); color: var(--text); text-align: left; min-width: 200px; }
.dm-msg.out .arch-chip { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; }
.arch-thumb { flex: none; width: 42px; height: 42px; border-radius: 10px; background-size: cover; background-position: center; filter: blur(3px) saturate(.6); }
.arch-chip b { display: block; font-size: 13px; }
.arch-chip small { font-size: 11.5px; opacity: .75; }
.arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 64vh; overflow-y: auto; }
.arch-day { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12.5px; color: var(--muted); text-transform: capitalize; }
.arch-cell { position: relative; aspect-ratio: 1; border-radius: 12px; border: 0; background: var(--surface-2) center / cover no-repeat; overflow: hidden; }
.arch-cell span { position: absolute; left: 4px; bottom: 4px; right: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10.5px; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Rezgetés (MSN-nudge), neon keret, konfetti, lebegő pontok, paradicsom */
.nudge-shake { animation: sqshake .75s cubic-bezier(.36, .07, .19, .97) both; }
.nudge-quake { animation: sqquake 1.25s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes sqshake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(5px, 1px, 0); } 30%, 50%, 70% { transform: translate3d(-9px, -1px, 0); } 40%, 60% { transform: translate3d(9px, 1px, 0); } }
@keyframes sqquake { 0%, 100% { transform: none; } 10% { transform: translate3d(-12px, 4px, 0) rotate(-1.2deg); } 20% { transform: translate3d(12px, -5px, 0) rotate(1.2deg); } 30% { transform: translate3d(-14px, 3px, 0) rotate(-1deg); }
  40% { transform: translate3d(14px, -3px, 0) rotate(1deg); } 50% { transform: translate3d(-10px, 5px, 0); } 60% { transform: translate3d(10px, -4px, 0); } 70% { transform: translate3d(-7px, 2px, 0); } 80% { transform: translate3d(6px, -2px, 0); } 90% { transform: translate3d(-3px, 1px, 0); } }
.nudge-fx { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; box-shadow: inset 0 0 0 4px #f97316, inset 0 0 40px 8px rgba(249, 115, 22, .65); border-radius: 0; }
.nudge-fx.on { animation: sqneon 1.5s ease-out; }
.nudge-fx.quake { box-shadow: inset 0 0 0 6px #f43f5e, inset 0 0 70px 14px rgba(244, 63, 94, .7); }
@keyframes sqneon { 0% { opacity: 0; } 8%, 20%, 40% { opacity: 1; } 14%, 30% { opacity: .35; } 100% { opacity: 0; } }
.sq-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9998; overflow: hidden; }
.sq-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: sqfall linear forwards; }
.sq-confetti i.emo { width: auto; height: auto; font-size: 24px; font-style: normal; background: none; }
@keyframes sqfall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); } }
.sq-float { position: fixed; z-index: 9999; transform: translate(-50%, 0); pointer-events: none; font-weight: 900; font-size: 15px; color: #f97316; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); animation: sqfloat 1.1s ease-out forwards; }
@keyframes sqfloat { to { transform: translate(-50%, -60px); opacity: 0; } }
.sq-tomato { position: fixed; z-index: 9999; font-size: 30px; pointer-events: none; transform: translate(-50%, -50%); animation: sqtomato .55s cubic-bezier(.3, .6, .5, 1) both; }
@keyframes sqtomato { from { transform: translate(-50%, 60vh) scale(.6) rotate(-200deg); } to { transform: translate(-50%, -50%) scale(1.2) rotate(0); } }
.tr-av.focusing .avatar { box-shadow: 0 0 0 2px var(--accent); }
.tr-foc { background: var(--accent) !important; color: #fff; }
@media (prefers-reduced-motion: reduce) { .sqb-m.focus .sqb-av::before, .sqb-flash, .bot-card.flash.live, .bot-card.alarm .bc-ic { animation: none; } }

/* ---------- Retro funkciók: bizonyíték-kamera, Stamp, TimeLapse, Bump, GRIND!, Prime Time, Grind Map ---------- */
.ci-cams { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.ci-cams.hidden { display: none; }
.ci-cam-tl { border-color: rgba(236, 72, 153, .45); }
#ci-img { object-fit: contain; background: #000; }
.ci-prev video { width: 100%; max-height: 30vh; object-fit: cover; border-radius: 18px; display: block; background: #000; }
.ci-stamp-t { position: absolute; left: 10px; top: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; }
.ci-stamp-t input { width: 16px; height: 16px; accent-color: #f97316; appearance: auto; -webkit-appearance: checkbox; }
.ci-extra { display: flex; flex-wrap: wrap; gap: 6px; }
.ci-chipbtn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 13px; }
.ci-place { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 14px; background: var(--surface-2); }
.ci-place input { border: 0; background: transparent; color: var(--text); font-weight: 700; font-size: 14px; min-width: 0; -webkit-text-fill-color: currentColor; }
.ci-place small { grid-column: 1 / -1; font-size: 11.5px; color: var(--muted); }
.gh-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; }
.gh-links .gh-other { margin-top: 0; }
.gh-done-actions { flex-wrap: wrap; }
.gh-thumb { background: #000; }
.cic-img video { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; background: #000; }

/* bizonyíték-kamera (teljes képernyő) */
.cam-modal { position: fixed; inset: 0; z-index: 10000; background: #000; color: #fff; }
.cam-modal.hidden { display: none; }
.cam-modal video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-modal video.mirror { transform: scaleX(-1); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.on { animation: camflash .35s ease-out; }
@keyframes camflash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(12px + env(safe-area-inset-top)) 14px 12px; background: linear-gradient(rgba(0, 0, 0, .55), transparent); }
.cam-round { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: #fff; font-size: 18px; display: grid; place-items: center; }
.cam-round.hidden { visibility: hidden; }
.cam-modes { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.cam-modes.hidden { visibility: hidden; }
.cam-modes button { border: 0; border-radius: 999px; padding: 7px 12px; background: none; color: #fff; font-weight: 800; font-size: 13px; }
.cam-modes button.on { background: #fff; color: #111; }
.cam-modes button.hidden { display: none; }
.cam-inset { position: absolute; left: 16px; top: calc(70px + env(safe-area-inset-top)); width: 28%; max-width: 160px; }
.cam-inset img { width: 100%; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); display: block; }
.cam-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 120px; font-weight: 900; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); pointer-events: none; }
.cam-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.cam-hint { margin: 0; font-size: 14px; font-weight: 700; text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.cam-time { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; min-height: 18px; }
.cam-shutter { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: rgba(255, 255, 255, .2); display: grid; place-items: center; padding: 0; }
.cam-shutter i { width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: all .2s; }
.cam-modal[data-mode="tl"] .cam-shutter i { background: #f43f5e; }
.cam-modal.recording .cam-shutter i { width: 30px; height: 30px; border-radius: 8px; }
.cam-modal.recording .cam-time { color: #f43f5e; }

/* 🤜🤛 Bump */
.bump-card { text-align: center; }
.bump-hero { position: relative; height: 110px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 56px; }
.bump-phone { display: inline-block; }
.bump-phone.l { transform: rotate(-12deg); }
.bump-phone.r { transform: rotate(12deg) scaleX(-1); }
.bump-spark { font-size: 34px; opacity: 0; }
.bump-hero.ready .bump-phone.l { animation: bumpl 1.6s ease-in-out infinite; }
.bump-hero.ready .bump-phone.r { animation: bumpr 1.6s ease-in-out infinite; }
.bump-hero.ready .bump-spark, .bump-hero.searching .bump-spark { animation: bumpspark 1.6s ease-in-out infinite; }
.bump-hero.searching .bump-phone { animation: none; }
@keyframes bumpl { 0%, 100% { transform: translateX(-26px) rotate(-12deg); } 45%, 55% { transform: translateX(8px) rotate(-4deg); } }
@keyframes bumpr { 0%, 100% { transform: translateX(26px) rotate(12deg) scaleX(-1); } 45%, 55% { transform: translateX(-8px) rotate(4deg) scaleX(-1); } }
@keyframes bumpspark { 0%, 40%, 70%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
.bump-lead { margin: 4px 0 10px; font-size: 15px; line-height: 1.45; }
.bump-perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.bump-perks li { padding: 9px 12px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.bump-go { width: 100%; }
.bump-fine { display: block; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.bump-err { color: var(--danger); font-weight: 700; font-size: 13.5px; }
.bump-btn { width: 150px; height: 150px; margin: 6px auto 4px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--fire); color: #fff; font-size: 28px; font-weight: 900; letter-spacing: .04em;
  box-shadow: 0 10px 40px rgba(236, 72, 153, .45), inset 0 -6px 0 rgba(0, 0, 0, .15); transition: transform .1s; }
.bump-btn:active { transform: scale(.94); }
.bump-btn:disabled { opacity: .6; animation: sqpulse 1s ease-in-out infinite; }
.bump-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.bump-alt small { width: 100%; color: var(--muted); font-size: 12.5px; }
.bump-code { font-size: 64px; font-weight: 900; letter-spacing: .18em; padding: 10px 0; background: var(--fire); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.bump-input { width: 190px; margin: 8px auto 12px; display: block; text-align: center; font-size: 40px; font-weight: 900; letter-spacing: .3em; padding: 10px; border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface-2); color: var(--text); -webkit-text-fill-color: currentColor; }
.bump-done h4 { margin: 10px 0 12px; font-size: 20px; }
.bump-pair { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 34px; padding-top: 6px; }
.bump-pair .avatar { width: 64px; height: 64px; font-size: 24px; }

/* ⚡ GRIND! */
.yo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 9px 14px; border-radius: 999px; border: 0; font-weight: 900; font-size: 14px; letter-spacing: .02em;
  background: linear-gradient(135deg, #facc15, #f97316); color: #1a1205; box-shadow: 0 4px 16px rgba(249, 115, 22, .35); }
.yo-btn:active { transform: scale(.95); }
.yo-btn.sent, .yo-btn:disabled { background: var(--surface-3); color: var(--muted); box-shadow: none; }
.yo-card .block-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.yo-card .block-head small { color: var(--muted); font-size: 12.5px; }
.yo-people { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.yo-people::-webkit-scrollbar { display: none; }
.yo-p { flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.yo-who { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: var(--text); }
.yo-who b { font-size: 13px; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yo-p small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.yo-p .yo-btn { padding: 7px 10px; font-size: 12.5px; }
.yo-fx { position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.yo-fx b { font-size: clamp(56px, 16vw, 140px); font-weight: 900; font-style: italic; letter-spacing: -.02em; color: #facc15;
  text-shadow: 0 0 20px #f97316, 0 0 60px #ec4899, 0 6px 0 #7c2d12; transform: rotate(-8deg); }
.yo-fx.on { animation: yofx 1.4s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes yofx { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }

/* 🔴 Prime Time */
#prime-strip:empty { display: none; }
.prime-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.prime-strip.soon { border-color: rgba(244, 63, 94, .4); }
.prime-strip.live { background: linear-gradient(135deg, #be123c, #f43f5e 55%, #f97316); color: #fff; border-color: transparent; box-shadow: 0 8px 30px rgba(244, 63, 94, .35); }
.pr-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: prdot 1.3s ease-out infinite; }
.pr-dot.off { background: var(--danger); animation: none; opacity: .8; }
@keyframes prdot { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
.pr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-main b { font-size: 14.5px; letter-spacing: .02em; }
.pr-main small { font-size: 12.5px; opacity: .85; font-weight: 600; }
.prime-strip:not(.live) .pr-main small { color: var(--muted); opacity: 1; }
.pr-cd { font-variant-numeric: tabular-nums; font-weight: 800; }
.pr-ok { font-weight: 900; }
.sqb-prime { color: #f43f5e !important; }
.bot-card.prime { border-color: rgba(244, 63, 94, .6); }
.bot-card.prime .bc-ic { background: linear-gradient(135deg, #be123c, #f97316); }
.bot-card.prime.live { animation: sqpulse 1.4s ease-in-out infinite; }
.bot-card.cogrind .bc-ic { background: var(--fire); font-size: 18px; }

/* 🗺️ Grind Map */
.fy-tools { display: flex; gap: 8px; margin-bottom: 12px; }
.fy-map { flex: 1; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 800; font-size: 14px; }
.map-card { max-width: 720px !important; }
.map-tabs { margin: 4px 0 10px; }
.map-box { height: min(60vh, 520px); border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.map-box.dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
.map-note { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
.map-pin { background: none; border: 0; }
.map-av { display: block; padding: 3px; border-radius: 50%; background: var(--surface-3); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.map-av.today { background: var(--fire); }
.map-av .avatar { width: 34px; height: 34px; font-size: 13px; }
.leaflet-popup-content { font-family: var(--font); font-size: 13px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .bump-hero * , .pr-dot, .bot-card.prime.live { animation: none !important; } }
.bot-card.cogrind .bc-ic { font-size: 14px; letter-spacing: -3px; white-space: nowrap; }
.yo-btn { white-space: nowrap; flex: none; }

/* ================================================================
 * Üzenetek 3.0 + AI 2.0 + Story 2.0
 * ================================================================ */
.muted-p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.danger-text { color: var(--danger) !important; }
/* --- chat-témák: a kimenő buborék és a küldés gomb színe, halvány háttér a szálban --- */
#msgr-thread-screen { --cp-grad: var(--grad); --cp-tint: transparent; }
#msgr-thread-screen.cpt-sunset { --cp-grad: linear-gradient(135deg, #f97316, #ec4899 60%, #8b5cf6); --cp-tint: rgba(249, 115, 22, .07); }
#msgr-thread-screen.cpt-ocean { --cp-grad: linear-gradient(135deg, #06b6d4, #3b82f6 60%, #6366f1); --cp-tint: rgba(59, 130, 246, .08); }
#msgr-thread-screen.cpt-grape { --cp-grad: linear-gradient(135deg, #a855f7, #7c3aed 60%, #4c1d95); --cp-tint: rgba(124, 58, 237, .09); }
#msgr-thread-screen.cpt-fire { --cp-grad: linear-gradient(135deg, #facc15, #f97316 50%, #dc2626); --cp-tint: rgba(249, 115, 22, .08); }
#msgr-thread-screen.cpt-mint { --cp-grad: linear-gradient(135deg, #34d399, #10b981 50%, #0d9488); --cp-tint: rgba(16, 185, 129, .08); }
#msgr-thread-screen.cpt-night { --cp-grad: linear-gradient(135deg, #334155, #1e293b 60%, #0f172a); --cp-tint: rgba(15, 23, 42, .25); }
#msgr-thread-screen.cpt-gold { --cp-grad: linear-gradient(135deg, #fde68a, #f59e0b 55%, #b45309); --cp-tint: rgba(245, 158, 11, .08); }
#msgr-thread-screen.cpt-candy { --cp-grad: linear-gradient(135deg, #f9a8d4, #ec4899 55%, #a855f7); --cp-tint: rgba(236, 72, 153, .08); }
#msgr-thread-screen.cpt-forest { --cp-grad: linear-gradient(135deg, #4ade80, #16a34a 55%, #14532d); --cp-tint: rgba(22, 163, 74, .08); }
#msgr-thread-screen .msgr-body { background: var(--cp-tint); transition: background .3s; }
#msgr-thread-screen .dm-msg.out { background: var(--cp-grad); }
#msgr-thread-screen #thread-composer .send-btn { background: var(--cp-grad); }
.cp-vtag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text); vertical-align: middle; }
.cp-sys.link { cursor: pointer; }
.cp-themes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.cp-theme { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--text); font-size: 12px; padding: 4px 0; cursor: pointer; }
.cp-sw { width: 46px; height: 46px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.cp-theme.on .cp-sw { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }
.cpt-sw-default { background: var(--grad); }
.cpt-sw-sunset { background: linear-gradient(135deg, #f97316, #ec4899 60%, #8b5cf6); }
.cpt-sw-ocean { background: linear-gradient(135deg, #06b6d4, #3b82f6 60%, #6366f1); }
.cpt-sw-grape { background: linear-gradient(135deg, #a855f7, #7c3aed 60%, #4c1d95); }
.cpt-sw-fire { background: linear-gradient(135deg, #facc15, #f97316 50%, #dc2626); }
.cpt-sw-mint { background: linear-gradient(135deg, #34d399, #10b981 50%, #0d9488); }
.cpt-sw-night { background: linear-gradient(135deg, #334155, #1e293b 60%, #0f172a); }
.cpt-sw-gold { background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #b45309); }
.cpt-sw-candy { background: linear-gradient(135deg, #f9a8d4, #ec4899 55%, #a855f7); }
.cpt-sw-forest { background: linear-gradient(135deg, #4ade80, #16a34a 55%, #14532d); }
.cp-sub { font-size: 13px; color: var(--muted); }
.cp-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cp-emojis button { font-size: 24px; height: 44px; border-radius: 12px; border: 0; background: var(--surface-2); cursor: pointer; }
.cp-emojis button.on { background: var(--grad-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cp-vanish { display: flex; flex-direction: column; gap: 8px; }
.cp-vopt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); text-align: left; cursor: pointer; }
.cp-vopt small { color: var(--muted); font-size: 12.5px; }
.cp-vopt.on { border-color: var(--accent); background: var(--grad-soft); }
/* gyors emoji a küldés gombon, nagy emoji üzenet, eltűnő jelölés */
#thread-composer .send-btn.cp-emoji-send { background: none !important; font-size: 28px; }
#thread-composer .send-btn.cp-emoji-send .ic { display: none; }
#thread-composer .send-btn.cp-emoji-send::after { content: attr(data-emoji); line-height: 1; }
.dm-msg.big-emoji { background: none !important; font-size: 44px; line-height: 1.15; padding: 2px 4px; }
.dm-msg.vanishing::before { content: "👻"; position: absolute; top: -6px; font-size: 11px; opacity: .8; }
.dm-msg.out.vanishing::before { left: -14px; }
.dm-msg.in.vanishing::before { right: -14px; }
.dm-msg.vanish-out { animation: cpvanish .45s ease forwards; }
@keyframes cpvanish { to { opacity: 0; transform: scale(.85); filter: blur(4px); } }
/* ＋ és ✨ gomb, javaslatok */
.cp-plus, .cp-ai { flex: none; }
.cp-ai { font-size: 19px; }
.cp-sugg { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 2px; scrollbar-width: none; flex: none; align-items: center; }
.cp-sugg::-webkit-scrollbar { display: none; }
.cp-chip { flex: none; max-width: 78%; white-space: normal; text-align: left; padding: 8px 12px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 13.5px; line-height: 1.3; cursor: pointer; }
.cp-chip:hover { border-color: var(--accent); }
.cp-sugg-x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.cp-sugg-load, .cp-sugg-err { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.cp-sugg-err { color: var(--danger); }
/* fordítás / leirat a buborékban */
.cp-tr { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; white-space: pre-wrap; }
.dm-msg.in .cp-tr { border-top-color: var(--line-2); }
.cp-tr small { display: block; font-size: 11px; font-weight: 800; opacity: .75; margin-bottom: 2px; }
.ma-e { width: 24px; text-align: center; font-size: 18px; }
/* szavazás */
.dm-msg.poll-bubble, .dm-msg.duel-bubble { background: var(--surface) !important; color: var(--text); border: 1px solid var(--line-2); padding: 12px; min-width: 240px; max-width: 86%; }
.dm-msg.poll-bubble > .tx, .dm-msg.duel-bubble > .tx { display: none; }
.cp-poll { display: flex; flex-direction: column; gap: 7px; }
.cp-poll-q { font-weight: 800; font-size: 15px; margin-bottom: 2px; white-space: normal; }
.cp-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 12px;
  border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; text-align: left; cursor: pointer; }
.cp-opt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad-soft); transition: width .35s ease; }
.cp-opt.lead i { background: linear-gradient(90deg, rgba(139, 92, 246, .38), rgba(236, 72, 153, .28)); }
.cp-opt span, .cp-opt b { position: relative; }
.cp-opt.on { border-color: var(--accent); }
.cp-poll-who { background: none; border: 0; padding: 2px 0 0; color: var(--muted); font-size: 12px; text-align: left; cursor: pointer; }
.poll-opts { display: flex; flex-direction: column; gap: 8px; }
.poll-opt { display: flex; gap: 6px; align-items: center; }
.poll-opt input { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid transparent; color: var(--text); -webkit-text-fill-color: currentColor; padding: 11px 14px; border-radius: 14px; outline: none; font: inherit; }
.poll-opt input:focus { border-color: var(--accent); }
/* párbaj */
.cp-duel { display: flex; flex-direction: column; gap: 10px; white-space: normal; }
.cp-duel-h { font-weight: 800; font-size: 14.5px; }
.cp-duel-b { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.cp-duel-vs { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cp-vs { align-self: center; font-weight: 900; font-size: 13px; letter-spacing: 1px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-ds { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 8px 4px; border-radius: 14px; background: var(--surface-2); }
.cp-ds.in { box-shadow: inset 0 0 0 1.5px var(--online); }
.cp-ds.wait { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.cp-ds b { font-size: 13px; }
.cp-ds small { font-size: 11.5px; color: var(--muted); }
.cp-ds em { font-size: 11px; color: var(--faint); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cp-ds-st { font-size: 16px; line-height: 1; }
.cp-duel-prog { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.cp-duel-prog i { display: block; height: 100%; background: var(--grad); }
.cp-duel-act { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-duel-ok { color: var(--online); font-weight: 700; }
.cp-duel-ff { align-self: flex-end; background: none; border: 0; color: var(--faint); font-size: 11.5px; cursor: pointer; padding: 0; }
.cp-duel-res { font-weight: 800; font-size: 15px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.cp-duel-res.win { background: var(--grad-soft); }
.duel-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.duel-day { display: flex; flex-direction: column; align-items: center; padding: 12px 4px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.duel-day b { font-size: 22px; }
.duel-day small { color: var(--muted); font-size: 12px; }
.duel-day.on { border-color: var(--accent); background: var(--grad-soft); }
.duel-rules { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* továbbküldött AI-válasz */
.dm-msg.ai-share { border: 1px solid var(--line-2); }
.cp-ai-card { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .2); white-space: normal; }
.dm-msg.in .cp-ai-card { border-bottom-color: var(--line-2); }
.cp-ai-card small { font-weight: 800; font-size: 11.5px; opacity: .85; }
.cp-ai-card em { font-size: 13px; opacity: .85; }
/* --- AI 2.0 --- */
.ai-modes { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px 2px; scrollbar-width: none; flex: none; }
.ai-modes::-webkit-scrollbar { display: none; }
.ai-mode { flex: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ai-mode.on { border-color: transparent; background: var(--grad); color: #fff; }
.ai-mem-btn { font-size: 19px; }
.ai-starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 6px 38px; }
.ai-starter { padding: 8px 13px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 13.5px; cursor: pointer; text-align: left; }
.ai-starter:hover { border-color: var(--accent); }
.ai-divider { align-self: center; font-size: 12px; color: var(--muted); padding: 4px 12px; border-radius: 999px; background: var(--surface-2); margin: 4px 0; }
.msg.ai { flex-wrap: wrap; }
.ai-acts { flex-basis: 100%; display: flex; gap: 4px; padding: 3px 0 0 38px; }
.ai-acts button { height: 28px; padding: 0 9px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ai-acts button:hover { background: var(--surface-2); color: var(--text); }
.msg.user { flex-wrap: wrap; justify-content: flex-end; }
.ai-uacts { flex-basis: 100%; display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; }
.ai-uacts button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.bubble.tw::after { content: "▍"; animation: blink .8s step-end infinite; opacity: .6; }
@keyframes blink { 50% { opacity: 0; } }
.mem-add { display: flex; gap: 8px; }
.mem-add input { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid transparent; color: var(--text); -webkit-text-fill-color: currentColor; padding: 11px 14px; border-radius: 14px; outline: none; font: inherit; }
.mem-add input:focus { border-color: var(--accent); }
.mem-list { display: flex; flex-direction: column; gap: 6px; }
.mem-row { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.mem-row span { flex: 1; min-width: 0; }
.mem-empty { padding: 8px 2px; }
/* --- Story 2.0: interaktív matricák (tervezési pixelben, a néző skálázza) --- */
.ix { position: relative; box-sizing: border-box; border-radius: 44px; background: #fff; color: #15151d; box-shadow: 0 12px 40px rgba(0, 0, 0, .28); font-family: Jakarta, system-ui, -apple-system, sans-serif; white-space: nowrap; }
.ix.ix-question { background: linear-gradient(135deg, #8b5cf6, #ec4899 55%, #f97316); color: #fff; }
.ixq { position: absolute; left: 40px; right: 40px; top: 40px; display: flex; flex-direction: column; align-items: center; font: 800 50px/62px Jakarta, system-ui, sans-serif; }
.ixp { position: absolute; left: 40px; right: 40px; display: flex; gap: 20px; }
.ixo { position: relative; overflow: hidden; height: 116px; border-radius: 32px; border: 0; background: #f1f1f6; font-weight: 800; display: grid; place-items: center; padding: 0; cursor: pointer; font-family: inherit; }
.ixo:nth-child(1) { color: #8b5cf6; } .ixo:nth-child(2) { color: #ec4899; }
.ixo i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(139, 92, 246, .22); transition: width .5s ease; }
.ixo:nth-child(2) i { background: rgba(236, 72, 153, .22); }
.ixo span { position: relative; }
.ixo.res { place-items: center start; padding: 0 28px; }
.ixo.res b { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); font-size: 40px; color: #15151d; }
.ixo.mine { box-shadow: inset 0 0 0 5px currentColor; }
.ixa { position: absolute; left: 40px; right: 40px; height: 100px; border-radius: 30px; border: 0; background: rgba(255, 255, 255, .95); color: #8a8a99; font: 700 40px Jakarta, system-ui, sans-serif; cursor: pointer; }
.ixs { position: absolute; left: 40px; right: 40px; height: 100px; }
.ixs-track { position: absolute; left: 0; right: 0; top: 39px; height: 22px; border-radius: 11px; background: #ececf2; }
.ixs-track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; background: linear-gradient(90deg, #8b5cf6, #ec4899 55%, #f97316); }
.ixs-track u { position: absolute; top: -14px; width: 8px; height: 50px; margin-left: -4px; border-radius: 4px; background: #15151d; }
.ixs-knob { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 92px; line-height: 1; pointer-events: none; transition: font-size .1s; }
.ixs-in { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }
.ixn { position: absolute; left: 0; right: 0; bottom: -58px; text-align: center; font: 800 34px Jakarta, system-ui, sans-serif; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.st-item .ix * { pointer-events: none; }
.st-ix-row { display: flex; gap: 8px; margin-bottom: 8px; }
.st-ix-row button { flex: 1; height: 44px; border-radius: 14px; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.ix-opts { display: flex; gap: 8px; }
.ix-opts input { flex: 1; min-width: 0; background: var(--surface-2); border: 1.5px solid transparent; color: var(--text); -webkit-text-fill-color: currentColor; padding: 11px 14px; border-radius: 14px; outline: none; font: inherit; }
.ix-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ix-emojis button { font-size: 24px; height: 44px; border-radius: 12px; border: 0; background: var(--surface-2); cursor: pointer; }
.ix-emojis button.on { box-shadow: inset 0 0 0 2px var(--accent); background: var(--grad-soft); }
.sv-ix { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sv-ix-stage { position: absolute; width: 1080px; height: 1920px; transform-origin: 0 0; }
.sv-ix-item { position: absolute; pointer-events: auto; touch-action: manipulation; }
.sv-qrx { display: flex; justify-content: space-around; padding: 0 4px 10px; }
.sv-qrx button { font-size: 30px; background: none; border: 0; cursor: pointer; transition: transform .12s; padding: 2px 4px; }
.sv-qrx button:active { transform: scale(1.35); }
.sv-burst { position: absolute; bottom: 120px; z-index: 4; pointer-events: none; animation: svburst 1.6s ease-out forwards; }
@keyframes svburst { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-340px) scale(1.2) rotate(14deg); opacity: 0; } }
.sv-reply.answering input { border-color: #ec4899; background: rgba(236, 72, 153, .18); }
.sv-plus-own { display: inline-flex; gap: 8px; margin-left: 8px; }
.sv-foot .sv-views + .sv-plus-own, .sv-foot .sv-views.hidden + .sv-plus-own { vertical-align: middle; }
.sv-cf-tag, .sv-foot .sv-cf { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #16a34a; color: #fff; margin-left: 6px; }
.sv-vrx { font-size: 22px; margin-left: auto; }
/* közeli barátok: zöld gyűrű, stúdió kapcsoló */
.ring.live.close, .ring.close { background: linear-gradient(135deg, #4ade80, #16a34a); }
.st-cf { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); font-size: 20px; cursor: pointer; opacity: .75; }
.st-cf.on { background: #16a34a; opacity: 1; box-shadow: 0 0 0 3px rgba(74, 222, 128, .35); }
.st-share.cf { background: linear-gradient(135deg, #22c55e, #15803d); }
/* kiemelések a profilon */
.pv-hl { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.pv-hl::-webkit-scrollbar { display: none; }
.hl-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; }
.hl-item small { font-size: 12px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-ring { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: var(--line-2); }
.hl-cov { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--bg); background-size: cover; background-position: center; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; overflow: hidden; }
.hl-plus { background: var(--surface-2); color: var(--text); font-size: 24px; font-weight: 400; }
.hl-pick { display: flex; flex-direction: column; gap: 6px; }
.hl-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left; }
.hl-opt b { flex: 1; }
.hl-opt small { color: var(--muted); }
.hl-opt.on { border-color: var(--accent); background: var(--grad-soft); }
.sa-list { display: flex; flex-direction: column; gap: 14px; }
.sa-sec { display: flex; flex-direction: column; gap: 4px; }
.sa-sec > b { font-size: 14px; }
.sa-val { white-space: normal !important; color: var(--text) !important; }
/* a szál elemei ne nyomódjanak össze (a csoportmeghívó-kártya overflow:hidden miatt 2 px-re zsugorodott hosszú beszélgetésben) */
.msgr-body > * { flex-shrink: 0; }
.sheet-item .ic:empty { display: none; }

/* finomítások a képernyőképek alapján */
.pv-hl { margin-top: 14px; }
.ixo.res span { max-width: calc(100% - 118px); overflow: hidden; text-overflow: ellipsis; }
.sv-cf-tag { display: inline-block; white-space: nowrap; vertical-align: middle; }
.sv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sv-foot > .sv-reply, .sv-foot > .sv-qrx { flex-basis: 100%; }
.sv-foot .sv-views { padding: 8px 11px; font-size: 13px; }
.sv-plus-own { margin-left: 0; }
.ai-acts button { white-space: nowrap; }
#view-chat[data-mode]:not([data-mode="friend"]) .topic-bar { display: none; }
.gh-step .gh-coach { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 6px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; align-self: flex-start; }
.sv-who small { white-space: nowrap; }
.sv-who { overflow: hidden; }

/* ================================================================
 * ⚔️ Aréna – élő 1v1 párbajok
 * ================================================================ */
.arena-view { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 114; background: var(--bg); display: grid; place-items: center; }
.ar-frame { position: relative; width: 100%; height: 100%; max-width: 560px; display: flex; flex-direction: column; background: radial-gradient(120% 60% at 50% 0%, rgba(236, 72, 153, .16), transparent 60%), var(--bg); }
@media (min-width: 700px) { .ar-frame { height: min(100%, 920px); border-radius: 26px; border: 1px solid var(--line); overflow: hidden; } }
.ar-head { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 14px 10px; border-bottom: 1px solid var(--line); flex: none; }
.ar-logo { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--grad); box-shadow: 0 6px 20px rgba(236, 72, 153, .35); }
.ar-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-who b { font-size: 18px; font-weight: 900; letter-spacing: -.2px; }
.ar-who small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.ar-me { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.ar-me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-me-info b { font-size: 15.5px; }
.ar-me-info small { color: var(--muted); font-size: 12.5px; }
.ar-today { font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.ar-active { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; border: 0; background: var(--grad); color: #fff; font-weight: 800; font-size: 14.5px; cursor: pointer; animation: arglow 2s ease-in-out infinite; }
.ar-active span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .25); }
@keyframes arglow { 50% { box-shadow: 0 0 0 6px rgba(236, 72, 153, .18); } }
.ar-invite { padding: 10px 12px; border-radius: 16px; border: 1.5px solid var(--accent-2); background: var(--grad-soft); }
.ar-start { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: linear-gradient(160deg, rgba(139, 92, 246, .22), rgba(236, 72, 153, .14) 55%, rgba(249, 115, 22, .12)), var(--surface); border: 1px solid var(--line-2); }
.ar-start h2 { margin: 0; font-size: 20px; font-weight: 900; }
.ar-chips { display: flex; gap: 8px; }
.ar-chip { flex: 1; height: 40px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 800; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.ar-chip.on { border-color: transparent; background: var(--grad); color: #fff; }
.ar-mins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ar-min { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 10px 4px; border-radius: 18px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.ar-min b { font-size: 26px; font-weight: 900; line-height: 1.1; }
.ar-min small { font-size: 12px; color: var(--muted); }
.ar-min em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--accent-3); margin-top: 3px; }
.ar-min.on { border-color: var(--accent-2); background: var(--grad-soft); box-shadow: 0 0 0 3px rgba(236, 72, 153, .15); }
.ar-go { height: 54px; font-size: 17px; font-weight: 900; justify-content: center; }
.ar-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-row2 .btn-soft { justify-content: center; }
.ar-search { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--surface-2); }
.ar-search > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ar-search small { color: var(--muted); font-size: 12px; }
.ar-radar { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--grad); }
.ar-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-2); animation: arping 1.8s ease-out infinite; }
.ar-radar i:nth-child(2) { animation-delay: .6s; } .ar-radar i:nth-child(3) { animation-delay: 1.2s; }
.ar-radar.big { width: 90px; height: 90px; margin: 10px auto; }
@keyframes arping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.ar-sec { display: flex; flex-direction: column; gap: 8px; }
.ar-sec h3 { margin: 4px 2px 0; font-size: 15px; font-weight: 900; }
.ar-urow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface); }
.ar-uinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-uinfo b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-uinfo small { font-size: 12px; color: var(--muted); }
.ar-num { font-size: 20px; }
.ar-empty { margin: 0; color: var(--muted); font-size: 13.5px; }
.ar-live-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid rgba(244, 63, 94, .35); background: rgba(244, 63, 94, .08); color: var(--text); text-align: left; cursor: pointer; }
.ar-lr-ppl { display: flex; align-items: center; gap: 2px; flex: none; }
.ar-lr-ppl em { font-style: normal; font-weight: 900; font-size: 10px; color: var(--accent-2); }
.ar-lr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-lr-info b { font-size: 14px; }
.ar-lr-info small { color: var(--muted); font-size: 12px; }
.ar-lr-go { font-weight: 800; font-size: 13px; color: #f43f5e; }
.ar-rec { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 0; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; }
.ar-rec .ar-rec-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-rec small { color: var(--muted); font-size: 12px; }
.ar-rec em { font-style: normal; font-weight: 800; font-size: 13px; }
.ar-rec.won em, .ar-rec.both em { color: var(--online); } .ar-rec.lost em { color: var(--danger); }
.ar-rules { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.55; display: flex; flex-direction: column; gap: 4px; }
.ar-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 6px; margin: auto 0; }
.ar-center h2 { margin: 6px 0 0; font-size: 22px; font-weight: 900; }
.ar-center p { margin: 0; }
.ar-muted { color: var(--muted); font-size: 13.5px; }
.ar-big { font-size: 64px; }
.ar-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.ar-linkbox { max-width: 100%; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }
.ar-vs-top { display: flex; align-items: center; gap: 18px; }
.ar-face { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ar-face small { color: var(--muted); font-size: 12px; }
.ar-mark { position: absolute; top: -6px; right: -6px; font-size: 22px; }
.ar-vs { font-weight: 900; font-size: 22px; letter-spacing: 1px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* élő, osztott képernyő */
.ar-live { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.ar-side { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; min-height: 96px; }
.ar-side.top { background: linear-gradient(135deg, rgba(59, 130, 246, .16), transparent 70%), var(--surface); }
.ar-side.bot { background: linear-gradient(135deg, rgba(236, 72, 153, .18), transparent 70%), var(--surface); }
.ar-sinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-sinfo b { font-size: 17px; font-weight: 900; }
.ar-sinfo small { color: var(--muted); font-size: 12.5px; }
.ar-st { font-size: 12.5px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.ar-float { position: absolute; inset: 0; pointer-events: none; }
.ar-mid { position: relative; flex: 1; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ar-ring { position: relative; width: min(62vw, 250px); aspect-ratio: 1; }
.ar-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ar-ring circle { fill: none; stroke-width: 8; }
.ar-ring .bg { stroke: var(--surface-2); }
.ar-ring .fg { stroke: url(#ar-grad); stroke: #ec4899; stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 8px rgba(236, 72, 153, .5)); }
.ar-live.proof .ar-ring .fg { stroke: #f97316; }
.ar-clock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ar-clock b { font-size: clamp(40px, 13vw, 58px); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.ar-clock small { color: var(--muted); font-size: 13px; font-weight: 700; }
.ar-mid-info { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ar-mid-info small { color: var(--muted); font-size: 12.5px; }
.ar-rxbar { display: flex; justify-content: space-around; gap: 4px; flex: none; }
.ar-rxbar button { font-size: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; width: 42px; height: 46px; cursor: pointer; transition: transform .1s; }
.ar-rxbar button:active { transform: scale(1.3); }
.ar-quit { position: relative; overflow: hidden; height: 46px; border-radius: 999px; border: 1.5px solid var(--danger); background: transparent; color: var(--danger); font-weight: 800; font-size: 14px; cursor: pointer; flex: none; user-select: none; -webkit-user-select: none; touch-action: none; }
.ar-quit span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(244, 63, 94, .25); }
.ar-quit.holding span { width: 100%; transition: width 2s linear; }
.ar-pop { position: absolute; bottom: 10px; font-size: 30px; font-weight: 800; animation: arpop 1.8s ease-out forwards; pointer-events: none; white-space: nowrap; }
.ar-pop.spec { font-size: 18px; color: var(--muted); }
@keyframes arpop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10px) scale(1.2); } 100% { transform: translateY(-120px) scale(1); opacity: 0; } }
.ar-center-t { text-align: center; margin: 0; }
/* bizonyíték */
.ar-proof { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 22px; border: 1.5px solid var(--accent-3); background: rgba(249, 115, 22, .08); text-align: center; flex: none; }
.ar-proof-t { font-size: 18px; }
.ar-proof small { color: var(--muted); font-size: 13px; }
.ar-proof.done { border-color: var(--online); background: rgba(34, 197, 94, .08); }
.ar-proof-img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 16px; background: #000; }
.ar-ci { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.ar-ci input { appearance: auto !important; -webkit-appearance: checkbox !important; width: 18px; height: 18px; }
/* eredmény */
.ar-result { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 4px; overflow: hidden; }
.ar-res-emoji { font-size: 76px; animation: pop .5s cubic-bezier(.2, .9, .3, 1.4); }
.ar-result h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: .5px; }
.ar-result.won h2 { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ar-result.lost h2 { color: var(--muted); }
.ar-result p { margin: 0; }
.ar-deltas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ar-deltas span { padding: 7px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 800; font-size: 14px; }
.ar-deltas .pos { background: rgba(34, 197, 94, .15); color: var(--online); } .ar-deltas .neg { background: rgba(244, 63, 94, .15); color: var(--danger); }
.ar-rphotos { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.ar-rph { flex: 1; max-width: 200px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ar-rph img, .ar-noph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: var(--surface-2); }
.ar-noph { display: grid; place-items: center; font-size: 40px; }
.ar-h2h { color: var(--muted); font-size: 14px; }
.ar-confetti { position: absolute; inset: 0; pointer-events: none; }
.ar-confetti i { position: absolute; top: -40px; font-style: normal; font-size: 26px; animation: arfall 2.6s ease-in forwards; }
@keyframes arfall { to { transform: translateY(620px) rotate(260deg); opacity: 0; } }
/* lebegő jelzés, kártyák, profil, DM */
.ar-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0;
  background: var(--grad); color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px rgba(236, 72, 153, .4); cursor: pointer; }
.ar-pill b { font-variant-numeric: tabular-nums; }
.ar-pill small { opacity: .85; font-weight: 700; }
.ar-pill.urgent { animation: arglow 1s ease-in-out infinite; }
@media (min-width: 900px) { .ar-pill { bottom: 24px; } }
.ar-card { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; border: 1px solid var(--line-2); text-align: left; color: var(--text); cursor: pointer; margin-bottom: 14px;
  background: linear-gradient(120deg, rgba(139, 92, 246, .22), rgba(236, 72, 153, .16) 55%, rgba(249, 115, 22, .14)), var(--surface); }
.ar-card-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--grad); }
.ar-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ar-card-t b { font-size: 15px; }
.ar-card-t small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-card-l { font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.ar-card-go { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
@media (max-width: 420px) { .ar-card-l { display: none; } }
.pv-arena { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; }
.pv-arena .pv-ar-l { font-weight: 800; }
.pv-arena .pv-ar-r, .pv-arena .pv-ar-h { color: var(--muted); }
.pv-arena button { margin-left: auto; }
.dm-msg.arena-bubble { background: var(--surface) !important; color: var(--text); border: 1px solid var(--accent-2); padding: 12px; min-width: 220px; }
.dm-msg.arena-bubble > .tx { display: none; }
.ar-dm { display: flex; flex-direction: column; gap: 8px; white-space: normal; }
.ar-dm-h { font-weight: 900; font-size: 15px; }
.ar-dm-b { font-size: 13.5px; color: var(--muted); }
.ar-inv-card { align-items: center; text-align: center; }
.ar-inv-top { position: relative; }
.ar-inv-sw { position: absolute; right: -10px; bottom: -4px; font-size: 30px; }
.ar-inv-card p { margin: 0; }
.ar-new-card { text-align: center; align-items: center; }
.ar-new-hero { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 44px; background: var(--grad); box-shadow: 0 12px 40px rgba(236, 72, 153, .4); }
.ar-new-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14px; line-height: 1.45; }
.ar-new-list li { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.side-em { width: 22px; text-align: center; font-size: 18px; }
/* bizonyíték-szakasz: tömör elrendezés, hogy a feltöltés elférjen */
.ar-live.proof .ar-side { min-height: 0; padding: 10px 14px; border-radius: 18px; }
.ar-live.proof .ar-side .avatar { width: 40px; height: 40px; font-size: 16px; }
.ar-live.proof .ar-sinfo b { font-size: 15px; }
.ar-live.proof .ar-mid { flex: none; min-height: 0; flex-direction: row; gap: 16px; }
.ar-live.proof .ar-ring { width: 104px; }
.ar-live.proof .ar-clock b { font-size: 26px; letter-spacing: 0; }
.ar-live.proof .ar-clock small { font-size: 11px; }
.ar-proof-img { max-height: 200px; }
.ar-pop { bottom: 4px; }
@keyframes arpop { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-6px) scale(1.2); } 100% { transform: translateY(-64px) scale(1); opacity: 0; } }

/* ---- Kikapcsolt funkciók (a <html> off-<név> osztályt kap a /js/features.js-ből) ---- */
.off-arena #side-arena, .off-arena #arena-home, .off-arena #arena-grind, .off-arena #pv-arena, .off-arena #ar-pill,
.off-radar #radar-strip, .off-live #live-strip, .off-levels #pv-level, .off-ask #ask-teaser,
.off-topics #matches-block, .off-topics #home-topics-block, .off-topics #explore-topics-block, .off-topics #topic-join-slot, .off-topics .topic-bar,
.off-daily #daily-card, .off-vibe #vibe-teaser, .off-vibe #pv-vibe-section, .off-highlights #pv-hl,
.off-aiModes #ai-modes, .off-aiMemory #ai-mem-btn, .off-prime #prime-strip,
.off-storyMusic #studio [data-tool="music"], .off-storyStickers #studio [data-tool="sticker"], .off-closeFriends #st-cf, .off-storyAnim #pf-anim, .off-map #ci-geo, .off-map #ci-place-row,
.off-arena #arena-announce, .off-radar #radar-admin { display: none !important; }

/* ================= 🪙 érmék + 🎁 ajándékok ================= */
.avatar.xs { width: 22px; height: 22px; font-size: 10px; }
.coin-chip { display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; padding: 6px 11px; background: rgba(250, 204, 21, .14); color: var(--text);
  font: inherit; font-weight: 800; font-size: 14px; position: relative; cursor: pointer; white-space: nowrap; }
.coin-chip b { font-weight: 900; }
.coin-chip.hdr { margin-left: auto; margin-right: 2px; }
.coin-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--bg); }
.side-item .side-coins { margin-left: auto; font-weight: 900; font-size: 14px; }
.side-item .coin-dot { position: static; margin-left: 6px; box-shadow: none; }
.dr-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dr-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; background: var(--surface-2); border: 1.5px solid transparent; }
.dr-day small { font-size: 10px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.dr-day span { font-size: 18px; } .dr-day b { font-size: 13px; font-weight: 900; }
.dr-day.done { opacity: .55; } .dr-day.done span { filter: grayscale(.2); }
.dr-day.done::after { content: "✓"; font-size: 11px; font-weight: 900; color: var(--online); }
.dr-day.today { border-color: #facc15; background: rgba(250, 204, 21, .12); box-shadow: 0 0 0 4px rgba(250, 204, 21, .12); animation: drpulse 1.6s ease-in-out infinite; }
@keyframes drpulse { 50% { box-shadow: 0 0 0 7px rgba(250, 204, 21, .06); } }
.daily-card { text-align: center; align-items: stretch; }
.dr-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dr-head p { margin: 0; color: var(--muted); font-size: 14px; }
.dr-gift { font-size: 54px; line-height: 1; animation: drgift 1.4s ease-in-out infinite; }
@keyframes drgift { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
.dr-go { width: 100%; font-size: 17px; padding: 14px; }
.dr-more { align-self: center; font-size: 13px; }
.coin-burst { position: fixed; z-index: 10003; pointer-events: none; }
.coin-burst span { position: absolute; left: 0; top: 0; font-size: 22px; animation: coinfly 1s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes coinfly { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--d) * -1)); opacity: 0; } }
.wallet-card { max-width: 440px; }
.wl-top { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wl-bal { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 20px; background: linear-gradient(135deg, rgba(250, 204, 21, .18), rgba(249, 115, 22, .12)); }
.wl-bal.dia { background: linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(139, 92, 246, .16)); }
.wl-bal span { font-size: 26px; } .wl-bal b { font-size: 28px; font-weight: 900; letter-spacing: -.5px; } .wl-bal small { color: var(--muted); font-size: 12px; font-weight: 700; }
.wl-sec { display: flex; flex-direction: column; gap: 10px; }
.wl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wl-h small { color: var(--muted); font-size: 12px; }
.wl-claim { width: 100%; }
.wl-earn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.wl-earn li { display: flex; gap: 10px; align-items: center; }
.wl-earn li span { width: 28px; height: 28px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.wl-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.wl-list { display: flex; flex-direction: column; gap: 4px; }
.wl-row { display: flex; align-items: center; gap: 10px; border: 0; background: none; color: var(--text); font: inherit; padding: 7px 4px; border-radius: 12px; text-align: left; cursor: pointer; }
.wl-row:hover { background: var(--surface-2); }
.wl-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.wl-rank { width: 24px; text-align: center; font-weight: 900; color: var(--muted); }
.wl-val { font-weight: 800; font-size: 14px; }
.gift-card-wrap { max-width: 480px; gap: 12px; }
.gp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gp-head h3 { font-size: 18px !important; } .gp-head small { color: var(--muted); font-size: 13px; }
.gp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gp-item { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 4px 8px; border-radius: 18px; border: 1.5px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: transform .12s; }
.gp-item .gp-e { font-size: 32px; line-height: 1.1; }
.gp-item b { font-size: 12px; font-weight: 800; } .gp-item small { font-size: 11px; color: var(--muted); font-weight: 700; }
.gp-item.on { border-color: var(--accent-2); background: rgba(236, 72, 153, .12); }
.gp-item.t3 .gp-e { filter: drop-shadow(0 4px 10px rgba(250, 204, 21, .45)); }
.gp-item.poor { opacity: .38; }
.gp-item:active, .gp-item.pop { transform: scale(.9); }
.gp-send { width: 100%; }
.gp-more { align-self: center; font-size: 13px; }
.gp-combo { align-self: center; font-size: 22px; font-weight: 900; }
.gp-combo.pop { animation: gpcombo .35s ease; }
@keyframes gpcombo { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.gift-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: rgba(250, 204, 21, .12); color: var(--text); border-radius: 999px; padding: 6px 11px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.gift-btn span:empty { display: none; }
.gift-btn.sent { background: rgba(250, 204, 21, .24); }
.pv-gift-btn, .pv-bt-btn { font-size: 18px; padding: 9px 13px; }
.pv-gifts:empty { display: none; }
.pv-gifts { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(56, 189, 248, .10), rgba(236, 72, 153, .10)); }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pg-dia { display: flex; align-items: baseline; gap: 6px; } .pg-dia span { font-size: 20px; } .pg-dia b { font-size: 22px; font-weight: 900; } .pg-dia small { color: var(--muted); font-size: 13px; }
.pg-top small { color: var(--muted); font-size: 12px; font-weight: 700; }
.pg-sup { display: flex; gap: 12px; margin-top: 6px; overflow-x: auto; }
.pg-s { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--text); font: inherit; position: relative; cursor: pointer; }
.pg-s small { font-size: 11px; font-weight: 800; color: var(--muted); }
.pg-medal { position: absolute; top: -6px; right: -6px; font-size: 13px; }
.gift-bubble { padding: 10px 12px !important; }
.gift-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gift-card .gc-e { font-size: 38px; line-height: 1; animation: gcbob 2.4s ease-in-out infinite; }
.gift-card.t3 .gc-e { font-size: 46px; filter: drop-shadow(0 4px 12px rgba(250, 204, 21, .5)); }
@keyframes gcbob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.gift-card .gc-t { display: flex; flex-direction: column; min-width: 0; }
.gift-card .gc-t b { font-weight: 900; } .gift-card .gc-t small { opacity: .8; font-size: 12px; } .gift-card .gc-t em { font-size: 12px; opacity: .75; }
.gc-thx { flex-basis: 100%; border: 0; border-radius: 999px; padding: 7px 12px; background: rgba(255, 255, 255, .14); color: inherit; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.dm-msg.in .gc-thx { background: var(--surface-3); }
.sv-qrx .sv-gift { background: rgba(250, 204, 21, .25) !important; }
.gift-fx { position: fixed; inset: 0; z-index: 10002; pointer-events: none; overflow: hidden; }
.gift-fx.t1 span { position: absolute; bottom: -40px; font-size: 34px; animation: gfxup 1.8s ease-out forwards; }
@keyframes gfxup { to { transform: translateY(-70vh) rotate(20deg); opacity: 0; } }
.gift-fx.t2, .gift-fx.t3 { display: grid; place-items: center; }
.gfx-mid { font-size: 120px; animation: gfxmid 1.8s cubic-bezier(.2, 1.4, .4, 1) forwards; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .4)); }
@keyframes gfxmid { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(1.15); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4) translateY(-40px); opacity: 0; } }
.gfx-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(250, 204, 21, .55), rgba(236, 72, 153, .25) 35%, transparent 65%); animation: gfxglow 2.6s ease forwards; }
@keyframes gfxglow { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.gfx-big { position: relative; font-size: 190px; animation: gfxbig 2.6s cubic-bezier(.2, 1.3, .4, 1) forwards; filter: drop-shadow(0 16px 40px rgba(0, 0, 0, .45)); }
@keyframes gfxbig { 0% { transform: scale(.1) rotate(-30deg); opacity: 0; } 20% { transform: scale(1.2) rotate(8deg); opacity: 1; } 35% { transform: scale(1) rotate(0); }
  80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6) translateY(-60px); opacity: 0; } }
.gfx-label { position: absolute; top: 64%; left: 50%; transform: translateX(-50%); max-width: 90vw; text-align: center; background: rgba(0, 0, 0, .66); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-weight: 900; font-size: 16px; animation: gfxlabel 2.4s ease forwards; }
.gfx-label.small { top: auto; bottom: 18%; font-size: 14px; }
@keyframes gfxlabel { 0%, 10% { opacity: 0; transform: translate(-50%, 10px); } 20%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ================= 🥊 Live Battle ================= */
.bt-home { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #ef4444 0%, #be185d 45%, #1e3a8a 100%); box-shadow: 0 14px 34px rgba(190, 24, 93, .28); }
.bt-home.hour { background: radial-gradient(120% 140% at 0% 0%, #f97316 0%, #db2777 40%, #4c1d95 100%); }
.bt-home::after { content: "🥊"; position: absolute; right: -8px; top: -14px; font-size: 90px; opacity: .14; transform: rotate(-18deg); pointer-events: none; }
.bth-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bth-head b { font-size: 18px; font-weight: 900; } .bth-head small { display: block; font-size: 13px; opacity: .88; margin-top: 2px; }
.bth-stat { font-weight: 800; font-size: 13px; background: rgba(0, 0, 0, .22); padding: 4px 10px; border-radius: 999px; }
.bth-live { display: flex; flex-direction: column; gap: 8px; }
.bth-item { display: flex; align-items: center; gap: 10px; border: 0; background: rgba(0, 0, 0, .24); color: #fff; border-radius: 16px; padding: 8px 10px; font: inherit; text-align: left; cursor: pointer; }
.bth-av { display: flex; } .bth-av .avatar + .avatar { margin-left: -10px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
.bth-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bth-txt b { font-size: 14px; } .bth-txt i { opacity: .7; font-style: normal; font-weight: 600; }
.bth-txt small { font-size: 12px; opacity: .9; display: flex; align-items: center; gap: 5px; }
.bt-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); animation: btdot 1s infinite; }
@keyframes btdot { 50% { opacity: .35; } }
.bth-empty { margin: 0; font-size: 14px; opacity: .92; }
.bth-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.bth-actions .btn-primary { background: #fff; color: #be185d; box-shadow: none; }
.bth-actions .btn-primary em { font-style: normal; background: #be185d; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.bth-actions .btn-soft { background: rgba(0, 0, 0, .25); color: #fff; }
.bth-go { background: #fff !important; color: #be185d !important; }
.bth-queue { display: flex; align-items: center; gap: 10px; font-weight: 800; } .bth-queue .link-btn { color: #fff; margin-left: auto; }
.bth-ban { margin: 0; font-size: 12px; opacity: .9; }
body.bt-open .ar-pill, body.bt-open .toast-dock { z-index: 130; }
.battle-view { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 117; background: #07070b; color: #fff; overflow: hidden;
  display: flex; flex-direction: column; }
.bt-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 8px 0; }
.bt-top .icon-btn { color: #fff; background: rgba(0, 0, 0, .35); flex: none; }
.bt-bar { position: relative; flex: 1; height: 26px; border-radius: 999px; overflow: hidden; display: flex; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.bt-bar-a { background: linear-gradient(90deg, #ef4444, #f97316); transition: width .45s cubic-bezier(.2, .9, .3, 1); }
.bt-bar-b { background: linear-gradient(90deg, #6366f1, #3b82f6); transition: width .45s cubic-bezier(.2, .9, .3, 1); }
.bt-na, .bt-nb { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 900; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.bt-na { left: 10px; } .bt-nb { right: 10px; }
.bt-meta { position: absolute; top: calc(48px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; align-items: center; font-weight: 800; font-size: 13px; }
.bt-meta > * { background: rgba(0, 0, 0, .45); padding: 3px 10px; border-radius: 999px; }
.bt-live-tag { background: #ef4444 !important; letter-spacing: .5px; font-size: 11px; }
.battle-view:not([data-status="live"]) .bt-live-tag { background: rgba(255, 255, 255, .2) !important; }
.bt-timer { font-variant-numeric: tabular-nums; } .bt-timer.hot { background: #ef4444 !important; animation: btdot .8s infinite; }
.bt-stage { position: relative; flex: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
@media (min-aspect-ratio: 1/1) { .bt-stage { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; } }
.bt-tile { position: relative; overflow: hidden; background: #111; }
.bt-tile.side-a { box-shadow: inset 0 -3px 0 #ef4444; } .bt-tile.side-b { box-shadow: inset 0 3px 0 #3b82f6; }
.bt-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, #1f1f2b, #0b0b10); }
.bt-tile.side-a .bt-ph { background: radial-gradient(circle, rgba(239, 68, 68, .35), #0b0b10 70%); }
.bt-tile.side-b .bt-ph { background: radial-gradient(circle, rgba(59, 130, 246, .35), #0b0b10 70%); }
.bt-tile.has-video .bt-ph { display: none; }
.bt-vid { position: absolute; inset: 0; }
.bt-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bt-video.mirror { transform: scaleX(-1); }
.bt-audio-el { display: none; }
.bt-name { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .45); padding: 4px 10px 4px 4px; border-radius: 999px; font-size: 13px; }
.bt-tile.side-a .bt-name { top: calc(78px + env(safe-area-inset-top)); bottom: auto; }
.bt-gift-side { position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); font-size: 22px; cursor: pointer; }
.bt-tile.side-a .bt-gift-side { top: calc(74px + env(safe-area-inset-top)); bottom: auto; }
.battle-view.is-host .bt-gift-side { display: none; }
.bt-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; font-weight: 900; font-size: 20px; font-style: italic; padding: 6px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #ef4444, #6366f1); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.bt-gfx { position: absolute; left: 10px; right: 60px; bottom: 50px; z-index: 3; display: flex; flex-direction: column-reverse; gap: 6px; pointer-events: none; }
.bt-tile.side-a .bt-gfx { top: calc(112px + env(safe-area-inset-top)); bottom: auto; flex-direction: column; }
.btg { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; background: rgba(0, 0, 0, .55); border-radius: 999px; padding: 3px 12px 3px 4px; animation: btg 2.6s ease forwards; }
.btg-e { font-size: 26px; } .btg-t { display: flex; flex-direction: column; line-height: 1.1; } .btg-t b { font-size: 12px; } .btg-t small { font-size: 11px; color: #facc15; font-weight: 900; }
.btg.t2 .btg-e { font-size: 34px; } .btg.t3 { background: linear-gradient(90deg, rgba(250, 204, 21, .55), rgba(0, 0, 0, .5)); } .btg.t3 .btg-e { font-size: 40px; }
@keyframes btg { 0% { transform: translateX(-30px); opacity: 0; } 12% { transform: translateX(0); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.bt-center { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, .45); }
.battle-view[data-status="lobby"] .bt-center { background: transparent; align-items: end; padding-bottom: calc(96px + env(safe-area-inset-bottom)); pointer-events: none; }
.battle-view[data-status="lobby"] .btc-card { pointer-events: auto; }
.btc-card { width: 100%; max-width: 360px; background: rgba(20, 20, 28, .92); border: 1px solid rgba(255, 255, 255, .1); border-radius: 26px; padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.btc-card.small { padding: 16px; }
.btc-card h3 { margin: 0; font-size: 20px; font-weight: 900; } .btc-card p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 14px; }
.btc-emoji { font-size: 56px; line-height: 1; display: grid; place-items: center; }
.btc-act { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .btc-act > * { flex: 1; }
.btc-act .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.btc-ok { font-weight: 800; color: #4ade80; align-self: center; }
.btc-cd b { font-variant-numeric: tabular-nums; }
.btc-count { font-size: 140px; font-weight: 900; text-shadow: 0 10px 40px rgba(236, 72, 153, .6); }
.btc-count.pop { animation: btcount .9s ease; }
@keyframes btcount { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: .6; } }
.btc-card.result.win { box-shadow: 0 0 0 2px #facc15, 0 20px 60px rgba(250, 204, 21, .25); } .btc-card.result.win .btc-emoji { animation: gfxmid 1.4s ease; }
.btc-score { font-size: 30px !important; font-weight: 900; color: #fff !important; }
.btc-mvp { color: #facc15 !important; font-weight: 800; } .btc-coins { font-weight: 900; color: #facc15 !important; font-size: 18px !important; }
.bt-top3 { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: calc(80px + env(safe-area-inset-top)); display: flex; gap: 6px; }
.bt-sup { display: flex; align-items: center; gap: 3px; background: rgba(0, 0, 0, .5); padding: 2px 8px 2px 2px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.bt-sup.side-a { box-shadow: inset 0 0 0 1.5px #ef4444; } .bt-sup.side-b { box-shadow: inset 0 0 0 1.5px #3b82f6; }
.bt-chat { position: absolute; left: 8px; right: 72px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 4; max-height: 34%; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); scrollbar-width: none; }
.btm { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.35; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); animation: fade .2s ease; }
.btm b { font-weight: 800; opacity: .85; margin-right: 2px; } .btm.host.side-a b { color: #fca5a5; } .btm.host.side-b b { color: #93c5fd; }
.bt-hearts { position: absolute; right: 18px; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 4; width: 40px; height: 240px; pointer-events: none; }
.bt-hearts span { position: absolute; bottom: 0; left: 8px; font-size: 24px; animation: btheart 2.2s ease-out forwards; }
.bt-hearts span.mine { font-size: 30px; }
@keyframes btheart { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translate(0, -20px) scale(1); } 100% { transform: translate(var(--x), -230px) scale(1.1); opacity: 0; } }
.bt-audio { position: absolute; z-index: 7; left: 50%; top: 45%; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 12px 20px; background: #fff; color: #111; font: inherit; font-weight: 900; }
.bt-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); }
.bt-bottom input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 12px 16px; background: rgba(255, 255, 255, .14); color: #fff; -webkit-text-fill-color: #fff; font: inherit; font-size: 15px; }
.bt-bottom input::placeholder { color: rgba(255, 255, 255, .6); -webkit-text-fill-color: rgba(255, 255, 255, .6); }
.bt-btn { width: 46px; height: 46px; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); font-size: 22px; cursor: pointer; transition: transform .12s; }
.bt-btn.off { background: #ef4444; }
.bt-btn.pop { animation: gpcombo .3s ease; }
.bt-gift { background: linear-gradient(135deg, #facc15, #f97316); box-shadow: 0 6px 18px rgba(249, 115, 22, .45); }
.battle-view.is-host .viewer-only, .battle-view.is-viewer .host-only { display: none; }
.battle-view:not([data-status="live"]) .bt-bottom input, .battle-view:not([data-status="live"]) .viewer-only { visibility: hidden; }
.off-gifts [data-open-wallet], .off-gifts #pv-gifts, .off-gifts .gift-btn, .off-gifts .bt-gift-side, .off-gifts .bt-gift,
.off-battle #battle-home, .off-battle [data-battle-nav] { display: none !important; }
/* a B (alsó) csempén a név, az ajándék-gomb és az ajándék-lista felül van – alul a hozzászólások és a beviteli sáv takarná */
.bt-tile.side-b .bt-name { top: 10px; bottom: auto; }
.bt-tile.side-b .bt-gift-side { top: 8px; bottom: auto; }
.bt-tile.side-b .bt-gfx { top: 50px; bottom: auto; flex-direction: column; }
@media (min-aspect-ratio: 1/1) {
  .bt-tile.side-b .bt-name { top: calc(78px + env(safe-area-inset-top)); }
  .bt-tile.side-b .bt-gift-side { top: calc(74px + env(safe-area-inset-top)); }
  .bt-tile.side-b .bt-gfx { top: calc(112px + env(safe-area-inset-top)); }
}
.bt-audio { top: calc(112px + env(safe-area-inset-top)); padding: 8px 14px; font-size: 13px; background: rgba(255, 255, 255, .92); }
.battle-view[data-status="done"] .bt-audio, .battle-view[data-status="cancelled"] .bt-audio, .battle-view[data-status="invite"] .bt-audio { display: none; }
/* a ✕ és a ⋯ mindig kattintható legyen: a középső kártya (várakozás, visszaszámlálás, eredmény) fölött */
.bt-top, .bt-meta { z-index: 8; }
.bt-center { padding-top: calc(96px + env(safe-area-inset-top)); }
/* 🔴 egyedüli élő: egy csempe, felül 💎-számláló a pontjelző helyett */
.bt-solo-n { display: none; flex: 1; text-align: center; font-weight: 900; font-size: 16px; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 4px 12px; }
.battle-view.solo .bt-solo-n { display: block; }
.battle-view.solo .bt-bar, .battle-view.solo #bt-tile-b, .battle-view.solo .bt-vs { display: none; }
.battle-view.solo .bt-stage { grid-template-rows: 1fr; grid-template-columns: 1fr; }
.bth-actions .bth-solo { grid-column: 1 / -1; background: #ef4444 !important; color: #fff !important; }
.btc-act .btc-wide { flex-basis: 100%; }
/* battle / élő közben az értesítések a felső sáv (✕, pontjelző, ⋯) alatt jelenjenek meg, ne takarják el */
body.bt-open .toast-dock { top: calc(118px + env(safe-area-inset-top)); }