.night-shell {
  color-scheme: dark;
  --cyan: #47f6ff;
  --red: #d42042;
  --ink: #050508;
  --panel: rgba(10, 10, 16, 0.78);
}

/* Communities/forum design tokens -- Orkut's visual grammar (identity
   column, alternating-row ficha, dense forum table, box-within-box
   messages) reproduced in Evil's own dark/cyan/violet/rose glass palette.
   Global (not scoped to .night-shell) since Communities lives under
   #social-hub-shell, not the Night Hall stage -- kept as one small root
   block instead of hardcoding these hex values across every render
   function in communities.js. */
:root {
  --community-page-bg: #050608;
  --community-panel-bg: #0d1017;
  /* Identity column and ficha get a visibly lighter glass than the flat
     module panels (FÓRUM/EVENTOS) -- "criar contraste de profundidade"
     instead of every block sharing the exact same near-black. */
  --community-identity-bg: rgba(22, 27, 38, 0.82);
  --community-ficha-bg: #11151d;
  --community-row-a: rgba(255, 255, 255, 0.045);
  --community-row-b: transparent;
  --community-border: #1a2230;
  --community-inner-border: rgba(103, 232, 249, 0.14);
  --community-inner-bg: rgba(255, 255, 255, 0.025);
  --community-link: #67e8f9;
  --community-link-hover: #a5f3fc;
  --community-text: #e5e7eb;
  --community-muted: #9ca3af;
  --community-meta: #6b7280;
  --community-accent: #f472b6;
  --community-glass-shadow: 0 0 14px rgba(34, 211, 238, 0.07);
  --community-radius: 4px;
  --community-radius-lg: 12px;
  --community-row-padding: 11px;
  /* Forum-row hierarchy -- distinct roles, not four shades of the same
     gray: title brightest, summary mid-gray, author cyan (hue change,
     not just lightness), meta/date darkest gray. */
  --community-topic-title: var(--community-text);
  --community-topic-summary: var(--community-muted);
  --community-topic-author: var(--community-link);
  --community-topic-meta: var(--community-meta);
  --community-topic-date: var(--community-meta);
  /* Thread page (topic + replies) -- same idea, its own names since the
     visual role is different (thread subject vs forum-list title). */
  --thread-page-title: #ffffff;
  --thread-author: var(--community-link);
  --thread-subject: #ffffff;
  --thread-body: var(--community-text);
  --thread-meta: var(--community-meta);
  --thread-quote-author: var(--community-link);
  --thread-quote-body: var(--community-muted);
}

/* ── Community profile page: single explicit named-area grid ──────────────────
   Every top-level block (back button, identity, heading, ficha, forum,
   events, sidebar) is a real grid item mapped to a named area -- previously
   the back button lived outside the grid entirely (plain sibling with
   Tailwind space-y margin) and heading/info/forum/events were all just
   block-stacked inside ONE grid cell (no individual grid membership of
   their own), which is why they could end up different widths: nothing
   but ordinary block flow was constraining them to the column's box, and
   a grid item's default min-width is `auto` (not 0), so content with a
   large min-content size -- like the old <table>-based forum rows -- could
   push its own box wider than the `minmax(0, 1fr)` track and visually
   bleed into the sidebar rather than being contained by it. Explicit
   `min-width: 0` on every grid item below is the actual fix for that,
   not cosmetic. */
/* Single content row (back, then identity/main/sidebar as direct
   siblings) instead of the previous 5-row grid where identity/sidebar
   spanned 4 rows (heading/info/forum/events) each rendered as its own
   separate area. That multi-row span was the actual cause of the
   reported top-misalignment: with identity and sidebar spanning several
   rows while heading/info/forum/events were each a distinct row, there
   was no single shared row-start all three columns could point to in a
   way that was easy to reason about, and Informações ended up as its
   own separate bordered card below heading instead of continuing the
   same panel. Collapsing main into one flex column (.community-main,
   below) containing the unified title+ficha panel + Fórum + Eventos
   means identity/main/sidebar are three plain siblings in ONE grid row
   -- align-items:start trivially puts all three at the same top edge. */
.community-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "back"
    "identity"
    "main"
    "sidebar";
  column-gap: 16px;
  row-gap: 14px;
  align-items: start;
}

@media (min-width: 820px) {
  .community-detail-grid {
    grid-template-columns: 170px minmax(0, 1fr);
    grid-template-areas:
      "back back"
      "identity main"
      "sidebar sidebar";
  }
}

@media (min-width: 1100px) {
  .community-detail-grid {
    grid-template-columns: 170px minmax(0, 1fr) 250px;
    grid-template-areas:
      "back back back"
      "identity main sidebar";
  }
}

@media (min-width: 1280px) {
  .community-detail-grid {
    grid-template-columns: 190px minmax(0, 1fr) 280px;
  }
}

.community-detail-grid > * {
  min-width: 0;
  box-sizing: border-box;
}

.community-grid-back { grid-area: back; }
.community-grid-identity { grid-area: identity; }
.community-grid-main { grid-area: main; }
.community-grid-sidebar { grid-area: sidebar; align-self: start; }

