/* =====================================================
   TURMA BLACK DO PRIMO - DASHBOARD PREMIUM
   CSS BASE + DASHBOARD
===================================================== */

/* ================= RESET GLOBAL ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background: #07070b;
  color: #ffffff;
  min-height: 100vh;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
}

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

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0b0b10;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cf6, #4c1d95);
  border-radius: 20px;
}

/* ================= BODY DASHBOARD ================= */

.dashboard-body {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%),
    #07070b;
}

/* ================= LAYOUT ================= */

.dashboard-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ================= SIDEBAR ================= */

.sidebar {
  width: 280px;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(12, 12, 18, 0.96);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
  transition: 0.35s ease;
}

.sidebar-logo {
  padding: 28px 24px 22px;
}

.sidebar-logo h1 {
  font-size: 22px;
  letter-spacing: 1px;
  font-weight: 900;
}

.sidebar-logo h1 span {
  color: #a78bfa;
}

.sidebar-logo p {
  margin-top: 6px;
  font-size: 12px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ================= MENU LATERAL ================= */

.sidebar-menu {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.menu-item {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: transparent;
  color: #c7c7d1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  transition: 0.25s ease;
}

.menu-item span {
  font-size: 18px;
}

.menu-item:hover {
  background: rgba(139, 92, 246, 0.14);
  color: #ffffff;
  transform: translateX(4px);
}

.menu-item.active {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.28);
}

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

.sidebar-footer {
  padding: 16px;
}

.logout-btn {
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  font-weight: 800;
  transition: 0.25s ease;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* ================= MAIN ================= */

.dashboard-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  padding: 24px;
}

/* ================= HEADER ================= */

.dashboard-header {
  width: 100%;
  min-height: 82px;
  padding: 18px 22px;
  background: rgba(15, 15, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.22);
}

.dashboard-header h2 {
  font-size: 23px;
  font-weight: 900;
}

.dashboard-header h2 span {
  color: #c4b5fd;
}

.dashboard-header p {
  margin-top: 4px;
  color: #9ca3af;
  font-size: 14px;
}

.mobile-menu-btn {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(139, 92, 246, 0.18);
  color: #fff;
  font-size: 22px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-badge {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-badge span {
  width: 9px;
  height: 9px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 15px #22c55e;
}

.profile-shortcut {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: #fff;
  font-size: 20px;
}

/* ================= HERO ================= */

.dashboard-hero {
  margin-top: 24px;
  padding: 34px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(15, 15, 22, 0.92)),
    radial-gradient(circle at right, rgba(168, 85, 247, 0.35), transparent 40%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 1.7fr 0.8fr;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.dashboard-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: rgba(167, 139, 250, 0.16);
  border-radius: 50%;
  filter: blur(20px);
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-tag {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.hero-content h1 {
  max-width: 760px;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.03;
  font-weight: 950;
  letter-spacing: -1.5px;
}

.hero-content p {
  max-width: 650px;
  margin-top: 16px;
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.6;
}

.hero-buttons {
  margin-top: 24px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
  padding: 15px 20px;
  border-radius: 16px;
  font-weight: 900;
  transition: 0.25s ease;
}

.primary-btn {
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(124, 58, 237, 0.32);
}

.secondary-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.primary-btn:hover,
.secondary-btn:hover {
  transform: translateY(-3px);
}

/* ================= CARD HERO PROGRESSO ================= */

.hero-card {
  position: relative;
  z-index: 2;
  padding: 24px;
  border-radius: 28px;
  background: rgba(8, 8, 13, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(20px);
}

.hero-card p {
  color: #a1a1aa;
  font-size: 14px;
  font-weight: 700;
}

.hero-card strong {
  display: block;
  margin-top: 12px;
  font-size: 48px;
  font-weight: 950;
}

.progress-bar {
  margin-top: 16px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress-bar div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #c084fc, #facc15);
  transition: width 0.6s ease;
}

/* ================= CARDS DE MÉTRICAS ================= */

.dashboard-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dash-card {
  padding: 22px;
  border-radius: 26px;
  background: rgba(15, 15, 22, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: 0.25s ease;
}

.dash-card:hover {
  transform: translateY(-4px);
  background: rgba(25, 25, 36, 0.86);
}

.card-icon {
  min-width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(139, 92, 246, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.dash-card p {
  color: #a1a1aa;
  font-size: 14px;
  font-weight: 700;
}

.dash-card h3 {
  margin-top: 5px;
  font-size: 26px;
  font-weight: 950;
}

/* ================= GRID PRINCIPAL ================= */

.dashboard-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 20px;
}

.panel {
  padding: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.premium-panel {
  background:
    linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(15, 15, 22, 0.86));
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel-header h2 {
  font-size: 22px;
  font-weight: 950;
}

.panel-header p {
  margin-top: 5px;
  color: #9ca3af;
  font-size: 14px;
}

/* ================= LISTA DE MÓDULOS ================= */

.module-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.module-item {
  width: 100%;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 14px;
  transition: 0.25s ease;
}

.module-item:hover {
  background: rgba(139, 92, 246, 0.16);
  transform: translateX(5px);
}

.module-item div {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
}

.module-item span {
  grid-row: span 2;
  font-size: 25px;
}

.module-item strong {
  font-size: 16px;
}

.module-item p {
  color: #a1a1aa;
  font-size: 13px;
}

.module-item b {
  color: #c4b5fd;
  font-size: 13px;
}

/* ================= ATIVIDADES ================= */

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.activity-item {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.activity-item span {
  font-size: 20px;
}

.activity-item strong {
  font-size: 15px;
}

.activity-item p {
  margin-top: 4px;
  color: #a1a1aa;
  font-size: 13px;
}

/* ================= FERRAMENTAS ================= */

.tools-section {
  margin-top: 24px;
}

.section-title {
  margin-bottom: 16px;
}

.section-title h2 {
  font-size: 25px;
  font-weight: 950;
}

.section-title p {
  margin-top: 5px;
  color: #9ca3af;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.tool-card {
  min-height: 170px;
  padding: 22px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: left;
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}

.tool-card::after {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  right: -30px;
  bottom: -30px;
  background: rgba(139, 92, 246, 0.18);
  border-radius: 50%;
  filter: blur(4px);
}

.tool-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.35);
}

.tool-card span {
  font-size: 30px;
}

.tool-card strong {
  display: block;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 950;
}

.tool-card p {
  margin-top: 7px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.4;
}

/* ================= OVERLAY MOBILE ================= */

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ================= RESPONSIVO TABLET ================= */

@media (max-width: 1100px) {
  .dashboard-cards,
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-grid,
  .dashboard-hero {
    grid-template-columns: 1fr;
  }
}

/* ================= RESPONSIVO MOBILE ================= */

@media (max-width: 820px) {
  .sidebar {
    transform: translateX(-105%);
    width: 286px;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .dashboard-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dashboard-header {
    border-radius: 22px;
    padding: 14px;
    align-items: flex-start;
  }

  .dashboard-header h2 {
    font-size: 18px;
  }

  .dashboard-header p {
    font-size: 12px;
  }

  .status-badge {
    display: none;
  }

  .dashboard-hero {
    padding: 24px 18px;
    border-radius: 26px;
  }

  .hero-content h1 {
    font-size: 31px;
  }

  .hero-content p {
    font-size: 14px;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
  }

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

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

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

  .panel {
    padding: 18px;
    border-radius: 24px;
  }

  .module-item {
    align-items: flex-start;
  }

  .module-item b {
    display: none;
  }
}

/* ================= MOBILE PEQUENO ================= */

@media (max-width: 420px) {
  .dashboard-main {
    padding: 10px;
  }

  .dashboard-header {
    gap: 10px;
  }

  .profile-shortcut {
    width: 42px;
    height: 42px;
  }

  .dashboard-hero {
    padding: 22px 16px;
  }

  .hero-content h1 {
    font-size: 27px;
  }

  .hero-card strong {
    font-size: 40px;
  }

  .dash-card {
    padding: 18px;
  }
}
@media (max-width: 820px) {
  .dashboard-header h2 {
    font-size: 18px;
  }

  .dashboard-header p {
    font-size: 12px;
  }

  .hero-content h1 {
    font-size: 31px;
  }

  .hero-content p {
    font-size: 14px;
  }

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

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

@media (max-width: 420px) {
  .hero-content h1 {
    font-size: 27px;
  }

  .hero-card strong {
    font-size: 40px;
  }
}
/* =====================================================
   PERFIL PREMIUM
===================================================== */

.perfil-body {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%),
    #07070b;
}

.perfil-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.perfil-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  padding: 24px;
}

.perfil-hero {
  margin-top: 24px;
  padding: 30px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(15, 15, 22, 0.9)),
    radial-gradient(circle at right, rgba(168, 85, 247, 0.25), transparent 45%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 22px;
  align-items: center;
}

.perfil-user-card {
  display: flex;
  align-items: center;
  gap: 22px;
}

.perfil-avatar {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  background: linear-gradient(135deg, #8b5cf6, #4c1d95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 950;
  box-shadow: 0 20px 45px rgba(124, 58, 237, 0.35);
}

.perfil-tag {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}

.perfil-user-card h1 {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 950;
  line-height: 1.05;
}

.perfil-user-card p {
  margin-top: 6px;
  color: #d1d5db;
}

.perfil-level-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(8, 8, 13, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.perfil-level-card p {
  color: #a1a1aa;
  font-weight: 700;
}

.perfil-level-card h2 {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 950;
}

.perfil-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
}

.perfil-panel {
  padding: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.perfil-form {
  display: grid;
  gap: 16px;
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-group label {
  color: #d1d5db;
  font-size: 14px;
  font-weight: 800;
}

.input-group input {
  width: 100%;
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
  font-size: 15px;
  transition: 0.25s ease;
}

.input-group input:focus {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.perfil-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.perfil-stats div {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.perfil-stats span {
  font-size: 24px;
}

.perfil-stats p {
  margin-top: 10px;
  color: #a1a1aa;
  font-size: 13px;
  font-weight: 700;
}

.perfil-stats strong {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 950;
}

.security-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.security-item {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  display: flex;
  gap: 12px;
}

.security-item span {
  font-size: 23px;
}

.security-item strong {
  font-size: 15px;
}

.security-item p {
  margin-top: 4px;
  color: #a1a1aa;
  font-size: 13px;
}

.danger-panel {
  background:
    linear-gradient(145deg, rgba(239, 68, 68, 0.09), rgba(15, 15, 22, 0.85));
}

.danger-btn {
  width: 100%;
  padding: 15px;
  border-radius: 16px;
  background: rgba(239, 68, 68, 0.13);
  color: #fca5a5;
  font-weight: 900;
  margin-bottom: 12px;
  transition: 0.25s ease;
}

.danger-btn:hover {
  background: rgba(239, 68, 68, 0.22);
}

/* ================= PERFIL MOBILE ================= */

@media (max-width: 1100px) {
  .perfil-hero,
  .perfil-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .perfil-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .perfil-hero {
    padding: 22px;
    border-radius: 26px;
  }

  .perfil-user-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .perfil-avatar {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    font-size: 34px;
  }

  .perfil-user-card h1 {
    font-size: 30px;
  }

  .perfil-panel {
    padding: 18px;
    border-radius: 24px;
  }

  .perfil-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .perfil-main {
    padding: 10px;
  }

  .perfil-hero {
    padding: 18px;
  }

  .perfil-user-card h1 {
    font-size: 26px;
  }

  .perfil-level-card h2 {
    font-size: 25px;
  }

  .input-group input {
    font-size: 14px;
    padding: 13px 14px;
  }
}
/* =====================================================
   SUPORTE PREMIUM
===================================================== */

.suporte-body {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%),
    #07070b;
}

.suporte-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.suporte-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  padding: 24px;
}

/* ================= HERO SUPORTE ================= */

.suporte-hero {
  margin-top: 24px;
  padding: 34px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(15, 15, 22, 0.92)),
    radial-gradient(circle at right, rgba(168, 85, 247, 0.28), transparent 45%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 22px;
  align-items: center;
  overflow: hidden;
}

.suporte-tag {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.suporte-hero h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -1px;
}

.suporte-hero p {
  max-width: 680px;
  margin-top: 14px;
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.6;
}

.suporte-status-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(8, 8, 13, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(18px);
}

.suporte-status-card p {
  color: #a1a1aa;
  font-weight: 700;
}

.suporte-status-card h2 {
  margin-top: 8px;
  font-size: 34px;
  font-weight: 950;
  color: #86efac;
}

.suporte-status-card span {
  display: inline-flex;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
  font-size: 13px;
  font-weight: 800;
}

/* ================= CARDS SUPORTE ================= */

.suporte-cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.suporte-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}

.suporte-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.16);
  filter: blur(4px);
}

.suporte-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(22, 22, 32, 0.88);
}

.suporte-card span {
  font-size: 34px;
}

.suporte-card h3 {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 950;
}

.suporte-card p {
  margin-top: 8px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.5;
}

/* ================= GRID SUPORTE ================= */

.suporte-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.suporte-panel {
  padding: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ================= FORM SUPORTE ================= */

.suporte-form {
  display: grid;
  gap: 16px;
}

.input-group select,
.input-group textarea {
  width: 100%;
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  transition: 0.25s ease;
}

.input-group select:focus,
.input-group textarea:focus {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.input-group select option {
  background: #11111a;
  color: #ffffff;
}

.input-group textarea {
  min-height: 150px;
  resize: vertical;
}

/* ================= LISTA DE CHAMADOS ================= */

.tickets-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.ticket-item {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ticket-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket-top strong {
  font-size: 15px;
  font-weight: 950;
}

.ticket-priority {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.priority-baixa {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

.priority-media {
  background: rgba(250, 204, 21, 0.13);
  color: #fde68a;
}

.priority-alta {
  background: rgba(249, 115, 22, 0.14);
  color: #fdba74;
}

.priority-urgente {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.ticket-item p {
  margin-top: 10px;
  color: #d1d5db;
  font-size: 14px;
  line-height: 1.5;
}

.ticket-meta {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-meta span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 800;
}

.empty-ticket {
  min-height: 220px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-ticket span {
  font-size: 42px;
}

.empty-ticket p {
  margin-top: 10px;
  color: #a1a1aa;
  font-size: 14px;
}

/* ================= FAQ SUPORTE ================= */

.suporte-faq {
  margin-top: 24px;
  padding-bottom: 30px;
}

.faq-list {
  display: grid;
  gap: 14px;
}

.faq-list details {
  border-radius: 22px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.faq-list summary {
  padding: 18px 20px;
  cursor: pointer;
  font-weight: 900;
  color: #ffffff;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  float: right;
  color: #c4b5fd;
  font-size: 22px;
  line-height: 18px;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list details p {
  padding: 0 20px 18px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

/* ================= SUPORTE MOBILE ================= */

@media (max-width: 1100px) {
  .suporte-hero,
  .suporte-grid {
    grid-template-columns: 1fr;
  }

  .suporte-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .suporte-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .suporte-hero {
    padding: 22px;
    border-radius: 26px;
  }

  .suporte-hero h1 {
    font-size: 31px;
  }

  .suporte-hero p {
    font-size: 14px;
  }

  .suporte-cards {
    grid-template-columns: 1fr;
  }

  .suporte-panel {
    padding: 18px;
    border-radius: 24px;
  }

  .ticket-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .tickets-list {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 420px) {
  .suporte-main {
    padding: 10px;
  }

  .suporte-hero {
    padding: 18px;
  }

  .suporte-hero h1 {
    font-size: 27px;
  }

  .suporte-status-card h2 {
    font-size: 27px;
  }

  .suporte-card,
  .suporte-panel {
    padding: 16px;
  }

  .input-group select,
  .input-group textarea {
    font-size: 14px;
    padding: 13px 14px;
  }
}
/* =====================================================
   NOTAS PREMIUM
===================================================== */

.notas-body {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%),
    #07070b;
}

.notas-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.notas-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  padding: 24px;
}

/* ================= HERO NOTAS ================= */

.notas-hero {
  margin-top: 24px;
  padding: 34px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(15, 15, 22, 0.92)),
    radial-gradient(circle at right, rgba(168, 85, 247, 0.28), transparent 45%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 22px;
  align-items: center;
}

.notas-tag {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.notas-hero h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -1px;
}

.notas-hero p {
  max-width: 680px;
  margin-top: 14px;
  color: #d1d5db;
  font-size: 16px;
  line-height: 1.6;
}

.notas-count-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(8, 8, 13, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.notas-count-card p {
  color: #a1a1aa;
  font-weight: 700;
}

.notas-count-card h2 {
  margin-top: 8px;
  font-size: 46px;
  font-weight: 950;
}

.notas-count-card span {
  display: inline-flex;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 800;
}

/* ================= GRID NOTAS ================= */

.notas-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.notas-panel {
  padding: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ================= FORM NOTAS ================= */

.notas-form {
  display: grid;
  gap: 16px;
}

.notas-form select,
.notas-form textarea,
.notas-filtros select {
  width: 100%;
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
  font-size: 15px;
  font-family: inherit;
  transition: 0.25s ease;
}

.notas-form select:focus,
.notas-form textarea:focus,
.notas-filtros select:focus {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12);
}

.notas-form select option,
.notas-filtros select option {
  background: #11111a;
  color: #ffffff;
}

.notas-form textarea {
  min-height: 180px;
  resize: vertical;
}

.nota-check {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d1d5db;
  font-weight: 800;
  cursor: pointer;
}

.nota-check input {
  width: 18px;
  height: 18px;
  accent-color: #8b5cf6;
}

/* ================= FILTROS NOTAS ================= */

.notas-filtros {
  display: grid;
  gap: 16px;
}

/* ================= LISTA NOTAS ================= */

.notas-list-section {
  margin-top: 24px;
  padding-bottom: 30px;
}

.notas-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nota-card {
  padding: 22px;
  border-radius: 26px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  transition: 0.25s ease;
  position: relative;
  overflow: hidden;
}

.nota-card::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -35px;
  width: 105px;
  height: 105px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.14);
  filter: blur(4px);
}

.nota-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.35);
  background: rgba(22, 22, 32, 0.88);
}

.nota-card.importante {
  border-color: rgba(250, 204, 21, 0.35);
  background:
    linear-gradient(145deg, rgba(250, 204, 21, 0.08), rgba(15, 15, 22, 0.78));
}

.nota-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.nota-top h3 {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.25;
}

.nota-star {
  color: #facc15;
  font-size: 20px;
  flex-shrink: 0;
}

.nota-categoria {
  width: fit-content;
  margin-top: 14px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 900;
  position: relative;
  z-index: 2;
}

.nota-card p {
  margin-top: 14px;
  color: #d1d5db;
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
  position: relative;
  z-index: 2;
  white-space: pre-wrap;
  word-break: break-word;
}

.nota-data {
  margin-top: 14px;
  color: #8b8b98;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  z-index: 2;
}

.nota-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.nota-actions button {
  flex: 1;
  padding: 11px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
  transition: 0.25s ease;
}

.btn-editar-nota {
  background: rgba(139, 92, 246, 0.16);
  color: #ddd6fe;
}

.btn-excluir-nota {
  background: rgba(239, 68, 68, 0.13);
  color: #fca5a5;
}

.btn-editar-nota:hover,
.btn-excluir-nota:hover {
  transform: translateY(-2px);
}

.empty-notas {
  grid-column: 1 / -1;
  min-height: 240px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-notas span {
  font-size: 46px;
}

.empty-notas p {
  margin-top: 10px;
  color: #a1a1aa;
  font-size: 14px;
}

/* ================= NOTAS MOBILE ================= */

@media (max-width: 1200px) {
  .notas-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  .notas-hero,
  .notas-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .notas-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .notas-hero {
    padding: 22px;
    border-radius: 26px;
  }

  .notas-hero h1 {
    font-size: 31px;
  }

  .notas-hero p {
    font-size: 14px;
  }

  .notas-panel {
    padding: 18px;
    border-radius: 24px;
  }

  .notas-list {
    grid-template-columns: 1fr;
  }

  .nota-card {
    min-height: auto;
  }
}

@media (max-width: 420px) {
  .notas-main {
    padding: 10px;
  }

  .notas-hero {
    padding: 18px;
  }

  .notas-hero h1 {
    font-size: 27px;
  }

  .notas-count-card h2 {
    font-size: 36px;
  }

  .notas-panel,
  .nota-card {
    padding: 16px;
  }

  .notas-form select,
  .notas-form textarea,
  .notas-filtros select {
    font-size: 14px;
    padding: 13px 14px;
  }

  .nota-actions {
    flex-direction: column;
  }
}
/* ================= MODAL PREMIUM ================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;

  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  width: 100%;
  max-width: 420px;
  padding: 30px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transform: scale(0.9);
  transition: 0.3s ease;
}

.modal-overlay.active .modal-box {
  transform: scale(1);
}

.modal-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 14px;
}

.modal-box h3 {
  font-size: 22px;
  font-weight: 900;
}

.modal-box p {
  margin-top: 10px;
  color: #a1a1aa;
  font-size: 14px;
}

.modal-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
}

.modal-actions button {
  flex: 1;
}
/* =====================================================
   FAVORITOS PREMIUM
===================================================== */

.favoritos-body {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%),
    #07070b;
}

.favoritos-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.favoritos-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  padding: 24px;
}

/* ================= HERO ================= */

.favoritos-hero {
  margin-top: 24px;
  padding: 34px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(15, 15, 22, 0.92)),
    radial-gradient(circle at right, rgba(168, 85, 247, 0.28), transparent 45%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 22px;
  align-items: center;
}

.favoritos-tag {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 14px;
}

.favoritos-hero h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
}

.favoritos-hero p {
  margin-top: 12px;
  color: #d1d5db;
}

.favoritos-count-card {
  padding: 24px;
  border-radius: 28px;
  background: rgba(8, 8, 13, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.favoritos-count-card h2 {
  font-size: 46px;
  font-weight: 950;
}

.favoritos-count-card span {
  margin-top: 10px;
  display: inline-block;
  color: #c4b5fd;
}

/* ================= FILTROS ================= */

.favoritos-tools {
  margin-top: 24px;
}

.favoritos-panel {
  padding: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.favoritos-filtros {
  display: grid;
  gap: 16px;
}

/* ================= LISTA ================= */

.favoritos-list-section {
  margin-top: 24px;
}

.favoritos-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.favorito-card {
  padding: 22px;
  border-radius: 26px;
  background: rgba(15, 15, 22, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: 0.25s;
}

.favorito-card:hover {
  transform: translateY(-5px);
  border-color: rgba(167, 139, 250, 0.35);
}

/* glow */
.favorito-card::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 100px;
  height: 100px;
  background: rgba(139, 92, 246, 0.14);
  border-radius: 50%;
}

/* topo */
.favorito-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.favorito-top h3 {
  font-size: 18px;
  font-weight: 900;
}

.favorito-star {
  color: #facc15;
  font-size: 20px;
}

/* tipo */
.favorito-tipo {
  margin-top: 10px;
  font-size: 12px;
  background: rgba(139, 92, 246, 0.14);
  padding: 6px 10px;
  border-radius: 999px;
  width: fit-content;
  color: #c4b5fd;
}

/* conteúdo */
.favorito-card p {
  margin-top: 12px;
  font-size: 14px;
  color: #d1d5db;
  flex: 1;
}

/* ações */
.favorito-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

.favorito-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
}

.btn-abrir {
  background: rgba(139, 92, 246, 0.18);
  color: #ddd6fe;
}

.btn-remover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* vazio */
.empty-favoritos {
  grid-column: 1 / -1;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 26px;
}

.empty-favoritos span {
  font-size: 40px;
}

/* ================= MOBILE ================= */

@media (max-width: 1100px) {
  .favoritos-hero {
    grid-template-columns: 1fr;
  }

  .favoritos-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .favoritos-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .favoritos-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .favoritos-main {
    padding: 10px;
  }

  .favoritos-hero {
    padding: 20px;
  }

  .favoritos-hero h1 {
    font-size: 26px;
  }
}
/* =====================================================
   AUTH / LOGIN PREMIUM
===================================================== */

.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.25), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.2), transparent 30%),
    #07070b;
}

/* ================= LAYOUT ================= */

.auth-container {
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}

/* ================= LADO ESQUERDO ================= */

.auth-brand {
  padding: 50px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(15, 15, 22, 0.95)),
    radial-gradient(circle at right, rgba(168, 85, 247, 0.25), transparent 40%);
  border-right: 1px solid rgba(255,255,255,0.05);
}

.auth-tag {
  background: rgba(250,204,21,0.15);
  color: #fde68a;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.auth-brand h1 {
  margin-top: 20px;
  font-size: 48px;
  font-weight: 950;
}

.auth-brand h1 span {
  color: #a78bfa;
}

.auth-brand p {
  margin-top: 16px;
  color: #d1d5db;
  line-height: 1.6;
}

.auth-benefits {
  margin-top: 30px;
  display: grid;
  gap: 16px;
}

.auth-benefits div {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
}

/* ================= CARD LOGIN ================= */

.auth-card {
  padding: 40px;
  background: rgba(15,15,22,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card-header h2 {
  font-size: 28px;
  font-weight: 900;
}

.auth-card-header p {
  margin-top: 6px;
  color: #9ca3af;
}

/* ================= TABS ================= */

.auth-tabs {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: #c7c7d1;
  font-weight: 800;
}

.auth-tab.active {
  background: linear-gradient(135deg,#8b5cf6,#4c1d95);
  color: #fff;
}

/* ================= FORM ================= */

.auth-form {
  display: none;
  margin-top: 20px;
  gap: 16px;
  flex-direction: column;
}

.auth-form.active {
  display: flex;
}

.password-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.password-field input {
  flex: 1;
}

.toggle-password {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: rgba(139,92,246,0.2);
}

/* ================= BOTÃO ================= */

.auth-submit {
  margin-top: 10px;
  width: 100%;
}

/* ================= MENSAGEM ================= */

.auth-message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  opacity: 0;
  transition: 0.3s;
}

.auth-message.active {
  opacity: 1;
}

.auth-message.erro {
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
}

.auth-message.sucesso {
  background: rgba(34,197,94,0.2);
  color: #86efac;
}

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

.auth-footer {
  margin-top: 20px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

/* ================= RESPONSIVO ================= */

@media (max-width: 900px) {
  .auth-container {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    display: none;
  }

  .auth-card {
    border-radius: 20px;
    padding: 24px;
  }
}

@media (max-width: 420px) {
  .auth-card {
    padding: 18px;
  }

  .auth-card-header h2 {
    font-size: 22px;
  }
}
/* ================= AUTH ROLETTA / INFO ================= */

.auth-roleta-box {
  margin-top: 28px;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 25px 70px rgba(0,0,0,0.35);
}

.auth-roleta-box img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  opacity: 0.9;
}

.auth-info-box {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.18);
}

.auth-info-box strong {
  color: #fde68a;
  font-size: 14px;
}

.auth-info-box p {
  margin-top: 6px;
  color: #d1d5db;
  font-size: 13px;
  line-height: 1.5;
}
/* =====================================================
   MODAL CÓDIGO PREMIUM
===================================================== */

.codigo-modal-box {
  width: 100%;
  max-width: 460px;
  padding: 34px;
  border-radius: 32px;

  background:
    linear-gradient(145deg,
      rgba(18,18,28,0.96),
      rgba(10,10,18,0.98));

  border: 1px solid rgba(255,255,255,0.08);

  text-align: center;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.55),
    0 0 80px rgba(139,92,246,0.15);

  transform: scale(0.9);
  transition: 0.35s ease;
}

.modal-overlay.active .codigo-modal-box {
  transform: scale(1);
}

.codigo-icon {
  width: 90px;
  height: 90px;
  margin: auto;

  border-radius: 28px;

  background:
    linear-gradient(135deg,#8b5cf6,#4c1d95);

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

  font-size: 42px;

  box-shadow:
    0 20px 50px rgba(124,58,237,0.45);
}

.codigo-tag {
  margin-top: 22px;
  display: inline-flex;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(250,204,21,0.12);

  color: #fde68a;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.codigo-modal-box h2 {
  margin-top: 18px;

  font-size: 30px;
  font-weight: 950;

  line-height: 1.1;
}

.codigo-modal-box p {
  margin-top: 12px;

  color: #a1a1aa;

  line-height: 1.6;
}

.codigo-box {
  margin-top: 24px;

  padding: 18px;

  border-radius: 22px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.codigo-box span {
  font-size: 28px;
  font-weight: 950;

  letter-spacing: 2px;

  color: #c4b5fd;
}

.codigo-box button {
  min-width: 54px;
  height: 54px;

  border-radius: 16px;

  background:
    rgba(139,92,246,0.18);

  color: #fff;

  font-size: 22px;

  transition: 0.25s;
}

.codigo-box button:hover {
  transform: scale(1.05);
}

.codigo-modal-box small {
  display: block;

  margin-top: 16px;

  color: #6b7280;

  line-height: 1.5;
}

.codigo-btn {
  margin-top: 24px;
  width: 100%;
}

/* ================= MOBILE ================= */

@media (max-width: 520px) {
  .codigo-modal-box {
    padding: 24px;
    border-radius: 26px;
  }

  .codigo-modal-box h2 {
    font-size: 24px;
  }

  .codigo-box {
    flex-direction: column;
  }

  .codigo-box span {
    font-size: 24px;
  }

  .codigo-box button {
    width: 100%;
  }
}
/* =====================================================
   ADMIN PREMIUM
===================================================== */

.admin-premium-body {
  background:
    radial-gradient(circle at top left, rgba(139,92,246,0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(124,58,237,0.14), transparent 30%),
    #07070b;

  min-height: 100vh;
  overflow-x: hidden;
}

.admin-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* ================= SIDEBAR ================= */

.admin-sidebar {
  width: 280px;
  min-width: 280px;
  height: 100vh;

  position: fixed;
  left: 0;
  top: 0;

  background:
    linear-gradient(180deg,
      rgba(15,15,22,0.98),
      rgba(8,8,14,0.98));

  border-right: 1px solid rgba(255,255,255,0.06);

  padding: 24px;

  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.admin-logo {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.admin-logo span {
  color: #a78bfa;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
}

.admin-logo h2 {
  font-size: 38px;
  font-weight: 950;
}

.admin-logo strong {
  color: #facc15;
  font-size: 13px;
}

.admin-logo p {
  margin-top: 8px;
  color: #6b7280;
  font-size: 13px;
}

/* ================= MENU ================= */

.admin-menu {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-menu-btn {
  width: 100%;
  padding: 15px 16px;

  border-radius: 18px;

  background: transparent;

  color: #c7c7d1;

  display: flex;
  align-items: center;
  gap: 12px;

  font-weight: 800;

  transition: 0.25s;
}

.admin-menu-btn span {
  font-size: 18px;
}

.admin-menu-btn:hover {
  background: rgba(139,92,246,0.12);
  color: #fff;
}

.admin-menu-btn.active {
  background:
    linear-gradient(135deg,#8b5cf6,#4c1d95);

  color: #fff;

  box-shadow:
    0 12px 35px rgba(124,58,237,0.35);
}

.admin-menu-btn.sair {
  margin-top: 10px;
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
}

/* ================= ALERTA ================= */

.admin-side-alert {
  margin-top: auto;

  padding: 18px;

  border-radius: 22px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);
}

.admin-side-alert strong {
  color: #fff;
}

.admin-side-alert p {
  margin-top: 8px;
  color: #9ca3af;
  font-size: 13px;
}

/* ================= MAIN ================= */

.admin-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  padding: 24px;
}

/* ================= TOPO ================= */

.admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 26px;

  border-radius: 30px;

  background:
    linear-gradient(135deg,
      rgba(124,58,237,0.22),
      rgba(15,15,22,0.92));

  border: 1px solid rgba(255,255,255,0.08);
}

.admin-top small {
  color: #a78bfa;
  font-weight: 900;
  letter-spacing: 1px;
}

.admin-top h1 {
  margin-top: 8px;
  font-size: 38px;
  font-weight: 950;
}

.admin-top h1 span {
  color: #a78bfa;
}

.admin-top p {
  margin-top: 8px;
  color: #9ca3af;
}

.admin-top-actions {
  display: flex;
  gap: 12px;
}

.admin-top-actions button {
  padding: 14px 18px;

  border-radius: 16px;

  background:
    rgba(255,255,255,0.06);

  color: #fff;

  font-weight: 800;

  transition: 0.25s;
}

.admin-top-actions button:hover {
  transform: translateY(-2px);
  background: rgba(139,92,246,0.16);
}

/* ================= ABAS ================= */

.admin-aba {
  display: none;
  margin-top: 24px;
}

.admin-aba.active {
  display: block;
}

/* ================= STATS ================= */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.admin-stat-card {
  padding: 24px;

  border-radius: 28px;

  background:
    rgba(15,15,22,0.78);

  border:
    1px solid rgba(255,255,255,0.08);

  position: relative;
  overflow: hidden;
}

.admin-stat-card::after {
  content: "";

  position: absolute;

  right: -30px;
  bottom: -30px;

  width: 100px;
  height: 100px;

  border-radius: 50%;

  background:
    rgba(139,92,246,0.12);
}

.admin-stat-card span {
  font-size: 28px;
}

.admin-stat-card small {
  display: block;
  margin-top: 12px;
  color: #9ca3af;
}

.admin-stat-card strong {
  display: block;
  margin-top: 8px;

  font-size: 36px;
  font-weight: 950;
}

.admin-stat-card.danger {
  border-color: rgba(239,68,68,0.2);
}

/* ================= GRID ================= */

.admin-grid {
  margin-top: 20px;

  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}

/* ================= CARD ================= */

.admin-card {
  margin-top: 20px;

  padding: 24px;

  border-radius: 30px;

  background:
    rgba(15,15,22,0.78);

  border:
    1px solid rgba(255,255,255,0.08);
}

.admin-card h3 {
  font-size: 24px;
  font-weight: 900;
}

.admin-card p {
  margin-top: 8px;
  color: #9ca3af;
}

.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.admin-card-head input {
  max-width: 320px;
}

/* ================= FILTROS ================= */

.admin-filter-row {
  display: flex;
  gap: 12px;
}

.admin-filter-row select {
  min-width: 180px;
}

/* ================= LISTAS ================= */

.admin-list,
.admin-users-list,
.admin-history-list {
  margin-top: 20px;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-list-item,
.admin-history-item,
.admin-user-card {
  padding: 18px;

  border-radius: 22px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);
}

/* ================= USER CARD ================= */

.admin-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.admin-user-main {
  display: flex;
  gap: 16px;
}

.admin-avatar {
  min-width: 58px;
  width: 58px;
  height: 58px;

  border-radius: 18px;

  background:
    linear-gradient(135deg,#8b5cf6,#4c1d95);

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

  font-weight: 900;
  font-size: 24px;
}

.admin-user-main strong {
  display: block;
  font-size: 18px;
}

.admin-user-main p {
  margin-top: 4px;
}

.admin-user-main small {
  display: block;
  margin-top: 6px;
  color: #6b7280;
}

.admin-user-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* ================= STATUS ================= */

.status-pill {
  padding: 8px 12px;
  border-radius: 999px;

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

.status-ativo {
  background: rgba(34,197,94,0.14);
  color: #86efac;
}

.status-pendente {
  background: rgba(250,204,21,0.14);
  color: #fde68a;
}

.status-suspenso {
  background: rgba(239,68,68,0.14);
  color: #fca5a5;
}

/* ================= AÇÕES ================= */

.admin-user-actions {
  display: flex;
  gap: 10px;
}

.admin-user-actions button {
  padding: 10px 14px;

  border-radius: 12px;

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

.btn-admin-ok {
  background: rgba(34,197,94,0.16);
  color: #86efac;
}

.btn-admin-warn {
  background: rgba(250,204,21,0.16);
  color: #fde68a;
}

.btn-admin-danger {
  background: rgba(239,68,68,0.16);
  color: #fca5a5;
}

/* ================= APROVAÇÃO ================= */

.admin-approve-box {
  margin-top: 20px;

  display: flex;
  gap: 12px;
}

.admin-approve-box input {
  flex: 1;
}

.admin-approve-box button {
  min-width: 160px;
}

/* ================= PLANOS ================= */

.admin-plan-info {
  margin-top: 20px;

  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.admin-plan-info div {
  padding: 18px;

  border-radius: 20px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);
}

.admin-plan-info strong {
  display: block;
  font-size: 18px;
}

.admin-plan-info small {
  margin-top: 8px;
  display: block;
  color: #9ca3af;
}

/* ================= SEGURANÇA ================= */

.admin-security-options {
  margin-top: 20px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-security-options label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ================= EMPTY ================= */

.admin-empty {
  min-height: 180px;

  border-radius: 24px;

  border:
    1px dashed rgba(255,255,255,0.14);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.admin-empty span {
  font-size: 36px;
}

.admin-empty p {
  margin-top: 12px;
}

/* ================= MOBILE ================= */

.admin-mobile-toggle {
  display: none;

  position: fixed;
  top: 18px;
  left: 18px;

  width: 52px;
  height: 52px;

  border-radius: 16px;

  background:
    linear-gradient(135deg,#8b5cf6,#4c1d95);

  z-index: 1200;

  font-size: 22px;
}

.admin-overlay {
  position: fixed;
  inset: 0;

  background:
    rgba(0,0,0,0.65);

  backdrop-filter: blur(4px);

  opacity: 0;
  pointer-events: none;

  transition: 0.25s;

  z-index: 999;
}

.admin-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ================= RESPONSIVO ================= */

@media (max-width: 1200px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2,1fr);
  }

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

  .admin-plan-info {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 950px) {

  .admin-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .admin-sidebar {
    transform: translateX(-100%);
    transition: 0.3s;
  }

  .admin-sidebar.active {
    transform: translateX(0);
  }

  .admin-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .admin-top {
    padding-top: 80px;
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-stats-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-user-side {
    width: 100%;
    align-items: flex-start;
  }

  .admin-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-filter-row {
    width: 100%;
    flex-direction: column;
  }

  .admin-card-head input {
    max-width: 100%;
    width: 100%;
  }

  .admin-approve-box {
    flex-direction: column;
  }

  .admin-top-actions {
    width: 100%;
    flex-direction: column;
  }
}

@media (max-width: 500px) {

  .admin-main {
    padding: 10px;
  }

  .admin-top h1 {
    font-size: 28px;
  }

  .admin-card {
    padding: 18px;
    border-radius: 24px;
  }

  .admin-user-actions {
    width: 100%;
    flex-direction: column;
  }

  .admin-user-actions button {
    width: 100%;
  }
}
/* =====================================================
   ESTUDO PREMIUM
===================================================== */

.estudo-body {
  background:
    radial-gradient(circle at top left, rgba(139,92,246,0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(124,58,237,0.14), transparent 30%),
    #07070b;

  min-height: 100vh;
  overflow-x: hidden;
}

.estudo-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

.estudo-main {
  margin-left: 280px;
  width: calc(100% - 280px);
  min-height: 100vh;
  padding: 24px;

  overflow: visible !important;
}

/* HERO */

.estudo-premium-hero {
  margin-top: 24px;

  padding: 34px;

  border-radius: 32px;

  background:
    linear-gradient(135deg,
      rgba(124,58,237,0.3),
      rgba(15,15,22,0.92));

  border: 1px solid rgba(255,255,255,0.08);

  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 22px;
  align-items: center;
}

.estudo-tag {
  display: inline-flex;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(250,204,21,0.12);

  color: #fde68a;

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

.estudo-premium-hero h1 {
  margin-top: 18px;

  font-size: clamp(34px,4vw,58px);

  font-weight: 950;

  line-height: 1.02;
}

.estudo-premium-hero p {
  margin-top: 14px;

  color: #d1d5db;

  line-height: 1.6;
}

.estudo-hero-actions {
  margin-top: 24px;

  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* PROGRESSO */

.estudo-progress-card {
  padding: 24px;

  border-radius: 28px;

  background: rgba(8,8,13,0.65);

  border: 1px solid rgba(255,255,255,0.08);
}

.estudo-progress-card h2 {
  margin-top: 8px;

  font-size: 48px;
  font-weight: 950;
}

.estudo-progress-card span {
  margin-top: 14px;
  display: inline-block;

  color: #c4b5fd;
}

/* FILTROS */

.estudo-filtros {
  margin-top: 24px;

  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
}

.estudo-filtros input,
.estudo-filtros select {
  width: 100%;

  padding: 15px 16px;

  border-radius: 18px;

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.08);

  color: #fff;

  outline: none;
}

.estudo-filtros select option {
  background: #11111a;
}

/* ATALHOS */

.estudo-atalhos {
  margin-top: 20px;

  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.atalho-estudo {
  padding: 12px 18px;

  border-radius: 16px;

  background: rgba(255,255,255,0.06);

  color: #fff;

  font-weight: 800;

  transition: 0.25s;
}

.atalho-estudo:hover {
  background: rgba(139,92,246,0.18);
}

/* TITULO */

.estudo-section-title {
  margin-top: 34px;
}

.estudo-section-title span {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 900;
}

.estudo-section-title h2 {
  margin-top: 8px;

  font-size: 34px;
  font-weight: 950;
}

.estudo-section-title p {
  margin-top: 8px;
  color: #9ca3af;
}

/* GRID MODULOS */

.estudo-modulos-grid {
  margin-top: 24px;

  display: grid !important;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  overflow: visible !important;

  height: auto !important;

  max-height: none !important;
}

.estudo-modulo-card {
  position: relative;

  padding: 24px;

  border-radius: 30px;

  background:
    linear-gradient(145deg,
      rgba(15,15,22,0.92),
      rgba(10,10,18,0.95));

  border: 1px solid rgba(255,255,255,0.08);

  min-height: 290px;

  display: flex !important;
  flex-direction: column;

  transition: 0.25s;

  overflow: hidden;
}

.estudo-modulo-card:hover {
  transform: translateY(-6px);

  border-color: rgba(167,139,250,0.35);
}

.estudo-modulo-card::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  right: -40px;
  bottom: -40px;

  border-radius: 50%;

  background: rgba(139,92,246,0.14);
}

.modulo-icon {
  width: 64px;
  height: 64px;

  border-radius: 22px;

  background:
    linear-gradient(135deg,#8b5cf6,#4c1d95);

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

  font-size: 28px;

  box-shadow:
    0 18px 45px rgba(124,58,237,0.35);
}

.estudo-modulo-card span {
  margin-top: 16px;

  color: #c4b5fd;

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

.estudo-modulo-card h3 {
  margin-top: 14px;

  font-size: 30px;
  font-weight: 950;
}

.estudo-modulo-card p {
  margin-top: 12px;

  color: #d1d5db;

  line-height: 1.6;

  flex: 1;
}

/* FAVORITO */

.btn-favorito-modulo {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 42px;
  height: 42px;

  border-radius: 14px;

  background: rgba(255,255,255,0.06);

  color: #facc15;

  font-size: 18px;
}

.btn-favorito-modulo.favoritado {
  background: rgba(250,204,21,0.14);
}

/* PROVAS */

.estudo-provas-section {
  margin-top: 40px;
  padding-bottom: 40px;
}

.estudo-provas-grid {
  margin-top: 20px;

  display: grid;
  grid-template-columns: repeat(2,1fr);

  gap: 20px;
}

.estudo-prova-card {
  padding: 28px;

  border-radius: 28px;

  background: rgba(15,15,22,0.85);

  border: 1px solid rgba(255,255,255,0.08);
}

.estudo-prova-card span {
  font-size: 38px;
}

.estudo-prova-card h3 {
  margin-top: 16px;

  font-size: 28px;
  font-weight: 950;
}

.estudo-prova-card p {
  margin-top: 10px;

  color: #a1a1aa;
}

.estudo-prova-card button {
  margin-top: 22px;
  width: 100%;
}

.estudo-prova-card.premium {
  border-color: rgba(250,204,21,0.18);
}

/* MOBILE */

@media (max-width: 1200px) {
  .estudo-modulos-grid {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 820px) {

  .estudo-main {
    margin-left: 0;
    width: 100%;
    padding: 14px;
  }

  .estudo-premium-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .estudo-filtros {
    grid-template-columns: 1fr;
  }

  .estudo-modulos-grid {
    grid-template-columns: 1fr;
  }

  .estudo-provas-grid {
    grid-template-columns: 1fr;
  }

  .estudo-premium-hero h1 {
    font-size: 32px;
  }

  .estudo-modulo-card h3 {
    font-size: 24px;
  }

  .estudo-modulo-card {
    min-height: auto;
  }
}

@media (max-width: 420px) {

  .estudo-main {
    padding: 10px;
  }

  .estudo-premium-hero {
    padding: 18px;
  }

  .estudo-premium-hero h1 {
    font-size: 27px;
  }

  .estudo-modulo-card {
    padding: 18px;
  }

  .modulo-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}/* MODAL MÓDULO EM CONSTRUÇÃO */

.modulo-construcao-box {
  width: 100%;
  max-width: 440px;
  padding: 34px;
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(18,18,28,0.98), rgba(8,8,14,0.98));
  border: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.65),
    0 0 80px rgba(139,92,246,0.18);
  transform: scale(0.9);
  transition: 0.3s ease;
}

.modal-overlay.active .modulo-construcao-box {
  transform: scale(1);
}

.modulo-construcao-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, #8b5cf6, #4c1d95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 20px 55px rgba(124,58,237,0.45);
}

.modulo-construcao-tag {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250,204,21,0.12);
  color: #fde68a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.modulo-construcao-box h3 {
  margin-top: 18px;
  font-size: 26px;
  font-weight: 950;
}

.modulo-construcao-box p {
  margin-top: 12px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

.modulo-construcao-box button {
  margin-top: 24px;
  width: 100%;
}
/* AJUSTE TAMANHO CARDS ESTUDO */

.estudo-modulos-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.estudo-modulo-card {
  min-height: 230px;
  padding: 18px;
  border-radius: 24px;
}

.modulo-icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
  border-radius: 18px;
}

.estudo-modulo-card h3 {
  font-size: 22px;
}

.estudo-modulo-card p {
  font-size: 13px;
  line-height: 1.45;
}

.btn-abrir-modulo {
  padding: 12px 14px;
  font-size: 13px;
}

.btn-favorito-modulo {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

@media (max-width: 1200px) {
  .estudo-modulos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .estudo-modulos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .estudo-modulo-card {
    min-height: 220px;
  }
}

@media (max-width: 520px) {
  .estudo-modulos-grid {
    grid-template-columns: 1fr;
  }

  .estudo-modulo-card {
    min-height: auto;
    padding: 16px;
  }

  .estudo-modulo-card h3 {
    font-size: 20px;
  }
}/* AJUSTE TAMANHO CARDS ESTUDO */

.estudo-modulos-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.estudo-modulo-card {
  min-height: 230px;
  padding: 18px;
  border-radius: 24px;
}

.modulo-icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
  border-radius: 18px;
}

.estudo-modulo-card h3 {
  font-size: 22px;
}

.estudo-modulo-card p {
  font-size: 13px;
  line-height: 1.45;
}

.btn-abrir-modulo {
  padding: 12px 14px;
  font-size: 13px;
}

.btn-favorito-modulo {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

@media (max-width: 1200px) {
  .estudo-modulos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .estudo-modulos-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .estudo-modulo-card {
    min-height: 220px;
  }
}

@media (max-width: 520px) {
  .estudo-modulos-grid {
    grid-template-columns: 1fr;
  }

  .estudo-modulo-card {
    min-height: auto;
    padding: 16px;
  }

  .estudo-modulo-card h3 {
    font-size: 20px;
  }
}
/* POPUP MÓDULO EM CONSTRUÇÃO */

.modulo-construcao-box {
  width: 100%;
  max-width: 440px;
  padding: 34px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top, rgba(139, 92, 246, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(18, 18, 28, 0.98), rgba(8, 8, 14, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.65),
    0 0 80px rgba(139, 92, 246, 0.2);
  transform: scale(0.9) translateY(15px);
  transition: 0.3s ease;
}

.modal-overlay.active .modulo-construcao-box {
  transform: scale(1) translateY(0);
}

.modulo-construcao-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, #8b5cf6, #4c1d95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 20px 55px rgba(124, 58, 237, 0.45);
}

.modulo-construcao-tag {
  display: inline-flex;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
}

.modulo-construcao-box h3 {
  margin-top: 18px;
  font-size: 26px;
  font-weight: 950;
}

.modulo-construcao-box p {
  margin-top: 12px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

.modulo-construcao-box button {
  margin-top: 24px;
  width: 100%;
}
/* =====================================================
   MODULE ZERO PREMIUM
===================================================== */

.zero-page-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 30%),
    #07070b;
  color: #fff;
}

.zero-pro {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
}

.zero-panel,
.zero-casino-area {
  border-radius: 32px;
  background: rgba(15, 15, 22, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.zero-panel {
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 24px;
}

.zero-tag {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.zero-panel h2 {
  font-size: 32px;
  font-weight: 950;
}

.zero-panel p {
  margin-top: 10px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

.btn-zero,
.btn-zero-outline {
  width: 100%;
  margin-top: 18px;
  padding: 15px;
  border-radius: 18px;
  font-weight: 950;
  transition: 0.25s ease;
}

.btn-zero {
  background: linear-gradient(135deg, #8b5cf6, #4c1d95);
  color: #fff;
  box-shadow: 0 18px 45px rgba(124, 58, 237, 0.35);
}

.btn-zero:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-zero-outline {
  background: rgba(255, 255, 255, 0.06);
  color: #ddd6fe;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.zero-card {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.zero-card.destaque {
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.16), rgba(255, 255, 255, 0.045));
}

.zero-card span {
  display: block;
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

.zero-card strong {
  display: block;
  font-size: 19px;
  font-weight: 950;
}

.zero-card small {
  display: block;
  margin-top: 8px;
  color: #8b8b98;
  line-height: 1.4;
}

.zero-stats-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.zero-stats-grid div {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}

.zero-stats-grid span {
  font-size: 24px;
}

.zero-stats-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  font-weight: 950;
}

.zero-stats-grid small {
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 800;
}

/* ÁREA PRINCIPAL */

.zero-casino-area {
  padding: 24px;
}

.zero-header {
  padding: 30px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.28), rgba(15, 15, 22, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.zero-header span {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}

.zero-header h1 {
  margin-top: 8px;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
  line-height: 1.02;
}

.zero-header p {
  max-width: 760px;
  margin-top: 12px;
  color: #d1d5db;
  line-height: 1.6;
}

/* RACE */

.zero-race-wrapper {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  align-items: stretch;
}

.race-zero-area {
  position: relative;
  padding: 18px;
  border-radius: 30px;
  background: rgba(8, 8, 13, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zero-race-img {
  width: 100%;
  max-width: 680px;
  display: block;
  border-radius: 22px;
  opacity: 0.95;
}

.zero-race-marker {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.2);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, #facc15, #f97316);
  border: 3px solid rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111827;
  font-weight: 950;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 8px rgba(250, 204, 21, 0.18),
    0 0 35px rgba(250, 204, 21, 0.65);
  transition: 0.35s ease;
  z-index: 5;
}

.zero-race-marker.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* PERGUNTA */

.zero-question-card {
  padding: 26px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(139, 92, 246, 0.13), rgba(15, 15, 22, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: none;
}

.zero-question-card.active {
  display: block;
}

.zero-question-tag {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  color: #fde68a;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 1px;
}

.zero-question-card h2 {
  margin-top: 18px;
  font-size: 30px;
  font-weight: 950;
  line-height: 1.15;
}

.zero-question-card p {
  margin-top: 10px;
  color: #a1a1aa;
  line-height: 1.5;
}

.zero-answer-actions {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.zero-answer-actions button {
  padding: 15px;
  border-radius: 18px;
  font-weight: 950;
  transition: 0.25s ease;
}

#btnSimZero {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.18);
}

#btnNaoZero {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.18);
}

.zero-answer-actions button:hover,
.btn-zero:hover,
.btn-zero-outline:hover {
  transform: translateY(-3px);
}

/* RESULTADO */

#resultadoZero.quente {
  color: #86efac;
}

#resultadoZero.frio {
  color: #fca5a5;
}

/* HISTÓRICO */

.zero-history-section {
  margin-top: 24px;
}

.zero-history-list {
  display: grid;
  gap: 12px;
}

.zero-history-item {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.zero-history-item.ok {
  border-color: rgba(34, 197, 94, 0.18);
}

.zero-history-item.erro {
  border-color: rgba(239, 68, 68, 0.18);
}

.zero-history-item strong {
  font-size: 15px;
}

.zero-history-item p {
  margin-top: 4px;
  color: #a1a1aa;
  font-size: 13px;
}

.zero-history-item small {
  display: block;
  margin-top: 5px;
  color: #71717a;
  font-size: 12px;
}

.zero-history-item > span {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.14);
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.zero-empty-history {
  min-height: 130px;
  border-radius: 24px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
}

/* MOBILE */

@media (max-width: 1100px) {
  .zero-pro {
    grid-template-columns: 1fr;
  }

  .zero-panel {
    position: relative;
    top: auto;
  }

  .zero-race-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .zero-pro {
    padding: 12px;
  }

  .zero-panel,
  .zero-casino-area {
    border-radius: 24px;
    padding: 18px;
  }

  .zero-header {
    padding: 22px;
    border-radius: 22px;
  }

  .zero-header h1 {
    font-size: 30px;
  }

  .race-zero-area {
    min-height: 300px;
    padding: 10px;
  }

  .zero-race-marker {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .zero-question-card {
    padding: 20px;
    border-radius: 24px;
  }

  .zero-question-card h2 {
    font-size: 23px;
  }

  .zero-history-item {
    align-items: flex-start;
    flex-direction: column;
  }
}
#marcadorNumeroZero {
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
}

#marcadorNumeroTexto {
  font-size: 14px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  min-height:100vh;
  font-family:Arial, sans-serif;
  background:
    radial-gradient(circle at top, rgba(120,70,255,.20), transparent 30%),
    linear-gradient(135deg,#050509,#0d0d16,#050509);
  color:#fff;
  overflow-x:hidden;
}

.wiu-page{
  width:min(1400px,95%);
  margin:auto;
  padding:25px 0 40px;
}

.wiu-header{
  margin-bottom:25px;
}

.wiu-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(138,92,255,.12);
  border:1px solid rgba(138,92,255,.35);
  color:#d5c6ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
}

.wiu-header h1{
  margin-top:12px;
  font-size:clamp(28px,4vw,48px);
  font-weight:900;
}

.wiu-header p{
  margin-top:10px;
  color:#bdbdd0;
  max-width:700px;
  line-height:1.6;
}

.wiu-layout{
  display:grid;
  grid-template-columns:1.5fr .8fr;
  gap:22px;
  align-items:start;
}

.wiu-race-card,
.wiu-panel,
.wiu-history-card{
  background:rgba(12,12,22,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:0 15px 50px rgba(0,0,0,.45);
}

.wiu-race-card{
  padding:18px;
}

.roleta-container{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:20px;
  background:#08080f;
  border:1px solid rgba(255,255,255,.08);
}

.roleta-container img{
  width:100%;
  display:block;
  user-select:none;
  pointer-events:none;
}

#linhas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}

#marcacoes{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
}

.linha{
  stroke:#ffcc00;
  stroke-width:2;
  stroke-dasharray:6 4;
  filter:drop-shadow(0 0 6px rgba(255,204,0,.7));
}

.marcacao{
  position:absolute;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#fff;
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 0 12px rgba(255,255,255,.35);
}

.marcacao strong{
  font-size:10px;
}

.marcacao small{
  position:absolute;
  top:25px;
  background:rgba(0,0,0,.88);
  padding:2px 5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  font-size:9px;
  color:#fff;
}

.ponto1{
  background:#7c4dff;
}

.ponto2{
  background:#00bcd4;
}

.soma{
  background:#00c853;
}

.subtracao{
  background:#ff3d71;
}

.wiu-panel{
  padding:22px;
}

.wiu-panel-title span{
  color:#b99cff;
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
}

.wiu-panel-title h2{
  margin-top:6px;
  font-size:26px;
}

.wiu-form{
  margin-top:20px;
  display:grid;
  gap:15px;
}

.wiu-form label{
  display:grid;
  gap:7px;
  font-size:13px;
  color:#d2d2e2;
  font-weight:700;
}

.wiu-form input{
  width:100%;
  height:52px;
  border:none;
  outline:none;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:0 15px;
  color:#fff;
  font-size:16px;
  font-weight:800;
}

.wiu-form input:focus{
  border-color:#8d61ff;
  box-shadow:0 0 0 4px rgba(141,97,255,.18);
}

#btnCalcularWiu{
  height:52px;
  border:none;
  border-radius:16px;
  cursor:pointer;
  font-size:15px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg,#7c4dff,#ff2fb3);
  box-shadow:0 12px 30px rgba(124,77,255,.35);
  transition:.2s;
}

#btnCalcularWiu:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}

.wiu-results{
  margin-top:22px;
  display:grid;
  gap:12px;
}

.wiu-result-box{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.wiu-result-box span{
  display:block;
  margin-bottom:6px;
  font-size:12px;
  color:#a6a6b8;
  font-weight:800;
}

.wiu-result-box strong{
  font-size:26px;
}

.wiu-ia-box{
  margin-top:20px;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(135deg,
    rgba(124,77,255,.18),
    rgba(255,47,179,.12)
  );
  border:1px solid rgba(189,153,255,.16);
}

.wiu-ia-box span{
  display:block;
  margin-bottom:8px;
  color:#dccfff;
  font-weight:900;
}

.wiu-ia-box p{
  color:#ededf4;
  line-height:1.6;
  font-size:14px;
}

.wiu-history-card{
  margin-top:22px;
  padding:20px;
}

.wiu-history-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.wiu-history-header h2{
  font-size:24px;
}

#btnLimparHistoricoWiu{
  border:none;
  cursor:pointer;
  padding:10px 14px;
  border-radius:12px;
  color:#fff;
  font-weight:800;
  background:rgba(255,61,113,.16);
  border:1px solid rgba(255,61,113,.22);
  transition:.2s;
}

#btnLimparHistoricoWiu:hover{
  background:rgba(255,61,113,.28);
}

.wiu-history-list{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.wiu-history-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.wiu-history-number{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(124,77,255,.18);
  color:#d7cbff;
  font-weight:900;
  flex-shrink:0;
}

.wiu-history-item strong{
  display:block;
  margin-bottom:5px;
}

.wiu-history-item p{
  color:#c7c7d6;
  font-size:14px;
  line-height:1.5;
}

.wiu-history-item small{
  display:block;
  margin-top:5px;
  color:#8d8da1;
}

.wiu-empty{
  color:#9999ab;
  padding:10px 0;
}

@media(max-width:980px){

  .wiu-layout{
    grid-template-columns:1fr;
  }

  .wiu-panel{
    order:-1;
  }
}

@media(max-width:600px){

  .wiu-page{
    width:94%;
  }

  .wiu-race-card,
  .wiu-panel,
  .wiu-history-card{
    border-radius:18px;
  }

  .wiu-race-card{
    padding:10px;
  }

  .roleta-container{
    border-radius:14px;
  }

  .marcacao{
    width:18px;
    height:18px;
    font-size:8px;
  }

  .marcacao small{
    top:19px;
    font-size:7px;
  }

  .linha{
    stroke-width:1.3;
  }

  .wiu-panel{
    padding:16px;
  }

  .wiu-result-box strong{
    font-size:22px;
  }

  .wiu-history-header{
    flex-direction:column;
    align-items:flex-start;
  }
}
.wiu-topbar{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}

.btn-voltar,
.btn-dashboard{
  height:44px;
  padding:0 18px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  color:#fff;
  transition:.2s;
}

.btn-voltar{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.btn-dashboard{
  background:linear-gradient(135deg,#7c4dff,#ff2fb3);
  box-shadow:0 10px 24px rgba(124,77,255,.25);
}

.btn-voltar:hover,
.btn-dashboard:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(132, 75, 255, 0.30), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255, 42, 179, 0.16), transparent 34%),
    linear-gradient(135deg, #05050b, #0b0b14 55%, #05050b);
  color: #fff;
  overflow-x: hidden;
}

.espelhos-page {
  width: min(1420px, 94%);
  margin: 0 auto;
  padding: 28px 0 60px;
}

/* TOPO */

.topbar-espelhos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.topbar-espelhos button {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(185, 145, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: 0.22s;
}

.topbar-espelhos button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7c4dff, #ff2fb3);
  box-shadow: 0 12px 30px rgba(124, 77, 255, 0.28);
}

/* TÍTULO */

.espelhos-title {
  margin-bottom: 26px;
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(255, 47, 179, 0.08)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(188, 148, 255, 0.14);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
}

.espelhos-title h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
  letter-spacing: -1px;
}

.espelhos-title p {
  margin-top: 10px;
  color: #c5c2d8;
  font-size: 15px;
  line-height: 1.6;
}

/* CARD GERAL */

.espelhos-card {
  padding: 22px;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(10, 10, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* RACE */

.race-box {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 22px;
  background:
    radial-gradient(circle at center, rgba(124, 77, 255, 0.12), transparent 42%),
    radial-gradient(circle at bottom, rgba(255, 47, 179, 0.08), transparent 40%),
    #030307;
  border: 1px solid rgba(188, 148, 255, 0.14);
  box-shadow:
    inset 0 0 55px rgba(124, 77, 255, 0.08),
    0 18px 45px rgba(0, 0, 0, 0.45);
}

.race-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: raceLight 5s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
}

@keyframes raceLight {
  0%, 55% {
    transform: translateX(-110%);
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(110%);
    opacity: 0;
  }
}

.race-img {
  display: block;
  width: 100%;
  border-radius: 22px;
  user-select: none;
  pointer-events: none;
  filter: contrast(1.08) brightness(0.93) saturate(1.08);
}

#raceMarkers {
  position: absolute;
  inset: 22px;
  z-index: 5;
  pointer-events: none;
}

/* MARCAÇÕES ROXAS */

.race-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #ffffff, #b388ff 24%, #7c4dff 58%, #4a168f 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 5px rgba(124, 77, 255, 0.20),
    0 0 18px rgba(179, 136, 255, 0.95),
    0 0 42px rgba(124, 77, 255, 0.70);
  font-size: 11px;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.race-marker::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(179, 136, 255, 0.48);
  box-shadow: 0 0 22px rgba(124, 77, 255, 0.42);
  animation: purpleWave 1.5s infinite ease-in-out;
}

.race-marker::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 8px;
  height: 8px;
  background: #7c4dff;
  transform: rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 14px rgba(124,77,255,.75);
}

.race-marker span {
  position: relative;
  z-index: 2;
  line-height: 1;
}

@keyframes purpleWave {
  0%, 100% {
    transform: scale(0.82);
    opacity: 0.35;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.95;
  }
}

.casino-pop {
  animation: markerPop 0.30s ease both;
}

@keyframes markerPop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* SUBTÍTULO */

.espelhos-subtitle {
  margin: 32px 0 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.espelhos-subtitle span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185,145,255,.28), transparent);
}

.espelhos-subtitle h2 {
  font-size: 24px;
  font-weight: 950;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -0.4px;
}

/* GRID DOS ESPELHOS */

.espelhos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.espelho-btn {
  position: relative;
  min-height: 86px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  transition: 0.24s ease;
}

.espelho-btn::before {
  content: "💎";
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 38px;
  opacity: 0.045;
}

.espelho-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.10) 48%, transparent 78%);
  transform: translateX(-120%);
  transition: 0.45s;
}

.espelho-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(179, 136, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(255, 47, 179, 0.08));
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.30);
}

.espelho-btn:hover::after {
  transform: translateX(120%);
}

.espelho-btn.active {
  border-color: rgba(179, 136, 255, 0.95);
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.45), rgba(255, 47, 179, 0.22));
  box-shadow:
    0 0 0 1px rgba(179, 136, 255, 0.22),
    0 0 35px rgba(124, 77, 255, 0.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.espelho-info small {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.16);
  color: #cdb8ff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.espelho-info strong {
  display: block;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.4px;
}

.espelho-qtd {
  min-width: 64px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #f0dcff;
  background: rgba(124, 77, 255, 0.18);
  border: 1px solid rgba(179, 136, 255, 0.35);
  box-shadow: inset 0 0 14px rgba(124, 77, 255, 0.12);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

/* LIMPAR */

.btn-limpar {
  width: 100%;
  margin-top: 20px;
  height: 52px;
  border: none;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 61, 113, 0.20), rgba(124, 77, 255, 0.10));
  border: 1px solid rgba(255, 61, 113, 0.30);
  color: #fff;
  cursor: pointer;
  font-weight: 950;
  transition: 0.22s;
}

.btn-limpar:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(255, 61, 113, 0.32), rgba(124, 77, 255, 0.16));
}

/* INFO SELECIONADO */

.espelho-selecionado-info {
  margin-top: 20px;
  padding: 20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.22), rgba(255, 47, 179, 0.08)),
    rgba(255,255,255,.035);
  border: 1px solid rgba(179, 136, 255, 0.22);
  display: grid;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.espelho-selecionado-info strong {
  color: #fff;
  font-size: 14px;
}

.espelho-selecionado-info span {
  color: #d8c2ff;
  font-size: 22px;
  font-weight: 950;
}

.espelho-selecionado-info small {
  color: #c5c2d8;
  line-height: 1.5;
}

/* RESPONSIVO */

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

  .espelhos-card {
    padding: 14px;
    border-radius: 24px;
  }

  .race-box {
    padding: 12px;
    border-radius: 22px;
  }

  #raceMarkers {
    inset: 12px;
  }

  .race-marker {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
}

@media (max-width: 560px) {
  .espelhos-page {
    width: 94%;
    padding-top: 18px;
  }

  .topbar-espelhos {
    display: grid;
  }

  .topbar-espelhos button {
    width: 100%;
  }

  .espelhos-title,
  .espelhos-card {
    border-radius: 22px;
  }

  .espelho-btn {
    min-height: 76px;
  }

  .espelho-info strong {
    font-size: 16px;
  }

  .espelho-qtd {
    min-width: 56px;
    height: 30px;
    font-size: 10px;
  }

  .espelhos-subtitle h2 {
    font-size: 18px;
  }
}
/* ============================
   ALERTAS + TERMINAIS + IA
============================ */

.aba-conteudo {
  width: 100%;
}

.alerta-page {
  width: min(1500px, 96%);
  margin: 0 auto;
  padding: 28px 0 45px;
  color: #fff;
}

.alerta-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.alerta-tag {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(141, 97, 255, 0.15);
  border: 1px solid rgba(141, 97, 255, 0.35);
  color: #d8caff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.alerta-header h2 {
  margin-top: 12px;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
}

.alerta-header p {
  margin-top: 10px;
  color: #bdbdd0;
  line-height: 1.6;
  max-width: 720px;
}

.btn-limpar-alerta {
  border: none;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 61, 113, 0.16);
  border: 1px solid rgba(255, 61, 113, 0.3);
  transition: 0.2s;
}

.btn-limpar-alerta:hover {
  transform: translateY(-2px);
  background: rgba(255, 61, 113, 0.28);
}

.alerta-layout {
  display: grid;
  grid-template-columns: 340px 1fr 330px;
  gap: 20px;
  align-items: start;
}

.alerta-controles,
.race-alerta-box,
.painel-inteligente,
.card-alerta {
  background: rgba(12, 12, 22, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.42);
}

.alerta-controles {
  display: grid;
  gap: 16px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.card-alerta {
  padding: 18px;
}

.card-title,
.painel-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.card-title > span,
.painel-title > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(141, 97, 255, 0.16);
  border: 1px solid rgba(141, 97, 255, 0.24);
  flex-shrink: 0;
}

.card-title h3,
.painel-title h3 {
  font-size: 20px;
  font-weight: 900;
}

.card-title p,
.painel-title p {
  color: #9d9daf;
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.4;
}

.alerta-botoes {
  display: grid;
  gap: 10px;
}

.alerta-botoes button {
  min-height: 64px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
  transition: 0.2s;
}

.alerta-botoes button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 193, 7, 0.5);
  box-shadow: 0 0 22px rgba(255, 193, 7, 0.12);
}

.alerta-botoes button strong {
  display: block;
  font-size: 22px;
  color: #ffcc4d;
}

.alerta-botoes button span {
  color: #c9c9d6;
  font-size: 13px;
}

.terminais-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.terminais-grid button {
  height: 44px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  background: rgba(141, 97, 255, 0.12);
  border: 1px solid rgba(141, 97, 255, 0.25);
  transition: 0.2s;
}

.terminais-grid button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7c4dff, #ff2fb3);
}

.ia-input-area {
  display: grid;
  gap: 10px;
}

.ia-input-area input {
  width: 100%;
  height: 48px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  padding: 0 14px;
  outline: none;
  font-weight: 800;
}

.ia-input-area input:focus {
  border-color: #8d61ff;
  box-shadow: 0 0 0 4px rgba(141, 97, 255, 0.16);
}

.ia-input-area button {
  height: 48px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #7c4dff, #ff2fb3);
  box-shadow: 0 10px 26px rgba(124, 77, 255, 0.25);
}

.resultado-ia {
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  color: #e9e9f3;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
  font-size: 14px;
}

.race-alerta-box {
  padding: 18px;
}

.race-status-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.race-status-bar div,
.painel-info div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.race-status-bar small,
.painel-info small {
  display: block;
  color: #9d9daf;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}

.race-status-bar strong,
.painel-info strong {
  color: #fff;
  font-size: 16px;
}

.race-area-alerta {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #050509;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.race-img-alerta {
  display: block;
  width: 100%;
  user-select: none;
  pointer-events: none;
}

#marcadoresAlerta {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.marcador-alerta {
  position: absolute;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.95);
  animation: alertaPop 0.35s ease both, alertaPulse 1.5s infinite ease-in-out;
}

