:root {
  --color-bg: #0a0a0f;
  --color-surface: #111118;
  --color-surface-hover: #181825;
  --color-border: #1e1e32;
  --color-primary: #00d4ff;
  --color-primary-dim: rgba(0, 212, 255, 0.12);
  --color-primary-glow: rgba(0, 212, 255, 0.08);
  --color-secondary: #7c3aed;
  --color-accent: #06ffa5;
  --color-text: #e2e8f0;
  --color-text-muted: #8892a8;
  --color-text-dim: #4a5568;
  --color-success: #06ffa5;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --gradient-main: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
  --gradient-accent: linear-gradient(135deg, #06ffa5 0%, #00d4ff 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(10,10,15,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__logo span { background: var(--gradient-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.header__subtitle {
  margin-left: 16px;
  font-size: 0.72rem;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.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(0,212,255,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); }

.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(30,30,50,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;
}

.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(6,255,165,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(0,212,255,0.15); color: var(--color-primary); }

.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(0,212,255,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);
}

.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);
}

.pagination__info { font-size: 0.78rem; color: var(--color-text-muted); }

.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;
  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); }

.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;
}

.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__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); }

/* 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-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: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  font-size: 0.82rem;
  gap: 12px;
}
.tier-banner--info { background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.15); }
.tier-banner--upgrade { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.15); }
.tier-banner__cta {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.78rem;
  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(0,212,255,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; }

@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; }
  .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; }
}