/* Coterra - Tema Profissional Premium
   Camada visual somente: não altera PHP, banco, rotas ou regras de negócio. */
:root {
  --primary-dark: #061B1A !important;
  --secondary-dark: #0A2422 !important;
  --cyan-bright: #18D6B0 !important;
  --cyan-glow: #12BFA0 !important;
  --cyan-dark: #0B8F7A !important;
  --dark-teal: #0E302C !important;
  --card-bg: rgba(8, 31, 29, .88) !important;
  --border-cyan: #18D6B0 !important;
  --text-cyan: #18D6B0 !important;
  --text-light: #B8D2CD !important;
  --text-white: #F2F8F6 !important;
  --gray-inactive: #718984 !important;
  --success-green: #18D6B0 !important;
  --accent-color: #18D6B0 !important;
}

html, body {
  background-color: #061B1A !important;
}

body {
  background: radial-gradient(circle at 50% -10%, rgba(24,214,176,.12), transparent 38%),
              linear-gradient(180deg, #0A2926 0%, #061B1A 52%, #041211 100%) !important;
  color: var(--text-white) !important;
}

/* Tipografia e títulos */
h1, h2, h3, h4, h5, h6,
.header-title, .menu-title, .section-label, .form-title,
.category-title, .intro-title, .info-title, .instructions-title,
.checkin-title, .buyers-title, .investors-title {
  color: var(--text-cyan) !important;
  text-shadow: 0 0 14px rgba(24,214,176,.28) !important;
}

p, .text, .description, .card-description, .form-text, .info-text,
.empty-text, .empty-subtitle, .footer-text {
  color: var(--text-light) !important;
}

/* Nomes, etiquetas e valores: mesma cor de identidade */
.circle-label, .menu-item, .balance-label, .input-label,
.detail-label, .earnings-label, .card-amount-label, .config-label,
.dv-label, .h-name, .plan-name, .event-name, .form-label,
.info-label, .checkin-subtitle, .header-subtitle,
.card-date, .card-description {
  color: var(--text-light) !important;
}

.balance-amount, .amount, .card-amount-value, .card-value,
.detail-value, .earnings-value, .event-price, .plan-price,
.confirm-price, .confirm-value, .quick-value, .h-value,
.info-value, .depo-values, .buy-button .price, .price,
.value, .money, .total, .income, .profit, .saldo,
.giros-atual-label, .giros-label {
  color: var(--text-cyan) !important;
  text-shadow: 0 0 12px rgba(24,214,176,.24) !important;
}

/* Cartões e blocos */
.card, .balance-card, .checkin-card, .event-card, .contact-card,
.info-card, .instructions-card, .chart-card, .config-card,
.depo-card, .confirmed-card, .giros-card, .products-card,
.plan-card, .product-card {
  background: rgba(8,31,29,.88) !important;
  border-color: rgba(24,214,176,.42) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.20), 0 0 18px rgba(24,214,176,.08) !important;
}

/* Bordas e elementos de navegação */
.main-header, .main-banner, .circle-icon, .quick-button,
.input-wrapper, .history-button, .menu-toggle, .side-menu,
.tabbar-nav, .action-btn, .buy-button, .confirm-btn,
.contact-button, .copy-button, .btn-copiar {
  border-color: rgba(24,214,176,.82) !important;
}

.menu-item:hover, .history-button:hover, .quick-button:hover,
.contact-button:hover, .copy-button:hover {
  color: #18D6B0 !important;
  border-color: #18D6B0 !important;
}

