/* ================================================================
   DESIGN SYSTEM — CryptoCode
   Fuente de verdad: design-system/colors_and_type.css + ui_kits/
   Importar en TODAS las páginas.
   ================================================================ */

/* ── SELF-HOSTED FONTS ── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/jetbrains-mono-600.woff2') format('woff2'); }

/* ── DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  /* Fondos */
  --bg-primary:         #06060a;
  --bg-secondary:       rgba(15, 15, 24, 0.6);
  --bg-secondary-solid: #0f0f18;
  --bg-tertiary:        rgba(20, 20, 31, 0.5);
  --bg-tertiary-solid:  #14141f;

  /* Surface ramp */
  --surface-0:   #06060a;
  --surface-50:  #0a0a10;
  --surface-100: #0f0f18;
  --surface-200: #14141f;
  --surface-300: #1a1a28;
  --surface-400: #222233;
  --surface-500: #2d2d40;
  --surface-600: #3d3d55;

  /* Texto */
  --text-primary:   #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;
  --fg1: var(--text-primary);
  --fg2: var(--text-secondary);
  --fg3: var(--text-muted);

  /* Bordes */
  --border-color:       rgba(255, 255, 255, 0.06);
  --border-color-hover: rgba(255, 255, 255, 0.12);

  /* Acentos semánticos */
  --accent-blue:       #3b82f6;
  --accent-blue-hover: #60a5fa;
  --accent-blue-deep:  #2563eb;
  --accent-green:      #06d6a0;
  --accent-red:        #ef4444;
  --accent-live:       #ef4444;
  --accent-yellow:     #eab308;
  --accent-purple:     #8b5cf6;
  --accent-orange:     #f97316;
  --accent-cyan:       #06d6a0;

  /* Gradients aprobados (no inventar más) */
  --gradient-primary:       linear-gradient(135deg, #3b82f6, #2563eb);
  --gradient-primary-hover: linear-gradient(135deg, #60a5fa, #3b82f6);
  --gradient-brand:         linear-gradient(135deg, #ffffff 0%, #3b82f6 50%, #8b5cf6 100%);
  --gradient-cyan-blue:     linear-gradient(135deg, #06d6a0, #3b82f6);
  --gradient-logo-bg:       linear-gradient(135deg, #3b82f6, #7c3aed);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 100px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Shadows / glows */
  --shadow-sm:        0 2px 12px rgba(0, 0, 0, 0.2);
  --shadow-md:        0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-lg:        0 20px 60px rgba(0, 0, 0, 0.5);
  --glow-blue:        0 4px 20px rgba(59, 130, 246, 0.25);
  --glow-blue-strong: 0 8px 30px rgba(59, 130, 246, 0.35);
  --glow-green:       0 4px 20px rgba(6, 214, 160, 0.25);
  --glow-red:         0 4px 20px rgba(239, 68, 68, 0.25);

  /* Blur */
  --blur-glass:        blur(12px);
  --blur-glass-strong: blur(20px);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.15s;
  --dur-base:   0.25s;
  --dur-slow:   0.5s;

  /* Grid background */
  --bg-grid: linear-gradient(rgba(59,130,246,0.02) 1px, transparent 1px),
             linear-gradient(90deg, rgba(59,130,246,0.02) 1px, transparent 1px);
  --bg-grid-size: 60px 60px;

  /* Tipografía */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-60: 60px; --fs-72: 72px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900;

  --lh-tight: 1.05; --lh-snug: 1.3; --lh-base: 1.5; --lh-relax: 1.6; --lh-loose: 1.85;

  --tracking-tight:   -0.025em;
  --tracking-display: -0.02em;
  --tracking-base:     0;
  --tracking-wide:     0.05em;
  --tracking-label:    0.06em;
  --tracking-caps:     0.1em;

  /* Aliases legacy — backward compat */
  --border:        var(--border-color);
  --border-hover:  var(--border-color-hover);
  --accent:        var(--accent-blue);
  --accent-hover:  var(--accent-blue-hover);
  --green:         var(--accent-green);
  --red:           var(--accent-red);
  --orange:        var(--accent-orange);
  --purple:        var(--accent-purple);
}

/*
  Light theme overrides (item 11 QA 2026-05-01 — fase 1).
  Solo redefinimos los tokens base. Reglas hardcoded con #06060a, rgba blancas,
  etc, van a quedar mal en light en algunas paginas — el refinamiento por
  pagina es trabajo de iteraciones siguientes.
*/
[data-theme="light"] {
  --bg-primary:         #f5f7fa;
  --bg-secondary:       rgba(255, 255, 255, 0.7);
  --bg-secondary-solid: #ffffff;
  --bg-tertiary:        rgba(248, 250, 252, 0.7);
  --bg-tertiary-solid:  #f8fafc;

  --surface-0:   #ffffff;
  --surface-50:  #f8fafc;
  --surface-100: #f1f5f9;
  --surface-200: #e2e8f0;
  --surface-300: #cbd5e1;
  --surface-400: #94a3b8;
  --surface-500: #64748b;
  --surface-600: #475569;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #64748b;

  --border-color:       rgba(15, 23, 42, 0.08);
  --border-color-hover: rgba(15, 23, 42, 0.16);

  --shadow-sm: 0 2px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 32px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.12);

  --bg-grid: linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
             linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
}
[data-theme="light"] body {
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
}

/* ── SEMANTIC TYPE ── */
.label-caps {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
.tabular { font-variant-numeric: tabular-nums; }
.gradient-text-cyan {
  background: var(--gradient-cyan-blue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-blue); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-blue-hover); }

/* ── SCROLLBAR ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* ── NAVBAR ───────────────────────────────────────────────────── */
.glass-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(15, 15, 24, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* btn-ghost-nav y btn-ghost son idénticos — ambos nombres soportados */
.btn-ghost-nav,
.btn-ghost {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #d1d5db;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost-nav:hover,
.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
}

/* Estado activo en el nav — aplicar manualmente por JS o atributo */
.btn-ghost-active {
  border-color: rgba(59, 130, 246, 0.4) !important;
  color: var(--accent-blue) !important;
  background: rgba(59, 130, 246, 0.06) !important;
}

/* Primary CTA para nav — mismo tamaño que btn-ghost-nav */
.btn-primary-nav {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.btn-primary-nav:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.25);
  transform: translateY(-1px);
}

.btn-logout-nav {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #ef4444;
  background: transparent;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all 0.3s ease;
}
.btn-logout-nav:hover {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* Language switcher — nav */
.nav-lang {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}
.nav-lang-btn {
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: transparent;
  color: #d1d5db;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: Inter, sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.04em;
  line-height: 1;
}
.nav-lang-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
}
.nav-lang-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* Theme switch (item 11 QA 2026-05-01) — junto al language switch del nav top. */
.nav-theme {
  display: flex;
  gap: 4px;
  margin-left: 6px;
}
.nav-theme-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: transparent;
  color: #d1d5db;
  font-family: Inter, sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-theme-btn:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
}
.nav-theme-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}
[data-theme="light"] .nav-theme-btn {
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-secondary);
}
[data-theme="light"] .nav-lang-btn {
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-secondary);
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 6, 10, 0.95);
  backdrop-filter: blur(20px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.mobile-menu.active { display: flex; }

.nav-link { position: relative; color: #94a3b8; transition: color 0.2s; }
.nav-link:hover { color: #e2e8f0; }
.no-underline, .no-underline:hover { text-decoration: none; }

/* ── NAVBAR LAYOUT ────────────────────────────────────────────── */
.nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.nav-logo-icon {
  width: 2rem; height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-logo-icon img { width: 2rem; height: 2rem; object-fit: contain; display: block; }

.nav-logo-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.025em;
}

/* Desktop links — hidden mobile, flex desktop */
.nav-links {
  display: none;
  align-items: center;
  gap: 0.75rem;
}
/* Always-visible links (auth pages: login, register, etc.) */
.nav-links-always {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Section links (landing — wider gap) */
.nav-section-links {
  display: none;
  align-items: center;
  gap: 1.3rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-section-links { display: flex; }
  .nav-mobile-btn { display: none; }
}

.nav-mobile-btn {
  padding: 0.5rem;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-mobile-btn:hover { color: #fff; }
.nav-mobile-btn svg { width: 24px; height: 24px; }

.nav-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  padding: 0.5rem;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-close-btn:hover { color: #fff; }
.nav-close-btn svg { width: 24px; height: 24px; }

.nav-mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 16rem;
}
.nav-mobile-links .btn-ghost-nav,
.nav-mobile-links .btn-ghost,
.nav-mobile-links .btn-logout-nav {
  padding: 0.75rem 1.5rem;
  text-align: center;
  display: block;
  width: 100%;
}

/* Landing mobile section links */
.nav-mobile-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.nav-mobile-section a {
  font-size: 1.05rem;
  font-weight: 500;
  color: #e5e7eb;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-mobile-section a:hover { color: #fff; }

/* ── BOTONES ──────────────────────────────────────────────────── */
.btn {
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary-solid);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover { border-color: var(--border-color-hover); background: rgba(255,255,255,0.04); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: 8px; }

.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  border-color: transparent;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}
.btn-primary:disabled { transform: none; box-shadow: none; }

.btn-danger  { color: var(--accent-red);   border-color: rgba(239,68,68,0.25); }
.btn-danger:hover  { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.4); }
.btn-success { color: var(--accent-green); border-color: rgba(6,214,160,0.25); }
.btn-success:hover { background: rgba(6,214,160,0.1); border-color: rgba(6,214,160,0.4); }

/* ── FORMULARIOS ──────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary-solid);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

/* Accent global para controles nativos: range + checkbox + radio
   Sobrescribe el dorado/amarillo default de Chrome en dark mode. */
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent-blue);
}
input:hover:not(:read-only):not(:disabled),
textarea:hover:not(:read-only),
select:hover { border-color: var(--border-color-hover); }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
input::placeholder, textarea::placeholder {
  color: var(--text-secondary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
}
input:read-only:not([type="checkbox"]):not([type="range"]):not([type="radio"]):not([type="color"]) { opacity: 0.5; cursor: not-allowed; }
input:read-only:not([type="checkbox"]):not([type="range"]):not([type="radio"]):not([type="color"]):focus { border-color: var(--border-color); box-shadow: none; }
textarea { resize: vertical; min-height: 60px; }

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select:hover { border-color: var(--accent-blue); }
select option { background: var(--bg-secondary-solid); color: var(--text-primary); }

/* Select nativo estilizado (usado en createSearchableSelect) */
.native-select {
  padding: 8px 32px 8px 12px;
  background: var(--bg-tertiary-solid);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  width: 100%;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  outline: none;
}
.native-select:hover { border-color: var(--border-color-hover); }
.native-select:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.native-select option { background: var(--bg-secondary-solid); color: var(--text-primary); }

/* ── SPINNER ──────────────────────────────────────────────────── */
.spinner,
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── TOAST ────────────────────────────────────────────────────── */
#toastContainer,
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(100px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  max-width: 380px;
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { background: rgba(6, 214, 160, 0.9); color: #fff; }
.toast-error   { background: rgba(239, 68, 68, 0.9);  color: #fff; }
.toast-warning { background: rgba(234, 179, 8, 0.85);  color: #fff; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── BADGE ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.badge-active   { background: rgba(6,214,160,0.1);   color: var(--accent-green);  border: 1px solid rgba(6,214,160,0.2); }
.badge-inactive { background: rgba(148,163,184,0.08); color: var(--text-secondary); border: 1px solid var(--border-color); }
.badge-plan     { background: rgba(139,92,246,0.1);   color: var(--accent-purple); border: 1px solid rgba(139,92,246,0.2); }
.badge-admin    {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15));
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
}

/* ── MODAL ────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6,6,10,0.8);
  backdrop-filter: blur(8px);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}
/* Soporte para .show (portfolio) y .active (testnet) */
.modal-overlay.show,
.modal-overlay.active { display: flex; }
.modal {
  background: var(--bg-secondary-solid);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal h3 { margin-bottom: 20px; font-size: 16px; font-weight: 700; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; }

/* ── TOGGLE SWITCH ────────────────────────────────────────────── */
.toggle { position: relative; width: 40px; height: 22px; display: inline-block; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--bg-tertiary-solid);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  transition: 0.3s;
}
.toggle .slider::before {
  content: "";
  position: absolute;
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: 0.3s;
}
.toggle input:checked + .slider { background: var(--accent-blue); border-color: var(--accent-blue); }
.toggle input:checked + .slider::before { transform: translateX(18px); background: #fff; }

/* ── TABLAS (base) ────────────────────────────────────────────── */
.table-container { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
th { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ── PANELES ──────────────────────────────────────────────────── */
.panel {
  background: var(--bg-secondary);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  transition: border-color 0.2s;
}
.panel:hover { border-color: var(--border-color-hover); }
.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-header h2 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.panel-body { padding: 20px; }

/* ── CARDS ────────────────────────────────────────────────────── */
.card {
  background: var(--bg-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  transition: border-color 0.2s;
}
.card:hover { border-color: var(--border-color-hover); }

.glass-card {
  background: rgba(20, 20, 31, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(20, 20, 31, 0.7);
  transform: translateY(-2px);
}

/* ── GLASSMORPHISM UTILS ──────────────────────────────────────── */
.glass {
  background: rgba(15, 15, 24, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── SKELETON ─────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  font-size: 12px;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}

/* ── UTILIDADES ───────────────────────────────────────────────── */
.positive  { color: var(--accent-green); }
.negative  { color: var(--accent-red); }
.neutral   { color: var(--text-secondary); }
.symbol    { font-weight: 600; color: var(--accent-blue); }
.timestamp { font-size: 12px; color: var(--text-secondary); }
.placeholder { text-align: center; padding: 40px 20px; color: var(--text-secondary); font-size: 14px; }
.loading   { display: flex; justify-content: center; align-items: center; height: 100px; color: var(--text-secondary); }

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #3b82f6 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PILL BADGE ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 700;
}
.pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; }
.pill-green  { background: rgba(6,214,160,0.1);  color: var(--accent-green);  border: 1px solid rgba(6,214,160,0.2); }
.pill-green::before  { background: var(--accent-green); animation: pill-blink 1.5s infinite; }
.pill-red    { background: rgba(239,68,68,0.1);  color: var(--accent-red);    border: 1px solid rgba(239,68,68,0.2); }
.pill-red::before    { background: var(--accent-red); animation: pill-blink 1.5s infinite; }
.pill-yellow { background: rgba(234,179,8,0.1);  color: var(--accent-yellow); border: 1px solid rgba(234,179,8,0.2); }
.pill-yellow::before { background: var(--accent-yellow); animation: pill-blink 1.5s infinite; }
.pill-blue   { background: rgba(59,130,246,0.1); color: var(--accent-blue);   border: 1px solid rgba(59,130,246,0.2); }
.pill-blue::before   { background: var(--accent-blue); animation: pill-blink 1.5s infinite; }
.pill-gray   { background: rgba(148,163,184,0.08); color: var(--text-secondary); border: 1px solid var(--border-color); }
.pill-gray::before   { background: var(--text-secondary); animation: pill-blink 1.5s infinite; }
.pill-purple { background: rgba(139,92,246,0.1); color: var(--accent-purple); border: 1px solid rgba(139,92,246,0.2); }
.pill-purple::before { background: var(--accent-purple); animation: pill-blink 1.5s infinite; }
.pill-orange { background: rgba(249,115,22,0.1); color: var(--accent-orange); border: 1px solid rgba(249,115,22,0.2); }
.pill-orange::before { background: var(--accent-orange); animation: pill-blink 1.5s infinite; }
@keyframes pill-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── METRIC CARD v2 ───────────────────────────────────────────── */
.metric-card-v2 {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.metric-card-v2:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.metric-card-v2 .accent-bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px; border-radius: 16px 16px 0 0;
  opacity: 0; transition: opacity 0.25s ease;
}
.metric-card-v2:hover .accent-bar { opacity: 1; }
.metric-card-v2 .meta { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 10px; }
.metric-card-v2 .main-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.metric-card-v2 .trend { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.metric-card-v2 .trend .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.metric-card-v2 .sparkbar { display: flex; align-items: flex-end; gap: 2px; height: 28px; margin-top: 12px; }
.metric-card-v2 .sparkbar span { flex: 1; border-radius: 2px 2px 0 0; opacity: 0.6; transition: opacity 0.2s; min-width: 4px; }
.metric-card-v2:hover .sparkbar span { opacity: 1; }
/* Evitar desborde de valores largos (montos/porcentajes) en cards angostas */
.metric-card-v2 .main-value { overflow-wrap: anywhere; }

/* ── metric-card-v2 COMPACT ───────────────────────────────────────
   Variante densa para grids angostas (ej. paneles a media pantalla en Futures).
   Valor y padding reducidos para que el contenido calce sin desbordar, como las
   cards del dashboard principal en su grid apretado. */
.metric-card-v2--compact { padding: 14px 16px; }
.metric-card-v2--compact .meta { margin-bottom: 7px; }
.metric-card-v2--compact .main-value { font-size: 20px; font-weight: 700; }
.metric-card-v2--compact .trend { margin-top: 6px; font-size: 11px; }
.progress-wrap { background: rgba(255,255,255,0.06); border-radius: 100px; height: 6px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 100px; transition: width 1s ease; }

/* ── TABLE v2 (enhanced) ──────────────────────────────────────── */
.table-v2 { width: 100%; border-collapse: collapse; }
.table-v2 thead tr { background: rgba(6,6,10,0.6); border-bottom: 1px solid var(--border-color); }
.table-v2 th {
  padding: 11px 14px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-secondary); white-space: nowrap;
  cursor: pointer; user-select: none; transition: color 0.15s;
}
.table-v2 th:hover { color: var(--text-primary); }
.table-v2 th .sort-icon { margin-left: 4px; opacity: 0.4; font-size: 10px; }
.table-v2 th.sorted { color: var(--accent-blue); }
.table-v2 th.sorted .sort-icon { opacity: 1; }
.table-v2 tbody tr { border-bottom: 1px solid var(--border-color); transition: background 0.12s; }
.table-v2 tbody tr:last-child { border-bottom: none; }
.table-v2 tbody tr:nth-child(even) { background: rgba(255,255,255,0.01); }
.table-v2 tbody tr:hover { background: rgba(59,130,246,0.04); }
.table-v2 td { padding: 12px 14px; font-size: 13px; }

/* ── ALERT v2 ─────────────────────────────────────────────────── */
.alert-v2 {
  display: flex; gap: 14px; padding: 16px 18px;
  border-radius: 14px; margin-bottom: 10px;
  border-left: 3px solid;
  backdrop-filter: blur(8px);
  transition: transform 0.2s;
}
.alert-v2:hover { transform: translateX(2px); }
.alert-v2.high   { background: rgba(239,68,68,0.06);  border-color: var(--accent-red); }
.alert-v2.medium { background: rgba(249,115,22,0.06); border-color: var(--accent-orange); }
.alert-v2.low    { background: rgba(59,130,246,0.06); border-color: var(--accent-blue); }
.alert-v2.healthy{ background: rgba(6,214,160,0.06);  border-color: var(--accent-green); }
.alert-v2 .al-icon  { font-size: 20px; flex-shrink: 0; margin-top: 1px; line-height: 0; }
.alert-v2 .al-icon svg { display: block; }
.alert-v2.high   .al-icon { color: var(--accent-red); }
.alert-v2.medium .al-icon { color: var(--accent-orange); }
.alert-v2.low    .al-icon { color: var(--accent-blue); }
.alert-v2.healthy .al-icon { color: var(--accent-green); }
.alert-v2 .al-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.alert-v2 .al-msg   { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.alert-v2 .al-time  { font-size: 11px; color: var(--text-secondary); margin-top: 5px; opacity: 0.7; }
.alert-v2 .al-badge {
  margin-left: auto; flex-shrink: 0; align-self: flex-start;
  padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700;
}
.alert-v2.high   .al-badge { background: rgba(239,68,68,0.15);   color: var(--accent-red); }
.alert-v2.medium .al-badge { background: rgba(249,115,22,0.15);  color: var(--accent-orange); }
.alert-v2.low    .al-badge { background: rgba(59,130,246,0.15);  color: var(--accent-blue); }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 48px 24px;
  background: var(--bg-secondary);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 16px;
}
.empty-state .es-icon {
  width: 64px; height: 64px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.15);
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.empty-state .es-icon svg { width: 28px; height: 28px; color: var(--accent-blue); }
.empty-state h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.empty-state p  { font-size: 13px; color: var(--text-secondary); max-width: 300px; margin: 0 auto 20px; line-height: 1.6; }

/* ── SKELETON ROW ─────────────────────────────────────────────── */
.skeleton-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-color); }
.skeleton-row:last-child { border-bottom: none; }
.sk { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
.sk-avatar { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.sk-line { height: 12px; }
.sk-sm   { height: 10px; }

/* ── BTN v2 ───────────────────────────────────────────────────── */
.btn-v2 {
  position: relative; overflow: hidden;
  padding: 9px 20px; border-radius: 10px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: none;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
}
.btn-v2:active { transform: scale(0.97); }
.btn-v2-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; box-shadow: 0 2px 12px rgba(59,130,246,0.25); }
.btn-v2-primary:hover { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 4px 20px rgba(59,130,246,0.35); transform: translateY(-1px); }
.btn-v2-ghost  { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); }
.btn-v2-ghost:hover  { border-color: var(--border-color-hover); background: rgba(255,255,255,0.03); }
.btn-v2-danger { background: rgba(239,68,68,0.1); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.25); }
.btn-v2-danger:hover { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.4); }
.btn-v2-success { background: rgba(6,214,160,0.1); color: var(--accent-green); border: 1px solid rgba(6,214,160,0.25); }
.btn-v2-success:hover { background: rgba(6,214,160,0.18); border-color: rgba(6,214,160,0.4); }
.btn-v2-sm { padding: 6px 14px; font-size: 12px; }

/* Meta/timestamp para toolbars (last sync, counters chicos, etc.) */
.toolbar-meta {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── UTILITIES ───────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── EMPTY STATE — inline variant (inside tables) ────────────── */
.empty-state--inline { border: none; background: none; padding: 28px 24px; }

/* ── SIDEBAR LAYOUT ─────────────────────────────────────────── */
:root {
  --sidebar-width: 220px;
  --sidebar-collapsed: 64px;
  --sidebar-bg: rgba(10, 10, 16, 0.85);
  --sidebar-bg-expanded: rgba(10, 10, 16, 0.92);
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-link-hover: rgba(255, 255, 255, 0.04);
  --sidebar-link-active-bg: rgba(59, 130, 246, 0.08);
  --sidebar-link-active-border: var(--accent-blue);
}

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-collapsed);
  background: var(--sidebar-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--sidebar-border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.25s ease,
              box-shadow 0.25s ease;
}

/* Expanded on hover — glass overlay, no page reflow */
.sidebar:hover {
  width: var(--sidebar-width);
  background: var(--sidebar-bg-expanded);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
}

/* Content offset — always collapsed width, sidebar overlays on expand */
body.has-sidebar #app-content {
  margin-left: var(--sidebar-collapsed);
  min-height: 100vh;
}

/* ── Hide text when collapsed, show on hover ── */
.sidebar .sidebar-logo-text,
.sidebar .sidebar-link span,
.sidebar .sidebar-section-label,
.sidebar .sidebar-user-info,
.sidebar .sidebar-logout span {
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.sidebar:hover .sidebar-logo-text,
.sidebar:hover .sidebar-link span,
.sidebar:hover .sidebar-section-label,
.sidebar:hover .sidebar-user-info,
.sidebar:hover .sidebar-logout span {
  opacity: 1;
  pointer-events: auto;
}

/* ── Sidebar sections — consistent padding for alignment ── */
.sidebar-top    { padding: 16px 10px 12px; }
.sidebar-main   { flex: 1; padding: 4px 10px; overflow-y: auto; overflow-x: hidden; }
.sidebar-bottom { padding: 12px 10px 16px; }

/* ── Logo ── */
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; margin-bottom: 16px;
  text-decoration: none; color: inherit;
}
.sidebar-logo-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar-logo-icon svg { width: 16px; height: 16px; color: #fff; }
.sidebar-logo-text {
  font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.025em;
}

/* ── Section label ── */
.sidebar-section-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(148, 163, 184, 0.5);
  padding: 12px 13px 6px;
  height: 30px; /* keep space even when hidden */
}

/* ── Links ── */
.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px;
  border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.sidebar-link:hover {
  background: var(--sidebar-link-hover);
  color: var(--text-primary);
}
.sidebar-link-active {
  background: var(--sidebar-link-active-bg);
  color: var(--accent-blue);
  border-color: rgba(59, 130, 246, 0.15);
}
.sidebar-link svg {
  width: 18px; height: 18px; flex-shrink: 0;
}

/* ── Divider ── */
.sidebar-divider {
  height: 1px;
  background: var(--sidebar-border);
  margin-bottom: 12px;
}

/* ── User section ── */
.sidebar-user {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 4px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
  color: inherit;
}
.sidebar-user:hover { background: var(--sidebar-link-hover); }

.sidebar-avatar {
  width: 36px; height: 36px; border-radius: 10px;
  overflow: hidden; flex-shrink: 0;
}
.sidebar-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.sidebar-avatar-initials {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2));
  border: 1px solid rgba(59,130,246,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--accent-blue);
  text-transform: uppercase; flex-shrink: 0;
}
.sidebar-user-info {
  display: flex; flex-direction: column; min-width: 0;
}
.sidebar-user-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-plan {
  font-size: 11px; color: var(--text-secondary); text-transform: capitalize;
}

/* ── Logout ── */
.sidebar-logout {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 13px; margin-top: 8px;
  border-radius: 10px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  background: none; border: 1px solid transparent;
  cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.sidebar-logout:hover {
  color: var(--accent-red);
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
}
.sidebar-logout svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Mobile trigger + backdrop ── */
.sidebar-mobile-trigger {
  display: none;
  position: fixed;
  top: 16px; left: 16px;
  z-index: 50;
  padding: 10px;
  background: rgba(15, 15, 24, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
}
.sidebar-mobile-trigger:hover { color: var(--text-primary); }
.sidebar-mobile-trigger svg { width: 20px; height: 20px; display: block; }

.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 49;
}

/* ── Mobile responsive — full-width slide-in (no collapse) ── */
@media (max-width: 768px) {
  .sidebar {
    width: var(--sidebar-width) !important;
    transform: translateX(-100%);
    z-index: 100;
  }
  .sidebar:hover {
    box-shadow: none;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
  /* All text visible on mobile (full sidebar) */
  .sidebar .sidebar-logo-text,
  .sidebar .sidebar-link span,
  .sidebar .sidebar-section-label,
  .sidebar .sidebar-user-info,
  .sidebar .sidebar-logout span {
    opacity: 1;
    pointer-events: auto;
  }
  body.has-sidebar #app-content {
    margin-left: 0;
    padding-top: 56px;
  }
  .sidebar-mobile-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .sidebar-backdrop {
    display: none;
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
}

@media (min-width: 769px) {
  .sidebar-mobile-trigger { display: none !important; }
  .sidebar-backdrop { display: none !important; }
}

/* ── MARKET CONDITIONS ── */
.market-conditions {
  background: var(--bg-secondary); backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 16px; padding: 20px 24px; margin-bottom: 24px;
}
.market-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.market-header h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.market-condition-badge {
  font-size: 13px; padding: 6px 16px; border-radius: 100px; font-weight: 600;
  backdrop-filter: blur(4px);
}
.market-condition-badge.bullish { background: rgba(6,214,160,0.12); color: var(--accent-green); border: 1px solid rgba(6,214,160,0.25); }
.market-condition-badge.bearish { background: rgba(239,68,68,0.12); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.25); }
.market-condition-badge.neutral { background: rgba(234,179,8,0.12); color: var(--accent-yellow); border: 1px solid rgba(234,179,8,0.25); }
.market-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.market-grid .metric-card-v2 .trend { margin-top: 4px; }
.majors-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.majors-row .metric-card-v2 .meta { display: flex; align-items: center; gap: 8px; }
.majors-row .metric-card-v2 .coin-icon { width: 22px; height: 22px; border-radius: 50%; }
.majors-row .metric-card-v2 .coin-indicators { font-size: 11px; color: var(--text-secondary); margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.majors-row .metric-card-v2 .coin-indicators .ind-tag { padding: 1px 6px; border-radius: 4px; white-space: nowrap; font-weight: 500; }
.majors-row .metric-card-v2 .coin-indicators .ind-bullish { color: var(--accent-green); background: rgba(6, 214, 160, 0.12); }
.majors-row .metric-card-v2 .coin-indicators .ind-bearish { color: var(--accent-red); background: rgba(239, 68, 68, 0.12); }
.majors-row .metric-card-v2 .coin-indicators .ind-neutral { color: var(--text-secondary); background: rgba(148, 163, 184, 0.1); }
/* Ícono de moneda inline (tablas, listas). Reusado por dashboard + futures vía window.CoinIcons. */
.coin-icon { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 4px; display: inline-block; }
.coin-name { color: var(--text-secondary); font-size: 11px; font-weight: normal; margin-left: 3px; }
.top-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.movers-section h3 { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.mover-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.mover-symbol { color: var(--accent-blue); }
.ml-bar { display: flex; gap: 3px; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 10px; }
.ml-bar div { transition: flex 0.5s; border-radius: 3px; }
.ml-bar-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary); margin-top: 4px; }

@media (max-width: 768px) {
  .majors-row { grid-template-columns: 1fr; }
  .top-movers { grid-template-columns: 1fr; }
}

/* ============================================
   OAuth buttons (login, register, profile)
   ============================================ */
.oauth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 16px; color: var(--text-muted); font-size: 12px;
}
.oauth-divider::before, .oauth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-color);
}
.oauth-buttons {
  display: flex; flex-direction: column; gap: 10px;
}
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 500;
  text-decoration: none; transition: opacity 0.2s, transform 0.1s;
  cursor: pointer; border: 1px solid var(--border-color);
}
.oauth-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.oauth-btn:active { transform: translateY(0); }
.oauth-google { background: #fff; color: #3c4043; }
.oauth-github { background: #24292e; color: #fff; }
.oauth-providers-list { display: flex; flex-direction: column; gap: 8px; }
.oauth-provider-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
}
.oauth-provider-info { display: flex; align-items: center; gap: 12px; }
.oauth-provider-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.oauth-provider-icon.google { background: #fff; }
.oauth-provider-icon.github { background: #24292e; }
.oauth-provider-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.oauth-provider-email { font-size: 12px; color: var(--text-secondary); }
.oauth-provider-action .pill { cursor: default; }

/* ============================================================
   orders-table (partial reutilizable virtual / live)
   ============================================================ */
.orders-table-component { width: 100%; }
.orders-table-row--virtual td:first-child { border-left: 3px solid transparent; }
.orders-table-row--live td:first-child { border-left: 3px solid var(--accent-red); }
.orders-table-component .verify-btn {
  padding: 4px 10px; border: 1px solid rgba(59,130,246,0.25);
  border-radius: 8px; background: transparent; color: var(--accent-blue);
  cursor: pointer; font-size: 11px; font-family: 'Inter', sans-serif;
  transition: all 0.2s; white-space: nowrap; text-decoration: none;
  display: inline-block;
}
.orders-table-component .verify-btn:hover {
  background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.4);
}
.orders-table-component .verify-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.orders-table-component .verify-btn.verified {
  border-color: rgba(6,214,160,0.25); color: var(--accent-green);
}
.orders-table-component .verify-btn.failed {
  border-color: rgba(239,68,68,0.25); color: var(--accent-red);
}
.orders-table-component .comparison-table { width: 100%; }
.orders-table-component .comparison-table td:first-child {
  color: var(--text-secondary); font-size: 12px; width: 130px;
}
.orders-table-component .match-icon { font-size: 14px; width: 20px; text-align: center; }

/* Barra de filtros del partial orders-table (migrada desde testnet.njk inline en E8 fix). */
.orders-table-component .filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 16px; border-bottom: 1px solid var(--border-color); margin-bottom: 16px;
}
.orders-table-component .selector-group {
  display: flex; align-items: center; gap: 10px;
}
.orders-table-component .selector-group label {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.orders-table-component .filter-input {
  background: var(--bg-tertiary-solid); color: var(--text-primary);
  border: 1px solid var(--border-color); padding: 8px 12px;
  border-radius: 10px; font-size: 13px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 0.2s; min-width: 180px;
}
.orders-table-component .filter-input:focus {
  border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.orders-table-component .filter-input::placeholder { color: var(--text-muted); }
.orders-table-component .table-v2 th[data-sort] { cursor: pointer; user-select: none; }
.orders-table-component .table-v2 th[data-sort]:hover { color: var(--text-primary); }
@media (max-width: 768px) {
  .orders-table-component .filter-bar { flex-direction: column; align-items: stretch; }
  .orders-table-component .selector-group { flex-direction: column; align-items: stretch; }
  .orders-table-component .filter-input { min-width: 100%; }
}

/* ============================================================
   portfolio-tabs (Virtual vs Live)
   ============================================================ */
.portfolio-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  align-items: stretch;
}
.portfolio-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 14px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  position: relative;
  margin-bottom: -1px;
}
.portfolio-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.02); }
.portfolio-tab[aria-selected="true"] { color: var(--text-primary); }
.portfolio-tab--virtual[aria-selected="true"] { border-bottom-color: var(--accent-blue); }
.portfolio-tab--live[aria-selected="true"] { border-bottom-color: var(--accent-red); }
.portfolio-tab .tab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-muted); transition: background 0.15s ease;
  display: inline-block;
}
.portfolio-tab--virtual .tab-dot { background: var(--accent-blue); opacity: 0.5; }
.portfolio-tab--virtual[aria-selected="true"] .tab-dot { opacity: 1; }
.portfolio-tab--live .tab-dot { background: var(--accent-red); opacity: 0.5; }
.portfolio-tab--live[aria-selected="true"] .tab-dot { opacity: 1; }
.portfolio-tab .tab-lock {
  width: 12px; height: 12px; opacity: 0.7; stroke: currentColor; fill: none;
}

