:root {
  --pricing-light-text: #102033;
  --pricing-light-muted: #6f8194;
  --pricing-light-line: rgba(112, 199, 239, 0.30);
  --pricing-dark-text: #eaf8ff;
  --pricing-dark-muted: #9eb8c8;
  --pricing-dark-line: rgba(111, 217, 255, 0.24);
  --pricing-dark-line-strong: rgba(128, 229, 255, 0.42);
}

/* Shared pricing page cleanup */
html.pricing-theme main,
html.pricing-theme section,
html.pricing-theme [class*="bg-background"],
html.pricing-theme [class*="bg-card"],
html.pricing-theme [class*="bg-muted"] {
  background-color: transparent !important;
}

html.pricing-theme main .group.relative.flex.flex-col.rounded-xl.border > p {
  border-radius: 18px !important;
  padding: 14px 16px !important;
  min-height: 74px !important;
}

/* Light mode */
html.pricing-theme.light,
html.pricing-theme.light body,
html.pricing-theme.light #root,
html.pricing-theme.light body > div {
  background:
    radial-gradient(circle at 78% 5%, rgba(142, 241, 229, 0.42), transparent 34rem),
    radial-gradient(circle at 15% 8%, rgba(181, 230, 255, 0.56), transparent 34rem),
    linear-gradient(180deg, #effbff 0%, #f8fcff 45%, #ffffff 100%) !important;
  color: var(--pricing-light-text) !important;
}

html.pricing-theme.light header,
html.pricing-theme.light nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(143, 211, 243, 0.32) !important;
  box-shadow: 0 14px 44px rgba(86, 167, 216, 0.10) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}

html.pricing-theme.light main > div:has(input[placeholder*="????"]),
html.pricing-theme.light aside,
html.pricing-theme.light main > div:has(button[aria-pressed]) {
  background: rgba(255, 255, 255, 0.76) !important;
  border-color: var(--pricing-light-line) !important;
  box-shadow: 0 22px 56px rgba(78, 158, 209, 0.12) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
}

html.pricing-theme.light main .group.relative.flex.flex-col.rounded-xl.border {
  background: linear-gradient(90deg, rgba(213, 244, 255, 0.90) 0%, rgba(255, 255, 255, 0.96) 42%, rgba(255, 255, 255, 0.98) 100%) !important;
  border-color: rgba(122, 209, 248, 0.42) !important;
  box-shadow: 0 18px 48px rgba(77, 154, 205, 0.13) !important;
}

html.pricing-theme.light main .group.relative.flex.flex-col.rounded-xl.border > p {
  background: linear-gradient(180deg, rgba(232, 249, 255, 0.94), rgba(247, 252, 255, 0.94)) !important;
  border: 1px solid rgba(130, 217, 255, 0.32) !important;
  color: #64778a !important;
}

html.pricing-theme.light input,
html.pricing-theme.light button {
  background-color: rgba(255, 255, 255, 0.76) !important;
  border-color: rgba(124, 203, 242, 0.36) !important;
  color: #24384d !important;
}

html.pricing-theme.light input::placeholder {
  color: #8fa0b1 !important;
}

html.pricing-theme.light button[aria-pressed="true"],
html.pricing-theme.light [data-state="active"] {
  background: #0b1118 !important;
  color: #ffffff !important;
  border-color: #0b1118 !important;
}

html.pricing-theme.light h1,
html.pricing-theme.light h2,
html.pricing-theme.light h3,
html.pricing-theme.light strong,
html.pricing-theme.light b {
  color: #071320 !important;
}

html.pricing-theme.light [class*="muted"],
html.pricing-theme.light p:not(:has(*)) {
  color: var(--pricing-light-muted) !important;
}