.community-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.community-identity-col {
  background: var(--community-identity-bg);
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius-lg);
  padding: 14px;
  backdrop-filter: blur(10px);
  width: 100%;
  box-sizing: border-box;
}

/* Both nav (Fórum/Eventos/Membros) and actions (Convidar/Compartilhar/...)
   share one left-aligned row shape -- text-align:left, justify-content:
   flex-start, and a fixed-width icon column (icon-slot below) so every
   row's label starts at the exact same x position regardless of which
   icon glyph it uses. Before, only the nav group used flex+gap+a
   fixed-width icon class; the actions group had no flex layout of its
   own (just an icon with a margin), so its text didn't line up with the
   nav group above it. */
.community-identity-nav a,
.community-identity-nav button,
.community-identity-actions button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  width: 100%;
  padding: 7px 2px;
  color: var(--community-muted);
  font-size: 12.5px;
  transition: color 0.15s ease;
}
.community-identity-nav a,
.community-identity-nav button {
  border-bottom: 1px solid var(--community-border);
}
.community-identity-nav > :last-child { border-bottom: none; }
.community-identity-nav a:hover,
.community-identity-nav button:hover,
.community-identity-actions button:hover { color: var(--community-link-hover); }

.community-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  flex-shrink: 0;
}

.community-identity-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.community-identity-actions-title {
  font-size: 11px;
  color: var(--community-meta);
  padding: 2px;
  margin: 0;
}

/* Ficha rows: alternation is CSS-only (:nth-child), a single continuous
   sequence across every row in #comm-info-rows regardless of whether it
   was rendered synchronously (descrição/tipo/etc) or filled in later by
   an async slot (última atividade/dono/moderadores) -- they're all real
   siblings of the same container, so nth-child counts them the same way.
   This directly replaces the old per-call `i % 2` index math, which reset
   at each of three separate wrapper divs and was the actual cause of
   some rows alternating while others didn't. */
.community-info-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 12px;
  padding: var(--community-row-padding) 4px;
  border-top: 1px solid var(--community-border);
  min-width: 0;
}
.community-info-row:first-child { border-top: none; }
.community-info-row:nth-child(odd) { background: var(--community-row-a); }
.community-info-row:nth-child(even) { background: var(--community-row-b); }
.community-info-row > * { min-width: 0; }
.community-info-row-label {
  text-align: right;
  font-size: 12.5px;
  color: var(--community-muted);
  padding-top: 1px;
}
.community-info-row-value {
  font-size: 14.5px;
  color: var(--community-text);
  line-height: 1.4;
}
.community-info-row-value a { color: var(--community-link); }
.community-info-row-value a:hover { color: var(--community-link-hover); }

/* Sidebar: normal flow, grows only with its own content -- no height:100%,
   no stretch, no flex:1 on its children (Membros/Relacionadas), so it
   can't be artificially forced to match the center column's height (that
   was the "grande espaço vazio abaixo da sidebar" bug: the sidebar was a
   plain block div with no height rules of its own, but its *parent* grid
   row/track was tall because the row's height is driven by the tallest
   item on the same row -- forum+events under a table that could overflow
   made that row artificially tall, stretching the visual space below a
   short sidebar even though the sidebar box itself was never stretched). */
.community-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}

@media (min-width: 820px) and (max-width: 1099px) {
  /* Sidebar drops to a full-width row below the center column at this
     tier -- more horizontal room than a real sidebar would have, so
     Membros and Relacionadas sit side by side here specifically. */
  .community-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Forum rows ────────────────────────────────────────────────────────────
   Rebuilt under fresh class names (.forum-*, not the old .community-list-*)
   on request, specifically to rule out any leftover specificity/cache
   collision with the previous names as a possible cause -- audited the old
   CSS first (no `order`, no `direction: rtl`, no row-reverse, no duplicate
   rule, no stray grid-column) and found nothing structurally wrong with
   it, so this is a clean rebuild to the exact spec, not a patch on top of
   a confirmed bug. Desktop: 48px thumb / 1fr content / 72px replies, that
   literal order, no reversal anywhere in this file. */
.forum-columns,
.forum-topic-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  text-align: left;
}
.forum-columns > *,
.forum-topic-row > * {
  min-width: 0;
}
.forum-columns {
  padding: 8px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--community-muted);
  border-bottom: 1px solid var(--community-border);
}
.forum-topic-row {
  padding: 11px 8px;
  border-bottom: 1px solid var(--community-border);
  transition: background-color 0.15s ease;
}
.forum-topic-row:last-child { border-bottom: none; }
.forum-topic-row:nth-child(odd) { background: var(--community-row-a); }
.forum-topic-row:nth-child(even) { background: var(--community-row-b); }
.forum-topic-row:hover { background: rgba(103, 232, 249, 0.06); }
.forum-topic-row.is-pinned { background: rgba(251, 191, 36, 0.05); }