.portfolio-tab-panel { display: none; animation: portfolioTabFade 0.18s ease-out; }
.portfolio-tab-panel.is-active { display: block; }

@keyframes portfolioTabFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.portfolio-tab-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 16px 0;
  letter-spacing: 0.02em;
}

/* Teaser Live no-admin (espejo del patrón profile.binance-teaser) */
.portfolio-live-teaser {
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 40px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.portfolio-live-teaser::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(239,68,68,0.08), transparent 60%);
  pointer-events: none;
}
.portfolio-live-teaser > * { position: relative; z-index: 1; }
.portfolio-live-teaser .teaser-icon {
  width: 48px; height: 48px; color: var(--text-muted);
  margin: 0 auto 14px; display: block;
}
.portfolio-live-teaser .teaser-title {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  margin: 0 0 8px 0;
}
.portfolio-live-teaser .teaser-desc {
  font-size: 13px; color: var(--text-secondary);
  max-width: 520px; margin: 0 auto 16px;
  line-height: 1.55;
}
.portfolio-live-teaser .teaser-pill {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(139,92,246,0.12);
  color: var(--accent-purple);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Summary Live (placeholder wiring en E5) */
.portfolio-live-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.portfolio-live-summary .live-metric {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 18px;
}
.portfolio-live-summary .live-metric-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.portfolio-live-summary .live-metric-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Variante destacada: capital gestionado por CryptoCode (la métrica que importa
   al user — equity bajo manejo del bot, NO el patrimonio total del wallet). */
.portfolio-live-summary .live-metric-primary {
  border-color: var(--accent-blue);
  background: linear-gradient(180deg, rgba(59,130,246,0.08), var(--bg-secondary));
}
.portfolio-live-summary .live-metric-primary .live-metric-label {
  color: var(--accent-blue);
}
.portfolio-live-summary .live-metric-primary .live-metric-value {
  font-size: 22px;
}

@media (max-width: 640px) {
  .portfolio-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .portfolio-tab { padding: 12px 16px; font-size: 11px; white-space: nowrap; }
}

/* ── MODE BADGE (Virtual vs Live) ─────────────────────────────── */
/* Pill compacta que identifica el modo operativo de una estrategia.
   Uso: junto al nombre de la estrategia (cards, rows, report headers).
   Siempre visible — es la señal principal para evitar confusión virtual/live. */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
}
.mode-badge--virtual {
  background: rgba(100, 116, 139, 0.16);
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.mode-badge--live {
  background: var(--accent-red);
  color: #ffffff;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25);
}

/* ============================================================
   Banner global de Live Trading
   Aparece cuando el user tiene al menos una estrategia con
   live_trading=true. No dismissible — la visibilidad es el punto.
   Se inyecta arriba de TODO el layout app (sidebar + content).
   ============================================================ */
.banner-live {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  height: 36px;
  background: rgba(239, 68, 68, 0.15);
  border-bottom: 1px solid var(--accent-red);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.banner-live-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  max-width: 80rem;
  width: 100%;
  justify-content: center;
}
.banner-live-text {
  color: #ffffff;
}
.banner-live-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  white-space: nowrap;
}
.banner-live-link:hover {
  color: #ffe4e4;
}
.banner-live-close {
  background: transparent;
  border: none;
  color: #ffffff;
  opacity: 0.7;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: 4px;
  border-radius: 6px;
  transition: opacity 0.15s, background 0.15s;
}
.banner-live-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}
.banner-live-close:focus-visible {
  outline: 1px solid #ffffff;
  outline-offset: 2px;
}

