/* ============================================================
   RyZe Codes — BRUTAL TERMINAL THEME
   Inspirado en api.delirius.store · Brutalist · Animado
   Se carga DESPUÉS de style.css para sobrescribir.
   ============================================================ */

/* ── Tokens brutales (MODO DÍA) ── */
:root {
  --brutal-bg: #f4f4f0;
  --brutal-card: #ffffff;
  --brutal-card-2: #0a0a0a;
  --brutal-ink: #0a0a0a;
  --brutal-muted: #6b6b6b;
  --brutal-border: #0a0a0a;
  --brutal-accent: #10b981;
  --brutal-accent-2: #a855f7;
  --brutal-danger: #ef4444;
  --brutal-warn: #f59e0b;
  --brutal-shadow: 6px 6px 0 var(--brutal-ink);
  --brutal-shadow-sm: 3px 3px 0 var(--brutal-ink);
  --brutal-shadow-lg: 10px 10px 0 var(--brutal-ink);
  --brutal-radius: 4px;
  --brutal-radius-lg: 8px;
  --brutal-mono: 'JetBrains Mono', 'Share Tech Mono', 'Courier New', monospace;
  --brutal-dot: radial-gradient(#d1d1d1 1px, transparent 1px);
}

/* ── Reset del tema oscuro → brutalist claro ── */
html, body,
body.bg-\[\#0a0a0a\],
body.bg-surface-950,
body.bg-black,
body.bg-\[\#0d0d0d\] {
  background-color: var(--brutal-bg) !important;
  background-image: var(--brutal-dot) !important;
  background-size: 22px 22px !important;
  color: var(--brutal-ink) !important;
  font-family: var(--brutal-mono) !important;
  letter-spacing: 0.01em;
}
/* Forzar body siempre (alta especificidad) */
body[class], body {
  background-color: var(--brutal-bg) !important;
  background-image: var(--brutal-dot) !important;
  background-size: 22px 22px !important;
  color: var(--brutal-ink) !important;
}

/* Forzar tema claro brutalist sin importar data-theme */
:root, html, html[data-theme="light"], html[data-theme="dark"] {
  --bg: var(--brutal-bg) !important;
  --surface: var(--brutal-card) !important;
  --surface-soft: var(--brutal-card) !important;
  --surface-hover: #f0f0ec !important;
  --card: var(--brutal-card) !important;
  --card-hover: #f8f8f4 !important;
  --border: var(--brutal-ink) !important;
  --border-strong: var(--brutal-ink) !important;
  --fg: var(--brutal-ink) !important;
  --fg-secondary: var(--brutal-muted) !important;
  --muted: var(--brutal-muted) !important;
  --rz-bg: var(--brutal-bg) !important;
  --rz-surface: var(--brutal-card) !important;
  --rz-text: var(--brutal-ink) !important;
  --rz-text-soft: var(--brutal-muted) !important;
  --rz-border: var(--brutal-ink) !important;
  --rz-border-strong: var(--brutal-ink) !important;
  --rz-radius-xl: var(--brutal-radius-lg) !important;
  --rz-radius-lg: var(--brutal-radius-lg) !important;
  --rz-radius-md: var(--brutal-radius) !important;
  --rz-radius-sm: var(--brutal-radius) !important;
  --rz-shadow-sm: var(--brutal-shadow-sm) !important;
  --rz-shadow-md: var(--brutal-shadow) !important;
  --rz-shadow-lg: var(--brutal-shadow-lg) !important;
}

/* Texto principal siempre oscuro sobre claro */
body, body *:not(.iconify):not(svg):not(path) {
  color: inherit;
}
.text-white, .text-neutral-100, .text-neutral-200, .text-neutral-300, .text-neutral-50 {
  color: var(--brutal-ink) !important;
}
.text-neutral-400, .text-neutral-500, .text-\[\#5f6368\], .text-\[\#80868b\] {
  color: var(--brutal-muted) !important;
}
.text-neutral-950, .text-neutral-900, .text-neutral-800, .text-black {
  color: var(--brutal-ink) !important;
}
.text-accent, .text-\[\#10b981\] { color: var(--brutal-accent) !important; }

/* ── Tipografía ── */
h1, h2, h3, h4, h5, h6, p, span, a, button, input, textarea, select, label, li, div {
  font-family: var(--brutal-mono) !important;
}
.uppercase, .tracking-\[0\.18em\], .tracking-\[0\.14em\], .tracking-wider {
  letter-spacing: 0.08em !important;
}

/* ── Fondos de superficies ── */
.bg-white, .bg-\[\#ffffff\], .bg-surface-50, .bg-\[\#f8f9fa\], .bg-\[\#f1f3f4\],
.bg-white\/90, .bg-white\/80, .bg-white\/70, .bg-white\/95, .bg-white\/60,
.bg-\[\#181818\], .bg-\[\#1a1a1a\], .bg-\[\#1e1e1e\], .bg-\[\#222222\], .bg-\[\#141414\],
.bg-surface-100, .bg-surface-200, .bg-surface-300, .bg-surface-800 {
  background-color: var(--brutal-card) !important;
}
/* Fondos originalmente oscuros → quedan como superficie oscura con texto claro */
.bg-\[\#0a0a0a\]:not(body), .bg-surface-950:not(body), .bg-\[\#0d0d0d\]:not(body), .bg-black:not(body) {
  background-color: var(--brutal-card-2) !important;
  color: #fff !important;
}
.bg-\[\#0a0a0a\]:not(body) *, .bg-surface-950:not(body) *, .bg-black:not(body) * {
  color: #fff !important;
}

/* ── Tarjetas generadas por JS (scrapers, comunidad, archivos) ── */
#scrapersGrid > *, #scrapersGrid > article,
#communityGrid > *, #communityGrid > article,
#filesGrid > *, #filesGrid > article,
#galleryGrid > *, #galleryGrid > article,
#marketTicker > *, #marketViewsList > *, #marketLikesList > *,
.rz-card, .admin-stat-card, .admin-surface-card,
.market-hero-card, .market-ticker-card, .market-board-row,
.profile-sidebar-card, .profile-surface-card {
  background-color: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-width: 2px !important;
  border-color: var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  color: var(--brutal-ink) !important;
  overflow: hidden !important;
}
#scrapersGrid > *:hover, #scrapersGrid > article:hover,
#communityGrid > *:hover, #communityGrid > article:hover,
#filesGrid > *:hover, #filesGrid > article:hover,
#galleryGrid > *:hover, #galleryGrid > article:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: var(--brutal-shadow-lg) !important;
  border-color: var(--brutal-ink) !important;
}
/* Forzar hijos de tarjetas a tinta (excepto elementos con fondo propio) */
#scrapersGrid > article p, #scrapersGrid > article h3,
#scrapersGrid > article a, #scrapersGrid > article span:not(.rz-card-code-btn):not(.rz-card-stat):not(.rz-card-cat):not(.rz-card-api):not(.rz-card-flag),
#communityGrid > article p, #communityGrid > article h3,
#filesGrid > article p, #filesGrid > article h3,
#galleryGrid > article p, #galleryGrid > article h3 {
  color: var(--brutal-ink) !important;
}
/* Pero mantener fondos oscuros internos (code blocks, avatares) */
#scrapersGrid pre, #communityGrid pre, #filesGrid pre,
#scrapersGrid code, #communityGrid code, #filesGrid code,
#scrapersGrid .bg-surface-950, #communityGrid .bg-surface-950 {
  background-color: var(--brutal-card-2) !important;
  color: var(--brutal-accent) !important;
}

/* ── Rounded variants generados por JS ── */
.rounded-\[28px\], .rounded-\[24px\], .rounded-\[20px\], .rounded-\[16px\], .rounded-\[1\.5rem\] {
  border-radius: var(--brutal-radius-lg) !important;
}
.rounded-\[12px\], .rounded-\[10px\], .rounded-\[8px\] {
  border-radius: var(--brutal-radius) !important;
}

/* ── Bordes con opacidad / neutrales → tinta sólida ── */
.border-neutral-100, .border-neutral-200, .border-neutral-300,
.border-\[\#e8eaed\], .border-\[\#dadce0\], .border-\[\#e5e7eb\],
.border-white\/5, .border-white\/10, .border-white\/20 {
  border-color: var(--brutal-ink) !important;
  border-width: 2px !important;
}

/* ── Bordes brutales (2px sólidos negros) ── */
.border, .border-\[\#dadce0\], .border-\[\#e8eaed\], .border-neutral-100, .border-neutral-200 {
  border-color: var(--brutal-ink) !important;
  border-width: 2px !important;
}
.rounded-2xl, .rounded-3xl, .rounded-\[2rem\] { border-radius: var(--brutal-radius-lg) !important; }
.rounded-xl, .rounded-\[1rem\] { border-radius: var(--brutal-radius) !important; }
.rounded-full { border-radius: 9999px !important; }

/* ── Header / Topbar ── */
.home-topbar-shell, .home-topbar-wrap {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
}
.home-topbar-wrap { padding-bottom: 8px !important; }

.home-icon-btn, .theme-toggle-btn, .header-login-pill, .home-mini-pill {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  color: var(--brutal-ink) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}
.home-icon-btn:hover, .theme-toggle-btn:hover, .header-login-pill:hover, .home-mini-pill:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
}
.home-icon-btn:active, .theme-toggle-btn:active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--brutal-ink) !important;
}