.marcador-alerta span {
  line-height: 1;
}

.marcador-alerta.principal {
  background: #ffcc00;
  color: #111;
  box-shadow: 0 0 22px rgba(255, 204, 0, 0.8);
}

.marcador-alerta.alerta {
  background: #ff3d71;
  box-shadow: 0 0 20px rgba(255, 61, 113, 0.75);
}

.marcador-alerta.terminal {
  background: #00c853;
  box-shadow: 0 0 20px rgba(0, 200, 83, 0.75);
}

.marcador-alerta.ia {
  background: #00bcd4;
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.75);
}

@keyframes alertaPop {
  from {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes alertaPulse {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.35);
  }
}

.numeros-marcados-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.numeros-marcados-box h4 {
  margin-bottom: 10px;
  font-size: 16px;
}

.lista-numeros-marcados {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: #aaaabc;
  font-size: 14px;
}

.numero-pill {
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  background: rgba(141, 97, 255, 0.18);
  border: 1px solid rgba(141, 97, 255, 0.28);
}

.painel-inteligente {
  padding: 18px;
}

.painel-info {
  display: grid;
  gap: 12px;
}

.analise-texto {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  color: #e8e8f2;
  line-height: 1.6;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.17), rgba(255, 47, 179, 0.10));
  border: 1px solid rgba(181, 143, 255, 0.18);
  font-size: 14px;
}

