/* xFind - Aurora/Foil design system (M7-T1). Tokens + components ported
   pixel-perfect from Feed.dc.html (visual, not the DSL). Tokens scoped to
   html[data-theme] because the anti-flash script sets it on documentElement. */

html[data-theme="dark"] {
  --bg:#090A0F; --surf-a:#191C26; --surf-b:#10121B; --panel:#0E1119;
  --line:rgba(255,255,255,.07); --line-hi:rgba(255,255,255,.13);
  --text:#F3F5FA; --dim:#8A91A3; --faint:#5B6172;
  --muted:#8A91A3; --card:#12141B;
  --accent:#7C8BFF; --on-accent:#0B0C12;
  --live:#D0FF4C; --disp:"Unbounded","Heebo","Inter",system-ui,sans-serif;
  --aurora:rgba(124,139,255,.20); --grain-op:.04; --grain-blend:normal;
  --fab-text:#0A0B10; --inset-hi:rgba(255,255,255,.05);
  --card-shadow:0 18px 40px -24px rgba(0,0,0,.8);
  --chip-bg:rgba(0,0,0,.34); --chip-line:rgba(255,255,255,.18);
  --cta-bg:rgba(255,255,255,.05); --cta-bg-h:rgba(255,255,255,.08); --track:rgba(255,255,255,.08);
  --pill:rgba(255,255,255,.05);
  --foil:linear-gradient(110deg,#5BD6FF 0%,#7C8BFF 38%,#C98BFF 64%,#5BD6FF 100%);
  --sans:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
html[data-theme="light"] {
  --bg:#F2F3F7; --surf-a:#FFFFFF; --surf-b:#F6F7FB; --panel:#FFFFFF;
  --line:rgba(16,18,27,.09); --line-hi:rgba(16,18,27,.16);
  --text:#14161D; --dim:#5A6072; --faint:#9097A8;
  --muted:#5A6072; --card:#FFFFFF;
  --accent:#4E5BE6; --on-accent:#FFFFFF;
  --live:#3E9B2E; --disp:"Unbounded","Heebo","Inter",system-ui,sans-serif;
  --aurora:rgba(79,91,224,.12); --grain-op:.05; --grain-blend:multiply;
  --fab-text:#FFFFFF; --inset-hi:rgba(255,255,255,.9);
  --card-shadow:0 16px 36px -24px rgba(24,28,52,.28);
  --chip-bg:rgba(7,9,18,.52); --chip-line:rgba(255,255,255,.20);
  --cta-bg:rgba(16,18,27,.04); --cta-bg-h:rgba(16,18,27,.07); --track:rgba(16,18,27,.10);
  --pill:rgba(16,18,27,.05);
  --foil:linear-gradient(110deg,#3BB7E6 0%,#4E5BE6 38%,#9B5BD6 64%,#3BB7E6 100%);
  --sans:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
html[lang="he"] { --sans:"Heebo","Inter",system-ui,sans-serif; }
/* IBM Plex Mono has no real Hebrew glyphs -> Hebrew in mono renders broken/ugly.
   On the Hebrew locale, map --mono to Heebo so Hebrew text stays clean (digits/codes
   still render fine in Heebo). */
html[lang="he"] { --mono:"Heebo","Inter",system-ui,sans-serif; }

* { box-sizing:border-box; }
/* Only show a focus ring for keyboard focus, not programmatic focus (e.g. Blazor's
   FocusOnNavigate moving focus to the h1 on route change - that drew a box). */
:focus:not(:focus-visible) { outline: none; }
/* FocusOnNavigate (Routes.razor) focuses the <h1> after every route change for
   screen-reader UX; some browsers classify that post-navigation programmatic focus
   as :focus-visible and draw a box around the heading on load. The <h1> is not an
   interactive control (you never keyboard-tab to it), so suppressing its ring is
   safe — the focus still announces to assistive tech. */
h1:focus, [tabindex="-1"]:focus { outline: none; }
html, body { margin:0; }
body {
  min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--sans);
  letter-spacing:-.005em; -webkit-font-smoothing:antialiased; transition:background .35s;
  overflow-x:hidden;
}
.xf-root { position:relative; min-height:100vh; }
.xf-root::before {
  content:""; position:fixed; left:50%; top:-200px; width:900px; height:520px;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(50% 55% at 50% 50%, var(--aurora), transparent 70%); filter:blur(24px);
}
.xf-root::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes xfSheen { to { background-position:200% center; } }
@keyframes xfFoilSweep { 0% { background-position:-140% 0; } 100% { background-position:120% 0; } }

/* boot loader (pre-WASM) */
.xf-boot { position:fixed; inset:0; display:grid; place-items:center; background:var(--bg,#090A0F); }
.xf-boot-mark { width:34px; height:8px; border-radius:99px;
  background:linear-gradient(110deg,#5BD6FF,#7C8BFF,#C98BFF,#5BD6FF); background-size:200% auto;
  animation:xfSheen 1.4s linear infinite; transform:rotate(45deg); }

/* ---------- logo ---------- */
/* the wordmark is a Latin brand mark - always LTR, never mirrored by dir=rtl
   (same principle as coords/data staying LTR in Hebrew). */
.xf-logo { display:flex; align-items:flex-end; gap:3px; text-decoration:none; direction:ltr; }
.xf-logo-x { position:relative; width:26px; height:26px; }
.xf-logo-x span { position:absolute; left:50%; top:50%; width:23px; height:6px; border-radius:99px;
  background:var(--foil); background-size:200% auto; animation:xfSheen 9s linear infinite; }
.xf-logo-x span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg); }
.xf-logo-x span:nth-child(2) { transform:translate(-50%,-50%) rotate(-45deg); }
/* the wordmark is always Inter - never Heebo (var(--sans) becomes Heebo in he,
   which reflows the Latin "Find" to the wrong height/metrics). */
.xf-logo-find { font:800 22px "Inter",system-ui,sans-serif; letter-spacing:-.03em; color:var(--text); }
.xf-logo-me-wrap { position:relative; transform:translate(2px,3px); }
.xf-logo-me { display:block; font-family:'Dancing Script',cursive; font-weight:600; font-size:19px;
  line-height:.9; background:var(--foil); background-size:200% auto; -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.xf-logo-underline { position:absolute; left:-2px; bottom:-3px; }

/* ---------- header ---------- */
.xf-header { position:sticky; top:0; z-index:20;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line); }
.xf-header-in { box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto;
  padding:13px 20px; display:flex; align-items:center; gap:16px; }
.xf-hloc { display:none; align-items:center; gap:8px; padding:7px 14px; border-radius:99px; background:var(--pill);
  border:1px solid var(--line); font:600 13px var(--sans); color:var(--text); margin-inline-start:16px; }
.xf-nav { display:flex; gap:22px; align-items:center; }
.xf-nav a { font:600 14.5px var(--sans); color:var(--dim); text-decoration:none; transition:color .15s; white-space:nowrap; }
.xf-nav a:hover { color:var(--text); }
.xf-nav a.on { color:var(--text); font-weight:800; }
.xf-avatarbtn { width:36px; height:36px; border-radius:50%; flex:none; background:linear-gradient(135deg,#7C8BFF,#C98BFF);
  border:1px solid var(--line-hi); display:inline-block; transition:.15s; cursor:pointer; padding:0; }
.xf-avatarbtn:hover { filter:brightness(1.08); transform:scale(1.04); }
/* FIX-B: real photo overrides the gradient placeholder once loaded. */
.xf-avatarbtn.hasimg { background-size:cover; background-position:center; background-repeat:no-repeat; }
/* FIX-A: avatar dropdown menu (profile / settings / log out). */
.xf-avatarwrap { position:relative; display:inline-flex; }
.xf-avmenu-back { position:fixed; inset:0; z-index:40; }
.xf-avmenu { position:absolute; top:44px; inset-inline-end:0; z-index:41; min-width:170px; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:0 12px 32px -8px rgba(0,0,0,.45); }
.xf-avmenu-row { font:600 14px var(--sans); color:var(--text); text-decoration:none; text-align:start; background:none; border:0;
  padding:9px 12px; border-radius:8px; cursor:pointer; transition:.12s; }
.xf-avmenu-row:hover { background:var(--cta-bg); }
.xf-avmenu-row.danger { color:#ff6b7a; }
@media (max-width:760px) { .xf-nav { display:none; } }
.xf-loc-pip { width:7px; height:7px; border-radius:50%; background:var(--live);
  box-shadow:0 0 9px 1px color-mix(in srgb,var(--live) 75%,transparent); animation:xfPulse 2s ease-in-out infinite; }
@keyframes xfPulse { 0%,100%{opacity:.55;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }
@media (prefers-reduced-motion: reduce) { .xf-loc-pip { animation:none; } }
.xf-loc-city { font-family:var(--mono); font-size:11px; color:var(--faint); direction:ltr; padding-inline-start:4px; }
.xf-ctrl { display:flex; align-items:center; gap:12px; margin-inline-start:auto; }
.xf-theme { width:32px; height:32px; border-radius:9px; border:1px solid var(--line-hi);
  background:var(--cta-bg); color:var(--text); cursor:pointer; display:grid; place-items:center; font-size:14px; transition:.2s; }
.xf-theme:hover { background:var(--cta-bg-h); }
.xf-theme:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.xf-lang { display:flex; gap:8px; }
.xf-lang button { font:500 11px var(--mono); letter-spacing:.04em; border:0; background:transparent;
  color:var(--faint); padding:5px 2px; cursor:pointer; transition:.2s; }
.xf-lang button.on { color:var(--text); }
.xf-lang button:focus-visible { outline:1px solid var(--accent); outline-offset:3px; border-radius:3px; }

/* ---------- shell / sidebar / feed ---------- */
.xf-shell { position:relative; z-index:1; width:100%; max-width:520px; margin:0 auto;
  padding:18px 16px 96px; display:flex; flex-direction:column; gap:16px; }
.xf-side { display:flex; flex-direction:column; gap:14px; }
.xf-mloc { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--dim); }
.xf-mloc .xf-loc-city { margin-inline-start:auto; }
.xf-filters { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.xf-filters::-webkit-scrollbar { display:none; }
.xf-filters button, .xf-filters a { flex:none; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  border-radius:99px; padding:7px 13px; color:var(--dim); background:var(--pill); border:1px solid var(--line); transition:.18s;
  text-decoration:none; box-sizing:border-box; display:inline-block; }
.xf-filters button.on, .xf-filters a.on { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.xf-filters button:focus-visible, .xf-filters a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.xf-sidecreate { display:none; }
.xf-feed { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
/* Off-screen cards skip layout/paint AND their background-image never loads until
   scrolled near - the biggest LCP win on a long feed, since covers are CSS
   backgrounds (can't use loading="lazy"). intrinsic-size reserves the row height so
   the scrollbar and CLS stay stable. Kept off the FIRST screen implicitly: cards in
   view render normally. */
.xf-card2 { content-visibility:auto; contain-intrinsic-size:auto 340px; }

/* ---------- card ---------- */
.xf-card { position:relative; border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--surf-a),var(--surf-b));
  box-shadow:0 1px 0 var(--inset-hi) inset, var(--card-shadow); transition:border-color .4s, box-shadow .4s; }
.xf-card.joined { border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  box-shadow:0 1px 0 var(--inset-hi) inset, 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),
             0 22px 50px -24px color-mix(in srgb,var(--accent) 40%,transparent); }
.xf-cover { height:150px; position:relative; display:flex; align-items:flex-start; justify-content:space-between; padding:13px 15px; background-size:cover; background-position:center; }
.xf-cover::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 40%,var(--surf-a)); }
.xf-chip { position:relative; z-index:2; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--chip-bg); border:1px solid var(--chip-line); padding:5px 10px; border-radius:7px; backdrop-filter:blur(4px); }
html[lang="he"] .xf-chip { letter-spacing:.04em; }
.xf-eta { position:relative; z-index:2; font-family:var(--mono); font-weight:500; font-size:11px; color:#fff;
  background:var(--chip-bg); border:1px solid var(--chip-line); padding:5px 9px; border-radius:7px; backdrop-filter:blur(4px); direction:ltr; }
.xf-cbody { padding:4px 18px 18px; display:flex; flex-direction:column; flex:1; }
.xf-title { font-weight:700; font-size:22px; line-height:1.12; letter-spacing:-.02em; margin:0 0 14px; color:var(--text); text-wrap:balance; }
.xf-data { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--faint);
  margin-bottom:16px; direction:ltr; flex-wrap:wrap; }
html[lang="he"] .xf-data { justify-content:flex-end; }
.xf-data .sep { opacity:.4; }
.xf-crow { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.xf-ava { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700;
  font-size:12px; color:#fff; background:linear-gradient(135deg,#525870,#2c3040); border:1px solid var(--line-hi); }
.xf-who { font-size:14px; font-weight:600; color:var(--text); }
.xf-seek { font-size:12.5px; color:var(--dim); margin-inline-start:2px; }
.xf-dens { display:flex; align-items:center; gap:11px; margin-bottom:16px; margin-top:auto; }
.xf-track { position:relative; flex:1; height:4px; border-radius:99px; background:var(--track); }
.xf-track i { position:absolute; left:0; top:0; display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff)); }
.xf-thresh { position:absolute; top:-4px; width:2px; height:12px; border-radius:2px; }
.xf-densn { font-family:var(--mono); font-size:11px; color:var(--dim); direction:ltr; }

.xf-cta { position:relative; overflow:hidden; width:100%; font-family:var(--sans); font-weight:700; font-size:15px;
  letter-spacing:-.01em; border-radius:13px; padding:13px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:8px; transition:.25s; color:var(--text); background:var(--cta-bg); border:1px solid var(--line-hi);
  text-decoration:none; box-sizing:border-box; }
.xf-cta:hover { background:var(--cta-bg-h); }
.xf-cta:active { transform:translateY(1px); }
.xf-cta:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.xf-cta > span { position:relative; z-index:3; }
.xf-cta .foil { position:absolute; inset:0; z-index:2; background:var(--foil); background-size:240% 100%;
  background-position:-140% 0; opacity:0; pointer-events:none; }
.xf-card.joining .xf-cta { color:#0A0B10; border-color:transparent; }
.xf-card.joining .xf-cta .foil { opacity:1; animation:xfFoilSweep .62s cubic-bezier(.45,0,.15,1) forwards; }
.xf-card.joined .xf-cta { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.xf-arrow { font-family:var(--mono); }
html[dir="rtl"] .xf-arrow { transform:scaleX(-1); }

/* verified-organizer badge — small accent check next to the organizer name */
.xf-verified { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  margin-inline-start:4px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  font-size:10px; font-weight:800; line-height:1; vertical-align:middle; }

/* feed search box (sidebar) */
.xf-search { position:relative; }
.xf-search-in { width:100%; box-sizing:border-box; padding:9px 32px 9px 14px; border-radius:99px;
  border:1px solid var(--line); background:var(--pill); color:var(--text); font-size:13px; outline:none;
  transition:border-color .18s; }
.xf-search-in::placeholder { color:var(--faint); }
.xf-search-in:focus { border-color:var(--accent); }
.xf-search-clear { position:absolute; inset-inline-end:9px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--faint); cursor:pointer; font-size:12px; padding:3px; line-height:1; }
.xf-search-clear:hover { color:var(--text); }

/* waitlisted state — a muted, non-interactive CTA */
.xf-cta-wait { justify-content:center; color:var(--dim); background:var(--cta-bg); cursor:default; }

/* secondary "source" link on imported events — quieter than the primary Join CTA */
.xf-cta-ghost { margin-top:9px; color:var(--dim); background:transparent; border-color:var(--line); font-weight:600; font-size:14px; }
.xf-cta-ghost:hover { background:var(--cta-bg); color:var(--text); }

/* "N going" count for imported public listings (which show no density bar) */
.xf-going-count { font:600 13px var(--sans); color:var(--dim); text-align:center; margin:2px 0 10px; }

/* Leaflet maps: the /map events map + the event-detail mini-map. Pins are CSS DivIcons. */
/* Hide Leaflet's "Support Ukraine" attribution flag — keep the map neutral. */
.leaflet-attribution-flag { display:none !important; }
.xf-map { width:100%; height:68vh; min-height:420px; border-radius:14px; overflow:hidden; border:1px solid var(--line); }
.xf-map-mini { width:100%; height:200px; border-radius:12px; overflow:hidden; border:1px solid var(--line); margin:14px 0 4px; }
.xf-pin-dot { display:block; width:18px; height:18px; border-radius:50%; background:var(--accent); border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.45); box-sizing:border-box; }
.xf-pin-link { font:700 13px var(--sans); color:var(--accent); text-decoration:none; }
.leaflet-popup-content { margin:10px 12px; }

/* Redesign 1A: display type (Unbounded, Heebo fallback for RTL) on the major page
   headings site-wide - event detail, city/category/map/digest, profile, create, empty. */
.xf-detail-title, .xf-similar-h, .xf-city-h1, .xf-profile-title, .xf-empty-t {
  font-family:var(--disp); letter-spacing:-.025em;
}

/* Home hero (redesign 1A "PULSE") - positioning-led banner above the feed. */
.xf-hero { position:relative; overflow:hidden; border-bottom:1px solid var(--line); padding:60px 24px 44px; }
.xf-hero-in { position:relative; max-width:1180px; margin:0 auto; text-align:start; }
.xf-hero-mesh { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.xf-hero-mesh span { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.xf-hero-mesh span:nth-child(1) { top:-150px; inset-inline-start:-70px; width:460px; height:460px;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); animation:xfMesh1 17s ease-in-out infinite; }
.xf-hero-mesh span:nth-child(2) { top:30px; inset-inline-end:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(255,61,129,.42), transparent 70%); animation:xfMesh2 21s ease-in-out infinite; }
.xf-hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:99px;
  border:1px solid var(--line-hi); background:var(--pill); color:var(--live); font:700 12px var(--sans);
  letter-spacing:.05em; text-transform:uppercase; }
.xf-hero-h1 { font-family:var(--disp); font-weight:800; font-size:clamp(38px, 6.4vw, 74px); line-height:.98;
  letter-spacing:-.03em; margin:20px 0 16px; color:var(--text); }
.xf-hero-h1 .grad { background:linear-gradient(120deg,#7C8BFF,#FF3D81 55%,var(--live));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.xf-hero-sub { font-size:clamp(15px,1.7vw,19px); line-height:1.55; color:var(--dim); max-width:560px; margin:0 0 26px; }
.xf-hero-cta { display:flex; gap:13px; flex-wrap:wrap; }
.xf-hero-primary, .xf-hero-ghost { display:inline-flex; align-items:center; font:800 15px var(--sans);
  padding:15px 28px; border-radius:99px; text-decoration:none; transition:.2s; }
.xf-hero-primary { color:#fff; background:linear-gradient(135deg,#7C8BFF,#FF3D81);
  box-shadow:0 14px 38px -12px rgba(255,61,129,.6); }
.xf-hero-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.xf-hero-ghost { color:var(--text); background:var(--cta-bg); border:1px solid var(--line-hi); }
.xf-hero-ghost:hover { background:var(--cta-bg-h); }
@keyframes xfMesh1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(38px,-26px)} }
@keyframes xfMesh2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-46px,34px)} }
@media (prefers-reduced-motion: reduce) { .xf-hero-mesh span { animation:none; } }
@media (max-width:640px) { .xf-hero { padding:40px 18px 32px; } }