/* ================================================================
   LANDING UI KIT — ll- prefixed (from design-system/ui_kits/landing)
   ================================================================ */
/* Landing UI Kit — ll- scoped styles */
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  background-image: var(--bg-grid);
  background-size: var(--bg-grid-size);
  -webkit-font-smoothing: antialiased;
}

/* ── NAV ── */
.ll-nav { position: sticky; top: 0; z-index: 50; background: rgba(15,15,24,0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.ll-nav-inner { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ll-nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ll-nav-logo-icon { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--gradient-logo-bg); }
.ll-nav-logo-icon img { width: 32px; height: 32px; object-fit: contain; }
.ll-nav-logo-text { font-size: 1.125rem; font-weight: 700; color: #fff; letter-spacing: -0.025em; }
.ll-nav-section { display: flex; gap: 1.3rem; font-size: 1rem; }
.ll-nav-link { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s; }
.ll-nav-link:hover { color: var(--text-primary); }
.ll-nav-right { display: flex; align-items: center; gap: 10px; }
.ll-nav-lang { display: flex; gap: 4px; margin-right: 6px; }
.ll-lang-btn { padding: 6px 10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; letter-spacing: 0.04em; }
.ll-lang-btn.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }

.ll-btn-ghost { padding: 0.5rem 1rem; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text-primary); border: 1px solid rgba(255,255,255,0.1); text-decoration: none; transition: all 0.2s; display: inline-block; cursor: pointer; background: transparent; font-family: inherit; }
.ll-btn-ghost:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.03); }
.ll-btn-primary { padding: 0.5rem 1rem; border-radius: 10px; font-size: 13px; font-weight: 600; color: #fff; background: var(--gradient-primary); border: none; text-decoration: none; transition: all 0.3s; display: inline-block; cursor: pointer; font-family: inherit; }
.ll-btn-primary:hover { background: var(--gradient-primary-hover); box-shadow: var(--glow-blue); transform: translateY(-1px); }
.ll-btn-lg { padding: 12px 22px; font-size: 14px; }
.ll-btn-block { display: block; text-align: center; width: 100%; }

/* ── HERO ── */
.ll-hero { padding: 80px 24px 96px; position: relative; overflow: hidden; }
.ll-hero::before { content: ''; position: absolute; inset: -20% -10% 30% -10%; background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(139,92,246,0.18), transparent 60%), radial-gradient(ellipse 70% 60% at 80% 40%, rgba(59,130,246,0.16), transparent 60%); pointer-events: none; z-index: 0; }
.ll-hero::after { content: ''; position: absolute; left: 50%; top: 60%; width: 600px; height: 600px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(59,130,246,0.06), transparent 65%); pointer-events: none; filter: blur(40px); z-index: 0; }
.ll-hero-inner { max-width: 80rem; margin: 0 auto; position: relative; z-index: 1; }
.ll-code-card-hero { max-width: 720px; margin: 0 auto; }
.ll-code-hero { font-size: 13px; line-height: 1.7; min-height: 360px; }
.c-tx { color: #e2e8f0; }
.c-nm { color: var(--accent-orange); }
.c-pu { color: var(--accent-purple); }
.c-slogan { color: #06d6a0; font-weight: 600; text-shadow: 0 0 10px rgba(6,214,160,0.4); display: inline-flex; align-items: center; }
.c-cursor { display: inline-block; width: 8px; height: 16px; background: #06d6a0; margin-left: 4px; vertical-align: middle; animation: blink 1s step-end infinite; box-shadow: 0 0 8px rgba(6,214,160,0.6); }
@keyframes blink { 50% { opacity: 0; } }
.ll-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; border: 1px solid rgba(6,214,160,0.25); background: rgba(6,214,160,0.06); color: var(--accent-green); font-size: 12px; font-weight: 600; margin-bottom: 24px; }
.ll-hero-eyebrow .ll-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.ll-hero-title { font-size: clamp(40px, 6vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 20px; text-wrap: balance; }
.ll-hero-sub { font-size: 18px; line-height: 1.6; color: var(--text-secondary); max-width: 620px; margin: 0 auto 28px; text-wrap: pretty; }
.ll-hero-ctas { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.ll-hero-proof { font-size: 12px; color: var(--text-muted); }
.ll-check { color: var(--accent-green); font-weight: 700; }

/* Code card */
.ll-code-card { background: rgba(15,15,24,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 80px rgba(59,130,246,0.08); }
.ll-code-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(6,6,10,0.5); }
.ll-code-head .dot { width: 10px; height: 10px; border-radius: 50%; }
.ll-code-head .dot.r { background: #ef4444; } .ll-code-head .dot.y { background: #eab308; } .ll-code-head .dot.g { background: #06d6a0; }
.ll-code-file { margin-left: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.ll-code { padding: 20px 22px; margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; color: var(--text-primary); overflow-x: auto; white-space: pre; }
.c-key { color: var(--accent-purple); } .c-fn { color: var(--accent-blue); } .c-var { color: var(--text-primary); } .c-str { color: var(--accent-green); } .c-com { color: var(--text-muted); font-style: italic; }
.ll-code-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(6,6,10,0.5); }
.ll-foot-t { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }

.cc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.cc-pill-green { background: rgba(6,214,160,0.1); color: var(--accent-green); border: 1px solid rgba(6,214,160,0.2); }
.cc-pill-green .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-green); animation: pulse 1.5s infinite; }

/* ── SECTIONS ── */
.ll-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.ll-section-head .label-caps { color: var(--accent-blue); margin-bottom: 10px; }
.ll-section-head h2 { font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 14px; text-wrap: balance; }
.ll-section-head .lead { font-size: 16px; color: var(--text-secondary); line-height: 1.6; text-wrap: pretty; }

.ll-features { padding: 80px 24px; max-width: 80rem; margin: 0 auto; }
.ll-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ll-feature-card { background: rgba(20,20,31,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 28px; transition: all 0.3s; }
.ll-feature-card:hover { border-color: rgba(59,130,246,0.25); background: rgba(20,20,31,0.7); transform: translateY(-3px); }
.ll-feature-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-blue); margin-bottom: 14px; }
.ll-feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; color: var(--text-primary); }
.ll-feature-card p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ── PRICING ── */
.ll-pricing { padding: 80px 24px; max-width: 80rem; margin: 0 auto; }
.ll-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .ll-pricing-grid { grid-template-columns: 1fr; } }
.ll-plan { position: relative; background: rgba(20,20,31,0.5); border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; padding: 32px; transition: all 0.3s; }
.ll-plan.featured { border-color: rgba(59,130,246,0.35); background: linear-gradient(180deg, rgba(59,130,246,0.06), rgba(20,20,31,0.5)); box-shadow: 0 0 60px rgba(59,130,246,0.1); transform: translateY(-6px); }
.ll-plan-ribbon { position: absolute; top: -12px; right: 24px; padding: 4px 12px; background: var(--gradient-primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em; }
.ll-plan-name { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.ll-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.ll-plan-price .big { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.ll-plan-price .per { font-size: 14px; color: var(--text-muted); }
.ll-plan-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.5; }
.ll-plan-features { list-style: none; padding: 0; margin: 0 0 24px; }
.ll-plan-features li { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; font-size: 13px; color: var(--text-primary); }
.ll-plan-features .ll-check { margin-top: 1px; }

/* ── FOOTER ── */
.ll-footer { border-top: 1px solid var(--border-color); margin-top: 48px; padding: 48px 24px 24px; }
.ll-footer-inner { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 2fr; gap: 48px; margin-bottom: 32px; }
@media (max-width: 720px) { .ll-footer-inner { grid-template-columns: 1fr; } }
.ll-footer-brand { display: flex; align-items: center; gap: 12px; }
.ll-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ll-footer-cols .label-caps { margin-bottom: 12px; }
.ll-footer-cols a { display: block; font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 4px 0; }
.ll-footer-cols a:hover { color: var(--text-primary); }
.ll-footer-fine { max-width: 80rem; margin: 0 auto; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-muted); text-align: center; }

/* ================================================================
   DASHBOARD UI KIT — cc- prefixed (from design-system/ui_kits/dashboard)
   ================================================================ */
/* Dashboard UI Kit — scoped cc- styles */
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  background-image: var(--bg-grid);
  background-size: var(--bg-grid-size);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── SIDEBAR ── */
.cc-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 64px;
  background: rgba(10, 10, 16, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-color);
  z-index: 50;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width 0.25s var(--ease-inout), background 0.25s, box-shadow 0.25s;
}
.cc-sidebar:hover { width: 260px; background: rgba(10, 10, 16, 0.94); box-shadow: 8px 0 32px rgba(0,0,0,0.4); }
.cc-sidebar-top { padding: 16px 10px 12px; }
.cc-sidebar-main { flex: 1; padding: 4px 10px; overflow: hidden; }
.cc-sidebar-bottom { padding: 12px 10px 16px; }
.cc-sidebar-logo { display: flex; align-items: center; gap: 10px; padding: 4px 6px; margin-bottom: 16px; text-decoration: none; color: inherit; }
.cc-sidebar-logo-icon { width: 32px; height: 32px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--gradient-logo-bg); display: flex; align-items: center; justify-content: center; }
.cc-sidebar-logo-icon img { width: 32px; height: 32px; object-fit: contain; display: block; }
.cc-sidebar-logo-text { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.025em; }
.cc-sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(148,163,184,0.5); padding: 12px 13px 6px; height: 30px; }
.cc-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: all 0.15s; border: 1px solid transparent; margin-bottom: 2px; white-space: nowrap; }
.cc-sidebar-link:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.cc-sidebar-link.active { background: rgba(59,130,246,0.08); color: var(--accent-blue); border-color: rgba(59,130,246,0.15); }
.cc-sidebar-divider { height: 1px; background: var(--border-color); margin-bottom: 12px; }
.cc-sidebar-user { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-radius: 10px; text-decoration: none; color: inherit; }
.cc-sidebar-user:hover { background: rgba(255,255,255,0.04); }
.cc-sidebar-avatar-initials { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(139,92,246,0.2)); border: 1px solid rgba(59,130,246,0.15); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent-blue); flex-shrink: 0; }
.cc-sidebar-user-info { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
.cc-sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cc-sidebar-user-plan { font-size: 11px; color: var(--text-secondary); text-transform: capitalize; }
.cc-sidebar-logout { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 13px; margin-top: 8px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; }
.cc-sidebar-logout:hover { color: var(--accent-red); background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.15); }

