/* =========================================================
   SHAIYA MIRAGEM — PREMIUM LATERAL HERO LAYOUT
   Layout com arte lateral (Personagem + Logo) e painéis alinhados.
   Inspirado no modelo de referência clássico Shaiya Miragem.
   ========================================================= */

:root {
  --sm-gold: #59bee9;
  --sm-gold-hi: #80d9ff;
  --sm-gold-deep: #25789b;
  --sm-red: #ff3444;
  --sm-blue: #2598ff;
  --sm-green: #35e77c;
  --sm-card-bg: linear-gradient(145deg, rgba(6, 14, 21, 0.94), rgba(2, 7, 11, 0.94));
  --sm-border: rgba(89,190,233, 0.36);
  --sm-shadow: 0 16px 42px rgba(0, 0, 0, 0.55);
}

html,
body,
body.miragem-modern {
  margin: 0 !important;
  min-height: 100vh !important;
  background-color: #020508 !important;
  background-image: url('../assets/shaiya-miragem-fundo-azul-v2.png?v=20260920') !important;
  background-position: left top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
  color: #f4f6f7 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  overflow-x: hidden !important;
}

/* Remove artes pseudo-element antigas para evitar sobreposição */
body::before,
body::after,
body.miragem-modern::before,
body.miragem-modern::after {
  display: none !important;
}

.sm-page::before,
.sm-page::after {
  display: none !important;
}

/* =========================================================
   ESTRUTURA PRINCIPAL: LAYOUT FULL COM BACKGROUND OFICIAL
   ========================================================= */

.sm-page,
.sm-page.sm-has-hero {
  width: min(100% - 24px, 1200px) !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px 0 40px !important;
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
}

@media (min-width: 1200px) {
  .sm-page,
  .sm-page.sm-has-hero {
    max-width: 880px !important;
    margin-right: 20px !important;
    margin-left: auto !important;
  }
}

@media (min-width: 1400px) {
  .sm-page,
  .sm-page.sm-has-hero {
    max-width: 1000px !important;
    margin-right: 32px !important;
    margin-left: auto !important;
  }
}

@media (min-width: 1680px) {
  .sm-page,
  .sm-page.sm-has-hero {
    max-width: 1180px !important;
    margin-right: 50px !important;
    margin-left: auto !important;
  }
}

/* Oculta o herói lateral destacado para usar o background completo */
.sm-side-hero {
  display: none !important;
}

/* Coluna principal do site */
.sm-main-column {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* =========================================================
   HEADER: LIVEBAR + AÇÕES RÁPIDAS
   ========================================================= */

.sm-header {
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 5 !important;
}

.sm-livebar {
  width: 100% !important;
  min-height: 54px !important;
  display: flex !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px !important;
  background: rgba(3, 8, 13, 0.85) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
}

.live-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 10px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.07) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.live-item:last-child {
  border-right: 0 !important;
}

.live-item i {
  margin-right: 4px !important;
}

.live-item b {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
}

