/* KNGX Amazon — CSS */
:root {
  /* Colors - light theme */
  --bg-base: #f8f9fb;
  --bg-card: #ffffff;
  --bg-input: #f5f6f8;
  --text-primary: #1a1d29;
  --text-secondary: #5a5f75;
  --text-muted: #8a8fa3;
  --border: #e2e5ed;
  --border-light: #f0f1f4;

  /* Brand colors */
  --brand: #00c9a7;
  --brand-dark: #00a88a;
  --brand-light: #e6faf6;

  /* Semantic colors */
  --success: #22c55e;
  --success-light: #f0fdf4;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --info: #3b82f6;
  --info-light: #eff6ff;

  /* Tones */
  --tone-best: #22c55e;
  --tone-good: #3b82f6;
  --tone-watch: #f59e0b;
  --tone-avoid: #ef4444;
  --tone-need: #8b5cf6;

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #0d0f14;
    --bg-card: #161922;
    --bg-input: #1e222d;
    --text-primary: #f0f2f5;
    --text-secondary: #9ca3b5;
    --text-muted: #6b7280;
    --border: #2a2f3d;
    --border-light: #22262f;
    --brand-light: #0a2924;
    --success-light: #052e16;
    --warning-light: #291704;
    --danger-light: #2a0a0a;
    --info-light: #0a1929;
  }
}

[data-theme="dark"] {
  --bg-base: #0d0f14;
  --bg-card: #161922;
  --bg-input: #1e222d;
  --text-primary: #f0f2f5;
  --text-secondary: #9ca3b5;
  --text-muted: #6b7280;
  --border: #2a2f3d;
  --border-light: #22262f;
  --brand-light: #0a2924;
  --success-light: #052e16;
  --warning-light: #291704;
  --danger-light: #2a0a0a;
  --info-light: #0a1929;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

/* Typography */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-brand { color: var(--brand); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

/* Loading screen */
.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: var(--space-lg);
}
.loading-logo {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.1em;
}
.loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* App layout */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-md);
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 64px;
}
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.08em;
}
.nav-links {
  display: flex;
  gap: var(--space-xs);
  flex: 1;
}
.nav-link {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--transition-fast);
}
.nav-link:hover { background: var(--bg-input); color: var(--text-primary); }
.nav-link.active { background: var(--brand-light); color: var(--brand); }
.nav-badge {
  background: var(--danger);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  margin-left: var(--space-xs);
}
.nav-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  width: 280px;
}
.nav-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  width: 100%;
}
.nav-search input::placeholder { color: var(--text-muted); }
.nav-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
}
.nav-user:hover { background: var(--bg-input); }
.nav-theme {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.nav-theme:hover { background: var(--bg-input); }

/* Main content */
main {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

/* Page transitions */
.page { animation: fadeIn var(--transition-normal) ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border-light); }
.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-input); color: var(--text-primary); }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-sm { padding: var(--space-xs) var(--space-sm); font-size: 0.8rem; }
.btn-lg { padding: var(--space-md) var(--space-lg); font-size: 1rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.form-group { margin-bottom: var(--space-lg); }
.form-label { display: block; margin-bottom: var(--space-sm); font-weight: 500; font-size: 0.875rem; color: var(--text-secondary); }
.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
}
.form-input:focus { outline: none; border-color: var(--brand); }
.form-input::placeholder { color: var(--text-muted); }
.form-error { color: var(--danger); font-size: 0.8rem; margin-top: var(--space-xs); }
.form-help { color: var(--text-muted); font-size: 0.8rem; margin-top: var(--space-xs); }