.header-user-pill {
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
}

/* ── Rail (sidebar desktop) ── */
.rz-rail {
  background: var(--brutal-card) !important;
  border-right: 2px solid var(--brutal-ink) !important;
  box-shadow: 4px 0 0 var(--brutal-ink) !important;
}
.rz-rail .nav-item {
  color: var(--brutal-ink) !important;
  border: 2px solid transparent !important;
  border-radius: var(--brutal-radius) !important;
  transition: all 150ms ease !important;
}
.rz-rail .nav-item:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  transform: translateX(3px) !important;
}
.rz-rail .nav-item.active {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  border-color: var(--brutal-ink) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
}

/* ── Bottom dock (mobile) ── */
.home-dock-shell {
  background: var(--brutal-card) !important;
  border-top: 2px solid var(--brutal-ink) !important;
  box-shadow: 0 -4px 0 var(--brutal-ink) !important;
}
.home-dock-shell .nav-item {
  color: var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  transition: all 150ms ease !important;
}
.home-dock-shell .nav-item.active {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
}
.home-dock-create-btn {
  background: var(--brutal-accent) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  color: var(--brutal-bg) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.home-dock-create-btn:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
}

/* ── AI Assistant panel ── */
.rz-ai-panel {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
.rz-ai-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  background: var(--brutal-ink) !important;
  border-bottom: 2px solid var(--brutal-ink) !important;
}
.rz-ai-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  border: 2px solid var(--brutal-accent) !important;
  background: var(--brutal-card-2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 2px var(--brutal-ink), 2px 2px 0 var(--brutal-accent) !important;
}
.rz-ai-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}
#aiAvatarFallback {
  color: var(--brutal-accent) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
}
.rz-ai-header-text {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}
.rz-ai-name {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--brutal-bg) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  line-height: 1.1 !important;
}
.rz-ai-name-accent { color: var(--brutal-accent) !important; }
.rz-ai-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10px !important;
  color: var(--brutal-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.rz-ai-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--brutal-accent) !important;
  animation: brutalPulse 1.8s ease-in-out infinite !important;
}
.rz-ai-clear {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border: 1.5px solid var(--brutal-bg) !important;
  border-radius: var(--brutal-radius) !important;
  background: transparent !important;
  color: var(--brutal-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}
.rz-ai-clear:hover {
  background: var(--brutal-danger) !important;
  border-color: var(--brutal-danger) !important;
}

.rz-ai-messages {
  flex: 1 !important;
  min-height: 180px !important;
  max-height: 340px !important;
  overflow-y: auto !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: var(--brutal-card) !important;
}
.rz-ai-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 6px !important;
  padding: 20px 10px !important;
  flex: 1 !important;
}
.rz-ai-empty-icon {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: 50% !important;
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  margin-bottom: 4px !important;
}
.rz-ai-empty-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--brutal-ink) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
.rz-ai-empty-sub {
  font-size: 11px !important;
  color: var(--brutal-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px 0 !important;
  max-width: 260px !important;
  line-height: 1.4 !important;
}
.rz-ai-suggestions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: center !important;
}
.rz-ai-suggestion {
  padding: 6px 10px !important;
  background: var(--brutal-bg) !important;
  border: 1.5px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  color: var(--brutal-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
}
.rz-ai-suggestion:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--brutal-ink) !important;
}

