/*
 * Final create page polish.
 * Loaded after the global theme files so the service order flow keeps its own
 * light/dark surfaces even when broad dashboard card rules are present.
 */

html[data-theme="light"] .main-content-wrapper .create-page,
html[data-theme="light"] .create-page {
  --create-final-page: #eef5ff;
  --create-final-surface: #ffffff;
  --create-final-surface-2: #f7fbff;
  --create-final-surface-3: #eaf4ff;
  --create-final-border: rgba(26, 86, 219, 0.14);
  --create-final-border-strong: rgba(26, 86, 219, 0.24);
  --create-final-text: #10213f;
  --create-final-muted: #4d6488;
  --create-final-soft: #7890b2;
  --create-final-shadow: 0 18px 44px rgba(26, 86, 219, 0.1);
  background:
    radial-gradient(circle at 12% 2%, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(16, 185, 129, 0.12), transparent 28%),
    var(--create-final-page) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page,
html[data-theme="dark"] .create-page {
  --create-final-page: #0e1118;
  --create-final-surface: #151a24;
  --create-final-surface-2: #1b2230;
  --create-final-surface-3: #202a3a;
  --create-final-border: rgba(148, 163, 184, 0.18);
  --create-final-border-strong: rgba(96, 165, 250, 0.34);
  --create-final-text: #f6f8fc;
  --create-final-muted: #bac5d8;
  --create-final-soft: #8794a9;
  --create-final-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  background:
    radial-gradient(circle at 14% 0%, rgba(37, 99, 235, 0.18), transparent 32%),
    radial-gradient(circle at 88% 8%, rgba(16, 185, 129, 0.12), transparent 28%),
    var(--create-final-page) !important;
}

html .main-content-wrapper .create-page .create-section,
html .main-content-wrapper .create-page .faq-section {
  background:
    linear-gradient(145deg, var(--create-final-surface), var(--create-final-surface-2)) !important;
  border: 1px solid var(--create-final-border) !important;
  box-shadow: var(--create-final-shadow) !important;
  color: var(--create-final-text) !important;
}

html .main-content-wrapper .create-page .create-section--services {
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.16), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(14, 165, 233, 0.12), transparent 30%),
    linear-gradient(145deg, var(--create-final-surface), var(--create-final-surface-2)) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-section--services {
  background:
    radial-gradient(circle at 10% 0%, rgba(59, 130, 246, 0.24), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(20, 184, 166, 0.16), transparent 30%),
    linear-gradient(145deg, #141923, #1c2431) !important;
}

html .main-content-wrapper .create-page .create-section-title,
html .main-content-wrapper .create-page .create-header-content h1,
html .main-content-wrapper .create-page .create-category-name,
html .main-content-wrapper .create-page .create-game-card__title,
html .main-content-wrapper .create-page .create-plan-name,
html .main-content-wrapper .create-page .create-plan-price,
html .main-content-wrapper .create-page .faq-section-title,
html .main-content-wrapper .create-page .faq-question {
  color: var(--create-final-text) !important;
}

html .main-content-wrapper .create-page .create-section-subtitle,
html .main-content-wrapper .create-page .create-section-subtitle--service-lead,
html .main-content-wrapper .create-page .create-header-content p,
html .main-content-wrapper .create-page .create-category-desc,
html .main-content-wrapper .create-page .create-game-card__description,
html .main-content-wrapper .create-page .create-plan-tagline,
html .main-content-wrapper .create-page .create-plan-feature-value,
html .main-content-wrapper .create-page .faq-answer {
  color: var(--create-final-muted) !important;
}

html .main-content-wrapper .create-page .create-category-card,
html .main-content-wrapper .create-page .create-game-card,
html .main-content-wrapper .create-page .create-egg,
html .main-content-wrapper .create-page .create-plan,
html .main-content-wrapper .create-page .create-game-plan-card,
html .main-content-wrapper .create-page .create-config-panel,
html .main-content-wrapper .create-page .create-config-selected-game,
html .main-content-wrapper .create-page .create-config-selected-runtime,
html .main-content-wrapper .create-page .create-plan-game-summary,
html .main-content-wrapper .create-page .faq-item {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--category-color, var(--accent, #2563eb)) 10%, transparent), transparent 45%),
    linear-gradient(180deg, var(--create-final-surface), var(--create-final-surface-2)) !important;
  border-color: var(--create-final-border) !important;
  color: var(--create-final-text) !important;
  box-shadow: 0 14px 34px rgba(15, 27, 61, 0.08) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-category-card,
html[data-theme="dark"] .main-content-wrapper .create-page .create-game-card,
html[data-theme="dark"] .main-content-wrapper .create-page .create-egg,
html[data-theme="dark"] .main-content-wrapper .create-page .create-plan,
html[data-theme="dark"] .main-content-wrapper .create-page .create-game-plan-card,
html[data-theme="dark"] .main-content-wrapper .create-page .create-config-panel,
html[data-theme="dark"] .main-content-wrapper .create-page .create-config-selected-game,
html[data-theme="dark"] .main-content-wrapper .create-page .create-config-selected-runtime,
html[data-theme="dark"] .main-content-wrapper .create-page .create-plan-game-summary,
html[data-theme="dark"] .main-content-wrapper .create-page .faq-item {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28) !important;
}

html .main-content-wrapper .create-page .create-category-card {
  border-top: 4px solid var(--category-color, var(--accent, #2563eb)) !important;
}

html .main-content-wrapper .create-page .create-category-card:hover,
html .main-content-wrapper .create-page .create-game-card:hover,
html .main-content-wrapper .create-page .create-plan:hover {
  border-color: color-mix(in srgb, var(--category-color, var(--accent, #2563eb)) 46%, var(--create-final-border)) !important;
  transform: translateY(-3px);
}

html .main-content-wrapper .create-page .create-category-icon,
html .main-content-wrapper .create-page .create-category-mark,
html .main-content-wrapper .create-page .create-category-label,
html .main-content-wrapper .create-page .create-service-kicker,
html .main-content-wrapper .create-page .create-service-trust-chip,
html .main-content-wrapper .create-page .create-plan-spec-card {
  background: color-mix(in srgb, var(--category-color, var(--accent, #2563eb)) 12%, var(--create-final-surface-3)) !important;
  border-color: color-mix(in srgb, var(--category-color, var(--accent, #2563eb)) 24%, var(--create-final-border)) !important;
  color: var(--category-color, var(--accent, #2563eb)) !important;
}

html .main-content-wrapper .create-page .create-category-cta,
html .main-content-wrapper .create-page .create-plan-select-btn,
html .main-content-wrapper .create-page .create-btn {
  background: linear-gradient(135deg, var(--category-color, #2563eb), #06b6d4) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.2) !important;
}

html .main-content-wrapper .create-page .create-category-card--disabled .create-category-cta,
html .main-content-wrapper .create-page .create-category-cta--disabled {
  background: var(--create-final-surface-3) !important;
  color: var(--create-final-soft) !important;
  box-shadow: none !important;
}

html .main-content-wrapper .create-page input,
html .main-content-wrapper .create-page select,
html .main-content-wrapper .create-page textarea,
html .main-content-wrapper .create-page .create-input,
html .main-content-wrapper .create-page .create-game-price-range__input,
html .main-content-wrapper .create-page .create-game-order-select,
html .main-content-wrapper .create-page .create-terms {
  background: var(--create-final-surface) !important;
  border-color: var(--create-final-border) !important;
  color: var(--create-final-text) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page input,
html[data-theme="dark"] .main-content-wrapper .create-page select,
html[data-theme="dark"] .main-content-wrapper .create-page textarea,
html[data-theme="dark"] .main-content-wrapper .create-page .create-input,
html[data-theme="dark"] .main-content-wrapper .create-page .create-game-price-range__input,
html[data-theme="dark"] .main-content-wrapper .create-page .create-game-order-select,
html[data-theme="dark"] .main-content-wrapper .create-page .create-terms {
  background: #10151f !important;
}

html .main-content-wrapper .create-page ::placeholder {
  color: var(--create-final-soft) !important;
}

/* Professional service selector: keep the 4-service choice, remove the playful oversized-card feel. */
html .main-content-wrapper .create-page .create-section--services {
  background: var(--create-final-surface) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-section--services {
  background: #141923 !important;
}

html .main-content-wrapper .create-page .create-category-card--purple { --category-color: #2563eb; }
html .main-content-wrapper .create-page .create-category-card--green { --category-color: #059669; }
html .main-content-wrapper .create-page .create-category-card--blue { --category-color: #1d4ed8; }
html .main-content-wrapper .create-page .create-category-card--cyan { --category-color: #0f766e; }
html .main-content-wrapper .create-page .create-category-card--amber { --category-color: #b45309; }

html .main-content-wrapper .create-page .create-category-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 14px !important;
}

html .main-content-wrapper .create-page .create-category-card {
  min-height: 210px !important;
  padding: 18px !important;
  gap: 16px !important;
  text-align: left !important;
  border: 1px solid var(--create-final-border) !important;
  border-left: 3px solid var(--category-color, #2563eb) !important;
  border-top: 1px solid var(--create-final-border) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--create-final-surface), var(--create-final-surface-2)) !important;
  box-shadow: 0 10px 24px rgba(15, 27, 61, 0.06) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-category-card {
  background: linear-gradient(180deg, #171d28, #141923) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

html .main-content-wrapper .create-page .create-category-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--category-color, #2563eb) 36%, var(--create-final-border)) !important;
  border-left-color: var(--category-color, #2563eb) !important;
  box-shadow: 0 16px 34px rgba(15, 27, 61, 0.1) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-category-card:hover {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34) !important;
}

html .main-content-wrapper .create-page .create-category-card__top {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

html .main-content-wrapper .create-page .create-category-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

html .main-content-wrapper .create-page .create-category-icon,
html .main-content-wrapper .create-page .create-category-mark {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--category-color, #2563eb) 10%, var(--create-final-surface-3)) !important;
  border: 1px solid color-mix(in srgb, var(--category-color, #2563eb) 22%, var(--create-final-border)) !important;
  color: var(--category-color, #2563eb) !important;
  font-size: 17px !important;
}

html .main-content-wrapper .create-page .create-category-label {
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--category-color, #2563eb) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
}

html .main-content-wrapper .create-page .create-category-name {
  margin: 0 !important;
  color: var(--create-final-text) !important;
  font-size: clamp(1.22rem, 1.4vw, 1.55rem) !important;
  line-height: 1.14 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

html .main-content-wrapper .create-page .create-category-desc {
  max-width: none !important;
  margin: 8px 0 0 !important;
  color: var(--create-final-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

html .main-content-wrapper .create-page .create-category-cta {
  width: 100% !important;
  min-height: 40px !important;
  justify-content: space-between !important;
  padding: 0 13px !important;
  border-radius: 8px !important;
  background: var(--create-final-text) !important;
  color: var(--create-final-surface) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 0.86rem !important;
  font-weight: 780 !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-category-cta {
  background: #2563eb !important;
  color: #ffffff !important;
}

html .main-content-wrapper .create-page .create-category-card:hover .create-category-cta {
  background: var(--category-color, #2563eb) !important;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  html .main-content-wrapper .create-page .create-section,
  html .main-content-wrapper .create-page .faq-section {
    border-radius: 18px !important;
  }

  html .main-content-wrapper .create-page .create-category-card,
  html .main-content-wrapper .create-page .create-plan {
    min-width: 0 !important;
  }

  html .main-content-wrapper .create-page .create-category-card {
    min-height: 0 !important;
    padding: 16px !important;
  }
}

/* Stronger project creation visual identity. */
html .main-content-wrapper .create-page {
  position: relative !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 8px 18px 48px !important;
  isolation: isolate;
}

html .main-content-wrapper .create-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(37, 99, 235, 0.12), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(20, 184, 166, 0.16), transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 42%);
}

html[data-theme="dark"] .main-content-wrapper .create-page::before {
  background:
    linear-gradient(115deg, rgba(37, 99, 235, 0.16), transparent 34%),
    radial-gradient(circle at 82% 16%, rgba(20, 184, 166, 0.12), transparent 25%);
}

html .main-content-wrapper .create-page .create-back-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  margin: 0 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--create-final-border) !important;
  background: color-mix(in srgb, var(--create-final-surface) 86%, transparent) !important;
  color: var(--create-final-muted) !important;
  box-shadow: 0 10px 24px rgba(15, 27, 61, 0.06) !important;
  text-decoration: none !important;
  font-weight: 740 !important;
}

html .main-content-wrapper .create-page .create-back-link:hover {
  color: var(--create-final-text) !important;
  border-color: var(--create-final-border-strong) !important;
  transform: translateY(-1px);
}

html .main-content-wrapper .create-page .create-steps {
  position: relative !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 10px !important;
  border: 1px solid var(--create-final-border) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--create-final-surface) 94%, transparent), color-mix(in srgb, var(--create-final-surface-2) 94%, transparent)) !important;
  box-shadow: 0 16px 36px rgba(15, 27, 61, 0.07) !important;
  overflow-x: auto;
}

html .main-content-wrapper .create-page .create-step {
  min-height: 42px !important;
  padding: 0 12px 0 0 !important;
  color: var(--create-final-muted) !important;
  white-space: nowrap;
}

html .main-content-wrapper .create-page .create-step.active {
  color: var(--create-final-text) !important;
}

html .main-content-wrapper .create-page .create-step.done {
  color: #059669 !important;
}

html .main-content-wrapper .create-page .create-step-num {
  width: 34px !important;
  height: 34px !important;
  border-width: 1px !important;
  background: var(--create-final-surface-3) !important;
  border-color: var(--create-final-border) !important;
  color: var(--create-final-muted) !important;
  box-shadow: none !important;
}

html .main-content-wrapper .create-page .create-step.active .create-step-num {
  background: linear-gradient(135deg, #0f1b3d, #2563eb) !important;
  color: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.38) !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22) !important;
}

html .main-content-wrapper .create-page .create-step.done .create-step-num {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  color: #ffffff !important;
}

html .main-content-wrapper .create-page .create-step-line {
  width: clamp(18px, 4vw, 54px) !important;
  margin: 0 12px 0 2px !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.32), rgba(20, 184, 166, 0.28)) !important;
  flex: 0 0 auto;
}

html .main-content-wrapper .create-page .create-section--services {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, var(--create-final-surface), var(--create-final-surface-2)) !important;
}

html .main-content-wrapper .create-page .create-section--services::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 156px;
  background:
    linear-gradient(135deg, #0f1b3d 0%, #1d4ed8 58%, #0f766e 100%);
  opacity: 1;
  pointer-events: none;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-section--services::before {
  background:
    linear-gradient(135deg, #0b1220 0%, #1d4ed8 62%, #0f766e 100%);
}

html .main-content-wrapper .create-page .create-section--services::after {
  content: '';
  position: absolute;
  top: 18px;
  right: 26px;
  width: 220px;
  height: 110px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 58%);
  pointer-events: none;
}

html .main-content-wrapper .create-page .create-section--services > .create-section-header {
  position: relative !important;
  z-index: 1;
  min-height: 156px !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 28px 30px 32px !important;
  border: 0 !important;
  color: #ffffff !important;
}

html .main-content-wrapper .create-page .create-section--services > .create-section-header .create-section-icon {
  width: 54px !important;
  height: 54px !important;
  padding: 15px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 20px 44px rgba(0, 0, 0, 0.14) !important;
}

html .main-content-wrapper .create-page .create-section--services > .create-section-header .create-section-title {
  color: #ffffff !important;
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  line-height: 0.98 !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
  max-width: 720px;
  text-wrap: balance;
}

html .main-content-wrapper .create-page .create-category-grid {
  position: relative !important;
  z-index: 2;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 0 22px 24px !important;
  margin-top: -34px !important;
}

html .main-content-wrapper .create-page .create-category-card {
  position: relative !important;
  min-height: 286px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--category-color, #2563eb) 26%, var(--create-final-border)) !important;
  border-left: 1px solid color-mix(in srgb, var(--category-color, #2563eb) 26%, var(--create-final-border)) !important;
  background: var(--create-final-surface) !important;
  box-shadow: 0 22px 42px rgba(15, 27, 61, 0.12) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-category-card {
  background: #151b26 !important;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3) !important;
}

html .main-content-wrapper .create-page .create-category-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 92px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--category-color, #2563eb) 88%, #0f1b3d 12%), color-mix(in srgb, var(--category-color, #2563eb) 42%, #0f1b3d 58%));
  opacity: 1;
}

html .main-content-wrapper .create-page .create-category-card::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 74px;
  height: 74px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(10deg);
}

html .main-content-wrapper .create-page .create-category-card:hover {
  transform: translateY(-7px) !important;
  border-color: color-mix(in srgb, var(--category-color, #2563eb) 58%, var(--create-final-border)) !important;
  box-shadow: 0 30px 58px rgba(15, 27, 61, 0.18) !important;
}

html .main-content-wrapper .create-page .create-category-card__top {
  position: relative !important;
  z-index: 2;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 18px !important;
  padding: 22px 20px 0 !important;
  min-height: 218px !important;
}

html .main-content-wrapper .create-page .create-category-icon,
html .main-content-wrapper .create-page .create-category-mark {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  border-radius: 17px !important;
}

html .main-content-wrapper .create-page .create-category-icon {
  align-self: flex-start !important;
  background: transparent !important;
}

html .main-content-wrapper .create-page .create-category-mark {
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12) !important;
}

html .main-content-wrapper .create-page .create-category-mark__icon {
  color: #ffffff !important;
  font-size: 1.55rem !important;
  filter: none !important;
}

html .main-content-wrapper .create-page .create-category-copy {
  align-items: flex-start !important;
  text-align: left !important;
}

html .main-content-wrapper .create-page .create-category-label {
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--category-color, #2563eb) 11%, var(--create-final-surface-3)) !important;
  color: var(--category-color, #2563eb) !important;
  font-size: 0.7rem !important;
}

html .main-content-wrapper .create-page .create-category-name {
  font-size: clamp(1.55rem, 2vw, 2rem) !important;
}

html .main-content-wrapper .create-page .create-category-desc {
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
}

html .main-content-wrapper .create-page .create-category-cta {
  position: relative !important;
  z-index: 3;
  width: calc(100% - 40px) !important;
  min-height: 46px !important;
  margin: auto 20px 20px !important;
  background: #0f1b3d !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 28px rgba(15, 27, 61, 0.12) !important;
}

html[data-theme="dark"] .main-content-wrapper .create-page .create-category-cta {
  background: #2563eb !important;
}

html .main-content-wrapper .create-page .create-category-card:hover .create-category-cta {
  background: var(--category-color, #2563eb) !important;
}

html .main-content-wrapper .create-page .create-category-coming-soon {
  top: 16px !important;
  right: -42px !important;
  z-index: 4 !important;
}

html .main-content-wrapper .create-page .create-section:not(.create-section--services) {
  border-radius: 22px !important;
  padding: 24px !important;
}

html .main-content-wrapper .create-page .create-section:not(.create-section--services) > .create-section-header {
  padding: 0 0 18px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid var(--create-final-border) !important;
}

html .main-content-wrapper .create-page .create-section:not(.create-section--services) .create-section-icon {
  width: 42px !important;
  height: 42px !important;
  padding: 11px !important;
  border-radius: 12px !important;
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
}

html .main-content-wrapper .create-page .create-games-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)) !important;
  gap: 18px !important;
}

html .main-content-wrapper .create-page .create-game-card {
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  text-align: left !important;
  background: var(--create-final-surface) !important;
  border: 1px solid var(--create-final-border) !important;
  box-shadow: 0 14px 32px rgba(15, 27, 61, 0.08) !important;
}

html .main-content-wrapper .create-page .create-game-card:hover,
html .main-content-wrapper .create-page .create-game-card.selected {
  transform: translateY(-5px) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  box-shadow: 0 24px 48px rgba(37, 99, 235, 0.14) !important;
}

html .main-content-wrapper .create-page .create-game-card__media {
  position: relative !important;
  min-height: 138px !important;
  background:
    linear-gradient(135deg, #0f1b3d, #1d4ed8) !important;
}

html .main-content-wrapper .create-page .create-game-card__image-frame {
  height: 138px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html .main-content-wrapper .create-page .create-game-card__image {
  width: 100% !important;
  height: 100% !important;
  opacity: 0.92;
}

html .main-content-wrapper .create-page .create-game-card__body {
  padding: 16px !important;
}

html .main-content-wrapper .create-page .create-game-card__footer {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--create-final-border) !important;
}

html .main-content-wrapper .create-page .create-game-card__genre,
html .main-content-wrapper .create-page .create-game-card__count {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: var(--create-final-surface-3) !important;
  color: var(--create-final-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 760 !important;
}

html .main-content-wrapper .create-page .create-game-card__badges {
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
}

html .main-content-wrapper .create-page .create-game-card__free-badge,
html .main-content-wrapper .create-page .create-game-card__featured-badge {
  border-radius: 999px !important;
  box-shadow: 0 10px 18px rgba(15, 27, 61, 0.16) !important;
}

html .main-content-wrapper .create-page .create-billing-toggle,
html .main-content-wrapper .create-page .create-game-filters,
html .main-content-wrapper .create-page .create-classic-plan-stage__summary {
  border: 1px solid var(--create-final-border) !important;
  background: color-mix(in srgb, var(--create-final-surface) 92%, var(--create-final-surface-3)) !important;
  box-shadow: 0 12px 28px rgba(15, 27, 61, 0.06) !important;
}

html .main-content-wrapper .create-page .create-plan,
html .main-content-wrapper .create-page .create-game-plan-card,
html .main-content-wrapper .create-page .mc-plan-card {
  border-radius: 18px !important;
  border-color: var(--create-final-border) !important;
  box-shadow: 0 16px 34px rgba(15, 27, 61, 0.08) !important;
}

html .main-content-wrapper .create-page .create-plan:hover,
html .main-content-wrapper .create-page .create-game-plan-card:hover,
html .main-content-wrapper .create-page .mc-plan-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 24px 48px rgba(15, 27, 61, 0.13) !important;
}

@media (max-width: 1180px) {
  html .main-content-wrapper .create-page .create-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html .main-content-wrapper .create-page {
    padding: 4px 0 34px !important;
  }

  html .main-content-wrapper .create-page .create-steps {
    border-radius: 14px !important;
  }

  html .main-content-wrapper .create-page .create-step span {
    display: none;
  }

  html .main-content-wrapper .create-page .create-section--services > .create-section-header {
    min-height: 132px !important;
    padding: 22px 18px 30px !important;
  }

  html .main-content-wrapper .create-page .create-section--services > .create-section-header .create-section-title {
    font-size: clamp(1.65rem, 8vw, 2.25rem) !important;
  }

  html .main-content-wrapper .create-page .create-category-grid {
    grid-template-columns: 1fr !important;
    padding: 0 14px 16px !important;
    margin-top: -24px !important;
  }

  html .main-content-wrapper .create-page .create-category-card {
    min-height: 248px !important;
  }

  html .main-content-wrapper .create-page .create-category-card__top {
    min-height: 184px !important;
    padding: 20px 18px 0 !important;
  }

  html .main-content-wrapper .create-page .create-section:not(.create-section--services) {
    padding: 18px !important;
  }
}


/* =====================================================================
   CH-DESIGN: selected card blue accent (egg / plan / game / category)
   Fix: selecteur .create-page (sans main-content-wrapper qui n'existe pas)
   + fallbacks couleur pour que le bleu resolve toujours.
   ===================================================================== */
html[data-theme="light"] .create-page { --create-sel: #0071e3; --create-sel-soft: rgba(0,113,227,0.16); }
html[data-theme="dark"] .create-page { --create-sel: #4aa3ff; --create-sel-soft: rgba(74,163,255,0.22); }

html .create-page .create-egg.selected,
html .create-page .create-plan.selected,
html .create-page .create-category-card.selected,
html .create-page .create-game-card.selected,
html .create-page .create-game-plan-card.selected {
  border-color: var(--create-sel, #0071e3) !important;
  box-shadow:
    0 0 0 2px var(--create-sel, #0071e3) inset,
    0 0 0 4px var(--create-sel-soft, rgba(0,113,227,0.16)),
    0 14px 34px rgba(0, 90, 200, 0.18) !important;
  background:
    radial-gradient(circle at 50% 0%, var(--create-sel-soft, rgba(0,113,227,0.16)), transparent 60%),
    linear-gradient(180deg, var(--create-final-surface, #fff), var(--create-final-surface-2, #f7fbff)) !important;
}
html .create-page .create-egg.selected .create-egg-name {
  color: var(--create-sel, #0071e3) !important;
}
html .create-page .create-egg.selected:hover,
html .create-page .create-plan.selected:hover,
html .create-page .create-category-card.selected:hover,
html .create-page .create-game-card.selected:hover,
html .create-page .create-game-plan-card.selected:hover {
  border-color: var(--create-sel, #0071e3) !important;
}