/* Pills / Badges */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pill-best { background: #dcfce7; color: #166534; }
.pill-good { background: #dbeafe; color: #1e40af; }
.pill-watch { background: #fef3c7; color: #92400e; }
.pill-avoid { background: #fee2e2; color: #991b1b; }
.pill-need { background: #ede9fe; color: #5b21b6; }
[data-theme="dark"] .pill-best { background: #052e16; color: #86efac; }
[data-theme="dark"] .pill-good { background: #172554; color: #93c5fd; }
[data-theme="dark"] .pill-watch { background: #291704; color: #fcd34d; }
[data-theme="dark"] .pill-avoid { background: #2a0a0a; color: #fca5a5; }
[data-theme="dark"] .pill-need { background: #1e1b4b; color: #c4b5fd; }

/* Stat tiles */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
.stat-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
}
.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

/* Grid layouts */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .nav-search { display: none; }
  .nav-links { display: none; }
}

/* Product cards */
.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.product-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.product-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.product-card-name { font-weight: 600; font-size: 1rem; line-height: 1.3; }
.product-card-meta { display: flex; gap: var(--space-md); margin-top: var(--space-md); font-size: 0.8rem; color: var(--text-muted); }
.product-card-profit { font-family: var(--font-mono); font-weight: 600; color: var(--success); }
.product-card-margin { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-top: var(--space-sm); }
.product-card-margin-bar { height: 100%; background: var(--success); transition: width var(--transition-slow); }
.product-card-margin-bar.low { background: var(--warning); }
.product-card-margin-bar.negative { background: var(--danger); }

/* Filter chips */
.filter-chips { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.chip {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}
.chip:hover { background: var(--border-light); }
.chip.active { background: var(--brand); color: white; }
.chip-count { opacity: 0.7; margin-left: var(--space-xs); }

/* Tables */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-md); text-align: left; border-bottom: 1px solid var(--border); }
th { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
tr:hover { background: var(--bg-input); }
.table-actions { display: flex; gap: var(--space-sm); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-md);
  animation: fadeIn var(--transition-fast) ease;
}
.modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp var(--transition-normal) ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid var(--border); }
.modal-title { font-weight: 600; font-size: 1.125rem; }
.modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--text-muted); }
.modal-close:hover { background: var(--bg-input); color: var(--text-primary); }
.modal-body { padding: var(--space-lg); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg); border-top: 1px solid var(--border); }

/* Toast */
.toast-container {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.toast {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: slideIn var(--transition-normal) ease;
  max-width: 360px;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast-ok { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--info); }

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: help;
}
.tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--bg-base);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: 10;
}
.tooltip:hover .tooltip-content { opacity: 1; visibility: visible; }

/* Auth pages */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: linear-gradient(135deg, var(--bg-base) 0%, var(--brand-light) 100%);
}
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
}
.auth-logo {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.auth-logo h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.15em;
}
.auth-logo p { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--space-sm); }
.auth-tabs { display: flex; margin-bottom: var(--space-xl); border-bottom: 1px solid var(--border); }
.auth-tab {
  flex: 1;
  padding: var(--space-md);
  text-align: center;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.auth-error {
  background: var(--danger-light);
  color: var(--danger);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
}
.auth-success {
  background: var(--success-light);
  color: var(--success);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  margin-bottom: var(--space-lg);
}
.password-toggle {
  position: relative;
}
.password-toggle input { padding-right: 48px; }
.password-toggle button {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  padding: var(--space-xs);
}

/* Hero card */
.hero-card {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  color: white;
  margin-bottom: var(--space-xl);
}
.hero-card h2 { font-size: 1.5rem; margin-bottom: var(--space-sm); }
.hero-card p { opacity: 0.9; font-size: 0.95rem; }
.hero-card .stat-value { color: white; }

/* Charts */
.chart-container {
  position: relative;
  height: 250px;
  margin-top: var(--space-md);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-muted);
}
.empty-state h3 { color: var(--text-secondary); margin-bottom: var(--space-sm); }
.empty-state p { font-size: 0.9rem; margin-bottom: var(--space-lg); }

/* Status pipeline */
.status-pipeline {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.status-pipeline-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.status-pipeline-count {
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Help glossary */
.glossary-grid {
  display: grid;
  gap: var(--space-md);
}
.glossary-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.glossary-term {
  font-weight: 600;
  color: var(--brand);
  margin-bottom: var(--space-xs);
}
.glossary-def { color: var(--text-secondary); font-size: 0.9rem; }

/* Calculator */
.calculator-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.calculator-section h3 { margin-bottom: var(--space-lg); color: var(--brand); }
.calculator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
}
.calculator-result {
  background: var(--brand-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
}
.calculator-result-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand);
}
.calculator-result-label { font-size: 0.8rem; color: var(--text-secondary); margin-top: var(--space-xs); }