/* Feed section header ("Рядом и скоро" + live indicator) */
.xf-feedhead { display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:0 0 16px; }
.xf-feedhead-t { font-family:var(--disp); font-weight:700; font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; color:var(--text); margin:0; }
.xf-live { display:inline-flex; align-items:center; gap:7px; font:700 12px var(--sans); color:var(--live); white-space:nowrap; }
.xf-live-dot { width:7px; height:7px; border-radius:50%; background:var(--live);
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--live) 70%,transparent); animation:xfPulse 2s ease-in-out infinite; }

/* Manifesto band above the footer */
.xf-manifesto { padding:8px 24px 40px; }
.xf-manifesto-in { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:26px;
  flex-wrap:wrap; padding:34px 36px; border-radius:24px; background:var(--panel); border:1px solid var(--line);
  position:relative; overflow:hidden; }
.xf-manifesto-t { font-family:var(--disp); font-weight:700; font-size:clamp(22px,3vw,32px); letter-spacing:-.02em; line-height:1.12; color:var(--text); }
.xf-manifesto-t span { color:var(--dim); }
.xf-manifesto-cta { flex:none; display:inline-flex; align-items:center; gap:8px; font:800 15px var(--sans); color:#fff;
  padding:15px 28px; border-radius:99px; text-decoration:none; background:linear-gradient(135deg,#7C8BFF,#FF3D81);
  box-shadow:0 14px 38px -12px rgba(255,61,129,.55); transition:.2s; }
.xf-manifesto-cta:hover { filter:brightness(1.06); transform:translateY(-1px); }
.xf-manifesto-cta .px { font-family:var(--mono); }

/* ===== Redesign 1A: full-width board (no sidebar) + new cards ===== */
.xf-board { position:relative; z-index:1; padding:8px 24px 44px; }
.xf-board-in { max-width:1200px; margin:0 auto; }
.xf-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.xf-toolbar .xf-search { flex:1; min-width:200px; max-width:380px; margin-inline-start:auto; }
.xf-chips { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:24px; }
.xf-chips a { font:600 13.5px var(--sans); padding:9px 17px; border-radius:99px; text-decoration:none;
  color:var(--text); background:var(--cta-bg); border:1px solid var(--line); transition:.16s; white-space:nowrap; }
.xf-chips a:hover { border-color:var(--line-hi); background:var(--cta-bg-h); }
.xf-chips a.on { background:var(--text); color:var(--bg); border-color:var(--text); }
/* Time-window chips (Today / This weekend / This week) — one row under categories. */
.xf-timechips { display:flex; gap:8px; flex-wrap:wrap; margin:-12px 0 22px; }
.xf-timechips button { font:600 12.5px var(--sans); padding:7px 14px; border-radius:99px; border:1px solid var(--line); background:var(--cta-bg); color:var(--dim); cursor:pointer; transition:.16s; white-space:nowrap; }
.xf-timechips button:hover { border-color:var(--line-hi); color:var(--text); }
.xf-timechips button.on { background:var(--text); color:var(--bg); border-color:var(--text); font-weight:700; }
.xf-timechips-sep { width:1px; align-self:stretch; margin:2px 4px; background:var(--line); }
/* Safety-as-feature filter chips — distinct trust accent so they read as "protective". */
.xf-safechip.on { background:color-mix(in srgb,var(--live) 20%,transparent)!important; color:var(--text)!important;
  border-color:color-mix(in srgb,var(--live) 55%,transparent)!important; font-weight:700; }

/* Intent-axis filter chips — same neutral pill language as the time chips, one row below. */
.xf-intentchips { display:flex; gap:8px; flex-wrap:wrap; margin:-8px 0 22px; }
.xf-intentchips button { font:600 12.5px var(--sans); padding:7px 14px; border-radius:99px; border:1px solid var(--line); background:var(--cta-bg); color:var(--dim); cursor:pointer; transition:.16s; white-space:nowrap; }
.xf-intentchips button:hover { border-color:var(--line-hi); color:var(--text); }
.xf-intentchips button.on { background:var(--text); color:var(--bg); border-color:var(--text); font-weight:700; }

.xf-board .xf-feed { grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px) { .xf-board .xf-feed { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .xf-board .xf-feed { grid-template-columns:1fr; } .xf-board { padding:8px 16px 36px; } }

/* Safety priming in onboarding — make "safety-as-feature" visible to reassure newcomers. */
.xf-onb-safety { margin-top:20px; padding:16px 16px 14px; border-radius:14px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--live) 8%,transparent); }
.xf-onb-safety-h { font:800 14px var(--sans); color:var(--text); margin-bottom:8px; }
.xf-onb-safety-l { margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:5px;
  font:13.5px/1.4 var(--sans); color:var(--dim); }
