#loading-spinner{ position:fixed; inset:0; display:flex; justify-content:center; align-items:center; background:var(--bg); color:#e9e6da; font-size:24px; z-index:99999 }
#loading-spinner .cup-container{ position:relative; display:flex; flex-direction:column; align-items:center }
#loading-spinner .cup{ position:relative; width:150px; height:160px; background:rgba(255,255,255,0.05); border:8px solid rgba(255,255,255,0.2); border-top:none; border-radius:0 0 70px 70px; overflow:hidden; box-shadow:0 0 30px rgba(0,0,0,0.8); z-index:2 }
#loading-spinner .handle{ position:absolute; right:-45px; top:20px; width:50px; height:70px; border:8px solid rgba(255,255,255,0.2); border-left:none; border-radius:0 30px 30px 0 }
#loading-spinner .wave{ position:absolute; bottom:0; left:0; width:100%; height:55%; background:#e9e6da }
#loading-spinner .wave::before, #loading-spinner .wave::after{ content:''; position:absolute; width:200%; height:200%; top:-50%; left:-50%; background:rgba(233,230,218,0.6); border-radius:40%; animation:liquid-move 6s linear infinite }
#loading-spinner .wave::after{ background:rgba(233,230,218,0.4); border-radius:35%; animation:liquid-move 10s linear infinite }
@keyframes liquid-move{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } }
#loading-spinner .vapour{ position:absolute; top:-80px; display:flex; z-index:1; padding:0 20px }
#loading-spinner .vapour span{ position:relative; display:block; margin:0 10px; min-width:12px; height:80px; background:#fff; border-radius:50%; animation:animate-vapour 5s linear infinite; opacity:0; filter:blur(15px); animation-delay:calc(var(--i) * -0.5s) }
@keyframes animate-vapour{ 0%{ transform:translateY(0) scaleX(1); opacity:0 } 15%{ opacity:0.6 } 50%{ transform:translateY(-60px) scaleX(4) } 95%{ opacity:0 } 100%{ transform:translateY(-120px) scaleX(8); opacity:0 } }
#loading-spinner .loading-text{ margin-top:25px; font-size:24px; color:#e9e6da; font-family:sans-serif; font-weight:bold; letter-spacing:2px; text-transform:uppercase; animation:pulse-text 1.5s infinite ease-in-out; margin-left:20px }
@keyframes pulse-text{ 0%,100%{ opacity:0.5 } 50%{ opacity:1 } }
    body.loading *{ visibility:hidden }
    body.loading #loading-spinner, body.loading #loading-spinner *, body.loading #loginScreen, body.loading #loginScreen *{ visibility:visible }
    body.loading #loading-spinner{ display:flex }
    body.loading .header, body.loading .wrap, body.loading #alertsBar, body.loading #dashAnivAlert{ display:none !important }
    /* Tags de Perfil */
    .badge {
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      margin-left: 8px;
      border: 1px solid rgba(255,255,255,0.1);
      display: inline-block;
      vertical-align: middle;
    }
    .badge-conservador {
      background: rgba(0, 210, 255, 0.15);
      color: #00d2ff; /* Azul Neon */
      border-color: rgba(0, 210, 255, 0.3);
    }
    .badge-moderado {
      background: rgba(255, 173, 0, 0.15);
      color: #FFAD00; /* Âmbar */
      border-color: rgba(255, 173, 0, 0.3);
    }
    .badge-arrojado {
      background: rgba(255, 0, 128, 0.15);
      color: #ff0080; /* Rosa/Magenta */
      border-color: rgba(255, 0, 128, 0.3);
    }
    
    /* Tooltip para perfil de risco */
    .badge[data-tooltip] {
      position: relative;
      cursor: help;
    }
    .badge[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 130%; /* Abaixo do elemento */
      left: 50%;
      transform: translateX(-50%);
      background: rgba(40, 40, 40, 0.95); /* Padronizado */
      backdrop-filter: blur(4px); /* Padronizado */
      color: #fff;
      padding: 8px 12px; /* Padronizado */
      border-radius: 6px;
      font-family: 'Inter', sans-serif; /* Padronizado */
      font-size: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      width: 280px;
      z-index: 99999;
      box-shadow: 0 8px 24px rgba(0,0,0,0.6); /* Padronizado */
      border: 1px solid rgba(255, 255, 255, 0.15); /* Padronizado */
      text-transform: none;
      font-weight: 400;
      text-align: left;
      pointer-events: none;
    }
    /* Seta do tooltip */
    .badge[data-tooltip]:hover::before {
      content: '';
      position: absolute;
      top: 110%; /* Abaixo do elemento */
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent rgba(40, 40, 40, 0.95) transparent; /* Padronizado */
      z-index: 99999;
    }

 /* --- ESTILO COMPACTO DO ANIVERSÁRIO --- */ 
 .birthday-wrapper { 
     display: flex; 
     align-items: center; 
     gap: 8px; /* Espaço entre input e botão */ 
     margin-top: 5px; 
     max-width: 250px; /* Impede que ocupe a tela toda */ 
 } 
 
 .compact-input { 
     flex: 1; /* Ocupa o espaço disponível */ 
     height: 36px; 
     font-size: 13px; 
     /* Mantém a correção de cor que fizemos antes */ 
     color: #fff !important; 
     background-color: rgba(255, 255, 255, 0.05) !important; 
     border: 1px solid rgba(255, 255, 255, 0.2) !important; 
     border-radius: 6px; 
 } 
 
 .btn-save-mini { 
     height: 36px; 
     padding: 0 15px; /* Botão mais curto lateralmente */ 
     font-size: 12px; 
     font-weight: 600; 
     text-transform: uppercase; 
     background-color: var(--accent, #00C853); /* Verde do sistema ou cor de destaque */ 
     color: #fff; 
     border: none; 
     border-radius: 6px; 
     cursor: pointer; 
     transition: background 0.2s; 
     white-space: nowrap; 
 } 
 .btn-save-mini:hover { 
     background-color: #009624; /* Verde mais escuro ao passar o mouse */ 
     transform: translateY(-1px); 
 }
 /* --- BADGES DE ANIVERSÁRIO NO CARD --- */
 .badge-bday-today {
     margin-top: 4px;
     background: rgba(0, 230, 118, 0.2); /* Fundo Verde Suave */
     border: 1px solid #00E676;
     color: #00E676;
     font-size: 11px;
     padding: 4px 8px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     gap: 5px;
     font-weight: 600;
 }
 .badge-bday-soon {
     margin-top: 4px;
     background: rgba(255, 171, 0, 0.15); /* Fundo Laranja Suave */
     border: 1px solid #FFAB00;
     color: #FFAB00;
     font-size: 11px;
     padding: 4px 8px;
     border-radius: 4px;
     display: flex;
     align-items: center;
     gap: 5px;
 }
  

    /* Tipografia global */
    body{ font-family: 'Inter', sans-serif; }

    /* Painéis Glassmorphism */
    .panel {
      background: rgba(30, 30, 30, 0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border-radius: 16px;
      padding: 24px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      /* GPU Acceleration */
      will-change: transform, opacity;
      transform: translateZ(0);
    }
    .panel:hover {
      transform: translateY(-2px) translateZ(0);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      border-color: rgba(233, 230, 218, 0.3);
    }

    /* Otimização Mobile e Glassmorphism */
    @media (max-width: 768px) {
      .panel, .modal-overlay, .modal.show, .modal-backdrop, .modal-content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(20, 20, 30, 0.95) !important;
      }
    }

    /* Skeleton Loading */
    @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .skeleton-box { 
      height: 20px; 
      background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%); 
      background-size: 200% 100%; 
      animation: loading 1.5s infinite; 
      border-radius: 4px; 
    }

    /* Números financeiros e KPIs */
    .mono-number { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing: -0.5px; }
    .kpi-value { font-size: 2.5rem; font-weight: 700; color: #e9e6da; text-shadow: 0 0 20px rgba(233, 230, 218, 0.2); }

    /* Tabelas modernas */
    table { border-collapse: separate; border-spacing: 0 8px; width: 100%; }
    th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; border: none; padding: 0 16px; }
    td { background: rgba(255,255,255,0.02); border: none; padding: 16px; font-size: 14px; }
    tr td:first-child { border-radius: 8px 0 0 8px; }
    tr td:last-child { border-radius: 0 8px 8px 0; }
    tr:hover td { background: rgba(255,255,255,0.06); cursor: default; }

    /* Status pills */
    .pill { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
    .pill.active { background: rgba(71, 195, 144, 0.2); color: #47c390; border: 1px solid rgba(71, 195, 144, 0.3); }
    .pill.pending { background: rgba(233, 230, 218, 0.2); color: #e9e6da; border: 1px solid rgba(233, 230, 218, 0.3); }
    
    .sortable-header { 
       cursor: pointer; 
       user-select: none; 
       transition: color 0.2s; 
    } 
    .sortable-header:hover { 
       color: var(--accent, #e9e6da); /* Ou a cor de destaque do tema */ 
    } 

    /* Grid de Clientes (Restaurado) */
    .all-clients-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      padding: 16px 0;
    }
    .client-mini {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: transform 0.2s, border-color 0.2s;
    }
    .client-mini:hover {
      transform: translateY(-2px);
      border-color: var(--accent);
    }
    .client-mini .avatar-circle {
      width: 40px;
      height: 40px;
      background: var(--pill);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #e9e6da;
      flex-shrink: 0;
    }
    .client-mini .info {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .client-mini .name {
      font-weight: 600;
      color: #e9e6da;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .client-mini .total {
      font-size: 12px;
      color: var(--muted);
    }

    /* Tabs Fixes */
    .tab-content { display: none; width: 100%; }
    .tab-content.active { display: block !important; }
  

  :root{
    --bg:#000000;
    --panel:#3a3a3a;
    --panel-2:#414141;
    --ink:#e9e6da;
    --muted:#cfcfcf;
    --line:#6a6a6a;
    --pill:#4a4a4a;
    --accent:#FFAD00;
    --ok:#47c390;
    --warn:#FFAD00;
    --danger:#ff6b6b;
    --btn:#444;
    --btnh:#666;
    --radius:14px;
    
    /* Design System Financial Colors */
    --color-positive: #4ade80;
    --color-negative: #f87171;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);} 
  .header{display:flex;align-items:flex-start;justify-content:space-between;padding:1px 60px}

  .header-right{display:flex;align-items:center;margin-top:28px}
  .header-left{display:flex;align-items:center;justify-content:flex-start;gap:6px}
  .logo{height:390px;width:auto;display:block;object-fit:contain;filter:none;transform:translate(-54px,4px)}
 .logo-wrap{display:flex;align-items:center;overflow:hidden;clip-path: inset(16px 20px 18px 14px);position:relative}
  .title{font-size:24px;font-weight:700;letter-spacing:.3px;line-height:1.15;align-self:flex-end;transform:translateY(-6px)}
  .title .version{font-size:14px;font-weight:600;color:#e9e6da;margin-left:8px;background:var(--pill);border-radius:999px;padding:3px 8px;display:inline-block}
  .version-badge{position:absolute;right:28px;bottom:26px;z-index:10;font-size:14px;font-weight:600;color:#e9e6da;background:var(--pill);border-radius:999px;padding:3px 8px;display:inline-block}
   .services-scroll{ -ms-overflow-style:none; scrollbar-width:none; padding-right:10px }
   .services-scroll::-webkit-scrollbar{ display:none }
  .header-actions{display:flex;align-items:center;margin-left:12px;margin-top:-8px}
  .header-actions button{padding:8px 12px;border-radius:10px;height:32px;display:inline-flex;align-items:center;line-height:1}
/* Hover padrão nos botões principais do sticky header */
.nav-group .nav-item:hover{background:var(--accent);color:#000}
.dropdown .drop-trigger:hover{background:var(--accent);color:#000}
.btn-email{background:#1976d2;color:#e9e6da;box-shadow:0 1px 0 rgba(0,0,0,.06);display:inline-flex;align-items:center;gap:8px;padding:0 12px}
.btn-email:hover{filter:brightness(1.08)}
.btn-email:focus{outline:2px solid var(--accent);outline-offset:2px}
.btn-email svg{width:20px;height:20px;display:inline-block}
.btn-blockchain{background:var(--accent);color:#111;box-shadow:0 1px 0 rgba(0,0,0,.06); margin-right:10px}
.btn-blockchain:hover{filter:brightness(1.08)}
.btn-blockchain:focus{outline:2px solid var(--accent);outline-offset:2px}
.btn-advisor{background:var(--accent);color:#111;box-shadow:0 1px 0 rgba(0,0,0,.06);margin-left:0}
 .btn-advisor:hover{filter:brightness(1.08)}
 .btn-advisor:focus{outline:2px solid var(--accent);outline-offset:2px}
/* Botão Entrar (amarelo do projeto, texto preto, cadeado à esquerda) */
.btn-enter{background:var(--accent);color:#111;box-shadow:0 1px 0 rgba(0,0,0,.06);display:inline-flex;align-items:center;gap:8px}
.btn-enter:hover{filter:brightness(1.08)}
.btn-enter:focus{outline:2px solid var(--accent);outline-offset:2px}
  /* Botão AVO Educacional (mesmo estilo visual, azul escuro) */
  .btn-avo{background:#2f45b9;color:#e9e6da;box-shadow:0 1px 0 rgba(0,0,0,.06)}
  .btn-avo:hover{filter:brightness(1.08)}
  .btn-avo:focus{outline:2px solid #2f45b9;outline-offset:2px}
  /* Botão Elleven Life (cores do anexo: fundo azul-chumbo escuro e texto branco) */
  .btn-life{background:#1f2430;color:#e9e6da;box-shadow:0 1px 0 rgba(0,0,0,.06)}
  .btn-life:hover{filter:brightness(1.08)}
  .btn-life:focus{outline:2px solid #1f2430;outline-offset:2px}
  @media (max-width: 768px){
    .header,.bar{padding:16px}
    .prices{flex-wrap:wrap;gap:12px}
    .logo{height:270px}
  }
  .page-indicator{background:var(--pill);padding:6px 14px;border-radius:999px;font-size:13px;color:#e9e6da}
  .bar{display:flex;justify-content:space-between;align-items:center;padding:0 60px 16px 60px;margin-top:-40px}
  .buttons{display:flex;gap:10px}
  button,.btn{background:var(--btn);color:#1a1a0a;border:none;padding:10px 18px;border-radius:10px;min-height:32px;cursor:pointer;font-weight:600;letter-spacing:.5px;text-transform:uppercase;font-size:12px;transition:background-color .15s ease, border-color .15s ease, color .15s ease, filter .15s ease, transform .2s ease, box-shadow .2s ease}
  button:focus{outline:2px solid var(--accent);outline-offset:2px}
  button:active{transform:scale(0.98)}
  a:focus{outline:2px solid var(--accent);outline-offset:2px}
  button:hover{background:var(--btnh)}
  input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],select,textarea{background:rgba(15,17,21,0.6);border:1px solid rgba(255,255,255,0.1);color:#e9e6da;padding:12px 16px;border-radius:10px;font-family:'Inter',sans-serif;font-size:14px;outline:none;transition:all .3s ease;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
  input:focus,select:focus,textarea:focus{border-color:rgba(71,195,144,0.5);box-shadow:0 0 15px rgba(71,195,144,0.15);background:rgba(15,17,21,0.8);transform:translateY(-1px)}
  ::placeholder{color:rgba(233,230,218,0.3)}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:rgba(0,0,0,0.1)}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);border-radius:4px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25)}
  button.primary{background:var(--accent);color:#1a1a0a}
  button.primary:hover{filter:brightness(1.05)}
  .wrap{padding:0 60px 60px 60px}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:16px 0}
  .panel h3{margin:0 0 10px 0;font-size:19px}
  h3{margin:0 0 10px 0;font-size:19px;font-weight:700}
  h4{margin:0 0 10px 0;font-size:16px;font-weight:600}
  table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:none;border-radius:12px;overflow:hidden}
  th,td{border-bottom:none;padding:10px 12px;font-size:14px;text-align:center}
  th{background:var(--panel-2);font-weight:700}
  tr:last-child td{border-bottom:none}
  .t-right{text-align:right}
  .t-left{text-align:left}
  .t-center{text-align:center}
  /* Alinhamento central para tabelas principais */
#tblContratos th, #tblContratos td,
  #tblEvolucao th, #tblEvolucao td,
  #tblCarteira th, #tblCarteira td,
  #tblComissoesCliente th, #tblComissoesCliente td,
  #tabelaComissaoAssessor th, #tabelaComissaoAssessor td,
  #tblParams th, #tblParams td { text-align:center; }

/* --- SETAS DE NAVEGAÇÃO POPUP CLIENTE --- */
#panelClientePopup { z-index: 9999;
  position: relative !important;
  max-width: 1800px !important;
  width: 96vw !important;
}
.blox-nav-arrow-modal {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #e9e6da;
  border: 1px solid rgba(255,255,255,0.1);
  width: 50px;
  height: 80px;
  font-size: 32px;
  border-radius: 12px;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blox-nav-arrow-modal:hover {
  background: rgba(255, 173, 0, 0.2);
  color: #e9e6da;
  border-color: rgba(255, 173, 0, 0.5);
}
.blox-nav-arrow-modal.prev { left: 2%; }
.blox-nav-arrow-modal.next { right: 2%; }
@media (max-width: 1250px) {
  .blox-nav-arrow-modal { width: 40px; height: 60px; font-size: 24px; }
  .blox-nav-arrow-modal.prev { left: 5px; }
  .blox-nav-arrow-modal.next { right: 5px; }
}

/* --- Melhorias UI Tabela Evolução --- */
#tblEvolucao th, #tblEvolucao td {
  text-align: center !important; /* Garante centralização */
  vertical-align: middle !important;
  padding: 8px 4px;
  border-left: none !important;
  border-right: none !important;
}

/* Estilo para separar moedas dentro da mesma célula (ex: BRL em cima, USDT embaixo) */
.ev-currency-row {
  border-bottom: none; /* remover linhas brancas entre moedas */
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  color: var(--text); /* padronizar cor para todas as moedas */
  font-weight: 400;   /* padronizar negrito para todas as moedas */
}
.ev-currency-row:last-child {
  border-bottom: none;
}
.ev-currency-row.muted {
  opacity: 0.3; /* Para linhas zeradas */
  font-size: 0.85em;
}
/* Garantir tipografia consistente dentro da célula por moeda (BTC/ETH/USDT/BRL) */
#tblEvolucao .ev-currency-row small,
#tblEvolucao .ev-currency-row .muted {
  opacity: 1 !important;
  font-size: inherit !important;
  color: var(--text) !important;
  font-weight: 400 !important;
}
#tblEvolucao .ev-currency-row b,
#tblEvolucao .ev-currency-row strong {
  font-weight: 400 !important;
}

/* Design da Tag de Saque */
.saque-pill {
  background-color: rgba(248, 113, 113, 0.15); /* Fundo vermelho translúcido */
  color: var(--color-negative);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.5px;
}
/* Posição do botão de edição de saques entre colunas */
.saque-cell { position: relative; }
.saque-edit {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  color: #2ecc71;
  padding: 12px;
  line-height: 1;
  font-weight: bold;
  font-size: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}

/* Cores de Rendimento */
.val-pos { color: var(--color-positive); font-weight: 400; } /* Verde Neon Suave */
.val-neg { color: var(--color-negative); font-weight: 400; } /* Vermelho Suave */
.val-neutral { color: var(--text); opacity: 0.7; font-weight: 400; }
  
  /* Efeitos táteis em botões */
  button:active, .btn:active{ transform: scale(0.96); transition: transform .1s ease; }
  
  /* Animação de entrada suave para painéis */
  .fade-in-up{ animation: fadeInUp .3s ease both }
  @keyframes fadeInUp{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform: translateY(0); }
  }
  
  /* Scrollbar personalizada (WebKit/Blink) */
  ::-webkit-scrollbar{ width:8px; height:8px }
  ::-webkit-scrollbar-track{ background: var(--bg); }
  ::-webkit-scrollbar-thumb{ background: var(--panel-2); border-radius:4px }
  ::-webkit-scrollbar-thumb:hover{ filter: brightness(1.15); }
  /* Scrollbar (Firefox) */
  *{ scrollbar-width: thin; scrollbar-color: var(--panel-2) transparent; }
  
  /* Empty state elegante para contratos */
  .empty-state{ display:flex; align-items:center; justify-content:center; gap:10px; color:#e9e6da; background:rgba(255,255,255,.06); border:1px dashed var(--line); border-radius:12px; padding:24px; margin:12px 0 }
  .empty-icon{ font-size:20px; line-height:1 }
  .empty-text{ font-size:14px; font-weight:600 }
  
  /* Toast base e variantes */
  .toast{ background: rgba(20,20,22,.88); color:#e9e6da; box-shadow: 0 6px 16px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08) }
  .toast-success{ background: rgba(22, 100, 44, .85); border-color: rgba(22, 100, 44, .9) }
  .toast-error{ background: rgba(160, 32, 32, .85); border-color: rgba(160, 32, 32, .9) }

  /* Micro animação premium nas linhas de tabelas */
  @keyframes slideInUp{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)} }
  .animate-row{ animation: slideInUp .3s ease-out both }

  /* Backdrop blur para modais */
  .modal-overlay{ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .modal.show{ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .modal-backdrop{ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }

  /* Alinhamento do total em BRL na aba Assessor centralizado na coluna de % */
  #tblCarteira tfoot td#carteiraTotalBRL { text-align:center; }
  #tblCarteira td.t-right { text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  #tblCarteira tfoot tr.interactive:hover{ background: rgba(158,197,255,0.12); }
  /* Aumentar levemente a fonte das tabelas de valores (carteira e comissões) */
  #tblCarteira th, #tblCarteira td,
  #tblComissoesCliente th, #tblComissoesCliente td { font-size:14px; line-height:1.35 }
  #tabelaComissaoAssessor th, #tabelaComissaoAssessor td { font-size:14px; line-height:1.35 }
.pill{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;background:#505050;font-size:12px;vertical-align:middle;line-height:normal;transition:transform 0.2s ease,box-shadow 0.2s ease}
.pill:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.25);filter:brightness(1.1)}
.pill.profit{background:rgba(74, 222, 128, 0.15); color: var(--color-positive); border: 1px solid rgba(74, 222, 128, 0.3);}
.pill.loss{background:rgba(248, 113, 113, 0.15); color: var(--color-negative); border: 1px solid rgba(248, 113, 113, 0.3);}
/* ROI da carteira na sessão de performance (mesmo estilo dos demais itens) */
#cliROIPill{
  cursor:pointer;
  font-size:16px;
  font-weight:bold;
  color:#e9e6da;
}
#cliROIPill.profit{ color: var(--color-positive); }
#cliROIPill.loss{ color: var(--color-negative); }
/* Deslocar gráficos e ROI um pouco à direita para liberar espaço */
  .cli-roi-actions{ margin-left:16px }
  #evExpChartBox{ margin-left:16px !important }
  #tvQuoteChartBox{ margin-left:16px }
  .muted{color:var(--muted)}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
  
  .col-3{grid-column:span 3}
  .col-4{grid-column:span 4}
  .col-6{grid-column:span 6}
  .col-8{grid-column:span 8}
  .col-12{grid-column:span 12}
  .col-5{grid-column:span 5}
  .col-7{grid-column:span 7}
  label{display:block;font-size:12px;color:#e9e6da;margin-bottom:6px;letter-spacing:.2px}
  input,select{width:100%;background:#2f2f2f;color:#e9e6da;border:1px solid #555;border-radius:10px;padding:10px 12px;font-size:14px}
  
  .row-actions{display:flex;gap:8px;justify-content:center}
  .row-actions button { background: var(--accent); color: #1a1a0a; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
  .row-actions button:hover { filter: brightness(1.1); }
  button.detail-btn { background: var(--ink); color: #1a1a0a; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
  .toggle-btn { background: var(--accent); color: #1a1a0a; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; }
  /* Cores oficiais dos ativos */
   .badge-btc{background:#f7931a;color:#1a1a1a}
   .badge-usd{background:#22c55e;color:#0b2f1a}
   .badge-eth{background:#3b82f6;color:#0b1f3f}
   .badge-brl{background:var(--ink);color:#1a1a0a}
  .flex{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.prices{display:flex;gap:16px;font-size:15px;align-items:center}
  .price-chip{display:inline-flex;gap:12px;align-items:center;padding:17px 19px;border-radius:16px;background:rgba(31,31,31,0.40);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);box-shadow:0 12px 36px rgba(0,0,0,0.50);width:270px;cursor:pointer;transition:background-color .15s ease, color .15s ease, filter .15s ease, box-shadow .15s ease, border-color .15s ease;position:relative;padding-left:65.4px;padding-right:79.8px;min-height:83px}
  .price-chip b{font-size:14.5px;color:#e9e6da;font-weight:700;min-width:48px;display:flex;align-items:center;gap:7px;white-space:nowrap}
  .price-stack{display:flex;flex-direction:column;line-height:1.18;min-height:48px;margin-right:77px;margin-left:-28px}
  .price-brl{font-size:21.5px;color:#e9e6da;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
    .price-usd{font-size:15.5px;color:#cfcfcf;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
    .price-usd.usdt{display:none}
  .price-change{font-family:'Courier New',monospace;font-size:12px;font-weight:600;position:absolute;right:10px;top:18px;transform:none;margin:0;padding:2.5px 7px;border-radius:4px;opacity:0.9;transition:color .15s ease, background .15s ease}
   .price-change.positive{color:var(--color-positive);background:rgba(74,222,128,0.12)}
   .price-change.negative{color:var(--color-negative);background:rgba(248,113,113,0.12)}
   .price-change.neutral{color:#9ca3af;background:rgba(156,163,175,0.12)}
  .price-chip:hover{filter:brightness(1.05); box-shadow:0 18px 48px rgba(0,0,0,0.55); border-color:rgba(255,173,0,0.25); transform: translateY(-1px)}
  .price-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
   .price-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e9e6da}
.prices .muted{color:#cfcfcf}
  .crypto-symbol{display:inline-block;line-height:1;width:43px;height:43px;vertical-align:middle;object-fit:contain;border-radius:4px;position:absolute;left:10px;top:50%;transform:translateY(-50%)}
  .crypto-label{display:none}
     .crypto-btc{color:#F7931A}
     .crypto-eth{color:#627EEA}
     .crypto-usdt{color:#26A17B}
     .price-value{display:flex;align-items:baseline;gap:6px}
     .price-value .currency{min-width:22px;text-align:right}
     .price-value .amount{flex:1}
     #pricesBar .price-chip:first-child{width:294px}
  .divider{height:1px;background:var(--line);margin:14px 0}
  .clickable{cursor:pointer;color:#9ec5ff;text-decoration:underline}
  #tblComissoesCliente tbody tr:hover{ background: rgba(158,197,255,0.12); }
  #tabelaComissaoAssessor tbody tr:hover{ background: rgba(158,197,255,0.12); }
  /* Interação por linha na tabela de Contratos */
  #tblContratos tbody tr:hover{ background: rgba(158,197,255,0.12); }
  #tblContratos tbody tr:focus-within{ outline:2px solid var(--accent); outline-offset:-2px; }
  .price-chip[data-asset="USDT"]{align-items:center}
  .price-chip .price-change{position:absolute; right:10px; top:50%; transform:translateY(-50%); margin:0}
  .price-chip[data-asset="USDT"] .price-stack{ justify-content: center }
  /* Deslocamento dos stacks para ETH e BTC */
  .price-chip[data-asset="ETH"] .price-stack{ margin-left:-41px; margin-right:96px }
  .price-chip[data-asset="BTC"] .price-stack{ margin-left:-41px; margin-right:96px }
  #pricesBar{ display:flex; gap:16px; align-items:center; justify-content:center }
  #tblContratos tbody tr.interactive{ cursor:pointer; }
  /* Aplicar o mesmo hover aos meses na tabela de evolução */
  #tblEvolucao tbody tr.interactive:hover{ background: rgba(158,197,255,0.12); }
  /* Destaque visual para contrato ativo na aba Contratos */
#tblContratos tr.active-contract { background: rgba(255, 173, 0, 0.12); }
#tblContratos tr.active-contract td:first-child { border-left: 3px solid var(--accent); }

/* Ajustes de pill no modal de contrato */
#panelContratoDetalhe #detContratoTipo.pill{
  display:inline-block;
  min-width: 110px;
  padding: 6px 10px;
  text-align:center;
}
  /* Modal genérico */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; pointer-events:none; transition:opacity .2s ease; }
/* Prioridade para o modal de detalhes de contrato acima de outros overlays */
#modalContratoOverlay{ z-index:1200; }
#modalRenovacaoOverlay{ z-index:11000; }
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal-dialog{ position:relative; width:min(92vw, 1000px); max-height:90vh; overflow:auto; transform:scale(0.98); opacity:0; transition:transform .2s ease, opacity .2s ease; }
.modal-overlay.open .modal-dialog{ transform:scale(1); opacity:1; }
.modal-close{ position:absolute; top:8px; right:10px; background:#3a3a3a; color:#e9e6da; border:1px solid var(--line); border-radius:6px; padding:4px 8px; cursor:pointer; }
.modal-close:hover{ filter:brightness(1.08); }
.floating-top-btn{ position:fixed; bottom:32px; right:20px; z-index:11000; background:rgba(240,240,240,0.18); color:#e9e6da; border:1px solid rgba(240,240,240,0.35); border-radius:999px; width:56px; height:56px; display:none; align-items:center; justify-content:center; box-shadow:0 8px 18px rgba(0,0,0,0.25); cursor:pointer; transition:opacity .2s ease, transform .2s ease, background-color .2s ease, box-shadow .2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-weight:900; font-size:24px; }
.floating-top-btn:hover{ transform:translateY(-2px); filter:brightness(1.05); background:rgba(240,240,240,0.28); box-shadow:0 10px 22px rgba(0,0,0,0.35) }
.floating-top-btn:focus{ outline:2px solid rgba(180,180,180,0.6); outline-offset:2px }
/* Linhas interativas devem se comportar como botões no hover */
.interactive{ cursor:pointer; }
/* Comprovante Blockchair (campo de hash) */
.tx-receipt-wrap{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.tx-input{ height:32px; padding:6px 10px; border:1px solid rgba(255,255,255,0.1); border-radius:10px; background:rgba(15,17,21,0.6); color:var(--ink); min-width:180px; backdrop-filter:blur(5px) }
.tx-input::placeholder{ color:var(--muted) }
.tx-input:focus{ outline:none; border-color:rgba(71,195,144,0.5); box-shadow:0 0 15px rgba(71,195,144,0.15); background:rgba(15,17,21,0.8); transform:translateY(-1px) }
.tx-icon-btn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#0f0f0f; border:1px solid var(--line); border-radius:8px; cursor:pointer; transition:.2s ease }
.tx-icon-btn:hover{ filter:brightness(1.05); transform:translateY(-1px) }
/* Variação oficial WhatsApp */
.wa-icon-btn{ background:#FFFFFF; color:#111; border:1px solid var(--line); width:36px; height:36px; border-radius:50%; transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease, border-color .3s ease }
.wa-icon-btn:hover{ transform:scale(1.05); box-shadow:0 6px 14px rgba(0,0,0,.16); border-color:#1ebe5d }
.wa-icon-btn:focus-visible{ outline:2px solid #1ebe5d; outline-offset:2px }
.wa-icon-btn svg{ color:#e9e6da }
.wa-icon-btn svg path{ fill:#e9e6da }
/* Fallback: desenhar ícone via pseudo-elemento para garantir visibilidade */
.wa-icon-btn::before{
  content:""; display:inline-block; width:18px; height:18px; background-repeat:no-repeat; background-size:contain;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ffffff" d="M17.472 14.382c-.297-.148-1.758-.867-2.03-.967-.273-.101-.472-.148-.67.148-.198.297-.767.966-.94 1.164-.173.198-.347.223-.644.074-.297-.148-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.173.198-.297.298-.495.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.199-.242-.58-.486-.502-.669-.511-.173-.009-.371-.011-.57-.011-.198 0-.52.074-.793.372-.273.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.1 3.2 5.085 4.487.711.307 1.266.49 1.699.627.713.227 1.362.195 1.877.118.572-.085 1.758-.718 2.006-1.412.248-.694.248-1.287.173-1.412-.074-.124-.272-.198-.57-.347m-5.421 7.615h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.983.998-3.648-.238-.374a9.902 9.902 0 01-1.522-5.223 9.94 9.94 0 119.942 9.904m8.413-18.354A11.815 11.815 0 0012.05 0C5.495 0 .184 5.31.184 11.863c0 2.086.547 4.137 1.588 5.935L0 24l6.27-1.635a11.83 11.83 0 005.777 1.482h.005-.005c6.554 0 11.865-5.31 11.865-11.863 0-3.17-1.233-6.155-3.584-8.505z"/></svg>');
}
/* Quando usar imagem local como ícone, desativar fallback */
.wa-icon-btn.use-img::before{ content:none }
.wa-icon-btn.use-img{ background-image:url('whats Ícone.png'); background-repeat:no-repeat; background-position:center; background-size:contain; }
.btn-small{ background:var(--accent); color:#111; border:1px solid var(--line); border-radius:8px; height:32px; padding:0 8px; display:inline-flex; align-items:center; font-size:12px }
.btn-new-contract{ background:#86b499; color:#111; border:1px solid var(--line); border-radius:8px; height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer }
.btn-new-contract:hover{ filter:brightness(1.05) }
.btn-new-contract:focus-visible{ outline:2px solid #86b499; outline-offset:2px }
.btn-view-client{ background:#22c55e; color:#111; border:1px solid var(--line); border-radius:8px; height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:8px; font-weight:600; cursor:pointer }
.btn-view-client:hover{ filter:brightness(1.05) }
.btn-view-client:focus-visible{ outline:2px solid #22c55e; outline-offset:2px }
.error-msg{ color:#ff6b6b; font-size:12px }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.section-highlight{ box-shadow:0 0 0 2px var(--accent) inset; animation:sectionPulse 1.2s ease-in-out 2; border-radius:8px }
@keyframes sectionPulse { 0%{box-shadow:0 0 0 0 var(--accent) inset} 50%{box-shadow:0 0 0 3px var(--accent) inset} 100%{box-shadow:0 0 0 0 var(--accent) inset} }
 .modal-footer{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:10px }
.footer-action{ background:#2f2f2f; border:1px solid var(--line); color:#e9e6da; border-radius:6px; padding:6px 10px; cursor:pointer }
  .footer-action:hover{ filter:brightness(1.06) }
  /* Nome do cliente na Carteira do Cliente (amarelo e fonte maior) */
  .client-name-highlight{ color:var(--accent); font-size:1.12em; }
  #panelEvolucao .header-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
  #panelEvolucao .birthday-box input{ background:#2f2f2f; border:1px solid var(--line); color:#e9e6da; border-radius:6px; padding:6px; }
  #panelEvolucao .birthday-box{ margin-right:16px; }
  /* Barra única de chips: L/P à esquerda e alocação à direita */
  #evChipsBar{ display:flex; justify-content:space-between; align-items:center; margin:8px 0 12px 0; }
  #evChipsBar .left-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  #evChipsBar .right-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }

  /* Dashboard: gráfico de alocação e aniversários lado a lado */
  #panelDashboard .alloc-row{ display:flex; align-items:flex-start; gap:12px; }
#panelDashboard .alloc-left{ flex:1 1 auto; padding-left:0; }
#panelDashboard .alloc-row #dashDistribChart{ width:auto; max-width:none; margin:0; }
  #panelDashboard .alloc-right{ flex:0 0 365px; width:365px; display:flex; flex-direction:column; }
  #panelDashboard .grid.grid-tight{ gap:0; }
  /* Uniformizar margens inferiores dos títulos dos cards para alinhamento pixel-perfect */
  #panelDashboard .grid.grid-tight h3{ margin-bottom:4px !important; }
  /* Forçar aproximação dos cards de gráficos à esquerda, encostando na coluna da tabela */
  #panelDashboard .grid.grid-tight > .col-7{ margin-left:-8px; }
  /* Visual mais clean: remover linhas/bordas em chips e cards do Dashboard */
  #panelDashboard .exp-rate-card{ border:none; }
  #panelDashboard .tv-stack{ border:none; }
  #panelDashboard .dash-widget-card{ border:none !important; }
  #panelDashboard #dashTypeCard, #panelDashboard #dashRightWidget, #panelDashboard #vencCard{ border:none !important; }
  #panelDashboard .pill{ border:none !important; }
  /* Repor linhas suaves apenas nos chips superiores do Dashboard */
  .exp-rate-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align:center; cursor:pointer; display:flex; flex-direction:column; gap:6px; justify-content:center; min-height:88px; transition: background .2s ease, border-color .2s ease, transform .1s ease; }
  .exp-rate-card:hover{ border-color: var(--accent); transform: translateY(-1px); }
  
  /* Estilos para o pop-up expandido de Rentabilidade EXP */
  .exp-popup-container { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0; min-width: 800px; max-width: 90vw; max-height: 90vh; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.6); }
  .exp-popup-header { background: var(--panel-2); border-bottom: 1px solid var(--line); padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
  .exp-popup-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
  .exp-popup-nav { display: flex; gap: 8px; }
  .exp-popup-nav button { background: var(--btn); color: var(--ink); border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all .2s ease; }
  .exp-popup-nav button:hover { background: var(--btnh); }
  .exp-popup-nav button.active { background: var(--accent); color: #111; }
  .exp-popup-content { padding: 20px; max-height: 70vh; overflow-y: auto; }
  /* Panel Form compact: reduzir alturas e espaçamentos dos botões */
  #panelForm{ padding:12px; }
  #panelForm .grid{ gap:8px; }
  #panelForm .row-actions{ display:flex; gap:6px; justify-content:flex-start; margin-top:0; }
  #panelForm .row-actions button{ padding:6px 10px; border-radius:6px; font-weight:600; }
  /* Destaque visual quando entrar em modo edição */
  #panelForm.editing-highlight{
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgba(255, 173, 0, 0.25);
    transition: box-shadow .3s ease, border-color .3s ease;
  }
  .exp-popup-close { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px; border-radius: 4px; transition: color .2s ease; }
  .exp-popup-close:hover { color: var(--ink); }
  
  /* Estilos para a view de histórico */
  .exp-history-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 12px; }
  .exp-history-table th, .exp-history-table td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--line); }
  .exp-history-table th { background: var(--panel); font-weight: 700; font-size: 13px; color: var(--muted); }
  .exp-history-table tr:last-child td { border-bottom: none; }
  .exp-history-table .period-cell { font-family: ui-monospace, monospace; font-size: 13px; }
  .exp-history-table .rate-cell { font-family: ui-monospace, monospace; font-weight: 600; }
  .exp-history-empty { text-align: center; color: var(--muted); padding: 40px; font-style: italic; }
  
  /* Estilos para a view de registro */
  .exp-register-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; margin-top: 16px; }
  .exp-register-form .form-group { display: flex; flex-direction: column; }
  .exp-register-form label { font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
  .exp-register-form select, .exp-register-form input { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-size: 14px; }
  .exp-register-form select:focus, .exp-register-form input:focus { outline: none; border-color: var(--accent); }
  .exp-register-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
  .exp-register-info { color: var(--muted); font-size: 12px; }
  .exp-register-confirm { background: rgba(71, 195, 144, 0.1); border: 1px solid #47c390; border-radius: 6px; padding: 12px; margin-top: 12px; color: #47c390; font-size: 13px; display: none; }
  .exp-rate-value{ font-size:22px; font-weight:700; color: var(--accent); line-height:1.2; }
  /* variação no estilo dos pills para consistência visual */
  .exp-rate-var{ display:inline-block; padding:2px 8px; border-radius:999px; background:#505050; font-size:12px; color:#fff; }
  /* Pop-up Cliente: tipografia e grids mais densos e elegantes */
#panelClientePopup{ background-image: linear-gradient(rgba(49, 47, 44, 0.75), rgba(49, 47, 44, 0.75)), url("fundo carteira.svg"); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; border-radius: var(--radius); }
#panelClientePopup .panel{ padding: 12px; background: transparent; border-radius: var(--radius); flex: 1 1 auto; min-height: 100%; box-sizing: border-box; border: none; margin: 0; box-shadow: none; }
#panelClientePopup .pill{ border:none !important; }
#panelClientePopup input, #panelClientePopup select, #panelClientePopup textarea{ border:none !important; }
/* Limpar linhas/bordas internas para visual mais clean dentro do popup */
#panelClientePopup .cli-summary .cli-row{ border-bottom:none; }
#panelClientePopup .cli-summary .cli-row:last-child{ border-bottom:none; }
#panelClientePopup{ border: none; outline: none; }
#panelClientePopup .modal-close{ border: none; }
#panelClientePopup table, #panelClientePopup th, #panelClientePopup td{ background: transparent; }
#panelClientePopup .divider{ display:none; }
#panelClientePopup table, #panelClientePopup th, #panelClientePopup td{ border:none !important; }
#panelClientePopup::-webkit-scrollbar-thumb{ border:none !important; }
#panelAssessorDonut .panel{ display:flex; flex-direction:column; align-items:center; }
#assessorDistribDonut{ display:block; margin:10px auto; }
#panelClientePopup{ overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.06); }
#panelClientePopup:hover{ scrollbar-color: rgba(255,255,255,0.30) rgba(255,255,255,0.08); }
#panelClientePopup::-webkit-scrollbar{ width: 8px; height: 8px; }
#panelClientePopup::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); border-radius: var(--radius); }
#panelClientePopup::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.22); border-radius: 8px; border: 2px solid rgba(0,0,0,0.35); }
#panelClientePopup:hover::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.30); }
#panelClientePopup h3{ margin: 0 0 10px 0; font-size: 19px; }
#panelClientePopup .client-name-highlight{ font-size: 32px; color: var(--accent); padding: 0; border: 0; background: transparent; border-radius: 0; }
  .cli-pop-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 10px; align-items:end; }
  /* Layout novo: duas colunas com espaçamento claro */
  .cli-two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items:start; }
.cli-field{ display:flex; flex-direction:column; gap:6px; }
.cli-summary-wrap .cli-field{ gap:4px; }
/* Largura compacta unificada para campos curtos */
:root{ --cli-compact-w: 180px; }
.cli-field-compact{ width: var(--cli-compact-w); min-width: var(--cli-compact-w); }
#panelClientePopup #cliAniversarioInput, #panelClientePopup #input_aniversario_cliente{ width: var(--cli-compact-w) !important; min-width: var(--cli-compact-w) !important; }
  .cli-label{ font-size: 12px; color: var(--muted); font-weight: 600; }
  .cli-value{ font-size: 15px; line-height:1.4; }
  .cli-actions{ display:flex; gap:8px; align-items:center; }
  /* Linha de Aniversário compacta (1/3 da largura) */
.cli-field-anniv{ width: var(--cli-compact-w); min-width: var(--cli-compact-w); justify-self:start; }
.cli-field-anniv .cli-label{ font-size:11px; }
.cli-field-anniv #cliDataAniversario{ font-size:14px; }
.cli-field-anniv input{ min-width:120px; }
  .cli-summary-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Resumo financeiro mais compacto e com donut ao lado */
.cli-summary-wrap{ display:inline-grid; width:max-content; grid-template-columns: max-content max-content auto auto; column-gap: 10px; row-gap: 6px; align-items:center; }
.cli-donut{ width:208px; height:208px; display:flex; align-items:center; justify-content:center; justify-self:start; margin-left:20px; }
#panelClientePopup .cli-typechart{ width:208px; height:208px; display:flex; align-items:center; justify-content:center; justify-self:start; margin-left:20px; }
#panelClientePopup .cli-typechart canvas { width: 100% !important; height: 100% !important; }
#cliDistribDonut{ width:208px; height:208px; display:block; }
  .cli-summary .cli-value{ font-family: ui-monospace, Consolas, monospace; font-size: 15px; }
  .cli-actions-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin:16px 0 20px 0; width:100%; }
  .btn-action-modern{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s ease; text-decoration:none; white-space:nowrap; border:1px solid var(--line); background:var(--panel-2); color:#e9e6da; box-shadow:0 2px 5px rgba(0,0,0,.1); }
  .btn-action-modern:hover{ background:#4a4a4a; border-color:#bbb; transform:translateY(-2px); color:#e9e6da; }
  .btn-action-modern:active{ transform:scale(.98); }
  .btn-action-modern i{ font-size:16px; color:var(--accent); }
  .btn-action-modern.primary{ background:rgba(255,173,0,.15); border-color:var(--accent); color:var(--accent); }
  .btn-action-modern.primary:hover{ background:var(--accent); color:#111; }
  .btn-action-modern.primary:hover i{ color:#111; }
  .btn-action-modern .badge-count{ background:var(--color-negative); color:#e9e6da; font-size:11px; font-weight:700; min-width:20px; height:20px; padding:0; border-radius:50%; margin-left:auto; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,0.3); }
  /* Separadores discretos por linha nas duas colunas do resumo */
  .cli-summary .cli-field{ align-self: center; }
.cli-summary .cli-label{ display:block; padding-bottom:2px; border-bottom:1px solid rgba(255,255,255,0.07); min-height:18px; line-height:18px; }
.cli-summary .cli-value{ display:block; padding-bottom:0; border-bottom:none; }
  .cli-summary .cli-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:26px; border-bottom:1px solid rgba(255,255,255,0.07); }
.cli-summary .cli-row:last-child{ border-bottom:none; }
  .cli-summary .cli-row span:first-child{ width:40px; display:inline-flex; justify-content:center; }
.cli-summary .cli-row.total-row span:first-child{ width:auto; text-align:left; }
/* Efeito visual de hover nas linhas de detalhe financeiro e tabelas */
.cli-summary .cli-row:not(.total-row):hover,
#cliYieldByCurrency .cli-row:not(.total-row):hover,
#comPopTable tbody tr:hover {
  background: rgba(158,197,255,0.12) !important;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}
#panelClientePopup .tx-receipt-wrap{ gap: 8px; align-items: center; }
#panelClientePopup #cliTelefoneInput{ height:32px; padding:0 8px; }
.roi-pill{ font-size:14px; padding:4px 12px; font-weight:700 }
.cli-typechart-wrap{ display:flex; align-items:center; gap:8px }

  .exp-rate-var.profit{ background:#2a6c3e; }
  .exp-rate-var.loss{ background:#6c2a2a; }
  .exp-rate-var.neutral{ background:#505050; color:#e9e6da; }
  /* Barra de alertas de aniversários — igual à de vencimentos */
  #dashAnivAlert{ padding:8px 60px; background:#2a2a2a; border-radius:8px; margin:0 60px 16px 60px; cursor:pointer; transition:.2s ease; }
  #dashAnivAlert:hover{ background:#333; }
  .notice{font-size:12px;color:#cfcfcf;margin-top:6px}
  #alertsBar{padding:8px 60px;background:#2a2a2a;border-radius:8px;margin:0 60px 16px 60px;cursor:pointer;transition:.2s ease}
  #alertsBar:hover{background:#333}
  
  /* Filtros dinâmicos */
  .filter-btn{background:#404040;color:#e9e6da;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:.2s ease;white-space:nowrap}
  .filter-btn:hover{background:#555}
  .filter-btn[data-active="true"]{background:var(--accent);color:#e9e6da}
  .filter-btn.clear-btn{background:#666;color:#e9e6da}
  .filter-btn.clear-btn:hover{background:#777}
  .divider-vertical{width:1px;height:20px;background:var(--line);margin:0 4px}
  
  /* Cabeçalhos fixos */
  .panel{position:relative}
  table{position:relative}
  table thead{position:sticky;top:0;z-index:10;background:var(--panel-2)}
  table thead th{background:var(--panel-2);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
  
  /* Painel de métricas */
  .metrics-panel{padding:0 60px 16px 60px}
  .metrics-grid{display:grid;gap:18px;width:100%}
  #metricsPanel .metrics-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  #panelDashboard .metrics-grid{grid-template-columns:0.9fr 0.9fr 1.3fr 1.1fr 1.1fr 1.1fr 1.1fr;gap:12px;align-items:stretch}
  .metric-card{background:#242424;border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:14px 18px;text-align:center;cursor:pointer;transform:scale(var(--card-scale,1));display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,0.35);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;width:100%}
  .metric-card:hover{border-color:rgba(255,173,0,0.35);transform:scale(var(--card-scale,1)) translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.5);background:#2b2b2b}
  #metricsPanel .metric-card,
  #panelDashboard .metric-card{background:#2d2d2d !important}
  #metricsPanel .metric-card:hover,
  #panelDashboard .metric-card:hover{background:#333333 !important}
  .metric-value{font-size:clamp(1.1rem,1.8vw,1.5rem);font-weight:700;color:var(--ink);margin-top:2px;margin-bottom:2px;font-family:'JetBrains Mono','SFMono-Regular','Menlo',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric-label{font-size:11px;color:var(--ink);text-transform:uppercase;letter-spacing:1px;font-weight:600;opacity:0.8}

  #expYieldDashCard .metric-value{
    white-space:pre-line;
    text-overflow:clip;
    text-align:left;
    font-size:0.85rem;
    line-height:1.4;
    font-family:'JetBrains Mono',monospace;
    overflow:hidden;
  }

  @media (max-width:1024px){
    #panelDashboard .metrics-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:768px){
    .metrics-grid,
    #panelDashboard .metrics-grid{grid-template-columns:1fr}
  }
/* TV stacked widgets on right card */
.tv-stack{margin-top:0;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tv-stack-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid var(--line);min-height:48px}
.tv-title{font-size:19px;color:#e9e6da;font-weight:600}
.toggle-btn{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--accent);color:#111;font-weight:600;cursor:pointer}
.toggle-btn:hover{filter:brightness(1.05)}
.tv-widgets{position:relative;padding:4px 6px}
.tv-stack .tradingview-widget-container__widget{width:100%}
.tv-widget{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .28s ease;display:flex;align-items:center;justify-content:center}
.tv-widget.active{opacity:1;visibility:visible}
  .totals-row{font-weight:700;background:#2f2f2f}
  .subtot{background:#353535}
  /* Coffee grid/cards: mesmo visual das outras abas */
  /* Coffee: igualar grid e visual ao Dashboard */
  .coffee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:8px}
  .coffee-card{background:var(--panel);border:none;border-radius:8px;padding:12px;text-align:center;transition:.2s ease;cursor:pointer}
.coffee-card .tradingview-widget-container__widget{width:100%}
/* Footer ticker tape alignment */
#tickerTape{width:100%;display:block;padding:0;box-sizing:border-box;margin:8px 0;min-height:72px;}
#tickerTape .tradingview-widget-container{width:100%;height:100%;}
#tickerTape .tradingview-widget-container__widget{width:100%;height:100%;}
  .coffee-loader{background:var(--panel-2);border:none;border-radius:8px;padding:16px;color:var(--muted);text-align:center}
  /* Forçar visibilidade e contraste dos cards do Coffee */
  .coffee-card{min-height:120px;color:var(--ink)}
  .coffee-card table{color:var(--ink)}
  .coffee-grid{position:relative;z-index:1}
  /* Translucidez dos cards na aba Coffee para mostrar o fundo do grid */
  #panelCoffee .coffee-card{ background: rgba(0,0,0,0.35); }
  /* Espaçamento inferior para os cards não tocarem a borda e borda do grid mais fina */
  #panelCoffee{ border-width: 0.5px; }
  #panelCoffee{ border-top-width: 0.25px; }
  #panelCoffee .coffee-grid{ margin-bottom: 12px; }
/* Ajuste de layout Coffee: reduzir largura da agenda em ~15% e centralizar */
#panelCoffee #coffeeGrid{ justify-content:center; grid-template-columns: 60% 40%; }

/* Empilhamento vertical da Agenda e Heatmap no mobile */
@media (max-width: 768px){
  #panelCoffee #coffeeGrid{ grid-template-columns: 1fr !important; }
  #panelCoffee #coffeeCalendarCard, #panelCoffee #coffeeHeatmapCard{ grid-column: 1 / -1; width: 100%; }
}

#panelCoffee #coffeeCalendarCard{ grid-column: 1; }
#panelCoffee #coffeeHeatmapCard{ grid-column: 2; }
  /* Transições suaves de painéis (efeito app-like) */
  .panel-anim{opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease}
  .panel-anim.active{opacity:1;transform:translateY(0)}
  #reinvestSelectorContainer{margin:12px 0 8px 0;display:flex;gap:12px;flex-wrap:nowrap;align-items:center}
  @media (max-width:980px){
 .grid{grid-template-columns:repeat(12,1fr);gap:16px}
 .header{padding:6px 16px}
 .bar{padding:0 16px 12px 16px}
 .wrap{padding:0 16px 16px 16px}
  }
.warn-row td{background:rgba(255,173,0,.12)}
.badge-warn{background:var(--warn);color:#000}

/* ----- Modal de Cotações ----- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.55);display:none;align-items:center;justify-content:center;z-index:1000}
.modal.show{display:flex}
.modal-content{background:rgba(30,32,38,0.85) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.08);border-radius:20px;min-width:320px;max-width:980px;width:92%;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);color:#e9e6da}
#quoteModal .modal-content { background: #2d2d2d !important; }
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 15px 16px;border-bottom:1px solid rgba(255,255,255,0.05);margin-bottom:20px}
.modal-title{font-size:16px;font-weight:700; flex:1; display:flex; align-items:center; gap:10px; justify-content:flex-start; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.modal-close{background:transparent;border:none;color:#ddd;font-size:22px;line-height:1;cursor:pointer}
.modal-body{padding:12px 16px}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-item{display:flex;flex-direction:column;gap:4px}
.modal-label{font-size:12px;color:#bbb}
.modal-value{font-size:15px}
.modal-value.positive{color:#4ade80}
.modal-value.negative{color:#f87171}
  .price-chart{width:100%;height:240px;margin:12px 0;border:1px solid var(--line);border-radius:8px;background:var(--panel-1);position:relative;overflow:hidden}
  .chart-canvas{width:100%;height:100%;display:block}
  .chart-tooltip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);color:var(--ink);padding:6px 8px;border-radius:6px;font-size:12px;white-space:nowrap;box-shadow:0 6px 14px rgba(0,0,0,.3);z-index:10}
  .modal-title{display:flex;align-items:center;gap:10px; flex:1; justify-content:flex-start; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
  .modal-subprice{color:var(--muted);font-weight:600}

/* ----- Estilos Builder ----- */
.builder-tab{background:#404040;color:#e9e6da;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px;transition:.2s ease;white-space:nowrap}
  .builder-tab:hover{background:#555}
  /* Hover igual à tabela de contratos para a tabela diária */
  #dailyPopTable tbody tr:hover{ background: rgba(158,197,255,0.12); }
#comPopTable tbody tr:hover{ background: rgba(158,197,255,0.12); }
#cliVerContratosBtn{ position:relative; }
.badge-count{ position:absolute; top:-6px; right:-6px; background:#c62828; color:#e9e6da; border-radius:10px; padding:0 6px; font-size:12px; line-height:18px; min-width:18px; text-align:center; box-shadow:0 0 0 2px rgba(0,0,0,0.35); }
.soon-alert{ display:flex; align-items:center; gap:8px; background:rgba(198,40,40,0.18); border:1px solid rgba(198,40,40,0.6); color:#ffdddd; border-radius:8px; padding:6px 8px; margin-bottom:6px; font-size:12px; }
.soon-alert .soon-dot{ width:10px; height:10px; border-radius:50%; background:#c62828; display:inline-block; }
  /* Compactar células para caber sem rolagem e evitar overflow */
  #dailyPopTable{ table-layout:fixed; }
  #dailyPopTable th, #dailyPopTable td{ padding:4px 6px; font-size:12px; }
#panelDailyPopup{ max-height:86vh; overflow:hidden; width:min(98vw, 1400px); }
#panelDailyPopup .modal-body{ max-height:76vh; overflow:auto; }
.builder-tab.active{background:var(--accent);color:#e9e6da}
.builder-tab-content{display:none}
.builder-tab-content.active{display:block}


  /* Overrides para alinhar bordas inferiores entre botões e chips */
  .bar{align-items:flex-end}
  .buttons{align-items:flex-end}
.prices{align-items:flex-end}
  /* Ajustes finos solicitados */
  @media (min-width: 981px){ .header{padding:6px 60px 4px 60px} }
  .title{transform:translateY(-18px)}


  /* Faixa superior com fundo único (qualidade nativa, sem upscale + fade laterais suavizado) */
  .top-bg-wrap{
    /* Removido o fade lateral: apenas a imagem de fundo */
    background-image: url('Fundo top.svg');
    background-repeat: no-repeat;
    background-position: center center; /* Centraliza completamente */
    background-size: cover; /* Garante cobertura uniforme da área */
  }
  .header{ background: transparent; }
  .bar{ background: transparent; }
  @media (min-width: 981px){
    /* Container centralizado com limite de largura e padding otimizado */
    .header, .bar, .wrap {
      max-width: 1600px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
    
    /* Padding lateral unificado em 15px */
    .header{ padding: 6px 15px 0 15px; }
    .bar{ padding: 0 15px 0 15px; }
    
    /* Wrap com padding lateral de 15px e margem superior ajustada */
    .wrap{ padding: 0 15px 30px 15px; margin-top: -10px; }
    
    .panel{ border: none; box-shadow: 0 4px 24px rgba(0,0,0,0.25); border-radius: 16px; }
    /* Redução de gap do grid principal (de 24px para 16px) */
    .grid{ gap: 16px; }
  }
  @media (max-width: 1920px){
    .top-bg-wrap{ background-size: cover; background-position: center center; }
  }


#mobileNavOverlay{ transition: opacity .2s ease }
#mobileNavOverlay .sheet{ transform: translateY(18px); opacity: 0; transition: transform .2s ease, opacity .2s ease; padding-bottom: 90px }
#mobileNavOverlay.open{ opacity: 1 }
#mobileNavOverlay.open .sheet{ transform: translateY(0); opacity: 1 }
#filtersBar.filters-collapsed #filtersList{ display: none }
.modal{ transition: opacity .2s ease; will-change: opacity; transform: translateZ(0); }
.modal .modal-content{ transform: translateY(18px) translateZ(0); opacity: 0; transition: transform .2s ease, opacity .2s ease; will-change: transform, opacity; }
.modal.show .modal-content{ transform: translateY(0) translateZ(0); opacity: 1 }
/* Aplicar a mesma animação a modais tipo overlay */
.modal-overlay .modal-dialog{ transform: translateY(18px) scale(0.98) translateZ(0); opacity: 0; transition: transform .2s ease, opacity .2s ease; will-change: transform, opacity; }
.modal-overlay.open .modal-dialog{ transform: translateY(0) scale(1) translateZ(0); opacity: 1 }
.modal-content{ position: relative }
.modal-header, .modal-body{ position: relative; z-index: 1 }
.modal-content::after{ content:""; position:absolute; right:28px; bottom:52px; width:120px; height:120px; background-image: var(--modal-watermark); background-repeat:no-repeat; background-size: contain; opacity:.7; pointer-events:none; z-index:0 }


@media (max-width: 480px){
  .modal-content::after{ width:96px; height:96px; bottom:50px; right:28px }
}


@media (max-width: 768px){
  .header{padding:4px 12px}
  .header-left{gap:6px}
  .logo{height:360px !important;transform:translate(-52px,6px)}
  .logo-wrap{clip-path: inset(12px 14px 12px 12px)}
  .title{font-size:18px;transform:none}
  .header-actions{gap:6px}
  button{min-height:40px;padding:10px 12px}
  .bar{padding:0 12px 10px 12px}
  .prices{flex-wrap:wrap;gap:6px}
  #loginScreen > div{width:92vw;padding:20px}
  #loginScreen img{height:160px}
  #loginScreen input{font-size:16px}
  #loginScreen #btnLogin{font-size:16px}
  .table{display:block;overflow-x:auto}
  #tblContratos{display:block;overflow-x:auto}
  .metric-card{min-width:100%;margin-bottom:8px}
  #cliAssetChartContainer{height:200px}
  #cliAvgPriceBox{min-height:200px}
  .modal-overlay .modal-dialog{width:calc(100% - 24px);max-height:calc(100vh - 24px);overflow:auto}

  /* Centralizar tudo na tela de login */
  #loginScreen {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center center !important; /* Centraliza a img de fundo */
  }

  /* Exibir e destacar a Logo Mobile */
  #mobileLoginLogo {
    display: block !important;
    width: 216px; /* 20% maior para celular */
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)); /* Sombra para destacar do fundo */
    animation: fadeInDown 0.8s ease-out;
  }

  /* Modernizar a Caixa de Login (Glassmorphism) */
  #loginFormBox {
    position: static !important; /* Remove a posição fixa da direita */
    transform: none !important;
    margin: 0 !important;
    width: 85% !important; /* Largura confortável */
    max-width: 380px;

    /* Efeito de Vidro Moderno */
    background: rgba(30, 30, 30, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Animação suave para a logo aparecer */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px){
  .header{padding:1px 12px}
  .logo{height:216px !important;transform:translate(-45px,4px) !important}
  .logo-wrap{clip-path: inset(12px 14px 12px 12px)}
  .title{font-size:16px}
  button{min-height:44px;padding:10px 12px;font-size:14px}
  #loginScreen > div{min-height:auto}
  #cliAssetChartContainer{height:180px}
  #cliAvgPriceBox{min-height:180px}
  #btnToggleFilters{display:inline-block}
  /* Melhor visibilidade dos cards da aba Coffee em telas pequenas */
  #panelCoffee .coffee-grid{gap:10px}
  #panelCoffee .coffee-card{background:var(--panel);padding:12px}
}
@media (max-width: 360px){
  .bar{ padding:0 12px 10px 12px }
  .buttons{ display:grid; grid-template-columns: 1fr; gap:6px }
  .buttons button{ width:100%; justify-content:center }
  .prices{ flex-wrap:wrap; gap:6px }
  #btnHamburger{ display:inline-block }
  #btnToggleFilters{ display:inline-block }
}
/* --- Correção Mobile para Dashboard --- */
@media (max-width: 768px) {
  /* Força layout em coluna única */
  #panelDashboard .grid.grid-tight, #panelDashboard .alloc-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important;
  }
  /* Reseta larguras fixas das colunas e painéis */
  #panelDashboard .col-6, #panelDashboard .alloc-left, #panelDashboard .alloc-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Ajusta o Gráfico de Rosca (Donut) */
  #panelDashboard .donut-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  #dashDistribChart {
    width: 100% !important;
    height: auto !important;
    max-height: 300px; /* Limita altura para não ocupar tela toda */
  }
  /* Ajusta os Widgets da Direita (Barras e TradingView) */
  #dashTypeCard, #dashRightWidget {
    width: 100% !important;
    min-width: 0 !important;
  }
  #dashTypeStackChart {
    width: 100% !important;
    height: auto !important;
  }
}

/* --- BLOX CAROUSEL STYLES --- */
.carousel-controls { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 16px; margin-bottom: 20px; z-index: 10; position: relative; }
.controls-center { justify-self: center; display:flex; align-items:center; justify-content:center; gap:8px; }
.controls-center .carousel-search { width:auto; max-width:400px; }
.controls-right { justify-self: end; }
#carouselCount { color: var(--muted); font-weight: 600; }
.all-clients-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.client-mini { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.client-mini:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); border-color: var(--accent); }
.client-mini .avatar-circle { width: 32px; height: 32px; font-size: 14px; }
.client-mini .mini-name { font-weight: 600; }
.client-mini .mini-total { margin-left: auto; font-family: monospace; }
.carousel-search { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); color: #e9e6da; padding: 12px 24px; border-radius: 99px; outline: none; transition: 0.3s; font-size:16px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.carousel-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,173,0,0.2); }

.carousel-wrapper { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; min-height: auto; padding: 40px 0; background: url('Fundo Carrossell.svg') center / cover no-repeat; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; width: 100%; scroll-behavior: smooth; padding: 20px; align-items: center; scrollbar-width: none; -ms-overflow-style: none; position: relative; }
.carousel-track::-webkit-scrollbar { display: none; }

.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.15); color: #e9e6da; border: 1px solid rgba(255,255,255,0.2); width: 50px; height: 50px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 50; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; transition: 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.nav-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.1); }
.nav-prev { left: 0; } .nav-next { right: 0; }
/* Force-hide Builder UI elements */
#navBuilder, #mnavBuilder, #btnBuilder { display:none !important; }
#panelBuilder { display:none !important; }
/* Ocultar botões indevidos no painel de clientes e navegação */
#panelClientes .panel-header .btn-assessor,
#panelClientes .panel-header .btn-cliente,
#panelClientes .panel-header .btn-contratos,
#panelClientes .panel-header .btn-dashboard,
#panelClientes .panel-header .btn-coffee { display: none !important; }
#navAssessor, #navCliente, #navContratos, #navDashboard, #navCoffee,
#mnavAssessor, #mnavCliente, #mnavContratos, #mnavDashboard, #mnavCoffee { display:none !important; }

/* Card Styling */
.client-card { background: linear-gradient(180deg, #4a4a4a 0%, #1a1a1a 100%); border: 1px solid var(--line); border-radius: 20px; width: 360px; min-width: 360px; height: 500px; padding: 24px; position: relative; transition: all 0.5s ease; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 1; transform: none; cursor: pointer; }
.client-card.card-highlight { animation: cardPulse 900ms ease; box-shadow: 0 0 0 2px var(--accent), 0 14px 28px rgba(255,173,0,0.22); transform: scale(1.02); }
@keyframes cardPulse { 0% { transform: scale(1.00); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } 50% { transform: scale(1.03); box-shadow: 0 0 0 2px var(--accent), 0 18px 36px rgba(255,173,0,0.28); } 100% { transform: scale(1.00); box-shadow: 0 10px 30px rgba(0,0,0,0.5); } }
.client-card.active { opacity: 1; transform: scale(1.05); border-color: var(--accent); z-index: 10; background: linear-gradient(180deg, #5a5a5a 0%, #2a2a2a 100%); box-shadow: 0 20px 30px rgba(0,0,0,0.7), 0 0 0 1px var(--accent); }
/* Zoom Reveal */
.client-card.card-open { transform: scale(1.08); box-shadow: 0 30px 60px rgba(0,0,0,0.85), 0 0 0 1px var(--accent); z-index: 120; }
.card-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.35s ease; z-index: 110; }
.card-overlay.show { opacity: 1; }

/* Destaque Nome Cliente (Popup) */
  .client-name-highlight {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--accent) !important;
    position: relative;
    display: inline-block;
  margin-left: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.client-name-highlight::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: -5%;
  width: 110%;
  height: 14px;
  background: linear-gradient(90deg, rgba(255, 173, 0, 0) 0%, rgba(255, 173, 0, 0.5) 50%, rgba(255, 173, 0, 0) 100%);
  z-index: -1;
  filter: blur(6px);
  transform: skewX(-20deg) rotate(-1deg);
  opacity: 0.8;
}
.client-card.new-client { outline: 2px solid var(--accent); }

.card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
.avatar-circle { width: 45px; height: 45px; background: var(--panel-2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--accent) !important; border: 1px solid var(--line); margin-right: 10px; font-size:18px; }
.balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: rgba(0,0,0,0.2); padding: 12px; border-radius: 10px; }
.balance-item { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); }
.balance-item span { font-size: 14px; font-weight: bold; color: #e9e6da; margin-top:2px; }
.total-display { text-align: center; margin-top: 10px; background:var(--panel-2); padding:10px; border-radius:10px; }
.total-display small { color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; font-weight:700; }
.total-display div { font-weight: 700; color: #fff; margin-top:4px; }

@media (max-width: 768px) { .client-card { min-width: 300px; width: 300px; height:auto; scroll-snap-align:center; } .carousel-wrapper { min-height: auto; padding-bottom: 40px; } .carousel-track { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; gap:16px; } .nav-btn { display:none; } }

/* --- Estilos para o Toggle e Logo de Status (Client Card) --- */
.client-status-toggle { 
    /* Reposicionado para o lugar da logo (canto superior esquerdo do header) */
    position: relative; /* Mudado de absolute para fluir no flex container se necessário, ou ajustar via margens */
    width: 34px; 
    height: 18px; 
    background: #333; 
    border-radius: 20px; 
    cursor: pointer; 
    z-index: 100; 
    transition: all 0.3s ease; 
    border: 1px solid rgba(255,255,255,0.4); 
    display: block !important;
    margin-right: 10px; /* Espaço para o próximo elemento */
} 
.client-status-toggle::after { 
    content: ''; 
    position: absolute; 
    top: 1px; 
    left: 1px; 
    width: 14px; 
    height: 14px; 
    background: #fff; 
    border-radius: 50%; 
    transition: transform 0.3s, background 0.3s; 
    z-index: 101;
} 
.client-status-toggle:hover {
    border-color: #fff;
    background: #000;
}
.client-status-toggle.active { 
    background: rgba(71, 195, 144, 0.4); 
    border-color: #47c390; 
} 
.client-status-toggle.active::after { 
    transform: translateX(16px); 
    background: #47c390; 
    box-shadow: 0 0 6px rgba(71, 195, 144, 0.8); 
} 
.client-active-logo { 
    width: 0; 
    height: 40px; 
    opacity: 0; 
    transform: scale(0); 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    object-fit: contain; 
    margin-top: 10px;
    align-self: center; /* Centralizar no container vertical */
} 
.client-card.service-active .client-active-logo { 
    width: 120px; /* Tamanho ajustado para logo visível */
    opacity: 1; 
    transform: scale(1); 
} 
.client-card.service-active {
    /* Efeito de escurecimento suave */
    background: #000 !important;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8), 0 20px 30px rgba(0,0,0,0.7), 0 0 0 1px var(--accent);
}
.client-card.service-active .avatar-circle { 
    border: 2px solid #47c390; 
}



@media (max-width: 480px){
  /* Correção: chips de preço não devem sair do grid no celular */
  #pricesBar{ flex-wrap:wrap }
  .prices{ flex-wrap:wrap; gap:6px; width:100% }
  .price-chip{ box-sizing:border-box; width:100%; min-width:0 }
}

/* --- Correção do Grid Interno do Dashboard --- */
.dashboard-inner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px; /* Layout original Desktop */
  gap: 8px;
  align-items: start;
  overflow: hidden;
}

/* Regra Mobile: Empilhar verticalmente e liberar largura */
@media (max-width: 768px) {
  .dashboard-inner-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Forçar o widget da direita a ocupar 100% da tela no mobile (era fixo em 336px) */
  #dashRightWidget {
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 400px; /* Garante altura mínima para o gráfico técnico */
  }
  /* Forçar o card da esquerda a ocupar 100% também */
  #dashTypeCard {
    width: 100% !important;
  }

  /* Compactar container de ações */
  .header-actions {
    gap: 4px !important; /* Reduz espaço entre botões */
    margin-left: 8px !important;
  }
  /* Botões menores */
  .header-actions button {
    padding: 6px 8px !important; /* Botões menos largos */
    font-size: 12px !important;
    height: 32px !important;
  }
  /* Otimizar botão de Conta (esconder texto, manter ícone) */
  #userMenuEmailShort {
    display: none !important;
  }
  /* Ajuste fino no botão Serviços */
  #btnServices {
    padding-right: 4px !important;
    padding-left: 8px !important;
  }
}



  /* Modal Yield Test - Overlay */
  #modalSimuladorEficiencia { 
      display: none; /* Controlled by JS */
      position: fixed !important; 
      z-index: 10000 !important; 
      left: 0; 
      top: 0; 
      width: 100%; 
      height: 100%; 
      overflow: auto; 
      background-color: rgba(0,0,0,0.8) !important; 
      backdrop-filter: blur(5px); 
      /* Flex centering defaults */
      align-items: center; 
      justify-content: center;
  } 
  
  /* Modal Yield Test - Content */
  #modalSimuladorEficiencia .panel { 
      background-color: #1e1e1e !important; 
      margin: 5% auto; /* Fallback if flex fails, but flex handles centering */
      padding: 20px; 
      border: 1px solid #FFAD00 !important; 
      width: 90%; 
      max-width: 800px !important; 
      border-radius: 10px; 
      position: relative; 
      box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
  } 
  
  /* Força o modal Yield Test a ficar no topo */ 
  #modal_yield_auto { 
      display: none; /* Começa oculto */ 
      position: fixed !important; 
      top: 0; 
      left: 0; 
      width: 100vw; 
      height: 100vh; 
      background: rgba(0, 0, 0, 0.85); 
      backdrop-filter: blur(5px); 
      z-index: 2147483647 !important; /* Valor máximo permitido */ 
      overflow-y: auto; 
  } 
  #modal_yield_auto .modal-content { 
      position: relative; 
      margin: 5% auto; 
      padding: 20px; 
      width: 90%; 
      max-width: 600px; 
      background: #222; 
      border: 2px solid #FFAD00; /* Amarelo Blox */ 
      border-radius: 12px; 
      color: #e9e6da; 
      box-shadow: 0 0 50px rgba(0,0,0,0.8); 
  } 
  /* Botão de fechar */ 
  #modal_yield_auto .close-yield { 
      position: absolute; 
      top: 10px; 
      right: 15px; 
      color: #fff; 
      font-size: 24px; 
      cursor: pointer; 
      font-weight: bold; 
      background: none;
      border: none;
  }
  /* Onboarding Widget Styles */
  .onboarding-card {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 173, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.5s ease-out;
    transition: opacity 0.5s ease;
  }
  .onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .onboarding-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #FFAD00;
    font-size: 1rem;
  }
  .onboarding-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
  }
  .onboarding-close-btn:hover { color: #fff; }
  .onboarding-steps { display: flex; flex-direction: column; gap: 10px; }
  .onboarding-step {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }
  .onboarding-step:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
  }
  .step-icon {
    width: 24px;
    display: flex;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 12px;
  }
  .step-content { flex: 1; display: flex; flex-direction: column; }
  .step-text { font-weight: 600; color: #e9e6da; font-size: 0.9rem; }
  .step-subtext { font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); }
  .step-arrow { color: rgba(255, 255, 255, 0.2); font-size: 0.8rem; }
  .onboarding-step.completed .step-icon { color: #00ff88; }
  .onboarding-step.completed .step-icon i::before { content: "\f058"; font-weight: 900; }
  .onboarding-step.completed .step-text { text-decoration: line-through; color: rgba(233, 230, 218, 0.5); }
  @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

 
  /* HERO SECTION - REFINAMENTO FINAL */ 
  #hero-section { 
    position: relative; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; /* Alinha na base */ 
    /* Padding: Topo 20px | Direita 60px | Base 30px | Esquerda 60px */ 
    padding: 20px 60px 20px 60px; 
    margin-top: 0; 
    margin-bottom: 0; 
    z-index: 1; 
    
    background-image: url('fundo-hero.png'); 
    background-size: cover; 
    background-position: center bottom; 
    background-repeat: no-repeat; 
    border-radius: 0 0 20px 20px; 
    min-height: auto; 
  } 

  #hero-section .logo-hero { 
    height: 400px; 
    width: auto; 
    display: block; 
    transform: translateX(-54px); /* Compensação visual da esquerda */ 
    margin-bottom: -10px; 
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.4)); 
  } 

  #pricesBar { 
    margin-left: auto; 
    margin-bottom: 0; 
    display: flex; 
    gap: 16px; 
    padding-bottom: 5px; /* Leve respiro da base da imagem */ 
  } 

  /* Mobile */ 
  @media (max-width: 980px) { 
    #hero-section { 
      padding: 40px 20px; /* Padding menor no celular */ 
      flex-direction: column; 
      align-items: center; 
      margin-bottom: 0; 
    } 
    #hero-section .logo-hero { 
      height: 220px; 
      transform: none; 
      margin-bottom: 20px; 
    } 
    #pricesBar { 
      justify-content: center; 
      width: 100%; 
    } 
  } 


#system-alert-banner{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background-color:#d32f2f;
  color:#e9e6da;
  text-align:center;
  padding:12px;
  font-weight:600;
  z-index:100000;
  box-shadow:0 2px 5px rgba(0,0,0,0.3);
  font-family:'Montserrat', sans-serif;
  font-size:14px;
}
body.has-alert{
  padding-top:45px;
}


  #sticky-header{ position:fixed; top:0; left:0; width:100%; height:80px; display:flex; align-items:center; justify-content:space-between; padding:0 40px; z-index:1000; background:transparent; box-sizing:border-box; transition: all 0.3s ease; }
  .mini-logo{ font-weight:800; letter-spacing:.4px; color:#e9e6da; flex:0 0 auto; }
  /* Container do Menu */
  .nav-group{ display:flex; gap:10px; align-items:center; height:100%; }
  /* Classe Mestre para Itens (Botões e Wrappers de Dropdown) */
  .nav-item{ height:34px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:8px; border:1px solid transparent; background:rgba(255,255,255,0.05); color:#e9e6da; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all 0.2s ease; text-decoration:none; position:relative; }
  .nav-item:hover{ background:rgba(255,255,255,0.1); color:var(--accent); border-color:rgba(255,255,255,0.1); }
  /* Header destacado da Evolução */
  .evolution-header { color: #e9e6da; font-size: 19px; font-weight: 700; margin: 6px 0 12px 0; display: flex; align-items: center; gap: 8px; }
.btn-chart-highlight:hover { background: var(--accent) !important; color: #000 !important; border-color: var(--accent) !important; }
  /* Ajuste específico para Dropdown */
  .nav-item.dropdown{ padding:0; background:transparent; border:none; }
  .drop-trigger{
    height:100%;
    width:100%;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(255,255,255,0.05);
    border-radius:8px;
    cursor:pointer;
    transition:0.2s;
    color: inherit;
    font: inherit;
  }
  .nav-item.dropdown:hover .drop-trigger{ background:var(--accent); color:#000; }
  /* Menu Flutuante (Dropdown) */
  .dropdown-menu{ position:absolute; top:100%; left:0; margin-top:8px; background:#252525; border:1px solid #444; border-radius:8px; min-width:160px; box-shadow:0 10px 30px rgba(0,0,0,0.5); opacity:0; visibility:hidden; transform:translateY(10px); transition:all 0.2s ease; display:flex; flex-direction:column; overflow:hidden; }
  .dropdown-menu.right-aligned{ left:auto; right:0; }
  .nav-item.dropdown:hover .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-menu a{ padding:12px 16px; color:#e9e6da; text-decoration:none; display:block; text-align:left; border-bottom:1px solid #333; }
  .dropdown-menu a:last-child{ border:none; }
  .dropdown-menu a:hover{ background:#333; color:var(--accent); }
  .dropdown-menu button{ padding:12px 16px; color:#e9e6da; background:transparent; border:0; text-align:left; display:block; border-bottom:1px solid #333; cursor:pointer; }
  .dropdown-menu button:last-child{ border:none; }
  .dropdown-menu button:hover{ background:#333; color:var(--accent); }
  .dropdown-email{ padding:12px 16px; color:#e9e6da; border-bottom:1px solid #333; font-size:13px; }
  /* Estado visual do botão Sigilo ativo */
  .sigilo-btn[aria-pressed="true"]{ background:var(--accent); color:#111; border-color:rgba(255,255,255,0.2) }
  /* Botão sino + badge */
  .nav-alert{ position:relative; }
  .badge-count{ position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#e53935; color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
  
  /* Notification Dropdown (Sino) - Visual corrigido */
  .notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    z-index: 10000;
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    padding: 0;
  }
  @media (max-width: 768px) {
    .notification-dropdown {
      position: fixed;
      top: 60px;
      left: 5%;
      width: 90%;
      right: auto;
    }
  }

  /* Hover dos itens de Avisos como botões */
  #alertsModal .alert-clickable{ cursor:pointer; transition:background-color .15s ease, color .15s ease; }
  #alertsModal .alert-clickable:hover{ background:var(--accent); }
  #alertsModal .alert-clickable:hover td{ color:#000; }
  /* Sigilo: mascarar nomes, valores e totais */
  .privacy-mode .client-name-highlight,
  .privacy-mode #evCliente,
  .privacy-mode [data-sensitive="name"]{
    color: transparent !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.35);
  }

  /* Ocultar totais do dashboard e gráficos em modo sigilo */
  .privacy-mode #dashMetricCarteiraBRL,
  .privacy-mode #dashMetricCarteiraUSD,
  .privacy-mode #dashMetricCarteiraBTC,
  .privacy-mode #dashMetricCarteiraETH,
  .privacy-mode #dashMetricExpYield,
  .privacy-mode #dashMetricClientes,
  .privacy-mode #dashMetricContratos,
  .privacy-mode #dashDistribChart,
  .privacy-mode #dashTypeStackChart,
  .privacy-mode #simResultadoFinal,
  .privacy-mode #simLucroEstimado {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
  }
  #hero-section{}
  #sticky-header.scrolled{ background:rgba(31,31,31,0.95); backdrop-filter:blur(10px); box-shadow:0 8px 24px rgba(0,0,0,0.35) }
  .has-sticky .bar .buttons{ display:none !important }
  /* Chips dentro do cabeçalho, parte inferior esquerda (alinhado ao card abaixo) */
  #sticky-header{ position:fixed; }
  #sticky-header #pricesBar{ position:absolute; bottom:-14px; left:50%; right:auto; transform:translateX(-50%); }
  /* Restaurado: manter #topBgWrap visível para exibir os chips de cotação */
  .content-wrap{ padding-top:15px }
  /* Removido CSS legado de dropdown baseado em .nav-dropdown */
  /* Hero chips at bottom-right (desativado ao mover para header) */
   #hero-section{ position:relative; overflow:visible }
   #hero-section #pricesBar{ position:static; margin-top:20px }
   /* Hide legacy header right and legacy bar prices */
   .header-right{ display:none !important }
   .bar .prices{ display:none !important }
   /* Crypto Ticker styles */
   .crypto-ticker-container {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-left: 24px;
     padding-left: 24px;
     border-left: 1px solid rgba(255,255,255,0.1);
     font-family: 'Inter', ui-sans-serif, system-ui;
     font-size: 11px;
     font-weight: 500;
     letter-spacing: 0.5px;
     opacity: 0;
     pointer-events: none;
     transform: translateY(-5px);
     transition: all 0.4s ease;
   }
   #sticky-header.scrolled .crypto-ticker-container {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
   }
   .ticker-chip { display:flex; align-items:center; gap:6px; color: var(--text-secondary, #aaa); }
   .ticker-val { font-weight: 600; }
   .ticker-up { color: #00E396; }
   .ticker-down { color: #FF4560; }
   @media (max-width: 768px) { .crypto-ticker-container { display: none !important; } }


    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes popIn { from { opacity:0; transform:scale(0.8); } to { opacity:1; transform:scale(1); } }
  

    #modalExpWizardOverlay button.primary{ background: var(--accent); color: #111; border: none; padding: 6px 10px; border-radius: 6px; }
    #modalExpWizardOverlay button{ background: #3a3a3a; color: #ddd; border: 1px solid var(--line); padding: 6px 10px; border-radius: 6px; }
    #modalExpWizardOverlay label{ display:block; margin-bottom:4px; }
    #modalExpWizardOverlay input, #modalExpWizardOverlay select{ width:100%; background:#2a2a2a; color:#ddd; border:1px solid var(--line); border-radius:6px; padding:6px; }
  

  /* Mobile overrides */
  @media (max-width: 768px){
    .header, .bar, .wrap{ padding:12px; }
    .logo{ height:198px; }
    .title{ font-size:18px; }
    .buttons{ flex-wrap:wrap; gap:8px }
    .buttons button{ flex:1 1 auto; min-width:140px }
    .grid{ grid-template-columns:1fr; }
    .grid > [class^="col-"]{ grid-column:1 / -1; }
    table{ font-size:12px }
    th,td{ padding:8px 10px }
    #tblContratos, #tblEvolucao, #tblCarteira, #tblComissoesCliente, #tblParams{ display:block; overflow-x:auto; }
    /* Contratos como cards (mobile) */
    #tblContratos thead{ display:none }
    #tblContratos tbody tr{ display:block; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:8px 12px }
    #tblContratos tbody td{ display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:right; padding:6px 0 }
    #tblContratos tbody td::before{ content: attr(data-label); color: var(--muted); font-weight:600; text-align:left }
    .panel{ padding:12px; border-radius:12px; }
    .price-chip{ width:100%; }
    .prices{ gap:12px }
    .modal-dialog{ width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; border-radius:0; }
    #panelDailyPopup{ width:100vw; max-height:100vh; }
    #panelDailyPopup .modal-body{ max-height:calc(100vh - 140px); overflow:auto; }
    .modal-close{ top:6px; right:6px; padding:8px 10px; }
.mobile-nav{ position:fixed; bottom:0; left:0; right:0; z-index:1000; display:flex; gap:6px; justify-content:space-between; align-items:center; padding:8px 10px; background:#0b0b0c; border-top:1px solid rgba(255,255,255,.08); }
.mobile-nav .nav-btn{ flex:1; min-width:0; padding:8px 6px; font-size:13px; line-height:18px; background:none; color:#d9d9dc; border:0; border-radius:10px; display:flex; flex-direction:column; align-items:center; gap:4px }
.mobile-nav .nav-icon{ width:22px; height:22px; display:inline-flex }
.mobile-nav .nav-label{ font-size:12px }
.mobile-nav .nav-btn.active{ color:#ffffff; background:rgba(255,255,255,.08); }
/* Ocultar permanentemente a barra inferior */
.mobile-nav{ display:none !important; }
    .nav-safe-area{ height:env(safe-area-inset-bottom); width:1px; }
    .pull-indicator{ position:absolute; left:50%; transform:translateX(-50%); top:-24px; background:#222; color:#ccc; padding:4px 8px; border-radius:10px; font-size:12px; opacity:0; transition:opacity .2s ease; pointer-events:none; }
    .pull-indicator.visible{ opacity:1; }
    .prices{ position:relative }
    /* Animação suave de entrada dos painéis */
    .panel{ transition: opacity .18s ease, transform .18s ease; }
    .panel.anim-enter{ opacity:0; transform: translateY(8px); }
    .panel.anim-enter-active{ opacity:1; transform: none; }
    @media (prefers-reduced-motion: reduce){ .panel{ transition:none } }
    /* Tabelas como cards em mobile */
    table.table-card{ display:block; border-collapse:separate; border-spacing:0; }
    table.table-card thead{ display:none }
    table.table-card tbody{ display:block }
    table.table-card tbody tr{ display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; margin:8px 0 }
    table.table-card td{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px }
    table.table-card td::before{ content: attr(data-label); font-weight:600; color:#bdbdc2; margin-right:10px }
  }
  @media (orientation: landscape){
.mobile-nav{ padding:6px 8px }
.mobile-nav .nav-btn{ font-size:13px; padding:8px 6px }

/* Rolagem horizontal no menu do cabeçalho (mobile) */
@media (max-width: 768px){
  .header-actions{ overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; padding-bottom:6px; gap:8px; }
  .header-actions button{ flex:0 0 auto; }
}

/* Uniformizar largura dos chips de cotação no mobile (V02) */
@media (max-width: 768px){
  #pricesBar .price-chip{ width:auto; flex:1 1 0; min-width:0; }
  #pricesBar .price-chip:first-child{ width:auto; }
}

}

/* Navegação superior permanece visível em telas pequenas */
@media (max-width: 820px){
}

/* Barra de preços sticky no topo com indicador de pull-to-refresh */
.prices{ position:sticky; top:calc(env(safe-area-inset-top) + 12px); z-index:900; background:transparent; }
.pull-indicator{ position:absolute; left:12px; top:-24px; font-size:12px; padding:3px 8px; border-radius:12px; background:rgba(255,255,255,.08); color:#cfcfcf; opacity:0; transform:translateY(6px); transition:opacity .18s ease, transform .18s ease; pointer-events:none }
.pull-indicator.visible{ opacity:1; transform:translateY(0) }

/* Skeleton loading para painéis e barra de preços */
.skeleton-line{ position:relative; overflow:hidden; height:12px; border-radius:6px; background: rgba(255,255,255,0.06); }
.skeleton-line::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.00) 100%); animation: skeleton-shimmer 1.2s ease-in-out infinite; }
@keyframes skeleton-shimmer{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(100%);} }
.panel-skeleton{ display:none; gap:10px; padding:8px 0 }
.panel-skeleton.visible{ display:flex }
.price-chip.loading .price-value{ opacity:.35 }

/* Modais full-height em mobile com safe-area e rolagem suave */
.modal-overlay{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); }
.modal-dialog{ max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display:flex; flex-direction:column; }
.modal-body{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; }

/* Estilo para pill USDT com símbolo ₮ */
.pill.badge-usdt{ background:rgba(0,200,83,0.16); color:#00C853; border:1px solid rgba(0,200,83,0.28); }
  @media (min-width: 769px){
    table.table-card{ display:table }
    table.table-card thead{ display:table-header-group }
    table.table-card tbody{ display:table-row-group }
    table.table-card tbody tr{ display:table-row; padding:0; margin:0; background:none; border:none; border-radius:0 }
    table.table-card td{ display:table-cell }
    table.table-card td::before{ content:'' }
  }
  /* --- 1. AJUSTE VISUAL DO CALENDÁRIO (CONTRASTE) --- */
  #calendar { 
      background: #ffffff; 
      color: #333333; 
      padding: 15px; 
      border-radius: 8px; 
  }
  .fc { color: #222 !important; }
  .fc-col-header-cell-cushion, .fc-daygrid-day-number { color: #333 !important; text-decoration: none !important; }
  .fc-theme-standard td, .fc-theme-standard th { border-color: #ddd !important; }
  .fc-day-today { background-color: #f0f8ff !important; }
  .fc-theme-standard .fc-scrollgrid, .fc-daygrid-day, .fc-daygrid-body, .fc-daygrid-bg { background:#ffffff !important; }
  .fc-toolbar-title{ color:#111 !important; }
  .fc .fc-button{ background:#e9eef7; color:#111; border:1px solid #c9d4e7; }
  .fc .fc-button-primary{ background:#1a73e8; color:#fff; border:1px solid #1765cc; }
  /* Cabeçalho dos dias claro */
  .fc-col-header, .fc-col-header-cell{ background:#ffffff !important; }
  .fc-col-header-cell .fc-col-header-cell-cushion{ color:#111 !important; }
  /* Facilitar clique em toda a célula do dia */
  .fc-daygrid-day, .fc-daygrid-day-frame, .fc-daygrid-day-number, .fc-daygrid-day-top{ cursor:pointer; }
  /* Modo semana (timeGrid) claro */
  .fc-timegrid, .fc-timegrid-body, .fc-timegrid-bg, .fc-timegrid-cols, .fc-timegrid-slot, .fc-timegrid-axis{ background:#ffffff !important; color:#111 !important; }
  .fc-timegrid-slot{ border-color:#ddd !important; }
  .fc-timegrid-axis{ border-color:#ddd !important; }
  .fc-timegrid-col.fc-day-today{ background-color:#f0f8ff !important; }
  /* Marcador "agora" em semana/dia */
  .fc .fc-timegrid-now-indicator-line{ border-color:#d93025 !important; }
  .fc .fc-timegrid-now-indicator-arrow{ border-top-color:#d93025 !important; }
  /* Destaque do dia de hoje na grade mensal */
  .fc-daygrid-day.fc-day-today{ box-shadow: inset 0 0 0 2px #1a73e8; }

  /* --- 2. ESTILO DO MODAL (ESTILO GOOGLE) --- */
  .modal-overlay { 
      display: none; 
      position: fixed; inset: 0; 
      background: rgba(0, 0, 0, 0.6); 
      z-index: 9999; 
      align-items: center; justify-content: center; 
  }
  .modal-box { 
      background: #fff; width: 500px; max-width: 95%; 
      border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); 
      overflow: hidden; font-family: Roboto, Arial, sans-serif; 
      animation: popIn 0.2s ease-out; 
  }
  @keyframes popIn { from {transform: scale(0.9); opacity: 0;} to {transform: scale(1); opacity: 1;} }

  .modal-header { background: var(--panel-2); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
  .modal-header h4 { margin: 0; color: var(--ink); font-size: 18px; }
  .close-btn { cursor: pointer; font-size: 20px; color: #ddd; background: none; border: none; }

  .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-group label { font-size: 12px; color: #5f6368; font-weight: bold; }
  .form-group input, .form-group textarea { 
      padding: 10px; border: 1px solid #dadce0; border-radius: 4px; font-size: 14px; color: #202124; outline: none; transition: 0.2s; 
  }
  .form-group input:focus { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.2); }
  .row { display: flex; gap: 15px; }

  .modal-footer { padding: 15px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid #eee; }
  .btn-cancel { background: transparent; color: #5f6368; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 600; }
  .btn-save { background: #1a73e8; color: white; border: none; padding: 8px 24px; border-radius: 4px; cursor: pointer; font-weight: 600; }
  .btn-save:hover { background: #1765cc; }
  .btn-delete { background: #d93025; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; display: none; }
  
  /* --- CALENDÁRIO (Fundo Branco e Texto Escuro) --- */ 
  #calendar { 
      background-color: #ffffff !important; 
      color: #3c4043 !important; 
      padding: 0; 
      border-radius: 8px; 
      font-family: 'Roboto', sans-serif; 
  } 
  .fc-theme-standard td, .fc-theme-standard th { border-color: #dadce0 !important; } 
  .fc-col-header-cell-cushion { color: #70757a !important; font-weight: 500; text-transform: uppercase; font-size: 11px; } 
  .fc-daygrid-day-number { color: #3c4043 !important; font-size: 12px; padding: 8px !important; } 
  .fc-daygrid-day { cursor: pointer !important; }
  .fc-day-today { background-color: #1a73e80a !important; } 
  .fc-day-today .fc-daygrid-day-number { 
      background-color: #1a73e8; color: #fff !important; border-radius: 50%; width: 24px; height: 24px; 
      display: inline-flex; align-items: center; justify-content: center; margin: 4px; 
  }
  
  /* --- POPUP ESTILO GOOGLE AGENDA (Onde a mágica acontece) --- */ 

  .google-card, .modal-box { 
      background: #fff; width: 448px; border-radius: 8px; 
      box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2); 
      font-family: 'Roboto', Arial, sans-serif; overflow: hidden; 
      animation: slideUp 0.2s ease-out; position: relative; 
  } 
  @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } 
  .card-header, .modal-header { background: var(--panel-2); height: 36px; display: flex; justify-content: flex-end; align-items: center; padding: 0 12px; cursor: move; } 
  .btn-close, .close-btn { cursor: pointer; background: none; border: none; font-size: 20px; color: #ddd; padding: 4px 8px; border-radius: 4px; } 
  .btn-close:hover, .close-btn:hover { background: var(--panel); } 
  .card-body, .modal-body { padding: 2px 16px 16px 16px; } 
  .input-title, #evtTitle { 
      width: 100%; border: none; border-bottom: 1px solid #e0e0e0; font-size: 22px; padding: 12px 0; 
      color: #3c4043; margin-bottom: 16px; font-weight: 400; outline: none; transition: border 0.2s; 
  } 
  .input-title:focus, #evtTitle:focus { border-bottom: 2px solid #1a73e8; } 
  .input-title::placeholder { color: #70757a; } 
  .card-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; } 
  .card-icon { width: 20px; padding-top: 8px; color: #70757a; display: flex; justify-content: center; } 
  .card-content { flex: 1; display: flex; flex-direction: column; gap: 8px; } 
  .datetime-wrapper { display: flex; align-items: center; gap: 8px; } 
  .google-input, #evtStartDate, #evtStartTime, #evtEndTime, #evtEndDate { 
      background: #f1f3f4; border: none; padding: 6px 8px; border-radius: 4px; 
      font-size: 14px; color: #3c4043; cursor: pointer; outline: none; 
  } 
  .google-input:hover, #evtStartDate:hover, #evtStartTime:hover, #evtEndTime:hover, #evtEndDate:hover { background: #e8eaed; } 
  .google-input:focus, #evtStartDate:focus, #evtStartTime:focus, #evtEndTime:focus, #evtEndDate:focus { background: #fff; box-shadow: 0 1px 2px rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); } 
  .google-textarea, #evtDesc { 
      width: 100%; background: #f1f3f4; border: none; border-radius: 4px; padding: 8px; 
      font-family: inherit; font-size: 14px; resize: none; outline: none; min-height: 60px; 
  } 
  .google-textarea:focus, #evtDesc:focus { background: #fff; box-shadow: inset 0 0 0 1px #dadce0; } 
  .card-footer, .modal-footer { display: flex; justify-content: flex-end; padding-top: 12px; margin-top: 8px; } 
  .btn-save-google, .btn-save { 
      background-color: #1a73e8; color: white; border: none; padding: 8px 24px; 
      border-radius: 4px; font-weight: 500; font-size: 14px; cursor: pointer; transition: 0.2s; 
  } 
  .btn-save-google:hover, .btn-save:hover { background-color: #1765cc; box-shadow: 0 1px 2px rgba(60,64,67,0.3); } 


/* CORREÇÕES DE CONTRASTE FULLCALENDAR */
/* 1. Dia "HOJE" (Marcador) */
.fc-day-today { 
  background-color: #3e444b !important; /* Cinza/Azul Suave */ 
  color: #f1f1f1 !important; /* Garante que o número do dia seja visível */ 
  border: 1px solid #5a6473 !important; 
}
/* 2. Eventos na Vista "LISTA" */
.fc-list-event { 
  color: #ffffff !important; /* Texto BRANCO para contraste */ 
  background-color: #333333 !important; 
}
#modalRenovacaoOverlay{ z-index:20000 !important; }
#modalContratoDetalheOverlay{ z-index:10000; }
.fc-list-event-title a { 
  color: #ffffff !important; 
}
/* Estilos para Tabela Expansível (Accordion) */ 
tr.year-header { 
    cursor: pointer; 
    background-color: rgba(255, 173, 0, 0.1); 
    font-weight: bold; 
    transition: background-color 0.2s; 
} 
tr.year-header:hover { 
    background-color: rgba(255, 173, 0, 0.2); 
} 
tr.year-header td { 
    border-left: 2px solid var(--accent); 
    color: var(--accent); 
} 
tr.year-header .toggle-icon { 
    float: right; 
    font-family: monospace; 
    font-weight: bold; 
} 
tr.year-row td { 
    padding-left: 32px; 
    font-size: 0.9em; 
    color: var(--muted); 
} 
.hidden-row { 
    display: none; 
}


    /* View: Minha Assinatura */
    #viewAssinatura.assinatura-view { position:fixed; inset:0; display:none; z-index:12000; overflow:auto; background:rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
    .assinatura-container { position:relative; max-width:800px; margin:40px auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 24px rgba(0,0,0,.45); padding:24px; }
    .assinatura-header h2 { margin:0; font-size:22px; }
    .assinatura-header .subtitle { margin:6px 0 14px; color:var(--muted); }
    .assinatura-card, .card { background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:14px; padding:16px; margin:10px 0; }
    .status-card { display:flex; align-items:center; gap:12px; }
    .status-active { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.4); }
    .status-late { background: rgba(244,67,54,0.16); border-color: rgba(244,67,54,0.4); }
    .status-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1a1a1a; border:1px solid var(--line); }
    .pay-toggle { display:flex; gap:8px; background: rgba(255,255,255,0.08); border:none; padding:4px; border-radius:12px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
    .pay-tab { background: transparent; color: var(--text); border: none; padding: 8px 12px; border-radius:10px; font-size:13px; cursor:pointer; transition: all 0.2s ease; }
    .pay-tab.active { background: rgba(255,173,0,0.2); color:#FFAD00; box-shadow: 0 2px 8px rgba(255,173,0,.2); }
    .pay-tab[data-pay="usdt"].active { background: rgba(38,161,123,0.18); color:#26A17B; box-shadow: 0 2px 8px rgba(38,161,123,.25); border:1px solid rgba(38,161,123,.4); }
    .pay-card.usdt-active { border-color: rgba(38,161,123,.45); box-shadow: 0 0 0 3px rgba(38,161,123,.12) inset; }
    .big-price { font-size: 2rem; }
    .discount-badge { background: rgba(255,173,0,0.25); color: #FFAD00; padding:2px 6px; border-radius:10px; font-size:11px; margin-left:6px; }
    .price { font-size:20px; font-weight:700; margin:6px 0 12px; color:var(--text); }
    .crypto-tabs { display:flex; gap:8px; margin-bottom:8px; }
    .crypto-tab { background: transparent; color: var(--text); border:1px solid var(--line); padding:6px 10px; border-radius:10px; font-size:12px; cursor:pointer; }
    .crypto-tab.active { background: rgba(255,173,0,0.2); border-color: #FFAD00; color:#FFAD00; }
    .wallet-row { display:flex; gap:8px; align-items:center; }
    .wallet-field { flex:1; border-radius:10px; border:1px solid var(--border); background:var(--input-bg); color:var(--input-text); padding:10px 12px; font-size:14px; }
    .wallet-field.mono { font-family: ui-monospace,Consolas,monospace; }
    .copy-btn { background:linear-gradient(180deg,var(--btn-bg1),var(--btn-bg2)); border:none; font-weight:600; cursor:pointer; color:var(--btn-text); border-radius:10px; padding:10px 14px; box-shadow: 0 4px 16px rgba(255,173,0,.2); }
    .qr-placeholder { height:160px; border:1px dashed var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
    .assinatura-footer { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:8px; }
    .action-btn { background:linear-gradient(180deg,var(--btn-bg1),var(--btn-bg2)); color:var(--btn-text); border:0; border-radius:10px; padding:12px 16px; text-decoration:none; font-weight:600; }
    .assinatura-close { position:absolute; top:12px; right:12px; background:transparent; border:1px solid var(--line); color:#ddd; border-radius:10px; padding:6px 8px; cursor:pointer }
  .assinatura-msg { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1e1e1e; border:1px solid var(--line); color:#ddd; border-radius:10px; padding:12px 42px 12px 12px; box-shadow:0 18px 24px rgba(0,0,0,.45); z-index:13000; max-width:600px; }
  .assinatura-msg.error { border-color:#ff4d4f; }
  .assinatura-msg.success { border-color:#4caf50; }
  .assinatura-msg-close { position:absolute; top:6px; right:8px; background:transparent; border:0; color:var(--muted); cursor:pointer; }
/* Assinatura brand + success (modelo payout) */
.brand-area { text-align:center; margin-bottom:16px }
.brand-area .logo-img { height:100px; width:auto; display:block; margin:0 auto 10px }
.brand-area .brand-text { letter-spacing:3px; font-size:12px; color:var(--accent); text-transform:uppercase; font-weight:600 }
#assinaturaSuccess { display:none; text-align:center; padding:20px }
#assinaturaSuccess .success-icon { font-size:48px; display:block; margin-bottom:16px }
#assinaturaSuccess .success-msg { font-size:16px; font-weight:600; margin-bottom:8px }
#assinaturaSuccess .success-sub { color:var(--muted); font-size:13px; margin-bottom:20px }
    .network-warning { color:#e53935; font-size:13px; font-weight:600; margin-left:8px; }
   .pay-toggle .pay-tab { display:flex; align-items:center; gap:8px; }
   .pay-tab .token-logo { width:18px; height:18px; object-fit:contain; }
  

    @media (min-width: 769px) {
      #mobile-bottom-nav, #mobileNavOverlay { display: none !important; }
    }
    @media (max-width: 768px) {
      #sidebar, .sidebar { display: none !important; }
      body { padding-bottom: 80px; }
    }

    /* Empilhamento vertical no mobile */
    @media (max-width: 768px) {
      /* Força o grid do Coffee a ser uma coluna única */
      #panelCoffee #coffeeGrid,
      .coffee-grid,
      #panelDashboard .grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
      }
      /* Garante que os cards ocupem 100% da largura */
      #coffeeCalendarCard,
      #coffeeHeatmapCard,
      .coffee-card {
        width: 100% !important;
        min-width: 100% !important;
        margin-bottom: 16px !important;
        max-width: none !important;
      }
      /* Ajuste extra para o calendário não ficar cortado */
      .fc-view-harness {
        min-height: 400px !important;
      }
    }
  

    /* Wallet Cards specific style */
    .wallet-card { background: #2d2d2d !important; }
    .wallet-card:hover { background: #333333 !important; }
  

/* View: Minha Assinatura */
#viewAssinatura.assinatura-view { position:fixed; inset:0; display:none; z-index:12000; overflow:auto; background:rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.assinatura-container { position:relative; max-width:800px; margin:40px auto; background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45); padding:24px; }
.assinatura-header h2 { margin:0; font-size:22px; }
.assinatura-header .subtitle { margin:6px 0 14px; color:var(--muted); }
.assinatura-card, .card { background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:14px; padding:16px; margin:10px 0; }
.status-card { display:flex; align-items:center; gap:12px; }
.status-active { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.4); }
.status-late { background: rgba(244,67,54,0.16); border-color: rgba(244,67,54,0.4); }
.status-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1a1a1a; border:1px solid var(--line); }
.pay-toggle { display:flex; gap:8px; background: rgba(255,255,255,0.08); border:none; padding:4px; border-radius:12px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.pay-tab { background: transparent; color: var(--text); border: none; padding: 8px 12px; border-radius:10px; font-size:13px; cursor:pointer; transition: all 0.2s ease; }
.pay-tab.active { background: rgba(255,173,0,0.2); color:#FFAD00; box-shadow: 0 2px 8px rgba(255,173,0,.2); }
.pay-tab[data-pay='usdt'].active { background: rgba(38,161,123,0.18); color:#26A17B; box-shadow: 0 2px 8px rgba(38,161,123,.25); border:1px solid rgba(38,161,123,.4); }
.pay-card.usdt-active { border-color: rgba(38,161,123,.45); box-shadow: 0 0 0 3px rgba(38,161,123,.12) inset; }
.big-price { font-size: 2rem; }
.discount-badge { background: rgba(255,173,0,0.25); color: #FFAD00; padding:2px 6px; border-radius:10px; font-size:11px; margin-left:6px; }
.price { font-size:20px; font-weight:700; margin:6px 0 12px; color:var(--text); }
.crypto-tabs { display:flex; gap:8px; margin-bottom:8px; }
.crypto-tab { background: transparent; color: var(--text); border:1px solid var(--line); padding:6px 10px; border-radius:10px; font-size:12px; cursor:pointer; }
.crypto-tab.active { background: rgba(255,173,0,0.2); border-color: #FFAD00; color:#FFAD00; }
.wallet-row { display:flex; gap:8px; align-items:center; }
.wallet-field { flex:1; border-radius:10px; border:1px solid var(--border); background:var(--input-bg); color:var(--input-text); padding:10px 12px; font-size:14px; }
.wallet-field.mono { font-family: ui-monospace,Consolas,monospace; }
.copy-btn { background:linear-gradient(180deg,var(--btn-bg1),var(--btn-bg2)); border:none; font-weight:600; cursor:pointer; color:var(--btn-text); border-radius:10px; padding:10px 14px; box-shadow: 0 4px 16px rgba(255,173,0,.2); }
.qr-placeholder { height:160px; border:1px dashed var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--muted); }
.assinatura-footer { display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:8px; }
.action-btn { background:linear-gradient(180deg,var(--btn-bg1),var(--btn-bg2)); color:var(--btn-text); border:0; border-radius:10px; padding:12px 16px; text-decoration:none; font-weight:600; }
.assinatura-close { position:absolute; top:12px; right:12px; background:transparent; border:1px solid var(--line); color:#ddd; border-radius:10px; padding:6px 8px; cursor:pointer }
.assinatura-msg { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1e1e1e; border:1px solid var(--line); color:#ddd; border-radius:10px; padding:12px 42px 12px 12px; box-shadow:0 18px 40px rgba(0,0,0,.45); z-index:13000; max-width:600px; }
.assinatura-msg.error { border-color:#ff4d4f; }
.assinatura-msg.success { border-color:#4caf50; }
.assinatura-msg-close { position:absolute; top:6px; right:8px; background:transparent; border:0; color:var(--muted); cursor:pointer; }
/* Assinatura brand + success (modelo payout) */
.brand-area { text-align:center; margin-bottom:16px }
.brand-area .logo-img { height:100px; width:auto; display:block; margin:0 auto 10px }
.brand-area .brand-text { letter-spacing:3px; font-size:12px; color:var(--accent); text-transform:uppercase; font-weight:600 }
#assinaturaSuccess { display:none; text-align:center; padding:20px }
#assinaturaSuccess .success-icon { font-size:48px; display:block; margin-bottom:16px }
#assinaturaSuccess .success-msg { font-size:16px; font-weight:600; margin-bottom:8px }
#assinaturaSuccess .success-sub { color:var(--muted); font-size:13px; margin-bottom:20px }
.network-warning { color:#e53935; font-size:13px; font-weight:600; margin-left:8px; }
.pay-toggle .pay-tab { display:flex; align-items:center; gap:8px; }
.pay-tab .token-logo { width:18px; height:18px; object-fit:contain; }