.mini-legenda {
  margin-top: 16px;
  display: grid;
  gap: 10px;
  color: #c9c9d6;
  font-size: 13px;
}

.mini-legenda div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legenda {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: inline-block;
}

.legenda.principal {
  background: #ffcc00;
}

.legenda.alerta {
  background: #ff3d71;
}

.legenda.terminal {
  background: #00c853;
}

.legenda.ia {
  background: #00bcd4;
}

.popup-terminal-info {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 290px;
  z-index: 99;
  padding: 16px;
  border-radius: 20px;
  background: rgba(13, 13, 24, 0.96);
  border: 1px solid rgba(141, 97, 255, 0.3);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.45);
}

.popup-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.popup-top button {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.popup-terminal-info p {
  color: #c9c9d6;
  line-height: 1.45;
  font-size: 13px;
  margin-top: 8px;
}

@media (max-width: 1220px) {
  .alerta-layout {
    grid-template-columns: 1fr;
  }

  .painel-inteligente {
    order: 3;
  }
}

@media (max-width: 700px) {
  .alerta-page {
    width: 94%;
    padding-top: 18px;
  }

  .alerta-header {
    flex-direction: column;
  }

  .btn-limpar-alerta {
    width: 100%;
  }

  .race-status-bar {
    grid-template-columns: 1fr;
  }

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

  .marcador-alerta {
    width: 19px;
    height: 19px;
    font-size: 8px;
    border-width: 1px;
  }

  .popup-terminal-info {
    position: static;
    width: 100%;
    margin-top: 18px;
  }
}
/* =========================================
   MÓDULO IMÃ / VIZINHOS
========================================= */

#flowIA,
.aba-conteudo {
  width: 100%;
  min-height: 100vh;
}

.flow-box {
  min-height: 100vh;
  padding: 35px;
  background:
    radial-gradient(circle at top right, rgba(120, 80, 255, 0.18), transparent 35%),
    linear-gradient(135deg, #050509, #0b0b12 55%, #050509);
  color: #fff;
}

.flow-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 18px;
}

.flow-titulo h2 {
  font-size: 36px;
  margin: 0 0 8px;
}

.flow-titulo p {
  color: #aaa;
}

.flow-acoes-topo {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-topo-flow,
.btn-mini-flow,
.btn-analisar-flow {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #171717;
  color: #fff;
  border-radius: 14px;
  padding: 12px 18px;
  cursor: pointer;
  transition: 0.25s;
}

.btn-topo-flow:hover,
.btn-mini-flow:hover,
.btn-analisar-flow:hover {
  background: #292929;
  transform: translateY(-2px);
}

.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 420px;
  gap: 24px;
  align-items: start;
}

.flow-race-card,
.flow-painel {
  background: rgba(14, 14, 20, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 26px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
}

.flow-race-card {
  padding: 22px;
  overflow: hidden;
}

.flow-race-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.flow-race-header h3 {
  margin: 0;
  font-size: 23px;
}

.flow-race-header span {
  color: #888;
  font-size: 14px;
}

.race-area-flow {
  width: 100%;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #050509;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.race-img-flow {
  width: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
  filter: brightness(0.45) contrast(1.08) saturate(0.75);
  opacity: 0.84;
}

.race-area-flow::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 25%, rgba(0, 0, 0, 0.48) 100%),
    rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 1;
}

