:root {
  --swan-background: hsl(220 17% 97%);
  --swan-foreground: hsl(220 13% 13%);
  --swan-card: hsl(0 0% 100%);
  --swan-card-soft: hsl(192 20% 99%);
  --swan-primary: hsl(193 82% 48%);
  --swan-primary-hover: hsl(193 82% 42%);
  --swan-primary-glow: hsl(192 71% 70%);
  --swan-secondary: hsl(192 20% 94%);
  --swan-muted: hsl(192 14% 96%);
  --swan-muted-foreground: hsl(192 9% 46%);
  --swan-border: hsl(192 13% 91%);
  --swan-success: hsl(142 71% 45%);
  --swan-warning: hsl(38 92% 50%);
  --swan-danger: hsl(0 84% 60%);
  --swan-radius: 8px;
  --swan-shadow-card: 0 2px 8px hsl(192 40% 20% / 0.06);
  --swan-shadow-card-hover: 0 8px 24px hsl(192 40% 20% / 0.15);
  --swan-shadow-button: 0 4px 12px hsl(193 82% 48% / 0.35);
  --swan-gradient-card: linear-gradient(135deg, var(--swan-card), var(--swan-card-soft));
  --swan-gradient-hero: linear-gradient(180deg, hsl(192 30% 96%), hsl(193 60% 92%));

  --primary-color: var(--swan-primary);
  --primary-light: var(--swan-primary-glow);
  --primary-dark: var(--swan-primary-hover);
  --bg-color: var(--swan-background);
  --card-bg: var(--swan-card);
  --text-color: var(--swan-foreground);
  --text-secondary: var(--swan-muted-foreground);
  --border-color: var(--swan-border);
  --success-color: var(--swan-success);
  --warning-color: var(--swan-warning);
  --danger-color: var(--swan-danger);
}

html,
body,
#root {
  min-height: 100%;
}

body {
  background: var(--swan-background) !important;
  color: var(--swan-foreground) !important;
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

a {
  color: var(--swan-primary);
}

a:hover {
  color: var(--swan-primary-hover);
}

img[src="/logo.png"],
img[src$="/logo.png"] {
  object-fit: contain;
}

/* Public header */
[class*="_header_"] {
  background: hsl(0 0% 100% / 0.86) !important;
  border-bottom: 1px solid var(--swan-border) !important;
  box-shadow: var(--swan-shadow-card) !important;
  backdrop-filter: blur(14px) !important;
}

[class*="_headerContainer_"] {
  height: 72px !important;
}

[class*="_logoImg_"] {
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--swan-radius) !important;
}

[class*="_navLink_"] {
  color: hsl(220 13% 28%) !important;
  border-radius: var(--swan-radius) !important;
  padding: 8px 10px !important;
}

[class*="_navLink_"]:hover,
[class*="_navLink_"][class*="_active_"] {
  color: var(--swan-primary) !important;
  background: hsl(193 82% 48% / 0.08) !important;
}

[class*="_navLink_"][class*="_active_"]::after {
  display: none !important;
}

/* Homepage and docs */
[class*="_homePage_"],
.home-page,
[class*="_apiDoc_"] {
  background: var(--swan-background) !important;
}

[class*="_homePage_"] {
  min-height: calc(100vh - 72px) !important;
  display: flex !important;
  flex-direction: column !important;
}

[class*="_heroSection_"],
[class*="_pageTitle_"] {
  background: var(--swan-gradient-hero) !important;
  border-bottom: 1px solid var(--swan-border) !important;
}

[class*="_homePage_"] > [class*="_heroSection_"] {
  flex: 1 0 auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 80px 0 72px !important;
  text-align: center !important;
}

[class*="_homePage_"] [class*="_heroContainer_"] {
  width: 100% !important;
}

