/* ===== LOGIN STYLES ===== */
body {
  margin: 0;
  padding: 0;
  background: #0A0E11;
  color: #EAECEF;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  font-family: "Urbanist", sans-serif;
}

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  background: #111418;
  border-radius: 16px;
  padding: 24px 24px 28px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  border: 1px solid #1f2327;
}

.login-card h2 {
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

.login-card p {
  margin: 0 0 16px;
  color: #9ca3af;
  font-size: 14px;
}

.login-card input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid #2a2f35;
  outline: none;
  background: #0b0f14;
  color: #EAECEF;
  font-size: 14px;
}

.login-card input:focus {
  border-color: #FFE600;
  box-shadow: 0 0 12px rgba(255,230,0,0.35);
}

.login-card button {
  width: 100%;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(120deg,#facc15,#f97316);
  color: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);
}

.login-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.9);
}

.login-error {
  margin-top: 10px;
  font-size: 13px;
  color: #f97373;
  min-height: 18px;
}

/* Cuando la app está visible, ocultamos el wrapper de login visualmente */
body.app-visible .login-wrapper {
  
}


/* ===== APP ORIGINAL CSS ===== */

/* ------------------------------------------------------------
     ESTILOS BASE - TIPO JOHN5CRIPTO + TOQUES BINANCE
  -------------------------------------------------------------*/

  * {
    font-family: "Urbanist", sans-serif;
    letter-spacing: 0.4px;
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    background: #0A0E11;
    color: #EAECEF;
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    font-size: 2.8em;
    margin: 10px 0 8px;
    font-weight: 800;
    background: linear-gradient(90deg, #FFE600, #F8D400);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  p {
    color: #9ca3af;
    font-size: 17px;
    margin-top: 0;
  }

  /* ------------------------------------------------------------
     CONTENEDOR GENERATEPRESS
  -------------------------------------------------------------*/

  .site {
    width: 100%;
    display: block;
  }

  .site-content {
    max-width: 1200px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 40px;
  }

  .inside-article {
    width: 100%;
    padding: 20px;
  }

  /* ------------------------------------------------------------
     TOP CONTROLS (Tema / Idioma)
  -------------------------------------------------------------*/

  .top-controls {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    margin-bottom: 12px;
  }

  .switch-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .switch-group span {
    font-size: 13px;
    color: #9ca3af;
    text-transform: uppercase;
  }

  .toggle-btn {
    padding: 8px 18px !important;
    font-size: 13px !important;
    text-transform: none !important;
    letter-spacing: 0.4px !important;
  }

  /* ------------------------------------------------------------
     BUSCADOR + TIMEFRAMES
  -------------------------------------------------------------*/

  .search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }

  input {
    padding: 16px;
    width: 260px;
    font-size: 18px;
    background: #111418;
    border: 2px solid #2A2F35;
    color: #EAECEF;
    border-radius: 14px;
    outline: none;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 12px #00000040;
  }

  input:focus {
    border-color: #FFE600;
    box-shadow: 0 0 12px #FFE60040;
  }

  button {
    padding: 15px 32px;
    font-size: 17px;
    font-weight: 700;
    background: linear-gradient(120deg, #1f2024, #2c2e33);
    color: #FFE600;
    border: 1px solid #2d2f33;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 4px 10px #00000050;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  button:hover {
    background: linear-gradient(120deg, #2b2d31, #3a3d44);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px #00000080;
  }

  button:disabled {
    background: #2c2f33;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }

  /* Timeframe buttons estilo Binance */

  .tf-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tf-btn {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    background: #1f2024;
    color: #e5e7eb;
    border-radius: 10px;
    border: 1px solid #2d3035;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    box-shadow: 0 2px 5px #00000060;
  }

  .tf-btn:hover {
    background: #272932;
  }

  .tf-btn.active {
    border-color: #FFE600;
    color: #FFE600;
    background: #25262b;
    box-shadow: 0 0 10px #FFE60033;
  }
  .tf-btn-ranking.active {
    border-color: #FFE600;
    color: #FFE600;
    background: #25262b;
    box-shadow: 0 0 10px #FFE60033;
  }


  /* ------------------------------------------------------------
     BOTÓN COMPRAR AHORA
  -------------------------------------------------------------*/

  #btnCompra {
    background: linear-gradient(120deg, #39FF14, #2DE80F);
    color: #000;
    border: none;
    font-size: 22px;
    padding: 20px 42px;
    border-radius: 18px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 0 25px #39FF1444;
    animation: buyPulse 2.2s infinite ease-in-out;
    
    margin-top: 20px;
  }

  #btnCompra:hover {
    transform: scale(1.06);
    box-shadow: 0 0 32px #39FF1480;
  }

  @keyframes buyPulse {
    0% { box-shadow: 0 0 20px #39FF1444; }
    50% { box-shadow: 0 0 40px #39FF1480; }
    100% { box-shadow: 0 0 20px #39FF1444; }
  }

  #promoText {
    margin-top: 16px;
    margin-bottom: 22px;
    font-size: 16px;
    color: #39FF14;
    font-weight: 600;
  }

  /* ------------------------------------------------------------
     RESULTADO / RSI
  -------------------------------------------------------------*/

  #resultado {
    font-size: 44px;
    font-weight: 800;
    padding: 18px;
    min-height: 80px;
    line-height: 1.3;
  }

  .sobreventa { color: #00ff95; font-weight: 800; }
  .sobrecompra { color: #ff4242; font-weight: 800; }
  .normal { color: #ffd54f; font-weight: 800; }

  /* ------------------------------------------------------------
     CARTA DE RESULTADOS
  -------------------------------------------------------------*/

  #precioInfo {
    background: #111418;
    padding: 26px;
    border-radius: 18px;
    font-size: 22px;
    line-height: 1.65em;
    max-width: 900px;
    margin: 25px auto;
    box-shadow: 0 6px 20px #00000080;
    border: 1px solid #1f2327;
  }

  .entrada { color: #76ff03; font-weight: 800; }
  .dca1 { color: #c6ff00; font-weight: 800; }
  .dca2 { color: #eeff41; font-weight: 800; }
  .dca3 { color: #f6ff7a; font-weight: 800; }
  .tp { color: #42a5f5; font-weight: 800; }
  .sl { color: #ff1744; font-weight: 800; }

  .riskBarContainer {
    width: 240px;
    height: 24px;
    background: #1b1f24;
    border-radius: 14px;
    margin: 18px auto 6px auto;
    overflow: hidden;
    box-shadow: inset 0 0 10px #00000080;
    border: 1px solid #2d3238;
  }

  .riskBarFill {
    height: 100%;
    transition: 0.35s ease;
  }

  .riskText {
    font-size: 16px;
    margin-top: 6px;
    color: #d1d4d8;
    font-weight: 600;
  }

  /* ------------------------------------------------------------
     BARRA DE CARGA
  -------------------------------------------------------------*/

  #barraCarga {
    width: 90%;
    max-width: 600px;
    height: 20px;
    background: #1a1f25;
    border-radius: 12px;
    margin: 10px auto;
    overflow: hidden;
    
    border: 1px solid #2d3238;
  }

  #barraInterna {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FFE600, #ffae00, #F8D400);
    transition: width 0.2s ease;
  }

  /* ------------------------------------------------------------
     LEYENDA INDICADORES
  -------------------------------------------------------------*/

  #leyendaIndicadores {
    background: #111418;
    border-radius: 14px;
    max-width: 850px;
    margin: 26px auto;
    padding: 16px 20px;
    color: #b5bac1;
    box-shadow: 0 4px 14px #00000040;
    border: 1px solid #1f2327;
    font-size: 14px;
    line-height: 1.4em;
  }

  #progresoIndividual,
  #progresoRanking {
    font-size: 16px;
    color: #9ca3af;
    margin-top: 10px;
  }

  /* ------------------------------------------------------------
     TABLA TOP 10
  -------------------------------------------------------------*/

  table {
    width: 90%;
    max-width: 900px;
    margin: 40px auto;
    background: #111418;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #1f2327;
    box-shadow: 0 6px 20px #00000080;
    border-collapse: collapse;
    font-size: 18px;
  }

  th {
    background: #1d2024;
    color: #FFE600;
    padding: 20px;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  td {
    padding: 16px;
    color: #EAECEF;
    border-bottom: 1px solid #2a2d31;
    text-align: center;
  }

  tr:nth-child(even) {
    background: #161a1f;
  }

  #explicacionTop10 {
    margin-top: 8px;
    font-size: 14px;
    color: #9ca3af;
  }

  #btnTop {
    margin-top: 26px;
  }

  /* ------------------------------------------------------------
      TEMA CLARO
  -------------------------------------------------------------*/

  body.light-theme {
    background: #F5F5F7;
    color: #111827;
  }

  body.light-theme p {
    color: #4b5563;
  }

  body.light-theme #precioInfo {
    background: #ffffff;
    color: #111827;
    border-color: #e5e7eb;
    box-shadow: 0 4px 16px #00000020;
  }

  body.light-theme #leyendaIndicadores {
    background: #ffffff;
    color: #4b5563;
    border-color: #e5e7eb;
    box-shadow: 0 4px 12px #00000010;
  }

  body.light-theme table {
    background: #ffffff;
    color: #111827;
    border-color: #e5e7eb;
    box-shadow: 0 4px 16px #00000020;
  }

  body.light-theme table td,
  body.light-theme table th {
    color: #111;
  }

  body.light-theme tr:nth-child(even) {
    background: #f3f4f6;
  }

  body.light-theme #btnCompra {
    background: linear-gradient(120deg, #39FF14, #2DE80F);
    color: #000;
    box-shadow: 0 0 18px #39FF1450;
  }

  body.light-theme #resultado {
    color: #111827;
  }

  body.light-theme #promoText {
    color: #1CB300;
  }

  body.light-theme .sobreventa { color:#0e7a43; }
  body.light-theme .sobrecompra { color:#c63a3a; }
  body.light-theme .normal { color:#caa700; }

  body.light-theme .tf-btn {
    background: #e5e7eb;
    color: #111827;
    border-color: #d1d5db;
  }

  body.light-theme .tf-btn.active {
    background: #facc15;
    color: #111827;
    border-color: #eab308;
    box-shadow: 0 0 10px #facc1533;
  }

  
body.light-theme th {
  background: #e5e7eb !important;
  color: #111827 !important;
}


/* === STYLE C: PRO Binance + John5 === */
table {
  border-radius: 12px;
  overflow: hidden;
}
table tr:hover {
  background: rgba(255,230,0,0.07);
}
th {
  background: linear-gradient(90deg,#f7d400,#ffe600);
  color:#000!important;
}
body.light-theme th {
  background: linear-gradient(90deg,#ffe600,#facc15)!important;
  color:#000!important;
}


/* Header row (# Crypto RSI) custom background compatible with Style C */
table tr:nth-child(2) th {
  background: #2b2e35 !important;
  color: #FFE600 !important;
}
body.light-theme table tr:nth-child(2) th {
  background: #ececf1 !important;
  color: #111 !important;
}


.ranking-title{
  text-align:center;
  margin-top:20px;
  font-size:28px;
  font-weight:800;
  background: linear-gradient(90deg,#FFE600,#FFCC00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
#rankingSection{width:100%;text-align:center;margin-top:20px;}
#rankingTFButtons{display:flex;justify-content:center;gap:8px;margin-top:10px;}


#rankingTooltip{
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
tr.rank-row:hover{
  background:#1f2933;
}


  #panelCaidas {
    max-width: 900px;
    margin: 10px auto 0 auto;
    padding: 14px 18px;
    background: #111418;
    border-radius: 14px;
    border: 1px solid #1f2327;
    box-shadow: 0 4px 12px #00000050;
    font-size: 14px;
    color: #d1d5db;
    text-align: left;
    
  }
  #panelCaidas .pc-title {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 14px;
  }
  #panelCaidas .pc-line {
    margin: 2px 0;
    font-size: 13px;
  }
  #panelCaidas .pc-tf {
    font-weight: 700;
    margin-right: 4px;
  }
  body.light-theme #panelCaidas {
    background: #ffffff;
    border-color: #e5e7eb;
    box-shadow: 0 4px 10px #00000015;
    color: #374151;
  }


  /* ------------------------------------------------------------
     RESPONSIVE AJUSTES
  -------------------------------------------------------------*/
  @media (max-width: 900px) {
    .site-content {
      padding: 10px 12px 40px 12px;
    }
    #precioInfo {
      font-size: 18px;
      padding: 18px;
    }
    table {
      font-size: 16px;
    }
  }

  @media (max-width: 700px) {
    .search-row {
      flex-direction: column;
      align-items: stretch;
    }
    .search-row input {
      width: 100%;
    }
    .search-row button {
      width: 100%;
    }
    .tf-buttons {
      justify-content: center;
    }
    #sparkContainer, #sparkline, #sparkVolume {
      width: 100% !important;
      max-width: 100% !important;
    }
    canvas#sparkline, canvas#sparkVolume {
      width: 100% !important;
    }
    table {
      width: 100%;
    }
    td, th {
      padding: 10px;
    }
  }

  @media (max-width: 480px) {
    h1 {
      font-size: 2.1em;
    }
    #resultado {
      font-size: 32px;
    }
    #precioInfo {
      font-size: 16px;
    }
    .ranking-title {
      font-size: 22px;
    }
  }