/* Hide text when collapsed */
.cc-sidebar .cc-sidebar-logo-text,
.cc-sidebar .cc-sidebar-link span,
.cc-sidebar .cc-sidebar-section-label,
.cc-sidebar .cc-sidebar-user-info,
.cc-sidebar .cc-sidebar-logout span { opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.cc-sidebar:hover .cc-sidebar-logo-text,
.cc-sidebar:hover .cc-sidebar-link span,
.cc-sidebar:hover .cc-sidebar-section-label,
.cc-sidebar:hover .cc-sidebar-user-info,
.cc-sidebar:hover .cc-sidebar-logout span { opacity: 1; pointer-events: auto; }

/* ── MAIN ── */
.cc-main { margin-left: 64px; padding: 28px 36px; max-width: 1400px; }
.cc-page-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 24px; flex-wrap: wrap; }
.cc-page-header h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.cc-page-header .sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.cc-kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-secondary); background: var(--bg-tertiary-solid); }

.cc-grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
@media (max-width: 1100px) { .cc-grid-2 { grid-template-columns: 1fr; } }

/* ── PANEL / CARDS ── */
.cc-panel {
  background: var(--bg-secondary); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-color); border-radius: 16px;
  padding: 24px; margin-bottom: 24px;
}
.cc-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cc-panel-header h2 { font-size: 15px; font-weight: 700; }
.cc-panel-body { }
.cc-link { color: var(--accent-blue); font-size: 12px; text-decoration: none; }
.cc-link:hover { color: var(--accent-blue-hover); }

