/* ==================================================
   DESIGN TOKENS & RESET
   ================================================== */
:root {
  /* Color Palette System */
  --bg-main: #090a0f;
  --bg-surface: rgba(18, 20, 29, 0.65);
  --bg-surface-hover: rgba(28, 31, 46, 0.75);
  --accent-primary: #5865f2;
  --primary: #5865f2;
  --secondary: #6366f1;
  --accent-glow: rgba(88, 101, 242, 0.35);
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);

  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(99, 102, 241, 0.3);

  /* Compat (selectores heredados del SPA) */
  --bg-card: rgba(18, 20, 29, 0.72);
  --bg-card-hover: rgba(28, 31, 46, 0.85);
  --bg-secondary: #0c0c10;
  --bg-elevated: rgba(28, 31, 46, 0.9);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.14);
  --border-active: rgba(99, 102, 241, 0.5);
  --accent: #6366f1;
  --accent-hover: #7c7ff5;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --cyan: #06b6d4;
  --cyan-glow: rgba(6, 182, 212, 0.2);
  --text: #f3f4f6;
  --text-secondary: #a1a3b3;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.12);
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.14);

  /* Spacing System (4px/8px base) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  /* Typography */
  --font-fluid-title: clamp(1.5rem, 4vw, 2.5rem);
  --font-fluid-body: clamp(0.875rem, 1.5vw, 1rem);
  --main-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font: var(--main-font);

  /* Elevation System */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --radius: var(--radius-md);

  /* Performance & Transitions */
  --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==================================================
   FONT STUDIO — data-font en <html> cambia la fuente
   global del dashboard vía --main-font / --font.
   ================================================== */
[data-font="harrington"] { --main-font: 'Harrington', 'Snell Roundhand', 'Brush Script MT', cursive; }
[data-font="algerian"]   { --main-font: 'Algerian', 'Copperplate', 'Bookman Old Style', serif; }
[data-font="euphoria"]   { --main-font: 'Euphoria Script', 'Segoe Script', cursive; }
[data-font="dignas"]     { --main-font: 'Dignas Handwriting', 'Bradley Hand', 'Segoe Script', cursive; }
[data-font="stencil"]    { --main-font: 'Allerta Stencil', 'Arial Narrow', sans-serif; }
[data-font="amaranth"]   { --main-font: 'Amaranth', 'Segoe UI', sans-serif; }
[data-font="amatic"]     { --main-font: 'Amatic SC', 'Segoe Script', cursive; }
[data-font="amble"]      { --main-font: 'Amble', 'Segoe UI', -apple-system, sans-serif; }
[data-font="amita"]      { --main-font: 'Amita', 'Segoe Script', cursive; }
[data-font="telescope"]  { --main-font: 'Annie Use Your Telescope', 'Comic Sans MS', cursive; }
[data-font="anonymous"]  { --main-font: 'Anonymous Pro', 'Consolas', 'Courier New', monospace; }
[data-font="anton"]      { --main-font: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif; }
[data-font="arapey"]     { --main-font: 'Arapey', 'Georgia', serif; }

/* CSS Reset & Baseline */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(at 0% 0%, rgba(88, 101, 242, 0.12) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.12) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: var(--font);
  font-size: var(--font-fluid-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ==================================================
   FLUID BACKGROUND (canvas + overlay)
   ================================================== */
#fluid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

#fluid-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
}

/* Contenido de la UI SIEMPRE por encima del overlay (canvas + blur).
   Sin esto, .main y sus tarjetas quedan pintados DEBAJO del overlay y se
   ven negros/vacíos (el sidebar lo hace bien por su z-index:100). */
#landing,
#dashboard,
.toast-container,
.spotify-widget,
.loading-view {
  position: relative;
  z-index: 2;
}

/* ==================================================
   UTILITIES (Glassmorphism System)
   ================================================== */
.glass-card {
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  transition: var(--transition-smooth);
  will-change: transform, box-shadow;
}

.glass-card:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

.gradient-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
/* Los iconos SVG no deben heredar el fill transparente de gradient-text */
.gradient-text .an-icon {
  color: var(--accent-primary);
  -webkit-text-fill-color: currentColor;
}
.status-on { color: var(--success); font-weight: 600; }
.status-off { color: var(--text-muted); font-weight: 600; }

.guilds-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0;
  min-width: 0;
  overflow-x: auto;
}
.guilds-grid > * { min-width: 0; }

.dashboard-layout {
  display: grid;
  grid-template-columns: min(260px, 100%) 1fr;
  min-height: 100vh;
  isolation: isolate;
}

.skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==================================================
   TOASTS
   ================================================== */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(18, 20, 29, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  animation: toastIn 0.4s var(--ease-out) forwards;
  min-width: 300px;
  max-width: 420px;
  font-size: 13px;
  pointer-events: auto;
  overflow: hidden;
  position: relative;
}
.toast.success { border-left: 2px solid var(--success); }
.toast.error { border-left: 2px solid var(--danger); }
.toast.info { border-left: 2px solid var(--accent); }

.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-msg { flex: 1; line-height: 1.4; font-weight: 500; }
.toast-close {
  background: none; border: none;
  color: var(--text-muted); font-size: 18px;
  cursor: pointer; padding: 0 2px; line-height: 1;
  transition: color 0.15s;
}
.toast-close:hover { color: var(--text-main); }

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 0 2px 2px 0;
  animation: toastProgress 3.5s linear forwards;
}
.toast.success .toast-progress { background: var(--success); }
.toast.error .toast-progress { background: var(--danger); }
.toast.info .toast-progress { background: var(--accent); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* ==================================================
   LANDING
   ================================================== */
.landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: transparent;
}

.landing-card {
  position: relative;
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  padding: 56px 44px 44px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  animation: fadeSlideIn 0.6s var(--ease-out) forwards;
}

.landing-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}

.landing-logo {
  font-size: 52px;
  margin-bottom: 16px;
  position: relative;
  filter: drop-shadow(0 0 18px var(--accent-glow));
}

.landing-title {
  font-size: var(--font-fluid-title);
  font-weight: 800;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.landing-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-weight: 500;
}

.landing-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* ==================================================
   BUTTONS
   ================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.btn:active {
  transform: scale(0.97);
}

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 7px; }

.btn-discord {
  background: var(--accent-gradient);
  color: white;
  width: 100%;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.35);
}
.btn-discord:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 28px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 24px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
  border-color: var(--border-hover);
}

.btn-neu {
  background: linear-gradient(145deg, var(--bg-surface-hover), var(--bg-surface));
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.35), -4px -4px 12px rgba(255, 255, 255, 0.06);
}
.btn-neu:hover {
  background: linear-gradient(145deg, var(--bg-surface), var(--bg-surface-hover));
  color: var(--text-main);
  border-color: var(--border-hover);
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

/* ==================================================
   DASHBOARD LAYOUT
   ================================================== */
.dashboard {
  display: none;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
}
.dashboard.active { display: flex; }

/* ==================================================
   SIDEBAR
   ================================================== */
.sidebar {
  width: 230px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  background: rgba(10, 11, 16, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px 18px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-icon { font-size: 22px; }

.sidebar-nav {
  flex: 1;
  min-height: 0;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }


.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  transition: var(--transition-smooth);
}
.nav-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}
.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px var(--border-accent), var(--shadow-glow);
}

.nav-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 8px 12px;
}

.sidebar-footer {
  border-top: 1px solid var(--border-subtle);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
}

.sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--border-accent);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.sidebar-user-info .user-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-info .user-sub {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.sidebar-logout:hover { color: var(--danger); }

/* ==================================================
   SIDEBAR ADAPTATIVA (compacto en escritorio + drawer móvil)
   ================================================== */
.sidebar {
  transition: width 0.25s var(--ease-out), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: var(--transition-smooth);
}
.sidebar-toggle:hover {
  background: var(--bg-surface-hover);
  color: var(--text-main);
}

/* Botón flotante (solo móvil) y scrim del drawer */
.sidebar-fab {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 120;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--text-main);
  cursor: pointer;
  box-shadow: var(--shadow-glass);
}
.sidebar-fab:active { transform: scale(0.94); }

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }

/* Modo compacto (rail de iconos, solo escritorio) */
@media (min-width: 769px) {
  body.sidebar-compact .sidebar { width: 76px; }
  body.sidebar-compact .main,
  body.sidebar-compact .dashboard-main { margin-left: 76px; }
  body.sidebar-compact .sidebar-brand {
    padding: 18px 0;
    justify-content: center;
  }
  body.sidebar-compact .sidebar-brand .sidebar-brand-text,
  body.sidebar-compact .sidebar-brand .sidebar-icon { display: none; }
  body.sidebar-compact .nav-item,
  body.sidebar-compact .nav-cat-toggle {
    justify-content: center;
    padding: 12px;
  }
  body.sidebar-compact .nav-item > span,
  body.sidebar-compact .nav-cat-toggle > span,
  body.sidebar-compact .nav-cat-toggle .cat-chevron,
  body.sidebar-compact .sidebar-user-info,
  body.sidebar-compact .sidebar-logout span { display: none; }
  body.sidebar-compact .sidebar-nav { padding: 10px 6px; }
  body.sidebar-compact .sidebar-user { justify-content: center; padding: 14px 0; }
  body.sidebar-compact .sidebar-logout { justify-content: center; padding: 12px 0; }
}

/* ==================================================
   PANELES COLAPSABLES (acordeón arc-panel)
   ================================================== */
.arc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 4px;
  cursor: pointer;
  color: inherit;
  font-family: var(--font);
  text-align: left;
}
.arc-panel-head h3,
.arc-panel-head .setting-group-title {
  margin: 0;
}
.arc-panel-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.25s var(--ease-out);
}
.arc-panel.open .arc-panel-chevron { transform: rotate(180deg); }
.arc-panel-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease-out);
}
.arc-panel-body > .arc-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.arc-panel.open .arc-panel-body { grid-template-rows: 1fr; }
.arc-panel:not(.open) .arc-panel-body { margin-bottom: 0; }

/* ==================================================
   MAIN
   ================================================== */
.main {
  margin-left: 230px;
  flex: 1;
  min-width: 0;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  max-width: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  transition: margin-left 0.25s var(--ease-out);
}

/* Contenedores de vista: ancho máximo de lectura (1200px) centrados. */
#server-list,
#settings-content,
.server-header {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ==================================================
   UNAUTH BANNER
   ================================================== */
.unauth-banner {
  background: var(--danger-soft);
  border: 1px solid rgba(239, 68, 68, 0.2);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}
.unauth-banner .btn { flex-shrink: 0; }

/* ==================================================
   SERVER HEADER BANNER
   ================================================== */
.server-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  padding: 20px 24px;
  margin-bottom: 28px;
  animation: fadeSlideIn 0.4s var(--ease-out) forwards;
}

.server-header-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.server-header-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-header-info {
  flex: 1;
  min-width: 0;
}

.server-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.server-header-top h2 {
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  box-shadow: 0 0 10px var(--success-soft);
  animation: pulse 2s ease-in-out infinite;
}

.server-header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.server-id-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.server-id-badge code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--text-secondary);
}

.copy-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  padding: 2px;
  border-radius: 4px;
  transition: var(--transition-smooth);
}
.copy-btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* ==================================================
   SERVER LIST / GUILD CARDS
   ================================================== */
.server-list-hint {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.guild-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.guild-card {
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  padding: 24px 16px 18px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  will-change: transform, box-shadow;
}
.guild-card:hover {
  transform: translate3d(0, -3px, 0);
  border-color: var(--border-accent);
  background: var(--bg-surface-hover);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}
.guild-card:active {
  transform: translateY(-1px) scale(0.98);
}
.guild-card.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.guild-card.disabled:hover {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  transform: none;
  box-shadow: var(--shadow-glass);
}

.guild-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: var(--bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 0.25s var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.guild-card:hover .guild-icon {
  border-color: var(--accent);
  box-shadow: 0 0 18px var(--accent-glow);
}
.guild-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.guild-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guild-status {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-weight: 500;
}
.guild-status.present {
  background: var(--success-soft);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
}
.guild-status.missing {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border-subtle);
}

.guild-action {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: var(--transition-smooth);
  cursor: pointer;
}
.guild-action:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.guild-action-invite {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}
.guild-action-invite:hover {
  background: rgba(29, 185, 84, 0.14);
  border-color: #1DB954;
  color: #1DB954;
}
.guild-action-muted {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  box-shadow: none;
  cursor: default;
}

/* ==================================================
   GUILD ROW (lista de servidores, "Gestionar servidores")
   Layout auto 1fr auto + wrap: imagen, nombre y botones
   de acción SIEMPRE dentro del viewport visible.
   ================================================== */
.guild-row-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-width: 0;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.guild-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 260px;
}
.guild-row-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.guild-row-name {
  min-width: 0;
  flex: 1;
}
.guild-row-name h4 {
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  margin: 0 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guild-row-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
}
.guild-row-status.on { color: #10b981; }
.guild-row-status.off { color: #f59e0b; }
.guild-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ==================================================
   SKEUOMORPHIC / NEUMORPHIC CARDS (lista de servidores)
   ================================================== */
.skeuo-card {
  background: linear-gradient(145deg, rgba(26, 29, 41, 0.85), rgba(13, 14, 21, 0.92));
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow:
    6px 6px 16px rgba(0, 0, 0, 0.45),
    -6px -6px 16px rgba(255, 255, 255, 0.03),
    var(--shadow-glass);
  transition: var(--transition-smooth);
  will-change: transform, box-shadow;
}
.skeuo-card:hover {
  border-color: var(--border-accent);
  box-shadow:
    6px 6px 20px rgba(0, 0, 0, 0.5),
    -6px -6px 20px rgba(255, 255, 255, 0.05),
    var(--shadow-glow);
  transform: translateY(-2px);
}

.neu-raised {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, #5865f2, #6366f1);
  box-shadow:
    4px 4px 12px rgba(0, 0, 0, 0.35),
    -4px -4px 12px rgba(99, 102, 241, 0.14);
  transition: var(--transition-smooth);
  cursor: pointer;
  border: none;
}
.neu-raised:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    6px 6px 16px rgba(0, 0, 0, 0.4),
    -4px -4px 14px rgba(99, 102, 241, 0.2);
}
.neu-raised:active {
  transform: translateY(0) scale(0.98);
}

.neu-raised-invite {
  background: linear-gradient(145deg, #1f2937, #111827);
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.35), -4px -4px 12px rgba(255, 255, 255, 0.04);
}
.neu-raised-invite:hover {
  color: #1DB954;
}

.neu-raised-muted {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  cursor: default;
  color: var(--text-muted);
}

/* ==================================================
   SETTINGS
   ================================================== */
.settings-panel {
  animation: fadeSlideIn 0.35s var(--ease-out) forwards;
}

.settings-panel h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 24px;
}

.setting-group {
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  padding: 20px 24px;
  margin-bottom: 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.setting-group:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

.setting-group h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}
.setting-row:last-child { border-bottom: none; padding-bottom: 0; }

.setting-label {
  flex: 1;
  min-width: 0;
}
.setting-label span {
  display: block;
  font-size: 14px;
  font-weight: 500;
}
.setting-label small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ==================================================
   TOGGLE
   ================================================== */
.toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  transition: var(--transition-smooth);
}
.toggle .slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: var(--transition-smooth);
  transform-origin: center;
}
.toggle input:checked + .slider {
  background: var(--accent-gradient);
  box-shadow: 0 0 12px var(--accent-glow);
}
.toggle input:checked + .slider::before {
  transform: translateX(18px);
}
.toggle input:active + .slider::before {
  transform: scale(0.85);
}
.toggle input:checked:active + .slider::before {
  transform: translateX(18px) scale(0.85);
}

/* ==================================================
   FORM
   ================================================== */
.input-field {
  padding: 9px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  backdrop-filter: blur(8px);
}
.input-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.input-field::placeholder { color: var(--text-muted); }

/* ==================================================
   NEUMORPHIC SWITCH
   ================================================== */
.neu-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.neu-switch input { opacity: 0; width: 0; height: 0; }
.neu-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border-radius: 26px;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
  transition: var(--transition-smooth);
}
.neu-switch-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: linear-gradient(145deg, #2a2e40, #1a1d29);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6), -1px -1px 3px rgba(255, 255, 255, 0.06);
  transition: var(--transition-smooth);
}
.neu-switch input:checked + .neu-switch-slider {
  background: var(--accent-gradient);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4), var(--shadow-glow);
}
.neu-switch input:checked + .neu-switch-slider::before {
  transform: translateX(20px);
  background: linear-gradient(145deg, #ffffff, #c9cdf0);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.45);
}

/* ==================================================
   NEUMORPHIC SLIDER (range)
   ================================================== */
.slider-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.neu-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
  outline: none;
  cursor: pointer;
}
.neu-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #c9cdf0);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5), -1px -1px 3px rgba(255, 255, 255, 0.08);
  border: none;
  cursor: grab;
}
.neu-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff, #c9cdf0);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
  border: none;
  cursor: grab;
}
.neu-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.slider-val {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-hover);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
}

/* ==================================================
   NEUMORPHIC PRESSED INPUT
   ================================================== */
.neu-pressed {
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: linear-gradient(145deg, #0e1018, #171926);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.65), inset -2px -2px 5px rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.neu-pressed:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.65), inset -2px -2px 5px rgba(255, 255, 255, 0.03), 0 0 0 3px var(--accent-soft);
}
.neu-pressed::placeholder { color: var(--text-muted); }

/* ==================================================
   SETTING GROUP TITLE
   ================================================== */
.setting-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}

/* ==================================================
   SIDEBAR SECTION LABEL
   ================================================== */
.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 10px 12px 4px;
}

/* ==================================================
   NEUMORPHIC PROGRESS BAR
   ================================================== */
.neu-progress {
  position: relative;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.neu-progress-fill {
  height: 100%;
  border-radius: 10px;
  background: var(--accent-gradient);
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 0.4s ease;
}

/* ==================================================
   CHIPS (blacklist words)
   ================================================== */
.chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips-empty { color: var(--text-muted); font-size: 13px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.4);
}
.chip-x {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.chip-x:hover { color: #ff6b81; }
.chips-add {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ==================================================
   BADGES / PROFILE
   ================================================== */
.badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.badge-item {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 4px rgba(0, 0, 0, 0.35);
}
.profile-card { position: relative; }
.profile-banner {
  height: 120px;
  position: relative;
}
.profile-body {
  padding: 0 1.5rem 1.5rem;
  position: relative;
  text-align: center;
  margin-top: -46px;
}
.profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 4px solid var(--bg-surface);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  background: var(--bg-surface);
  object-fit: cover;
}
.profile-name {
  font-size: 20px;
  font-weight: 700;
  margin-top: 10px;
  color: #fff;
}
.economy-card { padding: 1.25rem; }
.economy-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 6px;
}
.eco-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 4px rgba(0, 0, 0, 0.35);
}
.eco-ico { font-size: 20px; }
.eco-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.eco-lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 560px) {
  .economy-stats { grid-template-columns: 1fr; }
}
.profile-tag {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.xp-wrap { max-width: 420px; margin: 0 auto; }
.xp-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.xp-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.color-input {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5);
  padding: 4px;
}

/* ==================================================
   TWO COL GRID / STATS
   ================================================== */
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 16px;
}
@media (max-width: 900px) { .two-col-grid { grid-template-columns: 1fr; } }
.stat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}
.stat-rank {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-hover);
  background: var(--accent-soft);
}
.stat-item img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
}
.stat-name {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-name small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==================================================
   VIEW HEAD
   ================================================== */
.view-head { margin-bottom: 24px; }

/* ==================================================
   SPOTIFY VIEW
   ================================================== */
.spotify-view-player {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.spotify-view-disc {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.6), -2px -2px 6px rgba(255, 255, 255, 0.03), 0 0 18px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.spotify-view-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: spinDisc 8s linear infinite;
  animation-play-state: paused;
}
.spotify-view-disc.spinning img { animation-play-state: running; }
.sv-disc-placeholder { font-size: 44px; }
.spotify-view-info { flex: 1; min-width: 220px; }
.sv-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-artist {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.sv-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.sv-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-main);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.03), 2px 2px 6px rgba(0, 0, 0, 0.4);
  transition: var(--transition-smooth);
}
.sv-btn:hover:not(:disabled) { color: var(--accent-hover); }
.sv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sv-btn.sv-play {
  width: 48px;
  height: 48px;
  color: var(--accent-hover);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-accent), var(--shadow-glow);
  font-size: 18px;
}

/* ==================================================
   COMMAND ACCORDION
   ================================================== */
.cmd-search { width: 100%; margin-bottom: 6px; }
.accordion-item { border-radius: var(--radius-sm); }
.accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: none;
  background: none;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
}
.acc-cat {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-hover);
  text-transform: capitalize;
}
.acc-count { font-size: 12px; color: var(--text-muted); }
.acc-chev {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.25s ease;
}
.accordion-item.open .acc-chev { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-item.open .accordion-body { max-height: 500px; }
.cmd-entry {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.cmd-name { font-size: 13px; font-weight: 700; color: #fff; font-family: 'JetBrains Mono', monospace; }
.cmd-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cmd-syntax { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.cmd-perms {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #f0b45e;
}

/* ==================================================
   SAVE BAR
   ================================================== */
.save-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: 18px;
}

/* ==================================================
   CREATOR CARD (Landing)
   ================================================== */
.creator-card {
  position: relative;
  margin-top: 40px;
  width: min(340px, 100%);
  padding: 30px 28px 26px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 0 22px var(--accent-glow);
  overflow: hidden;
  isolation: isolate;
}

.creator-glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}

.creator-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  margin-bottom: 10px;
  position: relative;
  box-shadow: 0 0 24px var(--accent-glow);
}

.creator-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  color: var(--accent-hover);
  margin-bottom: 8px;
}

.creator-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.creator-bio {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
  font-style: italic;
}

.creator-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.creator-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-smooth);
}
.creator-links a:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ==================================================
   SHIMMER LOADING (skeletons)
   ================================================== */
.shimmer-card {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  height: 140px;
  position: relative;
  overflow: hidden;
}

.shimmer-block {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  height: 300px;
  position: relative;
  overflow: hidden;
}

/* ==================================================
   LOADING VIEW
   ================================================== */
.loading-view {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(at 20% 20%, rgba(88, 101, 242, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 80%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
    #090a0f;
  transform: translateZ(0);
  will-change: transform, opacity;
  transition: opacity 0.35s ease;
}

.loading-view.loading-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-card {
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.05);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

.loading-text {
  font-size: 14px;
  color: var(--text-muted);
  font-family: var(--font);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==================================================
   3D TILT
   ================================================== */
[data-tilt] {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s var(--ease-out);
}
[data-tilt] > * {
  transform-style: preserve-3d;
}

/* ==================================================
   OWNER PANEL
   ================================================== */
.owner-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.owner-stat-card {
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  padding: 16px;
  text-align: center;
}
.owner-stat-value {
  font-size: 24px;
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.owner-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.owner-section {
  margin-bottom: 24px;
}
.owner-section h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.owner-guilds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.owner-guild-card {
  background: var(--bg-surface);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.owner-guild-card:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}
.owner-guild-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-surface-hover);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.owner-guild-icon img { width: 100%; height: 100%; object-fit: cover; }
.owner-guild-info { flex: 1; min-width: 0; }
.owner-guild-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-guild-detail { font-size: 11px; color: var(--text-muted); }

/* ==================================================
   SPOTIFY WIDGET
   ================================================== */
.spotify-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  left: auto;
  z-index: 50;
  max-width: min(320px, calc(100vw - 32px));
  font-family: var(--font);
  transform-origin: bottom right;
}
.spotify-widget.minimized .spotify-expanded { display: none; }
.spotify-widget:not(.minimized) .spotify-bubble { display: none; }

.spotify-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(18, 20, 29, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-glass);
  box-sizing: border-box;
  max-width: 100%;
}
.spotify-bubble:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
  transform: translateY(-2px);
}

.spotify-disc {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.spotify-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  animation: spinDisc 8s linear infinite;
  animation-play-state: paused;
}
.spotify-disc.playing img { animation-play-state: running; }
.spotify-disc-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.5;
  transition: background 0.5s;
  z-index: -1;
}

@keyframes spinDisc {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spotify-mini-info { min-width: 0; }
.spotify-mini-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.spotify-mini-artist { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }

/* Badge neón de estado de transmisión del widget (LIVE / En pausa / OFF) */
.spotify-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4), inset 0 0 8px rgba(34, 197, 94, 0.12);
}
.spotify-live-badge .spotify-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: spotifyLivePulse 1.3s ease-in-out infinite;
}
.spotify-live-badge.paused {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.32), inset 0 0 8px rgba(245, 158, 11, 0.1);
}
.spotify-live-badge.paused .spotify-live-dot { animation-play-state: paused; }
.spotify-live-badge.off {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.28);
  box-shadow: none;
}
.spotify-live-badge.off .spotify-live-dot { animation: none; opacity: 0.5; }
@keyframes spotifyLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

.spotify-expanded {
  width: min(320px, 100%);
  max-width: 100%;
  background: rgba(18, 20, 29, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-glass);
  animation: fadeSlideIn 0.35s var(--ease-out) forwards;
}

.spotify-album {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  perspective: 800px;
  cursor: pointer;
}
.spotify-album-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.15s var(--ease-out);
}
.spotify-album img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.spotify-album-glow {
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  filter: blur(16px);
  opacity: 0.4;
  transition: background 0.5s;
  z-index: -1;
}

.spotify-track-info { text-align: center; margin-bottom: 12px; }
.spotify-track-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotify-track-artist { font-size: 12px; color: var(--text-secondary); }

.spotify-progress-container { margin-bottom: 14px; }
.spotify-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 6px;
}
.spotify-progress-fill {
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 4px;
  width: 0%;
  transition: width 0.3s;
}
.spotify-progress-thumb {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.spotify-progress-bar:hover .spotify-progress-thumb { opacity: 1; }

.spotify-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.spotify-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
}
.spotify-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}
.spotify-btn:hover { color: var(--text-main); transform: scale(1.1); }
.spotify-btn:active { transform: scale(0.95); }

.spotify-btn-play {
  width: 42px;
  height: 42px;
  background: var(--accent-gradient);
  color: white;
  box-shadow: 0 4px 16px var(--accent-glow);
}
.spotify-btn-play:hover {
  filter: brightness(1.1);
  color: white;
  box-shadow: 0 6px 24px var(--accent-glow);
}

.spotify-search { position: relative; margin-bottom: 10px; }
.spotify-search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.spotify-search-input:focus { border-color: var(--accent); }
.spotify-search-input::placeholder { color: var(--text-muted); }

.spotify-search-results {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(18, 20, 29, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  display: none;
}
.spotify-search-results.active { display: block; }

.spotify-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.spotify-search-item:hover { background: var(--bg-surface-hover); }
.spotify-search-item img {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}
.spotify-search-item-info { flex: 1; min-width: 0; }
.spotify-search-item-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotify-search-item-artist { font-size: 10px; color: var(--text-muted); }

.spotify-disconnect { text-align: center; }
.spotify-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.spotify-link-btn:hover {
  border-color: #1DB954;
  color: #1DB954;
  background: rgba(29, 185, 84, 0.08);
}

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    min-height: auto;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow: visible;
  }
  .sidebar-brand { padding: 14px 16px; border: none; width: auto; }
  .sidebar-nav {
    padding: 8px;
    flex-direction: row;
    margin-left: auto;
    overflow: visible;
    max-height: none;
  }
  .nav-item { padding: 6px 10px; font-size: 12px; }
  .sidebar-footer {
    display: flex;
    align-items: center;
    margin-left: auto;
    border: none;
  }
  .sidebar-user { padding: 8px 12px; }
  .sidebar-avatar { width: 28px; height: 28px; }
  .sidebar-user-info .user-name { font-size: 12px; }
  .sidebar-user-info .user-sub { display: none; }
  .sidebar-logout { padding: 8px 12px; }

  .main {
    margin-left: 0;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    height: auto;
    overflow: visible;
  }
  .dashboard { height: auto; overflow: visible; }
  .guild-grid, .guilds-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-sm); }
  .server-header { flex-wrap: wrap; }
  .landing-card { padding: 40px 24px 28px; }
}

/* ==================================================
   NOTION / SPATIAL ANIMATIONS
   ================================================== */
/* Transiciones estilo Notion (Smooth Spring Ease) */
.notion-transition {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Efecto de borde con gradiente galáctico animado */
.border-gradient-spatial {
  position: relative;
  background: rgba(14, 16, 25, 0.75);
  border-radius: 12px;
}
.border-gradient-spatial::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 13px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(88,101,242,0.6), rgba(168,85,247,0.3), rgba(236,72,153,0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Modal y Dropdown Blur Entrance */
.blur-dropdown {
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(10, 12, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: blurSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blurSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* ==================================================
   WELCOME / PREFIX BADGE
   ================================================== */
.welcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, rgba(88,101,242,0.25), rgba(168,85,247,0.2));
  border: 1px solid var(--border-accent);
  box-shadow: var(--shadow-glow);
}
.welcome-badge code {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--accent-hover);
  background: rgba(0, 0, 0, 0.25);
  padding: 1px 7px;
  border-radius: 6px;
}
.server-prefix-badge { flex-shrink: 0; }

/* ==================================================
   DISCORD SELECT (custom channel/role picker)
   ================================================== */
.ds-select {
  position: relative;
  width: 100%;
  min-width: 220px;
  min-height: 0;
}
.ds-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.03), 2px 2px 6px rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.ds-trigger:hover { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
.ds-trigger-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  overflow: hidden;
}
.ds-chev {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.ds-select.open .ds-chev { transform: rotate(180deg); }

.ds-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  min-width: 240px;
  max-width: 340px;
  height: auto !important;
  min-height: 0;
  max-height: min(320px, calc(100vh - 24px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-sm);
  z-index: 1000;
  padding: 8px;
}
.ds-search-wrap { padding: 2px 2px 8px; }
.ds-search {
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #0e1018, #171926);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.65), inset -2px -2px 5px rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
}
.ds-search:focus { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.65), 0 0 0 2px var(--accent-soft); }
.ds-search::placeholder { color: var(--text-muted); }

.ds-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(260px, calc(100vh - 118px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.ds-item:hover { background: var(--bg-surface-hover); color: var(--text-main); }
.ds-item.selected {
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
.ds-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-channel-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.ds-channel-text { background: rgba(88, 101, 242, 0.15); color: #8b95ff; }
.ds-channel-voice { background: rgba(34, 211, 238, 0.12); font-size: 11px; }
.ds-channel-announcement { background: rgba(250, 204, 21, 0.14); color: #fde047; font-size: 11px; }
.ds-channel-forum { background: rgba(168, 85, 247, 0.15); color: #c084fc; font-size: 11px; }
.ds-role-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 8px rgba(0, 0, 0, 0.4);
}
.ds-role-members {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
}
.ds-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-hover);
  background: var(--accent-soft);
}
.ds-chip-more { color: var(--text-muted); }
.ds-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
.ds-loading, .ds-error { padding: 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
.ds-error { color: #ff6b81; }
.ds-mount { display: flex; align-items: center; justify-content: flex-end; }

@media (max-width: 720px) {
  .ds-mount { justify-content: flex-start; width: 100%; }
  .ds-select { min-width: 0; }
}

/* ==================================================
   NEKOTINA-STYLE COMMAND CATALOG
   ================================================== */
.nk-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.nk-search {
  flex: 1;
  min-width: 220px;
  padding: 12px 16px;
  font-size: 14px;
}
.nk-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 18px;
  scrollbar-width: thin;
}
.nk-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.3);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nk-tab em {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.nk-tab:hover { color: var(--text-main); }
.nk-tab.active {
  color: var(--accent-hover);
  background: var(--accent-soft);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-glow);
}
.nk-tab.active em { background: rgba(88, 101, 242, 0.25); }

.nk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.nk-card {
  padding: 16px;
  overflow: hidden;
}
.nk-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
.nk-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.nk-cmd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.25);
  padding: 4px 10px;
  border-radius: 8px;
}
.nk-alias {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 999px;
}
.nk-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 10px;
}
.nk-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.nk-opt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 6px;
}
.nk-opt.req { color: #f0b45e; background: rgba(240, 180, 94, 0.1); }
.nk-perms {
  font-size: 11px;
  font-weight: 600;
  color: #f0b45e;
  margin-bottom: 10px;
}
.nk-example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: linear-gradient(145deg, #0e1018, #171926);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6);
}
.nk-example code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #a5b4fc;
  word-break: break-all;
}
.nk-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 10px;
  border: none;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-hover);
  background: var(--accent-soft);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nk-copy:hover { box-shadow: var(--shadow-glow); filter: brightness(1.1); }
.nk-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 30px 0;
}

/* ==================================================
   SPOTIFY WIDGET — SPATIAL GLOW & DRAG
   ================================================== */
.spotify-widget.dragging {
  cursor: grabbing;
  user-select: none;
  transition: none;
}
.spotify-widget.dragging .spotify-bubble {
  transition: none;
  box-shadow: var(--shadow-glow);
}
/* Brillo espacial de la burbuja */
.spotify-bubble {
  animation: spaceSheen 6s ease-in-out infinite;
}
@keyframes spaceSheen {
  0%, 100% {
    border-color: rgba(88, 101, 242, 0.35);
    box-shadow: 0 0 18px rgba(88, 101, 242, 0.25), var(--shadow-glass);
  }
  50% {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 26px rgba(168, 85, 247, 0.45), 0 0 40px rgba(236, 72, 153, 0.2), var(--shadow-glass);
  }
}
/* Pulso neón en la portada cuando suena */
.spotify-disc.playing .spotify-disc-glow {
  animation: neonPulse 1.6s ease-in-out infinite;
}
@keyframes neonPulse {
  0%, 100% {
    opacity: 0.35;
    background: rgba(29, 185, 84, 0.55);
  }
  50% {
    opacity: 0.85;
    background: rgba(29, 185, 84, 0.85);
  }
}
.spotify-album-inner:hover .spotify-album-glow {
  animation: neonPulse 1.6s ease-in-out infinite;
}
.spotify-album-glow { transition: opacity 0.4s ease; }

/* ==================================================
   LIQUID THEME ENGINE — Decrem.lol system
   El tema se aplica con data-theme en <html>.
   :root = tema por defecto (crimson).
   ================================================== */
