/* ==========================================================================
   GK TANK · TODAS AS TELAS PÓS-LOGIN & PÁGINAS INTERNAS
   (/, /personagem, /recarga, /pedido/:id, /suporte, /mensagens, /jogar, 404)
   100% Unificadas na Arquitetura Cristal Safira & Ouro Real do Jogo (25173)
   ========================================================================== */

/* 1. Superfície Global: NENHUMA rota volta para o fundo branco antigo */
body,
body #conteudo,
.nova-home,
.nova-home.player-home,
.nova-home.registration-surface,
.recharge-page,
body[data-route="jogar"] main,
body[data-route="jogar"] #conteudo,
body[data-route="recarga"] #conteudo,
body[data-route="personagem"] #conteudo,
body[data-route="suporte"] #conteudo {
  background: transparent !important;
  color: var(--cr-text-light) !important;
}

/* 2. Hero de Páginas de Serviço (/suporte, /pedido, 404, restrito) */
body #conteudo .portal-service-hero {
  position: relative;
  width: min(1260px, calc(100% - 40px)) !important;
  margin: 22px auto 0 !important;
  padding: 28px 34px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(95deg, rgba(9, 26, 56, 0.95) 0%, rgba(16, 46, 94, 0.86) 55%, rgba(10, 30, 64, 0.48) 100%),
    url('/img/cristal/hero.webp') right 24% / cover no-repeat !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-panel) !important;
  color: #ffffff !important;
  overflow: hidden;
}

body #conteudo .portal-service-hero .wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body #conteudo .portal-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(8, 24, 52, 0.86) !important;
  border: 1px solid rgba(242, 190, 84, 0.6) !important;
  color: #ffe28a !important;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 12px;
  transition: background-color 0.16s ease, border-color 0.16s ease;
}

body #conteudo .portal-back:hover {
  background: rgba(22, 60, 120, 0.92) !important;
  border-color: #ffe28a !important;
  color: #ffffff !important;
}

body #conteudo .portal-service-hero h1 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 10px rgba(2, 8, 20, 0.75) !important;
  -webkit-text-stroke: 0 !important;
}

body #conteudo .portal-service-hero h1 .px {
  color: #ffd666 !important;
  font-family: inherit !important;
}

body #conteudo .portal-service-hero p {
  margin: 0 !important;
  color: #d4e6ff !important;
  font-size: 15px !important;
  max-width: 58ch;
}

/* ==========================================================================
   3. CARD CENTRAL NA HOME QUANDO LOGADO (/ -> "Bem-vindo de volta.")
   ========================================================================== */
.nova-home .cr-hero > #acesso.cr-auth .home-own-character {
  position: relative;
  padding: 12px 14px 16px !important;
  margin: 8px 0 10px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(130px 100px at 50% 54%, rgba(74, 172, 255, 0.28), transparent 72%),
    linear-gradient(180deg, #13366c 0%, #091d3e 100%) !important;
  border: 1.5px solid #3568b2 !important;
  box-shadow: inset 0 1px 0 rgba(180, 226, 255, 0.25), 0 8px 20px rgba(5, 16, 38, 0.25) !important;
  text-align: center !important;
}

.nova-home .cr-hero > #acesso.cr-auth .home-own-character h3 {
  margin: 4px 0 6px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 6px rgba(2, 8, 20, 0.8) !important;
}

.nova-home .cr-hero > #acesso.cr-auth .home-own-character p {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 12px !important;
  padding: 4px 14px !important;
  border-radius: 999px !important;
  background: rgba(7, 20, 44, 0.88) !important;
  border: 1px solid #eab851 !important;
  color: #ffe28a !important;
  font-family: var(--cr-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

.nova-home .cr-hero > #acesso.cr-auth .home-own-character .auth-submit {
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 12px !important;
}

.nova-home .cr-hero > #acesso.cr-auth .home-account-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  margin-top: 7px !important;
  border-radius: 11px !important;
  background: #e6f1fc !important;
  border: 1.5px solid #8eb4de !important;
  color: #143968 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.nova-home .cr-hero > #acesso.cr-auth .home-account-link:hover {
  background: #d5e8fb !important;
  border-color: #2563ae !important;
  color: #0b2548 !important;
}

/* ==========================================================================
   4. PÁGINA MEU PERSONAGEM (/personagem)
   ========================================================================== */
.nova-home.player-home {
  padding-top: 24px !important;
  padding-bottom: 64px !important;
}

.player-home .player-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  padding: 26px 32px !important;
  margin-bottom: 20px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(520px 240px at 88% 20%, rgba(74, 172, 255, 0.22), transparent 70%),
    linear-gradient(125deg, #174282 0%, #0d2752 60%, #091b3b 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-panel) !important;
}