/* ── TABS ── */
.cc-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin: -24px -24px 0; padding: 0 16px; }
.cc-tab { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); cursor: pointer; padding: 14px 22px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s, border-color 0.15s, background 0.15s; margin-bottom: -1px; }
.cc-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.02); }
.cc-tab.active { color: var(--text-primary); }
.cc-tab.virt.active { border-bottom-color: var(--accent-blue); }
.cc-tab.live.active { border-bottom-color: var(--accent-red); }
.cc-tab .tab-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--text-muted); }
.cc-tab.virt .tab-dot { background: var(--accent-blue); opacity: 0.5; }
.cc-tab.virt.active .tab-dot { opacity: 1; }
.cc-tab.live .tab-dot { background: var(--accent-red); opacity: 0.5; }
.cc-tab.live.active .tab-dot { opacity: 1; }
.cc-tab-sub { font-size: 12px; color: var(--text-muted); margin: 20px 0 16px; letter-spacing: 0.02em; }

/* ── METRICS ── */
.cc-summary, .cc-majors { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cc-metric { background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px; transition: all 0.25s; }
.cc-metric:hover { border-color: var(--border-color-hover); transform: translateY(-2px); }
.cc-metric-meta { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.cc-metric-sym { font-weight: 700; color: var(--accent-blue); font-size: 13px; }
.cc-coin-name { color: var(--text-secondary); font-size: 11px; font-weight: normal; text-transform: none; letter-spacing: 0; }
.cc-metric-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.cc-metric-trend { display: flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12px; font-weight: 600; }
.cc-metric-trend.up { color: var(--accent-green); }
.cc-metric-trend.down { color: var(--accent-red); }
.cc-coin-ind { font-size: 11px; margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.ind-tag { padding: 2px 6px; border-radius: 4px; font-weight: 500; }
.ind-bullish { color: var(--accent-green); background: rgba(6,214,160,0.12); }
.ind-bearish { color: var(--accent-red); background: rgba(239,68,68,0.12); }
.ind-neutral { color: var(--text-secondary); background: rgba(148,163,184,0.1); }

/* ── MARKET CONDITIONS ── */
.cc-market { background: var(--bg-secondary); backdrop-filter: var(--blur-glass); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px 24px; margin-bottom: 24px; }
.cc-market-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cc-market-header h2 { font-size: 17px; font-weight: 700; }
.cc-market-badge { font-size: 13px; padding: 6px 16px; border-radius: 100px; font-weight: 600; }
.cc-market-badge-bullish { background: rgba(6,214,160,0.12); color: var(--accent-green); border: 1px solid rgba(6,214,160,0.25); }

/* ── TABLE ── */
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table thead tr { background: rgba(6,6,10,0.6); border-bottom: 1px solid var(--border-color); }
.cc-table th { padding: 11px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); text-align: left; }
.cc-table tbody tr { border-bottom: 1px solid var(--border-color); transition: background 0.12s; }
.cc-table tbody tr:last-child { border-bottom: none; }
.cc-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.01); }
.cc-table tbody tr:hover { background: rgba(59,130,246,0.04); }
.cc-table td { padding: 12px 14px; font-size: 13px; }
.cc-table td.sym { font-weight: 600; color: var(--accent-blue); }
.cc-table td.pos { color: var(--accent-green); }
.cc-table td.neg { color: var(--accent-red); }