.forum-topic-thumb {
  width: 42px;
  height: 42px;
  min-width: 42px;
  aspect-ratio: 1;
  border-radius: 3px;
}

.forum-topic-content {
  min-width: 0;
  text-align: left;
}
.forum-topic-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 14.5px;
  font-weight: 600;
}
.forum-topic-summary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
}
.forum-topic-meta { font-size: 11.5px; }

.forum-topic-replies {
  width: 72px;
  text-align: center;
  justify-self: stretch;
}

.forum-list-empty,
.forum-list-load-more {
  grid-column: 1 / -1;
  padding: 18px 8px;
  text-align: center;
}

@media (min-width: 640px) and (max-width: 899px) {
  .forum-columns,
  .forum-topic-row { grid-template-columns: 40px minmax(0, 1fr) 64px; }
  .forum-topic-thumb { width: 38px; height: 38px; min-width: 38px; }
  .forum-topic-replies { width: 64px; }
}

@media (max-width: 639px) {
  /* [thumb] [title+summary] / [blank] [replies+meta] -- two content rows
     instead of squeezing a third column at phone widths. */
  .forum-columns { display: none; } /* column labels don't carry over to the stacked mobile shape */
  .forum-topic-row {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb content"
      "blank replies";
  }
  .forum-topic-thumb { grid-area: thumb; width: 38px; height: 38px; min-width: 38px; }
  .forum-topic-content { grid-area: content; }
  .forum-topic-replies {
    grid-area: replies;
    width: auto;
    text-align: left;
    justify-self: start;
  }
}

/* ── Event rows ────────────────────────────────────────────────────────────
   No thumbnail column needed. Desktop: 1fr title / 120px date, title left,
   date right, never swapped. */
.event-columns,
.event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.event-columns > *,
.event-row > * {
  min-width: 0;
}
.event-columns {
  padding: 8px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--community-muted);
  border-bottom: 1px solid var(--community-border);
}
.event-row {
  padding: 11px 8px;
  border-bottom: 1px solid var(--community-border);
}
.event-row:last-child { border-bottom: none; }
.event-row:nth-child(odd) { background: var(--community-row-a); }
.event-row:nth-child(even) { background: var(--community-row-b); }

.event-title { text-align: left; min-width: 0; }
.event-date { text-align: right; white-space: nowrap; }

.event-list-empty {
  grid-column: 1 / -1;
  padding: 18px 8px;
  text-align: center;
}

@media (min-width: 640px) and (max-width: 899px) {
  .event-columns,
  .event-row { grid-template-columns: minmax(0, 1fr) 100px; }
}

@media (max-width: 639px) {
  .event-columns { display: none; }
  .event-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }
  .event-date { text-align: left; }
}

/* ── Members grid (full "ver todos" screen) ───────────────────────────────────
   Orkut-style photo gallery -- 6-8 tiles/row on wide desktop, tapering down
   to 2 on very narrow phones -- instead of one full-width row per member. */
.community-members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px;
}
@media (max-width: 900px) {
  .community-members-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .community-members-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .community-members-grid { grid-template-columns: repeat(2, 1fr); }
}

.community-member-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--community-radius);
  border: 1px solid transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.community-member-tile:hover,
.community-member-tile:focus-within {
  border-color: var(--community-inner-border);
  background: var(--community-inner-bg);
}

.community-member-menu-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--community-muted);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.community-member-tile:hover .community-member-menu-trigger,
.community-member-tile:focus-within .community-member-menu-trigger,
.community-member-menu-trigger:focus-visible,
.community-member-menu-trigger[aria-expanded="true"] {
  opacity: 1;
}
.community-member-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--community-text);
}

.community-member-menu {
  position: absolute;
  top: 24px;
  right: 2px;
  z-index: 30;
  min-width: 160px;
  background: var(--community-panel-bg);
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
  padding: 4px;
  text-align: left;
}
.community-member-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  font-size: 12px;
  border-radius: 5px;
  color: var(--community-text);
}
.community-member-menu button:hover,
.community-member-menu button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .community-member-tile,
  .community-member-menu-trigger {
    transition: none;
  }
}

/* ── Thread rows (topic-as-first-post + every reply) ──────────────────────────
   Forum-row shape, not a chat/comment card: avatar as its own fixed grid
   column (belongs to the row's header, not floating outside it), content
   column holds the author/date header line + an inner content area + the
   action row. Alternates background like every other list in this feature
   -- the original post is NOT part of that alternation (nth-child starts
   counting at the first reply), it gets its own .is-original treatment
   (a subtle bordered variant) instead, per the "destaque sutil" ask. */
.reply-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
  padding: 14px 16px;
  border-radius: var(--community-radius-lg);
  min-width: 0;
}
.reply-card > * { min-width: 0; }
.reply-card.is-original {
  background: var(--community-panel-bg);
  border: 1px solid var(--community-border);
}
#comm-replies-list > .reply-card:nth-child(odd) { background: var(--community-row-a); }
#comm-replies-list > .reply-card:nth-child(even) { background: var(--community-row-b); }
#comm-replies-list > .reply-card:hover { background: rgba(103, 232, 249, 0.045); }