#marcadoresFlow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.marcador-flow {
  position: absolute;
  width: 27px;
  height: 27px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #d946ef);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 0 0 4px rgba(168, 85, 247, 0.18),
    0 0 22px rgba(168, 85, 247, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: imaPulse 1.3s infinite;
}

.principal-flow {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #ffffff, #d7c7ff);
  color: #111;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.16),
    0 0 28px rgba(255, 255, 255, 0.75);
  z-index: 4;
}

@keyframes imaPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.flow-painel {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.flow-card-input,
.flow-resultado-box,
.flow-info-box,
.flow-grade-box {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  padding: 20px;
}

.flow-card-input h3,
.flow-grade-topo h3 {
  margin: 0 0 10px;
  font-size: 21px;
}

.flow-card-input p {
  color: #999;
  line-height: 1.5;
}

#numeroFlowInput {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(130, 80, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 0 16px;
  font-size: 18px;
  outline: none;
  margin: 14px 0;
}

#numeroFlowInput:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.16);
}

.btn-analisar-flow {
  width: 100%;
  height: 52px;
  font-weight: 800;
  background: linear-gradient(135deg, #252525, #111);
}

.flow-resultado-box span {
  display: block;
  color: #aaa;
  font-size: 13px;
  margin-bottom: 10px;
}

.resultado-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  font-size: 18px;
  font-weight: 800;
  color: #ddd;
}

