:root {
  --bg: #0d0f14;
  --bg-soft: #12141c;
  --panel: #171923;
  --panel-hover: #1e2030;
  --border: #292b3a;
  --text: #f1eef8;
  --muted: #9996ad;
  --gold: #d9b65d;
  --gold-light: #ffe3a0;
  --purple: #a879dc;
  --purple-light: #bd8cff;
  --blue: #78a9ff;
  --red: #ff727e;
  --radius: 16px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 20%, rgba(168, 121, 220, .06), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(217, 182, 93, .04), transparent 35%),
    var(--bg);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: .55;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

.hidden {
  display: none !important;
}

.gold-text {
  color: var(--gold);
}

.blue-text {
  color: var(--blue);
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.main-content {
  padding-top: 32px;
  padding-bottom: 64px;
}

.subtitle,
.hall-subtitle {
  color: var(--muted);
}

.subtitle {
  margin-top: 6px;
}

/* NAVEGAÇÃO */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 15, 20, .91);
  border-bottom: 1px solid rgba(217, 182, 93, .14);
  backdrop-filter: blur(18px);
}

.nav-container {
  width: min(1280px, calc(100% - 40px));
  min-height: 76px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.8px;
}

.logo > i {
  color: var(--gold);
  font-size: 27px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--muted);
  transition: .2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: rgba(168, 121, 220, .12);
}

.nav-link.active {
  box-shadow: inset 0 -2px var(--gold);
}

.auth-section {
  position: relative;
  margin-left: auto;
}

.btn {
  min-height: 42px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  transition: background .2s, border-color .2s, transform .2s;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary {
  color: #211a0c;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 5px 18px rgba(217, 182, 93, .12);
}

.btn-primary:hover:not(:disabled) {
  background: #ffe7ad;
}

.btn-secondary {
  color: var(--text);
  background: #202130;
  border-color: #38374a;
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--purple);
  background: #292638;
}

.user-profile-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  font-weight: 700;
  cursor: pointer;
}

.avatar-wrapper {
  width: 32px;
  height: 32px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #242235;
}

.avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220px;
  display: none;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #171822;
  box-shadow: var(--shadow);
  z-index: 100;
}


/* Mantém o menu aberto ao mover o mouse */
.user-profile-nav:hover .dropdown-menu,
.user-profile-nav:focus-within .dropdown-menu {
  display: block;
}

/* Opções do menu */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.dropdown-item:hover {
  color: var(--text);
  background: #252435;
}


#btn-logout i {
  color: var(--red);
}

/* HERO */

.hbg-hero {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 48px 30px;
  border: 1px solid rgba(217, 182, 93, .24);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 121, 220, .2), transparent 55%),
    linear-gradient(135deg, #191522, #11121b 65%, #19151e);
  box-shadow: var(--shadow);
}

.hbg-hero::before,
.hbg-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(217, 182, 93, .12);
  border-radius: 50%;
  pointer-events: none;
}

.hbg-hero::before {
  left: -130px;
  top: -110px;
}

.hbg-hero::after {
  right: -120px;
  bottom: -160px;
}

.hbg-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: center;
}

.hbg-hero-eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
}

.hbg-hero h1 {
  margin: 18px 0 12px;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -2px;
}

.hbg-hero h1 span {
  display: block;
  color: var(--gold);
  letter-spacing: 4px;
}

.hbg-hero-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
  color: var(--gold);
}

.hbg-hero-divider span {
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.hbg-hero-divider span:last-child {
  transform: rotate(180deg);
}

.hbg-hero-content > p {
  color: #c2bed0;
  font-size: 15px;
}

.hbg-hero-signature {
  margin-top: 22px;
  color: var(--gold-light);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.hbg-hero-orbit {
  position: absolute;
  right: 8%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translateY(-50%);
  opacity: .65;
}

.hbg-hero-orbit-ring {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(217, 182, 93, .42);
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(168, 121, 220, .1);
}

.hbg-hero-orbit-ring::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px dashed rgba(168, 121, 220, .55);
  border-radius: 50%;
}

.hbg-hero-orbit-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  font-size: 52px;
  text-shadow: 0 0 25px rgba(217, 182, 93, .55);
}

.hbg-star {
  position: absolute;
  color: var(--gold);
}

.hbg-star-one {
  top: 0;
  left: 15px;
}

.hbg-star-two {
  right: 0;
  top: 50px;
}

.hbg-star-three {
  bottom: 4px;
  left: 50px;
}

/* TÍTULOS DE SEÇÃO */

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 36px 0 20px;
}

.section-header h2,
.section-header h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.section-header h2 i,
.section-header h3 i {
  margin-right: 6px;
}

.hall-subtitle {
  font-size: 12px;
}

/* HALL DOS CONSTRUTORES */

.builders-hall {
  margin-top: 35px;
  padding: 24px;
  border: 1px solid rgba(217, 182, 93, .2);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(168, 121, 220, .08), transparent 65%),
    #14151e;
}

.builders-hall .section-header {
  margin: 0 0 24px;
}

.builders-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.builder-card {
  position: relative;
  min-width: 0;
  min-height: 205px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 12px 18px;
  border: 1px solid #302d3e;
  border-radius: 14px;
  background: linear-gradient(160deg, #1c1b29, #14151e);
  text-align: center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.builder-card:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 182, 93, .65);
  box-shadow: 0 12px 25px rgba(0, 0, 0, .22);
}

.builder-position {
  position: absolute;
  top: 10px;
  left: 12px;
  color: var(--gold);
  font-size: 18px;
  font-weight: 800;
}

/* Moldura única: todos os avatares ficam dourados */
#builders-ranking .builder-avatar {
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
  display: grid;
  place-items: center;
  padding: 3px;
  overflow: hidden;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: #17131f;
  box-shadow:
    0 0 0 2px rgba(217, 182, 93, .15),
    0 0 16px rgba(217, 182, 93, .28);
  transition: box-shadow .25s ease;
}

#builders-ranking .builder-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  border: 0;
  border-radius: 50%;
  outline: 0;
  box-shadow: none;
  filter: none;
  transition: transform .25s ease;
}

#builders-ranking .builder-card:hover .builder-avatar {
  box-shadow:
    0 0 0 2px rgba(255, 215, 120, .28),
    0 0 22px rgba(217, 182, 93, .42);
}

#builders-ranking .builder-card:hover .builder-avatar img {
  transform: scale(1.06);
}

.builder-name {
  max-width: 100%;
  margin-top: 14px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-weight: 800;
}

.builder-profile-link:hover {
  color: var(--gold-light);
  text-decoration: underline;
}

.builder-count {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.builder-count strong {
  display: block;
  color: var(--gold);
  font-size: 19px;
}

/* Os três primeiros recebem destaque no cartão, não outra moldura */
.builder-card.rank-1 {
  border-color: rgba(217, 182, 93, .5);
  background: linear-gradient(160deg, rgba(217, 182, 93, .1), #17151f 70%);
}

.builder-card.rank-2,
.builder-card.rank-3 {
  border-color: #393548;
}

/* GALERIA E CARDS */

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.room-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.room-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168, 121, 220, .6);
  box-shadow: var(--shadow);
}

.room-image-holder {
  height: 200px;
  overflow: hidden;
  background: #202130;
  cursor: zoom-in;
}

.room-image-holder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}

.room-card:hover .room-image-holder img {
  transform: scale(1.035);
}

.room-info {
  padding: 18px;
}

.room-title-row h4 {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.4;
}

.room-author {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}

.author-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(217, 182, 93, .55);
  border-radius: 50%;
  background: #242033;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.room-author-link {
  color: var(--text);
}

.room-author-link:hover {
  color: var(--gold);
}

.room-desc {
  min-height: 42px;
  margin: 0;
  color: #b4b0c3;
  font-size: 12px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.room-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  background: #202130;
}

.icon-btn:hover {
  border-color: var(--purple);
}

.icon-btn.liked {
  color: #ff8498;
  border-color: rgba(255, 114, 126, .4);
  background: rgba(255, 114, 126, .1);
}

/* BUSCA */

.gallery-header {
  align-items: center;
}

.search-box {
  width: min(360px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: var(--panel);
}

.search-box:focus-within {
  border-color: var(--purple);
}

.search-box input {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
}

/* FORMULÁRIOS */

.form-card {
  width: min(720px, 100%);
  margin: 10px auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.form-card h2 {
  margin: 0;
  font-size: 22px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.form-group label {
  color: #e7e2f1;
  font-size: 12px;
  font-weight: 700;
}

.form-group input,
.form-group textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #363448;
  border-radius: 9px;
  outline: none;
  color: var(--text);
  background: #101119;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(168, 121, 220, .1);
}

.form-group input[type="file"] {
  padding: 10px;
  font-size: 12px;
}

.form-group input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: var(--text);
  background: #302840;
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
}

.form-group small {
  font-size: 11px;
}

#room-image-preview img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border: 1px solid var(--border);
  border-radius: 10px;
  object-fit: contain;
}

#form-post-room > button[type="submit"] {
  width: 100%;
  margin-top: 22px;
}

.disabled-form {
  opacity: .8;
}

.auth-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 13px;
  border: 1px solid rgba(217, 182, 93, .3);
  border-radius: 10px;
  color: #e8d5a7;
  background: rgba(217, 182, 93, .07);
}

.auth-warning i {
  margin-top: 2px;
  font-size: 19px;
}

/* PERFIL */

.profile-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.profile-main-info {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.profile-main-info h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-main-info p {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.profile-avatar-bg {
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background: #211b2b;
}

.profile-avatar-bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inventory-card {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.inventory-card h3 {
  margin-top: 0;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.inventory-item {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  background: #11121a;
}

.inventory-item.active {
  border-color: rgba(217, 182, 93, .4);
  color: var(--gold-light);
}

.profile-publications-header {
  margin-top: 32px;
}

/* MODAL DE LOGIN */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(4, 5, 10, .82);
  backdrop-filter: blur(8px);
}

.modal-card {
  position: relative;
  width: min(480px, 100%);
  margin: auto;
  padding: 28px;
  border: 1px solid rgba(217, 182, 93, .3);
  border-radius: 18px;
  background: #171822;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}

.modal-card h3 {
  margin: 0 35px 8px 0;
  font-size: 21px;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  background: #222331;
}

.steps-list {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.step-item p {
  margin: 0;
  color: #c6c2d2;
}

.step-number {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 182, 93, .45);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(217, 182, 93, .08);
  font-weight: 800;
}

.verification-code {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px dashed var(--gold);
  border-radius: 7px;
  color: var(--gold-light);
  background: rgba(217, 182, 93, .08);
  font-weight: 800;
  letter-spacing: 1px;
}

#btn-verify-identity,
#btn-retry-verification {
  width: 100%;
  margin-top: 12px;
}

.error-text {
  margin-top: 12px;
  padding: 10px;
  border-radius: 8px;
  color: #ffadb4;
  background: rgba(255, 114, 126, .1);
  overflow-wrap: anywhere;
}

/* ZOOM DAS FOTOS */

.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 24px 24px;
  background: rgba(4, 5, 10, .94);
  cursor: zoom-out;
}

.image-zoom-modal > img {
  display: block;
  max-width: min(1100px, 100%);
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .5);
}

.close-image-zoom {
  position: absolute;
  top: 16px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid #454052;
  border-radius: 50%;
  color: var(--text);
  background: #242331;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

/* RESPONSIVIDADE */

@media (max-width: 950px) {
  .builders-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hbg-hero-orbit {
    right: 2%;
    opacity: .25;
  }
}

@media (max-width: 650px) {
  .container,
  .nav-container {
    width: calc(100% - 28px);
  }

  .nav-container {
    min-height: 68px;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 10px 0;
  }

  .logo {
    font-size: 20px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
  }

  .nav-link {
    flex: 1;
    justify-content: center;
    padding: 9px 8px;
    font-size: 12px;
  }

  .auth-section {
    margin-left: auto;
  }

  .auth-section > .btn {
    padding: 9px 10px;
    font-size: 11px;
  }

  .user-profile-nav {
    gap: 7px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .avatar-wrapper {
    width: 27px;
    height: 27px;
  }

  .main-content {
    padding-top: 18px;
  }

  .hbg-hero {
    min-height: 300px;
    padding: 38px 18px;
  }

  .hbg-hero h1 {
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -1.5px;
  }

  .hbg-hero h1 span {
    letter-spacing: 2px;
  }

  .hbg-hero-eyebrow {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .hbg-hero-content > p {
    font-size: 13px;
  }

  .hbg-hero-orbit {
    right: -55px;
    opacity: .13;
  }

  .section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
  }

  .section-header h2,
  .section-header h3 {
    font-size: 18px;
  }

  .builders-hall {
    padding: 16px;
  }

  .builders-hall .section-header {
    margin-bottom: 18px;
  }

  .builders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .builder-card {
    min-height: 185px;
    padding: 22px 8px 14px;
  }

  #builders-ranking .builder-avatar {
    width: 72px;
    height: 72px;
    flex-basis: 72px;
  }

  .builder-name {
    font-size: 12px;
  }

  .builder-count {
    font-size: 10px;
  }

  .rooms-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .room-image-holder {
    height: 210px;
  }

  .gallery-header {
    align-items: stretch;
  }

  .search-box {
    width: 100%;
  }

  .form-card {
    padding: 20px 16px;
  }

  .form-card h2 {
    font-size: 19px;
  }

  .profile-header-card {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .profile-main-info {
    gap: 13px;
  }

  .profile-avatar-bg {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  .profile-main-info h2 {
    font-size: 18px;
  }

  .inventory-grid {
    grid-template-columns: 1fr;
  }

  .modal-overlay {
    align-items: flex-start;
    padding: 14px;
  }

  .modal-card {
    padding: 22px 18px;
  }
}

@media (max-width: 360px) {
  .builders-grid {
    grid-template-columns: 1fr;
  }

  .builder-card {
    min-height: 170px;
  }
}


html,
body {
  min-height: 100%;
  height: auto;
  overflow-y: auto;
}

.view-section {
  min-height: 0;
}

/* ========================================
   HBG: HALL À ESQUERDA + BANNER À DIREITA
   ======================================== */

#view-inicio > .home-feature-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 20px;
  align-items: stretch;
  width: 100%;
}

/* Hall dos Construtores: coluna esquerda */
#view-inicio > .home-feature-row > .builders-hall {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  padding: 20px 14px;
}

/* Título do Hall */
#view-inicio > .home-feature-row > .builders-hall .section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 0 0 18px;
}

/* Cinco construtores na mesma linha */
#view-inicio .home-feature-row .builders-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

#view-inicio .home-feature-row .builder-card {
  min-width: 0;
  min-height: 150px;
  padding: 24px 3px 10px;
}

#view-inicio .home-feature-row .builder-position {
  top: 5px;
  left: 6px;
  font-size: 12px;
}

#view-inicio .home-feature-row #builders-ranking .builder-avatar {
  width: clamp(32px, 4vw, 54px);
  height: clamp(32px, 4vw, 54px);
  flex-basis: clamp(32px, 4vw, 54px);
  padding: 2px;
  border-width: 2px;
}

#view-inicio .home-feature-row .builder-name {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.3;
}

#view-inicio .home-feature-row .builder-count {
  font-size: 9px;
}

#view-inicio .home-feature-row .builder-count strong {
  font-size: 15px;
}

/* Banner Habbo Builders Gallery: coluna direita */
#view-inicio > .home-feature-row > .hbg-hero {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 280px;
  height: 100%;
  padding: 30px 18px;
}

#view-inicio .home-feature-row .hbg-hero-content {
  width: 100%;
  max-width: 100%;
}

#view-inicio .home-feature-row .hbg-hero-eyebrow {
  font-size: 9px;
  letter-spacing: 1px;
}

#view-inicio .home-feature-row .hbg-hero h1 {
  font-size: clamp(25px, 3vw, 38px);
  letter-spacing: -1px;
}

#view-inicio .home-feature-row .hbg-hero h1 span {
  letter-spacing: 2px;
}

#view-inicio .home-feature-row .hbg-hero-content > p {
  font-size: 12px;
}

#view-inicio .home-feature-row .hbg-hero-signature {
  font-size: 9px;
  letter-spacing: 1px;
}

#view-inicio .home-feature-row .hbg-hero-orbit {
  right: -35px;
  opacity: .15;
}

/* Destaques Recentes continuam abaixo das duas colunas */
#view-inicio > .home-feature-row + .section-header {
  margin-top: 36px;
}

/* Telas menores: empilha os blocos */
@media (max-width: 760px) {
  #view-inicio > .home-feature-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #view-inicio > .home-feature-row > .builders-hall {
    grid-column: 1;
    grid-row: 1;
  }

  #view-inicio > .home-feature-row > .hbg-hero {
    grid-column: 1;
    grid-row: 2;
    min-height: 260px;
  }

  #view-inicio .home-feature-row .builders-grid {
    grid-template-columns: repeat(5, minmax(76px, 1fr));
    overflow-x: auto;
    padding-bottom: 8px;
  }

  #view-inicio .home-feature-row #builders-ranking .builder-avatar {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
  }
}

/* ========================================
   HALL DOS CONSTRUTORES: DESTAQUE VISUAL
   ======================================== */

/* Moldura e fundo do Hall */
#view-inicio > .home-feature-row > .builders-hall {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(217, 182, 93, 0.3);
  border-radius: 14px;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(217, 182, 93, 0.09),
      transparent 65%
    ),
    linear-gradient(145deg, #171923, #101118);
  box-shadow:
    0 0 24px rgba(217, 182, 93, 0.04),
    inset 0 1px 0 rgba(255, 227, 160, 0.06);
}

/* Título centralizado */
#view-inicio > .home-feature-row > .builders-hall .section-header {
  width: 100%;
  align-items: center;
  text-align: center;
  margin-bottom: 22px;
}

/* Ícone e nome do Hall */
#view-inicio > .home-feature-row > .builders-hall .section-header h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 100%;
  font-size: 20px;
  letter-spacing: 0.4px;
}

/* Subtítulo */
#view-inicio > .home-feature-row > .builders-hall .hall-subtitle {
  color: #aaa5b8;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* Ornamento dourado abaixo do cabeçalho */
#view-inicio > .home-feature-row > .builders-hall .section-header::after {
  content: "✦ ━━━━━━━━━ ✦ ━━━━━━━━━ ✦";
  display: block;
  margin-top: 10px;
  color: #d9b65d;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* Detalhes decorativos nos cantos */
#view-inicio > .home-feature-row > .builders-hall::before,
#view-inicio > .home-feature-row > .builders-hall::after {
  position: absolute;
  color: #d9b65d;
  font-size: 19px;
  opacity: 0.7;
  pointer-events: none;
}

#view-inicio > .home-feature-row > .builders-hall::before {
  content: "✧";
  top: 10px;
  left: 12px;
}

#view-inicio > .home-feature-row > .builders-hall::after {
  content: "✧";
  top: 10px;
  right: 12px;
}

/* Cartões dos construtores mais refinados */
#view-inicio .home-feature-row .builder-card {
  border: 1px solid rgba(217, 182, 93, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

#view-inicio .home-feature-row .builder-card:hover {
  border-color: rgba(217, 182, 93, 0.6);
  background: rgba(217, 182, 93, 0.06);
  transform: translateY(-3px);
}

/* Ajuste para telas menores */
@media (max-width: 760px) {
  #view-inicio > .home-feature-row > .builders-hall
  .section-header h2 {
    font-size: 18px;
  }
}

/* ========================================
   AJUSTE FINO: HALL + BANNER
   ======================================== */

/* Esconde o subtítulo do Hall */
#view-inicio > .home-feature-row > .builders-hall .hall-subtitle {
  display: none;
}

/* Reduz o espaço ocupado pelo cabeçalho */
#view-inicio > .home-feature-row > .builders-hall .section-header {
  margin-bottom: 14px;
  gap: 0;
}

/* Diminui um pouco o título */
#view-inicio > .home-feature-row > .builders-hall
.section-header h2 {
  font-size: 18px;
}

/* Reduz a altura e o espaçamento do banner */
#view-inicio > .home-feature-row > .hbg-hero {
  min-height: 0;
  padding: 22px 16px;
}

/* Deixa o título do banner ligeiramente menor */
#view-inicio .home-feature-row .hbg-hero h1 {
  font-size: clamp(23px, 2.7vw, 34px);
}

/* Compacta os elementos internos do banner */
#view-inicio .home-feature-row .hbg-hero-divider {
  margin-top: 12px;
  margin-bottom: 12px;
}

#view-inicio .home-feature-row .hbg-hero-content > p {
  margin-top: 10px;
  margin-bottom: 10px;
}

#view-inicio .home-feature-row .hbg-hero-signature {
  margin-top: 12px;
}

/* Mantém o banner confortável em telas pequenas */
@media (max-width: 760px) {
  #view-inicio > .home-feature-row > .hbg-hero {
    padding: 24px 16px;
  }

  #view-inicio .home-feature-row .hbg-hero h1 {
    font-size: 28px;
  }
}

/* Centraliza as posições acima dos avatares do Hall */
#view-inicio .home-feature-row .builder-card {
  position: relative;
}

#view-inicio .home-feature-row .builder-position {
  top: 5px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 2;
}

/* ========================================
   HALL DOS CONSTRUTORES — PÓDIO
======================================== */

#view-inicio .home-feature-row #builders-ranking {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: end;
  gap: 6px;
  overflow: visible;
}

/* Posições do pódio */
#view-inicio #builders-ranking .rank-1 {
  grid-column: 3;
  grid-row: 1;
  min-height: 190px;
  transform: translateY(-12px);
  z-index: 2;
}

#view-inicio #builders-ranking .rank-2 {
  grid-column: 2;
  grid-row: 1;
  min-height: 165px;
  transform: translateY(-5px);
}

#view-inicio #builders-ranking .rank-3 {
  grid-column: 4;
  grid-row: 1;
  min-height: 165px;
  transform: translateY(-5px);
}

#view-inicio #builders-ranking .rank-4 {
  grid-column: 1;
  grid-row: 1;
  min-height: 140px;
}

#view-inicio #builders-ranking .rank-5 {
  grid-column: 5;
  grid-row: 1;
  min-height: 140px;
}

/* Cartões e conteúdo */
#view-inicio #builders-ranking .builder-card {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 28px 3px 10px;
  align-self: end;
  justify-content: flex-start;
  overflow: hidden;
}

#view-inicio #builders-ranking .rank-1 {
  border-color: #d9b65d;
  background:
    radial-gradient(
      ellipse at top,
      rgba(217, 182, 93, 0.18),
      transparent 75%
    ),
    rgba(255, 255, 255, 0.025);
  box-shadow: 0 0 18px rgba(217, 182, 93, 0.12);
}

#view-inicio #builders-ranking .rank-1 .builder-avatar {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  border-color: #ffe3a0;
}

#view-inicio #builders-ranking .rank-1 .builder-position {
  color: #ffe3a0;
  font-size: 20px;
}

#view-inicio #builders-ranking .builder-avatar {
  max-width: 100%;
}

#view-inicio #builders-ranking .builder-name {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
}

#view-inicio #builders-ranking .builder-count {
  width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* Telas estreitas: mantém os cinco lugares lado a lado */
@media (max-width: 760px) {
  #view-inicio .home-feature-row #builders-ranking {
    grid-template-columns: repeat(5, minmax(76px, 1fr));
    overflow-x: auto;
    overflow-y: visible;
    align-items: end;
    padding: 16px 3px 12px;
  }

  #view-inicio #builders-ranking .rank-1 {
    min-height: 180px;
  }

  #view-inicio #builders-ranking .rank-2,
  #view-inicio #builders-ranking .rank-3 {
    min-height: 155px;
  }

  #view-inicio #builders-ranking .rank-4,
  #view-inicio #builders-ranking .rank-5 {
    min-height: 135px;
  }

  #view-inicio #builders-ranking .rank-1 .builder-avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}

/* Hall: diminuir espaço vazio nos cartões do pódio */
#view-inicio #builders-ranking .builder-card {
  padding-bottom: 6px;
  gap: 4px;
}

#view-inicio #builders-ranking .rank-1 {
  min-height: 0;
  padding-bottom: 8px;
}

#view-inicio #builders-ranking .rank-2,
#view-inicio #builders-ranking .rank-3 {
  min-height: 0;
  padding-bottom: 7px;
}

#view-inicio #builders-ranking .rank-4,
#view-inicio #builders-ranking .rank-5 {
  min-height: 0;
  padding-bottom: 6px;
}

#view-inicio #builders-ranking .builder-count {
  margin-bottom: 0;
}

/* Levantar um pouco o campeão do Hall */
#view-inicio #builders-ranking .rank-1 {
  transform: translateY(-20px);
}

#view-inicio #builders-ranking .builder-card.rank-1 {
  transform: translateY(-20px) !important;
  position: relative;
  z-index: 10;
}

#view-inicio #builders-ranking .rank-1 .builder-position {
  top: -3px !important;
}

/* Ajustar altura do caixote do campeão */
#view-inicio #builders-ranking .builder-card.rank-1 {
  min-height: 0 !important;
  padding-top: 25px;
  padding-bottom: 6px;
}

#view-inicio #builders-ranking .builder-card.rank-1 {
  height: auto !important;
  min-height: 0 !important;
  padding-top: 25px !important;
  padding-bottom: 4px !important;
  margin-bottom: 0 !important;
  transform: translateY(-20px) !important;
}

#view-inicio #builders-ranking .builder-card.rank-1 .builder-count {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Reduzir visualmente o caixote do primeiro lugar */
#view-inicio #builders-ranking .builder-card.rank-1 {
  scale: 0.92 !important;
  transform: translateY(-20px) !important;
  transform-origin: center bottom !important;
}


/* Hall dos Construtores: proporção dos cinco caixotes */
#view-inicio #builders-ranking .builder-card.rank-2,
#view-inicio #builders-ranking .builder-card.rank-3 {
  scale: 0.88 !important;
  transform-origin: center bottom !important;
}

#view-inicio #builders-ranking .builder-card.rank-4,
#view-inicio #builders-ranking .builder-card.rank-5 {
  scale: 0.84 !important;
  transform-origin: center bottom !important;
}


/* Evitar que os cartões percam o alinhamento */
#view-inicio #builders-ranking .builder-card {
  min-width: 0;
}

/* ========================================
   HBG — DESTAQUES RECENTES: 10 MINIATURAS
======================================== */

#view-inicio #featured-rooms {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  align-items: start;
}

#view-inicio #featured-rooms > .room-card {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(217, 182, 93, 0.25);
  border-radius: 8px;
  background: var(--panel);
}

#view-inicio #featured-rooms .room-image-holder {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-soft);
  cursor: zoom-in;
}

#view-inicio #featured-rooms .room-image-holder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

#view-inicio #featured-rooms > .room-card:hover {
  border-color: var(--gold);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25);
}

#view-inicio #featured-rooms > .room-card:hover .room-image-holder img {
  transform: scale(1.06);
}

/* Oculta textos e botões apenas na página inicial */
#view-inicio #featured-rooms .room-info {
  display: none;
}

/* Mantém as dez miniaturas numa única linha em telas menores */
@media (max-width: 760px) {
  #view-inicio #featured-rooms {
    grid-template-columns: repeat(10, minmax(76px, 1fr));
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;
  }

  #view-inicio #featured-rooms > .room-card {
    width: 100%;
  }
}

/* ========================================
   HBG — DESTAQUES RECENTES PREMIUM
======================================== */

/* Cabeçalho centralizado */
#view-inicio > .section-header:has(+ #featured-rooms) {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 42px 0 24px;
  padding-bottom: 18px;
  position: relative;
  border-bottom: 1px solid rgba(217, 182, 93, 0.15);
}

/* Título */
#view-inicio > .section-header:has(+ #featured-rooms) h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--text);
}

/* Ícone dourado com brilho discreto */
#view-inicio > .section-header:has(+ #featured-rooms) h2 i {
  color: var(--gold);
  filter: drop-shadow(0 0 7px rgba(217, 182, 93, 0.35));
}

/* Traço decorativo no centro */
#view-inicio > .section-header:has(+ #featured-rooms)::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--gold-light),
    var(--gold),
    transparent
  );
  box-shadow: 0 0 12px rgba(217, 182, 93, 0.2);
}

/* Miniaturas com acabamento refinado */
#view-inicio #featured-rooms > .room-card {
  position: relative;
  border: 1px solid rgba(217, 182, 93, 0.22);
  border-radius: 9px;
  background: linear-gradient(145deg, #1b1d29, #11131b);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Efeito ao passar o mouse */
#view-inicio #featured-rooms > .room-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(217, 182, 93, 0.12);
}

/* Imagens */
#view-inicio #featured-rooms .room-image-holder {
  border-radius: 8px;
  position: relative;
}

/* Brilho suave sobre a imagem ao passar o mouse */
#view-inicio #featured-rooms .room-image-holder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.07),
    transparent 45%,
    rgba(168, 121, 220, 0.08)
  );
  opacity: 0;
  transition: opacity 0.25s ease;
}

#view-inicio #featured-rooms > .room-card:hover .room-image-holder::after {
  opacity: 1;
}

/* Barra decorativa abaixo das miniaturas */
#view-inicio #featured-rooms > .room-card::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--purple),
    var(--gold),
    transparent
  );
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

#view-inicio #featured-rooms > .room-card:hover::after {
  opacity: 1;
}

/* ========================================
   HBG — INFORMAÇÕES DOS DESTAQUES
======================================== */

#view-inicio #featured-rooms > .room-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

#view-inicio #featured-rooms .room-image-holder {
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  height: auto;
}

#view-inicio #featured-rooms .room-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 10px;
  padding: 10px;
}

#view-inicio #featured-rooms .room-title-row h4 {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#view-inicio #featured-rooms .room-author {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 10px;
  overflow-wrap: anywhere;
}

#view-inicio #featured-rooms .author-avatar {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

#view-inicio #featured-rooms .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-inicio #featured-rooms .room-desc {
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
  margin: 0;
}

#view-inicio #featured-rooms .room-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(217, 182, 93, 0.14);
}

#view-inicio #featured-rooms .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  font-size: 10px;
}

/* Mantém o cartão compacto sem esconder informações */
#view-inicio #featured-rooms .room-info > * {
  max-width: 100%;
}

/* HBG — DESTAQUES COMPACTOS */

#view-inicio #featured-rooms {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
  align-items: start;
}

#view-inicio #featured-rooms > .room-card {
  height: auto;
  align-self: start;
  border-radius: 6px;
}

#view-inicio #featured-rooms .room-image-holder {
  aspect-ratio: 4 / 3;
  height: auto;
}

#view-inicio #featured-rooms .room-info {
  display: flex;
  flex: none;
  gap: 5px;
  padding: 7px;
}

#view-inicio #featured-rooms .room-title-row h4 {
  font-size: 10px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#view-inicio #featured-rooms .room-author {
  gap: 4px;
  font-size: 9px;
  line-height: 1.3;
}

#view-inicio #featured-rooms .author-avatar {
  width: 16px;
  height: 16px;
}

#view-inicio #featured-rooms .room-desc {
  font-size: 9px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

#view-inicio #featured-rooms .room-footer {
  gap: 4px;
  padding-top: 5px;
}

#view-inicio #featured-rooms .icon-btn {
  padding: 4px;
  font-size: 9px;
  line-height: 1.2;
}

@media (max-width: 760px) {
  #view-inicio #featured-rooms {
    grid-template-columns: repeat(10, minmax(76px, 1fr));
  }
}

/* Ajuste final dos destaques da página inicial */
#view-inicio #featured-rooms {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  align-items: start;
}

#view-inicio #featured-rooms > .room-card {
  width: 100%;
  min-width: 0;
  height: auto;
  align-self: start;
  overflow: hidden;
}

/* Todas as imagens ficam com proporção idêntica */
#view-inicio #featured-rooms .room-image-holder {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  overflow: hidden;
}

#view-inicio #featured-rooms .room-image-holder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cartões mais compactos */
#view-inicio #featured-rooms .room-info {
  display: flex;
  flex: none;
  gap: 4px;
  padding: 5px;
}

#view-inicio #featured-rooms .room-title-row h4 {
  font-size: 9px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#view-inicio #featured-rooms .room-author {
  gap: 3px;
  font-size: 8px;
  line-height: 1.2;
}

#view-inicio #featured-rooms .author-avatar {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

#view-inicio #featured-rooms .room-desc {
  font-size: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#view-inicio #featured-rooms .room-footer {
  gap: 3px;
  padding-top: 4px;
}

#view-inicio #featured-rooms .icon-btn {
  padding: 3px;
  font-size: 8px;
  line-height: 1.2;
}

@media (max-width: 760px) {
  #view-inicio #featured-rooms {
    grid-template-columns: repeat(10, minmax(76px, 1fr));
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* CARROSSEL DOS DESTAQUES RECENTES */
.featured-carousel {
  position: relative;
  width: 100%;
  min-width: 0;
}

.featured-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--gold);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.featured-arrow:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

.featured-arrow-left {
  left: -18px;
}

.featured-arrow-right {
  right: -18px;
}

.featured-arrow[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .featured-arrow {
    width: 34px;
    height: 34px;
    font-size: 25px;
  }

  .featured-arrow-left {
    left: -8px;
  }

  .featured-arrow-right {
    right: -8px;
  }
}

/* TÍTULO DOS DESTAQUES RECENTES */
#view-inicio .section-header:has(+ .featured-carousel) {
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: 16px 0;
  margin-bottom: 24px;
}

#view-inicio .section-header:has(+ .featured-carousel) h2 {
  width: 100%;
  text-align: center;
  margin: 0;
}
/* LINHAS DOURADAS ELEGANTES DOS DESTAQUES */
#view-inicio .section-header:has(+ .featured-carousel) {
  border-top: none;
  border-bottom: none;
  position: relative;
  padding: 18px 0;
}

#view-inicio .section-header:has(+ .featured-carousel)::before,
#view-inicio .section-header:has(+ .featured-carousel)::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
}

#view-inicio .section-header:has(+ .featured-carousel)::before {
  top: 0;
}

#view-inicio .section-header:has(+ .featured-carousel)::after {
  bottom: 0;
}



/* ========================================
   HBG - PERFIL DO USUÁRIO
   Parte 1: Cabeçalho
======================================== */

/* HBG: coleção de emblemas do Habbo */
.profile-badges-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  gap: 12px;
  max-height: 520px;
  overflow-y: auto;
  padding: 12px 4px;
}

.hbg-badge-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 14px 8px;
  text-align: center;
  background: var(--panel, #171923);
  border: 1px solid var(--border, #292b3a);
  border-radius: 10px;
}

.hbg-badge-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

.hbg-badge-card img.hbg-badge-image-missing {
  visibility: hidden;
}

.hbg-badge-card > span:not(.hbg-badge-selected) {
  color: var(--text, #f1eef8);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.hbg-badge-card small {
  color: var(--muted, #9996ad);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.hbg-badge-card .hbg-badge-selected {
  padding: 4px 6px;
  color: var(--gold-light, #ffe3a0);
  background: rgba(217, 182, 93, 0.12);
  border-radius: 5px;
  font-size: 10px;
}

#btn-edit-badges:disabled {
  opacity: 0.6;
  cursor: wait;
}

@media (max-width: 480px) {
  .profile-badges-collection {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
}


/* ========================================
   HBG - PERSONALIZAÇÃO DO MENU DO USUÁRIO
======================================== */

/* Jogador logado */
.user-profile-nav {
  border-color: rgba(217, 182, 93, 0.28);
  background: linear-gradient(
    135deg,
    rgba(217, 182, 93, 0.09),
    rgba(23, 25, 35, 0.96)
  );
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.user-profile-nav:hover {
  border-color: rgba(255, 227, 160, 0.65);
  box-shadow: 0 0 18px rgba(217, 182, 93, 0.10);
}

#nav-username {
  color: var(--gold-light);
  font-weight: 800;
}

/* Ícone da seta */
.user-profile-nav > .ph-caret-down {
  color: var(--gold);
  transition: transform 0.25s ease;
}

.user-profile-nav:hover > .ph-caret-down {
  transform: rotate(180deg);
}

/* Base dos itens do menu */
.dropdown-item {
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
  border: 1px solid transparent;
}

/* Meu Perfil - roxo elegante */
.dropdown-item[data-target="perfil"] {
  color: #c9b5ff;
  background: rgba(139, 92, 246, 0.09);
  border-color: rgba(139, 92, 246, 0.16);
}

.dropdown-item[data-target="perfil"]:hover {
  color: #ffffff;
  background: linear-gradient(
    100deg,
    rgba(139, 92, 246, 0.30),
    rgba(109, 40, 217, 0.16)
  );
  border-color: rgba(167, 139, 250, 0.4);
  transform: translateX(3px);
}

/* Publicar Quarto - botão de destaque */
.dropdown-item[data-target="postar"] {
  margin-top: 5px;
  margin-bottom: 5px;
  color: #17121f;
  font-weight: 800;
  background: linear-gradient(110deg, #ffe3a0, #d9b65d 55%, #b98b38);
  border-color: rgba(255, 227, 160, 0.65);
  box-shadow: 0 3px 12px rgba(217, 182, 93, 0.12);
}

.dropdown-item[data-target="postar"] i {
  color: #4b3275;
}

.dropdown-item[data-target="postar"]:hover {
  color: #100d17;
  background: linear-gradient(110deg, #fff0c7, #f1ce76 55%, #d9aa4b);
  box-shadow: 0 4px 18px rgba(217, 182, 93, 0.25);
  transform: translateY(-1px);
}

.dropdown-item[data-target="postar"]:hover i {
  color: #39205f;
}


/* ========================================
   HBG - NAVEGAÇÃO PRINCIPAL
======================================== */

.nav-links .nav-link {
  position: relative;
  border: 1px solid transparent;
  border-radius: 10px;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover em Início e Galeria */
.nav-links .nav-link:hover {
  color: var(--gold-light);
  background: rgba(217, 182, 93, 0.07);
  border-color: rgba(217, 182, 93, 0.18);
}

/* Página selecionada */
.nav-links .nav-link.active {
  color: var(--gold-light);
  background: linear-gradient(
    135deg,
    rgba(217, 182, 93, 0.15),
    rgba(139, 92, 246, 0.08)
  );
  border-color: rgba(217, 182, 93, 0.32);
  box-shadow: inset 0 0 12px rgba(217, 182, 93, 0.04);
}

/* Ícones da navegação */
.nav-links .nav-link i {
  transition: transform 0.25s ease, color 0.25s ease;
}

.nav-links .nav-link:hover i {
  color: var(--gold);
  transform: translateY(-1px);
}

.nav-links .nav-link.active i {
  color: var(--gold-light);
}

/* ========================================
   HBG - ESTATÍSTICAS DO CONSTRUTOR
======================================== */

.hbg-badge-name {
  display: block;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.hbg-badge-description {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}


.hbg-badge-card {
  position: relative;
}

/* HBG - Tooltip dos emblemas */
.hbg-badge-description {
  display: none;
}

.hbg-badge-tooltip {
  position: fixed;
  z-index: 99999;
  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: 220px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--gold, #d9b65d);
  border-radius: 10px;
  background: #171923;
  color: var(--text, #f1eef8);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  font-size: 13px;
  line-height: 1.6;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

#view-inicio .hbg-badge-name,
#view-hgbg .hbg-badge-name {
  display: block;
}

/* HBG - Subir o conteúdo da página Meu Perfil */

/* Esconde as estatísticas quando o painel está fechado */

/* Paginação das publicações do perfil */
.my-rooms-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.my-rooms-page {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: 0.2s ease;
}

.my-rooms-page:hover,
.my-rooms-page.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0d0f14;
}

/* =========================================
   HBG - FÓRUM DA COMUNIDADE
   ========================================= */

#view-forum {
  width: 100%;
  min-width: 0;
  padding-bottom: 60px;
}

/* CABEÇALHO */

#view-forum .hbg-forum-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 170px;
  padding: 30px 36px;
  margin-bottom: 20px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(217,182,93,.11),
      transparent 32%
    ),
    linear-gradient(120deg, #191923, #13151f);

  border: 1px solid #343142;
  border-radius: 16px;
}

#view-forum .hbg-forum-header-content {
  position: relative;
  z-index: 1;
  max-width: 660px;
}

#view-forum .hbg-forum-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: #d9b65d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

#view-forum .hbg-forum-header h1 {
  margin: 0 0 10px;
  color: #ffe3a0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.2;
}

#view-forum .hbg-forum-header p {
  margin: 0;
  color: #a8a4bc;
  font-size: 14px;
  line-height: 1.7;
}

#view-forum #hbg-forum-new-post {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
  min-height: 46px;
  padding: 0 23px;

  color: #17120a;
  background: linear-gradient(135deg, #ffe3a0, #d9b65d);
  border: 1px solid #e9c873;
  border-radius: 10px;

  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

#view-forum #hbg-forum-new-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(217,182,93,.22);
}

/* CATEGORIAS */

#view-forum .hbg-forum-categories {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding: 1px 0 9px;
  scrollbar-width: thin;
}

#view-forum .hbg-forum-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 45px;
  padding: 0 18px;

  color: #bdb8d0;
  background: #1b1c29;
  border: 1px solid #353449;
  border-radius: 10px;

  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .2s ease;
}

#view-forum .hbg-forum-category i {
  font-size: 18px;
}

#view-forum .hbg-forum-category:hover {
  color: #ffe3a0;
  border-color: #d9b65d;
  background: #242231;
}

#view-forum .hbg-forum-category.active {
  color: #17120a;
  background: linear-gradient(135deg, #ffe3a0, #d9b65d);
  border-color: #d9b65d;
  font-weight: 800;
}

/* COLUNAS DO FÓRUM */

#view-forum .hbg-forum-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

#view-forum .hbg-forum-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Aviso temporário enquanto não criamos os posts */

#view-forum .hbg-forum-feed:empty::before {
  content: "As publicações da comunidade aparecerão aqui.";
  display: block;
  padding: 65px 25px;
  text-align: center;
  color: #9996ad;
  background: #171923;
  border: 1px dashed #343449;
  border-radius: 14px;
  font-size: 14px;
}

/* PAINÉIS LATERAIS */

#view-forum .hbg-forum-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#view-forum .hbg-forum-sidebar-card {
  padding: 19px 18px;
  background: linear-gradient(135deg, #191a26, #151620);
  border: 1px solid #303044;
  border-radius: 14px;
  min-width: 0;
}

#view-forum .hbg-forum-sidebar-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 17px;

  color: #ffe3a0;
  font-size: 15px;
  font-weight: 800;
}

#view-forum .hbg-forum-sidebar-card h3 i {
  color: #d9b65d;
  font-size: 21px;
}

/* Espaço temporário para os dados laterais */

#view-forum .hbg-forum-sidebar-card > div:empty {
  min-height: 65px;
  background:
    linear-gradient(
      90deg,
      rgba(153,150,173,.04),
      rgba(153,150,173,.09),
      rgba(153,150,173,.04)
    );
  border-radius: 8px;
}

/* RESPONSIVIDADE */

@media (max-width: 1100px) {
  #view-forum .hbg-forum-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
  }

  #view-forum .hbg-forum-header {
    padding: 25px;
  }
}

@media (max-width: 800px) {
  #view-forum .hbg-forum-layout {
    grid-template-columns: 1fr;
  }

  #view-forum .hbg-forum-sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #view-forum .hbg-forum-header {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding: 24px 18px;
  }

  #view-forum #hbg-forum-new-post {
    width: 100%;
  }

  #view-forum .hbg-forum-sidebar {
    grid-template-columns: 1fr;
  }

  #view-forum .hbg-forum-category {
    min-height: 40px;
    padding: 0 13px;
  }
}


/* =========================================
   HBG - CARDS DE PUBLICAÇÕES DO FÓRUM
   ========================================= */

/* Cartão principal da publicação */

#view-forum .hbg-forum-post {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 185px;
  align-items: start;
  gap: 16px;

  position: relative;
  min-width: 0;
  padding: 18px 20px;

  background: linear-gradient(
    135deg,
    #191a26 0%,
    #151620 100%
  );

  border: 1px solid #303044;
  border-radius: 14px;

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

#view-forum .hbg-forum-post:hover {
  border-color: rgba(217, 182, 93, .42);

  background: linear-gradient(
    135deg,
    #1d1e2d,
    #171823
  );

  box-shadow: 0 5px 22px rgba(0, 0, 0, .16);
  transform: translateY(-1px);
}

/* Avatar do autor */

#view-forum .hbg-forum-post-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 88px;
  height: 88px;

  background: #11131b;
  border: 1px solid #d9b65d;
  border-radius: 10px;
  overflow: hidden;
}

#view-forum .hbg-forum-post-avatar img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Informações da publicação */

#view-forum .hbg-forum-post-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  min-width: 0;
  min-height: 88px;
}

/* Nome do usuário e horário */

#view-forum .hbg-forum-post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 9px;
  font-size: 12px;
}

#view-forum .hbg-forum-post-meta strong {
  color: #f1eef8;
  font-size: 13px;
  font-weight: 800;
}

#view-forum .hbg-forum-post-meta span {
  color: #9996ad;
}

#view-forum .hbg-forum-post-meta .ph-crown {
  color: #d9b65d;
  font-size: 15px;
}

/* Título */

#view-forum .hbg-forum-post-content h3 {
  margin: 0 0 7px;
  color: #f5f2fc;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Texto da publicação */

#view-forum .hbg-forum-post-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;

  margin: 0 0 13px;
  color: #aaa6c2;

  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* Curtidas, comentários e visualizações */

#view-forum .hbg-forum-post-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;

  margin-top: auto;
  color: #aaa6c2;
}

#view-forum .hbg-forum-post-footer span {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font-size: 12px;
  font-weight: 600;
}

#view-forum .hbg-forum-post-footer i {
  font-size: 19px;
}

#view-forum .hbg-forum-post-footer span:first-child i {
  color: #d9b65d;
}

/* Coluna da categoria e imagem */

#view-forum .hbg-forum-post-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 11px;

  min-width: 0;
}

/* Etiquetas das categorias */

#view-forum .hbg-forum-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 11px;
  border-radius: 9px;

  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

#view-forum .hbg-forum-tag i {
  font-size: 15px;
}

#view-forum .hbg-forum-tag.construcao {
  color: #8a9fff;
  background: rgba(100, 114, 255, .13);
}

#view-forum .hbg-forum-tag.emblemas {
  color: #c58cff;
  background: rgba(168, 121, 220, .15);
}

#view-forum .hbg-forum-tag.wired {
  color: #67d6a1;
  background: rgba(69, 201, 130, .13);
}

#view-forum .hbg-forum-tag.eventos {
  color: #ff8390;
  background: rgba(255, 114, 126, .13);
}

/* Miniatura ilustrativa */

#view-forum .hbg-forum-post-cover {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 104px;

  border: 1px solid #373549;
  border-radius: 10px;
  overflow: hidden;

  font-size: 43px;
}

#view-forum .hbg-forum-post-cover.medieval {
  background:
    radial-gradient(circle at 70% 30%,
      rgba(217, 182, 93, .18), transparent 60%),
    linear-gradient(135deg, #312b27, #171923);
}

#view-forum .hbg-forum-post-cover.badges {
  background:
    radial-gradient(circle,
      rgba(168, 121, 220, .22), transparent 65%),
    linear-gradient(135deg, #24203b, #171923);
}

#view-forum .hbg-forum-post-cover.wired {
  background:
    radial-gradient(circle,
      rgba(69, 201, 130, .19), transparent 65%),
    linear-gradient(135deg, #1a2b2a, #171923);
}

#view-forum .hbg-forum-post-cover.events {
  background:
    radial-gradient(circle,
      rgba(255, 114, 126, .19), transparent 65%),
    linear-gradient(135deg, #30202b, #171923);
}

/* RESPONSIVIDADE */

@media (max-width: 1200px) {
  #view-forum .hbg-forum-post {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
  }

  #view-forum .hbg-forum-post-avatar {
    width: 64px;
    height: 64px;
  }

  #view-forum .hbg-forum-post-avatar img {
    width: 58px;
    height: 58px;
  }

  #view-forum .hbg-forum-post-right {
    grid-column: 2;
    align-items: flex-start;
  }

  #view-forum .hbg-forum-post-cover {
    display: none;
  }
}

@media (max-width: 560px) {
  #view-forum .hbg-forum-post {
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 14px 12px;
  }

  #view-forum .hbg-forum-post-avatar {
    width: 48px;
    height: 48px;
  }

  #view-forum .hbg-forum-post-avatar img {
    width: 44px;
    height: 44px;
  }

  #view-forum .hbg-forum-post-content h3 {
    font-size: 15px;
  }

  #view-forum .hbg-forum-post-footer {
    gap: 13px;
  }
}


/* =========================================
   HBG - PAINÉIS LATERAIS DO FÓRUM
   ========================================= */

/* TÓPICOS EM ALTA */

#view-forum .hbg-forum-trending-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#view-forum .hbg-forum-trending-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px;
  background: #1d1e2b;
  border: 1px solid #2e2e40;
  border-radius: 9px;
  transition: .2s ease;
}

#view-forum .hbg-forum-trending-item:hover {
  border-color: rgba(217, 182, 93, .45);
  background: #242433;
}

#view-forum .hbg-forum-trending-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  color: #d9b65d;
  background: rgba(217, 182, 93, .12);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
}

#view-forum .hbg-forum-trending-item > div {
  min-width: 0;
}

#view-forum .hbg-forum-trending-item strong {
  display: block;
  color: #e9e5f3;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#view-forum .hbg-forum-trending-item small {
  display: block;
  margin-top: 5px;
  color: #918da5;
  font-size: 10px;
}

/* MEMBROS EM DESTAQUE */

#view-forum .hbg-forum-members-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#view-forum .hbg-forum-member {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 9px;
  transition: background .2s ease;
}

#view-forum .hbg-forum-member:hover {
  background: #222331;
}

#view-forum .hbg-forum-member-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;

  background: linear-gradient(135deg, #3b304c, #222334);
  border: 1px solid rgba(217, 182, 93, .45);
  border-radius: 10px;

  color: #ffe3a0;
  font-size: 18px;
  font-weight: 800;
}

#view-forum .hbg-forum-member > div {
  min-width: 0;
}

#view-forum .hbg-forum-member strong {
  display: block;
  color: #eeeaf7;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

#view-forum .hbg-forum-member small {
  display: block;
  margin-top: 4px;
  color: #9996ad;
  font-size: 11px;
}

/* ÚLTIMAS INTERAÇÕES */

#view-forum .hbg-forum-activity-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#view-forum .hbg-forum-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2d2d3d;
}

#view-forum .hbg-forum-activity-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#view-forum .hbg-forum-activity-item > i {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 30px;
  height: 30px;

  color: #d9b65d;
  background: rgba(217, 182, 93, .10);
  border-radius: 8px;
  font-size: 16px;
}

#view-forum .hbg-forum-activity-item > div {
  min-width: 0;
}

#view-forum .hbg-forum-activity-item p {
  margin: 0;
  color: #b7b2c8;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#view-forum .hbg-forum-activity-item strong {
  color: #e9e5f3;
}

#view-forum .hbg-forum-activity-item small {
  display: block;
  margin-top: 5px;
  color: #88849d;
  font-size: 10px;
}

/* REGRAS DA COMUNIDADE */

#view-forum .hbg-forum-rules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#view-forum .hbg-forum-rule {
  display: flex;
  align-items: center;
  gap: 11px;
}

#view-forum .hbg-forum-rule span {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 26px;
  height: 26px;

  background: #252434;
  border: 1px solid #484257;
  border-radius: 8px;

  color: #d9b65d;
  font-size: 11px;
  font-weight: 800;
}

#view-forum .hbg-forum-rule p {
  margin: 0;
  color: #b7b2c8;
  font-size: 12px;
  line-height: 1.5;
}

/* ACABAMENTO DOS PAINÉIS */

#view-forum .hbg-forum-sidebar-card {
  box-shadow: 0 5px 18px rgba(0, 0, 0, .10);
  transition: border-color .2s ease;
}

#view-forum .hbg-forum-sidebar-card:hover {
  border-color: rgba(217, 182, 93, .28);
}


/* HBG - Mensagem de categoria vazia */

#view-forum .hbg-forum-empty-category {
  padding: 65px 25px;
  text-align: center;

  color: #aaa6c2;
  background: linear-gradient(135deg, #191a26, #151620);

  border: 1px dashed #3d3950;
  border-radius: 14px;

  font-size: 14px;
  line-height: 1.6;
}


/* =========================================
   HBG - JANELA DE DISCUSSÃO DO FÓRUM
   ========================================= */

#view-forum .hbg-forum-post {
  cursor: pointer;
}

#view-forum .hbg-forum-post:focus-visible {
  outline: 2px solid #d9b65d;
  outline-offset: 3px;
}

#hbg-forum-dialog {
  width: min(680px, calc(100% - 28px));
  max-height: 85vh;
  padding: 0;
  margin: auto;

  color: #f1eef8;
  background: #171923;
  border: 1px solid #4a4056;
  border-radius: 17px;

  box-shadow: 0 24px 80px rgba(0,0,0,.55);
}

#hbg-forum-dialog::backdrop {
  background: rgba(3, 4, 10, .80);
  backdrop-filter: blur(5px);
}

#hbg-forum-dialog .hbg-forum-dialog-content {
  position: relative;
  padding: 32px;
}

#hbg-forum-dialog .hbg-forum-dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;

  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;

  color: #bbb5ce;
  background: #262637;
  border: 1px solid #3b394e;
  border-radius: 9px;
  cursor: pointer;
}

#hbg-forum-dialog .hbg-forum-dialog-close:hover {
  color: #ffe3a0;
  border-color: #d9b65d;
}

#hbg-forum-dialog .hbg-forum-dialog-label {
  display: block;
  margin-bottom: 16px;
  color: #d9b65d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

#hbg-forum-dialog .hbg-forum-dialog-author {
  color: #d9b65d;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

#hbg-forum-dialog .hbg-forum-dialog-title {
  margin: 0 35px 12px 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#hbg-forum-dialog .hbg-forum-dialog-description {
  color: #bcb7ce;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
}

#hbg-forum-dialog .hbg-forum-dialog-divider {
  height: 1px;
  margin: 24px 0;
  background: #353346;
}

#hbg-forum-dialog h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #ffe3a0;
  font-size: 16px;
}

#hbg-forum-dialog .hbg-forum-dialog-comments {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#hbg-forum-dialog .hbg-forum-dialog-comment {
  padding: 15px;
  background: #202130;
  border: 1px solid #343346;
  border-radius: 11px;
}

#hbg-forum-dialog .hbg-forum-dialog-comment p {
  margin: 8px 0 0;
  color: #c4bfd2;
  font-size: 13px;
  line-height: 1.6;
}

#hbg-forum-dialog .hbg-forum-dialog-compose {
  margin-top: 22px;
}

#hbg-forum-dialog .hbg-forum-dialog-compose textarea {
  width: 100%;
  padding: 13px;
  resize: vertical;

  color: #f1eef8;
  background: #11131b;
  border: 1px solid #343346;
  border-radius: 10px;
  font: inherit;
}

#hbg-forum-dialog .hbg-forum-dialog-compose textarea:disabled {
  opacity: .7;
  cursor: not-allowed;
}

#hbg-forum-dialog .hbg-forum-dialog-compose small {
  display: block;
  margin-top: 9px;
  color: #9996ad;
  font-size: 11px;
}

@media (max-width: 560px) {
  #hbg-forum-dialog .hbg-forum-dialog-content {
    padding: 23px 17px;
  }

  #hbg-forum-dialog .hbg-forum-dialog-title {
    font-size: 20px;
  }
}


/* ======================================
   HBG - MODAL DE NOVA PUBLICAÇÃO
====================================== */

#hbg-forum-create-dialog {
  width: min(590px, calc(100% - 28px));
  max-height: 88vh;
  padding: 0;
  margin: auto;
  overflow-y: auto;

  color: #f1eef8;
  background: #171923;
  border: 1px solid #454052;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
}

#hbg-forum-create-dialog::backdrop {
  background: rgba(3,4,10,.82);
  backdrop-filter: blur(5px);
}

/* Cabeçalho */

#hbg-forum-create-dialog .hbg-forum-create-header {
  position: relative;
  padding: 26px 28px 23px;
  background: linear-gradient(120deg,#242130,#191a26);
  border-bottom: 1px solid #343244;
}

#hbg-forum-create-dialog .hbg-forum-create-header span {
  display: block;
  margin-bottom: 10px;
  color: #d9b65d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

#hbg-forum-create-dialog .hbg-forum-create-header h2 {
  margin: 0 40px 7px 0;
  color: #ffe3a0;
  font-size: 25px;
  font-weight: 800;
}

#hbg-forum-create-dialog .hbg-forum-create-header p {
  margin: 0;
  color: #a6a1b9;
  font-size: 13px;
}

#hbg-forum-create-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 34px;
  height: 34px;
  color: #c9c3d5;
  background: #303041;
  border: 1px solid #454052;
  border-radius: 9px;
  cursor: pointer;
}

#hbg-forum-create-close:hover {
  color: #ffe3a0;
  border-color: #d9b65d;
}

/* Formulário */

#hbg-forum-create-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 25px 28px 28px;
}

#hbg-forum-create-form label {
  margin-top: 8px;
  color: #e5e0f0;
  font-size: 13px;
  font-weight: 700;
}

#hbg-forum-create-form input[type="text"],
#hbg-forum-create-form select,
#hbg-forum-create-form textarea {
  width: 100%;
  padding: 13px 14px;
  color: #f1eef8;
  background: #10121b;
  border: 1px solid #363448;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}

#hbg-forum-create-form textarea {
  resize: vertical;
  min-height: 135px;
}

#hbg-forum-create-form input:focus,
#hbg-forum-create-form select:focus,
#hbg-forum-create-form textarea:focus {
  border-color: #d9b65d;
  box-shadow: 0 0 0 3px rgba(217,182,93,.09);
}

#hbg-forum-create-form input[type="file"] {
  width: 100%;
  padding: 12px;
  color: #a9a4bb;
  background: #10121b;
  border: 1px dashed #474255;
  border-radius: 9px;
  font-size: 12px;
}

#hbg-forum-create-preview {
  display: block;
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  background: #10121b;
  border-radius: 10px;
}

#hbg-forum-create-preview[hidden] {
  display: none;
}

/* Botões */

#hbg-forum-create-dialog .hbg-forum-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid #343244;
}

#hbg-forum-create-dialog .hbg-forum-create-actions
button[type="submit"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  #hbg-forum-create-dialog .hbg-forum-create-header,
  #hbg-forum-create-form {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* =========================================
   HBG - FRANK E SOCORRO NO BANNER
========================================= */

#view-forum .hbg-forum-header {
  display: flex;
  align-items: center;
  gap: 25px;
}

#view-forum .hbg-forum-characters {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 245px;
  height: 135px;
  align-self: flex-end;
  margin-bottom: -30px;
  overflow: visible;
}

#view-forum .hbg-forum-character {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}

#view-forum .hbg-forum-character img {
  display: block;
  max-width: none;
  height: 130px;
  width: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

#view-forum .hbg-forum-frank {
  z-index: 1;
}

#view-forum .hbg-forum-socorro {
  z-index: 2;
  margin-left: -12px;
}

#view-forum .hbg-forum-socorro img {
  height: 135px;
}

#view-forum .hbg-forum-chat-bubbles {
  position: absolute;
  top: 0;
  left: 80px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

#view-forum .hbg-forum-chat-bubbles span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  font-size: 29px;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,.4));
}

#view-forum .hbg-forum-header-content {
  flex: 1;
  min-width: 0;
}

@media (max-width: 900px) {
  #view-forum .hbg-forum-characters {
    flex-basis: 155px;
    gap: 0;
  }

  #view-forum .hbg-forum-character img,
  #view-forum .hbg-forum-socorro img {
    height: 95px;
  }

  #view-forum .hbg-forum-chat-bubbles {
    left: 40px;
  }
}

@media (max-width: 650px) {
  #view-forum .hbg-forum-characters {
    display: none;
  }
}



/* =========================================
   HBG - JANELA DE VERIFICAÇÃO DO FÓRUM
   ========================================= */

/* Janela principal */

#hbg-forum-auth-dialog {
  width: min(500px, calc(100% - 28px));
  max-height: 90vh;
  margin: auto;
  padding: 0;
  overflow-y: auto;

  color: var(--text);
  background:
    radial-gradient(
      circle at top,
      rgba(168, 121, 220, .12),
      transparent 65%
    ),
    #171923;

  border: 1px solid rgba(217, 182, 93, .3);
  border-radius: 18px;

  box-shadow:
    0 25px 80px rgba(0, 0, 0, .6),
    0 0 35px rgba(168, 121, 220, .08);
}

/* Fundo escurecido atrás da janela */

#hbg-forum-auth-dialog::backdrop {
  background: rgba(3, 4, 10, .84);
  backdrop-filter: blur(6px);
}

/* Conteúdo */

#hbg-forum-auth-dialog .hbg-forum-auth-content {
  position: relative;
  padding: 34px;
}

/* Botão de fechar */

#hbg-forum-auth-close {
  position: absolute;
  top: 18px;
  right: 18px;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  color: #c9c3d5;
  background: #262637;

  border: 1px solid #454052;
  border-radius: 10px;

  font-size: 18px;
  cursor: pointer;

  transition: .2s ease;
}

#hbg-forum-auth-close:hover {
  color: var(--gold-light);
  background: #343044;
  border-color: var(--gold);
}

/* Cabeçalho */

.hbg-forum-auth-heading {
  padding: 12px 8px 25px;
  margin-bottom: 25px;

  text-align: center;

  border-bottom: 1px solid #343244;
}

/* Ícone principal */

.hbg-forum-auth-heading > i {
  display: grid;
  place-items: center;

  width: 68px;
  height: 68px;

  margin: 0 auto 18px;

  color: var(--gold-light);
  background: rgba(217, 182, 93, .1);

  border: 1px solid rgba(217, 182, 93, .4);
  border-radius: 50%;

  font-size: 34px;

  box-shadow: 0 0 25px rgba(217, 182, 93, .1);
}

/* Título */

.hbg-forum-auth-heading h2 {
  margin: 0 0 10px;

  color: var(--gold-light);

  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.5px;
}

/* Descrição */

.hbg-forum-auth-heading p {
  margin: 0;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* Etapas */

#hbg-forum-auth-step-one,
#hbg-forum-auth-step-two {
  text-align: center;
}

/* Respeitar etapas ocultas */

#hbg-forum-auth-dialog [hidden] {
  display: none !important;
}

/* Textos das etapas */

#hbg-forum-auth-step-one > p,
#hbg-forum-auth-step-two > p {
  margin: 0 0 20px;

  color: #c5c0d2;
  font-size: 13px;
  line-height: 1.7;
}

/* Botões principais */

#hbg-forum-auth-start,
#hbg-forum-auth-complete {
  width: 100%;
  min-height: 46px;

  margin-top: 8px;

  font-weight: 800;
  font-size: 13px;

  border-radius: 11px;
}

#hbg-forum-auth-start i,
#hbg-forum-auth-complete i {
  font-size: 19px;
}

/* Caixa do código de verificação */

.hbg-forum-auth-code {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 14px;

  margin: 15px 0 25px;
  padding: 22px 16px;

  background:
    linear-gradient(
      135deg,
      rgba(217, 182, 93, .08),
      rgba(168, 121, 220, .08)
    );

  border: 1px dashed rgba(217, 182, 93, .5);
  border-radius: 13px;
}

/* Código gerado */

#hbg-forum-auth-code {
  display: block;

  max-width: 100%;

  color: var(--gold-light);

  font-family: monospace;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .7px;

  overflow-wrap: anywhere;
  user-select: all;
  text-align: center;
}

/* Botão copiar */

#hbg-forum-auth-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  padding: 9px 17px;

  color: var(--purple-light);
  background: rgba(168, 121, 220, .1);

  border: 1px solid rgba(168, 121, 220, .35);
  border-radius: 9px;

  font-weight: 700;
  font-size: 12px;

  cursor: pointer;
  transition: .2s ease;
}

#hbg-forum-auth-copy:hover {
  color: #fff;
  background: rgba(168, 121, 220, .22);
  border-color: var(--purple-light);
}

/* Aviso de validade */

#hbg-forum-auth-step-two small {
  display: block;

  margin-top: 17px;

  color: var(--muted);
  font-size: 11px;
}

/* Mensagens de erro e sucesso */

#hbg-forum-auth-message {
  margin: 17px 0 0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#hbg-forum-auth-message:empty {
  display: none;
}

/* Acessibilidade */

#hbg-forum-auth-dialog button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}

/* =========================================
   VERSÃO MOBILE
   ========================================= */

@media (max-width: 560px) {

  #hbg-forum-auth-dialog {
    width: calc(100% - 24px);
    border-radius: 15px;
  }

  #hbg-forum-auth-dialog .hbg-forum-auth-content {
    padding: 26px 18px;
  }

  .hbg-forum-auth-heading h2 {
    font-size: 21px;
  }

  .hbg-forum-auth-heading > i {
    width: 60px;
    height: 60px;
    font-size: 29px;
  }

  #hbg-forum-auth-code {
    font-size: 13px;
    letter-spacing: 0;
  }

  .hbg-forum-auth-code {
    padding: 18px 12px;
  }

}

/* ============================================
   HBG - NOVO DASHBOARD DE ESTATÍSTICAS
   Apenas dentro do botão Estatísticas
============================================ */

/* Container geral */

/* ==========================================
   HBG - ÚLTIMOS CURTIDORES
========================================== */

.hbg-like-hover {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.hbg-like-hover > button:disabled {
  pointer-events: none;
}

.hbg-likers-tooltip {
  position: fixed;
  z-index: 99999;
  width: 245px;
  padding: 15px;
  border: 1px solid #393147;
  border-radius: 14px;
  background: #171923;
  color: #f1eef8;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.hbg-likers-tooltip-title {
  color: #ffe3a0;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}

.hbg-likers-tooltip-user {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
}

.hbg-likers-tooltip-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9px;
  background: #252331;
}

.hbg-likers-tooltip-avatar img {
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}

.hbg-likers-tooltip-name {
  color: #f1eef8;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hbg-likers-tooltip-empty {
  color: #9996ad;
  font-size: 12px;
  line-height: 1.5;
}

/* HBG - Tooltip compacto dos curtidores */

.hbg-likers-tooltip {
  width: 190px;
  padding: 10px 12px;
  border-radius: 10px;
  max-height: 190px;
  overflow-y: auto;
}

.hbg-likers-tooltip-title {
  font-size: 12px;
  margin-bottom: 6px;
}

.hbg-likers-tooltip-user {
  gap: 8px;
  padding: 4px 0;
}

.hbg-likers-tooltip-avatar {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.hbg-likers-tooltip-avatar img {
  max-width: 30px;
  max-height: 30px;
}

.hbg-likers-tooltip-name {
  font-size: 12px;
}

/* HBG - Aumentar rostinhos dos curtidores */

.hbg-likers-tooltip-avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.hbg-likers-tooltip-avatar img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* HBG - Tooltip completo abaixo do coração */

.hbg-likers-tooltip {
  position: absolute;
  width: 205px;
  max-height: none !important;
  overflow: visible;
  padding: 12px;
}

.hbg-likers-tooltip-avatar {
  width: 42px;
  height: 42px;
}

.hbg-likers-tooltip-avatar img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
}


/* ==========================================
   HBG — PERFIL PÚBLICO DOS ARQUITETOS
   ========================================== */

#view-perfil-publico {
  width: 100%;
  animation: hbgPublicFade .3s ease;
}

@keyframes hbgPublicFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hbg-public-profile {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

/* CABEÇALHO */

.hbg-public-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 255px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #111623;
  box-shadow: var(--shadow);
}

.hbg-public-identity {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 25px;
  width: 65%;
  min-width: 0;
}

#hbg-public-avatar {
  width: 145px;
  height: 200px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
  background: radial-gradient(
    ellipse at bottom,
    rgba(217,182,93,.13),
    transparent 70%
  );
}

.hbg-public-identity-info {
  min-width: 0;
}

.hbg-public-label {
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(168,121,220,.35);
  border-radius: 8px;
  background: rgba(168,121,220,.09);
  color: var(--purple-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
}

#hbg-public-username {
  margin: 0 0 8px;
  color: var(--gold-light);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  overflow-wrap: anywhere;
}

#hbg-public-mission {
  margin: 0 0 15px;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

#hbg-public-habbo-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 12px;
}


.hbg-public-banner {
  position: absolute;
  inset: 0 0 0 auto;
  width: 44%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #111623 0%,
      rgba(17, 22, 35, 0.45) 25%,
      transparent 65%
    ),
    url("https://i.imgur.com/I0DQ5TY.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;
}


/* DUAS COLUNAS */

.hbg-public-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.hbg-public-main,
.hbg-public-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

/* PAINÉIS */

.hbg-public-panel {
  min-width: 0;
  padding: 20px;
  background: linear-gradient(
    145deg,
    #171b29,
    #111622
  );
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

.hbg-public-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--gold);
  font-size: 16px;
  font-weight: 800;
}

/* ÁREAS DE CONTEÚDO */

#hbg-public-stats,
#hbg-public-rooms,
#hbg-public-badges,
#hbg-public-achievements {
  min-width: 0;
}

#hbg-public-rooms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#hbg-public-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* RESPONSIVIDADE */

@media (max-width: 900px) {
  .hbg-public-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hbg-public-identity {
    width: 75%;
  }
}

@media (max-width: 600px) {
  .hbg-public-hero {
    padding: 20px 15px;
    min-height: 230px;
  }

  .hbg-public-identity {
    width: 100%;
    gap: 12px;
  }

  #hbg-public-avatar {
    width: 100px;
    height: 165px;
  }

  #hbg-public-username {
    font-size: 23px;
  }

  .hbg-public-banner {
    opacity: .15;
    width: 100%;
  }

  .hbg-public-panel {
    padding: 15px;
  }

  #hbg-public-rooms {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================
   HBG - EMBLEMAS DO PERFIL PÚBLICO
   ========================================== */

#hbg-public-badges .hbg-public-badge-slot {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 95px;
  padding: 12px;

  background: linear-gradient(
    145deg,
    #202436,
    #141824
  );

  border: 1px solid rgba(217, 182, 93, .25);
  border-radius: 12px;

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

#hbg-public-badges .hbg-public-badge-slot:hover {
  transform: translateY(-4px);

  border-color: var(--gold);

  box-shadow:
    0 0 18px rgba(217, 182, 93, .15),
    0 8px 18px rgba(0, 0, 0, .2);
}

#hbg-public-badges .hbg-public-badge-slot img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 60px;

  object-fit: contain;
  image-rendering: pixelated;
}

@media (max-width: 600px) {
  #hbg-public-badges .hbg-public-badge-slot {
    min-height: 78px;
    padding: 8px;
  }

  #hbg-public-badges .hbg-public-badge-slot img {
    max-height: 52px;
  }
}


/* ==========================================
   HBG - ALINHAMENTO DO PERFIL PÚBLICO
   ========================================== */

@media (min-width: 901px) {

  #view-perfil-publico .hbg-public-profile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
  }

  /* Cabeçalho do arquiteto à esquerda */
  #view-perfil-publico .hbg-public-hero {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
  }

  /* Permite organizar os painéis individualmente */
  #view-perfil-publico .hbg-public-layout,
  #view-perfil-publico .hbg-public-sidebar {
    display: contents;
  }

  /* Estatísticas e publicações à esquerda */
  #view-perfil-publico .hbg-public-main {
    grid-column: 1;
    grid-row: 2;
  }

  /* Emblemas ao lado do cabeçalho */
  #view-perfil-publico .hbg-public-sidebar
  > .hbg-public-panel:first-child {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
  }

  /* Conquistas abaixo dos emblemas */
  #view-perfil-publico .hbg-public-sidebar
  > .hbg-public-panel:last-child {
    grid-column: 2;
    grid-row: 2;
  }

}


/* ==========================================
   HBG - ILUMINAÇÃO DO AVATAR PÚBLICO
   ========================================== */

#view-perfil-publico .hbg-public-identity {
  position: relative;
  isolation: isolate;
}

/* Alinha o conjunto à esquerda, sem alterar os elementos internos */
@media (min-width: 901px) {
  #view-perfil-publico .hbg-public-identity {
transform: translateX(-39px);
  }
}

/* Holofote suave atrás do personagem */
#view-perfil-publico .hbg-public-identity::before {
  content: "";
  position: absolute;
  left: 15px;
  top: -5px;
  width: 175px;
  height: 225px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(122, 129, 218, 0.24) 0%,
    rgba(95, 105, 195, 0.14) 40%,
    rgba(65, 75, 145, 0.06) 65%,
    transparent 85%
  );
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}

/* Sombra centralizada sob os pés */
#view-perfil-publico .hbg-public-identity::after {
  content: "";
  position: absolute;
  left: 34px;
bottom: 13px;
  width: 135px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.12) 75%,
    transparent 100%
  );
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}

/* Personagem na frente da iluminação */
#view-perfil-publico #hbg-public-avatar {
  position: relative;
  z-index: 1;
  background: transparent;
  image-rendering: pixelated;
  filter: drop-shadow(
    0 7px 8px rgba(0, 0, 0, 0.25)
  );
  transform: translate(25px, 6px);
}

/* Ajustes para celulares */
@media (max-width: 600px) {
  #view-perfil-publico .hbg-public-identity::before {
    left: 0;
    width: 115px;
    height: 185px;
  }

  #view-perfil-publico .hbg-public-identity::after {
    left: 15px;
    width: 95px;
    height: 25px;
  }
}


/* ==========================================
   HBG - INFORMAÇÕES DO PERFIL PÚBLICO
   ========================================== */

#view-perfil-publico .hbg-public-identity-info {
  min-width: 0;
  position: relative;
  z-index: 2;
}

/* Informações abaixo da descrição */
#view-perfil-publico .hbg-public-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 0 0 20px;
}

#view-perfil-publico .hbg-public-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9b5d2;
  font-size: 12px;
}

#view-perfil-publico .hbg-public-meta-item i {
  color: var(--blue);
  font-size: 18px;
}

/* Botões do cabeçalho */
#view-perfil-publico .hbg-public-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#view-perfil-publico .hbg-public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 42px;
  padding: 10px 18px;

  border: 1px solid rgba(217, 182, 93, 0.35);
  border-radius: 9px;

  background: linear-gradient(
    135deg,
    #232436,
    #151a29
  );

  color: #f1eef8;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

#view-perfil-publico .hbg-public-btn i {
  color: var(--gold);
  font-size: 19px;
}

#view-perfil-publico .hbg-public-btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: #292a40;
}

/* Compensa a barra superior ao navegar aos quartos */
#view-perfil-publico #hbg-public-rooms {
  scroll-margin-top: 110px;
}

/* Ajuste para telas menores */
@media (max-width: 600px) {
  #view-perfil-publico .hbg-public-meta {
    gap: 8px;
    margin-bottom: 14px;
  }

  #view-perfil-publico .hbg-public-btn {
    padding: 9px 13px;
    font-size: 11px;
  }
}


/* HBG - Cabeçalho público mais compacto */

#view-perfil-publico .hbg-public-hero {
  padding: 18px 24px;
}

#view-perfil-publico .hbg-public-identity-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

#view-perfil-publico .hbg-public-label {
  margin-bottom: 0;
}

#view-perfil-publico #hbg-public-username {
  margin: 0;
}

#view-perfil-publico #hbg-public-mission {
  margin: 0;
}

#view-perfil-publico .hbg-public-meta {
  margin: 0 0 4px;
}


/* ==========================================
   HBG - VITRINE PÚBLICA COMPACTA
   3 EMBLEMAS POR LINHA
   ========================================== */

#view-perfil-publico #hbg-public-badges {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  justify-content: center;
  gap: 12px;
}

/* Quadradinhos no estilo da vitrine original */
#view-perfil-publico #hbg-public-badges .hbg-public-badge-slot {
  width: 70px;
  height: 70px;
  min-height: 0;
  padding: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(15, 18, 28, 0.35);
  border: 1px dashed rgba(217, 182, 93, 0.38);
  border-radius: 7px;
}

/* Emblemas com tamanho original preservado */
#view-perfil-publico #hbg-public-badges .hbg-public-badge-slot img {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}


/* HBG - Emblemas públicos iguais aos do Meu Perfil */

#view-perfil-publico #hbg-public-badges {
  grid-template-columns: repeat(3, 44px);
  justify-content: center;
  gap: 5px;
}

#view-perfil-publico #hbg-public-badges .hbg-public-badge-slot {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 3px;
  border-radius: 4px;
  background: transparent;
}

#view-perfil-publico #hbg-public-badges .hbg-public-badge-slot img {
  max-width: 100%;
  max-height: 38px;
}


/* HBG - Conquistas logo abaixo dos emblemas */

@media (min-width: 901px) {

  #view-perfil-publico .hbg-public-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;

    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  #view-perfil-publico .hbg-public-sidebar
  > .hbg-public-panel:first-child {
    height: auto;
    grid-column: auto;
    grid-row: auto;
  }

  #view-perfil-publico .hbg-public-sidebar
  > .hbg-public-panel:last-child {
    grid-column: auto;
    grid-row: auto;
  }

}

/* HBG - Reduzir espaço acima do Perfil Público */

#view-perfil-publico {
  margin-top: -20px;
}


/* ==========================================
   HBG - PUBLICAÇÕES DO PERFIL PÚBLICO
   ========================================== */

#view-perfil-publico #hbg-public-rooms {
  gap: 14px;
  align-items: stretch;
}

#view-perfil-publico #hbg-public-rooms .room-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(145deg, #202436, #151925);
  border: 1px solid rgba(217, 182, 93, 0.22);
  border-radius: 12px;
  overflow: hidden;
}

#view-perfil-publico #hbg-public-rooms .room-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(217, 182, 93, 0.12);
}

#view-perfil-publico #hbg-public-rooms .room-image-holder {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

#view-perfil-publico #hbg-public-rooms .room-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px;
}

#view-perfil-publico #hbg-public-rooms .room-title-row h4 {
  color: var(--gold-light);
  font-size: 15px;
}

#view-perfil-publico #hbg-public-rooms .room-footer {
  margin-top: auto;
  padding-top: 12px;
}


/* HBG - Publicações compactas do Perfil Público */

#view-perfil-publico #hbg-public-rooms {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

#view-perfil-publico #hbg-public-rooms > .room-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border-radius: 8px;
}

#view-perfil-publico #hbg-public-rooms .room-image-holder {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}

#view-perfil-publico #hbg-public-rooms .room-image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#view-perfil-publico #hbg-public-rooms .room-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 8px;
  min-width: 0;
}

#view-perfil-publico #hbg-public-rooms .room-title-row h4 {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
}

#view-perfil-publico #hbg-public-rooms .room-author {
  gap: 4px;
  font-size: 9px;
  min-width: 0;
  overflow-wrap: anywhere;
}

#view-perfil-publico #hbg-public-rooms .author-avatar {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#view-perfil-publico #hbg-public-rooms .room-desc {
  min-height: 0;
  font-size: 9px;
  line-height: 1.4;
}

#view-perfil-publico #hbg-public-rooms .room-footer {
  margin-top: auto;
  padding-top: 6px;
  gap: 5px;
  flex-wrap: wrap;
}

#view-perfil-publico #hbg-public-rooms .icon-btn {
  padding: 4px;
  font-size: 9px;
}

/* Responsividade */
@media (max-width: 900px) {
  #view-perfil-publico #hbg-public-rooms {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #view-perfil-publico #hbg-public-rooms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* HBG - Publicações públicas em largura total */

@media (min-width: 901px) {

  /* Libera os painéis da coluna esquerda */
  #view-perfil-publico .hbg-public-main {
    display: contents;
  }

  /* Estatísticas continuam à esquerda */
  #view-perfil-publico .hbg-public-main
  > .hbg-public-panel:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  /* Publicações abaixo das conquistas, ocupando tudo */
  #view-perfil-publico .hbg-public-main
  > .hbg-public-panel:last-child {
    grid-column: 1 / -1;
    grid-row: 3;
  }

}



/* HBG - Atividade da Galeria e Fórum */

#view-perfil-publico .hbg-public-activity-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 18px;
  min-width: 0;
}

#view-perfil-publico .hbg-public-activity-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#view-perfil-publico .hbg-public-activity-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 105px;
  padding: 14px;
  border: 1px solid #292b3a;
  border-radius: 12px;
  background: linear-gradient(145deg, #202436, #151925);
}

#view-perfil-publico .hbg-public-activity-icon {
  flex-shrink: 0;
  padding: 8px;
  font-size: 19px;
  border-radius: 9px;
  background: #262039;
}

#view-perfil-publico .hbg-public-activity-card strong {
  display: block;
  margin-bottom: 8px;
  color: #d9b65d;
  font-size: 12px;
}

#view-perfil-publico .hbg-public-activity-card p {
  margin: 0;
  color: #aaa5bd;
  font-size: 11px;
  overflow-wrap: anywhere;
}

#view-perfil-publico .hbg-public-topics-empty {
  margin: 0;
  color: #aaa5bd;
  font-size: 12px;
}

/* Organiza os novos painéis no desktop */
@media (min-width: 901px) {

  #view-perfil-publico .hbg-public-main
  > .hbg-public-activity-layout {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  #view-perfil-publico .hbg-public-main
  > .hbg-public-panel:last-child {
    grid-column: 1 / -1;
    grid-row: 4;
  }
}


/* ==========================================
   HBG — TÓPICOS RECENTES PREMIUM
========================================== */

.hbg-topics-panel {
  background: linear-gradient(
    145deg,
    #191b27 0%,
    #13151e 100%
  );
  border: 1px solid rgba(217, 182, 93, .18);
  border-radius: 16px;
  padding: 22px;
  overflow: hidden;
}

/* Cabeçalho */

.hbg-topics-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.hbg-topics-heading-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #e4bf6b;
  font-size: 23px;
  background: rgba(217,182,93,.1);
  border: 1px solid rgba(217,182,93,.2);
}

.hbg-topics-heading-text {
  min-width: 0;
}

.hbg-topics-heading-text h2 {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 800;
  color: #f3eefa;
}

.hbg-topics-heading-text p {
  margin: 5px 0 0;
  color: #9996ad;
  font-size: 12px;
  line-height: 1.5;
}

/* Lista */

#hbg-public-recent-topics {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}

/* Cards gerados pelo JavaScript */

#hbg-public-recent-topics > :not(.hbg-public-topics-empty) {
  min-width: 0;
  padding: 15px 17px;
  background: linear-gradient(
    115deg,
    rgba(34,36,51,.95),
    rgba(25,26,39,.95)
  );
  border: 1px solid #303044;
  border-left: 3px solid #a879dc;
  border-radius: 11px;
  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

#hbg-public-recent-topics > :not(.hbg-public-topics-empty):hover {
  transform: translateY(-2px);
  border-color: rgba(217,182,93,.5);
  border-left-color: #d9b65d;
  background: #232435;
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

/* Títulos dos tópicos */

#hbg-public-recent-topics h3,
#hbg-public-recent-topics h4 {
  margin: 0 0 9px;
  color: #f1eef8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#hbg-public-recent-topics a {
  color: #f1eef8;
  text-decoration: none;
  transition: color .2s ease;
}

#hbg-public-recent-topics a:hover {
  color: #ffe3a0;
}

/* Informações secundárias */

#hbg-public-recent-topics small,
#hbg-public-recent-topics time {
  color: #9996ad;
  font-size: 11px;
}

#hbg-public-recent-topics .hbg-topic-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: #aaa6bd;
  font-size: 11px;
}

#hbg-public-recent-topics .hbg-topic-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #c7a0ff;
  background: rgba(168,121,220,.12);
  border: 1px solid rgba(168,121,220,.2);
}

/* Estado vazio */

#hbg-public-recent-topics .hbg-public-topics-empty {
  margin: 0;
  padding: 28px 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: #9996ad;
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
}

/* Responsividade */

@media (max-width: 600px) {
  .hbg-topics-panel {
    padding: 16px;
  }

  .hbg-topics-heading-text h2 {
    font-size: 14px;
  }

  #hbg-public-recent-topics > :not(.hbg-public-topics-empty) {
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hbg-public-recent-topics > * {
    transition: none;
  }
}


/* HBG — AJUSTE FINAL DOS TÓPICOS RECENTES */

.hbg-topics-panel .hbg-topics-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 0 0 16px;
  margin: 0 0 18px;
}

.hbg-topics-panel .hbg-topics-heading-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  flex: 0 0 42px;
}

.hbg-topics-panel .hbg-topics-heading-text {
  flex: 1;
  min-width: 0;
}

.hbg-topics-panel .hbg-topics-heading-text h2 {
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  margin: 0 !important;
}

.hbg-topics-panel .hbg-topics-heading-text p {
  font-size: 11px;
  line-height: 1.5;
  margin: 4px 0 0;
  text-align: left;
}

#hbg-public-recent-topics {
  gap: 10px;
}

#hbg-public-recent-topics > :not(.hbg-public-topics-empty) {
  min-height: 90px;
  padding: 15px 17px;
  border-left: 3px solid #a879dc;
  border-radius: 12px;
}

/* Separar categoria e data */

.hbg-topic-recent-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hbg-topic-recent-date {
  font-size: 11px !important;
  color: #aaa5bd !important;
}

/* Títulos dourados dos tópicos */

#hbg-public-recent-topics .hbg-topic-recent-title {
  color: #d9b65d !important;
  font-weight: 700;
  font-size: 14px;
}


/* ==========================================
   HBG — TÓPICOS CLICÁVEIS
========================================== */

#hbg-public-recent-topics .hbg-topic-clickable {
  cursor: pointer;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

#hbg-public-recent-topics .hbg-topic-clickable:hover {
  transform: translateY(-3px);
  border-left-color: #d9b65d;
  box-shadow: 0 8px 24px rgba(168,121,220,.15);
}

#hbg-public-recent-topics .hbg-topic-clickable:focus-visible {
  outline: 2px solid #d9b65d;
  outline-offset: 3px;
}

#hbg-public-recent-topics .hbg-topic-clickable:active {
  transform: scale(.99);
}


/* ==========================================
   HBG — CENTRAL DE NOTIFICAÇÕES
========================================== */

.auth-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hbg-notifications {
  position: relative;
  display: flex;
  align-items: center;
}

.hbg-notif-trigger {
  position: relative;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  color: #d9b65d;
  font-size: 22px;
  background: #1b1c29;
  border: 1px solid #363348;
  border-radius: 12px;
  transition: .2s ease;
}

.hbg-notif-trigger:hover,
.hbg-notif-trigger[aria-expanded="true"] {
  background: #292538;
  border-color: #d9b65d;
  box-shadow: 0 0 15px rgba(217,182,93,.12);
}

.hbg-notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 20px;
  color: #fff;
  background: #e05268;
  font-size: 10px;
  font-weight: 800;
  border: 2px solid #0d0f14;
}

/* Janela */

.hbg-notif-dropdown {
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  z-index: 200;
  width: 365px;
  max-width: calc(100vw - 24px);
  overflow: hidden;
  color: #f1eef8;
  background: #171923;
  border: 1px solid #393349;
  border-radius: 16px;
  box-shadow: 0 20px 55px rgba(0,0,0,.5);
}

/* Cabeçalho */

.hbg-notif-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg,#242034,#171923);
  border-bottom: 1px solid #343045;
}

.hbg-notif-header h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #f1eef8;
  font-size: 16px;
  font-weight: 800;
}

.hbg-notif-header h3 i {
  color: #d9b65d;
  font-size: 21px;
}

.hbg-notif-header p {
  margin: 5px 0 0;
  color: #9996ad;
  font-size: 11px;
}

.hbg-notif-close {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  color: #aaa6bd;
  background: #302c3e;
}

/* Ações */

.hbg-notif-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid #292b3a;
}

.hbg-notif-actions span {
  color: #aaa6bd;
  font-size: 11px;
}

.hbg-notif-actions button {
  border: 0;
  background: transparent;
  color: #d9b65d;
  font-size: 11px;
  font-weight: 700;
}

.hbg-notif-actions button:disabled {
  opacity: .4;
  cursor: default;
}

/* Lista */

.hbg-notif-list {
  max-height: 390px;
  overflow-y: auto;
}

.hbg-notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 190px;
  padding: 30px 15px;
  text-align: center;
}

.hbg-notif-empty > i {
  font-size: 37px;
  color: #d9b65d;
  opacity: .65;
}

.hbg-notif-empty strong {
  font-size: 13px;
  color: #f1eef8;
}

.hbg-notif-empty p {
  margin: 0;
  color: #9996ad;
  font-size: 11px;
}

/* Preparação visual dos futuros avisos */

.hbg-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid #292b3a;
  transition: background .2s;
}

.hbg-notif-item:hover {
  background: #222333;
}

.hbg-notif-item.unread {
  background: rgba(168,121,220,.07);
  border-left: 3px solid #a879dc;
}

.hbg-notif-item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #302a40;
  color: #d9b65d;
  font-size: 18px;
}

.hbg-notif-item-content {
  min-width: 0;
  flex: 1;
}

.hbg-notif-item-content strong {
  display: block;
  font-size: 12px;
  color: #f1eef8;
}

.hbg-notif-item-content p {
  margin: 5px 0;
  font-size: 11px;
  color: #aaa6bd;
  overflow-wrap: anywhere;
}

.hbg-notif-item-content small {
  color: #d9b65d;
  font-size: 10px;
}

/* Rodapé */

.hbg-notif-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 13px;
  background: #13151e;
  border-top: 1px solid #292b3a;
  color: #d9b65d;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

@media (max-width: 600px) {
  .hbg-notif-dropdown {
    right: -60px;
    width: min(350px, calc(100vw - 24px));
  }
}


/* HBG - Marcar notificação como lida */

.hbg-notif-mark-read {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 9px;
  border: 1px solid rgba(217,182,93,.3);
  border-radius: 7px;
  background: rgba(217,182,93,.08);
  color: #d9b65d;
  font-size: 10px;
  font-weight: 700;
  transition: .2s ease;
}

.hbg-notif-mark-read:hover {
  background: rgba(217,182,93,.18);
  border-color: #d9b65d;
}


/* ==========================================
   HBG — QUARTO DESTACADO NO PERFIL PÚBLICO
========================================== */

#hbg-public-rooms .hbg-room-notification-highlight {
  border: 2px solid #d9b65d !important;
  box-shadow:
    0 0 0 3px rgba(217,182,93,.15),
    0 0 30px rgba(217,182,93,.28) !important;

  animation: hbgPublicRoomGlow 1.5s ease-in-out 2;
  scroll-margin-top: 120px;
}

@keyframes hbgPublicRoomGlow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(217,182,93,.2);
  }

  50% {
    box-shadow: 0 0 35px rgba(217,182,93,.55);
  }
}


/* ==========================================
   HBG — ZOOM PREMIUM DAS CONSTRUÇÕES
========================================== */

/* Fundo escuro do modal */

.image-zoom-modal {
  z-index: 300;
  padding: 24px;
  background: rgba(4, 5, 10, .94);
  backdrop-filter: blur(8px);
  overflow-y: auto;
}

/* Estrutura principal */

.hbg-zoom-card {
  position: relative;
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #171923;
  border: 1px solid rgba(217, 182, 93, .55);
  border-radius: 18px;
  box-shadow:
    0 20px 80px rgba(0, 0, 0, .65),
    0 0 35px rgba(217, 182, 93, .08);
  cursor: default;
}

/* Cabeçalho */

.hbg-zoom-header {
  padding: 22px 60px 18px 24px;
  background: linear-gradient(135deg, #252134, #171923);
  border-bottom: 1px solid rgba(217, 182, 93, .2);
  flex-shrink: 0;
}

.hbg-zoom-header span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #a879dc;
}

.hbg-zoom-header h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
  color: #d9b65d;
  overflow-wrap: anywhere;
}

/* Imagem ampliada */

.hbg-zoom-image-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  flex: 1 1 auto;
  padding: 16px;
  background: #0d0f14;
}

.hbg-zoom-image-area img {
  display: block;
  max-width: 100%;
  max-height: 55vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid #524630;
  border-radius: 9px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .4);
}

/* Rodapé com autor e descrição */

.hbg-zoom-footer {
  padding: 18px 24px 22px;
  border-top: 1px solid rgba(217, 182, 93, .2);
  background: #191a26;
  overflow-y: auto;
  flex-shrink: 1;
}

.hbg-zoom-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hbg-zoom-avatar {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #d9b65d;
  border-radius: 50%;
  background: #272335;
}

.hbg-zoom-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hbg-zoom-author small,
.hbg-zoom-description small {
  display: block;
  color: #9996ad;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

.hbg-zoom-author strong {
  display: block;
  margin-top: 3px;
  color: #d9b65d;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.hbg-zoom-description {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #343044;
}

.hbg-zoom-description p {
  margin: 8px 0 0;
  color: #d0ccda;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Botão de fechar */

.hbg-zoom-card .close-image-zoom {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: #302b3d;
  border: 1px solid #50455c;
  color: #f1eef8;
  border-radius: 10px;
}

.hbg-zoom-card .close-image-zoom:hover {
  color: #d9b65d;
  border-color: #d9b65d;
}

/* Ajustes para celulares */

@media (max-width: 600px) {
  .image-zoom-modal {
    padding: 12px;
  }

  .hbg-zoom-card {
    max-height: calc(100vh - 24px);
  }

  .hbg-zoom-header {
    padding: 18px 55px 14px 16px;
  }

  .hbg-zoom-header h2 {
    font-size: 17px;
  }

  .hbg-zoom-image-area {
    padding: 10px;
  }

  .hbg-zoom-image-area img {
    max-height: 43vh;
  }

  .hbg-zoom-footer {
    padding: 15px 16px;
  }
}


/* ==========================================
   HBG — CORREÇÃO DO ZOOM PREMIUM
========================================== */

/* Centralizar a janela na tela */
#image-zoom-modal.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
  overflow-y: auto;

  background: rgba(4, 5, 10, .94);
  backdrop-filter: blur(8px);
}

/* Caixa principal */
#image-zoom-modal .hbg-zoom-card {
  position: relative;
  display: flex;
  flex-direction: column;

  width: min(900px, 100%);
  max-height: calc(100dvh - 40px);
  height: auto;

  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;

  border: 1px solid rgba(217, 182, 93, .55);
  border-radius: 18px;
  background: #171923;
}

/* Título separado da imagem */
#image-zoom-modal .hbg-zoom-header {
  position: relative;
  flex: 0 0 auto;
  padding: 22px 65px 20px 24px;
  background: linear-gradient(135deg, #252134, #171923);
  border-bottom: 1px solid rgba(217,182,93,.25);
}

/* Área da imagem */
#image-zoom-modal .hbg-zoom-image-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 100%;
  min-height: 0;
  height: auto;
  padding: 20px;

  background: #0d0f14;
}

/* Remove interferências do CSS antigo */
#image-zoom-modal .hbg-zoom-image-area img {
  position: static !important;
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 45dvh !important;

  margin: 0 auto;
  transform: none !important;

  object-fit: contain;
  border: 1px solid #524630;
  border-radius: 9px;
}

/* Rodapé sem cortar informações */
#image-zoom-modal .hbg-zoom-footer {
  position: relative;
  flex: 0 0 auto;

  width: 100%;
  height: auto;

  padding: 20px 24px;
  overflow: visible;

  background: #191a26;
  border-top: 1px solid rgba(217,182,93,.2);
}

/* Botão fechar sempre no canto */
#image-zoom-modal .close-image-zoom {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;

  width: 38px;
  height: 38px;
  z-index: 10;
}

/* Telas menores */
@media (max-width: 600px) {
  #image-zoom-modal.image-zoom-modal {
    padding: 10px;
  }

  #image-zoom-modal .hbg-zoom-card {
    max-height: calc(100dvh - 20px);
  }

  #image-zoom-modal .hbg-zoom-image-area {
    padding: 12px;
  }

  #image-zoom-modal .hbg-zoom-image-area img {
    max-height: 38dvh !important;
  }

  #image-zoom-modal .hbg-zoom-footer {
    padding: 16px;
  }
}


/* ==========================================
   HBG — ZOOM COMPACTO E FOTO MAIOR
========================================== */

/* Fundo e centralização */
#image-zoom-modal.image-zoom-modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  overflow: auto;
}

/* Moldura acompanha a imagem */
#image-zoom-modal .hbg-zoom-card {
  width: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  height: auto;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #d9b65d;
  border-radius: 13px;
}

/* Título logo acima da foto */
#image-zoom-modal .hbg-zoom-header {
  flex: 0 0 auto;
  padding: 10px 52px 10px 16px;
  background: #1c1b29;
}

#image-zoom-modal .hbg-zoom-header span {
  margin-bottom: 2px;
  font-size: 9px;
}

#image-zoom-modal .hbg-zoom-header h2 {
  margin: 0;
  font-size: 17px;
}

/* Elimina o espaço vazio ao redor */
#image-zoom-modal .hbg-zoom-image-area {
  display: flex;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 6px;
  background: #0d0f14;
}

/* Foto maior, sem cortes ou distorções */
#image-zoom-modal .hbg-zoom-image-area img {
  position: static !important;
  display: block;
  width: auto !important;
  height: min(58dvh, 650px) !important;
  max-width: min(86vw, 1050px) !important;
  max-height: none !important;
  object-fit: contain;
  margin: 0 !important;
  transform: none !important;
  border: 1px solid #54472f;
  border-radius: 6px;
}

/* Informações próximas da imagem */
#image-zoom-modal .hbg-zoom-footer {
  flex: 0 0 auto;
  width: 100%;
  padding: 12px 16px;
  overflow: visible;
  background: #191a26;
}

#image-zoom-modal .hbg-zoom-avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
}

#image-zoom-modal .hbg-zoom-author {
  gap: 10px;
}

#image-zoom-modal .hbg-zoom-author strong {
  font-size: 13px;
}

#image-zoom-modal .hbg-zoom-description {
  margin-top: 10px;
  padding-top: 9px;
}

#image-zoom-modal .hbg-zoom-description p {
  margin-top: 4px;
  font-size: 12px;
}

/* Botão fechar menor */
#image-zoom-modal .close-image-zoom {
  top: 9px;
  right: 9px;
  width: 30px;
  height: 30px;
  font-size: 21px;
}

/* Celulares */
@media (max-width: 600px) {
  #image-zoom-modal .hbg-zoom-image-area img {
    height: auto !important;
    max-height: 52dvh !important;
    max-width: calc(100vw - 48px) !important;
  }

  #image-zoom-modal .hbg-zoom-header {
    padding: 10px 46px 10px 12px;
  }

  #image-zoom-modal .hbg-zoom-footer {
    padding: 12px;
  }
}

/* HBG — Ajuste fino do zoom */

#image-zoom-modal .hbg-zoom-card {
  max-height: calc(100dvh - 20px);
}

#image-zoom-modal .hbg-zoom-image-area img {
  height: min(54dvh, 650px) !important;
}

#image-zoom-modal .hbg-zoom-header {
  padding-top: 8px;
  padding-bottom: 8px;
}

#image-zoom-modal .hbg-zoom-footer {
  padding-top: 10px;
  padding-bottom: 10px;
}

#image-zoom-modal .hbg-zoom-description {
  margin-top: 7px;
  padding-top: 7px;
}


/* ==========================================
   HBG — ZOOM UM POUCO MAIOR
========================================== */

/* A moldura acompanha a foto */
#image-zoom-modal .hbg-zoom-card {
  width: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 16px);
}

/* Foto aproximadamente 10% maior */
#image-zoom-modal .hbg-zoom-image-area img {
  height: min(60dvh, 700px) !important;
  max-width: min(92vw, 1150px) !important;
  max-height: none !important;
}

/* Cabeçalho acompanha o tamanho */
#image-zoom-modal .hbg-zoom-header {
  padding: 11px 55px 11px 18px;
}

#image-zoom-modal .hbg-zoom-header h2 {
  font-size: 19px;
}

/* Informações proporcionais */
#image-zoom-modal .hbg-zoom-footer {
  padding: 13px 18px;
}

#image-zoom-modal .hbg-zoom-avatar {
  width: 43px;
  height: 43px;
  flex-basis: 43px;
}

#image-zoom-modal .hbg-zoom-author strong {
  font-size: 14px;
}

#image-zoom-modal .hbg-zoom-description p {
  font-size: 13px;
}

/* Mantém tudo dentro da tela em celulares */
@media (max-width: 600px) {
  #image-zoom-modal .hbg-zoom-image-area img {
    height: auto !important;
    max-height: 48dvh !important;
    max-width: calc(100vw - 48px) !important;
  }
}


/* ==========================================
   HBG — ZOOM SEM BARRA DE ROLAGEM
========================================== */

/* Centraliza sem criar rolagem */
#image-zoom-modal.image-zoom-modal {
  overflow: hidden !important;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Moldura compacta */
#image-zoom-modal .hbg-zoom-card {
  width: fit-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: hidden !important;
}

/* A imagem cresce até onde a tela permitir */
#image-zoom-modal .hbg-zoom-image-area img {
  width: auto !important;
  height: auto !important;

  max-width: min(92vw, 1150px) !important;
  max-height: min(52dvh, 620px) !important;

  object-fit: contain;
}

/* Cabeçalho mais compacto */
#image-zoom-modal .hbg-zoom-header {
  padding: 8px 50px 8px 15px;
}

#image-zoom-modal .hbg-zoom-header h2 {
  font-size: 18px;
}

/* Rodapé mais compacto */
#image-zoom-modal .hbg-zoom-footer {
  padding: 9px 15px;
  overflow: visible;
}

#image-zoom-modal .hbg-zoom-avatar {
  width: 39px;
  height: 39px;
  flex-basis: 39px;
}

#image-zoom-modal .hbg-zoom-description {
  margin-top: 6px;
  padding-top: 6px;
}

#image-zoom-modal .hbg-zoom-description p {
  margin-top: 3px;
  font-size: 12px;
}

/* Adaptação para celulares */
@media (max-width: 600px) {
  #image-zoom-modal .hbg-zoom-image-area img {
    max-width: calc(100vw - 36px) !important;
    max-height: 40dvh !important;
  }
}


/* ==========================================
   HBG — SETAS DISCRETAS DO ZOOM
========================================== */

/* Área usada para posicionar os botões */
#image-zoom-modal .hbg-zoom-image-area {
  position: relative;
}

/* Botões quase invisíveis */
#image-zoom-modal .hbg-zoom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 37px;
  height: 62px;

  border: 1px solid transparent;
  border-radius: 10px;

  background: rgba(15, 15, 25, .12);
  color: rgba(255, 255, 255, .35);

  font-size: 25px;
  cursor: pointer;

  opacity: .28;
  transition:
    opacity .2s ease,
    background .2s ease,
    color .2s ease;
}

/* Posicionamento */
#image-zoom-modal .hbg-zoom-prev {
  left: 9px;
}

#image-zoom-modal .hbg-zoom-next {
  right: 9px;
}

/* Aparecem discretamente ao passar o mouse */
#image-zoom-modal .hbg-zoom-image-area:hover .hbg-zoom-arrow {
  opacity: .55;
}

#image-zoom-modal .hbg-zoom-arrow:hover {
  opacity: 1 !important;
  background: rgba(15, 15, 25, .72);
  color: #d9b65d;
  border-color: rgba(217, 182, 93, .3);
}

/* Acessibilidade com teclado */
#image-zoom-modal .hbg-zoom-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid #d9b65d;
  outline-offset: 2px;
}

/* Celulares */
@media (max-width: 600px) {
  #image-zoom-modal .hbg-zoom-arrow {
    width: 30px;
    height: 49px;
    font-size: 20px;
    opacity: .5;
  }

  #image-zoom-modal .hbg-zoom-prev {
    left: 5px;
  }

  #image-zoom-modal .hbg-zoom-next {
    right: 5px;
  }
}


/* ==========================================
   HBG — PERFIL E CURTIDAS NO ZOOM
========================================== */

/* Avatar e nome clicáveis */

#image-zoom-modal .hbg-zoom-avatar,
#image-zoom-modal #hbg-zoom-username {
  cursor: pointer;
  transition: .2s ease;
}

#image-zoom-modal .hbg-zoom-avatar:hover {
  border-color: #ffe3a0;
  box-shadow: 0 0 15px rgba(217,182,93,.35);
}

#image-zoom-modal #hbg-zoom-username:hover {
  color: #ffe3a0;
  text-decoration: underline;
}

/* Área do botão de curtidas */

#image-zoom-modal .hbg-zoom-like-area {
  margin-top: 12px;
}

/* Botão */

#image-zoom-modal .hbg-zoom-like-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;

  padding: 9px 14px;
  border: 1px solid #393345;
  border-radius: 10px;

  background: #252335;
  color: #cbc5d7;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
  transition: .2s ease;
}

#image-zoom-modal .hbg-zoom-like-btn i {
  font-size: 19px;
  color: #ff727e;
}

#image-zoom-modal .hbg-zoom-like-btn:hover:not(:disabled) {
  background: rgba(255,114,126,.12);
  border-color: #ff727e;
  transform: translateY(-1px);
}

/* Quando o usuário já curtiu */

#image-zoom-modal .hbg-zoom-like-btn.liked {
  background: rgba(255,114,126,.13);
  border-color: rgba(255,114,126,.5);
  color: #ffe2e6;
}

#image-zoom-modal .hbg-zoom-like-btn.liked i {
  color: #ff727e;
}

/* Próprio quarto */

#image-zoom-modal .hbg-zoom-like-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Foco para acessibilidade */

#image-zoom-modal .hbg-zoom-like-btn:focus-visible {
  outline: 2px solid #d9b65d;
  outline-offset: 3px;
}


/* ==========================================
   HBG — CORAÇÃO AO LADO DO AUTOR NO ZOOM
========================================== */

/* Autor à esquerda e coração à direita */

#image-zoom-modal .hbg-zoom-author-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

#image-zoom-modal .hbg-zoom-author {
  min-width: 0;
  flex: 1;
}

/* Remove a aparência de botão grande */

#image-zoom-modal .hbg-zoom-like-area {
  margin: 0;
  flex-shrink: 0;
}

#image-zoom-modal .hbg-zoom-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 5px;
  border: 0;
  border-radius: 8px;

  background: transparent !important;
  box-shadow: none;

  color: #d0ccda;
  font-size: 13px;
  cursor: pointer;
}

#image-zoom-modal .hbg-zoom-like-btn:hover:not(:disabled) {
  background: rgba(255, 114, 126, .08) !important;
  border: 0;
  transform: none;
}

/* Coração */

#image-zoom-modal .hbg-zoom-like-btn i {
  font-size: 23px;
  color: #ff727e;
  transition: transform .2s ease;
}

#image-zoom-modal .hbg-zoom-like-btn:hover:not(:disabled) i {
  transform: scale(1.15);
}

/* Curtido: coração preenchido */

#image-zoom-modal .hbg-zoom-like-btn.liked i {
  font-weight: bold;
  color: #ff727e;
}

/* Esconde o texto, mantém a função no JavaScript */

/* Evita que o botão curtir fique grande */

#image-zoom-modal .hbg-zoom-like-btn:disabled {
  opacity: .5;
}


/* ==========================================
   HBG — NOVA JANELA PREMIUM DO FÓRUM
   DESIGN EM DUAS COLUNAS
========================================== */

#hbg-forum-dialog {
  width: min(1280px, calc(100vw - 36px));
  max-width: 1280px;
  max-height: calc(100dvh - 30px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9b65d;
  border-radius: 20px;
  background: #11121c;
  color: #f1eef8;
  box-shadow: 0 25px 90px rgba(0,0,0,.7);
}

#hbg-forum-dialog::backdrop {
  background: rgba(3,4,10,.88);
  backdrop-filter: blur(9px);
}

/* ESTRUTURA PRINCIPAL */

#hbg-forum-dialog .hbg-discussion-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  height: min(85dvh, 840px);
  max-height: calc(100dvh - 30px);
  overflow: hidden;
}

/* FECHAR */

#hbg-forum-dialog .hbg-forum-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #66502e;
  border-radius: 50%;
  color: #ffe3a0;
  background: #171923;
}

/* COLUNA ESQUERDA */

#hbg-forum-dialog .hbg-discussion-post {
  min-width: 0;
  padding: 28px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 5% 0%, rgba(168,121,220,.13), transparent 50%),
    #151621;
}

#hbg-forum-dialog .hbg-discussion-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 23px;
  padding: 7px 14px;
  border: 1px solid #d9b65d;
  border-radius: 20px;
  color: #ffe3a0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

#hbg-forum-dialog .hbg-discussion-authorbar {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}

#hbg-forum-dialog .hbg-discussion-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 2px solid #d9b65d;
  border-radius: 13px;
  background: #28263c;
  overflow: hidden;
}

#hbg-forum-dialog .hbg-discussion-avatar-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  image-rendering: pixelated;
}

#hbg-forum-dialog .hbg-discussion-author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#hbg-forum-dialog .hbg-forum-dialog-author {
  color: #f1eef8;
  font-size: 15px;
  margin: 0;
  overflow-wrap: anywhere;
}

#hbg-forum-dialog .hbg-discussion-date {
  color: #9996ad;
  font-size: 11px;
}

#hbg-forum-dialog .hbg-discussion-category {
  margin-left: auto;
  padding: 6px 11px;
  border: 1px solid rgba(168,121,220,.6);
  border-radius: 20px;
  color: #ddc0ff;
  background: rgba(168,121,220,.16);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

#hbg-forum-dialog .hbg-forum-dialog-title {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
}

#hbg-forum-dialog .hbg-forum-dialog-description {
  color: #c5bfd5;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* IMAGEM OPCIONAL */

#hbg-forum-dialog .hbg-discussion-media[hidden] {
  display: none !important;
}

#hbg-forum-dialog .hbg-discussion-media {
  margin: 22px 0;
  padding: 7px;
  border: 1px solid #d9b65d;
  border-radius: 13px;
  background: #0d0f14;
}

#hbg-forum-dialog .hbg-discussion-photo {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
}

#hbg-forum-dialog .hbg-discussion-post-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid #363345;
  color: #9996ad;
  font-size: 11px;
}

#hbg-forum-dialog .hbg-discussion-post-bottom i {
  color: #d9b65d;
  font-size: 19px;
}

/* COLUNA DIREITA */

#hbg-forum-dialog .hbg-discussion-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 24px 18px 18px;
  border-left: 1px solid #343044;
  background: #11131e;
}

#hbg-forum-dialog .hbg-discussion-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 48px 17px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #343044;
}

#hbg-forum-dialog .hbg-discussion-comments-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

#hbg-forum-dialog .hbg-discussion-comments-header i {
  color: #d9b65d;
  font-size: 23px;
}

#hbg-forum-dialog .hbg-discussion-comments-header h3 {
  margin: 0;
  font-size: 17px;
  color: #f1eef8;
}

/* COMENTÁRIOS */

#hbg-forum-dialog .hbg-forum-dialog-comments {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 10px;
  overflow-y: auto;
  padding-right: 5px;
}

#hbg-forum-dialog .hbg-forum-dialog-comment {
  margin: 0;
  padding: 14px;
  border: 1px solid #323044;
  border-radius: 13px;
  background: #1b1d2a;
}

#hbg-forum-dialog .hbg-forum-dialog-comment strong {
  color: #d9b65d;
  font-size: 13px;
}

#hbg-forum-dialog .hbg-forum-dialog-comment p {
  margin: 7px 0 0;
  color: #d0ccda;
  font-size: 13px;
  line-height: 1.6;
}

/* CAMPO DE COMENTAR */

#hbg-forum-dialog .hbg-forum-dialog-compose {
  flex-shrink: 0;
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #55416c;
  border-radius: 13px;
  background: #1b192a;
}

#hbg-forum-dialog #hbg-forum-comment-text {
  min-height: 72px;
  padding: 12px;
  background: #12131d;
  border: 1px solid #534566;
  border-radius: 9px;
  color: #f1eef8;
  resize: vertical;
}

#hbg-forum-dialog #hbg-forum-comment-text:focus {
  border-color: #d9b65d;
  outline: none;
}

#hbg-forum-dialog .hbg-forum-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 11px;
}

#hbg-forum-dialog #hbg-forum-comment-status {
  color: #9996ad;
  font-size: 10px;
}

#hbg-forum-dialog #hbg-forum-comment-send {
  min-height: 35px;
  padding: 8px 14px;
}

/* RESPONSIVIDADE */

@media (max-width: 800px) {
  #hbg-forum-dialog .hbg-discussion-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100dvh - 30px);
    overflow-y: auto;
  }

  #hbg-forum-dialog .hbg-discussion-post {
    padding: 22px 16px;
    overflow: visible;
  }

  #hbg-forum-dialog .hbg-discussion-right {
    min-height: 400px;
    padding: 18px 14px;
    border-left: 0;
    border-top: 1px solid #343044;
  }

  #hbg-forum-dialog .hbg-forum-dialog-comments {
    max-height: 300px;
  }

  #hbg-forum-dialog .hbg-discussion-authorbar {
    flex-wrap: wrap;
  }

  #hbg-forum-dialog .hbg-discussion-category {
    margin-left: 0;
  }
}


/* ==========================================
   HBG — OCULTAR BARRAS DE ROLAGEM DO FÓRUM
========================================== */

#hbg-forum-dialog,
#hbg-forum-dialog .hbg-discussion-layout,
#hbg-forum-dialog .hbg-discussion-post,
#hbg-forum-dialog .hbg-discussion-right,
#hbg-forum-dialog .hbg-forum-dialog-comments {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#hbg-forum-dialog::-webkit-scrollbar,
#hbg-forum-dialog .hbg-discussion-layout::-webkit-scrollbar,
#hbg-forum-dialog .hbg-discussion-post::-webkit-scrollbar,
#hbg-forum-dialog .hbg-discussion-right::-webkit-scrollbar,
#hbg-forum-dialog .hbg-forum-dialog-comments::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* ==========================================
   HBG — CORRIGIR COMENTÁRIOS DO FÓRUM
========================================== */

/* Aproveitar melhor a altura da tela */
#hbg-forum-dialog .hbg-discussion-layout {
  height: min(94dvh, 850px);
  max-height: calc(100dvh - 16px);
}

/* Organizar a coluna direita */
#hbg-forum-dialog .hbg-discussion-right {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 16px;
  overflow: hidden;
}

/* Cabeçalho compacto */
#hbg-forum-dialog .hbg-discussion-comments-header {
  flex-shrink: 0;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

/* Área dos comentários ganha espaço */
#hbg-forum-dialog .hbg-forum-dialog-comments {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 100px;
  max-height: none;
  overflow-y: auto;
  gap: 10px;
  padding: 4px 2px 8px;
}

/* Caixa de escrever menor */
#hbg-forum-dialog #hbg-forum-comment-form {
  flex: 0 0 auto;
  margin-top: 8px;
  padding: 10px;
  gap: 8px;
}

/* Reduz o textarea enorme */
#hbg-forum-dialog #hbg-forum-comment-text {
  display: block;
  width: 100%;
  height: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 10px 12px;
  resize: none;
}

/* Botão e mensagem de status */
#hbg-forum-dialog .hbg-forum-comment-actions {
  margin-top: 4px;
  gap: 8px;
}

/* Em telas muito baixas, preserva a rolagem */
@media (max-height: 600px) {
  #hbg-forum-dialog .hbg-discussion-right {
    overflow-y: auto;
  }

  #hbg-forum-dialog .hbg-forum-dialog-comments {
    min-height: 110px;
  }
}


/* HBG — ALINHAR AVATAR E NICK NOS COMENTÁRIOS */

#hbg-forum-dialog .hbg-forum-dialog-comment {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  column-gap: 12px;
}

#hbg-forum-dialog .hbg-forum-comment-avatar {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 46px;
  object-fit: contain;
}

#hbg-forum-dialog .hbg-forum-comment-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  text-align: left;
}

#hbg-forum-dialog .hbg-forum-comment-body strong {
  display: block;
  margin: 0 0 5px;
  color: #d9b65d;
}

#hbg-forum-dialog .hbg-forum-comment-body p {
  margin: 0;
  line-height: 1.6;
}


/* ==========================================
   HBG — CURTIDAS REAIS DO FÓRUM
========================================== */

#view-forum .hbg-forum-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;

  color: #aaa6c2;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;

  font-size: 12px;
  font-weight: 700;
  cursor: pointer;

  transition: all .2s ease;
}

#view-forum .hbg-forum-like-btn i {
  font-size: 19px;
  color: #d9b65d;
}

#view-forum .hbg-forum-like-btn:hover {
  background: rgba(255, 114, 126, .10);
  border-color: rgba(255, 114, 126, .25);
  color: #ff727e;
}

/* Quando a publicação estiver curtida */
#view-forum .hbg-forum-like-btn.is-liked {
  color: #ff727e;
  background: rgba(255, 114, 126, .10);
  border-color: rgba(255, 114, 126, .28);
}

#view-forum .hbg-forum-like-btn.is-liked i {
  color: #ff727e;
}

#view-forum .hbg-forum-like-btn:disabled {
  opacity: .6;
  cursor: wait;
}


/* HBG - Engrenagem dos emblemas públicos */

#view-perfil-publico .hbg-public-badges-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

#view-perfil-publico .hbg-public-badges-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 16px;
}

#view-perfil-publico .hbg-public-badges-gear {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217,182,93,.25);
  border-radius: 8px;
  background: #202131;
  color: #d9b65d;
  cursor: pointer;
  transition: .2s ease;
}

#view-perfil-publico .hbg-public-badges-gear i {
  font-size: 18px;
}

#view-perfil-publico .hbg-public-badges-gear:hover {
  background: rgba(217,182,93,.12);
  border-color: #d9b65d;
  transform: rotate(35deg);
}

#view-perfil-publico .hbg-public-badges-gear[hidden] {
  display: none;
}


/* HBG — Janela de seleção de emblemas */

#hbg-public-badge-modal {
  width: min(960px, 94vw);
  max-height: 88vh;
  padding: 24px;
  overflow-y: auto;
  background: #151824;
  color: #f1eef8;
  border: 1px solid #4c405a;
  border-radius: 16px;
  box-shadow: 0 24px 80px #000a;
}

#hbg-public-badge-modal::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(5px);
}

#hbg-public-badge-modal .hbg-public-badge-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #353246;
}

#hbg-public-badge-modal h3 {
  margin: 0 0 6px;
  color: #d9b65d;
  font-size: 20px;
}

#hbg-public-badge-modal .hbg-public-badge-modal-top p {
  margin: 0;
  color: #9996ad;
  font-size: 13px;
}

#hbg-public-badge-modal .hbg-public-badge-modal-close {
  background: #242638;
  border: 1px solid #454259;
  border-radius: 9px;
  color: #f1eef8;
  padding: 9px 11px;
  cursor: pointer;
}

#hbg-public-badge-modal .profile-badges-settings-header {
  display: none;
}

/* Grade compacta de emblemas */

#hbg-public-badge-modal #profile-badges-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, 48px);
  justify-content: start;
  align-content: start;
  gap: 6px;
  max-height: 55vh;
  margin-bottom: 20px;
  padding: 6px 0;
  overflow-y: auto;
  scrollbar-width: none;
}

#hbg-public-badge-modal #profile-badges-collection::-webkit-scrollbar {
  display: none;
}

#hbg-public-badge-modal .hbg-badge-card {
  width: 48px;
  height: 48px;
  padding: 3px;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
}

#hbg-public-badge-modal .hbg-badge-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
}

#hbg-public-badge-modal .hbg-badge-card > span,
#hbg-public-badge-modal .hbg-badge-card > p,
#hbg-public-badge-modal .hbg-badge-card > small {
  display: none;
}

#hbg-public-badge-modal .hbg-badge-card.is-featured {
  border-color: #d9b65d;
  background: rgba(217, 182, 93, .12);
}

#hbg-public-badge-modal .hbg-badge-card.hbg-rarity-known img {
  filter:
    drop-shadow(0 0 3px var(--hbg-rarity-color))
    drop-shadow(0 0 7px var(--hbg-rarity-color));
}

#hbg-public-badge-modal #btn-save-badges {
  margin-top: 8px;
}

/* HBG - Prévia dos 6 emblemas no editor */

#hbg-public-badge-modal .hbg-public-badge-preview {
  padding: 18px;
  margin-bottom: 22px;
  background: #1c1f2c;
  border: 1px solid #37394b;
  border-radius: 12px;
}

#hbg-public-badge-modal .hbg-public-badge-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

#hbg-public-badge-modal .hbg-public-badge-preview-header strong {
  color: #d9b65d;
  font-size: 15px;
}

#hbg-public-badge-modal .hbg-public-badge-preview-header span {
  color: #9996ad;
  font-size: 12px;
}

#hbg-public-badge-modal .hbg-public-badge-preview-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

#hbg-public-badge-modal .hbg-public-preview-slot {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141722;
  border: 1px dashed #555069;
  border-radius: 9px;
  color: #69667c;
  font-size: 15px;
  font-weight: 700;
  transition: .2s ease;
}

#hbg-public-badge-modal .hbg-public-preview-slot.is-filled {
  border-style: solid;
  border-color: rgba(217,182,93,.5);
  background: rgba(217,182,93,.05);
}

#hbg-public-badge-modal .hbg-public-preview-slot img {
  max-width: 50px;
  max-height: 50px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* HBG — VITRINE COMPACTA NO CABEÇALHO DO EDITOR */

#hbg-public-badge-modal .hbg-public-badge-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
}

/* Remove a caixa grande da prévia */

#hbg-public-badge-modal .hbg-public-badge-preview {
  width: auto;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}

/* Oculta o título repetido da vitrine */

#hbg-public-badge-modal .hbg-public-badge-preview-header {
  display: none;
}

/* Os seis emblemas ficam lado a lado */

#hbg-public-badge-modal .hbg-public-badge-preview-grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

/* Quadradinhos pequenos */

#hbg-public-badge-modal .hbg-public-preview-slot {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  padding: 3px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 1px dashed rgba(217,182,93,.38);
  border-radius: 5px;

  color: #777185;
  font-size: 12px;
  font-weight: 700;

  box-sizing: border-box;
}

/* Emblemas preenchidos */

#hbg-public-badge-modal .hbg-public-preview-slot.is-filled {
  background: transparent;
  border-color: rgba(217,182,93,.45);
}

/* Imagens em tamanho compacto */

#hbg-public-badge-modal .hbg-public-preview-slot img {
  width: auto;
  height: auto;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Brilho dos emblemas conforme a raridade */

#hbg-public-badge-modal
.hbg-public-preview-slot.hbg-rarity-known img {
  filter:
    drop-shadow(0 0 3px var(--hbg-rarity-color))
    drop-shadow(0 0 7px var(--hbg-rarity-color));
}

/* Ajuste para telas menores */

@media (max-width: 850px) {
  #hbg-public-badge-modal .hbg-public-badge-modal-top {
    flex-wrap: wrap;
  }

  #hbg-public-badge-modal .hbg-public-badge-modal-close {
    margin-left: auto;
    order: 2;
  }

  #hbg-public-badge-modal .hbg-public-badge-preview {
    order: 3;
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
  }
}


/* HBG - Emblemas próximos ao título */

@media (min-width: 851px) {
  #hbg-public-badge-modal .hbg-public-badge-modal-top {
    justify-content: flex-start;
    gap: 16px;
  }

  #hbg-public-badge-modal .hbg-public-badge-preview {
    margin: 0 0 0 12px;
    flex-shrink: 0;
  }

  /* Mantém o X no canto direito */
  #hbg-public-badge-modal .hbg-public-badge-modal-close {
    margin-left: auto;
    flex-shrink: 0;
  }
}


/* HBG — Ocultar barra de rolagem do editor de emblemas */

#hbg-public-badge-modal {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* Edge antigo */
}

#hbg-public-badge-modal::-webkit-scrollbar {
  display: none;               /* Chrome, Opera e Edge */
  width: 0;
  height: 0;
}


/* HBG - Raridades nos emblemas do Perfil Público */

#view-perfil-publico
#hbg-public-badges
.hbg-public-badge-slot.hbg-rarity-known {
  border-color: var(--hbg-rarity-color);

  box-shadow:
    0 0 5px color-mix(
      in srgb,
      var(--hbg-rarity-color) 35%,
      transparent
    );
}

#view-perfil-publico
#hbg-public-badges
.hbg-public-badge-slot.hbg-rarity-known img {
  filter:
    drop-shadow(0 0 3px var(--hbg-rarity-color))
    drop-shadow(0 0 7px var(--hbg-rarity-color));

  image-rendering: pixelated;
}

/* HBG — Visualização completa de Estatísticas */

/* HBG - Olhinho de visualizações dentro do zoom */

#image-zoom-modal .hbg-zoom-like-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

#image-zoom-modal .hbg-zoom-views {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  color: var(--gold-light);
  font-size: 19px;
  cursor: default;
}


/* ==========================================
   HBG - CONFIGURAÇÕES DOS QUARTOS
========================================== */

/* Permitir que o menu apareça fora do card */
.room-card {
  position: relative;
  overflow: visible;
}

.room-image-holder {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Card com menu aberto fica acima dos outros */
.room-card:hover,
.room-card:focus-within {
  z-index: 30;
}

/* Engrenagem */
.hbg-room-config {
  position: relative;
  margin-left: auto;
}

.hbg-room-config-trigger {
  color: var(--gold-light);
  cursor: pointer;
  font-size: 18px;
}

/* Menu suspenso */
.hbg-room-config-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;

  width: 205px;
  padding: 8px;

  background: #202130;
  border: 1px solid #51452e;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
}

/* Abrir somente ao clicar na engrenagem.
   O efeito hover antigo fazia o menu piscar nos cards compactos. */
.hbg-room-config.is-open .hbg-room-config-menu {
  display: block;
}

/* Opções */
.hbg-room-config-menu button {
  display: flex;
  align-items: center;
  gap: 10px;

  width: 100%;
  padding: 11px 12px;

  border: none;
  border-radius: 8px;
  background: transparent;

  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.hbg-room-config-menu button:hover:not(:disabled) {
  background: #302d40;
}

/* Editar descrição (ainda desativado) */
.hbg-room-config-menu button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Excluir publicação */
.hbg-room-config-delete {
  color: var(--red) !important;
}


/* ==========================================
   HBG - CORREÇÃO DO MENU DE CONFIGURAÇÕES
========================================== */

/* Permitir que o menu saia dos limites dos cards */
#view-inicio #featured-rooms > .room-card,
#view-galeria #all-rooms > .room-card,
#view-perfil-publico #hbg-public-rooms > .room-card {
  position: relative;
  overflow: visible !important;
}

/* Deixar o card ativo acima dos demais */
#view-inicio #featured-rooms > .room-card:hover,
#view-galeria #all-rooms > .room-card:hover,
#view-perfil-publico #hbg-public-rooms > .room-card:hover,
#view-inicio #featured-rooms > .room-card:focus-within,
#view-galeria #all-rooms > .room-card:focus-within,
#view-perfil-publico #hbg-public-rooms > .room-card:focus-within {
  z-index: 100;
}

/* Menu abaixo da engrenagem */
.hbg-room-config-menu {
  top: 100%;
  bottom: auto;
  right: 0;
  z-index: 110;
}

/* Nos primeiros cards, abrir para a direita */
#view-inicio #featured-rooms > .room-card:nth-child(-n+2)
.hbg-room-config-menu,
#view-perfil-publico #hbg-public-rooms > .room-card:nth-child(-n+2)
.hbg-room-config-menu {
  left: 0;
  right: auto;
}

/* Preservar as bordas arredondadas das imagens */
.room-card > .room-image-holder {
  border-radius: 8px 8px 0 0;
}


/* HBG - Janela de edição de descrição */

#hbg-edit-description-modal {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 26px;
  border: 1px solid #d9b65d;
  border-radius: 16px;
  background: #171923;
  color: #f1eef8;
  box-shadow: 0 20px 70px #000b;
}

#hbg-edit-description-modal::backdrop {
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(5px);
}

.hbg-edit-description-header h2 {
  margin: 0 0 8px;
  color: #ffe3a0;
  font-size: 20px;
}

.hbg-edit-description-header p {
  color: #aaa5bd;
  font-size: 13px;
  margin-bottom: 24px;
}

#hbg-edit-description-modal label {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 600;
}

#hbg-edit-description-text {
  width: 100%;
  min-height: 170px;
  padding: 14px;
  resize: vertical;
  background: #101119;
  border: 1px solid #393447;
  border-radius: 10px;
  color: #f1eef8;
  font: inherit;
  font-size: 13px;
  outline: none;
}

#hbg-edit-description-text:focus {
  border-color: #d9b65d;
}

.hbg-edit-description-error {
  color: #ff727e;
  font-size: 12px;
}

.hbg-edit-description-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.hbg-edit-description-actions button {
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid #393447;
  background: #252335;
  color: #f1eef8;
  cursor: pointer;
}

.hbg-edit-description-actions .hbg-edit-save {
  background: #d9b65d;
  color: #171923;
  border-color: #d9b65d;
  font-weight: 700;
}

.hbg-edit-description-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}


/* HBG - Datas da publicação no zoom */

#image-zoom-modal .hbg-zoom-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
}

#hbg-zoom-published-date {
  color: #aaa5bd;
}

#hbg-zoom-edited-date {
  color: #bd8cff;
}

#hbg-zoom-edited-date[hidden] {
  display: none !important;
}


/* ==========================================
   HBG - CORRIGIR DATAS CORTADAS NO ZOOM
========================================== */

/* Permitir que todas as informações apareçam */
#image-zoom-modal .hbg-zoom-card {
  max-height: calc(100dvh - 16px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Reservar espaço para o rodapé e as datas */
#image-zoom-modal .hbg-zoom-image-area img {
  max-height: min(42dvh, 520px) !important;
}

/* Não comprimir o rodapé */
#image-zoom-modal .hbg-zoom-footer {
  flex-shrink: 0;
}

/* Datas organizadas e compactas */
#image-zoom-modal .hbg-zoom-dates {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}


/* ==========================================
   HBG - EDITAR DESCRIÇÃO DO PERFIL PÚBLICO
========================================== */

/* Descrição pessoal */
#view-perfil-publico #hbg-public-mission {
  transition: color .2s ease;
}

/* Destaque ao passar o mouse, apenas para o dono */
#view-perfil-publico
#hbg-public-mission[title="Clique para editar sua descrição"]:hover {
  color: #ffe3a0;
}

/* Caixa de edição */
#view-perfil-publico .hbg-public-description-editor {
  width: 100%;
  max-width: 480px;
  margin: 8px 0 14px;
  padding: 14px;

  background: rgba(18, 20, 30, .95);
  border: 1px solid rgba(217, 182, 93, .35);
  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

/* Campo de texto */
#view-perfil-publico .hbg-public-description-editor textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  padding: 12px;
  resize: vertical;

  background: #101119;
  border: 1px solid #393447;
  border-radius: 8px;

  color: #f1eef8;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;

  outline: none;
  transition: border-color .2s;
}

#view-perfil-publico .hbg-public-description-editor textarea:focus {
  border-color: #d9b65d;
  box-shadow: 0 0 0 2px rgba(217, 182, 93, .1);
}

/* Botões */
#view-perfil-publico .hbg-public-description-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

#view-perfil-publico .hbg-public-description-actions button {
  padding: 8px 14px;
  border-radius: 8px;

  font-size: 12px;
  font-weight: 600;
  cursor: pointer;

  transition: .2s ease;
}

/* Cancelar */
#view-perfil-publico .hbg-desc-cancel {
  background: #252335;
  border: 1px solid #393447;
  color: #c7c2d4;
}

#view-perfil-publico .hbg-desc-cancel:hover {
  background: #302d40;
}

/* Salvar */
#view-perfil-publico .hbg-desc-save {
  background: #d9b65d;
  border: 1px solid #d9b65d;
  color: #171923;
}

#view-perfil-publico .hbg-desc-save:hover {
  background: #ffe3a0;
}

/* Mensagens de erro */
#view-perfil-publico .hbg-desc-error {
  display: block;
  color: #ff727e;
  font-size: 11px;
  margin-top: 8px;
}

#view-perfil-publico .hbg-desc-error:empty {
  display: none;
}

/* ==========================================
   HBG - PESQUISA DO PERFIL PÚBLICO
========================================== */

#view-perfil-publico .hbg-public-search {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 14px 0 22px;
}

/* Campo de pesquisa */
#view-perfil-publico #hbg-public-room-search {
  width: 100%;
  height: 43px;
  padding: 0 42px 0 42px;

  background: #11131d;
  border: 1px solid #353244;
  border-radius: 11px;

  color: #f1eef8;
  font-family: inherit;
  font-size: 12px;

  outline: none;
  transition: all .2s ease;
}

#view-perfil-publico #hbg-public-room-search::placeholder {
  color: #858097;
}

/* Destaque ao pesquisar */
#view-perfil-publico #hbg-public-room-search:focus {
  border-color: #d9b65d;
  background: #171923;
  box-shadow: 0 0 0 3px rgba(217, 182, 93, .08);
}

/* Ícone de lupa */
#view-perfil-publico .hbg-public-search > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);

  color: #d9b65d;
  font-size: 17px;
  pointer-events: none;
}

/* Botão de limpar */
#view-perfil-publico #hbg-public-room-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);

  width: 28px;
  height: 28px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: transparent;
  border: none;
  border-radius: 7px;
  color: #9996ad;

  cursor: pointer;
  transition: .2s ease;
}

#view-perfil-publico #hbg-public-room-search-clear:hover {
  background: #292638;
  color: #ffe3a0;
}

/* Esconder o X quando a pesquisa estiver vazia */
#view-perfil-publico
#hbg-public-room-search:placeholder-shown
~ #hbg-public-room-search-clear {
  opacity: 0;
  pointer-events: none;
}

/* Ajuste para celulares */
@media (max-width: 600px) {
  #view-perfil-publico .hbg-public-search {
    max-width: 100%;
  }
}


/* HBG - Título e pesquisa lado a lado */

#view-perfil-publico .hbg-publications-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 380px);
  align-items: center;
  column-gap: 18px;
  row-gap: 20px;
}

#view-perfil-publico .hbg-publications-panel > h2 {
  margin: 0;
}

#view-perfil-publico .hbg-publications-panel > .hbg-public-search {
  width: 100%;
  max-width: none;
  margin: 0;
}

#view-perfil-publico .hbg-publications-panel > #hbg-public-rooms,
#view-perfil-publico .hbg-publications-panel > #hbg-public-pagination {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Em telas menores, volta a ficar um abaixo do outro */
@media (max-width: 740px) {
  #view-perfil-publico .hbg-publications-panel {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}


/* ==========================================
   HBG - PARTICIPAÇÃO NO FÓRUM
   PERFIL PÚBLICO
========================================== */

/* Nova seção abaixo da Atividade na Galeria */
#view-perfil-publico .hbg-public-forum-section {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Título */
#view-perfil-publico .hbg-public-forum-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: #f1eef8;
  font-size: 17px;
  font-weight: 700;
}

#view-perfil-publico .hbg-public-forum-section h3 i {
  color: #bd8cff;
  font-size: 22px;
}

/* Cartões do Fórum */
#view-perfil-publico
.hbg-public-forum-section .hbg-public-activity-card {
  min-height: 125px;
  padding: 17px;
  align-items: flex-start;
  background: linear-gradient(145deg, #202436, #151925);
  border: 1px solid #302d40;
  transition: border-color .2s, transform .2s;
}

/* Efeito ao passar o mouse */
#view-perfil-publico
.hbg-public-forum-section .hbg-public-activity-card:hover {
  border-color: rgba(168,121,220,.5);
  transform: translateY(-2px);
}

/* Ícones */
#view-perfil-publico
.hbg-public-forum-section .hbg-public-activity-icon {
  background: #292039;
  border-radius: 10px;
  padding: 10px;
  font-size: 21px;
}

/* Nomes das estatísticas */
#view-perfil-publico
.hbg-public-forum-section .hbg-public-activity-card strong {
  color: #d9b65d;
  font-size: 12px;
  margin-bottom: 9px;
}

/* Números em destaque */
#view-perfil-publico
.hbg-public-forum-section .hbg-public-activity-card p {
  color: #f1eef8;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
}

/* Celulares */
@media (max-width: 600px) {
  #view-perfil-publico
  .hbg-public-forum-section .hbg-public-activity-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   HBG - SIMPLIFICAR ESTATÍSTICAS
   ACESSADAS PELO PERFIL PÚBLICO
========================================== */

/* ==========================================
   HBG - ESTATÍSTICAS INDEPENDENTES
========================================== */

#view-estatisticas {
  width: 100%;
}

#view-estatisticas .hbg-stats-standalone {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

/* Painel principal */
#view-estatisticas #profile-stats-section {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Área principal e barra lateral */
#view-estatisticas .hbg-stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 295px;
  align-items: start;
  gap: 20px;
}

#view-estatisticas .hbg-stats-main,
#view-estatisticas .hbg-stats-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Cartões */
#view-estatisticas .hbg-stats-panel,
#view-estatisticas .hbg-stats-side-card {
  min-width: 0;
  padding: 24px;
  background: linear-gradient(145deg, #191b26, #12141c);
  border: 1px solid rgba(217, 182, 93, .17);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
}

/* Cabeçalhos */
#view-estatisticas .hbg-stats-heading,
#view-estatisticas .hbg-stats-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #303040;
}

#view-estatisticas .hbg-stats-heading h3 {
  color: #ffe3a0;
  font-size: 23px;
}

#view-estatisticas .hbg-stats-section-heading h3 {
  color: #f1eef8;
  font-size: 17px;
}

/* Contadores superiores */
#view-estatisticas .hbg-stats-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px;
  margin-top: 20px;
}

#view-estatisticas .hbg-stats-summary-grid .profile-stat-card {
  min-width: 0;
  padding: 16px;
  background: #151720;
  border: 1px solid #303040;
  border-radius: 12px;
}

/* Mantém oculto o contador de emblemas */
#view-estatisticas
.profile-stat-card:has(#hbg-stats-featured-count) {
  display: none !important;
}

/* Mantém ocultas as seções repetidas */
#view-estatisticas
section[aria-labelledby="hbg-stats-gallery-title"],

#view-estatisticas
section[aria-labelledby="hbg-stats-forum-title"] {
  display: none !important;
}

/* Responsividade */
@media (max-width: 900px) {
  #view-estatisticas .hbg-stats-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  #view-estatisticas .hbg-stats-standalone {
    padding: 12px;
  }

  #view-estatisticas .hbg-stats-summary-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================
   HBG - TOOLTIP PERSONALIZADO DE VISUALIZAÇÕES
========================================== */

.hbg-room-views {
  position: relative;
  overflow: visible;
}

/* Caixa do tooltip */
.hbg-room-views::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -5px);

  width: max-content;
  max-width: 220px;
  padding: 9px 14px;

  background: #171923;
  border: 1px solid var(--gold);
  border-radius: 10px;

  color: var(--gold-light);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, .45),
    0 0 12px rgba(217, 182, 93, .12);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 200;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

/* Setinha do tooltip */
.hbg-room-views::before {
  content: "";
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;

  width: 10px;
  height: 10px;

  background: #171923;
  border-left: 1px solid var(--gold);
  border-top: 1px solid var(--gold);

  transform: translateX(-50%) rotate(45deg);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 201;
}

/* Exibir ao passar o mouse ou focar */
.hbg-room-views:hover::after,
.hbg-room-views:hover::before,
.hbg-room-views:focus::after,
.hbg-room-views:focus::before {
  opacity: 1;
  visibility: visible;
}

.hbg-room-views:hover::after,
.hbg-room-views:focus::after {
  transform: translate(-50%, 0);
}


/* ==========================================
   HBG - PAGINAÇÃO PROGRESSIVA (GALERIA / FÓRUM)
   Mantém o tema original, sem alterar cards.
========================================== */
.hbg-page-nav {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.hbg-page-nav[hidden] { display: none !important; }
.hbg-page-nav .btn { min-height: 34px; padding: 7px 14px; font-size: 12px; }
.hbg-page-nav .btn:disabled { opacity: .4; }
@media (max-width: 600px) {
  .hbg-page-nav { gap: 8px; }
  .hbg-page-nav .btn { padding: 7px 10px; }
}

/* Agrupa feed e paginação na mesma coluna do Fórum. */
#view-forum .hbg-forum-main { min-width: 0; }


/* HBG - Evita oscilação do card de Destaques sob o ponteiro.
   Mantém iluminação e borda do hover, sem deslocar o cartão. */
#view-inicio #featured-rooms > .room-card:hover {
  transform: none;
}


/* ==========================================
   HBG - AJUSTES DO FÓRUM E DO PERFIL PÚBLICO
   01/11/2026
   ========================================== */

/* Curtir dentro da janela de discussão: sem fundo branco do navegador. */
#hbg-forum-dialog .hbg-discussion-like-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid rgba(217, 182, 93, .35);
  border-radius: 10px;
  background: rgba(217, 182, 93, .07);
  color: var(--gold-light);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#hbg-forum-dialog .hbg-discussion-like-btn:hover:not(:disabled) {
  background: rgba(217, 182, 93, .15);
  border-color: var(--gold);
}

#hbg-forum-dialog .hbg-discussion-like-btn.is-liked {
  background: rgba(255, 114, 126, .11);
  border-color: rgba(255, 114, 126, .4);
  color: var(--red);
}

#hbg-forum-dialog .hbg-discussion-like-btn.is-liked i {
  color: var(--red);
}

#hbg-forum-dialog .hbg-discussion-like-btn:disabled {
  opacity: .65;
  cursor: wait;
}

/* Enquanto carrega ou estiver vazio, texto não ocupa só uma célula
   da grade de emblemas (que tem três colunas estreitas). */
#view-perfil-publico #hbg-public-badges.hbg-public-badges-message-mode {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 12px 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}


/* ================================================
   HBG - ESTADO VAZIO/CARREGAMENTO DO EDITOR DE EMBLEMAS
   A grade 48px só é usada quando existem cards de emblemas.
   ================================================ */
#hbg-public-badge-modal #profile-badges-collection:not(:has(> .hbg-badge-card)) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 18px 20px;
  margin-bottom: 20px;
  border: 1px solid rgba(217, 182, 93, .20);
  border-radius: 10px;
  background: rgba(217, 182, 93, .045);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}


/* ======================================================
   HBG — FÓRUM COM FOTOGRAFIAS REAIS E TÓPICOS EM ALTA
   Versão 01/11/2026 — sem modificar outros painéis
   ====================================================== */

/* Cards do feed: imagem real encaixada na direita, sem deformar. */
#view-forum .hbg-forum-post {
  grid-template-columns: 70px minmax(0, 1fr) 166px;
  align-items: center;
  column-gap: 15px;
  min-height: 155px;
  padding: 15px 17px;
}
#view-forum .hbg-forum-post-avatar {
  width: 70px;
  height: 70px;
}
#view-forum .hbg-forum-post-avatar img {
  width: 64px;
  height: 64px;
}
#view-forum .hbg-forum-post-content {
  min-height: 122px;
  justify-content: center;
}
#view-forum .hbg-forum-post-content h3 {
  font-size: 16px;
  margin-bottom: 5px;
}
#view-forum .hbg-forum-post-content p {
  margin-bottom: 10px;
  line-height: 1.5;
}
#view-forum .hbg-forum-post-right {
  align-self: stretch;
  justify-content: flex-start;
  align-items: flex-end;
}
#view-forum .hbg-forum-post-cover-real {
  display: block;
  width: 100%;
  height: 106px;
  background: #10121c;
  border: 1px solid rgba(217,182,93,.22);
  border-radius: 10px;
  overflow: hidden;
}
#view-forum .hbg-forum-post-cover-real img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#view-forum .hbg-forum-post:not(.hbg-forum-has-image) .hbg-forum-post-right {
  justify-content: flex-start;
}
#view-forum .hbg-forum-post-footer {
  margin-top: 0;
  gap: 17px;
}
#view-forum .hbg-forum-tag.ajuda {
  color: #e1d2ff;
  background: rgba(151, 117, 210, .16);
}
#view-forum .hbg-forum-tag.off-topic {
  color: #aabde9;
  background: rgba(120, 169, 255, .12);
}

/* Ranking verdadeiro: 50 tópicos mais recentes, pontuados por
   curtidas * 3 + comentários * 2. */
#view-forum #hbg-forum-trending .hbg-forum-trending-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 9px;
  border: 1px solid #302d42;
  border-radius: 9px;
  background: #1b1c29;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-item:hover,
#view-forum #hbg-forum-trending .hbg-forum-trending-item:focus-visible {
  background: #262332;
  border-color: var(--gold);
  outline: none;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-copy {
  flex: 1 1 auto;
  min-width: 0;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.4;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-copy small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-likes {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--gold-light);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-rank {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  background: linear-gradient(145deg, #393222, #272337);
  color: var(--gold-light);
}
#view-forum #hbg-forum-trending .hbg-forum-trending-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Dentro da coluna principal, manter miniaturas também em notebook. */
@media (max-width: 1200px) and (min-width: 701px) {
  #view-forum .hbg-forum-post {
    grid-template-columns: 58px minmax(0,1fr) minmax(96px, 140px);
    column-gap: 10px;
    padding: 13px;
  }
  #view-forum .hbg-forum-post-avatar { width: 58px; height: 58px; }
  #view-forum .hbg-forum-post-avatar img { width: 54px; height: 54px; }
  #view-forum .hbg-forum-post-right {
    grid-column: 3;
    align-items: flex-end;
  }
  #view-forum .hbg-forum-post-cover-real { display: block; height: 92px; }
}
@media (max-width: 700px) {
  #view-forum .hbg-forum-post {
    grid-template-columns: 54px minmax(0,1fr);
    gap: 12px;
    min-height: 0;
    padding: 13px;
  }
  #view-forum .hbg-forum-post-avatar { width: 54px; height: 54px; }
  #view-forum .hbg-forum-post-avatar img { width: 49px; height: 49px; }
  #view-forum .hbg-forum-post-content { min-height: 0; }
  #view-forum .hbg-forum-post-right {
    grid-column: 2;
    align-self: auto;
    align-items: flex-start;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
  }
  #view-forum .hbg-forum-post-cover-real {
    display: block;
    width: min(170px, 100%);
    height: 90px;
  }
}


/* =======================================================
   HBG - AVATARES DOS TÓPICOS EM ALTA E MEMBROS EM DESTAQUE
   Atualização 01/11/2026: somente dados reais do Fórum.
   ======================================================= */
#view-forum #hbg-forum-trending .hbg-forum-trending-avatar {
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(217,182,93,.45);
  border-radius: 50%;
  background: #282534;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-avatar img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
  image-rendering: pixelated;
}
#view-forum .hbg-forum-avatar-fallback {
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 800;
}
#view-forum #hbg-forum-members.hbg-forum-members-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  align-items: start;
  padding: 4px 0;
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
  padding: 5px 1px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque:hover,
#view-forum #hbg-forum-members .hbg-forum-member-destaque:focus-visible {
  outline: none;
  border-color: rgba(217,182,93,.45);
  background: rgba(217,182,93,.07);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  flex: 0 0 45px;
  overflow: hidden;
  border: 2px solid rgba(217,182,93,.42);
  border-radius: 50%;
  background: linear-gradient(135deg,#302938,#171822);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar.hbg-forum-member-primeiro {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(217,182,93,.18);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar img {
  width: 43px;
  height: 43px;
  object-fit: cover;
  image-rendering: pixelated;
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ede9f7;
  font-size: 10px;
  line-height: 1.3;
  font-weight: 700;
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  white-space: nowrap;
}
@media (max-width: 420px) {
  #view-forum #hbg-forum-members.hbg-forum-members-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================
   HBG - ÚLTIMAS INTERAÇÕES REAIS (01/11/2026)
   Botões discretos, avatares Habbo e títulos clicáveis.
   ========================================================== */
#view-forum #hbg-forum-activity .hbg-forum-activity-link {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 9px;
  padding: 9px 5px;
  border: 0;
  border-bottom: 1px solid rgba(153,150,173,.12);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link:hover,
#view-forum #hbg-forum-activity .hbg-forum-activity-link:focus-visible {
  outline: 1px solid rgba(217,182,93,.28);
  background: rgba(217,182,93,.065);
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link:last-child {
  padding-bottom: 9px;
  border-bottom: 0;
}
#view-forum .hbg-forum-activity-avatar {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(217,182,93,.42);
  border-radius: 50%;
  background: #282534;
}
#view-forum .hbg-forum-activity-avatar img {
  display: block;
  width: 33px;
  height: 33px;
  object-fit: cover;
  image-rendering: pixelated;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link > div {
  min-width: 0;
  flex: 1 1 auto;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link p {
  margin: 0;
  color: #b7b2c8;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link strong {
  color: var(--gold-light);
  font-weight: 700;
}
#view-forum .hbg-forum-activity-title {
  color: #e9e5f3;
  font-weight: 600;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link small {
  display: block;
  margin-top: 3px;
  color: #9996ad;
  font-size: 10px;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-type {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-top: 4px;
  border-radius: 6px;
  background: rgba(217,182,93,.1);
  color: var(--gold);
  font-size: 13px;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-type-curtida {
  color: #ff808c;
  background: rgba(255,128,140,.11);
}
#view-forum #hbg-forum-activity .hbg-forum-activity-type-comentario {
  color: var(--purple-light);
  background: rgba(168,121,220,.12);
}
@media (max-width: 600px) {
  #view-forum #hbg-forum-activity .hbg-forum-activity-link {
    padding-inline: 3px;
  }
}


/* ============================================================
   HBG - LINKS PARA PERFIS PÚBLICOS NO FÓRUM (01/11/2026)
   Cliques em avatars e nicks não abrem o tópico.
   ============================================================ */
#view-forum a.hbg-forum-profile-link,
#hbg-forum-dialog a.hbg-forum-profile-link {
  cursor: pointer;
  text-decoration: none;
  transition: color .18s ease, filter .18s ease;
}
#view-forum a.hbg-forum-profile-link:hover,
#hbg-forum-dialog a.hbg-forum-profile-link:hover {
  color: var(--gold-light);
}
#view-forum a.hbg-forum-profile-link:focus-visible,
#hbg-forum-dialog a.hbg-forum-profile-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
#view-forum .hbg-forum-post-avatar:hover,
#hbg-forum-dialog .hbg-discussion-avatar:hover,
#hbg-forum-dialog .hbg-forum-comment-avatar-link:hover,
#view-forum .hbg-forum-trending-avatar-link:hover,
#view-forum .hbg-forum-activity-avatar-link:hover {
  filter: brightness(1.16);
}
#view-forum .hbg-forum-post-meta a.hbg-forum-profile-link:hover strong,
#hbg-forum-dialog .hbg-forum-comment-name:hover strong,
#view-forum #hbg-forum-activity .hbg-forum-activity-link a.hbg-forum-profile-link:hover strong {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#hbg-forum-dialog .hbg-forum-comment-avatar-link {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 46px;
  height: 46px;
}
#hbg-forum-dialog .hbg-forum-comment-avatar-link img {
  display: block;
}
#hbg-forum-dialog .hbg-forum-comment-name {
  display: inline-block;
  margin-bottom: 5px;
}
#hbg-forum-dialog .hbg-forum-comment-name strong {
  margin: 0;
}
#hbg-forum-dialog .hbg-forum-dialog-author {
  display: inline-block;
  font-weight: 800;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-avatar-link,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-copy small a.hbg-forum-profile-link {
  font-size: inherit;
  color: var(--gold-light);
  font-weight: 700;
}
#view-forum #hbg-forum-trending .hbg-forum-trending-copy small a:hover {
  text-decoration: underline;
}


/* ============================================================
   HBG — CONFIGURAÇÕES DOS TÓPICOS E ÚLTIMAS INTERAÇÕES COMPACTAS
   Somente visual; permissões verificadas na Edge Function.
   ============================================================ */
/* Feed: categoria e Config juntos, sem posição absoluta e sem empurrar a foto. */
#view-forum .hbg-forum-post { position: relative; }
#view-forum .hbg-forum-post-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
#view-forum .hbg-forum-post-config {
  position: static;
  z-index: auto;
  flex: 0 0 31px;
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid rgba(217,182,93,.28);
  border-radius: 9px;
  background: rgba(217,182,93,.055);
  color: #d9b65d;
  cursor: pointer;
  font-size: 17px;
  opacity: .86;
  transition: border-color .18s, background .18s, color .18s, opacity .18s;
}
#view-forum .hbg-forum-post:hover .hbg-forum-post-config,
#view-forum .hbg-forum-post-config:hover,
#view-forum .hbg-forum-post-config:focus-visible {
  opacity: 1;
  color: var(--gold-light);
  background: rgba(217,182,93,.13);
  border-color: var(--gold);
}
#view-forum .hbg-forum-post-config:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
#view-forum .hbg-forum-post-right { padding-top: 0; }
@media (max-width: 700px) {
  #view-forum .hbg-forum-post-tools { justify-content: flex-start; }
}
#view-forum .hbg-forum-post-edited-date,
#hbg-forum-dialog .hbg-forum-dialog-edited-date {
  display: block; color: var(--muted); font-size: 11px;
  margin: 0 0 8px; line-height: 1.4;
}
#hbg-forum-dialog .hbg-forum-dialog-edited-date[hidden] { display: none; }
/* Janela ampliada: ações agrupadas no cabeçalho do autor. */
#hbg-forum-dialog .hbg-discussion-author-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: flex-start; /* Alinha o grupo ao topo do avatar no zoom */
  flex: 0 0 auto;
  gap: 8px;
  min-width: 0;
}
#hbg-forum-dialog .hbg-discussion-author-actions .hbg-discussion-category {
  margin-left: 0;
}
#hbg-forum-dialog .hbg-forum-dialog-config {
  display: inline-grid;
  place-items: center;
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  padding: 0;
  border: 1px solid rgba(217,182,93,.30);
  border-radius: 11px;
  background: rgba(217,182,93,.065);
  color: var(--gold);
  font-size: 18px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
#hbg-forum-dialog .hbg-forum-dialog-config:hover,
#hbg-forum-dialog .hbg-forum-dialog-config:focus-visible {
  border-color: var(--gold);
  color: var(--gold-light);
  background: rgba(217,182,93,.15);
}
#hbg-forum-dialog .hbg-forum-dialog-config:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
#hbg-forum-dialog .hbg-forum-dialog-config[hidden] { display: none; }
@media (max-width: 700px) {
  #hbg-forum-dialog .hbg-discussion-author-actions {
    margin-left: 0;
    flex: 0 0 auto;
  }
}
/* Compacto como a referência: avatar pequeno, ação numa linha e tempo à direita. */
#view-forum #hbg-forum-activity .hbg-forum-activity-link {
  align-items: center; min-height: 35px; gap: 8px; padding: 5px 2px;
  border-bottom-color: rgba(153,150,173,.08);
}
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar-link {
  flex: 0 0 25px; width:25px; height:25px;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar img {
  width:24px; height:24px;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link > div {
  min-width: 0; flex: 1 1 auto; overflow: hidden;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link p {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; line-height: 1.25; overflow-wrap: normal;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-time {
  display: block; flex: 0 0 auto; margin:0 0 0 4px;
  white-space: nowrap; color: var(--muted); font-size: 10px;
}
.hbg-forum-config-dialog {
  border: 1px solid rgba(217,182,93,.28); border-radius: 18px;
  padding: 0; width: min(93vw, 510px); max-height: min(86vh, 760px);
  background: #171923; color: #f1eef8; box-shadow: 0 25px 80px #0009;
}
.hbg-forum-config-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(4px); }
.hbg-forum-config-dialog .hbg-forum-config-inner { position:relative; padding: 26px; }
.hbg-forum-config-dialog .hbg-forum-config-close {
  position:absolute; top:17px; right:17px; border:0; border-radius:8px;
  width:30px; height:30px; background:#242637; color:#eee; cursor:pointer;
}
.hbg-forum-config-dialog .hbg-forum-config-eyebrow { font-size:10px; color:#d9b65d; letter-spacing:.08em; }
.hbg-forum-config-dialog h2 { font-size:21px; margin:9px 35px 7px 0; }
.hbg-forum-config-dialog p { color:#aaa6be; font-size:13px; line-height:1.5; }
.hbg-forum-config-dialog .hbg-forum-config-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:19px; }
.hbg-forum-config-dialog button { font:inherit; }
.hbg-forum-config-dialog .hbg-forum-config-edit-choice,
.hbg-forum-config-dialog .hbg-forum-config-delete-choice,
.hbg-forum-config-dialog .hbg-forum-config-save,
.hbg-forum-config-dialog .hbg-forum-config-cancel {
  border:1px solid #373447; border-radius:9px; padding:11px 13px;
  background:#272532; color:#f1eef8; cursor:pointer; font-size:13px;
}
.hbg-forum-config-dialog .hbg-forum-config-delete-choice { color:#ff8b94; }
.hbg-forum-config-dialog .hbg-forum-config-delete-choice:hover { border-color:#ff8b94; }
.hbg-forum-config-dialog .hbg-forum-config-save { color:#171923; background:#e8c464; border-color:#e8c464; font-weight:700; }
.hbg-forum-config-dialog .hbg-forum-config-edit-form { margin-top:17px; }
.hbg-forum-config-dialog .hbg-forum-config-edit-form[hidden],
.hbg-forum-config-dialog .hbg-forum-config-actions[hidden] { display:none; }
.hbg-forum-config-dialog label { display:block; margin-bottom:9px; font-size:12px; font-weight:700; }
.hbg-forum-config-dialog textarea {
  width:100%; min-height:135px; resize:vertical; border:1px solid #36384b;
  border-radius:10px; background:#101219; color:#f1eef8; padding:12px;
  font:inherit; font-size:13px; line-height:1.55;
}
.hbg-forum-config-dialog textarea:focus-visible { outline: 1px solid #d9b65d; }
.hbg-forum-config-dialog .hbg-forum-config-length { display:block; text-align:right; font-size:11px; color:#a9a6b6; margin-top:6px; }
.hbg-forum-config-dialog .hbg-forum-config-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:13px; }
.hbg-forum-config-dialog .hbg-forum-config-status { min-height:0; margin:10px 0 0; color:#e1c477; }
.hbg-forum-config-dialog button:disabled { opacity:.55; cursor:wait; }
@media (max-width: 600px) {
  .hbg-forum-config-dialog .hbg-forum-config-inner { padding:20px; }
  #view-forum #hbg-forum-activity .hbg-forum-activity-link { gap:5px; }
  #view-forum #hbg-forum-activity .hbg-forum-activity-time { font-size:9px; }
}


/* ============================================================
   HBG · CONECTAR COM HABBO HOTEL — DESIGN APROVADO
   Escopo isolado: somente #login-modal / .hbg-connect-*
   ============================================================ */
#login-modal {
  z-index: 160;
  padding: clamp(12px, 3vw, 28px);
}
#login-modal .hbg-connect-card {
  display: grid;
  grid-template-columns: minmax(310px, 40%) minmax(0, 1fr);
  width: min(1120px, 100%);
  max-height: calc(100dvh - 38px);
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(217,182,93,.85);
  border-radius: 24px;
  background: #13131d;
  box-shadow: 0 28px 90px rgba(0,0,0,.64);
}
#login-modal .hbg-connect-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 625px;
  padding: clamp(26px, 3.4vw, 46px);
  border-right: 1px solid rgba(124,111,151,.23);
  background: radial-gradient(ellipse at 0 0,rgba(168,121,220,.12),transparent 67%),linear-gradient(120deg,#201b2b,#171721);
}
#login-modal .hbg-connect-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  max-width: 100%;
  padding: 10px 15px;
  border: 1px solid #d9b65d;
  border-radius: 999px;
  color: #f5cf7a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  white-space: nowrap;
}
#login-modal .hbg-connect-eyebrow i {font-size: 17px;}
#login-modal .hbg-connect-intro h2 {
  margin: 44px 0 14px;
  color: #f6f2ff;
  font-size: clamp(25px, 2.8vw, 36px);
  letter-spacing: -.7px;
  line-height: 1.18;
}
#login-modal .hbg-connect-intro h2 span {color: #edc66c;}
#login-modal .hbg-connect-lead {
  max-width: 380px;
  margin: 0;
  color: #b9b3c7;
  font-size: 14px;
  line-height: 1.65;
}
#login-modal .hbg-connect-steps {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 32px 0 26px;
  list-style: none;
}
#login-modal .hbg-connect-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background .2s, border-color .2s;
}
#login-modal .hbg-connect-step.is-active {
  border-color: rgba(217,182,93,.3);
  background: rgba(217,182,93,.065);
}
#login-modal .hbg-connect-step-number {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border: 1px solid rgba(217,182,93,.48);
  border-radius: 50%;
  color: #e8c16c;
  background: #22202c;
  font-size: 13px;
  font-weight: 800;
}
#login-modal .hbg-connect-step.is-active .hbg-connect-step-number {
  color: #241b0e;
  background: linear-gradient(110deg,#ffe5a5,#d9b65d);
  border-color: transparent;
}
#login-modal .hbg-connect-step-copy {min-width: 0;}
#login-modal .hbg-connect-step-copy strong {display:block;color:#f0ebf5;font-size:13px;line-height:1.6;}
#login-modal .hbg-connect-step-copy small {display:block;color:#aaa4ba;font-size:11px;line-height:1.5;}
#login-modal .hbg-connect-signature {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  color: #8b849c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.7px;
}
#login-modal .hbg-connect-signature strong {color:#e8c06a;}
#login-modal .hbg-connect-main {
  position: relative;
  min-width: 0;
  padding: 43px clamp(24px, 4vw, 48px) 31px;
  background: linear-gradient(155deg,#13121d,#0f1019 76%);
}
#login-modal .hbg-connect-close {
  top: 22px;
  right: 22px;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(217,182,93,.4);
  border-radius: 50%;
  color: #efd18c;
  background: #1c1b28;
  font-size: 18px;
}
#login-modal .hbg-connect-close:hover {background:#30273b;border-color:#d9b65d;}
#login-modal .hbg-connect-progress {
  padding-right: 52px;
  color: #e8c16a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.8px;
}
#login-modal .hbg-connect-main h3 {
  margin: 8px 40px 7px 0;
  color: #f4f0fa;
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.3;
}
#login-modal .hbg-connect-subtitle {
  margin: 0;
  color: #aaa4b9;
  font-size: 12px;
  line-height: 1.55;
}
#login-modal .hbg-connect-rule {
  height: 1px;
  margin: 25px 0 23px;
  background: linear-gradient(90deg,rgba(217,182,93,.34),rgba(91,79,107,.4),transparent);
}
#login-modal .hbg-connect-field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #f0ebf7;
  font-size: 12px;
  font-weight: 700;
}
#login-modal .hbg-connect-field-heading span {color: #90889f;font-size: 11px;font-weight:400;}
#login-modal .hbg-connect-nick-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 53px;
  padding: 0 15px;
  border: 1px solid #423a52;
  border-radius: 11px;
  background: #0e0f18;
  transition: border-color .2s,box-shadow .2s;
}
#login-modal .hbg-connect-nick-field:focus-within {border-color:#d9b65d;box-shadow:0 0 0 3px rgba(217,182,93,.1);}
#login-modal .hbg-connect-nick-field i {color:#a597bd;font-size:21px;}
#login-modal .hbg-connect-nick-field input {
  flex:1;
  width:100%;
  min-width:0;
  padding:13px 0;
  color:#f0ecf6;
  background:transparent;
  border:none;
  outline:none;
  font-size:13px;
}
#login-modal .hbg-connect-nick-field input::placeholder {color:#777184;}
#login-modal .hbg-connect-generate {
  width:100%;
  min-height:53px;
  margin-top:14px;
  border-radius:11px;
  color:#211806;
  font-size:13px;
  font-weight:800;
}
#login-modal .hbg-connect-generate i {font-size:19px;}
#login-modal .hbg-connect-mission {
  margin-top:24px;
  padding:18px;
  border:1px solid rgba(217,182,93,.41);
  border-radius:14px;
  background:linear-gradient(130deg,rgba(77,58,32,.29),rgba(47,38,62,.4));
}
#login-modal .hbg-connect-mission-top {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
#login-modal .hbg-connect-mission-top strong {color:#ffdd9b;font-size:11px;letter-spacing:.25px;}
#login-modal .hbg-connect-mission-tag {
  padding:5px 8px;
  border:1px solid #594a63;
  border-radius:999px;
  color:#b8a9c8;
  background:#292230;
  font-size:9px;
  font-weight:800;
  letter-spacing:.5px;
}
#login-modal .hbg-connect-code-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:55px;
  padding:8px 11px;
  border:1px dashed rgba(230,188,99,.65);
  border-radius:10px;
  background:#111119;
}
#login-modal .hbg-connect-code-row #verification-token {
  flex:1;
  min-width:0;
  margin:0;
  padding:0;
  overflow-wrap:anywhere;
  border:0;
  color:#f4d489;
  background:none;
  font-size:clamp(11px,1.45vw,17px);
  font-weight:800;
  letter-spacing:.4px;
  line-height:1.45;
}
#login-modal .hbg-connect-code-row.has-code #verification-token {letter-spacing:2px;}
#login-modal .hbg-connect-copy {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex:0 0 auto;
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(217,182,93,.6);
  border-radius:8px;
  color:#edc775;
  background:#48392455;
  font-size:11px;
  font-weight:700;
}
#login-modal .hbg-connect-copy:disabled {opacity:.4;cursor:not-allowed;}
#login-modal .hbg-connect-copy:not(:disabled):hover {background:#59462b;}
#login-modal .hbg-connect-mission-hint {margin:11px 0 0;color:#a69dad;font-size:11px;line-height:1.5;}
#login-modal .hbg-connect-actions {display:flex;align-items:center;gap:12px;margin-top:21px;}
#login-modal .hbg-connect-verify {
  flex:1;
  min-width:0;
  min-height:47px;
  color:#ebd29d;
  background:#2a2430;
  border-color:#725b3c;
  font-size:13px;
  border-radius:10px;
}
#login-modal .hbg-connect-verify:not(:disabled):hover {background:#3b2d39;border-color:#d9b65d;}
#login-modal .hbg-connect-status {
  flex:0 0 auto;
  max-width:170px;
  padding:8px 11px;
  border-radius:999px;
  color:#bdb5ca;
  background:#262331;
  font-size:10px;
  line-height:1.35;
  text-align:center;
}
#login-modal .hbg-connect-status.is-ready {color:#f8d89a;background:#362a29;}
#login-modal .hbg-connect-retry {
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:9px;
  padding:5px 0;
  border:0;
  color:#c9b37c;
  background:none;
  font-size:11px;
}
#login-modal .hbg-connect-retry:hover {color:#ffdf9c;text-decoration:underline;}
#login-modal .hbg-connect-retry.hidden {display:none!important;}
#login-modal .hbg-connect-safety {display:flex;align-items:center;gap:8px;margin:24px 0 0;color:#a29bad;font-size:11px;line-height:1.5;}
#login-modal .hbg-connect-safety i {color:#d9b65d;font-size:16px;}
#login-modal .hbg-connect-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#login-modal .error-text {margin-top:14px;}
@media (max-width: 760px) {
  #login-modal .hbg-connect-card {grid-template-columns:1fr;max-height:calc(100dvh - 24px);}
  #login-modal .hbg-connect-intro {min-height:0;padding:24px 23px 18px;border-right:0;border-bottom:1px solid rgba(124,111,151,.23);}
  #login-modal .hbg-connect-intro h2 {margin:15px 0 7px;font-size:24px;}
  #login-modal .hbg-connect-lead {font-size:12px;}
  #login-modal .hbg-connect-steps {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:16px 0 0;}
  #login-modal .hbg-connect-step {flex-direction:column;gap:6px;padding:8px;}
  #login-modal .hbg-connect-step-number {width:28px;height:28px;flex-basis:28px;font-size:11px;}
  #login-modal .hbg-connect-step-copy strong {font-size:10px;line-height:1.25;}
  #login-modal .hbg-connect-step-copy small {display:none;}
  #login-modal .hbg-connect-signature {display:none;}
  #login-modal .hbg-connect-main {padding:23px 22px 27px;}
  #login-modal .hbg-connect-close {top:14px;right:15px;width:35px;height:35px;}
  #login-modal .hbg-connect-progress {font-size:10px;}
  #login-modal .hbg-connect-main h3 {font-size:21px;}
  #login-modal .hbg-connect-rule {margin:17px 0 18px;}
  #login-modal .hbg-connect-mission {padding:14px;margin-top:18px;}
  #login-modal .hbg-connect-safety {margin-top:14px;}
}
@media (max-width: 430px) {
  #login-modal {padding:10px;}
  #login-modal .hbg-connect-card {max-height:calc(100dvh - 20px);}
  #login-modal .hbg-connect-eyebrow {font-size:9px;padding:8px 10px;}
  #login-modal .hbg-connect-intro {padding:16px 16px 13px;}
  #login-modal .hbg-connect-intro h2 {font-size:22px;}
  #login-modal .hbg-connect-main {padding:23px 16px 20px;}
  #login-modal .hbg-connect-actions {align-items:stretch;flex-direction:column;gap:8px;}
  #login-modal .hbg-connect-status {max-width:none;align-self:flex-start;}
  #login-modal .hbg-connect-code-row {gap:6px;}
  #login-modal .hbg-connect-copy {padding:6px 8px;font-size:10px;}
}


/* =======================================================
   HBG | GALERIA: NOVO ZOOM COM COMENTÁRIOS
   Isolado em #image-zoom-modal para não alterar o Fórum
   ======================================================= */
#image-zoom-modal.image-zoom-modal {
  position:fixed; inset:0; z-index:9999; display:flex;
  align-items:center; justify-content:center; padding:14px;
  background:rgba(4,5,10,.93); overflow-y:auto;
}
#image-zoom-modal .hbg-zoom-card {
  position:relative; display:grid; grid-template-columns:minmax(0, 67%) minmax(0, 33%);
  width:min(1620px, 100%); height:min(840px, calc(100dvh - 28px));
  max-height:calc(100dvh - 28px); min-height:0; margin:auto;
  border:1px solid #d9b65d; border-radius:26px;
  background:#13131e; overflow:hidden; box-shadow:0 25px 85px #000a;
  cursor:default;
}
#image-zoom-modal .hbg-gallery-topic-side,
#image-zoom-modal .hbg-gallery-comments-side {min-height:0; min-width:0;}
#image-zoom-modal .hbg-gallery-topic-side {
  display:flex; flex-direction:column; padding:23px 17px 20px;
  background:radial-gradient(ellipse at 0 15%, #292037 0%, #191622 40%, #12131e 90%);
}
#image-zoom-modal .hbg-gallery-topic-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:47px; padding-right:0; margin-bottom:27px;
  flex-shrink:0;
}
#image-zoom-modal .hbg-gallery-topic-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 20px; border:1px solid #d9b65d;
  border-radius:999px; color:#ffe0a0; background:#211a27;
  font-size:13px; font-weight:800; letter-spacing:1.3px;
}
#image-zoom-modal .hbg-gallery-topic-badge i {font-size:19px;}
#image-zoom-modal #hbg-zoom-config {position:relative; margin-left:auto; flex-shrink:0; z-index:10;}
#image-zoom-modal #hbg-zoom-config.hidden {display:none!important;}
#image-zoom-modal .hbg-gallery-config-trigger {
  display:grid; place-items:center; width:42px; height:42px;
  color:#e8c46a; background:#171721; border:1px solid #6e5830; border-radius:12px;
  font-size:19px; padding:0; cursor:pointer;
}
#image-zoom-modal .hbg-gallery-config-trigger:hover {background:#31283a; border-color:#e5bf66;}
#image-zoom-modal #hbg-zoom-config .hbg-room-config-menu {top:calc(100% + 8px);right:0;left:auto;z-index:20;}
#image-zoom-modal .hbg-gallery-topic-scroll {flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#514262 transparent; padding-right:4px;}
#image-zoom-modal .hbg-zoom-author-row {display:flex; gap:12px; align-items:center; margin:0 0 24px;}
#image-zoom-modal .hbg-zoom-author {display:flex; align-items:center;gap:14px;cursor:pointer;max-width:100%;}
#image-zoom-modal .hbg-zoom-avatar {display:grid;place-items:center; width:76px;height:76px;flex:0 0 76px; border:2px solid #d9b65d; border-radius:15px; background:#262237;overflow:hidden;}
#image-zoom-modal .hbg-zoom-avatar img {width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
#image-zoom-modal .hbg-zoom-author-meta {min-width:0;}
#image-zoom-modal .hbg-zoom-author-meta strong {display:block; margin:0; font-size:17px; color:#f1eef8; overflow-wrap:anywhere;}
#image-zoom-modal .hbg-zoom-author-meta small {display:block; margin-top:3px; color:#a39bb0; font-size:12px; letter-spacing:0; font-weight:400;}
#image-zoom-modal .hbg-zoom-author:hover strong {color:#ecca77;}
#image-zoom-modal .hbg-zoom-header {display:block; flex:0 0 auto; padding:0; margin:0 0 22px; background:none; border:0;}
#image-zoom-modal .hbg-zoom-header h2 {margin:0 0 10px; color:#f7f4ff; font-size:clamp(22px, 2.6vw, 34px);line-height:1.3;overflow-wrap:anywhere;}
#image-zoom-modal .hbg-zoom-header p {margin:0; color:#bbb5c7; font-size:15px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;}
#image-zoom-modal #hbg-zoom-edited-date {display:block;margin-top:11px;color:#a9a0b9;font-size:11px;}
#image-zoom-modal #hbg-zoom-edited-date[hidden] {display:none!important;}
#image-zoom-modal .hbg-zoom-image-area {
  position:relative; display:flex; justify-content:center; align-items:center;
  flex:none; min-height:0; width:100%; height:auto; padding:0;
  background:#0d0e15; border:1px solid #d9b65d; border-radius:17px; overflow:hidden;
}
#image-zoom-modal .hbg-zoom-image-area img {
  display:block; position:static!important; width:100%!important;height:auto!important;
  max-width:100%!important; max-height:min(76dvh, 760px)!important;
  object-fit:contain; margin:0!important; border:0; border-radius:0;
  box-shadow:none; transform:none!important;
}
#image-zoom-modal .hbg-zoom-footer {display:block; overflow:visible; flex:none; padding:17px 0 0; background:none; border:0;}
#image-zoom-modal .hbg-zoom-like-area {display:flex; align-items:center; flex-wrap:wrap; gap:12px;}
#image-zoom-modal .hbg-zoom-like-btn,
#image-zoom-modal .hbg-zoom-views,
#image-zoom-modal .hbg-zoom-comment-stat {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:8px 14px; border:1px solid #70572f;border-radius:13px;background:#221d29;color:#f6d582;font-size:14px;font-weight:700;}
#image-zoom-modal .hbg-zoom-like-btn:disabled {opacity:.65;}
#image-zoom-modal .hbg-zoom-like-btn.liked {color:#ff889a; border-color:#a95368;}
#image-zoom-modal .hbg-zoom-like-label {display:none;}
#image-zoom-modal .hbg-zoom-views,
#image-zoom-modal .hbg-zoom-comment-stat {color:#b9b2c8;border-color:#413b53;background:transparent;}
#image-zoom-modal .hbg-zoom-community-name {display:inline-flex;align-items:center;gap:8px;color:#a9a0b9;font-size:12px;margin-left:auto;}
#image-zoom-modal .hbg-gallery-comments-side {position:relative;display:flex;flex-direction:column;gap:0;padding:27px 27px 25px 24px;border-left:1px solid #35303f;background:#11121d;}
#image-zoom-modal .hbg-gallery-comments-header {flex:0 0 auto;margin-right:52px;padding:0 0 15px;border-bottom:1px solid #312c42;}
#image-zoom-modal .hbg-gallery-comments-header h3 {display:flex;align-items:center;gap:13px;margin:0;font-size:24px;line-height:1.4;color:#f2eff7;}
#image-zoom-modal .hbg-gallery-comments-header h3 i {color:#e5bf66;font-size:28px;}
#image-zoom-modal .hbg-gallery-comments-list {flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:18px 0 12px;scrollbar-width:thin;scrollbar-color:#50425e transparent;}
#image-zoom-modal .hbg-gallery-comment-card {display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid #353044;border-radius:18px;background:#1d1d2a;}
#image-zoom-modal .hbg-gallery-comment-avatar {flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border:0;border-radius:9px;background:#282337;cursor:pointer;}
#image-zoom-modal .hbg-gallery-comment-avatar img {max-width:100%;max-height:100%;image-rendering:pixelated;object-fit:contain;}
#image-zoom-modal .hbg-gallery-comment-info {min-width:0;flex:1;}
#image-zoom-modal .hbg-gallery-comment-name {display:inline-block;max-width:100%;border:0;padding:0;color:#eaca7b;background:none;font-size:14px;font-weight:800;text-align:left;cursor:pointer;overflow-wrap:anywhere;}
#image-zoom-modal .hbg-gallery-comment-name:hover{text-decoration:underline;}
#image-zoom-modal .hbg-gallery-comment-text {margin:4px 0 0;font-size:13px;line-height:1.5;color:#dad5e3;white-space:pre-wrap;overflow-wrap:anywhere;}
#image-zoom-modal .hbg-gallery-comment-time {display:block;margin-top:5px;color:#8e869e;font-size:11px;}
#image-zoom-modal .hbg-gallery-comments-status {margin:30px 0;color:#b8b2c7;text-align:center;font-size:13px;}
#image-zoom-modal .hbg-gallery-comments-more {flex:0 0 auto;align-self:center;margin:3px auto 10px;padding:8px 12px;background:#282232;color:#f2d293;border:1px solid #615039;border-radius:9px;font-size:12px;}
#image-zoom-modal .hbg-gallery-comment-form {flex:0 0 auto;padding:12px 12px 13px;border:1px solid #674c83;border-radius:18px;background:#221b2d;}
#image-zoom-modal .hbg-gallery-comment-form textarea {display:block;width:100%;min-height:95px;max-height:190px;resize:vertical;outline:none;border:1px solid #564769;border-radius:12px;padding:15px;background:#11121c;color:#f3edf8;font-size:14px;}
#image-zoom-modal .hbg-gallery-comment-form textarea:focus{border-color:#bb8cdb;}
#image-zoom-modal .hbg-gallery-comment-form-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;}
#image-zoom-modal #hbg-gallery-comment-status {font-size:11px;color:#aea4bb;line-height:1.4;overflow-wrap:anywhere;}
#image-zoom-modal #hbg-gallery-comment-submit {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;flex:0 0 auto;padding:10px 16px;border:0;border-radius:12px;background:linear-gradient(120deg,#ffe2a0,#d9b65d);color:#231807;font-weight:800;}
#image-zoom-modal #hbg-gallery-comment-submit:disabled {opacity:.6;cursor:wait;}
#image-zoom-modal .hbg-gallery-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
#image-zoom-modal .hbg-zoom-card .close-image-zoom {position:absolute;top:22px;right:22px;z-index:21;display:grid;place-items:center;width:42px;height:42px;border:1px solid #6b552c;border-radius:50%;background:#191922;color:#ffdc96;font-size:22px;}
#image-zoom-modal .hbg-zoom-card .close-image-zoom:hover {background:#362b38;border-color:#dfbd6d;}
@media (max-width:950px) {
 #image-zoom-modal .hbg-zoom-card {grid-template-columns:minmax(0,1fr);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;display:block;}
 #image-zoom-modal.image-zoom-modal {padding:12px;}
 #image-zoom-modal .hbg-gallery-topic-side {padding:18px;}
 #image-zoom-modal .hbg-gallery-topic-header {padding-right:50px;margin-bottom:16px;}
 #image-zoom-modal .hbg-gallery-comments-side {min-height:440px;height: min(600px,72dvh);padding:24px 22px;border-top:1px solid #35303f;border-left:0;}
 #image-zoom-modal .hbg-zoom-image-area img {max-height:min(72dvh, 760px)!important;}
 #image-zoom-modal .hbg-zoom-card .close-image-zoom {top:13px;right:13px;}
}
@media (max-width:480px) {
 #image-zoom-modal .hbg-zoom-card {border-radius:16px;}
 #image-zoom-modal .hbg-gallery-topic-side {padding:12px;}
 #image-zoom-modal .hbg-gallery-topic-badge {padding:10px 12px;font-size:10px;letter-spacing:.6px;}
 #image-zoom-modal .hbg-zoom-avatar {width:58px;height:58px;flex-basis:58px;}
 #image-zoom-modal .hbg-zoom-author-row {margin-bottom:16px;}
 #image-zoom-modal .hbg-zoom-header h2 {font-size:22px;}
 #image-zoom-modal .hbg-zoom-header p {font-size:13px;}
 #image-zoom-modal .hbg-zoom-community-name {display:none;}
 #image-zoom-modal .hbg-gallery-comments-side {padding:19px 15px;}
 #image-zoom-modal .hbg-gallery-comments-header h3 {font-size:20px;}
 #image-zoom-modal .hbg-gallery-comment-form-footer {align-items:stretch;flex-wrap:wrap;}
 #image-zoom-modal #hbg-gallery-comment-submit {margin-left:auto;}
}


.hbg-likers-tooltip.hbg-likers-tooltip-zoom {
  max-height: min(280px, 50vh) !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #66577e transparent;
}

/* ==========================================
   HBG — ZOOM DA GALERIA: CURTIDORES E VISUALIZAÇÕES
   Apenas o rodapé da Galeria; Fórum e cards intactos.
========================================== */

#image-zoom-modal .hbg-zoom-like-hover {
  display: inline-flex;
  align-items: center;
  position: relative;
  border-radius: 13px;
  flex: 0 0 auto;
  cursor: help;
}

#image-zoom-modal .hbg-zoom-like-hover:focus-visible {
  outline: 2px solid #e8c46a;
  outline-offset: 4px;
}

#image-zoom-modal .hbg-zoom-like-hover > .hbg-zoom-like-btn {
  margin: 0;
}

#image-zoom-modal .hbg-zoom-views {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 39px;
  padding: 8px 14px;
  border: 1px solid #514a64;
  border-radius: 13px;
  background: rgba(110, 93, 159, 0.12);
  color: #d1c7ee;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: border-color .2s ease, background .2s ease;
}

#image-zoom-modal .hbg-zoom-views i {
  font-size: 19px;
  color: #cab5f6;
  line-height: 1;
}

#image-zoom-modal .hbg-zoom-views:hover,
#image-zoom-modal .hbg-zoom-views:focus-visible {
  border-color: #8b70ae;
  background: rgba(168, 121, 220, 0.16);
}

#image-zoom-modal .hbg-zoom-views:focus-visible {
  outline: 2px solid #b592ee;
  outline-offset: 3px;
}

#image-zoom-modal .hbg-zoom-views-count {
  display: inline-block;
  min-width: 1ch;
  color: #e5dcf4;
  text-align: center;
}

@media (max-width: 480px) {
  #image-zoom-modal .hbg-zoom-like-area {gap: 8px;}
  #image-zoom-modal .hbg-zoom-views {padding: 8px 12px;}
}


/* =====================================================
   HBG — PAINEL ADMINISTRATIVO • EQUIPE E CARGOS
   ===================================================== */
#hbg-admin-entry { color: #ffe3a0; border-color: rgba(217,182,93,.25); background: rgba(217,182,93,.08); }
#hbg-admin-entry:hover { color: #11121b; background: var(--gold-light); }
#view-adm { max-width: 1180px; margin: 0 auto; }
.hbg-adm-hero { display:flex; align-items:center; gap:22px; padding:30px; border:1px solid rgba(217,182,93,.5); border-radius:20px; background:radial-gradient(ellipse at 2% 10%,rgba(168,121,220,.18),transparent 55%),linear-gradient(120deg,#1b1929,#10121c); }
.hbg-adm-hero-emblem { width:76px;height:76px;flex:0 0 76px;display:grid;place-items:center;font-size:40px;color:#ffe3a0;background:rgba(217,182,93,.08);border:1px solid rgba(217,182,93,.4);border-radius:20px; }
.hbg-adm-kicker { color:#d9b65d; font-size:10px;letter-spacing:2px;font-weight:800; }
.hbg-adm-hero-copy {flex:1;min-width:0;}
.hbg-adm-hero h1 { margin:4px 0; font-size:clamp(24px,3vw,33px);line-height:1.2; }
.hbg-adm-hero p,.hbg-adm-panel-heading p,.hbg-adm-hint { color:#a7a4b9; margin:6px 0 0; font-size:12px; }
.hbg-adm-current-role { display:flex; flex-direction:column;align-items:flex-end;gap:6px; padding:12px 17px;border:1px solid rgba(217,182,93,.25);border-radius:12px;background:#191927; }
.hbg-adm-current-role span {color:#aaa5b9;font-size:11px;}
.hbg-adm-current-role strong {color:#ffe3a0;white-space:nowrap;}
.hbg-adm-feature-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:20px 0;}
.hbg-adm-feature {padding:20px;border-radius:15px;border:1px solid #323143;background:linear-gradient(135deg,#191924,#15151e);min-width:0;}
.hbg-adm-feature>i {color:#a879dc;font-size:29px;}
.hbg-adm-feature h3 {margin:10px 0 5px;font-size:15px;line-height:1.3;}
.hbg-adm-feature p {color:#a7a4b9;margin:0 0 12px;font-size:12px;line-height:1.5;}
.hbg-adm-feature-state {font-size:10px;color:#928da5;}
.hbg-adm-feature-active {border-color:rgba(217,182,93,.48);background:linear-gradient(130deg,rgba(217,182,93,.08),#161620);}
.hbg-adm-feature-active>i,.hbg-adm-feature-active .hbg-adm-feature-state {color:#ffe3a0;}
.hbg-adm-panel {padding:26px;border:1px solid rgba(217,182,93,.24);border-radius:17px;background:#171822;}
.hbg-adm-panel-heading {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;}
.hbg-adm-panel-heading h2 {color:#f0edf8;font-size:21px;margin:3px 0;}
.hbg-adm-panel-heading h2 i {color:#d9b65d;}
.hbg-adm-button {border-radius:9px;min-height:43px;border:1px solid rgba(217,182,93,.35);padding:10px 16px;font-weight:800;display:inline-flex;justify-content:center;align-items:center;gap:7px;white-space:nowrap;}
.hbg-adm-button-outline {background:#202031;color:#ffe3a0;}
.hbg-adm-button-primary {background:linear-gradient(100deg,#ffe3a0,#d9b65d);color:#17121f;}
.hbg-adm-member-form {padding:18px;background:#11121b;border:1px solid #39334c;border-radius:13px;margin-bottom:16px;}
.hbg-adm-member-form label {display:block;font-weight:800;color:#eae4f6;margin-bottom:10px;}
.hbg-adm-form-fields {display:grid;grid-template-columns:minmax(0,2fr) minmax(140px,1fr) auto;gap:10px;}
.hbg-adm-form-fields input,.hbg-adm-form-fields select,.hbg-adm-member-select {min-height:43px;min-width:0;color:#f1eef8;background:#171824;border:1px solid #424052;border-radius:9px;padding:10px;}
.hbg-adm-form-fields input:focus,.hbg-adm-form-fields select:focus {outline:2px solid #a879dc;outline-offset:1px;}
.hbg-adm-hint {margin-top:10px;}
.hbg-adm-status {font-size:12px;color:#d9b65d;margin:12px 0;min-height:19px;}
.hbg-adm-members {display:grid;gap:10px;}
.hbg-adm-member {display:flex;align-items:center;gap:14px;min-width:0;padding:12px 15px;background:#11121b;border:1px solid #302e3e;border-radius:12px;}
.hbg-adm-member-avatar {width:51px;height:51px;flex:0 0 51px;display:grid;place-items:center;overflow:hidden;background:#232035;border:1px solid rgba(217,182,93,.45);border-radius:12px;}
.hbg-adm-member-avatar img {width:100%;height:100%;object-fit:contain;}
.hbg-adm-member-info {min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.hbg-adm-member-info strong {overflow-wrap:anywhere;color:#f0edf8;}
.hbg-adm-member-info small {color:#a7a4b9;}
.hbg-adm-member-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.hbg-adm-pill {padding:7px 10px;border-radius:10px;background:#29243b;color:#dcc8fd;font-size:11px;font-weight:800;border:1px solid #594475;}
.hbg-adm-pill-owner {color:#ffe3a0;background:#302715;border-color:#79612b;}
.hbg-adm-member-select {min-height:38px;padding:6px;font-size:12px;}
.hbg-adm-remove {min-height:38px;padding:7px 11px;background:rgba(255,114,126,.07);color:#ffa2a9;border:1px solid rgba(255,114,126,.3);border-radius:9px;cursor:pointer;}
.hbg-adm-member-select:disabled,.hbg-adm-remove:disabled {opacity:.5;cursor:wait;}
@media(max-width:920px) {.hbg-adm-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px) {
 .hbg-adm-hero {padding:19px;align-items:flex-start;gap:12px;flex-wrap:wrap;}
 .hbg-adm-hero-emblem {width:50px;height:50px;flex-basis:50px;font-size:25px;border-radius:12px;}
 .hbg-adm-current-role {width:100%;align-items:flex-start;}
 .hbg-adm-feature-grid{grid-template-columns:1fr;gap:9px;}
 .hbg-adm-feature{padding:16px;}
 .hbg-adm-panel{padding:15px;}
 .hbg-adm-form-fields{grid-template-columns:1fr;}
 .hbg-adm-member{align-items:flex-start;flex-wrap:wrap;}
 .hbg-adm-member-actions{width:100%;justify-content:flex-start;}
}


/* ============================================================
   HBG • Perfil / Avatar: corpo, cabeça, acenar, danças
   Controles quase invisíveis até hover; sem alterar outros perfis.
   ============================================================ */
#view-perfil-publico .hbg-avatar-palco {
  position: relative;
  z-index: 3;
  flex: 0 0 200px;
  width: 200px;
  height: 246px;
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: translateX(13px);
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}
#view-perfil-publico .hbg-avatar-palco #hbg-public-avatar {
  display: block;
  position: relative;
  z-index: 1;
  width: 146px;
  height: 204px;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent;
  transform: translateY(-17px);
  pointer-events: none;
}
#view-perfil-publico .hbg-avatar-controle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(217,182,93,.3);
  background: rgba(16,18,27,.88);
  color: #ffe3a0;
  border-radius: 7px;
  font: 700 11px/1.2 Inter,sans-serif;
  cursor: pointer;
  opacity: .10;
  transition: opacity .18s ease,background .18s ease,border-color .18s ease;
  backdrop-filter: blur(5px);
}
#view-perfil-publico .hbg-avatar-palco:hover .hbg-avatar-controle,
#view-perfil-publico .hbg-avatar-palco:focus-within .hbg-avatar-controle {opacity: .95;}
#view-perfil-publico .hbg-avatar-controle:hover,
#view-perfil-publico .hbg-avatar-controle:focus-visible {
  opacity: 1 !important;
  background: #3c2e56;
  border-color: #e6be5b;
}
#view-perfil-publico .hbg-avatar-controle:focus-visible,
#view-perfil-publico .hbg-avatar-dancas-menu button:focus-visible {outline:2px solid #ffe3a0;outline-offset:2px;}
#view-perfil-publico .hbg-avatar-direcoes {
  position:absolute;
  z-index:4;
  top:55px;
  left:4px;
  right:4px;
  display:flex;
  flex-direction:column;
  gap:39px;
  pointer-events:none;
}
#view-perfil-publico .hbg-avatar-direcao-linha {
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
}
#view-perfil-publico .hbg-avatar-direcao-linha > span {
  display:block;
  color:#ffe3a0;
  background:rgba(15,17,26,.82);
  border:1px solid rgba(217,182,93,.25);
  border-radius:6px;
  padding:3px 6px;
  font-size:9px;
  letter-spacing:.3px;
  font-weight:800;
  opacity:0;
  transition:opacity .18s;
}
#view-perfil-publico .hbg-avatar-palco:hover .hbg-avatar-direcao-linha > span,
#view-perfil-publico .hbg-avatar-palco:focus-within .hbg-avatar-direcao-linha > span {opacity:.75;}
#view-perfil-publico .hbg-avatar-seta {
  pointer-events:auto;
  width:26px;
  height:31px;
  font-size:25px;
}
#view-perfil-publico .hbg-avatar-acoes {
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  z-index:6;
  white-space:nowrap;
}
#view-perfil-publico .hbg-avatar-acao {min-height:28px;padding:5px 8px;}
#view-perfil-publico .hbg-avatar-acao[aria-pressed="true"] {border-color:var(--gold);background:rgba(90,63,40,.92);}
#view-perfil-publico .hbg-avatar-dance-toggle img {width:14px;height:14px;object-fit:contain;image-rendering:pixelated;}
#view-perfil-publico .hbg-avatar-dancas-menu {
  position:absolute;
  z-index:20;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  width:165px;
  padding:6px;
  border:1px solid rgba(217,182,93,.5);
  border-radius:10px;
  background:#181722;
  box-shadow:0 15px 30px rgba(0,0,0,.48);
}
#view-perfil-publico .hbg-avatar-dancas-menu[hidden] {display:none!important;}
#view-perfil-publico .hbg-avatar-dancas-menu button {
  display:block;
  width:100%;
  padding:9px 10px;
  background:transparent;
  color:#ddd6f3;
  border:0;
  border-radius:6px;
  text-align:left;
  font:600 12px Inter,sans-serif;
  cursor:pointer;
}
#view-perfil-publico .hbg-avatar-dancas-menu button:hover,
#view-perfil-publico .hbg-avatar-dancas-menu button[aria-pressed="true"] {
  background:rgba(217,182,93,.15);
  color:#ffe3a0;
}
#view-perfil-publico .hbg-avatar-aviso {
  position:absolute;
  z-index:7;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  width:190px;
  text-align:center;
  font-size:10px;
  line-height:1.35;
  color:#ffd27f;
  pointer-events:none;
}
#view-perfil-publico .hbg-avatar-aviso:empty {display:none;}
#view-perfil-publico .hbg-public-description-editor .hbg-desc-hint {
  display:block;
  margin:7px 0 0;
  font-size:11px;
  color:#9996ad;
}
#view-perfil-publico .hbg-public-description-editor .hbg-desc-state {
  display:block;
  margin-top:6px;
  font-size:11px;
  color:#d9b65d;
}
#view-perfil-publico .hbg-public-description-editor .hbg-desc-state:empty {display:none;}
@media (max-width:640px),(hover:none) {
  #view-perfil-publico .hbg-avatar-palco {flex-basis:142px;width:142px;height:211px;transform:none;}
  #view-perfil-publico .hbg-avatar-palco #hbg-public-avatar {width:113px;height:162px;transform:translateY(-16px);}
  #view-perfil-publico .hbg-avatar-direcoes {top:35px;gap:30px;left:0;right:0;}
  #view-perfil-publico .hbg-avatar-direcao-linha > span {font-size:8px;padding:2px 4px;opacity:.85;}
  #view-perfil-publico .hbg-avatar-seta {width:23px;height:29px;font-size:23px;}
  #view-perfil-publico .hbg-avatar-acoes {gap:2px;}
  #view-perfil-publico .hbg-avatar-acao {padding:5px 4px;font-size:10px;}
  #view-perfil-publico .hbg-avatar-controle {opacity:.90;}
  #view-perfil-publico .hbg-avatar-dancas-menu {top:calc(100% + 7px);}
  #view-perfil-publico .hbg-avatar-aviso {top:calc(100% + 8px);width:160px;}
}

/* Celular: perfil em coluna para não comprimir nome e descrição. */
@media (max-width: 640px) {
  #view-perfil-publico .hbg-public-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    gap: 14px;
  }
  #view-perfil-publico .hbg-public-identity-info {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  #view-perfil-publico .hbg-public-meta,
  #view-perfil-publico .hbg-public-actions {
    justify-content: center;
  }
  #view-perfil-publico .hbg-public-hero {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  #view-perfil-publico .hbg-avatar-palco {
    margin: 0 auto;
    flex: 0 0 210px;
  }
}


/* ================================================================
   HBG AVATAR v6 - AJUSTE FINO DA ALTURA AO SENTAR
   - Sobe 5px a imagem sentada no desktop (19px -> 14px).
   - Sobe 4px em telas compactas (11px -> 7px).
   - Em pe, sombra, botao e direcoes permanecem iguais.
   ================================================================ */
#view-perfil-publico .hbg-avatar-palco {
  --hbg-avatar-em-pe: -1px;
  --hbg-avatar-sentado: 14px;
  --hbg-avatar-botao-descer: 30px;
}

/* Mantem a altura do personagem ja aprovada. */
#view-perfil-publico .hbg-avatar-palco #hbg-public-avatar {
  transform: translateY(var(--hbg-avatar-em-pe)) !important;
}
#view-perfil-publico .hbg-avatar-palco.is-sitting #hbg-public-avatar {
  transform: translateY(var(--hbg-avatar-sentado)) !important;
}

/* Tira a sombra antiga, posicionada pelo container de informacoes. */
#view-perfil-publico .hbg-public-identity::after {
  display: none;
}

/* Cria a mesma sombra, mas centralizada embaixo do proprio avatar. */
#view-perfil-publico .hbg-avatar-palco::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 13px;
  width: 135px;
  height: 32px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.12) 75%,
    transparent 100%
  );
  filter: blur(4px);
  pointer-events: none;
}

/* Desce o botao: os pes e a sombra ficam livres. */
#view-perfil-publico .hbg-avatar-acoes {
  bottom: calc(0px - var(--hbg-avatar-botao-descer));
  justify-content: center;
}

/* Preserva o menu, os botoes de direcao e o comportamento atual. */
#view-perfil-publico .hbg-avatar-direcoes {
  gap: 39px;
}
#view-perfil-publico .hbg-avatar-dancas-menu {
  position: absolute !important;
  top: auto !important;
  bottom: 44px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 400 !important;
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#view-perfil-publico .hbg-avatar-palco {
  z-index: 20;
}
#view-perfil-publico .hbg-public-hero {
  overflow: visible;
}
#view-perfil-publico .hbg-avatar-palco.dance-menu-open .hbg-avatar-controle {
  opacity: .98;
}
#view-perfil-publico .hbg-avatar-acoes {
  z-index: 90;
}
#view-perfil-publico .hbg-avatar-palco #hbg-avatar-dancas-menu {
  pointer-events: auto;
}
#view-perfil-publico .hbg-avatar-dancas-menu button {
  touch-action: manipulation;
}

/* Versao compacta para celulares e telas sem hover. */
@media (max-width: 640px), (hover: none) {
  #view-perfil-publico .hbg-avatar-palco {
    --hbg-avatar-em-pe: 2px;
    --hbg-avatar-sentado: 7px;
    --hbg-avatar-botao-descer: 18px;
  }
  #view-perfil-publico .hbg-avatar-palco::after {
    width: 95px;
    height: 25px;
    bottom: 10px;
  }
  #view-perfil-publico .hbg-avatar-dancas-menu {
    top: auto !important;
    bottom: 44px !important;
  }
}

/* =============================================================
   HBG — ÍCONES AUTÊNTICOS DO CLIENTE HABBO (v14)
   Fonte: Quackster/v14_assets (extração dos arquivos Habbo).
   Usamos imagens originais, NÃO ilustrações geradas.
   Somente os ícones cujas imagens carregam recebem a classe
   hbg-habbo-original; caso contrário, fica o Phosphor original.
   NÃO MODIFICA dimensões, navegação, eventos ou permissões.
   ============================================================= */
i.ph.hbg-habbo-original,
i.ph-fill.hbg-habbo-original,
i.ph-bold.hbg-habbo-original,
i.ph-duotone.hbg-habbo-original {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.3em;
  height: 1.3em;
  flex: 0 0 auto;
  vertical-align: -0.24em;
  font-style: normal;
  line-height: 1;
}
i.ph.hbg-habbo-original::before,
i.ph-fill.hbg-habbo-original::before,
i.ph-bold.hbg-habbo-original::before,
i.ph-duotone.hbg-habbo-original::before {
  content: '' !important;
  display: block !important;
  width: 100%; height: 100%;
  background-image: var(--hbg-habbo-original-url) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  image-rendering: pixelated;
  font-family: sans-serif !important;
}
/* Algumas imagens clássicas são monocromáticas e precisam de leve contraste. */
i.hbg-habbo-original[data-hbg-habbo-tint='true']::before {
  filter: drop-shadow(0 0 1px rgba(255,227,160,.75));
}
/* A rotação mantém o sentido correto nas setas do cliente original. */
i.ph-arrow-left.hbg-habbo-original::before { transform:rotate(90deg); }
i.ph-arrow-right.hbg-habbo-original::before { transform:rotate(-90deg); }


/* HBG - botoes Sentar/Levantar + ACENAR liberados no Meu Perfil.
   Dancas permanecem como antes; apenas o dono visualiza acoes. */
#view-perfil-publico #hbg-avatar-dancas,
#view-perfil-publico #hbg-avatar-dancas-menu {
  display: none !important;
}
#view-perfil-publico #hbg-avatar-acenar {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #ffe3a0);
  font-size: 10px;
  font-weight: 700;
  opacity: .84 !important;
}
#view-perfil-publico #hbg-avatar-acenar:hover,
#view-perfil-publico #hbg-avatar-acenar:focus-visible {
  opacity: 1 !important;
}
#view-perfil-publico .hbg-avatar-direcao-linha > span {
  display: none !important;
}
#view-perfil-publico .hbg-avatar-acoes {
  justify-content: center;
}
/* Nas acoes do perfil, deixa Acenar logo abaixo de Sentar. */
#view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar {
  width: 100%;
  min-height: 28px;
  padding: 6px 3px;
  border-radius: 7px;
}

/* HBG · Busca e filtros de emblemas — seleção da coleção */
#hbg-public-badge-modal .hbg-badge-filters,
.hbg-badge-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 12px; margin: 0 0 8px; border: 1px solid #37394b;
  border-radius: 12px; background: #1c1f2c;
}
.hbg-badge-search-wrap, .hbg-badge-rarity-wrap {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.hbg-badge-search-wrap { flex: 2 1 220px; }
.hbg-badge-rarity-wrap { flex: 1 1 170px; }
.hbg-badge-filter-caption {
  color: #bfb8ce; font-size: 12px; font-weight: 600;
}
.hbg-badge-filters input, .hbg-badge-filters select {
  box-sizing: border-box; width: 100%; height: 41px; padding: 0 12px;
  border: 1px solid #49465f; border-radius: 8px; background: #141622;
  color: #f1eef8; font: inherit; font-size: 13px;
}
.hbg-badge-filters input:focus, .hbg-badge-filters select:focus {
outline: 2px solid #d9b65d; outline-offset: 1px; }
.hbg-badge-filter-count { margin: 0 0 9px; font-size: 12px; color: #aaa6b8; }
.hbg-badge-more-wrap { text-align: center; margin: 10px 0 16px; }
.hbg-badge-more-wrap[hidden] { display: none !important; }
.hbg-badge-filter-empty { grid-column: 1 / -1; color: #aaa6b8; padding: 18px 4px; margin: 0; }

@media(max-width:600px) { .hbg-badge-filters{ flex-direction: column; align-items: stretch; }
  .hbg-badge-search-wrap, .hbg-badge-rarity-wrap { flex: 1 1 auto; width:100%; } }

/* ===============================================================
   HBG — Salvar ao lado de Categoria / Raridade (editor de emblemas)
   Busca compacta e botão alinhado aos campos; sem alterar eventos.
   =============================================================== */
#hbg-public-badge-modal .hbg-badge-filters {
  display: grid;
  grid-template-columns: minmax(140px, 0.9fr) minmax(215px, 1.15fr) max-content;
  gap: 12px;
  align-items: end;
}
#hbg-public-badge-modal .hbg-badge-search-wrap,
#hbg-public-badge-modal .hbg-badge-rarity-wrap {
  min-width: 0;
  width: 100%;
}
#hbg-public-badge-modal .hbg-badge-save-wrap {
  display: flex;
  align-items: flex-end;
  min-width: 0;
}
#hbg-public-badge-modal .hbg-badge-save-wrap #btn-save-badges {
  height: 41px;
  margin: 0;
  padding: 0 16px;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: auto;
}
@media (max-width: 740px) {
  #hbg-public-badge-modal .hbg-badge-filters {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
  #hbg-public-badge-modal .hbg-badge-search-wrap {
    grid-column: 1 / -1;
  }
  #hbg-public-badge-modal .hbg-badge-rarity-wrap {
    grid-column: 1;
  }
  #hbg-public-badge-modal .hbg-badge-save-wrap {
    grid-column: 2;
  }
}
@media (max-width: 430px) {
  #hbg-public-badge-modal .hbg-badge-filters {
    grid-template-columns: minmax(0, 1fr);
  }
  #hbg-public-badge-modal .hbg-badge-search-wrap,
  #hbg-public-badge-modal .hbg-badge-rarity-wrap,
  #hbg-public-badge-modal .hbg-badge-save-wrap {
    grid-column: 1;
  }
  #hbg-public-badge-modal .hbg-badge-save-wrap #btn-save-badges {
    width: 100%;
  }
}

/* HBG — emblemas escolhidos: clique para remover diretamente na prévia */
#hbg-public-badge-modal button.hbg-public-preview-slot.is-filled {
  position: relative;
  font: inherit;
  padding: 3px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
#hbg-public-badge-modal button.hbg-public-preview-slot.is-filled:hover,
#hbg-public-badge-modal button.hbg-public-preview-slot.is-filled:focus-visible {
  border-color: #ff7c90;
  background: rgba(255, 124, 144, .10);
  transform: translateY(-2px);
  outline: none;
}
#hbg-public-badge-modal button.hbg-public-preview-slot.is-filled::after {
  content: '×';
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  background: #a73f56;
  border-radius: 0 4px 0 5px;
  color: white;
  font: 700 15px/1 sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
#hbg-public-badge-modal button.hbg-public-preview-slot.is-filled:hover::after,
#hbg-public-badge-modal button.hbg-public-preview-slot.is-filled:focus-visible::after {
  opacity: 1;
}
@media (hover: none) {
  #hbg-public-badge-modal button.hbg-public-preview-slot.is-filled::after {
    opacity: .95;
  }
}
/* A caixinha com nome/descrição usa a mesma classe e visual do Perfil Público.
   O JavaScript agora a coloca dentro do dialog para não ficar atrás dele. */

/* ============================================================
   HBG — Regras oficiais e central de moderação 2026-11-01
   ============================================================ */
#view-adm .hbg-adm-rules-form {display:grid;gap:12px;}
#view-adm .hbg-adm-rules-form > label{color:var(--gold,#d9b65d);font-size:13px;font-weight:700}
#view-adm #hbg-adm-rules-text{width:100%;min-height:165px;resize:vertical;line-height:1.7;padding:15px;border-radius:12px;border:1px solid var(--border,#343443);background:var(--bg-soft,#14151c);color:var(--text,#f1eef8);font:inherit;box-sizing:border-box}
#view-adm #hbg-adm-rules-text:focus,#view-adm .hbg-adm-mod-filters input:focus,#view-adm .hbg-adm-mod-filters select:focus{outline:2px solid #d9b65d66;outline-offset:2px}
#view-adm #hbg-adm-rules-text:disabled{opacity:.65;cursor:not-allowed}
#view-adm .hbg-adm-rules-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
#view-adm #hbg-adm-rules-meta{font-size:12px;color:var(--muted,#9996ad)}
#view-forum .hbg-rules-official{font-size:11px;color:var(--gold,#d9b65d);margin:0 0 12px;font-weight:700;letter-spacing:.035em}
#view-adm .hbg-adm-mod-filters{display:grid;grid-template-columns:1fr 1fr minmax(170px,1.5fr) auto;gap:12px;align-items:end;margin:14px 0}
#view-adm .hbg-adm-mod-filters label{display:grid;gap:6px;font-size:12px;color:var(--muted,#9996ad)}
#view-adm .hbg-adm-mod-filters :is(input,select){min-height:41px;min-width:0;width:100%;border-radius:10px;box-sizing:border-box;padding:9px 12px;border:1px solid var(--border,#343443);background:var(--bg-soft,#14151c);color:var(--text,#f1eef8);font:inherit;font-size:13px}
#view-adm .hbg-adm-mod-results{display:grid;gap:12px;margin:12px 0}
#view-adm .hbg-adm-mod-item{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px;border:1px solid var(--border,#343443);background:var(--bg-soft,#14151c);border-radius:12px}
#view-adm .hbg-adm-mod-item.hbg-adm-mod-hidden{border-color:rgba(235,97,117,.38)}
#view-adm .hbg-adm-mod-info{min-width:0;flex:1;display:grid;gap:6px}
#view-adm .hbg-adm-mod-info strong{font-size:14px;color:var(--text,#f1eef8);overflow-wrap:anywhere}
#view-adm .hbg-adm-mod-info small{font-size:12px;color:var(--muted,#9996ad);overflow-wrap:anywhere}
#view-adm .hbg-adm-mod-preview{font-size:13px;color:var(--muted,#9996ad);line-height:1.5;max-height:3.1em;overflow:hidden;overflow-wrap:anywhere;white-space:pre-wrap}
#view-adm .hbg-adm-mod-item button{flex-shrink:0}
#view-adm .hbg-adm-mod-pager{display:flex;justify-content:center;gap:14px;align-items:center;flex-wrap:wrap;padding-top:10px}
#view-adm .hbg-adm-mod-pager span{font-size:12px;color:var(--muted,#9996ad)}
#view-adm .hbg-adm-mod-item.hbg-adm-mod-hidden button{border-color:var(--gold,#d9b65d)}
@media(max-width:860px){#view-adm .hbg-adm-mod-filters{grid-template-columns:1fr 1fr}#view-adm .hbg-adm-mod-item{align-items:stretch;flex-direction:column}}
@media(max-width:540px){#view-adm .hbg-adm-mod-filters{grid-template-columns:1fr}#view-adm .hbg-adm-mod-item button{width:100%}}


/* =============================================================
   HBG — ÍCONES PIXEL-ART DO FÓRUM (HabboAssets)
   Mantém a nitidez dos pixels e alinha os ícones aos textos.
   ============================================================= */
#view-forum img.hbg-forum-pixel-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
}

/* Miniatura de categoria na etiqueta de cada tópico. */
#view-forum .hbg-forum-tag img.hbg-forum-pixel-icon {
  width: 17px;
  height: 17px;
}

/* Destaque visual no título da coluna lateral. */
#view-forum .hbg-forum-sidebar-card h3 img.hbg-forum-pixel-icon {
  width: 25px;
  height: 25px;
}

/* ================================================================
   HBG — HOLOFOTE PIXELADO NO PERFIL PÚBLICO (v7)
   Visual de referência: luz suave atrás + base oval em anéis.
   NÃO altera a posição do personagem, o sentar, girar ou botões.
   ================================================================ */

/* Centraliza a iluminação em relação ao palco, não ao texto do perfil. */
#view-perfil-publico .hbg-public-identity::before {
  display: none !important;
}

/* Luz difusa subindo atrás do personagem. */
#view-perfil-publico .hbg-avatar-palco::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 20px;
  width: 180px;
  height: 226px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 70%,
    rgba(139, 151, 218, 0.20) 0%,
    rgba(101, 114, 184, 0.13) 33%,
    rgba(75, 89, 152, 0.06) 58%,
    transparent 79%
  );
  filter: blur(12px);
}

/* Piso oval iluminado: núcleo escuro e aros prateados suaves. */
#view-perfil-publico .hbg-avatar-palco::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 13px;
  width: 164px;
  height: 48px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 48%,
    rgba(29, 34, 52, 0.92) 0% 32%,
    rgba(73, 81, 117, 0.85) 40%,
    rgba(127, 136, 176, 0.50) 55%,
    rgba(141, 151, 192, 0.17) 71%,
    transparent 89%
  );
  box-shadow: 0 0 18px rgba(132, 146, 211, 0.12);
  filter: blur(1.3px);
}

/* Evita que qualquer efeito cubra os pixels do personagem. */
#view-perfil-publico .hbg-avatar-palco #hbg-public-avatar {
  z-index: 1;
}

/* Mantém o efeito proporcional no celular, sem mudar a pose. */
@media (max-width: 640px), (hover: none) {
  #view-perfil-publico .hbg-avatar-palco::before {
    width: 132px;
    height: 190px;
    bottom: 17px;
  }
  #view-perfil-publico .hbg-avatar-palco::after {
    width: 115px;
    height: 34px;
    bottom: 10px;
  }
}


/* ============================================================
   HBG JUKEBOX NOSTALGIA v1 — COLE NO FINAL DO CSS
   Adição independente, sem alterar o restante do site.
   ============================================================ */
#hbg-jukebox-root {
  --hbg-jb-gold: #d9b65d;
  --hbg-jb-soft: #ffe3a0;
  --hbg-jb-text: #f1eef8;
  --hbg-jb-muted: #a9a3b8;
  position: fixed;
  right: 23px;
  bottom: 22px;
  z-index: 1500;
  font-family: Inter, system-ui, sans-serif;
  color: var(--hbg-jb-text);
}
#hbg-jukebox-root *,
#hbg-jukebox-root *::before,
#hbg-jukebox-root *::after { box-sizing: border-box; }
#hbg-jukebox-root button { cursor: pointer; font: inherit; }
#hbg-jukebox-root button:focus-visible,
#hbg-jukebox-root input:focus-visible { outline: 2px solid #ffe3a0; outline-offset: 3px; }
#hbg-jukebox-root [hidden] { display: none !important; }
#hbg-jukebox-toggle {
  width: 55px;
  height: 55px;
  margin-left: auto;
  border: 1px solid rgba(255, 227, 160, .55);
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2d2440, #161722 62%, #332615);
  color: #ffe3a0;
  box-shadow: 0 8px 32px rgba(0,0,0,.55), inset 0 0 0 3px rgba(217,182,93,.06);
  transition: transform .15s ease, border-color .2s ease;
}
#hbg-jukebox-toggle:hover { transform: translateY(-2px); border-color: #ffe3a0; }
#hbg-jukebox-toggle .hbg-jb-music-note { font: 900 31px/1 Georgia,serif; text-shadow: 0 1px 0 #855917,0 0 16px rgba(217,182,93,.36); }
#hbg-jukebox-toggle.hbg-jb-is-playing::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  background: #86dba9;
  border: 1px solid #15251f;
  box-shadow: 0 0 9px #86dba9;
}
#hbg-jukebox-panel {
  width: min(350px, calc(100vw - 24px));
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(217,182,93,.38);
  border-radius: 16px;
  background: linear-gradient(150deg, #252033, #181a27 48%, #12141f);
  box-shadow: 0 18px 56px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,227,160,.06);
}
.hbg-jb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 15px 12px;
  background: radial-gradient(ellipse at 20% 0%, rgba(185,123,247,.13), transparent 62%);
  border-bottom: 1px solid rgba(217,182,93,.15);
}
.hbg-jb-head { display: flex; align-items: center; gap: 11px; }
.hbg-jb-disc {
  width: 40px;
  height: 40px;
  border: 1px solid #605174;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: repeating-radial-gradient(circle,#1c1d2d 0 4px,#303149 5px 6px);
  box-shadow: 0 0 13px rgba(168,121,220,.15);
  color: #d9b65d;
  font-size: 17px;
}
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-disc { animation: hbg-jb-spin 5s linear infinite; }
@keyframes hbg-jb-spin { to { transform: rotate(360deg); } }
.hbg-jb-head strong { display:block;color:#ffe3a0;font-size:14px;letter-spacing:.25px;line-height:1.3; }
.hbg-jb-head small { display:block;color:#a9a3b8;font-size:10px;letter-spacing:1px;margin-top:2px; }
.hbg-jb-close {
  height:30px;width:30px;border:1px solid rgba(217,182,93,.18);border-radius:8px;
  color:#c6bed4;background:#222334;font-size:19px;line-height:1;
}
.hbg-jb-now { padding: 13px 15px 10px; }
.hbg-jb-label { display:block;color:#a99dc3;letter-spacing:1.1px;text-transform:uppercase;font-weight:800;font-size:9px; }
.hbg-jb-track-title { display:block;color:#ffe3a0;font-size:17px;font-weight:800;margin-top:3px; }
.hbg-jb-track-desc { display:block;color:#b1aabe;font-size:11px;margin-top:2px;min-height:17px; }
.hbg-jb-bars { display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:8px; }
.hbg-jb-bars i { width:7px;height:6px;background:#8f789f;border-radius:2px;opacity:.55; }
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-bars i:nth-child(1) { animation: hbg-jb-beat .75s ease-in-out infinite alternate; }
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-bars i:nth-child(2) { animation: hbg-jb-beat .52s ease-in-out -.15s infinite alternate; }
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-bars i:nth-child(3) { animation: hbg-jb-beat .68s ease-in-out -.32s infinite alternate; }
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-bars i:nth-child(4) { animation: hbg-jb-beat .43s ease-in-out -.11s infinite alternate; }
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-bars i:nth-child(5) { animation: hbg-jb-beat .83s ease-in-out -.24s infinite alternate; }
#hbg-jukebox-root.hbg-jb-playing .hbg-jb-bars i:nth-child(6) { animation: hbg-jb-beat .55s ease-in-out -.18s infinite alternate; }
@keyframes hbg-jb-beat { to {height:24px;background:#d9b65d;opacity:1;} }
.hbg-jb-controls {display:flex;align-items:center;justify-content:center;gap:13px;padding:7px 15px 13px;}
.hbg-jb-control {
  color:#e5d9f3;border:1px solid transparent;border-radius:10px;background:transparent;
  width:36px;height:35px;font-size:22px;line-height:1;
}
.hbg-jb-control:hover {background:#30304a;border-color:#4d445e;}
.hbg-jb-control.hbg-jb-main {
  width:48px;height:44px;color:#21190a;font-weight:900;font-size:23px;
  background:linear-gradient(135deg,#ffe3a0,#d9b65d);border:1px solid #f3d685;
  box-shadow:0 4px 16px rgba(217,182,93,.15);
}
.hbg-jb-volume {display:flex;align-items:center;gap:9px;margin:0 15px 13px;font-size:11px;color:#c8bfd8;}
.hbg-jb-volume label {min-width:46px;}
#hbg-jukebox-volume {width:100%;accent-color:#d9b65d;cursor:pointer;height:4px;}
.hbg-jb-list {border-top:1px solid rgba(217,182,93,.17);padding:10px 11px 13px;}
.hbg-jb-list-title {display:block;font-size:10px;font-weight:800;color:#a9a3b8;letter-spacing:1px;margin:0 4px 8px;}
.hbg-jb-song {
  display:flex;align-items:center;gap:8px;width:100%;border-radius:9px;
  border:1px solid transparent;background:transparent;padding:8px;text-align:left;color:#d7d0e4;
}
.hbg-jb-song:hover {background:#282639;}
.hbg-jb-song[aria-current="true"] {background:rgba(217,182,93,.09);border-color:rgba(217,182,93,.3);color:#ffe3a0;}
.hbg-jb-song-no {color:#967fc0;font-size:10px;min-width:20px;font-weight:800;}
.hbg-jb-song-name {font-size:12px;font-weight:650;}
.hbg-jb-song-length {margin-left:auto;font-size:9px;color:#aaa5b7;}
.hbg-jb-footer {padding:9px 14px 13px;color:#7d788b;font-size:10px;text-align:center;line-height:1.35;}
.hbg-jb-error {display:block;padding:0 14px 10px;color:#ffacb3;font-size:11px;}
@media (max-width:600px) {
  #hbg-jukebox-root {right:12px;bottom:12px;}
  #hbg-jukebox-toggle {width:49px;height:49px;}
  #hbg-jukebox-panel {max-height:calc(100dvh - 85px);overflow-y:auto;}
}
@media (prefers-reduced-motion:reduce) {
  #hbg-jukebox-root .hbg-jb-disc,#hbg-jukebox-root .hbg-jb-bars i {animation:none!important;}
}
/* FIM — HBG JUKEBOX NOSTALGIA v1 */


/* ==========================================================
   HBG JUKEBOX TRAX v2 — COMPLEMENTO CSS
   ADICIONAR AO FINAL DO CSS, SEM REMOVER O CSS DA V1.
   A Jukebox continua no canto; o catálogo ganha rolagem.
   ========================================================== */
#hbg-jukebox-root #hbg-jukebox-panel { width:min(386px,calc(100vw - 24px)); }
#hbg-jukebox-root .hbg-jb-progress-area {padding:0 15px 5px;display:flex;align-items:center;gap:11px;}
#hbg-jukebox-root #hbg-jb-progress {flex:1;min-width:0;accent-color:#d9b65d;height:5px;cursor:pointer;}
#hbg-jukebox-root #hbg-jb-time {font-size:10px;min-width:68px;text-align:right;font-variant-numeric:tabular-nums;color:#bdb3d2;}
#hbg-jukebox-root .hbg-jb-controls { gap:10px;padding-bottom:10px; }
#hbg-jukebox-root .hbg-jb-controls .hbg-jb-mode {font-size:22px;color:#a99cbc;}
#hbg-jukebox-root .hbg-jb-controls .hbg-jb-mode[aria-pressed="true"] {color:#ffe3a0;background:rgba(217,182,93,.12);border-color:rgba(217,182,93,.25);}
#hbg-jukebox-root .hbg-jb-catalog {border-top:1px solid rgba(217,182,93,.17);padding:11px 12px 0;}
#hbg-jukebox-root .hbg-jb-search-row {display:flex;align-items:center;gap:8px;}
#hbg-jukebox-root #hbg-jb-search {background:#151723;color:#f1eef8;border:1px solid #393344;border-radius:9px;padding:9px 10px;outline:none;min-width:0;flex:1;font:inherit;font-size:12px;}
#hbg-jukebox-root #hbg-jb-search:focus {border-color:#d9b65d;}
#hbg-jukebox-root #hbg-jb-search::placeholder {color:#898397;}
#hbg-jukebox-root #hbg-jb-list-count {font-size:10px;color:#9e92ab;white-space:nowrap;}
#hbg-jukebox-root .hbg-jb-filters {display:flex;gap:5px;flex-wrap:wrap;margin:10px 0 10px;}
#hbg-jukebox-root .hbg-jb-filters button {border:1px solid #41394d;background:#20202e;border-radius:7px;font-size:10px;color:#aea5bf;padding:6px 9px;}
#hbg-jukebox-root .hbg-jb-filters button[aria-pressed="true"] {border-color:#bb9650;color:#ffe3a0;background:rgba(217,182,93,.12);}
#hbg-jukebox-root .hbg-jb-list-title {margin:0 4px 8px;}
#hbg-jukebox-root .hbg-jb-list {padding:0 0 5px;max-height:235px;overflow:auto;scrollbar-color:#4b4054 transparent;scrollbar-width:thin;}
#hbg-jukebox-root .hbg-jb-song-row {display:flex;align-items:center;border:1px solid transparent;border-radius:9px;transition:background .15s ease;}
#hbg-jukebox-root .hbg-jb-song-row:hover {background:#282639;}
#hbg-jukebox-root .hbg-jb-song-row.hbg-jb-active {background:rgba(217,182,93,.09);border-color:rgba(217,182,93,.3);}
#hbg-jukebox-root .hbg-jb-song {flex:1;min-width:0;width:auto;border:0!important;background:transparent!important;padding:7px 4px 7px 8px;}
#hbg-jukebox-root .hbg-jb-song-description {min-width:0;flex:1;display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;gap:3px;}
#hbg-jukebox-root .hbg-jb-song-name {font-size:11px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;}
#hbg-jukebox-root .hbg-jb-song-description small {color:#938aa2;font-size:9px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%;}
#hbg-jukebox-root .hbg-jb-song-length {font-variant-numeric:tabular-nums;font-size:10px;margin-left:0;}
#hbg-jukebox-root .hbg-jb-favorite {border:0;background:transparent;color:#817b92;font-size:19px;min-width:28px;min-height:32px;padding:1px 3px;}
#hbg-jukebox-root .hbg-jb-favorite:hover,#hbg-jukebox-root .hbg-jb-favorite[aria-pressed="true"] {color:#ffe3a0;}
#hbg-jukebox-root .hbg-jb-none {padding:16px 8px;text-align:center;color:#a49baa;font-size:12px;}
#hbg-jukebox-root .hbg-jb-footer {font-size:9px;}
@media(max-width:600px) {
  #hbg-jukebox-root #hbg-jukebox-panel {max-height:calc(100dvh - 95px);overflow-y:auto;}
  #hbg-jukebox-root .hbg-jb-list {max-height:170px;}
}
/* FIM — COMPLEMENTO CSS DA JUKEBOX TRAX v2 */


/* ===============================================================
   HBG — ÍCONES PIXEL ART • PERFIL / CONQUISTAS / SOM / BUSCAS
   Somente visual. Não altera comportamento da Jukebox nem do HBG.
   Fontes fornecidas pelo usuário; dependem de links externos ativos.
   =============================================================== */

/* Meu Perfil (menu superior) */
.user-profile-nav .dropdown-item[data-target="perfil"] .hbg-pixel-icon-profile {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
}

/* Conquistas: título público, Estatísticas e tela Minhas Conquistas */
#view-perfil-publico .hbg-public-panel h2 .hbg-achievements-pixel,
#view-perfil .hbg-achievements-recent-card h3 .hbg-achievements-pixel {
  display: inline-block;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: middle;
}

/* Lupa: Galeria / Perfil Público */
.search-box > .hbg-search-pixel-gallery {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
  image-rendering: pixelated;
}
#view-perfil-publico .hbg-public-search > .hbg-search-pixel-public {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 1;
}

/* Lupa no campo de emblemas, filtro de raridade,
   moderação e busca interna de músicas da Jukebox. */
#hbg-badge-search,
#hbg-adm-mod-search {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcid3H8eljxiH-E2W_aREnTTOL0DkJ072speUE80bHZUi5jf22gGlGiOCet52ExNmrAkYyLGxtAq__raPwr6_jbvG-t4ZEAGnrzorkQrTMqL1tX_jV6ullAy7swKhaGW8SFlvPdvLdOcg/s1600/tinyiconglass.gif");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 17px 17px;
  padding-left: 38px !important;
}
#hbg-jukebox-root #hbg-jb-search {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcid3H8eljxiH-E2W_aREnTTOL0DkJ072speUE80bHZUi5jf22gGlGiOCet52ExNmrAkYyLGxtAq__raPwr6_jbvG-t4ZEAGnrzorkQrTMqL1tX_jV6ullAy7swKhaGW8SFlvPdvLdOcg/s1600/tinyiconglass.gif");
  background-repeat: no-repeat;
  background-position: 11px center;
  background-size: 17px 17px;
  padding-left: 37px;
}

/* Botão flutuante da Jukebox Trax */
#hbg-jukebox-toggle .hbg-jb-sound-pixel {
  display: block;
  width: 31px;
  height: 31px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}


/* ===== HBG: JUKEBOX V3 — CATALOGO AUTOMATICO E SAMPLES ===== */
#hbg-jukebox-root .hbg-jb-sync-row {
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:9px;padding:8px 5px 2px;
}
#hbg-jukebox-root #hbg-jb-total-label {
  color:#ffe3a0;font-size:9px;font-weight:800;letter-spacing:.4px;
}
#hbg-jukebox-root #hbg-jb-refresh,
#hbg-jukebox-root .hbg-jb-show-more {
  background:#272435;border:1px solid #574561;border-radius:8px;
  color:#f5e5ff;font-size:10px;font-weight:700;
  padding:7px 9px;cursor:pointer;transition:background .15s;
}
#hbg-jukebox-root #hbg-jb-refresh:hover,
#hbg-jukebox-root .hbg-jb-show-more:hover {background:#3c3150;}
#hbg-jukebox-root .hbg-jb-sync-status {
  display:block;padding:1px 5px 8px;font-size:9px;line-height:1.4;color:#aaa2b7;
}
#hbg-jukebox-root .hbg-jb-sync-status[data-state="ok"] {color:#a6dfb8;}
#hbg-jukebox-root .hbg-jb-sync-status[data-state="error"] {color:#e8a9b2;}
#hbg-jukebox-root .hbg-jb-show-more {width:100%;margin:10px 0 5px;}
#hbg-jukebox-root .hbg-jb-filters {flex-wrap:wrap;}
#hbg-jukebox-root .hbg-jb-list {scrollbar-width:thin;}

/* ================================================================
   HBG - JUKEBOX LATERAL FIXA | POSICAO SOB O LOGOTIPO
   Adicionado em 01/11/2026.
   Atualiza APENAS o posicionamento. Nao altera a musica, o player,
   a navegacao, o avatar, a posicao sentado ou o holofote.
   ================================================================ */

/* Botao acompanha a rolagem, logo abaixo do cabecalho da HBG. */
#hbg-jukebox-root {
  position: fixed !important;
  top: 98px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
  width: 55px;
  min-width: 55px;
  z-index: 1500;
  overflow: visible !important;
}

/* Garantir que toda a area do botao seja clicavel. */
#hbg-jukebox-root #hbg-jukebox-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  min-width: 55px;
  min-height: 55px;
  margin: 0 !important;
  padding: 0;
  touch-action: manipulation;
}

/* Ao abrir, a janela cresce para a DIREITA e para BAIXO. */
#hbg-jukebox-root #hbg-jukebox-panel {
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 12px) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(386px, calc(100vw - 112px)) !important;
  min-width: 0;
  max-width: none;
  max-height: calc(100dvh - 114px);
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #51435f transparent;
  scrollbar-width: thin;
  z-index: 1;
  transform-origin: top left;
  animation: hbg-jb-entrar-lateral .19s ease-out both;
}

@keyframes hbg-jb-entrar-lateral {
  from { opacity: 0; transform: translate(-8px, 5px); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* Evita que um painel longo saia da tela. A lista tem rolagem propria. */
#hbg-jukebox-root .hbg-jb-list {
  max-height: min(235px, 31dvh);
  overflow-y: auto;
}

/* Telas estreitas: botao permanece abaixo do logo e janela abre
   PARA BAIXO, sem sair pela borda direita do aparelho. */
@media (max-width: 540px) {
  #hbg-jukebox-root {
    top: 87px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    width: 52px;
    min-width: 52px;
  }
  #hbg-jukebox-root #hbg-jukebox-toggle {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
  #hbg-jukebox-root #hbg-jukebox-panel {
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: auto !important;
    width: min(386px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 166px);
  }
  #hbg-jukebox-root .hbg-jb-list {
    max-height: min(170px, 22dvh);
  }
}

/* Animacao opcional; respeita a preferencia de movimento do visitante. */
@media (prefers-reduced-motion: reduce) {
  #hbg-jukebox-root #hbg-jukebox-panel {
    animation: none;
  }
}
/* FIM - HBG JUKEBOX LATERAL FIXA */

/* ================================================================
   HBG - IDENTIFICACAO DOS MODOS MUSICAIS | JUKEBOX + TRAX EM BREVE
   Ajuste visual isolado. Nao modifica a reproducao de audio.
   ================================================================ */
#hbg-jukebox-root .hbg-jb-modes {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px 10px;
  border-bottom: 1px solid rgba(217, 182, 93, .13);
  background: linear-gradient(180deg, rgba(168, 121, 220, .07), transparent);
}
#hbg-jukebox-root .hbg-jb-mode-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 47px;
  padding: 8px 9px;
  border: 1px solid #383346;
  border-radius: 10px;
  background: #191a27;
}
#hbg-jukebox-root .hbg-jb-mode-card-current {
  border-color: rgba(217, 182, 93, .51);
  background: linear-gradient(95deg, rgba(217, 182, 93, .12), rgba(217, 182, 93, .045));
}
#hbg-jukebox-root .hbg-jb-mode-card-future {
  border-color: #332f41;
  background: rgba(18, 19, 29, .83);
  opacity: .84;
}
#hbg-jukebox-root .hbg-jb-mode-symbol {
  flex: 0 0 25px;
  width: 25px;
  display: grid;
  place-items: center;
  font: 800 22px/1 Georgia, serif;
  color: #ffe3a0;
}
#hbg-jukebox-root .hbg-jb-mode-card-future .hbg-jb-mode-symbol {
  color: #a79bb7;
}
#hbg-jukebox-root .hbg-jb-mode-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
#hbg-jukebox-root .hbg-jb-mode-text strong {
  color: #ffe3a0;
  font-size: 12px;
  line-height: 1.2;
}
#hbg-jukebox-root .hbg-jb-mode-card-future .hbg-jb-mode-text strong {
  color: #c1bacf;
}
#hbg-jukebox-root .hbg-jb-mode-text small {
  color: #aaa1bd;
  font-size: 10px;
  line-height: 1.25;
}
#hbg-jukebox-root .hbg-jb-mode-tag {
  flex: 0 0 auto;
  white-space: nowrap;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .25px;
}
#hbg-jukebox-root .hbg-jb-mode-tag-current {
  background: rgba(217, 182, 93, .15);
  color: #ffe3a0;
}
#hbg-jukebox-root .hbg-jb-mode-tag-future {
  background: #292637;
  color: #a99dbb;
}
#hbg-jukebox-root .hbg-jb-modes-count {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 3px 0 0;
  color: #aaa1b9;
  font-size: 10px;
  text-align: center;
}
#hbg-jukebox-root .hbg-jb-modes-count strong {
  color: #ffe3a0;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  #hbg-jukebox-root .hbg-jb-modes { padding: 9px 10px; }
  #hbg-jukebox-root .hbg-jb-mode-card { padding: 8px 7px; }
  #hbg-jukebox-root .hbg-jb-mode-text small { font-size: 9px; }
  #hbg-jukebox-root .hbg-jb-mode-tag { font-size: 8px; padding: 5px 6px; }
}
/* FIM - HBG MODOS MUSICAIS */


/* ===========================================================
   HBG — RESPOSTAS EM COMENTÁRIOS + ABAS DAS NOTIFICAÇÕES (V1)
   =========================================================== */
.hbg-notif-tabs { display:flex; align-items:stretch; gap:5px; padding:10px 12px;
  border-bottom:1px solid #333044; background:#171923; }
.hbg-notif-tab { flex:1; min-width:0; border:1px solid transparent; border-radius:8px;
  padding:9px 5px; font-size:11px; font-weight:750; color:#aaa5bd; background:#222333;
  cursor:pointer; transition:.18s ease; }
.hbg-notif-tab:hover { color:#ffe3a0; border-color:#594a64; }
.hbg-notif-tab.is-active { color:#ffe3a0; border-color:rgba(217,182,93,.5);
  background:rgba(217,182,93,.10); }
.hbg-notif-tab:focus-visible, .hbg-reply-action:focus-visible,
.hbg-reply-cancel:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.hbg-notif-item.hbg-notif-clickable { cursor:pointer; }
.hbg-notif-item-icon .ph-chat-circle-dots { color:#bca1ff; }
.hbg-notif-item-icon .ph-at { color:#85bfff; }
.hbg-notif-item-icon .ph-medal { color:#ffe3a0; }
.hbg-reply-action { border:0; padding:2px 0; background:transparent;
  color:#d9b65d; cursor:pointer; font:inherit; font-size:11px; font-weight:700; }
.hbg-reply-action:hover { color:#ffe3a0; text-decoration:underline; }
.hbg-reply-meta { display:block; margin:2px 0 5px; padding-left:8px;
  border-left:2px solid rgba(168,121,220,.6); color:#b7a6d6; font-size:11px; }
.hbg-reply-meta strong { color:#d9b65d; }
.hbg-reply-card { border-left:2px solid rgba(168,121,220,.35); padding-left:8px;
  margin-left:8px; }
.hbg-reply-target { display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:9px; padding:8px 10px; border:1px solid rgba(217,182,93,.3);
  background:rgba(217,182,93,.07); border-radius:9px; color:#e8d5a1; font-size:11px; }
.hbg-reply-target[hidden] { display:none !important; }
.hbg-reply-cancel { border:0; border-radius:6px; padding:4px 8px;
  background:#302a40; color:#fff; font-size:11px; font-weight:700; cursor:pointer; }
.hbg-forum-dialog-comment.hbg-reply-card { margin-left:12px; }
@media(max-width:480px) {
  .hbg-notif-tabs { gap:4px; padding:8px; }
  .hbg-notif-tab { font-size:10px; padding:9px 3px; }
  .hbg-reply-card { margin-left:3px; padding-left:6px; }
}

/* ============================================================
   HBG — CORES DO TOP 5 DOS MEMBROS EM DESTAQUE
   Aplica em Membros em destaque e Últimas interações
   ============================================================ */

#view-forum #hbg-forum-members .hbg-forum-member-destaque,
#view-forum #hbg-forum-activity .hbg-forum-activity-link {
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

/* ---------- TOP 1 ---------- */
#view-forum #hbg-forum-members .hbg-forum-member-destaque.hbg-rank-top-1 {
  background: linear-gradient(180deg, rgba(217,182,93,.12), rgba(217,182,93,.03));
  border-color: rgba(217,182,93,.38);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar.hbg-rank-top-1,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar.hbg-rank-top-1 {
  border-color: #d9b65d;
  box-shadow: 0 0 14px rgba(217,182,93,.18);
}
#view-forum #hbg-forum-members .hbg-forum-member-name.hbg-rank-top-1,
#view-forum #hbg-forum-activity .hbg-forum-activity-member-destaque.hbg-rank-top-1 {
  color: #ffe08a;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link.hbg-rank-top-1 {
  padding-left: 8px;
  border-left: 2px solid #d9b65d;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(217,182,93,.11), rgba(217,182,93,0));
}

/* ---------- TOP 2 ---------- */
#view-forum #hbg-forum-members .hbg-forum-member-destaque.hbg-rank-top-2 {
  background: linear-gradient(180deg, rgba(205,214,227,.10), rgba(205,214,227,.03));
  border-color: rgba(205,214,227,.30);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar.hbg-rank-top-2,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar.hbg-rank-top-2 {
  border-color: #cdd6e3;
  box-shadow: 0 0 14px rgba(205,214,227,.14);
}
#view-forum #hbg-forum-members .hbg-forum-member-name.hbg-rank-top-2,
#view-forum #hbg-forum-activity .hbg-forum-activity-member-destaque.hbg-rank-top-2 {
  color: #eef3fb;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link.hbg-rank-top-2 {
  padding-left: 8px;
  border-left: 2px solid #cdd6e3;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(205,214,227,.10), rgba(205,214,227,0));
}

/* ---------- TOP 3 ---------- */
#view-forum #hbg-forum-members .hbg-forum-member-destaque.hbg-rank-top-3 {
  background: linear-gradient(180deg, rgba(196,128,74,.12), rgba(196,128,74,.03));
  border-color: rgba(196,128,74,.34);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar.hbg-rank-top-3,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar.hbg-rank-top-3 {
  border-color: #c4804a;
  box-shadow: 0 0 14px rgba(196,128,74,.16);
}
#view-forum #hbg-forum-members .hbg-forum-member-name.hbg-rank-top-3,
#view-forum #hbg-forum-activity .hbg-forum-activity-member-destaque.hbg-rank-top-3 {
  color: #efb480;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link.hbg-rank-top-3 {
  padding-left: 8px;
  border-left: 2px solid #c4804a;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(196,128,74,.11), rgba(196,128,74,0));
}

/* ---------- TOP 4 ---------- */
#view-forum #hbg-forum-members .hbg-forum-member-destaque.hbg-rank-top-4 {
  background: linear-gradient(180deg, rgba(168,121,220,.13), rgba(168,121,220,.03));
  border-color: rgba(168,121,220,.35);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar.hbg-rank-top-4,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar.hbg-rank-top-4 {
  border-color: #a879dc;
  box-shadow: 0 0 14px rgba(168,121,220,.18);
}
#view-forum #hbg-forum-members .hbg-forum-member-name.hbg-rank-top-4,
#view-forum #hbg-forum-activity .hbg-forum-activity-member-destaque.hbg-rank-top-4 {
  color: #d6b4ff;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link.hbg-rank-top-4 {
  padding-left: 8px;
  border-left: 2px solid #a879dc;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(168,121,220,.11), rgba(168,121,220,0));
}

/* ---------- TOP 5 ---------- */
#view-forum #hbg-forum-members .hbg-forum-member-destaque.hbg-rank-top-5 {
  background: linear-gradient(180deg, rgba(120,169,255,.12), rgba(120,169,255,.03));
  border-color: rgba(120,169,255,.34);
}
#view-forum #hbg-forum-members .hbg-forum-member-destaque-avatar.hbg-rank-top-5,
#view-forum #hbg-forum-activity .hbg-forum-activity-avatar.hbg-rank-top-5 {
  border-color: #78a9ff;
  box-shadow: 0 0 14px rgba(120,169,255,.18);
}
#view-forum #hbg-forum-members .hbg-forum-member-name.hbg-rank-top-5,
#view-forum #hbg-forum-activity .hbg-forum-activity-member-destaque.hbg-rank-top-5 {
  color: #9dc3ff;
}
#view-forum #hbg-forum-activity .hbg-forum-activity-link.hbg-rank-top-5 {
  padding-left: 8px;
  border-left: 2px solid #78a9ff;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(120,169,255,.11), rgba(120,169,255,0));
}

/* HBG — CONQUISTAS NO SININHO (opcional, não modifica outros avisos) */
#hbg-notif-list .hbg-notif-item.hbg-notif-achievement {
  border-left: 2px solid rgba(217,182,93,.75);
  background: linear-gradient(90deg, rgba(217,182,93,.075), transparent 65%);
}
#hbg-notif-list .hbg-notif-achievement .hbg-notif-item-icon {
  color: #ffe3a0;
  background: rgba(217,182,93,.13);
  border-color: rgba(217,182,93,.30);
}
#hbg-notif-list .hbg-notif-achievement:hover {
  background: linear-gradient(90deg, rgba(217,182,93,.13), rgba(217,182,93,.02));
}


/* ================================================================
   HBG — CENTRAL DE NOTIFICAÇÕES V2 (2026-11-02)
   Adicionar AO FINAL do CSS; mantém os estilos anteriores do Fórum.
   ================================================================ */
#hbg-notif-dropdown.hbg-notif-dropdown {
  width: 440px;
  max-width: calc(100vw - 24px);
}
#hbg-notif-dropdown .hbg-notif-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 12px 14px;
  background: #171923;
  border-bottom: 1px solid rgba(168,121,220,.15);
}
#hbg-notif-dropdown .hbg-notif-tab {
  min-height: 35px;
  padding: 8px 4px;
  font-size: 11px;
  border-radius: 9px;
  white-space: nowrap;
}
#hbg-notif-dropdown .hbg-notif-tab.is-active {
  border-color: rgba(217,182,93,.55);
  background: linear-gradient(135deg,rgba(217,182,93,.16),rgba(168,121,220,.09));
  color: #ffe3a0;
}
#hbg-notif-dropdown .hbg-notif-actions {
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
#hbg-notif-dropdown .hbg-notif-actions-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
#hbg-notif-dropdown #hbg-notif-status {
  white-space: nowrap;
  color: #aaa6bd;
  font-variant-numeric: tabular-nums;
}
#hbg-notif-dropdown #hbg-notif-read-all,
#hbg-notif-dropdown #hbg-notif-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 2px;
  cursor: pointer;
}
#hbg-notif-dropdown #hbg-notif-clear-all {
  color: #eb93a3;
  font-weight: 650;
}
#hbg-notif-dropdown #hbg-notif-clear-all:not(:disabled):hover {
  color: #ffc7d0;
  text-decoration: underline;
}
#hbg-notif-dropdown #hbg-notif-read-all:not(:disabled):hover {
  text-decoration: underline;
}
#hbg-notif-dropdown #hbg-notif-read-all:disabled,
#hbg-notif-dropdown #hbg-notif-clear-all:disabled {
  opacity: .4;
  cursor: default;
}
#hbg-notif-dropdown .hbg-notif-list {
  max-height: min(410px, 48vh);
  overflow-y: auto;
}
#hbg-notif-dropdown .hbg-notif-item {
  position: relative;
  gap: 9px;
  padding: 14px 12px 14px 15px;
}
#hbg-notif-dropdown .hbg-notif-dismiss {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #908ba2;
  font-size: 15px;
  cursor: pointer;
  transition: .15s ease;
}
#hbg-notif-dropdown .hbg-notif-dismiss:hover,
#hbg-notif-dropdown .hbg-notif-dismiss:focus-visible {
  color: #ffb9c3;
  background: rgba(224,82,104,.11);
  border-color: rgba(224,82,104,.28);
}
#hbg-notif-dropdown .hbg-notif-dismiss:disabled { opacity: .4; cursor: default; }
#hbg-notif-dropdown .hbg-notif-item-content { flex: 1; min-width: 0; }
#hbg-notif-dropdown button:focus-visible { outline: 2px solid #d9b65d; outline-offset: 2px; }
@media (max-width: 600px) {
  #hbg-notif-dropdown.hbg-notif-dropdown {
    width: min(440px,calc(100vw - 20px));
    right: -52px;
  }
  #hbg-notif-dropdown .hbg-notif-actions { gap: 5px; }
  #hbg-notif-dropdown .hbg-notif-actions-right { gap: 8px; }
  #hbg-notif-dropdown .hbg-notif-tabs { padding: 10px; gap: 5px; }
  #hbg-notif-dropdown .hbg-notif-tab { font-size: 10px; }
}
/* FIM — CENTRAL DE NOTIFICAÇÕES V2 */

/* =======================================================
   HBG — AMIZADES V1 | somente Perfil Público e sininho
   Adicione ao final do CSS atual; não afeta o holofote.
   ======================================================= */
#view-perfil-publico #hbg-friend-action[hidden],
#view-perfil-publico #hbg-friends-panel[hidden],
#view-perfil-publico #hbg-friends-requests[hidden] { display:none!important; }
#view-perfil-publico .hbg-friend-btn { border-color:rgba(168,121,220,.45);background:linear-gradient(135deg,#272036,#161923); }
#view-perfil-publico .hbg-friend-btn i { color:#bd8cff; }
#view-perfil-publico .hbg-friend-btn[data-relationship="friends"] { border-color:rgba(94,198,146,.5);color:#c9ffe0; }
#view-perfil-publico .hbg-friend-btn[data-relationship="friends"] i {color:#65d7a0;}
#view-perfil-publico .hbg-friend-btn[data-relationship="incoming"] {border-color:#d9b65d;}
#view-perfil-publico .hbg-friend-btn:disabled {opacity:.55;cursor:wait;transform:none;}
#view-perfil-publico .hbg-friends-panel {margin:20px 0;padding:18px 20px;background:#171923;border:1px solid rgba(168,121,220,.22);border-radius:16px;color:#f1eef8;}
#view-perfil-publico .hbg-friends-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;}
#view-perfil-publico .hbg-friends-heading h2 {margin:0;font-size:17px;display:flex;gap:8px;align-items:center;}
#view-perfil-publico .hbg-friends-heading h2 i {color:#bd8cff;}
#view-perfil-publico .hbg-friends-heading p {margin:5px 0 0;font-size:12px;color:#9996ad;}
#view-perfil-publico .hbg-friends-count {min-width:30px;padding:5px 8px;border:1px solid #423755;border-radius:9px;text-align:center;color:#e0cbff;font-weight:800;font-size:12px;}
#view-perfil-publico .hbg-friends-list {display:flex;flex-wrap:wrap;gap:9px;}
#view-perfil-publico .hbg-friends-empty {margin:4px 0;color:#9996ad;font-size:12px;}
#view-perfil-publico .hbg-friend-person {display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:145px;max-width:100%;padding:6px 9px;border-radius:11px;border:1px solid #303044;background:#20212e;}
#view-perfil-publico .hbg-friend-person-profile {min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;color:#f1eef8;font:inherit;font-size:12px;cursor:pointer;padding:0;text-align:left;}
#view-perfil-publico .hbg-friend-person-profile img {width:32px;height:32px;object-fit:contain;image-rendering:pixelated;flex-shrink:0;}
#view-perfil-publico .hbg-friend-person-profile strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#view-perfil-publico .hbg-friend-person-profile:hover strong {color:#d9b65d;}
#view-perfil-publico .hbg-friends-requests {margin-top:14px;padding-top:13px;border-top:1px solid #303044;}
#view-perfil-publico .hbg-friends-requests h3 {margin:10px 0 9px;font-size:13px;color:#d7c6f5;}
#view-perfil-publico .hbg-friends-requests .hbg-friend-person {margin-bottom:8px;max-width:440px;}
#view-perfil-publico .hbg-friends-inline-actions {display:flex;gap:6px;flex-wrap:wrap;}
#view-perfil-publico .hbg-friend-small-action {border:1px solid #474259;border-radius:7px;padding:6px 8px;background:#2b2840;color:#ddd;font:inherit;font-size:10px;cursor:pointer;}
#view-perfil-publico .hbg-friend-small-action.accept {border-color:#427a5d;color:#9ce6bb;}
#view-perfil-publico .hbg-friend-small-action.danger {border-color:#795060;color:#ffb0ba;}
#view-perfil-publico .hbg-friend-small-action:disabled {opacity:.4;cursor:wait;}
.hbg-notif-item.hbg-notif-friend .hbg-notif-item-icon {color:#bc90ee;}
.hbg-friend-notification-actions {display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 0;}
.hbg-friend-notif-btn {padding:7px 12px;border:1px solid #55506c;border-radius:8px;background:#2a283a;color:#ede9f7;cursor:pointer;font-size:11px;}
.hbg-friend-notif-btn.accept {border-color:#548f6b;color:#a8f0c7;}
.hbg-friend-notif-btn.decline {border-color:#874c5c;color:#ffc0cb;}
.hbg-friend-notif-btn:disabled {opacity:.5;cursor:wait;}
@media (max-width:560px) {#view-perfil-publico .hbg-friends-panel{padding:14px;}#view-perfil-publico .hbg-friend-person{min-width:0;width:100%;}}

/* =============================================================
   HBG — CORREÇÃO DO PERFIL: NICK + PALCO + DESCRIÇÃO (02/11/26)
   Corrige o H1 inserido no display:grid do palco.
   NÃO altera --hbg-avatar-em-pe, --hbg-avatar-sentado, sombra,
   holofote, giro, danças, amizade nem os sistemas do site.
   ============================================================= */

/* O nick é uma etiqueta SOBRE o palco: não cria outra linha no grid.
   Mantém o nome sincronizado pelo JS para TODOS os perfis. */
#view-perfil-publico .hbg-avatar-palco > #hbg-public-username {
  position: absolute !important;
  z-index: 12;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block;
  width: max-content;
  max-width: 230px;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  text-align: center;
  color: var(--gold-light, #ffe3a0);
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  pointer-events: none;
}

/* Dá altura para o nick ficar abaixo da Jukebox flutuante.
   Centraliza o palco inteiro: AVATAR + ILUMINAÇÃO + SOMBRA juntos. */
@media (min-width: 641px) {
  #view-perfil-publico .hbg-public-hero {
    min-height: 470px;
    height: auto;
  }

  /* O título da bio começa na mesma altura do nick sobre a cabeça. */
  #view-perfil-publico .hbg-public-identity-info {
    align-self: flex-start;
    margin-top: -18px;
  }
}

#view-perfil-publico .hbg-public-bio-title {
  margin: 0 0 2px;
  color: var(--gold-light, #ffe3a0);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.2px;
}

/* Celular: nick sobre o personagem e descrição abaixo do palco. */
@media (max-width: 640px) {
  #view-perfil-publico .hbg-public-hero {
    padding-top: 44px;
  }
  #view-perfil-publico .hbg-avatar-palco > #hbg-public-username {
    top: -10px !important;
    max-width: min(230px, calc(100vw - 40px));
    font-size: 20px;
  }
  #view-perfil-publico .hbg-public-identity-info {
    margin-top: 14px;
    align-self: stretch;
    align-items: center;
    width: 100%;
  }
  #view-perfil-publico .hbg-public-bio-title {
    text-align: center;
  }
}
/* FIM — CORREÇÃO NICK/PALCO/DESCRIÇÃO */

/* HBG — PERFIL PÚBLICO COMPACTO | CORREÇÃO 02/11/2026
   Diminui apenas altura do cabeçalho e imagem de fundo.
   Mantém nick alinhado com "Sobre o arquiteto", sem tocar no avatar/sombra. */
@media (min-width: 641px) {
  #view-perfil-publico .hbg-public-hero {
    min-height: 365px !important; /* antes era 470px */
    height: auto !important;
  }
  #view-perfil-publico .hbg-avatar-palco > #hbg-public-username {
    top: 34px !important;
  }
  #view-perfil-publico .hbg-public-identity-info {
    margin-top: 34px !important;
  }
}

/* ======================================================================
   HBG — ACABAMENTO VISUAL 06 | 02/11/2026
   Sem alterar avatar, holofote, posições de sentar, código do áudio ou amizade.
   ====================================================================== */

/* 1. PERFIL: remove o escritório por enquanto e deixa o cabeçalho compacto.
   A imagem continua no código original, mas não aparece até substituirmos o fundo. */
#view-perfil-publico .hbg-public-banner { display: none !important; }
#view-perfil-publico .hbg-public-hero {
  min-height: 0 !important;
  height: auto !important;
  padding: 18px 24px !important;
  background: linear-gradient(135deg, #131827, #10141f) !important;
}
#view-perfil-publico .hbg-public-identity {
  width: 100% !important;
  max-width: 100%;
}
/* Coloca a bio na altura do nome, sem mexer no palco de 246px. */
@media (min-width: 641px) {
  #view-perfil-publico .hbg-public-identity-info {
    align-self: flex-start;
    margin-top: 34px !important;
  }
}
@media (max-width: 640px) {
  #view-perfil-publico .hbg-public-hero {
    padding: 32px 16px 20px !important;
  }
}

/* 2. CARREGANDO EMBLEMAS: ícone Habbo + letras pulando em ondas. */
.hbg-emblemas-loading {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 74px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 17px 12px;
  color: #d9b65d;
  text-align: center;
}
.hbg-emblemas-loading-icon {
  display: block;
  width: 31px;
  height: 31px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 7px rgba(217,182,93,.3));
  animation: hbg-emblemas-icon-pulso 1.5s ease-in-out infinite;
}
.hbg-emblemas-loading-texto { display: inline-flex; flex-wrap: wrap; justify-content: center; }
.hbg-emblemas-loading-letra {
  display: inline-block;
  white-space: pre;
  font-weight: 800;
  font-size: clamp(11px, 1.6vw, 14px);
  line-height: 1.4;
  animation: hbg-emblemas-letra-pula 1.55s ease-in-out infinite;
  animation-delay: var(--hbg-pulo-atraso, 0s);
}
@keyframes hbg-emblemas-letra-pula {
  0%, 35%, 70%, 100% { transform: translateY(0); }
  53% { transform: translateY(-5px); }
}
@keyframes hbg-emblemas-icon-pulso {
  0%, 100% { transform: translateY(0); opacity: .86; }
  50% { transform: translateY(-3px); opacity: 1; }
}

/* 3. RÁDIO: sem caixote, sem borda. Apenas ícone com aura dourada. */
#hbg-jukebox-root {
  left: var(--hbg-radio-x, 20px) !important;
  top: var(--hbg-radio-y, 98px) !important;
}
#hbg-jukebox-root #hbg-jukebox-toggle {
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,212,104,.14) 0%, rgba(217,182,93,.055) 38%, transparent 74%) !important;
  box-shadow: none !important;
  opacity: .6;
  cursor: grab;
  touch-action: none !important;
  animation: hbg-radio-pisca 3.8s ease-in-out infinite;
  transition: opacity .18s ease, filter .18s ease;
}
#hbg-jukebox-root #hbg-jukebox-toggle .hbg-jb-sound-pixel {
  filter: drop-shadow(0 0 7px rgba(255,207,94,.55)) drop-shadow(0 0 13px rgba(255,207,94,.26));
}
#hbg-jukebox-root #hbg-jukebox-toggle.hbg-jb-is-playing::after { display: none !important; }
#hbg-jukebox-root #hbg-jukebox-toggle:hover,
#hbg-jukebox-root #hbg-jukebox-toggle:focus-visible,
#hbg-jukebox-root #hbg-jukebox-toggle[aria-expanded="true"] {
  opacity: 1;
  animation: none;
}
#hbg-jukebox-root.hbg-radio-arrastando #hbg-jukebox-toggle {
  opacity: 1;
  animation: none;
  cursor: grabbing;
}
#hbg-jukebox-root #hbg-jukebox-panel {
  left: var(--hbg-radio-painel-x, calc(100% + 12px)) !important;
  top: var(--hbg-radio-painel-y, 0px) !important;
  right: auto !important;
}
@keyframes hbg-radio-pisca {
  0%, 100% { opacity: .46; }
  50% { opacity: .78; }
}
@media (max-width: 540px) {
  #hbg-jukebox-root {
    left: var(--hbg-radio-x, 14px) !important;
    top: var(--hbg-radio-y, 87px) !important;
  }
  #hbg-jukebox-root #hbg-jukebox-panel {
    left: var(--hbg-radio-painel-x, 0px) !important;
    top: var(--hbg-radio-painel-y, calc(100% + 10px)) !important;
  }
}

/* 4. DESTAQUES RECENTES: ícone removido no HTML, sem mexer em título. */

/* 5. NOTIFICAÇÕES: botão de marcar como lida próximo da borda direita
   DO TEXTO, sem empurrar o botão X e sem mudar a área clicável do aviso. */
#hbg-notif-list .hbg-notif-item-content .hbg-notif-mark-read {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 11px 0 0 auto !important;
  justify-content: center;
}

/* 6. SOLICITAÇÕES: traz Cancelar para perto do nome, sem esticar o cartão. */
#view-perfil-publico #hbg-friends-requests .hbg-friend-person {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-width: min(220px, 100%);
  justify-content: flex-start;
  gap: 15px;
  margin-bottom: 8px; /* mantém a separação vertical */
}
#view-perfil-publico #hbg-friends-requests .hbg-friends-inline-actions {
  flex: 0 0 auto;
  margin-left: 5px;
}

/* Respeita preferências de acessibilidade, inclusive no rádio. */
@media (prefers-reduced-motion: reduce) {
  #hbg-jukebox-root #hbg-jukebox-toggle,
  .hbg-emblemas-loading-letra,
  .hbg-emblemas-loading-icon { animation: none !important; }
}
/* FIM — ACABAMENTO VISUAL 06 */

/* ===============================================================
   HBG | CENTRAL DE CONFIGURAÇÕES — BOTÃO NO PERFIL (ETAPA 1)
   Somente visual/abertura de janela. Não modifica o avatar.
   =============================================================== */
#view-perfil-publico .hbg-public-hero { position: relative; }
#view-perfil-publico .hbg-public-settings-btn {
  position: absolute; top: 16px; right: 17px; z-index: 20;
  width: 39px; height: 39px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(217, 182, 93, .27);
  border-radius: 11px;
  color: var(--gold-light, #ffe3a0);
  background: rgba(20, 21, 31, .72);
  box-shadow: 0 3px 15px rgba(0, 0, 0, .18);
  backdrop-filter: blur(5px);
  font: inherit; font-size: 21px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease,
    color .18s ease, transform .18s ease;
}
#view-perfil-publico .hbg-public-settings-btn[hidden] {display: none !important;}
#view-perfil-publico .hbg-public-settings-btn:hover {
  background: rgba(217, 182, 93, .13);
  border-color: var(--gold, #d9b65d);
  transform: rotate(22deg);
}
#view-perfil-publico .hbg-public-settings-btn:focus-visible,
.hbg-settings-close:focus-visible {outline: 2px solid #ffe3a0; outline-offset: 3px;}
.hbg-settings-dialog {
  padding: 0; width: min(92vw, 560px);
  max-height: min(88vh, 740px);
  overflow: auto;
  border: 1px solid rgba(217, 182, 93, .27);
  border-radius: 18px;
  color: #f1eef8;
  background: #171923;
  box-shadow: 0 24px 85px rgba(0,0,0,.7);
}
.hbg-settings-dialog:not([open]) {display: none !important;}
.hbg-settings-dialog::backdrop {
  background: rgba(4, 6, 12, .77);
  backdrop-filter: blur(4px);
}
.hbg-settings-content { padding: 24px; }
.hbg-settings-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.hbg-settings-eyebrow { display:block; margin-bottom: 9px; color: #d9b65d; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.hbg-settings-header h2 { margin: 0 0 5px; color: #ffe3a0; font-size: clamp(18px, 3.5vw, 23px); line-height: 1.3; }
.hbg-settings-header h2 i { margin-right: 7px; }
.hbg-settings-header p, .hbg-settings-section p {margin: 0; color: #9996ad; font-size: 12px; line-height: 1.5;}
.hbg-settings-close {flex-shrink:0; width:34px; height:34px; display:grid;place-items:center; padding:0; color:#e1ddec;background:#252738;border:1px solid #393a4c;border-radius:9px;cursor:pointer; font-size: 17px;}
.hbg-settings-close:hover { border-color:#d9b65d; color:#ffe3a0; }
.hbg-settings-sections { display:grid; gap: 10px; margin-top: 23px; }
.hbg-settings-section {display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid #323246;border-radius:12px;background:#1d1f2b;}
.hbg-settings-section-icon {flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;background:rgba(168,121,220,.12);color:#c99efb;border-radius:10px;font-size:19px;}
.hbg-settings-section > div {flex: 1;min-width: 0;}
.hbg-settings-section strong {display:block;color:#f1eef8;font-size:13px;margin-bottom:2px;}
.hbg-settings-section small {flex-shrink:0;color:#9996ad;font-size:10px;white-space:nowrap;}
.hbg-settings-footnote {font-size:11px;color:#8f8b9f;margin:18px 0 0;}
@media(max-width: 640px) {
  #view-perfil-publico .hbg-public-settings-btn { top: 12px; right: 12px; width: 35px; height: 35px; }
  .hbg-settings-content { padding: 18px; }
  .hbg-settings-section {gap:9px;padding:11px;}
  .hbg-settings-section small { font-size: 9px; }
}
@media(prefers-reduced-motion:reduce) {
  #view-perfil-publico .hbg-public-settings-btn {transition:none;}
  #view-perfil-publico .hbg-public-settings-btn:hover {transform:none;}
}
/* FIM — CENTRAL DE CONFIGURAÇÕES ETAPA 1 */

/* ============================================================
   HBG | LISTA DE AMIGOS NO MEU PERFIL (02/11/2026)
   Reaproveita o botão existente; não altera palco/holofote.
   ============================================================ */
#view-perfil-publico #hbg-friend-action[data-relationship="self"] {
  color: #ede0ff;
  border-color: rgba(168,121,220,.48);
}
#view-perfil-publico #hbg-friend-action[data-relationship="self"] i {
  color: #c49aff;
}
/* Os três botões do próprio perfil ficam alinhados se houver espaço.
   Em tela estreita, podem quebrar linha sem sair do caixote. */
#view-perfil-publico .hbg-public-actions.hbg-public-actions-own {
  gap: 8px;
}
#view-perfil-publico .hbg-public-actions.hbg-public-actions-own > .hbg-public-btn {
  white-space: nowrap;
  padding-inline: 13px;
}
/* Ao clicar, a lista chega abaixo da barra superior do HBG. */

/* FIM — HBG LISTA DE AMIGOS NO MEU PERFIL */

/* ==========================================================
   HBG — BOTOES COM ICONES PIXEL ART
   - Ver quartos: so o icone, em qualquer perfil publico.
   - Lista de amigos: so o icone, apenas no proprio perfil.
   - Perfil de outra pessoa: mantem os estados de amizade.
   - Nao muda JS, HTML, avatar ou holofote.
   ========================================================== */

/* Os dois atalhos ficam compactos, sem empurrar os demais botoes. */
#view-perfil-publico .hbg-public-actions > a.hbg-public-btn-primary[href="#hbg-public-rooms"],
#view-perfil-publico #hbg-friend-action[data-relationship="self"] {
  position: relative;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 62px;
  min-height: 62px;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important; /* Esconde visualmente 'Ver quartos', mas mantem seu texto no HTML. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Esconde os icones antigos dos dois atalhos. */
#view-perfil-publico .hbg-public-actions > a.hbg-public-btn-primary[href="#hbg-public-rooms"] > i,
#view-perfil-publico #hbg-friend-action[data-relationship="self"] > i,
#view-perfil-publico #hbg-friend-action[data-relationship="self"] > span {
  display: none !important;
}

/* Um unico icone por botao, usando exatamente os arquivos escolhidos. */
#view-perfil-publico .hbg-public-actions > a.hbg-public-btn-primary[href="#hbg-public-rooms"]::before,
#view-perfil-publico #hbg-friend-action[data-relationship="self"]::before {
  content: "";
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Icone de VER QUARTOS. */
#view-perfil-publico .hbg-public-actions > a.hbg-public-btn-primary[href="#hbg-public-rooms"]::before {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrz1aMsYzRQzEXxj3bmivWzKt4z05Z17o9OUpxlRkGZuxkw7VAxwhNOPQmyrDsNoFxnPNTyte8jgSJLGHY5J2GSfsiMBBrVjEQ4TFdS-vjsFDfJtIhyphenhyphenL0oG1U1ujUxAXM4FSUhjQFgXWBE/s0/943__-0xa.png");
}

/* Icone de LISTA DE AMIGOS, apenas no proprio perfil. */
#view-perfil-publico #hbg-friend-action[data-relationship="self"]::before {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ag4liw5HHTd1P4YuLxulHBy7LZwnZIQ_C4zm9wqyFLuzS0LdJBTwa1AqEtNINWTyRckjWPQPSm9hvpXdUdyG4hrGFID94BA66RRtDT5iYgu534_wQpGe1A6N83lTuasR-ijcTnGcHLK2/s1600/Image+1418.png");
}

/* Em resolucoes pequenas, manter o tamanho fixo dos atalhos. */
@media (max-width: 600px) {
  #view-perfil-publico .hbg-public-actions > a.hbg-public-btn-primary[href="#hbg-public-rooms"],
  #view-perfil-publico #hbg-friend-action[data-relationship="self"] {
    width: 58px;
    min-width: 58px;
    flex-basis: 58px;
    height: 56px;
    min-height: 56px;
    padding: 0 !important;
  }
  #view-perfil-publico .hbg-public-actions > a.hbg-public-btn-primary[href="#hbg-public-rooms"]::before,
  #view-perfil-publico #hbg-friend-action[data-relationship="self"]::before {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}
/* FIM — BOTOES COM ICONES PIXEL ART */


/* ===========================================================
   HBG | ÍCONES PIXEL ART DO PERFIL — NOV/2026
   Somente os indicadores solicitados; o restante fica intacto.
   =========================================================== */

/* Quartos publicados no painel de estatísticas. */
#view-perfil .profile-stat-icon > img.hbg-pixel-stat-icon,
#view-estatisticas .profile-stat-icon > img.hbg-pixel-stat-icon {
  display: block;
  width: 27px;
  height: 27px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Quarto mais curtido e Último quarto publicado no Perfil Público. */
#view-perfil-publico .hbg-public-activity-icon > img.hbg-pixel-activity-icon {
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
}
#view-perfil-publico .hbg-public-activity-icon:has(> img.hbg-pixel-activity-icon) {
  display: grid;
  place-items: center;
}

/* Mesmo posicionamento dos ícones substituídos em Estatísticas. */
.hbg-stats-metric > img.hbg-pixel-metric-icon {
  display: block;
  width: 29px;
  height: 29px;
  max-width: none;
  object-fit: contain;
  image-rendering: pixelated;
}
/* FIM — ÍCONES PIXEL ART DO PERFIL */

/* ==========================================================
   HBG — CONFIGURAÇÕES V2 E ÍCONES PIXELADOS — 02/11/2026
   Mantém a estrutura e o avatar intactos.
   ========================================================== */
.hbg-settings-dialog { width:min(92vw,670px); max-height:min(90dvh,820px); }
.hbg-settings-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; padding-bottom:14px; border-bottom:1px solid #363548; }
.hbg-settings-tab { border:1px solid #373649; background:#202131; color:#bdb8cb; font:inherit; font-size:12px; font-weight:750; border-radius:10px; padding:10px 12px; display:inline-flex; align-items:center; gap:7px; cursor:pointer; }
.hbg-settings-tab:hover {color:#fff; border-color:#9878c7;}
.hbg-settings-tab.is-active {color:#ffe3a0; background:rgba(217,182,93,.10); border-color:rgba(217,182,93,.5);}
.hbg-settings-panel[hidden] {display:none!important;}
.hbg-settings-subheading {display:grid; gap:3px; margin:17px 0;}
.hbg-settings-subheading strong {font-size:14px;color:#f3eefe;}
.hbg-settings-subheading span {font-size:12px;color:#a6a0b6;}
.hbg-settings-group {border:1px solid #303142; border-radius:14px; overflow:hidden;}
.hbg-settings-group h3 {margin:0; padding:12px 14px 8px; color:#d9b65d; background:#151621; font-size:11px; letter-spacing:.45px; text-transform:uppercase; border-top:1px solid #303142;}
.hbg-settings-group h3:first-child {border-top:0;}
.hbg-settings-group h3 i {font-size:15px;margin-right:5px;vertical-align:-1px;}
.hbg-settings-option {display:flex; position:relative; align-items:center; gap:12px; background:#1b1d2a; padding:12px 14px; cursor:pointer; border-top:1px solid rgba(110,104,135,.17);}
.hbg-settings-option.is-main {background:rgba(168,121,220,.10);border-top:0;}
.hbg-settings-option:hover {background:#242436;}
.hbg-settings-option > span:first-child {min-width:0;flex:1;display:grid;gap:2px;}
.hbg-settings-option strong {color:#f0edfa; font-size:12px; font-weight:720;}
.hbg-settings-option small {color:#9e99ad; font-size:11px;line-height:1.5;}
.hbg-settings-option input {position:absolute; opacity:0; width:1px; height:1px;}
.hbg-settings-switch {flex:0 0 39px; width:39px; height:22px; border-radius:20px; background:#4b4858; border:1px solid #625d6e; position:relative; transition:background .18s;}
.hbg-settings-switch:after {content:"";position:absolute;width:16px;height:16px;top:2px;left:2px;border-radius:50%;background:#d8d4e0;transition:transform .18s;}
.hbg-settings-option input:checked + .hbg-settings-switch {background:#8160b5;border-color:#ba98f0;}
.hbg-settings-option input:checked + .hbg-settings-switch:after {transform:translateX(17px);background:#fff;}
.hbg-settings-option input:focus-visible + .hbg-settings-switch {outline:2px solid #ffe3a0;outline-offset:3px;}
.hbg-settings-warning {border:1px solid rgba(217,182,93,.24);background:rgba(217,182,93,.06);color:#d6c69a;font-size:11px;line-height:1.6;border-radius:11px;padding:11px 13px;margin:14px 0 0;}
.hbg-settings-warning i {margin-right:5px;}
.hbg-settings-bottom {margin-top:18px;padding-top:14px;border-top:1px solid #353443;}
.hbg-settings-storage {color:#b5afc4;font-size:11px;margin:0 0 14px;line-height:1.55;}
.hbg-settings-storage.is-error {color:#ffa3ad;}
.hbg-settings-buttons {display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;}
.hbg-settings-buttons button {border-radius:10px;font:inherit;font-size:12px;font-weight:750;min-height:40px;padding:9px 13px;cursor:pointer;}
.hbg-settings-reset {color:#b9b4c8;background:#202130;border:1px solid #3b394d;}
.hbg-settings-reset:hover {border-color:#b7a4d1;color:white;}
.hbg-settings-save {background:linear-gradient(135deg,#ffe3a0,#d9b65d);border:1px solid #eed093;color:#282015;}
.hbg-settings-save i {margin-right:4px;}
.hbg-settings-save:disabled {opacity:.6;cursor:wait;}
/* Pixel icon do coração — Curtidas recebidas */
#view-perfil-publico .hbg-pixel-forum-icon {width:23px;height:23px;display:inline-block;object-fit:contain;image-rendering:pixelated;vertical-align:middle;}
#view-perfil-publico .profile-stat-icon .hbg-pixel-stat-icon {width:23px;height:23px;}
#view-perfil-publico .hbg-public-activity-icon .hbg-pixel-activity-icon {width:24px;height:24px;}
#view-perfil-publico .hbg-stats-section-heading .hbg-pixel-forum-icon {width:26px;height:26px;flex-shrink:0;}
#view-perfil-publico .hbg-public-forum-section h3 .hbg-pixel-forum-icon {margin-right:5px;}
@media(max-width:480px) {
 .hbg-settings-tab {flex:1;justify-content:center;padding:9px 5px;font-size:11px;}
 .hbg-settings-option {padding:11px;}
 .hbg-settings-buttons button {flex:1;}
}
@media(prefers-reduced-motion:reduce) {.hbg-settings-switch,.hbg-settings-switch:after{transition:none;}}
/* FIM — CONFIGURAÇÕES V2 */


/* HBG | Privacidade de apresentação de Perfil Público - não substitui as regras de servidor. */
#view-perfil-publico.hbg-privacy-pending .hbg-public-layout,
#view-perfil-publico.hbg-privacy-pending #hbg-friends-panel { visibility:hidden !important; }
#view-perfil-publico.hbg-privacy-hide-stats .hbg-public-summary-panel,
#view-perfil-publico.hbg-privacy-hide-stats .hbg-public-gallery-activity-panel > h2,
#view-perfil-publico.hbg-privacy-hide-stats .hbg-public-gallery-activity-panel > .hbg-public-activity-cards { display:none !important; }
#view-perfil-publico.hbg-privacy-hide-forum .hbg-public-forum-section { display:none !important; }
/* Esta opção controla apenas conquistas; a vitrine de emblemas é sempre pública. */
#view-perfil-publico.hbg-privacy-hide-badges .hbg-public-achievements-panel { display:none !important; }
.hbg-settings-badges-fixed {
  margin: 2px 3px 13px;
  padding: 11px 13px;
  border: 1px solid rgba(217, 182, 93, .16);
  border-radius: 9px;
  color: #cfc7df;
  background: rgba(217, 182, 93, .035);
  font-size: 12px;
  line-height: 1.6;
}
.hbg-settings-badges-fixed i { color: #d9b65d; font-size: 16px; vertical-align: -2px; }
.hbg-settings-badges-fixed strong { color: #f3d28a; }

/* HBG — Privacidade: organização automática do Perfil Público */

/* Mantém as regras de visibilidade */
#view-perfil-publico.hbg-privacy-hide-friends #hbg-friends-panel {
  display: none !important;
}

/* HBG R40.6 — A preferência controla apenas os tópicos recentes.
   Publicações do Arquiteto permanecem sempre públicas. */
#view-perfil-publico.hbg-privacy-hide-activity .hbg-topics-panel {
  display: none !important;
}

#view-perfil-publico.hbg-privacy-hide-stats.hbg-privacy-hide-forum
.hbg-public-gallery-activity-panel {
  display: none !important;
}

/* Quando Estatísticas estiver oculta, o Fórum não mantém
   a margem que o separava da Atividade na Galeria. */
#view-perfil-publico.hbg-privacy-hide-stats:not(.hbg-privacy-hide-forum)
.hbg-public-forum-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Sem Tópicos recentes, o painel restante aproveita
   toda a largura disponível. */
#view-perfil-publico.hbg-privacy-hide-activity
.hbg-public-activity-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* Quando todas as seções de atividade estiverem ocultas,
   remove também o contêiner vazio. */
#view-perfil-publico.hbg-privacy-hide-stats.hbg-privacy-hide-forum.hbg-privacy-hide-activity
.hbg-public-activity-layout {
  display: none !important;
}

/* Desktop: os painéis restantes sobem para ocupar
   o espaço das Estatísticas ocultadas. */
@media (min-width: 901px) {

  #view-perfil-publico.hbg-privacy-hide-stats
  .hbg-public-main > .hbg-public-activity-layout {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Publicações continuam abaixo das seções visíveis */
  #view-perfil-publico.hbg-privacy-hide-stats
  .hbg-public-main > .hbg-publications-panel {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* HBG — Ordenação pixelada da coleção + vitrine, sem alterar a raridade. */
#hbg-public-badge-modal .hbg-badge-card { position:relative; }
#hbg-public-badge-modal .hbg-public-preview-slot.hbg-badge-reorderable,
#view-perfil-publico #hbg-public-badges .hbg-badge-reorderable {
  cursor:grab;touch-action:none;user-select:none;
}
#hbg-public-badge-modal .hbg-public-preview-slot.hbg-badge-reorderable:active,
#view-perfil-publico #hbg-public-badges .hbg-badge-reorderable:active {cursor:grabbing}
#hbg-public-badge-modal .hbg-badge-dragging,
#view-perfil-publico .hbg-badge-dragging {opacity:.55;transform:scale(.95)!important}
#hbg-public-badge-modal .hbg-badge-drop-target,
#view-perfil-publico .hbg-badge-drop-target {
  outline:2px dashed #ffe3a0!important;outline-offset:2px;
  background:rgba(217,182,93,.13)!important;
}


/* HBG — o cartão inteiro é a área invisível para arrastar na coleção. */
#hbg-public-badge-modal #profile-badges-collection .hbg-badge-card.hbg-badge-reorderable {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#hbg-public-badge-modal #profile-badges-collection .hbg-badge-card.hbg-badge-reorderable:active {
  cursor: grabbing;
}
#hbg-public-badge-modal #profile-badges-collection .hbg-badge-card img {
  -webkit-user-drag: none;
  user-select: none;
}
#hbg-public-badge-modal #profile-badges-collection .hbg-badge-card:focus-visible {
  outline: 2px solid #d9b65d;
  outline-offset: 2px;
}


/* ==============================================================
   HBG — ÍCONE PÚBLICO DE LISTA DE AMIGOS
   Visível em perfis de terceiros apenas se a lista for pública.
   Independente do botão de solicitar/aceitar/cancelar amizade.
   ============================================================== */
#view-perfil-publico #hbg-public-friends-view[hidden] {
  display: none !important;
}
#view-perfil-publico #hbg-public-friends-view {
  position: relative;
  width: 64px;
  min-width: 64px;
  flex: 0 0 64px;
  height: 62px;
  min-height: 62px;
  padding: 0 !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-color: rgba(168, 121, 220, .48);
  background: linear-gradient(135deg, #272036, #161923);
  cursor: pointer;
}
#view-perfil-publico #hbg-public-friends-view::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Ag4liw5HHTd1P4YuLxulHBy7LZwnZIQ_C4zm9wqyFLuzS0LdJBTwa1AqEtNINWTyRckjWPQPSm9hvpXdUdyG4hrGFID94BA66RRtDT5iYgu534_wQpGe1A6N83lTuasR-ijcTnGcHLK2/s1600/Image+1418.png") center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
#view-perfil-publico #hbg-public-friends-view .hbg-friends-view-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#view-perfil-publico #hbg-public-friends-view:hover {
  border-color: rgba(217, 182, 93, .75);
  background: linear-gradient(135deg, #302840, #1d1b2a);
}
#view-perfil-publico #hbg-public-friends-view:focus-visible {
  outline: 2px solid #ffe3a0;
  outline-offset: 3px;
}
#view-perfil-publico #hbg-friends-panel { scroll-margin-top: 100px; }
@media (max-width: 600px) {
  #view-perfil-publico #hbg-public-friends-view {
    width: 58px;
    min-width: 58px;
    flex-basis: 58px;
    height: 56px;
    min-height: 56px;
  }
  #view-perfil-publico #hbg-public-friends-view::before {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}
/* FIM — ÍCONE PÚBLICO DE LISTA DE AMIGOS */


/* ============================================================
   HBG — VER MAIS NAS ESTATISTICAS + ATALHOS APROXIMADOS
   - Move o botao JA EXISTENTE para o topo do painel publico.
   - O JavaScript, o ID e a regra "somente meu perfil" nao mudam.
   - Conserva os icones pixelados e o sistema de amizades.
   ============================================================ */

/* Titulo na esquerda, Ver mais no canto direito do mesmo painel. */
#view-perfil-publico .hbg-public-summary-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

#view-perfil-publico .hbg-public-summary-heading > h2 {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

#view-perfil-publico #hbg-public-open-stats[hidden] {
  display: none !important;
}

/* Aparencia de link discreto, sem caixa de botao grande. */
#view-perfil-publico #hbg-public-open-stats.hbg-public-stats-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin: 0 0 0 auto;
  padding: 5px 2px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: var(--gold-light);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease;
}

#view-perfil-publico #hbg-public-open-stats.hbg-public-stats-more i {
  font-size: 15px;
  line-height: 1;
}

#view-perfil-publico #hbg-public-open-stats.hbg-public-stats-more:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#view-perfil-publico #hbg-public-open-stats.hbg-public-stats-more:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sem Estatisticas no cabecalho: os botoes restantes mais juntos. */
#view-perfil-publico .hbg-public-actions,
#view-perfil-publico .hbg-public-actions.hbg-public-actions-own {
  gap: 6px;
  column-gap: 6px;
  row-gap: 8px;
  max-width: 100%;
}

/* No perfil de outra pessoa, reduz apenas o espaco lateral do texto. */
#view-perfil-publico .hbg-public-actions #hbg-friend-action:not([data-relationship="self"]) {
  margin-inline: 0;
  padding-inline: 12px;
}

@media (max-width: 600px) {
  #view-perfil-publico .hbg-public-summary-heading {
    gap: 8px;
  }
  #view-perfil-publico .hbg-public-summary-heading > h2 {
    font-size: 14px;
  }
  #view-perfil-publico #hbg-public-open-stats.hbg-public-stats-more {
    font-size: 11px;
  }
}
/* FIM — HBG VER MAIS NAS ESTATISTICAS */

/* ================================================================
   HBG — ALINHAR NICK E DESCRIÇÃO À ALTURA DA ENGRENAGEM
   - Apenas computadores e tablets com perfil lado a lado.
   - Mantém a posição horizontal dos dois títulos.
   - Não move palco, personagem, holofote, engrenagem ou botões
     individualmente; as informações acompanham a Descrição.
   - O layout mobile em coluna permanece como estava.
   ================================================================ */
@media (min-width: 641px) {
  /* Nick alinhado ao topo do botão de configurações. */
  #view-perfil-publico .hbg-avatar-palco > #hbg-public-username {
    top: -3px !important;
  }

  /* Descrição alinhada com o nick, sem mudar seu X. */
  #view-perfil-publico .hbg-public-identity-info {
    margin-top: -3px !important;
  }
}
/* FIM — ALINHAMENTO DOS TÍTULOS DO PERFIL */

/* ================================================================
   HBG — AJUSTE FINAL CABEÇALHO: SENTAR ABAIXO DE VER QUARTOS
   - Move o MESMO botão (ID preservado), não cria controle novo.
   - Mantém os ícones pixelados e o botão independente de amigos.
   - Reserva o espaço na coluna só quando o próprio dono está logado.
   - Reduz somente a sobra inferior do cabeçalho no desktop.
   ================================================================ */
#view-perfil-publico .hbg-public-actions {
  align-items: flex-start !important;
}
#view-perfil-publico .hbg-public-rooms-stack {
  display: flex;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
/* Replica o ícone clássico do botão original, agora dentro da coluna. */
#view-perfil-publico .hbg-public-actions .hbg-public-rooms-stack > a.hbg-public-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 62px;
  width: 64px;
  min-width: 64px;
  height: 62px;
  min-height: 62px;
  padding: 0 !important;
  gap: 0 !important;
  font-size: 0 !important;
}
#view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary > i,
#view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary::after {
  display: none !important;
}
#view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary::before {
  content: "";
  display: block;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrz1aMsYzRQzEXxj3bmivWzKt4z05Z17o9OUpxlRkGZuxkw7VAxwhNOPQmyrDsNoFxnPNTyte8jgSJLGHY5J2GSfsiMBBrVjEQ4TFdS-vjsFDfJtIhyphenhyphenL0oG1U1ujUxAXM4FSUhjQFgXWBE/s0/943__-0xa.png") center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
/* O JS já alterna .hidden no grupo quando o perfil é de outra pessoa. */
#view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
  z-index: auto;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar {
  display: inline-flex;
  width: 100%;
  min-height: 28px;
  padding: 6px 3px;
  border-radius: 7px;
  color: var(--gold-light, #ffe3a0);
  font-size: 10px;
  font-weight: 700;
  opacity: .84 !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar:hover,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar:focus-visible {
  opacity: 1 !important;
}
@media (min-width: 641px) {
  #view-perfil-publico .hbg-public-hero {
    padding-bottom: 0 !important;
  }
}
@media (max-width: 600px) {
  #view-perfil-publico .hbg-public-rooms-stack {
    flex-basis: 58px;
    width: 58px;
    min-width: 58px;
  }
  #view-perfil-publico .hbg-public-actions .hbg-public-rooms-stack > a.hbg-public-btn-primary {
    flex-basis: 56px;
    width: 58px;
    min-width: 58px;
    height: 56px;
    min-height: 56px;
  }
  #view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary::before {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}
/* FIM — SENTAR ABAIXO DE VER QUARTOS */


/* =======================================================
   HBG • ESTATÍSTICAS & CONQUISTAS • ACABAMENTO V2
   Apenas painéis independentes e o novo atalho público.
   ======================================================= */

/* Cartão de conquistas do Perfil Público: Ver mais no cabeçalho. */
#view-perfil-publico .hbg-public-achievements-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:0 0 12px; margin-bottom:14px;
  border-bottom:1px solid rgba(217,182,93,.16);
}
#view-perfil-publico .hbg-public-achievements-header h2 {
  min-width:0; flex:1; margin:0; padding:0; border:0;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:15px; line-height:1.5;
}
#view-perfil-publico .hbg-public-achievements-header h2 .hbg-achievements-pixel {
  width:24px; height:24px; object-fit:contain; image-rendering:pixelated;
}
#view-perfil-publico .hbg-public-achievements-more,
#view-estatisticas .hbg-achievements-see-all {
  margin-left:auto; flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; gap:5px; min-height:30px;
  padding:5px 9px; border:1px solid rgba(217,182,93,.26);
  border-radius:8px; background:rgba(217,182,93,.07);
  color:#e8c77b; font:700 11px/1.2 Inter,sans-serif; cursor:pointer;
  transition:.18s ease; white-space:nowrap;
}
#view-perfil-publico .hbg-public-achievements-more:hover,
#view-estatisticas .hbg-achievements-see-all:hover {
  color:#ffe3a0; background:rgba(217,182,93,.14); border-color:#d9b65d;
  transform:translateY(-1px);
}
#view-perfil-publico .hbg-public-achievements-more:focus-visible,
#view-estatisticas .hbg-achievements-see-all:focus-visible,
#view-estatisticas .hbg-stats-public-back:focus-visible {
  outline:2px solid #ffe3a0; outline-offset:3px;
}

/* Barra de retorno: deixa de ser um botão branco sem estilização. */
#view-estatisticas .hbg-stats-public-backbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; margin-bottom:20px;
  border:1px solid rgba(217,182,93,.20); border-radius:14px;
  background:linear-gradient(110deg,#1d1d2b,#151724 72%);
}
#view-estatisticas .hbg-stats-public-back {
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  min-height:38px; padding:9px 13px;
  border:1px solid rgba(217,182,93,.32); border-radius:9px;
  background:#292638; color:#f3e9fa; font:700 12px Inter,sans-serif;
  cursor:pointer; transition:.2s ease;
}
#view-estatisticas .hbg-stats-public-back:hover {border-color:#d9b65d;background:#322b40;}
#view-estatisticas .hbg-stats-public-back i {color:#e0bd72;font-size:17px;}
#view-estatisticas .hbg-stats-public-backbar > span {
  display:inline-flex; gap:8px; align-items:center; color:#e9ca82;
  font-size:12px; font-weight:800; letter-spacing:.25px;
}
#view-estatisticas .hbg-stats-public-backbar > span i {font-size:18px;}

/* Os seletores originais só estilizam #view-perfil.
   Aqui o mesmo design vale na nova página independente. */
#view-estatisticas .hbg-stats-standalone {padding:12px 0 28px; max-width:1300px;}
#view-estatisticas #profile-stats-section {display:block;width:100%;}
#view-estatisticas #profile-stats-section.hidden,
#view-estatisticas #hbg-achievements-view.hidden {display:none!important;}
#view-estatisticas .hbg-stats-layout {grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start;}
#view-estatisticas .hbg-stats-main,
#view-estatisticas .hbg-stats-sidebar {gap:16px;}
#view-estatisticas .hbg-stats-panel,
#view-estatisticas .hbg-stats-side-card {padding:22px; background:radial-gradient(circle at 95% 0%,rgba(168,121,220,.07),transparent 55%),linear-gradient(145deg,#191b28,#12141e);}
#view-estatisticas .hbg-stats-overview {border-color:rgba(217,182,93,.31);}
#view-estatisticas .hbg-stats-heading {display:flex; align-items:center; gap:13px;}
#view-estatisticas .hbg-stats-heading > i {
  display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;
  border:1px solid rgba(217,182,93,.20);border-radius:12px;
  background:rgba(217,182,93,.09);color:#e2bd74;font-size:24px;
}
#view-estatisticas .hbg-stats-heading h3,
#view-estatisticas .hbg-stats-section-heading h3 {margin:0;line-height:1.35;}
#view-estatisticas .hbg-stats-heading p,
#view-estatisticas .hbg-stats-section-heading p {margin:5px 0 0;color:#aaa4ba;font-size:12px;line-height:1.5;}
#view-estatisticas .hbg-stats-summary-grid {margin:16px 0 0;padding:0;}
#view-estatisticas .hbg-stats-summary-grid .profile-stat-card {
  display:grid; grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto; column-gap:9px; row-gap:7px;
  align-content:center; align-items:center; min-height:104px;
  padding:14px 12px;
  transition:border-color .18s ease, background .18s ease;
}
#view-estatisticas .hbg-stats-summary-grid .profile-stat-card:hover {background:#1b1d2b;border-color:rgba(217,182,93,.36);}
#view-estatisticas .hbg-stats-summary-grid .profile-stat-icon {
  grid-column:1;grid-row:1;display:grid;place-items:center;
  width:36px;height:36px;border:1px solid #383041;border-radius:9px;
  background:rgba(168,121,220,.07);color:#ddb96e;font-size:21px;
}
#view-estatisticas .hbg-stats-summary-grid .profile-stat-info {display:contents;}
#view-estatisticas .hbg-stats-summary-grid .profile-stat-value {
  grid-column:2;grid-row:1;min-width:0;
  color:#ffe3a0;font-size:clamp(16px,1.8vw,23px);font-weight:800;overflow-wrap:anywhere;
}
#view-estatisticas .hbg-stats-summary-grid .profile-stat-label {
  grid-column:1/-1;grid-row:2;font-size:11px;color:#bbb6cd;font-weight:650;
}
#view-estatisticas #profile-member-since {font-size:clamp(11px,1.2vw,15px);}
#view-estatisticas .hbg-stats-panel .hbg-stats-section-heading > i {
  color:#d9b65d;font-size:23px;
}
#view-estatisticas .hbg-stats-chart-placeholder {
  display:flex; align-items:center; justify-content:center;
  min-height:180px; max-height:280px; padding:20px;
  border:1px solid rgba(168,121,220,.16);border-radius:12px;
  background:#12141d;color:#aaa4bb;
}
#view-estatisticas .hbg-stats-chart-placeholder > * {max-width:100%;}
#view-estatisticas .hbg-stats-side-card {padding:18px;}
#view-estatisticas .hbg-stats-side-card h3 {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid rgba(217,182,93,.12);
  font-size:13px;color:#f4eaf8;font-weight:800;
}
#view-estatisticas .hbg-stats-side-card h3 > i {font-size:20px;color:#d9b65d;}
#view-estatisticas .hbg-stats-side-card h3 .hbg-achievements-pixel {
  display:inline-block; flex:0 0 24px;width:24px;height:24px;
  object-fit:contain;image-rendering:pixelated;
}
#view-estatisticas .hbg-stats-side-content {display:flex;flex-direction:column;gap:11px;min-width:0;}
#view-estatisticas .hbg-stats-empty {
  display:block;margin:0;padding:12px;
  border:1px solid rgba(168,121,220,.14);border-radius:10px;
  background:rgba(168,121,220,.04);color:#bdb6cf;font-size:12px;line-height:1.5;
}
#view-estatisticas .hbg-stats-side-content .hbg-stats-empty strong {color:#ffe3a0;}
#view-estatisticas .hbg-stats-rank-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
#view-estatisticas .hbg-stats-rank {display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:center;min-height:95px;padding:10px 6px;border:1px solid rgba(217,182,93,.20);border-radius:10px;background:#171925;text-align:center;}
#view-estatisticas .hbg-stats-rank strong {color:#ffe3a0;font-size:21px;font-weight:800;}
#view-estatisticas .hbg-stats-rank span {color:#b7b1c3;font-size:11px;}

/* Página completa das conquistas — agora fora de #view-perfil. */
#view-estatisticas #hbg-achievements-view {
  display:block;width:100%;padding:24px;
  border:1px solid rgba(217,182,93,.22);border-radius:17px;
  background:radial-gradient(circle at 95% 0%,rgba(168,121,220,.10),transparent 53%),linear-gradient(145deg,#191b28,#11141e);
  box-shadow:0 15px 40px rgba(0,0,0,.15);
}
#view-estatisticas .hbg-achievements-header {display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:21px;border-bottom:1px solid #333143;}
#view-estatisticas .hbg-achievements-title-group {display:flex;align-items:center;gap:14px;min-width:0;}
#view-estatisticas .hbg-achievements-icon {display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border:1px solid rgba(217,182,93,.23);border-radius:14px;background:rgba(217,182,93,.07);}
#view-estatisticas .hbg-achievements-pixel-large {width:38px;height:38px;object-fit:contain;image-rendering:pixelated;}
#view-estatisticas .hbg-achievements-header h3 {margin:0;color:#ffe3a0;font-size:clamp(20px,3vw,26px);font-weight:800;}
#view-estatisticas .hbg-achievements-header p {margin:5px 0 0;color:#aaa4ba;font-size:12px;line-height:1.55;}
#view-estatisticas #hbg-achievements-back {display:inline-flex;align-items:center;gap:8px;min-height:38px;white-space:nowrap;font-size:12px;}
#view-estatisticas .hbg-achievements-progress {margin-top:20px;padding:18px;border:1px solid rgba(217,182,93,.16);border-radius:12px;background:rgba(217,182,93,.04);}
#view-estatisticas .hbg-achievements-progress-info {display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#bdb6cd;font-size:12px;}
#view-estatisticas .hbg-achievements-progress-info strong {color:#ffe3a0;}
#view-estatisticas .hbg-achievements-progress-track {height:10px;margin-top:12px;overflow:hidden;border-radius:100px;background:#343044;}
#view-estatisticas #hbg-achievements-progress-fill {height:100%;width:0;background:linear-gradient(90deg,#a879dc,#e5b960);border-radius:100px;transition:width .3s ease;}
#view-estatisticas .hbg-achievements-filters {display:flex;flex-wrap:wrap;gap:9px;margin:19px 0;}
#view-estatisticas .hbg-achievements-filters button {padding:9px 15px;border:1px solid #3b374c;border-radius:9px;background:#21202e;color:#bcb5cc;font:700 12px Inter,sans-serif;cursor:pointer;}
#view-estatisticas .hbg-achievements-filters button:hover {border-color:#9772bd;color:#fff;}
#view-estatisticas .hbg-achievements-filters button.active {border-color:#d9b65d;background:rgba(217,182,93,.12);color:#ffe3a0;}
#view-estatisticas .hbg-achievements-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
#view-estatisticas .hbg-achievement-card {display:flex;align-items:flex-start;gap:13px;min-width:0;padding:16px;border:1px solid #363244;border-radius:12px;background:#1b1c29;transition:border-color .18s ease,transform .18s ease;}
#view-estatisticas .hbg-achievement-card:not(.locked) {border-color:rgba(217,182,93,.30);}
#view-estatisticas .hbg-achievement-card:hover {border-color:rgba(217,182,93,.55);transform:translateY(-2px);}
#view-estatisticas .hbg-achievement-card.locked {opacity:.68;background:#151621;}
#view-estatisticas .hbg-achievement-card-icon {display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(217,182,93,.16);border-radius:11px;background:rgba(217,182,93,.08);color:#ffe3a0;font-size:22px;}
#view-estatisticas .hbg-achievement-card.locked .hbg-achievement-card-icon {color:#a7a1b6;background:#282635;}
#view-estatisticas .hbg-achievement-card-info {min-width:0;flex:1;}
#view-estatisticas .hbg-achievement-card-info strong {display:block;color:#f8e1ae;font-size:13px;overflow-wrap:anywhere;}
#view-estatisticas .hbg-achievement-card-info p {margin:5px 0 7px;color:#aaa5b8;font-size:12px;line-height:1.5;}
#view-estatisticas .hbg-achievement-card-status {color:#deb66b;font-size:11px;font-weight:750;}
#view-estatisticas .hbg-achievement-card.locked .hbg-achievement-card-status {color:#b6a6dc;}
@media(max-width:900px) {
  #view-estatisticas .hbg-stats-layout {grid-template-columns:minmax(0,1fr);}
  #view-estatisticas .hbg-stats-sidebar {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  #view-estatisticas .hbg-stats-summary-grid {grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:600px) {
  #view-estatisticas .hbg-stats-standalone {padding:10px 0 25px;}
  #view-estatisticas .hbg-stats-public-backbar {padding:10px;align-items:flex-start;flex-wrap:wrap;}
  #view-estatisticas .hbg-stats-layout {gap:12px;}
  #view-estatisticas .hbg-stats-panel,#view-estatisticas .hbg-stats-side-card {padding:16px;}
  #view-estatisticas .hbg-stats-summary-grid {grid-template-columns:minmax(0,1fr)!important;}
  #view-estatisticas .hbg-stats-sidebar {display:flex;}
  #view-estatisticas #hbg-achievements-view {padding:16px;}
  #view-estatisticas .hbg-achievements-header {flex-wrap:wrap;}
  #view-estatisticas .hbg-achievements-list {grid-template-columns:1fr;}
  #view-perfil-publico .hbg-public-achievements-header {flex-wrap:wrap;}
  #view-perfil-publico .hbg-public-achievements-more {margin-left:0;}
}
@media(prefers-reduced-motion:reduce) {
  #view-estatisticas .hbg-achievement-card:hover {transform:none;}
  #view-perfil-publico .hbg-public-achievements-more:hover {transform:none;}
}
/* FIM — HBG ESTATÍSTICAS & CONQUISTAS V2 */

/* ===== HBG • CARTEIRA V1 • SÓ ACRESCENTAR AO FINAL DO CSS ===== */
.auth-section .hbg-wallet-launch{border:1px solid rgba(217,182,93,.36);border-radius:11px;
  background:linear-gradient(135deg,#211d2b,#161826);color:#ffe3a0;cursor:pointer;
  padding:9px 12px;display:inline-flex;align-items:center;gap:7px;font-weight:800;
  margin-right:10px;font-size:12px;transition:.2s;vertical-align:middle}
.auth-section .hbg-wallet-launch:hover{border-color:#d9b65d;box-shadow:0 0 14px #d9b65d25}
.auth-section .hbg-wallet-launch i{font-size:19px}
.auth-section:has(.hbg-wallet-launch){display:flex;align-items:center;gap:0}
.hbg-wallet-overlay{position:fixed;inset:0;z-index:999900;display:flex;align-items:center;
  justify-content:center;padding:20px;background:#05060bde;backdrop-filter:blur(7px)}
.hbg-wallet-overlay.hidden{display:none!important}
.hbg-wallet-modal{width:min(630px,100%);max-height:min(86vh,850px);overflow:auto;
  background:linear-gradient(150deg,#1d1b2c,#11131e 75%);border:1px solid #534668;
  border-radius:18px;padding:24px;box-shadow:0 24px 80px #0009;color:#f1eef8}
.hbg-wallet-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.hbg-wallet-heading h2{color:#ffe3a0;font-size:24px;margin:6px 0}
.hbg-wallet-heading h2 i{font-size:26px;margin-right:6px}
.hbg-wallet-heading p{margin:0;color:#aaa3bc;font-size:12px}
.hbg-wallet-eyebrow{font-weight:800;letter-spacing:1.6px;color:#b690ee;font-size:9px}
#hbg-wallet-close{border:1px solid #444056;background:#252438;color:#f1eef8;
  width:36px;height:36px;border-radius:9px;font-size:23px;line-height:1;cursor:pointer}
.hbg-wallet-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}
.hbg-wallet-counters>div{border:1px solid #363043;background:#131521;border-radius:12px;padding:17px 12px}
.hbg-wallet-counters small{display:block;color:#aaa3bc;font-size:11px}
.hbg-wallet-counters strong{display:block;font-size:25px;color:#ffe3a0;font-variant-numeric:tabular-nums;line-height:1.6}
.hbg-wallet-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hbg-wallet-toolbar h3{font-size:16px;margin:0;color:#fff}
#hbg-wallet-refresh{background:#28233a;color:#f1eef8;border:1px solid #5e5077;border-radius:9px;padding:7px 12px;font-weight:700;cursor:pointer}
#hbg-wallet-refresh:hover{border-color:#d9b65d}
#hbg-wallet-refresh:disabled{opacity:.5;cursor:wait}
.hbg-wallet-history{margin:12px 0;border:1px solid #343144;border-radius:12px;
  padding:12px;max-height:245px;overflow:auto;color:#bdb4cf;font-size:12px}
.hbg-wallet-entry{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:13px;padding:10px 4px;border-bottom:1px solid #343144}
.hbg-wallet-entry:last-child{border-bottom:0}
.hbg-wallet-entry>span{overflow-wrap:anywhere}
.hbg-wallet-entry>strong{color:#d9b65d;white-space:nowrap}
.hbg-wallet-entry>time{color:#8d88a1;font-size:11px}
.hbg-wallet-status{min-height:20px;color:#7bdfb5;font-size:12px;margin:10px 0}
.hbg-wallet-status.is-error{color:#ff8f9b}
.hbg-wallet-notice{color:#aaa3bc;background:#1c1c2b;border-radius:10px;padding:12px;
  font-size:11px;border:1px solid #343147}
@media(max-width:600px){.auth-section .hbg-wallet-launch{margin-right:6px;padding:7px 9px}
 .auth-section .hbg-wallet-launch span{display:none}
 .hbg-wallet-modal{padding:17px}.hbg-wallet-counters{gap:7px}
 .hbg-wallet-counters>div{padding:10px 7px}
 .hbg-wallet-counters strong{font-size:18px}
 .hbg-wallet-entry{grid-template-columns:minmax(0,1fr) auto}
 .hbg-wallet-entry time{display:none}}
/* ===== FIM DA CARTEIRA ===== */


/* HBG • Conquistas V4: 15.000 objetivos paginados, sem mexer na identidade do site */
#hbg-achievements-view .hbg-v4-controls{margin:18px 0;display:grid;gap:12px}
#hbg-achievements-view .hbg-v4-cat{display:flex;flex-wrap:wrap;gap:7px}
#hbg-achievements-view .hbg-v4-chip{border:1px solid #40374f;border-radius:9px;padding:8px 12px;background:#1b1c29;color:#ddd6e9;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
#hbg-achievements-view .hbg-v4-chip.is-active,#hbg-achievements-view .hbg-v4-chip:hover{color:#ffe3a0;background:rgba(217,182,93,.12);border-color:rgba(217,182,93,.65)}
#hbg-achievements-view .hbg-v4-tools{display:grid;grid-template-columns:minmax(165px,220px) minmax(200px,1fr);gap:10px}
#hbg-achievements-view .hbg-v4-tools select,#hbg-achievements-view .hbg-v4-tools input{background:#171923;border:1px solid #3e3b4e;border-radius:9px;color:#f1eef8;padding:10px 12px;max-width:100%;min-width:0;outline:none}
#hbg-achievements-view .hbg-v4-tools input:focus,#hbg-achievements-view .hbg-v4-tools select:focus{border-color:#d9b65d}
#hbg-achievements-view .hbg-v4-hint,#hbg-achievements-view .hbg-v4-overview{font-size:12px;color:#b8accd;line-height:1.6;margin:3px 0 0}
#hbg-achievements-view .hbg-v4-overview{margin:12px 0 8px;padding:10px 13px;border:1px solid rgba(217,182,93,.16);border-radius:9px;background:rgba(217,182,93,.035)}
#hbg-achievements-view .hbg-v4-card-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 10px}
#hbg-achievements-view .hbg-v4-card-head strong{overflow-wrap:anywhere}
#hbg-achievements-view .hbg-v4-level{display:inline-flex;white-space:nowrap;padding:3px 8px;border:1px solid #4b385a;border-radius:7px;color:#d1b1ff;font-weight:800;font-size:10px;background:#2a1e38}
#hbg-achievements-view .hbg-v4-level.fácil{color:#84d6aa;border-color:#30684d;background:#173328}
#hbg-achievements-view .hbg-v4-level.moderada{color:#8abbfc;border-color:#324969;background:#1a2a40}
#hbg-achievements-view .hbg-v4-level.avançada{color:#d1b1ff;border-color:#594276;background:#2a203f}
#hbg-achievements-view .hbg-v4-level.difícil{color:#ffc087;border-color:#77543a;background:#3c281c}
#hbg-achievements-view .hbg-v4-level.lendária{color:#ffdf81;border-color:#8b6e32;background:#3c3218}
#hbg-achievements-view .hbg-v4-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:center;font-size:11px;margin:8px 0}
#hbg-achievements-view .hbg-v4-state{color:#b9b1cb}
#hbg-achievements-view .hbg-v4-card.unlocked .hbg-v4-state{color:#83deb8}
#hbg-achievements-view .hbg-v4-points{color:#dfbe78;font-weight:700}
#hbg-achievements-view .hbg-v4-progress-track{height:5px;border-radius:4px;overflow:hidden;background:#292b37;margin-top:8px}
#hbg-achievements-view .hbg-v4-progress-track>div{height:100%;background:linear-gradient(90deg,#a879dc,#ffe3a0);border-radius:4px}
#hbg-achievements-view .hbg-v4-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin:22px 0 10px}
#hbg-achievements-view .hbg-v4-pagination button{border:1px solid #514460;border-radius:9px;background:#222030;color:#f1eef8;padding:9px 14px;cursor:pointer}
#hbg-achievements-view .hbg-v4-pagination button:disabled{opacity:.35;cursor:not-allowed}
#hbg-achievements-view #hbg-v4-page-status{font-size:12px;color:#c0b9d0}
#hbg-achievements-view .hbg-v4-card{min-width:0}
@media(max-width:600px){#hbg-achievements-view .hbg-v4-tools{grid-template-columns:1fr}#hbg-achievements-view .hbg-v4-chip{font-size:11px;padding:7px 10px}}


/* ==============================================================
   HBG • MODO DE EDIÇÃO VISUAL V1 | fundos gratuitos e central
   ============================================================= */
.hbg-settings-editor-launch {
  width: calc(100% - 40px); margin: 4px 20px 18px; padding: 13px 15px;
  background: linear-gradient(125deg,rgba(217,182,93,.12),rgba(168,121,220,.09));
  border: 1px solid rgba(217,182,93,.42); border-radius: 12px;
  color: #f9e8bb; display:flex; gap:13px; align-items:center;
  text-align:left; transition:background .2s, border-color .2s;
}
.hbg-settings-editor-launch:hover {background:rgba(217,182,93,.2);border-color:#d9b65d}
.hbg-settings-editor-launch > i:first-child {font-size:25px;color:#e5bf68}
.hbg-settings-editor-launch > i:last-child {font-size:18px;margin-left:auto}
.hbg-settings-editor-launch span {display:flex;flex-direction:column;gap:2px;min-width:0}
.hbg-settings-editor-launch strong {font-size:14px}
.hbg-settings-editor-launch small {font-size:11px;color:#b9abc5;font-weight:400}

/* Cores oficiais da primeira seleção de fundos (sem imagens externas). */
:root {
 --hbg-wall-original: radial-gradient(circle at 10% 20%,rgba(168,121,220,.06),transparent 35%),radial-gradient(circle at 90% 80%,rgba(217,182,93,.04),transparent 35%),#0d0f14;
 --hbg-wall-cosmos: radial-gradient(ellipse at 18% 10%,rgba(174,109,255,.5),transparent 34%),radial-gradient(ellipse at 80% 75%,rgba(52,109,227,.44),transparent 45%),linear-gradient(145deg,#100e24,#1b1235 51%,#080e22);
 --hbg-wall-bosque: radial-gradient(ellipse at 20% 70%,rgba(65,165,111,.4),transparent 38%),radial-gradient(ellipse at 80% 15%,rgba(144,192,87,.2),transparent 30%),linear-gradient(145deg,#081a19,#14332c 53%,#10171c);
 --hbg-wall-crepusculo: radial-gradient(ellipse at 25% 13%,rgba(225,90,139,.44),transparent 42%),radial-gradient(ellipse at 82% 79%,rgba(133,83,220,.5),transparent 37%),linear-gradient(145deg,#2f132c,#281540 62%,#110e25);
 --hbg-wall-oceano: radial-gradient(ellipse at 75% 20%,rgba(57,194,213,.35),transparent 38%),radial-gradient(ellipse at 18% 70%,rgba(36,90,180,.42),transparent 40%),linear-gradient(145deg,#061727,#0a2a44 53%,#071322);
 --hbg-wall-dourado: radial-gradient(ellipse at 80% 14%,rgba(236,188,78,.29),transparent 45%),radial-gradient(ellipse at 20% 82%,rgba(125,82,35,.3),transparent 40%),linear-gradient(145deg,#19140c,#292016 55%,#101014);
}
body[data-hbg-site-theme="cosmos"]{background:var(--hbg-wall-cosmos) fixed!important}
body[data-hbg-site-theme="bosque"]{background:var(--hbg-wall-bosque) fixed!important}
body[data-hbg-site-theme="crepusculo"]{background:var(--hbg-wall-crepusculo) fixed!important}
body[data-hbg-site-theme="oceano"]{background:var(--hbg-wall-oceano) fixed!important}
body[data-hbg-site-theme="dourado"]{background:var(--hbg-wall-dourado) fixed!important}
#view-perfil-publico[data-hbg-profile-theme="cosmos"] .hbg-public-hero{background:var(--hbg-wall-cosmos)!important}
#view-perfil-publico[data-hbg-profile-theme="bosque"] .hbg-public-hero{background:var(--hbg-wall-bosque)!important}
#view-perfil-publico[data-hbg-profile-theme="crepusculo"] .hbg-public-hero{background:var(--hbg-wall-crepusculo)!important}
#view-perfil-publico[data-hbg-profile-theme="oceano"] .hbg-public-hero{background:var(--hbg-wall-oceano)!important}
#view-perfil-publico[data-hbg-profile-theme="dourado"] .hbg-public-hero{background:var(--hbg-wall-dourado)!important}

.hbg-editor-layer[hidden], .hbg-editor-preview[hidden] {display:none!important}
.hbg-editor-layer {position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:86px 16px 18px;overflow-y:auto;background:rgba(5,6,12,.34);pointer-events:none}
.hbg-editor-panel {width:min(660px,100%);max-height:min(780px,calc(100dvh - 100px));overflow-y:auto;
  padding:23px 24px 18px;border:1px solid rgba(217,182,93,.45);border-radius:19px;
  background:linear-gradient(145deg,rgba(26,27,41,.98),rgba(14,16,26,.98));
  box-shadow:0 26px 95px rgba(0,0,0,.64),0 0 34px rgba(172,119,232,.1);color:#f1eef8;
  pointer-events:auto;scrollbar-width:thin;scrollbar-color:#5b506b transparent}
.hbg-editor-header{text-align:center;margin-bottom:18px}
.hbg-editor-kicker{font-size:9px;letter-spacing:2.2px;color:#b995e8;font-weight:800}
.hbg-editor-header h2{font-size:25px;line-height:1.25;color:#ffe1a0;margin:9px 0 7px;font-weight:900;letter-spacing:.6px}
.hbg-editor-header h2 i{color:#d9b65d;margin-right:5px}
.hbg-editor-header p{color:#b9b4ca;font-size:12px;line-height:1.6;max-width:460px;margin:0 auto}
.hbg-editor-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#0c0e17;
  border:1px solid #2d2b3b;border-radius:12px;padding:5px;margin:0 0 15px}
.hbg-editor-switch button{padding:10px;border:0;border-radius:8px;background:transparent;color:#aaa4bf;font-size:12px;font-weight:800}
.hbg-editor-switch button.is-active{background:linear-gradient(115deg,rgba(214,181,93,.17),rgba(163,107,220,.17));color:#ffe1a0;box-shadow:inset 0 0 0 1px #6a5774}
.hbg-editor-preview {height:95px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:1px;overflow:hidden;border:1px solid #484052;border-radius:11px;margin-bottom:16px;text-align:center;
  background:var(--hbg-wall-original)}
.hbg-editor-preview span{font-size:10px;color:#d9b65d;font-weight:800;text-shadow:0 1px 6px #000}
.hbg-editor-preview strong{font-size:20px;color:#fff0ba;text-shadow:0 1px 8px #000}
.hbg-editor-preview small{font-size:9px;color:#e6d7f9;text-shadow:0 1px 6px #000}
.hbg-editor-preview[data-hbg-preview-theme="cosmos"]{background:var(--hbg-wall-cosmos)}
.hbg-editor-preview[data-hbg-preview-theme="bosque"]{background:var(--hbg-wall-bosque)}
.hbg-editor-preview[data-hbg-preview-theme="crepusculo"]{background:var(--hbg-wall-crepusculo)}
.hbg-editor-preview[data-hbg-preview-theme="oceano"]{background:var(--hbg-wall-oceano)}
.hbg-editor-preview[data-hbg-preview-theme="dourado"]{background:var(--hbg-wall-dourado)}
.hbg-editor-section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.hbg-editor-section-title h3{margin:0;color:#f4e6c3;font-size:14px}
.hbg-editor-section-title h3 i{color:#c2a0f1;margin-right:5px}
.hbg-editor-section-title span{color:#b3adc3;font-size:10px}
.hbg-editor-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hbg-editor-option{border:1px solid #393449;border-radius:11px;padding:6px 6px 8px;background:#161721;color:#f0e9f7;
  display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:left;position:relative;min-width:0}
.hbg-editor-option:hover{border-color:#b899e2;background:#202032}
.hbg-editor-option.is-selected{border-color:#f0ca79;box-shadow:0 0 0 1px rgba(240,202,121,.6) inset}
.hbg-editor-option.is-selected::after{content:'✓';position:absolute;top:10px;right:10px;width:19px;height:19px;
  border-radius:50%;background:#e3bb61;color:#1b1721;display:grid;place-items:center;font-size:12px;font-weight:900}
.hbg-editor-option-preview{display:block;height:53px;border-radius:7px;border:1px solid #4c4255;background:var(--hbg-wall-original)}
.hbg-editor-option[data-hbg-theme="cosmos"] .hbg-editor-option-preview{background:var(--hbg-wall-cosmos)}
.hbg-editor-option[data-hbg-theme="bosque"] .hbg-editor-option-preview{background:var(--hbg-wall-bosque)}
.hbg-editor-option[data-hbg-theme="crepusculo"] .hbg-editor-option-preview{background:var(--hbg-wall-crepusculo)}
.hbg-editor-option[data-hbg-theme="oceano"] .hbg-editor-option-preview{background:var(--hbg-wall-oceano)}
.hbg-editor-option[data-hbg-theme="dourado"] .hbg-editor-option-preview{background:var(--hbg-wall-dourado)}
.hbg-editor-option b{font-size:11px;padding-left:3px}
.hbg-editor-option small{font-size:9px;padding-left:3px;color:#8bcba6;font-weight:700}
.hbg-editor-future{margin:14px 0 9px;color:#aba3bd;font-size:10px;line-height:1.6;background:#141522;
  border:1px dashed #3c3748;border-radius:9px;padding:10px 12px}
.hbg-editor-future i{color:#d6b773;margin-right:6px}
.hbg-editor-message{min-height:18px;margin:8px 0;color:#d0b983;font-size:11px}
.hbg-editor-message.is-error{color:#ff949d}
.hbg-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;
  border-top:1px solid #393145}
.hbg-editor-footer-right{display:flex;align-items:center;gap:8px}
.hbg-editor-footer button{border-radius:9px;padding:10px 12px;font-size:11px;font-weight:800;min-height:39px}
.hbg-editor-subtle{color:#d4cadf;background:#202131;border:1px solid #414056}
.hbg-editor-subtle:hover{border-color:#b697cf}
.hbg-editor-save{color:#1e1a16;background:linear-gradient(120deg,#f5d991,#d1a749);border:1px solid #eacb77}
.hbg-editor-save:disabled{opacity:.6;cursor:wait}
.hbg-editor-panel:focus-within{outline:none}
@media(max-width:600px){
 .hbg-editor-layer{align-items:flex-start;padding:70px 12px 12px}
 .hbg-editor-panel{max-height:calc(100dvh - 82px);padding:16px 13px}
 .hbg-editor-header h2{font-size:20px}
 .hbg-editor-options{gap:7px}
 .hbg-editor-option-preview{height:42px}
 .hbg-editor-footer{flex-wrap:wrap}
 .hbg-editor-footer #hbg-editor-reset{margin-right:auto}
 .hbg-editor-footer-right{margin-left:auto}
 .hbg-settings-editor-launch{width:calc(100% - 24px);margin:5px 12px 14px}
}


/* ===========================================================
   HBG — CORRIGIR BOTAO "EDICAO VISUAL" NAS CONFIGURACOES
   Cole este bloco NO FINAL do CSS do CodePen.
   Sem alteracoes em HTML, JS, SQL ou rapid-worker.
   =========================================================== */

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  display: flex !important;
  align-items: center;
  gap: 13px;
  width: calc(100% - 40px);
  min-height: 76px;
  margin: 9px 20px 18px;
  padding: 14px 16px;
  border: 1px solid rgba(217, 182, 93, .38);
  border-radius: 12px;
  color: #f9e8bb;
  background: linear-gradient(115deg, rgba(217,182,93,.12), rgba(168,121,220,.11)), #191a27;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch:hover {
  border-color: #d9b65d;
  background: linear-gradient(115deg, rgba(217,182,93,.20), rgba(168,121,220,.17)), #191a27;
  box-shadow: 0 0 19px rgba(217,182,93,.10);
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch:focus-visible {
  outline: 2px solid #ffe3a0;
  outline-offset: 3px;
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch > i:first-child {
  flex: 0 0 30px;
  width: 30px;
  text-align: center;
  font-size: 26px;
  color: #e5bf68;
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch > span {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch strong {
  display: block;
  color: #ffe3a0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch small {
  display: block;
  color: #bdb6cd;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch > i:last-child {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 19px;
  color: #d6b778;
}

@media (max-width: 540px) {
  #hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch {
    width: calc(100% - 24px);
    margin: 9px 12px 15px;
    padding: 12px;
    min-height: 72px;
    gap: 9px;
  }

  #hbg-public-settings-dialog #hbg-start-edit-mode.hbg-settings-editor-launch > i:first-child {
    flex-basis: 25px;
    width: 25px;
    font-size: 23px;
  }
}


/* ======================================================================
   HBG • EDITOR CONTEXTUAL V2 — SITE REAL EM MODO DE EDICAO
   Complemento para o CSS atual. Não remover o tema/fundos da V1.
   ====================================================================== */
.hbg-editor-layer.hbg-editor-v2[hidden]{display:none!important}
.hbg-editor-layer.hbg-editor-v2{
  position:fixed!important;inset:auto!important;top:80px!important;
  left:50%!important;right:auto!important;bottom:auto!important;
  transform:translateX(-50%)!important;width:min(920px,calc(100% - 22px))!important;
  max-height:calc(100dvh - 90px)!important;overflow:visible!important;
  padding:0!important;margin:0!important;background:transparent!important;
  display:block!important;align-items:unset!important;justify-content:unset!important;
  z-index:49!important;pointer-events:none!important;backdrop-filter:none!important;
}
.hbg-editor-v2 .hbg-editor-v2-panel{
  pointer-events:auto;display:flex;flex-direction:column;color:#f5f0fa;
  background:linear-gradient(160deg,rgba(23,25,37,.98),rgba(15,17,27,.98));
  border:1px solid rgba(217,182,93,.48);border-radius:15px;
  box-shadow:0 15px 47px rgba(0,0,0,.55),0 0 24px rgba(168,121,220,.13);
  padding:10px 13px 8px;gap:8px;max-height:calc(100dvh - 92px);
}
body.hbg-edit-mode-on .main-content{padding-top:280px!important;transition:padding-top .18s}
.hbg-editor-v2-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:36px}
.hbg-editor-v2-context{font-size:11px;font-weight:800;color:#bba8d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbg-editor-v2-title{justify-self:center;display:flex;align-items:center;gap:7px;white-space:nowrap;
  color:#ffe4a9;font-size:17px;font-weight:900;letter-spacing:.35px}
.hbg-editor-v2-title>i{color:#d9b65d;font-size:19px}
.hbg-editor-v2-title>span{color:#a4dfbb;border:1px solid #47725d;border-radius:50px;padding:2px 7px;font-size:9px;letter-spacing:1px}
.hbg-editor-v2-head-actions{justify-self:end;display:flex;align-items:center;gap:7px}
.hbg-editor-v2-head-actions button,.hbg-editor-v2-drawer button,.hbg-editor-v2-tools button{
  font:inherit;cursor:pointer}
#hbg-edit-v2-cancel{width:34px;height:34px;display:grid;place-items:center;color:#d9cde7;
  background:#212334;border:1px solid #3d3c54;border-radius:9px}
#hbg-edit-v2-cancel:hover{border-color:#e98b99}
#hbg-edit-v2-save{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:5px;
  border:1px solid #eed48e;border-radius:9px;padding:6px 13px;
  background:linear-gradient(125deg,#f8de9e,#d5ad50);color:#221c16;font-size:12px;font-weight:900}
#hbg-edit-v2-save:disabled{opacity:.6;cursor:wait}
.hbg-editor-v2-tools{display:flex;justify-content:center;align-items:stretch;gap:7px;min-width:0;overflow-x:auto;
  padding:4px 0 7px;scrollbar-width:thin;scrollbar-color:#51415c transparent}
.hbg-editor-v2-tool{min-width:93px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:#1b1d2a;border:1px solid #333449;border-radius:11px;color:#c2bdce;
  padding:8px 10px;font-size:11px;font-weight:750;line-height:1.2}
.hbg-editor-v2-tool i{font-size:20px;color:#bd91df}
.hbg-editor-v2-tool.is-active{border-color:#dfbd79;background:linear-gradient(145deg,#352b32,#25223a);color:#ffedc0}
.hbg-editor-v2-tool.is-active i{color:#e6bc65}
.hbg-editor-v2-drawer{border-top:1px solid #343244;padding-top:8px;min-width:0}
.hbg-editor-v2-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;
  color:#c3b7d3;font-size:10px}
#hbg-edit-v2-reset{display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  color:#e8cc8f;font-size:10px;font-weight:750;white-space:nowrap}
.hbg-editor-v2-choices{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:2px 1px 7px;
  scrollbar-width:thin;scrollbar-color:#54465e transparent}
.hbg-editor-v2-choice{min-width:105px;flex:1 0 105px;max-width:180px;display:flex;align-items:center;gap:7px;
  padding:6px 8px;border-radius:10px;border:1px solid #3c3649;
  background:#191a27;color:#e9e1ef;text-align:left;font-size:11px;font-weight:750}
.hbg-editor-v2-choice:hover:not(:disabled){background:#252338;border-color:#a887d4}
.hbg-editor-v2-choice.is-selected{border-color:#e1c07b;box-shadow:0 0 0 1px #e0bd7b inset}
.hbg-editor-v2-choice:disabled{opacity:.45;cursor:not-allowed}
.hbg-editor-v2-swatch{flex:0 0 31px;width:31px;height:29px;border-radius:6px;display:block;
  background:linear-gradient(140deg,#191a24,#292231);border:1px solid rgba(255,255,255,.16)}
.hbg-editor-v2-swatch[data-hbg-tool="background"][data-hbg-value="cosmos"]{background:var(--hbg-wall-cosmos)}
.hbg-editor-v2-swatch[data-hbg-tool="background"][data-hbg-value="bosque"]{background:var(--hbg-wall-bosque)}
.hbg-editor-v2-swatch[data-hbg-tool="background"][data-hbg-value="crepusculo"]{background:var(--hbg-wall-crepusculo)}
.hbg-editor-v2-swatch[data-hbg-tool="background"][data-hbg-value="oceano"]{background:var(--hbg-wall-oceano)}
.hbg-editor-v2-swatch[data-hbg-tool="background"][data-hbg-value="dourado"]{background:var(--hbg-wall-dourado)}
.hbg-editor-v2-swatch[data-hbg-tool="panel"][data-hbg-value="graphite"]{background:linear-gradient(140deg,#262832,#191b24)}
.hbg-editor-v2-swatch[data-hbg-tool="panel"][data-hbg-value="violet"]{background:linear-gradient(140deg,#413151,#241c35)}
.hbg-editor-v2-swatch[data-hbg-tool="panel"][data-hbg-value="gilded"]{background:linear-gradient(140deg,#55422a,#292016)}
.hbg-editor-v2-swatch[data-hbg-tool="panel"][data-hbg-value="ocean"]{background:linear-gradient(140deg,#18405c,#111e31)}
.hbg-editor-v2-swatch[data-hbg-tool="buttons"][data-hbg-value="square"]{border-radius:1px}
.hbg-editor-v2-swatch[data-hbg-tool="buttons"][data-hbg-value="rounded"]{border-radius:15px}
.hbg-editor-v2-swatch[data-hbg-tool="buttons"][data-hbg-value="glass"]{background:rgba(197,168,246,.14);backdrop-filter:blur(3px)}
.hbg-editor-v2-swatch[data-hbg-tool="buttons"][data-hbg-value="pixel"]{border:3px solid #dab667;border-radius:0}
.hbg-editor-v2-swatch[data-hbg-tool="border"][data-hbg-value="gold"]{border:2px solid #d9b65d}
.hbg-editor-v2-swatch[data-hbg-tool="border"][data-hbg-value="purple"]{border:2px solid #b88df7}
.hbg-editor-v2-swatch[data-hbg-tool="border"][data-hbg-value="subtle"]{border:1px solid #373643}
.hbg-editor-v2-swatch[data-hbg-tool="border"][data-hbg-value="none"]{border:0}
.hbg-editor-v2-swatch[data-hbg-tool="accent"][data-hbg-value="gold"]{background:#d9b65d}
.hbg-editor-v2-swatch[data-hbg-tool="accent"][data-hbg-value="purple"]{background:#a879dc}
.hbg-editor-v2-swatch[data-hbg-tool="accent"][data-hbg-value="blue"]{background:#78a9ff}
.hbg-editor-v2-swatch[data-hbg-tool="accent"][data-hbg-value="emerald"]{background:#55d59a}
.hbg-editor-v2-swatch[data-hbg-tool="accent"][data-hbg-value="rose"]{background:#f27f9d}
.hbg-editor-v2-status{color:#cbbb91;font-size:10px;line-height:1.35;min-height:15px;padding-top:3px;
  border-top:1px solid rgba(255,255,255,.05)}
.hbg-editor-v2-status.is-error{color:#ff969d}
#hbg-editor-v2-toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,18px);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:400;
  padding:12px 20px;background:#1f2830;color:#d6f2e1;border:1px solid #509d71;border-radius:11px;
  box-shadow:0 10px 34px #0009;font-size:12px;font-weight:750}
#hbg-editor-v2-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ÁREA PESSOAL: os estilos abaixo afetam o site que o jogador vê. */
body[data-hbg-site-panel="graphite"]{--hbg-site-box-bg:linear-gradient(150deg,#232630,#171920)}
body[data-hbg-site-panel="violet"]{--hbg-site-box-bg:linear-gradient(150deg,#32263d,#1b182b)}
body[data-hbg-site-panel="gilded"]{--hbg-site-box-bg:linear-gradient(150deg,#30281a,#19191f)}
body[data-hbg-site-panel="ocean"]{--hbg-site-box-bg:linear-gradient(150deg,#162e40,#121c2b)}
body[data-hbg-site-panel] :is(.builders-hall,.hbg-hero,.room-card,.hbg-forum-sidebar-card,.form-card,.hbg-forum-header){
  background:var(--hbg-site-box-bg)!important}
body[data-hbg-site-buttons="square"] :is(.btn,.nav-link,.hbg-forum-category){border-radius:2px!important}
body[data-hbg-site-buttons="rounded"] :is(.btn,.nav-link,.hbg-forum-category){border-radius:24px!important}
body[data-hbg-site-buttons="glass"] :is(.btn,.nav-link,.hbg-forum-category){background:rgba(162,136,190,.11)!important;backdrop-filter:blur(7px)}
body[data-hbg-site-buttons="pixel"] :is(.btn,.nav-link,.hbg-forum-category){border-radius:0!important;box-shadow:3px 3px 0 #11121b!important;border:1px solid #bda06c!important}
body[data-hbg-site-border="gold"] :is(.builders-hall,.hbg-hero,.room-card,.hbg-forum-sidebar-card,.form-card){border:1px solid #d6b162!important}
body[data-hbg-site-border="purple"] :is(.builders-hall,.hbg-hero,.room-card,.hbg-forum-sidebar-card,.form-card){border:1px solid #a879dc!important}
body[data-hbg-site-border="subtle"] :is(.builders-hall,.hbg-hero,.room-card,.hbg-forum-sidebar-card,.form-card){border:1px solid #272635!important}
body[data-hbg-site-border="none"] :is(.builders-hall,.hbg-hero,.room-card,.hbg-forum-sidebar-card,.form-card){border-color:transparent!important}
body[data-hbg-site-accent="gold"]{--hbg-edit-color:#d9b65d}
body[data-hbg-site-accent="purple"]{--hbg-edit-color:#a879dc}
body[data-hbg-site-accent="blue"]{--hbg-edit-color:#78a9ff}
body[data-hbg-site-accent="emerald"]{--hbg-edit-color:#55d59a}
body[data-hbg-site-accent="rose"]{--hbg-edit-color:#f27f9d}
body[data-hbg-site-accent] :is(.nav-link.active,.section-header h2,.hbg-hero h1 span,.room-footer .icon-btn:hover){color:var(--hbg-edit-color)!important}
body[data-hbg-site-accent] .nav-link.active{box-shadow:inset 0 -2px var(--hbg-edit-color)!important}

/* PERFIL PÚBLICO: estas escolhas são vistas por outros visitantes. */
#view-perfil-publico[data-hbg-profile-panel="graphite"]{--hbg-profile-box-bg:linear-gradient(145deg,#262832,#191b24)}
#view-perfil-publico[data-hbg-profile-panel="violet"]{--hbg-profile-box-bg:linear-gradient(145deg,#342b42,#1c1728)}
#view-perfil-publico[data-hbg-profile-panel="gilded"]{--hbg-profile-box-bg:linear-gradient(145deg,#332a1e,#1a1920)}
#view-perfil-publico[data-hbg-profile-panel="ocean"]{--hbg-profile-box-bg:linear-gradient(145deg,#1b3547,#111b2a)}
#view-perfil-publico[data-hbg-profile-panel] :is(.hbg-public-panel,.hbg-public-activity-card,.hbg-stats-panel,.hbg-friends-panel){background:var(--hbg-profile-box-bg)!important}
#view-perfil-publico[data-hbg-profile-buttons="square"] :is(.hbg-public-btn,.hbg-public-settings-btn){border-radius:2px!important}
#view-perfil-publico[data-hbg-profile-buttons="rounded"] :is(.hbg-public-btn,.hbg-public-settings-btn){border-radius:30px!important}
#view-perfil-publico[data-hbg-profile-buttons="glass"] :is(.hbg-public-btn,.hbg-public-settings-btn){background:rgba(168,121,220,.14)!important;backdrop-filter:blur(7px)}
#view-perfil-publico[data-hbg-profile-buttons="pixel"] :is(.hbg-public-btn,.hbg-public-settings-btn){border-radius:0!important;border:1px solid #dab76c!important;box-shadow:3px 3px 0 #0c0d15!important}
#view-perfil-publico[data-hbg-profile-border="gold"] :is(.hbg-public-hero,.hbg-public-panel,.hbg-public-activity-card,.hbg-stats-panel){border:1px solid #d9b65d!important}
#view-perfil-publico[data-hbg-profile-border="purple"] :is(.hbg-public-hero,.hbg-public-panel,.hbg-public-activity-card,.hbg-stats-panel){border:1px solid #a879dc!important}
#view-perfil-publico[data-hbg-profile-border="subtle"] :is(.hbg-public-hero,.hbg-public-panel,.hbg-public-activity-card,.hbg-stats-panel){border:1px solid #262535!important}
#view-perfil-publico[data-hbg-profile-border="none"] :is(.hbg-public-hero,.hbg-public-panel,.hbg-public-activity-card,.hbg-stats-panel){border-color:transparent!important}
#view-perfil-publico[data-hbg-profile-accent="gold"]{--hbg-profile-accent:#d9b65d}
#view-perfil-publico[data-hbg-profile-accent="purple"]{--hbg-profile-accent:#a879dc}
#view-perfil-publico[data-hbg-profile-accent="blue"]{--hbg-profile-accent:#78a9ff}
#view-perfil-publico[data-hbg-profile-accent="emerald"]{--hbg-profile-accent:#55d59a}
#view-perfil-publico[data-hbg-profile-accent="rose"]{--hbg-profile-accent:#f27f9d}
#view-perfil-publico[data-hbg-profile-accent] :is(.hbg-public-bio-title,.hbg-public-panel h2,.hbg-public-meta-item i){color:var(--hbg-profile-accent)!important}
#view-perfil-publico[data-hbg-profile-accent] .hbg-public-btn{border-color:var(--hbg-profile-accent)!important}

@media(max-width:680px){
 .hbg-editor-layer.hbg-editor-v2{top:69px!important;max-height:calc(100dvh - 72px)!important}
 .hbg-editor-v2 .hbg-editor-v2-panel{padding:8px;gap:5px;max-height:calc(100dvh - 73px)}
 .hbg-editor-v2-head{grid-template-columns:1fr auto;gap:5px}
 .hbg-editor-v2-context{grid-column:1;grid-row:2;text-align:left;font-size:10px}
 .hbg-editor-v2-title{grid-column:1/-1;grid-row:1;justify-self:center;font-size:13px}
 .hbg-editor-v2-title>span{font-size:8px}
 .hbg-editor-v2-head-actions{grid-column:2;grid-row:2}
 .hbg-editor-v2-tool{min-width:67px;padding:7px 6px;font-size:10px}
 .hbg-editor-v2-tool i{font-size:17px}
 .hbg-editor-v2-drawer-top{font-size:9px}
 .hbg-editor-v2-choice{min-width:92px;flex:1 0 92px;padding:5px 6px;font-size:10px}
 .hbg-editor-v2-swatch{width:24px;height:24px;flex-basis:24px}
 body.hbg-edit-mode-on .main-content{padding-top:315px!important}
}
@media(prefers-reduced-motion:reduce){body.hbg-edit-mode-on .main-content{transition:none}}


/* HBG • PINCEL DE TEXTO V3 — Paleta Paint + degradê em dois tons */
.hbg-edit-mode-on #view-perfil-publico :is(#hbg-public-username,.hbg-public-bio-title,#hbg-public-mission,#hbg-public-habbo-info,.hbg-public-summary-heading h2,#hbg-friends-panel h2,.hbg-public-gallery-activity-panel>h2,.hbg-public-forum-section>h3,.hbg-public-achievements-header h2),
.hbg-edit-mode-on #view-inicio :is(.hbg-hero h1,.hbg-hero-content>p,.builders-hall .section-header h2,.section-header>h2),
.hbg-edit-mode-on #view-galeria .gallery-header h2,
.hbg-edit-mode-on #view-forum .hbg-forum-header-content>p,
.hbg-edit-mode-on .logo>span {cursor:crosshair!important;}
.hbg-text-paint-picked {outline:2px dashed #e9c978!important;outline-offset:5px;border-radius:2px}
.hbg-painted-text {text-decoration:none;}
/* a barra permanece centralizada e o HBG é a prévia real */
.hbg-editor-v2 .hbg-editor-v2-choices:has(.hbg-paint-v3-top) {
 display:flex;flex-direction:column;flex-wrap:nowrap;overflow:visible;align-items:stretch;gap:6px;
 max-height:min(36vh,250px);overflow-y:auto;padding:3px 3px 7px;
}
.hbg-editor-v2 .hbg-editor-v2-panel:has(.hbg-paint-v3-top){max-height:calc(100dvh - 98px);overflow-y:auto;}
.hbg-paint-v3-top{color:#e9d0a0;font-size:11px;font-weight:700;}
.hbg-paint-v3-targets{display:flex;flex-wrap:wrap;gap:5px;}
.hbg-editor-v2 .hbg-paint-v3-target{min-height:27px;padding:4px 9px;border:1px solid #413a53;
 border-radius:7px;background:#222336;color:#d1c9df;font-size:10px;font-weight:700;}
.hbg-editor-v2 .hbg-paint-v3-target.is-active{background:#3d2d4b;color:#ffdc91;border-color:#ddba74;}
.hbg-paint-v3-editor{display:flex;flex-direction:column;gap:7px;padding:8px;border:1px solid #43354c;
 background:#171826;border-radius:10px;color:#f8e9c3;}
.hbg-paint-v3-editor>strong{font-size:12px;}
.hbg-paint-v3-mode{display:flex;gap:6px;}
.hbg-editor-v2 .hbg-paint-v3-mode button{font-size:11px;padding:5px 9px;border:1px solid #4c425d;
 border-radius:7px;background:#252439;color:#d7d1e4;}
.hbg-editor-v2 .hbg-paint-v3-mode button.is-active{background:#4b364d;color:#fff0c5;border-color:#ecc782;}
.hbg-paint-v3-controls{display:flex;flex-wrap:wrap;align-items:end;gap:9px;}
.hbg-paint-v3-color{display:flex;align-items:center;gap:6px;font-weight:700;font-size:11px;}
.hbg-paint-v3-color input[type=color]{width:39px;height:34px;border:1px solid #716284;
 border-radius:8px;padding:2px;background:#1b1a27;cursor:pointer;}
.hbg-paint-v3-color input[type=text]{width:84px;padding:6px 7px;border:1px solid #4d445e;
 border-radius:7px;background:#10111b;color:#f2edfa;font:700 11px monospace;}
.hbg-paint-v3-direction{display:flex;flex-direction:column;gap:1px;font-size:10px;font-weight:700;}
.hbg-paint-v3-direction select{padding:7px 7px;border:1px solid #564b68;border-radius:7px;
 background:#191a28;color:#f4eaf8;font:inherit;}
.hbg-paint-v3-palette{display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.hbg-paint-v3-palette>span{font-size:10px;color:#c0b4d3;margin-right:4px;}
.hbg-editor-v2 .hbg-paint-v3-swatch{width:22px;height:22px;border:1px solid #f0edf65a;
 border-radius:5px;padding:0;box-shadow:inset 0 0 0 1px #0003;}
.hbg-editor-v2 .hbg-paint-v3-erase{align-self:flex-start;background:none;border:0;color:#d9b65d;
 padding:3px 0;font-size:10px;font-weight:700;}
.hbg-paint-v3-erase:hover{text-decoration:underline;}
@media(max-width:650px){
 .hbg-paint-v3-controls{gap:6px;}
 .hbg-paint-v3-color{flex-wrap:wrap;}
 .hbg-editor-v2 .hbg-editor-v2-choices:has(.hbg-paint-v3-top){max-height:35vh;}
 .hbg-paint-v3-direction{width:100%;}
}


/* =====================================================================
   HBG • MODO DE EDIÇÃO MINIMALISTA V4
   Apenas Fundos • Bordas • Cores, sem caixas envolvendo as ferramentas.
   A própria página continua sendo a visualização das mudanças.
   COLE AO FINAL do CSS ATUAL. Não remova os estilos anteriores.
   ===================================================================== */

/* Nada de caixote escuro, moldura ou sombra atrás do editor. */
.hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4 {
  top: 82px !important;
  width: min(860px, calc(100% - 24px)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-panel {
  padding: 3px 7px 5px !important;
  gap: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}
/* O título permanece centralizado, independente dos botões à direita. */
.hbg-editor-minimal-v4 .hbg-editor-v2-head {
  min-height: 37px !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 6px !important;
  background: transparent !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-context {
  font-size: 10px !important;
  color: rgba(221,214,232,.65) !important;
  text-shadow: 0 1px 8px #000 !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  color: #ffe5aa !important;
  font-size: 15px !important;
  text-shadow: 0 2px 10px #000,0 0 14px #000b !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-title > span {
  border: 0 !important;
  background: none !important;
  color: #b8e9ca !important;
  font-size: 9px !important;
  padding: 0 2px !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-head-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  gap: 6px !important;
}
.hbg-editor-minimal-v4 #hbg-edit-v2-cancel {
  width: 31px !important;
  height: 31px !important;
  color: #e7deee !important;
  background: rgba(13,14,23,.30) !important;
  border: 1px solid rgba(224,206,245,.20) !important;
  box-shadow: none !important;
}
.hbg-editor-minimal-v4 #hbg-edit-v2-save {
  min-height: 31px !important;
  padding: 5px 10px !important;
  color: #f9e0ac !important;
  background: rgba(16,17,25,.42) !important;
  border: 1px solid rgba(217,182,93,.48) !important;
  box-shadow: none !important;
}
.hbg-editor-minimal-v4 #hbg-edit-v2-save:hover,
.hbg-editor-minimal-v4 #hbg-edit-v2-cancel:hover {
  background: rgba(45,35,54,.80) !important;
}
/* SÓ TRÊS FERRAMENTAS, SEM CAIXOTES. */
.hbg-editor-minimal-v4 .hbg-editor-v2-tools {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(8px,2vw,24px) !important;
  min-height: 44px !important;
  padding: 0 4px 3px !important;
  overflow: visible !important;
  background: transparent !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-tool {
  min-width: 63px !important;
  min-height: 43px !important;
  flex: 0 0 auto !important;
  padding: 3px 8px 5px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  color: #e1d9eb !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 8px #000,0 0 8px #000a !important;
  transition: color .2s,transform .2s,opacity .2s !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-tool > i {
  color: #d3b5ec !important;
  font-size: 21px !important;
  filter: drop-shadow(0 1px 3px #000c) !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-tool:hover {
  transform: translateY(-2px) !important;
  color: #fff2ca !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-tool.is-active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffe6ab !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-tool.is-active > i {
  color: #f0c973 !important;
}
/* A bandeja das opções fica solta, sem retângulo envolvendo tudo. */
.hbg-editor-minimal-v4 .hbg-editor-v2-drawer {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 3px !important;
  min-height: 0 !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-drawer-top {
  margin: 0 0 3px !important;
  padding: 0 2px !important;
  color: #dfd4e8 !important;
  font-size: 10px !important;
  text-shadow: 0 1px 8px #000 !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-choices {
  justify-content: center !important;
  gap: 5px !important;
  padding: 2px 1px 3px !important;
  background: transparent !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-choice {
  min-width: 92px !important;
  max-width: 142px !important;
  flex: 0 0 auto !important;
  min-height: 31px !important;
  padding: 3px 6px !important;
  gap: 5px !important;
  font-size: 10px !important;
  color: #eae2f0 !important;
  background: rgba(17,17,27,.23) !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  text-shadow: 0 1px 6px #000 !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-choice:hover:not(:disabled) {
  background: rgba(41,31,50,.65) !important;
  border-color: rgba(192,151,224,.4) !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-choice.is-selected {
  background: rgba(53,41,56,.55) !important;
  border-color: rgba(233,202,127,.58) !important;
  box-shadow: none !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-swatch {
  width: 23px !important;
  height: 23px !important;
  flex-basis: 23px !important;
  border-radius: 5px !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-status {
  font-size: 10px !important;
  color: rgba(213,204,228,.75) !important;
  padding: 0 3px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-shadow: 0 1px 6px #000 !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-status.is-error {
  color: #ff9da7 !important;
}
/* A página precisa começar logo abaixo da barra pequena, não 280px abaixo! */
body.hbg-edit-mode-on .main-content {
  padding-top: 184px !important;
}
/* Ao usar a ferramenta Cores, reservamos espaço para o editor de degradê. */
body.hbg-edit-mode-on:has(#hbg-editor-layer:not([hidden]) .hbg-paint-v3-top) .main-content {
  padding-top: 306px !important;
}
/* Painel da paleta: só aqui um fundo sutil ajuda a ler os controles. */
.hbg-editor-minimal-v4 .hbg-paint-v3-editor {
  background: rgba(19,20,31,.78) !important;
  border: 1px solid rgba(182,156,211,.30) !important;
  box-shadow: none !important;
  backdrop-filter: blur(3px) !important;
}
@media(max-width:680px){
  .hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4 {
    top: 70px !important;
    width: calc(100% - 14px) !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-panel {
    padding: 3px 4px !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-head {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 13px !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-context {
    grid-column: 1 !important;
    grid-row: 2 !important;
    font-size: 9px !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-head-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-tools {gap: 6px !important;}
  .hbg-editor-minimal-v4 .hbg-editor-v2-tool {
    min-width: 65px !important;
    padding: 4px 7px !important;
    font-size: 10px !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-choice {
    min-width: 84px !important;
    max-width: 110px !important;
    padding: 4px 5px !important;
  }
  .hbg-editor-minimal-v4 .hbg-editor-v2-drawer-top {font-size: 9px !important;}
  .hbg-editor-minimal-v4 .hbg-editor-v2-status {font-size: 9px !important;}
  body.hbg-edit-mode-on .main-content {padding-top: 210px !important;}
  body.hbg-edit-mode-on:has(#hbg-editor-layer:not([hidden]) .hbg-paint-v3-top) .main-content {
    padding-top: 386px !important;
  }
}
@media(prefers-reduced-motion:reduce){
 .hbg-editor-minimal-v4 .hbg-editor-v2-tool {transition:none !important}
}


/* =====================================================================
   HBG • EDITOR V5 — SOMENTE O PERFIL PÚBLICO
   Fundo, borda e COR DO NICK (sólida ou degradê).
   O resto do HBG NÃO pode ser personalizado.
   ACRESCENTE no final do CSS V4, sem apagar nada.
   ===================================================================== */

/* Só o nick mostra o cursor de pintura no Modo de Edição. */
body.hbg-edit-mode-on #view-inicio :is(.hbg-hero h1,.hbg-hero-content>p,.builders-hall .section-header h2,.section-header>h2),
body.hbg-edit-mode-on #view-galeria .gallery-header h2,
body.hbg-edit-mode-on #view-forum .hbg-forum-header-content>p,
body.hbg-edit-mode-on .logo>span,
body.hbg-edit-mode-on #view-perfil-publico :is(.hbg-public-bio-title,#hbg-public-mission,#hbg-public-habbo-info,.hbg-public-summary-heading h2,#hbg-friends-panel h2,.hbg-public-gallery-activity-panel>h2,.hbg-public-forum-section>h3,.hbg-public-achievements-header h2) {
  cursor: inherit !important;
}
body.hbg-edit-mode-on #view-perfil-publico #hbg-public-username {
  cursor: crosshair !important;
}
/* Barra só fica visível no Perfil Público durante a edição. */
body.hbg-edit-mode-on:has(#view-perfil-publico.hidden) #hbg-editor-layer {
  display: none !important;
}
/* Fundo e botões das outras páginas ficam intactos. */

/* =======================================================================
   HBG • EDITOR V7 — BARRA FLUTUANTE, PERFIL SEM DESLOCAMENTO
   Adicionar AO FINAL do CSS atual (V5/V6).
   Ao abrir, o editor se sobrepõe ao próprio perfil sem mudar sua posição.
   ======================================================================= */

/* Desfaz os padding-top de 184, 210, 306 e 386 px usados nas versões anteriores.
   A ferramenta Cores NÃO empurra o perfil ao expandir a paleta. */

/* Barra flutuante: o próprio site continua por baixo, sem caixote. */
.hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4 {
  position: fixed !important;
  top: 82px !important;
  bottom: auto !important;
  pointer-events: none !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-panel,
.hbg-editor-minimal-v4 .hbg-editor-v2-head,
.hbg-editor-minimal-v4 .hbg-editor-v2-tools,
.hbg-editor-minimal-v4 .hbg-editor-v2-drawer,
.hbg-editor-minimal-v4 .hbg-editor-v2-choices {
  pointer-events: none !important;
}
/* Mesmo flutuante, as ferramentas, opções e campos seguem clicáveis. */
.hbg-editor-minimal-v4 :is(
  .hbg-editor-v2-tool,
  .hbg-editor-v2-choice,
  #hbg-edit-v2-cancel,
  #hbg-edit-v2-save,
  #hbg-edit-v2-reset,
  .hbg-paint-v3-editor,
  .hbg-paint-v3-editor *,
  input,
  label
) {
  pointer-events: auto !important;
}

/* Retira os três textos indicados sem eliminar mensagens de erro. */
.hbg-editor-minimal-v4 #hbg-edit-v2-context,
.hbg-editor-minimal-v4 #hbg-edit-v2-instruction,
.hbg-editor-minimal-v4 #hbg-edit-v2-status:not(.is-error) {
  display: none !important;
}
.hbg-editor-minimal-v4 .hbg-editor-v2-drawer-top {
  justify-content: flex-end !important;
}
.hbg-editor-minimal-v4 #hbg-edit-v2-status.is-error {
  display: block !important;
  color: #ffadb7 !important;
  background: rgba(16, 14, 22, .78) !important;
  border-radius: 7px !important;
  padding: 5px 8px !important;
}

@media (max-width: 650px) {
  body.hbg-edit-mode-on .main-content,
  body.hbg-edit-mode-on:has(#hbg-editor-layer:not([hidden]) .hbg-paint-v3-top) .main-content {
    padding-top: var(--hbg-edit-original-top-padding, 18px) !important;
    transition: none !important;
  }
  .hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4 {
    top: 70px !important;
  }
}


/* =====================================================================
   HBG • EDITOR V8 — FLUTUANTE, RECOLHIDO E SOMENTE PERFIL
   Apenas Fundos / Bordas / Cores. Fundo é o DA PÁGINA DO PERFIL,
   NUNCA o caixote do avatar. Compatível com CSS antigo V1–V7.
   ===================================================================== */

/* Desfaz padding legado que fazia o perfil descer ao abrir o editor. */
body.hbg-edit-mode-on .main-content,
body.hbg-edit-mode-on:has(#hbg-editor-layer:not([hidden]) .hbg-paint-v3-top) .main-content {
  padding-top: var(--hbg-edit-original-top-padding, 32px) !important;
  transition: none !important;
}

/* Fundo GRATUITO aplicado na PÁGINA do Perfil Público; não no avatar. */
body:has(#view-perfil-publico:not(.hidden)[data-hbg-profile-theme="cosmos"]) {
  background: var(--hbg-wall-cosmos) fixed !important;
}
body:has(#view-perfil-publico:not(.hidden)[data-hbg-profile-theme="bosque"]) {
  background: var(--hbg-wall-bosque) fixed !important;
}
body:has(#view-perfil-publico:not(.hidden)[data-hbg-profile-theme="crepusculo"]) {
  background: var(--hbg-wall-crepusculo) fixed !important;
}
body:has(#view-perfil-publico:not(.hidden)[data-hbg-profile-theme="oceano"]) {
  background: var(--hbg-wall-oceano) fixed !important;
}
body:has(#view-perfil-publico:not(.hidden)[data-hbg-profile-theme="dourado"]) {
  background: var(--hbg-wall-dourado) fixed !important;
}
/* Cancela os seletores V1 que coloriam o cabeçalho do avatar.
   O fundo do cabeçalho volta ao visual oficial independentemente do tema. */
#view-perfil-publico[data-hbg-profile-theme] .hbg-public-hero {
  background: linear-gradient(135deg, #131827, #10141f) !important;
}
/* Compatibilidade: quando não houver tema, não alteramos o background do body. */

/* A barra fica no rodapé da tela, sem encostar no nick ou na descrição.
   Não cria altura ou padding, mesmo ao abrir a paleta de cores. */
.hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4.hbg-editor-v8 {
  position: fixed !important;
  inset: auto auto max(12px, env(safe-area-inset-bottom)) 50% !important;
  top: auto !important;
  right: auto !important;
  left: 50% !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  width: min(740px, calc(100% - 20px)) !important;
  max-height: calc(100dvh - 90px) !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 250 !important;
}
.hbg-editor-v8[hidden],
.hbg-editor-v8 #hbg-edit-v2-drawer[hidden] {display:none !important;}
.hbg-editor-v8 .hbg-editor-v8-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  pointer-events: none !important;
  max-height: calc(100dvh - 95px) !important;
}
.hbg-editor-v8-sr-only {
  position:absolute !important;
  width:1px !important;height:1px !important;
  overflow:hidden !important;clip-path:inset(50%) !important;
  white-space:nowrap !important;
}
.hbg-editor-v8 .hbg-editor-v8-bar {
  display:flex !important;
  order: 2 !important;
  justify-content:center !important;
  align-items:center !important;
  gap: 10px !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding: 4px 10px !important;
  background: rgba(13, 15, 24, .28) !important;
  border: 1px solid rgba(224,202,143,.10) !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(3px) !important;
  pointer-events:none !important;
}
.hbg-editor-v8 .hbg-editor-v2-tools {
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(4px,2vw,14px) !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
  pointer-events:none !important;
}
.hbg-editor-v8 .hbg-editor-v2-tool {
  display:inline-flex !important;
  flex-direction:column !important;
  gap:2px !important;
  align-items:center !important;
  min-width:54px !important;
  min-height:43px !important;
  padding:4px 5px !important;
  color:#fff1d0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:8px !important;
  font-size:10px !important;
  font-weight:800 !important;
  text-shadow:0 1px 7px #000 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
.hbg-editor-v8 .hbg-editor-v2-tool > i {font-size:20px !important; color:#dfc48d !important;}
.hbg-editor-v8 .hbg-editor-v2-tool.is-active {
  color:#ffe5a0 !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}
.hbg-editor-v8 .hbg-editor-v2-head-actions {
  display:flex !important;
  gap:4px !important;
  align-items:center !important;
  margin-left:5px !important;
  padding-left:7px !important;
  border-left:1px solid rgba(242,222,179,.23) !important;
  pointer-events:none !important;
}
.hbg-editor-v8 #hbg-edit-v2-cancel,
.hbg-editor-v8 #hbg-edit-v2-save {
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  min-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:7px !important;
  box-shadow:none !important;
  font-size:17px !important;
  color:#f6d993 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
.hbg-editor-v8 #hbg-edit-v2-cancel {color:#ded7e8 !important;}
.hbg-editor-v8 :is(#hbg-edit-v2-save,#hbg-edit-v2-cancel,.hbg-editor-v2-tool):hover {
  background:rgba(54,42,65,.45) !important;
}
/* As opções são invisíveis até clicar Fundos/Bordas/Cores. */
.hbg-editor-v8 #hbg-edit-v2-drawer {
  order:1 !important;
  display:block !important;
  width:min(100%,700px) !important;
  max-height:min(58dvh,490px) !important;
  overflow-y:auto !important;
  margin:0 auto 3px !important;
  padding:9px 11px !important;
  border:1px solid rgba(223,195,141,.26) !important;
  border-radius:12px !important;
  background:rgba(12,14,23,.79) !important;
  box-shadow:0 8px 26px #0006 !important;
  backdrop-filter:blur(9px) !important;
  scrollbar-width:thin;
  pointer-events:auto !important;
}
.hbg-editor-v8 .hbg-editor-v2-drawer-top {
  justify-content:flex-end !important;
  margin:0 0 5px !important;
  padding:0 !important;
}
.hbg-editor-v8 .hbg-editor-v2-choices {
  display:flex !important;
  flex-flow:row wrap !important;
  justify-content:center !important;
  max-height:none !important;
  overflow:visible !important;
  gap:7px !important;
  pointer-events:auto !important;
}
.hbg-editor-v8 .hbg-editor-v2-choice {
  flex:0 1 auto !important;
  min-width:104px !important;
  max-width:160px !important;
  background:rgba(28,27,40,.67) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:9px !important;
  pointer-events:auto !important;
}
.hbg-editor-v8 .hbg-editor-v2-choice.is-selected {border-color:rgba(233,201,130,.8) !important;}
.hbg-editor-v8 .hbg-editor-v2-choices:has(.hbg-paint-v3-top) {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  max-height:none !important;
  overflow:visible !important;
}
.hbg-editor-v8 .hbg-paint-v3-editor {
  max-height:none !important;
  overflow:visible !important;
  background:rgba(19,20,31,.52) !important;
  pointer-events:auto !important;
}
.hbg-editor-v8 #hbg-edit-v2-status:not(.is-error) {display:none !important;}
.hbg-editor-v8 #hbg-edit-v2-status.is-error {
  display:block !important;
  order:0 !important;
  background:rgba(13,15,23,.88) !important;
  border:1px solid #e18b9b !important;
  border-radius:9px !important;
  padding:8px 10px !important;
  color:#ffc3c9 !important;
  pointer-events:none !important;
}
@media(max-width:650px) {
  body.hbg-edit-mode-on .main-content,
  body.hbg-edit-mode-on:has(#hbg-editor-layer:not([hidden]) .hbg-paint-v3-top) .main-content {
    padding-top:var(--hbg-edit-original-top-padding,18px) !important;
  }
  .hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4.hbg-editor-v8 {
    top:auto !important;
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
    width:calc(100% - 12px) !important;
  }
  .hbg-editor-v8 .hbg-editor-v8-bar {padding:4px 6px !important; gap:4px !important;}
  .hbg-editor-v8 .hbg-editor-v2-tool {min-width:48px !important; font-size:9px !important;}
  .hbg-editor-v8 #hbg-edit-v2-drawer {
    max-height:min(55dvh,440px) !important;
    padding:8px !important;
  }
  .hbg-editor-v8 .hbg-editor-v2-choice {min-width:92px !important;max-width:135px !important;}
}

/* ==============================================================
   HBG V9 — Descrição branca, barra arrastável e cores do Fórum
   ============================================================= */
#view-perfil-publico .hbg-public-bio-title:not(.hbg-painted-text) {
  color: #f1eef8 !important;
  -webkit-text-fill-color: #f1eef8 !important;
  background-image: none !important;
}
.hbg-editor-v8 .hbg-editor-v8-bar {
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none;
  user-select: none;
}
.hbg-editor-v8 .hbg-editor-v8-bar:active { cursor: grabbing !important; }
.hbg-editor-v8 .hbg-editor-drag-handle {
  display: grid;
  place-items: center;
  width: 17px;
  height: 38px;
  flex: 0 0 17px;
  color: #d7c6a1;
  opacity: .55;
  font-size: 17px;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.hbg-editor-v8 .hbg-editor-drag-handle:hover {opacity: 1;}
.hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4.hbg-editor-v8 {
  left: var(--hbg-v9-bar-left, 50%) !important;
  bottom: var(--hbg-v9-bar-bottom, max(12px,env(safe-area-inset-bottom))) !important;
  transform: translateX(var(--hbg-v9-bar-translate,-50%)) !important;
}
@media(max-width:650px){
  .hbg-editor-layer.hbg-editor-v2.hbg-editor-minimal-v4.hbg-editor-v8 {
    left:var(--hbg-v9-bar-left,50%) !important;
    bottom:var(--hbg-v9-bar-bottom,max(8px,env(safe-area-inset-bottom))) !important;
  }
}
.hbg-editor-v8 .hbg-paint-v9-link {
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;margin:8px 0 12px;
  border:1px solid rgba(217,182,93,.21);border-radius:9px;
  background:rgba(168,121,220,.08);
  cursor:pointer;color:#eee5f5;font-size:12px;
}
.hbg-editor-v8 .hbg-paint-v9-link input {accent-color:#d9b65d;width:16px;height:16px;flex:0 0 16px;}
/* Nick com cor escolhida: tem prioridade sobre a cor de posição no Top 5.
   Medalhas, bordas e posições do ranking continuam originais. */
.hbg-forum-personalized-name {background-repeat:no-repeat !important;}


/* HBG V10 — Cores de nick por toda a comunidade.
   Aplicado APENAS aos nomes; preserva bordas e medalhas do Top 5. */
.hbg-personalized-nick {
  background-repeat: no-repeat !important;
}
.hbg-personalized-nick-gradient {
  /* Impede quebra visual do gradiente em textos com strong dentro de links. */
  display: inline-block;
  vertical-align: baseline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Nomes personalizados nao devem herdar o gradiente de todo o cartao. */
#view-forum .hbg-personalized-nick,
#view-galeria .hbg-personalized-nick,
#view-inicio .hbg-personalized-nick,
#image-zoom-modal .hbg-personalized-nick,
#view-perfil-publico .hbg-personalized-nick {
  text-shadow: none;
}


/* ====================================================================
   HBG • LOJA V1 • identidade HBG / Habbo clássico
   Fundo equipado afeta SOMENTE a página do Perfil Público,
   NUNCA o caixote do avatar nem Início/Galeria/Fórum.
   ==================================================================== */
body.hbg-shop-wallpaper-on:has(#view-perfil-publico:not(.hidden)) {
  background-image:
    linear-gradient(135deg,rgba(11,13,24,.28),rgba(11,14,25,.38)),
    var(--hbg-shop-wallpaper-url) !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  background-size: cover, auto !important;
  background-attachment: fixed,fixed !important;
}
/* O cabeçalho aprovado permanece sem a textura nova. */
body.hbg-shop-wallpaper-on #view-perfil-publico .hbg-public-hero {
  background: linear-gradient(135deg,#131827,#10141f) !important;
}
.hbg-shop-view {padding:8px 0 28px;}
.hbg-shop-hero {
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:28px 30px;border:1px solid rgba(217,182,93,.26);border-radius:22px;
  background:linear-gradient(120deg,#1b182b 0%,#141723 60%,#121620 100%);
  box-shadow:0 20px 40px #0004;
}
.hbg-shop-eyebrow {font-size:10px;color:var(--gold);font-weight:800;letter-spacing:2px;}
.hbg-shop-hero h1 {margin:6px 0 8px;font-size:clamp(24px,4vw,36px);color:var(--gold-light);font-weight:800;line-height:1.2;}
.hbg-shop-hero h1 i {font-size:.85em;margin-right:9px;color:var(--gold);}
.hbg-shop-hero p {margin:0;color:#b9b2c9;font-size:13px;max-width:620px;}
.hbg-shop-wallet {
  min-width:185px;padding:13px 16px;border:1px solid rgba(217,182,93,.4);
  background:rgba(217,182,93,.06);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:5px;
}
.hbg-shop-wallet small {font-size:9px;letter-spacing:1.3px;color:#c9b98b;font-weight:800;}
.hbg-shop-wallet strong {font-size:29px;color:var(--gold-light);line-height:1.2;font-variant-numeric:tabular-nums;}
.hbg-shop-wallet button,.hbg-shop-toolbar button {
  appearance:none;background:#242436;border:1px solid #403953;border-radius:9px;
  padding:8px 12px;color:#e7e2f3;cursor:pointer;font:inherit;font-size:12px;font-weight:700;
}
.hbg-shop-wallet button:hover,.hbg-shop-toolbar button:hover {border-color:var(--gold);}
.hbg-shop-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:22px 0 20px;}
.hbg-shop-toolbar button.is-active {
  background:rgba(217,182,93,.14);border-color:rgba(217,182,93,.6);color:#ffe3a0;
}
#hbg-shop-unequip {margin-left:auto;border-color:rgba(168,121,220,.4);}
#hbg-shop-unequip:disabled {opacity:.4;cursor:not-allowed;}
.hbg-shop-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;}
.hbg-shop-card {
  min-width:0;overflow:hidden;border:1px solid #38334b;border-radius:15px;
  background:#191923;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.hbg-shop-card:hover {border-color:rgba(217,182,93,.65);transform:translateY(-2px);box-shadow:0 12px 30px #0005;}
.hbg-shop-card.is-equipped {border-color:var(--gold);box-shadow:0 0 0 1px rgba(217,182,93,.18);}
.hbg-shop-preview {
  height:150px;position:relative;background-color:#262239;
  background-size:auto;background-position:center;background-repeat:repeat;
  image-rendering:pixelated;overflow:hidden;
}
.hbg-shop-chip {
  position:absolute;left:10px;top:10px;background:rgba(10,12,22,.88);border:1px solid #8b7442;
  color:#ffe3a0;font-size:10px;font-weight:800;letter-spacing:.5px;border-radius:7px;padding:5px 8px;
  image-rendering:auto;
}
.hbg-shop-card-details {padding:15px;display:flex;flex:1;flex-direction:column;gap:7px;}
.hbg-shop-card-details h3 {font-size:16px;color:#f3eefc;margin:0;line-height:1.3;}
.hbg-shop-card-details p {font-size:12px;color:#aaa6bc;margin:0;line-height:1.5;flex:1;}
.hbg-shop-card-foot {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;}
.hbg-shop-card-foot strong {font-size:12px;color:var(--gold-light);white-space:nowrap;}
.hbg-shop-card-button {
  border:1px solid rgba(217,182,93,.55);background:linear-gradient(125deg,#4b392b,#30273b);
  color:#ffeac4;border-radius:9px;padding:8px 12px;font-size:12px;font-weight:800;
  cursor:pointer;transition:filter .2s;white-space:nowrap;
}
.hbg-shop-card-button:hover:not(:disabled) {filter:brightness(1.2);}
.hbg-shop-card-button:disabled {opacity:.55;cursor:default;}
.hbg-shop-status {margin-top:18px;min-height:24px;font-size:12px;color:#beb7d1;}
.hbg-shop-status.is-error {color:#ff98a6;}
.hbg-shop-empty {grid-column:1/-1;padding:26px;color:var(--muted);border:1px dashed var(--border);border-radius:12px;text-align:center;}
.hbg-shop-footer {margin-top:26px;border-top:1px solid rgba(217,182,93,.14);padding-top:15px;text-align:center;color:#9996ad;font-size:11px;}
.hbg-wallet-to-shop {display:block;margin:10px auto 0;padding:9px 14px;border:1px solid var(--gold);border-radius:8px;background:#25202b;color:#ffe3a0;font-weight:800;cursor:pointer;}
@media(max-width:980px){.hbg-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .hbg-shop-hero{padding:20px;flex-direction:column;align-items:stretch;}
  .hbg-shop-wallet{flex-direction:row;justify-content:space-between;min-width:0;}
  .hbg-shop-wallet strong{font-size:20px;}
  .hbg-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .hbg-shop-card-details{padding:12px;}
  .hbg-shop-card-foot{align-items:stretch;flex-direction:column;}
  #hbg-shop-unequip{margin-left:0;}
  .hbg-shop-preview{height:125px;}
}
@media(max-width:400px){
  .hbg-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hbg-shop-card-details h3{font-size:14px;}
  .hbg-shop-toolbar{gap:6px;}
  .hbg-shop-toolbar button{padding:7px 9px;font-size:11px;}
}

/* Compras no extrato têm valor negativo, sem sinal + duplicado. */
.hbg-wallet-entry.is-purchase strong {color:#ff98a6!important;}

/* HBG • LOJA V1.1 — fundo mais visível, sem cobrir o avatar. */
body.hbg-shop-wallpaper-on:has(#view-perfil-publico:not(.hidden)) {
  background-image:
    linear-gradient(135deg,rgba(11,13,24,.28),rgba(11,14,25,.38)),
    var(--hbg-shop-wallpaper-url) !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  background-size: cover, auto !important;
  background-attachment: fixed, fixed !important;
}
/* Aviso discreto no próprio perfil depois de Equipar. */
.hbg-shop-equip-toast {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 25px;
  width: max-content;
  max-width: min(92vw, 480px);
  padding: 12px 17px;
  border: 1px solid rgba(217,182,93,.65);
  border-radius: 12px;
  background: rgba(19,19,31,.92);
  color: #ffe3a0;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 35px rgba(0,0,0,.5);
  transform: translate(-50%,14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease,transform .2s ease;
  text-align: center;
}
.hbg-shop-equip-toast.is-visible {
  opacity: 1;
  transform: translate(-50%,0);
}
@media (prefers-reduced-motion: reduce) {
  .hbg-shop-equip-toast {transition: none;}
}

/* ====================================================================
   HBG • LOJA V2 — inventário comprado também no editor visual.
   Só altera o editor e preserva visual do topo do perfil.
   ==================================================================== */
.hbg-editor-v8 .hbg-editor-shop-heading {
  flex:0 0 100%;width:100%;margin:8px 0 1px;padding-top:9px;
  border-top:1px solid rgba(217,182,93,.27);text-align:center;
  letter-spacing:1.2px;font-weight:800;font-size:10px;color:#ffe3a0;
}
.hbg-editor-v8 .hbg-editor-shop-hint {
  display:block;flex:0 0 100%;width:100%;text-align:center;
  font-size:11px;color:#bfb5d0;padding:4px 12px 9px;
}
.hbg-editor-v8 .hbg-editor-v2-choice.hbg-editor-shop-choice {
  display:flex !important;align-items:center !important;gap:8px !important;
  max-width:175px !important;min-height:42px !important;
  color:#eee7ff !important;
}
.hbg-editor-v8 .hbg-editor-shop-thumb {
  background-position:center !important;background-size:auto !important;
  background-repeat:repeat !important;image-rendering:pixelated !important;
  border:1px solid rgba(255,255,255,.18);
}
.hbg-editor-v8 .hbg-editor-shop-choice.is-selected {
  border-color:#ffe3a0 !important;background:rgba(217,182,93,.19) !important;
  box-shadow:0 0 0 1px rgba(217,182,93,.25) !important;
}
.hbg-editor-v8 #hbg-edit-v2-drawer:has(.hbg-editor-shop-heading) {
  max-height:min(55vh,480px) !important;overflow-y:auto !important;
}
@media (max-width:650px) {
  .hbg-editor-v8 .hbg-editor-v2-choice.hbg-editor-shop-choice {
    min-width:115px !important;max-width:145px !important;
  }
  .hbg-editor-v8 #hbg-edit-v2-drawer:has(.hbg-editor-shop-heading) {
    max-height:min(56dvh,460px) !important;
  }
}


/* HBG | NOVA CENTRAL ADMINISTRATIVA V1 */
.hbg-admin-v3{width:min(1360px,100%);margin:0 auto 30px;padding:10px 0 8px;color:var(--text,#f1eef8);font-family:inherit}
.hbg-admin-v3 [hidden]{display:none!important}
.hbg-admin-v3 button,.hbg-admin-v3 input,.hbg-admin-v3 textarea,.hbg-admin-v3 select{font:inherit}
.hbg-admin-v3 button{cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease,opacity .16s ease}
.hbg-admin-v3 button:hover:not(:disabled){transform:translateY(-1px)}
.hbg-admin-v3 button:disabled{opacity:.55;cursor:not-allowed}
.hbg-admin-v3-header{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(420px,1.4fr);gap:18px;align-items:center;padding:22px 24px;border:1px solid rgba(217,182,93,.22);border-radius:24px;background:radial-gradient(circle at 0% 0%,rgba(168,121,220,.17),transparent 34%),radial-gradient(circle at 100% 0%,rgba(217,182,93,.08),transparent 30%),linear-gradient(135deg,#181b28,#11121b 64%,#161825);box-shadow:0 18px 46px rgba(0,0,0,.28)}
.hbg-admin-v3-brand{display:flex;align-items:center;gap:16px;min-width:0}
.hbg-admin-v3-logo{width:78px;height:78px;flex:0 0 78px;display:grid;place-items:center;border-radius:21px;border:1px solid rgba(217,182,93,.4);background:linear-gradient(180deg,rgba(217,182,93,.17),rgba(168,121,220,.12));color:#ffdf92;font-size:31px;font-weight:900;letter-spacing:.03em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.hbg-admin-v3-heading{min-width:0}.hbg-admin-v3-heading small,.hbg-admin-v3-card-head small{display:block;color:#dcb768;font-size:10px;font-weight:900;letter-spacing:.16em;margin-bottom:6px}
.hbg-admin-v3-heading h2{margin:0;color:#f5f1ff;font-size:clamp(25px,3vw,40px);line-height:1.08}.hbg-admin-v3-heading p{margin:7px 0 0;color:#aaa8ba;font-size:13px;line-height:1.5;max-width:690px}
.hbg-admin-v3-header-tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center}
.hbg-admin-v3-searchbar{display:flex;align-items:center;gap:10px;min-width:0;padding:0 14px;border:1px solid rgba(160,153,180,.28);border-radius:16px;background:#121420;min-height:52px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.hbg-admin-v3-searchbar i{font-size:19px;color:#d2c3ee}.hbg-admin-v3-searchbar input{min-width:0;flex:1;background:transparent;border:0;color:#f1eef8;outline:0;padding:14px 0;font-size:13px}
.hbg-admin-v3-btn,.hbg-admin-v3-inline button,.hbg-admin-v3-pager button,.hbg-admin-v3-btn-small,.hbg-admin-v3-quick-grid button{border:1px solid #4f4760;border-radius:14px;background:#1c1f2c;color:#ece6fa;padding:12px 14px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.hbg-admin-v3-btn{min-height:52px}.hbg-admin-v3-btn-ghost{background:#141722;color:#cfc7e0;border-color:#343846}
.hbg-admin-v3-btn i,.hbg-admin-v3-inline button i,.hbg-admin-v3-quick-grid button i,.hbg-admin-v3-btn-small i{color:#d9b65d}
.hbg-admin-v3-rolebox{min-height:52px;padding:10px 14px;border:1px solid rgba(217,182,93,.24);border-radius:16px;background:linear-gradient(135deg,rgba(217,182,93,.08),rgba(168,121,220,.09));display:flex;flex-direction:column;justify-content:center}.hbg-admin-v3-rolebox strong{color:#fff0c3;font-size:14px}.hbg-admin-v3-rolebox span{color:#cfc8da;font-size:11px;margin-top:3px}
.hbg-admin-v3-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}
.hbg-admin-v3-stat{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:20px;border:1px solid rgba(143,134,177,.24);background:linear-gradient(145deg,#1c1e2a,#161823);overflow:hidden;min-width:0}.hbg-admin-v3-stat::after{content:"";position:absolute;right:-14px;bottom:-14px;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 62%)}
.hbg-admin-v3-stat i{font-size:27px;color:#dfc07a}.hbg-admin-v3-stat small{color:#d7d1e6;font-size:12px;font-weight:700}.hbg-admin-v3-stat strong{font-size:35px;line-height:1;color:#fff5d4;letter-spacing:-.03em}
.hbg-admin-v3-stat-users{border-color:rgba(217,182,93,.42)}.hbg-admin-v3-stat-rooms,.hbg-admin-v3-stat-forum{border-color:rgba(168,121,220,.42)}.hbg-admin-v3-stat-backgrounds{border-color:rgba(217,182,93,.35)}
.hbg-admin-v3-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.92fr);gap:16px;align-items:start}
.hbg-admin-v3-sidecol{display:grid;gap:16px}
.hbg-admin-v3-card{min-width:0;padding:18px;border:1px solid rgba(76,70,96,.56);border-radius:22px;background:linear-gradient(180deg,#171925,#131520);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.hbg-admin-v3-card-main{padding:20px}
.hbg-admin-v3-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.hbg-admin-v3-card-head h3{margin:0;color:#f8f4ff;font-size:18px}.hbg-admin-v3-card-head p{margin:5px 0 0;color:#a8a4b8;font-size:12px}
.hbg-admin-v3-chip{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border-radius:999px;border:1px solid rgba(170,150,219,.34);background:rgba(168,121,220,.12);color:#d9cbf5;font-size:10px;font-weight:800;text-transform:lowercase}.hbg-admin-v3-chip.is-owner{border-color:rgba(217,182,93,.4);background:rgba(217,182,93,.12);color:#ffe7a6}
.hbg-admin-v3-inline{display:flex;gap:8px;align-items:center}.hbg-admin-v3-inline input{min-width:0;flex:1;min-height:45px;border:1px solid #47415a;background:#10121b;color:#f1eef8;border-radius:12px;padding:0 12px;outline:none;font-size:12px}.hbg-admin-v3-inline input:focus,.hbg-admin-v3-control input:focus,.hbg-admin-v3-control textarea:focus,.hbg-admin-v3-legacy-host input:focus,.hbg-admin-v3-legacy-host textarea:focus,.hbg-admin-v3-legacy-host select:focus{border-color:#bc9bf0;box-shadow:0 0 0 3px rgba(168,121,220,.12)}
.hbg-admin-v3-userlist{display:flex;flex-direction:column;gap:9px;max-height:520px;overflow:auto;padding-right:3px;margin-top:12px}.hbg-admin-v3-user{display:flex;gap:11px;align-items:center;padding:10px;border:1px solid #2f3240;border-radius:14px;background:#111420}.hbg-admin-v3-user img{width:42px;height:42px;flex:0 0 42px;object-fit:contain;image-rendering:pixelated;background:#252839;border-radius:10px}.hbg-admin-v3-user-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.hbg-admin-v3-user-info strong{font-size:13px;color:#f8f4ff;overflow:hidden;text-overflow:ellipsis}.hbg-admin-v3-user-info small{font-size:10px;color:#a7a4b8;line-height:1.35}.hbg-admin-v3-btn-small{padding:9px 11px;font-size:10px;border-radius:11px}
.hbg-admin-v3-pager{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:#aaa6b9}.hbg-admin-v3-pager button{padding:8px 12px;border-radius:12px}
.hbg-admin-v3-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hbg-admin-v3-quick-grid button{min-height:56px;justify-content:flex-start;text-align:left;padding:12px 13px}.hbg-admin-v3-quick-grid button span{display:block;line-height:1.2}.hbg-admin-v3-quick-grid button.is-gold{border-color:rgba(217,182,93,.48);background:linear-gradient(180deg,rgba(217,182,93,.17),rgba(217,182,93,.05));color:#fff1c8}
.hbg-admin-v3-wallet-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,1fr);gap:16px;align-items:start}
.hbg-admin-v3-wallet-result{border:1px solid #373246;background:#111420;border-radius:16px;padding:14px;margin-top:12px;min-height:128px}.hbg-admin-v3-wallet-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.hbg-admin-v3-wallet-head img{width:54px;height:54px;object-fit:contain;image-rendering:pixelated;background:#242739;border-radius:12px;border:1px solid rgba(217,182,93,.24)}.hbg-admin-v3-wallet-identity{display:flex;flex-direction:column;gap:4px}.hbg-admin-v3-wallet-identity strong{color:#fff0c7;font-size:16px}.hbg-admin-v3-wallet-identity small{color:#a7a4b8;font-size:11px}
.hbg-admin-v3-wallet-counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hbg-admin-v3-wallet-counters>div{display:flex;flex-direction:column;gap:5px;padding:11px 12px;border-radius:12px;background:#1c1f2d;border:1px solid #2d3140}.hbg-admin-v3-wallet-counters small{font-size:10px;color:#aaa6b9}.hbg-admin-v3-wallet-counters b{font-size:19px;color:#f7ecff;line-height:1.15}
.hbg-admin-v3-control{display:flex;flex-direction:column;gap:8px}.hbg-admin-v3-modes{display:flex;gap:8px}.hbg-admin-v3-modes button{flex:1;min-height:44px;background:#1a1d2b}.hbg-admin-v3-modes button[aria-pressed=true]{border-color:rgba(217,182,93,.55);background:linear-gradient(180deg,rgba(217,182,93,.18),rgba(217,182,93,.06));color:#ffeab3}.hbg-admin-v3-control label{font-size:11px;font-weight:800;color:#d7d0e6;margin-top:2px}.hbg-admin-v3-control input,.hbg-admin-v3-control textarea{background:#10121b;border:1px solid #454057;color:#f5f0ff;border-radius:12px;padding:11px 12px;outline:0;font-size:12px;resize:vertical}.hbg-admin-v3-preview{padding:12px;border:1px dashed #615175;border-radius:12px;color:#e5dbf5;font-size:12px;line-height:1.55;background:rgba(168,121,220,.06)}.hbg-admin-v3-primary{padding:13px 15px;border:1px solid #cda55c;border-radius:14px;background:linear-gradient(100deg,#e4c57d,#b48c48);color:#24190d;font-weight:900}
.hbg-admin-v3-userhistory{margin-top:14px}.hbg-admin-v3-userhistory h4{font-size:12px;color:#ceb7ee;margin:0 0 8px}.hbg-admin-v3-history-row{display:grid;grid-template-columns:112px 1fr;gap:5px 10px;padding:8px 10px;border-bottom:1px solid #2f3240;font-size:11px}.hbg-admin-v3-history-row strong{color:#ffe2a1}.hbg-admin-v3-history-row span{color:#e4ddf3}.hbg-admin-v3-history-row small{grid-column:2;color:#9d9ab0}
.hbg-admin-v3-audit{display:flex;flex-direction:column;gap:10px}.hbg-admin-v3-audit-row{display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(120px,.7fr) minmax(120px,.8fr) minmax(170px,.9fr);gap:12px;align-items:start;padding:12px 14px;border:1px solid #2d3140;border-radius:16px;background:#111420}.hbg-admin-v3-audit-action strong{display:block;color:#fff0c6;font-size:14px}.hbg-admin-v3-audit-action p{margin:4px 0 0;color:#d6d1e1;font-size:12px;line-height:1.45}.hbg-admin-v3-audit-meta{display:flex;flex-direction:column;gap:5px}.hbg-admin-v3-audit-meta small{color:#9a98aa;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.hbg-admin-v3-audit-meta span{color:#eee8fb;font-size:12px;word-break:break-word}
.hbg-admin-v3-lower{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.hbg-admin-v3-legacy-host{min-width:0}.hbg-admin-v3-legacy-card,.hbg-admin-v3-legacy-host .hbg-adm-panel{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}.hbg-admin-v3-legacy-host .hbg-adm-panel-heading{display:none!important}.hbg-admin-v3-legacy-host .hbg-adm-member-form,.hbg-admin-v3-legacy-host .hbg-adm-mod-toolbar,.hbg-admin-v3-legacy-host .hbg-adm-rules-card{margin-top:0}.hbg-admin-v3-legacy-host .hbg-adm-status{margin:8px 0 0}.hbg-admin-v3-legacy-host .hbg-adm-member{background:#10131d;border-color:#2f3240}.hbg-admin-v3-legacy-host .hbg-adm-mod-item{background:#10131d;border-color:#2f3240}.hbg-admin-v3-legacy-host .hbg-adm-button,.hbg-admin-v3-legacy-host .hbg-adm-remove{border-radius:12px}
.hbg-admin-v3-status{margin:12px 3px 2px;color:#d5bc82;font-size:12px;min-height:18px}.hbg-admin-v3-status.is-error{color:#ff9aa4}
.hbg-admin-v3-hint{font-size:11px;color:#9f9bb1;line-height:1.55;margin:6px 0}
@media(max-width:1180px){.hbg-admin-v3-header{grid-template-columns:1fr}.hbg-admin-v3-header-tools{grid-template-columns:minmax(0,1fr) auto auto auto}.hbg-admin-v3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hbg-admin-v3-main{grid-template-columns:1fr}.hbg-admin-v3-wallet-grid{grid-template-columns:1fr}.hbg-admin-v3-lower{grid-template-columns:1fr 1fr}.hbg-admin-v3-audit-row{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.hbg-admin-v3{padding:8px 0}.hbg-admin-v3-header{padding:16px}.hbg-admin-v3-brand{align-items:flex-start}.hbg-admin-v3-logo{width:62px;height:62px;flex-basis:62px;font-size:25px;border-radius:16px}.hbg-admin-v3-heading h2{font-size:28px}.hbg-admin-v3-header-tools{grid-template-columns:1fr;align-items:stretch}.hbg-admin-v3-btn,.hbg-admin-v3-rolebox{min-height:46px}.hbg-admin-v3-stats{grid-template-columns:1fr}.hbg-admin-v3-card{padding:15px}.hbg-admin-v3-wallet-counters{grid-template-columns:1fr}.hbg-admin-v3-modes{flex-direction:column}.hbg-admin-v3-quick-grid{grid-template-columns:1fr 1fr}.hbg-admin-v3-lower{grid-template-columns:1fr}.hbg-admin-v3-audit-row{grid-template-columns:1fr}.hbg-admin-v3-history-row{grid-template-columns:1fr}.hbg-admin-v3-history-row small{grid-column:auto}}
@media(max-width:520px){.hbg-admin-v3-inline{flex-direction:column;align-items:stretch}.hbg-admin-v3-quick-grid{grid-template-columns:1fr}.hbg-admin-v3-pager{flex-wrap:wrap}.hbg-admin-v3-card-head{flex-direction:column;align-items:flex-start}}



/* ================================================================
   HBG • MENU ADMINISTRATIVO V2.2 — INVISÍVEL + FIXO NO VIEWPORT
   O nav fica filho direto de <body> para evitar transformações ou
   overflow dos ancestrais do CodePen que deslocavam position:fixed.
   A "zona de hover" é invisível e ocupa 16px na margem esquerda.
   ================================================================ */
body > #hbg-adm-side-nav {
  position: fixed !important;
  z-index: 2140 !important;
  top: 72px !important;
  left: 0 !important;
  width: 16px !important;
  height: min(630px, calc(100dvh - 84px));
  max-height: calc(100dvh - 84px);
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  visibility: visible;
  pointer-events: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  backdrop-filter: none;
  transition: width .21s ease, opacity .14s ease, background .21s ease,
              box-shadow .21s ease, border-color .21s ease;
}
body > #hbg-adm-side-nav::-webkit-scrollbar {display:none;width:0;height:0;}
/* Ausente de TODAS as outras páginas — inclusive após sair do ADM. */
body:not(:has(#view-adm:not(.hidden))) > #hbg-adm-side-nav {
  display:none !important;
  pointer-events:none !important;
}
/* Aberto apenas ao entrar na área invisível, focar pelo teclado,
   ou ativar o botão do menu. */
body > #hbg-adm-side-nav:hover,
body > #hbg-adm-side-nav:focus-within,
body > #hbg-adm-side-nav.is-open {
  width: 246px !important;
  opacity: 1;
  border-color: rgba(217,182,93,.35);
  background: rgba(19,21,31,.985);
  box-shadow: 8px 18px 48px rgba(0,0,0,.48);
  backdrop-filter: blur(12px);
}
body > #hbg-adm-side-nav button {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #cec8dc;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  transform: none;
}
body > #hbg-adm-side-nav button[hidden] {display:none !important;}
body > #hbg-adm-side-nav button:hover,
body > #hbg-adm-side-nav button:focus-visible {
  background: rgba(168,121,220,.19);
  color: #f5edff;
  border-color: rgba(168,121,220,.28);
  outline: none;
}
body > #hbg-adm-side-nav button i,
body > #hbg-adm-side-nav .hbg-adm-side-brand-mark {
  flex: 0 0 20px;
  width: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 19px;
  color: #d9b65d;
}
body > #hbg-adm-side-nav .hbg-adm-side-brand {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 10px !important;
  color: #ffe3a0 !important;
  background: rgba(217,182,93,.11) !important;
  border-color: rgba(217,182,93,.20) !important;
}
body > #hbg-adm-side-nav .hbg-adm-side-brand-mark {font-weight:900;font-size:22px !important;font-family:monospace;}
body > #hbg-adm-side-nav .hbg-adm-side-brand-label,
body > #hbg-adm-side-nav .hbg-adm-side-items button span,
body > #hbg-adm-side-nav .hbg-adm-side-foot span {
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  transition: opacity .12s ease;
  pointer-events: none;
}
body > #hbg-adm-side-nav .hbg-adm-side-brand-label {font-weight:900;font-size:15px;line-height:1.1;}
body > #hbg-adm-side-nav .hbg-adm-side-brand-label small {display:block;color:#aaa5b9;font-size:9px;letter-spacing:.08em;margin-top:3px;}
body > #hbg-adm-side-nav .hbg-adm-side-brand-icon {margin-left:auto;}
body > #hbg-adm-side-nav:hover :is(.hbg-adm-side-brand-label,.hbg-adm-side-items button span,.hbg-adm-side-foot span),
body > #hbg-adm-side-nav:focus-within :is(.hbg-adm-side-brand-label,.hbg-adm-side-items button span,.hbg-adm-side-foot span),
body > #hbg-adm-side-nav.is-open :is(.hbg-adm-side-brand-label,.hbg-adm-side-items button span,.hbg-adm-side-foot span) {
  opacity: 1;
  visibility: visible;
  transition-delay: .08s;
  pointer-events: auto;
}
body > #hbg-adm-side-nav .hbg-adm-side-items {display:flex;flex-direction:column;gap:3px;min-width:0;}
body > #hbg-adm-side-nav .hbg-adm-side-items button:first-child {background:rgba(168,121,220,.14);color:#eadbff;}
body > #hbg-adm-side-nav .hbg-adm-side-foot {
  display:flex;align-items:center;min-height:28px;gap:12px;
  padding:5px 12px;color:#aaa3b8;font-size:10px;white-space:nowrap;
}
body > #hbg-adm-side-nav .hbg-adm-side-foot i {font-size:14px;color:#d9b65d;flex:0 0 15px;}
#view-adm :is(#hbg-admin-v3,#hbg-adm-v3-users-card,#hbg-adm-v3-mod-card,#hbg-adm-v3-wallet-card,#hbg-adm-v3-rules-card,#hbg-adm-v3-team-card,#hbg-adm-v3-audit-card) {
  scroll-margin-top: 98px;
}
@media(max-width:680px) {
  body > #hbg-adm-side-nav {top:65px !important;height:calc(100dvh - 75px);max-height:calc(100dvh - 75px);}
  body > #hbg-adm-side-nav:hover,
  body > #hbg-adm-side-nav:focus-within,
  body > #hbg-adm-side-nav.is-open {width:min(246px, calc(100vw - 12px)) !important;}
}
@media(prefers-reduced-motion:reduce) {
  body > #hbg-adm-side-nav {transition:none !important;}
}
/* ================================================================
  HABBO BUILDERS GALLERY - PAINEL ADM V3
  Redesign fiel ao modelo aprovado - somente a área do ADM.
  NÃO altera o hover invisível e fixo do menu lateral V2.2.
  ================================================================ */

/* Esconde o painel ADM antigo que era exibido abaixo da visão nova.
   Os recursos funcionais são movidos pelo JS para o workspace. */
#view-adm:has(> #hbg-admin-v3) {
  width: 100% !important;
  max-width: 1540px !important;
  margin: 0 auto !important;
}
#view-adm:has(> #hbg-admin-v3) > :not(#hbg-admin-v3) {
  display: none !important;
}
#hbg-admin-v3, #hbg-admin-v3 * {box-sizing:border-box}
#hbg-admin-v3 {
  max-width: 1500px;
  width: 100%;
  padding: 0 4px 18px;
  margin: 0 auto;
  color: #f1eef8;
  --adm3-bg: #171923;
  --adm3-panel: #1d1e2b;
  --adm3-border: #464253;
  --adm3-gold: #dfbb70;
  --adm3-purple: #a879dc;
}
#hbg-admin-v3 [hidden]{display:none!important}

/* CABEÇALHO HORIZONTAL — não usar mais o hero alto. */
#hbg-admin-v3 .hbg-admin-v3-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:74px;
  padding:12px 20px;
  border:1px solid #393645;
  border-radius:13px;
  background:linear-gradient(130deg,#1e1c29,#191b26);
  box-shadow:0 9px 26px #0003;
}
#hbg-admin-v3 .hbg-admin-v3-brand{display:flex;flex:1 1 40%;align-items:center;gap:14px;min-width:230px}
#hbg-admin-v3 .hbg-admin-v3-logo {
  flex:0 0 51px;
  width:51px;height:51px;
  border-radius:10px;
  border:1px solid #82673b;
  background:linear-gradient(145deg,#3a2c22,#2b2537);
  display:grid;place-items:center;
  color:#f1c87c;font-size:28px;
}
#hbg-admin-v3 .hbg-admin-v3-heading h2 {
  margin:0 0 5px;
  font-size:clamp(18px,1.65vw,27px);
  line-height:1.13;
  white-space:normal;
  color:#f6f1fa;
  font-weight:850;
}
#hbg-admin-v3 .hbg-admin-v3-heading p{font-size:12px;line-height:1.3;color:#b6b1c0;margin:0}
#hbg-admin-v3 .hbg-admin-v3-header-tools{
  flex:1 1 58%;
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  min-width:0;
}
#hbg-admin-v3 .hbg-admin-v3-searchbar{
  flex:1 1 380px;
  min-width:110px;
  max-width:530px;
  height:44px;min-height:44px;
  border-radius:9px;
  padding:0 12px;
  background:#1d1c28;
  border:1px solid #635b71;
}
#hbg-admin-v3 .hbg-admin-v3-searchbar input{font-size:12px;padding:10px 0}
#hbg-admin-v3 .hbg-admin-v3-btn{
  min-width:40px;min-height:42px;
  height:42px;padding:0 11px;
  border-radius:9px;border-color:#514a5b;
  background:#242331;
}
#hbg-admin-v3 .hbg-admin-v3-rolebox{
  min-width:118px;min-height:44px;
  background:transparent;
  border:0;border-left:1px solid #4d4859;
  padding:4px 0 4px 15px;
  border-radius:0;
}
#hbg-admin-v3 .hbg-admin-v3-rolebox strong{color:#f8edfa;font-size:12px}
#hbg-admin-v3 .hbg-admin-v3-rolebox span{font-size:10px;color:#aaa5b9}

/* INDICADORES EM UMA LINHA */
#hbg-admin-v3 .hbg-admin-v3-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:13px 0;
}
#hbg-admin-v3 .hbg-admin-v3-stat {
  min-height:88px;
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:12px;
  align-items:center;
  border-radius:11px;
  border:1px solid #77623c;
  padding:14px 14px;
  background:linear-gradient(130deg,#2d2933,#211f2b);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
#hbg-admin-v3 .hbg-admin-v3-stat::after{opacity:.6;width:65px;height:65px}
#hbg-admin-v3 .hbg-admin-v3-stat i {
  grid-area:1/1/3/2;
  font-size:31px;
  color:#f0c36a;
  text-align:center;
  background:#292436;
  border-radius:11px;
  padding:8px 0;
}
#hbg-admin-v3 .hbg-admin-v3-stat small {
  grid-area:1/2/2/3;
  font-size:12px;
  font-weight:750;
  color:#ece5ef;
  line-height:1.2;
}
#hbg-admin-v3 .hbg-admin-v3-stat strong {
  grid-area:2/2/3/3;
  font-size:clamp(24px,2.1vw,32px);
  line-height:1.08;
  color:#fff7eb;
}
#hbg-admin-v3 .hbg-admin-v3-stat-rooms,
#hbg-admin-v3 .hbg-admin-v3-stat-forum {border-color:#806098;background:linear-gradient(110deg,#2a2336,#252034)}
#hbg-admin-v3 .hbg-admin-v3-stat-rooms i,
#hbg-admin-v3 .hbg-admin-v3-stat-forum i{color:#cb97f2}

/* Grade do mockup: moderação + usuários / carteira + atalhos / histórico */
#hbg-admin-v3 .hbg-admin-v3-board {
  display:grid;
  grid-template-columns:minmax(0,1.88fr) minmax(295px,.94fr);
  grid-template-areas:'moder users' 'wallet actions' 'audit audit';
  gap:12px;
  align-items:stretch;
}
#hbg-admin-v3 .hbg-admin-v3-card {
  min-width:0;
  background:linear-gradient(180deg,#22222f,#1c1e2a);
  border:1px solid #5a5263;
  border-radius:12px;
  padding:14px;
  box-shadow:0 9px 23px rgba(0,0,0,.22);
}
#hbg-admin-v3 .hbg-v3-moderation{grid-area:moder;min-height:260px}
#hbg-admin-v3 .hbg-v3-users{grid-area:users;min-height:260px}
#hbg-admin-v3 .hbg-v3-wallet{grid-area:wallet;min-height:170px}
#hbg-admin-v3 .hbg-v3-actions{grid-area:actions;min-height:170px}
#hbg-admin-v3 .hbg-v3-audit-card{grid-area:audit;min-height:150px}
#hbg-admin-v3 .hbg-admin-v3-card-head {
  margin:0 0 10px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
#hbg-admin-v3 .hbg-admin-v3-card-head h3{
  display:flex;align-items:center;gap:9px;
  margin:0;font-weight:840;
  font-size:16px;line-height:1.25;
  color:#f8f4fc;
}
#hbg-admin-v3 .hbg-admin-v3-card-head h3 i{font-size:20px;color:#e6bf71}
#hbg-admin-v3 .hbg-v3-users .hbg-admin-v3-card-head h3 i,
#hbg-admin-v3 .hbg-v3-moderation .hbg-admin-v3-card-head h3 i{color:#c99ae9}
#hbg-admin-v3 .hbg-v3-text-button,
#hbg-admin-v3 .hbg-admin-v3-card-head .hbg-v3-text-button{
  display:inline-flex;align-items:center;gap:6px;
  min-height:28px;padding:3px 7px;
  color:#d9c3f0;
  background:transparent;border:0;
  font-size:11px;font-weight:700;
  white-space:nowrap;
}
#hbg-admin-v3 .hbg-v3-text-button:hover{color:#ffe7a7;text-decoration:underline}
#hbg-admin-v3 .hbg-v3-subtle{font-size:10px;color:#9994a9}

/* MODERAÇÃO COMPACTA; nenhuma aprovação fictícia — botões reais Ocultar / Restaurar */
#hbg-admin-v3 .hbg-v3-mod-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:9px;
}
#hbg-admin-v3 .hbg-v3-mod-tabs button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:0;min-height:37px;padding:7px 4px;
  border-radius:8px;border:1px solid #625a70;
  background:#292938;color:#ded8e6;font-size:11px;font-weight:700;
}
#hbg-admin-v3 .hbg-v3-mod-tabs button[aria-pressed=true]{border-color:#b392d8;background:#58416b;color:#fff0ff}
#hbg-admin-v3 .hbg-v3-mod-list{display:flex;flex-direction:column;gap:5px;min-height:150px}
#hbg-admin-v3 .hbg-v3-mod-row{
  display:flex;align-items:center;gap:10px;
  min-height:49px;padding:6px 9px;
  background:#1a1c27;border:1px solid #343441;border-radius:8px;
}
#hbg-admin-v3 .hbg-v3-mod-icon{
  width:38px;height:38px;flex:0 0 38px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#342b43,#252a35);
  border-radius:8px;color:#dbb97e;font-size:22px;
}
#hbg-admin-v3 .hbg-v3-mod-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#hbg-admin-v3 .hbg-v3-mod-info strong{
  color:#eee8f8;font-size:12px;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#hbg-admin-v3 .hbg-v3-mod-info small{color:#ada6b8;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hbg-admin-v3 .hbg-v3-mod-action{
  padding:6px 13px;min-width:77px;min-height:32px;
  border-radius:8px;border:1px solid #b08a4f;
  background:rgba(199,155,73,.1);color:#f7d69a;
  font-size:11px;font-weight:760;
}
#hbg-admin-v3 .hbg-v3-mod-action:disabled{opacity:.5}

/* USUÁRIOS — cinco aparecem antes da rolagem interna, sem expandir a página */
#hbg-admin-v3 .hbg-v3-users .hbg-admin-v3-inline{margin-bottom:6px}
#hbg-admin-v3 .hbg-v3-users .hbg-admin-v3-inline input{min-height:30px;height:30px;padding:5px 10px;font-size:11px;border-radius:8px}
#hbg-admin-v3 .hbg-v3-users .hbg-admin-v3-inline button{min-height:30px;padding:5px 12px;border-radius:8px}
#hbg-admin-v3 .hbg-admin-v3-userlist{max-height:195px;overflow-y:auto;display:flex;flex-direction:column;gap:0;padding-right:2px;margin:0}
#hbg-admin-v3 .hbg-admin-v3-user {
  min-height:39px;display:flex;align-items:center;gap:9px;
  padding:3px 4px;background:transparent;border:0;border-bottom:1px solid #414051;border-radius:0;
}
#hbg-admin-v3 .hbg-admin-v3-user img{width:34px;height:34px;flex:0 0 34px;border-radius:6px;background:transparent}
#hbg-admin-v3 .hbg-admin-v3-user-info{gap:1px}
#hbg-admin-v3 .hbg-admin-v3-user-info strong{font-size:11px}
#hbg-admin-v3 .hbg-admin-v3-user-info small{font-size:9px;line-height:1.15}
#hbg-admin-v3 .hbg-admin-v3-btn-small{font-size:10px;padding:5px 8px;border-radius:6px}
#hbg-admin-v3 .hbg-admin-v3-pager {margin-top:5px;font-size:10px}
#hbg-admin-v3 .hbg-admin-v3-pager button {min-height:26px;padding:4px 8px;border-radius:7px;font-size:10px}

/* CARTEIRA — busca à esquerda, saldo à direita, botões abaixo */
#hbg-admin-v3 .hbg-v3-wallet-top{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.8fr);gap:15px;align-items:start;
}
#hbg-admin-v3 .hbg-v3-label{display:block;color:#f0eaf6;margin:0 0 6px;font-size:11px;font-weight:800}
#hbg-admin-v3 .hbg-v3-wallet .hbg-admin-v3-inline input{border-radius:8px;min-height:38px;font-size:12px}
#hbg-admin-v3 .hbg-v3-wallet .hbg-admin-v3-inline button {min-height:38px;padding:8px 10px;border-radius:8px}
#hbg-admin-v3 .hbg-admin-v3-wallet-result{
  padding:8px 12px;margin:0;min-height:56px;border:1px solid #4b4559;border-radius:8px;
  background:#242534;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
#hbg-admin-v3 .hbg-admin-v3-wallet-result > small{font-size:10px;color:#d7c8e6}
#hbg-admin-v3 .hbg-admin-v3-wallet-result > b{font-size:20px;color:#f4cb78;line-height:1.15}
#hbg-admin-v3 .hbg-admin-v3-wallet-result > span{font-size:9px;color:#a8a3b5}
#hbg-admin-v3 .hbg-admin-v3-wallet-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
#hbg-admin-v3 .hbg-admin-v3-wallet-head img{width:31px;height:31px;border-radius:6px}
#hbg-admin-v3 .hbg-admin-v3-wallet-identity strong{font-size:11px}
#hbg-admin-v3 .hbg-admin-v3-wallet-identity small{font-size:9px}
#hbg-admin-v3 .hbg-admin-v3-wallet-counters{display:flex;flex-direction:column;gap:2px}
#hbg-admin-v3 .hbg-admin-v3-wallet-counters b{color:#f5c77a;font-size:18px}
#hbg-admin-v3 .hbg-admin-v3-wallet-counters small,
#hbg-admin-v3 .hbg-admin-v3-wallet-counters span{font-size:9px;color:#b5adbe}
#hbg-admin-v3 .hbg-admin-v3-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
#hbg-admin-v3 .hbg-admin-v3-modes button{
  min-width:0;min-height:36px;border-radius:8px;padding:6px;
  background:#252432;border:1px solid #9870b8;color:#e9daec;font-size:11px;font-weight:750;
}
#hbg-admin-v3 .hbg-admin-v3-modes button:first-child{border-color:#be944d;color:#f5d78a}
#hbg-admin-v3 .hbg-admin-v3-modes button[aria-pressed=true]{background:#433750}
#hbg-admin-v3 .hbg-admin-v3-control{margin-top:12px;padding:12px;border:1px solid #4b4056;border-radius:9px;background:#171825}
#hbg-admin-v3 .hbg-v3-wallet-form-grid{display:grid;grid-template-columns:minmax(110px,.5fr) minmax(160px,1fr);gap:12px}
#hbg-admin-v3 .hbg-v3-wallet-form-grid > div{display:flex;flex-direction:column;gap:5px}
#hbg-admin-v3 .hbg-admin-v3-control label{font-size:11px}
#hbg-admin-v3 .hbg-admin-v3-control input{min-height:35px;padding:7px 9px;border-radius:8px}
#hbg-admin-v3 .hbg-admin-v3-preview{font-size:11px;padding:8px;border-radius:7px;margin-top:7px}
#hbg-admin-v3 .hbg-admin-v3-primary{padding:10px;border-radius:8px;font-size:11px}
#hbg-admin-v3 .hbg-admin-v3-chip{font-size:9px;padding:4px 9px;min-height:23px;text-transform:none}

/* AÇÕES RÁPIDAS */
#hbg-admin-v3 .hbg-admin-v3-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#hbg-admin-v3 .hbg-admin-v3-quick-grid button{
  min-height:49px;justify-content:center;gap:7px;padding:9px;
  border:1px solid #696078;border-radius:9px;
  background:#2a2a39;font-size:11px;font-weight:780;
}
#hbg-admin-v3 .hbg-admin-v3-quick-grid button.is-gold{border-color:#bf984e;background:#322d2b;color:#f5ddac}
#hbg-admin-v3 .hbg-admin-v3-quick-grid button i{font-size:20px}
#hbg-admin-v3 .hbg-admin-v3-quick-grid button span{text-align:left}

/* AUDITORIA REAL — histórico dos ajustes de carteira */
#hbg-admin-v3 .hbg-v3-audit-card{padding-bottom:10px}
#hbg-admin-v3 .hbg-admin-v3-audit{display:flex;flex-direction:column;gap:0;max-height:220px;overflow:auto}
#hbg-admin-v3 .hbg-v3-audit-head,
#hbg-admin-v3 .hbg-v3-audit-row {
  display:grid;grid-template-columns:minmax(175px,1.4fr) minmax(95px,1fr) minmax(100px,1fr) minmax(132px,.85fr);
  gap:12px;align-items:center;padding:7px 12px;
}
#hbg-admin-v3 .hbg-v3-audit-head {background:#181923;border-bottom:1px solid #3b3c48;font-size:10px;color:#d8cedd}
#hbg-admin-v3 .hbg-v3-audit-row{min-height:29px;font-size:11px;background:#272734;color:#ece7f5;border-bottom:1px solid #3c3c4a}
#hbg-admin-v3 .hbg-v3-audit-row:nth-of-type(odd){background:#20212d}
#hbg-admin-v3 .hbg-v3-audit-row span:first-child{color:#f4ce86}

/* Ferramentas completas: mesma identidade, mas em páginas próprias. */
#hbg-admin-v3 .hbg-v3-workspace{margin-top:14px}
#hbg-admin-v3.hbg-v3-in-workspace .hbg-admin-v3-stats,
#hbg-admin-v3.hbg-v3-in-workspace .hbg-admin-v3-board {display:none!important}
#hbg-admin-v3 .hbg-v3-workspace-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;
  padding:15px 19px;border:1px solid #4c465b;border-radius:11px;background:#242331;
}
#hbg-admin-v3 .hbg-v3-workspace-head small{font-size:10px;letter-spacing:.12em;color:#dfb96e}
#hbg-admin-v3 .hbg-v3-workspace-head h2{font-size:22px;margin:4px 0 0;color:#eee8f6}
#hbg-admin-v3 .hbg-v3-workspace-head button{padding:9px 13px;border-radius:8px;background:#322d3d;color:#eadcf3;border:1px solid #625274;font-size:12px;font-weight:760}
#hbg-admin-v3 .hbg-v3-tool{min-height:150px}
#hbg-admin-v3 .hbg-admin-v3-legacy-host .hbg-adm-panel,
#hbg-admin-v3 .hbg-admin-v3-legacy-host .hbg-admin-v3-legacy-card{padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#hbg-admin-v3 .hbg-v3-workspace .hbg-admin-v3-legacy-host{min-width:0;max-width:100%}
#hbg-admin-v3 .hbg-admin-v3-status{font-size:11px;margin:8px 2px 0;color:#dcc588;min-height:15px}
#hbg-admin-v3 .hbg-admin-v3-status.is-error{color:#ff929c}

@media(max-width:1100px){
  #hbg-admin-v3 .hbg-admin-v3-header{flex-wrap:wrap}
  #hbg-admin-v3 .hbg-admin-v3-header-tools{flex:1 1 100%}
  #hbg-admin-v3 .hbg-admin-v3-board{grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr)}
  #hbg-admin-v3 .hbg-admin-v3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  #hbg-admin-v3 .hbg-admin-v3-board{grid-template-columns:1fr;grid-template-areas:'moder' 'users' 'wallet' 'actions' 'audit'}
  #hbg-admin-v3 .hbg-admin-v3-header{padding:13px}
  #hbg-admin-v3 .hbg-admin-v3-header-tools{flex-wrap:wrap}
  #hbg-admin-v3 .hbg-admin-v3-searchbar{flex-basis:100%;max-width:none}
  #hbg-admin-v3 .hbg-v3-mod-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hbg-admin-v3 .hbg-v3-wallet-top{grid-template-columns:1fr}
  #hbg-admin-v3 .hbg-v3-audit-head{display:none}
  #hbg-admin-v3 .hbg-v3-audit-row{grid-template-columns:1fr 1fr;gap:5px}
}
@media(max-width:470px){
  #hbg-admin-v3 .hbg-admin-v3-stats{grid-template-columns:1fr 1fr;gap:7px}
  #hbg-admin-v3 .hbg-admin-v3-stat{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:100px;text-align:center;padding:10px;gap:4px}
  #hbg-admin-v3 .hbg-admin-v3-stat i{grid-area:1/1/2/2;margin:auto;font-size:24px;padding:5px}
  #hbg-admin-v3 .hbg-admin-v3-stat small{grid-area:2/1/3/2;font-size:10px}
  #hbg-admin-v3 .hbg-admin-v3-stat strong{grid-area:3/1/4/2;font-size:23px}
  #hbg-admin-v3 .hbg-admin-v3-modes{grid-template-columns:1fr}
  #hbg-admin-v3 .hbg-v3-wallet-form-grid{grid-template-columns:1fr}
  #hbg-admin-v3 .hbg-admin-v3-quick-grid{grid-template-columns:1fr 1fr}
  #hbg-admin-v3 .hbg-v3-workspace-head{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   HBG | Spotify V2 — Entrar no Spotify + Minha biblioteca
   Somente a área Spotify; não modifica player Trax ou ADM.
   ============================================================ */
#hbg-jukebox-root .hbg-sp-switch {
  display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px 12px;
  border-bottom:1px solid rgba(217,182,93,.18);background:#151722;
}
#hbg-jukebox-root .hbg-sp-switch button {
  min-width:0;min-height:39px;border:1px solid #3c364d;border-radius:10px;
  background:#232131;color:#d6cfdf;font-size:11px;font-weight:800;cursor:pointer;
}
#hbg-jukebox-root .hbg-sp-switch button[aria-pressed="true"] {
  color:#ffe4a3;background:rgba(217,182,93,.12);border-color:rgba(217,182,93,.58);
}
#hbg-jukebox-root .hbg-sp-switch button[data-hbg-sp-mode="spotify"][aria-pressed="true"] {
  color:#c6ffd2;background:rgba(30,215,96,.10);border-color:rgba(30,215,96,.5);
}
#hbg-jukebox-root.hbg-jb-spotify-selected #hbg-jukebox-panel > :is(
  .hbg-jb-modes,.hbg-jb-now,.hbg-jb-progress-area,.hbg-jb-controls,
  .hbg-jb-volume,.hbg-jb-error,.hbg-jb-catalog,.hbg-jb-footer
){display:none!important}
#hbg-jukebox-root #hbg-sp-area[hidden],#hbg-jukebox-root .hbg-sp-import-legacy[hidden]{display:none!important}
#hbg-jukebox-root .hbg-sp-area{padding:14px;display:flex;flex-direction:column;gap:8px;background:#13151d;color:#eae7f1}
#hbg-jukebox-root .hbg-sp-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:3px}
#hbg-jukebox-root .hbg-sp-heading strong{color:#f3f3f5;font-size:15px}
#hbg-jukebox-root .hbg-sp-heading small{color:#aaa5b7;font-size:10px;line-height:1.45}
#hbg-jukebox-root .hbg-sp-area label{font-size:11px;font-weight:750;color:#d9d0eb}
#hbg-jukebox-root .hbg-sp-area input{
  min-width:0;width:100%;min-height:39px;padding:9px 10px;background:#0d1018;
  border:1px solid #444054;border-radius:9px;color:#f4f0fa;font-size:11px;outline:none;
}
#hbg-jukebox-root .hbg-sp-area input:focus{border-color:#b192e0}
#hbg-jukebox-root .hbg-sp-action-line{display:flex;gap:7px}
#hbg-jukebox-root .hbg-sp-action-line button{
  flex:0 0 auto;border:1px solid #6bb982;border-radius:9px;background:#1d5534;
  color:#e8fff0;font-size:11px;font-weight:850;padding:0 12px;cursor:pointer;
}
#hbg-jukebox-root .hbg-sp-embed{width:100%;overflow:hidden;border-radius:12px}
#hbg-jukebox-root .hbg-sp-embed iframe{width:100%;display:block;border:0;border-radius:12px;background:#191c23}
#hbg-jukebox-root .hbg-sp-open{align-self:flex-start;color:#b9efc9;font-size:11px;text-decoration:underline}
#hbg-jukebox-root .hbg-sp-open[hidden]{display:none!important}
#hbg-jukebox-root .hbg-sp-status{margin:0;min-height:20px;color:#b9cbbf;font-size:11px;line-height:1.45}
#hbg-jukebox-root .hbg-sp-status.is-error{color:#ff9fab}
#hbg-jukebox-root .hbg-sp-saved-heading{display:flex;align-items:baseline;gap:7px;color:#e4d5b2;font-size:10px;font-weight:850;letter-spacing:.04em;margin-top:5px}
#hbg-jukebox-root .hbg-sp-saved-heading small{color:#9893a9;font-weight:400;font-size:10px}
#hbg-jukebox-root .hbg-sp-saved{display:grid;gap:10px}
#hbg-jukebox-root .hbg-sp-library-group{display:grid;gap:6px}
#hbg-jukebox-root .hbg-sp-library-group-title{margin:2px 0;font-size:11px;font-weight:800;color:#d8c8ed}
#hbg-jukebox-root .hbg-sp-saved-row{display:flex;align-items:center;gap:6px;min-width:0}
#hbg-jukebox-root .hbg-sp-saved-row button{border-radius:8px;min-height:33px;cursor:pointer}
#hbg-jukebox-root .hbg-sp-saved-open{flex:1;min-width:0;padding:7px 9px;text-align:left;background:#1c1e2b;border:1px solid #363547;color:#ece5f6;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hbg-jukebox-root .hbg-sp-saved-external{display:grid;place-items:center;flex:0 0 32px;height:33px;background:#182c22;border:1px solid #325a40;border-radius:8px;color:#b1efc1;text-decoration:none;font-size:15px}
#hbg-jukebox-root .hbg-sp-saved-remove{flex:0 0 32px;background:#25202c;border:1px solid #574054;color:#ffb3be;font-size:19px}
#hbg-jukebox-root .hbg-sp-empty,#hbg-jukebox-root .hbg-sp-note,#hbg-jukebox-root .hbg-sp-storage-info{font-size:10px;color:#9d98ac;line-height:1.5;margin:0}
#hbg-jukebox-root .hbg-sp-note{border-top:1px solid #302b3b;padding-top:10px;margin-top:3px}
#hbg-jukebox-root .hbg-sp-account-card{padding:11px 12px;border:1px solid #305e42;border-radius:13px;background:linear-gradient(130deg,rgba(30,215,96,.11),rgba(11,19,18,.86))}
#hbg-jukebox-root .hbg-sp-account-title{display:flex;align-items:center;gap:7px}
#hbg-jukebox-root .hbg-sp-account-dot{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#1ed760;box-shadow:0 0 0 3px rgba(30,215,96,.13)}
#hbg-jukebox-root .hbg-sp-account-title strong{color:#e5fff0;font-size:12px}
#hbg-jukebox-root .hbg-sp-account-card p{color:#c1d9cb;font-size:10px;line-height:1.5;margin:8px 0}
#hbg-jukebox-root .hbg-sp-account-card small{color:#9fb4a6;font-size:9px;line-height:1.5;display:block;margin-top:7px}
#hbg-jukebox-root .hbg-sp-account-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#hbg-jukebox-root .hbg-sp-account-actions a{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;min-width:0;min-height:36px;border:1px solid #3b8756;border-radius:9px;background:#1b683a;color:#effff3;font-size:10px;font-weight:850;padding:7px}
#hbg-jukebox-root .hbg-sp-account-actions a+ a{background:#19291f;color:#c9efd1;border-color:#42604a}
#hbg-jukebox-root .hbg-sp-account-actions a:hover{filter:brightness(1.16)}
#hbg-jukebox-root .hbg-sp-help{border:1px solid #353544;border-radius:9px;background:#191b25;color:#b6b1c0;font-size:10px;line-height:1.55;padding:7px 10px}
#hbg-jukebox-root .hbg-sp-help summary{color:#ddd3e9;cursor:pointer;font-weight:750}
#hbg-jukebox-root .hbg-sp-help ol{padding-left:17px;margin:8px 0 2px}
#hbg-jukebox-root .hbg-sp-help li{margin:0 0 5px}
#hbg-jukebox-root .hbg-sp-help p{margin:7px 0 2px}
#hbg-jukebox-root .hbg-sp-import-legacy{display:flex;flex-direction:column;gap:7px;border:1px dashed #746341;border-radius:10px;padding:9px;color:#d5c1a1;font-size:10px}
#hbg-jukebox-root .hbg-sp-import-legacy button{border:1px solid #8f7445;border-radius:8px;background:#3a2e1d;color:#ffe4aa;padding:7px;font-size:10px;font-weight:800;cursor:pointer}
@media(max-width:400px){#hbg-jukebox-root .hbg-sp-account-actions{grid-template-columns:1fr}#hbg-jukebox-root .hbg-sp-action-line{flex-direction:column}#hbg-jukebox-root .hbg-sp-action-line button{min-height:38px}}
/* FIM HBG SPOTIFY V2 */



/* ============================================================
   HBG DANCAS V5 - Menu por hover / clique + quatro movimentos.
   NAO altera as variaveis de posicao do avatar (em pe -1px).
   CSS separado e adicionado AO FINAL do CSS antigo.
   ============================================================ */
#view-perfil-publico #hbg-avatar-dancas {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: .90 !important;
  width: 100%;
  min-height: 28px;
  padding: 6px 9px;
  color: var(--gold-light, #ffe3a0);
  font-size: 10px;
  font-weight: 700;
}
#view-perfil-publico #hbg-avatar-dancas:hover,
#view-perfil-publico #hbg-avatar-dancas:focus-visible {
  opacity: 1 !important;
}
#view-perfil-publico .hbg-avatar-dancas-grupo {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  flex: 0 0 auto;
  z-index: 300;
}
#view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]) {
  display: block !important;
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 184px;
  max-height: 230px;
  padding: 6px;
  z-index: 500 !important;
  background: #171923;
  border: 1px solid rgba(217,182,93,.55);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
  overflow-y: auto;
  white-space: normal;
}
#view-perfil-publico #hbg-avatar-dancas-menu button {
  width: 100%;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 11px;
  padding: 9px;
}
#view-perfil-publico #hbg-avatar-dancas-menu button[aria-pressed="true"] {
  color: #ffe3a0;
  background: rgba(217,182,93,.14);
}
/* rotate/translate sao propriedades independentes do transform de
   posicionamento aprovado; preservam --hbg-avatar-em-pe: -1px. */
#view-perfil-publico #hbg-public-avatar.hbg-avatar-dancando {
  transform-origin: 50% 90%;
  will-change: translate, rotate, scale;
}
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-1 {
  animation: hbg-passo-habbo .72s steps(4, end) infinite;
}
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-2 {
  animation: hbg-pogo-mogo .50s steps(4, end) infinite;
}
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-3 {
  animation: hbg-duck-funk .80s steps(4, end) infinite;
}
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-4 {
  animation: hbg-rollie .90s steps(6, end) infinite;
}
@keyframes hbg-passo-habbo {
  0%,100% {translate:0 0;rotate:0deg;}
  25% {translate:-3px -4px;rotate:-3deg;}
  50% {translate:0 0;rotate:0deg;}
  75% {translate:3px -4px;rotate:3deg;}
}
@keyframes hbg-pogo-mogo {
  0%,100% {translate:0 0;scale:1 1;}
  50% {translate:0 -9px;scale:1.04 .97;}
}
@keyframes hbg-duck-funk {
  0%,100% {translate:0 0;rotate:0deg;}
  25% {translate:-6px -2px;rotate:-6deg;}
  50% {translate:0 -4px;rotate:1deg;}
  75% {translate:6px -2px;rotate:6deg;}
}
@keyframes hbg-rollie {
  0%,100% {rotate:0deg;translate:0 0;}
  25% {rotate:-9deg;translate:-2px -3px;}
  50% {rotate:0deg;translate:0 -5px;}
  75% {rotate:9deg;translate:2px -3px;}
}
@media (max-width: 640px), (hover: none) {
  #view-perfil-publico #hbg-avatar-dancas {
    padding: 6px 4px;
  }
  #view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]) {
    bottom: calc(100% + 6px) !important;
    width: 170px;
  }
}

/* ============================================================
   HBG DANCAS V6 - alinhamento ao Sentar e menu PARA BAIXO
   Instale APENAS acrescentando ao FINAL do CSS atual (V5).
   Nao altera pose, render, tamanho, JS, jogos, jukebox ou ADM.
   ============================================================ */
/* Os 3 botoes pertencem a uma mesma coluna, com larguras iguais. */
#view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  overflow: visible !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas {
  box-sizing: border-box;
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0;
  min-height: 28px;
  height: auto;
  padding: 6px 3px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo,
#view-perfil-publico .hbg-public-rooms-stack .hbg-avatar-dancas-grupo {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  z-index: 510;
  overflow: visible !important;
}
/* Sobrescreve os antigos menus v5 que abriam PARA CIMA. */
#view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]),
#view-perfil-publico .hbg-avatar-palco #hbg-avatar-dancas-menu:not([hidden]) {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  z-index: 999 !important;
  width: max(182px, 100%);
  max-width: min(210px, 80vw);
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  white-space: normal;
  box-sizing: border-box;
}
/* Ponte invisivel: ocupa os 4px de intervalo entre o botao e o menu,
   mantendo o ponteiro dentro do grupo (nao fecha ao atravessar). */
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo::after {
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  height: 5px;
  width: max(182px, 100%);
  pointer-events: auto;
}
@media (max-width: 640px), (hover: none) {
  #view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]),
  #view-perfil-publico .hbg-avatar-palco #hbg-avatar-dancas-menu:not([hidden]) {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 182px;
    max-width: 80vw;
  }
}
/* O aceno aprovado fica intacto: --hbg-avatar-em-pe permanece -1px. */

/* ===============================================================
   HBG DANCAS V7 — ajuste correto, conforme video 03/11/2026
   Sentar + Dancar LADO A LADO; Acenar abaixo de Sentar.
   O menu aparece ABAIXO do botao Dancar, sem deslocar os demais.
   NAO interfere na imagem, aceno, jogos, jukebox ou painel ADM.
   Instale no FIM ABSOLUTO do CSS da versao V6.
   =============================================================== */
#view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
  display: grid !important;
  grid-template-columns: 96px 96px !important;
  grid-template-rows: minmax(29px,auto) minmax(29px,auto) !important;
  grid-auto-flow: row !important;
  justify-content: start !important;
  justify-items: stretch !important;
  align-items: start !important;
  gap: 5px 6px !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  overflow: visible !important;
  white-space: nowrap !important;
  z-index: 510 !important;
}
#view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes.hidden {
  display: none !important;
}
/* Forca a posicao sem depender da ordem de criacao no JS. */
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  display: block !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  z-index: 999 !important;
  overflow: visible !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar {
  grid-column: 1 !important;
  grid-row: 2 !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas {
  display: inline-flex !important;
  box-sizing: border-box !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  min-height: 29px !important;
  height: 29px !important;
  margin: 0 !important;
  padding: 5px 4px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  border-radius: 7px !important;
}
/* Substitui os top/bottom da V5 e V6 sem tocar nas dancas. */
#view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]),
#view-perfil-publico .hbg-avatar-palco #hbg-avatar-dancas-menu:not([hidden]) {
  display: block !important;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  width: 186px !important;
  max-width: min(220px, 78vw) !important;
  z-index: 9999 !important;
  white-space: normal !important;
  overflow-y: auto !important;
}
#view-perfil-publico #hbg-avatar-dancas-menu[hidden] {
  display: none !important;
}
/* Zona de transicao do hover: o cursor cruza 4px sem fechar. */
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 186px !important;
  height: 5px !important;
  z-index: 9998 !important;
  pointer-events: auto !important;
}
#view-perfil-publico .hbg-public-rooms-stack,
#view-perfil-publico .hbg-public-actions,
#view-perfil-publico .hbg-public-hero {
  overflow: visible !important;
}
@media (max-width: 640px) {
  #view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
    grid-template-columns: 76px 76px !important;
    gap: 4px 4px !important;
  }
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo,
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar,
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar,
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    font-size: 9px !important;
  }
  #view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]) {
    top: calc(100% + 4px) !important;
    bottom: auto !important;
    left: 0 !important;
    transform: none !important;
    width: 164px !important;
  }
}
/* A altura em pe -1px e o estado Sentar continuam intocados. */

/* HBG DANÇAS V8 - usa ANIMAÇÕES REAIS, remove os movimentos CSS da V5.
   Não modifica o layout V7 (Sentar e Dançar lado a lado), nem -1px. */
#view-perfil-publico #hbg-public-avatar.hbg-avatar-dancando,
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-1,
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-2,
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-3,
#view-perfil-publico #hbg-public-avatar.hbg-avatar-danca-4 {
  animation: none !important;
  translate: 0 0 !important;
  rotate: 0deg !important;
  scale: 1 !important;
}

/* ================================================================
   HBG V11 — Fundo do usuário em todas as páginas + Zoom alinhado
   Acrescentar AO FINAL do CSS. Não toca no avatar nem no aceno.
   ================================================================ */

/* Fundo adquirido na Loja: vale para toda a navegação da conta.
   Ao abrir o perfil de outra pessoa, o JS aplica temporariamente
   o fundo dela; ao sair, volta ao fundo do usuário conectado. */
body.hbg-shop-wallpaper-on {
  background-image:
    linear-gradient(135deg,rgba(11,13,24,.28),rgba(11,14,25,.38)),
    var(--hbg-shop-wallpaper-url) !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  background-size: cover, auto !important;
  background-attachment: fixed, fixed !important;
}

/* Zoom de foto: o avatar/nick/data abrem no topo, na mesma altura
   da engrenagem. Cabeçalho não reserva uma faixa vazia acima. */
#image-zoom-modal .hbg-gallery-topic-side {
  position: relative !important;
  padding-top: 19px !important;
}
#image-zoom-modal .hbg-gallery-topic-header {
  position: absolute !important;
  top: 37px !important;
  right: 23px !important;
  width: auto !important;
  height: 42px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  z-index: 35 !important;
}
#image-zoom-modal .hbg-gallery-topic-badge { display:none !important; }
#image-zoom-modal .hbg-zoom-author-row {
  margin: 0 58px 12px 0 !important;
  min-height: 76px;
  align-items: center !important;
}
#image-zoom-modal .hbg-zoom-header {
  margin: 0 0 12px !important;
  padding: 0 !important;
}
#image-zoom-modal .hbg-zoom-header h2 { margin: 0 0 6px !important; }
#image-zoom-modal .hbg-zoom-header p { margin: 0 !important; }
@media(max-width:640px){
  #image-zoom-modal .hbg-gallery-topic-side {padding-top: 13px !important;}
  #image-zoom-modal .hbg-gallery-topic-header {top: 24px !important;right: 15px !important;}
  #image-zoom-modal .hbg-zoom-author-row {min-height:58px;margin-right:52px!important;margin-bottom:10px!important;}
  #image-zoom-modal .hbg-zoom-avatar {width:58px!important;height:58px!important;flex-basis:58px!important;}
}


/* ============================================================
   HBG AVATAR V12 — SENTAR | ACENAR | DANÇAR, LADO A LADO
   Mantém a altura do avatar em pé (-1px), holofote e estado sentado.
   ============================================================ */
#view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
  display: grid !important;
  grid-template-columns: repeat(3, 76px) !important;
  grid-template-rows: 29px !important;
  grid-auto-flow: row !important;
  gap: 5px !important;
  width: max-content !important;
  overflow: visible !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: block !important;
  position: relative !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  overflow: visible !important;
}
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar,
#view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 29px !important;
  font-size: 9px !important;
  margin: 0 !important;
}
#view-perfil-publico #hbg-avatar-dancas-menu:not([hidden]) {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  z-index: 9999 !important;
}
@media (max-width: 640px) {
  #view-perfil-publico .hbg-public-rooms-stack > #hbg-avatar-acoes {
    grid-template-columns: repeat(3, 68px) !important;
    gap: 4px !important;
  }
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas-grupo,
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-sentar,
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-acenar,
  #view-perfil-publico .hbg-public-rooms-stack #hbg-avatar-dancas {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    font-size: 8px !important;
  }
}


/* ==========================================================
   HBG | CENTRAL DE AJUDA + TERMOS | CSS ADICIONAL
   Coloque no FINAL do painel CSS do CodePen. Não remova CSS.
   ========================================================== */

.hbg-help-nav{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:0;border-radius:10px;background:transparent;color:var(--muted,#a7a3b6);font:inherit;font-weight:600;cursor:pointer;transition:.2s}
.hbg-help-nav:hover,.hbg-help-nav:focus-visible{color:var(--gold-light,#ffe3a0);background:rgba(217,182,93,.1);outline:0}
.hbg-help-nav i{color:var(--gold,#d9b65d);font-size:19px}

.hbg-legal-overlay{position:fixed;inset:0;z-index:999991;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,5,11,.86);backdrop-filter:blur(10px);overflow:auto}
.hbg-legal-overlay.hidden{display:none!important}
body.hbg-legal-open{overflow:hidden}
.hbg-help-window,.hbg-terms-window{position:relative;max-height:min(90vh,900px);overflow:hidden;background:#161821;border:1px solid rgba(217,182,93,.3);box-shadow:0 28px 90px rgba(0,0,0,.65);color:#f4effa;font-family:Inter,system-ui,sans-serif}
.hbg-help-window{width:min(100%,1010px);border-radius:19px;display:flex;flex-direction:column}
.hbg-help-header{display:flex;align-items:center;gap:18px;padding:26px 31px;background:radial-gradient(circle at 4% 0%,rgba(168,121,220,.17),transparent 50%),linear-gradient(110deg,#201c2d,#161821);border-bottom:1px solid #343042;flex-shrink:0}
.hbg-help-symbol{width:65px;height:65px;display:grid;place-items:center;flex-shrink:0;border:1px solid #8b7049;border-radius:13px;background:#2c2535;color:#f4cb78;box-shadow:inset 0 0 0 4px #221e2c}
.hbg-help-symbol i{font-size:32px}
.hbg-help-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:#e2b95b;text-transform:uppercase}
.hbg-help-header h2{margin:4px 0;font-size:28px;line-height:1.12;font-weight:800;color:#fff}
.hbg-help-header p{margin:4px 0 0;font-size:13px;color:#b4afc3}
.hbg-legal-close{width:35px;height:35px;display:grid;place-items:center;margin-left:auto;flex-shrink:0;border:1px solid #454052;border-radius:9px;background:#272431;color:#ded9e8;font-size:18px;cursor:pointer}
.hbg-legal-close:hover{border-color:#d9b65d;color:#f8d68d}
.hbg-help-layout{min-height:0;flex:1;display:grid;grid-template-columns:232px minmax(0,1fr)}
.hbg-help-tabs{display:flex;flex-direction:column;gap:8px;padding:24px 14px;background:#12141d;border-right:1px solid #302d3b}
.hbg-help-tab{display:flex;align-items:center;gap:11px;width:100%;padding:14px 13px;border:1px solid transparent;border-radius:10px;color:#a9a5b9;background:transparent;text-align:left;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}
.hbg-help-tab i{font-size:19px;color:#a981ca}
.hbg-help-tab:hover{color:#fff;background:#22202c}
.hbg-help-tab.is-active{border-color:rgba(217,182,93,.25);color:#ffe3a0;background:linear-gradient(100deg,rgba(217,182,93,.14),rgba(168,121,220,.08));box-shadow:inset 3px 0 #d9b65d}
.hbg-help-tab.is-active i{color:#eac472}
.hbg-help-content{min-height:0;overflow-y:auto;padding:30px 34px 36px;scrollbar-width:thin;scrollbar-color:#7a658e transparent}
.hbg-help-page[hidden]{display:none!important}
.hbg-help-page h3{font-size:22px;margin:12px 0;color:#fff;line-height:1.3}
.hbg-help-page h4{margin:26px 0 14px;font-size:16px;color:#f5e4b7}
.hbg-help-page p{color:#c0bbca;font-size:14px;line-height:1.65;margin:10px 0}
.hbg-help-pill{display:inline-block;padding:6px 10px;border:1px solid rgba(217,182,93,.3);border-radius:6px;color:#e4c17b;background:rgba(217,182,93,.08);font-size:10px;font-weight:800;letter-spacing:1.4px}
.hbg-help-intro{border-left:3px solid #d9b65d;padding:2px 0 4px 17px}
.hbg-help-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:23px 0 26px}
.hbg-help-cards article{padding:16px 13px;min-width:0;border:1px solid #3a3446;border-radius:11px;background:linear-gradient(140deg,#211e2a,#1a1a24)}
.hbg-help-cards article i{display:block;margin-bottom:12px;color:#d9b65d;font-size:28px}
.hbg-help-cards article strong{display:block;color:#f4e0b5;font-size:12px;line-height:1.45}
.hbg-help-cards article p{font-size:12px;line-height:1.5;margin-bottom:0}
.hbg-help-faq{margin:9px 0;padding:0;border:1px solid #3a3648;border-radius:11px;background:#1e202b}
.hbg-help-faq summary{position:relative;list-style:none;cursor:pointer;padding:17px 41px 17px 17px;color:#eeeaf2;font-size:13px;font-weight:700;line-height:1.5}
.hbg-help-faq summary::-webkit-details-marker{display:none}
.hbg-help-faq summary:after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:#d9b65d;font-weight:400}
.hbg-help-faq[open] summary:after{content:'−'}
.hbg-help-faq[open] summary{color:#f7d58e}
.hbg-help-faq>p{margin:0;padding:0 17px 17px}
.hbg-help-warning{display:flex;gap:13px;margin:24px 0;padding:16px;border:1px solid #6a5235;border-radius:11px;background:rgba(217,182,93,.09)}
.hbg-help-warning>i{font-size:26px;color:#e7c276;flex-shrink:0}
.hbg-help-warning strong{font-size:14px;color:#ffe3a0}
.hbg-help-warning p{margin:5px 0 0;font-size:13px}
.hbg-help-terms-list{display:grid;gap:9px;margin:17px 0}
.hbg-help-terms-list>p{margin:0;padding:12px 15px;border:1px solid #35313e;border-radius:9px;background:#1c1d27}
.hbg-help-terms-list strong{color:#f7db9e}
.hbg-help-source a{color:#edc879;text-decoration:underline;text-underline-offset:3px}
.hbg-help-bottom{display:flex;justify-content:space-between;gap:10px;padding:14px 28px;border-top:1px solid #332f3e;background:#14141e;color:#8f8a9e;font-size:10px;font-weight:800;letter-spacing:1px}

/* JANELA ANTES DO LOGIN */
.hbg-terms-window{width:min(100%,520px);max-height:90vh;overflow-y:auto;padding:34px 34px 26px;border-radius:19px;text-align:center}
.hbg-terms-x{position:absolute;top:17px;right:17px}
.hbg-terms-crest{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 14px;border:1px solid #ad8350;border-radius:18px;color:#f3cb7c;background:radial-gradient(circle,#4a3547,#272131);box-shadow:0 5px 25px rgba(217,182,93,.09)}
.hbg-terms-crest i{font-size:37px}
.hbg-terms-window h2{font-size:25px;line-height:1.18;color:#fff;margin:10px auto 13px;max-width:340px}
.hbg-terms-lead{font-size:14px;line-height:1.7;color:#c4bece;margin:0 0 20px}
.hbg-terms-lead strong{color:#f2d493}
.hbg-terms-points{display:grid;gap:12px;padding:17px;border:1px solid #3d3748;border-radius:12px;background:#1b1b28;text-align:left}
.hbg-terms-points>div{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:#ddd7e7}
.hbg-terms-points i{margin-top:2px;flex-shrink:0;font-size:18px;color:#d4b36e}
.hbg-terms-read{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:13px;margin:12px 0 18px;border:1px solid rgba(168,121,220,.25);border-radius:10px;color:#d2aafc;background:rgba(168,121,220,.08);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hbg-terms-read:hover{background:rgba(168,121,220,.16)}
.hbg-terms-check{display:flex;gap:11px;align-items:flex-start;text-align:left;font-size:12px;line-height:1.55;color:#d4cedf;cursor:pointer}
.hbg-terms-check input{margin:3px 0 0;flex-shrink:0;width:17px;height:17px;accent-color:#d9b65d}
.hbg-terms-check strong{color:#ffe3a0}
.hbg-terms-primary{width:100%;margin-top:18px;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;color:#241a08;background:linear-gradient(105deg,#ffe4a2,#d9b65d);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.hbg-terms-primary:disabled{opacity:.4;cursor:not-allowed}
.hbg-terms-later{display:block;width:100%;padding:12px;border:0;background:none;color:#aaa4b5;font:inherit;font-size:13px;cursor:pointer}
.hbg-terms-window>small{display:block;color:#8e8a9b;font-size:10px;letter-spacing:.5px}

/* AVISO PERMANENTE */
.hbg-independent-footer{width:min(1180px,calc(100% - 40px));margin:8px auto 28px;padding:18px 20px 15px;border-top:1px solid rgba(217,182,93,.22);text-align:center;color:#9894aa;font-family:Inter,system-ui,sans-serif;font-size:11px;line-height:1.55}
.hbg-independent-footer>span{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:#cfbb8e}
.hbg-independent-footer>span i{font-size:17px}
.hbg-independent-footer>p{max-width:890px;margin:8px auto 6px}
.hbg-independent-footer>button{padding:6px 12px;border:0;background:none;color:#c5a65d;cursor:pointer;font:inherit;font-weight:700}
.hbg-login-security-tip{display:flex;align-items:flex-start;gap:8px;margin:12px 0!important;padding:10px;border:1px solid rgba(217,182,93,.25);border-radius:8px;background:rgba(217,182,93,.07);color:#e5c883!important;font-size:12px!important;line-height:1.5!important}
.hbg-login-security-tip i{font-size:19px;flex-shrink:0}

@media(max-width:740px){
  .hbg-legal-overlay{padding:10px}
  .hbg-help-window{max-height:94vh}
  .hbg-help-header{gap:11px;padding:16px}
  .hbg-help-symbol{width:45px;height:45px}
  .hbg-help-header h2{font-size:21px}
  .hbg-help-header p{font-size:11px}
  .hbg-help-layout{display:flex;flex-direction:column}
  .hbg-help-tabs{flex-direction:row;overflow-x:auto;gap:5px;padding:10px;border-right:0;border-bottom:1px solid #302d3b;flex-shrink:0}
  .hbg-help-tab{min-width:max-content;width:auto;padding:10px;font-size:12px}
  .hbg-help-content{padding:18px;overflow-y:auto}
  .hbg-help-cards{grid-template-columns:1fr}
  .hbg-help-cards article{padding:13px}
  .hbg-help-bottom{padding:10px 15px;flex-wrap:wrap;font-size:9px}
  .hbg-terms-window{padding:28px 19px 20px}
  .hbg-help-nav{padding:9px 8px}
}


/* ===========================================================
   HBG | AJUDA COMO PÁGINA INTEIRA | V2
   ACRESCENTAR AO FINAL do CSS atual (depois do V1).
   Mantém a janela de termos e o rodapé inalterados.
   =========================================================== */

/* Item Ajuda no menu do perfil; sem afetar o botão Sair. */
.dropdown-menu .hbg-help-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Página dentro da estrutura do site, não um modal/overlay. */
#view-ajuda.hbg-help-view { padding: 0 0 32px; }
#view-ajuda.hbg-help-view.hidden,
#view-ajuda .hbg-help-page-surface.hidden { display: none !important; }
#view-ajuda .hbg-help-page-surface { display: block; width: 100%; }
#view-ajuda .hbg-help-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: none;
  min-height: 610px;
  margin: 0;
  overflow: visible;
  border-radius: 18px;
}
#view-ajuda .hbg-help-header { padding: 31px 35px; }
#view-ajuda .hbg-help-header h2 { font-size: clamp(26px,3vw,36px); }
#view-ajuda .hbg-help-layout {
  display: grid;
  grid-template-columns: 248px minmax(0,1fr);
  min-height: 490px;
  flex: 1 1 auto;
}
#view-ajuda .hbg-help-tabs { padding: 24px 16px; }
#view-ajuda .hbg-help-content {
  padding: 32px clamp(20px,4vw,48px) 44px;
  overflow: visible;
  min-width: 0;
}
#view-ajuda .hbg-help-back {
  width: auto;
  height: auto;
  padding: 10px 13px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
#view-ajuda .hbg-help-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
#view-ajuda .hbg-help-bottom { margin-top: auto; }

@media (max-width: 760px) {
  #view-ajuda .hbg-help-window { min-height: 0; }
  #view-ajuda .hbg-help-header { padding: 18px 15px; }
  #view-ajuda .hbg-help-header h2 { font-size: 23px; }
  #view-ajuda .hbg-help-back { padding: 9px 10px; }
  #view-ajuda .hbg-help-layout { display: flex; flex-direction: column; min-height: 0; }
  #view-ajuda .hbg-help-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid #302d3b;
  }
  #view-ajuda .hbg-help-content { padding: 22px 16px 28px; }
  #view-ajuda .hbg-help-cards { grid-template-columns: 1fr; }
}



/* ================================================================
  HBG — CENTRAL DE AJUDA ILUSTRADA V4 (VISUAL DA PRÉVIA APROVADA)
  Escopo da página para não alterar Fórum, Perfil, login ou Jukebox.
================================================================ */

#view-ajuda.hbg-help-v4 {
  --help-gold:#ffcf61;
  --help-purple:#b978f2;
  padding-bottom:36px;
}
#view-ajuda.hbg-help-v4 .hbg-help-page-surface {display:block;width:100%;background:transparent;position:static;padding:0;}
#view-ajuda.hbg-help-v4 .hbg-help-window {width:100%;max-height:none;margin:0;display:block;overflow:visible;min-height:0;border:0;background:transparent;box-shadow:none;}
#view-ajuda.hbg-help-v4 .hbg-help-content {display:block;padding:0;overflow:visible;background:transparent;}
#view-ajuda.hbg-help-v4 .hbg-help-topline {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;color:var(--muted,#a09bac);font-size:11px;letter-spacing:.12em;font-weight:800;}
#view-ajuda.hbg-help-v4 .hbg-help-back {display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:8px 13px;border:1px solid rgba(217,182,93,.35);border-radius:10px;color:#ffe3a0;background:#252237;font-size:13px;font-weight:800;cursor:pointer;}
#view-ajuda.hbg-help-v4 .hbg-help-back:hover {background:#3c3054;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-v4 {position:relative;min-height:228px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr);gap:8px;align-items:stretch;overflow:hidden;border:1px solid rgba(164,105,224,.5);border-radius:18px;background:linear-gradient(135deg,#271843 0%,#29173f 48%,#121423 100%);}
#view-ajuda.hbg-help-v4 .hbg-help-hero-v4:before {content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(129,77,225,.22),transparent 55%);pointer-events:none;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-text {position:relative;z-index:1;padding:31px 0 30px 32px;align-self:center;min-width:0;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-eyebrow {display:flex;align-items:center;gap:10px;color:#fbd477;font-size:10px;font-weight:850;letter-spacing:.25em;margin-bottom:19px;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-eyebrow span {width:34px;height:2px;background:#efc85a;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-v4 h1 {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 10px;color:#fff;font-size:clamp(29px,3.5vw,44px);line-height:1.15;font-weight:850;letter-spacing:-.035em;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-v4 h1 em {color:var(--help-gold);font-style:normal;}
#view-ajuda.hbg-help-v4 .hbg-help-question-icon {width:54px;height:48px;display:grid;place-items:center;flex-shrink:0;border:3px solid #f3a626;border-radius:15px;background:linear-gradient(#ffdf7e,#eba420);color:#4f2b8a;font-size:33px;font-weight:1000;box-shadow:0 4px 0 #70471c;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-v4 p {max-width:520px;margin:0;color:#e5dfef;font-size:15px;line-height:1.55;}
#view-ajuda.hbg-help-v4 .hbg-help-hero-image {display:block;align-self:stretch;width:100%;height:100%;min-height:226px;max-height:270px;object-fit:cover;object-position:center;image-rendering:auto;mask-image:linear-gradient(90deg,transparent,black 17%);}
#view-ajuda.hbg-help-v4 .hbg-help-tabs {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:16px 0 18px;padding:0;border:0;background:transparent;box-shadow:none;position:static;min-height:0;max-width:none;overflow:visible;}
#view-ajuda.hbg-help-v4 .hbg-help-tab {display:inline-flex;gap:7px;align-items:center;padding:9px 12px;border-radius:10px;border:1px solid rgba(160,113,224,.23);color:#c7bfd8;background:#1b1a2b;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;flex:0 0 auto;}
#view-ajuda.hbg-help-v4 .hbg-help-tab.is-active {color:#ffdf91;border-color:#9970d3;background:#392455;box-shadow:inset 0 -2px #ffcf61;}
#view-ajuda.hbg-help-v4 .hbg-help-panel {display:block;}
#view-ajuda.hbg-help-v4 .hbg-help-panel[hidden],
#view-ajuda.hbg-help-v4 [data-hbg-panel][hidden] {display:none!important;}
#view-ajuda.hbg-help-v4 .hbg-help-cards-v4 {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;}
#view-ajuda.hbg-help-v4 .hbg-help-tile {min-width:0;overflow:hidden;border:1px solid #6a5383;border-radius:14px;background:linear-gradient(180deg,#26203d 0%,#171922 100%);transition:transform .18s ease,border-color .18s;box-shadow:0 8px 24px #0005;cursor:pointer;}
#view-ajuda.hbg-help-v4 .hbg-help-tile:hover,#view-ajuda.hbg-help-v4 .hbg-help-tile:focus-visible {transform:translateY(-2px);border-color:#d4aa5d;outline:0;}
#view-ajuda.hbg-help-v4 .hbg-help-tile>img {width:100%;height:143px;object-fit:cover;display:block;image-rendering:auto;border-bottom:1px solid #50406b;}
#view-ajuda.hbg-help-v4 .hbg-help-tile-body {padding:15px 14px 17px;}
#view-ajuda.hbg-help-v4 .hbg-help-tile h2 {display:flex;gap:8px;align-items:flex-start;min-height:44px;margin:0 0 10px;color:#fff;font-size:15px;font-weight:850;line-height:1.3;}
#view-ajuda.hbg-help-v4 .hbg-help-tile h2 i {flex:0 0 auto;color:var(--help-gold);font-size:19px;}
#view-ajuda.hbg-help-v4 .hbg-help-tile p {color:#d6d3df;font-size:13px;line-height:1.52;margin:0;}
#view-ajuda.hbg-help-v4 .hbg-help-cta-v4 {display:grid;grid-template-columns:138px 1fr auto;gap:18px;align-items:center;margin:22px 0 22px;border:2px solid #d5a656;border-radius:14px;overflow:hidden;padding:0 20px 0 0;background:linear-gradient(115deg,#4b246d,#6a2da4 48%,#231537);}
#view-ajuda.hbg-help-v4 .hbg-help-cta-v4>img {display:block;width:138px;height:108px;object-fit:cover;object-position:center;mix-blend-mode:lighten;}
#view-ajuda.hbg-help-v4 .hbg-help-cta-copy h2 {margin:0 0 6px;color:#ffd570;font-size:clamp(20px,2.6vw,29px);line-height:1.2;font-weight:900;}
#view-ajuda.hbg-help-v4 .hbg-help-cta-copy p {margin:0;font-size:14px;color:#f0e5fd;line-height:1.45;}
#view-ajuda.hbg-help-v4 .hbg-help-cta-button {display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 15px;border:2px solid #895e15;border-radius:12px;color:#291b07;background:linear-gradient(#ffe49b,#ffb82b);font-weight:900;font-size:15px;white-space:nowrap;cursor:pointer;box-shadow:0 3px 0 #704719;}
#view-ajuda.hbg-help-v4 .hbg-help-cta-button:hover {filter:brightness(1.09);}
#view-ajuda.hbg-help-v4 .hbg-help-heading {display:flex;align-items:center;gap:13px;margin:0 0 16px;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-icon {width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:13px;color:#edc4ff;border:2px solid #9560bf;background:#50306a;font-size:25px;}
#view-ajuda.hbg-help-v4 .hbg-help-heading h2 {margin:0;color:#fff;font-size:clamp(25px,3vw,34px);font-weight:900;}
#view-ajuda.hbg-help-v4 .hbg-help-heading p {margin:2px 0 0;color:#a9a3b8;font-size:14px;}
#view-ajuda.hbg-help-v4 .hbg-help-accordion {display:grid;gap:9px;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row {border:1px solid #555168;border-radius:9px;background:linear-gradient(#29283a,#1b1c29);overflow:hidden;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row[open] {border-color:#9362bb;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row summary {display:flex;align-items:center;justify-content:space-between;list-style:none;gap:16px;padding:13px 17px;color:#f8f4fa;font-weight:800;font-size:15px;cursor:pointer;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row summary::-webkit-details-marker {display:none;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row[open] summary {background:linear-gradient(90deg,#6d418b,#4f316f);}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row summary i {transition:transform .2s;}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row[open] summary i {transform:rotate(180deg);}
#view-ajuda.hbg-help-v4 .hbg-help-faq-row p {padding:13px 17px 16px;margin:0;color:#d7d4e4;font-size:14px;line-height:1.55;}
#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 {display:flex;align-items:center;gap:18px;margin:27px 0 0;padding:14px 20px;border:1px solid #509ccc;border-radius:13px;background:linear-gradient(115deg,#234265,#17263d);}
#view-ajuda.hbg-help-v4 .hbg-help-disc-icon {width:57px;height:57px;flex:0 0 57px;display:grid;place-items:center;border:2px solid #7fcefb;border-radius:18px;color:#c1eeff;background:#315b7f;font-size:31px;}
#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 div {flex:1;}
#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 h2 {margin:0 0 5px;color:#fff;font-size:19px;}
#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 p {margin:0;color:#d0e4f5;line-height:1.5;font-size:13px;}
#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 img {width:120px;height:81px;object-fit:cover;border-radius:7px;mix-blend-mode:lighten;}
#view-ajuda.hbg-help-v4 .hbg-help-bottom {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:12px;padding:12px 8px;color:#aea6c3;border-top:1px solid #2b2540;background:transparent;font-size:11px;letter-spacing:.06em;}
#view-ajuda.hbg-help-v4 .hbg-help-page[data-hbg-panel] {max-width:none;background:#191825;border:1px solid #57406f;border-radius:14px;padding:26px;margin:0;}
#view-ajuda.hbg-help-v4 .hbg-help-page h3 {color:#fff;}
#view-ajuda.hbg-help-v4 .hbg-help-page p {color:#ddd7ee;line-height:1.6;}
#view-ajuda.hbg-help-v4 .hbg-help-page .hbg-help-terms-list {background:transparent;}
#view-ajuda.hbg-help-v4 .hbg-help-page .hbg-help-faq {border-color:#554a68;}
@media(max-width:1100px) {#view-ajuda.hbg-help-v4 .hbg-help-cards-v4 {grid-template-columns:repeat(2,minmax(0,1fr));} #view-ajuda.hbg-help-v4 .hbg-help-tile>img {height:190px;} }
@media(max-width:760px) {#view-ajuda.hbg-help-v4 .hbg-help-hero-v4 {grid-template-columns:1fr;}#view-ajuda.hbg-help-v4 .hbg-help-hero-text {padding:24px 22px 6px;}#view-ajuda.hbg-help-v4 .hbg-help-hero-image {min-height:165px;max-height:175px;mask-image:linear-gradient(180deg,transparent,black 10%);}#view-ajuda.hbg-help-v4 .hbg-help-tabs {flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;}#view-ajuda.hbg-help-v4 .hbg-help-cta-v4 {grid-template-columns:78px 1fr;padding:10px;}#view-ajuda.hbg-help-v4 .hbg-help-cta-v4>img {width:78px;height:88px;grid-row:span 2;}#view-ajuda.hbg-help-v4 .hbg-help-cta-button {grid-column:2;}#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 img {display:none;} }
@media(max-width:520px) {#view-ajuda.hbg-help-v4 .hbg-help-cards-v4 {grid-template-columns:1fr;}#view-ajuda.hbg-help-v4 .hbg-help-tile>img {height:190px;}#view-ajuda.hbg-help-v4 .hbg-help-hero-v4 h1 {font-size:29px;}#view-ajuda.hbg-help-v4 .hbg-help-hero-eyebrow {font-size:9px;letter-spacing:.1em;}#view-ajuda.hbg-help-v4 .hbg-help-hero-eyebrow span {width:12px;}#view-ajuda.hbg-help-v4 .hbg-help-cta-copy h2 {font-size:19px;}#view-ajuda.hbg-help-v4 .hbg-help-cta-copy p {font-size:12px;}#view-ajuda.hbg-help-v4 .hbg-help-disclaimer-v4 {align-items:flex-start;}#view-ajuda.hbg-help-v4 .hbg-help-disc-icon {width:44px;height:44px;flex-basis:44px;}#view-ajuda.hbg-help-v4 .hbg-help-page[data-hbg-panel] {padding:15px;} }

/* Correção final: botões de abas lado a lado, sem largura herdada do tema anterior. */
#view-ajuda.hbg-help-v4 .hbg-help-tabs .hbg-help-tab {width:auto !important;max-width:100%;flex:0 0 auto !important;}

/* ===========================================================
   HBG | CENTRAL DE AJUDA — ABAS NA MESMA LINHA | V4.1
   Substitui somente a orientacao vertical herdada da Ajuda V1.
   =========================================================== */
#view-ajuda.hbg-help-v4 .hbg-help-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  scrollbar-width: thin;
}

#view-ajuda.hbg-help-v4 .hbg-help-tabs > .hbg-help-tab {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 800px) {
  #view-ajuda.hbg-help-v4 .hbg-help-tabs {
    justify-content: flex-start;
    padding-bottom: 8px;
  }
}



/* ============================================================
   HBG V6 – FAST-FOOD NA ABA JOGOS (ESTILOS ISOLADOS)
   ============================================================ */
#view-jogos{max-width:1500px;margin:0 auto;padding-bottom:30px}
.hbg-ff-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 18px;padding:22px 24px;border-radius:17px;border:1px solid rgba(217,182,93,.22);background:linear-gradient(125deg,#211a32,#11141e)}
.hbg-ff-kicker{font-size:11px;font-weight:800;letter-spacing:2px;color:#d6b35f}
.hbg-ff-head h1{font-size:clamp(24px,3vw,40px);letter-spacing:-.6px;margin:8px 0 6px;color:#f8f1ff}
.hbg-ff-head h1 span{color:#d9b65d}
.hbg-ff-head p{color:#bcb4ca;margin:0;font-size:14px;line-height:1.6}
.hbg-ff-reload{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #987445;border-radius:12px;background:#302842;color:#f5d889;padding:11px 16px;font-weight:800;cursor:pointer}
.hbg-ff-reload:hover{background:#413157}
.hbg-ff-frame-shell{position:relative;border:1px solid #514066;border-radius:16px;overflow:hidden;background:#0b0f18;box-shadow:0 18px 45px #0007}
.hbg-ff-frame-shell iframe{display:block;box-sizing:border-box;width:100%;height:clamp(520px,65vw,980px);border:0;background:#0b0f18}
.hbg-ff-status{position:absolute;left:12px;right:12px;top:9px;z-index:2;padding:8px 12px;border-radius:8px;background:#302942;color:#eee3ff;font-size:12px;pointer-events:none}
.hbg-ff-status[hidden]{display:none!important}
.hbg-ff-legal{font-size:12px;color:#9792a8;margin-top:13px}
@media (max-width:850px){.hbg-ff-head{padding:16px;align-items:flex-start;flex-direction:column}.hbg-ff-frame-shell iframe{height:610px}}


/* =============================================================
   HBG V7.1 — FALLBACK PARA O BOTÃO DE QUARTOS DO PERFIL
   Preserva o ícone pixel quando o asset externo carrega.
   Se falhar, usa o ícone Phosphor e o texto já existente no HTML.
   Não interfere em avatar, Estatísticas, Ajuda ou Fast-Food.
   ============================================================= */
#view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary.hbg-rooms-icon-fallback {
  font-size: 10px !important;
  line-height: 1.15 !important;
  flex-direction: column !important;
  gap: 3px !important;
  text-align: center !important;
  white-space: normal !important;
}
#view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary.hbg-rooms-icon-fallback::before {
  display: none !important;
  content: none !important;
}
#view-perfil-publico .hbg-public-rooms-stack > a.hbg-public-btn-primary.hbg-rooms-icon-fallback > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gold-light, #ffe3a0);
  font-size: 22px !important;
  line-height: 1 !important;
}

/* HBG 1 — Ocultar cabeçalho do Fast-Food */
#view-jogos .hbg-ff-head {
  display: none !important;
}


/* ============================================================
   HBG R15.0 — Lançamento: correção do botão Ajuda do menu.
   O button tem fundo branco padrão do navegador sem este ajuste.
   ============================================================ */
.dropdown-menu button#hbg-help-open.hbg-help-dropdown-item {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted, #9996ad);
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  border-radius: 8px;
}
.dropdown-menu button#hbg-help-open.hbg-help-dropdown-item:hover,
.dropdown-menu button#hbg-help-open.hbg-help-dropdown-item:focus-visible {
  color: var(--gold-light, #ffe3a0);
  background: #2a2238;
  outline: 1px solid rgba(168,121,220,.28);
}
.dropdown-menu button#hbg-help-open.hbg-help-dropdown-item i {
  color: var(--purple-light, #bd8cff);
}

/* Bordas em TODOS os painéis da navegação HBG, sem mudar os perfis alheios.
   O tema é pessoal, visível na conta conectada — não altera o CSS público. */
body[data-hbg-site-border="gold"] { --hbg-global-border: #d9b65d; }
body[data-hbg-site-border="purple"] { --hbg-global-border: #a879dc; }
body[data-hbg-site-border="subtle"] { --hbg-global-border: #292b3a; }
body[data-hbg-site-border="none"] { --hbg-global-border: transparent; }
body[data-hbg-site-border] :is(
  #view-inicio,#view-galeria,#view-forum,#view-jogos,
  #view-postar,#view-ajuda,#view-adm
) :is(
  .hbg-hero, .builders-hall, .builder-card, .room-card,
  .hbg-forum-sidebar-card, .hbg-forum-header, .hbg-forum-topic-card,
  .hbg-forum-post, .hbg-forum-topic, .hbg-forum-card,
  .form-card, .hbg-help-hero-v4, .hbg-help-tile,
  .hbg-help-faq-row, .hbg-help-cta-v4, .hbg-help-disclaimer-v4,
  .hbg-adm-panel, .hbg-adm-hero, .hbg-stats-panel,
  .featured-room, .gallery-card, .gallery-item,
  .hbg-highlight-card, .hbg-game-card
) {
  border: 1px solid var(--hbg-global-border) !important;
}
/* Containers permanentes do usuário: notificações, carteira e menus. */
body[data-hbg-site-border] :is(
  .navbar, .hbg-notif-dropdown, .hbg-wallet-modal,
  .hbg-settings-dialog, .hbg-shop-panel
) {
  border-color: var(--hbg-global-border) !important;
}

/* BARRA DE EDIÇÃO: escopo independente para Bordas. */
.hbg-editor-v8 .hbg-editor-v2-border-scope {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 2px 0 7px;
}
.hbg-editor-v8 .hbg-editor-v2-border-scope strong {
  color: #e9d5fd; font-size: 11px; margin-right: 6px;
}
.hbg-editor-v8 .hbg-editor-v2-border-scope button {
  color: #cec3da; background: #242036;
  border: 1px solid #4e405f; border-radius: 8px;
  padding: 6px 10px; font-size: 11px; font-weight: 700;
}
.hbg-editor-v8 .hbg-editor-v2-border-scope button.is-active {
  color: #ffe3a0; background: #463155; border-color: #c79c60;
}
.hbg-editor-v8 .hbg-editor-v2-border-note {
  display: block; width: 100%; color: #b9b0c8;
  margin: 0 0 10px; font-size: 10px;
}

/* Acessórios são ornamentos opcionais do painel do perfil, não do avatar. */
#view-perfil-publico[data-hbg-profile-accessory] .hbg-public-hero::after,
#view-perfil-publico[data-hbg-profile-accessory] .hbg-public-hero::before {
  position: absolute; z-index: 1; pointer-events: none;
  font-family: Georgia, serif; line-height: 1;
}
#view-perfil-publico[data-hbg-profile-accessory="stars"] .hbg-public-hero::after {
  content: "✦  ✧  ✦";
  top: 18px; right: 18px; color: #ffe3a0;
  font-size: 19px; letter-spacing: 7px; opacity: .9;
  text-shadow: 0 0 12px rgba(217,182,93,.5);
}
#view-perfil-publico[data-hbg-profile-accessory="stars"] .hbg-public-hero::before {
  content: "✧"; left: 16px; bottom: 15px;
  color: #ffe3a0; font-size: 24px; opacity: .85;
}
#view-perfil-publico[data-hbg-profile-accessory="crystals"] .hbg-public-hero::after {
  content: "◆  ◆  ◆";
  top: 17px; right: 18px; color: #c9a4ff;
  font-size: 15px; letter-spacing: 7px;
  text-shadow: 1px 2px #6a4299, 0 0 11px #ab74ed;
}
#view-perfil-publico[data-hbg-profile-accessory="crystals"] .hbg-public-hero::before {
  content: "◆"; left: 18px; bottom: 15px;
  color: #b48aff; font-size: 20px;
  text-shadow: 2px 2px #7044a0;
}
#view-perfil-publico[data-hbg-profile-accessory="gilded"] .hbg-public-hero::after {
  content: ""; top: 12px; right: 12px;
  width: 50px; height: 50px;
  border-top: 4px double #d9b65d; border-right: 4px double #d9b65d;
  border-top-right-radius: 7px; opacity: .94;
}
#view-perfil-publico[data-hbg-profile-accessory="gilded"] .hbg-public-hero::before {
  content: ""; bottom: 12px; left: 12px;
  width: 50px; height: 50px;
  border-bottom: 4px double #d9b65d; border-left: 4px double #d9b65d;
  border-bottom-left-radius: 7px; opacity: .94;
}
.hbg-editor-v2-swatch[data-hbg-tool="accessory"]::after {
  display: block; color: #ffe3a0; font-size: 17px;
  font-weight: 900; line-height: 1;
}
.hbg-editor-v2-swatch[data-hbg-tool="accessory"][data-hbg-value="original"]::after { content: "×"; color: #ada6bf; }
.hbg-editor-v2-swatch[data-hbg-tool="accessory"][data-hbg-value="stars"]::after { content: "✦"; }
.hbg-editor-v2-swatch[data-hbg-tool="accessory"][data-hbg-value="crystals"]::after { content: "◆"; color: #b78afa; }
.hbg-editor-v2-swatch[data-hbg-tool="accessory"][data-hbg-value="gilded"]::after { content: "◈"; }
@media (max-width: 560px) {
 .hbg-editor-v8 .hbg-editor-v2-border-scope strong {width: 100%;}
}

/* Rodapé: botão Ajuda e Termos usa a mesma identidade roxo/dourado. */
#hbg-footer-help {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 8px 13px;
  color: #f0d490; background: #252237;
  border: 1px solid #514264; border-radius: 9px;
  font: inherit; font-weight: 700;
  box-shadow: none; cursor: pointer;
}
#hbg-footer-help:hover, #hbg-footer-help:focus-visible {
  background: #352848; border-color: #b48bdd; color: #ffe3a0;
  outline: none;
}
/* Cobre também os cards dinâmicos sem interferir na borda de perfis visitados. */
body[data-hbg-site-border] :is(
  #view-inicio,#view-galeria,#view-forum,#view-jogos,
  #view-postar,#view-ajuda,#view-adm
) :is(
  .hbg-v4-card, .hbg-shop-card, .hbg-adm-panel,
  .hbg-admin-v3-card, .hbg-forum-trending-item,
  .hbg-forum-activity-item, .hbg-gallery-comment-card
) { border-color: var(--hbg-global-border) !important; }
@media (max-width:430px) {
  .hbg-editor-v8 .hbg-editor-v2-tool {min-width:42px!important;font-size:9px!important;}
  .hbg-editor-v8 .hbg-editor-v8-bar {gap:4px!important;padding:4px 5px!important;}
  .hbg-editor-v8 .hbg-editor-v2-tools {gap:3px!important;}
}
/* FIM HBG R15.0 */


/* =====================================================================
   HBG R16 — GALERIA / BORDAS / ADM / CONQUISTAS
   Estilos escopados: conserva cards, zoom, sprites e perfis originais.
   ===================================================================== */
#view-galeria.hbg-gallery-r16 { --gal-v16-line:rgba(173,141,207,.32); }
#view-galeria .hbg-gallery-r16-hero {
 display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);align-items:stretch;
 gap:clamp(18px,3vw,36px);padding:clamp(24px,4vw,44px);border:1px solid rgba(217,182,93,.32);
 border-radius:24px;background:radial-gradient(circle at 0 0,rgba(168,121,220,.22),transparent 53%),linear-gradient(125deg,#241b32,#151825 70%,#171622);
 box-shadow:0 18px 55px #0005;overflow:hidden;position:relative;
}
#view-galeria .hbg-gallery-r16-hero:before {content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.012) 31px 32px);pointer-events:none}
#view-galeria .hbg-gallery-r16-copy {position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
#view-galeria .hbg-gallery-r16-eyebrow {color:#dabb76;font-weight:800;font-size:10px;letter-spacing:2.1px;display:flex;align-items:center;gap:8px}
#view-galeria .hbg-gallery-r16-eyebrow i {font-size:18px;color:#bd8cff}
#view-galeria .hbg-gallery-r16-copy h1 {font-size:clamp(32px,4vw,53px);letter-spacing:-1.6px;line-height:1.12;margin:16px 0 14px;color:#f8f3ff}
#view-galeria .hbg-gallery-r16-copy h1 em {font-style:normal;color:#e8c778;display:block}
#view-galeria .hbg-gallery-r16-copy p {font-size:14px;line-height:1.75;color:#c0bbd1;max-width:550px;margin:0}
#view-galeria .hbg-gallery-r16-hero-actions {display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px}
#view-galeria .hbg-gallery-r16-primary {display:inline-flex;align-items:center;gap:8px;padding:12px 18px;background:linear-gradient(135deg,#ffe2a2,#d3af61);color:#241b16;border:1px solid #f1d58f;border-radius:11px;font:inherit;font-weight:800;box-shadow:0 6px 24px #d9b65d20;cursor:pointer}
#view-galeria .hbg-gallery-r16-primary:hover {filter:brightness(1.08);transform:translateY(-1px)}
#view-galeria .hbg-gallery-r16-hero-tag {color:#ac9dbf;font-size:11px;display:inline-flex;gap:6px;align-items:center}
#view-galeria .hbg-gallery-r16-spotlight {position:relative;min-width:0;display:flex;flex-direction:column;border:1px solid rgba(238,205,127,.37);border-radius:17px;overflow:hidden;background:#10111a;transform:rotate(1.4deg);box-shadow:0 17px 38px #0006}
#view-galeria .hbg-gallery-r16-spotlight-image {height:185px;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#302341,#1d2237);overflow:hidden}
#view-galeria .hbg-gallery-r16-spotlight-image img {width:100%;height:100%;object-fit:cover;display:block}
#view-galeria .hbg-gallery-r16-spotlight-image img[hidden] {display:none}
#view-galeria #hbg-gallery-spotlight-placeholder i {font-size:75px;color:#8a6eac}
#view-galeria .hbg-gallery-r16-spotlight-caption {padding:13px 16px;display:flex;flex-direction:column;gap:3px;background:linear-gradient(110deg,#251d2d,#171726)}
#view-galeria .hbg-gallery-r16-spotlight-caption span {font-size:9px;letter-spacing:1.5px;font-weight:800;color:#dfc17e}
#view-galeria .hbg-gallery-r16-spotlight-caption strong {font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-galeria .hbg-gallery-r16-spotlight-caption small {color:#aaa1b8;font-size:11px}
#view-galeria .hbg-gallery-r16-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 36px}
#view-galeria .hbg-gallery-r16-stat {display:flex;align-items:center;gap:13px;padding:17px 20px;border:1px solid #373047;background:linear-gradient(135deg,#1c1b2b,#171923);border-radius:15px}
#view-galeria .hbg-gallery-r16-stat>i {display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:#312640;color:#d9b65d;font-size:23px}
#view-galeria .hbg-gallery-r16-stat span {min-width:0;display:flex;flex-direction:column}
#view-galeria .hbg-gallery-r16-stat strong {font-size:25px;line-height:1.1;color:#f5efff;font-variant-numeric:tabular-nums}
#view-galeria .hbg-gallery-r16-stat small {font-size:11px;color:#aaa3bc;margin-top:3px}
#view-galeria .hbg-gallery-r16-toolbar {display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid #393046}
#view-galeria .hbg-gallery-r16-toolbar-title>span {font-size:10px;letter-spacing:1.8px;font-weight:800;color:#d9b65d}
#view-galeria .hbg-gallery-r16-toolbar-title h2 {font-size:25px;line-height:1.2;margin:5px 0;color:#eee9fa}
#view-galeria .hbg-gallery-r16-toolbar-title p {margin:5px 0 0;font-size:12px;color:#a69db7}
#view-galeria .hbg-gallery-r16-controls {display:flex;flex-wrap:wrap;gap:10px}
#view-galeria .hbg-gallery-r16-search-label,#view-galeria .hbg-gallery-r16-sort-label {display:flex;align-items:center;gap:8px;min-height:45px;background:#171923;border:1px solid #483c59;border-radius:11px;color:#c6a0f2;padding:0 13px}
#view-galeria .hbg-gallery-r16-search-label:focus-within,#view-galeria .hbg-gallery-r16-sort-label:focus-within {border-color:#d9b65d;box-shadow:0 0 0 2px #d9b65d1f}
#view-galeria #search-input,#view-galeria #hbg-gallery-sort {font:inherit;font-size:12px;color:#f2ebfc;border:0;background:transparent;outline:0;min-width:0;box-shadow:none}
#view-galeria #search-input {width:250px}
#view-galeria #hbg-gallery-sort {width:132px;cursor:pointer;color-scheme:dark}
#view-galeria .hbg-gallery-r16-search-label i,#view-galeria .hbg-gallery-r16-sort-label i {font-size:18px}
#view-galeria #all-rooms.rooms-grid {gap:19px}
#view-galeria #all-rooms>.room-card {border-radius:17px;background:#1b1b29;box-shadow:0 9px 25px #0003;transition:transform .18s,border-color .18s,box-shadow .18s}
#view-galeria #all-rooms>.room-card:hover {transform:translateY(-5px);box-shadow:0 18px 36px #0006}
#view-galeria #all-rooms>.room-card .room-image-holder {height:215px;border-radius:16px 16px 0 0;overflow:hidden}
#view-galeria #all-rooms>.room-card .room-info {padding:18px}
#view-galeria #all-rooms>.room-card .room-title-row h4 {font-size:16px;font-weight:800;color:#f7f0ff}
#view-galeria #all-rooms>.room-card .room-author {color:#a9a3bd}
#view-galeria #all-rooms>.room-card .room-footer {border-top-color:#343046}
#view-galeria .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px){#view-galeria .hbg-gallery-r16-hero {grid-template-columns:1fr}#view-galeria .hbg-gallery-r16-spotlight{width:min(100%,430px);transform:none}#view-galeria .hbg-gallery-r16-toolbar{align-items:stretch}#view-galeria .hbg-gallery-r16-controls{width:100%}#view-galeria .hbg-gallery-r16-search-label{flex:1 1 200px}#view-galeria #search-input{width:100%}}
@media(max-width:650px){#view-galeria .hbg-gallery-r16-hero{padding:23px}#view-galeria .hbg-gallery-r16-stats{grid-template-columns:1fr;gap:8px}#view-galeria .hbg-gallery-r16-stat{padding:12px 16px}#view-galeria .hbg-gallery-r16-stat>i{width:34px;height:34px;flex-basis:34px;font-size:19px}#view-galeria .hbg-gallery-r16-stat strong{font-size:20px}#view-galeria .hbg-gallery-r16-toolbar-title h2{font-size:23px}#view-galeria .hbg-gallery-r16-sort-label{flex:1 1 160px}#view-galeria #hbg-gallery-sort{width:100%}}

/* Bordas pessoais do site: inclui a Loja dinâmica e suas superfícies. */
body[data-hbg-site-border] #view-hbg-loja :is(.hbg-shop-hero,.hbg-shop-wallet,.hbg-shop-card,.hbg-shop-toolbar button,.hbg-shop-card-button,.hbg-shop-empty,.hbg-shop-wallet button) {
 border-color:var(--hbg-global-border) !important;
}
body[data-hbg-site-border] #view-hbg-loja .hbg-shop-hero {border-width:1px;border-style:solid}
body[data-hbg-site-border] #view-galeria :is(.hbg-gallery-r16-hero,.hbg-gallery-r16-spotlight,.hbg-gallery-r16-stat,.hbg-gallery-r16-search-label,.hbg-gallery-r16-sort-label) {border-color:var(--hbg-global-border) !important}
/* Lista de Amigos herda borda do site, com prioridade para a borda exclusiva do perfil. */
body[data-hbg-site-border] #view-perfil-publico:not([data-hbg-profile-border]) {--hbg-r16-friends-border:var(--hbg-global-border)}
#view-perfil-publico[data-hbg-profile-border="gold"] {--hbg-r16-friends-border:#d9b65d}
#view-perfil-publico[data-hbg-profile-border="purple"] {--hbg-r16-friends-border:#a879dc}
#view-perfil-publico[data-hbg-profile-border="subtle"] {--hbg-r16-friends-border:#292b3a}
#view-perfil-publico[data-hbg-profile-border="none"] {--hbg-r16-friends-border:transparent}
#view-perfil-publico:is([data-hbg-profile-border],body[data-hbg-site-border] *) :is(
 #hbg-friends-panel,.hbg-friend-person,.hbg-friends-count,.hbg-friend-small-action,.hbg-friend-btn,.hbg-friend-notif-btn
) {border-color:var(--hbg-r16-friends-border) !important}
/* Botão do nome leva ao Perfil Público, sem alterar funções administrativas. */
#view-adm .hbg-r16-open-profile {display:inline-flex;align-items:center;max-width:100%;padding:0;border:0;background:none;color:#eee7f7;font:inherit;font-weight:800;cursor:pointer;overflow-wrap:anywhere;text-align:left}
#view-adm .hbg-r16-open-profile:hover,#view-adm .hbg-r16-open-profile:focus-visible {color:#e8c778;text-decoration:underline;text-underline-offset:3px;outline:0}
#view-adm .hbg-r16-profile-action {white-space:nowrap}
#view-adm .hbg-r16-mod-author {font-size:12px;color:#ba9ce1;margin:3px 0}
#view-estatisticas .hbg-r16-achievement-focus {border:2px solid #e0bd69!important;box-shadow:0 0 0 4px #d9b65d27,0 9px 25px #0005;scroll-margin-top:105px;outline:none}
#view-estatisticas .hbg-r16-achievement-hint {padding:12px 16px;background:#292337;border:1px solid #7f6599;border-radius:10px;color:#eadff8}
/* FIM HBG R16 */


/* =====================================================================
   HBG R17 — CARROSSEL DAS 3 ÚLTIMAS + GALERIA DE 10 EM 10
   Mantém os dados e eventos dos cards da R16.
   ===================================================================== */
#view-galeria .hbg-gallery-r17-spotlight {transform:none;}
#view-galeria .hbg-gallery-r17-image-counter {
 position:absolute;right:11px;top:11px;z-index:2;padding:5px 10px;border-radius:20px;
 background:rgba(15,13,24,.86);border:1px solid rgba(225,193,124,.38);
 color:#f4e3bd;font-size:11px;font-weight:800;letter-spacing:.3px;
}
#view-galeria .hbg-gallery-r17-spotlight-controls {
 display:flex;align-items:center;justify-content:center;gap:13px;
 min-height:42px;padding:7px 12px 10px;background:#171726;border-top:1px solid #352b45;
}
#view-galeria .hbg-gallery-r17-spotlight-arrow {
 display:grid;place-items:center;width:27px;height:27px;border:1px solid #4c3d62;
 border-radius:8px;background:#28213a;color:#e7cb84;font-size:17px;
}
#view-galeria .hbg-gallery-r17-spotlight-arrow:hover:not(:disabled) {background:#4c3c62;border-color:#d9b65d}
#view-galeria .hbg-gallery-r17-spotlight-arrow:disabled {opacity:.35;cursor:default}
#view-galeria .hbg-gallery-r17-spotlight-dots {display:flex;align-items:center;justify-content:center;gap:8px;min-height:12px}
#view-galeria .hbg-gallery-r17-spotlight-dots button {
 width:9px;height:9px;min-width:9px;border-radius:50%;padding:0;border:1px solid #7a628c;
 background:#554461;transition:width .2s ease,background .2s ease;
}
#view-galeria .hbg-gallery-r17-spotlight-dots button.is-active {
 width:24px;border-radius:10px;border-color:#e5c67b;background:#e5c67b;
}
#view-galeria .hbg-gallery-r17-spotlight-dots button:focus-visible,
#view-galeria .hbg-gallery-r17-spotlight-arrow:focus-visible,
#view-galeria .hbg-gallery-r17-more-btn:focus-visible {outline:2px solid #e5c67b;outline-offset:3px}
@keyframes hbg-gallery-r17-fade {from{opacity:.4;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
#view-galeria .hbg-gallery-r17-slide-in {animation:hbg-gallery-r17-fade .4s ease both}
@media(prefers-reduced-motion:reduce){#view-galeria .hbg-gallery-r17-slide-in{animation:none}}

/* Desktop: 5 fotos por linha × 2 linhas = primeiro grupo de 10. */
@media(min-width:1101px) {
 #view-galeria #all-rooms.rooms-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
 #view-galeria #all-rooms>.room-card .room-image-holder {height:150px;}
 #view-galeria #all-rooms>.room-card .room-info {padding:12px;}
 #view-galeria #all-rooms>.room-card .room-title-row h4 {font-size:13px;}
 #view-galeria #all-rooms>.room-card .room-footer {font-size:11px;}
}
@media(min-width:851px) and (max-width:1100px) {
 #view-galeria #all-rooms.rooms-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;}
 #view-galeria #all-rooms>.room-card .room-image-holder {height:165px;}
 #view-galeria #all-rooms>.room-card .room-info {padding:13px;}
}
@media(min-width:651px) and (max-width:850px) {
 #view-galeria #all-rooms.rooms-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
 #view-galeria #all-rooms>.room-card .room-image-holder {height:165px;}
}
@media(min-width:461px) and (max-width:650px) {
 #view-galeria #all-rooms.rooms-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 #view-galeria #all-rooms>.room-card .room-image-holder {height:145px;}
 #view-galeria #all-rooms>.room-card .room-info {padding:12px;}
}
#view-galeria .hbg-gallery-r17-loadmore {
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
 margin:26px auto 0;padding:19px 18px;border-top:1px solid #3a304a;
}
#view-galeria .hbg-gallery-r17-loadmore[hidden],
#view-galeria .hbg-gallery-r17-more-btn[hidden] {display:none!important}
#view-galeria .hbg-gallery-r17-loadmore span {font-size:12px;color:#aaa0bc;text-align:center;}
#view-galeria .hbg-gallery-r17-more-btn {
 display:inline-flex;gap:10px;align-items:center;justify-content:center;
 border:1px solid #a087bb;border-radius:12px;padding:12px 20px;
 background:linear-gradient(135deg,#352440,#211c33);color:#f3e6ff;font-size:13px;font-weight:800;
 box-shadow:0 7px 20px #0003;
}
#view-galeria .hbg-gallery-r17-more-btn:hover {border-color:#ddc17c;background:linear-gradient(135deg,#4a315a,#30223f)}
@media(max-width:460px) {
 #view-galeria #all-rooms.rooms-grid {grid-template-columns:1fr;}
 #view-galeria .hbg-gallery-r17-more-btn {width:100%;}
}
/* Bordas da R15/R16 também se aplicam ao novo botão e aos controles. */
body[data-hbg-site-border] #view-galeria :is(.hbg-gallery-r17-spotlight-arrow,.hbg-gallery-r17-more-btn) {border-color:var(--hbg-global-border)!important}


/* =====================================================================
   HBG R18 — Prévia navegável do editor, sem edição direta na página.
   A barra continua visível ao acessar Início, Galeria, Fórum, Jogos e Loja.
   ===================================================================== */
body.hbg-edit-mode-on:has(#view-perfil-publico.hidden) #hbg-editor-layer:not([hidden]) {
  display:flex !important;
}
.hbg-editor-v8 .hbg-editor-r18-navigation {
  order: 1 !important;
  display:flex;align-items:center;justify-content:center;gap:8px;
  align-self:center;max-width:100%;padding:5px 10px;
  border:1px solid rgba(217,182,93,.28);border-radius:12px;
  background:rgba(22,20,34,.94);box-shadow:0 8px 22px #0004;
  pointer-events:auto !important;
}
.hbg-editor-r18-navigation label{display:inline-flex;align-items:center;gap:6px;color:#ebd7a7;font-size:11px;font-weight:800;white-space:nowrap}
.hbg-editor-r18-navigation select{max-width:150px;background:#2a233a;color:#f5ebfa;border:1px solid #645274;border-radius:8px;padding:5px 8px;font-size:12px;cursor:pointer}
.hbg-editor-r18-navigation select:focus-visible{outline:2px solid #d9b65d;outline-offset:2px}
body.hbg-edit-mode-on .main-content :is(a,button,input,select,textarea,[role="button"],[contenteditable]):not(#hbg-editor-layer *) {
  cursor:default !important;
}
body.hbg-edit-mode-on #view-perfil-publico #hbg-public-username {cursor:default !important}
/* No preview, a Galeria não dispara ações de curtida / publicação. */
body.hbg-edit-mode-on .hbg-gallery-r17-spotlight {cursor:default !important}
@media(max-width:520px){
 .hbg-editor-r18-navigation label{font-size:10px}
 .hbg-editor-r18-navigation select{max-width:120px;font-size:11px}
}
/* =====================================================================
   HBG R18 — Destaque da Galeria 100% automático e clicável.
   Indicadores somente visuais, sem setas nem botões de seleção.
   ===================================================================== */
#view-galeria #hbg-gallery-spotlight-card:not(.hbg-gallery-r18-empty){cursor:pointer}
#view-galeria #hbg-gallery-spotlight-card:not(.hbg-gallery-r18-empty):hover{
  border-color:#e8c778;box-shadow:0 19px 45px #0009,0 0 0 2px #d9b65d2a;
}
#view-galeria #hbg-gallery-spotlight-card:focus-visible{outline:3px solid #e8c778;outline-offset:3px}
#view-galeria #hbg-gallery-spotlight-card.hbg-gallery-r18-empty{cursor:default}
#view-galeria .hbg-gallery-r17-spotlight-controls{min-height:26px;padding:6px 10px 8px;pointer-events:none}
#view-galeria .hbg-gallery-r17-spotlight-dots span{
  display:block;width:9px;height:9px;min-width:9px;border:1px solid #7a628c;
  border-radius:50%;background:#554461;
  transition:width .25s ease,background .25s ease;
}
#view-galeria .hbg-gallery-r17-spotlight-dots span.is-active{
  width:24px;border-radius:10px;border-color:#e5c67b;background:#e5c67b;
}


/* HBG R20 — Conquistas do Perfil Público: cards acessíveis e clicáveis. */
#view-perfil-publico .hbg-r19-conquista-recente {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  appearance: none;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  padding-right: 38px !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
#view-perfil-publico .hbg-r19-conquista-recente:hover {
  border-color: var(--gold) !important;
  background: rgba(217,182,93,.085) !important;
  transform: translateY(-2px);
}
#view-perfil-publico .hbg-r19-conquista-recente:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
}
#view-perfil-publico .hbg-r20-conquista-seta {
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--gold);
  font-size: 17px;
}
@media (prefers-reduced-motion: reduce) {
  #view-perfil-publico .hbg-r19-conquista-recente {transition: none;}
}


/* ===================================================
   HBG SPOTIFY R21 — Sincronização com Spotify Premium
   =================================================== */
#hbg-jukebox-root #hbg-sp-area .hbg-sp-account-actions button,
#hbg-jukebox-root .hbg-sp-premium-buttons button {
  background:#262335;border:1px solid #57506b;color:#e6dbf2;
  padding:8px 10px;border-radius:9px;cursor:pointer;font-size:11px;
  font-weight:750;min-height:35px;
}
#hbg-jukebox-root .hbg-sp-premium-box {
  border:1px solid rgba(30,215,96,.32);border-radius:12px;
  padding:11px;background:linear-gradient(155deg,#193125,#151923);
  color:#d0ebd6;font-size:11px;
}
#hbg-jukebox-root .hbg-sp-premium-box summary {cursor:pointer;font-weight:800;color:#c5f5d3}
#hbg-jukebox-root .hbg-sp-premium-box p {font-size:10px;line-height:1.55;color:#a8c8b3}
#hbg-jukebox-root .hbg-sp-premium-state {font-size:10px;margin:8px 0;color:#c6e7cf}
#hbg-jukebox-root .hbg-sp-premium-buttons {display:flex;gap:6px;flex-wrap:wrap;margin:9px 0}
#hbg-jukebox-root .hbg-sp-premium-buttons button:first-child {background:#20643e;border-color:#3b8756;color:white}
#hbg-jukebox-root .hbg-sp-premium-buttons button:hover:not(:disabled) {filter:brightness(1.18)}
#hbg-jukebox-root .hbg-sp-premium-buttons button:disabled {opacity:.45;cursor:not-allowed}
#hbg-jukebox-root .hbg-sp-premium-device {display:block;font-size:10px;color:#a8c8b3;margin:7px 0}
#hbg-jukebox-root #hbg-sp-premium-volume {width:100%;accent-color:#1ed760}
#hbg-jukebox-root .hbg-sp-premium-current {margin:8px 0 0;font-size:10px}
#hbg-jukebox-root .hbg-sp-premium-box [hidden] {display:none!important}
/* FIM SPOTIFY R21 */


/* ==========================================
   HBG — REMOVER REGRAS DA COMUNIDADE DA TELA
   Fórum + Painel Administrativo
   ========================================== */

/* FÓRUM — Esconder o cartão inteiro de regras */
#view-forum .hbg-forum-sidebar-card:has(#hbg-forum-rules) {
  display: none !important;
}

/* ADM ANTIGO — Cartão e editor de regras */
#view-adm .hbg-adm-feature-grid > .hbg-adm-feature:nth-child(2),
#hbg-adm-rules-section {
  display: none !important;
}

/* ADM ATUAL — Painel, menu lateral e ações rápidas */
#hbg-adm-v3-rules-card,
[data-hbg-adm-side-target="hbg-adm-v3-rules-card"],
[data-hbg-adm-jump="hbg-adm-v3-rules-card"] {
  display: none !important;
}
/* HBG R22 — ELYRAHBG — somente no perfil institucional */
#view-perfil-publico #hbg-elyra-tag {
  position:absolute !important;
  z-index:15;
  top:33px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  min-width:174px;
  max-width:215px;
  border:1px solid #c3a75d;
  border-radius:7px;
  background:linear-gradient(135deg,#2d223a,#1a1d2c);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  color:#ffe3a0;
  font-size:10px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.1px;
  text-align:center;
  pointer-events:none;
  white-space:normal;
}
@media(max-width:640px) {
  #view-perfil-publico #hbg-elyra-tag { top:27px; font-size:9px; min-width:165px; }
}
#view-perfil-publico.hbg-elyra-institucional :is(
  .hbg-public-actions, #hbg-friends-panel, #hbg-public-friends-view,
  #hbg-friend-action, .hbg-public-main, .hbg-public-achievements-panel,
  #hbg-public-settings-btn, #hbg-public-edit-badges,
  #hbg-public-open-stats, .hbg-avatar-direcoes, #hbg-avatar-acoes,
  #hbg-avatar-aviso
) { display:none !important; }
#view-perfil-publico.hbg-elyra-institucional .hbg-public-badge-panel { min-height:190px; }
#view-perfil-publico.hbg-elyra-institucional #hbg-public-badges {
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:78px;
}
#view-perfil-publico .hbg-elyra-staff-slot {
  width:76px !important;
  min-width:76px;
  height:76px !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:1px solid #b99a5a !important;
  border-radius:10px;
  background:radial-gradient(circle at 50% 15%,#54406c,#272438 68%) !important;
  box-shadow:inset 0 0 0 2px #272334,0 7px 18px rgba(0,0,0,.25);
  color:#ffe3a0;
}
#view-perfil-publico .hbg-elyra-staff-escudo {
  display:grid; place-items:center;
  width:38px; height:37px;
  clip-path:polygon(50% 0,100% 15%,92% 72%,50% 100%,8% 72%,0 15%);
  background:#c5a158;
  box-shadow:inset 0 0 0 4px #f3d083;
  color:#30243c;
  font-size:22px;
}
#view-perfil-publico .hbg-elyra-staff-sigla {
  font-size:9px;font-weight:900;letter-spacing:1px;
}
#hbg-elyra-preview {
  margin-left:auto;padding:10px 14px;
  border:1px solid rgba(217,182,93,.4);border-radius:9px;
  background:#272034;color:#f7d99b;
  font:inherit;font-size:12px;font-weight:800;cursor:pointer;
}
#hbg-elyra-preview:hover {background:#352943;border-color:#f1c867;}
@media(max-width:900px) {
  #view-perfil-publico.hbg-elyra-institucional .hbg-public-sidebar {
    width:100%; max-width:500px; margin-inline:auto;
  }
  #hbg-elyra-preview {width:100%;margin:12px 0 0;}
}

/* HBG R23 | Elyra dentro de Equipe e publicação de Eventos */
#hbg-elyra-team-member { border-color:rgba(216,177,97,.45); background:linear-gradient(105deg,rgba(90,60,112,.22),rgba(20,25,40,.18)); }
#hbg-elyra-team-member .hbg-adm-member-avatar img { image-rendering:pixelated; }
.hbg-elyra-institutional-pill { color:#ffe5a6; border:1px solid #c3a05c; background:#32283e; }
#hbg-elyra-publish-panel { margin:18px 0 8px; padding:19px; background:#161924; border:1px solid rgba(217,182,93,.28); border-radius:13px; color:#eee9f7; }
#hbg-elyra-publish-panel[hidden] { display:none!important; }
.hbg-elyra-panel-header { display:flex; align-items:center; gap:13px; margin-bottom:17px; }
.hbg-elyra-small-avatar { width:50px; height:55px; object-fit:contain; image-rendering:pixelated; }
.hbg-elyra-panel-header h3 { margin:0 0 4px; font-size:17px; color:#ffe2a1; }
.hbg-elyra-panel-header p { margin:0; color:#b9b4c9; font-size:12px; }
#hbg-elyra-publish-form { display:flex; flex-direction:column; gap:9px; }
#hbg-elyra-publish-form label { font-weight:700; font-size:12px; color:#dfd8eb; }
#hbg-elyra-publish-form :is(input[type=text],input[type=file],textarea) { box-sizing:border-box; width:100%; max-width:100%; padding:11px 12px; border:1px solid #454053; border-radius:9px; background:#11131d; color:#f4f0fa; font:inherit; }
#hbg-elyra-publish-form textarea { resize:vertical; min-height:120px; }
#hbg-elyra-publish-form :is(input,textarea):focus-visible { outline:2px solid #c4a05a; outline-offset:1px; }
.hbg-elyra-panel-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; margin-top:7px; }
.hbg-elyra-panel-actions button { border:1px solid #c4a05a; border-radius:9px; padding:11px 15px; cursor:pointer; font-weight:800; background:#a7823e; color:#16151c; }
.hbg-elyra-panel-actions button.hbg-elyra-outline { color:#e8d7ad; background:transparent; }
.hbg-elyra-panel-actions button:disabled { opacity:.5; cursor:wait; }
#hbg-elyra-publish-status { margin:4px 0 0; min-height:20px; font-size:12px; color:#d6c69c; }
/* O Perfil Público institucional preserva o hero e a vitrine do HBG. */
#view-perfil-publico.hbg-elyra-institucional .hbg-public-layout { display:flex; justify-content:center; }
#view-perfil-publico.hbg-elyra-institucional .hbg-public-sidebar { width:min(100%,500px); }
#view-perfil-publico.hbg-elyra-institucional :is(.hbg-public-main,.hbg-public-actions,#hbg-friends-panel,.hbg-public-achievements-panel,.hbg-avatar-direcoes,#hbg-avatar-acoes,#hbg-public-settings-btn,#hbg-public-edit-badges,#hbg-public-achievements-more) { display:none!important; }
/* Nome/título do cargo aparece logo abaixo do nickname no palco. */
#view-perfil-publico #hbg-elyra-tag[hidden] { display:none!important; }
@media(max-width:640px) { .hbg-elyra-panel-actions { flex-direction:column; } .hbg-elyra-panel-actions button { width:100%; } }



/* HBG R38.1 — Logs + Privacidade */

.hbg-r39-privacy-info {
  margin: 14px 0;
  padding: 16px;
  background: rgba(94,77,127,.12);
  border: 1px solid rgba(217,182,93,.25);
  border-radius: 12px;
  color: inherit;
}

.hbg-r39-privacy-info h4 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  color: #e4c780;
  font-size: 17px;
}

.hbg-r39-privacy-info p {
  margin: 10px 0;
  line-height: 1.6;
}

.hbg-r39-privacy-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hbg-r39-privacy-toggle {
  border-radius: 8px;
  border: 1px solid #b59a62;
  color: #ffe6a8;
  background: #272139;
  padding: 9px 13px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.hbg-r39-privacy-toggle:hover,
.hbg-r39-privacy-toggle:focus-visible {
  background: #382e4c;
  border-color: #e4c780;
}

#hbg-r39-privacy-status {
  color: #c9bfd8;
  font-size: 12px;
}

#hbg-footer-privacy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 8px;
  padding: 8px 13px;
  background: #252237;
  color: #f0d490;
  border: 1px solid #514264;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

#hbg-footer-privacy:hover,
#hbg-footer-privacy:focus-visible {
  background: #352848;
  border-color: #b48bdd;
  color: #ffe3a0;
}

.hbg-r38-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0;
}

.hbg-r38-toolbar select,
.hbg-r38-toolbar button {
  background: #1e2030;
  border: 1px solid #49415e;
  color: #f1eef8;
  border-radius: 8px;
  padding: 9px 12px;
}

.hbg-r38-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
  gap: 10px;
  margin: 18px 0;
}

.hbg-r38-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #3e354e;
  border-radius: 12px;
  padding: 12px;
  background: #191722;
}

.hbg-r38-stat small {
  color: #b5acc7;
  font-size: 11px;
}

.hbg-r38-stat strong {
  font-size: 20px;
  color: #ffe3a0;
}

#hbg-r38-results {
  overflow-x: auto;
}

#hbg-r38-results h4 {
  margin: 22px 0 8px;
  font-size: 16px;
  color: #ffe3a0;
}

.hbg-r38-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 550px;
}

.hbg-r38-table th,
.hbg-r38-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid #393247;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.hbg-r38-table th {
  color: #d9b65d;
  background: #20202a;
  font-weight: 700;
}

.hbg-r38-table td {
  color: #e6dfed;
}


/* HBG — Publicações do Arquiteto: câmera pixel art */


/* HBG — Câmera no tamanho dos demais ícones */
#view-perfil-publico
.hbg-publications-panel
.hbg-publications-camera-icon {
  display: inline-block;
  width: 22px !important;
  height: 24px !important;
  max-width: 22px !important;
  max-height: 24px !important;
  flex: 0 0 22px;
  object-fit: contain;
  vertical-align: middle;
  image-rendering: pixelated;
}


/* HBG — Corrigir mensagem quando não há publicações */

#view-perfil-publico
#hbg-public-rooms > .hbg-public-rooms-empty {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  min-height: 110px;
  margin: 0;
  padding: 30px 18px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #bdb6cf;
  font-size: 13px;
  line-height: 1.6;

  background: rgba(17, 22, 34, .35);
  border: 1px dashed rgba(217, 182, 93, .25);
  border-radius: 10px;
}

/* HBG R40 — Alterações pontuais e layout de privacidade seguro */
/* Edição fica como 4º botão das abas, sem virar uma aba de preferências. */
#hbg-public-settings-dialog .hbg-settings-tabs #hbg-start-edit-mode.hbg-r40-edit-tab {
  width:auto; min-height:40px; margin:0; padding:10px 12px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:0 1 auto; border-radius:10px; background:#202131;
  color:#f5d99a; font-size:12px; font-weight:750; box-shadow:none;
  border:1px solid #6c563d;
}
#hbg-public-settings-dialog .hbg-settings-tabs #hbg-start-edit-mode.hbg-r40-edit-tab:hover,
#hbg-public-settings-dialog .hbg-settings-tabs #hbg-start-edit-mode.hbg-r40-edit-tab:focus-visible {
  background:rgba(217,182,93,.12);border-color:#d9b65d;
}

/* Galeria: clique somente na fotografia, nunca no card/legenda. */
#view-galeria #hbg-gallery-spotlight-card { cursor:default !important; }
#view-galeria #hbg-gallery-spotlight-card .hbg-r40-spotlight-open {
  position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0;
  border:0; border-radius:0; background:transparent; display:block;
  cursor:zoom-in; z-index:1; overflow:hidden;
}
#view-galeria #hbg-gallery-spotlight-card .hbg-r40-spotlight-open:disabled {cursor:default;}
#view-galeria #hbg-gallery-spotlight-card .hbg-r40-spotlight-open:focus-visible {outline:3px solid #e5c67b;outline-offset:-3px;}
#view-galeria #hbg-gallery-spotlight-card .hbg-r40-spotlight-open img {width:100%;height:100%;object-fit:cover;}
#view-galeria .hbg-gallery-r17-spotlight-controls {pointer-events:auto;position:relative;z-index:3;}
#view-galeria .hbg-gallery-r17-spotlight-dots button {cursor:pointer;}
#view-galeria .hbg-gallery-r17-spotlight-dots button:focus-visible {outline:2px solid #f5d990;outline-offset:4px;}

/* Ícone pixel da Loja: menu e cabeçalho. */
.nav-links a[data-target="hbg-loja"] .hbg-r40-shop-nav-icon {
  width:20px;height:20px;flex:none;object-fit:contain;
  image-rendering:pixelated;vertical-align:middle;
}
#view-hbg-loja .hbg-r40-shop-title-icon {
  display:inline-block;width:29px;height:31px;object-fit:contain;
  margin-right:7px;vertical-align:-5px;image-rendering:pixelated;
}

/* Respiro no rodapé, sem mover conteúdo absoluto e sem alterar temas. */
footer.hbg-independent-footer {margin-top:95px;}
@media(max-width:600px){footer.hbg-independent-footer{margin-top:65px;}}

/* Perfil Público: duas colunas verdadeiramente independentes.
   Aplicadas SOMENTE após o JS montar corretamente os wrappers. */
#view-perfil-publico .hbg-public-profile.hbg-r40-profile-organized {
  display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:18px;align-items:start;
}
#view-perfil-publico .hbg-r40-profile-left,
#view-perfil-publico .hbg-r40-profile-right {
  display:flex;flex-direction:column;gap:18px;min-width:0;
}
#view-perfil-publico .hbg-r40-profile-left {grid-column:1;}
#view-perfil-publico .hbg-r40-profile-right {grid-column:2;}
#view-perfil-publico .hbg-r40-profile-left > .hbg-public-hero {
  width:100%;height:auto;min-height:255px;grid-row:auto;grid-column:auto;flex:none;
}
#view-perfil-publico .hbg-r40-profile-left > .hbg-public-main {
  display:flex;flex-direction:column;gap:18px;min-width:0;
  grid-row:auto;grid-column:auto;
}
#view-perfil-publico .hbg-r40-profile-right > .hbg-public-sidebar {
  display:flex;flex-direction:column;gap:18px;min-width:0;
  width:100%;align-items:stretch;
}
#view-perfil-publico .hbg-r40-profile-right > .hbg-public-sidebar > .hbg-public-panel {
  height:auto;grid-row:auto;grid-column:auto;width:100%;
}
/* Não revelar o perfil anterior enquanto permissões do novo perfil carregam. */
#view-perfil-publico.hbg-privacy-pending .hbg-r40-profile-left > .hbg-public-main,
#view-perfil-publico.hbg-privacy-pending .hbg-r40-profile-right,
#view-perfil-publico.hbg-privacy-pending .hbg-public-profile.hbg-r40-profile-organized > .hbg-publications-panel {
  visibility:hidden !important;
}
#view-perfil-publico .hbg-r40-profile-left .hbg-public-activity-layout {
  display:block;grid-row:auto;grid-column:auto;
}
#view-perfil-publico .hbg-public-profile.hbg-r40-profile-organized > .hbg-publications-panel {
  grid-column:1 / -1;grid-row:auto;min-width:0;
}
/* Se Estatísticas e Fórum estiverem ocultos, nenhum wrapper vazio fica. */
#view-perfil-publico.hbg-privacy-hide-stats.hbg-privacy-hide-forum .hbg-r40-profile-left > .hbg-public-main {
  display:none !important;
}
/* O perfil institucional não deve exibir tópicos nem publicações. */
#view-perfil-publico.hbg-elyra-institucional .hbg-topics-panel,
#view-perfil-publico.hbg-elyra-institucional .hbg-publications-panel {
  display:none !important;
}
@media(max-width:900px){
  #view-perfil-publico .hbg-public-profile.hbg-r40-profile-organized {
    grid-template-columns:minmax(0,1fr);
  }
  #view-perfil-publico .hbg-r40-profile-left,
  #view-perfil-publico .hbg-r40-profile-right,
  #view-perfil-publico .hbg-public-profile.hbg-r40-profile-organized > .hbg-publications-panel {
    grid-column:1;
  }
}
/* HBG R40.1 — Amigos no final do Perfil Público */
#view-perfil-publico
.hbg-public-profile.hbg-r40-profile-organized
> #hbg-friends-panel {
  grid-column: 1 / -1;
  grid-row: auto;
  min-width: 0;
}


/* HBG R40.4 — Ocultar atalho de amizades privadas */
#view-perfil-publico.hbg-privacy-hide-friends #hbg-public-friends-view {
  display: none !important;
}

/* Não mostrar painéis antigos durante a consulta de privacidade */
#view-perfil-publico.hbg-privacy-pending .hbg-r40-profile-left > .hbg-public-main,
#view-perfil-publico.hbg-privacy-pending .hbg-r40-profile-right,
#view-perfil-publico.hbg-privacy-pending .hbg-public-profile.hbg-r40-profile-organized > .hbg-publications-panel,
#view-perfil-publico.hbg-privacy-pending #hbg-friends-panel,
#view-perfil-publico.hbg-privacy-pending #hbg-public-friends-view {
  display: none !important;
}

/* HBG R40.8 — Caixotes independentes e Estatísticas idênticas à página completa. */
/* A Galeria, o Fórum e os Tópicos são elementos irmãos. */
#view-perfil-publico .hbg-public-activity-layout {
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}
#view-perfil-publico .hbg-public-gallery-activity-panel,
#view-perfil-publico .hbg-public-forum-section {
  display:block;
  min-width:0;
  width:100%;
}
#view-perfil-publico .hbg-public-forum-section {
  margin:0;
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(145deg,#171b29,#111622);
}
#view-perfil-publico .hbg-public-forum-section > h3 {
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
#view-perfil-publico.hbg-privacy-hide-stats .hbg-public-summary-panel,
#view-perfil-publico.hbg-privacy-hide-gallery .hbg-public-gallery-activity-panel,
#view-perfil-publico.hbg-privacy-hide-forum .hbg-public-forum-section,
#view-perfil-publico.hbg-privacy-hide-activity .hbg-topics-panel {
  display:none !important;
}

/* A mesma estética aprovada em "Estatísticas completas". */
#view-perfil-publico .hbg-public-summary-panel.hbg-stats-overview {
  padding:22px;
  background:radial-gradient(circle at 95% 0%,rgba(168,121,220,.07),transparent 55%),linear-gradient(145deg,#191b28,#12141e);
  border:1px solid rgba(217,182,93,.31);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
#view-perfil-publico .hbg-public-summary-panel .hbg-public-summary-heading {
  display:flex;
  align-items:center;
  gap:13px;
  padding-bottom:16px;
  margin-bottom:0;
  border-bottom:1px solid #303040;
}
#view-perfil-publico .hbg-public-summary-heading > i.ph-chart-bar {
  display:grid;place-items:center;
  flex:0 0 46px;width:46px;height:46px;
  border:1px solid rgba(217,182,93,.20);
  border-radius:12px;
  background:rgba(217,182,93,.09);
  color:#e2bd74;font-size:24px;
}
#view-perfil-publico .hbg-public-summary-copy {
  flex:1 1 auto;min-width:0;
}
#view-perfil-publico .hbg-public-summary-copy > h2 {
  display:block;
  margin:0;padding:0;border:0;
  color:#ffe3a0;font-size:clamp(16px,2vw,21px);
  line-height:1.35;font-weight:800;
}
#view-perfil-publico .hbg-public-summary-copy > p {
  margin:5px 0 0;color:#aaa4ba;font-size:12px;line-height:1.5;
}
#view-perfil-publico #hbg-public-stats .profile-stats.hbg-stats-summary-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;margin:16px 0 0;padding:0;
}
#view-perfil-publico #hbg-public-stats .profile-stat-card {
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:9px;row-gap:7px;
  align-content:center;align-items:center;
  min-width:0;min-height:104px;
  padding:14px 12px;
  background:#151720;
  border:1px solid #303040;
  border-radius:12px;
  transition:border-color .18s ease,background .18s ease;
}
#view-perfil-publico #hbg-public-stats .profile-stat-card:hover {
  background:#1b1d2b;border-color:rgba(217,182,93,.36);
}
#view-perfil-publico #hbg-public-stats .profile-stat-icon {
  grid-column:1;grid-row:1;
  display:grid;place-items:center;
  width:36px;height:36px;
  border:1px solid #383041;border-radius:9px;
  background:rgba(168,121,220,.07);
  color:#ddb96e;font-size:21px;
}
#view-perfil-publico #hbg-public-stats .profile-stat-icon img {
  display:block;max-width:30px;max-height:30px;
  object-fit:contain;image-rendering:pixelated;
}
#view-perfil-publico #hbg-public-stats .profile-stat-info {display:contents;}
#view-perfil-publico #hbg-public-stats .profile-stat-value {
  grid-column:2;grid-row:1;min-width:0;
  color:#ffe3a0;font-size:clamp(16px,1.8vw,23px);
  font-weight:800;overflow-wrap:anywhere;
}
#view-perfil-publico #hbg-public-stats .profile-stat-label {
  grid-column:1/-1;grid-row:2;
  font-size:11px;color:#bbb6cd;font-weight:650;
}
@media(max-width:560px){
  #view-perfil-publico .hbg-public-summary-panel .hbg-public-summary-heading {
    flex-wrap:wrap;gap:9px;
  }
  #view-perfil-publico .hbg-public-summary-heading > i.ph-chart-bar {
    flex-basis:38px;width:38px;height:38px;font-size:21px;
  }
  #view-perfil-publico #hbg-public-stats .profile-stats.hbg-stats-summary-grid {
    grid-template-columns:1fr;
  }
}


/* HBG R40.8 — Compatibilidade com o CSS anterior (sem apagar blocos). */
/* O botão Estatísticas não pode ocultar a Atividade na Galeria. */
#view-perfil-publico.hbg-privacy-hide-stats:not(.hbg-privacy-hide-gallery)
.hbg-public-gallery-activity-panel > h2 {
  display: block !important;
}
#view-perfil-publico.hbg-privacy-hide-stats:not(.hbg-privacy-hide-gallery)
.hbg-public-gallery-activity-panel > .hbg-public-activity-cards {
  display: grid !important;
}

/* Mesmo com Estatísticas e Fórum privados, Galeria pública continua visível. */
#view-perfil-publico.hbg-privacy-hide-stats.hbg-privacy-hide-forum:not(.hbg-privacy-hide-gallery)
.hbg-public-gallery-activity-panel {
  display: block !important;
}
#view-perfil-publico.hbg-privacy-hide-stats.hbg-privacy-hide-forum:not(.hbg-privacy-hide-gallery)
.hbg-r40-profile-left > .hbg-public-main {
  display: flex !important;
}
#view-perfil-publico.hbg-privacy-hide-stats.hbg-privacy-hide-forum.hbg-privacy-hide-activity:not(.hbg-privacy-hide-gallery)
.hbg-r40-profile-left .hbg-public-activity-layout {
  display: flex !important;
}

/* Fórum separado mantém sua própria borda mesmo se Estatísticas estiver privada. */
#view-perfil-publico.hbg-privacy-hide-stats:not(.hbg-privacy-hide-forum)
.hbg-public-forum-section {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--border);
}

/* Prevalece sobre a antiga disposição do wrapper da coluna esquerda. */
#view-perfil-publico .hbg-r40-profile-left .hbg-public-activity-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  grid-row: auto;
  grid-column: auto;
}

/* ================================================================
   HBG R40.9 — Publicações laterais SOMENTE quando:
   Estatísticas, Galeria e Fórum privados; Tópicos recentes públicos.
   Estado ligado/desligado automaticamente pelo JS da R40.9.
   NÃO colar em outro ponto: adicionar somente ao FINAL do CSS.
   ================================================================ */

/* Mantém a galeria original e sua paginação ocupando uma linha inteira. */
#view-perfil-publico .hbg-publications-panel > .hbg-r409-fotos-rail {
  grid-column: 1 / -1;
  min-width: 0;
}
#view-perfil-publico .hbg-r409-fotos-rail {
  position: relative;
  width: 100%;
  min-width: 0;
}
#view-perfil-publico .hbg-r409-fotos-seta {
  display: none;
}

/* MODO ESPECIAL: somente o cenário pedido, ativado por 4 preferências. */
#view-perfil-publico .hbg-public-profile.hbg-r40-profile-organized.hbg-r409-publicacoes-lateral
  > .hbg-r40-profile-right > .hbg-publications-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  width: 100%;
  padding: 18px 15px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r40-profile-right > .hbg-publications-panel > h2 {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r40-profile-right > .hbg-publications-panel > .hbg-public-search {
  width: 100%;
  max-width: none;
  margin: 0;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r40-profile-right > .hbg-publications-panel .hbg-public-search input {
  min-width: 0;
  font-size: 11px;
}

/* Exatamente 5 miniaturas por vez, preservando o clique para ampliar. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral #hbg-public-rooms {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 5px !important;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0 10px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card {
  min-width: 0;
  width: 100%;
  border-radius: 7px;
  overflow: hidden !important;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-image-holder {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
  border-radius: 7px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-image-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-info {
  display: none !important;
}

/* Setinhas quase invisíveis nas laterais, mais nítidas ao passar o mouse. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r409-fotos-rail > .hbg-r409-fotos-seta:not([hidden]) {
  position: absolute;
  top: 50%;
  z-index: 12;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 23px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(217,182,93,.10);
  border-radius: 7px;
  color: #fff3d7;
  background: rgba(10,13,20,.52);
  opacity: .22;
  font: 700 29px/1 system-ui, sans-serif;
  transition: opacity .18s ease, background .18s ease;
  cursor: pointer;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r409-fotos-rail > .hbg-r409-anterior {left: -7px;}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r409-fotos-rail > .hbg-r409-proxima {right: -7px;}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r409-fotos-rail > .hbg-r409-fotos-seta:hover,
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r409-fotos-rail > .hbg-r409-fotos-seta:focus-visible {
  opacity: .90;
  background: rgba(10,13,20,.88);
  outline: 1px solid rgba(255,227,160,.40);
}

/* Quando não resta nenhum caixote na esquerda, não guardar altura vazia. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  .hbg-r40-profile-left > .hbg-public-main {
  display: none !important;
}
@media (max-width: 900px) {
  #view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
    > .hbg-r40-profile-right > .hbg-publications-panel {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #view-perfil-publico .hbg-r409-fotos-seta {transition: none !important;}
}

/* HBG R40.10 — Publicações à esquerda DOS TÓPICOS na mesma linha.
   Só vale no modo R40.9 quando os três caixotes estão privados.
   COLAR APENAS NO FINAL DO CSS, depois do R40.9. */

#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  > .hbg-r40-profile-right > .hbg-r410-publicacoes-topicos {
  position:relative;
  z-index:8; /* evita que o cenário do avatar cubra o título das publicações */
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  align-items:start;
  gap:18px;
  width:var(--hbg-r410-largura,790px);
  max-width:none;
  min-width:0;
  flex:0 0 auto;
  align-self:flex-end; /* alinha a borda direita com os Tópicos originais */
  overflow:visible;
}
#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  .hbg-r410-publicacoes-topicos > .hbg-publications-panel {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  min-width:0;
  width:100%;
  margin:0;
  padding:18px 15px;
  grid-column:auto;
  grid-row:auto;
}
#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  .hbg-r410-publicacoes-topicos > .hbg-publications-panel > h2 {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-size:15px;
  line-height:1.4;
}
#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  .hbg-r410-publicacoes-topicos > .hbg-publications-panel > .hbg-public-search {
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}
#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  .hbg-r410-publicacoes-topicos > .hbg-publications-panel .hbg-public-search input {
  min-width:0;
  font-size:11px;
}
#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  .hbg-r410-publicacoes-topicos > .hbg-topics-panel {
  min-width:0;
  width:100%;
  margin:0;
  grid-column:auto;
  grid-row:auto;
}
#view-perfil-publico .hbg-public-profile.hbg-r410-lado-a-lado
  .hbg-r410-publicacoes-topicos .hbg-r409-fotos-rail {
  min-width:0;
  width:100%;
}
/* O modo padrão e as telas menores continuam como antes. */

/* ===============================================================
 HBG R40.11 — Publicações embaixo dos pés do avatar, NÃO junto
 das Conquistas/Tópicos. Colar no FIM do CSS, depois da R40.10.
 Ativo somente com Estatísticas, Galeria e Fórum ocultos e
 Tópicos recentes visíveis. Em outras situações, layout intacto.
 =============================================================== */

#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left {
  position:relative;
  overflow:visible;
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel {
  position:absolute;
  z-index:7;
  left:var(--hbg-r411-esquerda,0px);
  top:var(--hbg-r411-topo,280px);
  width:var(--hbg-r411-largura,330px);
  max-width:100%;
  min-width:0;
  min-height:var(--hbg-r411-altura-min,220px);
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  margin:0;
  padding:18px 15px;
  grid-column:auto;
  grid-row:auto;
  box-sizing:border-box;
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > h2 {
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-size:15px;
  line-height:1.4;
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > .hbg-public-search {
  display:block;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel .hbg-public-search input {
  min-width:0;
  font-size:11px;
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel .hbg-r409-fotos-rail {
  width:100%;
  min-width:0;
}
/* Ocultar somente os controles inativos fora do modo compacto
   já é responsabilidade da R40.9 — sem nova regra global aqui. */

/* HBG R40.12 — Ampliar Publicações do Arquiteto */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* =====================================================================
   HBG R40.13 — CARDS COMPLETOS NAS PUBLICAÇÕES ABAIXO DO AVATAR
   Colar INTEIRO no FINAL do CSS atual, após a R40.12.
   Atua SOMENTE no modo especial de cinco publicações por página.
   O modo normal de 10 fotos e a Galeria principal continuam intactos.
   ===================================================================== */

/* Mantém cinco cards reais por página, com conteúdo legível. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: stretch !important;
  padding: 0 12px !important;
}

#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  min-width: 0;
  border: 1px solid rgba(217,182,93,.22);
  border-radius: 11px;
  background: linear-gradient(145deg,#202436,#151925);
  overflow: visible !important; /* permite abrir o menu da engrenagem */
}

#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-image-holder {
  display: block !important;
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 10px 10px 0 0 !important;
  flex: 0 0 auto;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-image-holder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A R40.9 ocultava TUDO isto com display:none!important.
   Restaurar as informações já existentes no mesmo card da Galeria. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  padding: 12px 10px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-title-row h4 {
  display: block;
  margin: 0;
  color: var(--gold-light);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-author {
  display: flex !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .author-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-desc {
  display: block !important;
  min-height: 32px;
  margin: 0;
  color: #bdb9c9;
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* O mesmo botão de curtir/olhinho/engrenagem, mais Comentar (abre zoom). */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-footer {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-footer .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 27px;
  padding: 5px 6px;
  font-size: 11px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .hbg-r413-btn-comentarios {
  color: #d7c7ed;
  cursor: pointer;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .hbg-r413-btn-comentarios:hover,
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .hbg-r413-btn-comentarios:focus-visible {
  color: var(--gold-light);
  border-color: rgba(217,182,93,.55);
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .hbg-room-config {
  margin-left: auto;
}
/* Miniaturas seguem sendo cinco por página; em telas desktop mais estreitas,
   preservar legibilidade sem espremer título, descrição e ações. */
@media (min-width: 901px) and (max-width: 1170px) {
  #view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
    #hbg-public-rooms {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ========================================================================
   HBG R40.14 — CARDS COMPLETOS SEM ESTICAR O CAIXOTE
   COLE SOMENTE NO FINAL DO CSS após as versões R40.11, R40.12 e R40.13.
   O JS R40.14 mede o limite inferior do painel Tópicos recentes.
   Ativo apenas no modo especial: outros caixotes de atividade ocultos.
   ======================================================================== */

/* Painel de Publicações: mantém o topo sob os pés do avatar e encerra
   exatamente na borda inferior de Tópicos recentes. */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel {
  height: var(--hbg-r414-altura, 315px) !important;
  min-height: 0 !important;
  max-height: var(--hbg-r414-altura, 315px) !important;
  gap: 7px !important;
  padding: 12px 13px !important;
  overflow: visible !important; /* mantém menus da engrenagem acessíveis */
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > h2 {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1.3;
}
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > .hbg-public-search {
  flex: 0 0 auto;
}
/* O carrossel ocupa somente o espaço que sobra sob título e pesquisa. */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-r409-fotos-rail {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms {
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  grid-template-rows: minmax(0,1fr) !important;
  gap: 7px !important;
  padding: 0 8px !important;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100%;
  overflow: visible !important;
}
/* Miniaturas menores, mas mantendo o mesmo recorte e clique no zoom. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-image-holder {
  height: clamp(50px, calc(var(--hbg-r414-altura,315px) - 235px), 90px) !important;
  aspect-ratio: auto !important;
  flex: 0 0 auto !important;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-info {
  display: grid !important;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  gap: 3px !important;
  flex: 1 1 0;
  min-height: 0;
  padding: 6px !important;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-title-row h4 {
  font-size: 10px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-author {
  font-size: 9px;
  line-height: 1.15;
  gap: 3px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .author-avatar {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-desc {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 0;
  max-height: 29px;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.3;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-footer {
  min-width: 0;
  margin: 0;
  padding-top: 4px;
  gap: 3px;
  align-self: stretch;
  flex-wrap: wrap;
}
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .room-footer .icon-btn {
  min-height: 22px;
  padding: 3px 4px;
  font-size: 9px;
  line-height: 1;
}
/* Comentários continuam acessíveis pelo ícone com tooltip/aria-label;
   o texto Comentar ocuparia muito espaço em cinco colunas estreitas. */
#view-perfil-publico .hbg-public-profile.hbg-r409-publicacoes-lateral
  #hbg-public-rooms > .room-card .hbg-r413-btn-comentarios > span {
  display: none;
}
/* Se houver menos espaço vertical, a descrição encurta, mas sempre
   permanece integralmente disponível ao abrir a publicação no zoom. */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-r409-fotos-rail > .hbg-r409-fotos-seta:not([hidden]) {
  top: 50%;
}

/* ====================================================================
   HBG R40.15 — PESQUISA AO LADO DE "PUBLICAÇÕES DO ARQUITETO"
   COLE SOMENTE NO FINAL DO CSS, após a R40.14.
   Atua apenas no modo especial das publicações abaixo do avatar.
   Não altera tamanho/posição externos do caixote, cards ou privacidade.
   ==================================================================== */

#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 330px) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
}

/* Título na esquerda, primeira linha. */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > h2 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0;
  margin: 0 !important;
}

/* Campo de busca à direita do título, na mesma altura. */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > .hbg-public-search {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: center !important;
}

/* As cinco fotos continuam na linha de baixo, sem mudar o carrossel. */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  > .hbg-r40-profile-left > .hbg-publications-panel > .hbg-r409-fotos-rail {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
}

/* HBG R40.16 — Mostrar mais da foto nos cards compactos */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card {
  display: flex;
  flex-direction: column;
}

/* área da foto maior */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-image,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-image,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card img,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card img {
  height: 96px !important;
  min-height: 96px !important;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* conteúdo mais para baixo e mais compacto */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-body,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-body,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-content,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-content {
  padding-top: 8px !important;
}

/* título, nick e descrição mais compactos */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card h3,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card h3,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-title,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-title {
  margin-top: 2px !important;
  margin-bottom: 4px !important;
  line-height: 1.15 !important;
  font-size: 13px !important;
}

#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-author,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-author,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-meta,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-meta {
  margin-bottom: 4px !important;
  line-height: 1.1 !important;
  font-size: 11px !important;
}

#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-desc,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-desc,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card p,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card p {
  margin-top: 2px !important;
  line-height: 1.2 !important;
  font-size: 11px !important;
}

/* rodapé dos botões mais enxuto */
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-gallery-card-footer,
#view-perfil-publico .hbg-public-profile.hbg-r411-publicacoes-sob-avatar
  .hbg-publications-panel .hbg-room-card-footer {
  margin-top: auto;
  padding-top: 8px !important;
}

/* HBG R40.19 — Central de Atividade Permanente no ADM */
#hbg-live-r4019{margin:18px 0 26px;padding:22px;border:1px solid rgba(217,182,93,.24);border-radius:16px;background:linear-gradient(145deg,#171923,#11131c);color:var(--text,#f1eef8);}
#hbg-live-r4019 .hbg-live-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
#hbg-live-r4019 .hbg-live-kicker{display:flex;align-items:center;gap:8px;color:#d9b65d;font-size:10px;letter-spacing:1.5px;font-weight:800}
#hbg-live-r4019 .hbg-live-dot{width:8px;height:8px;border-radius:100%;background:#46d79b;box-shadow:0 0 10px #46d79b75}
#hbg-live-r4019 h2{margin:6px 0 4px;color:#ffe3a0;font-size:20px;line-height:1.25}
#hbg-live-r4019 h3{font-size:13px;color:#ffe3a0;margin:0 0 12px}
#hbg-live-r4019 .hbg-live-head p,#hbg-live-r4019 .hbg-live-status{font-size:11px;color:#aaa6ba;margin:0}
#hbg-live-r4019 .hbg-live-refresh{border:1px solid #3c3b4d;background:#272635;color:#eee9fc;padding:9px 12px;border-radius:9px;font-weight:700;display:flex;gap:7px;align-items:center}
#hbg-live-r4019 .hbg-live-refresh:hover{border-color:#d9b65d}
#hbg-live-r4019 .hbg-live-status{margin:12px 0 14px}
#hbg-live-r4019 .hbg-live-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#hbg-live-r4019 .hbg-live-stat{display:flex;gap:12px;align-items:center;min-width:0;padding:15px 13px;border:1px solid rgba(217,182,93,.16);border-radius:11px;background:rgba(255,255,255,.025)}
#hbg-live-r4019 .hbg-live-stat>i{font-size:24px;color:#d9b65d}
#hbg-live-r4019 .hbg-live-stat span{min-width:0;display:flex;flex-direction:column}
#hbg-live-r4019 .hbg-live-stat small{font-size:11px;color:#aba7be;line-height:1.3}
#hbg-live-r4019 .hbg-live-stat strong{font-size:23px;color:#ffe3a0;line-height:1.35;font-variant-numeric:tabular-nums}
#hbg-live-r4019 .hbg-live-bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
#hbg-live-r4019 .hbg-live-bottom>div{border:1px solid rgba(217,182,93,.14);padding:16px;border-radius:12px;background:#101119;min-width:0}
#hbg-live-r4019 .hbg-live-bottom #hbg-live-community>div,#hbg-live-r4019 .hbg-live-bottom #hbg-live-sections>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:11px;color:#bab5ca}
#hbg-live-r4019 .hbg-live-bottom strong{color:#f4e2b0;font-weight:800}
#hbg-live-r4019 .hbg-live-bottom p{color:#aaa6ba;font-size:11px}
@media(max-width:900px){#hbg-live-r4019 .hbg-live-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:580px){#hbg-live-r4019{padding:14px}#hbg-live-r4019 .hbg-live-bottom{grid-template-columns:1fr}#hbg-live-r4019 .hbg-live-stat{padding:10px;gap:7px}#hbg-live-r4019 .hbg-live-stat strong{font-size:20px}}

/* ====================================================================
   HBG R40.20 — Fundo único na navegação + bordas auditadas.
   Acrescentar somente ao final do CSS, sem apagar os ajustes R40.16–19.
   O Perfil de outros usuários mantém o próprio fundo público quando aberto.
   ==================================================================== */

/* O mesmo fundo GRATUITO acompanha todas as páginas da conta conectada.
   A escolha é definida pelo Editor e reaplicada durante a navegação.
   Não altera os fundos internos dos cartões nem o palco do avatar. */
body[data-hbg-site-theme]:not(.hbg-shop-wallpaper-on) {
  background: var(--hbg-editor-page-wall, var(--hbg-wall-original)) fixed !important;
}

/* Fundo adquirido na Loja: tem prioridade sobre o tema gratuito no modo
   equipado/prévia e fica visível em toda a navegação (não só no perfil). */
body.hbg-shop-wallpaper-on,
body.hbg-shop-wallpaper-on:has(#view-perfil-publico:not(.hidden)) {
  background-image:
    linear-gradient(135deg, rgba(11,13,24,.28), rgba(11,14,25,.38)),
    var(--hbg-shop-wallpaper-url) !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  background-size: cover, auto !important;
  background-attachment: fixed, fixed !important;
}

/* R40.20 — Borda 'Todo o HBG': acrescenta painéis não cobertos no CSS
   antigo, mantendo largura, arredondamento e sombras de cada elemento. */
body[data-hbg-site-border] :is(
  #view-inicio, #view-galeria, #view-forum, #view-jogos,
  #view-postar, #view-ajuda, #view-adm, #view-estatisticas,
  #view-hbg-loja
) :is(
  .hbg-gallery-r16-spotlight, .hbg-gallery-r16-hero,
  .hbg-gallery-r16-stat, .hbg-gallery-r16-search-label,
  .hbg-gallery-r16-sort-label, .hbg-gallery-r17-more-btn,
  .hbg-gallery-r17-spotlight-arrow, .room-card, .builder-card,
  .builders-hall, .hbg-hero, .hbg-forum-sidebar-card,
  .hbg-forum-topic-card, .hbg-forum-card, .hbg-stats-panel,
  .hbg-v4-card, .hbg-shop-hero, .hbg-shop-card,
  .hbg-shop-wallet, .hbg-help-window, .hbg-help-hero-v4,
  .hbg-help-tile, .hbg-help-faq-row, .hbg-help-cta-v4,
  .hbg-adm-panel, .hbg-adm-hero, .hbg-admin-v3-card,
  .hbg-game-card, .form-card
) {
  border-color: var(--hbg-global-border) !important;
}

/* Borda pessoal do PERFIL: pode ser diferente da escolhida para o site.
   'Meu Perfil Público' sempre tem prioridade quando foi configurado. */
#view-perfil-publico[data-hbg-profile-border="gold"] {--hbg-editor-profile-border:#d9b65d}
#view-perfil-publico[data-hbg-profile-border="purple"] {--hbg-editor-profile-border:#a879dc}
#view-perfil-publico[data-hbg-profile-border="subtle"] {--hbg-editor-profile-border:#292b3a}
#view-perfil-publico[data-hbg-profile-border="none"] {--hbg-editor-profile-border:transparent}
body[data-hbg-site-border] #view-perfil-publico:not([data-hbg-profile-border]) {
  --hbg-editor-profile-border: var(--hbg-global-border);
}
#view-perfil-publico:is([data-hbg-profile-border], body[data-hbg-site-border] *) :is(
  .hbg-public-hero, .hbg-public-panel, .hbg-public-activity-card,
  .hbg-public-gallery-activity-panel, .hbg-public-forum-section,
  .hbg-topics-panel, .hbg-publications-panel, .hbg-stats-panel,
  .hbg-public-stats-card, .hbg-public-badge-showcase,
  .room-card, .hbg-friend-person, #hbg-friends-panel,
  .hbg-public-summary-panel, .hbg-r40-stats-card
) {
  border-color: var(--hbg-editor-profile-border) !important;
}

/* As decorações de Acessórios do antigo editor não serão reaplicadas.
   Este seletor só desativa acessório se algum atributo antigo persistir. */
#view-perfil-publico[data-hbg-profile-accessory] .hbg-public-hero::before,
#view-perfil-publico[data-hbg-profile-accessory] .hbg-public-hero::after {
  content: none !important;
}
/* FIM HBG R40.20 */

/* HBG R40.21 — Fundos independentes de Todo o HBG e Perfil Público.
   Cole apenas no FINAL do CSS, depois das regras R40.20.
   A escolha do site NÃO altera o Perfil Público, nem o contrário. */
body[data-hbg-wall-scope="site"],
body[data-hbg-wall-scope="site"].hbg-shop-wallpaper-on,
body[data-hbg-wall-scope="profile"]:not(.hbg-shop-wallpaper-on),
body[data-hbg-wall-scope="visitor"]:not(.hbg-shop-wallpaper-on) {
  background: var(--hbg-editor-page-wall, var(--hbg-wall-original)) fixed !important;
}
/* A Loja conserva seu fundo comprado no Perfil Público, quando equipado.
   Os fundos gratuitos de Todo o HBG permanecem independentes da Loja. */
/* FIM HBG R40.21 */

/* HBG R40.22 — Fundos adquiridos independentes entre Todo o HBG e Perfil Público.
   Cole NO FINAL do CSS. Preserva todas as regras aprovadas de outros painéis. */
body[data-hbg-wall-scope="site"].hbg-shop-wallpaper-on,
body[data-hbg-wall-scope="profile"].hbg-shop-wallpaper-on,
body[data-hbg-wall-scope="visitor"].hbg-shop-wallpaper-on {
  background-image:
    linear-gradient(135deg,rgba(11,13,24,.28),rgba(11,14,25,.38)),
    var(--hbg-shop-wallpaper-url) !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center, center !important;
  background-size: cover, auto !important;
  background-attachment: fixed, fixed !important;
}
#hbg-edit-v2-choices .hbg-editor-shop-refresh {
  margin: 8px 0 5px; padding: 7px 12px;
  color: #ddd3f4; border-radius: 8px;
  border: 1px solid rgba(217,182,93,.28);
  background: rgba(217,182,93,.07);
  cursor: pointer;
}
#hbg-edit-v2-choices .hbg-editor-shop-refresh:hover {
  border-color: rgba(217,182,93,.7);
}


/* HBG R40.23 — Fundos de Loja: decisão final pelo escopo ATIVO da página. */
body[data-hbg-wall-scope="site"]:not(.hbg-shop-wallpaper-on),
body[data-hbg-wall-scope="profile"]:not(.hbg-shop-wallpaper-on),
body[data-hbg-wall-scope="visitor"]:not(.hbg-shop-wallpaper-on) {
  background: var(--hbg-editor-page-wall, var(--hbg-wall-original)) fixed !important;
}
body[data-hbg-wall-scope="site"].hbg-shop-wallpaper-on,
body[data-hbg-wall-scope="profile"].hbg-shop-wallpaper-on,
body[data-hbg-wall-scope="visitor"].hbg-shop-wallpaper-on {
  background-image: linear-gradient(135deg,rgba(11,13,24,.28),rgba(11,14,25,.38)),var(--hbg-shop-wallpaper-url) !important;
  background-size:cover,auto !important;
  background-repeat:no-repeat,repeat !important;
  background-position:center,center !important;
  background-attachment:fixed,fixed !important;
}
/* Retirar seletor antigo mesmo se sobrar markup em páginas em cache. */
#hbg-editor-layer .hbg-editor-r18-navigation{display:none !important}
/* Avisos de informação não bloqueiam a navegação, diferentemente do alert() nativo. */
#hbg-soft-notice{
 position:fixed;z-index:2147483000;left:50%;bottom:26px;
 transform:translate(-50%,10px);opacity:0;pointer-events:none;
 width:max-content;max-width:min(520px,calc(100vw - 28px));
 padding:13px 19px;border:1px solid rgba(217,182,93,.5);border-radius:12px;
 background:rgba(26,24,40,.97);box-shadow:0 15px 45px #0009;
 color:#f5e5bb;font:600 12px/1.5 Inter,sans-serif;white-space:pre-line;
 text-align:center;transition:opacity .16s,transform .16s;
}
#hbg-soft-notice.is-visible{opacity:1;transform:translate(-50%,0)}
/* Lista de membros identificados, visível somente dentro do painel ADM protegido. */
#hbg-live-r4019 .hbg-live-online-list{margin-top:16px;padding:16px;border:1px solid rgba(217,182,93,.18);border-radius:12px;background:#101119}
#hbg-live-r4019 .hbg-live-online-list h3{font-size:14px;margin:0 0 5px;color:#f0d89f}
#hbg-live-r4019 .hbg-live-online-list>p{font-size:11px;color:#b7afc1;margin:0 0 12px}
#hbg-live-r4019 #hbg-live-members{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
#hbg-live-r4019 #hbg-live-members>p{font-size:12px;color:#aaa6ba;margin:0}
#hbg-live-r4019 .hbg-live-member{display:flex;align-items:center;gap:12px;min-width:0;padding:10px;border:1px solid #343046;border-radius:10px;background:#1a1928}
#hbg-live-r4019 .hbg-live-member img{width:43px;height:43px;object-fit:contain;flex:none;border-radius:50%;background:#272336}
#hbg-live-r4019 .hbg-live-member div{min-width:0;display:flex;flex-direction:column}
#hbg-live-r4019 .hbg-live-member strong{color:#f4d98d;font-size:12px;overflow-wrap:anywhere}
#hbg-live-r4019 .hbg-live-member small{color:#aaa6ba;font-size:10px;line-height:1.4}
/* FIM HBG R40.23 */

/* HBG R40.28 — Rostinhos menores no painel de partidas Live (HBG 1). */
#hbg-live-r28 .r28-head {width:46px!important;height:46px!important;border-radius:9px!important}
#hbg-live-r28 .r28-head img {width:43px!important;height:43px!important;object-fit:contain!important}
#hbg-live-r28 .r28-vs {margin-top:9px!important}
@media(max-width:580px){
 #hbg-live-r28 .r28-head{width:42px!important;height:42px!important}
 #hbg-live-r28 .r28-head img{width:39px!important;height:39px!important}
}


/* HBG Spotify Connect: visual isolado, sem alterar a Jukebox Trax */
#hbg-public-spotify[hidden],#hbg-spotify-jukebox[hidden]{display:none!important}
#hbg-public-spotify{width:min(100%,390px);margin:14px 0 10px;padding:13px 14px;border:1px solid rgba(91,210,141,.35);border-radius:13px;background:linear-gradient(135deg,rgba(15,39,27,.92),rgba(23,25,37,.94));color:#ecf6ef;box-shadow:0 8px 25px rgba(0,0,0,.12)}
#hbg-public-spotify header,#hbg-spotify-jukebox header{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:10px;font-size:11px;color:#a6b9ac;font-weight:700;letter-spacing:.04em}
.hbg-spotify-brand{color:#1ed760;font-size:14px;font-weight:900;letter-spacing:-.015em}
.hbg-spotify-live{color:#92e6b0;font-size:10px}
.hbg-spotify-track{display:flex;align-items:center;gap:11px;min-width:0}
.hbg-spotify-cover{width:62px;height:62px;flex:none;object-fit:cover;border-radius:8px;background:#1b2c20}
.hbg-spotify-info{display:flex;flex-direction:column;min-width:0;gap:4px}
.hbg-spotify-info strong{font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.hbg-spotify-info span{font-size:11px;color:#c4d1c8;overflow-wrap:anywhere}
.hbg-spotify-info a{font-size:11px;color:#77ef9e;text-decoration:underline;text-underline-offset:2px}
.hbg-spotify-off{font-size:12px;color:#c1cfc4;margin:6px 0;line-height:1.5}
.hbg-spotify-actions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:12px}
.hbg-spotify-actions button,.hbg-spotify-go-profile{border:1px solid rgba(85,211,133,.6);background:rgba(15,91,44,.4);color:#ddffe8;border-radius:9px;padding:7px 9px;cursor:pointer;font:600 11px/1.35 Inter,system-ui,sans-serif}
.hbg-spotify-actions button:hover,.hbg-spotify-go-profile:hover{background:rgba(15,120,55,.5)}
.hbg-spotify-actions button:disabled{opacity:.5;cursor:wait}
#hbg-spotify-privacy-row{display:flex;gap:5px;align-items:center;color:#cad9ce;font-size:11px}
#hbg-spotify-privacy-row input{accent-color:#1ed760}
#hbg-spotify-profile-message{display:block;color:#a9eabb;font-size:10px;margin-top:6px}
#hbg-spotify-jukebox{margin:8px 12px 12px;border:1px solid rgba(91,210,141,.3);background:rgba(14,34,25,.75);border-radius:11px;padding:12px;color:#e9fff1}
#hbg-spotify-jukebox .hbg-spotify-cover{width:48px;height:48px}
#hbg-spotify-jukebox .hbg-spotify-info strong{font-size:12px}
#hbg-spotify-jukebox small{display:block;margin:8px 0;color:#c0d4c5;font-size:10px;line-height:1.45}
#hbg-spotify-jukebox .hbg-spotify-go-profile{display:inline-flex;margin-top:4px}
@media(max-width:600px){#hbg-public-spotify{width:100%;padding:11px}#hbg-public-spotify .hbg-spotify-cover{width:54px;height:54px}}

/* Preservar a semantica de [hidden] mesmo dentro das areas display:flex. */
#hbg-public-spotify [hidden]{display:none!important}


/* HBG R40.34 — Spotify Connect + playlists privadas */
#hbg-spotify-jukebox .hbg-sp34-player{display:grid;gap:9px;padding:11px 0;border-top:1px solid #295a3b}
#hbg-spotify-jukebox .hbg-sp34-buttons{display:flex;justify-content:center;gap:9px;align-items:center}
#hbg-spotify-jukebox .hbg-sp34-buttons button{height:36px;min-width:40px;display:grid;place-items:center;font-size:18px;background:#153c26;color:#e2ffe9;border:1px solid #3b8756;border-radius:9px;cursor:pointer}
#hbg-spotify-jukebox .hbg-sp34-buttons button#hbg-sp34-play{height:42px;min-width:50px;border-color:#1ed760;background:#1e7c3d;color:#fff}
#hbg-spotify-jukebox .hbg-sp34-buttons button:hover{background:#23633c}
#hbg-spotify-jukebox button:disabled{opacity:.45;cursor:not-allowed}
#hbg-spotify-jukebox .hbg-sp34-label{font-size:11px;color:#c0e3cb;font-weight:800}
#hbg-spotify-jukebox #hbg-sp34-device{width:100%;padding:9px 10px;background:#0d2117;color:#e4ffee;border:1px solid #407254;border-radius:8px;outline:none;font-size:11px}
#hbg-spotify-jukebox .hbg-sp34-volrow{display:flex;gap:8px;align-items:center;color:#bdd5c6;font-size:11px}
#hbg-spotify-jukebox .hbg-sp34-volrow input{flex:1;accent-color:#1ed760;min-width:0}
#hbg-spotify-jukebox #hbg-sp34-volnum{width:36px;text-align:right;font-variant-numeric:tabular-nums}
#hbg-spotify-jukebox #hbg-sp34-status{display:block;color:#b9e5c7;font-size:10px;line-height:1.4;margin:0}
#hbg-spotify-jukebox .hbg-sp34-library{margin-top:14px;padding-top:12px;border-top:1px solid #2d6743}
#hbg-spotify-jukebox .hbg-sp34-library-heading{display:flex;justify-content:space-between;align-items:center;gap:9px}
#hbg-spotify-jukebox .hbg-sp34-library-heading strong{font-size:13px;color:#e6fff0}
#hbg-spotify-jukebox .hbg-sp34-library-heading button,#hbg-spotify-jukebox .hbg-sp34-pager button,#hbg-spotify-jukebox .hbg-sp34-track-head button,#hbg-spotify-jukebox .hbg-sp34-more{border:1px solid #467759;background:#1a4030;color:#e1f9e8;padding:6px 8px;border-radius:8px;font-size:11px;cursor:pointer}
#hbg-spotify-jukebox .hbg-sp34-helper{color:#a9c7b2;font-size:10px;line-height:1.45;margin:7px 0 10px}
#hbg-spotify-jukebox #hbg-sp34-playlists{display:grid;gap:7px}
#hbg-spotify-jukebox .hbg-sp34-playlist{display:flex;align-items:flex-start;gap:9px;padding:9px 7px;border:1px solid #31533e;background:rgba(10,26,17,.6);border-radius:9px;min-width:0}
#hbg-spotify-jukebox .hbg-sp34-playlist>img{height:48px;width:48px;object-fit:contain;flex:none;border-radius:5px}
#hbg-spotify-jukebox .hbg-sp34-pldata{display:grid;gap:4px;min-width:0;flex:1}
#hbg-spotify-jukebox .hbg-sp34-pldata strong,#hbg-spotify-jukebox .hbg-sp34-trackrow strong{font-size:11px;color:#effff2;overflow-wrap:anywhere}
#hbg-spotify-jukebox .hbg-sp34-pldata span,#hbg-spotify-jukebox .hbg-sp34-trackrow span{font-size:10px;color:#a8bdb0}
#hbg-spotify-jukebox .hbg-sp34-plactions{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
#hbg-spotify-jukebox .hbg-sp34-plactions :is(button,a),#hbg-spotify-jukebox .hbg-sp34-trackrow button{font-size:10px;font-weight:700;color:#d7fce2;padding:5px 7px;border:1px solid #3c7551;border-radius:7px;background:#1b482e;cursor:pointer;text-decoration:none}
#hbg-spotify-jukebox .hbg-sp34-pager{display:flex;align-items:center;justify-content:space-between;margin:8px 0;color:#b4cbb9;font-size:10px;gap:8px}
#hbg-spotify-jukebox #hbg-sp34-tracks{padding:9px 0;margin-top:10px;border-top:1px solid #3b7750}
#hbg-spotify-jukebox .hbg-sp34-track-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:7px}
#hbg-spotify-jukebox .hbg-sp34-trackrow{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid rgba(108,173,122,.18)}
#hbg-spotify-jukebox .hbg-sp34-trackrow img{width:35px;height:35px;object-fit:contain}
#hbg-spotify-jukebox .hbg-sp34-trackrow>div{min-width:0;flex:1;display:grid;gap:4px}
#hbg-spotify-jukebox .hbg-sp34-more{margin-top:10px}
#hbg-spotify-jukebox [hidden]{display:none!important}


/* ================================================================
   HBG R40.35 — Spotify compacto na area de Sentar / Acenar / Dancas
   Apenas painel do Perfil Publico. Jukebox Trax e Spotify Connect intactos.
   ================================================================ */
#view-perfil-publico .hbg-public-rooms-stack:has(> #hbg-public-spotify:not([hidden])) {
  flex: 0 0 198px !important;
  width: 198px !important;
  min-width: 198px !important;
}
#view-perfil-publico .hbg-public-rooms-stack > #hbg-public-spotify {
  display:block;
  box-sizing:border-box;
  align-self:flex-start;
  width:198px !important;
  max-width:198px !important;
  min-width:0 !important;
  margin:3px 0 0 !important;
  padding:7px 8px 8px !important;
  background:linear-gradient(135deg,rgba(14,35,26,.95),rgba(21,27,35,.96));
  border:1px solid rgba(65,184,112,.35);
  border-radius:9px;
  box-shadow:none;
}
#view-perfil-publico #hbg-public-spotify[hidden]{display:none!important}
#view-perfil-publico #hbg-public-spotify header{
  display:flex;justify-content:space-between;align-items:center;gap:5px;
  margin:0 0 5px;padding:0;
  font-size:9px;letter-spacing:.01em;line-height:1.1;
}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-brand{font-size:10px;line-height:1.2;white-space:nowrap}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-live{font-size:8px;font-weight:800;white-space:nowrap}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-header-right{display:inline-flex;align-items:center;gap:5px;min-width:0}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-config{
  appearance:none;display:grid;place-items:center;flex:none;
  width:19px;height:19px;margin:0;padding:0;border:1px solid rgba(110,190,137,.4);
  border-radius:5px;background:#193624;color:#b8e7c3;cursor:pointer;font-size:12px;line-height:1;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-config:hover{color:#fff;border-color:#1ed760}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-track{
  display:flex;align-items:center;gap:6px;min-width:0;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-cover,
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-no-cover {
  box-sizing:border-box;width:36px;height:36px;flex:0 0 36px;
  border-radius:5px;object-fit:cover;background:#183020;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-no-cover{
  display:grid;place-items:center;font-size:17px;color:#63d58a;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels strong,
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels span{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  line-height:1.2;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels strong{font-size:10px;font-weight:800;color:#ebfff1}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels span{font-size:9px;color:#b9d5c2}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-open{
  display:grid;place-items:center;flex:0 0 13px;text-decoration:none;color:#83e6a0;
  font-weight:800;font-size:13px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-open:hover{color:white}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-no-track{
  margin:1px 0;color:#bbd4c3;font-size:10px;line-height:1.35;
}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-actions{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  margin:7px 0 0;padding:7px 0 0;border-top:1px solid rgba(96,181,126,.23);
}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-actions[hidden]{display:none!important}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-actions button{
  font-size:10px;padding:6px 7px;
}
#view-perfil-publico #hbg-public-spotify #hbg-spotify-privacy-row{
  font-size:9px;line-height:1.35;white-space:normal;
}
#view-perfil-publico #hbg-public-spotify #hbg-spotify-profile-message{
  display:block;margin:5px 0 0;font-size:9px;line-height:1.3;
  overflow-wrap:anywhere;
}
#view-perfil-publico #hbg-public-spotify #hbg-spotify-profile-message:empty{display:none!important}
#view-perfil-publico #hbg-public-spotify [hidden]{display:none!important}
@media(max-width:640px){
  #view-perfil-publico .hbg-public-rooms-stack:has(> #hbg-public-spotify:not([hidden])) {
    flex-basis:156px !important;width:156px !important;min-width:156px !important;
  }
  #view-perfil-publico .hbg-public-rooms-stack > #hbg-public-spotify {
    width:156px !important;max-width:156px !important;padding:7px !important;
  }
  #view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-cover,
  #view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-no-cover {
    width:30px;height:30px;flex-basis:30px;
  }
  #view-perfil-publico #hbg-public-spotify .hbg-spotify-live{font-size:7px}
}
/* FIM HBG R40.35 */


/* ==============================================================
   HBG R40.35.1 - Ajustes VISUAIS do Perfil Publico
   1. Spotify menor para caber com folga no cabeçalho.
   2. Amigos alinhado ao lado do ícone Ver quartos (<<).
   Nao altera JS, IDs, privacidade, autenticação ou Jukebox.
   ============================================================== */
/* Botão Amigos existe em dois modos (dono e visitante). O botão
   original continua no DOM e mantém seus ouvintes de clique. */
#view-perfil-publico .hbg-public-actions {
  position: relative;
}
#view-perfil-publico .hbg-public-actions #hbg-friend-action[data-relationship="self"]:not([hidden]),
#view-perfil-publico .hbg-public-actions #hbg-public-friends-view:not([hidden]) {
  position: absolute !important;
  left: 72px !important;
  top: 0 !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 4;
}

/* O Spotify mantem o mesmo lugar, mas ocupa menos espaço. */
#view-perfil-publico .hbg-public-rooms-stack:has(> #hbg-public-spotify:not([hidden])) {
  flex: 0 0 180px !important;
  width: 180px !important;
  min-width: 180px !important;
}
#view-perfil-publico .hbg-public-rooms-stack > #hbg-public-spotify {
  box-sizing: border-box;
  width: 180px !important;
  max-width: 180px !important;
  margin: 1px 0 0 !important;
  padding: 5px 7px 6px !important;
  border-radius: 8px;
}
#view-perfil-publico #hbg-public-spotify header {
  margin: 0 0 3px !important;
  gap: 4px;
  line-height: 1;
}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-brand {
  font-size: 9px;
}
#view-perfil-publico #hbg-public-spotify .hbg-spotify-live {
  font-size: 7px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-header-right {
  gap: 4px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-config {
  width: 16px;
  height: 16px;
  font-size: 11px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-track {
  gap: 5px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-cover,
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-no-cover {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 4px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels {
  gap: 2px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels strong {
  font-size: 9px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-labels span {
  font-size: 8px;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-open {
  font-size: 12px;
  flex-basis: 12px;
}
/* Em telas pequenas, mantém a redução proporcional sem empurrar o avatar. */
@media(max-width:600px) {
  #view-perfil-publico .hbg-public-actions #hbg-friend-action[data-relationship="self"]:not([hidden]),
  #view-perfil-publico .hbg-public-actions #hbg-public-friends-view:not([hidden]) {
    /* O cabeçalho mobile centraliza os controles; manter o botão no fluxo
       evita deslocá-lo para a esquerda da própria caixa. */
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
  }
  #view-perfil-publico .hbg-public-rooms-stack:has(> #hbg-public-spotify:not([hidden])) {
    flex-basis: 148px !important;
    width: 148px !important;
    min-width: 148px !important;
  }
  #view-perfil-publico .hbg-public-rooms-stack > #hbg-public-spotify {
    width: 148px !important;
    max-width: 148px !important;
    padding: 5px 6px !important;
  }
  #view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-cover,
  #view-perfil-publico #hbg-public-spotify .hbg-sp35-mini-no-cover {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
  }
}
/* FIM HBG R40.35.1 */

/* ====================================================================
   HBG R40.36 — Spotify Studio, novo painel próprio do HBG.
   Mantém o mini card pequeno; engrenagem flutua FORA do perfil.
   ==================================================================== */
#view-perfil-publico #hbg-public-spotify .hbg-sp36-open-song {
  display:flex;align-items:center;gap:5px;flex:1;min-width:0;min-height:28px;
  padding:0;margin:0;border:0;border-radius:4px;background:transparent;
  text-align:left;color:inherit;cursor:pointer;font:inherit;
}
#view-perfil-publico #hbg-public-spotify .hbg-sp36-open-song:hover strong,
#view-perfil-publico #hbg-public-spotify .hbg-sp36-open-song:focus-visible strong{color:#1ed760;text-decoration:underline}
#view-perfil-publico #hbg-public-spotify .hbg-sp36-open-song:focus-visible{outline:2px solid #1ed760;outline-offset:2px}
/* Menu anexado ao BODY em vez de ao cartão do perfil */
.hbg-sp36-popover{
  box-sizing:border-box!important;position:fixed!important;z-index:2147482950!important;
  display:flex;flex-direction:column;gap:10px;width:246px;max-width:calc(100vw - 16px);
  padding:14px!important;margin:0!important;
  color:#e8fff0!important;border:1px solid #39734f!important;
  border-radius:12px!important;background:#112319!important;
  box-shadow:0 16px 42px rgba(0,0,0,.64)!important;
  font-family:inherit;
}
.hbg-sp36-popover[hidden]{display:none!important}
.hbg-sp36-popover button{padding:9px 11px;color:#eaffef;background:#235038;border:1px solid #386a4b;border-radius:8px;font-weight:700;cursor:pointer}
.hbg-sp36-popover button:hover{background:#2e6847}
.hbg-sp36-popover label{display:flex;align-items:flex-start;gap:9px;color:#e7fff0;font-size:12px;line-height:1.45}
.hbg-sp36-popover input{accent-color:#1ed760;margin-top:3px}
.hbg-sp36-popover small{font-size:11px;color:#acd0b7;line-height:1.45;overflow-wrap:anywhere}
.hbg-sp36-popover small:empty{display:none}
#hbg-spotify-jukebox .hbg-sp36-open-jukebox{display:inline-flex;background:#1f6336;border-color:#1ed760;color:white;font-weight:800}

body.hbg-sp36-modal-open{overflow:hidden!important}
#hbg-sp36-root{--sp-green:#1ed760;--sp-bg:#050706;--sp-card:#202321;--sp-muted:#aeb6b0;--sp-radius:12px;
  position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.82);
  display:flex;justify-content:center;align-items:center;padding:clamp(6px,2vh,24px);box-sizing:border-box;
  color:#f1f5f1;font-family:Arial,Helvetica,sans-serif;
}
#hbg-sp36-root[hidden]{display:none!important}
#hbg-sp36-root *{box-sizing:border-box}
#hbg-sp36-root button,#hbg-sp36-root a,#hbg-sp36-root input{font-family:inherit}
#hbg-sp36-root button{cursor:pointer}
#hbg-sp36-root button:disabled{opacity:.4;cursor:not-allowed}
#hbg-sp36-root button:focus-visible,#hbg-sp36-root a:focus-visible,#hbg-sp36-root input:focus-visible{outline:2px solid var(--sp-green);outline-offset:2px}
#hbg-sp36-root .hbg-sp36-dialog{
  width:min(1410px,100%);height:min(860px,94vh);min-height:min(440px,90vh);
  border:1px solid #27302a;border-radius:15px;box-shadow:0 30px 90px #000;
  overflow:hidden;display:grid;grid-template-rows:64px minmax(0,1fr) 88px;
  background:var(--sp-bg);color:#f3f5f2;
}
#hbg-sp36-root .hbg-sp36-top{display:flex;align-items:center;gap:17px;padding:0 16px;background:#0d100e;border-bottom:1px solid #232a25;min-width:0}
#hbg-sp36-root .hbg-sp36-identity{display:flex;align-items:center;gap:7px;flex:none;white-space:nowrap}
#hbg-sp36-root .hbg-sp36-identity strong{font-size:18px;font-weight:900;letter-spacing:-.5px}
#hbg-sp36-root .hbg-sp36-identity strong span{font-weight:500;color:#b6c3ba;font-size:14px}
#hbg-sp36-root .hbg-sp36-identity small{margin-left:5px;font-size:9px;letter-spacing:.6px;color:#a8b8ab}
#hbg-sp36-root .hbg-sp36-logo{background:#1ed760;border-radius:100%;color:#09180c;width:29px;height:29px;display:grid;place-items:center;font-size:25px;font-weight:800}
#hbg-sp36-root #hbg-sp36-searchform{display:flex;align-items:center;gap:8px;width:min(475px,38vw);margin-left:auto;padding:2px 4px 2px 15px;background:#252a27;border:1px solid #414943;border-radius:30px;color:white;height:39px}
#hbg-sp36-root #hbg-sp36-searchform>span{font-size:23px;color:#c3cbc4}
#hbg-sp36-root #hbg-sp36-search{background:transparent;border:0;color:white;outline:0;min-width:0;flex:1;font-size:13px}
#hbg-sp36-root #hbg-sp36-searchform button{border:0;border-radius:22px;padding:7px 12px;background:#3f5143;color:white;font-size:11px;font-weight:800}
#hbg-sp36-root .hbg-sp36-official{color:#dce4df;border:1px solid #566257;border-radius:30px;padding:9px 12px;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
#hbg-sp36-root .hbg-sp36-official:hover{color:#fff;border-color:#1ed760}
#hbg-sp36-root .hbg-sp36-close{background:#242a25;color:white;border:1px solid #57645a;border-radius:50%;width:34px;height:34px;flex:0 0 34px;font-size:16px}
#hbg-sp36-root .hbg-sp36-area{display:grid;grid-template-columns:minmax(174px,220px) minmax(0,1fr) minmax(170px,224px);gap:7px;min-height:0;padding:7px}
#hbg-sp36-root .hbg-sp36-sidebar,#hbg-sp36-root .hbg-sp36-devicebar{background:#151918;border-radius:var(--sp-radius);overflow:auto;padding:12px 9px}
#hbg-sp36-root .hbg-sp36-sidebar>button{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:8px;background:transparent;color:#c7ccc8;text-align:left;padding:10px;font-size:12px;font-weight:700}
#hbg-sp36-root .hbg-sp36-sidebar>button.active{background:#273c2d;color:#fff}
#hbg-sp36-root .hbg-sp36-sidebar>button:hover{background:#303a32;color:#fff}
#hbg-sp36-root .hbg-sp36-sidebar>button:first-letter{font-size:18px}
#hbg-sp36-root .hbg-sp36-side-divider{height:1px;background:#353c37;margin:12px 6px 15px}
#hbg-sp36-root .hbg-sp36-small-title{display:block;color:#adb8af;font-size:10px;letter-spacing:1px;margin:0 10px 7px}
#hbg-sp36-root #hbg-sp36-sidebar-playlists button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 6px;background:transparent;border:0;border-radius:7px;text-align:left;color:#cbd4ce;font-size:11px}
#hbg-sp36-root #hbg-sp36-sidebar-playlists button:hover{background:#303833}
#hbg-sp36-root #hbg-sp36-sidebar-playlists button span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
#hbg-sp36-root .hbg-sp36-side-cover{width:36px;height:36px;flex:0 0 36px;border-radius:5px;object-fit:cover}
#hbg-sp36-root .hbg-sp36-main{min-width:0;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#163f2a 0%,#202924 24%,#191c1a 48%,#171a18 100%);border-radius:var(--sp-radius);padding:20px clamp(14px,2vw,26px)}
#hbg-sp36-root .hbg-sp36-main::-webkit-scrollbar{width:8px}
#hbg-sp36-root .hbg-sp36-main::-webkit-scrollbar-thumb{background:#3d4840;border-radius:8px}
#hbg-sp36-root h1{font-size:clamp(23px,3.1vw,39px);line-height:1.1;color:white;margin:0;overflow-wrap:anywhere;font-weight:850}
#hbg-sp36-root h2{font-size:18px;color:white;margin:18px 0 14px}
#hbg-sp36-root .hbg-sp36-hero{display:flex;align-items:center;gap:20px;margin:-20px -26px 21px;padding:28px 28px 32px;min-height:211px;background:linear-gradient(130deg,#206d43,#143f2c 45%,#141a16 100%)}
#hbg-sp36-root .hbg-sp36-hero-cover{height:clamp(110px,14vw,170px);width:clamp(110px,14vw,170px);flex:none;box-shadow:0 7px 28px rgba(0,0,0,.5);object-fit:cover;border-radius:5px}
#hbg-sp36-root .hbg-sp36-hero>div{min-width:0}
#hbg-sp36-root .hbg-sp36-hero small{display:block;font-size:10px;font-weight:900;letter-spacing:1px;color:#dbefe0;margin-bottom:10px}
#hbg-sp36-root .hbg-sp36-hero p{color:#cee2d2;font-size:13px;line-height:1.5}
#hbg-sp36-root .hbg-sp36-hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:17px}
#hbg-sp36-root .hbg-sp36-hero-actions>a{color:white;font-size:12px;text-decoration:none;font-weight:700}
#hbg-sp36-root .hbg-sp36-primary{display:inline-flex;align-items:center;justify-content:center;background:#1ed760!important;color:#06250e!important;border:0!important;padding:11px 20px;border-radius:30px;font-size:13px;font-weight:900;text-decoration:none}
#hbg-sp36-root .hbg-sp36-primary:hover{background:#40f07a!important}
#hbg-sp36-root .hbg-sp36-sectiontitle{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 12px}
#hbg-sp36-root .hbg-sp36-sectiontitle h2{margin:0}
#hbg-sp36-root .hbg-sp36-sectiontitle button{border:0;background:transparent;color:#c1cec4;font-size:12px;font-weight:700}
#hbg-sp36-root .hbg-sp36-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:12px}
#hbg-sp36-root .hbg-sp36-grid-card{display:flex;flex-direction:column;min-width:0;border-radius:9px;padding:11px;background:#242b26;color:white;text-decoration:none}
#hbg-sp36-root .hbg-sp36-grid-card:hover{background:#344035}
#hbg-sp36-root .hbg-sp36-grid-card>button{display:flex;flex-direction:column;text-align:left;width:100%;padding:0;margin:0;background:none;border:0;color:white;min-width:0;gap:6px}
#hbg-sp36-root .hbg-sp36-grid-card strong{font-size:12px;color:#fff;overflow-wrap:anywhere}
#hbg-sp36-root .hbg-sp36-grid-card span{font-size:11px;color:#b1bab2;overflow-wrap:anywhere}
#hbg-sp36-root .hbg-sp36-album-cover{width:100%;aspect-ratio:1;max-height:170px;object-fit:cover;border-radius:6px;margin:0 0 5px}
#hbg-sp36-root .hbg-sp36-cover-placeholder{display:grid;place-items:center;background:linear-gradient(130deg,#267c47,#173b2c);color:#c5f7d4;font-size:42px}
#hbg-sp36-root .hbg-sp36-card-actions{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:auto;padding-top:11px}
#hbg-sp36-root .hbg-sp36-card-actions button{border:0;border-radius:8px;background:#245e36;color:#caffda;padding:7px 10px;font-size:11px;font-weight:800}
#hbg-sp36-root .hbg-sp36-card-actions a{color:#d5ebdb;text-decoration:none;font-size:16px}
#hbg-sp36-root .hbg-sp36-note,#hbg-sp36-root .hbg-sp36-empty{font-size:12px;color:#b5c6ba;line-height:1.6}
#hbg-sp36-root .hbg-sp36-empty{padding:30px 9px}
#hbg-sp36-root .hbg-sp36-welcome{max-width:580px;padding:50px 6px;color:#c6d1c8}
#hbg-sp36-root .hbg-sp36-welcome>span{font-size:58px;color:#1ed760}
#hbg-sp36-root .hbg-sp36-welcome h1{margin:16px 0}
#hbg-sp36-root .hbg-sp36-welcome p{font-size:14px;line-height:1.7}
#hbg-sp36-root .hbg-sp36-welcome button{border:0;padding:13px 20px;background:#1ed760;color:#05240b;border-radius:24px;font-weight:800}
#hbg-sp36-root .hbg-sp36-home-extras{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
#hbg-sp36-root .hbg-sp36-home-extras button{background:#28372e;border:1px solid #405c47;color:#f0fff0;border-radius:10px;padding:12px;font-weight:700;font-size:12px}
#hbg-sp36-root .hbg-sp36-devicebar{padding:17px 13px}
#hbg-sp36-root .hbg-sp36-side-head{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#fff}
#hbg-sp36-root .hbg-sp36-side-head strong{font-size:14px}
#hbg-sp36-root .hbg-sp36-side-head button{background:transparent;color:#cce5d2;border:0;font-size:18px}
#hbg-sp36-root .hbg-sp36-devicebar>p{font-size:11px;color:#adb6ae;line-height:1.6;margin:18px 0}
#hbg-sp36-root #hbg-sp36-devices button{display:flex;align-items:center;text-align:left;gap:7px;padding:10px 8px;width:100%;border:1px solid transparent;border-radius:8px;background:transparent;color:#e5f4e8}
#hbg-sp36-root #hbg-sp36-devices button:hover{background:#27392d}
#hbg-sp36-root #hbg-sp36-devices button.selected{background:#203e29;border-color:#2a7c42}
#hbg-sp36-root #hbg-sp36-devices button>span:first-child{font-size:19px;color:#1ed760}
#hbg-sp36-root #hbg-sp36-devices button>span:nth-child(2){min-width:0;flex:1;display:grid;gap:3px}
#hbg-sp36-root #hbg-sp36-devices button strong{font-size:11px;overflow-wrap:anywhere}
#hbg-sp36-root #hbg-sp36-devices button small{font-size:10px;color:#b4c6ba}
#hbg-sp36-root #hbg-sp36-devices button i{font-style:normal;color:#1ed760;font-size:12px}
#hbg-sp36-root #hbg-sp36-devices>p,#hbg-sp36-root .hbg-sp36-device-note{color:#a8b8ac;line-height:1.6;font-size:11px}
#hbg-sp36-root .hbg-sp36-device-note{margin-top:24px;border-top:1px solid #343c36;padding-top:13px}
#hbg-sp36-root .hbg-sp36-tracks{display:grid;gap:2px;margin-top:15px}
#hbg-sp36-root .hbg-sp36-row{display:flex;align-items:center;gap:11px;padding:8px 7px;border-radius:6px;border-bottom:1px solid rgba(255,255,255,.045)}
#hbg-sp36-root .hbg-sp36-row:hover{background:#313934}
#hbg-sp36-root .hbg-sp36-number{width:17px;text-align:right;color:#a7afa7;font-size:11px}
#hbg-sp36-root .hbg-sp36-row-cover{width:39px;height:39px;border-radius:4px;object-fit:cover;flex:none;font-size:22px}
#hbg-sp36-root .hbg-sp36-row-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#hbg-sp36-root .hbg-sp36-row-title strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hbg-sp36-root .hbg-sp36-row-title small{font-size:11px;color:#a8b4aa;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#hbg-sp36-root .hbg-sp36-row>button,#hbg-sp36-root .hbg-sp36-row>a{border:0;background:transparent;color:#a9e9ba;font-size:14px;text-decoration:none;min-width:25px;text-align:center}
#hbg-sp36-root .hbg-sp36-row>button:hover{color:#1ed760}
#hbg-sp36-root .hbg-sp36-notice{background:#2f2b16;border:1px solid #6b632e;border-radius:8px;padding:12px;color:#f6ebbd;font-size:12px;line-height:1.65}
#hbg-sp36-root .hbg-sp36-notice button{background:#1f5c36;color:white;border:1px solid #1ed760;border-radius:6px;padding:7px 10px;margin:6px;font-weight:700}
#hbg-sp36-root .hbg-sp36-pager{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:10px;font-size:12px}
#hbg-sp36-root .hbg-sp36-pager button,#hbg-sp36-root .hbg-sp36-load,#hbg-sp36-root .hbg-sp36-back{background:#29382d;color:#eef7ee;border:1px solid #415a47;border-radius:7px;padding:10px 13px;font-size:12px}
#hbg-sp36-root .hbg-sp36-footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(205px,1fr) minmax(150px,1fr);align-items:center;gap:14px;padding:11px 18px;background:#0c100d;border-top:1px solid #28302a}
#hbg-sp36-root .hbg-sp36-current{display:flex;align-items:center;min-width:0;gap:10px}
#hbg-sp36-root .hbg-sp36-current-cover{width:53px;height:53px;flex:none;border-radius:5px;object-fit:cover;font-size:25px}
#hbg-sp36-root .hbg-sp36-current>div{min-width:0;display:grid;gap:3px}
#hbg-sp36-root .hbg-sp36-current strong{font-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
#hbg-sp36-root .hbg-sp36-current span{font-size:11px;color:#adbfb0;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
#hbg-sp36-root .hbg-sp36-current>a{color:#b7d3bd;text-decoration:none}
#hbg-sp36-root .hbg-sp36-transport{display:flex;align-items:center;flex-direction:column;gap:3px;min-width:0}
#hbg-sp36-root .hbg-sp36-buttons{display:flex;gap:14px;align-items:center}
#hbg-sp36-root .hbg-sp36-buttons button{border:0;background:none;color:#d6dfd7;font-size:19px;min-width:26px}
#hbg-sp36-root .hbg-sp36-buttons .hbg-sp36-play{display:grid;place-items:center;border-radius:50%;width:38px;height:38px;background:#f1fff3;color:#131813;font-size:18px}
#hbg-sp36-root .hbg-sp36-transport p{font-size:10px;color:#a9b9ab;min-height:12px;max-width:100%;margin:2px 0 0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hbg-sp36-root .hbg-sp36-volume{display:flex;align-items:center;gap:9px;justify-content:flex-end;font-size:11px;color:#a9bdb0}
#hbg-sp36-root .hbg-sp36-volume input{width:clamp(55px,9vw,150px);min-width:30px;accent-color:#1ed760}
#hbg-sp36-root .hbg-sp36-volume span{width:31px;text-align:right}
@media(max-width:1000px){
  #hbg-sp36-root .hbg-sp36-area{grid-template-columns:178px minmax(0,1fr)}
  #hbg-sp36-root .hbg-sp36-devicebar{display:none}
  #hbg-sp36-root .hbg-sp36-top{gap:9px}
  #hbg-sp36-root .hbg-sp36-identity small{display:none}
  #hbg-sp36-root .hbg-sp36-hero{margin:-20px -14px 19px;padding:25px 16px}
}
@media(max-width:670px){
  #hbg-sp36-root{padding:0}
  #hbg-sp36-root .hbg-sp36-dialog{height:100dvh;width:100vw;border:0;border-radius:0;grid-template-rows:58px minmax(0,1fr) 94px}
  #hbg-sp36-root .hbg-sp36-top{padding:0 10px;gap:8px}
  #hbg-sp36-root .hbg-sp36-identity strong{font-size:14px}
  #hbg-sp36-root .hbg-sp36-identity strong span{display:none}
  #hbg-sp36-root .hbg-sp36-logo{width:25px;height:25px;font-size:21px}
  #hbg-sp36-root #hbg-sp36-searchform{width:auto;flex:1;min-width:0;padding-left:7px;gap:4px}
  #hbg-sp36-root #hbg-sp36-searchform button{padding:7px 8px}
  #hbg-sp36-root .hbg-sp36-official{display:none}
  #hbg-sp36-root .hbg-sp36-area{grid-template-columns:60px minmax(0,1fr);gap:4px;padding:4px}
  #hbg-sp36-root .hbg-sp36-sidebar{padding:7px 3px}
  #hbg-sp36-root .hbg-sp36-sidebar>button{display:flex;flex-direction:column;gap:3px;text-align:center;padding:10px 2px;font-size:21px}
  #hbg-sp36-root .hbg-sp36-sidebar>button span{font-size:8px;line-height:1.15}
  #hbg-sp36-root #hbg-sp36-sidebar-playlists,.hbg-sp36-side-divider{display:none!important}
  #hbg-sp36-root .hbg-sp36-main{padding:16px 12px}
  #hbg-sp36-root .hbg-sp36-hero{gap:12px;margin:-16px -12px 18px;padding:17px 12px;min-height:145px}
  #hbg-sp36-root .hbg-sp36-hero-cover{height:88px;width:88px}
  #hbg-sp36-root .hbg-sp36-hero small{font-size:8px}
  #hbg-sp36-root .hbg-sp36-hero h1{font-size:22px}
  #hbg-sp36-root .hbg-sp36-hero p{font-size:11px}
  #hbg-sp36-root .hbg-sp36-hero-actions{gap:8px;margin-top:10px}
  #hbg-sp36-root .hbg-sp36-hero-actions>a{font-size:10px}
  #hbg-sp36-root .hbg-sp36-primary{font-size:11px;padding:8px 12px}
  #hbg-sp36-root .hbg-sp36-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #hbg-sp36-root .hbg-sp36-footer{padding:8px;grid-template-columns:minmax(80px,1fr) minmax(130px,1fr);gap:5px}
  #hbg-sp36-root .hbg-sp36-volume{display:none}
  #hbg-sp36-root .hbg-sp36-current-cover{width:36px;height:36px}
  #hbg-sp36-root .hbg-sp36-transport p{font-size:8px}
  #hbg-sp36-root .hbg-sp36-buttons{gap:3px}
  #hbg-sp36-root .hbg-sp36-buttons button{font-size:15px}
  #hbg-sp36-root .hbg-sp36-buttons .hbg-sp36-play{width:29px;height:29px;font-size:14px}
}
/* FIM HBG R40.36 */

/* R40.36.1 — Spotify como segundo modo da Jukebox, sem painel duplicado. */
#hbg-jukebox-root .hbg-jb-mode-card-spotify{
  width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  border-color:rgba(42,196,106,.55);
  background:linear-gradient(100deg,rgba(23,110,63,.25),rgba(23,110,63,.075));
  transition:background .15s ease,border-color .15s ease;
}
#hbg-jukebox-root .hbg-jb-mode-card-spotify:hover,
#hbg-jukebox-root .hbg-jb-mode-card-spotify:focus-visible{
  border-color:#1ed760;background:rgba(27,140,72,.25);
}
#hbg-jukebox-root .hbg-jb-mode-card-spotify:focus-visible{
  outline:2px solid #1ed760;outline-offset:2px;
}
#hbg-jukebox-root .hbg-jb-mode-card-spotify .hbg-jb-mode-symbol,
#hbg-jukebox-root .hbg-jb-mode-card-spotify .hbg-jb-mode-text strong{color:#5efc99}
#hbg-jukebox-root .hbg-jb-mode-tag-spotify{background:rgba(30,215,96,.15);color:#72ffa7}
#hbg-jukebox-root #hbg-spotify-jukebox{display:none!important}
/* FIM R40.36.1 */


/* HBG R40.36.3 — clicar no nome/capa da faixa também reproduz. */
#hbg-sp36-root .hbg-sp36-row>button.hbg-sp36-row-select{display:flex;align-items:center;gap:11px;flex:1;min-width:0;padding:0;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit}
#hbg-sp36-root .hbg-sp36-row>button.hbg-sp36-row-select .hbg-sp36-row-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#hbg-sp36-root .hbg-sp36-row>button.hbg-sp36-row-select:hover .hbg-sp36-row-title strong{color:#1ed760}
#hbg-sp36-root .hbg-sp36-row>button.hbg-sp36-row-select:focus-visible{outline:2px solid #1ed760;outline-offset:3px;border-radius:5px}

/* R40.40 — Dispositivo Spotify no navegador, informativo e não clicável. */
#hbg-sp36-root .hbg-sp36-browser-device{display:flex;align-items:center;gap:11px;margin:8px 0;padding:12px;border:1px solid #2b8252;background:rgba(27,99,57,.22);border-radius:12px;color:#defbe8}
#hbg-sp36-root .hbg-sp36-browser-device>span:first-child{font-size:20px;color:#50e487}
#hbg-sp36-root .hbg-sp36-browser-device>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#hbg-sp36-root .hbg-sp36-browser-device strong{font-size:13px}
#hbg-sp36-root .hbg-sp36-browser-device small{font-size:11px;color:#9db8a5}
#hbg-sp36-root .hbg-sp36-browser-device i{font-style:normal;color:#1ed760}

/* HBG R40.43 — Moderação visual, mantendo a paleta e o layout aprovado. */
.hbg-safety-report-action{appearance:none;border:1px solid #6f5a83;background:transparent;color:#e3ccf1;border-radius:9px;padding:6px 10px;font:600 11px Inter,Arial,sans-serif;cursor:pointer;display:inline-flex;gap:5px;align-items:center;justify-content:center;transition:background .18s,border-color .18s}
.hbg-safety-report-action:hover,.hbg-safety-report-action:focus-visible{background:#4b2f5d;border-color:#c59de0;color:#fff}
.hbg-forum-comment .hbg-safety-report-action,.hbg-gallery-comment-card .hbg-safety-report-action{margin-top:7px;font-size:10px;padding:5px 9px}
#hbg-safety-report-dialog{border:1px solid #765390;background:linear-gradient(145deg,#2c213a,#151320);border-radius:18px;box-shadow:0 28px 75px #000a;color:#f7eafa;padding:0;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 25px);overflow:auto}
#hbg-safety-report-dialog::backdrop{background:#090813cc;backdrop-filter:blur(4px)}
#hbg-safety-report-form{padding:23px;display:flex;flex-direction:column;gap:10px;font:13px Inter,Arial,sans-serif}
#hbg-safety-report-form header{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:4px}
#hbg-safety-report-form header h2{margin:5px 0;color:#f3d99a;font-size:20px;line-height:1.4}
#hbg-safety-report-target{margin:3px 0;color:#d9c3df;font-size:11px}
#hbg-safety-report-close{border:0;background:#4e3a60;color:#fff;border-radius:10px;font-size:22px;width:34px;height:34px;cursor:pointer}
.hbg-safety-eyebrow{color:#dfbe85;text-transform:uppercase;letter-spacing:2px;font-size:10px;font-weight:800}
#hbg-safety-report-form label,.hbg-safety-restrict-form label{display:flex;flex-direction:column;gap:6px;color:#e4d8ed;font-weight:700;font-size:11px}
#hbg-safety-report-form select,#hbg-safety-report-form textarea,.hbg-safety-restrict-form input,.hbg-safety-restrict-form textarea,.hbg-safety-restrict-form select,.hbg-safety-note,.hbg-safety-filter select{box-sizing:border-box;width:100%;background:#14101e;color:#fff;border:1px solid #655477;border-radius:9px;padding:10px;font:12px Inter,Arial,sans-serif;resize:vertical}
#hbg-safety-report-form :is(select,textarea):focus-visible,.hbg-safety-restrict-form :is(input,textarea,select):focus-visible{outline:2px solid #cfa9ee}
#hbg-safety-report-status,#hbg-safety-admin-status{font-size:11px;color:#e5d0ef;line-height:1.6}
#hbg-safety-admin-status.error{color:#ff9ca3}
.hbg-safety-btn{border:1px solid #b9a2e3;background:linear-gradient(160deg,#63438c,#46305f);color:#fff;padding:9px 13px;border-radius:9px;font:700 12px Inter,Arial,sans-serif;cursor:pointer}
.hbg-safety-btn-secondary{background:#251c34;color:#e7d7f4;border-color:#725c91}
.hbg-safety-btn:hover{filter:brightness(1.18)}.hbg-safety-btn:disabled{opacity:.5;cursor:not-allowed}
.hbg-safety-admin{margin-top:22px;padding:18px;border-radius:13px;border:1px solid #69547d;background:linear-gradient(160deg,#261b34,#191623)}
.hbg-safety-admin-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hbg-safety-admin-heading h3{font-size:18px;color:#f1dbaa;margin:6px 0 13px}
.hbg-safety-admin-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.hbg-safety-admin-nav button{cursor:pointer;background:#251f30;border:1px solid #705d85;color:#decce7;border-radius:10px;padding:9px 11px;font:700 11px Inter,Arial,sans-serif}
.hbg-safety-admin-nav button[aria-pressed="true"]{background:#624384;border-color:#c6a9f0;color:#fff}
.hbg-safety-filter{font-size:11px;color:#ddd;display:flex;align-items:center;gap:10px;max-width:330px;margin-bottom:12px}
.hbg-safety-filter select{max-width:155px}
#hbg-safety-admin-view{display:flex;flex-direction:column;gap:11px;max-height:650px;overflow:auto;padding-right:4px}
.hbg-safety-case{border:1px solid #645174;background:#201a2c;border-radius:11px;padding:14px;display:flex;flex-direction:column;gap:8px;line-height:1.5;color:#f4e9fa;overflow-wrap:anywhere}
.hbg-safety-case strong{font-size:13px;color:#f3d89c}.hbg-safety-case small{font-size:10px;color:#bfb0d0}.hbg-safety-case p{margin:3px 0;font-size:11px;color:#e9ddf1;white-space:pre-wrap}
.hbg-safety-actions{display:flex;gap:7px;flex-wrap:wrap}.hbg-safety-case .hbg-safety-btn{font-size:10px;padding:7px 10px}
.hbg-safety-restrict-form{display:flex;flex-direction:column;gap:10px;padding:14px;background:#211a2b;border:1px solid #624d76;border-radius:11px}
.hbg-safety-restrict-form h4{margin:0 0 4px;font-size:14px;color:#eddaaf}.hbg-safety-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.hbg-safety-empty{font-size:12px;color:#bdaecf;padding:15px 8px;text-align:center}
@media(max-width:660px){.hbg-safety-fields{grid-template-columns:1fr}.hbg-safety-admin{padding:12px}.hbg-safety-actions{flex-direction:column}}


/* ========================================================
   HBG R40.44 - Amizades em perfis visitados e foco na denúncia
   Escopo restrito aos dois ajustes solicitados.
   ======================================================== */
@media (min-width:601px){
  /* Botão de relacionamento fica ao lado do ícone de amigos, nunca por cima. */
  #view-perfil-publico .hbg-public-actions #hbg-friend-action:not([data-relationship="self"]):not([hidden]){
    position:absolute !important;left:72px !important;top:0 !important;right:auto !important;
    margin:0 !important;z-index:5;max-width:calc(100% - 72px);white-space:normal;
  }
  #view-perfil-publico .hbg-public-actions:has(#hbg-public-friends-view:not([hidden]))
    #hbg-friend-action:not([data-relationship="self"]):not([hidden]){
    left:144px !important;max-width:calc(100% - 144px);
  }
}
@media (max-width:600px){
  #view-perfil-publico .hbg-public-actions #hbg-friend-action:not([data-relationship="self"]):not([hidden]){
    position:static !important;left:auto !important;top:auto !important;right:auto !important;
    margin:0 !important;max-width:100%;white-space:normal;
  }
}
#hbg-safety-admin .hbg-safety-open-actions{margin:3px 0 5px;}
#hbg-safety-admin .hbg-safety-open-actions .hbg-safety-btn{
  border-color:#dfba71;background:#352b41;color:#ffebb7;font-size:11px;font-weight:800;
}
#hbg-forum-dialog .hbg-safety-focused-comment,
#image-zoom-modal .hbg-safety-focused-comment{
  outline:2px solid #f6cd69 !important;outline-offset:3px;
  background-color:rgba(225,180,81,.14) !important;
  box-shadow:0 0 0 5px rgba(227,178,73,.09),0 0 22px rgba(227,178,73,.26);
  scroll-margin-top:22px;
}
/* FIM R40.44 */


/* =========================================================
   HBG R40.44.1 — CORREÇÃO FINAL DO LAYOUT DE AMIZADE
   A R40.44 usava position:absolute + max-width calculado.
   Em perfis visitados isso reduzia o botão para poucos pixels,
   fazendo "Amigos" e "Adicionar amigo" vazarem para fora.
   Os atalhos voltam ao fluxo flex APENAS no perfil visitado.
   Não afeta o botão do próprio perfil nem suas ações de JS.
   ========================================================= */
#view-perfil-publico .hbg-public-actions:has(> #hbg-friend-action:not([data-relationship="self"]):not([hidden])) {
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:6px !important;
  max-width:100%;
}
/* O atalho público da lista de amigos fica após Ver quartos,
   sem posição absoluta herdada da R40.35.1. */
#view-perfil-publico .hbg-public-actions:has(> #hbg-friend-action:not([data-relationship="self"]):not([hidden]))
  > #hbg-public-friends-view:not([hidden]) {
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  flex:0 0 64px !important;
  width:64px !important;
  min-width:64px !important;
  max-width:64px !important;
  height:62px !important;
}
/* O botão de pedir/aceitar/cancelar amizade fica com texto e ícone
   centralizados DENTRO da própria borda, sem vazar por cima do perfil. */
#view-perfil-publico .hbg-public-actions:has(> #hbg-friend-action:not([data-relationship="self"]):not([hidden]))
  > #hbg-friend-action:not([data-relationship="self"]):not([hidden]) {
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  z-index:auto !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  flex:0 1 144px !important;
  width:144px !important;
  min-width:0 !important;
  max-width:100% !important;
  height:62px !important;
  min-height:62px !important;
  padding:7px 10px !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  text-align:center !important;
  line-height:1.25 !important;
}
#view-perfil-publico .hbg-public-actions #hbg-friend-action:not([data-relationship="self"]) > i {
  flex:0 0 auto;
  font-size:20px;
}
#view-perfil-publico .hbg-public-actions #hbg-friend-action:not([data-relationship="self"]) > span {
  display:block;
  flex:0 1 auto;
  min-width:0;
  font-size:11px;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:break-word;
}
@media (max-width:600px){
  #view-perfil-publico .hbg-public-actions:has(> #hbg-friend-action:not([data-relationship="self"]):not([hidden]))
    > #hbg-public-friends-view:not([hidden]) {
    flex-basis:58px !important;
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
    height:56px !important;
  }
  #view-perfil-publico .hbg-public-actions:has(> #hbg-friend-action:not([data-relationship="self"]):not([hidden]))
    > #hbg-friend-action:not([data-relationship="self"]):not([hidden]) {
    height:56px !important;
    min-height:56px !important;
  }
}
/* FIM HBG R40.44.1 */

/* HBG R40.46 — Playlists públicas integradas ao Spotify Studio */
#hbg-sp36-root .hbg-sp46-entry {display:flex;align-items:center;gap:10px;width:100%;border:1px solid #2c6d97;border-radius:8px;background:#123e60;color:#e2f5ff;padding:12px 13px;text-align:left;cursor:pointer;font:inherit;font-weight:700;margin:10px 0;}
#hbg-sp36-root .hbg-sp46-entry:hover,#hbg-sp36-root.hbg-sp46-active .hbg-sp46-entry {background:#185780;border-color:#6dc7f4;}
#hbg-sp36-root .hbg-sp46-public-panel{display:none;box-sizing:border-box;padding:22px;min-height:100%;color:#e5f1fa;}
#hbg-sp36-root.hbg-sp46-active #hbg-sp36-content{display:none!important;}
#hbg-sp36-root.hbg-sp46-active .hbg-sp46-public-panel{display:block;}
#hbg-sp36-root.hbg-sp46-active .hbg-sp36-devicebar,#hbg-sp36-root.hbg-sp46-active .hbg-sp36-footer{display:none!important;}
#hbg-sp36-root .hbg-sp46-heading small{color:#68c5ec;font-size:11px;font-weight:700;letter-spacing:1.5px;}
#hbg-sp36-root .hbg-sp46-heading h1{font-size:27px;margin:5px 0 8px;}
#hbg-sp36-root .hbg-sp46-heading p{font-size:13px;color:#a9c8d8;line-height:1.5;max-width:670px;}
#hbg-sp36-root .hbg-sp46-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:15px;border:1px solid #28638c;background:#10364e;border-radius:12px;margin:16px 0 9px;}
#hbg-sp36-root .hbg-sp46-form label{display:grid;gap:7px;font-size:12px;color:#c0dbe8;flex:1;min-width:170px;}
#hbg-sp36-root .hbg-sp46-form input{height:39px;min-width:0;width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #4b7895;border-radius:7px;background:#071e31;color:#fff;font:inherit;}
#hbg-sp36-root .hbg-sp46-form button{height:39px;border:1px solid #69bee5;background:#1479af;color:white;border-radius:7px;padding:0 15px;font-weight:700;cursor:pointer;}
#hbg-sp36-root .hbg-sp46-status{font-size:12px;color:#91bdd4;min-height:24px;}
#hbg-sp36-root .hbg-sp46-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:10px;margin:8px 0 15px;}
#hbg-sp36-root .hbg-sp46-card{display:flex;align-items:stretch;min-height:76px;border:1px solid #2b5978;border-radius:10px;background:#0d2b40;overflow:hidden;}
#hbg-sp36-root .hbg-sp46-card.is-selected{border-color:#62bee9;box-shadow:inset 0 0 0 1px #2874a4;}
#hbg-sp36-root .hbg-sp46-card button:first-child{flex:1;min-width:0;padding:12px;background:none;border:0;text-align:left;color:#f2faff;cursor:pointer;display:flex;gap:4px;flex-direction:column;}
#hbg-sp36-root .hbg-sp46-card button:first-child strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
#hbg-sp36-root .hbg-sp46-card small{font-size:11px;color:#80cbee;}
#hbg-sp36-root .hbg-sp46-card button:last-child{flex:0 0 36px;border:0;border-left:1px solid #2b5978;background:#102f45;color:#badbed;cursor:pointer;}
#hbg-sp36-root .hbg-sp46-player{margin-top:12px;}
#hbg-sp36-root .hbg-sp46-player h2{font-size:17px;margin:0 0 10px;}
#hbg-sp36-root .hbg-sp46-player iframe{display:block;width:100%;height:360px;border:0;border-radius:12px;}
#hbg-sp36-root .hbg-sp46-legal,#hbg-sp36-root .hbg-sp46-empty{color:#8eb2c9;font-size:12px;line-height:1.5;}

/* ==============================================================
   HBG R40.51 — Navegação administrativa por páginas e cargos
   Não altera estilos públicos, Supabase ou regras de moderação.
   ============================================================== */
#hbg-admin-v3 .hbg-v3-home{margin-top:14px;padding:18px;border:1px solid #484358;border-radius:13px;background:#1d1d2b}
#hbg-admin-v3 .hbg-v3-home-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding-bottom:12px}
#hbg-admin-v3 .hbg-v3-home-head small{font-size:10px;color:#d6b677;letter-spacing:.13em;font-weight:800}
#hbg-admin-v3 .hbg-v3-home-head h3{font-size:21px;line-height:1.25;color:#f5e8ff;margin:5px 0 7px}
#hbg-admin-v3 .hbg-v3-home-head p{font-size:12px;line-height:1.5;color:#b9afc5;margin:0}
#hbg-admin-v3 .hbg-v3-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
#hbg-admin-v3 .hbg-v3-home-grid button{display:flex;align-items:center;gap:11px;text-align:left;min-height:72px;padding:12px 13px;border:1px solid #494154;border-radius:10px;background:#292537;color:#f3e9fa;cursor:pointer;transition:background .14s,border-color .14s;min-width:0}
#hbg-admin-v3 .hbg-v3-home-grid button:hover,#hbg-admin-v3 .hbg-v3-home-grid button:focus-visible{background:#3a2e4e;border-color:#c399ff;outline:0}
#hbg-admin-v3 .hbg-v3-home-grid button i{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:9px;background:#47375a;color:#edc77b;font-size:20px}
#hbg-admin-v3 .hbg-v3-home-grid button span{display:flex;flex-direction:column;min-width:0;gap:4px}
#hbg-admin-v3 .hbg-v3-home-grid button strong{font-size:12px;line-height:1.25;color:#f9f3ff}
#hbg-admin-v3 .hbg-v3-home-grid button small{font-size:10px;line-height:1.35;color:#b9b0c6}
#hbg-admin-v3 .hbg-v3-home-grid button[hidden]{display:none!important}
#hbg-admin-v3 .hbg-v3-home-footnote{font-size:10px;line-height:1.4;color:#9890ab;margin:12px 0 0}
#hbg-admin-v3:not(.hbg-v3-page-mode) .hbg-admin-v3-board{display:none!important}
#hbg-admin-v3:not(.hbg-v3-page-mode) .hbg-v3-workspace{display:none!important}
#hbg-admin-v3:not(.hbg-v3-page-mode) .hbg-v3-page-back{display:none!important}
#hbg-admin-v3.hbg-v3-page-mode .hbg-v3-home{display:none!important}
#hbg-admin-v3.hbg-v3-page-mode .hbg-admin-v3-stats{display:none!important}
#hbg-admin-v3 .hbg-v3-page-back{display:flex;align-items:center;gap:15px;margin:16px 0 4px;padding:10px 12px;background:#222131;border:1px solid #4b4358;border-radius:10px}
#hbg-admin-v3 .hbg-v3-page-back button{background:#373044;border:1px solid #6d5781;border-radius:8px;color:#f2e4ff;font-weight:750;padding:9px 12px;font-size:12px;cursor:pointer}
#hbg-admin-v3 .hbg-v3-page-back h3{font-size:16px;margin:0;color:#f2e7ff}
#hbg-admin-v3.hbg-v3-page-mode:not(.hbg-v3-in-workspace) .hbg-admin-v3-board{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:none!important;margin-top:12px}
#hbg-admin-v3.hbg-v3-page-mode:not(.hbg-v3-in-workspace) .hbg-admin-v3-board>section:not(.hbg-v3-page-current){display:none!important}
#hbg-admin-v3 .hbg-v3-workspace[hidden],#hbg-admin-v3 .hbg-v3-workspace .hbg-v3-tool[hidden]{display:none!important}
#hbg-admin-v3 .hbg-v3-workspace-head{display:none!important} /* Já existe Voltar acima */
#hbg-admin-v3 .hbg-v3-workspace{margin-top:12px}
#hbg-admin-v3 .hbg-v3-workspace .hbg-v3-tool{padding:18px;border-radius:12px;min-height:0}
#hbg-admin-v3 .hbg-v3-workspace .hbg-adm-panel-heading{display:flex!important}
#hbg-admin-v3 .hbg-v3-workspace .hbg-admin-v3-legacy-host>section{max-width:100%}
#hbg-admin-v3 .hbg-v3-editor-links{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
#hbg-admin-v3 .hbg-v3-editor-links button{padding:11px 16px;background:#3a3052;border:1px solid #7b5da0;color:#f5effa;border-radius:9px;font-size:12px;font-weight:750;cursor:pointer}
body > #hbg-adm-side-nav button[aria-current="page"]{border-color:#ad8bc9;background:#3b3051;color:#ffeebd}
#hbg-admin-v3 .hbg-admin-v3-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
#hbg-admin-v3 .hbg-admin-v3-stat{min-height:74px;padding:12px;border-radius:10px}
#hbg-admin-v3 .hbg-admin-v3-stat strong{font-size:22px}
#hbg-admin-v3 .hbg-admin-v3-stat i{font-size:20px}
#hbg-admin-v3 .hbg-admin-v3-header-tools .hbg-admin-v3-searchbar{display:none!important} /* Há busca própria na página de Usuários e Moderação. */
#hbg-admin-v3 #hbg-adm-v3-global-go{display:none!important}
@media(max-width:900px){#hbg-admin-v3 .hbg-v3-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#hbg-admin-v3 .hbg-v3-home-grid{grid-template-columns:1fr}#hbg-admin-v3 .hbg-v3-home-head{flex-direction:column}#hbg-admin-v3 .hbg-v3-page-back{flex-wrap:wrap}}

#hbg-admin-v3 .hbg-admin-v3-stats[hidden],#hbg-safety-admin [data-hbg-safety-mode="audit"][hidden]{display:none!important}


/* HBG R40.52 — Monitor exclusivo do Proprietário, só na visão geral. */
#hbg-admin-v3:not(.hbg-adm-owner-home) #hbg-live-r4019 {display:none!important;}

/* Avisos de pendências: denúncias e atendimentos aguardando a equipe. */
#hbg-admin-entry.hbg-adm-needs-attention {
  position:relative;
  border-color:#ef8c8c!important;
  background:rgba(178,57,78,.18)!important;
  animation:hbgAdmAlertPulse 1.65s ease-in-out infinite;
}
#hbg-admin-entry.hbg-adm-needs-attention::after{
  content:attr(data-hbg-alert-count);position:absolute;right:5px;top:1px;
  min-width:17px;height:17px;padding:0 3px;box-sizing:border-box;
  border-radius:12px;background:#ee5b73;color:#fff;font:800 10px/17px Inter,Arial,sans-serif;text-align:center;
}
#user-nav-profile.hbg-adm-has-pending {position:relative;}
#user-nav-profile.hbg-adm-has-pending::after{
  content:'';position:absolute;z-index:8;right:1px;top:-4px;width:9px;height:9px;
  background:#f56579;border:2px solid #34233f;border-radius:50%;
  box-shadow:0 0 0 2px rgba(245,101,121,.25);pointer-events:none;
  animation:hbgAdmAlertPulse 1.65s ease-in-out infinite;
}
#hbg-admin-v3 button[data-hbg-alert-count]:not([data-hbg-alert-count="0"]),
body > #hbg-adm-side-nav button[data-hbg-alert-count]:not([data-hbg-alert-count="0"]){
  position:relative;border-color:#a85877!important;animation:hbgAdmAlertPulse 1.65s ease-in-out infinite;
}
#hbg-admin-v3 button[data-hbg-alert-count]:not([data-hbg-alert-count="0"])::after,
body > #hbg-adm-side-nav button[data-hbg-alert-count]:not([data-hbg-alert-count="0"])::after{
  content:attr(data-hbg-alert-count);display:inline-grid;place-items:center;
  min-width:19px;height:19px;padding:0 4px;border-radius:20px;box-sizing:border-box;
  background:#e55b76;color:#fff;font:800 10px/1 Inter,Arial,sans-serif;
  margin-left:auto;flex:none;
}
#hbg-adm-pending-r4052 {
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 0;
  padding:11px 14px;border:1px solid #8c4965;border-radius:10px;
  background:rgba(110,38,67,.19);color:#f6dfeb;font:600 12px/1.4 Inter,Arial,sans-serif;
}
#hbg-adm-pending-r4052[hidden] {display:none!important;}
#hbg-adm-pending-r4052 strong{margin-right:auto;color:#ffe4cb;}
#hbg-adm-pending-r4052 button{background:#55324b;color:#fff4f7;border:1px solid #aa6382;border-radius:7px;
  padding:7px 10px;cursor:pointer;font:700 11px Inter,Arial,sans-serif;}
@keyframes hbgAdmAlertPulse {0%,100%{box-shadow:0 0 0 0 rgba(226,91,117,.10)}50%{box-shadow:0 0 0 4px rgba(226,91,117,.40)}}
@media(prefers-reduced-motion:reduce){
  #hbg-admin-entry.hbg-adm-needs-attention,
  #user-nav-profile.hbg-adm-has-pending::after,
  #hbg-admin-v3 button[data-hbg-alert-count],
  body > #hbg-adm-side-nav button[data-hbg-alert-count]{animation:none!important;}
}

/* ============================================================
   HBG R40.53 — filas compactas ADM, sem cards expandidos por padrão
   ============================================================ */
#hbg-adm-v3-support-card .hbg-support-admin,
#hbg-adm-v3-safety-card .hbg-safety-admin{padding:12px;border:0;background:transparent;margin:0}
#hbg-adm-v3-support-card .hbg-adm-panel-heading,
#hbg-adm-v3-safety-card .hbg-safety-admin-heading{margin:0 0 12px}
#hbg-support-admin-content:not([hidden]){display:block}
#hbg-support-admin-list,#hbg-safety-admin-view{display:flex;flex-direction:column;gap:5px;overflow:visible;max-height:none;padding:0}
#hbg-support-admin-content .hbg-queue-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
#hbg-support-admin-content .hbg-queue-filter{font-size:12px;color:#ded5ee;display:flex;align-items:center;gap:9px}
#hbg-support-admin-content .hbg-queue-filter select{background:#141523;border:1px solid #5c5373;color:#f5eeff;border-radius:8px;padding:7px 10px;min-width:150px}
.hbg-queue-muted{color:#a7a0b6;font-size:11px}
#hbg-support-admin-content .hbg-queue-pager{display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:10px 0;color:#d7c6ed;font-size:12px}
#hbg-support-admin-content .hbg-queue-pager button{padding:7px 11px}
#hbg-admin-v3 .hbg-admin-queue-row{padding:0;border:1px solid rgba(132,118,156,.36);border-radius:9px;background:rgba(19,19,33,.67);margin:0;color:#f2ecfa;overflow:hidden}
#hbg-admin-v3 .hbg-admin-queue-row[open]{border-color:#8976ae;background:rgba(24,23,42,.92)}
#hbg-admin-v3 .hbg-admin-queue-summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;cursor:pointer;min-height:49px;box-sizing:border-box}
#hbg-admin-v3 .hbg-admin-queue-summary::-webkit-details-marker{display:none}
#hbg-admin-v3 .hbg-admin-queue-summary::after{content:'⌄';font-size:18px;color:#baa7d2;flex:none;line-height:1}
#hbg-admin-v3 .hbg-admin-queue-row[open] .hbg-admin-queue-summary::after{transform:rotate(180deg)}
#hbg-admin-v3 .hbg-admin-queue-summary:hover{background:rgba(141,116,184,.12)}
#hbg-admin-v3 .hbg-admin-queue-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#hbg-admin-v3 .hbg-admin-queue-main strong{font-size:12px;line-height:1.3;color:#f5e8ff;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hbg-admin-v3 .hbg-admin-queue-main small{font-size:10px;color:#aeb1c5;line-height:1.35}
#hbg-admin-v3 .hbg-admin-queue-badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex:none}
#hbg-admin-v3 .hbg-admin-queue-badge{padding:4px 7px;font:700 10px Inter,Arial,sans-serif;border-radius:6px;border:1px solid rgba(162,139,196,.35);background:rgba(101,77,136,.19);color:#dac6f4;white-space:nowrap;flex:none}
#hbg-admin-v3 .hbg-admin-queue-state[data-status="aberto"],
#hbg-admin-v3 .hbg-admin-queue-state[data-status="open"]{color:#ffdf9a;background:rgba(178,121,29,.17);border-color:rgba(219,169,78,.32)}
#hbg-admin-v3 .hbg-admin-queue-state[data-status="reviewing"]{color:#b8ceff;background:rgba(71,115,203,.19)}
#hbg-admin-v3 .hbg-admin-queue-state[data-status="respondido"],
#hbg-admin-v3 .hbg-admin-queue-state[data-status="resolved"],
#hbg-admin-v3 .hbg-admin-queue-state[data-status="active"]{color:#a9e8d3;background:rgba(52,142,118,.14);border-color:rgba(108,200,170,.25)}
#hbg-admin-v3 .hbg-admin-queue-detail{padding:13px 14px;border-top:1px solid rgba(141,124,170,.24);display:flex;flex-direction:column;gap:8px;white-space:normal;overflow-wrap:anywhere}
#hbg-admin-v3 .hbg-admin-queue-detail>p{margin:0;white-space:pre-wrap;line-height:1.65;font-size:12px;color:#e5dceb}
#hbg-admin-v3 .hbg-admin-queue-detail>.hbg-admin-queue-id{font-size:10px;color:#9793a9;user-select:text}
#hbg-admin-v3 .hbg-admin-queue-detail .hbg-support-reply{margin:6px 0;padding:9px 10px}
#hbg-admin-v3 .hbg-admin-queue-detail .hbg-support-admin-actions{margin:5px 0 0}
#hbg-admin-v3 .hbg-admin-queue-detail .hbg-safety-note{min-height:64px}
#hbg-admin-v3 .hbg-safety-admin-nav{margin:0 0 9px}
#hbg-admin-v3 .hbg-safety-filter{margin:0 0 9px}
#hbg-admin-v3 .hbg-admin-queue-new{padding:0;margin-bottom:10px;border-radius:9px;border:1px dashed #6b5f80;background:rgba(30,24,47,.65)}
#hbg-admin-v3 .hbg-admin-queue-new>summary{padding:11px 14px;cursor:pointer;color:#e4cbff;font-size:12px;font-weight:750;list-style:none}
#hbg-admin-v3 .hbg-admin-queue-new>summary::-webkit-details-marker{display:none}
#hbg-admin-v3 .hbg-admin-queue-new>form{border:0;margin:0;background:transparent}
@media(max-width:740px){
 #hbg-admin-v3 .hbg-admin-queue-summary{flex-wrap:wrap}
 #hbg-admin-v3 .hbg-admin-queue-badges{justify-content:flex-start}
 #hbg-admin-v3 .hbg-admin-queue-main strong{white-space:normal}
}

/* R40.54 — sete filtros do sino em duas linhas compactas. */
#hbg-notif-dropdown .hbg-notif-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
#hbg-notif-dropdown .hbg-notif-tab[data-hbg-notif-filter="support"]{font-size:10px}
@media(max-width:380px){#hbg-notif-dropdown .hbg-notif-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* HBG R40.55 — links públicos identificáveis e SEO sem trocar o design. */
.hbg-room-title-link,.hbg-forum-title-link{color:inherit;text-decoration:none}
.hbg-room-title-link:hover,.hbg-forum-title-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hbg-room-title-link:focus-visible,.hbg-forum-title-link:focus-visible{outline:2px solid #e9c570;outline-offset:3px;border-radius:3px}
.hbg-seo-entry{font:400 13px/1.55 Inter,Arial,sans-serif;margin:5px 0 18px;padding:13px 16px;border:1px solid rgba(211,184,126,.18);border-radius:10px;background:rgba(21,21,31,.55);color:#cbc4d1}
.hbg-seo-entry h1{font-size:17px;line-height:1.35;color:#f7e2a3;margin:0 0 5px;font-weight:800}
.hbg-seo-entry p{margin:4px 0 7px}
.hbg-seo-entry a{color:#f5d58a;text-decoration:none}
.hbg-seo-entry a:hover{text-decoration:underline}
.hbg-seo-entry nav{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:6px}
.hbg-seo-entry .hbg-seo-links{display:flex;gap:8px 16px;flex-wrap:wrap;max-height:115px;overflow:hidden}
.hbg-seo-entry .hbg-seo-links a{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Links compartilháveis públicos, controle pequeno e discreto. */
.hbg-r4055-share{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(215,187,124,.4);border-radius:8px;padding:6px 9px;background:rgba(31,25,38,.85);color:#efdaa6;font:600 11px Inter,Arial,sans-serif;cursor:pointer}
.hbg-r4055-share:hover{border-color:#e9c570;background:#342c3d}
.hbg-r4055-share:focus-visible{outline:2px solid #e9c570;outline-offset:3px}
.hbg-r4055-profile-share{position:absolute;right:16px;bottom:14px;z-index:5}
@media(max-width:600px){.hbg-r4055-profile-share{bottom:7px;right:9px;font-size:10px}}