:root,
[data-theme="crimson"] {
  --bg-main: #0a0407;
  --accent-color: #e63956;
  --accent-glow: rgba(230, 57, 86, 0.35);
  --sidebar-border: rgba(230, 57, 86, 0.25);
  --card-bg: rgba(20, 8, 14, 0.65);
  --liquid-wave-1: #3b0a13;
  --liquid-wave-2: #801224;
  --accent-primary: #e63956;
  --primary: #e63956;
  --secondary: #801224;
  --accent: #e63956;
  --accent-hover: #ff5a77;
  --accent-soft: rgba(230, 57, 86, 0.14);
  --accent-gradient: linear-gradient(135deg, #e63956 0%, #801224 60%, #3b0a13 100%);
  --border-accent: rgba(230, 57, 86, 0.3);
  --bg-surface: rgba(20, 8, 14, 0.65);
  --bg-surface-hover: rgba(38, 12, 22, 0.78);
  --bg-card: rgba(20, 8, 14, 0.72);
  --bg-card-hover: rgba(38, 12, 22, 0.85);
  --border-active: rgba(230, 57, 86, 0.5);
}

[data-theme="violet"] {
  --bg-main: #07040a;
  --accent-color: #a855f7;
  --accent-glow: rgba(168, 85, 247, 0.35);
  --sidebar-border: rgba(168, 85, 247, 0.25);
  --card-bg: rgba(16, 8, 24, 0.65);
  --liquid-wave-1: #220a3b;
  --liquid-wave-2: #521280;
  --accent-primary: #a855f7;
  --primary: #a855f7;
  --secondary: #521280;
  --accent: #a855f7;
  --accent-hover: #c084fc;
  --accent-soft: rgba(168, 85, 247, 0.14);
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #521280 60%, #220a3b 100%);
  --border-accent: rgba(168, 85, 247, 0.3);
  --bg-surface: rgba(16, 8, 24, 0.65);
  --bg-surface-hover: rgba(30, 12, 44, 0.78);
  --bg-card: rgba(16, 8, 24, 0.72);
  --bg-card-hover: rgba(30, 12, 44, 0.85);
  --border-active: rgba(168, 85, 247, 0.5);
}

[data-theme="cyan"] {
  --bg-main: #03080a;
  --accent-color: #06b6d4;
  --accent-glow: rgba(6, 182, 212, 0.35);
  --sidebar-border: rgba(6, 182, 212, 0.25);
  --card-bg: rgba(6, 18, 24, 0.65);
  --liquid-wave-1: #0a253b;
  --liquid-wave-2: #125580;
  --accent-primary: #06b6d4;
  --primary: #06b6d4;
  --secondary: #125580;
  --accent: #06b6d4;
  --accent-hover: #22d3ee;
  --accent-soft: rgba(6, 182, 212, 0.14);
  --accent-gradient: linear-gradient(135deg, #06b6d4 0%, #125580 60%, #0a253b 100%);
  --border-accent: rgba(6, 182, 212, 0.3);
  --bg-surface: rgba(6, 18, 24, 0.65);
  --bg-surface-hover: rgba(10, 30, 40, 0.78);
  --bg-card: rgba(6, 18, 24, 0.72);
  --bg-card-hover: rgba(10, 30, 40, 0.85);
  --border-active: rgba(6, 182, 212, 0.5);
}

[data-theme="emerald"] {
  --bg-main: #030a07;
  --accent-color: #10b981;
  --accent-glow: rgba(16, 185, 129, 0.35);
  --sidebar-border: rgba(16, 185, 129, 0.25);
  --card-bg: rgba(5, 18, 13, 0.65);
  --liquid-wave-1: #062d21;
  --liquid-wave-2: #0f8057;
  --accent-primary: #10b981;
  --primary: #10b981;
  --secondary: #0f8057;
  --accent: #10b981;
  --accent-hover: #34d399;
  --accent-soft: rgba(16, 185, 129, 0.14);
  --accent-gradient: linear-gradient(135deg, #10b981 0%, #0f8057 60%, #062d21 100%);
  --border-accent: rgba(16, 185, 129, 0.3);
  --bg-surface: rgba(5, 18, 13, 0.65);
  --bg-surface-hover: rgba(8, 30, 21, 0.78);
  --bg-card: rgba(5, 18, 13, 0.72);
  --bg-card-hover: rgba(8, 30, 21, 0.85);
  --border-active: rgba(16, 185, 129, 0.5);
}

[data-theme="amber"] {
  --bg-main: #0a0703;
  --accent-color: #f59e0b;
  --accent-glow: rgba(245, 158, 11, 0.35);
  --sidebar-border: rgba(245, 158, 11, 0.25);
  --card-bg: rgba(20, 14, 6, 0.65);
  --liquid-wave-1: #2d1c06;
  --liquid-wave-2: #80540f;
  --accent-primary: #f59e0b;
  --primary: #f59e0b;
  --secondary: #80540f;
  --accent: #f59e0b;
  --accent-hover: #fbbf24;
  --accent-soft: rgba(245, 158, 11, 0.14);
  --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #80540f 60%, #2d1c06 100%);
  --border-accent: rgba(245, 158, 11, 0.3);
  --bg-surface: rgba(20, 14, 6, 0.65);
  --bg-surface-hover: rgba(34, 24, 10, 0.78);
  --bg-card: rgba(20, 14, 6, 0.72);
  --bg-card-hover: rgba(34, 24, 10, 0.85);
  --border-active: rgba(245, 158, 11, 0.5);
}

[data-theme="sunset"] {
  --bg-main: #0a0406;
  --accent-color: #fb7185;
  --accent-glow: rgba(251, 113, 133, 0.35);
  --sidebar-border: rgba(251, 113, 133, 0.25);
  --card-bg: rgba(22, 8, 12, 0.65);
  --liquid-wave-1: #2d0a16;
  --liquid-wave-2: #805024;
  --accent-primary: #fb7185;
  --primary: #fb7185;
  --secondary: #805024;
  --accent: #fb7185;
  --accent-hover: #fda4af;
  --accent-soft: rgba(251, 113, 133, 0.14);
  --accent-gradient: linear-gradient(135deg, #fb923c 0%, #e11d48 55%, #2d0a16 100%);
  --border-accent: rgba(251, 113, 133, 0.3);
  --bg-surface: rgba(22, 8, 12, 0.65);
  --bg-surface-hover: rgba(36, 12, 18, 0.78);
  --bg-card: rgba(22, 8, 12, 0.72);
  --bg-card-hover: rgba(36, 12, 18, 0.85);
  --border-active: rgba(251, 113, 133, 0.5);
}

[data-theme="ice"] {
  --bg-main: #04080c;
  --accent-color: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.35);
  --sidebar-border: rgba(56, 189, 248, 0.25);
  --card-bg: rgba(6, 18, 26, 0.65);
  --liquid-wave-1: #0a1628;
  --liquid-wave-2: #145580;
  --accent-primary: #38bdf8;
  --primary: #38bdf8;
  --secondary: #145580;
  --accent: #38bdf8;
  --accent-hover: #7dd3fc;
  --accent-soft: rgba(56, 189, 248, 0.14);
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #145580 60%, #0a1628 100%);
  --border-accent: rgba(56, 189, 248, 0.3);
  --bg-surface: rgba(6, 18, 26, 0.65);
  --bg-surface-hover: rgba(10, 30, 42, 0.78);
  --bg-card: rgba(6, 18, 26, 0.72);
  --bg-card-hover: rgba(10, 30, 42, 0.85);
  --border-active: rgba(56, 189, 248, 0.5);
}

html { color-scheme: dark; }

/* Transición suave al cambiar de tema */
body,
.sidebar,
.landing-card,
.skeuo-card,
.setting-group,
.nk-card,
.btn {
  transition: background-color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}

/* ==================================================
   LIQUID BACKGROUND WAVES
   ================================================== */
.liquid-bg-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 38vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.6;
}
.liquid-wave {
  position: absolute;
  bottom: -40%;
  left: -50%;
  width: 200%;
  height: 90%;
  border-radius: 44% 56% 0 0 / 60% 52% 0 0;
  filter: blur(34px);
  will-change: transform;
}
.liquid-wave.w1 { background: var(--custom-primary, var(--liquid-wave-1)); animation: waveFlow 17s ease-in-out infinite alternate; }
.liquid-wave.w2 { background: var(--custom-secondary, var(--liquid-wave-2)); height: 70%; border-radius: 58% 42% 0 0 / 48% 60% 0 0; opacity: 0.8; animation: waveFlow 23s ease-in-out infinite alternate-reverse; }
.liquid-wave.w3 { background: var(--custom-accent, var(--accent-color)); height: 52%; opacity: 0.18; border-radius: 50% 50% 0 0 / 55% 55% 0 0; animation: waveFlow 29s ease-in-out infinite alternate; }

@keyframes waveFlow {
  0%   { transform: translateX(0) scaleY(1) rotate(0deg); }
  50%  { transform: translateX(-18%) scaleY(1.06) rotate(1.5deg); }
  100% { transform: translateX(-36%) scaleY(1) rotate(-1deg); }
}

/* ==================================================
   LIQUID BLOBS — blobs translúcidos que siguen al cursor
   (activados por data-design="liquid" vía liquid-blobs.js)
   ================================================== */
.liquid-blobs {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  /* el JS aplica 'translate' por blob; el CSS solo alinea el conjunto */
}
.liquid-blobs.on { opacity: 1; }
.liquid-blob {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  filter: blur(90px) saturate(1.25);
  will-change: transform, translate;
}
.liquid-blob.b0 { width: 42vw; height: 42vw; left: -8vw; top: -12vh; background: radial-gradient(circle at 30% 30%, var(--accent-color) 0%, transparent 72%); opacity: 0.5; animation: blobFloat 22s ease-in-out infinite alternate; }
.liquid-blob.b1 { width: 36vw; height: 36vw; right: -6vw; top: 4vh; background: radial-gradient(circle at 60% 40%, var(--custom-primary, var(--liquid-wave-1)) 0%, transparent 72%); opacity: 0.55; animation: blobFloat 27s ease-in-out infinite alternate-reverse; }
.liquid-blob.b2 { width: 30vw; height: 30vw; left: 26vw; top: 26vh; background: radial-gradient(circle at 50% 50%, var(--custom-secondary, var(--liquid-wave-2)) 0%, transparent 72%); opacity: 0.5; animation: blobFloat 19s ease-in-out infinite alternate; }
.liquid-blob.b3 { width: 26vw; height: 26vw; right: 12vw; top: 52vh; background: radial-gradient(circle at 40% 60%, var(--custom-accent, var(--accent-color)) 0%, transparent 72%); opacity: 0.38; animation: blobFloat 31s ease-in-out infinite alternate-reverse; }
.liquid-blob.b4 { width: 20vw; height: 20vw; left: 10vw; top: 62vh; background: radial-gradient(circle at 50% 50%, var(--custom-primary, var(--liquid-wave-1)) 0%, transparent 72%); opacity: 0.4; animation: blobFloat 24s ease-in-out infinite alternate; }

@keyframes blobFloat {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(4vw, -3vh, 0) scale(1.08); }
  66%  { transform: translate3d(-3vw, 2vh, 0) scale(0.94); }
  100% { transform: translate3d(2vw, 4vh, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-blobs .liquid-blob { animation: none !important; }
}

/* ==================================================
   SIDEBAR DECREM
   ================================================== */
.sidebar {
  width: 260px;
  background: var(--bg-main);
  border-right: 1px solid var(--sidebar-border);
}
.main { margin-left: 260px; }

.sidebar-brand { font-size: 16px; letter-spacing: -0.3px; }

.nav-item {
  gap: 12px;
  padding: 0.8rem 1.1rem;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.25s ease;
}
.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--sidebar-border);
  box-shadow: inset 0 0 12px var(--accent-glow), 0 0 18px var(--accent-glow);
}

.nav-section-label {
  padding: 12px 12px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

/* Utilidades Decrem (selectores alternativos) */
.sidebar-decrem {
  width: 260px;
  background: var(--bg-main);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.sidebar-item:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.sidebar-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--sidebar-border);
  box-shadow: inset 0 0 12px var(--accent-glow);
}

/* ==================================================
   LANDING DECREM
   ================================================== */
.dc-landing {
  --landing-accent: #79dce8;
  --landing-accent-bright: #a9f1fb;
  --landing-accent-rgb: 121, 220, 232;
  --landing-accent-border: rgba(121, 220, 232, 0.24);
  --landing-accent-soft: rgba(121, 220, 232, 0.11);
  --landing-accent-glow: rgba(57, 185, 213, 0.18);
  position: relative;
  isolation: isolate;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  overflow: visible;
  background: transparent;
}
.dc-landing[data-planet-theme="venus"] {
  --landing-accent: #f2a16f;
  --landing-accent-bright: #ffd0a8;
  --landing-accent-rgb: 242, 161, 111;
  --landing-accent-border: rgba(242, 161, 111, 0.25);
  --landing-accent-soft: rgba(242, 161, 111, 0.12);
  --landing-accent-glow: rgba(242, 132, 86, 0.2);
}
.dc-landing[data-planet-theme="mars"] {
  --landing-accent: #ff6b63;
  --landing-accent-bright: #ffb0a4;
  --landing-accent-rgb: 255, 107, 99;
  --landing-accent-border: rgba(255, 107, 99, 0.25);
  --landing-accent-soft: rgba(255, 107, 99, 0.12);
  --landing-accent-glow: rgba(255, 83, 72, 0.2);
}
.dc-landing > .stage,
.dc-landing > .dc-section,
.dc-landing > .dc-next-step { flex: 0 0 auto; }
.dc-topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - 32px));
  z-index: 60;
}
.dc-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 9px 12px 9px 20px;
  background: rgba(12, 10, 16, 0.55);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.dc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: #fff;
}
.dc-brand-logo { font-size: 22px; filter: drop-shadow(0 0 12px var(--accent-glow)); }
.dc-nav { display: flex; align-items: center; gap: 4px; }
.dc-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.dc-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.dc-dash-btn {
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 999px;
  padding: 9px 18px;
  box-shadow: 0 4px 18px var(--accent-glow);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

/* Menú móvil (CSS puro) */
.dc-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
}
.dc-mobile-toggle { display: none; }
.dc-mobile-nav {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100vw - 32px));
  flex-direction: column;
  padding: 10px;
  border-radius: 18px;
  background: rgba(12, 10, 16, 0.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.dc-mobile-toggle:checked ~ .dc-mobile-nav {
  display: flex;
}
.dc-mobile-nav a {
  padding: 13px 16px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition-smooth);
}
.dc-mobile-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.dc-topbar { position: fixed; }

/* En desktop el dropdown móvil está oculto, así que recortamos cualquier
   hijo que sobresalga del borde redondeado de la cápsula del navbar. */
@media (min-width: 721px) {
  .dc-topbar-inner { overflow: hidden; }
}

.dc-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 130px 24px 60px;
  min-height: 100vh;
}
.dc-logo {
  font-size: 88px;
  animation: dcFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 0 32px var(--accent-glow));
}
@keyframes dcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.dc-title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1.05;
  color: #fff;
}
.dc-title .dc-neon {
  background: linear-gradient(90deg, var(--accent-color), #ffffff, var(--accent-color));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: neonShift 4s linear infinite;
  filter: drop-shadow(0 0 34px var(--accent-glow));
}
@keyframes neonShift {
  to { background-position: 200% center; }
}
.dc-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 640px;
  margin: 18px auto 34px;
  font-weight: 500;
}
.dc-capsule {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
}
.dc-capsule-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  border: none;
  border-radius: 999px;
  padding: 13px 30px;
  background: linear-gradient(135deg, var(--accent-color), var(--neon-violet, #8b5cf6));
  color: #fff;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  flex-shrink: 0;
}
.dc-capsule-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 34px rgba(139, 92, 246, 0.6), 0 8px 30px rgba(0, 0, 0, 0.4);
  filter: brightness(1.08);
}
.dc-capsule-btn:active { transform: scale(0.98); }
.dc-discord-icon { flex-shrink: 0; }

@media (max-width: 720px) {
  .dc-nav { display: none; }
  .dc-burger { display: flex; }
  .dc-topbar-inner { padding: 8px 10px 8px 16px; }
  .dc-hero { padding: 120px 18px 48px; }
  .dc-logo { font-size: 64px; }
}

/* ==================================================
   LANDING — SERVICIOS DEL BOT y DERECHOS/TÉRMINOS
   ================================================== */
.dc-section {
  position: relative;
  z-index: 1;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 70px 0 20px;
  scroll-margin-top: 90px;
  font-family: 'Hanken Grotesk', var(--main-font), sans-serif;
}
.dc-section-head {
  text-align: center;
  margin-bottom: 42px;
}
.dc-section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -1px;
  color: #fff;
  margin: 14px 0 10px;
}
.dc-section-title .dc-neon {
  background: linear-gradient(90deg, var(--landing-accent), #ffffff, var(--landing-accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: neonShift 4s linear infinite;
  filter: drop-shadow(0 0 24px var(--landing-accent-glow));
}
.dc-section-sub {
  color: rgba(231, 242, 255, 0.76);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  max-width: 640px;
  margin: 0 auto;
  font-weight: 500;
}
.dc-landing .welcome-badge {
  border: 1px solid var(--landing-accent-border);
  background: rgba(var(--landing-accent-rgb), 0.1);
  color: var(--landing-accent-bright);
  box-shadow: 0 0 22px var(--landing-accent-soft);
}

/* Grid de Servicios */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.servicio-card {
  position: relative;
  border-radius: 20px;
  padding: 26px 22px;
  background: linear-gradient(145deg, rgba(5, 24, 43, 0.88), rgba(4, 13, 27, 0.78));
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid var(--landing-accent-border);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.servicio-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, var(--landing-accent-glow) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.servicio-card:hover {
  transform: translateY(-6px);
  border-color: var(--landing-accent);
  box-shadow: 0 16px 44px var(--landing-accent-glow);
}
.servicio-card:hover::before { opacity: 1; }
.servicio-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  border-radius: 14px;
  background: var(--landing-accent-soft);
  border: 1px solid var(--landing-accent-border);
  color: var(--landing-accent-bright);
  box-shadow: 0 0 20px var(--landing-accent-glow);
  margin-bottom: 18px;
}
.servicio-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f4fbff;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}
.servicio-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(225, 240, 250, 0.72);
  margin: 0;
}

/* Grid de Términos y Derechos */
.terminos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.termino-card {
  border-radius: 20px;
  padding: 26px 24px;
  background: linear-gradient(145deg, rgba(5, 24, 43, 0.88), rgba(4, 13, 27, 0.78));
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid var(--landing-accent-border);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.termino-card:hover {
  transform: translateY(-4px);
  border-color: var(--landing-accent);
  box-shadow: 0 16px 44px var(--landing-accent-glow);
}
.termino-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.termino-num {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--landing-accent-soft);
  color: var(--landing-accent-bright);
  border: 1px solid var(--landing-accent-border);
}
.termino-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.2px;
  margin: 0;
}
.termino-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.termino-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(225, 240, 250, 0.78);
}
.termino-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(45, 212, 191, 0.14);
  color: #2dd4bf;
  border: 1px solid rgba(45, 212, 191, 0.4);
}
.termino-x {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}

.dc-creator-section { padding-bottom: 76px; }
.dc-creator-card {
  width: min(620px, 100%);
  margin: 0 auto;
  padding: 32px 28px;
  border: 1px solid var(--landing-accent-border);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(5, 24, 43, 0.9), rgba(4, 13, 27, 0.82));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  text-align: center;
}
.dc-creator-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border: 1px solid var(--landing-accent-border);
  border-radius: 18px;
  background: var(--landing-accent-soft);
  color: var(--landing-accent-bright);
  box-shadow: 0 0 22px var(--landing-accent-glow);
}
.dc-creator-mark svg { width: 30px; height: 30px; }
.dc-creator-card h3 { margin: 0 0 10px; color: #fff; font-size: 1.25rem; }
.dc-creator-card p {
  max-width: 460px;
  margin: 0 auto;
  color: rgba(225, 240, 250, 0.76);
  line-height: 1.6;
}
.dc-creator-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.dc-creator-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.dc-creator-actions a:hover,
.dc-creator-actions a:focus-visible {
  border-color: var(--landing-accent);
  background: rgba(255, 255, 255, 0.08);
}
.dc-creator-actions a:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 3px; }

.dc-next-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto 76px;
  padding: 30px clamp(22px, 5vw, 56px);
  border: 1px solid var(--landing-accent-border);
  border-radius: 24px;
  background: linear-gradient(115deg, var(--landing-accent-soft), rgba(5, 26, 45, 0.84) 58%, rgba(4, 13, 27, 0.82));
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.18);
}
.dc-next-step h2 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.8px;
}
.dc-next-step h2 .dc-neon {
  background: linear-gradient(90deg, var(--landing-accent), #fff, var(--landing-accent));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.dc-next-step p { color: rgba(255, 255, 255, 0.66); }
.dc-next-step-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
}
.dc-next-step-actions a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.dc-next-step-actions a:hover { transform: translateY(-2px); }
.dc-next-step-actions .dc-next-step-primary {
  border-color: var(--landing-accent);
  background: linear-gradient(180deg, var(--landing-accent-bright), var(--landing-accent));
  color: #071727;
  box-shadow: 0 6px 20px var(--landing-accent-glow);
}
.dc-next-step-actions .dc-next-step-secondary { background: rgba(255, 255, 255, 0.04); }
.dc-next-step-actions a:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; }

.dc-footer {
  display: none !important;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(4, 16, 31, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dc-footer-inner,
.dc-footer-bottom {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}
.dc-footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 30px 0;
}
.dc-footer-brand {
  display: inline-flex;
  flex-direction: column;
  justify-self: start;
  gap: 5px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-decoration: none;
}
.dc-footer-brand i { color: var(--landing-accent); font-style: normal; }
.dc-footer-brand span,
.dc-footer-support {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
}
.dc-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}
.dc-footer-nav a,
.dc-footer-bottom a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.dc-footer-nav a:hover,
.dc-footer-bottom a:hover,
.dc-footer-nav a:focus-visible,
.dc-footer-bottom a:focus-visible { color: #fff; }
.dc-footer-support {
  justify-self: end;
  text-align: right;
  text-decoration: none;
}
.dc-footer-support span {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}
.dc-footer-support span span { display: inline; color: var(--landing-accent); }
.dc-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
}
.dc-footer a:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 4px; }

@media (max-width: 720px) {
  .dc-section { padding: 60px 0 16px; }
  .dc-section-head { margin-bottom: 30px; }
  .dc-creator-card { padding: 26px 20px; }
  .dc-next-step { align-items: flex-start; flex-direction: column; margin-bottom: 56px; }
  .dc-next-step-actions { width: 100%; }
  .dc-next-step-actions a { flex: 1 1 150px; }
  .dc-footer-inner { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .dc-footer-brand { grid-column: 1 / -1; }
  .dc-footer-nav { justify-content: flex-start; flex-direction: column; gap: 12px; }
  .dc-footer-support { align-self: end; }
  .dc-footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* ==================================================
   SETTINGS — Theme selector / bot panel / docs
   ================================================== */
.settings-themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.theme-card {
  position: relative;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition-smooth);
  text-align: left;
  color: var(--text-main);
}
.theme-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); }
.theme-card.active { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.theme-swatch {
  height: 72px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, var(--sw1), var(--sw2));
}
.theme-card[data-theme="crimson"] .theme-swatch { --sw1: #e63956; --sw2: #3b0a13; }
.theme-card[data-theme="violet"]  .theme-swatch { --sw1: #a855f7; --sw2: #220a3b; }
.theme-card[data-theme="cyan"]    .theme-swatch { --sw1: #06b6d4; --sw2: #0a253b; }
.theme-card[data-theme="emerald"] .theme-swatch { --sw1: #10b981; --sw2: #062d21; }
.theme-card[data-theme="amber"]   .theme-swatch { --sw1: #f59e0b; --sw2: #2d1c06; }
.theme-card[data-theme="sunset"]  .theme-swatch { --sw1: #fb923c; --sw2: #2d0a16; }
.theme-card[data-theme="ice"]     .theme-swatch { --sw1: #38bdf8; --sw2: #0a1628; }
.theme-name { font-weight: 700; font-size: 14px; }
.theme-desc { font-size: 12px; color: var(--text-muted); }

/* ==================================================
   ANIMATED ICONS — Iconos vectoriales animados (an-icon)
   Reemplazo definitivo de los emojis clásicos en la UI.
   El <span class="an-icon"> forja el SVG (an-svg) y aquí viven
   las micro-animaciones: spin (engranajes), pulse (notificaciones),
   float (seguridad), shine (premios), breathe (música), orbit (globo).
   ================================================== */
.an-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--an-size, 18px);
  height: var(--an-size, 18px);
  color: currentColor;
  line-height: 0;
  vertical-align: -0.18em;
  flex-shrink: 0;
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.an-icon .an-svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 50%;
}
.an-icon:hover {
  transform: scale(1.14);
  filter: drop-shadow(0 0 6px var(--accent-glow, rgba(99, 102, 241, 0.35)));
}
.an-icon:active { transform: scale(0.94); }

@keyframes anSpin { to { transform: rotate(360deg); } }
@keyframes anPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.16); opacity: 1; }
}
@keyframes anFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px var(--accent-glow, rgba(99, 102, 241, 0.35))); }
  50% { transform: translateY(-3px); filter: drop-shadow(0 0 9px var(--accent-glow, rgba(99, 102, 241, 0.6))); }
}
@keyframes anShine {
  0%, 100% { filter: drop-shadow(0 0 2px currentColor); opacity: 0.8; }
  50% { filter: drop-shadow(0 0 10px currentColor); opacity: 1; transform: scale(1.06); }
}
@keyframes anBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes anOrbit { to { transform: rotate(360deg); } }

.an-spin .an-svg { animation: anSpin 12s linear infinite; }
.an-pulse .an-svg { animation: anPulse 2.4s var(--ease-out) infinite; }
.an-float .an-svg { animation: anFloat 3.8s ease-in-out infinite; }
.an-shine .an-svg { animation: anShine 2.8s ease-in-out infinite; }
.an-breathe .an-svg { animation: anBreathe 3.6s ease-in-out infinite; }
.an-orbit .an-svg { animation: anOrbit 9s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .an-icon .an-svg { animation: none !important; }
  .an-icon { transition: none; }
}

/* ==================================================
   THEME STUDIO — Design Modes (liquid / galaxy / minimal)
   data-design en <html> alterna las capas de fondo.
   ================================================== */
.design-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.design-card {
  position: relative;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition-smooth);
  text-align: left;
  color: var(--text-main);
}
.design-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); }
.design-card.active { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.design-preview {
  height: 72px;
  border-radius: 12px;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-surface) 100%);
}
.design-preview-liquid {
  background:
    radial-gradient(circle at 30% 60%, var(--custom-secondary, var(--liquid-wave-2)) 0%, transparent 55%),
    radial-gradient(circle at 70% 30%, var(--custom-primary, var(--liquid-wave-1)) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-main) 0%, var(--bg-surface) 100%);
}
.design-preview-galaxy {
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.4) 0 1.5px, transparent 2px),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 45% 55%, var(--accent-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-main) 0%, var(--bg-surface) 100%);
}
.design-preview-minimal {
  background: linear-gradient(180deg, var(--bg-main) 0%, var(--bg-surface) 100%);
}
.design-preview-minimal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
}
.design-name { font-weight: 700; font-size: 14px; }
.design-desc { font-size: 12px; color: var(--text-muted); }

/* ==================================================
   COLORES PERSONALIZADOS — mezcla del fondo líquido/difuminado
   Visible solo con los modos interactivos (Líquido / Espacio Profundo).
   ================================================== */
.custom-colors-panel {
  display: none;
  margin-top: 20px;
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed var(--border-accent);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  animation: arcFadeInUp 0.4s var(--ease-out) both;
}
[data-design="liquid"] .custom-colors-panel,
[data-design="deep-space"] .custom-colors-panel { display: block; }

.custom-colors-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.custom-colors-title { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--text-main); }
.custom-colors-desc { margin: 0; font-size: 12px; color: var(--text-muted); max-width: 540px; line-height: 1.45; }

.custom-reset {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 7px 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  white-space: nowrap;
}
.custom-reset:hover { color: var(--text-main); border-color: var(--border-accent); background: rgba(255, 255, 255, 0.08); }

.custom-pickers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.custom-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  transition: var(--transition-smooth);
}
.custom-picker:hover { border-color: var(--border-accent); }
.custom-picker-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.custom-picker-input {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}
.custom-picker-input::-webkit-color-swatch-wrapper { padding: 2px; }
.custom-picker-input::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; }
.custom-picker-input::-moz-color-swatch { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; }
.custom-picker-hex {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.custom-presets-row { display: flex; flex-direction: column; gap: 8px; }
.custom-presets-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.custom-presets { display: flex; flex-wrap: wrap; gap: 10px; }
.custom-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(90deg, var(--pp), var(--ps) 55%, var(--pa));
  color: #fff;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: var(--transition-smooth);
}
.custom-preset:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.custom-preset.active { border-color: #fff; box-shadow: 0 0 0 3px var(--accent-glow); }
.custom-preset-name { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

@media (max-width: 640px) {
  .custom-pickers { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-colors-panel { animation: none; }
}

/* Galaxia: oculta las ondas líquidas */
[data-design="galaxy"] .liquid-bg-container { display: none; }

/* Minimal: fondo limpio, sin galaxia ni ondas */
[data-design="minimal"] .liquid-bg-container,
[data-design="minimal"] .galaxy-bg-layer { display: none !important; }
[data-design="minimal"] body { background: var(--bg-main); }

.bot-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) { .bot-form-grid { grid-template-columns: 1fr; } }
.bot-avatar-preview {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: cover;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
}

.docs-manager-search {
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--sidebar-border);
  background: var(--bg-card);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13.5px;
  outline: none;
  margin-bottom: 16px;
}
.docs-manager-search:focus { box-shadow: 0 0 0 2px var(--accent-glow); }

/* ==================================================
   SIDEBAR CATEGORÍAS COLAPSABLES
   ================================================== */
.nav-cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  margin-top: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-cat-toggle:hover { color: var(--text-secondary); }
.nav-cat-toggle .cat-chevron { transition: transform 0.25s ease; }
.nav-cat-toggle.collapsed .cat-chevron { transform: rotate(-90deg); }
.nav-cat { display: block; }

/* ==================================================
   FORM GROUP (campos en grid de 2 columnas)
   ================================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-group .form-static {
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 0;
}

/* Selects nativos galácticos */
select.input-field {
  appearance: none;
  cursor: pointer;
  background: #131728;
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #fff;
  padding: 10px 34px 10px 14px;
  border-radius: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a3b3'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
select.input-field:focus {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* ==================================================
   FILE DROP (avatar del bot)
   ================================================== */
.file-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px dashed rgba(168, 85, 247, 0.35);
  border-radius: 14px;
  background: rgba(19, 23, 40, 0.6);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.file-drop:hover {
  border-color: var(--accent);
  background: rgba(168, 85, 247, 0.08);
}
.file-drop .bot-avatar-preview {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid var(--border-accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.file-drop-info { display: flex; flex-direction: column; gap: 3px; }
.file-drop-info strong { font-size: 13px; color: var(--text-main); }
.file-drop-info small { font-size: 12px; color: var(--text-muted); }

/* ==================================================
   GALAXY HERO (dashboard de servidor)
   ================================================== */
.galaxy-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(168, 85, 247, 0.28), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(34, 211, 238, 0.16), transparent 55%),
    linear-gradient(160deg, #0d1020, #12162b);
  border: 1px solid var(--border-accent);
  isolation: isolate;
}
.galaxy-hero.has-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--hero-banner) center/cover no-repeat;
  filter: blur(2px);
}
.galaxy-hero.has-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 160% at 50% 0%, rgba(13, 16, 32, 0.25), rgba(13, 16, 32, 0.88));
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 80% at 50% 120%, transparent, rgba(11, 13, 23, 0.55));
}
.hero-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-avatar {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #1a1e33, #0f1222);
  border: 2px solid var(--border-accent);
  box-shadow: 0 0 22px var(--accent-glow), inset 0 0 14px rgba(168, 85, 247, 0.25);
  overflow: hidden;
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hero-text { min-width: 0; }
.hero-text h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, #fff, var(--accent-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--text-main);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(19, 23, 40, 0.75);
  border: 1px solid var(--border-subtle);
}
.hero-badge svg { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }

.capsule-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.capsule-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-accent);
  background: linear-gradient(145deg, #1a1e33, #12162b);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.capsule-btn svg { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.capsule-btn:hover {
  transform: translateY(-2px);
  background: var(--accent-soft);
  box-shadow: 0 8px 22px rgba(168, 85, 247, 0.28);
}

/* ==================================================
   HERO STATS GRID
   ================================================== */
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 16px;
}
@media (max-width: 860px) { .hero-stats-grid { grid-template-columns: 1fr; } }
.hero-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #141829, #0e1120);
  border: 1px solid var(--border-subtle);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s;
}
.hero-stat-card:hover { border-color: var(--border-accent); }
.hero-stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-accent), 0 0 14px var(--accent-glow);
}
.hero-stat-icon svg { filter: drop-shadow(0 0 5px var(--accent-glow)); }
.hero-stat-num {
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.15;
}
.hero-stat-num small {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 2px;
}
.hero-stat-num span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 3px;
}

/* ==================================================
   SPOTIFY: BUSCADOR
   ================================================== */
.music-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.music-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}
.music-search-input {
  padding: 10px 12px 10px 38px;
  background: #131728;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 12px;
  color: #fff;
}
.music-search-input:focus {
  border-color: rgba(168, 85, 247, 0.7);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}

/* ==================================================
   TRACK CARD
   ================================================== */
.track-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #141829, #0e1120);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.track-card:hover {
  border-color: var(--border-accent);
  box-shadow: 0 6px 18px rgba(168, 85, 247, 0.14);
}
.track-cover {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
}
.track-cover img { width: 100%; height: 100%; object-fit: cover; }
.track-cover-ph { font-size: 24px; }
.track-info { flex: 1; min-width: 0; }
.track-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track-artist {
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.track-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.track-meta a { color: var(--accent-hover); text-decoration: none; }
.track-meta a:hover { text-decoration: underline; }
.track-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.track-actions .btn { white-space: nowrap; }
.track-play { background: linear-gradient(135deg, #1db954, #179443); color: #fff; border: none; }
.track-play:hover { filter: brightness(1.1); box-shadow: 0 0 14px rgba(29, 185, 84, 0.45); }
.track-save.saved { background: rgba(34, 197, 94, 0.16); color: #4ade80; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35); }

/* ==================================================
   LYRICS PANEL
   ================================================== */
.lyrics-panel {
  margin-top: 10px;
  border-radius: var(--radius-md);
  background: rgba(19, 23, 40, 0.6);
  border: 1px solid var(--border-subtle);
  padding: 4px;
  overflow: hidden;
}
.lyrics-inner {
  max-height: 300px;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}
.lyrics-inner::-webkit-scrollbar { width: 6px; }
.lyrics-inner::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 3px; }
.lyric-line {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.lyric-line:hover { color: var(--text-main); }

/* ==================================================
   EMPTY STATE
   ================================================== */
.empty-state {
  margin-top: 14px;
  padding: 22px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
}

/* ==================================================
   COMANDOS DE MÚSICA (vista Spotify global)
   ================================================== */
.music-commands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 860px) { .music-commands-grid { grid-template-columns: 1fr; } }
.music-cmd {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #141829, #0e1120);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s, transform 0.2s;
}
.music-cmd:hover { border-color: var(--border-accent); transform: translateY(-1px); }
.music-cmd-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-accent), 0 0 12px var(--accent-glow);
}
.music-cmd-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.music-cmd-body code {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-hover);
  background: rgba(168, 85, 247, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  width: max-content;
}
.music-cmd-body span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

/* ==================================================
   VISTA MÚSICA DEL SERVIDOR
   ================================================== */
.music-cmds-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(168, 85, 247, 0.2), transparent 60%),
    linear-gradient(150deg, #141829, #0e1120);
  border: 1px solid var(--border-accent);
  margin-bottom: 16px;
}
.music-cmds-intro-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-accent), 0 0 18px var(--accent-glow);
}
.music-cmds-intro strong { display: block; font-size: 15px; color: var(--text-main); }
.music-cmds-intro span { font-size: 13px; color: var(--text-muted); line-height: 1.55; }
.music-cmds-intro code {
  color: var(--accent-hover);
  background: rgba(168, 85, 247, 0.12);
  padding: 1px 6px;
  border-radius: 5px;
}
.music-cmds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 860px) { .music-cmds-grid { grid-template-columns: 1fr; } }
.music-cmd-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #141829, #0e1120);
  border: 1px solid var(--border-subtle);
  transition: border-color 0.2s, transform 0.2s;
}
.music-cmd-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.music-cmd-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-accent), 0 0 14px var(--accent-glow);
}
.music-cmd-card-body { display: flex; flex-direction: column; gap: 6px; }
.music-cmd-card-body code {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-hover);
  background: rgba(168, 85, 247, 0.12);
  padding: 3px 10px;
  border-radius: 7px;
  width: max-content;
}
.music-cmd-card-body span { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* ==================================================
   LABEL ICONOS (reemplazo de emojis en ajustes)
   ================================================== */
.setting-label .label-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
}
.setting-label span.label-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--border-accent), 0 0 8px var(--accent-glow);
  flex-shrink: 0;
}