/* ================================================
   RESPONSIVE PREMIUM V2 — JOHN5 CRIPTO
================================================ */
@media (max-width: 600px) {
  .top-controls { flex-wrap: wrap; row-gap: 6px; column-gap: 6px; padding: 0 8px; }
  .switch-group { gap: 4px; }
  .toggle-btn { padding: 6px 10px !important; font-size: 11px !important; line-height: 1 !important; border-radius: 8px !important; }
  .tf-buttons { gap:5px !important; justify-content:center !important; flex-wrap:wrap !important; }
  .tf-btn, .tf-btn-ranking { padding:6px 9px !important; font-size:11px !important; border-radius:7px !important; line-height:1.1 !important; }
  .search-row { flex-direction:column; gap:8px; }
  .search-row input { width:100%; font-size:15px; padding:12px; }
  .search-row button { width:100%; padding:12px; font-size:14px; }
  #sparkContainer,#sparkline,#sparkVolume { width:100% !important; max-width:100% !important; }
  canvas#sparkline,canvas#sparkVolume { width:100% !important; }
  #precioInfo { font-size:15px !important; padding:16px !important; }
  #resultado { font-size:30px !important; margin-top:10px; }
  .ranking-title{ font-size:20px !important; }
  table{ font-size:14px !important; }
  td,th{ padding:8px !important; }
}
@media (max-width:380px){
  .toggle-btn{ padding:5px 8px !important; font-size:10px !important; }
  .tf-btn,.tf-btn-ranking{ padding:5px 7px !important; font-size:10px !important; }
  h1{ font-size:1.8em !important; }
  #resultado{ font-size:26px !important; }
}
.logout-button {
    position: fixed;
    top: 15px;
    right: 15px;
    padding: 8px 14px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    z-index: 9999;
}
.logout-button:hover {
    background: #dd3333;
}