/* ── PILL ── */
.cc-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.cc-pill-blue { background: rgba(59,130,246,0.1); color: var(--accent-blue); border: 1px solid rgba(59,130,246,0.2); }

/* ── ALERT ── */
.cc-alert { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; margin-bottom: 10px; border-left: 3px solid; align-items: flex-start; }
.cc-alert-high { background: rgba(239,68,68,0.06); border-color: var(--accent-red); }
.cc-alert-med { background: rgba(249,115,22,0.06); border-color: var(--accent-orange); }
.cc-alert-low { background: rgba(59,130,246,0.06); border-color: var(--accent-blue); }
.cc-alert-healthy { background: rgba(6,214,160,0.06); border-color: var(--accent-green); }
.cc-alert-ic { font-size: 18px; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.cc-alert-high .cc-alert-ic { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.cc-alert-med .cc-alert-ic { background: rgba(249,115,22,0.15); color: var(--accent-orange); }
.cc-alert-healthy .cc-alert-ic { background: rgba(6,214,160,0.15); color: var(--accent-green); }
.cc-alert-body { flex: 1; }
.cc-alert-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.cc-alert-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.cc-alert-time { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
.cc-alert-badge { margin-left: auto; padding: 2px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; }
.cc-alert-high .cc-alert-badge { background: rgba(239,68,68,0.15); color: var(--accent-red); }
.cc-alert-med .cc-alert-badge { background: rgba(249,115,22,0.15); color: var(--accent-orange); }
.cc-alert-healthy .cc-alert-badge { background: rgba(6,214,160,0.15); color: var(--accent-green); }

/* ── LIVE TEASER ── */
.cc-live-teaser { text-align: center; padding: 48px 28px; position: relative; background: radial-gradient(circle at 50% 0%, rgba(239,68,68,0.06), transparent 60%); border-radius: 16px; color: var(--text-secondary); }
.cc-live-teaser h3 { font-size: 15px; font-weight: 700; margin: 14px 0 8px; color: var(--text-primary); }
.cc-live-teaser p { font-size: 13px; max-width: 520px; margin: 0 auto 16px; line-height: 1.55; }
.cc-teaser-pill { display: inline-block; padding: 4px 12px; background: rgba(139,92,246,0.12); color: var(--accent-purple); border: 1px solid rgba(139,92,246,0.25); border-radius: 100px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ── PAGE NAV (top of cc-main) ── */
.cc-page-nav { display: inline-flex; gap: 4px; padding: 4px; background: rgba(15,15,24,0.6); border: 1px solid var(--border-color); border-radius: 100px; backdrop-filter: blur(12px); margin-bottom: 24px; }
.cc-page-nav button { appearance: none; background: transparent; border: none; color: var(--text-secondary); font-family: inherit; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 100px; cursor: pointer; transition: all 0.15s; }
.cc-page-nav button:hover { color: var(--text-primary); }
.cc-page-nav button.active { background: rgba(59,130,246,0.12); color: var(--accent-blue); }

.cc-page-intro { margin-bottom: 24px; }

/* ── STRATEGY CARDS ── */
.cc-strategy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.cc-strategy-card { background: rgba(15,15,24,0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-color); border-radius: 18px; overflow: hidden; transition: all 0.3s var(--ease-out); position: relative; }
.cc-strategy-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
.cc-strategy-img-wrap { position: relative; height: 220px; overflow: hidden; background: linear-gradient(180deg, rgba(15,15,24,0.4), rgba(15,15,24,0.95)), radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%); display: flex; align-items: flex-end; justify-content: center; }
.cc-strategy-img { max-height: 220px; max-width: 80%; object-fit: contain; transition: transform 0.4s var(--ease-out); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.5)); }
.cc-strategy-card:hover .cc-strategy-img { transform: translateY(-6px) scale(1.03); }
.cc-strategy-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%); pointer-events: none; opacity: 0.6; }
.cc-strategy-body { padding: 18px 20px 20px; }
.cc-strategy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cc-strategy-head h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.cc-strategy-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 100px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.cc-strategy-body p { font-size: 12px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 14px; min-height: 56px; }
.cc-strategy-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 14px; }
.cc-strategy-stats > div { display: flex; flex-direction: column; gap: 2px; }
.cc-strategy-stats .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.cc-strategy-stats .val { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.cc-strategy-stats .val.neg { color: var(--accent-red); }
.cc-strategy-cta { display: flex; gap: 8px; }
.cc-btn-ghost { flex: 1; padding: 8px 14px; border: 1px solid var(--border-color); background: transparent; color: var(--text-primary); font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.cc-btn-ghost:hover { border-color: var(--border-color-hover); background: rgba(255,255,255,0.03); }
.cc-btn-primary { flex: 1; padding: 8px 14px; background: var(--gradient-primary); border: none; color: #fff; font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.2s; }
.cc-btn-primary:hover { box-shadow: var(--glow-blue); transform: translateY(-1px); }

/* ── AUDIT ── */
.cc-audit-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.cc-audit-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cc-chip { padding: 7px 14px; border-radius: 100px; background: rgba(15,15,24,0.6); border: 1px solid var(--border-color); color: var(--text-secondary); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.cc-chip:hover { border-color: var(--border-color-hover); color: var(--text-primary); }
.cc-chip.active { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.3); color: var(--accent-blue); }

.cc-audit-timeline { position: relative; }
.cc-audit-row { display: grid; grid-template-columns: 70px 24px 1fr; gap: 12px; align-items: flex-start; padding-bottom: 14px; position: relative; }
.cc-audit-row::before { content: ''; position: absolute; left: 81px; top: 18px; bottom: -8px; width: 1px; background: var(--border-color); }
.cc-audit-row:last-child::before { display: none; }
.cc-audit-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); padding-top: 14px; text-align: right; }
.cc-audit-dot { width: 10px; height: 10px; border-radius: 50%; margin: 16px 7px 0; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg-primary); }
.a-buy .cc-audit-dot { background: var(--accent-green); box-shadow: 0 0 0 3px var(--bg-primary), 0 0 12px rgba(6,214,160,0.5); }
.a-close .cc-audit-dot { background: var(--accent-red); box-shadow: 0 0 0 3px var(--bg-primary), 0 0 12px rgba(239,68,68,0.5); }
.a-hold .cc-audit-dot { background: var(--accent-blue); }
.a-skip .cc-audit-dot { background: var(--text-muted); }
.cc-audit-card { background: rgba(15,15,24,0.6); backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: 12px; padding: 14px 16px; transition: all 0.2s; }
.cc-audit-card:hover { border-color: var(--border-color-hover); }
.cc-audit-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.cc-audit-sym { font-weight: 700; color: var(--text-primary); font-size: 13px; }
.cc-audit-meta { font-size: 12px; color: var(--text-secondary); }
.cc-audit-conf { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.cc-audit-hash { font-size: 11px; color: var(--text-muted); padding: 2px 8px; background: rgba(255,255,255,0.04); border-radius: 4px; border: 1px solid var(--border-color); }
.cc-audit-why { font-size: 12px; color: var(--text-secondary); line-height: 1.55; padding-bottom: 8px; }
.cc-audit-actions { display: flex; gap: 16px; padding-top: 8px; border-top: 1px solid var(--border-color); }

.cc-pill-red { background: rgba(239,68,68,0.1); color: var(--accent-red); border: 1px solid rgba(239,68,68,0.2); }
.cc-pill-green { background: rgba(6,214,160,0.1); color: var(--accent-green); border: 1px solid rgba(6,214,160,0.2); }
.cc-pill-gray { background: rgba(148,163,184,0.1); color: var(--text-secondary); border: 1px solid rgba(148,163,184,0.2); }

/* ── BACKGROUND WASHES ── ambient gradient layer (auth pages) */
.bg-radial {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 10%, rgba(139,92,246,0.10), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(59,130,246,0.10), transparent 60%);
}