/* Chat bubbles */
.rz-ai-msg {
  display: flex !important;
  gap: 8px !important;
  max-width: 92% !important;
  animation: brutalFadeIn 250ms ease !important;
}
.rz-ai-msg-user { align-self: flex-end !important; flex-direction: row-reverse !important; }
.rz-ai-msg-ai { align-self: flex-start !important; }
.rz-ai-msg-avatar {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--brutal-ink) !important;
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  overflow: hidden !important;
}
.rz-ai-msg-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.rz-ai-msg-bubble {
  padding: 8px 12px !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.rz-ai-msg-user .rz-ai-msg-bubble {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  border-radius: var(--brutal-radius) var(--brutal-radius) 0 var(--brutal-radius) !important;
}
.rz-ai-msg-ai .rz-ai-msg-bubble {
  background: var(--brutal-card) !important;
  color: var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) var(--brutal-radius) var(--brutal-radius) 0 !important;
}
.rz-ai-typing {
  display: inline-flex !important;
  gap: 3px !important;
  padding: 4px 0 !important;
}
.rz-ai-typing span {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--brutal-muted) !important;
  animation: brutalPulse 1s ease-in-out infinite !important;
}
.rz-ai-typing span:nth-child(2) { animation-delay: 0.15s !important; }
.rz-ai-typing span:nth-child(3) { animation-delay: 0.3s !important; }