.live-item span {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

.live-item small {
  font-size: 8px !important;
  margin-top: 3px !important;
  color: #8996a0 !important;
  text-transform: uppercase !important;
}

.live-item.online {
  color: var(--sm-green) !important;
}

.live-item.online i {
  font-size: 7px !important;
  color: var(--sm-green) !important;
}

.live-item.online b {
  color: #fff !important;
}

.live-item.accounts i,
.live-item.accounts b {
  color: var(--sm-gold-hi) !important;
}

.live-item.fury i,
.live-item.fury b {
  color: var(--sm-red) !important;
}

.live-item.light i,
.live-item.light b {
  color: var(--sm-blue) !important;
}

.sm-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

.sm-btn {
  min-width: 155px !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.sm-btn.gold {
  background: linear-gradient(135deg, #80d9ff 0%, #59bee9 45%, #2a89b2 100%) !important;
  color: #0b0702 !important;
  border: 1px solid #93dfff !important;
  box-shadow: 0 6px 22px rgba(89,190,233, 0.32) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.sm-btn.gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(89,190,233, 0.45) !important;
  filter: brightness(1.1) !important;
}

.sm-btn:not(.gold) {
  background: linear-gradient(145deg, rgba(9, 18, 26, 0.9), rgba(4, 9, 14, 0.95)) !important;
  color: #e8ecef !important;
  border: 1px solid rgba(89,190,233, 0.38) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.sm-btn:not(.gold):hover {
  transform: translateY(-2px) !important;
  border-color: var(--sm-gold-hi) !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(14, 26, 38, 0.95), rgba(7, 14, 22, 0.98)) !important;
}

/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.sm-nav {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  min-height: 46px !important;
  border-radius: 9px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
  z-index: 5 !important;
  background: linear-gradient(180deg, rgba(5, 12, 18, 0.95), rgba(2, 7, 11, 0.9)) !important;
  border: 1px solid rgba(89,190,233, 0.28) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(8px) !important;
}

.sm-nav a {
  padding: 13px 15px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  white-space: nowrap !important;
  color: #c9d2d8 !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}

.sm-nav a:hover,
.sm-nav a.active {
  color: var(--sm-gold-hi) !important;
}

.sm-nav a.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 2px !important;
  background: var(--sm-gold) !important;
  box-shadow: 0 0 10px var(--sm-gold) !important;
}

.sm-nav .discord {
  margin-left: auto !important;
  font-size: 16px !important;
  color: #7289da !important;
  padding: 10px 14px !important;
}

.sm-nav .discord:hover {
  color: #fff !important;
  filter: drop-shadow(0 0 8px #7289da) !important;
}

/* =========================================================
   STATUS DO SERVIDOR & CARDS
   ========================================================= */

.status-card,
.panel {
  background: var(--sm-card-bg) !important;
  border: 1px solid var(--sm-border) !important;
  border-radius: 10px !important;
  box-shadow: var(--sm-shadow), inset 0 1px rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(8px) !important;
  overflow: hidden !important;
}

.status-card {
  padding: 14px !important;
  margin-bottom: 0 !important;
}

.section-title {
  padding: 0 2px 10px !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sm-gold-hi) !important;
  letter-spacing: 0.6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.section-title span {
  font-family: Inter, sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--sm-green) !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.section-title span i {
  font-size: 6px !important;
}

.status-grid {
  display: grid !important;
  grid-template-columns: 175px minmax(0, 1fr) 175px !important;
  gap: 10px !important;
}

.online-card,
.refresh-card,
.faction-battle {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  min-height: 135px !important;
}

.online-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  text-align: center !important;
}

.online-card>i {
  font-size: 26px !important;
  color: var(--sm-green) !important;
  margin-bottom: 2px !important;
}

.online-card strong {
  font-family: Cinzel, Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
  margin: 4px 0 !important;
}

.online-card small {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #8c98a2 !important;
  letter-spacing: 0.5px !important;
}

.online-card a {
  margin-top: 8px !important;
  border: 1px solid rgba(89,190,233, 0.35) !important;
  border-radius: 6px !important;
  padding: 5px 11px !important;
  color: var(--sm-gold-hi) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s !important;
}

.online-card a:hover {
  background: rgba(89,190,233, 0.15) !important;
  color: #fff !important;
}

.faction-battle {
  display: grid !important;
  grid-template-columns: 1fr 60px 1fr !important;
  align-items: center !important;
  text-align: center !important;
  padding: 8px 12px !important;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 52, 68, 0.16), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(37, 152, 255, 0.16), transparent 50%),
    rgba(255, 255, 255, 0.015) !important;
}

.faction i {
  font-size: 28px !important;
}

.faction.fury i,
.faction.fury b,
.faction.fury strong {
  color: var(--sm-red) !important;
}

.faction.light i,
.faction.light b,
.faction.light strong {
  color: var(--sm-blue) !important;
}

.faction b {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  margin-top: 2px !important;
}

.faction strong {
  display: block !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 3px 0 !important;
}

.faction em {
  display: block !important;
  font-size: 10px !important;
  font-style: normal !important;
  color: #b0bac2 !important;
}

.vs {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--sm-gold) !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  margin: auto !important;
  color: var(--sm-gold-hi) !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  background: #060e15 !important;
  box-shadow: 0 0 20px rgba(89,190,233, 0.35) !important;
}

.refresh-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 12px 14px !important;
  text-align: left !important;
}

