:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-hover: #f3f5f8;
  --color-border: #e2e8f0;
  --color-primary: #0e7490;
  --color-primary-dim: rgba(14,116,144, 0.12);
  --color-primary-glow: rgba(14,116,144, 0.08);
  --color-secondary: #6d28d9;
  --color-accent: #047857;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-dim: #64748b;
  --color-success: #047857;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --gradient-main: linear-gradient(135deg, #0e7490 0%, #6d28d9 100%);
  --gradient-accent: linear-gradient(135deg, #047857 0%, #0e7490 100%);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}

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

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 56px;
  background: rgba(245,246,248,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.header__logo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__brand { white-space: nowrap; }
.header__brand-accent { background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.price-eur { color: var(--color-text-dim); font-size: 0.72em; white-space: nowrap; }

.header__back {
  margin-left: 16px;
  font-size: 0.85rem;
  color: var(--color-text-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.header__back:hover {
  color: var(--color-primary);
}

.header__spacer { flex: 1; }

.header__time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

.container { max-width: 1400px; margin: 0 auto; padding: 72px 20px 40px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color 0.2s;
}

.stat-card:hover { border-color: rgba(14,116,144,0.2); }

.stat-card__label {
  font-size: 0.68rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.stat-card__value {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--font-mono);
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-card__sub {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.search-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.search-input::placeholder { color: var(--color-text-dim); }
.search-input:focus { border-color: var(--color-primary); }

.filter-select {
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  min-width: 130px;
}
.filter-select:focus { border-color: var(--color-primary); }

.period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.period-bar__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.period-bar__summary {
  font-size: 0.76rem;
  color: var(--color-text-dim);
  line-height: 1.4;
  flex: 1;
  min-width: 200px;
}

.btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn--primary {
  background: var(--gradient-main);
  color: white;
}
.btn--primary:hover { opacity: 0.9; transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.table-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-dim);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
th:hover { color: var(--color-text-muted); }
th.sorted { color: var(--color-primary); }

td {
  padding: 10px 14px;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(15,23,42,0.5);
  vertical-align: middle;
}

tr:hover td { background: var(--color-surface-hover); }
tr:last-child td { border-bottom: none; }

.score-cell {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
}

.row-locked {
  opacity: 0.72;
}
.row-locked:hover {
  background: transparent;
}
.lock-q {
  display: inline-block;
  color: var(--color-text-dim);
  cursor: help;
  filter: grayscale(1);
  opacity: 0.7;
}
.btn-lock {
  background: var(--color-primary);
  color: var(--color-bg);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
}
.btn-lock:hover {
  opacity: 0.9;
}

.btn-video {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  line-height: 1;
}
.btn-video:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-video:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-video:disabled:hover {
  background: none;
  border-color: var(--color-border);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge--rising { background: rgba(4,120,87,0.15); color: var(--color-success); }
.badge--falling { background: rgba(239,68,68,0.15); color: var(--color-error); }
.badge--stable { background: rgba(133,146,168,0.15); color: var(--color-text-muted); }
.badge--new { background: rgba(14,116,144,0.15); color: var(--color-primary); }
.badge--market { background: rgba(109,40,217,0.15); color: #d8b4fe; white-space: nowrap; }

/* Badges de plan en el panel de administración de usuarios */
.badge--free { background: rgba(133,146,168,0.15); color: var(--color-text-muted); }
.badge--basic { background: rgba(14,116,144,0.15); color: var(--color-primary); }
.badge--premium { background: rgba(109,40,217,0.18); color: #d8b4fe; }
.badge--custom { background: rgba(251,191,36,0.15); color: #fcd34d; }
.badge--success { background: rgba(4,120,87,0.15); color: var(--color-success); }
.badge--warning { background: rgba(251,191,36,0.18); color: #fcd34d; }
.badge--error { background: rgba(239,68,68,0.15); color: var(--color-error); }

.badge--rising::before { content: "▲ "; }
.badge--falling::before { content: "▼ "; }
.badge--new::before { content: "● "; }

.source-tag {
  display: inline-block;
  padding: 1px 6px;
  margin: 1px;
  border-radius: 3px;
  font-size: 0.62rem;
  background: rgba(14,116,144,0.08);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.rank-bar {
  display: inline-block;
  height: 4px;
  border-radius: 2px;
  background: var(--color-primary);
  vertical-align: middle;
}

.title-cell {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.prod-thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  vertical-align: middle;
  margin-right: 8px;
  flex-shrink: 0;
}

.prod-thumb--modal {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  margin: 0 0 16px;
  display: block;
}

.prod-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  margin-right: 8px;
}

.prod-thumb--locked {
  filter: grayscale(1) blur(2px);
  opacity: 0.55;
  margin-right: 0;
}

.store-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
}

.store-chip {
  font-size: 0.62rem;
  padding: 1px 6px;
  opacity: 0.9;
  white-space: nowrap;
}

.store-chip--more {
  opacity: 0.7;
}

.stores-cell {
  max-width: 200px;
  vertical-align: middle;
}

.stores-cell .store-chips {
  margin-left: 0;
}

.product-link {
  display: inline-block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: inherit;
  text-decoration: none;
}

.product-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.title-cell:hover {
  color: var(--color-primary);
  cursor: pointer;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border);
}

.loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-dim);
}

.loading::after {
  content: '';
  display: block;
  width: 24px;
  height: 24px;
  margin: 12px auto;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.error {
  text-align: center;
  padding: 40px;
  color: var(--color-error);
  background: var(--color-surface);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-md);
  margin: 20px 0;
}

.section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title__count {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  font-weight: 400;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: 16px 0 8px;
  flex-wrap: wrap;
}

.page-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.page-btn:hover { border-color: var(--color-primary); }
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--color-border); }
.page-dots { color: var(--color-text-dim); padding: 0 4px; font-size: 0.85rem; }
.pagination__info { margin-left: 10px; color: var(--color-text-muted); font-size: 0.78rem; white-space: nowrap; }

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.info-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

a.info-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

a.info-card:hover .info-card__title {
  color: var(--color-primary);
}

.info-card__title {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.info-card__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
}

.info-card__bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.info-card__bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--gradient-main);
  transition: width 0.6s ease;
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.source-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.source-card__name {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.source-card__count {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-weight: 700;
}

.product-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.product-modal-backdrop.open { display: flex; }

.product-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}

.product-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.product-modal__close:hover { color: var(--color-text); background: var(--color-surface-hover); }

.product-modal__actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary {
  background: linear-gradient(135deg, #0044ff, #0e7490);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(0, 68, 255, 0.3); }

.header__credits {
  margin-right: 12px;
}
.credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: var(--color-accent);
}

.product-modal__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  padding-right: 24px;
}

.product-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.product-modal__field {
  padding: 8px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.product-modal__field-label {
  font-size: 0.62rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 2px;
}

.product-modal__field-value {
  font-size: 0.85rem;
  color: var(--color-text);
}

.tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
  overflow-x: auto;
}

.tab {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all 0.2s;
}

.tab:hover { color: var(--color-text); }
.tab.active { background: var(--color-primary-dim); color: var(--color-primary); }
a.tab--link { display: inline-flex; align-items: center; text-decoration: none; }

/* Admin sub-tabs */
.admin-tabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
}

.admin-tab {
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all 0.2s;
}

.admin-tab:hover { color: var(--color-text); }
.admin-tab.active { background: var(--color-primary-dim); color: var(--color-primary); }

/* Billing */
.billing-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 20px;
}

.billing-block__title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 4px;
}

.billing-block__tag {
  font-size: 0.7rem;
  color: var(--color-text-dim);
  font-weight: 600;
}

.billing-note {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  line-height: 1.5;
  margin: 4px 0 12px;
}

.billing-subtabs {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.billing-subtab {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all 0.2s;
}

.billing-subtab:hover { color: var(--color-text); }
.billing-subtab.active { background: var(--color-primary-dim); color: var(--color-primary); }

.billing-total {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.billing-total strong {
  color: var(--color-primary);
  font-family: var(--font-mono);
}

.billing-bar {
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
  max-width: 220px;
}

.billing-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--color-primary);
  opacity: 0.8;
}

.billing-services-title { margin: 20px 0 10px; }

/* Auth */
#auth-area { margin-right: 12px; }

.auth-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.auth-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

.auth-name { color: var(--color-text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auth-tier {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-primary-dim);
  color: var(--color-primary);
  font-weight: 600;
}

.auth-dropdown {
  position: relative;
  display: inline-flex;
}

.auth-dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 5px 10px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.78rem;
  transition: border-color 0.2s;
}

.auth-dropdown__toggle:hover { border-color: var(--color-primary); }

.auth-dropdown__arrow {
  font-size: 0.6rem;
  color: var(--color-text-dim);
  transition: transform 0.2s;
}

.auth-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 6px;
  display: none;
  z-index: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.auth-dropdown__menu.open { display: block; }

.auth-dropdown__item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.auth-dropdown__item:hover { background: var(--color-surface-hover); }

.auth-dropdown__item--danger { color: var(--color-error); }
.auth-dropdown__item--danger:hover { background: rgba(239,68,68,0.1); }

.auth-dropdown__divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

.auth-login {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-login:hover { background: var(--color-primary-dim); }

.auth-logout {
  background: transparent;
  border: 1px solid var(--color-error);
  color: var(--color-error);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  cursor: pointer;
}
.auth-logout:hover { background: rgba(239,68,68,0.1); }

/* Tier Banner */
.tier-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 100px;
  margin: 0 auto 16px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  max-width: 100%;
  text-align: center;
}
.tier-banner--info { background: rgba(14,116,144,0.06); border: 1px solid rgba(14,116,144,0.12); }
.tier-banner--upgrade { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.12); }
.tier-banner__cta {
  padding: 4px 12px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.74rem;
  white-space: nowrap;
}
.tier-banner--info .tier-banner__cta { background: var(--color-primary); color: #fff; }
.tier-banner--upgrade .tier-banner__cta { background: var(--color-warning); color: #000; }

.hidden { display: none !important; }

/* Pricing */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  transition: border-color 0.2s;
}
.pricing-card:hover { border-color: rgba(14,116,144,0.15); }
.pricing-card--current { border-color: var(--color-primary); background: var(--color-primary-dim); }

.pricing-card__tier {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text);
}
.pricing-card--current .pricing-card__tier { color: var(--color-primary); }

.pricing-card__price {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--font-mono);
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-card__desc { font-size: 0.72rem; color: var(--color-text-dim); margin-bottom: 4px; }

.pricing-card__features {
  list-style: none;
  width: 100%;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.pricing-card__cta {
  margin-top: auto;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.pricing-card__cta:hover { background: var(--color-primary-dim); }
.pricing-card__cta:disabled { opacity: 0.4; cursor: default; }

.lang-switcher {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  margin-left: 8px;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s;
}
.lang-switcher:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lang-switcher:focus { outline: none; border-color: var(--color-primary); }

.video-tab-bar {
  display: flex;
  gap: 2px;
  margin-bottom: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
  overflow-x: auto;
}

.video-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all 0.2s;
  text-align: center;
}

.video-tab:hover { color: var(--color-text); }
.video-tab--active { background: var(--color-primary-dim); color: var(--color-primary); }

.video-type-btn {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid var(--color-border);
  cursor: pointer;
  background: var(--color-bg);
  color: var(--color-text-muted);
  transition: all 0.2s;
  text-align: center;
}
.video-type-btn:hover { border-color: var(--color-primary); color: var(--color-text); }
.video-type-btn--active { border-color: var(--color-primary); background: var(--color-primary-dim); color: var(--color-primary); }

.platform-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  background: var(--color-bg);
  color: var(--color-text-muted);
  transition: all 0.2s;
}
.platform-btn:hover { border-color: var(--color-primary); color: var(--color-text); }
.platform-btn--active { border-color: var(--color-primary); background: var(--color-primary-dim); color: var(--color-primary); }

.video-modal__photo-slot {
  width: 80px; height: 80px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  overflow: hidden; transition: border-color 0.2s;
  background: var(--color-bg);
}
.video-modal__photo-slot:hover { border-color: var(--color-primary); }
.video-modal__photo-plus { font-size: 1.5rem; color: var(--color-text-dim); }
.video-modal__photo-preview { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; border-radius: 4px; }
.video-modal__photo-remove {
  position: absolute; top: 2px; right: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(239,68,68,0.9); color: #fff;
  border: none; cursor: pointer; font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.video-modal__select {
  width: 100%; padding: 8px 10px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 8px; color: var(--color-text); font-size: 0.82rem;
  outline: none; cursor: pointer;
}
.video-modal__select:focus { border-color: var(--color-primary); }

.sparkline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  opacity: 0.85;
}

.mover-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.76rem;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
}
.mover-row:last-child { border-bottom: none; }
.mover-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.insights-chart-wrap {
  position: relative;
  height: 260px;
  margin-bottom: 20px;
}