.rz-ai-form {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-top: 2px solid var(--brutal-ink) !important;
  background: var(--brutal-bg) !important;
}
.rz-ai-input {
  flex: 1 !important;
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: var(--brutal-ink) !important;
  font-family: var(--brutal-mono) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.rz-ai-input:focus {
  outline: none !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
  border-color: var(--brutal-accent) !important;
}
.rz-ai-input::placeholder { color: var(--brutal-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.rz-ai-send {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: var(--brutal-accent) !important;
  color: var(--brutal-bg) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.rz-ai-send:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
}
.rz-ai-send:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Quitar backdrop-blur (no pega con brutalist) ── */
.backdrop-blur-sm, .backdrop-blur, .backdrop-blur-md {
  backdrop-filter: none !important;
}

/* ── Botones primarios ── */
.bg-\[\#10b981\]:not(.nav-item):not(.home-dock-create-btn) {
  background: var(--brutal-accent) !important;
  color: var(--brutal-bg) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}
.bg-\[\#10b981\]:not(.nav-item):not(.home-dock-create-btn):hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
}
.bg-\[\#10b981\]:not(.nav-item):not(.home-dock-create-btn):active {
  transform: translate(1px, 1px) !important;
  box-shadow: 1px 1px 0 var(--brutal-ink) !important;
}

/* Botones morados (comunidad) */
.bg-purple-600, .bg-purple-500 {
  background: var(--brutal-accent-2) !important;
  color: var(--brutal-bg) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.bg-purple-600:hover, .bg-purple-500:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
}

/* Botones rojos */
.bg-red-500, .bg-red-600 {
  background: var(--brutal-danger) !important;
  color: var(--brutal-bg) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── Inputs ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], textarea, select {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  color: var(--brutal-ink) !important;
  font-family: var(--brutal-mono) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
  border-color: var(--brutal-accent) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--brutal-muted) !important;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

/* ── Modales / Sheets ── */
.modal-backdrop, .bg-black\/50, .bg-black\/90 {
  background: rgba(10, 10, 10, 0.55) !important;
  backdrop-filter: blur(2px);
}
.slide-up {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) var(--brutal-radius-lg) 0 0 !important;
  box-shadow: 0 -6px 0 var(--brutal-ink) !important;
  animation: brutalSlideUp 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes brutalSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Badges / pills ── */
.bg-accent, .bg-\[\#10b981\] {
  border: 2px solid var(--brutal-ink) !important;
}

/* ── Stats bar (estilo Delirius) ── */
.market-hero-card {
  background: var(--brutal-card-2) !important;
  color: var(--brutal-ink) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow) !important;
}
.market-hero-card * { color: var(--brutal-ink) !important; }
.market-hero-card .text-accent { color: var(--brutal-accent) !important; }

/* ── Code blocks ── */
pre, code, .bg-surface-950, pre[class*="bg-"] {
  background: var(--brutal-card-2) !important;
  color: var(--brutal-accent) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  font-family: var(--brutal-mono) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
}
pre *, code * { color: inherit !important; }

/* ── Code window (scraper page) — fondo oscuro, texto claro ── */
#codeWindow, .code-scroll, .code-lines, .code-gutter,
.ios-editor, .ios-editor-toolbar {
  background: var(--brutal-card-2) !important;
  color: #e5e5e5 !important;
  border-color: var(--brutal-ink) !important;
}
body.ios-page .code-lines, body.ios-page .code-lines *,
#codeContent, #codeContent {
  color: #e5e5e5 !important;
}
.code-gutter { color: #6b6b6b !important; background: #0d0d0d !important; }
.ios-editor-toolbar { background: #141414 !important; border-bottom: 2px solid var(--brutal-ink) !important; }
/* highlight.js tokens sobre fondo oscuro */
#codeContent .hljs-keyword, #codeContent .hljs-selector-tag { color: #c678dd !important; }
#codeContent .hljs-string { color: #98c379 !important; }
#codeContent .hljs-number, #codeContent .hljs-literal { color: #d19a66 !important; }
#codeContent .hljs-title, #codeContent .hljs-title.function_, #codeContent .hljs-title.class_ { color: #61afef !important; }
#codeContent .hljs-variable, #codeContent .hljs-variable.constant_, #codeContent .hljs-variable.language_ { color: #e06c75 !important; }
#codeContent .hljs-comment { color: #7f848e !important; font-style: italic; }
#codeContent .hljs-params, #codeContent .hljs-property, #codeContent .hljs-attr { color: #d19a66 !important; }
#codeContent .hljs-regexp { color: #98c379 !important; }
#codeContent .hljs-subst { color: #e5c07b !important; }
#codeContent .hljs-built_in, #codeContent .hljs-type { color: #56b6c2 !important; }

/* ── Spinner ── */
.spinner {
  border: 3px solid var(--brutal-ink) !important;
  border-top-color: var(--brutal-accent) !important;
  border-radius: 50% !important;
  animation: brutalSpin 700ms linear infinite !important;
}
@keyframes brutalSpin {
  to { transform: rotate(360deg); }
}

/* ── Toast ── */
.toast {
  background: var(--brutal-card-2) !important;
  color: var(--brutal-accent) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow) !important;
  font-family: var(--brutal-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 700 !important;
}

/* ── Sort chips / tabs ── */
.sort-chip, .files-mode-chip {
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  background: var(--brutal-card) !important;
  color: var(--brutal-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: all 150ms ease !important;
}
.sort-chip:hover, .files-mode-chip:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
}
.sort-active, .files-mode-chip.bg-\[\#10b981\] {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
}

/* ── Announcement strip — oculto del top (botón en rail/topbar) ── */
#announcementStripWrap { display: none !important; }
.announcement-strip {
  background: var(--brutal-warn) !important;
  color: var(--brutal-bg) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  font-family: var(--brutal-mono) !important;
}

/* ── Chat hub ── */
.chat-hub-sidebar, .chat-hub-conversation {
  background: var(--brutal-card) !important;
}
.chat-hub-avatar {
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  font-family: var(--brutal-mono) !important;
  font-weight: 700 !important;
}

/* ── Animaciones de entrada ── */
.fade-in {
  animation: brutalFadeIn 350ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes brutalFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shimmer skeleton (estilo Delirius) */
.skeleton, .sk-stat, .sk-icon, .sk-title, .sk-sub, .sk-btn {
  background: #e0e0dc !important;
  position: relative;
  overflow: hidden;
  border-radius: var(--brutal-radius) !important;
}
.skeleton::after, .sk-stat::after, .sk-title::after, .sk-sub::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  animation: brutalShimmer 1.2s infinite !important;
}
@keyframes brutalShimmer {
  100% { transform: translateX(100%); }
}

/* ── Blinking cursor (terminal vibe) ── */
.home-topbar-shell::after,
.rz-quick-grid::before {
  content: "";
}

/* ── Links ── */
a { color: var(--brutal-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* ── Scrollbar brutalist ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--brutal-bg); }
::-webkit-scrollbar-thumb {
  background: var(--brutal-ink);
  border-radius: 0;
  border: 1px solid var(--brutal-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--brutal-accent); }

/* ── User dropdown ── */
#headerUserDropdown {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow) !important;
}
#headerUserDropdown a:hover, #headerUserDropdown button:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
}

/* ── Avatar / foto de perfil en topbar ── */
.header-user-pill {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
.header-user-pill img#headerUserAvatar:not(.hidden) {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}
.header-user-pill img#headerUserAvatar.hidden {
  display: none !important;
}
#headerUserFallback {
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
}
.header-user-dot {
  background: var(--brutal-accent) !important;
  border-color: var(--brutal-card) !important;
}