.xf-onb-safety-lnk { display:inline-block; margin-top:11px; font:700 13px var(--sans); color:var(--accent); text-decoration:none; }
.xf-onb-safety-lnk:hover { text-decoration:underline; }

/* Onboarding nudge: brand-new user's path to their first meetup. */
.xf-firstmeet { position:relative; margin:0 0 26px; padding:22px 22px 20px; border-radius:20px;
  border:1px solid var(--line-hi);
  background:linear-gradient(135deg,color-mix(in srgb,#7C8BFF 16%,transparent),color-mix(in srgb,#FF3D81 12%,transparent)),var(--card); }
.xf-fm-x { position:absolute; top:12px; inset-inline-end:12px; width:28px; height:28px; border-radius:50%;
  border:none; background:transparent; color:var(--dim); font-size:14px; cursor:pointer; transition:.15s; }
.xf-fm-x:hover { background:var(--cta-bg); color:var(--text); }
.xf-fm-t { font:800 20px var(--disp); letter-spacing:-.02em; color:var(--text); }
.xf-fm-sub { font:14.5px/1.5 var(--sans); color:var(--dim); margin:6px 0 16px; max-width:52ch; }
.xf-firstmeet .xf-tpl-chips { margin-bottom:14px; }
.xf-fm-ai { display:inline-flex; align-items:center; gap:7px; font:700 14px var(--sans); color:#fff;
  text-decoration:none; padding:11px 18px; border-radius:12px; background:linear-gradient(135deg,#7C8BFF,#FF3D81); transition:.15s; }
.xf-fm-ai:hover { filter:brightness(1.06); transform:translateY(-1px); }

/* "Тебе может зайти" — personalized horizontal strip above the main grid. Compact cards
   in a scroll-snap row so it reads as a distinct recommendation shelf, not the feed. */
.xf-recs { margin:0 0 26px; }
.xf-recs-h { font:800 15px var(--sans); letter-spacing:-.01em; color:var(--text); margin:0 0 12px;
  display:flex; align-items:center; gap:7px; }
.xf-recs-spark { filter:drop-shadow(0 0 6px color-mix(in srgb,var(--live) 60%,transparent)); }
/* Responsive grid (no horizontal scroll — a hidden gesture many miss): 4-up desktop,
   2-up tablet/mobile. Reads as a compact recommendation shelf, distinct from the feed. */
.xf-recs-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px) { .xf-recs-row { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .xf-recs-row { grid-template-columns:repeat(2,1fr); gap:10px; } }
.xf-rec { display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; background:var(--card); border:1px solid var(--line);
  text-decoration:none; transition:transform .16s, border-color .16s, box-shadow .16s; }
.xf-rec:hover { transform:translateY(-3px); border-color:var(--line-hi); box-shadow:var(--card-shadow); }
.xf-rec-cover { position:relative; display:block; height:104px; background-size:cover; background-position:center; }
.xf-rec-cover .xf-chip { position:absolute; top:10px; inset-inline-start:10px; z-index:1; }
.xf-rec-cover .xf-timepill { top:10px; inset-inline-end:10px; font-size:11px; padding:5px 10px; }
.xf-rec-t { font:800 14px/1.28 var(--sans); color:var(--text); margin:11px 13px 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.xf-rec-m { font:12px var(--sans); color:var(--dim); margin:5px 13px 13px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.xf-card2 { display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:var(--card);
  border:1px solid var(--line); transition:transform .18s, border-color .18s, box-shadow .18s; }
.xf-card2:hover { transform:translateY(-3px); border-color:var(--line-hi); box-shadow:var(--card-shadow); }
.xf-card2-cover { position:relative; display:block; height:172px; background-size:cover; background-position:center; }
.xf-card2-cover::after { content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 34%, transparent 66%, rgba(0,0,0,.22) 100%); }
.xf-card2-cover .xf-chip { position:absolute; top:13px; inset-inline-start:13px; z-index:1; }
.xf-card2-cover .xf-chip-recur { inset-inline-start:auto; inset-inline-end:96px; }
/* TICKET-4 3C: source badge on afisha cards (bottom-left, where intent sits on meetups) —
   muted/outlined so it reads as external provenance ("Ticketmaster"), not a first-party tag. */
/* TICKET-4 3C: origin link on a spawned meetup ("на событии: …"). */
.xf-detail-origin { display:inline-flex; gap:6px; align-items:baseline; margin:2px 0 10px; font:500 13px var(--sans);
  color:var(--accent); text-decoration:none; }
.xf-detail-origin:hover { text-decoration:underline; }
.xf-detail-origin .xf-origin-k { color:var(--muted); font-weight:600; }
.xf-card2-cover .xf-chip-src { top:auto; bottom:13px; inset-inline-start:13px; text-transform:none;
  letter-spacing:.02em; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border-color:color-mix(in srgb,var(--text) 26%,transparent); color:color-mix(in srgb,var(--text) 82%,transparent); }
/* Intent badge — bottom-left of the cover, clear of category (top-left) + time pill (top-
   right). Glass chip (inherits .xf-chip) tinted per intent; noble tones, PULSE canon. */
.xf-card2-cover .xf-chip-int { top:auto; bottom:13px; inset-inline-start:13px; text-transform:none; letter-spacing:.02em; }
.xf-chip-int-friend  { border-color:color-mix(in srgb,#5ec9a8 60%,transparent); color:#c4f0e2; }
.xf-chip-int-serious { border-color:color-mix(in srgb,#e08cc0 60%,transparent); color:#f6cfe6; }
.xf-chip-int-casual  { border-color:color-mix(in srgb,#e0a86a 62%,transparent); color:#f5dcb6; }
.xf-chip-int-open    { border-color:color-mix(in srgb,var(--live) 55%,transparent); color:#e9ffd8;
  background:linear-gradient(120deg,color-mix(in srgb,#7a5cff 34%,var(--chip-bg)),color-mix(in srgb,var(--live) 26%,var(--chip-bg))); }
.xf-timepill { position:absolute; top:13px; inset-inline-end:13px; z-index:1; font:800 12px var(--sans);
  padding:6px 12px; border-radius:99px; background:rgba(255,255,255,.94); color:#08070d; white-space:nowrap; }
.xf-timepill.soon { background:var(--live); color:#08070d; box-shadow:0 0 14px -2px color-mix(in srgb,var(--live) 70%,transparent); }
.xf-card2-body { display:flex; flex-direction:column; gap:7px; padding:15px 16px 16px; flex:1; }
.xf-card2-title { font:800 17px/1.24 var(--sans); letter-spacing:-.01em; margin:0; }
.xf-card2-title a { color:var(--text); text-decoration:none; }
.xf-card2-title a:hover { color:var(--accent); }
.xf-card2-loc { font:13px var(--sans); color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xf-card2-foot { margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.xf-going2 { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.xf-going2.empty { font:600 12.5px var(--sans); color:var(--faint); }
.xf-godots { display:inline-flex; }
.xf-godots i { width:22px; height:22px; border-radius:50%; border:2px solid var(--card); margin-inline-start:-8px; display:block; }
.xf-godots i:first-child { margin-inline-start:0; }
.xf-godots i:nth-child(1){ background:#7C8BFF; } .xf-godots i:nth-child(2){ background:#FF3D81; } .xf-godots i:nth-child(3){ background:var(--live); }
.xf-gocount { font:600 12.5px var(--sans); color:var(--dim); white-space:nowrap; }
.xf-go { position:relative; overflow:hidden; flex:none; font:800 13px var(--sans); padding:10px 20px; border-radius:99px;
  border:0; cursor:pointer; text-decoration:none; background:var(--text); color:var(--bg); transition:.18s; }
.xf-go:hover { filter:brightness(1.05); transform:translateY(-1px); }
.xf-go.ghost { background:var(--cta-bg); color:var(--text); border:1px solid var(--line-hi); }
.xf-go.joined { background:var(--accent); color:var(--on-accent); }
.xf-go.wait { background:var(--cta-bg); color:var(--dim); cursor:default; }
.xf-go > span { position:relative; z-index:2; }
.xf-card2.joining .xf-go { color:#0A0B10; background:var(--live); }

/* Event-detail meta grid (Когда / Где / Намерение) + about label + gradient CTA */
.xf-meta3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:18px; margin:20px 18px; }
.xf-meta3-cell { min-width:0; }
.xf-meta3-k { font:700 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.xf-meta3-v { font:800 16px var(--sans); color:var(--text); }
.xf-meta3-sub { font:13px var(--sans); color:var(--dim); margin-top:2px; }
.xf-about-k { font:700 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:2px 18px 8px; }
.xf-cta-go { color:#fff !important; background:linear-gradient(135deg,#7C8BFF,#FF3D81) !important; border-color:transparent !important;
  box-shadow:0 14px 38px -14px rgba(255,61,129,.6); }
.xf-cta-go:hover { filter:brightness(1.06); }

/* digest settings form */
.xf-form { display:flex; flex-direction:column; max-width:520px; margin-top:10px; }
.xf-digest-toggle { display:flex; align-items:center; gap:10px; font:600 15px var(--sans); color:var(--text); cursor:pointer; margin-bottom:4px; }
.xf-seg { display:flex; gap:8px; flex-wrap:wrap; }
.xf-seg button { font:600 13px var(--sans); padding:8px 14px; border-radius:99px; border:1px solid var(--line);
  background:var(--pill); color:var(--dim); cursor:pointer; transition:.18s; }
.xf-seg button.on { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.xf-chips { display:flex; gap:8px; flex-wrap:wrap; }
.xf-chip-btn { font:600 12.5px var(--sans); padding:7px 13px; border-radius:99px; border:1px solid var(--line);
  background:var(--pill); color:var(--dim); cursor:pointer; transition:.18s; }
.xf-chip-btn.on { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.xf-form-actions { display:flex; align-items:center; gap:14px; margin-top:22px; }
.xf-btn { font:700 14px var(--sans); padding:11px 22px; border-radius:12px; border:1px solid var(--line-hi);
  background:var(--cta-bg); color:var(--text); cursor:pointer; }
.xf-btn.accent { background:linear-gradient(135deg,#7C8BFF,#FF3D81); color:#fff; border-color:transparent; border-radius:99px;
  box-shadow:0 12px 32px -14px rgba(255,61,129,.5); }
.xf-btn.accent:hover { filter:brightness(1.06); }
.xf-btn:disabled { opacity:.6; cursor:default; }
.xf-saved { font:13px var(--sans); color:var(--dim); }

/* quick-start meetup templates (create form + empty-feed CTA) */
.xf-tpl-strip { margin-bottom:20px; }
.xf-tpl-lead { display:block; font:700 11px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--live); margin-bottom:10px; }
.xf-tpl-chips { display:flex; gap:9px; flex-wrap:wrap; }
.xf-tpl-chip { display:inline-flex; align-items:center; gap:7px; font:600 13.5px var(--sans);
  padding:9px 15px; border-radius:99px; border:1px solid var(--line); background:var(--cta-bg);
  color:var(--text); cursor:pointer; transition:.16s; }
.xf-tpl-chip:hover { border-color:var(--line-hi); transform:translateY(-1px); }
.xf-tpl-chip.on { border-color:transparent; background:linear-gradient(135deg,#7C8BFF,#FF3D81); color:#fff;
  box-shadow:0 10px 26px -14px rgba(255,61,129,.5); }
.xf-tpl-emoji { font-size:15px; line-height:1; }
.xf-gather-hint { font:13px/1.4 var(--sans); color:var(--dim); text-align:center; margin:-2px 0 4px; }

/* Host tooling on /my — verification card + attendance dashboard. */
.xf-verif { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; margin:0 0 16px;
  border-radius:14px; border:1px solid var(--line); background:var(--cta-bg); font:600 13.5px var(--sans); color:var(--dim); }
.xf-verif.on { border-color:transparent; background:linear-gradient(135deg,color-mix(in srgb,var(--live) 20%,transparent),transparent); color:var(--text); }
.xf-verif-badge { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%;
  background:var(--live); color:#08070d; font-weight:800; }
.xf-verif-ic { font-size:16px; }
.xf-verif-txt { flex:1; min-width:140px; }
.xf-verif-btn { margin-inline-start:auto; font:700 13px var(--sans); color:#fff; white-space:nowrap; cursor:pointer;
  padding:9px 15px; border-radius:10px; border:none; background:linear-gradient(135deg,#7C8BFF,#FF3D81); transition:.15s; }
.xf-verif-btn:hover:not(:disabled) { filter:brightness(1.06); }
.xf-verif-btn:disabled { opacity:.5; cursor:default; }

.xf-att { margin:0 0 20px; }
.xf-att-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.xf-att-stat { text-align:center; padding:12px 6px; border-radius:12px; border:1px solid var(--line); background:var(--cta-bg); }
.xf-att-stat b { display:block; font:800 22px var(--disp); color:var(--text); line-height:1; }
.xf-att-stat span { display:block; margin-top:4px; font:600 11px var(--sans); color:var(--dim); }
.xf-att-list { display:flex; flex-direction:column; gap:1px; border-radius:12px; overflow:hidden; border:1px solid var(--line); }
.xf-att-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:var(--card); }
.xf-att-t { font:600 13.5px var(--sans); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xf-att-n { font:700 13px var(--sans); color:var(--live); white-space:nowrap; }
.xf-att-n span { color:var(--dim); font-weight:500; }
@media (max-width:600px) { .xf-att-stats { grid-template-columns:repeat(2,1fr); } }
.xf-upv-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }

/* Organizer batch-attendance roster (Chat → past event). Tap a row to toggle show-up. */
.xf-att-lead { font:600 13.5px var(--sans); color:var(--dim); margin:2px 2px 12px; }
.xf-att-pick { display:flex; align-items:center; gap:12px; width:100%; text-align:start; cursor:pointer;
  padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--cta-bg); transition:.15s; }
.xf-att-pick+.xf-att-pick { margin-top:8px; }
.xf-att-pick:hover { border-color:var(--line-hi); }
.xf-att-pick.on { border-color:transparent; background:linear-gradient(135deg,color-mix(in srgb,var(--live) 22%,transparent),transparent); }
.xf-att-check { margin-inline-start:auto; width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#08070d;
  background:var(--live-empty,transparent); border:2px solid var(--line-hi); transition:.15s; }
.xf-att-pick.on .xf-att-check { background:var(--live); border-color:transparent; }

/* AI concierge — one-line draft-from-phrase on the create form. Gradient-framed row
   that reads as "magic input" without shouting; matches the tpl-chip.on palette. */
.xf-ai-magic { display:flex; gap:8px; margin:0 0 18px; padding:3px; border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,#7C8BFF 22%,transparent),color-mix(in srgb,#FF3D81 22%,transparent)); }
.xf-ai-input { margin-bottom:0 !important; border-color:transparent !important; }
.xf-ai-btn { flex:0 0 auto; font:700 14px var(--sans); color:#fff; white-space:nowrap; cursor:pointer;
  padding:0 18px; border-radius:11px; border:none; background:linear-gradient(135deg,#7C8BFF,#FF3D81);
  transition:.16s; }
.xf-ai-btn:hover:not(:disabled) { filter:brightness(1.06); }
.xf-ai-btn:disabled { opacity:.5; cursor:default; }

/* Post-create invite overlay — the viral moment. Celebratory modal that turns a fresh
   meetup into a Telegram share at peak organizer intent. */
.xf-share-back { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(4,3,10,.62); backdrop-filter:blur(3px); animation:xfFade .18s ease; }
.xf-share-card { width:100%; max-width:420px; text-align:center; border-radius:22px; padding:34px 28px 26px;
  background:var(--card); border:1px solid var(--line-hi); box-shadow:0 30px 80px -30px rgba(0,0,0,.6); }
.xf-share-emoji { font-size:46px; line-height:1; margin-bottom:10px; }
.xf-share-h { font:800 24px var(--disp); letter-spacing:-.02em; color:var(--text); margin:0 0 8px; }
.xf-share-sub { font:15px/1.5 var(--sans); color:var(--dim); margin:0 0 22px; }
.xf-share-actions { display:flex; flex-direction:column; gap:10px; }
.xf-share-tg { display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
  font:800 16px var(--sans); color:#fff; padding:15px; border-radius:13px; background:#2AABEE;
  transition:.15s; }
.xf-share-tg:hover { filter:brightness(1.05); transform:translateY(-1px); }
.xf-share-copy { font:700 15px var(--sans); color:var(--text); padding:14px; border-radius:13px;
  border:1px solid var(--line); background:var(--cta-bg); cursor:pointer; transition:.15s; }
.xf-share-copy:hover { border-color:var(--line-hi); }
.xf-share-toast { margin-top:12px; font:600 13px var(--sans); color:var(--live); }
.xf-share-links { margin-top:20px; display:flex; align-items:center; justify-content:center; gap:10px;
  font:600 13px var(--sans); }
.xf-share-links a { color:var(--dim); text-decoration:none; }
.xf-share-links a:hover { color:var(--accent); }
@keyframes xfFade { from { opacity:0; } to { opacity:1; } }
.xf-gather-lead { font:14px/1.45 var(--sans); color:var(--dim); margin:-14px 0 20px; }
/* Past-events archive: muted "было" pill + per-card repeat link. */
.xf-eta-past { background:rgba(10,11,16,.55) !important; color:#cfd3dd !important; }
.xf-card2-date { font:600 13px var(--sans); color:var(--dim); }
.xf-card2-interest { font:700 12.5px var(--sans); color:#FF6B35; margin-top:6px; }
/* Admin funnel table. */
.xf-funnel-t td:not(:first-child), .xf-funnel-t th:not(:first-child) { text-align:center; font-variant-numeric:tabular-nums; }
.xf-funnel-t tr.dim td { color:var(--dim); font-size:12px; }
.xf-funnel-t tr.sep td { border-top:2px solid var(--line-hi); }
.xf-arch-repeat { display:inline-block; margin-top:8px; font:700 12.5px var(--sans); color:#7C8BFF; text-decoration:none; }
.xf-arch-repeat:hover { text-decoration:underline; }
/* Follow-organizer button (event detail host card + user profile). */
.xf-follow-btn { width:100%; margin-top:10px; padding:10px 14px; border-radius:12px; font:700 13.5px var(--sans); cursor:pointer; transition:.16s; background:transparent; color:#7C8BFF; border:1.5px solid rgba(124,139,255,.5); }
.xf-follow-btn:hover { background:rgba(124,139,255,.08); border-color:#7C8BFF; }
.xf-follow-btn.on { background:var(--cta-bg); color:var(--dim); border-color:var(--line-hi); }
.xf-follow-btn:disabled { opacity:.6; cursor:default; }
/* Telegram share button — brand blue accent on the shared side-btn. */
.xf-side-btn.xf-tg-btn { color:#229ED9; border-color:rgba(34,158,217,.4); }
.xf-side-btn.xf-tg-btn:hover { color:#229ED9; border-color:#229ED9; background:rgba(34,158,217,.08); }
/* "Пришёл" reputation badge + attendance-confirm prompt. */
.xf-rep-badge { display:inline-block; margin-top:8px; font:700 12.5px var(--sans); color:var(--live);
  padding:5px 11px; border-radius:99px; background:color-mix(in srgb,var(--live) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--live) 35%,transparent); }
.xf-attended-done { font:600 13px var(--sans); color:var(--live); margin:6px 0 2px; }
.xf-attended-ask { display:flex; flex-direction:column; gap:8px; margin:8px 0; font:600 13.5px var(--sans); color:var(--text); }
/* Flare ("Рядом сейчас") — drop-a-signal CTA + quick form. */
.xf-flare-cta { width:auto; max-width:280px; margin:2px 0 18px; }
.xf-flare-form { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:22px; display:flex; flex-direction:column; gap:2px; max-width:640px; }
.xf-flare-form .xf-input { margin-bottom:10px; }
.xf-flare-note { font:12.5px var(--sans); color:var(--dim); margin-top:8px; text-align:center; }
.xf-latent { font:700 15px var(--sans); color:#FF6B35; margin:10px 0; }
/* Telegram login divider + widget container. */
.xf-auth-or { display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--faint); font:600 12px var(--sans); text-transform:uppercase; letter-spacing:.08em; }
.xf-auth-or::before, .xf-auth-or::after { content:""; flex:1; height:1px; background:var(--line); }
.xf-tg-login { display:flex; justify-content:center; min-height:44px; }
/* Safety-as-a-feature page + event-detail link. */
.xf-safety-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:22px 0; }
.xf-safety-card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; }
.xf-safety-ic { font-size:26px; margin-bottom:8px; }
.xf-safety-ct { font:700 15px var(--sans); color:var(--text); margin-bottom:6px; }
.xf-safety-cb { font:13.5px/1.5 var(--sans); color:var(--dim); }
.xf-safety-tips { margin:12px 0; padding-inline-start:20px; color:var(--text); font:14px/1.7 var(--sans); }
.xf-safety-tips li { margin-bottom:6px; }
.xf-safety-link { display:block; text-align:center; margin-top:10px; font:600 12.5px var(--sans); color:var(--dim); text-decoration:none; }
.xf-safety-link:hover { color:var(--text); }
.xf-prof-links { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 6px; }
.xf-prof-links a { font:600 13px var(--sans); padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--cta-bg); color:var(--text); text-decoration:none; transition:.16s; }
.xf-prof-links a:hover { border-color:var(--line-hi); }
.xf-intent-links { display:flex; gap:10px; flex-wrap:wrap; margin:26px 0 4px; }
.xf-intent-links a { font:600 13px var(--sans); padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--cta-bg); color:var(--text); text-decoration:none; transition:.16s; }
.xf-intent-links a:hover { border-color:var(--line-hi); }
.xf-empty-tpl { margin-top:26px; }
.xf-empty-tpl-lead { font:600 13px var(--sans); color:var(--dim); margin-bottom:12px; }
/* Breadcrumb up from a city page to its country hub. */
.xf-crumb { margin:0 0 10px; font:600 12.5px var(--sans); display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.xf-crumb a { color:var(--dim); text-decoration:none; }
.xf-crumb a:hover { color:var(--accent); }
.xf-crumb span { color:var(--faint); }
/* City page uses a single up-link; give it the ↑ affordance. */
.xf-crumb:not(:has(span)) a::before { content:"↑ "; }

/* Event count next to a city link on the country hub. */
.xf-city-n { opacity:.55; font-size:11.5px; margin-inline-start:4px; }

/* FAQ block (visible, paired with FAQPage schema). */
.xf-faq { max-width:720px; margin:34px auto 0; }
.xf-faq-h { font:800 20px var(--sans); letter-spacing:-.02em; margin:0 0 12px; color:var(--text); }
.xf-faq-item { border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:10px; background:var(--card); }
.xf-faq-item summary { font:700 14.5px var(--sans); color:var(--text); cursor:pointer; list-style:none; }
.xf-faq-item summary::-webkit-details-marker { display:none; }
.xf-faq-item summary::after { content:"+"; float:inline-end; color:var(--dim); font-weight:700; }
.xf-faq-item[open] summary::after { content:"−"; }
.xf-faq-a { font:400 14px var(--sans); line-height:1.6; color:var(--dim); margin-top:10px; }

/* City page falling back to its archive when nothing upcoming is scheduled there. */
.xf-past-note { margin:0 0 16px; padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); font:500 13px var(--sans); color:var(--dim); }

/* Feed paging ("Показать ещё") + crawlable pager on the SEO pages. */
.xf-more { display:flex; flex-direction:column; align-items:center; gap:8px; margin:26px 0 6px; }
.xf-more-btn { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:12px;
  padding:12px 28px; font:700 14px var(--sans); cursor:pointer; }
.xf-more-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.xf-more-btn:disabled { opacity:.6; cursor:default; }
.xf-more-count { font:500 12.5px var(--sans); color:var(--dim); }
.xf-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin:26px 0 6px; }
.xf-pager a { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:12px;
  padding:10px 20px; font:700 13.5px var(--sans); text-decoration:none; }
.xf-pager a:hover { border-color:var(--accent); color:var(--accent); }
.xf-pager-pos { font:500 12.5px var(--sans); color:var(--dim); }

.xf-empty-tg { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); max-width:340px;
  font:500 13px var(--sans); color:var(--dim); line-height:1.5; }
.xf-empty-tg a { color:var(--accent); font-weight:700; text-decoration:none; margin-inline-start:6px; white-space:nowrap; }
.xf-empty-tg a:hover { text-decoration:underline; }
.xf-empty-tpl .xf-tpl-chips { justify-content:center; }
.xf-empty-tpl .xf-tpl-chip { text-decoration:none; }

/* recurrence: create block + card badge */
.xf-recur { display:flex; flex-direction:column; margin-top:2px; padding:12px; border:1px solid var(--line);
  border-radius:14px; background:var(--pill); }
.xf-chip-recur { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.xf-series-h { font:700 15px var(--sans); color:var(--text); margin:22px 0 10px; }

/* ---------- FAB ---------- */
.xf-fab { position:fixed; inset-inline-end:max(18px,calc(50vw - 244px)); bottom:20px; z-index:7;
  font:700 14px var(--sans); color:var(--fab-text); background:var(--text); border:0; border-radius:14px;
  padding:14px 20px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.5); }
.xf-fab .px, .xf-sidecreate .px { font-family:var(--mono); background:var(--foil); -webkit-background-clip:text;
  background-clip:text; color:transparent; font-size:17px; }
.xf-fab:focus-visible, .xf-sidecreate:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- footer ---------- */
.xf-foot { position:relative; z-index:1; border-top:1px solid var(--line); background:var(--panel); }
.xf-foot-in { box-sizing:border-box; width:100%; max-width:1200px; margin:0 auto; padding:34px 20px 40px;
  display:flex; flex-wrap:wrap; gap:26px 40px; align-items:flex-start; justify-content:space-between; }
.xf-foot-tag { font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--faint); text-transform:uppercase; }
.xf-foot-links { display:flex; flex-wrap:wrap; gap:8px 22px; }
.xf-foot-links a { font-size:13px; font-weight:500; color:var(--dim); text-decoration:none; transition:.2s; }
.xf-foot-links a:hover { color:var(--text); }
.xf-foot-copy { font-family:var(--mono); font-size:11px; color:var(--faint); direction:ltr; }

/* ---------- desktop ---------- */
@media (min-width:960px) {
  /* Header location pill was removed (Home now uses the shared SiteHeader); the
     city selector lives in the feed toolbar on every breakpoint. */
  .xf-mloc { display:flex !important; }
  .xf-shell { max-width:1200px; flex-direction:row; align-items:flex-start; gap:30px; padding:30px 30px 60px; }
  .xf-side { position:sticky; top:84px; width:268px; flex:none; gap:18px; background:var(--panel);
    border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 1px 0 var(--inset-hi) inset; }
  .xf-filters { flex-direction:column; overflow:visible; }
  .xf-filters button, .xf-filters a { width:100%; text-align:start; }
  .xf-sidecreate { display:flex !important; width:100%; justify-content:center; align-items:center; gap:9px;
    font:700 14.5px var(--sans); color:var(--fab-text); background:var(--text); border:0; border-radius:13px;
    padding:14px; cursor:pointer; margin-top:auto; text-decoration:none; }
  .xf-feed-wrap { flex:1; min-width:0; }
  .xf-feed { align-content:start; }
  .xf-fab { display:none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .xf-logo-x span { animation:none !important; }
  .xf-card.joining .xf-cta .foil { animation:none !important; opacity:0 !important; }
  .xf-card.joining .xf-cta { color:var(--text) !important; }
}

/* ---------- feed states (loading / empty) ---------- */
.xf-feed-wrap { min-width:0; }
.xf-state { padding:64px 20px; text-align:center; color:var(--dim); font-family:var(--mono); font-size:13px; }
.xf-empty { padding:72px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.xf-empty-t { font-size:22px; font-weight:700; color:var(--text); letter-spacing:-.02em; }
.xf-empty-b { font-size:14px; color:var(--dim); max-width:320px; line-height:1.5; }
.xf-empty-cta { margin-top:14px; display:inline-flex; align-items:center; gap:9px; font:700 14.5px var(--sans);
  color:var(--fab-text); background:var(--text); border:0; border-radius:13px; padding:13px 22px; cursor:pointer; text-decoration:none; }
.xf-empty-cta .px { font-family:var(--mono); background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:16px; }
.xf-empty-cta:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- auth ---------- */
.xf-auth-wrap { position:relative; z-index:1; min-height:100vh; display:grid; place-items:center; padding:24px; }
.xf-auth-card { width:100%; max-width:380px; box-sizing:border-box; background:linear-gradient(180deg,var(--surf-a),var(--surf-b));
  border:1px solid var(--line); border-radius:22px; padding:30px 26px; box-shadow:0 1px 0 var(--inset-hi) inset, var(--card-shadow);
  display:flex; flex-direction:column; }
.xf-auth-title { font-weight:800; font-size:24px; letter-spacing:-.02em; text-align:center; margin:12px 0 4px; color:var(--text); }
.xf-auth-sub { font-size:13.5px; color:var(--dim); text-align:center; margin:0 0 20px; line-height:1.45; }
.xf-input { width:100%; box-sizing:border-box; font:500 15px var(--sans); color:var(--text); background:var(--cta-bg);
  border:1px solid var(--line-hi); border-radius:13px; padding:14px 15px; outline:none; transition:.2s; margin-bottom:10px; }
.xf-input::placeholder { color:var(--faint); }
.xf-input:focus { border-color:color-mix(in srgb,var(--accent) 60%,transparent); background:var(--cta-bg-h); }
.xf-code { font-family:var(--mono); letter-spacing:.3em; text-align:center; font-size:20px; }
html[dir="rtl"] .xf-code { letter-spacing:.3em; direction:ltr; }
.xf-auth-btn { width:100%; font:800 15px var(--sans); color:#fff; background:linear-gradient(135deg,#7C8BFF,#FF3D81); border:0;
  border-radius:99px; padding:15px; cursor:pointer; transition:.2s; margin-top:4px;
  box-shadow:0 14px 38px -14px rgba(255,61,129,.55); }
.xf-auth-btn:hover:not(:disabled) { filter:brightness(1.07); transform:translateY(-1px); }
.xf-auth-btn:disabled { opacity:.5; cursor:default; }
.xf-auth-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.xf-auth-back { background:none; border:0; color:var(--dim); font-size:13px; cursor:pointer; padding:12px; margin-top:2px; }
.xf-auth-back:hover { color:var(--text); }
.xf-auth-sent { font-size:13px; color:var(--accent); text-align:center; margin-bottom:12px; }
.xf-auth-err { font-size:13px; color:#ff6b7a; text-align:center; margin-top:12px; }
.xf-auth-dev { font-family:var(--mono); font-size:12px; color:var(--faint); text-align:center; margin-top:12px; }
.xf-authbtn { font:600 12.5px var(--sans); color:var(--text); background:var(--cta-bg); border:1px solid var(--line-hi);
  border-radius:9px; padding:7px 13px; cursor:pointer; transition:.2s; text-decoration:none; white-space:nowrap; }
.xf-authbtn:hover { background:var(--cta-bg-h); }
.xf-authbtn.accent { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.xf-authbtn.danger-btn { color:#ff6b7a; }
.xf-authbtn.danger-btn:hover { background:color-mix(in srgb,#ff6b7a 14%,transparent); }

/* ---------- profile ---------- */
.xf-logo-link { text-decoration:none; }
/* Form/list pages (Create, Profile, My events) share the 1200px content frame of
   the feed/header so every desktop screen lines up. Fields lay out as a 2-column
   grid so they fill the width as paired columns rather than stretched single rows. */
.xf-profile-card { max-width:1200px; }
.xf-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin:2px 0 18px; align-items:start; }
.xf-form-grid > .xf-field-row { display:contents; }
.xf-form-grid > .xf-fw { grid-column:1 / -1; }
@media (max-width:720px) { .xf-form-grid { grid-template-columns:1fr; } }
.xf-profile-head { display:flex; align-items:center; gap:14px; margin-bottom:4px; }
.xf-avatar-lg { width:56px; height:56px; border-radius:50%; flex:none; overflow:hidden; display:grid; place-items:center;
  font-weight:700; font-size:22px; color:#fff; background:linear-gradient(135deg,#525870,#2c3040); border:1px solid var(--line-hi); }
.xf-avatar-lg img { width:100%; height:100%; object-fit:cover; }
.xf-profile-title { font-weight:800; font-size:22px; letter-spacing:-.02em; margin:0; color:var(--text); }
.xf-profile-email { font-family:var(--mono); font-size:12px; color:var(--faint); direction:ltr; margin-top:2px; }
.xf-profile-nudge { font-size:13px; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:11px; padding:11px 13px; margin:14px 0 2px; line-height:1.4; }
.xf-field { display:flex; flex-direction:column; gap:5px; margin-top:12px; }
.xf-field > span { font-size:12px; font-weight:600; color:var(--dim); margin-inline-start:3px; }
.xf-field .xf-input { margin-bottom:0; }
.xf-field-row { display:flex; gap:12px; }
.xf-field-row .xf-field { flex:1; min-width:0; }
.xf-select { cursor:pointer; appearance:none; -webkit-appearance:none; color:var(--text); background:var(--cta-bg); }
/* Native dropdown option list is OS-rendered white-on-white in the dark theme —
   force readable colours matching the current theme. */
.xf-select option { background:var(--panel); color:var(--text); }

/* Feed CTA bottom-alignment: joinable cards already push .xf-dens (+cta) to the bottom
   via margin-top:auto. Imported cards have only the CTA, so it must push itself down —
   otherwise its button sits higher than user-card buttons (mismatched heights). The
   +cta reset avoids a double push on joinable cards. */
.xf-cbody > .xf-cta { margin-top:auto; }
.xf-dens + .xf-cta { margin-top:0; }
.xf-textarea { resize:vertical; font-family:var(--sans); line-height:1.45; }
.xf-profile-card .xf-auth-btn { margin-top:20px; }
.xf-profile-photo-soon { text-align:center; font-size:12px; color:var(--faint); margin-top:12px; }

/* ---------- toast ---------- */
.xf-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:50; display:flex; align-items:center;
  gap:14px; background:var(--surf-a); color:var(--text); border:1px solid var(--line-hi); border-radius:13px;
  padding:12px 18px; box-shadow:var(--card-shadow); font-size:14px; font-weight:500; max-width:calc(100vw - 32px);
  animation:xfToastIn .25s ease; }
.xf-toast-link { color:var(--accent); font-weight:700; text-decoration:none; white-space:nowrap; }
.xf-toast-link:hover { text-decoration:underline; }
@keyframes xfToastIn { from { opacity:0; transform:translate(-50%,10px); } to { opacity:1; transform:translate(-50%,0); } }

/* ---------- chat ---------- */
.xf-chat-root { display:flex; flex-direction:column; height:100vh; }
.xf-chat-title { display:flex; flex-direction:column; margin-inline-start:6px; min-width:0; }
.xf-chat-ev { font-weight:700; font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xf-chat-sub { font-size:12px; color:var(--dim); }
.xf-chat-wrap { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; width:100%; max-width:720px; margin:0 auto; min-height:0; }
.xf-msgs { flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:8px; }
.xf-msg { display:flex; flex-direction:column; align-items:flex-start; max-width:78%; }
.xf-msg.mine { align-self:flex-end; align-items:flex-end; }
.xf-bubble { background:var(--surf-a); border:1px solid var(--line); border-radius:15px; padding:9px 13px;
  font-size:14.5px; line-height:1.35; color:var(--text); word-break:break-word; }
.xf-msg.mine .xf-bubble { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.xf-msg-time { display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:10px; color:var(--faint); margin:2px 6px 0; direction:ltr; }
.xf-msg-report { background:none; border:0; cursor:pointer; font-size:11px; line-height:1; color:var(--faint); padding:0 2px; opacity:.45; transition:.15s; }
.xf-msg-report:hover { opacity:1; color:#ff6b7a; }
.xf-msg-report.done { color:#ff6b7a; opacity:.9; cursor:default; }
.xf-composer { display:flex; gap:9px; padding:12px 16px; border-top:1px solid var(--line); background:var(--panel); }
.xf-composer .xf-input { margin-bottom:0; }
.xf-send { flex:none; font:700 14px var(--sans); color:var(--on-accent); background:var(--accent); border:0;
  border-radius:13px; padding:0 20px; cursor:pointer; transition:.2s; }
.xf-send:disabled { opacity:.5; cursor:default; }
.xf-orgtabs { display:flex; gap:6px; padding:12px 16px 2px; }
.xf-orgtab { font:600 13px var(--sans); color:var(--dim); background:var(--cta-bg); border:1px solid var(--line);
  border-radius:99px; padding:7px 15px; cursor:pointer; transition:.15s; }
.xf-orgtab.on { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.xf-inbox { display:flex; flex-direction:column; padding:8px; overflow-y:auto; }
.xf-inbox-row { display:flex; align-items:center; gap:12px; padding:12px 14px; background:none; border:0; border-radius:13px;
  cursor:pointer; text-align:start; transition:.15s; }
.xf-inbox-row:hover { background:var(--cta-bg); }
.xf-inbox-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
.xf-inbox-name { font-weight:600; font-size:14.5px; color:var(--text); }
.xf-inbox-prev { font-size:13px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }

/* ---------- my events ---------- */
.xf-mine-row { display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:13px; margin-top:6px; }
.xf-mine-main { display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-decoration:none; padding:4px 2px; border-radius:11px; transition:.15s; }
.xf-mine-main:hover { background:var(--cta-bg); }
.xf-mine-actions { display:flex; gap:6px; flex:none; }
.xf-mine-act { font-size:12px; font-weight:600; color:var(--dim); background:var(--cta-bg); border:1px solid var(--line);
  border-radius:9px; padding:6px 10px; cursor:pointer; text-decoration:none; white-space:nowrap; transition:.15s; }
.xf-mine-act:hover { color:var(--text); }
.xf-mine-act.danger { color:#ff6b7a; }
.xf-mine-cover { width:42px; height:42px; border-radius:11px; flex:none; }
.xf-mine-body { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.xf-mine-title { font-weight:600; font-size:14.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xf-mine-meta { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--dim); flex-wrap:wrap; }
.xf-mine-status { font-weight:600; }
.xf-mine-status.status-0 { color:var(--accent); }
.xf-mine-status.status-1 { color:#e0a030; }
.xf-mine-status.status-2 { color:#ff6b7a; }
.xf-mine-status.status-3 { color:var(--faint); }
.xf-mine-dens, .xf-mine-eta { font-family:var(--mono); color:var(--faint); direction:ltr; }
.xf-mine-inbox { flex:none; font-size:12.5px; font-weight:600; color:var(--accent); white-space:nowrap; }

/* ---------- user profile view ---------- */
.xf-upv-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.xf-upv-ava { width:76px; height:76px; font-size:28px; margin-bottom:4px; }
.xf-upv-head .xf-profile-title { margin:0; }
.xf-upv-meta { display:flex; gap:5px; font-size:13.5px; color:var(--dim); flex-wrap:wrap; justify-content:center; }
.xf-upv-about { font-size:14px; color:var(--text); line-height:1.5; margin:16px 0 0; white-space:pre-line; word-break:break-word; }

/* organizer's upcoming events on the /u/{id} profile */
.xf-upv-events { margin-top:22px; text-align:start; }
.xf-upv-events-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.xf-upv-event { display:flex; flex-direction:column; gap:3px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; text-decoration:none; transition:border-color .18s, background .18s; }
.xf-upv-event:hover { border-color:var(--line-hi); background:var(--cta-bg); }
.xf-upv-event-t { font:600 15px var(--sans); color:var(--text); }
.xf-upv-event-m { font:600 12px var(--sans); color:var(--muted); }

.xf-upv-actions { display:flex; gap:10px; margin-top:22px; }
.xf-upv-actions .xf-authbtn { flex:1; text-align:center; padding:11px; }
.xf-report { margin-top:14px; padding:14px; background:var(--cta-bg); border-radius:13px; }
.xf-report-q { font-size:13px; color:var(--dim); margin-bottom:10px; }
.xf-report-reasons { display:flex; flex-wrap:wrap; gap:8px; }
.xf-ava-link { text-decoration:none; flex:none; }
/* ---------- onboarding ---------- */
.xf-onb-sub { text-align:center; font-size:14px; color:var(--dim); margin:2px 0 20px; }
.xf-onb-warn { font-size:12.5px; color:#ff6b7a; margin:-6px 0 10px; }

/* ---------- crash / error boundary ---------- */
.xf-crash { position:relative; z-index:1; max-width:420px; margin:0 auto; padding:80px 24px; text-align:center; }
.xf-crash-emoji { font-size:44px; margin-bottom:14px; }
.xf-crash-t { font:800 22px var(--sans); color:var(--text); margin-bottom:8px; }
.xf-crash-b { font-size:14.5px; color:var(--dim); line-height:1.5; margin-bottom:22px; }

/* ---------- legal pages ---------- */
.xf-legal { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:24px 20px 70px; color:var(--text); }
.xf-legal-draft { background:color-mix(in srgb,#e0a030 16%,transparent); border:1px solid #e0a030; padding:10px 14px; border-radius:12px; font-size:13px; margin-bottom:22px; }
.xf-legal h1 { font:800 26px var(--sans); letter-spacing:-.02em; margin:0 0 4px; }
.xf-legal-upd { font-size:13px; color:var(--dim); margin:0 0 22px; }
.xf-legal h2 { font:700 17px var(--sans); margin:26px 0 8px; }
.xf-legal p, .xf-legal li { font-size:14.5px; line-height:1.6; }
.xf-legal ul { padding-inline-start:22px; margin:8px 0; }
.xf-legal li { margin:5px 0; }
.xf-legal a { color:var(--accent); }
.xf-legal-foot { margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }

.xf-title-link { color:inherit; text-decoration:none; }
.xf-title-link:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
.xf-who { font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; }

/* ---------- location picker ---------- */
/* Location control in the header - visible on every page. */
.xf-hloc { display:flex; align-items:center; gap:7px; margin-inline-start:14px; padding:6px 10px;
  border-radius:10px; color:var(--dim); white-space:nowrap; }
.xf-hloc:hover { background:var(--cta-bg); color:var(--text); }
.xf-hloc .xf-loc-city { color:inherit; font-size:12px; }
@media (max-width:640px) { .xf-hloc { margin-inline-start:6px; padding:6px; } }

.xf-hloc, .xf-mloc { background:none; border:0; cursor:pointer; font:inherit; }
.xf-hloc:hover .xf-loc-city, .xf-mloc:hover .xf-loc-city { text-decoration:underline; text-underline-offset:2px; }
.xf-locpick-back { position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:70px 16px; }
.xf-locpick { background:var(--panel); border:1px solid var(--line); border-radius:18px; width:100%; max-width:380px; max-height:70vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.xf-locpick-h { font:700 15px var(--sans); color:var(--text); padding:16px 18px 10px; }
.xf-locpick-list { overflow-y:auto; padding:0 8px 10px; }
.xf-locpick-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:none; border:0; cursor:pointer; text-align:start; padding:11px 12px; border-radius:11px; font:600 14px var(--sans); color:var(--text); transition:.12s; }
.xf-locpick-row:hover { background:var(--cta-bg); }
.xf-locpick-row.on { background:var(--accent); color:var(--on-accent); }
.xf-locpick-c { font-family:var(--mono); font-size:12px; opacity:.6; flex:none; }
.xf-locpick-country { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); padding:14px 12px 4px; }
.xf-locpick-city { padding-inline-start:22px; }
/* Two-level picker: header with a back arrow, plus a filter box above the list. */
.xf-locpick-h { display:flex; align-items:center; gap:8px; }
.xf-locpick-back-btn { background:none; border:0; cursor:pointer; color:var(--dim); font-size:17px;
  line-height:1; padding:2px 6px; border-radius:8px; }
.xf-locpick-back-btn:hover { color:var(--text); background:var(--cta-bg); }
.xf-locpick-search { margin:0 18px 10px; padding:10px 12px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--text); font:500 14px var(--sans); outline:none; }
.xf-locpick-search:focus { border-color:var(--accent); }
.xf-locpick-state { padding:14px 12px; font:500 13px var(--sans); color:var(--dim); }
.xf-detail-hostinfo { display:flex; flex-direction:column; gap:2px; min-width:0; }
.xf-detail-hostname { font-size:14px; font-weight:600; color:var(--text); }

/* ---------- event detail ---------- */
.xf-detail-wrap { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:20px 16px 40px; }
.xf-detail-grid { display:grid; grid-template-columns:1fr; gap:20px; align-items:start; }
.xf-detail-main { background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; padding:0 0 6px; }
.xf-detail-cover { height:200px; display:flex; align-items:flex-end; padding:16px 18px; }
.xf-detail-cat { font:700 12px var(--sans); letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.28); padding:5px 11px; border-radius:99px; }
.xf-detail-title { font:800 26px var(--sans); letter-spacing:-.02em; color:var(--text); margin:18px 18px 14px; line-height:1.2; }
.xf-past-banner { margin:0 18px 14px; padding:11px 14px; border-radius:12px; background:color-mix(in srgb, var(--accent) 9%, transparent); border:1px solid color-mix(in srgb, var(--accent) 26%, transparent); display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.xf-past-txt { color:var(--muted); font:600 13px var(--sans); }
.xf-past-cta { color:var(--accent); font:700 13px var(--sans); text-decoration:none; white-space:nowrap; }
.xf-past-cta:hover { text-decoration:underline; }
.xf-similar { max-width:1200px; margin:30px auto 0; }
.xf-similar-h { font:800 18px var(--sans); color:var(--text); margin:0 14px 14px; }
/* IMPL-9 canon: auto-fill minmax, no media queries, RTL mirrors via grid. The min is
   max(200px, (row - 3 gaps)/4) so a 5th column can NEVER fit (5 tracks always overflow),
   while below the 4-col width the 200px floor takes over → natural 3 / 2 / 1 degradation. */
.xf-similar-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(max(200px, calc((100% - 42px) / 4)), 1fr)); gap:14px; padding:0 10px; }
.xf-similar-card { display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:var(--card); border:1px solid var(--line); text-decoration:none; transition:transform .12s ease, border-color .12s ease; }
.xf-similar-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
.xf-similar-cover { height:96px; }
.xf-similar-body { padding:10px 12px 12px; }
.xf-similar-title { font:700 14px var(--sans); color:var(--text); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.xf-similar-meta { font:600 12px var(--sans); color:var(--muted); margin-top:6px; }
.xf-danger { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.xf-danger-link { background:none; border:none; color:var(--muted); font:600 13px var(--sans); text-decoration:underline; cursor:pointer; padding:4px 0; }
.xf-danger-link:hover { color:#e5484d; }
.xf-danger-warn { color:#e5484d; font:600 13px var(--sans); line-height:1.4; }
.xf-danger-btn { background:#e5484d; color:#fff; border:none; border-radius:10px; padding:10px 16px; font:700 14px var(--sans); cursor:pointer; }
.xf-danger-btn:disabled { opacity:.6; cursor:default; }
.xf-cookie { position:fixed; left:12px; right:12px; bottom:12px; z-index:900; max-width:640px; margin:0 auto; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:14px; background:var(--card); border:1px solid var(--line); box-shadow:0 8px 30px rgba(0,0,0,.3); font:600 13px var(--sans); color:var(--text); }
/* FIX-J: while the fixed cookie bar is up, reserve space at the page bottom so nothing
   (esp. the create-form "Создать" submit) sits under it and loses its clicks. Generous on
   narrow screens where the bar wraps to two lines. Dropped the moment the notice is accepted. */
body.has-cookiebar .xf-root { padding-bottom: 120px; }
@media (min-width: 700px) { body.has-cookiebar .xf-root { padding-bottom: 88px; } }
.xf-cookie a { color:var(--accent); text-decoration:none; }
.xf-cookie a:hover { text-decoration:underline; }
.xf-cookie button { margin-inline-start:auto; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:8px 16px; font:700 13px var(--sans); cursor:pointer; white-space:nowrap; }

/* Telegram join card - bottom corner, slides in once after engagement (js/app.js).
   Sits above the cookie notice when that one is still up (.above-cookie). */
/* Pinned to the physical RIGHT in BOTH directions (not inset-inline-end): the
   SlaTech chat widget is hard-anchored bottom-left regardless of dir, and in RTL an
   inline-end card lands on top of it - its open window covers the card completely. */
.xf-tgjoin { position:fixed; z-index:901; right:16px; bottom:16px; width:min(340px,calc(100vw - 24px));
  display:flex; flex-wrap:wrap; align-items:center; gap:11px; padding:16px 16px 14px; border-radius:16px;
  background:var(--card); border:1px solid var(--line); box-shadow:0 12px 40px rgba(0,0,0,.38);
  opacity:0; transform:translateY(14px); transition:opacity .32s ease, transform .32s ease; }
.xf-tgjoin.in { opacity:1; transform:none; }
.xf-tgjoin.above-cookie { bottom:88px; }
.xf-tgjoin-ic { flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-size:17px; color:#fff; background:var(--foil); background-size:200% auto; }
.xf-tgjoin-tx { flex:1; min-width:0; }
.xf-tgjoin-t { font:800 14px var(--sans); letter-spacing:-.01em; color:var(--text); }
.xf-tgjoin-b { font:500 12.5px var(--sans); line-height:1.45; color:var(--dim); margin-top:2px; }
.xf-tgjoin-cta { flex-basis:100%; text-align:center; background:var(--accent); color:#fff; border-radius:11px;
  padding:10px 16px; font:700 13.5px var(--sans); text-decoration:none; }
.xf-tgjoin-cta:hover { filter:brightness(1.08); }
.xf-tgjoin-x { position:absolute; top:7px; inset-inline-end:9px; background:none; border:none; padding:4px;
  line-height:1; font-size:12px; color:var(--dim); cursor:pointer; }
.xf-tgjoin-x:hover { color:var(--text); }
@media (prefers-reduced-motion: reduce) { .xf-tgjoin { transition:none; transform:none; } }
.xf-admin { max-width:1200px; margin:0 auto; padding:20px 16px 60px; }
.xf-admin-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.xf-admin-head h1 { font:800 22px var(--sans); color:var(--text); }
.xf-admin-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.xf-admin-tab { background:none; border:1px solid var(--line); border-radius:8px; padding:6px 14px; font:600 13px var(--sans); color:var(--muted); cursor:pointer; }
.xf-admin-tab.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.xf-admin h3 { font:700 15px var(--sans); color:var(--text); margin:18px 0 8px; }
.xf-admin-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:8px; }
.xf-admin-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; font:600 12px var(--sans); color:var(--muted); }
.xf-admin-card span { font:800 26px var(--sans); color:var(--text); }
.xf-admin-bars { display:flex; gap:12px; align-items:flex-end; margin:8px 0 12px; }
.xf-admin-bar { display:flex; flex-direction:column; align-items:center; gap:4px; }
.xf-admin-bar-pair { display:flex; gap:3px; align-items:flex-end; height:64px; }
.xf-admin-bar-e, .xf-admin-bar-j { width:12px; border-radius:3px 3px 0 0; min-height:2px; }
.xf-admin-bar-e { background:var(--accent); }
.xf-admin-bar-j { background:#33c9a3; }
.xf-admin-bar span { font:600 10px var(--mono); color:var(--muted); }
.xf-admin-tbl { width:100%; border-collapse:collapse; font:500 13px var(--sans); color:var(--text); margin-bottom:12px; }
.xf-admin-tbl th { text-align:left; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); }
.xf-admin-tbl td { padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.xf-admin-tbl tr.banned { opacity:.5; }
.xf-admin-note { max-width:200px; color:var(--muted); font-size:12px; }
.xf-admin-a { background:var(--card); border:1px solid var(--line); border-radius:7px; padding:4px 10px; font:600 12px var(--sans); color:var(--text); cursor:pointer; margin:0 3px 3px 0; }
.xf-admin-a.danger { color:#e5484d; border-color:color-mix(in srgb,#e5484d 40%,var(--line)); }
.xf-admin-search { display:flex; gap:8px; margin-bottom:14px; max-width:420px; }
.xf-admin-check { display:block; margin-bottom:12px; font:600 13px var(--sans); color:var(--muted); }
.xf-skel { pointer-events:none; overflow:hidden; }
.xf-skel-cover { height:150px; }
.xf-skel-body { padding:12px 14px 16px; display:flex; flex-direction:column; gap:9px; }
.xf-skel-line { height:12px; border-radius:6px; }
.xf-skel-line.w70 { width:70%; } .xf-skel-line.w40 { width:40%; } .xf-skel-line.w90 { width:90%; }
.xf-skel-cover, .xf-skel-line { background:linear-gradient(90deg, color-mix(in srgb, var(--muted) 10%, var(--card)) 25%, color-mix(in srgb, var(--muted) 22%, var(--card)) 37%, color-mix(in srgb, var(--muted) 10%, var(--card)) 63%); background-size:400% 100%; animation:xf-shimmer 1.4s ease infinite; }
@keyframes xf-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
.xf-detail-facts { margin:0 18px 16px; display:flex; flex-direction:column; gap:9px; }
.xf-fact { display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text); flex-wrap:wrap; }
.xf-fact-i { font-size:15px; opacity:.85; flex:none; }
.xf-fact-link { font-size:13px; color:var(--accent); text-decoration:none; margin-inline-start:4px; }
.xf-fact-link:hover { text-decoration:underline; }
/* UI-2: pre-line preserves source line breaks but collapses stray multi-space runs from
   imports (pre-wrap kept them). Escaping intact — the text is rendered as text, never HTML
   (no MarkupString), so untrusted afisha/user descriptions cannot inject. */
.xf-detail-desc { font-size:14.5px; line-height:1.6; color:var(--text); margin:0 18px 18px; white-space:pre-line; word-break:break-word; }
.xf-detail-host { display:flex; align-items:center; gap:12px; margin:16px 18px 6px; padding:14px; border:1px solid var(--line);
  border-radius:16px; background:var(--panel); text-decoration:none; transition:border-color .18s; }
.xf-detail-host:hover { border-color:var(--line-hi); }
.xf-detail-host .xf-ava { width:44px; height:44px; font-size:17px; flex:none; }
.xf-detail-hostsub { font:600 13px var(--sans); color:var(--accent); }
.xf-detail-seek { font-size:13px; color:var(--dim); }
.xf-detail-dens { margin:0 0 14px; }
.xf-detail-side { }
.xf-detail-sidecard { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:18px; }
.xf-detail-sidecard .xf-cta { width:100%; margin:0; }
/* Secondary "source" link needs a gap from the primary CTA above it - the generic
   .xf-cta-ghost margin loses to the more specific .xf-detail-sidecard .xf-cta { margin:0 }
   above, so re-assert it here (matches the 10px spacing of the sibling side buttons). */
.xf-detail-sidecard .xf-cta-ghost { margin-top:10px; }
/* "Собрать компанию": same shape as the other side buttons, only brand-accented
   text/border — keeps the sidecard to two styles (gradient primary + side btns). */
.xf-side-btn.xf-side-accent { color:#7C8BFF; border-color:rgba(124,139,255,.5); }
.xf-side-btn.xf-side-accent:hover { color:#7C8BFF; border-color:#7C8BFF; background:rgba(124,139,255,.08); }
.xf-detail-sidecard .xf-invite { width:100%; margin:10px 0 0; }
.xf-side-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:11px; margin:10px 0 0; background:var(--cta-bg); border:1px solid var(--line-hi); border-radius:13px; font:700 14px var(--sans); color:var(--text); text-decoration:none; box-sizing:border-box; transition:.2s; }
.xf-side-btn:hover { border-color:var(--accent); color:var(--accent); }
.xf-detail-toast { margin:10px 0 0; padding:11px 14px; background:var(--cta-bg); border:1px solid var(--line); border-radius:12px; font-size:13.5px; color:var(--text); text-align:center; }
@media (min-width:860px) {
  .xf-detail-grid { grid-template-columns:1fr 330px; }
  .xf-detail-side { position:sticky; top:84px; }
  .xf-detail-cover { height:240px; }
}
/* ---------- shared footer ---------- */
.xf-footer { border-top:1px solid var(--line); margin-top:40px; padding:24px 16px; }
.xf-footer-in { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px; justify-content:space-between; }
.xf-footer-brand { font-size:13px; color:var(--dim); font-weight:600; }
.xf-footer-links { display:flex; gap:16px; }
.xf-footer-links a { font-size:13px; color:var(--faint); text-decoration:none; }
.xf-footer-links a:hover { color:var(--accent); }
.xf-footer-copy { font-size:12px; color:var(--faint); }
/* ---------- going list + Q&A + consent + countdown ---------- */
.xf-side-countdown { font:700 14px var(--mono); color:var(--live); text-align:center; margin-bottom:12px; }
.xf-consent { display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--dim); margin-bottom:10px; cursor:pointer; line-height:1.4; }
.xf-consent input { margin-top:2px; flex:none; }
.xf-going { margin:0 18px 16px; padding-top:14px; border-top:1px solid var(--line); }
.xf-going-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.xf-going-avatars { display:flex; flex-wrap:wrap; gap:6px; }
.xf-going-ava { width:34px; height:34px; border-radius:50%; background:var(--cta-bg); border:1px solid var(--line-hi); display:flex; align-items:center; justify-content:center; font:700 13px var(--sans); color:var(--text); }
.xf-going-more { min-width:34px; height:34px; padding:0 8px; border-radius:17px; background:var(--cta-bg); display:flex; align-items:center; justify-content:center; font:600 12px var(--sans); color:var(--dim); }
.xf-qa { margin:0 18px; padding-top:16px; border-top:1px solid var(--line); }
.xf-qa-h { font:700 15px var(--sans); color:var(--text); margin-bottom:12px; }
.xf-q { padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; }
.xf-q.priv { border-style:dashed; }
.xf-q-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.xf-q-who { font-size:12.5px; font-weight:700; color:var(--dim); }
.xf-q-del { background:none; border:0; color:var(--faint); cursor:pointer; font-size:13px; }
.xf-q-del:hover { color:#ef4444; }
.xf-q-text { font-size:14px; color:var(--text); line-height:1.5; word-break:break-word; }
.xf-q-answer { margin-top:8px; padding:8px 10px; background:var(--cta-bg); border-radius:9px; font-size:13.5px; color:var(--text); }
.xf-q-answerbtn { margin-top:8px; background:none; border:1px solid var(--line-hi); border-radius:9px; padding:5px 12px; font-size:12.5px; color:var(--accent); cursor:pointer; }
.xf-q-answerbox { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.xf-qa textarea { width:100%; box-sizing:border-box; background:var(--cta-bg); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font:14px var(--sans); color:var(--text); resize:vertical; }
.xf-q-send, .xf-qa-send { align-self:flex-start; background:var(--accent); color:var(--on-accent); border:0; border-radius:9px; padding:7px 16px; font:700 13px var(--sans); cursor:pointer; }
.xf-qa-send:disabled { opacity:.5; cursor:default; }
.xf-qa-ask { margin-top:14px; }
.xf-qa-ask-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; flex-wrap:wrap; }
.xf-qa-vis { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); cursor:pointer; }
.xf-qa-note { font-size:12px; color:var(--faint); }
.xf-qa-msg { margin-top:8px; font-size:13px; color:#ef4444; }
.xf-priv-toggles { display:flex; flex-direction:column; gap:11px; margin:2px 0; padding:14px; background:var(--cta-bg); border:1px solid var(--line); border-radius:14px; }
.xf-toggle { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--text); cursor:pointer; line-height:1.4; }
.xf-toggle input { margin-top:2px; flex:none; }
/* Sub-hint under a toggle (e.g. the approval-mode explainer). Indented past the checkbox. */
.xf-toggle-hint { font:12px/1.45 var(--sans); color:var(--dim); margin:-5px 0 3px; padding-inline-start:26px; }
/* Approval-mode organizer request queue (Chat roster tab). */
.xf-req-lead { font:13px/1.4 var(--sans); color:var(--dim); margin:0 0 10px; }
.xf-req-acts { display:flex; gap:6px; flex:none; }
.xf-city-h1 { font:800 26px/1.2 var(--sans); color:var(--text); margin:6px 0 8px; }
.xf-city-intro { font-size:14.5px; line-height:1.5; color:var(--faint); margin:0 0 22px; max-width:640px; }
.xf-cities { margin:28px 0 8px; padding-top:18px; border-top:1px solid var(--line); }
.xf-cities-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.xf-cities-list { display:flex; flex-wrap:wrap; gap:8px; }
.xf-city-link { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--text); text-decoration:none; transition:.15s; }
.xf-city-link:hover { border-color:var(--accent); color:var(--accent); }
.xf-invite { display:flex; align-items:center; justify-content:center; gap:6px; width:calc(100% - 36px); margin:10px 18px 0; padding:11px; background:var(--cta-bg); border:1px solid var(--line-hi); border-radius:13px; font:700 14px var(--sans); color:var(--text); cursor:pointer; transition:.2s; box-sizing:border-box; }
.xf-invite:hover { border-color:var(--accent); color:var(--accent); }
.xf-source { display:block; text-align:center; margin:10px 18px 0; font-size:12.5px; color:var(--faint); text-decoration:none; }
.xf-source:hover { color:var(--accent); text-decoration:underline; }
.xf-detail-report { display:block; margin:16px auto 0; background:none; border:0; cursor:pointer; font-size:12.5px; color:var(--faint); transition:.15s; }
.xf-detail-report:hover { color:#ff6b7a; }
.xf-detail-report.done { color:#ff6b7a; cursor:default; }

/* ---------- push opt-in (profile) ---------- */
.xf-push-box { margin-top:20px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--cta-bg); }
.xf-push-title { font-weight:700; font-size:14.5px; color:var(--text); }
.xf-push-hint { font-size:12.5px; color:var(--dim); margin:3px 0 12px; }
.xf-push-on { font-weight:600; font-size:13.5px; color:var(--accent); }
.xf-push-blocked { font-size:12.5px; color:#ff6b7a; margin-inline-start:8px; }
.xf-photo-btn { display:block; text-align:center; margin-top:14px; font-size:13.5px; font-weight:600; color:var(--accent); cursor:pointer; }
.xf-photo-btn:hover { text-decoration:underline; }
.xf-evphoto { text-align:center; margin-bottom:14px; }
.xf-evphoto .xf-photo-btn { margin-top:6px; }
.xf-evphoto-preview { width:100%; max-height:180px; object-fit:cover; border-radius:14px; display:block; }

#blazor-error-ui { position:fixed; bottom:0; left:0; right:0; display:none; padding:12px 20px;
  background:var(--surf-a); color:var(--text); border-top:1px solid var(--line-hi); z-index:1000; }
/* Explicit, high-contrast link - the default anchor colour rendered near-invisible
   (dark purple on the dark banner). Accent reads on both themes. */
#blazor-error-ui a, #blazor-error-ui .reload { color:var(--accent); text-decoration:underline;
  font-weight:600; }
#blazor-error-ui .dismiss { cursor:pointer; float:right; }