@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  --app-bg-0: #2b1230;
  --app-bg-1: #3a173f;
  --app-bg-2: #5f2f63;
  --app-surface-1: rgba(53, 21, 57, 0.9);
  --app-surface-2: rgba(36, 16, 40, 0.92);
  --app-line: rgba(255, 181, 217, 0.34);
  --app-text: #fff6fb;
  --app-muted: #efcde0;
  --app-brand: #ff6fa8;
  --app-brand-2: #25d366;
  --app-brand-3: #f4f6fa;
  --app-ice: #f4f6fa;
  --app-shadow-lg: 0 24px 48px rgba(36, 12, 39, 0.45);
  --app-shadow-md: 0 12px 24px rgba(31, 10, 34, 0.32);
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif !important;
  color: var(--app-text);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 111, 168, 0.28), transparent 40%),
    radial-gradient(circle at 84% 8%, rgba(37, 211, 102, 0.24), transparent 40%),
    radial-gradient(circle at 72% 82%, rgba(244, 246, 250, 0.2), transparent 44%),
    linear-gradient(148deg, var(--app-bg-0) 0%, var(--app-bg-1) 52%, var(--app-bg-2) 100%) !important;
}

header,
.container,
.cart-card,
.checkout-frame,
.thanks-card,
.main-container,
.scan-live-card,
.scan-feed-panel,
.alert-container,
.info-card,
.urgency-section,
.payment-box,
.offer-card,
.email-card,
.countdown-panel,
.guarantee-card {
  border-color: var(--app-line) !important;
  background: linear-gradient(145deg, var(--app-surface-1), var(--app-surface-2)) !important;
  position: relative;
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
}

a,
button {
  transition: transform 0.18s ease, filter 0.18s ease;
}

button:hover,
a:hover {
  filter: saturate(1.06);
}

button,
.btn-primary,
.action-btn,
.add-btn,
.main-cta,
.done-btn {
  background: linear-gradient(132deg, var(--app-brand), var(--app-brand-2), var(--app-brand-3)) !important;
  color: #3b1844 !important;
  border: none !important;
}

input,
textarea {
  border-color: rgba(255, 181, 217, 0.35) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--app-text) !important;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: rgba(55, 219, 136, 0.86) !important;
  box-shadow: 0 0 0 3px rgba(34, 226, 122, 0.18) !important;
}


/* App accent strip */
header::before,
.container::before,
.cart-card::before,
.checkout-frame::before,
.thanks-card::before,
.main-container::before,
.scan-live-card::before,
.scan-feed-panel::before,
.alert-container::before,
.info-card::before,
.urgency-section::before,
.payment-box::before,
.offer-card::before,
.email-card::before,
.countdown-panel::before,
.guarantee-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #cc6da3 0%, #eb94aa 28%, #b6dfb6 52%, #cce29c 76%, #f4f6fa 100%);
  opacity: 0.95;
  pointer-events: none;
}

button:hover,
a:hover {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
}