:root {
  --bg-main: #0b111e;
  --bg-card: #131c31;
  --bg-input: #1b2641;
  --color-primary: #38bdf8;
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  --glow-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
  --border-radius: 12px;
}

body {
  background-color: var(--bg-main) !important;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(56, 189, 248, 0.05) 0%, transparent 40%) !important;
  color: var(--color-text) !important;
  font-family: 'Segoe UI', Roboto, sans-serif !important;
}

.shop-container, .main-container, .container {
  max-width: 1200px;
  margin: 0 auto;
}

.auth-block, .payment__account, #account-form {
  background: var(--bg-card) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
  border-radius: var(--border-radius) !important;
  padding: 30px !important;
  box-shadow: var(--glow-shadow) !important;
  margin-bottom: 40px !important;
}

.auth-block h2, .payment__account-title {
  font-size: 24px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--color-primary) !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

.auth-block input, .payment__account-input, input[name="username"] {
  background: var(--bg-input) !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 14px 20px !important;
  color: #fff !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
}

.auth-block input:focus, .payment__account-input:focus, input[name="username"]:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4) !important;
}

.auth-block button, .payment__account-btn, .btn-submit {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 30px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.auth-block button:hover, .payment__account-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(56, 189, 248, 0.4) !important;
}

.products-grid, .shop__products, .products-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 30px !important;
}

.product-card, .shop__product, .products-item {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: var(--border-radius) !important;
  padding: 30px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: center !important;
}

.product-card:hover, .shop__product:hover {
  transform: translateY(-8px) !important;
  border-color: var(--color-primary) !important;
  box-shadow: var(--glow-shadow), inset 0 0 20px rgba(56, 189, 248, 0.05) !important;
}

.product-card h3, .shop__product-title {
  margin: 10px 0 !important;
  font-size: 22px !important;
  color: #fff !important;
}

.product-card .price, .shop__product-price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 15px 0 25px 0 !important;
}

.product-card .btn-buy, .shop__product-btn, .product-card button {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text) !important;
  padding: 12px 0 !important;
  width: 100% !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.product-card:hover .btn-buy, .shop__product:hover .shop__product-btn, .product-card:hover button {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3) !important;
}