/* Content area inside a row -- deliberately NOT a bordered box (that read
   as a form input); a faint background tint is enough to separate it from
   the author/date header line above it. */
.reply-card-inner {
  background: var(--community-inner-bg);
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 0;
}

.community-quote-box {
  display: block;
  background: rgba(0, 0, 0, 0.28);
  border-left: 2px solid var(--thread-quote-author);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.community-quote-box:hover {
  background: rgba(0, 0, 0, 0.4);
}

.community-compose-box {
  background: var(--community-panel-bg);
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius-lg);
  padding: 14px;
}

.community-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid var(--community-border);
  color: var(--community-muted);
  font-size: 11.5px;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.community-action-chip:hover {
  color: var(--community-link);
  border-color: rgba(103, 232, 249, 0.35);
}

.community-action-chip:focus-visible,
.community-modal button:focus-visible,
.community-modal a:focus-visible,
.community-modal input:focus-visible,
.community-modal textarea:focus-visible {
  outline: 2px solid var(--community-link);
  outline-offset: 2px;
}

.community-modal {
  background: var(--community-panel-bg);
  border: 1px solid var(--community-border);
  border-radius: var(--community-radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .community-action-chip,
  .community-quote-box {
    transition: none;
  }
}

.night-shell {
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  color: #f5f2ff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.night-shell button,
.night-shell a {
  font: inherit;
}

.night-shell--spa {
  padding-top: 76px;
}

.night-shell--embedded {
  height: 720px;
  min-height: 520px;
  border-radius: 8px;
}

.eel-social-hub-card {
  width: 100%;
  max-height: 760px;
  overflow: hidden;
  border: 1px solid rgba(71, 246, 255, 0.14);
  border-radius: 8px;
  background: rgba(3, 6, 12, 0.55);
}

.eel-social-hub-card__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(245, 242, 255, 0.82);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eel-hub-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.eel-social-hub-card__muted {
  color: #47f6ff;
  opacity: 0.68;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* Hub action buttons */
.eel-hub-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.eel-hub-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid rgba(71, 246, 255, 0.28);
  border-radius: 6px;
  background: rgba(5, 10, 18, 0.7);
  color: rgba(245, 242, 255, 0.75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.eel-hub-btn:hover {
  border-color: rgba(71, 246, 255, 0.65);
  color: #e8fbff;
  background: rgba(71, 246, 255, 0.08);
}

.eel-hub-btn--primary {
  border-color: rgba(71, 246, 255, 0.55);
  background: rgba(71, 246, 255, 0.1);
  color: #47f6ff;
}

.eel-hub-btn--primary:hover {
  background: rgba(71, 246, 255, 0.18);
  border-color: #47f6ff;
  color: #fff;
}

.eel-hub-btn--icon {
  padding: 5px 9px;
  font-size: 13px;
  letter-spacing: 0;
  border-color: rgba(255, 100, 100, 0.35);
  color: rgba(255, 120, 120, 0.8);
}

.eel-social-hub-card__stage {
  height: min(720px, 72vh);
  min-height: 520px;
}

.eel-social-hub-card__stage .night-shell--embedded {
  height: 100%;
  min-height: 100%;
}

/* Inline avatar editor (inside social hub card stage) */
.eel-hub-editor-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: #05050a;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}

.eel-hub-editor-viewport {
  --eel-avatar-editor-width: 1280px;
  --eel-avatar-editor-height: 720px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--eel-avatar-editor-width);
  height: var(--eel-avatar-editor-height);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #08080f;
}

.eel-hub-editor-iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: none;
  border: none;
  background: #08080f;
}

.eel-hub-editor-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #05050a;
  color: rgba(245, 242, 255, 0.55);
  font-size: 13px;
  z-index: 5;
}

.eel-hub-editor-fallback-text,
.avatar-editor-fallback-text {
  max-width: 360px;
  color: rgba(245, 242, 255, 0.48);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

.eel-hub-editor-fallback,
.avatar-editor-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(71, 246, 255, 0.42);
  border-radius: 6px;
  background: rgba(71, 246, 255, 0.08);
  color: #47f6ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.eel-hub-editor-fallback:hover,
.avatar-editor-fallback:hover {
  border-color: rgba(71, 246, 255, 0.78);
  background: rgba(71, 246, 255, 0.14);
  color: #ffffff;
}

.eel-hub-editor-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(71, 246, 255, 0.2);
  border-top-color: #47f6ff;
  border-radius: 50%;
  animation: ae-spin 0.8s linear infinite;
}

.eel-hub-editor-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 10, 0.82);
  backdrop-filter: blur(6px);
  z-index: 20;
}

.eel-hub-editor-progress-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 40px;
  border: 1px solid rgba(71, 246, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 10, 18, 0.9);
  color: rgba(245, 242, 255, 0.85);
  font-size: 14px;
  min-width: 260px;
}