[class*="_homePage_"] [class*="_heroContent_"] {
  max-width: 820px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

[class*="_homePage_"] [class*="_heroContent_"]::before {
  content: "";
  width: 86px;
  height: 86px;
  margin: 0 auto 28px;
  background: url("/logo.png") center / contain no-repeat;
  transform: translateY(-38px);
}

[class*="_homePage_"] [class*="_heroContent_"] h1 {
  margin: 0 0 24px !important;
  font-size: clamp(35px, 4.16vw, 61px) !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  background: linear-gradient(90deg, hsl(192 71% 60%), hsl(193 82% 48%)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

[class*="_homePage_"] [class*="_heroContent_"] .ant-typography {
  max-width: 780px !important;
}

[class*="_homePage_"] [class*="_heroContent_"] h1 + .ant-typography {
  margin: 0 0 34px !important;
  color: hsl(192 9% 46%) !important;
  font-size: clamp(18px, 2vw, 25px) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

[class*="_heroSection_"]::before {
  opacity: 0.06 !important;
  mix-blend-mode: multiply;
}

[class*="_heroTitle_"],
[class*="_sectionTitle_"] h2,
[class*="_pageTitleContainer_"] h1 {
  color: var(--swan-foreground) !important;
  letter-spacing: 0 !important;
}

[class*="_heroTitle_"] span,
.gradient-text {
  background: linear-gradient(90deg, var(--swan-primary), var(--swan-primary-glow)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

[class*="_heroSubtitle_"],
[class*="_sectionTitle_"] p,
[class*="_pageTitleContainer_"] p {
  color: var(--swan-muted-foreground) !important;
}

[class*="_roleSection_"],
[class*="_sectionGray_"] {
  background: var(--swan-background) !important;
}

[class*="_sectionDark_"] {
  background: linear-gradient(135deg, hsl(193 82% 42%), hsl(192 71% 60%)) !important;
}

[class*="_roleCard_"],
[class*="_featureCard_"],
[class*="_serviceCard_"],
[class*="_teamCard_"],
[class*="_pricingCard_"],
[class*="_blogCard_"],
[class*="_contactForm_"],
[class*="_contactInfoItem_"],
[class*="_content_"],
[class*="_sidebarFixed_"],
[class*="_apiBlock_"],
.feature-card,
.role-card {
  background: var(--swan-gradient-card) !important;
  border: 1px solid var(--swan-border) !important;
  border-radius: var(--swan-radius) !important;
  box-shadow: var(--swan-shadow-card) !important;
}

[class*="_roleCard_"]:hover,
[class*="_featureCard_"]:hover,
[class*="_serviceCard_"]:hover,
[class*="_teamCard_"]:hover,
[class*="_pricingCard_"]:hover,
[class*="_blogCard_"]:hover {
  box-shadow: var(--swan-shadow-card-hover) !important;
  transform: translateY(-2px) !important;
}

[class*="_roleCard_"] h3,
[class*="_featureCard_"] h3,
[class*="_pricingCard_"] h4,
[class*="_teamContent_"] h5,
[class*="_section_"] h2,
[class*="_section_"] h3 {
  color: var(--swan-primary) !important;
}

[class*="_roleFeatures_"] li,
[class*="_featureCard_"] p,
[class*="_blogContent_"] p,
[class*="_section_"] p,
[class*="_section_"] li {
  color: var(--swan-muted-foreground) !important;
}

/* Ant Design and dashboard surfaces */
.ant-layout,
.ant-layout-content,
.app-container,
.page-content {
  background: var(--swan-background) !important;
}

.ant-layout-sider,
.ant-menu,
.ant-menu-sub {
  background: var(--swan-card) !important;
}

.ant-layout-sider {
  border-right: 1px solid var(--swan-border) !important;
  box-shadow: var(--swan-shadow-card) !important;
}

.ant-menu-item,
.ant-menu-submenu-title {
  border-radius: var(--swan-radius) !important;
  margin-inline: 8px !important;
  width: calc(100% - 16px) !important;
}

.ant-menu-item-selected {
  background: hsl(193 82% 48% / 0.1) !important;
  color: var(--swan-primary) !important;
  font-weight: 600 !important;
}

.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  color: var(--swan-primary) !important;
  background: hsl(193 82% 48% / 0.08) !important;
}

.page-header,
.stat-card,
.section-card,
.form-card,
.filter-bar,
.data-table,
.ant-card,
.ant-modal-content,
.ant-drawer-content,
.stats-summary {
  background: var(--swan-gradient-card) !important;
  border: 1px solid var(--swan-border) !important;
  border-radius: var(--swan-radius) !important;
  box-shadow: var(--swan-shadow-card) !important;
}

.page-header {
  margin: 16px 16px 0 !important;
}

.page-content {
  padding: 20px !important;
}

.page-title,
.section-card h3,
.ant-card-head-title,
.ant-typography,
.stat-card .value {
  color: var(--swan-foreground) !important;
  letter-spacing: 0 !important;
}

.stat-card .title,
.tips-text,
.form-tip,
.ant-form-item-label > label {
  color: var(--swan-muted-foreground) !important;
}

.stat-card .value.primary,
.stats-summary b.primary {
  color: var(--swan-primary) !important;
}

.stat-card .value.success,
.stats-summary b.success {
  color: var(--swan-success) !important;
}

.ant-table,
.ant-table-container,
.ant-table-content,
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
  border-color: var(--swan-border) !important;
}

.ant-table-thead > tr > th {
  background: var(--swan-muted) !important;
  color: var(--swan-foreground) !important;
  font-weight: 600 !important;
}

.ant-table-tbody > tr:hover > td {
  background: hsl(193 82% 48% / 0.05) !important;
}

.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select-selector,
.ant-picker,
.ant-input-textarea textarea {
  border-color: var(--swan-border) !important;
  border-radius: var(--swan-radius) !important;
  background: hsl(0 0% 100% / 0.95) !important;
}

.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-input-number-focused,
.ant-select-focused .ant-select-selector,
.ant-picker-focused,
.ant-input-textarea textarea:focus {
  border-color: var(--swan-primary) !important;
  box-shadow: 0 0 0 3px hsl(193 82% 48% / 0.14) !important;
}

.ant-btn {
  border-radius: var(--swan-radius) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.ant-btn-primary {
  background: var(--swan-primary) !important;
  border-color: var(--swan-primary) !important;
  color: #fff !important;
  box-shadow: var(--swan-shadow-button) !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
  background: var(--swan-primary-hover) !important;
  border-color: var(--swan-primary-hover) !important;
  transform: translateY(-1px);
}

.ant-btn-default:hover,
.ant-btn-default:focus {
  color: var(--swan-primary) !important;
  border-color: var(--swan-primary) !important;
}

[class*="_headerButtons_"] .ant-btn:not(.ant-btn-primary) {
  background: hsl(0 0% 100% / 0.72) !important;
  border: 1px solid hsl(193 82% 48% / 0.22) !important;
  color: var(--swan-primary) !important;
  box-shadow: var(--swan-shadow-card) !important;
}

[class*="_headerButtons_"] .ant-btn:not(.ant-btn-primary):hover,
[class*="_headerButtons_"] .ant-btn:not(.ant-btn-primary):focus {
  background: hsl(193 82% 48% / 0.1) !important;
  border-color: var(--swan-primary) !important;
  color: var(--swan-primary) !important;
}

[class*="_headerButtons_"] .ant-btn-primary {
  background: var(--swan-primary) !important;
  border-color: var(--swan-primary) !important;
  color: #fff !important;
  box-shadow: var(--swan-shadow-button) !important;
}

[class*="_heroButtons_"] {
  gap: 24px !important;
  justify-content: center !important;
  align-items: center !important;
}

[class*="_heroButtons_"] .ant-btn {
  min-width: 192px !important;
  height: 56px !important;
  padding: 0 30px !important;
  border-radius: 12px !important;
  background: var(--swan-primary) !important;
  border-color: var(--swan-primary) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px hsl(193 82% 48% / 0.22) !important;
}

[class*="_heroButtons_"] .ant-btn span,
[class*="_heroButtons_"] .ant-btn svg {
  color: #fff !important;
}

[class*="_heroButtons_"] .ant-btn:hover,
[class*="_heroButtons_"] .ant-btn:focus {
  background: var(--swan-primary-hover) !important;
  border-color: var(--swan-primary-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

[class*="_homePage_"] > footer {
  margin-top: auto !important;
  padding: 18px 24px !important;
  background: hsl(0 0% 100% / 0.62) !important;
  border-top: 1px solid hsl(192 13% 91% / 0.72) !important;
  color: hsl(192 9% 46%) !important;
  box-shadow: 0 -8px 28px hsl(192 40% 20% / 0.08) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

[class*="_homePage_"] > footer .ant-typography {
  color: hsl(192 9% 46%) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn,
.ant-tabs-tab:hover,
.ant-pagination-item-active a,
.ant-pagination-item-active {
  color: var(--swan-primary) !important;
  border-color: var(--swan-primary) !important;
}

.ant-tabs-ink-bar {
  background: var(--swan-primary) !important;
}

.status-tag,
.ant-tag,
.mode-tag {
  border-radius: 999px !important;
}

/* Auth */
.auth-page {
  background: var(--swan-gradient-hero) !important;
}

.auth-card {
  width: min(420px, calc(100vw - 32px)) !important;
  background: hsl(0 0% 100% / 0.92) !important;
  border: 1px solid hsl(192 13% 91% / 0.85) !important;
  border-radius: var(--swan-radius) !important;
  box-shadow: var(--swan-shadow-card-hover) !important;
  backdrop-filter: blur(12px) !important;
}

.auth-card h2 {
  color: var(--swan-foreground) !important;
}

.auth-footer,
.register-tip {
  color: var(--swan-muted-foreground) !important;
}

/* Direct payment test page */
[class*="_page_uv0ou_"] {
  background: var(--swan-gradient-hero) !important;
}

[class*="_heroCard_uv0ou_"],
[class*="_formCard_uv0ou_"],
[class*="_tipCard_uv0ou_"] {
  background: hsl(0 0% 100% / 0.9) !important;
  border: 1px solid var(--swan-border) !important;
  border-radius: var(--swan-radius) !important;
  box-shadow: var(--swan-shadow-card) !important;
}

[class*="_heroBadge_uv0ou_"],
[class*="_payTypeBtnActive_uv0ou_"] {
  border-color: var(--swan-primary) !important;
  background: hsl(193 82% 48% / 0.1) !important;
  color: var(--swan-primary) !important;
}

/* Keep compact UI stable on small screens */
@media (max-width: 768px) {
  [class*="_headerContainer_"] {
    height: 64px !important;
  }

  .page-header {
    margin: 12px 12px 0 !important;
  }

  .page-content {
    padding: 12px !important;
  }

  .auth-card {
    padding: 24px !important;
  }
}