.admin-panel-button {
    position: fixed;
    top: 15px;
    right: 130px;
    padding: 8px 14px;
    background: #0080ff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    z-index: 9999;
}
.admin-panel-button:hover {
    background: #0066cc;
}

.top-buttons {
    position: fixed;
    top: 15px;
    right: 15px;
    display: flex;
    gap: 8px;
    z-index: 9999;
}
.top-buttons button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}
#logoutBtn { background:#ff4444; }
#logoutBtn:hover { background:#dd3333; }
#adminPanelBtn { background:#0080ff; }
#adminPanelBtn:hover { background:#0066cc; }
#changePwBtn { background:#00aa88; }
#changePwBtn:hover { background:#008866; }


/* === ADMIN PANEL STYLES === */
.admin-card {
  background: #111418;
  border-radius: 16px;
  padding: 16px 20px 20px;
  max-width: 1100px;
  margin: 20px auto 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  border: 1px solid #1f2327;
}
.admin-card input,
.admin-card select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #2a2f35;
  outline: none;
  background: #0b0f14;
  color: #EAECEF;
  font-size: 14px;
}
.admin-card input:focus,
.admin-card select:focus {
  border-color: #FFE600;
  box-shadow: 0 0 12px rgba(255,230,0,0.35);
}
.admin-card button {
  padding: 12px 24px;
  border-radius: 12px;
  border: none;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(120deg,#facc15,#f97316);
  color: #111827;
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);
}
.admin-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.9);
}

#adminMsg {
  margin-top: 4px;
  font-size: 14px;
  color: #9ca3af;
}

.admin-users-title {
  margin-top: 26px;
  font-size: 20px;
  font-weight: 700;
}

.admin-users-wrapper {
  max-width: 1100px;
  margin: 10px auto 40px;
}

.admin-users-table {
  width: 100%;
  border-collapse: collapse;
  background: #111418;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #1f2327;
  box-shadow: 0 6px 20px #00000080;
  font-size: 14px;
}
.admin-users-table th,
.admin-users-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #2a2d31;
}
.admin-users-table th {
  background: #1d2024;
  color: #FFE600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 12px;
}
.admin-users-table tr:nth-child(even) {
  background: #161a1f;
}

/* Back & logout colors for secondary pages */
#backBtn {
  background:#4b5563;
}
#backBtn:hover {
  background:#374151;
}
#logoutAdminBtn,
#logoutBtnCP {
  background:#ff4444;
}
#logoutAdminBtn:hover,
#logoutBtnCP:hover {
  background:#dd3333;
}

