/* Slug cresce corretamente */
#slugInput.token-input {
    flex: 1;
    min-width: 0;
  }
  
  /* Botão não estica */
  #createsxForm button[type="submit"] {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  
  .bot-nav-title-tracking {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  
  
  
  .sx-table,
  .table {
    width: 100%;
    border-collapse: collapse;
    /* background: var(--bg-card); */
    border-radius: 12px;
    overflow: hidden;
  }
  
  .desktop-table table {
    table-layout: fixed;
    width: 100%;
  }
  
  .sx-table thead,
  .table thead {
    background: rgba(255, 255, 255, 0.04);
  }
  
  .sx-table th,
  .sx-table td,
  .desktop-table th,
  .desktop-table td {
    padding: 14px 16px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: middle;
  }
  
  .desktop-table td>div {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .sx-table th {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--txt-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  
  .sx-table tbody tr:hover,
  .desktop-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
  }
  
  .sx-link {
    color: var(--purple);
    text-decoration: none;
  }
  
  .sx-link:hover {
    text-decoration: underline;
  }
  
  
  
  
  /* ===== sxs ===== */
  
  .sx-desktop,
  .desktop-table {
    display: block;
  }
  
  .sx-mobile,
  .mobile-cards {
    display: none;
  }
  
  /* Empty State */
  .empty-state {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary);
  }
  
  .empty-state i {
    font-size: 28px;
    color: var(--purple);
    margin-bottom: 8px;
  }
  
  .empty-state h4 {
    margin-top: 8px;
    margin-bottom: 4px;
  }
  
  .empty-state p {
    margin-top: 4px;
    font-size: 0.9rem;
  }
  
  
  
  
  /* Mobile */
  @media (max-width: 768px) {
  
  
    @media (max-width: 768px) {
      .gw-card {
        flex-direction: column;
        align-items: stretch;
      }
    }
  
  
    .sx-desktop,
    .desktop-table {
      display: none;
    }
  
    .sx-mobile,
    .mobile-cards {
      display: block;
    }
  
    .sx-card,
    .mobile-card {
      /* background: var(--bg-card); */
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
      width: 100%
    }
  
    .sx-card-header,
    .mobile-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      gap: 12px;
    }
  
    .sx-card-title,
    .mobile-card-title {
      font-weight: 600;
      font-size: 1.2rem;
    }
  
    .sx-card-title-2 {
      font-weight: 600;
      font-size: 1.5rem;
    }
  
    .sx-card-meta,
    .mobile-card-meta {
      font-size: 0.85rem;
      color: var(--text-secondary);
      word-break: break-all;
    }
  
    .sx-card-row {
      margin-top: 8px;
      font-size: 0.9rem;
    }
  
    .sx-card-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }
  
    .sx-card-actions button {
      flex: 1;
      justify-content: center;
    }
  
  
  
  
  
  
    /* ===================================== */
    /* PLANOS - MOBILE EM BLOCO (SEM SCROLL) */
    /* ===================================== */
  
    @media (max-width: 768px) {
  
      /* Remove cabeçalho */
      .sx-desktop-forms .sx-table thead {
        display: none;
      }
  
      /* Remove estilo padrão de tabela */
      .sx-desktop-forms .sx-table,
      .sx-desktop-forms .sx-table tbody,
      .sx-desktop-forms .sx-table tr,
      .sx-desktop-forms .sx-table td {
        display: block;
        width: 100%;
      }
  
      /* Cada linha vira um card */
      .sx-desktop-forms .sx-table tr {
        /* background: var(--bg-card); */
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
      }
  
      /* Remove borda interna padrão */
      .sx-desktop-forms .sx-table td {
        border: none;
        padding: 8px 0;
      }
  
      /* Espaçamento interno entre campos */
      .sx-desktop-forms .sx-table td+td {
        margin-top: 10px;
      }
  
      /* Inputs ocupam largura total */
      .sx-desktop-forms .sx-table input,
      .sx-desktop-forms .sx-table select {
        width: 100%;
      }
  
      /* Botão remover full width */
      .sx-desktop-forms .btn-delete {
        width: 100%;
        justify-content: center;
      }
  
    }
  
  
  
  
  }
  
  
  
  .break-long-text {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 620px;
    /* ajuste se quiser */
  }