/* Admin page */
.admin-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.admin-card:hover { border-color: var(--brand); }
.admin-card.open { border-color: var(--brand); border-width: 2px; }
.admin-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
}
.admin-card-title { font-weight: 600; font-size: 1.1rem; margin-bottom: var(--space-xs); }
.admin-card-desc { color: #6b7280; font-size: 0.85rem; }
.admin-card-chevron { color: #9ca3af; font-size: 1.5rem; }
.admin-panel {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-md);
  margin-top: var(--space-md);
  overflow: hidden;
}
.admin-panel-header {
  background: linear-gradient(to right, #065f46, #047857);
  color: white;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-panel-title { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85rem; }
.admin-panel-actions { display: flex; gap: var(--space-sm); }
.admin-panel-actions button {
  background: rgba(255,255,255,0.2);
  color: white;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
}
.admin-panel-content { padding: var(--space-lg); }

/* Amazon status */
.amazon-status-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.amazon-status-icon {
  width: 64px;
  height: 64px;
  background: var(--brand-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.amazon-status-info h3 { margin-bottom: var(--space-xs); }
.amazon-status-info p { color: var(--text-secondary); font-size: 0.9rem; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus states */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Mobile nav */
@media (max-width: 640px) {
  .nav-inner { height: 56px; }
  .nav-logo { font-size: 1rem; }
  main { padding: var(--space-md); }
  .hero-card { padding: var(--space-lg); }
  .hero-card h2 { font-size: 1.25rem; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 1.5rem; }
  .card { padding: var(--space-md); }
  .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-sm); }
  .chip { white-space: nowrap; }
}

/* Bottom nav for mobile */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: var(--space-sm) var(--space-md);
  padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  z-index: 100;
}
@media (max-width: 640px) {
  .bottom-nav { display: flex; justify-content: space-around; }
  main { padding-bottom: 80px; }
  .nav { display: none; }
}
.bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs);
  color: var(--text-muted);
  font-size: 0.65rem;
}
.bottom-nav-link.active { color: var(--brand); }
.bottom-nav-icon { font-size: 1.25rem; }

/* Utility */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.hidden { display: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Sales home: motion (2026-10-10) ===== */
.page-amazon .card, .page-amazon .amazon-status-card { animation: kxRise .55s cubic-bezier(.2,.8,.2,1) both; }
.page-amazon #status-container > *:nth-child(1) { animation-delay: .05s; }
.page-amazon #status-container > *:nth-child(2) { animation-delay: .12s; }
.page-amazon #status-container > *:nth-child(3) { animation-delay: .19s; }
.page-amazon #status-container > *:nth-child(4) { animation-delay: .26s; }
.page-amazon #status-container > *:nth-child(5) { animation-delay: .33s; }
.page-amazon .kx-listings > .card:nth-child(2) { animation-delay: .1s; }
.page-amazon .kx-listings > .card:nth-child(3) { animation-delay: .2s; }
.page-amazon .kx-listings > .card:nth-child(n+4) { animation-delay: .3s; }
@keyframes kxRise { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.page-amazon .kx-listings > .card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.page-amazon .kx-listings > .card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.25); border-color: var(--primary, #00c9a7); }
.page-amazon .kx-listings > .card:active { transform: scale(.985); }
.kx-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: #00c9a7; background: rgba(0,201,167,.12); border: 1px solid rgba(0,201,167,.35); padding: 3px 9px; border-radius: 999px; vertical-align: middle; }
.kx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #00c9a7; animation: kxPulse 1.6s ease-in-out infinite; }
@keyframes kxPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,201,167,.6); } 50% { box-shadow: 0 0 0 6px rgba(0,201,167,0); } }
.kx-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(0,201,167,.18), rgba(0,201,167,.02) 60%), var(--bg-card, #14171d); }
.kx-hero::after { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(0,201,167,.18), transparent); animation: kxGlow 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes kxGlow { from { transform: translateX(10%) rotate(0deg); } to { transform: translateX(-25%) rotate(25deg); } }
.kx-bar { height: 6px; border-radius: 99px; background: var(--bg-input, #22262f); overflow: hidden; margin-top: 6px; }
.kx-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #00c9a7, #22d3ee); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.kx-bar.warn > i { background: linear-gradient(90deg, #ef4444, #f59e0b); }
.kx-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md); }
@media (min-width: 768px) { .kx-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kx-stats .card { margin: 0; }
.kx-stats .stat-value { font-size: clamp(1.25rem, 5.5vw, 2rem); overflow-wrap: anywhere; }
.kx-delta { font-size: .8rem; font-weight: 600; margin-top: 2px; }
.kx-delta.up { color: #16a34a; } .kx-delta.down { color: #ef4444; }
@media (max-width: 480px) {
  .page-amazon .page-title { font-size: 1.6rem; line-height: 1.15; }
  .page-amazon .chart-container { height: 200px; }
  .page-amazon .amazon-status-card { flex-wrap: wrap; gap: 10px; }
  .page-amazon table { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .page-amazon .card, .page-amazon .amazon-status-card, .kx-live::before, .kx-hero::after { animation: none !important; }
  .kx-bar > i { transition: none; }
}

/* pull-to-refresh indicator */
.kx-ptr { position: fixed; top: 0; left: 50%; z-index: 60; width: 38px; height: 38px; border-radius: 50%; background: var(--bg-card, #14171d); border: 1px solid rgba(0,201,167,.4); box-shadow: 0 6px 18px rgba(0,0,0,.35); transform: translate(-50%, -60px); transition: transform .25s ease; display: grid; place-items: center; pointer-events: none; }
.kx-ptr span { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(0,201,167,.35); border-top-color: #00c9a7; }
.kx-ptr.ready span { border-color: #00c9a7; }
.kx-ptr.spin span { animation: spin .7s linear infinite; }

/* installed app: keep the top bar clear of the phone's status bar / notch */
@media (display-mode: standalone) { .nav { padding-top: env(safe-area-inset-top); } }

/* pop-ups never scroll sideways on phones */
.modal, .modal-body { min-width: 0; overflow-x: hidden; }
.modal-body { overflow-wrap: anywhere; }

/* free-order alarm */
.kx-alarm { border-color: rgba(239,68,68,.55) !important; background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(239,68,68,.03)), var(--bg-card, #14171d); animation: kxRise .55s cubic-bezier(.2,.8,.2,1) both, kxAlarm 2.4s ease-in-out .6s 3; }
@keyframes kxAlarm { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.18); } }
@media (prefers-reduced-motion: reduce) { .kx-alarm { animation: none !important; } }

/* ===== 10x motion (2026-10-10) — transform/opacity only, so it stays smooth on phones ===== */
.kx-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.kx-aurora i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .22; will-change: transform; }
.kx-aurora i:nth-child(1) { background: #00c9a7; top: -35vmax; left: -20vmax; animation: kxDrift1 18s ease-in-out infinite alternate; }
.kx-aurora i:nth-child(2) { background: #22d3ee; bottom: -40vmax; right: -25vmax; opacity: .14; animation: kxDrift2 22s ease-in-out infinite alternate; }
.kx-aurora i:nth-child(3) { background: #d9b25a; top: 30vh; left: 40vw; width: 40vmax; height: 40vmax; opacity: .07; animation: kxDrift1 26s ease-in-out infinite alternate-reverse; }
@keyframes kxDrift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes kxDrift2 { to { transform: translate(-16vw, -12vh) scale(1.1); } }

/* scroll reveal */
.page-amazon .kx-reveal { opacity: 0; transform: translateY(26px) scale(.98); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); animation: none !important; }
.page-amazon .kx-reveal.in { opacity: 1; transform: none; }

/* big numbers: shimmer sweep + flash when they change */
.kx-hero .stat-value { background: linear-gradient(100deg, #fff 30%, #7ff3dd 45%, #fff 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kxShine 4.5s ease-in-out 1.2s infinite; }
@keyframes kxShine { 0% { background-position: 120% 0; } 55%,100% { background-position: -40% 0; } }
.kx-flash { animation: kxFlash .9s ease; }
@keyframes kxFlash { 0% { transform: scale(1); } 30% { transform: scale(1.08); text-shadow: 0 0 18px rgba(0,201,167,.8); } 100% { transform: scale(1); } }

/* greeting wave + title gradient */
.kx-wave { display: inline-block; transform-origin: 70% 70%; animation: kxWave 2.2s ease-in-out .9s 2; }
@keyframes kxWave { 0%,60%,100% { transform: rotate(0); } 10%,30% { transform: rotate(16deg); } 20%,40% { transform: rotate(-8deg); } 50% { transform: rotate(12deg); } }

/* loading skeleton shimmer */
.kx-skel { border-radius: 16px; height: 120px; margin-bottom: 14px; background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 75%); background-size: 200% 100%; animation: kxSkel 1.2s linear infinite; }
@keyframes kxSkel { to { background-position: -200% 0; } }

/* bouncy taps */
.bottom-nav-link:active .bottom-nav-icon, .btn:active { transform: scale(.9); }
.bottom-nav-link .bottom-nav-icon, .btn { transition: transform .18s cubic-bezier(.3,1.6,.5,1); }
.bottom-nav-link.active .bottom-nav-icon { animation: kxPop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes kxPop { 0% { transform: scale(.6) translateY(4px); } 100% { transform: none; } }

/* listing cards: glow border that follows the finger/mouse */
.page-amazon .kx-listings > .card { position: relative; overflow: hidden; }
.page-amazon .kx-listings > .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(0,201,167,.18), transparent 60%); }
.page-amazon .kx-listings > .card:hover::before, .page-amazon .kx-listings > .card:active::before { opacity: 1; }

/* confetti canvas */
.kx-confetti { position: fixed; inset: 0; z-index: 80; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .kx-aurora i, .kx-hero .stat-value, .kx-wave, .kx-skel, .kx-flash, .bottom-nav-link.active .bottom-nav-icon { animation: none !important; }
  .page-amazon .kx-reveal { opacity: 1; transform: none; transition: none; }
  .kx-hero .stat-value { color: inherit; background: none; }
}

/* ===== theme-aware motion + streak + live ticker (2026-10-10) ===== */
:root { --kx-num-a: var(--text-primary, #1a1d29); --kx-num-b: #00a58a; --kx-aurora: .10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kx-num-a: #ffffff; --kx-num-b: #7ff3dd; --kx-aurora: .22; } }
[data-theme="dark"] { --kx-num-a: #ffffff; --kx-num-b: #7ff3dd; --kx-aurora: .22; }
.kx-hero .stat-value { background-image: linear-gradient(100deg, var(--kx-num-a) 30%, var(--kx-num-b) 45%, var(--kx-num-a) 60%); }
.kx-aurora i:nth-child(1) { opacity: var(--kx-aurora); }
.kx-aurora i:nth-child(2) { opacity: calc(var(--kx-aurora) * .65); }

/* smooth theme switch: circular reveal (View Transitions) with a fade fallback */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: kxReveal .6s cubic-bezier(.4,0,.2,1); }
@keyframes kxReveal { from { clip-path: circle(0 at var(--kx-tx, 90%) var(--kx-ty, 30px)); } to { clip-path: circle(150vmax at var(--kx-tx, 90%) var(--kx-ty, 30px)); } }
html.kx-theme-fade, html.kx-theme-fade * { transition: background-color .45s ease, color .45s ease, border-color .45s ease !important; }
.nav-theme { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.nav-theme.spin { transform: rotate(360deg) scale(1.15); }

/* 🔥 streak */
.kx-streak { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4); color: #f59e0b; }
.kx-flame { display: inline-block; transform-origin: 50% 90%; animation: kxFlicker 1.4s ease-in-out infinite; font-size: calc(1rem + var(--kx-heat, 0) * .5rem); }
@keyframes kxFlicker { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.12) rotate(3deg); } }
.kx-streak.cold { background: rgba(148,163,184,.12); border-color: rgba(148,163,184,.35); color: var(--text-muted, #8a8fa3); }
.kx-streak.cold .kx-flame { animation: none; filter: grayscale(1); opacity: .6; }

/* live new-order banner */
.kx-ticker { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); z-index: 90; transform: translate(-50%, -140%); transition: transform .5s cubic-bezier(.2,1.4,.4,1);
  display: flex; gap: 10px; align-items: center; max-width: min(92vw, 420px); padding: 12px 16px; border-radius: 16px;
  background: linear-gradient(135deg, #00c9a7, #22d3ee); color: #04201a; font-weight: 700; box-shadow: 0 12px 30px rgba(0,201,167,.35); }
.kx-ticker.show { transform: translate(-50%, 0); }
.kx-ticker small { display: block; font-weight: 600; opacity: .8; }
.kx-sound { min-width: 38px; }
@media (prefers-reduced-motion: reduce) { .kx-flame, .kx-ticker { animation: none !important; transition: none !important; } ::view-transition-new(root) { animation: none; } }

/* ===== NEW SALE celebration (full screen) ===== */
.kx-sale { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 42%, rgba(0,201,167,.35), rgba(4,8,10,.92) 62%); animation: kxSaleIn .35s ease both; }
.kx-sale.out { animation: kxSaleOut .45s ease both; }
@keyframes kxSaleIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kxSaleOut { to { opacity: 0; transform: scale(1.04); } }
.kx-sale .ring { position: absolute; left: 50%; top: 42%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 4px solid #00c9a7; box-shadow: 0 0 40px #00c9a7, inset 0 0 30px #00c9a7; animation: kxShock 1.1s cubic-bezier(.1,.7,.3,1) both; }
.kx-sale .ring.r2 { border-color: #22d3ee; animation-delay: .18s; }
.kx-sale .ring.r3 { border-color: #d9b25a; animation-delay: .36s; }
@keyframes kxShock { from { transform: scale(.2); opacity: 1; } to { transform: scale(22); opacity: 0; } }
.kx-sale .rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: .18;
  background: repeating-conic-gradient(from 0deg, #00c9a7 0 6deg, transparent 6deg 18deg); animation: kxSpin 8s linear infinite, kxSaleIn .8s ease both;
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 55%); mask: radial-gradient(circle, #000 0 18%, transparent 55%); }
@keyframes kxSpin { to { transform: rotate(360deg); } }
.kx-sale .box { position: relative; text-align: center; transform: translateY(-6vh); }
.kx-sale .cart { font-size: 84px; display: inline-block; animation: kxDrop .9s cubic-bezier(.3,1.6,.5,1) both; filter: drop-shadow(0 10px 30px rgba(0,201,167,.6)); }
@keyframes kxDrop { 0% { transform: translateY(-60vh) rotate(-20deg) scale(.6); } 60% { transform: translateY(0) rotate(8deg) scale(1.15); } 100% { transform: none; } }
.kx-sale .amt { font: 800 clamp(44px, 14vw, 88px)/1 'JetBrains Mono', ui-monospace, monospace; color: #fff; letter-spacing: -.02em; margin-top: 8px;
  text-shadow: 0 0 24px rgba(0,201,167,.9), 0 0 60px rgba(34,211,238,.6); animation: kxPunch .7s cubic-bezier(.3,1.6,.5,1) .35s both; }
@keyframes kxPunch { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.kx-sale .lbl { margin-top: 10px; font: 800 clamp(22px, 7vw, 34px)/1.1 Outfit, system-ui, sans-serif; letter-spacing: .12em;
  background: linear-gradient(90deg, #00c9a7, #22d3ee, #d9b25a, #00c9a7); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: kxPunch .6s cubic-bezier(.3,1.6,.5,1) .55s both, kxGrad 2s linear infinite; }
@keyframes kxGrad { to { background-position: 300% 0; } }
.kx-sale .sub { margin-top: 10px; color: rgba(255,255,255,.75); font-weight: 600; animation: kxSaleIn .5s ease .8s both; }
.kx-sale .tap { position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.45); font-size: .85rem; animation: kxSaleIn .5s ease 1.4s both; }
.kx-sale canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kx-sale *, .kx-sale { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* product photo / placeholder */
.kx-photo { height: 150px; border-radius: 12px; margin-bottom: 10px; overflow: hidden; display: grid; place-items: center; background: #fff; }
.kx-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.kx-listings > .card:hover .kx-photo img { transform: scale(1.06); }
.kx-photo.ph { background: linear-gradient(135deg, rgba(0,201,167,.25), rgba(34,211,238,.12), rgba(217,178,90,.18)); background-size: 300% 300%; animation: kxPh 6s ease-in-out infinite; }
.kx-photo.ph span { font: 800 54px/1 Outfit, system-ui, sans-serif; color: rgba(255,255,255,.85); text-shadow: 0 6px 24px rgba(0,0,0,.25); animation: kxFloat 3s ease-in-out infinite; }
@keyframes kxPh { 50% { background-position: 100% 100%; } }
@keyframes kxFloat { 50% { transform: translateY(-6px); } }
.kx-zoom { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: rgba(0,0,0,0); transition: background .3s; padding: 20px; }
.kx-zoom img { max-width: 100%; max-height: 85vh; border-radius: 16px; background: #fff; transform: scale(.6); opacity: 0; transition: transform .35s cubic-bezier(.2,1.3,.4,1), opacity .25s; }
.kx-zoom.show { background: rgba(0,0,0,.8); }
.kx-zoom.show img { transform: none; opacity: 1; }

/* swipe page transitions */
html[data-swipe="left"] #main { animation: kxInRight .38s cubic-bezier(.2,.8,.2,1) both; }
html[data-swipe="right"] #main { animation: kxInLeft .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kxInRight { from { transform: translateX(28%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes kxInLeft { from { transform: translateX(-28%); opacity: 0; } to { transform: none; opacity: 1; } }
.kx-bump-l { animation: kxBumpL .35s ease; } .kx-bump-r { animation: kxBumpR .35s ease; }
@keyframes kxBumpL { 40% { transform: translateX(-14px); } }
@keyframes kxBumpR { 40% { transform: translateX(14px); } }
@media (prefers-reduced-motion: reduce) { html[data-swipe] #main, .kx-photo.ph, .kx-photo.ph span, .kx-bump-l, .kx-bump-r { animation: none !important; } }