.eel-hub-editor-status {
  margin: 0;
  font-size: 13px;
  color: rgba(245, 242, 255, 0.8);
  letter-spacing: 0.04em;
}

.eel-hub-editor-bar {
  width: 100%;
  height: 4px;
  background: rgba(71, 246, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.eel-hub-editor-fill {
  height: 100%;
  width: 0%;
  background: #47f6ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

@media (max-width: 920px) {
  .night-shell--embedded {
    height: clamp(520px, 70vh, 640px);
  }

  .eel-social-hub-card {
    max-height: 680px;
  }

  .eel-social-hub-card__stage {
    height: clamp(520px, 70vh, 640px);
    min-height: 520px;
  }
}

#night-hall-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}

.night-livehouse-stage-screen {
  position: absolute;
  z-index: 1;
  display: none;
  overflow: hidden;
  border: 1px solid rgba(71, 246, 255, 0.34);
  border-radius: 3px;
  background: #010308;
  box-shadow: 0 0 22px rgba(71, 246, 255, 0.16), inset 0 0 18px rgba(71, 246, 255, 0.08);
}

.night-livehouse-stage-screen.is-active {
  display: block;
}

.night-livehouse-stage-screen iframe,
.night-livehouse-stage-screen video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.night-livehouse-stage-screen .eel-livehouse-screen-empty,
.night-livehouse-stage-screen .eel-livehouse-audio-card {
  min-height: 100%;
  padding: 10px;
  gap: 5px;
  font-size: 10px;
  background: rgba(1, 5, 10, 0.78);
}

.night-livehouse-stage-screen .eel-livehouse-screen-empty i,
.night-livehouse-stage-screen .eel-livehouse-audio-card i {
  font-size: 16px;
}

.night-livehouse-stage-screen .eel-livehouse-audio-card strong,
.night-livehouse-stage-screen .eel-livehouse-empty strong {
  font-size: 11px;
}

.night-livehouse-stage-screen .eel-livehouse-screen-empty span,
.night-livehouse-stage-screen .eel-livehouse-audio-card span {
  font-size: 9px;
  line-height: 1.25;
}

.night-topbar {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: clamp(16px, 4vw, 42px);
  right: clamp(16px, 4vw, 42px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}

.night-back,
.night-debug button {
  pointer-events: auto;
  border: 1px solid rgba(71, 246, 255, 0.36);
  background: rgba(3, 8, 13, 0.72);
  color: #e8fbff;
  text-decoration: none;
  min-height: 36px;
  padding: 9px 12px;
  border-radius: 8px;
  box-shadow: 0 0 18px rgba(71, 246, 255, 0.12);
}

.night-back:hover,
.night-debug button:hover {
  border-color: rgba(71, 246, 255, 0.76);
}

.night-kicker {
  margin: 0 0 3px;
  color: var(--cyan);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.night-shell h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 58px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: 0;
  text-shadow: 0 0 24px rgba(71, 246, 255, 0.32), 0 0 10px rgba(212, 32, 66, 0.28);
}

.night-debug {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 2;
  width: min(310px, calc(100vw - 28px));
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(71, 246, 255, 0.2);
  border-radius: 8px;
  background: var(--panel);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.46);
}

.night-debug div:not(.night-debug-actions) {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-height: 20px;
  color: rgba(245, 242, 255, 0.7);
  font-size: 12px;
}

.night-debug span {
  color: rgba(71, 246, 255, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.night-debug strong {
  color: #fff;
  font-weight: 700;
}

.night-debug-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
}

.night-debug button {
  min-height: 34px;
  padding: 8px 10px;
  color: #f5f2ff;
}

.eel-livehouse-panel {
  position: absolute;
  right: clamp(14px, 3vw, 28px);
  top: clamp(92px, 12vh, 132px);
  z-index: 4;
  width: min(460px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 116px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(71, 246, 255, 0.24);
  border-radius: 8px;
  background: rgba(5, 7, 13, 0.88);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58), 0 0 32px rgba(71, 246, 255, 0.1);
  backdrop-filter: blur(16px);
  overflow: hidden;
  pointer-events: auto;
}

.eel-livehouse-panel--with-stage-screen {
  top: auto;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  width: min(390px, calc(100% - 24px));
  max-height: min(420px, 46%);
}

.eel-livehouse-panel--with-stage-screen.eel-livehouse-panel--idle {
  width: min(320px, calc(100% - 24px));
  max-height: 220px;
}

.eel-livehouse-panel--idle .eel-livehouse-body {
  padding-top: 8px;
}

.eel-livehouse-panel--idle .eel-livehouse-empty {
  min-height: 72px;
  padding: 8px 12px 14px;
  gap: 6px;
}

.eel-livehouse-panel--idle .eel-livehouse-empty i {
  font-size: 18px;
}

.eel-livehouse-panel--idle .eel-livehouse-empty strong {
  font-size: 13px;
}

.eel-livehouse-panel--idle .eel-livehouse-empty span {
  font-size: 11px;
}

.eel-livehouse-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.eel-livehouse-title-wrap {
  min-width: 0;
}

.eel-livehouse-kicker {
  margin: 0 0 5px;
  color: rgba(71, 246, 255, 0.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eel-livehouse-head h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
}

.eel-livehouse-head p[data-livehouse-meta] {
  margin: 5px 0 0;
  color: rgba(245, 242, 255, 0.58);
  font-size: 11px;
  line-height: 1.35;
}

.eel-livehouse-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.eel-livehouse-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(71, 246, 255, 0.24);
  border-radius: 6px;
  background: rgba(3, 8, 13, 0.72);
  color: rgba(245, 242, 255, 0.8);
  cursor: pointer;
}

.eel-livehouse-icon-btn:hover {
  border-color: rgba(71, 246, 255, 0.76);
  color: #fff;
}

.eel-livehouse-status {
  align-self: flex-start;
  margin: 10px 14px 0;
  padding: 4px 9px;
  border: 1px solid rgba(212, 32, 66, 0.32);
  border-radius: 999px;
  color: rgba(255, 190, 208, 0.95);
  background: rgba(212, 32, 66, 0.12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eel-livehouse-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 12px 14px 14px;
  overflow: auto;
}

.eel-livehouse-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(71, 246, 255, 0.22);
  border-radius: 8px;
  background: #010308;
  box-shadow: inset 0 0 24px rgba(71, 246, 255, 0.08);
}

.eel-livehouse-screen iframe,
.eel-livehouse-screen video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.eel-livehouse-screen-empty,
.eel-livehouse-audio-card,
.eel-livehouse-empty {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px;
  color: rgba(245, 242, 255, 0.62);
  text-align: center;
}

.eel-livehouse-screen-empty i,
.eel-livehouse-audio-card i,
.eel-livehouse-empty i {
  color: rgba(71, 246, 255, 0.78);
  font-size: 28px;
}

.eel-livehouse-empty strong,
.eel-livehouse-audio-card strong {
  color: #fff;
  font-size: 15px;
}

.eel-livehouse-empty span,
.eel-livehouse-screen-empty span,
.eel-livehouse-audio-card span,
.eel-livehouse-description {
  color: rgba(245, 242, 255, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

.eel-livehouse-empty--error i {
  color: rgba(255, 96, 130, 0.9);
}

.eel-livehouse-audio-card button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(71, 246, 255, 0.34);
  border-radius: 6px;
  background: rgba(71, 246, 255, 0.1);
  color: #e8fbff;
  cursor: pointer;
}

.eel-livehouse-now {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.eel-livehouse-now span,
.eel-livehouse-support span {
  display: block;
  color: rgba(71, 246, 255, 0.72);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eel-livehouse-now strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
}

.eel-livehouse-now small {
  flex-shrink: 0;
  color: rgba(245, 242, 255, 0.48);
  font-size: 11px;
}

.eel-livehouse-reactions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.eel-livehouse-reactions button {
  display: grid;
  place-items: center;
  height: 38px;
  border: 1px solid rgba(71, 246, 255, 0.22);
  border-radius: 6px;
  background: rgba(4, 10, 17, 0.72);
  color: rgba(245, 242, 255, 0.78);
  cursor: pointer;
}

.eel-livehouse-reactions button:hover {
  border-color: rgba(255, 68, 128, 0.78);
  color: #fff;
  background: rgba(255, 68, 128, 0.12);
}

.eel-livehouse-support {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.eel-livehouse-support span {
  width: 100%;
}

.eel-livehouse-support a,
.eel-livehouse-screen-empty a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(212, 32, 66, 0.34);
  border-radius: 6px;
  color: rgba(255, 220, 230, 0.94);
  background: rgba(212, 32, 66, 0.1);
  font-size: 12px;
  text-decoration: none;
}

.eel-livehouse-description {
  margin: 0;
}

.eel-livehouse-float-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.eel-livehouse-reaction-float {
  position: absolute;
  bottom: 118px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(71, 246, 255, 0.3);
  border-radius: 999px;
  color: #47f6ff;
  background: rgba(5, 8, 14, 0.78);
  animation: eel-livehouse-float 1.65s ease-out forwards;
}

.eel-livehouse-reaction-float--local {
  color: #ff6b9a;
  border-color: rgba(255, 68, 128, 0.42);
}

@keyframes eel-livehouse-float {
  0% {
    transform: translate3d(0, 20px, 0) scale(0.82);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -118px, 0) scale(1.12);
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .night-topbar {
    align-items: flex-start;
  }

  .night-debug {
    left: 14px;
    right: 14px;
  }

  .eel-livehouse-panel {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    max-height: min(78vh, 680px);
  }

  .eel-livehouse-head h2 {
    font-size: 16px;
  }

  .eel-livehouse-reactions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Avatar Editor */

.avatar-editor-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  background: #05050a;
  overflow: hidden;
}

.avatar-editor-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 56px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(71, 246, 255, 0.12);
  background: rgba(5, 5, 10, 0.9);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.avatar-editor-back {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(71, 246, 255, 0.8);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}

.avatar-editor-back svg {
  width: 16px;
  height: 16px;
}

.avatar-editor-back:hover { color: #47f6ff; }

.avatar-editor-title {
  color: rgba(245, 242, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.avatar-editor-frame-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}

.avatar-editor-viewport {
  --eel-avatar-editor-width: 1280px;
  --eel-avatar-editor-height: 720px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--eel-avatar-editor-width);
  height: var(--eel-avatar-editor-height);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #08080f;
}

.avatar-editor-iframe {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: none;
  background: #08080f;
}

.avatar-editor-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #05050a;
  color: rgba(245, 242, 255, 0.6);
  font-size: 13px;
  z-index: 5;
}

.avatar-editor-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(71, 246, 255, 0.2);
  border-top-color: #47f6ff;
  border-radius: 50%;
  animation: ae-spin 0.8s linear infinite;
}

@keyframes ae-spin { to { transform: rotate(360deg); } }

.avatar-editor-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 10, 0.82);
  backdrop-filter: blur(6px);
  z-index: 20;
}

.avatar-editor-progress-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 40px;
  border: 1px solid rgba(71, 246, 255, 0.2);
  border-radius: 12px;
  background: rgba(10, 10, 18, 0.9);
  color: rgba(245, 242, 255, 0.85);
  font-size: 14px;
  min-width: 260px;
}

.avatar-editor-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(71, 246, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.avatar-editor-progress-fill {
  height: 100%;
  width: 0%;
  background: #47f6ff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Avatar Editor */

.night-online-badge {
  display: none;
  position: absolute;
  top: clamp(90px, 10vw, 112px);
  left: clamp(14px, 3vw, 28px);
  z-index: 2;
  padding: 5px 12px;
  border: 1px solid rgba(71, 246, 255, 0.28);
  border-radius: 999px;
  background: rgba(5, 5, 10, 0.72);
  backdrop-filter: blur(8px);
  color: rgba(71, 246, 255, 0.9);
  font-size: 12px;
  font-family: Inter, sans-serif;
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ── Social Hub Console (scoped to .social-hub-shell) ────────────────────── */
/* Inherits admin-shell / glass-panel / section-title styling from
   admin-dashboard.css. Only adds rules for things admin doesn't define:
   per-mount heights, the purple section-title variant, and the error state. */

.social-hub-page-shell {
  /* Was min-height:100vh -- .social-hub-shell (the actual card) is a plain
     block with no height/flex-stretch tying it to this wrapper, so on tabs
     with short content (a small community, few topics) this just forced a
     full viewport of empty space below the card before the page's <footer>,
     with nothing but flat black behind it if the Rose/PixiJS background
     also wasn't running. Footer-pinning on a short page belongs on the app
     shell (body/main), not duplicated on every mounted sub-page. */
  padding-left: clamp(14px, 3vw, 34px);
  padding-right: clamp(14px, 3vw, 34px);
  padding-bottom: 72px;
}

.social-hub-shell {
  position: relative;
  isolation: isolate;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(4, 6, 12, 0.7);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(71, 246, 255, 0.04);
  backdrop-filter: blur(18px);
}

.social-hub-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--social-hub-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  transform: scale(1.04);
  filter: blur(10px) saturate(1.05);
}

.social-hub-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 4, 8, 0.08), rgba(3, 4, 8, 0.88) 58%, rgba(3, 4, 8, 0.94)),
    radial-gradient(circle at 18% 22%, rgba(71, 246, 255, 0.1), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(174, 92, 255, 0.1), transparent 32%);
  pointer-events: none;
}

.social-hub-hero {
  height: clamp(300px, 36vw, 420px);
  min-height: 300px;
}

.social-hub-hero__bg img {
  filter: saturate(0.92) contrast(1.04);
}

.social-hub-hero__shade {
  background:
    linear-gradient(90deg, rgba(3, 4, 8, 0.82), rgba(3, 4, 8, 0.28) 48%, rgba(3, 4, 8, 0.7)),
    linear-gradient(180deg, rgba(3, 4, 8, 0.12), rgba(3, 4, 8, 0.86));
}

.social-hub-hero__content {
  align-items: end;
}

.social-hub-avatar {
  box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.56), 0 0 34px rgba(192, 132, 252, 0.32);
}