.resultado-flow strong {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: rgba(130, 80, 255, 0.22);
  border: 1px solid rgba(130, 80, 255, 0.55);
  box-shadow: 0 0 14px rgba(130, 80, 255, 0.35);
}

.flow-info-box h4 {
  margin: 0 0 10px;
}

.flow-info-box p {
  color: #aaa;
  line-height: 1.6;
}

.flow-grade-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.flow-grade-topo span {
  color: #888;
}

.grade-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.grade-flow::-webkit-scrollbar {
  width: 5px;
}

.grade-flow::-webkit-scrollbar-thumb {
  background: #7c3aed;
  border-radius: 20px;
}

.btn-numero-flow {
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.055);
  color: #ddd;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
}

.btn-numero-flow:hover {
  background: rgba(130, 80, 255, 0.25);
  transform: translateY(-2px);
}

.btn-numero-flow.ativo {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
}

.btn-numero-flow.principal {
  background: #fff;
  color: #111;
  border-color: #fff;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.45);
}

@media (max-width: 1100px) {
  .flow-layout {
    grid-template-columns: 1fr;
  }

  .flow-painel {
    order: -1;
  }
}

@media (max-width: 650px) {
  .flow-box {
    padding: 16px;
  }

  .flow-topo {
    flex-direction: column;
    align-items: flex-start;
  }

  .flow-titulo h2 {
    font-size: 28px;
  }

  .flow-race-card,
  .flow-painel {
    border-radius: 20px;
  }

  .flow-race-card {
    padding: 12px;
  }

  .grade-flow {
    grid-template-columns: repeat(5, 1fr);
  }

  .marcador-flow {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .principal-flow {
    width: 25px;
    height: 25px;
  }
}

/* espelho */
.espelhos-page {
  width: min(1420px, 94%);
  margin: 0 auto;
  padding: 28px 0 60px;
}

/* TOPO */

.topbar-espelhos {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.topbar-espelhos button {
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(185, 145, 255, 0.18);
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: 0.22s;
}

.topbar-espelhos button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7c4dff, #ff2fb3);
  box-shadow: 0 12px 30px rgba(124, 77, 255, 0.28);
}

/* TÍTULO */

.espelhos-title {
  margin-bottom: 26px;
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(255, 47, 179, 0.08)),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(188, 148, 255, 0.14);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.32);
}

.espelhos-title h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 950;
  letter-spacing: -1px;
}

.espelhos-title p {
  margin-top: 10px;
  color: #c5c2d8;
  font-size: 15px;
  line-height: 1.6;
}

/* CARD GERAL */

.espelhos-card {
  padding: 22px;
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(10, 10, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.085);
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* RACE */

.race-box {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 22px;
  background:
    radial-gradient(circle at center, rgba(124, 77, 255, 0.12), transparent 42%),
    radial-gradient(circle at bottom, rgba(255, 47, 179, 0.08), transparent 40%),
    #030307;
  border: 1px solid rgba(188, 148, 255, 0.14);
  box-shadow:
    inset 0 0 55px rgba(124, 77, 255, 0.08),
    0 18px 45px rgba(0, 0, 0, 0.45);
}

.race-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  transform: translateX(-100%);
  animation: raceLight 5s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
}

@keyframes raceLight {
  0%, 55% {
    transform: translateX(-110%);
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(110%);
    opacity: 0;
  }
}

.race-img {
  display: block;
  width: 100%;
  border-radius: 22px;
  user-select: none;
  pointer-events: none;
  filter: contrast(1.08) brightness(0.93) saturate(1.08);
}

#raceMarkers {
  position: absolute;
  inset: 22px;
  z-index: 5;
  pointer-events: none;
}

/* MARCAÇÕES ROXAS */

.race-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #ffffff, #b388ff 24%, #7c4dff 58%, #4a168f 100%);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 5px rgba(124, 77, 255, 0.20),
    0 0 18px rgba(179, 136, 255, 0.95),
    0 0 42px rgba(124, 77, 255, 0.70);
  font-size: 11px;
  font-weight: 950;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.race-marker::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(179, 136, 255, 0.48);
  box-shadow: 0 0 22px rgba(124, 77, 255, 0.42);
  animation: purpleWave 1.5s infinite ease-in-out;
}

.race-marker::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 8px;
  height: 8px;
  background: #7c4dff;
  transform: rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 0 14px rgba(124,77,255,.75);
}

.race-marker span {
  position: relative;
  z-index: 2;
  line-height: 1;
}

@keyframes purpleWave {
  0%, 100% {
    transform: scale(0.82);
    opacity: 0.35;
  }

  50% {
    transform: scale(1.25);
    opacity: 0.95;
  }
}

.casino-pop {
  animation: markerPop 0.30s ease both;
}

@keyframes markerPop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* SUBTÍTULO */

.espelhos-subtitle {
  margin: 32px 0 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.espelhos-subtitle span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185,145,255,.28), transparent);
}

.espelhos-subtitle h2 {
  font-size: 24px;
  font-weight: 950;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -0.4px;
}

/* GRID DOS ESPELHOS */

.espelhos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.espelho-btn {
  position: relative;
  min-height: 86px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  transition: 0.24s ease;
}

.espelho-btn::before {
  content: "💎";
  position: absolute;
  right: 72px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 38px;
  opacity: 0.045;
}

.espelho-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(255,255,255,.10) 48%, transparent 78%);
  transform: translateX(-120%);
  transition: 0.45s;
}

.espelho-btn:hover {
  transform: translateY(-3px);
  border-color: rgba(179, 136, 255, 0.48);
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.18), rgba(255, 47, 179, 0.08));
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.30);
}

.espelho-btn:hover::after {
  transform: translateX(120%);
}

.espelho-btn.active {
  border-color: rgba(179, 136, 255, 0.95);
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.45), rgba(255, 47, 179, 0.22));
  box-shadow:
    0 0 0 1px rgba(179, 136, 255, 0.22),
    0 0 35px rgba(124, 77, 255, 0.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.espelho-info small {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(124, 77, 255, 0.16);
  color: #cdb8ff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.espelho-info strong {
  display: block;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: 0.4px;
}

.espelho-qtd {
  min-width: 64px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #f0dcff;
  background: rgba(124, 77, 255, 0.18);
  border: 1px solid rgba(179, 136, 255, 0.35);
  box-shadow: inset 0 0 14px rgba(124, 77, 255, 0.12);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

/* LIMPAR */

.btn-limpar {
  width: 100%;
  margin-top: 20px;
  height: 52px;
  border: none;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 61, 113, 0.20), rgba(124, 77, 255, 0.10));
  border: 1px solid rgba(255, 61, 113, 0.30);
  color: #fff;
  cursor: pointer;
  font-weight: 950;
  transition: 0.22s;
}

.btn-limpar:hover {
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, rgba(255, 61, 113, 0.32), rgba(124, 77, 255, 0.16));
}

/* INFO SELECIONADO */

.espelho-selecionado-info {
  margin-top: 20px;
  padding: 20px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(124, 77, 255, 0.22), rgba(255, 47, 179, 0.08)),
    rgba(255,255,255,.035);
  border: 1px solid rgba(179, 136, 255, 0.22);
  display: grid;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.espelho-selecionado-info strong {
  color: #fff;
  font-size: 14px;
}

.espelho-selecionado-info span {
  color: #d8c2ff;
  font-size: 22px;
  font-weight: 950;
}

.espelho-selecionado-info small {
  color: #c5c2d8;
  line-height: 1.5;
}

/* RESPONSIVO */

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

  .espelhos-card {
    padding: 14px;
    border-radius: 24px;
  }

  .race-box {
    padding: 12px;
    border-radius: 22px;
  }

  #raceMarkers {
    inset: 12px;
  }

  .race-marker {
    width: 22px;
    height: 22px;
    font-size: 9px;
  }
}

@media (max-width: 560px) {
  .espelhos-page {
    width: 94%;
    padding-top: 18px;
  }

  .topbar-espelhos {
    display: grid;
  }

  .topbar-espelhos button {
    width: 100%;
  }

  .espelhos-title,
  .espelhos-card {
    border-radius: 22px;
  }

  .espelho-btn {
    min-height: 76px;
  }

  .espelho-info strong {
    font-size: 16px;
  }

  .espelho-qtd {
    min-width: 56px;
    height: 30px;
    font-size: 10px;
  }

  .espelhos-subtitle h2 {
    font-size: 18px;
  }
}

/* ============================= */
/* TRIANGULAÇÃO IA */
/* ============================= */

#triangulacao {
  width: 100%;
  min-height: 100vh;
  padding: 28px;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.2), transparent 35%),
    radial-gradient(circle at bottom right, rgba(192, 38, 211, 0.16), transparent 35%),
    #050509;
  color: #fff;
}

.tri-box {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}

.tri-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 22px;
  margin-bottom: 24px;
  border-radius: 24px;
  background: rgba(15, 15, 25, 0.88);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.12);
  backdrop-filter: blur(16px);
}

.tri-topo h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.tri-topo p {
  margin: 8px 0 0;
  color: #b9b9ca;
  font-size: 15px;
}

.tri-acoes-topo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tri-acoes-topo button,
.tri-race-header button {
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.25s ease;
}

.tri-acoes-topo button:hover,
.tri-race-header button:hover {
  background: rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

.tri-acoes-topo .tri-btn-sair {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.tri-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
  gap: 24px;
  align-items: start;
}

.tri-race-card,
.tri-painel {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20, 20, 32, 0.96), rgba(10, 10, 18, 0.96));
  border: 1px solid rgba(168, 85, 247, 0.24);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
}

.tri-race-card {
  padding: 20px;
}

.tri-race-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.tri-race-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.tri-race-header span {
  display: block;
  margin-top: 4px;
  color: #a7a7ba;
  font-size: 13px;
}

.tri-race-area {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle, rgba(168, 85, 247, 0.13), transparent 50%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tri-race-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.18));
}

#triangulacaoSvg,
#marcadoresTriangulacao {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#triangulacaoSvg {
  z-index: 2;
}

#marcadoresTriangulacao {
  z-index: 3;
}

.linha-triangulacao {
  stroke: #a855f7;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.95));
  animation: desenharLinhaTri 0.65s forwards ease;
}

@keyframes desenharLinhaTri {
  to {
    stroke-dashoffset: 0;
  }
}

.marcador-triangulo {
  position: absolute;
  width: 31px;
  height: 31px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow:
    0 0 0 5px rgba(168, 85, 247, 0.15),
    0 0 24px rgba(168, 85, 247, 0.9);
  animation: pulseTri 1.4s infinite ease-in-out;
}

.marcador-triangulo-principal {
  width: 39px;
  height: 39px;
  color: #111;
  font-size: 15px;
  background: linear-gradient(135deg, #facc15, #f97316);
  box-shadow:
    0 0 0 6px rgba(250, 204, 21, 0.18),
    0 0 30px rgba(250, 204, 21, 0.9);
}

@keyframes pulseTri {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.12);
  }
}

.tri-painel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tri-card,
.tri-ia-card,
.tri-grade-card {
  border-radius: 22px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tri-card h3,
.tri-grade-topo h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.tri-card p {
  margin: 8px 0 14px;
  color: #aaaabc;
  font-size: 13px;
}

.tri-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.tri-inputs input {
  width: 100%;
  height: 50px;
  border-radius: 15px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  outline: none;
}

.tri-inputs input:focus {
  border-color: #c084fc;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16);
}

.tri-botoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.tri-botoes button {
  height: 50px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.26);
  transition: 0.25s ease;
}

.tri-botoes button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(168, 85, 247, 0.5);
}

.tri-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.tri-status-grid div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tri-status-grid span {
  display: block;
  color: #aaaabc;
  font-size: 12px;
  margin-bottom: 5px;
}

.tri-status-grid strong {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.tri-ia-card h4 {
  margin: 0 0 10px;
  font-size: 16px;
}

.tri-ia-card p {
  margin: 0;
  color: #c6c6d6;
  line-height: 1.55;
  font-size: 14px;
}

.tri-grade-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.tri-grade-topo span {
  color: #a78bfa;
  font-size: 13px;
  font-weight: 900;
}

.tri-grade {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.tri-numero-btn {
  height: 42px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.2s ease;
}

.tri-numero-btn:hover {
  background: rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

.tri-numero-btn.ativo {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.55);
}

.tri-numero-btn.principal {
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #111;
  box-shadow: 0 0 22px rgba(250, 204, 21, 0.65);
}

/* RESPONSIVO */

@media (max-width: 1100px) {
  .tri-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #triangulacao {
    padding: 16px;
  }

  .tri-topo {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .tri-topo h2 {
    font-size: 26px;
  }

  .tri-acoes-topo {
    width: 100%;
  }

  .tri-acoes-topo button {
    flex: 1;
    padding: 11px 12px;
    font-size: 13px;
  }

  .tri-race-card,
  .tri-painel {
    border-radius: 22px;
    padding: 14px;
  }

  .tri-inputs {
    grid-template-columns: 1fr;
  }

  .marcador-triangulo {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .marcador-triangulo-principal {
    width: 31px;
    height: 31px;
    font-size: 13px;
  }

  .tri-grade {
    grid-template-columns: repeat(5, 1fr);
  }

  .tri-numero-btn {
    height: 39px;
  }
}

@media (max-width: 420px) {
  .tri-grade {
    grid-template-columns: repeat(4, 1fr);
  }

  .tri-botoes {
    grid-template-columns: 1fr;
  }

  .tri-race-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tri-race-header button {
    width: 100%;
  }
}
/* ============================= */
/* ROLETA PRO IA */
/* ============================= */

#roleta {
  width: 100%;
  min-height: 100vh;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(192, 38, 211, 0.16), transparent 35%),
    #050509;
}

.roleta-page {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}

.roleta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  margin-bottom: 24px;
  border-radius: 24px;
  background: rgba(15, 15, 25, 0.88);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 0 40px rgba(168, 85, 247, 0.12);
  backdrop-filter: blur(16px);
}

.roleta-topo h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.8px;
}

.roleta-topo p {
  margin: 8px 0 0;
  color: #b9b9ca;
  font-size: 15px;
}

.roleta-topo-acoes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.roleta-topo-acoes button,
.btn-aplicar-race,
.btn-aplicar-ia-roleta {
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.25s ease;
}

.roleta-topo-acoes button:hover,
.btn-aplicar-race:hover,
.btn-aplicar-ia-roleta:hover {
  background: rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

.btn-sair-roleta,
.btn-aplicar-ia-roleta {
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.roleta-pro-container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: 24px;
  align-items: stretch;
}

.roleta-card,
.ia-roleta-box {
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20, 20, 32, 0.96), rgba(10, 10, 18, 0.96));
  border: 1px solid rgba(168, 85, 247, 0.24);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
}

.roleta-main-card,
.roleta-side-card,
.race-roleta-card {
  padding: 20px;
}

.roleta-header,
.race-header,
.ia-roleta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.roleta-header h3,
.race-header h2,
.ia-roleta-box h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.roleta-header p,
.race-header p,
.ia-status-roleta {
  margin: 5px 0 0;
  color: #aaaabc;
  font-size: 13px;
}

.roleta-status {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  font-size: 13px;
  font-weight: 900;
}

.cassino-wheel-area {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 28px 0;
}

.wheel-light {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.24), transparent 65%);
  filter: blur(8px);
}

.wheel-frame {
  position: relative;
  width: min(430px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 50%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow:
    inset 0 0 35px rgba(255, 255, 255, 0.04),
    0 0 55px rgba(168, 85, 247, 0.18);
  overflow: hidden;
}

.roulette-wheel {
  width: 94%;
  height: 94%;
  object-fit: contain;
  border-radius: 50%;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 28px rgba(0, 0, 0, 0.75));
}

.wheel-center-glow {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 65%);
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.45);
  pointer-events: none;
}

.roleta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.btn-girar-roleta,
.btn-limpar-roleta {
  height: 54px;
  border: none;
  border-radius: 17px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  transition: 0.25s ease;
}

.btn-girar-roleta {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.35);
}

