/* Social Hub — independent shell, video glass and classic community columns. */
.page-view[data-route="/social-hub"], .page-view[data-route="/night-hall"] {
  /* Keep the route's transform transition without an opacity backdrop root. */
  will-change: transform;
}
.social-hub-page-shell {
  --social-cyan: #7eeaf5;
  --social-rose: #7eeaf5;
  --social-muted: #b5bfd0;
  --social-border: rgba(155, 202, 238, .28);
  --social-glass: linear-gradient(180deg, rgba(12, 18, 36, .76), rgba(6, 10, 23, .72));
  --community-panel-bg: rgba(10, 15, 28, .70);
  --community-identity-bg: rgba(24, 28, 47, .74);
  --community-ficha-bg: rgba(14, 19, 34, .70);
  --community-row-a: rgba(137, 164, 224, .13);
  --community-row-b: rgba(5, 10, 22, .30);
  --community-border: rgba(208, 218, 255, .14);
  --community-text: #edf0f8;
  --community-muted: #b5bfd0;
  --community-meta: #9aa8c0;
  --community-link: #9cdce9;
  --community-link-hover: #cff7ff;
  --community-radius-lg: 14px;
  /* Module chrome: the 2004 labelled module (mono title over a body) kept as
     structure, drawn in the site's glass -- the same family as the Videos
     panels, but denser, so small social text keeps its contrast over the
     nebula. The solid blue bars read as a separate app placed on the site. */
  --mod-radius: 10px;
  --mod-bar: rgba(255, 255, 255, .035);
  --mod-bar-line: rgba(255, 255, 255, .08);
  --mod-surface: rgba(8, 11, 22, .66);
  --mod-line: rgba(255, 255, 255, .1);
  --mod-line-soft: rgba(255, 255, 255, .06);
  --mod-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.2);
  --mod-blur: blur(16px) saturate(1.1);
  width: 100%;
  /* Classic social pages were ~1000px: a ~17% identity rail, a ~50% centre and a ~32%
     friends/communities rail. Scaled for current screens that is 1360px of
     content (plus a 16px gutter each side), the rails fixed, the centre ~770px. Following the 1680px
     site header instead stretched the ficha across ~1080px and left the
     right rail a thin strip beside it. */
  max-width: 1392px;
  margin: 0 auto;
  padding: clamp(64px, 6vw, 88px) 16px 72px;
  color: #edf0f8;
  font: 400 14px/1.5 'Inter', sans-serif;
  color-scheme: dark;
}
.social-hub-shell { position: relative; z-index: 2; min-width: 0; }
.social-hub-shell *, .social-hub-shell *::before, .social-hub-shell *::after { box-sizing: border-box; }
.social-hub-shell button, .social-hub-shell a { -webkit-tap-highlight-color: transparent; }
.social-hub-shell button { cursor: pointer; }
.social-hub-shell :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--social-cyan); outline-offset: 4px; }
.social-hub-shell [aria-disabled="true"] { opacity: .55; cursor: default; }
.social-hub-shell .section-title { color: var(--social-cyan); font: 600 14px/1.4 'Inter', sans-serif; letter-spacing: .02em; text-shadow: none; }
.social-hub-shell .text-gray-500, .social-hub-shell .text-gray-600 { color: var(--community-meta); }
.social-hub-shell .admin-mini-btn { min-height: 36px; padding: 7px 13px; border: 1px solid var(--social-border); border-radius: 8px; background: rgba(15, 22, 38, .5); font: 600 12px/1.4 'Inter', sans-serif; color: var(--social-cyan); }
.social-hub-eyebrow { color: #b4bdd4; font: 500 10px/1.5 'JetBrains Mono', monospace; letter-spacing: .14em; }
.social-hub-nav, .social-glass, .social-hub-stage-card, .social-ficha-main, .social-section-shell {
  border: 1px solid var(--mod-line);
  background: var(--mod-surface);
  box-shadow: var(--mod-shadow);
  -webkit-backdrop-filter: var(--mod-blur);
  backdrop-filter: var(--mod-blur);
}
.social-glass, .social-hub-stage-card { border-radius: var(--mod-radius); }
/* Communities and the Night Hall keep the glass: their panels sit over a
   moving nebula and the blur is what holds 11px forum text legible. */
.social-hub-shell .community-glass, .social-hub-shell .community-identity-col {
  border: 1px solid var(--social-border);
  background: var(--social-glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.025), 0 16px 40px rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
  backdrop-filter: blur(12px) saturate(1.12);
}
/* Normal flow: a sticky offset inside the clipped route covered the first rows.
   The strip heads the open section (moved there by switchSocialHubTab), so it
   wears the panels' own glass instead of a header colour of its own. */
.social-hub-nav { position: relative; z-index: 5; display: flex; align-items: center; gap: 22px; padding: 0 18px; min-height: 46px; overflow: hidden; border-radius: var(--mod-radius); }
.evilsocial-wordmark, #nav-social-hub-link.evilsocial-wordmark { color: #f2e9ff; font: 500 24px/1 'Inter', sans-serif; letter-spacing: -.07em; white-space: nowrap; text-decoration: none; text-transform: none; }
.evilsocial-wordmark span, #nav-social-hub-link.evilsocial-wordmark span { color: #00e5ff; font-weight: 300; }
#nav-social-hub-link.evilsocial-wordmark { font-size: 21px; display: inline-flex; align-items: baseline; gap: 0; flex-shrink: 0; }
.evilsocial-wordmark:hover, #nav-social-hub-link.evilsocial-wordmark:hover { color: #00e5ff; text-shadow: 0 0 16px rgba(0,229,255,.45); }
.evilsocial-wordmark span { text-shadow: none; }
#nav-social-hub-link.evilsocial-wordmark:focus-visible { outline: 2px solid #00e5ff; outline-offset: 5px; border-radius: 4px; }
.top-nav-glass #nav-main-links #nav-social-hub-link.evilsocial-wordmark { font-size: 21px !important; letter-spacing: -.07em !important; }
@media (max-width: 760px) {
  .top-nav-glass #nav-main-links #nav-social-hub-link.evilsocial-wordmark { font-size: 19px !important; }
}
.social-hub-tabs { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; min-width: 0; }
/* "Mais" sits at the right end, where the duplicate name/role used to be. */
.social-hub-nav > .social-hub-more { margin-left: auto; }
.social-hub-tabs li { flex: 0 0 auto; }
.social-hub-nav .tab-link { display: block; min-height: 46px; padding: 0 1px; border: 0; border-bottom: 2px solid transparent; background: none; color: #b5bfd0; font: 500 12px/1.4 'Inter', sans-serif; letter-spacing: 0; text-transform: none; }
.social-hub-nav .tab-link:hover { color: white; }
/* Selected: white label over a thin muted line -- findable at a glance
   without the neon underline and glow it used to carry. */
.social-hub-nav .tab-link[aria-current="page"] { color: #fff; font-weight: 600; border-bottom-color: rgba(126,234,245,.55); }
.social-hub-profile-tab { display: flex; align-items: center; min-height: 46px; font-size: 12px; font-weight: 500; color: var(--social-muted); white-space: nowrap; }
.social-hub-profile-tab:hover { color: #fff; }
/* The nav clips to its own radius, which ate 240px of the 245px dropdown.
   It stops clipping only while the menu is open. */
.social-hub-nav:has(.social-hub-more[open]) { overflow: visible; }
.social-hub-more { position: relative; flex-shrink: 0; }
.social-hub-more summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; color: #bdc7da; font-size: 12px; list-style: none; }
.social-hub-more summary::-webkit-details-marker { display: none; }
.social-hub-more summary i { font-size: 9px; }
.social-hub-more.has-active-tab summary { color: var(--social-rose); }
.social-hub-more > ul { position: absolute; top: 45px; right: -12px; width: 220px; list-style: none; padding: 8px; margin: 0; border: 1px solid var(--social-border); border-radius: 12px; background: rgba(14, 19, 34, .98); box-shadow: 0 18px 45px rgba(0,0,0,.45); }
.social-hub-more .tab-link { min-height: 40px; width: 100%; text-align: left; padding: 10px; border: 0; border-radius: 6px; }
.social-hub-more .tab-link:hover, .social-hub-more .tab-link[aria-current="page"] { background: rgba(170,186,237,.1); }
.social-hub-more-link { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; cursor: pointer; }
.social-hub-more-link[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.social-hub-body { padding-top: 24px; }
@media (min-width: 821px) {
  .social-hub-page-shell { padding-top: clamp(58px, 5vw, 74px); }
  .social-hub-body { padding-top: 14px; }
}
/* A retained opacity animation becomes a backdrop root, preventing the glass
   inside the tab from sampling the Pixi canvas behind the page. */
.social-hub-shell .tab-content { margin: 0; min-width: 0; animation: none; transform: none; }
/* One grid for every section. Fixed rails, the centre takes the rest, and
   every column ends on its own content: nothing is stretched to match the
   centre, so a short section (Profissional, Pessoal) cannot resize a rail. */
.social-home-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.social-home-overview { display: grid; gap: 18px; min-width: 0; }
.social-home-grid > * { min-width: 0; }
.social-home-profile { padding: 18px; }
.social-home-profile > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; padding: 3px; border-radius: 6px; border: 1px solid var(--mod-line); background: rgba(0,0,0,.35); }
.social-home-profile h2 { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; margin: 12px 0 2px; letter-spacing: -.01em; }
.social-home-profile .social-hub-eyebrow { font-size: 9px; letter-spacing: .04em; }
/* Name and the line under it sit centred beneath the photo. */
.social-home-profile > [data-social-name], .social-home-profile > .social-hub-eyebrow { display: block; text-align: center; }
.social-home-edit-profile { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 10px auto 2px; padding: 5px 12px; border: 1px solid var(--mod-line); border-radius: 999px; color: #d6dcef; font-size: 11px; text-decoration: none; cursor: pointer; }
.social-home-edit-profile:hover { border-color: var(--social-cyan); color: #fff; }
.social-home-edit-profile[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Someone else's evilsocial: friend / recado / full profile, stacked. */
.social-visitor-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 10px 0 4px; }
.social-visitor-actions .social-home-edit-profile { margin: 0; background: transparent; font: inherit; font-size: 11px; }
.social-visitor-actions .social-home-edit-profile[hidden] { display: none; }
.social-home-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 14px 0 0; border: 1px solid var(--mod-line); border-radius: 6px; overflow: hidden; background: var(--mod-line); }
.social-home-stats :is(a,button) { display: grid; place-items: center; gap: 2px; min-width: 0; padding: 9px 3px; background: rgba(255,255,255,.025); color: #a9bcd8; text-align: center; }
.social-home-stats :is(a,button):hover { color: var(--social-cyan); background: rgba(255,255,255,.07); }
.social-home-stats strong { color: #fff; font: 700 15px/1.1 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
/* "comunidades" does not fit one line in a third of this column at any width
   the sidebar takes, and clipping it to "comunidad…" or breaking it blind to
   "comunid/ades" both read as a defect. Hyphenation breaks it on a syllable,
   which reads as typesetting. Grid keeps all three cells level. */
.social-home-stats span { max-width: 100%; font: 400 9px/1.3 'JetBrains Mono', monospace; letter-spacing: 0; overflow-wrap: break-word; hyphens: auto; }
.social-home-stats i { height: 17px; color: var(--social-cyan); font-size: 12px; }
.social-home-stat-muted { grid-column: 1 / -1; display: block; padding: 10px; background: rgba(255,255,255,.025); color: #a9bcd8; font-size: 9px; text-align: center; }
.social-home-welcome { padding: clamp(22px, 2.6vw, 34px); }
.social-home-welcome > .social-hub-eyebrow { color: var(--social-cyan); }
.social-home-welcome h1 { margin: 16px 0; font: 400 clamp(27px, 3vw, 40px)/1.25 'Cinzel', serif; letter-spacing: -.03em; }
.social-home-welcome h1 em { font-style: normal; color: #efd3ed; }
.social-home-welcome > p { color: var(--social-muted); font-size: 13px; line-height: 1.8; }
/* Prose shares its container's edges without stretching the final line. */
.social-home-welcome > p,
.social-home-shortcut small,
.social-hub-shell #comm-list-grid p,
.social-hub-shell .community-info-row--description .community-info-row-value,
.social-hub-shell .reply-card-inner {
  text-align: justify;
  text-align-last: start;
  text-justify: inter-word;
  overflow-wrap: anywhere;
}
.social-home-shortcuts { margin-top: 26px; }
.social-home-shortcut { display: flex; width: 100%; align-items: center; text-align: left; gap: 14px; padding: 20px 0; border-top: 1px solid var(--social-border); color: #eef1fa; }
.social-home-shortcut > i { display: flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid rgba(126,234,245,.2); border-radius: 10px; background: rgba(126,234,245,.06); color: var(--social-cyan); }
.social-home-shortcut--rose > i { color: var(--social-rose); border-color: rgba(255,159,197,.2); background: rgba(255,159,197,.05); }
.social-home-shortcut--purple > i { color: #d4b7ff; border-color: rgba(212,183,255,.2); background: rgba(212,183,255,.05); }
.social-home-shortcut > span:not(.social-home-arrow) { min-width: 0; flex: 1; }
.social-home-shortcut strong { display: block; font-size: 13px; font-weight: 600; }
.social-home-shortcut small { display: block; color: var(--social-muted); font-size: 11px; line-height: 1.6; margin-top: 4px; }
.social-home-arrow { color: var(--social-cyan); font-size: 17px; transition: transform .2s; }
.social-home-shortcut:hover .social-home-arrow { transform: translate(2px,-2px); }
.social-home-shortcut:hover strong { color: var(--social-cyan); }
.social-home-side { display: grid; gap: 14px; align-content: start; }
.social-home-friends, .social-home-communities { padding: 18px; }
/* As many 60px+ faces as the rail fits -- three at desktop, two in the
   narrow two-column layout -- instead of four cramped thumbnails. */
.social-home-friend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px 10px; }
.social-home-friend-grid a { min-width: 0; color: #a9bcd8; font: 400 10.5px/1.35 'Inter', sans-serif; text-align: center; }
.social-home-friend-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 6px; border: 1px solid var(--mod-line); border-radius: 6px; background: rgba(0,0,0,.28); }
.social-home-friend-grid a:hover img { border-color: var(--social-cyan); }
.social-home-friend-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-home-friend-grid a:hover { color: var(--social-cyan); }
.social-home-communities { padding: 18px; }
/* Fixed height, or a bar with a "Ver todos" button stands 10px taller than a
   bar without one and the columns stop starting their content on one line. */
.social-home-module-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; margin: -18px -18px 14px; padding: 4px 13px; border-bottom: 1px solid var(--mod-bar-line); border-radius: calc(var(--mod-radius) - 1px) calc(var(--mod-radius) - 1px) 0 0; background: var(--mod-bar); }
.social-home-module-heading h2 { min-width: 0; overflow: hidden; color: #eaf1ff; font: 700 11px/1.45 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.social-home-module-heading > :is(button, a) { flex-shrink: 0; white-space: nowrap; }
/* The count belongs in the bar, the way every 2004 module labelled itself. */
.social-module-count { color: #9fc3f5; font-weight: 400; }
.social-home-module-heading button, [data-home-retry] { color: #b9cdf0; font: 500 11px/1.4 'Inter', sans-serif; min-height: 28px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185,205,240,.35); }
.social-home-module-heading button:hover, [data-home-retry]:hover { color: #fff; text-decoration-color: currentColor; }
[data-home-communities] p { color: var(--social-muted); font-size: 12px; line-height: 1.7; text-align: justify; text-align-last: start; }
.social-home-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px 9px; }
.social-home-community-grid a { min-width: 0; text-align: center; color: #a9bcd8; font: 400 10px/1.45 'Inter', sans-serif; }
.social-home-community-grid a > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 5px; overflow-wrap: anywhere; }
.social-home-community-grid img, .social-home-community-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--mod-line); border-radius: 2px; background: rgba(255,255,255,.04); color: #6f8bb5; }
.social-home-community-grid a:hover { color: var(--social-cyan); }
.social-home-community-grid a:hover :is(img,.social-home-community-placeholder) { border-color: var(--social-cyan); }
.community-list-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; }
.community-list-pagination p { margin: 0; color: var(--social-muted); font-size: 12px; }
.community-list-pagination button { min-height: 42px; }
.community-forum-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.community-forum-actions button { min-height: 36px; }
.community-forum-actions button:disabled { opacity: .45; cursor: not-allowed; }
.social-home-collection { padding: 18px; }
.social-home-collection h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: #cfc7e6; font-size: 13px; font-weight: 600; }
.social-home-collection .social-home-shortcut { padding: 16px 0; gap: 10px; }
.social-home-collection .social-home-shortcut > i { flex-basis: 20px; width: 20px; height: 24px; background: none; border: none; }
.social-home-collection .social-home-shortcut strong { font-size: 12px; }
.social-home-note { padding: 22px; }
.social-home-note .social-hub-eyebrow { font-size: 9px; color: var(--social-rose); }
.social-home-note p { color: #e0d9ed; font: 400 21px/1.5 'Cinzel', serif; margin: 14px 0; }
.social-home-note button { color: var(--social-cyan); font-size: 11px; text-align: left; }
.social-home-note button span { margin-left: 6px; }
.social-home-about { min-height: 190px; padding: 18px; overflow: hidden; }
.social-home-about blockquote { position: relative; margin: 2px 0 14px; padding: 0 0 12px 20px; border-bottom: 1px solid rgba(155,202,238,.16); color: #e9e4f3; font: 400 12px/1.65 'Inter', sans-serif; }
.social-home-about blockquote::before { content: '“'; position: absolute; top: -8px; left: 0; color: var(--social-cyan); font: 700 27px/1 'Cinzel', serif; }
.social-home-profile-facts { display: grid; gap: 0; }
.social-home-profile-fact { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(155,202,238,.12); font-size: 10px; }
.social-home-profile-fact span { color: #8fa2bf; }
.social-home-profile-fact strong { overflow-wrap: anywhere; color: #edf4ff; font-weight: 600; }
.social-home-profile-link, .social-home-profile-empty :is(a,button) { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--social-cyan); font-size: 10px; font-weight: 600; }
.social-home-profile-empty { display: grid; place-items: center; min-height: 125px; padding: 8px; text-align: center; }
.social-home-profile-empty > i { color: rgba(126,234,245,.65); font-size: 24px; }
.social-home-profile-empty p { max-width: 210px; margin: 10px 0 0; color: var(--social-muted); font-size: 11px; line-height: 1.6; }
.social-ficha-loading { display: grid; place-items: center; gap: 12px; min-height: 360px; border: 1px solid var(--social-border); border-radius: 8px; background: var(--social-glass); color: var(--social-muted); font-size: 12px; }
.social-ficha-loading i { color: var(--social-cyan); font-size: 28px; }
.social-ficha-main { overflow: hidden; padding-bottom: 24px; border-radius: var(--mod-radius); }
.social-ficha-main > :is(.social-profile-about,.social-profile-subtabs,.social-profile-rows,.social-profile-testimonials) { margin-right: 24px; margin-left: 24px; }
/* The ficha has no title bar of its own any more -- the section tabs sit
   right above it -- so its first block opens on the card's own padding.
   Keyed off position rather than .social-profile-about, absent with no bio. */
.social-ficha-main > :first-child { margin-top: 20px; }
.social-ficha-main > .eel-psc-head { margin: 0 0 14px; }
.social-section-shell { overflow: hidden; border-radius: var(--mod-radius); }
/* Matches the home module bars at 37px; the section copy sits under it. */
.social-section-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 37px; padding: 4px 13px; border-bottom: 1px solid var(--mod-bar-line); background: var(--mod-bar); }
.social-section-header .social-hub-eyebrow { flex-shrink: 0; color: #9fc3f5; }
.social-section-header h1 { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0; color: #fff; font: 700 15px/1.4 'Inter', sans-serif; letter-spacing: -.01em; }
.social-section-header h1 i { color: #8fb6ea; font-size: 13px; }
.social-section-intro { margin: 0; padding: 14px 20px 0; color: #a9bcd8; font-size: 12px; line-height: 1.7; }
.social-section-loading, .social-section-empty { display: grid; place-items: center; min-height: 180px; gap: 12px; color: var(--social-muted); text-align: center; }
.social-section-loading i, .social-section-empty i { color: var(--social-cyan); font-size: 25px; }
.social-scrap-list { padding: 6px 20px 4px; }
.social-scrap-card { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 14px; padding: 13px 8px; border-bottom: 1px solid var(--mod-line-soft); }
.social-scrap-card:last-child { border-bottom: 0; }
/* A recado's picture or sticker (wall_posts.image_url), as the app shows it. */
.social-scrap-image { display: block; max-width: min(100%, 320px); max-height: 320px; margin-top: 8px; border: 1px solid var(--mod-line); border-radius: 8px; object-fit: contain; background: rgba(0,0,0,.25); }
/* 🤘: the app's headbang, lit when the member has given one. */
.social-scrap-actions .social-scrap-headbang { padding: 2px 9px; border: 1px solid var(--mod-line); border-radius: 999px; color: #d6deee; }
.social-scrap-actions .social-scrap-headbang[aria-pressed="true"] { border-color: rgba(126,234,245,.5); background: rgba(126,234,245,.1); color: var(--social-cyan); }
.social-scrap-actions .social-scrap-headbang:hover { color: #fff; }
/* Period picker on the ranking modules (last.fm-style windows). */
.social-chart-period { flex-shrink: 0; max-width: 104px; padding: 3px 6px; border: 1px solid var(--mod-line); border-radius: 6px; background: rgba(0,0,0,.35); color: #d6deee; font: 500 11px/1.2 'Inter', sans-serif; cursor: pointer; }
/* Fans and ratings under the profile counters, as on a classic social profile. */
.social-home-rep { display: grid; justify-items: center; gap: 4px; margin-top: 10px; text-align: center; }
.social-home-fans { color: #eef1f8; font-size: 12.5px; }
.social-home-fans strong { color: #ffd76a; }
.social-home-ratings { display: flex; gap: 8px; }
.social-rating { display: inline-flex; gap: 1px; font-size: 13px; }
.social-rating span { opacity: .22; filter: grayscale(1); }
.social-rating span.on { opacity: 1; filter: none; }
.social-home-rep small { color: var(--social-muted); font-size: 10.5px; }
/* Upcoming birthdays. */
.social-home-birthdays { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.social-home-birthdays a { display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.social-home-birthdays a:hover { background: rgba(255,255,255,.05); }
.social-home-birthdays img { width: 40px; height: 40px; border: 1px solid var(--mod-line); border-radius: 6px; object-fit: cover; }
.social-home-birthdays strong, .social-home-birthdays small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-home-birthdays strong { color: #eeeaf4; font-size: 12.5px; }
.social-home-birthdays small { color: #ffb3c7; font-size: 11px; }
/* Recent visitors: a strip of faces, like a classic social home. */
/* One compact row of faces; the off state is a single line. */
.social-home-visitors { padding-bottom: 12px; }
.social-home-visitors .social-home-module-heading { margin-bottom: 10px; }
.social-home-visitors__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; column-gap: 10px; overflow: hidden; }
.social-home-visitors__row a { min-width: 0; color: #a9bcd8; font-size: 10.5px; text-align: center; text-decoration: none; }
.social-home-visitors__row img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 4px; border: 1px solid var(--mod-line); border-radius: 6px; object-fit: cover; }
.social-home-visitors__row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-home-visitors .social-module-empty { margin: 0; padding: 0; font-size: 12px; }
[data-visitors-toggle] { flex-shrink: 0; }
/* Sorte do dia: the one line of the day, above the ficha. */
.social-home-fortune { margin: 0; padding: 10px 14px; border: 1px solid var(--mod-line); border-radius: var(--mod-radius); background: var(--mod-surface); color: #d6deee; font-size: 13px; line-height: 1.5; -webkit-backdrop-filter: var(--mod-blur); backdrop-filter: var(--mod-blur); }
.social-home-fortune strong { color: var(--social-cyan); font-weight: 600; }
.social-scrap-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; }
.social-scrap-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--social-muted); font-size: 11.5px; cursor: pointer; }
.social-scrap-actions button:hover { color: #fff; }
.social-scrap-actions button[data-scrap-action="delete"]:hover, .social-scrap-actions button[data-scrap-action="block"]:hover { color: #ff9aa8; }
.social-scrap-actions button:disabled { opacity: .5; cursor: default; }
.social-scrap-actions i { font-size: 10px; }
.social-scrap-status { margin: 8px 0 0; color: #9ee6c2; font-size: 11.5px; }
.social-scrap-status.is-error { color: #ff9aa8; }
.social-scrap-report { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--mod-line); border-radius: 8px; background: rgba(8,11,22,.5); }
.social-scrap-report label { display: grid; gap: 4px; color: var(--social-muted); font-size: 11px; }
.social-scrap-report :is(select, textarea) { color-scheme: dark; width: 100%; padding: 7px 9px; border: 1px solid var(--mod-line); border-radius: 6px; background: rgba(0,0,0,.35); color: #eef1f8; font: 400 12.5px/1.4 'Inter', sans-serif; }
/* The native option list otherwise paints the OS's light background. */
.social-scrap-report option { background: #0d1428; color: #eef1f8; }
.social-scrap-report div { display: flex; gap: 10px; justify-content: flex-end; }
.social-scrap-report button { padding: 6px 12px; border: 1px solid var(--mod-line); border-radius: 999px; background: none; color: var(--social-muted); font-size: 11.5px; cursor: pointer; }
.social-scrap-report button[data-scrap-report-send] { border-color: rgba(255,154,168,.45); color: #ffc2cb; }
.social-scrap-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 28px 16px; color: var(--social-muted); font-size: 11px; }
.social-scrap-footer button { margin-left: auto; }
.social-section-note { margin: 0; padding: 0 20px 16px; color: var(--social-muted); font-size: 11px; }
.social-scrap-card:nth-child(even) { background: rgba(255,255,255,.025); }
.social-scrap-card > img, .social-scrap-card > .social-stream-placeholder { width: 46px; height: 46px; border: 1px solid var(--social-border); border-radius: 5px; object-fit: cover; }
.social-scrap-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.social-scrap-meta :is(a,strong) { color: #f0edf7; font-size: 12px; font-weight: 700; }
.social-scrap-meta time { color: #8694ab; font-size: 9px; }
.social-scrap-card p { margin: 6px 0 0; color: #cbd3df; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.social-friends-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 16px 20px 20px; }
.social-friends-directory > a { display: grid; grid-template-columns: 66px minmax(0,1fr); align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--mod-line-soft); border-radius: 8px; background: rgba(255,255,255,.025); color: #edf4ff; }
.social-friends-directory > a:hover { background: rgba(255,255,255,.06); }
.social-friends-directory img { width: 66px; height: 66px; border: 1px solid var(--social-border); border-radius: 5px; object-fit: cover; }
.social-friends-directory strong, .social-friends-directory small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-friends-directory strong { font-size: 12px; }
.social-friends-directory small { margin-top: 4px; color: var(--social-muted); font-size: 9px; }
.social-profile-sheet { display: grid; grid-template-columns: 230px minmax(0,1fr); min-height: 440px; }
.social-profile-sheet > aside { padding: 24px; border-right: 1px solid var(--social-border); background: rgba(18,29,52,.55); }
.social-profile-sheet > aside img { display: block; width: 100%; aspect-ratio: 1; padding: 4px; border: 1px solid rgba(126,234,245,.55); border-radius: 5px; object-fit: cover; }
.social-profile-sheet > aside h2 { margin: 14px 0 18px; overflow-wrap: anywhere; color: #fff; font-size: 18px; }
.social-profile-sheet > aside button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 4px; border-bottom: 1px solid rgba(155,202,238,.14); color: var(--social-muted); font-size: 11px; text-align: left; }
.social-profile-sheet > aside button:hover { color: var(--social-cyan); }
.social-profile-sheet > section { padding: 24px 30px; }
/* This block sits directly on top of the ficha rows, so label and value land
   on the rows' lines: a row reaches its value at padding-left(12) + label
   column(124) + gap(12). The label cell is tinted to the box edge, so its 12px
   is folded into the column. */
.social-profile-about { display: grid; grid-template-columns: calc(124px + 12px) minmax(0,1fr); column-gap: 12px; margin-bottom: 18px; border: 1px solid var(--mod-line); border-radius: 6px; overflow: hidden; }
.social-profile-about > span { display: flex; align-items: center; justify-content: flex-end; padding: 8px 0 8px 12px; background: rgba(64,104,190,.14); color: rgba(206,219,245,.66); font: 700 11px/1.35 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
/* Beats `.social-ficha-main blockquote` / `.social-profile-sheet blockquote`,
   which carry the same specificity and are declared after this rule. */
.social-hub-shell .social-profile-about blockquote { display: flex; align-items: center; padding: 8px 12px 8px 0; border-left: 0; background: none; line-height: 1.5; }
.social-profile-sheet blockquote, .social-ficha-main blockquote { margin: 0; padding: 16px 18px; border-left: 1px solid var(--mod-line); background: rgba(255,255,255,.03); color: #e8ecf5; font: 400 13px/1.75 'Inter', sans-serif; }
.social-profile-subtabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 0; }
.social-profile-subtabs button { position: relative; min-height: 38px; padding: 8px 12px; border: 1px solid var(--mod-line); border-bottom: 0; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.02); color: #93a8c8; font: 600 11px/1.4 'Inter', sans-serif; }
.social-profile-subtabs button + button { border-left: 0; }
.social-profile-subtabs button i { margin-right: 7px; font-size: 10px; }
.social-profile-subtabs button:hover { color: #dce8ff; background: rgba(255,255,255,.06); }
.social-profile-subtabs button[aria-selected="true"] { z-index: 1; color: #fff; border-color: var(--mod-bar-line); background: var(--mod-bar); }
.social-profile-subtabs button[aria-selected="true"]::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: rgba(126,234,245,.55); }
.social-profile-rows { border: 1px solid var(--mod-line); border-radius: 0 0 6px 6px; overflow: hidden; }
/* Mirrors the public profile's ficha card (EEL_PSO_CSS in user-public.js),
   which is only injected on /user. */
.social-ficha-main .eel-psc-head { padding: 10px 13px 8px; border-bottom: 1px solid rgba(255,255,255,.06); }
.social-ficha-main .eel-psc-htop { display: flex; align-items: center; gap: 7px; }
.social-ficha-main .eel-psc-icon { font-size: 11px; color: rgba(126,234,245,.8); }
.social-ficha-main .eel-psc-title { font-size: 10px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: rgba(239,239,244,.65); }
.social-ficha-main .eel-psc-sub { margin-top: 2px; padding-left: 18px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(239,239,244,.3); }
.social-ficha-main .eel-psc-frow { display: grid; grid-template-columns: 124px minmax(0,1fr); align-items: baseline; column-gap: 12px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.social-ficha-main .eel-psc-frow:last-child { border-bottom: none; }
.social-ficha-main .eel-psc-frow.e { background: rgba(64,104,190,.12); }
.social-ficha-main .eel-psc-frow.o { background: rgba(8,14,32,.28); }
.social-ficha-main .eel-psc-rk { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(206,219,245,.66); text-align: right; line-height: 1.35; overflow-wrap: break-word; }
.social-ficha-main .eel-psc-rv { font-size: 13.5px; color: #f1f4fb; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.social-ficha-main .eel-psc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.social-ficha-main .eel-psc-chip { padding: 3px 8px; border: 1px solid rgba(126,234,245,.3); border-radius: 999px; background: rgba(126,234,245,.08); color: #cff7ff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.social-ficha-main .eel-psc-muted { margin: 0; padding: 10px 13px; color: rgba(255,255,255,.28); font-size: 11px; font-style: italic; }
.social-profile-testimonials { margin-top: 24px; border: 1px solid var(--mod-line); border-radius: 3px; overflow: hidden; }
.social-profile-testimonials-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 13px; border-bottom: 1px solid var(--mod-bar-line); background: var(--mod-bar); }
.social-profile-testimonials-heading h2 { margin: 0; color: #eaf1ff; font: 700 11px/1.45 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.social-profile-testimonials-heading h2 i { margin-right: 7px; color: #8fb6ea; }
.social-profile-testimonials-heading span { color: #9fc3f5; font-size: 10px; }
.social-testimonial-card { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--mod-line-soft); }
.social-testimonial-card:last-child { border-bottom: 0; }
.social-testimonial-card:nth-child(even) { background: rgba(255,255,255,.03); }
.social-testimonial-card img { width: 44px; height: 44px; border: 1px solid var(--mod-line); border-radius: 2px; object-fit: cover; }
.social-testimonial-card header { display: flex; justify-content: space-between; gap: 12px; }
.social-testimonial-card header :is(a,strong) { color: var(--social-cyan); font-size: 11px; font-weight: 700; }
.social-testimonial-card time { color: #8093ad; font: 400 9px/1.4 'JetBrains Mono', monospace; }
.social-testimonial-card p { margin: 5px 0 0; color: #d4dae5; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.social-testimonial-empty { display: grid; place-items: center; min-height: 145px; padding: 20px; color: var(--social-muted); text-align: center; }
.social-testimonial-empty i { color: rgba(126,234,245,.55); font-size: 24px; }
.social-testimonial-empty p { max-width: 360px; margin: 10px 0 0; font-size: 11px; line-height: 1.6; }
/* Communities keep the compact directory, square photos and zebra ficha. */
.social-hub-shell .communities-wrap { padding: 0; }
.social-hub-shell .communities-list-heading { padding: 4px 2px 18px; border-bottom: 1px solid var(--social-border); }
.social-hub-shell .communities-list-heading h2 { text-align: left; margin: 0; color: #f1edf7; font: 400 clamp(24px, 3vw, 32px)/1.3 'Cinzel', serif; }
.social-hub-shell .communities-list-heading h2 i { display: none; }
.social-hub-shell .communities-list-heading p { color: var(--social-muted); letter-spacing: 0; font-size: 12px; margin-top: 8px; }
.social-hub-shell .community-search-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.social-hub-shell .community-search-field { flex: 1; min-width: min(240px, 100%); position: relative; }
.social-hub-shell #comm-search-input { min-height: 46px; padding-left: 40px; background: rgba(10,16,30,.42); border-color: var(--social-border); border-radius: 10px; backdrop-filter: blur(18px); }
.social-hub-shell #comm-search-input::placeholder { color: #a4aec2; }
/* Each card keeps its own height: a two-line blurb next to a long one no
   longer stretches into an empty block. Spare room stays under the grid. */
.social-hub-shell #comm-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-content: start; align-items: start; }
.social-hub-shell .community-directory-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 18px; }
.social-hub-shell .community-directory-heading { align-self: center; overflow-wrap: anywhere; }
.social-hub-shell .community-directory-card > :first-child { width: 96px; height: 96px; }
.social-hub-shell .community-directory-heading button { font-size: 16.5px; }
/* Four lines on every card, whether the text fills them or not, and the
   "ver mais" row always reserved: all cards share one height, and only the
   one opened grows. Text stays in the language the creator wrote it. */
.social-hub-shell .community-directory-description { grid-column: 1 / -1; align-self: start; display: -webkit-box; box-sizing: content-box; height: calc(1.65em * 4); margin: 0; overflow: hidden; font-size: 13.5px; line-height: 1.65; white-space: pre-line; hyphens: auto; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.social-hub-shell .community-directory-description.is-empty { display: block; color: var(--social-muted); font-style: italic; opacity: .7; }
.social-hub-shell .community-directory-card.is-expanded .community-directory-description { display: block; height: auto; -webkit-line-clamp: unset; }
.social-hub-shell .community-desc-toggle { grid-column: 1 / -1; justify-self: start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--social-cyan); font-size: 12px; font-weight: 600; cursor: pointer; }
.social-hub-shell .community-desc-toggle:hover { text-decoration: underline; }
.social-hub-shell .community-desc-toggle.is-idle { visibility: hidden; pointer-events: none; }
.social-hub-shell .community-directory-actions { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--social-border); }
.social-hub-shell .community-detail-grid { gap: 18px; }
.social-hub-shell .community-main { gap: 18px; }
.social-hub-shell .community-identity-col { border-radius: 14px 28px 14px 14px; }
.social-hub-shell .community-info-row { grid-template-columns: 112px minmax(0,1fr); padding: 12px 10px; }
.social-hub-shell .community-info-row-value { font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.social-hub-shell .community-info-row-label { font-size: 11px; padding-top: 3px; }
.social-hub-shell #comm-info-rows > :empty { display: none; }
.social-hub-shell .community-main > .community-glass { padding: 20px; }
.social-hub-shell .community-main h1 { font: 500 clamp(24px, 2.5vw, 30px)/1.3 'Inter', sans-serif; margin: 12px 0 20px; overflow-wrap: anywhere; }
.social-hub-shell :is(#comm-forum-module, #comm-events-module) { scroll-margin-top: 100px; }
.social-hub-shell .forum-sort-chips button { min-height: 34px; padding: 6px 12px; font-size: 11px; }
.social-hub-shell .community-identity-nav button, .social-hub-shell .community-identity-actions button { min-height: 38px; }
.social-hub-shell .forum-toolbar { flex-wrap: wrap; }
.social-hub-shell .forum-toolbar-search { flex: 1 1 180px; }
.social-hub-shell .forum-columns { font-size: 10px; }
/* Between these widths the sidebar is 170-180px, and a third of that holds no
   legible size of "comunidades". Below 601px the card goes full width and the
   three-across strip fits again, so this stacks only in the pinched range. */
@media (max-width: 1150px) and (min-width: 601px) {
  .social-home-stats { grid-template-columns: minmax(0,1fr); }
  .social-home-stats :is(a,button) { grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 6px; padding: 7px 6px; }
}
@media (max-width: 1150px) {
  .social-hub-nav { gap: 16px; }
  .social-home-grid { grid-template-columns: 170px minmax(0,1fr); }
  .social-home-side { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; }
  /* Three panels in two columns left the third on a half-width row. */
  .social-home-side > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .social-hub-page-shell { padding-top: 64px; }
  .social-hub-nav { gap: 0 16px; padding: 0 14px; }
  .social-hub-tabs { flex: 1 1 auto; overflow-x: auto; gap: 22px; scrollbar-width: thin; scrollbar-color: rgba(208,218,255,.2) transparent; }
  .social-hub-nav .tab-link { min-height: 46px; }
  .social-hub-profile-tab { min-height: 46px; }
  .social-hub-more .tab-link { min-height: 40px; }
  .social-hub-body { padding-top: 18px; }
  .social-home-grid { gap: 14px; }
  .social-home-side { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .social-hub-shell .community-detail-grid { grid-template-columns: 150px minmax(0,1fr); grid-template-areas: 'back back' 'identity main' 'sidebar sidebar'; gap: 14px; }
  .social-hub-shell .community-sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .social-hub-shell .community-info-row { grid-template-columns: 1fr; gap: 4px; }
  .social-hub-shell .community-info-row-label { text-align: left; }
  .social-friends-directory { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .social-profile-sheet { grid-template-columns: 180px minmax(0,1fr); }
}
@media (max-width: 600px) {
  .social-hub-shell .community-info-row.community-info-row--description { grid-template-columns: 1fr; }
  .social-hub-shell .community-info-row--description .community-info-row-label { text-align: left; }
  .social-home-grid { grid-template-columns: minmax(0,1fr); }
  .social-home-profile { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 0 14px; align-items: center; }
  /* The bar spans the card once the photo and name pair up into columns. */
  .social-home-profile > .social-home-module-heading { grid-column: 1 / -1; }
  .social-home-profile > img { grid-row: 2 / 4; width: 64px; }
  .social-home-profile h2 { margin: 0; align-self: end; }
  .social-home-profile > .social-hub-eyebrow { align-self: start; }
  .social-home-stats { grid-column: 1 / -1; margin-inline: 0; }
  .social-home-side { grid-template-columns: 1fr; }
  .social-section-header { padding: 20px 18px 17px; }
  .social-scrap-list { padding: 4px 12px 4px; }
  .social-scrap-footer { padding: 10px 14px 14px; }
  .social-friends-directory { padding: 12px; }
  .social-friends-directory { grid-template-columns: 1fr; }
  .social-profile-sheet { grid-template-columns: 1fr; }
  .social-profile-sheet > aside { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 0 14px; border-right: 0; border-bottom: 1px solid var(--social-border); }
  .social-profile-sheet > aside img { grid-row: 1 / 4; width: 84px; }
  .social-profile-sheet > aside h2 { margin: 0 0 6px; }
  .social-profile-sheet > section { padding: 20px 16px; }
  /* Stacked here, so the value takes the label's own inset back — the desktop
     rule strips it to line the quote up with the rows' second column. */
  .social-profile-about { grid-template-columns: 1fr; }
  .social-profile-about > span { justify-content: flex-start; padding: 8px 12px; text-align: left; }
  .social-hub-shell .social-profile-about blockquote { padding: 8px 12px; }
  .social-ficha-main > :is(.social-profile-about,.social-profile-subtabs,.social-profile-rows,.social-profile-testimonials) { margin-right: 14px; margin-left: 14px; }
  .social-profile-sheet blockquote { border-top: 1px solid rgba(155,202,238,.18); border-left: 0; }
  .social-profile-subtabs button { padding-inline: 6px; font-size: 9px; }
  .social-profile-testimonials-heading { align-items: flex-start; flex-direction: column; }
  .social-ficha-main .eel-psc-frow { grid-template-columns: 108px minmax(0,1fr); column-gap: 10px; }
  /* "RELACIONAMENTO" in one line at this width. */
  .social-ficha-main .eel-psc-rk { font-size: 10px; letter-spacing: .03em; }
  .social-home-welcome { padding: 24px 20px 12px; }
  .social-hub-shell .community-detail-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: 'back' 'identity' 'main' 'sidebar'; }
  .social-hub-shell .community-identity-col { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 0 16px; }
  .social-hub-shell .community-identity-col > .relative { grid-row: 1 / 4; }
  .social-hub-shell .community-identity-col > h3 { margin-top: 0; }
  .social-hub-shell .community-identity-col > nav, .social-hub-shell .community-identity-col > div:last-child { grid-column: 1 / -1; }
  .social-hub-shell .community-identity-col > nav { display: flex; gap: 10px; }
  .social-hub-shell .community-identity-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .social-hub-shell .community-main > .community-glass { padding: 16px; }
  .social-hub-shell .community-sidebar { display: flex; }
  .social-hub-shell .community-info-row { grid-template-columns: 90px minmax(0,1fr); column-gap: 12px; }
  .social-hub-shell .community-info-row-label { text-align: right; }
}

@media (max-width: 640px) {
  /* One row: the four tabs share it with "Mais", so the whole bar is a
     single 40px strip under the site header. */
  .social-hub-nav { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 6px; padding: 0 8px; }
  .social-hub-more { grid-column: 2; grid-row: 1; justify-self: end; }
  .social-hub-more summary { gap: 4px; min-height: 40px; font-size: 10px; }
  /* Four tabs on one line, sharing it with "Mais". Equal cells gave
     "Comunidades" -- one word that cannot wrap -- the same width as "Amigos"
     and clipped it; content-sized cells give the long word the room. */
  .social-hub-tabs { grid-column: 1; grid-row: 1; order: initial; display: grid; grid-template-columns: repeat(4,auto); justify-content: space-between; width: 100%; gap: 2px; overflow: visible; }
  .social-hub-tabs li { min-width: 0; }
  .social-hub-nav .tab-link, .social-hub-profile-tab { justify-content: center; width: 100%; min-height: 40px; padding: 4px 5px; overflow: hidden; font-size: 10px; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: normal; }
  .social-hub-nav .tab-link[aria-current="page"] { background: rgba(255,255,255,.04); }
  .social-home-friend-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* One word decides this width: "Comunidades" cannot wrap, and at 320px the tab
   cell is 65px. At 10px the word is 62px and the ellipsis cut it. */
@media (max-width: 360px) {
  .social-hub-nav .tab-link, .social-hub-profile-tab { padding: 4px 1px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .social-hub-shell *, .social-hub-shell *::before, .social-hub-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Social home: readable conversations on the same translucent surfaces. */
.social-home-left, .social-home-center { display: grid; gap: 18px; min-width: 0; }
.social-stream-panel, .social-discovery-panel { padding: 18px; min-width: 0; overflow: hidden; }
/* h3 joins h2 on the one heading rule above; a second font declaration here
   used to win the cascade and half-undo it. */
.social-hub-shell .social-home-module-heading h3 { color: #eaf1ff; font: 700 11px/1.45 'JetBrains Mono', monospace; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.social-home-module-heading h2 i { margin-right: 7px; color: #8fb6ea; }
.social-home-module-heading a { color: #b9cdf0; font-size: 11px; white-space: nowrap; }
.social-module-caption, .social-module-empty { font: 400 12px/1.7 'Inter', sans-serif; color: var(--social-muted); margin: 10px 0; }
.social-module-empty { padding: 14px 0; }
.social-module-empty button { color: var(--social-cyan); text-decoration: underline; }
/* Placeholders shaped like the rows and tiles they stand in for, so a panel
   fills in place instead of growing from a line of "Carregando…". */
.social-skeleton { display: grid; gap: 12px; padding: 8px 0; }
.social-skeleton > i { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: center; }
.social-skeleton > i::before, .social-skeleton > i::after, .social-skeleton--grid > i {
  background: linear-gradient(90deg, rgba(170,186,237,.07) 25%, rgba(170,186,237,.15) 50%, rgba(170,186,237,.07) 75%) 0 0 / 300% 100%;
  animation: social-skeleton-shine 1.4s ease-in-out infinite;
}
.social-skeleton > i::before { content: ''; width: 38px; height: 38px; border-radius: 4px; }
.social-skeleton > i::after { content: ''; height: 10px; width: 72%; border-radius: 3px; }
.social-skeleton > i:nth-child(even)::after { width: 54%; }
.social-skeleton--grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.social-skeleton--grid > i { display: block; aspect-ratio: 1; border-radius: 4px; }
.social-skeleton--grid > i::before, .social-skeleton--grid > i::after { content: none; }
@keyframes social-skeleton-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.social-hub-shell .social-stream-row { display: flex; gap: 12px; align-items: center; margin: 0 -8px; padding: 12px 8px; border-bottom: 1px solid rgba(155,202,238,.16); text-decoration: none; color: inherit; }
.social-hub-shell .social-stream-row:nth-child(even) { background: rgba(96,112,172,.07); }
.social-hub-shell .social-stream-row:hover { background: rgba(0,229,255,.07); }
.social-stream-row:last-child { border-bottom: 0; padding-bottom: 0; }
.social-stream-row > img, .social-stream-placeholder { width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--social-border); border-radius: 7px; object-fit: cover; }
.social-stream-placeholder { display: grid; place-items: center; color: var(--social-cyan); background: rgba(70,150,200,.07); }
.social-stream-copy { display: grid; gap: 4px; flex: 1; min-width: 0; font: 400 12px/1.65 'Inter', sans-serif; overflow-wrap: anywhere; }
.social-stream-copy strong { font-weight: 600; color: #eeeaf4; }
.social-stream-copy > span { text-align: justify; text-align-last: left; hyphens: auto; color: #c5cedc; }
.social-stream-copy small { font-size: 10px; color: var(--social-muted); }
.social-stream-row:hover strong, .social-stream-arrow { color: var(--social-cyan); }
#view-social-overview .social-stream-row { gap: 14px; padding: 12px 10px; }
#view-social-overview .social-stream-row > img, #view-social-overview .social-stream-placeholder { width: 52px; height: 52px; flex-basis: 52px; }
#view-social-overview .social-stream-copy { gap: 3px; font-size: 13.5px; line-height: 1.5; }
#view-social-overview .social-stream-copy strong { font-size: 14px; font-weight: 700; }
#view-social-overview .social-stream-copy small { font-size: 11.5px; }

/* Top artistas: the public profile's compact ranked list. */
.social-module-caption-inline { flex-shrink: 0; color: var(--social-muted); font-size: 10px; }
.social-home-avatar { padding: 18px; }
.social-home-avatar .eel-avatar-card__label { color: var(--social-muted); }
.social-home-avatar__hint { margin: 12px 0 0; color: var(--social-muted); font-size: 11.5px; line-height: 1.5; text-align: center; }
.social-home-avatar__empty { display: grid; justify-items: center; gap: 6px; padding: 6px 4px 2px; text-align: center; }
.social-home-avatar__empty > i { color: rgba(126,234,245,.7); font-size: 28px; }
.social-home-avatar__empty strong { color: #eeeaf4; font-size: 14px; }
.social-home-avatar__empty p { margin: 0; color: var(--social-muted); font-size: 12px; line-height: 1.5; }
.social-home-avatar__empty a, .social-home-avatar__empty button { margin-top: 6px; padding: 7px 14px; border: 1px solid rgba(126,234,245,.35); border-radius: 999px; background: rgba(126,234,245,.08); color: var(--social-cyan); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; }
.social-home-avatar__empty a:hover, .social-home-avatar__empty button:hover { background: rgba(126,234,245,.16); }
.social-home-avatar__open { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 12px; }
.social-home-avatar__open:hover .eel-avatar-card__frame { border-color: rgba(126,234,245,.45); box-shadow: 0 0 22px rgba(0,229,255,.18); }
.social-home-avatar__open:focus-visible { outline: 2px solid var(--social-cyan); outline-offset: 4px; }
/* A quiet line under the boneco, not a pill: the boneco itself is the call. */
.social-home-avatar__edit { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 4px; border: 0; background: none; color: var(--social-muted); font-size: 11.5px; cursor: pointer; }
.social-home-avatar__edit:hover { color: var(--social-cyan); }
.social-home-avatar__edit:focus-visible { outline: 2px solid var(--social-cyan); outline-offset: 3px; border-radius: 6px; }
.social-top-artists { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.social-top-artists :is(a, li > span) { display: grid; grid-template-columns: 18px 48px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 7px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.social-top-artists a:hover { background: rgba(255,255,255,.05); }
.social-top-artists img { width: 48px; height: 48px; border: 1px solid var(--mod-line); border-radius: 6px; object-fit: cover; }
.social-top-artists__rank { color: var(--social-muted); font-size: 12.5px; font-weight: 700; text-align: center; }
.social-top-artists__name { overflow: hidden; color: #eeeaf4; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.social-top-artists a:hover .social-top-artists__name { color: var(--social-cyan); }
.social-top-artists__plays { color: var(--social-muted); font: 400 12px/1 'JetBrains Mono', monospace; }
.social-top-tracks button { display: grid; grid-template-columns: 18px 48px minmax(0,1fr) auto; align-items: center; gap: 11px; width: 100%; padding: 7px 6px; border: 0; border-radius: 6px; background: none; color: inherit; text-align: left; }
.social-top-tracks button:hover { background: rgba(255,255,255,.05); }
.social-top-tracks button:hover .social-top-artists__name { color: var(--social-cyan); }
.social-top-tracks button:disabled { opacity: .6; }
.social-top-tracks__copy { display: grid; min-width: 0; }
.social-top-tracks__copy small { overflow: hidden; color: var(--social-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.social-home-playlists { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.social-home-playlists button { display: grid; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 10px; padding: 5px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.social-home-playlists button:hover { background: rgba(255,255,255,.05); }
.social-home-playlists img, .social-home-playlists__cover { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--mod-line); border-radius: 6px; background: rgba(255,255,255,.04); color: #6f8bb5; object-fit: cover; }
.social-home-playlists strong, .social-home-playlists small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-home-playlists strong { color: #eeeaf4; font-size: 12px; font-weight: 600; }
.social-home-playlists small { color: var(--social-muted); font-size: 10.5px; }
.social-home-playlists button:hover strong { color: var(--social-cyan); }
/* Discovery lists: a recognisable 48px cover, name and one detail line beside
   it, rows only as tall as that content. */
.social-discovery-panel .social-module-caption { margin: 0 0 6px; }
/* Rail prose shares the card's edges, like the directory descriptions. */
.social-discovery-panel :is(.social-module-caption, .social-module-empty) { text-align: justify; text-align-last: start; text-justify: inter-word; hyphens: auto; }
.social-hub-shell .social-discovery-panel .social-stream-row { gap: 11px; padding: 7px 8px; }
.social-discovery-panel .social-stream-row > img, .social-discovery-panel .social-stream-placeholder { width: 48px; height: 48px; flex-basis: 48px; border-radius: 6px; }
.social-discovery-panel .social-stream-copy { gap: 1px; line-height: 1.4; }
.social-scrap-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.social-stream-row:focus-visible { outline: 2px solid var(--social-cyan); outline-offset: 4px; border-radius: 4px; }
/* The profile song is a strip, not a hero: a full-width square cover made the
   left column outrun both neighbours by ~150px. */
/* Long track titles run to four lines; centring floated the cover 29px below
   the first line of its own copy. */
.social-home-music .eel-profile-v2-now { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 11px; align-items: start; }
.social-home-music .eel-profile-v2-now-cover-link img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--mod-line); border-radius: 2px; }
.social-home-music .eel-profile-v2-now-copy { display: grid; gap: 4px; font-size: 12px; overflow-wrap: anywhere; }
.social-home-music .eel-profile-v2-now-copy strong { color: #eeeaf4; font-weight: 600; }
.social-home-music .eel-profile-v2-now-copy :is(small,a) { color: var(--social-cyan); font-size: 11px; }
.social-home-music .eel-profile-v2-play-track { border: 1px solid var(--mod-line); border-radius: 3px; padding: 7px; }
.social-home-music .eel-profile-v2-now-hist { display: none; }
.social-home-music .eel-profile-v2-equalizer { display: flex; gap: 3px; height: 14px; align-items: end; }
.social-home-music .eel-profile-v2-equalizer span { width: 3px; background: var(--social-cyan); height: 60%; animation: social-equalizer 900ms ease-in-out infinite alternate; }
.social-home-music .eel-profile-v2-equalizer span:nth-child(2n) { animation-delay: -500ms; }
@keyframes social-equalizer { to { height: 100%; } }
.social-directory-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 20px; align-items: start; }
.social-home-center .social-directory-layout { grid-template-columns: minmax(0,1fr); }
.social-home-center .social-directory-sidebar { display: none; }
/* A community's own pages (detail, topic, members) carry their own three
   columns -- identity, content, members/related -- so while one is open the
   hub's rails step aside and the centre takes the width (communities.js
   toggles .is-community-page). The directory keeps the rails. */
.social-hub-shell.is-community-page .social-home-grid { grid-template-columns: minmax(0, 1fr); }
.social-hub-shell.is-community-page :is(.social-home-left, .social-home-side) { display: none; }
.social-community-loading { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--mod-line); border-radius: var(--mod-radius); background: var(--mod-surface); }
/* A community's page uses the home's proportions: identity where the left
   rail was, members/related where the right rail was, the same centre. */
@media (min-width: 1151px) {
  .social-hub-shell.is-community-page .communities-detail-wrap { width: 100%; max-width: none; margin-inline: 0; }
  .social-hub-shell.is-community-page .community-detail-grid { grid-template-columns: 260px minmax(0, 1fr) 300px; column-gap: 16px; }
}
/* Recado privado. */
.social-scrap-private { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; padding: 1px 8px; border: 1px solid rgba(255,179,199,.35); border-radius: 999px; color: #ffc2d4; font-size: 10.5px; }
.social-scrap-private i { font-size: 9px; }
.social-scrap-private-toggle { display: flex !important; align-items: center; gap: 8px; color: #d6deee !important; font-size: 12px !important; }
.social-scrap-private-toggle input { width: auto !important; }

/* Related communities: one compact row each -- cover, name, why it is
   related, size -- sized by its content, no reserved height. */
.community-related-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.community-related-list a { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px; border-radius: 8px; color: inherit; text-decoration: none; }
.community-related-list a:hover { background: rgba(255,255,255,.05); }
.community-related-list a:focus-visible { outline: 2px solid var(--social-cyan); outline-offset: 1px; }
.community-related-thumb { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid var(--community-border); border-radius: 6px; background: rgba(255,255,255,.04); color: #6f8bb5; }
.community-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.community-related-copy { display: grid; gap: 1px; min-width: 0; }
.community-related-copy strong { overflow: hidden; color: #eeeaf4; font: 600 12px/1.35 'Inter', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.community-related-copy small { overflow: hidden; color: var(--community-meta); font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.community-related-list a:hover strong { color: var(--community-link-hover); }
.community-related-empty { margin: 0; padding: 4px 2px; color: var(--community-meta); font-size: 12px; line-height: 1.5; }
.social-directory-results, .social-directory-sidebar { display: grid; gap: 18px; min-width: 0; }
@media (min-width: 1151px) {
  /* Home: the three columns end on one line. Each column's last visible card
     (.is-rail-end, set in social-hub-page.js; the centre's last panel) takes
     the leftover height; its content stays at the top. */
  /* Every hub tab, not only the home: the rails end where the grid ends. */
  .social-hub-shell:not(.is-community-page) .social-home-grid { align-items: stretch; }
  .social-hub-shell:not(.is-community-page) :is(.social-home-left, .social-home-side) { display: flex; flex-direction: column; }
  .social-hub-shell:not(.is-community-page) .social-home-left { gap: 18px; }
  .social-hub-shell:not(.is-community-page) .social-home-side { gap: 14px; }
  .social-hub-shell:not(.is-community-page) :is(.social-home-left, .social-home-side) > .is-rail-end { flex: 1 1 auto; }
  .social-hub-shell:not(.is-community-page) .social-home-center { display: flex; flex-direction: column; }
  /* The open tab (switchSocialHubTab sets display:block inline) fills the
     centre, and its last panel takes the leftover height. */
  .social-hub-shell:not(.is-community-page) .social-home-center > .tab-content.active { display: flex !important; flex: 1 1 auto; flex-direction: column; }
  .social-hub-shell:not(.is-community-page) .social-home-center > .tab-content.active > :last-child { flex: 1 1 auto; }
  .social-hub-shell #view-social-overview.active { display: flex !important; flex: 1 1 auto; flex-direction: column; }
  .social-hub-shell #view-social-overview.active > .social-home-overview { display: flex; flex: 1 1 auto; flex-direction: column; }
  .social-hub-shell #view-social-overview.active > .social-home-overview > :last-child { flex: 1 1 auto; }
  .social-hub-shell:not(.is-community-page):has(#view-social-communities.active) .social-home-grid { align-items: stretch; }
  .social-hub-shell:not(.is-community-page):has(#view-social-communities.active) .social-home-center { display: flex; flex-direction: column; }
  /* switchSocialHubTab sets display:block inline on the open view. */
  .social-hub-shell #view-social-communities.active { display: flex !important; flex: 1 1 auto; flex-direction: column; }
  .social-hub-shell #view-social-communities.active > [data-communities-mount],
  .social-hub-shell #view-social-communities.active .communities-wrap,
  .social-hub-shell #view-social-communities.active .social-directory-layout { display: flex; flex: 1 1 auto; flex-direction: column; }
  .social-hub-shell #view-social-communities.active .social-directory-results { display: flex; flex: 1 1 auto; flex-direction: column; }
  .social-hub-shell #view-social-communities.active #comm-list-grid { flex: 1 1 auto; }
  /* An empty pager (no more pages, no message) would hold a gap under the last row. */
  .social-hub-shell #view-social-communities.active .community-list-pagination:has(> p:empty):not(:has(> button:not([hidden]))) { display: none; }
}
.social-directory-stats { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: baseline; font-size: 12px; color: var(--social-muted); }
.social-directory-stats strong { color: #f0ebf7; font: 500 22px/1.5 'Inter', sans-serif; font-variant-numeric: tabular-nums; margin-right: 5px; }
.social-directory-stats small { font-size: 10px; }
.social-hub-shell .community-directory-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.community-category-tag { border: 1px solid rgba(167,139,250,.25); background: rgba(167,139,250,.07); color: #ccb9e9; border-radius: 5px; padding: 3px 7px; font-size: 10px; overflow-wrap: anywhere; }
.community-topic-total { display: inline-block; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .social-directory-layout { grid-template-columns: minmax(0,1fr); }
  .social-directory-sidebar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .social-home-grid { grid-template-columns: 180px minmax(0,1fr); }
}
@media (max-width: 640px) {
  .social-home-grid, .social-directory-sidebar { grid-template-columns: minmax(0,1fr); }
  .social-home-left { display: contents; }
  .social-home-left > .social-home-profile { grid-row: 1; }
  .social-home-center { grid-row: 2; }
  .social-home-music { grid-row: 3; }
  .social-stream-panel, .social-discovery-panel { padding: 16px; }
  .social-home-module-heading { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .social-home-music .eel-profile-v2-equalizer span { animation: none; } }

.social-hub-shell #comm-forum-module :is(.forum-columns,.forum-topic-row) { grid-template-columns: minmax(0,1fr) 110px 62px 100px; grid-template-areas: none; gap: 10px; }
.social-hub-shell .forum-topic-row { position: relative; background: rgba(5,10,22,.30); }
.social-hub-shell .forum-topic-row:nth-child(even) { background: rgba(137,164,224,.09); }
.social-hub-shell .forum-topic-row.is-unread { box-shadow: inset 3px 0 0 var(--social-cyan); background: rgba(27,58,78,.25); }
.social-hub-shell .forum-topic-row.is-unread .forum-topic-title { color: #fff; font-weight: 700; }
.forum-topic-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 16px; padding: 0 5px; border: 1px solid rgba(126,234,245,.34); border-radius: 999px; color: var(--social-cyan); font: 700 8px/1 'Inter',sans-serif; letter-spacing: .04em; }
.social-hub-shell .forum-topic-title { text-align: left; background: transparent; border: 0; padding: 0; }
.social-hub-shell .forum-topic-author-cell { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--social-muted); font-size: 10px; overflow-wrap: anywhere; }
.social-hub-shell .forum-topic-author-cell .forum-topic-thumb { width: 26px; height: 26px; min-width: 26px; flex: 0 0 26px; }
.social-hub-shell .forum-topic-date-cell { font-size: 10px; color: var(--social-muted); }
.social-hub-shell .community-featured-poll:not([hidden]) { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin: 12px 0 18px; padding: 12px; border: 1px solid var(--social-border); border-radius: 8px; background: rgba(159,111,209,.06); }
.community-featured-poll span { display: grid; gap: 5px; min-width: 0; }
.community-featured-poll small { color: #ccb9e9; font-size: 9px; letter-spacing: .08em; }
.community-featured-poll strong { font-size: 12px; overflow-wrap: anywhere; }
.community-featured-poll a { font-size: 11px; color: var(--social-cyan); flex-shrink: 0; }
@media (max-width: 1180px) {
  .social-hub-shell #comm-forum-module .forum-columns { display: none; }
  .social-hub-shell #comm-forum-module .forum-topic-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: 'content content' 'author replies' 'date date'; }
  .social-hub-shell .forum-topic-content { grid-area: content; }
  .social-hub-shell .forum-topic-author-cell { grid-area: author; }
  .social-hub-shell .forum-topic-date-cell { grid-area: date; }
  .social-hub-shell .forum-topic-date-cell::before { content: 'Última atividade: '; }
  .social-hub-shell .forum-topic-replies { grid-area: replies; width: auto; }
  .social-hub-shell .forum-topic-replies::after { content: ' respostas'; font-size: 10px; }
  .social-hub-shell .community-featured-poll { flex-wrap: wrap; }
}

/* Closed gate for visitors without a session (social-gate.js): the wordmark
   from the top nav at display size, the slogan in the landing's cyan -> violet,
   and under them the two doors in. One column at every width. */
.evilsocial-gate { box-sizing: border-box; min-height: calc(100vh - 200px); max-width: 560px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; text-align: center; color: #e9e6f2; }
.evilsocial-gate__logo.evilsocial-wordmark { margin: 0; font-size: clamp(56px, 10vw, 112px); line-height: .95; text-shadow: 0 0 40px rgba(0,229,255,.18); }
.evilsocial-gate__logo.evilsocial-wordmark:hover { color: #f2e9ff; text-shadow: 0 0 40px rgba(0,229,255,.18); }
.evilsocial-gate__slogan { margin: 14px 0 0; font: 400 clamp(20px, 2.4vw, 28px)/1.3 Georgia, 'Times New Roman', serif; background: linear-gradient(90deg, #5ee7f0, #8ea2ff 55%, #b889f5); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .88; }
.evilsocial-gate__tagline { margin: 10px 0 0; color: rgba(233,230,242,.72); font-size: 15px; letter-spacing: .02em; }
.evilsocial-gate__panel { box-sizing: border-box; width: min(420px, 100%); display: grid; gap: 12px; padding: 28px; border: 1px solid rgba(155,202,238,.28); border-radius: 16px; background: linear-gradient(180deg, rgba(12,18,36,.80), rgba(6,10,23,.76)); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.evilsocial-gate__lead { margin: 0 0 6px; color: #cfd3e0; font-size: 14px; line-height: 1.5; }
.evilsocial-gate__or { margin: 8px 0 0; color: #8b93a7; font-size: 12.5px; text-align: center; }
.evilsocial-gate__login, .evilsocial-gate__signup { width: 100%; padding: 13px 16px; border-radius: 10px; font: 700 14px/1 'Inter', sans-serif; letter-spacing: .04em; cursor: pointer; }
.evilsocial-gate__login { border: 0; background: linear-gradient(90deg, #5ee7f0, #8ea2ff); color: #07101f; }
.evilsocial-gate__signup { border: 1px solid rgba(126,234,245,.45); background: rgba(126,234,245,.08); color: #7eeaf5; }
.evilsocial-gate__login:hover { filter: brightness(1.08); }
.evilsocial-gate__signup:hover { background: rgba(126,234,245,.16); }
.evilsocial-gate__login:focus-visible, .evilsocial-gate__signup:focus-visible { outline: 2px solid #00e5ff; outline-offset: 3px; }
@media (max-width: 760px) {
  .evilsocial-gate { gap: 32px; padding: 24px 16px 48px; }
}

/* Avatar editor messages (purchase, locked item, save error) over the frame. */
.eel-hub-editor-toast { position: absolute; top: 12px; left: 50%; z-index: 16; max-width: min(90%, 420px); margin: 0; padding: 8px 14px; transform: translateX(-50%); border: 1px solid rgba(71,246,255,.35); border-radius: 8px; background: rgba(5,5,10,.9); color: #dff9ff; font-size: 12.5px; text-align: center; }
.eel-hub-editor-toast.is-error { border-color: rgba(255,107,138,.5); color: #ffd3dd; }

/* Avatar editor (social-hub-page.js openAvatarEditor): a block in the home's
   centre column, framed 2340:1080 -- the phone's landscape shape, which is
   what the Unity scene's side panels and character offset are laid out for.
   Full screen is the browser's, on the same element (the iframe is never
   moved, which would reload it). */
.social-avatar-editor {
  --avatar-editor-ratio: 2.1667;
  --avatar-editor-bar: 40px;
  margin: 0 0 14px;
}

.social-avatar-editor__panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(71, 246, 255, 0.22);
  border-radius: 12px;
  background: #08080f;
}

.social-avatar-editor__bar {
  height: var(--avatar-editor-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #eef1f8;
  font: 600 12.5px/1 'Inter', sans-serif;
  letter-spacing: 0.04em;
}

.social-avatar-editor__actions {
  display: flex;
  gap: 2px;
}

.social-avatar-editor__actions button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(238, 241, 248, 0.7);
  font-size: 14px;
  cursor: pointer;
}

.social-avatar-editor__actions button:hover,
.social-avatar-editor__actions button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.social-avatar-editor__stage {
  position: relative;
  aspect-ratio: 2340 / 1080;
  width: 100%;
}

/* "Tela cheia" is the browser's full screen on the block (top layer, whole
   screen); the panel is centred in it at the largest phone-shaped size. */
.social-avatar-editor:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  background: #03040a;
}

.social-avatar-editor:fullscreen .social-avatar-editor__panel {
  width: min(100%, calc((100vh - 32px - var(--avatar-editor-bar)) * var(--avatar-editor-ratio)));
}

.social-avatar-editor__actions button[hidden] {
  display: none;
}

.social-avatar-editor__actions button.is-exit {
  width: auto;
  gap: 7px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(71, 246, 255, 0.35);
  color: #47f6ff;
  font: 600 12px/1 'Inter', sans-serif;
}

/* The block's X closes it, so the editor's own back button is not shown. */
.social-avatar-editor .eel-hub-editor-back-btn {
  display: none;
}