/* ── Auth overlay ── */
#authOverlay > div {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow-lg) !important;
}

/* ── Pulse para badges de notificación ── */
#notifCountBadge, #notifBadge, #navChatBadge {
  background: var(--brutal-danger) !important;
  border: 1.5px solid var(--brutal-ink) !important;
  animation: brutalPulse 1.6s ease-in-out infinite !important;
}
@keyframes brutalPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ── Glitch hover en el logo ── */
.home-topbar-shell a[href="/"] span,
.home-topbar-shell a[href="/"] p {
  transition: text-shadow 200ms ease;
}
.home-topbar-shell a[href="/"]:hover span {
  text-shadow: 2px 0 var(--brutal-accent), -2px 0 var(--brutal-accent-2);
}

/* ── Login / register / profile pages ── */
#loginScreen, .login-card, .register-card {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow-lg) !important;
}

/* ── Apple card / row override (profile, settings) ── */
.apple-card, .apple-row {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius-lg) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
}

/* ── Botones secundarios ── */
.ios-secondary-action, button.border, a.border {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  color: var(--brutal-ink) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}
.ios-secondary-action:hover, button.border:hover, a.border:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--brutal-ink) !important;
}

/* ── Marquee / ticker animado para stats ── */
.market-hero-card {
  position: relative;
  overflow: hidden;
}
.market-hero-card::after {
  content: "● LIVE";
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 10px;
  color: var(--brutal-accent);
  letter-spacing: 0.1em;
  animation: brutalBlink 1.4s steps(2) infinite;
}
@keyframes brutalBlink {
  50% { opacity: 0.25; }
}