/* Dark mode */
html.pricing-theme.dark,
html.pricing-theme.dark body,
html.pricing-theme.dark #root,
html.pricing-theme.dark body > div {
  background:
    radial-gradient(circle at 76% 4%, rgba(69, 238, 212, 0.20), transparent 34rem),
    radial-gradient(circle at 16% 7%, rgba(82, 176, 255, 0.24), transparent 34rem),
    radial-gradient(circle at 52% 48%, rgba(40, 102, 132, 0.16), transparent 42rem),
    linear-gradient(180deg, #071116 0%, #0b151b 46%, #070b0f 100%) !important;
  color: var(--pricing-dark-text) !important;
}

html.pricing-theme.dark header,
html.pricing-theme.dark nav {
  background: rgba(9, 20, 28, 0.78) !important;
  border-color: rgba(127, 221, 255, 0.18) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
}

html.pricing-theme.dark main > div:has(input[placeholder*="????"]),
html.pricing-theme.dark aside,
html.pricing-theme.dark main > div:has(button[aria-pressed]) {
  background: linear-gradient(180deg, rgba(18, 35, 46, 0.78), rgba(10, 22, 30, 0.72)) !important;
  border-color: var(--pricing-dark-line) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(20px) saturate(1.18) !important;
}

html.pricing-theme.dark main .group.relative.flex.flex-col.rounded-xl.border {
  background: linear-gradient(135deg, rgba(22, 58, 73, 0.92) 0%, rgba(13, 27, 37, 0.94) 46%, rgba(10, 18, 26, 0.96) 100%) !important;
  border-color: var(--pricing-dark-line-strong) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
}

html.pricing-theme.dark main .group.relative.flex.flex-col.rounded-xl.border:hover {
  background: linear-gradient(135deg, rgba(28, 74, 92, 0.96) 0%, rgba(16, 35, 47, 0.96) 48%, rgba(11, 20, 29, 0.98) 100%) !important;
  border-color: rgba(127, 235, 255, 0.58) !important;
}

html.pricing-theme.dark main .group.relative.flex.flex-col.rounded-xl.border > p {
  background: linear-gradient(180deg, rgba(18, 47, 61, 0.82), rgba(12, 27, 37, 0.78)) !important;
  border: 1px solid rgba(110, 218, 255, 0.24) !important;
  color: #b8d4e3 !important;
}

html.pricing-theme.dark input,
html.pricing-theme.dark button {
  background-color: rgba(11, 25, 34, 0.78) !important;
  border-color: rgba(119, 216, 255, 0.28) !important;
  color: #dceff8 !important;
}

html.pricing-theme.dark input::placeholder {
  color: #7892a4 !important;
}

html.pricing-theme.dark button[aria-pressed="true"],
html.pricing-theme.dark [data-state="active"] {
  background: linear-gradient(180deg, #eaf8ff, #bfefff) !important;
  color: #071116 !important;
  border-color: rgba(180, 245, 255, 0.70) !important;
  box-shadow: 0 8px 22px rgba(84, 220, 255, 0.22) !important;
}

html.pricing-theme.dark h1,
html.pricing-theme.dark h2,
html.pricing-theme.dark h3,
html.pricing-theme.dark strong,
html.pricing-theme.dark b {
  color: #f2fbff !important;
}

html.pricing-theme.dark h1 {
  text-shadow: 0 10px 42px rgba(91, 220, 255, 0.22) !important;
}

html.pricing-theme.dark [class*="muted"],
html.pricing-theme.dark p:not(:has(*)) {
  color: var(--pricing-dark-muted) !important;
}

html.pricing-theme svg,
html.pricing-theme img {
  filter: saturate(0.95) brightness(1.05);
}

/* Pricing detail modal polish */
html.pricing-theme [role="dialog"] {
  color: #18283a !important;
}

html.pricing-theme.light [role="dialog"] {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(138, 206, 238, 0.42) !important;
  box-shadow: 0 28px 90px rgba(30, 93, 134, 0.18) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
}

html.pricing-theme.dark [role="dialog"] {
  background: linear-gradient(180deg, rgba(18, 33, 43, 0.96), rgba(8, 16, 24, 0.98)) !important;
  border-color: rgba(119, 216, 255, 0.22) !important;
  box-shadow: 0 30px 96px rgba(0, 0, 0, 0.48) !important;
  color: #eaf8ff !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
}

html.pricing-theme [role="dialog"] h1,
html.pricing-theme [role="dialog"] h2,
html.pricing-theme [role="dialog"] h3,
html.pricing-theme [role="dialog"] strong,
html.pricing-theme [role="dialog"] b {
  color: inherit !important;
}

html.pricing-theme.light [role="dialog"] p,
html.pricing-theme.light [role="dialog"] span,
html.pricing-theme.light [role="dialog"] div {
  border-color: rgba(143, 211, 243, 0.28) !important;
}

html.pricing-theme.dark [role="dialog"] p,
html.pricing-theme.dark [role="dialog"] span,
html.pricing-theme.dark [role="dialog"] div {
  border-color: rgba(119, 216, 255, 0.18) !important;
}

html.pricing-theme.light [role="dialog"] [class*="text-muted"],
html.pricing-theme.light [role="dialog"] [class*="muted"] {
  color: #64778a !important;
}

html.pricing-theme.dark [role="dialog"] [class*="text-muted"],
html.pricing-theme.dark [role="dialog"] [class*="muted"] {
  color: #a7c1d1 !important;
}

html.pricing-theme.light [role="dialog"] button {
  background: rgba(255, 255, 255, 0.86) !important;
  color: #2f465f !important;
  border-color: rgba(124, 203, 242, 0.36) !important;
}

html.pricing-theme.dark [role="dialog"] button {
  background: rgba(11, 25, 34, 0.82) !important;
  color: #dceff8 !important;
  border-color: rgba(119, 216, 255, 0.24) !important;
}

html.pricing-theme [role="dialog"] button[aria-selected="true"],
html.pricing-theme [role="dialog"] button[data-state="active"] {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #1f3348 !important;
  box-shadow: 0 8px 24px rgba(42, 115, 156, 0.12) !important;
}

html.pricing-theme.dark [role="dialog"] button[aria-selected="true"],
html.pricing-theme.dark [role="dialog"] button[data-state="active"] {
  background: rgba(222, 247, 255, 0.92) !important;
  color: #071116 !important;
}