.btn-limpar-roleta {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.btn-girar-roleta:hover,
.btn-limpar-roleta:hover {
  transform: translateY(-2px);
}

.marcados-box,
.resultado-box,
.verificacao-box,
.historico-box,
.estatisticas-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.marcados-box h3,
.resultado-box h3,
.verificacao-box h3,
.historico-box h3,
.estatisticas-box h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.marcados-box p {
  margin: 0 0 12px;
  color: #aaaabc;
  font-size: 13px;
}

.numeros-marcados-lista,
.historico-roleta,
.ia-numeros-sugeridos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.numero-marcado-pill,
.historico-numero,
.ia-numero {
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.numero-marcado-pill.vermelho,
.historico-numero.vermelho,
.ia-numero.vermelho {
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

.numero-marcado-pill.preto,
.historico-numero.preto,
.ia-numero.preto {
  background: linear-gradient(135deg, #171717, #000);
}

.numero-marcado-pill.verde,
.historico-numero.verde,
.ia-numero.verde {
  background: linear-gradient(135deg, #16a34a, #064e3b);
}

.historico-numero.hit {
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25), 0 0 15px rgba(250, 204, 21, 0.8);
}

.ultimo-numero-roleta {
  width: 96px;
  height: 96px;
  margin: 14px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 38px;
  font-weight: 900;
  background: #111;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.45);
}

.ultimo-numero-roleta.vermelho {
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

.ultimo-numero-roleta.preto {
  background: linear-gradient(135deg, #171717, #000);
}

.ultimo-numero-roleta.verde {
  background: linear-gradient(135deg, #16a34a, #064e3b);
}

.ultima-cor-roleta,
.resultado-data-roleta {
  display: block;
  text-align: center;
  color: #aaaabc;
  margin: 0;
}

.resultado-verificacao {
  padding: 14px;
  border-radius: 16px;
  line-height: 1.45;
  font-weight: 800;
  color: #d4d4e2;
  background: rgba(255, 255, 255, 0.06);
}

.resultado-verificacao.acertou {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.resultado-verificacao.errou {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.stat-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-line:last-child {
  border-bottom: none;
}

.stat-line span {
  color: #aaaabc;
  font-size: 13px;
}

.stat-line strong {
  font-size: 16px;
}

.ia-roleta-box {
  margin-top: 24px;
  padding: 20px;
}

.ia-sugestoes {
  margin-top: 16px;
}

.ia-sugestoes strong {
  display: block;
  margin-bottom: 10px;
}

.ia-numero {
  cursor: pointer;
  border: none;
  transition: 0.2s ease;
}

.ia-numero:hover {
  transform: translateY(-2px) scale(1.05);
}

.ia-analise-texto {
  margin: 14px 0 0;
  color: #c6c6d6;
  line-height: 1.55;
  font-size: 14px;
}

.race-roleta-card {
  margin-top: 24px;
}

.race-roleta-area {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle, rgba(168, 85, 247, 0.13), transparent 50%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.race-roleta-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.race-click-layer,
.race-fichas-layer,
.race-resultado-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.race-click-layer {
  z-index: 4;
}

.race-fichas-layer {
  z-index: 3;
  pointer-events: none;
}

.race-resultado-layer {
  z-index: 5;
  pointer-events: none;
}

.race-num-click {
  position: absolute;
  width: 4.2%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.race-num-click:hover {
  background: rgba(168, 85, 247, 0.18);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
}

.ficha-roleta-pro {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fichaPop 0.25s ease;
}

.ficha-roleta-pro img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(168, 85, 247, 0.8))
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

.ficha-roleta-pro span {
  position: absolute;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 3px #000;
}

@keyframes fichaPop {
  from {
    transform: translate(-50%, -50%) scale(0.65);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.resultado-race-chip {
  position: absolute;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  border: 3px solid #fff;
  animation: resultadoPulse 1s infinite ease-in-out;
}

.resultado-race-chip.acerto {
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: 0 0 35px rgba(34, 197, 94, 0.9);
}

.resultado-race-chip.erro {
  background: linear-gradient(135deg, #ef4444, #991b1b);
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.9);
}

@keyframes resultadoPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.16);
  }
}

/* RESPONSIVO */

@media (max-width: 1100px) {
  .roleta-pro-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #roleta {
    padding: 16px;
  }

  .roleta-topo {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
  }

  .roleta-topo h2 {
    font-size: 26px;
  }

  .roleta-topo-acoes {
    width: 100%;
  }

  .roleta-topo-acoes button {
    flex: 1;
    padding: 11px 12px;
    font-size: 13px;
  }

  .roleta-card,
  .ia-roleta-box {
    border-radius: 22px;
  }

  .roleta-main-card,
  .roleta-side-card,
  .race-roleta-card,
  .ia-roleta-box {
    padding: 14px;
  }

  .roleta-header,
  .race-header,
  .ia-roleta-topo {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-aplicar-race,
  .btn-aplicar-ia-roleta {
    width: 100%;
  }

  .roleta-actions {
    grid-template-columns: 1fr;
  }

  .wheel-frame {
    width: min(340px, 100%);
  }

  .wheel-light {
    width: 300px;
    height: 300px;
  }

  .ficha-roleta-pro {
    width: 32px;
    height: 32px;
  }

  .ficha-roleta-pro span {
    font-size: 10px;
  }

  .resultado-race-chip {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  .race-num-click {
    width: 6%;
  }
}

@media (max-width: 420px) {
  .ultimo-numero-roleta {
    width: 82px;
    height: 82px;
    font-size: 32px;
  }

  .ficha-roleta-pro {
    width: 28px;
    height: 28px;
  }

  .race-roleta-area {
    border-radius: 16px;
  }
}
/* ============================= */
/* RADAR DE ESTRATÉGIAS IA */
/* ============================= */

.radar-estrategias-box {
  margin-top: 24px;
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20, 20, 32, 0.96), rgba(10, 10, 18, 0.96));
  border: 1px solid rgba(168, 85, 247, 0.24);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
}

.radar-estrategias-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.radar-estrategias-topo h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.radar-estrategias-topo p {
  margin: 5px 0 0;
  color: #aaaabc;
  font-size: 13px;
}

.btn-radar-estrategias {
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
  transition: 0.25s ease;
}

.btn-radar-estrategias:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.55);
}

.estrategia-recomendada-card {
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(168, 85, 247, 0.18), transparent 45%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(168, 85, 247, 0.18);
  margin-bottom: 18px;
}

.estrategia-recomendada-card span {
  display: block;
  color: #aaaabc;
  font-size: 13px;
  margin-bottom: 6px;
}

.estrategia-recomendada-card strong {
  display: block;
  font-size: 26px;
  color: #d8b4fe;
  font-weight: 900;
  margin-bottom: 8px;
}

.estrategia-recomendada-card p {
  margin: 0;
  color: #d6d6e5;
  line-height: 1.55;
  font-size: 14px;
}

.radar-barras {
  display: grid;
  gap: 14px;
}

.radar-linha {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.radar-linha > div:first-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}

.radar-linha span {
  color: #fff;
  font-weight: 800;
}

.radar-linha strong {
  color: #d8b4fe;
  font-weight: 900;
}

.radar-barra {
  width: 100%;
  height: 11px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.radar-barra span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #c026d3, #facc15);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.65);
  transition: width 0.45s ease;
}

.radar-numeros-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.radar-numeros-box strong {
  display: block;
  margin-bottom: 10px;
}

.radar-numeros-fortes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.radar-numero-forte,
.radar-numero-vazio {
  min-width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.radar-numero-forte.vermelho {
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
}

.radar-numero-forte.preto {
  background: linear-gradient(135deg, #171717, #000);
}

.radar-numero-forte.verde {
  background: linear-gradient(135deg, #16a34a, #064e3b);
}

.radar-numero-vazio {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #aaaabc;
}

@media (max-width: 768px) {
  .radar-estrategias-box {
    padding: 14px;
    border-radius: 22px;
  }

  .radar-estrategias-topo {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-radar-estrategias {
    width: 100%;
  }

  .estrategia-recomendada-card strong {
    font-size: 22px;
  }
}
/* ============================= */
/* BANCA PREMIUM */
/* ============================= */

#banca {
  width: 100%;
  min-height: 100vh;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.2), transparent 35%),
    radial-gradient(circle at bottom right, rgba(234, 179, 8, 0.12), transparent 35%),
    #050509;
}

.banca-premium {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}

.banca-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 28px;
  background: rgba(15, 15, 25, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 0 45px rgba(168, 85, 247, 0.12);
  backdrop-filter: blur(16px);
}

.banca-hero h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -1px;
}

.banca-hero p {
  margin: 8px 0 0;
  color: #b9b9ca;
  font-size: 15px;
}

.banca-top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.banca-top-actions button {
  border: none;
  cursor: pointer;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.25s ease;
}

.banca-top-actions button:hover {
  background: rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

.banca-btn-sair {
  background: linear-gradient(135deg, #7c3aed, #c026d3) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}

.banca-premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 24px;
  align-items: start;
}

.banca-left,
.banca-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.banca-card-premium {
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(20, 20, 32, 0.96), rgba(10, 10, 18, 0.96));
  border: 1px solid rgba(168, 85, 247, 0.22);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
}

.banca-card-premium h2 {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.4px;
}

.banca-config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.banca-input-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.banca-input-card span {
  display: inline-flex;
  margin-bottom: 10px;
  font-size: 22px;
}

.banca-input-card label {
  display: block;
  color: #b9b9ca;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.banca-input-card input,
.banca-input-card select {
  width: 100%;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  outline: none;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 800;
}

.banca-input-card input:focus,
.banca-input-card select:focus {
  border-color: #c084fc;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.16);
}

.banca-input-card select option {
  background: #111;
  color: #fff;
}

.banca-btn-gold {
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border: none;
  border-radius: 17px;
  cursor: pointer;
  color: #111;
  font-size: 15px;
  font-weight: 950;
  background: linear-gradient(135deg, #facc15, #f59e0b);
  box-shadow: 0 0 28px rgba(250, 204, 21, 0.28);
  transition: 0.25s ease;
}

.banca-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 38px rgba(250, 204, 21, 0.48);
}

.banca-btn-small {
  width: auto;
  min-width: 190px;
  margin: 0;
  padding: 0 18px;
}

.banca-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.banca-card-title-row h2 {
  margin: 0;
}

.banca-tag {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
  font-size: 12px;
  font-weight: 900;
}

.banca-chart-area {
  width: 100%;
  height: 360px;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, 0.08), transparent 40%),
    rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.banca-info-line {
  margin-top: 12px;
  color: #aaaabc;
  font-size: 13px;
}

.banca-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.banca-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.28);
}

.banca-table th {
  position: sticky;
  top: 0;
  background: rgba(22, 22, 34, 0.98);
  color: #d8b4fe;
  text-align: left;
  padding: 14px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.banca-table td {
  padding: 13px 12px;
  color: #e5e5f1;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  white-space: nowrap;
}

.banca-table tr:hover td {
  background: rgba(168, 85, 247, 0.08);
}

.green {
  color: #4ade80 !important;
}

.red {
  color: #f87171 !important;
}

.gold {
  color: #facc15 !important;
}

.status-banca {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.status-banca.planejado {
  color: #d8b4fe;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.status-banca.positivo {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.status-banca.negativo {
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.status-banca.alerta {
  color: #fde68a;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.25);
}

.edit-dia {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 11px;
  cursor: pointer;
  color: #fff;
  font-weight: 900;
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.edit-dia:hover {
  background: rgba(168, 85, 247, 0.35);
}

.tabela-vazia {
  text-align: center;
  padding: 30px !important;
  color: #aaaabc !important;
}

.banca-result-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.banca-result-grid div,
.banca-mini-status div {
  padding: 15px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.banca-result-grid span,
.banca-mini-status span,
.banca-distance span,
.banca-status-text span {
  display: block;
  color: #aaaabc;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 800;
}

.banca-result-grid strong {
  display: block;
  font-size: 22px;
  font-weight: 950;
}

.banca-result-grid small {
  color: #aaaabc;
}

.banca-alert {
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  line-height: 1.45;
  color: #fef3c7;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.22);
}

.banca-status-center {
  display: flex;
  align-items: center;
  gap: 18px;
}

.banca-circle {
  --percent: 0deg;
  width: 128px;
  height: 128px;
  flex: 0 0 128px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(#facc15 var(--percent), rgba(255, 255, 255, 0.08) 0deg);
  position: relative;
  box-shadow: 0 0 28px rgba(250, 204, 21, 0.18);
}

.banca-circle::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #11111b;
}

.banca-circle span {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 950;
  color: #facc15;
}

.banca-status-text {
  flex: 1;
}

.banca-status-text strong {
  display: block;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 950;
}

.banca-status-text small {
  color: #aaaabc;
}

.banca-mini-status {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-top: 18px;
}

.banca-mini-status strong {
  display: block;
  font-size: 22px;
  font-weight: 950;
}

.banca-mini-status small {
  color: #aaaabc;
}

.banca-distance {
  margin-top: 18px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.banca-distance > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.banca-distance strong {
  font-size: 18px;
}

.banca-distance b {
  color: #d8b4fe;
}

.banca-progress {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.banca-progress span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #c026d3, #facc15);
  transition: width 0.4s ease;
}

.banca-resumo {
  display: grid;
  gap: 10px;
}

.banca-resumo p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.banca-resumo p:last-child {
  border-bottom: none;
}

.banca-resumo span {
  color: #aaaabc;
}

.banca-resumo b {
  color: #fff;
}

.dica-primo {
  background:
    radial-gradient(circle at top left, rgba(250, 204, 21, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(20, 20, 32, 0.96), rgba(10, 10, 18, 0.96));
}

.dica-primo p {
  margin: 0;
  color: #fef3c7;
  line-height: 1.5;
  font-size: 15px;
}

.banca-footer-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 22px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.24), rgba(250, 204, 21, 0.12)),
    rgba(15, 15, 25, 0.9);
  border: 1px solid rgba(168, 85, 247, 0.22);
}

.banca-footer-banner > div:first-child {
  font-size: 42px;
}

.banca-footer-banner h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 950;
}

.banca-footer-banner p {
  margin: 6px 0 0;
  color: #b9b9ca;
}

.modal-banca {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.modal-banca.active {
  display: flex;
}

.modal-banca-box {
  width: 100%;
  max-width: 440px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(24, 24, 38, 0.98), rgba(10, 10, 18, 0.98));
  border: 1px solid rgba(168, 85, 247, 0.28);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
}

.modal-banca-box h2 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 950;
}

.banca-atual-info {
  padding: 15px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.22);
}

.banca-atual-info span {
  display: block;
  color: #fef3c7;
  font-size: 12px;
  margin-bottom: 5px;
}

.banca-atual-info strong {
  font-size: 24px;
  color: #facc15;
}

.modal-banca-box label {
  display: block;
  margin-bottom: 8px;
  color: #aaaabc;
  font-size: 13px;
  font-weight: 800;
}

.modal-banca-box input {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(168, 85, 247, 0.35);
  background: rgba(0, 0, 0, 0.36);
  color: #fff;
  outline: none;
  padding: 0 14px;
  font-size: 18px;
  font-weight: 900;
}

.modal-ajuda {
  display: block;
  margin-top: 9px;
  color: #aaaabc;
}

.modal-banca-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.btn-confirmar,
.btn-cancelar {
  height: 50px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  font-weight: 950;
  color: #fff;
}

.btn-confirmar {
  background: linear-gradient(135deg, #22c55e, #15803d);
}

.btn-cancelar {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* RESPONSIVO */

@media (max-width: 1150px) {
  .banca-premium-grid {
    grid-template-columns: 1fr;
  }

  .banca-config-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #banca {
    padding: 16px;
  }

  .banca-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px;
    border-radius: 22px;
  }

  .banca-hero h1 {
    font-size: 27px;
  }

  .banca-top-actions {
    width: 100%;
  }

  .banca-top-actions button {
    flex: 1;
    padding: 11px 12px;
    font-size: 13px;
  }

  .banca-card-premium {
    padding: 15px;
    border-radius: 22px;
  }

  .banca-config-grid {
    grid-template-columns: 1fr;
  }

  .banca-card-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .banca-btn-small {
    width: 100%;
  }

  .banca-chart-area {
    height: 300px;
    padding: 10px;
  }

  .banca-status-center {
    flex-direction: column;
    align-items: flex-start;
  }

  .banca-mini-status {
    grid-template-columns: 1fr;
  }

  .banca-footer-banner {
    align-items: flex-start;
    border-radius: 22px;
  }

  .modal-banca-box {
    padding: 18px;
    border-radius: 22px;
  }
}

@media (max-width: 420px) {
  .banca-top-actions {
    flex-direction: column;
  }

  .modal-banca-actions {
    grid-template-columns: 1fr;
  }

  .banca-footer-banner h2 {
    font-size: 18px;
  }
}
.banca-controle-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.banca-btn-danger {
  height: 52px;
  border: none;
  border-radius: 17px;
  cursor: pointer;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  background: linear-gradient(135deg, #ef4444, #991b1b);
  box-shadow: 0 0 28px rgba(239, 68, 68, 0.28);
  transition: 0.25s ease;
}

.banca-btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 38px rgba(239, 68, 68, 0.48);
}

@media (max-width: 768px) {
  .banca-controle-actions {
    width: 100%;
  }

  .banca-controle-actions button {
    width: 100%;
  }
}
.alertas-body {
  margin: 0;
  min-height: 100vh;
  background: #080611;
  overflow-x: hidden;
}

.alerta-page {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

.alerta-layout {
  display: grid;
  grid-template-columns: 350px minmax(420px, 1fr) 330px;
  gap: 20px;
  align-items: start;
}

.alerta-controles,
.race-alerta-box,
.painel-inteligente {
  min-width: 0;
}

.race-area-alerta {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 18px auto;
  border-radius: 22px;
  overflow: hidden;
}

.race-img-alerta {
  width: 100%;
  display: block;
}

#marcadoresAlerta {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.marcador-alerta {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  z-index: 5;
  box-shadow: 0 0 16px rgba(168, 85, 247, .75);
  background: #9333ea;
  border: 2px solid #fff;
}

.marcador-alerta.principal {
  background: #facc15;
  color: #111;
}

.marcador-alerta.alerta {
  background: #ef4444;
}

.marcador-alerta.terminal {
  background: #8b5cf6;
}

.marcador-alerta.ia {
  background: #06b6d4;
}

.alerta-nav {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.alerta-nav-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.alerta-nav-btn.roxo {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
}

.popup-terminal-info {
  right: 28px;
  bottom: 28px;
  max-width: 290px;
}

@media (max-width: 1180px) {
  .alerta-layout {
    grid-template-columns: 1fr;
  }

  .race-area-alerta {
    max-width: 720px;
  }

  .painel-inteligente {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .alerta-page {
    padding: 16px;
  }

  .alerta-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .race-status-bar {
    grid-template-columns: 1fr;
  }

  .popup-terminal-info {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    max-width: none;
  }
}
/* REMOVE AREA SENSIVEL VAZIA */

.area-sensivel,
.security-panel-vazio,
.painel-seguranca-vazio {
  display: none !important;
}


.wheel-frame {
  position: relative !important;
  overflow: visible !important;
}
/* ============================= */
/* ROLETA - CORREÇÃO FINAL */
/* ============================= */

.cassino-wheel-area {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.wheel-frame {
  position: relative;
  width: min(520px, 92vw);
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

.roulette-wheel {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  filter:
    drop-shadow(0 0 25px rgba(168, 85, 247, 0.22))
    drop-shadow(0 0 45px rgba(0, 0, 0, 0.45));
}

/* TRILHO DA BOLA */

.roulette-ball-track {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
}

/* BOLINHA */

.roulette-ball {
  position: absolute;
  top: 2%;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ffffff;
  z-index: 20;

  box-shadow:
    0 0 8px #fff,
    0 0 18px rgba(255,255,255,0.95),
    0 0 28px rgba(168,85,247,0.85);

  transition:
    transform 5s cubic-bezier(.17,.67,.12,.99),
    top .3s ease,
    left .3s ease;
}

/* LUZ */

.wheel-light {
  position: absolute;
  width: 85%;
  height: 85%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(168,85,247,0.18),
      transparent 70%);
  filter: blur(18px);
  animation: pulseWheel 3s infinite ease-in-out;
  pointer-events: none;
}

@keyframes pulseWheel {

  0% {
    transform: scale(1);
    opacity: .7;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: .7;
  }
}

/* CENTRO */

.wheel-center-glow {
  position: absolute;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(250,204,21,0.95),
      rgba(120,53,15,0.9));
  z-index: 2;

  box-shadow:
    0 0 20px rgba(250,204,21,0.45),
    inset 0 0 12px rgba(255,255,255,0.35);
}

/* RESPONSIVO */

@media (max-width: 768px) {

  .wheel-frame {
    width: 94vw;
  }

  .roulette-ball {
    width: 12px;
    height: 12px;
  }

  .roulette-ball-track {
    inset: 21%;
  }

}
/* ===============================
   SEGURANÇA TURMA BLACK
================================ */

.security-enabled {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.security-enabled img {
  -webkit-user-drag: none;
  user-drag: none;
}

.security-enabled ::selection {
  background: transparent;
  color: inherit;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* POPUP */
#securityCommandPopup {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000001;

  background: linear-gradient(135deg, #8b5cf6, #4c1d95);
  color: #fff;

  padding: 15px 22px;
  border-radius: 18px;

  font-size: 14px;
  font-weight: 900;

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(139, 92, 246, 0.45);

  opacity: 0;
  transform: translateY(-18px) scale(0.94);
  pointer-events: none;
  transition: 0.12s ease;
}

#securityCommandPopup.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* WATERMARK */
#securityWatermark {
  position: fixed;
  inset: 0;
  z-index: 999999;

  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  overflow: hidden;
  transition: opacity 0.01s linear;
}

#securityWatermark.active {
  opacity: 1;
  visibility: visible;
}

.security-watermark-grid {
  width: 250%;
  height: 250%;

  display: grid;
  grid-template-columns: repeat(8, 1fr);

  transform: rotate(-25deg) translate(-20%, -20%);
  gap: 58px;
  padding: 32px;
}

.security-watermark-grid span {
  color: rgba(255, 255, 255, 0.23);
  font-size: 23px;
  font-weight: 950;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;

  text-shadow:
    0 0 12px rgba(0, 0, 0, 0.95),
    0 0 24px rgba(124, 58, 237, 0.4);
}

/* OVERLAY */
#securityOverlay {
  position: fixed;
  inset: 0;
  z-index: 999998;

  background:
    radial-gradient(circle at top, rgba(124, 58, 237, 0.24), transparent 45%),
    radial-gradient(circle at bottom, rgba(88, 28, 135, 0.18), transparent 50%),
    rgba(3, 3, 9, 0.985);

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

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

  opacity: 0;
  visibility: hidden;

  transition: opacity 0.01s linear;
}

#securityOverlay.active {
  opacity: 1;
  visibility: visible;
}

.security-overlay-card {
  width: min(92%, 450px);

  background: linear-gradient(180deg, rgba(24, 24, 35, 0.98), rgba(9, 9, 16, 0.98));

  border: 1px solid rgba(167, 139, 250, 0.28);
  border-radius: 30px;

  padding: 44px 30px;
  text-align: center;

  box-shadow:
    0 0 42px rgba(124, 58, 237, 0.24),
    0 24px 70px rgba(0, 0, 0, 0.7);
}

.security-lock {
  font-size: 64px;
  margin-bottom: 18px;
}

.security-overlay-card h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: 28px;
  font-weight: 950;
}

.security-overlay-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.6;
}

/* BLOQUEIOS VISUAIS */
.security-print-block {
  overflow: hidden !important;
}

.security-print-block > *:not(#securityOverlay):not(#securityWatermark):not(#securityCommandPopup) {
  filter: blur(22px) brightness(0.2) !important;
  pointer-events: none !important;
}

.security-print-hide > *:not(#securityOverlay):not(#securityWatermark):not(#securityCommandPopup) {
  opacity: 0.02 !important;
}

.security-tab-hidden > *:not(#securityOverlay):not(#securityWatermark):not(#securityCommandPopup) {
  filter: blur(8px) brightness(0.65);
}

.security-devtools-detected > *:not(#securityWatermark):not(#securityCommandPopup) {
  filter: blur(10px) brightness(0.7);
}

/* PRINT DO NAVEGADOR */
@media print {
  body * {
    visibility: hidden !important;
  }

  body::before {
    content: "CONTEÚDO PROTEGIDO - TURMA BLACK";
    visibility: visible !important;

    position: fixed;
    inset: 0;

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

    background: #050008;
    color: #fff;

    font-size: 34px;
    font-weight: 950;
    text-align: center;

    padding: 40px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  #securityCommandPopup {
    top: 16px;
    right: 16px;
    left: 16px;
    text-align: center;
    font-size: 13px;
  }

  .security-watermark-grid {
    gap: 38px;
    grid-template-columns: repeat(5, 1fr);
  }

  .security-watermark-grid span {
    font-size: 14px;
  }

  .security-overlay-card {
    padding: 34px 22px;
    border-radius: 24px;
  }

  .security-lock {
    font-size: 52px;
  }

  .security-overlay-card h2 {
    font-size: 22px;
  }

  .security-overlay-card p {
    font-size: 14px;
  }
}
/* ===============================
   PROVA.HTML - TURMA BLACK
================================ */

.prova-body {
  background: #07070d;
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
}

.prova-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px;
}

.menu-provas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.prova-menu-btn {
  border: 1px solid rgba(139, 92, 246, 0.35);
  background: rgba(255,255,255,0.05);
  color: #fff;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
}

.prova-menu-btn.active,
.prova-menu-btn:hover {
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  box-shadow: 0 0 25px rgba(139,92,246,.35);
}

.prova-menu-area {
  display: none;
}

.prova-menu-area.active {
  display: block;
}

.prova-header {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  margin-bottom: 30px;
}

.prova-header h2 {
  font-size: 38px;
  margin: 10px 0;
}

.prova-header p {
  color: rgba(255,255,255,.72);
  max-width: 720px;
  line-height: 1.6;
}

.prova-tag {
  color: #a78bfa;
  font-weight: 900;
  letter-spacing: 1px;
}

.prova-status-card {
  min-width: 230px;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(255,255,255,.05));
  border: 1px solid rgba(139,92,246,.35);
}

.prova-status-card span,
.prova-status-card small {
  display: block;
  color: rgba(255,255,255,.7);
}

.prova-status-card strong {
  display: block;
  font-size: 22px;
  margin: 8px 0;
}

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

.prova-card {
  position: relative;
  padding: 30px;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.28), transparent 45%),
    rgba(16,16,25,.96);
  border: 1px solid rgba(139,92,246,.28);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden;
}

