/* Esconde elementos mobile no desktop */
.MobileHeaderNav { display: none !important; } /* ANTIGO - não usado */
.MobileHeader { display: none !important; }

/* Componentes EXCLUSIVOS do mobile escondidos no desktop */
@media (min-width: 1025px) {
  .MobileHeader,
  #MobileBoostedStrip,
  .mobile-menu,
  .mobile-submenu-panel { display: none !important; }
}

/* Estilos exclusivamente para mobile (até 1024px) */
@media (max-width: 1024px) {
  /* Design System mobile base */
  :root{
    --m-color-bg:#0d0d0d;
    --m-color-surface:#121212;
    --m-color-surface-2:#1a1a1a;
    --m-color-text:#efefef;
    --m-color-text-dim:#bdbdbd;
    --m-color-primary:#ff6012;
    --m-color-accent:#ff0000;
    --m-border:#2a2a2a;
    --m-radius:10px;
    --m-shadow:0 6px 20px rgba(0,0,0,.35);
    --m-space-1:6px;   /* xs */
    --m-space-2:10px;  /* sm */
    --m-space-3:14px;  /* md */
    --m-space-4:18px;  /* lg */
    --m-font-1:12px;   /* small */
    --m-font-2:14px;   /* base  */
    --m-font-3:16px;   /* title */
  }
  *,*::before,*::after{ box-sizing:border-box; }
  html{ font-size:100%; }
  body{ background:var(--m-color-bg) !important; color:var(--m-color-text); font-family:Verdana, Arial, sans-serif; font-size:var(--m-font-2); line-height:1.6; }
  /* Esconde topbar no mobile; usamos MobileHeader + BoostedStrip + MobileHeaderNav */
  #TopbarCompanyServers { display:none !important; }
  /* Ocultar barra de ícones (InfoBar) apenas no mobile */
  .InfoBar { display: none !important; }

  /* NOVO: Header Mobile com Logo, Status e Criaturas */
  .MobileHeader {
    display: flex !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    background: var(--m-color-surface) !important;
    padding: var(--m-space-2) !important;
    flex-direction: column !important;
    align-items: center !important;
    border-bottom: 1px solid var(--m-border) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    gap: var(--m-space-2) !important;
  }

  .MobileHeader .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: bold !important;
    color: var(--m-color-primary) !important;
    text-decoration: none !important;
  }

  .MobileHeader .brand img {
    height: 28px !important;
    width: auto !important;
  }

  .MobileHeader .brand span {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--m-color-primary) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
    white-space: nowrap !important;
  }

  /* Linha de ações sob a marca (status, chips, CTAs e hambúrguer) */
  .MobileHeader .header-actions{ display: grid !important; grid-template-columns: 1fr auto auto !important; grid-auto-rows: minmax(40px, auto) !important; width: 100% !important; align-items: center !important; gap: var(--m-space-2) !important; }
  .MobileHeader .header-info { display: flex !important; align-items: center !important; gap: 6px !important; justify-content: flex-start !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }

  .MobileHeader .header-info .chip {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 999px !important;
    background: var(--m-color-surface-2) !important;
    font-size: 10px !important;
    color: var(--m-color-text) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .MobileHeader .header-info .chip img {
    height: 14px !important;
    width: auto !important;
  }

  /* Painel informativo de boosted (mobile) */
  .boosted-info[hidden] { display: none !important; }
  .boosted-info {
    position: fixed !important;
    left: 10px !important; right: 10px !important;
    top: calc(var(--mobile-header-h, 60px) + 8px) !important;
    z-index: 5000 !important;
    background: rgba(18,18,18,0.92) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.4) !important;
  }
  .boosted-info .bi-content{ display:flex !important; align-items:center !important; justify-content: space-between !important; gap:10px !important; padding:10px 12px !important; }
  .boosted-info .bi-text{ color: var(--m-color-text) !important; font-size: 13px !important; }
  .boosted-info .bi-close{ background:transparent !important; color: var(--m-color-text) !important; border:1px solid var(--m-border) !important; width:28px !important; height:28px !important; border-radius:6px !important; }

  /* Status colors no header */
  .MobileHeader .header-info .chip.status-online {
    background: rgba(0,128,0,.12) !important;
    border-color: rgba(0,128,0,.45) !important;
    color: #31d158 !important;
  }

  .MobileHeader .header-info .chip:not(.status-online) {
    background: rgba(128,0,0,.12) !important;
    border-color: rgba(128,0,0,.45) !important;
    color: #ff5e5e !important;
  }

  /* Botão hamburger no header */
  #mobile-menu-toggle-header {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    gap: 4px !important;
    padding: 8px !important;
    justify-self: end !important;
  }

  /* CTAs no header mobile */
  .MobileHeader .header-ctas-mobile{ display: flex !important; gap: 8px !important; align-items: center !important; justify-self: center !important; }
  .MobileHeader .btn-cta{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 6px !important;
    color: var(--m-color-text) !important;
    background: rgba(28,28,28,0.6) !important;
    text-decoration: none !important;
    min-height: 32px !important;
  }
  .MobileHeader .btn-cta.accent{
    border-color: var(--m-color-primary) !important;
    color: var(--m-color-primary) !important;
    background: rgba(28,28,28,0.2) !important;
  }

  #mobile-menu-toggle-header span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: var(--m-color-text) !important;
    border-radius: 1px !important;
    transition: all 0.2s ease !important;
  }
  
  #TopbarCompanyServers .TopbarContainer {
    max-width: 100% !important;
    min-width: auto !important;
    margin: 0 !important;
    padding: 0 var(--m-space-2) !important;
    box-sizing: border-box !important;
  }
  
  #TopbarCompanyServers .TopbarContent { 
    flex-wrap: wrap !important; 
    row-gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  #server-selector-menu { 
    width: min(92vw, 300px) !important; 
    left: auto !important; 
    right: var(--m-space-2) !important; 
    max-width: calc(100vw - 24px) !important;
  }

  /* Barra de informações (ícones sociais e status) pode quebrar linha */
  .InfoBar { flex-wrap: wrap; row-gap: 4px; }

  /* Remover ornamentos pesados no conteúdo para melhorar legibilidade */
  .Content .Corner-tl,
  .Content .Corner-tr,
  .Content .Corner-bl,
  .Content .Corner-br,
  .Content .Border_1 { display: none !important; }
  .Content .Border_2 { margin: 0 !important; }
  .Content .Border_3 { border: 0 !important; margin: 0 !important; }
  .Content .Box { margin: var(--m-space-3) var(--m-space-2) !important; border: 0 !important; background:var(--m-color-surface); border-radius: var(--m-radius); box-shadow: var(--m-shadow); overflow:hidden; }
  .Content .BoxContent { min-height: initial !important; height: auto !important; padding: var(--m-space-3) !important; color: var(--m-color-text); }

  /* Latest News: cabeçalho e corpo fluidos */
  .Content #News .NewsHeadlineBackground { height: auto; min-height: 24px; padding: var(--m-space-2) var(--m-space-3); display:flex; align-items:center; gap: var(--m-space-2); background: var(--m-color-surface-2) !important; border: 1px solid var(--m-border) !important; border-radius: var(--m-radius); }
  .Content #News .NewsHeadlineIcon { position: static; margin: 0; float: none; display: inline-block; vertical-align: middle; width: 18px; height: 18px; }
  .Content #News .NewsHeadlineDate { position: static; display: inline-block; margin-right: var(--m-space-2); vertical-align: middle; font-size: var(--m-font-1); color: var(--m-color-text-dim); }
  .Content #News .NewsHeadlineText { position: static; display: inline-block; vertical-align: middle; font-size: var(--m-font-3); color: var(--m-color-text); }

  #news-container { height: auto !important; max-height: none !important; padding: 0 8px 10px 8px !important; }
  .Content #News .NewsTable { table-layout: auto; }
  .Content #News .NewsTable .NewsTableContainer { padding: 0 0 0 0 !important; }
  .Content #News .NewsTable .NewsTableContainer > .NewsContent { max-width: 100% !important; padding: 0; }

  /* Botão de menu (hambúrguer) para abrir/fechar a coluna de menu */
  #mobile-menu-toggle { 
    display: inline-flex; align-items: center; gap: 6px; 
    padding: 8px 10px; color: #fff; background: #1c1c1c; 
    border: 1px solid #4B4B4B; border-radius: 4px; cursor: pointer;
  }
  #MenuColumn { display: none; }
  #MenuColumn.is-open { display: block; }

  /* Evitar overflow horizontal no mobile - CRÍTICO */
  html, body { 
    overflow-x: hidden !important; 
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* Bloqueia qualquer rolagem horizontal forçada por containers internos */
  .main-site-container, .main-content, .Content, #MenuColumn, .NewsContent, .BoxContent,
  .InfoBar, .BoostedStrip, .TopbarContent, .SmallMenuBox, .Box, .TableContainer { 
    max-width: 100vw !important; 
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .main-site-container, .Content, .main-content, #News, #news-container { 
    width: 100% !important; 
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--m-space-2) !important;
    padding-right: var(--m-space-2) !important;
  }
  
  /* Força tabelas e estruturas internas a respeitarem a largura da tela */
  .TableContainer, .Table1, .Table2, .Table3, .Table4, .Table5, .TableContent { 
    width: 100% !important; 
    max-width: calc(100vw - 20px) !important; 
    box-sizing: border-box !important; 
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Garantir que NADA saia da tela lateralmente */
  * { 
    max-width: 100vw !important; 
    box-sizing: border-box !important; 
  }
  
  img, iframe, embed, object, video { 
    max-width: 100% !important; 
    height: auto !important; 
  }

  /* Acessibilidade/área de toque maior para o botão do menu */
  #mobile-menu-toggle { min-height: 36px; min-width: 44px; line-height: 1; }

  /* Travar scroll de fundo quando menu aberto */
  body.no-scroll { overflow: hidden; }

  /* Imagens e iframes sempre fluidos no conteúdo central */
  .main-content img, .main-content iframe,
  .BoxContent img, .NewsContent img { max-width: 100% !important; height: auto !important; display:block; }

  /* Tabelas com rolagem horizontal quando necessário */
  .main-content table { display: block; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .main-content table tr { width: 100%; }
  .main-content table td, .main-content table th { white-space: normal; }
  #News .NewsTable { display:block; overflow-x:auto; width: 100% !important; }

  /* Menu como gaveta (drawer) deslizante no mobile */
  #MenuColumn {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport height para mobile */
    width: min(86vw, 340px) !important; /* nunca maior que 340px OU 86% da tela */
    background: var(--m-color-surface-2) !important;
    padding: var(--m-space-2) !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 2100 !important;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 8px 0 20px rgba(0,0,0,0.5);
    /* Garantir que nada saia da gaveta */
    max-width: 86vw !important;
  }
  #MenuColumn.is-open { transform: translateX(0); }
  
  /* Conteúdo interno do menu sempre dentro dos limites */
  #MenuColumn * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Menu items com largura controlada */
  #MenuColumn .SmallMenuBox,
  #MenuColumn .MenuButton,
  #MenuColumn .Submenu,
  #MenuColumn .SubmenuitemLabel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Submenu labels podem quebrar linha se necessário */
  #MenuColumn .SubmenuitemLabel {
    white-space: normal !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Simplifica o topo do menu no mobile */
  #LeftArtwork { display: none !important; }
  #MenuTop, #MenuBottom, .SmallBoxTop, .SmallBoxBottom, .SmallBoxBorder, .SmallMenuBorder { display:none !important; }
  .SmallMenuBox { background:transparent !important; border:1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); margin-bottom: var(--m-space-3); }

  /* Itens do menu: alvos de toque confortáveis */
  .MenuButton { height: 44px !important; background:transparent !important; border-bottom:1px solid var(--m-border); }
  .MenuFonts { font-size: var(--m-font-2) !important; line-height: 22px !important; color: var(--m-color-text) !important; text-shadow:none !important; }
  .SubmenuitemLabel { padding: 8px 12px !important; font-size: var(--m-font-2) !important; color: var(--m-color-text) !important; background:transparent !important; border-bottom:1px solid var(--m-border); }
  .ActiveSubmenuItemIcon, .LeftChain, .RightChain, .Lights, .Extend, .Button { display:none !important; }
  .SmallMenuBox, #Menu, .Submenu { width: 100% !important; }
  /* Submenus seguem o comportamento padrão do menu lateral; nav em cascata do topo está desativada acima */

  /* Cabeçalho interno simplificado (oculta a faixa decorativa no mobile) */
  .Content .BorderTitleText,
  .BorderTitleText { display:none !important; }
  #ContentBoxHeadline.Title{ max-width: 80%; height:auto; position:relative; top:0; left:0; display:block; margin: var(--m-space-2) auto var(--m-space-3) auto; }
  /* Quebra segura de conteúdos longos (URLs, códigos etc.) */
  .BoxContent, .NewsContent { word-break: break-word; overflow-wrap: anywhere; }
  .BoxContent pre, .NewsContent pre { white-space: pre-wrap; }

  /* InfoBar compacta */
  .InfoBar{ height:auto; padding: 0 var(--m-space-2); font-size: var(--m-font-1); }
  .InfoBarIcon{ width:14px; height:14px; }
  .InfoBar a{ margin-right: var(--m-space-2); }

  /* Esconde MobileBoostedStrip no mobile - informações agora estão no header */
  #MobileBoostedStrip.BoostedStrip{ 
    display: none !important; 
    gap: 8px; 
    row-gap: 4px; 
    align-items: center; 
    justify-content: flex-start; 
    flex-wrap: wrap; 
    padding: var(--m-space-2) !important; 
    background: var(--m-color-surface) !important;
    border-bottom: 1px solid var(--m-border) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Evitar que saia da tela */
    left: 0 !important;
    right: 0 !important;
  }
  /* Chips da barra de boosted - responsivos */
  .BoostedStrip .chip{ 
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--m-color-surface-2) !important; 
    border: 1px solid var(--m-border) !important; 
    border-radius: 999px !important; 
    padding: 6px 10px !important; 
    font-size: 11px !important; 
    color: var(--m-color-text) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 40vw !important; /* limita largura individual dos chips */
  }
  
  .BoostedStrip .chip img {
    height: 16px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  
  .BoostedStrip .chip span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* CTAs e dropdown no topo (visíveis apenas no mobile) */
  #HeaderCtas{ display:flex !important; align-items:center; gap:8px; margin-left:auto; }
  #HeaderCtas .btn-cta{ padding:6px 10px; background:#1c1c1c; border:1px solid #4B4B4B; border-radius:6px; color:#fff; font-size:12px; text-decoration:none; }
  #HeaderCtas .btn-cta.accent{ background: var(--m-color-accent); border-color: var(--m-color-accent); }
  #header-menu-dropdown{ position:relative; }
  #header-menu-button{ display:flex; align-items:center; gap:6px; color:#fff; background:transparent; border:1px solid #4B4B4B; border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; }
  #header-menu-panel{ position:absolute; top:100%; right:0; margin-top:8px; width: 240px; background:#1c1c1c; color:#fff; border:1px solid rgba(107,114,128,.5); border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,.5); z-index:9999; }
  #header-menu-panel a{ display:block; padding:8px 10px; color:#d7d7d7; text-decoration:none; border-bottom:1px solid #2a2a2a; }
  #header-menu-panel a:last-child{ border-bottom:0; }
  #header-menu-panel a:hover{ color:#fff; background:#2a2a2a; }

  /* Navbar cascata no topo (mobile) — manter desativada; usamos a MobileHeaderNav */
  .HeaderCascadeNav{ display:none !important; }

  /* MENU MOBILE SIDEBAR - ABAIXO DO HEADER */
  .mobile-menu {
    position: fixed !important;
    top: calc(var(--mobile-header-h, 60px) + 24px) !important; /* abaixo do header com folga */
    left: 0 !important;
    width: 280px !important;
    height: calc(100dvh - (var(--mobile-header-h, 60px) + 24px)) !important;
    background: rgba(18,18,18,0.68) !important; /* mais transparente */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2800 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    padding: 12px 10px !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.35) !important;
    border-right: 1px solid var(--m-border) !important;
  }
  
  .mobile-menu.is-open { transform: translateX(0) !important; }
  /* Em estado de submenu aberto, reduz a largura ao invés de deslocar para não cortar textos */
  body.submenu-open .mobile-menu { width: 240px !important; }
  
  /* ESTILOS SIMPLES PARA MENU SIDEBAR */
  .mobile-menu .menu-item {
    margin-bottom: 4px;
  }
  
  .mobile-menu .menu-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 12px !important;
    color: var(--m-color-text) !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: Arial, sans-serif !important;
    background: var(--m-color-surface) !important;
    border-radius: 6px !important;
    margin-bottom: 3px !important;
    min-height: 50px !important;
    cursor: pointer !important;
    border: 1px solid var(--m-border) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  .mobile-menu .menu-link:hover { background: var(--m-color-surface-2) !important; color: var(--m-color-primary) !important; }
  .mobile-menu .menu-item.is-active .menu-link { border-color: var(--m-color-primary) !important; color: var(--m-color-primary) !important; }
  
  .mobile-menu .menu-link .arrow {
    font-size: 14px !important;
    color: #ffffff !important;
    transition: transform 0.2s ease !important;
  }
  
  .mobile-menu .menu-item.is-open .arrow {
    transform: rotate(180deg) !important;
  }
  
  .mobile-menu .submenu { display:none !important; }
  
  .mobile-menu .submenu a { display:block !important; padding:12px 15px !important; color: var(--m-color-text-dim) !important; text-decoration:none !important; font-size:14px !important; border-bottom:1px solid rgba(255,255,255,0.06) !important; }
  
  .mobile-menu .submenu a:last-child {
    border-bottom: none !important;
  }
  
  .mobile-menu .submenu a:hover { background: var(--m-color-surface) !important; color: var(--m-color-text) !important; border-left: 3px solid var(--m-color-primary) !important; }

  /* SEGUNDA SIDEBAR: SUBMENU PANEL */
  .mobile-submenu-panel {
    position: fixed;
    top: calc(var(--mobile-header-h, 60px) + 24px); /* abaixo do header com folga */
    left: 280px; /* ao lado da primeira sidebar */
    width: calc(100vw - 280px);
    height: calc(100dvh - (var(--mobile-header-h, 60px) + 24px));
    background: rgba(20,20,20,0.62); /* mais transparente */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-left: 1px solid var(--m-border);
    z-index: 2810; /* acima da primeira sidebar */
    transform: translateX(100%);
    transition: transform 0.28s ease;
    overflow-y: auto;
    box-shadow: 4px 0 16px rgba(0,0,0,0.35);
    display: none;
  }
  .mobile-submenu-panel.is-open { display:block; transform: translateX(0); }
  /* Ajusta posição/largura quando a principal recolher */
  body.submenu-open .mobile-submenu-panel { left: 240px; width: calc(100vw - 240px); }
  .mobile-submenu-panel .submenu-header { display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--m-border); background: var(--m-color-surface-2); position: sticky; top:0; z-index:1; }
  .mobile-submenu-panel .submenu-header .back-btn { width:36px; height:36px; border:1px solid var(--m-border); background:transparent; color: var(--m-color-text); border-radius:6px; }
  .mobile-submenu-panel .submenu-header .title { color: var(--m-color-text); font-weight:700; font-size:16px; }
  .mobile-submenu-panel .submenu-content a { display:block; padding:12px 14px; color: var(--m-color-text-dim); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.06); }
  .mobile-submenu-panel .submenu-content a:hover { background: var(--m-color-surface-2); color: var(--m-color-text); }

  /* Overlay para escurecer fundo quando o menu estiver aberto */
  #DeactivationContainer {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0,0,0,0.65) !important;
    z-index: 2000 !important; /* abaixo do menu */
    display: none;
  }

  /* Oculta o bloco antigo de Boosted no mobile para evitar duplicação com os chips */
  #RightArtwork{ display:none !important; }
  #RightArtwork #Pedestal,
  #RightArtwork #Monster,
  #RightArtwork #Boss{ display:none !important; }
  .Themebox, .Themeboxes{ display:none !important; }
  .TopbarCorner-tl, .TopbarCorner-tr { display:none !important; }

  /* Container principal fluido - margens simétricas */
  .main-site-container{ 
    padding: 0 var(--m-space-2) !important; 
    gap: var(--m-space-3) !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
  }
  
  /* Garante que conteúdo principal tenha margens simétricas */
  .main-content {
    padding: var(--m-space-2) !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Alinha NewsTicker com mesma largura do conteúdo principal */
  .Content #NewsTicker {
    margin: var(--m-space-3) var(--m-space-2) !important;
    width: calc(100% - calc(var(--m-space-2) * 2)) !important;
    max-width: calc(100vw - calc(var(--m-space-2) * 2)) !important;
    box-sizing: border-box !important;
  }

  /* Centralização e alinhamento do ContentBoxHeadline (headline de conteúdo) */
  .Content #ContentBoxHeadline {
    display: block !important;
    margin: var(--m-space-3) auto var(--m-space-2) auto !important;
    max-width: calc(100vw - calc(var(--m-space-2) * 2)) !important;
    width: auto !important;
    height: auto !important;
  }
  /* Reforço de centralização para imagens com id e classe Title */
  .Content img#ContentBoxHeadline.Title {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
  /* Centralização geométrica absoluta para casos com paddings assimétricos do container */
  .Content .Box > img#ContentBoxHeadline.Title {
    position: relative !important;
    left: 65% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Centralização perfeita no NewsTicker e News (container vira grid e a imagem centra por self-alignment) */
  .Content #NewsTicker { display: grid !important; }
  .Content #NewsTicker > img#ContentBoxHeadline.Title {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin: var(--m-space-3) auto var(--m-space-2) auto !important;
  }
  .Content #News { display: grid !important; }
  .Content #News > img#ContentBoxHeadline.Title {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    justify-self: center !important;
    margin: var(--m-space-3) auto var(--m-space-2) auto !important;
  }

  .Content #NewsTicker .BoxContent {
    padding: var(--m-space-3) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Centraliza títulos do News Ticker e News */
  .Content #NewsTicker .Title,
  .Content #News .Title,
  .Content .Box .Title,
  #ContentBoxHeadline {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Centraliza toda a área de título */
  .Content .Box .BorderTitleText,
  .Content #NewsTicker .BorderTitleText,
  .Content #News .BorderTitleText {
    text-align: center !important;
  }

  /* Remover qualquer linha/borda indesejada no header no mobile */
  #TopbarCompanyServers,
  #TopbarCompanyServers .TopbarContent,
  .TopbarContainer{ border:0 !important; box-shadow:none !important; background-image:none !important; }
  .main-header{ border:0 !important; box-shadow:none !important; background:none !important; }

  /* Estilização dos chips de Boosted (ícone + texto alinhados) */
  .BoostedStrip .chip{ display:flex; align-items:center; gap:8px; padding:4px 10px; border:1px solid var(--m-border); border-radius:999px; background:var(--m-color-surface-2); position:relative; line-height:1; }
  .BoostedStrip .chip img{ height:18px; width:auto; display:block; }
  /* Status chip (primeiro) — cor baseada no status */
  /* Destacar status online em verde - força aplicação */
  #MobileBoostedStrip .chip.status-online,
  .BoostedStrip .chip.status-online { 
    background: rgba(0,128,0,.12) !important; 
    border-color: rgba(0,128,0,.45) !important; 
    color: #31d158 !important; 
  }
  
  /* Status offline em vermelho */
  #MobileBoostedStrip .chip:not(.status-online),
  .BoostedStrip .chip:not(.status-online) { 
    background: rgba(128,0,0,.12) !important; 
    border-color: rgba(128,0,0,.45) !important; 
    color: #ff5e5e !important; 
  }
  /* Nome oculto por padrão para não quebrar layout */
  .BoostedStrip .chip span{ display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.9); color:var(--m-color-text); border:1px solid var(--m-border); border-radius:6px; padding:6px 8px; font-size:12px; white-space:nowrap; margin-bottom:8px; box-shadow:var(--m-shadow); z-index:5; }
  /* Exibe o nome apenas em interação (hover/active/focus) */
  .BoostedStrip .chip:hover span,
  .BoostedStrip .chip:active span,
  .BoostedStrip .chip:focus-within span{ display:block; }

  /* Melhorias finais para mobile */
  /* Área de toque maior para elementos interativos */
  #mobile-menu-toggle,
  .BoostedStrip .chip,
  .MenuButton,
  .btn-cta {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Smooth scrolling em todo o mobile */
  html {
    scroll-behavior: smooth !important;
  }

  /* Otimização de performance para animações */
  #MenuColumn,
  .BoostedStrip,
  .chip {
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
  }

  /* Garantir que o conteúdo não fique atrás da barra de boosted */
  .Content,
  .main-content > .Content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Ajuste fino da largura da barra de boosted: margens simétricas */
  #MobileBoostedStrip {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--m-space-2) !important;
    padding-right: var(--m-space-2) !important;
  }
}