/* Insights: gráfico a la izquierda, cuadrados de categorías a la derecha */
.insights-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}
.insights-split .insights-chart-wrap { height: 100%; min-height: 380px; margin-bottom: 0; }
.insights-split .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.mover-list { margin-top: 2px; }

.cost-chart-wrap {
  position: relative;
  height: 260px;
  margin-top: 10px;
}

.insights-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.insights-banner__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text);
}
.insights-banner__item strong { color: var(--color-primary); }

@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .controls { flex-direction: column; }
  .search-input { min-width: auto; width: 100%; }
  .filter-select { width: 100%; }
  .cards-grid { grid-template-columns: 1fr 1fr; }
  .insights-split { grid-template-columns: 1fr; }
  .insights-split .insights-chart-wrap { height: 260px; }
  .insights-split .cards-grid { grid-template-columns: 1fr 1fr; }
  .sources-grid { grid-template-columns: repeat(2, 1fr); }
  .product-modal__grid { grid-template-columns: 1fr; }
  .container { padding: 72px 12px 24px; }
  th, td { padding: 8px 10px; }
}
.product-modal__stores{margin-top:16px}.product-modal__stores-title{font-size:.62rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.product-modal__stores-list{display:flex;flex-direction:column;gap:8px}.product-modal__store{padding:8px 10px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.product-modal__store-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}.product-modal__store-name{font-size:.8rem;font-weight:600;color:var(--color-text)}.product-modal__store-price{font-size:.78rem;font-family:var(--font-mono);color:var(--color-success)}.product-modal__store-sim{font-size:.68rem;color:var(--color-text-dim)}.product-modal__store-link{display:block;font-size:.72rem;color:var(--color-primary);text-decoration:none;word-break:break-all}.product-modal__store-link:hover{text-decoration:underline}.product-modal__stores-empty{font-size:.78rem;color:var(--color-text-dim)}
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:.7rem;font-weight:600}.badge--up{background:rgba(6,255,165,.12);color:var(--color-accent)}.badge--down{background:rgba(255,68,68,.12);color:#ff4444}.badge--new{background:rgba(0,212,255,.12);color:var(--color-primary)}.badge--flat{background:rgba(15,23,42,.06);color:var(--color-text-muted)}.rails{display:flex;flex-direction:column;gap:26px;margin-top:8px}.rail{position:relative}.rail__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.rail__title{font-size:1.15rem;font-weight:700;color:var(--color-text);margin:0}.rail__more{font-size:.82rem;color:var(--color-primary);text-decoration:none;white-space:nowrap}.rail__track{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin}.rail__track::-webkit-scrollbar{height:6px}.rail__track::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:100px}.rail__card{flex:0 0 auto;width:180px;scroll-snap-align:start;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .15s ease,transform .15s ease}.rail__card:hover{border-color:var(--color-primary);transform:translateY(-3px)}.rail__card--locked{cursor:default;opacity:.82}.rail__card--locked:hover{transform:none;border-color:var(--color-border)}.rc__img{position:relative;width:100%;aspect-ratio:1/1;background:#fff}.rc__img img{width:100%;height:100%;object-fit:contain;display:block}.rc__img--empty{background:var(--color-surface)}.rc__body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:4px}.rc__score{display:flex;flex-direction:column;gap:3px}.rc__score-num{font-family:var(--font-mono);font-weight:800;font-size:.95rem;line-height:1;color:var(--color-primary)}.rc__score-bar{display:block;width:100%;height:3px;background:var(--color-border);border-radius:100px;overflow:hidden}.rc__score-fill{display:block;height:100%;background:var(--gradient-main);border-radius:100px}.rc__rank{position:absolute;top:8px;left:8px;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;font-family:var(--font-mono);font-weight:700;font-size:.85rem;line-height:1;color:#fff;background:var(--gradient-main);border-radius:100px;box-shadow:var(--shadow-sm)}.rc__title{margin:0;font-size:.83rem;line-height:1.3;font-weight:600;color:var(--color-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em}.rc__meta{font-size:.68rem;color:var(--color-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc__foot{display:flex;align-items:center;justify-content:space-between;gap:6px}.rc__price{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--color-text)}.rc__rating{font-size:.72rem;color:#f5c518}.rc__trend{margin-top:2px}.rail__prompt{flex:0 0 auto;width:100%;padding:14px 16px;background:var(--color-surface);border:1px dashed var(--color-border);border-radius:12px;font-size:.85rem;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;gap:10px}@media(max-width:640px){.rail__card{width:150px}}
/* ===== Product cards ===== */
.dcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dcard{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.dcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.dcard--locked{opacity:.7}
.dcard__img{position:relative;aspect-ratio:1/1;background:#fff}
.dcard__img img{width:100%;height:100%;object-fit:contain;object-position:center}
.dcard__rank{position:absolute;top:8px;left:8px;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 7px;font-family:var(--font-mono);font-weight:700;font-size:.85rem;line-height:1;color:#fff;background:var(--gradient-main);border-radius:100px;box-shadow:var(--shadow-sm)}
.dcard__body{padding:10px 11px 11px;display:flex;flex-direction:column;gap:5px;flex:1}
.dcard__score{display:flex;align-items:center;gap:6px}
.dcard__score-num{font-family:var(--font-mono);font-weight:800;font-size:.85rem;color:var(--color-primary)}
.dcard__score-bar{flex:1;height:4px;background:var(--color-border);border-radius:100px;overflow:hidden}
.dcard__score-fill{display:block;height:100%;background:var(--gradient-main);border-radius:100px}
.dcard__title{margin:0;font-size:.82rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcard__title a{color:inherit;text-decoration:none}
.dcard__title a:hover{color:var(--color-primary)}
.dcard__meta{font-size:.7rem;color:var(--color-text-muted)}
.dcard__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px}
.dcard__price{font-weight:700;font-size:.85rem}
.dcard__rating{font-size:.75rem;color:var(--color-warning)}
.dcard__trend{margin-top:2px}
.dcard__comm{font-size:.72rem;color:var(--color-success)}
.dcard__stores{margin-top:4px}
.dcard__actions{margin-top:6px;display:flex;align-items:center;gap:6px}
.dcard__prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 16px;text-align:center;color:var(--color-text-muted);background:var(--color-surface);border:1px dashed var(--color-border);border-radius:12px;grid-column:1/-1}