.prova-card h3 {
  font-size: 28px;
  margin: 12px 0;
}

.prova-card p {
  color: rgba(255,255,255,.75);
  line-height: 1.5;
}

.prova-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 30px;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
}

.prova-lista-info {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.prova-lista-info li {
  margin-bottom: 10px;
  color: rgba(255,255,255,.86);
}

.btn-prova,
.btn-secundario,
.btn-finalizar {
  border: none;
  cursor: pointer;
  border-radius: 16px;
  padding: 14px 22px;
  font-weight: 900;
  color: #fff;
}

.btn-prova {
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
}

.btn-prova.semanal {
  background: linear-gradient(135deg, #f59e0b, #7c2d12);
}

.btn-secundario {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.btn-finalizar {
  background: linear-gradient(135deg, #22c55e, #166534);
}

.area-prova,
.resultado-prova,
.historico-provas,
.prova-regras {
  margin-top: 28px;
  padding: 28px;
  border-radius: 28px;
  background: rgba(16,16,25,.96);
  border: 1px solid rgba(139,92,246,.25);
}

.oculto {
  display: none !important;
}

.prova-topo-execucao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.timer-prova {
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(139,92,246,.18);
  font-weight: 900;
}

.progresso-prova {
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin: 22px 0;
}

#barraProgressoProva {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
  transition: .25s ease;
}

.questao-box {
  padding: 25px;
  border-radius: 22px;
  background: rgba(255,255,255,.04);
}

#contadorQuestao {
  color: #a78bfa;
  font-weight: 900;
}

#textoQuestao {
  font-size: 25px;
  margin: 14px 0 22px;
}

.alternativas-prova {
  display: grid;
  gap: 12px;
}

.alternativas-prova button {
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 16px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 700;
}

.alternativas-prova button:hover,
.alternativa-selecionada {
  background: linear-gradient(135deg, rgba(139,92,246,.8), rgba(91,33,182,.8)) !important;
  border-color: rgba(167,139,250,.8) !important;
}

.prova-acoes {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}

.resultado-card {
  text-align: center;
}

.resultado-icon {
  font-size: 56px;
}

.resultado-numero strong {
  display: block;
  font-size: 64px;
  color: #a78bfa;
}

.resultado-detalhes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 25px 0;
}

.resultado-detalhes div,
.regra-card,
.item-historico-prova {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}

.historico-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.historico-header button {
  border: none;
  background: #7c3aed;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}

.lista-historico {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.item-historico-prova {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.item-historico-prova small {
  display: block;
  color: rgba(255,255,255,.6);
  margin-top: 6px;
}

.item-historico-prova span {
  color: #a78bfa;
  font-size: 24px;
  font-weight: 900;
}

.prova-regras {
  display: none;
}

.prova-regras.active {
  display: grid;
  gap: 14px;
}

.regra-card p {
  color: rgba(255,255,255,.72);
}

/* MOBILE */
@media (max-width: 900px) {
  .prova-container {
    padding: 20px;
  }

  .prova-header {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .prova-header h2 {
    font-size: 30px;
  }

  .prova-topo-execucao,
  .prova-acoes,
  .item-historico-prova {
    flex-direction: column;
  }

  .resultado-detalhes {
    grid-template-columns: 1fr;
  }
}
/* AJUSTE MENU LATERAL - PROVA */

.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: 0;
  padding-left: 0;
}

.prova-container {
  max-width: 100%;
  padding: 32px 40px;
}

/* MOBILE */
@media (max-width: 900px) {
  .dashboard-layout {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: -290px;
    top: 0;
    bottom: 0;
    z-index: 9999;
    transition: 0.25s ease;
  }

  .sidebar.active {
    left: 0;
  }

  .main-content {
    width: 100%;
    padding: 18px;
  }

  .prova-container {
    padding: 20px 10px;
  }
}
.prova-sidebar {
  width: 250px;
  min-width: 250px;
}
/* ===============================
   BOTÃO MENU LATERAL
================================ */

.toggle-sidebar-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000;

  width: 52px;
  height: 52px;

  border: none;
  border-radius: 16px;

  cursor: pointer;

  background:
    linear-gradient(135deg, #8b5cf6, #5b21b6);

  color: #fff;
  font-size: 24px;
  font-weight: 900;

  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    0 0 25px rgba(139,92,246,.35);

  transition: .22s ease;
}

.toggle-sidebar-btn:hover {
  transform: scale(1.06);
}

/* ===============================
   ESCONDER SIDEBAR
================================ */

.sidebar {
  transition:
    transform .28s ease,
    opacity .28s ease;
}

.sidebar-hidden {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

/* CONTEÚDO EXPANDIDO */

.main-content {
  transition: .28s ease;
}

.sidebar-collapsed .main-content {
  width: 100%;
  margin-left: 0;
}

/* DESKTOP */

@media (min-width: 901px) {
  .sidebar-collapsed .prova-container {
    max-width: 1500px;
    padding-left: 90px;
  }
}

/* MOBILE */

@media (max-width: 900px) {
  .toggle-sidebar-btn {
    top: 15px;
    left: 15px;

    width: 48px;
    height: 48px;

    font-size: 20px;
  }
}
/* ======================================================
   MODAL PREMIUM PROVAS
====================================================== */

#modalPremium {
  position: fixed;
  inset: 0;
  z-index: 100000;

  background:
    radial-gradient(circle at top, rgba(139,92,246,.18), transparent 40%),
    rgba(0,0,0,.82);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

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

  opacity: 0;
  visibility: hidden;

  transition: .18s ease;
}

#modalPremium.active {
  opacity: 1;
  visibility: visible;
}

.modal-premium-box {
  width: min(92%, 430px);

  background:
    linear-gradient(180deg,
      rgba(24,24,35,.98),
      rgba(10,10,18,.98));

  border:
    1px solid rgba(139,92,246,.28);

  border-radius: 30px;

  padding: 38px 30px;

  text-align: center;

  box-shadow:
    0 25px 70px rgba(0,0,0,.6),
    0 0 40px rgba(139,92,246,.22);

  transform: scale(.92);
  transition: .2s ease;
}

#modalPremium.active .modal-premium-box {
  transform: scale(1);
}

.modal-premium-icon {
  width: 84px;
  height: 84px;

  margin: 0 auto 18px;

  display: grid;
  place-items: center;

  border-radius: 24px;

  font-size: 38px;

  background:
    linear-gradient(135deg,
      #8b5cf6,
      #5b21b6);

  box-shadow:
    0 0 30px rgba(139,92,246,.45);
}

.modal-premium-box h2 {
  font-size: 30px;
  color: #fff;
  margin-bottom: 12px;
}

.modal-premium-box p {
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin-bottom: 28px;
}

.modal-premium-box button {
  width: 100%;

  border: none;
  cursor: pointer;

  padding: 16px;

  border-radius: 18px;

  background:
    linear-gradient(135deg,
      #8b5cf6,
      #5b21b6);

  color: #fff;

  font-weight: 900;
  font-size: 15px;

  transition: .18s ease;
}

.modal-premium-box button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 30px rgba(139,92,246,.32);
}
/* ======================================================
   NAV TOPO - PROVA.HTML
====================================================== */

.prova-top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;

  margin-bottom: 28px;
  padding: 18px;

  border-radius: 24px;

  background:
    linear-gradient(
      180deg,
      rgba(20,20,32,.96),
      rgba(10,10,18,.96)
    );

  border: 1px solid rgba(139,92,246,.18);

  box-shadow:
    0 20px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.prova-top-nav button {
  position: relative;

  border: none;
  cursor: pointer;

  padding: 14px 20px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.16),
      rgba(91,33,182,.12)
    );

  color: #fff;

  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2px;

  border: 1px solid rgba(139,92,246,.18);

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

  overflow: hidden;
}

.prova-top-nav button::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.08),
      transparent
    );

  transform: translateX(-100%);
  transition: .5s ease;
}

.prova-top-nav button:hover::before {
  transform: translateX(100%);
}

.prova-top-nav button:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #5b21b6
    );

  border-color: rgba(167,139,250,.45);

  box-shadow:
    0 12px 28px rgba(139,92,246,.28),
    0 0 20px rgba(139,92,246,.16);
}

.prova-top-nav button:active {
  transform: scale(.98);
}

/* BOTÃO SAIR */

.prova-top-nav #btnSair {
  margin-left: auto;

  background:
    linear-gradient(
      135deg,
      rgba(239,68,68,.18),
      rgba(127,29,29,.18)
    );

  border: 1px solid rgba(239,68,68,.22);
}

.prova-top-nav #btnSair:hover {
  background:
    linear-gradient(
      135deg,
      #ef4444,
      #7f1d1d
    );

  box-shadow:
    0 12px 28px rgba(239,68,68,.25);
}

/* MOBILE */

@media (max-width: 768px) {
  .prova-top-nav {
    padding: 14px;
    gap: 10px;
  }

  .prova-top-nav button {
    flex: 1 1 calc(50% - 10px);

    padding: 13px 14px;

    font-size: 13px;
    border-radius: 16px;
  }

  .prova-top-nav #btnSair {
    flex: 1 1 100%;
  }
}/* ======================================================
   FIX NAV TOPO PROVA
====================================================== */

.prova-top-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;

  margin-bottom: 30px !important;
  padding: 16px !important;

  border-radius: 22px !important;

  background:
    linear-gradient(
      180deg,
      rgba(18,18,30,.96),
      rgba(10,10,18,.96)
    ) !important;

  border: 1px solid rgba(139,92,246,.18) !important;

  box-shadow:
    0 15px 40px rgba(0,0,0,.28) !important;
}

.prova-top-nav button {
  appearance: none !important;
  -webkit-appearance: none !important;

  border: none !important;
  outline: none !important;

  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.22),
      rgba(91,33,182,.18)
    ) !important;

  color: #fff !important;

  padding: 14px 20px !important;

  border-radius: 18px !important;

  font-size: 14px !important;
  font-weight: 800 !important;

  cursor: pointer !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  min-width: 150px !important;

  border: 1px solid rgba(139,92,246,.2) !important;

  transition: .18s ease !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.prova-top-nav button:hover {
  transform: translateY(-2px) !important;

  background:
    linear-gradient(
      135deg,
      #8b5cf6,
      #5b21b6
    ) !important;

  box-shadow:
    0 12px 28px rgba(139,92,246,.28) !important;
}

.prova-top-nav #btnSair {
  margin-left: auto !important;

  background:
    linear-gradient(
      135deg,
      rgba(239,68,68,.2),
      rgba(127,29,29,.18)
    ) !important;
}

.prova-top-nav #btnSair:hover {
  background:
    linear-gradient(
      135deg,
      #ef4444,
      #7f1d1d
    ) !important;
}

/* REMOVE CSS ANTIGO */

.prova-top-nav button img,
.prova-top-nav button::before,
.prova-top-nav button::after {
  display: none !important;
  content: none !important;
}

/* MOBILE */

@media (max-width: 768px) {
  .prova-top-nav {
    gap: 10px !important;
  }

  .prova-top-nav button {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: auto !important;
  }

  .prova-top-nav #btnSair {
    flex: 1 1 100% !important;
  }
}
/* ======================================================
   ARQUIVOS.HTML - TURMA BLACK
====================================================== */

.arquivos-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.18), transparent 35%),
    #07070d;
  color: #fff;
}

.arquivos-page {
  width: 100%;
  min-height: 100vh;
  padding: 28px;
}

.arquivos-top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(15,15,25,.92);
  border: 1px solid rgba(139,92,246,.18);
}

.arquivos-top-nav button {
  border: none;
  cursor: pointer;
  padding: 14px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(91,33,182,.18));
  color: #fff;
  font-weight: 900;
}

.arquivos-top-nav button:hover {
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
}

.arquivos-top-nav #btnSair {
  margin-left: auto;
  background: linear-gradient(135deg, rgba(239,68,68,.22), rgba(127,29,29,.18));
}

.arquivos-content {
  max-width: 1400px;
  margin: 0 auto;
}

.arquivos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}

.arquivos-tag {
  color: #a78bfa;
  font-weight: 900;
  letter-spacing: 1px;
}

.arquivos-header h1 {
  font-size: 42px;
  margin: 8px 0;
}

.arquivos-header p {
  color: rgba(255,255,255,.72);
}

.arquivos-header-card {
  min-width: 180px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(139,92,246,.24), rgba(255,255,255,.05));
  border: 1px solid rgba(139,92,246,.28);
}

.arquivos-header-card span {
  display: block;
  color: rgba(255,255,255,.65);
}

.arquivos-header-card strong {
  font-size: 34px;
}

.arquivos-tabs,
.arquivos-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.arquivo-tab,
.arquivo-filtro {
  border: 1px solid rgba(139,92,246,.24);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 12px 18px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 900;
}

.arquivo-tab.active,
.arquivo-filtro.active,
.arquivo-tab:hover,
.arquivo-filtro:hover {
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
}

.arquivos-search-box {
  margin-bottom: 18px;
}

.arquivos-search-box input {
  width: 100%;
  padding: 18px 20px;
  border-radius: 20px;
  border: 1px solid rgba(139,92,246,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}

.arquivos-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) 1fr;
  gap: 24px;
}

.arquivos-lista {
  display: grid;
  gap: 16px;
  align-content: start;
}

.arquivo-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.20), transparent 45%),
    rgba(18,18,30,.96);
  border: 1px solid rgba(139,92,246,.20);
  cursor: pointer;
}

.arquivo-card.concluido {
  border-color: rgba(34,197,94,.35);
}

.arquivo-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  flex-shrink: 0;
}

.arquivo-info h3 {
  margin: 0 0 8px;
}

.arquivo-info p {
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.arquivo-info span,
.arquivo-check {
  display: block;
  color: #a78bfa;
  font-size: 13px;
  margin-top: 8px;
}

.arquivo-acoes {
  margin-top: 14px;
}

.arquivo-acoes button,
.btn-concluir-arquivo {
  border: none;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6);
  color: #fff;
  font-weight: 900;
}

.arquivo-leitor {
  min-height: 520px;
  padding: 32px;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(139,92,246,.18), transparent 45%),
    rgba(18,18,30,.96);
  border: 1px solid rgba(139,92,246,.20);
}

.leitor-badge {
  display: inline-block;
  color: #a78bfa;
  font-weight: 900;
  margin-bottom: 14px;
}

.arquivo-leitor h2 {
  font-size: 34px;
  margin: 8px 0 18px;
}

.arquivo-leitor p {
  color: rgba(255,255,255,.76);
  line-height: 1.8;
}

