:root {
  --start-bg: #080f20;
  --start-panel: rgba(22, 35, 65, .92);
  --start-panel-soft: rgba(17, 29, 55, .86);
  --start-line: rgba(133, 155, 218, .26);
  --start-cyan: #50d1d8;
  --start-violet: #8d62ee;
  --start-text: #edf2ff;
  --start-muted: #b7c4e6;
}

body {
  min-height: 100vh;
  color: var(--start-text);
  background:
    radial-gradient(circle at 78% 8%, rgba(141, 98, 238, .26), transparent 28%),
    radial-gradient(circle at 15% 35%, rgba(80, 209, 216, .17), transparent 33%),
    var(--start-bg) !important;
}

.start-commerce-header {
  position: sticky;
  top: 0;
  z-index: 20;
}

.start-commerce-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.start-commerce-nav a {
  color: var(--start-muted);
  font-weight: 800;
  text-decoration: none;
}

.start-commerce-nav a:hover { color: var(--start-cyan); }

.checkout-page, .package-page, .cart-page {
  background: transparent !important;
}

.checkout-card, .ai-package-card, .cart-panel {
  border: 1px solid var(--start-line) !important;
  border-radius: 22px !important;
  background: var(--start-panel) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .26) !important;
}

.ai-package-card.featured {
  border-color: rgba(80, 209, 216, .74) !important;
  box-shadow: 0 22px 65px rgba(80, 209, 216, .12) !important;
}

.credit-balance, .portal-notice {
  border-color: rgba(80, 209, 216, .42) !important;
  border-radius: 14px !important;
  background: rgba(80, 209, 216, .08) !important;
  color: var(--start-text) !important;
}

.package-price, .cart-price, .status-text { color: var(--start-cyan) !important; }

.primary-button {
  border: 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, var(--start-cyan), #4a7cff) !important;
  color: #07101e !important;
  font-weight: 900 !important;
}

.secondary-button, .cart-remove {
  border-color: var(--start-line) !important;
  border-radius: 13px !important;
  background: rgba(13, 24, 47, .76) !important;
  color: var(--start-text) !important;
}

.checkout-field input {
  border-color: var(--start-line) !important;
  border-radius: 13px !important;
  background: rgba(6, 14, 31, .78) !important;
  color: var(--start-text) !important;
}

@media (max-width: 700px) {
  .start-commerce-nav { gap: 8px; font-size: 13px; }
  .start-commerce-nav a:nth-child(3) { display: none; }
}