.player-home .player-heading h1 {
  margin: 0 0 6px !important;
  color: #ffffff !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  -webkit-text-stroke: 0 !important;
}

.player-home .player-heading h1 em {
  color: #ffd666 !important;
  font-style: normal !important;
}

.player-home .player-heading p {
  margin: 0 !important;
  color: #c6dcfb !important;
  font-size: 15px !important;
}

.player-home .player-heading-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

.player-home .player-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  background: rgba(8, 24, 52, 0.88) !important;
  border: 1.5px solid #4577be !important;
  color: #dcebff !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  max-width: none !important;
}

.player-home .player-status::before {
  margin: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #f2be54 !important;
}

.player-home .player-status.is-online {
  background: rgba(8, 36, 44, 0.9) !important;
  border-color: #4be89b !important;
  color: #9df7ce !important;
}

.player-home .player-status.is-online::before {
  background: #4be89b !important;
  box-shadow: 0 0 8px rgba(75, 232, 155, 0.7) !important;
}

.player-home .player-heading-actions > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #21559e 0%, #123468 100%) !important;
  border: 1.5px solid #eab851 !important;
  color: #ffe28a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease !important;
}

.player-home .player-heading-actions > a:hover {
  background: linear-gradient(180deg, #2b6bc4 0%, #184486 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Barra de 2 Atalhos Rápidos (Recarregar cupons | Minhas mensagens) */
.player-home .player-quicknav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  gap: 16px !important;
  margin-bottom: 22px !important;
}

.player-home .player-quicknav > a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 82px !important;
  padding: 15px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #194586 0%, #0d2752 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-crystal), var(--cr-shadow-card) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease !important;
}

.player-home .player-quicknav > a:hover {
  background: linear-gradient(180deg, #2258a8 0%, #12346a 100%) !important;
  border-color: #ffe28a !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 198, 0.55), 0 14px 30px rgba(3, 10, 24, 0.58) !important;
}

.player-home .player-quicknav .quick-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
  background: radial-gradient(circle at 50% 35%, #1e529c, #091d3e) !important;
  border: 1px solid rgba(130, 196, 255, 0.48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  display: grid !important;
  place-items: center !important;
  flex: none;
}

.player-home .player-quicknav .quick-icon img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
}

.player-home .player-quicknav b {
  display: block !important;
  color: #fff8e4 !important;
  font-size: 16.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.player-home .player-quicknav small {
  display: block !important;
  margin-top: 3px !important;
  color: #a8cbf6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.player-home .player-quicknav > a > span:last-child {
  margin-left: auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(9, 27, 58, 0.72) !important;
  border: 1px solid rgba(242, 190, 84, 0.55) !important;
  color: #ffd666 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  flex: none;
}

/* Grid Principal de /personagem */
.player-home .player-layout {
  display: grid !important;
  grid-template-columns: 336px minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start !important;
}

/* Cartão de Perfil do Personagem à Esquerda — Janela Cristal Safira Real */
.player-home .player-profile.auth-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  padding: 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-panel) !important;
  color: #fff8e4 !important;
  text-align: center !important;
}