/* ── Hover lift en items de lista ── */
#marketViewsList > *, #marketLikesList > *, #chatHubThreadsList > * {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
}
#marketViewsList > *:hover, #marketLikesList > *:hover, #chatHubThreadsList > *:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  transform: translateX(4px) !important;
}
#marketViewsList > *:hover *, #marketLikesList > *:hover *, #chatHubThreadsList > *:hover * {
  color: var(--brutal-bg) !important;
}

/* ── Chat bubbles ── */
.chat-bubble-mine, .chat-bubble-other {
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  font-family: var(--brutal-mono) !important;
}
.chat-bubble-mine {
  background: var(--brutal-card-2) !important;
  color: var(--brutal-accent) !important;
}
.chat-bubble-other {
  background: var(--brutal-card) !important;
  color: var(--brutal-ink) !important;
}

/* ── Etiquetas uppercase pequeñas ── */
.text-\[10px\], .text-\[11px\] {
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── Force hide theme toggle visual quirks ── */
.theme-toggle-btn .iconify { color: var(--brutal-ink) !important; }

/* ── Pagination buttons ── */
#pagination button, #communityPagination button {
  background: var(--brutal-card) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  color: var(--brutal-ink) !important;
  font-weight: 700 !important;
  font-family: var(--brutal-mono) !important;
  transition: all 150ms ease !important;
}
#pagination button:hover, #communityPagination button:hover {
  background: var(--brutal-ink) !important;
  color: var(--brutal-bg) !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--brutal-ink) !important;
}