@media (max-width: 900px) {
  .admin-card {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-card input,
  .admin-card select,
  .admin-card button {
    width: 100%;
  }
}

/* =========================================================
   PERP AIRDROP SELECTOR - overrides (NO ROMPER NADA)
   - Mantiene estética John5Cripto (style.css base)
   - Prohíbe header sticky/fixed
   - Garantiza misma línea en desktop + responsive en móvil
========================================================= */

.topbar{ position: static !important; }

.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 12px 40px 12px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.logo{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: #111418;
  border: 1px solid #2A2F35;
}
.logo svg{ width:22px;height:22px; fill: #FFE600; }

.brandLine{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
}

.brandTitle{
  margin:0;
  font-weight:800;
}

.brandDesc{
  margin:0;
  color:#9ca3af;
  font-size:17px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 760px;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
}

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

.field label{
  font-size:13px;
  color:#9ca3af;
  text-transform: uppercase;
  font-weight: 700;
}

.field input[type="search"],
.field select{
  padding: 16px;
  min-width: 260px;
  font-size: 18px;
  background: #111418;
  border: 2px solid #2A2F35;
  color: #EAECEF;
  border-radius: 14px;
  outline: none;
  box-shadow: inset 0 0 12px #00000040;
}

.field select{
  min-width: 200px;
  cursor:pointer;
  color-scheme: dark;
}

.field input[type="search"]:focus,
.field select:focus{
  border-color: #FFE600;
  box-shadow: 0 0 12px rgba(255,230,0,0.25);
}

.toggle{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:#9ca3af;
  text-transform: uppercase;
  font-weight:700;
  user-select:none;
}
.toggle input{ accent-color:#FFE600; }

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin: 14px 0 12px;
}

.panel{
  text-align:left;
}

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

.card{
  grid-column: span 4;
}

.footer{
  max-width:1200px;
  margin: 22px auto 18px;
}

/* Responsive: permite que el texto se parta en móvil */
@media (max-width: 900px){
  .card{ grid-column: span 6; }
  .brandLine{ flex-wrap:wrap; }
  .brandDesc{ white-space:normal; max-width: 100%; }
  .field input[type="search"], .field select{ width:100%; min-width:0; }
}

@media (max-width: 700px){
  .actions{ flex-direction:column; align-items:stretch; }
  .field{ width:100%; flex-direction:column; align-items:stretch; gap:6px; }
  .btn{ width:100%; }
  .card{ grid-column: span 12; }

  /* Fuerza responsive en tarjetas con grid-column inline (Modo 1/2, Fees, Riesgo, Checklist, etc.) */
  .grid > .card[style*="grid-column"]{ grid-column: span 12 !important; }

  /* Delta Neutral: herramientas (grid inline) */
  .dnToolsGrid > div{ grid-column: span 12 !important; }
  .dnToolsGrid .dnToolTop{ flex-wrap: wrap !important; justify-content: flex-start !important; }
  .dnToolsGrid .dnToolTitle{ flex-wrap: wrap !important; }
  .dnToolsGrid .dnToolBadge{
    white-space: normal;
    line-height: 1.2;
    max-width: 100%;
  }
}

@media (max-width: 480px){
  .brandDesc{ font-size: 15px; }
}


/* =========================================================
   FIXES v8 – tarjetas, toggle, footer (sin romper estética)
========================================================= */

/* TARJETAS: contorno claro y separación visual */
.card{
  background:#0f1317;
  border:1px solid #2A2F35;
  border-radius:16px;
  padding:16px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.25);
}
.card + .card{}

/* Asegura grid respirable */
.grid{
  gap:14px;
}

/* TOGGLE 'Solo HOT' – compacto como diseño anterior */
.toggle{
  width:auto;
  padding:8px 10px;
  font-size:12px;
  border:1px solid #2A2F35;
  border-radius:10px;
}
.toggle span{
  white-space:nowrap;
}

/* FOOTER: barra horizontal + izquierda/derecha */
.footer{
  max-width:1200px;
  margin:24px auto 18px;
  padding:12px 0 0;
  border-top:1px solid #2A2F35; /* barra de corte */
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.footer .btn{
  width:auto;
  padding:10px 18px;
}

/* Evitar centrado en mobile: mantener estructura */
@media (max-width:700px){
  .footer{
    flex-direction:row;
  }
}


/* =========================================================
   HOT toggle – compacto real (sin ocupar ancho)
========================================================= */
.toggle{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  width:auto !important;
  max-width:none !important;
  background:#111418;
  border:1px solid #2A2F35;
  border-radius:999px;
}

.toggle span{
  font-size:12px;
  letter-spacing:.4px;
}

.toggle input{
  width:18px;
  height:18px;
  margin:0;
}


/* =========================================================
   v10 – Pill CEX/DEX en verde (estilo botón)
========================================================= */
.pillType{
  background: rgba(0,255,149,0.10) !important;
  border: 1px solid rgba(0,255,149,0.35) !important;
  color: #00ff95 !important;
  box-shadow: 0 0 10px rgba(0,255,149,0.08);
}
.pillType.cex, .pillType.dex{
  background: rgba(0,255,149,0.10) !important;
  border-color: rgba(0,255,149,0.35) !important;
  color: #00ff95 !important;
}

/* HOT flame icon */
.icoFlame{
  width:14px;
  height:14px;
  fill: #FFE600;
  transform: translateY(0.5px);
}
.badgeHot{
  gap:8px;
}


/* =========================================================
   v11 – HOT + DEX/CEX arriba derecha, recuadrados
========================================================= */
.cardTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.topRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.topRight{padding-right:12px;gap:8px;}
.pillType,
.badge,
.badgeHot{
  border-radius:12px !important; /* recuadrado (no píldora) */
}
.badgeHot{
  border:1px solid rgba(255,230,0,0.45) !important;
  background: rgba(255,230,0,0.08) !important;
}


/* =========================================================
   v12 – Layout exacto como referencia
========================================================= */

/* Top row layout */
.cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.topLeft, .topRight{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Recuadros más grandes */
.box{
  padding:8px 14px;
  border-radius:12px;
  border:1px solid #2A2F35;
  background:#111418;
  font-weight:700;
  font-size:13px;
}

/* DEX/CEX y HOT con más presencia */
.pillType.box,
.badgeHot.box{
  padding:8px 16px;
  font-size:13px;
}

/* Volumen / Usuarios abajo izquierda y derecha */
.meta.twoCols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

/* Asegurar consistencia visual */
.kv.box{
  background:#0f1317;
}

/* Mobile */
@media (max-width:700px){
  .cardTop{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .topRight{
    justify-content:flex-start;
  }
  .meta.twoCols{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   v13 – Correcciones solicitadas
========================================================= */

/* Top row spacing */
.cardTop{
  margin-bottom:12px;
}

/* Bigger boxes for top badges */
.box{
  padding:10px 18px;
  border-radius:12px;
  font-size:14px;
}

/* HOT flame orange */
.icoFlame{
  fill:#ff8c00 !important;
}

/* HOT badge border stronger */
.badgeHot.box{
  border:1px solid rgba(255,140,0,0.6) !important;
  background:rgba(255,140,0,0.12) !important;
  color:#ffb347 !important;
}

/* Ensure difficulty stays left, HOT/DEX right */
.cardTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.topLeft{
  justify-content:flex-start;
}
.topRight{
  justify-content:flex-end;
}


/* =========================================================
   v14 – Botón "Farméalo"
========================================================= */

.nameRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 6px 0 10px;
}


/* Clickable exchange name (shows it's clickable) */
.cardName{
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cardName::after{
  content: "↗";
  font-size: 14px;
  opacity: .55;
  transform: translateY(-1px);
  transition: opacity .15s ease, transform .15s ease;
}
.cardName:hover{
  text-decoration: underline;
}
.cardName:hover::after{
  opacity: 1;
  transform: translateY(-2px);
}

.btnFarm{
  padding:10px 18px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  border-radius:12px;
  border: none;
  cursor:pointer;
  background: linear-gradient(120deg, #facc15, #f97316);
  color:#111827;
  box-shadow: 0 6px 14px rgba(249,115,22,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btnFarm:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(249,115,22,.55);
}

/* Mobile: keep readable */
@media (max-width:700px){
  .nameRow{
    flex-wrap:wrap;
  }
  .btnFarm{
    width:auto;
  }
}

/* Header spacing (only change) */
body{
  padding-top:32px;
}

/* ===== HEADER SPACE (solo separación) ===== */
body{
  padding-top: 32px !important;
}
@media (max-width:700px){
  body{ padding-top: 22px !important; }
}

/* ===== Spacing Airdrops header -> cards (SAFE) ===== */
.panelHead{
  margin-bottom: 18px;
}


.hlBadge{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:12px;line-height:1.2;text-decoration:none;opacity:.95;}
.hlBadge:hover{opacity:1;}



/* ===== DEX OVERLAY CARD (empty modal) ===== */
.dexModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.dexModal.is-open{ display: flex; }
.dexModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Fullscreen-ish variant for "Últimas noticias" modal */
.dexModal__card--full{
  width: min(1200px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  border-radius: 18px;
}

.dexModal__card--full .dexModal__body{
  /* Fill most of the screen while keeping header visible */
  min-height: clamp(520px, 78vh, 900px);
}

@media (max-width: 640px){
  .dexModal__card--full{
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }
}
.dexModal__card{
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dexModal__head{
  padding: 14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dexModal__titleRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.dexModal__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}
.dexModal__close{
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 10px;
}
.dexModal__close:hover{
  background: rgba(255,255,255,.06);
}
.dexModal__body{
  padding: 14px;
  min-height: clamp(360px, 62vh, 560px); /* grande y responsive */
  overflow: auto;
}

/* Actions area inside modal (kept minimal) */
.dexModal__actions{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

/* DEX MODAL responsive */
@media (max-width: 640px){
  .dexModal{ padding: 10px; }
  .dexModal__card{
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }
  .dexModal__title{ font-size: 16px; }
  .dexModal__body{ min-height: clamp(260px, 55vh, 420px); }
}


/* =========================================================
   NUEVO badge (mismo sitio que HOT, color distinto)
========================================================= */
.badgeNew.box{
  border-radius:12px;
  border:1px solid rgba(0, 194, 255, 0.45);
  background: rgba(0, 194, 255, 0.10);
  color:#00c2ff;
}


/* =========================================================
   FIX: Alinear 'Nuevo' con DEX/CEX (evitar salto de línea)
========================================================= */
.topRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap: nowrap;
}
.topRight > *{
  flex: 0 0 auto;
}
.badgeNew,
.badgeHot,
.pillType{
  white-space: nowrap;
}


/* =========================================================
   Modal: campos informativos (placeholders)
========================================================= */
.dexModal__body{
  /* aprovecha mejor el espacio del modal */
  padding: 18px 18px 20px;
}

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

.dexInfoHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.dexInfoTitle{
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
}
.dexInfoSub{
  font-size:12px;
  color: rgba(255,255,255,0.65);
  text-align:right;
}

.dexInfoGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.dexInfoCard{
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  min-height:74px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}

.dexInfoCard--full{
  grid-column: 1 / -1;
  min-height:120px;
}

.dexInfoLabel{
  font-size:12px;
  letter-spacing:.02em;
  color: rgba(255,255,255,0.70);
}

.dexInfoValue{
  font-size:14px;
  font-weight:700;
  color: rgba(255,255,255,0.94);
  text-align:left;
}
.dexInfoValue--block{
  font-weight:600;
  line-height:1.5;
}

.placeholder{
  opacity:.55;
}

.dexInfoActions{
  display:flex;
  justify-content:flex-end;
  padding-top:2px;
}

.btnFarm--modal{
  text-decoration:none;
  padding: 12px 16px;
  border-radius: 14px;
}

@media (max-width: 680px){
  .dexInfoHeader{
    flex-direction:column;
    align-items:flex-start;
  }
  .dexInfoSub{
    text-align:left;
  }
}

@media (max-width: 560px){
  .dexModal__body{
    padding: 14px 14px 16px;
  }
  .dexInfoGrid{
    grid-template-columns: 1fr;
  }
  .dexInfoActions{
    justify-content:stretch;
  }
  .btnFarm--modal{
    width:100%;
    text-align:center;
  }
}

/*
 * ====================================================================
 * Inline SVG icon integration
 *
 * These rules style the custom inline SVG icons used throughout the
 * interface. Icons inherit the accent colour (#FFE600) and include
 * consistent sizing and spacing so they align neatly with their
 * associated text without disrupting the layout.
 * ====================================================================
 */

/* General icon styling */
.ico {
  width: 1em;
  height: 1em;
  margin-right: 6px;
  fill: currentColor;
  color: #FFE600;
  display: inline-block;
}

/* Align items in tabs so icons and labels sit on the same baseline */
.tabs .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


    justify-content:stretch;
  }
  .btnFarm--modal{
    width:100%;
    text-align:center;
  }
}


/* Delta Neutral helpers (safe, scoped) */
.deltaBullets,
.deltaList{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}
.deltaBullets li,
.deltaList li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.deltaBullets li:last-child,
.deltaList li:last-child{ border-bottom: 0; }
.deltaIco{
  font-size: 16px;
  line-height: 1.2;
  opacity: .95;
}


/* Delta Neutral charts (isolated) */
.dnChartsCard .dnChartControls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:10px;
}
.dnChartsCard .dnLabel{ font-size:12px; opacity:.9; display:flex; flex-direction:column; gap:6px; }
.dnChartsCard .dnSelect{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: inherit;
  padding: 8px 10px;
  border-radius: 10px;
  min-width: 120px;
  outline: none;
}
.dnChartsGrid{ display:grid; grid-template-columns: 1fr; gap:12px; margin-top:12px; }
.dnChartBox{ padding: 10px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); overflow:hidden; }
.dnChartBox canvas{ display:block; width:100%; max-width:100%; }
.dnChartMeta{ display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; align-items:flex-end; }
.dnChartName{ font-weight:800; letter-spacing:.2px; }
.dnChartHint{ font-size:12px; opacity:.85; line-height:1.25; font-weight:700; }
.dnChartNote{ margin-top:12px; font-size:12px; opacity:.75; }
@media (min-width: 900px){
  .dnChartsGrid{ grid-template-columns: 1fr 1fr; }
}

.dnChartsCard .dnSelect:focus{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}
.dnChartsCard .dnSelect option{
  background: #0b1220;
  color: rgba(255,255,255,0.92);
}



/* Delta Neutral charts helpers (live-only, dark friendly) */
.dnLiveStatus{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.35;
  background: rgba(255, 80, 80, .10);
  border: 1px solid rgba(255, 80, 80, .28);
  color: rgba(255,255,255,.92);
}
.dnAprSummary{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  line-height:1.35;
  background: rgba(0, 170, 255, .10);
  border: 1px solid rgba(0, 170, 255, .22);
  color: rgba(255,255,255,.92);
}
.dnAprSummary .pos{ color: #2bd576; font-weight:800; }
.dnAprSummary .neg{ color: #ff4d4d; font-weight:800; }


/* DN LIVE PATCH v12 */

.dnChartsCard { overflow: visible;
}
.dnChartsCard .dnChartWrap { overflow: visible;
}
.dnChartsCard .dnChartCanvas{ display:block; width:100%; max-width:100%; }
.dnChartsCard .dnChartControls{ flex-wrap: wrap; align-items: flex-end; }
.dnChartsCard .dnLabel{ min-width: 140px; }
.dnChartsCard .dnInput{
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  outline: none;
}
.dnChartsCard .dnInput::placeholder{ color: rgba(255,255,255,.45); }
.dnChartsCard .dnInput:focus{ border-color: rgba(34,197,94,.55); box-shadow: 0 0 0 3px rgba(34,197,94,.12); }

.dnLiveStatus{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.25;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
}
.dnLiveStatus[data-kind="ok"]{ border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.08); }
.dnLiveStatus[data-kind="warn"]{ border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.08); }
.dnLiveStatus[data-kind="info"]{ border-color: rgba(59,130,246,.28); background: rgba(59,130,246,.08); }

.dnAprSummary{ margin-top: 10px; }
.dnAprGrid{
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
}
@media (max-width: 820px){
  .dnAprGrid{ grid-template-columns: 1fr; }
}
.dnAprItem{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.dnAprLabel{ font-size: 12px; color: rgba(255,255,255,.70); margin-bottom: 6px; }
.dnAprVal{ font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.dnAprSub{ font-size: 12px; color: rgba(255,255,255,.58); margin-top: 4px; }
.dnAprNet{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); }

.dnGood{ color: #22c55e; }
.dnBad{ color: #ef4444; }

.dnTag{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  margin-left: 6px;
  border: 1px solid rgba(255,255,255,.12);
}
.dnTagLong{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28); color: rgba(255,255,255,.92); }
.dnTagShort{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.28); color: rgba(255,255,255,.92); }

.dnBadge{ display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; border: 1px solid rgba(255,255,255,.12); }
.dnBadgeGood{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.28); }
.dnBadgeMid{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); }
.dnBadgeLow{ background: rgba(148,163,184,.10); border-color: rgba(148,163,184,.20); }
.dnWarn{ color:#ef4444; }


/* Delta Neutral tool links */
.dnToolLink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;color:#f0b90b;}
.dnToolLink:hover{filter:brightness(1.1);text-decoration:underline;}


/* --- Delta Neutral: Charts layout (safe) --- */
.dnChartsGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.dnChartCard{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  min-width: 0;
}
.dnChartHead{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
.dnChartTitle{font-weight:800;}
.dnChartSub{opacity:.75;font-size:12px;line-height:1.2;}
.dnChartCanvas{display:block;width:100%;height:240px;max-width:100%;margin:0 auto;}
.dnChartHint{margin-top:8px;opacity:.8;font-size:12px;line-height:1.25;}
.dnLong{color: rgba(34,197,94,.95); font-weight:800;}
.dnShort{color: rgba(239,68,68,.95); font-weight:800;}

@media (max-width: 920px){
  .dnChartsGrid{grid-template-columns:1fr;}
  .dnChartCanvas{height:220px;}
}

.dnActionLink{
  color: rgba(245, 158, 11, .95) !important;
  text-decoration: none;
  font-weight: 700;
}
.dnActionLink:hover{ color: rgba(251, 191, 36, 1) !important; }


/* Delta Neutral — responsive for Visual (precio/funding entre exchanges) */
.dnVizCol svg{ display:block; width:100%; max-width:100%; height:auto; }

/* Make the two illustrative visual cards stack on small screens (they use inline grid-column). */
@media (max-width: 920px){
  .dnVizCol{ grid-column: span 12 !important; }
}

/* Prevent clipping of custom-canvas drawings and tooltips */
.dnChartCard{ overflow: visible; }
.dnChartCanvas{ max-width:100%; }


/* Fix: avoid clipping charts inside Delta Neutral Visual section */
.dnChartsCard{ overflow: visible; }
.dnChartsCard .dnChartWrap{ overflow: visible; }
@media (max-width: 920px){
  .dnChartCanvas{ height: 260px; }
}


/* HL links color fix (Airdrops tab) */
.card.dexari a[href*="hyperliquid"],
.card.based a[href*="hyperliquid"],
.card.evedex a[href*="hyperliquid"]{
  color: #ff9800; /* orange */
}
.card.dexari a[href*="hyperliquid"]:hover,
.card.based a[href*="hyperliquid"]:hover,
.card.evedex a[href*="hyperliquid"]:hover{
  color: #ffb74d;
}


/* HL badge links color (Airdrops tab) */
.card[data-name="Based"] a.hlBadge,
.card[data-name="Dexari"] a.hlBadge,
.card[data-name="Evedex"] a.hlBadge,
.card[data-name="HyENA"] a.hlBadge{
  color:#ff9800 !important;
}
.card[data-name="Based"] a.hlBadge:hover,
.card[data-name="Dexari"] a.hlBadge:hover,
.card[data-name="Evedex"] a.hlBadge:hover,
.card[data-name="HyENA"] a.hlBadge:hover{
  color:#ffb74d !important;
}


/* =========================================================
   Noticias (tab): layout limpio sin repetición
   - Nombre (píldora izquierda)
   - Últimas noticias (píldora derecha)
   - Enlaces debajo (izq -> dcha)
   - Tarjetas con altura consistente en PC
========================================================= */

/* Igualar alturas en PC */
.panel[data-panel="noticias"] .grid{
  grid-auto-rows: 1fr;
}
.card.newsCard{
  display:flex;
  flex-direction:column;
  height:100%;
  /* more compact but still aligned in PC */
  min-height: 122px;
  padding: 12px 12px 10px;
}

.newsCardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* Intro de la pestaña Noticias (solo 1 línea, con icono) */
.newsIntroLine{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.newsIntroLine i{
  margin-top:2px;
  opacity:0.85;
  color:#FFE600;
}

.newsPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:32px;
  padding: 0 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color:#e9eef4;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
}

.newsPillName{
  max-width: 60%;
  overflow:hidden;
  text-overflow: ellipsis;
  justify-content:flex-start;
}

.newsPillName .dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background: rgba(0,255,170,.95);
  box-shadow: 0 0 0 2px rgba(0,255,170,.15);
  flex: 0 0 auto;
}

/* Píldora clicable de Últimas noticias */
.newsPillAction{
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;

  /* En naranja por defecto */
  border-color: rgba(255,152,0,.55);
  background: rgba(255,152,0,.14);
  color:#ffb74d;
}
.newsPillAction:hover{
  border-color: rgba(255,152,0,.75);
  background: rgba(255,152,0,.20);
}
.newsPillAction:active{
  transform: translateY(1px);
}

/* Links debajo */
.newsCardLinksRow{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;

  /* Mantener altura similar entre tarjetas (PC) */
  min-height: 40px;
  max-height: 56px;
  overflow:hidden;
}

.newsCardLinksRow .dnToolLink{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Icon-only links (Noticias cards) */
.newsCardLinksRow .dnToolLink.dnToolLink--icon{
  gap: 0;
  padding: 0;
  width: 36px;
  height: 30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#e9eef4;
}
.newsCardLinksRow .dnToolLink.dnToolLink--icon:hover{
  text-decoration:none;
  border-color: rgba(255,255,255,.16);
}
.newsCardLinksRow .dnToolLink.dnToolLink--icon i{
  font-size: 14px;
  color: currentColor;
}

/* Colores naturales por plataforma (iconos) */
.newsCardLinksRow .dnToolLink--icon .fa-discord{ color:#5865F2; }
.newsCardLinksRow .dnToolLink--icon .fa-telegram{ color:#26A5E4; }
.newsCardLinksRow .dnToolLink--icon .fa-x-twitter{ color:#e9eef4; }
.newsCardLinksRow .dnToolLink--icon .fa-newspaper{ color:#b0bec5; }
/* Extras */
.newsCardLinksRow .dnToolLink--icon .fa-book{ color:#b0bec5; }
.newsCardLinksRow .dnToolLink--icon .fa-chart-line{ color:#f2a900; }

.newsCardLinksRow .dnToolLink--icon:hover i{
  filter: brightness(1.12);
}

@media (max-width: 900px){
  .newsPillName{ max-width: 58%; }
}

@media (max-width: 640px){
  .card.newsCard{ min-height: unset; }
  .newsCardHeader{ flex-wrap:wrap; }
  .newsPillName{ max-width: 100%; width:100%; justify-content:flex-start; }
  .newsPillAction{ width:100%; }
  .newsCardLinksRow{ max-height: none; min-height: unset; }
}

/* Noticias modal (fullscreen, centered, responsive) */
.newsModalWrap{ display:flex; flex-direction:column; gap:12px; }
.newsModalTop{ display:flex; flex-direction:column; gap:6px; }
.newsFeed{ display:flex; flex-direction:column; gap:10px; }
.newsItem{ padding: 14px; }
.newsItemMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}
.newsItemActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.newsTranslateBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#e5e7eb;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}
.newsTranslateBtn i{ opacity:.85; }
.newsTranslateBtn:hover{
  border-color: rgba(255,152,0,.55);
  color:#ffb74d;
}
.newsTranslateBtn.is-loading{
  opacity:.65;
  cursor:wait;
}
.newsTranslateBtn:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.newsTranslateError{ margin-top:8px; }
.newsItemLink{
  color: #ff9800;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}
.newsItemLink:hover{ color:#ffb74d; }
.newsItemText{ line-height: 1.4; white-space: pre-wrap; text-align:left; }
.newsItemText *{ text-align:left; }
.newsItemText a{ color: var(--accent); text-decoration: underline; }

/* X embed inside the modal */
.xEmbedBox{ padding: 0; overflow: hidden; }
.xEmbedBox iframe{ width: 100% !important; border: 0 !important; border-radius: 14px; }

/* Inline link icon (clean replacement for Telegram emoji decorators) */
.newsItemText a.newsInlineLink{
  position: relative;
  padding-left: 18px;
  display: inline-block;
}
.newsItemText a.newsInlineLink::before{
  content: "\f0c1"; /* fa-link */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0.05em;
  opacity: 0.75;
  font-size: 0.95em;
}

@media (max-width: 640px){
  .newsItemMeta{ flex-direction:column; align-items:flex-start; }
  .newsItemLink{ width:100%; }
}



/* =========================================================
   v15 – Responsive fixes (Delta Neutral tools + Farm sections)
   SAFE: CSS-only overrides with !important for mobile
========================================================= */
@media (max-width: 700px){

  /* --- Delta Neutral: Tools grid (inline styles override) --- */
  .dnToolsGrid{
    grid-template-columns: 1fr !important;
  }
  .dnToolsGrid > div{
    grid-column: auto / span 1 !important;
    width: 100% !important;
  }
  .dnToolTop{
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }
  .dnToolTitle{
    flex-wrap: wrap !important;
    line-height: 1.25;
  }
  .dnToolBadge{
    white-space: nowrap;
  }

  /* Make any icon+text rows wrap instead of overflowing */
  .dnToolsGrid *{
    max-width: 100%;
  }

  /* --- Farm panel: force cards to stack --- */
  .panel[data-panel="farm"] .grid > .card{
    grid-column: span 12 !important;
  }

  /* Prevent long inline elements from overflowing */
  .panel[data-panel="farm"] .card h3{
    flex-wrap: wrap;
    line-height: 1.25;
  }
  .panel[data-panel="farm"] .deltaBullets li{
    align-items: flex-start;
  }
  .panel[data-panel="farm"] .deltaBullets span{
    word-break: break-word;
  }
}

/* Extra-small devices */
@media (max-width: 480px){
  .dnToolBadge{
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  .dnToolTop{
    gap: 8px !important;
  }
}


/* === PAS Sparklines v3 layout (no number clipping) === */
.pasSparkWrap{display:flex;align-items:center;gap:8px;max-width:100%;}
.pasSparkValue{white-space:nowrap;min-width:0;flex:1 1 auto;}
canvas.pasSpark{flex:0 0 auto;width:72px;height:22px;min-width:56px;display:block;}
@media (max-width:768px){
  canvas.pasSpark{width:62px;height:20px;min-width:52px;}
}


/* === PAS Sparklines v4 layout (no number clipping) === */
.pasSparkWrap{display:flex;align-items:center;gap:8px;max-width:100%;}
.pasSparkValue{white-space:nowrap;min-width:0;flex:1 1 auto;}
canvas.pasSpark{flex:0 0 auto;width:72px;height:22px;min-width:56px;display:block;}
@media (max-width:768px){
  canvas.pasSpark{width:62px;height:20px;min-width:52px;}
}

:root{--font-inter:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
body{font-family:var(--font-inter) !important;}

:root{--font-inter:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
html, body, button, input, select, textarea{font-family:var(--font-inter) !important;}

/* === Global typography: Inter everywhere (except Font Awesome glyphs) === */
:root{--font-inter:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
html, body{font-family:var(--font-inter) !important;}
*:not(i.fa-solid):not(i.fa-regular):not(i.fa-brands){font-family:var(--font-inter) !important;}

/* Font Awesome icons should align like previous SVGs */
.icoFA{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  font-size:16px;
  line-height:16px;
  color: rgba(255, 204, 0, .95); /* match old yellow */
  transform: translateY(1px);
}
/* keep original hover/active behaviors via inherit where appropriate */
.tabs .tab .icoFA{margin-right:8px;}



/* === PAS Sparkline Layout (no overlap, centered, responsive) === */
.pasSparkWrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
}
.pasSparkValue{
  display:block;
  min-width:0;
  white-space:nowrap;
}
canvas.pasSpark{
  flex:0 0 62px;
  width:62px;
  height:18px;
  display:block;
  opacity:.95;
}
/* Slightly smaller on narrow screens */
@media (max-width: 520px){
  canvas.pasSpark{ flex-basis:54px; width:54px; height:16px; }
}
@media (max-width: 380px){
  canvas.pasSpark{ flex-basis:48px; width:48px; height:16px; }
}

/* === Font Awesome spacing === */
.actions label .icoFA{ margin-right:8px; }
.actions .btn .icoFA{ margin-right:8px; }
.toggle span .icoFA{ margin-right:8px; }





.panel[data-panel="airdrops"] .cardTop .topRight{
  margin-left: 0 !important;
  justify-content: flex-start !important;
  padding-right: 0 !important;
}






/* --- Airdrops grid: equal-height cards per row --- */
.panel[data-panel="airdrops"] .grid{
  align-items: stretch;
}
.panel[data-panel="airdrops"] .grid > .card{
  height: 100%;
}



/* --- Compact difficulty badge --- */
.diffIcon{
  margin-right:6px;
  opacity:0.9;
  font-size:13px;
}





/* --- Airdrops cards (FINAL): force single-line header for difficulty + tags --- */
.panel[data-panel="airdrops"] #grid .card .cardTop{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.panel[data-panel="airdrops"] #grid .card .cardTop .topLeft,
.panel[data-panel="airdrops"] #grid .card .cardTop .topRight{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
}

.panel[data-panel="airdrops"] #grid .card .cardTop .topLeft{
  flex:0 0 auto !important;
}
.panel[data-panel="airdrops"] #grid .card .cardTop .topRight{
  flex:0 0 auto !important;
}