.refresh-card span {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #929ea7 !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

.refresh-card strong {
  font-family: Cinzel, Georgia, serif !important;
  font-size: 24px !important;
  color: #fff !important;
  margin: 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.refresh-card strong i {
  font-size: 16px !important;
  color: var(--sm-gold-hi) !important;
}

.refresh-card small {
  color: var(--sm-green) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.refresh-card small i {
  font-size: 5px !important;
}

.refresh-card em {
  font-size: 7px !important;
  color: #727e87 !important;
  margin-top: 6px !important;
  font-style: normal !important;
}

.balance {
  height: 24px !important;
  margin-top: 8px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 10px !important;
  border-radius: 5px !important;
  background: linear-gradient(90deg, var(--sm-red) 0 50%, var(--sm-blue) 50%) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  position: relative !important;
  overflow: hidden !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

.balance i {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: #fff !important;
  left: 50% !important;
  box-shadow: 0 0 10px #fff !important;
}

/* =========================================================
   DASHBOARD GRID & PAINÉIS
   ========================================================= */

.dashboard-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr) minmax(260px, 1fr) !important;
  gap: 12px !important;
  position: relative !important;
}

.panel-head {
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

.panel-head h2 {
  font-family: Cinzel, Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.panel-head h2 i {
  color: var(--sm-gold-hi) !important;
}

.panel-head a,
.panel-head>span {
  font-size: 8px !important;
  font-weight: 700 !important;
  color: var(--sm-gold-hi) !important;
  text-decoration: none !important;
  letter-spacing: 0.4px !important;
}

/* 1. Time Boss Panel */
.home-boss-panel {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.home-boss-list {
  padding: 2px 0 !important;
}

.home-boss-row {
  display: grid !important;
  grid-template-columns: 42px 1fr auto !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 5px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.home-boss-row:last-child {
  border-bottom: 0 !important;
}

.home-boss-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: #080b0e !important;
  border: 1px solid rgba(91,190,232, 0.42) !important;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6) !important;
}

.home-boss-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 7px !important;
}

.home-boss-name {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #e8ecef !important;
  line-height: 1.15 !important;
}

.home-boss-name small {
  display: block !important;
  margin-top: 3px !important;
  color: #727e87 !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.home-boss-state {
  font-size: 8px !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
  min-width: 68px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  white-space: nowrap !important;
}

.boss-alive .home-boss-state {
  color: var(--sm-green) !important;
  border-color: rgba(53, 231, 124, 0.3) !important;
  background: rgba(53, 231, 124, 0.08) !important;
}

.boss-dead .home-boss-state {
  color: var(--sm-gold-hi) !important;
  border-color: rgba(89,190,233, 0.25) !important;
  background: rgba(89,190,233, 0.06) !important;
}

/* 2. User Panel */
.user-panel {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-bottom: 10px !important;
}

.user-welcome {
  text-align: center !important;
  padding: 16px 8px 8px !important;
  color: #8f9aa2 !important;
  font-size: 9px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.user-welcome strong {
  display: block !important;
  color: var(--sm-gold-hi) !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 16px !important;
  margin-top: 4px !important;
}

.user-rank-badge {
  text-align: center !important;
  font-size: 8px !important;
  color: #7b8891 !important;
  margin-bottom: 8px !important;
}

.user-rank-badge b {
  color: var(--sm-gold) !important;
}

.points-label {
  text-align: center !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #7d8992 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 10px !important;
  letter-spacing: 0.5px !important;
}

.points {
  text-align: center !important;
  color: var(--sm-gold-hi) !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin: 4px 0 10px !important;
}

.big-action,
.outline-action {
  display: block !important;
  text-align: center !important;
  margin: 6px 10px 0 !important;
  padding: 10px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s ease !important;
}

.big-action {
  background: linear-gradient(135deg, #80d9ff, #399ec9) !important;
  color: #111 !important;
  box-shadow: 0 4px 15px rgba(89,190,233, 0.25) !important;
}

.big-action:hover {
  filter: brightness(1.1) !important;
}

.outline-action {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #cdd2d5 !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

.outline-action:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
}

.modern-login {
  padding: 12px 10px !important;
}

.modern-login input {
  width: 100% !important;
  padding: 9px 10px !important;
  margin-bottom: 7px !important;
  background: rgba(3, 8, 13, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 9px !important;
  box-sizing: border-box !important;
}

.modern-login input:focus {
  outline: none !important;
  border-color: rgba(89,190,233, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(89,190,233, 0.1) !important;
}

.modern-login button {
  width: 100% !important;
  padding: 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #80d9ff, #399ec9) !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  color: #111 !important;
  cursor: pointer !important;
  transition: filter 0.2s !important;
}

.modern-login button:hover {
  filter: brightness(1.1) !important;
}

.login-error {
  margin: 0 10px 8px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 65, 75, 0.45) !important;
  border-radius: 6px !important;
  background: rgba(120, 0, 10, 0.2) !important;
  color: #ff7c83 !important;
  font-size: 9px !important;
  text-align: center !important;
}

/* 3. Info Panel */
.info-panel {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.info-row {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 11px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 8px !important;
}

.info-row:last-child {
  border-bottom: 0 !important;
}

.info-row span {
  color: #8c98a2 !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.info-row i {
  color: var(--sm-gold-hi) !important;
  font-size: 9px !important;
}

.info-row b {
  text-align: right !important;
  color: #e4e9ec !important;
  font-weight: 700 !important;
}

.info-row b.green {
  color: var(--sm-green) !important;
}

/* 4. News Panel */
.compact-news {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
}

.compact-news .news-item {
  display: grid !important;
  grid-template-columns: 46px 1fr 10px !important;
  gap: 9px !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  align-items: center !important;
}

.compact-news .news-item:last-child {
  border-bottom: 0 !important;
}

.compact-news .news-icon {
  height: 46px !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #4d231b, #121820) !important;
  color: var(--sm-gold-hi) !important;
  font-size: 16px !important;
}

.compact-news .news-item h3 {
  font-family: Cinzel, Georgia, serif !important;
  font-size: 10px !important;
  margin: 2px 0 !important;
  color: #f2f6f8 !important;
}

.compact-news .news-item p {
  margin: 0 !important;
  color: #86929c !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
  max-height: 24px !important;
  overflow: hidden !important;
}

.compact-news .news-item small {
  display: block !important;
  color: #65717a !important;
  font-size: 7px !important;
  margin-top: 3px !important;
}

.tag {
  font-size: 7px !important;
  background: #8d1e26 !important;
  color: #fff !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  font-weight: 700 !important;
}

.arrow {
  color: var(--sm-gold-hi) !important;
  font-size: 10px !important;
}

/* 5. Chart Panel */
.chart-panel {
  grid-column: 2 / span 2 !important;
  grid-row: 2 !important;
}

.chart {
  height: 180px !important;
  padding: 12px !important;
  position: relative !important;
}

.chart svg {
  position: absolute !important;
  left: 28px !important;
  right: 20px !important;
  top: 15px !important;
  width: calc(100% - 48px) !important;
  height: 135px !important;
}

.gridline {
  position: absolute !important;
  left: 28px !important;
  right: 20px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
}

.g1 {
  top: 45px !important;
}

.g2 {
  top: 85px !important;
}

.g3 {
  top: 125px !important;
}

.chart-label {
  position: absolute !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.chart-label.red {
  right: 12px !important;
  bottom: 55px !important;
  color: var(--sm-red) !important;
}

.chart-label.blue {
  right: 12px !important;
  top: 38px !important;
  color: var(--sm-blue) !important;
}

.chart-axis {
  position: absolute !important;
  left: 28px !important;
  right: 20px !important;
  bottom: 6px !important;
  display: flex !important;
  justify-content: space-between !important;
  color: #64717a !important;
  font-size: 8px !important;
}

/* 6. Quick Panel */
.quick-panel {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

.quick-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 8px !important;
}

.quick-grid a {
  min-height: 66px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, rgba(22, 38, 52, 0.45), rgba(4, 10, 15, 0.8)) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  color: #e8ecef !important;
  text-decoration: none !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 6px 2px !important;
  transition: all 0.2s ease !important;
}

.quick-grid a:hover {
  transform: translateY(-2px) !important;
  border-color: var(--sm-gold-hi) !important;
  background: linear-gradient(145deg, rgba(35, 60, 80, 0.6), rgba(8, 18, 26, 0.9)) !important;
  color: #fff !important;
}

.quick-grid i {
  font-size: 18px !important;
  color: var(--sm-gold-hi) !important;
}

/* 7. Rank Panel */
.rank-panel {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

.rank-list div {
  display: grid !important;
  grid-template-columns: 24px 1fr auto !important;
  gap: 6px !important;
  padding: 8px 11px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 9px !important;
  align-items: center !important;
}

.rank-list div:last-child {
  border-bottom: 0 !important;
}

.rank-list b {
  color: var(--sm-gold-hi) !important;
}

.rank-list span {
  font-weight: 700 !important;
  color: #e4e9ec !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.rank-list em {
  color: #7b8891 !important;
  font-style: normal !important;
  font-size: 8px !important;
}

/* 8. Gallery Panel */
.gallery-panel {
  grid-column: 3 !important;
  grid-row: 3 !important;
}

.gallery {
  padding: 8px !important;
  display: grid !important;
  grid-template-columns: 1.8fr 1fr !important;
  gap: 5px !important;
}

.gallery div {
  height: 44px !important;
  border-radius: 5px !important;
  background: linear-gradient(135deg, #322116, #0e1d2b) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.gallery-main {
  grid-row: span 2 !important;
  height: 93px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--sm-gold-hi) !important;
  font-family: Cinzel, Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(89,190,233, 0.4) !important;
}

.gallery-btn {
  display: block !important;
  margin: 0 8px 8px !important;
  padding: 7px !important;
  border: 1px solid rgba(89,190,233, 0.3) !important;
  border-radius: 5px !important;
  color: var(--sm-gold-hi) !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
}

.gallery-btn:hover {
  background: rgba(89,190,233, 0.15) !important;
  color: #fff !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.sm-footer {
  margin-top: 8px !important;
  position: relative !important;
  z-index: 5 !important;
  padding: 16px 14px !important;
  background: linear-gradient(180deg, rgba(3, 8, 13, 0.8), rgba(2, 6, 10, 0.95)) !important;
  border: 1px solid rgba(89,190,233, 0.22) !important;
  border-radius: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #7b8891 !important;
}

.footer-brand b {
  font-family: Cinzel, Georgia, serif !important;
  font-size: 16px !important;
  color: #eee !important;
}

.footer-brand strong {
  color: var(--sm-gold-hi) !important;
}

.footer-brand small {
  display: block !important;
  font-size: 7px !important;
  letter-spacing: 1px !important;
  margin-top: 3px !important;
  color: #8b97a0 !important;
}

.sm-footer p {
  font-size: 8px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: center !important;
}

.social {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 8px !important;
  font-weight: 700 !important;
}

.social a {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  background: #0d1720 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 5px !important;
  color: #cdd4d8 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.social a:hover {
  background: var(--sm-gold) !important;
  color: #111 !important;
}

.empty {
  padding: 20px !important;
  text-align: center !important;
  color: #707a81 !important;
  font-size: 9px !important;
}

/* =========================================================
   RESPONSIVIDADE (TABLETS E CELULARES)
   ========================================================= */

@media (max-width: 1040px) {
  .dashboard-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .home-boss-panel,
  .compact-news,
  .chart-panel {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }

  .user-panel,
  .info-panel,
  .quick-panel,
  .rank-panel,
  .gallery-panel {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 780px) {
  body.miragem-modern {
    background-attachment: scroll !important;
  }

  .sm-header {
    grid-template-columns: 1fr !important;
  }

  .sm-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .sm-nav {
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .status-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .user-panel,
  .info-panel,
  .quick-panel,
  .rank-panel,
  .gallery-panel {
    grid-column: auto !important;
  }

  .sm-footer {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }
}

/* =========================================================
   ESTILOS MODERNOS DAS SUBPÁGINAS (TABLES, FORMS, CARDS, TABS)
   ========================================================= */

.content-panel {
  background: var(--sm-card-bg) !important;
  border: 1px solid var(--sm-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--sm-shadow) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

.sm-panel-body {
  padding: 26px 28px !important;
  color: #dbe3e8 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

@media (max-width: 650px) {
  .sm-panel-body {
    padding: 16px 14px !important;
  }
}

/* Título e Subtítulos de Página */
.page-lead {
  font-size: 14px !important;
  color: #9cb0bd !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.section-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 28px 0 18px !important;
  color: var(--sm-gold-hi) !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
}

.section-divider::before,
.section-divider::after {
  content: "" !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(89,190,233, 0.35), transparent) !important;
}

/* Tabelas Modernas */
.table-responsive {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 15px 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(3, 7, 11, 0.6) !important;
}

.ranking-table,
.sm-table {
  width: 100% !important;
  border-collapse: collapse !important;
  text-align: left !important;
  font-size: 12px !important;
}

.ranking-table th,
.sm-table th {
  background: linear-gradient(180deg, rgba(16, 26, 36, 0.95), rgba(7, 14, 21, 0.95)) !important;
  color: var(--sm-gold-hi) !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  padding: 13px 14px !important;
  border-bottom: 1px solid rgba(89,190,233, 0.32) !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.ranking-table td,
.sm-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #cfd8de !important;
  vertical-align: middle !important;
  transition: background 0.15s ease !important;
}

.ranking-table tr:hover td,
.sm-table tr:hover td {
  background: rgba(89,190,233, 0.06) !important;
  color: #fff !important;
}

.ranking-table tr:last-child td,
.sm-table tr:last-child td {
  border-bottom: none !important;
}

.ranking-table tr.top-1 td {
  background: rgba(46,192,255, 0.06) !important;
  font-weight: 600 !important;
}

.ranking-table tr.top-2 td {
  background: rgba(192, 192, 192, 0.04) !important;
}

.ranking-table tr.top-3 td {
  background: rgba(62,162,205, 0.04) !important;
}

/* Badges & Tags */
.sm-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

.sm-badge.online {
  background: rgba(53, 231, 124, 0.15) !important;
  color: #4df48f !important;
  border: 1px solid rgba(53, 231, 124, 0.4) !important;
}

.sm-badge.offline {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #8b99a3 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sm-badge.fury,
.sm-badge.uof {
  background: rgba(255, 52, 68, 0.15) !important;
  color: #ff5e6d !important;
  border: 1px solid rgba(255, 52, 68, 0.4) !important;
}

.sm-badge.light,
.sm-badge.aol {
  background: rgba(37, 152, 255, 0.15) !important;
  color: #5bb3ff !important;
  border: 1px solid rgba(37, 152, 255, 0.4) !important;
}

.sm-badge.gold {
  background: rgba(89,190,233, 0.15) !important;
  color: var(--sm-gold-hi) !important;
  border: 1px solid rgba(89,190,233, 0.4) !important;
}

/* Formulários Modernos */
.sm-form {
  max-width: 540px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.sm-form-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  text-align: left !important;
}

.sm-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ccd7df !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sm-label i {
  color: var(--sm-gold) !important;
}

.sm-input,
.sm-select,
.sm-textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  background: rgba(6, 13, 20, 0.9) !important;
  border: 1px solid rgba(89,190,233, 0.32) !important;
  border-radius: 7px !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}

.sm-input:focus,
.sm-select:focus,
.sm-textarea:focus {
  outline: none !important;
  border-color: var(--sm-gold-hi) !important;
  box-shadow: 0 0 15px rgba(89,190,233, 0.28) !important;
  background: rgba(8, 17, 26, 0.95) !important;
}

.sm-input::placeholder {
  color: #60707c !important;
}

.sm-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='%23e9b84d'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 36px !important;
}

.sm-select option {
  background: #081017 !important;
  color: #fff !important;
  padding: 8px !important;
}

.sm-btn-submit {
  width: 100% !important;
  padding: 13px 20px !important;
  border: 1px solid #93dfff !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #80d9ff 0%, #59bee9 50%, #2a89b2 100%) !important;
  color: #0b0702 !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(89,190,233, 0.3) !important;
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
}

.sm-btn-submit:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) !important;
  box-shadow: 0 8px 25px rgba(89,190,233, 0.45) !important;
}

/* Alertas & Mensagens */
.sm-alert {
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

.sm-alert-success {
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

.sm-alert-error {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

.sm-alert-info {
  background: rgba(89,190,233, 0.1) !important;
  border: 1px solid rgba(89,190,233, 0.35) !important;
  color: var(--sm-gold-hi) !important;
}

/* Caixas de Download */
.dl-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}

.dl-card {
  background: linear-gradient(145deg, rgba(12, 22, 32, 0.9), rgba(4, 9, 14, 0.95)) !important;
  border: 1px solid rgba(89,190,233, 0.32) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}

.dl-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--sm-gold-hi) !important;
  box-shadow: 0 14px 35px rgba(89,190,233, 0.2) !important;
}

.dl-card-icon {
  font-size: 38px !important;
  color: var(--sm-gold-hi) !important;
}

.dl-card h3 {
  margin: 0 !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 16px !important;
  color: #fff !important;
}

.dl-card p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #92a1ab !important;
}

/* Métodos de Doação */
.donate-methods-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

.donate-method-card {
  background: linear-gradient(145deg, rgba(14, 25, 36, 0.9), rgba(5, 11, 17, 0.95)) !important;
  border: 1px solid rgba(89,190,233, 0.35) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  text-align: left !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s, border-color 0.2s !important;
}

.donate-method-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--sm-gold-hi) !important;
}

.donate-method-card h3 {
  margin: 0 0 10px 0 !important;
  color: var(--sm-gold-hi) !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 8px !important;
}

.donate-method-card p {
  margin: 6px 0 !important;
  font-size: 12px !important;
  color: #c9d5de !important;
}

.donate-method-card .highlight {
  color: var(--sm-gold-hi) !important;
  font-weight: 700 !important;
}

.copy-box {
  display: flex !important;
  align-items: center !important;
  background: rgba(3, 7, 12, 0.8) !important;
  border: 1px dashed rgba(89,190,233, 0.45) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.copy-box code {
  color: #fff !important;
  font-family: monospace !important;
  font-size: 13px !important;
  word-break: break-all !important;
}

.copy-btn {
  background: var(--sm-gold) !important;
  color: #111 !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Regras */
.rule-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(89,190,233, 0.22) !important;
  border-left: 4px solid var(--sm-gold) !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  text-align: left !important;
}

.rule-card h3 {
  margin: 0 0 10px 0 !important;
  color: var(--sm-gold-hi) !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rule-card ul {
  margin: 0 !important;
  padding-left: 20px !important;
  color: #d1dbe2 !important;
  line-height: 1.7 !important;
  font-size: 12px !important;
}

.rule-card li {
  margin-bottom: 6px !important;
}

/* Abas (Tabs) */
.sm-tabs {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 12px !important;
}

.sm-tab-btn {
  background: rgba(9, 18, 26, 0.8) !important;
  border: 1px solid rgba(89,190,233, 0.28) !important;
  color: #bcc7cf !important;
  padding: 9px 18px !important;
  border-radius: 6px !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  text-decoration: none !important;
}

.sm-tab-btn:hover {
  color: #fff !important;
  border-color: var(--sm-gold-hi) !important;
  background: rgba(89,190,233, 0.12) !important;
  transform: translateY(-1px) !important;
}

.sm-tab-btn.active {
  background: linear-gradient(135deg, #80d9ff 0%, #59bee9 50%, #2a89b2 100%) !important;
  color: #0c0702 !important;
  border-color: #93dfff !important;
  box-shadow: 0 4px 15px rgba(89,190,233, 0.35) !important;
}

.sm-tab-pane {
  display: none !important;
  animation: fadeInPane 0.3s ease-out !important;
}

.sm-tab-pane.active {
  display: block !important;
}

@keyframes fadeInPane {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Paginação */
.sm-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 22px !important;
  flex-wrap: wrap !important;
}

.sm-pagination a,
.sm-pagination span {
  padding: 8px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 1px solid rgba(89,190,233, 0.3) !important;
  background: rgba(9, 18, 26, 0.85) !important;
  color: #ccd7df !important;
  transition: all 0.2s !important;
  min-width: 34px !important;
  text-align: center !important;
}

.sm-pagination a:hover {
  border-color: var(--sm-gold-hi) !important;
  color: #fff !important;
  background: rgba(89,190,233, 0.18) !important;
}

.sm-pagination span.active {
  background: linear-gradient(135deg, #80d9ff, #59bee9) !important;
  color: #0b0702 !important;
  border-color: #93dfff !important;
  font-weight: 800 !important;
}

/* Grade da Conta (Account) */
.account-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 20px !important;
}

.account-action-card {
  background: linear-gradient(145deg, rgba(14, 25, 36, 0.9), rgba(5, 11, 17, 0.95)) !important;
  border: 1px solid rgba(89,190,233, 0.32) !important;
  border-radius: 10px !important;
  padding: 22px 18px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  color: #e4ecf1 !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s !important;
}

.account-action-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--sm-gold-hi) !important;
  box-shadow: 0 12px 30px rgba(89,190,233, 0.22) !important;
  color: #fff !important;
}

.account-action-card .card-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  background: rgba(89,190,233, 0.12) !important;
  border: 1px solid rgba(89,190,233, 0.35) !important;
  display: grid !important;
  place-items: center !important;
  color: var(--sm-gold-hi) !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

.account-action-card .card-info h4 {
  margin: 0 0 4px 0 !important;
  font-family: 'Cinzel', Georgia, serif !important;
  font-size: 13px !important;
  color: #fff !important;
}

.account-action-card .card-info p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #8c9ba5 !important;
}

/* =========================================================
   CLASSES ADICIONAIS � FORMUL�RIOS, LABELS E ALERTAS
   ========================================================= */

/* Grupo de campo de formul�rio */
.sm-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}

/* Label com �cone */
.sm-label {
  font-size: 11px;
  font-weight: 600;
  color: #8c9ba5;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sm-label i {
  color: var(--sm-gold);
  font-size: 10px;
}

/* Alerta de sucesso */
.sm-alert.success {
  background: rgba(74, 222, 128, 0.08) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #4ade80 !important;
}

.sm-alert.success i {
  color: #4ade80 !important;
}

/* Bot�o sm-btn gold inline */
.sm-btn.gold {
  background: linear-gradient(135deg, var(--sm-gold), #1d79a0) !important;
  color: #0a1520 !important;
  border: none !important;
}

.sm-btn.gold:hover {
  background: linear-gradient(135deg, var(--sm-gold-hi), #2d94c0) !important;
  box-shadow: 0 10px 24px rgba(89,190,233, 0.35) !important;
}

/* Rule Card list styles */
.rule-card ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}

.rule-card ul li {
  padding: 5px 0;
  font-size: 12px;
  color: #cbd5da;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  line-height: 1.6;
}

.rule-card ul li::before {
  content: '?';
  color: var(--sm-gold);
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 3px;
}
/* =========================================================
   SHAIYA MIRAGEM 4.5 — FUNDO OFICIAL / TRANSPARÊNCIA 2026-08-19
   Mantém toda a lógica e links do site intactos.
   ========================================================= */
html,
body,
body.miragem-modern {
  background-image: url('../assets/shaiya-miragem-fundo-azul-v2.png?v=20260920') !important;
  background-position: center top !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-color: #050302 !important;
}

/* Centraliza o site e posiciona a interface logo abaixo de SHAIYA MIRAGEM 4.5 */
.sm-page,
.sm-page.sm-has-hero {
  width: min(96vw, 1040px) !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 225px 0 42px !important;
  transform: none !important;
}

/* Transparência geral — o fundo continua visível sem prejudicar a leitura */
:root {
  --sm-card-bg: linear-gradient(145deg, rgba(4, 8, 11, 0.64), rgba(1, 4, 6, 0.58)) !important;
}

.sm-livebar,
.sm-nav,
.status-card,
.sm-card,
.quick-card,
.news-card,
.ranking-card,
.user-card,
.info-card,
.boss-card,
.sm-panel,
.side-box,
.news-article,
.content-card,
.sm-footer {
  background-color: rgba(3, 6, 8, 0.58) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.status-card,
.sm-card,
.quick-card,
.news-card,
.ranking-card,
.user-card,
.info-card,
.boss-card,
.sm-panel,
.side-box,
.news-article,
.content-card {
  background-image: linear-gradient(145deg, rgba(7, 12, 16, 0.62), rgba(2, 5, 7, 0.54)) !important;
}

/* Mantém botões sólidos e legíveis */
.sm-btn,
button,
input[type="submit"],
input[type="button"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 1199px) {
  .sm-page,
  .sm-page.sm-has-hero {
    width: min(96vw, 980px) !important;
    max-width: 980px !important;
    padding-top: 200px !important;
  }
}

@media (max-width: 800px) {
  html,
  body,
  body.miragem-modern {
    background-position: center top !important;
    background-size: auto 1000px !important;
  }
  .sm-page,
  .sm-page.sm-has-hero {
    width: 96vw !important;
    padding-top: 155px !important;
  }
}


/* =========================================================
   SHAIYA MIRAGEM 4.5 — CORREÇÃO LIVEBAR + VS DE FOGO
   Remove completamente os antigos quadros Fúria/Luz do topo,
   preservando a posição dos outros elementos.
   ========================================================= */

/* A barra continua ocupando a mesma largura, mas a área vazia fica realmente livre. */
.sm-livebar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  gap: 0 !important;
}

/* Mantém os dois blocos restantes exatamente no espaço dos dois primeiros blocos originais. */
.sm-livebar .live-item {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  min-height: 54px !important;
  background: rgba(3, 8, 13, 0.72) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.sm-livebar .live-item.online {
  border-left: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 10px 0 0 10px !important;
}

.sm-livebar .live-item.accounts {
  border-right: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Nenhum quadro ou preenchimento aparece no espaço anteriormente usado por Fúria/Luz. */
.sm-livebar::after,
.sm-livebar::before {
  content: none !important;
  display: none !important;
}

/* Efeito de fogo vivo ao redor do VS do painel central. */
.faction-battle .vs {
  position: relative !important;
  z-index: 2 !important;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(59,196,255, .92) !important;
  background:
    radial-gradient(circle at 50% 45%, rgba(60, 14, 2, .96) 0 48%, rgba(20, 5, 2, .98) 69%, rgba(0,0,0,.98) 100%) !important;
  color: #76d6ff !important;
  text-shadow: 0 0 8px #2ec0ff, 0 0 18px rgba(255, 75, 0, .9) !important;
  box-shadow:
    0 0 8px #54ccff,
    0 0 18px #2ec0ff,
    0 0 32px rgba(255, 55, 0, .8),
    inset 0 0 12px rgba(255, 95, 0, .42) !important;
  animation: miragemVsPulse 1.45s ease-in-out infinite alternate !important;
}

.faction-battle .vs::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  z-index: -2 !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 0deg,
      transparent 0 5%, #2ec0ff 7% 10%, transparent 12% 18%,
      #ff4b00 20% 25%, transparent 28% 34%, #68d2ff 36% 40%,
      transparent 43% 50%, #ff5a00 53% 58%, transparent 61% 68%,
      #36c3ff 70% 75%, transparent 78% 84%, #ff3b00 87% 92%, transparent 95% 100%) !important;
  filter: blur(2px) drop-shadow(0 0 7px #ff4b00) !important;
  opacity: .98 !important;
  animation: miragemVsFireSpin 3.2s linear infinite !important;
}

.faction-battle .vs::after {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  z-index: -1 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(46,192,255, .82) !important;
  box-shadow:
    0 -8px 11px rgba(87,204,255, .75),
    8px -2px 12px rgba(255, 72, 0, .72),
    -8px 3px 12px rgba(255, 86, 0, .7),
    0 8px 14px rgba(255, 32, 0, .76) !important;
  animation: miragemVsFireFlicker .72s ease-in-out infinite alternate !important;
}

@keyframes miragemVsFireSpin {
  to { transform: rotate(360deg) scale(1.03); }
}

@keyframes miragemVsFireFlicker {
  0% { opacity: .70; transform: scale(.96); filter: blur(.2px); }
  55% { opacity: 1; transform: scale(1.08); filter: blur(.8px); }
  100% { opacity: .84; transform: scale(1.02); filter: blur(.35px); }
}

@keyframes miragemVsPulse {
  from { box-shadow: 0 0 8px #54ccff,0 0 15px #2ec0ff,0 0 25px rgba(255,45,0,.65),inset 0 0 10px rgba(255,95,0,.35); }
  to   { box-shadow: 0 0 11px #85daff,0 0 24px #2ec0ff,0 0 43px rgba(255,42,0,.92),inset 0 0 16px rgba(255,115,0,.55); }
}

@media (max-width: 800px) {
  .sm-livebar .live-item {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }
}

/* =========================================================
   AJUSTE 23 — LIVEBAR MAIS COMPACTA
   Diminui apenas os quadros Jogadores Online e Total de Contas.
   Mantém header, ações e navegação nas posições atuais.
   ========================================================= */
.sm-livebar .live-item {
  flex: 0 0 19% !important;
  max-width: 19% !important;
  min-height: 48px !important;
  padding: 5px 8px !important;
}
.sm-livebar .live-item b {
  font-size: 13px !important;
}
.sm-livebar .live-item small {
  font-size: 7px !important;
  margin-top: 2px !important;
}

/* =========================================================
   V32 — LOGO SEPARADA E FIXA NO TOPO
   A logo não faz parte do background.
   ========================================================= */
html, body, body.miragem-modern {
  background-image: url('../assets/shaiya-miragem-fundo-azul-v2.png?v=20260920') !important;
  background-position: center top !important;
  background-size: cover !important;
}
.sm-fixed-logo {
  position: relative;
  z-index: 20;
  width: min(1000px, 80vw);
  aspect-ratio: 1008 / 345;
  margin: 0 auto -64px;
  background: url('../assets/shaiya-visium-logo-v18.png?v=18') center center / contain no-repeat;
  pointer-events: none;
}
.sm-page, .sm-page.sm-has-hero {
  padding-top: 0 !important;
}
@media (max-width: 900px) {
  .sm-fixed-logo { width: min(900px, 95vw); margin-bottom: -34px; }
}

/* =========================================================
   V46 — TRANSPARÊNCIA GLOBAL DA INTERFACE: 50%
   50% transparente = 50% de opacidade no fundo dos painéis.
   Não aplica opacity nos elementos, preservando textos/ícones.
   ========================================================= */
:root {
  --sm-card-bg: linear-gradient(145deg, rgba(6,14,21,.50), rgba(2,7,11,.50)) !important;
}
.sm-livebar,
.sm-nav,
.status-card,
.panel,
.content-panel,
.account-panel,
.account-action-card,
.dl-card,
.donate-method-card,
.rule-card,
.news-item,
.quick-item,
.rank-item,
.gallery-item {
  background-color: rgba(3,8,13,.50) !important;
}
.sm-livebar { background: rgba(3,8,13,.50) !important; }
.sm-nav { background: linear-gradient(180deg, rgba(5,12,18,.50), rgba(2,7,11,.50)) !important; }


/* =========================================================
   V58 — NOVO FUNDO SHAIYA MIRAGEM 4.5
   Usa a imagem enviada pelo administrador como fundo principal.
   ========================================================= */
html,
body,
body.miragem-modern,
body.admin-body {
  background-color: #050300 !important;
  background-image: url('../assets/shaiya-miragem-fundo-azul-v2.png?v=20260920') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

/* Remove qualquer fundo antigo aplicado por pseudo-elementos. */
body.miragem-modern::before,
body.admin-body::before {
  background-image: none !important;
}