.social-hub-nav {
  background: rgba(5, 7, 12, 0.64) !important;
}

.social-hub-nav .tab-link {
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.social-hub-body {
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.7), rgba(5, 7, 12, 0.4)),
    rgba(0, 0, 0, 0.16);
}

/*
 * Single shared grid for the whole Overview section (intro + 4 map tiles +
 * 3 action cards) — all 7 cards are direct children, positioned via
 * grid-template-areas so their columns/gaps/edges are computed together
 * instead of by two independent grids that only *happened* to line up.
 * Each card declares its own area inline (style="grid-area: ...") in
 * social-hub-page.js; this is the single source of truth for the layout.
 */
.social-hub-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "intro perfil comunidades"
    "intro forum nighthall"
    "commaction hallaction avataraction";
  align-items: stretch;
  gap: 18px;
}

/* Shared box treatment + unified internal padding for all 7 Overview cards.
   Border/background/radius/blur stay on the existing per-type rules below
   (already identical between the two families) — this only adds the one
   thing that genuinely differed: padding (18/22px on tiles vs 24px on the
   Tailwind-driven action cards). */
.social-hub-cell {
  padding: 20px;
}

.social-hub-map__intro,
.social-hub-map__tile {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(4, 7, 14, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

.social-hub-map__intro::before,
.social-hub-map__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(71, 246, 255, 0.08), transparent 44%),
    radial-gradient(circle at 94% 12%, rgba(192, 132, 252, 0.14), transparent 32%);
  pointer-events: none;
}