.player-home .player-profile .auth-topline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  margin-bottom: 14px !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #2560b3 0%, #153c76 100%) !important;
  border: 1.5px solid #e2b24c !important;
  box-shadow: inset 0 1px 0 rgba(185, 232, 255, 0.45) !important;
  color: #fff8e4 !important;
  font-family: var(--cr-font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

.player-home .player-profile .home-own-character {
  padding: 16px 14px 20px !important;
  margin: 0 0 16px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(150px 130px at 50% 54%, rgba(74, 172, 255, 0.28), transparent 72%),
    linear-gradient(180deg, #0f2b59 0%, #081936 100%) !important;
  border: 1.5px solid #3568b2 !important;
  box-shadow: inset 0 1px 0 rgba(168, 224, 255, 0.2) !important;
}

.player-home .player-profile h2 {
  margin: 10px 0 8px !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 8px rgba(2, 8, 20, 0.85) !important;
  -webkit-text-stroke: 0 !important;
}

.player-home .player-profile p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  background: rgba(7, 20, 44, 0.92) !important;
  border: 1.5px solid #eab851 !important;
  color: #ffe28a !important;
  font-family: var(--cr-font-ui) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.player-home .player-profile .player-profile-links {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  gap: 10px !important;
}

.player-home .player-profile .player-profile-links a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 16px !important;
  border-radius: 12px !important;
  font-family: var(--cr-font-display) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

.player-home .player-profile .player-profile-links a:first-child {
  background: linear-gradient(180deg, #ffe07d 0%, #f5b638 52%, #e09619 100%) !important;
  border: 1.5px solid #9c6512 !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 218, 0.92), 0 3px 0 #6e4408 !important;
  color: #2b1803 !important;
}

.player-home .player-profile .player-profile-links a:first-child:hover {
  background: linear-gradient(180deg, #ffeb9e 0%, #f8c34c 52%, #ea9f20 100%) !important;
}

.player-home .player-profile .player-profile-links a:last-child {
  background: linear-gradient(180deg, #21559e 0%, #123468 100%) !important;
  border: 1.5px solid #6cb4ff !important;
  box-shadow: inset 0 1px 0 rgba(190, 232, 255, 0.35), 0 2px 0 #071630 !important;
  color: #fff8e4 !important;
}

.player-home .player-profile .player-profile-links a:last-child:hover {
  background: linear-gradient(180deg, #2b6bc4 0%, #184486 100%) !important;
  border-color: #ffe28a !important;
  color: #ffffff !important;
}

/* Coluna Direita de /personagem: Servidores, Banner, Boletins e Recarga */
.player-home .player-servers,
.player-home .player-recharge {
  padding: 24px 26px !important;
  margin-bottom: 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #ffffff !important;
}

.player-home .player-servers-heading h2,
.player-home .player-recharge-heading h2 {
  margin: 0 0 6px !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

.player-home .player-servers-heading p {
  margin: 0 0 18px !important;
  color: #b8d3f8 !important;
  font-size: 14px !important;
}

.player-home .server-choice {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 18px 20px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #0e2956 0%, #091b3b 100%) !important;
  border: 1.5px solid #3c72c2 !important;
  box-shadow: inset 0 1px 0 rgba(168, 224, 255, 0.2) !important;
}

.player-home .server-choice-identity img {
  width: 52px !important;
  height: 52px !important;
  padding: 6px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, #1e529c, #081834);
  border: 1px solid rgba(242, 190, 84, 0.45);
}

.player-home .server-choice h3 {
  margin: 0 0 4px !important;
  color: #fff8e4 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.player-home .server-choice .state {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #4be89b !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

.player-home .server-choice .state .sq-green {
  background: #4be89b !important;
  box-shadow: 0 0 8px rgba(75, 232, 155, 0.7) !important;
}

.player-home .server-choice p {
  margin: 5px 0 0 !important;
  color: #b5d2f8 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}

.player-home .player-news-banner {
  padding: 26px 30px !important;
  margin-bottom: 20px !important;
  border-radius: 22px !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  background:
    linear-gradient(90deg, rgba(8, 24, 52, 0.94) 0%, rgba(12, 36, 76, 0.82) 58%, rgba(8, 24, 52, 0.35) 100%),
    url('/new-era/assets/coupons-owner-20261022/announcements.webp') center / cover no-repeat !important;
}

.player-home .player-news-banner h2 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

.player-home .player-news-banner p {
  margin: 0 0 16px !important;
  color: #dcebff !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}

.player-home .player-news-banner a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border: 1.5px solid #986212 !important;
  color: #2b1803 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.player-home .player-bulletins {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 20px !important;
}

.player-home .player-board {
  padding: 0 20px 14px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #f4f9ff !important;
  overflow: hidden !important;
}

.player-home .player-board h2 {
  min-height: 76px !important;
  margin: 0 -20px 8px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  color: #fff8e4 !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  border-bottom: 1.5px solid rgba(242, 190, 84, 0.42) !important;
  -webkit-text-stroke: 0 !important;
}

.player-home .player-board details {
  border-bottom: 1px solid rgba(135, 196, 255, 0.22) !important;
}

.player-home .player-board details:last-child {
  border-bottom: 0 !important;
}

.player-home .player-board summary {
  color: #eef6ff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}

.player-home .player-board summary:hover {
  color: #ffe28a !important;
}

.player-home .player-board details p,
.player-home .player-empty {
  color: #bfd6f6 !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

.player-home .player-board details > a {
  color: #ffe28a !important;
  font-weight: 800 !important;
}

.player-home .player-recharge-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.player-home .player-recharge-heading a {
  color: #ffe28a !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.player-home .player-packs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.player-home .player-pack {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  min-height: 184px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(125deg, rgba(11, 32, 68, 0.94) 0%, rgba(16, 46, 94, 0.78) 100%),
    url('/new-era/assets/coupons-owner-20261022/chest.webp') 75% center / cover no-repeat !important;
  border: 1.5px solid #4577be !important;
  box-shadow: inset 0 1px 0 rgba(180, 226, 255, 0.25) !important;
  text-decoration: none !important;
  transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
}

.player-home .player-pack:hover {
  border-color: #ffe28a !important;
  box-shadow: 0 0 0 2px rgba(255, 226, 138, 0.28), 0 10px 24px rgba(2, 8, 20, 0.5) !important;
}

.player-home .player-pack > span {
  display: inline-block;
  width: fit-content;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(242, 190, 84, 0.2);
  border: 1px solid rgba(242, 190, 84, 0.55);
  color: #ffe28a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.player-home .player-pack > b {
  margin-top: 12px !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.player-home .player-pack > strong {
  color: #4be89b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.player-home .player-pack > small {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(135, 196, 255, 0.25) !important;
  color: #ffd666 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.player-home .player-recharge-note {
  margin: 14px 0 0 !important;
  color: #a8cbf6 !important;
  font-size: 12.5px !important;
}

/* ==========================================================================
   5. PÁGINA DE RECARGA DE CUPONS (/recarga) — 100% CRISTAL SAFIRA & OURO
   ========================================================================== */
.recharge-page {
  padding: 22px 0 64px !important;
  min-height: calc(100vh - 110px) !important;
}

.recharge-page .wrap {
  width: min(1260px, calc(100% - 40px)) !important;
  margin-inline: auto !important;
}

.recharge-page .recharge-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr) !important;
  align-items: center !important;
  gap: 24px !important;
  min-height: 204px !important;
  height: auto !important;
  padding: 26px 34px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(500px 240px at 85% 50%, rgba(245, 184, 65, 0.22), transparent 70%),
    linear-gradient(125deg, #174282 0%, #0d2752 58%, #091b3b 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-panel) !important;
}

.recharge-page .recharge-hero h1 {
  margin: 0 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  -webkit-text-stroke: 0 !important;
}

.recharge-page .recharge-hero h1 em {
  color: #ffd666 !important;
  font-style: normal !important;
}

.recharge-page .recharge-lead {
  margin: 0 !important;
  color: #d4e6ff !important;
  font-size: 15px !important;
}

.recharge-page .recharge-hero-art {
  width: 100% !important;
  height: 164px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  border: 1.5px solid rgba(242, 190, 84, 0.55) !important;
  box-shadow: 0 12px 28px rgba(2, 8, 20, 0.55) !important;
}

/* Barra de Etapas (01 Personagem — 02 Pacote — 03 Pagamento) */
.recharge-page .recharge-flow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 22px !important;
  margin: 0 0 20px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #163d77 0%, #0c244c 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-crystal), var(--cr-shadow-card) !important;
}

.recharge-page .recharge-flow > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #b8d3f8 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.recharge-page .recharge-flow > span b {
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: #091d3e !important;
  border: 1.5px solid #4577be !important;
  color: #dcebff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.recharge-page .recharge-flow > span.is-complete {
  color: #ffe28a !important;
}

.recharge-page .recharge-flow > span.is-complete b {
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border-color: #986212 !important;
  color: #2b1803 !important;
}

.recharge-page .recharge-flow > i {
  flex: 1 1 auto !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(242, 190, 84, 0.55), rgba(114, 180, 255, 0.35)) !important;
}

/* Painéis das 3 Etapas (.step) em Cristal Safira Real */
.recharge-page .step {
  padding: 24px 26px !important;
  margin: 0 0 20px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #f4f9ff !important;
}

.recharge-page .step-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin-bottom: 18px !important;
}

.recharge-page .step-title .step-n {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border: 1.5px solid #986212 !important;
  color: #2b1803 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.recharge-page .step-title h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

.recharge-page .step-title p {
  flex-basis: 100% !important;
  margin: 0 0 0 46px !important;
  color: #b8d3f8 !important;
  font-size: 13.5px !important;
}

/* Cartões de Escolha (.choice .face): Personagem, Pacotes e Pagamento */
.recharge-page .choice .face {
  border-radius: 15px !important;
  background: linear-gradient(180deg, #0e2956 0%, #091b3b 100%) !important;
  border: 1.5px solid #3568b2 !important;
  box-shadow: inset 0 1px 0 rgba(168, 224, 255, 0.18) !important;
  color: #f4f9ff !important;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease !important;
}

.recharge-page .choice:hover .face {
  background: linear-gradient(180deg, #14366e 0%, #0b2248 100%) !important;
  border-color: #7cc0ff !important;
}

.recharge-page .choice input:checked + .face {
  background: linear-gradient(180deg, #1b498f 0%, #0f2c5c 100%) !important;
  border: 2px solid #ffd564 !important;
  box-shadow: 0 0 0 2px rgba(255, 213, 100, 0.28), inset 0 1px 0 rgba(255, 245, 200, 0.4) !important;
}

/* Etapa 1: Personagem (.char-face) */
.recharge-page .char-face {
  padding: 12px 16px !important;
  min-height: 90px !important;
}

.recharge-page .char-face .portal-avatar {
  background: radial-gradient(circle at 50% 40%, #1d509a, #081834) !important;
  border: 1.5px solid #e2b24c !important;
  border-radius: 12px !important;
}

.recharge-page .char-face .char-name {
  display: block;
  color: #fff8e4 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.recharge-page .char-face small {
  display: block;
  color: #b5d2f8 !important;
  font-size: 12.5px !important;
}

.recharge-page .character-selected {
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: rgba(75, 232, 155, 0.16) !important;
  border: 1px solid #4be89b !important;
  color: #7ef7be !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Etapa 2: Grade de Pacotes (.pack .face) */
.recharge-page .pack .face {
  padding: 38px 12px 12px !important;
  min-height: 210px !important;
}

.recharge-page .pack .ribbon,
.recharge-page .pack:has(input[value="p10000"]) .ribbon {
  position: absolute !important;
  top: 8px !important;
  left: 10px !important;
  right: 10px !important;
  max-width: calc(100% - 20px) !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ffe388 0%, #eab034 100%) !important;
  border: 1px solid #966010 !important;
  color: #2b1803 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 218, 0.85) !important;
}

.recharge-page .pack-amount {
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(2, 8, 20, 0.7) !important;
}

.recharge-page .pack-unit {
  color: #b8d3f8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.recharge-page .pack-bonus {
  color: #4be89b !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
}

.recharge-page .pack-total {
  color: #93b7e8 !important;
  font-size: 12px !important;
}

.recharge-page .pack-price {
  padding: 9px 8px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #21559e 0%, #13376c 100%) !important;
  border: 1px solid #6cb4ff !important;
  color: #fff8e4 !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
}

.recharge-page .pack input:checked + .face .pack-price {
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border-color: #986212 !important;
  color: #2b1803 !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 218, 0.9) !important;
}

.recharge-page .pack input:checked + .face::after {
  top: 40px !important;
  right: 10px !important;
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border: 1px solid #986212 !important;
  color: #2b1803 !important;
}

/* Outra Quantidade (.custom-amount) */
.recharge-page .custom-amount {
  border-top: 1px solid rgba(135, 196, 255, 0.25) !important;
}

.recharge-page .field > span {
  color: #fff8e4 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

.recharge-page .field small {
  color: #a8cbf6 !important;
  font-size: 12.5px !important;
}

.recharge-page .step .input,
.recharge-page .coupon-entry .input {
  background: #081936 !important;
  border: 1.5px solid #4577be !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.recharge-page .step .input::placeholder,
.recharge-page .coupon-entry .input::placeholder {
  color: #7ea3d4 !important;
}

.recharge-page .step .input:focus,
.recharge-page .coupon-entry .input:focus {
  outline: none !important;
  border-color: #ffd564 !important;
  box-shadow: 0 0 0 3px rgba(255, 213, 100, 0.22) !important;
}

.recharge-page .custom-amount output {
  color: #ffd666 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Etapa 3: Provedores de Pagamento (.provider .face) */
.recharge-page .provider-name {
  color: #fff8e4 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.recharge-page .provider-methods {
  color: #b5d2f8 !important;
  font-size: 13px !important;
}

.recharge-page .payment-assurance {
  color: #b8d3f8 !important;
  font-size: 13px !important;
}

/* Coluna Direita: Resumo da Recarga (#checkout-summary) — 100% Legível em Safira & Ouro */
.recharge-page .summary {
  border-radius: 22px !important;
  background: linear-gradient(180deg, #17407c 0%, #0a1f42 100%) !important;
  border: 2px solid #e2b24c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-panel) !important;
  color: #f4f9ff !important;
}

.recharge-page .summary-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  color: #ffd666 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
}

.recharge-page .summary-ready {
  padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(8, 24, 52, 0.85) !important;
  border: 1px solid #4577be !important;
  color: #dcebff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.recharge-page .summary-ready.is-complete {
  background: rgba(16, 68, 52, 0.65) !important;
  border-color: #4be89b !important;
  color: #86f7c2 !important;
}

.recharge-page .summary h2 {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

.recharge-page .summary-intro {
  margin: 0 0 16px !important;
  color: #b8d3f8 !important;
  font-size: 13.5px !important;
}

.recharge-page .summary-package {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
  border-radius: 14px !important;
  background: rgba(8, 23, 50, 0.82) !important;
  border: 1.5px solid rgba(242, 190, 84, 0.48) !important;
}

.recharge-page .summary-package b {
  display: block !important;
  color: #ffe28a !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.recharge-page .summary-package span {
  display: block !important;
  color: #4be89b !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.recharge-page .summary dl {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 8px 12px !important;
  padding-bottom: 14px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid rgba(135, 196, 255, 0.25) !important;
}

.recharge-page .summary dt {
  color: #a8cbf6 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: capitalize;
}

.recharge-page .summary dd {
  margin: 0 !important;
  text-align: right !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.recharge-page .summary dd.bonus {
  color: #4be89b !important;
}

.recharge-page .summary .total {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 16px !important;
  border-radius: 13px !important;
  background: rgba(8, 23, 50, 0.72) !important;
  border: 1px solid rgba(242, 190, 84, 0.42) !important;
  color: #ffd666 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.recharge-page .summary .total small {
  color: #dcebff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
}

.recharge-page .coupon-entry > label {
  color: #fff8e4 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.recharge-page .coupon-entry button {
  padding: 0 16px !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #245cb0 0%, #143972 100%) !important;
  border: 1.5px solid #eab851 !important;
  color: #ffe28a !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer;
}

.recharge-page .coupon-entry button:hover {
  background: linear-gradient(180deg, #2e6ece 0%, #19478c 100%) !important;
  color: #ffffff !important;
}

.recharge-page #coupon-status {
  color: #b5d2f8 !important;
  font-size: 12px !important;
}

.recharge-page .summary .check {
  color: #d4e6ff !important;
  font-size: 12.5px !important;
}

.recharge-page .summary #pay {
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffe07d 0%, #f5b638 52%, #e09619 100%) !important;
  border: 1.5px solid #9c6512 !important;
  box-shadow: inset 0 1px 0 rgba(255, 250, 218, 0.92), 0 3px 0 #6e4408 !important;
  color: #2b1803 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Histórico de Pedidos (#meus-pedidos) */
.recharge-page .recharge-history {
  margin-top: 24px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.recharge-page .recharge-history > summary {
  color: #fff8e4 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

.recharge-page .recharge-history > summary small {
  color: #b5d2f8 !important;
}

.recharge-page .recharge-history > summary::after {
  color: #ffd666 !important;
}

.recharge-page .recharge-history #orders-list {
  background: #091d3e !important;
  border: 1.5px solid #3568b2 !important;
  border-radius: 16px !important;
  color: #f4f9ff !important;
}

.recharge-page .recharge-history #orders-list .realm-head h2 {
  color: #fff8e4 !important;
}

.recharge-page .recharge-history #orders-list .empty {
  background: rgba(12, 36, 76, 0.65) !important;
  border-color: #3568b2 !important;
  color: #c5dcfb !important;
}

.recharge-page .recharge-history .orders th {
  background: #0d2752 !important;
  color: #ffe28a !important;
  border-color: #2b4f85 !important;
}

.recharge-page .recharge-history .orders td {
  color: #eef6ff !important;
  border-color: #1f3d6b !important;
}

.recharge-page .recharge-history .orders a {
  color: #72cbff !important;
}

.recharge-page .recharge-history .orders .mute {
  color: #9ec4f2 !important;
}

/* ==========================================================================
   6. PÁGINA DE PEDIDO (/pedido/:id) E AVISOS DE MODERAÇÃO
   ========================================================================== */
body #conteudo .order-card {
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 30px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-panel) !important;
  color: #f4f9ff !important;
}

body #conteudo .order-code {
  color: #ffe28a !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body #conteudo .order-card p {
  color: #dcebff !important;
}

body #conteudo .order-card .steps li {
  background: rgba(9, 27, 58, 0.72) !important;
  border: 1px solid #3568b2 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

body #conteudo .order-card .steps strong {
  color: #fff8e4 !important;
}

body #conteudo .order-card .steps span {
  color: #b5d2f8 !important;
}

body #conteudo .order-card .step-n {
  background: #143972 !important;
  border: 1px solid #6cb4ff !important;
  color: #fff8e4 !important;
}

body #conteudo .order-card .done .step-n {
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border-color: #986212 !important;
  color: #2b1803 !important;
}

/* ==========================================================================
   7. ATENDIMENTO & MENSAGENS (/suporte e /suporte#conversas)
   Corrige a largura total quando logado e unifica tudo em Safira & Ouro
   ========================================================================== */
body #conteudo .help-center {
  width: min(1260px, calc(100% - 40px)) !important;
  max-width: 1260px !important;
  margin-inline: auto !important;
  padding-top: 22px !important;
  padding-bottom: 56px !important;
  display: grid !important;
  gap: 22px !important;
}

/* Estado Deslogado: 2 colunas (Fale com a equipe | Seu atendimento começa por aqui) */
body #conteudo .help-access {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 26px 30px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #ffffff !important;
}

/* Estado Logado: 1 coluna 100% largura para o Workspace de Conversas! */
body.portal-authenticated #conteudo .help-access,
body #conteudo .help-access:has(#player-support) {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 20px !important;
}

body.portal-authenticated #conteudo .help-access > div:first-child,
body #conteudo .help-access:has(#player-support) > div:first-child {
  max-width: none !important;
  margin: 0 !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(242, 190, 84, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

body.portal-authenticated #conteudo .help-access > div:first-child > img,
body #conteudo .help-access:has(#player-support) > div:first-child > img {
  float: none !important;
  margin: 0 !important;
  width: 52px !important;
  height: 52px !important;
}

body #conteudo .help-access h2 {
  margin: 0 0 4px !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

body #conteudo .help-access p {
  margin: 0 !important;
  color: #c6dcfb !important;
  font-size: 14.5px !important;
}

body.portal-authenticated #conteudo .help-access > div:first-child > p,
body #conteudo .help-access:has(#player-support) > div:first-child > p {
  margin-left: auto !important;
}

body #conteudo .help-login {
  padding: 22px 24px !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #0d254f 0%, #081938 100%) !important;
  border: 1.5px solid #386cb8 !important;
  box-shadow: inset 0 1px 0 rgba(165, 220, 255, 0.2) !important;
}

body #conteudo .help-login h3 {
  margin: 0 0 6px !important;
  color: #ffe28a !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

body #conteudo .help-login p {
  margin: 0 0 16px !important;
  color: #d2e5ff !important;
  font-size: 14px !important;
}

body #conteudo .help-signup {
  display: inline-block;
  margin-left: 14px;
  color: #ffe28a !important;
  font-weight: 700;
  font-size: 13.5px;
}

/* Workspace de Conversas Logado (#player-support) */
body #player-support {
  width: 100% !important;
  max-width: none !important;
}

body #player-support .support-workspace {
  display: grid !important;
  grid-template-columns: 350px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
}