/* Botões principais */
.action-btn, .quick-button.active, .buy-button, .confirm-btn,
.confirm-button, .contact-button, .copy-button, .btn-primary,
.btn-success, .btn-success-bspaybr, .btn-save {
  background: linear-gradient(135deg, #18D6B0 0%, #0FAF95 100%) !important;
  color: #05201D !important;
  border-color: #18D6B0 !important;
  box-shadow: 0 8px 24px rgba(24,214,176,.18) !important;
}

.action-btn:hover, .buy-button:hover, .confirm-btn:hover,
.confirm-button:hover, .contact-button:hover, .copy-button:hover {
  box-shadow: 0 10px 28px rgba(24,214,176,.30) !important;
}

/* Inputs */
input, select, textarea {
  background: rgba(4,20,19,.72) !important;
  color: #F2F8F6 !important;
  border-color: rgba(24,214,176,.42) !important;
}
input::placeholder, textarea::placeholder {
  color: #76938D !important;
}
input:focus, select:focus, textarea:focus {
  border-color: #18D6B0 !important;
  box-shadow: 0 0 0 3px rgba(24,214,176,.10) !important;
}

/* Ícones */
.circle-icon i, .menu-item i, .balance-icon i,
.tab-item.tab-active, .tab-item.tab-active .tab-text,
.tab-item.tab-active .tab-icon {
  color: #18D6B0 !important;
  fill: #18D6B0 !important;
}

/* Barra inferior */
.tabbar-nav {
  background: rgba(5,24,23,.96) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.24), 0 0 22px rgba(24,214,176,.08) !important;
}
.tab-item { color: #718984 !important; }
.tab-item.tab-active { color: #18D6B0 !important; }
.tab-item:hover { color: #B8D2CD !important; }

/* Banner / ticker */
.main-banner {
  box-shadow: 0 10px 34px rgba(0,0,0,.22), 0 0 24px rgba(24,214,176,.10) !important;
}
.announcement-ticker {
  background: rgba(5,24,23,.94) !important;
  border-color: rgba(24,214,176,.55) !important;
  color: #18D6B0 !important;
}

/* Modais e menus */
.modal-content, .modal-dialog, .popup-content,
.side-menu, .menu-overlay + * {
  border-color: rgba(24,214,176,.45) !important;
}
.side-menu {
  background: rgba(5,24,23,.98) !important;
}

/* Estados sem alterar a semântica de erro/alerta */
.status-success, .success, .approved, .pago { color: #18D6B0 !important; }

/* Reduz brilho excessivo e deixa o conjunto mais sóbrio */
.text-shadow, .glow, .neon {
  text-shadow: 0 0 12px rgba(24,214,176,.22) !important;
}

@media (max-width: 768px) {
  .main-container { padding-left: 14px !important; padding-right: 14px !important; }
  .header-title { letter-spacing: 1px !important; }
}

/* ================================================================
   COTERRA — PREMIUM UI V2
   Camada exclusivamente visual. Não altera lógica, banco ou rotas.
   Hierarquia: texto neutro + valores financeiros em dourado + ações em teal.
   ================================================================ */
:root {
  --ui-bg-0: #061412 !important;
  --ui-bg-1: #0A1F1D !important;
  --ui-bg-2: #0E2926 !important;
  --ui-surface: rgba(10, 29, 27, .94) !important;
  --ui-surface-2: rgba(15, 38, 35, .92) !important;
  --ui-border: rgba(31, 214, 180, .34) !important;
  --ui-border-strong: rgba(31, 214, 180, .70) !important;
  --ui-primary: #20D6B3 !important;
  --ui-primary-deep: #0C9D86 !important;
  --ui-gold: #F3C969 !important;
  --ui-gold-soft: #E8D7A1 !important;
  --ui-heading: #F5F8F7 !important;
  --ui-text: #C3D2CF !important;
  --ui-muted: #7F9691 !important;
  --ui-danger: #FF7272 !important;
  --ui-success: #54D6A3 !important;
}

html, body {
  background: var(--ui-bg-0) !important;
}

body {
  color: var(--ui-text) !important;
  background:
    radial-gradient(circle at 50% -15%, rgba(32,214,179,.09), transparent 38%),
    radial-gradient(circle at 0% 45%, rgba(243,201,105,.025), transparent 30%),
    linear-gradient(180deg, var(--ui-bg-2) 0%, var(--ui-bg-1) 48%, var(--ui-bg-0) 100%) !important;
}

/* Hierarquia tipográfica: títulos claros, textos neutros. */
h1, h2, h3, h4, h5, h6,
.header-title, .menu-title, .section-label, .form-title,
.category-title, .intro-title, .info-title, .instructions-title,
.checkin-title, .buyers-title, .investors-title,
.product-name, .event-name, .card-title, .modal-title {
  color: var(--ui-heading) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

p, .text, .description, .card-description, .form-text,
.info-text, .empty-text, .empty-subtitle, .footer-text,
.circle-label, .menu-item, .balance-label, .input-label,
.detail-label, .earnings-label, .card-amount-label, .config-label,
.dv-label, .h-name, .plan-name, .form-label, .info-label,
.checkin-subtitle, .header-subtitle, .card-date, .stat-label,
.product-name, .stat-label {
  color: var(--ui-text) !important;
}

/* VALORES: propositalmente diferentes das letras para leitura imediata. */
.balance-amount, .amount, .card-amount-value, .card-value,
.detail-value, .earnings-value, .event-price, .plan-price,
.confirm-price, .confirm-value, .quick-value, .h-value,
.info-value, .depo-values, .buy-button .price, .price,
.value, .money, .total, .income, .profit, .saldo,
.product-price, .stat-value, .product-stats .stat-value,
.giros-atual-label, .giros-label, .resumo-value,
.wallet-value, .balance-value, .amount-value, .total-value,
.investment-value, .revenue-value, .withdraw-value,
.deposit-value, .earning-value {
  color: var(--ui-gold) !important;
  text-shadow: 0 1px 10px rgba(243,201,105,.16) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}

.product-price, .balance-amount, .amount-value, .balance-value {
  font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
  letter-spacing: .3px !important;
}

/* Pequenos rótulos ficam discretos e os números ganham protagonismo. */
.stat-label, .product-stats .stat-label, .detail-label,
.earnings-label, .balance-label, .input-label {
  color: var(--ui-muted) !important;
  font-weight: 600 !important;
  letter-spacing: .15px !important;
}

/* Cards premium: menos neon, mais profundidade e separação visual. */
.card, .balance-card, .checkin-card, .event-card, .contact-card,
.info-card, .instructions-card, .chart-card, .config-card,
.depo-card, .confirmed-card, .giros-card, .products-card,
.plan-card, .product-card, .history-card, .transaction-card,
.withdraw-card, .recharge-card {
  background: linear-gradient(145deg, rgba(15,40,37,.96), rgba(7,24,22,.96)) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.025) !important;
  backdrop-filter: blur(12px) !important;
}

.card:hover, .product-card:hover, .event-card:hover {
  border-color: var(--ui-border-strong) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.30), 0 0 20px rgba(32,214,179,.07) !important;
}

/* Cabeçalho: aparência institucional, sem excesso de brilho. */
.main-header {
  background: rgba(7,25,23,.94) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
}

.brand-logo {
  color: var(--ui-heading) !important;
  text-shadow: 0 0 18px rgba(32,214,179,.18) !important;
}

/* Ações: teal para ação, dourado reservado para dinheiro. */
.action-btn, .quick-button.active, .buy-button, .confirm-btn,
.confirm-button, .contact-button, .copy-button, .btn-primary,
.btn-success, .btn-success-bspaybr, .btn-save, .purchase-btn {
  background: linear-gradient(135deg, var(--ui-primary) 0%, var(--ui-primary-deep) 100%) !important;
  color: #05211C !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 22px rgba(32,214,179,.16) !important;
  font-weight: 800 !important;
}

.action-btn:hover, .buy-button:hover, .confirm-btn:hover,
.confirm-button:hover, .contact-button:hover, .copy-button:hover,
.purchase-btn:hover {
  box-shadow: 0 12px 28px rgba(32,214,179,.23) !important;
  transform: translateY(-1px) !important;
}

/* Check-in / atalhos: ícone teal, texto neutro. */
.circle-icon {
  background: rgba(6,25,23,.92) !important;
  border: 2px solid rgba(32,214,179,.72) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
}
.circle-icon i, .menu-item i, .balance-icon i,
.tab-item.tab-active, .tab-item.tab-active .tab-text,
.tab-item.tab-active .tab-icon {
  color: var(--ui-primary) !important;
  fill: var(--ui-primary) !important;
}

/* Planos: nome em branco, preço em dourado, métricas em branco/neutro. */
.product-header .product-price, .plan-price, .product-price {
  color: var(--ui-gold) !important;
  text-shadow: 0 1px 12px rgba(243,201,105,.18) !important;
}
.product-name, .plan-name {
  color: var(--ui-heading) !important;
  font-weight: 700 !important;
}
.product-stats .stat-value, .stat-value {
  color: var(--ui-heading) !important;
  font-weight: 750 !important;
}
.product-stats .stat-label, .stat-label {
  color: var(--ui-muted) !important;
}

/* Status sem confundir o significado das cores. */
.status-success, .success, .approved, .pago,
.status-aprovado, .status-concluido { color: var(--ui-success) !important; }
.status-pending, .pending, .processando { color: var(--ui-gold) !important; }
.status-error, .error, .rejected, .cancelado, .expired { color: var(--ui-danger) !important; }

/* Inputs e formulários: aparência limpa e consistente. */
input, select, textarea {
  background: rgba(5,20,18,.82) !important;
  color: var(--ui-heading) !important;
  border: 1px solid rgba(32,214,179,.26) !important;
  border-radius: 10px !important;
}
input::placeholder, textarea::placeholder { color: #718782 !important; }
input:focus, select:focus, textarea:focus {
  border-color: rgba(32,214,179,.72) !important;
  box-shadow: 0 0 0 3px rgba(32,214,179,.08) !important;
}

/* Barra inferior / menus. */
.tabbar-nav, .side-menu {
  background: rgba(5,21,19,.97) !important;
  border-color: rgba(32,214,179,.28) !important;
  box-shadow: 0 -12px 32px rgba(0,0,0,.25) !important;
}
.tab-item { color: #718782 !important; }
.tab-item.tab-active { color: var(--ui-primary) !important; }
.tab-item:hover { color: var(--ui-heading) !important; }
.menu-item:hover, .history-button:hover, .quick-button:hover,
.contact-button:hover, .copy-button:hover {
  color: var(--ui-primary) !important;
  border-color: rgba(32,214,179,.58) !important;
}

/* Banner e ticker sem competir com os dados financeiros. */
.main-banner {
  border-color: rgba(32,214,179,.62) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.25) !important;
}
.announcement-ticker {
  background: rgba(5,21,19,.96) !important;
  border-color: rgba(32,214,179,.38) !important;
  color: var(--ui-text) !important;
}

/* Modais e popups. */
.modal-content, .modal-dialog, .popup-content, .side-menu {
  background: rgba(7,25,23,.98) !important;
  border-color: rgba(32,214,179,.38) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.45) !important;
}

/* Scrollbar discreta. */
::-webkit-scrollbar { width: 7px !important; }
::-webkit-scrollbar-track { background: #061412 !important; }
::-webkit-scrollbar-thumb { background: #176D5E !important; border-radius: 8px !important; }
::-webkit-scrollbar-thumb:hover { background: #20D6B3 !important; }

/* Mobile: preservar a hierarquia sem deixar os valores gigantes. */
@media (max-width: 768px) {
  .product-price { font-size: 24px !important; }
  .balance-amount, .amount-value, .balance-value { font-size: 1.35rem !important; }
  .main-container { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ================================================================
   COTERRA — SIGNATURE EDITION
   Visual overhaul: navy/champagne + violet/cyan accents.
   Somente apresentação; sem alteração de lógica, banco ou rotas.
   ================================================================ */
:root {
  --sig-bg: #070B16 !important;
  --sig-panel: #0D1220 !important;
  --sig-panel-2: #111827 !important;
  --sig-white: #F7F8FC !important;
  --sig-soft: #C7CBD8 !important;
  --sig-muted: #7F879B !important;
  --sig-gold: #F5C96A !important;
  --sig-gold-2: #FFE3A0 !important;
  --sig-cyan: #42D9E8 !important;
  --sig-violet: #9B7BFF !important;
  --sig-rose: #FF7894 !important;
  --sig-green: #5BE3B0 !important;
  --sig-line: rgba(255,255,255,.09) !important;
}

html, body { background: var(--sig-bg) !important; }
body {
  color: var(--sig-soft) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(155,123,255,.12), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(66,217,232,.10), transparent 28%),
    linear-gradient(180deg, #10182A 0%, #090E1A 48%, #050810 100%) !important;
}

/* Texto: branco/acinzentado. Nunca usar a cor de ação como cor de texto geral. */
h1,h2,h3,h4,h5,h6,
.header-title,.menu-title,.section-label,.form-title,.category-title,
.intro-title,.info-title,.instructions-title,.checkin-title,
.buyers-title,.investors-title,.product-name,.event-name,.card-title,
.modal-title,.brand-logo {
  color: var(--sig-white) !important;
  text-shadow: none !important;
}
p,.text,.description,.card-description,.form-text,.info-text,
.empty-text,.empty-subtitle,.footer-text,.circle-label,.menu-item,
.balance-label,.input-label,.detail-label,.earnings-label,
.card-amount-label,.config-label,.dv-label,.h-name,.plan-name,
.form-label,.info-label,.checkin-subtitle,.header-subtitle,
.card-date,.stat-label { color: var(--sig-soft) !important; }

/* DINHEIRO: champanhe/dourado. */
.balance-amount,.amount,.card-amount-value,.card-value,.detail-value,
.earnings-value,.event-price,.plan-price,.confirm-price,.confirm-value,
.quick-value,.h-value,.info-value,.depo-values,.price,.value,.money,
.total,.income,.profit,.saldo,.product-price,.resumo-value,.wallet-value,
.balance-value,.amount-value,.total-value,.investment-value,.revenue-value,
.withdraw-value,.deposit-value,.earning-value {
  color: var(--sig-gold) !important;
  text-shadow: 0 1px 12px rgba(245,201,106,.16) !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Números de métricas: ciano, deliberadamente diferente do dinheiro. */
.stat-value,.product-stats .stat-value,.days,.limit,.duration,
.quantity,.count,.number,.rate,.percentage {
  color: var(--sig-cyan) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums !important;
}
.stat-label,.product-stats .stat-label { color: var(--sig-muted) !important; }

/* Superfícies gerais. */
.card,.balance-card,.checkin-card,.event-card,.contact-card,.info-card,
.instructions-card,.chart-card,.config-card,.depo-card,.confirmed-card,
.giros-card,.products-card,.plan-card,.history-card,.transaction-card,
.withdraw-card,.recharge-card {
  background: linear-gradient(145deg, rgba(17,24,39,.97), rgba(8,12,22,.98)) !important;
  border: 1px solid var(--sig-line) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(16px) !important;
}

/* ================================================================
   PLANOS / PROMOÇÕES — cartões premium personalizados
   ================================================================ */
.products-grid { gap: 18px !important; }
.product-card {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(155,123,255,.13), transparent 30%),
    linear-gradient(145deg, #151C2C 0%, #0B101C 70%, #080C15 100%) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05) !important;
  transform: translateZ(0) !important;
}
.product-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  height: 100% !important;
  border: 0 !important;
  background: linear-gradient(180deg, var(--sig-gold), var(--sig-violet)) !important;
  opacity: .95 !important;
  z-index: 2 !important;
}
.product-card::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  right: -100px !important;
  top: -130px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(66,217,232,.12), transparent 68%) !important;
  pointer-events: none !important;
}
.product-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(245,201,106,.34) !important;
  box-shadow: 0 24px 55px rgba(0,0,0,.44), 0 0 30px rgba(155,123,255,.08) !important;
}

/* Alternância sutil: cada plano ganha uma identidade sem virar carnaval. */
.product-card:nth-child(4n+2)::before { background: linear-gradient(180deg, var(--sig-cyan), var(--sig-violet)) !important; }
.product-card:nth-child(4n+3)::before { background: linear-gradient(180deg, var(--sig-violet), var(--sig-rose)) !important; }
.product-card:nth-child(4n+4)::before { background: linear-gradient(180deg, var(--sig-rose), var(--sig-gold)) !important; }
.product-card:nth-child(4n+2) { background: radial-gradient(circle at 88% 0%, rgba(66,217,232,.12), transparent 30%), linear-gradient(145deg,#131F2C,#0A101A 72%,#080C15) !important; }
.product-card:nth-child(4n+3) { background: radial-gradient(circle at 88% 0%, rgba(155,123,255,.15), transparent 30%), linear-gradient(145deg,#17172C,#0C0D1A 72%,#080A13) !important; }
.product-card:nth-child(4n+4) { background: radial-gradient(circle at 88% 0%, rgba(255,120,148,.10), transparent 30%), linear-gradient(145deg,#211923,#100C16 72%,#080A10) !important; }

.product-layout { min-height: 174px !important; }
.product-image-container {
  width: 148px !important;
  padding: 14px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.025) !important;
}
.product-image {
  height: 140px !important;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.42)) !important;
}
.product-details { padding: 18px 20px !important; }
.product-header { margin-bottom: 12px !important; }
.product-price {
  color: var(--sig-gold) !important;
  font-size: 27px !important;
  letter-spacing: .2px !important;
  text-shadow: 0 2px 16px rgba(245,201,106,.17) !important;
}
.product-name {
  color: var(--sig-white) !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: .15px !important;
}
.product-stats {
  gap: 9px 14px !important;
  margin-bottom: 15px !important;
  padding: 10px 0 !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
}
.product-stats .stat-item { padding: 2px 0 !important; }
.product-stats .stat-value {
  color: var(--sig-cyan) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.product-stats .stat-label {
  color: var(--sig-muted) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .55px !important;
}
.purchase-btn {
  background: linear-gradient(135deg, #F5C96A 0%, #D9A93E 100%) !important;
  color: #15110A !important;
  border: 0 !important;
  border-radius: 11px !important;
  min-height: 44px !important;
  box-shadow: 0 10px 24px rgba(245,201,106,.16) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  letter-spacing: 1.2px !important;
}
.purchase-btn:hover {
  box-shadow: 0 14px 30px rgba(245,201,106,.24) !important;
  transform: translateY(-2px) !important;
}

/* Cabeçalho e ações: ciano/violeta, dinheiro continua dourado. */
.main-header {
  background: rgba(9,14,26,.94) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.30) !important;
}
.brand-logo { color: var(--sig-white) !important; }
.circle-icon {
  background: linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,12,22,.98)) !important;
  border: 1px solid rgba(66,217,232,.50) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}
.circle-icon i { color: var(--sig-cyan) !important; }

.action-btn,.quick-button.active,.buy-button,.confirm-btn,.confirm-button,
.contact-button,.copy-button,.btn-primary,.btn-success,.btn-success-bspaybr,
.btn-save,.purchase-btn {
  border-color: rgba(255,255,255,.10) !important;
}
.action-btn,.quick-button.active,.buy-button,.confirm-btn,.confirm-button,
.contact-button,.copy-button,.btn-primary,.btn-success,.btn-success-bspaybr,.btn-save {
  background: linear-gradient(135deg, #42D9E8 0%, #2A9FC0 100%) !important;
  color: #061018 !important;
  box-shadow: 0 10px 24px rgba(66,217,232,.14) !important;
}

/* Status: cada significado tem sua própria cor. */
.status-success,.success,.approved,.pago,.status-aprovado,.status-concluido { color: var(--sig-green) !important; }
.status-pending,.pending,.processando { color: var(--sig-gold) !important; }
.status-error,.error,.rejected,.cancelado,.expired { color: var(--sig-rose) !important; }

/* Menu e navegação */
.tabbar-nav,.side-menu {
  background: rgba(7,11,22,.98) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 -16px 40px rgba(0,0,0,.34) !important;
}
.tab-item { color: var(--sig-muted) !important; }
.tab-item.tab-active { color: var(--sig-cyan) !important; }
.menu-item:hover { color: var(--sig-cyan) !important; }

/* Inputs */
input,select,textarea {
  background: rgba(5,9,18,.86) !important;
  color: var(--sig-white) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
input:focus,select:focus,textarea:focus {
  border-color: rgba(66,217,232,.55) !important;
  box-shadow: 0 0 0 3px rgba(66,217,232,.08) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .product-card { border-radius: 18px !important; }
  .product-image-container { width: 116px !important; padding: 10px !important; }
  .product-image { height: 112px !important; }
  .product-details { padding: 15px !important; }
  .product-price { font-size: 22px !important; }
  .product-name { font-size: 14px !important; }
  .purchase-btn { min-height: 42px !important; font-size: 14px !important; }
}

/* ================================================================
   COTERRA — SIGNATURE EDITION V4
   Refinamento visual: banner, microinterações, hierarquia e efeitos.
   Somente CSS — sem alteração de PHP, banco, rotas ou regras.
   ================================================================ */
:root {
  --sig-bg: #070B16;
  --sig-panel: #0D1220;
  --sig-panel-2: #111827;
  --sig-white: #F7F8FC;
  --sig-soft: #C7CBD8;
  --sig-muted: #7F879B;
  --sig-gold: #F5C96A;
  --sig-gold-2: #FFE3A0;
  --sig-cyan: #42D9E8;
  --sig-violet: #9B7BFF;
  --sig-rose: #FF7894;
  --sig-green: #5BE3B0;
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(700px 380px at 8% -5%, rgba(66,217,232,.10), transparent 62%),
    radial-gradient(620px 360px at 96% 10%, rgba(155,123,255,.10), transparent 62%),
    linear-gradient(180deg, #080D19 0%, #060A13 52%, #04070E 100%) !important;
}

/* Container: mais espaço visual e aparência de produto premium */
.main-container {
  max-width: 1040px !important;
  padding: 22px !important;
}

/* Cabeçalho */
.main-header {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(135deg, rgba(17,24,39,.96), rgba(7,11,22,.96)) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.main-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sig-cyan), var(--sig-violet), var(--sig-gold));
  box-shadow: 0 0 18px rgba(66,217,232,.55);
}
.main-header::after {
  content: '';
  position: absolute;
  width: 240px; height: 120px;
  right: -80px; top: -80px;
  background: radial-gradient(circle, rgba(66,217,232,.13), transparent 68%);
  pointer-events: none;
}
.brand-logo {
  color: var(--sig-white) !important;
  text-shadow: 0 0 22px rgba(66,217,232,.20) !important;
}

/* Botões do topo com brilho discreto */
.action-btn {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #172235, #0C1321) !important;
  border: 1px solid rgba(66,217,232,.38) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.action-btn::after,
.purchase-btn::after,
.buy-button::after,
.confirm-btn::after,
.confirm-button::after,
.btn-primary::after,
.btn-success::after,
.btn-save::after,
.contact-button::after,
.copy-button::after {
  content: '';
  position: absolute;
  top: -20%; left: -70%;
  width: 42%; height: 140%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition: left .55s ease;
  pointer-events: none;
}
.action-btn:hover::after,
.purchase-btn:hover::after,
.buy-button:hover::after,
.confirm-btn:hover::after,
.confirm-button:hover::after,
.btn-primary:hover::after,
.btn-success:hover::after,
.btn-save:hover::after,
.contact-button:hover::after,
.copy-button:hover::after { left: 135%; }

/* Quatro atalhos: de simples círculos para cards de acesso premium */
.action-buttons {
  gap: 12px !important;
  padding: 0 !important;
  margin: 4px 0 26px !important;
}
.circle-btn {
  position: relative !important;
  min-height: 112px;
  padding: 14px 8px 12px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(17,24,39,.82), rgba(9,13,24,.88)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow: hidden !important;
}
.circle-btn::before {
  content: '';
  position: absolute;
  width: 90px; height: 90px;
  right: -38px; top: -44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66,217,232,.16), transparent 68%);
  transition: transform .35s ease;
}
.circle-btn:nth-child(2)::before { background: radial-gradient(circle, rgba(245,201,106,.16), transparent 68%); }
.circle-btn:nth-child(3)::before { background: radial-gradient(circle, rgba(155,123,255,.16), transparent 68%); }
.circle-btn:nth-child(4)::before { background: radial-gradient(circle, rgba(91,227,176,.15), transparent 68%); }
.circle-btn:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34), 0 0 24px rgba(66,217,232,.07) !important;
}
.circle-btn:hover::before { transform: scale(1.35); }
.circle-icon {
  position: relative !important;
  z-index: 1;
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(66,217,232,.42) !important;
  background: linear-gradient(145deg, rgba(27,39,58,.95), rgba(8,13,24,.95)) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.circle-btn:nth-child(2) .circle-icon { border-color: rgba(245,201,106,.48) !important; }
.circle-btn:nth-child(3) .circle-icon { border-color: rgba(155,123,255,.48) !important; }
.circle-btn:nth-child(4) .circle-icon { border-color: rgba(91,227,176,.45) !important; }
.circle-btn:nth-child(2) .circle-icon i { color: var(--sig-gold) !important; }
.circle-btn:nth-child(3) .circle-icon i { color: var(--sig-violet) !important; }
.circle-btn:nth-child(4) .circle-icon i { color: var(--sig-green) !important; }
.circle-label {
  position: relative !important;
  z-index: 1;
  color: var(--sig-soft) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .65px !important;
  text-transform: uppercase;
}

/* ================================================================
   BANNER — ocupa de verdade o espaço, sem a imagem ficar pequena.
   Usa cover para preencher a área; o brilho e a máscara valorizam a arte.
   ================================================================ */
.main-banner {
  height: 330px !important;
  margin-bottom: 78px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: #090E19 !important;
  box-shadow: 0 22px 58px rgba(0,0,0,.40), 0 0 36px rgba(66,217,232,.08) !important;
  overflow: visible !important;
  isolation: isolate;
}
.main-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 21px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(66,217,232,.72), rgba(155,123,255,.30), rgba(245,201,106,.56));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}
.main-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(4,7,14,.02) 0%, rgba(4,7,14,.04) 52%, rgba(4,7,14,.26) 100%);
  pointer-events: none;
  z-index: 2;
}
.banner-bg {
  inset: 1px !important;
  width: calc(100% - 2px) !important;
  height: calc(100% - 2px) !important;
  border-radius: 21px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.08) contrast(1.03) brightness(1.02) !important;
  transform: scale(1.001);
  transition: transform .7s ease, filter .7s ease;
  z-index: 1;
}
.main-banner:hover .banner-bg {
  transform: scale(1.018);
  filter: saturate(1.14) contrast(1.05) brightness(1.04) !important;
}
.announcement-ticker {
  z-index: 6 !important;
  bottom: -52px !important;
  height: 48px !important;
  border: 1px solid rgba(66,217,232,.24) !important;
  border-radius: 14px !important;
  background: rgba(9,14,25,.94) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.announcement-ticker::before {
  content: '';
  flex: 0 0 7px;
  width: 7px; height: 7px;
  margin-left: 14px;
  margin-right: 2px;
  border-radius: 50%;
  background: var(--sig-green);
  box-shadow: 0 0 12px rgba(91,227,176,.85);
  animation: sigPulse 1.8s ease-in-out infinite;
}
.ticker-content {
  color: var(--sig-soft) !important;
  font-size: 13px !important;
  letter-spacing: .25px !important;
}

/* Planos: cartões com acabamento de vitrine */
.products-grid { gap: 16px !important; }
.product-card {
  min-height: 174px;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    radial-gradient(220px 160px at 100% 0%, rgba(66,217,232,.07), transparent 70%),
    linear-gradient(145deg, rgba(17,24,39,.97), rgba(8,12,22,.97)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035) !important;
  clip-path: none !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
}
.product-card::before,
.product-card::after { display: none !important; }
.product-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(66,217,232,.22) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.36), 0 0 28px rgba(66,217,232,.07) !important;
}
.product-card:nth-child(4n+2) { background: radial-gradient(220px 160px at 100% 0%, rgba(245,201,106,.075), transparent 70%), linear-gradient(145deg, rgba(19,25,39,.97), rgba(9,12,21,.97)) !important; }
.product-card:nth-child(4n+3) { background: radial-gradient(220px 160px at 100% 0%, rgba(155,123,255,.075), transparent 70%), linear-gradient(145deg, rgba(18,23,40,.97), rgba(8,11,22,.97)) !important; }
.product-card:nth-child(4n+4) { background: radial-gradient(220px 160px at 100% 0%, rgba(255,120,148,.065), transparent 70%), linear-gradient(145deg, rgba(24,22,37,.97), rgba(9,11,20,.97)) !important; }
.product-layout { gap: 18px !important; }
.product-image-container {
  border-radius: 15px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition: transform .3s ease, border-color .3s ease !important;
}
.product-card:hover .product-image-container { transform: translateY(-2px); border-color: rgba(66,217,232,.18) !important; }
.product-image { transition: transform .45s ease, filter .45s ease !important; }
.product-card:hover .product-image { transform: scale(1.045); filter: saturate(1.08) brightness(1.04); }
.product-price {
  color: var(--sig-gold) !important;
  text-shadow: 0 0 18px rgba(245,201,106,.17) !important;
  font-weight: 800 !important;
}
.product-name { color: var(--sig-white) !important; font-weight: 700 !important; }
.stat-value {
  color: var(--sig-cyan) !important;
  text-shadow: 0 0 13px rgba(66,217,232,.16) !important;
  font-weight: 800 !important;
}
.stat-label { color: var(--sig-muted) !important; }