.social-hub-map__intro > *,
.social-hub-map__tile > * {
  position: relative;
  z-index: 1;
}

.social-hub-map__eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  color: rgba(71, 246, 255, 0.92);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.social-hub-map__intro h2 {
  max-width: 16ch;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.social-hub-map__intro p,
.social-hub-map__tile span {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
  line-height: 1.55;
}

.social-hub-map__tile {
  min-height: 132px;
}

.social-hub-map__tile i {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1px solid rgba(71, 246, 255, 0.18);
  border-radius: 10px;
  background: rgba(71, 246, 255, 0.07);
  color: rgba(71, 246, 255, 0.92);
}

.social-hub-map__tile strong {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.social-hub-action-card,
.social-hub-stage-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px !important;
  background: rgba(4, 7, 14, 0.52) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
}

.social-hub-action-card::before,
.social-hub-stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(71, 246, 255, 0.06), transparent 42%),
    radial-gradient(circle at 86% 18%, rgba(192, 132, 252, 0.12), transparent 34%);
  pointer-events: none;
}

.social-hub-action-card > *,
.social-hub-stage-card > * {
  position: relative;
  z-index: 1;
}

.social-hub-action-card:hover {
  border-color: rgba(71, 246, 255, 0.22) !important;
  background: rgba(5, 10, 18, 0.68) !important;
}