body #player-support .support-folders,
body #player-support .support-conversation {
  border-radius: 18px !important;
  padding: 22px !important;
  background: linear-gradient(180deg, #0e2854 0%, #081936 100%) !important;
  border: 1.5px solid #3c72c2 !important;
  box-shadow: inset 0 1px 0 rgba(168, 224, 255, 0.2) !important;
  color: #f4f9ff !important;
}

body #player-support .support-folders-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}

body #player-support .support-folders-heading h2,
body #player-support .support-conversation h2 {
  margin: 0 !important;
  color: #fff8e4 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

body #player-support .support-folders > p {
  margin: 0 0 16px !important;
  color: #b5d2f8 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

body #player-support .support-categories {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-bottom: 16px !important;
}

body #player-support .support-folder {
  min-height: 36px !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  background: #123266 !important;
  border: 1px solid #3c72c2 !important;
  color: #dcebff !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

body #player-support .support-folder:hover {
  background: #1a468c !important;
  border-color: #7cc0ff !important;
  color: #ffffff !important;
}

body #player-support .support-folder[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border-color: #986212 !important;
  color: #2b1803 !important;
  font-weight: 800 !important;
}

body #player-support .support-thread-list {
  display: grid !important;
  gap: 10px !important;
  align-content: start !important;
  min-height: 160px !important;
  max-height: 520px !important;
}