/* Botões de compra e ações: brilho passando pelo botão */
.purchase-btn, .buy-button, .confirm-btn, .confirm-button,
.btn-primary, .btn-success, .btn-save, .contact-button, .copy-button {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .8px !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}
.purchase-btn {
  background: linear-gradient(135deg, #FFE3A0 0%, #F5C96A 48%, #DCA83C 100%) !important;
  color: #17120A !important;
  box-shadow: 0 12px 26px rgba(245,201,106,.17), inset 0 1px 0 rgba(255,255,255,.38) !important;
}
.purchase-btn:hover, .buy-button:hover, .confirm-btn:hover, .confirm-button:hover,
.btn-primary:hover, .btn-success:hover, .btn-save:hover, .contact-button:hover, .copy-button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) !important;
  box-shadow: 0 16px 32px rgba(0,0,0,.30), 0 0 22px rgba(66,217,232,.12) !important;
}
.purchase-btn:active, .buy-button:active, .confirm-btn:active, .confirm-button:active,
.btn-primary:active, .btn-success:active, .btn-save:active { transform: translateY(0) scale(.985) !important; }

/* Cards, modais e blocos internos */
.card, .balance-card, .checkin-card, .event-card, .contact-card,
.info-card, .instructions-card, .chart-card, .config-card, .depo-card,
.confirmed-card, .giros-card, .products-card, .plan-card, .card {
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(17,24,39,.96), rgba(8,12,22,.96)) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03) !important;
}