/* ── Share popup ── */
#sharePopup > div {
  background: var(--brutal-card-2) !important;
  color: var(--brutal-accent) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow) !important;
}
#sharePopup * { color: inherit !important; }

/* ── Notif badge dot color ── */
.bg-red-500 { background: var(--brutal-danger) !important; }

/* ── Asegurar contraste en badges sobre fondo claro ── */
.bg-accent.text-white, .bg-\[\#10b981\].text-white {
  color: var(--brutal-bg) !important;
}

/* ============================================================
   RESPONSIVE MÓVIL — arreglar superposiciones
   ============================================================ */
@media (max-width: 640px) {
  /* Topbar: ocultar theme-toggle y announcements (ya están en dock) */
  .theme-toggle-btn, #announcementsBtn, #headerAdminBtn {
    display: none !important;
  }
  /* Reducir gaps del topbar para que quepa sin superponerse */
  .home-topbar-shell {
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  .home-topbar-shell > a:first-child {
    gap: 8px !important;
    min-width: 0 !important;
  }
  .home-topbar-shell > a:first-child img {
    height: 32px !important;
    width: 32px !important;
  }
  .home-topbar-shell > a:first-child .text-\[10px\] {
    display: none !important;
  }
  .home-topbar-shell > a:first-child span {
    font-size: 14px !important;
  }
  .home-icon-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .header-user-pill {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  /* AI panel en móvil */
  .rz-ai-messages { min-height: 160px !important; max-height: 280px !important; }
  .rz-ai-input { font-size: 12px !important; padding: 8px 12px !important; }
  .rz-ai-send { width: 40px !important; height: 40px !important; min-width: 40px !important; }
  .rz-ai-suggestion { font-size: 10px !important; padding: 5px 8px !important; }
  /* Reducir sombras en móvil para no desbordar */
  #scrapersGrid > *, #scrapersGrid > article,
  #communityGrid > *, #communityGrid > article,
  #filesGrid > *, #filesGrid > article {
    box-shadow: 2px 2px 0 var(--brutal-ink) !important;
  }
  /* Padding del contenedor principal */
  .rz-shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Header sticky sin padding excesivo */
  .home-topbar-wrap > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
  }
  /* Dock móvil: iconos más compactos */
  .home-dock-shell {
    padding: 6px 4px !important;
    gap: 2px !important;
  }
  .home-dock-shell .nav-item {
    padding: 6px !important;
    min-width: 44px !important;
  }
  .home-dock-create-btn {
    width: 44px !important;
    height: 44px !important;
  }
  /* Modales: ocupar casi toda la pantalla en móvil */
  .slide-up {
    max-height: 92vh !important;
    border-radius: var(--brutal-radius-lg) var(--brutal-radius-lg) 0 0 !important;
  }
  /* Notificaciones overlay a pantalla completa en móvil */
  #notificationsOverlay > div:last-child,
  #announcementsOverlay > div:last-child {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── Logo img siempre visible ── */