body #player-support .support-thread {
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #153970 0%, #0d254c 100%) !important;
  border: 1.5px solid #3568b2 !important;
  color: #f4f9ff !important;
  text-align: left !important;
  transition: border-color 0.16s ease, background-color 0.16s ease !important;
}

body #player-support .support-thread:hover,
body #player-support .support-thread.selected {
  background: linear-gradient(180deg, #1d4c94 0%, #123266 100%) !important;
  border-color: #ffd564 !important;
  box-shadow: 0 0 0 2px rgba(255, 213, 100, 0.22) !important;
}

body #player-support .support-thread strong {
  display: block !important;
  margin: 5px 0 !important;
  color: #ffffff !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
}

body #player-support .support-thread-meta,
body #player-support .support-thread small {
  color: #ffe28a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body #player-support .support-preview {
  color: #c5dcfb !important;
  font-size: 13.5px !important;
}

body #player-support .support-pages {
  margin-top: 16px !important;
  color: #b8d3f8 !important;
  font-weight: 700 !important;
}

body #player-support .support-welcome {
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  text-align: center !important;
  padding: 28px !important;
}

body #player-support .support-welcome h2 {
  color: #fff8e4 !important;
  font-size: 25px !important;
}

body #player-support .support-welcome p {
  color: #b8d3f8 !important;
  font-size: 14.5px !important;
  max-width: 44ch !important;
}