/* Status com ponto luminoso */
.status-success,.success,.approved,.pago,.status-aprovado,.status-concluido { color: var(--sig-green) !important; }
.status-pending,.pending,.processando { color: var(--sig-gold) !important; }
.status-error,.error,.rejected,.cancelado,.expired { color: var(--sig-rose) !important; }

/* Inputs com foco elegante */
input, select, textarea {
  border-radius: 11px !important;
  background: rgba(5,9,18,.78) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
input:focus, select:focus, textarea:focus {
  background: rgba(7,12,22,.96) !important;
  border-color: rgba(66,217,232,.55) !important;
  box-shadow: 0 0 0 3px rgba(66,217,232,.08), 0 8px 22px rgba(0,0,0,.18) !important;
}

/* Navegação inferior e menus */
.tabbar-nav, .side-menu {
  background: rgba(6,10,18,.97) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 -18px 44px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px) !important;
}
.tab-item { transition: color .2s ease, transform .2s ease !important; }
.tab-item.tab-active { color: var(--sig-cyan) !important; text-shadow: 0 0 14px rgba(66,217,232,.25); }
.tab-item:hover { transform: translateY(-2px); color: var(--sig-white) !important; }

/* Pequenos efeitos de carregamento / destaque */
@keyframes sigPulse {
  0%,100% { opacity: .65; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes sigFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.spinner-main { border-top-color: var(--sig-cyan) !important; box-shadow: 0 0 22px rgba(66,217,232,.32) !important; }

/* Responsivo */
@media (max-width: 768px) {
  .main-container { padding: 14px !important; }
  .main-header { border-radius: 17px !important; }
  .action-buttons { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 7px !important; }
  .circle-btn { min-height: 100px; padding: 11px 4px 9px !important; border-radius: 15px !important; }
  .circle-icon { width: 52px !important; height: 52px !important; }
  .circle-icon i { font-size: 23px !important; }
  .circle-label { font-size: 10px !important; letter-spacing: .35px !important; }
  .main-banner { height: 245px !important; margin-bottom: 70px !important; border-radius: 18px !important; }
  .banner-bg { border-radius: 17px !important; }
  .announcement-ticker { bottom: -50px !important; }
  .ticker-content { font-size: 11px !important; }
  .product-card { min-height: 0; border-radius: 17px !important; }
}
@media (max-width: 480px) {
  .main-container { padding: 11px !important; }
  .action-buttons { gap: 5px !important; }
  .circle-btn { min-height: 92px; padding: 9px 2px 8px !important; }
  .circle-icon { width: 48px !important; height: 48px !important; }
  .circle-icon i { font-size: 21px !important; }
  .main-banner { height: 205px !important; }
  .product-layout { gap: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}