.leitor-destaque {
  margin: 22px 0;
  padding: 18px;
  border-radius: 20px;
  background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.25);
}

.video-aula-box {
  margin: 22px 0;
  border-radius: 24px;
  overflow: hidden;
  background: #05050a;
  border: 1px solid rgba(139,92,246,.25);
  min-height: 310px;
}

.video-aula-box iframe {
  width: 100%;
  height: 380px;
  border: none;
}

.video-placeholder {
  min-height: 310px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
}

.video-placeholder span {
  font-size: 60px;
}

.video-placeholder strong {
  display: block;
  font-size: 24px;
  margin-top: 12px;
}

.video-placeholder p {
  color: rgba(255,255,255,.65);
}

.arquivos-empty {
  padding: 30px;
  text-align: center;
  border-radius: 24px;
  background: rgba(255,255,255,.05);
}

@media (max-width: 900px) {
  .arquivos-page {
    padding: 18px;
  }

  .arquivos-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .arquivos-header h1 {
    font-size: 32px;
  }

  .arquivos-layout {
    grid-template-columns: 1fr;
  }

  .arquivos-top-nav #btnSair {
    margin-left: 0;
  }

  .arquivos-top-nav button {
    flex: 1 1 calc(50% - 10px);
  }
}
/* ===============================
   CAMUFLADOS.HTML - PREMIUM
   =============================== */

.modulo-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(132, 0, 255, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255, 0, 170, 0.12), transparent 30%),
    #07070d;
  color: #fff;
  font-family: "Inter", Arial, sans-serif;
}

.camuflados-page {
  width: min(1180px, 92%);
  margin: 0 auto;
  padding: 34px 0 60px;
}

.camuflados-header {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.btn-voltar {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 12px 18px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 800;
  backdrop-filter: blur(12px);
  transition: .25s ease;
}

.btn-voltar:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7c3cff, #d946ef);
  box-shadow: 0 12px 30px rgba(124, 60, 255, .28);
}

.tag-modulo {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(124, 60, 255, .16);
  border: 1px solid rgba(180, 120, 255, .22);
  color: #d7b8ff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.camuflados-header h1 {
  margin: 12px 0 8px;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1;
}

.camuflados-header p,
.section-title p,
.hero-card p,
.aula-item p,
.resultado-camuflado p {
  color: #b9b9c9;
  line-height: 1.7;
}

.camuflados-hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  margin-bottom: 22px;
}

.hero-card,
.camuflados-box,
.resultado-camuflado,
.aula-camuflados {
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border-radius: 28px;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}

.hero-card {
  padding: 26px;
}

.hero-card h2,
.section-title h2,
.resultado-camuflado h2,
.aula-camuflados h2 {
  margin: 0 0 10px;
}

.hero-card.destaque {
  background:
    linear-gradient(135deg, rgba(124, 60, 255, .24), rgba(217, 70, 239, .12)),
    rgba(255,255,255,.05);
}

.camuflados-box,
.resultado-camuflado,
.aula-camuflados {
  padding: 26px;
  margin-top: 20px;
}

.camuflados-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.camuflado-card {
  min-height: 96px;
  border: 1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at top left, rgba(124, 60, 255, .22), transparent 55%),
    rgba(12, 12, 22, .86);
  color: #fff;
  border-radius: 22px;
  padding: 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 46px 24px 1fr;
  align-items: center;
  gap: 10px;
  transition: .25s ease;
  text-align: left;
}

.camuflado-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(194, 132, 252, .55);
  box-shadow: 0 18px 42px rgba(124, 60, 255, .24);
}

.camuflado-numero {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  font-weight: 950;
  background: linear-gradient(135deg, #7c3cff, #d946ef);
  box-shadow: 0 0 25px rgba(124, 60, 255, .45);
}

.camuflado-seta {
  color: #c084fc;
  font-size: 1.25rem;
  font-weight: 900;
}

.camuflado-lista,
.resultado-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.camuflado-lista span,
.resultado-numeros span {
  min-width: 40px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-weight: 900;
}

.resultado-camuflado {
  position: relative;
  overflow: hidden;
}

.resultado-camuflado::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(217,70,239,.18), transparent 38%);
  pointer-events: none;
}

.resultado-camuflado > * {
  position: relative;
}

.resultado-numeros {
  margin: 18px 0;
}

.resultado-numeros span {
  width: 56px;
  height: 56px;
  font-size: 1.2rem;
  background: linear-gradient(135deg, #7c3cff, #d946ef);
  box-shadow: 0 0 28px rgba(124, 60, 255, .36);
}

.analise-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.09);
}

.analise-box h3 {
  margin: 0 0 8px;
  color: #e9d5ff;
}

.aula-camuflados {
  display: grid;
  gap: 14px;
}

.aula-item {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
}

.aula-item h3 {
  margin: 0 0 8px;
  color: #f1e8ff;
}

@media (max-width: 760px) {
  .camuflados-header {
    flex-direction: column;
  }

  .camuflados-hero {
    grid-template-columns: 1fr;
  }

  .camuflado-card {
    grid-template-columns: 42px 20px 1fr;
  }

  .camuflados-page {
    width: min(94%, 1180px);
    padding-top: 22px;
  }
}
/* ===============================
   RACE CAMUFLADOS
   =============================== */

.race-camuflados-box {
  margin-top: 20px;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}

.race-camuflados-area {
  position: relative;
  width: min(620px, 100%);
  margin: 24px auto 18px;
  border-radius: 28px;
  padding: 16px;
  background:
    radial-gradient(circle at center, rgba(124, 60, 255, .22), transparent 55%),
    rgba(0, 0, 0, .28);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}

.race-camuflados-img {
  width: 100%;
  display: block;
  border-radius: 22px;
  user-select: none;
  pointer-events: none;
}

.marcadores-camuflados {
  position: absolute;
  inset: 16px;
  pointer-events: none;
}

.marcador-camuflado {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 31px;
  height: 31px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-size: .78rem;
  font-weight: 950;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 0 4px rgba(168,85,247,.2),
    0 0 24px rgba(236,72,153,.55);
  z-index: 5;
}

.marcador-camuflado.base {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #facc15, #f97316);
  color: #1a1200;
  box-shadow:
    0 0 0 5px rgba(250,204,21,.23),
    0 0 30px rgba(250,204,21,.65);
}

.btn-limpar-race-camuflados {
  display: block;
  margin: 10px auto 0;
  border: 0;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7c3cff, #d946ef);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: .25s ease;
}

.btn-limpar-race-camuflados:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(124,60,255,.35);
}
/* =========================================
   BLOQUEIO / NÃO LOGADO
========================================= */

.bloqueio-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at top, rgba(139, 92, 246, 0.18), transparent 35%),
    rgba(0, 0, 0, 0.88);

  backdrop-filter: blur(14px);
  animation: fadeBloqueio .35s ease;
}

.bloqueio-card {
  width: min(92%, 470px);
  padding: 34px;

  border-radius: 28px;

  border: 1px solid rgba(255,255,255,.08);

  background:
    linear-gradient(180deg,
      rgba(22,22,32,.98),
      rgba(10,10,18,.98));

  box-shadow:
    0 0 0 1px rgba(139,92,246,.12),
    0 25px 80px rgba(0,0,0,.65),
    0 0 45px rgba(139,92,246,.18);

  position: relative;
  overflow: hidden;
}

.bloqueio-card::before {
  content: "";

  position: absolute;
  inset: -2px;

  background:
    linear-gradient(
      135deg,
      rgba(139,92,246,.45),
      rgba(217,70,239,.15),
      transparent,
      rgba(139,92,246,.25)
    );

  opacity: .45;
  pointer-events: none;
}

.bloqueio-topo {
  display: flex;
  align-items: center;
  gap: 16px;

  margin-bottom: 22px;
}

.bloqueio-icone {
  min-width: 68px;
  height: 68px;

  border-radius: 22px;

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

  font-size: 2rem;

  background:
    linear-gradient(135deg,
      #7c3aed,
      #d946ef);

  box-shadow:
    0 0 35px rgba(139,92,246,.45);
}

.bloqueio-titulo {
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  margin: 0;
}

.bloqueio-sub {
  color: #a1a1aa;
  margin-top: 5px;
  line-height: 1.5;
}

.bloqueio-alerta {
  margin-top: 18px;

  padding: 18px;

  border-radius: 18px;

  background:
    rgba(139,92,246,.08);

  border:
    1px solid rgba(139,92,246,.18);

  color: #d4d4d8;

  line-height: 1.6;
}

.bloqueio-acoes {
  display: flex;
  gap: 14px;
  margin-top: 28px;
}

.bloqueio-btn {
  flex: 1;

  border: 0;
  outline: none;

  height: 52px;

  border-radius: 16px;

  font-weight: 800;
  font-size: .96rem;

  cursor: pointer;

  transition: .25s ease;
}

.bloqueio-btn.login {
  background:
    linear-gradient(135deg,
      #7c3aed,
      #d946ef);

  color: white;

  box-shadow:
    0 10px 35px rgba(139,92,246,.35);
}

.bloqueio-btn.login:hover {
  transform: translateY(-3px) scale(1.02);

  box-shadow:
    0 15px 40px rgba(139,92,246,.45);
}

.bloqueio-btn.voltar {
  background:
    rgba(255,255,255,.05);

  border:
    1px solid rgba(255,255,255,.08);

  color: #fff;
}

.bloqueio-btn.voltar:hover {
  background:
    rgba(255,255,255,.09);

  transform: translateY(-2px);
}

@keyframes fadeBloqueio {
  from {
    opacity: 0;
    transform: scale(1.03);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* MOBILE */

@media (max-width: 700px) {

  .bloqueio-card {
    padding: 26px;
    border-radius: 24px;
  }

  .bloqueio-topo {
    flex-direction: column;
    text-align: center;
  }

  .bloqueio-acoes {
    flex-direction: column;
  }

  .bloqueio-titulo {
    font-size: 1.7rem;
  }

}
/* =========================
   RACE BASE MAIS ESCURA
========================= */

.race-img,
.roleta-img {
  filter:
    brightness(0.45)
    contrast(1.05)
    saturate(0.7);
    
  opacity: 0.75;
  transition: 0.3s ease;
}

/* leve camada escura */
.race-area::before,
.roleta-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle,
      rgba(0,0,0,0.15) 0%,
      rgba(0,0,0,0.45) 100%
    );

  pointer-events: none;
  z-index: 1;
}

/* imagem abaixo */
.race-img,
.roleta-img {
  position: relative;
  z-index: 0;
}

/* números destacados ficam ACIMA */
.marcador,
.ficha,
.numero-marcado {
  position: absolute;
  z-index: 5;

  background: rgba(168, 85, 247, 0.22);

  border: 2px solid #c084fc;

  box-shadow:
    0 0 8px #a855f7,
    0 0 18px #9333ea,
    0 0 28px rgba(168,85,247,.9);

  animation: brilhoNumero 1.5s infinite ease-in-out;
}

/* efeito pulsando */
@keyframes brilhoNumero {
  0%,100% {
    transform: scale(1);
    opacity: .9;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}
/* =========================================
   DASHBOARD FREE
========================================= */

.free-body {
  margin: 0;
  background: #090909;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR */

.free-sidebar {
  width: 260px;
  background: #111;
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.free-logo h2 {
  margin: 0;
  font-size: 28px;
  color: #fff;
}

.free-logo span {
  color: #888;
}

.free-logo p {
  color: #777;
  margin-top: 5px;
  font-size: 14px;
}

.free-menu {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 40px;
}

.free-menu a,
.free-menu button {
  background: #181818;
  border: 1px solid rgba(255,255,255,0.04);
  color: #aaa;
  text-decoration: none;
  padding: 14px;
  border-radius: 14px;
  transition: 0.3s;
  cursor: pointer;
  font-size: 15px;
}

.free-menu a:hover,
.free-menu button:hover,
.free-menu .active {
  background: #222;
  color: #fff;
  transform: translateX(4px);
}

/* MAIN */

.free-main {
  flex: 1;
  padding: 35px;
  overflow-y: auto;
}

/* HEADER */

.free-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
}

.free-header h1 {
  margin: 0;
  font-size: 32px;
}

.free-header p {
  margin-top: 8px;
  color: #888;
}

.free-whatsapp {
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 14px;
  transition: 0.3s;
}

.free-whatsapp:hover {
  transform: scale(1.05);
  background: #2a2a2a;
}

/* HERO */

.free-hero {
  background:
    linear-gradient(rgba(10,10,10,0.75), rgba(10,10,10,0.9)),
    url("https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=1600&auto=format&fit=crop")
    center/cover;

  border-radius: 25px;
  padding: 45px;
  margin-bottom: 35px;
  border: 1px solid rgba(255,255,255,0.05);
}

.free-badge {
  display: inline-block;
  background: #2a2a2a;
  color: #ccc;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
  font-size: 14px;
}

.free-hero h2 {
  margin: 0;
  font-size: 42px;
  max-width: 700px;
}

.free-hero p {
  margin-top: 18px;
  max-width: 700px;
  color: #bbb;
  line-height: 1.6;
}

.free-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.free-actions a {
  text-decoration: none;
  padding: 15px 22px;
  border-radius: 14px;
  font-weight: bold;
  transition: 0.3s;
}

.free-actions a:first-child {
  background: #444;
  color: #fff;
}

.free-actions .secondary {
  background: transparent;
  border: 1px solid #444;
  color: #bbb;
}

.free-actions a:hover {
  transform: translateY(-2px);
}

/* CARDS */

.free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.free-card {
  background: #121212;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}

.free-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(120,120,120,0.08);
  backdrop-filter: blur(3px);
}

.free-card:hover {
  transform: translateY(-4px);
}

.free-card span,
.free-card h3,
.free-card p,
.free-card strong {
  position: relative;
  z-index: 1;
}

.free-card span {
  font-size: 38px;
}

.free-card h3 {
  margin-top: 20px;
  font-size: 22px;
}

.free-card p {
  color: #888;
  line-height: 1.5;
}

.free-card strong {
  display: inline-block;
  margin-top: 18px;
  color: #bbb;
}

/* WHATSAPP FLUTUANTE */

.whatsapp-float {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 65px;
  height: 65px;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  text-decoration: none;
  z-index: 999;
  transition: 0.3s;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  background: #2c2c2c;
}

/* RESPONSIVO */

@media (max-width: 900px) {

  .free-body {
    flex-direction: column;
  }

  .free-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .free-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .free-hero h2 {
    font-size: 30px;
  }

}
/* =========================================
   ESTUDO FREE
========================================= */

.study-free-alert {
  background: #121212;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
  padding: 30px;
  margin-bottom: 35px;
}

.study-free-alert h2 {
  margin: 0;
  font-size: 28px;
}

.study-free-alert p {
  margin-top: 12px;
  color: #999;
  line-height: 1.6;
}

/* GRID */

.study-free-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* CARD */

.study-free-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(25,25,25,1) 0%,
    rgba(12,12,12,1) 100%
  );

  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 26px;
  padding: 30px;
  min-height: 280px;

  transition: 0.3s;
}

.study-free-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.12);
}

/* FUNDO BLOQUEADO */

.study-free-card::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      rgba(10,10,10,0.72),
      rgba(10,10,10,0.9)
    ),
    url("https://images.unsplash.com/photo-1511512578047-dfb367046420?q=80&w=1600&auto=format&fit=crop")
    center/cover;

  filter: grayscale(1) blur(2px);
  opacity: 0.28;
}

/* CADEADO */

.lock-bg {
  position: absolute;
  right: 15px;
  top: 10px;

  font-size: 90px;
  opacity: 0.06;

  pointer-events: none;
}

/* CONTEÚDO */

.study-free-card span,
.study-free-card h3,
.study-free-card p,
.study-free-card button {
  position: relative;
  z-index: 2;
}

.study-free-card span {
  font-size: 42px;
  display: inline-block;
}

.study-free-card h3 {
  margin-top: 18px;
  margin-bottom: 12px;
  font-size: 26px;
  color: #fff;
}

.study-free-card p {
  color: #9d9d9d;
  line-height: 1.6;
  font-size: 15px;
}

/* BOTÃO */

.study-free-card button {
  margin-top: 28px;

  width: 100%;
  padding: 14px;

  border: none;
  border-radius: 14px;

  background: #2d2d2d;
  color: #fff;

  font-size: 15px;
  font-weight: bold;

  cursor: pointer;
  transition: 0.3s;
}

.study-free-card button:hover {
  background: #444;
  transform: scale(1.02);
}

/* RESPONSIVO */

@media (max-width: 700px) {

  .study-free-card {
    min-height: auto;
  }

  .study-free-card h3 {
    font-size: 22px;
  }

}
/* =========================================
   ASSINATURA
========================================= */

.assinatura-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

/* CARD */

.assinatura-card {
  width: 100%;
  max-width: 650px;

  background:
    linear-gradient(
      180deg,
      rgba(22,22,22,1) 0%,
      rgba(10,10,10,1) 100%
    );

  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 32px;

  padding: 40px;

  position: relative;
  overflow: hidden;
}

/* BRILHO */

.assinatura-card::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.06),
      transparent 40%
    );

  pointer-events: none;
}

/* BADGE */

.premium-badge {
  display: inline-block;

  background: #2d2d2d;
  color: #fff;

  padding: 10px 18px;

  border-radius: 999px;

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

  margin-bottom: 22px;
}

/* TITULO */

.assinatura-top h2 {
  margin: 0;
  font-size: 42px;
  color: #fff;
}

.assinatura-top p {
  margin-top: 18px;
  color: #9f9f9f;
  line-height: 1.6;
}

/* PREÇO */

.assinatura-preco {
  margin-top: 25px;
}

.assinatura-preco strong {
  font-size: 56px;
  color: #fff;
}

.assinatura-preco small {
  color: #888;
  font-size: 18px;
}

/* BENEFÍCIOS */

.assinatura-beneficios {
  margin-top: 35px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 18px;
}

.assinatura-beneficios div {
  background: rgba(255,255,255,0.03);

  border: 1px solid rgba(255,255,255,0.04);

  padding: 16px;
  border-radius: 16px;

  color: #d1d1d1;
}

/* BOTÕES */

.assinatura-botoes {
  display: flex;
  gap: 16px;

  margin-top: 40px;

  flex-wrap: wrap;
}

.btn-premium,
.btn-secundario {
  flex: 1;

  text-align: center;
  text-decoration: none;

  padding: 16px;

  border-radius: 16px;

  font-weight: bold;

  transition: 0.3s;
}

.btn-premium {
  background: #3b3b3b;
  color: #fff;
}

.btn-premium:hover {
  background: #555;
  transform: translateY(-2px);
}

.btn-secundario {
  border: 1px solid rgba(255,255,255,0.08);
  color: #ccc;
}

.btn-secundario:hover {
  background: rgba(255,255,255,0.04);
}

/* RESPONSIVO */

@media (max-width: 700px) {

  .assinatura-card {
    padding: 28px;
  }

  .assinatura-top h2 {
    font-size: 32px;
  }

  .assinatura-preco strong {
    font-size: 42px;
  }

}