body #player-support .support-welcome .btn {
  margin-top: 6px !important;
  background: linear-gradient(180deg, #ffe07d 0%, #f5b638 52%, #e09619 100%) !important;
  border: 1.5px solid #9c6512 !important;
  color: #2b1803 !important;
  font-weight: 800 !important;
}

body #player-support .support-loading,
body #player-support .support-empty {
  color: #b8d3f8 !important;
  font-size: 14px !important;
}

body #player-support .support-conversation label {
  color: #fff8e4 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body #player-support .support-conversation :is(input, select, textarea) {
  background: #071630 !important;
  border: 1.5px solid #4577be !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 12px 14px !important;
}

body #player-support .support-conversation :is(input, textarea)::placeholder {
  color: #7ea3d4 !important;
}

body #player-support .support-conversation :is(input, select, textarea):focus {
  outline: none !important;
  border-color: #ffd564 !important;
  box-shadow: 0 0 0 3px rgba(255, 213, 100, 0.22) !important;
}

body #player-support .support-message {
  padding: 14px 18px !important;
  border-radius: 14px !important;
  background: #133468 !important;
  border: 1.5px solid #3c72c2 !important;
  color: #f4f9ff !important;
}

body #player-support .support-message.from-user {
  background: #1b498a !important;
  border-color: #eab851 !important;
}