/* ==================================================
   iOS GALACTIC PRO — Deep Space (Apple Sonoma)
   ==================================================
   Paleta, glassmorphism, motion iOS y neón. Se aplica
   al final de la hoja para sobrescribir la base.

   1. PALETA & TOKENS GALÁCTICOS
   ================================================== */
:root {
  --bg-deep-space: #060812;
  --bg-space-card: rgba(18, 22, 41, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-hover: rgba(168, 85, 247, 0.4);
  --glass-specular: rgba(255, 255, 255, 0.25);

  --neon-violet: #a855f7;
  --neon-cyan: #06b6d4;
  --neon-pink: #ec4899;
  --neon-glow-violet: rgba(168, 85, 247, 0.35);

  --text-main: #f8fafc;
  --text-muted: #94a3b8;

  /* Curvas físicas estilo iOS (Apple Spring) */
  --ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ios-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Curva de movimiento Alight Motion (overshoot suave) */
  --alight-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Base galáctica re-tuneada (mantiene compat de selectores SPA) */
  --bg-main: #060812;
  --bg-surface: rgba(18, 22, 41, 0.55);
  --bg-surface-hover: rgba(32, 39, 72, 0.72);
  --bg-secondary: #05070d;
  --bg-elevated: rgba(24, 29, 54, 0.92);
  --bg-card: rgba(18, 22, 41, 0.6);
  --bg-card-hover: rgba(32, 39, 72, 0.8);
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-hover: rgba(255, 255, 255, 0.16);
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 45%, #06b6d4 100%);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  --shadow-glow: 0 0 20px var(--neon-glow-violet);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-md: 14px;
}

/* Los 3 temas líquidos re-declarados con base deep space */
[data-theme="crimson"] {
  --bg-main: #060812;
  --accent-color: #e63956;
  --accent: #e63956;
  --accent-primary: #e63956;
  --accent-hover: #ff5a77;
  --accent-glow: rgba(230, 57, 86, 0.35);
  --accent-soft: rgba(230, 57, 86, 0.14);
  --border-accent: rgba(230, 57, 86, 0.3);
  --sidebar-border: rgba(230, 57, 86, 0.25);
  --liquid-wave-1: #3b0a13;
  --liquid-wave-2: #801224;
  --accent-gradient: linear-gradient(135deg, #e63956 0%, #801224 60%, #3b0a13 100%);
  --neon-violet: #e63956;
  --neon-glow-violet: rgba(230, 57, 86, 0.35);
  --glass-border-hover: rgba(230, 57, 86, 0.4);
}

[data-theme="violet"] {
  --bg-main: #060812;
  --accent-color: #a855f7;
  --accent: #a855f7;
  --accent-primary: #a855f7;
  --accent-hover: #c084fc;
  --accent-glow: rgba(168, 85, 247, 0.35);
  --accent-soft: rgba(168, 85, 247, 0.14);
  --border-accent: rgba(168, 85, 247, 0.3);
  --sidebar-border: rgba(168, 85, 247, 0.25);
  --liquid-wave-1: #220a3b;
  --liquid-wave-2: #521280;
  --accent-gradient: linear-gradient(135deg, #a855f7 0%, #521280 60%, #220a3b 100%);
  --neon-violet: #a855f7;
  --neon-glow-violet: rgba(168, 85, 247, 0.35);
  --glass-border-hover: rgba(168, 85, 247, 0.4);
}

[data-theme="cyan"] {
  --bg-main: #060812;
  --accent-color: #06b6d4;
  --accent: #06b6d4;
  --accent-primary: #06b6d4;
  --accent-hover: #22d3ee;
  --accent-glow: rgba(6, 182, 212, 0.35);
  --accent-soft: rgba(6, 182, 212, 0.14);
  --border-accent: rgba(6, 182, 212, 0.3);
  --sidebar-border: rgba(6, 182, 212, 0.25);
  --liquid-wave-1: #0a253b;
  --liquid-wave-2: #125580;
  --accent-gradient: linear-gradient(135deg, #06b6d4 0%, #125580 60%, #0a253b 100%);
  --neon-violet: #06b6d4;
  --neon-glow-violet: rgba(6, 182, 212, 0.35);
  --glass-border-hover: rgba(6, 182, 212, 0.4);
}

/* Fondo base del body = Deep Space (el canvas galáctico vive encima) */
body {
  background-color: var(--bg-deep-space);
  background-image: none;
}

/* ==================================================
   2. FONDO CÓSMICO (capa inyectada por galaxy-bg.js)
   ================================================== */
.galaxy-bg-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
}
#galaxy-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
}

/* Nebulosas líquidas (blur 80px tipo cristal) */
.galaxy-nebulas {
  position: absolute;
  inset: 0;
}
.galaxy-nebula {
  position: absolute;
  width: 44vw;
  height: 44vw;
  min-width: 320px;
  min-height: 320px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
}
.galaxy-nebula.n1 {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.6), transparent 65%);
  top: -12%;
  left: -8%;
  animation: nebulaOrbit1 58s ease-in-out infinite alternate;
}
.galaxy-nebula.n2 {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.5), transparent 65%);
  bottom: -14%;
  right: -10%;
  animation: nebulaOrbit2 74s ease-in-out infinite alternate;
}
.galaxy-nebula.n3 {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.42), transparent 60%);
  top: 40%;
  left: 56%;
  animation: nebulaOrbit3 66s ease-in-out infinite alternate;
}
@keyframes nebulaOrbit1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(16vw, 9vh) scale(1.18); }
  100% { transform: translate(5vw, 24vh) scale(0.94); }
}
@keyframes nebulaOrbit2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-14vw, -8vh) scale(1.12); }
  100% { transform: translate(-4vw, -20vh) scale(0.96); }
}
@keyframes nebulaOrbit3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-10vw, 12vh) scale(1.2); }
  100% { transform: translate(12vw, 4vh) scale(0.92); }
}

/* Textura de ruido SVG (mate táctil de cristal de iPhone) */
.galaxy-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ==================================================
   3. GLASSMORPHISM LIQUID GLASS (iOS)
   ================================================== */
.ios-glass {
  background: var(--bg-space-card);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--ios-radius, 22px);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 1px 0 var(--glass-specular);
  transition: transform 0.3s var(--ios-spring), border-color 0.3s ease, box-shadow 0.3s ease;
}
.ios-glass:hover {
  border-color: var(--glass-border-hover);
  box-shadow:
    0 12px 40px 0 var(--neon-glow-violet),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px) scale(1.005);
}

/* Paneles principales con tratamiento Liquid Glass */
.glass-card,
.skeuo-card,
.setting-group,
.landing-card,
.loading-card,
.toast,
.theme-card,
.file-drop,
.hero-stat-card,
.music-cmd-card {
  background: var(--bg-space-card);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 1px 0 var(--glass-specular);
}
.glass-card,
.skeuo-card,
.setting-group,
.landing-card,
.loading-card,
.theme-card,
.hero-stat-card,
.music-cmd-card {
  border-radius: 20px;
}
.glass-card:hover,
.skeuo-card:hover,
.setting-group:hover,
.landing-card:hover,
.theme-card:hover,
.hero-stat-card:hover,
.music-cmd-card:hover,
.file-drop:hover {
  border-color: var(--glass-border-hover);
  box-shadow:
    0 12px 40px 0 var(--neon-glow-violet),
    inset 0 1px 2px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* nk-card conserva su borde gradiente animado ::before */
.nk-card {
  background: var(--bg-space-card);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 1px 0 var(--glass-specular);
}

/* Sidebar: cristal fijo */
.sidebar {
  background: var(--bg-space-card);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--glass-border);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}
.sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
}

/* Navegación: hover glass + activo neón */
.nav-item {
  border-radius: 12px;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(6, 182, 212, 0.08));
  border-color: var(--glass-border-hover);
  box-shadow:
    inset 0 0 12px var(--neon-glow-violet),
    0 0 18px var(--neon-glow-violet);
}

/* Hero galáctico del servidor */
.galaxy-hero {
  border-radius: 24px;
  border-color: var(--glass-border-hover);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
}
.galaxy-hero.has-banner::after {
  background: radial-gradient(120% 160% at 50% 0%, rgba(6, 8, 18, 0.3), rgba(6, 8, 18, 0.82));
}

/* Inputs, selects y buscadores */
.input-field,
select.input-field,
.ds-search,
.docs-manager-search {
  background: rgba(12, 15, 28, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.input-field:focus,
select.input-field:focus,
.ds-search:focus,
.docs-manager-search:focus {
  outline: none;
  border-color: var(--neon-violet);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.16), 0 0 18px var(--neon-glow-violet);
}

/* Botones cápsula del hero */
.capsule-btn,
.hero-badge {
  background: var(--bg-space-card);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--glass-border);
}