/* ============================================================
   LIGHT THEME OVERRIDES — fase 2 (item 11 QA 2026-05-01)
   Override de selectores que usan valores hardcoded en vez de tokens.
   Solo se activa con [data-theme="light"] en <html>.
   ============================================================ */

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.18); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.30); }

/* Glass-nav y glass utility */
[data-theme="light"] .glass-nav,
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.7);
  border-bottom-color: var(--border-color);
}
[data-theme="light"] .glass {
  border-color: var(--border-color);
}

/* Botones ghost-nav y ghost (hover/border en light) */
[data-theme="light"] .btn-ghost-nav,
[data-theme="light"] .btn-ghost {
  color: var(--text-secondary);
  border-color: var(--border-color);
}
[data-theme="light"] .btn-ghost-nav:hover,
[data-theme="light"] .btn-ghost:hover {
  border-color: var(--border-color-hover);
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-primary);
}

/* Btn base hover — excluyendo primary/danger/success que ya tienen su bg propio */
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):hover { background: rgba(15, 23, 42, 0.04); }

/* nav-link */
[data-theme="light"] .nav-link { color: var(--text-secondary); }
[data-theme="light"] .nav-link:hover { color: var(--text-primary); }

/* nav-lang-btn (override mas amplio que el del item 11 inicial) */
[data-theme="light"] .nav-lang-btn:hover {
  border-color: var(--border-color-hover);
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-primary);
}
[data-theme="light"] .nav-theme-btn:hover {
  border-color: var(--border-color-hover);
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-primary);
}

/* Mobile menu */
[data-theme="light"] .mobile-menu {
  background: rgba(245, 247, 250, 0.97);
}
[data-theme="light"] .nav-mobile-section a { color: var(--text-secondary); }
[data-theme="light"] .nav-mobile-section a:hover { color: var(--text-primary); }
[data-theme="light"] .nav-close-btn:hover { color: var(--text-primary); }

/* Spinner */
[data-theme="light"] .spinner,
[data-theme="light"] .btn-spinner {
  border-color: rgba(15, 23, 42, 0.2);
  border-top-color: var(--accent-blue);
}

/* Toggle slider */
[data-theme="light"] .toggle .slider { background: #e2e8f0; }
[data-theme="light"] .toggle .slider::before { background: #ffffff; box-shadow: 0 1px 2px rgba(15,23,42,0.15); }

/* Tablas */
[data-theme="light"] tr:hover td { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .table-v2 thead tr {
  background: rgba(241, 245, 249, 0.8);
}
[data-theme="light"] .table-v2 tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.015); }
[data-theme="light"] .table-v2 tbody tr:hover { background: rgba(59, 130, 246, 0.06); }

/* Glass-card */
[data-theme="light"] .glass-card {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--border-color);
}
[data-theme="light"] .glass-card:hover {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

/* Modal overlay backdrop */
[data-theme="light"] .modal-overlay { background: rgba(15, 23, 42, 0.45); }
[data-theme="light"] .modal {
  background: var(--bg-secondary-solid);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

/* Skeleton */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(15,23,42,0.04) 25%,
    rgba(15,23,42,0.08) 50%,
    rgba(15,23,42,0.04) 75%);
}
[data-theme="light"] .sk {
  background: linear-gradient(90deg,
    rgba(15,23,42,0.04) 25%,
    rgba(15,23,42,0.09) 50%,
    rgba(15,23,42,0.04) 75%);
}