body #player-support .support-message strong {
  color: #ffe28a !important;
  font-size: 13px !important;
}

body #player-support .support-message p {
  color: #ffffff !important;
  font-size: 14.5px !important;
}

body #player-support .support-message time {
  color: #a8cbf6 !important;
}

body #player-support .support-feedback {
  color: #7ef7be !important;
  font-weight: 700 !important;
}

body #player-support .support-feedback.error {
  color: #ffb8b8 !important;
}

/* Seção de Perguntas Frequentes (FAQ) em Cristal Safira & Ouro */
body #conteudo .help-answers {
  padding: 28px 30px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #ffffff !important;
}

body #conteudo .help-section-heading h2 {
  margin: 0 0 6px !important;
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

body #conteudo .help-section-heading p {
  margin: 0 0 18px !important;
  color: #b8d3f8 !important;
  font-size: 14.5px !important;
}

body #conteudo .help-answers .faq details {
  padding: 0 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #0e2956 0%, #091b3b 100%) !important;
  border: 1.5px solid #3568b2 !important;
  box-shadow: inset 0 1px 0 rgba(168, 224, 255, 0.16) !important;
  transition: border-color 0.16s ease, background-color 0.16s ease !important;
}

body #conteudo .help-answers .faq details:hover,
body #conteudo .help-answers .faq details[open] {
  border-color: #ffd564 !important;
  background: linear-gradient(180deg, #14366e 0%, #0c2249 100%) !important;
}