/* Trigger del selector de Discord */
.ds-trigger {
  background: rgba(12, 15, 28, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ==================================================
   4. MOTION & MICRO-INTERACCIONES iOS
   ================================================== */
.btn,
.nav-item,
.nav-cat-toggle,
.capsule-btn,
.neu-raised,
.theme-card,
.nk-copy,
.spotify-btn,
.ds-trigger,
.file-drop {
  transition:
    transform 0.15s var(--ios-spring),
    filter 0.15s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}
.btn:active,
.nav-item:active,
.capsule-btn:active,
.neu-raised:active,
.theme-card:active,
.nk-copy:active,
.spotify-btn:active,
.ds-trigger:active,
.file-drop:active {
  transform: scale(0.95) !important; /* sensación de presión al tocar */
  filter: brightness(0.9);
}

/* Entrada escalonada (stagger) al montar vistas */
@keyframes iosSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ios-enter {
  animation: iosSlideUp 0.5s var(--ios-spring) both;
}

/* ==================================================
   5. ICONOS & RESPLANDOR NEÓN
   ================================================== */
.icon-glow,
.nav-item.active svg,
.sidebar-icon,
.dc-brand-logo,
.dc-logo svg,
.server-status-dot,
.capsule-btn svg,
.hero-badge svg,
.hero-stat-icon svg,
.music-cmd-card-icon svg,
.spotify-disc,
.theme-card.active .theme-swatch {
  filter: drop-shadow(0 0 8px var(--neon-glow-violet));
}
.dc-logo {
  color: var(--accent-color);
  display: inline-flex;
  align-items: center;
}
.dc-brand-logo {
  display: inline-flex;
  align-items: center;
}

/* ==================================================
   6. BOTTOM SHEET estilo iOS (modales desde abajo)
   ================================================== */
.arc-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(3, 5, 10, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.arc-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.arc-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: min(560px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-space-card);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid var(--glass-border);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow:
    0 -18px 50px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.42s var(--ios-spring);
}
.arc-sheet-backdrop.open .arc-sheet {
  transform: translate(-50%, 0);
}
.arc-sheet-grabber {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  margin: 12px auto 4px;
  flex-shrink: 0;
}
.arc-sheet-head {
  padding: 10px 22px 14px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
}
.arc-sheet-body {
  padding: 0 22px 26px;
  overflow-y: auto;
}

/* Selector de Discord como bottom sheet en móvil */
@media (max-width: 768px) {
  .ds-panel {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    max-height: 62vh;
    height: auto !important;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    z-index: 10001;
    background: var(--bg-space-card);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    animation: sheetUp 0.38s var(--ios-spring) forwards;
  }
  .ds-list { max-height: calc(62vh - 104px); }
}
@keyframes sheetUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ==================================================
   7. RESPONSIVE & ACCESIBILIDAD
   ================================================== */

/* ===== Scrollbar Galáctico (una sola barra, sin doble scroll) =====
   El contenido principal (.dashboard-main) es el ÚNICO con scrollbar visible.
   La navegación (.sidebar-nav) scrollea con scrollbar INVISIBLE y el
   settings-panel hereda el scroll del contenedor (sin barra propia). */
.dashboard-main {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #a855f7 rgba(6, 8, 18, 0.6);
}

.sidebar-nav {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.settings-panel {
  overflow: visible;
}

.dashboard-main::-webkit-scrollbar {
  width: 6px;
}

.dashboard-main::-webkit-scrollbar-track {
  background: rgba(6, 8, 18, 0.6);
  border-radius: 10px;
}

.dashboard-main::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-violet, #a855f7), var(--neon-cyan, #06b6d4));
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

@media (max-width: 768px) {
  .galaxy-nebula {
    filter: blur(50px);
    width: 78vw;
    height: 78vw;
    min-width: 240px;
    min-height: 240px;
    opacity: 0.4;
  }
  .galaxy-noise { opacity: 0.02; }
  .arc-sheet { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .galaxy-nebula { animation: none !important; }
  .liquid-wave { animation: none !important; }
  .ios-enter { animation-duration: 0.01s; }
  .arc-sheet { transition: none; }
}

/* ==================================================
   8. ARCADIA — CASINO & TIENDA (Galáctica Pro)
   ================================================== */
.arc-shell {
  position: relative;
  background: linear-gradient(160deg, rgba(168,85,247,0.08), rgba(6,182,212,0.06));
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 18px;
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
}
.arc-marquee {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 3px;
  color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.6);
  background: repeating-linear-gradient(90deg, rgba(255,215,0,0.08), rgba(255,215,0,0.08) 2px, transparent 2px, transparent 6px);
  border: 1px dashed rgba(255,215,0,0.35);
  border-radius: 12px; padding: 8px 12px; margin-bottom: 14px;
}
.arc-marquee-star { animation: arcBlink 1.2s steps(2) infinite; }
@keyframes arcBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.arc-balance {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  position: relative; margin-bottom: 14px;
}
.arc-coin-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 6px 12px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.arc-coin-pill b { color: #ffd700; font-size: 14px; }
.arc-coin-pill-bank b { color: #06b6d4; }
.arc-coin-pill-total b { color: #a855f7; }

.arc-ticker {
  position: absolute; top: 0; right: 8px;
  font-weight: 800; font-size: 15px; opacity: 0;
  font-family: 'Courier New', monospace;
  pointer-events: none; z-index: 5;
}
.arc-ticker.up { color: #4ade80; text-shadow: 0 0 10px rgba(74,222,128,0.8); }
.arc-ticker.down { color: #f87171; text-shadow: 0 0 10px rgba(248,113,113,0.8); }
.arc-ticker.fly { animation: arcTicker 2.2s var(--ios-spring) forwards; }
@keyframes arcTicker {
  0%   { opacity: 0; transform: translateY(6px) scale(0.8); }
  15%  { opacity: 1; transform: translateY(0) scale(1.05); }
  70%  { opacity: 1; transform: translateY(-28px) scale(1); }
  100% { opacity: 0; transform: translateY(-46px) scale(0.9); }
}

.arc-cooldowns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.arc-cooldown {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 10px 12px;
  cursor: pointer; text-align: left; color: var(--text);
  font-family: inherit;
  transition: transform .18s var(--ios-spring), border-color .18s, box-shadow .18s;
}
.arc-cooldown:active { transform: scale(0.95); }
.arc-cooldown.ready { border-color: rgba(74,222,128,0.4); box-shadow: 0 0 14px rgba(74,222,128,0.15); }
.arc-cooldown.cooling { opacity: 0.55; }
.arc-cooldown-emoji { font-size: 22px; }
.arc-cooldown-meta { display: flex; flex-direction: column; gap: 2px; }
.arc-cooldown-meta b { font-size: 13px; }
.arc-cooldown-meta small { font-size: 11px; color: var(--text-muted); }

.arc-screen {
  position: relative;
  background: linear-gradient(180deg, #0a0c16, #070812);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 16px; padding: 16px; min-height: 260px;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 0 3px rgba(168,85,247,0.08);
  margin-bottom: 14px;
}
.arc-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.arc-stage.arc-home { padding: 26px 10px; }
.arc-home-title {
  font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 4px;
  color: #a855f7; text-shadow: 0 0 12px rgba(168,85,247,0.6); font-size: 15px;
}
.arc-home-sub { color: var(--text-muted); font-size: 12px; }

.arc-panel { margin-top: 14px; }
.arc-panel-label { font-size: 11px; letter-spacing: 3px; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
.arc-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arc-btn {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 10px 12px;
  color: var(--text); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 13px;
  transition: transform .18s var(--ios-spring), border-color .18s, box-shadow .18s;
}
.arc-btn:active { transform: scale(0.95); }
.arc-btn:hover { border-color: rgba(255,255,255,0.25); }
.arc-btn-emoji { font-size: 20px; }
.arc-btn-meta { display: flex; flex-direction: column; gap: 1px; }
.arc-btn-meta small { color: var(--text-muted); font-size: 11px; }
.arc-btn-red { border-color: rgba(248,113,113,0.35); }
.arc-btn-red:hover { box-shadow: 0 0 14px rgba(248,113,113,0.2); }
.arc-btn-cyan { border-color: rgba(6,182,212,0.35); }
.arc-btn-cyan:hover { box-shadow: 0 0 14px rgba(6,182,212,0.2); }
.arc-btn-gold { border-color: rgba(255,215,0,0.35); }
.arc-btn-gold:hover { box-shadow: 0 0 14px rgba(255,215,0,0.2); }
.arc-btn-green { border-color: rgba(74,222,128,0.35); }
.arc-btn-green:hover { box-shadow: 0 0 14px rgba(74,222,128,0.2); }
.arc-btn-violet { border-color: rgba(168,85,247,0.35); }
.arc-btn-violet:hover { box-shadow: 0 0 14px rgba(168,85,247,0.2); }
.arc-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.arc-reels { display: flex; gap: 10px; justify-content: center; }
.arc-reel {
  width: 64px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 12px;
}
.arc-reels:not(.done) .arc-reel { animation: arcReel .14s linear infinite; }
.arc-reels:not(.done) .arc-reel:nth-child(2) { animation-duration: .11s; }
.arc-reels:not(.done) .arc-reel:nth-child(3) { animation-duration: .09s; }
@keyframes arcReel { from { transform: translateY(-18px); } to { transform: translateY(18px); } }

.arc-bet-row { display: flex; gap: 10px; align-items: center; justify-content: center; }
.arc-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 10px; padding: 8px 12px; font-size: 14px;
  font-family: 'Courier New', monospace;
}

.arc-coin-wrap { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }
.arc-coin {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: radial-gradient(circle at 35% 30%, #3a3f5a, #10141f);
  border: 3px solid #ffd700;
  box-shadow: 0 0 18px rgba(255,215,0,0.45);
}
.arc-coin-wrap:not(.done) .arc-coin { animation: arcCoinFlip .5s var(--ios-spring) infinite; }
.arc-coin-wrap.done .arc-coin.big { animation: arcCoinIdle 2s ease-in-out infinite; }
@keyframes arcCoinFlip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes arcCoinIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.arc-choice { display: flex; gap: 10px; }
.arc-choice-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 12px; padding: 10px 18px;
  cursor: pointer; font-family: inherit; font-weight: 600;
  transition: transform .18s var(--ios-spring), border-color .18s;
}
.arc-choice-btn.active { border-color: #06b6d4; box-shadow: 0 0 14px rgba(6,182,212,0.35); }
.arc-choice-btn:active { transform: scale(0.95); }

.arc-cards { display: flex; gap: 14px; justify-content: center; }
.arc-card-mini {
  width: 78px; height: 104px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700;
  background: linear-gradient(160deg, #2a2f4a, #171b2e);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px; color: #fff;
}
.arc-card-mini.arc-dealer { border-color: rgba(248,113,113,0.4); }
.arc-cards:not(.done) .arc-card-mini { animation: arcCardFlip .4s var(--ios-spring) infinite; }
.arc-cards:not(.done) .arc-card-mini:nth-child(2) { animation-delay: .12s; }
@keyframes arcCardFlip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }

.arc-chamber { display: flex; gap: 8px; justify-content: center; }
.arc-chamber-cell {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 10px;
}
.arc-chamber:not(.done) .arc-chamber-cell:nth-child(1) { animation: arcShake .18s linear infinite; }
.arc-chamber:not(.done) .arc-chamber-cell:nth-child(2) { animation: arcShake .14s linear infinite; }
@keyframes arcShake { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-3px,2px); } }
.arc-boom { font-size: 56px; animation: arcBoom .5s ease-out; }
@keyframes arcBoom { 0% { transform: scale(0.2); opacity: 0; } 50% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

.arc-hands { display: flex; gap: 26px; justify-content: center; align-items: center; }
.arc-hand { font-size: 46px; }
.arc-hands:not(.done) .arc-hand:nth-child(1) { animation: arcHandL .3s ease-in-out infinite; }
.arc-hands:not(.done) .arc-hand:nth-child(2) { animation: arcHandR .3s ease-in-out infinite; }
@keyframes arcHandL { 0%,100% { transform: translateX(-10px); } 50% { transform: translateX(2px); } }
@keyframes arcHandR { 0%,100% { transform: translateX(10px); } 50% { transform: translateX(-2px); } }

.arc-labour { display: flex; align-items: center; justify-content: center; height: 80px; }
.arc-labour-icon { font-size: 52px; filter: drop-shadow(0 0 12px rgba(255,215,0,0.5)); }
.arc-labour:not(.done) .arc-labour-icon { animation: arcLabour 1s ease-in-out infinite; }
@keyframes arcLabour { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.arc-rigs { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.arc-rig b { margin-right: 4px; }
.arc-hint { color: var(--text-muted); font-size: 12px; }

.arc-screen-head { display: flex; justify-content: center; margin-bottom: 12px; }
.arc-screen-title {
  font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 2px;
  color: #06b6d4; text-shadow: 0 0 10px rgba(6,182,212,0.5); font-size: 13px;
}
.arc-result-line { font-size: 16px; font-weight: 700; }
.arc-result-line.win { color: #4ade80; text-shadow: 0 0 12px rgba(74,222,128,0.5); }
.arc-result-line.lose { color: #f87171; }
.arc-result-line.tie { color: #fbbf24; }
.arc-result-amt { font-family: 'Courier New', monospace; font-size: 26px; font-weight: 800; letter-spacing: 2px; }
.arc-result-amt.win { color: #4ade80; text-shadow: 0 0 16px rgba(74,222,128,0.6); }
.arc-result-amt.lose { color: #f87171; text-shadow: 0 0 16px rgba(248,113,113,0.5); }
.arc-result-amt.tie { color: #fbbf24; }

.arc-danger { background: #dc2626; border-color: #dc2626; }
.arc-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.arc-card-preview { display: flex; justify-content: center; margin-bottom: 14px; }
.arc-card-face {
  width: 280px; padding: 18px; border-radius: 16px;
  background: linear-gradient(135deg, #2a2f4a, #0f1222 55%, #1c1030);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 8px;
}
.arc-card-emoji { font-size: 34px; }
.arc-card-name { font-size: 17px; font-weight: 700; }
.arc-card-num { font-family: 'Courier New', monospace; letter-spacing: 2px; color: var(--text-muted); font-size: 13px; }
.arc-card-bal { color: #ffd700; font-weight: 700; font-size: 14px; }
.arc-card-skin-badge {
  align-self: flex-start;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(168,85,247,0.2); color: #c084fc; border: 1px solid rgba(168,85,247,0.4);
}
.arc-card-form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.arc-skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.arc-skin-btn {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 10px; padding: 8px; cursor: pointer;
  font-family: inherit; font-size: 12px;
  transition: transform .18s var(--ios-spring), border-color .18s, box-shadow .18s;
}
.arc-skin-btn:active { transform: scale(0.95); }
.arc-skin-btn.active { border-color: #a855f7; box-shadow: 0 0 12px rgba(168,85,247,0.4); }
.arc-skin-btn small { color: var(--text-muted); font-size: 10px; }

.arc-view-head { margin-bottom: 14px; }
.arc-title { margin-bottom: 2px; }
.arc-shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.arc-coin-guide { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(105deg, rgba(20,27,55,.88), rgba(9,16,32,.74)); border: 1px solid rgba(245,217,139,.18); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 16px 35px rgba(0,0,0,.16); }
.arc-coin-guide-icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; color: #f5d98b; background: linear-gradient(145deg, rgba(245,217,139,.22), rgba(168,85,247,.2)); }
.arc-coin-guide b { font-size: 14px; color: #f8fafc; }.arc-coin-guide p { margin: 4px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }.arc-coin-guide code { color: #f5d98b; }.arc-coin-guide-tip { margin-left: auto; color: #c4b5fd; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.arc-shop-groups { display: flex; flex-direction: column; gap: 16px; }
.arc-shop-group { display: flex; flex-direction: column; gap: 10px; }
.arc-shop-group-head { display: flex; align-items: center; gap: 10px; }
.arc-shop-group-emoji { font-size: 24px; }
.arc-shop-group-head b { font-size: 14px; }
.arc-shop-group-head small { color: var(--text-muted); font-size: 11px; display: block; }
.arc-music-maintenance { position: relative; overflow: hidden; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 0%, rgba(99,102,241,.2), transparent 48%), rgba(15,18,38,.62); border: 1px solid rgba(129,140,248,.22); box-shadow: 0 24px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.1); }
.arc-music-maintenance::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(6,182,212,.12); filter: blur(55px); pointer-events: none; }
.arc-music-maintenance-icon { position: relative; display: grid; place-items: center; width: 84px; height: 84px; margin: 14px 0 18px; color: #c4b5fd; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; background: linear-gradient(145deg, rgba(99,102,241,.35), rgba(6,182,212,.2)); box-shadow: 0 0 36px rgba(99,102,241,.26), inset 0 1px rgba(255,255,255,.2); }
.arc-music-maintenance h2, .arc-music-maintenance p { position: relative; max-width: 620px; }
.arc-music-maintenance h2 { font-size: clamp(20px, 3vw, 30px); margin-bottom: 8px; }
.arc-music-maintenance p { color: var(--text-muted); font-size: 13px; }
.arc-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.arc-item {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 12px; cursor: pointer;
  transition: transform .18s var(--ios-spring), border-color .18s, box-shadow .18s;
}
.arc-item:not(.owned):active { transform: scale(0.95); }
.arc-item:not(.owned):hover { border-color: rgba(168,85,247,0.4); box-shadow: 0 0 16px rgba(168,85,247,0.15); }
.arc-item.owned { opacity: 0.6; cursor: default; border-color: rgba(74,222,128,0.25); }
.arc-item-emoji { font-size: 28px; }
.arc-item-name { font-size: 13px; }
.arc-item-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; min-height: 30px; }
.arc-item-price { font-size: 12px; font-weight: 700; color: #ffd700; margin-top: auto; }
.arc-item.owned .arc-item-price { color: #4ade80; }

.arc-confirm { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.arc-confirm-visual { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; color: #f5d98b; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.24), transparent 42%), linear-gradient(145deg, rgba(168,85,247,.45), rgba(6,182,212,.2)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 14px 36px rgba(88,101,242,.3), inset 0 1px rgba(255,255,255,.22); }
.arc-confirm-kicker { color: #a5b4fc; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.arc-confirm-name { font-size: 16px; font-weight: 700; }
.arc-confirm-price { color: #ffd700; font-weight: 800; font-size: 15px; }
.arc-confirm-desc { color: var(--text-muted); font-size: 13px; }
.arc-confirm-hint { color: #c084fc; font-size: 12px; }
.arc-confirm-balance { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.045); color: var(--text-muted); font-size: 12px; }
.arc-confirm-balance b { color: #f8fafc; }
.arc-confirm-short { width: 100%; padding: 9px 12px; border-radius: 10px; color: #fecaca; background: rgba(239,68,68,.12); border: 1px solid rgba(248,113,113,.24); font-size: 12px; }
.arc-confirm-short b { color: #fca5a5; }
.arc-confirm-ok { width: 100%; padding: 9px 12px; border-radius: 10px; color: #bbf7d0; background: rgba(34,197,94,.1); border: 1px solid rgba(74,222,128,.2); font-size: 12px; }
.arc-confirm-actions { display: flex; gap: 10px; margin-top: 14px; }
.arc-confirm-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; width: 100%; text-align: left; }
.arc-confirm-detail-grid > div { display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 11px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); }.arc-confirm-detail-grid span { color: #a5b4fc; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.arc-confirm-detail-grid b { color: #dbeafe; font-size: 11px; line-height: 1.4; font-weight: 500; }
.arc-mini-preview { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 82px; margin: 4px 0; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.13); background: rgba(4,7,19,.72); box-shadow: inset 0 1px rgba(255,255,255,.1); }.arc-mini-preview::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.13), transparent 62%); transform: translateX(-65%) rotate(12deg); animation: arcPreviewSweep 3.4s ease-in-out infinite; }.arc-mini-preview > * { position: relative; z-index: 1; }.arc-mini-preview span, .arc-mini-preview em { color: #a5b4fc; font-size: 10px; font-style: normal; }.arc-preview-palette { justify-content: flex-start; padding: 12px; flex-wrap: wrap; }.arc-preview-palette i { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 13px currentColor; }.arc-preview-palette i:nth-child(1) { background: #7c3aed; color: #7c3aed; }.arc-preview-palette i:nth-child(2) { background: #06b6d4; color: #06b6d4; }.arc-preview-palette i:nth-child(3) { background: #f472b6; color: #f472b6; }.arc-preview-palette i:nth-child(4) { background: #f5d98b; color: #f5d98b; }.arc-preview-palette span { width: 100%; }.arc-preview-theme { flex-direction: column; align-items: flex-start; padding: 14px; background: radial-gradient(circle at 80% 20%, rgba(168,85,247,.45), transparent 44%), #10132c; }.arc-preview-theme b { color: #fff; }.arc-preview-theme em { color: #67e8f9; }.arc-preview-embed { flex-direction: column; align-items: flex-start; padding: 12px; border-left: 4px solid #a855f7; }.arc-preview-embed b { color: #fff; }.arc-preview-embed span { color: #c4b5fd; }.arc-preview-embed hr { width: 90%; border: 0; border-top: 1px solid rgba(255,255,255,.14); }.arc-preview-embed i { width: 54%; border-top: 4px solid #6366f1; }.arc-preview-embed i:last-child { width: 34%; border-color: #06b6d4; }.arc-preview-slots { flex-direction: column; align-items: flex-start; padding: 13px 18px; }.arc-preview-slots b { color: #fff; }.arc-preview-slots span { color: #94a3b8; }.arc-preview-slots strong { color: #4ade80; font-size: 22px; }.arc-preview-slots strong em { color: #c4b5fd; }.arc-preview-profile { justify-content: flex-start; padding: 14px; }.arc-avatar-preview { display: grid; place-items: center; width: 44px; height: 44px; border: 3px solid #c084fc; border-radius: 50%; color: #fff !important; background: #27204d; font-weight: 800; box-shadow: 0 0 17px #a855f7; }.arc-preview-profile b { color: #fff; }.arc-preview-booster b { color: #f5d98b; font-size: 28px; }.arc-preview-music { justify-content: flex-start; padding: 14px; }.arc-preview-music span { color: #67e8f9; font-size: 26px; }.arc-preview-music b { color: #fff; }.arc-preview-generic span { color: #f5d98b; font-size: 25px; }
@keyframes arcPreviewSweep { 0%, 30% { transform: translateX(-65%) rotate(12deg); } 70%, 100% { transform: translateX(65%) rotate(12deg); } }
.arc-subscription-transition { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 230px; margin: 42px -24px 0; padding: 42px 20px; color: #a5b4fc; background: #000; text-align: center; }.arc-subscription-transition span { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 12px; border: 1px solid rgba(165,180,252,.25); border-radius: 50%; box-shadow: 0 0 35px rgba(99,102,241,.35); }.arc-subscription-transition b { color: #e0e7ff; font-size: 14px; }.arc-subscription-transition small { margin-top: 4px; color: #64748b; font-size: 11px; }
.arc-subscription-zone { position: relative; margin: 0 -24px -24px; padding: 56px 24px 42px; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, rgba(88,101,242,.18), transparent 43%), #000; }.arc-subscription-zone::before { content: ''; position: absolute; width: 420px; height: 420px; top: 15%; left: 50%; transform: translateX(-50%); border: 1px solid rgba(99,102,241,.1); border-radius: 50%; box-shadow: 0 0 80px rgba(99,102,241,.08); }.arc-subscription-heading { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; max-width: 720px; margin: 0 auto 28px; text-align: left; }.arc-subscription-orbit { display: grid; place-items: center; flex: 0 0 auto; width: 78px; height: 78px; color: #f5d98b; border: 1px solid rgba(245,217,139,.25); border-radius: 26px; background: linear-gradient(145deg, rgba(168,85,247,.36), rgba(6,182,212,.16)); box-shadow: 0 0 46px rgba(168,85,247,.24); }.arc-subscription-heading h3 { margin: 4px 0; color: #f8fafc; font-size: clamp(24px, 4vw, 38px); }.arc-subscription-heading p { color: #94a3b8; font-size: 12px; }.arc-subscription-plans { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 0 auto; }.arc-subscription-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 390px; padding: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 26px; background: linear-gradient(155deg, rgba(23,29,63,.95), rgba(7,9,22,.96)); box-shadow: 0 24px 60px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.12); transition: transform .25s, border-color .25s, box-shadow .25s; }.arc-subscription-card:hover { transform: translateY(-6px); border-color: rgba(129,140,248,.45); box-shadow: 0 30px 80px rgba(0,0,0,.52), 0 0 38px rgba(99,102,241,.15); }.arc-subscription-card.is-featured { border-color: rgba(34,211,238,.3); background: linear-gradient(155deg, rgba(13,50,75,.93), rgba(7,13,28,.97)); }.arc-subscription-card-glow { position: absolute; width: 180px; height: 180px; top: -90px; right: -55px; border-radius: 50%; background: rgba(168,85,247,.2); filter: blur(14px); }.arc-subscription-card.is-featured .arc-subscription-card-glow { background: rgba(6,182,212,.2); }.arc-subscription-card-top { position: relative; display: flex; justify-content: space-between; align-items: center; }.arc-subscription-plan-icon { display: grid; place-items: center; width: 54px; height: 54px; color: #f5d98b; border-radius: 17px; background: rgba(255,255,255,.07); }.arc-subscription-badge { padding: 4px 8px; border-radius: 999px; color: #67e8f9; background: rgba(6,182,212,.1); border: 1px solid rgba(34,211,238,.25); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.arc-subscription-audience { color: #a5b4fc; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.arc-subscription-card h4 { position: relative; color: #fff; font-size: 23px; }.arc-subscription-card p { position: relative; min-height: 38px; color: #a8b1c8; font-size: 12px; }.arc-subscription-price { display: flex; align-items: baseline; gap: 8px; }.arc-subscription-price strong { color: #f5d98b; font-size: 34px; }.arc-subscription-price span { color: #64748b; font-size: 10px; line-height: 1.35; }.arc-subscription-benefits { position: relative; display: flex; flex-direction: column; gap: 9px; min-height: 105px; color: #dbeafe; font-size: 12px; }.arc-subscription-benefits div { display: flex; align-items: center; gap: 8px; }.arc-subscription-benefits svg { color: #4ade80; flex: 0 0 auto; }.arc-subscription-button { position: relative; margin-top: auto; width: 100%; }.arc-subscription-footnote { position: relative; margin: 28px auto 0; color: #475569; text-align: center; font-size: 11px; }

.arc-product-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 22px; background: rgba(3,5,18,.66); backdrop-filter: blur(18px) saturate(135%); opacity: 0; transition: opacity .24s ease; }
.arc-product-backdrop.is-open { opacity: 1; }
.arc-product-modal { position: relative; width: min(560px, 100%); max-height: min(720px, 90vh); overflow: auto; padding: 34px; border-radius: 30px; background: linear-gradient(145deg, rgba(24,28,55,.88), rgba(9,12,28,.82)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 70px rgba(99,102,241,.18), inset 0 1px rgba(255,255,255,.18); transform: translateY(18px) scale(.96); transition: transform .34s cubic-bezier(.16,1,.3,1); }
.arc-product-backdrop.is-open .arc-product-modal { transform: translateY(0) scale(1); }
.arc-product-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; color: var(--text-muted); background: rgba(255,255,255,.06); cursor: pointer; font-size: 22px; line-height: 1; transition: transform .2s, color .2s, background .2s; }
.arc-product-close:hover { color: #fff; background: rgba(255,255,255,.14); transform: rotate(90deg); }

.ep-subscriptions-card { overflow: hidden; }
.ep-subscriptions-hero { display: flex; align-items: center; gap: 16px; padding: 20px; margin: -2px -2px 14px; border-radius: 18px; background: radial-gradient(circle at 8% 0%, rgba(168,85,247,.28), transparent 46%), linear-gradient(120deg, rgba(20,25,54,.9), rgba(10,15,32,.76)); border: 1px solid rgba(168,85,247,.23); }
.ep-subscriptions-mark { display: grid; place-items: center; width: 56px; height: 56px; color: #f5d98b; border-radius: 18px; background: linear-gradient(145deg, rgba(168,85,247,.36), rgba(6,182,212,.22)); box-shadow: 0 0 26px rgba(168,85,247,.24); }
.ep-subscriptions-hero h3 { margin: 0 0 4px; font-size: 20px; }
.ep-subscriptions-hero p { margin: 0; color: var(--text-muted); font-size: 12px; }
.ep-preview-note { margin-bottom: 14px; padding: 10px 12px; color: #c4b5fd; background: rgba(139,92,246,.09); border: 1px solid rgba(139,92,246,.2); border-radius: 10px; font-size: 12px; }
.ep-subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ep-subscription-plan { display: flex; flex-direction: column; gap: 9px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); transition: transform .2s, border-color .2s, box-shadow .2s; }
.ep-subscription-plan:hover, .ep-subscription-plan.featured { transform: translateY(-3px); border-color: rgba(168,85,247,.4); box-shadow: 0 14px 30px rgba(0,0,0,.2), 0 0 22px rgba(168,85,247,.1); }
.ep-subscription-plan-top { display: flex; align-items: center; justify-content: space-between; color: #c4b5fd; }
.ep-preview-badge { padding: 3px 7px; border-radius: 999px; color: #67e8f9; background: rgba(6,182,212,.1); border: 1px solid rgba(34,211,238,.25); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.ep-subscription-plan h4 { font-size: 16px; }
.ep-subscription-plan strong { color: #f5d98b; font-size: 25px; }
.ep-subscription-plan strong small { color: var(--text-muted); font-size: 11px; font-weight: 500; }
.ep-subscription-plan p { min-height: 36px; color: var(--text-muted); font-size: 12px; }
.ep-subscription-plan ul { display: flex; flex-direction: column; gap: 7px; min-height: 92px; color: #dbeafe; list-style: none; font-size: 12px; }
.ep-subscription-plan li { display: flex; align-items: center; gap: 6px; }
.ep-subscription-plan li svg { color: #4ade80; flex: 0 0 auto; }

.arc-particle {
  position: fixed; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pc, #a855f7);
  box-shadow: 0 0 12px var(--pc, #a855f7);
  pointer-events: none; z-index: 9999;
  animation: arcParticle .7s ease-out forwards;
}
@keyframes arcParticle {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* ===== Blackjack interactivo (Crupier vs Jugador) ===== */
.bj-zone { width: 100%; display: flex; justify-content: center; }
.bj-table {
  width: 100%; max-width: 460px;
  background: radial-gradient(ellipse at 50% 18%, rgba(20,90,50,0.85), rgba(5,24,16,0.92));
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 18px; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 0 28px rgba(74,222,128,0.08);
}
.bj-side { display: flex; flex-direction: column; gap: 6px; }
.bj-side-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,0.78); font-weight: 700;
}
.bj-sum {
  font-family: 'Courier New', monospace; color: #ffd700;
  background: rgba(0,0,0,0.35); padding: 2px 8px; border-radius: 999px; font-size: 12px;
}
.bj-hand { display: flex; gap: 6px; flex-wrap: wrap; min-height: 92px; align-items: center; justify-content: center; }
.bj-card {
  width: 56px; height: 82px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(160deg, #ffffff, #e8eaf2);
  color: #111827; border-radius: 8px; font-weight: 800; font-size: 18px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: arcCardIn .3s var(--ios-spring);
}
.bj-card small { font-size: 13px; line-height: 1; }
.bj-card.red { color: #dc2626; }
.bj-card.back {
  background: linear-gradient(160deg, #4c1d95, #2e1065);
  color: #c084fc; font-size: 22px; border-color: rgba(168,85,247,0.5);
}
@keyframes arcCardIn {
  from { transform: translateY(-8px) scale(0.8); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.bj-mid { display: flex; justify-content: center; }
.bj-wager {
  font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 1px;
  color: #ffd700; background: rgba(0,0,0,0.4); padding: 3px 10px; border-radius: 999px;
}
.bj-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.bj-actions.hidden, .rr-actions.hidden { display: none; }
.bj-action {
  background: rgba(255,255,255,0.07); border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 12px; padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12px;
  transition: transform .18s var(--ios-spring), border-color .18s, box-shadow .18s;
}
.bj-action:active { transform: scale(0.94); }
.bj-action.hit { border-color: rgba(74,222,128,0.4); }
.bj-action.hit:hover { box-shadow: 0 0 12px rgba(74,222,128,0.25); }
.bj-action.stand { border-color: rgba(6,182,212,0.4); }
.bj-action.stand:hover { box-shadow: 0 0 12px rgba(6,182,212,0.25); }
.bj-action.dbl { border-color: rgba(255,215,0,0.4); }
.bj-action.dbl:hover { box-shadow: 0 0 12px rgba(255,215,0,0.25); }

/* ===== Ruleta Rusa interactiva (PvE, 3 vidas por lado) ===== */
.rr-zone { width: 100%; display: flex; flex-direction: column; align-items: center; }
.rr-table {
  width: 100%; max-width: 460px;
  background: radial-gradient(ellipse at 50% 18%, rgba(80,16,16,0.82), rgba(22,6,6,0.92));
  border: 1px solid rgba(248,113,113,0.3);
  border-radius: 18px; padding: 16px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 0 28px rgba(248,113,113,0.08);
}
.rr-side { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.rr-side-label { font-size: 11px; letter-spacing: 1px; font-weight: 700; color: rgba(255,255,255,0.78); }
.rr-lives { display: flex; gap: 4px; font-size: 18px; }
.rr-life { filter: drop-shadow(0 0 6px rgba(248,113,113,0.5)); transition: transform .2s, opacity .2s; }
.rr-life.lost { opacity: 0.18; filter: grayscale(1); transform: scale(0.85); }
.rr-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.rr-chamber { display: flex; gap: 4px; }
.rr-chamber .arc-chamber-cell { width: 32px; height: 32px; font-size: 14px; }
.rr-chamber.spinning .arc-chamber-cell { animation: arcShake .12s linear infinite; }
.rr-wager { font-family: 'Courier New', monospace; font-size: 11px; color: #fbbf24; }
.rr-turn {
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(6,182,212,0.12); border: 1px solid rgba(6,182,212,0.4); color: #67e8f9;
  animation: arcCardIn .25s ease-out;
}
.rr-turn.dealer {
  background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.55); color: #fca5a5;
  box-shadow: 0 0 14px rgba(248,113,113,0.25);
}
.rr-shells { display: flex; gap: 8px; font-family: 'Courier New', monospace; font-size: 11px; }
.rr-shells-live { color: #fca5a5; }
.rr-shells-blank { color: #67e8f9; }
.rr-shells-live, .rr-shells-blank { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); }
.rr-log { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; width: 100%; max-width: 460px; }
.rr-log-item {
  font-size: 12px; padding: 6px 10px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  animation: arcCardIn .25s ease-out;
}
.rr-log-item.blank { border-color: rgba(6,182,212,0.25); color: #67e8f9; }
.rr-log-item.hit { border-color: rgba(248,113,113,0.4); color: #fca5a5; }
.rr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.rr-fire {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(248,113,113,0.45);
  color: var(--text); border-radius: 12px; padding: 10px 14px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 12px;
  transition: transform .18s var(--ios-spring), box-shadow .18s;
}
.rr-fire:active { transform: scale(0.94); }
.rr-fire:hover { box-shadow: 0 0 14px rgba(248,113,113,0.3); }
.rr-fire.self { border-color: rgba(6,182,212,0.45); }
.rr-fire.self:hover { box-shadow: 0 0 14px rgba(6,182,212,0.3); }

/* ===== PPT jugada (3 botones) ===== */
.ppt-hand {
  cursor: pointer; border-radius: 14px; padding: 6px 10px;
  border: 1px solid transparent;
  transition: transform .18s var(--ios-spring), border-color .18s, box-shadow .18s;
}
.ppt-hand.active { border-color: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,0.35); transform: scale(1.06); }
.ppt-hand:active { transform: scale(0.94); }

/* ===== Modal de validación de apuestas (animado) ===== */
.arc-warn { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 4px; }
.arc-warn-icon { font-size: 46px; animation: arcWarnBounce 1s ease-in-out infinite; }
.arc-warn-title { font-size: 16px; font-weight: 800; }
.arc-warn-msg { color: var(--text-muted); font-size: 13px; line-height: 1.5; max-width: 280px; }
@keyframes arcWarnBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ==================================================
   9. PANEL AUTOMOD NATIVO
   ================================================== */
.am-native { display: flex; flex-direction: column; gap: 14px; }
.am-native-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.am-native-total {
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(168,85,247,0.15); color: #c084fc; border: 1px solid rgba(168,85,247,0.3);
  white-space: nowrap;
}
.am-native-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.am-native-mod {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 10px 12px;
  transition: border-color .18s, box-shadow .18s;
}
.am-native-mod.on { border-color: rgba(74,222,128,0.35); box-shadow: 0 0 14px rgba(74,222,128,0.12); }
.am-native-mod-info { display: flex; flex-direction: column; gap: 2px; }
.am-native-mod-info b { font-size: 13px; }
.am-native-mod-info small { color: var(--text-muted); font-size: 11px; }
.am-native-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 6px 2px; }
.am-native-field { display: flex; flex-direction: column; gap: 2px; }
.am-native-field b { font-size: 13px; }
.am-native-ctrl { display: flex; gap: 8px; align-items: center; }
.am-native-ctrl input {
  background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border);
  color: var(--text); border-radius: 10px; padding: 7px 10px; font-family: 'Courier New', monospace;
}
.am-native-rules { border-top: 1px solid var(--glass-border); padding-top: 10px; }
.am-native-rules summary { cursor: pointer; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.am-native-rule { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 12px; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.am-native-rule em { color: var(--text-muted); font-style: normal; font-size: 11px; }
.am-native-empty { color: var(--text-muted); font-size: 12px; }

@media (max-width: 640px) {
  .arc-buttons { grid-template-columns: 1fr; }
  .arc-cooldowns { grid-template-columns: 1fr; }
  .arc-coin-pill { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .arc-reels:not(.done) .arc-reel,
  .arc-coin-wrap:not(.done) .arc-coin,
  .arc-cards:not(.done) .arc-card-mini,
  .arc-chamber:not(.done) .arc-chamber-cell,
  .arc-hands:not(.done) .arc-hand,
  .arc-labour:not(.done) .arc-labour-icon,
  .arc-marquee-star,
  .arc-coin-wrap.done .arc-coin.big,
  .arc-boom,
  .arc-ticker.fly,
  .arc-particle {
    animation: none !important;
  }
  .bj-card,
  .rr-log-item,
  .arc-warn-icon,
  .rr-chamber.spinning .arc-chamber-cell {
    animation: none !important;
  }
}

/* ==================================================
   AUTORESPONDER — Cyber-Bento Glassmorphism
   ================================================== */

/* ── Radio-Pill Cards (Match Type & Response Type) ── */
.ar-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ar-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(13, 15, 23, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, border-color, box-shadow;
}
.ar-pill input[type="radio"] { display: none; }
.ar-pill-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.08);
  color: #67e8f9;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.ar-pill-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.ar-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 243, 255, 0.35);
  box-shadow: 0 4px 20px rgba(0, 243, 255, 0.1);
}
.ar-pill:hover .ar-pill-label { color: var(--text-main); }
.ar-pill.active,
.ar-pill:has(input:checked) {
  border-color: rgba(0, 243, 255, 0.5);
  background: rgba(0, 212, 255, 0.1);
  box-shadow: 0 0 24px rgba(0, 243, 255, 0.12), inset 0 1px 1px rgba(255,255,255,0.08);
}
.ar-pill.active .ar-pill-label,
.ar-pill:has(input:checked) .ar-pill-label { color: #67e8f9; }
.ar-pill.active .ar-pill-icon,
.ar-pill:has(input:checked) .ar-pill-icon { background: rgba(0, 212, 255, 0.2); }

/* ── Channel Picker (Discord-like hierarchy) ── */
.ar-channel-picker {
  position: relative;
}
.ar-channel-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(13, 15, 23, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  color: var(--text-secondary);
  min-width: 220px;
}
.ar-channel-trigger:hover {
  border-color: rgba(0, 243, 255, 0.3);
  background: rgba(0, 212, 255, 0.06);
}
.ar-channel-trigger .ar-ch-icon { color: #67e8f9; flex-shrink: 0; }
.ar-channel-trigger .ar-ch-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-channel-trigger .ar-ch-chevron { color: var(--text-muted); transition: transform 0.2s ease; flex-shrink: 0; }
.ar-channel-trigger.open .ar-ch-chevron { transform: rotate(180deg); }
.ar-channel-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  border-radius: 14px;
  background: rgba(13, 15, 23, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 100;
  display: none;
}
.ar-channel-dropdown.open { display: block; }
.ar-ch-category {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ar-ch-category svg { width: 12px; height: 12px; opacity: 0.5; }
.ar-ch-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.ar-ch-option:hover { background: rgba(0, 212, 255, 0.08); color: var(--text-main); }
.ar-ch-option.selected { background: rgba(0, 212, 255, 0.15); color: #67e8f9; }
.ar-ch-option .ar-ch-hash { color: var(--text-muted); font-weight: 700; font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.ar-ch-option.selected .ar-ch-hash { color: #67e8f9; }
.ar-ch-option .ar-ch-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-ch-check { color: #22c55e; flex-shrink: 0; }

/* ── Editor Toolbar (above textarea) ── */
.ar-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px 10px 0 0;
  background: rgba(13, 15, 23, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none;
}
.ar-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(0, 212, 255, 0.06);
  border: 1px solid rgba(0, 212, 255, 0.12);
  color: #67e8f9;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.ar-toolbar-btn:hover {
  background: rgba(0, 212, 255, 0.14);
  border-color: rgba(0, 212, 255, 0.3);
  transform: translateY(-1px);
}
.ar-toolbar-btn svg { width: 14px; height: 14px; }
.ar-toolbar-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.06);
  margin: 0 4px;
  flex-shrink: 0;
}
.ar-toolbar + .ar-response-input,
.ar-toolbar + textarea {
  border-radius: 0 0 10px 10px;
}

/* ── Emoji / Channel / Variable Popover ── */
.ar-popover {
  position: absolute;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  border-radius: 12px;
  background: rgba(13, 15, 23, 0.9);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  padding: 6px;
  z-index: 120;
  display: none;
}
.ar-popover.open { display: block; }
.ar-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.ar-popover-item:hover { background: rgba(0, 212, 255, 0.08); color: var(--text-main); }
.ar-popover-item img { width: 20px; height: 20px; border-radius: 4px; }

/* ── Variant Badges (variables) ── */
.ar-var-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ar-var-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.06);
  color: #67e8f9;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ar-var-badge:hover {
  background: rgba(0, 212, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.5);
  border-style: solid;
  transform: translateY(-1px);
}
.ar-var-badge code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
}

/* ── Type Badge ── */
.ar-type-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.35);
  color: #67e8f9;
  vertical-align: middle;
}

/* ── Response Rows ── */
.ar-response-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.ar-response-row .ar-response-input { flex: 1; }
.ar-response-remove {
  flex: none;
  margin-top: 4px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

/* ── Live Preview ── */
.ar-preview {
  border-left: 4px solid #00d4ff;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 48px;
  position: relative;
  overflow: hidden;
}
.ar-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
  pointer-events: none;
}
.ar-preview-author { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.ar-preview-title { font-size: 15px; font-weight: 700; color: var(--text-main); }
.ar-preview-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; max-width: 420px; }
.ar-preview-thumb {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}
.ar-preview-img {
  width: 100%;
  max-width: 360px;
  border-radius: 8px;
  margin-top: 6px;
  object-fit: cover;
}
.ar-preview-footer {
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
  margin-top: 4px;
}

/* ── AR Editor Layout (two-column on desktop) ── */
.ar-editor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .ar-editor-layout { grid-template-columns: 1fr; }
}
.ar-editor-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── AR List Item (glassmorphism card) ── */
.ar-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(13, 15, 23, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}
.ar-list-item:hover {
  border-color: rgba(0, 243, 255, 0.2);
  background: rgba(13, 15, 23, 0.6);
}
.ar-list-info { flex: 1; min-width: 0; }
.ar-list-trigger {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ar-list-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ar-list-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ==================================================
   EMBED BUILDER v3 — Telegram Liquid + Dropzone + Toolbar
   ================================================== */

/* ── Keyframes ────────────────────────────────────── */
@keyframes eb-popIn {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes eb-shimmerBorder {
  0%   { border-color: rgba(0, 243, 255, 0.15); }
  50%  { border-color: rgba(0, 243, 255, 0.35); }
  100% { border-color: rgba(0, 243, 255, 0.15); }
}
@keyframes eb-telegramPop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes eb-rippleAnim {
  0%   { transform: scale(0); opacity: 0.35; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes eb-neonPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 212, 255, 0.2); }
  50%      { box-shadow: 0 0 14px rgba(0, 212, 255, 0.5); }
}
@keyframes eb-springIn {
  0%   { transform: scale(0.6) translateY(6px); opacity: 0; }
  70%  { transform: scale(1.08) translateY(-2px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Ripple ───────────────────────────────────────── */
.eb-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.25);
  pointer-events: none;
  animation: eb-rippleAnim 0.6s ease-out forwards;
  z-index: 0;
}
.btn, .eb-comp-remove, .eb-dz-browse, .eb-chp-item {
  position: relative;
  overflow: hidden;
}

/* ── 2-Column Layout ──────────────────────────────── */
.eb-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .eb-layout { grid-template-columns: 1fr; }
}

/* ── Editor Pane ──────────────────────────────────── */
.eb-editor-pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* ── Preview Pane (sticky) ────────────────────────── */
.eb-preview-pane {
  position: sticky;
  top: 20px;
  align-self: start;
}

/* ── Card (glassmorphism) ─────────────────────────── */
.eb-card {
  background: rgba(15, 17, 26, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 1.5rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.eb-card:hover { border-color: rgba(255, 255, 255, 0.1); }

.eb-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 1.25rem;
  letter-spacing: 0.02em;
}
.eb-card-title svg { color: #67e8f9; flex-shrink: 0; }

/* ── Field Group ──────────────────────────────────── */
.eb-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  width: 100%;
  margin-bottom: 1.25rem;
}
.eb-field:last-child { margin-bottom: 0; }

.eb-label {
  position: static !important;
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Field + Toolbar wrapper ──────────────────────── */
.eb-field-input {
  display: flex;
  flex-direction: column;
}

/* ── Toolbar (floating minimal icons) ──────────────── */
.eb-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 3px;
  padding: 2px 4px;
  border-radius: 0 0 10px 10px;
}
.eb-tb-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  padding: 0;
}
.eb-tb-btn:hover {
  color: #00d4ff;
  background: transparent;
  transform: scale(1.15);
}
.eb-tb-btn:active { transform: scale(0.95); }
.eb-tb-emoji svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.eb-tb-emoji:hover svg {
  transform: scale(1.2) rotate(-8deg);
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
}
.eb-tb-hash-icon {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease, color 0.2s ease;
}
.eb-tb-hash:hover .eb-tb-hash-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
  color: #00d4ff;
}

/* ── Input Base ───────────────────────────────────── */
.eb-input {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: rgba(18, 20, 29, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.eb-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.eb-input:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(18, 20, 29, 0.85);
}
.eb-input:focus {
  border-color: rgba(0, 243, 255, 0.4);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.12);
  background: rgba(18, 20, 29, 0.9);
}
.eb-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }

select.eb-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ── Avatar Dropzone (dual mode) ──────────────────── */
.eb-wh-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
@media (max-width: 640px) {
  .eb-wh-header { flex-direction: column; }
}
.eb-avatar-dz {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eb-avatar-preview {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(18, 20, 29, 0.5);
  border: 2px dashed rgba(0, 212, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}
.eb-avatar-preview:hover {
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
}
.eb-avatar-preview.eb-avatar-has { border-style: solid; }
.eb-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.eb-avatar-url-input {
  font-size: 12px !important;
  padding: 0.5rem 0.75rem !important;
}

/* ── Image Dropzones ──────────────────────────────── */
.eb-dz-wrapper { margin-bottom: 1.25rem; }
.eb-dz-wrapper:last-child { margin-bottom: 0; }
.eb-dz-url-input { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.eb-dz {
  position: relative;
  border: 2px dashed rgba(0, 212, 255, 0.15);
  border-radius: 12px;
  background: rgba(18, 20, 29, 0.35);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.eb-dz:hover {
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(18, 20, 29, 0.5);
}
.eb-dz-dragover {
  border-color: #00d4ff !important;
  background: rgba(0, 212, 255, 0.08) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}
.eb-dz-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.eb-dz-dragover .eb-dz-placeholder { opacity: 0.4; }
.eb-dz-placeholder svg { color: rgba(0, 212, 255, 0.35); }
.eb-dz-browse {
  pointer-events: all;
  text-decoration: underline;
  font-size: 12px;
}
.eb-dz-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(13, 15, 23, 0.8);
  border-radius: 12px;
  pointer-events: none;
}
.eb-dz-preview.eb-dz-has-image { opacity: 1; pointer-events: all; }
.eb-dz-preview img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 6px;
  animation: eb-telegramPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-dz-error {
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
}
.eb-dz-input {
  margin-top: 6px;
}

/* ── Color Row ────────────────────────────────────── */
.eb-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eb-color-picker {
  width: 44px;
  height: 38px;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 8px;
  flex-shrink: 0;
}
.eb-color-btn {
  width: 56px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #5865F2;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -6px 12px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.eb-color-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.02) 55%);
  pointer-events: none;
}
.eb-color-btn:hover { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -6px 12px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.45); }
.eb-color-pipette {
  position: relative;
  z-index: 1;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
  pointer-events: none;
}
.eb-color-hex { max-width: 100px; }

/* ── Component Count Badge ────────────────────────── */
.eb-component-count {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Reaction Role Card (Zira-style) ──────────────── */
.eb-comp-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.eb-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

.eb-rr-card {
  background: rgba(18, 20, 29, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  animation: eb-springIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-rr-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.eb-rr-card-exit {
  animation: eb-rrExit 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
@keyframes eb-rrExit {
  0%   { opacity: 1; transform: scale(1) translateX(0); max-height: 120px; margin-bottom: 8px; }
  40%  { opacity: 0.5; transform: scale(0.96) translateX(20px); }
  100% { opacity: 0; transform: scale(0.92) translateX(40px); max-height: 0; margin-bottom: 0; padding: 0 14px; overflow: hidden; }
}

.eb-rr-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Style Chips (botón) ───────────────────────────── */
.eb-rr-style-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.eb-rr-style-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(18, 20, 29, 0.5);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-rr-style-opt:hover {
  border-color: rgba(0, 212, 255, 0.35);
  color: #fff;
}
.eb-rr-style-opt.active {
  border-color: var(--d, #5865F2);
  background: rgba(0, 212, 255, 0.1);
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}
.eb-rr-style-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── URL mode (botón enlace) ───────────────────────── */
.eb-rr-url-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 10px 6px 12px;
  border-radius: 9px;
  background: rgba(0, 212, 255, 0.045);
  border: 1px solid rgba(0, 212, 255, 0.13);
}
.eb-rr-url-mode-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.eb-rr-url-mode-label svg { color: #00d4ff; flex-shrink: 0; }
.eb-rr-url-wrap { position: relative; margin-top: 10px; }
.eb-rr-web-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #00d4ff;
  pointer-events: none;
}
.eb-rr-url {
  font-size: 12px !important;
  padding: 0.45rem 2.6rem 0.45rem 0.7rem !important;
  border-radius: 8px !important;
  font-family: 'SF Mono', 'Fira Code', monospace;
  opacity: 0.95;
}

/* ── Action line (rol + modo + custom id) ──────────── */
.eb-rr-action-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.eb-rr-customid {
  flex: 1;
  min-width: 0;
  font-size: 12px !important;
  padding: 0.4rem 0.7rem !important;
  border-radius: 8px !important;
  font-family: 'SF Mono', 'Fira Code', monospace;
  opacity: 0.85;
}

/* ── Preview: icono de botón enlace ────────────────── */
.eb-discord-btn-link { margin-left: 8px; opacity: 0.75; vertical-align: middle; }

/* ── Emoji Button (circular) ───────────────────────── */
.eb-rr-emoji-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed rgba(0, 212, 255, 0.25);
  background: rgba(18, 20, 29, 0.5);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  font-size: 18px;
  line-height: 1;
}
.eb-rr-emoji-btn:hover {
  border-color: #00d4ff;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
  transform: scale(1.08);
}
.eb-rr-emoji-btn:active { transform: scale(0.95); }
.eb-rr-emoji-btn img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}
.eb-rr-emoji-btn svg { pointer-events: none; }

/* ── Label Input ────────────────────────────────────── */
.eb-rr-label-wrap {
  flex: 1;
  min-width: 0;
}
.eb-rr-label {
  font-size: 13px !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 8px !important;
}

/* ── Role Selector Button ───────────────────────────── */
.eb-rr-role-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 32px;
  border-radius: 8px;
  background: rgba(18, 20, 29, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
}
.eb-rr-role-btn:hover {
  background: rgba(18, 20, 29, 0.8);
  border-color: rgba(255, 255, 255, 0.18);
}
.eb-rr-role-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eb-rr-role-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eb-rr-role-btn svg {
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.eb-rr-role-btn:hover svg { transform: translateY(1px); }

/* ── Mode Toggle (Pill) ────────────────────────────── */
.eb-rr-mode {
  display: flex;
  background: rgba(18, 20, 29, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}
.eb-rr-mode-opt {
  width: 28px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.eb-rr-mode-opt:hover {
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.08);
}
.eb-rr-mode-opt.active {
  background: rgba(0, 212, 255, 0.18);
  color: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.15);
}

/* ── Delete Button ──────────────────────────────────── */
.eb-rr-delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.eb-rr-delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}
.eb-rr-delete:active { transform: scale(0.9); }

/* ── Card Bottom (type badge + custom ID) ───────────── */
.eb-rr-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.eb-rr-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
}
.eb-rr-custom-id {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  opacity: 0.6;
}

/* ── Role Picker Popover ────────────────────────────── */
.eb-role-picker { width: 260px; max-height: 340px; overflow-y: auto; }
.eb-chp-search { padding: 10px 14px 6px; }
.eb-chp-search .eb-input { font-size: 12px; padding: 0.45rem 0.75rem; }
.eb-rp-list { padding: 4px 0 8px; }
.eb-rp-item { gap: 10px; }
.eb-rp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eb-rp-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.5;
}

/* ── Send Bar ─────────────────────────────────────── */
.eb-send-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eb-send-bar .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.7rem 1.5rem;
}
.eb-send-btn {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(88, 101, 242, 0.2));
  border: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-send-btn:hover {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(88, 101, 242, 0.3));
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
  transform: translateY(-1px);
}

/* ── Preview Card (shimmer) ───────────────────────── */
.eb-preview-card {
  background: rgba(15, 17, 26, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(0, 243, 255, 0.15);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 1.5rem;
  animation: eb-shimmerBorder 4s ease-in-out infinite;
}

/* ── Discord Preview Simulation ───────────────────── */
.eb-discord-channel {
  background: rgba(54, 57, 63, 0.4);
  border-radius: 8px;
  padding: 16px;
  min-height: 120px;
}
.eb-discord-msg { display: flex; gap: 12px; padding: 4px 0; }
.eb-discord-avatar { flex-shrink: 0; }
.eb-discord-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865F2, #a855f7);
  transition: all 0.3s ease;
}
.eb-discord-avatar-circle img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.eb-discord-body { flex: 1; min-width: 0; }
.eb-discord-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.eb-discord-name { font-size: 15px; font-weight: 600; color: #fff; }
.eb-discord-bot-tag {
  background: #5865F2;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.eb-discord-time { font-size: 11px; color: rgba(255, 255, 255, 0.3); }
.eb-discord-content {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Markdown inline del preview: respeta saltos de línea y formatea el texto igual
   que Discord (negrita, cursiva, tachado, subrayado, código). */
.eb-discord-embed-author { white-space: pre-wrap; overflow-wrap: anywhere; }
.eb-discord-embed-title { white-space: pre-wrap; overflow-wrap: anywhere; }
.eb-discord-embed-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.eb-discord-embed-footer { white-space: pre-wrap; overflow-wrap: anywhere; }
.eb-sel-pv-label { white-space: pre-wrap; overflow-wrap: anywhere; }
.eb-sel-pv-desc { white-space: pre-wrap; overflow-wrap: anywhere; }
.eb-md-code {
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  color: #00d4ff;
}
.eb-md-emoji-img { width: 18px; height: 18px; vertical-align: -3px; margin: 0 1px; }
.eb-md-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.12); margin: 0 2px; flex-shrink: 0; }

/* ── Guía de formato + nota de emojis (dark/glass) ── */
.eb-md-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 5px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eb-md-hint-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-right: 2px;
}
.eb-md-chip {
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-md-chip:hover {
  transform: scale(1.12);
  background: rgba(0, 212, 255, 0.16);
  border-color: rgba(0, 212, 255, 0.35);
  color: #00d4ff;
}
.eb-md-chip code { font-size: 11px; color: #00d4ff; }
.eb-md-emoji-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-muted);
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.22);
  border-radius: 8px;
  padding: 5px 9px;
  line-height: 1.4;
}
.eb-md-emoji-note code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.3);
  padding: 0 4px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
}

/* ── Discord Embed ────────────────────────────────── */
.eb-discord-embed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  max-width: 520px;
  margin-top: 6px;
  position: relative;
  animation: eb-telegramPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-discord-embed-icon { width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.eb-discord-embed-author { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); }
.eb-discord-embed-title { font-size: 15px; font-weight: 700; color: #fff; }
.eb-discord-embed-desc { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.45; }
.eb-discord-embed-image img { width: 100%; border-radius: 4px; margin-top: 4px; max-height: 300px; object-fit: cover; }
.eb-discord-embed-thumb {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}
.eb-discord-embed-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
}
.eb-discord-embed-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.eb-discord-embed-field { flex: 1 1 100%; min-width: 0; }
.eb-discord-embed-field.inline { flex: 1 1 30%; }
.eb-discord-embed-field-name {
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.eb-discord-embed-field-value {
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.8); line-height: 1.35;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── Discord Components ───────────────────────────── */
.eb-discord-components { margin-top: 8px; }
.eb-discord-action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.eb-discord-btn {
  padding: 6px 16px;
  border-radius: 3px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
}
.eb-discord-btn-emoji { margin-right: 4px; }
.eb-discord-btn-emoji img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; vertical-align: -4px; }
.eb-discord-btn-1 { background: #5865F2; }
.eb-discord-btn-2 { background: rgba(255,255,255,0.08); color: #fff; }
.eb-discord-btn-3 { background: #57F287; color: #000; }
.eb-discord-btn-4 { background: #ED4245; }
.eb-discord-btn-5 { background: transparent; color: #00d4ff; text-decoration: underline; }
.eb-discord-select {
  padding: 6px 12px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 13px;
  cursor: default;
}

/* ── Popovers (Telegram liquid) ───────────────────── */
.eb-popover {
  position: fixed;
  z-index: 9999;
  border-radius: 14px;
  background: rgba(13, 15, 23, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92) translateY(-4px);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.eb-popover-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

/* ── Emoji Picker Popover ─────────────────────────── */
.eb-emoji-picker { width: 260px; max-height: 380px; overflow-y: auto; }
.eb-ep-search { padding: 10px 14px 6px; position: sticky; top: 0; background: rgba(13, 15, 23, 0.98); z-index: 1; }
.eb-ep-search .eb-input { font-size: 12px; padding: 0.45rem 0.75rem; }
.eb-ep-section {
  padding: 8px 14px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.eb-ep-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 2px 8px 4px;
}
.eb-ep-item {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.eb-ep-item img { width: 24px; height: 24px; }
.eb-ep-cell { position: relative; display: inline-flex; }
.eb-ep-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #23a559, #57f287);
  color: #04140a;
  padding: 2px 3px;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.eb-ep-item:hover {
  background: rgba(0, 212, 255, 0.12);
  transform: scale(1.2);
}

/* ── Channel Picker Popover ───────────────────────── */
.eb-channel-picker { width: 240px; max-height: 320px; overflow-y: auto; }
.eb-chp-header {
  padding: 12px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  position: sticky;
  top: 0;
  background: rgba(13, 15, 23, 0.98);
  z-index: 1;
}
.eb-chp-category {
  padding: 6px 14px 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.eb-chp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: left;
  width: 100%;
}
.eb-chp-item:hover {
  background: rgba(0, 212, 255, 0.08);
  color: #fff;
}
.eb-chp-hash {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-muted);
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.eb-chp-item:hover .eb-chp-hash { color: #00d4ff; }

/* ── Particle Canvas ──────────────────────────────── */
.eb-particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
}

/* ── Topbar (Save / Load) ─────────────────────────── */
.eb-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.25rem;
  padding: 8px 12px;
  background: rgba(15, 17, 26, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}
.eb-topbar-spacer { flex: 1; }
.eb-topbar-btn { gap: 6px; }

/* ── Mode Selector (Normal / Premium) ──────────────── */
.eb-mode-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  margin-bottom: 1.25rem;
  background: rgba(15, 17, 26, 0.65);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.04);
}
.eb-mode-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-mode-opt svg { color: inherit; flex-shrink: 0; }
.eb-mode-opt:hover { color: var(--text-secondary); }
.eb-mode-opt.active {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(168, 85, 247, 0.18));
  color: #fff;
  box-shadow: 0 0 16px var(--accent-glow), inset 0 0 0 1px rgba(168, 85, 247, 0.35);
}
.eb-mode-premium-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--accent-gradient);
  color: #fff;
}

/* ── Premium Banner (solo owner) ───────────────────── */
.eb-premium-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.16), rgba(168, 85, 247, 0.16));
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.1);
  color: #fff;
  font-size: 13px;
  animation: eb-premiumIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-premium-banner svg { color: #a855f7; flex-shrink: 0; }
.eb-premium-banner strong { display: block; font-size: 13px; }
.eb-premium-banner span { color: var(--text-muted); font-size: 12px; }
.eb-premium-banner[hidden] { display: none !important; }
@keyframes eb-premiumIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Lock Panel (usuarios normales) ────────────────── */
.eb-premium-lock {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  animation: eb-premiumIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-premium-lock[hidden] { display: none !important; }
.eb-premium-lock-card {
  width: min(440px, 100%);
  text-align: center;
  padding: 40px 32px 28px;
  border-radius: 20px;
  background: rgba(15, 17, 26, 0.72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
}
.eb-premium-lock-icon {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  color: var(--accent);
  animation: eb-premiumPulse 2.6s ease-in-out infinite;
}
.eb-cog {
  position: absolute;
  stroke: currentColor;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}
.eb-cog-a {
  width: 84px;
  height: 84px;
  left: 4px;
  top: 6px;
  animation: eb-spin 6s linear infinite;
}
.eb-cog-b {
  width: 56px;
  height: 56px;
  left: 42px;
  top: 40px;
  color: var(--primary);
  animation: eb-spinRev 4.5s linear infinite;
}
.eb-wrench {
  position: absolute;
  width: 22px;
  height: 22px;
  right: 6px;
  bottom: 4px;
  color: #57F287;
  filter: drop-shadow(0 0 6px rgba(87, 242, 135, 0.6));
  animation: eb-wrenchShake 2.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes eb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes eb-spinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes eb-wrenchShake {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(18deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(0deg); }
}
@keyframes eb-premiumPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.eb-premium-lock-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.eb-premium-lock-text {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ── Premium Build: Línea de Tiempo ────────────────── */
.eb-premium-timeline {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(88, 101, 242, 0.08), rgba(168, 85, 247, 0.06));
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.04);
  animation: eb-premiumIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-premium-timeline[hidden] { display: none !important; }
.eb-pt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.eb-pt-title { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #fff; }
.eb-pt-title svg { color: #a855f7; flex-shrink: 0; }
.eb-pt-hint {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #a855f7;
  background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.25);
  padding: 3px 10px; border-radius: 99px; white-space: nowrap;
}
.eb-pt-track-wrap { position: relative; display: flex; align-items: center; gap: 8px; }
.eb-pt-track {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; flex: 1; min-width: 0;
  scrollbar-width: none; scroll-snap-type: x proximity;
}
.eb-pt-track::-webkit-scrollbar { display: none; }
.eb-pt-scroll {
  width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s; font-family: inherit;
}
.eb-pt-scroll:hover { color: #fff; border-color: rgba(168, 85, 247, 0.5); }
.eb-pt-scroll[hidden] { display: none; }
.eb-pt-slide {
  flex-shrink: 0; width: 200px; scroll-snap-align: center;
  display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 17, 26, 0.6);
  color: var(--text-muted); cursor: pointer; text-align: left; font-family: inherit;
  position: relative; overflow: hidden; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-pt-slide:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.eb-pt-slide.active {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.22), rgba(168, 85, 247, 0.22));
  border-color: rgba(168, 85, 247, 0.55); color: #fff;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.25);
}
.eb-pt-slide.active::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #5865f2, #a855f7);
}
.eb-pt-num { font-size: 11px; font-weight: 800; color: #a855f7; letter-spacing: 0.05em; }
.eb-pt-slide.active .eb-pt-num { color: #fff; }
.eb-pt-label { font-size: 12.5px; font-weight: 600; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eb-pt-badges { display: flex; gap: 5px; }
.eb-pt-badges i {
  font-style: normal; font-size: 9px; font-weight: 700; color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06); padding: 2px 6px; border-radius: 6px;
}
.eb-pt-addslide { align-items: center; justify-content: center; background: rgba(168, 85, 247, 0.08); border-style: dashed; }
.eb-pt-addslide .eb-pt-num { font-size: 16px; }
.eb-pt-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── Premium Build: Campos (fields) ────────────────── */
.eb-premium-fields {
  margin-top: 6px; padding: 12px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.18); border: 1px dashed rgba(168, 85, 247, 0.35);
}
.eb-premium-fields[hidden] { display: none !important; }
.eb-ff-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.eb-ff-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.eb-ff-cols { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.eb-ff-cols-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.eb-ff-grid { display: grid; gap: 8px; }
.eb-ff-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .eb-ff-grid.three-col { grid-template-columns: 1fr; } }
.eb-ff-row {
  display: flex; gap: 10px; align-items: flex-start; min-width: 0;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; padding: 9px; transition: all 0.2s;
}
.eb-ff-row:focus-within { border-color: rgba(168, 85, 247, 0.35); }
.eb-ff-grid.three-col .eb-ff-row { flex-direction: column; gap: 8px; }
.eb-ff-nv { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eb-ff-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.eb-ff-inline { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.eb-ff-inline:hover { color: #fff; }
.eb-ff-del {
  width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.eb-ff-del:hover { color: #ed4245; border-color: rgba(237, 66, 69, 0.45); background: rgba(237, 66, 69, 0.08); }

/* ── Premium Build: Botones de navegación ──────────── */
.eb-premium-nav { animation: eb-premiumIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.eb-premium-nav[hidden] { display: none !important; }
.eb-nav-hint { margin: -2px 0 12px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.eb-nav-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.eb-nav-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); flex-shrink: 0; width: 70px;
}
.eb-nav-looks { display: flex; gap: 8px; flex-wrap: wrap; }
.eb-nav-look {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.045);
  color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all 0.2s;
}
.eb-nav-look:hover { color: #fff; }
.eb-nav-look.active {
  color: #fff; border-color: var(--nc);
  background: color-mix(in srgb, var(--nc) 13%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--nc) 40%, transparent);
}
.eb-nav-look-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.eb-nav-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.eb-nav-check {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted);
  cursor: pointer; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px; background: rgba(255, 255, 255, 0.04); transition: all 0.2s;
}
.eb-nav-check:hover { color: #fff; }
.eb-nav-check input { accent-color: #a855f7; }

/* Fila pres en la lista de componentes (paginación inyectada) */
.eb-rr-pres-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.eb-rr-pres-badge { font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.eb-rr-pres-seq {
  font-size: 10px; font-weight: 600; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}

/* ── Premium Build: botones de paginación (preview) ── */
.eb-pres-btn { position: relative; overflow: hidden; }
.eb-pres-btn.pres-primary { background: #5865f2 !important; box-shadow: 0 0 10px rgba(88, 101, 242, 0.4); }
.eb-pres-btn.pres-accent {
  background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.eb-pres-btn.pres-neon {
  background: linear-gradient(120deg, #5865f2, #a855f7, #ec4899) !important;
  background-size: 220% 100% !important;
  animation: eb-presNeon 2.4s ease infinite !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
}
@keyframes eb-presNeon {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Premium Build: frame estilo Discord ───────────── */
.eb-pv-badge {
  margin-left: auto; display: none; font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2px 8px; border-radius: 99px; background: linear-gradient(135deg, #5865f2, #a855f7);
  color: #fff; box-shadow: 0 0 12px rgba(168, 85, 247, 0.4); flex-shrink: 0;
}
.eb-dc-frame { position: relative; border-radius: 14px; overflow: hidden; }
.eb-dc-rail, .eb-dc-sidebar, .eb-dc-chat-head, .eb-dc-chat-input { display: none; }
.eb-dc-chat { display: block; min-width: 0; }

.eb-layout-premium { grid-template-columns: 1fr 1.35fr; }
@media (max-width: 960px) { .eb-layout-premium { grid-template-columns: 1fr; } }
.eb-layout-premium .eb-msg-tabs-card { display: none; }
.eb-layout-premium .eb-pv-badge { display: inline-block; }
.eb-dc-rail-item svg { pointer-events: none; }

.eb-layout-premium .eb-dc-frame {
  display: flex; height: 560px; margin-top: 12px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #1e1f22; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: eb-dcIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-layout-premium .eb-dc-rail {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px;
  padding: 10px 6px; background: #1e1f22; border-right: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0; overflow-y: auto; animation: eb-dcIn 0.35s ease-out both;
}
.eb-dc-rail-item {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #8b919e;
  background: #2b2d31; transition: all 0.2s; font-size: 0;
}
.eb-dc-rail-item svg { width: 18px; height: 18px; }
.eb-dc-rail-active { background: linear-gradient(135deg, #5865f2, #a855f7); color: #fff; }
.eb-dc-rail-av {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #5865f2, #a855f7);
}
.eb-dc-rail-sep { width: 28px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); margin: 2px 0; flex-shrink: 0; }
.eb-layout-premium .eb-dc-sidebar {
  display: flex; flex-direction: column; gap: 2px; width: 210px; flex-shrink: 0;
  background: #2b2d31; padding: 10px 8px 6px; overflow: hidden;
  animation: eb-dcIn 0.45s ease-out 0.05s both;
}
.eb-dc-sb-title { font-size: 13px; font-weight: 700; color: #fff; padding: 4px 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-dc-sb-grp {
  display: flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700;
  color: #949cf7; text-transform: uppercase; letter-spacing: 0.02em; padding: 8px 8px 3px;
}
.eb-dc-sb-grp svg { width: 10px; height: 10px; transform: rotate(0deg); flex-shrink: 0; }
.eb-dc-sb-link { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 4px; font-size: 13px; color: #8b919e; }
.eb-dc-sb-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.eb-dc-sb-active { background: rgba(88, 101, 242, 0.25); color: #fff; }
.eb-dc-sb-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.eb-dc-sb-avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #5865f2, #a855f7); }
.eb-dc-sb-name { font-size: 12px; font-weight: 600; color: #fff; }

.eb-layout-premium .eb-dc-chat { display: flex; flex-direction: column; flex: 1; min-width: 0; background: #313338; }
.eb-layout-premium .eb-dc-chat-head {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; font-weight: 600; color: #fff;
  animation: eb-dcIn 0.35s ease-out 0.1s both;
}
.eb-dc-chat-head svg { width: 16px; height: 16px; color: #8b919e; }
.eb-layout-premium .eb-dc-chat .eb-discord-channel {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px; background: transparent; border-radius: 0;
}
.eb-layout-premium .eb-dc-chat-input {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 14px 14px; padding: 8px 10px; border-radius: 8px; background: #383a40;
  color: #8b919e; font-size: 13px; flex-shrink: 0;
}
.eb-dc-chat-ph { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-dc-chat-icons { display: flex; gap: 8px; align-items: center; color: #8b919e; flex-shrink: 0; }
.eb-dc-chat-icons svg { width: 16px; height: 16px; }
@keyframes eb-dcIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}

/* ── Premium Build: colores neón en el picker ──────── */
.eb-cp-swatch-sep {
  display: flex; align-items: center; gap: 8px; margin: 10px 12px 8px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted);
}
.eb-cp-swatch-sep::before, .eb-cp-swatch-sep::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); }
.eb-cp-neon .eb-cp-swatch { box-shadow: 0 0 10px rgba(168, 85, 247, 0.35); }
.eb-cp-neon .eb-cp-swatch:hover { box-shadow: 0 0 16px rgba(168, 85, 247, 0.6); }

/* ── Modal System ─────────────────────────────────── */
.eb-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
}
.eb-modal-open { opacity: 1; }

.eb-modal {
  background: rgba(15, 17, 26, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  width: 90%;
  max-width: 420px;
  max-height: 80vh;
  overflow: hidden;
  transform: scale(0.92) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.eb-modal-open .eb-modal { transform: scale(1) translateY(0); }
.eb-modal-wide { max-width: 540px; }

.eb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.eb-modal-head h3 { font-size: 15px; font-weight: 700; color: var(--text-main); margin: 0; }
.eb-modal-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: none;
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease; font-size: 14px;
}
.eb-modal-close:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

.eb-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  max-height: 60vh;
}

/* ── Load List Items ──────────────────────────────── */
.eb-load-list { display: flex; flex-direction: column; gap: 6px; }
.eb-load-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.eb-load-item:hover { border-color: rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.3); }
.eb-load-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.eb-load-name { font-size: 13px; font-weight: 600; color: var(--text-main); }
.eb-load-date { font-size: 11px; color: var(--text-muted); }
.eb-load-actions { display: flex; gap: 4px; flex-shrink: 0; }
.eb-load-edit, .eb-load-delete {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; border: none;
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: all 0.2s ease;
}
.eb-load-edit:hover { color: #00d4ff; background: rgba(0, 212, 255, 0.1); }
.eb-load-delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); }

/* ── Telegram Switch (multi/single toggle) ────────── */
.eb-rr-select-opts {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eb-rr-multi-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.eb-telegram-switch {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
}
.eb-telegram-switch.active {
  background: rgba(0, 212, 255, 0.2);
  border-color: rgba(0, 212, 255, 0.4);
}
.eb-ts-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-telegram-switch.active .eb-ts-knob {
  left: 16px;
  background: #00d4ff;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
.eb-rr-minmax {
  width: 48px !important;
  padding: 0.3rem 0.5rem !important;
  font-size: 12px !important;
  text-align: center;
}

/* ── Select Menu: editor de opciones ───────────────── */
.eb-sel-ph {
  font-size: 12px !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 8px !important;
}
.eb-sel-opts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.eb-opt-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  animation: eb-optIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-opt-exit {
  animation: eb-optOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}
@keyframes eb-optIn {
  0% { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes eb-optOut {
  0% { opacity: 1; transform: translateX(0); max-height: 84px; }
  100% { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; overflow: hidden; }
}
.eb-opt-emoji {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px dashed rgba(0, 212, 255, 0.25);
  background: rgba(18, 20, 29, 0.5);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}
.eb-opt-emoji:hover {
  border-color: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
  transform: scale(1.08);
}
.eb-opt-emoji img { width: 18px; height: 18px; border-radius: 4px; }
.eb-opt-emoji svg { pointer-events: none; }
.eb-opt-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eb-opt-line1 {
  display: flex;
  align-items: center;
  gap: 6px;
}
.eb-opt-label {
  flex: 1.4;
  font-size: 12px !important;
  padding: 0.4rem 0.6rem !important;
  border-radius: 8px !important;
}
.eb-opt-value {
  flex: 1;
  font-size: 11px !important;
  padding: 0.4rem 0.6rem !important;
  border-radius: 8px !important;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.eb-opt-desc {
  font-size: 11px !important;
  padding: 0.35rem 0.6rem !important;
  border-radius: 8px !important;
}
.eb-ts-sm { width: 28px; height: 17px; }
.eb-ts-sm .eb-ts-knob { width: 11px; height: 11px; top: 2px; left: 2px; }
.eb-ts-sm.active .eb-ts-knob { left: 13px; }
.eb-opt-delete {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}
.eb-opt-delete:hover:not(:disabled) {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
  transform: scale(1.1);
}
.eb-opt-delete:disabled { opacity: 0.3; cursor: not-allowed; }
.eb-sel-addrow {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.eb-sel-add-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px dashed rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.06);
  color: #00d4ff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eb-sel-add-opt:hover:not(:disabled) {
  background: rgba(0, 212, 255, 0.14);
  border-color: #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
  transform: translateY(-1px);
}
.eb-sel-add-opt:active:not(:disabled) { transform: scale(0.97); }
.eb-sel-add-opt:disabled { opacity: 0.35; cursor: not-allowed; }
.eb-sel-count {
  font-size: 10px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ── Vista previa: menú Select simulado de Discord ── */
.eb-sel-pv { width: 100%; max-width: 340px; }
.eb-sel-pv-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
}
.eb-sel-pv-caret { color: var(--text-muted); flex-shrink: 0; }
.eb-sel-pv-menu {
  margin-top: 4px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(30, 33, 43, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.eb-sel-pv-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.eb-sel-pv-opt:last-child { border-bottom: none; }
.eb-sel-pv-opt:hover { background: rgba(88, 101, 242, 0.08); }
.eb-sel-pv-sel { background: rgba(88, 101, 242, 0.14); }
.eb-sel-pv-emoji {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eb-sel-pv-emoji img { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; }
.eb-sel-pv-meta { flex: 1; min-width: 0; }
.eb-sel-pv-label { color: #fff; font-size: 13px; }
.eb-sel-pv-desc {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 1px;
}
.eb-sel-pv-check { color: #57f287; font-size: 13px; flex-shrink: 0; }
.eb-sel-pv-empty {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
}
.eb-sel-pv-multi .eb-sel-pv-trigger {
  border-color: rgba(0, 212, 255, 0.25);
  background: rgba(0, 212, 255, 0.06);
}

/* ── Message / Embed Tabs ─────────────────────────── */
.eb-tab-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eb-tab {
  position: relative;
  padding: 0.4rem 0.9rem;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.eb-tab-sm { font-size: 11px; padding: 0.3rem 0.65rem; }
.eb-tab:hover { color: #fff; border-color: rgba(0, 212, 255, 0.25); }
.eb-tab-active {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.22), rgba(88, 101, 242, 0.22));
  border-color: rgba(0, 212, 255, 0.4);
  color: #fff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.15);
}
.eb-tab-add { color: #00d4ff; border-style: dashed; }
.eb-msg-indicator {
  font-size: 12px;
  font-weight: 700;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.12);
  padding: 2px 8px;
  border-radius: 8px;
}

/* ── Premium Color Picker (glassmorphism) ─────────── */
.eb-color-picker-popover { width: 236px; background: rgba(16, 18, 28, 0.82); }
.eb-cp-swatches {
  display: flex;
  gap: 10px;
  padding: 12px 14px 4px;
  flex-wrap: wrap;
}
.eb-cp-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.eb-cp-swatch:hover { transform: scale(1.2); }
.eb-cp-swatch-active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,212,255,0.6); }
.eb-cp-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin-top: 6px;
}
.eb-cp-droplet {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}
.eb-cp-droplet:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.1); }
.eb-cp-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.eb-cp-droplet-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.eb-cp-hex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.eb-cp-tools .eb-cp-hex-row { margin: 0; padding: 0; border-top: 0; flex: 1; }
.eb-cp-tools .eb-cp-hex-row > span { color: var(--text-muted); font-size: 12px; }
.eb-cp-hex-input { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; }

/* ── Role Picker Popover ──────────────────────────── */
.eb-role-picker .eb-chp-search { padding: 6px 14px 8px; position: sticky; top: 0; background: rgba(13,15,23,0.98); z-index: 1; }
.eb-rp-list { max-height: 260px; overflow-y: auto; }
.eb-rp-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.eb-rp-count { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.eb-role-picker .eb-rp-item { padding: 7px 12px; }

/* ── Stacked Preview Messages ─────────────────────── */
.eb-preview-msg {
  border-radius: 8px;
  padding: 4px 6px;
  transition: all 0.25s ease;
}
.eb-preview-msg-active {
  background: rgba(0, 212, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.15);
}

/* ── Selector de canal: estados (error / vacío) ── */
.eb-select-error {
  border-color: rgba(237, 66, 69, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(237, 66, 69, 0.15), 0 0 12px rgba(237, 66, 69, 0.1) !important;
  background: rgba(237, 66, 69, 0.06) !important;
  animation: eb-shake 0.4s ease;
}
.eb-retry-btn {
  margin-top: 8px;
  border-color: rgba(237, 66, 69, 0.4) !important;
  color: #f87171 !important;
}
.eb-retry-btn:hover {
  background: rgba(237, 66, 69, 0.1) !important;
  border-color: rgba(237, 66, 69, 0.7) !important;
}
@keyframes eb-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* ==================================================
   SCROLLBARS GLOBALES INVISIBLES
   Sin barra visible en NINGUNA parte (main, sidebar,
   tarjetas, grids, listas, tablas). Se mantiene el
   scroll con wheel / touch / drag.
   ================================================== */
html, body, div, main, section, aside, nav, header, footer, ul, ol, li, table, pre, code, textarea, input, select, button, span, p {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
div::-webkit-scrollbar,
main::-webkit-scrollbar,
section::-webkit-scrollbar,
aside::-webkit-scrollbar,
nav::-webkit-scrollbar,
header::-webkit-scrollbar,
footer::-webkit-scrollbar,
ul::-webkit-scrollbar,
ol::-webkit-scrollbar,
table::-webkit-scrollbar,
pre::-webkit-scrollbar,
code::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.dashboard-main::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.nk-grid::-webkit-scrollbar,
.settings-panel::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.lyrics-inner::-webkit-scrollbar,
.owner-scroll::-webkit-scrollbar,
.arccard-studio-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ==================================================
   BENTO / HACKER GRID
   Layout modular: repeat(auto-fit, minmax(320px, 1fr))
   para que las tarjetas rellenen la fila completa y
   fluyan como bloques Bento/Hacker.
   ================================================== */
.nk-grid,
.hero-stats-grid,
.two-col-grid,
.music-commands-grid,
.music-cmds-grid,
.badge-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 14px !important;
  align-items: start;
}

/* Stats globales del dashboard: grid-cols-1 / md:grid-cols-2 / lg:grid-cols-4
   con gap 24px (anula el auto-fit compartido de arriba). */
.hero-stats-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  align-items: stretch;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
  .hero-stats-grid { grid-template-columns: 1fr !important; }
}

/* Lista de comandos: altura limitada + scroll interno invisible
   (la página nunca crece; la tarjeta scrollea con wheel). */
.nk-grid {
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 2px;
}

/* Tarjetas Bento: altura adaptable con borde neón tenue. */
.nk-card,
.hero-stat-card,
.stat-card,
.music-cmd-card {
  min-height: 120px;
  height: auto;
}

/* ==================================================
   ARCCARD STUDIO
   Editor de perfil global con vista previa en canvas.
   ================================================== */
.arcstudio-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.2fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px) {
  .arcstudio-layout { grid-template-columns: 1fr; }
}
.arcstudio-controls,
.arcstudio-preview {
  padding: 20px;
}
.arcstudio-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main);
  margin: 18px 0 10px;
  text-transform: uppercase;
}
.arcstudio-title:first-child { margin-top: 0; }
.arcstudio-opt-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.arcstudio-opt-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}
.arcstudio-opt-btn b { font-size: 12.5px; color: var(--text-main); }
.arcstudio-opt-btn small { font-size: 11px; color: var(--text-muted); }
.arcstudio-opt-btn:hover { border-color: rgba(168, 85, 247, 0.4); transform: translateY(-1px); }
.arcstudio-opt-btn.active {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.16);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}
.arcstudio-opt-btn.active b { color: #fff; }
.arcstudio-accent-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.arcstudio-color {
  width: 46px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: transparent;
  padding: 2px;
  cursor: pointer;
}
.arcstudio-accent-slider {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arcstudio-accent-slider span { font-size: 11px; color: var(--text-muted); }
.arcstudio-accent-slider input[type="range"] {
  width: 100%;
  accent-color: #a855f7;
}
.arcstudio-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.arcstudio-field label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.arcstudio-field input,
.arcstudio-badge-row input,
.arcstudio-controls textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.arcstudio-field input:focus,
.arcstudio-badge-row input:focus,
.arcstudio-controls textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18);
}
.arcstudio-controls textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}
.arcstudio-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.arcstudio-sub {
  padding: 8px 14px;
  font-size: 12.5px;
  border-radius: 8px;
  cursor: pointer;
}
.arcstudio-badge-row {
  display: flex;
  gap: 8px;
}
.arcstudio-badge-row input { flex: 1; }
.arcstudio-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  min-height: 26px;
}
.arcstudio-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.18);
  border: 1px solid rgba(88, 101, 242, 0.35);
  color: var(--text-main);
}
.arcstudio-badge-chip button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.arcstudio-badge-chip button:hover { color: #ff5f7a; }
.arcstudio-badge-empty {
  font-size: 12px;
  color: var(--text-muted);
}
.arcstudio-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.arcstudio-save-btn {
  flex: 1;
  min-width: 180px;
  padding: 13px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #0a0d16;
  background: linear-gradient(135deg, #a855f7, #22d3ee);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(168, 85, 247, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.arcstudio-save-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.55); }
.arcstudio-save-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.arcstudio-canvas-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
  padding: 20px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.08), transparent 50%),
    rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--border-subtle);
}
#arcstudio-canvas {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.arcstudio-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
  text-align: center;
}

/* ==================================================
   ARCCARD STUDIO v2 — Wizard / Stepper + Preview Gigante
   35% Editor vs 65% Canvas, pasos navegables, pantalla
   completa y personalización extendida.
   ================================================== */
.arcstudio-shell {
  display: grid;
  grid-template-columns: minmax(320px, 35fr) minmax(0, 65fr);
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .arcstudio-shell { grid-template-columns: 1fr; }
  .arcstudio-canvas-wrap { min-height: 320px; }
}
.arcstudio-panel,
.arcstudio-stage {
  padding: 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.arcstudio-panel { max-height: 88vh; overflow: hidden; }
.arcstudio-stage { flex: 1; }

/* ---- stepper ---- */
.arcstudio-stepper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.arcstudio-step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
}
.arcstudio-step:hover { border-color: rgba(168, 85, 247, 0.4); transform: translateX(2px); }
.arcstudio-step.active {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.14);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.22);
}
.arcstudio-step.done { background: rgba(34, 211, 238, 0.05); }
.arcstudio-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.arcstudio-step.active .arcstudio-step-dot {
  border-color: #a855f7;
  color: #fff;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.arcstudio-step.done .arcstudio-step-dot {
  background: linear-gradient(135deg, #a855f7, #22d3ee);
  color: #0a0d16;
}
.arcstudio-step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- wizard panes ---- */
.arcstudio-wizard { flex: 1; min-height: 0; overflow-y: auto; }
.arcstudio-step-pane { display: none; }
.arcstudio-step-pane.active { display: block; animation: arcFadeSlide 0.3s ease; }
@keyframes arcFadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.arcstudio-pane-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 2px 0 6px;
  color: var(--text-main);
}
.arcstudio-pane-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.arcstudio-sec {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 18px 0 9px;
}
.arcstudio-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* ---- nav prev / next ---- */
.arcstudio-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.arcstudio-nav-count {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}
.arcstudio-next { flex: 1; min-width: 0; }
.arcstudio-next:disabled { opacity: 0.55; }

/* ---- switches / toggles ---- */
.arcstudio-widgets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.arcstudio-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.3s ease;
}
.arcstudio-switch:hover { border-color: rgba(168, 85, 247, 0.4); }
.arcstudio-switch input { display: none; }
.arcstudio-switch-track {
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.arcstudio-switch-track::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.3s ease;
}
.arcstudio-switch input:checked + .arcstudio-switch-track {
  background: linear-gradient(135deg, #a855f7, #22d3ee);
}
.arcstudio-switch input:checked + .arcstudio-switch-track::after { left: 17.5px; }
.arcstudio-switch b {
  font-size: 12.5px;
  color: var(--text-main);
  font-weight: 600;
}
.arcstudio-public-row { margin-top: 12px; }

/* ---- range sliders ---- */
.arcstudio-range-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.arcstudio-range-row span {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}
.arcstudio-range-row span b { color: var(--text-main); font-weight: 700; }
.arcstudio-range-row input[type="range"] {
  width: 100%;
  accent-color: #a855f7;
  cursor: pointer;
}

/* ---- stage / vista previa ---- */
.arcstudio-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.arcstudio-stage-head .arcstudio-title { margin: 0; }
.arcstudio-view-switch {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
}
.arcstudio-view-switch button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 6px 11px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}
.arcstudio-view-switch button:hover { color: #fff; }
.arcstudio-view-switch button.active {
  background: rgba(168, 85, 247, 0.22);
  color: #fff;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
}
.arcstudio-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  min-height: 340px;
  padding: 24px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.08), transparent 50%),
    rgba(0, 0, 0, 0.35);
  border: 1px dashed var(--border-subtle);
  transition: all 0.3s ease;
}
.arcstudio-canvas-wrap.arcstudio-view-mobile {
  background:
    radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.1), transparent 55%),
    rgba(0, 0, 0, 0.45);
}
.arcstudio-canvas-wrap.arcstudio-view-mobile::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 2px solid #2a3040;
  border-radius: 36px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 9px #0b0e18,
    0 0 0 1px rgba(168, 85, 247, 0.14),
    0 0 42px rgba(168, 85, 247, 0.12);
}
.arcstudio-canvas-wrap.arcstudio-view-mobile::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 5px;
  border-radius: 999px;
  background: #2a3040;
  pointer-events: none;
}
.arcstudio-canvas-wrap.arcstudio-view-discord {
  border-style: solid;
  border-color: rgba(88, 101, 242, 0.4);
}
.arcstudio-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  border: none;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #22d3ee);
  box-shadow: 0 6px 22px rgba(168, 85, 247, 0.5);
  transition: all 0.3s ease;
}
.arcstudio-fs-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 30px rgba(168, 85, 247, 0.65);
}
#arcstudio-canvas {
  max-width: 100%;
  height: auto;
  transition: box-shadow 0.3s ease;
}

/* ---- view cards (paso 5) ---- */
.arcstudio-viewcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.arcstudio-viewcard {
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}
.arcstudio-viewcard:hover {
  border-color: rgba(168, 85, 247, 0.5);
  transform: translateY(-2px);
}
.arcstudio-viewcard.active {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.13);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25);
}
.arcstudio-viewcard .em { font-size: 20px; }
.arcstudio-viewcard b {
  display: block;
  font-size: 11.5px;
  margin-top: 4px;
  color: var(--text-main);
}
.arcstudio-viewcard small { font-size: 10px; color: var(--text-muted); }

/* ---- resumen perfil ---- */
.arcstudio-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.arcstudio-summary-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #22d3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #0a0d16;
  font-size: 14px;
  flex-shrink: 0;
}
.arcstudio-summary-info { flex: 1; min-width: 0; }
.arcstudio-summary-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
}
.arcstudio-summary-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.arcstudio-summary-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  flex-shrink: 0;
}
.arcstudio-summary-badge.public {
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.4);
  color: #22d3ee;
}
.arcstudio-play-row { width: 100%; }

/* ---- pantalla completa ---- */
.arcstudio-fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.16), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(34, 211, 238, 0.12), transparent 50%),
    #060811;
  animation: arcFadeSlide 0.3s ease;
}
.arcstudio-fs-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.arcstudio-fs-title {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-main);
}
.arcstudio-fs-actions { display: flex; gap: 10px; }
.arcstudio-fs-close {
  border: none;
  background: linear-gradient(135deg, #ff5f7a, #a855f7);
  color: #fff;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  transition: all 0.3s ease;
}
.arcstudio-fs-close:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 95, 122, 0.4); }
.arcstudio-fs-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.arcstudio-fs-canvas canvas {
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

/* ---- reuso de opt-btn para grids de 2 columnas ---- */
.arcstudio-opt-group.arcstudio-grid-2 .arcstudio-opt-btn { padding: 8px 10px; }

/* ============================================================
   FIX OVERLAP BENTO PREVIEW
   Grid limpio para la vista Bento: tarjetas autodimensionadas,
   contenedores propios por zona (bio / badges / links), texto con
   word-break y elementos de caja (pills) truncados sin solaparse.
   ============================================================ */
.bento-preview-grid {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  align-items: start;
  min-width: 0;
}
.bento-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 0;
  overflow: hidden;
}
.bento-card.bento-bio {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
}
.bento-card.bento-bio img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.bento-card.bento-bio b { font-size: 13px; }
.bento-card.bento-bio p { margin: 0; font-size: 11px; word-break: break-word; }
.bento-badges, .bento-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.badge-pill, .link-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.badge-pill { background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(34, 211, 238, 0.22)); }
.link-pill { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }

/* ============================================================
   BADGE "CONECTADO COMO …" (vista Spotify)
   ============================================================ */
.spotify-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30, 215, 96, 0.15), rgba(30, 215, 96, 0.06));
  border: 1px solid rgba(30, 215, 96, 0.35);
  color: #1ed760;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.spotify-connected-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1ed760;
  box-shadow: 0 0 10px rgba(30, 215, 96, 0.9);
  animation: spotifyPulse 1.6s ease-in-out infinite;
}
@keyframes spotifyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   MINI-SELECTOR DE CANCIONES (ArcCard Studio → Audio)
   ============================================================ */
.arcstudio-track-search {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.arcstudio-track-search input {
  flex: 1;
  min-width: 0;
}
.arcstudio-trending {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.arcstudio-trend-chip {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.arcstudio-trend-chip:hover { color: #1ed760; border-color: rgba(30, 215, 96, 0.5); }
.arcstudio-track-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.arcstudio-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 0;
}
.arcstudio-track:hover { background: rgba(30, 215, 96, 0.08); border-color: rgba(30, 215, 96, 0.35); }
.arcstudio-track.selected { background: rgba(30, 215, 96, 0.12); border-color: #1ed760; }
.arcstudio-track img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.arcstudio-track-info { min-width: 0; flex: 1; }
.arcstudio-track-info b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcstudio-track-info small { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.arcstudio-track .arcstudio-track-check { color: #1ed760; font-size: 15px; flex: none; opacity: 0; }
.arcstudio-track.selected .arcstudio-track-check { opacity: 1; }
.arcstudio-track .arcstudio-track-preview {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(30, 215, 96, 0.5);
  background: rgba(30, 215, 96, 0.12);
  color: #1ed760;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.arcstudio-track .arcstudio-track-preview:hover { background: #1ed760; color: #0a0d16; }
.arcstudio-selected-song {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(30, 215, 96, 0.1);
  border: 1px solid rgba(30, 215, 96, 0.4);
  font-size: 12.5px;
  color: var(--text-main);
}
.arcstudio-selected-song img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.arcstudio-selected-song b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcstudio-selected-song button {
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.arcstudio-selected-song button:hover { background: rgba(255, 95, 122, 0.3); color: #fff; }
.arcstudio-connect-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==================================================
   FONT STUDIO — selector de tipografías
   ================================================== */
.font-modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.font-card {
  position: relative;
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  transition: var(--transition-smooth);
  text-align: left;
  color: var(--text-main);
  overflow: hidden;
}
.font-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); }
.font-card.active { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-glow); }
.font-preview {
  height: 56px;
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, var(--bg-surface-hover), var(--bg-main));
  display: flex;
  align-items: center;
  font-size: 22px;
  color: var(--accent-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  text-shadow: 0 0 18px var(--accent-glow);
}

/* ==================================================
   FONT SAFETY — fuentes display no rompen el Bento
   ================================================== */
.glass-card,
.track-card,
.nk-card,
.setting-group,
.theme-card,
.design-card,
.font-card,
.file-drop,
.hero-stat-card {
  overflow: hidden;
}
h1, h2, h3, h4, .gradient-text, .nav-item, .btn {
  line-height: 1.2;
}

/* ==================================================
   GALAXY PRO — ondas neón + estrellas titilantes
   ================================================== */
.liquid-wave {
  box-shadow:
    0 0 40px var(--accent-glow),
    inset 0 0 40px rgba(255, 255, 255, 0.06);
}
.liquid-wave.w1 { opacity: 0.85; }
.liquid-wave.w2 { opacity: 0.7; }
.liquid-wave.w3 { opacity: 0.28; filter: blur(48px); }
.galaxy-nebula {
  opacity: 0.55;
  box-shadow: 0 0 120px var(--neon-glow-violet, rgba(168, 85, 247, 0.25));
}
#galaxy-bg {
  filter: saturate(1.15) contrast(1.02);
}

/* ==================================================
   MICROINTERACCIONES — motor de animaciones
   ================================================== */

/* Entrada de vistas (fade-in-up / scale-in) */
.view-enter {
  animation: arcFadeInUp 0.5s var(--ease-out) both;
}
@keyframes arcFadeInUp {
  from { opacity: 0; transform: translateY(16px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.scale-in {
  animation: arcScaleIn 0.45s var(--ease-out) both;
}
@keyframes arcScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
/* Entrada escalonada para grids de tarjetas */
.stagger-enter > * {
  opacity: 0;
  animation: arcFadeInUp 0.5s var(--ease-out) forwards;
}
.stagger-enter > *:nth-child(1) { animation-delay: 0.03s; }
.stagger-enter > *:nth-child(2) { animation-delay: 0.07s; }
.stagger-enter > *:nth-child(3) { animation-delay: 0.11s; }
.stagger-enter > *:nth-child(4) { animation-delay: 0.15s; }
.stagger-enter > *:nth-child(5) { animation-delay: 0.19s; }
.stagger-enter > *:nth-child(6) { animation-delay: 0.23s; }
.stagger-enter > *:nth-child(n+7) { animation-delay: 0.27s; }

/* SVG draw (stroke animado estilo neón) */
.svg-draw path,
.svg-draw polyline,
.svg-draw line,
.svg-draw rect,
.svg-draw circle {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: arcSvgDraw 1.4s var(--ease-out) forwards;
}
.svg-draw.svg-draw-delayed path,
.svg-draw.svg-draw-delayed polyline {
  animation-delay: 0.25s;
}
@keyframes arcSvgDraw {
  to { stroke-dashoffset: 0; }
}

/* Tilt 3D */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.tilt-3d { perspective: 1000px; }
.tilt-3d > * { transform-style: preserve-3d; }
[data-tilt] .tilt-translate {
  transform: translateZ(24px);
}

/* Hover liquid + glow en botones */
.btn, .capsule-btn, .ohc-btn, .spotify-link-btn, .capsule-btn {
  position: relative;
  overflow: hidden;
}
.btn::after, .capsule-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after, .capsule-btn:hover::after { left: 140%; }
.btn:hover {
  box-shadow: 0 0 24px var(--accent-glow), 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

/* Perf: respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .svg-draw path, .svg-draw polyline { animation: none; stroke-dashoffset: 0; }
  .view-enter, .scale-in, .stagger-enter > * { animation: none !important; opacity: 1; }
  .btn::after, .capsule-btn::after { display: none; }
}

/* ==================================================
   DEEP SPACE 3D — fondo planetario interactivo
   ================================================== */
.deep-space-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* El canvas queda POR ENCIMA del fondo y de cualquier contenedor con
   fondo sólido, pero DEBAJO del contenido real (dashboard z:2, main z:1,
   sidebar z:100, widget/toast z:2, modal 9999). Capa nunca captura clicks. */
#deep-space-bg,
#deep-space-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Deep Space: oculta ondas líquidas y galaxia clásica, base espacial profunda */
[data-design="deep-space"] .liquid-bg-container { display: none; }
[data-design="deep-space"] .galaxy-bg-layer { display: none !important; }
[data-design="deep-space"] body { background: #030308; }

/* El contenedor principal de la dashboard NO debe tener fondo sólido que
   tape el Canvas 3D: se fuerza transparencia en los contenedores de la app.
   (Los glass-card y el sidebar conservan su propio fondo a propósito.) */
[data-design="deep-space"] #dashboard,
[data-design="deep-space"] .dashboard,
[data-design="deep-space"] .dashboard-layout,
[data-design="deep-space"] .main,
[data-design="deep-space"] .dashboard-main,
[data-design="deep-space"] .server-header,
[data-design="deep-space"] .settings-panel,
[data-design="deep-space"] #server-list {
  background: transparent !important;
}

/* Preview del modo en el Theme Studio */
.design-preview-deep-space {
  background:
    radial-gradient(circle at 80% 22%, rgba(147, 197, 253, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 30% 60%, rgba(244, 114, 182, 0.28) 0%, transparent 50%),
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 72%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
    linear-gradient(180deg, #030308 0%, #0a0a18 100%);
}
.design-preview-deep-space::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 22%, rgba(255, 255, 255, 0.7) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 2px);
}

/* Transición Alight Motion en la burbuja del widget */
.spotify-bubble,
.spotify-expanded {
  transition: all 0.5s var(--alight-ease);
}

/* Estado "Conectado, listo para reproducir" del badge del widget */
.spotify-live-badge.ready {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.45), inset 0 0 10px rgba(34, 197, 94, 0.12);
}

/* Glow neón en las tarjetas bajo el modo Deep Space */
[data-design="deep-space"] .glass-card,
[data-design="deep-space"] .skeuo-card,
[data-design="deep-space"] .setting-group {
  border-color: rgba(167, 139, 250, 0.22);
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.42),
    0 0 24px rgba(124, 58, 237, 0.08),
    inset 0 1px 1px 0 var(--glass-specular);
}

/* ==================================================
   LIQUID 3D MODAL — sector de planeta con gooey effect
   Capa visual aislada (z-index 9999); no toca el layout.
   ================================================== */
.liquid-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  background: rgba(3, 3, 8, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
.liquid-modal-backdrop {
  position: absolute;
  inset: 0;
}
.liquid-modal-pos {
  position: relative;
  width: min(460px, calc(100vw - 40px));
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
}
.liquid-modal-blob {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 25% 18%, rgba(255, 255, 255, 0.14), transparent 45%),
    linear-gradient(135deg, rgba(56, 130, 246, 0.5), rgba(147, 51, 234, 0.42) 55%, rgba(244, 114, 182, 0.35));
  filter: url(#arc-goo);
}
.liquid-modal-card {
  position: relative;
  padding: 26px 28px;
  border-radius: 50%;
  background: rgba(14, 18, 34, 0.72);
  backdrop-filter: blur(25px) saturate(160%);
  -webkit-backdrop-filter: blur(25px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.18);
  filter: drop-shadow(0 0 18px var(--lm-accent, #22d3ee));
  overflow: hidden;
  transform-style: preserve-3d;
}
.lm-glow {
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle at 50% 0%, var(--lm-accent, #22d3ee), transparent 62%);
  opacity: 0.16;
  pointer-events: none;
}

/* Cabecera */
.lm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.lm-planet-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: lmBreath 3s var(--alight-ease) infinite;
}
@keyframes lmBreath {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.85; }
}
.lm-head-text { flex: 1; min-width: 0; }
.lm-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-main, #f8fafc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lm-subtitle {
  font-size: 12px;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.lm-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #94a3b8;
  background: #10131f;
  box-shadow:
    -3px -3px 6px rgba(255, 255, 255, 0.03),
    3px 3px 8px rgba(0, 0, 0, 0.7);
  transition: all 0.4s var(--alight-ease);
}
.lm-close:hover {
  color: var(--lm-accent, #22d3ee);
  box-shadow:
    -3px -3px 6px rgba(255, 255, 255, 0.03),
    3px 3px 8px rgba(0, 0, 0, 0.7),
    inset 0 0 10px rgba(34, 211, 238, 0.15);
  transform: translateY(-1px);
}
.lm-close:active {
  box-shadow:
    inset -3px -3px 6px rgba(255, 255, 255, 0.03),
    inset 3px 3px 8px rgba(0, 0, 0, 0.75);
  transform: translateY(1px) scale(0.96);
}

/* Cuerpo */
.lm-desc {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.65;
  color: #c7cede;
  margin: 16px 0 18px;
}
.lm-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.lm-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.lm-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted, #94a3b8); }
.lm-stat b { font-size: 13px; color: var(--text-main, #f8fafc); }
.lm-status-row {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  margin-bottom: 18px;
}
.lm-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: lmPulse 1.3s ease-in-out infinite;
}
@keyframes lmPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

/* Acciones */
.lm-actions {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.lm-btn {
  border: none;
  cursor: pointer;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.45s var(--alight-ease);
}
.lm-btn-primary {
  flex: 1;
  min-width: 150px;
  color: #030308;
  background: linear-gradient(135deg, var(--lm-accent, #22d3ee), var(--lm-accent, #22d3ee));
  background: linear-gradient(135deg, var(--lm-accent, #22d3ee), #7c3aed);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.lm-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
}
.lm-btn-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}
.lm-btn-primary.scanning { pointer-events: none; opacity: 0.85; }
.lm-btn-ghost {
  color: #a1a7b8;
  background: #10131f;
  box-shadow:
    -3px -3px 6px rgba(255, 255, 255, 0.03),
    3px 3px 8px rgba(0, 0, 0, 0.7);
}
.lm-btn-ghost:hover { color: var(--text-main, #f8fafc); transform: translateY(-1px); }
.lm-btn-ghost:active {
  box-shadow:
    inset -3px -3px 6px rgba(255, 255, 255, 0.03),
    inset 3px 3px 8px rgba(0, 0, 0, 0.75);
  transform: translateY(1px);
}

@media (max-width: 480px) {
  .liquid-modal-card { padding: 20px 18px; }
  .lm-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-planet-dot { animation: none; }
  .lm-status-dot { animation: none; }
  .liquid-modal-overlay { transition: none; }
}

/* ==================================================
   9. MOBILE RESCUE — Dashboard responsiva (≤768px)
   --------------------------------------------------
   Bloque consolidado AL FINAL del archivo para ganar la
   cascada (hay reglas legacy que pisan las media queries
   anteriores, p.ej. .sidebar width:260px / .main margin-left).
   La vista de escritorio (>768px) NO se toca.
   ================================================== */

@media (max-width: 768px) {

  /* ---- 1. COLAPSO DEL BENTO GRID (single column) ---- */
  .dashboard-layout,
  .two-col-grid,
  .bot-form-grid,
  .hero-stats-grid,
  .music-commands-grid,
  .music-cmds-grid,
  .arcstudio-layout,
  .arcstudio-shell,
  .arcstudio-grid-2,
  .arc-buttons,
  .arc-cooldowns,
  .am-native-grid,
  .arc-shop-grid,
  .economy-stats,
  .lm-stats,
  .settings-themes,
  .design-modes,
  .nk-grid,
  .owner-stats-grid,
  .owner-guilds-grid,
  .guilds-grid,
  .guild-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* ---- Layout principal: drawer lateral deslizante ---- */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: min(300px, 86vw) !important;
    max-width: 86vw !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    z-index: 100 !important;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0;
    border-right: 1px solid var(--border-subtle);
    border-bottom: none;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  body.sidebar-open .sidebar { transform: translateX(0); z-index: 30001; }
  body.sidebar-open { overflow: hidden; }
  .sidebar-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    margin-left: 0;
    overflow-y: auto;
    max-height: none;
    padding: 12px 10px;
  }
  .nav-item { padding: 10px 12px; font-size: 13px; }
  .sidebar-footer { margin-left: 0; border-top: 1px solid var(--border-subtle); }
  .sidebar-user { padding: 14px 20px; }
  .sidebar-avatar { width: 32px; height: 32px; }
  .sidebar-user-info .user-name { font-size: 13px; }
  .sidebar-user-info .user-sub { display: block; }
  .sidebar-logout { padding: 10px 20px 16px; }
  .sidebar-fab { display: flex; }
  .sidebar-scrim { display: block; }

  .dashboard,
  #dashboard {
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
  }
  .main,
  .dashboard-main {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 64px 16px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .server-header { flex-wrap: wrap; gap: 8px; }
  .server-header-meta { flex-wrap: wrap; }
  .server-prefix-badge { display: none; }

  .landing-card { padding: 40px 24px 28px; }

  /* ---- 2. OVERFLOW / WRAPPING ---- */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }

  .glass-card,
  .skeuo-card,
  .setting-group,
  .nk-card,
  .arc-sheet,
  .arc-shell,
  .track-card,
  .owner-guild-card,
  .hero-stat-card,
  .music-cmd-card,
  .setting-label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ds-mount,
  .ds-select,
  .input-field {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .ds-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .setting-row { flex-wrap: wrap; }
  .setting-group { padding: 16px 14px; }
  .spotify-search-results {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 3a. Canvas 3D: al fondo absoluto, no interfiere con toques ---- */
  .deep-space-layer {
    z-index: -1 !important;
  }

  /* ---- 3b. Burbuja de Spotify → barra inferior fija ---- */
  .spotify-widget {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .spotify-bubble {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    border-radius: 16px 16px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .spotify-bubble:hover { transform: none; }
  .spotify-expanded {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px 16px 0 0;
    padding: 16px;
  }

  /* ---- 3c. Tipografías y botones ---- */
  .dc-title { font-size: 32px; }
  .gradient-text { font-size: 1.35rem; }
  .view-head h2,
  .settings-panel h2 { font-size: 16px; }
  .server-header h2 { font-size: 16px; }
  .lm-title { font-size: 16px; }
  .profile-name { font-size: 18px; }
  .eco-val { font-size: 16px; }

  .btn { padding: 9px 14px; font-size: 13px; }
  .capsule-btn { padding: 8px 14px; font-size: 12px; }

  /* ---- 4. Modal líquido: 95vw, centrado, scroll interno ---- */
  .liquid-modal-pos {
    width: 95vw;
    max-width: 95vw;
  }
  .liquid-modal-card {
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 14px;
  }
  .lm-actions { flex-direction: column; }
  .lm-btn-primary,
  .lm-btn-ghost {
    width: 100%;
    min-width: 0;
  }
}

/* ---- Toque: desactiva hovers y tilt 3D dependientes del cursor ---- */
@media (hover: none), (max-width: 768px) {
  [data-tilt], [data-tilt] > * { transform: none !important; }
  .glass-card:hover,
  .skeuo-card:hover,
  .theme-card:hover,
  .design-card:hover,
  .nk-card:hover,
  .track-card:hover,
  .owner-guild-card:hover,
  .hero-stat-card:hover,
  .capsule-btn:hover,
  .spotify-bubble:hover,
  .spotify-btn:hover,
  .ds-trigger:hover,
  .ds-item:hover,
  .setting-group:hover,
  .lm-close:hover,
  .lm-btn:hover {
    transform: none !important;
  }
}

/* ==================================================
   10. CYBER-BENTO GRID — Rediseño global de la Dashboard
   --------------------------------------------------
   Estilo "Cyber-Bento" (inspirado en xnprotect.com):
   - Base oscura #08090E con capas ambientales (galaxia /
     deep-space / liquid) al fondo absoluto (z-index:-1),
     opacidad ~40% y sin capturar interacción.
   - Tarjetas bento uniformes: vidrio rgba(13,15,23,.6)
     + blur 12px + borde sutil + radio 16px.
   - Hover 100% CSS (sin JS por frame): lift -3px,
     borde cian y sombra profunda.
   - Contenedor principal centrado con máximo 1400px.
   ================================================== */

/* ---- 10.0 Tokens y fondo base ---- */
html[data-theme] {
  --bg-main: #08090E;
}
/* Fondo global forzado: degradado galáctico único y continuo (sin hard‑stops). */
body {
  background: radial-gradient(circle at center, #130a1e 0%, #08040c 100%) !important;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- 10.1 Capas ambientales: fondo absoluto, nunca bloquean input ---- */
.galaxy-bg-layer,
.deep-space-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1 !important;
  pointer-events: none !important;
}
/* Ondas líquidas: ancladas abajo y fundidas con máscara lineal.
   Sin máscara generan una banda de color con borde duro que corta
   el degradado del fondo. */
.liquid-bg-container {
  position: fixed;
  bottom: 0;
  left: 0;
  top: auto;
  width: 100vw;
  height: 38vh;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0.4 !important;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, black 55%, transparent 100%);
  mask-image: linear-gradient(to top, black 55%, transparent 100%);
}
#deep-space-bg,
#deep-space-fx,
#galaxy-bg {
  pointer-events: none !important;
}
/* El contenido real siempre pintado por encima del ambiente */
#landing,
#dashboard,
.toast-container,
.spotify-widget,
.loading-view {
  isolation: isolate;
}

/* ---- 10.2 Superficie Bento (vidrio uniforme radio 16px) ---- */
.glass-card,
.skeuo-card,
.setting-group,
.nk-card,
.hero-stat-card,
.guild-row-card,
.owner-guild-card,
.track-card,
.loading-card,
.server-header {
  background: rgba(13, 15, 23, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
}

/* ---- 10.3 Hover puro CSS: lift + borde cian + sombra ---- */
.glass-card,
.skeuo-card,
.setting-group,
.nk-card,
.hero-stat-card,
.guild-row-card,
.owner-guild-card,
.track-card,
.server-header {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.glass-card:hover,
.skeuo-card:hover,
.setting-group:hover,
.nk-card:hover,
.hero-stat-card:hover,
.guild-row-card:hover,
.owner-guild-card:hover,
.track-card:hover,
.server-header:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 243, 255, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* ---- 10.4 Contenedor centrado 1400px + grids responsivos ---- */
@media (min-width: 769px) {
  #settings-content,
  #server-list {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .hero-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Ratios asimétricos en secciones a dos columnas */
.two-col-grid { grid-template-columns: 1.35fr 1fr; }

/* ---- 10.5 Guild rows: una sola fila, acciones siempre visibles ---- */
@media (min-width: 769px) {
  .guild-row-card {
    flex-wrap: nowrap;
    padding: 1rem 1.25rem;
    margin-bottom: 12px;
  }
}
.guild-row-actions { flex-shrink: 0; }
.guild-row-name { min-width: 0; }
.guild-row-name h4 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 10.6 Sidebar de cristal ---- */
.sidebar {
  background: rgba(13, 15, 23, 0.65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---- 10.7 Acordeones móviles para paneles secundarios ----
     (<768px): cada .setting-group colapsa tocando su título.
     El estado lo controla app.js (.acc-collapsed). */
@media (max-width: 768px) {
  .setting-group > h3:first-child.bento-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
  }
  .setting-group > h3:first-child.bento-acc-head::after {
    content: '▾';
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.25s ease;
  }
  .setting-group.acc-collapsed > *:not(:first-child) { display: none; }
  .setting-group.acc-collapsed > h3:first-child::after { transform: rotate(-90deg); }
  /* En móvil el lift por hover no aplica */
  .glass-card:hover,
  .skeuo-card:hover,
  .setting-group:hover,
  .nk-card:hover,
  .hero-stat-card:hover,
  .guild-row-card:hover,
  .owner-guild-card:hover,
  .track-card:hover,
  .server-header:hover {
    transform: none;
  }
}
.bento-acc-head:focus-visible {
  outline: 1px solid rgba(0, 243, 255, 0.5);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---- 10.8 Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .skeuo-card,
  .setting-group,
  .nk-card,
  .hero-stat-card,
  .guild-row-card,
  .owner-guild-card,
  .track-card,
  .server-header {
    transition: none;
  }
  .glass-card:hover,
  .skeuo-card:hover,
  .setting-group:hover,
  .nk-card:hover,
  .hero-stat-card:hover,
  .guild-row-card:hover,
  .owner-guild-card:hover,
  .track-card:hover,
  .server-header:hover {
    transform: none;
  }
}

/* ==================================================
   ECONOMY CONFIG PANEL (ep-*)
   ================================================== */
.ep-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.ep-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ep-tab {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 9px 16px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(8px);
}
.ep-tab:hover { color: var(--text-main); border-color: var(--border-hover); }
.ep-tab.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px var(--accent-glow);
}

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

.ep-tabcard {
  background: var(--glass-bg, rgba(23, 25, 35, 0.6));
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow, 0 12px 40px rgba(0, 0, 0, 0.3));
}

.ep-tabcard .ep-grid2 {
  gap: 20px;
}

.ep-grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.ep-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.ep-field .ep-hint { margin-top: 3px; }
.ep-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.ep-hint {
  color: var(--text-muted);
  font-size: 12px;
}
.ep-hint code {
  background: rgba(88, 101, 242, 0.14);
  color: var(--text-main);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 11px;
}

.ep-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px dashed var(--border-subtle);
  flex-wrap: wrap;
}
.ep-setting-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ep-setting-info b { font-size: 14px; }
.ep-setting-info small { color: var(--text-muted); font-size: 12px; }

.ep-style-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 4px 12px;
  white-space: nowrap;
}

.ep-module {
  background: var(--glass-bg, rgba(23, 25, 35, 0.5));
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: var(--transition-smooth);
}
.ep-module.ep-disabled { opacity: 0.62; }
.ep-mod-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ep-mod-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ep-mod-title b { display: block; font-size: 14px; }
.ep-mod-title small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.ep-mod-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.ep-mod-chip {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-radius: 20px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.ep-mod-chip.on {
  background: rgba(29, 185, 84, 0.14);
  color: #1db954;
  border-color: rgba(29, 185, 84, 0.35);
}
.ep-switch-wrap { display: flex; align-items: center; gap: 10px; }
.ep-mod-body { padding: 16px 4px 4px; }

.ep-cd-box {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 10px;
}
.ep-cd {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ep-cd input { text-align: center; }
.ep-cd span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

.ep-replies {
  border-top: 1px dashed var(--border-subtle);
  padding-top: 14px;
  margin-top: 6px;
}
.ep-replies-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ep-replies-head b { font-size: 14px; }
.ep-reply-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.ep-reply-type {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 9px 8px;
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
}
.ep-danger { color: #f25c5c !important; border-color: rgba(242, 92, 92, 0.3) !important; }
.ep-empty {
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 0;
  margin: 0;
}

.ep-shop-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ep-shop-bar b { display: block; font-size: 15px; }
.ep-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ep-item-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 14px;
  transition: var(--transition-smooth);
}
.ep-item-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.ep-item-emoji { font-size: 26px; }
.ep-item-name { font-size: 14px; }
.ep-item-desc { color: var(--text-muted); font-size: 12px; min-height: 30px; }
.ep-item-price { font-weight: 800; color: #ffd700; }
.ep-item-meta { color: var(--text-muted); font-size: 11px; }
.ep-item-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.ep-income-rows { display: flex; flex-direction: column; gap: 12px; }
.ep-income-row {
  display: grid;
  grid-template-columns: 1fr 140px 130px auto;
  gap: 10px;
  align-items: end;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px;
}

.ep-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
  transition: transform 0.25s var(--ease-out);
}
.ep-fab.dirty { transform: scale(1.04); }
.ep-fab-btn { border-radius: 30px; padding: 12px 22px; font-weight: 700; }

.ep-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4, 6, 12, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: epFade 0.2s ease;
}
.ep-modal-card {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-elevated, #171923);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  animation: epPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.ep-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.ep-modal-head h3 { margin: 0; font-size: 16px; }
.ep-modal-body { padding: 18px 20px; }
.ep-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
}
.ep-field-role { margin-bottom: 6px; }

@keyframes epFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes epPop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 760px) {
  .ep-cd-box { grid-template-columns: repeat(2, 1fr); }
  .ep-income-row { grid-template-columns: 1fr; }
  .ep-reply-row { grid-template-columns: 1fr; }
  .ep-fab { right: 12px; bottom: 12px; }
  .ep-fab-btn { padding: 10px 16px; font-size: 12px; }
}

/* ═══════════════ Giveaway Panel (Sorteos) ═══════════════ */

.gw-textarea {
  width: 100%;
  background: var(--input-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
}
.gw-textarea:focus { border-color: var(--accent, #5865f2); outline: none; }
.gw-textarea::placeholder { color: var(--text-muted); }

.gw-embeds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gw-embeds-head small { display: block; margin-top: 3px; }

.gw-embed-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg-elevated, rgba(20, 22, 32, 0.6));
}
.gw-embed-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-weight: 800;
  font-size: 13px;
}
.gw-embed-card-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gw-color-pick {
  width: 42px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 2px;
}

.gw-bonus-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.gw-shortcuts { margin-bottom: 14px; }
.gw-shortcut-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.gw-shortcut {
  background: rgba(88, 101, 242, 0.12);
  color: var(--text-main);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.gw-shortcut:hover { background: rgba(88, 101, 242, 0.25); transform: translateY(-1px); }

.gw-seg {
  display: inline-flex;
  background: var(--bg-surface, #1a1d2c);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.gw-seg-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: 9px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.gw-seg-btn.active {
  background: var(--accent-gradient, linear-gradient(135deg, #5865f2, #9b59b6));
  color: #fff;
}

.gw-create-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 800;
  border-radius: 14px;
  letter-spacing: 0.3px;
}
.gw-create-btn:disabled { opacity: 0.6; cursor: progress; }

/* preview estilo Discord */
.gw-preview {
  background: #313338;
  border-radius: 14px;
  padding: 18px 16px;
  margin-top: 6px;
}
.gw-preview-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #f2f3f5;
}
.gw-preview-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5865f2, #9b59b6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.gw-discord-embed {
  position: relative;
  border-left: 4px solid #5865f2;
  background: #2b2d31;
  border-radius: 4px;
  padding: 10px 12px;
  margin-top: 6px;
  display: flex;
  gap: 12px;
}
.gw-embed-thumb {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.gw-embed-body { flex: 1; min-width: 0; }
.gw-embed-title { color: #00a8fc; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.gw-embed-link { color: #00a8fc; text-decoration: underline; }
.gw-embed-desc { color: #dbdee1; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.gw-embed-desc code {
  background: rgba(255, 255, 255, 0.08);
  color: #00b8f4;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 12px;
}
.gw-embed-footer { color: #949ba4; font-size: 11.5px; margin-top: 6px; }
.gw-chip-rel { color: #23a55a; font-weight: 700; font-size: 12px; }
.gw-preview-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #949ba4;
  font-size: 11.5px;
}
.gw-preview-tags code {
  background: rgba(255, 255, 255, 0.08);
  color: #00b8f4;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 11px;
}
.gw-preview-row { margin-top: 10px; display: flex; }
.gw-preview-btn {
  background: #5865f2;
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 20px;
  padding: 8px 16px;
  cursor: default;
}

/* Discord-faithful giveaway preview: message row + real embed geometry. */
.gw-discord-surface {
  background: #313338;
  border: 1px solid #1e1f22;
  border-radius: 10px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.gw-discord-message { display:flex; align-items:flex-start; gap:12px; }
.gw-discord-message-body { min-width:0; flex:1; max-width:680px; }
.gw-preview-avatar {
  width:40px; height:40px; margin-top:1px;
  border-radius:50%; flex:0 0 40px;
  background:linear-gradient(135deg,#5865f2,#9b59b6);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.gw-preview-author { display:flex; align-items:center; gap:6px; margin:0 0 5px; color:#f2f3f5; font-size:14px; }
.gw-preview-author time { color:#949ba4; font-size:11px; font-weight:400; margin-left:2px; }
.gw-bot-badge { background:#5865f2; color:#fff; border-radius:3px; padding:1px 4px; font-size:10px; font-weight:700; line-height:14px; }
.gw-discord-embeds { display:flex; flex-direction:column; gap:4px; }
.gw-discord-embed {
  position:relative; display:flex; gap:16px; overflow:hidden;
  width:min(100%,520px); min-height:58px;
  margin:0; padding:10px 12px 12px;
  background:#2b2d31; border-left:4px solid var(--gw-embed-color,#5865f2);
  border-radius:4px; color:#dbdee1;
}
.gw-embed-body { min-width:0; flex:1; }
.gw-embed-title { color:#00a8fc; font-size:14px; font-weight:700; line-height:1.35; margin-bottom:5px; }
.gw-embed-link-mark { margin-left:4px; text-decoration:underline; }
.gw-embed-desc { color:#dbdee1; font-size:13px; line-height:1.45; white-space:normal; overflow-wrap:anywhere; }
.gw-embed-desc strong { color:#f2f3f5; font-weight:700; }
.gw-embed-desc code { background:#1e1f22; color:#dbdee1; border-radius:3px; padding:1px 4px; font-size:12px; }
.gw-embed-thumb { width:80px; height:80px; flex:0 0 80px; object-fit:cover; border-radius:4px; background:#1e1f22; }
.gw-embed-image { display:block; width:100%; max-height:260px; object-fit:cover; border-radius:4px; margin-top:10px; background:#1e1f22; }
.gw-media-broken { display:none; }
.gw-embed-footer { color:#949ba4; font-size:11px; line-height:1.35; margin-top:8px; }
.gw-discord-emoji { width:20px; height:20px; object-fit:contain; vertical-align:-5px; margin:0 1px; }
.gw-discord-embed .gw-preview-row { margin-top:10px; }
.gw-discord-embed + .gw-discord-embed { margin-top:2px; }
.gw-discord-surface > .gw-preview-tags {
  margin:16px 0 0 52px; padding-top:10px; border-top:1px solid rgba(255,255,255,.06);
}
.gw-discord-surface .gw-preview-btn {
  display:inline-flex; align-items:center; gap:6px;
  border-radius:3px; padding:7px 16px; background:#5865f2;
}
@media (max-width:640px) {
  .gw-discord-surface { padding:14px 10px; }
  .gw-discord-embed { width:100%; }
  .gw-discord-surface > .gw-preview-tags { margin-left:0; }
}

/* lista de recientes */
.gw-recent { margin-top: 18px; }
.gw-recent-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 26px; }
.gw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 2px;
  border-top: 1px dashed var(--border-subtle);
}
.gw-row:first-of-type { border-top: none; }
.gw-row-info { display: flex; flex-direction: column; gap: 2px; }
.gw-row-info b { font-size: 14px; }
.gw-row-info small { color: var(--text-muted); font-size: 12px; }
.gw-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gw-time-chip {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 20px;
}
.gw-time-live { color: #23a55a; border-color: rgba(35, 165, 90, 0.35); }
.gw-time-rep { color: #f8a5ff; border-color: rgba(248, 165, 255, 0.35); }

/* ─── toggle Duración relativa ⇄ Fecha de fin ─── */
.gw-mode-pills { display: flex; gap: 4px; margin-bottom: 10px; padding: 4px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; }
.gw-mode-pill {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.gw-mode-pill:hover { color: var(--text-main); }
.gw-mode-pill.active {
  background: linear-gradient(135deg, rgba(88, 101, 242, 0.35), rgba(146, 60, 255, 0.35));
  color: #fff;
  box-shadow: 0 0 14px rgba(88, 101, 242, 0.35);
}
.gw-mode-box { flex-direction: column; gap: 4px; }
.gw-mode-endat { display: none; padding: 0 2px; }
.gw-mode-endat input { width: 100%; max-width: 320px; }

/* ─── repetición ─── */
.gw-repeat-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gw-repeat-row select { width: auto; min-width: 150px; }
.gw-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--text-main); user-select: none; }
.gw-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: #5865f2; cursor: pointer; }

/* ─── fade-in entre pestañas ─── */
.gw-fade { animation: gwTabFade 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes gwTabFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── widget emoji del botón ─── */
.gw-emoji-widget { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gw-emoji-widget .input-field { flex: 1; min-width: 180px; }

/* ─── action toolbar (familia glassmorphism) ─── */
.gw-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.gw-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.28);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(8px);
}
.gw-tool-btn:hover {
  transform: scale(1.05);
  background: rgba(88, 101, 242, 0.22);
  border-color: rgba(126, 140, 255, 0.55);
  box-shadow: 0 0 16px rgba(88, 101, 242, 0.35);
}
.gw-tool-btn:active { transform: scale(0.97); }

/* ─── popovers (emoji picker + lists) ─── */
.gw-pop {
  position: fixed;
  z-index: 2200;
  background: rgba(24, 26, 38, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  animation: gwPopIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: min(340px, calc(100vw - 24px));
}
@keyframes gwPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.gw-pop .gw-pop-search {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 12.5px;
  padding: 8px 12px;
  margin-bottom: 8px;
  outline: none;
}
.gw-pop .gw-pop-search:focus { border-color: rgba(88, 101, 242, 0.6); }

.gw-pop-items { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.gw-pop-item {
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gw-pop-item:hover {
  background: rgba(88, 101, 242, 0.22);
  transform: translateX(2px);
}
.gw-pop-empty { padding: 12px; color: var(--text-muted); font-size: 12.5px; text-align: center; }

.gw-emoji-picker { width: 320px; }
.gw-ep-body { max-height: 300px; overflow-y: auto; }
.gw-ep-section {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 8px 2px 4px;
}
.gw-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
}
.gw-ep-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.gw-ep-item:hover {
  transform: scale(1.12);
  background: rgba(88, 101, 242, 0.25);
  border-color: rgba(126, 140, 255, 0.5);
  box-shadow: 0 0 12px rgba(88, 101, 242, 0.35);
}
.gw-ep-cell { display: inline-flex; align-items: center; justify-content: center; }
.gw-ep-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 7px;
  font-weight: 900;
  background: #f23f43;
  color: #fff;
  border-radius: 4px;
  padding: 1px 4px;
  pointer-events: none;
}

/* ==================================================
   FASE 3 — PULIDO BASE INMERSIVA
   Scrollbar invisible + spring hover de tarjetas y más aire entre cards.
   (El glass ya vive en .ios-glass / var(--glass-border): borde blanco ~12%
   ≈ border-white/10; sobre halos negros 40% se usa rgba(0,0,0,.4).)
   ================================================== */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.main {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.main::-webkit-scrollbar {
  width: 0;
  display: none;
}
.main::-webkit-scrollbar-track,
.main::-webkit-scrollbar-thumb {
  background: transparent;
}

/* Soporte del fallback de arcIcon (span con SVG), nunca estira el layout */
.arc-icon-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex: 0 0 auto;
}
lord-icon,
.arc-icon-fallback svg {
  vertical-align: middle;
}

/* Más aire en la grilla de servidores + spring hover */
.guild-grid {
  gap: 16px;
}
.guild-card {
  transition: transform 0.2s var(--ios-spring), border-color 0.2s ease,
    background 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}

@media (hover: hover) {
  .guild-card:hover {
    transform: translate3d(0, -4px, 0) scale(1.015);
  }
  .guild-card.no-hover:hover {
    transform: translate3d(0, -3px, 0) scale(1);
  }
}

@media (min-width: 900px) {
  .main {
    padding: 2rem;
  }
}






/* ==================================================
	 Tickets Panel (dashboard)
	 ================================================== */

.tp-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

.tp-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tp-tab {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 9px 16px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tp-tab:hover { color: var(--text-main); border-color: var(--border-hover); }
.tp-tab.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 16px var(--accent-glow);
}

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

.tp-tabcard {
  background: var(--glass-bg, rgba(23, 25, 35, 0.6));
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  backdrop-filter: blur(12px);
  box-shadow: var(--glass-shadow, 0 12px 40px rgba(0, 0, 0, 0.3));
}

.tp-cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.tp-cardhead h3 { margin: 0; font-size: 15px; }

.tp-linkbtn {
  background: none;
  border: none;
  color: var(--accent, #8ab4f8);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.tp-linkbtn:hover { background: rgba(255, 255, 255, 0.06); }

.tp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; }

.tp-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.tp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg, rgba(23, 25, 35, 0.6));
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 16px;
}
.tp-stat-ic {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}
.tp-stat-open .tp-stat-ic { color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.tp-stat-claim .tp-stat-ic { color: #38bdf8; background: rgba(56, 189, 248, 0.12); }
.tp-stat-ok .tp-stat-ic { color: #4ade80; background: rgba(74, 222, 128, 0.12); }
.tp-stat-val { font-size: 20px; font-weight: 800; line-height: 1.1; }
.tp-stat-lab { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.tp-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.tp-toggle-row:last-of-type { border-bottom: none; }
.tp-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.tp-toggle-info b { font-size: 13px; }
.tp-toggle-info small { color: var(--text-muted); font-size: 12px; }

.tp-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.tp-key {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 12px;
}
.tp-key span { font-size: 11px; color: var(--text-muted); }
.tp-key b { font-size: 16px; }

.tp-sla { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tp-sla-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
}
.prio-low { color: #94a3b8; background: rgba(148, 163, 184, 0.12); }
.prio-medium { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.prio-high { color: #fb923c; background: rgba(251, 146, 60, 0.14); }
.prio-critical { color: #f87171; background: rgba(248, 113, 113, 0.16); }

.tp-typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tp-typeitem {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 12px;
}
.tp-type-emoji { font-size: 22px; }
.tp-type-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-type-info b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-type-info small { font-size: 11px; color: var(--text-muted); }
.tp-panellist { display: flex; flex-direction: column; gap: 8px; }
.tp-panelitem { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.07); }
.tp-panelitem:last-child { border-bottom: none; }
.tp-panelitem b { font-size: 13px; }
.tp-panelitem small { font-size: 11px; color: var(--text-muted); }

.tp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--glass-bg, rgba(23, 25, 35, 0.5));
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.tp-row-compact { padding: 10px 14px; }
.tp-maincol { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tp-mainline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-ref {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: #aab4ff;
  background: rgba(90, 101, 242, 0.12);
  border: 1px solid rgba(90, 101, 242, 0.3);
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
}
.tp-user { font-size: 13px; font-weight: 700; }
.tp-type { font-size: 12px; color: var(--text-secondary); }
.tp-subline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }

.tp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-prio {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  border-radius: 10px;
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tp-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tb-open { color: #fbbf24; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); }
.tb-claimed { color: #38bdf8; background: rgba(56, 189, 248, 0.12); border: 1px solid rgba(56, 189, 248, 0.3); }
.tb-closed { color: #94a3b8; background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.3); }
.tb-archived { color: #64748b; background: rgba(100, 116, 139, 0.12); border: 1px solid rgba(100, 116, 139, 0.3); }

.tp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
  font-size: 13px;
}
.tp-empty h3 { margin: 0; color: var(--text-main); font-size: 15px; }

.tp-queuehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tp-queueinfo { font-size: 12px; color: var(--text-muted); }

.tp-filter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tp-filter-pill {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.tp-filter-pill:hover { color: var(--text-main); border-color: var(--border-hover); }
.tp-filter-pill.active {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
}

.tp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tp-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.tp-fieldrow { display: flex; flex-direction: column; gap: 12px; }
.tp-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.tp-hint { font-size: 11px; color: var(--text-muted); }
.tp-hint code { background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 5px; font-size: 11px; }
.tp-sla-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; }

.tp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
  transition: transform 0.25s var(--ease-out);
}
.tp-fab.dirty { transform: scale(1.04); }
.tp-fab-btn { border-radius: 30px; padding: 12px 22px; font-weight: 700; }

@media (max-width: 760px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-fab { right: 12px; bottom: 12px; }
  .tp-fab-btn { padding: 10px 16px; font-size: 12px; }
}

/* ---- 32. Tickets: gestión de tipos y paneles (Config) ---- */
.tp-boxform {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--border-hover, rgba(255,255,255,0.12));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.tp-formtitle { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; }
.tp-formbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tp-type-admin .tp-mainline { display: flex; align-items: center; gap: 6px; }
.tp-type-admin { flex-wrap: wrap; gap: 8px; }
.tb-danger { color: var(--danger) !important; border-color: rgba(239, 68, 68, 0.35) !important; }
.tb-danger:hover { background: var(--danger-soft, rgba(239,68,68,0.12)) !important; color: #fff !important; }
.tp-panel-admin { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tp-panel-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-panel-info .tp-mainline { display: flex; align-items: center; gap: 8px; }
.tp-chks { display: flex; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow-y: auto; padding: 4px 2px; }
.tp-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-main);
  border: 1px solid var(--border-hover, rgba(255,255,255,0.12));
  border-radius: 8px; padding: 5px 9px; cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.tp-chk:hover { border-color: var(--accent, #7c6cff); background: rgba(124, 108, 255, 0.06); }
.tp-chk input { accent-color: var(--accent, #7c6cff); }


/* ---- 33. Verificacion: panel de gestion (dashboard) ---- */
.vp-card { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.035); backdrop-filter: blur(14px); border-radius: 16px; }
.vp-card .arc-panel-head { padding: 0 0 12px; }
.vp-card .setting-group-title { margin: 0; }
.vp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.vp-grid2 .vp-card { margin-top: 0; }
.vmethod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.vmethod-card {
  position: relative; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 13px; border: 1px solid var(--border-hover, rgba(255,255,255,0.12));
  border-radius: 12px; cursor: pointer; transition: all 0.18s ease;
  background: rgba(255,255,255,0.02);
}
.vmethod-card:hover { border-color: var(--accent, #7c6cff); background: rgba(124,108,255,0.06); }
.vmethod-card .vmethod-radio {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--text-muted, #8b93b5); border-radius: 50%; position: relative; transition: all 0.18s ease;
}
.vmethod-card.active { border-color: var(--accent, #7c6cff); background: rgba(124,108,255,0.10); box-shadow: 0 0 18px rgba(124,108,255,0.18); }
.vmethod-card.active .vmethod-radio { border-color: var(--accent, #7c6cff); }
.vmethod-card.active .vmethod-radio::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent, #7c6cff);
  box-shadow: 0 0 8px var(--accent, #7c6cff);
}
.vmethod-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vmethod-body strong { color: var(--text-main, #e6e9f4); font-size: 13px; }
.vmethod-body small { color: var(--text-muted, #8b93b5); font-size: 12px; line-height: 1.4; }
.vp-card, .vp-card *, #settings-content[data-vp='1'] { min-width: 0; box-sizing: border-box; }
.vp-card { contain: layout paint; overflow: hidden; }
.vp-card .arc-panel-body, .vp-card .arc-panel-inner { overflow: hidden; }
.vp-card .setting-label span, .vp-card .setting-label small, .vp-card .vmethod-body strong, .vp-card .vmethod-body small { overflow-wrap: anywhere; }
.vp-card select, .vp-card input, .vp-card button { max-width: 100%; }
.vch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 240px; overflow-y: auto; padding-top: 4px; }
.vch-item {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border: 1px solid var(--border-hover, rgba(255,255,255,0.10)); border-radius: 9px;
  cursor: pointer; transition: all 0.16s ease; background: rgba(255,255,255,0.015);
}
.vch-item:hover { border-color: var(--accent, #7c6cff); background: rgba(124,108,255,0.05); }
.vch-item input { accent-color: var(--accent, #7c6cff); cursor: pointer; margin: 0; }
.vch-item .vch-chip { color: var(--accent, #7c6cff); font-weight: 700; font-size: 12px; }
.vch-item .vch-name { color: var(--text-main, #e6e9f4); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vch-item small { color: var(--text-muted, #8b93b5); font-size: 11px; margin-left: auto; white-space: nowrap; }
.vch-item em { color: var(--text-muted, #8b93b5); font-size: 10px; font-style: normal; opacity: 0.7; }
.vch-item.vch-disabled { opacity: 0.5; cursor: not-allowed; }
.vch-item.vch-disabled input { cursor: not-allowed; }
.vp-empty { color: var(--text-muted, #8b93b5); font-size: 13px; padding: 8px 0; }
.vp-savebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vp-save-status { color: var(--text-muted, #8b93b5); font-size: 12.5px; }
.vrow-warn { background: rgba(234, 179, 8, 0.08); border: 1px solid rgba(234, 179, 8, 0.3); border-radius: 10px; padding: 10px 12px; }
@media (max-width: 720px) { .vp-grid2 { grid-template-columns: 1fr; } }

/* ==================================================
   CONSOLE / LOGS (misión masiva — pills + grids)
   ================================================== */
.arc-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 5px;
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
}
.arc-tabs .tab-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8b93b5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.arc-tabs .tab-btn:hover { color: var(--text-main, #e6e9f4); }
.arc-tabs .tab-btn.active {
  background: linear-gradient(135deg, var(--accent, #7c6cff), var(--accent2, #5aa2ff));
  color: #fff;
  box-shadow: 0 0 16px var(--accent-glow, rgba(124, 108, 255, 0.35));
}
.arc-tab-pane { animation: tab-fade 0.22s ease; }
@keyframes tab-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.lg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.lg-cell { min-width: 0; }
.lg-cell .setting-label span { font-size: 13px; }

/* ==================================================
   LOGS PANEL (chips y realce del canal maestro)
   ================================================== */
#lg-default.ds-mount { min-width: 300px; }

/* ==================================================
   CUSTOM DROPDOWN (sustituye selects nativos)
   Trigger + menu en capa propia sobre body para no
   recortarse por overflow de contenedores.
   ================================================== */
.cd-trigger {
  position: absolute;
  z-index: 2200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: rgba(12, 15, 28, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s var(--ios-spring), filter 0.15s ease;
}
.cd-trigger::after {
  content: '▾';
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform 0.25s ease;
  margin-left: auto;
}
.cd-trigger.open::after { transform: rotate(180deg); }
.cd-trigger:hover { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
.cd-trigger:focus-visible {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-glow);
}
.cd-trigger.cd-disabled { opacity: 0.45; cursor: not-allowed; }
.cd-trigger.cd-disabled:hover { border-color: var(--glass-border); box-shadow: none; }
body.sidebar-open .cd-trigger,
body.sidebar-open .cd-menu,
body.sidebar-open #mb-format { visibility: hidden !important; pointer-events: none !important; }

.cd-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30000;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(26, 27, 38, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  animation: cdFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.cd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cd-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-main); }
.cd-item.sel { background: var(--accent-soft); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--border-accent); }
.cd-item.cd-disabled { opacity: 0.4; cursor: not-allowed; }
.cd-item.cd-disabled:hover { background: transparent; color: var(--text-secondary); }
@keyframes cdFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .cd-menu {
    position: fixed;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 52vh;
    border-radius: 22px 22px 0 0;
    border: 1px solid var(--glass-border);
    border-bottom: none;
    z-index: 30000 !important;
    animation: cdSheetUp 0.3s var(--ios-spring);
  }
}
@keyframes cdSheetUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ==================================================
   FIX DE CLIPPING / Z-INDEX DE DROPDOWNS
   - Acordeones arc-panel abiertos: sin recorte.
   - Carta con un DiscordSelect abierto: se eleva por
     encima de las siguientes (zustacking por hover).
   ================================================== */
.arc-panel.open .arc-panel-inner { overflow: visible; }

.skeuo-card:has(.ds-panel[style*="display: block"]) {
  position: relative;
  z-index: 2600;
  /* `contain: paint` clips the dropdown to the card's padding box, even when
     overflow is visible. Keep layout containment for performance, but let an
     open selector paint outside its card. */
  contain: layout !important;
}

.arc-panel:has(.ds-panel[style*="display: block"]),
.arc-shell:has(.ds-panel[style*="display: block"]) {
  contain: layout !important;
}

/* ==================================================
   LEVELS / XP - Premium Space Glassmorphism
   Grid de tarjetas, chips, columnas flex y dropdown
   inline (.cdx) sin <select> nativo.
   ================================================== */
.xp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.xp-card {
  padding: 18px;
  margin: 0;
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.xp-card-wide { grid-column: 1 / -1; }
.xp-card .setting-group-title { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

.xf {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.xp-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.xp-label > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
  white-space: normal;
}
.xp-label small {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.xp-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.xp-slot { min-width: 200px; flex: 1 1 200px; }
.xp-num { max-width: 100px; }

/* Listas con chips tipo Probot (multiplicadores / recompensas) */
.xp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.xp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.4);
  font-size: 13px;
}
.xp-row-rm {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.xp-row-rm:hover { color: #ff6b81; background: rgba(255, 107, 129, 0.1); }
.xp-empty { color: var(--text-muted); font-size: 13px; }
.xp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 8px rgba(0, 0, 0, 0.4);
}
.xp-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  flex-shrink: 0;
}
.xp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-main);
}
.xp-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.xp-var {
  border: 1px dashed var(--border-accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.xp-var:hover {
  background: rgba(139, 149, 255, 0.25);
  border-style: solid;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* Dropdown inline cdx: div / ul / li, sin <select> nativo */
.cdx { position: relative; min-width: 180px; }
.cdx-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, #10121b, #1a1d29);
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 5px rgba(255, 255, 255, 0.04), 2px 2px 6px rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-family: var(--font);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-smooth);
}
.cdx-trigger:hover { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
.cdx-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow);
}
.cdx-trigger .cdx-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdx-chev {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.cdx.open .cdx-chev { transform: rotate(180deg); }

.cdx-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: 220px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  z-index: 30100;
  padding: 6px;
  margin: 0;
  list-style: none;
  display: none;
}
.cdx.open .cdx-menu { display: block; }
.cdx-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.cdx-menu li:hover { background: var(--bg-surface-hover); color: var(--text-main); }
.cdx-menu li.sel {
  background: var(--accent-soft);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px var(--border-accent);
}
.cdx-menu .cdx-muted { font-size: 11px; color: var(--text-muted); margin-left: auto; }

@media (max-width: 720px) {
  .xp-card-wide { grid-column: auto; }
  .xp-inline { align-items: stretch; }
  .xp-slot { flex: 1 1 100%; }
  .cdx { min-width: 0; }
}

/* ==================================================
   PROFILE OBSERVATORY
   La vista global de perfil es un espacio de identidad, no un formulario.
   Todas las variables se alimentan de UserProfile: ningún contador fingido.
   ================================================== */
.profile-observatory {
  --profile-hue: #7867ff;
  --profile-accent: #9d7cff;
  --profile-progress: 0%;
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(4px, 1vw, 12px) 0 36px;
  color: #f5f3ff;
}
.profile-observatory::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 70px 4% auto;
  height: 460px;
  pointer-events: none;
  opacity: .46;
  filter: blur(62px);
  background: radial-gradient(circle at 24% 28%, var(--profile-hue), transparent 34%), radial-gradient(circle at 82% 15%, var(--profile-accent), transparent 28%);
}
.profile-topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 2px 18px; }
.profile-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--profile-accent) 65%, #dfe7ff); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.profile-topline h2 { margin: 7px 0 0; color: #fff; font-size: clamp(24px, 2.7vw, 36px); letter-spacing: -.055em; line-height: 1; }
.profile-topline h2 em, .profile-customizer h3 em { color: var(--profile-accent); font-style: normal; text-shadow: 0 0 24px color-mix(in srgb, var(--profile-accent) 55%, transparent); }
.profile-top-actions { display: flex; align-items: center; gap: 9px; }
.profile-ghost-btn, .profile-primary-btn, .profile-mini-link, .profile-discover-btn, .profile-reset-btn, .profile-save-btn, .profile-card-status button { border: 0; font: inherit; cursor: pointer; }
.profile-ghost-btn, .profile-primary-btn { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; gap: 7px; border-radius: 11px; padding: 0 13px; font-size: 11px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.profile-ghost-btn { color: #d8d3ee; border: 1px solid rgba(218,211,255,.16); background: rgba(10,10,29,.42); }
.profile-primary-btn { color: #fff; background: linear-gradient(135deg, var(--profile-hue), var(--profile-accent)); box-shadow: 0 10px 24px color-mix(in srgb, var(--profile-hue) 35%, transparent), inset 0 1px rgba(255,255,255,.35); }
.profile-ghost-btn:hover, .profile-primary-btn:hover, .profile-save-btn:hover, .profile-card-status button:hover { transform: translateY(-2px); }

.profile-hero-v2 { position: relative; overflow: hidden; min-height: 354px; border: 1px solid color-mix(in srgb, var(--profile-hue) 36%, rgba(255,255,255,.12)); border-radius: 26px; background: linear-gradient(118deg, rgba(12,13,35,.96), color-mix(in srgb, var(--profile-hue) 21%, rgba(17,17,45,.92)) 55%, rgba(8,9,25,.93)); box-shadow: 0 26px 75px rgba(0,0,0,.29), inset 0 1px rgba(255,255,255,.08); }
.profile-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.profile-aurora::before, .profile-aurora::after { content: ''; position: absolute; border-radius: 50%; filter: blur(4px); opacity: .52; }
.profile-aurora::before { width: 490px; height: 490px; top: -270px; left: -100px; background: radial-gradient(circle, color-mix(in srgb, var(--profile-hue) 78%, transparent), transparent 68%); }
.profile-aurora::after { width: 540px; height: 400px; right: -190px; bottom: -280px; background: radial-gradient(circle, color-mix(in srgb, var(--profile-accent) 65%, transparent), transparent 65%); }
.profile-aurora i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px color-mix(in srgb, var(--profile-accent) 70%, transparent); animation: profileTwinkle 3.4s ease-in-out infinite; }
.profile-aurora i:nth-child(1) { top: 21%; left: 17%; }
.profile-aurora i:nth-child(2) { top: 30%; right: 31%; width: 5px; height: 5px; animation-delay: -1.2s; }
.profile-aurora i:nth-child(3) { bottom: 22%; right: 10%; animation-delay: -2.1s; }
.profile-grid-light { position: absolute; right: -8%; bottom: -53%; width: 60%; height: 112%; opacity: .34; transform: perspective(340px) rotateX(62deg); background-image: linear-gradient(rgba(255,255,255,.21) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(to top, #000, transparent 78%); }
.profile-hero-content { position: relative; z-index: 1; display: grid; grid-template-columns: 142px minmax(0,1fr) 148px; align-items: center; gap: clamp(20px, 3vw, 42px); padding: 35px clamp(24px, 4vw, 50px) 25px; }
.profile-avatar-orbit { position: relative; width: 126px; height: 126px; display: grid; place-items: center; }
.profile-avatar-orbit img { position: relative; z-index: 2; width: 99px; height: 99px; border: 3px solid rgba(255,255,255,.78); border-radius: 32px; background: #131327; object-fit: cover; box-shadow: 0 0 0 8px color-mix(in srgb, var(--profile-hue) 22%, transparent), 0 15px 34px rgba(0,0,0,.5); transform: rotate(-4deg); transition: transform .25s ease; }
.profile-hero-v2:hover .profile-avatar-orbit img { transform: rotate(0) scale(1.025); }
.profile-avatar-orbit b { position: absolute; z-index: 3; right: 4px; bottom: 7px; display: grid; width: 34px; height: 34px; place-items: center; border: 3px solid #18152f; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--profile-hue), var(--profile-accent)); box-shadow: 0 4px 14px rgba(0,0,0,.4); font-size: 12px; }
.profile-orbit { position: absolute; display: block; border: 1px solid color-mix(in srgb, var(--profile-accent) 54%, transparent); border-radius: 50%; }
.orbit-one { inset: 0; transform: rotate(-23deg); animation: profileOrbit 12s linear infinite; }
.orbit-two { inset: 13px -8px; opacity: .52; transform: rotate(61deg); animation: profileOrbit 9s linear infinite reverse; }
.profile-live-status { display: flex; align-items: center; gap: 6px; color: rgba(235,232,255,.63); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.profile-live-status i, .profile-presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #9da0b1; box-shadow: 0 0 0 4px rgba(157,160,177,.13); }
.profile-live-status i.is-public, .profile-presence-dot { background: #2ee7aa; box-shadow: 0 0 0 4px rgba(46,231,170,.12), 0 0 14px rgba(46,231,170,.85); }
.profile-live-status span { color: rgba(255,255,255,.3); }
.profile-identity h3 { margin: 8px 0 2px; color: #fff; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.055em; line-height: 1.04; }
.profile-identity > p { margin: 0; color: color-mix(in srgb, var(--profile-accent) 60%, #cbd5e1); font-size: 13px; }
.profile-tagline { max-width: 590px; min-height: 35px; margin-top: 13px; color: rgba(237,235,255,.74); font-size: 12px; line-height: 1.55; }
.profile-badge-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.profile-badge-line span { max-width: 180px; overflow: hidden; padding: 5px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #e9e4ff; background: rgba(8,9,27,.31); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.profile-badge-line .is-empty { color: rgba(232,229,255,.5); }
.profile-level-core { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
.profile-level-ring { position: relative; display: grid; width: 110px; height: 110px; place-items: center; border-radius: 50%; background: conic-gradient(var(--profile-accent) var(--profile-progress), rgba(255,255,255,.11) 0); box-shadow: 0 0 29px color-mix(in srgb, var(--profile-accent) 34%, transparent); }
.profile-level-ring::before { content: ''; position: absolute; width: 92px; height: 92px; border-radius: 50%; background: #15142e; box-shadow: inset 0 1px rgba(255,255,255,.11); }
.profile-level-ring > div { position: relative; z-index: 1; display: flex; flex-direction: column; }
.profile-level-ring strong { color: #fff; font-size: 33px; letter-spacing: -.07em; line-height: .9; }
.profile-level-ring span { margin-top: 5px; color: rgba(228,225,255,.62); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.profile-level-core p { margin: 0; color: rgba(235,231,255,.58); font-size: 10px; white-space: nowrap; }.profile-level-core p b { color: #fff; }
.profile-xp-rail { position: relative; z-index: 1; padding: 0 clamp(24px, 4vw, 50px) 26px; }.profile-xp-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: rgba(231,227,255,.61); font-size: 10px; font-weight: 800; letter-spacing: .08em; }.profile-xp-meta b { color: #fff; font-size: 11px; letter-spacing: 0; }.profile-xp-meta i { color: rgba(231,227,255,.5); font-style: normal; font-weight: 600; }.profile-xp-track { height: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(0,0,0,.23); box-shadow: inset 0 2px 6px rgba(0,0,0,.34); }.profile-xp-track i { display: block; width: var(--profile-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--profile-hue), var(--profile-accent), #dce7ff); box-shadow: 0 0 15px color-mix(in srgb, var(--profile-accent) 72%, transparent); transition: width .45s cubic-bezier(.2,.8,.2,1); }.profile-xp-rail small { display: block; margin-top: 8px; color: rgba(230,227,255,.5); font-size: 10px; }

.profile-bento-grid { display: grid; grid-template-columns: 1.15fr .85fr .95fr; gap: 14px; margin-top: 15px; }.profile-panel { min-height: 211px; padding: 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 19px; background: linear-gradient(145deg, rgba(18,18,44,.82), rgba(8,9,26,.72)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 14px 35px rgba(0,0,0,.13); }.profile-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(225,221,255,.72); font-size: 10px; font-weight: 900; letter-spacing: .09em; }.profile-mini-link { display: inline-flex; align-items: center; gap: 3px; padding: 0; color: var(--profile-accent); background: transparent; font-size: 10px; font-weight: 800; }.profile-metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 22px; }.profile-metric-grid div { padding: 9px 5px; border-radius: 10px; text-align: center; background: rgba(255,255,255,.035); }.profile-metric-grid b { display: block; color: #fff; font-size: 18px; letter-spacing: -.05em; }.profile-metric-grid span { display: block; margin-top: 3px; color: rgba(226,223,249,.5); font-size: 9px; font-weight: 700; }.profile-card-status { display: flex; align-items: center; gap: 10px; margin-top: 17px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.08); }.profile-card-icon { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(140deg, var(--profile-hue), var(--profile-accent)); }.profile-card-status div { min-width: 0; flex: 1; }.profile-card-status strong, .profile-card-status small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-card-status strong { color: #f8f7ff; font-size: 11px; }.profile-card-status small { margin-top: 3px; color: rgba(225,221,249,.5); font-size: 9px; }.profile-card-status button { padding: 6px 8px; border-radius: 8px; color: #e8e3ff; background: rgba(255,255,255,.07); font-size: 10px; font-weight: 800; }
.profile-count-pill { padding: 4px 7px; border-radius: 99px; color: var(--profile-accent); background: color-mix(in srgb, var(--profile-accent) 13%, transparent); font-size: 9px; }.profile-badge-shelf { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; min-height: 132px; margin-top: 18px; }.profile-badge-chip { max-width: 100%; overflow: hidden; padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: rgba(235,233,255,.75); background: rgba(255,255,255,.045); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.profile-badge-chip.is-featured { color: #fff; border-color: color-mix(in srgb, var(--profile-accent) 39%, transparent); background: color-mix(in srgb, var(--profile-accent) 16%, transparent); }.profile-empty-state { display: grid; place-content: center; gap: 8px; width: 100%; color: rgba(225,221,249,.48); text-align: center; font-size: 10px; }.profile-empty-state svg { margin: auto; color: var(--profile-accent); }.profile-discover-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: var(--profile-accent); background: transparent; font-size: 10px; font-weight: 800; }
.profile-panel-presence { display: flex; flex-direction: column; }.profile-presence-dot { width: 6px; height: 6px; }.profile-song { display: flex; align-items: center; gap: 10px; min-height: 72px; margin-top: 17px; padding: 10px; border-radius: 13px; background: linear-gradient(120deg, color-mix(in srgb, var(--profile-hue) 16%, rgba(255,255,255,.035)), rgba(255,255,255,.025)); }.profile-song-art { display: grid; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; place-items: center; border-radius: 10px; color: var(--profile-accent); background: #111126; }.profile-song-art img { width: 100%; height: 100%; object-fit: cover; }.profile-song div:not(.profile-song-art) { min-width: 0; flex: 1; }.profile-song strong, .profile-song small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.profile-song strong { color: #f8f7ff; font-size: 11px; }.profile-song small { margin-top: 4px; color: rgba(229,225,250,.5); font-size: 10px; }.profile-song > span { color: var(--profile-accent); }.profile-song-empty { color: rgba(229,225,250,.5); }.profile-links-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 13px; }.profile-links-row a { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; overflow: hidden; padding: 6px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; color: rgba(237,234,255,.72); background: rgba(255,255,255,.035); font-size: 9px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }.profile-links-row a:hover { border-color: color-mix(in srgb, var(--profile-accent) 47%, transparent); color: #fff; }.profile-links-empty { color: rgba(229,225,250,.48); font-size: 10px; }

.profile-customizer { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; margin-top: 15px; padding: clamp(20px,3vw,31px); border: 1px solid color-mix(in srgb, var(--profile-accent) 28%, rgba(255,255,255,.1)); border-radius: 21px; background: linear-gradient(112deg, rgba(13,13,34,.89), color-mix(in srgb, var(--profile-hue) 12%, rgba(20,17,47,.84))); box-shadow: inset 0 1px rgba(255,255,255,.07); }.profile-customizer h3 { margin: 7px 0 8px; color: #fff; font-size: 25px; letter-spacing: -.045em; }.profile-customizer p { max-width: 310px; margin: 0; color: rgba(231,228,251,.58); font-size: 11px; line-height: 1.55; }.profile-palette { display: flex; gap: 8px; margin-top: 19px; }.profile-swatch { width: 24px; height: 24px; border: 2px solid transparent; border-radius: 50%; background: var(--swatch); box-shadow: 0 4px 11px color-mix(in srgb, var(--swatch) 53%, transparent); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }.profile-swatch:hover { transform: translateY(-2px) scale(1.09); }.profile-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch) 36%, transparent), 0 4px 11px color-mix(in srgb, var(--swatch) 53%, transparent); }.profile-form-area { display: flex; min-width: 0; flex-direction: column; gap: 12px; }.profile-field { display: block; }.profile-field > span { display: flex; justify-content: space-between; margin-bottom: 7px; color: rgba(230,226,251,.72); font-size: 10px; font-weight: 800; }.profile-field b { color: var(--profile-accent); font-weight: 800; }.profile-field textarea { box-sizing: border-box; width: 100%; resize: vertical; min-height: 91px; padding: 12px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; outline: none; color: #f8f7ff; background: rgba(4,5,18,.43); font: inherit; font-size: 12px; line-height: 1.5; transition: border-color .18s ease, box-shadow .18s ease; }.profile-field textarea:focus { border-color: color-mix(in srgb, var(--profile-accent) 62%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--profile-accent) 13%, transparent); }.profile-color-row { display: flex; align-items: center; gap: 9px; }.profile-color-row label { display: flex; align-items: center; gap: 7px; color: rgba(230,226,251,.65); font-size: 10px; font-weight: 800; }.profile-color-row input { width: 30px; height: 30px; padding: 2px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }.profile-color-row > span { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: var(--preview); box-shadow: 0 0 13px var(--preview); }.profile-reset-btn { margin-left: auto; padding: 7px 8px; color: rgba(230,226,251,.62); background: transparent; font-size: 10px; }.profile-save-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--profile-hue), var(--profile-accent)); box-shadow: 0 8px 18px color-mix(in srgb, var(--profile-hue) 27%, transparent); font-size: 10px; font-weight: 900; }
.profile-load-error { display: flex; align-items: center; gap: 10px; padding: 22px; border: 1px solid rgba(244,114,182,.35); border-radius: 15px; color: #fce7f3; background: rgba(76,13,47,.24); }.profile-load-error button { margin-left: auto; }
@media (max-width: 680px) {
  .arc-coin-guide { align-items: flex-start; flex-wrap: wrap; }
  .arc-coin-guide-tip { width: 100%; margin-left: 66px; }
  .arc-confirm-detail-grid, .arc-subscription-plans { grid-template-columns: 1fr; }
  .arc-subscription-heading { align-items: flex-start; }
  .arc-subscription-orbit { width: 60px; height: 60px; }
  .arc-subscription-zone { padding-left: 16px; padding-right: 16px; }
}
@keyframes profileOrbit { to { transform: rotate(337deg); } } @keyframes profileTwinkle { 50% { transform: scale(2.3); opacity: .25; } }
@media (max-width: 1020px) { .profile-bento-grid { grid-template-columns: repeat(2, 1fr); }.profile-panel-presence { grid-column: 1 / -1; min-height: 170px; }.profile-customizer { grid-template-columns: 1fr; gap: 21px; }.profile-customizer p { max-width: none; } }
@media (max-width: 720px) { .profile-topline { align-items: flex-start; flex-direction: column; }.profile-top-actions { width: 100%; }.profile-top-actions button { flex: 1; }.profile-hero-content { grid-template-columns: 96px minmax(0,1fr); gap: 19px; padding: 27px 20px 22px; }.profile-avatar-orbit { width: 88px; height: 88px; }.profile-avatar-orbit img { width: 70px; height: 70px; border-radius: 22px; }.profile-avatar-orbit b { right: -2px; bottom: -2px; width: 29px; height: 29px; font-size: 10px; }.profile-level-core { display: none; }.profile-identity h3 { font-size: 27px; }.profile-tagline { min-height: 0; font-size: 11px; }.profile-badge-line { display: none; }.profile-xp-rail { padding: 0 20px 22px; }.profile-bento-grid { grid-template-columns: 1fr; }.profile-panel-presence { grid-column: auto; min-height: 185px; }.profile-customizer { padding: 20px; }.profile-color-row { flex-wrap: wrap; }.profile-reset-btn { margin-left: 0; }.profile-save-btn { margin-left: auto; }.profile-metric-grid b { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .profile-avatar-orbit img, .profile-swatch, .profile-primary-btn, .profile-ghost-btn, .profile-save-btn, .profile-card-status button { transition: none !important; }.profile-aurora i, .profile-orbit { animation: none !important; } }
.profile-card-status .profile-card-balance { color: var(--profile-accent); font-variant-numeric: tabular-nums; }
.arc-space-field { position:absolute; inset:0; overflow:hidden; background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.08),transparent 32%); }
.arc-space-field i { position:absolute; width:3px; height:3px; border-radius:50%; background:#fff; box-shadow:0 0 8px currentColor; animation:arcStarDrift 4s ease-in-out infinite; }
.arc-space-field i:nth-child(1){left:18%;top:24%;color:#f6dc9d}.arc-space-field i:nth-child(2){left:76%;top:31%;color:#67e8f9;animation-delay:-1s}.arc-space-field i:nth-child(3){left:28%;top:70%;color:#d8b4fe;animation-delay:-2s}.arc-space-field i:nth-child(4){left:84%;top:72%;color:#fff;animation-delay:-3s}
.arc-plan-orb { position:relative; z-index:2; display:block; width:92px; height:92px; border-radius:50%; animation:arcOrbFloat 4s ease-in-out infinite; }
.arc-saturn { background:radial-gradient(circle at 35% 28%,#fff3b0 0 8%,#c18b38 9% 28%,#5e3d88 70%,#20143f); box-shadow:0 0 35px rgba(245,217,139,.55); }
.arc-saturn:before { content:''; position:absolute; left:-23px; top:35px; width:138px; height:28px; border:4px solid rgba(245,217,139,.75); border-radius:50%; transform:rotate(-18deg); box-shadow:0 0 12px rgba(245,217,139,.45); }
.arc-galaxy { background:radial-gradient(circle at 35% 38%,#fff 0 3%,#a78bfa 6%,#4338ca 23%,#07152f 68%); box-shadow:0 0 42px rgba(34,211,238,.5); }
.arc-galaxy:before,.arc-galaxy:after { content:''; position:absolute; inset:-18px; border:2px solid rgba(103,232,249,.5); border-radius:50%; transform:rotate(28deg); animation:arcGalaxySpin 8s linear infinite; }.arc-galaxy:after{inset:-4px;border-color:rgba(216,180,254,.35);transform:rotate(-42deg);animation-duration:11s}
@keyframes arcOrbFloat { 50% { transform:translateY(-6px) rotate(3deg); } } @keyframes arcStarDrift { 50% { opacity:.35; transform:translate(8px,-5px) scale(1.8); } } @keyframes arcGalaxySpin { to { transform:rotate(388deg); } }
.arc-subscription-actions { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.09); }.arc-subscription-actions>span { display:block; color:#9ca3d9; font-size:9px; font-weight:900; letter-spacing:.16em; }.arc-subscription-actions>div { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }.arc-plan-link { display:inline-flex; align-items:center; gap:5px; padding:7px 10px; border:1px solid rgba(103,232,249,.25); border-radius:10px; color:#dbeafe; background:rgba(255,255,255,.045); font-size:11px; text-decoration:none; transition:transform .18s ease,background .18s ease,border-color .18s ease; }.arc-plan-link:hover { transform:translateY(-2px); border-color:#67e8f9; background:rgba(103,232,249,.12); }
.arc-highlow { display:flex; align-items:center; justify-content:center; gap:14px; min-height:100px; }
.arc-highlow-card { display:grid; place-items:center; width:72px; height:92px; border:1px solid rgba(124,108,255,.5); border-radius:14px; color:#fff; background:linear-gradient(145deg,rgba(124,108,255,.28),rgba(10,12,35,.9)); box-shadow:0 12px 30px rgba(0,0,0,.25); font-size:28px; font-weight:800; }
.arc-highlow-arrow { color:var(--text-muted); font-size:24px; }
.arc-dice { display:grid; place-items:center; min-height:100px; }
.arc-dice span { display:grid; place-items:center; width:78px; height:78px; border-radius:18px; color:#fff; background:linear-gradient(145deg,rgba(168,85,247,.6),rgba(22,24,60,.95)); box-shadow:0 0 28px rgba(168,85,247,.3); font-size:34px; font-weight:900; animation: arcDiceFloat 1.8s ease-in-out infinite; }
@keyframes arcDiceFloat { 50% { transform:translateY(-7px) rotate(4deg); } }

/* Modales y suscripciones: una sola capa de scroll, sin saltos del documento. */
body.arc-modal-open { overflow: hidden; }
.arc-product-backdrop { overscroll-behavior: contain; touch-action: none; backdrop-filter: blur(10px) saturate(115%); will-change: opacity; }
.arc-product-modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; contain: layout paint; will-change: transform; }
.arc-product-modal .arc-mini-preview { flex: 0 0 auto; transform: translateZ(0); }
.arc-product-modal .arc-mini-preview::after { animation-duration: 5s; }

.arc-subscription-return { position: absolute; top: 22px; right: 26px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(165,180,252,.25); border-radius: 999px; color: #dbeafe; background: rgba(7,12,31,.52); backdrop-filter: blur(12px); cursor: pointer; font-size: 11px; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.arc-subscription-return:hover { transform: translateX(-3px); border-color: rgba(103,232,249,.55); background: rgba(30,41,79,.72); }

body.arc-subscription-focus { overflow: hidden; }
body.arc-subscription-focus .sidebar,
body.arc-subscription-focus .sidebar-scrim,
body.arc-subscription-focus #settings-content > * { opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity .28s ease, transform .42s cubic-bezier(.16,1,.3,1); }
body.arc-subscription-focus #arc-shop-plans { position: fixed; inset: 0; z-index: 900; display: block; min-height: 100svh; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; background: radial-gradient(circle at 50% 16%, rgba(99,102,241,.22), transparent 34%), #050611; animation: arcSubscriptionDrop .62s cubic-bezier(.16,1,.3,1) both; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-transition { display: none; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-zone { min-height: 100svh; box-sizing: border-box; margin: 0; padding: clamp(74px, 10vh, 120px) clamp(18px, 6vw, 90px) 80px; border: 0; border-radius: 0; box-shadow: none; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-return { position: fixed; top: 22px; left: 22px; right: auto; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-heading { animation: arcSubscriptionRise .7s .08s both; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-card { animation: arcSubscriptionRise .7s calc(.12s + var(--card-delay, 0s)) both; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-card:nth-child(2) { --card-delay: .1s; }
@keyframes arcSubscriptionDrop { from { opacity: 0; transform: translateY(-34px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes arcSubscriptionRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .arc-product-backdrop, .arc-product-modal, .arc-subscription-transition *, #arc-shop-plans, .arc-subscription-card, .arc-subscription-heading { animation: none !important; transition-duration: .01ms !important; }
}

/* Suscripciones: escena editorial con profundidad, reservada para la entrada dedicada. */
.arc-subscription-transition { min-height: 218px; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, rgba(99,102,241,.16), transparent 45%), linear-gradient(180deg, rgba(4,6,19,.06), rgba(4,6,19,.72)); }
.arc-transition-grid { position: absolute; inset: 0 -12%; z-index: -2; opacity: .46; background-image: linear-gradient(rgba(129,140,248,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.1) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, transparent, #000 35%, transparent); transform: perspective(420px) rotateX(58deg) translateY(42px) scale(1.45); animation: arcTransitionGrid 10s linear infinite; }
.arc-transition-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.arc-transition-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 12px #818cf8; animation: arcTransitionStar 3.5s ease-in-out infinite; }.arc-transition-stars i:nth-child(1) { top: 24%; left: 28%; }.arc-transition-stars i:nth-child(2) { top: 38%; right: 23%; animation-delay: -1.1s; }.arc-transition-stars i:nth-child(3) { bottom: 24%; left: 41%; animation-delay: -2.3s; }.arc-transition-stars i:nth-child(4) { bottom: 30%; right: 36%; animation-delay: -.6s; }
.arc-transition-orb { position: relative; width: 68px; height: 68px; border-radius: 24px; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }.arc-transition-orb::before, .arc-transition-orb::after { content: ''; position: absolute; inset: -9px; border: 1px solid rgba(129,140,248,.22); border-radius: 28px; transform: rotate(45deg); animation: arcTransitionOrbit 7s linear infinite; }.arc-transition-orb::after { inset: -17px; border-color: rgba(34,211,238,.12); animation-direction: reverse; animation-duration: 11s; }.arc-transition-orb span { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(145deg, rgba(129,140,248,.32), rgba(14,20,57,.85)); }
.arc-transition-orb:hover { transform: translateY(4px) scale(1.06); box-shadow: 0 0 46px rgba(99,102,241,.52); }
.arc-subscription-transition b { position: relative; margin-top: 6px; font-size: 15px; }.arc-subscription-transition small { position: relative; margin-top: -5px; color: #a5b4fc; }

body.arc-subscription-focus #arc-shop-plans { animation: arcSubscriptionDrop .88s cubic-bezier(.16,1,.3,1) both; }
body.arc-subscription-focus #arc-shop-plans::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .54; background-image: linear-gradient(rgba(129,140,248,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.08) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse at center, #000, transparent 78%); animation: arcFocusGrid 18s linear infinite; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-zone { background: radial-gradient(ellipse at 50% -12%, rgba(168,85,247,.23), transparent 34%), radial-gradient(ellipse at 10% 80%, rgba(6,182,212,.12), transparent 30%), linear-gradient(145deg, #080a1b, #050611 58%, #080e24); }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-heading { max-width: 1020px; margin-bottom: 38px; animation: arcSubscriptionRise .82s .12s both; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-intro { max-width: 1020px; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-plans { max-width: 1020px; gap: 28px; }
.arc-subscription-card { min-height: 500px; padding: 22px; border-radius: 28px; transform-style: preserve-3d; }
.arc-subscription-card::before { content: ''; position: absolute; inset: 1px; border-radius: 27px; pointer-events: none; opacity: .55; background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 23% 72%, rgba(34,211,238,.12)); mask-image: linear-gradient(#000, transparent 74%); }
.arc-subscription-card::after { content: ''; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transform: skewX(-18deg); animation: arcCardSheen 7s ease-in-out infinite; }
.arc-subscription-card-visual { position: relative; display: grid; place-items: center; height: 172px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 21px; background: radial-gradient(circle at 50% 45%, rgba(168,85,247,.3), transparent 35%), rgba(4,7,20,.46); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 16px 30px rgba(0,0,0,.2); transform: translateZ(15px); }
.is-featured .arc-subscription-card-visual { background: radial-gradient(circle at 50% 45%, rgba(6,182,212,.28), transparent 35%), rgba(4,10,22,.52); }
.arc-card-visual-grid { position: absolute; inset: -30%; opacity: .35; background-image: linear-gradient(rgba(129,140,248,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.18) 1px, transparent 1px); background-size: 24px 24px; transform: perspective(300px) rotateX(64deg) translateY(38px); animation: arcVisualGrid 8s linear infinite; }
.arc-subscription-card-visual .arc-subscription-plan-icon { position: relative; z-index: 2; width: 78px; height: 78px; border-radius: 25px; color: #f6dc9d; background: linear-gradient(145deg, rgba(245,217,139,.2), rgba(129,140,248,.2)); box-shadow: 0 0 0 8px rgba(245,217,139,.035), 0 0 38px rgba(245,217,139,.24), inset 0 1px rgba(255,255,255,.24); }
.is-featured .arc-subscription-card-visual .arc-subscription-plan-icon { color: #8be9f5; background: linear-gradient(145deg, rgba(34,211,238,.24), rgba(129,140,248,.2)); box-shadow: 0 0 0 8px rgba(34,211,238,.035), 0 0 38px rgba(34,211,238,.25), inset 0 1px rgba(255,255,255,.24); }
.arc-subscription-card-visual > i { position: absolute; width: 128px; height: 54px; border: 1px solid rgba(245,217,139,.25); border-radius: 50%; transform: rotate(-24deg); animation: arcCardOrbit 8s linear infinite; }.arc-subscription-card-visual > i:nth-of-type(2) { width: 156px; height: 70px; border-color: rgba(34,211,238,.18); transform: rotate(34deg); animation-direction: reverse; animation-duration: 11s; }
.arc-subscription-card-visual > b { position: absolute; bottom: 13px; left: 15px; color: #a5b4fc; font-size: 8px; letter-spacing: .18em; }.is-featured .arc-subscription-card-visual > b { color: #67e8f9; }
.arc-subscription-card-top { margin-top: 18px; }.arc-subscription-sequence { color: rgba(255,255,255,.35); font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }
.arc-subscription-card h4 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }.arc-subscription-card p { min-height: 48px; font-size: 13px; line-height: 1.55; }.arc-subscription-price { margin-top: 4px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(3,6,18,.3); }.arc-subscription-price strong { font-size: 42px; }.arc-subscription-benefits { gap: 11px; min-height: 118px; font-size: 13px; }.arc-subscription-button { min-height: 42px; letter-spacing: .04em; }
@keyframes arcTransitionGrid { to { transform: perspective(420px) rotateX(58deg) translateY(65px) scale(1.45); } } @keyframes arcTransitionStar { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.7); } } @keyframes arcTransitionOrbit { to { transform: rotate(405deg); } } @keyframes arcFocusGrid { to { background-position: 54px 54px; } } @keyframes arcVisualGrid { to { background-position: 24px 24px; } } @keyframes arcCardOrbit { to { transform: rotate(336deg); } } @keyframes arcCardSheen { 0%, 58% { left: -65%; } 78%, 100% { left: 130%; } }
@media (max-width: 680px) { .arc-subscription-card { min-height: 0; }.arc-subscription-card-visual { height: 145px; }.arc-subscription-price strong { font-size: 34px; } }

.arc-benefits-label { display: block; margin-bottom: 1px; color: #818cf8; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.arc-subscription-details { position: relative; display: flex; flex-direction: column; gap: 7px; margin-top: 2px; padding: 13px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(135deg, rgba(3,6,20,.5), rgba(129,140,248,.06)); }
.arc-subscription-details > span { color: #67e8f9; font-size: 9px; font-weight: 900; letter-spacing: .13em; }.arc-subscription-details > div { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; }.arc-subscription-details b { color: rgba(255,255,255,.35); font: 800 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }.arc-subscription-details p { min-height: 0; margin: 0; color: #aeb9d2; font-size: 10px; line-height: 1.42; }
.arc-subscription-card.is-featured .arc-subscription-details { border-color: rgba(34,211,238,.16); background: linear-gradient(135deg, rgba(3,14,27,.55), rgba(6,182,212,.07)); }.arc-subscription-card.is-featured .arc-subscription-details > span { color: #67e8f9; }
@media (min-width: 900px) { body.arc-subscription-focus #arc-shop-plans .arc-subscription-card { min-height: 590px; } }
.arc-subscription-access-note { position: relative; display: flex; align-items: center; gap: 12px; max-width: 1020px; margin: 0 auto 22px; padding: 13px 16px; border: 1px solid rgba(245,217,139,.2); border-radius: 15px; background: linear-gradient(90deg, rgba(245,217,139,.08), rgba(129,140,248,.06)); box-shadow: inset 0 1px rgba(255,255,255,.08); }.arc-subscription-access-note > span { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 10px; color: #f5d98b; background: rgba(245,217,139,.12); }.arc-subscription-access-note div { min-width: 0; }.arc-subscription-access-note b { display: block; color: #f8fafc; font-size: 11px; }.arc-subscription-access-note small { display: block; margin-top: 3px; color: #a8b1c8; font-size: 10px; line-height: 1.4; }.arc-subscription-access-note em { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(245,217,139,.24); border-radius: 999px; color: #f5d98b; font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: .12em; white-space: nowrap; }

/* Overrides finales de la escena dedicada: quedan después de los estilos legacy del shop. */
.arc-subscription-transition { min-height: 218px; background: radial-gradient(ellipse at 50% 40%, rgba(99,102,241,.16), transparent 45%), linear-gradient(180deg, rgba(4,6,19,.06), rgba(4,6,19,.72)); }
.arc-transition-grid { position: absolute; inset: 0 -12%; z-index: -2; opacity: .46; background-image: linear-gradient(rgba(129,140,248,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.1) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, transparent, #000 35%, transparent); transform: perspective(420px) rotateX(58deg) translateY(42px) scale(1.45); animation: arcTransitionGrid 10s linear infinite; }
.arc-transition-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }.arc-transition-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c4b5fd; box-shadow: 0 0 12px #818cf8; animation: arcTransitionStar 3.5s ease-in-out infinite; }.arc-transition-stars i:nth-child(1) { top: 24%; left: 28%; }.arc-transition-stars i:nth-child(2) { top: 38%; right: 23%; animation-delay: -1.1s; }.arc-transition-stars i:nth-child(3) { bottom: 24%; left: 41%; animation-delay: -2.3s; }.arc-transition-stars i:nth-child(4) { bottom: 30%; right: 36%; animation-delay: -.6s; }
.arc-transition-orb { position: relative; width: 68px; height: 68px; border-radius: 24px; }.arc-transition-orb::before, .arc-transition-orb::after { content: ''; position: absolute; inset: -9px; border: 1px solid rgba(129,140,248,.22); border-radius: 28px; transform: rotate(45deg); animation: arcTransitionOrbit 7s linear infinite; }.arc-transition-orb::after { inset: -17px; border-color: rgba(34,211,238,.12); animation-direction: reverse; animation-duration: 11s; }.arc-transition-orb span { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(145deg, rgba(129,140,248,.32), rgba(14,20,57,.85)); }
body.arc-subscription-focus #arc-shop-plans { animation: arcSubscriptionDrop .88s cubic-bezier(.16,1,.3,1) both; }
body.arc-subscription-focus #arc-shop-plans::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .54; background-image: linear-gradient(rgba(129,140,248,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.08) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse at center, #000, transparent 78%); animation: arcFocusGrid 18s linear infinite; }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-zone { background: radial-gradient(ellipse at 50% -12%, rgba(168,85,247,.23), transparent 34%), radial-gradient(ellipse at 10% 80%, rgba(6,182,212,.12), transparent 30%), linear-gradient(145deg, #080a1b, #050611 58%, #080e24); }
body.arc-subscription-focus #arc-shop-plans .arc-subscription-heading { max-width: 1020px; margin-bottom: 38px; animation: arcSubscriptionRise .82s .12s both; } body.arc-subscription-focus #arc-shop-plans .arc-subscription-intro { max-width: 1020px; } body.arc-subscription-focus #arc-shop-plans .arc-subscription-plans { max-width: 1020px; gap: 28px; }
.arc-subscription-card { min-height: 500px; padding: 22px; border-radius: 28px; transform-style: preserve-3d; }.arc-subscription-card::before { content: ''; position: absolute; inset: 1px; border-radius: 27px; pointer-events: none; opacity: .55; background: linear-gradient(120deg, rgba(255,255,255,.13), transparent 23% 72%, rgba(34,211,238,.12)); mask-image: linear-gradient(#000, transparent 74%); }.arc-subscription-card::after { content: ''; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transform: skewX(-18deg); animation: arcCardSheen 7s ease-in-out infinite; }
.arc-subscription-card-visual { position: relative; display: grid; place-items: center; height: 172px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 21px; background: radial-gradient(circle at 50% 45%, rgba(168,85,247,.3), transparent 35%), rgba(4,7,20,.46); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 16px 30px rgba(0,0,0,.2); transform: translateZ(15px); }.is-featured .arc-subscription-card-visual { background: radial-gradient(circle at 50% 45%, rgba(6,182,212,.28), transparent 35%), rgba(4,10,22,.52); }.arc-card-visual-grid { position: absolute; inset: -30%; opacity: .35; background-image: linear-gradient(rgba(129,140,248,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(129,140,248,.18) 1px, transparent 1px); background-size: 24px 24px; transform: perspective(300px) rotateX(64deg) translateY(38px); animation: arcVisualGrid 8s linear infinite; }
.arc-subscription-card-visual .arc-subscription-plan-icon { position: relative; z-index: 2; width: 78px; height: 78px; border-radius: 25px; color: #f6dc9d; background: linear-gradient(145deg, rgba(245,217,139,.2), rgba(129,140,248,.2)); box-shadow: 0 0 0 8px rgba(245,217,139,.035), 0 0 38px rgba(245,217,139,.24), inset 0 1px rgba(255,255,255,.24); }.is-featured .arc-subscription-card-visual .arc-subscription-plan-icon { color: #8be9f5; background: linear-gradient(145deg, rgba(34,211,238,.24), rgba(129,140,248,.2)); box-shadow: 0 0 0 8px rgba(34,211,238,.035), 0 0 38px rgba(34,211,238,.25), inset 0 1px rgba(255,255,255,.24); }.arc-subscription-card-visual > i { position: absolute; width: 128px; height: 54px; border: 1px solid rgba(245,217,139,.25); border-radius: 50%; transform: rotate(-24deg); animation: arcCardOrbit 8s linear infinite; }.arc-subscription-card-visual > i:nth-of-type(2) { width: 156px; height: 70px; border-color: rgba(34,211,238,.18); transform: rotate(34deg); animation-direction: reverse; animation-duration: 11s; }.arc-subscription-card-visual > b { position: absolute; bottom: 13px; left: 15px; color: #a5b4fc; font-size: 8px; letter-spacing: .18em; }.is-featured .arc-subscription-card-visual > b { color: #67e8f9; }
.arc-subscription-card-top { margin-top: 18px; }.arc-subscription-sequence { color: rgba(255,255,255,.35); font: 800 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; }.arc-subscription-card h4 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }.arc-subscription-card p { min-height: 48px; font-size: 13px; line-height: 1.55; }.arc-subscription-price { margin-top: 4px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(3,6,18,.3); }.arc-subscription-price strong { font-size: 42px; }.arc-subscription-benefits { gap: 11px; min-height: 118px; font-size: 13px; }.arc-subscription-button { min-height: 42px; letter-spacing: .04em; }
@keyframes arcTransitionGrid { to { transform: perspective(420px) rotateX(58deg) translateY(65px) scale(1.45); } } @keyframes arcTransitionStar { 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.7); } } @keyframes arcTransitionOrbit { to { transform: rotate(405deg); } } @keyframes arcFocusGrid { to { background-position: 54px 54px; } } @keyframes arcVisualGrid { to { background-position: 24px 24px; } } @keyframes arcCardOrbit { to { transform: rotate(336deg); } } @keyframes arcCardSheen { 0%, 58% { left: -65%; } 78%, 100% { left: 130%; } }
@media (max-width: 680px) { .arc-subscription-card { min-height: 0; }.arc-subscription-card-visual { height: 145px; }.arc-subscription-price strong { font-size: 34px; } }

/* Tienda: escenario de suscripciones integrado al lenguaje glass de Arcirius. */
.arc-subscription-transition { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 154px; margin: 34px 0 0; padding: 32px 12px 22px; color: #c4b5fd; background: transparent; text-align: center; }
.arc-transition-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(129,140,248,.48), transparent); }
.arc-transition-orb { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(129,140,248,.42); border-radius: 22px; color: #a5b4fc; background: linear-gradient(145deg, rgba(99,102,241,.2), rgba(6,182,212,.12)); box-shadow: 0 0 0 7px rgba(99,102,241,.035), 0 0 34px rgba(99,102,241,.32); animation: arcSubscriptionFloat 3s ease-in-out infinite; }
.arc-subscription-transition b { grid-column: 1 / -1; grid-row: 2; color: #eef2ff; font-size: 14px; letter-spacing: .01em; }
.arc-subscription-transition small { grid-column: 1 / -1; grid-row: 3; margin-top: -10px; color: #818cf8; font-size: 11px; }
.arc-subscription-zone { position: relative; isolation: isolate; margin: 0; padding: 48px clamp(18px, 4vw, 42px) 38px; overflow: hidden; border: 1px solid rgba(129,140,248,.24); border-radius: 32px; background: linear-gradient(145deg, rgba(23,21,55,.88), rgba(8,14,35,.86) 58%, rgba(12,34,57,.78)); box-shadow: 0 25px 90px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.12); }
.arc-subscription-zone::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 10% 12%, rgba(168,85,247,.2), transparent 29%), radial-gradient(circle at 92% 18%, rgba(34,211,238,.16), transparent 27%), linear-gradient(115deg, transparent 36%, rgba(255,255,255,.035) 50%, transparent 65%); pointer-events: none; }
.arc-subscription-zone::after { content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: 31px; background: linear-gradient(135deg, transparent 0 46%, rgba(129,140,248,.08) 50%, transparent 54%); opacity: .7; pointer-events: none; }
.arc-subscription-ambient { position: absolute; z-index: -1; width: 210px; height: 210px; border: 1px solid rgba(129,140,248,.13); border-radius: 50%; pointer-events: none; animation: arcAmbientDrift 10s ease-in-out infinite alternate; }
.arc-subscription-ambient::after { content: ''; position: absolute; inset: 22px; border: 1px solid rgba(34,211,238,.12); border-radius: inherit; }
.arc-subscription-ambient-one { top: -108px; left: -65px; }.arc-subscription-ambient-two { right: -90px; bottom: -120px; animation-delay: -4s; }
.arc-subscription-heading { position: relative; display: flex; align-items: center; gap: 18px; max-width: 850px; margin: 0 auto 30px; text-align: left; }
.arc-subscription-orbit { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 82px; height: 82px; color: #f5d98b; border: 1px solid rgba(245,217,139,.32); border-radius: 26px; background: linear-gradient(145deg, rgba(245,217,139,.14), rgba(168,85,247,.25) 54%, rgba(6,182,212,.18)); box-shadow: 0 0 32px rgba(245,217,139,.14), inset 0 1px rgba(255,255,255,.18); }
.arc-subscription-orbit i { position: absolute; inset: -8px; border: 1px dashed rgba(245,217,139,.27); border-radius: 30px; animation: arcSubscriptionOrbit 10s linear infinite; }
.arc-subscription-heading h3 { margin: 4px 0 5px; color: #fff; font-size: clamp(25px, 4vw, 42px); letter-spacing: -.045em; text-shadow: 0 8px 28px rgba(0,0,0,.35); }
.arc-subscription-heading p { max-width: 600px; color: #b4bdd5; font-size: 12px; line-height: 1.6; }
.arc-subscription-intro { display: flex; align-items: baseline; gap: 12px; max-width: 850px; margin: 0 auto 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }.arc-subscription-intro span { color: #67e8f9; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.arc-subscription-intro b { color: #eef2ff; font-size: 14px; }.arc-subscription-intro small { margin-left: auto; color: #8994b0; font-size: 10px; }
.arc-subscription-plans { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 850px; margin: 0 auto; perspective: 1400px; }
.arc-subscription-card { transform: rotateX(0) rotateY(0) translateZ(0); min-height: 405px; border-radius: 24px; background: linear-gradient(155deg, rgba(32,29,77,.86), rgba(10,16,38,.9)); box-shadow: 0 20px 42px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.15); transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s, border-color .3s; }
.arc-subscription-card:hover { transform: rotateX(2deg) rotateY(-2deg) translateY(-9px) translateZ(12px); box-shadow: 0 32px 75px rgba(0,0,0,.45), 0 0 42px rgba(129,140,248,.16), inset 0 1px rgba(255,255,255,.18); }
.arc-subscription-card.is-featured:hover { transform: rotateX(2deg) rotateY(2deg) translateY(-9px) translateZ(12px); }.arc-subscription-card.is-featured { background: linear-gradient(155deg, rgba(10,65,88,.86), rgba(8,20,42,.92)); }
.arc-subscription-card-top { margin-bottom: 3px; }.arc-subscription-plan-icon { width: 58px; height: 58px; color: #e0e7ff; border: 1px solid rgba(255,255,255,.13); background: linear-gradient(145deg, rgba(129,140,248,.18), rgba(255,255,255,.05)); box-shadow: 0 10px 20px rgba(0,0,0,.15); }.arc-subscription-card.is-featured .arc-subscription-plan-icon { color: #67e8f9; }
.arc-subscription-badge { color: #c4b5fd; background: rgba(129,140,248,.1); }.arc-subscription-card.is-featured .arc-subscription-badge { color: #67e8f9; border-color: rgba(34,211,238,.32); background: rgba(6,182,212,.1); }
.arc-subscription-price strong { font-size: 37px; text-shadow: 0 0 22px rgba(245,217,139,.16); }.arc-subscription-price span em { color: #818cf8; font-style: normal; }.arc-subscription-button { border-color: rgba(129,140,248,.28); color: #e0e7ff; background: rgba(129,140,248,.1); }.arc-subscription-card.is-featured .arc-subscription-button { border-color: rgba(34,211,238,.3); color: #cffafe; background: rgba(6,182,212,.12); }
.arc-subscription-bottom { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 700px; margin: 28px auto 0; color: #8d99b5; text-align: center; font-size: 10px; line-height: 1.5; }.arc-subscription-bottom svg { flex: 0 0 auto; color: #f5d98b; }.arc-subscription-bottom p { margin: 0; }
@keyframes arcSubscriptionFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @keyframes arcSubscriptionOrbit { to { transform: rotate(360deg); } } @keyframes arcAmbientDrift { from { transform: translate3d(-8px,-5px,0) rotate(0deg); } to { transform: translate3d(12px,10px,0) rotate(18deg); } }
@media (max-width: 680px) { .arc-subscription-transition { grid-template-columns: 1fr; gap: 10px; }.arc-transition-line { display: none; }.arc-subscription-intro { display: block; }.arc-subscription-intro small { display: block; margin: 6px 0 0; }.arc-subscription-heading { align-items: flex-start; }.arc-subscription-orbit { width: 64px; height: 64px; }.arc-subscription-zone { padding: 32px 16px 26px; }.arc-subscription-card { min-height: 0; }.arc-subscription-bottom { align-items: flex-start; }}
/* Fase 3/6: AFK Plus y estabilidad del dashboard. */
.afk-console,.afk-console *{min-width:0}.afk-console{contain:layout paint}.afk-live-chip{align-self:flex-start;border:1px solid rgba(112,226,255,.45);border-radius:999px;padding:.45rem .7rem;color:#70e2ff;font-size:.7rem;letter-spacing:.12em}.afk-layout{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(300px,1.15fr);gap:1rem}.afk-editor,.afk-presets,.afk-upgrade{padding:1.2rem;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(10,12,30,.65);box-shadow:0 18px 50px rgba(0,0,0,.18)}.afk-form-title{display:flex;justify-content:space-between;gap:1rem;font-weight:800;margin-bottom:1rem}.afk-form-title small,.afk-editor small,.afk-preset-card small{color:var(--text-muted);font-weight:500}.afk-editor label{display:grid;gap:.4rem;margin:.75rem 0;color:var(--text-muted);font-size:.8rem}.afk-editor input,.afk-editor textarea{width:100%;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(2,4,17,.7);color:inherit;padding:.75rem;font:inherit}.afk-row{display:grid;grid-template-columns:.4fr 1fr;gap:.7rem}.afk-preset-card{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.9rem;margin:.65rem 0;border-left:3px solid var(--afk-color,#5865f2);border-radius:12px;background:rgba(255,255,255,.04)}.afk-preset-card b,.afk-preset-card small{display:block}.afk-preset-card p{margin:.35rem 0 0;color:var(--text-muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.afk-empty,.afk-upgrade{color:var(--text-muted);line-height:1.6}@media(max-width:760px){.afk-layout{grid-template-columns:1fr}.afk-console .view-head{align-items:flex-start;flex-direction:column}.afk-row{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.afk-console *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.afk-editor,.afk-library,.afk-preview-panel{padding:clamp(1rem,2vw,1.35rem);border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(145deg,rgba(10,12,30,.82),rgba(10,15,35,.54));box-shadow:0 18px 50px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.05)}
.afk-editor-head,.afk-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.afk-editor-head h3,.afk-section-head h3{margin:.3rem 0 0;color:var(--text-main)}.afk-kicker{font-size:.68rem;letter-spacing:.14em;color:#70e2ff;font-weight:800}.afk-account-badge,.afk-count{padding:.35rem .65rem;border:1px solid rgba(112,226,255,.28);border-radius:999px;color:#a5f3fc;font-size:.72rem;white-space:nowrap}.afk-help{color:var(--text-muted);font-size:.82rem;line-height:1.55}.afk-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.afk-editor label{display:grid;gap:.42rem;margin:.8rem 0;color:var(--text-secondary);font-size:.82rem}.afk-editor input,.afk-editor textarea,.afk-editor select{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(2,4,17,.76);color:var(--text-main);padding:.75rem;font:inherit}.afk-editor input:focus,.afk-editor textarea:focus,.afk-editor select:focus{outline:none;border-color:#70e2ff;box-shadow:0 0 0 3px rgba(112,226,255,.12)}.afk-editor small{color:var(--text-muted);font-size:.72rem}.afk-color-control{display:flex;align-items:center;gap:.7rem}.afk-color-control input{width:52px;height:42px;padding:.2rem;cursor:pointer}.afk-color-control code{color:#a5f3fc}.afk-form-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem}.afk-form-actions [role=status]{color:#86efac;font-size:.82rem}.afk-preset-list{display:grid;gap:.7rem;margin-top:1rem}.afk-preset-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.85rem;border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--afk-color,#5865f2);border-radius:14px;background:rgba(255,255,255,.035)}.afk-preset-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.07);font-size:1.25rem}.afk-preset-copy{min-width:0}.afk-preset-copy b,.afk-preset-copy small{display:block}.afk-preset-copy small{color:var(--text-muted);margin-top:.2rem}.afk-preset-copy p{margin:.35rem 0 0;color:var(--text-muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.afk-preset-actions{display:flex;gap:.4rem;flex-wrap:wrap}.afk-empty,.afk-error{display:grid;gap:.45rem;padding:1.2rem;border:1px dashed rgba(255,255,255,.15);border-radius:14px;color:var(--text-muted)}.afk-empty span{font-size:1.7rem}.afk-preview-panel{margin-top:1rem}.afk-preview-card{position:relative;overflow:hidden;margin-top:1rem;padding:1rem 1rem 1rem 1.15rem;border-radius:16px;background:rgba(4,7,20,.82);box-shadow:0 12px 32px rgba(0,0,0,.22)}.afk-preview-bar{position:absolute;inset:0 auto 0 0;width:4px;background:var(--afk-color,#5865f2);box-shadow:0 0 18px var(--afk-color,#5865f2)}.afk-preview-head{display:flex;justify-content:space-between;gap:.8rem;font-weight:800}.afk-preview-head small{color:var(--text-muted);font-size:.7rem;font-weight:500}.afk-preview-card p{color:var(--text-secondary);white-space:normal;line-height:1.55}.afk-preview-card footer{color:var(--text-muted);font-size:.72rem;border-top:1px solid rgba(255,255,255,.08);padding-top:.6rem}.afk-preview-image{display:block;width:100%;max-height:180px;object-fit:cover;border-radius:12px;margin:.8rem 0}.afk-preview-thumb{display:block;width:68px;height:68px;object-fit:cover;border-radius:12px;margin:.8rem 0}.afk-console .btn-danger{color:#fecaca;border-color:rgba(248,113,113,.35)}
@media(max-width:760px){.afk-field-grid{grid-template-columns:1fr}.afk-preset-card{grid-template-columns:auto minmax(0,1fr)}.afk-preset-actions{grid-column:1 / -1}.afk-preview-panel{margin-top:1rem}}

.afk-input-with-action{display:flex;gap:.45rem;align-items:stretch}.afk-input-with-action input{min-width:0}.afk-input-with-action .btn{white-space:nowrap}.afk-inline-emoji{width:22px;height:22px;object-fit:contain;vertical-align:-5px;margin:0 2px}.afk-preset-assets{color:#a5f3fc!important;font-size:.7rem!important}.afk-preview-content{display:flex;gap:.8rem;align-items:flex-start}.afk-preview-content p{flex:1;min-width:0}.afk-preview-thumb{width:72px;height:72px;flex:0 0 72px;margin:.2rem 0 0;object-fit:cover;border-radius:10px;background:rgba(255,255,255,.06)}.afk-preview-image{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:12px;margin:.8rem 0}.afk-media-error{display:none}.afk-emoji-popover{position:fixed;z-index:2500;width:min(310px,calc(100vw - 20px));max-height:320px;padding:.7rem;border:1px solid rgba(112,226,255,.35);border-radius:16px;background:rgba(10,12,30,.96);box-shadow:0 20px 60px rgba(0,0,0,.55);backdrop-filter:blur(16px)}.afk-emoji-search{width:100%;box-sizing:border-box;margin-bottom:.6rem;padding:.65rem .7rem;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.06);color:var(--text-main)}.afk-emoji-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;max-height:245px;overflow:auto}.afk-emoji-choice{min-height:58px;padding:.35rem;border:1px solid transparent;border-radius:10px;background:rgba(255,255,255,.045);color:var(--text-muted);cursor:pointer;display:grid;place-items:center;gap:.15rem}.afk-emoji-choice:hover,.afk-emoji-choice:focus-visible{border-color:#70e2ff;background:rgba(112,226,255,.12);outline:none}.afk-emoji-choice img{width:28px;height:28px;object-fit:contain}.afk-emoji-choice span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.62rem}
#settings-content,.main.dashboard-main{min-width:0}.arc-shell,.ep-tabcard,.arc-panel,.skeuo-card{contain:layout paint;min-width:0}.arc-shell img,.arc-panel img{max-width:100%;height:auto}.view-head,.ep-tabs,.arc-buttons{min-width:0;flex-wrap:wrap}
.arc-casino-history{margin:.9rem 0;padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:linear-gradient(135deg,rgba(18,24,55,.8),rgba(9,12,28,.72));contain:layout paint}.arc-casino-history-head{display:flex;justify-content:space-between;gap:1rem;align-items:center}.arc-casino-history-head b,.arc-casino-history-head small{display:block}.arc-casino-history-head small{margin-top:.25rem;color:var(--text-muted)}.arc-casino-history-head strong{font-size:1.1rem}.arc-casino-history-list{display:grid;gap:.4rem;margin-top:.8rem}.arc-casino-history-list>div{display:grid;grid-template-columns:1fr auto auto;gap:.8rem;align-items:center;padding:.5rem .65rem;border-radius:10px;background:rgba(255,255,255,.035);font-size:.82rem}.arc-casino-history-list small{color:var(--text-muted)}.arc-casino-history-list p{margin:.2rem 0;color:var(--text-muted)}.is-up{color:#55e6a5}.is-down{color:#ff7c9d}
/* Custom Bot: configuración explicada, preview y estados seguros. */
.custom-bot-heading{align-items:flex-start}.cb-scope-badge{padding:.45rem .7rem;border:1px solid rgba(112,226,255,.3);border-radius:999px;color:#a5f3fc;font-size:.7rem;letter-spacing:.12em;white-space:nowrap}.cb-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}.cb-guide-card{margin:0;padding:1.15rem}.cb-guide-card h3{margin:.25rem 0 .65rem}.cb-guide-card ol{margin:.65rem 0;padding-left:1.2rem;color:var(--text-secondary);line-height:1.7}.cb-kicker{color:#70e2ff;font-size:.68rem;font-weight:800;letter-spacing:.13em}.cb-note{margin:.8rem 0 0;padding:.7rem .8rem;border-left:3px solid #8b5cf6;color:var(--text-muted);font-size:.8rem;line-height:1.5}.cb-variable-list{display:grid;grid-template-columns:auto 1fr;gap:.45rem .7rem;align-items:center;margin-top:.8rem}.cb-variable-list code{color:#a5f3fc;background:rgba(112,226,255,.08);padding:.25rem .4rem;border-radius:6px}.cb-variable-list span{color:var(--text-muted);font-size:.82rem}.cb-editor{padding:clamp(1rem,2vw,1.5rem)}.cb-editor-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.09)}.cb-editor-head h3{margin:.25rem 0}.cb-editor-head p,.cb-section-title p{margin:.2rem 0;color:var(--text-muted);font-size:.82rem;line-height:1.5}.cb-toggle{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:.55rem!important;margin:0!important;min-width:220px}.cb-toggle input{width:auto!important}.cb-toggle span{display:grid;gap:.2rem}.cb-toggle small{color:var(--text-muted)}.cb-section{padding:1.2rem 0;border-bottom:1px solid rgba(255,255,255,.08)}.cb-section:last-of-type{border-bottom:0}.cb-section-title{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem}.cb-section-title>span{font-size:1.25rem}.cb-section-title h4{margin:0;color:var(--text-main);font-size:1rem}.cb-section label small,.cb-message-grid label small,.cb-section>label small{display:block;margin-top:.35rem;color:var(--text-muted);font-size:.73rem;line-height:1.4}.cb-message-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.cb-message-grid label{display:grid;align-content:start}.cb-color-input{padding:.25rem!important;height:44px}.cb-live-preview{padding:1.1rem;border:1px solid rgba(112,226,255,.2);border-radius:16px;background:rgba(4,7,20,.55)}.cb-preview-top{display:flex;align-items:center;gap:.55rem;padding:.65rem .8rem;border-bottom:1px solid rgba(255,255,255,.08);color:var(--text-secondary);font-weight:700}.cb-preview-top small{margin-left:auto;color:var(--text-muted);font-weight:500}.cb-preview-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 12px #4ade80}.cb-preview-body{display:flex;gap:.8rem;padding:1rem}.cb-preview-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#8b5cf6,#22d3ee);font-size:1.3rem}.cb-preview-body b{color:var(--text-main)}.cb-preview-tag{margin-left:.4rem;padding:.12rem .3rem;border-radius:4px;background:#5865f2;color:#fff;font-size:.62rem}.cb-preview-body p{margin:.45rem 0 0;color:var(--text-secondary);line-height:1.45;white-space:pre-wrap}.cb-preview-muted{color:var(--text-muted)!important;font-size:.78rem}.cb-form-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1.1rem}.cb-form-actions [role=status]{font-size:.82rem}@media(max-width:800px){.cb-guide-grid,.cb-message-grid{grid-template-columns:1fr}.cb-editor-head{flex-direction:column}.cb-toggle{min-width:0!important}.cb-preview-top small{display:none}}@media(prefers-reduced-motion:reduce){.custom-bot-editor *,.cb-guide-grid *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Custom Bot: composición compacta y legible en escritorio y móvil. */
.custom-bot-heading{gap:1.25rem;margin-bottom:1.1rem}.custom-bot-heading h2{max-width:100%;line-height:1.12;overflow-wrap:anywhere}.cb-guide-grid{align-items:stretch}.cb-guide-card{min-width:0;overflow:hidden}.cb-editor{overflow:hidden}.cb-editor-head{min-width:0}.cb-editor-head>div{min-width:0}.cb-editor-head h3,.cb-section-title h4{line-height:1.2;overflow-wrap:anywhere}.cb-message-grid textarea{min-height:108px;resize:vertical}.cb-preview-body{min-width:0}.cb-preview-body>div:last-child{min-width:0;overflow-wrap:anywhere}.cb-preview-body p{overflow-wrap:anywhere}@media(max-width:980px){.cb-guide-grid{grid-template-columns:1fr}.cb-message-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:680px){.custom-bot-heading{display:flex;flex-direction:column}.cb-scope-badge{align-self:flex-start}.cb-message-grid{grid-template-columns:1fr}.cb-editor{padding:1rem}.cb-editor-head{gap:.75rem}.cb-preview-body{padding:.8rem}.cb-preview-avatar{flex-basis:36px;width:36px;height:36px}}