.social-hub-action-card--rose:hover {
  border-color: rgba(255, 96, 130, 0.28) !important;
}

.social-hub-action-icon {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.social-hub-action-icon--cyan,
.social-hub-action-card--cyan .social-hub-action-arrow {
  color: #47f6ff;
}

.social-hub-action-icon--rose,
.social-hub-action-card--rose .social-hub-action-arrow,
.social-hub-section-title--rose {
  color: #ff6b9a;
}

.social-hub-action-icon--purple,
.social-hub-action-card--purple .social-hub-action-arrow {
  color: #c084fc;
}

.social-hub-action-arrow {
  opacity: 0.46;
  transition: opacity 0.16s, transform 0.16s;
}

.social-hub-action-card:hover .social-hub-action-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.social-hub-shell .social-hub-mount {
  width: 100%;
  display: block;
}

.social-hub-shell .social-hub-mount--hall {
  min-height: 520px;
  height: clamp(620px, 72vh, 780px);
}

.social-hub-shell .social-hub-mount--editor {
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 720px;
  height: auto;
  display: flex;
}

.social-hub-shell .social-hub-mount--editor .eel-hub-editor-wrap {
  height: 100%;
  flex: 1;
  min-height: 0;
}

.social-hub-shell .section-title.social-hub-section-title--purple {
  color: rgba(192, 132, 252, 0.95);
  text-shadow: 0 0 12px rgba(192, 132, 252, 0.20);
}

.social-hub-shell .night-shell--embedded {
  border-radius: 10px;
  background: #03050b;
}

.social-hub-shell .social-hub-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: rgba(245, 242, 255, 0.45);
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 40px;
  text-align: center;
}

@media (max-width: 840px) {
  .social-hub-page-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .social-hub-shell {
    border-radius: 14px;
  }

  .social-hub-hero {
    height: 430px;
  }

  .social-hub-hero__content {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    padding: 28px !important;
  }

  .social-hub-avatar {
    width: 112px !important;
    height: 112px !important;
  }

  .social-hub-shell .social-hub-mount--hall {
    height: clamp(620px, 76vh, 760px);
  }

  .social-hub-shell .social-hub-mount--editor {
    min-height: 420px;
    height: clamp(420px, 68vh, 620px);
  }

  .social-hub-map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "perfil"
      "comunidades"
      "forum"
      "nighthall"
      "commaction"
      "hallaction"
      "avataraction";
  }
}

@media (max-width: 560px) {
  .social-hub-cell {
    padding: 16px;
  }
}

/* ── Avatar editor back button ───────────────────────────────────────────── */

.eel-hub-editor-back-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 15;
  padding: 6px 14px;
  background: rgba(5, 5, 10, 0.85);
  border: 1px solid rgba(71, 246, 255, 0.28);
  border-radius: 6px;
  color: rgba(71, 246, 255, 0.85);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.eel-hub-editor-back-btn:hover {
  border-color: #47f6ff;
  color: #fff;
  background: rgba(71, 246, 255, 0.1);
}