.home-topbar-shell img[alt="RyZe Codes"] {
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
}

/* ── Texto muted forzado a color muted ── */
.text-\[\#5f6368\], .text-\[\#80868b\] {
  color: var(--brutal-muted) !important;
}

/* ============================================================
   CARDS DE SCRAPERS — diseño brutalist limpio
   ============================================================ */
#scrapersGrid > article, #communityGrid > article,
#filesGrid > article, #galleryGrid > article {
  padding: 0 !important;
}

/* Avatar del autor */
.rz-card-avatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid var(--brutal-ink) !important;
  box-shadow: var(--brutal-shadow-sm) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #fff !important;
  text-transform: uppercase !important;
}
.rz-card-avatar-fallback { color: #fff !important; }

/* Author name */
.rz-card-author {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--brutal-ink) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.rz-card-author a { color: var(--brutal-ink) !important; }

/* Category badge */
.rz-card-cat {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--brutal-bg) !important;
  border: 1.5px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  padding: 2px 8px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--brutal-ink) !important;
}

/* API badge */
.rz-card-api {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  background: var(--brutal-accent) !important;
  color: var(--brutal-bg) !important;
  border: 1.5px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Arrow icon */
.rz-card-arrow {
  width: 32px !important;
  height: 32px !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  background: var(--brutal-card) !important;
  color: var(--brutal-ink) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 2px 2px 0 var(--brutal-ink) !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
#scrapersGrid > article:hover .rz-card-arrow {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--brutal-ink) !important;
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
}

/* Title */
.rz-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--brutal-ink) !important;
  margin: 0 0 8px 0 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

/* Status flags */
.rz-card-flag {
  display: inline-block !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border: 1.5px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}
.rz-card-flag-star { background: var(--brutal-warn) !important; color: var(--brutal-ink) !important; }
.rz-card-flag-warn { background: #fed7aa !important; color: var(--brutal-ink) !important; }
.rz-card-flag-danger { background: var(--brutal-danger) !important; color: #fff !important; }

/* Description */
.rz-card-desc {
  font-size: 12px !important;
  color: var(--brutal-muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Footer */
.rz-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 2px solid var(--brutal-ink) !important;
}

/* Stats (views, likes) */
.rz-card-stats {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
.rz-card-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  border: 1.5px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  background: var(--brutal-card) !important;
  color: var(--brutal-ink) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.rz-card-stat .iconify { color: var(--brutal-ink) !important; }
.rz-card-stat-like .iconify { color: var(--brutal-danger) !important; }

/* Código button */
.rz-card-code-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  background: var(--brutal-ink) !important;
  color: var(--brutal-accent) !important;
  border: 2px solid var(--brutal-ink) !important;
  border-radius: var(--brutal-radius) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  box-shadow: 2px 2px 0 var(--brutal-accent) !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
  margin-left: auto !important;
}
.rz-card-code-btn .iconify { color: var(--brutal-accent) !important; }
#scrapersGrid > article:hover .rz-card-code-btn {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--brutal-accent) !important;
}