body #conteudo .help-answers .faq summary {
  padding: 15px 0 !important;
  color: #fff8e4 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body #conteudo .help-answers .faq summary > span {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(180deg, #ffe07d 0%, #f1ad32 100%) !important;
  border: 1px solid #986212 !important;
  color: #2b1803 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

body #conteudo .help-answers .faq details p {
  padding: 0 0 16px !important;
  margin: 0 !important;
  color: #c6dcfb !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Outros Canais Oficiais (.help-channels) e Aviso de Moderação (.account-ban-notice) */
body #conteudo .help-channels,
body #conteudo .account-ban-notice {
  padding: 24px 28px !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #163d77 0%, #0b2146 100%) !important;
  border: 2px solid #d8a43c !important;
  box-shadow: var(--cr-ring-gold), var(--cr-shadow-card) !important;
  color: #ffffff !important;
}

body #conteudo .help-channels h2,
body #conteudo .account-ban-notice h2 {
  margin: 0 0 14px !important;
  color: #fff8e4 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  -webkit-text-stroke: 0 !important;
}

body #conteudo .help-channels .contact {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

body #conteudo .account-ban-notices {
  width: min(1260px, calc(100% - 40px)) !important;
  margin: 18px auto 0 !important;
}

body #conteudo .account-ban-notices:empty {
  display: none !important;
}

/* Responsividade das Telas Logadas */
@media (max-width: 960px) {
  .player-home .player-layout,
  body #player-support .support-workspace,
  body #conteudo .help-access {
    grid-template-columns: 1fr !important;
  }

  .player-home .player-bulletins,
  .player-home .player-packs {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .player-home .player-quicknav {
    grid-template-columns: 1fr !important;
  }

  .player-home .player-heading {
    padding: 20px !important;
  }

  .player-home .player-heading-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}