/* Empty state */
[data-theme="light"] .empty-state { border-color: rgba(15, 23, 42, 0.12); }

/* Progress wrap */
[data-theme="light"] .progress-wrap { background: rgba(15, 23, 42, 0.06); }

/* Sidebar mobile trigger */
[data-theme="light"] .sidebar-mobile-trigger {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .sidebar-backdrop { background: rgba(15, 23, 42, 0.4); }

/* Metric card hover shadow */
[data-theme="light"] .metric-card-v2:hover {
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08);
}

/* Toast container shadows */
[data-theme="light"] .toast { box-shadow: 0 8px 32px rgba(15, 23, 42, 0.18); }

/* Body wash (gradient soft) */
[data-theme="light"] .bg-radial {
  background:
    radial-gradient(ellipse 60% 50% at 30% 10%, rgba(139,92,246,0.06), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(59,130,246,0.06), transparent 60%);
}

/* Gradient text para light mode (el original empieza en #ffffff que se pierde) */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 50%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Inputs/select solid bg en light. IMPORTANTE: usar background-color, no
   shorthand background — sino reseteamos background-repeat y el chevron
   del select empieza a tilearse en la dropdown. */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light"] .native-select {
  background-color: var(--bg-secondary-solid);
}

/* OAuth google button (en dark era #fff con texto negro — en light necesita borde) */
[data-theme="light"] .oauth-google {
  border: 1px solid var(--border-color);
}

/* Btn base — solo aplica al .btn neutral, no a las variantes primary/danger/success
   (esas tienen su bg propio definido y nuestra regla con specificity de attribute
   las pisaba en light mode, dejando el "Generate Batch" y similares invisibles). */
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-v2-primary):not(.btn-v2-danger):not(.btn-v2-success) { background: var(--bg-tertiary-solid); }

/* ============================================================
   SIDEBAR — light theme (item 1 feedback round 2)
   El usuario pidio mismo bg que la pagina, textos resaltados, estilo Claude.ai.
   ============================================================ */
[data-theme="light"] {
  --sidebar-bg:           rgba(255, 255, 255, 0.92);
  --sidebar-bg-expanded:  rgba(255, 255, 255, 0.98);
  --sidebar-border:       rgba(15, 23, 42, 0.08);
  --sidebar-link-hover:   rgba(15, 23, 42, 0.05);
  --sidebar-link-active-bg: rgba(59, 130, 246, 0.10);
}
[data-theme="light"] .sidebar:hover {
  box-shadow: 8px 0 32px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .sidebar-link {
  color: var(--text-primary);
  font-weight: 500;
}
[data-theme="light"] .sidebar-link:hover {
  color: var(--text-primary);
}
[data-theme="light"] .sidebar-link-active {
  color: var(--accent-blue);
  font-weight: 600;
}
[data-theme="light"] .sidebar-section-label {
  color: var(--text-muted);
}
[data-theme="light"] .sidebar-user-name {
  color: var(--text-primary);
}
[data-theme="light"] .sidebar-logout {
  color: var(--text-primary);
}
[data-theme="light"] .sidebar-logout:hover {
  color: var(--accent-red);
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.30);
}

/* ============================================================
   FORCE-DARK — wrapper para zonas que deben mantener dark en
   light mode (cards de landing/preview, code blocks, etc).
   Cualquier descendiente con esta clase usa tokens dark.
   ============================================================ */
.force-dark,
[data-theme="light"] .force-dark {
  --bg-primary:         #06060a;
  --bg-secondary:       rgba(15, 15, 24, 0.6);
  --bg-secondary-solid: #0f0f18;
  --bg-tertiary:        rgba(20, 20, 31, 0.5);
  --bg-tertiary-solid:  #14141f;
  --text-primary:       #e2e8f0;
  --text-secondary:     #94a3b8;
  --text-muted:         #64748b;
  --border-color:       rgba(255, 255, 255, 0.06);
  --border-color-hover: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}
/* Cuando un contenedor lleva force-dark le damos bg dark explicito para
   que el contenido (text-white, gradients) sea coherente. */
[data-theme="light"] .force-dark.code-card,
[data-theme="light"] .force-dark.glass-card,
[data-theme="light"] .glass-card.force-dark {
  background-color: #0f0f18;
}

/* Tailwind utilities — swap a tono dark cuando el theme es light, EXCEPTO
   dentro de un .force-dark wrapper donde queremos mantener el dark original. */
/* !important porque Tailwind CDN inyecta su CSS en runtime; sin !important
   puede ganar por orden de cascada en algunos browsers/cache. */
[data-theme="light"] .text-white { color: var(--text-primary) !important; }
[data-theme="light"] .text-gray-300 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-gray-400 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-gray-500 { color: var(--text-muted) !important; }
[data-theme="light"] .text-gray-600 { color: var(--text-muted) !important; }
[data-theme="light"] .text-slate-300 { color: var(--text-secondary) !important; }
[data-theme="light"] .text-slate-400 { color: var(--text-secondary) !important; }

/* Re-establecer light-on-dark dentro de force-dark wrappers (tambien con
   !important para superar el override anterior que tambien lo tiene). */
[data-theme="light"] .force-dark .text-white,
[data-theme="light"] .force-dark.text-white { color: #ffffff !important; }
[data-theme="light"] .force-dark .text-gray-300 { color: #d1d5db !important; }
[data-theme="light"] .force-dark .text-gray-400 { color: #9ca3af !important; }
[data-theme="light"] .force-dark .text-gray-500 { color: #6b7280 !important; }
[data-theme="light"] .force-dark .text-gray-600 { color: #4b5563 !important; }
[data-theme="light"] .force-dark .text-slate-300 { color: #cbd5e1 !important; }
[data-theme="light"] .force-dark .text-slate-400 { color: #94a3b8 !important; }

/* Border utilities tipo border-white/[0.04] siguen funcionando en light
   porque son rgba con baja opacidad sobre bg light — apenas se ven, lo cual
   es coherente con el efecto. */

/* ============================================================
   SWITCH lang/theme — mas angostos en sidebar expandido y hidden
   en sidebar colapsado (item 2 + round 2 punto 2).
   ============================================================ */
.sidebar-lang-btn {
  padding: 4px 0;
  font-size: 11px;
  min-width: 0;
}
.sidebar-theme-btn {
  padding: 4px 0;
  min-width: 0;
}
.sidebar-theme-btn svg {
  flex-shrink: 0;
}
.sidebar-lang,
.sidebar-theme {
  max-width: 96px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.15s ease;
}
/* Sidebar colapsado (no hover): ocultar para evitar widths inconsistentes
   por SVG que no encoge vs texto que si. Reaparecen al expandir. */
.sidebar:not(:hover) .sidebar-lang,
.sidebar:not(:hover) .sidebar-theme {
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
}
@media (max-width: 768px) {
  /* Mobile: el sidebar siempre es full-width cuando esta abierto, sin
     estado colapsado. Reactivar visibility. */
  .sidebar:not(:hover) .sidebar-lang,
  .sidebar:not(:hover) .sidebar-theme {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
  }
  .sidebar:not(:hover) .sidebar-lang { margin: 4px auto 8px; }
  .sidebar:not(:hover) .sidebar-theme { margin: 0 auto 8px; }
}

/* ============================================================
   CHEVRON de selects en light (item 4 feedback round 2)
   El SVG chevron iba codificado con stroke=#94a3b8 (gris dark).
   En light no se ve. Override con stroke dark.
   ============================================================ */
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="light"] .native-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

/* ============================================================
   BTN-PRIMARY visibilidad — el gradiente azul + texto blanco se
   ve OK en light (gradient sigue siendo azul). Pero hay botones
   que usan clase .btn azul-solid + #fff → en light tambien OK
   porque el bg es accent-blue (no token swappeable).
   El "Generate Batch" (item 3) usa estilo inline o clase
   especifica. Verificamos buscando bg solid blue + color white.
   ============================================================ */


/* ============================================================
   MOBILE FIXES (QA 2026-05-20) — responsive publico + modales
   Scope: solo <=768px, no afecta desktop.
   ============================================================ */
@media (max-width: 768px) {
  /* Issue 7: en paginas publicas (auth.njk + nav opcional de app.njk) la
     fila de links inline se colapsa en un dropdown desplegado por el boton
     hamburguesa, igual que en landing. Reusa el markup existente (no
     duplica navActions ni el wiring de lang/theme). */
  .glass-nav .nav-links-always {
    display: none;
    position: absolute;
    top: 4rem; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
    background: rgba(6, 6, 10, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  }
  .glass-nav.menu-open .nav-links-always { display: flex; }
  .glass-nav .nav-links-always .btn-ghost-nav,
  .glass-nav .nav-links-always #navAuthSlot a { text-align: center; display: block; width: 100%; }
  .glass-nav .nav-links-always .nav-lang,
  .glass-nav .nav-links-always .nav-theme { justify-content: center; }
  .glass-nav .nav-mobile-btn { display: inline-flex; align-items: center; }

  /* Issue 8: los modales nunca deben exceder el ancho de pantalla.
     Override de inline max-width (750px, 760px, etc.) en mobile. */
  .modal-overlay { padding: 12px; }
  .modal,
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}